/* Shared data components for the home exhibit, the tracker, revenue and governance pages. Cream ground, ink type, one red.
   Status never relies on colour alone: every chip carries its word and a square LED mark of its own shape.
   Borders of controls and chips use --line (3.43:1); --hair appears only as a decorative divider. */

/* Plain-text notice shown when the server could not read its sources */
.live-notice{max-width:none;margin:0 0 24px;padding:14px 18px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font-size:14px;font-weight:400;line-height:1.6}
.live-notice[hidden]{display:none}

/* Figures */
.fig{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;overflow-wrap:anywhere}
.fig[data-status="unknown"],.fig[data-status="planned"],.fig[data-status="not_live"],.fig[data-status="not_published"]{color:var(--muted)}
.fig-meta,[data-fig-meta]{display:block;margin-top:4px;color:var(--muted);font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:.02em}
.fig-wrap{display:block}

/* Status chips: a 12px mono word, a square LED mark and a border. Six figure statuses, five stream statuses. */
.chip{display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:2px 8px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--ink);font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;white-space:nowrap}
.chip::before{content:"";flex:0 0 auto;width:8px;height:8px;background:currentColor}
.chip[data-status="real"],.chip[data-status="live"]{color:var(--ok);border-color:var(--ok)}
.chip[data-status="ledger"]{color:var(--ink)}
.chip[data-status="derived"]{color:var(--ink)}.chip[data-status="derived"]::before{background:transparent;border:2px solid currentColor}
.chip[data-status="unknown"],.chip[data-status="not_published"]{color:var(--muted);border-style:dashed}.chip[data-status="unknown"]::before,.chip[data-status="not_published"]::before{height:2px}
.chip[data-status="planned"]{color:var(--muted);border-style:dashed}.chip[data-status="planned"]::before{background:transparent;border:2px dashed currentColor}
.chip[data-status="not_live"],.chip[data-status="dark"]{color:var(--muted)}
.chip[data-status="not_live"]::before,.chip[data-status="dark"]::before{background:linear-gradient(45deg,transparent 42%,currentColor 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,currentColor 42% 58%,transparent 58%);border:1px solid currentColor}
.chip-stale{color:var(--red);border-color:var(--red)}.chip-stale::before{background:var(--red)}
/* A figure carries its status word and square mark after the number, so it survives no-JS and is set by the server too. */
.fig-chip::after{content:attr(data-status);display:inline-block;margin-left:12px;padding:2px 8px 2px 24px;border:1px solid var(--line);border-radius:2px;color:var(--ink);font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:normal;vertical-align:3px;line-height:1.4;white-space:nowrap;background:linear-gradient(currentColor,currentColor) 8px 50%/8px 8px no-repeat}
.fig-chip[data-status="real"]::after{color:var(--ok);border-color:var(--ok)}
.fig-chip[data-status="derived"]::after{background:linear-gradient(var(--paper),var(--paper)) 10px 50%/4px 4px no-repeat,linear-gradient(currentColor,currentColor) 8px 50%/8px 8px no-repeat}
.fig-chip[data-status="unknown"]::after{color:var(--muted);border-style:dashed;background:linear-gradient(currentColor,currentColor) 8px 50%/8px 2px no-repeat}
.fig-chip[data-status="planned"]::after{color:var(--muted);border-style:dashed;background:linear-gradient(var(--paper),var(--paper)) 10px 50%/4px 4px no-repeat,linear-gradient(currentColor,currentColor) 8px 50%/8px 8px no-repeat}
.fig-chip[data-status="not_live"]::after{content:"not live";color:var(--muted)}

/* LED state squares (square, never round) */
.led{display:inline-block;width:8px;height:8px;flex:none;margin-top:6px;background:var(--muted)}
.led[data-state="ok"]{background:var(--ok)}.led[data-state="stale"],.led[data-state="partial"]{background:var(--red)}.led[data-state="unavailable"]{background:var(--red)}

/* Definition lists: label left, figure right */
.data-list{margin:0;font-size:15px}
.data-list>div{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px 24px;padding:16px 0;border-top:1px solid var(--hair);align-items:baseline}
.data-list>div:last-child{border-bottom:1px solid var(--hair)}
.data-list dt{color:var(--ink)}.data-list dt small{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5}
.data-list dd{margin:0;text-align:right}

