/**
 * Sporetag's stylesheet: tokens, base, layout, components, header, footer,
 * the app shell. Marketing and the app share these tokens (docs/style.md).
 *
 * Light and warm by default. `:root` holds light. Dark is written twice: once
 * for the reader who never touches the toggle (prefers-color-scheme), once
 * for the one who does (`data-theme`, stamped by public/static/theme.js).
 *
 * Area styles live in their own files, linked after this one by the layout:
 * site-marketing.css, app-analytics.css, app-links.css, app-billing.css.
 * Use the tokens here; add no new colors without a contrast note.
 */

/* ---------------- tokens ----------------
   Light and warm by default (DECISIONS.md, 2026-10-21): warm paper ground,
   raised white cards, warm neutral lines and ink, one blue accent, green only
   on the call to action, red only for "missed" numbers.

   Dark is written twice, like light used to be: once for the reader who
   never touches the toggle (prefers-color-scheme), once for the one who does
   (`data-theme`, stamped by public/static/theme.js). Ratios are WCAG 2.1. */

:root {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  /* Warm paper. Cards sit on it in white; tinted bands alternate with it. */
  --bg: #f8f6f1;
  /* Panels and app cards: a breath warmer than white, so they sit on paper
     without going grey. --text-faint 5.5:1, --text-dim 6.9:1 on it. */
  --bg-panel: #fbfaf7;
  /* The tint band (alternate marketing sections, inset wells): one step down
     from paper. --text-dim 6.1:1, --text-faint 4.9:1 on it. */
  --bg-tint: #f0ede6;
  --bg-raised: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #f2efe8;
  --bg-active: #e9e5dc;
  /* Hairlines: 1.20:1 on --bg, enough on a flat warm ground. */
  --line: #e4dfd5;
  /* 1.41:1 on --bg: borders that must read (inputs, selected cards). */
  --line-strong: #cdc6b8;
  --line-control: #dcd5c8;
  /* On --bg: --text 15.6:1, --text-dim 6.6:1, --text-faint 5.3:1.
     On --bg-panel: --text-dim 6.1:1, --text-faint 4.9:1. */
  --text: #1f1d1a;
  --text-dim: #5c574f;
  --text-faint: #6b665d;
  /* The current blue family, one step deeper so it holds on the tint:
     5.8:1 on --bg, 5.3:1 on --bg-panel. White ink on it 6.2:1. */
  --accent: #1559d0;
  --accent-ink: #ffffff;
  --accent-hover: #124cb3;
  --accent-soft: rgba(21, 89, 208, 0.1);
  /* The soft blue band ("pick what you run", the promise). --text 14.5:1,
     --accent 5.4:1, --text-dim 6.2:1 on it. */
  --brand-band: #e9eefb;
  --overlay: rgba(236, 232, 224, 0.8);
  --scrim: rgba(40, 34, 26, 0.38);
  /* The call to action. White on it 5.4:1. */
  --cta: #1c7a45;
  --cta-hover: #18733f;
  --cta-ink: #ffffff;
  --danger: #c4392b;
  --danger-hover: #ad3124;
  --danger-ink: #ffffff;
  /* Danger text and "lost" numbers: 6.1:1 on --bg. */
  --danger-fg: #b3261e;
  /* Loss and gain, nowhere else: missed numbers red, found numbers blue. */
  --lost: var(--danger-fg);
  --found: var(--accent);
  --chip-ok-fg: #1c7a45;
  --chip-ok-line: #b5dcc3;
  --chip-ok-bg: #e9f5ed;
  --chip-warn-fg: #85601a;
  --chip-warn-line: #e6d3a2;
  --chip-warn-bg: #fbf3e1;
  --error-bg: rgba(252, 233, 229, 0.96);
  --error-line: #e2aca3;
  --error-text: #8c2b26;
  /* Dot texture: warm grey at low strength. */
  --site-dot: color-mix(in srgb, #bdb4a3 34%, transparent);
  --shadow-card: 0 1px 2px rgba(60, 45, 20, 0.05), 0 8px 24px rgba(60, 45, 20, 0.06);
  --shadow-menu: 0 10px 24px rgba(60, 45, 20, 0.12);
  --shadow-panel: 0 1px 2px rgba(60, 45, 20, 0.06), 0 18px 40px rgba(60, 45, 20, 0.1);
  --shadow-sheet: 0 24px 60px rgba(60, 45, 20, 0.2);
  --header-bg: rgba(248, 246, 241, 0.88);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c574f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");

  --site-max: 1160px;
  --gutter: 32px;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --header-h: 62px;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Marketing h1 and h2 only. System serifs, no web font: New York on Apple,
     Iowan Old Style and Charter where Safari's ui-serif is missing, Georgia on
     Windows. Charter's free cut (Bitstream Charter) covers Linux. */
  --serif: ui-serif, 'New York', 'Iowan Old Style', Charter, 'Bitstream Charter', Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Control sizes. Comfortable on a desk, a finger's worth on a phone (below). */
  --btn-h-sm: 34px;
  --btn-h-md: 40px;
  --btn-h-lg: 48px;
  --btn-fs-sm: 13px;
  --btn-fs-md: 15px;
  --btn-fs-lg: 15.5px;
  --btn-px-sm: 11px;
  --btn-px-md: 16px;
  --btn-px-lg: 22px;
  --btn-radius: 8px;
  --field-h: 40px;
  --field-fs: 15px;
  --field-px: 10px;
  --field-radius: 8px;
  color-scheme: light;
}

/* Dark, warm-tinted so it is the same room with the lights down. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #161513;
    --bg-panel: #1c1b18;
    /* The dark tint band: a step up from --bg. --text-faint 5.2:1 on it. */
    --bg-tint: #1f1d1a;
    --bg-raised: #23211e;
    --bg-input: #191816;
    --bg-hover: #2b2925;
    --bg-active: #33302b;
    /* 1.41:1 on --bg. */
    --line: #34312b;
    --line-strong: #45413a;
    --line-control: #3c3832;
    /* On --bg: --text 15.1:1, --text-dim 7.5:1, --text-faint 5.7:1 (5.0:1 on --bg-raised). */
    --text: #ede9e2;
    --text-dim: #aba59b;
    --text-faint: #958f85;
    /* 7.3:1 on --bg, 6.5:1 on --bg-raised. Ink on it is near black (7.6:1). */
    --accent: #57a8ff;
    --accent-ink: #08121f;
    --accent-hover: #7bbcff;
    --accent-soft: rgba(87, 168, 255, 0.16);
    /* --text-dim 6.6:1 on it. */
    --brand-band: #182133;
    --overlay: rgba(20, 19, 17, 0.74);
    --scrim: rgba(6, 5, 4, 0.66);
    /* White on it 5.5:1, and 3.2:1 against --bg-panel so the button still leads. */
    --cta: #17793f;
    --cta-hover: #1c8749;
    --cta-ink: #ffffff;
    --danger: #d94a45;
    --danger-hover: #e85d58;
    --danger-ink: #1a0605;
    /* 9.0:1 on --bg. */
    --danger-fg: #ff9a95;
    --chip-ok-fg: #8ee0a1;
    --chip-ok-line: #2d5b3c;
    --chip-ok-bg: #16271c;
    --chip-warn-fg: #e6c77a;
    --chip-warn-line: #5c4c24;
    --chip-warn-bg: #262013;
    --error-bg: rgba(90, 30, 28, 0.92);
    --error-line: #8c4340;
    --error-text: #ffd9d6;
    --site-dot: color-mix(in srgb, #c9bca6 12%, transparent);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-menu: 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.42);
    --shadow-sheet: 0 26px 64px rgba(0, 0, 0, 0.6);
    --header-bg: rgba(22, 21, 19, 0.88);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aba59b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #161513;
  --bg-panel: #1c1b18;
  --bg-tint: #1f1d1a;
  --bg-raised: #23211e;
  --bg-input: #191816;
  --bg-hover: #2b2925;
  --bg-active: #33302b;
  --line: #34312b;
  --line-strong: #45413a;
  --line-control: #3c3832;
  --text: #ede9e2;
  --text-dim: #aba59b;
  --text-faint: #958f85;
  --accent: #57a8ff;
  --accent-ink: #08121f;
  --accent-hover: #7bbcff;
  --accent-soft: rgba(87, 168, 255, 0.16);
  --brand-band: #182133;
  --overlay: rgba(20, 19, 17, 0.74);
  --scrim: rgba(6, 5, 4, 0.66);
  --cta: #17793f;
  --cta-hover: #1c8749;
  --cta-ink: #ffffff;
  --danger: #d94a45;
  --danger-hover: #e85d58;
  --danger-ink: #1a0605;
  --danger-fg: #ff9a95;
  --chip-ok-fg: #8ee0a1;
  --chip-ok-line: #2d5b3c;
  --chip-ok-bg: #16271c;
  --chip-warn-fg: #e6c77a;
  --chip-warn-line: #5c4c24;
  --chip-warn-bg: #262013;
  --error-bg: rgba(90, 30, 28, 0.92);
  --error-line: #8c4340;
  --error-text: #ffd9d6;
  --site-dot: color-mix(in srgb, #c9bca6 12%, transparent);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-menu: 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.42);
  --shadow-sheet: 0 26px 64px rgba(0, 0, 0, 0.6);
  --header-bg: rgba(22, 21, 19, 0.88);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aba59b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* A finger, not a pointer: every control on a phone is at least 44 px. */
@media (max-width: 720px) {
  :root {
    --btn-h-sm: 44px;
    --btn-h-md: 46px;
    --btn-h-lg: 50px;
    --field-h: 46px;
    /* 16 px or iOS zooms the page when a field takes focus. */
    --field-fs: 16px;
    --gutter: 16px;
  }
}

@media (min-width: 721px) and (max-width: 1023px) {
  :root {
    --gutter: 24px;
  }
}

/* ---------------- base ---------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The sticky header is 62px plus its 1px border. */
  scroll-padding-top: 63px;
  /* Room for the scrollbar is kept, so nothing shifts sideways as a page grows. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Sticky footer: the body is a column at least one screen tall and <main>
   takes what is left, so a short page pushes the footer to the bottom. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* A link in running text is told apart by more than its color. */
main p a:not([class]),
main li a:not([class]),
main .prose a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

img,
svg {
  max-width: 100%;
}

code,
kbd,
pre {
  font-family: var(--mono);
  font-size: 0.92em;
}

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

::selection {
  background: var(--accent-soft);
}

[hidden] {
  display: none !important;
}

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

/* The first stop for a keyboard: past the header, straight to the page. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--text);
  outline-offset: 2px;
  text-decoration: none;
}

main[tabindex='-1']:focus {
  outline: none;
}

/* ---------------- layout ---------------- */

.container {
  width: 100%;
  max-width: var(--site-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.site-main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
}

/* The last section takes the spare height, so its ground runs to the footer. */
.site-main > .section:last-child {
  flex: 1 0 auto;
}

.section {
  padding-block: 56px;
  border-top: 1px solid var(--line);
}

.section:first-child {
  border-top: none;
}

.section-tight {
  padding-block: 8px 72px;
  border-top: none;
}

/* A dotted panel: a 20px dot ground, faint enough that a paragraph over it
   still reads as print on paper. */
.section-alt,
.dots {
  background-color: var(--bg-panel);
  background-image: radial-gradient(var(--site-dot) 1px, transparent 1px);
  background-size: 20px 20px;
}

.band {
  background: var(--brand-band);
}

.section-head {
  max-width: 660px;
  margin-bottom: 30px;
}

.eyebrow,
.section-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.section-title {
  font-size: 27px;
  font-weight: 700;
}

.section-sub {
  margin-top: 10px;
  color: var(--text-dim);
}

.lead {
  font-size: 17px;
  color: var(--text-dim);
  max-width: 34em;
}

.prose {
  max-width: 66ch;
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  margin-top: 1.8em;
  font-size: 22px;
}

.prose h3 {
  margin-top: 1.5em;
  font-size: 17px;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.muted {
  color: var(--text-dim);
}

.faint {
  color: var(--text-faint);
}

.mono {
  font-family: var(--mono);
}

.stack {
  display: grid;
  gap: 16px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.grid-2,
.grid-3 {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .section {
    padding-block: 44px;
  }
  .section-title {
    font-size: 23px;
  }
}

/* ---------------- hero ---------------- */

.hero {
  padding-block: 56px 64px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 44px;
  align-items: center;
}

.hero h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.hero h1 .accent,
.accent-word {
  color: var(--accent);
}

.hero-lead {
  margin-top: 18px;
  font-size: 17px;
  color: var(--text-dim);
  max-width: 34em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--text-faint);
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .hero h1 {
    font-size: 36px;
  }
}

@media (max-width: 720px) {
  .hero {
    padding-block: 34px 44px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .hero-lead {
    font-size: 15.5px;
  }
  .hero-actions .btn {
    flex: 1 1 160px;
  }
}

/* ---------------- buttons ----------------
   `.btn` plus at most one size and one look.
     size   .btn-sm   .btn-md (default)   .btn-lg
     look   .btn-primary (the green call to action)   .btn-secondary (default)
            .btn-accent (blue)   .btn-quiet   .btn-danger   .btn-danger-solid
     shape  .btn-icon (square)   .btn-block (full width)
   Every look changes only four colors. */

.btn {
  --btn-bg: var(--bg-raised);
  --btn-fg: var(--text);
  --btn-line: var(--line-control);
  --btn-bg-hover: var(--bg-hover);
  --btn-fg-hover: var(--btn-fg);
  --btn-line-hover: var(--line-strong);
  --btn-h: var(--btn-h-md);
  --btn-fs: var(--btn-fs-md);
  --btn-px: var(--btn-px-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--btn-h);
  margin: 0;
  padding: 4px var(--btn-px);
  font: inherit;
  font-size: var(--btn-fs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-line);
  border-radius: var(--btn-radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.15s ease;
}

.btn:hover {
  color: var(--btn-fg-hover);
  background: var(--btn-bg-hover);
  border-color: var(--btn-line-hover);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn:disabled:hover,
.btn[aria-disabled='true']:hover {
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-color: var(--btn-line);
}

.btn svg {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
}

.btn-sm {
  --btn-h: var(--btn-h-sm);
  --btn-fs: var(--btn-fs-sm);
  --btn-px: var(--btn-px-sm);
  font-weight: 500;
}

.btn-lg {
  --btn-h: var(--btn-h-lg);
  --btn-fs: var(--btn-fs-lg);
  --btn-px: var(--btn-px-lg);
}

.btn-primary,
.btn-cta {
  --btn-bg: var(--cta);
  --btn-fg: var(--cta-ink);
  --btn-line: transparent;
  --btn-bg-hover: var(--cta-hover);
  --btn-line-hover: transparent;
}

.btn-accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-line: transparent;
  --btn-bg-hover: var(--accent-hover);
  --btn-line-hover: transparent;
}

.btn-secondary {
  --btn-bg: var(--bg-raised);
  --btn-fg: var(--text);
  --btn-line: var(--line-control);
}

.btn-quiet {
  --btn-bg: transparent;
  --btn-fg: var(--text-dim);
  --btn-line: transparent;
  --btn-bg-hover: var(--bg-hover);
  --btn-fg-hover: var(--text);
  --btn-line-hover: transparent;
  font-weight: 500;
}

.btn-danger {
  --btn-bg: transparent;
  --btn-fg: var(--danger-fg);
  --btn-line: color-mix(in srgb, var(--danger) 55%, transparent);
  --btn-bg-hover: var(--error-bg);
  --btn-fg-hover: var(--error-text);
  --btn-line-hover: var(--error-line);
}

.btn-danger-solid {
  --btn-bg: var(--danger);
  --btn-fg: var(--danger-ink);
  --btn-line: transparent;
  --btn-bg-hover: var(--danger-hover);
  --btn-fg-hover: var(--danger-ink);
  --btn-line-hover: transparent;
}

.btn-icon {
  flex: 0 0 auto;
  width: var(--btn-h);
  padding: 0;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* A borderless square button: the theme toggle, the menu. */
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .icon-button:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 6%, transparent);
  }
}

.icon-button:active {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

.icon-button svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 720px) {
  .icon-button {
    width: 44px;
    height: 44px;
  }
}

/* The theme button shows where a click goes: the sun while dark, the moon
   while light. Chosen from <html> so the first paint is right. */
.theme-toggle .theme-icon-sun {
  display: none;
}

:root[data-theme='dark'] .theme-toggle .theme-icon-sun {
  display: inline;
}

:root[data-theme='dark'] .theme-toggle .theme-icon-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .theme-icon-sun {
    display: inline;
  }
  :root:not([data-theme]) .theme-toggle .theme-icon-moon {
    display: none;
  }
}

/* ---------------- segmented control (tabs) ----------------
   <div class="segmented" role="tablist"><button class="segment" role="tab" aria-selected="true">..</button></div>
   Links work too: <a class="segment" aria-current="page">. */

.segmented {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  padding: 3px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: calc(var(--btn-radius) + 1px);
}

.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: var(--btn-h-sm);
  margin: 0;
  padding: 4px 14px;
  font: inherit;
  font-size: var(--btn-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--btn-radius) - 1px);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.segment:hover {
  color: var(--text);
  text-decoration: none;
}

.segment[aria-selected='true'],
.segment[aria-current='page'] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 480px) {
  .segmented {
    display: flex;
    width: 100%;
  }
  .segment {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
  }
}

/* Underlined tabs, for a page's sections (Overview, Goals, Settings). */
.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  margin-bottom: -1px;
  color: var(--text-dim);
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.tab:hover {
  color: var(--text);
  text-decoration: none;
}

.tab[aria-current='page'],
.tab[aria-selected='true'] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ---------------- form fields ----------------
   <div class="field">
     <label class="field-label" for="x">Email</label>
     <input class="field-input" id="x">
     <p class="field-hint">..</p>   <p class="field-error">..</p>
   </div> */

.form {
  display: grid;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.field-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-dim);
}

.field-optional {
  font-weight: 400;
  color: var(--text-faint);
}

.field-hint {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.field-input {
  width: 100%;
  min-height: var(--field-h);
  margin: 0;
  padding: 6px var(--field-px);
  font: inherit;
  font-size: var(--field-fs);
  line-height: 1.35;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--line-strong);
  border-radius: var(--field-radius);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

textarea.field-input {
  min-height: calc(var(--field-h) * 2.4);
  padding-block: 8px;
  resize: vertical;
}

select.field-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--field-px) + 22px);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--field-px) center;
  background-size: 14px 14px;
  cursor: pointer;
}

