/* ============================================================================
   DESKSCALE — V2 PREVIEW COMPONENTS
   Everything the redesign adds, in one file so the preview can be reviewed
   (and later merged into site.css) without touching the shipped stylesheet.
   Tokens only: every colour, size and duration comes from tokens.css, so dark
   mode and the contrast overrides work with no extra rules.
   ========================================================================= */

/* ── Icons ──────────────────────────────────────────────────────────────────
   One line-icon set, drawn in the cockpit's own style (alertKinds.tsx). Ink,
   never a hue: colour on this site carries direction, and an icon is a noun. */
.ic { display: inline-block; width: 18px; height: 18px; flex: none;
      fill: none; stroke: currentColor; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px }
.ic-sm { width: 14px; height: 14px; vertical-align: -2px }
.ic-lg { width: 22px; height: 22px }
.ic-tile { display: inline-flex; align-items: center; justify-content: center;
           width: 36px; height: 36px; border: var(--ds-hair) solid var(--ds-rule-2);
           border-radius: var(--ds-r-1); color: var(--ds-ink) }
.ds-label .ic { margin-right: 6px; vertical-align: -4px; color: var(--ds-ink-2) }

/* ── Header: three actions ─────────────────────────────────────────────── */
.ds-nav-cta .ds-btn-sm { padding-inline: 12px }
@media (max-width: 520px) {
  .ds-nav-cta { gap: 6px }
  .ds-nav-cta .ds-btn-sm { padding-inline: 9px; font-size: .74rem }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero-v2 { display: grid; grid-template-columns: 1fr minmax(0, 560px);
           gap: var(--ds-s-64); align-items: center;
           padding-block: var(--ds-s-64) var(--ds-s-64) }
.hero-v2 h1 { font-size: var(--ds-t-hero-split) }
.hero-v2 .ds-lead { max-width: 44ch }
.hero-v2 .hero-no { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: var(--ds-s-24);
                    color: var(--ds-ink-2) }
.hero-v2 .hero-no span::before { content: '✕'; margin-right: 6px; color: var(--ds-ink-3) }
@media (max-width: 1024px) { .hero-v2 { grid-template-columns: 1fr; gap: var(--ds-s-48) } }

/* ── Regime panel — the hero object ────────────────────────────────────────
   A render of the cockpit's own two surfaces (Today's Market + Market
   Environment), filled from ONE recorded session. Never labelled LIVE. */
.rg { background: var(--ds-bg); outline: var(--ds-hair) solid var(--ds-rule-2) }
.rg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px;
           padding: 14px 20px; border-bottom: var(--ds-hair) solid var(--ds-rule) }
.rg-rec { color: var(--ds-ink-2); text-align: right }
.rg-top { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: end;
          padding: 20px 20px 16px }
.rg-k { color: var(--ds-ink-3); display: block; margin-bottom: 6px }
.rg-big { font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.5rem);
          letter-spacing: -.035em; line-height: 1 }
.rg-big .g { font-size: .55em; vertical-align: .32em; margin-right: 8px }
.rg-since { color: var(--ds-ink-2); text-align: right }
.rg-scale { grid-column: 1 / -1; margin-top: 10px }
.rg-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px }
.rg-bar i { display: block; height: 6px; background: var(--ds-bg-3) }
.rg-bar i.is-on { background: var(--ds-risk) }
.rg-bar i.is-on-up { background: var(--ds-up) }
.rg-ticks { display: flex; justify-content: space-between; margin-top: 7px; color: var(--ds-ink-3) }
.rg-back { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline;
           padding: 14px 20px; border-top: var(--ds-hair) solid var(--ds-rule);
           background: var(--ds-bg-2) }
.rg-back b { font-weight: 600; font-size: .95rem; color: var(--ds-ink) }
.rg-rows { display: grid; grid-template-columns: 1fr 1fr; margin: 0;
           border-top: var(--ds-hair) solid var(--ds-rule) }
.rg-row { display: grid; grid-template-columns: 18px 1fr; gap: 4px 10px; padding: 12px 20px;
          border-bottom: var(--ds-hair) solid var(--ds-rule) }
