/* Source Cleanup demo. Five records drift into line, each conflict is settled by
   a rule, the winning values land in one record. Then the clutter is archived and
   one term gets one meaning. Drawn on the page: type, hairlines, one accent. */
.sc code {font-family:'Martian Mono',ui-monospace,monospace;font-size:.6875rem;line-height:1.6;font-variant-ligatures:none}
.sc button:focus-visible {outline:1px solid var(--oxide);outline-offset:4px}

.sc-pick {display:flex;flex-wrap:wrap;gap:.4rem 1.8rem}
.sc-pick button {padding:.3rem 0;font:400 clamp(1.25rem,1.9vw,1.75rem)/1.2 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.015em;color:var(--ink-2);background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .25s,text-decoration-color .25s}
.sc-pick button:hover {color:var(--ink);text-decoration-color:var(--rule)}
.sc-pick button[aria-pressed="true"] {color:var(--ink);text-decoration-color:var(--oxide)}

/* The table: fields down, sources across, the one record on the right. */
.sc-table {position:relative;margin-top:clamp(2.2rem,4vw,3.4rem);border-bottom:1px solid var(--rule)}
.sc-row {display:grid;grid-template-columns:7.5rem repeat(5,minmax(0,1fr)) minmax(12rem,1.45fr);column-gap:clamp(.9rem,1.5vw,1.6rem);align-items:start;padding:.85rem 0;border-top:1px solid var(--rule);transition:border-color .5s}
.sc-head {align-items:end;padding:.6rem 0 .9rem}
.sc-label {font-size:.8125rem;line-height:1.45;color:var(--ink-2);padding-top:.1rem;transition:color .3s}
.sc-row.is-active .sc-label {color:var(--oxide)}

.sc-cell {position:relative;min-width:0;font-size:.875rem;line-height:1.45;color:var(--ink);overflow-wrap:anywhere;
  transition:transform 1.5s cubic-bezier(.65,0,.25,1),opacity .6s var(--ease),color .4s;transform:none}
.sc-col b {display:block;font-weight:500;font-size:.875rem;color:var(--ink)}
.sc-col code {display:block;color:var(--ink-2)}
.sc-cell.is-empty i {font-style:normal;color:var(--ink-2);opacity:.6}
.sc-cell.is-win {color:var(--ink);text-decoration:underline;text-decoration-color:var(--oxide);text-decoration-thickness:1px;text-underline-offset:.3em}
.sc-cell.is-lose {opacity:.34}
.sc-cell.is-diff {text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--ink-2)}
.sc[data-phase="merged"] .sc-cell.is-lose,.sc[data-phase="clean"] .sc-cell.is-lose,.sc:not([data-state]) .sc-cell.is-lose {opacity:.26}

.sc-gold {min-width:0;padding-left:clamp(.9rem,1.5vw,1.4rem);border-left:1px solid var(--oxide);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.sc-head .sc-gold b {display:block;font:400 1.25rem/1.2 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.015em;color:var(--ink)}
.sc-head .sc-gold code {display:block;color:var(--oxide)}
.sc-gv {display:block;font:400 1.08rem/1.35 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink)}
.sc-rule {display:block;margin-top:.2rem;font-size:.75rem;line-height:1.45;color:var(--ink-2)}
.sc-fly {position:absolute;z-index:2;font-size:.875rem;line-height:1.45;color:var(--oxide);pointer-events:none;transition:transform .8s cubic-bezier(.65,0,.25,1),opacity .35s .55s}

/* Scatter: before the drift, each record sits on its own, off the grid. */
.sc[data-phase="scatter"] .sc-cell {transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}
.sc[data-phase="scatter"] .sc-row {border-top-color:transparent}
.sc[data-phase="scatter"] .sc-table {border-bottom-color:transparent}

