/* Work Data Lab — component stylesheet. Loads after tokens.css. Every value is a token. */

/* ---------- Base ---------- */
.wdl-root, .wdl-page { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 0; }
.wdl-root *, .wdl-page * { box-sizing: border-box; }
.wdl-num, .wdl-table td.num, .wdl-table th.num, .wdl-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.wdl-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }
.wdl-serif { font-family: var(--font-display); font-weight: 400; }
.wdl-muted { color: var(--ink-muted); }
.wdl-secondary { color: var(--ink-secondary); }
.wdl-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.wdl-link { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--indigo-300); transition: color var(--duration-instant) var(--ease-soft), text-decoration-color var(--duration-instant) var(--ease-soft); }
.wdl-link:hover { color: var(--primary-hover); text-decoration-color: currentColor; }
::selection { background: var(--selection); color: var(--ink); }
.wdl-focus:focus-visible, .wdl-root :focus-visible, .wdl-page :focus-visible { outline: var(--border-rule) solid var(--focus-ring); outline-offset: 2px; }
.wdl-icon { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.wdl-icon--20 { width: 20px; height: 20px; }

/* ---------- Patchwork grid ---------- */
.wdl-container { max-width: var(--grid-web-max); margin: 0 auto; padding: 0 var(--grid-web-margin); }
.wdl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-web-gutter); }
.wdl-grid--product { grid-template-columns: repeat(24, minmax(0, 1fr)); gap: var(--grid-product-gutter); }
.wdl-span { grid-column: span var(--span, 12); }
/* Stitched patches: the container's seam colour shows through a 1px gap. */
.wdl-patches { display: grid; grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); gap: var(--seam-gap); background: var(--seam); border: var(--border-hairline) solid var(--seam); }
.wdl-patch { grid-column: span var(--span, 4); background: var(--surface); padding: var(--space-5); min-width: 0; }
.wdl-patch--subtle { background: var(--surface-subtle); }
.wdl-patch--paper { background: var(--paper); }
.wdl-patch--ink { background: var(--ink); color: var(--surface); }
.wdl-patch--indigo { background: var(--indigo-900); color: var(--surface); }
.wdl-patch--dense { padding: var(--space-4); }
.wdl-seam { height: 0; border: 0; border-top: var(--border-hairline) solid var(--seam); margin: 0; }
.wdl-seam--strong { border-top-color: var(--seam-strong); }
@media (max-width: 720px) {
  .wdl-container { padding: 0 var(--space-4); }
  .wdl-grid { gap: var(--space-4); }
  .wdl-span, .wdl-patch { grid-column: 1 / -1; }
}

/* ---------- Buttons ---------- */
.wdl-btn { --h: 36px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--h); padding: 0 var(--space-4); border-radius: var(--radius-1); border: var(--border-hairline) solid transparent; font: 500 14px/20px var(--font-sans); letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--duration-instant) var(--ease-soft), border-color var(--duration-instant) var(--ease-soft), color var(--duration-instant) var(--ease-soft); }
.wdl-btn:focus-visible { outline: var(--border-rule) solid var(--focus-ring); outline-offset: 2px; }
.wdl-btn--primary { background: var(--primary); color: var(--on-primary); }
.wdl-btn--primary:hover { background: var(--primary-hover); }
.wdl-btn--primary:active { background: var(--primary-press); }
.wdl-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-control); }
.wdl-btn--secondary:hover { border-color: var(--ink); }
.wdl-btn--secondary:active { background: var(--surface-subtle); }
.wdl-btn--quiet { background: transparent; color: var(--primary); padding: 0 var(--space-2); }
.wdl-btn--quiet:hover { background: var(--primary-soft); color: var(--primary-hover); }
.wdl-btn--sm { --h: 28px; padding: 0 var(--space-3); font-size: 13px; }
.wdl-btn--lg { --h: 48px; padding: 0 var(--space-5); font-size: 16px; }
.wdl-btn[disabled], .wdl-btn[aria-disabled="true"] { cursor: not-allowed; background: var(--surface-subtle); color: var(--ink-muted); border-color: var(--seam); }
.wdl-btn .wdl-icon { transition: transform var(--duration-instant) var(--ease-soft); }
.wdl-btn:hover .wdl-icon--nudge { transform: translateX(2px); }

