/* KZG Option House v2.09+
   Canonical visual rhythm and responsive continuity overrides.
   This file intentionally contains presentation only; application behavior remains in app.js. */

:root {
  --kzg-content-max: 1680px;
  --kzg-section-gap: 18px;
  --kzg-cluster-gap: 10px;
  --kzg-control-ring: color-mix(in srgb, var(--gold) 72%, white 28%);
  --kzg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --kzg-font-display: Georgia, "Times New Roman", "Songti SC", serif;
  --kzg-font-ui: Inter, "SF Pro Text", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  grid-template-columns: minmax(300px, 1fr) auto minmax(300px, 1fr);
  padding-right: max(24px, calc((100vw - var(--kzg-content-max)) / 2));
  padding-left: max(24px, calc((100vw - var(--kzg-content-max)) / 2));
}

main {
  max-width: var(--kzg-content-max);
  padding-right: 24px;
  padding-bottom: 56px;
  padding-left: 24px;
}

.brand h1,
.dateplate b,
.session-copy > strong,
.sector-spine-copy b,
.realtime-heading h2,
.router-copy b,
.history-intro-copy h2,
.history-story-lede b,
.rotation-map-lead strong,
.rotation-conviction-lead b,
.rotation-acceleration-lead b {
  letter-spacing: 0;
  text-wrap: balance;
}

.timeboard,
.metric-rail,
.session-tape,
.sector-spine,
.workbench,
.premium-preview,
.history-sector-intro,
.analysis-grid {
  scroll-margin-top: 88px;
}

.timeboard {
  margin-top: var(--kzg-section-gap);
}

.metric-rail,
.session-tape {
  margin-top: 12px;
}

.sector-spine {
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 2.7fr);
  align-items: stretch;
  gap: var(--kzg-cluster-gap);
  margin: 12px 0 0;
}

.sector-spine-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.sector-spine-copy b {
  overflow: visible;
  font-size: clamp(24px, 1.8vw, 29px);
  line-height: 1.04;
  text-overflow: clip;
  white-space: nowrap;
}

.sector-spine-buttons {
  align-items: stretch;
}

.sector-spine-buttons button {
  min-height: 88px;
  padding: 13px 16px;
}

.workbench {
  grid-template-columns: minmax(0, 1fr) clamp(326px, 22vw, 350px);
  gap: 16px;
  align-items: start;
  margin-top: var(--kzg-section-gap);
  padding-top: 0;
}

.report-stage,
.side-rail {
  padding: 16px;
}

.side-rail {
  top: 86px;
  height: fit-content;
  max-height: min(980px, calc(100vh - 104px));
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: var(--line-strong) transparent;
}

.side-rail .section-head {
  margin-bottom: 12px;
}

.side-rail .side-intel b,
.side-rail .side-intel small {
  overflow: visible;
  line-height: 1.22;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.section-head {
  gap: 18px;
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.timeboard-copy h2,
.section-head h2 {
  font-size: 17px;
  line-height: 1.18;
}

.timeboard-copy p,
.section-head p {
  font-size: 12px;
  line-height: 1.45;
}

.metric > span,
.session-chip-grid i,
.session-rank-strip i,
.session-lane-hedge-cells i,
.realtime-command-strip i,
.history-intro-stats i {
  line-height: 1.25;
}

.metric strong,
.session-chip-grid b,
.session-rank-strip b,
.session-lane-hedge-cells b,
.realtime-command-strip b,
.history-intro-stats b {
  line-height: 1.06;
}

.premium-preview,
.history-sector-intro {
  margin-top: var(--kzg-section-gap);
}

.premium-preview {
  padding: 12px;
}

.realtime-topline {
  padding: 19px;
}

.realtime-heading h2 {
  font-size: clamp(38px, 4.1vw, 58px);
  line-height: 0.98;
}

.realtime-layout {
  grid-template-columns:
    minmax(220px, 0.72fr)
    minmax(280px, 0.88fr)
    minmax(520px, 1.55fr)
    minmax(230px, 0.72fr);
  gap: var(--kzg-cluster-gap);
}

.realtime-terminal {
  min-width: 0;
}

.terminal-table-head,
.terminal-table-body button {
  grid-template-columns: 50px 58px minmax(126px, 1fr) 58px 74px 66px;
  gap: 7px;
}

.terminal-table-body button {
  transition: border-color 150ms var(--kzg-ease), background-color 150ms var(--kzg-ease), transform 150ms var(--kzg-ease);
}

.history-sector-intro {
  gap: 12px;
  padding: 12px;
}

.history-intro-copy {
  min-height: 160px;
  padding: 20px;
}

.history-intro-copy h2 {
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 0.98;
}

.analysis-grid {
  gap: 16px;
  margin-top: 16px;
}

.panel {
  padding: 18px;
}

.rotation-row {
  grid-template-columns: 50px minmax(64px, 1fr) 72px 96px;
  gap: 6px;
  min-height: 44px;
  padding: 7px 8px;
}

.rotation-row em {
  font-size: 12px;
}

.rotation-row small {
  font-size: 10px;
}

.rotation-map {
  grid-template-columns: minmax(150px, 0.68fr) minmax(300px, 1.82fr) minmax(126px, 0.72fr);
  gap: var(--kzg-cluster-gap);
}

.rotation-map-stats {
  gap: 7px;
}

.rotation-map-stats span {
  padding: 9px;
}

.rotation-conviction-strip,
.rotation-acceleration-strip {
  grid-template-columns: minmax(190px, 0.58fr) minmax(0, 1.42fr);
}

.rotation-conviction-cells span,
.rotation-acceleration-cells span {
  min-height: 72px;
}

.rotation-conviction-cells b,
.rotation-acceleration-cells b {
  font-size: 13px;
  line-height: 1.16;
}

.rotation-lanes {
  gap: var(--kzg-cluster-gap);
}

.range-tabs,
.stock-sort-tabs {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 35%, transparent);
}

:where(button, input):focus-visible {
  outline: 2px solid var(--kzg-control-ring);
  outline-offset: 2px;
}

:where(
  .toolbar .button,
  .nav-day,
  .sector-spine-buttons button,
  .history-intro-path button,
  .history-story-card,
  .filter-console-grid button,
  .terminal-table-body button,
  .realtime-bias-list button,
  .rotation-row,
  .rotation-map-grid button,
  .rotation-focus-jump,
  .momentum-row,
  .range-tabs button,
  .stock-sort-tabs button
) {
  transition:
    color 150ms var(--kzg-ease),
    border-color 150ms var(--kzg-ease),
    background-color 150ms var(--kzg-ease),
    box-shadow 150ms var(--kzg-ease),
    transform 150ms var(--kzg-ease);
}

:where(
  .toolbar .button,
  .nav-day,
  .sector-spine-buttons button,
  .history-intro-path button,
  .history-story-card,
  .filter-console-grid button,
  .terminal-table-body button,
  .realtime-bias-list button,
  .rotation-row,
  .rotation-focus-jump,
  .range-tabs button,
  .stock-sort-tabs button
):active {
  transform: translateY(0) scale(0.985);
}

@media (hover: hover) {
  .panel:hover,
  .report-stage:hover {
    border-color: color-mix(in srgb, var(--line-strong) 74%, var(--line));
    box-shadow: var(--shadow-raised);
  }

  .rotation-row:hover,
  .realtime-bias-list button:hover,
  .terminal-table-body button:hover {
    transform: translateY(-1px);
  }
}

/* v2.40 - spacing convergence */
:root {
  --kzg-section-gap: 20px;
  --kzg-cluster-gap: 12px;
  --kzg-panel-pad: 18px;
}

.report-stage,
.side-rail,
.panel {
  padding: var(--kzg-panel-pad);
}

.metric-rail,
.session-tape {
  gap: 10px;
}

.realtime-layout {
  gap: var(--kzg-cluster-gap);
}

.analysis-grid {
  gap: 18px;
  margin-top: var(--kzg-section-gap);
}

.section-head,
.side-rail .section-head {
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.momentum-panel .section-head {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  :root {
    --kzg-section-gap: 14px;
    --kzg-cluster-gap: 8px;
    --kzg-panel-pad: 12px;
  }

  .metric-rail,
  .session-tape {
    gap: 8px;
  }

  .analysis-grid {
    gap: 10px;
  }

  .section-head,
  .side-rail .section-head {
    gap: 9px;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
}

/* v2.38 - tooltip positioning and keyboard context */
.market-tooltip {
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.market-tooltip[data-anchor="focus"] {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line-strong));
  box-shadow:
    0 18px 48px color-mix(in srgb, var(--ink) 18%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (max-width: 760px) {
  .market-tooltip {
    width: min(330px, calc(100vw - 24px));
    max-height: calc(100svh - 24px);
  }
}

/* v2.39 - PNG report legibility */
.kzg-sheet .sheet-head span,
.kzg-sheet .sheet-title span,
.kzg-sheet .sheet-foot {
  color: #616970;
}

.kzg-sheet .sheet-head strong {
  border-color: #b8bec4;
  color: #535c64;
}

.kzg-sheet .sheet-bar em,
.kzg-sheet .sheet-heat .empty-cell {
  color: #626a71;
}

.kzg-sheet .sheet-legend {
  color: #565f67;
}

/* v2.33 - dark-mode surface hierarchy */
body[data-theme="dark"] {
  --paper: #0c1014;
  --surface: #151a1f;
  --surface-soft: #1b2228;
  --ink: #f4f5f3;
  --ink-soft: #d6dadd;
  --muted: #909aa3;
  --line: #2a343d;
  --line-strong: #3b4852;
  --gold-soft: #3b321f;
  background: #0c1014;
}

body[data-theme="dark"] :is(
  .timeboard,
  .metric-rail,
  .session-tape,
  .sector-spine,
  .premium-preview,
  .history-sector-intro,
  .panel,
  .report-stage,
  .side-rail,
  .realtime-side-lists
) {
  background: #151a1f;
  border-color: #2a343d;
}

body[data-theme="dark"] :is(
  .metric,
  .session-copy,
  .session-chip-grid > *,
  .session-rank-strip > *,
  .session-lane-hedge-cells > *,
  .sector-spine-copy,
  .sector-spine-buttons button,
  .history-intro-copy,
  .history-intro-path button,
  .history-story-card,
  .filter-console-grid button,
  .realtime-router,
  .realtime-terminal,
  .side-intel,
  .trend-summary,
  .trend-extremes > *,
  .flow-stack > *
) {
  background: #10151a;
  border-color: #27313a;
}

body[data-theme="dark"] :is(
  .trend-lens span,
  .trend-radar button,
  .signal-metrics > *,
  .bucket-metrics > *,
  .rotation-map-stats > *,
  .focus-metrics > *,
  .realtime-bias-list button,
  .side-leader-list button,
  .side-extreme-list button,
  .heat-rhythm-card,
  .heat-baton-row
) {
  background: #1b2228;
  border-color: #33404a;
}

body[data-theme="dark"] :is(
  .range-tabs button.active,
  .stock-sort-tabs button.active,
  .history-intro-path button.active,
  .history-story-card.active,
  .symbol-active
) {
  border-color: color-mix(in srgb, var(--gold) 68%, #3b4852);
  background: color-mix(in srgb, var(--gold) 12%, #1b2228);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent);
}

/* v2.34 - dark-mode chart contrast */
body[data-theme="dark"] .trend-cockpit-right > svg {
  background: #10151a;
  border-color: #33404a;
}

body[data-theme="dark"] .trend-cockpit-right > svg > polygon {
  opacity: 0.72;
}

body[data-theme="dark"] .trend-cockpit-right > svg > line {
  stroke: #7f9ab3;
  opacity: 0.46;
}

body[data-theme="dark"] .trend-cockpit-right > svg > polyline:nth-of-type(1) {
  stroke: #74a9d8;
}

body[data-theme="dark"] .trend-cockpit-right > svg > polyline:nth-of-type(2) {
  stroke: #e2b85d;
  opacity: 0.95;
}

body[data-theme="dark"] .trend-cockpit-right > svg > polyline:nth-of-type(3) {
  stroke: #63c696;
  opacity: 0.9;
}

body[data-theme="dark"] .trend-cockpit-right > svg > text {
  fill: #b9c3ca;
}

body[data-theme="dark"] .trend-cockpit-right > svg .trend-marker text {
  fill: #f4f5f3;
}

body[data-theme="dark"] :is(
  .regime-tape button,
  .trend-pulse-cells button,
  .signal-pulse-cells button,
  .heat-lane-track i
) {
  filter: saturate(1.16) brightness(1.08);
}

/* v2.35 - contrast and accessibility */
body[data-theme="dark"] #stockTable th,
body[data-theme="dark"] .side-bucket-strip i {
  color: #b9c3ca;
}

body[data-theme="dark"] #stockTable th {
  background: #1b2228;
}

body[data-theme="dark"] :is(
  .range-tabs button.active,
  .stock-sort-tabs button.active,
  .history-intro-path button.active,
  .history-story-card.active,
  .symbol-active
) {
  color: #f4f5f3;
}

body[data-theme="dark"] :where(input, button)::placeholder {
  color: #aeb8bf;
  opacity: 1;
}

/* v2.36 - keyboard focus and navigation */
:where(button, input, select, a[href], [tabindex]):focus-visible {
  outline: 2px solid var(--kzg-control-ring);
  outline-offset: 2px;
}

#stockTable tbody tr[tabindex] {
  cursor: pointer;
}

#stockTable tbody tr[tabindex]:focus-visible {
  outline: 0;
}

#stockTable tbody tr[tabindex]:focus-visible td {
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
  box-shadow:
    inset 0 2px 0 var(--kzg-control-ring),
    inset 0 -2px 0 var(--kzg-control-ring);
}

#stockTable tbody tr[tabindex]:focus-visible td:first-child {
  box-shadow:
    inset 2px 0 0 var(--kzg-control-ring),
    inset 0 2px 0 var(--kzg-control-ring),
    inset 0 -2px 0 var(--kzg-control-ring);
}

#stockTable tbody tr[tabindex]:focus-visible td:last-child {
  box-shadow:
    inset -2px 0 0 var(--kzg-control-ring),
    inset 0 2px 0 var(--kzg-control-ring),
    inset 0 -2px 0 var(--kzg-control-ring);
}

/* v2.37 - loading and empty states */
.kzg-state {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  min-height: 180px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  background: var(--surface-soft);
  text-align: center;
}

.kzg-state b {
  font-family: var(--kzg-font-display);
  font-size: 20px;
  line-height: 1.1;
}

.kzg-state small {
  max-width: 38ch;
  color: var(--muted);
  line-height: 1.45;
}

.kzg-state button {
  min-height: 40px;
  margin-top: 5px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: 700 12px/1 var(--kzg-font-ui);
  cursor: pointer;
}

#stockTable td.empty {
  height: 112px;
  padding: 24px;
  text-align: center;
}

#stockTable td.empty strong,
#stockTable td.empty small {
  display: block;
}

