/* ═══════════════════════════════════════════════════════════════
   TRUSTYBULL · THE STYLESHEET
   One file. Phone and desktop are the same classes with breakpoint
   rules inside it — there is no second stylesheet and there must
   never be one again. app.css, app_desktop.css and base.css were
   deleted on 2026-08-15; the two-file split had 369 shared class
   names and every change had to be made twice.

   ⚠ FOUR RULES BELOW ARE LOAD-BEARING AND MUST NOT BE TIDIED:
     [hidden]{display:none!important}  — [hidden] is a UA rule and
        loses to any class that sets display. Without it five
        components render on top of each other.
     grid-template-columns:minmax(0,1fr) — a bare 1fr track expands
        to its content's min-width, and nowrap content pushed the
        app wider than the phone screen.
     .stage.stage--frozen — two classes, not one. A later .stage
        rule inside a breakpoint has equal specificity and wins.
     min-height:44px keyed off @media (hover:none),(max-width:899px)
        — NOT a width-only query. Tablets failed the audit when it
        was width-only.

   ── FONTS ARE SELF-HOSTED ────────────────────────────────────
   Bebas Neue, DM Sans, DM Mono, pulled from Google once and served
   from ../fonts. The target is a mid-range Android in India, and a
   blocked CDN there takes the whole type system down with it.
   Paths are RELATIVE so they survive the app moving off /tbull/.
   ═══════════════════════════════════════════════════════════════ */

/* latin-ext */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bebas-JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bebas-JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmmono-aFTU7PB1QTsUX8KYthSQBLyM.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmmono-aFTU7PB1QTsUX8KYthqQBA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmmono-aFTR7PB1QTsUX8KYvumzEY2tbZX9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmmono-aFTR7PB1QTsUX8KYvumzEYOtbQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/dmsans-rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   TRUSTYBULL · SHELL
   Pass 1 — frame, sheet chassis, empty-state component.
   Phone is an app. Desktop is an instrument. Same markup.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────── */
:root{
  /* the legacy ground — layered, never flat black */
  --ground:#08090d;
  --stage:#08090d;
  --raise:#0f1117;
  --sunk:#0b0c11;
  --panel:#161a24;

  --seam:rgba(255,255,255,.07);
  --seam-lit:rgba(255,255,255,.13);
  --seam-live:rgba(255,255,255,.34);

  --ink:#eceef3;
  --ink-2:#8b92a8;
  --ink-3:#4e5568;
  --ink-4:#363c4c;

  /* agents — working values */
  --scout:#5b8ff9;
  --lens:#FF9878;
  --pulse:#B4E86A;
  --hawk:#3FD3BA;
  --radar:#A79BFF;
  --bell:#f59e0b;
  --agent:var(--scout);

  /* price */
  --up:#16c784;
  --up-ink:#16c784;
  --down:#e5091a;
  --down-ink:#ff5764;
  --warn:#f59e0b;

  --logo-ink:#08090d;
  --logo-mark:#e5091a;
  --logo-horn:#D9D9D9;

  --display:'Bebas Neue',Impact,sans-serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,monospace;

  --t-hero:clamp(38px,9vw,62px);
  --t-lead:clamp(20px,4.6vw,24px);
  --t-body:15px;
  --t-micro:11px;
  --track-micro:.22em;

  --gap:20px;
  --gutter:20px;
  --rail-w:84px;
  --bar-h:60px;
  --topbar-h:64px;

  --r-sm:8px;
  --r:12px;
  --r-lg:16px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:120ms;
  --mid:200ms;
  --slow:340ms;

  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

/* ── 2 · RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  height:100%;
  background:var(--ground);
  color:var(--ink);
  font:400 var(--t-body)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--seam-live);outline-offset:2px}
/* [hidden] is a UA rule and loses to any class that sets display. it must not. */
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* app chrome should not feel like a document */
.rail,.tabbar,.topbar,.sheet__head,.sheet__foot{
  -webkit-user-select:none;user-select:none;
}

/* ── 3 · TYPE ROLES ─────────────────────────────────────────── */
.micro{
  font:500 var(--t-micro)/1.4 var(--mono);
  letter-spacing:var(--track-micro);
  text-transform:uppercase;
  color:var(--ink-3);
}
.hero{font-family:var(--display);font-weight:400;font-size:clamp(46px,6.4vw,96px);line-height:.86;letter-spacing:.02em}
.lead{font-size:var(--t-lead);line-height:1.4;max-width:34ch;font-weight:400}
.prose{color:var(--ink-2);max-width:44ch}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ── 4 · APP FRAME ──────────────────────────────────────────── */
.app{
  position:fixed;inset:0;
  display:grid;
  background:var(--ground);
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"topbar" "stage" "tabbar";
}

/* ── 4a · RAIL (wide only) ──────────────────────────────────── */
.rail{display:none;grid-area:rail}

/* ── 4b · TOPBAR + SEGMENTS ─────────────────────────────────── */
.topbar{
  grid-area:topbar;
  position:relative;
  padding-top:var(--safe-t);
  background:var(--ground);
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--seam);
}

.segs{
  display:flex;gap:0;align-items:stretch;
  overflow-x:auto;scrollbar-width:none;
  padding:0 var(--gutter);
  scroll-snap-type:x proximity;
}
.segs::-webkit-scrollbar{display:none}
.seg{
  position:relative;flex:none;scroll-snap-align:start;
  display:inline-flex;align-items:center;gap:9px;
  padding:18px 4px;margin-right:22px;
  font-family:var(--display);font-size:26px;letter-spacing:.05em;
  color:var(--ink-3);white-space:nowrap;
  transition:color var(--fast) var(--ease);
}
.seg:hover{color:var(--ink-2)}
.seg[aria-selected="true"]{color:var(--ink)}
.seg::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--logo-mark);border-radius:3px 3px 0 0;
  box-shadow:0 0 14px rgba(229,9,26,.5);
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--mid) var(--ease);
}
.seg[aria-selected="true"]::after{transform:scaleX(1)}
.seg__count{
  display:inline-flex;align-items:center;margin-top:-2px;
  padding:3px 8px;border-radius:100px;
  font:700 10px/1.2 var(--mono);letter-spacing:.08em;
  background:rgba(255,255,255,.06);color:var(--ink-2);
}
.seg[aria-selected="true"] .seg__count{background:rgba(229,9,26,.15);color:var(--down-ink)}

/* ── 4c · STAGE ─────────────────────────────────────────────── */
.stage{
  grid-area:stage;min-width:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:var(--stage);
  padding:0 var(--gutter) 40px;
}
/* the bloom — atmosphere, not decoration. one per stage, top-anchored */
.stage::before{
  content:"";position:sticky;top:0;display:block;
  height:0;
  box-shadow:0 -140px 220px 90px color-mix(in srgb,var(--agent) 7%,transparent);
  pointer-events:none;
}
@supports not (color:color-mix(in srgb,red 1%,blue)){
  .stage::before{box-shadow:0 -140px 220px 90px rgba(111,195,245,.07)}
}

/* ── 4d · TABBAR (phone + tablet portrait) ──────────────────── */
.tabbar{
  grid-area:tabbar;
  position:relative;
  display:grid;grid-template-columns:repeat(5,1fr);
  height:calc(var(--bar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:var(--ground);
}
.tabbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--seam);
}
.tab{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--ink-4);
  transition:color var(--fast) var(--ease);
}
.tab[aria-selected="true"]{color:var(--ink)}
/* the same seam device, on the opposite edge */
.tab::before{
  content:"";position:absolute;top:0;left:50%;width:34px;height:1px;
  margin-left:-17px;background:var(--seam-live);
  transform:scaleX(0);transition:transform var(--mid) var(--ease);
}
.tab[aria-selected="true"]::before{transform:scaleX(1)}
.tab__icon{width:21px;height:21px;flex:none}
.tab__name{font:400 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.tab__dot{
  position:absolute;top:11px;left:calc(50% + 11px);
  width:5px;height:5px;border-radius:50%;background:var(--logo-mark);
}

/* coins live in the rail only */
.tab__num{font:500 13px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dots{display:flex;gap:3px}
.dots i{width:3px;height:3px;border-radius:50%;background:currentColor}

/* ── 5 · EMPTY STATE (one component, eight fillings) ─────────── */
.empty{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:44px var(--gutter) 0;max-width:none;
}
.empty::after{
  content:"";position:absolute;right:-120px;top:-140px;width:620px;height:620px;z-index:0;
  pointer-events:none;background:radial-gradient(circle,rgba(91,143,249,.10),transparent 62%);
}
.empty > *{position:relative;z-index:1}
.empty__face{
  width:clamp(96px,11vw,132px);aspect-ratio:200/260;height:auto;flex:none;margin-bottom:24px;
  border-radius:var(--r);
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 52%,transparent 88%);
          mask-image:radial-gradient(ellipse at 50% 42%,#000 52%,transparent 88%);
}
.empty__kicker{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;padding:6px 13px;
  border-radius:100px;color:var(--agent);
  background:color-mix(in srgb,var(--agent) 10%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--agent) 32%,transparent);
  font-weight:700;letter-spacing:.22em;
}
.empty__head{margin-bottom:16px}
.empty__body{margin-bottom:30px;color:var(--ink-2);max-width:46ch;line-height:1.55}
.empty__facts{width:100%;max-width:44ch;margin-bottom:30px;border-radius:var(--r-sm);
  border:1px solid var(--seam);background:rgba(255,255,255,.014);overflow:hidden}
.empty__row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 17px;border-bottom:1px solid var(--seam);
}
.empty__row:last-child{border-bottom:0}
.empty__row dd{font-family:var(--display);font-size:22px;letter-spacing:.02em;color:var(--ink)}
.empty--urgent .empty__kicker{color:var(--ink)}

/* ── 6 · BUTTONS ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;
  font:400 18px/1 var(--display);letter-spacing:.05em;
  transition:background var(--fast) var(--ease),opacity var(--fast) var(--ease);
}
.btn--primary{background:var(--ink);color:var(--ground)}
.btn--primary:hover{background:#fff}
.btn--ghost{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--seam-lit)}
.btn--ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--seam-live)}
.btn--quiet{padding:0;color:var(--ink-2);min-height:44px}
.btn--quiet:hover{color:var(--ink)}
.btn--block{width:100%}

/* ── 7 · SHEET · ONE LAYOUT FOR EVERY DRAWER ────────────────────
   Agent on the left, data on the right. No variants — a form, a
   confirmation and a read-only ladder all sit in the same frame.
   Phone: art on top, panel below.
   ═══════════════════════════════════════════════════════════ */
.scrim{
  position:fixed;inset:0;z-index:40;background:rgba(3,4,8,.78);
  opacity:0;pointer-events:none;transition:opacity var(--mid) var(--ease);
}
.scrim[data-open]{opacity:1;pointer-events:auto}

.sheet{
  position:fixed;z-index:50;left:0;right:0;bottom:0;top:0;
  display:flex;flex-direction:column;
  background:var(--raise);
  transform:translateY(100%);
  transition:transform var(--slow) var(--ease);
}
.sheet[data-open]{transform:translateY(0)}
.sheet[data-drag]{transition:none}

.sheet__grab{
  position:absolute;top:10px;left:50%;margin-left:-18px;z-index:4;
  width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.32);
  touch-action:none;
}

/* the art half */
.sheet__art{
  position:relative;flex:none;height:38dvh;min-height:190px;overflow:hidden;touch-action:none;
}
.sheet__art svg{position:absolute;inset:0;width:100%;height:100%}
.sheet__art::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(to bottom,transparent,var(--raise));
}
/* a drawer with no agent still keeps the frame */
.sheet__art--mark{display:grid;place-items:center;background:var(--sunk)}
.sheet__art--mark svg{position:static;width:44%;height:auto;opacity:.5}

/* the data half */
.sheet__panel{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  padding:2px var(--gutter) 0;padding-bottom:var(--safe-b);
  overflow-y:auto;overscroll-behavior:contain;
}
.sheet__kicker{margin-bottom:11px;color:var(--agent)}
.sheet__title{
  font-family:var(--display);font-weight:400;letter-spacing:.02em;line-height:1;
  font-size:clamp(30px,6.8vw,42px);
}
.sheet__say{margin-top:15px;color:var(--ink-2);font-size:15px;line-height:1.5;max-width:40ch}
.sheet__foot{
  flex:none;display:flex;gap:10px;margin-top:auto;padding:18px 0 20px;
}
.sheet__foot .btn{flex:1 1 auto}
.sheet__foot--one .btn{flex:0 1 auto;min-width:180px}

/* ── 7c · DRAWER PARTS ─────────────────────────────────────────
   Shared by every drawer so they cannot drift apart.
   ═══════════════════════════════════════════════════════════ */
/* what a coin action costs, and what it leaves you with */
.cost{margin-top:20px;padding-top:16px;border-top:1px solid var(--seam)}
.cost__line{color:var(--ink)}
.balx{display:flex;align-items:baseline;gap:9px;margin-top:11px;
  font:500 13px/1 var(--mono);letter-spacing:.06em}
.balx__was{color:var(--ink-3)}
.balx__arrow{color:var(--ink-4)}
.balx__now{color:var(--ink)}

/* short reasons, one per line */
.says{margin:0;padding:0}
.says li{display:flex;gap:11px;padding:10px 0;color:var(--ink-2);
  border-bottom:1px solid var(--seam);font-size:14px;line-height:1.45}
.says li:last-child{border-bottom:0}
.says li::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;
  background:var(--agent)}

/* the ladder — always read top down in price order */
.ladder{border-top:1px solid var(--seam)}
.lrow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--seam)}
.lrow__k{font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.lrow__why{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-3);letter-spacing:0}
.lrow__v{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:.01em;color:var(--ink)}
.lrow--now{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent);
  margin:0 -12px;padding-left:12px;padding-right:12px}
