/* Optistream Observatoire · Volt Grid v2 components. Reads the theme tokens (tokens.css / volt-v2.css).
   Heatmap ramp: one hue (volt), 5 steps validated for the dark tile surface (#22261e), ordinal checks pass. */
.os-obs{--obs-l1:#515f29;--obs-l2:#718432;--obs-l3:#94ab39;--obs-l4:#b9d245;--obs-l5:#e1fb58;--obs-empty:oklch(31% .017 130);--obs-grid:oklch(33% .012 130);margin:0 0 var(--space-xl,2rem);color:var(--color-ink)}
.os-obs *{box-sizing:border-box}
.os-obs .vg-tile{padding:24px}
.os-obs h2,.os-obs h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:0;color:var(--color-ink);margin:10px 0 12px}
.os-obs h2{font-size:clamp(28px,3.2vw,40px);line-height:1}
.os-obs h3{font-size:22px;line-height:1.05}
.os-obs p{color:var(--color-ink-2);font-size:15px;line-height:1.55;margin:0 0 12px;max-width:62ch}
.os-obs a{color:var(--color-ink)}
.os-obs a:hover{color:var(--color-accent)}
.os-obs .vg-button{display:inline-flex;align-items:center;background:var(--color-accent);color:var(--color-accent-ink)!important;text-decoration:none}
.os-obs .os-obs-note{font-size:14px}
.os-obs .os-obs-note b{color:var(--color-ink)}
.os-obs .os-obs-empty{font-size:14px;color:var(--color-ink-2);padding:12px 0}
.os-obs .os-obs-more{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--color-accent);text-decoration:none}
.os-obs .os-obs-more .vg-icon{width:14px;height:14px;transform:rotate(-90deg)}
.os-obs .os-obs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:18px}

/* Live block */
.os-obs-live{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.os-obs-now{display:flex;flex-direction:column;justify-content:space-between;min-height:320px}
.os-obs-now-title{font-size:clamp(30px,3.4vw,44px)!important}
.os-obs-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:8px 0 14px}
.os-obs-kpis.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.os-obs-kpis div{border-top:1px solid var(--color-rule);padding-top:12px;min-width:0}
.os-obs-kpis dt{font:500 11px/1.3 var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--color-ink-2);margin:0 0 8px}
.os-obs-kpis dd{margin:0;font:600 clamp(28px,3.6vw,48px)/1 var(--font-body);color:var(--color-ink);letter-spacing:-.02em}
.os-obs-kpis dd sup{font-size:.45em;vertical-align:top;margin-left:2px}
.os-obs-list{display:flex;flex-direction:column}
.os-obs-rank{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.os-obs-rank li{display:grid;grid-template-columns:28px auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--color-rule);min-height:56px}
.os-obs-rank li:first-child{border-top:0}
.os-obs-rank li:not(:has(.os-obs-art)){grid-template-columns:28px minmax(0,1fr) auto}
.os-obs-rank-n{font:600 11px/1 var(--font-mono);letter-spacing:1px;color:var(--color-rule)}
.os-obs-rank li:first-child .os-obs-rank-n{color:var(--color-accent)}
.os-obs-rank-name{display:flex;flex-direction:column;gap:4px;min-width:0;font-weight:600;font-size:15px;line-height:1.2}
.os-obs-rank-name a,.os-obs-rank-name{overflow-wrap:anywhere}
.os-obs-rank-name a{text-decoration:none}
.os-obs-rank-name small{font:500 12px/1.3 var(--font-body);color:var(--color-ink-2)}
.os-obs-rank b{font:600 16px/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--color-ink);text-align:right}
.os-obs-art{width:30px;height:40px;border-radius:3px;object-fit:cover;background:var(--color-paper-3);flex:none;display:block}
.os-obs-art.is-initials{display:grid;place-items:center;font:700 13px/1 var(--font-display);color:var(--color-ink);background:repeating-linear-gradient(135deg,oklch(94% .185 118 / .10) 0 1px,transparent 1px 7px),var(--color-paper-3)}
.vg-deep .os-obs-rank li{border-color:oklch(24% .01 130)}

