/* ===========================================================================
   PocketFolio PRO — design system
   Dark-first, because traders sit in front of this all day. Light theme is a
   first-class peer, not an afterthought: every colour is a token defined in
   both, so nothing is hard-coded to one mode.
   =========================================================================== */

:root {
  /* --- type scale --- */
  --fs-3xs: 10px;  --fs-2xs: 11px; --fs-xs: 12px;  --fs-sm: 13px;
  --fs-md: 14px;   --fs-lg: 16px;  --fs-xl: 20px;  --fs-2xl: 26px; --fs-3xl: 34px;

  /* --- spacing scale --- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* Softer, friendlier corners than a trading-terminal look - rounded enough
     to feel approachable without losing the density a screener needs. */
  --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-full: 999px;

  --mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* A rounder, warmer geometric face for headings, the brand and big numbers -
     everyday UI chrome and dense tables stay on --sans for legibility at small
     sizes. Falls back to --sans until the webfont is in. */
  --display: "Poppins", var(--sans);

  --topbar-h: 60px;
  /* The app pins a top bar and a tab row; a page's own bar sits under both. */
  --tabs-h: 44px;
  --pinned-h: calc(var(--topbar-h) + var(--tabs-h));
  --statusbar-h: 30px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .12s var(--ease);
  --t-med: .22s var(--ease);
}

/* `hidden` must always hide, even on elements whose class sets display. */
[hidden] { display: none !important; }


/* --- dark (default) ------------------------------------------------------ */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg:         #07080b;
  --bg-sunken:  #040507;
  --surface:    #0e1015;
  --surface-2:  #14171d;
  --surface-3:  #1c2027;
  --border:     #1e222b;
  --border-2:   #2b313c;
  --border-focus: #6b5a24;

  --text:       #eef1f6;
  --text-2:     #a3abb9;
  --muted:      #8c94a3;
  --dim:        #5f6674;

  --up:         #3ddc97;
  --up-bg:      rgba(61, 220, 151, .12);
  --up-border:  rgba(61, 220, 151, .28);
  --down:       #ff5d73;
  --down-bg:    rgba(255, 93, 115, .12);
  --down-border: rgba(255, 93, 115, .28);

  /* Signature gold. It never means "up" or "down" - those stay green and red -
     so it is free to mean "this is the product speaking": brand, focus,
     selection, the thing you should look at next. */
  --accent:     #ffc857;
  --accent-bg:  rgba(255, 200, 87, .12);
  --accent-fg:  #1a1403;
  --warn:       #ffb020;
  --warn-bg:    rgba(255, 176, 32, .13);
  /* Results days on the price chart: a different kind of fact from a split,
     so a hue of its own rather than another shade of the accent. */
  --mark:       #5aa9e6;
  --mark-bg:    rgba(90, 169, 230, .12);
  --mark-line:  rgba(90, 169, 230, .30);
  --accent-2:    #ffc857;
  --accent-2-bg: rgba(255, 200, 87, .12);
  --accent-2-fg: #1a1403;

  /* Cards are lit from above: a hairline highlight on the top edge and a real
     drop shadow underneath. That one detail is most of what separates "panel
     drawn with a border" from "object sitting on a surface". */
  --dot-grid:   rgba(255,255,255,.035);
  --card-sheen: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,0) 58%);
  --card-edge:  inset 0 1px 0 rgba(255,255,255,.055);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.5);
  --shadow:     0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.6);
  --shadow-accent: 0 8px 26px rgba(255,200,87,.18);
  --glow:       0 0 0 1px rgba(255,200,87,.3), 0 10px 32px rgba(255,200,87,.12);
  --ambient:
    radial-gradient(1100px 500px at 8% -14%, rgba(255,200,87,.055), transparent 60%),
    radial-gradient(800px 420px at 92% -6%, rgba(61,220,151,.035), transparent 55%);
}

/* --- light ---------------------------------------------------------------- */
[data-theme="light"] {
  /* "only light" is the opt-out from a browser's own auto-darkening (Chrome's
     auto dark theme on Android, Samsung Internet): without it those re-tint
     this palette grey when the phone is in dark mode. */
  color-scheme: only light;
  /* Near-white, not grey: on a phone the old off-white page read as grey
     next to the white cards. Cards stay pure white and are told apart by
     their border and shadow instead of by a darker page behind them. */
  --bg:         #fdfdfc;
  --bg-sunken:  #f4f4f1;
  --surface:    #ffffff;
  --surface-2:  #f8f8f5;
  --surface-3:  #eeeeea;
  --border:     #e4e2dd;
  --border-2:   #cfccc5;
  --border-focus: #c9a227;

  --text:       #15161a;
  --text-2:     #4a4d55;
  --muted:      #6b6f78;
  --dim:        #91959e;

  --up:         #047857;
  --up-bg:      rgba(4, 120, 87, .1);
  --up-border:  rgba(4, 120, 87, .26);
  --down:       #d32444;
  --down-bg:    rgba(211, 36, 68, .09);
  --down-border: rgba(211, 36, 68, .24);

  --accent:     #8a6100;
  --accent-bg:  rgba(138, 97, 0, .1);
  --accent-fg:  #ffffff;
  --warn:       #9a5b06;
  --warn-bg:    rgba(154, 91, 6, .12);
  --mark:       #1d6ba8;
  --mark-bg:    rgba(29, 107, 168, .10);
  --mark-line:  rgba(29, 107, 168, .28);
  --accent-2:    #8a6100;
  --accent-2-bg: rgba(138, 97, 0, .1);
  --accent-2-fg: #ffffff;

  --dot-grid:   rgba(20,20,25,.04);
  --card-sheen: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 58%);
  --card-edge:  inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-sm:  0 1px 2px rgba(20,20,25,.05);
  --shadow:     0 6px 20px rgba(20,20,25,.07);
  --shadow-lg:  0 24px 55px rgba(20,20,25,.13);
  --shadow-accent: 0 8px 24px rgba(138,97,0,.14);
  --glow:       0 0 0 1px rgba(138,97,0,.25), 0 8px 26px rgba(138,97,0,.1);
  --ambient:
    radial-gradient(1100px 500px at 8% -14%, rgba(201,162,39,.07), transparent 60%),
    radial-gradient(800px 420px at 92% -6%, rgba(4,120,87,.03), transparent 55%);
}

/* --- density ------------------------------------------------------------- */
/* Compact is not the same page with less padding - that is what it used to be,
   four variables and two font sizes, about fifteen percent, which nobody could
   feel. It is a different reading of the same screen.
   Vertically it drops the line under a value. Horizontally - the half that was
   missing - it gives the page back its margins and tightens every cell, so more
   columns and more rows fit in the width that was already there.
   Scanning a hundred rows for one, and reading one company, are different jobs. */
[data-density="compact"] {
  --s-3: 8px; --s-4: 12px; --s-5: 14px; --s-6: 18px;
  --fs-sm: 12px; --fs-md: 13px;
}

/* Horizontal. The shell first: a wider ceiling and slimmer gutters are worth
   more than any cell, because every column downstream inherits the room. */
[data-density="compact"] main {
  padding-left: var(--s-3); padding-right: var(--s-3); max-width: 1920px;
}
[data-density="compact"] thead th,
[data-density="compact"] tbody td { padding: 5px 7px; }
[data-density="compact"] thead th:first-child,
[data-density="compact"] tbody td:first-child { padding-left: var(--s-3); }
[data-density="compact"] thead th:last-child,
[data-density="compact"] tbody td:last-child { padding-right: var(--s-3); }
[data-density="compact"] .card-body { padding: var(--s-3); }
[data-density="compact"] .card-head { padding-left: var(--s-3); padding-right: var(--s-3); }
/* Cards narrow, so a wide screen holds four where it held two. */
[data-density="compact"] .setup-grid {
  gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
[data-density="compact"] .ipo-line-row { padding: 5px var(--s-3); }
[data-density="compact"] .ipo-listed-row {
  grid-template-columns:
    minmax(112px, 1.8fr) 76px 56px 78px 82px 80px 62px 64px 50px 116px 20px;
}

/* Vertical. The company's full name under its symbol is what identifies a row
   while you are learning a list, and dead weight once you know it - and taking
   it out narrows the column as well, so this earns its place on both axes. */
[data-density="compact"] .sym-name,
[data-density="compact"] .it-s { display: none; }
[data-density="compact"] .sym-code { line-height: 1.2; }

* { box-sizing: border-box; }
::selection { background: var(--accent-bg); }

/* min-height, not height: a body fixed at one screen tall ends the sticky
   top bar's range after the first screen of scrolling. */
html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background-image:
    radial-gradient(circle at 1px 1px, var(--dot-grid) 1px, transparent 0),
    var(--ambient);
  background-size: 22px 22px, auto;
  background-attachment: fixed;
  padding-bottom: var(--statusbar-h);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); }
.muted { color: var(--muted); } .dim { color: var(--dim); }
.tnum { font-variant-numeric: tabular-nums; }

/* ===================== top bar ===================== */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--s-4);
  height: var(--topbar-h); padding: 0 var(--s-5);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: var(--s-3); user-select: none; }
.brand-mark {
  width: 38px; height: 38px; flex: none; border-radius: 9px;
  box-shadow: 0 4px 14px rgba(255, 200, 87, .14);
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-name { font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.brand-name .pro {
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .1em;
  color: var(--accent); background: var(--accent-bg);
  padding: 1px 5px; border-radius: var(--radius-sm); margin-left: 5px; vertical-align: 1.5px;
}
.brand-tag { font-size: var(--fs-3xs); color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }

.seg {
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.seg button {
  padding: 5px 12px; border-radius: var(--radius-sm); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 600; transition: var(--t-fast);
}
.seg button:hover { color: var(--text); background: var(--surface-3); }
.seg button.active { background: var(--accent-bg); color: var(--accent); }

.spacer { margin-left: auto; }

.icon-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--muted);
  border: 1px solid transparent; transition: var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.icon-btn svg { width: 16px; height: 16px; }

/* command-palette launcher */
.cmd-trigger {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 7px 10px 7px 11px; min-width: 210px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--dim);
  font-size: var(--fs-xs); transition: var(--t-fast);
}
.cmd-trigger:hover { border-color: var(--border-2); color: var(--muted); }
.cmd-trigger svg { width: 14px; height: 14px; flex: none; }
kbd {
  font-family: var(--sans); font-size: var(--fs-3xs); font-weight: 600;
  padding: 2px 5px; border-radius: 4px; color: var(--muted);
  background: var(--surface-3); border: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border); line-height: 1.4;
}

/* live indicator */
.live-chip {
  display: flex; align-items: center; gap: 7px; padding: 6px 11px;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full);
  white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.dot.on { background: var(--up); animation: pulse 2.4s ease-out infinite; }
.dot.err { background: var(--down); }
.dot.idle { background: var(--warn); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--up-border); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ===================== tabs ===================== */
.tabs {
  position: sticky; top: var(--topbar-h); z-index: 55;
  display: flex; gap: var(--s-1); padding: 0 var(--s-5);
  background: var(--bg-sunken); border-bottom: 1px solid var(--border);
}
.tabs button {
  position: relative; padding: 11px 14px; color: var(--muted);
  font-size: var(--fs-sm); font-weight: 600; transition: var(--t-fast);
}
.tabs button::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0;
  box-shadow: 0 -4px 14px var(--accent-bg);
  transform: scaleX(0); transition: transform var(--t-med);
}
.tabs button.active { color: var(--accent); }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--text); }
.tabs button.active::after { transform: scaleX(1); }
.tabs .hint { font-size: var(--fs-3xs); color: var(--dim); margin-left: 5px; font-weight: 500; }

main { padding: var(--s-5); max-width: 1680px; margin: 0 auto; }
.view[hidden] { display: none !important; }

/* ===================== cards ===================== */
.card {
  background: var(--card-sheen), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--card-edge), var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.card:hover { border-color: var(--border-2); box-shadow: var(--card-edge), var(--shadow); }
.card-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); min-height: 46px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.card-head h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display);
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-2); font-weight: 600;
}
.card-head h3::before {
  content: ''; width: 3px; height: 12px; border-radius: 2px;
  background: var(--accent); flex: none;
}
.card-head .sub { font-size: var(--fs-3xs); color: var(--dim); font-weight: 500; }
.card-body { padding: var(--s-4); }
.card-head { backdrop-filter: none; }
.card-body.flush { padding: 0; }

.grip {
  cursor: grab; color: var(--dim); font-size: 13px; letter-spacing: -2px;
  user-select: none; opacity: 0; transition: opacity var(--t-fast); flex: none;
}
.card:hover .grip { opacity: 1; }
.grip:active { cursor: grabbing; }

/* Cards size to their own content. Forcing a shared row height looks tidy in
   a wireframe and terrible in practice - a short card beside a tall one turns
   into a large empty rectangle. */
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(12, 1fr); align-items: start; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }

.card.dragging { opacity: .4; }
.card.drop-target { border-color: var(--accent); box-shadow: var(--glow); }

/* ===================== sentiment ring ===================== */
.ring-wrap { display: flex; align-items: center; gap: var(--s-5); }
.ring { position: relative; width: 150px; height: 150px; flex: none; }
.ring svg { transform: rotate(-90deg); display: block; }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-score { font-size: var(--fs-3xl); font-weight: 700; font-family: var(--display); line-height: 1; letter-spacing: -.02em; }
.ring-label {
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; margin-top: 5px;
}

.breadth-bar {
  display: flex; height: 6px; border-radius: var(--radius-full);
  overflow: hidden; background: var(--surface-3); margin: var(--s-3) 0 var(--s-2);
}
.breadth-bar i { display: block; height: 100%; transition: width var(--t-med); }

.stat-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-xs);
}
.stat-row:last-child { border-bottom: 0; }

/* ===================== movers ===================== */
.mover {
  display: grid; grid-template-columns: 1fr 58px auto; gap: 2px var(--s-3);
  align-items: center; padding: 9px 10px; border-radius: var(--radius);
  cursor: pointer; border: 1px solid transparent; transition: var(--t-fast);
}
.mover:hover { background: var(--surface-2); border-color: var(--border); }
.mover .sym { font-weight: 650; font-size: var(--fs-sm); grid-column: 1; }
.mover .meta { font-size: var(--fs-3xs); color: var(--dim); grid-column: 1; grid-row: 2; }
.mover .spark { grid-column: 2; grid-row: 1 / span 2; }
.mover .px { grid-column: 3; grid-row: 1; text-align: right; font-family: var(--mono); font-size: var(--fs-sm); }
.mover .chg { grid-column: 3; grid-row: 2; text-align: right; font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 650; }

.spark { display: block; width: 58px; height: 22px; overflow: visible; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .02em;
  background: var(--surface-3); color: var(--muted); border: 1px solid transparent;
  white-space: nowrap;
}
.pill.up { background: var(--up-bg); color: var(--up); }
.pill.down { background: var(--down-bg); color: var(--down); }
.pill.accent { background: var(--accent-bg); color: var(--accent); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.outline { background: none; border-color: var(--border); color: var(--muted); }

/* ===================== sector tiles ===================== */
/* Industries ranked, with the bar running either side of a centre line.
   A tile grid cut every name to "CHEMICALS & ..." and printed a large grey
   0.0% fifty-eight times; here the name has a line to itself and direction
   is a shape rather than a sign. */
.sector-rank { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* The list scrolls inside the card instead of setting the card's height:
   beside the mood card a fifteen-row list stretched the row and left three
   hundred pixels of nothing under the ring. */
.sr-scroll {
  flex: 1; min-height: 0; max-height: 290px; overflow-y: auto; scrollbar-width: thin;
}
.sr-scroll::-webkit-scrollbar { width: 6px; }
.sr-scroll::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.sr-row {
  display: grid; grid-template-columns: minmax(96px, 1.5fr) minmax(70px, 2fr) 54px 34px;
  align-items: center; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.sr-row:last-of-type { border-bottom: 0; }
.sr-name {
  font-size: var(--fs-2xs); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-track {
  position: relative; height: 8px; border-radius: 2px;
  background: linear-gradient(90deg, transparent calc(50% - 1px),
              var(--border-2) calc(50% - 1px), var(--border-2) calc(50% + 1px),
              transparent calc(50% + 1px));
}
.sr-bar { position: absolute; top: 1px; bottom: 1px; border-radius: 2px; background: var(--dim); }
.sr-bar.up { background: var(--up); }
.sr-bar.down { background: var(--down); }
.sr-bar.flat { background: var(--border-2); }
.sr-val { text-align: right; font-size: var(--fs-2xs); font-weight: 700; }
.sr-val.flat { color: var(--dim); }
.sr-n { text-align: right; font-size: var(--fs-3xs); color: var(--dim); font-variant-numeric: tabular-nums; }
.sr-gap {
  padding: 7px 0; text-align: center; font-size: var(--fs-3xs); color: var(--dim);
  border-bottom: 1px solid var(--border);
}
.sr-flat { margin: 0 0 var(--s-2); font-size: var(--fs-2xs); color: var(--muted); line-height: 1.6; }
.sr-more {
  align-self: flex-start; margin-top: var(--s-3); padding: 4px 0;
  background: none; border: 0; color: var(--accent);
  font-size: var(--fs-2xs); font-weight: 650; cursor: pointer;
}

/* ===================== tables ===================== */
.table-wrap { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); text-align: right;
  padding: 9px 11px; white-space: nowrap;
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700;
  border-bottom: 1px solid var(--border); cursor: pointer; user-select: none;
  transition: color var(--t-fast);
}
thead th:first-child, tbody td:first-child { text-align: left; padding-left: var(--s-4); }
thead th:last-child, tbody td:last-child { padding-right: var(--s-4); }
thead th:hover { color: var(--text); }
thead th.sorted { color: var(--accent); }
thead th.sorted::after { content: ' ↓'; font-size: 9px; }
thead th.sorted.asc::after { content: ' ↑'; }
tbody td { padding: 8px 11px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr { cursor: pointer; transition: background var(--t-fast); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody td.sym { font-weight: 650; }

@keyframes flash-up { from { background: var(--up-bg); } to { background: transparent; } }
@keyframes flash-down { from { background: var(--down-bg); } to { background: transparent; } }
.flash-up { animation: flash-up .8s var(--ease); }
.flash-down { animation: flash-down .8s var(--ease); }

/* ===================== filters ===================== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); font-size: var(--fs-xs); font-weight: 600; transition: var(--t-fast);
}
.chip:hover { border-color: var(--border-2); color: var(--text); }
.chip.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

.controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 var(--s-6); }
.range-row { display: flex; align-items: center; gap: var(--s-3); padding: 6px 0; font-size: var(--fs-xs); }
.range-row label { width: 112px; color: var(--muted); font-weight: 600; flex: none; }
.range-row input[type=range] { flex: 1; accent-color: var(--accent); min-width: 0; }
.range-row .val { width: 48px; text-align: right; font-family: var(--mono); color: var(--accent); font-weight: 650; flex: none; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text); font-weight: 600; font-size: var(--fs-xs); transition: var(--t-fast);
}
.btn:hover { background: var(--surface-3); border-color: var(--border-focus); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-accent); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { padding: 5px 10px; font-size: var(--fs-2xs); }
.btn.danger { color: var(--down); border-color: transparent; background: var(--down-bg); }
.btn.danger:hover { background: var(--down-bg); border-color: var(--down-border); }
.btn svg { width: 13px; height: 13px; }

/* ===================== chart view ===================== */
.chart-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; min-width: 0; }
.chart-head .sym { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -.03em; }
.chart-head .price { font-size: var(--fs-xl); font-family: var(--mono); font-weight: 700; letter-spacing: -.03em; }
.chart-panel { height: 400px; }
.sub-panel { height: 124px; border-top: 1px solid var(--border); }
.pane-label {
  position: absolute; left: var(--s-4); top: 6px; z-index: 3; pointer-events: none;
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim);
}
.pane { position: relative; }

.insight-text { font-size: var(--fs-md); line-height: 1.65; }
.bullet {
  display: flex; gap: var(--s-3); padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: var(--fs-sm); line-height: 1.55;
}
.bullet:last-child { border-bottom: 0; }
.bullet .mark { flex: none; width: 3px; border-radius: 2px; background: var(--dim); }
.bullet.bullish .mark { background: var(--up); }
.bullet.bearish .mark { background: var(--down); }
.bullet.neutral .mark { background: var(--accent); }

.meter { height: 7px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; margin: var(--s-2) 0; }
.meter i { display: block; height: 100%; border-radius: var(--radius-full); transition: width var(--t-med); }

.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.kv > div {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 10px;
}
.kv .k {
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); font-weight: 700;
}
.kv .v { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 700; margin-top: 2px; letter-spacing: -.03em; }

.disclaimer {
  font-size: var(--fs-2xs); color: var(--dim); line-height: 1.6;
  border-left: 2px solid var(--border-2); padding-left: var(--s-3); margin-top: var(--s-3);
}

/* ===================== command palette ===================== */
.overlay {
  position: fixed; inset: 0; z-index: 180;
  background: color-mix(in srgb, var(--bg-sunken) 72%, transparent);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; animation: fade-in .14s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(-8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }

.palette {
  width: min(600px, 92vw); max-height: 66vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; animation: rise .18s var(--ease);
}
.palette-input {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-bottom: 1px solid var(--border);
}
.palette-input svg { width: 17px; height: 17px; color: var(--dim); flex: none; }
.palette-input input {
  flex: 1; background: none; border: 0; outline: none;
  font-size: var(--fs-lg); color: var(--text); min-width: 0;
}
.palette-input input::placeholder { color: var(--dim); }
.palette-list { overflow-y: auto; padding: var(--s-2); }
.palette-group {
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--dim); font-weight: 700; padding: var(--s-3) var(--s-3) var(--s-1);
}
.palette-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px var(--s-3); border-radius: var(--radius-sm); cursor: pointer;
}
.palette-item[aria-selected="true"] { background: var(--accent-bg); }
.palette-item .icon {
  width: 24px; height: 24px; border-radius: var(--radius-sm); flex: none;
  display: grid; place-items: center; background: var(--surface-3);
  font-size: var(--fs-2xs); font-weight: 700; color: var(--muted);
}
.palette-item[aria-selected="true"] .icon { background: var(--accent); color: var(--accent-fg); }
.palette-item .label { flex: 1; font-size: var(--fs-sm); font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item .hint { font-size: var(--fs-2xs); color: var(--dim); white-space: nowrap; }
.palette-foot {
  display: flex; gap: var(--s-4); padding: 9px var(--s-4);
  border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--fs-3xs); color: var(--dim);
}

/* ===================== drawer (settings / help) ===================== */
.drawer {
  width: min(420px, 94vw); max-height: 82vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: rise .18s var(--ease);
}
.drawer-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.drawer-head h3 { font-size: var(--fs-lg); font-weight: 700; flex: 1; }
.drawer-body { padding: var(--s-4); }
.setting {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
}
.setting:last-child { border-bottom: 0; }
.setting .label { font-size: var(--fs-sm); font-weight: 600; }
.setting .desc { font-size: var(--fs-2xs); color: var(--dim); margin-top: 2px; line-height: 1.45; }
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--border);
}
.shortcut-row:last-child { border-bottom: 0; }
.shortcut-row .keys { display: flex; gap: 4px; }

/* ===================== status bar ===================== */
.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: var(--statusbar-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5);
  background: color-mix(in srgb, var(--bg-sunken) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  font-size: var(--fs-3xs); color: var(--dim);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.statusbar .item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.statusbar .item strong { color: var(--text-2); font-weight: 650; }
.statusbar .sep { width: 1px; height: 12px; background: var(--border); flex: none; }
.session-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--dim); }
.session-dot.open { background: var(--up); }
.session-dot.pre_open { background: var(--warn); }
.session-dot.closed, .session-dot.weekend { background: var(--dim); }

