/* Colour tokens: dark by default, light when the system asks for it. Every colour on the page, charts included,
   comes from these tokens through classes (the CSP forbids style attributes). */
:root {
  color-scheme: dark;
  --bg: #0b1026; --fg: #e9ecf5; --muted: #a5adc6; --gold: #e8c26a; --card: #151b38; --card2: #1c2347;
  --line: #2a3260; --up: #5fd39a; --down: #ff8f8f; --warn: #f5b85b; --info: #8fb8ff;
  --top: #0d1330; --banner-bg: #2a2210; --input-bg: #0e1430; --log-bg: #070b1c; --on-gold: #1b1606;
  --band50: #6f86d6; --band90: #5568b0; --median: #f3f5fb; --trad: #c9a0ff; --market: #7c84a3;
  --field-line: #5d6799;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f5f6fa; --fg: #141a33; --muted: #566079; --gold: #8a5d00; --card: #ffffff; --card2: #eef1f8;
    --line: #d3d9e8; --up: #11764a; --down: #b8322a; --warn: #8f5300; --info: #2453b3;
    --top: #ffffff; --banner-bg: #fff3d9; --input-bg: #ffffff; --log-bg: #eef0f6; --on-gold: #ffffff;
    --band50: #5d76c9; --band90: #7f8fcc; --median: #141a33; --trad: #7a3fc4; --market: #6b738f;
    --field-line: #7e879f;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--gold); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; color: var(--gold); }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
p { margin: .4rem 0; }
.muted { color: var(--muted); font-size: .88rem; }
.small { font-size: .82rem; }
.error { color: var(--down); }
[hidden] { display: none !important; }

.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--top); position: sticky; top: 0; z-index: 2; }
.brand { color: var(--gold); font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.brand span { color: var(--fg); font-weight: 500; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
nav a.active, nav a:hover { color: var(--fg); background: var(--card2); }
.admin { margin-left: auto; display: flex; align-items: center; gap: 8px; }
main { max-width: 1180px; margin: 0 auto; padding: 20px 24px 40px; }
footer { text-align: center; padding: 16px; border-top: 1px solid var(--line); }

#banner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.banner { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--warn); color: var(--warn); background: var(--banner-bg); }
.banner strong { color: var(--fg); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 12px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.stat .value { font-size: 1.6rem; font-weight: 700; }
.stat .label { color: var(--muted); font-size: .85rem; }
.stat .sub { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.spread { justify-content: space-between; }

button, .button { background: var(--card2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .button:hover { border-color: var(--gold); }
button.primary, .button.primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); font-weight: 600; }
button.danger { border-color: var(--down); color: var(--down); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { background: var(--input-bg); color: var(--fg); border: 1px solid var(--field-line); border-radius: 8px; padding: 7px 9px; font: inherit; }
textarea { width: 100%; min-height: 60px; }
label { display: block; margin: 8px 0; }
label > input:not([type=checkbox]):not([type=radio]), label > select, label > textarea { display: block; margin-top: 4px; width: 100%; }
.inline label, label.inline { display: inline-flex; gap: 6px; align-items: center; margin: 4px 12px 4px 0; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 12px; }
.tabs a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.tabs a.active { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--card2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip.validated, .chip.right, .chip.succeeded, .chip.up { color: var(--up); border-color: var(--up); }
.chip.rejected, .chip.wrong, .chip.failed, .chip.down { color: var(--down); border-color: var(--down); }
.chip.failed-validation, .chip.queued, .chip.running, .chip.skipped { color: var(--warn); border-color: var(--warn); }
.chip.planned, .chip.lab { color: var(--info); border-color: var(--info); }
.up { color: var(--up); }
.down { color: var(--down); }

pre.log { background: var(--log-bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; max-height: 480px; overflow: auto; font-size: .78rem; white-space: pre-wrap; word-break: break-word; }
.cond-row { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(90px, 1fr) minmax(160px, 2fr) auto; gap: 8px; align-items: start; margin: 6px 0; }
.cond-row .choices { display: flex; flex-wrap: wrap; gap: 2px 10px; max-height: 160px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 12px; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.preview { background: var(--input-bg); border-radius: 8px; padding: 10px; }
.pager { margin-top: 10px; }
dialog { background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; max-width: 420px; width: 92vw; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
@media (max-width: 700px) {
  .cond-row { grid-template-columns: 1fr; }
  main { padding: 16px; }
  #banner, .loading-line { padding: 0 16px; }
}
.search-box { position: relative; flex: 1 1 320px; }
.search-box input { width: 100%; }
.results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 3; background: var(--card); border: 1px solid var(--line); border-radius: 8px; max-height: 320px; overflow: auto; }
.result { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 8px 10px; }
.result:hover { background: var(--card2); }


/* ---------------------------------------------------------------- stock page (lab v2) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.strong { font-weight: 600; }
.note { color: var(--warn); }
ul.plain { padding-left: 18px; margin: 6px 0; }
ul.plain li { margin: 3px 0; }
.small-button { padding: 2px 9px; font-size: .8rem; }
.stock-controls { align-items: flex-start; }
.date-row { margin: 0; }
.stock-head .stock-symbol { margin: 0; color: var(--gold); }
.stock-head .company { font-weight: 400; font-size: .95rem; }
.freshness p { margin: 4px 0; }
.chip.demo { color: var(--warn); border-color: var(--warn); font-weight: 700; }
.chip.stale { color: var(--warn); border-color: var(--warn); }
.chip.conf { color: var(--fg); }
.chip.src-published { color: var(--up); border-color: var(--up); }
.chip.src-replay { color: var(--info); border-color: var(--info); }
.chip.src-projected { color: var(--info); border-color: var(--info); border-style: dashed; }
.chip.badge-validated { color: var(--up); border-color: var(--up); }
.chip.badge-tested_no_signal { color: var(--muted); border-color: var(--muted); border-style: dashed; }
.chip.badge-not_enough_history { color: var(--warn); border-color: var(--warn); border-style: dashed; }
.chip.badge-untested_tradition { color: var(--trad); border-color: var(--trad); border-style: dotted; }

.ctx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.ctx-cell { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.ctx-label { color: var(--muted); font-size: .8rem; }
.ctx-value { font-weight: 600; margin: 2px 0; }
.ctx-value.neutral { color: var(--fg); }
.ctx-chips { margin: 4px 0 0; gap: 4px; }
.hz-tabs .tab { border-radius: 999px; padding: 6px 14px; background: transparent; color: var(--muted); }
.hz-tabs .tab.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.verdict { border-left: 4px solid var(--line); }
.verdict.lean-up { border-left-color: var(--up); }
.verdict.lean-down { border-left-color: var(--down); }
.verdict-text { font-size: 1.25rem; font-weight: 700; margin: 0; }
.verdict.lean-up .verdict-text { color: var(--up); }
.verdict.lean-down .verdict-text { color: var(--down); }
.reasons { list-style: none; padding: 0; margin: 0; }
.reason { display: flex; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.reason:last-child { border-bottom: 0; }
.reason .chip { flex: none; }
.size-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.size-grid .stat .value { font-size: 1.25rem; }
.caption { font-size: .9rem; margin-top: 10px; }
.coverage li.strong { color: var(--fg); }
.lean-summary { font-weight: 500; }
.data-table > summary, details.calc-details > summary { cursor: pointer; }
.data-table > summary { color: var(--muted); font-size: .88rem; margin: 10px 0 6px; }
details.calc-details > summary { font-weight: 600; font-size: 1.05rem; }
.calc { border-top: 1px solid var(--line); margin-top: 12px; }
.insample { opacity: .72; font-style: italic; border-top: 1px dashed var(--line); margin-top: 14px; }
.track-tier h3 { margin-top: .8rem; }
.watch-simple { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.watch-simple li { border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; }

/* Range chart (chart.js rangeChart): history 70%, range bars 30%; stacked below 600px. */
.rc { display: grid; grid-template-columns: 7fr 3fr; align-items: start; margin: 6px 0; }
.rc > svg { min-width: 0; }
.rc-mobile { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rc-svg, .tl-svg, .sw-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rc-grid { stroke: var(--line); stroke-width: 1; }
.rc-axis { fill: var(--muted); font-size: 11px; }
.rc-axis.strong { fill: var(--fg); font-weight: 700; }
.rc-zero { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 3; }
.rc-zero-label { fill: var(--muted); font-size: 11px; }
.rc-hist { fill: none; stroke: var(--info); stroke-width: 2; stroke-linejoin: round; }
.rc-hit { fill: transparent; }
.rc-hit:hover { fill: var(--info); }
.rc-today { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 2 3; }
.rc-slot { fill: transparent; }
.rc-slot.active { fill: var(--card2); stroke: var(--gold); stroke-width: 1; }
.rc-band50 { fill: var(--band50); }
.rc-band90 { fill: var(--band90); }
.rc-median { stroke: var(--median); stroke-width: 2.5; }
.rc-tilt.up { stroke: var(--up); fill: var(--up); stroke-width: 3; }
.rc-tilt.down { stroke: var(--down); fill: var(--down); stroke-width: 3; }
.rc-realised { fill: var(--bg); stroke: var(--warn); stroke-width: 2.5; }
.rc-watermark { fill: var(--muted); opacity: .16; font-size: 44px; font-weight: 800; letter-spacing: .12em; }
.rc-note { fill: var(--muted); font-size: 13px; }
.rb-cell.up { fill: var(--up); }
.rb-cell.down { fill: var(--down); }
.rb-cell.none { fill: var(--line); }
.rb-cell.right { stroke: var(--fg); stroke-width: .8; }
.rb-cell.wrong { fill-opacity: .35; stroke: var(--warn); stroke-width: 1.2; }
.rb-cell.unknown { fill-opacity: .6; }
.rb-nodata { fill: var(--line); opacity: .55; }

.lg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted); margin: 6px 0; }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-swatch { display: inline-block; flex: none; width: 14px; height: 10px; border-radius: 2px; background: var(--line); }
.lg-swatch.lg-line { height: 3px; }
.lg-swatch.lg-dot { width: 10px; border-radius: 50%; }
.lg-swatch.rc-hist { background: var(--info); }
.lg-swatch.rc-band50 { background: var(--band50); }
.lg-swatch.rc-band90 { background: var(--band90); }
.lg-swatch.rc-median { background: var(--median); }
.lg-swatch.rc-tilt.up, .lg-swatch.rb-cell.up, .lg-swatch.tl-span.up { background: var(--up); }
.lg-swatch.rc-tilt.down, .lg-swatch.tl-span.down { background: var(--down); }
.lg-swatch.rc-realised { background: transparent; border: 2px solid var(--warn); }
.lg-swatch.rb-nodata { background: var(--line); }
.lg-swatch.tl-span.grey { background: var(--muted); opacity: .5; }
.lg-swatch.tl-span.bench { background: color-mix(in srgb, var(--info) 35%, transparent); border: 1px solid var(--info); }
.lg-swatch.rb-cell.down { background: var(--down); }
.lg-swatch.rb-cell.wrong { background: color-mix(in srgb, var(--up) 35%, transparent); border: 1.5px solid var(--warn); }
.lg-count { color: var(--fg); }
.lg-swatch.tl-trad { background: repeating-linear-gradient(45deg, var(--trad) 0 2px, transparent 2px 5px); border: 1px solid var(--trad); }
.lg-swatch.tl-proj { background: transparent; border: 2px dashed var(--up); }
.lg-swatch.tl-event { width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold); }
.lg-swatch.tl-market { width: 5px; height: 12px; background: var(--market); }

/* Sky timeline (chart.js timelineStrip / timelineList). The tradition rows are hatched through an SVG pattern,
   so .tl-trad sets no fill here. */
.tl-label { fill: var(--fg); font-size: 12px; }
.tl-label.muted { fill: var(--muted); }
.tl-label.strong { font-weight: 700; }
.tl-grid { stroke: var(--line); stroke-width: 1; }
.tl-span, .tl-trad, .tl-proj, .tl-event, .tl-market { cursor: pointer; }
.tl-span.up { fill: var(--up); fill-opacity: .5; }
.tl-span.down { fill: var(--down); fill-opacity: .5; }
.tl-span.grey { fill: var(--muted); fill-opacity: .3; }
.tl-span.bench { fill: var(--info); fill-opacity: .28; stroke: var(--info); stroke-width: 1; }
.tl-span.agrees { fill-opacity: .95; stroke: var(--fg); stroke-width: 1.5; }
.tl-trad { stroke: var(--trad); stroke-width: 1.2; }
.tl-hatch-bg { fill: transparent; }
.tl-hatch-line { stroke: var(--trad); stroke-width: 2; }
.tl-proj.up { fill: var(--up); fill-opacity: .12; stroke: var(--up); stroke-width: 2; stroke-dasharray: 5 3; }
.tl-proj.down { fill: var(--down); fill-opacity: .12; stroke: var(--down); stroke-width: 2; stroke-dasharray: 5 3; }
.tl-event { fill: var(--gold); }
.tl-market { fill: var(--market); }
.tl-svg [tabindex]:focus { outline: none; }
.tl-panel { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; background: var(--card2); }
.tl-panel .row { margin: 4px 0; }
.tl-list { list-style: none; padding: 0; margin: 8px 0; }
.tl-item { border-left: 4px solid var(--line); margin: 4px 0; }
.tl-item.up { border-left-color: var(--up); }
.tl-item.down { border-left-color: var(--down); }
.tl-item.grey { border-left-color: var(--muted); }
.tl-item.bench { border-left-color: var(--info); }
.tl-item.tl-trad { border-left-color: var(--trad); border-left-style: dotted; }
.tl-item.tl-proj { border-left-style: dashed; }
.tl-item-btn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; width: 100%; text-align: left; background: var(--card2); border: 0; border-radius: 0 8px 8px 0; padding: 7px 10px; }
.tl-dates { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-kind { grid-column: 2; color: var(--muted); font-size: .8rem; }
.tl-mobile h4 { margin: 12px 0 4px; }
.tl-events { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.tl-events li { padding: 3px 0; }

/* Sky at 09:15 IST: table and wheel. */
.sky-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.sw-ring { fill: none; stroke: var(--line); }
.sw-ring.inner { stroke-dasharray: 2 3; }
.sw-sign { fill: var(--muted); font-size: 10px; }
.sw-tick { stroke: var(--fg); stroke-width: 1.5; }
.sw-body circle { fill: var(--card2); stroke: var(--gold); stroke-width: 1.2; }
.sw-body text { fill: var(--fg); font-size: 10px; font-weight: 600; }
.sw-body.retro circle { stroke-dasharray: 3 2; }
.sw-body.combust circle { stroke: var(--warn); }
.sky-table td, .sky-table th { white-space: nowrap; }

@media (max-width: 1400px) {
  .sky-grid { grid-template-columns: minmax(0, 1fr); }
  .sky-wheel { max-width: 320px; width: 100%; margin: 0 auto; }
}
@media (max-width: 700px) {
  .ctx { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .top { padding: 10px 16px; }
}
@media (max-width: 600px) {
  .top { position: static; }
  .rc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .card { padding: 12px; }
  .reason { flex-wrap: wrap; }
}
.card > h2:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- release fixes */
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--gold); color: var(--on-gold); padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 8px; }
.loading-line { max-width: 1180px; margin: 10px auto 0; padding: 0 24px; color: var(--muted); }
main.busy { opacity: .55; transition: opacity .2s; }
nav a.locked::after { content: " (admin)"; font-size: .78em; }
.nowrap { white-space: nowrap; }
.row-link { color: var(--fg); text-decoration: none; }
.row-link:hover, .row-link:focus-visible { color: var(--gold); text-decoration: underline; }
.field-error { margin: -4px 0 8px; }
.disclaimer { margin: 0 0 10px; }
details.fold > summary { cursor: pointer; list-style-position: inside; }
details.fold > summary h2 { display: inline; margin: 0; font-size: 1.05rem; }
details.fold[open] > summary { margin-bottom: 8px; }
/* Below 600px, the low-value columns of wide tables give way so the result stays on screen. */
@media (max-width: 600px) {
  .opt { display: none; }
  th, td { padding: 6px 6px; }
}
/* The narrow chart layout (below 900px): capped so tablet labels stay near their drawn size (about 11-14px), and
   drawn a little larger so they stay readable when a phone shrinks them. */
.rc-mobile > svg { max-width: 440px; }
.rc-mobile .rc-axis, .rc-mobile .rc-zero-label { font-size: 12.5px; }
.rc-mobile .rc-note { font-size: 14px; }
/* Range bars alone (no history line for this reader): one column, not two thirds of empty space. */
.rc.rc-solo { grid-template-columns: minmax(0, 1fr); }
.rc.rc-solo > svg { max-width: 420px; }
.rc.rc-solo > p { margin: 4px 0 0; }

/* Screen-reader-only text (live counts). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Wide tables: a soft shadow at an edge that has more columns past it (a scroll cue), in any theme. */
.table-wrap {
  --wrap-bg: var(--bg);
  background:
    linear-gradient(to right, var(--wrap-bg) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--wrap-bg) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--fg) 22%, transparent), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--fg) 22%, transparent), transparent) right / 12px 100% no-repeat scroll;
}
.card .table-wrap, .stat .table-wrap { --wrap-bg: var(--card); }

/* Stacked tables: below 600px each row is a small card of "label: value" lines, so no column is off screen. */
@media (max-width: 600px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  table.stack td { border: 0; padding: 2px 4px; display: flex; gap: 10px; justify-content: space-between; align-items: baseline; text-align: right; }
  table.stack td.num { text-align: right; }
  table.stack td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; text-align: left; flex: none; max-width: 45%; }
  table.stack td:not([data-label])::before, table.stack td[data-label=""]::before { content: none; }
  table.stack td > * { min-width: 0; }
  table.stack td.opt { display: flex; }
}