.rg-row:nth-child(odd) { border-right: var(--ds-hair) solid var(--ds-rule) }
.rg-row .ic { color: var(--ds-ink-2); margin-top: 1px }
.rg-row dt { font-size: var(--ds-t-small); color: var(--ds-ink-2) }
.rg-row dd { margin: 0; grid-column: 2; font-weight: 600; font-size: .95rem }
.rg-row dd .g { font-size: .72em; margin-right: 6px; vertical-align: .1em }
.rg-row dd small { display: block; font-weight: 400; font-size: .78rem; color: var(--ds-ink-2);
                   margin-top: 3px; line-height: 1.35 }
.rg-dis { padding: 12px 20px; border-bottom: var(--ds-hair) solid var(--ds-rule);
          font-size: .85rem; color: var(--ds-ink-2) }
.rg-dis b { color: var(--ds-ink); font-weight: 600 }
.rg-shift { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
            align-items: baseline; padding: 14px 20px }
.rg-shift strong { font-weight: 600 }
.rg-shift .ds-num { color: var(--ds-ink) }
.rg-head .ds-label { white-space: nowrap }
@media (max-width: 560px) {
  .rg-head, .rg-top, .rg-back, .rg-dis, .rg-shift, .tl { padding-inline: 14px }
  .rg-row { padding: 10px 12px; grid-template-columns: 14px 1fr; gap: 3px 8px }
  .rg-row .ic { width: 14px; height: 14px }
  .rg-row dt { font-size: .74rem }
  .rg-row dd { font-size: .86rem }
  .rg-row dd small { display: none }
  .rg-rec { font-size: .56rem }
  .rg-back { grid-template-columns: 1fr }
}

/* ── Problem: six tabs fold into one read ───────────────────────────────── */
.fold-lines { display: block; width: 100%; height: 64px }
.fold-lines path { fill: none; stroke: var(--ds-rule-2); stroke-width: 1;
                   vector-effect: non-scaling-stroke }
.fold-out { display: flex; justify-content: center; align-items: center; gap: 12px;
            margin-inline: auto; max-width: 420px; padding: 14px 20px;
            border: var(--ds-hair) solid var(--ds-blue); background: var(--ds-blue-wash) }
.fold-out img { height: 16px; width: auto }
.fold-out span { font-weight: 600 }
.fold-cap { text-align: center; margin: var(--ds-s-12) 0 var(--ds-s-48) }

/* ── Product story (home): four questions ───────────────────────────────── */
.story .ds-cell { display: flex; flex-direction: column; gap: var(--ds-s-12) }
.story-top { display: flex; align-items: center; justify-content: space-between }
.story h3 { font-family: var(--ds-font-display); font-weight: 600; font-size: 1.45rem;
            letter-spacing: -.02em; line-height: 1.15; margin: 4px 0 0 }
.story .mini { margin-top: auto; padding-top: var(--ds-s-16) }
.story-link { font-size: var(--ds-t-small); font-weight: 500; color: var(--ds-ink);
              text-decoration: none; border-bottom: var(--ds-hair) solid var(--ds-rule-2);
              align-self: flex-start; padding-bottom: 2px }
.story-link:hover { border-bottom-color: var(--ds-ink) }
.mini-box { border: var(--ds-hair) solid var(--ds-rule); background: var(--ds-bg-2);
            padding: 12px 14px; font-size: .85rem }
.mini-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: baseline;
            padding: 6px 0; border-bottom: var(--ds-hair) solid var(--ds-rule) }
.mini-row:last-child { border-bottom: 0 }
.mini-row .sym { font-family: var(--ds-font-mono); font-weight: 500 }
.mini-row .muted, .muted { color: var(--ds-ink-2) }

/* ── Desk Notes, six across ─────────────────────────────────────────────── */
.ds-notes-grid.ds-notes-6 { grid-template-columns: repeat(6, 1fr) }
.ds-notes-6 .ds-cell { padding: var(--ds-s-16) var(--ds-s-16) var(--ds-s-24);
                       gap: var(--ds-s-12) }