/* Below: the sources that go, and the word that gets one meaning. */
.sc-lower {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(3rem,7vw,7rem);margin-top:clamp(2.4rem,4vw,3.4rem)}
.sc-lower section {min-width:0}
.sc-h {font:400 1.25rem/1.25 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.015em;color:var(--ink)}
.sc-stale {list-style:none;margin:1.1rem 0 0;padding:0;border-top:1px solid var(--rule)}
.sc-stale li {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.4rem;padding:.65rem 0;border-bottom:1px solid var(--rule);transition:opacity .5s var(--ease),transform .55s var(--ease)}
.sc-s-name {position:relative;justify-self:start;font-size:.9375rem;color:var(--ink)}
.sc-s-name::after {content:'';position:absolute;left:0;right:0;top:55%;height:1px;background:var(--ink-2);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.sc-s-where {grid-column:1;font-size:.8125rem;color:var(--ink-2)}
.sc-s-verdict {grid-column:2;grid-row:1/3;align-self:center;font-size:.875rem;color:var(--oxide);opacity:0;transform:translateX(-6px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.sc-stale li.is-done .sc-s-verdict {opacity:1;transform:none}
.sc-stale li.is-done[data-archived] .sc-s-name::after {transform:scaleX(1)}
.sc-stale li.is-done[data-archived] {opacity:.62}

.sc-term {margin-top:1.1rem;font:400 clamp(1.6rem,2.4vw,2.2rem)/1.1 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.022em;color:var(--ink)}
.sc-defs {list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.2rem}
.sc-defs li {display:grid;grid-template-columns:6.5rem minmax(0,1fr);column-gap:1rem;padding:.3rem 0;font-size:.9375rem;line-height:1.45;transition:opacity .5s var(--ease),transform .55s var(--ease)}
.sc-team {color:var(--ink-2)}
.sc-def {position:relative;justify-self:start;color:var(--ink);font:400 1.05rem/1.4 'Fraunces','Fraunces Fallback',Georgia,serif}
.sc-def {text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:transparent;transition:text-decoration-color .5s}
.sc-defs li.is-cut {opacity:.4}
.sc-defs li.is-cut .sc-def {text-decoration-color:var(--ink-2)}
.sc-defs li.is-keep .sc-def {text-decoration-line:underline;text-decoration-color:var(--oxide);text-decoration-thickness:1px;text-underline-offset:.28em}
.sc-defs li.is-keep .sc-team {color:var(--oxide)}
.sc-agreed {margin-top:.9rem;font-size:.8125rem;color:var(--ink-2);transition:opacity .5s var(--ease),transform .55s var(--ease)}

/* Running: parts start hidden and arrive with .is-on. Before the script, everything shows. */
.sc[data-state] :is(.sc-cell,.sc-gold,.sc-stale li,.sc-defs li,.sc-agreed):not(.is-on) {opacity:0}
.sc[data-state] :is(.sc-stale li,.sc-defs li,.sc-agreed):not(.is-on) {transform:translateY(5px)}
.sc[data-state] .sc-gold:not(.is-on) {transform:translateX(-8px)}

@media(max-width:860px){
 .sc-row.sc-head {display:none}
 .sc-row {display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;padding:1rem 0}
 .sc-label {flex-basis:100%;color:var(--ink)}
 .sc-cell {font-size:.8125rem}
 .sc-cell::before {content:attr(data-src);display:block;font-size:.6875rem;color:var(--ink-2);text-decoration:none}
 .sc-cell.is-empty {display:none}
 .sc-cell.is-diff,.sc-cell.is-win {text-decoration:none}
 .sc-cell.is-win::before {color:var(--oxide)}
 .sc-gold {flex-basis:100%;margin-top:.4rem}
 .sc-lower {grid-template-columns:1fr;gap:2.6rem}
}
.sc-label,.sc-lower {transition:opacity .6s var(--ease),color .3s}
.sc[data-phase="scatter"] .sc-label,.sc[data-phase="scatter"] .sc-cell.is-empty {opacity:0}
.sc:is([data-phase="scatter"],[data-phase="aligned"],[data-phase="resolving"]) .sc-lower {opacity:0}