#stockTable td.empty strong {
  color: var(--ink);
  font-size: 14px;
}

#stockTable td.empty small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

body[data-theme="dark"] .kzg-state {
  background: #10151a;
  border-color: #33404a;
}

@media (min-width: 1181px) and (max-width: 1380px) {
  .realtime-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .realtime-terminal,
  .realtime-side-lists {
    min-height: 520px;
  }
}

/* v2.20 - signal router density
   Flatten repeated gate cards into one continuous control plane. */
@media (min-width: 761px) {
  .realtime-router {
    grid-template-columns: minmax(200px, 0.45fr) minmax(300px, 0.76fr) minmax(420px, 1.25fr);
    gap: 8px;
    padding: 10px;
  }

  .router-gates {
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .router-gates span {
    min-height: 74px;
    padding: 8px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }

  .router-gates span:last-child {
    border-right: 0;
  }

  .router-gates .hot {
    background: color-mix(in srgb, #c45335 5%, var(--surface));
  }

  .router-gates .cool {
    background: color-mix(in srgb, #2f6190 5%, var(--surface));
  }

  .router-tape {
    grid-auto-rows: 30px;
  }

  .router-footer {
    padding-top: 0;
  }
}

/* v2.21 - cross-day chart framing
   Align range controls, current values, and the chart as one analytical frame. */
.trend-panel .section-head {
  align-items: center;
}

.trend-panel .range-tabs {
  min-height: 36px;
}

.trend-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-height: 78px;
  border-top: 2px solid #2f6190;
  border-radius: 5px 5px 0 0;
}

.trend-summary strong {
  font-size: 30px;
  font-variant-numeric: tabular-nums lining-nums;
}

.trend-kpis {
  align-content: end;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

.trend-cockpit-right > svg {
  min-height: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
}

@media (max-width: 760px) {
  .trend-summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .trend-kpis {
    text-align: left;
  }
}

/* v2.22 - market-structure intelligence hierarchy */
@media (min-width: 761px) {
  .signal-board {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
  }

  .pulse-gauge {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    align-content: center;
    min-height: 190px;
    padding: 14px;
  }

  .pulse-gauge::before {
    inset: 24px auto auto 14px;
    width: 136px;
    height: 96px;
  }

  .pulse-gauge::after {
    left: 82px;
    top: 56px;
    width: 86px;
    height: 86px;
  }

  .pulse-gauge > div {
    width: 136px;
    padding-top: 54px;
  }

  .pulse-gauge strong {
    font-size: 46px;
  }

  .pulse-gauge p {
    grid-column: 2;
    margin: 0;
    line-height: 1.5;
  }

  .signal-strip {
    min-height: 82px;
  }

  .signal-strip strong {
    font-size: 22px;
  }
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  }

  .workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-rail {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .realtime-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .sector-spine {
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 2.22fr);
  }

  .sector-spine-copy b {
    font-size: 23px;
  }

  .analysis-grid {
    gap: 12px;
  }
}

@media (max-width: 760px) {
  :root {
    --kzg-section-gap: 12px;
    --kzg-cluster-gap: 8px;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 9px 11px;
  }

  .brand {
    width: 100%;
  }

  .brand h1 {
    font-size: 22px;
    white-space: nowrap;
  }

  .toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 5px;
  }

  .toolbar .button {
    min-width: 0;
    min-height: 34px;
    padding: 0 5px;
  }

  main {
    padding-right: 9px;
    padding-bottom: 38px;
    padding-left: 9px;
  }

  .sector-spine {
    display: block;
  }

  .sector-spine-copy b {
    font-size: 25px;
    white-space: normal;
  }

  .sector-spine-buttons button {
    min-height: 72px;
    padding: 10px 12px;
  }

  .workbench {
    margin-top: 12px;
  }

  .report-stage,
  .side-rail,
  .panel {
    padding: 12px;
  }

  .section-head {
    gap: 10px;
    margin-bottom: 11px;
    padding-bottom: 10px;
  }

  .timeboard-copy h2,
  .section-head h2 {
    font-size: 15px;
  }

  .realtime-topline {
    padding: 14px;
  }

  .realtime-heading h2 {
    font-size: clamp(34px, 11vw, 44px);
  }

  .realtime-brief-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-items: start;
  }

  .realtime-brief-main span,
  .realtime-brief-main strong,
  .realtime-brief-main p {
    grid-column: 1;
  }

  .realtime-brief-main strong {
    font-size: 42px;
    line-height: 0.96;
  }

  .realtime-brief-main p {
    margin-top: 2px;
  }

  .history-intro-copy {
    min-height: 138px;
    padding: 16px;
  }

  .history-intro-copy h2 {
    font-size: 38px;
  }

  .rotation-map {
    grid-template-columns: minmax(0, 1fr);
  }

  .rotation-map-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .rotation-conviction-strip,
  .rotation-acceleration-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .rotation-conviction-cells,
  .rotation-acceleration-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rotation-row {
    grid-template-columns: 44px minmax(58px, 1fr) 62px 82px;
    gap: 5px;
    padding-right: 6px;
    padding-left: 6px;
  }
}

/* v2.13 - timeline precision and compactness
   Keep the full date history while making the selected session unmistakable. */
.timeboard-copy p,
.timeline-legend,
.month-ticks {
  font-variant-numeric: tabular-nums lining-nums;
}

.timeline-legend span:first-child {
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 82%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--ink-soft);
}

#selectedDateLabel {
  color: var(--ink);
  font-weight: 820;
}

.month-ticks {
  color: var(--muted);
  font-weight: 720;
}

.nav-day {
  width: 40px;
  height: 40px;
  font-size: 28px;
}

@media (max-width: 760px) {
  .timeline-legend span:first-child {
    min-height: 24px;
    padding: 3px 7px;
  }
}

@media (max-width: 420px) {
  .rotation-map-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rotation-row {
    grid-template-columns: 42px minmax(48px, 1fr) 58px 72px;
    gap: 4px;
  }

  .rotation-row small {
    font-size: 9px;
  }
}