.ds-notes-6 .ds-note-name { font-size: .8rem }
@media (max-width: 1024px) { .ds-notes-grid.ds-notes-6 { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 560px)  { .ds-notes-grid.ds-notes-6 { grid-template-columns: repeat(2, 1fr) } }

/* ── How it works: icon strip ───────────────────────────────────────────── */
.steps .ds-cell { display: flex; flex-direction: column; gap: 10px }
.steps .step-h { display: flex; align-items: center; gap: 10px }
.steps .step-n { color: var(--ds-ink-3) }
@media (max-width: 1024px) { .steps.ds-g5 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px)  { .steps.ds-g5 { grid-template-columns: 1fr } }

/* ── Who ────────────────────────────────────────────────────────────────── */
.who .ds-cell { display: flex; flex-direction: column; gap: 10px }

/* ── Pricing with Buy ───────────────────────────────────────────────────── */
.price .ds-cell { display: flex; flex-direction: column; gap: 6px }
.price .ds-btn { margin-top: auto; align-self: flex-start }
.price .ds-cell > :nth-last-child(2) { margin-bottom: var(--ds-s-24) }
.price .terms { color: var(--ds-ink-2) }
.buy-note { margin-top: var(--ds-s-16); color: var(--ds-ink-2) }
.or-buy { margin-top: var(--ds-s-24); color: var(--ds-ink-2); font-size: var(--ds-t-small) }
.or-buy a { color: var(--ds-ink); font-weight: 500 }

/* ── Platform: feature sections ─────────────────────────────────────────── */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--ds-s-32) }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
          border: var(--ds-hair) solid var(--ds-rule-2); border-radius: var(--ds-r-1);
          color: var(--ds-ink); text-decoration: none; font-size: .85rem }
.jump a:hover { border-color: var(--ds-ink) }
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ds-s-64);
        align-items: start }
.feat.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) }
.feat.flip > .feat-copy { order: 2 }
.feat-copy { position: sticky; top: calc(var(--ds-nav-h) + 32px) }
.feat-copy .ds-label { display: block; margin-bottom: var(--ds-s-16) }
.feat-copy ul { margin: var(--ds-s-24) 0 0; padding: 0; list-style: none; display: grid; gap: 12px }
.feat-copy li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--ds-ink-2) }
.feat-copy li b { color: var(--ds-ink); font-weight: 600 }
.feat-copy li .ic { margin-top: 3px; color: var(--ds-ink) }
.feat-cap { margin-top: var(--ds-s-12); color: var(--ds-ink-2) }
@media (max-width: 1024px) {
  .feat, .feat.flip { grid-template-columns: minmax(0, 1fr); gap: var(--ds-s-32) }
  .feat.flip > .feat-copy { order: 0 }
  .feat-copy { position: static }
}

/* Two axes */
.axes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: var(--ds-s-24);
        outline: var(--ds-hair) solid var(--ds-rule) }
.axes > div { padding: 14px 16px }
.axes > div + div { border-left: var(--ds-hair) solid var(--ds-rule) }
.axes .ds-label { margin-bottom: 6px }

/* Session regime strip: one cell per recorded 5-minute read */
.tl { padding: 16px 20px; border-top: var(--ds-hair) solid var(--ds-rule) }
.tl-cells { display: grid; grid-template-columns: repeat(78, 1fr); gap: 1px; margin-top: 10px }
.tl-cells i { display: block; height: 12px; background: var(--ds-bg-3) }
.tl-cells i.ro  { background: var(--ds-risk); opacity: .7 }
.tl-cells i.wro { background: var(--ds-risk); opacity: .3 }
.tl-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--ds-ink-3) }

/* Priority board */
.pb { outline: var(--ds-hair) solid var(--ds-rule-2); background: var(--ds-bg) }
.pb-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px;
           border-bottom: var(--ds-hair) solid var(--ds-rule) }
.pb details { border-bottom: var(--ds-hair) solid var(--ds-rule) }
.pb details:last-of-type { border-bottom: 0 }
.pb summary { list-style: none; cursor: pointer; display: grid;
              grid-template-columns: 28px 64px 1fr auto 18px; gap: 12px; align-items: center;
              padding: 14px 20px }
.pb summary::-webkit-details-marker { display: none }
.pb summary:hover { background: var(--ds-bg-2) }
.pb .rk { font-family: var(--ds-font-mono); color: var(--ds-ink-3); font-size: .8rem }
.pb .sym { font-family: var(--ds-font-mono); font-weight: 500 }
.pb .setup { font-size: .9rem }
.pb .setup small { display: block; color: var(--ds-ink-2); font-size: .78rem }
.pb .side { font-size: .8rem; color: var(--ds-ink-2); white-space: nowrap }
.pb .chev { color: var(--ds-ink-3); transition: transform var(--ds-dur-1) steps(1) }
.pb details[open] .chev { transform: rotate(90deg) }
.pb .why { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
           border-top: var(--ds-hair) solid var(--ds-rule); background: var(--ds-bg-2) }
