/*
 * IPO GMP Status — visual system.
 *
 * Two vocabularies, kept strictly apart:
 *
 *   INDIGO is the brand. The wordmark, the primary button, links, focus rings,
 *   the selected chip. It never reports a number.
 *
 *   The data palette means one thing each, and nothing else uses these:
 *     emerald  premium up / open for subscription
 *     rose     premium down
 *     red      closing today — the one deadline you can still act on
 *     amber    demand rating, and a weakly-sourced figure
 *     blue     upcoming, not yet open
 *     violet   already listed
 *
 * Keeping them apart is what lets the page be colourful without a reader
 * having to ask whether a colour is decoration or information.
 *
 * Surfaces are soft: a hairline plus a wide, low-opacity indigo shadow, on
 * 16px radii, over a faintly violet ground.
 *
 * Numbers are the product. They are set in tabular mono, and the table is dense
 * on purpose: small cells that wrap, so every column fits rather than running
 * off the edge. Rows carry no wash at all — the stage shows as a coloured edge
 * and a letter badge, which is enough, and a tint across a row only dulls the
 * figures on it.
 */

/* ---- tokens: light is the base set --------------------------------------- */
:root {
  /* Slate, cooled towards indigo — the neutrals sit under the brand hue rather
     than fighting it. */
  --bg: #f5f7ff;
  --panel: #ffffff;
  --panel-2: #f6f7fc;
  --panel-3: #eceefa;
  --line: #e2e5f2;
  --line-2: #eef0f8;

  --ink: #1e1b4b;
  --ink-2: #64748b;
  --ink-3: #94a3b8;

  /* Chrome carries the brand indigo. Data keeps its own vocabulary below, so
     the two never collide: nothing on this page is indigo *because of* a
     number, and nothing is emerald because of the brand. */
  --chrome: #4f46e5;
  --chrome-ink: #ffffff;
  --chrome-soft: rgba(79, 70, 229, 0.10);
  /* Letters that sit ON the brand gradient — the logo tile and the primary
     button. Not the same thing as --chrome-ink: that one sits on --chrome,
     which is dark in every scheme, while the gradient can be pale. White here
     unless a scheme says otherwise. */
  --brand-ink: #ffffff;
  --brand: #4f46e5;
  --brand-2: #6366f1;
  --brand-3: #a855f7;
  --brand-pink: #ec4899;

  /* The one interactive accent — links, focus, selected controls. */
  --accent: #4f46e5;
  --accent-bg: rgba(79, 70, 229, 0.10);

  --up: #047857;
  --up-bg: rgba(16, 185, 129, 0.12);
  /* Text laid ON the emerald itself — light mode's green is dark, so it takes
     white; dark mode's is a bright mint, so it takes near-black. */
  --up-ink: #ffffff;
  --down: #be123c;
  --down-bg: rgba(225, 29, 72, 0.11);
  --warn: #b45309;
  --warn-bg: rgba(245, 158, 11, 0.14);
  /* The demand meter's own colour, and its own token on purpose. It used to
     borrow --warn, which also paints the disclaimer strip, the captcha badge
     and a failed allotment check — so recolouring the meter recoloured three
     unrelated things. A deeper red than --urgent below, because that one means
     "closing tonight" and a meter is not a deadline. */
  --meter: #b91c1c;
  /* Closing today: a deadline, not a fallen premium — its own red. */
  --urgent: #dc2626;
  --urgent-bg: rgba(220, 38, 38, 0.12);
  --soon: #1d4ed8;
  --soon-bg: rgba(59, 130, 246, 0.12);
  --done: #7e22ce;
  --done-bg: rgba(168, 85, 247, 0.12);

  --radius: 16px;
  --radius-sm: 10px;
  --lift: 0 4px 20px rgba(30, 27, 75, 0.05), 0 10px 25px rgba(79, 70, 229, 0.06);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* Dark is a true slate, not a dimmed grey: the panels sit above the page
   rather than dissolving into it, and every semantic hue is re-picked for
   contrast against a dark ground instead of being reused from light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #818cf8;
    --brand-2: #a5b4fc;
    --brand-3: #c084fc;
    --brand-pink: #f472b6;
    --bg: #0b0b1a;
    --panel: #14142b;
    --panel-2: #1c1c3a;
    --panel-3: #272750;
    --line: #2d2d5c;
    --line-2: #212142;

    --ink: #eef0fb;
    --ink-2: #a5b0cc;
    --ink-3: #7c86a8;

    --chrome: #6366f1;
    --chrome-ink: #ffffff;
    --chrome-soft: rgba(129, 140, 248, 0.16);

    --accent: #a5b4fc;
    --accent-bg: rgba(129, 140, 248, 0.18);

    --up: #34d399;
    --up-bg: rgba(52, 211, 153, 0.14);
    --up-ink: #052015;
    --down: #fb7185;
    --down-bg: rgba(251, 113, 133, 0.14);
    --warn: #fbbf24;
    --warn-bg: rgba(251, 191, 36, 0.15);
    --meter: #f05252;
    --urgent: #f87171;
    --urgent-bg: rgba(248, 113, 113, 0.16);
    --soon: #60a5fa;
    --soon-bg: rgba(96, 165, 250, 0.15);
    --done: #c084fc;
    --done-bg: rgba(192, 132, 252, 0.15);

    --lift: 0 4px 20px rgba(0, 0, 0, 0.45), 0 10px 25px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --brand: #818cf8;
  --brand-2: #a5b4fc;
  --brand-3: #c084fc;
  --brand-pink: #f472b6;
  --up-ink: #05201a;
  --bg: #0b0b1a;
  --panel: #14142b;
  --panel-2: #1c1c3a;
  --panel-3: #272750;
  --line: #2d2d5c;
  --line-2: #212142;

  --ink: #eef0fb;
  --ink-2: #a5b0cc;
  --ink-3: #7c86a8;

  --chrome: #6366f1;
  --chrome-ink: #ffffff;
  --chrome-soft: rgba(129, 140, 248, 0.16);

  --accent: #a5b4fc;
  --accent-bg: rgba(129, 140, 248, 0.18);

  --up: #34d399;
  --up-bg: rgba(52, 211, 153, 0.14);
  --up-ink: #052015;
  --down: #fb7185;
  --down-bg: rgba(251, 113, 133, 0.14);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.15);
  --meter: #f05252;
  --urgent: #f87171;
  --urgent-bg: rgba(248, 113, 113, 0.16);
  --soon: #60a5fa;
  --soon-bg: rgba(96, 165, 250, 0.15);
  --done: #c084fc;
  --done-bg: rgba(192, 132, 252, 0.15);

  --lift: 0 4px 20px rgba(0, 0, 0, 0.45), 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* ---- palettes ------------------------------------------------------------
 * Six schemes, switched by data-palette on <html>. Each carries its own
 * brand colours, ink scale and surfaces — so the text, the hairlines and the
 * panels all shift with the theme, not just the buttons.
 *
 * What does NOT shift: the data palette above (emerald up, rose down, red
 * closing, blue upcoming, violet listed). A figure's colour has to mean the
 * same thing whichever theme is on, or every table would need re-learning.
 *
 * Each scheme needs three blocks, not two: the dark steps apply both when dark
 * is CHOSEN (data-theme="dark") and when it is merely the system default (no
 * data-theme at all) — and the second must sit inside the media query, or it
 * would repaint light mode too.
 * -------------------------------------------------------------------------- */

/* blue — Royal blue for trust, mint for growth, cyan for the button. Text is a cool slate, so the whole page reads blue-leaning. */
:root[data-palette="blue"] {
  --brand: #1e3a8a;
  --brand-2: #2563eb;
  --brand-3: #06b6d4;
  --brand-pink: #10b981;
  --chrome: #1e3a8a;
  --chrome-soft: rgba(30, 58, 138, 0.10);
  --accent: #1d4ed8;
  --accent-bg: rgba(29, 78, 216, 0.10);
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-2: #f1f5f9;
  --panel-3: #e2e8f0;
  --line: #e2e8f0;
  --line-2: #f1f5f9;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #94a3b8;
  --lift: 0 4px 20px rgba(15, 23, 42, 0.05), 0 10px 25px rgba(30, 58, 138, 0.06);
  --bar-main: #1d4ed8;
  --bar-sme: #0d9488;
}
:root[data-palette="blue"][data-theme="dark"] {
  --brand: #60a5fa;
  --brand-2: #38bdf8;
  --brand-3: #22d3ee;
  --brand-pink: #34d399;
  --chrome: #2563eb;
  --chrome-soft: rgba(56, 189, 248, 0.16);
  --accent: #93c5fd;
  --accent-bg: rgba(147, 197, 253, 0.16);
  --bg: #060d1a;
  --panel: #0e1a2e;
  --panel-2: #16263f;
  --panel-3: #1f3552;
  --line: #23394f;
  --line-2: #182a42;
  --ink: #e8f0fb;
  --ink-2: #9db2cc;
  --ink-3: #728aa6;
  --lift: 0 4px 20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.32);
  --bar-main: #60a5fa;
  --bar-sme: #2dd4bf;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="blue"]:not([data-theme="light"]) {
    --brand: #60a5fa;
    --brand-2: #38bdf8;
    --brand-3: #22d3ee;
    --brand-pink: #34d399;
    --chrome: #2563eb;
    --chrome-soft: rgba(56, 189, 248, 0.16);
    --accent: #93c5fd;
    --accent-bg: rgba(147, 197, 253, 0.16);
    --bg: #060d1a;
    --panel: #0e1a2e;
    --panel-2: #16263f;
    --panel-3: #1f3552;
    --line: #23394f;
    --line-2: #182a42;
    --ink: #e8f0fb;
    --ink-2: #9db2cc;
    --ink-3: #728aa6;
    --lift: 0 4px 20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.32);
    --bar-main: #60a5fa;
    --bar-sme: #2dd4bf;
  }
}

/* violet — The fintech look, with orange as the call to action. Text is a deep violet ink rather than plain black. */
:root[data-palette="violet"] {
  --brand: #7c3aed;
  --brand-2: #a855f7;
  --brand-3: #ec4899;
  --brand-pink: #ec4899;
  --chrome: #7c3aed;
  --chrome-soft: rgba(124, 58, 237, 0.10);
  --accent: #be185d;
  --accent-bg: rgba(190, 24, 93, 0.10);
  --bg: #f3f4f6;
  --panel: #ffffff;
  --panel-2: #f8f7fc;
  --panel-3: #f0edf9;
  --line: #e7e5ee;
  --line-2: #f2f0f7;
  --ink: #2e1065;
  --ink-2: #5b5570;
  --ink-3: #9b95ab;
  --lift: 0 4px 20px rgba(46, 16, 101, 0.05), 0 10px 25px rgba(124, 58, 237, 0.07);
  --bar-main: #7c3aed;
  --bar-sme: #db2777;
}
:root[data-palette="violet"][data-theme="dark"] {
  --brand: #a78bfa;
  --brand-2: #c084fc;
  --brand-3: #f472b6;
  --brand-pink: #f472b6;
  --chrome: #7c3aed;
  --chrome-soft: rgba(167, 139, 250, 0.16);
  --accent: #f472b6;
  --accent-bg: rgba(244, 114, 182, 0.18);
  --bg: #120d1c;
  --panel: #1b1429;
  --panel-2: #251b36;
  --panel-3: #332548;
  --line: #372a4d;
  --line-2: #241a35;
  --ink: #f0eafb;
  --ink-2: #b3a6c9;
  --ink-3: #8479a0;
  --lift: 0 4px 20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.32);
  --bar-main: #a78bfa;
  --bar-sme: #f472b6;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="violet"]:not([data-theme="light"]) {
    --brand: #a78bfa;
    --brand-2: #c084fc;
    --brand-3: #f472b6;
    --brand-pink: #f472b6;
    --chrome: #7c3aed;
    --chrome-soft: rgba(167, 139, 250, 0.16);
    --accent: #f472b6;
    --accent-bg: rgba(244, 114, 182, 0.18);
    --bg: #120d1c;
    --panel: #1b1429;
    --panel-2: #251b36;
    --panel-3: #332548;
    --line: #372a4d;
    --line-2: #241a35;
    --ink: #f0eafb;
    --ink-2: #b3a6c9;
    --ink-3: #8479a0;
    --lift: 0 4px 20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.32);
    --bar-main: #a78bfa;
    --bar-sme: #f472b6;
  }
}

/* navy — Near-black navy for text and headings, gold for what to act on, electric blue for links, over a warm cream ground. */
:root[data-palette="navy"] {
  --brand: #0f172a;
  --brand-2: #334155;
  --brand-3: #eab308;
  --brand-pink: #eab308;
  --chrome: #0f172a;
  --chrome-soft: rgba(15, 23, 42, 0.09);
  --accent: #854d0e;
  --accent-bg: rgba(133, 77, 14, 0.11);
  --bg: #fefce8;
  --panel: #ffffff;
  --panel-2: #fdfcf0;
  --panel-3: #f7f4df;
  --line: #e9e5cf;
  --line-2: #f4f1e2;
  --ink: #0f172a;
  --ink-2: #57534e;
  --ink-3: #a8a29e;
  --lift: 0 4px 20px rgba(15, 23, 42, 0.06), 0 10px 25px rgba(120, 100, 20, 0.07);
  --bar-main: #334155;
  --bar-sme: #a16207;
}
:root[data-palette="navy"][data-theme="dark"] {
  --brand: #e2e8f0;
  --brand-2: #cbd5e1;
  --brand-3: #facc15;
  --brand-pink: #facc15;
  --chrome: #334155;
  /* --brand is a pale step here, so white letters on the brand gradient
     vanish. Dark ones instead — the reason --brand-ink exists. */
  --brand-ink: #0f172a;
  --chrome-soft: rgba(226, 232, 240, 0.12);
  --accent: #facc15;
  --accent-bg: rgba(250, 204, 21, 0.16);
  --bg: #0d0d08;
  --panel: #181811;
  --panel-2: #22221a;
  --panel-3: #2f2f23;
  --line: #333326;
  --line-2: #25251b;
  --ink: #f5f3e6;
  --ink-2: #b5b1a0;
  --ink-3: #87836f;
  --lift: 0 4px 20px rgba(0, 0, 0, 0.55), 0 10px 25px rgba(0, 0, 0, 0.35);
  --bar-main: #94a3b8;
  --bar-sme: #eab308;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="navy"]:not([data-theme="light"]) {
    --brand: #e2e8f0;
    --brand-2: #cbd5e1;
    --brand-3: #facc15;
    --brand-pink: #facc15;
    --chrome: #334155;
    --brand-ink: #0f172a;
    --chrome-soft: rgba(226, 232, 240, 0.12);
    --accent: #facc15;
    --accent-bg: rgba(250, 204, 21, 0.16);
    --bg: #0d0d08;
    --panel: #181811;
    --panel-2: #22221a;
    --panel-3: #2f2f23;
    --line: #333326;
    --line-2: #25251b;
    --ink: #f5f3e6;
    --ink-2: #b5b1a0;
    --ink-3: #87836f;
    --lift: 0 4px 20px rgba(0, 0, 0, 0.55), 0 10px 25px rgba(0, 0, 0, 0.35);
    --bar-main: #94a3b8;
    --bar-sme: #eab308;
  }
}

/* saffron — Deep petrol teal with saffron, over warm ivory. Links stay petrol
   in light mode (well clear of the emerald that means "up"); in dark they turn
   saffron, since a pale teal would read as a gain. */