/* ---------- Inputs ---------- */
.wdl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wdl-label { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.wdl-help { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.wdl-help--error { color: var(--error); }
.wdl-input, .wdl-select { height: 36px; padding: 0 var(--space-3); background: var(--surface); border: var(--border-hairline) solid var(--border-control); border-radius: var(--radius-1); font: 400 14px/20px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; transition: border-color var(--duration-instant) var(--ease-soft), box-shadow var(--duration-instant) var(--ease-soft); width: 100%; }
.wdl-input::placeholder { color: var(--ink-muted); }
.wdl-input:hover, .wdl-select:hover { border-color: var(--ink-secondary); }
.wdl-input:focus, .wdl-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.wdl-input[aria-invalid="true"] { border-color: var(--error); }
.wdl-input[disabled] { background: var(--surface-subtle); color: var(--ink-muted); border-color: var(--seam-strong); }
.wdl-input--mono { font-family: var(--font-mono); font-size: 13px; }
.wdl-select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-secondary) 50%), linear-gradient(135deg, var(--ink-secondary) 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px; background-repeat: no-repeat; }
.wdl-search { position: relative; }
.wdl-search .wdl-icon { position: absolute; left: 10px; top: 10px; color: var(--ink-muted); }
.wdl-search .wdl-input { padding-left: 34px; }
.wdl-check { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 14px/20px var(--font-sans); cursor: pointer; }
.wdl-check input { appearance: none; width: 16px; height: 16px; margin: 0; border: var(--border-hairline) solid var(--border-control); border-radius: var(--radius-1); background: var(--surface); display: grid; place-content: center; transition: background-color var(--duration-instant) var(--ease-soft); }
.wdl-check input:checked { background: var(--primary); border-color: var(--primary); }
.wdl-check input:checked::after { content: ""; width: 8px; height: 4px; border-left: 1.5px solid var(--on-primary); border-bottom: 1.5px solid var(--on-primary); transform: translateY(-1px) rotate(-45deg); }
.wdl-check input:focus-visible { outline: var(--border-rule) solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Tabs ---------- */
.wdl-tabs { display: flex; gap: var(--space-5); border-bottom: var(--border-hairline) solid var(--seam-strong); }
.wdl-tab { position: relative; background: none; border: 0; padding: var(--space-3) 0; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); cursor: pointer; transition: color var(--duration-instant) var(--ease-soft); }
.wdl-tab:hover { color: var(--ink); }
.wdl-tab[aria-selected="true"] { color: var(--ink); }
.wdl-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--border-rule); background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-quick) var(--ease-soft); }
.wdl-tab[aria-selected="true"]::after { transform: scaleX(1); }
.wdl-tab .wdl-count { margin-left: 6px; font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.wdl-tabpanel[hidden] { display: none; }
.wdl-segmented { display: inline-flex; border: var(--border-hairline) solid var(--border-control); border-radius: var(--radius-1); background: var(--surface); }
.wdl-segmented button { border: 0; background: none; height: 28px; padding: 0 var(--space-3); font: 500 13px/18px var(--font-sans); color: var(--ink-secondary); cursor: pointer; }
.wdl-segmented button + button { border-left: var(--border-hairline) solid var(--seam-strong); }
.wdl-segmented button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* ---------- Chips ---------- */
.wdl-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-1); font: 500 11px/14px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border: var(--border-hairline) solid transparent; }
.wdl-chip .wdl-sq { width: 8px; height: 8px; flex: none; border: 1.5px solid currentColor; }
/* Provenance: fill = verified, hollow = vendor-reported, dashed = pending. Shape carries the meaning; colour supports it. */
.wdl-prov--verified { color: var(--prov-verified); background: var(--primary-soft); border-color: var(--indigo-300); }
.wdl-prov--verified .wdl-sq { background: currentColor; }
.wdl-prov--vendor { color: var(--prov-vendor); background: var(--surface); border-color: var(--border-control); }
.wdl-prov--pending { color: var(--prov-pending); background: transparent; border: var(--border-hairline) dashed var(--border-control); }
.wdl-prov--pending .wdl-sq { border-style: dashed; border-width: 1px; }
/* Timestamp chip: a button that seeks the player. */
.wdl-ts { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-1); border: var(--border-hairline) solid var(--seam-strong); background: var(--surface); color: var(--ink); font: 500 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; transition: border-color var(--duration-instant) var(--ease-soft), background-color var(--duration-instant) var(--ease-soft); }
.wdl-ts::before { content: ""; width: 0; height: 0; border-left: 5px solid var(--primary); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.wdl-ts:hover { border-color: var(--primary); background: var(--primary-soft); }
.wdl-ts:focus-visible { outline: var(--border-rule) solid var(--focus-ring); outline-offset: 2px; }
.wdl-ts .wdl-arrow { color: var(--ink-muted); }
/* Failure-type tags */
.wdl-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--space-2) 0 6px; border-radius: var(--radius-1); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.wdl-tag .wdl-icon { width: 14px; height: 14px; vertical-align: 0; }
.wdl-tag--find { color: var(--tag-find-ink); background: var(--tag-find-soft); }
.wdl-tag--pin { color: var(--tag-pin-ink); background: var(--tag-pin-soft); }
.wdl-tag--name { color: var(--tag-name-ink); background: var(--tag-name-soft); }
.wdl-tag--judge { color: var(--tag-judge-ink); background: var(--tag-judge-soft); }
.wdl-tag--outline { background: var(--surface); border: var(--border-hairline) solid currentColor; }
/* Verdicts */
.wdl-verdict { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-1); font: 600 12px/16px var(--font-sans); }
.wdl-verdict--correct { color: var(--success); background: var(--success-soft); }
.wdl-verdict--wrong { color: var(--error); background: var(--error-soft); }
.wdl-verdict--partial { color: var(--warning); background: var(--warning-soft); }
.wdl-verdict .wdl-icon { width: 14px; height: 14px; vertical-align: 0; }