/* ===================== toasts ===================== */
.toasts {
  position: fixed; right: var(--s-5); bottom: calc(var(--statusbar-h) + var(--s-4));
  z-index: 200; display: flex; flex-direction: column; gap: var(--s-2);
}
.toast {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-left: 3px solid var(--warn); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-lg);
  max-width: 340px; animation: slide-in .22s var(--ease);
  transition: opacity .35s, transform .35s;
}
.toast.up { border-left-color: var(--up); }
.toast.down { border-left-color: var(--down); }
.toast .t { font-weight: 700; font-size: var(--fs-xs); }
.toast .d { font-size: var(--fs-2xs); color: var(--muted); line-height: 1.5; margin-top: 2px; }
@keyframes slide-in { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===================== states ===================== */
.empty {
  text-align: center; padding: var(--s-8) var(--s-4);
  color: var(--dim); font-size: var(--fs-sm); line-height: 1.6;
}
.empty .empty-icon { font-size: 26px; opacity: .45; display: block; margin-bottom: var(--s-2); }
.empty .empty-title { color: var(--text-2); font-weight: 650; display: block; margin-bottom: 3px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm); height: 13px; margin: 8px 0;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.form-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.form-row input, .form-row select {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px; outline: none;
  font-size: var(--fs-sm); transition: var(--t-fast);
}
.form-row input:focus, .form-row select:focus { border-color: var(--border-focus); background: var(--surface); }
.form-row input.sym-in { width: 112px; text-transform: uppercase; font-family: var(--mono); font-weight: 650; }
.form-row input.num-in { width: 96px; font-family: var(--mono); }

/* ===================== responsive ===================== */
@media (max-width: 1240px) {
  .col-3, .col-4, .col-5 { grid-column: span 6; }
  .col-8 { grid-column: span 12; }
  .cmd-trigger { min-width: 150px; }
  .cmd-trigger .cmd-label { display: none; }
}
@media (max-width: 860px) {
  .grid > * { grid-column: span 12 !important; }
  .brand-tag, .statusbar .optional { display: none; }
  main { padding: var(--s-3); }
  .tabs { overflow-x: auto; }
  .tabs .hint { display: none; }
}
@media (max-width: 560px) {
  .cmd-trigger { min-width: 0; padding: 7px 9px; }
  .cmd-trigger kbd { display: none; }
  .live-chip span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ===========================================================================
   Opportunities — trade setup cards
   =========================================================================== */
.horizon-bar {
  display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: var(--s-4);
}
.horizon-tab {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  transition: var(--t-fast); text-align: left;
}
.horizon-tab:hover { border-color: var(--border-2); }
.horizon-tab.on { background: var(--accent-bg); border-color: var(--accent); }
.horizon-tab .h-label { font-size: var(--fs-sm); font-weight: 700; }
.horizon-tab.on .h-label { color: var(--accent); }
.horizon-tab .h-hold { font-size: var(--fs-3xs); color: var(--dim); }

.horizon-bar { justify-content: space-between; }
.horizon-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.cap-wrap { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.ctl-label {
  font-size: var(--fs-3xs); color: var(--dim); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}.w-title {
  display: flex; align-items: baseline; gap: var(--s-3);
  font-size: var(--fs-xs); margin-bottom: var(--s-3); flex-wrap: wrap;
}
.w-title .dim { font-size: var(--fs-2xs); }

/* --- index drill-down --- */
.index-card.clickable { cursor: pointer; }
.index-card.clickable:hover { border-color: var(--accent); }
.index-card .i-drill {
  position: absolute; right: 9px; top: 9px; font-size: var(--fs-3xs);
  color: var(--dim); opacity: 0; transition: opacity var(--t-fast);
}
.index-card.clickable:hover .i-drill,
.index-card.open .i-drill { opacity: 1; color: var(--accent); }
.index-card.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The open card visually joins the drawer below it. */
.index-card.open {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px -12px rgba(255,200,87,.45);
}

/* Category tabs over the board: one group at a time instead of 140 cards. */
.idx-tabs {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px; margin-bottom: var(--s-2);
}
.idx-tabs::-webkit-scrollbar { display: none; }
.idx-tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 13px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); font-size: var(--fs-xs); font-weight: 650;
  transition: var(--t-fast);
}
.idx-tab:hover { color: var(--text); border-color: var(--border-2); }
.idx-tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.idx-tab-n {
  font-family: var(--mono); font-size: var(--fs-3xs); opacity: .7;
}
.idx-hint { font-size: var(--fs-3xs); margin: 0 0 var(--s-3); }

.idx-drawer {
  grid-column: 1 / -1;
  padding: var(--s-4); border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--surface);
  animation: drawer-in .22s var(--ease);
  transform-origin: top;
}
@keyframes drawer-in {
  from { opacity: 0; transform: translateY(-6px) scaleY(.97); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .idx-drawer { animation: none; } }

.seg-mini {
  display: inline-flex; padding: 2px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface);
}
.seg-mini button {
  padding: 4px 11px; border-radius: var(--radius-full);
  font-size: var(--fs-3xs); font-weight: 650; color: var(--muted);
}
.seg-mini button.on { background: var(--surface-3, var(--surface-2)); color: var(--text); }
.drill-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: var(--s-3); flex-wrap: wrap;
}
.drill-head .d-name { font-size: var(--fs-lg); font-weight: 750; }

.regime-banner {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--fs-xs); line-height: 1.55; margin-bottom: var(--s-4);
}
.regime-banner.bearish { border-color: var(--down-border); background: var(--down-bg); }
.regime-banner.bullish { border-color: var(--up-border); background: var(--up-bg); }
.regime-banner .rb-icon { font-size: var(--fs-lg); flex: none; }

.setup-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.setup {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; transition: var(--t-fast);
}
.setup:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.setup-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border);
  background: var(--surface-2); cursor: pointer;
}
.setup-head .s-sym { font-size: var(--fs-lg); font-weight: 750; letter-spacing: -.02em; }
.setup-head .s-meta { font-size: var(--fs-3xs); color: var(--dim); }
.setup-score {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--radius); font-family: var(--display);
  font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em;
}
.setup-score.high { background: var(--up-bg); color: var(--up); }
.setup-score.mid { background: var(--warn-bg); color: var(--warn); }
.setup-score.low { background: var(--surface-3); color: var(--muted); }
.setup-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }

/* the stop → entry → target ladder */
.ladder { padding: var(--s-2) 0 0; }
.ladder-bar {
  position: relative; height: 8px; border-radius: var(--radius-full);
  background: var(--surface-3); overflow: hidden; display: flex;
}
.ladder-bar .risk-seg { background: var(--down); opacity: .55; }
.ladder-bar .reward-seg { background: var(--up); opacity: .55; }
.ladder-marks {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: var(--fs-3xs);
}
.ladder-marks > div { display: flex; flex-direction: column; gap: 1px; }
.ladder-marks .m-label { color: var(--dim); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.ladder-marks .m-price { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; }
.ladder-marks .mid { align-items: center; text-align: center; }
.ladder-marks .right { align-items: flex-end; text-align: right; }

.setup-rows { display: grid; gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; }
.setup-row {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: 8px 11px; background: var(--surface); font-size: var(--fs-xs);
}
.setup-row .r-key {
  width: 62px; flex: none; color: var(--dim); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-3xs);
}
.setup-row .r-val { font-family: var(--mono); font-weight: 700; font-size: var(--fs-sm); }
.setup-row .r-note { color: var(--muted); font-size: var(--fs-3xs); line-height: 1.45; }

.why { font-size: var(--fs-xs); line-height: 1.6; color: var(--text-2); }
.why ul { margin: 0; padding: 0; list-style: none; }
.why li { position: relative; padding-left: 16px; margin-bottom: 6px; }
.why li::before {
  content: ''; position: absolute; left: 2px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--dim);
}
/* Same three colours as the scoring-mix bar, so a reader can see which part
   of their mix each reason comes from. */
.why li.lens-technical::before { background: var(--accent); }
.why li.lens-fundamental::before { background: #6d98ff; }
.why li.lens-sentiment::before { background: #ba80e1; }
.why-title {
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.caution {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: var(--fs-2xs); line-height: 1.5; color: var(--warn);
  background: var(--warn-bg); border-radius: var(--radius-sm); padding: 7px 9px;
}
.caution .c-icon { flex: none; }

.badge-row { display: flex; gap: 5px; flex-wrap: wrap; }

/* ===========================================================================
   Fundamentals
   =========================================================================== */
/* The grade with its number beside it: a 59 and a 66 are both "B", and the
   difference between them is the thing a reader is deciding on. */
.sc-card-score { font-size: var(--fs-2xs); color: var(--text-2); white-space: nowrap; }
.sc-card-score strong { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.sc-card-score i { font-style: normal; color: var(--dim); font-size: var(--fs-3xs); }

.grade-badge {
  display: grid; place-items: center; width: 72px; height: 72px; flex: none;
  border-radius: var(--radius-lg); font-size: var(--fs-2xl); font-weight: 700;
  font-family: var(--display); letter-spacing: -.01em;
}
.grade-badge.a { background: var(--up-bg); color: var(--up); }
.grade-badge.b { background: var(--accent-bg); color: var(--accent); }
.grade-badge.c { background: var(--warn-bg); color: var(--warn); }
.grade-badge.d { background: var(--down-bg); color: var(--down); }
.grade-badge.na { background: var(--surface-3); color: var(--dim); }

.pillar { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.pillar:last-child { border-bottom: 0; }
.pillar-head { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: 6px; }
.pillar-head .p-name { font-size: var(--fs-sm); font-weight: 650; flex: 1; }
.pillar-head .p-score { font-family: var(--mono); font-weight: 750; font-size: var(--fs-md); }
.pillar-head .p-cov { font-size: var(--fs-3xs); color: var(--dim); }
.pillar-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; margin-top: 8px; }
.metric {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 9px;
}
.metric .m-name { font-size: var(--fs-3xs); color: var(--dim); font-weight: 650; }
.metric .m-val { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 700; margin-top: 1px; }
.metric .m-bar { height: 3px; border-radius: 2px; background: var(--surface-3); margin-top: 5px; overflow: hidden; }
.metric .m-bar i { display: block; height: 100%; border-radius: 2px; }

.news-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: 0; }
.news-item .n-title { font-size: var(--fs-sm); line-height: 1.5; font-weight: 600; }
.news-item .n-meta { font-size: var(--fs-3xs); color: var(--dim); margin-top: 3px; display: flex; gap: var(--s-2); align-items: center; }

@media (max-width: 860px) {
  .setup-grid { grid-template-columns: 1fr; }
  .risk-inputs { margin-left: 0; width: 100%; }
}

/* ===========================================================================
   Indices board & heatmaps
   =========================================================================== */
.index-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); }
.index-card {
  position: relative; overflow: hidden;
  padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); transition: var(--t-fast);
}
.index-card:hover { border-color: var(--border-2); }
.index-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--dim);
}
.index-card.up::before { background: var(--up); }
.index-card.down::before { background: var(--down); }
.index-card .i-name {
  font-size: var(--fs-2xs); font-weight: 750; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.index-card .i-row { display: flex; align-items: flex-end; gap: var(--s-2); margin-top: 5px; }
.index-card .i-price { font-family: var(--display); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; }
.index-card .i-chg { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; padding-bottom: 3px; }
.index-card .i-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: 6px; }
.index-card .i-note { font-size: var(--fs-3xs); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* returns matrix */
.matrix-wrap { overflow-x: auto; }
table.matrix { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: var(--fs-xs); }
table.matrix th {
  position: static; background: none; border: 0; padding: 4px 8px;
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); font-weight: 700; text-align: center; cursor: default;
}
table.matrix th.row-head { text-align: left; min-width: 150px; }
table.matrix td {
  padding: 8px 10px; text-align: center; border: 0; border-radius: var(--radius-sm);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 700; white-space: nowrap;
}
table.matrix td.name {
  text-align: left; font-family: var(--sans); font-weight: 650;
  background: var(--surface-2); font-size: var(--fs-xs);
}
table.matrix td.na { color: var(--dim); font-weight: 500; background: var(--surface-2); }
table.matrix tr { cursor: default; }
table.matrix tr:hover { background: none; }

/* treemap */
.treemap { display: flex; flex-direction: column; gap: var(--s-3); }
.tm-block { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tm-head {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: 7px var(--s-3); background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.tm-head .tm-name { font-size: var(--fs-xs); font-weight: 700; flex: 1; }
.tm-head .tm-chg { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 750; }
.tm-head .tm-count { font-size: var(--fs-3xs); color: var(--dim); }
.tm-tiles { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; }
.tm-tile {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-radius: 3px; padding: 6px 4px; min-width: 56px; min-height: 46px;
  cursor: pointer; transition: outline-color var(--t-fast); outline: 2px solid transparent;
  overflow: hidden;
}
.tm-tile:hover { outline-color: var(--text); }
.tm-tile .t-sym {
  font-size: var(--fs-3xs); font-weight: 750; letter-spacing: -.01em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tm-tile .t-chg { font-family: var(--mono); font-size: var(--fs-3xs); font-weight: 700; margin-top: 1px; }

.legend { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-3xs); color: var(--dim); }
.legend .swatches { display: flex; gap: 2px; }
.legend i { width: 20px; height: 9px; border-radius: 2px; display: block; }

.toolbar { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }


/* ===========================================================================
   Market badge & feed status
   =========================================================================== */
.market-badge {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 6px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
}
.market-badge .mb-flag {
  font-size: var(--fs-3xs); font-weight: 800; letter-spacing: .06em;
  padding: 3px 6px; border-radius: var(--radius-sm);
  background: var(--accent-bg); color: var(--accent);
}
.market-badge .mb-name { font-size: var(--fs-xs); font-weight: 650; color: var(--text-2); }

.live-chip { cursor: pointer; }
.live-chip:hover { border-color: var(--border-2); }
.dot.stream { background: var(--accent); animation: pulse 2.4s ease-out infinite; }

.feed-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-xs);
}
.feed-row:last-child { border-bottom: 0; }
.feed-row .fr-key { color: var(--muted); font-weight: 600; }
.feed-row .fr-val { font-family: var(--mono); font-weight: 650; }
.feed-note { font-size: var(--fs-2xs); color: var(--muted); line-height: 1.55; }


/* ===========================================================================
   Ticker marquee — a live, auto-scrolling strip of headline indices above
   everything else. Purely decorative context ("the market is open and here
   is its pulse"), so it never blocks interaction and pauses on hover/focus.
   =========================================================================== */
.ticker-marquee {
  overflow: hidden; white-space: nowrap; position: relative;
  background: var(--bg-sunken); border-bottom: 1px solid var(--border);
  height: 34px; display: flex; align-items: center;
}
.ticker-marquee::before, .ticker-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2;
  pointer-events: none;
}
.ticker-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-sunken), transparent); }
.ticker-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg-sunken), transparent); }
.ticker-track {
  display: inline-flex; width: max-content;
  animation: ticker-scroll var(--ticker-secs, 50s) linear infinite;
}
/* The reader sets the pace: a bar they find distracting is one they turn off. */
:root[data-ticker-speed="slow"]   { --ticker-secs: 90s; }
:root[data-ticker-speed="normal"] { --ticker-secs: 50s; }
:root[data-ticker-speed="fast"]   { --ticker-secs: 26s; }
.ticker-marquee:hover .ticker-track,
.ticker-marquee:focus-within .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 0 var(--s-4); font-size: var(--fs-2xs); white-space: nowrap;
  border-right: 1px solid var(--border);
}
.ticker-item .t-name { font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
/* A stock on the bar opens its page; an index is not a page, so only one of
   the two offers itself as something to click. */
.ticker-item.is-stock {
  border: 0; border-right: 1px solid var(--border);
  background: none; font: inherit; font-size: var(--fs-2xs); cursor: pointer;
}
.ticker-item.is-stock:hover .t-name { color: var(--accent); }
.ticker-item .t-price { font-family: var(--mono); color: var(--muted); }
.ticker-item .t-chg { font-family: var(--mono); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
/* Sits above the right-hand fade, and only asks to be noticed on approach -
   the bar is ambient context, and a permanent button on it would not be. */
.ticker-edit {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 var(--s-3); border: 0; border-left: 1px solid var(--border);
  background: var(--bg-sunken); color: var(--muted);
  font: inherit; font-size: var(--fs-3xs); font-weight: 600; cursor: pointer;
  opacity: 0; transition: opacity .16s ease, color .16s ease;
}
.ticker-edit svg { width: 13px; height: 13px; }
.ticker-marquee:hover .ticker-edit,
.ticker-edit:focus-visible { opacity: 1; }
.ticker-edit:hover { color: var(--accent); }
/* A touch screen has no hover, so there it is simply always there. */
@media (hover: none) { .ticker-edit { opacity: 1; } .ticker-edit span { display: none; } }

/* --- the ticker editor ---------------------------------------------------- */
.tk-pick { display: grid; gap: var(--s-2); }
.tk-search { width: 100%; }
.tk-count { font-size: var(--fs-2xs); color: var(--muted); }
.tk-list {
  max-height: 320px; overflow: auto; display: grid; gap: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-2);
}
.tk-row {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: 6px var(--s-2); border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; font-size: var(--fs-2xs);
  text-align: left; cursor: pointer;
}
.tk-row:hover { background: var(--bg-sunken); }
.tk-row .tk-box {
  flex: none; width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--border); display: inline-grid; place-items: center;
  font-size: 10px; line-height: 1; color: var(--bg);
}
.tk-row.on .tk-box { background: var(--accent); border-color: var(--accent); }
.tk-row .tk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-row .tk-group { color: var(--muted); font-size: var(--fs-3xs); }
.tk-row .tk-rank {
  flex: none; min-width: 18px; text-align: right;
  font-family: var(--mono); font-size: var(--fs-3xs); color: var(--accent);
}
.tk-head {
  padding: var(--s-2) var(--s-2) 4px; font-size: var(--fs-3xs); font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
}
.tk-head:not(:first-child) { margin-top: var(--s-2); border-top: 1px solid var(--border); }

/* ===========================================================================
   Home hero — search-first landing above the dashboard widgets. First
   impressions matter more here than any single component: a badge, a bold
   two-tone headline, a search box people actually want to type into, and a
   couple of low-friction ways in (sectors, recent activity, curated screens).
   =========================================================================== */
.home-hero {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card-sheen), var(--surface);
  box-shadow: var(--card-edge), var(--shadow-sm);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--accent-bg); color: var(--accent);
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
.hero-badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.2s infinite; }
.hero-headings { min-width: 0; }
.hero-title {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(19px, 2.2vw, 25px); line-height: 1.2; white-space: nowrap;
}
.hero-title .grad, .hero-title .cursor { display: none; }   /* the marketing flourish is gone */
.hero-sub2 { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }

.hero-search-wrap { position: relative; flex: 1; min-width: 260px; max-width: 460px; margin-left: auto; }
.hero-search {
  width: 100%; padding: 10px 14px 10px 40px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text); outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.hero-search::placeholder { color: var(--dim); }
.hero-search:focus {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.hero-search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--dim); pointer-events: none; width: 16px; height: 16px;
}
.hero-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  overflow: hidden; text-align: left;
}
.hero-search-results .sr-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-3); cursor: pointer; transition: var(--t-fast);
}
.hero-search-results .sr-item:hover { background: var(--surface-3); }
.hero-search-results .sr-sym { font-weight: 700; }
.hero-search-results .sr-name { color: var(--dim); font-size: var(--fs-xs); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sectors move into a single tidy scrolling rail rather than a centred block
   of pills that ate half the viewport. */
.hero-browse-label { display: none; }
.sector-pills {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  margin-bottom: var(--s-5); scrollbar-width: thin;
}
.sector-pill {
  padding: 6px 13px; border-radius: var(--radius-full); white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; transition: var(--t-fast);
}
.sector-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* --- discovery rows below the fold: recents + curated screens ------------- */
.home-section { margin-bottom: var(--s-5); }
.home-section-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.home-section-head .accent-bar { width: 4px; height: 18px; border-radius: 2px; background: var(--accent-2); flex: none; }
.home-section-head h2 { font-family: var(--display); font-size: var(--fs-md); font-weight: 600; flex: 1; }
.home-section-head .count { color: var(--dim); font-weight: 500; font-size: var(--fs-sm); margin-left: 2px; }
.home-section-head .link-btn { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.home-section-head .link-btn:hover { color: var(--text); }


.screen-tabs {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.screen-tab {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--card-sheen), var(--surface);
  box-shadow: var(--card-edge);
  transition: var(--t-fast);
}
.screen-tab:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: var(--card-edge), var(--shadow-accent);
}
.screen-tab .sc-name { font-size: var(--fs-sm); font-weight: 650; color: var(--text); }
.screen-tab .sc-desc { font-size: var(--fs-3xs); color: var(--muted); line-height: 1.45; }
.screen-tab.active { border-color: var(--accent); }
.screen-tab.active .sc-name { color: var(--accent); }
.screen-desc { display: none; }



@media (max-width: 720px) {
  .home-hero { padding: var(--s-6) var(--s-3) var(--s-5); margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-5); }
  .hero-sub2 { font-size: var(--fs-xs); }
  .screen-tabs { gap: var(--s-4); overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
}

/* ===========================================================================
   Mobile bottom navigation — a thumb-reachable tab bar instead of a
   horizontally-scrolling top strip, the pattern people actually expect from
   a finance app on a phone. The desktop top tabs and status bar step aside.
   =========================================================================== */
.tabs-mobile { display: none; }
@media (max-width: 720px) {
  .tabs { display: none; }
  .statusbar { display: none; }

  /* The header has to actually fit. When it does not, a phone browser widens
     the whole layout viewport to accommodate it and silently zooms the page
     out - which is what was pushing the bottom nav off-screen. */
  .topbar { gap: var(--s-2); padding: 0 var(--s-3); }
  .brand-tag, .market-badge, .cmd-trigger { display: none; }
  .brand-name { font-size: var(--fs-md); }
  .live-chip { padding: 5px 9px; }

  /* Two up instead of one long column of screen cards. */
  .screen-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .screen-tab { padding: 10px 11px; }
  .screen-tab .sc-desc { display: none; }

  .home-hero { padding: var(--s-4); gap: var(--s-3); }
  /* The search gets its own line rather than fighting the session badge for
     room and truncating its own placeholder. */
  .hero-search-wrap { flex: 1 0 100%; min-width: 0; max-width: none; margin-left: 0; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .tabs-mobile {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    background: color-mix(in srgb, var(--bg-sunken) 95%, transparent);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabs-mobile button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 2px 8px; color: var(--dim); font-size: 10px; font-weight: 650;
    min-height: 52px;
  }
  .tabs-mobile button svg { width: 21px; height: 21px; }
  .tabs-mobile button.active { color: var(--accent); }
}

/* ===========================================================================
   Small-screen and touch-device polish
   =========================================================================== */
@media (max-width: 860px) {
  /* The symbol column stays put while the rest of a wide table scrolls under
     the thumb - without this, "which row am I even looking at" is a real
     problem on a dense screener table at phone width. */
  thead th:first-child { position: sticky; left: 0; z-index: 4; }
  tbody td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface);
    box-shadow: 2px 0 6px rgba(0,0,0,.12);
  }
  tbody tr:hover td:first-child { background: var(--surface-2); }
}
@media (pointer: coarse) {
  /* Bigger hit targets wherever a finger, not a cursor, is doing the tapping -
     keyed off input type rather than viewport width, so a touch laptop still
     gets this even at a desktop-sized screen. */
  .chip, .cap-opt, .horizon-tab, .sector-pill { min-height: 40px; display: inline-flex; align-items: center; }
  .btn, .icon-btn { min-height: 40px; }
  .icon-btn { width: 40px; height: 40px; }
  .tabs button, .tabs-mobile button { min-height: 48px; }
  input[type=range] { min-height: 32px; }
  thead th, tbody td { padding-top: 10px; padding-bottom: 10px; }
}


/* ===========================================================================
   Market-cap scroller — a continuous floor that names the tier it lands in,
   instead of four buttons that make you know the boundaries yourself.
   =========================================================================== */
/* The controls bar stacks: horizons and Rescan on one line, the size
   scroller on its own, where it has room to be readable. */
.horizon-bar { flex-direction: column; align-items: stretch; gap: var(--s-4); }
.opp-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.cap-wrap { display: flex; width: 100%; margin: 0; }
.cap-scroller { flex: 1; max-width: 560px; }
.cap-readout { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cap-value {
  font-family: var(--mono); font-size: var(--fs-md); font-weight: 700;
  color: var(--text); letter-spacing: -.02em;
}
.cap-tier {
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-bg);
  padding: 2px 8px; border-radius: var(--radius-full);
}
.cap-tier.muted-tier { color: var(--muted); background: var(--surface-3); }

.cap-track {
  position: relative; height: 6px; border-radius: var(--radius-full);
  background: var(--surface-3); border: 1px solid var(--border);
}
.cap-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent-bg), var(--accent));
  pointer-events: none;
}
.cap-range {
  position: absolute; inset: -8px 0; width: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; cursor: pointer;
}
.cap-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  box-shadow: var(--shadow-accent); cursor: grab;
}
.cap-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.cap-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bg);
  background: var(--accent); box-shadow: var(--shadow-accent); cursor: grab;
}
.cap-scale {
  position: relative; height: 14px; margin-top: 8px;
  font-size: 9px; color: var(--dim); font-family: var(--mono);
}
.cap-tick { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.cap-tick:first-child { transform: none; }
.cap-tick:last-child { transform: translateX(-100%); }/* A thin slice has room for its number, not its name - the name stays in
   the tooltip rather than being cut to "FU…". */
@media (max-width: 720px) {
  .cap-wrap { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .cap-scroller { flex: 1 0 100%; }.opp-row .horizon-tabs { display: grid; grid-template-columns: 1fr 1fr; flex: 1 0 100%; }
  .opp-row .btn { margin-left: auto; }
  .cap-tick .u { display: none; }
}

/* ===========================================================================
   IPO centre
   =========================================================================== */
.ipo-stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ipo-stat {
  padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
}
.ipo-stat .is-label { font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ipo-stat .is-value { font-family: var(--display); font-size: var(--fs-xl); font-weight: 650; margin-top: 4px; }
.ipo-stat .is-value.up { color: var(--up); }
.ipo-stat .is-value.down { color: var(--down); }
.ipo-stat .is-sub { font-size: var(--fs-3xs); color: var(--dim); margin-top: 2px; }

.ipo-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.ipo-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  background-image: var(--card-sheen); box-shadow: var(--card-edge);
}
.ipo-card.open { border-color: var(--accent); }
.ipo-head { display: flex; gap: var(--s-3); align-items: flex-start; }
.ipo-name { font-size: var(--fs-md); font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipo-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: var(--fs-3xs); }
.ipo-card .setup-score.low { background: var(--down-bg); color: var(--down); }
.setup-score.none { background: var(--surface-3); color: var(--dim); }

.verdict {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--radius-full); font-size: var(--fs-2xs); font-weight: 700;
  background: var(--surface-3); color: var(--muted); white-space: nowrap;
}
.verdict::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.verdict.up { background: var(--up-bg); color: var(--up); }
.verdict.down { background: var(--down-bg); color: var(--down); }

.ipo-terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.ipo-term { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ipo-term .t-k { font-size: var(--fs-3xs); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.ipo-term .t-v { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 650; overflow-wrap: anywhere; }

.ipo-split .split-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.split-bar i { display: block; height: 100%; }
.split-bar .fresh, .split-legend .dot.fresh { background: var(--up); }
.split-bar .ofs, .split-legend .dot.ofs { background: var(--warn); }
.split-legend { display: flex; gap: var(--s-3); margin-top: 5px; font-size: var(--fs-3xs); color: var(--muted); flex-wrap: wrap; }
.split-legend .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }

.ipo-book { display: flex; flex-direction: column; gap: 5px; }
.book-title { font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.book-title .dim { text-transform: none; letter-spacing: 0; font-weight: 500; }
.book-row { display: grid; grid-template-columns: 86px 1fr 56px; gap: var(--s-2); align-items: center; font-size: var(--fs-2xs); }
.book-row.total { font-weight: 700; }
.book-row .b-k { color: var(--text-2); }
.book-row .b-v { text-align: right; font-weight: 700; }
.b-track { position: relative; height: 8px; border-radius: 4px; background: var(--surface-3); }
.b-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--muted); }
.b-track i.full { background: var(--accent); }

/* The book, quota by quota. It was five bars on a log scale, which answered
   "is it going well" and nothing else; the exchange files the parts of each
   quota too, and those are the half of it people read a book for. */
.book-title { display: flex; align-items: baseline; gap: 6px; }
.book-title .spacer { flex: 1; }
.bk-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-full); overflow: hidden; }
.bk-toggle button { padding: 3px 10px; font-size: var(--fs-3xs); font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--muted); border: 0; white-space: nowrap; }
.bk-toggle button.on { background: var(--surface-3); color: var(--text); }
.bk-table { display: flex; flex-direction: column; margin-top: 2px; }
.bk-row { display: grid; grid-template-columns: minmax(84px, 1.2fr) 1fr 1fr 86px;
  gap: var(--s-2); align-items: baseline; font-size: var(--fs-2xs);
  padding: 5px 0; border-bottom: 1px solid var(--border); }
