/* Everything every scribble.tube page shares: fonts and type sizes, all the
   colours (dark and light), the colour bars, the base text, buttons and fields,
   the site heading, the corner measurements, and the top bar with the theme
   choice. Every page loads it (page_parts/page_shell.ts); a page's own
   stylesheet only lays that page out. Change a font, a size or a colour here,
   and every page follows. */

@font-face {
  font-family: "Train One";
  src: url("/fonts/train_one.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* ── Type ── */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-wordmark: "Train One", ui-sans-serif, system-ui;
  --font-code: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-size: 16px;
  --text-small-size: 14px;
  --line-height: 1.55;
  --heading-size: 40px;
  --subheading-size: 20px;
  --lead-size: 20px;

  /* ── Colours (dark; light below) ── */
  --page: #101114;
  --panel: #1b1d22;
  --text: #ecebe6;
  --muted: #a3a29b;
  --line: #2c2f36;
  --accent: #e9c46a;
  --danger: #e76f51;
  --button: #262931;
  --field: #0d0e11;
  --control: rgba(20, 21, 25, 0.72);
  /* The glow of a tube TV that is on: the homepage TV's screen, in either theme (not black, and not the white of its rim). */
  --tv-phosphor: #dcf3ee;
  /* Chooser inks: chosen is brighter than idle; hovering an idle one is brightest. */
  --choice-idle: #6d6d73;
  --choice-chosen: #d9d9dd;
  --choice-hover: #ffffff;
  color-scheme: dark;

  /* ── The colour bars' seven colours, left to right. The test card's top row
     uses all seven; "tube" in the wordmark uses the five between grey
     ("scribble." is already grey) and blue (too dark to read). ── */
  --bar-grey: #c0c0c0;
  --bar-yellow: #c0c000;
  --bar-cyan: #00c0c0;
  --bar-green: #00c000;
  --bar-magenta: #c000c0;
  --bar-red: #c00000;
  --bar-blue: #0000c0;
  --colour-bars-top: linear-gradient(90deg,
    var(--bar-grey) 0 14.28%, var(--bar-yellow) 0 28.57%, var(--bar-cyan) 0 42.85%, var(--bar-green) 0 57.14%,
    var(--bar-magenta) 0 71.42%, var(--bar-red) 0 85.71%, var(--bar-blue) 0 100%);
  --wordmark-bars: linear-gradient(90deg,
    var(--bar-yellow) 0 20%, var(--bar-cyan) 0 40%, var(--bar-green) 0 60%,
    var(--bar-magenta) 0 80%, var(--bar-red) 0 100%);

  /* ── Corners and the top bar ── */
  /* Every corner control sits the same distance in from both of its edges,
     each side clear of its own screen cutout (a notch, a home bar). */
  --corner-inset: 16px;
  --corner-inset-top: max(var(--corner-inset), env(safe-area-inset-top));
  --corner-inset-bottom: max(var(--corner-inset), env(safe-area-inset-bottom));
  --corner-inset-left: max(var(--corner-inset), env(safe-area-inset-left));
  --corner-inset-right: max(var(--corner-inset), env(safe-area-inset-right));
  /* How tall a corner control (a chooser pill) is. */
  --corner-control-height: 32px;
  /* A thin strip along the top for the choosers; a page's content starts below it. */
  --top-strip: calc(var(--corner-inset-top) * 2 + var(--corner-control-height));
  /* The channel number's height, which the theme icons (a third of it) follow on every page. */
  --bug-size: clamp(40px, 7vw, 72px);
  --theme-icon-size: calc(var(--bug-size) / 3);
  /* The moon as drawn: a circle 18 units across in the icon's 24-unit box, plus its
     1.75-unit line (icons.ts), so 19.75/24 of the icon. The capsule is twice that tall:
     from the moon's edge to the capsule's edge is half the moon, above and below. */
  --moon-diameter: calc(var(--theme-icon-size) * 19.75 / 24);
  --theme-capsule-height: calc(var(--moon-diameter) * 2);

  /* ── The site heading: the name, then the TV, whose body (legs to the top of
     its box, without the antennas) is exactly as tall as the lowercase letters
     and stands on the baseline with them. Measured: Train One's "s" and "e"
     ink 0.582 of the font size (0.57 above the baseline, 0.012 below, in
     Chrome); in icon_192.png the body is 0.625 of the image's height and ends
     0.0625 above its bottom (from its pixels). The heading's width in multiples
     of its font size: the name (6.94), the gap (0.3) and the square icon
     (0.93), rounded up a little. Its size is its column's width divided by
     that, at most the heading size, so it always fits one line. ── */
  --site-heading-gap: 0.3em;
  --site-heading-letter-height: 0.582em;
  --site-heading-letter-descent: 0.012em;
  --site-heading-tv-body: 0.625;
  --site-heading-tv-below-legs: 0.0625;
  --site-heading-icon-height: calc(var(--site-heading-letter-height) / var(--site-heading-tv-body));
  --site-heading-width-ems: 8.3;
}

/* Light theme: the same roles, reversed. Chosen is darker than idle; hovering an idle one is darkest. */
:root[data-theme="light"] {
  --page: #f3f2ee;
  --panel: #fcfcfb;
  --text: #1d1d1f;
  --muted: #5f5f66;
  --line: #d8d6cf;
  --accent: #c9971f;
  --danger: #c2462a;
  --button: #e9e7e1;
  --field: #fbfaf7;
  --control: rgba(252, 252, 250, 0.82);
  --choice-idle: #a4a4a0;
  --choice-chosen: #3b3b39;
  --choice-hover: #000000;
  color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: var(--text-size) / var(--line-height) var(--font-body);
}

a { color: var(--text); }
strong { color: var(--text); }

/* ── The site heading ─────────────────────────────────────────────────── */
main { container-type: inline-size; }

.site-heading {
  display: flex;
  align-items: baseline;
  gap: var(--site-heading-gap);
  margin: 0 0 8px;
  font-family: var(--font-wordmark);
  font-weight: 400;
  white-space: nowrap;
  font-size: min(var(--heading-size), calc(100cqw / var(--site-heading-width-ems)));
}

.site-heading .site-icon {
  height: var(--site-heading-icon-height);
  width: auto;
  /* On the baseline an image's bottom sits there; move it down so its legs end where the letters' ink does
     (a relative shift: a flex item's baseline comes from its border box, so a margin would not move it). */
  position: relative;
  top: calc(var(--site-heading-letter-descent) + var(--site-heading-tv-below-legs) * var(--site-heading-icon-height));
}

/* ── Buttons and fields ───────────────────────────────────────────────── */
.button {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--button);
  color: var(--text);
  font: 600 var(--text-size) / 1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button.is-main { background: var(--text); color: var(--page); border-color: var(--text); }

.field {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
  font: var(--text-size) var(--font-body);
}

code, .code { font-family: var(--font-code); }

/* ── Choosers (theme here; renderer, save, reactions on the channel page). Grayscale; see --choice-* above. ── */
.chooser {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--control);
  backdrop-filter: blur(8px);
}

.chooser button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--choice-idle);
  font: 500 var(--text-small-size) / 1 var(--font-body);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s;
}

.chooser button.is-chosen { color: var(--choice-chosen); }
.chooser button:not(.is-chosen):hover,
.chooser button:not(.is-chosen):focus-visible { color: var(--choice-hover); }
.chooser .chooser-divider { color: var(--choice-idle); font-size: 13px; }
.chooser .icon { display: block; }

/* ── The top bar: the theme choice at the top centre (with anything a page adds beside it), above the content. ── */
#top-choices {
  position: fixed;
  top: var(--corner-inset-top);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 15;
}

#theme-choice {
  padding: 0 4px;
  height: var(--theme-capsule-height);
  opacity: 0.55;
  transition: opacity 0.2s;
}

#theme-choice button { min-height: 0; height: 100%; padding: 0 8px; }
#theme-choice .icon { width: var(--theme-icon-size); height: var(--theme-icon-size); }
#theme-choice:hover, #theme-choice:focus-within { opacity: 1; }