.pb .why > div { padding: 14px 20px 18px }
.pb .why > div + div { border-left: var(--ds-hair) solid var(--ds-rule) }
.ev { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; font-size: .86rem }
.ev li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; color: var(--ds-ink-2) }
.ev li .ic { margin-top: 2px }
.ev.for .ic { color: var(--ds-up) }
.ev.against .ic { color: var(--ds-warn) }
@media (max-width: 640px) {
  .pb summary { grid-template-columns: 22px 52px 1fr 16px }
  .pb .side { display: none }
  .pb .why { grid-template-columns: 1fr }
  .pb .why > div + div { border-left: 0; border-top: var(--ds-hair) solid var(--ds-rule) }
}

/* Trade context tabs */
.tc { outline: var(--ds-hair) solid var(--ds-rule-2); background: var(--ds-bg) }
.tc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
           padding: 16px 20px 0 }
.tc-title { font-family: var(--ds-font-display); font-weight: 600; font-size: 1.5rem;
            letter-spacing: -.02em }
.tc-title .sym { font-family: var(--ds-font-mono); font-weight: 500; margin-right: 10px }
.tc-tabs { display: flex; gap: 0; margin-top: 14px; padding-inline: 20px;
           border-bottom: var(--ds-hair) solid var(--ds-rule); overflow-x: auto }
.tc-tabs button { appearance: none; background: none; border: 0; cursor: pointer;
                  padding: 12px 14px; font: 500 .85rem var(--ds-font-ui); color: var(--ds-ink-2);
                  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap }
.tc-tabs button[aria-selected="true"] { color: var(--ds-ink); border-bottom-color: var(--ds-blue) }
.tc-tabs button:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: -2px }
.tc-panel { padding: 20px }
.tc-panel[hidden] { display: none }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0; outline: var(--ds-hair) solid var(--ds-rule) }
.kv > div { padding: 14px 16px; border-bottom: var(--ds-hair) solid var(--ds-rule) }
.kv > div:nth-child(odd) { border-right: var(--ds-hair) solid var(--ds-rule) }
.kv > div:nth-last-child(-n+2) { border-bottom: 0 }
.kv .v { font-weight: 600; margin-top: 6px }
.kv .v small { display: block; font-weight: 400; color: var(--ds-ink-2); font-size: .8rem; margin-top: 3px }
.kv .v.big { font-family: var(--ds-font-mono); font-size: 1.3rem; font-weight: 500 }
.tc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
@media (max-width: 640px) { .kv, .tc-split { grid-template-columns: 1fr }
  .kv > div:nth-child(odd) { border-right: 0 }
  .kv > div:nth-last-child(-n+2) { border-bottom: var(--ds-hair) solid var(--ds-rule) }
  .kv > div:last-child { border-bottom: 0 } }

/* Notification feed */
.feed { outline: var(--ds-hair) solid var(--ds-rule-2); background: var(--ds-bg) }
.feed-row { display: grid; grid-template-columns: 64px 36px 1fr; gap: 14px; align-items: start;
            padding: 14px 20px; border-bottom: var(--ds-hair) solid var(--ds-rule) }
.feed-row:last-child { border-bottom: 0 }
.feed-row .t { font-family: var(--ds-font-mono); font-size: .8rem; color: var(--ds-ink-2); padding-top: 9px }
.feed-row h4 { margin: 2px 0 0; font-size: 1rem; font-weight: 600 }
.feed-row h4 .g { font-size: .72em; margin-right: 6px; vertical-align: .1em }
.feed-row p { margin: 3px 0 0; font-size: .85rem; color: var(--ds-ink-2) }
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--ds-s-24) }
.kinds > div { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
               outline: var(--ds-hair) solid var(--ds-rule); font-size: .85rem }
@media (max-width: 640px) { .kinds { grid-template-columns: 1fr 1fr } }

/* Layers list */
.layers .ds-cell { display: flex; flex-direction: column; gap: 10px }

/* Session steps with icons (platform) */
.step h3 { display: flex; align-items: center; gap: 10px }

/* ── Round 2 ─────────────────────────────────────────────────────────────── */
/* The engine plate, reused as the answer to "six tabs": the tabs' lines
   converge into it, and its blue output layer is the priority read. */
.plate-wrap { max-width: 880px; margin-inline: auto }
.plate-cap { text-align: center; margin: var(--ds-s-24) auto 0; max-width: 56ch }
.tabstrip .tab-n .ic { margin-right: 4px; vertical-align: -2px }