:root[data-palette="saffron"] {
  --brand: #0b4f5c;
  --brand-2: #0e7c86;
  --brand-3: #f97316;
  --brand-pink: #f97316;
  --chrome: #0b4f5c;
  --chrome-soft: rgba(11, 79, 92, 0.10);
  --accent: #0e6a7d;
  --accent-bg: rgba(14, 106, 125, 0.10);
  --bg: #fbf8f3;
  --panel: #ffffff;
  --panel-2: #f7f3ec;
  --panel-3: #efe8dc;
  --line: #ebe3d6;
  --line-2: #f5f0e8;
  --ink: #10282d;
  --ink-2: #4f5f62;
  --ink-3: #96a2a4;
  --lift: 0 4px 20px rgba(16, 40, 45, 0.05), 0 10px 25px rgba(11, 79, 92, 0.07);
  --bar-main: #0e7c86;
  --bar-sme: #ea580c;
}
:root[data-palette="saffron"][data-theme="dark"] {
  --brand: #5fc4cf;
  --brand-2: #3fb0bb;
  --brand-3: #fb923c;
  --brand-pink: #fb923c;
  --chrome: #0e7c86;
  --brand-ink: #062a2f;
  --chrome-soft: rgba(95, 196, 207, 0.14);
  --accent: #fdba74;
  --accent-bg: rgba(253, 186, 116, 0.15);
  --bg: #061416;
  --panel: #0c1f22;
  --panel-2: #13292d;
  --panel-3: #1b373c;
  --line: #20393d;
  --line-2: #15292c;
  --ink: #e6f4f2;
  --ink-2: #9fbab7;
  --ink-3: #6f8c89;
  --lift: 0 4px 20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.32);
  --bar-main: #3fb0bb;
  --bar-sme: #fb923c;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="saffron"]:not([data-theme="light"]) {
    --brand: #5fc4cf;
    --brand-2: #3fb0bb;
    --brand-3: #fb923c;
    --brand-pink: #fb923c;
    --chrome: #0e7c86;
    --brand-ink: #062a2f;
    --chrome-soft: rgba(95, 196, 207, 0.14);
    --accent: #fdba74;
    --accent-bg: rgba(253, 186, 116, 0.15);
    --bg: #061416;
    --panel: #0c1f22;
    --panel-2: #13292d;
    --panel-3: #1b373c;
    --line: #20393d;
    --line-2: #15292c;
    --ink: #e6f4f2;
    --ink-2: #9fbab7;
    --ink-3: #6f8c89;
    --lift: 0 4px 20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.32);
    --bar-main: #3fb0bb;
    --bar-sme: #fb923c;
  }
}

/* mocha — Espresso and rose gold over latte cream: warm, quiet, and unlike
   anything blue. Links are copper. */
:root[data-palette="mocha"] {
  --brand: #3b2418;
  --brand-2: #7c4a32;
  --brand-3: #d4917a;
  --brand-pink: #d4917a;
  --chrome: #3b2418;
  --chrome-soft: rgba(59, 36, 24, 0.09);
  --accent: #9c4a2f;
  --accent-bg: rgba(156, 74, 47, 0.10);
  --bg: #faf6f1;
  --panel: #fffdfa;
  --panel-2: #f6efe7;
  --panel-3: #ede2d5;
  --line: #e8ddd0;
  --line-2: #f3ece3;
  --ink: #2a1a12;
  --ink-2: #6b5a50;
  --ink-3: #a8978b;
  --lift: 0 4px 20px rgba(42, 26, 18, 0.06), 0 10px 25px rgba(124, 74, 50, 0.07);
  --bar-main: #7c4a32;
  --bar-sme: #c9826a;
}
:root[data-palette="mocha"][data-theme="dark"] {
  --brand: #e8c2a8;
  --brand-2: #d9a68c;
  --brand-3: #f0b8a4;
  --brand-pink: #f0b8a4;
  --chrome: #5a3a2a;
  --brand-ink: #2a1a12;
  --chrome-soft: rgba(232, 194, 168, 0.12);
  --accent: #f0b8a4;
  --accent-bg: rgba(240, 184, 164, 0.15);
  --bg: #120c09;
  --panel: #1c1410;
  --panel-2: #261b16;
  --panel-3: #33251e;
  --line: #382a22;
  --line-2: #251a15;
  --ink: #f6ece4;
  --ink-2: #c2ad9f;
  --ink-3: #8f7a6c;
  --lift: 0 4px 20px rgba(0, 0, 0, 0.55), 0 10px 25px rgba(0, 0, 0, 0.35);
  --bar-main: #d9a68c;
  --bar-sme: #f0b8a4;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="mocha"]:not([data-theme="light"]) {
    --brand: #e8c2a8;
    --brand-2: #d9a68c;
    --brand-3: #f0b8a4;
    --brand-pink: #f0b8a4;
    --chrome: #5a3a2a;
    --brand-ink: #2a1a12;
    --chrome-soft: rgba(232, 194, 168, 0.12);
    --accent: #f0b8a4;
    --accent-bg: rgba(240, 184, 164, 0.15);
    --bg: #120c09;
    --panel: #1c1410;
    --panel-2: #261b16;
    --panel-3: #33251e;
    --line: #382a22;
    --line-2: #251a15;
    --ink: #f6ece4;
    --ink-2: #c2ad9f;
    --ink-3: #8f7a6c;
    --lift: 0 4px 20px rgba(0, 0, 0, 0.55), 0 10px 25px rgba(0, 0, 0, 0.35);
    --bar-main: #d9a68c;
    --bar-sme: #f0b8a4;
  }
}

/* aurora — Midnight ink with a northern-lights sweep from aqua to lilac, over a
   cool mist. Links are indigo; dark mode is near-black blue with glowing aqua. */
:root[data-palette="aurora"] {
  --brand: #142850;
  --brand-2: #0891b2;
  --brand-3: #8b5cf6;
  --brand-pink: #c084fc;
  --chrome: #142850;
  --chrome-soft: rgba(20, 40, 80, 0.10);
  --accent: #4338ca;
  --accent-bg: rgba(67, 56, 202, 0.10);
  --bg: #f5f7fc;
  --panel: #ffffff;
  --panel-2: #eef2fa;
  --panel-3: #e1e8f5;
  --line: #e0e6f2;
  --line-2: #eef2f9;
  --ink: #0f1733;
  --ink-2: #4a5578;
  --ink-3: #94a0bd;
  --lift: 0 4px 20px rgba(15, 23, 51, 0.05), 0 10px 25px rgba(20, 40, 80, 0.07);
  --bar-main: #0891b2;
  --bar-sme: #8b5cf6;
}
:root[data-palette="aurora"][data-theme="dark"] {
  --brand: #67e8f9;
  --brand-2: #22d3ee;
  --brand-3: #c4b5fd;
  --brand-pink: #d8b4fe;
  --chrome: #1d2f6f;
  --brand-ink: #0b1230;
  --chrome-soft: rgba(103, 232, 249, 0.14);
  --accent: #a5b4fc;
  --accent-bg: rgba(165, 180, 252, 0.16);
  --bg: #050a1a;
  --panel: #0b1430;
  --panel-2: #121d3d;
  --panel-3: #1b2850;
  --line: #1f2c52;
  --line-2: #141f3f;
  --ink: #e7ecff;
  --ink-2: #a3add0;
  --ink-3: #717ca3;
  --lift: 0 4px 20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.32);
  --bar-main: #22d3ee;
  --bar-sme: #c4b5fd;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="aurora"]:not([data-theme="light"]) {
    --brand: #67e8f9;
    --brand-2: #22d3ee;
    --brand-3: #c4b5fd;
    --brand-pink: #d8b4fe;
    --chrome: #1d2f6f;
    --brand-ink: #0b1230;
    --chrome-soft: rgba(103, 232, 249, 0.14);
    --accent: #a5b4fc;
    --accent-bg: rgba(165, 180, 252, 0.16);
    --bg: #050a1a;
    --panel: #0b1430;
    --panel-2: #121d3d;
    --panel-3: #1b2850;
    --line: #1f2c52;
    --line-2: #141f3f;
    --ink: #e7ecff;
    --ink-2: #a3add0;
    --ink-3: #717ca3;
    --lift: 0 4px 20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.32);
    --bar-main: #22d3ee;
    --bar-sme: #c4b5fd;
  }
}

/* sky — Sky blue, violet and mint, the default: a cool blue chrome, violet for
   links and the second series, mint as the third colour. */
:root[data-palette="sky"] {
  --brand: #2563eb;
  --brand-2: #3b82f6;
  --brand-3: #8b5cf6;
  --brand-pink: #10b981;
  --chrome: #2563eb;
  --chrome-soft: rgba(59, 130, 246, 0.11);
  --accent: #4f46e5;
  --accent-bg: rgba(79, 70, 229, 0.10);
  --bg: #f7f8ff;
  --panel: #ffffff;
  --panel-2: #f3f5ff;
  --panel-3: #e8ecfb;
  --line: #e3e7f6;
  --line-2: #f0f2fb;
  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #9ca3af;
  --lift: 0 4px 20px rgba(17, 24, 39, 0.05), 0 10px 25px rgba(59, 130, 246, 0.07);
  --bar-main: #3b82f6;
  --bar-sme: #8b5cf6;
}
:root[data-palette="sky"][data-theme="dark"] {
  --brand: #60a5fa;
  --brand-2: #60a5fa;
  --brand-3: #a78bfa;
  --brand-pink: #34d399;
  --chrome: #2563eb;
  --brand-ink: #0b1020;
  --chrome-soft: rgba(96, 165, 250, 0.15);
  --accent: #a5b4fc;
  --accent-bg: rgba(165, 180, 252, 0.16);
  --bg: #0a0d18;
  --panel: #111627;
  --panel-2: #182036;
  --panel-3: #222c47;
  --line: #263150;
  --line-2: #1a2238;
  --ink: #e8ecff;
  --ink-2: #a5afcf;
  --ink-3: #737ea3;
  --lift: 0 4px 20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.32);
  --bar-main: #60a5fa;
  --bar-sme: #a78bfa;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="sky"]:not([data-theme="light"]) {
    --brand: #60a5fa;
    --brand-2: #60a5fa;
    --brand-3: #a78bfa;
    --brand-pink: #34d399;
    --chrome: #2563eb;
    --brand-ink: #0b1020;
    --chrome-soft: rgba(96, 165, 250, 0.15);
    --accent: #a5b4fc;
    --accent-bg: rgba(165, 180, 252, 0.16);
    --bg: #0a0d18;
    --panel: #111627;
    --panel-2: #182036;
    --panel-3: #222c47;
    --line: #263150;
    --line-2: #1a2238;
    --ink: #e8ecff;
    --ink-2: #a5afcf;
    --ink-3: #737ea3;
    --lift: 0 4px 20px rgba(0, 0, 0, 0.5), 0 10px 25px rgba(0, 0, 0, 0.32);
    --bar-main: #60a5fa;
    --bar-sme: #a78bfa;
  }
}

/* ---- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  /* A ground that shifts very slightly across the page rather than one flat
     grey — it is what stops a white panel from reading as a cut-out. */
  background: linear-gradient(135deg, var(--bg) 0%, var(--panel) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Centred, and wide enough for the whole overview without stretching it across
   a large monitor. Past this the page keeps its margins rather than growing —
   a 1900px-wide table of thirteen columns is a worse read, not a better one.
   Narrower than this and the table trims its own columns. */
.wrap { width: min(1440px, calc(100% - clamp(24px, 3vw, 48px))); margin-inline: auto; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px; top: 8px;
  background: var(--chrome);
  color: var(--chrome-ink);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  z-index: 200;
}
/* Shown only to a keyboard (Tab) — the people it is for — never on a click
   or a tap, and then below the tape as a neat pill rather than over it. */
.skip-link:focus { left: -9999px; }
.skip-link:focus-visible {
  left: 16px;
  top: calc(var(--tape-h, 36px) + 10px);
  outline: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand) 70%);
  color: var(--brand-ink);
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.5);
  text-decoration: none;
}

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

button, input, select { font: inherit; color: inherit; }

.num { text-align: right; }

/* Every figure on the page: same font, same column width per digit. */
.snap-v, .tally,
.tbl td.num, .tbl td.col-n, .tick {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- premium tape -------------------------------------------------------- */
/* The tape used to be a fixed near-black strip in both themes — the one band on
   the page that ignored the theme, and in light mode it read as a black bar
   pasted above a white page. It now follows the page like every other surface,
   and the tag carries the emerald that already means "premium" here. */
/* The tape stays at the very top while the page scrolls, and the header sits
   pinned right under it: --tape-h is the tape's height, measured at 38px. */
:root { --tape-h: 38px; }
html { scroll-padding-top: calc(var(--tape-h) + 80px); }
.tape {
  position: sticky;
  top: 0;
  z-index: 101;
  display: flex;
  align-items: stretch;
  background: var(--panel);
  color: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.tape-tag {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--up);
  color: var(--up-ink);
  padding: 0 15px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.tape-view { overflow: hidden; flex: 1; }
.tape-run {
  display: flex;
  gap: 30px;
  padding: 9px 0;
  white-space: nowrap;
  width: max-content;
  animation: tape 70s linear infinite;
}
.tape-run:hover { animation-play-state: paused; }
@keyframes tape {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.tick {
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}
.tick b { color: var(--ink); font-weight: 600; }
.tick .up { color: var(--up); }
.tick .down { color: var(--down); }
.tick .flat { color: var(--ink-3); }

/* ---- header -------------------------------------------------------------- */
/* Translucent rather than solid: the rows scrolling under it stay faintly
   visible, which reads as one continuous page instead of a lid on top of it.
   The opaque colour is the fallback where backdrop-filter is unsupported. */
.head {
  position: sticky;
  top: var(--tape-h);
  z-index: 100;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .head {
    background: color-mix(in srgb, var(--panel) 82%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
  }
}
/* The gap and the controls give ground as the screen narrows, so the header
   row fits a 320px phone without a breakpoint deciding when. */
.head-in {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 20px);
  height: 64px;
  min-width: 0;
}
.head-in .brand { flex: none; }
.head-in .nav { min-width: 0; }
.head-in .icon-btn { flex: none; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.03em;
}
.brand-mark {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  /* Not a hardcoded white: a scheme whose --brand is a pale step — navy's dark
     mode is near-white on charcoal — needs dark letters on this fill, or the
     word disappears into the gradient. The token is white everywhere else. */
  color: var(--brand-ink);
  padding: 5px 9px;
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  /* Another fixed indigo glow left over from the old default brand. */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}
.brand-word { color: var(--ink); }

.nav { display: flex; gap: 2px; margin-right: auto; }

/* The icon is for the phone bar; on a desktop the words are the navigation and
   an icon beside each one is decoration. */
.nav-i { display: none; }

/* ---- the phone's bottom bar ----------------------------------------------
 * Five sections will not fit a phone header — brand, five links and two icon
 * buttons want about 510px — and they should not have to. Navigation belongs
 * at the bottom of a phone because that is where the thumb is, which is what
 * every app on the device already does. Installed to the home screen this is
 * the difference between a page and an app.
 *
 * Fixed, not sticky: it is the one control that must never require a scroll to
 * reach.
 * -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* The header's blur has to go here, and this is not cosmetic: backdrop-filter
     makes an element a containing block for fixed descendants, so the bar below
     was pinning itself to the bottom of the HEADER rather than the screen and
     sat under the logo. The header is 46px of solid panel on a phone; nothing
     is lost. */
  .head {
    backdrop-filter: none;
    background: var(--panel);
  }

  .nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    margin: 0;
    gap: 0;
    padding: 6px 4px;
    /* The home-indicator strip on a modern phone sits under the bar; without
       this the last row of it eats the labels. */
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06);
  }
  .nav-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .nav-i { display: block; width: 21px; height: 21px; }
  /* The label under the icon, and never wrapped: "Subscription" on a fifth of
     a 390px screen has 76px, so it is allowed to shrink rather than break. */
  .nav-t {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* "Live GMP", "Subscription" and "Allotment" do not fit a fifth of a 390px
     screen, and a bar of "Subscr…" reads worse than a shorter word chosen on
     purpose. The long label is the one a desktop and a screen reader get; this
     is the phone's. */
  .nav-t { display: none; }
  .nav-btn::after {
    content: attr(data-short);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The page has to end above the bar, or the last row of every list is behind
     it — including the footer, which is where the disclaimer lives. */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  /* The detail panel is above the bar and covers it, so it does not need the
     same gap twice. */
  .sheet { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
.nav-btn {
  background: none;
  border: 0;
  padding: 8px clamp(9px, 1.2vw, 15px);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-weight: 600;
  font-size: clamp(13.5px, 1vw, 14px);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
.nav-btn:hover { background: var(--panel-2); color: var(--ink); }
.nav-btn.is-on { background: var(--chrome); color: var(--chrome-ink); }

/* The phone's bar marks the current section with colour instead of a filled
   pill — five pills across a bar is a block of brand where a mark will do.
   This sits after the rule above rather than inside the earlier media query,
   because that one comes first in the file and would lose to it. */
@media (max-width: 860px) {
  /* The desktop padding and size above would otherwise win here too, and with
     six sections a sixth of a 390px bar cannot spare 18px of it: "Demand" was
     cut to "Dem…". */
  .nav-btn { padding: 6px 1px; font-size: 11px; }
  .nav-btn.is-on { background: none; color: var(--accent); }
  .nav-btn.is-on .nav-i { stroke-width: 2.1; }
}

/* The green dot in the hero's LIVE badge. */
.stamp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 3px var(--up-bg);
  flex: none;
}

.icon-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: clamp(32px, 3vw, 36px); height: clamp(32px, 3vw, 36px);
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  flex: none;
  transition: border-color 0.13s, color 0.13s;
}
.icon-btn:hover { border-color: var(--ink-3); color: var(--ink); }

/* The way to the account from every page — see acct-nav.js. A pill with a
   word on a wide screen; on a phone the header has no room, so the icon. */
.acct-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: clamp(32px, 3vw, 36px);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font: 600 12.5px var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.13s, color 0.13s, background 0.13s;
}
.acct-link:hover { border-color: var(--accent); color: var(--accent); }
.acct-link.is-in { background: var(--accent-bg); border-color: transparent; color: var(--accent); }
.acct-link-i { width: 17px; height: 17px; flex: none; }
.acct-link-t { font-family: var(--sans); }
.acct-link.is-in .acct-link-t { font-family: var(--mono); font-weight: 500; }
@media (max-width: 860px) {
  .acct-link { width: 32px; padding: 0; justify-content: center; }
  .acct-link-t { display: none; }
}

/* ---- hero ---------------------------------------------------------------- */
/* The headline states the day, and under it four tiles answer "what's hot, what
   can I still bid on, what closes tonight" before a reader scrolls at all. The
   ground carries one soft wash so the band separates from the page without
   needing a second border. */

/* The half of the headline that carries the brand, filled with the ramp rather
   than a flat colour. The plain colour is the fallback where the clip is
   unsupported, so the word is never invisible. */
.highlight {
  color: var(--brand);
  background: linear-gradient(90deg, var(--brand-2), var(--brand-pink));
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-text-fill-color: transparent) {
  .highlight { -webkit-text-fill-color: transparent; }
}

.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: var(--brand-ink);
  border: 0;
  /* Was a fixed indigo glow, left behind from an older default brand — under
     navy's gold button it read as a stray blue halo. A plain shadow belongs to
     whichever scheme is on. */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}
.btn-secondary {
  background: var(--panel);
  color: var(--brand);
  border: 1px solid var(--chrome-soft);
}
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px); }
.btn-secondary:hover { border-color: var(--brand-2); }

