/* litan-widgets.css — Widget system v2 (DESIGN_SYSTEM_V4 §6, §7). Shared by M3/M4/M5.
   Tokens: the ramp (§7.1), one blue (§7.2), glass L0/L1/L2 (§7.3), the four glow forms (§7.4),
   durations + easings (§3.1–3.2), the type + figure ladders (§2.2). Dark only. */
@font-face { font-family: "Geist"; src: url("/litan/src/litan/ui/static/fonts/geist/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/litan/src/litan/ui/static/fonts/geist/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  /* §7.1 ramp */
  --ground: #050608; --ground-2: #0B0D11;
  --edge: rgba(255,255,255,.12); --edge-soft: rgba(255,255,255,.07);
  --fill-1: rgba(255,255,255,.035); --fill-2: rgba(255,255,255,.06);
  --ink: #EEF2F7; --ink-2: #B7C1CE; --muted: #7D8896; --rule: #1B222D;
  /* §7.2 one blue + data ink ramp */
  --blue: #5EA0FF; --blue-2: #9CC4FF; --blue-deep: #2F6FE0; --blue-4: #CFE2FF;
  /* gate hues: ONLY on .gate-dot, [data-mark-gate], .rail .chip (AC-6.B1) */
  --good: #4CC38A; --warn: #E2B84D; --crit: #F06B5B;
  /* §7.4 glow forms */
  --glow-ring: rgba(94,160,255,.30); --glow-ring-strong: rgba(94,160,255,.48); --glow-halo: rgba(94,160,255,.16);
  /* the drop shadow is SOFT and LARGE, never tight and dark: a 1px seat, a mid bloom, a long fall */
  --sh-l1: 0 1px 1px rgba(0,0,0,.44), 0 12px 26px -12px rgba(0,0,0,.66), 0 44px 84px -34px rgba(0,0,0,.84);
  --sh-l2: 0 1px 1px rgba(0,0,0,.44), 0 14px 30px -12px rgba(0,0,0,.68), 0 52px 104px -38px rgba(0,0,0,.86), 0 40px 120px -50px var(--glow-ring-strong);
  --sh-l1-hover: 0 1px 1px rgba(0,0,0,.44), 0 18px 34px -14px rgba(0,0,0,.72), 0 62px 112px -38px rgba(0,0,0,.9);
  --sh-ring: 0 0 0 1px var(--glow-halo);
  --sh-focus: 0 0 0 3px var(--glow-ring);
  /* §7.3 the 1px edge is a GRADIENT, brightest at the top-left, falling to almost nothing at the bottom-right */
  --edge-grad: linear-gradient(146deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.165) 24%, rgba(255,255,255,.075) 52%, rgba(255,255,255,.115) 100%);
  --edge-grad-lit: linear-gradient(146deg, rgba(186,216,255,.72) 0%, rgba(140,186,255,.34) 26%, rgba(255,255,255,.10) 54%, rgba(126,173,255,.32) 100%);
  /* the inset sheen: a short fall of light just inside the top edge, never a full-panel wash */
  --sheen: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.015) 40%, transparent 100%);
  --sheen-lit: linear-gradient(180deg, rgba(163,200,255,.085) 0%, rgba(255,255,255,.018) 40%, transparent 100%);
  /* the ground is darkened a little behind glass, so a panel over the scene separates from it */
  --glass-1: rgba(6,8,12,.32); --glass-2: rgba(6,8,12,.44);
  /* §3.1 durations, §3.2 easings */
  --d-micro: 120ms; --d-fast: 160ms; --d-med: 240ms; --d-slow: 400ms; --d-scene: 700ms; --d-count: 900ms; --d-settle: 1200ms;
  --e-out: cubic-bezier(.23,1,.32,1); --e-inout: cubic-bezier(.77,0,.175,1); --e-house: cubic-bezier(.32,.72,.28,1); --e-drawer: cubic-bezier(.32,.72,0,1);
  /* §2.2 type ladder */
  --font: "Geist", -apple-system, "SF Pro Display", Inter, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --t-d1: clamp(3.5rem, 7.2vw, 7rem); --t-d2: clamp(2.5rem, 4.6vw, 4.5rem); --t-d3: 2.75rem; --t-h1: 2rem; --t-h2: 1.5rem;
  --t-lede: 1.25rem; --t-body: 1.03rem; --t-cap: .8125rem; --t-eyebrow: .72rem;
  --f-1: clamp(4rem, 6vw, 5.5rem); --f-2: 3rem; --f-3: 1.75rem; --f-4: 1.125rem;
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 104px; --s-7: 168px;
  --r-l1: 18px; --r-l2: 24px; --r-obj: 28px;
}

/* ---------- glass layers (§7.3): fill · gradient 1px edge · inset sheen · soft large shadow ----------
   Four parts, each its own layer so hover can move them independently:
     background   the glass fill over a slightly DARKENED ground (separation from the scene behind)
     ::before     the 1px edge, a gradient brighter at the top-left  (a border-box background layer, never a solid border)
     ::after      the inset sheen, a short fall of light just inside the top edge
     box-shadow   soft and large, three stops, never one tight dark one                                */
.l1, .l2 { position: relative; isolation: isolate; }
/* the gradient 1px edge is painted as a border-box background layer under a padding-box fill: ONE paint,
   no mask layer, so a page can carry fifty of them (a mask-composite ring costs a compositing pass each). */
.l1 { border: 1px solid transparent; border-radius: var(--r-l1); box-shadow: var(--sh-l1);
      background: linear-gradient(158deg, rgba(255,255,255,.052) 0%, rgba(255,255,255,.020) 46%, rgba(255,255,255,.011) 100%) padding-box,
                  var(--glass-1) padding-box, var(--edge-grad) border-box;
      -webkit-backdrop-filter: blur(20px) saturate(1.35) brightness(.86); backdrop-filter: blur(20px) saturate(1.35) brightness(.86);
      transition: box-shadow var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out); }