/* Two-axis mini (home card 01) */
.mini-scale { grid-template-columns: 70px 1fr auto }
.ms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; align-self: center }
.ms i { display: block; height: 5px; background: var(--ds-bg-3) }
.ms i.on-risk { background: var(--ds-risk) }
.ms i.on-up { background: var(--ds-up) }

/* Toast mini (home card 04), shaped like the cockpit's notification */
.mini-toast { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center }
.mini-toast .mt { font-weight: 600; margin-top: 3px }

/* Sliding tab underline (driven by js/ds-anim.js; absent without JS) */
.tc-tabs { position: relative; overflow-y: hidden }
.tc-ind { position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
          background: var(--ds-blue); pointer-events: none }
.tc-tabs.has-ind button[aria-selected="true"] { border-bottom-color: transparent }

/* ── Round 3: session replay ─────────────────────────────────────────────── */
.rg-days { display: flex; gap: 0; border-bottom: var(--ds-hair) solid var(--ds-rule); padding-inline: 20px }
.rg-days button { appearance: none; background: none; border: 0; cursor: pointer; padding: 10px 12px;
                  font: 500 .78rem var(--ds-font-mono); letter-spacing: .06em; color: var(--ds-ink-3);
                  border-bottom: 2px solid transparent; margin-bottom: -1px }
.rg-days button:first-child { padding-left: 0 }
.rg-days button[aria-selected="true"] { color: var(--ds-ink); border-bottom-color: var(--ds-ink) }
.rg-days button:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: -2px }
.rg-days .rg-days-k { margin-left: auto; align-self: center; color: var(--ds-ink-3) }
.rg-k [data-r="clock"] { color: var(--ds-ink-2) }
.rg-bar i { transition: none }  /* latches with the headline word, same frame */
.rg-bar i.is-on.s-dn { background: var(--ds-risk) }
.rg-bar i.is-on.s-up { background: var(--ds-up) }
.rg-bar i.is-on.s-nu { background: var(--ds-ink-3) }
.tl-track { position: relative; margin-top: 10px }
.tl-track .tl-cells { margin-top: 0 }
.tl-cursor { position: absolute; top: -4px; bottom: -4px; left: 0; width: 1px; background: var(--ds-ink);
             opacity: 0; pointer-events: none }
.tl-cells i { opacity: .55; transition: opacity var(--ds-dur-1) var(--ds-ease-out) }
.tl-cells i.on { opacity: 1 }
.tl-cells i.ro.on   { background: var(--ds-risk); opacity: .75 }
.tl-cells i.wro.on  { background: var(--ds-risk); opacity: .32 }
.tl-cells i.ron.on  { background: var(--ds-up); opacity: .75 }
.tl-cells i.wron.on { background: var(--ds-up); opacity: .32 }
.tl-cells i.neu.on  { background: var(--ds-ink-3); opacity: .4 }
.tl-hero { padding: 12px 20px 14px }
.tl-hero .tl-cells i { height: 10px }
.tl-key { display: flex; gap: 12px; flex-wrap: wrap }
.tl-key span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 5px;
                       vertical-align: 0; background: currentColor }
.tl-key .k-on { color: var(--ds-up) } .tl-key .k-nu { color: var(--ds-ink-3) } .tl-key .k-off { color: var(--ds-risk) }
.replay-btn { appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
              font: 500 var(--ds-t-micro) var(--ds-font-mono); letter-spacing: .12em; text-transform: uppercase;
              color: var(--ds-ink-2) }
.replay-btn:hover { color: var(--ds-ink) }
.rg-row dd .lbl { font-weight: 600 }
@media (max-width: 560px) { .rg-days { padding-inline: 14px } .rg-days .rg-days-k { display: none } }

/* Coverage: black ticker badges */
.ds-coverage .cov { display: flex; align-items: center; gap: 12px }
.cov-badge { display: inline-flex; align-items: center; justify-content: center; flex: none;
             min-width: 44px; height: 28px; padding: 0 7px; border-radius: var(--ds-r-1);
             background: var(--ds-ink); color: var(--ds-bg);
             font: 500 .7rem var(--ds-font-mono); letter-spacing: .06em }

/* Priority read: two-session mini and board toggle */
.mini-date { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--ds-ink-3) }
.board-tabs { display: flex; gap: 0; border-bottom: var(--ds-hair) solid var(--ds-rule); padding-inline: 20px }
.board-tabs button { appearance: none; background: none; border: 0; cursor: pointer; padding: 11px 12px;
                     font: 500 .8rem var(--ds-font-ui); color: var(--ds-ink-2);
                     border-bottom: 2px solid transparent; margin-bottom: -1px }