/* Tables: hairline rows, mono capital heads; stacked labelled rows at 390 px (each td carries data-label) */
.data-table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.data-table caption{text-align:left;color:var(--muted);font-family:var(--mono);font-size:12px;padding-bottom:12px;letter-spacing:.12em;text-transform:uppercase}
.data-table th,.data-table td{padding:16px 12px;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--hair);overflow-wrap:anywhere}
.data-table thead th{color:var(--muted);font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.data-table th[scope="row"]{font-weight:400;color:var(--ink)}
.data-table th small{display:block;margin-top:6px;color:var(--muted);font-size:12px;font-weight:400;line-height:1.5}
.data-table .num{text-align:right}.data-table .fig-wrap,.data-table .fig-meta{text-align:right}

/* The exact value is one tap away: a native <details> (keyboard, touch, no script) */
.xf{display:block;min-width:0}
.xf summary{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;cursor:pointer;list-style:none;min-height:44px;align-content:center;max-width:100%}
.xf summary::-webkit-details-marker{display:none}
.xf summary::after{content:"Full value";font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.06em;white-space:nowrap;color:var(--muted);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;line-height:1.4;flex:none;align-self:center}
.xf[open] summary::after{content:"Hide";color:var(--ink)}
.xf summary:hover::after{color:var(--ink);text-decoration-style:solid}
.xf summary:has([data-status="unknown"])::after,.xf summary:has([data-status="unknown"]) .unit{display:none}
.xf-exact{margin:4px 0 12px;padding:8px 12px;max-width:none;font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--ink);background:var(--paper-2);border-left:1px solid var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.xf-unit{color:var(--muted)}
.unit{font-family:var(--mono);font-size:12px;letter-spacing:.12em;font-weight:400;color:var(--muted);margin-left:2px;white-space:nowrap;text-transform:uppercase}

/* KPI cells: hairline verticals, a glyph and a mono label, a big number, its source and age */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--hair)}
.kpi{padding:28px 24px 24px;min-width:0;display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--hair)}
.kpi:first-child{border-left:0;padding-left:0}
.kpi-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kpi-head .label{flex:1 1 100px}
.kpi-value{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-family:var(--display);font-weight:500;font-size:clamp(32px,3.6vw,52px);letter-spacing:-.05em;line-height:1}
.kpi-value .unit{font-size:12px}
.kpi-text{font-family:var(--display);font-weight:500;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;line-height:1.15}
.kpi-sub{font-size:14px;line-height:1.5;color:var(--muted);max-width:none}
.kpi .fig-meta{margin-top:auto}
@media(max-width:1000px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{border-left:0;padding:24px 16px 20px}.kpi:nth-child(odd){padding-left:0}.kpi:nth-child(even){border-left:1px solid var(--hair)}
  .kpi:nth-child(n+3){border-top:1px solid var(--hair)}
}
@media(max-width:650px){.kpi-value{font-size:clamp(28px,8.4vw,34px)}.kpi{padding:20px 12px 16px}.kpi:nth-child(odd){padding-left:0}}

/* The page's one panel: square, 1px border, a 1px ink top edge */
.panel{background:var(--paper);border:1px solid var(--line);border-top-color:var(--ink)}

@media(max-width:650px){
  .data-list>div{grid-template-columns:1fr;gap:6px;padding:16px 0}.data-list dd{text-align:left}
  .data-table,.data-table tbody,.data-table tr,.data-table th,.data-table td{display:block}
  .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .data-table tr{padding:14px 0;border-bottom:1px solid var(--hair)}
  .data-table th,.data-table td{padding:6px 0;border:0}
  .data-table td{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:12px;align-items:baseline}
  .data-table td::before{content:attr(data-label);color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
  .data-table td.num,.data-table .fig-wrap,.data-table .fig-meta{text-align:left}
}
@media(forced-colors:active){
  .chip,.live-notice,.fig-chip::after{border-color:CanvasText;color:CanvasText}
  .chip::before{background:CanvasText;forced-color-adjust:none}
  .chip[data-status="derived"]::before,.chip[data-status="planned"]::before{background:transparent;border-color:CanvasText}
  .fig-chip::after{forced-color-adjust:none;background-color:Canvas}
}
@media(max-width:650px){.data-table caption{display:block;width:100%}}