/* flex-basis 0, not auto: on auto the column takes the width of its longest
   label, so one "SpectraA Technology Solutions" pushes the rest off the strip.
   At 0 they share the row evenly and the label wraps inside whatever it gets. */

/* Bar colour carries the BOARD, not the rank — the same pair the MAINBOARD/SME
   tag wears beside the name in the table, so the two readings of the same fact
   match. Each scheme defines its own pair, up with the rest of its tokens: this
   is the one chart on the page, and a bar that kept the same two colours in
   every scheme was the one thing on it that ignored the theme.
 *
 * A HISTORY WORTH KEEPING, because the obvious choice was wrong twice.
 *
 * It began as violet and blue in every scheme, said to be separated by
 * lightness. Measured, it was not: ΔE 5.4 under deuteranopia in light and 0.9
 * in dark — a red-green colour-blind reader saw ONE colour in the dark, legend
 * or no legend.
 *
 * The fix was a cool pole against a warm one, which survives every form of it,
 * and the warm pole was a bronze rather than an orange because the SME chip
 * sits in the same table cell as the red CT badge and orange against that red
 * measured ΔE 12.5, under the 15 an ordinary reader needs. That was correct and
 * it looked like mud, the same brown in all three schemes, and it was the one
 * thing on the page that ignored the theme.
 *
 * So each scheme now uses its own two colours — the pair its name promises.
 * Blue against teal, violet against pink, navy against gold. Two of those three
 * are a weaker separation than bronze was, and that is a real trade, taken
 * knowingly: these bars carry a legend above them and the company's name
 * directly underneath, so colour is never the only thing telling them apart.
 * Violet against pink is the weakest of the three; if a reader ever says the
 * chart is hard to read, that is the pair to revisit first.
 *
 * The light steps are too dark on the dark ground, so dark gets its own pair. */
:root { --bar-main: #1d4ed8; --bar-sme: #0d9488; }
:root[data-theme="dark"] { --bar-main: #60a5fa; --bar-sme: #2dd4bf; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bar-main: #60a5fa; --bar-sme: #2dd4bf; }
}

.eyebrow {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The "this is live" mark, sized to sit on the h1's baseline rather than
   inflate its line box. */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  transform: translateY(-0.18em);
  margin-left: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--up-bg);
  color: var(--up);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Four tiles across the full width, under the headline and the chart. */
.snap-list {
  list-style: none;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding: 0;
  display: grid;
  /* Four across on a desktop, two on a tablet, one on a phone — decided by the
     tile's own minimum, not by a width we guessed. */
  /* Four small tiles in the width two used to take, left-aligned under the
     headline, rather than four wide ones stretched across the whole page —
     each holds a label, one figure and a note, and none of that needs 320px. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 680px;
  gap: 10px;
}
/* A glyph carries the tile's subject, in the tint that says which subject it
   is — colour AND shape, so it reads at a glance and survives being printed.
 *
 * It sits on the LABEL'S line, at the far right, rather than in a 34px chip
 * down the left. That chip set the tile's height on its own: the text beside it
 * was three short lines and the tile still had to be tall enough for the chip,
 * so every tile carried empty space it had no use for. On the label's line it
 * costs nothing, and the figure — the only thing anybody is reading — gets to
 * be the biggest thing on the tile without the tile getting bigger. */
.snap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "k     ico"
    "v     v"
    "note  note";
  column-gap: 10px;
  align-content: center;
  padding: 11px 13px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}
/* Only a tile that leads somewhere behaves like a button. "Closing today 0"
   has nothing to show, so it stays flat and is skipped by the keyboard. */
.snap-row.is-act { cursor: pointer; }
.snap-row.is-act:hover {
  border-color: var(--accent);
  box-shadow: var(--lift);
  transform: translateY(-1px);
}
.snap-row.is-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.snap-ico {
  grid-area: ico;
  align-self: center;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--panel-3);
  color: var(--ink-3);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 3px 8px -3px rgba(15, 23, 42, 0.18);
}
/* The SVG has no intrinsic size, so without this it fills whatever box it is
   given — which is how it came out the size of the tile. */
.snap-ico svg { width: 23px; height: 23px; display: block; overflow: visible; }

/* ---- tile icons: the one part of each that moves ----------------------------
   Slow loops, a few seconds each, so the four tiles feel alive without
   anything flashing. Rotations and pops turn about their own centres. */