.board-tabs button:first-child { padding-left: 0 }
.board-tabs button[aria-selected="true"] { color: var(--ds-ink); border-bottom-color: var(--ds-ink) }

/* Intelligence field band, reused under pricing */
.field-under { padding-block: var(--ds-s-48) var(--ds-s-32) }

/* ── Round 4 ─────────────────────────────────────────────────────────────── */
/* Field band styles, moved out of the home page's inline <style> so the
   pricing page can use them. Same values as index.html. */
.field-band { padding-bottom: var(--ds-s-32) }
.field-def { display: flex; gap: var(--ds-s-16); align-items: baseline;
             justify-content: flex-end; margin: var(--ds-s-16) 0 0 auto;
             max-width: 62ch; color: var(--ds-ink) }
@media (max-width: 760px) { .field-def { justify-content: flex-start } }

/* Replay panel: every line that changes between sessions reserves its space,
   so the panel is one fixed height and the hero column beside it never moves.
   - "since" always takes two lines (in progress or complete)
   - each row's note is a single line, ellipsised if the column is narrow
   - the mixed-signal line always takes two lines                        */
[data-replay] [data-r="since"] { min-height: calc(2 * 1.5em); line-height: 1.5 }
[data-replay] .rg-row dd small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
[data-replay] .rg-row dd { min-width: 0 }
[data-replay] .rg-row { min-width: 0 }
[data-replay] [data-r="dis"] { min-height: calc(2 * 1.5em + 24px); line-height: 1.5 }
[data-replay] .rg-big { white-space: nowrap }
[data-replay] .rg-shift strong { white-space: nowrap }
.hero-v2 { align-items: start }
.hero-v2 > div:first-child { padding-top: var(--ds-s-48) }
@media (max-width: 1024px) { .hero-v2 > div:first-child { padding-top: 0 } }

@media (max-width: 560px) {
  .axes { grid-template-columns: 1fr }
  .axes > div + div { border-left: 0; border-top: var(--ds-hair) solid var(--ds-rule) }
}

/* ── Round 5 (2026-09-29): calmer session replay ─────────────────────────── */
/* The scale marker slides (js/ds-replay.js .rg-thumb) instead of segments
   switching colour; the static is-on segment remains the no-JS fallback. */
.rg-bar { position: relative }
.rg-bar.has-thumb i.is-on,
.rg-bar.has-thumb i.is-on.s-dn,
.rg-bar.has-thumb i.is-on.s-up,
.rg-bar.has-thumb i.is-on.s-nu { background: var(--ds-bg-3) }
.rg-thumb { position: absolute; left: 0; top: 0; height: 100%; width: 0; pointer-events: none;
            background: var(--ds-ink-3); transition: background-color 360ms var(--ds-ease-out) }
.rg-thumb.s-dn { background: var(--ds-risk) }
.rg-thumb.s-up { background: var(--ds-up) }
.rg-thumb.s-nu { background: var(--ds-ink-3) }
.tl-cells i { transition: opacity 280ms var(--ds-ease-out) }


/* ── Round 6 (2026-09-29): dark theme + Platform UI items 1-8 ───────────── */

/* Theme toggle. Pages ship data-theme="auto"; tokens.css does the colours. */
.ds-theme-btn { display: inline-flex; align-items: center; justify-content: center; flex: none;
                width: 36px; height: 36px; padding: 0; cursor: pointer; background: transparent;
                color: var(--ds-ink); border: var(--ds-hair) solid var(--ds-rule-2);
                border-radius: var(--ds-r-1) }
.ds-theme-btn:hover { border-color: var(--ds-ink) }
.ds-theme-btn:focus-visible { outline: 2px solid var(--ds-blue); outline-offset: 2px }
.ds-ti { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7;
         stroke-linecap: round; stroke-linejoin: round }
.ds-ti-sun { display: none }
@media (max-width: 520px) { .ds-theme-btn { width: 30px; height: 30px } }

/* Logos in dark: the lockup and mark rendered in ink through a mask, which
   is the brand kit's all-white variant, not a recolour of the blue. */
.ds-logo-dark { display: none; width: 210px; height: 20px; background: var(--ds-ink);
  -webkit-mask: url("../assets/logo/deskscale-lockup-h.svg?v=59") center / contain no-repeat;
          mask: url("../assets/logo/deskscale-lockup-h.svg?v=59") center / contain no-repeat }