.bk-row.two { grid-template-columns: minmax(84px, 1fr) 86px; }
.bk-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.bk-head { font-size: var(--fs-3xs); color: var(--dim); text-transform: uppercase;
  letter-spacing: .05em; border-bottom-color: var(--border-2); }
.bk-row .bk-q { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-row .bk-x { font-weight: 700; color: var(--text); }
/* A quota's parts, stepped in under it rather than spelled out again. */
.bk-row.sub { border-bottom-color: transparent; }
.bk-row.sub .bk-q { color: var(--muted); padding-left: 2px; }
.bk-row.sub .bk-x, .bk-row.sub .num { font-weight: 400; color: var(--muted); }
.bk-tick { font-style: normal; color: var(--border-2); margin-right: 5px; }
.bk-row.total { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--border-2); }
.bk-note { margin-top: 6px; }
@media (max-width: 720px) {
  .bk-row { grid-template-columns: minmax(64px, 1fr) 1fr 1fr 62px; gap: 4px; }
}
.b-track .b-mark { position: absolute; top: -2px; bottom: -2px; width: 1.5px; background: var(--text-2); opacity: .5; }

.ipo-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.ipo-tile { padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.ipo-tile .it-k { font-size: var(--fs-3xs); color: var(--dim); font-weight: 650; }
.ipo-tile .it-v { font-family: var(--mono); font-size: var(--fs-md); font-weight: 700; margin-top: 2px; }
.ipo-tile .it-s { font-size: var(--fs-3xs); color: var(--muted); margin-top: 1px; }

.ipo-detail { display: flex; flex-direction: column; gap: var(--s-3); border-top: 1px dashed var(--border-2); padding-top: var(--s-3); }
.fin-table { font-size: var(--fs-xs); }
.fin-table th, .fin-table td { padding: 6px 8px; white-space: nowrap; }
.ipo-facts { display: grid; gap: var(--s-2) var(--s-3); grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }

.pick-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pick {
  padding: var(--s-3); border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); transition: border-color var(--t-fast);
}
.pick:hover { border-color: var(--accent); }
.pick-top { display: flex; justify-content: space-between; align-items: center; }
.pick-sym { font-weight: 750; }
.pick-price { font-family: var(--mono); font-size: var(--fs-md); font-weight: 700; margin: 6px 0 8px; }
.pick-price .num { font-size: var(--fs-3xs); font-weight: 600; }

.ipo-table td, .ipo-table th { white-space: nowrap; }
.ipo-row { cursor: pointer; }
.ipo-row.open td { background: var(--surface-2); }
.ipo-detail-row > td { background: var(--surface-2); padding: var(--s-4) !important; white-space: normal; }
.ipo-row-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
/* Between a phone and a wide screen, two columns: three would be 220px each. */
@media (max-width: 1240px) {
  .ipo-row-detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
/* An open issue in two columns that fill themselves. Fixed columns leave
   whichever side ran out first standing empty, and which side that is depends
   on the company - a long prospectus extract against a short premium history,
   or the reverse - so no arrangement of blocks fixes it. Flowing columns
   balance their own height, and each block stays whole. */
.ipo-panel-cols {
  columns: 2; column-gap: var(--s-4); margin-bottom: var(--s-3);
}
.ipo-panel-cols > * {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin-bottom: var(--s-3); display: block;
}
@media (max-width: 900px) { .ipo-panel-cols { columns: 1; } }
.ipo-row-detail > div { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }

.ipo-chart { width: 100%; height: 140px; display: block; }
.ipo-chart .line { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.ipo-chart .line.up { stroke: var(--up); }
.ipo-chart .line.down { stroke: var(--down); }
.ipo-chart .area.up { fill: var(--up); opacity: .10; }
.ipo-chart .area.down { fill: var(--down); opacity: .10; }
.ipo-chart .guide { stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ipo-chart .guide.issue { stroke: var(--muted); }
.ipo-chart .guide.good { stroke: var(--accent); }
.chart-legend { display: flex; gap: var(--s-3); font-size: var(--fs-3xs); color: var(--muted); margin-top: 6px; }
.chart-legend .dash { display: inline-block; width: 14px; height: 0; border-top: 2px dashed; margin-right: 5px; vertical-align: middle; }
.chart-legend .dash.issue { border-color: var(--muted); }
.chart-legend .dash.good { border-color: var(--accent); }
.ipo-chart .guide.fair { stroke: #8fa9ff; }
.chart-legend .dash.fair { border-color: #8fa9ff; }
[data-theme="light"] .ipo-chart .guide.fair, [data-theme="light"] .chart-legend .dash.fair { stroke: #33499c; border-color: #33499c; }

/* window summary above the listings table */
.win-stats {
  display: grid; gap: var(--s-2); margin-bottom: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.win-stat { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px;
  border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.win-stat .ws-k { font-size: var(--fs-3xs); color: var(--dim); font-weight: 650; }
.win-stat .ws-v { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 700; }
.win-stat .ws-v.up { color: var(--up); }
.win-stat .ws-v.down { color: var(--down); }
.pick-fair { font-size: var(--fs-3xs); color: var(--muted); margin-bottom: 8px; }

.ipo-block { display: flex; flex-direction: column; gap: 6px;
  padding-bottom: var(--s-2); border-bottom: 1px dashed var(--border); }
.ipo-block:last-child { border-bottom: 0; }
.ipo-call { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-xs); }

.fair-bar .fb-track { position: relative; height: 10px; border-radius: 5px; background: var(--surface-3); margin: 6px 0; }
.fb-range { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: rgba(109,152,255,.35); }
.fb-fair { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #8fa9ff; }
.fb-price { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--text); border: 2px solid var(--surface); }
.fb-price.undervalued { background: var(--up); }
.fb-price.overvalued { background: var(--down); }
.fb-legend { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-3xs); color: var(--muted); flex-wrap: wrap; }
.fb-legend .up { color: var(--up); }
.fb-legend .down { color: var(--down); }

.lock-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-2xs); }
.lock-list li { display: grid; grid-template-columns: 54px 1fr auto; gap: var(--s-2); align-items: baseline; }
.lock-list .l-date { font-family: var(--mono); font-weight: 700; }
.lock-list .l-when { color: var(--dim); font-size: var(--fs-3xs); }
.lock-list li.passed { color: var(--dim); }
.lock-list li.soon .l-date, .lock-list li.soon .l-when { color: var(--warn); }

@media (max-width: 720px) {
  .ipo-grid { grid-template-columns: 1fr; }
  .ipo-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipo-row-detail { grid-template-columns: 1fr; }
  /* On a phone the table keeps what answers "how is it doing and should I
     care": the name, the price, the move since issue and the assessment. */
  .ipo-table th:nth-child(2), .ipo-table td:nth-child(2),
  .ipo-table th:nth-child(3), .ipo-table td:nth-child(3),
  .ipo-table th:nth-child(4), .ipo-table td:nth-child(4),
  .ipo-table th:nth-child(5), .ipo-table td:nth-child(5),
  .ipo-table th:nth-child(7), .ipo-table td:nth-child(7),
  .ipo-table th:nth-child(8), .ipo-table td:nth-child(8),
  .ipo-table th:nth-child(9), .ipo-table td:nth-child(9),
  .ipo-table th:nth-child(10), .ipo-table td:nth-child(10),
  .ipo-table th:nth-child(12), .ipo-table td:nth-child(12) { display: none; }
  .win-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipo-table .ipo-detail-row td { display: table-cell; }
  .ipo-table td, .ipo-table th { white-space: normal; }
  .ipo-table .verdict { white-space: normal; font-size: var(--fs-3xs); padding: 4px 8px; }
  #ipo-recent .card-head, #ipo-issues .card-head { flex-wrap: wrap; }
}

/* Opportunities re-ranking: old cards stay visible, dimmed, under a thin bar */
#opp-results { position: relative; transition: opacity .15s var(--ease); }
#opp-results.refreshing { opacity: .55; pointer-events: none; }
#opp-results.refreshing::before {
  content: ''; position: absolute; top: -8px; left: 0; height: 2px; width: 35%;
  border-radius: 2px; background: var(--accent); z-index: 2;
  animation: opp-progress 1s var(--ease) infinite;
}
@keyframes opp-progress { from { left: 0; } to { left: 65%; } }
@media (prefers-reduced-motion: reduce) { #opp-results.refreshing::before { animation: none; width: 100%; } }

/* IPO sub-tabs */
.ipo-subtabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: var(--s-4);
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.ipo-subtabs::-webkit-scrollbar { display: none; }
.ipo-subtab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-sm); white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 650; color: var(--muted); transition: var(--t-fast);
}
.ipo-subtab:hover { color: var(--text); background: var(--surface-2); }
.ipo-subtab.on { background: var(--accent); color: var(--accent-fg); }
.ipo-subtab .st-n {
  font-family: var(--mono); font-size: var(--fs-3xs); padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--surface-3); color: var(--muted);
}
.ipo-subtab.on .st-n { background: rgba(0,0,0,.14); color: var(--accent-fg); }
.ipo-stat.link { cursor: pointer; transition: border-color var(--t-fast); }
.ipo-stat.link:hover { border-color: var(--accent); }

/* ===========================================================================
   Fundamentals: company finder
   =========================================================================== */
.fund-finder {
  max-width: 760px; margin: var(--s-6, 32px) auto var(--s-5, 24px); text-align: center;
  transition: margin var(--t-fast);
}
.fund-finder .ff-title { font-family: var(--display); font-size: var(--fs-2xl, 28px); font-weight: 700; letter-spacing: -.02em; }
.fund-finder .ff-sub { color: var(--muted); font-size: var(--fs-sm); margin: 6px auto var(--s-4); max-width: 560px; line-height: 1.5; }
.fund-finder.compact { max-width: none; margin: 0 0 var(--s-4); text-align: left; }
.fund-finder.compact .ff-title, .fund-finder.compact .ff-sub, .fund-finder.compact .ff-chips { display: none; }

.ff-box { position: relative; }
.ff-icon { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--dim); pointer-events: none; }
#fund-search {
  width: 100%; padding: 16px 48px 16px 48px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border-2); color: var(--text);
  font-size: var(--fs-md, 16px); outline: none; box-shadow: var(--card-edge);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
#fund-search::-webkit-search-cancel-button { display: none; }
#fund-search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,200,87,.14); }
.fund-finder.compact #fund-search { padding-top: 12px; padding-bottom: 12px; font-size: var(--fs-sm); border-radius: var(--radius); }
.ff-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; color: var(--dim);
}
.ff-clear:hover { background: var(--surface-2); color: var(--text); }

.ff-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; text-align: left;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); overflow: hidden auto; max-height: 420px;
}
.ff-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center;
  padding: 11px 16px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.ff-row:last-child { border-bottom: 0; }
.ff-row.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.ff-sym { font-family: var(--mono); font-weight: 700; font-size: var(--fs-sm); }
.ff-name { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-meta { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-3xs); white-space: nowrap; }
.ff-row mark { background: none; color: var(--accent); font-weight: 750; }
.ff-none { padding: 14px 16px; font-size: var(--fs-sm); }

.ff-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: var(--s-4); align-items: center; }
.ff-chips-label { font-size: var(--fs-3xs); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-right: 4px; }
.ff-chip {
  display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: var(--radius-full);
  background: var(--surface); border: 1px solid var(--border); font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 650;
}
.ff-chip:hover { border-color: var(--accent); }

@media (max-width: 720px) {
  .fund-finder { margin-top: var(--s-4); }
  .ff-row { grid-template-columns: 1fr auto; }
  .ff-row .ff-name { grid-column: 1 / -1; order: 3; font-size: var(--fs-2xs); }
}
@media (max-width: 720px) {
  .ipo-subtab { padding: 9px 6px; gap: 5px; font-size: var(--fs-xs); }
  .ipo-subtab .st-n { padding: 1px 5px; }
}

/* ===========================================================================
   Market Today layout: rows of equal-height cards, no dead space
   =========================================================================== */
#brief-grid { align-items: stretch; }
#brief-grid > .card { display: flex; flex-direction: column; }
#brief-grid > .card > .card-body { flex: 1; }
.card-note { font-size: var(--fs-3xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.mood { display: flex; flex-direction: column; gap: var(--s-3); height: 100%; }
.mood-top { display: flex; gap: var(--s-5); align-items: center; }
.mood .ring { width: 128px; height: 128px; }
.mood .ring-score { font-size: var(--fs-2xl); }
.mood-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mood-index { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mood-index .mi-label { font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mood-index .mi-price { font-family: var(--display); font-size: var(--fs-xl); font-weight: 700; }
.mood .breadth-bar { margin: 0; }
.breadth-legend { display: flex; justify-content: space-between; font-size: var(--fs-3xs); }
.mood-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 1400px) { .mood-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1060px) and (min-width: 721px) { .mood-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .mood .ring { width: 104px; height: 104px; }
  .mood .ring svg { width: 104px; height: 104px; }
  .mood .ring-score { font-size: var(--fs-xl); }
  .mood-top { gap: var(--s-4); }
}
.mood-stat { display: flex; justify-content: space-between; gap: 6px; padding: 6px 9px;
  border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-2xs); }
.mood-stat .ms-k { color: var(--muted); }
.mood-stat .ms-v { font-family: var(--mono); font-weight: 700; }
.mood-note { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--muted); }

/* Sector tiles: denser, so the whole heatmap sits beside the mood card. */
.mover-list { display: flex; flex-direction: column; }
.mover .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mover .sym { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mover { grid-template-columns: minmax(0, 1fr) 58px auto; padding: 7px 10px; }

@media (max-width: 1240px) {
  /* Three across still fits a laptop; halving them left a ragged third card. */
  #brief-grid > .col-4 { grid-column: span 4; }
  #brief-grid > .col-5 { grid-column: span 5; }
  #brief-grid > .col-7 { grid-column: span 7; }
}
@media (max-width: 1060px) {
  #brief-grid > .col-5, #brief-grid > .col-7 { grid-column: span 12; }
}
.mood .ring-label { font-size: 9px; letter-spacing: .06em; }
@media (max-width: 720px) { .mood .ring-label { font-size: 8px; letter-spacing: .04em; } }

/* Grey-market premium strip on IPO cards */
.gmp-strip {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: var(--radius-sm); cursor: help;
  background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-xs);
}
.gmp-strip.up { background: var(--up-bg); border-color: transparent; }
.gmp-strip.down { background: var(--down-bg); border-color: transparent; }
.gmp-k { font-size: var(--fs-3xs); font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.gmp-v { font-size: var(--fs-md); font-weight: 750; }
.gmp-strip.up .gmp-v { color: var(--up); }
.gmp-strip.down .gmp-v { color: var(--down); }
.gmp-est { color: var(--text-2); }
.gmp-tag { margin-left: auto; font-size: var(--fs-3xs); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.gmp-strip.none { font-size: var(--fs-2xs); }
.gmp-note { margin: var(--s-3) 0 0; font-size: var(--fs-2xs); color: var(--muted); line-height: 1.55; }

/* Fundamentals landing: discover lists */
.ff-discover {
  display: grid; gap: var(--s-4); grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1320px; margin: 0 auto var(--s-6);
}
@media (max-width: 1240px) { .ff-discover { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ff-discover { grid-template-columns: 1fr; } }
.ff-list .card-head { gap: 8px; }
.ff-list-icon {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent-bg); color: var(--accent); font-size: 12px; font-weight: 800;
}
.ff-pick {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%; padding: 8px 6px; border-radius: var(--radius-sm); text-align: left;
  border-bottom: 1px solid var(--border); transition: background var(--t-fast);
}
.ff-pick:last-child { border-bottom: 0; }
.ff-pick:hover { background: var(--surface-2); }
.fp-text { display: flex; flex-direction: column; min-width: 0; }
.fp-sym { font-weight: 700; font-size: var(--fs-sm); }
.fp-name { font-size: var(--fs-3xs); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-metric { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.grade-mini {
  display: grid; place-items: center; height: 26px; border-radius: 7px;
  font-family: var(--display); font-weight: 800; font-size: var(--fs-xs);
  background: var(--surface-3); color: var(--muted);
}
.grade-mini.g-a { background: var(--up-bg); color: var(--up); }
.grade-mini.g-b { background: rgba(109,152,255,.16); color: #8fa9ff; }
.grade-mini.g-c { background: var(--warn-bg); color: var(--warn); }
.grade-mini.g-d { background: var(--down-bg); color: var(--down); }
[data-theme="light"] .grade-mini.g-b { color: #33499c; }

/* discover cards: title on one line, its note underneath */
.ff-list .card-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: center; }
.ff-list .card-head .spacer { display: none; }
.ff-list .card-head h3 { white-space: nowrap; }
.ff-list .card-head .ff-list-icon { grid-row: 1 / span 2; }
.ff-list .card-head .card-note { grid-column: 2; white-space: normal; }
.gmp-extra { flex-basis: 100%; font-size: var(--fs-3xs); color: var(--muted); }

/* minimum reward : risk */
.cap-wrap { gap: var(--s-6); flex-wrap: wrap; align-items: flex-end; }
.rr-control { display: flex; flex-direction: column; gap: 8px; }
.rr-control.off { opacity: .5; }
.rr-head { display: flex; align-items: baseline; gap: 10px; }
.rr-hint { font-size: var(--fs-3xs); color: var(--dim); }
.rr-steps { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-full);
  background: var(--surface-2); border: 1px solid var(--border); }
.rr-step { padding: 6px 13px; border-radius: var(--radius-full); font-family: var(--mono);
  font-size: var(--fs-2xs); font-weight: 700; color: var(--muted); transition: var(--t-fast); }
.rr-step:hover:not(:disabled) { color: var(--text); }
.rr-step.on { background: var(--accent); color: var(--accent-fg); }
.rr-step:disabled { cursor: not-allowed; }

/* ===========================================================================
   Company page (Fundamentals)
   =========================================================================== */
.co-page { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-4); }
.co-head .card-body { display: flex; flex-direction: column; gap: var(--s-4); }
.co-title { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.co-title h2 { margin: 0; font-family: var(--display); font-size: var(--fs-2xl); letter-spacing: -.02em; }
.co-sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: var(--fs-xs); }
/* The price is what the page is about, so it is sized like it. Everything
   else in the header is a label on it. */
.co-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.co-price .p {
  font-family: var(--display); font-size: var(--fs-3xl); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05;
}
/* The key numbers, grouped by what each is for. Twelve tiles in a ragged grid,
   every one carrying its own sentence, answered "what is this" twelve times
   and "is it a lot" never. The sentences are on the labels now; the space they
   were taking goes to the two comparisons this page can make truthfully. */
.co-ratios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-3); align-items: start;
}
.co-group {
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 15px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--card-edge);
}
.co-group-t {
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.co-r { display: flex; flex-direction: column; gap: 5px; }
.co-r + .co-r { padding-top: 8px; border-top: 1px dashed var(--border); }
/* Label above, figure below. Side by side with the figure flushed right, a
   column of ratios reads as a price list; stacked, each one reads as a fact
   with a name on it, and the figure gets to be the size it deserves. */
.co-r-top { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.co-r-k { font-size: var(--fs-xs); color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; }
/* The explanation is a tap away rather than always on the page - and a tap,
   not a hover, because half of these screens have no pointer to hover with. */
.co-r-q {
  flex-shrink: 0; font-size: 9px; font-weight: 700; line-height: 1;
  width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--dim); background: none; border: 1px solid var(--border-2);
  border-radius: 50%; padding: 0; cursor: pointer;
}
.co-r-q:hover { color: var(--text-2); border-color: var(--muted); }
.co-r-q.on { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.co-r-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Where a scale bar would go on a ratio, a key number puts its change against
   a year earlier: the same slot, the same job - context for the figure above. */
.co-r-delta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: var(--fs-2xs); }
/* The reader's own ratios, and the way in to writing one. The button sat in a
   group in the middle of the grid, which made one cell of four look unlike the
   other three. It sits beside the grid now. */
.co-ratios-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-2);
}
.co-ratios-t {
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}
.co-group-mine { border-style: dashed; }
.co-r-mine { display: flex; flex-direction: column; gap: 5px; }
.co-add-ratio {
  align-self: flex-start; margin-top: 2px; font-family: var(--sans);
  font-size: var(--fs-2xs); font-weight: 650; color: var(--accent);
  background: var(--accent-bg); border: 1px solid var(--accent-border, rgba(255,200,87,.3));
  border-radius: var(--radius-full); padding: 6px 12px; cursor: pointer; min-height: 30px;
}
.co-add-ratio:hover { background: rgba(255,200,87,.2); }
/* The dialog is as tall as the screen allows and no taller: a fixed head, a
   scrolling catalogue, and a foot that keeps the count and the way out in
   reach. It used to grow with its contents and run off the bottom of a laptop
   screen, taking the close button with it. */
/* One size, whatever is in it. A height that followed the contents meant the
   panel changed shape every time somebody looked at a different group, and on
   the short ones the footer - with the count and the way out - climbed up the
   screen to meet them. Wide, because the rows carry a name, a number and what
   kind of figure it is, and a narrow column made three columns of that. */
/* Compound, because .auth-card sets a 420px width four hundred lines further
   down the file and would otherwise win on being later at equal weight. */
.auth-card.rx-card {
  width: min(880px, calc(100vw - 32px)); max-width: none;
  display: flex; flex-direction: column;
  height: min(720px, calc(100vh - 40px)); max-height: calc(100vh - 40px);
  overflow: hidden; padding-bottom: 0;
}
.rx-head { flex: none; display: flex; flex-direction: column; gap: var(--s-2); }
.rx-head .auth-sub { margin: 0; }
.rx-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s-2); margin-top: var(--s-2);
}
.rx-foot {
  flex: none; background: var(--surface); border-top: 1px solid var(--border);
  margin: 0 -26px; padding: var(--s-3) 26px;
  display: flex; align-items: center; gap: var(--s-3);
}
.rx-foot-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rx-foot .rx-chosen-wrap { margin-top: 0; padding-top: 0; border-top: 0; }
.rx-foot-act { display: flex; justify-content: flex-end; }
.rx-foot-act .btn { min-width: 150px; }
/* The formula box, under the footer: wanted rarely, and never while the
   reader is scanning the list, so it does not take height from it. */
.rx-maker { flex: none; margin: 0 -26px; padding: 0 26px 18px; }
/* The list itself reuses the picker rows the top-bar editor introduced; a
   ratio row carries one thing more, which is what it comes to here. */
.rx-list { display: grid; gap: 2px; }
.rx-val {
  flex: none; min-width: 76px; text-align: right;
  font-size: var(--fs-2xs); font-weight: 700; color: var(--accent);
}
.tk-row.rx-empty .rx-val { color: var(--dim); font-weight: 400; }
.tk-row.rx-empty .tk-name { opacity: .6; }
.rx-none { padding: var(--s-4); font-size: var(--fs-2xs); text-align: center; }
.co-r-none { font-size: var(--fs-2xs); padding: var(--s-2) 0; }
@media (max-width: 640px) {
  .auth-card.rx-card { height: calc(100vh - 24px); width: calc(100vw - 16px); }
  .rx-val { min-width: 62px; }
  .tk-row .tk-group { display: none; }
}
/* What is on your pages right now, before the catalogue you pick from. */
.rx-chosen-wrap {
  margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border);
}
.rx-chosen-t {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.rx-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-count { font-size: var(--fs-3xs); white-space: nowrap; letter-spacing: 0; text-transform: none; font-weight: 500; }
.rx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-2xs); font-weight: 600; padding: 5px 6px 5px 11px;
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid rgba(255,200,87,.3); border-radius: var(--radius-full);
}
.rx-x {
  background: none; border: 0; color: inherit; cursor: pointer; opacity: .7;
  font-size: 11px; line-height: 1; padding: 3px;
}
.rx-x:hover { opacity: 1; }
.rx-pickers { display: flex; flex-direction: column; gap: var(--s-2); }
.rx-search { width: 100%; }
.rx-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.rx-tab {
  flex: none; font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 650;
  color: var(--muted); background: none; border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 6px 12px; cursor: pointer; min-height: 30px;
}
.rx-tab.on { color: var(--accent); background: var(--accent-bg); border-color: rgba(255,200,87,.3); }
.rx-body { min-height: 0; }
.rx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 2px 12px; }
/* The figure sits on the name's line, hard right, so the column of numbers
   reads down the list and the sentence underneath is not pushed around. */