.field-input::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

.field-input:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--line-strong) 60%, var(--text-dim));
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.field-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.field-input[aria-invalid='true'] {
  border-color: var(--danger);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--danger-fg);
}

/* A mark before the words, so the error is not told by color alone. */
.field-error::before {
  content: '!';
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.05em;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  color: var(--bg-raised);
  background: var(--danger-fg);
  border-radius: 50%;
}

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.field-check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.field-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.field-row > .field-input {
  flex: 1 1 auto;
  min-width: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .form-actions .btn {
    flex: 1 1 100%;
  }
}

/* ---------------- cards ---------------- */

.card {
  min-width: 0;
  padding: 20px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card-raised {
  background: var(--bg-raised);
  box-shadow: var(--shadow-panel);
}

.card-title {
  font-size: 16px;
  font-weight: 650;
}

.card-sub {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* A card that is one big link. */
a.card-link {
  display: block;
  color: inherit;
  transition: border-color 0.12s ease, transform 0.15s ease;
}

a.card-link:hover {
  border-color: var(--line-strong);
  text-decoration: none;
}

/* ---------------- chips and pills ---------------- */

/* A filter chip: a toggle in a row of choices. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}

.chip:hover {
  color: var(--text);
  border-color: var(--line-strong);
  text-decoration: none;
}

.chip[aria-pressed='true'],
.chip[aria-current='true'],
.chip[aria-current='page'] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.chip .count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  color: var(--text-dim);
  background: var(--bg-raised);
  border-radius: 999px;
}

.chip[aria-current='page'] .count {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

@media (max-width: 720px) {
  .chip {
    min-height: 40px;
    padding-inline: 14px;
  }
}

/* A small instrument-panel badge: a status, a plan, a label. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0.02em;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  white-space: nowrap;
}

.pill-ok {
  color: var(--chip-ok-fg);
  border-color: var(--chip-ok-line);
  background: var(--chip-ok-bg);
}

.pill-warn {
  color: var(--chip-warn-fg);
  border-color: var(--chip-warn-line);
  background: var(--chip-warn-bg);
}

.pill-danger {
  color: var(--error-text);
  border-color: var(--error-line);
  background: var(--error-bg);
}

.pill-accent {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
}

/* A live dot before a pill's words. */
.pill-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------------- notices ---------------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.notice-ok {
  color: var(--chip-ok-fg);
  background: var(--chip-ok-bg);
  border-color: var(--chip-ok-line);
}

.notice-warn {
  color: var(--chip-warn-fg);
  background: var(--chip-warn-bg);
  border-color: var(--chip-warn-line);
}

.notice-error {
  color: var(--error-text);
  background: var(--error-bg);
  border-color: var(--error-line);
}

.notice .btn {
  margin-left: auto;
}

/* ---------------- tables ---------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th,
.table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover td {
  background: color-mix(in srgb, var(--bg-hover) 50%, transparent);
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------- code ---------------- */

.code {
  position: relative;
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  white-space: pre;
}

.code-block {
  display: grid;
  gap: 8px;
}

.code-block .row-between {
  flex-wrap: nowrap;
  font-size: 13px;
  color: var(--text-dim);
}

.code-block .row-between > .btn {
  flex: 0 0 auto;
}

:not(pre) > code {
  padding: 1px 5px;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 5px;
}

/* ---------------- empty state ---------------- */

.empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background-color: var(--bg-panel);
  background-image: radial-gradient(var(--site-dot) 1px, transparent 1px);
  background-size: 20px 20px;
}

.empty-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
}