@media (max-width: 520px) {
  .ds-logo-dark { width: 32px;
    -webkit-mask-image: url("../assets/logo/deskscale-mark.svg?v=59");
            mask-image: url("../assets/logo/deskscale-mark.svg?v=59") }
}
.ds-foot-mark-dark { display: none; width: 38px; height: 24px; background: var(--ds-ink);
  -webkit-mask: url("../assets/logo/deskscale-mark.svg?v=59") left center / contain no-repeat;
          mask: url("../assets/logo/deskscale-mark.svg?v=59") left center / contain no-repeat }
/* Forced colours repaint backgrounds to Canvas, which would erase a logo drawn as a masked background. */
@media (forced-colors: active) {
  .ds-logo-dark, .ds-foot-mark-dark { forced-color-adjust: none; background: CanvasText }
}

/* Theme-only swaps and colours, for an explicit dark choice... */
[data-theme="dark"] .ds-ti-sun { display: block }
[data-theme="dark"] .ds-ti-moon { display: none }
[data-theme="dark"] .ds-logo picture, [data-theme="dark"] .ds-foot-mark { display: none }
[data-theme="dark"] .ds-logo-dark, [data-theme="dark"] .ds-foot-mark-dark { display: block }
[data-theme="dark"] {
  --ds-ring-0: #141417; --ds-ring-1: #19191D; --ds-ring-2: #202025; --ds-ring-3: #29292F;
  --ds-ring-4: #34343B; --ds-ring-5: #44444C; --ds-ring-6: #5B5B64;
  --ds-cal-ro: #F2645A; --ds-cal-wo: #8A4541; --ds-cal-n: #37373C;
  --ds-cal-wn: #2C6A54; --ds-cal-rn: #3FBF8F;
}
/* ...and for "auto" when the visitor's OS is dark. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .ds-ti-sun { display: block }
  [data-theme="auto"] .ds-ti-moon { display: none }
  [data-theme="auto"] .ds-logo picture, [data-theme="auto"] .ds-foot-mark { display: none }
  [data-theme="auto"] .ds-logo-dark, [data-theme="auto"] .ds-foot-mark-dark { display: block }
  [data-theme="auto"] {
    --ds-ring-0: #141417; --ds-ring-1: #19191D; --ds-ring-2: #202025; --ds-ring-3: #29292F;
    --ds-ring-4: #34343B; --ds-ring-5: #44444C; --ds-ring-6: #5B5B64;
    --ds-cal-ro: #F2645A; --ds-cal-wo: #8A4541; --ds-cal-n: #37373C;
    --ds-cal-wn: #2C6A54; --ds-cal-rn: #3FBF8F;
  }
}

/* Chips: direction as a small labelled mark, not a coloured sentence. */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; line-height: 1.2;
        border: var(--ds-hair) solid currentColor; border-radius: var(--ds-r-1); white-space: nowrap;
        font: 500 .68rem var(--ds-font-mono); letter-spacing: .08em; text-transform: uppercase }
.chip-long { color: var(--ds-up) }
.chip-short { color: var(--ds-risk) }

/* 1-3 · Priority board: reason + tally on the row, chips, rotating chevron,
   a coloured edge that runs down the open row into its evidence. */
.pb summary { grid-template-columns: 26px 56px minmax(0, 1fr) auto auto 16px; gap: 14px;
              transition: background-color var(--ds-dur-1) var(--ds-ease-out) }
.pb summary:hover { background: var(--ds-bg-2) }
.pb .setup { min-width: 0 }
.pb .setup small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pb .tally { display: inline-flex; gap: 10px; font: 500 .74rem var(--ds-font-mono); white-space: nowrap }
.pb .tally .t-for { color: var(--ds-up) }
.pb .tally .t-ag { color: var(--ds-warn) }
.pb .chev { color: var(--ds-ink-3); transition: transform 220ms var(--ds-ease-out) }
.pb details[open] .chev { transform: rotate(180deg) }
.pb summary:hover .chev { color: var(--ds-ink) }
.pb details[data-side="long"][open] > summary,
.pb details[data-side="long"][open] > .why { box-shadow: inset 3px 0 0 var(--ds-up) }
.pb details[data-side="short"][open] > summary,
.pb details[data-side="short"][open] > .why { box-shadow: inset 3px 0 0 var(--ds-risk) }
@media (max-width: 640px) {
  .pb summary { grid-template-columns: 20px 48px minmax(0, 1fr) auto 14px; gap: 10px }
  .pb .tally { display: none }
}