.snap-ico .ic-hand { transform-box: view-box; transform-origin: 12px 13.5px; }
.snap-ico .ic-dot, .snap-ico .ic-day { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .snap-ico .ic-line { stroke-dasharray: 1; animation: ic-draw 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .snap-ico .ic-head { animation: ic-head 4.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
  .snap-ico .ic-dot { animation: ic-beat 1.6s ease-in-out infinite; }
  .snap-ico .ic-w1 { animation: ic-wave 1.6s ease-in-out infinite; }
  .snap-ico .ic-w2 { animation: ic-wave 1.6s ease-in-out 0.3s infinite; }
  .snap-ico .ic-hand { animation: ic-spin 8s linear infinite; }
  .snap-row.a-warn .snap-ico .ic-hand { animation-duration: 3s; }
  .snap-ico .ic-day { animation: ic-pick 3.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
}
/* Never blank: the line is only ever partly wound back and drawn forward
   again, and the arrowhead stays, giving a small nudge as the line arrives —
   so a glance at any moment still reads as a rising trend. */
@keyframes ic-draw {
  0% { stroke-dashoffset: 0.6; }
  20%, 88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0.6; }
}
@keyframes ic-head {
  0%, 14% { transform: none; }
  22% { transform: translate(1.5px, -1.5px); }
  32%, 100% { transform: none; }
}
@keyframes ic-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes ic-wave { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes ic-spin { to { transform: rotate(360deg); } }
@keyframes ic-pick {
  0%, 58% { transform: scale(1); opacity: 1; }
  68% { transform: scale(0.3); opacity: 0.2; }
  82% { transform: scale(1.2); opacity: 1; }
  92%, 100% { transform: scale(1); opacity: 1; }
}
.snap-k { grid-area: k; }
.snap-v { grid-area: v; }
.snap-note { grid-area: note; }
.snap-row.a-up .snap-ico { background: var(--up-bg); color: var(--up); }
.snap-row.a-warn .snap-ico { background: var(--urgent-bg); color: var(--urgent); }
.snap-row.a-soon .snap-ico { background: var(--soon-bg); color: var(--soon); }

.snap-k {
  align-self: center;
  font-size: clamp(10.5px, 0.72vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  /* Wraps rather than cuts: "CLOSING TODAY" beside a glyph in a quarter of a
     1100px screen does not fit on one line, and "CLOSING TOD…" said less than
     two short lines do. The tile grows to fit. */
  white-space: normal;
  line-height: 1.25;
}
.snap-v {
  margin-top: 3px;
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.snap-v.up { color: var(--up); }
.snap-v.warn { color: var(--urgent); }
/* Two lines rather than an ellipsis: the note names the company behind the
   figure, and "National Stock Exchange of I…" names nothing. */
.snap-note {
  margin-top: 2px;
  font-family: var(--sans);
  font-size: clamp(11.5px, 0.85vw, 12.5px);
  color: var(--ink-3);
  line-height: 1.3;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- the standing caveat ------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 26px;
  padding: 12px 15px;
  background: var(--warn-bg);
  border: 1px solid transparent;
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.notice b { color: var(--ink); }
.notice a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.notice-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--warn);
  color: var(--panel);
  font-size: 12px;
  font-weight: 800;
}

/* ---- blocks -------------------------------------------------------------- */
.page { padding: 30px 0 72px; }
.block { margin-bottom: 40px; }
.block:last-child { margin-bottom: 0; }

.block-head { margin-bottom: 18px; }
.block-head h2 {
  margin: 0 0 4px;
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.block-sub { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---- subscription figures ------------------------------------------------ */
/* The figure alone, with 1x as the line the colour turns on: under it the
   issue has not filled, over it it has, and past 10x it is being fought over.
   Three steps, not a gradient — a reader should be able to name the state, not
   estimate it from a shade. */
.subv { font-size: clamp(13px, 1.02vw, 14.5px); font-weight: 600; }
.subv.s-under { color: var(--down); }
.subv.s-over { color: var(--up); }
.subv.s-hot { color: var(--up); font-weight: 700; }
.col-sub { min-width: 78px; }

/* Demand as a rising signal meter. Amber, not a ramp into red: rose already
   means "premium down" here, and a red meter beside a rose figure would read
   as the same thing twice. The heights carry the level, so the colour is not
   doing the work on its own. */
/* One height drives the whole meter, so it scales as a piece rather than five
   figures needing to be kept in step. The steps are percentages of it. */
.meter {
  --meter-h: clamp(14px, 1.35vw, 21px);
  display: inline-flex;
  align-items: flex-end;
  gap: clamp(2px, 0.18vw, 3px);
  height: var(--meter-h);
  vertical-align: middle;
}
.sig {
  width: clamp(3px, 0.3vw, 4.5px);
  flex: none;
  border-radius: 2px;
  background: var(--line);
}
.sig:nth-child(1) { height: 38%; }
.sig:nth-child(2) { height: 54%; }
.sig:nth-child(3) { height: 69%; }
.sig:nth-child(4) { height: 85%; }
.sig:nth-child(5) { height: 100%; }
.sig.on { background: var(--meter); }

/* The tabs and the free-text controls share the top line; the checkbox row
   below then has the full width and never squeezes the search. */
.toolbar-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.v-warn { color: var(--urgent); font-weight: 700; }

/* ---- pills --------------------------------------------------------------- */
.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.pill.p-open { background: var(--up-bg); color: var(--up); }
.pill.p-closing { background: var(--urgent-bg); color: var(--urgent); }
.pill.p-upcoming { background: var(--soon-bg); color: var(--soon); }
.pill.p-listed { background: var(--done-bg); color: var(--done); }
.pill.p-closed { background: var(--panel-3); color: var(--ink-3); }

/* ---- filters ------------------------------------------------------------- */
/* Everything that changes what the table shows lives in one framed strip, so
   the controls read as belonging to the table rather than floating above it. */
.toolbar {
  padding: 14px 16px 15px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* One line, not two: every control that narrows the table sits in a single
   row, so the eye reads the whole filter state at a glance instead of pairing
   up two bands. It wraps only when the window is genuinely too narrow. */
/* The boxes are fixed-size labels — nothing here can shrink, so the row wraps
   onto as many lines as it needs. (It was nowrap while the search shared this
   line and had to give up width; the search lives on the row above now.) */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* A box with nothing behind it right now stays usable but stops competing. */
.box-chk.is-empty { opacity: 0.45; }

/* How many rows the box would add, against every other filter in force. */
.chk-n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.box-chk:has(input:checked) .chk-n { color: inherit; opacity: 0.8; }

.seg {
  display: inline-flex;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(12, 21, 25, 0.09); }

/* Room to actually read what you typed: the top row has space to spare, so
   the field takes a proper share of it rather than a sliver. */
.search { flex: 1 1 260px; min-width: 180px; max-width: 420px; }
#search {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 13px;
  font-size: 14px;
}
#search::placeholder { color: var(--ink-3); }
#search:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }

/* ---- palette picker ------------------------------------------------------ */
.palette { position: relative; flex: none; }
/* Three overlapping swatches in the colours of the scheme that is on, so the
   button wears what it changes. They part a little on hover and turn a third
   of a circle as the menu opens. */
.pal-btn { position: relative; display: grid; place-items: center; }
.pal-i { width: 23px; height: 23px; overflow: visible; }
.pal-c {
  stroke: var(--panel);
  stroke-width: 1.4;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pal-c1 { fill: var(--brand-2); }
.pal-c2 { fill: var(--brand-pink); }
.pal-c3 { fill: var(--brand-3); }
.pal-spin {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.pal-btn:hover .pal-c1 { transform: translate(0, -1.3px); }
.pal-btn:hover .pal-c2 { transform: translate(-1.1px, 0.7px); }
.pal-btn:hover .pal-c3 { transform: translate(1.1px, 0.7px); }
.pal-btn[aria-expanded="true"] { border-color: var(--accent); }
.pal-btn[aria-expanded="true"] .pal-spin { transform: rotate(120deg); }
.pal-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 196px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--lift);
}
.pal-menu[hidden] { display: none; }
.pal-head {
  margin: 4px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pal-tick { margin-left: auto; font-size: 12px; opacity: 0; }
.pal-opt.is-on .pal-tick { opacity: 1; }

/* ---- light and dark -------------------------------------------------------
   The moon in light mode, the sun in dark: each is where the button takes
   you. One drawing, not two: a disc with a bite out of it is the moon; the
   bite slides off, the disc shrinks, the rays grow and the whole thing turns
   half round, and it is the sun. Driven off the same attribute the page's own
   colours use, so the right one is drawn on the first paint. */
.theme-btn { display: grid; place-items: center; }
.tm {
  width: 20px; height: 20px;
  overflow: visible;
  transform: rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), color 0.2s;
}
.tm-core {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tm-bite { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.tm-rays {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transform: rotate(-45deg) scale(0.4);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}
:root[data-theme="dark"] .tm { transform: rotate(180deg); }
:root[data-theme="dark"] .tm-core { transform: scale(0.55); }
:root[data-theme="dark"] .tm-bite { transform: translate(9px, -9px); }
:root[data-theme="dark"] .tm-rays { transform: none; opacity: 1; transition-delay: 0.1s; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tm { transform: rotate(180deg); }
  :root:not([data-theme="light"]) .tm-core { transform: scale(0.55); }
  :root:not([data-theme="light"]) .tm-bite { transform: translate(9px, -9px); }
  :root:not([data-theme="light"]) .tm-rays { transform: none; opacity: 1; transition-delay: 0.1s; }
}
.theme-btn:hover .tm { color: #6366f1; }
:root[data-theme="dark"] .theme-btn:hover .tm { color: #f59e0b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn:hover .tm { color: #f59e0b; }
}
@media (prefers-reduced-motion: reduce) {
  .tm, .tm-core, .tm-bite, .tm-rays, .pal-c, .pal-spin { transition: none; }
}
/* The three header buttons sit together at the right end of the bar. */
.head-in .palette { margin-left: auto; }
.pal-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.pal-opt:hover { background: var(--panel-2); color: var(--ink); }
.pal-opt.is-on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
/* Swatches are fixed colours, not tokens: each has to show its OWN scheme
   while a different one is applied. */
.pal-sw {
  flex: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.pal-sw.s-blue { background: linear-gradient(135deg, #1e3a8a, #10b981); }
.pal-sw.s-violet { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.pal-sw.s-navy { background: linear-gradient(135deg, #0f172a, #eab308); }
.pal-sw.s-saffron { background: linear-gradient(135deg, #0b4f5c, #f97316); }
.pal-sw.s-mocha { background: linear-gradient(135deg, #3b2418, #d4917a); }
.pal-sw.s-aurora { background: linear-gradient(135deg, #0891b2, #8b5cf6); }
.pal-sw.s-sky { background: conic-gradient(#3b82f6 0 40%, #8b5cf6 0 75%, #34d399 0); }

/* Quiet until you need it: it is an undo, not an action worth advertising. */
.clear-btn {
  flex: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--down);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s, border-color 0.13s;
}
.clear-btn:hover { background: var(--down-bg); border-color: var(--down-bg); }

.tally {
  margin: 0 0 0 auto;
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---- table --------------------------------------------------------------- */
/* The table is wide by nature, so it scrolls inside its own frame and the page
   body never does. The company column is pinned, so a row stays identifiable
   however far sideways the reader has scrolled. */
/* With the cards gone this table is the page, so it is framed as the one
   object on it: raised off the ground, and its own header sticks under the
   page header rather than scrolling away. */
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  box-shadow: var(--lift);
}

/* No forced minimum: app.js trims the column set to what this frame can hold,
   so the table fills the width it is given instead of running off the edge.
   The overflow rule stays as the backstop for a screen too narrow even for the
   columns that can never be dropped. */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }

.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-2);
  text-align: left;
  font-family: var(--mono);
  font-size: clamp(11px, 0.78vw, 12px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px clamp(8px, 0.68vw, 13px);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl thead th.num { text-align: right; }
/* The headers are labels, not controls — the table has one order. */

/* Cells wrap rather than demand a single line. A date that reads "17-Sep" over
   two lines costs a little height and buys a whole column of width, which is
   the trade the dense GMP reports make and the reason they fit everything. */
.tbl tbody td {
  padding: clamp(9px, 0.7vw, 11px) clamp(8px, 0.68vw, 13px);
  border-bottom: 1px solid var(--line-2);
  font-size: clamp(13px, 1.02vw, 14.5px);
  line-height: 1.35;
  vertical-align: middle;
  white-space: normal;
  background: var(--panel);
}
.tbl tbody tr:last-child td { border-bottom: 0; }

/* No wash. Every row sits on plain paper and the stage is carried by the
   coloured edge and the letter badge beside the name — two markers are enough,
   and a tint across the whole row only dulls the figures on it. */
.tbl tbody tr:hover td { background: var(--panel-2); }

/* Status as a coloured edge on the row's first cell — no full-row wash, so
   the figures keep their contrast whatever stage the IPO is at. It hangs off
   whichever cell comes first, because the "#" column is dropped on a narrow
   screen and the edge has to survive that. */
.tbl tbody td.col-n { font-size: 12.5px; color: var(--ink-3); }
.tbl tbody td:first-child { position: relative; }
.tbl tbody td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
}
.tbl tbody tr.r-open td:first-child::before { background: var(--up); }
.tbl tbody tr.r-closing td:first-child::before { background: var(--urgent); }
.tbl tbody tr.r-upcoming td:first-child::before { background: var(--soon); }
.tbl tbody tr.r-closed td:first-child::before { background: var(--ink-3); }
.tbl tbody tr.r-listed td:first-child::before { background: var(--done); }

/* Pin the first two cells (index + company) while the rest scrolls. */
.tbl thead th.col-n, .tbl tbody td.col-n { position: sticky; left: 0; z-index: 1; }
.tbl thead th.col-n { z-index: 3; }
.tbl thead th.col-name, .tbl tbody td.col-name { position: sticky; left: 44px; z-index: 1; }
/* The "#" column is dropped in some views and on narrow screens, and when it
   is, the name is the first cell — so it pins to the edge rather than to where
   that column used to be. */
.tbl thead th.col-name:first-child,
.tbl tbody td.col-name:first-child { left: 0; }
.tbl thead th.col-name { z-index: 3; box-shadow: 1px 0 0 var(--line); }
.tbl tbody td.col-name { box-shadow: 1px 0 0 var(--line-2); }

.col-n { width: 44px; }
.col-name { min-width: 186px; }
.tbl td.col-name { white-space: normal; }

/* The company name reads as a link, because it is one: the row opens that
   IPO's full panel. Indigo is the page's interactive colour and reports no
   figure, so using it here says "clickable" without saying anything about the
   numbers alongside. */
.co {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(13px, 1.02vw, 14.5px);
  color: var(--accent);
}
.tbl tbody tr:hover .co { text-decoration: underline; text-underline-offset: 2px; }

/* Which board the IPO lists on, as a tinted badge. This is the one place the
   palette carries a category rather than a value, and it earns the exception:
   mainboard and SME are the first thing a reader sorts these lists by, and
   every tracker they already read draws it exactly this way. */
.board {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: clamp(11px, 0.76vw, 12px);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* The same two colours as the bars, because it is the same fact stated twice —
   and they were not. The chip borrowed --done and --soon, which already mean
   "listed" and "upcoming" on the stage tag two columns over, so one violet
   said "mainboard" here and "listed" there. The pair is its own now, and the
   chip's ground is mixed from it rather than being a fourth thing to keep in
   step. */
.board.b-main {
  background: color-mix(in srgb, var(--bar-main) 14%, transparent);
  color: var(--bar-main);
}
.board.b-sme {
  background: color-mix(in srgb, var(--bar-sme) 16%, transparent);
  color: var(--bar-sme);
}

/* Board and stage sit together under the name. */
.co-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; }
.co-tags .board { margin-top: 0; }

/* Stage as a single letter, the way the GMP reports abbreviate it: O open,
   CT closing today, U upcoming, C closed, L listed. The full word is on the
   badge's title, and the row's own wash says the same thing in colour. */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: clamp(11px, 0.74vw, 12px);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  color: #fff;
}
.tag.t-open { background: var(--up); color: var(--up-ink); }
.tag.t-closing { background: var(--urgent); color: #fff; }

/* Last day to bid. This is the one thing on the table that expires TONIGHT, so
   it carries the only moving mark on the page. The CT tag itself pulses — a
   separate dot beside the name was tried and was redundant, since the tag is
   already red, already means exactly this, and is already where the eye lands.
   Only in the table, not in the filter bar, where it would flash at a control.
   The cycle is 1.6s: far under the three-a-second rate that is a seizure risk,
   and slow enough to read as urgency rather than a warning light. */
.tbl .tag.t-closing,
/* And the card's own "Closing today" pill. On a phone every table page is
   cards, so the rule above — written when the table was the only view — left
   the phone with no moving mark at all: the one deadline on the page sat as
   still as everything else on exactly the screen most people check it on. */
.cd .pill.p-closing {
  animation: ct-ping 1.6s ease-out infinite;
}
/* The tag fades and a ring goes out from it on the same beat, so it reads at a
   glance from across the table and still resolves into one mark up close. */
@keyframes ct-ping {
  0%   { opacity: 1;    box-shadow: 0 0 0 0 var(--urgent); }
  70%  { opacity: 0.45; box-shadow: 0 0 0 5px transparent; }
  100% { opacity: 1;    box-shadow: 0 0 0 0 transparent; }
}

.tag.t-upcoming { background: var(--soon); }
.tag.t-closed { background: var(--ink-3); }
.tag.t-listed { background: var(--done); }

/* The premium stacks three lines, so it needs room the single figure it used
   to be did not — without it the day's range spills out of its cell. */
.col-gmp { min-width: 130px; }
/* The meter is a mark, not a figure — centred it reads as belonging to its
   column rather than clinging to the left edge with a gap beside it. */
.tbl td.col-rating, .tbl th.col-rating { text-align: center; }
.tbl td.col-rating .meter { justify-content: center; }
.tbl td.col-gmp .g-band, .tbl td.col-gmp .g-pct { white-space: nowrap; }

/* The percentage is the headline of this cell — it is the figure a reader can
   actually compare between two issues — so it takes the size and the colour.
   The rupee premium above it is the input, set small and neutral. */
/* Rupees and percentage on one line, right-aligned with the column, the small
   grey figure sitting on the baseline of the big one. */
.g-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.g-rs {
  font-size: clamp(11px, 0.78vw, 12px);
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.25;
}
/* Specific enough to beat the .v-up/.v-down that colours it, which would
   otherwise drop this back to 600 and leave the row's loudest figure lighter
   than the company name it belongs to. */
.g-pct, .tbl .g-pct.v-up, .tbl .g-pct.v-down {
  font-size: clamp(13px, 1.02vw, 14.5px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.v-up { color: var(--up); font-weight: 600; }
.v-down { color: var(--down); font-weight: 600; }
.v-flat { color: var(--ink-3); }
.pct { font-size: 12.5px; color: var(--ink-3); }

.tbl td.col-date, .tbl th.col-date { white-space: nowrap; }

/* What one lot would be worth, over what one lot costs to apply for — the
   second line is the reason the first is not a promise. */
.col-profit { min-width: 104px; }
.col-profit .cost {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
}

.blank { text-align: center; color: var(--ink-2); padding: 52px 0; }

/* ---- the checkbox filter ------------------------------------------------- */
/* One box, not a bar of them: the stage chips above already replace one
   another, so the only thing left worth toggling separately is whether an
   issue has a premium at all. */
.box-chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.13s, color 0.13s, background 0.13s;
}
.box-chk:hover { border-color: var(--ink-3); color: var(--ink); }
.box-chk input { accent-color: var(--up); margin: 0; cursor: pointer; width: 13px; height: 13px; }
.box-chk .tag { min-width: 15px; padding: 1px 4px; font-size: 10.5px; }
/* Checked reads as on, in the colour that already means "premium" here. */
.box-chk:has(input:checked) { background: var(--up-bg); border-color: var(--up); color: var(--up); }
.box-chk span { display: inline-flex; align-items: center; gap: 6px; }

/* The day's low and high under a premium: the same figure, a step quieter. */
.g-band {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.3;
}

/* ---- news ---------------------------------------------------------------- */
.news {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.news-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color 0.14s;
}
.news-item:hover { border-color: var(--ink-3); }
.news-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.news-top time { color: var(--ink-3); }
.news-item h3 {
  margin: 0 0 7px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.news-item p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* ---- one IPO, in full ---------------------------------------------------- */
/* A panel rather than a page: the table stays where it was, so closing the
   panel puts you back on the row you came from with no scroll position lost. */
.sheet-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 14, 18, 0.42);
  backdrop-filter: blur(2px);
}
.sheet {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 201;
  width: min(500px, 100%);
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 46px rgba(8, 14, 18, 0.16);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet-in { padding: 22px 24px 40px; }
body.sheet-open { overflow: hidden; }

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.sheet-title h2 {
  margin: 0 0 9px;
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.sheet-x {
  flex: none;
  width: 32px; height: 32px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
}
.sheet-x:hover { color: var(--ink); border-color: var(--ink-3); }

/* The two figures the reader opened this for. */
.sheet-lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-bottom: 20px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lead-box { display: flex; flex-direction: column; gap: 3px; padding: 14px 15px 15px; background: var(--panel-2); }
.lead-k { font-size: clamp(11.5px, 0.9vw, 12.5px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.lead-v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.lead-n { font-size: clamp(12.5px, 1vw, 13.5px); color: var(--ink-2); }

.sheet-h {
  margin: 24px 0 10px;
  font-family: var(--mono);
  font-size: clamp(11.5px, 0.9vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sheet-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.sheet-dl.wide { grid-template-columns: 1fr; }
.dl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
}
/* Two columns of pairs: the divider only reads if the right-hand column is
   inset from the left one. */
.sheet-dl:not(.wide) .dl:nth-child(2n) { padding-left: 16px; }
.dl dt { font-size: clamp(13px, 1.05vw, 14px); color: var(--ink-3); white-space: nowrap; }
.dl dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(13.5px, 1.1vw, 14.5px);
  text-align: right;
  min-width: 0;
}
.sheet-dl.wide .dl dd { flex: 1; max-width: 62%; }

/* A note attached to one block of the panel, not to the whole of it. */
.sheet-note {
  margin: 8px 0 0;
  font-size: clamp(12px, 0.92vw, 12.5px);
  line-height: 1.5;
  color: var(--ink-3);
}
.sheet-note b { color: var(--ink-2); font-weight: 600; }

/* The row's own timing note, reused in the panel's badge row. */
.pill.p-note { background: var(--panel-3); color: var(--ink-2); }
.pill.p-note.is-urgent { background: var(--urgent-bg); color: var(--urgent); }

.tbl tbody tr[data-id] { cursor: pointer; }
.tbl tbody tr[data-id]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The company mark beside the name, the card's one scaled up. */
.co-title { display: flex; align-items: center; gap: 12px; }
.co-mark {
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel-3);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 15px; font-weight: 600;
}
.co-logo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 4px;
}

/* ---- the allotment page ---------------------------------------------------
   Two panels, side by side where there is room: what you have (the PANs) and
   what to do with it (the issues). They stack below 860px because neither is
   readable at half a phone. */
.al-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}
.al-panel {
  padding: 16px 18px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.al-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.al-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.al-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* The same green as a premium that is up — this is the one notice on the site
   that is reassurance rather than warning, and it should not wear the amber. */
.notice-safe { background: var(--up-bg); border-color: var(--up); }
.notice-safe .notice-mark { background: var(--up); color: var(--up-ink); }

.al-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  font: 400 13px/1.6 var(--mono);
  resize: vertical;
}
.al-input::placeholder { color: var(--ink-3); font-family: var(--sans); }
.al-actions { display: flex; align-items: center; gap: 9px; margin: 10px 0 4px; flex-wrap: wrap; }
.al-actions .btn-primary, .al-actions .btn-secondary { padding: 8px 16px; font-size: 13px; }
.al-msg { font-size: 12px; color: var(--ink-3); }
/* A row check's progress. Nothing to say, no gap. */
.al-status { margin: 0 0 4px; }
.al-status:empty { display: none; }

.pan-list, .al-list { list-style: none; margin: 10px 0 0; padding: 0; }
.pan-empty { padding: 14px 2px; font-size: 13px; color: var(--ink-3); }

.pan-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 2px;
  border-top: 1px solid var(--line-2);
}
.pan-v { display: flex; flex-direction: column; gap: 1px; margin-right: auto; min-width: 0; }
/* Masked on screen: enough to tell two apart, not enough to be worth a
   screenshot. The clipboard still gets the whole thing. */
.pan-masked { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; }
.pan-label { font-size: 12px; color: var(--ink-3); }
.pan-btn {
  padding: 5px 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-2);
  font: 600 12px var(--sans);
  cursor: pointer;
}
.pan-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.pan-x { padding: 5px 9px; font-size: 15px; line-height: 1; }

.al-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 2px;
  border-top: 1px solid var(--line-2);
}
.al-main { min-width: 0; margin-right: auto; }
.al-name { margin: 0; font-size: 13.5px; font-weight: 600; }
.al-sub { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.al-reg { display: flex; align-items: center; gap: 6px; }
.al-reg-n { font-size: 12px; color: var(--ink-2); }
.al-go {
  padding: 7px 13px;
  border-radius: 8px;
  background: var(--chrome);
  color: var(--chrome-ink);
  font: 600 12.5px var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
/* Every row's Check is the same button: same width, same label, centred. */
.al-row .al-go { display: inline-flex; justify-content: center; align-items: center; min-width: 76px; box-sizing: border-box; }
.al-go { border: 0; cursor: pointer; font-family: var(--sans); }
.al-go:disabled { opacity: 0.5; cursor: default; }
.al-row { flex-direction: column; align-items: stretch; gap: 8px; }
.al-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The list has no heading above it, so the first row needs no rule either. */
.al-list { margin-top: 0; }
.al-list > .al-row:first-child { border-top: 0; padding-top: 2px; }
.al-top .al-main { min-width: 0; margin-right: auto; }

/* One line per PAN under the issue it belongs to, so the answer sits with the
   question instead of in a grid you have to cross-reference. */
.al-res { list-style: none; margin: 0; padding: 0 0 0 2px; }
.al-r {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0;
  border-top: 1px dashed var(--line-2);
  font-size: 12.5px;
}
.al-who { color: var(--ink-2); }
.al-val { margin-left: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.al-r.r-yes .al-val { color: var(--up); font-weight: 600; }
.al-r.r-no .al-val { color: var(--down); }
.al-r.r-none .al-val,
.al-r.r-idle .al-val { color: var(--ink-3); }
.al-r.r-err .al-val { color: var(--warn); }
.al-r.r-busy .al-val { color: var(--ink-3); font-style: italic; }
.al-foot { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
/* Check all sits in the panel's head, after the count. */
.al-head .al-go { align-self: center; padding: 6px 12px; }

/* Where the PAN list is kept: this browser, or the account. */
.al-where { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.al-where b { color: var(--ink-2); }
.al-where .al-where-id { color: var(--ink-2); font-family: var(--mono); font-weight: 500; }
.al-where a { color: var(--accent); font-weight: 600; }

/* ---- the login page --------------------------------------------------------
   The form and the reasons to have an account, side by side where there is
   room; the form first on a phone. */
.login {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 340px);
  justify-content: center;
  align-items: start;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(12px, 4vw, 48px) 0 clamp(24px, 5vw, 64px);
}
.login-card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 32px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift);
}
.login-card[hidden] { display: none; }
.login-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 22px;
  background: var(--panel-3);
  border-radius: 11px;
}
.login-tab {
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-2);
  font: 600 13px var(--sans);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.login-tab.is-on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.login-title { margin: 0; font-size: clamp(21px, 2.4vw, 25px); font-weight: 800; letter-spacing: -0.02em; }
.login-sub { margin: 6px 0 20px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.login-who { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.login-google[hidden] { display: none; }
/* Google draws the button inside this box, in an iframe of its own. */
.login-gbtn { display: flex; justify-content: center; min-height: 44px; }
.login-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 12px;
  color: var(--ink-3);
}
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-form { display: flex; flex-direction: column; }
.login-form [hidden] { display: none; }
.login-l { display: block; margin: 12px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.login-form > .login-l:first-child { margin-top: 0; }
.acct-in {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: 400 15px var(--sans);
  transition: border-color 0.13s, box-shadow 0.13s;
}
.acct-in::placeholder { color: var(--ink-3); }
.acct-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.login-pw { position: relative; }
.login-pw .acct-in { padding-right: 64px; }
.login-eye {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  padding: 5px 9px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--accent);
  font: 600 12px var(--sans);
  cursor: pointer;
}
.login-eye:hover { background: var(--accent-bg); }
.login-msg { min-height: 0; margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--down); }
.login-msg:empty { display: none; }
.login-msg.is-ok { color: var(--ink-3); }
.login-go { margin-top: 18px; padding: 12px 18px; font-size: 14.5px; justify-content: center; text-align: center; text-decoration: none; }
.login-go:disabled { opacity: 0.6; cursor: default; transform: none; }
.login-switch { margin: 18px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }
.login-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 13px var(--sans);
  cursor: pointer;
}
.login-link:hover { text-decoration: underline; }
.login-av {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
}
.login-av svg { width: 26px; height: 26px; }
.login-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 14px; }
.login-row .btn-secondary { padding: 9px 16px; font-size: 13px; }
.login-why { padding: 8px 4px; }
.login-why h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.login-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.login-why li {
  position: relative;
  padding-left: 28px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.login-why li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: 0;
  display: grid; place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--up-bg);
  color: var(--up);
  font-size: 11px; font-weight: 700;
}
.login-why li b { color: var(--ink); }
.login-safe { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.login-safe a { color: var(--accent); }
.acct-link.is-here { border-color: var(--accent); color: var(--accent); }
@media (max-width: 760px) {
  .login { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the subscription cards ----------------------------------------------
   auto-fill with a minmax floor rather than a column count: the grid decides
   how many fit, so there is no breakpoint to maintain and no width at which
   two cards sit beside a gap the size of a third. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}

.cd {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 16px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* The stage, as a stripe down the edge — the same reading the table gives a
     row, in the one place on a card that is always visible. */
  border-left: 3px solid var(--line);
}
.cd-open { border-left-color: var(--up); }
.cd-closing { border-left-color: var(--urgent); }
.cd-upcoming { border-left-color: var(--soon); }
.cd-listed { border-left-color: var(--done); }
.cd:hover { border-color: var(--ink-3); }

.cd-top { display: flex; align-items: flex-start; gap: 10px; }
.cd-mark {
  position: relative;
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--panel-3);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12.5px; font-weight: 600;
}
/* Over the initials, not instead of them: the letters are the fallback, and a
   logo that fails to load removes this and reveals them. contain, because
   these arrive at every aspect ratio and a cropped logo is a wrong one. */
.cd-logo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;   /* most are drawn for a white ground, dark mode included */
  padding: 3px;
}
.cd-id { min-width: 0; margin-right: auto; }
.cd-name {
  margin: 0;
  font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--ink);
  /* The whole name, however long: the card grows to fit it. A cut name
     ("Coreintegra Consulting Service…") is a company the reader cannot be
     sure of. */
  overflow-wrap: break-word;
}
.cd-sub { margin: 3px 0 0; font-size: 12px; color: var(--ink-3); }

.cd-gmp {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 12px;
  background: var(--panel-2);
  border-radius: 9px;
}
.cd-gmp-k {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.cd-gmp-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 600;
}
.cd-gmp-p {
  margin-left: auto;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600;
}

.cd-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
  margin: 0;
}
.cd-f dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.cd-f dd {
  margin: 2px 0 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}

.cd-act { display: flex; gap: 8px; margin-top: auto; }
.cd-btn {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--ink-2);
  font: 600 12.5px var(--sans);
  text-align: center; text-decoration: none;
  cursor: pointer;
}
.cd-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.cd-btn-go { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); }
.cd-btn-go:hover { color: var(--chrome-ink); opacity: 0.9; }

.news-item h3 a { color: inherit; text-decoration: none; }
.news-item h3 a:hover { color: var(--accent); text-decoration: underline; }
/* A headline that opens an issue opens it from anywhere on its card: the
   link's box is stretched over the whole card, so it stays one link. */
.news-item:has(h3 a) { position: relative; cursor: pointer; }
.news-item h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.news-item:has(h3 a):hover h3 a { color: var(--accent); }
.news-item:has(h3 a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-item h3 a:focus-visible { outline: none; }

/* ---- footer -------------------------------------------------------------- */
/* ---- one company, in full (company.html) --------------------------------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: clamp(12.5px, 0.95vw, 13px);
  color: var(--ink-3);
}
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { color: var(--brand); text-decoration: underline; }

.co-head { margin-bottom: 20px; }
.co-head h1 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.co-head .co-tags { gap: 7px; }
/* One more pill: this issue was matched against the exchange's own record. */
.pill.p-nse { background: var(--up-bg); color: var(--up); }

/* Three boxes instead of the panel's two — the page has the width for the
   cost of a lot, which is the figure that decides whether you can apply. */
.co-lead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 1px;
  margin-bottom: 30px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.co-lead .lead-box { background: var(--panel); padding: 17px 18px; min-width: 0; }

.co-block { margin-bottom: 30px; }
.co-h {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: clamp(11.5px, 0.9vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Prose facts, as opposed to figures: a label on the left and a sentence on
   the right that is allowed to be a sentence. The grid collapses to one column
   on a phone rather than squeezing a registrar's address into 40% of 360px. */
.co-rows { margin: 0; }
.co-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.32fr) 1fr;
  gap: 6px 20px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.co-row:last-child { border-bottom: 1px solid var(--line); }
.co-row dt {
  font-size: clamp(12.5px, 0.95vw, 13px);
  font-weight: 600;
  color: var(--ink-3);
}
.co-row dd {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.co-list { margin: 0; padding-left: 17px; }
.co-list li { margin-bottom: 3px; }

.co-note {
  margin: 12px 0 0;
  font-size: clamp(12.5px, 0.98vw, 13.5px);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 70ch;
}
.co-note b { color: var(--ink-2); }

/* Every outbound link says what it is before it is clicked. The prospectus is
   a ZIP on NSE's archive server, and finding that out by watching a download
   start is not how a reader should find it out. */
.co-links { margin: 0; padding: 0; list-style: none; }
.co-links li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.co-links li:last-child { border-bottom: 1px solid var(--line); }
.co-links a {
  color: var(--brand);
  font-size: clamp(13px, 1.05vw, 14px);
  font-weight: 600;
  text-decoration: none;
}
.co-links a:hover { text-decoration: underline; }
.co-links a::after { content: " \2197"; }
.co-kind {
  font-family: var(--mono);
  font-size: clamp(11px, 0.8vw, 12px);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* The prospectus, in the page. Tall rather than wide: it is a document to be
   read down, and a short frame turns every page into its own scroll. The
   viewport height is the honest unit here — 72vh leaves the page's own chrome
   visible so a reader never loses the way out. */
.doc-view {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-2);
}
.doc-frame {
  display: block;
  width: 100%;
  height: clamp(420px, 72vh, 900px);
  border: 0;
}
/* A phone gets the document too — it was hidden here at first, which quietly
   answered "show me the prospectus" with "not on your phone". It is shorter,
   because a full-height frame on a small screen swallows the page around it,
   and the full-screen link underneath opens the platform's own viewer for
   anyone who wants to actually read all 600 pages. */
@media (max-width: 700px) {
  .doc-frame { height: clamp(300px, 52vh, 460px); }
}

/* Only worth saying where the frame is most likely to come up blank. */
.doc-hint { display: none; margin: -6px 0 12px; }
@media (max-width: 700px) { .doc-hint { display: block; } }

.co-miss { max-width: 60ch; padding: 20px 0 40px; }
.co-miss h1 { margin: 0 0 10px; font-size: clamp(21px, 2.4vw, 28px); font-weight: 800; }
.co-miss p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* The way out of the panel and into the page above. */
.sheet-more { margin: 24px 0 0; }
.sheet-more .btn-primary { display: inline-block; }

@media (max-width: 640px) {
  .co-row { grid-template-columns: 1fr; gap: 3px; }
}

/* ---- running text -------------------------------------------------------- */
/* Only the disclaimer uses this. Measure is capped at 70ch because a line of
   prose that runs the full width of a 1920px screen is genuinely hard to read
   back to — the eye loses the next line's start. */
/* The warning band is part of the reading, so it stops where the text stops
   rather than running the full width while the prose beside it does not. */
.doc { max-width: 70ch; }
.prose { max-width: 70ch; }
/* The nav is buttons on the board and links here; they have to look the same. */
a.nav-btn { text-decoration: none; }
.prose h3 {
  margin: 30px 0 8px;
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.prose h3:first-child { margin-top: 0; }
.prose p {
  margin: 0 0 12px;
  font-size: clamp(14px, 1.05vw, 14.5px);
  line-height: 1.65;
  color: var(--ink-2);
}
.prose b { color: var(--ink); font-weight: 600; }

.foot { border-top: 1px solid var(--line); background: var(--panel); padding: 26px 0 46px; }
.foot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.foot a:hover { color: var(--brand); }
.foot-warn { margin: 0 0 9px; max-width: 78ch; font-size: 13px; color: var(--ink-2); }
.foot-warn strong { color: var(--ink); }
.foot-meta { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); }

/* ---- back to top --------------------------------------------------------- */
/* Built by totop.js on every page. Below the detail panel (z-index 200) so an
   open panel covers it, and on a phone it rides above the bottom nav rather
   than on top of it. */
.to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 85;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  padding: 0;
  background: var(--panel);
  border: 0;
  border-radius: 50%;
  /* The arrow flies out through the top on click and back in from below; the
     round clip is what makes that read as one motion instead of a jump. */
  overflow: hidden;
  color: var(--accent);
  box-shadow: var(--lift);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.6);
  /* Overshoot on the way in, so it lands rather than fades. */
  transition:
    opacity 0.22s ease,
    visibility 0.22s,
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
/* Hover only where there is a pointer to hover with: on a phone a tap leaves
   :hover stuck, and the button would stay filled and bouncing after use. */
@media (hover: hover) {
  .to-top.is-on:hover {
    background: var(--chrome);
    color: var(--chrome-ink);
    transform: translateY(-3px);
    box-shadow: var(--lift), 0 0 0 6px var(--accent-bg);
  }
  .to-top:hover .tt-track { stroke: var(--chrome-ink); stroke-opacity: 0.22; }
  .to-top:hover .to-top-arrow { animation: tt-nudge 0.9s ease-in-out infinite; }
}
.to-top.is-on:active { transform: translateY(-1px) scale(0.94); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The reading-progress ring, drawn from twelve o'clock. */
.to-top-ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.to-top-ring circle { fill: none; stroke-width: 3; }
.tt-track { stroke: var(--line); }
.tt-fill {
  stroke: url(#toTopGrad);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.12s linear;
}
.tt-s1 { stop-color: var(--brand-2); }
.tt-s2 { stop-color: var(--brand-3); }

.to-top-arrow { position: relative; width: 20px; height: 20px; }
.to-top.is-launch .to-top-arrow { animation: tt-launch 0.55s cubic-bezier(0.5, 0, 0.3, 1); }

@keyframes tt-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes tt-launch {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(-30px); opacity: 0; }
  46% { transform: translateY(24px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

body.sheet-open .to-top { visibility: hidden; }
@media (max-width: 860px) {
  .to-top {
    right: 14px;
    bottom: calc(62px + 14px + env(safe-area-inset-bottom, 0px));
    width: 48px; height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top-arrow { animation: none !important; }
  .to-top { transform: none; }
}
@media print { .to-top { display: none; } }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 940px) {

/* Four tiles across is a squeeze below this width; two by two keeps each
     figure at full size. */
  .snap-list { grid-template-columns: 1fr 1fr; margin-top: 22px; gap: 10px; }
}

@media (max-width: 640px) {
  .wrap { width: calc(100% - 26px); }
  .page { padding: 22px 0 54px; }
  .seg { width: 100%; }
  .seg-btn { flex: 1; }
  /* Two pairs per line is a squeeze on a phone — one per line lets each value
     sit clear of the edge. */
  .sheet-dl, .sheet-dl:not(.wide) { grid-template-columns: 1fr; }
  .sheet-dl:not(.wide) .dl:nth-child(2n) { padding-left: 0; }
  .sheet-in { padding: 20px 18px 36px; }
  .snap-row { padding: 13px 14px 14px; }
  .snap-v { font-size: 26px; }

/* The hero type is already on clamp(), so it needs no override here — its
     own floor is the phone size. */
  .notice { margin-bottom: 20px; }
  .toolbar { padding: 11px 12px 12px; }
  .toolbar-top { gap: 9px; margin-bottom: 9px; }
  .search { flex: 1 1 100%; min-width: 0; max-width: none; }

  .tally { margin-left: auto; }

  /* The table keeps its columns on a phone and scrolls sideways; the company
     name stays pinned to the left edge so a row never becomes anonymous
     halfway through the scroll. The "#" column is dropped in JS, so the name
     is the first cell and pins at 0. */
  .tbl thead th.col-name, .tbl tbody td.col-name { left: 0; }
  /* Tighter cells, so one more column of figures survives the trim. */
  .col-name { min-width: 128px; }
  .tbl thead th, .tbl tbody td { padding-left: 10px; padding-right: 10px; }
  /* The day's range is the widest thing in the GMP cell and the least urgent
     of what it holds. Dropping it here buys back a whole column; it is still
     in the panel a tap away. */
  .tbl .g-band, .tbl .col-profit .cost { display: none; }

  /* Rupees and percentage go back to stacked. Side by side is a wide-screen
     affordance: it needs 130px, and on a 390px phone that plus the pinned
     company name is two thirds of the screen, which pushed the subscription
     figure off the edge mid-digit. Stacked the column needs 96px and the
     columns behind it come back into view. */
  .g-line { display: block; }
  .g-rs { display: block; }
  .g-pct { display: block; margin-top: 1px; }
  .col-gmp { min-width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .tape-run { animation: none; }
  * { transition: none !important; }
  /* The closing-today marks stay — they are information, not decoration — but
     they stop moving and sit solid instead. */
  .tbl .tag.t-closing, .cd .pill.p-closing { animation: none; opacity: 1; }
}

/* ---- GMP performance tracker ---------------------------------------------
 * Six small tiles answer the question before the table gives the evidence:
 * how many listed up, and how often the grey market's price was met.
 * -------------------------------------------------------------------------- */
.pf-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pf-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 11px 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.pf-k {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  /* Wraps rather than cuts ("Listed above iss…" on a 360px phone). */
  line-height: 1.3;
}
.pf-n {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pf-note { font-size: 11.5px; color: var(--ink-3); }
.pf-stat.is-up .pf-n { color: var(--up); }
.pf-stat.is-down .pf-n { color: var(--down); }

.pf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.pf-toolbar .tally { margin-left: auto; }
#pfSearch, #pfYear {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
#pfSearch { width: 100%; padding: 9px 13px; }
#pfYear { padding: 8px 10px; font-weight: 600; cursor: pointer; }
#pfSearch::placeholder { color: var(--ink-3); }
#pfSearch:focus, #pfYear:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }

.pf-tbl td { vertical-align: top; }
.pf-name { font-weight: 600; color: var(--ink); }
.pf-g { display: block; margin-top: 2px; font-size: 12px; }
.pf-sm { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }

/* Beat or missed: words and an arrow, with colour on top. */
.pf-v {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--sans, inherit);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pf-tbl .pf-v { display: table; margin-left: auto; }
.pf-beat { background: var(--up-bg); color: var(--up); }
.pf-miss { background: var(--down-bg); color: var(--down); }
.pf-none { background: var(--panel-2); color: var(--ink-3); font-weight: 600; }

@media (max-width: 1100px) {
  .pf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .pf-stats { gap: 8px; }
  .pf-stat { padding: 9px 10px; }
  .pf-n { font-size: 17px; }
  .pf-k, .pf-note { font-size: 10.5px; }
  .pf-toolbar .search { flex-basis: 100%; max-width: none; }
  .pf-toolbar .tally { margin-left: 0; }
}

/* ---- the disclaimer ------------------------------------------------------
 * Laid out like a document someone may need to cite: dates at the top, the
 * one sentence that matters above everything, a contents list, and numbered
 * sections so "see section 6" means something.
 * -------------------------------------------------------------------------- */
.crumbs {
  display: flex;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.doc-dates { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.doc-dates time { color: var(--ink-2); font-weight: 600; }

.doc-key {
  margin: 0 0 22px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}
.doc-key p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.doc-key .doc-key-t {
  margin-bottom: 6px;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 700;
  color: var(--ink);
}

.doc-toc {
  margin: 0 0 30px;
  padding: 14px 18px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.doc-toc-t {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.doc-toc ol {
  margin: 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 28px;
  font-size: 13.5px;
  line-height: 1.9;
}
.doc-toc li { break-inside: avoid; color: var(--ink-3); }
.doc-toc a { color: var(--ink-2); text-decoration: none; }
.doc-toc a:hover { color: var(--accent); text-decoration: underline; }

/* The numbers come from the order, not the markup, so a section added later
   cannot leave the contents list and the headings disagreeing. */
.doc-num { counter-reset: docsec; }
.doc-num h3 { counter-increment: docsec; scroll-margin-top: 84px; }
.doc-num h3::before {
  content: counter(docsec) ".";
  display: inline-block;
  min-width: 1.6em;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 600;
}
.prose ul { margin: 0 0 12px; padding-left: 22px; }
.prose li {
  margin: 0 0 6px;
  font-size: clamp(14px, 1.05vw, 14.5px);
  line-height: 1.6;
  color: var(--ink-2);
}
.prose a { color: var(--accent); text-underline-offset: 2px; }

@media (max-width: 640px) {
  .doc-toc ol { columns: 1; }
  .doc-num h3 { scroll-margin-top: 60px; }
}

/* Performance table: fixed column widths. Left to auto layout the name column
   took whatever the longest name wanted and the eight figure columns shared
   the rest unevenly. Fixed, each figure gets an even share, and below ~1000px
   the frame scrolls rather than squeezing them. */
.pf-tbl { table-layout: fixed; min-width: 980px; }
.pf-tbl th:nth-child(1) { width: 25%; }
.pf-tbl th:nth-child(2) { width: 8%; }
.pf-tbl th:nth-child(3) { width: 10.5%; }
.pf-tbl th:nth-child(4) { width: 8%; }
.pf-tbl th:nth-child(5) { width: 9%; }
.pf-tbl th:nth-child(6) { width: 7.5%; }
.pf-tbl th:nth-child(7),
.pf-tbl th:nth-child(8) { width: 10.5%; }
.pf-tbl th:nth-child(9) { width: 11%; }
.pf-tbl thead th, .pf-tbl tbody td { padding-left: 14px; padding-right: 14px; }
.pf-tbl tbody td.col-name { white-space: normal; }

/* why */
.hm-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hm-why-c {
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.hm-why-c b { font-size: 15px; color: var(--ink); }
.hm-why-c p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* faq */
.faq {
  max-width: 860px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: var(--panel-2); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq details p { margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.faq details a { color: var(--accent); text-underline-offset: 2px; }

@media (max-width: 700px) {

.hm-why { grid-template-columns: 1fr; }
  .faq summary { padding: 14px; font-size: 14px; }
  .faq details p { padding: 0 14px 14px; }
}

/* Under the board: how many listed/upcoming issues are tucked away, and the
   way to them — one line per stage. */
.more-listed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}
.more-listed[hidden] { display: none; }
.more-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
}
.more-btn {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.13s, background 0.13s;
}
.more-btn:hover { border-color: var(--accent); background: var(--accent-bg); }
.more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- phone cards, compact --------------------------------------------------
 * On a phone the cards are the whole board, one under another, and at nearly
 * 300px each a screen held one and a half of them. Same content, less air:
 * the four facts share one line, the premium strip and buttons slim down, the
 * name keeps to one line. About 170px a card — three to a screen.
 * -------------------------------------------------------------------------- */
.dt-s { display: none; }
@media (max-width: 700px) {
  .cards { gap: 9px; }
  .cd { gap: 8px; padding: 10px 12px 10px; }
  .cd-top { align-items: center; gap: 9px; }
  .cd-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
  .cd-name { font-size: 13.5px; }
  .cd-sub { margin-top: 1px; font-size: 11.5px; }
  .cd .pill { padding: 3px 8px; font-size: 10.5px; }

  .cd-gmp { padding: 6px 10px; border-radius: 8px; }
  .cd-gmp-k { font-size: 10px; }
  .cd-gmp-v { font-size: 16px; }
  .cd-gmp-p { font-size: 12.5px; }

  .cd-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 8px; }
  .cd-f dt { font-size: 9.5px; letter-spacing: 0.05em; white-space: nowrap; }
  .dt-l { display: none; }
  .dt-s { display: inline; }
  .cd-f dd { margin-top: 1px; font-size: 11.5px; overflow-wrap: anywhere; }

  .cd-btn { padding: 6px 8px; font-size: 12px; border-radius: 7px; }
}

/* ---- every other card, compact on a phone ----------------------------------
 * The same treatment the board's cards had: less padding, smaller type where
 * it was display-sized, and rows laid out across instead of stacked.
 * -------------------------------------------------------------------------- */
.pf-blk { display: block; }
@media (max-width: 700px) {
  /* news */
  .news { gap: 9px; }
  .news-item { padding: 12px 14px; border-radius: var(--radius-sm); }
  .news-top { margin-bottom: 5px; font-size: 10px; letter-spacing: 0.12em; }
  .news-item h3 { margin-bottom: 4px; font-size: 14.5px; line-height: 1.3; }
  .news-item p { font-size: 12.5px; line-height: 1.5; }

  /* allotment: the button beside the name, under the registrar, not on a
     line of its own */
  .al-panel { padding: 13px 13px 14px; }
  .al-row { padding: 9px 2px; gap: 6px; }
  .al-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
  }
  .al-top .al-main { grid-row: 1 / 3; margin-right: 0; }
  .al-name { font-size: 13px; }
  .al-sub { font-size: 11.5px; }
  .al-reg { justify-content: flex-end; }
  .al-reg-n { font-size: 11px; }
  .al-top .al-go { justify-self: end; padding: 5px 10px; font-size: 12px; }
  .al-r { font-size: 12px; }

.hm-why { gap: 9px; }
  .hm-why-c { padding: 12px 14px; }
  .hm-why-c b { font-size: 14px; }
  .hm-why-c p { font-size: 12.5px; line-height: 1.5; margin-top: 4px; }

  /* performance summary tiles */
  .pf-stats { gap: 6px; }
  .pf-stat { padding: 7px 9px; gap: 0; }
  .pf-n { font-size: 15.5px; }
}

/* ---- motion ---------------------------------------------------------------
   Short, one-off movements that say something happened; none of them loops,
   and all of them sit inside no-preference, so a reader who asked their system
   for less motion gets the page without any of it. See app.js / header.js. */
@media (prefers-reduced-motion: no-preference) {
  /* A premium that moved on refresh blinks its row once: green up, red down. */
  /* On the cells, not the row: the cells paint their own ground over a row's. */
  tr.flash-up > td, .cd.flash-up { animation: flash-up 1.8s ease-out; }
  tr.flash-down > td, .cd.flash-down { animation: flash-down 1.8s ease-out; }
  @keyframes flash-up { 0%, 30% { background-color: var(--up-bg); } 100% { background-color: var(--panel); } }
  @keyframes flash-down { 0%, 30% { background-color: var(--down-bg); } 100% { background-color: var(--panel); } }

@keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  /* Sections below the first screen slide up a little as they arrive. */
  .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .rv.rv-in { opacity: 1; transform: none; }

  /* Waiting: a light sweep across the words, instead of words that sit still. */
  .al-r.r-busy .al-val {
    color: transparent;
    background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 40%, var(--ink) 50%, var(--ink-3) 60%, var(--ink-3) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 1.3s linear infinite;
  }
  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
}
/* ---- the calendar page -----------------------------------------------------
   calendar.js. Four kinds of date, one colour each, the same everywhere on the
   page: opens green, closes red, allotment amber, listing violet. */
.k-open  { --kc: var(--up);     --kb: var(--up-bg); }
.k-close { --kc: var(--urgent); --kb: var(--urgent-bg); }
.k-allot { --kc: var(--warn);   --kb: var(--warn-bg); }
.k-list  { --kc: var(--done);   --kb: color-mix(in srgb, var(--done) 14%, transparent); }

.cal-page { padding-top: clamp(20px, 3vw, 36px); }
.cal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 32px;
  align-items: end;
  margin-bottom: 22px;
}
.cal-title { margin: 4px 0 8px; font-size: clamp(30px, 4.4vw, 50px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.cal-sub { margin: 0; max-width: 560px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.55; color: var(--ink-2); }
.cal-week { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--lift); }
.cal-week-k { margin: 0 0 8px; font: 700 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.cal-stats { display: grid; grid-template-columns: repeat(4, minmax(64px, auto)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cstat { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--kb); }
.cstat b { font: 700 24px var(--mono); color: var(--kc); line-height: 1; }
.cstat span { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }

/* The bar: view switch on the left, what to show on the right. */
/* Scrolls away with the page (not pinned), as the owner asked. */
.cal-bar, .sp-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 18px; padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.cal-seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--panel-3); border-radius: 10px; }
.cal-seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 0; border-radius: 8px; background: none;
  color: var(--ink-2); font: 600 13px var(--sans); cursor: pointer;
}
.cal-seg-btn svg { width: 16px; height: 16px; }
.cal-seg-btn.is-on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.cal-filt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cal-chip, .cal-board {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink-2); font: 600 12.5px var(--sans); cursor: pointer;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.cal-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--kc); }
.cal-chip { border-color: var(--kb); background: var(--kb); color: var(--ink); }
.cal-chip.is-off { background: var(--panel); border-color: var(--line); color: var(--ink-3); opacity: 0.7; }
.cal-chip.is-off i { background: var(--line); }
.cal-board.is-on { background: var(--chrome); border-color: var(--chrome); color: var(--chrome-ink); }
.cal-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--line); }

/* ---- agenda ---- */
.cweek {
  margin: 26px 0 10px;
  font: 700 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 12px;
}
.cweek::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cweek:first-child { margin-top: 4px; }
.cday {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 18px;
  margin-bottom: 10px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.cday.is-today { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.cday.is-past { opacity: 0.62; }
.cday-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; align-content: flex-start; }
.cday-num { font: 800 34px/0.9 var(--sans); letter-spacing: -0.04em; color: var(--ink); min-width: 1.4em; }
.cday.is-today .cday-num { color: var(--accent); }
.cday-words { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-3); }
.cday-words b { font-size: 14px; color: var(--ink); }
.cday-count { flex-basis: 100%; font: 500 11px var(--mono); color: var(--ink-3); }
.cday-list { list-style: none; margin: 0; padding: 0; min-width: 0; }
/* A day's events, grouped by kind: the label once, its issues beside it. */
.cgrp {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 14px;
  padding: 10px 0; border-top: 1px solid var(--line-2);
}
.cgrp:first-child { border-top: 0; padding-top: 0; }
.cgrp-list { list-style: none; margin: 0; padding: 0; min-width: 0; }
.ce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name gmp" "tags gmp";
  align-items: center; gap: 2px 12px;
  padding: 7px 0;
  border-top: 1px dashed var(--line-2);
}
.ce:first-child { border-top: 0; padding-top: 0; }
.ce-kind {
  align-self: start; justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--kb); color: var(--kc);
  font: 700 12px var(--sans); letter-spacing: 0.02em;
}
.ce-kind b { font-family: var(--mono); font-weight: 700; opacity: 0.75; }
/* Days already gone, in the month grid: there, but out of the way. */
.cm-cell.is-gone { background: var(--panel-2); color: var(--ink-3); cursor: default; }
.ce-name { grid-area: name; font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none; overflow-wrap: break-word; }
.ce-name:hover { color: var(--accent); }
.ce-tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.ce-meta { font-family: var(--mono); }
.ce-hot { color: var(--urgent); font-weight: 700; }
.ce-gmp { grid-area: gmp; font: 600 13.5px var(--mono); text-align: right; white-space: nowrap; }
.ce-gmp small { font-size: 11.5px; font-weight: 500; }
.ce-gmp.is-up { color: var(--up); }
.ce-gmp.is-down { color: var(--down); }
.ce-gmp.is-flat, .ce-gmp.is-none { color: var(--ink-3); }
.cal-empty, .cal-hint { padding: 26px 4px; color: var(--ink-3); font-size: 14px; text-align: center; }

/* ---- month ---- */
.cal-mhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-label { margin: 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; min-width: 9ch; text-align: center; }
.cal-step { display: grid; place-items: center; font-size: 22px; line-height: 1; }
.cal-today {
  margin-left: auto; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--accent); font: 600 12.5px var(--sans); cursor: pointer;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; overflow: hidden;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
}
.cm-wd { padding: 8px 10px; background: var(--panel-2); font: 700 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cm-cell {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  min-height: 108px; padding: 8px; border: 0;
  background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; font: inherit;
  transition: background 0.12s;
}
.cm-cell:hover { background: var(--panel-2); }
.cm-cell.is-out { background: var(--panel-2); color: var(--ink-3); }
.cm-cell.is-weekend:not(.has-ev) { background: var(--panel-2); }
.cm-num { font: 700 13px var(--mono); white-space: nowrap; }
.cm-mon { font: 600 10px var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.02em; }
.cm-cell.is-today .cm-num {
  align-self: flex-start; display: grid; place-items: center; min-width: 24px; height: 24px; margin: -2px;
  padding: 0 4px; box-sizing: border-box; white-space: nowrap;
  border-radius: 12px; background: var(--accent); color: #fff;
}
.cm-cell.is-picked { box-shadow: inset 0 0 0 2px var(--accent); }
.cm-evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cm-ev {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  padding: 2px 6px; border-radius: 6px; background: var(--kb);
  font-size: 11.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-ev i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--kc); }
.cm-more { font-size: 11px; font-weight: 600; color: var(--ink-3); padding-left: 2px; }
.cm-dots { display: none; flex-wrap: wrap; gap: 3px; }
.cm-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--kc); }
.cal-day { margin-top: 16px; }
.cal-note { margin-top: 26px; }

@media (max-width: 860px) {
}
@media (max-width: 760px) {
  .cal-hero { grid-template-columns: minmax(0, 1fr); }
  .cal-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cstat { padding: 8px; }
  .cstat b { font-size: 20px; }
  .cday { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 13px; }
  .cday-head { align-items: center; }
  .cday-count { flex-basis: auto; margin-left: auto; }
  .cday-num { font-size: 28px; }
  .cgrp { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cal-filt { width: 100%; }
  /* A phone's month grid is dots; the picked day's list sits under it. */
  .cm-cell { min-height: 56px; padding: 6px; }
  .cm-evs { display: none; }
  .cm-dots { display: flex; }
  .cm-wd { padding: 6px 4px; text-align: center; font-size: 10px; }
  .cal-label { font-size: 17px; }
}

/* ---- home motion ------------------------------------------------------------
   The redesigned home, brought to life: an entrance on first paint, a little
   life in the hero, and feedback under the pointer. Transform and opacity
   only, so it stays smooth on a phone; none of it for reduced motion. */
@media (prefers-reduced-motion: no-preference) {

@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }

@keyframes tile-pop { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }

@keyframes ico-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-4px) rotate(-8deg); } 70% { transform: translateY(1px); } }

@keyframes hue-drift { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

  /* The LIVE dot sends out a ring, like a signal. */
  .live-badge .stamp-dot { position: relative; }
  .live-badge .stamp-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--up);
    animation: live-ring 1.8s ease-out infinite;
  }
  @keyframes live-ring { from { transform: scale(1); opacity: 0.8; } to { transform: scale(3); opacity: 0; } }

@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* The board's first rows, and a phone's first cards, one after another. */
  #rows.is-intro > tr, #cards.is-intro > .cd { animation: rise-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  #rows.is-intro > tr:nth-child(1), #cards.is-intro > .cd:nth-child(1) { animation-delay: 0.05s; }
  #rows.is-intro > tr:nth-child(2), #cards.is-intro > .cd:nth-child(2) { animation-delay: 0.1s; }
  #rows.is-intro > tr:nth-child(3), #cards.is-intro > .cd:nth-child(3) { animation-delay: 0.15s; }
  #rows.is-intro > tr:nth-child(4), #cards.is-intro > .cd:nth-child(4) { animation-delay: 0.2s; }
  #rows.is-intro > tr:nth-child(5), #cards.is-intro > .cd:nth-child(5) { animation-delay: 0.25s; }
  #rows.is-intro > tr:nth-child(6), #cards.is-intro > .cd:nth-child(6) { animation-delay: 0.3s; }
  #rows.is-intro > tr:nth-child(7), #cards.is-intro > .cd:nth-child(7) { animation-delay: 0.35s; }
  #rows.is-intro > tr:nth-child(8), #cards.is-intro > .cd:nth-child(8) { animation-delay: 0.4s; }
  #rows.is-intro > tr:nth-child(n+9), #cards.is-intro > .cd:nth-child(n+9) { animation-delay: 0.45s; }

  /* Cards and rows answer the pointer. */
  .cd { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .cd:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.07); }

}
/* ---- home (hx) ---------------------------------------------------------------
   The redesigned home: a short headline with one search box and the day's four
   figures; "Last day to bid" as cards; the board; three short lists. */
.hx {
  background:
    radial-gradient(120% 140% at 10% 0%, var(--chrome-soft) 0%, transparent 55%),
    radial-gradient(80% 120% at 92% 0%, var(--accent-bg) 0%, transparent 60%),
    var(--panel);
  border-bottom: 1px solid var(--line);
}
.hx-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: clamp(26px, 4vw, 52px) 0 clamp(24px, 3.4vw, 40px);
}
@media (min-width: 941px) {
  .hx-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; column-gap: clamp(28px, 4vw, 56px); }
}
.hx-title { margin: 6px 0 12px; font-size: clamp(34px, 5vw, 58px); font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.hx-sub { margin: 0 0 22px; max-width: 56ch; font-size: clamp(14.5px, 1.2vw, 16.5px); line-height: 1.55; color: var(--ink-2); }

/* One search box, the board's own search. */
.hx-search {
  display: flex; align-items: center; gap: 10px;
  max-width: 560px; padding: 6px 6px 6px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--lift);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hx-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.hx-search svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.hx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15px var(--sans); color: var(--ink); padding: 8px 0; }
.hx-search input::placeholder { color: var(--ink-3); }
.hx-go {
  flex: none; padding: 9px 18px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: var(--brand-ink);
  font: 600 13.5px var(--sans); text-decoration: none; white-space: nowrap;
}

/* The day's four figures: a 2 x 2 panel of tinted tiles. */
.hx .snap-list {
  margin: 0; max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--lift);
}
.hx .snap-row { --tc: var(--ink-3); --tb: var(--panel-2); background: var(--tb); border-color: transparent; border-radius: 14px; padding: 13px 14px 14px; }
.hx .snap-row.a-up   { --tc: var(--up);     --tb: var(--up-bg); }
.hx .snap-row.a-warn { --tc: var(--urgent); --tb: var(--urgent-bg); }
.hx .snap-row.a-soon { --tc: var(--soon);   --tb: var(--soon-bg); }
.hx .snap-row .snap-v { color: var(--tc); font-family: var(--mono); font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; }
.hx .snap-row .snap-ico { background: var(--panel); color: var(--tc); }
.hx .snap-row .snap-k { color: var(--ink-2); letter-spacing: 0.06em; }
.hx .snap-row.is-act:hover { border-color: var(--tc); box-shadow: none; }

.hx-page > .block { margin-top: clamp(30px, 4vw, 46px); }
.hx-page > .block:first-child { margin-top: 0; }

/* ---- at a glance: three short lists ---- */
.gl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gl-card { padding: 16px 16px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.gl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gl-head h3 { margin: 0; font-size: 15.5px; font-weight: 700; }
.gl-head a { font: 600 12.5px var(--sans); color: var(--accent); text-decoration: none; }
.gl-head a:hover { text-decoration: underline; text-underline-offset: 2px; }
.gl-list { list-style: none; margin: 0; padding: 0; counter-reset: gl; }
.gl-row {
  counter-increment: gl;
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "n name val" "n meta val";
  align-items: center; gap: 1px 10px; padding: 9px 0; border-top: 1px solid var(--line-2);
}
.gl-row:first-child { border-top: 0; }
.gl-row::before { content: counter(gl); grid-area: n; font: 700 12px var(--mono); color: var(--ink-3); }
.gl-name { grid-area: name; font-weight: 600; font-size: 13.5px; color: var(--ink); text-decoration: none; overflow-wrap: break-word; }
.gl-name:hover { color: var(--accent); }
.gl-meta { grid-area: meta; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.gl-val { grid-area: val; font: 600 13px var(--mono); text-align: right; white-space: nowrap; }
.gl-hot { color: var(--urgent); }
.gl-pill { padding: 2px 8px; border-radius: 999px; background: var(--soon-bg); color: var(--soon); font: 700 11px var(--sans); }
.gl-pill.is-out { background: var(--up-bg); color: var(--up); }
.gl-empty { padding: 14px 0; font-size: 13px; color: var(--ink-3); }

@media (max-width: 940px) {
  .gl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .hx-go { padding: 9px 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hx-copy > * { animation: rise-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .hx-copy > :nth-child(2) { animation-delay: 0.1s; }
  .hx-copy > :nth-child(3) { animation-delay: 0.2s; }
  .hx-copy > :nth-child(4) { animation-delay: 0.3s; }
  .hx .snap-list { animation: card-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards; }
  .hx .snap-list.is-intro .snap-row { animation: tile-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
  .hx .snap-list.is-intro .snap-row:nth-of-type(1) { animation-delay: 0.38s; }
  .hx .snap-list.is-intro .snap-row:nth-of-type(2) { animation-delay: 0.46s; }
  .hx .snap-list.is-intro .snap-row:nth-of-type(3) { animation-delay: 0.54s; }
  .hx .snap-list.is-intro .snap-row:nth-of-type(4) { animation-delay: 0.62s; }
  .hx .snap-row { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s; }
  .hx .snap-row.is-act:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); }
  .hx .snap-row.is-act:hover .snap-ico { animation: ico-hop 0.5s ease; }
  .hx .highlight {
    background-image: linear-gradient(90deg, var(--brand-2), var(--brand-pink), var(--brand-2));
    background-size: 200% 100%;
    animation: hue-drift 6s ease-in-out infinite;
  }
}

/* ---- the closing-today chart (restored) ---------------------------------------
   Bars of expected gain for every issue closing today, drawn by app.js. */
@media (min-width: 941px) {
.card-glass {
    grid-area: chart;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
.card-glass .bars { flex: 1 1 auto; align-items: stretch; }
.card-glass .bar-track { flex: 1 1 auto; height: auto; min-height: 96px; }
}
.card-glass {
  padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.8vw, 24px) clamp(12px, 1.3vw, 16px);
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--panel) 85%, var(--line));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07);
}
@supports (backdrop-filter: blur(1px)) {
.card-glass { backdrop-filter: blur(15px); }
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 700;
  color: var(--ink);
}
.chart-note {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 1vw, 14px);
  overflow-x: auto;
  scrollbar-width: none;
}
.bars::-webkit-scrollbar { display: none; }
.bar-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: clamp(32px, 3.6vw, 72px);
}
.bar-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: clamp(96px, 11vw, 140px);
}
.bar-v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(13px, 1.25vw, 16.5px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
  white-space: nowrap;
}
.bar {
  width: 100%;
  max-width: 26px;
  border-radius: 5px 5px 0 0;
  transition: height 0.5s;
}
.bar.b-main { background: var(--bar-main); }
.bar.b-sme { background: var(--bar-sme); }
.chart-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: -12px 0 14px;
  font-size: clamp(11.5px, 0.85vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.key-i { display: inline-flex; align-items: center; gap: 6px; }
.key-sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.key-sw.k-main { background: var(--bar-main); }
.key-sw.k-sme { background: var(--bar-sme); }
.bar-k {
  margin-top: 8px;
  font-size: clamp(11.5px, 0.95vw, 12.5px);
  font-weight: 600;
  line-height: 1.3;
  min-height: 2.6em;
  color: var(--ink);
  max-width: 100%;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bar-sub {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line-2);
  font-size: 12px;
  white-space: nowrap;
}
.bar-sub i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bar-sub .subv { display: inline; font-size: 12.5px; }
.bar-rs {
  margin-top: 3px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
.bars { gap: clamp(2px, 0.7vw, 14px); }
.bar-col { min-width: clamp(30px, 2.4vw, 40px); container-type: inline-size; }
.bar-v { font-size: clamp(10.5px, 26cqi, 16.5px); letter-spacing: -0.02em; }
.bar-rs { font-size: clamp(9.5px, 21cqi, 12.5px); letter-spacing: -0.02em; }
.bar-sub, .bar-sub .subv { font-size: clamp(9.5px, 21cqi, 12.5px); }
.bar-k { font-size: 11.5px; overflow-wrap: break-word; hyphens: auto; }
.bar { max-width: min(26px, 55cqi); }
.bar-v.is-zero { color: var(--ink-3); }
.chart-empty { margin: 18px 0 6px; font-size: 14px; color: var(--ink-3); }
.chart-more { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); text-align: right; }
.chart-more a { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
.bar-sub { white-space: normal; line-height: 1.25; }
.bar-sub i { display: block; font-size: 10px; letter-spacing: 0.08em; }
.bar-sub .subv { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
.bars.is-intro .bar {
    transform-origin: bottom;
    animation: bar-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms + 120ms);
  }
}
@media (prefers-reduced-motion: no-preference) {
.bars.is-intro .bar-v { animation: fade-in 0.4s ease backwards; animation-delay: 0.7s; }
}
@media (prefers-reduced-motion: no-preference) {
  .bars.is-intro .bar { transform-origin: bottom; animation: bar-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
  .bars.is-intro .bar-v { animation: fade-in 0.4s ease backwards; animation-delay: 0.7s; }
  #closing .card-glass { animation: card-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s backwards; }
}
#closing .bar-track { height: clamp(110px, 11vw, 160px); }

@media (prefers-reduced-motion: no-preference) {
  .gl-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .gl-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.07); }
}

/* ---- phone: compact filters and Today tiles -----------------------------------
   Only on a phone. The filter pills and the four Today figures were sized for
   a desktop and took most of a phone's first screen. */
@media (max-width: 700px) {
  .filters { gap: 5px; }
  .box-chk { gap: 4px; padding: 4px 8px; font-size: 11.5px; }
  .box-chk input { width: 12px; height: 12px; }
  .box-chk .tag { min-width: 13px; padding: 0 3px; font-size: 9.5px; line-height: 14px; }
  .box-chk .chk-n { font-size: 10px; }
  .box-chk span { gap: 4px; }
  .clear-btn { font-size: 11.5px; }

  .hx .snap-list { gap: 7px; padding: 9px; border-radius: 16px; }
  .hx .snap-row { padding: 8px 10px 9px; border-radius: 11px; }
  .hx .snap-row .snap-k { font-size: 9.5px; letter-spacing: 0.04em; }
  .hx .snap-row .snap-v { margin-top: 1px; font-size: 19px; }
  .hx .snap-row .snap-note { margin-top: 1px; font-size: 10.5px; line-height: 1.25; }
  .hx .snap-row .snap-ico { width: 30px; height: 30px; border-radius: 9px; }
  .hx .snap-row .snap-ico svg { width: 19px; height: 19px; }
}
/* ---- the subscription page (subpage.js) ---------------------------------------
   Every open issue's demand as a card: the total, then a bar per investor
   category on one log scale across the page. Green at or past 1x (the book is
   covered), amber below it. */
.sp-page { padding-top: clamp(20px, 3vw, 36px); }
.sp-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: end; margin-bottom: 22px; }
.sp-title { margin: 4px 0 8px; font-size: clamp(30px, 4.4vw, 50px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.sp-sub { margin: 0; max-width: 560px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.55; color: var(--ink-2); }
.sp-now { padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--lift); }
.sp-now-k { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.sp-live { display: inline-flex; align-items: center; gap: 5px; color: var(--up); }
.sp-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(70px, auto)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sps { --tc: var(--ink); --tb: var(--panel-2); display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--tb); min-width: 0; }
.sps.a-up { --tc: var(--up); --tb: var(--up-bg); }
.sps.a-warn { --tc: var(--urgent); --tb: var(--urgent-bg); }
.sps.a-top { --tc: var(--done); --tb: color-mix(in srgb, var(--done) 12%, transparent); }
.sps b { font: 700 22px var(--mono); color: var(--tc); line-height: 1.05; }
.sps span { font-size: 11.5px; font-weight: 600; color: var(--ink-2); overflow-wrap: break-word; }

.sp-sort select {
  padding: 6px 30px 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  color: var(--ink-2); font: 600 12.5px var(--sans); appearance: none; -webkit-appearance: none; cursor: pointer;
}

/* Five across on a desktop (1366px), four on a smaller one, one on a phone —
   decided by the card's own minimum, not a breakpoint. */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(236px, 100%), 1fr)); gap: 12px; }
