/* ==========================================================================
   SmartSignals — Cockpit
   The live dashboard. Layout is a fixed shell (topbar / rail / stage / tape)
   with the stage swapping between three modes: grid, focus, compare.
   ========================================================================== */

.cockpit{
  --rail-w: 268px;
  --top-h: 58px;
  --tape-h: 38px;
  min-height:100vh;
  background:
    radial-gradient(1100px 620px at 78% -8%, var(--violet-dim), transparent 62%),
    radial-gradient(900px 520px at 12% 4%, var(--cyan-dim), transparent 60%),
    var(--bg);
}

/* The whole cockpit sits behind a cathode tube — see the .crt block in
   tokens.css. Fixed rather than absolute so the scanlines stay put while the
   content scrolls under them, which is what sells it as a screen. */
.ck-crt{
  position:fixed;inset:0;z-index:0;
  contain:strict;
}

/* Short/long label pair, so the topbar CTA can shrink without losing meaning. */
.lbl-short{display:none}
@media (max-width:560px){
  .lbl-long{display:none}
  .lbl-short{display:inline}
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */

.ck-top{
  /* Above .rail-scrim (65), not below it. The scrim is also offset to start
     under this bar, which is what keeps the header undimmed; this is the guard
     for the case the offset cannot cover -- if the bar is ever not pinned at
     viewport 0 when the drawer opens, it stays lit and clickable rather than
     losing a dimmed, dead sliver. The drawer itself is 70 and starts below the
     bar, so it is unaffected either way. */
  position:sticky;top:0;z-index:66;
  height:var(--top-h);
  display:flex;align-items:center;gap:18px;
  padding:0 18px;
  background:var(--chrome);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.ck-brand{
  display:flex;align-items:center;gap:10px;
  /* White, like the nav logo on the marketing pages — the mark is the same
     mark and should not change colour between the two. */
  font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:var(--text);
  flex:none;
}
.ck-brand sup{font-size:.55em;opacity:.7}
.ck-brand-sub{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;
  color:var(--dim);text-transform:uppercase;
  padding-left:12px;margin-left:2px;border-left:1px solid var(--line-soft);
}

.ck-health{display:flex;align-items:center;gap:7px;flex:1;overflow-x:auto;scrollbar-width:none}
.ck-health::-webkit-scrollbar{display:none}

.hchip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:5px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--line-soft);
  background:var(--fill-1);
  color:var(--muted);
  transition:border-color .2s,color .2s;
}
.hchip b{color:var(--text-2);font-weight:500}
.hchip i{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:none;font-style:normal}
.hchip.ok    i{background:var(--green);box-shadow:0 0 8px var(--green)}
.hchip.warn  i{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.hchip.down  i{background:var(--red);box-shadow:0 0 8px var(--red);animation:blink 1.3s infinite}
.hchip.ok{border-color:var(--green)}
.hchip.down{border-color:var(--red)}

/* Same trade as the marketing bar: the bar has about twenty spare pixels, so
   the social marks stand down to make room. They are decoration; once the CTA
   has scrolled away the action is the point. */
.ck-jump{display:none}
.ck-jump .btn-demo-play{width:21px;height:21px}

@media (min-width:1120px){
  .ck-top.past-cta .ck-jump{display:inline-flex;animation:jumpIn .3s var(--ease)}
  .ck-top.past-cta .ck-social{display:none}
}

.ck-clock{
  font-family:var(--f-mono);font-size:.72rem;color:var(--cyan);
  letter-spacing:.06em;flex:none;
  text-shadow:0 0 14px rgba(61,224,245,.4);
}
.ck-top .btn{flex:none}

/* The topbar is the densest bar on the site; the optional controls appear only
   where there is genuinely room for them, and live in the rail otherwise. */
.ck-top .social{display:none}
.ck-top .theme-switch{display:none}
@media (min-width:1320px){ .ck-top .social{display:inline-flex} }
@media (min-width:1024px){ .ck-top .theme-switch{display:inline-flex} }

/* The clock is the next thing to go, for the same reason and one width lower.
   Every child of this bar is flex:0 0 auto, so nothing gives and the row
   overflows instead of compressing: measured at 360px, the four children came
   to 325px against 350px of room once gaps and padding were counted, and the
   page ran 7px past the screen -- 47px at 320px. Of those four the clock is
   the only one that is not navigation or identity, and at 81px it was taking
   almost a quarter of the bar to say what the phone's own status bar already
   says. The threshold is 370px and not a round 420: the bar measured clean at
   375 and above, so anything wider than the overflow would be removing a
   feature from phones that never had the problem -- a 412px device keeps its
   clock. The UTC reading also stays on the freshness stamp, which is where a
   reader checking staleness actually looks. */
@media (max-width:370px){ .ck-top .ck-clock{display:none} }

/* ── Shell ────────────────────────────────────────────────────────────────── */

.ck-shell{
  display:grid;
  grid-template-columns:var(--rail-w) 1fr;
  align-items:start;
  position:relative;z-index:1;
}

/* ── Asset rail ───────────────────────────────────────────────────────────── */

.ck-rail{
  position:sticky;top:var(--top-h);
  height:calc(100vh - var(--top-h) - var(--tape-h));
  display:flex;flex-direction:column;
  border-right:1px solid var(--line-soft);
  background:var(--panel-grad);
  backdrop-filter:blur(8px);
}

.rail-head{padding:12px 14px 10px;border-bottom:1px solid var(--line-soft);flex:none}
.rail-title{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
  display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;
}
.rail-title span{color:var(--dim)}

.rail-search{
  width:100%;padding:7px 10px 7px 28px;
  background:var(--fill-2);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);
  font-family:var(--f-mono);font-size:.72rem;color:var(--text);
  transition:border-color .2s,background .2s;
}
.rail-search::placeholder{color:var(--dim)}
.rail-search:focus{outline:none;border-color:var(--line-strong);background:rgba(61,224,245,.05)}
.rail-search-wrap{position:relative}
.rail-search-wrap svg{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  color:var(--dim);pointer-events:none;
}