.empty-title {
  font-size: 18px;
  font-weight: 650;
}

.empty p {
  max-width: 36em;
  color: var(--text-dim);
}

.empty .btn {
  margin-top: 8px;
}

/* ---------------- wordmark ---------------- */

.wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  text-decoration: none;
}

/* The wordmark is the brand drawing inline (src/brand.ts), inked from the
   theme's own tokens, so light and dark need no rules of their own. Its height
   keeps the lowercase letters at the size of the CSS text they replaced:
   108 units of a 95.09 unit em (the system UI sans at the header's size):
   the big t rising above the rest, plus a few units of air above it and below
   the g. The bottom margin of 17 units lifts the box so the lowercase sits
   where the text sat. `display: block` drops the inline gap under the drawing. */
.wordmark-svg {
  display: block;
  height: 1.136em;
  width: auto;
  aspect-ratio: 450 / 108;
  margin-bottom: 0.179em;
}
.wordmark-ink {
  fill: var(--text);
}
.wordmark-accent {
  fill: var(--accent);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--header-h);
  padding-block: 8px;
}

.site-header .wordmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 2px;
  font-size: 22px;
  min-height: 44px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 4px 11px;
  border-radius: 7px;
  color: var(--text-dim);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-link:hover {
  color: var(--text);
  background: var(--bg-raised);
  text-decoration: none;
}