.sp-card {
  display: flex; flex-direction: column; gap: 11px;
  padding: 14px 14px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.sp-card.is-closing { border-top: 3px solid var(--urgent); }
.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sp-id { min-width: 0; }
.sp-name { display: block; font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none; line-height: 1.3; overflow-wrap: break-word; }
.sp-name:hover { color: var(--accent); }
.sp-meta { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.sp-hot { color: var(--urgent); font-weight: 700; }
.sp-gmp { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); font: 700 13px var(--mono); white-space: nowrap; }
.sp-gmp small { font-size: 11px; font-weight: 600; }
.sp-gmp.v-up { background: var(--up-bg); color: var(--up); }
.sp-gmp.v-down { background: var(--down-bg); color: var(--down); }
.sp-gmp.v-flat { color: var(--ink-3); }

.sp-total { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "v k" "bar bar"; align-items: baseline; gap: 4px 10px; }
.sp-tv { grid-area: v; font: 800 clamp(24px, 2vw, 28px) var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.sp-tk { grid-area: k; font-size: 12px; color: var(--ink-3); }
.sp-ttrack { grid-area: bar; height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }

.sp-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sp-cat { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; align-items: center; gap: 8px; }
.sp-cat.is-sub .sp-cl { padding-left: 12px; color: var(--ink-3); font-weight: 500; }
.sp-cl { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sp-track { height: 6px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.sp-cat.is-sub .sp-track { height: 4px; }
.sp-cv { font: 600 12px var(--mono); text-align: right; color: var(--ink); }
.sp-fill { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sp-fill.is-full { background: linear-gradient(90deg, var(--up), color-mix(in srgb, var(--up) 70%, #fff)); }
.sp-fill.is-low { background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 70%, #fff)); }
.sp-nosplit { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.sp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); }
.sp-foot span { font-family: var(--mono); }
.sp-go { margin-left: auto; font: 600 12.5px var(--sans); color: var(--accent); text-decoration: none; }
.sp-go:hover { text-decoration: underline; text-underline-offset: 2px; }
.sp-empty { grid-column: 1 / -1; padding: 30px 4px; text-align: center; color: var(--ink-3); }
.sp-note { margin-top: 26px; }

@media (max-width: 760px) {
  .sp-hero { grid-template-columns: minmax(0, 1fr); }
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sps b { font-size: 19px; }
  .sp-cat { grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .sp-intro > * { animation: rise-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
  .sp-intro > :nth-child(2) { animation-delay: 0.1s; }
  .sp-intro > :nth-child(3) { animation-delay: 0.2s; }
  .sp-now { animation: card-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards; }
  .sp-live i { animation: live-dot 1.6s ease-in-out infinite; }
  @keyframes live-dot { 50% { opacity: 0.3; transform: scale(0.7); } }
  /* Cards arrive one after another on first paint. */
  .sp-grid.is-intro > .sp-card { animation: rise-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(min(var(--n, 0), 10) * 70ms); }
  .sp-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .sp-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.07); }
  /* A figure that moved on refresh blinks once. */
  .sp-blink { animation: sp-blink 1.4s ease-out; border-radius: 4px; }
  @keyframes sp-blink { 0%, 30% { background: var(--accent-bg); color: var(--accent); } 100% { background: transparent; } }
}
@media (prefers-reduced-motion: reduce) { .sp-fill { transition: none; } }
@media (max-width: 760px) {
  .sp-bar .cal-seg { width: 100%; }
  .sp-bar .cal-seg-btn { flex: 1; justify-content: center; padding: 7px 6px; font-size: 12px; white-space: nowrap; }
  .sp-bar .cal-sep { display: none; }
}

/* ==========================================================================
 * THE LOOK — October 2026.
 *
 * A layer over everything above, last in the file so it wins: new type, rounder
 * and softer surfaces, a floating glass header, a dotted hero, and one shared
 * treatment for every card. It changes how things look and nothing about what
 * they are — no markup and no script depends on it, every palette's tokens
 * still drive every colour, and the data vocabulary (emerald up, rose down, red
 * closing, blue upcoming, violet listed) is untouched.
 *
 * To go back: delete from here to the end of the file (the whole look before
 * it is styles.before-redesign.css), and put the fonts link back to Inter +
 * IBM Plex Mono.
 * ========================================================================== */
:root {
  /* The device's own typeface, the clean look the owner picked: Segoe UI on
     Windows, San Francisco on an iPhone or a Mac, Roboto on Android. Nothing
     to download, so text appears at once in a face the reader's eye already
     knows. Numbers in the system's own monospace. */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --display: var(--sans);
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 20px;
  --radius-sm: 12px;
  /* The one shadow every card wears: a hairline's worth up close, a wide soft
     fall under it. Black at low strength, so it suits every palette. */
  --shade: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 28px -12px rgba(15, 23, 42, 0.16);
  --shade-hi: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 36px -14px rgba(15, 23, 42, 0.24);
  --glass: color-mix(in srgb, var(--panel) 78%, transparent);
}
:root[data-theme="dark"] {
  --shade: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 30px -12px rgba(0, 0, 0, 0.6);
  --shade-hi: 0 2px 4px rgba(0, 0, 0, 0.45), 0 20px 40px -14px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shade: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 30px -12px rgba(0, 0, 0, 0.6);
    --shade-hi: 0 2px 4px rgba(0, 0, 0, 0.45), 0 20px 40px -14px rgba(0, 0, 0, 0.7);
  }
}

/* ---- ground: two soft washes of the palette's own colours ---- */
body {
  background:
    radial-gradient(1100px 620px at -8% -12%, var(--chrome-soft), transparent 62%),
    radial-gradient(900px 560px at 108% -6%, var(--accent-bg), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  letter-spacing: 0;
  font-weight: 400;
}
/* Headlines a little tight, as the system faces are drawn to take; controls
   at medium weight rather than bold — the quieter, cleaner reading. */
h1, h2, h3, .hx-title, .block-head h2, .brand, .chart-header > span:first-child {
  font-family: var(--display);
  letter-spacing: -0.025em;
}
.hx-title { font-weight: 700; }
.hx .snap-row .snap-v, .pf-n { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.nav-btn, .btn-primary, .btn-secondary, .hx-go, .box-chk, .seg-btn, .al-go { font-weight: 600; }

/* ---- tape: a slim band, its tag a pill with a pulse ---- */
.tape { background: var(--glass); border-bottom-color: var(--line-2); }
@supports (backdrop-filter: blur(1px)) {
  .tape { backdrop-filter: blur(12px) saturate(150%); }
}
.tape-tag {
  margin: 5px 0 5px 10px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--up) 70%, transparent);
}
.tape-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.tape-run { padding: 8px 0; }
.tick { font-size: 12px; }

/* ---- header: a floating glass bar, right under the tape ----
   No gap between the two: the tape is a fixed 36px and the bar is pinned at
   exactly that, so they meet with nothing between them at the top of the page
   and while scrolling. */
:root { --tape-h: 36px; }
.tape { height: var(--tape-h); }
/* A page without the tape pins its header to the very top — otherwise it
   stuck 36px down with an empty band above it while scrolling. */
body:not(:has(> .tape)) .head { top: 0; }
.head { background: transparent; border-bottom: 0; padding: 0; }
@supports (backdrop-filter: blur(1px)) {
  .head { background: transparent; backdrop-filter: none; }
}
.head-in {
  height: 60px;
  padding: 0 10px 0 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shade);
}
@supports (backdrop-filter: blur(1px)) {
  .head-in { backdrop-filter: blur(16px) saturate(160%); }
}
.brand { font-size: 19px; }
.brand-mark {
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand) 60%, var(--brand-3));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 80%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* The sections, as one segmented pill. */
@media (min-width: 861px) {
  .nav {
    padding: 4px;
    gap: 2px;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-radius: 14px;
  }
  .nav-btn { border-radius: 10px; padding: 7px clamp(10px, 1.1vw, 15px); font-size: 13.5px; }
  .nav-btn:hover { background: var(--panel); }
  .nav-btn.is-on {
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: var(--brand-ink);
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand) 80%, transparent);
  }
}
.icon-btn, .acct-link {
  background: var(--panel);
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.acct-link { border-radius: 999px; }
.icon-btn:hover, .acct-link:hover { transform: translateY(-1px); box-shadow: var(--shade); }

/* Phone: the header stays a plain bar — a blur here would make it the
   containing block of the fixed bottom bar (see "the phone's bottom bar") —
   and the bottom bar floats as a rounded dock. */
@media (max-width: 860px) {
  .head { padding: 0; background: var(--panel); }
  .head-in {
    height: 56px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  .head { border-bottom: 1px solid var(--line-2); }
  .nav {
    left: 10px; right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 6px 4px;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shade-hi);
  }
  .nav-btn { border-radius: 14px; }
  .nav-btn.is-on { background: var(--accent-bg); color: var(--accent); }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- hero: a dotted field under the headline ---- */
.hx { position: relative; background: transparent; border-bottom: 0; }
.hx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-3) 45%, transparent) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 10%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 90% at 20% 10%, #000 0%, transparent 72%);
  opacity: 0.55;
  pointer-events: none;
}
.hx-in { position: relative; }
.hx-title { font-size: clamp(36px, 5.4vw, 64px); letter-spacing: -0.05em; }
.hx-search { padding: 7px 7px 7px 18px; box-shadow: var(--shade); }
.hx-search:focus-within { box-shadow: 0 0 0 4px var(--accent-bg), var(--shade); }
.hx-go, .btn-primary {
  background: linear-gradient(135deg, var(--brand-2), var(--brand) 70%);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 85%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.hx-go:hover, .btn-primary:hover { transform: translateY(-1px); filter: saturate(115%); }
.btn-primary, .btn-secondary { border-radius: 999px; }
.live-badge { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--up) 30%, transparent); }

.hx .snap-list {
  padding: 12px;
  background: var(--glass);
  border-radius: 24px;
  box-shadow: var(--shade-hi);
}
@supports (backdrop-filter: blur(1px)) {
  .hx .snap-list { backdrop-filter: blur(14px) saturate(150%); }
}
.hx .snap-row { border-radius: 16px; }
.hx .snap-row .snap-v { letter-spacing: -0.04em; }

/* ---- section headings carry a small brand mark ---- */
.block-head h2 { display: flex; align-items: center; gap: 10px; }
.block-head h2::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-pink));
  transform: rotate(45deg);
}