/* v2.26 - mobile summary composition */
@media (max-width: 760px) {
  .metric-rail {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .metric:nth-child(-n + 4) {
    grid-column: span 3;
  }

  .metric:nth-child(n + 5):nth-child(-n + 7) {
    grid-column: span 2;
  }

  .metric:nth-child(8) {
    grid-column: 1 / -1;
    min-height: 62px;
  }

  .metric:nth-child(-n + 4) strong {
    font-size: 22px;
  }

  .metric:nth-child(8) strong {
    font-size: 18px;
  }

  .session-rank-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .session-rank-lead {
    grid-column: 1 / -1;
  }

  .session-rank-strip > span,
  .session-rank-lead {
    flex: none;
    width: auto;
    scroll-snap-align: none;
  }

  .session-lane-hedge-cells {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .session-lane-hedge-cells span {
    flex: none;
    width: auto;
    scroll-snap-align: none;
  }
}

/* v2.27 - mobile flow compactness */
@media (max-width: 760px) {
  .router-copy b {
    font-size: 24px;
  }

  .realtime-transition-rail span {
    flex-basis: 156px;
  }

  .terminal-table-head,
  .terminal-table-body button {
    grid-template-columns: 42px 48px minmax(0, 1fr) 64px;
    grid-template-rows: auto auto;
    gap: 3px 6px;
  }

  .terminal-table-head span:nth-child(1),
  .terminal-table-body button > span:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .terminal-table-head span:nth-child(2),
  .terminal-table-body button > b {
    grid-column: 2;
    grid-row: 1;
  }

  .terminal-table-head span:nth-child(3),
  .terminal-table-body button > span:nth-of-type(2) {
    grid-column: 3;
    grid-row: 1;
  }

  .terminal-table-head span:nth-child(5),
  .terminal-table-body button > strong {
    grid-column: 4;
    grid-row: 1;
  }

  .terminal-table-head span:nth-child(4),
  .terminal-table-body button > span:nth-of-type(3) {
    display: block;
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .terminal-table-head span:nth-child(6),
  .terminal-table-body button > i {
    display: block;
    grid-column: 3 / 5;
    grid-row: 2;
    text-align: right;
  }

  .terminal-table-body button {
    min-height: 42px;
    padding: 5px 6px;
  }

  .terminal-table-body button > span,
  .terminal-table-body button > strong,
  .terminal-table-body button > i {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .realtime-side-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .realtime-bias-list {
    padding: 8px;
  }

  .realtime-bias-list button {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 3px 5px;
    min-height: 54px;
    padding: 7px;
  }

  .realtime-bias-list button strong,
  .realtime-bias-list button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .realtime-bias-list button em,
  .realtime-bias-list button b {
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* v2.09 - desktop command bar consolidation
   Keep every command intact while returning the application header to one scan line. */
@media (min-width: 1000px) {
  .topbar {
    grid-template-columns: minmax(280px, 1fr) minmax(180px, 220px) auto;
    grid-template-rows: minmax(44px, auto);
    align-items: center;
    min-height: 64px;
    gap: 14px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .brand,
  .dateplate,
  .toolbar {
    grid-row: 1;
  }

  .brand {
    grid-column: 1;
  }

  .dateplate {
    grid-column: 2;
    min-width: 0;
  }

  .toolbar {
    display: grid;
    grid-column: 3;
    grid-template-columns: repeat(4, minmax(82px, max-content));
    justify-self: end;
    width: auto;
  }

  .toolbar .button {
    min-width: 82px;
    min-height: 36px;
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* v2.10 - terminal headline normalization
   Section titles retain identity without consuming analytical workspace. */
.realtime-heading h2,
.history-intro-copy h2 {
  font-size: 40px;
  line-height: 1.02;
}

.router-copy b {
  font-size: 32px;
  line-height: 1.04;
}

.history-intro-copy {
  min-height: 132px;
}

@media (max-width: 760px) {
  .realtime-heading h2,
  .history-intro-copy h2 {
    font-size: 32px;
  }

  .router-copy b {
    font-size: 28px;
  }

  .history-intro-copy {
    min-height: 116px;
  }
}

/* v2.11 - first-screen vertical-density pass
   Compress the existing overview stack without removing any metric or readout. */
@media (min-width: 1181px) {
  .timeboard {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .day-bars {
    height: 27px;
  }

  .metric {
    min-height: 84px;
    padding: 12px 16px 11px;
  }

  .metric strong {
    margin-top: 5px;
  }

  .metric small {
    margin-top: 5px;
  }

  .session-chip-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* v2.14 - report canvas and digest balance
   Preserve the export canvas as the primary artifact while giving its live digest enough scan width. */
@media (min-width: 1181px) {
  .workbench {
    grid-template-columns: minmax(0, 1fr) clamp(400px, 28vw, 416px);
    gap: 14px;
  }

  .report-stage {
    border-top: 2px solid var(--ink);
  }

  .side-rail {
    border-top: 2px solid var(--gold);
  }

  .side-rail .mini-table {
    scrollbar-gutter: stable;
  }
}

/* v2.15 - cross-sector continuity
   Reuse the product's gold/red/blue semantics to mark the three existing data layers. */
.sector-spine,
.premium-preview,
.history-sector-intro {
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.04);
}

.sector-spine {
  border-left: 4px solid var(--gold);
}

.premium-preview,
.premium-preview.realtime-sector {
  border-left: 4px solid #c45335;
}

.premium-preview.realtime-sector {
  padding-left: 8px;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.04);
}

.history-sector-intro {
  border-left: 4px solid #2f6190;
}

body[data-theme="dark"] .sector-spine,
body[data-theme="dark"] .premium-preview,
body[data-theme="dark"] .premium-preview.realtime-sector,
body[data-theme="dark"] .history-sector-intro {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* v2.16 - typography role system
   Display, data, labels, annotations, and tables now follow stable roles outside the PNG canvas. */
.brand h1,
.dateplate b,
.session-copy > strong,
.sector-spine-copy b,
.realtime-heading h2,
.router-copy b,
.history-intro-copy h2,
.history-story-lede b {
  font-family: var(--kzg-font-display);
  letter-spacing: 0;
}

.metric strong,
.session-chip-grid b,
.session-rank-strip b,
.session-lane-hedge-cells b,
.realtime-command-strip b,
.history-intro-stats b,
.filter-console-grid b,
.terminal-table-head,
.terminal-table-body,
.realtime-bias-list,
.analysis-grid {
  font-variant-numeric: tabular-nums lining-nums;
}

.metric > span,
.session-copy > span,
.session-chip-grid i,
.session-rank-strip i,
.session-lane-hedge-cells i,
.realtime-command-strip i,
.history-intro-stats i,
.filter-console-grid i {
  font-family: var(--kzg-font-ui);
  letter-spacing: 0;
}

.timeboard-copy p,
.section-head p,
.metric small,
.session-copy small,
.session-chip-grid small,
.realtime-heading p,
.history-intro-copy p {
  letter-spacing: 0;
  line-height: 1.38;
}

.side-rail,
.premium-preview,
.history-sector-intro,
.analysis-grid {
  font-family: var(--kzg-font-ui);
}

/* v2.17 - flow filter hierarchy
   Ticker scope and premium threshold lead; shape, book, and alerts remain available as supporting gates. */
@media (min-width: 761px) {
  .filter-console-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(66px, auto);
  }

  .filter-console-grid button:nth-child(1) {
    grid-column: span 7;
    border-top: 2px solid var(--gold);
  }

  .filter-console-grid button:nth-child(2) {
    grid-column: span 5;
    border-top: 2px solid var(--gold);
  }

  .filter-console-grid button:nth-child(n + 3) {
    grid-column: span 6;
  }

  .filter-console-grid button:nth-child(n + 5) {
    background: var(--surface-soft);
  }

  .filter-console-grid button:nth-child(-n + 2) b {
    font-size: 14px;
  }
}

/* v2.18 - flow tape row readability
   Keep all six fields while improving column alignment and scan contrast. */
.terminal-table-head,
.terminal-table-body button {
  grid-template-columns: 54px 62px minmax(150px, 1fr) 58px 82px 64px;
  gap: 7px;
}

.terminal-table-head {
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  letter-spacing: 0;
}

.terminal-table-body {
  gap: 4px;
}

.terminal-table-body button {
  min-height: 30px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.terminal-table-body button:nth-child(odd) {
  background: rgba(255, 255, 255, 0.045);
}

.terminal-table-head span:nth-child(5),
.terminal-table-body button > strong {
  text-align: right;
}

.terminal-table-head span:nth-child(6),
.terminal-table-body button > i {
  text-align: center;
}

.terminal-table-body button > b {
  font-size: 13px;
}

/* v2.19 - bull/bear list comparison
   Use the existing two-up flow workspace to compare directional ledgers directly. */
@media (min-width: 1181px) and (max-width: 1380px) {
  .realtime-side-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
  }

  .realtime-bias-list {
    align-content: start;
    padding: 9px;
    border: 1px solid var(--line);
    border-top-width: 2px;
    border-radius: 5px;
  }

  .realtime-bias-list.hot {
    border-top-color: #c45335;
    background: color-mix(in srgb, #c45335 4%, var(--surface));
  }

  .realtime-bias-list.cool {
    border-top-color: #2f6190;
    background: color-mix(in srgb, #2f6190 4%, var(--surface));
  }

  .realtime-bias-list button {
    grid-template-columns: 44px 30px minmax(0, 1fr) 66px;
    gap: 6px;
  }
}

/* v2.12 - metric hierarchy and number alignment
   Capital and directional reads lead; lane shares and provenance stay supporting. */
.metric {
  font-variant-numeric: tabular-nums lining-nums;
}

.metric strong {
  white-space: nowrap;
}

.metric:nth-child(2),
.metric:nth-child(3),
.metric:nth-child(4) {
  border-top: 2px solid color-mix(in srgb, var(--gold) 74%, var(--line));
}

.metric:nth-child(2) strong,
.metric:nth-child(3) strong,
.metric:nth-child(4) strong {
  color: var(--ink);
  font-size: 29px;
  font-weight: 500;
}

.metric:nth-child(5) strong,
.metric:nth-child(6) strong,
.metric:nth-child(7) strong {
  font-size: 24px;
}

.metric:nth-child(8) strong {
  font-size: 22px;
}

.metric:nth-child(n + 5) > span,
.metric:nth-child(8) small {
  color: var(--muted);
}

@media (min-width: 1181px) and (max-width: 1380px) {
  .metric:nth-child(2) strong,
  .metric:nth-child(3) strong,
  .metric:nth-child(4) strong {
    font-size: 25px;
  }
}

@media (max-width: 760px) {
  .metric:nth-child(2) strong,
  .metric:nth-child(3) strong,
  .metric:nth-child(4) strong {
    font-size: 24px;
  }

  .metric:nth-child(5) strong,
  .metric:nth-child(6) strong,
  .metric:nth-child(7) strong,
  .metric:nth-child(8) strong {
    font-size: 21px;
  }
}

@media (min-width: 1181px) {
  .timeboard {
    padding-top: 10px;
    padding-bottom: 6px;
  }

  .timeline-legend span:first-child {
    min-height: 22px;
    padding: 2px 7px;
  }
}

/* v2.23 - regime and heatmap symmetry */
@media (min-width: 761px) {
  .regime-map {
    align-content: start;
    min-height: 0;
    gap: 12px;
  }

  .regime-tape {
    grid-template-columns: repeat(30, minmax(0, 1fr));
    gap: 2px;
    padding: 10px;
  }

  .regime-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
  }

  .regime-stats span,
  .regime-stats button {
    align-content: center;
    min-height: 58px;
    padding: 10px 11px;
    border-radius: 4px;
  }

  .regime-stats b {
    font-size: 14px;
  }

  .regime-foot {
    margin-top: 0;
  }

  .heatmap-summary,
  .heatmap-rhythm {
    align-items: stretch;
  }

  .heatmap-summary span,
  .heat-rhythm-card {
    border-radius: 4px;
  }
}

/* v2.24 - rotation-map clarity at the dense desktop breakpoint */
@media (min-width: 761px) and (max-width: 1380px) {
  .rotation-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .rotation-head span {
    min-height: 60px;
  }

  .rotation-brief {
    grid-template-columns: minmax(0, 1fr);
  }

  .rotation-brief > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rotation-map {
    grid-template-columns: 170px minmax(0, 1fr);
    grid-template-areas:
      "lead stats"
      "plot plot";
    gap: 9px;
  }

  .rotation-map-lead {
    grid-area: lead;
    min-height: 116px;
  }

  .rotation-map-grid {
    grid-area: plot;
    min-height: 340px;
  }

  .rotation-map-stats {
    grid-area: stats;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .rotation-map-stats span {
    min-height: 55px;
  }

  .rotation-lanes {
    gap: 8px;
  }

  .rotation-row {
    grid-template-columns: 44px minmax(54px, 1fr) 62px;
    gap: 4px 6px;
    min-height: 58px;
  }

  .rotation-row small {
    grid-column: 1 / -1;
    padding-left: 50px;
    text-align: left;
  }
}

/* v2.25 - mobile command bar */
@media (max-width: 420px) {
  .toolbar .button,
  .toolbar .button.primary {
    display: grid;
    grid-template-columns: auto minmax(0, auto);
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 0 4px;
    font-size: 10px;
  }

  .toolbar .button span:first-child {
    font-size: 13px;
    line-height: 1;
  }

  .toolbar .button span:last-child {
    display: inline;
    overflow: hidden;
    font-size: 9px;
    font-weight: 760;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* v2.27 - keep the two-row mobile tape after the global tape alignment rules. */
@media (max-width: 760px) {
  .terminal-table-head,
  .terminal-table-body button {
    grid-template-columns: 42px 48px minmax(0, 1fr) 64px;
    grid-template-rows: auto auto;
    gap: 3px 6px;
  }

  .terminal-table-head span:nth-child(1),
  .terminal-table-body button > span:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .terminal-table-head span:nth-child(2),
  .terminal-table-body button > b {
    grid-column: 2;
    grid-row: 1;
  }

  .terminal-table-head span:nth-child(3),
  .terminal-table-body button > span:nth-of-type(2) {
    grid-column: 3;
    grid-row: 1;
  }

  .terminal-table-head span:nth-child(5),
  .terminal-table-body button > strong {
    grid-column: 4;
    grid-row: 1;
  }

  .terminal-table-head span:nth-child(4),
  .terminal-table-body button > span:nth-of-type(3) {
    display: block;
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .terminal-table-head span:nth-child(6),
  .terminal-table-body button > i {
    display: block;
    grid-column: 3 / 5;
    grid-row: 2;
    text-align: right;
  }

  .terminal-table-body button {
    min-height: 42px;
    padding: 5px 6px;
  }

  .terminal-table-body button > span,
  .terminal-table-body button > strong,
  .terminal-table-body button > i {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* v2.28 - mobile history navigation */
@media (max-width: 760px) {
  .history-intro-path,
  .history-story-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .history-intro-path > div,
  .history-story-lede {
    grid-column: 1 / -1;
  }

  .history-intro-path > div,
  .history-intro-path button,
  .history-story-lede,
  .history-story-card {
    flex: none;
    min-width: 0;
    width: auto;
    scroll-snap-align: none;
  }

  .history-intro-path button {
    min-height: 68px;
  }

  .history-story-card {
    min-height: 88px;
  }
}

/* v2.29 - mobile table behavior */
@media (max-width: 760px) {
  .mini-table {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
  }

  .mini-head,
  .stock-sort-read {
    position: sticky;
    left: 0;
    z-index: 6;
    background: var(--surface);
  }

  #stockTable {
    width: 620px;
    min-width: 620px;
    table-layout: fixed;
  }

  #stockTable th:nth-child(5),
  #stockTable td:nth-child(5),
  #stockTable th:nth-child(6),
  #stockTable td:nth-child(6) {
    display: table-cell;
  }

  #stockTable th:nth-child(1),
  #stockTable td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 44px;
    background: var(--surface);
  }

  #stockTable th:nth-child(2),
  #stockTable td:nth-child(2) {
    position: sticky;
    left: 44px;
    z-index: 4;
    width: 78px;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }

  #stockTable th:nth-child(3) { width: 86px; }
  #stockTable th:nth-child(4) { width: 58px; }
  #stockTable th:nth-child(5) { width: 98px; }
  #stockTable th:nth-child(6) { width: 138px; }

  #stockTable thead th:nth-child(-n + 2) {
    z-index: 7;
  }
}

/* v2.30 - mobile chart composition */
@media (max-width: 760px) {
  .trend-summary {
    grid-template-columns: minmax(0, 1fr) 108px;
    align-items: end;
    min-height: 108px;
  }

  .trend-kpis {
    text-align: right;
  }

  .trend-cockpit .trend-lens {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .trend-lens span {
    min-height: 70px;
    padding: 8px 6px;
  }

  .trend-lens i,
  .trend-lens small {
    font-size: 8px;
  }

  .trend-lens b {
    font-size: 13px;
  }

  .trend-cockpit .trend-radar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .trend-radar button {
    min-height: 76px;
    padding: 7px 5px;
  }

  .trend-radar span,
  .trend-radar small {
    font-size: 8px;
  }

  .trend-radar b {
    font-size: 12px;
  }

  .trend-cockpit-right > svg {
    min-height: 220px;
  }

  .trend-cockpit-right > svg text {
    font-size: 20px;
  }
}

/* v2.31 - mobile touch-target consistency */
@media (max-width: 760px) {
  .timeline-range,
  #symbolSearch,
  .range-tabs button,
  .stock-sort-tabs button,
  .session-chip-grid button,
  .heat-baton-row {
    min-height: 40px;
  }

  .stock-sort-tabs button {
    min-width: 40px;
    padding-inline: 8px;
  }

  .session-chip-grid button,
  .heat-baton-row {
    min-height: 44px;
  }

  #stockTable tbody tr {
    height: 40px;
  }
}

/* v2.32 - restrained interaction feedback */
:where(
  .toolbar .button,
  .mobile-command-bar button,
  .session-chip-grid button,
  .history-intro-path button,
  .history-story-card,
  .filter-console-grid button,
  .terminal-table-body button,
  .realtime-bias-list button,
  .side-leader-list button,
  .side-extreme-list button,
  .range-tabs button,
  .stock-sort-tabs button,
  .trend-radar button,
  .heat-rhythm-card,
  .heat-baton-row,
  .rotation-row,
  .momentum-row
) {
  touch-action: manipulation;
  transition:
    color 160ms var(--kzg-ease),
    border-color 160ms var(--kzg-ease),
    background-color 160ms var(--kzg-ease),
    box-shadow 160ms var(--kzg-ease),
    opacity 160ms var(--kzg-ease),
    transform 160ms var(--kzg-ease);
}

:where(
  .toolbar .button,
  .mobile-command-bar button,
  .session-chip-grid button,
  .history-intro-path button,
  .history-story-card,
  .filter-console-grid button,
  .terminal-table-body button,
  .realtime-bias-list button,
  .side-leader-list button,
  .side-extreme-list button,
  .range-tabs button,
  .stock-sort-tabs button,
  .trend-radar button,
  .heat-rhythm-card,
  .heat-baton-row,
  .rotation-row,
  .momentum-row
):active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
}

:where(.panel, .realtime-section, .history-sector-intro, .report-shell) {
  scroll-margin-top: 84px;
}

@media (hover: hover) {
  :where(
    .session-chip-grid button,
    .history-intro-path button,
    .history-story-card,
    .filter-console-grid button,
    .side-leader-list button,
    .side-extreme-list button,
    .trend-radar button,
    .heat-rhythm-card,
    .heat-baton-row
  ):hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 8%, transparent);
    transform: translateY(-1px);
  }
}

/* v2.41 - final surface and boundary convergence */
:root {
  --kzg-module-shadow: 0 8px 24px rgba(19, 24, 28, 0.055);
}

:is(
  .timeboard,
  .metric-rail,
  .session-tape,
  .sector-spine,
  .premium-preview,
  .history-sector-intro,
  .report-stage,
  .side-rail,
  .panel
) {
  border-color: color-mix(in srgb, var(--line-strong) 66%, var(--line));
  border-radius: 6px;
  box-shadow: var(--kzg-module-shadow);
}

.section-head {
  border-bottom-color: color-mix(in srgb, var(--line-strong) 70%, var(--line));
}

body[data-theme="dark"] :is(
  .timeboard,
  .metric-rail,
  .session-tape,
  .sector-spine,
  .premium-preview,
  .history-sector-intro,
  .report-stage,
  .side-rail,
  .panel
) {
  border-color: var(--line);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

@media (max-width: 760px) {
  :is(
    .timeboard,
    .metric-rail,
    .session-tape,
    .sector-spine,
    .premium-preview,
    .history-sector-intro,
    .report-stage,
    .side-rail,
    .panel
  ) {
    border-radius: 5px;
    box-shadow: 0 5px 16px rgba(19, 24, 28, 0.05);
  }

  body[data-theme="dark"] :is(
    .timeboard,
    .metric-rail,
    .session-tape,
    .sector-spine,
    .premium-preview,
    .history-sector-intro,
    .report-stage,
    .side-rail,
    .panel
  ) {
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
  }
}

/* v2.61 - liquid material tokens: translucent chrome without blurring data. */
:root {
  --kzg-liquid-bg: color-mix(in srgb, var(--surface) 82%, transparent);
  --kzg-liquid-bg-strong: color-mix(in srgb, var(--surface) 92%, transparent);
  --kzg-liquid-line: color-mix(in srgb, white 72%, var(--line) 28%);
  --kzg-liquid-line-low: color-mix(in srgb, var(--line-strong) 58%, transparent);
  --kzg-liquid-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 10%, transparent), inset 0 1px 0 color-mix(in srgb, white 74%, transparent);
  --kzg-liquid-shadow-compact: 0 8px 22px color-mix(in srgb, var(--ink) 9%, transparent), inset 0 1px 0 color-mix(in srgb, white 68%, transparent);
  --kzg-liquid-blur: blur(28px) saturate(1.28);
  --kzg-spring: cubic-bezier(0.22, 0.8, 0.24, 1);
}

body[data-theme="dark"] {
  --kzg-liquid-bg: color-mix(in srgb, var(--surface) 84%, transparent);
  --kzg-liquid-bg-strong: color-mix(in srgb, var(--surface) 94%, transparent);
  --kzg-liquid-line: color-mix(in srgb, white 15%, var(--line) 85%);
  --kzg-liquid-line-low: color-mix(in srgb, white 11%, var(--line) 89%);
  --kzg-liquid-shadow: 0 22px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --kzg-liquid-shadow-compact: 0 10px 26px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* v2.62 - financial chrome: retain the black KZG character, add optical depth. */
.topbar {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  background: color-mix(in srgb, #0a0d10 88%, transparent);
  box-shadow: 0 12px 36px rgba(7, 10, 13, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(30px) saturate(1.26);
  backdrop-filter: blur(30px) saturate(1.26);
}

.mark {
  border-color: rgba(255, 255, 255, 0.44);
  border-radius: 7px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.toolbar .button {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

.toolbar .button:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.toolbar .button.primary {
  box-shadow: 0 9px 22px rgba(211, 161, 83, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

/* v2.63 - liquid reading rail with one stable selected capsule. */
.reading-rail-shell {
  border-color: var(--kzg-liquid-line-low);
  background: var(--kzg-liquid-bg);
  box-shadow: var(--kzg-liquid-shadow-compact);
  -webkit-backdrop-filter: var(--kzg-liquid-blur);
  backdrop-filter: var(--kzg-liquid-blur);
}

.reading-tabs {
  position: relative;
}

.reading-tabs button {
  min-height: 36px;
  border-radius: 6px;
}

.reading-tabs button.active {
  border-color: color-mix(in srgb, var(--gold) 44%, var(--kzg-liquid-line));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 color-mix(in srgb, white 18%, transparent);
  transform: translateY(-1px);
}

.reading-progress {
  height: 3px;
  background: color-mix(in srgb, var(--line) 56%, transparent);
}

.reading-progress i {
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 42%, transparent);
}

/* v2.64 - selected date becomes a direct calendar control. */
.timeline-legend {
  align-items: center;
}

.date-picker-trigger {
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--kzg-liquid-line-low);
  border-radius: 6px;
  background: var(--kzg-liquid-bg-strong);
  color: var(--muted);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 68%, transparent);
  cursor: pointer;
  font-size: 10px;
  transition: color 160ms var(--kzg-spring), border-color 160ms var(--kzg-spring), box-shadow 160ms var(--kzg-spring), transform 160ms var(--kzg-spring);
}

.date-picker-trigger b {
  color: var(--ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.date-picker-trigger small {
  color: var(--gold);
  font-size: 9px;
  font-weight: 780;
}

.date-picker-trigger:hover {
  border-color: color-mix(in srgb, var(--gold) 48%, var(--line-strong));
  box-shadow: var(--kzg-liquid-shadow-compact);
  transform: translateY(-1px);
}

.timeboard {
  background: var(--kzg-liquid-bg);
  box-shadow: var(--kzg-liquid-shadow-compact);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
  backdrop-filter: blur(22px) saturate(1.18);
}

.nav-day {
  background: var(--kzg-liquid-bg-strong);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
  transition: border-color 160ms var(--kzg-spring), box-shadow 160ms var(--kzg-spring), transform 160ms var(--kzg-spring);
}

.nav-day:not(:disabled):active {
  transform: scale(0.94);
}

.day-bars button {
  transition: height 180ms var(--kzg-spring), background-color 180ms var(--kzg-spring), box-shadow 180ms var(--kzg-spring), transform 180ms var(--kzg-spring);
}

.day-bars button.active {
  transform: scaleX(1.45) translateY(-1px);
}

/* v2.65 - native-inspired month calendar, backed only by landed sessions. */
.date-picker-modal[hidden] {
  display: none;
}

.date-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
}

.date-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 16, 0.46);
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
  backdrop-filter: blur(10px) saturate(0.9);
}

.date-picker-sheet {
  position: relative;
  width: min(650px, 100%);
  max-height: min(820px, calc(100vh - 44px));
  overflow: auto;
  border: 1px solid var(--kzg-liquid-line);
  border-radius: 8px;
  background: var(--kzg-liquid-bg-strong);
  box-shadow: var(--kzg-liquid-shadow);
  scrollbar-color: var(--line-strong) transparent;
  -webkit-backdrop-filter: var(--kzg-liquid-blur);
  backdrop-filter: var(--kzg-liquid-blur);
}

.date-picker-head {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 100px;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.date-picker-head div {
  min-width: 0;
}

.date-picker-head span {
  display: block;
  color: var(--gold);
  font-size: 9px;
  font-weight: 820;
  text-transform: uppercase;
}

.date-picker-head h2 {
  margin-top: 3px;
  font-family: var(--kzg-font-display);
  font-size: 23px;
  line-height: 1.05;
}

.date-picker-close,
.date-picker-latest,
.date-picker-month-nav button,
.date-picker-modes button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 760;
  transition: border-color 150ms var(--kzg-spring), background-color 150ms var(--kzg-spring), box-shadow 150ms var(--kzg-spring), transform 150ms var(--kzg-spring);
}

.date-picker-close:hover,
.date-picker-latest:hover,
.date-picker-month-nav button:not(:disabled):hover,
.date-picker-modes button:hover {
  border-color: color-mix(in srgb, var(--gold) 52%, var(--line-strong));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ink) 8%, transparent);
}

.date-picker-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.date-picker-summary span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--line);
}

.date-picker-summary span:last-child {
  border-right: 0;
}

.date-picker-summary i,
.date-picker-foot span {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.date-picker-summary b {
  overflow: hidden;
  font-family: var(--kzg-font-display);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-picker-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 14px 18px 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
}

.date-picker-modes button {
  border-color: transparent;
  background: transparent;
}

.date-picker-modes button.active {
  border-color: var(--kzg-liquid-line);
  background: var(--surface);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent), inset 0 1px 0 color-mix(in srgb, white 64%, transparent);
}

.date-picker-month-nav {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 100px;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
}

.date-picker-month-nav b {
  text-align: center;
  font-family: var(--kzg-font-display);
  font-size: 20px;
}

.date-picker-month-nav button:disabled {
  cursor: default;
  opacity: 0.38;
}

.date-picker-calendar,
.date-picker-list {
  display: none;
}

.date-picker-calendar.active,
.date-picker-list.active {
  display: block;
}

.date-picker-calendar {
  padding: 0 18px 18px;
}

.date-picker-weekdays,
.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.date-picker-weekdays {
  margin-bottom: 6px;
}

.date-picker-weekdays span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
  text-align: center;
}

.date-picker-day,
.date-picker-blank {
  aspect-ratio: 1;
  min-width: 0;
}

.date-picker-day {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
}

.date-picker-day.available {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 62%, transparent);
  transition: border-color 150ms var(--kzg-spring), box-shadow 150ms var(--kzg-spring), transform 150ms var(--kzg-spring);
}

.date-picker-day.available:hover {
  border-color: color-mix(in srgb, var(--gold) 58%, var(--line-strong));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 10%, transparent);
  transform: translateY(-2px);
}

.date-picker-day b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.date-picker-day i {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 72%, var(--line));
}

.date-picker-day.latest i {
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent);
}

.date-picker-day.selected {
  border-color: color-mix(in srgb, var(--gold) 72%, var(--line-strong));
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
  color: color-mix(in srgb, var(--gold) 72%, var(--ink));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--gold) 18%, transparent), inset 0 1px 0 color-mix(in srgb, white 66%, transparent);
}

