/* public/classic-diff.css: N30 /tools/classic-diff. Loads after tool.css and components/answer-table.css. Brand tokens only. */

/* Stage: tool.css grid gap kept, its 75rem talent columns and 48–75rem side split replaced. */
.cd-stage { grid-template-columns: minmax(0, 1fr); }
/* Provenance line opens the answer section at the full stage width. */
.cd-context { grid-column: 1 / -1; margin: 0; }
.cd-rail { display: grid; gap: var(--s-3); min-width: 0; align-content: start; }

/* Controls: three native fields, 44px, in the tool frame. */
.cd-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: .85rem; border: 1px solid var(--edge); border-top: 2px solid var(--accent); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--edge-inner); }
.cd-controls label { display: grid; gap: .25rem; min-width: 0; font: 400 .9rem/1.3 var(--font-ui); color: var(--ink-2); }
.cd-controls input, .cd-controls select { width: 100%; min-width: 0; min-height: 2.75rem; padding: .5rem; border: 1px solid var(--edge-inner); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font: 400 1rem/1.2 var(--font-ui); }
.cd-controls :is(input, select):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cd-count { grid-column: 1 / -1; margin: 0; font: 400 .85rem/1.4 var(--font-ui); color: var(--ink-3); }

/* Record list: one radio group; rows on hairlines, checked row on panel-2 with a 3px accent edge (SelectList rule). */
.cd-list { margin: 0; padding: 0; border: 1px solid var(--edge); box-shadow: var(--shadow-inner); background: var(--panel); max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; }
.cd-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); grid-template-areas: "icon name" "icon meta"; align-items: center; gap: 0 .6rem; min-height: 2.75rem; padding: 5px 10px 5px 9px; border-top: 1px solid var(--hairline); border-left: 3px solid transparent; font: 400 .92rem/1.3 var(--font-ui); color: var(--ink); cursor: pointer; }
.cd-list > .wfg-radio:first-of-type + .cd-item { border-top: 0; }
.cd-item-icon { grid-area: icon; width: 2rem; height: 2rem; box-shadow: 0 0 0 1px var(--edge), 0 0 0 3px var(--st, var(--unchanged)); }
.cd-item[data-state="new"] { --st: var(--new); }
.cd-item[data-state="changed"] { --st: var(--reworked); }
.cd-item[data-state="unchanged"] .cd-item-icon { filter: grayscale(1) brightness(.62); }
.cd-item-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
.cd-item-meta { grid-area: meta; display: block; font-size: .76rem; line-height: 1.3; color: var(--ink-3); overflow-wrap: anywhere; }
.wfg-radio:checked + .cd-item { background: var(--panel-2); border-left-color: var(--accent); }
.wfg-radio:checked + .cd-item .cd-item-name { color: var(--accent-text); }
.wfg-radio:focus-visible + .cd-item { outline: 2px solid var(--focus); outline-offset: -2px; }
.cd-empty { margin: 0; padding: 10px; font: 400 .9rem/1.4 var(--font-ui); color: var(--ink-3); }

/* Compare panel: tooltip ground, flat, pixel border. */
.cd-panel { min-width: 0; padding: .8rem .9rem .9rem; border: 1px solid var(--edge); background: var(--tip-ground); box-shadow: var(--shadow-inner); color: var(--ink); scroll-margin-top: calc(var(--header-h) + .5rem); }
.cd-head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); grid-template-areas: "icon name" "icon was" "meta meta"; gap: .1rem .7rem; align-items: center; }
.cd-head-icon { grid-area: icon; width: 3rem; height: 3rem; box-shadow: 0 0 0 2px var(--st, var(--unchanged)), 0 0 0 3px var(--edge); }
.cd-head[data-state="new"] { --st: var(--new); }
.cd-head[data-state="changed"] { --st: var(--reworked); }
.cd-name { grid-area: name; margin: 0; font: var(--heading-weight) 1.5rem/1.25 var(--font-heading); letter-spacing: 0; color: var(--accent-text); }
.cd-was { grid-area: was; margin: 0; font: 400 .85rem/1.3 var(--font-ui); color: var(--tip-muted); }
.cd-meta { grid-area: meta; display: block; margin: .35rem 0 0; font: 400 .85rem/1.3 var(--font-ui); color: var(--tip-muted); overflow-wrap: anywhere; }
.cd-placeholder { margin: 0; font: 400 .95rem/1.45 var(--font-ui); color: var(--tip-muted); }

/* Warning strip: a 2px edge in the correction white, the reason verbatim, the source link. One strip per reason, stacked. */
.cd-warn { display: flex; gap: .5rem; margin: .7rem 0 0; padding: .5rem .7rem; border: 1px solid var(--edge); border-left: 3px solid var(--correction); background: var(--panel-2); font: 400 .86rem/1.45 var(--font-ui); color: var(--ink); }
.cd-warn[hidden] { display: none; }
.cd-warn::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .45em; border-radius: 50%; background: var(--correction); }
.cd-warn[data-kind="new"] { border-left-color: var(--new); }
.cd-warn[data-kind="new"]::before { background: var(--new); }
.cd-warn a { color: var(--accent-text); }