.rail-sort{display:flex;gap:4px;margin-top:8px}
.rail-sort button{
  flex:1;padding:5px 0;border-radius:4px;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);border:1px solid transparent;transition:.18s var(--ease);
}
.rail-sort button:hover{color:var(--muted);background:var(--fill-2)}
.rail-sort button[aria-pressed="true"]{
  color:var(--accent);border-color:var(--line);background:var(--accent-glow);
}

/* dvh where it exists: on a phone 100vh is the height with the URL bar
   retracted, so a rail sized in vh runs past the bottom of what is actually on
   screen and takes the end of the list with it. */
@supports (height:100dvh){
  .ck-rail{height:calc(100dvh - var(--top-h) - var(--tape-h))}
}

/* contain, so dragging past the end of the list scrolls the list and not the
   cockpit behind it. */
.rail-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px;
  -webkit-overflow-scrolling:touch}

.rail-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  gap:1px 9px;
  width:100%;padding:8px 9px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  text-align:left;
  transition:background .18s var(--ease),border-color .18s var(--ease);
  position:relative;
}
.rail-item:hover{background:var(--fill-2)}
.rail-item[aria-current="true"]{
  background:linear-gradient(90deg,var(--accent-glow),var(--accent-glow));
  border-color:var(--line-strong);
}
.rail-item[aria-current="true"]::before{
  content:'';position:absolute;left:0;top:12%;bottom:12%;width:2px;
  background:var(--accent);border-radius:0 2px 2px 0;
}

.ri-bias{
  grid-column:1;grid-row:1/3;align-self:center;
  width:9px;height:9px;border-radius:50%;
  background:var(--dim);flex:none;
  box-shadow:0 0 0 3px var(--fill-1);
}
.ri-bias.bullish{background:var(--green);box-shadow:0 0 10px rgba(53,221,146,.65)}
.ri-bias.bearish{background:var(--red);box-shadow:0 0 10px rgba(255,93,108,.65)}
.ri-bias.neutral{background:var(--muted)}

.ri-sym{
  grid-column:2;grid-row:1;
  font-family:var(--f-mono);font-size:.8rem;font-weight:700;
  color:var(--text);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ri-name{
  grid-column:2;grid-row:2;font-size:.63rem;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ri-right{
  grid-column:3;grid-row:1/3;
  display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:2px;
}
.ri-price{font-family:var(--f-mono);font-size:.7rem;color:var(--text-2)}
.ri-chg{font-family:var(--f-mono);font-size:.62rem;font-weight:600}
.up{color:var(--green)}
.dn{color:var(--red)}
.flat{color:var(--muted)}

.rail-foot{
  flex:none;padding:9px 12px;border-top:1px solid var(--line-soft);
  font-family:var(--f-mono);font-size:.58rem;color:var(--dim);
  display:flex;justify-content:space-between;
}

/* Mirror of the topbar controls, for the widths where the bar has no room. */
.rail-extra{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:8px 10px;border-top:1px solid var(--line-soft);
}
@media (min-width:1320px){ .rail-extra .social{display:none} }
@media (min-width:1024px){ .rail-extra .theme-switch{display:none} }
/* Both hidden at once leaves an empty strip — collapse it. */
@media (min-width:1320px){ .rail-extra{display:none} }

/* ── Stage ────────────────────────────────────────────────────────────────── */

.ck-stage{min-width:0;padding:14px 18px 22px}
/* Views are containers, not page bands — drop the site-wide section rhythm. */
.ck-stage > section{padding:0}

.stage-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:14px;
}
.modes{display:flex;gap:3px;padding:3px;border:1px solid var(--line-soft);border-radius:8px;background:var(--fill-1)}
.modes button{
  padding:7px 15px;border-radius:5px;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);transition:.18s var(--ease);
}
.modes button:hover{color:var(--text-2)}
.modes button[aria-pressed="true"]{
  background:linear-gradient(135deg,rgba(61,224,245,.2),var(--accent-glow));
  color:var(--accent-lt);box-shadow:inset 0 0 0 1px var(--line-strong);
}
.stage-spacer{flex:1}

/* Points at the explanatory copy further down the page. Deliberately quiet —
   it is an offer, not a call to action, and it sits next to one. */
.ck-help{
  width:21px;height:21px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--fill-1);color:var(--muted);
  font-family:var(--f-mono);font-size:.7rem;font-weight:700;line-height:1;
  text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
.ck-help:hover,
.ck-help:focus-visible{color:var(--accent);border-color:var(--accent);background:var(--accent-glow)}

.toggle{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;
}
.toggle input{appearance:none;width:30px;height:16px;border-radius:100px;background:var(--fill-3);position:relative;transition:background .2s;cursor:pointer}
.toggle input::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--dim);transition:.2s var(--ease)}
.toggle input:checked{background:rgba(61,224,245,.28)}
.toggle input:checked::after{left:16px;background:var(--accent)}

/* ── Panels ───────────────────────────────────────────────────────────────── */

.panel{
  background:var(--panel-grad);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
/* The hairline that sweeps across each panel head: the cockpit's "carrier
   signal". One shared animation keeps the whole board feeling synchronised. */
.panel::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(61,224,245,.55),transparent);
  transform:translateX(-100%);
  animation:sweep 7s linear infinite;
}
.panel.p-accent::after{background:linear-gradient(90deg,transparent,rgba(61,224,245,.6),transparent)}
.panel.p-violet::after{background:linear-gradient(90deg,transparent,rgba(139,108,255,.6),transparent)}