.lrow--now .lrow__k{color:var(--ink)}
.lrow--top .lrow__k{color:var(--up-ink)}
.lrow--stop .lrow__k{color:var(--down-ink)}

/* the facts underneath */
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:22px;
  background:var(--seam);border:1px solid var(--seam);border-radius:var(--r-sm);overflow:hidden}
.f2 div{background:var(--raise);padding:13px 15px;min-width:0}
.f2 dt{font:700 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.f2 dd{margin-top:8px;font-family:var(--display);font-size:22px;line-height:1;color:var(--ink)}
.f2 dd.up{color:var(--up-ink)}

/* stepper for a price field */
.stepper{display:flex;align-items:stretch;gap:0;border-radius:var(--r-sm);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--seam-lit);background:var(--sunk)}
.stepper button{width:52px;flex:none;color:var(--ink-2);font-size:20px;
  transition:background var(--fast),color var(--fast)}
.stepper button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.stepper input{flex:1;min-width:0;background:none;border:0;color:var(--ink);text-align:center;
  font-family:var(--display);font-size:32px;letter-spacing:.02em;padding:14px 0}
.stepper input:focus{outline:0}
.nudges{display:flex;gap:8px;margin-top:12px}
.nudge{flex:1;padding:11px 0;border-radius:var(--r-sm);color:var(--ink-2);
  font:400 15px/1 var(--display);letter-spacing:.05em;
  box-shadow:inset 0 0 0 1px var(--seam-lit)}
.nudge:hover{color:var(--ink);background:rgba(255,255,255,.06)}

/* the drawn objects — one neutral weight, no green/red as trend */
.zn rect{fill:rgba(255,255,255,.035)}
.zn line{stroke:var(--seam-lit)}
.zn--res rect{fill:rgba(255,255,255,.022)}
.zn--lit rect{fill:rgba(180,232,106,.10)}
.zn--lit line{stroke:var(--pulse);stroke-opacity:.75}
.zn--retired rect{fill:url(#spent)}
.zn--retired line{stroke:var(--seam);stroke-dasharray:2 5}
.cd line{stroke:var(--ink-3)}
.cd rect{fill:var(--ink-3)}
.cd--d line{stroke:var(--ink-4)}
.cd--d rect{fill:var(--ink-4)}
.nowline{stroke:var(--ink);stroke-opacity:.85;stroke-dasharray:1 5}
.tr__l{stroke:var(--ink-2);stroke-dasharray:4 4}
.tr__d{fill:var(--ground);stroke:var(--ink-2);stroke-width:1.5}
.tr__x{fill:var(--down)}
.tr__gap{stroke:var(--down);stroke-width:2;stroke-opacity:.7}

/* ── 9 · GUEST ──────────────────────────────────────────────── */
.guest{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--ground);overflow:hidden}
.guest[hidden]{display:none}
.guest__wall{
  position:absolute;inset:-10%;z-index:0;opacity:.13;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:26px;align-content:start;
  filter:grayscale(.5);
}
.guest__wall svg{width:100%;height:auto;aspect-ratio:200/260}
.guest__body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--gutter);padding-top:var(--safe-t)}
.guest__mark{width:104px;height:30px;margin-bottom:auto;margin-top:22px}
.guest__line{font-family:var(--display);font-weight:400;font-size:clamp(52px,9vw,120px);line-height:.86;letter-spacing:.02em}
.guest__sub{margin-top:20px;color:var(--ink-2);max-width:44ch;font-size:17px;line-height:1.5}
.guest__acts{display:flex;flex-direction:column;gap:10px;margin-top:34px;margin-bottom:auto}
.guest__foot{position:relative;z-index:1;padding:18px var(--gutter);
  padding-bottom:calc(18px + var(--safe-b));border-top:1px solid var(--seam)}
.guest__legal{display:flex;flex-wrap:wrap;gap:22px;margin-top:14px}


/* ── 12 · HOME ──────────────────────────────────────────────────
   Four segments, four shapes: a deck, a list, a rail, chapters.
   No cards anywhere — panels, hairlines and space do the grouping.
   ═══════════════════════════════════════════════════════════ */

/* the Radar offer — an offer, not a toggle */
.offer{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;margin-top:4px;
  border-bottom:1px solid var(--seam);
}
.offer__text{color:var(--ink-2);font-size:14px;max-width:34ch}

/* SC-01 · the deck */
.deck{
  display:flex;gap:0;
  margin:0 calc(var(--gutter) * -1);
  padding:0;
  overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.deck::-webkit-scrollbar{display:none}

.pager{display:flex;gap:7px;justify-content:center;padding:22px 0 4px}
.pager__dot{width:5px;height:5px;background:var(--ink-4);transition:background var(--fast) var(--ease)}
.pager__dot[data-on]{background:var(--ink)}

/* SC-02 · open trades */
.rows{border-top:1px solid var(--seam);margin-top:8px}
.row{
  position:relative;display:block;width:100%;text-align:left;
  padding:17px 0 17px 16px;
  border-bottom:1px solid var(--seam);
}
.row__rail{position:absolute;left:0;top:17px;bottom:17px;width:2px;background:var(--ink-4)}
.row__rail--up{background:var(--up)}
.row__rail--down{background:var(--down)}
.row__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.row__sym{font-size:17px;font-weight:600;letter-spacing:-.01em}
.row__now{font:500 16px/1 var(--mono);font-variant-numeric:tabular-nums}
.row__bot{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:7px}
.row__meta{font:400 var(--t-micro)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* SC-03 · rules */
.rulechips{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);
  border-bottom:1px solid var(--seam);
}
.rulechips::-webkit-scrollbar{display:none}
.rulechip{
  position:relative;flex:none;padding:15px 15px;
  font:400 var(--t-micro)/1 var(--mono);letter-spacing:var(--track-micro);
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.rulechip:first-child{padding-left:0}
.rulechip[aria-selected="true"]{color:var(--ink)}
.rulechip::after{
  content:"";position:absolute;left:15px;right:15px;bottom:0;height:1px;background:var(--seam-live);
  transform:scaleX(0);transition:transform var(--mid) var(--ease);
}
.rulechip:first-child::after{left:0}
.rulechip[aria-selected="true"]::after{transform:scaleX(1)}
.rulechip__flag{
  display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:middle;
  background:var(--agent);
}

.finding{padding-top:34px;max-width:52ch}
.finding__head{margin-bottom:16px}
.finding__bar{
  position:relative;height:2px;background:rgba(255,255,255,.1);margin:26px 0 12px;
}
.finding__fill{position:absolute;left:0;top:0;bottom:0;background:var(--agent)}
.finding__limit{position:absolute;top:-5px;bottom:-5px;width:1px;background:var(--ink)}
.finding__scale{display:flex;justify-content:space-between;gap:14px}

/* SC-04 · alerts */
.verdict{padding:34px 0 0;max-width:34ch}
.verdict__line{font-size:clamp(22px,5.2vw,28px);line-height:1.22;letter-spacing:-.018em;margin-top:14px}
.chapters{
  display:flex;margin:34px calc(var(--gutter) * -1) 0;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;
}
.chapters::-webkit-scrollbar{display:none}
.chapter{
  flex:none;width:100%;scroll-snap-align:center;
  padding:26px var(--gutter);text-align:left;position:relative;
}
.chapter + .chapter::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:1px;background:var(--seam)
}
.chapter__price{font:500 clamp(26px,6.4vw,32px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.chapter__say{margin-top:14px;color:var(--ink-2);max-width:30ch}


/* ── 13 · FOUND ─────────────────────────────────────────────────
   Rebuilt on the legacy register: Bebas display, DM Mono labels at
   .22em, layered ground, 8–16px radii, mood-tinted grid + glow.
   70% content · 30% panel.
   ═══════════════════════════════════════════════════════════ */
.stage.stage--frozen{padding:0;overflow:hidden;display:flex;flex-direction:column}
.stage.stage--frozen > section{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

.found{
  position:relative;flex:1 1 auto;min-height:0;min-width:0;
  display:flex;flex-direction:column;
  padding:26px var(--gutter) 22px;
}
/* the mood-tinted grid, straight from sg-hero */
.found::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--dir-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--dir-grid) 1px,transparent 1px);
  background-size:56px 56px;
}
.found::after{
  content:"";position:absolute;right:-160px;top:-190px;width:720px;height:720px;
  z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--dir-glow),transparent 60%);
}
.found--up{--dir-grid:rgba(22,199,132,.025);--dir-glow:rgba(22,199,132,.14);
  --dir-ink:var(--up-ink);--dir-line:rgba(22,199,132,.32);--dir-fill:rgba(22,199,132,.10)}
.found--down{--dir-grid:rgba(229,9,26,.025);--dir-glow:rgba(229,9,26,.14);
  --dir-ink:var(--down-ink);--dir-line:rgba(229,9,26,.32);--dir-fill:rgba(229,9,26,.10)}
.found > *{position:relative;z-index:1}

.found__top{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.navpair{display:flex;align-items:center;gap:8px;flex:none}
.navpair__n{padding:0 2px;white-space:nowrap}
.navbtn{
  width:48px;height:48px;display:grid;place-items:center;border-radius:50%;flex:none;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.72);
  transition:background var(--fast),color var(--fast),transform .1s;
}
.navbtn:hover{background:rgba(0,0,0,.6);color:#fff}
.navbtn:active{transform:scale(.95)}
.navbtn svg{width:13px;height:13px}

/* one eyebrow pill with inner ticks — the legacy pattern */
.found__hero{flex:none;display:flex;flex-direction:column;padding-top:10px}
.eyebrow{
  align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  padding:6px 13px;border-radius:100px;margin-bottom:20px;
  background:var(--dir-fill);border:1px solid var(--dir-line);color:var(--dir-ink);
  font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 10px currentColor;animation:tb-pulse 1.8s ease-in-out infinite}
@keyframes tb-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.eyebrow__tick{margin-left:4px;padding-left:10px;border-left:1px solid var(--dir-line);
  color:rgba(255,255,255,.5)}

.found__sym{
  font-family:var(--display);font-weight:400;
  font-size:clamp(62px,8.6vw,150px);line-height:.82;letter-spacing:.005em;color:var(--ink);
}
.found__meta{margin-top:14px;font-size:12px;letter-spacing:.25em;color:var(--ink-3)}
/* ⚠ NOT .dot. That class is the absolutely-positioned mark used on the little
   charts (.dot--entry, .dot--tip, .dot--creep, .dot--hit), and its
   position:absolute took this typographic separator out of flow — the "·"
   between the name, the exchange and the time vanished, so the meta line read
   "TATA CONSULTANCY SERV LTNSEFOUND 08:47". One class was doing two unrelated
   jobs; the separator is the one that got a name of its own. */
.found__meta .sep{color:var(--logo-mark);margin:0 10px}

.pricerow{display:flex;flex-wrap:wrap;align-items:baseline;gap:22px;margin:26px 0 18px}
.ltp{font-family:var(--display);font-size:clamp(44px,5.4vw,72px);line-height:1;
  letter-spacing:.01em;color:var(--ink)}
.ltp__cur{color:var(--ink-3);font-size:.56em;margin-right:4px}
.chg{font:500 clamp(15px,1.9vh,20px)/1 var(--mono);padding:5px 12px;border-radius:var(--r-sm)}
.chg--up{color:var(--up-ink);background:rgba(22,199,132,.12)}
.chg--down{color:var(--down-ink);background:rgba(229,9,26,.12)}

.found__say{flex:none;margin:0 0 22px;font-size:clamp(15px,1.9vh,17px);
  line-height:1.5;max-width:56ch;color:var(--ink-2)}

/* ── the band, in the legacy rail + floor-cells shape ───────── */
.band{flex:none}
.rail-xl{
  position:relative;height:clamp(54px,7.4vh,72px);border-radius:var(--r-sm);
  overflow:hidden;display:flex;
}
.rail-xl__risk{background:linear-gradient(to right,rgba(229,9,26,.30),rgba(229,9,26,.07))}
.rail-xl__gain{background:linear-gradient(to right,rgba(22,199,132,.07),rgba(22,199,132,.30))}
.rail-xl__risk,.rail-xl__gain{position:relative;display:flex;align-items:center;min-width:0;padding:0 16px}
.rail-xl__k{font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.rail-xl__v{font:500 clamp(13px,1.8vh,16px)/1 var(--mono);margin-top:7px}
.rail-xl__lab{display:flex;flex-direction:column}
.rail-xl__gain .rail-xl__lab{margin-left:auto;text-align:right}
.rail-xl__risk .rail-xl__k,.rail-xl__risk .rail-xl__v{color:var(--down-ink)}
.rail-xl__gain .rail-xl__k,.rail-xl__gain .rail-xl__v{color:var(--up-ink)}
.rail-xl__dot{
  position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:var(--mark);box-shadow:0 0 22px 5px var(--markGlow),0 0 0 3px var(--ground);z-index:3;
}
.rail-xl__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--mark);animation:sg-ping 2.2s ease-out infinite}
@keyframes sg-ping{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.28);opacity:0}}
.rail-xl__dot--up{--mark:var(--up);--markGlow:rgba(22,199,132,.45)}
.rail-xl__dot--down{--mark:var(--down);--markGlow:rgba(229,9,26,.45)}
.rail-xl__pipe{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.85);z-index:2}

.floor{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;
  border:1px solid var(--seam);border-radius:var(--r-sm);
  background:rgba(255,255,255,.014);overflow:hidden}