/* Keyboard focus on the timeline marks: a ring in the text colour, which shows on the gold diamonds too. */
.tl-svg [tabindex]:focus-visible { stroke: var(--fg); stroke-width: 3; paint-order: stroke; }
.tl-svg .tl-event:focus-visible { stroke: var(--fg); stroke-width: 2.5; }
details.tl-fold { margin: 10px 0; }
details.tl-fold > summary { cursor: pointer; font-weight: 600; }
details.glossary { margin: 10px 0; font-size: .85rem; }
details.glossary > summary { cursor: pointer; color: var(--muted); }
details.glossary dt { font-weight: 600; margin-top: 6px; }
details.glossary dd { margin: 0 0 0 0; color: var(--muted); }
.card > h3:first-child { margin-top: 0; }
.watch-control { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
h1[tabindex="-1"]:focus { outline: none; }

/* ---------------------------------------------------------------- simple view (lab-simple-view.md) */
/* Info button and its popover (5.2): a click disclosure placed by classes only. */
.tip-wrap { position: relative; display: inline-block; vertical-align: baseline; }
button.info {
  width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--info); background: var(--card2); color: var(--info);
  font: italic 700 .78rem/1 Georgia, "Times New Roman", serif; display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; text-transform: none; letter-spacing: normal;
}
button.info:hover { border-color: var(--gold); color: var(--gold); }
button.info:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button.info[aria-expanded="true"] { background: var(--info); color: var(--card); }
@media (pointer: coarse) { button.info { width: 32px; height: 32px; font-size: .9rem; } }
.tip {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: max-content; max-width: min(300px, calc(100vw - 32px));
  display: block; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--info); background: var(--card2); color: var(--fg);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--bg) 70%, transparent);
  font-size: .86rem; font-weight: 400; font-style: normal; line-height: 1.45; text-align: left; white-space: normal;
  text-transform: none; letter-spacing: normal;
}
.tip.flip { left: auto; right: 0; }
.tip.up { top: auto; bottom: calc(100% + 6px); }
.tip strong { color: var(--fg); font-weight: 700; }
/* Inside a scrolling table an absolute popover would be cut off: there it is the bottom sheet at every width. */
.table-wrap .tip { position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; width: auto; max-width: 560px; margin: 0 auto; z-index: 20; }
.table-wrap .tip.sheet-top { top: 16px; bottom: auto; }
@media (max-width: 599px) {
  .tip, .tip.flip { position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; width: auto; max-width: none; z-index: 20; }
  /* The sheet moves to the top when its button is in the lower half of the screen, so it never covers it. */
  .tip.sheet-top, .tip.flip.sheet-top { top: 16px; bottom: auto; }
}
.tip-close {
  display: block; margin: 8px 0 0 auto; padding: 4px 12px; min-height: 32px; font-size: .82rem; font-style: normal;
  border-radius: 8px; border: 1px solid var(--info); background: var(--card); color: var(--fg);
}
/* A chip and its info button stay together on one line. */
.chip-info { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.terms { margin: 0 0 8px; }
.terms .term { white-space: nowrap; }

/* Cards A to D: side by side from 900px, stacked below. */
.answers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
@media (min-width: 900px) { .answers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.answers > .card { margin: 12px 0 0; }
.answers + .disclaimer { margin: 10px 0 4px; }
.answer h2 { margin-top: 0; }
.answer-main > .card, .answer-second > .card { margin: 12px 0 0; }
.answer-main + .card, .answer-second + .card { margin-top: 12px; }
.answer-main .disclaimer { margin: 8px 0 4px; }
.answer-text { font-size: 1.3rem; font-weight: 700; margin: 4px 0; }
.answer-data .answer-text { font-size: 1.5rem; }
.answer-data { border-left: 4px solid var(--line); }
.answer-data.lean-up { border-left-color: var(--up); }
.answer-data.lean-down { border-left-color: var(--down); }
.answer-data.lean-up .answer-text { color: var(--up); }
.answer-data.lean-down .answer-text { color: var(--down); }
.period { margin: 0 0 6px; }
/* Tradition never looks like a call, and never louder than the tested answer: muted, dashed, smaller headline,
   never --up or --down. */
.answer-trad { border: 1px dashed color-mix(in srgb, var(--trad) 45%, var(--line)); border-left: 3px dashed color-mix(in srgb, var(--trad) 60%, var(--line)); background: color-mix(in srgb, var(--card) 70%, var(--bg)); }
.answer-trad h2.trad-h { font-size: 1rem; color: var(--muted); }
.answer-trad .chip.trad-tag { color: var(--trad); border-color: var(--trad); border-style: dashed; font-weight: 600; }
.trad-lean { font-size: .98rem; font-weight: 600; color: var(--muted); margin: 6px 0 2px; }
.trad-link { color: var(--fg); margin: 2px 0 6px; }
details.trad-fold { margin: 8px 0 0; }
details.trad-fold > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--info); padding: 4px 0; min-height: 32px; }
.trad-list { list-style: none; padding: 0; margin: 8px 0; }
.trad-item { border-top: 1px dashed var(--line); padding: 8px 0; }
.trad-item p { margin: 2px 0; }
.trad-chips { margin: 4px 0 0; gap: 4px 6px; }
.answer-trad .chip.badge-validated { color: var(--trad); border-color: var(--trad); border-style: solid; }
.answer-trad .chip.trad-dir, .answer-trad .chip.trad-until { color: var(--trad); border-color: color-mix(in srgb, var(--trad) 55%, transparent); }
/* A pattern of another time frame: its direction chip is greyed and names its own time frame. */
.answer-trad .chip.trad-dir.off { color: var(--muted); border-color: var(--line); border-style: dotted; }
.trad-notes-h { font-size: .95rem; margin: 12px 0 2px; }
.stock-head h2.stock-symbol { margin: 0; }
.head-chips { margin: 0; gap: 4px 6px; }
.head-line { margin: 6px 0 2px; }
.date-line { margin: 2px 0; }
.chip.date-live { color: var(--up); border-color: var(--up); }
.time-frame { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 12px 0 0; }
.time-frame .tf-h { font-size: .95rem; margin: 0; }
.time-frame .tabs { margin: 0; }
/* Card C's range bar. */
.sr-svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 6px 0; overflow: visible; }
.sr-band90 { fill: var(--band90); }
.sr-band50 { fill: var(--band50); }
.sr-zero { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 3 2; }
.sr-label { fill: var(--muted); font-size: 12px; }
.sr-label.strong { fill: var(--fg); font-weight: 600; }
.sr-label.inner { fill: var(--fg); }
.sr-key { margin: 0 0 4px; }
.sky-list { padding-left: 18px; margin: 6px 0; }
.sky-list li { margin: 6px 0; }
.details-head { margin: 28px 0 4px; }
.details-head h2 { margin: 0; }
details.fold .fold-part { margin-top: 10px; }
/* The overview's simple cards and the words page. */
.how-steps { padding-left: 20px; }
.how-steps li { margin: 6px 0; }
dl.words dt { font-weight: 700; margin-top: 12px; }
dl.words dd { margin: 2px 0 0; color: var(--muted); }
/* A card whose heading sits in a leading row (overview cards, the run card): no gap above the heading. */
.card > .row:first-child { margin-top: 0; }
.card > .row:first-child h2:first-child, .card > .row:first-child > div:first-child > h2:first-child { margin-top: 0; }