.p-head{
  display:flex;align-items:center;gap:9px;
  padding:11px 14px;border-bottom:1px solid var(--line-soft);
  flex:none;
}
.p-head h3{
  font-family:var(--f-mono);font-size:.63rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent);
}
.p-head .p-note{
  margin-left:auto;font-family:var(--f-mono);font-size:.58rem;
  color:var(--dim);letter-spacing:.06em;
}
.p-body{padding:14px;flex:1;min-height:0}
.p-body.tight{padding:10px}
.p-body.flush{padding:0}

/* ── Grid mode ────────────────────────────────────────────────────────────── */

.grid-top{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr);
  gap:12px;margin-bottom:12px;
}
.grid-mid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:12px}
.grid-bot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px}

/* Brain canvas */
.brain-wrap{position:relative;min-height:264px}
.brain-wrap .p-body{position:relative;flex:1;min-height:264px}
#brainCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.brain-legend{
  position:absolute;left:14px;bottom:12px;
  display:flex;gap:14px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.57rem;letter-spacing:.08em;
  color:var(--dim);text-transform:uppercase;pointer-events:none;
}
.brain-legend b{display:inline-flex;align-items:center;font-weight:400}

/* Aligned mode: each entry is centred on its column's x, which cockpit.js sets
   from the same numbers it draws the graph with. Guarded so it cannot override
   the display:none further down — this selector is the more specific one. */
.brain-legend.is-aligned{left:0;right:0}
@media (min-width:561px){ .brain-legend.is-aligned{display:block} }
.brain-legend.is-aligned b{
  position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap;
}
/* Top right, not bottom right. The candidate entry now sits at the foot of the
   tail — the corner the counter used to have to itself — and the raised tail
   leaves the space above the signal disc empty. */
.brain-stat{
  position:absolute;right:16px;top:10px;text-align:right;pointer-events:none;
}
.brain-stat .bs-val{
  font-family:var(--f-mono);font-size:1.6rem;font-weight:700;
  color:var(--cyan);text-shadow:0 0 22px rgba(61,224,245,.45);line-height:1;
}
.brain-stat .bs-lbl{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-top:5px}

/* Set by cockpit.js from the room the signal disc leaves above itself, which is
   a fact about the panel's height that no width breakpoint can see. */
.brain-stat.is-tight{top:2px}
.brain-stat.is-tight .bs-val{font-size:.95rem}
.brain-stat.is-tight .bs-lbl{font-size:.46rem;margin-top:2px;letter-spacing:.1em}

/* ── Macro Overlay ──────────────────────────────────────────────────────────
   Headline gauge + 30-day trend, then the weighted inputs that produce it,
   then the raw readings those inputs are derived from. */
.macro-body{display:flex;flex-direction:column;gap:0}

.macro-body{display:flex;flex-direction:column}

.macro-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "dial txt"
    "trend trend";
  align-items:center;gap:10px 14px;
  padding-bottom:16px;border-bottom:1px solid var(--line-soft);
}
.macro-dial{grid-area:dial;width:94px;flex:none}
.macro-dial .gauge svg{max-width:94px}
/* The figure beside the dial already states the value — the one inside the arc
   would just be the same number twice. */
.macro-dial .gauge-val,
.macro-dial .gauge-lbl,
.macro-dial .gauge-sub{display:none}

