/* BidDesk — sized and spaced for reading at a glance, not for density. */

:root {
  /* Ink with a warm cast, sampled from the darkest tones in the bull. A
     neutral or blue-black would put the mark on a surface it does not belong to. */
  --bg: #0c0b09;
  --surface: #16130f;
  --surface-2: #1f1b16;
  --line: #322c24;
  --text: #f3eee6;
  /* The strong ink the toast, the inputs and the menus are drawn in. Declared
     once: it follows --text, which each theme sets for itself. */
  --ink: var(--text);
  --muted: #a99e8f;
  /* Secondary text (times, company names, notes): the same warm grey, only
     lighter, so it reads at 4.5:1 on every surface, the tinted rows included. */
  --dim: #968c7d;
  --good: #3ecf8b;
  --good-dim: #10301e;
  --bad: #ff6f60;
  --bad-dim: #3a1a16;
  /* Red filled behind white words (the Invoked chip): darker than --bad, so the white reads. */
  --bad-fill: #d2453a;
  --warn: #e8863c;
  --warn-dim: #33210f;
  /* Lifted for ink. Bronze stays available as --brand for anything that
     should carry the mark's colour rather than an action. */
  --accent: #7fadff;
  --accent-dim: #121f37;
  --on-accent: #06132b;
  --brand: #d9a441;
  --brand-dim: #2b2113;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .34);
  --radius: 14px;
  /* EBITDA and revenue's band (Results desk, tape, company page), and the small labels beside figures. */
  --lead-band: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --label: #9a8e7e;
  /* EBITDA's own quarter, highlighted inside the band; and the ₹ crore unit, marked like a highlighter pen. */
  --lead-hl: color-mix(in srgb, var(--accent) 25%, var(--surface));
  --unit-bg: #d9a441;
  --unit-fg: #1c1307;
  /* Revenue's own block, beside EBITDA's: a quieter blue, drawn with a crisp edge. */
  --rev-band: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --rev-edge: color-mix(in srgb, var(--accent) 24%, var(--surface));
}

:root[data-theme="light"] {
  /* Warm paper, not blue-grey. The default cool greys are what make a site
     read as a template; the bull is bronze on ink, so the whole surface is
     built from that instead. */
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #f1ede6;
  --line: #e2dbd0;
  --text: #191512;
  --muted: #5d554b;
  --dim: #746a5f;
  /* Semantics stay unambiguous: a trader must never have to think about
     which colour means down. */
  --good: #0d7a46;
  --good-dim: #dcf2e6;
  --bad: #b32a1f;
  --bad-dim: #fbe5e2;
  --bad-fill: #b32a1f;
  --warn: #ac5208;
  --warn-dim: #fceada;
  /* Bronze remains the brand and shows in the mark; the interactive and data
     colour is a deep blue, because a filled bronze button reads muddy and a
     bronze chart line is hard to trace. */
  --accent: #1d51bf;
  --accent-dim: #e7edfb;
  --on-accent: #ffffff;
  --brand: #96661c;
  --brand-dim: #f7ecd9;
  --shadow: 0 1px 2px rgba(25, 21, 18, .05), 0 8px 24px rgba(25, 21, 18, .06);
  --lead-band: #e7edfb;
  --label: #6f665b;
  --lead-hl: #cfdcf7;
  --unit-bg: #f5d47e;
  --unit-fg: #3a2905;
  --rev-band: #e9eff9;
  --rev-edge: #c3d1ee;
}

/* Follow the operating system when nobody has chosen explicitly. Doing this in
   CSS rather than JS means the right palette paints on the first frame — a JS
   default can run before the preference is readable, and flashes the wrong
   theme. An explicit [data-theme] still wins over this. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  /* Warm paper, not blue-grey. The default cool greys are what make a site
     read as a template; the bull is bronze on ink, so the whole surface is
     built from that instead. */
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #f1ede6;
  --line: #e2dbd0;
  --text: #191512;
  --muted: #5d554b;
  --dim: #746a5f;
  /* Semantics stay unambiguous: a trader must never have to think about
     which colour means down. */
  --good: #0d7a46;
  --good-dim: #dcf2e6;
  --bad: #b32a1f;
  --bad-dim: #fbe5e2;
  --bad-fill: #b32a1f;
  --warn: #ac5208;
  --warn-dim: #fceada;
  /* Bronze remains the brand and shows in the mark; the interactive and data
     colour is a deep blue, because a filled bronze button reads muddy and a
     bronze chart line is hard to trace. */
  --accent: #1d51bf;
  --accent-dim: #e7edfb;
  --on-accent: #ffffff;
  --brand: #96661c;
  --brand-dim: #f7ecd9;
  --shadow: 0 1px 2px rgba(25, 21, 18, .05), 0 8px 24px rgba(25, 21, 18, .06);
  --lead-band: #e7edfb;
  --label: #6f665b;
  --lead-hl: #cfdcf7;
  --unit-bg: #f5d47e;
  --unit-fg: #3a2905;
  --rev-band: #e9eff9;
  --rev-edge: #c3d1ee;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 72px; }
/* The tab in front is at least a screen tall, so the footer starts below the
   fold and the tape landing never pushes it down while it is in view. */
.panel { min-height: 100vh; }

/* ------------------------------------------------------------ header */

header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
/* One row on a laptop. It never wraps: a long phase shortens with an ellipsis
   instead, so no control is ever pushed onto a row of its own. */
.header-in {
  max-width: 1180px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
/* The bull carries its own bronze, so it sits on the surface directly — a
   coloured plate behind it would fight the artwork and read as a sticker.
   The box keeps the artwork's 200:134 from the first paint, so the name beside
   it never moves when the image arrives. The `sizes` on the <img> in
   index.html is these heights as widths (42px → 63px, 34px → 51px). */
.brand-mark {
  height: 42px; width: auto; aspect-ratio: 200 / 134; flex: none; display: block;
  /* Just enough lift to separate it from the header without a hard edge. */
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--text) 22%, transparent));
}
/* Up to a small laptop: the brand and the controls on one row, the status on
   the next, each in a fixed place. Neither row depends on the other's length,
   and the account chip has its own slot, so nothing moves when it arrives. */
@media (max-width: 980px) {
  .header-in {
    display: grid; gap: 8px 12px;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "brand user theme refresh" "status status status status";
  }
  .brand { grid-area: brand; margin-right: 0; min-width: 0; }
  .status { grid-area: status; }
  #userMenu { grid-area: user; }
  #themeBtn { grid-area: theme; }
  #refreshBtn { grid-area: refresh; }
}
@media (max-width: 640px) {
  .brand-mark { height: 34px; }
  /* Phone header: brand and controls on one row, the status on the next.
     Three stacked rows were a third of the screen before any content. */
  .header-in { padding: 10px 14px; gap: 8px 10px; }
  .brand-sub { display: none; }
  .status { gap: 10px; }
  /* The header's two status lines, not every .live on the page: an OFS chip is one too. */
  header .live + .live { margin-left: 4px; }
  header { margin-bottom: 16px; }
  #refreshBtn { padding: 7px 12px; }
}
/* The narrowest phones keep the bull and drop the word beside it, so the controls still fit on the first row. */
@media (max-width: 359px) { .brand-name { display: none; } }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.3px; line-height: 1.1; }
.brand-sub { font-size: 12.5px; color: var(--dim); }

.live { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
/* The phase, then how fresh the figures are. The age sits in a fixed-width box
   in tabular figures, so its ticking every second never moves the dot, the
   phase or the controls beside it. */
.status { display: flex; align-items: center; gap: 16px; min-width: 0; }
.status .live:first-child { min-width: 0; }
#phase { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#updated { display: block; flex: none; width: 11.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* On its own row the age may give way (an ellipsis) to a long phase. */
@media (max-width: 980px) { #updated { flex: 0 1 11.2em; min-width: 0; } }
/* A narrow phone shows the age alone ("12m ago"), in a box sized for the longest,
   so the longest phase ("Final minutes — cut-off moving") is never cut. */
@media (max-width: 400px) { .upd-lbl { display: none; } #updated { flex: none; width: 4.6em; } }
/* After .live, so the phone size holds (placed before it, it never did). */
@media (max-width: 640px) { .live { font-size: 12px; } }
/* Refreshing: the same button, disabled, with a spinner in place of its label, so it keeps its width. */
#refreshBtn[aria-busy="true"] { position: relative; color: transparent; }
#refreshBtn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--muted); border-top-color: transparent; animation: ai-spin .8s linear infinite;
}
/* Reduced motion: the same ring, still, says "busy" without spinning. */
@media (prefers-reduced-motion: reduce) { #refreshBtn[aria-busy="true"]::after { animation: none; } }
/* A device nobody has signed in on yet: the desk waits, unseen but laid out, for the sign-in answer
   (index.html), so a visitor meets the sign-in card rather than an inert desk. */
:root[data-boot="checking"] .wrap { visibility: hidden; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.dot.on { background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 22%, transparent); animation: pulse 2.4s ease-in-out infinite; }
.dot.err { background: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 22%, transparent); }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

.btn {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.ghost { background: transparent; }

/* -------------------------------------------------------------- tabs */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 26px; overflow-x: auto; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font-weight: 600; font-size: 15px; line-height: 1; font-family: inherit;
  padding: 13px 16px; cursor: pointer; white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab-new::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: 3px; }
.tab .count {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 20px;
  background: var(--surface-2); font-size: 12px; color: var(--muted);
  /* Room for two digits from the start: a count arriving never widens its tab and moves the ones after it. */
  min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ verdict */

.verdict {
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 22px;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px;
}
.verdict.good { border-left: 4px solid var(--good); }
.verdict.warn { border-left: 4px solid var(--warn); }
.verdict.bad  { border-left: 4px solid var(--bad); }

.verdict-label {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.verdict-headline { font-size: 30px; font-weight: 750; letter-spacing: -.7px; line-height: 1.18; }
.verdict-headline .num { font-variant-numeric: tabular-nums; }
.verdict-sub { color: var(--muted); margin-top: 10px; font-size: 15px; max-width: 46ch; }
.verdict-aside { border-left: 1px solid var(--line); padding-left: 30px; }
@media (max-width: 820px) {
  .verdict { grid-template-columns: 1fr; gap: 22px; }
  .verdict-aside { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 20px; }
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 20px; font-size: 13px; font-weight: 650;
}
.pill.good { background: var(--good-dim); color: var(--good); }
.pill.bad  { background: var(--bad-dim);  color: var(--bad); }
.pill.warn { background: var(--warn-dim); color: var(--warn); }
.pill.flat { background: var(--surface-2); color: var(--muted); }

/* -------------------------------------------------------------- tiles */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 22px; }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 15px 17px;
}
.tile .k { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.tile .v { font-size: 23px; font-weight: 700; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.tile .x { font-size: 12.5px; color: var(--dim); margin-top: 3px; }
@media (max-width: 640px) {
  /* After the base rules, so these win on a phone. Two columns that never grow past half the width: a long figure is set smaller, never pushed off the page. */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { min-width: 0; padding: 13px 14px; }
  .tile .v { font-size: 19px; overflow-wrap: anywhere; }
  .tile.t-long .v { font-size: 16px; letter-spacing: -.3px; }
}

/* Toned tiles: a coloured edge and a tinted ground, so the two or three tiles
   that carry a decision stand out from the ones that are just context. */
.tile.t-good   { border-left: 3px solid var(--good); background: linear-gradient(90deg, var(--good-dim), var(--surface) 62%); }
.tile.t-warn   { border-left: 3px solid var(--warn); background: linear-gradient(90deg, var(--warn-dim), var(--surface) 62%); }
.tile.t-bad    { border-left: 3px solid var(--bad);  background: linear-gradient(90deg, var(--bad-dim),  var(--surface) 62%); }
.tile.t-accent { border-left: 3px solid var(--accent); background: linear-gradient(90deg, var(--accent-dim), var(--surface) 62%); }
.tile.t-good .v   { color: var(--good); }
.tile.t-warn .v   { color: var(--warn); }
.tile.t-bad .v    { color: var(--bad); }
.tile.t-accent .v { color: var(--accent); }

/* --------------------------------------------------------------- card */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 22px; overflow: hidden;
}
.card-head {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-title { font-size: 16px; font-weight: 700; margin-right: auto; }
.card-body { padding: 20px; }
.card-note { font-size: 13px; color: var(--dim); padding: 0 20px 16px; }

/* ---------------------------------------------------------- calculator */

.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; align-items: end; }
/* The bid calculator: only the price box has a hint under it, so the boxes
   line up along their tops, and each column is wide enough for its label on
   one line (a phone takes them one under another). */
#ofsBody .calc { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: start; }
/* "Find a company": stacked on a phone; from 480px the box takes the row and the button its own width. */
@media (max-width: 479px) { #coForm.calc { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 480px) and (max-width: 720px) { #coForm.calc { grid-template-columns: minmax(0, 1fr) auto; } }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.field input, .field select {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; font-weight: 600; font-size: 17px; line-height: 1.2; font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field .hint { font-size: 12px; color: var(--dim); margin-top: 5px; }

.result { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; margin-top: 20px; }
.result > div { background: var(--surface-2); padding: 15px 17px; }
.result .k { font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.result .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.result .v.good { color: var(--good); }
.result .v.bad { color: var(--bad); }

/* -------------------------------------------------------------- table */

.table-scroll { overflow-x: auto; max-height: 560px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--muted);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  text-align: right; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
th:first-child, td:first-child { text-align: left; }
td { padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 9%, transparent); }

/* ---- ladder zones ---------------------------------------------------
   Three bands, read before any number: filled, the clearing tier, and out. */
.ladder td { padding: 9px 14px; }
tr.z-full  td { background: color-mix(in srgb, var(--good) 7%, transparent); }
tr.z-full  td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
tr.z-clear td { background: color-mix(in srgb, var(--warn) 17%, transparent); font-weight: 650; }
tr.z-clear td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.z-out   td { color: var(--dim); background: transparent; }
tr.z-cut   td { background: color-mix(in srgb, var(--accent) 13%, transparent); font-weight: 650; }
tr.z-cut   td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr.is-you  td { outline: 1px solid var(--accent); outline-offset: -1px; }

/* The cut-off line itself — the single most important row on the page. */
tr.z-line td {
  background: var(--warn-dim); color: var(--warn); text-align: center;
  font-size: 12.5px; font-weight: 650; letter-spacing: .02em; padding: 7px 14px;
  border-top: 2px solid var(--warn); border-bottom: 2px solid var(--warn);
}
tr.z-line span { font-weight: 800; }
tr.z-gap td { background: var(--surface-2); text-align: center; padding: 9px; }

.c-price { font-weight: 650; }
.c-price .sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--dim); }
.c-dim { color: var(--dim); }
.badge-you {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 5px;
  background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}

/* Inline depth bar: gives each row a length so demand shape is visible. */
/* A thin rule under the number rather than a block behind it — behind the
   digits it reads as a text selection and fights the number for attention. */
.c-depth { position: relative; }
.c-depth .depth {
  position: absolute; right: 14px; bottom: 5px;
  height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}
tr.z-out .c-depth .depth { background: color-mix(in srgb, var(--dim) 45%, transparent); }
tr.z-clear .c-depth .depth { background: var(--warn); }
.c-depth .c-num { position: relative; }

/* ---- ladder toolbar ------------------------------------------------- */
.ladder-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.seg { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 2px; }
.seg-btn {
  border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 13px; font-family: inherit;
  padding: 6px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.seg-btn.on { background: var(--accent); color: var(--on-accent); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.link-btn {
  background: none; border: 0; color: var(--accent); font-weight: 600; font-size: 13px; font-family: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.legend { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.legend .lg { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.legend .lg.z-full  { background: color-mix(in srgb, var(--good) 45%, transparent); }
.legend .lg.z-clear { background: var(--warn); }
.legend .lg.z-out   { background: var(--line); }

/* ---- depth chart ---------------------------------------------------- */
.depth-chart svg { width: 100%; height: 140px; display: block; }
.depth-axis {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600;
}
.depth-axis i { font-style: normal; color: var(--dim); font-weight: 400; }
.depth-legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px;
  font-size: 12.5px; color: var(--muted);
}
.depth-legend .sw { display: inline-block; width: 11px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.depth-legend .sw.accent { background: var(--accent); }
.depth-legend .sw.good { background: var(--good); }
.depth-legend .sw.warn { background: var(--warn); }

.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 650; }
.tag.full { background: var(--good-dim); color: var(--good); }
.tag.partial { background: var(--warn-dim); color: var(--warn); }
.tag.out { background: var(--surface); color: var(--dim); }

/* --------------------------------------------------------------- IPO */

.ipo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.ipo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; min-width: 0; }
/* The header: the name with the subscription figure beside it, the ticker and bidding window under the name, then
   the closing status with Share at the far end. The figure's column is only as wide as the figure, so the name keeps
   the card's width at any size; a long name stops at two lines (the ticker under it says which issue it is). */
.ipo-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name sub" "meta sub" "acts acts";
  column-gap: 14px; row-gap: 3px; align-items: start; margin-bottom: 16px; }
.ipo-name { grid-area: name; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ipo-meta { grid-area: meta; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.ipo-meta b { color: var(--text); font-weight: 650; letter-spacing: .02em; }
.ipo-win { white-space: nowrap; }
.ipo-sub { grid-area: sub; text-align: right; white-space: nowrap; }
.ipo-sub .v { font-size: 28px; font-weight: 750; letter-spacing: -.6px; font-variant-numeric: tabular-nums; line-height: 1; }
.ipo-sub .k { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.ipo-acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.ipo-acts .pill, .ipo-acts .btn { white-space: nowrap; }
.ipo-acts .btn { margin-left: auto; }

/* Neutral by default. The two tinted states mark genuinely different
   situations — guaranteed allotment, or odds long enough to be worth pausing
   over — rather than banding a continuous probability. */
.odds {
  background: var(--surface-2); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
  border-left: 3px solid var(--line);
}
.odds.good { background: var(--good-dim); border-left-color: var(--good); }
.odds.bad  { background: var(--bad-dim);  border-left-color: var(--bad); }
.odds .headline { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.odds .detail { font-size: 13px; color: var(--muted); margin-top: 4px; }

.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 62px 1fr 66px; align-items: center; gap: 11px; font-size: 13px; }
.bar-row .lbl { color: var(--muted); font-weight: 600; }
.bar-track { position: relative; height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
/* display:block matters — a bare inline <span> ignores width/height entirely. */
.bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--accent); transition: width .45s cubic-bezier(.4,0,.2,1); }
/* The 1× line: left of it the tier is not yet covered, right of it it is. */
.bar-mark { position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--dim); opacity: .85; z-index: 1; }
.bar-fill.hot { background: var(--good); }
.bar-fill.cold { background: var(--dim); }
.bar-row .val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- misc */

.empty { text-align: center; padding: 56px 20px; color: var(--dim); }
.empty h3 { color: var(--text); font-size: 18px; margin: 0 0 8px; }
.errors {
  background: var(--bad-dim); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  color: var(--bad); border-radius: 12px; padding: 13px 16px; font-size: 13.5px; margin-bottom: 20px;
}
.errors ul { margin: 6px 0 0; padding-left: 18px; }
.foot { text-align: center; color: var(--dim); font-size: 12.5px; padding: 30px 0 0; border-top: 1px solid var(--line); margin-top: 34px; }
.foot a { color: var(--muted); }
.hide { display: none !important; }
.mono { font-variant-numeric: tabular-nums; }

/* Access gate shown when the API is protected and the caller has no session. */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(3px);
  /* A card taller than a small phone's screen scrolls, top first, rather than
     hanging its title and buttons past the edges where nothing can reach them.
     (Centred only while it fits: "safe"; a browser without it keeps centring.) */
  overflow-y: auto; overscroll-behavior: contain; align-items: safe center;
}
.gate .card { width: 100%; max-width: 360px; }

/* Disabled controls must read as disabled — on a read-only deployment the
   Settings tab is inert, and a normal-looking button invites a dead click. */
.btn:disabled,
.field input:disabled,
.field select:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.btn:disabled:hover { border-color: var(--line); }

/* ---- offer switcher --------------------------------------------------
   Live offers and the archive share one row: whatever is running today sits
   on the left, and every past offer stays one tap away. */
.offer-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 20px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  font-weight: 600; font-size: 14px; font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip-name { color: inherit; }
.chip-sym { display: none; font-weight: 750; letter-spacing: .02em; flex: none; }
/* A phone's offer picker: the symbol first, the name on one line (an ellipsis, the whole name in the title). */
@media (max-width: 720px) {
  #ofsPicker .chip { max-width: 100%; min-width: 0; }
  #ofsPicker .chip-sym { display: inline; }
  #ofsPicker .chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  #ofsPicker .chip-date { flex: none; white-space: nowrap; }
}
.chip-date {
  font-size: 12px; font-weight: 600; opacity: .75;
  padding-left: 8px; border-left: 1px solid currentColor;
}
.chip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
.chip.on .chip-dot { background: var(--on-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--on-accent) 30%, transparent); }
.chip.add { border-style: dashed; color: var(--accent); }
.chip.add:hover { background: var(--accent-dim); }

#offerForm .card { width: 100%; }
#offerForm .calc { gap: 12px; }

/* ---- company briefing ------------------------------------------------ */
.co-h {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 16px 0 8px;
}
.co-list { margin: 0; padding-left: 20px; color: var(--text); }
.co-list li { margin-bottom: 6px; }
.co-unit { font-size: 12px; font-weight: 500; color: var(--dim); }
.up { color: var(--good); font-weight: 650; }
.down { color: var(--bad); font-weight: 650; }

/* Announcements: the price-sensitive few must separate from the filing noise. */
.ann { padding: 13px 0; border-bottom: 1px solid var(--line); }
.ann:last-child { border-bottom: 0; }
.ann-top { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.ann-cat { font-weight: 650; font-size: 14px; }
.ann-at { font-size: 12.5px; color: var(--dim); margin-left: auto; font-variant-numeric: tabular-nums; }
.ann-text { font-size: 14px; color: var(--muted); line-height: 1.5; }
.ann-file { font-size: 12.5px; color: var(--accent); text-decoration: none; display: inline-block; margin-top: 6px; }
.ann-file:hover { text-decoration: underline; }
.ann.material {
  border-left: 3px solid var(--warn);
  padding-left: 13px; margin-left: -13px;
  background: linear-gradient(90deg, var(--warn-dim), transparent 55%);
}
.ann.material .ann-cat::before { content: "★ "; color: var(--warn); }

/* ---- live tape + symbol suggest ------------------------------------- */
.ann-sym {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--accent);
  font-weight: 700; font-size: 12px; font-family: inherit; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 6px; cursor: pointer;
}
.ann-sym:hover { border-color: var(--accent); }

/*
 * Price and size, sitting with the ticker rather than after the headline —
 * a trader reads "who, at what, how big" as one glance, then the news.
 * Empty for a company whose price is not asked for, or that has none; the
 * row simply closes up rather than holding a gap for a number that is not
 * coming. One whose price is on its way keeps its room (.held).
 */
.ann-px {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ann-px:empty { display: none; }
/* A company whose price is asked for keeps the price's room from the first paint. On a wide row it sits beside the
   ticker, as wide as a price with its move and size, so a long category beside it wraps (or not) from the first
   paint and never moves when the price lands. A narrow row wraps anyway, so there the price has a line of its own
   under the ticker's. */
.ann-px.held { min-width: 232px; }
.ann-px.held:empty { display: inline-flex; }
@media (max-width: 1024px) {
  .ann-px.held { order: 9; flex-basis: 100%; min-width: 0; min-height: 20px; line-height: 20px; }
}
.px-none { color: var(--dim); }
.px-ltp { font-weight: 700; color: var(--ink); }
.px-ltp.up { color: var(--good); }
.px-ltp.down { color: var(--bad); }
.px-chg { font-weight: 650; color: var(--dim); }
.px-chg.up { color: var(--good); }
.px-chg.down { color: var(--bad); }
.px-cap {
  color: var(--dim); font-weight: 600;
  padding-left: 7px; border-left: 1px solid var(--line);
}
.ann-co { font-size: 12.5px; color: var(--dim); margin: 2px 0 4px; }
.ann-acts { display: flex; gap: 16px; align-items: center; margin-top: 6px; }

/* The search card lets its list of matches hang over the tape below it. */
#panel-company > .card:first-child { overflow: visible; }
.suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); overflow: hidden; max-height: 300px; overflow-y: auto;
}
.suggest-row {
  display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 14px; cursor: pointer; font-family: inherit; color: var(--text);
}
.suggest-row:last-child { border-bottom: 0; }
.suggest-row:hover { background: var(--surface-2); }
.suggest-sym { font-weight: 700; font-size: 13px; color: var(--accent); min-width: 92px; }
.suggest-name { font-size: 13px; color: var(--muted); }

/* Way back from a company briefing to the market-wide tape. */
.co-back { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.co-back .btn { flex: none; }
/* A phone: the company's name on its own row under Back, never squeezed into a narrow column beside it. */
@media (max-width: 640px) { .co-back { flex-wrap: wrap; gap: 8px 12px; } .co-crumb { flex-basis: 100%; } }
.co-crumb { font-size: 13px; color: var(--dim); font-weight: 600; }

/* ---- financial tables ------------------------------------------------
   A percentage on its own is not something a trader can weigh. Each cell
   leads with the actual figure and puts the comparison beneath it, so the
   number is what the eye lands on and the move is the supporting detail. */
table.fin td { padding: 12px 16px; vertical-align: top; }
table.fin th { padding: 11px 16px; }
.fin-cell { min-width: 132px; }
.fin-now {
  font-size: 17px; font-weight: 700; letter-spacing: -.2px;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.fin-vs {
  font-size: 12.5px; color: var(--dim); margin-top: 3px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.fin .c-price .sub {
  display: block; font-size: 12px; font-weight: 400; color: var(--dim); margin-top: 2px;
}

/* Latest-quarter tiles carry the headline figures — give them real weight. */
#coBody .tiles { gap: 12px; }
#coBody .co-tiles { margin: 0; padding: 16px 20px; }
#coBody .tile .v { font-size: 26px; }
#coBody .tile .x { font-size: 13px; font-weight: 600; margin-top: 5px; }
/* Figures sized to their own tile at every width, not to the screen: the widest (a lakh-crore loss,
   "−1,02,345.00", 6.5em) fits however many columns there are, and the four share one size, so the
   card is the same height loading and landed. */
#coBody .co-tiles .tile { container-type: inline-size; min-width: 0; }
#coBody .co-tiles .tile .v { font-size: clamp(14px, 14cqi, 26px); overflow-wrap: anywhere; }
#coBody .co-unit { white-space: nowrap; }
@media (max-width: 640px) {
  /* Two columns on a phone, narrower than their figures may be. */
  #coBody .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #coBody .co-tiles { padding: 14px; }
  #coBody .tile { padding: 12px; }
}

/* Section headings should separate the briefing into scannable blocks. */
#coBody .card { margin-bottom: 18px; }
#coBody .card-head { padding: 15px 20px; }
#coBody .card-title { font-size: 16.5px; }

/* A data-provenance note: quiet, but present where the numbers are read. */
.src-note {
  font-size: 13px; color: var(--muted); line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 11px 15px; margin-bottom: 18px;
}

/* ---- what the model marked as load-bearing --------------------------- */
mark.key {
  background: color-mix(in srgb, var(--warn) 26%, transparent);
  color: inherit; font-weight: 650; padding: 0 3px; border-radius: 3px;
}
.brief-text { margin: 0 0 14px; font-size: 15.5px; line-height: 1.62; }
.co-list li { margin-bottom: 8px; line-height: 1.55; }

/* ---- market panel ---------------------------------------------------- */
.card.market { padding: 20px 22px; }
.market-top { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.mkt-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.mkt-price {
  font-size: 34px; font-weight: 750; letter-spacing: -.9px;
  font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 12px;
}
.mkt-sub { font-size: 12.5px; color: var(--dim); margin-top: 6px; }
.market-spark { flex: 1; min-width: 220px; }
.spark { width: 100%; height: 58px; display: block; }

.rng { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--dim);
       font-variant-numeric: tabular-nums; margin-top: 6px; }
.rng-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line); position: relative; }
.rng-bar i {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
}

.mstats {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.mstat { display: flex; flex-direction: column; gap: 2px; }
.mk { font-size: 11.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.mv { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- loading skeletons -----------------------------------------------
   Shaped like the content that is coming, so the page does not reflow when
   it lands and the wait reads as progress rather than a stalled request. */
.sk-line {
  height: 13px; border-radius: 6px; margin: 9px 0;
  background: linear-gradient(90deg,
    var(--surface-2) 25%,
    color-mix(in srgb, var(--line) 70%, var(--surface-2)) 37%,
    var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.5s ease-in-out infinite;
}
@keyframes sk-shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

.sk-title { height: 17px; margin: 0; }
.sk-sub   { height: 10px; margin: 6px 0; }
.sk-big   { height: 24px; margin: 8px 0; }
.sk-price { height: 34px; margin: 10px 0; }
.sk-spark { height: 58px; margin: 0; }
.sk-gap   { height: 12px; }
.sk-pill  { width: 74px; height: 24px; border-radius: 20px; background: var(--surface-2); }
.sk-row   { display: flex; gap: 26px; align-items: center; }
.sk-row .sk-line { flex: none; }

/* The card itself stays quiet while its contents are still arriving. */
.card.sk { border-style: dashed; }
/* Placeholder words: set in the font and line of the words that replace them,
   so a card has its final height while it loads, and shown as a shimmer. */
.sk-t, .sk-t * { color: transparent !important; }
.sk-t {
  border-radius: 6px; user-select: none; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--line) 70%, var(--surface-2)) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: sk-shimmer 1.5s ease-in-out infinite;
}
.co-retry { margin-left: 6px; vertical-align: baseline; }
/* The card a Retry was pressed on holds focus: a ring for the keyboard, none for a tap. */
#coBody .card[data-co-part]:focus { outline: none; }
#coBody .card[data-co-part]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "Further analysis" when it is not there to open: the row keeps its button's size, quietly. */
.fin-more-na, .fin-more-na:hover { cursor: default; color: var(--dim); border-color: var(--line); }
/* The market card's placeholder (marketSkeleton): its own layout, its words as shimmer, its chart and bars hidden. */
.market.ghost :is(.mkt-label, .mkt-asof, .mkt-price, .mkt-sub, .chart-cap > span, .rng > span, .rng-dates > span, .mk, .mv) {
  color: transparent; width: fit-content; align-self: flex-start; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--line) 70%, var(--surface-2)) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: sk-shimmer 1.5s ease-in-out infinite;
}
.market.ghost :is(.pill, svg, .rng-bar, strong) { visibility: hidden; }

/* An OFS book's rows on their way. The chart's axis and key and the ladder's
   toolbar are the real ones, so they wrap as they will; the curve's stand-in
   is the svg's height, and the ladder's is its full scroll box — only a book
   too long to fit that box arrives without its rows (api/state.mjs). */
.depth-chart .sk-plot { height: 140px; margin: 0; }
.sk-hide { visibility: hidden; }
.ladder-due .ladder-bar { opacity: .6; }
.ladder-due .sk-ladder { height: min(72vh, 760px); padding: 6px 20px; overflow: hidden; }   /* .panel .table-scroll's cap */

@media (prefers-reduced-motion: reduce) {
  .sk-line, .sk-t, .market.ghost * { animation: none; }
}

/* ---- the wire -------------------------------------------------------
   A broadcast indicator, not decoration: it pulses only while the feed is
   actually being polled, so a still dot means something is wrong. */
.wire-head { align-items: flex-start; }
.wire-title { display: flex; gap: 13px; align-items: flex-start; margin-right: auto; }
.wire-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.wire-sub strong { color: var(--warn); font-weight: 700; }
/* A phone: the counts line keeps two lines' room from the first paint (it says "Loading…" in one), and drops its
   lead-in so the counts fit in them. */
@media (max-width: 640px) { .wire-sub { min-height: 2.9em; } }
@media (max-width: 480px) { .wire-lead { display: none; } }

.wire-dot {
  position: relative; flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--good); margin-top: 6px;
}
/* Two rings, offset, so the pulse reads as a transmission rather than a blink. */
.wire-dot::before,
.wire-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--good); animation: wire-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
.wire-dot::after { animation-delay: 1.1s; }
@keyframes wire-ping {
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
.wire-dot.off { background: var(--bad); }
/* Not yet heard from: grey and still, never the green of a live tape. */
.wire-dot.wait { background: var(--dim); }
.wire-dot.wait::before, .wire-dot.wait::after { animation: none; opacity: 0; }
.wire-dot.off::before, .wire-dot.off::after { background: var(--bad); animation-duration: 1.1s; }

@media (prefers-reduced-motion: reduce) {
  .wire-dot::before, .wire-dot::after { animation: none; opacity: .3; }
}

/* =====================================================================
   Polish pass — the difference between a working tool and one that feels
   like a product. Nothing here changes layout; it tightens the type scale,
   makes elevation consistent, and gives every control a real focus state.
   ===================================================================== */

/* Numbers are the content of this site. Tabular figures stop them jittering
   as they tick, and align them down a column. */
.tile .v, .fin-now, .fin-vs, .mkt-price, .mv, .verdict-headline,
td, th, .ann-at, .chip-date, .pill, .ipo-odds, .ipo-times {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01" 1;
}

/* A single elevation scale, so cards sit in a consistent plane. */
.card {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent),
              0 6px 20px color-mix(in srgb, var(--text) 6%, transparent);
}
.card.sk:hover { box-shadow: none; }

/* Headings: tighter tracking reads as more considered at large sizes. */
.card-title { letter-spacing: -.24px; }
.verdict-headline { letter-spacing: -.8px; }
.mkt-price { letter-spacing: -1px; }

/* Tabs — a fuller target and a clearer selected state. */
.tabs { gap: 2px; }
.tab {
  /* 14px a side: with the labels at their intended size, an owner's full row still fits a laptop
     with every count at three digits (Deals, Results, Insider) and room to spare. */
  border-radius: 9px 9px 0 0; padding: 13px 14px;
  transition: color .15s ease, background .15s ease;
}
.tab:hover:not([aria-selected="true"]) {
  color: var(--text); background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.tab[aria-selected="true"] { border-bottom-width: 2.5px; }
/* More tabs past an edge: that side fades out (tabEdges sets the classes from the scroll position). */
.tabs.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.tabs.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.tabs.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.tabs { scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
/* A laptop strip that would overflow (the tester's twelve tabs): set tighter so every tab and its count fit. */
.tabs.tight { gap: 0; } .tabs.tight .tab { padding: 13px 10px; font-size: 14px; } .tabs.tight .tab .count { margin-left: 5px; }
/* A phone: the strip stays under the header as the page scrolls, so the tabs are never a long scroll away. The bar
   around it is what sticks and paints the page's colour: the strip's own edge fade (a mask) never lets the page show through. */
@media (max-width: 720px) {
  .tabs-bar { position: sticky; top: var(--hdr-h, 0px); z-index: 35; background: var(--bg); }
}

/* Header: let it float over content rather than sit on a hard seam. */
header { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
/* (removed: box-shadow traced the img rectangle, not the bull) */

/* Every interactive element gets a visible keyboard focus ring — the site is
   navigable without a mouse, and on a phone this is what screen readers key on. */
:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
:where(button, a, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* Inputs: a clear focused state, since this is where offers are entered. */
.field input:focus, .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  outline: none;
}

/* Tables read better with a hairline zebra than with heavy borders. */
tbody tr { transition: background .12s ease; }
thead th {
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dim); font-weight: 700;
}

/* Buttons gain a little physicality on press. */
.btn { transition: border-color .15s, background .15s, transform .06s; }
.btn:active { transform: translateY(1px); }
.btn.primary:hover { filter: brightness(1.06); }

/* Chips and pills: consistent height so rows line up. */
.pill, .chip { line-height: 1.35; }

/* Long content should never touch the viewport edge on a phone. */
@media (max-width: 640px) {
  .wrap { padding: 0 14px 56px; }
  .card-head, .card-body { padding-left: 16px; padding-right: 16px; }
  .mkt-price { font-size: 28px; }
  .verdict-headline { font-size: 24px; }
  .wire-title { gap: 10px; }
}

/* ---- the analyse action ---------------------------------------------
   This is the most valuable thing on the announcements list — it reads the
   filing, pulls the reported numbers and explains the trend — and it was
   rendering as a footnote link. It now looks like what it is. */
.ann-acts {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 12px;
}
.ann-file {
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.ann-file:hover { color: var(--accent); text-decoration: underline; }

.ann-analyse {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: auto; padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 10px; cursor: pointer; font-family: inherit;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
  transition: background .16s ease, border-color .16s ease, transform .06s ease;
}
.ann-analyse svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.ann-analyse span { font-size: 13.5px; font-weight: 700; letter-spacing: -.1px; }
/* The explainer earns the click: it says what you get, not what happens. */
.ann-analyse em {
  font-style: normal; font-size: 12px; font-weight: 500;
  color: var(--muted); padding-left: 9px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.ann-analyse:hover {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.ann-analyse:hover em { color: color-mix(in srgb, var(--on-accent) 78%, transparent); border-left-color: color-mix(in srgb, var(--on-accent) 34%, transparent); }
.ann-analyse:active { transform: translateY(1px); }

/* The row itself should feel like something you can act on. */
.ann { transition: background .14s ease; }
.ann:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.ann.material:hover { background: linear-gradient(90deg, var(--warn-dim), transparent 62%); }

@media (max-width: 640px) {
  .ann-analyse { margin-left: 0; width: 100%; justify-content: center; }
  .ann-analyse em { display: none; }   /* the label alone is enough on a phone */
}

/* When a filing states no prior-year figures there is nothing to compare to.
   Saying so beats an empty slot, which reads as a rendering fault. */
.muted-note { color: var(--dim); font-weight: 500; font-style: italic; }

/* Settings lives in the header as a gear, so the tab row is four features and
   nothing else. It stays reachable from anywhere without occupying a slot
   next to the things people actually read. */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
}
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
.icon-btn.on {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}

/* ---------------------------------------------- run-up before an event */

/*
 * A collapsed check that sits under an event. Closed by default: most filings
 * are housekeeping and nobody wants sixty price tables open at once — this is
 * for the two or three that made someone stop and look.
 */
.ru { margin-top: 10px; }
.ru-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--muted); font-weight: 600; font-size: 12.5px; font-family: inherit;
  padding: 7px 12px; cursor: pointer; text-align: left;
  transition: border-color .15s, color .15s, background .15s;
}
.ru-toggle:hover { border-color: var(--accent); color: var(--ink); }
.ru-toggle.on { border-color: var(--accent); color: var(--accent); background: var(--accent-dim, var(--surface-2)); }
.ru-toggle svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; }
.ru-toggle em { font-style: normal; color: var(--dim); font-weight: 500; }
.ru-toggle.sm { padding: 5px 9px; gap: 6px; white-space: nowrap; }
.ru-toggle.sm span { font-size: 12px; }

.ru-body {
  margin-top: 10px; padding: 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px;
}
.ru-body.hide { display: none; }
.ru-load, .ru-note { color: var(--dim); font-size: 13px; }

/* The deal itself, above the windows — one value, not a time series. */
.ru-deal {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  font-size: 13px; color: var(--muted); margin-bottom: 12px;
  padding-bottom: 11px; border-bottom: 1px solid var(--line);
}
.ru-deal strong { color: var(--ink); }

.ru-table { font-size: 13px; }
.ru-table th, .ru-table td { padding: 7px 12px; font-variant-numeric: tabular-nums; }
.ru-table thead th { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
/*
 * Body cells inherit the global `th` rule, which is written for column
 * headings — sticky, uppercase. Both are wrong for a row label sitting in the
 * table body, and the sticky one quietly detaches the label from its own row.
 */
.ru-table tbody th {
  position: static; text-transform: none; letter-spacing: 0;
  text-align: left; font-size: 13px; font-weight: 650;
  color: var(--muted); white-space: nowrap; background: transparent;
}
.ru-table tbody tr:hover { background: var(--surface); }
.ru-dim td { color: var(--dim); font-style: italic; }
/* Right-aligned like every other numeric column, so it sits under its heading. */
.ru-fr { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.ru-sig { color: var(--dim); font-size: 12px; }

/*
 * The badge is the loudest thing in the panel, so it is also the rarest —
 * it fires on the tightest window that trips and on no other, because the
 * windows overlap and three marks for one move would read as three events.
 */
.ru-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
.ru-badge.watch { background: var(--warn-dim); color: var(--warn); }
.ru-badge.flag  { background: var(--bad-dim);  color: var(--bad); }

/*
 * The anchor line is deliberately not a tooltip. If a reader misses which
 * close the run-up was measured to, every number above can be read backwards.
 */
.ru-foot {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--dim); line-height: 1.5;
}
.ru-foot strong { color: var(--muted); }
.ru-after { color: var(--muted); }
.ru-src { color: var(--dim); }

/* In the block-deal table the panel spans a row of its own. */
.ru-cell { text-align: right; white-space: nowrap; }
.ru-tr > td { padding: 0 12px; border-top: 0; }
.ru-tr .ru-body { margin: 0 0 12px; }

/*
 * The run-up headline, shown in the block-deal row itself.
 *
 * Loud only when it has earned it: a plain four-week move reads as quiet
 * context, and the flag colour is reserved for a move that was both unusual
 * for this stock and still holding near the top of its range.
 */
.ru-chip {
  display: inline-block; margin-right: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--dim);
}
.ru-chip.empty { display: none; }
.ru-chip.up   { color: var(--good); }
.ru-chip.down { color: var(--bad); }
.ru-chip.watch { background: var(--warn-dim); color: var(--warn); }
.ru-chip.flag  { background: var(--bad-dim);  color: var(--bad); }

/* A window with less listed history than its label implies says so, quietly. */
.ru-short {
  margin-left: 7px; padding: 1px 6px; border-radius: 4px;
  background: var(--surface); color: var(--dim);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
}

/* ------------------------------------------------ settings moved into OFS */
.ofs-tools { display: flex; justify-content: flex-end; margin: -6px 0 14px; }

/* ------------------------------------------------------------- watchlist */
.watch-head { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; }
.watch-head .hint { font-size: 12.5px; }
.wchip {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2);
  overflow: hidden; transition: border-color .15s;
}
.wchip:hover { border-color: var(--accent); }
.wchip.on { border-color: var(--accent); background: var(--accent-dim); }
.wchip-open {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 0; background: none; color: var(--ink); font-family: inherit; cursor: pointer;
  padding: 7px 10px 7px 12px; text-align: left;
}
.wchip-open b { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); }
.wchip-open small { font-size: 11.5px; color: var(--dim); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wchip-x {
  border: 0; border-left: 1px solid var(--line); background: none; color: var(--dim);
  font-weight: 700; font-size: 15px; font-family: inherit; padding: 0 10px; cursor: pointer;
}
.wchip-x:hover { color: var(--bad); background: var(--bad-dim); }
.chip.add small { font-weight: 500; color: var(--dim); margin-left: 4px; }

/* -------------------------------------------- add-to-watchlist on the tape */
.ann-watch {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: auto; padding: 9px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 10px; cursor: pointer; font-family: inherit;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
  transition: background .16s ease, border-color .16s ease, transform .06s ease;
}
.ann-watch svg { width: 16px; height: 16px; flex: none; }
.ann-watch span { font-size: 13.5px; font-weight: 700; letter-spacing: -.1px; }
.ann-watch em {
  font-style: normal; font-size: 12px; color: var(--dim);
  border-left: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding-left: 9px;
}
.ann-watch:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ann-watch:hover em { color: color-mix(in srgb, var(--on-accent) 78%, transparent); border-left-color: color-mix(in srgb, var(--on-accent) 34%, transparent); }
.ann-watch:active { transform: translateY(1px); }
/* Already watching: quieter, and it reads as a way in rather than an action. */
.ann-watch.in {
  background: var(--good-dim); border-color: color-mix(in srgb, var(--good) 40%, transparent); color: var(--good);
}
.ann-watch.in:hover { background: var(--good); border-color: var(--good); color: var(--on-accent, #fff); }
@media (max-width: 640px) {
  .ann-watch { margin-left: 0; width: 100%; justify-content: center; }
  .ann-watch em { display: none; }
}

/* ---------------------------------------------- price / fundamental switch */
.co-views { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -4px 0 16px; }
.co-views .seg-btn.on { background: var(--accent); color: var(--on-accent); }
/* Trend is another tab, not a view of this page: a separate button beside the two views, marked as leaving. */
.co-views .co-trend-go { border: 1px solid var(--line); border-radius: 9px; background: transparent; }
/* A button's two lengths of words (lbl2): the long ones, until a phone's row is too narrow for three. */
.lbl-s { display: none; }
@media (max-width: 420px) { .lbl-l { display: none; } .lbl-s { display: inline; } }
@media (max-width: 720px) {
  .co-views .seg { max-width: 100%; }
  .co-views .seg-btn { flex: 1 1 auto; min-width: 0; }
}
.co-views-sub { font-size: 12.5px; color: var(--dim); }
.ru-inline { padding-top: 14px; }
/* The company page's windows while they load hold the three-window table's height, so the cards under them stay put. */
#coBody .ru-inline:has(> .ru-load) { min-height: 259px; }
@media (max-width: 640px) { #coBody .ru-inline:has(> .ru-load) { min-height: 277px; } }

/* --------------------------------------------------- chart labels + bands */
.chart-cap {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--dim); margin-bottom: 4px;
}
.chart-cap strong { color: var(--muted); font-weight: 650; }
.rng-k { min-width: 40px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.rng52 { margin-top: 8px; }
.rng52 .rng-bar { background: linear-gradient(90deg, var(--bad-dim), var(--line) 50%, var(--good-dim)); }
.rng-dates {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--dim); margin-top: 3px; padding-left: 50px;
}

/* ------------------------------------------------- financial analysis lens */
.fin-pick { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--dim); }
.fin-pick select {
  font-weight: 600; font-size: 13px; font-family: inherit; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 30px 6px 10px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.fin-pick select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.fin-sub { padding: 0 20px 10px; font-size: 12.5px; color: var(--dim); }

/* ---------------------------------------------------------- IPO sections */
.ipo-sec + .ipo-sec { margin-top: 30px; }
.ipo-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ipo-sec-head h2 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.2px; }
.ipo-sec-sub { font-size: 12.5px; color: var(--dim); }
.pill.dim { opacity: .6; }
.ipo-none { padding: 18px 20px; border: 1px dashed var(--line); border-radius: 12px; }

/* ------------------------------------------------------ search dropdown */
.suggest-row { width: 100%; text-align: left; }
.suggest-row.active { background: var(--accent-dim); }
.suggest-row.active .suggest-sym { color: var(--accent); }
.suggest-act { margin-left: auto; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.suggest-row.active .suggest-act { color: var(--accent); font-weight: 600; }
.suggest-hint { padding: 7px 12px; font-size: 11.5px; color: var(--dim); border-top: 1px solid var(--line); background: var(--surface-2); }
.suggest-hint kbd {
  font-weight: 600; font-size: 10.5px; font-family: inherit; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); margin-right: 2px;
}
mark.q { background: color-mix(in srgb, var(--accent) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }


/* --------------------------------------------------- exchange tag on a row */
.ann-src {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line);
  color: var(--dim); background: var(--surface);
}
.ann-src.bse  { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.ann-src.both { color: var(--muted); }
.ann-sym.static { cursor: default; color: var(--muted); }
.ann-sym.static:hover { border-color: var(--line); }

/* ------------------------------------------------------------ read aloud */
.ann-speak {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
  cursor: pointer; padding: 0; margin-left: 2px;
  transition: color .15s, border-color .15s, background .15s;
}
.ann-speak svg { width: 16px; height: 16px; }
.ann-speak .horn { fill: currentColor; }
.ann-speak .w { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ann-speak:hover { color: var(--accent); border-color: var(--accent); }
.ann-speak.speaking { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.ann-speak.speaking .w1 { animation: wave 1s ease-in-out infinite; }
.ann-speak.speaking .w2 { animation: wave 1s ease-in-out .25s infinite; }
@keyframes wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ann-speak.speaking .w { animation: none; } }

.wire-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.auto-read {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-weight: 600; font-size: 12.5px; font-family: inherit; padding: 6px 11px; border-radius: 9px; cursor: pointer;
}
.auto-read svg { width: 15px; height: 15px; }
.auto-read .horn { fill: currentColor; }
.auto-read .w { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.auto-read:hover { border-color: var(--accent); color: var(--ink); }
.auto-read.on { background: var(--good-dim); border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good); }
.auto-read.on .w1 { animation: wave 1.2s ease-in-out infinite; }
.auto-read.on .w2 { animation: wave 1.2s ease-in-out .3s infinite; }

/* ------------------------------------- price / fundamental from the tape */
.ann-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.ann-right .ann-watch { margin-left: 0; }
.ann-go { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface-2); }
.ann-go-btn {
  border: 0; background: none; color: var(--muted); font-weight: 600; font-size: 12.5px; font-family: inherit;
  padding: 8px 12px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.ann-go-btn + .ann-go-btn { border-left: 1px solid var(--line); }
.ann-go-btn:hover { background: var(--accent-dim); color: var(--accent); }
@media (max-width: 720px) {
  /* One row of actions per filing on a phone: the two analysis buttons share
     the width and Watch sits beside them, instead of three stacked bars. */
  .ann-right { width: 100%; flex-wrap: nowrap; justify-content: stretch; gap: 8px; }
  .ann-go { flex: 1 1 auto; min-width: 0; }
  .ann-go-btn { flex: 1; padding: 8px 6px; font-size: 12px; }
  .ann-right .ann-watch { flex: none; }
}


/* ------------------------------------------------------------ voice picker */
.voice-pick { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--dim); }
.voice-pick select {
  max-width: 200px; font-weight: 600; font-size: 12.5px; font-family: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 26px 6px 10px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.voice-pick select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Not an Indian voice on this machine: say so quietly, with the fix in the tooltip. */
.voice-pick.warn select { border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.voice-pick.warn span::after { content: " ⚠"; color: var(--warn); }


/* ------------------------------------------ further analysis, folded away */
.fin-more { display: flex; justify-content: flex-end; padding: 8px 14px; border-top: 1px solid var(--line); }
.fin-more-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
  font-weight: 600; font-size: 12.5px; font-family: inherit; padding: 6px 11px; border-radius: 8px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.fin-more-btn:hover { color: var(--accent); border-color: var(--accent); }
.fin-more-btn .chev { width: 14px; height: 14px; transition: transform .18s ease; }
.fin-more-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.fin-more-btn.on .chev { transform: rotate(180deg); }
.fin-more-body { padding: 4px 20px 18px; border-top: 1px solid var(--line); }
.fin-more-body.hide { display: none; }
.fin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.fin-cols .co-h { margin-top: 12px; }
@media (max-width: 720px) { .fin-cols { grid-template-columns: 1fr; } }

/* A twin filing: shown once, under the exchange that had it first. */
.ann-src small { font-size: 9px; font-weight: 600; margin-left: 3px; opacity: .7; letter-spacing: .04em; }


/* ------------------------------------------------- the BSE list, on the page */
.cats-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-weight: 600; font-size: 12.5px; font-family: inherit; padding: 6px 11px; border-radius: 9px; cursor: pointer;
}
.cats-btn:hover { border-color: var(--accent); color: var(--ink); }
.cats-btn.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.cats-btn .chev { width: 13px; height: 13px; transition: transform .18s; }
.cats-btn.on .chev { transform: rotate(180deg); }
/* On the tape the chevron says whether the list is open, not whether categories are picked. */
.wire-tools .cats-btn.on .chev { transform: none; }
.wire-tools .cats-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cats-panel { padding: 14px 20px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cats-intro { font-size: 12.5px; color: var(--dim); margin-bottom: 12px; max-width: 900px; line-height: 1.5; }
.cats-intro input[type=number] { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 7px; padding: 4px 8px; font: inherit; }
.cats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; }
.cats-cat { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cats-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background: none; color: var(--ink); font-weight: 500; font-size: 13px; font-family: inherit;
  padding: 6px 4px; text-align: left; cursor: pointer; border-radius: 4px;
}
.cats-item:hover { background: var(--surface); color: var(--accent); }
.cats-item.on { background: var(--accent-dim); color: var(--accent); font-weight: 650; }
.cats-n { font-size: 11px; color: var(--dim); white-space: nowrap; display: inline-flex; gap: 8px; }
.cats-n b { font-weight: 700; }
.cats-n b.bse { color: var(--brand); }
.cats-n b.nse { color: var(--muted); }
.cat-filter-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.cat-filter-bar .btn { margin-left: auto; }
.ann-cat-parent { color: var(--dim); font-weight: 500; }

.cat-filter-bar { flex-wrap: wrap; }
.cat-filter-acts { margin-left: auto; display: inline-flex; gap: 8px; }
.cat-filter-bar .btn { margin-left: 0; }

.src-count { color: var(--dim); }
.bse-warn { color: var(--warn); font-weight: 600; }
.seg.overridden { opacity: .45; }
/* How fresh the tape is, at the end of the counts line: a fixed width, so the ticking seconds never re-wrap it. */
.tape-age { display: inline-block; min-width: 8.5em; color: var(--dim); font-variant-numeric: tabular-nums; }
.tape-age.late { color: var(--warn); font-weight: 600; }
/* Under the rows: how many more there are, and the way to them. */
.tape-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 0 2px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
/* The tape's room before its first paint, so the page's foot never starts in view and is then pushed away. */
.tape-boot:empty { min-height: 720px; }
/* Rows' worth of room while the first answer is on its way. */
.ann-skel { height: 132px; padding: 16px 0; border-bottom: 1px solid var(--line); box-sizing: border-box; }
.ann-skel i { display: block; height: 12px; margin-bottom: 14px; border-radius: 6px; background: var(--surface-2); }
.ann-skel i:nth-child(1) { width: 38%; } .ann-skel i:nth-child(2) { width: 88%; } .ann-skel i:nth-child(3) { width: 64%; }
.ann-skel:last-child { border-bottom: 0; }


/* ================================================================ accounts */
.gate.auth {
  background:
    radial-gradient(900px 500px at 15% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
    var(--bg);
  backdrop-filter: none; display: grid; grid-template-rows: 1fr auto; place-items: center;
}
.auth-card {
  width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 30px 30px 24px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.45);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand img { width: 56px; height: auto; aspect-ratio: 200 / 134; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.auth-brand b { display: block; font-size: 17px; letter-spacing: -.2px; }
.auth-brand span { display: block; font-size: 12.5px; color: var(--dim); }
.auth-card h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.3px; }
.auth-sub { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.auth-card form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 12px 0 0; }
.auth-card form input:not([type=checkbox]), .acct-form input, .invite-form input, .invite-form select {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font-size: 15px; font-family: inherit;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.auth-card form input:focus, .acct-form input:focus, .invite-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-check { display: flex !important; align-items: center; gap: 8px; font-weight: 500 !important; margin-top: 14px !important; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.auth-btn { width: 100%; margin-top: 18px; padding: 12px; font-size: 15px; }
.auth-err { margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: var(--bad-dim); color: var(--bad); font-size: 13px; }
/* An amber note: something to know, not a failure (an offer saved with a warning, offers that cannot be changed just now). */
.auth-note, .warn-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; background: var(--warn-dim); color: var(--warn); font-size: 13px; }
.auth-foot { margin: 16px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.auth-credit { padding: 14px; font-size: 12px; color: var(--dim); }
@media (max-width: 520px) { .auth-row { grid-template-columns: 1fr; } .auth-card { padding: 22px 18px; } }

/* header account menu. Its slot is held from the first paint at the chip's
   width, so the status and the buttons never move when the chip arrives. */
.user-menu { position: relative; width: 136px; flex: none; display: flex; justify-content: flex-end; }
.user-menu.hide { display: none; }
.user-chip { max-width: 100%; }
.user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A phone shows the avatar alone; the name is in the menu it opens. The menu
   hangs from the header's right edge, not from the avatar's narrow slot (which
   would push it off the left of the screen), inside the screen at any width. */
@media (max-width: 640px) {
  .user-menu { width: 38px; position: static; }
  .user-chip { padding: 5px; }
  .user-chip .user-name, .user-chip svg { display: none; }
  .header-in { position: relative; }
  .header-in .user-pop { right: 14px; top: calc(100% + 4px); max-width: calc(100vw - 28px); }
}
.user-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer;
}
.user-chip:hover { border-color: var(--accent); }
.user-chip svg { width: 13px; height: 13px; color: var(--dim); }
.avatar {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 12.5px; flex: none;
}
.avatar.big { width: 40px; height: 40px; font-size: 17px; }
.user-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 250px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
}
.user-pop.hide { display: none; }
.user-pop-head { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.user-pop-name { font-weight: 700; }
.user-pop-sub { font-size: 12.5px; color: var(--dim); margin-top: 2px; display: flex; gap: 6px; align-items: center; }
.user-pop-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: none;
  color: var(--ink); font-weight: 500; font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.user-pop-item:hover { background: var(--surface-2); }
.user-pop-item.danger { color: var(--bad); border-top: 1px solid var(--line); }

/* modal + toast */
.modal-back { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; overflow-y: auto; overscroll-behavior: contain; align-items: safe center;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(3px); }
.modal { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 18px; }
.acct-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.acct-name { font-weight: 700; font-size: 15px; }
.acct-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 10px; }
.acct-form .btn { margin-top: 14px; }
/* The notices (app.js notify): a stack fixed at the foot of the screen, centred, the newest at the foot. Only the
   notices take a press; the gaps and an empty stack pass it to the page under them. Each leaves drifting up and
   fading like a cloud; a level notice is tinted by its direction, with its arrow and its word. Under an open menu, sheet,
   drawer or dialog (z 59-70), so a notice's 50 s never stands over what the reader opened; over the page and its lanes. */
.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--lift, 0px)); transform: translateX(-50%); z-index: 58;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: min(480px, calc(100vw - 32px)); pointer-events: none;
}
.toast-i {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; max-width: 100%; box-sizing: border-box;
  background: var(--ink); color: var(--bg); padding: 8px 6px 8px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  box-shadow: var(--shadow); animation: toast-in .25s ease-out both;
}
/* Where the foot of the screen is short of room (a lane's first row low on a phone), hung under the tabs, the newest
   nearest them (app.js toastPlace); a notice with no room anywhere waits off screen, read out all the same. */
.toast.at-top { top: var(--top, 0px); bottom: auto; flex-direction: column-reverse; }
.toast-i.wait { position: absolute; left: -200vw; top: 0; width: 100%; animation: none; pointer-events: none; }
/* How many wait: a line of its own at the stack's far end, its height fixed (TOAST_MORE_H in app.js), so saying it never
   changes a notice's height or where the stack stands; one line, cut short rather than wrapped. Takes no press. */
.toast-more { flex: none; align-self: center; box-sizing: border-box; height: 22px; max-width: 100%; padding: 0 10px; border-radius: 11px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 12px; font-weight: 600; line-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.toast-more[hidden] { display: none; }
/* Back from waiting (a scroll made room): there at once, its arrival not played again. */
.toast-i.back { animation: none; }
.toast-m { flex: 1 1 auto; padding: 3px 0; min-width: 0; overflow-wrap: anywhere; }
.toast-dir { flex: none; padding: 3px 0; font-size: 12px; line-height: 1.6; }
.toast-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent;
  color: inherit; opacity: .75; font-family: inherit; font-size: 19px; line-height: 1; cursor: pointer; }
.toast-x:hover, .toast-x:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.toast-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.toast-i.tn-up { background: var(--good-dim); color: var(--text); border: 1px solid var(--good); box-shadow: inset 4px 0 0 var(--good), var(--shadow); }
.toast-i.tn-down { background: var(--bad-dim); color: var(--text); border: 1px solid var(--bad); box-shadow: inset 4px 0 0 var(--bad), var(--shadow); }
.tn-up .toast-dir { color: var(--good); } .tn-down .toast-dir { color: var(--bad); }
.toast-i.out { animation: toast-cloud 1.5s cubic-bezier(.33, .1, .3, 1) forwards; pointer-events: none; }
.toast-i.out.quick { animation-duration: .45s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--enter, 14px)); } }
/* Transform and opacity alone, so the browser's compositor draws the rise (a blur filter would put it on the page's own thread). */
/* It rises 48 px, less where that would reach over the header, the tabs or a lane's first row (--rise, app.js toastSpot). */
@keyframes toast-cloud { 35% { opacity: .85; } to { opacity: 0; transform: translateY(calc(-1 * var(--rise, 48px))) scale(1.05); } }
/* Reduced motion: in and out each their own fade (one name for both would never restart, and the notice would vanish). */
@keyframes toast-fade-in { from { opacity: 0; } }
@keyframes toast-fade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast-i { animation: toast-fade-in .2s ease-out both; } .toast-i.out { animation: toast-fade 1.5s forwards; } }
@media (pointer: coarse) { .toast-x { width: 40px; height: 40px; margin: -7px -2px -7px 0; } }
/* a phone: four notices in about a quarter of the screen */
@media (max-width: 720px) { .toast { gap: 6px; } .toast-i { font-size: 13px; padding: 7px 6px 7px 12px; } }

/* access page */
table.acc td, table.acc th { padding: 11px 14px; white-space: normal; }
.p-name { display: flex; align-items: center; gap: 10px; text-align: left; }
.p-name strong { display: inline-block; }
.you { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-left: 6px; }
.p-acts { text-align: right; white-space: nowrap; }
.p-acts .btn { margin-left: 4px; }
/* Headings on one line ("Last sign-in"), and a row's four actions side by side (the cell rule above was outranked). */
table.acc th { white-space: nowrap; }
table.acc td.p-acts { white-space: nowrap; }
/* A phone: each person a block, the name over its actions, nothing scrolled sideways out of view. */
@media (max-width: 600px) {
  table.acc-people, table.acc-people tbody, table.acc-people tr { display: block; width: 100%; }
  table.acc-people thead { display: none; }
  table.acc-people tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.acc-people td { display: inline-block; padding: 4px 6px 4px 12px; border: 0; text-align: left; vertical-align: middle; }
  table.acc-people td:first-child { display: block; padding-top: 6px; }
  table.acc-people td[data-l]::before { content: attr(data-l) " · "; color: var(--muted); font-size: 12px; }
  table.acc-people td.p-acts { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; padding-right: 12px; }
  table.acc-people .p-acts .btn { margin-left: 0; min-height: 32px; }
}
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); background: var(--bad-dim); }
.row-off td { opacity: .6; }
.invite-form { display: grid; grid-template-columns: 1.4fr 1fr .8fr auto; gap: 12px; align-items: end; }
.invite-form label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.invite-form .btn { padding: 11px 16px; }
@media (max-width: 760px) { .invite-form { grid-template-columns: 1fr 1fr; } }
.invite-out { margin-top: 16px; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-2); }
.invite-link { display: flex; gap: 8px; margin: 8px 0; }
.invite-link input { flex: 1; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 9px 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.ev-list { display: flex; flex-direction: column; gap: 0; }
.ev { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: 13px; align-items: baseline; }
.ev:last-child { border-bottom: 0; }
.ev-t { color: var(--dim); font-variant-numeric: tabular-nums; }
.ev-bad .ev-what { color: var(--bad); }
.ev-ua { text-align: right; }
@media (max-width: 640px) { .ev { grid-template-columns: 1fr; gap: 2px; } .ev-ua { text-align: left; } }

.auth-link { display: block; margin-top: 8px; border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.auth-link:hover { text-decoration: underline; }


/* ---------------------------------------------------------- private beta */
.auth-badge {
  display: inline-block; margin: -6px 0 14px; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
}
.auth-link.inline { display: inline; margin: 0; }
.count.warn { background: var(--warn); color: #fff; }
.pending-card { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pending-list { display: flex; flex-direction: column; gap: 10px; }
/* A long name wraps, and on a phone the buttons take their own line under it, so Decline is never cut off. */
.pending-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pending-row > div { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.pending-acts { margin-left: auto; display: inline-flex; gap: 8px; }
@media (max-width: 520px) { .pending-acts { flex-basis: 100%; justify-content: flex-end; } }
.btn.primary.sm { padding: 6px 12px; font-size: 12.5px; }

/* --------------------------------------------------------- compact watch */
.ann-watch { padding: 7px 12px; gap: 7px; }
.ann-watch span { font-size: 13px; }
.ann-watch svg { width: 15px; height: 15px; }
.ann-sym.bse { color: var(--brand); }

/* ------------------------------------------------------------ voice panel */
.voice-wrap { position: relative; }
.voice-btn {
  display: inline-flex; align-items: center; gap: 7px; max-width: 200px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-weight: 600; font-size: 12.5px; font-family: inherit; padding: 6px 11px; border-radius: 9px; cursor: pointer;
}
.voice-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-btn svg { width: 15px; height: 15px; flex: none; }
.voice-btn:hover, .voice-btn.on { border-color: var(--accent); color: var(--accent); }
.voice-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: 340px; max-width: calc(100vw - 40px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px 14px;
}
.voice-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vg { padding: 8px 0; border-top: 1px solid var(--line); }
.vg-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.vg-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.vg-item:hover { background: var(--surface-2); }
.vg-item.on { background: var(--accent-dim); color: var(--accent); font-weight: 650; }
.vg-item input { accent-color: var(--accent); }
.vg-item small { margin-left: auto; color: var(--dim); font-size: 11px; }
.vg-none { font-size: 12.5px; color: var(--dim); padding: 4px 8px; line-height: 1.45; }
.vg-title small { margin-left: 6px; font-size: 9.5px; letter-spacing: .08em; color: var(--brand); border: 1px solid var(--brand-dim); border-radius: 999px; padding: 1px 6px; vertical-align: 1px; }
.vg-title.vg-sep { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); }
.v-slider { display: grid; grid-template-columns: 62px 1fr 52px; align-items: center; gap: 10px; padding: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.v-slider input { width: 100%; accent-color: var(--accent); }
/* A phone: small links and the sliders are at least a 32px target (the words stay their size). */
@media (max-width: 720px) {
  a.ann-file, button.rd-more, .ipo-foot a, .foot a { display: inline-flex; align-items: center; min-height: 32px; }
  .v-slider input[type=range] { height: 32px; margin: 0; }
}
.v-slider output { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.voice-panel .btn.sm { margin-top: 12px; }

/* ------------------------------------------------------------ block alerts */
.alert-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-weight: 600; font-size: 12.5px; font-family: inherit; padding: 5px 10px; border-radius: 8px; cursor: pointer;
}
.alert-btn svg { width: 14px; height: 14px; }
.alert-btn:hover { border-color: var(--accent); color: var(--ink); }
.alert-btn.on { background: var(--good-dim); border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good); }

/* Thumbs, not cursors: every control on the dense phone surfaces is at least
   40px tall, whatever its desktop size. */
@media (max-width: 720px) {
  .ann-speak, .wchip-x, .seg-btn, .ann-go-btn, .cats-item, .ru-toggle.sm, .ann-watch, .chip, .tab { min-height: 40px; }
  .ann-speak { min-width: 40px; }
}

/* A block deal printed today in this stock: the row wears a small amber tag. */
.ann-block { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--warn); background: var(--warn-dim); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ann-share { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: 9px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ann-share svg { width: 16px; height: 16px; }
.ann-share:hover { color: var(--accent); border-color: var(--accent); }
.wchip-px { display: block; font-size: 11.5px; margin-top: 2px; color: var(--muted); }
/* Chips of one size from the first paint, each with its price line's room kept: a price landing never widens a
   chip, re-wraps the strip or pushes the tape down. Two to a row on a phone. */
#coQuick { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); align-items: stretch; }
#coQuick > .chip.add { justify-self: start; }
.wchip { min-width: 0; }
.wchip-open { flex: 1 1 auto; min-width: 0; }
.wchip-open small { max-width: 100%; }
.wchip-px { min-height: 1.45em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  #coQuick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wchip-open { padding: 7px 6px 7px 10px; }
  .wchip-x { padding: 0 8px; }
  .wchip-px { font-size: 11px; }
  .wchip-px .px-cap { display: none; }
}
/* A narrow phone: two lines' room for the price, so a price and its move each keep a line whole rather than one
   being cut; still the same room from the first paint. */
@media (max-width: 400px) {
  .wchip-px { white-space: normal; min-height: 2.9em; max-height: 2.9em; line-height: 1.45; text-overflow: clip; }
  .wchip-px > span { white-space: nowrap; }
}
.wchip-px .px-ltp { font-weight: 650; color: var(--text); }
.wchip-px .px-chg.up { color: var(--good); } .wchip-px .px-chg.down { color: var(--bad); }

/* Category picker: a tick per row, one total per row, a footer to finish. */
.cats-item { display: flex; align-items: center; gap: 8px; }
.cats-tick { width: 16px; height: 16px; border: 1.5px solid var(--line); border-radius: 4px; font-size: 11px; line-height: 13px; text-align: center; color: var(--accent); flex: none; }
.cats-item.on .cats-tick { border-color: var(--accent); background: var(--accent-dim); }
.cats-label { flex: 1; text-align: left; }
.cats-n b { font-weight: 650; color: var(--muted); }
.cats-item.on .cats-n b { color: var(--accent); }
.cats-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.cats-foot .btn.primary { margin-left: auto; }
.cats-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-left: 4px; }
.mcap-pick select, .fa-set select { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 9px; padding: 7px 28px 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.mcap-pick.on select { border-color: var(--accent); color: var(--accent); background-color: var(--accent-dim); }
@media (max-width: 720px) { .mcap-pick select { min-height: 40px; } .cats-foot { flex-wrap: wrap; } }

/* Per-company rules */
.ann-rule { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: 9px; width: 34px; height: 34px; font-weight: 700; cursor: pointer; }
.ann-rule.set, .ann-rule:hover { color: var(--accent); border-color: var(--accent); }
.rule-pop { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface-2); display: grid; gap: 8px; }
.rule-head { display: flex; align-items: center; gap: 8px; } .rule-head .btn { margin-left: auto; }
/* A phone: the company's name on a line of its own under the ticker and the button, never squeezed into a column. */
@media (max-width: 720px) { .rule-head { flex-wrap: wrap; } .rule-head .hint { flex: 1 0 100%; order: 3; } }
.rule-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.rule-row input[type=number] { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 7px; padding: 4px 8px; }
.rules-table td, .rules-table th { padding: 6px 10px; }
/* The company under its ticker, one line: the table scrolls sideways on a phone rather than growing tall. */
.rules-table td .hint { display: block; max-width: 16em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
/* Deals */
.side { font-weight: 700; font-size: 11.5px; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; }
.side.buy { color: var(--good); background: rgba(47,179,111,.12); } .side.sell { color: var(--bad); background: rgba(230,80,80,.12); }
.pill.accent { color: var(--accent); background: var(--accent-dim); }
tr.repeat td { background: var(--accent-dim); }
.deals-tools { padding: 10px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
/* Insider */
table.insider td { vertical-align: top; } tr.hot td { background: rgba(47,179,111,.10); } tr.muted td { opacity: .5; }
/* Results strip */
.results-strip .card-head { flex-wrap: wrap; } .results-days { display: grid; gap: 12px; }
.results-day { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; }
.results-date { font-weight: 650; padding-top: 6px; }
@media (max-width: 720px) { .results-day { grid-template-columns: 1fr; } }
.share-row { margin-top: 10px; }
/* Deals: the "who" column reads left to right like a sentence */
#blocksBody table th:nth-child(4), #blocksBody table td:nth-child(4), table.insider th:nth-child(3), table.insider td:nth-child(3) { text-align: left; }
#blocksBody table td:nth-child(4) { max-width: 360px; }

/* Deals and insider tables: names wrap inside their own column, numbers keep their lanes */
#blocksBody table, table.insider { min-width: 980px; table-layout: fixed; }
#blocksBody table th:nth-child(1) { width: 64px; }
#blocksBody table th:nth-child(2), table.insider th:nth-child(2) { width: 160px; }
#blocksBody table th:nth-child(3) { width: 110px; }
#blocksBody table th:nth-child(4) { width: 260px; }
#blocksBody table th:nth-child(8) { width: 190px; }
#blocksBody table th:nth-child(9) { width: 150px; }
table.insider th:nth-child(1) { width: 70px; } table.insider th:nth-child(3) { width: 220px; } table.insider th:nth-child(4) { width: 70px; } table.insider th:nth-child(7) { width: 190px; }
#blocksBody table td, table.insider td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
#blocksBody table td.who, table.insider td.who { text-align: left; }
.who-name { display: block; font-weight: 500; line-height: 1.3; }
td.who .side { display: inline-block; margin-bottom: 3px; }
#blocksBody table td .hint, table.insider td .hint { white-space: normal; }
#blocksBody table td:nth-child(5), #blocksBody table td:nth-child(6), #blocksBody table td:nth-child(7), #blocksBody table td.seen { white-space: nowrap; }
#blocksBody table td.seen, #blocksBody table th:nth-child(1) { text-align: left; }
#blocksBody .ann-sym, table.insider .ann-sym { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Insider table lanes */
table.insider { min-width: 1040px; }
table.insider th:nth-child(1), table.insider td:nth-child(1) { width: 84px; white-space: nowrap; text-align: left; }
table.insider th:nth-child(2) { width: 170px; }
table.insider td.stock, #blocksBody table td.stock, table.insider th:nth-child(2), #blocksBody table th:nth-child(1) { text-align: left; }
table.insider th:nth-child(4), table.insider td:nth-child(4) { width: 84px; white-space: nowrap; text-align: left; }
table.insider td:nth-child(5), table.insider td:nth-child(6) { white-space: nowrap; }
table.insider th:nth-child(7) { width: 230px; } table.insider td.how { text-align: left; }
.hint.nowrap { white-space: nowrap; }
td .side { white-space: nowrap; }

/* Results season: an agenda */
.results-strip .card-head { gap: 10px; } .results-strip .card-head .btn { margin-left: auto; }
.res-days { padding: 6px 20px 14px; display: grid; gap: 0; }
.res-day { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; }
.res-day:first-child { border-top: 0; }
.res-day.today .res-date b { color: var(--accent); }
.res-date { display: grid; gap: 2px; padding-top: 6px; } .res-date b { font-size: 15px; } .res-date span { color: var(--muted); font-size: 12.5px; }
.res-count { display: inline-block; width: max-content; margin-top: 4px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); font-size: 11.5px; line-height: 18px; }
.res-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.res-card { display: grid; gap: 2px; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); cursor: pointer; min-width: 0; }
.res-card:hover { border-color: var(--accent); } .res-card.watch { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--accent-dim); }
.res-card.filed { border-color: color-mix(in srgb, var(--good) 60%, var(--line)); }
.res-sym { font-weight: 700; font-size: 13px; letter-spacing: .02em; } .res-name { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .res-meta b { color: var(--text); font-weight: 650; } .res-filed { color: var(--good); font-weight: 650; }
@media (max-width: 720px) { .res-day { grid-template-columns: 1fr; gap: 8px; } .res-date { display: flex; align-items: baseline; gap: 8px; padding-top: 0; } .res-cards { grid-template-columns: 1fr 1fr; } }
/* Insider: header with stats, tools with counts and search */
.ins-head { align-items: flex-start; flex-wrap: wrap; } .ins-head > div:first-child { display: grid; gap: 2px; }
.ins-stats { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.ins-stat { display: grid; gap: 0; padding: 8px 14px; border-radius: 10px; background: var(--surface-2); min-width: 96px; }
.ins-stat b { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; } .ins-stat span { font-size: 11.5px; color: var(--muted); }
.ins-stat.hot { background: var(--accent-dim); } .ins-stat.hot b { color: var(--accent); }
.ins-stat.good b { color: var(--good); } .ins-stat.bad b { color: var(--bad); }
.ins-tools { flex-wrap: wrap; gap: 10px; }
.ins-tools .seg-btn em { font-style: normal; font-weight: 600; color: var(--muted); margin-left: 4px; font-size: 12px; } .ins-tools .seg-btn.on em { color: inherit; opacity: .8; }
.ins-search input { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; width: 220px; max-width: 100%; }
.ins-search input:focus { outline: none; border-color: var(--accent); }
.ins-hint { margin-left: auto; font-size: 12.5px; }
@media (max-width: 720px) { .ins-hint { display: none; } .ins-search input { width: 100%; } .ins-stats { margin-left: 0; } .ins-stat { min-width: 0; flex: 1; } }
/* Toolbars inside cards breathe: side padding matches the card, controls do not touch the edges */
.ins-tools, .deals-tools { padding: 12px 20px; gap: 12px; row-gap: 10px; align-items: center; }
.ins-tools .seg, .deals-tools .seg { margin: 0; }
.ins-tools .cats-btn { margin: 0; }
.ins-hint { margin-left: auto; padding-left: 12px; }
.ins-search { display: inline-flex; }
@media (max-width: 720px) { .ins-tools, .deals-tools { padding: 10px 14px; } }

/* Results cards: symbol and quarter on one line, then name, industry, price, status */
.res-card { gap: 3px; padding: 10px 12px; }
.res-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.res-q { font-size: 11.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.res-ind { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 14px; }
.res-px { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; font-size: 12.5px; min-height: 16px; margin-top: 2px; }
.res-px .px-ltp { font-weight: 700; color: var(--text); } .res-px .px-chg.up { color: var(--good); } .res-px .px-chg.down { color: var(--bad); } .res-px .px-cap { color: var(--muted); }
.res-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Trend desk */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; padding: 14px 20px 6px; }
.trend-grid.one { grid-template-columns: minmax(0, 560px); }
.trend-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.trend-card.zone { border-color: color-mix(in srgb, var(--warn) 70%, var(--line)); } .trend-card.mid { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.trend-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px 6px; }
.trend-name { font-weight: 700; font-size: 15px; } .trend-live { font-size: 15px; margin-top: 2px; } .trend-live b { font-size: 18px; }
.trend-gear { text-align: right; } .g-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.g-gear { font-weight: 800; font-size: 17px; } .trend-card.zone .g-gear { color: var(--warn); } .trend-card.mid .g-gear, .trend-card.low .g-gear { color: var(--accent); }
.g-next { font-size: 12px; color: var(--muted); margin-top: 2px; }
.trend-move { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 4px 16px 10px; font-size: 13px; border-bottom: 1px solid var(--line); }
.ladder-scroll { max-height: none; }
table.ladder-t { min-width: 0; table-layout: fixed; font-size: 13px; }
table.ladder-t th, table.ladder-t td { padding: 7px 12px; white-space: nowrap; }
table.ladder-t th:nth-child(1), table.ladder-t td:nth-child(1) { text-align: left; color: var(--bad); }
table.ladder-t th:nth-child(4), table.ladder-t td:nth-child(4) { text-align: right; color: var(--good); }
table.ladder-t td.lbl { text-align: center; } table.ladder-t td.lbl b { display: block; font-size: 12.5px; } table.ladder-t td.lbl span { font-size: 11px; color: var(--muted); }
table.ladder-t td.pts { text-align: center; color: var(--muted); }
table.ladder-t tr.here td { background: var(--accent-dim); } table.ladder-t tr.here.up td:nth-child(4) { font-weight: 800; } table.ladder-t tr.here.down td:nth-child(1) { font-weight: 800; }
table.ladder-t tr.anchor td { text-align: center; background: var(--surface); font-weight: 700; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
table.ladder-t tr.anchor td span { margin: 0 8px; } table.ladder-t tr.anchor .live.up { color: var(--good); } table.ladder-t tr.anchor .live.down { color: var(--bad); }
table.ladder-t td.muted { opacity: .35; }
.res-day.past .res-date b { color: var(--muted); }
@media (max-width: 720px) { .trend-grid { grid-template-columns: 1fr; padding: 12px 14px; } #trendQ { width: 100% !important; } }

.anchor-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; }
table.ladder-t tr.anchor td span { margin: 0; }

/* Trend desk, second design: a strip of five tiles, one focused ladder */
.t-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; padding: 14px 20px 4px; align-items: stretch; }
.t-tile { text-align: left; display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; min-width: 0; }
.t-tile:hover { border-color: var(--accent); } .t-tile.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim) inset; }
.t-tile.zone { border-color: color-mix(in srgb, var(--warn) 70%, var(--line)); }
.t-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; } .t-row.hint { font-size: 11.5px; }
.t-name { font-weight: 700; font-size: 13.5px; } .t-gear { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.t-tile.low .t-gear, .t-tile.mid .t-gear { color: var(--accent); } .t-tile.zone .t-gear { color: var(--warn); }
.t-px { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.t-gauge { position: relative; height: 10px; margin: 2px 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 35%, transparent), var(--surface) 50%, color-mix(in srgb, var(--good) 35%, transparent)); }
.t-zero { position: absolute; left: 50%; top: -3px; width: 2px; height: 16px; background: var(--muted); transform: translateX(-50%); }
.t-tick { position: absolute; top: 2px; width: 1px; height: 6px; background: var(--line); } .t-tick.one { background: var(--warn); height: 10px; top: 0; }
.t-dot { position: absolute; top: -2px; width: 14px; height: 14px; border-radius: 50%; transform: translateX(-50%); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); background: var(--muted); transition: left .4s; }
.t-dot.up { background: var(--good); } .t-dot.down { background: var(--bad); }
.t-search { display: grid; grid-template-columns: 1fr auto; gap: 8px 8px; align-content: start; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; }
.t-search.on { border-style: solid; border-color: var(--accent); } .t-search input { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; min-width: 0; }
.t-search .hint { grid-column: 1 / -1; font-size: 11.5px; } .t-search .hint.err { color: var(--bad); }
.t-detail { margin: 12px 20px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.t-detail.zone { border-color: color-mix(in srgb, var(--warn) 70%, var(--line)); } .t-detail.mid, .t-detail.low { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.t-dhead { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.t-stats { display: flex; gap: 8px; flex-wrap: wrap; } .t-stats .ins-stat { min-width: 130px; }
.t-dbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 0; }
.rail { position: relative; height: 560px; margin: 18px 18px 18px 18px; }
.rail-rung, .rail-close, .rail-now { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 170px 1fr 120px; align-items: center; gap: 10px; transform: translateY(-50%); }
.rr-label { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; } .rr-label em { font-style: normal; opacity: .7; margin-left: 4px; }
.rr-line { height: 1px; background: var(--line); } .rail-rung.one .rr-line { background: var(--warn); height: 2px; }
.rr-price { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail-rung.up .rr-price { color: var(--good); } .rail-rung.down .rr-price { color: var(--bad); }
.rail-rung.here .rr-label, .rail-rung.here .rr-price { font-weight: 800; color: var(--text); } .rail-rung.here .rr-line { background: var(--accent); height: 2px; }
.rail-close .rr-line { height: 2px; background: var(--text); } .rail-close .rr-label, .rail-close .rr-price { color: var(--text); font-weight: 800; }
.rail-now { grid-template-columns: 170px 1fr 120px; pointer-events: none; }
.rail-now span { grid-column: 2; justify-self: center; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--good); color: #fff; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.rail-now.down span { background: var(--bad); } .rail-now span em { font-style: normal; opacity: .85; margin-left: 4px; }
.t-table { border-left: 1px solid var(--line); } .t-table .table-scroll { max-height: none; } .t-src { padding: 8px 14px 12px; }
@media (max-width: 980px) { .t-dbody { grid-template-columns: 1fr; } .t-table { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 720px) { .t-strip { grid-template-columns: 1fr 1fr; padding: 12px 14px 4px; } .t-search { grid-column: 1 / -1; } .t-detail { margin: 10px 14px 6px; } .rail { height: 480px; margin: 12px 8px; } .rail-rung, .rail-close, .rail-now { grid-template-columns: 110px 1fr 90px; } .rr-label { font-size: 11px; } .rr-label em { display: none; } }

.t-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.t-searchbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 20px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.t-searchbar.on { border-color: var(--accent); }
.t-sb-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.t-searchbar input { flex: 1 1 260px; min-width: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; }
.t-searchbar input:focus { outline: none; border-color: var(--accent); }
.t-searchbar .hint { font-size: 12px; margin-left: auto; } .t-searchbar .err { color: var(--bad); }
.rail { height: 620px; }
@media (max-width: 980px) { .t-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .t-strip { grid-template-columns: 1fr 1fr; } .t-searchbar { margin: 10px 14px 0; } .t-searchbar .hint { margin-left: 0; flex-basis: 100%; } }

/* Deals lanes, second pass: dates stay on one line, numbers keep their columns */
#blocksBody table { min-width: 1120px; }
#blocksBody table th:nth-child(1) { width: 78px; } #blocksBody table td.seen { white-space: nowrap; }
#blocksBody table th:nth-child(5) { width: 120px; } #blocksBody table th:nth-child(6) { width: 110px; } #blocksBody table th:nth-child(7) { width: 110px; }
#blocksBody table th:nth-child(4) { width: 240px; }
/* Deals lanes, final: the date never wraps, the run-up column gets its room */
#blocksBody table { min-width: 1160px; }
#blocksBody table th:nth-child(1) { width: 84px; }
#blocksBody table td.seen, #blocksBody table td.seen .hint, #blocksBody table td.seen b { white-space: nowrap; display: inline-block; }
#blocksBody table th:nth-child(4) { width: 220px; }
#blocksBody table th:nth-child(8) { width: 170px; }
#blocksBody table th:nth-child(9) { width: 180px; }

.t-sb-field { position: relative; flex: 1 1 280px; min-width: 0; display: block; }
.t-sb-field input { width: 100%; }
.t-sb-field .suggest { left: 0; right: 0; top: calc(100% + 6px); z-index: 30; }

.side.flat { color: var(--muted); background: var(--surface-2); }

/* Phone tap targets, second pass */
@media (max-width: 720px) {
  .ann-rule, .ann-share { width: 40px; height: 40px; }
  .btn.sm, .cats-btn, .alert-btn, .t-tile, .res-card, .rule-pop .btn { min-height: 40px; }
  .rail-now span { white-space: normal; font-size: 11.5px; padding: 2px 8px; }
  .t-strip { grid-template-columns: 1fr 1fr; }
}

/* Deals table, clean lanes */
table.deals { min-width: 1180px; table-layout: fixed; }
table.deals th:nth-child(1) { width: 64px; } table.deals th:nth-child(2) { width: 200px; } table.deals th:nth-child(3) { width: 96px; }
table.deals th:nth-child(4) { width: 280px; } table.deals th:nth-child(5) { width: 110px; } table.deals th:nth-child(6) { width: 110px; } table.deals th:nth-child(7) { width: 100px; }
table.deals th:nth-child(8) { width: 150px; } table.deals th:nth-child(9) { width: auto; }
table.deals td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
table.deals td.seen, table.deals th:nth-child(1), table.deals td.stock, table.deals th:nth-child(2), table.deals td.deal, table.deals th:nth-child(3), table.deals td.who, table.deals th:nth-child(4) { text-align: left; }
table.deals td.deal { display: table-cell; } .deal-type { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; }
.deal-type.block { color: var(--accent); background: var(--accent-dim); } .deal-type.bulk { color: var(--muted); background: var(--surface-2); }
table.deals td.deal .hint { display: block; margin-top: 4px; font-size: 11.5px; white-space: nowrap; }
table.deals .who-name.pending { color: var(--muted); font-weight: 400; font-style: italic; }
table.deals td.stock .hint { white-space: normal; }
/* Results desk */
.rq-section { padding: 6px 20px 10px; }
.rq-h { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 10px; font-weight: 700; font-size: 14px; }
.rq-h .hint { font-weight: 400; }
.rq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.rq-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); padding: 14px 16px; display: grid; gap: 10px; }
.rq-card.good { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); } .rq-card.bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); } .rq-card.watch { box-shadow: 0 0 0 2px var(--accent-dim) inset; }
.rq-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; } .rq-name { font-weight: 600; } .rq-when { font-size: 12.5px; white-space: nowrap; }
.rq-px { display: flex; gap: 8px; align-items: baseline; font-size: 13px; min-height: 16px; } .rq-px .px-ltp { font-weight: 700; } .rq-px .px-chg.up { color: var(--good); } .rq-px .px-chg.down { color: var(--bad); } .rq-px .px-cap { color: var(--muted); }
.rq-nums { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--surface); }
.rq-nums.pending { grid-template-columns: 1fr; }
.rq-num { display: grid; gap: 3px; } .rq-num .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .rq-num b { font-size: 16px; font-variant-numeric: tabular-nums; } .rq-num b.neg { color: var(--bad); }
.rq-chips { display: flex; gap: 4px; flex-wrap: wrap; } .rq-chip { font-size: 11px; font-weight: 650; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.rq-chip.up { color: var(--good); background: rgba(47,179,111,.12); } .rq-chip.down { color: var(--bad); background: rgba(230,80,80,.12); }
.rq-verdict { align-self: center; } .rq-word { display: inline-block; font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.rq-word.good { color: var(--good); background: rgba(47,179,111,.14); } .rq-word.bad { color: var(--bad); background: rgba(230,80,80,.14); } .rq-word.flat { color: var(--muted); background: var(--surface-2); }
.rq-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .rq-acts .ann-file { margin-left: auto; }
.rq-cal { margin-bottom: 6px; }
@media (max-width: 720px) { .rq-grid { grid-template-columns: 1fr; } .rq-nums { grid-template-columns: 1fr 1fr; } .rq-section { padding: 6px 14px 10px; } }
/* Results cards: figures stay on one line */
.rq-num b { white-space: nowrap; font-size: 15px; } .rq-nums { grid-template-columns: minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr) auto; gap: 8px; }
.rq-name { font-size: 14px; }

/* Trend: indices down the side, the ladder beside them */
.t-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; padding: 14px 20px 6px; align-items: start; }
.t-side { display: grid; gap: 10px; position: sticky; top: 8px; }
.t-side .t-searchbar { margin: 0; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.t-side .t-searchbar .hint { grid-column: 1 / -1; margin: 0; }
.t-list { display: grid; gap: 8px; }
.t-list .t-tile { padding: 11px 13px; gap: 5px; }
.t-list .t-tile.on { background: var(--accent-dim); }
.t-list .t-tile.stock { border-style: dashed; }
.t-main { min-width: 0; } .t-main .t-detail { margin: 0; }
@media (max-width: 980px) { .t-layout { grid-template-columns: 1fr; } .t-side { position: static; } .t-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .t-layout { padding: 12px 14px 6px; } .t-list { grid-template-columns: 1fr; } }
/* Results desk: a table for what landed */
.rq-scroll { max-height: none; border: 1px solid var(--line); border-radius: 12px; }
table.rq { min-width: 1120px; table-layout: fixed; font-size: 13.5px; }
table.rq th:nth-child(1) { width: 64px; } table.rq th:nth-child(2) { width: 230px; } table.rq th:nth-child(3) { width: 92px; }
table.rq th:nth-child(4), table.rq th:nth-child(5), table.rq th:nth-child(6) { width: 128px; } table.rq th:nth-child(7) { width: 84px; } table.rq th:nth-child(8) { width: 90px; } table.rq th:nth-child(9) { width: 150px; }
table.rq td { vertical-align: top; padding: 10px 12px; }
table.rq td.rq-t, table.rq th:nth-child(1), table.rq td.rq-co, table.rq th:nth-child(2), table.rq td.rq-q, table.rq th:nth-child(3), table.rq td.rq-v, table.rq th:nth-child(8) { text-align: left; }
table.rq td.rq-t { font-weight: 700; white-space: nowrap; } table.rq td.rq-co .hint { white-space: normal; font-size: 12px; }
table.rq td.rq-n { white-space: nowrap; } table.rq td.rq-n b { display: block; font-size: 14px; font-variant-numeric: tabular-nums; } table.rq td.rq-n b.neg { color: var(--bad); } table.rq td.rq-n .rq-chip { margin-top: 3px; display: inline-block; }
table.rq td.rq-pending { text-align: left; color: var(--muted); font-style: italic; }
table.rq td.rq-px { white-space: nowrap; } table.rq td.rq-px .px-ltp { font-weight: 700; } table.rq td.rq-px .px-chg.up { color: var(--good); } table.rq td.rq-px .px-chg.down { color: var(--bad); } table.rq td.rq-px .px-cap { display: none; }
table.rq td.rq-a { white-space: nowrap; } .ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); text-decoration: none; cursor: pointer; font-size: 13px; }
.ico:hover { border-color: var(--accent); color: var(--accent); }
table.rq tr.good td:first-child { box-shadow: inset 3px 0 0 var(--good); } table.rq tr.bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.rq-h { margin: 10px 0 10px; }
@media (max-width: 720px) { .ico { width: 40px; height: 40px; } }
/* Results table: room for the action icons */
table.rq { min-width: 1260px; }
table.rq th:nth-child(10) { width: 150px; } table.rq td.rq-a { text-align: right; }
table.rq td.rq-co .ann-sym { max-width: 100%; }
.ins-stat.as-btn { border: 1px solid transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.ins-stat.as-btn:hover { border-color: var(--accent); }
/* Trend: strip across the top again; inside the panel the rail and the table stack, table full width */
.t-dbody { grid-template-columns: 1fr; }
.t-table { border-left: 0; border-top: 1px solid var(--line); }
table.ladder-t { width: 100%; }
table.ladder-t th, table.ladder-t td { padding: 9px 18px; }
.rail { height: 520px; margin: 14px 24px; }
/* Ladder table in the sheet's shape */
table.ladder-t.sheet th, table.ladder-t.sheet td { text-align: right; padding: 10px 18px; }
table.ladder-t.sheet th.lbl, table.ladder-t.sheet td.lbl { text-align: left; }
table.ladder-t.sheet th.pts, table.ladder-t.sheet td.pts { text-align: center; color: var(--muted); }
table.ladder-t.sheet th.up, table.ladder-t.sheet td.up { color: var(--good); } table.ladder-t.sheet th.down, table.ladder-t.sheet td.down { color: var(--bad); }
table.ladder-t.sheet td.lv { font-weight: 650; font-variant-numeric: tabular-nums; }
table.ladder-t.sheet tr.one td { background: color-mix(in srgb, var(--warn) 14%, transparent); font-weight: 800; }
table.ladder-t.sheet tr.here td.lbl b { color: var(--accent); } table.ladder-t.sheet tr.here.up td.up, table.ladder-t.sheet tr.here.down td.down { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
table.ladder-t.sheet thead tr.anchor th { background: var(--surface); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--line); }
table.ladder-t.sheet thead tr.anchor th.close { font-size: 16px; font-weight: 800; text-align: right; }
table.ladder-t.sheet thead tr.anchor th.pts .live.up { color: var(--good); } table.ladder-t.sheet thead tr.anchor th.pts .live.down { color: var(--bad); }
/* Sheet layout: the level names are plain text, only the value columns carry colour */
table.ladder-t.sheet th:nth-child(1), table.ladder-t.sheet td:nth-child(1) { color: var(--text); }
table.ladder-t.sheet td.lbl b { color: var(--text); font-weight: 650; }
table.ladder-t.sheet tr.here td.lbl b { color: var(--accent); }
table.ladder-t.sheet th:nth-child(4), table.ladder-t.sheet td:nth-child(4) { color: var(--bad); }
table.ladder-t.sheet th:nth-child(3), table.ladder-t.sheet td:nth-child(3) { color: var(--good); }
table.ladder-t.sheet thead tr.anchor th:nth-child(3) { color: var(--text); }
/* Session so far: the day's range on the ladder */
.t-session { padding: 14px 18px 10px; display: grid; gap: 12px; }
.t-sess-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.t-sess-stats .ins-stat { min-width: 0; } .t-sess-stats .ins-stat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-range { display: grid; gap: 6px; padding: 4px 2px 0; }
.t-range-bar { position: relative; height: 22px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 28%, transparent), var(--surface) 50%, color-mix(in srgb, var(--good) 28%, transparent)); }
.t-range-bar .tk { position: absolute; top: 6px; width: 1px; height: 10px; background: var(--line); } .t-range-bar .tk.one { background: var(--warn); top: 3px; height: 16px; width: 2px; }
.t-range-bar .tk.zero { background: var(--text); width: 2px; top: 0; height: 22px; }
.t-day { position: absolute; top: 7px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 65%, transparent); }
.t-mark { position: absolute; top: 3px; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); background: var(--muted); }
.t-mark.now.up { background: var(--good); } .t-mark.now.down { background: var(--bad); } .t-mark.open { background: var(--surface-2); border-color: var(--text); }
.t-range-lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.t-sentence { font-size: 14px; color: var(--ink-2, var(--text)); line-height: 1.45; }
.t-sentence:first-letter { text-transform: uppercase; }
@media (max-width: 720px) { .t-sess-stats { grid-template-columns: 1fr 1fr; } .t-range-lbl span:nth-child(2), .t-range-lbl span:nth-child(4) { display: none; } }
/* Results table: fits the card on a laptop, company column stays put when it must scroll */
table.rq { min-width: 0; width: 100%; }
table.rq th:nth-child(1) { width: 58px; } table.rq th:nth-child(2) { width: auto; } table.rq th:nth-child(3) { width: 78px; }
table.rq th:nth-child(4), table.rq th:nth-child(5) { width: 118px; } table.rq th:nth-child(6) { width: 132px; } table.rq th:nth-child(7) { width: 86px; } table.rq th:nth-child(8) { width: 128px; } table.rq th:nth-child(9) { width: 126px; }
table.rq th:nth-child(10) { width: 0; display: none; }
table.rq td, table.rq th { padding: 9px 10px; }
table.rq td.rq-co { min-width: 0; } table.rq td.rq-co .hint { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.rq td.rq-n .rq-chip { font-size: 10.5px; padding: 1px 5px; } table.rq td.rq-n .rq-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
table.rq td.rq-a { padding-left: 4px; padding-right: 8px; } table.rq td.rq-a .ico { width: 26px; height: 26px; margin-left: 2px; font-size: 12px; }
table.rq td.rq-px { font-size: 12.5px; }
.rq-word { font-size: 12px; padding: 3px 8px; }
@media (max-width: 1100px) { table.rq { min-width: 980px; } table.rq th:nth-child(2), table.rq td.rq-co { position: sticky; left: 0; background: var(--surface); z-index: 1; width: 200px; } table.rq th:nth-child(1), table.rq td.rq-t { position: sticky; left: 0; background: var(--surface); z-index: 2; } table.rq th:nth-child(2), table.rq td.rq-co { left: 58px; } }
/* Results table, final lanes: nothing spills into the next column */
table.rq th:nth-child(4), table.rq th:nth-child(5) { width: 108px; } table.rq th:nth-child(6) { width: 150px; } table.rq th:nth-child(7) { width: 82px; } table.rq th:nth-child(8) { width: 150px; } table.rq th:nth-child(9) { width: 112px; }
table.rq td.rq-n .rq-sub { white-space: normal; line-height: 1.3; } table.rq td.rq-n b { font-size: 13.5px; }
table.rq td.rq-px { white-space: normal; line-height: 1.3; } table.rq td.rq-px .px-chg { display: block; }
table.rq td.rq-a .ico { width: 24px; height: 24px; margin-left: 1px; font-size: 11px; }

/* ------------------------------------------------ scrollbars, always visible */
/* Overlay scrollbars vanish on the Mac until the reader moves; a desk with
   long lists needs the bar in view so people know there is more below. */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 55%, transparent) transparent; scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 50%, transparent); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 80%, transparent); }
.table-scroll { scrollbar-width: thin; scrollbar-gutter: stable; }
.table-scroll::-webkit-scrollbar-thumb { border-color: var(--surface); }
.table-scroll::-webkit-scrollbar-track { background: color-mix(in srgb, var(--line) 60%, transparent); border-radius: 999px; }
.panel .table-scroll { max-height: min(72vh, 760px); }
.t-table .table-scroll { max-height: none; }

/* ------------------------------------------------ results: price lane */
/* .rq-px is a flex box in the cards; inside the table a flex cell breaks the
   row's borders. Back to a table cell, price on top, change beneath. */
table.rq td.rq-px { display: table-cell; white-space: nowrap; text-align: right; vertical-align: top; }
table.rq td.rq-px .px-ltp { display: block; font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text); }
table.rq td.rq-px .px-ltp.up, table.rq td.rq-px .px-ltp.down { color: var(--text); }
table.rq td.rq-px .px-chg { display: block; font-size: 11.5px; margin-top: 2px; font-weight: 650; }
table.rq td.rq-px:empty::after { content: "—"; color: var(--muted); }
table.rq th:nth-child(8) { text-align: right; }

/* ------------------------------------------------ trend: legend under the bar */
.t-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 2px 0; font-size: 11.5px; color: var(--muted); align-items: center; }
.t-legend span { display: inline-flex; align-items: center; gap: 6px; }
.t-legend i { display: inline-block; flex: none; }
.t-legend .lg-close { width: 2px; height: 14px; background: var(--text); }
.t-legend .lg-day { width: 22px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 65%, transparent); }
.t-legend .lg-open { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--text); box-sizing: border-box; }
.t-legend .lg-now { width: 12px; height: 12px; border-radius: 50%; background: var(--good); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); box-sizing: border-box; }
.t-legend .lg-now.down { background: var(--bad); }
.t-legend .lg-rev { width: 2px; height: 14px; background: var(--warn); }
.t-legend .lg-side { margin-left: auto; color: var(--muted); } .t-legend .lg-side b { color: var(--text); font-weight: 700; }

/* ------------------------------------------------ deals: day-trade rows */
.side.trip { color: var(--warn); background: rgba(232,160,40,.14); white-space: nowrap; }
table.deals .trip-l { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.5; }
table.deals .trip-l em { font-style: normal; font-size: 10.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-right: 4px; }
table.deals .trip-net { display: block; font-size: 11px; margin-top: 2px; white-space: nowrap; }
@media (max-width: 720px) { .t-legend .lg-side { margin-left: 0; } }

table.deals td .pill { white-space: nowrap; }

/* ------------------------------------------------ trend: instant readout */
.t-range { position: relative; }
.t-range-bar { cursor: crosshair; }
.t-range-bar .tk { width: 7px; margin-left: -3px; background: transparent; background-clip: content-box; padding: 0 3px; box-sizing: content-box; }
.t-range-bar .tk::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.t-range-bar .tk.one::before { width: 2px; background: var(--warn); } .t-range-bar .tk.zero::before { width: 2px; background: var(--text); }
.t-range-bar .tk.one { padding: 0 3px; margin-left: -4px; } .t-range-bar .tk.zero { margin-left: -4px; }
.t-range-bar .t-mark, .t-range-bar .t-day, .t-range-bar .tk { transition: transform .12s, box-shadow .12s; }
.t-range-bar .t-mark.lit, .t-range-bar .t-mark:hover { transform: translateX(-50%) scale(1.35); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); z-index: 3; }
.t-range-bar .t-day.lit, .t-range-bar .t-day:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.t-range-bar .tk.lit::before, .t-range-bar .tk:hover::before { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 45%, transparent); }
.t-tip { position: absolute; top: -8px; transform: translate(-50%, -100%); pointer-events: none; z-index: 5; white-space: nowrap;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; box-shadow: var(--shadow);
  font-size: 12.5px; line-height: 1.3; font-variant-numeric: tabular-nums; opacity: 1; transition: opacity .08s; }
.t-tip.hide { opacity: 0; } .t-tip b { font-weight: 750; margin-right: 4px; } .t-tip span { display: block; font-size: 11px; color: var(--muted); }
.t-tip.up b { color: var(--good); } .t-tip.down b { color: var(--bad); } .t-tip.warn b { color: var(--warn); }
.t-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.t-legend [data-lit] { cursor: default; border-radius: 6px; padding: 1px 4px; margin: -1px -4px; } .t-legend [data-lit]:hover { background: var(--surface); color: var(--text); }

/* ------------------------------------------------ IPO cards, fuller */
.ipo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 14px 0; }
.ipo-facts div { background: var(--surface-2); border-radius: 9px; padding: 7px 10px; min-width: 0; }
.ipo-facts span { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ipo-facts b { display: block; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .lbl small { display: block; font-size: 10px; color: var(--muted); font-weight: 500; line-height: 1.1; }
.bar-row { grid-template-columns: 70px 1fr 74px; }
.ipo-pace { margin-top: 14px; display: grid; gap: 4px; }
.ipo-pace-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); } .ipo-pace-l b { color: var(--text); font-variant-numeric: tabular-nums; }
.ipo-spark { width: 100%; height: 34px; display: block; }
.ipo-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ipo-spark line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.ipo-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; align-items: baseline; }
.ipo-foot a { color: var(--accent); text-decoration: none; } .ipo-foot a:hover { text-decoration: underline; }
.ipo-foot .hint { flex-basis: 100%; font-size: 11.5px; }
.odds .headline { font-size: 18px; }

/* ------------------------------------------------ ladder: tighter rows */
table.ladder-t.sheet th, table.ladder-t.sheet td { padding: 6px 14px; }
table.ladder-t.sheet tbody td { font-size: 13.5px; }
table.ladder-t.sheet td.lbl b { font-size: 12.5px; }
.t-src { padding: 6px 14px 10px; }


/* ------------------------------------------------ deals: tighter, nothing clipped */
table.deals { min-width: 980px; }
table.deals th:nth-child(1) { width: 60px; } table.deals th:nth-child(2) { width: 190px; } table.deals th:nth-child(3) { width: 84px; }
table.deals th:nth-child(4) { width: auto; } table.deals th:nth-child(5) { width: 96px; } table.deals th:nth-child(6) { width: 104px; } table.deals th:nth-child(7) { width: 92px; }
table.deals th:nth-child(8) { width: 140px; } table.deals th:nth-child(9) { width: 48px; }
table.deals td { padding-top: 10px; padding-bottom: 10px; }
table.deals tbody tr.ru-tr > td { padding: 0 12px; border-top: 0; }
table.deals tbody tr.ru-tr:has(> td > .ru-body.hide) { display: none; }
table.deals tbody tr.ru-tr .ru-body { margin: 0 0 12px; }
table.deals td.ru-cell { padding-left: 4px; padding-right: 8px; overflow: visible; }
table.deals .ru-toggle.sm { width: 32px; height: 30px; padding: 0; justify-content: center; }
table.deals .ru-toggle.sm span, table.deals .ru-toggle.sm em { display: none; }
table.deals .ru-toggle.sm svg { margin: 0; }
table.deals .who-from { display: flex; align-items: center; gap: 6px; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line); }
table.deals .who-from .who-name { display: inline; font-weight: 500; color: var(--muted); }
table.deals td.who .side + .who-name { margin-left: 6px; }
table.deals td.who > .side { vertical-align: middle; } table.deals td.who > .who-name { display: inline; vertical-align: middle; }
table.deals .pat-2 { margin-top: 4px; }
table.deals td.stock .hint { font-size: 12px; line-height: 1.3; }
table.deals td.seen .hint { white-space: nowrap; }

/* deals lanes: the id-scoped rules above set the insider table's lanes; these win for the deals table */
#blocksBody table.deals { min-width: 900px; width: 100%; }
#blocksBody table.deals th:nth-child(1) { width: 60px; } #blocksBody table.deals th:nth-child(2) { width: 180px; } #blocksBody table.deals th:nth-child(3) { width: 82px; }
#blocksBody table.deals th:nth-child(4) { width: auto; } #blocksBody table.deals td:nth-child(4) { max-width: none; }
#blocksBody table.deals th:nth-child(5) { width: 92px; } #blocksBody table.deals th:nth-child(6) { width: 100px; } #blocksBody table.deals th:nth-child(7) { width: 88px; }
#blocksBody table.deals th:nth-child(8) { width: 136px; } #blocksBody table.deals th:nth-child(9) { width: 46px; }
/* deals: the deal tag never breaks, the run-up chip sits above its button */
#blocksBody table.deals th:nth-child(3) { width: 92px; } #blocksBody table.deals td.deal .deal-type { white-space: nowrap; }
#blocksBody table.deals th:nth-child(8) { width: 128px; } #blocksBody table.deals th:nth-child(9) { width: 84px; }
#blocksBody table.deals td.ru-cell { text-align: right; white-space: normal; overflow: hidden; }
#blocksBody table.deals td.ru-cell .ru-chip { display: inline-block; margin: 0 0 5px; font-size: 10.5px; padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#blocksBody table.deals td.ru-cell .ru-chip.empty { display: none; }
#blocksBody table.deals td.ru-cell .ru-toggle.sm { display: inline-flex; margin-left: auto; }

/* ------------------------------------------------ trend: history and from-here */
.t-remain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; }
.t-remain-k { font-weight: 700; color: var(--text); } .t-remain-t { color: var(--muted); } .t-remain-v { font-weight: 750; font-size: 15px; font-variant-numeric: tabular-nums; }
.t-remain-l { display: inline-flex; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.t-remain-l em { font-style: normal; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.t-remain-l b.up { color: var(--good); font-weight: 650; } .t-remain-l b.down { color: var(--bad); font-weight: 650; }
.t-history { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: flex; gap: 10px; align-items: baseline; }
.t-history-k { flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 700; }
table.ladder-t.sheet th.odds, table.ladder-t.sheet td.odds { text-align: right; color: var(--muted); font-size: 12px; white-space: nowrap; width: 116px; }
table.ladder-t.sheet td.odds .odds-bar { display: inline-block; width: 46px; height: 4px; border-radius: 2px; background: var(--surface); vertical-align: middle; margin-right: 8px; overflow: hidden; }
table.ladder-t.sheet td.odds .odds-bar i { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 70%, transparent); }
table.ladder-t.sheet tr[data-odds] { cursor: default; } table.ladder-t.sheet tr[data-odds]:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.t-table { position: relative; } .t-tip.row { transform: translate(-50%, -100%); top: 0; white-space: normal; max-width: 360px; text-align: center; }
.t-tip.row span { font-size: 12px; color: var(--text); }
@media (max-width: 720px) { .t-remain { gap: 6px 12px; } .t-history { flex-direction: column; gap: 2px; } }

/* ------------------------------------------------ deliveries & averages */
.dl-seg { margin-left: auto; } .dl-seg .seg-btn[disabled] { opacity: .35; cursor: not-allowed; }
.dl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 14px 20px 6px; }
/* Labels wrap rather than cut: "above" or "below" leads them and is never lost. */
.dl-stats .ins-stat { min-width: 0; } .dl-stats .ins-stat span { line-height: 1.25; margin-top: 2px; }
table.dl { min-width: 640px; table-layout: fixed; font-variant-numeric: tabular-nums; }
table.dl th, table.dl td { text-align: right; padding: 8px 14px; white-space: nowrap; }
table.dl th:first-child, table.dl td.dl-d { text-align: left; width: 84px; font-weight: 650; }
table.dl td.up { color: var(--good); } table.dl td.down { color: var(--bad); }
table.dl td.dl-p b { display: inline-block; min-width: 52px; }
table.dl .dl-bar { display: inline-block; width: 54px; height: 5px; border-radius: 3px; background: var(--surface-2); vertical-align: middle; margin-right: 8px; overflow: hidden; }
table.dl .dl-bar i { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 75%, transparent); }
table.dl tr.hot td { background: color-mix(in srgb, var(--accent) 9%, transparent); } table.dl tr.hot .dl-bar i { background: var(--accent); }
@media (max-width: 720px) {
  .dl-stats { grid-template-columns: 1fr 1fr; padding: 12px 14px 4px; } table.dl th, table.dl td { padding: 7px 10px; }
}
/* The table's own width decides, not the screen's: the share bar at full length only where its column has
   room, a short one on a tablet, none in a phone's narrow column (it ran into VWAP); headings wrap, not cut. */
#delivCard .table-scroll { container-type: inline-size; }
@container (max-width: 959px) {
  table.dl .dl-bar { width: 28px; margin-right: 6px; } table.dl td.dl-p b { min-width: 44px; }
  table.dl th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
}
@container (max-width: 759px) {
  table.dl .dl-bar { display: none; } table.dl td.dl-p b { min-width: 0; }
}

/* deals: the seen cell is a real cell again, pattern pills wrap inside their lane */
#blocksBody table.deals td.seen { display: table-cell; white-space: nowrap; }
#blocksBody table.deals td.seen .hint, #blocksBody table.deals td.seen b { display: inline; }
#blocksBody table.deals th:nth-child(8) { width: 150px; }
#blocksBody table.deals td .pill { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; display: inline-block; padding-top: 3px; padding-bottom: 3px; }
#blocksBody table.deals td:nth-child(8) { overflow: hidden; }
table.deals .who-from .who-qty { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ================================================= phone pass (≤ 720px) */
@media (max-width: 720px) {
  /* tape: the three analysis buttons get their own full row, Watch and the rest sit under them */
  .ann-right { flex-wrap: wrap; gap: 8px; }
  .ann-go { flex: 1 1 100%; width: 100%; }
  .ann-go-btn { flex: 1 1 0; padding: 9px 4px; font-size: 12px; white-space: nowrap; }
  .ann-right .ann-watch { flex: 1 1 auto; }

  /* trend tiles: the change never breaks under its arrow */
  .trend-tile .trend-live, .t-strip .px-chg { white-space: nowrap; }
  .t-strip b { font-size: 16px; } .t-strip .px-chg { font-size: 12px; }
  .t-sess-stats { grid-template-columns: 1fr 1fr; }
  .t-sess-stats .ins-stat span { white-space: normal; line-height: 1.25; }
  .t-range-lbl span:nth-child(2), .t-range-lbl span:nth-child(4) { display: none; }

  /* ladder: three lanes that fit — level, forward, backward */
  table.ladder-t.sheet th.pts, table.ladder-t.sheet td.pts, table.ladder-t.sheet th.odds, table.ladder-t.sheet td.odds { display: none; }
  table.ladder-t.sheet th, table.ladder-t.sheet td { padding: 7px 10px; font-size: 13px; }
  table.ladder-t.sheet { table-layout: auto; width: 100%; }

  /* deals: each print is a card, nothing to scroll sideways */
  #blocksBody .table-scroll { overflow: visible; max-height: none; }
  #blocksBody table.deals { display: block; min-width: 0; width: 100%; }
  #blocksBody table.deals thead { display: none; }
  #blocksBody table.deals tbody { display: block; }
  #blocksBody table.deals tbody tr:not(.ru-tr) { display: grid; grid-template-columns: 1fr 1fr auto; grid-template-areas: "stock stock seen" "deal deal value" "who who who" "qty price ru" "pat pat pat"; gap: 6px 12px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: start; }
  #blocksBody table.deals tbody td { display: block; padding: 0; border: 0; width: auto; max-width: none; text-align: left; overflow: visible; }
  #blocksBody table.deals td.stock { grid-area: stock; } #blocksBody table.deals td.seen { grid-area: seen; text-align: right; }
  #blocksBody table.deals td.deal { grid-area: deal; display: flex; gap: 8px; align-items: center; } #blocksBody table.deals td.deal .hint { margin: 0; }
  #blocksBody table.deals td:nth-child(7) { grid-area: value; text-align: right; font-size: 16px; }
  #blocksBody table.deals td.who { grid-area: who; }
  #blocksBody table.deals td:nth-child(5) { grid-area: qty; } #blocksBody table.deals td:nth-child(6) { grid-area: price; }
  #blocksBody table.deals td:nth-child(5)::before { content: "QTY"; } #blocksBody table.deals td:nth-child(6)::before { content: "PRICE"; }
  #blocksBody table.deals td:nth-child(5)::before, #blocksBody table.deals td:nth-child(6)::before { display: block; font-size: 10px; letter-spacing: .06em; color: var(--muted); }
  #blocksBody table.deals td:nth-child(8) { grid-area: pat; } #blocksBody table.deals td.ru-cell { grid-area: ru; text-align: right; }
  #blocksBody table.deals tbody tr.ru-tr, #blocksBody table.deals tbody tr.ru-tr > td { display: block; }
  #blocksBody table.deals tbody tr.ru-tr:has(> td > .ru-body.hide) { display: none; }

  /* insider: cards too */
  #insiderBody .table-scroll { overflow: visible; max-height: none; }
  table.insider { display: block; min-width: 0 !important; width: 100%; } table.insider thead { display: none; } table.insider tbody { display: block; }
  table.insider tbody tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "stock stock when" "who who who" "side shares value" "how how link"; gap: 6px 12px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: baseline; }
  table.insider tbody td { display: block; padding: 0; border: 0; width: auto; max-width: none; text-align: left; }
  table.insider td:nth-child(1) { grid-area: when; text-align: right; } table.insider td:nth-child(2) { grid-area: stock; } table.insider td:nth-child(3) { grid-area: who; }
  table.insider td:nth-child(4) { grid-area: side; } table.insider td:nth-child(5) { grid-area: shares; } table.insider td:nth-child(6) { grid-area: value; text-align: right; font-size: 15px; }
  table.insider td:nth-child(7) { grid-area: how; } table.insider td:nth-child(8) { grid-area: link; text-align: right; }
  table.insider td:nth-child(5)::after { content: " shares"; color: var(--muted); font-size: 11.5px; }
  table.insider td[colspan] { grid-column: 1 / -1; }

  /* results just-in: cards */
  .rq-scroll { overflow: visible; max-height: none; }
  table.rq { display: block; min-width: 0; width: 100%; } table.rq thead { display: none; } table.rq tbody { display: block; }
  table.rq tbody tr { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "co co t" "q v px" "rev pat mar" "a a a"; gap: 8px 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
  table.rq tbody td { display: block; padding: 0; border: 0; width: auto; text-align: left; position: static; background: none; }
  table.rq td.rq-t { grid-area: t; text-align: right; } table.rq td.rq-co { grid-area: co; } table.rq td.rq-q { grid-area: q; } table.rq td.rq-v { grid-area: v; } table.rq td.rq-px { grid-area: px; display: block; text-align: right; }
  table.rq td.rq-n:nth-of-type(4) { grid-area: rev; } table.rq td.rq-n:nth-of-type(5) { grid-area: pat; } table.rq td.rq-n:nth-of-type(6) { grid-area: mar; }
  table.rq td.rq-n:nth-of-type(4)::before { content: "REVENUE"; } table.rq td.rq-n:nth-of-type(5)::before { content: "NET PROFIT"; } table.rq td.rq-n:nth-of-type(6)::before { content: "MARGIN"; }
  table.rq td.rq-n::before { display: block; font-size: 10px; letter-spacing: .06em; color: var(--muted); }
  table.rq td.rq-pending { grid-column: 1 / -1; grid-row: 3; } table.rq td.rq-a { grid-area: a; text-align: right; }

  /* header: one tidy block */
  header .status-line, header .live-age { font-size: 12px; }
}
@media (max-width: 720px) {
  /* a card is tinted as a whole, not cell by cell */
  #blocksBody table.deals tbody td, table.insider tbody td, table.rq tbody td { background: transparent !important; }
  #blocksBody table.deals tbody tr.repeat:not(.ru-tr) { background: color-mix(in srgb, var(--accent) 7%, transparent); }
  table.insider tbody tr.hot { background: color-mix(in srgb, var(--good) 7%, transparent); }
}

/* ------------------------------------------------ radar */
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 14px; padding: 16px 20px 8px; }
.rd-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); padding: 16px 18px; display: grid; gap: 12px; min-width: 0; }
.rd-card.watch { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.rd-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rd-name { font-size: 13px; color: var(--muted); } .rd-when .pill { white-space: nowrap; }
.rd-top .hint { white-space: nowrap; }   /* a card's market value stays on one line on a phone ("₹8,640 Cr", never "₹8,640 / Cr") */
.rd-head { font-size: 17px; letter-spacing: -.2px; line-height: 1.3; } .rd-head b { font-weight: 750; }
/* The whole strip is the hit area: 18px tall, dots centred, vertical scrolling left to the page. */
.rd-strip { position: relative; display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; height: 18px; touch-action: pan-y; cursor: default; user-select: none; -webkit-user-select: none; }
.rd-strip i { flex: 1 1 0; min-width: 3px; max-width: 9px; height: 9px; border-radius: 2px; background: var(--surface); border: 1px solid var(--line); box-sizing: border-box; transition: transform .1s, box-shadow .1s; }
.rd-strip i.on, .rd-strip i.b { background: var(--good); border-color: var(--good); }
.rd-strip i.s { background: var(--bad); border-color: var(--bad); }
.rd-strip i.bs { background: linear-gradient(to bottom, var(--good) 50%, var(--bad) 50%); border-color: var(--line); }
.rd-strip i.p { background: transparent; } .rd-strip i.p.b { border-color: var(--good); } .rd-strip i.p.s { border-color: var(--bad); } .rd-strip i.p.bs { border-color: var(--muted); }
.rd-strip i.aw { border-style: dashed; } .rd-strip i.aw.b { background: color-mix(in srgb, var(--good) 35%, transparent); } .rd-strip i.aw.s { background: color-mix(in srgb, var(--bad) 35%, transparent); }
.rd-strip i.lit { transform: scale(1.35); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 35%, transparent); }
.rd-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rd-facts div { min-width: 0; } .rd-facts span { display: block; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.rd-facts b { display: block; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd-facts b.up, .rd-facts i.up { color: var(--good); } .rd-facts b.down, .rd-facts i.down { color: var(--bad); }
.rd-facts em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rd-facts em i { font-style: normal; }
.rd-acts { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.rd-bars { display: flex; gap: 8px; align-items: flex-end; height: 56px; }
.rd-bars div { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.rd-bars i { display: block; width: 100%; max-width: 46px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.rd-bars span { font-size: 10px; color: var(--muted); }
.rd-build { display: flex; align-items: center; gap: 12px; padding: 12px 20px 0; font-size: 12.5px; color: var(--muted); }
.rd-build-bar { display: inline-block; width: 160px; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .rd-build-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.seg-n { opacity: .85; font-variant-numeric: tabular-nums; margin-left: 2px; }   /* quieter than the label, still 4.5:1 */
@media (max-width: 720px) { .rd-grid { padding: 12px 14px 6px; } .rd-facts { grid-template-columns: 1fr 1fr; } .rd-head { font-size: 16px; } }

/* ------------------------------------------------ reaction record */
/* The line under a filing: the kind of news and how often, then what followed. Its shape comes from the row's width
   alone, never from what it holds: one line on a wide desk, two on a tablet, three to five on a phone, every line one
   fixed height, and every piece sized so it fits its place (cut at its end, never wrapped, if a font runs wider). The
   room kept while a company's record is on its way (.rx-wait) and a kind with no record (.rx-none) take the same
   shape, so the rows under it never move when the record lands. */
.rx-slot { container-type: inline-size; }
.rx-slot:empty { display: none; }
/* The Reaction clock (F lane, his own feed): +1/+5/+15/+60 min vs NIFTY 50 in four fixed lanes, filled in place. */
.rxc-slot { container-type: inline-size; } .rxc-slot:empty { display: none; }
.rxc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "k k" "a b" "c d" "s s"; gap: 2px 10px; margin: 6px 0 2px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 12.5px; line-height: 19px; }
.rxc-k { grid-area: k; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rxc-s { grid-area: s; color: var(--dim); font-size: 11.5px; }
.rxc-f { display: flex; gap: 6px; align-items: baseline; min-width: 0; white-space: nowrap; }
.rxc-f i { font-style: normal; color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rxc-f b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.rxc-f b.up { color: var(--good); } .rxc-f b.dn { color: var(--bad); } .rxc-f b.wait, .rxc-f b.gap { color: var(--dim); font-weight: 600; }
.rxc-f sup { font-size: 9px; line-height: 0; color: var(--dim); margin-left: 1px; }
.rxc-flag { color: var(--bad); }
@container (min-width: 380px) { .rxc { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "k k k k" "a b c d" "s s s s"; } }
@container (min-width: 560px) { .rxc { grid-template-columns: minmax(0, max-content) repeat(4, 92px) minmax(0, 1fr); grid-template-areas: "k a b c d s"; } .rxc-s { justify-self: end; } }
.rx { display: flex; flex-direction: column; row-gap: 3px; margin: 8px 0 2px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); font-size: 12.5px; line-height: 19px; }
/* the kind and how often, its verdict, and "small sample": two lines on a phone, one from 460 px */
.rx-a { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); grid-template-rows: 19px 19px; grid-template-areas: "k k" "t s"; gap: 3px 10px; align-items: center; min-width: 0; }
.rx-k { grid-area: k; } .rx-a > .rx-tag { grid-area: t; justify-self: start; } .rx-s { grid-area: s; }
/* what followed: a line each on a phone, then two, then one from 660 px */
.rx-b { display: grid; grid-template-columns: minmax(0, max-content); grid-template-rows: repeat(3, 19px); grid-template-areas: "h" "c" "w"; gap: 3px 10px; min-width: 0; }
.rx-hi { grid-area: h; } .rx-cl { grid-area: c; } .rx-wk { grid-area: w; }
.rx-k, .rx-f, .rx-s { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-tag { line-height: 15px; }
.rx-s { color: var(--dim); font-size: 11.5px; font-weight: 600; }
@container (min-width: 400px) { .rx-b { grid-template-columns: repeat(2, minmax(0, max-content)); grid-template-rows: repeat(2, 19px); grid-template-areas: "h h" "c w"; } }
@container (min-width: 460px) { .rx-a { grid-template-columns: minmax(0, max-content) repeat(2, minmax(0, max-content)); grid-template-rows: 19px; grid-template-areas: "k t s"; } }
@container (min-width: 660px) {
  .rx { padding: 8px 12px; } .rx-a { column-gap: 14px; }
  .rx-b { grid-template-columns: repeat(3, minmax(0, max-content)); grid-template-rows: 19px; grid-template-areas: "h c w"; column-gap: 14px; }
}
@container (min-width: 1070px) { .rx { flex-direction: row; column-gap: 14px; } .rx-a { flex: 0 1 auto; } .rx-b { flex: none; } }
.rx.rx-none, .rx.rx-wait { background: none; border-color: var(--line); color: var(--dim); } .rx-none .rx-k, .rx-wait .rx-k { color: var(--muted); font-weight: 600; }
.rx.rx-wait { opacity: .55; }
.rx-k { font-weight: 700; color: var(--text); } .rx-f { color: var(--muted); } .rx-f b { font-variant-numeric: tabular-nums; font-weight: 700; } .rx-f i { font-style: normal; font-size: 11.5px; color: var(--dim); }
.rx b.up, table.rxt td.up { color: var(--good); } .rx b.down, table.rxt td.down { color: var(--bad); }
.rx-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.rx-tag.good { background: var(--good-dim, rgba(47,179,111,.14)); color: var(--good); } .rx-tag.bad { background: var(--bad-dim, rgba(230,80,80,.14)); color: var(--bad); }
table.rxt { min-width: 720px; font-variant-numeric: tabular-nums; } table.rxt th, table.rxt td { text-align: right; padding: 9px 14px; white-space: nowrap; }
table.rxt th:first-child, table.rxt td.rxt-l { text-align: left; } table.rxt td .hint { display: block; font-size: 11px; font-weight: 400; }

/* radar: detail, tags, search */
.rd-count { padding: 14px 20px 0; font-size: 12.5px; color: var(--muted); }
.rd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.rd-tag.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.rd-tag.hot { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.rd-tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.rd-more { align-self: start; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; }
.rd-more:hover { text-decoration: underline; }
.rd-days { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.rd-dt { width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; border-collapse: collapse; }
table.rd-dt th, table.rd-dt td { padding: 6px 12px; text-align: right; white-space: nowrap; }
table.rd-dt th:first-child, table.rd-dt td:first-child { text-align: left; }
table.rd-dt thead th { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
table.rd-dt tbody tr + tr td { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.ins-tools .ins-search { min-width: 220px; }
/* cards in a row share a height; their inner rows must not stretch with it */
.rd-card { align-content: start; }
.rd-tags { align-items: center; }
.rd-tag { align-self: center; line-height: 1.5; }
.rd-facts, .rd-strip { align-self: start; }

/* ------------------------------------------------ levels watch */
.lv-card { margin-top: 16px; }
table.lv { min-width: 720px; width: 100%; font-variant-numeric: tabular-nums; }
table.lv th, table.lv td { padding: 10px 14px; text-align: left; vertical-align: top; }
table.lv th { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
table.lv td.lv-s { min-width: 150px; } table.lv td.lv-s .hint { font-size: 11.5px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.lv td.lv-p b { font-size: 14.5px; } table.lv td.lv-p .px-chg { display: block; font-size: 11.5px; margin-top: 2px; }
table.lv td.lv-g b { font-size: 14px; } table.lv td.lv-g b.up { color: var(--good); } table.lv td.lv-g b.down { color: var(--bad); }
table.lv td.lv-g .hint { display: block; font-size: 11px; }
table.lv td.lv-u { white-space: nowrap; } table.lv td.lv-u span:last-child { font-size: 12px; color: var(--muted); }
.lv-bar { display: inline-block; width: 74px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.lv-bar i { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.lv-bar i.far { background: var(--warn); } .lv-bar i.zone { background: var(--bad); }
table.lv td.lv-n b { font-size: 13.5px; } table.lv td.lv-n .hint { display: block; font-size: 11px; }
table.lv tr.zone td { background: color-mix(in srgb, var(--bad) 8%, transparent); }
table.lv tr.far td { background: color-mix(in srgb, var(--warn) 6%, transparent); }
@media (max-width: 720px) {
  .lv-card .table-scroll { overflow: visible; max-height: none; }
  table.lv { display: block; min-width: 0; } table.lv thead { display: none; } table.lv tbody { display: block; }
  table.lv tbody tr { display: grid; grid-template-columns: 1fr 1fr auto; grid-template-areas: "s s p" "g g u" "n n a"; gap: 6px 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
  table.lv tbody td { display: block; padding: 0; }
  table.lv td.lv-s { grid-area: s; } table.lv td.lv-p { grid-area: p; text-align: right; }
  table.lv td.lv-g { grid-area: g; } table.lv td.lv-u { grid-area: u; text-align: right; }
  table.lv td.lv-n { grid-area: n; } table.lv td.lv-a { grid-area: a; text-align: right; }
}
table.lv td.lv-g b.flat { color: var(--muted); font-weight: 600; }
.rd-upd { color: var(--dim); font-style: italic; }

/* ================================================= AI: ask the desk */
.tab-ai .ai-glyph { color: var(--accent); font-size: 12px; }
.ai-badge { display: inline-block; font-size: 9.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; vertical-align: middle; margin-left: 4px;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.ai-card { overflow: hidden; }
.ai-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 22px 16px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); }
.ai-title { display: flex; gap: 14px; align-items: center; min-width: 0; }
.ai-title h2 { margin: 0; font-size: 20px; font-weight: 780; letter-spacing: -.3px; display: flex; align-items: center; gap: 6px; }
.ai-title p { margin: 3px 0 0; font-size: 13px; color: var(--muted); max-width: 560px; }
.ai-orb { flex: none; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(from 200deg, var(--accent), color-mix(in srgb, var(--good) 70%, var(--accent)), var(--accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); animation: ai-spin 9s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-orb { animation: none; } }
.ai-ask { display: flex; gap: 10px; align-items: center; padding: 4px 22px 12px; }
.ai-ask input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; }
.ai-ask input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ai-ask .btn { height: 46px; padding: 0 20px; }
.ai-mic { flex: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ai-mic svg { width: 19px; height: 19px; } .ai-mic:hover { border-color: var(--accent); color: var(--accent); }
.ai-mic.on { color: #fff; background: var(--bad); border-color: var(--bad); animation: ai-rec 1.2s ease-in-out infinite; }
@keyframes ai-rec { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bad) 25%, transparent); } }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 16px; }
.ai-chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ai-chip:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.ai-chip.brief { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); font-weight: 650; }
.ai-chip[disabled] { opacity: .5; cursor: default; }
.ai-thread { display: grid; gap: 14px; padding: 4px 22px 16px; }
.ai-empty { font-size: 13px; color: var(--muted); padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; }
.ai-turn { display: grid; gap: 8px; }
.ai-q { justify-self: end; max-width: 82%; display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); font-size: 14px; }
.ai-q em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ai-a { justify-self: start; max-width: 92%; padding: 14px 16px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); border: 1px solid var(--line); }
.ai-text { font-size: 14.5px; line-height: 1.6; } .ai-text b { font-weight: 750; color: var(--text); }
.ai-a.pending { color: var(--muted); font-size: 13.5px; display: flex; align-items: center; gap: 10px; }
.ai-a.err { color: var(--bad); font-size: 13.5px; }
.ai-dots { display: inline-flex; gap: 4px; } .ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ai-dot 1.1s infinite ease-in-out; }
.ai-dots i:nth-child(2) { animation-delay: .15s; } .ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.ai-say { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.ai-say svg { width: 15px; height: 15px; } .ai-say.on { color: var(--accent); border-color: var(--accent); }
.ai-used { font-size: 11.5px; color: var(--dim); } .ai-ms { font-size: 11px; color: var(--dim); margin-left: auto; }
@media (max-width: 720px) {
  .ai-hero { padding: 18px 14px 12px; } .ai-ask, .ai-chips, .ai-thread { padding-left: 14px; padding-right: 14px; }
  .ai-ask .btn { padding: 0 14px; } .ai-q, .ai-a { max-width: 100%; }
  .ai-lang { width: 100%; } .ai-lang .seg-btn { flex: 1; }
}
.ai-steps { font-style: normal; color: var(--dim); }
.ai-a.pending .ai-text { color: var(--text); }
.ai-caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: ai-caret 1s steps(1) infinite; }
@keyframes ai-caret { 50% { opacity: 0; } }

/* ======================================== dated closes and partial figures */
/* A last close (a company only BSE lists) reads as a close, never as a tick:
   plain colour, its day beside it. A print that is not live is dimmed. */
.px-ltp.eod { color: var(--text); }
.px-asof { color: var(--dim); font-weight: 600; font-size: .92em; white-space: nowrap; }
.px-ltp.stale, .mkt-price.stale, .t-px.stale, .trend-live b.stale, .verdict-headline .num.stale { opacity: .62; }
table.rq td.rq-px .px-asof { display: block; font-size: 11px; margin-top: 2px; }
.mkt-asof { font-size: 12px; font-weight: 650; color: var(--muted); margin: -2px 0 4px; }
/* A print that is not live: its time on a line of its own under the price, so it wraps rather than being clipped on a narrow tile. */
.t-row.t-asof { font-size: 11.5px; margin-top: -4px; justify-content: flex-start; }
.t-row.t-asof span { min-width: 0; overflow-wrap: anywhere; }
.t-gear.stale { opacity: .55; }
/* A tile's direction on its ladder (app.js trendTileHtml): green above the close, red below, its arrow in the gear. */
.t-tile.tr-up { box-shadow: inset 3px 0 0 var(--good); } .t-tile.tr-down { box-shadow: inset 3px 0 0 var(--bad); }
.t-tile.on.tr-up { box-shadow: inset 3px 0 0 var(--good), 0 0 0 2px var(--accent-dim) inset; }
.t-tile.on.tr-down { box-shadow: inset 3px 0 0 var(--bad), 0 0 0 2px var(--accent-dim) inset; }
.t-tile.tr-up .t-gear { color: var(--good); } .t-tile.tr-down .t-gear { color: var(--bad); }
/* The tape header's line about BSE's filings: quiet when it is only a time, amber when they are missing. */
.bse-note { color: var(--dim); }
.bse-note.warn { color: var(--warn); font-weight: 600; }
/* A company's filing list that starts partway back says from when. */
.ann-from { margin-bottom: 10px; }
.dl-note { padding: 2px 20px 12px; }
/* An OFS book that holds one exchange's bids says so beside every total. */
.book-note { color: var(--warn); font-weight: 600; }
.verdict-headline .book-note { font-size: 12px; letter-spacing: 0; vertical-align: middle; margin-left: 8px; }
/* An IPO figure not published yet: a calm dash, the reason on hover. */
.ipo-facts .na b { color: var(--dim); font-weight: 500; cursor: help; }
/* a fact's second line: why it is not known yet, the time of a figure, "expected" under a date, "min 2 lots" */
.ipo-facts em { display: block; font-style: normal; font-size: 10.5px; line-height: 1.25; color: var(--muted); margin-top: 1px; }
@media (max-width: 720px) { .dl-note { padding: 2px 14px 10px; } }

/* ================================================= results: BSE-only tag, did-not-report line */
.res-x { font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.ann-sym .res-x { color: var(--muted); }
.res-sym { flex: none; } .res-q { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rq-dnr { margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rq-cover { margin: -4px 0 10px; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.45; }
.rq-empty + .rq-cover { margin-top: 2px; }
table.rq td.rq-t .hint { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }

/* tab count: red when something needs a look (a pledge invoked today) */
.tab .count.bad { background: var(--bad-fill); color: #fff; }

/* ================================================= insider: one list */
.ins-today { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 4px; padding: 10px 20px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ins-today-k { font-weight: 750; margin-right: 6px; }
.ins-sep { color: var(--dim); }
.ins-tc { border: 1px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 13.5px; padding: 3px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.ins-tc b { color: var(--text); font-weight: 750; font-variant-numeric: tabular-nums; margin-left: 2px; }
.ins-tc:hover { border-color: var(--line); color: var(--text); }
.ins-tc.warn b { color: var(--warn); }
.ins-tc.bad { background: var(--bad-fill); color: #fff; } .ins-tc.bad b { color: #fff; }
.ins-tc.grey, .ins-tc.grey b { color: var(--dim); font-weight: 600; }
.ins-tc.on { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); } .ins-tc.on b { color: var(--accent); }
.ins-tc.bad.on { box-shadow: 0 0 0 2px var(--accent); background: var(--bad-fill); color: #fff; } .ins-tc.bad.on b { color: #fff; }
.ins-margin-btn { border: 1px dashed var(--line); background: none; color: var(--dim); font-weight: 600; font-size: 12.5px; font-family: inherit; padding: 6px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.ins-margin-btn:hover { color: var(--muted); } .ins-margin-btn.on { color: var(--muted); border-style: solid; background: var(--surface-2); }

/* the table: fixed lanes, names and details wrap inside their own column */
table.insx { min-width: 1080px; table-layout: fixed; width: 100%; }
table.insx th, table.insx td { text-align: left; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
table.insx th:nth-child(1) { width: 76px; } table.insx th:nth-child(2) { width: 170px; } table.insx th:nth-child(3) { width: 190px; }
table.insx th:nth-child(4) { width: 108px; } table.insx th:nth-child(5) { width: 110px; } table.insx th:nth-child(6) { width: 118px; }
table.insx th:nth-child(8) { width: 44px; }
table.insx th:nth-child(5), table.insx th:nth-child(6), table.insx td.ins-sh, table.insx td.ins-sz { text-align: right; }
table.insx td.ins-t, table.insx td.ins-sh { white-space: nowrap; }
table.insx td .hint { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
table.insx td.ins-sz b { display: block; white-space: nowrap; }
table.insx td.ins-d { font-size: 13px; color: var(--muted); line-height: 1.4; }
table.insx .ann-sym { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
table.insx td.ins-f .ann-file { margin: 0; font-size: 15px; }
.ins-whom { display: none; }
.ib { display: inline-block; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; padding: 2px 7px; border-radius: 6px; max-width: 100%; white-space: normal; }
.ib.buy { color: var(--good); background: var(--good-dim); }
.ib.sell { color: var(--bad); background: var(--bad-dim); }
.ib.pledged { color: var(--warn); background: var(--warn-dim); }
.ib.released { color: color-mix(in srgb, var(--good) 65%, var(--muted)); background: color-mix(in srgb, var(--good) 8%, transparent); }
.ib.invoked { color: #fff; background: var(--bad-fill); }
.ib.other, .ib.filed { color: var(--muted); background: var(--surface-2); font-weight: 650; }
.ib.margin { color: var(--dim); background: transparent; border: 1px dashed var(--line); font-weight: 600; }
/* emphasis, used sparingly */
table.insx tr.ins-buy td { background: color-mix(in srgb, var(--good) 9%, transparent); }
table.insx tr.ins-sell td { background: color-mix(in srgb, var(--bad) 9%, transparent); }
table.insx tr.ins-bar td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.insx tr.ins-margin td { opacity: .55; }
table.insx tr.muted td { opacity: .5; }
/* "new since you looked": a thin accent line and a dot on each new row */
table.insx tr.ins-newline td { padding: 5px 14px 3px; border-bottom: 0; background: transparent; }
table.insx tr.ins-newline:hover td { background: transparent; }
table.insx tr.ins-newline span { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
table.insx tr.ins-newline span::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.ins-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 2px; }
.ins-empty { padding: 18px 14px !important; }
.ins-more { padding: 10px 20px 2px; text-align: center; }

/* ================================================= radar: both directions, and the readout */
.rd-tag.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
button.rd-tag.link { cursor: pointer; font-family: inherit; color: var(--accent); background: var(--surface); }
button.rd-tag.link:hover { border-color: var(--accent); }
.rd-aw { font-size: 12px; color: var(--muted); margin-top: -4px; }
.rd-card.flash { box-shadow: 0 0 0 2px var(--accent); }
.rd-days { overflow-x: auto; }
table.rd-dt tr.s td { color: var(--bad); }
table.rd-dt th:nth-child(5), table.rd-dt td.rd-who { text-align: left; }
table.rd-dt td.rd-who { white-space: normal; min-width: 120px; max-width: 220px; }
.rd-aw-t { font-style: italic; opacity: .85; }
.t-tip.rd-tip { white-space: normal; width: max-content; max-width: min(320px, calc(100vw - 48px)); text-align: left; padding: 7px 10px; }
.t-tip.rd-tip::after { left: var(--ax, 50%); }
.rd-tip .rd-ro + .rd-ro { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.rd-tip .l1 { font-weight: 750; font-size: 12.5px; } .rd-tip .l1.b { color: var(--good); } .rd-tip .l1.s { color: var(--bad); }
.rd-tip .l { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

/* ================================================= phone pass for the above (≤ 720px) */
@media (max-width: 720px) {
  .ins-tools .seg { flex-wrap: wrap; max-width: 100%; } .ins-tools .seg-btn { flex: 1 1 auto; }
  .ins-today { padding: 10px 14px; }
  /* insider: each row a two-line card — SYMBOL · BADGE · size over who · details; nothing to scroll sideways */
  #insiderBody .ins-scroll { overflow: visible; max-height: none; }
  table.insx { display: block; min-width: 0; width: 100%; } table.insx thead { display: none; } table.insx tbody { display: block; }
  table.insx tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "stock what sz t" "det det det f"; gap: 5px 10px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: center; }
  table.insx tbody td { display: block; padding: 0; border: 0; width: auto; background: transparent !important; box-shadow: none !important; }
  table.insx td.stock { grid-area: stock; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.insx td.stock .hint { display: none; }
  table.insx td.what { grid-area: what; }
  table.insx td.ins-sz { grid-area: sz; text-align: right; } table.insx td.ins-sz b { display: inline; } table.insx td.ins-sz .hint { display: none; }
  table.insx td.ins-t { grid-area: t; text-align: right; font-size: 12px; color: var(--muted); }
  table.insx td.who, table.insx td.ins-sh { display: none; }
  table.insx td.ins-d { grid-area: det; font-size: 12.5px; }
  table.insx .ins-whom { display: inline; font-weight: 600; color: var(--text); }
  table.insx td.ins-f { grid-area: f; text-align: right; align-self: start; }
  table.insx tbody tr.ins-newline { display: block; padding: 6px 14px 2px; border-top: 0; } table.insx tbody tr.ins-newline td { display: block; }
  table.insx tbody tr.ins-buy { background: color-mix(in srgb, var(--good) 8%, transparent); }
  table.insx tbody tr.ins-sell { background: color-mix(in srgb, var(--bad) 8%, transparent); }
  table.insx tbody tr.ins-bar { box-shadow: inset 3px 0 0 var(--warn); }
  table.insx tbody tr.ins-margin { opacity: .55; } table.insx tbody tr.ins-margin td { opacity: 1; }
  table.insx tbody tr.muted { opacity: .5; } table.insx tbody tr.muted td { opacity: 1; }
  table.insx td[colspan] { grid-column: 1 / -1; }
  table.insx tbody tr:has(> td[colspan]) { display: block; }
}
@media (max-width: 720px) { table.insx td.what .ib { max-width: 120px; } }

/* ================================================= phones: thumbs and the on-screen keyboard (≤ 720px) */
@media (max-width: 720px) {
  /* A company's symbol is a card's main way in: a thumb-sized target, its label centred in it. */
  button.ann-sym { min-height: 32px; display: inline-flex; align-items: center; }
  /* iOS zooms the whole page into any text box or drop-down under 16px the moment it takes focus
     (`:root select` outranks each drop-down's own size, e.g. `.mcap-pick select`). */
  .ins-search input, .t-search input, .t-searchbar input, .ai-ask input, .rule-row input, input[data-deal-min],
  .auth-card form input:not([type=checkbox]), .acct-form input, .invite-form input, .invite-link input, :root select { font-size: 16px; }
}

/* ================================================= results: the month ahead, figures on request */
.rq-more { margin: 8px 0 4px; }
.rq-later { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 20px 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12.5px; }
.rq-later > span { color: var(--muted); font-weight: 650; margin-right: 2px; }
.rq-later-b { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.rq-later-b:hover { border-color: var(--accent); color: var(--accent); }
.rq-later-b .res-x { margin-left: 4px; }
table.rq td.rq-pending .rq-ask { font-style: normal; }

/* the new controls you tap, at thumb size on a phone like every other */
@media (max-width: 720px) {
  .ins-tc, .ins-margin-btn, button.rd-tag.link, .rq-later-b, .rq-ask, .rq-more .btn { min-height: 40px; }
  .rq-later { margin: 4px 14px 12px; }
}

/* Radar dots stay legible at phone width. */
@media (max-width: 720px) { .rd-strip { gap: 2px; } .rd-strip i { min-width: 4px; } }

/* ================================================= a result's figures and a release's facts, under the filing */
/* One line of fixed lanes, drawn with the row and filled in place: the width of every lane is set before any
   figure arrives, so a late answer never moves anything. EBITDA and revenue lead: they sit on the lead band (the
   Results desk's), larger, their growth as large and as bold as the amount. Names are small capitals, the unit is
   quiet, and a growth that is not there is left blank. */
.rf-slot { position: relative; }
.rf {
  --rf-band: var(--lead-band);
  display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 15.5rem) minmax(0, 11.5rem) minmax(0, 1fr);
  grid-template-areas: "e r m p"; align-items: stretch;
  margin: 7px 0 2px; border-radius: 9px; background: var(--surface-2); overflow: hidden;
  font-size: 12.5px; line-height: 1.45; font-variant-numeric: tabular-nums; color: var(--muted);
}
/* An older quarter or an SME's half-year: named ahead of the lanes, in the warning colour. */
.rf.rf-tagged { position: relative; }
.rf.rf-tagged > .rf-t { position: absolute; right: 0; top: 0; }
.rf-l { min-width: 0; padding: 6px 12px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-t { grid-area: t; color: var(--warn); font-weight: 750; font-size: 11.5px; }
.rf-e { grid-area: e; } .rf-r { grid-area: r; } .rf-m { grid-area: m; } .rf-p { grid-area: p; }
.rf-e, .rf-r { background: var(--rf-band); font-size: 14.5px; }
.rf-k { font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--label); margin-right: 2px; }
.rf-e .rf-k, .rf-r .rf-k { color: var(--muted); font-weight: 750; }
.rf-v { color: var(--text); font-weight: 600; }
.rf-v.neg { color: var(--bad); }
.rf-cr { font-size: .78em; font-weight: 500; color: var(--label); line-height: 1; }
.rf-lead { font-weight: 800; }
.rf-v.rf-lead { color: var(--text); }
.rf-v.neg.rf-lead { color: var(--bad); }
.rf-mv { font-weight: 650; margin-left: 2px; }
.rf-mv.up { color: var(--good); } .rf-mv.down { color: var(--bad); } .rf-mv.flat { color: var(--muted); }
/* A line where a rise is bad news (a lender's provisions): the arrow keeps its direction, the colour turns. */
.rf-mv.inv.up { color: var(--bad); } .rf-mv.inv.down { color: var(--good); }
.rf-mv.nm, .rf-na { color: var(--dim); font-weight: 500; }
.rf-mv.rf-lead { font-weight: 800; }
.rf-chk { color: var(--dim); font-style: italic; }
.rf-sk { display: inline-block; width: 4.2em; height: .62em; border-radius: 3px; vertical-align: -1px; background: color-mix(in srgb, var(--muted) 16%, transparent); animation: rfWait 1.3s ease-in-out infinite; }
.rf-wait { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
@keyframes rfWait { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .rf-sk { animation: none; } }
/* Another row of the same company-quarter: a pointer over hidden lanes, so the line keeps its height. */
.rf-ptr { position: relative; background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.rf-ptr > .rf-l { visibility: hidden; }
.rf-ptr-t { position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-50%); color: var(--dim); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf[data-rf-tap] { cursor: pointer; }
.rf[data-rf-tap]:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.rf[data-rf-tap]:hover .rf-e, .rf[data-rf-tap]:hover .rf-r { background: color-mix(in srgb, var(--accent) 9%, var(--lead-band)); }
.rf[data-rf-tap]:focus-visible, .pf[data-pf-tap]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rf-card, .pf-card { display: none; margin: 4px 0 2px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; line-height: 1.55; color: var(--muted); white-space: normal; }
.rf-slot.open .rf-card, .pf-slot.open .pf-card { display: block; }
.rf-card div + div, .pf-card div + div { margin-top: 2px; }
.pf-card b { color: var(--text); font-weight: 650; margin-right: 4px; }

.pf {
  display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 13rem) minmax(0, 11rem) minmax(0, 11rem) minmax(0, 1fr);
  column-gap: 12px; row-gap: 2px; align-items: baseline;
  margin: 6px 0 2px; padding: 6px 10px; border-radius: 9px; background: var(--surface-2);
  font-size: 12.5px; line-height: 1.45; font-variant-numeric: tabular-nums; color: var(--muted);
}
.pf[data-pf-tap] { cursor: pointer; }
.pf-l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-l b { color: var(--text); font-weight: 700; }
.pf-l i { font-style: normal; color: var(--dim); }
.pf-cmp.up { color: var(--good); font-weight: 650; } .pf-cmp.down { color: var(--bad); font-weight: 650; }


/* the company page: under the results panel's title */
.co-rf { padding: 12px 20px 0; }
.card > .co-rf:last-child { padding-bottom: 16px; }
.co-rf .rf { margin: 0; }
.co-pledges { margin: 0 0 0 6px; font-size: 12.5px; font-weight: 600; }
/* insider: the BSE pledge page, at the end of the details */
.ins-bse { margin: 0 0 0 6px; font-size: 12.5px; white-space: nowrap; }

/* Below about 1,120 px one line leaves "Profit to owners" too little room: the four lanes stay side by side, each
   name over its figures (two lines, as tall as before), so the lanes still line up down the tape. */
@media (max-width: 1120px) {
  .rf { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "e r m p"; }
  .rf.rf-tagged { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "t t t t" "e r m p"; }
  .rf.rf-tagged > .rf-t { position: static; }
  .rf-l > .rf-k { display: block; margin: 0 0 1px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
  .rf-l.rf-t { padding-bottom: 0; }
}
/* a small tablet: the lead lanes a little wider, so a lakh-crore revenue keeps its growth in view */
@media (min-width: 721px) and (max-width: 900px) {
  .rf, .rf.rf-tagged { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .85fr) minmax(0, .95fr); }
}
@media (max-width: 960px) {
  .pf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-l:empty { display: none; }
  .pf-g { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  /* a phone: two lanes a row, EBITDA and revenue on the band first, margin and profit under them */
  .rf { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "e r" "m p"; font-size: 12px; }
  .rf.rf-tagged { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "t t" "e r" "m p"; }
  .rf-l { padding: 6px 10px; }
  .rf-e, .rf-r { font-size: 14px; }
  /* a phone: one lane a line, wrapping rather than cut short */
  .pf { grid-template-columns: minmax(0, 1fr); padding: 6px 9px; font-size: 12px; }
  .pf-l { white-space: normal; }
  .co-rf { padding: 12px 16px 0; }
}
/* A phone held upright: a touch tighter, so "−₹43,832 ▲1,234%" still fits half the line. */
@media (max-width: 480px) {
  .rf-l { padding: 6px 8px; }
  .rf-e, .rf-r { font-size: 13.5px; }
}
@media (max-width: 400px) {
  .rf-e, .rf-r { font-size: 13px; padding-left: 6px; padding-right: 6px; }
}

/* ================================================= Results desk: EBITDA and revenue lead the row */
/* The four figure columns are one cell (colspan 4) redrawn in place when the figures land; its inner grid uses the
   header's own column widths, so the numbers sit under their headings. Every figure is its amount and its growth on
   the year. EBITDA and revenue sit on the lead band, larger, their growth as large and as bold as the amount. On a
   full-width desk the growth sits beside the amount, so down the table every growth figure forms its own column;
   narrower, it sits under the amount. Every line a cell can fill is drawn from the first paint, so nothing moves
   when the figures land. */
table.rs {
  --w-e: 152px; --w-r: 158px; --w-m: 122px; --w-p: 138px;   /* the four figure columns */
  --w-g: 60px; --w-g2: 54px;                                  /* growth lanes: EBITDA and revenue; margin and profit */
  --rs-band: var(--lead-band);   /* the lead band, in both themes */
  width: 100%; min-width: 0; table-layout: fixed; font-size: 13.5px;
}
table.rs th, table.rs td { padding: 9px 10px; vertical-align: top; }
table.rs th:nth-child(1) { width: 58px; } table.rs th:nth-child(2) { width: auto; }
table.rs th:nth-child(3) { width: var(--w-e); } table.rs th:nth-child(4) { width: var(--w-r); } table.rs th:nth-child(5) { width: var(--w-m); } table.rs th:nth-child(6) { width: var(--w-p); }
table.rs th:nth-child(7) { width: 84px; } table.rs th:nth-child(8) { width: 104px; } table.rs th:nth-child(9) { width: 96px; }
table.rs th { text-align: left; vertical-align: bottom; } table.rs th.rs-hpx { text-align: right; }
/* a figure heading: its name over its two lanes, the unit over the amounts and "YoY" over the growth */
table.rs th.rs-h { padding-left: 8px; padding-right: 8px; }
.rs-hk { display: block; text-align: center; white-space: nowrap; }
.rs-hu { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-g2); column-gap: 6px; margin-top: 3px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--label); }
.rs-hu i { font-style: normal; white-space: nowrap; text-align: right; } .rs-hu i + i { text-align: left; }
table.rs th.rs-he, table.rs th.rs-hr { background: var(--rs-band); color: var(--text); font-weight: 750; }
table.rs th.rs-he .rs-hu, table.rs th.rs-hr .rs-hu { grid-template-columns: minmax(0, 1fr) var(--w-g); color: var(--muted); }
table.rs td.rs-t { font-weight: 700; white-space: nowrap; } table.rs td.rs-t .hint { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
table.rs td.rs-co { min-width: 0; text-align: left; white-space: normal; } table.rs td.rs-co .ann-sym { max-width: 100%; }
/* the company's name wraps to a second line rather than being cut short; longer than that, it stops there */
table.rs td.rs-co .hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.35; }
.rs-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 750; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 4px; padding: 0 5px; vertical-align: 1px; white-space: nowrap; }
/* (a standalone trio shown first: the basis named in the muted ink, its box no taller than the name's line) */
.rs-tag.rs-tag-b { color: var(--muted); border-color: color-mix(in srgb, var(--muted) 45%, transparent); line-height: 15px; }
/* the figures cell: no padding of its own, so its columns line up with the headings; the band runs the row's full height */
table.rs td.rs-fxd { padding: 0; height: 1px; }
table.rs td.rs-fxd > .rf-slot { height: 100%; display: flex; flex-direction: column; }
.rs-fx { flex: 1 0 auto; display: grid; grid-template-columns: var(--w-e) var(--w-r) var(--w-m) var(--w-p); font-variant-numeric: tabular-nums; }
/* one figure: the amount, right-aligned, meets its growth, left-aligned, at a fixed gutter; then (profit) the EPS */
.rs-c { min-width: 0; padding: 9px 8px; display: grid; grid-template-columns: minmax(0, 1fr) var(--w-g2); column-gap: 6px;
  align-items: baseline; align-content: start; white-space: nowrap; }
.rs-c.rs-e, .rs-c.rs-r { grid-template-columns: minmax(0, 1fr) var(--w-g); background: var(--rs-band); }
.rs-v { min-width: 0; text-align: right; font-size: 14px; font-weight: 650; line-height: 1.4; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.rs-v.rs-lead { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
/* margin and profit a step below the lead pair, so EBITDA and revenue win the row on size and weight, not only the band */
.rs-v:not(.rs-lead) { font-size: 13.5px; font-weight: 600; }
.rs-v.neg { color: var(--bad); }
.rs-rs { font-style: normal; display: none; }
.rs-v .rf-na, .rs-v .rf-chk { font-size: 13px; font-weight: 500; }
/* the Margin column's checking look: a mark on the desk (the words clip at 50-60 px), the words on a phone card */
.rs-m .rf-chk .chk-l { display: none; }
@media (max-width: 720px) { .rs-m .rf-chk .chk-l { display: inline; } .rs-m .rf-chk .chk-s { display: none; } }
.rs-v .rf-sk { max-width: 100%; }
.rs-g { min-width: 0; text-align: left; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--dim); }
.rs-e .rs-g, .rs-r .rs-g { font-size: 14px; font-weight: 750; }
.rs-m .rs-g, .rs-p .rs-g { font-size: 12px; font-weight: 650; }
/* a growth figure never crosses into the next lane (four digits are written "1.2k%") */
.rs-g { overflow: hidden; }
/* the full desk: the margin cell's padding tightened, so "43.0%" and "−45.2%" keep their % beside the growth */
@media (min-width: 1180px) {
  .rs-c.rs-m { padding-left: 4px; padding-right: 4px; column-gap: 4px; }
  table.rs th.rs-hm { padding-left: 4px; padding-right: 4px; } table.rs th.rs-hm .rs-hu { column-gap: 4px; }
}
.rs-g.up { color: var(--good); } .rs-g.down { color: var(--bad); } .rs-g.flat { color: var(--muted); }
.rs-g.inv.up { color: var(--bad); } .rs-g.inv.down { color: var(--good); }
.rs-g.nm { font-weight: 500; cursor: help; }
.rs-sub { grid-column: 1 / -1; text-align: right; margin-top: 2px; font-size: 11px; line-height: 1.4; font-weight: 500; color: var(--muted); }
.rs-fx.rs-note, .rs-fx.rs-ask { position: relative; }
.rs-fx.rs-note > .rs-c, .rs-fx.rs-ask > .rs-c { visibility: hidden; }
.rs-over { position: absolute; left: 10px; right: 10px; top: 9px; text-align: left; }
.rs-fx.rs-note, .rs-fx.rs-ask { background: linear-gradient(to right, var(--rs-band) 0 calc(var(--w-e) + var(--w-r)), transparent 0); }
.rs-fx.rs-note .rs-over { color: var(--muted); font-style: italic; font-size: 13px; white-space: normal; }
/* a phone: the note alone, a line, not a card of hidden figures */
/* a phone: the card keeps the height its figures will take (they often follow minutes later), the note in a quiet
   panel where they will be, so nothing below moves when they land */
@media (max-width: 720px) {
  .rs-fx.rs-note, .rs-fx.rs-ask { background: none; }
  .rs-fx.rs-note > .rs-c { visibility: hidden; }
  .rs-fx.rs-note::after { content: ""; position: absolute; inset: 0; border: 1px dashed var(--line); border-radius: 10px; pointer-events: none; }
  .rs-fx.rs-note .rs-over { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 1; }
  /* past the first forty rows: a tap asks for the figures, so the card may grow then */
  .rs-fx.rs-ask > .rs-c { display: none; } .rs-fx.rs-ask .rs-over { position: static; grid-column: 1 / -1; }
}
.rs-fx[data-rf-tap] { cursor: pointer; }
.rs-fx[data-rf-tap]:hover .rs-c { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rs-fx[data-rf-tap]:hover .rs-c.rs-e, .rs-fx[data-rf-tap]:hover .rs-c.rs-r { background: color-mix(in srgb, var(--accent) 9%, var(--lead-band)); }
.rs-fx[data-rf-tap]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.rs td.rs-fxd .rf-card { margin: 4px 10px 8px; }
table.rs td.rs-vd { text-align: left; }
table.rs td.rs-px { white-space: nowrap; text-align: right; font-size: 12.5px; }
table.rs td.rs-px .px-ltp { display: block; font-weight: 700; font-size: 13.5px; color: var(--text); }
table.rs td.rs-px .px-chg { display: block; font-size: 11.5px; margin-top: 2px; font-weight: 650; }
table.rs td.rs-px .px-chg.up { color: var(--good); } table.rs td.rs-px .px-chg.down { color: var(--bad); }
table.rs td.rs-px .px-cap { display: none; } table.rs td.rs-px .px-asof { display: block; font-size: 11px; margin-top: 2px; }
table.rs td.rs-px:empty::after { content: "—"; color: var(--muted); }
table.rs td.rs-a { white-space: nowrap; text-align: right; padding-left: 4px; padding-right: 8px; } table.rs td.rs-a .ico { width: 26px; height: 26px; margin-left: 2px; font-size: 12px; }
table.rs tr.good td:first-child { box-shadow: inset 3px 0 0 var(--good); } table.rs tr.bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
/* Narrower than the full desk: the growth goes under its amount and the lanes narrow, so the whole row still fits
   down to about 1,010 px, a small laptop included, with nothing to scroll sideways. */
@media (max-width: 1179px) {
  table.rs { --w-e: 120px; --w-r: 120px; --w-m: 92px; --w-p: 116px; }
  table.rs th:nth-child(8) { width: 100px; }
  .rs-hk, .rs-hu { text-align: right; } .rs-hu { display: block; } .rs-hu i + i::before { content: " · "; }
  .rs-c, .rs-c.rs-e, .rs-c.rs-r { grid-template-columns: minmax(0, 1fr); row-gap: 1px; }
  .rs-g { text-align: right; }
  .rs-v.rs-lead { font-size: 16px; } .rs-e .rs-g, .rs-r .rs-g { font-size: 14px; }
}
/* A tablet: the row scrolls sideways under a fixed time and company, the four figure lanes in view first. */
@media (max-width: 1009px) {
  table.rs { min-width: 926px; }
  table.rs th:nth-child(1), table.rs td.rs-t { position: sticky; left: 0; background: var(--surface); z-index: 2; }
  table.rs th:nth-child(2), table.rs td.rs-co { position: sticky; left: 58px; width: 140px; background: var(--surface); z-index: 1; }
}
/* a phone: each result a card. EBITDA and revenue: two tiles on the lead band, the name, the amount, its growth under
   it. Margin and profit the same, a step down and unboxed. Every line drawn from the first paint. */
@media (max-width: 720px) {
  /* the page scrolls, not a box inside it: a capped box that does not scroll would spill rows over the calendar */
  .panel .table-scroll.rq-scroll { max-height: none; overflow: visible; }
  table.rs { display: block; min-width: 0; width: 100%; } table.rs thead { display: none; } table.rs tbody { display: block; }
  table.rs tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "co co co t" "fx fx fx fx" "v px a a"; gap: 10px 12px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: center; }
  table.rs tbody td { display: block; padding: 0; border: 0; width: auto; position: static; background: none !important; height: auto; }
  table.rs td.rs-t { grid-area: t; text-align: right; align-self: start; position: static; } table.rs td.rs-co { grid-area: co; width: auto; position: static; }
  table.rs td.rs-fxd { grid-area: fx; height: auto; } table.rs td.rs-vd { grid-area: v; } table.rs td.rs-px { grid-area: px; } table.rs td.rs-a { grid-area: a; padding: 0; }
  table.rs td.rs-a .ico { width: 40px; height: 40px; font-size: 14px; }
  table.rs td.rs-fxd > .rf-slot { height: auto; display: block; }
  .rs-fx { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 8px; }
  .rs-fx.rf-wait { background: none; }
  .rs-rs { display: inline; }
  .rs-c::before { grid-column: 1 / -1; font-size: 10.5px; font-weight: 650; letter-spacing: .06em; line-height: 1.5; color: var(--label); }
  .rs-c.rs-e::before { content: "EBITDA"; } .rs-c.rs-r::before { content: "REVENUE"; } .rs-c.rs-m::before { content: "MARGIN"; } .rs-c.rs-p::before { content: "PROFIT"; }
  .rs-c.rs-e::before, .rs-c.rs-r::before { color: var(--muted); font-weight: 750; }
  .rs-c, .rs-v, .rs-g, .rs-sub { text-align: left; }
  .rs-c.rs-e, .rs-c.rs-r { border-radius: 10px; padding: 9px 12px 10px; }
  .rs-v, .rs-v:not(.rs-lead) { font-size: 15px; }
  .rs-v.rs-lead { font-size: 20px; }
  .rs-e .rs-g, .rs-r .rs-g { font-size: 14.5px; }
  .rs-c .rs-g:is(.up, .down, .flat)::after { content: " YoY"; font-size: 11px; font-weight: 600; color: var(--label); }
  .rs-c.rs-m, .rs-c.rs-p { padding: 0 12px; }
  .rs-fx[data-rf-tap]:hover .rs-c.rs-m, .rs-fx[data-rf-tap]:hover .rs-c.rs-p { background: none; }
  table.rs tr.good td:first-child, table.rs tr.bad td:first-child { box-shadow: none; }
  table.rs tbody tr.good { box-shadow: inset 3px 0 0 var(--good); } table.rs tbody tr.bad { box-shadow: inset 3px 0 0 var(--bad); }
}
/* calendar cards: the top line never pushes past the card; a quarter is named there only when it is an older one */
.res-card { grid-template-columns: minmax(0, 1fr); } .res-top { min-width: 0; } .res-card .res-q { color: var(--warn); }
/* a long company name takes a second line rather than being cut; the card's hover carries the full name and industry */
.res-card .res-name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
/* Reported today is part of the page, not a capped box inside it: every row it counts is on the page. On a full-width
   desk the column headings stay just under the page's header while the table passes; a tablet keeps its sideways scroll. */
#resultsBody .table-scroll.rq-scroll { max-height: none; }
@media (min-width: 1010px) {
  #resultsBody .table-scroll.rq-scroll { overflow: visible; clip-path: inset(0 round 12px); }   /* its corners still rounded */
  #resultsBody .res-desk { overflow: clip; }   /* clipped as before, but not a scroll box the headings would stick inside */
  #resultsBody table.rs th { top: var(--hdr-h, 0px); }
}
/* a heading scrolled to ("still awaited") lands clear of the page's header; an empty list's reason sits with its button */
#resAwaited { scroll-margin-top: calc(var(--stuck-h, var(--hdr-h, 0px)) + 10px); }
.rq-h { flex-wrap: wrap; row-gap: 6px; } .rq-h .btn.sm { align-self: center; }
.rq-empty { padding: 12px 0 6px; } .rq-empty .btn.sm { margin-left: 8px; }

/* deals: a heading for each kind when both are in view (block deals today, bulk deals usually the previous session) */
table.deals tr.dl-sec td { padding: 14px 12px 8px; text-align: left; background: var(--surface-2); border-top: 1px solid var(--line); }
table.deals tr.dl-sec b { font-size: 13px; font-weight: 750; margin-right: 10px; color: var(--text); }
table.deals tr.dl-sec span { font-size: 12px; color: var(--muted); }
table.deals tbody tr.dl-sec:hover td { background: var(--surface-2); }
@media (max-width: 720px) {
  #blocksBody table.deals tbody tr.dl-sec:not(.ru-tr) { display: block; padding: 0; }
  #blocksBody table.deals tbody tr.dl-sec td { display: block; padding: 12px 16px 8px; background: var(--surface-2) !important; }
}

/* ================================================= Trend strip, final: every piece of a tile is a cell of one grid
   (.t-in). The tile's own width picks the arrangement, so no index name breaks beside its gear word, no change runs
   past the edge, and "expected" / "used" each stay on one line:
     desk tile   name · gear / price · change / gauge / expected · used
     narrow tile the gear under the name (five abreast on a small laptop or an iPad)
     phone row   name gear · price / gauge · change / expected · used — one index a row, prices in one column */
.t-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
/* a grid, not a block: a button centres a block's content, and a shorter tile (levels pending) must stay top-aligned */
.t-tile { container-type: inline-size; display: grid; align-content: start; padding: 11px 13px; }
.t-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id id" "px chg" "gauge gauge" "exp used";
  column-gap: 8px; row-gap: 6px; align-items: baseline; min-width: 0; }
.t-id { grid-area: id; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 8px; min-width: 0; }
.t-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t-gear { flex: none; font-size: 10.5px; font-weight: 750; letter-spacing: .05em; line-height: 1.25; }
.t-px { grid-area: px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-strip .t-chg { grid-area: chg; justify-self: end; font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-gauge { grid-area: gauge; display: block; align-self: center; margin: 3px 0 2px; }
.t-exp, .t-used, .t-pend { font-size: 11.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.t-exp { grid-area: exp; } .t-used { grid-area: used; justify-self: end; } .t-pend { grid-column: 1 / -1; }
.t-used.t-asof, .t-pend.t-asof { color: var(--dim); }
/* another day's print: its time on a line of its own, under "expected" */
.t-used.t-asof-own { grid-area: auto; grid-column: 1 / -1; justify-self: start; }
/* five abreast below about 1,140 px: a name and "ENGINE START" no longer share a line, so every tile puts its gear
   under its name (all five alike, so the prices still sit on one line across the strip) */
@container (max-width: 178px) {
  .t-id { flex-direction: column; align-items: flex-start; row-gap: 1px; }
  .t-px { font-size: 16.5px; } .t-strip .t-chg { font-size: 11.5px; }
  .t-exp, .t-used { font-size: 11px; }
}
/* a tablet: three abreast, as before */
@media (max-width: 980px) { .t-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* a phone: one index a row, like a market watch — the price and its change in one right-hand column down the strip,
   a gauge twice as wide as a half-width tile's */
@media (max-width: 720px) {
  .t-strip { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .t-tile { padding: 10px 12px 9px; }
  .t-in { grid-template-columns: minmax(0, 1fr) auto minmax(88px, max-content); grid-template-areas: "id id px" "gauge gauge chg" "exp used .";
    column-gap: 10px; row-gap: 4px; }
  .t-id { justify-content: flex-start; column-gap: 10px; }
  .t-name { font-size: 15px; }
  .t-px { justify-self: end; font-size: 17px; }
  .t-strip .t-chg { font-size: 13px; }
  .t-gauge { margin: 4px 0 3px; }
}

/* ================================================= Results desk, final pass */
/* EPS: its name and figure, the minus before the rupee ("EPS −₹0.12"). */
.rs-sub i { font-style: normal; } .rs-sub b { font-weight: 500; margin-left: 4px; }
/* The full desk: a lakh-crore revenue (Reliance, IOC) and a lakh-crore profit or loss keep every digit. Margin gives
   the room (its widest figure is "−45.2%"); the company column keeps its width, so names stay on one line. */
@media (min-width: 1180px) {
  table.rs { --w-r: 158px; --w-m: 116px; --w-p: 144px; --w-g2: 50px; }
}
/* the section line wraps under its title on a phone, rather than squeezing "Reported today" onto two lines */
@media (max-width: 720px) { .rq-h { flex-wrap: wrap; row-gap: 2px; } .rq-h > span:first-child { white-space: nowrap; } }
/* a price not in yet: a quiet dash, not a mark as loud as a figure */
table.rs td.rs-px:empty::after { color: var(--dim); }

/* A phone: each result a card that reads like a quote screen. The company and its filing time, the verdict under
   the time; then one small table of figures — a name on the left, the amount on the right, its growth on the year in
   a column beside it, so every growth figure in the card sits in one column. EBITDA and revenue on the lead band,
   larger; margin, net profit and EPS under them, a step down. Every line is drawn from the first paint (a blank growth
   is a blank column, not a blank line), so nothing moves when the figures land. The price and the three actions close
   the card. */
@media (max-width: 720px) {
  /* The three buttons span the two right-hand tracks, so they never set the width the company's name is left with. */
  table.rs tbody tr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "co co t" "co co v" "fx fx fx" "px a a"; gap: 4px 12px; padding: 12px 14px; }
  /* the verdict's line is held from the first paint, so the card does not grow when the verdict follows the figures */
  table.rs td.rs-vd { grid-area: v; justify-self: end; align-self: start; min-height: 22px; }
  table.rs td.rs-vd .rq-word { font-size: 11.5px; line-height: 18px; padding: 2px 8px; }
  table.rs td.rs-fxd { margin: 6px 0 2px; }
  /* the price, its change and (for a BSE-only company) its date wrap as pieces beside the three buttons */
  table.rs td.rs-px { align-self: center; text-align: left; white-space: normal; display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 8px; row-gap: 2px; min-width: 0; }
  table.rs td.rs-px:empty::after { content: none; }
  table.rs td.rs-px .px-ltp, table.rs td.rs-px .px-chg, table.rs td.rs-px .px-asof { display: inline; margin: 0; white-space: nowrap; }
  table.rs td.rs-a { justify-self: end; }
  .rs-fx { --rk: 70px; --rg: 60px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rs-c, .rs-c.rs-e, .rs-c.rs-r { grid-template-columns: var(--rk) minmax(0, 1fr) var(--rg); grid-template-areas: "k v g";
    column-gap: 8px; row-gap: 0; align-items: baseline; padding: 3px 10px; border-radius: 0; }
  .rs-c::before { grid-area: k; line-height: 1.2; white-space: nowrap; }
  .rs-c > .rs-v { grid-area: v; text-align: right; overflow: visible; }
  .rs-c > .rs-g { grid-area: g; text-align: left; overflow: visible; }
  .rs-c .rs-g:is(.up, .down, .flat)::after { content: none; }
  .rs-c.rs-e { border-radius: 10px 10px 0 0; padding-top: 8px; }
  .rs-c.rs-r { border-radius: 0 0 10px 10px; padding-bottom: 8px; }
  .rs-c.rs-m, .rs-c.rs-p { padding: 3px 10px; }
  .rs-c.rs-m { padding-top: 8px; }
  /* fixed line heights: a row is as tall with its skeleton as with its figure */
  .rs-v, .rs-v:not(.rs-lead) { font-size: 14.5px; line-height: 20px; }
  .rs-v.rs-lead { font-size: 18px; line-height: 24px; }
  /* a "—" for a figure the filing does not give is smaller than the figure: it keeps the row's height all the same */
  .rs-c > .rs-v { height: 20px; } .rs-c > .rs-v.rs-lead { height: 24px; }
  .rs-e .rs-g, .rs-r .rs-g { font-size: 14.5px; font-weight: 800; }
  .rs-m .rs-g, .rs-p .rs-g { font-size: 12.5px; font-weight: 700; }
  .rs-sub { grid-column: 1 / -1; display: grid; grid-template-columns: var(--rk) minmax(0, 1fr) var(--rg); column-gap: 8px; align-items: baseline;
    margin-top: 5px; height: 18px; text-align: left; font-size: 13.5px; line-height: 18px; }
  .rs-sub i { font-size: 10.5px; font-weight: 650; letter-spacing: .06em; line-height: 1.2; color: var(--label); }
  .rs-sub b { margin: 0; text-align: right; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
  table.rs td.rs-fxd .rf-card { margin: 6px 0 0; }
}
/* a 320 px phone: narrower name and growth columns and a step smaller figures, so a lakh-crore amount ("₹2,35,481",
   "−₹1,23,456") keeps clear of its growth */
@media (max-width: 350px) {
  .rs-fx { --rk: 60px; --rg: 54px; }
  .rs-c, .rs-c.rs-e, .rs-c.rs-r, .rs-c.rs-m, .rs-c.rs-p { column-gap: 6px; padding-left: 8px; padding-right: 8px; }
  .rs-v.rs-lead { font-size: 16px; }
  .rs-v, .rs-v:not(.rs-lead) { font-size: 13.5px; }
  .rs-e .rs-g, .rs-r .rs-g { font-size: 13px; }
  .rs-sub { grid-template-columns: var(--rk) minmax(0, 1fr) var(--rg); column-gap: 6px; }
}

/* ================================================= A release's line, final: named first, facts whole */
/* "PRESS RELEASE" (or "ORDER WIN") leads, in the brand's bronze on a faint bronze wash — the one place the tape uses the
   brand for data — so the line is recognised at a glance and never mistaken for the result's figures (the blue band).
   Then the facts, each one whole — small-capital name, bold figure, quiet date or basis — wrapping as units, so a
   figure is never cut and a single fact never floats in the middle of an empty bar. */
.pf { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; row-gap: 3px; text-align: left;
  margin: 6px 0 2px; padding: 6px 10px 6px 8px; border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface-2)); font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--muted); }
.pf-tag { flex: none; align-self: center; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1;
  padding: 4px 6px; border-radius: 5px; color: var(--brand); background: var(--brand-dim); margin-right: -6px; }
/* Light theme: the 10px tags and the BSE chip a step darker than the brand, for 4.5:1 on their fills. */
:root[data-theme="light"] :is(.pf-tag, .ann-sym.bse) { color: #8a5d18; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) :is(.pf-tag, .ann-sym.bse) { color: #8a5d18; } }
.pf-l { min-width: 0; white-space: normal; overflow: visible; }
.pf-l b, .pf-l i, .pf-k, .pf-mv, .pf-gi, .pf-chg { white-space: nowrap; }
.pf-k { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label); }
.pf-l b { color: var(--text); font-weight: 700; }
.pf-l i { font-style: normal; color: var(--dim); }
.pf-mv { font-weight: 750; } .pf-mv.up { color: var(--good); } .pf-mv.down { color: var(--bad); } .pf-mv.flat { color: var(--muted); }
/* the caret sits outside the wrapping facts, in a column of its own, so it never takes a line to itself */
.pf[data-pf-tap] { position: relative; padding-right: 26px; }
.pf[data-pf-tap]::after { content: "▾"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--dim); }
/* an order intimation: the tag already says "order win", so a plain "Order" name is not repeated */
.pf-only-win .pf-k-plain { display: none; }
.pf-slot.open .pf[data-pf-tap]::after { content: "▴"; }
.pf[data-pf-tap]:hover { background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); }
/* the Results desk: under the four figure columns, inside the result's own row */
table.rs td.rs-fxd .pf-slot { padding: 0 8px 8px; }
table.rs td.rs-fxd .pf { margin: 6px 0 0; }
table.rs td.rs-fxd .pf-card { margin: 4px 0 0; }
@media (max-width: 960px) { .pf-l:empty { display: none; } }
@media (max-width: 720px) {
  .pf { column-gap: 14px; padding: 7px 9px 7px 8px; font-size: 12.5px; }
  table.rs td.rs-fxd .pf-slot { padding: 0; }
}

/* ================================================= EBITDA as the filing prints it: this quarter · last quarter · a year ago
   The filing sets its quarters side by side; so does every EBITDA lane (Results desk, its phone card, the tape, the
   company page). This quarter's column is highlighted, a deeper blue inside the lead band, with the unit under its
   figure marked like a highlighter pen ("₹ Cr"). Last quarter and a year ago follow, each with its move under it
   ("▼15.0% QoQ", "n.m." off a zero or negative quarter, blank when there is none). Every line (the quarters' names,
   the figures, the line under them) is drawn from the first paint, so a lane never changes height when figures land. */
.tri-k { grid-area: k; } .tri-h0 { grid-area: h0; } .tri-h1 { grid-area: h1; } .tri-h2 { grid-area: h2; }
.tri-v0 { grid-area: v0; } .tri-v1 { grid-area: v1; } .tri-v2 { grid-area: v2; }
.tri-u { grid-area: u; } .tri-g1 { grid-area: g1; } .tri-g2 { grid-area: g2; }
.rf-tri > * { min-width: 0; white-space: nowrap; }
.tri-box { display: none; }
.tri-k, .tri-kk { font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tri-kk { margin-right: 6px; }
.tri-h { font-size: 10.5px; font-weight: 650; letter-spacing: .04em; color: var(--label); }
.tri-h0 { color: var(--text); }
.tri-a { font-weight: 600; color: var(--text); }
.tri-a.neg { color: var(--bad); }
.tri-v0 .tri-a { font-weight: 800; letter-spacing: -.01em; }
.tri-v .rf-sk { width: 3.6em; max-width: 100%; }
.tri-v0 .rf-sk { width: 4.6em; }
.tri-lend { color: var(--muted); font-weight: 700; }
.tri-mv { font-weight: 750; }
.tri-mv.up { color: var(--good); } .tri-mv.down { color: var(--bad); } .tri-mv.flat { color: var(--muted); }
.tri-mv.nm { color: var(--dim); font-weight: 500; cursor: help; }
.tri-w { font-style: normal; font-size: 10.5px; font-weight: 650; letter-spacing: .02em; color: var(--label); }
/* the unit, marked: the one place a lane says outright that its figures are ₹ crore */
.tri-cr { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--unit-bg); color: var(--unit-fg);
  font-size: 10.5px; font-weight: 800; font-style: normal; letter-spacing: .02em; line-height: 16px; white-space: nowrap; }
.rq-h .tri-cr { vertical-align: 1px; margin-left: 2px; }
.rf-tri.tri-s-lender .tri-box { visibility: hidden; }
/* a lender: the lane keeps its lines; beside "Lender", where the other quarters would be, why there are none */
.rf-tri > .tri-why { grid-area: v1-start / v1-start / g2-end / v2-end; align-self: center; text-align: left !important; font-size: 12px; line-height: 15px;
  font-style: italic; color: var(--dim); white-space: normal; overflow-wrap: anywhere; }

/* ---- the Results desk (a table from 721 px): every figure is its amount over its move, so EBITDA's three columns
   read as three more figures in the row; the heading names them once ("This qtr · Last qtr · Year ago"). */
table.rs {
  --t0: 78px; --t1: 64px; --t2: 64px; --tg: 10px; --tp: 9px;
  --w-e: calc(2 * var(--tp) + var(--t0) + var(--t1) + var(--t2) + 2 * var(--tg));
  --w-r: 100px; --w-m: 76px; --w-p: 110px;
  --tri-cut: calc(var(--tp) + var(--t0) + var(--tg) / 2);
}
@media (max-width: 1179px) {
  /* the company column keeps its room (a BSE-only ticker and its tag), and the price its 100 px ("₹45,012.35") */
  table.rs { --t0: 66px; --t1: 55px; --t2: 55px; --tg: 6px; --tp: 6px; --w-r: 92px; --w-m: 66px; --w-p: 106px; }
  table.rs th:nth-child(7) { width: 76px; }
}
@media (min-width: 721px) and (max-width: 1009px) { table.rs { min-width: 942px; } }
@media (min-width: 721px) {
  table.rs th.rs-h, .rs-c, .rs-c.rs-m, .rs-c.rs-p { padding-left: 8px; padding-right: 8px; }
  .rs-hk, .rs-hu { text-align: right; } .rs-hu { display: block; } .rs-hu i + i::before { content: " · "; }
  .rs-c, .rs-c.rs-e, .rs-c.rs-r, .rs-c.rs-m { grid-template-columns: minmax(0, 1fr); row-gap: 0; column-gap: 0; }
  .rs-v, .rs-v.rs-lead { line-height: 22px; }
  .rs-g, .rs-e .rs-g, .rs-r .rs-g { text-align: right; line-height: 20px; }
  /* every line a fixed height: a dash or a skeleton in place of a figure never makes the row taller */
  .rs-c > .rs-v { height: 22px; } .rs-c > .rs-g { height: 20px; }
  .rs-v > .rf-na, .rs-v > .rf-chk { line-height: 1; }
  .rs-r .rs-g { font-size: 13.5px; }
  .rs-sub { line-height: 17px; margin-top: 1px; }
  table.rs th.rs-htri { padding: 9px var(--tp) 8px; }
  .rs-c.rs-e.rf-tri { background: linear-gradient(to right, var(--lead-hl) 0 var(--tri-cut), var(--rs-band) var(--tri-cut)); }
  /* the heading: "EBITDA" across its three columns, as a filing groups its quarters; this quarter's column starts under it */
  table.rs th.rs-htri { background: linear-gradient(to right, var(--lead-hl) 0 var(--tri-cut), transparent var(--tri-cut)) left bottom / 100% 28px no-repeat, var(--rs-band); }
  .rs-htri .rs-hk { text-align: center; }
  table.rs th.rs-htri .rs-hu.rs-hu3 { display: grid; grid-template-columns: var(--t0) var(--t1) var(--t2); column-gap: var(--tg); color: var(--muted); }
  table.rs th.rs-htri .rs-hu3 i { text-align: right; } table.rs th.rs-htri .rs-hu3 i + i::before { content: none; }
  table.rs th.rs-htri .rs-hu3 i:first-child { color: var(--text); }
  /* fixed tracks: a figure, a skeleton or a dash, whatever its size, never makes a line taller */
  .rs-c.rs-e.rf-tri { grid-template-columns: var(--t0) var(--t1) var(--t2); grid-template-rows: 22px 20px; grid-template-areas: "v0 v1 v2" "u g1 g2";
    column-gap: var(--tg); row-gap: 0; align-items: baseline; align-content: start; padding: 9px var(--tp); }
  .rs-c.rf-tri > .tri-k, .rs-c.rf-tri > .tri-h, .rs-c.rf-tri .tri-w { display: none; }
  .rs-c.rf-tri > .tri-v, .rs-c.rf-tri > .tri-u, .rs-c.rf-tri > .tri-g { text-align: right; }
  .rs-c.rf-tri > .tri-v { line-height: 22px; }
  .rs-c.rf-tri > .tri-u, .rs-c.rf-tri > .tri-g { line-height: 20px; }
  .rs-c.rf-tri .tri-v0 .tri-a { font-size: 16px; }
  .rs-c.rf-tri .tri-v1 .tri-a, .rs-c.rf-tri .tri-v2 .tri-a { font-size: 13.5px; }
  .rs-c.rf-tri .tri-g { font-size: 13px; }
  .rs-c.rf-tri .tri-v .rf-na, .rs-c.rf-tri .tri-v .rf-chk { font-size: 13px; font-weight: 500; }
  .rs-c.rf-tri .tri-lend { font-size: 13px; }
  .rs-c.rf-tri.tri-long .tri-v0 .tri-a { font-size: 14px; } .rs-c.rf-tri.tri-long .tri-v1 .tri-a, .rs-c.rf-tri.tri-long .tri-v2 .tri-a { font-size: 12px; }
  .rs-fx[data-rf-tap]:hover .rs-c.rs-e.rf-tri { background: linear-gradient(to right, color-mix(in srgb, var(--accent) 8%, var(--lead-hl)) 0 var(--tri-cut), color-mix(in srgb, var(--accent) 9%, var(--lead-band)) var(--tri-cut)); }
}
/* The full desk: every row two lines. Net profit keeps its growth beside it, with EPS under (as before), since EPS
   needs the second line; EBITDA, revenue and margin carry their move under the figure. */
@media (min-width: 1180px) {
  table.rs { --w-p: 144px; --w-g2: 50px; }
  .rs-c.rs-p { grid-template-columns: minmax(0, 1fr) var(--w-g2); column-gap: 6px; }
  .rs-c.rs-p > .rs-g { text-align: left; }
  .rs-c.rs-p > .rs-v { line-height: 22px; } .rs-c.rs-p > .rs-g { line-height: 22px; height: 22px; }
  table.rs th.rs-hp .rs-hu { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-g2); column-gap: 6px; }
  table.rs th.rs-hp .rs-hu i + i { text-align: left; } table.rs th.rs-hp .rs-hu i + i::before { content: none; }
}
@media (min-width: 721px) and (max-width: 1179px) {
  .rs-c.rf-tri .tri-v0 .tri-a { font-size: 15px; }
  .rs-c.rf-tri .tri-v1 .tri-a, .rs-c.rf-tri .tri-v2 .tri-a { font-size: 12.5px; }
  .rs-c.rf-tri .tri-g { font-size: 12px; }
  .rs-c.rf-tri.tri-long .tri-v0 .tri-a { font-size: 13px; }
  .rs-c.rf-tri.tri-long .tri-v1 .tri-a, .rs-c.rf-tri.tri-long .tri-v2 .tri-a { font-size: 11px; letter-spacing: -.01em; }
}

/* ---- the Results desk on a phone: the EBITDA band becomes a small statement. Its name, then three columns, each
   named by its quarter, this quarter's in a deeper box with "₹ Cr" under its figure; revenue under it on the band. */
@media (max-width: 720px) {
  .rs-fx { --rg: 62px; }
  .rs-c.rs-e.rf-tri { --tgap: 10px; --tpl: 10px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 20px 17px 26px 20px;
    grid-template-areas: "k k k" "h0 h1 h2" "v0 v1 v2" "u g1 g2"; column-gap: var(--tgap); row-gap: 0; align-items: baseline;
    padding: 8px 10px 9px var(--tpl); border-radius: 10px 10px 0 0; }
  .rs-c.rs-e.rf-tri::before { content: none; }
  .rs-c.rf-tri .tri-kk { display: none; }
  .rs-c.rf-tri .tri-k { display: block; align-self: start; line-height: 16px; }
  .rs-c.rf-tri .tri-box { display: block; grid-area: 2 / 1 / 5 / 2; align-self: stretch; border-radius: 8px; background: var(--lead-hl);
    margin: -4px calc(var(--tgap) / -2 + 1px) -3px calc(4px - var(--tpl)); }
  .rs-c.rf-tri .tri-h { line-height: 17px; }
  .rs-c.rf-tri .tri-v { line-height: 26px; }
  .rs-c.rf-tri .tri-v0 .tri-a { font-size: 19px; }
  .rs-c.rf-tri .tri-v1 .tri-a, .rs-c.rf-tri .tri-v2 .tri-a { font-size: 15px; }
  .rs-c.rf-tri .tri-g, .rs-c.rf-tri .tri-u { line-height: 20px; }
  .rs-c.rf-tri .tri-g { font-size: 12.5px; } .rs-c.rf-tri .tri-w { font-size: 10px; }
  .rs-c.rf-tri .tri-v .rf-na, .rs-c.rf-tri .tri-v .rf-chk, .rs-c.rf-tri .tri-lend { font-size: 14px; font-weight: 500; }
  .rs-c.rf-tri .tri-lend { font-weight: 700; }
  .rs-c.rf-tri.tri-long .tri-v0 .tri-a { font-size: 16px; } .rs-c.rf-tri.tri-long .tri-v1 .tri-a, .rs-c.rf-tri.tri-long .tri-v2 .tri-a { font-size: 13px; }
  .rs-c.rs-r { border-top: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); padding-top: 6px; }
}
@media (min-width: 381px) and (max-width: 720px) {
  .rs-c.rs-e.rf-tri { grid-template-rows: 17px 26px 20px; grid-template-areas: "h0 h1 h2" "v0 v1 v2" "u g1 g2"; padding-top: 10px; }
  .rs-c.rf-tri .tri-k { display: none; }
  .rs-c.rf-tri .tri-kk { display: inline; margin-right: 5px; color: var(--text); }
  .rs-c.rf-tri .tri-box { grid-area: 1 / 1 / 4 / 2; }
}
@media (max-width: 380px) {
  .rs-c.rs-e.rf-tri { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
  .rs-c.rf-tri .tri-v0 .tri-a { font-size: 17px; }
  .rs-c.rf-tri .tri-v1 .tri-a, .rs-c.rf-tri .tri-v2 .tri-a { font-size: 14px; }
  .rs-c.rf-tri .tri-g { font-size: 11.5px; } .rs-c.rf-tri .tri-w { font-size: 9.5px; }
  .rs-c.rf-tri.tri-long .tri-v0 .tri-a { font-size: 14.5px; } .rs-c.rf-tri.tri-long .tri-v1 .tri-a, .rs-c.rf-tri.tri-long .tri-v2 .tri-a { font-size: 12.5px; }
}
/* a 320 px phone: a move keeps its arrow and figure; its column's quarter says what it is against */
@media (max-width: 350px) {
  .rs-fx { --rg: 56px; }
  .rs-c.rs-e.rf-tri { --tgap: 8px; --tpl: 8px; padding-right: 8px; }
  .rs-c.rf-tri .tri-g { font-size: 12px; }
  .rs-c.rf-tri .tri-v0 .tri-a { font-size: 16px; }
  .rs-c.rf-tri .tri-v1 .tri-a, .rs-c.rf-tri .tri-v2 .tri-a { font-size: 13.5px; }
  .rs-c.rf-tri .tri-w { display: none; }
  .rs-c.rf-tri .tri-h, .rs-c.rf-tri .tri-k { letter-spacing: .02em; }
  .rs-c.rf-tri.tri-long .tri-v0 .tri-a { font-size: 13.5px; } .rs-c.rf-tri.tri-long .tri-v1 .tri-a, .rs-c.rf-tri.tri-long .tri-v2 .tri-a { font-size: 12px; }
}

/* ---- the tape and the company page: every lane a name, a figure and its move, one under the other; EBITDA's three
   columns lead on the band, its name ahead of this quarter's ("EBITDA Q1 FY27"), revenue beside it. */
.rf { grid-template-columns: minmax(0, 25rem) minmax(0, 12.5rem) minmax(0, 10rem) minmax(0, 1fr); }
.rf-l { padding: 7px 12px 6px; }
.rf-l:is(.rf-r, .rf-m, .rf-p) { display: grid; grid-template-rows: 16px 22px 18px; align-content: start; justify-items: start; }
.rf-l:is(.rf-r, .rf-m, .rf-p) > * { max-width: 100%; margin: 0; }
.rf-l > .rf-k { display: block; line-height: 16px; margin: 0; overflow: hidden; text-overflow: ellipsis; }
.rf-l:is(.rf-r, .rf-m, .rf-p) > .rf-v { line-height: 22px; font-size: 14px; }
.rf-l.rf-r > .rf-v { font-size: 15px; }
.rf-l:is(.rf-r, .rf-m, .rf-p) > .rf-mv { line-height: 18px; font-size: 12.5px; margin-left: 0; }
.rf-l:is(.rf-r, .rf-m, .rf-p) > .rf-sk { align-self: center; }
.rf-l:is(.rf-r, .rf-m, .rf-p) > .rf-na { line-height: 22px; }
.rf-e.rf-r { border-left: 0; }
.rf-l.rf-r { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 18%, transparent); }
.rf-l.rf-tri { --tgap: 16px; --tpl: 12px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 16px 22px 18px;
  grid-template-areas: "h0 h1 h2" "v0 v1 v2" "u g1 g2"; column-gap: var(--tgap); padding-left: var(--tpl); align-items: baseline; overflow: visible; }
.rf-tri .tri-k { display: none; }
.rf-l.rf-tri .tri-box { display: block; grid-area: 1 / 1 / 4 / 2; align-self: stretch; border-radius: 7px; background: var(--lead-hl);
  margin: -4px calc(var(--tgap) / -2 + 1px) -3px calc(5px - var(--tpl)); }
.rf-l.rf-tri .tri-h { line-height: 16px; }
.rf-l.rf-tri .tri-v { line-height: 22px; }
.rf-l.rf-tri .tri-u, .rf-l.rf-tri .tri-g { line-height: 18px; }
.rf-l.rf-tri .tri-v0 .tri-a { font-size: 15.5px; }
.rf-l.rf-tri .tri-v1 .tri-a, .rf-l.rf-tri .tri-v2 .tri-a { font-size: 13.5px; }
.rf-l.rf-tri .tri-g { font-size: 12.5px; }
.rf-l.rf-tri .tri-v .rf-na, .rf-l.rf-tri .tri-v .rf-chk, .rf-l.rf-tri .tri-lend { font-size: 13px; }
.rf-l.rf-tri.tri-long .tri-v0 .tri-a { font-size: 14px; } .rf-l.rf-tri.tri-long .tri-v1 .tri-a, .rf-l.rf-tri.tri-long .tri-v2 .tri-a { font-size: 12.5px; }
.rf[data-rf-tap]:hover .rf-l.rf-tri .tri-box { background: color-mix(in srgb, var(--accent) 8%, var(--lead-hl)); }
.rf-ptr > .rf-l.rf-tri { visibility: hidden; }
/* an older quarter's tag, top right: clear of the lanes' names */
.rf.rf-tagged > .rf-t { padding-top: 5px; line-height: 16px; }
@media (max-width: 1120px) {
  .rf { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); }
  .rf.rf-tagged { grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); }
  .rf-l.rf-t { padding: 6px 12px 0; }
}
/* a tablet: EBITDA's three columns across the line, the other three lanes under them */
@media (max-width: 900px) {
  .rf, .rf.rf-tagged { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, 1.18fr); grid-template-areas: "e e e" "r m p"; }
  .rf.rf-tagged { grid-template-areas: "t t t" "e e e" "r m p"; }
  /* the three columns sit over the three lanes under them (same shares, a gap of two lane paddings), so the line reads as one grid */
  .rf-l.rf-tri { --tgap: 24px; --tpl: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, 1.18fr); padding-right: 12px; }
  .rf-l.rf-r { box-shadow: none; }
  .rf-l:is(.rf-r, .rf-m, .rf-p) { padding-top: 6px; }
}
/* a phone: EBITDA's name on a line of its own, then the three columns, as on the Results card */
@media (max-width: 720px) {
  .rf-l.rf-tri { --tgap: 12px; --tpl: 10px; grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr) minmax(0, 1fr); padding: 8px 10px 6px var(--tpl); }
  .rf-l.rf-tri .tri-kk { margin-right: 5px; }
  .rf-l.rf-tri .tri-v { line-height: 22px; }
  .rf-l.rf-tri .tri-v0 .tri-a { font-size: 16.5px; }
  .rf-l.rf-tri .tri-v1 .tri-a, .rf-l.rf-tri .tri-v2 .tri-a { font-size: 13.5px; }
  .rf-l.rf-tri .tri-g { font-size: 12px; }
  /* revenue, margin and profit three abreast, profit's lane the widest so "Profit to owners" is never cut; their
     growth is on the year, as everywhere on a phone, so it goes without its "YoY" */
  .rf, .rf.rf-tagged { grid-template-columns: minmax(0, 1fr) minmax(0, .74fr) minmax(0, 1.46fr); }
  .rf-l:is(.rf-r, .rf-m, .rf-p) { padding: 6px 4px 5px 10px; }
  .rf-l:is(.rf-r, .rf-m, .rf-p) > .rf-v, .rf-l.rf-r > .rf-v { font-size: 13.5px; }
  .rf-l:is(.rf-r, .rf-m, .rf-p) > .rf-mv { font-size: 12px; }
  /* revenue and profit say "YoY" beside EBITDA's QoQ; margin's move is in points, too narrow a lane for the word */
  .rf-l.rf-m .tri-w { display: none; }
}
@media (max-width: 380px) {
  .rf-l.rf-tri { --tgap: 10px; --tpl: 8px; padding-right: 8px; }
  .rf-l.rf-tri .tri-h, .rf-l.rf-tri .tri-kk { letter-spacing: .02em; }
  .rf-l.rf-tri .tri-v0 .tri-a { font-size: 15px; }
  .rf-l.rf-tri .tri-v1 .tri-a, .rf-l.rf-tri .tri-v2 .tri-a { font-size: 12.5px; }
  .rf-l.rf-tri .tri-g { font-size: 11.5px; } .rf-l.rf-tri .tri-w { font-size: 9.5px; }
  .rf-l:is(.rf-r, .rf-m, .rf-p) { padding-left: 8px; }
  .rf-l > .rf-k { font-size: 10px; letter-spacing: .02em; }
}
/* A lakh-crore revenue ("₹2,40,000") keeps its unit in the phone's revenue lane: the lane stays as it is, the
   figure is set a size smaller. */
@media (max-width: 420px) { .rf-l.rf-r > .rf-v.rf-wide { font-size: 12px; letter-spacing: -.02em; } }
@media (max-width: 350px) {
  .rf, .rf.rf-tagged { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1.4fr); }
  .rf-l.rf-r > .rf-v.rf-wide { font-size: 11px; }
  /* revenue's move goes without its "YoY" here, as EBITDA's do: the lane is too narrow for the word */
  .rf-l.rf-r .tri-w { display: none; }
  .rf-l:is(.rf-r, .rf-m, .rf-p) { padding-left: 6px; }
  .rf-l > .rf-k { font-size: 9.5px; letter-spacing: 0; }
  .rf-l:is(.rf-r, .rf-m, .rf-p) > .rf-v, .rf-l.rf-r > .rf-v { font-size: 12.5px; }
  .rf-l:is(.rf-r, .rf-m, .rf-p) > .rf-mv { font-size: 11.5px; }
  .rf-l.rf-tri .tri-w { display: none; }
  .rf-l.rf-tri { grid-template-rows: 20px 16px 22px 18px; grid-template-areas: "k k k" "h0 h1 h2" "v0 v1 v2" "u g1 g2"; }
  .rf-l.rf-tri .tri-k { display: block; line-height: 14px; align-self: start; }
  .rf-l.rf-tri .tri-kk { display: none; }
  .rf-l.rf-tri .tri-box { grid-area: 2 / 1 / 5 / 2; }
}
.rq-unit { white-space: nowrap; }

/* ================================================= EBITDA and revenue: two blocks, a gutter between them
   On one band, a year-ago EBITDA ran straight into revenue and the eye read them as one run of figures. Now each is
   a block of its own on every surface: EBITDA first, the larger and highlighted one (its three quarters, this
   quarter's column the deeper blue with "₹ Cr" under its figure); then a gutter where the page shows through; then
   revenue, a quieter blue held by a crisp edge, under its own heading. Only colour, corners and the gutter change:
   every lane keeps its lines, so nothing moves when the figures land. */

/* ---- the Results desk: a column gap between the EBITDA group and Revenue, each lane under a rounded heading of its
   own. The gutter is added to the revenue column (the company column gives the room), so no figure lane narrows. */
@media (min-width: 721px) {
  table.rs { --gut: 12px; --cap: 7px; }
  table.rs th:nth-child(4) { width: calc(var(--w-r) + var(--gut)); }
  .rs-fx { grid-template-columns: var(--w-e) calc(var(--w-r) + var(--gut)) var(--w-m) var(--w-p); }
  /* the headings: the header row stays one surface; each lane's cap stands in it, rounded at the top */
  table.rs th.rs-he, table.rs th.rs-hr { background: var(--surface-2); }
  table.rs th.rs-hr { padding-left: calc(8px + var(--gut)); }
  table.rs th.rs-he::before, table.rs th.rs-hr::before { content: ""; position: absolute; top: var(--cap); right: 0; bottom: 0; left: 0; z-index: -1;
    border-radius: 10px 10px 0 0; pointer-events: none; }
  table.rs th.rs-htri::before { background: linear-gradient(to right, var(--lead-hl) 0 var(--tri-cut), transparent var(--tri-cut)) left bottom / 100% 28px no-repeat, var(--rs-band); }
  table.rs th.rs-hr::before { left: var(--gut); background: var(--rev-band); box-shadow: inset 1px 0 0 var(--rev-edge), inset -1px 0 0 var(--rev-edge), inset 0 1px 0 var(--rev-edge); }
  table.rs th.rs-hr .rs-hu { color: var(--label); }
  /* revenue's lane: its own surface, a gutter clear of EBITDA's year-ago column. The last shadow paints the gutter in the
     card's own surface, so it stays clear when the row under the pointer lights up (a shadow, not a pseudo-element: no
     extra box to lay out when a row's figures are redrawn) */
  .rs-c.rs-r { margin-left: var(--gut); background: var(--rev-band);
    box-shadow: inset 1px 0 0 var(--rev-edge), inset -1px 0 0 var(--rev-edge), calc(-1 * var(--gut)) 0 0 0 var(--surface); }
  .rs-fx[data-rf-tap]:hover .rs-c.rs-r { background: color-mix(in srgb, var(--accent) 6%, var(--rev-band)); }
  /* a row still waiting: the faint wash on margin and profit only, so the gutter stays the page */
  .rs-fx.rf-wait { background: none; }
  .rs-fx.rf-wait > .rs-c:is(.rs-m, .rs-p) { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
  /* a note or a "Show figures" row: the two lanes and the gutter drawn behind it all the same */
  .rs-fx.rs-note, .rs-fx.rs-ask { --x1: var(--w-e); --x2: calc(var(--w-e) + var(--gut)); --x3: calc(var(--w-e) + var(--gut) + var(--w-r));
    background: linear-gradient(to right, var(--rs-band) 0 var(--x1), var(--surface) 0 var(--x2), var(--rev-edge) 0 calc(var(--x2) + 1px),
      var(--rev-band) 0 calc(var(--x3) - 1px), var(--rev-edge) 0 var(--x3), transparent 0); }
  .rs-fx.rs-note .rs-over { right: auto; max-width: calc(var(--w-e) - 20px); }
  /* a lane's ends at a release stay square: rounding them needs :has(), which made every price tick restyle the rows */
}
@media (min-width: 721px) and (max-width: 1179px) {
  table.rs { --gut: 10px; }
}
/* a tablet: the table exactly as wide as its columns (58 + 140 + 200 + 102 + 66 + 106 + 76 + 100 + 96), so the headings'
   caps stand exactly over their lanes */
@media (min-width: 721px) and (max-width: 1009px) { table.rs { min-width: 944px; } }

/* ---- the Results card on a phone: EBITDA's block, a gutter, then revenue's own block, each rounded all round */
@media (max-width: 720px) {
  .rs-c.rs-e.rf-tri { border-radius: 12px; margin-bottom: 6px; padding-bottom: 7px; }
  .rs-c.rs-r { border-top: 0; border-radius: 10px; padding-top: 7px; padding-bottom: 7px;
    background: var(--rev-band); box-shadow: inset 0 0 0 1px var(--rev-edge); }
  .rs-fx[data-rf-tap]:hover .rs-c.rs-r { background: color-mix(in srgb, var(--accent) 6%, var(--rev-band)); }
  /* the two headings alike: EBITDA's and revenue's names in the text colour, margin and profit's a step quieter */
  .rs-c.rs-r::before, .rs-c.rf-tri .tri-k { color: var(--text); }
}

/* ---- the tape and the company page: the line's lanes as blocks. EBITDA, a gutter, revenue, a gutter, then margin
   and profit together on the plain surface. */
.rf { --rgut: 10px; }
.rf:not(.rf-ptr), .rf.rf-wait, .rf[data-rf-tap]:hover { background: none; }
.rf-l.rf-e { border-radius: 9px; margin-right: var(--rgut); }
.rf-l.rf-r { border-radius: 9px; margin-right: var(--rgut); background: var(--rev-band); box-shadow: inset 0 0 0 1px var(--rev-edge); }
.rf-l.rf-m { border-radius: 9px 0 0 9px; background: var(--surface-2); }
.rf-l.rf-p { border-radius: 0 9px 9px 0; background: var(--surface-2); }
.rf[data-rf-tap]:hover .rf-l.rf-r { background: color-mix(in srgb, var(--accent) 6%, var(--rev-band)); }
.rf[data-rf-tap]:hover .rf-l:is(.rf-m, .rf-p) { background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
/* EBITDA across the line, the other lanes under it: the gutter runs between the rows too */
@media (max-width: 900px) {
  .rf-l.rf-e { margin-right: 0; }
  .rf-l:is(.rf-r, .rf-m, .rf-p) { margin-top: var(--rgut); padding-top: 4px; }
  .rf-l.rf-tri { padding-bottom: 4px; }
}
/* an older quarter's caption sits on its blocks, not afloat over them */
@media (max-width: 1120px) { .rf.rf-tagged > .rf-l.rf-t { padding: 1px 12px 4px; } }
@media (max-width: 720px) {
  .rf { --rgut: 8px; }
}
/* a narrow phone: revenue's lane a little wider (profit's gives the room it does not use), so a lakh-crore revenue and
   its move keep clear of the gutter */
@media (max-width: 380px) {
  .rf, .rf.rf-tagged { grid-template-columns: minmax(0, 1.1fr) minmax(0, .74fr) minmax(0, 1.36fr); }
}
@media (max-width: 350px) {
  .rf { --rgut: 6px; }
  .rf, .rf.rf-tagged { grid-template-columns: minmax(0, 1.02fr) minmax(0, .67fr) minmax(0, 1.3fr); }
}

/* ================================================= What changed (owner only, while it is tested)
   A line of facts under a result's figures, as chips: a small-capital name, the figure in bold, a move in its colour
   (a cost's move in plain ink: up is not good news for a cost), a comparison quiet. Its height is fixed from the
   first paint (a blank line of the same height holds it until the desk says the owner is signed in), so nothing
   moves when the chips land: one line on a desk, two on a phone. Chips wrap as units, most informative first; one
   that no longer fits stays out of sight rather than being cut. A flagged chip (a stated threshold crossed) carries a
   small mark in the warning colour; that is its only emphasis. */
.wc { --wc-h: 22px; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center;
  gap: 4px 6px; height: var(--wc-h); overflow: hidden; margin: 6px 0 2px; font-size: 12px; line-height: 20px; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: left; }
.wc-hold { visibility: hidden; }
.wc-h { flex: none; display: inline-flex; align-items: center; height: 22px; margin-right: 2px; white-space: nowrap; }
.wc-k { font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--label); }
.wc .ai-badge { font-size: 9px; line-height: 14px; padding: 1px 6px; margin-left: 6px; }
.wc-c { display: inline-block; max-width: 100%; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-ck { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); }
.wc-c b { color: var(--text); font-weight: 700; }
.wc-c i { font-style: normal; color: var(--dim); }
.wc-mv { font-weight: 750; } .wc-mv.up { color: var(--good); } .wc-mv.down { color: var(--bad); } .wc-mv.flat { color: var(--text); }
.wc-c i.wc-w { color: var(--label); font-size: 11px; font-weight: 600; }
.wc-flag { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--surface-2)); }
.wc-flag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--warn); vertical-align: 1px; }
.wc-sk { flex: none; display: inline-block; width: 168px; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 13%, transparent);
  animation: rfWait 1.3s ease-in-out infinite; }
.wc-sk + .wc-sk { width: 124px; }
.wc > .rf-na { line-height: 22px; }
@media (prefers-reduced-motion: reduce) { .wc-sk { animation: none; } }
/* the Results desk: under the four figure columns, running on under the verdict, the price and the actions (their
   cells hold one or two short lines at the top of the row), so a desk shows as many chips as the tape */
table.rs td.rs-fxd .wc { flex: none; --wc-over: 274px; width: calc(100% + var(--wc-over) - 8px); margin: 2px 0 9px 8px; }
@media (max-width: 1179px) { table.rs td.rs-fxd .wc { --wc-over: 262px; } }
/* a phone: the name and the Testing mark on a short line of their own, then two lines of chips, a touch smaller (a
   chip longer than the line ends in "…"; the card behind the figures, one tap, has every fact in full) */
@media (max-width: 720px) {
  .wc { --wc-h: 68px; font-size: 11.5px; }
  .wc-h { flex-basis: 100%; height: 16px; margin-right: 0; }   /* (its 2 px margin made the line 2 px wider than its box) */
  .wc-k { font-size: 10px; }
  table.rs td.rs-fxd .wc { width: auto; margin: 10px 0 0; }
  .wc-c { padding: 0 8px; }
  .wc-ck { font-size: 9.5px; letter-spacing: .03em; }
  .wc-sk { width: 58%; } .wc-sk + .wc-sk { width: 40%; }
}
/* ================================================= F&O ban runway and tradability flags (every signed-in account)
   NSE's evening figures: chips beside a symbol, a line on the company page and a
   stock's levels, a panel on the Trend tab. Every chip fits inside the line it
   sits on, so a row is the same height with or without them. */
.fno-c { display: inline-block; flex: none; font-size: 10.5px; font-weight: 700; line-height: 16px; letter-spacing: .02em; padding: 0 6px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent); white-space: nowrap; font-variant-numeric: tabular-nums; cursor: default; }
.fno-c.bad { color: var(--bad); background: var(--bad-dim); }
.fno-c.warn { color: var(--warn); background: var(--warn-dim); }
.fno-c.flat { color: var(--muted); background: var(--surface-2); }
.fno-slot { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.fno-more { flex: none; font-size: 10.5px; font-weight: 700; color: var(--dim); cursor: default; }
.fno-slot:empty { display: none; }
/* The tape: the company name gives up width to the chips, never height. */
.ann-corow { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 2px 0 4px; }
.ann-corow > .ann-co { margin: 0; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The Results desk: ahead of the company's name, on one clamped line on a laptop, so a row is the same height
   whether its chips are in yet or not. A phone's card gives the name its two lines, held from the first paint
   (chips or none), so nothing moves when the chips land. */
table.rs td.rs-co .hint.fno-1 { -webkit-line-clamp: 1; line-clamp: 1; overflow-wrap: normal; }
@media (max-width: 720px) { table.rs td.rs-co .hint.fno-1 { -webkit-line-clamp: 2; line-clamp: 2; min-height: calc(2em * 1.35); } }
table.rs td.rs-co .fno-slot.rs { display: inline; }
table.rs td.rs-co .fno-slot.rs .fno-c { font-size: 10px; line-height: 13px; padding: 0 5px; margin-right: 4px; vertical-align: 1px; }
table.rs td.rs-co .fno-slot.rs .fno-more { margin-right: 4px; font-size: 10px; }

/* One stock's line: the company page, and a stock's levels on the Trend tab. */
.fno-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-height: 62px; padding: 8px 14px 9px; margin: -4px 0 16px; font-size: 12.5px; box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--warn) 32%, var(--line)); border-radius: 12px; background: var(--surface); color: var(--muted); }
.fno-line.t { flex-basis: 100%; margin: 2px 0 4px; padding: 7px 12px 8px; background: transparent; }
.fno-top { display: flex; align-items: center; gap: 10px; min-height: 18px; }
.fno-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 22px; }
.fno-lbl { font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.fno-lbl .ai-badge { margin-left: 2px; }
.fno-f { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fno-m b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; } .fno-m b.warn { color: var(--warn); } .fno-m b.bad { color: var(--bad); }
.fno-k { font-size: 11.5px; color: var(--dim); }
.fno-d { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--muted); }
.fno-run { color: var(--text); }
.fno-cs { gap: 4px; flex-wrap: wrap; white-space: normal; }
.fno-none, .fno-wait { color: var(--dim); }
.fno-asof { margin-left: auto; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.fno-spark { display: block; flex: none; overflow: visible; }
.fno-spark rect { fill: color-mix(in srgb, var(--muted) 55%, transparent); } .fno-spark rect.w { fill: var(--warn); } .fno-spark rect.b { fill: var(--bad); }
.fno-spark line { stroke-width: 1; vector-effect: non-scaling-stroke; } .fno-spark .l95 { stroke: var(--bad); stroke-dasharray: 2 2; } .fno-spark .l80 { stroke: var(--line); }

/* The panel. */
.fno-panel { margin-top: 16px; }
.fno-panel .card-title { display: flex; align-items: center; gap: 6px; }
.fno-panel .table-scroll { max-height: none; }
.fno-sk { height: 120px; margin: 0 20px 18px; border-radius: 10px; background: var(--surface-2); }
/* Fixed lanes: every column keeps its width whatever the figures in it. */
table.fno-t { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; min-width: 740px; }
table.fno-t col.c-s { width: 15%; } table.fno-t col.c-st { width: 19%; } table.fno-t col.c-p { width: 12%; } table.fno-t col.c-tr { width: 22%; } table.fno-t col.c-to { width: 16%; }
table.fno-t td.fno-tr { overflow: hidden; text-overflow: ellipsis; }
/* One row height in every evening state: a room cell keeps its lots line (.fno-lots), and two ban chips fit the same two lines. */
table.fno-t td.fno-st { white-space: normal; line-height: 17px; }
table.fno-t td.fno-tr .fno-trw { display: flex; max-width: 100%; }
/* Oldest to newest as written; laid from the newest (placed first, at the right) back to the oldest, so
   the oldest wrap onto a hidden line first and the newest always shows. Screen readers keep the written order. */
table.fno-t td.fno-tr .fno-trail { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-end; column-gap: .3em; flex: 0 1 auto; min-width: 0; height: 17px; line-height: 17px; overflow: hidden; }
table.fno-t td.fno-tr .fno-trail > span { white-space: nowrap; }
table.fno-t td.fno-tr .fno-trail > span:nth-last-child(2) { order: 1; } table.fno-t td.fno-tr .fno-trail > span:nth-last-child(3) { order: 2; }
table.fno-t td.fno-tr .fno-trail > span:nth-last-child(4) { order: 3; } table.fno-t td.fno-tr .fno-trail > span:nth-last-child(n+5) { order: 4; }
table.fno-t td.fno-st .fno-c { vertical-align: top; line-height: 15px; }
@media (min-width: 721px) and (max-width: 900px) { table.fno-t thead th { white-space: normal; line-height: 14px; vertical-align: bottom; } }
table.fno-t td.fno-t95, table.fno-t td.fno-t80 { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.fno-pt, .fno-lots { display: block; line-height: 17px; } .fno-lots { color: var(--muted); font-size: 12px; min-height: 17px; }
/* The share and its "limit changed" line fit the two 17px lines every row has: the marker never changes a row's height. */
table.fno-t td.fno-p { line-height: 17px; } table.fno-t td.fno-p b { display: block; height: 17px; line-height: 17px; }
.fno-lim { display: block; font-size: 10.5px; color: var(--dim); line-height: 17px; height: 17px; }
.fno-near { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0 20px 12px; font-size: 12.5px; color: var(--muted); }
.fno-near b { color: var(--text); font-weight: 650; margin-right: 4px; } .fno-near .ann-sym { font-size: 12px; padding: 1px 6px; margin: 2px 2px; }
.fno-np { color: var(--dim); font-variant-numeric: tabular-nums; margin-left: 5px; }
.fno-to { display: none; }
.fno-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 20px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.fno-vote { font: inherit; font-size: 12.5px; font-weight: 650; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; }
.fno-vote.on { color: var(--good, var(--text)); border-color: currentColor; }
table.fno-t th { text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 8px 12px; white-space: nowrap; }
table.fno-t th.num, table.fno-t td.fno-p, table.fno-t td.fno-ch { text-align: right; }
table.fno-t td { padding: 9px 12px; border-top: 1px solid var(--line); border-bottom: 0; vertical-align: middle; white-space: nowrap; text-align: left; }
table.fno-t td.fno-p b { font-size: 14.5px; font-variant-numeric: tabular-nums; } table.fno-t td.fno-p b.warn { color: var(--warn); } table.fno-t td.fno-p b.bad { color: var(--bad); }
.fno-trw { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.fno-trail { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
table.fno-t td.fno-rw { color: var(--muted); font-size: 12.5px; }
.fno-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 20px 10px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.fno-foot b { color: var(--text); font-weight: 650; margin-right: 4px; }
.fno-foot .ann-sym { font-size: 12px; padding: 1px 6px; margin: 0 2px; }
/* The F&O ban tab's live card: six fixed lanes; every two-line cell keeps its second line (empty or not), so rows never change height. */
.fno-live .table-scroll { max-height: none; }
.fno-lv-note { padding: 0 20px 10px; font-size: 12.5px; color: var(--muted); }
table.fno-lv col.c-s { width: 14%; } table.fno-lv col.c-st { width: 17%; } table.fno-lv col.c-p { width: 11%; }
table.fno-lv col.c-e { width: 23%; } table.fno-lv col.c-oi { width: 20%; } table.fno-lv col.c-px { width: 15%; }
table.fno-lv .fno-k { display: none; }
table.fno-lv td.fno-oi, table.fno-lv td.fno-px { text-align: right; font-variant-numeric: tabular-nums; }
table.fno-lv td.fno-e, table.fno-lv td.fno-oi { overflow: hidden; text-overflow: ellipsis; }
table.fno-lv .fno-lv-v { display: block; height: 17px; line-height: 17px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
table.fno-lv .fno-lv-f { display: block; height: 15px; line-height: 15px; font-size: 11.5px; color: var(--muted); }
table.fno-lv td.fno-e .fno-lv-f { color: var(--warn); }
.fno-lv-t { color: var(--dim); font-size: 11px; margin-left: 4px; }
.fno-lv-tag-head { display: none !important; }
.fno-lv-tag { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 0 6px; line-height: 14px; vertical-align: 1px; }
@media (max-width: 720px) {
  .fno-line { padding: 8px 12px; } .fno-facts { gap: 4px 12px; min-width: 0; }
  /* The as-of line and the ban chip wrap under the label on a phone, never widening the page. */
  .fno-top { flex-wrap: wrap; min-width: 0; row-gap: 2px; } .fno-asof { white-space: normal; margin-left: 0; }
  .fno-line .fno-trail { display: none; }
  .fno-panel .table-scroll { overflow: visible; }
  table.fno-t thead { display: none; } table.fno-t, table.fno-t tbody { display: block; }
  table.fno-t { min-width: 0; } table.fno-t colgroup { display: none; }
  /* The status pills have their own row under the symbol: a pill is never broken over two lines. */
  table.fno-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s p" "st st" "tr tr" "t95 t80"; gap: 6px 10px; padding: 10px 14px; border-top: 1px solid var(--line); align-items: center; }
  table.fno-t td { display: block; padding: 0; border: 0; min-width: 0; }
  table.fno-t td.fno-st .fno-c { white-space: nowrap; margin-bottom: 2px; }
  /* The headings are hidden here: each room cell names its line. */
  .fno-to { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); line-height: 14px; }
  table.fno-t td.fno-s { grid-area: s; } table.fno-t td.fno-st { grid-area: st; } table.fno-t td.fno-p { grid-area: p; }
  /* The share keeps room for its "limit changed" line, so a card is as tall with the marker as without. */
  table.fno-t td.fno-p { min-height: 34px; display: flex; flex-direction: column; justify-content: center; }
  table.fno-t td.fno-tr { grid-area: tr; } table.fno-t td.fno-t95 { grid-area: t95; } table.fno-t td.fno-t80 { grid-area: t80; text-align: right; }
  .fno-near, .fno-ask { padding-left: 14px; padding-right: 14px; }
  table.fno-t td[colspan] { grid-column: 1 / -1; }
  .fno-foot { padding: 12px 14px 10px; }
  /* A live row on a phone: a card of three fixed lines (stock and ban; close and estimate; futures OI and price). */
  .fno-live .table-scroll { overflow: visible; }
  table.fno-lv tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "s st" "p e" "oi px"; grid-template-rows: 26px 46px 46px; align-items: start; }
  table.fno-lv .fno-k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); line-height: 14px; }
  table.fno-lv td.fno-p { min-height: 0; display: block; text-align: left; }
  table.fno-lv td.fno-e { grid-area: e; text-align: right; } table.fno-lv td.fno-oi { grid-area: oi; text-align: left; } table.fno-lv td.fno-px { grid-area: px; }
  table.fno-lv td.fno-s, table.fno-lv td.fno-st { align-self: center; }
  /* A phone's half-width lane has no room for the testing tag beside the figure: the card's head carries it once. */
  table.fno-lv .fno-lv-tag { display: none; } .fno-lv-tag-head { display: inline-block !important; }
  table.fno-lv td.fno-st { text-align: right; }
  .fno-lv-note { padding: 0 14px 10px; }
}
/* ================================================= The order-book ledger — owner only, in testing
   The company's order book quarter by quarter. What the company stated is set apart from what the desk worked out:
   a stated figure is solid ink with a dotted underline (its sentence is one hover or tap away); a computed one sits in
   a dashed band marked "Computed". Nothing here is drawn for anyone but the owner. */
.obl-slot:empty { display: none; }
.obl .card-title .ai-badge { vertical-align: 2px; }
.obl-body { padding: 16px 20px 4px; font-variant-numeric: tabular-nums; }
.obl-sk .obl-body { min-height: 176px; padding-bottom: 16px; }
.obl-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.obl-na { color: var(--dim); font-weight: 500; }
/* a stated figure: its sentence on hover, or under the card on a tap */
.obl-fig { font: inherit; font-weight: 700; color: var(--text); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit;
  text-decoration: underline dotted color-mix(in srgb, var(--text) 40%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.obl-fig:hover, .obl-fig.on { color: var(--brand); text-decoration-color: var(--brand); }
.obl-fig.on { text-decoration-style: solid; }
.obl-fig:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.obl-fig.obl-nosrc { cursor: default; text-decoration: none; }
/* the latest book, and beside it the computed pair */
.obl-hero { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; gap: 14px 26px; padding-bottom: 16px; }
.obl-now { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.obl-big { font-size: 28px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; }
.obl-asof { font-size: 12.5px; color: var(--muted); }
.obl-ctag { display: inline-block; font-size: 9.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: var(--muted);
  border: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 4px; padding: 0 5px; vertical-align: 1px; font-style: normal; }
.obl-calc { position: relative; display: flex; gap: 22px; align-items: flex-end; padding: 12px 16px 9px; border-radius: 10px;
  background: var(--surface-2); border: 1px dashed var(--line); }
.obl-calc > .obl-ctag { position: absolute; top: -8px; left: 12px; background: var(--surface); }
.obl-cv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.obl-cv b { font-size: 18px; font-weight: 750; color: var(--text); line-height: 1.25; white-space: nowrap; }
.obl-cv i { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.obl b.up { color: var(--good); } .obl b.down { color: var(--bad); } .obl b.flat { color: var(--muted); }
/* the books, oldest to latest: one glance at the trend */
.obl-bars { justify-self: end; display: flex; align-items: stretch; gap: 6px; height: 66px; }
.obl-bar { width: 40px; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
.obl-bar i { align-self: end; width: 30px; border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--accent) 30%, var(--surface-2)); }
.obl-bar.now i { background: var(--accent); }
.obl-bar em { font-style: normal; font-size: 10px; color: var(--dim); margin-top: 4px; white-space: nowrap; letter-spacing: -.1px; }
/* quarter by quarter: stated on the left, computed in its band on the right */
.obl-t { border-top: 1px solid var(--line); padding-top: 4px; }
.obl-tr { display: grid; grid-template-columns: minmax(104px, 1.05fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1fr); align-items: baseline; }
.obl-tr > span { padding: 8px 10px; min-width: 0; font-size: 13.5px; }
.obl-tr > span:first-child { padding-left: 0; }
.obl-tr > .obl-cp { background: var(--surface-2); align-self: stretch; }
.obl-th + .obl-tr > span, .obl-tr:not(.obl-th, .obl-tg) + .obl-tr > span { border-top: 1px solid var(--line); }
.obl-th + .obl-tr > .obl-cp, .obl-tr:not(.obl-th, .obl-tg) + .obl-tr > .obl-cp { border-top-color: color-mix(in srgb, var(--line) 70%, var(--surface-2)); }
.obl-th > span { padding-top: 6px; padding-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
/* the two groups named over their columns: a bracket over what the company stated, the dashed tag over the desk's own */
.obl-tg > span { padding-top: 10px; padding-bottom: 5px; font-size: 11px; line-height: 16px; }
.obl-tg .obl-g-st { grid-column: 2 / 4; color: var(--muted); font-weight: 650; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--muted) 45%, transparent); margin-right: 14px; }
.obl-tg .obl-g-cp { grid-column: 4 / 6; background: var(--surface-2); border-radius: 8px 8px 0 0; }
.obl-d { font-weight: 650; white-space: nowrap; }
.obl-tr em { display: block; font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obl-lbl { display: none; font-style: normal; }
.obl-key { display: none; }
.obl-cp b { font-weight: 700; }
/* the latest order wins */
.obl-w { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.obl-wh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; margin-bottom: 4px; }
.obl-wr { font-size: 12px; color: var(--muted); }
.obl-sum { color: var(--text); font-weight: 650; white-space: nowrap; }
.obl-w ul { list-style: none; margin: 0; padding: 0; }
.obl-w li { display: grid; grid-template-columns: 52px auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 5px 0; font-size: 13.5px; }
.obl-wd { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.obl-who { font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obl-band { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); }
/* the sentence behind the figure last tapped */
.obl-src { margin: 8px 20px 16px; padding: 9px 12px; border-radius: 9px; min-height: 38px; font-size: 12.5px; line-height: 1.55; color: var(--muted);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface-2)); }
.obl-src q { color: var(--text); }
.obl-srcm { display: block; margin-top: 3px; font-size: 12px; }
.obl-srcm .ann-file { margin-left: 2px; }
@media (max-width: 900px) {
  .obl-hero { grid-template-columns: auto minmax(0, 1fr); }
  .obl-calc { justify-self: start; }
  .obl-bars { grid-column: 1 / -1; justify-self: start; }
}
/* a phone: each quarter two lines — the date and its book; then the inflow, and the computed pair in its band */
@media (max-width: 600px) {
  .obl-body { padding: 14px 16px 2px; }
  .obl-src { margin: 8px 16px 14px; }
  .obl-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .obl-big { font-size: 26px; }
  .obl-calc { gap: 18px; }
  .obl-th, .obl-tg { display: none; }
  .obl-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 10px 0 2px; font-size: 11.5px; color: var(--muted); }
  .obl-key b { font-weight: 650; color: var(--text); margin-right: 8px; }
  .obl-key + .obl-tg + .obl-th + .obl-tr { border-top: 0; }
  .obl-tr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "d ob ob" "in ch bb"; }
  .obl-tr > span { padding: 0; border-top: 0 !important; }
  .obl-tr { padding: 9px 0; border-top: 1px solid var(--line); }
  .obl-d { grid-area: d; } .obl-ob { grid-area: ob; text-align: right; font-size: 15px !important; }
  .obl-in { grid-area: in; margin-top: 4px; color: var(--muted); }
  .obl-in em { display: inline; margin-left: 4px; }
  .obl-lbl { display: inline; font-size: 11px; color: var(--label); }
  .obl-ch { grid-area: ch; } .obl-bb { grid-area: bb; }
  .obl-tr > .obl-cp { margin-top: 4px; padding: 1px 8px; text-align: right; }
  .obl-tr > .obl-ch { border-radius: 6px 0 0 6px; } .obl-tr > .obl-bb { border-radius: 0 6px 6px 0; }
  .obl-bb em { display: none; }
  .obl-d em { display: inline; margin-left: 6px; }
  .obl-w li { grid-template-columns: 46px auto minmax(0, 1fr); column-gap: 10px; }
}

/* the owner's Results rows (testing): a line kept under the company's name, from the first paint, for its latest order
   book and book-to-bill — empty for most companies, and a chip landing in it never moves the row. The company column is
   narrow at every width, so the chip reads "OB ₹38,420 Cr · 1.7×"; its hover says it in full. */
.obc { display: block; height: 17px; margin-top: 2px; line-height: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 12px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.obc-in i { font-style: normal; font-size: 9.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; padding: 0 5px; border-radius: 999px; vertical-align: 1px; margin-right: 1px;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.obc-in b { font-weight: 650; color: var(--muted); }

/* ================================================= Trend, Insider, Radar and Deals: every figure whole, nothing moving */
/* Trend: figures that stopped arriving in session are dimmed until they come back (the card says when they last did).
   The detail's price goes by its own feed: an index's with the tiles, a stock's with its own ticks. */
.trend-card-root.is-stale .t-strip .t-tile, .t-detail.is-dim .trend-live { opacity: .55; }
/* The status word keeps one place: "live" and "not live" take turns in it (the other there unseen), so the line never
   re-wraps when figures stop or resume, and the tiles below never move. Digits keep one width as the time ticks. */
.trend-card-root > .card-head .hint { font-variant-numeric: tabular-nums; }
.t-status { display: inline-grid; }
.t-status > * { grid-area: 1 / 1; }
.t-status > [aria-hidden] { visibility: hidden; }
/* The session figures: the words after each figure are the answer ("Fuel empty backward"), so they are never cut.
   Two across where four no longer fit on one line; on a phone they wrap, with two lines kept for them, so a figure
   changing its words never moves the range bar and the ladder below. */
.t-sess-stats .ins-stat span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
@media (max-width: 1100px) { .t-sess-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .t-sess-stats .ins-stat span { min-height: 2.5em; } }
/* On a phone the session figures take the size their box allows, up to the usual 20px, so every figure is whole down
   to 320 px; a lakh-rupee price (two figures longer) is sized for its length. The line keeps its height whatever the
   size, so nothing below moves. */
@media (max-width: 720px) {
  .t-sess-stats .ins-stat { container-type: inline-size; }
  .t-sess-stats .ins-stat b { font-size: min(20px, 18.5cqi); height: 22px; line-height: 22px; white-space: nowrap; }
  .t-sess-stats.t-long .ins-stat b { font-size: min(20px, 15.5cqi); }
}
@media (max-width: 380px) { .t-sess-stats .ins-stat { padding: 8px 10px; } }
/* On the narrowest phones the longest words ("at 11:42 · 152% of the move used") take a third line: three are kept. */
@media (max-width: 340px) { .t-sess-stats .ins-stat span { min-height: 3.75em; } }
/* The detail on the narrowest phones: its column is the card's width, not its widest line, and the ladder scrolls
   inside it when its three lanes still do not fit. */
.t-dbody { grid-template-columns: minmax(0, 1fr); }
.t-session, .t-table { min-width: 0; }
@media (max-width: 380px) {
  table.ladder-t.sheet th, table.ladder-t.sheet td { padding: 7px 5px; }
  table.ladder-t.sheet thead tr:not(.anchor) th { font-size: 11px; letter-spacing: .03em; }
  table.ladder-t.sheet td.lbl b { font-size: 12px; }
  .t-session { padding: 12px 12px 8px; }
}
/* The strip on a narrow phone (under about 370 px): a name and "REVERSAL ZONE" no longer share a line there, so every
   row puts its gear under its name, and a gear changing words never changes a row's height. */
@media (max-width: 720px) { @container (max-width: 288px) { .t-id { flex-direction: column; align-items: flex-start; row-gap: 1px; } } }
/* Levels watch: a stock with no levels keeps its price in the price lane and its note where the levels go (on a
   phone, under the name), wrapping inside the card. */
table.lv td.lv-note { font-size: 12.5px; line-height: 1.4; white-space: normal; }
@media (max-width: 720px) {
  table.lv td.lv-note { grid-column: 1 / 3; grid-row: 2 / 4; }
  /* the name column gives way to the price lane on the narrowest phones (the name already ends in "…") */
  table.lv td.lv-s { min-width: 0; }
}
/* Any-stock suggestions: a symbol is never cut (SHREEVENKAT is wider than the column's usual width). Wherever the list
   is narrow (a phone, a tablet, a small window) each row takes two lines — symbol with its exchanges and size, then
   the name — rather than the name folding down line after line; and no keyboard help where there is no keyboard. */
.t-sb-field .suggest { container-type: inline-size; }
.t-sb-field .suggest-sym { flex: none; }
.t-sb-field .suggest-name { min-width: 0; }
@container (max-width: 400px) {
  .t-sb-field .suggest-row { flex-wrap: wrap; row-gap: 3px; }
  .t-sb-field .suggest-sym { min-width: 0; }
  .t-sb-field .suggest-name { order: 3; flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (pointer: coarse) { .suggest-hint { display: none; } }

/* Insider: a badge is one word on one line ("ENCUMBERED" never breaks), in a What column wide enough for the longest. */
table.insx td.what { overflow-wrap: normal; }
.ib { white-space: nowrap; }
table.insx th:nth-child(4) { width: 124px; }
/* On a phone a ticker is never cut: its chips wrap under it, and on the narrowest the size and time move to a line of
   their own under the ticker's. */
@media (max-width: 720px) {
  table.insx td.stock { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; white-space: normal; overflow: visible; }
  table.insx td.stock .ann-sym { flex: none; max-width: none; overflow: visible; }
  table.insx td.stock .res-x { flex: none; margin: 0; }
}
@media (max-width: 380px) {
  table.insx tbody tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stock t" "what sz" "det f"; }
  table.insx td.what { justify-self: start; }
}

/* Radar: every figure whole. A card narrower than four comfortable columns sets its facts two by two, a figure that
   still does not fit wraps rather than losing its end, and the labels, figures and notes of a row share lines
   (subgrid), so a label on two lines never drops its figure below its neighbours'. */
.rd-card { container-type: inline-size; grid-template-columns: minmax(0, 1fr); }
/* the narrowest phones: the window's sixty days of sessions fit the card's width */
@media (max-width: 360px) { .rd-strip { gap: 1px; } }
.rd-facts { column-gap: 10px; row-gap: 0; }
.rd-facts > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.rd-facts b, .rd-facts em { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
@container (max-width: 880px) {
  .rd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-facts > div:nth-child(n+3) { margin-top: 10px; }
}

/* Deals: a day trade's IN and OUT quantities have room, clear of the price beside them. A crore-sized one that still
   does not fit reaches left, into its own cell's margin, never right into the price. */
#blocksBody table.deals th:nth-child(5) { width: 124px; }
@media (min-width: 721px) { #blocksBody table.deals .trip-l { display: flex; justify-content: flex-end; align-items: baseline; } }
/* Before the first state lands: the table's place, held. */
.deals-wait { min-height: 320px; }

/* Access: the beta seat count and its limit, in the People card head. */
.seat-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.seat-form label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.seat-form input { width: 68px; padding: 6px 8px; font-family: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.seat-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
@media (max-width: 480px) { .seat-form { width: 100%; } }

/* Show / hide a password: the eye sits inside the box, which keeps room for it. */
.pw-field { position: relative; display: block; margin-top: 6px; }
.auth-card form .pw-field input, .acct-form .pw-field input { margin-top: 0; padding-right: 46px; }
.pw-field input::-ms-reveal { display: none; }
.pw-eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.pw-eye:hover { color: var(--text); background: color-mix(in srgb, var(--line) 55%, transparent); }
.pw-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-eye[aria-pressed="true"] { color: var(--text); }
.pw-eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------- new filing pop-up (testers)
 * Fixed over the page, so the tape under it never moves; each card the same
 * two lines tall. Bottom right on a desk, the full width at the bottom of a
 * phone, above the home bar and lifted over the deal notice while it shows. */
.fa-stack {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 88;
  width: 340px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; transition: opacity .15s, bottom .2s;
  /* Its own raised surface, a step above the tape's panels in either theme. */
  --fa-bg: var(--surface-2); --fa-edge: var(--line); --fa-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 14px 36px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] .fa-stack { --fa-bg: var(--surface); --fa-edge: #cdc3b4; --fa-shadow: 0 2px 6px rgba(25, 21, 18, .12), 0 14px 36px rgba(25, 21, 18, .22); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .fa-stack { --fa-bg: var(--surface); --fa-edge: #cdc3b4; --fa-shadow: 0 2px 6px rgba(25, 21, 18, .12), 0 14px 36px rgba(25, 21, 18, .22); }
}
/* Only the cards take a press: the gaps between them, and an empty stack, pass it to the tape under them. */
.fa-list { display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.fa-card, .fa-more { pointer-events: auto; }
.fa-stack.fa-away { opacity: 0; visibility: hidden; }
.fa-stack.fa-away .fa-card, .fa-stack.fa-away .fa-more { pointer-events: none; }
.fa-stack.fa-under { visibility: hidden; }
/* Moved to the top edge, under the header, while the reader works on what the bottom one would cover. */
.fa-stack.fa-top { bottom: auto; }
.fa-card {
  display: flex; align-items: stretch; height: 58px; box-sizing: border-box; overflow: hidden;
  background: var(--fa-bg); color: var(--ink); border: 1px solid var(--fa-edge); border-left: 3px solid var(--accent);
  border-radius: 10px; box-shadow: var(--fa-shadow); animation: fa-in .18s ease-out;
}
@keyframes fa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fa-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 0 4px 0 12px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.fa-l1, .fa-l2 { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.fa-sym { font-size: 14px; font-weight: 750; letter-spacing: .01em; }
.fa-src { font-size: 11px; font-weight: 700; color: var(--accent); }
.fa-at { margin-left: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fa-l2 { font-size: 12.5px; color: var(--muted); }
/* The category stays whole (up to 60% for a long one); a long company name takes the ellipsis. */
.fa-co { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.fa-cat { flex: 0 0 auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.fa-cat::before { content: "· "; }
.fa-x {
  flex: none; width: 40px; background: none; border: 0; border-left: 1px solid var(--line);
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.fa-open:hover .fa-sym { text-decoration: underline; }
.fa-x:hover { color: var(--ink); }
.fa-open:focus-visible, .fa-x:focus-visible, .fa-more:focus-visible,
.fa-kb .fa-open:focus, .fa-kb .fa-x:focus, .fa-kb .fa-more:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.fa-more {
  align-self: flex-end; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line);
  background: var(--fa-bg); border-color: var(--fa-edge); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 650; box-shadow: var(--fa-shadow); cursor: pointer;
}
.fa-more[hidden] { display: none; }
/* While cards are up the count keeps its place, shown or not: its coming and going never moves a card under the pointer or a finger. */
.fa-stack.fa-cards .fa-more[hidden] { display: block; visibility: hidden; }
/* A place a card left while the pointer rests on the stack: kept, as tall as a card, unseen; a press there goes to the page. */
.fa-hole { height: 58px; visibility: hidden; pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ann.fa-hit { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); transition: background .6s; }
.fa-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.fa-set label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.fa-set select { min-height: 32px; max-width: 100%; }
.fa-set .btn.on { border-color: var(--accent); color: var(--accent); }
.fa-set .hint { font-size: 12px; color: var(--dim); }
@media (pointer: coarse) { .fa-set .fa-key { display: none; } }
@media (max-width: 640px) {
  .fa-stack { left: 16px; right: 16px; width: auto; max-width: none; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .fa-card, .fa-hole { height: 54px; }
  .fa-set select, .fa-set .btn { flex: 1 1 100%; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .fa-card { animation: none; } .fa-stack, .ann.fa-hit { transition: none; } }

/* ---------------------------------------------------------- result days (the tester only, testing) */
/* One line beside the price: "usual ±2.0%" until the result trades, then "3.0× usual". A size, never a direction, so
   never red or green. Each lane holds its line from the first paint (blank with no record), so nothing moves when its
   words land; the words are the only thing that reacts to a pointer. */
.rdx { display: block; white-space: nowrap; font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.rdx i { font-style: normal; }
.rdx-b { display: inline-block; margin: 0; padding: 0 4px; border: 0; border-radius: 5px; background: none; font: inherit; line-height: inherit;
  color: inherit; text-align: inherit; cursor: pointer; }
.rdx-b i { color: var(--dim); }
.rdx-b b { color: var(--text); font-weight: 650; }
.rdx-x.small b { color: var(--muted); font-weight: 600; }
.rdx-x.big b { color: var(--accent); font-weight: 750; }
.rdx-b:hover, .rdx-b[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* on the tint the word "usual" takes the brighter grey, so it still reads at 4.5:1 while the record is open */
.rdx-b:hover i, .rdx-b[aria-expanded="true"] i { color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.rdx-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rdx-or { display: none; }
/* the Results desk: the price, its change, then the lane, right-aligned in the Price column; the heading names it once */
table.rs th.rs-hpx .rdx-hu { display: block; margin: 3px -4px 0 -12px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--label); white-space: nowrap; visibility: hidden; }
/* shown once a row's lane has words (rdxHead), so it never names an empty lane; its line is kept either way */
table.rs th.rs-hpx.rdx-has .rdx-hu { visibility: visible; }
table.rs td.rs-pxr .rs-pxq { display: block; }
table.rs td.rs-pxr .rs-pxq:empty::after { content: "—"; color: var(--dim); }
table.rs td.rs-pxr .rdx-row { height: 15px; line-height: 15px; margin: 0 -4px 0 0; }
/* its size is its own (fixed height, the cell's width), so words landing in it never lay the table out again */
table.rs td.rs-pxr .rdx-row { contain: size layout style; }
/* a desk (721px and up), a lane that can fill: the price and its change hold their two lines from the first paint
   (21 + 2 + 18px), so the lane under them is as high before the price lands, or with only its market cap in, as after */
@media (min-width: 721px) {
  table.rs td.rs-pxl .rs-pxq { min-height: 41px; }
  table.rs td.rs-pxl .rs-pxq .px-ltp, table.rs td.rs-pxl .rs-pxq:empty::after { line-height: 21px; }
  table.rs td.rs-pxl .rs-pxq .px-chg { line-height: 18px; }
}
/* a phone's card: the lane is a line of its own under the price, inside the height of the three buttons beside it */
@media (max-width: 720px) {
  table.rs td.rs-pxr .rs-pxq { display: contents; }
  table.rs td.rs-pxr .rs-pxq:empty::after { content: none; }
  table.rs td.rs-pxr .rdx-row { flex-basis: 100%; height: 17px; line-height: 17px; margin: 0 0 0 -4px; font-size: 12px; }
  .rdx-row .rdx-or { display: inline; }
  /* a thumb's target, 24px tall, in the lane's own 17px line: its box reaches 3.5px above and below the line and its
     margins give that back, so the card is as tall with words as without */
  table.rs td.rs-pxr .rdx-row .rdx-b { line-height: 24px; margin: -3px 0 -4px; vertical-align: top; }
  /* a lane that can fill: the price and its change hold a line of their own from the first paint, whole on one line
     (they never wrap), so the card is as tall and the lane as high before the price lands as after, and a move
     reaching double digits moves nothing */
  table.rs td.rs-pxl .rs-pxq { display: flex; flex: 0 0 100%; align-items: baseline; column-gap: 8px; height: 21px; white-space: nowrap; }
  /* a lane that never fills (an SME, a company only BSE lists) is not held on a phone: the card is as anyone else's */
  table.rs td.rs-pxr:not(.rs-pxl) .rdx-row { display: none; }
}
/* the narrowest phones: "usual ±19.9% on results" would reach the buttons, so every row drops "on results" alike */
@media (max-width: 374px) { .rdx-row .rdx-or { display: none; } }
/* and "₹99,999.95 ▲ 19.99%" would not fit one line, so on every card alike the change sits under the price, in a
   second line held from the first paint (price, change and lane: 21 + 2 + 18 + 2 + 17px) */
@media (max-width: 374px) {
  table.rs td.rs-pxl .rs-pxq { flex-direction: column; align-items: flex-start; row-gap: 2px; height: 41px; }
}
/* the tape: beside the price on the row's first line, in a lane of fixed width, so what follows never moves */
.ann-pxw { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; }
/* a price still on its way and a blank lane both keep a line (and so a baseline): the row is as tall before as after */
.ann-pxw .ann-px.held:empty::before, .rdx-tape::before { content: "\200b"; }
.rdx-tape { display: inline-block; width: 112px; height: 18px; line-height: 18px; font-size: 12px; }
/* A narrow row gives the price a line of its own, 20px tall whatever lands in it. The lane takes only the room the
   price leaves: when its words do not fit whole they wrap out of that one line and are not shown, so the price never
   gives up room to them and the row never grows. Its words end at the same place on every row, the line's end or
   344px in (the room a price and its lane have on the desk, 232 + 112px), whatever the price's width: a wider price
   landing beside words already shown never moves them. */
@media (max-width: 1024px) {
  .ann-pxw { order: 9; flex-basis: 100%; display: flex; align-items: center; gap: 0; height: 20px; padding-right: max(0px, calc(100% - 344px)); }
  .ann-pxw .ann-px.held { order: 0; flex: 0 1 auto; min-width: 196px; }
  /* The lane is 24px tall, a thumb's target, inside the price's 20px line: 2px above and below it, given back by its
     margins, so the row is as tall as before. Its words fill that height, so they are seen whole when they fit. */
  .rdx-tape { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 1 1 0; width: auto; min-width: 0;
    height: 24px; line-height: 24px; margin: -2px 0 -2px 6px; overflow: hidden; }
  .rdx-tape::before { flex: none; width: 0; height: 24px; }
  .rdx-tape .rdx-b { flex: none; }
  /* words wrapped out of sight (they do not fit beside this price) are out of the tab order too */
  .rdx-tape .rdx-b.rdx-off { visibility: hidden; }
  .rdx-tape .rdx-b:focus-visible { outline-offset: -2px; }
}
/* a calendar card: words only (the card is itself a button), at the right end of its last line */
.rdx-card { float: right; margin-left: 8px; font-size: inherit; }
.rdx-card i { color: var(--dim); } .rdx-card b { color: var(--text); font-weight: 650; }
/* the record on request: beside the lane on a desk, a sheet from the bottom on a phone. It floats, so no row moves. */
.rdx-pop { position: absolute; z-index: 60; width: 424px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); color: var(--text); font-size: 12.5px; }
.rdx-pop.hide, .rdx-back.hide { display: none; }
.rdx-back { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .42); }
.rdx-pop.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 82vh; overflow: auto;
  overscroll-behavior: contain; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  animation: rdx-up .16s ease-out; }
@keyframes rdx-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.rdx-ph { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rdx-pt { font-size: 13.5px; font-weight: 650; color: var(--muted); margin-right: auto; }
.rdx-pt b { color: var(--text); font-weight: 750; }
.rdx-close { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer; }
.rdx-close:hover { color: var(--text); border-color: var(--muted); }
.rdx-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rdx-pop.sheet .rdx-close { width: 36px; height: 36px; }
.rdx-now { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.rdx-now b { color: var(--text); font-weight: 700; } .rdx-now b.up { color: var(--good); } .rdx-now b.down { color: var(--bad); }
.rdx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.rdx-tile { display: flex; flex-direction: column; justify-content: space-between; background: var(--surface-2); border-radius: 8px; padding: 7px 8px 6px; min-width: 0; }
.rdx-tile > span { display: block; font-size: 10.5px; font-weight: 600; color: var(--label); line-height: 14px; }
.rdx-tile > span span { white-space: nowrap; }
.rdx-tile b { display: block; font-size: 15px; font-weight: 750; line-height: 20px; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the key to the shaded band, at the right above the table */
.rdx-key { display: flex; justify-content: flex-end; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--label); line-height: 14px; margin-bottom: 2px; }
.rdx-key i { display: inline-block; width: 14px; height: 9px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.rdx-list { display: grid; }
.rdx-li { display: grid; grid-template-columns: 58px 64px minmax(60px, 1fr) 52px 56px; column-gap: 8px; align-items: center; min-height: 24px;
  font-variant-numeric: tabular-nums; }
.rdx-li + .rdx-li { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.rdx-li.rdx-hd { min-height: 20px; font-size: 10.5px; font-weight: 600; color: var(--label); border-top: 0; }
.rdx-li > :nth-child(n+4) { text-align: right; }
.rdx-li.rdx-hd > :nth-child(3) { text-align: center; }
.rdx-li.rdx-hd > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdx-g { display: block; min-width: 0; }
/* today, among the results before it: outlined, first */
.rdx-li.rdx-today { border: 1px solid var(--accent); border-radius: 6px; margin: 2px -5px; padding: 0 4px; }
.rdx-li.rdx-today + .rdx-li { border-top: 0; }
.rdx-q { font-weight: 650; font-size: 12px; white-space: nowrap; }
.rdx-d { color: var(--muted); font-size: 12px; white-space: nowrap; }
.rdx-c { font-weight: 700; } .rdx-c.up, .rdx-n.up { color: var(--good); } .rdx-c.down, .rdx-n.down { color: var(--bad); }
.rdx-n { font-weight: 600; }
.rdx-bar { display: block; width: 100%; height: 14px; overflow: visible; }
.rdx-bar .rdx-band { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.rdx-bar .rdx-z { stroke: var(--muted); stroke-width: 1; opacity: .55; }
.rdx-bar .rdx-sw { stroke: var(--dim); stroke-width: 1.5; stroke-linecap: round; opacity: .75; }
.rdx-bar .rdx-cl { fill: var(--dim); } .rdx-bar .rdx-cl.up { fill: var(--good); } .rdx-bar .rdx-cl.down { fill: var(--bad); }
/* the company page's Price view: the same record as a card */
.rdx-co .card-title .ai-badge { vertical-align: 2px; }
/* the record's and the card's Testing badge: its amber a shade toward the text, so it reads at 4.5:1 or better on its tint in either theme */
.rdx-pop .ai-badge, .rdx-co .ai-badge { color: color-mix(in srgb, var(--warn) 85%, var(--text)); }
.rdx-cb { padding: 14px 20px 16px; }
.rdx-co .rdx-tiles { gap: 8px; margin-bottom: 10px; }
.rdx-co .rdx-tile { padding: 9px 12px 8px; }
.rdx-co .rdx-tile b { font-size: 18px; line-height: 24px; }
.rdx-co .rdx-li { grid-template-columns: 76px 84px minmax(120px, 1fr) 64px 72px; column-gap: 14px; min-height: 30px; font-size: 13px; }
.rdx-co .rdx-li.rdx-hd { min-height: 22px; font-size: 11px; }
.rdx-co .rdx-bar { height: 16px; }
.rdx-co .rdx-now { margin-bottom: 12px; }
@media (max-width: 720px) {
  .rdx-tiles, .rdx-co .rdx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdx-cb { padding: 12px 14px 14px; }
  .rdx-li, .rdx-co .rdx-li { grid-template-columns: 56px 62px minmax(44px, 1fr) 50px 50px; column-gap: 6px; font-size: 12px; min-height: 28px; }
  .rdx-d { font-size: 11.5px; }
}
/* the narrowest phones: each result's day goes under its quarter, so the bars and their heading keep room to be read */
@media (max-width: 374px) {
  .rdx-li, .rdx-co .rdx-li { grid-template-columns: 62px minmax(0, 1fr) 48px 50px; grid-template-areas: "q g c n" "d g c n"; padding-block: 3px; }
  .rdx-li > :nth-child(1) { grid-area: q; } .rdx-li > :nth-child(2) { grid-area: d; } .rdx-li > :nth-child(3) { grid-area: g; }
  .rdx-li > :nth-child(4) { grid-area: c; } .rdx-li > :nth-child(5) { grid-area: n; }
  .rdx-li .rdx-d { line-height: 15px; }
  /* the bars' heading, centred over them, may use the column gaps beside it, and the card's headings take the
     sheet's size, so "High–low · close" is read whole on the company card too */
  .rdx-li.rdx-hd > :nth-child(3) { margin-inline: -6px; }
  .rdx-co .rdx-li.rdx-hd { font-size: 10.5px; }
}
/* The same, decided by the list's own width where the browser can: the company card's list is 24px narrower than the
   sheet's on one screen, so it stacks up to 398px wide (the sheet, as above, to 374px: a list of 340px or less). */
.rdx-list { container-type: inline-size; }
@container (max-width: 340px) {
  .rdx-li, .rdx-co .rdx-li { grid-template-columns: 62px minmax(0, 1fr) 48px 50px; grid-template-areas: "q g c n" "d g c n"; padding-block: 3px; }
  .rdx-li > :nth-child(1) { grid-area: q; } .rdx-li > :nth-child(2) { grid-area: d; } .rdx-li > :nth-child(3) { grid-area: g; }
  .rdx-li > :nth-child(4) { grid-area: c; } .rdx-li > :nth-child(5) { grid-area: n; }
  .rdx-li .rdx-d { line-height: 15px; }
  .rdx-li.rdx-hd > :nth-child(3) { margin-inline: -6px; }
  .rdx-co .rdx-li.rdx-hd { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rdx-pop.sheet { animation: none; }
}

/* ------------------------------------------------------------------ Auction desk (testers; public/auction.js) */
.cas-pill { font: inherit; font-size: 12.5px; font-weight: 650; color: var(--unit-fg); background: var(--brand); border: 0; border-radius: 999px;
  padding: 5px 11px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.cas-pill { flex: 0 0 auto; }
.cas-pill .cas-ps { display: none; }
@media (max-width: 1499px) { .cas-pill .cas-pl { display: none; } .cas-pill .cas-ps { display: inline; } }
/* A laptop header stays one row, 71px, through an OFS day's close: the strapline gives way to the auction pill and
   never wraps, and the phase keeps the width its longest words need ("Final minutes — cut-off moving"). */
header:has(#casPill:not(.hide)) .brand-sub { display: none; }
@media (min-width: 981px) {
  .brand { min-width: 0; } .brand > div { min-width: 0; }
  .brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .status .live:first-child { flex: none; } #phase { overflow: visible; text-overflow: clip; }
}
.cas-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cas, .cas-a, .cas-b { display: grid; gap: 14px; min-width: 0; } .cas-b:empty { display: none; }
.cas .card { padding: 14px 16px; margin-bottom: 0; }
.cas .card > .card-head { margin: -14px -16px 12px; padding: 12px 16px; }
.cas-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cas-step { font-size: 12.5px; color: var(--muted); border-top: 3px solid var(--line); padding-top: 6px; line-height: 1.25; }
.cas-step.done { border-top-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cas-step.on { color: var(--text); font-weight: 700; border-top-color: var(--accent); }
.cas-sub { display: block; font-weight: 400; color: var(--dim); font-size: 11.5px; }
.cas-strip-line { margin-top: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.cas-expiry { margin-top: 8px; font-size: 13px; color: var(--warn); font-weight: 650; }
.cas-asof { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.cas-counts { font-size: 14px; margin-top: 4px; } .cas-counts b { font-variant-numeric: tabular-nums; }
.cas-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cas-chip { font: inherit; font-size: 12.5px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 4px 10px; cursor: pointer; color: var(--text); font-variant-numeric: tabular-nums; }
.cas-chip.up { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); } .cas-chip.down { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.cas-idxs { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13.5px; margin-top: 4px; }
.cas-segs { display: inline-flex; margin: 8px 8px 0 0; }
.cas-table { margin-top: 10px; overflow-x: auto; }
.cas-lanes, .cas-row { display: grid; grid-template-columns: minmax(140px, 1.5fr) repeat(9, minmax(76px, 1fr)); gap: 8px; align-items: baseline; }
.cas-headrow { font-size: 11.5px; color: var(--label); text-transform: none; padding: 0 6px 6px; border-bottom: 1px solid var(--line); }
.cas-headrow span:not(.c-sym) { text-align: right; }
.cas-row { width: 100%; font: inherit; font-size: 13.5px; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; cursor: pointer; }
.cas-row:hover { background: var(--surface-2); } .cas-row.mine { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.cas-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.c-sym { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-num.hot { color: var(--warn); font-weight: 650; }
.cas-star { color: var(--brand); margin-right: 4px; }
.cas-tag { font-size: 10.5px; font-weight: 700; color: var(--warn); border: 1px solid currentColor; border-radius: 5px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; }
.cas-ok { color: var(--good); font-size: 12px; }
@media (max-width: 1200px) { .cas-row .cas-tag { display: none; } }
.cas-board.stale .cas-row, .cas-head.stale .cas-counts, .cas-head.stale .cas-chips, .cas-row.old { opacity: .45; }
.cas-board.stale .cas-asof, .cas-head.stale .cas-asof { color: var(--warn); font-weight: 650; }
.cas-empty { color: var(--muted); font-size: 13.5px; padding: 8px 0; }
.cas-list { list-style: none; margin: 8px 0 0; padding: 0; }
.cas-list li { display: grid; grid-template-columns: minmax(100px, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cas-list.noref li { grid-template-columns: minmax(100px, 1.2fr) repeat(2, minmax(0, 1fr)); }
.cas-list li.cas-list-head { font-size: 11.5px; color: var(--label); padding: 0 0 6px; }
.cas-list .hot { color: var(--warn); font-weight: 650; }
@media (max-width: 1000px) {
  /* Nothing overlaps: the reference sits over the close, and a long move or an unmatched size wraps rather than spill. */
  .cas-list .c-num { white-space: normal; } .cas-list .c-rc .c-ref { display: block; font-size: 11.5px; color: var(--dim); }
  .cas-row > :nth-child(3), .cas-row > :nth-child(5) { white-space: normal; }
}
/* Quote lane (no reference): stock, indicative close, vs prev close, matched on every screen (the lanes it cannot fill are left out). */
.cas-table.noref .cas-lanes, .cas-table.noref .cas-row { grid-template-columns: minmax(72px, 1.3fr) repeat(3, minmax(0, 1fr)); }
.cas-table.noref .cas-lanes > :is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(9)),
.cas-table.noref .cas-row > :is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(9)) { display: none; }
.cas-table.noref .cas-lanes > :is(:nth-child(8), :nth-child(10)), .cas-table.noref .cas-row > :is(:nth-child(8), :nth-child(10)) { display: block; }
.cas-table.noref .cas-lanes > :nth-child(8), .cas-table.noref .cas-row > :nth-child(8) { order: 1; }
/* Settled on the quote lane: no auction volume to show, so three lanes. */
.cas-table.noref.settled .cas-lanes, .cas-table.noref.settled .cas-row { grid-template-columns: minmax(72px, 1.3fr) repeat(2, minmax(0, 1fr)); }
.cas-table.noref.settled .cas-lanes > :nth-child(8), .cas-table.noref.settled .cas-row > :nth-child(8) { display: none; }
/* Board lane with no previous close on any row: the full table leaves that lane out (narrower screens never show it). */
@media (min-width: 1001px) {
  .cas-table.noprev:not(.noref) .cas-lanes, .cas-table.noprev:not(.noref) .cas-row { grid-template-columns: minmax(140px, 1.5fr) repeat(8, minmax(76px, 1fr)); }
  .cas-table.noprev:not(.noref) .cas-lanes > :nth-child(10), .cas-table.noprev:not(.noref) .cas-row > :nth-child(10) { display: none; }
}
@media (min-width: 641px) { .cas-list.noprev li { grid-template-columns: minmax(100px, 1.2fr) repeat(3, minmax(0, 1fr)); } }
/* 3:15-3:20 on a phone: reference prices are set and nothing is indicated yet, so the reference takes the price lane's place. */
@media (max-width: 640px) {
  .cas-table.preic .cas-lanes > :nth-child(2), .cas-table.preic .cas-row > :nth-child(2) { display: block; }
  .cas-table.preic .cas-lanes > :nth-child(3), .cas-table.preic .cas-row > :nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  /* Settled: nothing is unmatched any more, so a phone's fourth lane is the band. */
  .cas-table.settled:not(.noref) .cas-lanes > :nth-child(5), .cas-table.settled:not(.noref) .cas-row > :nth-child(5) { display: none; }
  .cas-table.settled:not(.noref) .cas-lanes > :nth-child(9), .cas-table.settled:not(.noref) .cas-row > :nth-child(9) { display: block; }
}
.cas-top { margin-top: 8px; font-size: 12.5px; color: var(--dim); }
.cas-log { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; } .cas-log li { padding: 4px 0; }
.cas-t { color: var(--dim); font-variant-numeric: tabular-nums; margin-right: 6px; }
.cas-settings { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .cas-settings .seg { align-items: center; flex-wrap: wrap; }
.cas-segs { flex-wrap: wrap; }
.cas-lbl { font-size: 12px; color: var(--dim); padding: 0 8px; }
.cas-drawer { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .35); display: flex; justify-content: flex-end; }
.cas-drawer-in { width: min(440px, 100%); height: 100%; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); padding: 16px; box-shadow: var(--shadow); }
.cas-drawer-in > .card-head { margin: -16px -16px 12px; padding: 12px 16px; }
.cas-fact { font-size: 14px; margin: 6px 0; font-variant-numeric: tabular-nums; }
.cas-sec { margin: 14px 0 6px; font-size: 12.5px; color: var(--label); font-weight: 650; }
.cas-lanes4 { display: grid; grid-template-columns: 1.1fr 1.6fr 1fr .8fr; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cas-lanes4.cas-headrow { padding: 0 0 6px; } .cas-lanes4.cas-headrow > :first-child { text-align: left; }
.cas-spark { width: 100%; height: 64px; margin-top: 8px; }
.cas-spark .line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cas-spark .ref { stroke: var(--dim); stroke-dasharray: 4 4; stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (min-width: 641px) and (max-width: 1000px) {
  .cas-lanes, .cas-row { grid-template-columns: minmax(96px, 1.2fr) repeat(3, minmax(68px, 1fr)) minmax(88px, 1.3fr) repeat(3, minmax(60px, .9fr)); }
  .cas-lanes > :nth-child(8), .cas-row > :nth-child(8), .cas-lanes > :nth-child(10), .cas-row > :nth-child(10) { display: none; }
}
@media (max-width: 640px) {
  .cas .card { padding: 12px; } .cas .card > .card-head { margin: -12px -12px 10px; padding: 10px 12px; }
  .cas-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .cas-step { font-size: 11px; } .cas-sub { display: none; }
  /* A phone keeps four lanes: stock, indicative close, vs reference, unmatched (the reference is in the stock's panel). */
  .cas-lanes, .cas-row { grid-template-columns: minmax(72px, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cas-lanes > :nth-child(2), .cas-row > :nth-child(2) { display: none; }
  .cas-chips > :nth-child(n + 3) { display: none; }
  .cas-lanes > :nth-child(n + 6), .cas-row > :nth-child(n + 6) { display: none; }
  .cas-row .cas-tag { display: none; }
  .cas-row { font-size: 12.5px; padding: 8px 2px; } .cas-row .cas-star { margin-right: 2px; } .cas-headrow { padding: 0 2px 6px; }
  .cas-list li { grid-template-columns: minmax(64px, 1fr) repeat(2, minmax(0, 1.2fr)); font-size: 12.5px; } .cas-list li > :nth-child(n + 4) { display: none; }

  .cas-drawer { align-items: flex-end; } .cas-drawer-in { height: auto; max-height: 85vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; }
  .cas-pill { font-size: 11.5px; padding: 4px 9px; } .cas-pill .cas-pl { display: none; } .cas-pill .cas-ps { display: inline; }
}

/* The closing auction's recap as one line on Announcements (testers): a tap opens the Auction tab. */
.cas-rline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--text);
  padding: 10px 14px; margin: 0 0 12px; cursor: pointer; font-variant-numeric: tabular-nums; min-width: 0; }
.cas-rline:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.cas-rl-h { font-weight: 700; } .cas-rl-t { color: var(--muted); min-width: 0; overflow-wrap: anywhere; } .cas-rl-w { min-width: 0; overflow-wrap: anywhere; }
/* A stock's auction line on its company page and Trend panel (testers). */
.cas-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 14px; margin: -8px 0 16px; font-size: 12.5px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; min-width: 0; }
.cas-line.t { flex-basis: 100%; margin: 2px 0 4px; padding: 6px 12px; background: transparent; }
.cas-sl-h { font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.cas-sl-t { min-width: 0; overflow-wrap: anywhere; } .cas-sl-t.stale { opacity: .45; } .cas-sl-a { color: var(--muted); white-space: nowrap; }
/* The whole board's last four lanes (vs last price, unmatched from market orders, total buy and sell qty): wide screens only, beside their kin. */
.cas-lanes > :nth-child(n + 11), .cas-row > :nth-child(n + 11) { display: none; }
.c-side { display: block; font-size: 11px; line-height: 1.2; color: var(--dim); font-weight: 500; }
.cas-state { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); vertical-align: 2px; }
.cas-state.s-during { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.cas-state.s-after { color: var(--text); }
@media (min-width: 1201px) {
  /* The two price lanes hold a five-figure price with paise (₹1,40,500.00); the rest are short. */
  .cas-table:not(.noref) .cas-lanes, .cas-table:not(.noref) .cas-row { grid-template-columns: minmax(150px, 1.7fr) repeat(2, minmax(86px, 1.15fr)) repeat(11, minmax(56px, 1fr)); gap: 6px; }
  .cas-table.noprev:not(.noref) .cas-lanes, .cas-table.noprev:not(.noref) .cas-row { grid-template-columns: minmax(150px, 1.7fr) repeat(2, minmax(86px, 1.15fr)) repeat(10, minmax(56px, 1fr)); }
  .cas-table:not(.noref) .cas-lanes > :nth-child(n + 11), .cas-table:not(.noref) .cas-row > :nth-child(n + 11) { display: block; }
  /* Shown in this order: stock, reference, indicative close, vs reference, vs last price, to band, unmatched at price, unmatched from
     market orders, unmatched ₹, vs usual, matched now, total buy, total sell, vs prev close. */
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :nth-child(11) { order: 5; }
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :nth-child(9) { order: 6; }
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :nth-child(5) { order: 7; }
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :nth-child(12) { order: 8; }
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :nth-child(6) { order: 9; }
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :nth-child(7) { order: 10; }
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :nth-child(8) { order: 11; }
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :nth-child(13) { order: 12; }
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :nth-child(14) { order: 13; }
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :nth-child(10) { order: 14; }
  .cas-table:not(.noref) :is(.cas-lanes, .cas-row) > :is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) { order: 0; }
  .cas-table:not(.noref) .cas-row { font-size: 13px; }
}

/* The Auction tab outside the auction: the last session, every stock (public/auction.js prevBoardHtml). Lanes fixed; a lane no row fills is left out. */
.cas-pbt { margin-top: 10px; overflow-x: auto; }
.cas-pbl { display: grid; grid-template-columns: minmax(120px, 1.4fr) repeat(3, minmax(80px, 1fr)) minmax(80px, 1fr) repeat(3, minmax(76px, 1fr)) minmax(120px, 1.3fr); gap: 8px; align-items: baseline; }
.cas-pbt.noprev .cas-pbl { grid-template-columns: minmax(120px, 1.4fr) repeat(3, minmax(80px, 1fr)) repeat(3, minmax(76px, 1fr)) minmax(120px, 1.3fr); }
.cas-pbt.noimb .cas-pbl { grid-template-columns: minmax(120px, 1.4fr) repeat(3, minmax(80px, 1fr)) minmax(80px, 1fr) repeat(3, minmax(76px, 1fr)); }
.cas-pbt.noprev.noimb .cas-pbl { grid-template-columns: minmax(120px, 1.4fr) repeat(3, minmax(80px, 1fr)) repeat(3, minmax(76px, 1fr)); }
.cas-pbr { width: 100%; font: inherit; font-size: 13.5px; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 7px 6px; text-align: left; cursor: pointer; }
.cas-pbr:hover { background: var(--surface-2); } .cas-pbr.mine { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.cas-pbr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cas-note { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
@media (max-width: 640px) {
  /* A phone keeps four lanes: stock, close, vs reference, value. */
  .cas-pbt .cas-pbl, .cas-pbt.noprev .cas-pbl, .cas-pbt.noimb .cas-pbl, .cas-pbt.noprev.noimb .cas-pbl { grid-template-columns: minmax(72px, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cas-pbl > :nth-child(2), .cas-pbl > :nth-child(n + 5) { display: none; }
  .cas-pbt:not(.noprev) .cas-pbl > :nth-child(7), .cas-pbt.noprev .cas-pbl > :nth-child(6) { display: block; }
  .cas-pbr { font-size: 12.5px; padding: 7px 2px; }
}
.cas-pbl.cas-headrow > span { white-space: normal; line-height: 1.25; }
@media (min-width: 641px) and (max-width: 1000px) {
  /* A tablet drops the reference and the volume (both in the stock's panel). */
  .cas-pbt .cas-pbl > :nth-child(2) { display: none; }
  .cas-pbt:not(.noprev) .cas-pbl > :nth-child(6), .cas-pbt.noprev .cas-pbl > :nth-child(5) { display: none; }
  .cas-pbl { grid-template-columns: minmax(100px, 1.3fr) repeat(2, minmax(76px, 1fr)) minmax(72px, 1fr) repeat(2, minmax(70px, 1fr)) minmax(110px, 1.2fr); }
  .cas-pbt.noprev .cas-pbl { grid-template-columns: minmax(100px, 1.3fr) repeat(2, minmax(76px, 1fr)) repeat(2, minmax(70px, 1fr)) minmax(110px, 1.2fr); }
  .cas-pbt.noimb .cas-pbl { grid-template-columns: minmax(100px, 1.3fr) repeat(2, minmax(76px, 1fr)) minmax(72px, 1fr) repeat(2, minmax(70px, 1fr)); }
  .cas-pbt.noprev.noimb .cas-pbl { grid-template-columns: minmax(100px, 1.3fr) repeat(2, minmax(76px, 1fr)) repeat(2, minmax(70px, 1fr)); }
}
.cas-pbm { display: none; color: var(--warn); font-weight: 650; } @media (max-width: 640px) { .cas-pbm { display: inline; } }

/* Footer: the bid-book line on OFS and IPO only; elsewhere a plain line about where figures come from. */
.foot-ofs { display: none; }
body[data-tab="ofs"] .foot-ofs, body[data-tab="ipo"] .foot-ofs { display: inline; }
body[data-tab="ofs"] .foot-gen, body[data-tab="ipo"] .foot-gen { display: none; }
/* A phone: the Radar and Results search boxes take the whole row, so the placeholder is never cut. */
@media (max-width: 600px) {
  .ins-search, .ins-tools .ins-search { display: flex; flex: 1 1 100%; width: 100%; min-width: 0; }
  .ins-search input { width: 100%; }
}
/* A phone shows no tooltips: each Results row button says what it opens under its glyph. */
.ico-l { display: none; }
@media (max-width: 720px) {
  table.rs td.rs-a .ico { flex-direction: column; gap: 2px; }
  table.rs td.rs-a .ico-l { display: block; font-size: 9px; line-height: 1; font-weight: 600; color: var(--muted); letter-spacing: 0; }
}
/* Phone tap targets at least 24 px: the sign-in card's links and box, the rule popover's boxes. */
@media (max-width: 720px) {
  .auth-link { min-height: 24px; padding: 3px 0; }
  .auth-link.inline { display: inline-block; vertical-align: baseline; }
  .auth-check input { width: 22px; height: 22px; }
  .rule-pop input[type="checkbox"] { width: 22px; height: 22px; }
}

/* Deals: which exchange the tab covers, in plain words under the card's head (and in the empty state), never grey small print. */
.deals-scope { margin: 0; padding: 10px 20px; font-size: 13.5px; line-height: 1.45; color: var(--text); background: var(--surface-2); border-bottom: 1px solid var(--line); }
/* The block pill: at 320 px its date part moves under the words whole, never split ("last Thu 1" / "Oct"). */
.block-pill { flex-wrap: wrap; row-gap: 2px; column-gap: 4px; } .block-pill .nw { white-space: nowrap; }
.empty .deals-scope { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border: 0; border-radius: 8px; }
@media (max-width: 640px) { .card > .deals-scope { padding-left: 16px; padding-right: 16px; } }
/* A quiet line under the scope line, in its band (13 Oct): another app's "large trade" alert is no block or bulk deal. */
.deals-note { margin: 0; padding: 0 20px 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.card > .deals-scope:has(+ .deals-note) { border-bottom: 0; padding-bottom: 4px; }
.empty .deals-note { display: block; padding: 0; margin: -6px 0 12px; background: none; border: 0; }
@media (max-width: 640px) { .card > .deals-note { padding-left: 16px; padding-right: 16px; } }

/* Deals: BSE's own deals page beside the scope line, and BSE trades named in insider filings (a section of their own,
   never counted with the prints). A grid row on a desk; three short lines on a phone, nothing wider than the screen. */
.deals-bse-link { color: var(--accent); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.bse-filed { border-top: 1px solid var(--line); padding: 12px 20px 14px; }
.bse-filed .bf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.bse-filed .bf-head b { font-size: 13px; font-weight: 750; color: var(--text); }
.bse-filed .bf-head span { font-size: 12px; color: var(--muted); }
.bf-list { list-style: none; margin: 0; padding: 0; }
.bf-row { display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(200px, 2fr) 150px 100px 110px minmax(160px, 1fr);
  grid-template-areas: "stock who qty px val when"; gap: 4px 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line);
  font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bf-row:first-child { border-top: 0; }
.bf-stock { grid-area: stock; min-width: 0; } .bf-stock .hint { display: block; font-size: 12px; }
.bf-who { grid-area: who; min-width: 0; }
.bf-who .side, .bf-who .deal-type { display: inline-block; margin-right: 6px; vertical-align: middle; }
.bf-who .who-name { display: inline; overflow-wrap: anywhere; vertical-align: middle; }
.bf-num { white-space: nowrap; text-align: right; }
.bf-row > .bf-num:nth-child(3) { grid-area: qty; } .bf-row > .bf-num:nth-child(4) { grid-area: px; } .bf-row > .bf-num:nth-child(5) { grid-area: val; }
.bf-when { grid-area: when; font-size: 12px; text-align: right; }
@media (max-width: 720px) {
  .bse-filed { padding: 12px 16px 14px; }
  .bf-row { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "stock stock val" "who who who" "qty px px" "when when when"; gap: 4px 12px; }
  .bf-row > .bf-num:nth-child(3), .bf-row > .bf-num:nth-child(4), .bf-when { text-align: left; }
}

/* ================================================= A lender's own figures (13 Oct)
   A bank's or an NBFC's row: PPOP's trio in EBITDA's columns; NII, provisions and PAT beside it, each named under its
   figure on the full desk (the heading names an ordinary company's lines) and in the card's own labels on a phone. */
.rs-sub .rs-lk { font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rf-tri.tri-s-lm .tri-k, .rf-tri.tri-s-lm .tri-kk { cursor: help; }
/* (the full desk: the trio's own name under its unit, as NII, provisions and PAT are named under theirs — the heading
   above it names an ordinary company's EBITDA) */
@media (min-width: 721px) {
  .rs-fx.rs-lm .rs-c.rs-e.rf-tri { grid-template-rows: 22px 20px 17px; grid-template-areas: "v0 v1 v2" "u g1 g2" "k . ."; }
  .rs-fx.rs-lm .rs-c.rf-tri > .tri-k { display: block; text-align: right; line-height: 17px; margin-top: 2px; }
  .rs-fx.rs-lm .rs-m .rs-lk { letter-spacing: 0; font-size: 10px; }
  .rs-fx.rs-lm .rs-m .rs-sub { margin-left: -8px; }   /* (the column's padding: "PROVISIONS" is the widest name in it) */
}
@media (max-width: 720px) {
  .rs-lm .rs-c.rs-r::before { content: "NII"; }
  .rs-lm .rs-c.rs-m::before { content: "PROVISIONS"; } .rs-lm .rs-c.rs-p::before { content: "PAT"; }
  .rs-lm .rs-sub .rs-lk { display: none; }
}
/* (the card on a phone: "Provisions" too wide for its lane — its short name, the full one in its title) */
@media (max-width: 480px) {
  .rf-lm .rf-l > .rf-k[data-s] { font-size: 0; letter-spacing: 0; }
  .rf-lm .rf-l > .rf-k[data-s]::after { content: attr(data-s); font-size: 9.5px; letter-spacing: .02em; }
}

/* ------------------------------------------------- BidDesk Quant entry (12 Oct 2026: Quant for all; 14 Oct: its own tab)
   The way in sits in the header, left of the account chip ("✦ Quant ↗"; a phone keeps a round ✦ pinned at the tab bar's
   end), so the tab bar holds the market's tabs alone. Then one quiet link per tab, a ✦ on a filing with three years of
   history, the slim intro strip and the menu item. All for a signed-in member alone: html[data-quant="1"] (index.html at
   first paint, app.js once the desk knows who is signed in). Each opens Quant in its own tab (public/quantentry.js). */
.quant-tab, .quant-go, .q-chip, .q-row, .q-foot { display: none; }
html[data-quant="1"] .tabs-bar { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
html[data-quant="1"] .tabs-bar > .tabs { flex: 1 1 auto; min-width: 0; border-bottom: 0; margin-bottom: 0; }
html[data-quant="1"] .quant-go { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); background: color-mix(in srgb, var(--brand) 9%, transparent);
  color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.quant-go:hover, .quant-tab:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.quant-go .qg-glyph, .quant-tab .qt-glyph { color: var(--brand); }
.quant-go .qg-ext { font-size: 12px; font-weight: 500; color: var(--muted); }
.quant-go:focus-visible, .quant-tab:focus-visible, .q-chip:focus-visible, .q-row:focus-visible, .qi-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A laptop: the status keeps its width, so with the button beside it the longest phase ("Final minutes — cut-off
   moving") never runs under "updated"; the brand's strapline gives way first. */
@media (min-width: 981px) { html[data-quant="1"] .status, html[data-quant="1"] #themeBtn { flex-shrink: 0; } }
/* The tightest laptops (981-1060px, the longest phase): the button drops its ↗ so the name keeps its room. */
@media (min-width: 981px) and (max-width: 1060px) { .quant-go .qg-ext { display: none; } html[data-quant="1"] .quant-go { padding: 0 12px; } }
/* A tablet: the button has its own column on the top row, before the account chip; the strapline goes below 760px.
   A member's page alone (html[data-quant="1"]): a signed-out page keeps main's header. */
@media (max-width: 980px) {
  html[data-quant="1"] .header-in { grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas: "brand quant user theme refresh" "status status status status status"; }
  .quant-go { grid-area: quant; }
}
@media (max-width: 760px) { html[data-quant="1"] .brand-sub { display: none; } }
/* An auction day (testers) on a small laptop or a tablet: the auction pill takes the room, and Quant stays in the menu
   (the status shrinks again, as it does without the button, so the name keeps its room). */
@media (max-width: 1180px) { header:has(#casPill:not(.hide)) .quant-go { display: none; } html[data-quant="1"] header:has(#casPill:not(.hide)) .status { flex-shrink: 1; } }
/* A phone: the header keeps its four columns, and Quant is a round ✦ at the tab bar's end (it stays while the tabs scroll). */
@media (max-width: 640px) {
  html[data-quant="1"] .header-in { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "brand user theme refresh" "status status status status"; }
  html[data-quant="1"] .quant-go { display: none; }
  html[data-quant="1"] .quant-tab { display: inline-flex; align-items: center; justify-content: center; flex: none; align-self: center; width: 36px; height: 34px;
    margin: 0 0 0 6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line));
    background: color-mix(in srgb, var(--brand) 9%, transparent); text-decoration: none; }
  .quant-tab .qt-glyph { font-size: 16px; line-height: 1; }
}
/* One quiet link per tab ("✦ Test a rule ↗", its full meaning in its title): no pill, so it never reads as a filter. */
html[data-quant="1"] .q-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; }
.q-chip > span:first-child { color: var(--brand); }
.q-chip .q-ext { font-size: 11px; }
.q-chip:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.deals-tools .q-chip, .ins-tools .q-chip { margin-left: auto; }
/* Announcements: top right of the card's head, beside the title, in room kept for it (the tools keep their own line). */
.wire-head { position: relative; }
.wire-head > .q-chip { position: absolute; top: 19px; right: 20px; }
@media (min-width: 641px) { html[data-quant="1"] .wire-head > .wire-title { padding-right: 112px; } }
html[data-quant="1"] .q-foot { display: flex; justify-content: flex-end; padding: 10px 0 2px; }
@media (max-width: 640px) { html[data-quant="1"] .q-chip.q-wide { display: none; } }
@media (min-width: 641px) { html[data-quant="1"] .q-foot.q-narrow { display: none; } }
/* A filing whose kind has three years of history: a ✦ beside "Open filing ↗" opens that kind's numbers in Quant. */
html[data-quant="1"] .q-row { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; margin-left: -6px;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); color: var(--brand); font-size: 13px; line-height: 1; text-decoration: none; }
.q-row:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.ann-acts > .q-row:first-child { margin-left: 0; }
a.user-pop-item { display: block; text-decoration: none; color: inherit; }
/* Ask Quant (owner decision, 21 Oct 2026): one neutral, labelled link on every Results, Announcements and Deals row,
   "✦ What stocks did after results like this ›", to the class answer: the same words on every row of a kind, no colour
   of the row's, no number. The phone's Quant tab says its name; ✦ Quant carries a count when a watched kind just landed. */
.q-after { display: none; }
html[data-quant="1"] .q-after { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--muted); text-decoration: none; }
html[data-quant="1"] .q-after > span:first-child { color: var(--brand); }
.q-after:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.q-after:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
html[data-quant="1"] td .q-after { display: block; margin-top: 5px; white-space: normal; }
.ann-acts > .q-after { margin-left: 4px; }
@media (max-width: 640px) {
  html[data-quant="1"] .quant-tab { width: auto; gap: 5px; padding: 0 11px; border-radius: 999px; }
  .quant-tab .qt-word { font-size: 13px; font-weight: 650; color: var(--text); }
  .ann-acts > .q-after { flex-basis: 100%; margin: 6px 0 0; }
}
.quant-tab .qt-word { margin-left: 4px; }
.quant-go[data-new], .quant-tab[data-new] { position: relative; }
.quant-go[data-new]::after, .quant-tab[data-new]::after { content: attr(data-new); position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: #111; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.quant-note { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: min(360px, calc(100vw - 32px)); padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--surface); box-shadow: 0 12px 36px rgba(0, 0, 0, .35); font-size: 13.5px; }
.quant-note p { margin: 0; } .quant-note b span { color: var(--brand); } .quant-note .qn-q { margin-top: 4px; color: var(--muted); }
.quant-note .qn-act { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .quant-note .qn-act a { color: var(--brand); font-weight: 600; text-decoration: none; }
.quant-note .qn-act button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.quant-note .qn-fine { margin-top: 6px; font-size: 11.5px; color: var(--dim); }
.quant-note .qn-act button.qn-show { width: auto; height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid var(--line); font-size: 13px; color: var(--text); }
.q-hit { outline: 2px solid var(--brand); outline-offset: -2px; }
/* The intro strip: one line, the paper line under it, Open Quant ↗ and × on the right. */
.quant-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "line act" "fine act"; column-gap: 16px; row-gap: 2px; align-items: center;
  margin: 0 0 14px; padding: 9px 8px 9px 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.qi-line { grid-area: line; margin: 0; font-size: 14px; line-height: 1.4; color: var(--text); }
.qi-new { color: var(--brand); font-weight: 650; }
.qi-where { color: var(--muted); } .qi-narrow { display: none; }
.qi-fine { grid-area: fine; margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--dim); }
.qi-act { grid-area: act; display: flex; align-items: center; gap: 4px; margin: 0; }
.qi-open { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--brand) 50%, var(--line)); background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--text); font-size: 13px; font-weight: 600; }
.qi-open:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.qi-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.qi-x:hover { background: var(--surface-2); color: var(--text); }
.qi-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) {
  .quant-intro { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "line line x" "open where where" "fine fine fine"; column-gap: 10px; row-gap: 5px;
    padding: 8px 4px 9px 12px; margin-bottom: 12px; }
  .qi-act { display: contents; } .qi-open { grid-area: open; height: 30px; padding: 0 11px; align-self: center; } .qi-x { grid-area: x; align-self: start; }
  .qi-line { font-size: 13px; } .qi-fine { font-size: 11px; padding-right: 8px; }
  .qi-wide { display: none; } .qi-narrow { display: block; grid-area: where; font-size: 12px; line-height: 1.3; }
}

/* ================================================================ the sign-in card (public beta, 4 Nov 2026)
   One card to sign in or join. Behind it: two glows drifting, a fine grid, a chart line that draws itself once and a
   light that runs along it a few times. The card's edge catches the light; its parts rise in turn; the switch slides.
   Transforms and opacity only (one height ease from app.js), nothing fetched, no web font; still under reduced motion. */
.gate.auth.gx { background: var(--bg); padding: 16px; grid-template-rows: 1fr auto; overflow-x: hidden; }
.gx-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.gx-glow { position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; will-change: transform;
  animation: gx-drift 22s ease-in-out infinite alternate; }
.gx-a { left: -34vmax; top: -40vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 24%, transparent), transparent); }
.gx-b { right: -36vmax; bottom: -46vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent);
  animation-duration: 27s; animation-direction: alternate-reverse; }
@keyframes gx-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vmax, 5vmax, 0) scale(1.12); } }
.gx-grid { position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 38%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 38%, #000 15%, transparent 72%); }
.gx-line { position: absolute; left: 0; bottom: 0; width: 100%; height: 64%; overflow: visible; }
.gx-path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: gx-draw 2.6s .3s cubic-bezier(.65, .05, .25, 1) forwards; }
.gx-area { opacity: 0; animation: gx-fade 1.8s 1.5s ease-out forwards; }
.gx-comet { fill: none; stroke: color-mix(in srgb, var(--accent) 70%, #fff); stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: .045 3; stroke-dashoffset: .05; animation: gx-comet 6s 3s cubic-bezier(.45, 0, .55, 1) 3 both; }
@keyframes gx-draw { to { stroke-dashoffset: 0; } }
@keyframes gx-fade { to { opacity: 1; } }
@keyframes gx-comet { 0% { stroke-dashoffset: .05; } 72%, 100% { stroke-dashoffset: -1; } }
@keyframes gx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.gx-stage { position: relative; z-index: 1; width: 100%; max-width: 1100px; display: grid; justify-items: center; align-items: center; gap: 72px; }
.gx-story { display: none; }
@media (min-width: 980px) {
  .gx-stage { grid-template-columns: minmax(0, 1fr) 440px; justify-items: stretch; padding: 24px 8px; }
  .gx-story { display: block; max-width: 520px; }
  .gx-card .auth-brand { display: none; }
}
.gx-story > * { animation: gx-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.gx-story > :nth-child(2) { animation-delay: .08s; } .gx-story > :nth-child(3) { animation-delay: .16s; }
.gx-story > :nth-child(4) { animation-delay: .26s; } .gx-story > :nth-child(5) { animation-delay: .4s; }
.gx-mark { display: block; width: 76px; height: auto; aspect-ratio: 200 / 134;
  filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--brand) 40%, transparent)); }
.gx-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 24px 0 16px; padding: 5px 12px 5px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 11%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); }
.gx-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 20%, transparent); animation: pulse 2.4s ease-in-out infinite; }
.gx-head { margin: 0 0 28px; font-size: 46px; line-height: 1.06; letter-spacing: -1.4px; font-weight: 750; color: var(--text); text-wrap: balance; }
.gx-head em { font-style: normal; color: var(--accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gx-head em { background: linear-gradient(92deg, var(--brand), var(--accent) 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.gx-fine { margin: 22px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--dim); max-width: 440px; }
.gx-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gx-feats li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }
.gx-feats b { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--text); }
.gx-feats li span:not(.gx-ico):not(.gx-beta) { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.gx-beta { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.gx-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.gx-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The card: its edge is a 1px ring a slow sweep of light runs round (a rotating layer under the card's own face). */
/* clip, not hidden: a box that clips but never scrolls, so focusing a field (or a script's scrollIntoView) cannot slide the
   card's face off its ring. */
.auth-card.gx-card { position: relative; isolation: isolate; overflow: hidden; overflow: clip; border: 0; padding: 30px 30px 26px;
  background: color-mix(in srgb, var(--line) 92%, transparent);
  box-shadow: 0 40px 90px -48px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .16);
  animation: gx-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.gx-card::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 60%, color-mix(in srgb, var(--brand) 85%, transparent) 75%,
    color-mix(in srgb, var(--accent) 90%, transparent) 86%, transparent 97%);
  animation: gx-turn 9s linear infinite; }
.gx-card::after { content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: 17px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--accent)), var(--surface) 40%); }
@keyframes gx-turn { to { rotate: 360deg; } }
.gx-card .auth-brand { margin-bottom: 20px; }
.gx-badge { flex: none; margin: 0 0 0 auto; align-self: center; white-space: nowrap; }
.gx-card .auth-brand > div { min-width: 0; }
.gx-first .gx-switch, .gx-first .gx-body > *, .gx-first .gx-body form > * { animation: gx-rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .12s; }
.gx-first .gx-body > :nth-child(2) { animation-delay: .18s; } .gx-first .gx-body > :nth-child(3) { animation-delay: .24s; }
.gx-first .gx-body form > :nth-child(2) { animation-delay: .3s; } .gx-first .gx-body form > :nth-child(3) { animation-delay: .36s; }
.gx-first .gx-body form > :nth-child(4) { animation-delay: .42s; } .gx-first .gx-body form > :nth-child(n+5) { animation-delay: .48s; }

/* Sign in | Create account: the knob slides with a little spring. */
.gx-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 0 0 22px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--line); }
.gx-switch button { position: relative; z-index: 1; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .25s; }
.gx-switch button[aria-selected="true"] { color: var(--text); }
.gx-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gx-knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28), 0 0 0 1px color-mix(in srgb, var(--line) 85%, transparent);
  transition: transform .42s cubic-bezier(.3, 1.35, .5, 1); }
.gx-card[data-mode="signup"] .gx-knob { transform: translateX(100%); }
.gx-card:not([data-mode="login"]):not([data-mode="signup"]) .gx-switch { display: none; }
.gx-body { position: relative; }
.gx-card h1 { font-size: 24px; letter-spacing: -.5px; }

/* Fields: a soft ring on focus; a confirm box that matches turns green; the hints under a field say what is wrong in words. */
.gx-card form input:not([type=checkbox]) { transition: border-color .2s, box-shadow .2s, background .2s; }
.gx-card form input:not([type=checkbox]):focus { outline: 2px solid transparent; border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); background: var(--surface); }
.gx-card form input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 18%, transparent); }
.gx-card form input.gx-match { border-color: color-mix(in srgb, var(--good) 70%, var(--line)); }
.gx-card form input.gx-miss:not(:focus) { border-color: color-mix(in srgb, var(--warn) 70%, var(--line)); }
.gx-f { min-width: 0; }
.gx-hint { display: block; min-height: 17px; margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--dim); transition: color .2s; }
.gx-hint.ok { color: var(--good); } .gx-hint.bad { color: var(--warn); }
.gx-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 9px 0 0; }
.gx-meter i { position: relative; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--line) 85%, transparent); }
.gx-meter i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--m, var(--line));
  transform: scaleX(0); transform-origin: left; transition: transform .38s cubic-bezier(.2, .8, .2, 1), background .3s; }
.gx-meter i:nth-child(2)::after { transition-delay: .04s; } .gx-meter i:nth-child(3)::after { transition-delay: .08s; } .gx-meter i:nth-child(4)::after { transition-delay: .12s; }
.gx-meter[data-s="1"] { --m: var(--bad); } .gx-meter[data-s="2"] { --m: var(--warn); } .gx-meter[data-s="3"], .gx-meter[data-s="4"] { --m: var(--good); }
.gx-meter[data-s="1"] i:nth-child(-n+1)::after, .gx-meter[data-s="2"] i:nth-child(-n+2)::after,
.gx-meter[data-s="3"] i:nth-child(-n+3)::after, .gx-meter[data-s="4"] i::after { transform: scaleX(1); }
/* The box no person sees: off-screen, out of the tab order, inert. */
.gx-trap { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* The button: a sheen crosses it on hover; while busy, a ring turns beside the words and it keeps its size. */
.gx-go { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  border-radius: 12px; font-weight: 650; letter-spacing: -.1px; transition: filter .15s, transform .12s, box-shadow .25s;
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.gx-go::after { content: ""; position: absolute; inset: 0; pointer-events: none; translate: -110% 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%); }
.gx-go:hover::after { translate: 110% 0; transition: translate .8s ease; }
.gx-go:active { transform: scale(.985); }
.gx-spin { display: none; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: ai-spin .7s linear infinite; }
.gx-go[aria-busy="true"] { cursor: progress; filter: saturate(.9); }
.gx-go[aria-busy="true"] .gx-spin { display: block; }
.gx-go:disabled { opacity: 1; }
.gx-arrow { display: inline-block; transition: transform .25s; } .gx-go:hover .gx-arrow { transform: translateX(3px); }
.gx-card .auth-err:not(.hide) { animation: gx-rise .3s cubic-bezier(.2, .8, .2, 1) both; }

/* Welcome (and "request sent"): a ring that draws, a tick, a burst of sparks; the three rooms rise in turn. */
.gx-done { text-align: center; }
.gx-done .auth-sub { margin-bottom: 18px; }
.gx-seal { position: relative; width: 72px; height: 72px; margin: 2px auto 16px; }
.gx-check { width: 72px; height: 72px; display: block; }
.gx-check circle { fill: color-mix(in srgb, var(--good) 12%, transparent); stroke: var(--good); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1;
  transform: rotate(-90deg); transform-origin: 50% 50%; animation: gx-draw .7s .1s cubic-bezier(.65, 0, .35, 1) forwards; }
.gx-check path { fill: none; stroke: var(--good); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: gx-draw .45s .62s cubic-bezier(.65, 0, .35, 1) forwards; }
.gx-seal-wait circle { fill: color-mix(in srgb, var(--warn) 12%, transparent); stroke: var(--warn); }
.gx-seal-wait path { stroke: var(--warn); }
.gx-spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; opacity: 0;
  background: var(--brand); animation: gx-spark .9s .7s cubic-bezier(.2, .7, .3, 1) both; }
.gx-spark:nth-child(3n+1) { background: var(--accent); } .gx-spark:nth-child(3n+2) { background: var(--good); }
@keyframes gx-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-30px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-62px) scale(.3); } }
.gx-done .gx-feats { text-align: left; gap: 8px; margin: 0 0 6px; }
.gx-done .gx-feats li { padding: 10px 12px; grid-template-columns: 34px 1fr; gap: 12px; animation: gx-rise .55s cubic-bezier(.2, .8, .2, 1) both; }
.gx-done .gx-feats li:nth-child(1) { animation-delay: .9s; } .gx-done .gx-feats li:nth-child(2) { animation-delay: 1s; } .gx-done .gx-feats li:nth-child(3) { animation-delay: 1.1s; }
.gx-done .gx-ico { width: 34px; height: 34px; border-radius: 9px; }
/* A wide screen already lists the three rooms beside the card: the welcome keeps to its tick, its words and the way in. */
@media (min-width: 980px) { .gx-done .gx-feats { display: none; } .gx-done .auth-sub { margin-bottom: 24px; } }
.gx-done .gx-feats li span:not(.gx-ico):not(.gx-beta) { font-size: 12.5px; }

.gx .auth-credit { position: relative; z-index: 1; text-align: center; }
.gx .auth-foot .auth-link.inline { font-size: inherit; font-weight: 600; }
:root[data-theme="light"] .gx-grid { opacity: .7; }
:root[data-theme="light"] .auth-card.gx-card { box-shadow: 0 40px 90px -50px rgba(60, 40, 10, .35), 0 2px 8px rgba(25, 21, 18, .06); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .gx-grid { opacity: .7; }
  :root:not([data-theme="dark"]) .auth-card.gx-card { box-shadow: 0 40px 90px -50px rgba(60, 40, 10, .35), 0 2px 8px rgba(25, 21, 18, .06); }
}
/* A phone: the card fills the width between 16 px gutters, the line sits lower, the type a step smaller. */
@media (max-width: 520px) {
  .gate.auth.gx { padding: 14px 16px 8px; }
  .auth-card.gx-card { padding: 22px 18px 20px; border-radius: 18px; }
  .gx-card h1 { font-size: 22px; }
  .gx-line { height: 46%; }
  .gx-switch { margin-bottom: 18px; }
  .gx-card .auth-brand img { width: 48px; }
  .gx-badge { padding: 3px 8px; font-size: 9.5px; letter-spacing: .1em; }
}
/* Reduced motion: everything in place at once; the line and the tick drawn, the busy ring still. */
@media (prefers-reduced-motion: reduce) {
  .gx *, .gx *::before, .gx *::after { animation: none !important; transition: none !important; }
  .gx-path, .gx-check circle, .gx-check path { stroke-dashoffset: 0; }
  .gx-area { opacity: 1; }
  .gx-comet, .gx-spark { display: none; }
}

/* The owner's Sign-ups card on Access (public beta). */
.su-mode { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.su-mode .btn[aria-pressed="true"] { cursor: default; }
.su-list { display: flex; flex-direction: column; gap: 10px; }
.su-row { display: flex; align-items: center; gap: 12px; }
.su-who { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Remove many sign-ups at once (a bot that got through): the window, then a question with the count. */
.su-purge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.su-win { padding: 6px 8px; font: inherit; font-size: 13px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; max-width: 100%; }
.su-win:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.seat-form input::placeholder { color: var(--dim); }
/* Insider+ (testers, testing): the promoter timeline's room on a company's Price view while public/insiderplus.js loads (it draws the card). */
.ipx-slot { min-height: 640px; margin-bottom: 22px; }
@media (max-width: 640px) { .ipx-slot { min-height: 720px; } }

/* ---- Continue with Google (feat/google-signin): Google's button rules. Light: #FFF, 1px #747775, #1F1F1F text.
   Dark: #131314, 1px #8E918F, #E3E3E3 text. Its own mark, 18px, the words in a medium weight; no web font. */
.gx .gx-google { display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; width: 100%; min-height: 44px;
  margin: 16px 0 0; padding: 10px 16px; border-radius: 999px; border: 1px solid #8e918f; background: #131314; color: #e3e3e3;
  font: 500 14px/20px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .1px; text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.gx .gx-google .gx-g { position: absolute; left: 16px; top: 50%; margin-top: -9px; flex: none; }
.gx .gx-google:hover { background: #1f1f21; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.gx .gx-google:active { background: #29292b; }
.gx .gx-google:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gx .gx-or { display: flex; align-items: center; gap: 14px; margin: 16px 0 2px; color: var(--muted); font-size: 12.5px; }
.gx .gx-or::before, .gx .gx-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
:root[data-theme="light"] .gx .gx-google { background: #fff; border-color: #747775; color: #1f1f1f; }
:root[data-theme="light"] .gx .gx-google:hover { background: #f8f9fa; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
:root[data-theme="light"] .gx .gx-google:active { background: #eef0f1; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .gx .gx-google { background: #fff; border-color: #747775; color: #1f1f1f; }
  :root:not([data-theme="dark"]) .gx .gx-google:hover { background: #f8f9fa; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
  :root:not([data-theme="dark"]) .gx .gx-google:active { background: #eef0f1; }
}
@media (prefers-reduced-motion: reduce) { .gx .gx-google { transition: none; } }

/* ==== Porcelain: the sign-in screen (owner-approved design, 6 Nov 2026). Scoped to the gate: signed-in pages do not change.
   Tokens: the app's dark by default, the site's porcelain in light (same theme switch as the app). No web font. ==== */
.gate.gx {
  --p-bg: #0c0b09; --p-bg-2: #1f1b16; --p-surface: #16130f; --p-knob: #2e2822;
  --p-ink: #f3eee6; --p-ink-2: #ddd5c9; --p-muted: #b0a596; --p-faint: #a99e8f;
  --p-line: rgba(243, 238, 230, .08); --p-line-2: rgba(243, 238, 230, .13); --p-field: #8a7f70;
  --p-btn: #f3eee6; --p-btn-ink: #0c0b09; --p-btn-hi: #ffffff;
  --p-gold: #d9a441; --p-gold-text: #d9a441; --p-ring: rgba(217, 164, 65, .38);
  --p-err: #ff8a7d; --p-err-bg: rgba(255, 111, 96, .08); --p-err-line: rgba(255, 111, 96, .26);
  --p-note: #e9c27a; --p-note-bg: rgba(217, 164, 65, .08); --p-note-line: rgba(217, 164, 65, .24);
  --p-glow: rgba(217, 164, 65, .07);
  --p-card-sh: 0 0 0 1px rgba(243, 238, 230, .02), 0 30px 80px -40px rgba(0, 0, 0, .8);
  --p-wire-sh: 0 0 0 1px rgba(243, 238, 230, .03), 0 40px 100px -50px rgba(0, 0, 0, .9);
  --p-w-bg: #12100d;
  --p-serif: "Newsreader", ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --p-ease: cubic-bezier(.16, 1, .3, 1);
}
:root[data-theme="light"] .gate.gx {
  --p-bg: #f7f5f1; --p-bg-2: #efeae2; --p-surface: #ffffff; --p-knob: #ffffff;
  --p-ink: #191512; --p-ink-2: #3a332c; --p-muted: #5d554b; --p-faint: #6e6457;
  --p-line: rgba(25, 21, 18, .085); --p-line-2: rgba(25, 21, 18, .14); --p-field: #958a7b;
  --p-btn: #0c0b09; --p-btn-ink: #ffffff; --p-btn-hi: #2b251f;
  --p-gold-text: #8a5d18; --p-ring: rgba(217, 164, 65, .34);
  --p-err: #a32b1e; --p-err-bg: #fbf1ed; --p-err-line: rgba(179, 42, 31, .22);
  --p-note: #7a5212; --p-note-bg: #fbf5e8; --p-note-line: rgba(138, 93, 24, .22);
  --p-glow: rgba(217, 164, 65, .13);
  --p-card-sh: 0 1px 2px rgba(25, 21, 18, .04), 0 10px 28px -12px rgba(25, 21, 18, .10), 0 44px 90px -40px rgba(25, 21, 18, .22);
  --p-wire-sh: 0 2px 4px rgba(25, 21, 18, .06), 0 24px 48px -24px rgba(25, 21, 18, .40), 0 60px 120px -60px rgba(25, 21, 18, .45);
  --p-w-bg: #16130f;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .gate.gx {
    --p-bg: #f7f5f1; --p-bg-2: #efeae2; --p-surface: #ffffff; --p-knob: #ffffff;
    --p-ink: #191512; --p-ink-2: #3a332c; --p-muted: #5d554b; --p-faint: #6e6457;
    --p-line: rgba(25, 21, 18, .085); --p-line-2: rgba(25, 21, 18, .14); --p-field: #958a7b;
    --p-btn: #0c0b09; --p-btn-ink: #ffffff; --p-btn-hi: #2b251f;
    --p-gold-text: #8a5d18; --p-ring: rgba(217, 164, 65, .34);
    --p-err: #a32b1e; --p-err-bg: #fbf1ed; --p-err-line: rgba(179, 42, 31, .22);
    --p-note: #7a5212; --p-note-bg: #fbf5e8; --p-note-line: rgba(138, 93, 24, .22);
    --p-glow: rgba(217, 164, 65, .13);
    --p-card-sh: 0 1px 2px rgba(25, 21, 18, .04), 0 10px 28px -12px rgba(25, 21, 18, .10), 0 44px 90px -40px rgba(25, 21, 18, .22);
    --p-wire-sh: 0 2px 4px rgba(25, 21, 18, .06), 0 24px 48px -24px rgba(25, 21, 18, .40), 0 60px 120px -60px rgba(25, 21, 18, .45);
    --p-w-bg: #16130f;
  }
}
.gate.auth.gx { display: flex; flex-direction: column; align-items: stretch; padding: 0; background: var(--p-bg); color: var(--p-ink);
  overflow-x: hidden; overflow-y: auto; -webkit-font-smoothing: antialiased; }
.gate.gx .gx-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60vmax 44vmax at 78% 38%, var(--p-glow), transparent 70%),
    radial-gradient(50vmax 36vmax at 8% 96%, color-mix(in srgb, var(--p-bg-2) 70%, transparent), transparent 70%); }
.gate.gx .gx-top { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 72px; padding: 0 max(56px, calc((100vw - 1200px) / 2)); border-bottom: 1px solid var(--p-line); }
.gate.gx .gx-brand { display: inline-flex; align-items: center; gap: 10px; }
.gate.gx .gx-brand img { width: 40px; height: auto; aspect-ratio: 200 / 134; display: block; filter: drop-shadow(0 1px 1px rgba(25, 21, 18, .18)); }
.gate.gx .gx-brand b { font: 500 25px/1 var(--p-serif); letter-spacing: -.02em; color: var(--p-ink); }
.gate.gx .gx-back { font-size: 14px; color: var(--p-muted); text-decoration: none; padding: 6px 2px; border-radius: 6px; }
.gate.gx .gx-back:hover { color: var(--p-ink); }
.gate.gx .gx-back:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 3px; }
.gate.gx .gx-stage { position: relative; z-index: 1; flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 436px;
  align-items: center; justify-items: stretch; gap: clamp(48px, 7vw, 112px); width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 28px max(56px, calc((100vw - 1200px) / 2)) 24px; }
.gate.gx .gx-story { display: block; max-width: 620px; animation: none; }
.gate.gx .gx-story > * { animation: gx-p-up .9s var(--p-ease) both; }
.gate.gx .gx-story > :nth-child(2) { animation-delay: .07s; } .gate.gx .gx-story > :nth-child(3) { animation-delay: .16s; }
.gate.gx .gx-story > :nth-child(4) { animation-delay: .28s; }
@keyframes gx-p-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gate.gx .gx-eyebrow { display: inline-flex; align-items: center; gap: 9px; height: 32px; margin: 0 0 26px; padding: 0 14px 0 12px; border-radius: 999px;
  background: var(--p-surface); border: 1px solid var(--p-line); color: var(--p-ink-2); font-size: 13px; font-weight: 500; letter-spacing: 0;
  text-transform: none; box-shadow: 0 1px 2px rgba(25, 21, 18, .04); white-space: nowrap; }
.gate.gx .gx-eyebrow::before { content: none; }
.gate.gx .gx-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--p-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-gold) 24%, transparent); }
.gate.gx .gx-head { margin: 0; font: 400 clamp(52px, 5.15vw, 76px)/.98 var(--p-serif); letter-spacing: -.028em; color: var(--p-ink); text-wrap: initial; }
.gate.gx .gx-head span { display: block; }
.gate.gx .gx-head em { font-style: italic; letter-spacing: -.034em; color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.gate.gx .gx-lede { margin: 22px 0 0; font-size: 18px; line-height: 1.5; color: var(--p-ink-2); max-width: 40ch; }
.gate.gx .gx-foot { position: relative; z-index: 1; flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px 32px;
  flex-wrap: wrap; padding: 18px max(56px, calc((100vw - 1200px) / 2)) 22px; border-top: 1px solid var(--p-line);
  font-size: 12.5px; color: var(--p-faint); }
.gate.gx .gx-foot .auth-credit { padding: 0; font-size: inherit; color: var(--p-ink-2); text-align: left; }
/* Porcelain: the card */
.gate.gx .auth-card.gx-card { width: 100%; max-width: 436px; justify-self: end; overflow: visible; isolation: auto; border: 1px solid var(--p-line);
  border-radius: 24px; padding: 30px 34px 26px; background: var(--p-surface); color: var(--p-ink); box-shadow: var(--p-card-sh);
  animation: gx-p-up .8s var(--p-ease) both .05s; }
.gate.gx .gx-card::before, .gate.gx .gx-card::after { content: none; animation: none; }
.gate.gx .gx-switch { height: 44px; padding: 4px; margin: 0 0 26px; border: 0; border-radius: 999px; background: var(--p-bg-2); }
.gate.gx .gx-switch button { min-height: 36px; padding: 0 10px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--p-muted); }
.gate.gx .gx-switch button[aria-selected="true"] { color: var(--p-ink); }
.gate.gx .gx-switch button:focus-visible { outline: 2px solid var(--p-ink); outline-offset: -2px; }
.gate.gx .gx-knob { border-radius: 999px; background: var(--p-knob);
  box-shadow: 0 1px 2px rgba(25, 21, 18, .08), 0 2px 8px -2px rgba(25, 21, 18, .10); transition: transform .36s var(--p-ease); }
.gate.gx .gx-card h1 { margin: 0; font: 400 36px/1.06 var(--p-serif); letter-spacing: -.02em; color: var(--p-ink); }
.gate.gx .gx-card .auth-sub { margin: 7px 0 0; color: var(--p-muted); font-size: 15px; line-height: 1.5; }
.gate.gx .gx-done .auth-sub { margin-bottom: 16px; }   /* the joined welcome: room for the three rooms below (review, 6 Nov) */
.gate.gx .gx-card .auth-note { margin: 16px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--p-note-bg);
  border: 1px solid var(--p-note-line); color: var(--p-note); font-size: 13.5px; line-height: 1.45; }
.gate.gx .gx-card form { margin-top: 4px; }
.gate.gx .gx-card form label { margin: 14px 0 0; font-size: 13px; font-weight: 500; color: var(--p-ink-2); }
.gate.gx .gx-card form input:not([type=checkbox]) { height: 48px; margin-top: 7px; padding: 0 15px; border: 1px solid var(--p-field); border-radius: 12px;
  background: var(--p-surface); color: var(--p-ink); font-size: 15.5px; }
.gate.gx .gx-card form .pw-field { margin-top: 7px; }
.gate.gx .gx-card form .pw-field input { margin-top: 0; padding-right: 52px; }
.gate.gx .gx-card form input:not([type=checkbox]):hover { border-color: color-mix(in srgb, var(--p-field) 55%, var(--p-ink)); }
.gate.gx .gx-card form input:not([type=checkbox]):focus { outline: 2px solid transparent; border-color: var(--p-ink);
  box-shadow: 0 0 0 4px var(--p-ring); background: var(--p-surface); }
.gate.gx .gx-card form input[aria-invalid="true"] { border-color: var(--p-err); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-err) 16%, transparent); }
.gate.gx .gx-card .pw-eye { right: 5px; color: var(--p-muted); border-radius: 9px; }
.gate.gx .gx-card .pw-eye:hover { color: var(--p-ink); background: var(--p-bg-2); }
.gate.gx .gx-card .pw-eye:focus-visible { outline: 2px solid var(--p-ink); outline-offset: -2px; }
.gate.gx .gx-card .auth-check { gap: 11px; margin-top: 16px !important; font-size: 14px; font-weight: 400 !important; color: var(--p-ink-2); width: fit-content; cursor: pointer; }
.gate.gx .gx-card .auth-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--p-btn); cursor: pointer; }
.gate.gx .gx-card .gx-hint { color: var(--p-faint); font-size: 12.5px; }
.gate.gx .gx-card .auth-err { margin: 16px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--p-err-bg); border: 1px solid var(--p-err-line);
  color: var(--p-err); font-size: 13.5px; line-height: 1.45; }
.gate.gx .gx-card .gx-go { width: 100%; min-height: 52px; margin-top: 22px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--p-btn);
  color: var(--p-btn-ink); font-size: 15px; font-weight: 500; letter-spacing: -.005em; filter: none;
  box-shadow: 0 1px 1px rgba(12, 11, 9, .22), 0 10px 22px -12px rgba(12, 11, 9, .55); transition: background-color .2s, transform .12s, box-shadow .2s; }
.gate.gx .gx-card .gx-go:hover { background: var(--p-btn-hi); }
.gate.gx .gx-card .gx-go::after { content: none; }
.gate.gx .gx-card .gx-go:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 3px; }
.gate.gx .gx-card .auth-foot { margin: 16px 0 0; color: var(--p-muted); font-size: 13px; line-height: 1.55; }
.gate.gx .gx-card .auth-link { color: var(--p-ink); text-decoration: underline; text-decoration-color: var(--p-line-2); text-underline-offset: 3px; }
.gate.gx .gx-card .auth-link:hover { text-decoration-color: currentColor; }
.gate.gx .gx-card .auth-link.inline { font-weight: 500; }
.gate.gx .gx-card .auth-link:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 2px; border-radius: 3px; }
.gate.gx .gx-card .gx-seal { margin-top: 4px; }
.gate.gx .gx-done h1 { margin-top: 0; }
/* Google's button inside Porcelain: 48px, Google's colours kept (see the block above), the divider in the card's own lines. */
.gate.gx .gx-google { min-height: 48px; margin-top: 22px; }
.gate.gx .gx-or { margin: 20px 0 0; color: var(--p-faint); }
.gate.gx .gx-or::before, .gate.gx .gx-or::after { background: var(--p-line-2); }
.gate.gx .gx-google:focus-visible { outline: 2px solid var(--p-ink); outline-offset: 3px; }
@media (min-width: 980px) { .gate.gx .gx-done .gx-feats { display: grid; } }
.gate.gx .gx-done .gx-feats li { border-color: var(--p-line); background: var(--p-bg); }
/* Porcelain: one dark Wire row, the app's dark tokens in both themes */
.gate.gx .gx-glimpse { margin: 40px 0 0; max-width: 600px; }
.gate.gx .gx-wire { position: relative; overflow: hidden; border-radius: 20px; background: var(--p-w-bg); color: #f3eee6;
  border: 1px solid rgba(243, 238, 230, .06); box-shadow: var(--p-wire-sh); padding: 18px 22px 20px; }
.gate.gx .gx-wire::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(217, 164, 65, .07), transparent 55%); box-shadow: inset 0 1px 0 rgba(243, 238, 230, .06); }
.gate.gx .gx-w-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(243, 238, 230, .085); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #a99e8f; }
.gate.gx .gx-w-when { letter-spacing: .02em; text-transform: none; font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.gate.gx .gx-w-co { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 16px; min-width: 0; }
.gate.gx .gx-w-co b { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.gate.gx .gx-w-sym { padding: 4px 9px; border-radius: 7px; background: #212227; border: 1px solid rgba(127, 173, 255, .16);
  color: #7fadff; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.gate.gx .gx-w-name { color: #a99e8f; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gate.gx .gx-w-eb { position: relative; display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; color: #a99e8f; }
.gate.gx .gx-cr { display: inline-block; padding: 4px 7px 3px; border-radius: 6px; background: #d9a441; color: #1c1307;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.gate.gx .gx-lanes { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 6px; margin-top: 10px; }
.gate.gx .gx-lane { padding: 11px 14px 12px; border-radius: 12px; min-width: 0; }
.gate.gx .gx-lane.gx-now { background: #30394b; }
.gate.gx .gx-l-h { display: block; font-size: 12px; font-weight: 500; color: #a99e8f; }
.gate.gx .gx-now .gx-l-h { color: #c4bbae; }
.gate.gx .gx-l-v { display: block; margin-top: 4px; font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: #f3eee6; }
.gate.gx .gx-chg { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-right: 4px; }
.gate.gx .gx-d { display: inline-flex; gap: 6px; padding: 5px 9px; border-radius: 8px; background: rgba(255, 111, 96, .10); color: #ff6f60;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gate.gx .gx-d span { color: #a99e8f; font-weight: 500; }
.gate.gx .gx-cap { margin: 14px 2px 0; font-size: 12.5px; color: var(--p-faint); line-height: 1.5; }

/* Tablet and phone: the card comes first and fits; the story (and the Wire row) follow below it. No sideways scroll. */
@media (max-width: 1079px) {
  .gate.gx .gx-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 48px; padding-top: 28px; }
  .gate.gx .auth-card.gx-card { order: -1; justify-self: center; max-width: 460px; }
  .gate.gx .gx-story { width: 100%; max-width: 600px; }
}
@media (max-width: 600px) {
  .gate.gx .gx-top { height: 60px; padding: 0 16px; }
  .gate.gx .gx-brand img { width: 34px; }
  .gate.gx .gx-brand b { font-size: 23px; }
  .gate.gx .gx-back { font-size: 13px; }
  .gate.gx .gx-stage { padding: 14px 16px 24px; gap: 40px; }
  .gate.gx .auth-card.gx-card { padding: 20px 20px 20px; border-radius: 22px; }
  .gate.gx .gx-switch { margin-bottom: 20px; }
  .gate.gx .gx-card h1 { font-size: 30px; }
  .gate.gx .gx-card .auth-sub { font-size: 14.5px; }
  .gate.gx .gx-google { margin-top: 16px; }
  .gate.gx .gx-or { margin-top: 14px; }
  .gate.gx .gx-card form label { margin-top: 12px; }
  .gate.gx .gx-card .auth-row { row-gap: 0; }
  .gate.gx .gx-card form input:not([type=checkbox]) { height: 46px; }
  .gate.gx .gx-card .gx-go { margin-top: 18px; }
  .gate.gx .gx-eyebrow { margin-bottom: 18px; }
  .gate.gx .gx-head { font-size: 44px; line-height: 1; }
  .gate.gx .gx-lede { font-size: 16.5px; margin-top: 14px; }
  .gate.gx .gx-glimpse { margin-top: 26px; }
  .gate.gx .gx-wire { padding: 16px 16px 18px; border-radius: 18px; }
  .gate.gx .gx-w-co { gap: 10px; }
  .gate.gx .gx-w-name { font-size: 13px; }
  .gate.gx .gx-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .gate.gx .gx-lane { padding: 10px 10px 11px; }
  .gate.gx .gx-l-v { font-size: 22px; line-height: 28px; }
  .gate.gx .gx-chg { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; padding: 6px 0 0 2px; }
  .gate.gx .gx-foot { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 16px 26px; }
}
@media (max-width: 360px) { .gate.gx .gx-w-name { display: none; } .gate.gx .gx-card h1 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) {
  .gate.gx .gx-story > *, .gate.gx .auth-card.gx-card, .gate.gx .gx-first .gx-switch, .gate.gx .gx-first .gx-body > *,
  .gate.gx .gx-first .gx-body form > * { animation: none !important; }
  .gate.gx .gx-knob, .gate.gx .gx-switch button, .gate.gx .gx-card .gx-go { transition: none; }
}

/* Short laptop screens (1366x768, 1280x720 and the like): the whole card, its Sign in button included, above the fold. */
@media (min-width: 601px) and (max-height: 760px) {
  .gate.gx .gx-top { height: 60px; }
  .gate.gx .gx-stage { padding-top: 16px; padding-bottom: 16px; }
  .gate.gx .auth-card.gx-card { padding-top: 22px; padding-bottom: 20px; }
  .gate.gx .gx-switch { margin-bottom: 18px; }
  .gate.gx .gx-card h1 { font-size: 30px; }
  .gate.gx .gx-google { min-height: 44px; margin-top: 16px; }
  .gate.gx .gx-or { margin-top: 14px; }
  .gate.gx .gx-card form label { margin-top: 10px; }
  .gate.gx .gx-card form input:not([type=checkbox]) { height: 44px; }
  .gate.gx .gx-card .auth-check { margin-top: 12px !important; }
  .gate.gx .gx-card .gx-go { min-height: 48px; margin-top: 16px; }
}