/* ---- every card: one surface ---- */
.table-wrap, .toolbar, .gl-card, .al-panel, .login-card, .sp-card, .cd,
.pf-stat, .news-item, .card-glass, .notice, .cal-page .cal-month, .cal-agenda {
  border-radius: var(--radius);
  border-color: var(--line);
  box-shadow: var(--shade);
}
.gl-card, .sp-card, .cd, .news-item {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s, border-color 0.18s;
}
.gl-card:hover, .sp-card:hover, .cd:hover, .news-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shade-hi);
}
.toolbar { padding: 14px 16px; background: var(--glass); }
@supports (backdrop-filter: blur(1px)) {
  .toolbar { backdrop-filter: blur(10px); }
}

/* ---- the table ---- */
.table-wrap { overflow: hidden; overflow-x: auto; }
.tbl thead th {
  background: color-mix(in srgb, var(--panel-2) 92%, var(--accent) 8%);
  color: var(--ink-2);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom-color: var(--line);
}
.tbl tbody td { padding-top: 12px; padding-bottom: 12px; }
.tbl tbody tr { transition: background 0.12s; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.tbl tbody td:first-child::before { width: 4px; border-radius: 0 4px 4px 0; top: 8px; bottom: 8px; }

/* ---- controls ---- */
.box-chk {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.box-chk:hover { transform: translateY(-1px); }
.box-chk { transition: border-color 0.13s, color 0.13s, background 0.13s, transform 0.13s; }
#search { border-radius: 12px; padding: 10px 14px; }
.seg { border-radius: 14px; padding: 4px; }
.seg-btn { border-radius: 10px; }
.pill { border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.cd-btn { border-radius: 999px; }

/* ---- the footer ---- */
.foot {
  position: relative;
  background: var(--glass);
  border-top: 0;
}
.foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-2), var(--brand-pink), transparent);
  opacity: 0.6;
}