.macro-head-txt{grid-area:txt;display:flex;flex-direction:column;gap:1px;min-width:0}
.macro-k{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.macro-v{font-family:var(--f-mono);font-size:1.75rem;font-weight:700;line-height:1.1}
.macro-sub{
  font-family:var(--f-mono);font-size:.6rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
}

.macro-trend{grid-area:trend;min-width:0;text-align:right}
.macro-trend svg{width:100%;height:46px;display:block}
.macro-trend-lbl{
  display:block;font-family:var(--f-mono);font-size:.52rem;
  color:var(--muted);letter-spacing:.06em;margin-top:4px;line-height:1.45;
}

.macro-sec{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
  padding:14px 0 8px;
  flex:none;
}

/* Whatever height the grid row settles on, the readings absorb the remainder
   rather than leaving it dead at the foot of the panel. */
.macro-body .stat-rows{flex:1;justify-content:space-evenly;min-height:0}

/* Share of the composite, one segment per input. */
.mc-stack{
  display:flex;height:26px;border-radius:5px;overflow:hidden;
  border:1px solid var(--line-soft);margin-bottom:10px;
}
.mc-seg{
  min-width:0;
  transition:flex-grow .9s var(--ease);
}
/* Three inputs, three tints of the same hue family so the stack reads as one
   quantity split three ways rather than three unrelated things. */
.seg-netflow.up   {background:var(--green)}
.seg-skew.up      {background:color-mix(in srgb, var(--green) 62%, var(--panel))}
.seg-stablecoin.up{background:color-mix(in srgb, var(--green) 34%, var(--panel))}
.seg-netflow.dn   {background:var(--red)}
.seg-skew.dn      {background:color-mix(in srgb, var(--red) 62%, var(--panel))}
.seg-stablecoin.dn{background:color-mix(in srgb, var(--red) 34%, var(--panel))}

.mc-rows{display:flex;flex-direction:column;gap:1px}
.mc-row{
  display:grid;
  grid-template-columns:9px minmax(0,1fr) 34px 44px 36px 48px;
  align-items:center;gap:8px;
  padding:9px 0;border-bottom:1px solid var(--hairline);
  font-family:var(--f-mono);font-size:.66rem;
}
.mc-row:last-child{border-bottom:none}
.mc-dot{width:9px;height:9px;border-radius:2px;background:var(--muted)}
.mc-label{
  color:var(--text-2);font-family:var(--f-sans);font-size:.76rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mc-share{text-align:right;color:var(--muted);font-size:.62rem}
.mc-score{text-align:right;color:var(--text-2);font-weight:600}
.mc-weight{text-align:right;color:var(--muted);font-size:.6rem}
.mc-contrib{text-align:right;font-weight:700;color:var(--muted)}
.mc-score.up,.mc-contrib.up{color:var(--green)}
.mc-score.dn,.mc-contrib.dn{color:var(--red)}

.macro-body .stat-row .v small{
  font-family:var(--f-mono);font-size:.85em;color:var(--dim);font-weight:400;
}

/* Gauges */
.gauge{text-align:center}
.gauge svg{width:100%;max-width:104px;margin-inline:auto;overflow:visible}
.gauge-val{font-family:var(--f-mono);font-size:1rem;font-weight:700;margin-top:-30px;position:relative}
.gauge-lbl{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:14px}
.gauge-sub{font-family:var(--f-mono);font-size:.56rem;color:var(--muted);margin-top:2px}

.g-track{stroke:var(--fill-3)}
.g-fill{stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--ease),stroke .4s}

/* ── Engine State ───────────────────────────────────────────────────────────
   The regime is the hero: it flips every entry filter at once, so it is the
   first thing a reader needs. Breadth, positions and the readings support it. */
.engine-body{display:flex;flex-direction:column}

.es-hero{
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft);
}
.es-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.es-k{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.es-word{
  font-family:var(--f-mono);font-size:2rem;font-weight:700;
  line-height:1.05;letter-spacing:-.02em;color:var(--muted);
}
.es-word.up{color:var(--green);text-shadow:0 0 22px var(--green-dim)}
.es-word.dn{color:var(--red);text-shadow:0 0 22px var(--red-dim)}
.es-sub{
  font-family:var(--f-mono);font-size:.6rem;color:var(--muted);
  letter-spacing:.07em;text-transform:uppercase;
}

.es-gate{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 13px;border-radius:9px;flex:none;
  border:1px solid var(--line-soft);background:var(--fill-1);
}
.es-gate .dot{margin-bottom:3px}
.es-gate.open{border-color:var(--green);background:var(--green-dim);color:var(--green)}
.es-gate.shut{border-color:var(--red);background:var(--red-dim);color:var(--red)}
.es-gate-k{
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.es-gate-v{font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.04em}

/* Thirty-day history of the bar above. Fixed height in both states so the
   empty case does not shift the panel once history starts arriving. */
.es-breadth-trend{position:relative;height:30px;margin-top:6px}
.es-breadth-trend svg{display:block;width:100%;height:30px}
.bt-lbl{
  position:absolute;right:0;top:0;pointer-events:none;
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.bt-empty{
  display:block;line-height:30px;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}

.es-breadth-note{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;
  font-family:var(--f-mono);font-size:.6rem;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;
}
.es-breadth-note b{color:var(--text-2);font-weight:700}

.es-positions{display:flex;flex-direction:column;gap:1px}
.es-pos{
  display:grid;grid-template-columns:46px 1fr auto auto;
  align-items:center;gap:9px;width:100%;
  padding:7px 0;border-bottom:1px solid var(--hairline);
  font-family:var(--f-mono);font-size:.7rem;text-align:left;
  transition:background .15s;
}
.es-pos:last-child{border-bottom:none}
.es-pos:hover{background:var(--fill-1)}
.es-pos-dir{
  font-size:.5rem;font-weight:700;letter-spacing:.08em;
  padding:2px 0;border-radius:3px;text-align:center;
  border:1px solid currentColor;
}
.es-pos-dir.up{color:var(--green);background:var(--green-dim)}
.es-pos-dir.dn{color:var(--red);background:var(--red-dim)}
.es-pos-sym{font-weight:700;color:var(--text)}
.es-pos-entry{color:var(--text-2)}
.es-pos-age{color:var(--dim);font-size:.62rem;min-width:34px;text-align:right}

.es-empty,.es-more{
  font-family:var(--f-mono);font-size:.62rem;color:var(--dim);
  letter-spacing:.06em;padding:8px 0;line-height:1.5;
}
.es-more{text-align:center}

.engine-body .stat-rows{
  margin-top:12px;border-top:1px solid var(--line-soft);padding-top:4px;
  flex:1;justify-content:space-evenly;min-height:0;
}
.engine-body .stat-row .v small{
  font-family:var(--f-mono);font-size:.85em;color:var(--dim);font-weight:400;
}

/* Breadth */
.breadth-bar{
  display:flex;height:24px;border-radius:5px;overflow:hidden;
  border:1px solid var(--line-soft);
}
.breadth-bar div{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:.68rem;font-weight:700;
  transition:flex-grow 1.1s var(--ease);min-width:0;
}
.bb-bull{background:linear-gradient(180deg,var(--green-dim),transparent);color:var(--green)}
.bb-neut{background:var(--fill-3);color:var(--muted)}
.bb-bear{background:linear-gradient(180deg,var(--red-dim),transparent);color:var(--red)}

.stat-rows{display:flex;flex-direction:column;gap:1px}
.stat-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--fill-2);
  font-size:.76rem;
}
.stat-row:last-child{border-bottom:none}
.stat-row .k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.stat-row .v{font-family:var(--f-mono);font-size:.8rem;font-weight:600;color:var(--text)}

/* Asset heat tiles */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  gap:9px;
}
.tile{
  position:relative;overflow:hidden;
  padding:11px 12px;border-radius:9px;
  border:1px solid var(--line-soft);
  background:var(--panel-grad);
  text-align:left;
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
  cursor:pointer;
}
.tile:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.tile::before{
  content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(90% 100% at 100% 0%,var(--tint,transparent),transparent 68%);
}
.tile.bullish{--tint:var(--green-dim)}
.tile.bearish{--tint:var(--red-dim)}
.tile.neutral{--tint:var(--fill-2)}