/* v2.66 - month list and navigation preserve the same date-selection state. */
.date-picker-list {
  max-height: min(440px, 52vh);
  margin: 0 18px 18px;
  overflow: auto;
  border-top: 1px solid var(--line);
  scrollbar-color: var(--line-strong) transparent;
}

.date-picker-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.date-picker-list-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.date-picker-list-row b,
.date-picker-list-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-picker-list-row b {
  font-family: var(--kzg-font-display);
  font-size: 14px;
}

.date-picker-list-row small {
  color: var(--muted);
  font-size: 9px;
}

.date-picker-list-row strong {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.date-picker-list-row:hover,
.date-picker-list-row.selected {
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
}

.date-picker-list-row.selected {
  box-shadow: inset 3px 0 0 var(--gold);
}

.date-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
}

.date-picker-foot b {
  color: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

/* v2.67 - pointer depth is restrained to compact interactive surfaces. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kzg-pointer-lit {
    position: relative;
    z-index: 3;
    transform: perspective(900px) rotateX(var(--kzg-tilt-x, 0deg)) rotateY(var(--kzg-tilt-y, 0deg)) translateY(-2px) !important;
    box-shadow: var(--kzg-shadow-x, 0) var(--kzg-shadow-y, 10px) 24px color-mix(in srgb, var(--ink) 12%, transparent), inset 0 1px 0 color-mix(in srgb, white 58%, transparent) !important;
    will-change: transform;
  }
}

/* v2.68 - day changes and section entrances settle instead of flashing. */
:is(
  .metric-rail,
  .session-tape,
  .sector-spine,
  .workbench,
  .premium-preview,
  .history-sector-intro,
  .analysis-grid
) {
  transition: opacity 190ms var(--kzg-spring), transform 190ms var(--kzg-spring), border-color 190ms var(--kzg-spring), box-shadow 190ms var(--kzg-spring);
}

body.kzg-day-changing :is(
  .metric-rail,
  .session-tape,
  .sector-spine,
  .workbench,
  .premium-preview,
  .history-sector-intro,
  .analysis-grid
) {
  opacity: 0.58;
  transform: translateY(3px);
}

body.has-reveal-motion .kzg-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(14px);
}

.kzg-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 480ms;
  transition-timing-function: var(--kzg-spring);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--kzg-spring);
}

::view-transition-old(root) {
  animation-name: kzg-theme-out;
}

::view-transition-new(root) {
  animation-name: kzg-theme-in;
}

@keyframes kzg-theme-out {
  to { opacity: 0.18; }
}

@keyframes kzg-theme-in {
  from { opacity: 0.18; }
}

/* v2.69 - phone calendar and bottom dock share one safe-area material layer. */
@media (max-width: 760px) {
  .topbar {
    background: color-mix(in srgb, #0a0d10 91%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    backdrop-filter: blur(24px) saturate(1.2);
  }

  .reading-rail {
    padding: 0 8px calc(7px + env(safe-area-inset-bottom, 0px));
  }

  .reading-rail-shell {
    overflow: visible;
    padding-bottom: 0;
    border: 1px solid var(--kzg-liquid-line-low);
    border-radius: 8px;
    box-shadow: 0 14px 38px color-mix(in srgb, var(--ink) 18%, transparent), inset 0 1px 0 color-mix(in srgb, white 46%, transparent);
  }

  .reading-progress {
    border-radius: 8px 8px 0 0;
  }

  .reading-tabs button.active {
    transform: translateY(-2px);
  }

  .timeline-legend {
    align-items: stretch;
  }

  .date-picker-trigger {
    grid-template-columns: auto 1fr auto;
    width: 100%;
    min-height: 38px;
  }

  .date-picker-trigger > span {
    display: none;
  }

  .date-picker-trigger b {
    justify-self: start;
    font-size: 12px;
  }

  .date-picker-modal {
    place-items: end center;
    padding: 0;
  }

  .date-picker-sheet {
    width: 100%;
    max-height: min(790px, calc(100dvh - 22px));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .date-picker-head {
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    gap: 7px;
    padding: 14px 12px 11px;
  }

  .date-picker-head h2 {
    font-size: 20px;
  }

  .date-picker-close,
  .date-picker-latest,
  .date-picker-month-nav button,
  .date-picker-modes button {
    min-height: 38px;
    padding: 0 8px;
    font-size: 10px;
  }

  .date-picker-summary span {
    padding: 10px 9px;
  }

  .date-picker-summary b {
    font-size: 13px;
  }

  .date-picker-modes {
    margin: 10px 12px 0;
  }

  .date-picker-month-nav {
    grid-template-columns: 78px minmax(0, 1fr) 78px;
    gap: 7px;
    padding: 11px 12px 9px;
  }

  .date-picker-month-nav b {
    font-size: 17px;
  }

  .date-picker-calendar {
    padding: 0 12px 12px;
  }

  .date-picker-weekdays,
  .date-picker-days {
    gap: 5px;
  }

  .date-picker-list {
    margin: 0 12px 12px;
  }

  .date-picker-foot {
    padding: 10px 12px 12px;
  }

  body.reading-rail-visible main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* v2.72-v2.76 - landed-date navigation, live session preview, and timeline settling. */
.date-picker-preview {
  display: grid;
  grid-template-columns: 140px repeat(3, minmax(0, 1fr));
  margin: 0 18px 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 54%, transparent);
}

.date-picker-preview-head,
.date-picker-preview-metric {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 68px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
}

.date-picker-preview-head {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--gold) 78%, var(--line-strong));
}

.date-picker-preview-head span,
.date-picker-preview-metric i,
.date-picker-preview-metric small,
.date-picker-preview p {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 690;
}

.date-picker-preview-head b,
.date-picker-preview-metric strong {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--kzg-font-display);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-picker-preview-metric:last-of-type {
  border-right: 0;
}

.date-picker-preview-metric small.tone-high {
  color: var(--green);
}

.date-picker-preview-metric small.tone-low {
  color: var(--red);
}

.date-picker-preview p {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.date-picker-day.previewed:not(.selected),
.date-picker-list-row.previewed:not(.selected) {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line-strong));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  box-shadow: 0 7px 17px color-mix(in srgb, var(--blue) 11%, transparent), inset 0 1px 0 color-mix(in srgb, white 60%, transparent);
}

.date-picker-list-row.previewed:not(.selected) {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--blue) 68%, var(--line-strong));
}

.date-picker-trigger small {
  min-width: 54px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  transition: color 150ms var(--kzg-spring), opacity 150ms var(--kzg-spring);
}

body.kzg-timeline-seeking .date-picker-trigger {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line-strong));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--blue) 11%, transparent), inset 0 1px 0 color-mix(in srgb, white 60%, transparent);
}

body.kzg-timeline-seeking .date-picker-trigger small {
  color: var(--blue);
}

body.kzg-timeline-settled .date-picker-trigger {
  border-color: color-mix(in srgb, var(--green) 50%, var(--line-strong));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--green) 10%, transparent), inset 0 1px 0 color-mix(in srgb, white 60%, transparent);
}

body.kzg-timeline-settled .date-picker-trigger small {
  color: var(--green);
}

body.kzg-timeline-dragging .timeline-range::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 17%, transparent), 0 5px 14px color-mix(in srgb, var(--ink) 20%, transparent);
  transform: scale(1.12);
}

body.kzg-timeline-dragging .timeline-range::-moz-range-thumb {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 17%, transparent), 0 5px 14px color-mix(in srgb, var(--ink) 20%, transparent);
  transform: scale(1.12);
}