/* 4-6 · Trade context: invalidation is the hero; risk/reward reads as locked. */
.tc-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.tc-tabs .cnt { margin-left: 6px; font: 500 .72rem var(--ds-font-mono); color: var(--ds-ink-3) }
/* With counts the strip is ~418px wide; below this the last tab ("Risks") scrolls out of view. */
@media (max-width: 460px) { .tc-tabs .cnt { display: none } }
.tc-plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px }
.ladder { display: flex; flex-direction: column; min-height: 280px;
          border: var(--ds-hair) solid var(--ds-rule) }
.lad-risk { flex: 0 0 30%; padding: 12px 14px; color: var(--ds-ink-2);
            background: repeating-linear-gradient(135deg,
              color-mix(in srgb, var(--ds-risk) 10%, transparent) 0 6px, transparent 6px 12px) }
.lad-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
            padding: 10px 14px; border-top: 2px dashed var(--ds-risk) }
.lad-px { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 500; color: var(--ds-ink) }
.lad-below { position: relative; flex: 1 }
.lad-price { position: absolute; left: 14px; right: 14px; top: 18%; display: flex; align-items: center;
             gap: 10px; font-size: .85rem; color: var(--ds-ink-2) }
.lad-price i { width: 10px; height: 10px; flex: none; background: var(--ds-ink) }
.lad-price span { white-space: nowrap }
.lad-price::after { content: ''; flex: 1; height: 1px; background: var(--ds-rule-2) }
.lad-note { position: absolute; left: 14px; bottom: 10px; color: var(--ds-ink-3) }
.tc-facts { margin: 0; border: var(--ds-hair) solid var(--ds-rule) }
.tc-facts > div { padding: 11px 14px; border-bottom: var(--ds-hair) solid var(--ds-rule) }
.tc-facts > div:last-child { border-bottom: 0 }
.tc-facts dd { margin: 4px 0 0; font-weight: 600 }
.tc-facts dd small { display: block; margin-top: 2px; font-weight: 400; font-size: .8rem; color: var(--ds-ink-2) }
.tc-facts .locked dd { color: var(--ds-ink-2); font-weight: 500 }
@media (max-width: 640px) { .tc-plan { grid-template-columns: 1fr } .ladder { min-height: 220px } }

/* 7-8 · Desk feed as a timeline: one rail, square nodes, weight only on the
   regime shift. Changes only: a repeated read is labelled as a return. */
.feed-tl { --ft-pad: 20px; --ft-t: 52px; --ft-node: 26px; --ft-gap: 14px;
           position: relative; list-style: none; margin: 0; padding: 10px 0 }
.feed-tl::before { content: ''; position: absolute; top: 28px; bottom: 28px; width: 1px;
                   left: calc(var(--ft-pad) + var(--ft-t) + var(--ft-gap) + var(--ft-node) / 2);
                   background: var(--ds-rule-2) }
.ft { position: relative; display: grid; gap: 0 var(--ft-gap); align-items: start;
      grid-template-columns: var(--ft-t) var(--ft-node) minmax(0, 1fr); padding: 10px var(--ft-pad) }
.ft .t { font: 500 .8rem var(--ds-font-mono); color: var(--ds-ink-2); padding-top: 5px }
.ft .node { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
            width: var(--ft-node); height: var(--ft-node); border-radius: var(--ds-r-1);
            border: var(--ds-hair) solid var(--ds-rule-2); background: var(--ds-bg); color: var(--ds-ink-2) }
.ft.is-key .node { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-bg) }
.ft h4 { margin: 2px 0 0; font-size: .95rem; font-weight: 500 }
.ft.is-key h4 { font-size: 1.08rem; font-weight: 600 }
.ft h4 .g { font-size: .72em; margin-right: 6px; vertical-align: .1em }
.ft p { margin: 3px 0 0; font-size: .84rem; color: var(--ds-ink-2) }
@media (max-width: 560px) { .feed-tl { --ft-pad: 14px; --ft-t: 42px; --ft-gap: 10px } }
/* Panel headers: keep the title on one line; the "recorded" note wraps instead. */
.pb-head { align-items: baseline }
.pb-head > .ds-label { white-space: nowrap; flex: none }
.pb-head > .rg-rec { min-width: 0 }