.tile-top{display:flex;align-items:baseline;gap:7px;margin-bottom:2px;position:relative}
.tile-sym{font-family:var(--f-mono);font-size:.94rem;font-weight:700;letter-spacing:.01em}
.tile-tier{
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.1em;
  padding:1px 5px;border-radius:3px;border:1px solid var(--line-soft);color:var(--dim);
}
.tile-chg{margin-left:auto;font-family:var(--f-mono);font-size:.72rem;font-weight:600}
.tile-price{
  display:block;font-family:var(--f-mono);font-size:.68rem;
  color:var(--muted);position:relative;
}

.tile-spark{display:block;height:34px;margin:8px 0 7px;position:relative;overflow:hidden}
.tile-spark svg{display:block;width:100%;height:34px}

.tile-foot{display:flex;align-items:center;gap:6px;position:relative}
.tile-score{
  flex:1;height:4px;border-radius:2px;
  background:var(--fill-3);position:relative;overflow:hidden;
}
.tile-score i{
  position:absolute;top:0;bottom:0;left:50%;
  background:var(--muted);border-radius:2px;
  transition:width 1s var(--ease),transform 1s var(--ease);
}
.tile-score.bullish i{background:var(--green);box-shadow:0 0 8px rgba(53,221,146,.6)}
.tile-score.bearish i{background:var(--red);box-shadow:0 0 8px rgba(255,93,108,.6)}
.tile-bias{
  font-family:var(--f-mono);font-size:.53rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);
}
.tile.bullish .tile-bias{color:var(--green)}
.tile.bearish .tile-bias{color:var(--red)}

/* ── Signal feed ────────────────────────────────────────────────────────────
   Two explicit rows on a three-column grid: identity on the left, the figure
   on the right, the engine's own sentence underneath spanning both. Every
   child is placed by hand — auto-placement reordered these the moment a row
   arrived without a comment. */
.sig-list{display:flex;flex-direction:column;max-height:352px;overflow-y:auto}
.sig{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  gap:3px 12px;
  padding:10px 14px;border-bottom:1px solid var(--hairline);
  align-items:center;
}
.sig:last-child{border-bottom:none}