.rx-pick-k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rx-pick-v { font-size: var(--fs-2xs); font-weight: 700; color: var(--accent); white-space: nowrap; }
.rx-pick.rx-empty .rx-pick-k, .rx-pick.rx-empty .rx-pick-h { opacity: .55; }
.rx-pick.rx-empty .rx-pick-v { color: var(--dim); }
/* Each option carries the sentence that says what it is. A label alone -
   "1 week" - told nobody anything, and a tooltip is nothing on a phone. */
.rx-pick {
  display: flex; align-items: flex-start; gap: 9px; padding: 8px;
  border-radius: var(--radius-sm); cursor: pointer; min-height: 40px;
}
.rx-pick:hover { background: var(--surface-2); }
.rx-box { accent-color: var(--accent); width: 15px; height: 15px; flex: none; cursor: pointer; margin-top: 1px; }
.rx-pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rx-pick-k { font-size: var(--fs-xs); color: var(--text-2); }
.rx-pick.on .rx-pick-k { color: var(--accent); font-weight: 650; }
.rx-pick-h { font-size: var(--fs-3xs); color: var(--dim); line-height: 1.45; }
.rx-own {
  display: flex; align-items: center; gap: var(--s-2); padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
/* The way out, for the ratio the catalogue does not have. */
.rx-reveal {
  align-self: flex-start; margin-top: var(--s-2); font-family: var(--sans);
  font-size: var(--fs-2xs); font-weight: 650; color: var(--accent);
  background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left;
}
.rx-reveal:hover { text-decoration: underline; }
.rx-hint { font-size: var(--fs-3xs); line-height: 1.5; }
.rx-r-text { flex: 1; min-width: 0; }
.rx-r-name { font-size: var(--fs-sm); font-weight: 650; }
.rx-r-f { font-size: var(--fs-3xs); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-mini {
  flex: none; font-family: var(--sans); font-size: var(--fs-3xs); font-weight: 650;
  color: var(--muted); background: none; border: 1px solid var(--border-2);
  border-radius: var(--radius-full); padding: 5px 10px; cursor: pointer; min-height: 28px;
}
.rx-mini:hover { color: var(--text); border-color: var(--muted); }
.rx-form { display: flex; flex-direction: column; gap: var(--s-2); }
.rx-fields { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.rx-l { display: flex; flex-direction: column; gap: 4px; flex: 0 0 150px; }
.rx-l.rx-grow { flex: 1 1 220px; }
.rx-l > span { font-size: var(--fs-3xs); color: var(--dim); }
.rx-formula { font-family: var(--mono); font-size: var(--fs-xs); }
.rx-note { font-size: var(--fs-2xs); line-height: 1.5; }
.rx-note.ok { color: var(--up); }
.rx-note.bad { color: var(--down); }
.rx-actions { display: flex; gap: var(--s-2); }
@media (max-width: 560px) { .rx-l, .rx-l.rx-grow { flex: 1 1 100%; } }

/* Where a company's shares trade, and a way to each exchange's own page.
   Two links means dual-listed, one means it is only there. */
.co-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.co-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-2xs); font-weight: 650; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.co-link:hover { color: var(--accent); }
.co-link svg { width: 12px; height: 12px; flex: none; }

/* What the company has told the exchange. */
.bf-list { display: flex; flex-direction: column; }
.bf-row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-3);
  padding: 8px 0; border-top: 1px solid var(--border); align-items: baseline;
}
.bf-row:first-child { border-top: 0; }
.bf-day { color: var(--muted); font-size: var(--fs-2xs); }
.bf-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
.bf-cat {
  flex: none; padding: 1px 7px; border-radius: var(--radius-full);
  font-size: var(--fs-3xs); font-weight: 700; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
}
.bf-cat.good { color: var(--up); background: var(--up-bg); border-color: var(--up-border); }
.bf-cat.warn { color: var(--warn); background: var(--warn-bg); }
.bf-cat.accent { color: var(--accent); background: var(--accent-bg); }
.bf-title { font-size: var(--fs-xs); color: var(--text-2); text-decoration: none; }
a.bf-title:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 720px) {
  .bf-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 7px 0; }
}

/* Fifteen years of sectors: a wide table that scrolls sideways with its
   first column pinned, so a row stays identified at column seventeen. */
.sh-table { font-size: var(--fs-3xs); }
.sh-table th, .sh-table td { padding: 5px 7px; white-space: nowrap; }
.sh-table td.name, .sh-table th.row-head {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  text-align: left; font-weight: 650; min-width: 118px;
}
.sh-table thead th { position: sticky; top: 0; z-index: 2; }
.sh-table thead th.row-head { z-index: 3; }
.sh-year {
  font-size: var(--fs-2xs); padding: 5px 8px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}

/* Sector performance: one row a sector, its bar growing from a shared centre
   so gains and falls are read against each other rather than each against
   its own maximum. */
.secp-rows { display: flex; flex-direction: column; }
.secp-row {
  display: grid; align-items: center; gap: var(--s-3);
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 62px 64px 44px;
  padding: 6px 0; border-top: 1px solid var(--border);
}
.secp-row:first-child { border-top: 0; }
.secp-name { font-size: var(--fs-xs); font-weight: 600; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.secp-bars { display: flex; align-items: center; min-width: 0; }
.secp-half { flex: 1 1 50%; display: flex; min-width: 0; height: 12px; align-items: center; }
.secp-half.left { justify-content: flex-end; }
.secp-bar { display: block; height: 100%; border-radius: 2px; }
.secp-bar.up { background: var(--up); border-radius: 0 3px 3px 0; }
.secp-bar.down { background: var(--down); border-radius: 3px 0 0 3px; }
/* The two halves meet at the centre, and the join is the zero line. */
.secp-half.left { border-right: 1px solid var(--border-2); padding-right: 1px; }
.secp-val { text-align: right; font-size: var(--fs-xs); font-weight: 700; }
.secp-breadth { text-align: right; font-size: var(--fs-3xs); }
.secp-n { text-align: right; font-size: var(--fs-3xs); }
@media (max-width: 720px) {
  .secp-row { grid-template-columns: minmax(80px, 1fr) 56px 54px; gap: 8px; }
  .secp-bars, .secp-n { display: none; }
}

/* Metric suggestions under a formula box: one name a line, the one that
   Enter would take filled rather than tinted - at a glance, from across a
   desk, which is how a list like this is read. */
.sug-box {
  position: fixed; z-index: 320; max-height: 380px; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--radius); box-shadow: 0 18px 44px -12px rgba(0,0,0,.65);
  padding: 5px; display: flex; flex-direction: column;
}
.sug-row {
  display: flex; align-items: center; width: 100%;
  padding: 9px 12px; background: none; border: 0; border-radius: var(--radius-sm);
  text-align: left; cursor: pointer; color: var(--text); font-size: var(--fs-xs);
  line-height: 1.25;
}
.sug-row:hover { background: var(--surface-3); }
.sug-row.on { background: var(--accent); color: var(--accent-fg); }
.sug-l { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The floating answer to a question mark. Above its button, because below is
   where the reader's finger and the next row already are. */
.pop-bubble {
  position: fixed; z-index: 300;
  font-size: var(--fs-2xs); color: var(--text); line-height: 1.5;
  padding: 9px 12px; border-radius: var(--radius);
  background: var(--surface-3); border: 1px solid var(--border-2);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.55);
}
.pop-arrow {
  position: absolute; bottom: -5px; width: 9px; height: 9px;
  margin-left: -4.5px; transform: rotate(45deg);
  background: var(--surface-3);
  border-right: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
}
.pop-bubble.below .pop-arrow {
  bottom: auto; top: -5px;
  border: 0; border-left: 1px solid var(--border-2); border-top: 1px solid var(--border-2);
}
.co-r-v { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }
.co-bar { display: flex; flex-direction: column; gap: 4px; }
.co-bar-track { position: relative; height: 4px; border-radius: var(--radius-full); background: var(--surface-3); }
.co-bar-track.good { background: linear-gradient(90deg, var(--up) 0%, var(--surface-3) 70%); opacity: .55; }
.co-bar-track.warn { background: linear-gradient(90deg, var(--surface-3) 30%, var(--down) 100%); opacity: .55; }
.co-bar-mark {
  position: absolute; top: -4px; width: 2px; height: 12px; border-radius: 2px;
  background: var(--text); transform: translateX(-50%);
}
.co-bar-ends { display: flex; justify-content: space-between; gap: 6px; font-size: var(--fs-3xs); color: var(--dim); }
.co-bar-mid { color: var(--muted); }
/* Inside an IPO panel the same groups sit on the panel's own surface, so they
   do not read as cards floating on a card. */
.ipo-ratios { margin-bottom: var(--s-3); }
.ipo-ratios .co-group { background: var(--surface); }
.co-ratio {
  display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); font-size: var(--fs-sm);
}
.co-ratio .k { color: var(--muted); }
.co-ratio .v { font-weight: 700; }
/* The section bar follows you down the page. A company page is twelve
   sections long; having to scroll back to the top to reach the third one is
   the whole reason the bar exists. */
.co-nav {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  /* Under the search bar, which is itself sticky at --pinned-h. Sharing
     that offset put the two in the same place and the finder, with the
     higher z-index, simply covered this one. --co-nav-top is measured from
     the finder at runtime because its height depends on its own state. */
  position: sticky; top: var(--co-nav-top, var(--pinned-h)); z-index: 20;
  margin: 0 0 var(--s-4); padding: 9px var(--s-4);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.co-nav::-webkit-scrollbar { display: none; }
.co-nav button {
  padding: 7px 12px; border-radius: var(--radius-full); white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 650; color: var(--muted); border: 1px solid var(--border);
}
.co-nav button:hover { color: var(--accent); border-color: var(--accent); }
/* Where you are, not only where you can go. */
.co-nav button.on { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.co-section { scroll-margin-top: calc(var(--co-nav-top, var(--pinned-h)) + 72px); }
/* Each section is announced by a rule in the accent, the way a printed page
   announces a chapter. It costs four pixels and does more to separate one
   block from the next than a border around the whole card does. */
.co-section { margin-bottom: var(--s-5); }
.co-section > .card-head > h3 {
  position: relative; padding-left: 13px; font-size: var(--fs-xl);
}
.co-section > .card-head > h3::before {
  content: ''; position: absolute; left: 0; top: .16em; bottom: .16em;
  width: 4px; border-radius: 2px; background: var(--accent);
}
/* Room to breathe. The sections were packed tight enough that the eye had to
   find the headings to know where one ended. */
.co-section > .card-body { padding-top: var(--s-4); padding-bottom: var(--s-5); }

/* Neighbouring sections alternate tone, so each one reads as its own block.
   Redefining the surface tokens re-tints everything inside, sticky table
   columns included. */
.co-section.tone-alt, #fund-grid > .card {
  --surface: #171b24; --surface-2: #1d222c; --surface-3: #252b36;
  border-color: var(--border-2);
}
[data-theme="light"] .co-section.tone-alt, [data-theme="light"] #fund-grid > .card {
  --surface: #f1f0ec; --surface-2: #e9e8e3; --surface-3: #e0dfd9;
}

/* After a search the finder shrinks to one bar; it stays in view and still
   looks like the place to type. */
.fund-finder.compact { position: sticky; top: calc(var(--topbar-h) + 44px); z-index: 30;
  padding: 8px 0; margin: -8px 0 var(--s-3); background: var(--bg); }
.fund-finder.compact #fund-search {
  background: linear-gradient(100deg, rgba(255,200,87,.10), rgba(255,200,87,.02) 60%), var(--surface);
  border: 1px solid rgba(255,200,87,.55); box-shadow: 0 0 0 3px rgba(255,200,87,.07), var(--shadow-sm);
  font-weight: 500;
}
.fund-finder.compact #fund-search::placeholder { color: var(--text-2); opacity: 1; }
.fund-finder.compact .ff-icon { color: var(--accent); }
[data-theme="light"] .fund-finder.compact #fund-search {
  background: linear-gradient(100deg, rgba(214,150,20,.10), rgba(214,150,20,.02) 60%), var(--surface);
  border-color: rgba(200,140,20,.6);
}
.fund-fab { display: none; }
@media (max-width: 720px) {
  /* Phones: the search box scrolls away with the page, so a round button
     brings it back from anywhere below. */
  .fund-fab { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 50;
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent); color: var(--accent-fg, #111); border: none;
    box-shadow: 0 10px 24px -6px rgba(0,0,0,.6), 0 0 0 4px rgba(255,200,87,.18); }
  .fund-fab[hidden] { display: none !important; }
  .fund-fab svg { width: 22px; height: 22px; }
}
@media (max-width: 720px) {
  .fund-finder.compact { position: static; margin: 0 0 var(--s-3); padding: 0; background: none; }
}
#fund-grid { scroll-margin-top: 140px; }

.co-table { font-size: var(--fs-xs); }
.co-table th, .co-table td { padding: 8px 12px; white-space: nowrap; }
.co-table th { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.co-table td:first-child, .co-table th:first-child {
  position: sticky; left: 0; background: var(--surface); z-index: 1; text-align: left;
}
.co-table tr.strong td { font-weight: 750; }
.co-table td.neg { color: var(--down); }
.co-table tbody tr:hover td { background: var(--surface-2); }
.co-table.peers tr.link { cursor: pointer; }
.co-table.peers tr.me td { background: var(--accent-bg); }

.co-pc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.co-pros, .co-cons { padding: var(--s-4); border-radius: var(--radius); }
.co-pros { background: var(--up-bg); }
.co-cons { background: var(--down-bg); }
.co-pros ul, .co-cons ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.7; }
.co-pros .why-title { color: var(--up); }
.co-cons .why-title { color: var(--down); }
.co-growths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.co-growth { padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); }
.cg-row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-xs); padding: 4px 0; }

.co-chart { width: 100%; height: 220px; display: block; }
.co-chart .line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.co-chart .line.up { stroke: var(--up); } .co-chart .line.down { stroke: var(--down); }
.co-chart .area.up { fill: var(--up); opacity: .10; } .co-chart .area.down { fill: var(--down); opacity: .10; }
.co-chart-tools { display: flex; gap: 4px; margin-bottom: 8px; }
.co-chart-tools button { padding: 4px 11px; border-radius: var(--radius-full); font-size: var(--fs-3xs); font-weight: 700;
  color: var(--muted); border: 1px solid var(--border); }
.co-chart-tools button.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
/* The two chart controls: which window, and which basis. They sit on one
   line on a desktop and wrap to two on a phone, the basis first because it
   changes what the numbers mean rather than only how many of them there are. */
.pc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; justify-content: flex-end; }
.pc-basis { display: flex; gap: 0; margin-bottom: 8px; border: 1px solid var(--border);
  border-radius: var(--radius-full); overflow: hidden; }
.pc-basis button { padding: 4px 11px; font-size: var(--fs-3xs); font-weight: 700;
  color: var(--muted); border: 0; white-space: nowrap; }
.pc-basis button.on { background: var(--surface-3); color: var(--text); }

.co-chart-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--fs-3xs); color: var(--muted); margin-top: 6px; }

.co-holdbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: var(--s-3) 0 6px; background: var(--surface-3); }
.co-holdbar .prom { background: var(--accent); } .co-holdbar .pub { background: #6d98ff; }

@media (max-width: 900px) {
  .co-pc { grid-template-columns: 1fr; }
  .co-growths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================== form controls: segmented, switch, select ===================== */
.seg {
  display: inline-flex; padding: 3px; gap: 2px; flex: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full);
}
.seg button {
  padding: 6px 13px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600;
  color: var(--muted); background: none; border: 0; cursor: pointer; transition: var(--t-fast);
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent); color: var(--accent-fg); }
.seg button:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }

.switch {
  position: relative; width: 42px; height: 24px; flex: none; padding: 0; cursor: pointer;
  border-radius: var(--radius-full); border: 1px solid var(--border-2);
  background: var(--surface-3); transition: var(--t-fast);
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-2); transition: transform var(--t-fast), background var(--t-fast);
}
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] .knob { transform: translateX(18px); background: var(--accent-fg); }
.switch:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Native selects, where they remain, wear the theme instead of the OS chrome. */
select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--surface-2);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 30px 7px 11px; font-size: var(--fs-sm); color: var(--text); cursor: pointer;
  transition: border-color var(--t-fast);
}
select:hover { border-color: var(--border-2); }
select:focus { outline: none; border-color: var(--border-focus); }
select option { background: var(--surface); color: var(--text); }

/* ===================== home: sector bar and drill-down ===================== */
/* Two labelled groups instead of one long row: what led and what lagged,
   with the rest behind a click. Fifty-seven identical lozenges is the day's
   data, not a summary of it. */
.sector-pills { display: block; overflow: visible; margin-bottom: var(--s-4); }
.hs-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-5); }
.hs-group { min-width: 0; }
.hs-k {
  display: block; margin-bottom: 7px;
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.hs-group.up .hs-k { color: var(--up); }
.hs-group.down .hs-k { color: var(--down); }
.hs-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-more {
  margin-top: var(--s-3); padding: 5px 0; background: none; border: 0;
  color: var(--accent); font-size: var(--fs-2xs); font-weight: 650; cursor: pointer;
}
.hs-flat {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-2xs); color: var(--muted); margin-bottom: var(--s-2);
}
.hs-flat-k {
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim);
}
@media (max-width: 720px) { .hs-split { grid-template-columns: 1fr; } }
/* Each pill carries its own bar, so the sorted row reads as a chart of the
   day rather than a wall of identical lozenges with tiny numbers on them.
   The bar is anchored to the bottom edge and sized against the biggest move,
   so magnitude is a length and direction is a colour with a sign beside it. */
.sector-pill {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  position: relative; overflow: hidden; padding-bottom: 8px;
}
.sector-pill .sp-chg { font-size: var(--fs-3xs); font-weight: 700; }
.sp-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 0 2px 0 0;
  background: var(--dim); opacity: .55;
}
.sp-bar.up { background: var(--up); }
.sp-bar.down { background: var(--down); }
.sp-bar.flat { background: var(--border-2); }
.sector-pill .sp-chg.flat { color: var(--dim); }
.sector-pill:hover .sp-bar { opacity: .9; }
.sector-pill.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.sector-pill.on .sp-name { color: var(--accent); }

.sector-panel { margin-bottom: var(--s-5); animation: rise .18s var(--ease); }
.sp-head { display: flex; align-items: flex-start; gap: var(--s-5); flex-wrap: wrap; }
.sp-head h3 { font-family: var(--display); font-size: var(--fs-lg); font-weight: 600; }
.sp-sub { font-size: var(--fs-2xs); margin-top: 2px; }
.sp-stats { display: flex; gap: var(--s-5); flex-wrap: wrap; flex: 1; }
.sp-stat { display: flex; flex-direction: column; gap: 2px; }
.sp-stat .k { font-size: var(--fs-3xs); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.sp-stat .v { font-size: var(--fs-md); font-weight: 700; }
.sp-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.sp-note { font-size: var(--fs-xs); color: var(--text-2); margin: var(--s-3) 0; }
.sp-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 2px var(--s-4); max-height: 420px; overflow-y: auto; margin-top: var(--s-2);
}
.sp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px 104px; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm); text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--border); cursor: pointer; font-size: var(--fs-xs);
}
.sp-row:hover { background: var(--surface-2); }
.sp-row .sp-id, .sp-row .sp-val { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-row .sp-val { align-items: flex-end; }
.sp-row .sym { font-weight: 700; font-family: var(--mono); font-size: var(--fs-xs); }
.sp-row .nm { color: var(--muted); font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-row .px { font-weight: 600; }
.sp-row .chg { font-weight: 700; font-size: var(--fs-2xs); }

/* ===================== reward : risk slider ===================== */
.rr-control { min-width: 240px; }
.rr-value { font-family: var(--mono); font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.rr-range {
  --fill: 0%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 2px 0;
  border: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--accent-bg), var(--accent)) 0 50% / var(--fill) 6px no-repeat,
              linear-gradient(var(--surface-3), var(--surface-3)) 0 50% / 100% 6px no-repeat;
  border-radius: var(--radius-full);
}
.rr-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg); box-shadow: var(--shadow-accent); cursor: grab;
}
.rr-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bg);
  background: var(--accent); box-shadow: var(--shadow-accent); cursor: grab;
}
.rr-range:disabled { cursor: not-allowed; opacity: .5; }
.rr-range:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 4px; }
.rr-scale { display: flex; justify-content: space-between; font-size: 9px; color: var(--dim); font-family: var(--mono); }

/* ===================== company page: tags, about, chart, key numbers ===================== */
.co-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.co-tag {
  font-size: var(--fs-2xs); font-weight: 600; padding: 3px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--border-2); color: var(--text-2); background: var(--surface-2);
}
.co-tag.main { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
/* Today's fact, beside the permanent ones. It leads because the sector is true
   every day and this is only true now. */
.co-tag.trending {
  display: inline-flex; align-items: center; gap: 5px;
  border-color: var(--up-border); color: var(--up); background: var(--up-bg); font-weight: 650;
}
.co-tag.trending svg { width: 12px; height: 12px; flex-shrink: 0; }
.co-price-note { font-size: var(--fs-3xs); }

.co-ratio { flex-direction: column; align-items: flex-start !important; gap: 2px; }
.co-ratio .x { font-size: var(--fs-3xs); color: var(--dim); line-height: 1.35; }

.co-summary p { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-2); margin: 0 0 8px; max-width: 900px; }
.co-summary p:first-child { color: var(--text); }
.co-more-btn { margin: 4px 0 8px; }
.co-more { border-top: 1px solid var(--border); margin-top: var(--s-3); padding-top: var(--s-3); }
.co-more .why-title { margin-top: var(--s-4); }
.co-more .why-title:first-child { margin-top: 0; }
.co-facts { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-xs); line-height: 1.7; color: var(--text-2); }
.co-note { font-size: var(--fs-3xs); color: var(--dim); margin: 8px 0 0; line-height: 1.5; }
.seg-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.seg-row { display: grid; grid-template-columns: minmax(140px, 260px) 1fr 44px 110px 90px; gap: 10px; align-items: center; font-size: var(--fs-xs); }
.seg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-bar { height: 8px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.seg-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-bg), var(--accent)); border-radius: inherit; }
.seg-num { text-align: right; font-family: var(--mono); font-size: var(--fs-2xs); }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 20px; margin-top: 8px; }
.kv { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-xs); }
.kv .k { font-size: var(--fs-3xs); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.co-ann { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: var(--fs-xs); }
.ann { display: grid; grid-template-columns: 56px 1fr; gap: 2px 10px; }
.ann a { color: var(--text); text-decoration: none; font-weight: 600; }
.ann a:hover { color: var(--accent); }
.ann-detail { grid-column: 2; color: var(--dim); font-size: var(--fs-3xs); }
.n-detail { font-size: var(--fs-3xs); color: var(--dim); margin: 2px 0 4px; }
@media (max-width: 720px) {
  .seg-row { grid-template-columns: 1fr 44px 80px; }
  .seg-row .seg-bar, .seg-row .seg-num:last-child { display: none; }
}

/* price chart */
.pc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pc-readout { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: var(--fs-xs); min-height: 28px; }
.pc-price { font-size: var(--fs-xl); font-weight: 700; font-family: var(--display); }
.pc-plot { position: relative; height: 300px; cursor: crosshair; touch-action: none; margin-right: 64px; }
.pc-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pc-svg .grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.pc-svg .line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pc-svg .line.up { stroke: var(--up); } .pc-svg .line.down { stroke: var(--down); }
.pc-svg .area.up { fill: var(--up); opacity: .09; } .pc-svg .area.down { fill: var(--down); opacity: .09; }
.pc-svg .vol.up { fill: var(--up); opacity: .28; } .pc-svg .vol.down { fill: var(--down); opacity: .28; }
.pc-y { position: absolute; left: calc(100% + 10px); transform: translateY(-50%); white-space: nowrap; font-size: var(--fs-3xs); color: var(--dim); font-family: var(--mono); }
.pc-xaxis { position: relative; height: 16px; margin-right: 64px; margin-top: 4px; }
.pc-x { position: absolute; transform: translateX(-50%); font-size: var(--fs-3xs); color: var(--dim); white-space: nowrap; }
.pc-x:first-child { transform: none; } .pc-x:last-child { transform: translateX(-100%); }
.pc-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-2); pointer-events: none; margin-left: 0; }
.pc-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 2px solid var(--bg); pointer-events: none; }
.pc-dot.up { background: var(--up); } .pc-dot.down { background: var(--down); }
.pc-tip {
  position: absolute; top: 8px; transform: translateX(12px); pointer-events: none; z-index: 3;
  min-width: 170px; padding: 9px 11px; border-radius: var(--radius-sm); font-size: var(--fs-2xs);
  background: var(--surface); border: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
}
.pc-tip.flip { transform: translateX(calc(-100% - 12px)); }
.pc-tip-day { font-weight: 700; margin-bottom: 6px; color: var(--text); }
.pc-tip-row { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); line-height: 1.7; }
.pc-tip-row b { color: var(--text); font-weight: 650; }
.co-chart-tools button.thin { opacity: .5; }

