/* The six site themes.
 *
 * Every colour, texture, border, radius and motion value the site uses is a
 * custom property, declared once with a default below and then overridden in
 * full by each `[data-theme]` block. app.css, slideshow.css, banners.css,
 * auth.css and admin.css only ever read these — none of them names a colour.
 *
 * The theme comes from D1 (`site_settings.theme`), is served by GET /api/settings
 * and applied to the document element by theme.js before first paint. An
 * unrecognised value is ignored, so the defaults here are also the fallback.
 *
 * Load this AFTER the stylesheets it feeds: the per-theme blocks include a
 * handful of structural rules (tape, corner ticks, crosshairs) that have to win
 * against the base rule they replace.
 *
 * The 1080x1080 card is not themed. card.css scopes its palette to `.bs-card`,
 * so a published card looks the same whatever the site is wearing — a card is
 * an artefact that outlives the design it was rendered under.
 */

/* The contract.
 *
 * Every property the site reads is declared here so nothing is ever `unset`,
 * and every theme below replaces the whole set. These values are a plain,
 * unremarkable paper — deliberately not a design anyone is meant to see.
 * theme-boot.js always writes a data-theme attribute, so the only way to land
 * on the bare contract is with JavaScript disabled, in which case the page has
 * no content to style either. */
:root {
  /* --- palette ------------------------------------------------------------ */
  --paper: #FDFBF5;
  --ink: #22303F;
  --body-ink: #3A4457;
  --muted: #66727F;
  --edge: rgba(36, 48, 68, .16);

  --green: #1F8A4C;
  --red: #D2403C;
  --blue: #2F5BD0;
  --purple: #7A45C9;
  --greenHi: rgba(122, 226, 158, .62);
  --note: #FDF0A8;

  --key-ink: var(--blue);
  --accent-ink: var(--purple);
  --link-ink: var(--green);
  --link-rule: var(--greenHi);
  --focus: var(--purple);

  /* --- surfaces ----------------------------------------------------------- */
  --body-bg:
    repeating-linear-gradient(to bottom, transparent 0 50px, #E3EAF3 50px 52px),
    var(--paper);
  --body-attach: fixed;

  --surface: rgba(255, 255, 255, .62);
  --surface-up: var(--surface);
  --surface-down: var(--surface);
  --surface-soon: var(--surface);
  --surface-show: var(--surface);
  --surface-donor: rgba(255, 255, 255, .45);
  --surface-tile: rgba(255, 255, 255, .8);
  --surface-control: rgba(255, 255, 255, .75);
  --surface-marker: rgba(255, 255, 255, .7);
  --art-bg: #fff;
  --tag-bg: var(--paper);
  --field-bg: rgba(255, 255, 255, .85);
  --field-border: var(--edge);
  --code-bg: rgba(0, 0, 0, .05);

  --panel-border: var(--ink);
  --donor-border: #E8A317;
  --tile-border: #D8C89A;

  --row-alt: rgba(36, 48, 68, .035);
  --row-alt-up: rgba(122, 226, 158, .16);
  --row-alt-down: rgba(255, 150, 150, .13);
  --row-hover: rgba(255, 226, 96, .68);

  /* --- geometry ----------------------------------------------------------- */
  --border-width: 3px;
  --border-style: dashed;
  --ghost-border-style: dashed;
  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-btn: 6px;
  --radius-pill: 999px;
  --radius-pill-sm: 5px;

  /* Card tilts. Only the pinboard themes use these; everything else is square
     to the page, so the default is no rotation at all. */
  --panel-tilt: 0deg;
  --panel-tilt-up: 0deg;
  --panel-tilt-down: 0deg;
  --chip-tilt-open: 0deg;
  --chip-tilt-soon: 0deg;
  --show-tilt: 0deg;
  --donor-tilt: 0deg;
  --logo-tilt: -2deg;

  /* --- depth -------------------------------------------------------------- */
  --shadow-card: none;
  --shadow-card-hover: 4px 5px 0 rgba(0, 0, 0, .12);
  --shadow-hard: 3px 3px 0 rgba(0, 0, 0, .16);
  --shadow-tile: none;

  /* --- motion ------------------------------------------------------------- */
  --card-hover-transform: translateY(-2px);
  --tile-hover-transform: rotate(-1.4deg) scale(1.03);
  --btn-hover-transform: rotate(-1.2deg) translateY(-2px);
  --btn-hover-shadow: 3px 4px 0 rgba(0, 0, 0, .14);
  --primary-hover-shadow: 3px 4px 0 rgba(0, 0, 0, .14);
  --control-hover-bg: rgba(255, 226, 96, .68);
  --control-hover-ink: var(--ink);

  /* --- buttons ------------------------------------------------------------ */
  --btn-bg: rgba(255, 255, 255, .6);
  --btn-ink: var(--ink);
  --btn-border: var(--ink);
  --primary-bg: var(--green);
  --primary-border: var(--green);
  --primary-ink: #fff;

  /* --- headings ----------------------------------------------------------- */
  --title-ink: var(--green);
  --title-shadow: none;
  --title-fill: none;
  --title-clip: border-box;
  --subtitle-ink: var(--ink);

  --heading-ink: var(--ink);
  --heading-hi: var(--greenHi);
  --heading-hi-inset: 6px -5px 4px;
  --heading-hi-tilt: -.9deg;
  --heading-hi-radius: 3px;
  --heading-hi-shadow: none;

  --donor-cap-ink: var(--ink);
  --donor-cap-hi: rgba(255, 226, 96, .68);

  /* --- pills -------------------------------------------------------------- */
  --stance-buy-bg: rgba(122, 226, 158, .2);
  --stance-buy-ink: var(--green);
  --stance-sell-bg: rgba(255, 150, 150, .16);
  --stance-sell-ink: var(--red);
  --stance-watch-bg: rgba(180, 150, 240, .16);
  --stance-watch-ink: var(--purple);
  --stance-neutral-bg: transparent;

  /* --- sticky notes ------------------------------------------------------- */
  --note-ink: var(--ink);
  --note-cap-ink: #8A6A12;
  --note-cap-rule: #D9C05A;
  --tape: rgba(167, 139, 214, .5);

  /* --- slideshow dots ----------------------------------------------------- */
  --dot-border: var(--ink);
  --dot-bg: transparent;
  --dot-active: var(--green);

  /* Tells the browser which way to render native controls — the index <select>
     and its dropdown, scrollbars, focus rings. Without it the dark themes get a
     white dropdown list punched through them. */
  color-scheme: light;

  /* --- pointer and click effects ------------------------------------------ */
  --fx-pointer: radial-gradient(
    280px circle at var(--mx, -999px) var(--my, -999px),
    rgba(36, 48, 68, .07), transparent 70%);
  --ripple-fill: radial-gradient(circle, rgba(36, 48, 68, .18), transparent 70%);
  --ripple-ring: 0;
  --ripple-size: 240px;
  --ripple-ms: 700ms;
}

/* ===========================================================================
   1 — STICKY BOARD
   The page is a pinboard. Every block is a coloured note taped at a slight
   angle, so colour comes from the paper itself rather than from ink.
   ======================================================================== */

[data-theme='sticky'] {
  --paper: #E8E2D4;
  --ink: #2B2A26;
  --body-ink: #3D3B34;
  --muted: #56534A;
  --edge: rgba(0, 0, 0, .16);

  /* Darker than the pinboard mockup's greens and greys: the notes are pale
     enough that the original values landed under 4.5:1 for small text. */
  --green: #17612F;
  --red: #B32E2D;
  --blue: #2F5BD0;
  --purple: #6B4FC4;
  --key-ink: #1F3A6E;
  --link-ink: var(--green);
  --link-rule: rgba(23, 97, 47, .4);

  --body-bg:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .5), transparent 45%),
    repeating-conic-gradient(rgba(0, 0, 0, .022) 0% 25%, transparent 0% 50%) 0 0 / 9px 9px,
    var(--paper);
  --body-attach: scroll;

  --surface: #A8E6F0;
  --surface-up: #C8EE9A;
  --surface-down: #FFC2D4;
  --surface-soon: #DCC8F5;
  --surface-show: #FFE98A;
  --surface-donor: #FFD1A3;
  --surface-tile: #FFFDF4;
  --surface-control: rgba(255, 255, 255, .75);
  --surface-marker: #DCC8F5;
  --tag-bg: var(--paper);
  --field-bg: #FFFDF4;
  --field-border: rgba(0, 0, 0, .2);
  --code-bg: rgba(0, 0, 0, .07);

  --panel-border: transparent;
  --donor-border: transparent;
  --tile-border: transparent;
  --border-width: 0px;
  --border-style: solid;
  --ghost-border-style: solid;
  --radius-lg: 2px;
  --radius-md: 2px;
  --radius-btn: 2px;
  --radius-pill-sm: 2px;

  --panel-tilt: 0deg;
  --panel-tilt-up: .6deg;
  --panel-tilt-down: -.7deg;
  --chip-tilt-open: .8deg;
  --chip-tilt-soon: -1deg;
  --show-tilt: -.5deg;
  --donor-tilt: .4deg;

  --row-alt: rgba(255, 255, 255, .3);
  --row-alt-up: rgba(255, 255, 255, .3);
  --row-alt-down: rgba(255, 255, 255, .3);
  --row-hover: rgba(255, 255, 255, .62);

  --shadow-card: 3px 5px 0 rgba(0, 0, 0, .13), 0 12px 22px -12px rgba(0, 0, 0, .35);
  --shadow-card-hover: 5px 8px 0 rgba(0, 0, 0, .14), 0 22px 34px -16px rgba(0, 0, 0, .4);
  --shadow-hard: 3px 5px 0 rgba(0, 0, 0, .13);
  --shadow-tile: 2px 3px 0 rgba(0, 0, 0, .12);
  --card-hover-transform: rotate(0deg) translateY(-4px) scale(1.012);
  --tile-hover-transform: rotate(0deg) translateY(-4px) scale(1.04);
  --btn-hover-transform: translateY(-2px) rotate(-1deg);
  --btn-hover-shadow: 3px 5px 0 rgba(0, 0, 0, .18);
  --primary-hover-shadow: 3px 5px 0 rgba(0, 0, 0, .18);
  --control-hover-bg: #fff;

  --btn-bg: #A8E6F0;
  --btn-ink: var(--ink);
  --btn-border: transparent;
  --primary-ink: #fff;

  --title-ink: var(--ink);
  --title-shadow: 3px 3px 0 rgba(255, 255, 255, .65);
  --heading-ink: var(--ink);
  --heading-hi: #FFE98A;
  --heading-hi-inset: 0;
  --heading-hi-tilt: -1deg;
  --heading-hi-radius: 2px;
  --heading-hi-shadow: 2px 3px 0 rgba(0, 0, 0, .12);
  --donor-cap-hi: #fff;

  --stance-buy-bg: var(--green);
  --stance-buy-ink: #fff;
  --stance-sell-bg: var(--red);
  --stance-sell-ink: #fff;
  --stance-watch-bg: var(--purple);
  --stance-watch-ink: #fff;
  --stance-neutral-bg: #B8B4A8;

  --tape: rgba(214, 198, 160, .72);
  --dot-border: var(--ink);
  --dot-active: var(--ink);

  --fx-pointer: radial-gradient(
    420px circle at var(--mx, -999px) var(--my, -999px),
    rgba(255, 255, 255, .42), transparent 68%);
  --ripple-fill: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 233, 138, .5) 40%, transparent 68%);
  --ripple-ring: 3px solid rgba(0, 0, 0, .14);
  --ripple-size: 180px;
  --ripple-ms: 520ms;
}