.sig-side{
  grid-column:1;grid-row:1/3;
  width:40px;height:40px;border-radius:8px;align-self:center;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:.56rem;font-weight:700;letter-spacing:.05em;
}
.sig-side.buy{background:var(--green-dim);color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.sig-side.sell{background:var(--red-dim);color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}

.sig-head{
  grid-column:2;grid-row:1;min-width:0;
  display:flex;align-items:baseline;gap:8px;
}
.sig-sym{font-family:var(--f-mono);font-size:.82rem;font-weight:700;flex:none}
.sig-tag{
  font-family:var(--f-mono);font-size:.5rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:2px 5px;border-radius:3px;flex:none;
  background:var(--fill-2);color:var(--muted);
}
.sig-tag.exit{background:var(--fill-3);color:var(--text-2)}
.sig-reason{
  font-family:var(--f-mono);font-size:.6rem;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* The number and what it is, stacked, so an entry price can never be read as
   a result. */
.sig-val{
  grid-column:3;grid-row:1;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;
}
.sig-val-v{font-family:var(--f-mono);font-size:.86rem;font-weight:700;white-space:nowrap}
.sig-val-k{
  font-family:var(--f-mono);font-size:.54rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}

.sig-desc{
  grid-column:2/4;grid-row:2;
  font-size:.72rem;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* News stream */
.news-list{display:flex;flex-direction:column;max-height:352px;overflow-y:auto}
.news{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 14px;border-bottom:1px solid var(--hairline);
  text-align:left;width:100%;transition:background .15s;
}
.news:hover{background:var(--fill-1)}
.news:last-child{border-bottom:none}
.news-tk{
  font-family:var(--f-mono);font-size:.58rem;font-weight:700;
  padding:3px 6px;border-radius:4px;flex:none;min-width:52px;text-align:center;
  border:1px solid var(--line-soft);color:var(--muted);
}
.news.bullish .news-tk{color:var(--green);border-color:var(--green);background:var(--green-dim)}
.news.bearish .news-tk{color:var(--red);border-color:var(--red);background:var(--red-dim)}
.news-txt{font-size:.76rem;color:var(--text-2);line-height:1.5}

/* ── Focus mode ───────────────────────────────────────────────────────────── */

.focus-hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:20px;align-items:center;
  padding:20px 22px;margin-bottom:12px;
  border-radius:var(--r);border:1px solid var(--line-soft);
  background:
    radial-gradient(680px 220px at 8% 0%,var(--hero-tint,var(--accent-glow)),transparent 68%),
    var(--panel-grad);
  position:relative;overflow:hidden;
}
.fh-left{min-width:0}
.fh-id{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.fh-sym{font-family:var(--f-mono);font-size:clamp(2rem,4.4vw,3.1rem);font-weight:700;line-height:1;letter-spacing:-.02em}
.fh-name{font-size:.9rem;color:var(--muted)}
.fh-price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:12px}
.fh-price{font-family:var(--f-mono);font-size:clamp(1.4rem,3vw,2.1rem);font-weight:600}
.fh-chg{font-family:var(--f-mono);font-size:1rem;font-weight:700}
.fh-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.fh-right{display:flex;align-items:center;gap:22px}
.fh-chart{width:min(320px,36vw);height:92px}
.fh-chart svg{display:block;width:100%;height:100%}

.focus-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
}
.c3{grid-column:span 3}
.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c6{grid-column:span 6}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c12{grid-column:span 12}

/* Sentiment engine visual — the AI layer laid bare */
.engine-flow{display:flex;flex-direction:column;gap:9px}
.flow-step{
  display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;
  padding:9px 11px;border-radius:7px;
  border:1px solid var(--line-soft);background:var(--fill-1);
  position:relative;
}
.flow-step + .flow-step::before{
  content:'';position:absolute;left:23px;top:-9px;height:9px;width:1px;
  background:linear-gradient(180deg,transparent,var(--cyan));
}
.flow-n{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;
  border:1px solid var(--line);color:var(--accent);background:var(--accent-glow);
}
.flow-k{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.flow-d{font-size:.74rem;color:var(--text-2);line-height:1.4}
.flow-v{font-family:var(--f-mono);font-size:.86rem;font-weight:700;text-align:right;white-space:nowrap}

/* Bias meter */
.meter{margin:6px 0 14px}
.meter-scale{
  position:relative;height:8px;border-radius:4px;
  background:linear-gradient(90deg,rgba(255,93,108,.55),rgba(150,170,200,.18) 50%,rgba(53,221,146,.55));
  border:1px solid var(--line-soft);
}
.meter-needle{
  position:absolute;top:-6px;width:3px;height:20px;border-radius:2px;
  background:var(--text);box-shadow:0 0 12px var(--text);
  transform:translateX(-50%);
  transition:left 1.1s var(--ease);
}
.meter-ghost{
  position:absolute;top:-2px;width:2px;height:12px;border-radius:2px;
  background:var(--muted);transform:translateX(-50%);
  transition:left 1.1s var(--ease);
}
.meter-ticks{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--f-mono);font-size:.55rem;color:var(--dim)}

/* Headlines */
.headline-list{display:flex;flex-direction:column;gap:0;max-height:300px;overflow-y:auto}
.headline{
  display:flex;gap:9px;align-items:flex-start;
  padding:9px 0;border-bottom:1px solid var(--hairline);
  font-size:.78rem;color:var(--text-2);line-height:1.5;
}
.headline:last-child{border-bottom:none}
.headline .hn{font-family:var(--f-mono);font-size:.6rem;color:var(--dim);flex:none;padding-top:2px}

/* Parameter table */
.ptable{width:100%;font-family:var(--f-mono);font-size:.72rem}
.ptable td{padding:6px 0;border-bottom:1px solid var(--hairline)}
.ptable tr:last-child td{border-bottom:none}
.ptable td:first-child{color:var(--dim);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase}
.ptable td:last-child{text-align:right;color:var(--text);font-weight:600}

/* Peer comparison */
.peer-list{max-height:300px;overflow-y:auto;padding-right:4px}
.peer{display:flex;align-items:center;gap:9px;padding:5px 0}
.peer-sym{font-family:var(--f-mono);font-size:.66rem;width:52px;flex:none;color:var(--muted)}
.peer-bar{flex:1;height:5px;border-radius:3px;background:var(--fill-3);position:relative;overflow:hidden}
.peer-bar i{position:absolute;top:0;bottom:0;left:50%;border-radius:3px;background:var(--muted);transition:width .9s var(--ease),transform .9s var(--ease)}
.peer-bar.bullish i{background:var(--green)}
.peer-bar.bearish i{background:var(--red)}
.peer.self .peer-sym{color:var(--accent);font-weight:700}
.peer.self .peer-bar{box-shadow:0 0 0 1px var(--line-strong)}
.peer-val{font-family:var(--f-mono);font-size:.64rem;width:44px;text-align:right;flex:none;color:var(--text-2)}

/* Radar */
.radar{position:relative;aspect-ratio:1;max-width:230px;margin-inline:auto}
.radar svg{width:100%;height:100%;overflow:visible}
.radar-sweep{transform-origin:50% 50%;animation:spin 4.5s linear infinite}

/* ── Compare mode ─────────────────────────────────────────────────────────── */

.cmp-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cmp-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 8px 6px 12px;border-radius:100px;
  border:1px solid var(--line);background:var(--accent-glow);
  font-family:var(--f-mono);font-size:.7rem;font-weight:600;
}
.cmp-chip button{color:var(--dim);font-size:.9rem;line-height:1;padding:0 3px}
.cmp-chip button:hover{color:var(--red)}
.cmp-hint{font-family:var(--f-mono);font-size:.62rem;color:var(--dim)}

.cmp-table{width:100%;font-size:.78rem}
.cmp-table th,.cmp-table td{
  padding:9px 12px;text-align:right;
  border-bottom:1px solid var(--hairline);
  font-family:var(--f-mono);
}
.cmp-table th{
  font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
  border-bottom-color:var(--line);
}
.cmp-table td:first-child,.cmp-table th:first-child{
  text-align:left;color:var(--dim);font-size:.6rem;
  letter-spacing:.09em;text-transform:uppercase;
}
.cmp-table tbody tr:hover{background:var(--fill-1)}
.cmp-best{color:var(--green);font-weight:700}
.cmp-worst{color:var(--red);font-weight:700}

/* ── Tape ─────────────────────────────────────────────────────────────────── */

.ck-tape{
  position:sticky;bottom:0;z-index:55;
  height:var(--tape-h);
  display:flex;align-items:center;
  background:var(--chrome-solid);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.tape-label{
  flex:none;padding:0 13px;height:100%;
  display:flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);
  border-right:1px solid var(--line-soft);
  background:var(--green-dim);
}
.tape-track{flex:1;overflow:hidden;position:relative;height:100%}
.tape-move{
  display:flex;align-items:center;gap:26px;height:100%;
  white-space:nowrap;will-change:transform;
  /* max-content, or the box is the track's width and translateX(-50%) travels
     half a *screen* instead of half the content: the tape nudged 654px out of
     3430 and snapped back, over and over. Worst on a phone, where the track is
     narrow enough that the whole loop was under 200px. With the box wrapping
     its content, -50% is exactly one of the two copies and the seam lands
     where the list repeats. Duration comes from renderTape(). */
  width:max-content;
  animation:tapeScroll 92s linear infinite;
}
.ck-tape:hover .tape-move{animation-play-state:paused}
@keyframes tapeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape-item{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:.68rem}
.tape-item b{color:var(--text-2);font-weight:600}