.fcell{padding:clamp(12px,1.7vh,18px) 18px;border-right:1px solid var(--seam);min-width:0}
.fcell:last-child{border-right:0}
.fcell__lbl{font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.fcell__val{display:block;margin-top:11px;font-family:var(--display);
  font-size:clamp(22px,3vh,32px);line-height:1;letter-spacing:.01em;color:var(--ink)}
.fcell__aux{display:block;margin-top:9px;font:400 12px/1.35 var(--mono);color:var(--ink-3)}
.fcell--stop .fcell__lbl{color:var(--down-ink)}
.fcell--tgt .fcell__lbl{color:var(--up-ink)}

/* ── actions: two treatments ────────────────────────────────── */
.acts{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:22px;margin-bottom:auto}
.acts .btn{min-height:46px;padding:0 22px;border-radius:var(--r-sm);font-size:19px}
.btn--ghost{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--seam-lit);background:rgba(255,255,255,.02)}
.btn[disabled]{opacity:.38;pointer-events:none}
.btn--ghost:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.btn--on{background:var(--up);color:#05130d;box-shadow:none}
.btn--on:hover{background:#2fd696}
.acts__gap{width:10px;flex:none}

/* ── 13b · THE PANEL — Scout's sieve, same register ─────────── */
.aside{display:none;grid-area:aside;position:relative;overflow:hidden;
  flex-direction:column;background:var(--stage)}
.aside::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--dir-grid,rgba(22,199,132,.025)) 1px,transparent 1px),
                   linear-gradient(90deg,var(--dir-grid,rgba(22,199,132,.025)) 1px,transparent 1px);
  background-size:56px 56px;
}
.aside::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:140px;z-index:0;pointer-events:none;
  background:linear-gradient(to right,var(--ground),transparent);
}
.aside > *{position:relative;z-index:1}
/* one caption, placed by the visual that needs it */
.pcap{position:absolute;left:var(--gutter);right:var(--gutter);
  font:700 11px/1.4 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4)}
.pcap b{color:var(--ink-2);font-weight:700}

.sieve{flex:1 1 auto;min-height:0;position:relative}
.sieve__line{position:absolute;left:var(--gutter);right:var(--gutter);top:56vh;height:1px;
  background:linear-gradient(to right,transparent,rgba(91,143,249,.55),transparent)}
.sieve .pcap{top:56vh;margin-top:18px;text-align:center}
.mote{position:absolute;top:-28px;
  font:400 11px/1 var(--mono);letter-spacing:.12em;color:var(--ink-4);white-space:nowrap;
  opacity:0;animation:fall var(--dur) linear var(--del) infinite}
@keyframes fall{
  0%{opacity:0;transform:translateY(0)}
  10%{opacity:.5}
  52%{opacity:.5;transform:translateY(var(--stop))}
  62%,100%{opacity:0;transform:translateY(calc(var(--stop) + 14px))}
}
.mote--kept{color:var(--scout);font-weight:500;
  text-shadow:0 0 14px rgba(91,143,249,.7);
  animation:pass var(--dur) var(--ease) var(--del) infinite}
@keyframes pass{
  0%{opacity:0;transform:translateY(0)}
  8%{opacity:1}
  58%{transform:translateY(var(--stop))}
  74%,92%{opacity:1;transform:translateY(var(--land))}
  100%{opacity:0;transform:translateY(var(--land))}
}


/* the F&O switch, right of the segments */
.topbar__row{display:flex;align-items:center;min-width:0;overflow:hidden}
.segs{flex:1 1 auto;min-width:0}
.rtog{flex:none;display:flex;align-items:center;gap:10px;height:var(--topbar-h);
  padding:0 var(--gutter) 0 16px;color:var(--ink-3);transition:color var(--fast)}
.rtog:hover{color:var(--ink-2)}
.rtog[data-on]{color:var(--ink)}
.sw{position:relative;width:34px;height:19px;border-radius:999px;flex:none;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--seam-lit);
  transition:background var(--mid)}
.sw__knob{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--ink-3);transition:transform var(--mid),background var(--mid)}
.rtog[data-on] .sw{background:rgba(167,155,255,.28);box-shadow:inset 0 0 0 1px rgba(167,155,255,.5)}
.rtog[data-on] .sw__knob{transform:translateX(15px);background:var(--radar);box-shadow:0 0 10px 1px var(--radar)}

@media (prefers-reduced-motion:reduce){
  .check,.gauge__fill,.col__floor{animation:none}
  .mote{animation:none;opacity:.3;transform:translateY(var(--stop))}
  .mote--kept{opacity:1;transform:translateY(var(--land))}
  .eyebrow__dot,.aside__live i,.rail-xl__dot::after{animation:none}
}

/* ── 15 · OPEN · the first list screen ─────────────────────────
   Filters pinned, list scrolls inside the frame. A row is a button:
   tapping it opens the same Full trade drawer as Found.
   ═══════════════════════════════════════════════════════════ */
.open{position:relative;flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column}
.open::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:56px 56px;
}
.open > *{position:relative;z-index:1}

.filters{
  flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:22px;
  padding:20px var(--gutter) 18px;border-bottom:1px solid var(--seam);
}
.fgroup{display:flex;gap:8px;min-width:0}
.fpill{
  padding:8px 14px;border-radius:100px;white-space:nowrap;
  font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--seam-lit);
  transition:color var(--fast),background var(--fast),box-shadow var(--fast);
}
.fpill:hover{color:var(--ink-2)}
.fpill[aria-pressed="true"]{color:var(--ink);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--seam-live)}
.fcount{margin-left:auto;color:var(--ink-3)}

.olist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--gutter)}
.orow{
  position:relative;display:flex;align-items:center;gap:20px;width:100%;text-align:left;
  padding:20px 0;border-bottom:1px solid var(--seam);
  transition:background var(--fast);
}
.orow:hover{background:rgba(255,255,255,.03)}
.orow__bar{position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:2px}
.orow__bar--up{background:var(--up)}
.orow__bar--down{background:var(--down)}
.orow__id{min-width:0;flex:1 1 auto;padding-left:18px}
.orow__sym{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);line-height:1;
  letter-spacing:.02em;color:var(--ink);display:block}
.orow__meta{display:block;margin-top:9px;font:400 12px/1.35 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.orow__move{flex:none;text-align:right}
.orow__pct{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);line-height:1;letter-spacing:.02em}
.orow__abs{display:block;margin-top:9px;font:400 12px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.orow__pct.up{color:var(--up-ink)}
.orow__pct.down{color:var(--down-ink)}
.orow__go{flex:none;color:var(--ink-4);transition:color var(--fast)}
.orow:hover .orow__go{color:var(--ink-2)}
.orow__go svg{width:12px;height:12px}
.onone{padding:44px 0;color:var(--ink-3)}

/* ── the panel for Open: Scout's ratchet ────────────────────────
   Stops only ever climb. The stair is the promise, drawn.
   ═══════════════════════════════════════════════════════════ */
.ratchet{flex:1 1 auto;min-height:0;position:relative;display:grid;place-items:center;
  padding:0 var(--gutter)}
.stair{position:relative;width:100%;height:min(42vh,300px)}
.stair__step{
  position:absolute;height:2px;background:var(--scout);border-radius:2px;
  box-shadow:0 0 12px 1px rgba(91,143,249,.5);
  opacity:0;transform-origin:left center;
  animation:stepin 9s var(--ease) var(--del) infinite;
}
.stair__riser{position:absolute;width:1px;background:rgba(91,143,249,.32);
  opacity:0;animation:stepin 9s var(--ease) var(--del) infinite}
@keyframes stepin{
  0%{opacity:0;transform:scaleX(.2)}
  8%,80%{opacity:1;transform:scaleX(1)}
  92%,100%{opacity:0;transform:scaleX(1)}
}
.stair__floor{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--seam)}
.ratchet .pcap{bottom:-34px;text-align:center}

@media (max-width:599px){
  .filters{gap:14px;padding:16px var(--gutter) 14px}
  .fpill{padding:7px 12px;letter-spacing:.16em}
  .fcount{display:none}
  .orow{padding:16px 0;gap:14px}
  .orow__meta{letter-spacing:.1em;font-size:11px}
  .orow__sym{font-size:26px}
  .orow__pct{font-size:26px}
  .orow__go{display:none}
}

/* ── 16 · RULES · Hawk's rulebook ──────────────────────────────
   Nine chips, always all nine, each carrying its finding count.
   One rule shown at a time; several stocks failing one rule stack.
   ═══════════════════════════════════════════════════════════ */
.rules{position:relative;flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column}
.rules::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(63,211,186,.02) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(63,211,186,.02) 1px,transparent 1px);
  background-size:56px 56px;
}
.rules > *{position:relative;z-index:1}

.rules__head{flex:none;padding:22px var(--gutter) 0}
.rules__verdict{font-family:var(--display);font-size:clamp(30px,3.4vw,46px);line-height:1;
  letter-spacing:.02em;color:var(--ink)}
.rules__sub{margin-top:12px}

/* the chip rail — every rule, with its count */
.rrail{
  flex:none;display:flex;gap:8px;margin-top:20px;padding:0 var(--gutter) 18px;
  overflow-x:auto;overscroll-behavior-x:contain;border-bottom:1px solid var(--seam);
}
.rchip{
  flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:100px;
  font:700 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--seam-lit);white-space:nowrap;
  transition:color var(--fast),background var(--fast),box-shadow var(--fast);
}
.rchip:hover{color:var(--ink-2)}
.rchip[aria-selected="true"]{color:var(--ink);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--seam-live)}
.rchip__n{
  min-width:20px;padding:3px 6px;border-radius:100px;text-align:center;
  font-size:10px;letter-spacing:.06em;background:rgba(255,255,255,.06);color:var(--ink-3);
}
.rchip--hit .rchip__n{background:rgba(63,211,186,.16);color:var(--hawk)}
.rchip--hit{color:var(--ink-2)}

/* the finding body */
.rbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:26px var(--gutter) 24px}
.rtitle{display:flex;align-items:center;gap:12px}
.rtitle h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.8vw,36px);
  line-height:1;letter-spacing:.02em;color:var(--ink)}
.rwhy{
  width:26px;height:26px;flex:none;border-radius:50%;color:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--seam-lit);font:700 12px/1 var(--mono);
  display:grid;place-items:center;transition:color var(--fast),box-shadow var(--fast);
}
.rwhy:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--seam-live)}

.find{margin-top:26px;padding-top:22px;border-top:1px solid var(--seam)}
.find:first-of-type{border-top:0;padding-top:0}
.find__who{font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.hbar{position:relative;height:10px;border-radius:5px;margin-top:14px;
  background:rgba(255,255,255,.06);overflow:visible}
.hbar__fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;
  background:linear-gradient(90deg,rgba(63,211,186,.55),var(--hawk))}
.hbar__limit{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--ink);border-radius:2px}
.hscale{display:flex;justify-content:space-between;gap:16px;margin-top:12px}
.hscale b{display:block;margin-top:7px;font-family:var(--display);font-size:24px;
  line-height:1;letter-spacing:.01em;color:var(--ink)}
.hscale .over b{color:var(--hawk)}
.always{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:8px 14px;
  border-radius:100px;color:var(--hawk);
  background:rgba(63,211,186,.10);box-shadow:inset 0 0 0 1px rgba(63,211,186,.32);
  font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.find__say{margin-top:16px;color:var(--ink-2);line-height:1.55;max-width:52ch}

.todo{margin-top:28px;padding-top:20px;border-top:1px solid var(--seam)}
.todo__k{color:var(--hawk)}
.todo__p{margin-top:12px;color:var(--ink);line-height:1.55;max-width:52ch}
.rfoot{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

.clean{padding-top:26px;color:var(--ink-2);max-width:48ch;line-height:1.55}

/* the ? tip */
.tip{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:24px}
.tip[data-open]{display:grid}
.tip__box{width:min(460px,100%);background:var(--raise);border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--seam-lit),0 40px 120px rgba(0,0,0,.6);padding:26px}
.tip__k{color:var(--hawk)}
.tip__t{margin-top:12px;font-family:var(--display);font-size:30px;line-height:1;letter-spacing:.02em}
.tip__p{margin-top:14px;color:var(--ink-2);line-height:1.55}
.tip__box .btn{margin-top:22px;width:100%}

/* Rules panel: the nine checks running */
.checks{flex:1 1 auto;min-height:0;position:relative;display:grid;place-items:center;padding:0 var(--gutter)}
.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,30px)}
.check{
  width:clamp(46px,6vw,68px);aspect-ratio:1;border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--seam-lit);display:grid;place-items:center;
  animation:sweepin 6s var(--ease) var(--del) infinite;
}
.check i{width:9px;height:9px;border-radius:50%;background:var(--ink-4);display:block}
.check--flag i{background:var(--hawk);box-shadow:0 0 14px 3px rgba(63,211,186,.6)}
@keyframes sweepin{
  0%,4%{box-shadow:inset 0 0 0 1px var(--seam)}
  10%,72%{box-shadow:inset 0 0 0 1px var(--seam-lit)}
  100%{box-shadow:inset 0 0 0 1px var(--seam)}
}
.check--flag{box-shadow:inset 0 0 0 1px rgba(63,211,186,.45)}
.checks .pcap{bottom:-40px;text-align:center}

@media (max-width:599px){
  .rules__head{padding-top:16px}
  .rrail{margin-top:14px;padding-bottom:14px}
  .rbody{padding:20px var(--gutter)}
  .rfoot .btn{flex:1 1 42%}
}

/* ── 17 · ALERTS · Bell's watches ──────────────────────────────
   Two states, one list. A reached alert has stopped working and is
   on a clock — the row has to say so, not just look different.
   ═══════════════════════════════════════════════════════════ */
.shead{flex:none;padding:22px var(--gutter) 0}
.shead__v{font-family:var(--display);font-size:clamp(30px,3.4vw,46px);line-height:1;
  letter-spacing:.02em;color:var(--ink)}
.shead__s{margin-top:12px}

.arow{
  position:relative;display:flex;align-items:center;gap:20px;width:100%;text-align:left;
  padding:20px 0;border-bottom:1px solid var(--seam);transition:background var(--fast);
}
.arow:hover{background:rgba(255,255,255,.03)}
.arow__bar{position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:2px;
  background:var(--ink-4)}