/* L2 additionally carries the hairline glow form across the middle of its top edge (§7.4 form 1) */
.l2 { border: 1px solid transparent; border-radius: var(--r-l2); box-shadow: var(--sh-l2);
      background: linear-gradient(158deg, rgba(255,255,255,.072) 0%, rgba(255,255,255,.026) 46%, rgba(255,255,255,.013) 100%) padding-box,
                  var(--glass-2) padding-box,
                  radial-gradient(38% 2px at 50% 0, var(--glow-ring-strong) 0%, transparent 100%) border-box,
                  var(--edge-grad) border-box;
      -webkit-backdrop-filter: blur(28px) saturate(1.5) brightness(.84); backdrop-filter: blur(28px) saturate(1.5) brightness(.84); }
.l1::after, .l2::after { content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 42%; max-height: 132px; pointer-events: none; z-index: -1;
      border-radius: calc(var(--r-l1) - 1px) calc(var(--r-l1) - 1px) 0 0; background: var(--sheen); transition: background var(--d-fast) var(--e-out); }
.l2::after { border-radius: calc(var(--r-l2) - 1px) calc(var(--r-l2) - 1px) 0 0; }
/* children of a panel sit ON the panel: no fill, no blur, no edge, no sheen (never glass on glass) */
.l1 .l1, .l2 .l1, .l2 .l2, .l1 .l2 { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.l1 .l1::after,  .l2 .l1::after,  .l2 .l2::after,  .l1 .l2::after { display: none; }

/* ---------- type primitives ---------- */
.eyebrow { font-size: var(--t-eyebrow); line-height: 1; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.cap { font-size: var(--t-cap); line-height: 1.5; font-weight: 500; color: var(--ink-2); }
.figure { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -.035em; }
.figure.f-1 { font-size: var(--f-1); letter-spacing: -.04em; }
.figure.f-2 { font-size: var(--f-2); }
.figure.f-3 { font-size: var(--f-3); letter-spacing: -.025em; }
.figure.f-4 { font-size: var(--f-4); letter-spacing: -.01em; }
.figure .den { font-size: var(--t-cap); font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-left: 10px; }
.figure--withheld { font-size: var(--t-h2); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--ink-2); max-width: 30ch; }
.figure--stale { color: var(--ink-2); }
.figure--prev { opacity: .62; }
.as-of { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-cap); font-weight: 500; color: var(--ink-2); }   /* stale: the as-of WORD beside a warn dot; the hue lives on the dot only (AC-6.B1) */

/* ---------- gate declaration (§6.2) ---------- */
.gate { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-eyebrow); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.gate-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
[data-gate="pass"] > .foot .gate-dot, [data-gate="pass"] .gate--own .gate-dot { background: var(--good); box-shadow: 0 0 8px var(--good); }
[data-gate="watch"] > .foot .gate-dot, [data-gate="watch"] .gate--own .gate-dot { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
[data-gate="withheld"] > .foot .gate-dot, [data-gate="withheld"] .gate--own .gate-dot { background: var(--muted); }
[data-gate="stale"] > .foot .gate-dot, [data-gate="stale"] .gate--own .gate-dot { background: var(--warn); }
[data-gate="structural"] > .foot .gate-dot, [data-gate="structural"] .gate--own .gate-dot { background: var(--blue); }
[data-mark-gate="in"] { fill: var(--good); }
[data-mark-gate="out"] { fill: var(--crit); }

/* ---------- widget root ---------- */
[data-widget] { position: relative; font-family: var(--font); color: var(--ink); }
[data-widget] .q { margin: 0; font-size: var(--t-h2); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: var(--ink); text-wrap: balance; }
[data-widget] .glyph { width: 22px; height: 22px; color: var(--ink-2); flex: none; }
[data-widget] .glyph svg { width: 100%; height: 100%; display: block; }
[data-widget] .head { display: flex; align-items: flex-start; gap: 12px; }
[data-widget] .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; flex-wrap: wrap; }
[data-widget] .receipt-line { font-size: var(--t-cap); color: var(--muted); font-weight: 500; transition: color var(--d-fast) var(--e-out); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
[data-widget] .foot > div { min-width: 0; max-width: 100%; }
[data-widget] .figure:hover ~ .foot .receipt-line, [data-widget]:has(.figure:hover) .receipt-line { color: var(--ink); }
/* controls: one construction — a lit top edge, a soft seat, and full hover / press / focus */
[data-widget] .expand, .expand-below .rail-btn, .itable .picker > button {
  appearance: none; border: 1px solid var(--edge); color: var(--ink); font: inherit; font-size: var(--t-cap); font-weight: 500; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 1px 2px rgba(0,0,0,.4), 0 8px 18px -10px rgba(0,0,0,.7);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out); }
[data-widget] .expand:hover, .expand-below .rail-btn:hover, .itable .picker > button:hover {
  border-color: var(--glow-ring); background: linear-gradient(180deg, rgba(148,190,255,.13), rgba(94,160,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.4), 0 12px 26px -12px var(--glow-ring-strong); }
[data-widget] .expand:active, .expand-below .rail-btn:active, .itable .picker > button:active { transform: translateY(1px); transition-duration: var(--d-micro); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
[data-widget] .expand[aria-expanded="true"] { border-color: var(--glow-ring); color: var(--blue-2); }
[data-widget] .expand[aria-expanded="true"] .chev { transform: rotate(180deg); }
[data-widget] .chev { width: 12px; height: 12px; transition: transform var(--d-med) var(--e-out); }
:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: 8px; }

/* loading hairline: one 1px line travels once (§6.3), never a shimmer block */
[data-state="loading"]::after, [data-state="error"]::after { content: ""; position: absolute; left: 12%; top: 0; width: 22%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--blue-2), transparent); animation: lw-travel var(--d-slow) linear 1 forwards; }
@keyframes lw-travel { from { left: 4%; opacity: 1 } to { left: 78%; opacity: 0 } }
@media (prefers-reduced-motion: reduce) { [data-state="loading"]::after, [data-state="error"]::after { animation-duration: 1ms; } }