/* ── States ───────────────────────────────────────────────────────────────── */

.skeleton{
  background:linear-gradient(90deg,var(--fill-2),var(--fill-3),var(--fill-2));
  background-size:200% 100%;
  animation:shimmer 1.5s linear infinite;
  border-radius:5px;color:transparent !important;
}
@keyframes shimmer{to{background-position:-200% 0}}

.empty{
  padding:28px 16px;text-align:center;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;
  color:var(--dim);text-transform:uppercase;
}

.ck-error{
  margin:10px 0;padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid var(--red);background:var(--red-dim);
  font-family:var(--f-mono);font-size:.7rem;color:var(--red);
  display:none;
}
.ck-error.on{display:block}

/* The moment new data lands, flash the changed number. This is the difference
   between "a page with numbers" and "an instrument you can watch". */
.flash-up{animation:flashUp .9s var(--ease)}
.flash-dn{animation:flashDn .9s var(--ease)}
@keyframes flashUp{0%{background:var(--green);border-radius:3px}100%{background:transparent}}
@keyframes flashDn{0%{background:var(--red);border-radius:3px}100%{background:transparent}}

/* ── CTA strip ────────────────────────────────────────────────────────────── */

.ck-cta{
  /* 12px on top, the same gap .focus-grid puts between its own panels, so the
     block reads as one more row rather than sitting flush against the last
     panel. It had none, which shows up on a phone where the grid collapses to
     one column and the CTA lands directly under Signal History. */
  margin:12px 0 14px;padding:18px 22px;
  border-radius:var(--r);border:1px solid var(--line);
  background:
    radial-gradient(560px 200px at 12% 0%,var(--accent-glow),transparent 70%),
    var(--panel-grad);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:16px 26px;
}
.ck-cta h2{font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:700;letter-spacing:-.022em}
/* The column already bounds it; the ch ceiling is only there so the line does
   not run past a comfortable measure on a very wide cockpit. */
.ck-cta p{font-size:.88rem;color:var(--muted);max-width:72ch;margin-top:5px;line-height:1.5}
.ck-cta .btn{white-space:nowrap}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width:1240px){
  .grid-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .brain-wrap{grid-column:1/-1}
  .c3,.c4,.c5{grid-column:span 6}
  .c7,.c8{grid-column:span 12}
}

@media (max-width:980px){
  .cockpit{--rail-w:0px}
  .ck-shell{
    grid-template-columns:1fr;
    /* The drawer's z-index:70 was being scoped by this element's own stacking
       context, so what actually met the scrim was the shell at z-index:1 — and
       lost. The scrim then covered the open drawer and took every touch, which
       is why the list would not scroll and the page behind moved instead.
       Nothing here needs its own layer once the rail is out of the grid. */
    z-index:auto;
  }
  .ck-rail{
    position:fixed;top:var(--top-h);left:0;bottom:var(--tape-h);
    /* Stretched between top and bottom rather than sized in viewport units.
       Both were set and height was winning, which meant the drawer's foot was
       wherever 100vh said it was rather than wherever the screen ends. */
    height:auto;
    width:270px;z-index:70;
    transform:translateX(-102%);
    transition:transform .3s var(--ease);
    background:var(--chrome-solid);
    box-shadow:var(--shadow-lg);
  }
  .ck-rail.open{transform:none}
  /* Dragging over the drawer's head — the title, the search, the sort row — has
     nothing scrollable under it, so without this the gesture chains straight to
     the document. */
  .rail-lock, .rail-lock body{overflow:hidden}
  .rail-toggle{display:inline-flex !important}
  .grid-top,.grid-bot{grid-template-columns:minmax(0,1fr)}
  .focus-hero{grid-template-columns:1fr}
  .fh-right{justify-content:space-between}
  .fh-chart{width:100%;max-width:none}
  /* One column below the tablet breakpoint: a half-width panel at 390px turns
     every label into a two-word column. */
  .c3,.c4,.c5,.c6,.c7,.c8{grid-column:span 12}
  /* Same as the marketing bar: the health chips carry flex:1 and were what
     pushed the clock and the CTA to the right edge. With them gone the brand
     takes the job, so the bar reads left-to-right edge instead of trailing off
     into empty space. */
  .ck-health{display:none}
  .ck-brand{margin-right:auto}
}


/* Below ~560px the topbar has to give something up: the wordmark shrinks, the
   CTA takes its short label, and the brain legend (which would sit on top of
   the nodes at this size) steps aside. */