[data-theme='sticky'] body { perspective: 1400px; }
[data-theme='sticky'] .pct { font-family: 'Permanent Marker', cursive; }
[data-theme='sticky'] .movers.down .pct { color: #96201F; }
[data-theme='sticky'] .tone-neutral { color: #fff; }

/* Masking tape across the top of each note. */
[data-theme='sticky'] .panel::before,
[data-theme='sticky'] .show::before,
[data-theme='sticky'] .donor-wall::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 104px;
  height: 24px;
  background: var(--tape);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

[data-theme='sticky'] a.banner:active,
[data-theme='sticky'] a.donor-tile:active {
  transform: translateY(2px) scale(.995);
  box-shadow: 1px 2px 0 rgba(0, 0, 0, .16);
}

/* ===========================================================================
   2 — ENGINEER'S NOTEBOOK
   Graph paper and saturated technical inks. The most instrument-like of the
   seven: dense, precise and confident with numbers.
   ======================================================================== */

[data-theme='blueprint'] {
  --paper: #FAF8F1;
  --ink: #16323D;
  --body-ink: #2A4550;
  --muted: #5A6B73;
  --edge: rgba(22, 50, 61, .2);

  --green: #2F7D32;
  --red: #C42A6B;
  --blue: #2B3A8F;
  --purple: #D98218;
  --key-ink: #2B3A8F;
  --accent-ink: #2B3A8F;
  --link-ink: #0E7C86;
  --link-rule: #0E7C86;
  --focus: #C42A6B;

  --body-bg:
    linear-gradient(rgba(46, 92, 110, .22) 1px, transparent 1px) 0 0 / 100% 100px,
    linear-gradient(90deg, rgba(46, 92, 110, .22) 1px, transparent 1px) 0 0 / 100px 100%,
    linear-gradient(rgba(46, 92, 110, .13) 1px, transparent 1px) 0 0 / 100% 20px,
    linear-gradient(90deg, rgba(46, 92, 110, .13) 1px, transparent 1px) 0 0 / 20px 100%,
    var(--paper);
  --body-attach: scroll;

  --surface: rgba(255, 255, 255, .72);
  --surface-donor: rgba(255, 255, 255, .72);
  --surface-tile: rgba(255, 255, 255, .8);
  --surface-marker: linear-gradient(100deg, rgba(43, 58, 143, .09), rgba(217, 130, 24, .12));
  --field-bg: #fff;
  --field-border: rgba(22, 50, 61, .35);

  --panel-border: var(--ink);
  --donor-border: #D98218;
  --tile-border: rgba(217, 130, 24, .6);
  --border-width: 2px;
  --border-style: solid;
  --ghost-border-style: dashed;
  --radius-lg: 3px;
  --radius-md: 3px;
  --radius-btn: 3px;
  --radius-pill-sm: 2px;

  --row-alt: rgba(14, 124, 134, .06);
  --row-alt-up: rgba(14, 124, 134, .06);
  --row-alt-down: rgba(14, 124, 134, .06);
  --row-hover: rgba(196, 42, 107, .13);

  --shadow-card: none;
  --shadow-card-hover: 4px 4px 0 #2B3A8F;
  --shadow-hard: 2px 2px 0 rgba(22, 50, 61, .2);
  --card-hover-transform: translate(-2px, -2px);
  --tile-hover-transform: translate(-1px, -1px);
  --btn-hover-transform: translate(-1px, -1px);
  --btn-hover-shadow: 3px 3px 0 var(--ink);
  --primary-hover-shadow: 3px 3px 0 #C42A6B;
  --control-hover-bg: #0E7C86;
  --control-hover-ink: #fff;

  --btn-bg: rgba(255, 255, 255, .7);
  --btn-border: var(--ink);
  --primary-bg: #0E7C86;
  --primary-border: #0E7C86;

  --title-ink: #0E7C86;
  --subtitle-ink: #2B3A8F;
  --heading-ink: var(--paper);
  --heading-hi: #0E7C86;
  --heading-hi-inset: 0;
  --heading-hi-tilt: 0deg;
  --heading-hi-radius: 2px;
  --donor-cap-ink: #D98218;
  --donor-cap-hi: transparent;

  --stance-buy-bg: var(--green);
  --stance-buy-ink: #fff;
  --stance-sell-bg: var(--red);
  --stance-sell-ink: #fff;
  --stance-watch-bg: #D98218;
  --stance-watch-ink: #fff;
  --stance-neutral-bg: #7A8B93;

  --dot-border: var(--ink);
  --dot-active: #C42A6B;

  --fx-pointer: none;
  --ripple-fill: radial-gradient(circle, rgba(196, 42, 107, .14), transparent 62%);
  --ripple-ring: 2px solid rgba(196, 42, 107, .85);
  --ripple-size: 210px;
  --ripple-ms: 560ms;
  --tape: rgba(43, 58, 143, .35);
}

[data-theme='blueprint'] section:nth-of-type(2) h2.section::before { background: #2B3A8F; }
[data-theme='blueprint'] section:nth-of-type(3) h2.section::before { background: #C42A6B; }
[data-theme='blueprint'] section:nth-of-type(4) h2.section::before { background: #D98218; }

[data-theme='blueprint'] .donor-wall > .cap { border-bottom: 2px solid #D98218; }
[data-theme='blueprint'] .tone-neutral { color: #fff; }
[data-theme='blueprint'] .movers .px,
[data-theme='blueprint'] .movers .pct,
[data-theme='blueprint'] .movers .rank,
[data-theme='blueprint'] .slide-meta .tickers {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme='blueprint'] .movers .pct { font-weight: 700; font-size: 16px; }
[data-theme='blueprint'] .movers.dense tbody tr:hover { outline: 1px solid #C42A6B; }
[data-theme='blueprint'] .dot { border-radius: 2px; }
[data-theme='blueprint'] .dot:hover { transform: scale(1.3) rotate(45deg); }

/* A drafting tick in the corner of every container. */
[data-theme='blueprint'] .panel::after,
[data-theme='blueprint'] .show::after,
[data-theme='blueprint'] .chip::after,
[data-theme='blueprint'] .donor-wall::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #C42A6B;
  border-right: 2px solid #C42A6B;
}

/* Crosshair guides instead of a glow: this theme tracks the pointer with
   drafting lines, which is why --fx-pointer is none. */
[data-theme='blueprint'] .fx-layer::before,
[data-theme='blueprint'] .fx-layer::after {
  content: '';
  position: fixed;
  background: rgba(196, 42, 107, .28);
}
[data-theme='blueprint'] .fx-layer::before { left: 0; right: 0; height: 1px; top: var(--my, -999px); }
[data-theme='blueprint'] .fx-layer::after { top: 0; bottom: 0; width: 1px; left: var(--mx, -999px); }

/* ===========================================================================
   3 — WATERCOLOUR
   Colour as washes that bleed into the paper rather than as borders. The
   softest and most editorial of the seven.
   ======================================================================== */

[data-theme='watercolour'] {
  --paper: #FCFAF4;
  --ink: #33333B;
  --body-ink: #45454F;
  --muted: #6E6E79;
  --edge: rgba(51, 51, 59, .12);

  /* The washes are very light, so the inks have to be darker than the paint
     they are meant to evoke — these are the values that clear 4.5:1 on them. */
  --green: #2F7048;
  --red: #C4315A;
  --blue: #1B6E6A;
  --purple: #6B4CB0;
  --key-ink: #6B4CB0;
  --link-ink: #1B6E6A;
  --link-rule: rgba(27, 110, 106, .45);
  --focus: #8A6BC9;

  --body-bg:
    radial-gradient(900px 520px at 12% -6%, rgba(229, 105, 138, .16), transparent 62%),
    radial-gradient(760px 460px at 88% 8%, rgba(46, 156, 151, .16), transparent 62%),
    radial-gradient(820px 500px at 45% 100%, rgba(224, 163, 46, .14), transparent 62%),
    repeating-linear-gradient(to bottom, transparent 0 51px, rgba(140, 150, 170, .09) 51px 52px),
    var(--paper);

  --surface: rgba(255, 255, 255, .66);
  --surface-up: linear-gradient(160deg, rgba(78, 150, 104, .16), rgba(255, 255, 255, .7));
  --surface-down: linear-gradient(160deg, rgba(229, 105, 138, .16), rgba(255, 255, 255, .7));
  --surface-soon: linear-gradient(150deg, rgba(138, 107, 201, .2), rgba(255, 255, 255, .72));
  --surface-show: linear-gradient(150deg, rgba(46, 156, 151, .12), rgba(255, 255, 255, .74));
  --surface-donor: linear-gradient(150deg, rgba(224, 163, 46, .16), rgba(255, 255, 255, .72));
  --surface-tile: rgba(255, 255, 255, .75);
  --surface-control: rgba(255, 255, 255, .85);
  --surface-marker: linear-gradient(105deg, rgba(138, 107, 201, .2), rgba(229, 105, 138, .16));
  --field-bg: rgba(255, 255, 255, .85);

  --panel-border: transparent;
  --donor-border: transparent;
  --tile-border: transparent;
  --border-width: 0px;
  --border-style: solid;
  --ghost-border-style: solid;
  --radius-lg: 18px;
  --radius-md: 16px;
  --radius-btn: 999px;
  --radius-pill-sm: 999px;

  --row-alt: transparent;
  --row-alt-up: transparent;
  --row-alt-down: transparent;
  --row-hover: rgba(255, 255, 255, .72);

  --shadow-card: 0 2px 0 rgba(255, 255, 255, .9) inset, 0 14px 30px -20px rgba(51, 51, 59, .5);
  --shadow-card-hover: 0 22px 40px -22px rgba(51, 51, 59, .55);
  --shadow-hard: 0 8px 18px -12px rgba(51, 51, 59, .5);
  --shadow-tile: 0 8px 18px -14px rgba(51, 51, 59, .5);
  --card-hover-transform: translateY(-3px);
  --tile-hover-transform: translateY(-4px) scale(1.03);
  --btn-hover-transform: translateY(-2px);
  --btn-hover-shadow: 0 8px 18px -8px rgba(51, 51, 59, .5);
  --primary-hover-shadow: 0 8px 18px -8px rgba(51, 51, 59, .5);
  --control-hover-bg: #2E9C97;
  --control-hover-ink: #fff;

  --btn-bg: rgba(255, 255, 255, .55);
  --btn-border: rgba(51, 51, 59, .28);
  --primary-bg: linear-gradient(100deg, #2E9C97, #4E9668);
  --primary-border: transparent;

  --title-ink: transparent;
  --title-fill: linear-gradient(96deg, #E5698A, #8A6BC9 42%, #2E9C97);
  --title-clip: text;
  --subtitle-ink: #55555F;

  --heading-ink: var(--ink);
  --heading-hi:
    radial-gradient(ellipse at 30% 60%, rgba(229, 105, 138, .34), transparent 70%),
    radial-gradient(ellipse at 75% 40%, rgba(224, 163, 46, .3), transparent 72%);
  --heading-hi-inset: 2px -10px 0;
  --heading-hi-tilt: 0deg;
  --heading-hi-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  --donor-cap-ink: #E0A32E;
  --donor-cap-hi:
    radial-gradient(ellipse at 32% 58%, rgba(224, 163, 46, .34), transparent 70%),
    radial-gradient(ellipse at 76% 42%, rgba(229, 105, 138, .24), transparent 72%);

  /* Filled pills carrying white text, so the fill has to be dark enough on its
     own — the pastel versions of these read as decoration but not as words. */
  --stance-buy-bg: #2F7048;
  --stance-buy-ink: #fff;
  --stance-sell-bg: #C4315A;
  --stance-sell-ink: #fff;
  --stance-watch-bg: #6B4CB0;
  --stance-watch-ink: #fff;
  --stance-neutral-bg: #6E6E79;

  --dot-border: transparent;
  --dot-active: #8A6BC9;

  --fx-pointer: radial-gradient(
    520px circle at var(--mx, -999px) var(--my, -999px),
    rgba(138, 107, 201, .16), rgba(46, 156, 151, .09) 42%, transparent 70%);
  --ripple-fill: radial-gradient(circle, rgba(138, 107, 201, .4), rgba(229, 105, 138, .22) 42%, transparent 70%);
  --ripple-ring: 0;
  --ripple-size: 320px;
  --ripple-ms: 900ms;
  --tape: rgba(138, 107, 201, .35);
  --dot-bg: rgba(51, 51, 59, .22);
}

[data-theme='watercolour'] section:nth-of-type(2) h2.section::before {
  background:
    radial-gradient(ellipse at 35% 55%, rgba(46, 156, 151, .34), transparent 70%),
    radial-gradient(ellipse at 78% 45%, rgba(138, 107, 201, .28), transparent 72%);
}
[data-theme='watercolour'] section:nth-of-type(3) h2.section::before {
  background:
    radial-gradient(ellipse at 30% 60%, rgba(224, 163, 46, .36), transparent 70%),
    radial-gradient(ellipse at 76% 40%, rgba(229, 105, 138, .26), transparent 72%);
}
[data-theme='watercolour'] section:nth-of-type(4) h2.section::before {
  background:
    radial-gradient(ellipse at 32% 58%, rgba(78, 150, 104, .32), transparent 70%),
    radial-gradient(ellipse at 74% 42%, rgba(46, 156, 151, .26), transparent 72%);
}

[data-theme='watercolour'] .movers .pct { font-family: 'Patrick Hand', cursive; font-weight: 700; }
[data-theme='watercolour'] .tone-neutral { color: #fff; }
[data-theme='watercolour'] .dot.is-active { width: 26px; border-radius: 999px; }
[data-theme='watercolour'] .nav { border-radius: 50%; }

/* ===========================================================================
   4 — NIGHT MARKER
   The same hand on black sketchbook paper, in neon marker.
   ======================================================================== */

[data-theme='nightmarker'] {
  --paper: #14161C;
  --ink: #ECEFF6;
  --body-ink: rgba(236, 239, 246, .82);
  --muted: #98A1B4;
  --edge: rgba(236, 239, 246, .16);

  --green: #7BE86B;
  --red: #FF5C8A;
  --blue: #4FD6E8;
  --purple: #B07BFF;
  --key-ink: #4FD6E8;
  --accent-ink: #B07BFF;
  --link-ink: #7BE86B;
  --link-rule: rgba(123, 232, 107, .45);
  --focus: #4FD6E8;

  --body-bg:
    repeating-linear-gradient(to bottom, transparent 0 50px, rgba(120, 140, 180, .10) 50px 51px),
    radial-gradient(1000px 600px at 15% -10%, rgba(176, 123, 255, .14), transparent 60%),
    radial-gradient(900px 520px at 85% 5%, rgba(79, 214, 232, .11), transparent 60%),
    var(--paper);

  --surface: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  --surface-up: var(--surface);
  --surface-down: var(--surface);
  --surface-soon: var(--surface);
  --surface-show: var(--surface);
  --surface-donor: var(--surface);
  --surface-tile: rgba(255, 255, 255, .03);
  --surface-control: rgba(255, 255, 255, .05);
  --surface-marker: linear-gradient(100deg, rgba(176, 123, 255, .16), rgba(79, 214, 232, .09));
  --art-bg: rgba(255, 255, 255, .9);
  --tag-bg: var(--paper);
  --field-bg: rgba(255, 255, 255, .06);
  --field-border: rgba(236, 239, 246, .28);
  --code-bg: rgba(255, 255, 255, .08);
  --note: #2A2418;
  --note-ink: #FFE9A8;
  --note-cap-ink: #FFC24B;
  --note-cap-rule: rgba(255, 194, 75, .5);

  --panel-border: rgba(236, 239, 246, .18);
  --donor-border: rgba(255, 194, 75, .38);
  --tile-border: rgba(255, 194, 75, .4);
  --border-width: 1px;
  --border-style: solid;
  --ghost-border-style: solid;
  --radius-lg: 14px;
  --radius-md: 14px;
  --radius-btn: 8px;
  --radius-pill-sm: 6px;

  --row-alt: rgba(255, 255, 255, .028);
  --row-alt-up: rgba(255, 255, 255, .028);
  --row-alt-down: rgba(255, 255, 255, .028);
  --row-hover: rgba(79, 214, 232, .11);

  --shadow-card: none;
  --shadow-card-hover: 0 0 34px -14px #4FD6E8, 0 18px 34px -22px #000;
  --shadow-hard: 0 8px 20px -14px #000;
  --card-hover-transform: translateY(-3px);
  --tile-hover-transform: translateY(-3px);
  --btn-hover-transform: translateY(-2px);
  --btn-hover-shadow: 0 0 18px -4px #4FD6E8;
  --primary-hover-shadow: 0 0 24px -4px #7BE86B;
  --control-hover-bg: rgba(79, 214, 232, .18);
  --control-hover-ink: #4FD6E8;

  --btn-bg: rgba(255, 255, 255, .04);
  --btn-ink: var(--ink);
  --btn-border: rgba(236, 239, 246, .32);
  --primary-bg: #7BE86B;
  --primary-border: #7BE86B;
  --primary-ink: #12331A;

  --title-ink: #7BE86B;
  --title-shadow: 0 0 18px rgba(123, 232, 107, .5), 0 0 48px rgba(123, 232, 107, .22);
  --subtitle-ink: var(--muted);

  --heading-ink: var(--paper);
  --heading-hi: #7BE86B;
  --heading-hi-inset: 0;
  --heading-hi-tilt: 0deg;
  --heading-hi-radius: 4px;
  --donor-cap-ink: #FFC24B;
  --donor-cap-hi: transparent;

  --stance-buy-bg: transparent;
  --stance-buy-ink: #7BE86B;
  --stance-sell-bg: transparent;
  --stance-sell-ink: #FF5C8A;
  --stance-watch-bg: transparent;
  --stance-watch-ink: #B07BFF;
  --stance-neutral-bg: transparent;

  --dot-border: rgba(236, 239, 246, .35);
  --dot-active: #7BE86B;

  --fx-pointer: radial-gradient(
    340px circle at var(--mx, -999px) var(--my, -999px),
    rgba(123, 232, 107, .13), rgba(79, 214, 232, .07) 45%, transparent 72%);
  --ripple-fill: radial-gradient(circle, rgba(123, 232, 107, .45), rgba(79, 214, 232, .2) 45%, transparent 70%);
  --ripple-ring: 2px solid rgba(123, 232, 107, .7);
  --ripple-size: 260px;
  --ripple-ms: 720ms;
  --tape: rgba(176, 123, 255, .35);
  color-scheme: dark;
}

[data-theme='nightmarker'] section:nth-of-type(2) h2.section::before { background: #4FD6E8; }
[data-theme='nightmarker'] section:nth-of-type(3) h2.section::before { background: #FFC24B; }
[data-theme='nightmarker'] section:nth-of-type(4) h2.section::before { background: #B07BFF; }

[data-theme='nightmarker'] .panel.green { border-color: rgba(123, 232, 107, .4); }
[data-theme='nightmarker'] .panel.red { border-color: rgba(255, 92, 138, .4); }
[data-theme='nightmarker'] .chip.open { border-color: rgba(123, 232, 107, .45); }
[data-theme='nightmarker'] .chip.soon { border-color: rgba(176, 123, 255, .45); }
[data-theme='nightmarker'] .movers .pct { font-family: 'Permanent Marker', cursive; }
[data-theme='nightmarker'] .movers.up .pct { text-shadow: 0 0 12px rgba(123, 232, 107, .35); }
[data-theme='nightmarker'] .movers.down .pct { text-shadow: 0 0 12px rgba(255, 92, 138, .3); }
[data-theme='nightmarker'] .tone { box-shadow: 0 0 14px -6px currentColor; }

/* ===========================================================================
   5 — NIGHT BOARD
   The pinboard after hours: dark cork, and notes that are lit rather than
   printed, so the colour reads as backlit paper.
   ======================================================================== */

[data-theme='nightsticky'] {
  --paper: #191713;
  --ink: #F2EEE4;
  --body-ink: rgba(242, 238, 228, .86);
  /* Lighter than the other themes' muted grey: this one's secondary text sits
     on the lit notes, not on the dark board, and the amber note is the
     brightest backdrop any small text has to survive. */
  --muted: #DCD5C6;
  --edge: rgba(255, 255, 255, .2);

  --green: #6FD98A;
  --red: #FF6F7A;
  --blue: #74B4FF;
  --purple: #B491FF;
  --key-ink: #BBD9FF;
  --accent-ink: #E2D2FF;
  --link-ink: #FFE9A8;
  --link-rule: rgba(255, 233, 168, .4);
  --focus: #FFE9A8;

  --body-bg:
    radial-gradient(circle at 22% 12%, rgba(255, 236, 190, .07), transparent 46%),
    repeating-conic-gradient(rgba(255, 255, 255, .016) 0% 25%, transparent 0% 50%) 0 0 / 9px 9px,
    var(--paper);
  --body-attach: scroll;

  --surface: #0F4E52;
  --surface-up: #2A5420;
  --surface-down: #6B2440;
  --surface-soon: #3F2A66;
  --surface-show: #6B5410;
  --surface-donor: #6B3A17;
  --surface-tile: rgba(255, 255, 255, .07);
  --surface-control: rgba(255, 255, 255, .14);
  --surface-marker: #3F2A66;
  --art-bg: rgba(255, 255, 255, .9);
  --tag-bg: var(--paper);
  --field-bg: rgba(255, 255, 255, .1);
  --field-border: rgba(255, 255, 255, .3);
  --code-bg: rgba(255, 255, 255, .1);
  --note: #6B5410;
  --note-ink: #FFF6DF;
  --note-cap-ink: #FFE9A8;
  --note-cap-rule: rgba(255, 233, 168, .55);

  --panel-border: transparent;
  --donor-border: transparent;
  --tile-border: transparent;
  --border-width: 0px;
  --border-style: solid;
  --ghost-border-style: solid;
  --radius-lg: 2px;
  --radius-md: 2px;
  --radius-btn: 2px;
  --radius-pill-sm: 2px;

  --panel-tilt: 0deg;
  --panel-tilt-up: .6deg;
  --panel-tilt-down: -.7deg;
  --chip-tilt-open: .8deg;
  --chip-tilt-soon: -1deg;
  --show-tilt: -.5deg;
  --donor-tilt: .4deg;

  --row-alt: rgba(255, 255, 255, .05);
  --row-alt-up: rgba(255, 255, 255, .05);
  --row-alt-down: rgba(255, 255, 255, .05);
  --row-hover: rgba(255, 255, 255, .11);

  --shadow-card: 3px 5px 0 rgba(0, 0, 0, .45), 0 16px 30px -16px #000;
  --shadow-card-hover: 5px 8px 0 rgba(0, 0, 0, .5), 0 26px 40px -18px #000, 0 0 40px -18px rgba(255, 236, 190, .6);
  --shadow-hard: 3px 5px 0 rgba(0, 0, 0, .45);
  --shadow-tile: 2px 3px 0 rgba(0, 0, 0, .4);
  --card-hover-transform: rotate(0deg) translateY(-4px) scale(1.012);
  --tile-hover-transform: rotate(0deg) translateY(-4px) scale(1.04);
  --btn-hover-transform: translateY(-2px) rotate(-1deg);
  --btn-hover-shadow: 3px 5px 0 rgba(0, 0, 0, .5);
  --primary-hover-shadow: 3px 5px 0 rgba(0, 0, 0, .5);
  --control-hover-bg: rgba(255, 236, 190, .3);

  --btn-bg: #0F4E52;
  --btn-ink: var(--ink);
  --btn-border: transparent;
  --primary-bg: #6FD98A;
  --primary-border: #6FD98A;
  --primary-ink: #0E2B16;

  --title-ink: #FFE9A8;
  --title-shadow: 3px 3px 0 rgba(0, 0, 0, .5), 0 0 34px rgba(255, 233, 168, .3);
  --subtitle-ink: var(--muted);

  --heading-ink: #221F1A;
  --heading-hi: #FFE9A8;
  --heading-hi-inset: 0;
  --heading-hi-tilt: -1deg;
  --heading-hi-radius: 2px;
  --heading-hi-shadow: 2px 3px 0 rgba(0, 0, 0, .45);
  --donor-cap-ink: #221F1A;
  --donor-cap-hi: #FFE9A8;

  --stance-buy-bg: #6FD98A;
  --stance-buy-ink: #0E2B16;
  --stance-sell-bg: #FF6F7A;
  --stance-sell-ink: #3A0D12;
  --stance-watch-bg: #B491FF;
  --stance-watch-ink: #1E1233;
  --stance-neutral-bg: rgba(242, 238, 228, .28);

  --tape: rgba(226, 210, 170, .26);
  --dot-border: rgba(242, 238, 228, .6);
  --dot-active: #FFE9A8;

  --fx-pointer: radial-gradient(
    440px circle at var(--mx, -999px) var(--my, -999px),
    rgba(255, 236, 190, .11), transparent 68%);
  --ripple-fill: radial-gradient(circle, rgba(255, 236, 180, .55), rgba(255, 196, 90, .2) 42%, transparent 70%);
  --ripple-ring: 2px solid rgba(255, 222, 150, .5);
  --ripple-size: 190px;
  --ripple-ms: 520ms;
  color-scheme: dark;
}

[data-theme='nightsticky'] body { perspective: 1400px; }
[data-theme='nightsticky'] .donor-tile { background: rgba(0, 0, 0, .22); }
[data-theme='nightsticky'] .movers .pct { font-family: 'Permanent Marker', cursive; }
[data-theme='nightsticky'] .movers.up .pct { color: #B6FFC8; }
[data-theme='nightsticky'] .movers.down .pct { color: #FFC2C8; }
[data-theme='nightsticky'] .tone-neutral { color: var(--ink); }

[data-theme='nightsticky'] .panel::before,
[data-theme='nightsticky'] .show::before,
[data-theme='nightsticky'] .donor-wall::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 104px;
  height: 24px;
  background: var(--tape);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

[data-theme='nightsticky'] a.banner:active,
[data-theme='nightsticky'] a.donor-tile:active {
  transform: translateY(2px) scale(.995);
  box-shadow: 1px 2px 0 rgba(0, 0, 0, .5);
}

/* ===========================================================================
   6 — NIGHT BLUEPRINT
   Draft 3 rendered as an actual blueprint: cyan line-work on drafting blue.
   The one that stays readable on a screen left on all day.
   ======================================================================== */

[data-theme='nightblueprint'] {
  --paper: #0B1B2B;
  --ink: #E4F1FA;
  --body-ink: rgba(228, 241, 250, .85);
  --muted: #8FA9BD;
  --edge: rgba(228, 241, 250, .28);

  --green: #4BE39A;
  --red: #FF5FA2;
  --blue: #6E9CFF;
  --purple: #FFB43C;
  --key-ink: #6E9CFF;
  --accent-ink: #BBD0FF;
  --link-ink: #4FD8F0;
  --link-rule: #4FD8F0;
  --focus: #4FD8F0;

  --body-bg:
    linear-gradient(rgba(120, 200, 255, .19) 1px, transparent 1px) 0 0 / 100% 100px,
    linear-gradient(90deg, rgba(120, 200, 255, .19) 1px, transparent 1px) 0 0 / 100px 100%,
    linear-gradient(rgba(120, 200, 255, .10) 1px, transparent 1px) 0 0 / 100% 20px,
    linear-gradient(90deg, rgba(120, 200, 255, .10) 1px, transparent 1px) 0 0 / 20px 100%,
    radial-gradient(1100px 620px at 20% -12%, rgba(79, 216, 240, .10), transparent 62%),
    var(--paper);

  --surface: rgba(11, 27, 43, .62);
  --surface-up: var(--surface);
  --surface-down: var(--surface);
  --surface-soon: var(--surface);
  --surface-show: var(--surface);
  --surface-donor: var(--surface);
  --surface-tile: rgba(255, 255, 255, .05);
  --surface-control: rgba(255, 255, 255, .06);
  --surface-marker: linear-gradient(100deg, rgba(110, 156, 255, .16), rgba(255, 180, 60, .12));
  --art-bg: rgba(255, 255, 255, .9);
  --tag-bg: var(--paper);
  --field-bg: rgba(255, 255, 255, .07);
  --field-border: rgba(228, 241, 250, .38);
  --code-bg: rgba(255, 255, 255, .09);
  --note: #123047;
  --note-ink: #E4F1FA;
  --note-cap-ink: #FFB43C;
  --note-cap-rule: rgba(255, 180, 60, .55);

  --panel-border: rgba(228, 241, 250, .55);
  --donor-border: #FFB43C;
  --tile-border: rgba(255, 180, 60, .55);
  --border-width: 2px;
  --border-style: solid;
  --ghost-border-style: dashed;
  --radius-lg: 3px;
  --radius-md: 3px;
  --radius-btn: 3px;
  --radius-pill-sm: 2px;

  --row-alt: rgba(79, 216, 240, .07);
  --row-alt-up: rgba(79, 216, 240, .07);
  --row-alt-down: rgba(79, 216, 240, .07);
  --row-hover: rgba(255, 95, 162, .15);

  --shadow-card: none;
  --shadow-card-hover: 4px 4px 0 #6E9CFF;
  --shadow-hard: 0 6px 16px -10px #000;
  --card-hover-transform: translate(-2px, -2px);
  --tile-hover-transform: translate(-1px, -1px);
  --btn-hover-transform: translate(-1px, -1px);
  --btn-hover-shadow: 3px 3px 0 #4FD8F0;
  --primary-hover-shadow: 3px 3px 0 #FF5FA2;
  --control-hover-bg: #4FD8F0;
  --control-hover-ink: #05202B;

  --btn-bg: rgba(255, 255, 255, .05);
  --btn-ink: var(--ink);
  --btn-border: var(--ink);
  --primary-bg: #4FD8F0;
  --primary-border: #4FD8F0;
  --primary-ink: #05202B;

  --title-ink: #4FD8F0;
  --title-shadow: 0 0 22px rgba(79, 216, 240, .35);
  --subtitle-ink: #6E9CFF;

  --heading-ink: var(--paper);
  --heading-hi: #4FD8F0;
  --heading-hi-inset: 0;
  --heading-hi-tilt: 0deg;
  --heading-hi-radius: 2px;
  --donor-cap-ink: #FFB43C;
  --donor-cap-hi: transparent;

  --stance-buy-bg: #4BE39A;
  --stance-buy-ink: #04291A;
  --stance-sell-bg: #FF5FA2;
  --stance-sell-ink: #33061A;
  --stance-watch-bg: #FFB43C;
  --stance-watch-ink: #2E1B02;
  --stance-neutral-bg: rgba(143, 169, 189, .35);

  --dot-border: rgba(228, 241, 250, .65);
  --dot-active: #FF5FA2;

  --fx-pointer: none;
  --ripple-fill: radial-gradient(circle, rgba(79, 216, 240, .16), transparent 62%);
  --ripple-ring: 2px solid rgba(79, 216, 240, .9);
  --ripple-size: 220px;
  --ripple-ms: 560ms;
  --tape: rgba(110, 156, 255, .3);
  color-scheme: dark;
}

[data-theme='nightblueprint'] section:nth-of-type(2) h2.section::before { background: #6E9CFF; }
[data-theme='nightblueprint'] section:nth-of-type(3) h2.section::before { background: #FF5FA2; }
[data-theme='nightblueprint'] section:nth-of-type(4) h2.section::before { background: #FFB43C; }

[data-theme='nightblueprint'] .panel.green { border-color: #4BE39A; }
[data-theme='nightblueprint'] .panel.red { border-color: #FF5FA2; }
[data-theme='nightblueprint'] .donor-wall > .cap { border-bottom: 2px solid #FFB43C; }
[data-theme='nightblueprint'] .tone-neutral { color: var(--ink); }
[data-theme='nightblueprint'] .movers .px,
[data-theme='nightblueprint'] .movers .pct,
[data-theme='nightblueprint'] .movers .rank,
[data-theme='nightblueprint'] .slide-meta .tickers {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme='nightblueprint'] .movers .pct { font-weight: 700; font-size: 16px; }
[data-theme='nightblueprint'] .movers.dense tbody tr:hover { outline: 1px solid #FF5FA2; }
[data-theme='nightblueprint'] .dot { border-radius: 2px; }
[data-theme='nightblueprint'] .dot:hover { transform: scale(1.3) rotate(45deg); }

[data-theme='nightblueprint'] .panel::after,
[data-theme='nightblueprint'] .show::after,
[data-theme='nightblueprint'] .chip::after,
[data-theme='nightblueprint'] .donor-wall::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #FF5FA2;
  border-right: 2px solid #FF5FA2;
}

[data-theme='nightblueprint'] .fx-layer::before,
[data-theme='nightblueprint'] .fx-layer::after {
  content: '';
  position: fixed;
  background: rgba(255, 95, 162, .42);
  box-shadow: 0 0 10px rgba(255, 95, 162, .35);
}
[data-theme='nightblueprint'] .fx-layer::before { left: 0; right: 0; height: 1px; top: var(--my, -999px); }
[data-theme='nightblueprint'] .fx-layer::after { top: 0; bottom: 0; width: 1px; left: var(--mx, -999px); }