.arow--rang .arow__bar{background:var(--bell);box-shadow:0 0 10px 1px rgba(245,158,11,.5)}
.arow__id{min-width:0;flex:1 1 auto;padding-left:18px}
.arow__sym{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);line-height:1;
  letter-spacing:.02em;color:var(--ink);display:block}
.arow__meta{display:block;margin-top:9px;font:400 12px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.arow__right{flex:none;text-align:right}
.arow__price{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);line-height:1;
  letter-spacing:.02em;color:var(--ink)}
.arow__price.rang{color:var(--bell)}
.arow__note{display:block;margin-top:9px;font:400 12px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.arow__clock{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:5px 10px;border-radius:100px;
  font:700 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--seam-lit);
}
.anote{
  display:flex;gap:11px;align-items:flex-start;margin:0 0 4px;padding:14px 0 16px;
  border-bottom:1px solid var(--seam);color:var(--ink-3);font-size:13.5px;line-height:1.5;
}
.anote::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;margin-top:7px;background:var(--bell)}

/* Alerts panel: Bell listening, and the one that rang */
.gauges{flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column;
  justify-content:center;gap:26px;padding:0 var(--gutter)}
.gauge{padding:0}
.gauge__track{position:relative;height:3px;border-radius:2px;background:rgba(255,255,255,.07)}
.gauge__fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--bell);
  animation:creep 6s var(--ease) var(--del) infinite}
@keyframes creep{0%,100%{opacity:.5}50%{opacity:1}}
.gauge__mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);border-radius:2px}
.gauges .pcap{bottom:-40px;text-align:center}
.ring{position:relative;width:100%;height:110px;flex:none;display:grid;place-items:center}
.ring i{position:absolute;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--bell);opacity:0;animation:ringout 4.4s var(--ease) var(--del) infinite}
@keyframes ringout{0%{transform:scale(.6);opacity:.85}70%,100%{transform:scale(3.6);opacity:0}}
.ring b{width:9px;height:9px;border-radius:50%;background:var(--bell);
  box-shadow:0 0 16px 3px rgba(245,158,11,.6)}

@media (max-width:599px){
  .shead{padding-top:16px}
  .arow{padding:16px 0;gap:14px}
  .arow__sym,.arow__price{font-size:26px}
}

/* ── 18 · TRACKING · the floor under what she owns ─────────────
   A track has no status and no entry price — it is a subscription
   to a stock. So the row's number is the floor, not a P&L.
   ═══════════════════════════════════════════════════════════ */
.trow{
  position:relative;display:flex;align-items:center;gap:20px;width:100%;text-align:left;
  padding:20px 0;border-bottom:1px solid var(--seam);transition:background var(--fast);
}
.trow:hover{background:rgba(255,255,255,.03)}
.trow__bar{position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:2px;background:var(--bell)}
.trow--broke .trow__bar{background:var(--down)}
.trow--nofloor .trow__bar{background:var(--warn)}
.trow__id{min-width:0;flex:1 1 auto;padding-left:18px}
.trow__sym{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);line-height:1;
  letter-spacing:.02em;color:var(--ink);display:block}
.trow__meta{display:block;margin-top:9px;font:400 12px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.trow__right{flex:none;text-align:right}
.trow__stop{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);line-height:1;
  letter-spacing:.02em;color:var(--ink)}
.trow__stop.warn{color:var(--warn)}
.trow__note{display:block;margin-top:9px;font:400 12px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.trow__told{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:5px 10px;
  border-radius:100px;font:700 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--seam-lit)}
.trow--broke .trow__told{color:var(--down-ink);box-shadow:inset 0 0 0 1px rgba(229,9,26,.32);
  background:rgba(229,9,26,.08)}

/* the move history, inside the drawer */
.hist{margin-top:22px;border-top:1px solid var(--seam)}
.hevt{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--seam)}
.hevt__t{min-width:0;color:var(--ink-2);font-size:13.5px;line-height:1.45}
.hevt__t b{color:var(--ink);font-weight:400;font-family:var(--mono);font-size:13px}
.hevt__d{flex:none;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.hevt--broke .hevt__t b{color:var(--down-ink)}

/* Tracking panel: the floor filling in beneath price */
.floors{flex:1 1 auto;min-height:0;display:flex;gap:clamp(12px,2vw,22px);align-items:flex-end;
  padding:0 var(--gutter) 0;margin:auto 0}
.col{flex:1;min-width:0;position:relative;height:min(44vh,320px);
  border-bottom:1px solid var(--seam)}
.col__price{position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px;
  box-shadow:0 0 12px 1px rgba(255,255,255,.35)}
.col__floor{position:absolute;left:0;right:0;bottom:0;border-radius:3px 3px 0 0;
  background:linear-gradient(to top,rgba(245,158,11,.34),rgba(245,158,11,.10));
  box-shadow:inset 0 1px 0 var(--bell);
  animation:rise 7s var(--ease) var(--del) infinite;
}
@keyframes rise{
  0%{height:var(--h0)}
  46%,84%{height:var(--h1)}
  100%{height:var(--h0)}
}
.col--broke .col__floor{background:linear-gradient(to top,rgba(229,9,26,.30),rgba(229,9,26,.08));
  box-shadow:inset 0 1px 0 var(--down);animation:none;height:var(--h1)}
.col--nofloor .col__floor{background:repeating-linear-gradient(45deg,rgba(245,158,11,.14) 0 6px,transparent 6px 12px);
  box-shadow:none;animation:none;height:14px}
.floors{position:relative}
.floors .pcap{bottom:-40px;text-align:center}

@media (max-width:599px){
  .trow{padding:16px 0;gap:14px}
  .trow__sym,.trow__stop{font-size:26px}
}

/* ── 19 · AGENTS ───────────────────────────────────────────────
   The crew is one thing, not four — it starts and stops together.
   Radar is a switch. Bell and Track are bought one at a time.
   Every price comes from one place so the two screens cannot
   disagree with each other.
   ═══════════════════════════════════════════════════════════ */
.agents{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--gutter) 30px}
.block{
  margin-top:14px;border:1px solid var(--seam);border-radius:var(--r);
  background:rgba(255,255,255,.014);padding:22px;
}
.block--on{border-color:rgba(22,199,132,.28);background:rgba(22,199,132,.045)}
.block__top{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.block__id{flex:1 1 auto;min-width:0}
.block__k{color:var(--ink-3)}
.block__t{margin-top:10px;font-family:var(--display);font-size:clamp(26px,2.6vw,34px);
  line-height:1;letter-spacing:.02em;color:var(--ink)}
.block__say{margin-top:12px;color:var(--ink-2);font-size:14.5px;line-height:1.5;max-width:46ch}
.block__price{flex:none;text-align:right}
.block__n{font-family:var(--display);font-size:clamp(34px,3.6vw,50px);line-height:1;
  letter-spacing:.02em;color:var(--ink)}
.block__u{display:block;margin-top:8px}
.block__when{display:block;margin-top:8px;color:var(--ink-4)}
.block__foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--seam)}

.faces{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.face{width:56px;aspect-ratio:200/260;border-radius:var(--r-sm);
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%);
          mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%)}
.facewrap{text-align:center}
.facewrap span{display:block;margin-top:6px;font:700 10px/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

.burn{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:14px;padding:20px 22px;border-radius:var(--r);
  border:1px solid var(--seam-lit);background:rgba(255,255,255,.03);width:100%;text-align:left;
}
.burn__n{font-family:var(--display);font-size:clamp(28px,3vw,40px);line-height:1;color:var(--ink)}

/* what they cost */
.costs{border-top:1px solid var(--seam);margin-top:8px}
.crow{display:flex;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--seam)}
.crow__id{flex:1 1 auto;min-width:0}
.crow__t{font-family:var(--display);font-size:clamp(24px,2.4vw,30px);line-height:1;
  letter-spacing:.02em;color:var(--ink);display:block}
.crow__w{display:block;margin-top:9px;color:var(--ink-2);font-size:14px}
.crow__when{display:block;margin-top:7px;color:var(--ink-4);font:400 12px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase}
.crow__p{flex:none;text-align:right}
.crow__n{font-family:var(--display);font-size:clamp(28px,3vw,42px);line-height:1;color:var(--ink)}
.crow__u{display:block;margin-top:7px}
.closing{margin-top:22px;color:var(--ink-3);font-size:13.5px}

/* Agents panel: the crew at work, on demand ones waiting */
.orbit{flex:1 1 auto;min-height:0;position:relative;display:grid;place-items:center}
.orbs{display:flex;gap:clamp(10px,1.6vw,18px)}
.orb{width:clamp(38px,4.4vw,54px);aspect-ratio:200/260;border-radius:var(--r-sm);position:relative;
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%);
          mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%);
  opacity:.28;animation:wake 6s var(--ease) var(--del) infinite}
.orb--idle{animation:none;opacity:.16}
@keyframes wake{0%,72%,100%{opacity:.24;filter:none}
  18%,44%{opacity:1;filter:drop-shadow(0 0 14px rgba(91,143,249,.5))}}
.orbit .pcap{bottom:-38px;text-align:center}

/* Cost panel: what leaves every morning */
.spend{flex:1 1 auto;min-height:0;position:relative;display:grid;place-items:center;padding:0 var(--gutter)}
.coins{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(7px,1vw,12px);width:100%}
.coin{aspect-ratio:1;border-radius:50%;background:rgba(245,158,11,.16);
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.35);
  animation:spend 7s var(--ease) var(--del) infinite}
@keyframes spend{0%,40%{opacity:1;transform:none}
  62%,100%{opacity:0;transform:translateY(14px) scale(.7)}}
.spend .pcap{bottom:-38px;text-align:center}

@media (max-width:599px){
  .block{padding:18px}
  .block__price{text-align:left}
  .crow{gap:14px;padding:18px 0}
}

/* ── 20 · SCANNER · Lens ───────────────────────────────────────
   Phone shows the list or the answer. A wide screen shows both,
   which is the one real desktop win in the whole app.
   ═══════════════════════════════════════════════════════════ */
.scan{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.scan__search{flex:none;padding:22px var(--gutter) 0}
/* the search bar is the screen — Lens is why anyone opens Scanner */
.searchbox{display:flex;align-items:center;gap:16px;padding:0 22px;min-height:68px;
  border-radius:var(--r);background:var(--sunk);
  box-shadow:inset 0 0 0 1px var(--seam-lit);transition:box-shadow var(--fast)}
.searchbox:focus-within{box-shadow:inset 0 0 0 1px var(--lens),0 0 34px rgba(255,152,120,.16)}
.searchbox svg{width:21px;height:21px;flex:none;color:var(--ink-3)}
.searchbox:focus-within svg{color:var(--lens)}
.searchbox input{flex:1;min-width:0;background:none;border:0;color:var(--ink);
  font:400 21px/1 var(--sans);letter-spacing:-.01em}
.scan__k{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.scan__k svg{width:30px;aspect-ratio:200/260;flex:none;border-radius:6px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%);
          mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%)}
.searchbox input:focus{outline:0}
.searchbox input::placeholder{color:var(--ink-4)}
.scan__hint{display:flex;align-items:center;gap:12px;margin-top:16px}
.scan__hint svg{width:34px;aspect-ratio:200/260;flex:none;border-radius:6px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%);
          mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%)}
.boards{display:flex;gap:8px;margin-top:16px;overflow-x:auto;padding-bottom:2px}

.scan__panes{flex:1 1 auto;min-height:0;display:flex;margin-top:18px;border-top:1px solid var(--seam)}
.scan__list{flex:1 1 auto;min-width:0;overflow-y:auto;padding:0 var(--gutter)}
.sres{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  text-align:left;padding:15px 0;border-bottom:1px solid var(--seam);transition:background var(--fast)}
.sres:hover{background:rgba(255,255,255,.03)}
.sres__id{min-width:0}
.sres__s{font-family:var(--display);font-size:22px;line-height:1;letter-spacing:.02em;color:var(--ink)}
.sres__n{display:block;margin-top:7px;font:400 12px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  /* a mover can be any of 500 names and some are long; the price side must not
     be pushed off the row by "Schneider Electric Infrastructure Ltd." */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the right-hand column: what Scout says, then the price and the day move */
.sres__r{flex:none;display:flex;align-items:center;gap:12px}
.sres__p{flex:none;text-align:right;font:500 14px/1 var(--mono);color:var(--ink-2)}
.sres__c{display:block;margin-top:7px;font:500 12px/1 var(--mono)}
.sres__c.is-up{color:var(--up-ink)}
.sres__c.is-dn{color:var(--down-ink)}
.sres[aria-selected="true"]{background:rgba(255,255,255,.05)}
.sres__one{padding:18px 0;color:var(--ink-3)}
/* what the 36 rows below are — the pill says which half, this says which day */
.sres__cap{padding:14px 0 6px;font:400 11px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4)}

/* ── 20a · TREND CHIP ──────────────────────────────────────────
   Scout's live state as one word, and there are THREE of them.
   Watching is the common one — only ~39 stocks of 500 carry a
   signal at a time, so a chip that could only say bullish or
   bearish would be lying on nine rows in ten. It is deliberately
   the quiet one: same shape, no colour, so the eye lands on the
   rows that are actually saying something.
   ═══════════════════════════════════════════════════════════ */
.tchip{display:inline-flex;align-items:center;padding:5px 11px;border-radius:100px;
  font:700 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--seam-lit)}
.tchip--up{color:var(--up-ink);background:rgba(22,199,132,.10);
  box-shadow:inset 0 0 0 1px rgba(22,199,132,.30)}
.tchip--down{color:var(--down-ink);background:rgba(255,87,100,.10);
  box-shadow:inset 0 0 0 1px rgba(255,87,100,.30)}