/* ---------- kind 1: figure tile ---------- */
.tile { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px 22px; min-height: 236px; overflow: hidden;
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out); }
/* hover: the edge lights, the shadow deepens, the visual gains a highlight · press: 1px down · focus: the ring */
@media (pointer: fine) {
  .tile:hover { transform: translateY(-2px); box-shadow: var(--sh-l1-hover), var(--sh-ring);
    background: linear-gradient(158deg, rgba(255,255,255,.062) 0%, rgba(255,255,255,.024) 46%, rgba(255,255,255,.013) 100%) padding-box,
                var(--glass-1) padding-box, var(--edge-grad-lit) border-box; }
  .tile:hover::after { background: var(--sheen-lit); }
  .tile:hover .visual .lit { opacity: 1; }
  .tile:hover .visual .mark, .tile:hover .visual .band { filter: brightness(1.14); }
  .tile:active { transform: translateY(1px); transition-duration: var(--d-micro); }
}
.tile:focus-visible { box-shadow: var(--sh-l1), var(--sh-focus); }
.tile .figure { display: flex; align-items: baseline; flex-wrap: wrap; min-height: 48px; }
.tile .figure.f-2 { min-height: 48px; }
.tile .visual { height: 52px; position: relative; }
.tile .visual svg, .tile .visual canvas { width: 100%; height: 100%; display: block; overflow: visible; }
/* the drawing vocabulary every mini-visual shares: gradient fills, a baseline, a lit last point */
.tile .visual .mark, .compare .side .visual .mark { fill: var(--blue); transition: filter var(--d-fast) var(--e-out); }
.tile .visual .mark-2 { fill: var(--blue-deep); }
.tile .visual .track, .compare .side .visual .track { fill: rgba(255,255,255,.05); }
.tile .visual .frame, .compare .side .visual .frame { fill: none; stroke: var(--edge); stroke-width: 1; }
.tile .visual .axis { stroke: var(--rule); stroke-width: 1; }
.tile .visual .base { stroke: rgba(255,255,255,.14); stroke-width: 1; }
.tile .visual .band { fill: var(--blue); fill-opacity: .55; transition: filter var(--d-fast) var(--e-out); }
.tile .visual .band-frame { fill: none; stroke: var(--edge); stroke-width: 1; }
.tile .visual .line { fill: none; stroke: var(--blue-2); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tile .visual .area { fill: var(--blue); fill-opacity: .18; }
.tile .visual .tip { fill: var(--blue-4); }
.tile .visual .tip-halo { fill: var(--blue); fill-opacity: .26; }
.tile .visual .lit { opacity: .78; transition: opacity var(--d-fast) var(--e-out); }
.tile .visual .tick-lab { font-family: var(--font); font-size: 8.5px; font-weight: 500; font-variant-numeric: tabular-nums; fill: var(--muted); }
.tile .empty-line { font-size: var(--t-cap); color: var(--ink-2); margin: 0; }
.tile .empty-line a { color: var(--blue-2); text-decoration: none; }

/* ---------- kind 2: expand-below chart (sibling of the tile in the same grid; L2) ---------- */
.expand-below { grid-column: 1 / -1; padding: 22px 26px 20px; display: none; }
.expand-below[data-open="true"] { display: block; animation: eb-in var(--d-med) var(--e-out) 1; }
@keyframes eb-in { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.expand-below .title { margin: 0; font-size: var(--t-h1); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; }
.expand-below .explainer { margin: 6px 0 0; font-size: var(--t-body); color: var(--ink-2); max-width: 70ch; }
/* §6.4: a chart sits ON THE GROUND (L0, opaque — the panel's glass never shows through behind a series)
   inside an L1 frame: a 1px gradient ring, brighter at the top-left, and a soft inner seat. */
.chart-on-ground { position: relative; border: 1px solid transparent; border-radius: calc(var(--r-l2) - 12px);
  background: var(--ground) padding-box, linear-gradient(146deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.075) 30%, rgba(255,255,255,.03) 62%, rgba(255,255,255,.055) 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 22px 44px -30px rgba(94,160,255,.30), 0 1px 0 rgba(0,0,0,.5); }
.expand-below .chart { height: 420px; margin-top: 16px; }
.expand-below .chart > div { position: absolute; inset: 0; }
.expand-below .legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; font-size: var(--t-cap); color: var(--ink-2); }
.expand-below .legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 8px; vertical-align: middle; background: var(--blue); }
.expand-below .legend .k2 i { background: var(--blue-deep); } .expand-below .legend .k3 i { background: var(--blue-2); } .expand-below .legend .k4 i { background: var(--blue-4); }
.expand-below .foot { margin-top: 14px; }
/* .rail-btn shares the control construction declared above */
.chart-frame { position: absolute; inset: 0; }   /* withheld/loading/error: the frame of the visual */
.chart-frame svg { width: 100%; height: 100%; display: block; }
.chart-frame .axis { stroke: var(--rule); stroke-width: 1; } .chart-frame .frame { stroke: var(--edge); fill: none; stroke-width: 1; stroke-dasharray: 4 4; }
.chart-frame .note { position: absolute; left: 24px; bottom: 20px; font-size: var(--t-cap); color: var(--ink-2); max-width: 46ch; margin: 0; }
.chart-frame .note a { color: var(--blue-2); text-decoration: none; }