/* Sections */
.os-obs-section{margin-top:var(--space-2xl,3rem)}
.os-obs-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 12px}
.os-obs .os-obs-kpi-row .vg-tile{padding:20px 22px}
.os-obs-kpi-row dt{font:500 11px/1.3 var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--color-ink-2);margin:0 0 12px}
.os-obs-kpi-row dd{margin:0;font:600 clamp(26px,3vw,40px)/1 var(--font-body);letter-spacing:-.02em}
.os-obs-kpi-delta{font-size:13px!important;margin:10px 0 0!important}
.os-obs-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.os-obs-figure{margin:0}
.os-obs-figure figcaption h3{margin-top:8px}
.os-obs-chart-wrap{position:relative}
.os-obs-chart{width:100%;height:auto;display:block;overflow:visible}
.os-obs-grid,.os-obs-axis{stroke:var(--obs-grid);stroke-width:1;shape-rendering:crispEdges}
.os-obs-axis{stroke:var(--color-rule)}
.os-obs-tick{font:500 11px var(--font-mono);fill:var(--color-ink-2);font-variant-numeric:tabular-nums}
.os-obs-value{font:600 12px var(--font-body);fill:var(--color-ink)}
.os-obs-mark{fill:var(--obs-l3)}
.os-obs-mark.is-max{fill:var(--obs-l5)}
.os-obs-hit{fill:transparent}
.os-obs-bar{cursor:default;outline:none}
.os-obs-bar:hover .os-obs-mark,.os-obs-bar:focus-visible .os-obs-mark{fill:var(--obs-l5)}
.os-obs-bar:focus-visible .os-obs-hit{fill:oklch(94% .185 118 / .08)}
.os-obs-tip{position:absolute;z-index:3;pointer-events:none;margin:0!important;padding:8px 10px;background:var(--color-paper-deep,#060804);border:1px solid var(--color-rule);border-radius:6px;font:600 13px/1.3 var(--font-body)!important;color:var(--color-ink)!important;white-space:nowrap;transform:translate(-50%,calc(-100% - 10px))}
.os-obs-table{margin-top:12px}
.os-obs-table summary{cursor:pointer;font:600 12px/1 var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--color-ink-2);padding:8px 0}
.os-obs-table summary:hover{color:var(--color-accent)}
.os-obs table{width:100%;border-collapse:collapse;font-size:14px}
.os-obs th,.os-obs td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--color-rule);white-space:nowrap}
.os-obs thead th{font:500 11px/1.2 var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--color-ink-2)}
.os-obs td{font-variant-numeric:tabular-nums;color:var(--color-ink)}
.os-obs-ranking th[scope=row]{font-weight:600}
.os-obs-game{display:flex;align-items:center;gap:12px}
.os-obs-game a{text-decoration:none}
.os-obs-table-link{font:600 11px/1 var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--color-accent)!important;text-decoration:none}
.os-obs-board{padding:8px 12px!important}
.os-obs-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.os-obs-method ul{margin:12px 0 0;padding-left:18px;color:var(--color-ink-2);line-height:1.6;max-width:80ch}
.os-obs-method li{margin-bottom:8px}
.os-obs-entity{margin:var(--space-xl,2rem) 0}