/* ── 20b · SUGGEST ─────────────────────────────────────────────
   The auto-complete panel, and it belongs to no screen. One
   class in app.js attaches it to any stock field — Lens's search
   bar and the Add-a-holding symbol box today — so these rules are
   written against the component, never against .scan.

   ⚠ .sugwrap IS CREATED BY THE SCRIPT, not by the markup. The
   panel is absolutely positioned and needs an ancestor that is
   exactly the width of the field; neither .searchbox's parent nor
   .field's is, and adding a one-off rule for each host is how a
   travelling component stops travelling.

   ⚠ BELOW THE SHEET LAYER (50) AND ABOVE THE PAGE. Inside DR-11
   the sheet makes its own stacking context, so 30 is local there
   and the drawer still paints over everything.
   ═══════════════════════════════════════════════════════════ */
.sugwrap{position:relative}
.sug{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
  max-height:min(46vh,360px);overflow-y:auto;overscroll-behavior:contain;
  border-radius:var(--r);background:var(--raise);
  box-shadow:inset 0 0 0 1px var(--seam-lit),0 26px 60px rgba(0,0,0,.55)}
.sugrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:left;padding:12px 18px;
  border-bottom:1px solid var(--seam);transition:background var(--fast)}
.sugrow:last-child{border-bottom:0}
.sugrow:hover,.sugrow.is-at{background:rgba(255,255,255,.05)}
.sugrow__id{min-width:0}
.sugrow__s{font-family:var(--display);font-size:18px;line-height:1;letter-spacing:.02em;color:var(--ink)}
.sugrow__n{display:block;margin-top:6px;font:400 11px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugrow__r{flex:none;display:flex;align-items:center;gap:10px}
.sugrow__p{font:500 13px/1 var(--mono);color:var(--ink-2)}
.sug__one{padding:16px 18px;color:var(--ink-3)}

/* ⚠ SEALED, NOT MISSING, AND IT WEARS RADAR'S OWN COLOUR. A bearish stock is
   still listed — Ateet's rule, and hiding it would make the search look broken
   — but its reading needs the add-on. The row says which before it is tapped,
   in the violet the Radar drawer and the Radar switch already use, so the lock
   and the thing that unlocks it are visibly the same feature.

   No new geometry: .lock reuses the .fpill sizing, and .fpill--locked only
   changes colour. A second name for a shape that exists is how two files drift. */
.lock{
  display:inline-flex;align-items:center;padding:5px 11px;border-radius:100px;
  font:700 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--radar);background:rgba(167,155,255,.10);
  box-shadow:inset 0 0 0 1px rgba(167,155,255,.34);
}
.sres--locked .sres__s,.sres--locked .sres__n{opacity:.62}
.fpill--locked{color:var(--radar);box-shadow:inset 0 0 0 1px rgba(167,155,255,.34)}
.fpill--locked:hover{color:var(--radar);background:rgba(167,155,255,.10)}
.fpill--locked .lock{padding:0;background:none;box-shadow:none;letter-spacing:.22em}
/* the gap between the direction pills and the board pills, in one scrolling row */
.fgap{flex:none;width:1px;align-self:stretch;margin:0 4px;background:var(--seam-lit)}
.scan__answer{display:none;flex:1 1 auto;min-width:0;overflow-y:auto;
  padding:0 var(--gutter) 24px;border-left:1px solid var(--seam)}
.scan--answer .scan__list{display:none}
.scan--answer .scan__answer{display:block;border-left:0}

/* Lens's reading */
.reading{padding-top:22px}
.reading__sym{font-family:var(--display);font-size:clamp(34px,4vw,56px);line-height:.9;
  letter-spacing:.02em;color:var(--ink)}
.reading__meta{margin-top:12px}
.reading__say{margin-top:18px;font-size:16px;line-height:1.5;color:var(--ink);max-width:44ch}
.reading__back{display:none;margin-bottom:14px;color:var(--ink-3);align-items:center;gap:9px}

/* ── 21 · STOCKS ───────────────────────────────────────────────
   The total stays large at the top — Ateet's ruling, against the
   old brand law. Rows that have no price say why.
   ═══════════════════════════════════════════════════════════ */
.pf{flex:none;padding:20px var(--gutter) 4px}
.pf__n{font-family:var(--display);font-size:clamp(44px,5.4vw,76px);line-height:.9;
  letter-spacing:.02em;color:var(--ink)}
.pf__n .cur{color:var(--ink-3);font-size:.5em;margin-right:6px}
.pf__row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:14px}
.hold{display:flex;align-items:center;gap:20px;width:100%;text-align:left;
  padding:18px 0;border-bottom:1px solid var(--seam);transition:background var(--fast)}
.hold:hover{background:rgba(255,255,255,.03)}
.hold__id{flex:1 1 auto;min-width:0}
.hold__s{font-family:var(--display);font-size:clamp(22px,2.2vw,28px);line-height:1;
  letter-spacing:.02em;color:var(--ink);display:block}
.hold__q{display:block;margin-top:8px;font:400 12px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.hold__v{flex:none;text-align:right}
.hold__w{font-family:var(--display);font-size:clamp(20px,2vw,26px);line-height:1;color:var(--ink)}
.hold__r{display:block;margin-top:8px;font:400 12px/1 var(--mono);letter-spacing:.06em}
.hold__r.up{color:var(--up-ink)} .hold__r.down{color:var(--down-ink)}
.hold__none{display:block;margin-top:8px;font:400 12px/1.4 var(--mono);color:var(--ink-4);max-width:22ch;text-align:right}
.addbar{flex:none;padding:16px var(--gutter);border-top:1px solid var(--seam);
  background:var(--ground)}

/* ── 22 · ME ───────────────────────────────────────────────────*/
.wallet{flex:none;padding:22px var(--gutter) 0}
.recent{margin-top:18px;padding-bottom:26px}
.wallet__n{font-family:var(--display);font-size:clamp(56px,7vw,110px);line-height:.86;
  letter-spacing:.02em;color:var(--ink)}
.runway{position:relative;height:8px;border-radius:4px;margin-top:22px;background:rgba(255,255,255,.07)}
.runway__f{position:absolute;left:0;top:0;bottom:0;border-radius:4px;
  background:linear-gradient(90deg,rgba(245,158,11,.5),var(--bell))}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-top:22px}
.pack{padding:16px 10px;border-radius:var(--r-sm);text-align:center;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--seam-lit);font-family:var(--display);font-size:22px;letter-spacing:.02em}
.pack:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.pack small{display:block;margin-top:8px;font:400 10px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4)}

.led{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--seam)}
.led__id{flex:1 1 auto;min-width:0}
.led__t{color:var(--ink);font-size:15px}
.led__d{display:block;margin-top:7px;font:400 11px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4)}
.led__a{flex:none;font-family:var(--display);font-size:24px;line-height:1;letter-spacing:.02em}
.led__a.in{color:var(--up-ink)} .led__a.out{color:var(--ink)}
.led__b{flex:none;width:96px;text-align:right;font:400 12px/1 var(--mono);color:var(--ink-4)}

.rulebook{margin-top:8px;border-top:1px solid var(--seam)}
.rb{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--seam)}
.rb__t{flex:1 1 auto;min-width:0;color:var(--ink);font-size:15px}
.rb__v{flex:none;font-family:var(--display);font-size:22px;letter-spacing:.02em;color:var(--ink)}
.rb__v.auto{color:var(--ink-4);font-size:11px;font-family:var(--mono);letter-spacing:.2em}

.idcard{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--seam)}
.idcard__a{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.06);font-family:var(--display);font-size:24px;color:var(--ink)}

/* ── panels for these screens ─────────────────────────────────*/
.beam{flex:1 1 auto;min-height:0;position:relative;display:grid;place-items:center;
  padding:0 var(--gutter);overflow:hidden}
.lines{width:100%;display:flex;flex-direction:column;gap:9px}
.lines i{height:2px;border-radius:2px;background:rgba(255,255,255,.07);display:block}
.beam{overflow:hidden}
.beam__sweep{position:absolute;left:0;right:0;height:70px;
  background:linear-gradient(to bottom,transparent,rgba(255,152,120,.16),transparent);
  animation:beamrun 5s var(--ease) infinite}
@keyframes beamrun{0%{transform:translateY(-80px)}100%{transform:translateY(calc(100% + 80px))}}
.beam .pcap{bottom:-38px;text-align:center}

.weights{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:0 var(--gutter);position:relative}
.wbars{display:flex;flex-direction:column;gap:10px;width:100%}
.wbar{height:15px;border-radius:3px;min-width:8px;
  background:linear-gradient(90deg,rgba(63,211,186,.5),rgba(63,211,186,.2));
  box-shadow:inset 0 0 0 1px rgba(63,211,186,.34);
  transform-origin:left center;animation:grow 7s var(--ease) var(--del) infinite}
.wbar--over{background:linear-gradient(90deg,rgba(245,158,11,.55),rgba(245,158,11,.22));
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.5)}
.wbar--rest{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--seam)}
@keyframes grow{0%{transform:scaleX(.12);opacity:.4}
  22%,76%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:.55}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
.weights .pcap{bottom:-38px;text-align:center}

.days{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:0 var(--gutter);position:relative}
.dgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:9px;width:100%}
.day{aspect-ratio:1;border-radius:3px;background:rgba(245,158,11,.2);
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.34);
  animation:burn 8s linear var(--del) infinite}
@keyframes burn{0%,72%{opacity:1}86%,100%{opacity:.12}}
.days .pcap{bottom:-38px;text-align:center}

@media (min-width:900px){
  .scan__answer{display:block}
  .scan--answer .scan__list{display:block}
  .scan__list{flex:0 0 38%}
  .reading__back{display:none!important}
}
@media (max-width:899px){
  .scan__answer{border-left:0}
  .scan--answer .reading__back{display:flex}
}

/* ── 23 · GU-02 · meet the team ─────────────────────────────── */
.team{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;align-items:center;
  gap:clamp(12px,1.6vw,22px);padding:0 var(--gutter);overflow-x:auto}
.tcard{flex:none;width:clamp(210px,20vw,260px);padding:20px;border-radius:var(--r);
  border:1px solid var(--seam);background:rgba(255,255,255,.02)}
.tcard__face{width:64px;aspect-ratio:200/260;border-radius:var(--r-sm);
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%);
          mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%)}
.tcard__n{margin-top:14px;font-family:var(--display);font-size:26px;letter-spacing:.03em;color:var(--ink)}
.tcard__r{margin-top:10px;color:var(--ink-2);font-size:14px;line-height:1.5;min-height:63px}
.tcard__chip{display:inline-flex;margin-top:14px;padding:6px 11px;border-radius:100px;
  font:700 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--agent);background:color-mix(in srgb,var(--agent) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--agent) 30%,transparent)}
.tcard__c{margin-top:14px;color:var(--ink-3);font-size:13px;line-height:1.5}

/* an empty state's panel: the agent, waiting. Same concept as the
   working panel, in its nothing-happening form. */
/* the agent owns the whole panel — it bleeds top to bottom and
   dissolves into the content column on its left edge */
.waiting{position:absolute;inset:0;overflow:hidden}
.waiting svg{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.62;animation:breathe 8s var(--ease) infinite;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34%),
                     linear-gradient(to top,transparent 2%,#000 26%);
          mask-image:linear-gradient(to right,transparent,#000 34%),
                     linear-gradient(to top,transparent 2%,#000 26%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.waiting::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;
  background:linear-gradient(to top,var(--ground) 12%,transparent);
}
.waiting .pcap{bottom:38px;text-align:center;z-index:2}

/* an idle answer pane is a place, not a caption */
.sidle{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;text-align:center;padding:40px 20px}
.sidle svg{width:104px;aspect-ratio:200/260;border-radius:var(--r);
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 52%,transparent 88%);
          mask-image:radial-gradient(ellipse at 50% 42%,#000 52%,transparent 88%)}
.sidle p{color:var(--ink-3);max-width:26ch;line-height:1.55}

/* Closed's panel — outcomes above and below a centre line */
.ledger2{flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--gutter)}
.ticks{display:flex;align-items:flex-end;gap:7px;height:34%;
  border-bottom:1px solid var(--seam)}
.ticks--down{align-items:flex-start;border-bottom:0}
.tick{flex:1;min-width:0;border-radius:3px 3px 0 0;
  animation:grow2 6s var(--ease) var(--del) infinite;transform-origin:bottom}
.tick--up{background:linear-gradient(to top,rgba(22,199,132,.25),rgba(22,199,132,.6))}
.ticks--down .tick{border-radius:0 0 3px 3px;transform-origin:top;
  background:linear-gradient(to bottom,rgba(229,9,26,.25),rgba(229,9,26,.55))}
@keyframes grow2{0%{transform:scaleY(.1);opacity:.4}20%,78%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(1);opacity:.5}}
.ledger2 .pcap{bottom:-36px;text-align:center}

/* a drawer panel is half the width of a screen, so the wide table
   halves too rather than crushing its values */
.sheet .floor{grid-template-columns:1fr 1fr}
.sheet .fcell{padding:13px 15px}
.sheet .fcell:nth-child(2n){border-right:0}
.sheet .fcell:nth-child(-n+2){border-bottom:1px solid var(--seam)}
.sheet .fcell__val{font-size:clamp(19px,2.2vw,24px)}
.sheet .sheet__foot{flex-wrap:wrap}
.sheet .sheet__foot .btn{flex:1 1 44%}

/* ── 29 · THE TOUR · five questions, one drawer ────────────────*/
.tsteps{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.tdots{display:flex;gap:6px;margin-left:auto}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--ink-4)}
.tdot[data-on]{background:var(--hawk);box-shadow:0 0 10px 1px var(--hawk)}
.tdot[data-done]{background:rgba(63,211,186,.5)}
.tq{font-size:clamp(17px,2.2vw,20px);line-height:1.4;color:var(--ink);max-width:32ch}
.topts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.topt{
  display:flex;align-items:baseline;gap:14px;padding:16px 18px;border-radius:var(--r-sm);
  text-align:left;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--seam-lit);
  transition:color var(--fast),background var(--fast),box-shadow var(--fast);
}
.topt:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.topt[aria-pressed="true"]{color:var(--ink);background:rgba(63,211,186,.10);
  box-shadow:inset 0 0 0 1px rgba(63,211,186,.45)}