/* ---- motion: the tape's dot breathes, cards settle in ---- */
@media (prefers-reduced-motion: no-preference) {
  .tape-tag::before { animation: look-ping 1.8s ease-out infinite; }
  @keyframes look-ping {
    0% { box-shadow: 0 0 0 0 currentColor; }
    70%, 100% { box-shadow: 0 0 0 6px transparent; }
  }
}

/* ---- the day's four tiles on a phone: four boxes side by side ----
   The same shape as the bottom bar: one row of four small boxes, each a glyph
   over its figure, its label and its note, all centred — the whole day in one
   strip instead of a 2 x 2 block that took half the first screen. */
@media (max-width: 700px) {
  .hx .snap-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 20px; }
  .hx .snap-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "ico"
      "v"
      "k"
      "note";
    justify-items: center;
    align-content: start;
    text-align: center;
    row-gap: 3px;
    padding: 9px 4px 8px;
    border-radius: 14px;
  }
  .hx .snap-row .snap-ico { width: 30px; height: 30px; border-radius: 10px; margin-bottom: 2px; }
  .hx .snap-row .snap-ico svg { width: 18px; height: 18px; }
  .hx .snap-row .snap-v { margin: 0; font-size: 18px; line-height: 1.1; white-space: nowrap; }
  .hx .snap-row .snap-k {
    font-size: 8.5px;
    line-height: 1.2;
    letter-spacing: 0.03em;
    max-width: 100%;
  }
  .hx .snap-row .snap-note {
    margin: 0;
    max-width: 100%;
    font-size: 9.5px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* The narrowest phones: the rupee figure is the widest thing in a box. */
@media (max-width: 360px) {
  .hx .snap-row .snap-v { font-size: 15.5px; }
  .hx .snap-row .snap-k { font-size: 8px; }
}

/* ---- the phone's bottom bar: the same names as the desktop ----
   It used to say GMP / Demand / Dates / Allot / Track — short words chosen to
   fit. The owner wants the desktop's own names; they fit at a smaller size,
   scaled with the screen, and the rare one that still cannot ends in "…". */
@media (max-width: 860px) {
  .nav-btn::after { content: none; }
  .nav { padding-left: 2px; padding-right: 2px; }
  .nav-btn { padding-left: 0; padding-right: 0; }
  .nav-t {
    display: block;
    font-size: clamp(7.6px, 2.32vw, 10px);
    letter-spacing: -0.02em;
  }
}
@media (max-width: 360px) {
  .nav { left: 6px; right: 6px; }
}

/* ---- one IPO's page on a phone: compact, like an app ----
   Desktop sizes on a 390px screen made it 4,600px tall: the three lead figures
   stacked one per line and every fact had a desktop's breathing room. Here the
   three figures sit side by side as small boxes, every section is its own
   card, and the type steps down to what a phone app would use. */
@media (max-width: 700px) {
  .co-head { margin-bottom: 12px; }
  .co-title { gap: 10px; }
  .co-mark { width: 40px; height: 40px; border-radius: 11px; font-size: 13px; }
  .co-head h1 { margin: 0 0 6px; font-size: 20px; }
  .co-head .co-tags { gap: 5px; }
  .co-tags .pill, .co-tags .board { font-size: 10.5px; }

  .co-lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    margin-bottom: 14px;
    background: var(--panel);
    border-radius: 18px;
    box-shadow: var(--shade);
  }
  .co-lead .lead-box {
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 10px 6px;
    background: var(--panel-2);
    border-radius: 13px;
  }
  .co-lead .lead-k { font-size: 8.5px; line-height: 1.2; letter-spacing: 0.05em; }
  .co-lead .lead-v { font-size: 16.5px; white-space: nowrap; }
  .co-lead .lead-n { font-size: 9.5px; line-height: 1.25; }

  .co-block {
    margin-bottom: 12px;
    padding: 12px 14px 8px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shade);
  }
  .co-h { margin: 0 0 4px; font-size: 10px; letter-spacing: 0.14em; }
  .dl { padding: 7px 0; }
  .co-block .sheet-dl .dl:last-child { border-bottom: 0; }
  .dl dt { font-size: 12.5px; }
  .dl dd { font-size: 13px; }
  .co-row { gap: 1px; padding: 7px 0; }
  .co-row:first-child { border-top: 0; }
  .co-row:last-child { border-bottom: 0; }
  .co-row dt { font-size: 10.5px; letter-spacing: 0.03em; }
  .co-row dd { font-size: 12.5px; line-height: 1.45; }
  .co-note { margin-top: 6px; font-size: 11.5px; line-height: 1.5; }
  .co-links li { padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
  /* A link a thumb can hit: the whole line, not just the 20px of its text. */
  .co-links a { display: inline-block; padding: 10px 0; }
}