/* Best-time tool */
.os-bt-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:end;margin-bottom:12px}
.os-bt-head h2{font-size:clamp(32px,4vw,52px)!important}
.os-bt-pick label{display:block;font:600 11px/1 var(--font-mono);letter-spacing:2px;text-transform:uppercase;color:var(--color-ink-2);margin-bottom:10px}
.os-bt-input{display:flex;align-items:center;gap:10px;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:6px;padding:0 14px;min-height:52px}
.os-bt-input:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 3px oklch(94% .185 118 / .18)}
.os-bt-input .vg-icon{width:18px;height:18px;color:var(--color-ink-2);flex:none}
.os-bt-input input{flex:1;min-width:0;background:none!important;border:0!important;outline:0;box-shadow:none!important;color:var(--color-ink);font:500 16px/1.2 var(--font-body);padding:14px 0}
.os-bt-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* Buttons styled as chips: the parent theme gives every button a filled accent background. */
.os-obs button.vg-chip{background:none!important;color:var(--color-ink-2)!important;border:1px solid var(--color-rule)!important;border-radius:999px!important;height:32px;min-height:0;padding:0 12px!important;font:500 12px/1 var(--font-mono)!important;letter-spacing:0;text-transform:none;cursor:pointer;box-shadow:none!important}
.os-obs button.vg-chip:hover{color:var(--color-ink)!important;border-color:var(--color-ink-2)!important}
.os-obs button.vg-chip.is-active{background:var(--color-ink)!important;color:var(--color-paper)!important;border-color:var(--color-ink)!important}
.os-obs button.vg-chip:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.os-bt-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start}
.os-bt-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px}
.os-bt-name{margin:8px 0 0!important}
.os-bt-metrics{display:flex;flex-wrap:wrap;gap:6px}
.os-bt-grid-wrap{transition:opacity .2s}
.os-bt-grid-wrap.is-loading{opacity:.45}
.os-bt-grid{display:grid;grid-template-columns:40px repeat(24,minmax(0,1fr));grid-template-rows:20px repeat(7,minmax(26px,1fr));gap:2px}
.os-bt-corner{grid-column:1;grid-row:1}
.os-bt-hour{grid-row:1;grid-column:calc(var(--h) + 2);font:500 10px/20px var(--font-mono);color:var(--color-ink-2);white-space:nowrap}
.os-bt-day{grid-column:1;grid-row:calc(var(--d) + 2);font:600 11px/1 var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--color-ink-2);align-self:center}
.os-bt-cell{grid-column:calc(var(--h) + 2);grid-row:calc(var(--d) + 2);border-radius:3px;background:var(--obs-empty);min-height:26px;outline:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.os-bt-cell[data-l="0"]{background:repeating-linear-gradient(135deg,oklch(39% .012 130 / .5) 0 1px,transparent 1px 5px),var(--color-paper)}
.os-bt-cell[data-l="1"],.os-bt-legend i[data-l="1"]{background:var(--obs-l1)}
.os-bt-cell[data-l="2"],.os-bt-legend i[data-l="2"]{background:var(--obs-l2)}
.os-bt-cell[data-l="3"],.os-bt-legend i[data-l="3"]{background:var(--obs-l3)}
.os-bt-cell[data-l="4"],.os-bt-legend i[data-l="4"]{background:var(--obs-l4)}
.os-bt-cell[data-l="5"],.os-bt-legend i[data-l="5"]{background:var(--obs-l5)}
.os-bt-cell:hover,.os-bt-cell:focus-visible,.os-bt-cell.is-current{box-shadow:0 0 0 2px var(--color-ink);transform:scale(1.08);position:relative;z-index:1}
.os-bt-cell.is-best{box-shadow:inset 0 0 0 2px var(--color-accent-ink)}
.os-bt-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;font:500 11px/1 var(--font-mono);color:var(--color-ink-2)}
.os-bt-legend i{display:inline-block;width:22px;height:12px;border-radius:2px}
.os-bt-legend i.is-empty{margin-left:12px;background:repeating-linear-gradient(135deg,oklch(39% .012 130 / .5) 0 1px,transparent 1px 5px),var(--color-paper);border:1px solid var(--color-rule)}
.os-bt-readout{margin:14px 0 0!important;min-height:3em;font-size:14px!important;color:var(--color-ink)!important}
.os-bt-readout b{color:var(--color-accent)}
.os-bt-slots{list-style:none;margin:14px 0 16px;padding:0}
.os-bt-slots li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid oklch(24% .01 130)}
.os-bt-slots li:first-child{border-top:0}
.os-bt-slots li.is-empty{display:block;color:var(--color-ink-2);font-size:14px;line-height:1.5}
.os-bt-slots b{display:block;font:700 20px/1.05 var(--font-display);text-transform:uppercase;color:var(--color-ink)}
.os-bt-slots small{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--color-ink-2)}
.os-bt-hint{font-size:13px!important}