.nav-link[aria-current='page'] {
  color: var(--text);
}

/* A menu in the row: a <details> whose summary looks like the links beside
   it, with a chevron that turns over while its panel is open. */
.nav-group {
  position: relative;
}

.nav-group > summary {
  gap: 5px;
  list-style: none;
}

.nav-group > summary::-webkit-details-marker {
  display: none;
}

.nav-group[open] > summary {
  color: var(--text);
  background: var(--bg-raised);
}

.nav-chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.nav-group[open] .nav-chevron {
  transform: rotate(180deg);
}

.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 70;
  width: 340px;
  padding: 6px;
  transform: translateX(-50%);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

.nav-panel-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
}

.nav-item:hover,
.nav-item:focus-visible {
  background: var(--bg-active);
  text-decoration: none;
}

.nav-item:focus-visible {
  outline-offset: -2px;
}

.nav-item-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-item-icon svg {
  width: 18px;
  height: 18px;
}

.nav-item-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.nav-item-label {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
}

.nav-item-line {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.35;
}

.nav-item[aria-current='page'] {
  background: var(--bg-active);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* The phone menu: a sheet under the header, behind a Menu button. Hidden on
   a desk, where the row carries the same links. */
.nav-menu {
  display: none;
  position: relative;
}

.nav-menu > summary {
  list-style: none;
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

.menu-icon-close {
  display: none;
}

.nav-menu[open] .menu-icon-open {
  display: none;
}

.nav-menu[open] .menu-icon-close {
  display: inline;
}

.nav-sheet {
  position: absolute;
  top: calc(100% + 8px);
  right: -6px;
  z-index: 60;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 8px 8px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet);
}

.nav-sheet-group + .nav-sheet-group {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.nav-sheet-heading {
  padding: 6px 10px 0;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 4px;
}

.sheet-row,
.menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  text-align: left;
  font: inherit;
  font-size: 15px;
  line-height: 1.25;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
}

.sheet-row:hover,
.menu-row:hover {
  background: var(--bg-active);
  text-decoration: none;
}

.sheet-row[aria-current='page'] {
  color: var(--accent);
  font-weight: 600;
}

/* The call to action stays pinned to the bottom of the sheet while it scrolls. */
.nav-sheet-foot {
  position: sticky;
  bottom: -8px;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin: 6px -8px -8px;
  padding: 10px 8px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}

/* The account menu: avatar button, then a small list. */
.account-menu {
  position: relative;
}

.account-menu > summary {
  list-style: none;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.avatar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 3px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.avatar-button:hover,
.account-menu[open] > .avatar-button {
  border-color: var(--line-strong);
  background: var(--bg-raised);
}

.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
}

.menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 240px;
  max-width: calc(100vw - 24px);
  padding: 5px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-menu);
}