/* Compare table: AnswerTable rows; the two value columns share the width equally and the rank column stays narrow. */
.cd-compare { margin-top: .7rem; }
.cd-compare table { table-layout: fixed; }
.cd-compare thead th:first-child { width: 7.5rem; }
.cd-compare thead th.cd-col-forever { color: var(--ink); }
.cd-compare thead th.cd-col-classic { color: var(--ink-3); }
.cd-compare tbody th { white-space: nowrap; }
.cd-diff-word { display: block; font: 400 .7rem/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cd-compare tr[data-diff="changed"] .cd-diff-word { color: var(--reworked); }
.cd-cell { color: var(--classic-yellow); overflow-wrap: anywhere; }
.cd-compare td[data-label="Classic Era"].cd-cell { color: color-mix(in srgb, var(--classic-yellow) 72%, var(--tip-muted)); }
.cd-compare tr[data-diff="changed"] > td { background: color-mix(in srgb, var(--reworked) var(--mix-faint), transparent); }
.cd-compare td.cd-none, .cd-compare td.cd-gap { color: var(--tip-muted); font-style: italic; }
.cd-compare td.cd-gap { box-shadow: inset 3px 0 0 var(--correction); }
.cd-compare td.cd-none { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink-3) 10%, transparent) 6px 7px); }

/* Copy Link row. */
.cd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .7rem; }
.cd-feedback { flex: 1 1 12rem; min-width: 0; margin: 0; font: 400 .88rem/1.4 var(--font-ui); color: var(--ink-2); overflow-wrap: anywhere; }
.cd-fallback { display: grid; flex-basis: 100%; gap: .3rem; font: 400 .88rem/1.4 var(--font-ui); color: var(--ink-2); }
.cd-fallback[hidden] { display: none; }
.cd-fallback input { width: 100%; min-width: 0; min-height: 2.75rem; box-sizing: border-box; padding: .5rem; border: 1px solid var(--line-control); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font: 400 .9rem/1.3 var(--font-ui); }

/* 820 (page 48rem+): the three fields on one row; list and panel still stacked. */
@container page (width >= 48rem) {
  .cd-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); align-items: end; }
  .cd-list { max-height: 18rem; }
}

/* 1440 (page 64rem+): rail left, panel right; the rail is sticky so the list stays beside a long panel. */
@container page (width >= 64rem) {
  .cd-stage { grid-template-columns: 22rem minmax(0, 1fr); gap: var(--s-5); row-gap: var(--s-3); align-items: start; }
  .cd-rail { position: sticky; top: calc(var(--header-h) + .5rem); }
  .cd-controls { grid-template-columns: minmax(0, 1fr); }
  .cd-list { max-height: calc(100dvh - var(--header-h) - 18rem); }
}

/* Phones under 39rem of page: answer-table.css already turns each rank into labeled lines; the Classic Era label dims to match its text. */
@container page (width < 39rem) {
  .cd-compare td[data-label="Classic Era"]::before { color: var(--ink-3); }
  .cd-compare tbody th { white-space: normal; }
  .cd-diff-word { display: inline; margin-left: .4rem; }
  .cd-compare tr[data-diff="changed"] { box-shadow: inset 3px 0 0 var(--reworked); }
  .cd-compare tr[data-diff="changed"] > td { background: none; }
}
@container page (width < 20rem) {
  .cd-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "was" "meta"; }
  .cd-head-icon { display: none; }
}

@media (prefers-reduced-motion: reduce) { .cd-list { scroll-behavior: auto; } }
@media (forced-colors: active) {
  .cd-item-icon, .cd-head-icon { forced-color-adjust: none; }
  .wfg-radio:checked + .cd-item { outline: 3px solid Highlight; outline-offset: -3px; }
  .cd-compare tr[data-diff="changed"] > td { background: none; border-left: 3px solid Highlight; }
  .cd-cell, .cd-warn { color: CanvasText; }
}

/* Local hidden rule: author origin beats the UA [hidden] rule that .wfg-btn, .cd-controls and .cd-fallback otherwise override. */
.cd-stage [hidden] { display: none; }

.cd-compare td.cd-cell { color: var(--classic-yellow); }

.cd-source { margin: .6rem 0 0; font: 400 .8rem/1.45 var(--font-ui); color: var(--tip-muted); overflow-wrap: anywhere; }
/* Classless notes the renderer appends (wording-only, dataset note) take the panel's meta size, not the body size. */
.cd-panel p:not([class]) { margin: .6rem 0 0; font: 400 .88rem/1.45 var(--font-ui); color: var(--ink-2); }

.cd-list { position: relative; }

/* Tooltip sentences are long: under 30rem of page the Forever / Classic Era label sits above its sentence, not beside it. */
@container page (width < 30rem) { .cd-compare td[data-label] { grid-template-columns: minmax(0, 1fr); } }

.cd-compare tr[data-diff="gap"] .cd-diff-word { color: var(--correction); }