/* ---- chart bars: wider, rounder, lit from the top ----
   Each bar fades from a lighter step of its own colour at the top to the full
   colour at the foot, with a rounded cap — the soft look the owner picked. The
   colours are still each palette's own Mainboard / SME pair, so the legend
   keeps its meaning. */
.bar {
  max-width: min(40px, 70cqi);
  border-radius: 10px 10px 4px 4px;
  box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.35);
}
.bar.b-main { background: linear-gradient(180deg, color-mix(in srgb, var(--bar-main) 62%, #fff), var(--bar-main)); }
.bar.b-sme { background: linear-gradient(180deg, color-mix(in srgb, var(--bar-sme) 62%, #fff), var(--bar-sme)); }
.key-sw { border-radius: 4px; }
.key-sw.k-main { background: linear-gradient(180deg, color-mix(in srgb, var(--bar-main) 62%, #fff), var(--bar-main)); }
.key-sw.k-sme { background: linear-gradient(180deg, color-mix(in srgb, var(--bar-sme) 62%, #fff), var(--bar-sme)); }

/* ---- taps on a phone: no blue box ----
   Android's browser paints a blue box over whatever a finger touches. Every
   control here already shows its own pressed or chosen state, so that box is
   only noise. A tap also no longer leaves a focus ring on a button — the ring
   stays for the keyboard, where it is how you see where you are — and a
   long-press on a control does not select its words. Text on the page is
   still selectable and copyable. */
* { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
button, a, summary, label, .nav-btn, .snap-row, .box-chk, .cd-btn, .al-go, .seg-btn, .pal-opt, .icon-btn, .acct-link, .brand, .tick {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---- the brand: the app icon and "IPO GMP Status" ---- */
.brand { gap: 10px; }
.brand-logo {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.75);
}
.brand-word { font-weight: 800; white-space: nowrap; }
.brand-word b {
  font-weight: 800;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 860px) {
  .brand-logo { width: 32px; height: 32px; border-radius: 9px; }
  .brand { font-size: 17px; gap: 8px; }
}
@media (max-width: 360px) {
  .brand { font-size: 15.5px; gap: 7px; }
  .brand-logo { width: 28px; height: 28px; }
}

/* ---- install as an app (header.js) ---- */
.install-pill {
  display: inline-flex; align-items: center; gap: 7px;
  flex: none;
  height: 36px; padding: 0 14px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand) 70%);
  color: var(--brand-ink);
  font: 600 13px var(--sans);
  cursor: pointer;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 85%, transparent);
}
.install-pill svg { width: 17px; height: 17px; }
.install-pill[hidden] { display: none; }
.install-bar { display: none; }
@media (max-width: 860px) {
  .install-pill { display: none !important; }
  .install-bar {
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    z-index: 89;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 9px 9px 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shade-hi);
  }
  .install-bar[hidden] { display: none; }
  .install-bar img { flex: none; width: 36px; height: 36px; border-radius: 9px; }
  .install-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; color: var(--ink); }
  .install-sub { font-size: 11.5px; color: var(--ink-2); }
  .install-go {
    flex: none; padding: 8px 14px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-2), var(--brand) 70%);
    color: var(--brand-ink); font: 600 13px var(--sans); cursor: pointer;
  }
  .install-go[hidden] { display: none; }
  .install-x {
    flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: var(--panel-2); color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer;
  }
}