/* ---------- Stat block ---------- */
.wdl-stat { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.wdl-stat__value { font-family: var(--font-display); font-weight: 400; font-size: 88px; line-height: 88px; letter-spacing: -0.02em; color: var(--ink); display: flex; align-items: baseline; gap: .18em; flex-wrap: wrap; }
.wdl-stat__value .wdl-vs { font-family: var(--font-display); font-style: italic; font-size: .42em; color: var(--ink-muted); letter-spacing: 0; }
.wdl-stat__value .wdl-unit { font-size: .45em; color: var(--ink-secondary); letter-spacing: 0; }
.wdl-stat__value .wdl-accent { color: var(--primary); }
.wdl-stat--l .wdl-stat__value { font-size: 56px; line-height: 56px; }
.wdl-stat--m .wdl-stat__value { font-size: 36px; line-height: 40px; }
.wdl-stat__label { font: 500 15px/22px var(--font-sans); color: var(--ink); max-width: 32ch; }
.wdl-stat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.wdl-stat__meta .wdl-dot::before { content: "·"; }
.wdl-kpi { display: flex; flex-direction: column; gap: 6px; }
.wdl-kpi__label { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.wdl-kpi__value { font: 400 36px/40px var(--font-display); color: var(--ink); }
.wdl-kpi__delta { font: 500 12px/16px var(--font-mono); }
.wdl-delta-up { color: var(--success); }
.wdl-delta-down { color: var(--error); }

/* ---------- Tables ---------- */
.wdl-table-wrap { overflow: auto; background: var(--surface); border: var(--border-hairline) solid var(--seam); max-height: var(--max-h, none); }
.wdl-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.wdl-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-subtle); text-align: left; font: 500 12px/16px var(--font-sans); color: var(--ink-secondary); padding: 10px var(--space-3); border-bottom: var(--border-hairline) solid var(--seam-strong); white-space: nowrap; }
.wdl-table td { padding: 10px var(--space-3); border-bottom: var(--border-hairline) solid var(--seam); vertical-align: middle; }
.wdl-table tr:last-child td { border-bottom: 0; }
.wdl-table tbody tr { transition: background-color var(--duration-instant) var(--ease-soft); }
.wdl-table tbody tr:hover { background: var(--paper); }
.wdl-table tbody tr[aria-selected="true"] { background: var(--primary-soft); }
.wdl-table .num { text-align: right; font-feature-settings: "tnum" 1; }
.wdl-table td.num { color: var(--ink); }
.wdl-table td.strong, .wdl-table td .strong { color: var(--ink); font-weight: 500; white-space: nowrap; }
.wdl-table td.best, .wdl-table .best { color: var(--primary); font-weight: 600; }
.wdl-table .human td { background: var(--paper); color: var(--ink); }
.wdl-table--dense td { padding: 6px var(--space-3); font-size: 13px; }
.wdl-table--dense th { padding: 8px var(--space-3); }
.wdl-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.wdl-sort::after { content: ""; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid var(--ink-faint); }
th[aria-sort="ascending"] .wdl-sort::after { border-top: 0; border-bottom: 4px solid var(--primary); }
th[aria-sort="descending"] .wdl-sort::after { border-top-color: var(--primary); }
.wdl-sort:focus-visible { outline: var(--border-rule) solid var(--focus-ring); outline-offset: 2px; }
.wdl-bar-cell { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.wdl-bar-cell i { display: block; height: 6px; background: var(--data-1); min-width: 1px; }
.wdl-bar-cell b { font-weight: 400; color: var(--ink); width: 44px; text-align: right; }
.wdl-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: 0; }