body[data-theme="dark"] .date-picker-preview {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

body[data-theme="dark"] .date-picker-day.previewed:not(.selected),
body[data-theme="dark"] .date-picker-list-row.previewed:not(.selected) {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

@media (max-width: 760px) {
  .date-picker-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 12px 10px;
  }

  .date-picker-preview-head {
    grid-column: 1 / -1;
    min-height: 42px;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 7px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .date-picker-preview-metric {
    min-height: 57px;
    padding: 7px 8px;
  }

  .date-picker-preview-head b,
  .date-picker-preview-metric strong {
    font-size: 12px;
  }

  .date-picker-preview p {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 7px 9px;
  }

  .date-picker-preview p span:last-child {
    text-align: right;
  }

  body[data-lang="en"] .date-picker-head h2 {
    font-size: 17px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .date-picker-trigger,
  .date-picker-trigger small,
  .date-picker-day.available,
  .date-picker-list-row,
  .timeline-range::-webkit-slider-thumb,
  .timeline-range::-moz-range-thumb {
    transition: none !important;
  }
}

/* v2.77 - calendar density converges across desktop, tablet, and long labels. */
@media (min-width: 761px) {
  .date-picker-sheet {
    width: min(720px, calc(100vw - 44px));
    max-height: min(860px, calc(100dvh - 44px));
  }

  .date-picker-head,
  .date-picker-month-nav {
    grid-template-columns: minmax(92px, 108px) minmax(0, 1fr) minmax(92px, 108px);
  }

  .date-picker-preview {
    grid-template-columns: 150px repeat(3, minmax(0, 1fr));
  }

  .date-picker-day,
  .date-picker-blank {
    min-height: 58px;
    aspect-ratio: auto;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .date-picker-modal {
    padding: 18px;
  }

  .date-picker-sheet {
    width: min(720px, calc(100vw - 36px));
    max-height: calc(100dvh - 36px);
  }

  .date-picker-head {
    padding: 14px 16px 11px;
  }

  .date-picker-head h2 {
    font-size: 21px;
  }

  .date-picker-summary span {
    padding: 10px 14px;
  }

  .date-picker-modes {
    margin: 10px 16px 0;
  }

  .date-picker-month-nav {
    padding: 12px 16px 9px;
  }

  .date-picker-preview {
    margin: 0 16px 10px;
  }

  .date-picker-preview-head,
  .date-picker-preview-metric {
    min-height: 60px;
  }

  .date-picker-calendar {
    padding: 0 16px 12px;
  }

  .date-picker-day,
  .date-picker-blank {
    min-height: 52px;
  }

  .date-picker-foot {
    padding: 10px 16px 12px;
  }
}

body[data-lang="en"] .date-picker-head span,
body[data-lang="en"] .date-picker-summary i,
body[data-lang="en"] .date-picker-preview :is(span, i, small),
body[data-lang="en"] .date-picker-foot span {
  line-height: 1.25;
  white-space: normal;
}

body[data-lang="en"] .date-picker-summary i {
  min-height: 22px;
}

body[data-lang="en"] .date-picker-month-nav button {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-lang="en"] .date-picker-foot {
  align-items: flex-start;
}

body[data-lang="en"] .date-picker-foot span {
  max-width: 62%;
}

@media (max-width: 760px) {
  body[data-lang="en"] .date-picker-head {
    grid-template-columns: 60px minmax(0, 1fr) 60px;
  }

  body[data-lang="en"] .date-picker-head :is(.date-picker-close, .date-picker-latest) {
    padding-inline: 4px;
    font-size: 9px;
  }

  body[data-lang="en"] .date-picker-summary i {
    min-height: 23px;
    font-size: 8px;
  }

  body[data-lang="en"] .date-picker-foot span {
    max-width: 56%;
  }
}

/* v2.78 - one date-navigation contract for touch, pointer, keyboard, and reduced motion. */
.date-picker-modal[data-input-mode="touch"] .date-picker-day.available:hover {
  border-color: var(--line);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 62%, transparent);
  transform: none;
}

.date-picker-modal[data-input-mode="touch"] :is(
  .date-picker-day.available,
  .date-picker-list-row,
  .date-picker-close,
  .date-picker-latest,
  .date-picker-month-nav button,
  .date-picker-modes button
):active {
  border-color: color-mix(in srgb, var(--gold) 58%, var(--line-strong));
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
  transform: scale(0.98);
}

.date-picker-modal[data-input-mode="keyboard"] .date-picker-day.previewed:not(.selected) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent), inset 0 1px 0 color-mix(in srgb, white 60%, transparent);
}

@media (pointer: coarse) {
  .date-picker-sheet :is(
    .date-picker-day.available,
    .date-picker-list-row,
    .date-picker-close,
    .date-picker-latest,
    .date-picker-month-nav button,
    .date-picker-modes button
  ) {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .date-picker-modal :is(
    .date-picker-day.available,
    .date-picker-list-row,
    .date-picker-close,
    .date-picker-latest,
    .date-picker-month-nav button,
    .date-picker-modes button
  ) {
    transition: none !important;
  }

  .date-picker-modal :is(button, [data-picker-date]):hover,
  .date-picker-modal :is(button, [data-picker-date]):active {
    transform: none !important;
  }
}

/* v2.79 - stable intraday cursor geometry for the 30-minute bucket chart. */
.analysis-intraday-band .bucket-bars {
  position: relative;
  isolation: isolate;
}

.bucket-crosshair {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 30px;
  width: 1px;
  pointer-events: none;
  transition: left 150ms var(--kzg-spring), opacity 120ms ease;
}

.bucket-crosshair > i {
  position: absolute;
  inset: 0;
  display: block;
  width: 1px;
  background: color-mix(in srgb, var(--gold) 76%, var(--line-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, white 58%, transparent), 0 0 16px color-mix(in srgb, var(--gold) 22%, transparent);
}

.bucket-crosshair > span {
  position: absolute;
  top: 7px;
  left: 8px;
  display: grid;
  gap: 2px;
  min-width: 180px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line-strong));
  border-radius: 5px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 color-mix(in srgb, white 62%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
}

.bucket-crosshair.edge-end > span {
  right: 8px;
  left: auto;
  transform: translateX(-100%);
}

.bucket-crosshair > span b,
.bucket-crosshair > span small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bucket-crosshair > span b {
  color: var(--ink);
  font-family: var(--kzg-font-display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.bucket-crosshair > span small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.bar.bucket-active .bar-track {
  border-color: color-mix(in srgb, var(--gold) 66%, var(--line-strong));
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 4%, transparent), color-mix(in srgb, var(--gold) 18%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent);
}

.bar.bucket-active .bar-fill {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 14%, transparent), 0 0 16px color-mix(in srgb, var(--gold) 25%, transparent);
}

/* v2.80 - one hovered bucket links chart, heat lanes, pressure, risk, and summaries. */
.analysis-intraday-band :is([data-bucket-index], [data-bucket-range]) {
  transition: opacity 140ms ease, border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms var(--kzg-spring);
}

.analysis-intraday-band.bucket-focus-on .bucket-flow .flow-bucket:not(.bucket-active),
.analysis-intraday-band.bucket-focus-on .heat-lane-track i:not(.bucket-active) {
  opacity: 0.3;
}

.analysis-intraday-band.bucket-focus-on .bar:not(.bucket-active) .bar-fill {
  opacity: 0.4;
}

.analysis-intraday-band :is(
  .flow-bucket,
  .bucket-profile > span,
  .heatmap-summary > span
).bucket-active {
  border-color: color-mix(in srgb, var(--gold) 68%, var(--line-strong));
  background: color-mix(in srgb, var(--gold) 11%, var(--surface));
  box-shadow: inset 3px 0 0 var(--gold), 0 8px 18px color-mix(in srgb, var(--gold) 12%, transparent);
  opacity: 1;
}

.bucket-pressure-track span.bucket-active i {
  background: var(--gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 15%, transparent), 0 0 12px color-mix(in srgb, var(--gold) 28%, transparent);
  transform: scaleY(1.6);
  transform-origin: center bottom;
}

.risk-cells span.bucket-active {
  border-color: color-mix(in srgb, var(--gold) 66%, var(--line-strong));
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 12%, transparent);
}

.risk-cells span.bucket-active::before {
  background: var(--gold);
}

.heat-lane-track i.bucket-active {
  z-index: 2;
  opacity: 1;
  background: var(--gold) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 16%, transparent), 0 0 10px color-mix(in srgb, var(--gold) 28%, transparent);
  filter: saturate(1.05);
  transform: scaleY(1.9);
  transform-origin: center bottom;
}

.heat-lane-axis [data-bucket-index].bucket-active {
  color: color-mix(in srgb, var(--gold) 76%, var(--ink));
  font-weight: 860;
}

body[data-theme="dark"] .bucket-crosshair > span {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

@media (max-width: 760px) {
  .bucket-crosshair > span {
    min-width: 158px;
    padding: 6px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bucket-crosshair,
  .analysis-intraday-band :is([data-bucket-index], [data-bucket-range]),
  .bucket-pressure-track span i,
  .heat-lane-track i {
    transition: none !important;
  }
}

/* v2.71 - keyboard continuity for the trading-day sheet. */
.date-picker-sheet :is(button, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold) 76%, white 8%);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
}

/* v2.70 - dark glass, contrast, and motion-accessibility convergence. */
body[data-theme="dark"] .timeboard,
body[data-theme="dark"] .reading-rail-shell,
body[data-theme="dark"] .date-picker-sheet {
  border-color: var(--kzg-liquid-line-low);
  background: var(--kzg-liquid-bg);
}

body[data-theme="dark"] .date-picker-trigger,
body[data-theme="dark"] .nav-day,
body[data-theme="dark"] .date-picker-day.available {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-theme="dark"] .date-picker-modes button.active {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-theme="dark"] .date-picker-day.selected {
  border-color: color-mix(in srgb, var(--gold) 68%, var(--line-strong));
  background: color-mix(in srgb, var(--gold) 17%, var(--surface));
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  .kzg-reveal,
  .kzg-pointer-lit,
  body.kzg-day-changing :is(
    .metric-rail,
    .session-tape,
    .sector-spine,
    .workbench,
    .premium-preview,
    .history-sector-intro,
    .analysis-grid
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* v2.42 - analysis flow shell
   Break the rigid shared-row grid so unrelated panel heights no longer create viewport-sized holes. */
@media (min-width: 1181px) {
  .analysis-grid {
    display: block;
  }

  .analysis-band,
  .analysis-stack,
  .analysis-band > .panel,
  .analysis-stack > .panel {
    min-width: 0;
  }

  .analysis-band > .panel,
  .analysis-stack > .panel,
  .analysis-grid > .rotation-panel,
  .analysis-grid > .momentum-panel {
    grid-column: auto;
  }
}

/* v2.43 - overview packing
   The trend surface is paired with a true signal/regime stack instead of waiting for the tallest grid row. */
@media (min-width: 1181px) {
  .analysis-overview-band {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
    align-items: stretch;
    gap: 18px;
  }

  .analysis-overview-stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 18px;
  }
}

/* v2.44 - intraday packing
   Heatmap and bucket analysis now share a balanced independent band. */
@media (min-width: 1181px) {
  .analysis-intraday-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
    margin-top: 18px;
  }

  .analysis-grid > .rotation-panel,
  .analysis-grid > .momentum-panel {
    margin-top: 18px;
  }
}

/* v2.45 - useful-height distribution
   Shorter peers expand their actual chart or board area rather than leaving dead background below the card. */
@media (min-width: 1181px) {
  .analysis-overview-band > .trend-panel,
  .analysis-overview-stack > .signal-panel,
  .analysis-intraday-band > .heatmap-panel,
  .analysis-intraday-band > .bucket-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .analysis-overview-band .trend-chart,
  .analysis-overview-stack .signal-board,
  .analysis-intraday-band .heatmap,
  .analysis-intraday-band .bucket-bars {
    flex: 1 1 auto;
    min-height: 0;
  }

  .analysis-overview-stack > .regime-panel {
    align-self: end;
  }
}

/* v2.46 - one analysis spacing scale */
:root {
  --kzg-analysis-gap: 14px;
  --kzg-analysis-inner-gap: 8px;
}

.analysis-grid {
  margin-top: var(--kzg-analysis-gap);
}

@media (min-width: 1181px) {
  .analysis-overview-band,
  .analysis-overview-stack,
  .analysis-intraday-band {
    gap: var(--kzg-analysis-gap);
  }

  .analysis-intraday-band,
  .analysis-grid > .rotation-panel,
  .analysis-grid > .momentum-panel {
    margin-top: var(--kzg-analysis-gap);
  }
}

/* v2.47 - panel heading/content adjacency */
.analysis-grid .section-head {
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.analysis-grid .section-head h2 {
  line-height: 1.08;
}

.analysis-grid .section-head p {
  margin-top: 4px;
  line-height: 1.34;
}

/* v2.48 - dense inner clusters without cramped controls */
.analysis-grid :is(
  .heatmap-summary,
  .heatmap-rhythm,
  .bucket-profile,
  .bucket-flow,
  .signature-lanes,
  .bucket-risk,
  .regime-stats
) {
  gap: var(--kzg-analysis-inner-gap);
}

.analysis-grid :is(.heatmap-summary, .heatmap-rhythm, .heatmap-baton) {
  margin-bottom: 9px;
}

.analysis-grid :is(.bucket-profile, .bucket-flow, .bucket-signature, .bucket-risk) {
  margin-bottom: 10px;
}

.analysis-grid .bucket-rotation-bridge {
  margin-top: 8px;
  margin-bottom: 10px;
}

/* v2.49 - wide-screen proportion tuning */
@media (min-width: 1500px) {
  .analysis-overview-band {
    grid-template-columns: minmax(0, 2.04fr) minmax(390px, 0.96fr);
  }

  .analysis-intraday-band {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }

  .analysis-grid .regime-map {
    min-height: 230px;
  }
}

/* v2.50 - tablet continuation
   Wrapper elements disappear from layout below desktop so the established two-column order remains intact. */
@media (max-width: 1180px) {
  .analysis-band,
  .analysis-stack {
    display: contents;
  }

  .analysis-grid > .rotation-panel,
  .analysis-grid > .momentum-panel {
    margin-top: 0;
  }

  .analysis-grid .panel {
    height: auto;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .analysis-grid {
    gap: 12px;
  }
}

/* v2.51 - mobile spacing economy */
@media (max-width: 760px) {
  :root {
    --kzg-analysis-gap: 9px;
    --kzg-analysis-inner-gap: 7px;
  }

  .analysis-grid {
    gap: var(--kzg-analysis-gap);
    margin-top: var(--kzg-analysis-gap);
  }

  .analysis-grid .panel {
    padding: 11px;
  }

  .analysis-grid .section-head {
    margin-bottom: 8px;
    padding-bottom: 7px;
  }

  .analysis-grid :is(.regime-map, .bucket-bars) {
    min-height: 0;
  }
}

/* v2.52 - final spacing convergence */
.analysis-grid,
.analysis-band,
.analysis-stack,
.analysis-grid .panel,
.analysis-grid .panel > * {
  min-width: 0;
  box-sizing: border-box;
}

.analysis-grid .panel {
  overflow: hidden;
}

body[data-theme="dark"] .analysis-grid .panel {
  background: var(--surface);
}

@media (min-width: 1181px) {
  .analysis-grid .heat-lane-board,
  .analysis-grid .bucket-bars {
    height: 100%;
  }
}

/* v2.53 - persistent reading context */
.reading-rail {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 48;
  padding: 0 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 180ms var(--kzg-ease), transform 180ms var(--kzg-ease), visibility 180ms;
}

body.reading-rail-visible .reading-rail {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.reading-rail-shell {
  position: relative;
  width: min(100%, var(--kzg-content-max));
  min-height: 46px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, var(--line));
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 9%, transparent);
  backdrop-filter: blur(18px) saturate(1.08);
}

.reading-progress {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 78%, transparent);
}

.reading-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
}

.reading-rail-inner {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1.55fr);
  align-items: center;
  min-height: 46px;
}

.reading-identity {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  padding: 7px 12px;
  border-right: 1px solid var(--line);
}

.reading-identity span,
.reading-identity small {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.reading-identity b {
  font-family: var(--kzg-font-display);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

.reading-identity small {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
}

.reading-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
  padding: 5px;
}

.reading-tabs button {
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: 750 11px/1 var(--kzg-font-ui);
  cursor: pointer;
  transition: color 150ms var(--kzg-ease), border-color 150ms var(--kzg-ease), background-color 150ms var(--kzg-ease), transform 150ms var(--kzg-ease);
}

.reading-tabs button.active {
  border-color: color-mix(in srgb, var(--gold) 50%, var(--line));
  background: var(--ink);
  color: var(--surface);
}

/* v2.54 - active section depth */
:is(.timeboard, .report-stage, .premium-preview, .history-sector-intro, .panel).reading-current-surface {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line-strong));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 8%, transparent), inset 3px 0 0 color-mix(in srgb, var(--gold) 72%, transparent);
}