@media (max-width:560px){
  .ck-top{gap:10px;padding:0 12px}
  .ck-brand{font-size:.95rem}
  .ck-clock{font-size:.64rem}
  .ck-top .btn{padding:8px 12px;font-size:.64rem}
  /* Kept, not hidden: the four stage names are the one thing that makes the
     graph legible at this size, where the node labels are already gone. They
     wrap into a list instead of sitting under their columns, and the graph
     gives up the bottom margin they need. */
  .brain-legend{
    left:12px;right:12px;bottom:8px;gap:4px 12px;font-size:.52rem;letter-spacing:.05em;
  }
  .brain-stat{right:12px}
  .brain-wrap .p-body{min-height:220px}
  .stage-bar{gap:8px}
  .gauges{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .ck-stage{padding:10px 12px 18px}

  /* Side by side, the figure column took almost half a phone's width and left
     the reason ellipsised to nothing. Stacked, everything gets the full row. */
  .sig{grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto auto;gap:4px 10px}
  .sig-side{grid-row:1/4;width:34px;height:34px;align-self:start;margin-top:2px}
  .sig-head{grid-column:2;grid-row:1}
  .sig-val{
    grid-column:2;grid-row:2;
    flex-direction:row;align-items:baseline;justify-content:flex-start;
    gap:8px;text-align:left;
  }
  .sig-desc{grid-column:2;grid-row:3}

  .tiles{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
  .ck-brand-sub{display:none}
  .ck-cta{grid-template-columns:minmax(0,1fr);justify-items:start}
  .ck-cta .btn{width:100%}
  .modes button{padding:7px 11px;font-size:.58rem}
}

.rail-toggle{display:none}
/* Starts below the topbar rather than at inset:0. The scrim is z-index 65 and
   .ck-top is 60, so a full-viewport scrim laid 60% black over the header and
   took its hit-testing with it: the brand, the live pill and the toggle that
   opens this drawer all went dark and dead, and the header read as gone.
   Offsetting is better than raising .ck-top above 65 -- the header background
   is translucent over a backdrop-filter, so it would have shown the dimmed
   page through itself and looked muddy instead of unchanged. .rail-lock
   freezes the scroll while the drawer is open, so the sticky header is pinned
   at 0 and --top-h is exactly the gap. */
.rail-scrim{
  position:fixed;inset:var(--top-h) 0 0 0;z-index:65;background:var(--scrim);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.rail-scrim.on{opacity:1;pointer-events:auto}

/* ── Editorial section under the cockpit ─────────────────────────────────────
   The cockpit is the site's most strategic page and carried the least prose of
   any of them. This block explains what the instruments mean — useful to a
   first-time reader, and the only substantial text a crawler can index here. */

.ck-copy{
  position:relative;z-index:1;
  margin:26px 18px 0;
  padding:clamp(30px,4vw,52px) 0 0;
  border-top:1px solid var(--line-soft);
}
.ck-copy-inner{max-width:78ch;margin-inline:auto;padding-bottom:56px}

.ck-copy h2{
  font-size:clamp(1.25rem,2.2vw,1.7rem);
  font-weight:700;letter-spacing:-.026em;
  margin:38px 0 14px;color:var(--text);
}
.ck-copy h2:first-child{margin-top:0}
.ck-copy h3{
  font-family:var(--f-sans);font-size:.98rem;font-weight:600;
  margin:24px 0 8px;color:var(--accent-lt);
}
.ck-copy p{color:var(--muted);font-size:.92rem;line-height:1.75;margin-bottom:14px}
.ck-copy p strong{color:var(--text-2);font-weight:600}
.ck-copy p em{color:var(--text-2);font-style:italic}
.ck-copy a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ck-copy a:hover{color:var(--accent-lt)}

.ck-copy-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin:12px 0 18px}
.ck-copy-list li{
  padding-left:16px;position:relative;
  color:var(--text-2);font-size:.86rem;line-height:1.6;
}
.ck-copy-list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:1px;background:var(--accent);transform:rotate(45deg);
}
.ck-copy-more{margin-top:18px;font-family:var(--f-mono);font-size:.76rem}

/* Glossary */
.ck-glossary{margin:16px 0 8px}
.ck-glossary dt{
  font-family:var(--f-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  margin-top:18px;
}
.ck-glossary dd{
  margin:5px 0 0;padding-left:14px;
  border-left:1px solid var(--line-soft);
  color:var(--muted);font-size:.88rem;line-height:1.7;
}

/* Crawlable index of the twenty assets */
.ck-asset-index{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:6px;margin:16px 0 8px;
}
.ck-asset-index a{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:9px;
  padding:9px 11px;border-radius:7px;
  border:1px solid var(--line-soft);background:var(--fill-1);
  text-decoration:none;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.ck-asset-index a:hover{border-color:var(--line-strong);background:var(--fill-2)}
.ck-asset-index a[aria-current="page"]{border-color:var(--line-strong);background:var(--accent-glow)}
.cai-sym{font-family:var(--f-mono);font-size:.76rem;font-weight:700;color:var(--text)}
.cai-name{
  font-size:.76rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cai-bias{
  font-family:var(--f-mono);font-size:.52rem;letter-spacing:.09em;
  text-transform:uppercase;padding:2px 6px;border-radius:3px;
  border:1px solid var(--line-soft);color:var(--muted);
}
.cai-bias.bullish{color:var(--green);border-color:var(--green);background:var(--green-dim)}
.cai-bias.bearish{color:var(--red);border-color:var(--red);background:var(--red-dim)}

.ck-copy-disclaimer{
  margin-top:34px;padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-size:.78rem !important;color:var(--dim) !important;
}

@media (max-width:640px){
  .ck-copy{margin-inline:12px}
  .ck-asset-index{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* The promo block's second column now carries two things: the ask, and the
   quieter way to pass the cockpit on to someone else. */
.ck-cta-act{
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
/* Exempt every pill, not just the sheet button. A bare .ck-share .share-btn
   beats .share-native{width:auto} and .share-copy{width:auto} on specificity,
   so anything left out of this list gets squashed to a square with its label
   hanging outside — which is exactly what happened to the sheet button once,
   and to Copy the moment it gained a word. The squares are the brand icons. */
.ck-share .share-btn:not(.share-native):not(.share-copy){width:30px}
.ck-share .share-btn{height:30px;border-radius:9px}
.ck-share .share-native,
.ck-share .share-copy{padding:0 12px}
.ck-share .share-btn svg{width:13px;height:13px}

@media (max-width:720px){
  .ck-cta-act{align-items:stretch}
  .ck-share{justify-content:center}
}