.topt__v{font-family:var(--display);font-size:26px;letter-spacing:.02em;min-width:64px}
.topt[aria-pressed="true"] .topt__v{color:var(--hawk)}
.topt__k{font:700 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* ── 28 · WALLET · balance, burn, and where it goes ────────────*/
.w2{display:grid;gap:16px;margin-top:18px}
@media (min-width:900px){ .w2{grid-template-columns:1.05fr .95fr;gap:20px} }
.wcard{border:1px solid var(--seam);border-radius:var(--r);background:rgba(255,255,255,.014);
  padding:20px 22px}
.wcard__k{color:var(--ink-3);margin-bottom:16px}
.spendrow{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--seam)}
.spendrow:last-child{border-bottom:0}
.spendrow__d{width:8px;height:8px;border-radius:50%;flex:none;background:var(--dot,var(--ink-4))}
.spendrow__t{flex:1 1 auto;min-width:0;color:var(--ink);font-size:14.5px}
.spendrow__s{display:block;margin-top:6px;font:400 11px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4)}
.spendrow__n{flex:none;font-family:var(--display);font-size:22px;letter-spacing:.02em;color:var(--ink)}
.spendrow__n.off{color:var(--ink-4);font-family:var(--mono);font-size:11px;letter-spacing:.18em}
.recent{margin-top:18px}
.recent__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:4px}
.seeall{color:var(--ink-2);min-height:34px;display:inline-flex;align-items:center}
.seeall:hover{color:var(--ink)}

/* ── 27 · LIST TOOLS · search + pagination ─────────────────────
   A holder can own hundreds. The total always counts every row,
   never just the page on screen.
   ═══════════════════════════════════════════════════════════ */
.ltools{flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px var(--gutter) 14px;border-bottom:1px solid var(--seam)}
.lsearch{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:12px;
  padding:0 16px;min-height:46px;border-radius:var(--r-sm);background:var(--sunk);
  box-shadow:inset 0 0 0 1px var(--seam-lit);transition:box-shadow var(--fast)}
.lsearch:focus-within{box-shadow:inset 0 0 0 1px var(--agent)}
.lsearch svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.lsearch input{flex:1;min-width:0;background:none;border:0;color:var(--ink);
  font:400 15px/1 var(--sans)}
.lsearch input:focus{outline:0}
.lsearch input::placeholder{color:var(--ink-4)}
.lclear{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-3);font-size:14px;line-height:1}
.lclear:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.lcount{flex:none;color:var(--ink-3);white-space:nowrap}

.pager2{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--gutter);border-top:1px solid var(--seam)}
.pager2__n{color:var(--ink-3);white-space:nowrap}
.pager2__b{display:flex;gap:8px}
.pbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--seam-lit);
  transition:color var(--fast),background var(--fast)}
.pbtn:hover:not([disabled]){color:var(--ink);background:rgba(255,255,255,.06)}
.pbtn[disabled]{opacity:.32;pointer-events:none}
.pbtn svg{width:12px;height:12px}
.pager2__p{font-family:var(--display);font-size:20px;letter-spacing:.02em;color:var(--ink);
  min-width:64px;text-align:center}

@media (max-width:599px){
  .ltools{padding:12px var(--gutter) 12px;gap:10px}
  .pf{padding:14px var(--gutter) 2px}
  .lcount{display:none}
  .pager2{padding:12px var(--gutter)}
  .pager2__n{font-size:10px}
}

/* ── 25 · GUEST ────────────────────────────────────────────────
   The pitch. One slide per agent, art doing the talking.
   ═══════════════════════════════════════════════════════════ */
.guest__mark{width:104px;height:30px;flex:none}
.hero-line{font-family:var(--display);font-weight:400;
  font-size:clamp(54px,9.4vw,142px);line-height:.84;letter-spacing:.015em;color:var(--ink)}
.hero-line em{font-style:normal;color:var(--logo-mark)}
.guest__glow{position:absolute;right:-14%;top:-18%;width:820px;height:820px;z-index:0;
  pointer-events:none;background:radial-gradient(circle,rgba(229,9,26,.13),transparent 62%)}

/* the agent slides */
.slides{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slide{flex:none;width:100%;scroll-snap-align:center;scroll-snap-stop:always;
  position:relative;display:grid;grid-template-columns:1fr;align-items:center;overflow:hidden}
.slide__art{position:absolute;inset:0;z-index:0;opacity:.5;
  -webkit-mask-image:linear-gradient(to top,transparent 4%,#000 46%);
          mask-image:linear-gradient(to top,transparent 4%,#000 46%)}
.slide__art svg{width:100%;height:100%}
.slide__body{position:relative;z-index:1;padding:0 var(--gutter);align-self:end;padding-bottom:8%}
.slide__n{font-family:var(--display);font-size:clamp(56px,9vw,132px);line-height:.86;
  letter-spacing:.02em;color:var(--ink)}
.slide__r{margin-top:16px;font-size:clamp(17px,2.2vw,22px);line-height:1.4;
  color:var(--ink-2);max-width:24ch}
.slide__chip{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:8px 15px;
  border-radius:100px;font:700 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--agent);background:color-mix(in srgb,var(--agent) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--agent) 32%,transparent)}
.slide__chip i{width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 10px currentColor;animation:tb-pulse 1.8s ease-in-out infinite}
.gdots{position:relative;z-index:2;display:flex;gap:8px;justify-content:center;padding:20px 0 10px}
.gdot{position:relative;height:3px;width:26px;border-radius:2px;background:rgba(255,255,255,.16);
  transition:background var(--mid),width var(--mid)}
.gdot::after{content:"";position:absolute;left:-6px;right:-6px;top:-20px;bottom:-20px}
.gdot[data-on]{background:var(--ink);width:36px}
.gnav{position:absolute;top:50%;margin-top:-24px;z-index:3;width:48px;height:48px;
  display:none;place-items:center;border-radius:50%;color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2)}
.gnav:hover{background:rgba(0,0,0,.65);color:#fff}
.gnav--p{left:16px} .gnav--n{right:16px}
@media (min-width:900px){
  .gnav{display:grid}
  .slide{grid-template-columns:1.1fr 1fr}
  .slide__art{left:auto;right:0;width:56%;
    -webkit-mask-image:linear-gradient(to left,#000 46%,transparent);
            mask-image:linear-gradient(to left,#000 46%,transparent)}
  .slide__body{align-self:center;padding-bottom:0}
}

/* ── 26 · SIGN IN · two steps, and what happens when it goes wrong */
.step{display:none}
.step[data-on]{display:block}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;
  border-radius:var(--r-sm);background:#fff;color:#1f1f1f;
  font:500 15px/1 var(--sans);transition:opacity var(--fast)}
.gbtn:hover{opacity:.9}
.gbtn svg{width:19px;height:19px}
/* ⚠ GOOGLE'S BUTTON SITS ON TOP OF OURS AND IS INVISIBLE, ON PURPOSE.
   Its iframe cannot be styled, and One Tap — which is what the design's own
   button used to call — is suppressed by the browser far more often than it
   is shown, so the control did nothing. opacity:0 still receives the click,
   which is the entire trick: the reader sees .gbtn, Google gets the tap.
   ⚠ NOT display:none AND NOT visibility:hidden — both would stop the click,
   and renderButton refuses to measure a container it cannot see. */
.gwrap{position:relative}
.gwrap__real{position:absolute;inset:0;opacity:0;overflow:hidden}
.gwrap__real > div,
.gwrap__real iframe{width:100%!important;height:100%!important;max-width:none!important}
.orline{display:flex;align-items:center;gap:14px;margin:20px 0}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--seam)}
/* ⚠ THE DESIGN USES .field AND NEVER DEFINES IT. Four inputs carry these
   classes — the email box on sign-in and all three on Add a holding — and the
   approved file styles none of them, so they rendered as bare browser inputs
   19px tall. The stylesheet is the one that is short here, not the markup, so
   the class is written in the file's own language rather than the markup
   changed to something that already exists: the same sunk ground, hairline and
   focus ring as .codebox, the same label voice as .micro.
   ⚠ FLAGGED FOR ATEET — this is the one place the build had to invent visual
   design rather than transcribe it. */
.field{display:block;margin-bottom:16px}
.field__label{display:block;margin-bottom:8px;color:var(--ink-3)}
.field__input{
  display:block;width:100%;min-height:52px;padding:0 16px;
  background:var(--sunk);border:0;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--seam-lit);
  color:var(--ink);font:400 17px/1 var(--sans);
}
.field__input:focus{outline:0;box-shadow:inset 0 0 0 1px var(--agent)}
.field__input::placeholder{color:var(--ink-4)}

.codebox{display:flex;gap:9px;margin-top:6px}
.codebox input{
  flex:1;min-width:0;aspect-ratio:1;max-width:56px;text-align:center;
  background:var(--sunk);border:0;box-shadow:inset 0 0 0 1px var(--seam-lit);
  border-radius:var(--r-sm);color:var(--ink);
  font-family:var(--display);font-size:30px;letter-spacing:.02em;
}
.codebox input:focus{outline:0;box-shadow:inset 0 0 0 1px var(--agent)}
.ferr{
  display:none;align-items:flex-start;gap:9px;margin-top:12px;
  color:var(--down-ink);font-size:13.5px;line-height:1.45;
}
.ferr::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;margin-top:6px;
  background:var(--down)}
.is-error .ferr{display:flex}
.is-error .field__input,.is-error .codebox input{
  box-shadow:inset 0 0 0 1px var(--down);background:rgba(229,9,26,.06)}
.is-error .field__input:focus,.is-error .codebox input:focus{box-shadow:inset 0 0 0 1px var(--down)}
.resend{margin-top:18px;color:var(--ink-3);font-size:13.5px}
.resend b{color:var(--ink);font-weight:400}

/* dots are HTML, not SVG — a viewBox stretched to a tall column
   turns every circle into an ellipse */
.dot{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.dot--tip{animation:tipin 7s var(--ease) var(--del) infinite;opacity:0}
.dot--entry{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-4)}
.dot--creep{background:var(--ink-3);animation:creepx 9s var(--ease) var(--del) infinite}
.dot--hit{background:var(--bell);box-shadow:0 0 14px 3px rgba(245,158,11,.5)}
.dot--w{background:rgba(63,211,186,.2);box-shadow:inset 0 0 0 1px rgba(63,211,186,.4);
  animation:breathe 7s var(--ease) var(--del) infinite}
.dot--w.big{background:rgba(245,158,11,.24);box-shadow:inset 0 0 0 1px rgba(245,158,11,.55)}
.dot--node{background:var(--ground);box-shadow:inset 0 0 0 1.5px var(--up)}
.dot--node.dn{box-shadow:inset 0 0 0 1.5px var(--down)}
.dot--knot{background:var(--ground);box-shadow:inset 0 0 0 1.5px var(--ink-4)}
.dot--knot.in{box-shadow:inset 0 0 0 1.5px var(--up)}
.ring3{position:absolute;border-radius:50%;transform:translate(-50%,-50%);
  border:1px solid var(--bell);opacity:0;animation:ping3 9s var(--ease) var(--del) infinite}
@keyframes ping3{0%,64%{width:10px;height:10px;opacity:0}
  70%{opacity:.85}100%{width:150px;height:150px;opacity:0}}

/* ── 30 · PANELS · one concept per screen, all full height ─────
   Every panel is absolutely positioned over the whole column. No
   centred block, no bars unless the bar IS the idea.
   ═══════════════════════════════════════════════════════════ */
.pn{position:absolute;inset:0;overflow:hidden}
.pn svg{position:absolute;inset:0;width:100%;height:100%}
.pn .pcap{bottom:34px;text-align:center;z-index:3}
.pn__fade{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,var(--ground) 14%,transparent)}

/* Open — each live trade traced from where it started to where it is */
.pn--paths path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:trace 7s var(--ease) var(--del) infinite}
@keyframes trace{0%{stroke-dashoffset:1000}26%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.35}}
.pn--paths .up{stroke:rgba(22,199,132,.8)}
.pn--paths .dn{stroke:rgba(229,9,26,.7)}
.pn--paths circle{animation:tipin 7s var(--ease) var(--del) infinite;opacity:0}
@keyframes tipin{0%,22%{opacity:0}30%,82%{opacity:1}100%{opacity:.3}}
.pn--paths .entry{fill:none;stroke:var(--ink-4);stroke-width:1.5;vector-effect:non-scaling-stroke}

/* Tracking — the floor, stepping up and never down, under price */
.pn--stair .floorline{fill:none;stroke:var(--bell);stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-dasharray:2000;stroke-dashoffset:2000;animation:trace 9s linear infinite}
.pn--stair .floorfill{fill:rgba(245,158,11,.10)}
.pn--stair .priceline{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.2;
  vector-effect:non-scaling-stroke;stroke-dasharray:2 6}

/* Alerts — three prices creeping toward the line Bell is listening on */
.pn--listen .tgt{stroke:var(--bell);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.75}
.pn--listen .creep{fill:var(--ink-3);animation:creepx 9s var(--ease) var(--del) infinite}
@keyframes creepx{0%{transform:translateX(0);opacity:.5}
  70%{transform:translateX(var(--to));opacity:1}100%{transform:translateX(var(--to));opacity:.5}}
.pn--listen .ring2{fill:none;stroke:var(--bell);opacity:0;
  animation:ping2 9s var(--ease) var(--del) infinite}
@keyframes ping2{0%,66%{r:4;opacity:0}72%{opacity:.9}100%{r:64;opacity:0}}
.pn--listen .hit{fill:var(--bell)}