.menu-who {
  padding: 8px 10px 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

.menu-who .who-email {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-who .who-plan {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.menu-sep {
  height: 1px;
  margin: 5px 4px;
  background: var(--line);
}

.menu-list form {
  margin: 0;
}

/* Degrades in a set order as width shrinks: link padding, then Sign in, then
   the whole row gives way to the phone menu at 860px. */
@media (max-width: 1100px) {
  .site-nav {
    margin-left: 8px;
  }
  .site-nav .nav-link {
    padding: 4px 8px;
  }
}

/* The setup call button leaves the header first; the menu sheet keeps it. */
@media (max-width: 1180px) {
  .header-actions .hide-call {
    display: none;
  }
}

@media (max-width: 860px) {
  .site-nav {
    display: none;
  }
  .nav-menu {
    display: block;
  }
  .header-actions .hide-narrow {
    display: none;
  }
}

@media (max-width: 720px) {
  .site-header .wordmark {
    font-size: 21px;
  }
  .header-actions {
    gap: 2px;
  }
  .header-actions .hide-phone {
    display: none;
  }
}

@media (max-width: 380px) {
  .header-actions .btn {
    --btn-px: 12px;
  }
}

/* ---------------- footer ---------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}

.footer-inner {
  padding-block: 36px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 28px;
  align-items: start;
}

.footer-brand {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-footer .wordmark {
  display: inline-flex;
  align-items: center;
  /* Tall enough for the whole drawing, the t's ascender and the g's tail. */
  min-height: 24px;
  font-size: 18px;
  align-self: flex-start;
}

.footer-tagline {
  margin-top: 10px;
  max-width: 30em;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}

.footer-group {
  min-width: 0;
}

.footer-eyebrow {
  display: flex;
  align-items: center;
  height: 20px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Held open wider than a phone, where the summary is only the eyebrow. */
.footer-summary {
  display: block;
  list-style: none;
  cursor: default;
  pointer-events: none;
}

.footer-summary::-webkit-details-marker {
  display: none;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.footer-list a,
.footer-compare a {
  display: inline-block;
  padding: 1px 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.4;
}

.footer-list a:hover,
.footer-compare a:hover,
.footer-meta a:hover {
  color: var(--text);
  text-decoration: none;
}

.footer-compare {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.footer-compare .footer-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-top: 10px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 18px;
  padding-block: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-faint);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}

.footer-meta a {
  color: var(--text-faint);
  font-size: 12px;
  white-space: nowrap;
}

/* The toggle keeps its box; pulling it out by its padding keeps the glyph on the edge. */
.footer-meta .icon-button {
  margin-right: -10px;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* A phone: the brand, then the groups as rows between hairlines, each a
   full-width eyebrow with a chevron, closed until tapped. */
@media (max-width: 720px) {
  .footer-inner {
    padding-block: 28px 0;
  }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .footer-brand {
    margin-bottom: 22px;
  }
  .footer-group {
    border-top: 1px solid var(--line);
  }
  .footer-compare {
    margin-top: 0;
    padding-top: 0;
  }
  .footer-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .footer-summary .footer-eyebrow {
    height: auto;
    font-size: 12px;
  }
  .footer-summary::after {
    content: '';
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-right: 2px;
    background: var(--text-dim);
    -webkit-mask: var(--chevron) center / contain no-repeat;
    mask: var(--chevron) center / contain no-repeat;
    transition: transform 0.15s ease;
  }
  .footer-group[open] > .footer-summary::after {
    transform: rotate(180deg);
  }
  .footer-list,
  .footer-compare .footer-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    margin: 0 0 12px;
  }
  .footer-list a,
  .footer-compare a,
  .footer-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-top: 0;
    padding-top: 6px;
  }
}

/* ---------------- auth pages ---------------- */

.auth {
  display: grid;
  place-items: start center;
  padding-block: 56px 72px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 28px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

.auth-card h1 {
  font-size: 24px;
  font-weight: 700;
}

.auth-card .auth-sub {
  margin-top: 6px;
  color: var(--text-dim);
}

.auth-card .form {
  margin-top: 22px;
}

.auth-actions {
  margin-top: 22px;
}

.auth-alt {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
}

@media (max-width: 480px) {
  .auth {
    padding-block: 24px 48px;
  }
  .auth-card {
    padding: 22px 18px;
  }
}

/* ---------------- app shell ---------------- */

.app-header .container {
  max-width: 1400px;
}

.app-notice {
  margin-bottom: 20px;
}

.app-notice.notice,
.app-notice > .notice {
  align-items: center;
}

.notice-action {
  margin: 0 0 0 auto;
}

@media (max-width: 480px) {
  .app-notice,
  .app-notice.notice,
  .app-notice > .notice {
    flex-direction: column;
    align-items: flex-start;
  }
  .notice-action {
    margin: 0;
  }
}

.app-frame {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  flex: 1 0 auto;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  /* The sidebar's rule, drawn by the frame so it runs the full page height. */
  background: linear-gradient(var(--line), var(--line)) 219px 0 / 1px 100% no-repeat;
}

.app-nav {
  position: sticky;
  top: calc(var(--header-h) + 1px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: calc(100dvh - var(--header-h) - 1px);
  padding: 20px 12px 20px var(--gutter);
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text-dim);
  font-weight: 500;
}

.app-nav-link svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--text-faint);
}

.app-nav-link:hover {
  color: var(--text);
  background: var(--bg-raised);
  text-decoration: none;
}

.app-nav-link[aria-current='page'] {
  color: var(--text);
  background: var(--bg-active);
}

.app-nav-link[aria-current='page'] svg {
  color: var(--accent);
}

.app-nav-sep {
  height: 1px;
  margin: 8px 10px;
  background: var(--line);
}

.app-main {
  min-width: 0;
  padding: 28px var(--gutter) 64px;
}

.app-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 24px;
}