/* key numbers */
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.gl-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.gl-k { font-size: var(--fs-3xs); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.gl-v { font-size: var(--fs-xl); font-weight: 700; font-family: var(--display); }
.gl-d { font-size: var(--fs-2xs); }
.gl-x { font-size: var(--fs-3xs); color: var(--muted); line-height: 1.45; margin-top: 2px; }
.dl { font-family: var(--mono); font-size: var(--fs-3xs); font-weight: 700; white-space: nowrap; }
.dl.up { color: var(--up); } .dl.down { color: var(--down); } .dl.flat { color: var(--dim); font-weight: 500; }

/* statements with a change under each figure */
.co-table.stmt td .dl { display: block; margin-top: 1px; font-weight: 600; opacity: .9; }
.co-table.stmt td.co-metric { min-width: 200px; white-space: normal; }
.co-table.stmt .m-name { font-weight: 600; }
.co-table.stmt tr.strong .m-name { font-weight: 750; }
.co-table.stmt .m-help { font-size: var(--fs-3xs); color: var(--dim); font-weight: 400; margin-top: 1px; }
.co-table.stmt th.latest, .co-table.stmt td.latest { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.kv .v { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600; color: var(--text); letter-spacing: 0; }
.skeleton-tag { opacity: .5; border-style: dashed; }


/* ===========================================================================
   Phones. Most readers use this on a phone, so below 720px the layout is
   re-thought rather than squeezed: the smallest type grows, the numbers a
   reader came for (price, move, the latest period) come first, and anything
   that needs a wide screen either stacks or scrolls within its own card.
   =========================================================================== */
@media (max-width: 720px) {
  /* The phone type scale lives in ONE place - the "Phones, part two" block
     further down. Two blocks both setting it is how the site ended up serving
     a size nobody chose. This one keeps only behaviour. */
  body { -webkit-text-size-adjust: 100%; }
  /* iOS zooms the page into any input under 16px; keep every field at 16. */
  input[type=text], input[type=search], input:not([type]), select, textarea { font-size: 16px !important; }
  /* No grey flash on tap; the app draws its own pressed states. */
  button, a, .mover, .sp-row, tr { -webkit-tap-highlight-color: transparent; }

  /* card headers: title on one line, the note on the next, never truncated */
  .card-head { flex-wrap: wrap; row-gap: 3px; }
  .card-head .sub { white-space: normal; overflow: visible; text-overflow: clip; }
  .card-head h3 + .sub:not(:last-child) { flex-basis: auto; }

  /* home: sectors as one swipeable row instead of a screen-filling block */
  .sector-pills {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 0 var(--s-4); padding: 2px 0 6px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .sector-pills::-webkit-scrollbar { display: none; }
  .sector-pill { scroll-snap-align: start; flex: none; font-size: 12px; }
/* sector drill-down */
  .sp-head { flex-direction: column; gap: 12px; }
  .sp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; width: 100%; }
  .sp-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .sp-list { grid-template-columns: 1fr; max-height: 60vh; }
  .sp-row { grid-template-columns: minmax(0, 1fr) 52px 96px; padding: 10px 4px; }

  /* screener: results first, filters behind a button */
  .filters-toggle { display: inline-flex !important; gap: 6px; }
  .filters-toggle .ft-n:not(:empty) {
    background: var(--accent); color: var(--accent-fg); border-radius: var(--radius-full);
    padding: 0 7px; font-size: 11px; font-weight: 700;
  }
  .screener-filters:not(.filters-open) > .card-body { display: none; }
  .screener-filters .card-head { border-bottom: 0; }
  .screener-filters.filters-open .card-head { border-bottom: 1px solid var(--border); }
  #screener-export { font-size: 0; gap: 0; padding-inline: 10px; }
  #screener-export svg { width: 16px; height: 16px; }
  #screener-count { flex-basis: 100%; order: 10; }
  #screener-table td, #screener-table th { padding: 11px 10px; }
  #screener-table td.sym { min-width: 118px; max-width: 150px; }
  .sym-name { display: block; font-size: 11px; font-weight: 500; color: var(--muted);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
  .controls-grid { grid-template-columns: 1fr; }
  .form-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .form-row select { width: 100%; }

  /* opportunities */
  .rr-control { min-width: 0; }
  .rr-head { flex-wrap: wrap; row-gap: 2px; }
  .cap-scale, .rr-scale { font-size: 11px; }

  /* IPO cards: long names wrap instead of pushing the card off-screen */
  .ipo-grid { grid-template-columns: minmax(0, 1fr); }
  .ipo-grid > *, .ipo-card, .ipo-head > * { min-width: 0; }
  .ipo-name { white-space: normal; }

  /* company page */
  .co-title h2 { font-size: 24px; line-height: 1.2; }
  .co-price .p { font-size: 26px; }
  .co-ratios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-ratio { padding: 10px 12px; font-size: 13px; }
  .co-ratio .v { font-size: 16px; }
  .co-ratio .x { font-size: 11px; }
  .co-nav { margin: 0 0 10px; padding: 8px 10px; }
  .co-nav button { padding: 8px 14px; min-height: 36px; }
  .co-section, #fund-grid { scroll-margin-top: 120px; }
  .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gl-card { padding: 12px; }
  .gl-v { font-size: 19px; }
  .gl-then { display: block; margin-top: 2px; }
  .gl-then::before { content: none !important; }
  .co-table.stmt td.co-metric { min-width: 124px; max-width: 150px; }
  .co-table.stmt .m-help { display: none; }
  .co-table th, .co-table td { padding: 9px 10px; }
  .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg-row { grid-template-columns: minmax(0, 1fr) 40px 84px; }
  .co-chart-tools { flex-wrap: wrap; }
  .co-chart-tools button { min-height: 32px; padding: 5px 11px; font-size: 11px; }
  .pc-top { flex-direction: column; align-items: stretch; }
  .pc-plot { height: 230px; margin-right: 0; touch-action: pan-y; }
  .pc-xaxis { margin-right: 0; }
  .pc-y { left: auto; right: 2px; padding: 1px 4px; border-radius: 4px;
          background: color-mix(in srgb, var(--surface) 80%, transparent); }
  .pc-tip { min-width: 140px; font-size: 11px; }
  .co-summary p { font-size: 13px; }

  /* settings drawer rises from the bottom like a native sheet */
  .setting { flex-wrap: wrap; }
  .seg button { padding: 8px 14px; }
}
@media (max-width: 380px) {
  .gl-grid, .co-ratios { grid-template-columns: 1fr; }
}
/* the filters button is a phone-only affordance */
.filters-toggle { display: none !important; }
/* The metrics panel is a desktop tool above all - it was borrowing the phone
   toggle's class, and so was hidden on every screen wide enough to use it. */
.sc-metrics { display: inline-flex; gap: 6px; align-items: center; }
.sc-metrics.has { border-color: var(--accent); color: var(--accent); }
.sc-metrics .ft-n:not(:empty) { background: var(--accent); color: var(--accent-fg, #111);
  border-radius: var(--radius-full); padding: 0 6px; font-size: var(--fs-3xs); font-weight: 700; }
@media (max-width: 720px) { .filters-toggle { display: inline-flex !important; } }
.sym-code { display: block; }
.sym-name { display: block; font-size: var(--fs-3xs); font-weight: 500; color: var(--muted);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; margin-top: 1px; }

.gl-then::before { content: ' · '; }

/* ===================== PMS (coming soon) ===================== */
.tabs button .soon-dot {
  margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-full); vertical-align: 1px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-bg);
}
.pms-hero { margin-bottom: var(--s-4); text-align: center; }
.pms-hero .card-body { padding: var(--s-10) var(--s-5); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pms-badge {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent);
  padding: 4px 12px; border-radius: var(--radius-full);
}
.pms-title { font-family: var(--display); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.02em; margin: 0; }
.pms-lead { max-width: 620px; margin: 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.6; }
.pms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 1060px) { .pms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pms-feature .card-body { display: flex; flex-direction: column; gap: 8px; }
.pms-feature h3 { font-family: var(--display); font-size: var(--fs-md); font-weight: 600; margin: 0; }
.pms-feature p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.pf-icon {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent); font-weight: 700; font-size: 16px;
}
.pf-icon svg { width: 20px; height: 20px; }
.pms-note { text-align: center; color: var(--dim); font-size: var(--fs-xs); margin: var(--s-5) 0; }
@media (max-width: 720px) {
  .pms-hero .card-body { padding: var(--s-8) var(--s-4); }
  .pms-title { font-size: 28px; }
  .pms-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ===================== disclaimer ===================== */
.overlay.sticky { backdrop-filter: blur(6px); }
.disclaimer-card {
  width: min(620px, 94vw); max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--s-6); animation: rise .18s var(--ease);
}
.dc-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: var(--s-4); }
.dc-badge {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font: 800 20px var(--display); color: var(--accent-fg); background: var(--accent);
}
.dc-head h2 { font-family: var(--display); font-size: var(--fs-xl); font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.dc-lead { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.dc-points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.dc-points li { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); padding-left: 4px; }
.dc-points li::marker { color: var(--accent); font-weight: 700; }
.dc-points strong { display: block; color: var(--text); font-weight: 650; margin-bottom: 2px; }
.dc-legal {
  margin: var(--s-4) 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--accent-bg); color: var(--text); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
}
.dc-actions { display: flex; justify-content: flex-end; margin-top: var(--s-4); }
.dc-accept { min-width: 200px; justify-content: center; }
.sb-disclaimer {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--warn, var(--accent)); text-decoration: underline; text-underline-offset: 2px;
}
.sb-disclaimer:hover { color: var(--accent); }
@media (max-width: 720px) {
  .disclaimer-card { padding: var(--s-4); max-height: 84vh; }
  .dc-head h2 { font-size: 19px; }
  .dc-accept { width: 100%; }
  .dc-actions { position: sticky; bottom: calc(-1 * var(--s-4)); background: var(--surface);
                padding: 10px 0 2px; margin-bottom: calc(-1 * var(--s-2)); }
}
.home-disclaimer { text-align: center; color: var(--dim); font-size: var(--fs-2xs); line-height: 1.6; margin: var(--s-6) auto var(--s-4); max-width: 640px; }
.home-disclaimer a { color: var(--accent); }

.h-flag {
  margin-left: 6px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--down); background: var(--down-bg); padding: 1px 5px; border-radius: 5px; vertical-align: 2px;
}

/* ===================== shareholding & deals ===================== */
.co-table.holding tr.sub .m-name { font-weight: 500; color: var(--muted); padding-left: 10px; }
.co-holdbar { display: flex; height: 10px; border-radius: var(--radius-full); overflow: hidden; margin-top: var(--s-3); background: var(--surface-3); }
.co-holdbar i { display: block; height: 100%; }
.split-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: var(--fs-2xs); color: var(--text-2); }
.split-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.deal-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--s-3); }
.deal-sum .ds { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.deal-sum .k { font-size: var(--fs-3xs); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.deal-sum .v { font-size: var(--fs-md); font-weight: 700; }
.co-table.deals td.who { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-line { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); color: var(--text-2); margin-bottom: 10px; font-weight: 600; }
.deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); }
.deal-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px 44px 86px; gap: 10px; align-items: center;
            padding: 9px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; font-size: var(--fs-xs); }
.deal-row:hover { background: var(--surface-2); }
/* The date sits in the row. A phone has no hover to hide it behind. */
.deal-grid.dated .deal-row { grid-template-columns: 58px 84px minmax(0, 1fr) 46px 42px 82px; }
.deal-row .when { font-size: var(--fs-3xs); white-space: nowrap; }
.deal-when { color: var(--muted); }
.deal-row .sym { font-weight: 700; font-family: var(--mono); font-size: var(--fs-2xs); }
.deal-row .who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-row .val { text-align: right; font-weight: 600; }
.deal-row .kind { font-size: var(--fs-3xs); }
@media (max-width: 720px) {
  .deal-grid { grid-template-columns: 1fr; }
  .deal-row { grid-template-columns: 82px minmax(0, 1fr) 44px 76px; }
  .deal-row .kind { display: none; }
  .deal-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.co-table.deals td:nth-child(-n+4), .co-table.deals th:nth-child(-n+4) { text-align: left; }

/* Pinned label column on company tables: opaque, above everything that
   scrolls under it (including the date headers), with a crisp edge so the
   half-hidden column beside it reads as "scrolled", not as clutter. */
.co-table td:first-child, .co-table th:first-child {
  z-index: 3; background: var(--surface);
  box-shadow: inset -1px 0 0 var(--border-2), 10px 0 12px -10px rgba(0, 0, 0, .55);
}
.co-table thead th:first-child { z-index: 5; background: var(--surface-2); }
.co-table tbody tr:hover td:first-child { background: var(--surface-2); }

/* Company tables on phones: the latest periods whole, history on request. */
.co-older { display: none; }
@media (max-width: 720px) {
  .co-table.stmt:not(.show-all) .old { display: none; }
  .co-table.stmt:not(.show-all) { width: 100%; }
  .co-table.stmt:not(.show-all) td.co-metric { min-width: 0; width: 34%; max-width: none; }
  .co-table.stmt th, .co-table.stmt td { padding: 9px 7px; }
  .co-older {
    display: inline-flex; margin-top: 8px; padding: 7px 12px; border-radius: var(--radius-full);
    border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-2);
    font-size: 12px; font-weight: 600; cursor: pointer;
  }
}

/* Shareholding: four groups that add up to 100%, parts indented under them. */
.co-table.holding tr.drillable { cursor: pointer; }
.co-table.holding tr.drillable:hover td { background: var(--hover, rgba(255,255,255,.03)); }
.co-table.holding tr.drillable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.co-table.holding .drill-caret { display: inline-block; margin-left: 6px; color: var(--accent); font-size: 10px;
  transition: transform .15s ease; vertical-align: 1px; }
.co-table.holding tr.open .drill-caret { transform: rotate(90deg); }
.co-table.holding tr.open td { border-bottom-color: transparent; }
.co-table.holding tr.hold-drill > td { padding: 0 0 12px !important; background: none; text-align: left; white-space: normal; }
.hold-detail { position: sticky; left: 8px; margin: 2px 8px 0; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); background: var(--surface-2); font-weight: 400; }
.hd-block + .hd-block { margin-top: 12px; }
.hd-title { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 700; margin-bottom: 6px; }
.hd-title .hd-sub { text-transform: none; letter-spacing: 0; font-weight: 500; }
.hd-list { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.hd-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 64px 84px; gap: 10px; align-items: center;
  padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-xs); }
.hd-row:last-child { border-bottom: none; }
.hd-name { color: var(--text); overflow-wrap: anywhere; }
.hd-type .hd-name { color: var(--muted); padding-left: 12px; }
.hd-rest .hd-name { color: var(--dim); font-style: italic; }
.hd-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.hd-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.hd-rest .hd-bar i { background: var(--dim); }
.hd-pct { text-align: right; font-weight: 650; color: var(--text); }
.hd-ch { text-align: right; font-size: var(--fs-3xs); color: var(--dim); }
.hd-ch.dl.up { color: var(--up); } .hd-ch.dl.down { color: var(--down); }
.hd-ch.new { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hd-none { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.hd-note { margin: 10px 0 0; font-size: var(--fs-3xs); color: var(--dim); line-height: 1.5; }
.drill-hint { margin-top: 8px; }
@media (max-width: 720px) {
  .hold-detail { margin: 2px 0 0; padding: 10px 10px; }
  .hd-row { grid-template-columns: minmax(0, 1fr) 58px 62px; gap: 8px; font-size: 12.5px; }
  .hd-bar { display: none; }
  .hd-row > :last-child { grid-column: 3; }
  .hd-row .hd-pct { grid-column: 2; }
}
.co-table.holding tr.lvl-top td { font-weight: 750; }
.co-table.holding tr.lvl-top .m-name { font-weight: 750; color: var(--text); }
.co-table.holding tr.lvl-sub td { font-weight: 500; color: var(--text-2); }
.co-table.holding tr.lvl-sub td { border-bottom-style: dashed; }
.co-table.holding tr.lvl-sub .m-name { font-weight: 500; color: var(--muted); padding-left: 14px; }
.co-table.holding tr.lvl-sub .m-help { padding-left: 14px; }
.co-table.holding tr.lvl-sub .sub-mark { color: var(--dim); }
.co-table.holding tr.lvl-count td { color: var(--text-2); }
@media (max-width: 720px) {
  /* On phones the caption under a part says what it is part of. */
  .co-table.holding tr.lvl-sub .m-help { display: block; font-size: 11px; }
  .co-table.holding tr.lvl-top .m-help { display: none; }
}
@media (max-width: 720px) { .co-table.holding .m-help .more { display: none; } }
.co-table.holding .lbl-short { display: none; }
@media (max-width: 720px) {
  .co-table.holding .lbl-long { display: none; }
  .co-table.holding .lbl-short { display: inline; }
  .co-table.holding tr.lvl-sub .m-name { font-size: 13px; padding-left: 8px; }
  .co-table.holding tr.lvl-sub .m-help { padding-left: 8px; }
}

@media (max-width: 720px) {
  /* Fixed layout: the label column takes a third and the three periods share
     the rest, so a long label can never push a column off the edge. */
  .co-table.stmt:not(.show-all) { table-layout: fixed; }
  .co-table.stmt:not(.show-all) td.co-metric, .co-table.stmt:not(.show-all) thead th:first-child { width: 34%; }
  .co-table.stmt:not(.show-all) td.num, .co-table.stmt:not(.show-all) th.num { font-size: 12.5px; padding: 9px 4px; overflow: hidden; text-overflow: clip; }
  .co-table.stmt:not(.show-all) td.num .dl { font-size: 10.5px; }
  .co-table.holding tr.lvl-count td.num { font-size: 11.5px; }
}

/* ===================== News tab ===================== */
.news-hero { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between;
  margin: var(--s-2) 0 var(--s-4); flex-wrap: wrap; }
.nh-title { margin: 0; font-family: var(--display); font-size: var(--fs-2xl, 28px); letter-spacing: -.02em; }
.nh-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.news-box { flex: 1 1 420px; max-width: 620px; }
#news-search {
  width: 100%; padding: 13px 44px 13px 48px; border-radius: var(--radius-lg);
  background: linear-gradient(100deg, rgba(255,200,87,.09), rgba(255,200,87,.02) 60%), var(--surface);
  border: 1px solid rgba(255,200,87,.5); color: var(--text); font-size: var(--fs-sm); outline: none;
  box-shadow: 0 0 0 3px rgba(255,200,87,.06);
}
#news-search::-webkit-search-cancel-button { display: none; }
#news-search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,200,87,.14); }
.news-box .ff-icon { color: var(--accent); }
.news-note { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-bottom: var(--s-3);
  padding: 10px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-sm); }
.news-sugg { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.news-tags { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s-3); padding-bottom: 2px; }
.news-tags::-webkit-scrollbar { display: none; }
.news-tags .chip { white-space: nowrap; flex: none; }
.chip-n { margin-left: 6px; font-family: var(--mono); font-size: var(--fs-3xs); opacity: .75; }

