/* The app's two palettes, in one place.
 *
 * Light is VERBATIM what the app shipped before this file existed: every value
 * in :root below was lifted off the pages as they were. It is no longer the
 * default -- dark is, since 2026-09-18 (see theme.js) -- but it is still the
 * palette a light page, or a page without theme.js, paints in. Dark is the counterpart, built to hold the same contrast steps
 * rather than to be an inversion of the light one.
 *
 * theme.js resolves the reader's preference -- light, dark, or system -- to a
 * concrete data-theme="light" or data-theme="dark" on <html> before the page
 * paints. The stylesheet therefore never has to know about "system", and the
 * dark block is written once instead of twice.
 */

:root {
  color-scheme: light;

  /* grounds and surfaces */
  --ground: #fafafa;        /* the page behind the cards */
  --surface: #fff;          /* cards, inputs, controls at rest */
  --fill: #f7f7f7;          /* a control under the pointer */
  --fill-2: #f0f0f0;        /* a second, quieter fill */

  /* ink, darkest to faintest */
  --ink: #0A0D12;           /* body copy, and the fill of a chosen control */
  --ink-2: #545454;         /* labels, secondary copy */
  /* --ink-3 was #828282, lifted from the original site, and measured 3.84:1 on
     the card and 3.68:1 on the page -- under the 4.5:1 small text needs. The
     owner chose to strengthen it (2026-09-18): the lightest grey that clears
     4.5:1 on BOTH grounds, 4.74 on the card and 4.54 on the page. */
  --ink-3: #737373;         /* section heads, hints, fine print */
  --ink-4: #b8b8b8;         /* placeholders, and a border under the pointer */

  /* rules */
  --line: #dedede;          /* the default border */
  --line-2: #e6e6e6;        /* a softer one */
  --hair: #ededed;          /* a divider inside a card */

  --ink-hover: #2a2e35;     /* an ink-filled button under the pointer */
  --track: #cfcfcf;         /* a slider's unfilled length */

  /* Locked, which is NOT the same as not-applicable.
     The rail already fades a control that has nothing to do right now
     (.row.off, .tog.off, opacity .5) -- captions on a silent film. A control
     the reader's plan does not include has to read as a different kind of
     unavailable, or the two say the same thing: so it greys rather than
     fades, keeps its full opacity, and never wears the ink edge that means
     chosen. The upsell line beside it is the only thing that points at
     /pricing, and it is secondary copy, not a warning -- an upsell in amber
     reads as something having gone wrong. */
  --disabled-fill: #f0f0f0;
  --disabled-line: #e6e6e6;
  --disabled-ink: #b8b8b8;

  /* state. Each family is ink / fill / line: the colour of the words, the
     wash behind them, and the border around the two. */
  --focus: #0b69c7;         /* focus rings, and the one link blue */
  --focus-fill: #EAF3FC;
  --focus-line: #8FC1EA;
  --danger: #c0392b;
  --danger-fill: #fdeeee;
  --danger-line: #f3cfc9;
  --danger-tint: #fdf3f1;
  --danger-strong: #d63a2f;         /* a destructive button, not a warning */
  --danger-strong-hover: #b92f26;
  --good: #1a7f4b;
  --good-fill: #e4f6ec;
  --warn: #8a5a10;
  --warn-ink: #8a4b00;
  --warn-fill: #fdf0dc;
  --warn-line: #f0e3c8;
  --warn-tint: #FBF8F1;
  --info-fill: #f2f6ff;
  --info-line: #cfe0ff;
  --rec: #e0453a;           /* dictation, while it is listening */
  --rec-fill: #fdf0ee;
  --tab-ink: #3355ee;       /* the settings sheet's chosen tab */
  --tab-ink-hover: #2942cf;
  --tab-fill: #eef2ff;

  /* The Pro plan card's own tint, which pricing.html writes inline. Light is
     the page's value exactly; the sheet in /create swaps the inline literal for
     these, so the card follows the theme there and nowhere else changes. */
  /* Green since 2026-10-13 (the owner); it was a red tint before. */
  --pro-fill: #EAF7EF;
  --pro-line: #9FD5B3;
  /* The Pro card's fill as a gradient: a deeper green at the top fading to the tint. */
  --pro-grad: linear-gradient(160deg, #C8EDD6 0%, #EAF7EF 55%);

  /* The see-through panels: the prompt box, the settings card and (with no
     ground of its own at all) the gallery. The glow shows through on purpose --
     the owner's call, twice (2026-09-18): "the see-through was a good thing, it
     looks cool". Light over the pale page, a faint lift over the dark one. */
  --soft: rgba(255,255,255,.66);

  /* Small grey text ON a see-through panel. The glow drifts under those panels,
     so their ground moves. Measured (2026-09-18): every panel's own ground,
     contents hidden, at 90 moments across the glow's cycle, 1440x900 and
     1280x720. The worst light ground was rgb(244,208,208), under the gallery;
     --ink-3 measured 3.34:1 there. #5C5C5C clears it at 4.71 -- the owner's
     other ruling the same day, "strengthen the greys". The cost: on glass,
     this step sits close to --ink-2, which already cleared (5.33). */
  --ink-3-glass: #5C5C5C;

  /* A scrollbar thumb. Strong enough to find at REST -- 3:1 against the card
     and the page, which a styled bar owes (the stock bar was exempt as the
     browser's own; styling it ended that). .46 is the measured minimum, .45,
     plus a margin; stronger again under the pointer. */
  --scroll-thumb: rgba(10,13,18,.50);   /* 3.35:1 over the worst glow, rgb(244,208,208) */
  --scroll-thumb-hover: rgba(10,13,18,.62);

  /* the marketing shadow: four stacked layers, as the cards have always worn */
  --card-shadow:
    0 .6px .6px -.94px rgba(0,0,0,.07),
    0 1.81px 1.81px -1.88px rgba(0,0,0,.07),
    0 4.79px 4.79px -2.81px rgba(0,0,0,.06),
    0 15px 15px -3.75px rgba(0,0,0,.03);
  --pop-shadow: 0 12px 30px -10px rgba(0,0,0,.25);

  /* the bloom's three swells */
  --bloom-1: rgba(180,120,120,.30);
  --bloom-2: rgba(228,60,60,.22);
  --bloom-3: rgba(252,36,36,.16);
}

/* Dark is not the light palette inverted. The grounds are chosen so a card
 * still reads as lifted off the page without a border doing the work, and the
 * inks keep the same four steps apart from each other that they do in light.
 * The reds and greens are lightened, because the saturated light-mode versions
 * vibrate against a dark ground. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ground: #0D0E10;
  --surface: #17181B;
  --fill: #1E2023;
  --fill-2: #232529;

  --ink: #EDEDEA;
  --ink-2: #A4A6A9;
  --ink-3: #7D8187;         /* 4.53:1 on the card, 4.93 on the page; was #767A80 at 4.11 / 4.47 */
  --ink-4: #5C6066;

  --line: #292B30;
  --line-2: #24262A;
  --hair: #212328;

  --ink-hover: #D4D4D0;
  --track: #33363B;

  /* A step off the surface toward the middle, the same move the light palette
     makes downward from white. */
  --disabled-fill: #202226;
  --disabled-line: #24262A;
  --disabled-ink: #5C6066;

  --focus: #5AA9F0;
  --focus-fill: #16242F;
  --focus-line: #2F5A80;
  --danger: #FF7A6E;
  --danger-fill: #2A1714;
  --danger-line: #4A2420;
  --danger-tint: #241412;
  --danger-strong: #E04A3D;
  --danger-strong-hover: #F05A4D;
  --good: #43C07E;
  --good-fill: #132A1E;
  --warn: #D6A44A;
  --warn-ink: #E0B070;
  --warn-fill: #2A2113;
  --warn-line: #3D3320;
  --warn-tint: #1E1A12;
  --info-fill: #141A2B;
  --info-line: #283355;
  --rec: #FF6A5E;
  --rec-fill: #2A1714;
  --tab-ink: #8AA0FF;
  --tab-ink-hover: #A5B6FF;
  --tab-fill: #1A1D33;

  /* A green lift off the dark card, and an edge that still reads as the Pro green. */
  --pro-fill: #132219;
  --pro-line: #24603B;
  --pro-grad: linear-gradient(160deg, #18452B 0%, #152A1E 45%, #121B16 100%);

  --soft: rgba(255,255,255,.055);
  /* Worst dark ground rgb(63,49,51), under the prompt box, where --ink-3 was
     3.16:1. #9CA0A6 clears it at 4.71; --ink-2 already did (5.07). */
  --ink-3-glass: #9CA0A6;

  --scroll-thumb: rgba(237,237,234,.42);        /* 3.24:1 over the worst glow under the rail */
  --scroll-thumb-hover: rgba(237,237,234,.55);

  /* A four-layer shadow is invisible on a dark ground; two layers with real
     opacity do the lifting instead. */
  --card-shadow: 0 1px 2px rgba(0,0,0,.5), 0 18px 34px -18px rgba(0,0,0,.7);
  --pop-shadow: 0 16px 38px -12px rgba(0,0,0,.75);

  /* The bloom at FULL strength in dark too, the same as light. It was meant
     to come down here ("on a near-black ground the same opacities read as
     smears"), but the page drew the light values by mistake for a day, and
     when that was corrected the owner asked for the strong one back: "keep it
     twice as strong as designed" (2026-09-18). So these now say so on purpose. */
  --bloom-1: rgba(180,120,120,.30);
  --bloom-2: rgba(228,60,60,.22);
  --bloom-3: rgba(252,36,36,.16);
}

/* The toggle itself, so every page that mounts one gets the same button
 * without repeating it in five style blocks. It wears .btn's shape where a
 * page has one, and stands on its own where it does not. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border-radius: 10px; border: none; background: none;
  color: var(--ink-2); cursor: pointer;
}
.theme-toggle:hover { background: var(--fill); color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-toggle svg { display: block; }
/* One button, two marks: the sun is shown while the page is light (press it
   for dark), the moon while it is dark. */
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }

/* Scrollbars, for every scrolling area on a page that loads this file: the
 * gallery, the settings card, the rosters, the sheets, the textareas.
 *
 * The stock bar -- arrow buttons, a grey trough, a square-ended thumb -- is
 * the one piece of the page still drawn by the operating system, and it read
 * as unfinished beside everything else (the owner, 2026-09-18). This one is a
 * slim rounded thumb floating in a clear gutter, no arrows, no trough, and a
 * little thicker under the pointer so it is easy to grab.
 *
 * The thumb's visible width is the gutter less its transparent border:
 * 12px - 2 x 4px = 4px at rest, 6px under the pointer. background-clip keeps
 * the colour inside that border, which is what makes it float.
 *
 * ORDER MATTERS in Chromium. Since Chrome 121, an element that sets the
 * standard scrollbar-width or scrollbar-color IGNORES every ::-webkit-scrollbar
 * rule -- which is why a thin standard bar on the gallery still came out with
 * arrow buttons. So the standard properties are given ONLY to browsers with no
 * ::-webkit-scrollbar at all (Firefox), and nothing else on these pages may
 * set them, or that element silently falls back to the stock bar. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb {
  min-height: 40px;
  border: 4px solid transparent; border-radius: 12px;
  background-color: var(--scroll-thumb); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { border-width: 3px; background-color: var(--scroll-thumb-hover); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}