/* ---------- Charts (SVG from WDL.chart.*) ---------- */
.wdl-chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.wdl-chart text { font-size: 12px; fill: var(--ink-muted); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.wdl-chart .lbl { fill: var(--ink-secondary); font-size: 13px; }
.wdl-chart .lbl-strong { fill: var(--ink); font-size: 13px; font-weight: 500; }
.wdl-chart .val { fill: var(--ink); font-size: 12px; font-weight: 500; }
.wdl-chart .gridline { stroke: var(--seam); stroke-width: 1; shape-rendering: crispEdges; }
.wdl-chart .axis { stroke: var(--seam-strong); stroke-width: 1; shape-rendering: crispEdges; }
.wdl-chart .annot-line { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.wdl-chart .annot { fill: var(--ink); font-size: 12px; }
.wdl-chart .ref { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 4 4; }
.wdl-chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wdl-chart .series--human { stroke-width: 2; stroke-dasharray: none; }
.wdl-chart-title { font: 600 15px/22px var(--font-sans); color: var(--ink); margin: 0; }
.wdl-chart-sub { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); margin: 2px 0 var(--space-4); }
.wdl-chart-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.wdl-draw .series { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: wdl-draw var(--duration-slow) var(--ease-soft) forwards; }
.wdl-draw .bar { transform-box: fill-box; transform-origin: left center; animation: wdl-grow-x var(--duration-slow) var(--ease-settle) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.wdl-draw .vbar { transform-box: fill-box; transform-origin: center bottom; animation: wdl-grow-y var(--duration-slow) var(--ease-settle) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.wdl-draw .fade { animation: wdl-fade var(--duration-calm) var(--ease-soft) both; animation-delay: calc(var(--duration-slow) * .8); }

/* ---------- Video timeline ---------- */
.wdl-timeline { position: relative; font-family: var(--font-sans); }
.wdl-tl-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); gap: var(--space-4); }
.wdl-tl-axis { position: relative; height: 20px; margin-left: var(--tl-gutter, 72px); border-bottom: var(--border-hairline) solid var(--seam-strong); }
.wdl-tl-tick { position: absolute; bottom: 0; transform: translateX(-50%); font: 500 11px/14px var(--font-mono); color: var(--ink-muted); padding-bottom: 4px; white-space: nowrap; }
.wdl-tl-tick::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 1px; height: 4px; background: var(--seam-strong); }
.wdl-tl-tick.first { transform: none; } .wdl-tl-tick.first::after { left: 0; }
.wdl-tl-tick.last { transform: translateX(-100%); } .wdl-tl-tick.last::after { left: auto; right: 0; }
.wdl-tl-lane { position: relative; display: flex; align-items: center; height: 36px; }
.wdl-tl-lane + .wdl-tl-lane { border-top: var(--border-hairline) solid var(--seam); }
.wdl-tl-name { width: var(--tl-gutter, 72px); flex: none; font: 500 12px/16px var(--font-sans); color: var(--ink-secondary); }
.wdl-tl-track { position: relative; flex: 1; height: 100%; background: repeating-linear-gradient(to right, transparent 0, transparent calc(10% - 1px), var(--seam) calc(10% - 1px), var(--seam) 10%); }
.wdl-tl-span { position: absolute; top: 9px; height: 18px; display: flex; align-items: center; padding: 0 6px; font: 500 11px/14px var(--font-mono); white-space: nowrap; overflow: visible; }
.wdl-tl-span--expert { background: var(--ink); color: var(--surface); }
.wdl-tl-span--model { background: var(--surface); color: var(--tag-pin-ink); border: 1.5px solid var(--data-2); }
.wdl-tl-span--label { background: var(--primary-soft); color: var(--prov-verified); border: var(--border-hairline) solid var(--indigo-300); }
.wdl-tl-overlap { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--indigo-100) 0 4px, var(--indigo-200) 4px 5px); border-left: 1px solid var(--primary); border-right: 1px solid var(--primary); pointer-events: none; }
.wdl-tl-body { position: relative; }
.wdl-tl-body .wdl-tl-overlay { position: absolute; top: 0; bottom: 0; left: var(--tl-gutter, 72px); right: 0; pointer-events: none; }
.wdl-tl-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.wdl-tl-legend i { display: inline-block; width: 14px; height: 8px; margin-right: 6px; vertical-align: 0; }
.wdl-tl-moment { position: absolute; top: 6px; width: 10px; height: 24px; transform: translateX(-50%); }
.wdl-tl-moment b { display: block; width: 10px; height: 24px; background: var(--ink); }
.wdl-tl-moment.effect b { background: var(--primary); }
.wdl-tl-moment span { position: absolute; top: 5px; left: 16px; white-space: nowrap; font: 500 11px/14px var(--font-mono); color: var(--ink); }
.wdl-tl-moment.flip span { left: auto; right: 16px; }
.wdl-tl-link path { fill: none; stroke: var(--primary); stroke-width: 1.5; }
.wdl-tl-link .seam-dash { stroke-dasharray: 3 3; }
.wdl-tl-gap { font: 500 12px/16px var(--font-mono); fill: var(--prov-verified); }
.wdl-tl-gaplabel { position: absolute; transform: translate(-50%, -100%); font: 500 12px/16px var(--font-mono); color: var(--prov-verified); background: var(--surface); padding: 0 6px; white-space: nowrap; }
.wdl-tl-anim .wdl-tl-span { animation: wdl-slide-in var(--duration-calm) var(--ease-settle) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.wdl-tl-anim .wdl-tl-overlap { animation: wdl-fade var(--duration-calm) var(--ease-soft) both; animation-delay: var(--duration-calm); }
.wdl-tl-anim .wdl-tl-link path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: wdl-draw var(--duration-slow) var(--ease-linear) forwards; animation-delay: var(--duration-quick); }
.wdl-tl-anim .wdl-tl-link path.seam-dash { stroke-dasharray: 3 3; stroke-dashoffset: 0; animation: wdl-fade var(--duration-slow) var(--ease-soft) both; }