.ntag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; }
.ntag.t-results { background: var(--accent-bg); color: var(--accent); border-color: rgba(255,200,87,.35); }
.ntag.t-good { background: var(--up-bg); color: var(--up); }
.ntag.t-bad { background: var(--down-bg); color: var(--down); }
.ntag.t-deal { background: rgba(197,139,255,.13); color: #c58bff; }
.ntag.t-info { background: rgba(109,152,255,.13); color: #6d98ff; }
.ntag.t-dim { background: var(--surface-3); color: var(--muted); }
[data-theme="light"] .ntag.t-deal { color: #8a4fd0; }
[data-theme="light"] .ntag.t-info { color: #3d68d8; }

.news-trending { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s-3); }
.n-card .card-body { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.n-card.top { border-color: rgba(255,200,87,.35); }
.n-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.n-rank { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-weight: 800;
  font-size: var(--fs-xs); background: var(--surface-3); color: var(--muted); }
.n-card.top .n-rank { background: var(--accent); color: var(--accent-fg, #111); }
.n-sector { font-size: var(--fs-3xs); color: var(--dim); }
.n-time { margin-left: auto; font-size: var(--fs-3xs); color: var(--dim); font-family: var(--mono); }
.n-title { margin: 0; font-size: var(--fs-md, 15px); line-height: 1.45; font-weight: 650;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.n-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.n-co { display: inline-flex; gap: 6px; align-items: baseline; padding: 0; background: none; border: 0; color: inherit;
  cursor: pointer; text-align: left; min-width: 0; }
.n-co.static { cursor: default; }
.n-co .n-sym { font-family: var(--mono); font-weight: 750; font-size: var(--fs-xs); color: var(--accent); }
.n-co .n-name { font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
button.n-co:hover .n-name { text-decoration: underline; }
.n-move { font-family: var(--mono); font-size: var(--fs-3xs); font-weight: 700; padding: 1px 6px; border-radius: 5px; }
.n-move.up { color: var(--up); background: var(--up-bg); } .n-move.down { color: var(--down); background: var(--down-bg); }
.n-move.flat { color: var(--muted); background: var(--surface-3); }
.n-cap { font-size: var(--fs-3xs); }
.n-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding-top: 8px; border-top: 1px dashed var(--border); }
.n-cat { font-size: var(--fs-3xs); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.n-link { font-size: var(--fs-3xs); font-weight: 700; color: var(--accent); white-space: nowrap; text-decoration: none; }
.n-link:hover { text-decoration: underline; }

.n-list .card-body { padding-top: 4px; }
.n-day { margin: 0 -4px; padding: 14px 4px 6px;
  font-size: var(--fs-3xs); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
  background: var(--surface); border-bottom: 1px solid var(--border); }
.n-row, .ev-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 12px 0;
  border-bottom: 1px dashed var(--border); }
.ev-row { grid-template-columns: 96px minmax(0, 1fr); }
.n-row:last-child, .ev-row:last-child { border-bottom: 0; }
.n-when { font-family: var(--mono); font-size: var(--fs-xs); color: var(--dim); padding-top: 2px; }
.ev-kind { font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: 4px; }
.n-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.n-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.n-text { font-size: var(--fs-sm); line-height: 1.5; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.n-sub { display: flex; gap: 12px; align-items: center; }
.ev-detail { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.n-more { margin: var(--s-3) 0 0; font-size: var(--fs-xs); }
.news-foot { margin-top: var(--s-4); }
.co-nav .co-nav-news { color: var(--accent); border-color: rgba(255,200,87,.45); white-space: nowrap; }
#news-root.refreshing { opacity: .6; transition: opacity .15s; }

@media (max-width: 720px) {
  .news-hero { margin-top: var(--s-3); gap: var(--s-3); }
  .nh-title { font-size: 18px; }
  .news-box { flex-basis: 100%; }
  .news-trending { grid-template-columns: 1fr; }
  .n-row { grid-template-columns: 42px minmax(0, 1fr); gap: 8px; }
  .ev-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .n-co .n-name { max-width: 170px; }
  .news-subtabs .ipo-subtab { padding: 9px 6px; font-size: var(--fs-xs); }
}

/* The five counts a reader sorts the page by, each one the filter it counts. */
.ipo-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s-3); }
.ipo-count {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; font-family: var(--sans);
}
.ipo-count:hover { border-color: var(--border-2); background: var(--surface-2); }
.ipo-count.on { border-color: var(--accent); background: var(--accent-bg); }
.ipo-count .ic-n { font-family: var(--display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; }
.ipo-count .ic-k {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.ic-total { color: var(--text); }
.ic-upcoming { color: var(--warn); }
.ic-open { color: var(--up); }
.ic-closing { color: var(--down); }
.ic-closed { color: var(--info, #6ea8fe); }

/* Checkboxes, because "SME issues that are open" is two boxes, not one pick. */
.ipo-filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: var(--s-4);
}
.ipo-f {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); font-size: var(--fs-2xs); font-weight: 650;
  color: var(--text-2); cursor: pointer; min-height: 36px;
}
.ipo-f:hover { border-color: var(--border-2); }
.ipo-f.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.ipo-f input { accent-color: var(--accent); margin: 0; width: 14px; height: 14px; cursor: pointer; }
.ipo-f-b {
  display: inline-grid; place-items: center; min-width: 18px; height: 16px;
  padding: 0 4px; border-radius: var(--radius-full);
  font-size: 9px; font-weight: 800; font-style: normal; letter-spacing: .03em; color: #fff;
}
.b-open { background: var(--up); color: #08130c; }
.b-closing { background: var(--down); }
.b-upcoming { background: var(--warn); color: #191104; }
.b-closed { background: var(--info, #4d7fd6); }
.b-listed { background: #3aa7c9; color: #06171d; }
/* The whole row carries its state, not only the letter at the front of it.
   A wash of the badge's own colour, faint enough to read type over, with a
   solid edge on the left so the state reads down the column rather than one
   16px badge at a time.

   Compound selectors throughout: .ipo-line-row sets `background: none` and
   is declared after these, so a bare .st-open loses the tie on specificity
   and the tint never appears. */
.ipo-line-row.st-upcoming, .ipo-line-row.st-open,
.ipo-line-row.st-closing, .ipo-line-row.st-closed { border-left: 3px solid transparent; }
.ipo-line-row.st-upcoming {
  background: color-mix(in srgb, var(--warn) 8%, transparent); border-left-color: var(--warn);
}
.ipo-line-row.st-open {
  background: color-mix(in srgb, var(--up) 8%, transparent); border-left-color: var(--up);
}
.ipo-line-row.st-closing {
  background: color-mix(in srgb, var(--down) 9%, transparent); border-left-color: var(--down);
}
.ipo-line-row.st-closed {
  background: color-mix(in srgb, var(--info, #4d7fd6) 8%, transparent);
  border-left-color: var(--info, #4d7fd6);
}
.ipo-line-row.st-upcoming:hover { background: color-mix(in srgb, var(--warn) 15%, transparent); }
.ipo-line-row.st-open:hover { background: color-mix(in srgb, var(--up) 15%, transparent); }
.ipo-line-row.st-closing:hover { background: color-mix(in srgb, var(--down) 16%, transparent); }
.ipo-line-row.st-closed:hover { background: color-mix(in srgb, var(--info, #4d7fd6) 15%, transparent); }
/* An opened row keeps its tint rather than reverting to the plain surface. */
.ipo-line.open .ipo-line-row.st-upcoming { background: color-mix(in srgb, var(--warn) 17%, transparent); }
.ipo-line.open .ipo-line-row.st-open { background: color-mix(in srgb, var(--up) 17%, transparent); }
.ipo-line.open .ipo-line-row.st-closing { background: color-mix(in srgb, var(--down) 18%, transparent); }
.ipo-line.open .ipo-line-row.st-closed { background: color-mix(in srgb, var(--info, #4d7fd6) 17%, transparent); }

/* The same alphabet on the rows as on the filter boxes, leading the name so
   the states read down one column. The badge stays inline so the name keeps
   its own ellipsis. */
.ipo-row-b { margin-right: 7px; vertical-align: 1px; }

/* A box to find one issue by name. Thirty-odd of them is enough to need
   it, and the chips narrow by kind - there is no chip for "the one I read
   about this morning". */
.ipo-search-wrap { display: inline-flex; }
.ipo-search {
  width: 190px; padding: 6px 12px; border-radius: var(--radius-full);
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
  font-size: var(--fs-2xs); outline: none;
}
.ipo-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,200,87,.12); }
.ipo-search::-webkit-search-cancel-button { display: none; }
@media (max-width: 720px) { .ipo-search { width: 100%; } .ipo-search-wrap { flex: 1 1 100%; } }

.ipo-f-clear {
  border: 1px solid var(--down); color: var(--down); background: none;
  border-radius: var(--radius-full); padding: 7px 14px; font-size: var(--fs-2xs);
  font-weight: 700; cursor: pointer; min-height: 36px;
}
.ipo-f-clear:hover { background: var(--down-bg); }

/* --- the screener as a page of screens ------------------------------------- */
.scn-head { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 var(--s-4); }
.scn-head h2 { margin: 0; font-family: var(--display); font-size: var(--fs-2xl); letter-spacing: -.01em; }
.scn-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-4); align-items: start; }
.scn-block { margin-bottom: var(--s-4); }
.scn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); }
/* One screen, one card: its name, what it asks, and nothing else. */
.scn-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 13px 15px; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  font-family: var(--sans); color: var(--text);
}
.scn-card:hover { border-color: var(--accent); background: var(--surface-2); }
.scn-name {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 650; font-size: var(--fs-sm);
}
.scn-go { color: var(--accent); font-style: normal; font-weight: 700; }
.scn-desc {
  font-size: var(--fs-2xs); color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.scn-mine { padding: 0; }
.scn-mine .scn-run {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  width: 100%; padding: 13px 34px 13px 15px; background: none; border: 0;
  text-align: left; cursor: pointer; color: var(--text); font-family: var(--sans);
}
.scn-del {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  display: grid; place-items: center; background: none; border: 0;
  color: var(--dim); font-size: 12px; cursor: pointer; border-radius: var(--radius-sm);
}
.scn-del:hover { color: var(--down); background: var(--down-bg); }
.scn-none { margin: 0; font-size: var(--fs-xs); line-height: 1.6; }
.scn-secs { display: flex; flex-wrap: wrap; gap: 7px; }
.scn-rail { position: sticky; top: calc(var(--topbar-h) + 56px); }

/* The query box and its worked example, side by side. */
.scn-build { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-4); }
.scn-q-l { display: block; font-size: var(--fs-2xs); font-weight: 650; color: var(--muted); margin-bottom: 6px; }
.scn-q {
  width: 100%; resize: vertical; min-height: 130px;
  font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.6;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 12px 14px;
}
.scn-q:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.scn-q-note { min-height: 20px; margin-top: 7px; font-size: var(--fs-2xs); color: var(--muted); }
.scn-q-note.bad { color: var(--down); }
.scn-build-act { display: flex; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }
.scn-example {
  padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: var(--fs-xs); line-height: 1.6;
}
.scn-example h4 { margin: 0 0 6px; font-size: var(--fs-sm); font-family: var(--display); }
.scn-example p { margin: 0 0 8px; }
.scn-backlink {
  margin-top: var(--s-4); background: none; border: 0; color: var(--accent);
  font-size: var(--fs-xs); font-weight: 650; cursor: pointer; padding: 4px 0;
}
/* Which grain the sector board is cut at, beside the period tabs. */
.sp-grain { display: inline-flex; gap: 2px; margin-right: 10px; padding-right: 10px;
  border-right: 1px solid var(--border); }
.sp-g { padding: 5px 11px; background: none; border: 1px solid transparent;
  border-radius: var(--radius-full); color: var(--muted);
  font-size: var(--fs-3xs); font-weight: 700; cursor: pointer; white-space: nowrap; }
.sp-g:hover { color: var(--text); }
.sp-g.on { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); }

/* A table of contents for a page of five boards, sticky under the tabs so
   it is reachable from anywhere on it. */
.bm-jump {
  /* Under the app's own bar, not behind it. top:0 put it beneath the tabs
     and the first button was unclickable. */
  position: sticky; top: var(--pinned-h); z-index: 20;
  display: flex; gap: 2px; overflow-x: auto; margin-bottom: var(--s-4);
  padding: 9px var(--s-4); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  scrollbar-width: none;
}
.bm-jump::-webkit-scrollbar { display: none; }
.bm-j {
  padding: 7px 12px; background: none; border: 1px solid var(--border);
  border-radius: var(--radius-full); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 650; white-space: nowrap; cursor: pointer;
}
.bm-j:hover { color: var(--text); background: var(--surface-2); }
.bm-j.on { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); }

/* The gallery: every operator and every ratio a query can reach, to click
   rather than to remember. Operators first - eight characters nobody should
   have to recall the spelling of - then the catalogue behind tabs, with a
   search across all of it for when the tabs are the slower way. */
.scn-gallery { margin-top: var(--s-4); border-top: 1px solid var(--border); padding-top: var(--s-4); }
.scn-g-head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.scn-g-head h4 { margin: 0; font-family: var(--display); font-size: var(--fs-md); }
.scn-g-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.scn-op {
  min-width: 38px; padding: 6px 10px; border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2);
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 700; cursor: pointer;
}
.scn-op:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-3); }
.scn-g-tabs {
  display: flex; gap: 2px; margin-top: var(--s-3); overflow-x: auto;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.scn-g-tab {
  padding: 8px 14px; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font-size: var(--fs-2xs); font-weight: 650; cursor: pointer;
  white-space: nowrap;
}
.scn-g-tab:hover { color: var(--text); }
.scn-g-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.scn-g-find { display: flex; align-items: center; gap: 10px; margin: var(--s-3) 0; }
.scn-g-find-l { font-size: var(--fs-2xs); color: var(--muted); }
.scn-g-search {
  flex: 0 1 280px; padding: 7px 11px; border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text);
  font-size: var(--fs-2xs);
}
.scn-g-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.scn-g-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px; max-height: 340px; overflow-y: auto; padding-right: 4px;
}
.scn-g-none { font-size: var(--fs-2xs); }
.scn-ratio {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 8px 11px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left; cursor: pointer; color: var(--text-2); font-size: var(--fs-2xs);
}
.scn-ratio:hover { background: var(--surface-3); border-color: var(--accent); color: var(--text); }
.scn-r-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scn-r-id { color: var(--dim); font-size: var(--fs-3xs); flex: none; }

/* Paging under the table: which page, and how many to a page. */
.scn-pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  flex-wrap: wrap; padding: var(--s-3) var(--s-4) 0;
}
.pg-pages { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.pg-n, .pg-next, .pg-nn {
  min-width: 34px; padding: 6px 10px; background: none; border: 1px solid transparent;
  border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--fs-2xs);
  font-weight: 650; cursor: pointer;
}
.pg-n:hover, .pg-next:hover:not(:disabled), .pg-nn:hover { background: var(--surface-2); color: var(--text); }
.pg-n.on, .pg-nn.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.pg-next:disabled { opacity: .35; cursor: default; }
.pg-gap { padding: 0 4px; color: var(--dim); }
.pg-per { display: flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); }
.pg-per .dim { margin-right: 4px; }
@media (max-width: 720px) {
  .scn-pager { justify-content: center; }
  .scn-g-list { grid-template-columns: 1fr; max-height: 260px; }
}
/* The query the table answers, readable over it. */
.scn-reading { display: block; padding: 8px var(--s-4) 0; font-size: var(--fs-2xs); color: var(--text-2); }
code.scn-reading { color: var(--accent); }
.card-foot { padding: 8px var(--s-4) 12px; }
@media (max-width: 900px) {
  .scn-cols { grid-template-columns: minmax(0, 1fr); }
  .scn-rail { position: static; }
  .scn-build { grid-template-columns: minmax(0, 1fr); }
}

/* ---- IPOs as a list of lines, opened for the rest ---- */
/* Ten columns a reader can run an eye down. The row is the button; the panel
   below it is what they came for once they have chosen one. */
.ipo-table { display: flex; flex-direction: column; }
/* Every column shares the slack rather than it all landing on the company
   name: at 2.2fr against ten fixed widths the name cell took every spare
   pixel and the row read as a name, a gulf, then a huddle of figures. */
.ipo-line-row {
  display: grid;
  grid-template-columns:
    minmax(170px, 2.1fr) minmax(84px, .85fr) minmax(86px, .85fr) minmax(58px, .72fr)
    minmax(66px, .72fr) minmax(80px, .8fr) minmax(72px, .72fr)
    minmax(76px, .8fr) minmax(76px, .8fr) minmax(84px, .85fr) minmax(56px, .46fr)
    minmax(60px, .5fr) 22px;
  align-items: center; gap: var(--s-2);
  padding: 9px var(--s-3); border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); cursor: pointer; background: none; border-radius: var(--radius-sm);
}
.ipo-line-row:hover { background: var(--surface-2); }
.ipo-line-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ipo-head-row {
  cursor: default; background: none; border-bottom: 1px solid var(--border-2);
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); font-weight: 700; padding-bottom: 6px;
}
.ipo-head-row:hover { background: none; }
.ipo-h-band, .ipo-h-size, .ipo-h-lot, .ipo-h-gmp, .ipo-h-est, .ipo-h-lists,
.ipo-h-subs { text-align: right; }
.ipo-c-lists { text-align: right; }
.ipo-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipo-c.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A date is a figure too. Every other cell on these rows is set in the mono
   face with tabular numerals; the dates were inheriting the sans one, so the
   four date columns read as a different kind of thing from the figures they
   sit beside, and the day numbers did not line up down the column. */
.ipo-day { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* The premium and the gain it implies are two readings, not one number split
   in half - so they sit in their own band, away from the lot size on one side
   and the dates on the other. */
.ipo-c-gmp { padding-left: var(--s-3); border-left: 1px solid var(--border); }
.ipo-c-est { padding-right: var(--s-3); border-right: 1px solid var(--border); }
.ipo-h-gmp { padding-left: var(--s-3); }
.ipo-h-est { padding-right: var(--s-3); }

/* A score out of five, drawn rather than printed: in a row of rupees and
   percentages a bare "3" reads as one more quantity. */
.ipo-rate { letter-spacing: .5px; font-size: 12px; line-height: 1; color: var(--accent); white-space: nowrap; }
.ipo-rate i { color: var(--border-2); font-style: normal; }
.ipo-rate.r1, .ipo-rate.r2 { color: var(--muted); }
.ipo-listed-row > .ipo-c:nth-child(4) { padding-left: var(--s-3); border-left: 1px solid var(--border); }
.ipo-listed-row > .ipo-c:nth-child(5) { padding-right: var(--s-3); border-right: 1px solid var(--border); }
.ipo-head-row.ipo-listed-row > .ipo-h:nth-child(4) { padding-left: var(--s-3); }
.ipo-head-row.ipo-listed-row > .ipo-h:nth-child(5) { padding-right: var(--s-3); }

/* Recently listed: the same spaced line, its own columns. It was a table of
   twelve, which read as a wall; these are the same figures with room around
   them, and the pairs that belong together in one cell. */
.ipo-listed-row {
  grid-template-columns:
    minmax(150px, 2.1fr) 86px 64px 88px 92px 92px 72px 74px 60px 132px 22px;
}
.ipo-listed-row > .ipo-h:nth-child(3),
.ipo-listed-row > .ipo-h:nth-child(4),
.ipo-listed-row > .ipo-h:nth-child(5),
.ipo-listed-row > .ipo-h:nth-child(6),
.ipo-listed-row > .ipo-h:nth-child(7) { text-align: right; }
.ipo-listed-row > .ipo-h:nth-child(2),
.ipo-listed-row > .ipo-h:nth-child(10) { text-align: left; }

/* What the grey market was saying, day by day. */
.gmp-history { font-size: var(--fs-xs); }
.gmp-thin { margin: 0; font-size: var(--fs-2xs); line-height: 1.5; }

/* The two numbers people came for, before the shape behind them. */
.gmp-now { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-3); }
.gmp-fig { display: flex; flex-direction: column; gap: 3px; }
.gf-k { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .07em; color: var(--dim); }
.gf-v { font-family: var(--mono); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.gf-trend { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.gmp-fig-end { text-align: right; }
.gmp-pill {
  font-size: var(--fs-2xs); font-weight: 600; border-radius: var(--radius-full);
  padding: 4px 10px; margin-bottom: 3px;
  background: var(--surface-2); border: 1px solid var(--border-2);
}
.gmp-pill.up { color: var(--up); background: var(--up-bg); border-color: var(--up-border); }
.gmp-pill.down { color: var(--down); background: var(--down-bg); border-color: var(--down-border); }

/* The premium's path. Zero is always on it - that line is the issue price, and
   a chart that crops it flatters a premium that has gone. */
.gmp-plot { position: relative; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px 22px; margin-bottom: var(--s-3); }
.gmp-chart { display: block; width: 100%; height: 132px; }
.gmp-zero { stroke: var(--border-2); }
.gmp-head-dot { stroke: var(--bg-sunken); stroke-width: 2; }
.gmp-zero-label { position: absolute; left: 14px; top: 8px; font-size: var(--fs-3xs); color: var(--dim); pointer-events: none; }
.gmp-axis { position: absolute; left: 12px; right: 12px; bottom: 6px; display: flex; justify-content: space-between; font-size: var(--fs-3xs); color: var(--dim); }

/* Reading one day off it. The hit targets are the chart's only interactive
   parts, so they are real buttons - a keyboard walks the days the mouse can. */
.gmp-hits { position: absolute; left: 12px; right: 12px; top: 10px; bottom: 22px; }
.gmp-hit {
  position: absolute; top: 0; bottom: 0; width: 34px; transform: translateX(-50%);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.gmp-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.gmp-cross {
  position: absolute; top: 10px; bottom: 22px; width: 1px;
  background: var(--border-2); pointer-events: none;
}
.gmp-mark {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text); border: 2px solid var(--bg-sunken);
  transform: translate(-50%, -50%); margin-top: 10px; pointer-events: none;
}
.gmp-tip {
  position: absolute; top: 4px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 1px; white-space: nowrap;
  background: var(--surface-3); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); padding: 6px 9px;
  box-shadow: var(--shadow); pointer-events: none; z-index: 2;
}
.gmp-tip.at-start { transform: none; }
.gmp-tip.at-end { transform: translateX(-100%); }
.gt-when { font-size: var(--fs-3xs); color: var(--dim); }
.gt-v { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 700; }
.gt-v i { font-style: normal; font-weight: 500; font-size: var(--fs-2xs); opacity: .85; }
.gt-k { font-size: var(--fs-3xs); color: var(--muted); }
.gmp-called {
  font-size: var(--fs-2xs); color: var(--muted);
  padding: 4px 8px; margin-bottom: 6px;
  background: var(--surface-2); border-radius: var(--radius-sm);
}
.gmp-note { font-size: var(--fs-3xs); margin-top: 8px; line-height: 1.5; }
.ipo-co { display: flex; flex-direction: column; gap: 3px; }
.ipo-name-cell { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipo-tags { display: flex; align-items: center; gap: 5px; }
.ipo-when-pill { font-size: var(--fs-3xs); color: var(--muted); }
.ipo-when-pill.up { color: var(--up); font-weight: 650; }
.ipo-sub { display: block; font-style: normal; font-size: var(--fs-3xs); color: var(--dim); }
.ipo-expected i { color: var(--dim); font-style: normal; }
.ipo-chev { color: var(--dim); text-align: center; }
.ipo-line.open .ipo-line-row { background: var(--surface-2); border-bottom-color: transparent; }
.ipo-table-note { margin-top: var(--s-3); }

.ipo-panel { padding: var(--s-3) var(--s-4) var(--s-4); margin-bottom: var(--s-2);
  background: var(--surface-2); border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius); }
.ipo-panel-top { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-3); }
.ipo-score-chip { font-size: var(--fs-3xs); font-weight: 700; padding: 3px 9px;
  border-radius: var(--radius-full); background: var(--surface-3); color: var(--muted); }
/* The tiles were built for a card a third of the page wide; in a panel that
   spans it, they sit in one band instead of a tall stack. */
.ipo-panel .ipo-tiles { margin: var(--s-3) 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); }
.ipo-panel .ipo-tile { padding: var(--s-2) var(--s-3); }
.ipo-panel .it-v { font-size: var(--fs-md); }
.ipo-h.sortable { cursor: pointer; }
.ipo-h.sortable:hover { color: var(--text); }
.ipo-h.on { color: var(--accent); }

/* On a phone there is no room for ten columns, so the line becomes a small
   block: who and what the grey market says on the first row, everything else
   wrapping underneath with its own label. Flex, not grid areas - several cells
   sharing one grid area simply stack on top of each other. */
@media (max-width: 900px) {
  .ipo-line-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px;
    padding: 10px var(--s-3);
  }
  /* After the flex rule, and with both classes, or the two fight and the
     column headings reappear as a wall of words. */
  .ipo-line-row.ipo-head-row { display: none; }
  /* A full-width break between the headline and the details, so the first
     date never creeps up beside the company name. */
  .ipo-line-row::after { content: ''; flex-basis: 100%; height: 0; order: 4; }
  .ipo-c { overflow: visible; white-space: normal; }
  .ipo-c.ipo-co { flex: 1 1 55%; order: 1; }
  /* The premium pair leads the line on a phone. The listed row means other
     things in the same places, so it keeps its own rules below; the open
     row's are by name now and no longer shift when a column is added. */
  .ipo-c-gmp, .ipo-c-est { order: 2; flex: 0 0 auto; font-weight: 650; }
  .ipo-c-gmp { margin-left: auto; }
  .ipo-listed-row > .ipo-c:nth-child(4),
  .ipo-listed-row > .ipo-c:nth-child(5) { order: 2; flex: 0 0 auto; font-weight: 650; }
  .ipo-listed-row > .ipo-c:nth-child(4) { margin-left: auto; }
  .ipo-chev { order: 3; flex: 0 0 14px; }
  /* band, size, lot, rating, the four dates and the subscription wrap as one
     sentence under the headline */
  .ipo-c-band, .ipo-c-size, .ipo-c-lot, .ipo-c-rating,
  .ipo-c-opens, .ipo-c-closes, .ipo-c-allot, .ipo-c-lists, .ipo-c-subs,
  .ipo-listed-row > .ipo-c:nth-child(2),
  .ipo-listed-row > .ipo-c:nth-child(3),
  .ipo-listed-row > .ipo-c:nth-child(6),
  .ipo-listed-row > .ipo-c:nth-child(7),
  .ipo-listed-row > .ipo-c:nth-child(8),
  .ipo-listed-row > .ipo-c:nth-child(9),
  .ipo-listed-row > .ipo-c:nth-child(10) {
    order: 5; flex: 0 0 auto; text-align: left;
    font-size: var(--fs-3xs); color: var(--muted);
  }
  .ipo-c-band::before { content: 'Band '; color: var(--dim); }
  .ipo-c-size::before { content: 'Size '; color: var(--dim); }
  .ipo-c-lot::before { content: 'Lot '; color: var(--dim); }
  .ipo-c-rating::before { content: 'Rated '; color: var(--dim); }
  .ipo-c-opens::before { content: 'Opens '; color: var(--dim); }
  .ipo-c-closes::before { content: 'Closes '; color: var(--dim); }
  .ipo-c-allot::before { content: 'Allotment '; color: var(--dim); }
  .ipo-c-lists::before { content: 'Lists '; color: var(--dim); }
  .ipo-c-subs::before { content: 'Subscribed '; color: var(--dim); }
  /* The listed line means different things in the same positions, so its
     labels are its own - otherwise a listing date is announced as a price
     band. */
  .ipo-listed-row > .ipo-c:nth-child(2)::before { content: 'Listed '; color: var(--dim); }
  .ipo-listed-row > .ipo-c:nth-child(3)::before { content: 'Issue '; color: var(--dim); }
  .ipo-listed-row > .ipo-c:nth-child(6)::before { content: 'Fair '; color: var(--dim); }
  .ipo-listed-row > .ipo-c:nth-child(7)::before { content: 'vs NIFTY '; color: var(--dim); }
  .ipo-listed-row > .ipo-c:nth-child(8)::before { content: ''; }
  .ipo-listed-row > .ipo-c:nth-child(9)::before { content: 'Filings '; color: var(--dim); }
  .ipo-listed-row > .ipo-c:nth-child(10)::before { content: ''; }
  .ipo-listed-row > .ipo-c:nth-child(10) { order: 5; flex: 0 0 auto; }
  /* The chart earns its space on a phone too - it is the one thing a column of
     numbers cannot say - but at a height a thumb can scroll past. */
  .gmp-chart { height: 96px; }
  .gmp-hit { width: 44px; }
  .gmp-now { gap: var(--s-2) var(--s-4); }
  .gf-v { font-size: var(--fs-xl); }
  .gmp-fig-end { text-align: left; }
  .gmp-now > .spacer { display: none; }
  .ipo-sub { display: inline; }
  .ipo-sub::before { content: ' ('; }
  .ipo-sub::after { content: ')'; }
  .ipo-panel { padding: var(--s-3); }
}

/* ---- what the prospectus says about the company ---- */
.ipo-about { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-4);
  margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); }
.ipo-about-block { min-width: 0; }
.ipo-objects { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.ipo-objects li { font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.ipo-peers { display: flex; flex-wrap: wrap; gap: 5px; }
.ipo-headcount { margin-top: var(--s-3); }
.ipo-about > .co-note { grid-column: 1 / -1; margin: 0; }
.ipo-stages { margin-bottom: var(--s-3); }
.ipo-stages .chip[disabled] { opacity: .4; cursor: default; }
@media (max-width: 760px) { .ipo-about { grid-template-columns: 1fr; gap: var(--s-3); } }

/* ---- the grey-market premium, as a headline ---- */
.gmp-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-3);
  align-items: center; padding: var(--s-3) var(--s-4); margin: var(--s-3) 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.gmp-hero.up { border-color: rgba(5,150,105,.35); background: linear-gradient(90deg, rgba(5,150,105,.14), var(--surface-2) 62%); }
.gmp-hero.down { border-color: rgba(225,29,72,.35); background: linear-gradient(90deg, rgba(225,29,72,.14), var(--surface-2) 62%); }
.gmp-hero.none { display: flex; align-items: baseline; gap: var(--s-2); }
.gmp-k { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .07em; color: var(--dim); font-weight: 700; }
.gmp-wait { font-size: var(--fs-xs); color: var(--muted); }
.gmp-gain { font-size: var(--fs-2xl); font-weight: 780; line-height: 1.1; letter-spacing: -.02em; }
.gmp-hero.up .gmp-gain { color: var(--up); }
.gmp-hero.down .gmp-gain { color: var(--down); }
.gmp-fill { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.gmp-fill i { display: block; height: 100%; background: var(--dim); }
.gmp-hero.up .gmp-fill i { background: var(--up); }
.gmp-hero.down .gmp-fill i { background: var(--down); }
.gmp-side { display: flex; flex-direction: column; gap: 3px; }
.gmp-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  font-size: var(--fs-2xs); }
.gmp-sk { color: var(--dim); }

/* ---- every open issue, ranked by what the grey market expects ---- */
.gmp-board { padding: var(--s-3) var(--s-4) var(--s-4); margin-bottom: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.gmp-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  margin-bottom: var(--s-2); font-size: var(--fs-xs); }
.gmp-board-head .why-title { margin: 0; }
.gmp-brow { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(0, 2fr) 62px;
  align-items: center; gap: var(--s-3); width: 100%; padding: 4px 0; background: none; border: 0;
  color: var(--text); font-size: var(--fs-xs); cursor: pointer; text-align: left; }
.gmp-brow:hover .gb-name { color: var(--accent); }
.gb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-track { height: 9px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.gb-track i { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--dim); }
.gmp-brow.up .gb-track i { background: var(--up); }
.gmp-brow.down .gb-track i { background: var(--down); }
.gb-val { text-align: right; font-weight: 700; }
.gmp-brow.up .gb-val { color: var(--up); }
.gmp-brow.down .gb-val { color: var(--down); }

@media (max-width: 720px) {
  .gmp-hero { grid-template-columns: 1fr; }
  .gmp-brow { grid-template-columns: minmax(80px, 1fr) minmax(0, 1.6fr) 54px; }
}

/* ---- the day in one strip, above the index board ---- */
.idx-pulse { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .9fr);
  gap: var(--s-3); margin-bottom: var(--s-4); }
.idx-pulse > div { padding: var(--s-3) var(--s-4); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.ip-k { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); font-weight: 700; margin-bottom: 6px; }
.ip-head { position: relative; }
.ip-head.up { border-left: 3px solid var(--up); }
.ip-head.down { border-left: 3px solid var(--down); }
.ip-price { font-size: var(--fs-2xl); font-weight: 750; line-height: 1.1; letter-spacing: -.01em; }
.ip-chg { font-size: var(--fs-sm); font-weight: 650; }
.ip-pts { color: var(--dim); font-weight: 500; }
.ip-head .spark { margin-top: 4px; opacity: .9; }
.ip-bar { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.ip-bar i { display: block; height: 100%; }
.ip-bar i.up { background: var(--up); }
.ip-bar i.down { background: var(--down); }
.ip-breadth-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  margin-top: 7px; font-size: var(--fs-xs); }
.ip-mood { color: var(--muted); font-size: var(--fs-2xs); text-align: center; flex: 1; }
.ip-movers { display: flex; flex-direction: column; }
.ip-mover { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  background: none; border: 0; padding: 3px 0; color: var(--text); cursor: pointer;
  font-size: var(--fs-xs); text-align: left; }
.ip-mover:hover .ip-mname { color: var(--accent); }
.ip-mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1100px) { .idx-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .idx-pulse { grid-template-columns: 1fr; } }

/* ---- how much can go wrong, on every setup ---- */
/* Four steps, named and dotted. The colour repeats what the words say, so it
   is never the only thing carrying the meaning. */
.risk-line { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: 7px var(--s-4); border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: var(--fs-2xs); }
.risk-dots { display: inline-flex; gap: 3px; }
.risk-dots i { width: 14px; height: 4px; border-radius: 2px; background: var(--surface-3); }
.risk-label { font-weight: 700; letter-spacing: .01em; }
.risk-why { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.risk-low .risk-dots i.on, .chip.risk-low.on { background: var(--up); }
.risk-low .risk-label { color: var(--up); }
.risk-medium .risk-dots i.on, .chip.risk-medium.on { background: var(--accent); }
.risk-medium .risk-label { color: var(--accent); }
.risk-high .risk-dots i.on, .chip.risk-high.on { background: #e08b3a; }
.risk-high .risk-label { color: #e08b3a; }
.risk-extreme .risk-dots i.on, .chip.risk-extreme.on { background: var(--down); }
.risk-extreme .risk-label { color: var(--down); }
[data-theme="light"] .risk-high .risk-label, [data-theme="light"] .risk-high .risk-dots i.on { color: #a55c10; background-color: #a55c10; }
[data-theme="light"] .risk-high .risk-label { background: none; }
.opp-risk-bar { margin-bottom: var(--s-3); }
.opp-sort-bar { margin-bottom: var(--s-2); }
.opp-risk-lead { font-size: var(--fs-xs); font-weight: 600; margin-right: 2px; }
/* Which way the chosen sort runs, on the chip itself: a separate control for
   the direction is one more thing to find, and this one is already under the
   thumb. */
.chip-dir { margin-left: 4px; font-size: var(--fs-3xs); opacity: .85; }
.opp-more { display: flex; align-items: center; gap: var(--s-3); justify-content: center;
  margin-top: var(--s-4); font-size: var(--fs-xs); }

/* ---- signing in without a password ---- */
.auth-other { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
  margin-top: var(--s-3); }
.auth-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer;
  font-size: var(--fs-xs); font-family: inherit; }
.auth-link:hover { text-decoration: underline; }
.auth-card .auth-link { display: block; margin: var(--s-3) auto 0; }
.auth-note { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; margin: var(--s-2) 0 0; }
.auth-step2 { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.auth-code { font-family: var(--mono); font-size: var(--fs-lg); letter-spacing: .32em;
  text-align: center; }

/* ---- the screener's front door ---- */
/* Seventeen chips and four sliders answer questions, but only for someone who
   already knows which to ask. A row of screens worth running, and the current
   one read back as a sentence, give the tab a way in. */
.sc-front { padding: var(--s-3) var(--s-4) 0; }
.sc-screens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-lead { font-size: var(--fs-xs); font-weight: 600; margin-right: 2px; }
.sc-save { border-style: dashed; }
.saved-screen { display: inline-flex; align-items: center; gap: 4px; padding-right: 6px; }
.saved-screen .ss-run { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.saved-screen .ss-forget { background: none; border: 0; color: var(--dim); cursor: pointer;
  padding: 0 2px; line-height: 1; }
.saved-screen .ss-forget:hover { color: var(--down); }
.sc-sentence { margin: var(--s-3) 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.sc-sentence b { color: var(--text); font-weight: 650; }
.sc-active-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: var(--s-2) 0 var(--s-3); font-size: var(--fs-xs); }
.sc-active { padding-right: 6px; }
.sc-x { margin-left: 5px; color: var(--dim); }
.sc-active:hover .sc-x { color: var(--down); }
.sc-clear { border-style: dashed; color: var(--muted); }

/* ===================== columns & custom metrics ===================== */
.metrics-card { width: min(780px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.metrics-card .card-body { overflow: auto; }
.mx-hint { font-size: var(--fs-xs); margin: 0 0 var(--s-3); line-height: 1.55; }
.mx-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto; gap: var(--s-2); }
.mx-form .auth-input { margin: 0; }
.mono, .mx-form .mono { font-family: var(--mono); font-size: var(--fs-xs); }
.mx-unit { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 0 var(--s-2); font-size: var(--fs-xs); }
.mx-err { margin: var(--s-2) 0 0; }
.mx-examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--s-3);
  font-size: var(--fs-xs); }
.mx-active { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: var(--fs-xs); }
.mx-active code { font-family: var(--mono); color: var(--accent); }

.mx-groups { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.mx-rows { display: grid; gap: 4px; }
.mx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-2);
  padding: 4px 6px; border-radius: var(--radius-sm); }
.mx-row:hover { background: var(--surface-2); }
.mx-row.on { background: var(--surface-2); }
.mx-pick { display: flex; align-items: center; gap: var(--s-2); background: none; border: 0; padding: 0;
  color: var(--muted); font-size: var(--fs-xs); cursor: pointer; text-align: left; min-width: 0; }
.mx-row.on .mx-pick { color: var(--text); font-weight: 600; }
.mx-tick { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; font-size: 10px;
  border: 1px solid var(--border-2); border-radius: 4px; color: var(--accent); }
.mx-row.on .mx-tick { border-color: var(--accent); }
.mx-id { font-family: var(--mono); font-size: var(--fs-3xs); color: var(--dim); }
.mx-bound-wrap { display: inline-flex; gap: 4px; }
.mx-bound { width: 62px; background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-3xs); padding: 3px 5px;
  font-family: var(--mono); }
.mx-bound:focus { outline: 1px solid var(--accent); }
#screener-table th.mx-col { white-space: nowrap; }
.modal-foot { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border); background: var(--surface-2); }

@media (max-width: 720px) {
  .mx-form { grid-template-columns: 1fr 1fr; }
  .mx-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mx-id { display: none; }
}

/* ---- where a company stands in its sector ---- */
.co-standing { margin: var(--s-4) 0 var(--s-2); padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.cs-head { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-3); flex-wrap: wrap; }
.cs-rank { font-size: var(--fs-xl); font-weight: 750; font-family: var(--mono); color: var(--accent); }
.cs-of { font-size: var(--fs-xs); color: var(--muted); }
.cs-bars { display: flex; flex-direction: column; gap: 6px; }
.cs-row { display: grid; grid-template-columns: minmax(84px, 130px) minmax(0, 1fr) 52px;
  align-items: center; gap: var(--s-2); font-size: var(--fs-xs); }
.cs-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-row.me .cs-name { color: var(--text); font-weight: 650; }
.cs-track { height: 10px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.cs-track i { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--dim); }
.cs-row.me .cs-track i { background: var(--accent); }
.cs-val { text-align: right; color: var(--muted); }
.cs-row.me .cs-val { color: var(--text); font-weight: 650; }
.cs-note { margin-top: var(--s-3); }
@media (max-width: 720px) { .cs-row { grid-template-columns: 84px minmax(0, 1fr) 46px; } }

/* ===================== news: the press ===================== */
/* A reading layout, not a table: one lead story with the publisher's picture,
   three beside it, the rest in a grid. The whole card is the link. */
.ns-wrap { display: flex; flex-direction: column; gap: var(--s-4); }
.ns-lead { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-3); }
/* Equal rows, so the three beside the lead fill its height rather than
   leaving a hole under the third. */
.ns-beside { display: grid; grid-auto-rows: 1fr; gap: var(--s-3); min-width: 0; }
.ns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }

.ns-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--card-sheen), var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--card-edge), var(--shadow-sm);
  color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ns-card:hover { border-color: var(--border-2); box-shadow: var(--card-edge), var(--shadow); transform: translateY(-1px); }
.ns-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ns-shot { display: block; background: var(--surface-3); overflow: hidden; }
.ns-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ns-card .ns-shot { aspect-ratio: 16 / 9; }
.ns-card.lead .ns-shot { aspect-ratio: 16 / 7.4; max-height: 330px; }
/* The three beside the lead read as a list, so their picture sits alongside. */
.ns-beside .ns-card { flex-direction: row; align-items: stretch; }
.ns-beside .ns-shot { aspect-ratio: auto; width: 104px; flex: 0 0 104px; }

.ns-body { display: flex; flex-direction: column; gap: 7px; padding: var(--s-3) var(--s-4) var(--s-4); min-width: 0; }
.ns-beside .ns-body { padding: var(--s-3); gap: 5px; }
.ns-top { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ns-when { font-size: var(--fs-3xs); color: var(--dim); font-family: var(--mono); margin-left: auto; }
.ns-title {
  margin: 0; font-weight: 680; line-height: 1.34; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
h3.ns-title { font-size: var(--fs-xl); -webkit-line-clamp: 3; letter-spacing: -.01em; }
h4.ns-title { font-size: var(--fs-md); -webkit-line-clamp: 3; }
.ns-beside h4.ns-title { font-size: var(--fs-sm); -webkit-line-clamp: 3; }
.ns-sum {
  margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* A card with no picture would otherwise strand its text at the top of a
   stretched row. Browsers without :has() simply keep the old look. */
.ns-beside .ns-card:not(:has(.ns-shot)) .ns-body { justify-content: center; }
.ns-src { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 2px;
  font-size: var(--fs-3xs); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ns-arrow { opacity: .6; }
.ns-card:hover .ns-src { color: var(--muted); }

@media (max-width: 860px) {
  .ns-lead { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ns-grid { grid-template-columns: 1fr; }
  .ns-beside .ns-shot { width: 88px; flex-basis: 88px; }
  h3.ns-title { font-size: var(--fs-lg); }
}

/* ===================== fundamental scorecard ===================== */
#fund-grid { align-items: start; }
/* The whole judgement in about four lines: a silhouette, four adjectives, and
   the two measures this company is genuinely unlike its peers on. Nothing here
   appears anywhere else on the page - repeating the header's figures was most
   of what made this section long. */
.sc-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--card-edge);
}
/* Big enough to carry its own labels - a 74px diamond could only ever be a
   silhouette, and an unlabelled shape is a decoration. */
.sc-shape { width: 148px; height: 148px; flex: none; }
.sc-shape-frame { stroke: var(--border-2); stroke-width: 1; }
/* The web behind the shape: there to be read past, not at. */
.sc-web { stroke: var(--border); stroke-width: 1; fill: none; }
/* Halfway. Inside it is below the middle of the scale, outside it above. */
.sc-web-mid { stroke: var(--border-2); stroke-dasharray: 2.5 2.5; }
.sc-web-dot { stroke: var(--surface); stroke-width: 1.5; }
.sc-web-dot.good { fill: var(--up); }
.sc-web-dot.fair { fill: var(--warn); }
.sc-web-dot.weak { fill: var(--down); }
.sc-web-dot.none { fill: var(--dim); }
.sc-web-label {
  font-family: var(--sans); font-size: 11px; font-weight: 650;
  fill: var(--muted); letter-spacing: .02em;
}
.sc-shape-body { stroke-width: 2; stroke-linejoin: round; }
.sc-shape-body.good { fill: var(--up-bg); stroke: var(--up); }
.sc-shape-body.fair { fill: var(--warn-bg); stroke: var(--warn); }
.sc-shape-body.weak { fill: var(--down-bg); stroke: var(--down); }
/* The one corner that is pulling the shape in. */
.sc-shape-sore { fill: var(--down); stroke: var(--surface); stroke-width: 1.5; }
.sc-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.sc-card-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sc-card-top .grade-badge {
  width: 34px; height: 34px; font-size: var(--fs-lg); flex: none; cursor: help;
}
/* "Cheap" lands where 5.66 needs a sector to mean anything. */
.sc-adj {
  font-size: var(--fs-2xs); font-weight: 600; border-radius: var(--radius-full);
  padding: 5px 11px; border: 1px solid var(--border-2); color: var(--text-2);
  background: var(--surface-2);
}
.sc-adj.good { color: var(--up); background: var(--up-bg); border-color: var(--up-border); }
.sc-adj.fair { color: var(--warn); background: var(--warn-bg); border-color: rgba(255,176,32,.3); }
.sc-adj.weak { color: var(--down); background: var(--down-bg); border-color: var(--down-border); }
.sc-xs { display: flex; flex-direction: column; gap: 5px; }
.sc-x { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-xs); }
.sc-x-k {
  flex: none; width: 42px; font-size: var(--fs-3xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.sc-x-k.good { color: var(--up); }
.sc-x-k.weak { color: var(--down); }
.sc-x-v { color: var(--text-2); }
.sc-x-note { font-size: var(--fs-3xs); margin-top: 1px; }
/* Everything that used to be the page, behind one word. */
.sc-open {
  margin-top: var(--s-3); font-family: var(--sans); font-size: var(--fs-2xs);
  font-weight: 650; color: var(--muted); background: none;
  border: 1px solid var(--border-2); border-radius: var(--radius-full);
  padding: 6px 13px; cursor: pointer; min-height: 30px;
}
.sc-open:hover { color: var(--text); border-color: var(--muted); }
@media (max-width: 560px) {
  .sc-card { align-items: flex-start; gap: var(--s-3); }
  .sc-shape { width: 116px; height: 116px; }
}

/* Where it stands among the companies doing the same thing.

   A 22x P/E is dear for a steelmaker and cheap for a software house, so the
   number alone settles nothing. One axis per measure, the sector's middle
   marked on it, this company placed on the same axis: the distance between
   the two marks is the whole point. */
.vs { margin-top: var(--s-4); }
.vs-head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.vs-t {
  margin: 0; font-family: var(--display); font-size: var(--fs-lg);
  font-weight: 600; letter-spacing: -.01em;
}
.vs-n { font-size: var(--fs-2xs); }
.vs-say {
  margin: 6px 0 var(--s-4); font-size: var(--fs-sm); line-height: 1.6;
  color: var(--text-2); max-width: 68ch;
}
.vs-rows { display: flex; flex-direction: column; gap: var(--s-4); }
.vs-row {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) 168px;
  gap: var(--s-3); align-items: center;
}
.vs-k { font-size: var(--fs-xs); color: var(--text-2); }
.vs-track {
  position: relative; height: 6px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--border);
}
/* The sector's middle: a quiet tick, because it is the reference and not the
   reading. */
.vs-median {
  position: absolute; top: -4px; width: 1px; height: 12px;
  background: var(--muted); transform: translateX(-50%);
}
.vs-me {
  position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.vs-me.good { background: var(--up); }
.vs-me.weak { background: var(--down); }
.vs-ends {
  display: flex; justify-content: space-between; gap: var(--s-2);
  margin-top: 7px; font-size: var(--fs-3xs); color: var(--dim);
}
.vs-mid { color: var(--muted); }
.vs-v { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.vs-num { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }
.vs-num.good { color: var(--up); }
.vs-num.weak { color: var(--down); }
.vs-says { font-size: var(--fs-3xs); line-height: 1.4; }
.vs-note { font-size: var(--fs-3xs); line-height: 1.55; margin: var(--s-4) 0 0; }
@media (max-width: 720px) {
  /* Three columns will not fit a phone, so the measure and its reading share
     a line above the axis they describe. */
  .vs-row { grid-template-columns: 1fr auto; gap: 6px var(--s-2); }
  .vs-k { order: 1; }
  .vs-v { order: 2; flex-direction: row; align-items: baseline; gap: var(--s-2); }
  .vs-says { display: none; }
  .vs-scale { order: 3; grid-column: 1 / -1; }
  .vs-num { font-size: var(--fs-md); }
}

/* Four questions, answered in words.

   Three versions of this page drew the scoring system - rings of scores, bars
   of scores, chips reading "Excellent" beside a score. All accurate, all
   answering a question nobody asked. These are the questions people arrive
   with, so they are set as questions: asked in full, answered in a word, and
   backed by the company's own figures rather than by a number out of a
   hundred. The score survives only as the width of a hairline. */
/* Four questions, two by two. Stacked full-width they were four screens of
   headline type for four short answers, and the reader had to scroll past the
   whole thing to see whether anything was wrong. Two by two they are one
   glance, which is the same job the shape above them does. */
.sc-qs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3); margin-top: var(--s-4);
}
.sc-q {
  padding: var(--s-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.sc-q-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2); flex-wrap: wrap;
}
.sc-q-ask {
  margin: 0; font-family: var(--sans); font-size: var(--fs-2xs);
  font-weight: 650; letter-spacing: 0; color: var(--muted);
}
/* Still the loudest thing in the cell, because it is the answer - but a cell
   is not a page, so it is sized against the three words beside it. */
.sc-q-word {
  font-family: var(--display); font-size: var(--fs-md); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15;
}
.sc-q-word.good { color: var(--up); }
.sc-q-word.fair { color: var(--warn); }
.sc-q-word.weak { color: var(--down); }
.sc-q-line {
  height: 2px; border-radius: 2px; background: var(--surface-3);
  margin: var(--s-2) 0; overflow: hidden;
}
.sc-q-fill { display: block; height: 100%; border-radius: 2px; }
.sc-q-fill.good { background: var(--up); }
.sc-q-fill.fair { background: var(--warn); }
.sc-q-fill.weak { background: var(--down); }
.sc-q-why {
  margin: 0; font-size: var(--fs-3xs); line-height: 1.55; color: var(--text-2);
}
.sc-q.empty .sc-q-ask, .sc-q.empty .sc-q-why { color: var(--dim); }
.sc-q-more {
  margin-top: var(--s-3); font-family: var(--sans); font-size: var(--fs-3xs);
  font-weight: 650; color: var(--muted); background: none;
  border: 1px solid var(--border-2); border-radius: var(--radius-full);
  padding: 5px 11px; cursor: pointer; min-height: 28px;
}
.sc-q-more:hover { color: var(--text); border-color: var(--muted); }
.sc-q .sc-metrics { margin-top: var(--s-3); }
@media (max-width: 560px) {
  /* One column on a phone: two cells side by side would break every answer
     over three lines. */
  .sc-qs { grid-template-columns: minmax(0, 1fr); }
}

.sc-head { display: flex; gap: var(--s-4); align-items: flex-start; }
.sc-head .grade-badge { flex: none; cursor: help; }
.sc-head-text { flex: 1; min-width: 0; }
.sc-score { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.sc-score strong { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.sc-score > span:not(.sc-cov) { color: var(--dim); font-weight: 600; }
.sc-cov { margin-left: 10px; font-size: var(--fs-3xs); color: var(--dim); border: 1px solid var(--border); padding: 2px 8px;
  border-radius: var(--radius-full); cursor: help; }
.sc-summary { font-size: var(--fs-md, 15px); font-weight: 650; margin-top: 4px; }
.sc-verdict { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.sc-flags { margin-top: var(--s-4); padding: 10px 14px; border-radius: var(--radius); border: 1px solid rgba(255,200,87,.4);
  background: var(--accent-bg); font-size: var(--fs-xs); line-height: 1.55; }
.sc-flags-title { font-size: var(--fs-3xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 4px; }
.sc-flags ul { margin: 0; padding-left: 18px; }
.sc-flags li + li { margin-top: 3px; }
.sc-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
@media (max-width: 720px) {
  .sc-pillars { grid-template-columns: 1fr; }
  .sc-top { gap: var(--s-4); }
  .sc-rings-wrap { flex: 1 1 100%; justify-content: flex-start; }
  .sc-rings { width: 116px; height: 116px; }
  .sc-legend { flex: 1; }
}
.sc-pillar { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2);
  border-top: 3px solid var(--border-2); }
.sc-pillar.good { border-top-color: var(--up); }
.sc-pillar.fair { border-top-color: var(--warn, #f5a524); }
.sc-pillar.weak { border-top-color: var(--down); }
.sc-p-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sc-p-name { font-weight: 750; font-size: var(--fs-sm); }
.sc-p-score { margin-left: auto; font-family: var(--mono); font-weight: 800; font-size: var(--fs-lg); }
.sc-reading { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full); white-space: nowrap; }
.sc-reading.good { color: var(--up); background: var(--up-bg); }
.sc-reading.fair { color: var(--warn, #f5a524); background: rgba(245,165,36,.12); }
.sc-reading.weak { color: var(--down); background: var(--down-bg); }
.sc-fill.good { background: var(--up); } .sc-fill.fair { background: var(--warn, #f5a524); } .sc-fill.weak { background: var(--down); }
.sc-pillar .meter { margin-bottom: 6px; }
.sc-metric { padding: 9px 0 8px; border-top: 1px dashed var(--border); }
.sc-metric.tappable { cursor: pointer; }
.sc-metric.tappable:hover .sm-label { color: var(--text); }
.sm-top { display: flex; align-items: center; gap: 8px; }
.sm-label { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--text-2); }
.sm-i { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 6px; border-radius: 50%;
  border: 1px solid var(--border-2); font-size: 9px; font-weight: 800; font-style: italic; color: var(--dim); vertical-align: 1px; }
.sc-metric.open .sm-i { background: var(--accent); color: var(--accent-fg, #111); border-color: var(--accent); }
.sm-val { font-family: var(--mono); font-weight: 750; font-size: var(--fs-sm); }
.sc-metric .m-bar { height: 4px; border-radius: 2px; background: var(--border); margin-top: 6px; overflow: hidden; }
.sc-metric .m-bar i { display: block; height: 100%; border-radius: 2px; }
.sm-detail { margin-top: 5px; font-size: var(--fs-3xs); color: var(--muted); line-height: 1.5; }
.sm-more { margin-top: 6px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-3xs); line-height: 1.55; color: var(--text-2); }
.sm-good { margin-top: 4px; color: var(--accent); font-weight: 600; }
.sc-none { margin: 0; font-size: var(--fs-xs); }

/* announcements beside the scorecard */
.fn-head { margin-bottom: var(--s-2); }
.fn-note { font-size: var(--fs-2xs); line-height: 1.55; margin: var(--s-2) 0 0; }
.fn-list .news-item .n-title { font-size: var(--fs-sm); -webkit-line-clamp: 2; }
.fn-list .news-item .n-meta { margin: 0 0 4px; }
.fn-list .n-detail { font-size: var(--fs-2xs); color: var(--muted); line-height: 1.5; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fn-all { margin-top: var(--s-3); width: 100%; justify-content: center; color: var(--accent); }

@media (max-width: 720px) {
  .sc-pillars { grid-template-columns: 1fr; }
  .sc-head { gap: var(--s-3); }
  .sc-score strong { font-size: 24px; }
  .sc-cov { margin-left: 0; }
}

/* ===================== screener column help ===================== */
.col-tip { position: fixed; z-index: 90; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-3);
  border: 1px solid var(--border-2); box-shadow: 0 14px 34px -10px rgba(0,0,0,.6); font-size: var(--fs-xs);
  line-height: 1.5; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; pointer-events: none;
  text-transform: none; letter-spacing: 0; font-weight: 400; white-space: normal; text-align: left; }
.col-tip strong { color: var(--accent); font-size: var(--fs-sm); }
.col-tip em { color: var(--dim); font-size: var(--fs-3xs); font-style: normal; }
#screener-table .col-hover { background: rgba(255,200,87,.06) !important; }
#screener-table thead th.col-hover { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
#screener-table thead th { cursor: help; }
#screener-table thead th[data-sort] { cursor: pointer; }
.th-info { display: none; margin-left: 4px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-2);
  font-size: 9px; font-weight: 800; font-style: italic; color: var(--dim); background: none; padding: 0; line-height: 14px;
  vertical-align: 1px; }
@media (hover: none), (max-width: 720px) { .th-info { display: inline-block; } }

/* ===================== accounts ===================== */
.account-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; cursor: pointer;
  font-weight: 700; font-size: var(--fs-xs); white-space: nowrap; }
.account-btn.signed-out { padding: 7px 14px; border-radius: var(--radius-full); background: var(--accent); color: var(--accent-fg, #111); }
.account-btn.signed-out:hover { filter: brightness(1.07); }
.account-btn.signed-in { padding: 0; background: none; border-radius: 50%; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(135deg, #ffe29a, #e79b25); color: #1a1406; font-size: 14px; }
.avatar.big { width: 44px; height: 44px; font-size: 18px; flex: none; }
.account-btn.signed-in:hover .avatar { box-shadow: 0 0 0 3px rgba(255,200,87,.3); }

/* locked tabs: a small padlock beside the label */
.tab-lock { display: inline-flex; margin-left: 5px; opacity: .6; vertical-align: -1px; }
.tab-lock svg { width: 10px; height: 10px; display: block; }
#tabs-mobile button { position: relative; }
#tabs-mobile .tab-lock { position: absolute; top: 7px; left: calc(50% + 9px); margin: 0; }
#tabs-mobile .tab-lock svg { width: 9px; height: 9px; }

/* the sign-in / create-account card */
/* Back, for anyone who looks for it on the page rather than in the browser
   chrome. Hidden until there is somewhere to go, so it never walks a reader
   off the site. */
.app-back { flex: none; }
.app-back svg { width: 20px; height: 20px; }

.auth-card { position: relative; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto;
  padding: 26px 26px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.auth-card h3 { margin: 6px 0 4px; font-family: var(--display); font-size: 22px; letter-spacing: -.01em; }
.auth-close { position: absolute; top: 12px; right: 12px; }
.auth-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--accent); font-size: var(--fs-sm); }
.ab-mark { font-size: 18px; }
.auth-sub { margin: 0 0 16px; font-size: var(--fs-xs); line-height: 1.55; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--radius); background: var(--surface-2);
  border: 1px solid var(--border); margin-bottom: 16px; }
.auth-tabs button { padding: 9px; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--fs-xs); color: var(--muted); background: none; border: 0; cursor: pointer; }
.auth-tabs button.on { background: var(--accent); color: var(--accent-fg, #111); }
.auth-google { display: flex; justify-content: center; min-height: 44px; }
.auth-google[hidden] { display: none; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--dim); font-size: var(--fs-3xs);
  text-transform: uppercase; letter-spacing: .08em; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-field { position: relative; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-3xs); font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.auth-input { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text); font-size: 15px; outline: none; text-transform: none; letter-spacing: 0; font-weight: 500; }
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,200,87,.15); }
.auth-peek { position: absolute; right: 8px; bottom: 7px; padding: 5px 8px; font-size: var(--fs-3xs); font-weight: 700; color: var(--accent);
  background: none; border: 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
.auth-hint { font-size: var(--fs-3xs); min-height: 14px; margin-top: -6px; }
.auth-hint.ok { color: var(--up); } .auth-hint.bad { color: var(--down); }
.auth-error { padding: 9px 12px; border-radius: var(--radius-sm); background: var(--down-bg); color: var(--down); font-size: var(--fs-xs); line-height: 1.45; }
.auth-submit { padding: 12px; font-size: var(--fs-sm); justify-content: center; margin-top: 2px; }
.auth-submit:disabled { opacity: .6; cursor: progress; }
.auth-foot { margin: 14px 0 0; font-size: var(--fs-3xs); line-height: 1.5; text-align: center; }
.auth-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.auth-card .btn.danger { background: var(--down); border-color: var(--down); color: #fff; }

/* account menu */
.am-who { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.am-name { font-weight: 750; }
.am-email { font-weight: 600; overflow-wrap: anywhere; }
.am-method { font-size: var(--fs-3xs); margin-top: 2px; }
.am-out, .am-delete { width: 100%; justify-content: center; margin-top: 8px; }
.am-delete { color: var(--down); }

/* the lock screen in place of a members-only tab */
.lock-screen { display: grid; place-items: center; padding: var(--s-6, 32px) 0; }
.lock-card { width: min(560px, 100%); text-align: center;
  background: radial-gradient(420px 200px at 50% -40px, rgba(255,200,87,.14), transparent 70%), var(--surface); }
.lock-card .card-body { padding: 34px 28px 26px; }
.lock-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent); border: 1px solid rgba(255,200,87,.4); }
.lock-icon svg { width: 26px; height: 26px; display: block; }
.lock-kicker { font-size: var(--fs-3xs); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.lock-title { margin: 6px 0 16px; font-family: var(--display); font-size: 24px; letter-spacing: -.01em; }
.lock-points { list-style: none; padding: 0; margin: 0 auto 22px; max-width: 420px; text-align: left; display: flex; flex-direction: column; gap: 9px; }
.lock-points li { position: relative; padding-left: 26px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.lock-points li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--up-bg); color: var(--up); }
.lock-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lock-actions .btn { padding: 11px 18px; }
.lock-free { margin: 18px 0 0; font-size: var(--fs-xs); }
.lock-free a { color: var(--accent); }
.sp-locked { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sp-locked-actions { display: flex; gap: 8px; }

@media (max-width: 720px) {
  #help-btn { display: none; }                 /* shortcuts need a keyboard */
  .account-btn.signed-out { padding: 6px 11px; }
  .auth-card { padding: 22px 18px 16px; }
  /* The card's side padding changes here, so the footer's bleed must too. */
  .rx-card { padding-bottom: 0; }
  .rx-foot { margin: 0 -18px; padding: var(--s-3) 18px 16px; }
  .rx-foot-act .btn { flex: 1; min-width: 0; }
  .lock-card .card-body { padding: 26px 18px 20px; }
  .lock-title { font-size: 20px; }
  .lock-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ===========================================================================
   Phones, part two: density.
   The block above makes the smallest type legible; this one takes back the
   padding around it, so a screenful carries numbers rather than whitespace.
   =========================================================================== */
@media (max-width: 720px) {
  /* The one place the phone scale is set. A phone is the screen where every
     pixel of type costs a row of data, and this scale used to sit ABOVE the
     desktop one - the complaint "too big, too little visible" in nine
     numbers. One step down across the board; inputs stay 16px or iOS zooms. */
  :root {
    --fs-3xs: 9px;  --fs-2xs: 10px;   --fs-xs: 11px;  --fs-sm: 12px; --fs-md: 13px;
    --fs-lg: 14px;  --fs-xl: 16.5px;  --fs-2xl: 19px; --fs-3xl: 24px;
    --s-3: 9px; --s-4: 11px; --s-5: 12px; --s-6: 15px; --s-8: 18px; --s-10: 22px;
    --topbar-h: 50px;
    --radius-lg: 14px; --radius: 10px; --radius-sm: 7px;
  }
  /* Every table, not only the two named below. */
  thead th { padding: 6px 8px; }
  tbody td { padding: 6px 8px; }
  main { padding: 10px 12px 4px; }
  .grid { gap: 10px; }
  .card-body { padding: 11px 12px; }
  .card-head { padding: 9px 12px; }
  .card-head h3 { font-size: 10.5px; }
  .card-head .sub { font-size: 10.5px; }

  /* top strip and bottom bar: the chrome, not the content */
  .ticker-marquee { height: 26px; }
  .ticker-item { font-size: 10px; }
  .topbar { height: var(--topbar-h); }
  .brand-mark { width: 30px; height: 30px; }
  .icon-btn { width: 32px; height: 32px; }
  .tabs-mobile button { min-height: 46px; padding: 6px 2px 5px; font-size: 9.5px; gap: 2px; }
  .tabs-mobile button svg { width: 19px; height: 19px; }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }

  /* home: greeting, search and screens in about half the height */
  .home-hero { padding: 11px 12px; gap: 8px; margin-bottom: 10px; }
  .hero-title { font-size: 17px; }
  .hero-sub2 { margin-top: 1px; }
  .hero-badge { padding: 3px 8px; font-size: 10px; }
  .hero-search { padding: 9px 12px 9px 36px; }
  .hero-search-icon { left: 12px; }
  .screen-tabs { gap: 6px; }
  .screen-tab { padding: 8px 10px; }
  .screen-tab .sc-name { font-size: 12px; }
  .sector-pill { font-size: 11.5px; padding: 5px 10px; }

  /* lists and tiles */
  .mover { padding: 6px 8px; gap: 1px 8px; }
.news-item { padding: 9px 0; }
  .n-row, .ev-row { padding: 9px 0; }
  .setup { border-radius: var(--radius); }
  .co-section { margin-bottom: 0; }

  /* tables: one more column on screen */
  .co-table th, .co-table td { padding: 6px 8px; }
  #screener-table th, #screener-table td { padding: 7px 8px; }
  .co-table.stmt:not(.show-all) .co-metric { padding-right: 4px; }

  /* the company page and scorecard */
  .co-head .card-body { padding: 12px; }
  .co-ratios { gap: 8px; }
  .co-ratio { padding: 8px 10px; }
  .sc-pillar { padding: 10px 11px; }
  .lock-card .card-body { padding: 22px 16px 18px; }
}
@media (max-width: 720px) {
  /* Company page: the explanation under every ratio tripled the height of the
     block. The tiles keep their title attribute, so the wording is a tap away. */
  .co-ratios { gap: 6px; }
  .co-ratio { padding: 7px 9px; font-size: 12px; }
  .co-ratio .v { font-size: 13.5px; }
  .co-ratio .x { display: none; }
  .co-title h2 { font-size: 19px; }
  .co-tags { gap: 5px; }
  .co-tag { padding: 2px 7px; font-size: 10px; }

  /* Screener: a one-line toolbar instead of a stack of buttons. */
  .screener-filters .card-head { padding: 8px 10px; gap: 6px; row-gap: 6px; }
  .screener-filters .card-head h3 { flex: 0 0 auto; }
  .screener-filters .card-head .sub { order: 5; flex-basis: 100%; }
  .screener-filters .btn.sm { padding: 6px 9px; font-size: 12px; }
  #screener-export span, #screener-clear { display: none; }

  /* Screener rows: the name under the symbol, but tight. */
  #screener-table th, #screener-table td { padding: 5px 7px; }
  #screener-table .sym-code { font-size: 12px; line-height: 1.25; }
  #screener-table .sym-name { font-size: 10px; line-height: 1.2; }

  /* Home: the six screen buttons were a screenful on their own. */
  .screen-tab { padding: 7px 9px; }
  .screen-tab .sc-name { font-size: 12px; }
  .home-section-title, .hero-browse-label { margin-bottom: 6px; }
}

/* a split or bonus on the price chart */
.pc-svg .pc-action { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .55; }
.pc-action-tag { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap;
  padding: 1px 6px; border-radius: var(--radius-full); font-size: var(--fs-3xs); font-weight: 700;
  background: var(--accent-bg); color: var(--accent); border: 1px solid rgba(255,200,87,.35); pointer-events: none; }
/* A change that is NOT restated - a demerger, a rights issue - is marked in
   the warning tone, because the gap under it is real and stays. */
.pc-action.unpriced { stroke: var(--warn); }
.pc-action-tag.unpriced { color: var(--warn); border-color: var(--warn); }
.pc-adjusted { margin-top: 6px; }

/* Who reports today: a row of names to scan for one you hold, not a ranking. */
.rep-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-co {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--bg-sunken); color: var(--text-2); cursor: pointer;
  font: inherit; font-size: var(--fs-2xs); max-width: 100%;
}
.rep-co:hover { border-color: var(--accent); color: var(--text); }
.rep-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.rep-sym { font-family: var(--mono); font-size: var(--fs-3xs); color: var(--muted); flex: none; }
.rep-co:hover .rep-sym { color: var(--accent); }

/* The company's own description of itself, quoted from its prospectus. Set
   as prose rather than as a data field: it is a paragraph, and the one place
   on an IPO row where sentences are the point. */
.ipo-overview {
  margin: 0; font-size: var(--fs-2xs); line-height: 1.65; color: var(--text-2);
  max-width: 78ch;
}

/* A results day. A different kind of fact from a split - one changes the
   share count, the other is news - so a different colour and a solid line,
   and it is drawn before the split markers so those sit on top where the two
   fall in the same week. */
.pc-svg .pc-result { stroke: var(--mark); stroke-width: 1; opacity: .45; }
.pc-result-tag {
  position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap;
  padding: 1px 5px; border-radius: var(--radius-full);
  font-size: var(--fs-3xs); font-weight: 700;
  background: var(--mark-bg); color: var(--mark);
  border: 1px solid var(--mark-line); pointer-events: none;
}
/* What is marked on the line, and whether it is: twenty years of a company
   holds eighty results days, and a chart behind eighty lines is not a chart. */
.pc-marks { display: inline-flex; gap: 4px; margin-right: var(--s-2); }
.pc-mark {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--radius-full);
  background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: var(--fs-3xs); font-weight: 600; white-space: nowrap;
}
.pc-mark:hover { color: var(--text); }
.pc-mark.on { color: var(--text); border-color: var(--muted); }
.pc-mark-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; opacity: .35; }
.pc-mark.on .pc-mark-dot { opacity: 1; }
.pc-mark-dot.act { background: var(--accent); }
.pc-mark-dot.res { background: var(--mark); }

/* ===================== phone navigation: the slide-out menu ===================== */
.nav-toggle { display: none; }
.side-nav, .nav-scrim { display: none; }

@media (max-width: 720px) {
  .nav-toggle { display: grid; place-items: center; flex: none; margin-right: -2px; }
  /* Theme, settings and the disclaimer live in the menu now, so the bar has
     room for the menu button without widening the page. */
  #theme-btn, #settings-btn { display: none; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 70; opacity: 0;
    background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px);
    transition: opacity .2s var(--ease); pointer-events: none;
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  .side-nav {
    display: flex; flex-direction: column; position: fixed; z-index: 75;
    top: 0; bottom: 0; left: 0; width: min(290px, 82vw);
    background: var(--surface); border-right: 1px solid var(--border-2);
    box-shadow: 18px 0 44px -18px rgba(0, 0, 0, .65);
    transform: translateX(-102%); transition: transform .22s var(--ease);
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 0 calc(env(safe-area-inset-bottom, 0px) + 10px);
    overscroll-behavior: contain; touch-action: pan-y;
  }
  body.nav-open .side-nav { transform: translateX(0); }
  @media (prefers-reduced-motion: reduce) {
    .side-nav, .nav-scrim { transition: none; }
  }

  .sn-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 10px; }
  .sn-title { font-size: var(--fs-3xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
  .sn-links { flex: 1; overflow-y: auto; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
  .sn-link, .sn-action {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 11px 12px; border-radius: var(--radius); border: 1px solid transparent;
    background: none; color: var(--text-2); font-size: 15px; font-weight: 600; min-height: 46px;
  }
  .sn-link .sn-label { flex: 1; min-width: 0; }
  .sn-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); flex: none; }
  .sn-icon svg { width: 20px; height: 20px; display: block; }
  .sn-link.active { background: var(--accent-bg); color: var(--accent); border-color: rgba(255,200,87,.35); }
  .sn-link.active .sn-icon { color: var(--accent); }
  .sn-link:active, .sn-action:active { background: var(--surface-2); }
  /* the padlock on a members-only entry sits at the end of the row */
  .sn-link .tab-lock { position: static; margin-left: auto; }
  .sn-link .tab-lock svg { width: 13px; height: 13px; }
  .sn-link .soon-dot { margin-left: auto; }
  .sn-foot { border-top: 1px solid var(--border); margin-top: 8px; padding: 8px 8px 0; display: flex; flex-direction: column; gap: 2px; }
  .sn-action { font-size: 14px; font-weight: 550; color: var(--muted); }

  /* the bottom bar steps aside for the menu */
  .tabs-mobile { display: none !important; }
  body { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  body.nav-open { overflow: hidden; }
  .fund-fab { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ===================== refresh countdown ===================== */
.refresh-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 10px 5px 8px; border-radius: var(--radius-full);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: var(--fs-3xs); font-weight: 650;
  font-family: var(--mono); cursor: pointer; transition: var(--t-fast);
}
.refresh-chip:hover { color: var(--accent); border-color: var(--accent); }
.refresh-chip svg { width: 13px; height: 13px; display: block; }
.refresh-chip.spinning svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .refresh-chip.spinning svg { animation: none; } }
@media (max-width: 900px) { .refresh-chip #refresh-countdown { display: none; } .refresh-chip { padding: 5px 8px; } }
.news-switch { font-weight: 750; }
.news-switch.on { background: var(--up-bg); border-color: var(--up-border); color: var(--up); }

/* ===================== the owner's dashboard ===================== */
/* Two series only, and they carry names beside them, so colour is never the
   only thing telling them apart. Both steps were validated against the chart
   surface in each theme: lightness band, colour-blind separation, contrast. */
:root { --adm-a: #b8881c; --adm-b: #6b8ae8; }
[data-theme="light"] { --adm-a: #9a6f12; --adm-b: #3f63cc; }

.adm-role { margin-left: var(--s-2); padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  vertical-align: middle; }
.adm-role.standby { background: var(--surface-3); color: var(--muted); }
.adm-role.serving { background: rgba(5,150,105,.18); color: var(--up); }
.adm-dot.idle { background: var(--dim); box-shadow: none; }
.adm-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); margin: var(--s-2) 0 var(--s-4); flex-wrap: wrap; }
.adm-title { margin: 0; font-family: var(--display); font-size: var(--fs-2xl, 26px); letter-spacing: -.02em; }
.adm-sub { margin: 4px 0 0; font-size: var(--fs-sm); }
.adm-card { margin-bottom: var(--s-3); }
.adm-serving { border-left: 3px solid var(--adm-a); }

.adm-host { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-4); }
.adm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--up); flex: none;
  box-shadow: 0 0 0 4px var(--up-bg); }
.adm-host-name { font-size: var(--fs-lg); font-weight: 750; }
.adm-host-sub { font-size: var(--fs-2xs); margin-top: 2px; }

.adm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.adm-tile { padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2);
  border: 1px solid var(--border); }
.adm-k { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 700; }
.adm-v { font-size: var(--fs-xl); font-weight: 750; margin-top: 3px; letter-spacing: -.02em; }
.adm-v.up { color: var(--up); } .adm-v.down { color: var(--down); }
.adm-note { font-size: var(--fs-3xs); color: var(--muted); margin-top: 2px; }

/* who answered: named bars, 4px rounded ends, anchored left */
.adm-bars { display: flex; flex-direction: column; gap: 10px; }
.adm-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; gap: 12px; align-items: center; }
.adm-bar-name { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; }
.adm-bar-track { height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.adm-bar-track i { display: block; height: 100%; border-radius: 5px; }
.adm-bar-val { font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }

/* sign-ups: one series, so no legend - the card title names it */
.adm-chart { position: relative; height: 132px; }
.adm-cols { display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.adm-col { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; border-radius: 4px; }
.adm-col-fill { display: block; width: 100%; height: 100%; display: flex; align-items: flex-end; }
.adm-col i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--adm-a); }
.adm-col.empty i { background: var(--border); }
.adm-col.on i, .adm-col:focus-visible i { filter: brightness(1.25); }
.adm-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-tip { position: absolute; top: -2px; left: 0; padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--surface-3); border: 1px solid var(--border-2); font-size: var(--fs-3xs);
  color: var(--text); white-space: nowrap; pointer-events: none; }
.adm-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--fs-3xs); color: var(--dim); }