/* Agents — the 05:00 handoff: four start together, two wait to be asked */
.pn--rota{display:flex;flex-direction:column;justify-content:center;gap:0}
.rota{position:relative;display:flex;align-items:center;gap:16px;padding:0 var(--gutter);height:11.5%}
.rota__f{width:clamp(40px,4vw,54px);aspect-ratio:200/260;flex:none;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 30%,transparent 62%);
          mask-image:radial-gradient(circle at 50% 42%,#000 30%,transparent 62%);
  opacity:.22;animation:wake2 8s var(--ease) var(--del) infinite}
.rota--idle .rota__f{animation:none;opacity:.1}
@keyframes wake2{0%,74%,100%{opacity:.22;filter:none}
  12%,54%{opacity:.95;filter:drop-shadow(0 0 16px rgba(91,143,249,.4))}}
.rota__t{flex:1;height:1px;background:var(--seam);position:relative}
.rota__t::after{content:"";position:absolute;left:0;top:0;height:1px;width:0;background:var(--scout);
  animation:runline 8s var(--ease) var(--del) infinite}
.rota--idle .rota__t::after{animation:none}
@keyframes runline{0%,74%,100%{width:0;opacity:0}12%{opacity:1}54%{width:100%;opacity:.7}}
.rota__k{font:700 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);
  flex:none;width:52px;text-align:right}

/* Stocks Open — a constellation sized by weight, the biggest lit */
.pn--field circle{animation:breathe 7s var(--ease) var(--del) infinite}
.pn--field .w{fill:rgba(63,211,186,.22);stroke:rgba(63,211,186,.4);stroke-width:1;vector-effect:non-scaling-stroke}
.pn--field .w--big{fill:rgba(245,158,11,.26);stroke:rgba(245,158,11,.55)}

/* Stocks Closed — what the finished trades did, end to end */
.pn--curve .eq{fill:none;stroke:var(--up);stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:trace 8s var(--ease) infinite}
.pn--curve .eqfill{fill:rgba(22,199,132,.09)}
.pn--curve .zero{stroke:var(--seam-lit);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 5}
.pn--curve .node{fill:var(--ground);stroke:var(--up);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pn--curve .node--dn{stroke:var(--down)}

/* History — the ledger as a thread, in and out */
.pn--thread .spine{stroke:var(--seam-lit);stroke-width:1;vector-effect:non-scaling-stroke}
.pn--thread .arm{stroke-width:1.5;vector-effect:non-scaling-stroke;
  stroke-dasharray:200;stroke-dashoffset:200;animation:trace 9s linear var(--del) infinite}
.pn--thread .arm--out{stroke:rgba(255,255,255,.28)}
.pn--thread .arm--in{stroke:rgba(22,199,132,.6)}
.pn--thread .knot{fill:var(--ground);stroke:var(--ink-4);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pn--thread .knot--in{stroke:var(--up)}

/* Account — signed in, no logo */
.pn--who{display:grid;place-items:center}
.who{position:relative;width:min(46%,190px);aspect-ratio:1;display:grid;place-items:center}
.who__r{position:absolute;inset:0;border-radius:50%;border:1px solid var(--seam-lit)}
.who__r--a{animation:spin 26s linear infinite;border-style:dashed}
.who__r--b{inset:14%;border-color:var(--seam);animation:spin 34s linear reverse infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.who__i{font-family:var(--display);font-size:clamp(46px,5.4vw,74px);letter-spacing:.02em;color:var(--ink)}
.who__d{position:absolute;top:6%;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:var(--up);box-shadow:0 0 12px 2px rgba(22,199,132,.6)}

/* ── 24 · NATIVE · phone-only structure ────────────────────────
   Not a narrower desktop. Different controls where the desktop
   ones do not belong on a touch screen.
   ═══════════════════════════════════════════════════════════ */
/* carousel dashes — the phone's answer to previous / next */
.cdots{display:none;gap:7px;justify-content:center;padding:16px 0 4px}
.cdot{height:3px;width:26px;border-radius:2px;background:rgba(255,255,255,.14);
  transition:background var(--mid) var(--ease),width var(--mid) var(--ease)}
.cdot[data-on]{background:var(--ink);width:34px}
/* ⚠ THE SAME HIT AREA .gdot ALREADY HAD, AND .cdot DID NOT. Three pixels of
   paint is three pixels of tap target unless something is drawn around it, and
   these are how a reader moves between Scout's setups on a phone. */
.cdot::after{content:"";position:absolute;left:-7px;right:-7px;top:-21px;bottom:-21px}
.cdot{position:relative}

@media (max-width:899px){
  /* picking a result pushes a detail view — the search bar goes with it */
  .scan--answer .scan__search{display:none}
  .scan--answer .scan__panes{margin-top:0;border-top:0}
  .scan--answer .reading{padding-top:6px}
  .reading__back{padding:14px 0 4px}

  /* the tab strip scrolls as one, switch included — nothing pinned
     on top of a scrolling row */
  .topbar__row{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .topbar__row::-webkit-scrollbar{display:none}
  .segs{overflow:visible;flex:0 0 auto}
  .rtog{flex:0 0 auto;padding-right:var(--gutter)}

  .navpair{display:none}
  .cdots{display:flex}
  .found__top{display:none}
  .found{padding-top:6px}

  /* a phone does not need the timestamp in the meta line */
  .found__meta .t{display:none}
}

/* every touch device, not just phones */
@media (hover:none),(max-width:899px){
  /* filter rows scroll sideways — they never wrap onto a second line */
  .filters,.chips,.nudges,.boards{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    scroll-padding-inline:var(--gutter);
  }
  .filters::-webkit-scrollbar,.chips::-webkit-scrollbar,
  .nudges::-webkit-scrollbar,.boards::-webkit-scrollbar{display:none}
  .filters{
    margin:0 calc(var(--gutter) * -1);
    padding-left:var(--gutter);padding-right:var(--gutter);
  }
  .filters > *{flex:0 0 auto}
  .fgroup{flex-wrap:nowrap}
  .fpill,.chip,.nudge{flex:0 0 auto;white-space:nowrap;padding:0 18px;border-radius:var(--r)}
  /* two filter groups in one scrolling row need a boundary */
  .filters .fgroup + .fgroup{margin-left:4px;padding-left:14px;
    border-left:1px solid var(--seam-lit)}
  /* a hairline still needs to span the full width even though the row scrolls */
  .filters{border-bottom:0;position:relative}
  .filters::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--seam);width:max(100%,100vw)}

  .fpill,.rchip,.chip,.nudge,.pack{min-height:44px;display:inline-flex;align-items:center;
    justify-content:center}
  .rchip{justify-content:flex-start}
  .pack{flex-direction:column;justify-content:center}
  .btn--quiet,.rwhy{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .rwhy{width:44px;height:44px;border-radius:50%}
  .stepper button{min-height:52px}
  .guest__legal{gap:6px 22px}

  /* ⚠ THE 44px FLOOR, FOR THE CONTROLS THAT WERE UNDER IT. Found by measuring
     every control on all forty-eight states at five widths, not by eye — each
     line below is one thing the sweep reported.

     A search field is a tap target like any other: the two list filters were
     20px and the scanner's box 24px, which is a miss on a phone. The chart's
     head is a bar of controls that only ever appears on touch when the overlay
     is open, so its three buttons had never been measured at all. */
  .searchbox input,.lsearch input{min-height:44px}
  /* "See all ›" on the wallet was 34px, and a .btn squeezed by the account
     row at 360 came out at 40. A floor, not a size — neither grows anywhere
     it already clears 44. */
  .seeall{min-height:44px;display:inline-flex;align-items:center}
  .btn{min-height:48px}
  /* The dot is 3px of paint with a hit area drawn around it — the area was
     43px, one short, because the pad was a round 20 either side. */
  .gdot::after{top:-21px;bottom:-21px}
}

@media (max-width:599px){
  .searchbox{min-height:58px;padding:0 18px;gap:13px}
  .searchbox input{font-size:18px}
  .scan__search{padding-top:14px}

  /* blocks stop being desktop cards */
  .block__top{display:block}
  .block__price{display:flex;align-items:baseline;gap:10px;margin-top:16px;text-align:left}
  .block__n{font-size:38px}
  .block__u,.block__when{display:inline;margin:0}
  .block__when{margin-left:10px;color:var(--ink-4)}
  .face{width:46px}
  .facewrap span{font-size:9px;letter-spacing:.12em}
  .block{padding:16px}
  .block__t{font-size:24px}
  .block__say{font-size:14px}
  .burn{padding:16px}

  /* lists breathe less, so more rows fit the thumb's reach */
  .shead{padding-top:14px}
  .shead__v{font-size:30px}
  .filters{padding:14px var(--gutter) 12px;gap:12px}

  /* wallet and ledger */
  .wallet__n{font-size:76px}
  .packs{grid-template-columns:repeat(3,1fr)}
  .led__b{width:auto;min-width:62px}

  /* scanner: one pane at a time, with a way back */
  .scan__list{padding-bottom:20px}
  .reading__back{min-height:44px}

  /* stocks: the add button is a real bottom action */
  .addbar{padding:12px var(--gutter);padding-bottom:calc(12px + var(--safe-b))}
  .addbar .btn{width:100%}

  /* guest team scrolls as cards, not a grid */
  .tcard{width:78vw;max-width:300px}
}

/* ── 14 · OV-01 · THE CHART ─────────────────────────────────────
   The only layer that covers the rail. The indicator is the zones
   themselves — three to six horizontal bands that hold still while
   price moves through them, with exactly one lit. Nothing here is
   computed by the chart; every number arrives in the payload.
   Chart law: one verdict label, no score, no reward:risk, no
   from-entry percentage, no green/red as trend state.
   ═══════════════════════════════════════════════════════════ */
.overlay{
  position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  background:var(--ground);
  padding-top:var(--safe-t);padding-bottom:var(--safe-b);
  transform:translateY(1.5%);opacity:0;pointer-events:none;
  transition:transform var(--mid) var(--ease),opacity var(--mid) var(--ease);
}
.overlay[data-open]{transform:none;opacity:1;pointer-events:auto}

.ovhead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px var(--gutter);border-bottom:1px solid var(--seam)}
.ovback{display:flex;align-items:center;gap:9px;color:var(--ink-2);min-height:44px}
.ovback:hover{color:var(--ink)}
.ovback svg{width:13px;height:13px}
.ovsym{font-family:var(--display);font-size:clamp(24px,2.4vw,32px);line-height:1;
  letter-spacing:.02em;color:var(--ink)}
.ovmeta{color:var(--ink-3)}
.tfs{display:flex;gap:6px;margin-left:auto}
.tfbtn{padding:0 15px;min-height:38px;border-radius:var(--r-sm);
  font:400 15px/1 var(--display);letter-spacing:.06em;color:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--seam-lit)}
.tfbtn[aria-pressed="true"]{color:var(--ink);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px var(--seam-live)}
/* the price is a snapshot, not a stream — say so rather than imply live */
.asof{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:100px;
  font:700 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--seam-lit)}
.asof--stale{color:var(--warn);background:rgba(245,158,11,.10);
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.4)}
.asof i{width:6px;height:6px;border-radius:50%;background:currentColor}
.asof--live i{animation:tb-pulse 1.8s ease-in-out infinite}
.ovrefresh{min-height:38px;padding:0 14px;border-radius:var(--r-sm);color:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--seam-lit);font:400 15px/1 var(--display);letter-spacing:.06em}
.ovrefresh:hover{color:var(--ink)}
/* ⚠ THIS BLOCK IS HERE, NOT UP WITH THE OTHER 44px FLOORS, AND THE POSITION IS
   THE POINT. The chart's rules are declared BELOW that block, so a floor
   written up there loses the cascade to `.tfbtn{min-height:38px}` — same
   specificity, later declaration wins. It read as applied and measured as 38.
   The chart head is also the one bar of controls that only ever appears on
   touch when the overlay is open, so it had never been measured at all. */
@media (hover:none),(max-width:899px){
  .tfbtn,.ovrefresh{min-height:44px}
  .ovback{min-height:46px}
}

.ovbody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
@media (min-width:1000px){ .ovbody{flex-direction:row} }

.plotwrap{flex:1 1 auto;min-width:0;min-height:0;position:relative;padding:10px 142px 26px var(--gutter)}
.plotwrap svg{display:block;width:100%;height:100%}
/* ⚠ THE AXIS MUST SPAN EXACTLY WHAT THE SVG SPANS, OR EVERY LABEL DRIFTS FROM
   ITS OWN LINE. It was inset top:10 bottom:26 while the SVG (preserveAspect
   none) stretches its full 560-unit viewBox across the whole box — so a label
   near the floor sat ~27px below the line it names, which reads as a caption
   under the chart rather than a price on it. Both now measure the same box and
   app.js positions labels as a fraction of the FULL viewBox height. */
/* ⚠ DO NOT SET `left` HERE. With left AND right AND width all specified the box
   is over-constrained, CSS drops `right`, and the whole axis jumps to the LEFT
   edge on top of the candles. Pin it to the right and let width do the rest. */
.axis{position:absolute;top:0;right:6px;bottom:0;width:130px;pointer-events:none}
.axl{position:absolute;right:0;transform:translateY(-50%);text-align:right;
  font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink-4);white-space:nowrap}
.axl--now{color:var(--ink);background:var(--ground);padding:3px 5px;border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--seam-lit)}
.axl--lit{color:var(--pulse)}
.axl--entry{color:var(--ink-2)}

/* Pulse's side — the reading, and what the chart is made of */
.ovside{flex:none;display:flex;flex-direction:column;gap:16px;
  padding:16px var(--gutter) 20px;border-top:1px solid var(--seam)}