body[data-theme="dark"] :is(.timeboard, .report-stage, .premium-preview, .history-sector-intro, .panel).reading-current-surface {
  border-color: color-mix(in srgb, var(--gold) 30%, var(--line-strong));
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 3px 0 0 color-mix(in srgb, var(--gold) 74%, transparent);
}

/* v2.55 - cross-module symbol focus */
body.has-symbol-focus [data-symbol].symbol-active:not(tr):not([role="tooltip"]) {
  position: relative;
  z-index: 2;
  border-color: color-mix(in srgb, var(--gold) 74%, var(--line-strong)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent), 0 7px 18px color-mix(in srgb, var(--ink) 10%, transparent);
}

tr.symbol-active td {
  background: color-mix(in srgb, var(--gold) 10%, var(--surface)) !important;
  border-top-color: color-mix(in srgb, var(--gold) 48%, var(--line)) !important;
  border-bottom-color: color-mix(in srgb, var(--gold) 48%, var(--line)) !important;
}

[data-symbol].symbol-peer-hover:not(tr) {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line-strong)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent);
}

tr.symbol-peer-hover td {
  background: color-mix(in srgb, var(--blue) 7%, var(--surface)) !important;
}

/* v2.56 - tactile controls */
@media (hover: hover) {
  :is(
    .reading-tabs button,
    .heat-lane-row,
    .heat-rhythm-card,
    .heat-baton-row,
    .rotation-map-grid button,
    .rotation-row,
    .momentum-row,
    .sector-spine-buttons button
  ):hover {
    border-color: color-mix(in srgb, var(--gold) 36%, var(--line-strong));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ink) 9%, transparent);
    transform: translateY(-1px);
  }
}

:is(
  .reading-tabs button,
  .heat-lane-row,
  .heat-rhythm-card,
  .heat-baton-row,
  .rotation-map-grid button,
  .rotation-row,
  .momentum-row,
  .sector-spine-buttons button
):active {
  transform: translateY(1px) scale(0.985);
}

/* v2.57 - dark mode focus clarity */
body[data-theme="dark"] .reading-rail-shell {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .reading-tabs button.active {
  border-color: color-mix(in srgb, var(--gold) 58%, var(--line-strong));
  background: color-mix(in srgb, var(--gold) 16%, var(--surface-soft));
  color: var(--ink);
}

body[data-theme="dark"] [data-symbol].symbol-peer-hover:not(tr) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent), 0 8px 20px rgba(0, 0, 0, 0.24);
}

/* v2.58 - mobile reading dock */
@media (max-width: 760px) {
  .reading-rail {
    top: auto;
    bottom: 0;
    padding: 0;
    transform: translateY(100%);
  }

  body.reading-rail-visible .reading-rail {
    transform: translateY(0);
  }

  .reading-rail-shell {
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }

  .reading-rail-inner {
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 52px;
  }

  .reading-identity {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 6px 9px;
  }

  .reading-identity span {
    display: none;
  }

  .reading-identity b,
  .reading-identity small {
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
  }

  .reading-identity b {
    font-size: 14px;
  }

  .reading-tabs {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding: 5px 6px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .reading-tabs::-webkit-scrollbar {
    display: none;
  }

  .reading-tabs button {
    flex: 0 0 48px;
    min-height: 42px;
    padding: 0 3px;
    font-size: 10px;
    scroll-snap-align: center;
  }

  body.reading-rail-visible main {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
}

/* v2.59 - motion accessibility */
@media (prefers-reduced-motion: no-preference) {
  [data-symbol].symbol-focus-pulse:not(tr) {
    animation: kzg-symbol-focus-pulse 760ms var(--kzg-ease) both;
  }

  @keyframes kzg-symbol-focus-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 34%, transparent); }
    58% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 12%, transparent), 0 9px 22px color-mix(in srgb, var(--ink) 12%, transparent); }
    100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent), 0 7px 18px color-mix(in srgb, var(--ink) 10%, transparent); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-rail,
  .reading-progress i,
  .reading-tabs button,
  [data-symbol] {
    transition: none !important;
    animation: none !important;
  }
}

/* v2.60 - scroll target and boundary convergence */
@media (min-width: 761px) {
  :is(
    #overviewSector,
    #reportSector,
    #premiumPreview,
    #historySectorIntro,
    .heatmap-panel,
    .rotation-panel
  ) {
    scroll-margin-top: 56px;
  }
}

@media (max-width: 760px) {
  :is(
    #overviewSector,
    #reportSector,
    #premiumPreview,
    #historySectorIntro,
    .heatmap-panel,
    .rotation-panel
  ) {
    scroll-margin-top: 12px;
  }
}

/* v2.70 cascade convergence: the liquid rail remains authoritative after the inherited v2.53-v2.60 block. */
.reading-rail-shell {
  border-color: var(--kzg-liquid-line-low);
  background: var(--kzg-liquid-bg);
  box-shadow: var(--kzg-liquid-shadow-compact);
  -webkit-backdrop-filter: var(--kzg-liquid-blur);
  backdrop-filter: var(--kzg-liquid-blur);
}

.reading-progress {
  height: 3px;
  background: color-mix(in srgb, var(--line) 56%, transparent);
}

.reading-tabs button {
  min-height: 36px;
  border-radius: 6px;
}

.reading-tabs button.active {
  border-color: color-mix(in srgb, var(--gold) 44%, var(--kzg-liquid-line));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ink) 14%, transparent), inset 0 1px 0 color-mix(in srgb, white 18%, transparent);
  transform: translateY(-1px);
}

body[data-theme="dark"] .reading-rail-shell {
  border-color: var(--kzg-liquid-line-low);
  background: var(--kzg-liquid-bg);
  box-shadow: var(--kzg-liquid-shadow-compact);
}

@media (max-width: 760px) {
  .reading-rail {
    top: auto;
    bottom: 0;
    padding: 0 8px calc(7px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }

  .reading-rail-shell {
    width: 100%;
    overflow: visible;
    padding-bottom: 0;
    border: 1px solid var(--kzg-liquid-line-low);
    border-radius: 8px;
  }

  .reading-progress {
    border-radius: 8px 8px 0 0;
  }

  .reading-tabs button.active {
    transform: translateY(-2px);
  }

  body.reading-rail-visible main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* v2.81 - trend windows change without dropping the selected trading-day anchor. */
.trend-chart {
  position: relative;
}

.trend-panel .range-tabs button {
  transition: color 150ms var(--kzg-spring), border-color 150ms var(--kzg-spring), background-color 150ms var(--kzg-spring), box-shadow 150ms var(--kzg-spring), transform 150ms var(--kzg-spring);
}

.trend-panel .range-tabs button[aria-pressed="true"] {
  transform: translateY(-1px);
}

.trend-cockpit-right > .trend-plot {
  grid-row: span 3;
  position: relative;
  min-width: 0;
  isolation: isolate;
  touch-action: pan-y;
}

.trend-plot > .trend-main-svg,
.trend-plot > .trend-range-ghost {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
  transform-origin: center bottom;
}

.trend-plot > .trend-main-svg {
  position: relative;
  z-index: 1;
  transition: opacity 210ms var(--kzg-spring), transform 240ms var(--kzg-spring), border-color 180ms ease, box-shadow 180ms ease;
}

.trend-range-changing .trend-main-svg {
  opacity: 0.56;
  transform: scaleY(0.985);
}

.trend-range-ghost {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  animation: kzg-trend-range-out 340ms var(--kzg-spring) both;
}

@keyframes kzg-trend-range-out {
  from { opacity: 0.54; transform: scaleY(1); }
  to { opacity: 0; transform: scaleY(1.018); }
}

/* v2.82 - financial tooltip hierarchy for value, comparison, and source depth. */
.trend-tooltip {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: var(--trend-tooltip-x, 50%);
  display: grid;
  gap: 7px;
  width: min(248px, calc(100% - 20px));
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--kzg-liquid-line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--ink) 17%, transparent), inset 0 1px 0 color-mix(in srgb, white 66%, transparent);
  opacity: 1;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  backdrop-filter: blur(20px) saturate(1.18);
  pointer-events: none;
  transition: left 90ms linear, opacity 120ms ease, transform 150ms var(--kzg-spring);
}

.trend-tooltip[hidden],
.trend-crosshair[hidden] {
  display: none;
}

.trend-tooltip.edge-start {
  right: auto;
  left: 10px;
  transform: none;
}

.trend-tooltip.edge-end {
  right: 10px;
  left: auto;
  transform: none;
}

.trend-tooltip-head,
.trend-tooltip-head > span,
.trend-tooltip-compare,
.trend-tooltip-compare > span,
.trend-tooltip-metrics,
.trend-tooltip-metrics > div {
  min-width: 0;
}

.trend-tooltip-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
}

.trend-tooltip-head > span {
  display: grid;
  gap: 2px;
}

.trend-tooltip-head i,
.trend-tooltip-head small,
.trend-tooltip-compare i,
.trend-tooltip-metrics dt,
.trend-tooltip-source {
  color: var(--muted);
  font-family: var(--kzg-font-ui);
  font-style: normal;
}

.trend-tooltip-head i {
  color: var(--ink);
  font-size: 11px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.trend-tooltip-head small {
  font-size: 8px;
  font-weight: 760;
}

.trend-tooltip-head strong {
  color: var(--ink);
  font-family: var(--kzg-font-display);
  font-size: 22px;
  line-height: 0.96;
  font-variant-numeric: tabular-nums lining-nums;
}

.trend-tooltip-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.trend-tooltip-compare > span {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
}

.trend-tooltip-compare > span.hot {
  border-left: 2px solid var(--risk);
}

.trend-tooltip-compare > span.cool {
  border-left: 2px solid var(--blue);
}

.trend-tooltip-compare i,
.trend-tooltip-metrics dt {
  overflow: hidden;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-tooltip-compare b,
.trend-tooltip-metrics dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--kzg-font-ui);
  font-size: 11px;
  font-weight: 830;
  font-variant-numeric: tabular-nums;
}

.trend-tooltip-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding-top: 2px;
}

.trend-tooltip-metrics > div {
  display: grid;
  gap: 2px;
  padding-right: 7px;
  border-right: 1px solid var(--line);
}

.trend-tooltip-metrics > div + div {
  padding-left: 7px;
}

.trend-tooltip-metrics > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.trend-tooltip-source {
  overflow: hidden;
  padding-top: 2px;
  border-top: 1px solid var(--line);
  font-size: 8px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-crosshair {
  pointer-events: none;
}

.trend-crosshair > line {
  stroke: color-mix(in srgb, var(--gold) 76%, var(--ink));
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gold) 26%, transparent));
}

.trend-crosshair > circle {
  fill: var(--surface);
  stroke-width: 2.6;
  vector-effect: non-scaling-stroke;
}

.trend-crosshair > circle.volume { stroke: var(--blue); }
.trend-crosshair > circle.premium { stroke: var(--gold); }
.trend-crosshair > circle.cp { stroke: #148355; }

/* v2.83 - roving keyboard focus for trend sessions and intraday buckets. */
.trend-point {
  outline: none;
}

.trend-point-dot {
  fill: var(--surface);
  stroke: var(--blue);
  stroke-width: 1.6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, r 150ms var(--kzg-spring), stroke-width 150ms var(--kzg-spring);
}

.trend-point.trend-point-active .trend-point-dot,
.trend-point:focus-visible .trend-point-dot {
  opacity: 1;
}

.trend-point:focus-visible .trend-point-dot {
  r: 6px;
  stroke: var(--gold);
  stroke-width: 3px;
}

.trend-point:focus-visible .trend-hit {
  stroke: color-mix(in srgb, var(--gold) 52%, transparent);
}

.analysis-intraday-band .bar[role="button"] {
  outline: none;
}

.analysis-intraday-band .bar[role="button"]:focus-visible .bar-track {
  outline: 2px solid color-mix(in srgb, var(--gold) 76%, white 8%);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 13%, transparent);
}

/* v2.84 - horizontal touch scrub yields to normal vertical page scrolling. */
.trend-plot.trend-touch-scrubbing {
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}