/* ---------- kind 3: interactive table ---------- */
.itable { display: flex; flex-direction: column; gap: 14px; }
.itable .bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.itable .bar .q { flex: 1 1 auto; }
.itable input[type="search"], .itable select { font: inherit; font-size: var(--t-cap); color: var(--ink); border: 1px solid var(--edge); border-radius: 999px; padding: 8px 14px; min-width: 200px;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(255,255,255,.018)); box-shadow: inset 0 1px 2px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.045);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out); }
.itable input[type="search"]:hover { border-color: rgba(255,255,255,.2); }
.itable input[type="search"]:focus { outline: none; border-color: var(--glow-ring); box-shadow: inset 0 1px 2px rgba(0,0,0,.42), var(--sh-focus); }
.itable input[type="search"]::placeholder { color: var(--muted); }
.itable .picker { position: relative; }
/* .picker > button shares the control construction declared above */
.itable .picker-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; padding: 10px 6px; min-width: 220px; display: none; }
.itable .picker-menu[data-open="true"] { display: block; }
.itable .picker-menu label { display: flex; gap: 10px; align-items: center; padding: 6px 10px; font-size: var(--t-cap); color: var(--ink-2); cursor: pointer; border-radius: 8px; }
.itable .picker-menu label:hover { background: var(--fill-1); color: var(--ink); }
/* the body is L0 in an L1 frame (§6.4); the sticky header is the one piece of glass in the instrument */
.itable .scroll { position: relative; overflow: auto; height: 560px; border: 1px solid transparent; border-radius: var(--r-l1);
  background: var(--ground) padding-box, linear-gradient(146deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.09) 28%, rgba(255,255,255,.032) 60%, rgba(255,255,255,.065) 100%) border-box;
  box-shadow: 0 1px 1px rgba(0,0,0,.44), 0 30px 64px -34px rgba(0,0,0,.8); }
.itable table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-cap); }
.itable thead { position: sticky; top: 0; z-index: 3; background: linear-gradient(180deg, rgba(21,27,37,.93), rgba(11,14,19,.88));
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); }
.itable thead th { position: relative; text-align: left; font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--muted);
  padding: 13px 14px 12px; white-space: nowrap; cursor: pointer; user-select: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), inset 0 -1px 0 rgba(255,255,255,.15);
  transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out); }
.itable thead th:hover { color: var(--ink-2); background: rgba(255,255,255,.045); }
.itable thead th.num { text-align: right; }
/* sort affordance: a dim double chevron on every sortable column, lit and single on the sorted one */
.itable thead th .sort { display: inline-block; width: 9px; margin-left: 7px; color: var(--rule); font-size: 10px; line-height: 1; vertical-align: 1px; transition: color var(--d-fast) var(--e-out); }
.itable thead th:hover .sort { color: var(--muted); }
.itable thead th[aria-sort="ascending"] .sort, .itable thead th[aria-sort="descending"] .sort { color: var(--blue-2); }
.itable thead th[aria-sort="ascending"], .itable thead th[aria-sort="descending"] { color: var(--ink); }
.itable thead th[aria-sort="ascending"]::after, .itable thead th[aria-sort="descending"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glow-ring-strong), transparent); }
.itable tbody tr { height: 44px; cursor: pointer; transition: background var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out); }
.itable tbody tr:hover, .itable tbody tr:focus-visible, .itable tbody tr[aria-selected="true"] { outline: none;
  background: linear-gradient(90deg, rgba(94,160,255,.075), rgba(255,255,255,.028) 34%, rgba(255,255,255,.018));
  box-shadow: inset 0 0 0 1px var(--glow-halo), inset 2px 0 0 var(--blue); }
.itable tbody tr[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--glow-ring), inset 2px 0 0 var(--blue-2); }
.itable tbody tr:hover .mini i, .itable tbody tr:focus-visible .mini i, .itable tbody tr[aria-selected="true"] .mini i { filter: brightness(1.2); box-shadow: 0 0 10px var(--glow-ring-strong); }
.itable tbody tr:hover .mini, .itable tbody tr:focus-visible .mini { box-shadow: inset 0 0 0 1px rgba(255,255,255,.11); }
.itable tbody td { padding: 0 14px; border-bottom: 1px solid var(--edge-soft); white-space: nowrap; color: var(--ink-2); vertical-align: middle; }
.itable tbody td.name { color: var(--ink); font-weight: 500; }
.itable tbody td.name a { color: inherit; text-decoration: none; }
.itable tbody td.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; color: var(--ink); font-weight: 500; }
.itable tbody td.num.zero { color: var(--muted); font-weight: 400; }
.itable tbody td.num .mini { display: inline-block; width: 64px; height: 7px; border-radius: 4px; margin-right: 10px; vertical-align: middle; overflow: hidden; position: relative;
  background: rgba(255,255,255,.055); box-shadow: inset 0 1px 1px rgba(0,0,0,.4); transition: box-shadow var(--d-fast) var(--e-out); }
.itable tbody td.num .mini i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 4px; transition: filter var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
  background: linear-gradient(90deg, var(--blue-deep), var(--blue) 62%, var(--blue-2)); }