/* ---------- Eval task card ---------- */
.wdl-card { background: var(--surface); border: var(--border-hairline) solid var(--seam); }
.wdl-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-hairline) solid var(--seam); }
.wdl-card__body { padding: var(--space-4); }
.wdl-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--border-hairline) solid var(--seam); background: var(--paper); }
.wdl-id { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.wdl-q { font: 400 22px/30px var(--font-display); color: var(--ink); margin: 0 0 var(--space-4); }
.wdl-q::before { content: "Q"; display: inline-block; width: 20px; margin-left: -0px; margin-right: 8px; font: 500 12px/16px var(--font-mono); color: var(--ink-muted); vertical-align: 4px; }
.wdl-answers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--seam-gap); background: var(--seam); border: var(--border-hairline) solid var(--seam); }
.wdl-answer { background: var(--surface); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.wdl-answer--model { background: var(--surface); }
.wdl-answer--expert { background: var(--paper); }
.wdl-answer__who { display: flex; align-items: center; justify-content: space-between; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.wdl-answer__text { font: 400 14px/22px var(--font-sans); color: var(--ink); margin: 0; }
.wdl-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.wdl-agree { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 12px/16px var(--font-sans); color: var(--ink-secondary); }
.wdl-agree__pips { display: inline-flex; gap: 2px; }
.wdl-agree__pips i { width: 10px; height: 10px; background: var(--ink); }
.wdl-agree__pips i.off { background: transparent; border: 1px solid var(--border-control); }
@media (max-width: 600px) { .wdl-answers { grid-template-columns: 1fr; } }

/* ---------- A/B comparison card ---------- */
.wdl-ab { background: var(--surface); border: var(--border-hairline) solid var(--seam); }
.wdl-ab__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--seam-gap); background: var(--seam); }
.wdl-ab__col { background: var(--surface); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.wdl-ab__col.win { background: var(--paper); }
.wdl-ab__k { display: flex; justify-content: space-between; align-items: center; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.wdl-ab__k b { font: 500 12px/16px var(--font-mono); color: var(--ink); }
.wdl-rubric { width: 100%; border-collapse: collapse; font: 400 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; }
.wdl-rubric th { text-align: left; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); padding: 8px var(--space-4); border-bottom: var(--border-hairline) solid var(--seam-strong); background: var(--surface-subtle); }
.wdl-rubric td { padding: 8px var(--space-4); border-bottom: var(--border-hairline) solid var(--seam); color: var(--ink-secondary); }
.wdl-rubric .num { text-align: right; color: var(--ink-secondary); width: 120px; white-space: nowrap; }
.wdl-rubric .top { color: var(--ink); font-weight: 600; }
.wdl-rubric tfoot td { border-bottom: 0; border-top: var(--border-hairline) solid var(--seam-strong); color: var(--ink); font-weight: 600; }
.wdl-pips { display: inline-flex; gap: 2px; vertical-align: -1px; margin-right: 8px; }
.wdl-pips i { width: 6px; height: 10px; background: var(--seam-strong); }
.wdl-pips i.on { background: var(--ink); }

/* ---------- FAQ ---------- */
.wdl-faq { border-top: var(--border-hairline) solid var(--seam-strong); }
.wdl-faq details { border-bottom: var(--border-hairline) solid var(--seam-strong); }
.wdl-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr 24px; align-items: baseline; gap: var(--space-4); padding: var(--space-5) 0; font: 400 24px/32px var(--font-display); color: var(--ink); transition: color var(--duration-instant) var(--ease-soft); }
.wdl-faq summary::-webkit-details-marker { display: none; }
.wdl-faq summary:hover { color: var(--primary); }
.wdl-faq summary:focus-visible { outline: var(--border-rule) solid var(--focus-ring); outline-offset: 2px; }
.wdl-faq .n { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.wdl-faq .pm { position: relative; width: 14px; height: 14px; align-self: center; }
.wdl-faq .pm::before, .wdl-faq .pm::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1.5px; background: var(--ink); transition: transform var(--duration-quick) var(--ease-soft); }
.wdl-faq .pm::after { transform: rotate(90deg); }
.wdl-faq details[open] .pm::after { transform: rotate(0deg); }
.wdl-faq .a { padding: 0 64px var(--space-5) 56px; font: 400 16px/26px var(--font-sans); color: var(--ink-secondary); max-width: 72ch; animation: wdl-fade var(--duration-quick) var(--ease-soft); }
.wdl-faq .a p { margin: 0 0 var(--space-3); }
.wdl-faq .src { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }

/* ---------- Code / JSON ---------- */
.wdl-code { background: var(--surface-subtle); border: var(--border-hairline) solid var(--seam); font: 400 13px/20px var(--font-mono); color: var(--ink-secondary); font-variant-numeric: tabular-nums slashed-zero; }
.wdl-code__bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 6px var(--space-3); border-bottom: var(--border-hairline) solid var(--seam); background: var(--surface); font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.wdl-code pre { margin: 0; padding: var(--space-3) var(--space-4); overflow: auto; counter-reset: ln; }
.wdl-code .ln { display: block; padding-left: 36px; position: relative; }
.wdl-code .ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 20px; text-align: right; color: var(--ink-muted); }
.wdl-code .k { color: var(--indigo-700); }
.wdl-code .s { color: var(--tag-name-ink); }
.wdl-code .n { color: var(--tag-pin-ink); }
.wdl-code .b { color: var(--tag-judge-ink); }
.wdl-code .p { color: var(--ink-muted); }
.wdl-code .c { color: var(--ink-muted); font-style: normal; }
.wdl-code .hl { background: var(--primary-soft); margin: 0 calc(-1 * var(--space-4)); padding-right: var(--space-4); padding-left: calc(36px + var(--space-4)); box-shadow: inset 2px 0 0 var(--primary); }
.wdl-inline-code { font: 400 .9em/1 var(--font-mono); background: var(--surface-subtle); border: var(--border-hairline) solid var(--seam); padding: 1px 4px; border-radius: var(--radius-1); color: var(--ink); }