.trend-plot.trend-touch-scrubbing .trend-main-svg {
  border-color: color-mix(in srgb, var(--gold) 48%, var(--line-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 10%, transparent), 0 10px 26px color-mix(in srgb, var(--ink) 9%, transparent);
}

body[data-theme="dark"] .trend-plot > .trend-main-svg,
body[data-theme="dark"] .trend-plot > .trend-range-ghost {
  border-color: #33404a;
  background: #10151a;
}

body[data-theme="dark"] .trend-main-svg > polygon {
  opacity: 0.72;
}

body[data-theme="dark"] .trend-main-svg > line {
  stroke: #7f9ab3;
  opacity: 0.46;
}

body[data-theme="dark"] .trend-main-svg > polyline:nth-of-type(1) { stroke: #74a9d8; }
body[data-theme="dark"] .trend-main-svg > polyline:nth-of-type(2) { stroke: #e2b85d; opacity: 0.95; }
body[data-theme="dark"] .trend-main-svg > polyline:nth-of-type(3) { stroke: #63c696; opacity: 0.9; }
body[data-theme="dark"] .trend-main-svg > text,
body[data-theme="dark"] .trend-main-svg .trend-marker text { fill: #b9c3ca; }

body[data-theme="dark"] .trend-tooltip {
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line-strong));
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 1080px) {
  .trend-cockpit-right > .trend-plot {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .trend-plot > .trend-main-svg,
  .trend-plot > .trend-range-ghost {
    min-height: 226px;
    padding: 6px;
  }

  .trend-tooltip {
    top: 8px;
    gap: 5px;
    width: min(218px, calc(100% - 14px));
    padding: 8px;
  }

  .trend-tooltip.edge-start { left: 7px; }
  .trend-tooltip.edge-end { right: 7px; }

  .trend-tooltip-head strong {
    font-size: 18px;
  }

  .trend-tooltip-compare > span {
    padding: 5px;
  }

  .trend-tooltip-metrics > div {
    padding-right: 4px;
  }

  .trend-tooltip-metrics > div + div {
    padding-left: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trend-panel .range-tabs button,
  .trend-main-svg,
  .trend-range-ghost,
  .trend-tooltip,
  .trend-point-dot {
    transition: none !important;
    animation: none !important;
  }

  .trend-panel .range-tabs button,
  .trend-main-svg,
  .trend-range-ghost,
  .trend-point-dot {
    transform: none !important;
  }

  .trend-tooltip {
    transform: translateX(-50%) !important;
  }

  .trend-tooltip.edge-start,
  .trend-tooltip.edge-end {
    transform: none !important;
  }
}

/* v2.85-v2.88 - linked symbol state, static motion feedback, export isolation, and compact inspector. */
.momentum-panel .symbol-inspector {
  grid-column: 1 / -1;
  min-width: 0;
}

.symbol-inspector-shell {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(0, 2.15fr) minmax(150px, 0.62fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 7%, transparent), inset 0 1px 0 color-mix(in srgb, white 52%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
}

.symbol-inspector-shell.hot { border-left: 3px solid var(--red); }
.symbol-inspector-shell.cool { border-left: 3px solid var(--blue); }
.symbol-inspector-shell.flat { border-left: 3px solid var(--gold); }

.symbol-inspector-identity,
.symbol-inspector-source {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 11px 13px;
}

.symbol-inspector-identity {
  border-right: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
}

.symbol-inspector-identity span,
.symbol-inspector-source span,
.symbol-inspector-metrics i,
.symbol-inspector-metrics small,
.symbol-inspector-source small {
  color: var(--muted);
  font: 760 10px/1.25 var(--kzg-font-ui);
  font-style: normal;
}

.symbol-inspector-identity strong {
  margin-top: 3px;
  font: 400 27px/1 var(--kzg-font-display);
  font-variant-numeric: tabular-nums;
}

.symbol-inspector-identity small,
.symbol-inspector-source small {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symbol-inspector-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.symbol-inspector-metrics > span {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.symbol-inspector-metrics b,
.symbol-inspector-source b {
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font: 760 16px/1.1 var(--kzg-font-ui);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symbol-inspector-metrics .hot b { color: var(--red); }
.symbol-inspector-metrics .cool b { color: var(--blue); }

.symbol-inspector-source {
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
}

body[data-theme="dark"] .symbol-inspector-shell {
  border-color: color-mix(in srgb, var(--gold) 26%, var(--line));
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .symbol-inspector-source {
  background: color-mix(in srgb, var(--surface-soft) 82%, transparent);
}

[data-symbol].symbol-focus-static:not(tr) {
  outline: 2px solid color-mix(in srgb, var(--gold) 76%, white 6%);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--gold) 9%, var(--surface)) !important;
}

.kzg-png-capturing :is(.market-tooltip, .trend-tooltip, .reading-rail) {
  visibility: hidden !important;
  opacity: 0 !important;
}

.export-clone [data-ui-ephemeral] {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  .symbol-inspector-shell {
    animation: kzg-symbol-inspector-arrive 220ms var(--kzg-ease) both;
  }

  @keyframes kzg-symbol-inspector-arrive {
    from { opacity: 0.72; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 760px) {
  .symbol-inspector-shell {
    grid-template-columns: 1fr;
  }

  .symbol-inspector-identity {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  }

  .symbol-inspector-identity strong {
    margin-top: 0;
    font-size: 24px;
  }

  .symbol-inspector-identity small {
    margin-top: 0;
    text-align: right;
  }

  .symbol-inspector-metrics > span {
    padding: 9px 8px;
  }

  .symbol-inspector-metrics b {
    font-size: 14px;
  }

  .symbol-inspector-source {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    padding-block: 9px;
  }

  .symbol-inspector-source b {
    margin-top: 0;
    font-size: 13px;
  }

  .symbol-inspector-source small {
    margin-top: 0;
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .symbol-inspector-shell,
  [data-symbol].symbol-focus-static:not(tr) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* v2.89-v2.92 - focus path, tooltip triage, persistent symbol intent, and search recovery. */
.momentum-panel .symbol-focus-path {
  grid-column: 1 / -1;
  min-width: 0;
}

.symbol-focus-path-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
}

.symbol-focus-path-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 11px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background-color 160ms var(--kzg-ease), box-shadow 160ms var(--kzg-ease), color 160ms var(--kzg-ease);
}

.symbol-focus-path-step:hover {
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}

.symbol-focus-path-step.active {
  background: var(--surface);
  box-shadow: inset 0 -3px 0 var(--blue), 0 7px 20px color-mix(in srgb, var(--ink) 6%, transparent);
}

.symbol-focus-path-step i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line));
  border-radius: 50%;
  color: var(--blue);
  font: 760 10px/1 var(--kzg-font-ui);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.symbol-focus-path-step.active i {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.symbol-focus-path-step span {
  display: grid;
  min-width: 0;
}

.symbol-focus-path-step b,
.symbol-focus-path-step small {
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symbol-focus-path-step b {
  font: 760 12px/1.2 var(--kzg-font-ui);
}

.symbol-focus-path-step small {
  margin-top: 3px;
  color: var(--muted);
  font: 650 10px/1.2 var(--kzg-font-ui);
  font-variant-numeric: tabular-nums;
}

.symbol-focus-path-shell > em {
  position: relative;
  min-width: 0;
}

.symbol-focus-path-shell > em::before,
.symbol-focus-path-shell > em::after {
  content: "";
  position: absolute;
  top: 50%;
}

.symbol-focus-path-shell > em::before {
  left: 2px;
  width: 11px;
  height: 1px;
  background: color-mix(in srgb, var(--blue) 40%, var(--line));
}

.symbol-focus-path-shell > em::after {
  right: 2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid color-mix(in srgb, var(--blue) 58%, var(--line));
  border-right: 1px solid color-mix(in srgb, var(--blue) 58%, var(--line));
  transform: translateY(-2px) rotate(45deg);
}

.symbol-path-target-focus {
  outline: 2px solid color-mix(in srgb, var(--gold) 72%, white 8%);
  outline-offset: 3px;
}

.symbol-search-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: -1px 0 10px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
}

.symbol-search-status[hidden] {
  display: none !important;
}

.symbol-search-status[data-state="match"] {
  border-left: 3px solid var(--blue);
}

.symbol-search-status[data-state="empty"] {
  grid-template-columns: minmax(0, 1fr) auto auto;
  border-left: 3px solid var(--gold);
}

.symbol-search-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 6px;
  min-width: 0;
}

.symbol-search-copy span {
  color: var(--muted);
  font: 720 9px/1.2 var(--kzg-font-ui);
  text-transform: uppercase;
}

.symbol-search-copy b {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 780 11px/1.2 var(--kzg-font-ui);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symbol-search-copy small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--muted);
  font: 620 9px/1.25 var(--kzg-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.symbol-search-suggestions {
  display: flex;
  gap: 4px;
  min-width: 0;
}

.symbol-search-suggestions button,
.symbol-search-clear {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: 760 10px/1 var(--kzg-font-ui);
  cursor: pointer;
}

.symbol-search-suggestions button:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.symbol-search-clear {
  width: 34px;
  padding: 0;
  color: var(--muted);
  font-size: 17px;
  font-weight: 500;
}

.symbol-search-clear:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.market-tooltip {
  width: 286px;
  padding: 11px;
  border-radius: 6px;
}

.market-tooltip .tip-head {
  align-items: center;
  gap: 9px;
}

.market-tooltip .tip-head > span {
  display: grid;
  min-width: 0;
  color: var(--ink);
}

.market-tooltip .tip-head strong {
  font: 400 23px/1 var(--kzg-font-display);
  letter-spacing: 0;
}

.market-tooltip .tip-head small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font: 650 9px/1.2 var(--kzg-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-tooltip .tip-head > b {
  flex: 0 0 auto;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font: 760 9px/1 var(--kzg-font-ui);
}

.market-tooltip .tip-head > b.hot { border-color: color-mix(in srgb, var(--red) 44%, var(--line)); color: var(--red); }
.market-tooltip .tip-head > b.cool { border-color: color-mix(in srgb, var(--blue) 44%, var(--line)); color: var(--blue); }
.market-tooltip .tip-head > b.flat { border-color: color-mix(in srgb, var(--gold) 44%, var(--line)); color: var(--gold); }

.market-tooltip .tip-chart {
  margin-top: 7px;
  padding: 5px 0 4px;
}

.market-tooltip .tip-chart svg {
  height: 46px;
  margin-top: 2px;
}

.tip-primary,
.tip-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

.tip-primary {
  margin-top: 7px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 56%, var(--surface));
}

.tip-primary > span,
.tip-context > span {
  display: grid;
  min-width: 0;
  padding: 7px 6px;
}

.tip-primary > span + span,
.tip-context > span + span {
  border-left: 1px solid var(--line);
}

.tip-primary i,
.tip-context i {
  overflow: hidden;
  color: var(--muted);
  font: 680 8px/1.2 var(--kzg-font-ui);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tip-primary b,
.tip-context b {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font: 760 11px/1.15 var(--kzg-font-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tip-context {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.tip-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  color: var(--muted);
  font: 650 9px/1.2 var(--kzg-font-ui);
}

.tip-action b {
  color: var(--blue);
  font-size: 9px;
}

body[data-theme="dark"] .symbol-focus-path-shell,
body[data-theme="dark"] .symbol-search-status {
  border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
}

body[data-theme="dark"] .symbol-focus-path-step.active {
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  box-shadow: inset 0 -3px 0 var(--blue);
}

body[data-theme="dark"] .symbol-search-suggestions button,
body[data-theme="dark"] .symbol-search-clear,
body[data-theme="dark"] .tip-primary {
  background: var(--surface);
}

body[data-theme="dark"] .tip-primary,
body[data-theme="dark"] .tip-context {
  border-color: var(--line);
}

.kzg-png-capturing :is(.market-tooltip, .trend-tooltip, .reading-rail, .symbol-focus-path, .symbol-search-status) {
  visibility: hidden !important;
  opacity: 0 !important;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .symbol-focus-path-step:hover {
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--blue) 56%, transparent);
  }

  .symbol-focus-path-step.active:hover {
    box-shadow: inset 0 -3px 0 var(--blue), 0 7px 20px color-mix(in srgb, var(--ink) 6%, transparent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .search-results-enter {
    animation: kzg-search-results-enter 240ms var(--kzg-ease) both;
  }

  .symbol-path-target-focus {
    animation: kzg-symbol-path-focus 620ms var(--kzg-ease) both;
  }

  @keyframes kzg-search-results-enter {
    from { opacity: 0.72; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes kzg-symbol-path-focus {
    0% { outline-color: transparent; }
    100% { outline-color: color-mix(in srgb, var(--gold) 72%, white 8%); }
  }
}

@media (max-width: 760px) {
  .symbol-focus-path-shell {
    grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) 10px minmax(0, 1fr);
  }

  .symbol-focus-path-step {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 5px;
    min-height: 58px;
    padding: 7px;
  }

  .symbol-focus-path-step i {
    width: 22px;
    height: 22px;
    font-size: 8px;
  }

  .symbol-focus-path-step b {
    font-size: 10px;
  }

  .symbol-focus-path-step small {
    font-size: 8px;
  }

  .symbol-search-status[data-state="empty"] {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .symbol-search-status[data-state="empty"] .symbol-search-suggestions {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .symbol-search-status[data-state="empty"] .symbol-search-clear {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 420px) {
  .symbol-focus-path-shell {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .symbol-focus-path-shell > em {
    display: none;
  }

  .symbol-focus-path-step {
    min-height: 54px;
    padding: 6px;
  }

  .symbol-focus-path-step small {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .symbol-focus-path-step,
  .symbol-path-target-focus,
  .search-results-enter,
  .symbol-search-status,
  #stockTable {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* v2.93-v2.96 - interaction states, touch density, and tablet continuity. */
@media (pointer: coarse) {
  [data-symbol] {
    touch-action: manipulation;
  }

  #stockTable tbody tr[data-symbol-row],
  .rotation-row,
  .momentum-row,
  .realtime-bias-list button,
  .side-leader-list button,
  .side-extreme-list button,
  .live-event-queue button,
  .stock-sort-tabs button {
    min-height: 44px;
  }
}

@media (max-width: 760px) {
  [data-symbol] {
    touch-action: manipulation;
  }

  #stockTable tbody tr[data-symbol-row],
  .rotation-row,
  .momentum-row,
  .realtime-bias-list button,
  .side-leader-list button,
  .side-extreme-list button,
  .live-event-queue button,
  .stock-sort-tabs button {
    min-height: 44px;
  }

  #stockTable tbody tr[data-symbol-row] {
    height: 44px;
  }

  #stockTable tbody tr[data-symbol-row] td {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .premium-preview,
  .realtime-sector,
  .realtime-topline,
  .realtime-transition-rail,
  .realtime-router,
  .realtime-layout,
  .realtime-brief,
  .realtime-filter-console,
  .realtime-terminal,
  .realtime-side-lists,
  .realtime-history-handoff,
  .history-sector-intro,
  .analysis-grid,
  .panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .premium-preview,
  .realtime-router,
  .realtime-layout,
  .realtime-terminal,
  .realtime-side-lists {
    overflow: hidden;
  }

  .realtime-layout,
  .realtime-router {
    grid-template-columns: minmax(0, 1fr);
  }

  .router-gates {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .router-tape {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .realtime-side-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .terminal-table-head,
  .terminal-table-body button {
    grid-template-columns: 48px 58px minmax(120px, 1fr) 58px 72px 68px;
    gap: 6px;
  }

  .analysis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .momentum-panel {
    grid-column: 1 / -1;
  }
}

/* v2.97-v3.00 - ultrawide use, phone dock continuity, type rhythm, and elevation. */
:root {
  --kzg-content-wide: 1920px;
  --kzg-font-display: "New York", "Iowan Old Style", "Songti SC", Georgia, "Times New Roman", serif;
  --kzg-font-ui: Inter, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kzg-surface-base: #edf0f2;
  --kzg-surface-1: #ffffff;
  --kzg-surface-2: #f7f8f9;
  --kzg-surface-3: #eef2f4;
  --kzg-edge-soft: rgba(35, 47, 57, 0.14);
  --kzg-edge-strong: rgba(35, 47, 57, 0.24);
  --kzg-elevation-1: 0 1px 2px rgba(18, 26, 32, 0.035), 0 9px 24px rgba(18, 26, 32, 0.045);
  --kzg-elevation-2: 0 2px 5px rgba(18, 26, 32, 0.055), 0 18px 42px rgba(18, 26, 32, 0.07);
  --kzg-elevation-overlay: 0 12px 34px rgba(18, 26, 32, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body[data-theme="dark"] {
  --kzg-surface-base: #0f1011;
  --kzg-surface-1: #191a1c;
  --kzg-surface-2: #141517;
  --kzg-surface-3: #202225;
  --kzg-edge-soft: rgba(235, 237, 239, 0.11);
  --kzg-edge-strong: rgba(235, 237, 239, 0.19);
  --kzg-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.2);
  --kzg-elevation-2: 0 2px 5px rgba(0, 0, 0, 0.38), 0 20px 46px rgba(0, 0, 0, 0.28);
  --kzg-elevation-overlay: 0 14px 38px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background: var(--kzg-surface-base);
}

html:lang(zh) {
  font-family: var(--kzg-font-ui);
}

html:lang(en) {
  font-family: var(--kzg-font-ui);
}

body {
  background-color: var(--kzg-surface-base);
  font-family: var(--kzg-font-ui);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.brand h1,
.dateplate b,
.session-copy > strong,
.sector-spine-copy b,
.realtime-heading h2,
.router-copy b,
.history-intro-copy h2,
.history-story-lede b,
.panel h2,
.section-head h2 {
  font-family: var(--kzg-font-display);
  font-kerning: normal;
  font-optical-sizing: auto;
}

html:lang(en) .session-copy > strong {
  font-size: 27px;
  font-weight: 760;
  line-height: 1.14;
  text-wrap: balance;
}

body[data-lang="en"] #totalVol {
  font-size: clamp(20px, 1.55vw, 25px);
}

html:lang(en) .sector-spine-copy b {
  overflow-wrap: anywhere;
  font-size: clamp(22px, 1.65vw, 26px);
  line-height: 1.06;
  white-space: normal;
}

html:lang(en) .realtime-heading h2 {
  line-height: 1.02;
}

:where(
  .metric-card strong,
  .metric-card b,
  .session-copy b,
  .pulse-card b,
  .trend-stat strong,
  .trend-readout b,
  .rotation-row b,
  .momentum-row b,
  .realtime-stat b,
  .terminal-table,
  .stock-table,
  table,
  time
) {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

:where(.metric-card, .pulse-card, .trend-stat, .realtime-stat, td, th) :where(strong, b, span, small),
:where(td, th) {
  vertical-align: baseline;
}

.timeboard,
.metric-rail,
.session-tape,
.sector-spine,
.report-stage,
.side-rail,
.premium-preview,
.history-sector-intro,
.panel {
  border-color: var(--kzg-edge-soft);
  background-color: var(--kzg-surface-1);
  box-shadow: var(--kzg-elevation-1);
}

.timeboard,
.premium-preview,
.history-sector-intro {
  border-color: var(--kzg-edge-strong);
  box-shadow: var(--kzg-elevation-2);
}

:where(
  .metric-card,
  .pulse-card,
  .access-copy,
  .realtime-brief,
  .realtime-filter-console,
  .realtime-terminal,
  .symbol-focus-path-shell,
  .symbol-search-status
) {
  background-color: var(--kzg-surface-2);
}

body[data-theme="dark"] {
  --paper: var(--kzg-surface-base);
  --surface: var(--kzg-surface-1);
  --surface-soft: var(--kzg-surface-2);
  --panel: var(--kzg-surface-1);
  --line: rgba(235, 237, 239, 0.11);
  --line-strong: rgba(235, 237, 239, 0.19);
}

body[data-theme="dark"] .app-shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 320px),
    var(--kzg-surface-base);
}

body[data-theme="dark"] :where(.metric-rail, .session-tape, .sector-spine, .report-stage, .side-rail, .panel) {
  background-color: var(--kzg-surface-1);
}

body[data-theme="dark"] :where(.timeboard, .premium-preview, .history-sector-intro) {
  background-color: color-mix(in srgb, var(--kzg-surface-1) 82%, var(--kzg-surface-3));
}

body[data-theme="dark"] :is(
  .timeboard,
  .metric-rail,
  .session-tape,
  .sector-spine,
  .report-stage,
  .side-rail,
  .premium-preview,
  .history-sector-intro,
  .panel,
  .realtime-side-lists
) {
  border-color: var(--kzg-edge-soft);
  background: var(--kzg-surface-1);
}

body[data-theme="dark"] :is(.timeboard, .premium-preview, .history-sector-intro) {
  border-color: var(--kzg-edge-strong);
  background: color-mix(in srgb, var(--kzg-surface-1) 82%, var(--kzg-surface-3));
}

body[data-theme="dark"] :is(
  .metric,
  .session-copy,
  .session-chip-grid > *,
  .session-rank-strip > *,
  .session-lane-hedge-cells > *,
  .sector-spine-copy,
  .sector-spine-buttons button,
  .history-intro-copy,
  .history-intro-path button,
  .history-story-card,
  .filter-console-grid button,
  .realtime-router,
  .realtime-terminal,
  .side-intel,
  .trend-summary,
  .trend-extremes > *,
  .flow-stack > *
) {
  border-color: var(--kzg-edge-soft);
  background: var(--kzg-surface-2);
}

body[data-theme="dark"] :is(.session-rank-lead, .session-lane-hedge-lead, .stock-sort-tabs) {
  background: var(--kzg-surface-3);
}

.market-tooltip,
.trend-tooltip,
.date-preview-card,
.reading-rail-shell {
  box-shadow: var(--kzg-elevation-overlay);
}

@media (min-width: 1900px) {
  :root {
    --kzg-content-max: var(--kzg-content-wide);
    --kzg-section-gap: 20px;
  }

  main {
    width: calc(100% - 96px);
    max-width: var(--kzg-content-wide);
    padding-right: 24px;
    padding-left: 24px;
  }

  .topbar {
    padding-right: max(48px, calc((100vw - var(--kzg-content-wide)) / 2));
    padding-left: max(48px, calc((100vw - var(--kzg-content-wide)) / 2));
  }

  .workbench {
    grid-template-columns: minmax(0, 1240px) minmax(520px, 1fr);
  }

  .side-rail {
    min-width: 0;
  }

  .side-digest,
  .side-section,
  .stock-table-shell {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .reading-rail {
    right: 0;
    bottom: 0;
    left: 0;
    max-height: calc(100dvh - 8px);
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    pointer-events: none;
  }

  body.reading-rail-visible .reading-rail {
    pointer-events: auto;
  }

  .reading-rail-shell {
    width: min(100%, 560px);
    min-height: 54px;
    margin: 0 auto;
    border: 1px solid var(--kzg-edge-strong);
    border-radius: 7px;
    background: color-mix(in srgb, var(--kzg-surface-1) 84%, transparent);
    box-shadow: var(--kzg-elevation-overlay);
    backdrop-filter: blur(22px) saturate(1.18);
    -webkit-backdrop-filter: blur(22px) saturate(1.18);
  }

  .reading-rail-inner {
    grid-template-columns: 74px minmax(0, 1fr);
    width: 100%;
  }

  .reading-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    overflow: visible;
    padding: 5px;
    scroll-snap-type: none;
  }

  .reading-tabs button {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding-right: 2px;
    padding-left: 2px;
  }

  .reading-tabs button :where(span, b, small) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.reading-rail-visible main {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  @supports (height: 100dvh) {
    .reading-rail {
      max-height: calc(100dvh - max(8px, env(safe-area-inset-top, 0px)));
    }
  }

  html:lang(en) .session-copy > strong {
    font-size: 22px;
    line-height: 1.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reading-rail,
  .reading-rail-shell,
  .timeboard,
  .premium-preview,
  .history-sector-intro,
  .panel {
    transition: none !important;
  }
}

/* v3.01-v3.09 - contrast, dense rhythm, stable states, responsive acceptance. */
:root {
  --kzg-status-info: #35668d;
  --kzg-status-success: #0e7a59;
  --kzg-status-error: #bd5146;
  --kzg-status-surface: rgba(255, 255, 255, 0.94);
  --kzg-status-ink: #172027;
  scrollbar-gutter: stable;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f5f7f8;
  --ink-soft: #d7dde1;
  --muted: #aeb7bf;
  --gold: #e0ad58;
  --green: #5bc49a;
  --red: #ef8175;
  --blue: #82afd3;
  --kzg-control-ring: #efbd67;
  --kzg-status-info: #82afd3;
  --kzg-status-success: #5bc49a;
  --kzg-status-error: #ef8175;
  --kzg-status-surface: rgba(25, 26, 28, 0.96);
  --kzg-status-ink: #f5f7f8;
}

body[data-theme="dark"] :is(.tone-high, .metric .tone-high) {
  color: var(--green);
}

body[data-theme="dark"] :is(.tone-low, .metric .tone-low) {
  color: var(--red);
}

body[data-theme="dark"] :is(
  .range-tabs button.active,
  .stock-sort-tabs button.active,
  .date-picker-modes button.active,
  .history-intro-path button.active,
  .history-story-card.active,
  .reading-tabs button.active,
  [aria-pressed="true"]
) {
  border-color: color-mix(in srgb, var(--gold) 74%, var(--line-strong));
  color: #fff8e9;
}

:where(button, input, select):disabled,
:where(button, input, select)[aria-disabled="true"] {
  cursor: not-allowed;
}

body[data-theme="dark"] :where(button, input, select):disabled,
body[data-theme="dark"] :where(button, input, select)[aria-disabled="true"] {
  border-color: #34404a;
  background-color: #14191d;
  color: #89949d;
  opacity: 1;
  box-shadow: none;
}

/* One continuous analytical rhythm: major bands hold hierarchy; inner cells stay quiet. */
.metric-rail,
.session-tape,
.sector-spine,
.workbench,
.premium-preview,
.history-sector-intro,
.analysis-grid {
  margin-block-start: 14px;
}

.metric,
.session-chip-grid > *,
.session-rank-strip > *,
.session-lane-hedge-cells > *,
.sector-spine-buttons button,
.history-intro-stats > *,
.history-intro-path > *,
.history-story-strip > *,
.analysis-grid .panel :is(
  .trend-lens span,
  .trend-extremes button,
  .trend-radar button,
  .signal-metrics > *,
  .regime-stats > *,
  .heatmap-summary > *,
  .heat-rhythm-card,
  .bucket-profile > *,
  .rotation-map-stats > *,
  .momentum-summary > *,
  .focus-metrics > *
) {
  box-shadow: none;
}

.metric-rail,
.session-readout,
.analysis-grid .panel {
  isolation: isolate;
}

.analysis-grid .panel {
  padding: 16px;
}

.analysis-grid .section-head {
  margin-bottom: 11px;
  padding-bottom: 9px;
}

.analysis-grid .section-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 58%, transparent), transparent 38%);
  pointer-events: none;
}

.analysis-grid .section-head {
  position: relative;
}

.section-head h2,
.timeboard-copy h2 {
  letter-spacing: 0;
  text-wrap: balance;
}

.section-head p,
.timeboard-copy p {
  max-width: 68ch;
  line-height: 1.42;
}

.timeline-legend > span > b {
  color: inherit;
  font: inherit;
}

/* Stable global feedback never consumes document flow or hides the last good session. */
.app-status {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(420px, calc(100vw - 36px));
  min-height: 48px;
  padding: 10px 11px 10px 13px;
  border: 1px solid var(--kzg-edge-strong);
  border-radius: 7px;
  background: var(--kzg-status-surface);
  color: var(--kzg-status-ink);
  box-shadow: var(--kzg-elevation-overlay);
  font: 700 12px/1.35 var(--kzg-font-ui);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}

.app-status[hidden],
.boot-failure[hidden] {
  display: none;
}

.app-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kzg-status-info);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kzg-status-info) 16%, transparent);
}

.app-status[data-tone="loading"] .app-status-indicator {
  animation: kzg-status-pulse 1s ease-in-out infinite alternate;
}

.app-status[data-tone="error"] {
  border-color: color-mix(in srgb, var(--kzg-status-error) 54%, var(--kzg-edge-strong));
}

.app-status[data-tone="error"] .app-status-indicator {
  background: var(--kzg-status-error);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kzg-status-error) 16%, transparent);
}

.app-status button,
.boot-failure button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--kzg-edge-strong);
  border-radius: 5px;
  background: var(--kzg-surface-1);
  color: var(--ink);
  font: 800 11px/1 var(--kzg-font-ui);
  cursor: pointer;
}

@keyframes kzg-status-pulse {
  from { transform: scale(0.82); opacity: 0.62; }
  to { transform: scale(1); opacity: 1; }
}

.boot-failure {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(560px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--kzg-edge-strong);
  border-radius: 8px;
  background: var(--kzg-status-surface);
  color: var(--kzg-status-ink);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
}

.boot-failure-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 5px;
  background: #11171c;
  color: #fff;
  font: 800 14px/1 var(--kzg-font-display);
}

.boot-failure strong {
  display: block;
  font: 800 19px/1.1 var(--kzg-font-display);
}

.boot-failure p {
  margin: 5px 0 0;
  color: var(--muted);
  font: 600 12px/1.4 var(--kzg-font-ui);
}

body.kzg-day-loading :is(.metric-rail, .workbench, .analysis-grid) {
  opacity: 0.78;
}

/* Frame-coalesced interactions only promote the surface that is actively moving. */
.kzg-pointer-lit {
  will-change: transform, box-shadow;
}

body:not(.kzg-day-loading) :is(.metric-rail, .workbench, .analysis-grid) {
  will-change: auto;
}

.app-shell {
  overflow: clip;
}

main {
  overflow: visible;
}

/* PNG stays a fixed light report, independent from theme, hover, status, and navigation. */
.kzg-png-capturing :is(.app-status, .boot-failure, .skip-link) {
  display: none !important;
}

.export-clone {
  color-scheme: light;
  contain: layout paint style;
}

.export-clone .kzg-sheet {
  width: 760px !important;
  min-width: 760px !important;
  max-width: 760px !important;
}

/* Full keyboard entry point and focus order. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 120;
  padding: 10px 13px;
  border: 2px solid var(--kzg-control-ring);
  border-radius: 5px;
  background: var(--kzg-surface-1);
  color: var(--ink);
  font: 800 12px/1 var(--kzg-font-ui);
  box-shadow: var(--kzg-elevation-overlay);
  transform: translateY(-160%);
  transition: transform 120ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

#appMain:focus {
  outline: none;
}

:where(button, input, select, a[href], [tabindex]):focus-visible {
  outline-width: 3px;
  outline-offset: 3px;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .topbar {
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 14px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .dateplate {
    display: none;
  }

  main {
    padding-right: 14px;
    padding-left: 14px;
  }

  .metric-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .metric {
    min-width: 0;
  }

  .metric strong {
    font-size: clamp(18px, 2.7vw, 24px);
  }

  .workbench,
  .history-sector-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-rail {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  :root {
    scrollbar-gutter: auto;
  }

  .metric-rail,
  .session-tape,
  .sector-spine,
  .workbench,
  .premium-preview,
  .history-sector-intro,
  .analysis-grid {
    margin-block-start: 9px;
  }

  .analysis-grid .panel {
    padding: 11px;
  }

  .app-status {
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    width: auto;
    min-height: 46px;
  }

  .boot-failure {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .boot-failure-mark {
    width: 42px;
    height: 42px;
  }

  .boot-failure button {
    grid-column: 1 / -1;
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-status-indicator,
  .skip-link,
  .kzg-pointer-lit {
    animation: none !important;
    transition: none !important;
    transform: none;
  }

  .skip-link:not(:focus) {
    clip-path: inset(50%);
  }
}

@media (forced-colors: active) {
  .app-status,
  .boot-failure,
  .skip-link,
  :where(button, input, select, a[href], [tabindex]):focus-visible {
    border-color: CanvasText;
    outline-color: Highlight;
  }
}

/* Keep the compact command header fully legible on narrow phones. */
@media (max-width: 420px) {
  .brand h1 {
    font-size: 20px;
  }

  .toolbar {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(0, 0.82fr)
      minmax(0, 0.72fr)
      minmax(0, 1.36fr);
  }
}