@media (max-width:1100px){
 .os-obs-live{grid-template-columns:repeat(2,minmax(0,1fr))}
 .os-obs-now{grid-column:1/-1;min-height:0}
 .os-bt-body{grid-template-columns:1fr}
}
@media (max-width:760px){
 .os-obs .vg-tile{padding:18px}
 .os-obs-live,.os-obs-charts,.os-obs-split,.os-bt-head{grid-template-columns:1fr}
 .os-obs-kpi-row,.os-obs-kpis.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* Transposed heatmap on phones: days become columns, hours become rows. */
 .os-bt-grid{grid-template-columns:34px repeat(7,minmax(0,1fr));grid-template-rows:22px repeat(24,24px)}
 .os-bt-hour{grid-row:calc(var(--h) + 2);grid-column:1;line-height:24px}
 .os-bt-hour .screen-reader-text{position:static!important;clip:auto!important;width:auto!important;height:auto!important;overflow:visible!important;margin:0!important;clip-path:none!important}
 .os-bt-day{grid-row:1;grid-column:calc(var(--d) + 2);text-align:center}
 .os-bt-cell{grid-row:calc(var(--h) + 2);grid-column:calc(var(--d) + 2);min-height:24px}
}
@media (prefers-reduced-motion:reduce){.os-bt-cell{transition:none}.os-bt-grid-wrap{transition:none}}
@media (forced-colors:active){.os-bt-cell{forced-color-adjust:none;border:1px solid CanvasText}}

/* ── Air (2026-09-25): one focal tile per block, the rest reads on the page with hairlines ── */
.os-obs{--obs-hair:oklch(29% .012 130)}
.os-obs-live{gap:40px;align-items:start}
.os-obs.os-obs-live .os-obs-list.vg-tile,.os-obs.os-obs-live .os-obs-list.vg-deep{background:none!important;padding:0!important;clip-path:none!important;border-radius:0}
.os-obs.os-obs-live .os-obs-list>.vg-eyebrow{padding-bottom:14px;border-bottom:2px solid var(--color-accent)}
.os-obs-rank li{border-top-color:var(--obs-hair)!important}
.os-obs-kpi-row{gap:0 36px}
.os-obs-kpi-row .vg-tile{background:none!important;padding:18px 0 0!important;border-top:1px solid var(--obs-hair);border-radius:0;clip-path:none!important}
.os-obs-charts{gap:48px}
.os-obs .os-obs-figure.vg-tile,.os-obs .os-obs-board.vg-tile,.os-obs .os-obs-streamers.vg-tile,.os-obs.os-obs-method .vg-tile{background:none!important;padding:20px 0 0!important;border-top:1px solid var(--obs-hair);border-radius:0;clip-path:none!important}
.os-obs .os-obs-board.vg-tile{padding-top:0!important}
.os-obs-split{gap:48px;align-items:start}
.os-obs.os-obs-method .vg-tile{max-width:860px}
.os-obs .os-bt-best.vg-tile{background:none!important;padding:18px 0 0!important;border-top:2px solid var(--color-accent);border-radius:0;clip-path:none!important}
.os-bt-body{gap:40px}

/* 24-hour spark line: 2px line, 10 % wash, end dot with a surface ring, cursor + value on hover */
.os-spark-wrap{margin:4px 0 16px}
.os-spark{display:block;width:100%;height:auto;overflow:visible;outline:none;cursor:crosshair}
.os-spark-area{fill:oklch(94% .185 118 / .10)}
.os-spark-line{fill:none;stroke:var(--color-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.os-spark-dot{fill:var(--color-accent);stroke:var(--color-paper-2);stroke-width:2}
.os-spark-focus{fill:var(--color-ink);stroke:var(--color-paper-2);stroke-width:2;opacity:0}
.os-spark-cursor{stroke:var(--color-ink-2);stroke-width:1;opacity:0}
.os-spark.is-reading :is(.os-spark-focus,.os-spark-cursor){opacity:1}
.os-spark:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
.os-spark-wrap figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font:500 11px/1.3 var(--font-mono);letter-spacing:.6px;color:var(--color-ink-2)}
.os-spark-read{color:var(--color-ink)}
@media (prefers-reduced-motion:no-preference){.os-spark-line{animation:os-spark-draw 1.6s cubic-bezier(.16,1,.3,1) both}.os-spark-dot{animation:os-spark-pulse 2.4s ease-in-out 3}}
@keyframes os-spark-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes os-spark-pulse{0%,100%{r:4.5}50%{r:6}}
@media (max-width:760px){.os-obs-live{gap:28px}.os-obs-kpi-row{gap:0 20px}.os-obs-charts,.os-obs-split,.os-bt-body{gap:32px}}
.os-obs .os-bt-help{margin:0 0 16px!important;max-width:72ch;font-size:15px!important;line-height:1.55;color:var(--color-ink)!important}