.itable tbody td.num .mini i::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--blue-4); }  /* the lit last point */
.itable tbody td .arrow { color: var(--muted); opacity: 0; transition: opacity var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out); }
.itable tbody tr:hover td .arrow, .itable tbody tr:focus-visible td .arrow { opacity: 1; color: var(--blue-2); }
.itable .spacer td { border: 0; padding: 0; }
.itable .tfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; font-size: var(--t-cap); color: var(--muted); flex-wrap: wrap; padding: 2px 4px 0; }
.itable .tfoot .count { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.itable .tfoot .count b { color: var(--ink); font-weight: 600; }
.itable .tfoot .den { color: var(--muted); font-variant-numeric: tabular-nums; }
.itable .table-frame { height: 560px; border: 1px solid var(--edge-soft); border-radius: var(--r-l1); background: var(--ground); position: relative; overflow: hidden; }
.itable .table-frame .hdr { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--edge); font-size: var(--t-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.itable .table-frame .rowline { height: 44px; border-bottom: 1px solid var(--edge-soft); }
.itable .table-frame .note { position: absolute; left: 24px; top: 84px; font-size: var(--t-body); color: var(--ink-2); max-width: 52ch; margin: 0; }
.itable .table-frame .note a { color: var(--blue-2); text-decoration: none; }
.itable .table-frame .sentence { position: absolute; left: 24px; top: 72px; }

/* ---------- kind 7: distribution ---------- */
.dist { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 18px; }
.dist .chart { height: 220px; border-radius: 12px; }
.dist .chart > div { position: absolute; inset: 0; }

/* ---------- kind 8: comparison ---------- */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.compare .side { padding: 24px 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.compare .side .visual { height: 40px; }
.compare .side .visual svg { width: 100%; height: 100%; display: block; overflow: visible; }
.compare .side .visual .track { fill: var(--fill-2); } .compare .side .visual .mark { fill: var(--blue); } .compare .side .visual .frame { fill: none; stroke: var(--edge); }
.compare .join { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; position: relative; }
.compare .join::before { content: ""; position: absolute; top: 12%; bottom: 12%; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--glow-ring-strong), transparent); }
.compare .join .delta { position: relative; z-index: 1; background: var(--ground); padding: 6px 4px; color: var(--blue-2); white-space: nowrap; }
.compare .join .cap { position: relative; z-index: 1; background: var(--ground); padding: 0 4px; text-align: center; }
.compare .side .figure { min-height: 48px; }

/* ---------- kind 9: receipt / provenance rail ---------- */
.rail { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.rail dl { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 6px 14px; font-size: var(--t-cap); }
.rail dt { color: var(--muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: var(--t-eyebrow); line-height: 1.6; }
.rail dd { margin: 0; color: var(--ink-2); }
.rail dd strong { color: var(--ink); font-weight: 500; }
.rail code { font-family: var(--mono); font-size: .86em; color: var(--ink); word-break: break-all; }
.rail .chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--edge); font-size: var(--t-eyebrow); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
.rail .chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.rail .chip[data-chip="pass"] i { background: var(--good); } .rail .chip[data-chip="watch"] i, .rail .chip[data-chip="stale"] i { background: var(--warn); } .rail .chip[data-chip="withheld"] i { background: var(--muted); } .rail .chip[data-chip="structural"] i { background: var(--blue); }
.rail .custody { height: 44px; }
.rail .custody svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rail .custody .line { stroke: var(--rule); stroke-width: 1; } .rail .custody .lit { stroke: var(--blue); stroke-width: 1.5; } .rail .custody .node { fill: var(--blue-2); } .rail .custody .node-frame { fill: none; stroke: var(--edge); }
.rail .custody text { font-family: var(--font); font-size: 10px; fill: var(--muted); font-weight: 500; }
.rail .not { font-size: var(--t-body); color: var(--ink-2); margin: 0; line-height: 1.5; }
.rail .open { font-size: var(--t-cap); font-weight: 500; color: var(--blue-2); text-decoration: none; }

/* ---------- disclosure (§6.5) ---------- */
details.disclose { position: relative; isolation: isolate; border: 1px solid transparent; border-radius: var(--r-l1); box-shadow: var(--sh-l1);
  background: linear-gradient(158deg, rgba(255,255,255,.052) 0%, rgba(255,255,255,.020) 46%, rgba(255,255,255,.011) 100%) padding-box,
              var(--glass-1) padding-box, var(--edge-grad) border-box;
  -webkit-backdrop-filter: blur(20px) saturate(1.35) brightness(.86); backdrop-filter: blur(20px) saturate(1.35) brightness(.86);
  transition: background var(--d-fast) var(--e-out); }
details.disclose::after { content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 22px; pointer-events: none; z-index: -1;
  border-radius: calc(var(--r-l1) - 1px) calc(var(--r-l1) - 1px) 0 0; background: var(--sheen); }
details.disclose:hover { background: linear-gradient(158deg, rgba(255,255,255,.052) 0%, rgba(255,255,255,.020) 46%, rgba(255,255,255,.011) 100%) padding-box,
              var(--glass-1) padding-box, var(--edge-grad-lit) border-box; }
details.disclose > summary { position: relative; z-index: 1; list-style: none; cursor: pointer; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 18px; font-size: var(--t-cap); font-weight: 500; color: var(--ink-2); transition: color var(--d-fast) var(--e-out); }
details.disclose > summary:hover { color: var(--ink); }
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary .chev { width: 12px; height: 12px; color: var(--muted); transition: transform var(--d-med) var(--e-out); }
details.disclose[open] > summary .chev { transform: rotate(180deg); }
details.disclose > .body { padding: 6px 18px 18px; font-size: var(--t-body); color: var(--ink-2); line-height: 1.6; max-width: 76ch; }
details.disclose > .body p { margin: 0 0 10px; }
details.disclose > .body table { border-collapse: collapse; font-size: var(--t-cap); }
details.disclose > .body td, details.disclose > .body th { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--edge-soft); text-align: left; }
details.disclose > .body td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
details.disclose > .body code { font-family: var(--mono); font-size: .86em; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { details.disclose > summary .chev, [data-widget] .chev, .expand-below[data-open="true"] { transition-duration: 1ms; animation-duration: 1ms; } }

/* ---------- states strip (AC-6.S1) ---------- */
.states { display: grid; grid-template-columns: 120px repeat(6, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.states .rowlabel { display: flex; align-items: center; }
.states .cell { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.states .cell > [data-widget] { flex: 1; min-height: 236px; transform: none !important; }
.states [data-widget], .states .picker-menu, .states .itable thead { -webkit-backdrop-filter: none; backdrop-filter: none; }  /* reviewer strip: ≤ 12 blurred per viewport (§7.3) */
.states .cell .tile { padding: 18px 18px 16px; }
.states .cell .q { font-size: 1.05rem; }
.states .cell .figure.f-2 { font-size: 2.1rem; }
.states .cell .figure--withheld { font-size: 1rem; }
.states .cell .expand-below { display: block; padding: 16px; }
.states .cell .expand-below .title { font-size: 1.05rem; } .states .cell .expand-below .explainer { font-size: var(--t-cap); }
.states .cell .expand-below .chart { height: 120px; margin-top: 10px; }
.states .cell .itable .scroll, .states .cell .itable .table-frame { height: 160px; }
.states .cell .itable input[type="search"] { min-width: 0; width: 100%; }
.states .cell .dist { padding: 16px; } .states .cell .dist .chart { height: 110px; }
.states .cell .compare { grid-template-columns: 1fr; } .states .cell .compare .join { flex-direction: row; padding: 8px 0; } .states .cell .compare .join::before { left: 8%; right: 8%; top: 50%; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--glow-ring-strong), transparent); }
.states .cell .compare .side { padding: 16px; } .states .cell .compare .figure.f-2 { font-size: 1.6rem; }
.states .cell .compare .join .delta, .states .cell .compare .join .figure--withheld { font-size: 1rem; white-space: normal; text-align: center; max-width: 100%; }
.states .cell .compare .join { padding: 10px 12px; gap: 4px; }
.states .cell .rail { padding: 16px; } .states .cell .rail dl { grid-template-columns: 64px 1fr; } .states .cell .rail .not { font-size: var(--t-cap); }
.states .colhead { font-size: var(--t-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-bottom: 4px; }
/* the strip's cells are a sixth of a page wide: nothing may hard-clip. Text wraps or ellipsises; the
   table frame drops to three column heads; the comparison stops clipping its own join. */
.states .cell .compare { overflow: hidden; }        /* the cell still clips: what changes is that nothing NEEDS clipping */
.states .cell .compare .join .delta, .states .cell .compare .join .cap,
.states .cell .compare .side .figure--withheld, .states .cell .as-of {
  white-space: normal; overflow-wrap: break-word; text-overflow: clip; max-width: 100%; }
.states .cell .compare .side .figure--withheld { font-size: .95rem; }
/* a receipt path is TRUNCATED with an ellipsis, never hard-clipped and never broken mid-word */
.states .cell .receipt-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.states .cell .foot { align-items: flex-start; row-gap: 6px; }
/* one column head in the strip, so all six table states read as the same instrument at cell width */
.states .cell .table-frame .hdr { grid-template-columns: 1fr; }
.states .cell .table-frame .hdr span:nth-child(n+2) { display: none; }
.states .cell .rail dd, .states .cell .rail code { overflow-wrap: anywhere; }
.states .cell .tfoot { font-size: .72rem; }

/* ============================================================================================
   WAVE 3 — the ELEGANCE amendment (wave3/ELEGANCE.md §2, §3). ADDITIVE + OPT-IN.
   The tokens below are new names only. Every component rule is scoped to
   [data-elegance="v4"] on the document root, so a mock that has not migrated renders
   byte-identically to before. M4 opts in; the other four migrate by adding the attribute.
   ============================================================================================ */
:root {
  --hair: rgba(255,255,255,.10);            /* §2.2 the rule that replaces a card border */
  --hair-strong: rgba(255,255,255,.16);
  --accent-hair: rgba(94,160,255,.55);      /* §2.2 where the blue lives now: 1px forms only */
  --r-ctl: 4px; --r-chip: 3px; --r-dot: 50%;
}

/* §2.1 the radius ladder: {0, 3px, 4px, 6px, 8px, 50%}; 999px occurs zero times */
[data-elegance="v4"] { --r-l1: 6px; --r-l2: 8px; --r-obj: 0px; }
/* §2.3: tabular, lining numerals EVERYWHERE — inherited from the root so a figure, a denominator,
   a table cell, an axis label and a sentence all align on the same digit width (E12). */
[data-elegance="v4"] { font-variant-numeric: tabular-nums lining-nums; }
/* §3.7 / E7: no value-proportional mark may carry a radius. The legacy kinds are drawn with rx
   attributes; the geometry property overrides them at the rendered layer, which is what E7 reads. */
[data-elegance="v4"] .visual rect, [data-elegance="v4"] .visual circle { rx: 0px; ry: 0px; }

/* §3.1 the tile is a COLUMN, not a card: no fill, no border, no blur, no sheen, no shadow */
[data-elegance="v4"] .tile, [data-elegance="v4"] .dist,
[data-elegance="v4"] .compare, [data-elegance="v4"] .rail,
[data-elegance="v4"] details.disclose {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-elegance="v4"] .tile::after, [data-elegance="v4"] .tile::before,
[data-elegance="v4"] .dist::after, [data-elegance="v4"] .dist::before,
[data-elegance="v4"] .compare::after, [data-elegance="v4"] .compare::before,
[data-elegance="v4"] .rail::after, [data-elegance="v4"] .rail::before,
[data-elegance="v4"] details.disclose::after { display: none; }
[data-elegance="v4"] .tile:hover { transform: none; box-shadow: none; }
[data-elegance="v4"] .tile:hover .visual .val { stroke: var(--ink); }
[data-elegance="v4"] details.disclose { border-top: 1px solid var(--hair); }
[data-elegance="v4"] details.disclose > summary { padding: 0 0 0 2px; }
[data-elegance="v4"] details.disclose > .body { padding: 2px 2px 18px; }

/* §3.1 the ruled column: 1px hair verticals between columns, a hair-strong rule above the row */
[data-elegance="v4"] .ruled-row { border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair); gap: 0 !important; }
[data-elegance="v4"] .ruled-row > .tile, [data-elegance="v4"] .ruled-row > .dist {
  border-left: 1px solid var(--hair); padding: 30px 34px 18px; min-height: 250px; }
[data-elegance="v4"] .ruled-row > :first-child { border-left: 0; padding-left: 0; }
[data-elegance="v4"] .ruled-row > :last-child { padding-right: 0; }

/* §2.3 type: the question is a LABEL, the figure is the loud thing */
[data-elegance="v4"] [data-widget] .q { font-size: .9375rem; font-weight: 500; line-height: 1.35; color: var(--ink-2); letter-spacing: 0; }
[data-elegance="v4"] .tile .figure.f-2, [data-elegance="v4"] .dist .figure.f-2 { font-size: 52px; font-weight: 600; letter-spacing: -.028em; min-height: 0; }
[data-elegance="v4"] .figure, [data-elegance="v4"] .num, [data-elegance="v4"] td, [data-elegance="v4"] .den,
[data-elegance="v4"] .cap, [data-elegance="v4"] .tick-lab, [data-elegance="v4"] .lab {
  font-variant-numeric: tabular-nums lining-nums; }
[data-elegance="v4"] .figure .den { color: var(--ink-2); font-size: .8438rem; }
[data-elegance="v4"] .eyebrow, [data-elegance="v4"] .gate { font-size: .6875rem; letter-spacing: .16em; font-weight: 600; }
[data-elegance="v4"] [data-widget] .head { gap: 0; margin-bottom: 18px; }
[data-elegance="v4"] [data-widget] .glyph { display: none; }   /* §1.2f no clip-art beside a sentence */

/* §2.5 the gate: the default state is a WORD. Non-default = a 1×9px hairline, never a dot */
[data-elegance="v4"] .gate-dot { width: 1px; height: 9px; border-radius: 0; box-shadow: none !important; }
[data-elegance="v4"] [data-gate="pass"] > .foot .gate-dot,
[data-elegance="v4"] [data-gate="pass"] .gate--own .gate-dot,
[data-elegance="v4"] [data-gate="receipt"] > .foot .gate-dot { display: none; }
[data-elegance="v4"] [data-gate="watch"] > .foot .gate-dot, [data-elegance="v4"] [data-gate="watch"] .gate--own .gate-dot { background: var(--warn); }
[data-elegance="v4"] [data-gate="stale"] > .foot .gate-dot, [data-elegance="v4"] [data-gate="stale"] .gate--own .gate-dot { background: var(--warn); }
[data-elegance="v4"] [data-gate="withheld"] > .foot .gate-dot, [data-elegance="v4"] [data-gate="withheld"] .gate--own .gate-dot { background: var(--ink-2); }
[data-elegance="v4"] [data-gate="withheld"] .gate-word { color: var(--ink-2); }
[data-elegance="v4"] .as-of .gate-dot { width: 1px; height: 9px; border-radius: 0; }
[data-elegance="v4"] [data-widget] .foot { border-top: 1px solid var(--hair); padding-top: 12px; align-items: baseline; }
[data-elegance="v4"] .ruled-row > [data-widget] .foot { margin-top: 16px; }
[data-elegance="v4"] [data-widget] .receipt-line { font-size: .6875rem; }
[data-elegance="v4"] .rail .chip { border-radius: var(--r-chip); }
[data-elegance="v4"] .rail .chip i { width: 1px; height: 9px; border-radius: 0; }
[data-elegance="v4"] .rail .chip[data-chip="pass"] i, [data-elegance="v4"] .rail .chip[data-chip="receipt"] i { display: none; }

/* §3.2 controls: 4px, and the primary is INK, never a blue fill */
[data-elegance="v4"] [data-widget] .expand, [data-elegance="v4"] .expand-below .rail-btn,
[data-elegance="v4"] .itable .picker > button, [data-elegance="v4"] .itable input[type="search"],
[data-elegance="v4"] .itable select, [data-elegance="v4"] .find, [data-elegance="v4"] .kbd { border-radius: var(--r-ctl); }
[data-elegance="v4"] [data-widget] .expand, [data-elegance="v4"] .expand-below .rail-btn, [data-elegance="v4"] .itable .picker > button {
  background: none; box-shadow: none; }
[data-elegance="v4"] [data-widget] .expand:hover, [data-elegance="v4"] .itable .picker > button:hover {
  background: none; border-color: var(--hair-strong); box-shadow: none; }
[data-elegance="v4"] [data-widget] .expand[aria-expanded="true"] { color: var(--ink); border-color: var(--accent-hair); }
[data-elegance="v4"] :focus-visible { box-shadow: 0 0 0 2px var(--accent-hair); border-radius: var(--r-ctl); }
[data-elegance="v4"] .picker-menu label { border-radius: var(--r-chip); }
[data-elegance="v4"] .door { border-radius: var(--r-ctl); }

/* §3.7 mini-visuals are MARKS ON A SCALE — no filled track, no rounded bar, no waffle */
[data-elegance="v4"] .tile .visual { height: 66px; margin-top: auto; margin-bottom: 4px; }
[data-elegance="v4"] .tile .visual .trk { stroke: var(--hair); stroke-width: 1; fill: none; }
[data-elegance="v4"] .tile .visual .minor, [data-elegance="v4"] .tile .visual .axis { stroke: var(--rule); stroke-width: 1; fill: none; }
[data-elegance="v4"] .tile .visual .val { stroke: var(--ink-2); stroke-width: 2; fill: none; }
[data-elegance="v4"] .tile .visual .cap2 { stroke: var(--ink-2); stroke-width: 1; fill: none; }
[data-elegance="v4"] .tile .visual .tickline { stroke: var(--ink); stroke-width: 1; fill: none; }
[data-elegance="v4"] .tile .visual .obs { stroke: var(--ink-2); stroke-width: 1; opacity: .5; fill: none; }
[data-elegance="v4"] .tile .visual .accent { stroke: var(--blue); stroke-width: 1; fill: none; }
[data-elegance="v4"] .tile .visual .lab { font-family: var(--font); font-size: 10.5px; font-weight: 500; fill: var(--muted); letter-spacing: .01em; }
[data-elegance="v4"] .tile .visual .lab-d { fill: var(--ink-2); }
/* the legacy painted kinds, neutralised where a lane still calls them (§2.2 R-1/R-2) */
[data-elegance="v4"] .visual .mark, [data-elegance="v4"] .visual .mark-2 { fill: var(--ink-2); fill-opacity: .55; }
[data-elegance="v4"] .visual .band { fill: var(--ink-2); fill-opacity: .30; }
[data-elegance="v4"] .visual .area { display: none; }
[data-elegance="v4"] .visual .line { stroke: var(--ink-2); stroke-width: 1.25; }
[data-elegance="v4"] .visual .tip { fill: var(--blue); }
[data-elegance="v4"] .visual .tip-halo { display: none; }
[data-elegance="v4"] .visual .track { fill: rgba(255,255,255,.035); }
[data-elegance="v4"] [data-mark-gate] { fill: var(--ink-2); }

/* §3.4 the table: no row borders, no zebra, one hair under the head, hover is a wash */
[data-elegance="v4"] .itable .scroll { border-radius: 0; border: 0; background: none; box-shadow: none; }
[data-elegance="v4"] .itable thead { background: linear-gradient(180deg, rgba(5,6,8,.97), rgba(5,6,8,.92)); box-shadow: none; }
[data-elegance="v4"] .itable thead th { border-bottom: 1px solid var(--hair); }
[data-elegance="v4"] .itable thead th::after { display: none; }
[data-elegance="v4"] .itable thead th[aria-sort="ascending"] .sort, [data-elegance="v4"] .itable thead th[aria-sort="descending"] .sort { color: var(--ink); }
[data-elegance="v4"] .itable tbody td { border-bottom: 0; }
[data-elegance="v4"] .itable tbody tr:hover, [data-elegance="v4"] .itable tbody tr:focus-visible { background: rgba(255,255,255,.03); box-shadow: none; }
[data-elegance="v4"] .itable tbody tr[aria-selected="true"] { background: rgba(255,255,255,.045); box-shadow: inset 2px 0 0 var(--accent-hair); }
[data-elegance="v4"] .itable tbody td .arrow { color: var(--muted); }
[data-elegance="v4"] .itable tbody tr:hover td .arrow { color: var(--ink-2); }
[data-elegance="v4"] .itable .table-frame { border-radius: 0; border: 0; border-top: 1px solid var(--hair); }
/* the in-cell mini becomes a hairline track with a 2px measured extent and a 1px tick at the value */
[data-elegance="v4"] .itable tbody td.num .mini { width: 64px; height: 9px; border-radius: 0; box-shadow: none !important;
  background: linear-gradient(to bottom, transparent 4px, var(--hair) 4px, var(--hair) 5px, transparent 5px) !important; }
[data-elegance="v4"] .itable tbody td.num .mini i { top: 4px; bottom: auto; height: 2px; border-radius: 0;
  background: var(--ink-2) !important; box-shadow: none !important; filter: none !important; }
[data-elegance="v4"] .itable tbody td.num .mini i::after { width: 1px; top: -3px; bottom: -3px; background: var(--ink); }

/* §3.5 charts on the ground; §3.3 legends die (every mark is direct-labelled) */
[data-elegance="v4"] .chart-on-ground { border-radius: 0; border: 0; background: none; box-shadow: none; }
[data-elegance="v4"] .dist .chart { border-radius: 0; }
[data-elegance="v4"] .expand-below .legend { display: none; }
[data-elegance="v4"] .expand-below .legend i { border-radius: 0; background: var(--ink-2); }  /* §2.1: 2px is not on the ladder, even on a hidden node */
[data-elegance="v4"] .expand-below .title { font-size: 1.25rem; }

/* §3.1 the comparison + the rail: rules, not boxes */
[data-elegance="v4"] .compare { border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair); }
[data-elegance="v4"] .compare .side { padding: 26px 30px 18px; }
[data-elegance="v4"] .compare .side + .join + .side { border-left: 1px solid var(--hair); }
[data-elegance="v4"] .compare .join::before { background: var(--hair); }
[data-elegance="v4"] .compare .join .delta { color: var(--ink); background: none; }
[data-elegance="v4"] .compare .join .cap { background: none; }
[data-elegance="v4"] .compare .side .visual .mark { fill: var(--ink-2); }
[data-elegance="v4"] .compare .side .visual { height: 58px; }
[data-elegance="v4"] .compare .side .visual .trk { stroke: var(--hair); stroke-width: 1; fill: none; }
[data-elegance="v4"] .compare .side .visual .minor { stroke: var(--rule); stroke-width: 1; fill: none; }
[data-elegance="v4"] .compare .side .visual .val { stroke: var(--ink-2); stroke-width: 2; fill: none; }
[data-elegance="v4"] .compare .side .visual .tickline { stroke: var(--ink); stroke-width: 1; fill: none; }
[data-elegance="v4"] .compare .side .visual .lab { font-family: var(--font); font-size: 10.5px; font-weight: 500; fill: var(--muted); font-variant-numeric: tabular-nums; }
[data-elegance="v4"] .compare .side .visual .lab-d { fill: var(--ink-2); }
[data-elegance="v4"] .rail { border-top: 1px solid var(--hair-strong); padding: 26px 0 18px; }
[data-elegance="v4"] .rail .custody .lit { stroke: var(--hair-strong); stroke-width: 1; }
[data-elegance="v4"] .rail .custody .node { fill: var(--ink-2); }
[data-elegance="v4"] .rail .open, [data-elegance="v4"] .tile .empty-line a,
[data-elegance="v4"] .chart-frame .note a, [data-elegance="v4"] .itable .table-frame .note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-hair); text-underline-offset: 3px; }
[data-elegance="v4"] [data-state="loading"]::after, [data-elegance="v4"] [data-state="error"]::after {
  background: linear-gradient(90deg, transparent, var(--accent-hair), transparent); }

/* the reviewer's states strip: the ruled-column idiom at cell width, never 36 little cards */
[data-elegance="v4"] .states .cell > [data-widget] { border-left: 1px solid var(--hair); padding-left: 14px; padding-right: 8px; }
[data-elegance="v4"] .states .cell .tile { padding-top: 16px; padding-bottom: 14px; }
[data-elegance="v4"] .states .cell .figure.f-2 { font-size: 2rem; }
[data-elegance="v4"] .states .cell .visual { height: 52px; }
[data-elegance="v4"] .states .cell .compare, [data-elegance="v4"] .states .cell .rail { border-top: 0; }
[data-elegance="v4"] .states .cell .compare .side, [data-elegance="v4"] .states .cell .rail { padding: 14px 8px 12px 0; }