.app-page-head h1 {
  font-size: 26px;
  font-weight: 700;
}

.app-page-head .app-page-sub {
  margin-top: 4px;
  color: var(--text-dim);
}

.app-section + .app-section {
  margin-top: 32px;
}

.app-section-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 650;
}

.app-footer {
  padding: 18px var(--gutter);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-faint);
}

.app-footer .footer-meta {
  justify-content: space-between;
}

/* On a phone the sidebar becomes a row of tabs under the header. */
@media (max-width: 860px) {
  .app-frame {
    grid-template-columns: minmax(0, 1fr);
    /* Rows keep their own height; spare height stays under the page. */
    align-content: start;
    background: none;
  }
  .app-nav {
    position: sticky;
    top: calc(var(--header-h) + 1px);
    z-index: 40;
    flex-direction: row;
    height: auto;
    gap: 4px;
    padding: 6px var(--gutter);
    overflow-x: auto;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .app-nav::-webkit-scrollbar {
    display: none;
  }
  .app-nav-link {
    flex: 0 0 auto;
    min-height: 44px;
  }
  .app-nav-sep {
    display: none;
  }
  .app-main {
    padding-top: 20px;
  }
  .app-page-head h1 {
    font-size: 23px;
  }
}

/* Four tabs fit a 390px phone once the icons go. */
@media (max-width: 480px) {
  .app-nav-link svg {
    display: none;
  }
  .app-nav-link {
    padding-inline: 12px;
  }
}

/* ---------------- sites list ---------------- */

.site-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.site-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.12s ease;
}

.site-card:hover {
  border-color: var(--line-strong);
}

.site-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.site-card-name {
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  overflow-wrap: anywhere;
}

.site-card-name:hover {
  color: var(--accent);
  text-decoration: none;
}

.site-card-domain {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.site-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-faint);
}

.favicon-dot {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
}

.site-card-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.min-w-0 {
  min-width: 0;
}

.narrow {
  max-width: 680px;
}

.site-settings {
  margin-top: 24px;
}

.archived-summary {
  cursor: pointer;
  list-style: none;
}

.archived-summary::-webkit-details-marker {
  display: none;
}

.archived-table {
  margin-top: 14px;
}

/* Cloudflare Turnstile (src/turnstile.ts): the widget sizes itself; this only
   spaces it and keeps the reserved height steady while it loads. */
.turnstile {
  margin-block: 4px 12px;
  min-height: 65px;
}

/* No lone words. Headings split their lines evenly, so "story." never drops
   to a line of its own; body copy avoids a one-word last line. Browsers
   without text-wrap simply wrap as before. Lines a heading forces itself
   (.hero-line, white-space: nowrap) are unaffected. */
h1,
h2,
h3,
h4,
.section-title,
.page-title {
  text-wrap: balance;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}