@media (min-width:1000px){
  .ovside{width:min(360px,30%);border-top:0;border-left:1px solid var(--seam);
    padding-top:22px;overflow-y:auto}
}
.pv{display:flex;align-items:center;gap:12px}
.pv__face{width:38px;aspect-ratio:200/260;flex:none;border-radius:6px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%);
          mask-image:radial-gradient(ellipse at 50% 42%,#000 56%,transparent 92%)}
.pv__l{font-family:var(--display);font-size:clamp(28px,3vw,40px);line-height:1;
  letter-spacing:.02em;color:var(--pulse)}
.pv__why{color:var(--ink);font-size:16px;line-height:1.45}
.pv__fact{color:var(--ink-3);font-size:13.5px;line-height:1.5}
.pv__note{margin-top:2px;color:var(--ink-4);font-size:12.5px;line-height:1.5}

.keyrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--seam);
  width:100%;text-align:left}
.keyrow:hover{background:rgba(255,255,255,.03)}
.keyrow__sw{width:22px;height:12px;border-radius:3px;flex:none}
.keyrow__t{flex:1 1 auto;min-width:0;color:var(--ink-2);font-size:13.5px}
.keyrow__v{flex:none;font:400 12px/1 var(--mono);color:var(--ink-4)}
.keyrow[aria-pressed="true"] .keyrow__t{color:var(--ink)}

/* ── 10a · TABLET PORTRAIT ──────────────────────────────────── */
/* phone only — rewritten for the legacy-register structure */
@media (max-width:599px){
  .found{padding:16px var(--gutter) 14px}
  .found__hero{padding-top:2px}
  .eyebrow{margin-bottom:13px;padding:5px 11px;letter-spacing:.16em;gap:8px}
  .found__sym{font-size:clamp(46px,13.2vw,62px)}
  .found__meta{margin-top:9px;font-size:11px;letter-spacing:.18em}
  .found__meta .dot{margin:0 7px}
  .pricerow{margin:13px 0 11px;gap:12px}
  .ltp{font-size:38px}
  .chg{font-size:13px;padding:4px 10px}
  .found__say{margin-bottom:13px;font-size:14px;line-height:1.45}
  .navbtn{width:40px;height:40px}
  .rail-xl{height:52px}
  .floor{margin-top:10px}
  .rail-xl__risk,.rail-xl__gain{padding:0 12px}
  .rail-xl__v{font-size:13px;margin-top:5px}
  .floor{grid-template-columns:1fr 1fr}
  .fcell{padding:10px 13px;border-bottom:1px solid var(--seam)}
  .fcell:nth-child(2n){border-right:0}
  .fcell:nth-child(n+3){border-bottom:0}
  .fcell__val{font-size:21px;margin-top:7px}
  .fcell__aux{margin-top:5px;font-size:11px}
  .acts{margin-top:14px;gap:8px}
  .acts .btn{flex:1 1 42%;padding:0 14px;min-height:44px;font-size:18px}
  .acts__gap{display:none}
  .rtog{padding:0 var(--gutter) 0 12px;gap:8px}
  .rtog .micro{display:none}
  .seg{font-size:22px;margin-right:16px;padding:14px 4px;gap:8px}
  .segs{gap:6px}
}

@media (max-height:700px){
  .found{padding:12px var(--gutter) 10px}
  .eyebrow{margin-bottom:9px}
  .found__sym{font-size:clamp(40px,11vw,54px)}
  .found__meta{margin-top:7px}
  .pricerow{margin:10px 0 9px}
  .ltp{font-size:32px}
  .found__say{margin-bottom:10px;font-size:13px}
  .rail-xl{height:44px}
  .floor{margin-top:8px}
  .fcell{padding:8px 12px}
  .fcell__val{font-size:19px;margin-top:5px}
  .fcell__aux{display:none}
  .acts{margin-top:10px}
  /* ⚠ 44, NOT 40. This block is the SHORT-screen block (max-height:700px), and
     it shrank the Found card's four action buttons to fit a 640-tall phone —
     the one place in the app that went under the 44px floor on purpose. The
     four pixels come back out of the padding above instead: a 360x640 sweep
     confirms the card still fits with no page scroll and no overflow. */
  .acts .btn{min-height:44px;font-size:17px}
  .found{padding-bottom:6px}
}

/* below this the page cannot hold everything; the verdict also
   lives inside the Trade setup drawer */
@media (max-height:645px){
  .found__say{display:none}
}

@media (min-width:600px){
  :root{--gutter:32px;--bar-h:66px}
  .stage{padding-bottom:56px}
  .empty{padding-top:56px}

  .sheet__art{height:42dvh}
  .guest__acts{flex-direction:row;gap:12px}
  .guest__acts .btn{min-width:190px}

  .chapter{width:min(430px,72vw)}

}

/* ── 10b · TABLET LANDSCAPE + DESKTOP: the rail arrives ─────── */
@media (min-width:900px){
  :root{--gutter:40px}

  .app{
    grid-template-columns:var(--rail-w) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:"rail topbar" "rail stage";
  }
  .tabbar{display:none}

  .rail{
    display:flex;flex-direction:column;align-items:center;
    position:relative;
    background:var(--sunk);
    padding:16px 0 14px;
  }
  .rail::after{
    content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--seam);
  }
  .rail__mark{width:34px;height:34px;flex:none;margin-bottom:26px}
  .rail__tabs{display:flex;flex-direction:column;width:100%}
  .rail__spacer{flex:1}

  .tab{
    height:66px;gap:6px;
    justify-content:center;
  }
  /* the seam again — a lit segment of the rail's own edge, not a filled tile */
  .tab::before{
    top:50%;left:auto;right:0;
    width:3px;height:30px;margin-left:0;margin-top:-15px;border-radius:2px 0 0 2px;
    transform:scaleY(0);
  }
  .tab[aria-selected="true"]::before{transform:scaleY(1)}
  .tab[aria-selected="true"]{background:rgba(255,255,255,.045)}
  .tab:hover{color:var(--ink-2)}
  .tab__dot{top:16px;left:calc(50% + 12px)}
  .rail__foot{width:100%;display:flex;flex-direction:column;border-top:1px solid var(--seam)}
  .rail__coins,.rail__more{height:58px}

    .segs{padding:0 var(--gutter)}


  .stage{padding:0 var(--gutter) 64px}

  /* one panel, entering from the right, split down the middle */
  .sheet{
    top:0;right:0;left:auto;bottom:0;
    width:min(940px,calc(100vw - var(--rail-w)));
    display:grid;grid-template-columns:1fr 1fr;
    transform:translateX(100%);
    box-shadow:-44px 0 130px rgba(0,0,0,.6);
  }
  .sheet[data-open]{transform:translateX(0)}
  .sheet__grab{display:none}
  .sheet__art{height:100%;min-height:0;order:1}
  .sheet__art::after{
    top:0;left:auto;right:0;bottom:0;width:34%;height:auto;
    background:linear-gradient(to right,transparent,var(--raise));
  }
  .sheet__art--mark svg{width:52%}
  .sheet__panel{order:2;padding:40px 40px 0;justify-content:center;padding-bottom:0}
  .sheet__foot{padding:26px 0 0;margin-top:26px}
  .sheet__foot .btn{flex:0 1 auto;min-width:150px}
}

/* ── 10c · DESKTOP ──────────────────────────────────────────── */
/* the band where the 30% panel arrives but the window is still
   narrow — five tabs plus the switch have to fit without clipping */
@media (min-width:1280px) and (max-width:1479px){
  .seg{font-size:22px;margin-right:15px;gap:7px}
  .seg__count{padding:3px 7px;font-size:9.5px}
  .rtog{padding-left:10px;gap:8px}
  .rtog .micro{font-size:10px;letter-spacing:.14em}
}

@media (min-width:1280px){
  :root{--gutter:56px}
  /* the panel shows the agent, so the inline portrait is a duplicate */
  .empty__face{display:none}
  .empty{padding-top:52px}
  .app{
    grid-template-columns:var(--rail-w) minmax(0,1fr) minmax(300px,30%);
    grid-template-areas:"rail topbar aside" "rail stage aside";
  }
  .aside{display:flex}
  .stage{padding-bottom:80px}
  .empty{padding-top:72px}
}

/* ── 11 · A QUALITY FLOOR, NOT ANNOUNCED ────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media (hover:none){
  .btn:hover,.tab:hover,.seg:hover{background:inherit}
}

/* ── 15 · DR-06 · THE LEGAL DRAWER ──────────────────────────────
   Two components the design file did not build, because the drawer
   carried three placeholder paragraphs and no way to reach the
   other three documents.

   ⚠ NOT .filters. That component is a screen's filter bar — it
   carries its own gutter padding and a bottom seam, both of which
   double up inside .sheet__panel. The PILLS are shared (.fpill);
   only the row around them is new. */
.docsw{
  /* ⚠ flex:none IS LOAD-BEARING. .sheet__panel is a flex COLUMN, and setting
     overflow-x on a flex child drops its automatic minimum size to zero — so
     the row of pills shrank to nothing and the switcher rendered invisibly
     while sitting correctly in the DOM. The design's own .filters carries
     flex:none for exactly this reason. */
  flex:none;
  display:flex;gap:8px;margin:18px 0 4px;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.docsw::-webkit-scrollbar{display:none}

/* The document itself. Long prose, so measure matters more than it
   does anywhere else in this app: 66ch is the reading width, and the
   drawer's panel is already the scroller. */
.doc{padding:18px 0 40px;max-width:66ch}
.doc h3{
  font:400 15px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);margin:30px 0 10px;
}
.doc h3:first-child{margin-top:6px}
.doc p{font:400 15px/1.65 var(--body);color:var(--ink-2);margin:0 0 14px}
.doc p:last-child{margin-bottom:0}
.doc__note{
  font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-3);
  padding:14px 0 0;border-top:1px solid var(--seam);margin-top:26px;
}

/* ⚠ THE ONE DRAWER THAT MUST NOT BE CENTRED.
 *
 * On wide screens .sheet__panel is a flex column with justify-content:center,
 * which is right for the twenty-two drawers whose body is a few lines. It is
 * wrong for a document: when flex content is taller than its container,
 * centring overflows it at BOTH ends, and the part above the top is
 * unreachable — scrollTop:0 does not bring it back. The reader opens Terms of
 * Use somewhere in clause 2, with the title and the switcher scrolled away
 * above them and no way to scroll up to it.
 *
 * Scoped to DR-06 rather than changed globally: the centring is deliberate
 * everywhere else and this is the only long body in the product.
 */
@media (min-width:900px){
  .sheet[data-sheet-id="DR-06"] .sheet__panel{justify-content:flex-start}
}

/* The reason a drawer refused. Sits under the body, above the foot — a drawer
   that closes on an error tells the reader it worked, so it stays open and says
   what happened instead. */
.sheet__err{
  margin:14px 0 0;padding:11px 13px;border-radius:10px;
  background:rgba(242,84,75,.10);box-shadow:inset 0 0 0 1px rgba(242,84,75,.30);
  font:500 13.5px/1.5 var(--body);color:var(--ink);
}


/* ═══════════════════════════════════════════════════════════════
   SCOUT'S CURRENT SIGNAL ON THE CHART

   ⚠ THE WEIGHTS ARE THE PRIORITY ORDER AND ARE NOT DECORATION:
     Stop now  > Now > marker > staircase > Target > Starting stop > bands.
   An amateur must find the stop first. Everything dimmer than it is
   there to be looked at second.
   ═══════════════════════════════════════════════════════════════ */

/* ⚠ THE BANDS RECEDE WHILE A SIGNAL RUNS. Not removed — they explain where
   Scout found it, and during WAIT they are the whole chart. */
.zn--mute rect{opacity:.28}
.zn--mute line{opacity:.30}

/* 2 · STOP NOW — the loudest line on the chart */
.lv{stroke-width:1.5}
.lv--stop{stroke-width:2.5;stroke-opacity:1}
.lv--up{stroke:var(--up)}
.lv--dn{stroke:var(--down-ink)}
/* 6 · STARTING STOP — history, so it whispers */
.lv--was{stroke:var(--ink-3);stroke-dasharray:3 6;stroke-opacity:.8}
/* 5 · TARGET */
.lv--tgt{stroke:var(--pulse);stroke-dasharray:8 5;stroke-opacity:.75}
.edge__a{stroke:var(--pulse);stroke-width:2.5;stroke-linecap:round}

/* 4 · the staircase — how the stop got where it is */
.stair{stroke-width:2;stroke-dasharray:5 4;stroke-opacity:.65}
.stair--up{stroke:var(--up)}
.stair--dn{stroke:var(--down-ink)}

/* 1 · the BUY / SELL marker */
.mk--up .mk__t{fill:var(--up)}
.mk--dn .mk__t{fill:var(--down-ink)}
.mk__d{fill:var(--ground);stroke-width:2}
.mk--up .mk__d{stroke:var(--up)}
.mk--dn .mk__d{stroke:var(--down-ink)}

/* the axis: Scout's words, not bare numbers */
.axl--stop{color:var(--ink);font-weight:600}
.axl--sig{color:var(--ink-2)}
.axl--tgt{color:var(--pulse)}
.axl--was{color:var(--ink-4)}

/* the panel */
.pv__l--up{color:var(--up)}
.pv__l--dn{color:var(--down-ink)}
.pv__l--wait{color:var(--ink-2)}
.lvrow{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--seam)}
.lvrow__k{font:400 13px/1 var(--sans);color:var(--ink-2)}
.lvrow__v{font:500 16px/1 var(--mono);color:var(--ink)}
.lvrow--stop .lvrow__v{color:var(--ink);font-size:18px}
.lvrow--stop .lvrow__k{color:var(--ink)}
.pv__move{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.pv__state{display:block;margin-top:18px;font:500 11px/1 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--up)}
.pv__state--wait{color:var(--ink-3)}
.pv__statesay{display:block;margin-top:6px;font-size:13px;color:var(--ink-2)}
.axl--edge{font-weight:600}