.adm-paths { margin-top: var(--s-3); display: flex; flex-direction: column; gap: 4px; }
.adm-path { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-2xs);
  color: var(--muted); padding: 3px 0; border-bottom: 1px dashed var(--border); }
.adm-path:last-child { border-bottom: 0; }

.adm-table-wrap { margin-top: var(--s-4); max-height: 420px; overflow: auto; }
.adm-table th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.adm-email { font-family: var(--mono); font-size: var(--fs-2xs); overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .adm-bar-row { grid-template-columns: minmax(0, 1fr) 1fr auto; gap: 8px; }
  .adm-chart { height: 110px; }
  .adm-table-wrap { max-height: 320px; }
}

/* --- phone-size IPO furniture: kept last so the base rules above cannot
       win the tie on source order. --- */
@media (max-width: 720px) {
  /* Five counts in one row, not five cards over three. The number leads and
     the word rides under it small - the coloured letter already names it. */
  .ipo-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .ipo-count { padding: 8px 2px; gap: 1px; }
  .ipo-count .ic-n { font-size: var(--fs-lg); }
  .ipo-count .ic-k { font-size: 7.5px; letter-spacing: .04em; gap: 3px; flex-wrap: wrap;
                     justify-content: center; text-align: center; }
  /* The boxes ride one swipeable row instead of a screen-filling block. */
  .ipo-filterbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
                   scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ipo-filterbar::-webkit-scrollbar { display: none; }
  .ipo-f { flex: none; padding: 6px 10px; min-height: 34px; }
  .gmp-note { font-size: var(--fs-3xs); line-height: 1.5; }
}

/* ===========================================================================
   Watchlist — the companies someone is actually following, with the columns
   they chose. A table first and foremost: everything around it stays quiet so
   the numbers are what the eye lands on.
   =========================================================================== */
.wl-head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3); flex-wrap: wrap;
}
.wl-picker { position: relative; }
.wl-name {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 0; background: none; color: var(--text); cursor: pointer;
  font-family: var(--display); font-size: var(--fs-xl); font-weight: 700;
  padding: 2px 0;
}
.wl-name:hover { color: var(--accent); }
.wl-caret { font-style: normal; font-size: .6em; color: var(--muted); }
.wl-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 240px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 5px;
}
.wl-menu-row {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: 7px var(--s-3); border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; font-size: var(--fs-2xs);
  text-align: left; cursor: pointer;
}
.wl-menu-row:hover:not(:disabled) { background: var(--bg-sunken); }
.wl-menu-row:disabled { color: var(--muted); cursor: not-allowed; }
.wl-menu-row.on { color: var(--accent); font-weight: 700; }
.wl-menu-row.danger:hover { color: var(--down); }
.wl-menu-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wl-menu-count { color: var(--muted); font-size: var(--fs-3xs); font-family: var(--mono); }
.wl-menu-sep { height: 1px; background: var(--border); margin: 5px 3px; }

.wl-tools { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.wl-count { font-size: var(--fs-2xs); margin-right: var(--s-2); }

.wl-table { width: 100%; }
/* Headers wrap rather than forcing the table as wide as its longest label:
   sixteen columns of "Return on capital (ROCE)" on one line each is a table
   nobody can see the left of. */
.wl-table th.wl-th {
  cursor: pointer; user-select: none;
  max-width: 108px; white-space: normal; line-height: 1.25; vertical-align: bottom;
}
.wl-table th.wl-left { max-width: none; }
.wl-table th.wl-th:hover { color: var(--accent); }
.wl-table th.sorted { color: var(--accent); }
.wl-arrow { font-style: normal; margin-left: 3px; font-size: .8em; }
/* The table's own default is right-aligned, which is right for numbers and
   wrong for the two columns that are not numbers. */
.wl-table th.wl-left, .wl-table th.wl-sn,
.wl-table td.wl-co, .wl-table td.wl-sn { text-align: left; }
.wl-sn { width: 48px; }
.wl-x { width: 74px; white-space: nowrap; text-align: right; }

/* --- groups: a division of one watchlist, not a list of its own ----------- */
.wl-group-row td { padding: 0 !important; }
.wl-group-t {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) var(--s-2) 5px !important;
  border-bottom: 1px solid var(--border);
}
.wl-group-n {
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent);
}
.wl-group-c { font-size: var(--fs-3xs); }
.wl-group + .wl-group .wl-group-t { padding-top: var(--s-5) !important; }

.wl-gwrap { position: relative; display: inline-block; }
.wl-gbtn {
  max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-full);
  background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: var(--fs-3xs); padding: 2px 7px; line-height: 1.5;
  opacity: 0; transition: opacity .14s ease;
}
.wl-gbtn.on { opacity: 1; color: var(--accent); border-color: var(--border); }
.wl-table tr:hover .wl-gbtn, .wl-gbtn:focus-visible { opacity: 1; }
.wl-gbtn:hover { color: var(--text); border-color: var(--muted); }
.wl-gmenu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 190px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 5px;
  text-align: left;
}
.wl-gm-row {
  display: block; width: 100%; padding: 6px var(--s-3); border: 0;
  border-radius: var(--radius-sm); background: none; color: var(--text);
  font: inherit; font-size: var(--fs-2xs); text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wl-gm-row:hover { background: var(--bg-sunken); }
.wl-gm-row.on { color: var(--accent); font-weight: 700; }
.wl-gm-row.danger:hover { color: var(--down); }
.wl-gm-sep { height: 1px; background: var(--border); margin: 4px 3px; }
@media (max-width: 720px) { .wl-gbtn { opacity: 1; } }
.wl-co { min-width: 180px; }
.wl-link {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--accent); font-weight: 600; text-align: left;
}
.wl-link:hover { text-decoration: underline; }
.wl-sym { margin-left: 7px; font-size: var(--fs-3xs); font-family: var(--mono); }
.wl-remove {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: var(--fs-2xs); line-height: 1; padding: 4px; border-radius: var(--radius-sm);
  opacity: 0; transition: opacity .14s ease, color .14s ease;
}
.wl-table tr:hover .wl-remove, .wl-remove:focus-visible { opacity: 1; }
.wl-remove:hover { color: var(--down); background: var(--bg-sunken); }
/* A row whose filings are still being read. The three dots sit in the cells
   that are waiting, so it is clear which numbers are coming and which are
   simply not filed. */
.wl-dot { color: var(--muted); letter-spacing: 2px; }
.wl-foot {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3); font-size: var(--fs-2xs);
}
.wl-spin {
  width: 11px; height: 11px; flex: none; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: wl-turn .8s linear infinite;
}
@keyframes wl-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wl-spin { animation: none; } }

/* --- the add and columns panels ------------------------------------------- */
.wl-hint { font-size: var(--fs-2xs); margin: 0 0 var(--s-3); }
/* The panels' inputs span them: a search box a third the width of the results
   it filters looks like it belongs to something else. */
.wl-add .auth-input, .wl-colpanel .auth-input { width: 100%; box-sizing: border-box; }
.wl-added { font-size: var(--fs-2xs); min-height: 1.2em; margin: var(--s-2) 0; }
.wl-results, .wl-cols {
  max-height: 340px; overflow: auto; display: grid; gap: 2px;
  margin-top: var(--s-2);
}
.wl-cols { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-2); }
.wl-result {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: 8px var(--s-3); border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; font-size: var(--fs-2xs);
  text-align: left; cursor: pointer;
}
.wl-result:hover:not(:disabled) { background: var(--bg-sunken); border-color: var(--border); }
.wl-result:disabled { color: var(--muted); cursor: default; }
.wl-r-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wl-r-sym { font-family: var(--mono); font-size: var(--fs-3xs); }
.wl-r-go { color: var(--accent); font-size: var(--fs-3xs); font-weight: 700; }
.wl-result:disabled .wl-r-go { color: var(--muted); font-weight: 400; }
.wl-actions {
  display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-3);
}
.wl-colpanel, .wl-add { max-width: 560px; width: min(560px, 92vw); }

@media (max-width: 720px) {
  .wl-head { align-items: flex-start; }
  .wl-tools { width: 100%; }
  .wl-remove { opacity: 1; }
}