/* ---------- Long read ---------- */
.wdl-article { max-width: 680px; margin: 0 auto; font: 400 18px/30px var(--font-sans); color: var(--ink-secondary); }
.wdl-article h1 { font: 400 52px/56px var(--font-display); letter-spacing: -0.01em; color: var(--ink); margin: var(--space-3) 0 var(--space-5); }
.wdl-article h2 { font: 400 32px/38px var(--font-display); color: var(--ink); margin: var(--space-7) 0 var(--space-4); }
.wdl-article p { margin: 0 0 var(--space-5); }
.wdl-article .standfirst { font: 400 22px/32px var(--font-sans); color: var(--ink); }
.wdl-article strong { color: var(--ink); font-weight: 500; }
.wdl-byline { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); padding: var(--space-3) 0; border-top: var(--border-hairline) solid var(--seam-strong); border-bottom: var(--border-hairline) solid var(--seam); margin-bottom: var(--space-6); }
.wdl-pullquote { margin: var(--space-7) 0; padding: var(--space-5) 0; border-top: var(--border-hairline) solid var(--ink); border-bottom: var(--border-hairline) solid var(--seam-strong); }
.wdl-pullquote p { font: italic 400 34px/42px var(--font-display); color: var(--ink); margin: 0 0 var(--space-3); }
.wdl-pullquote cite { font: normal 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.wdl-fn { font: 500 11px/1 var(--font-mono); color: var(--primary); text-decoration: none; vertical-align: super; margin-left: 1px; }
.wdl-fn:hover { text-decoration: underline; }
.wdl-notes { margin-top: var(--space-7); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--seam-strong); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.wdl-notes ol { margin: 0; padding-left: 20px; }
.wdl-notes li { margin-bottom: 6px; }
.wdl-figure { margin: var(--space-6) 0; }
.wdl-figure figcaption { margin-top: var(--space-2); font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* ---------- Nav & footer ---------- */
.wdl-nav { display: flex; align-items: center; gap: var(--space-6); height: 64px; padding: 0 var(--grid-web-margin); border-bottom: var(--border-hairline) solid var(--seam); background: var(--paper); }
.wdl-nav__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.wdl-nav__links { display: flex; gap: var(--space-5); margin: 0 auto 0 0; padding: 0; list-style: none; }
.wdl-nav__links a { font: 400 14px/20px var(--font-sans); color: var(--ink-secondary); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color var(--duration-instant) var(--ease-soft), border-color var(--duration-instant) var(--ease-soft); }
.wdl-nav__links a:hover { color: var(--ink); }
.wdl-nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.wdl-nav--product { height: 52px; background: var(--surface); padding: 0 var(--space-4); gap: var(--space-5); }
.wdl-nav--product .wdl-nav__links a { font-size: 13px; }
.wdl-crumbs { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.wdl-crumbs b { color: var(--ink); font-weight: 500; }
@media (max-width: 720px) { .wdl-nav__links { display: none; } .wdl-nav { padding: 0 var(--space-4); } }
.wdl-footer { background: var(--paper); border-top: var(--border-hairline) solid var(--seam-strong); padding: var(--space-8) var(--grid-web-margin) var(--space-6); color: var(--ink-secondary); font: 400 14px/22px var(--font-sans); }
.wdl-footer h4 { font: 500 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-3); }
.wdl-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wdl-footer a { color: var(--ink-secondary); text-decoration: none; }
.wdl-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.wdl-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); padding-top: var(--space-4); border-top: var(--border-hairline) solid var(--seam); font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }

/* ---------- Loading: patch skeleton ---------- */
.wdl-skel { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--seam-gap); background: var(--seam); border: var(--border-hairline) solid var(--seam); }
.wdl-skel > i { grid-column: span var(--span, 4); height: var(--h, 72px); background: var(--surface-subtle); animation: wdl-breathe 1600ms var(--ease-soft) infinite; animation-delay: calc(var(--i, 0) * 120ms); }
.wdl-skel-line { display: block; height: 10px; background: var(--surface-subtle); margin: 8px 0; animation: wdl-breathe 1600ms var(--ease-soft) infinite; }

/* ---------- Motion utilities ---------- */
.wdl-assemble > * { animation: wdl-patch-in var(--duration-slow) var(--ease-settle) both; animation-delay: calc(min(var(--i, 0) * var(--stagger), 320ms)); }
.wdl-rise { animation: wdl-rise var(--duration-calm) var(--ease-soft) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.wdl-page-enter { animation: wdl-rise var(--duration-calm) var(--ease-soft) both; }
@keyframes wdl-patch-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes wdl-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wdl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wdl-draw { to { stroke-dashoffset: 0; } }
@keyframes wdl-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wdl-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wdl-slide-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes wdl-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .wdl-root *, .wdl-page *, .wdl-root, .wdl-page { animation: none !important; transition: none !important; }
  .wdl-draw .series, .wdl-tl-anim .wdl-tl-link path { stroke-dashoffset: 0 !important; }
  .wdl-skel > i, .wdl-skel-line { opacity: 1; }
}