/* ============================================================================
   QSL.now site stylesheet: tokens, shell, and shared components.
   ----------------------------------------------------------------------------
   Two themes, both explicit. LIGHT is the default for everyone (:root). DARK applies only through
   :root[data-theme="dark"], set by /static/theme.js from localStorage "qslnow-theme" before first
   paint. There is deliberately NO prefers-color-scheme auto-dark (owner, 2026-09-05 and 2026-09-06).

   Light is relate's light palette (the reve.nu family on white: slate text, cyan accent, and a cyan
   primary button: cyan 700 to 800, the lightest steps that keep white text at 4.5:1; the slate
   primary of the first cut read as a grey control next to the yellow coffee button, design critique
   2026-10-31). Dark is the GitHub-dark family the owner likes (#0D1117 / #161B22 / #30363D /
   #C9D1D9 / #58A6FF). Buttons, the focus ring, the hover lift and glow, the accent top rule on
   cards, and the type proportions are lifted from reve.nu's style.css and revenu-theme.css. The
   pulse (.btn-pulse) and the highlight mark (.hl) are new in that family.

   Token names: --text is the canonical text color. The older sheets say var(--ink) for text, so
   --ink is an ALIAS of --text here (note: in reve.nu's own theme --ink means a recessed well; that
   meaning is NOT used in QSL.now). --line, --ok, and --accent-ink are aliases too. New rules should
   use the canonical names. Full list: docs/design-system.md.

   Color (2026-10-30, owner: "add more color to the standard theme, like reve.nu", NOT a picker): there
   is ONE theme in light and dark. --accent stays the house cyan (GitHub blue in dark) for the header
   rule, links, rings, and the primary button. On top of that, six fixed HUE tokens (sky, amber,
   violet, lime, teal, orange; reve.nu's product accents from its style.css) give sections their own
   color the way reve.nu's module rows do: a .hue-<name> class on a card, a step, a kicker, or the
   counter re-points --accent, --accent-link, --accent-soft, --accent-ring, --gradient-accent,
   --accent-fill, and --accent-text for that element and its descendants, so the top rule, the number
   badge, and the kicker text pick up the hue with no further rules. Chrome only: item state (ready,
   waiting, failed) always uses the semantic tokens below.
   --accent-link is the accent for TEXT on a surface (links, .link, .eyebrow, the active nav item,
   the brand suffix, the blue badge, .counter-num). Each hue's -text step is the 700 or 800 in light
   so it clears 4.5:1 on white, and the 500 in dark (violet uses the lighter #A78BFA). (--accent-ink
   is NOT that token: it is the legacy alias of --accent-text, text ON the fill, and designs.css
   relies on that meaning.)
   ========================================================================== */

:root {
  /* surfaces */
  --bg:            #EDF1F5;
  --surface:       #FFFFFF;
  --chrome:        #FFFFFF;              /* header and footer bands */
  --field-bg:      #FFFFFF;              /* inputs, selects, textareas */
  --well:          #F4F7FA;              /* recessed rows inside a card */
  --border:        #CBD6E0;
  --border-subtle: #AFBFCC;              /* stronger: ghost buttons, input borders */

  /* text */
  --text:   #0B1220;
  --text-2: #334155;
  --muted:  #475569;
  --faint:  #5B6B7E;

  /* accent: chrome only (links, rings, active tabs, the header rule). Never encodes state. */
  --accent:               #0E7490;
  --accent-link:          var(--accent); /* accent for text on a surface; the colored sets darken it in light */
  --accent-fill:          #0E7490;       /* cyan 700: solid fill for the primary button when a gradient will not do */
  --accent-text:          #F8FAFC;       /* text ON the primary fill (5.3:1 on cyan 700, 7.0:1 on cyan 800) */
  --accent-soft:          rgba(6, 182, 212, 0.10);
  --accent-ring:          rgba(6, 182, 212, 0.32);
  --gradient-accent:      linear-gradient(135deg, #0E7490 0%, #126E88 55%, #155E75 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(14, 116, 144, 0.08) 0%, rgba(14, 116, 144, 0.02) 100%);
  --hl:                   rgba(6, 182, 212, 0.24);   /* the highlight mark behind a word */

  /* hues: fixed section colors (reve.nu product accents). -text is the step for text on a surface,
     -on is the text ON the fill, -soft and -ring are washes, -grad is the 400 -> 500 -> 600 fill. */
  --sky:    #38BDF8; --sky-text:    #0369A1; --sky-on:    #0F172A; --sky-soft:    rgba(56, 189, 248, 0.15); --sky-ring:    rgba(56, 189, 248, 0.35); --sky-grad:    linear-gradient(135deg, #7DD3FC 0%, #38BDF8 55%, #0EA5E9 100%);
  --amber:  #F59E0B; --amber-text:  #92400E; --amber-on:  #0F172A; --amber-soft:  rgba(245, 158, 11, 0.15); --amber-ring:  rgba(245, 158, 11, 0.35); --amber-grad:  linear-gradient(135deg, #FBBF24 0%, #F59E0B 55%, #D97706 100%);
  --violet: #8B5CF6; --violet-text: #7C3AED; --violet-on: #F8FAFC; --violet-soft: rgba(139, 92, 246, 0.15); --violet-ring: rgba(139, 92, 246, 0.35); --violet-grad: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 55%, #7C3AED 100%);
  --lime:   #84CC16; --lime-text:   #3F6212; --lime-on:   #0F172A; --lime-soft:   rgba(132, 204, 22, 0.15); --lime-ring:   rgba(132, 204, 22, 0.35); --lime-grad:   linear-gradient(135deg, #A3E635 0%, #84CC16 55%, #65A30D 100%);
  --teal:   #14B8A6; --teal-text:   #0F766E; --teal-on:   #0F172A; --teal-soft:   rgba(20, 184, 166, 0.15); --teal-ring:   rgba(20, 184, 166, 0.35); --teal-grad:   linear-gradient(135deg, #2DD4BF 0%, #14B8A6 55%, #0D9488 100%);
  --orange: #F97316; --orange-text: #C2410C; --orange-on: #0F172A; --orange-soft: rgba(249, 115, 22, 0.15); --orange-ring: rgba(249, 115, 22, 0.35); --orange-grad: linear-gradient(135deg, #FB923C 0%, #F97316 55%, #EA580C 100%);

  /* semantic: item state. Each has a soft wash for badges and notes. */
  --success:      #15803D;  --success-soft: rgba(22, 163, 74, 0.12);
  --warning:      #B45309;  --warning-soft: rgba(217, 119, 6, 0.14);
  --danger:       #B91C1C;  --danger-soft:  rgba(220, 38, 38, 0.10);
  --info:         #0369A1;  --info-soft:    rgba(14, 165, 233, 0.12);

  /* shape, depth, type */
  --radius:    8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:    0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-up: 0 -8px 24px rgba(15, 23, 42, 0.10);
  --max:       1040px;
  --tap:       44px;                      /* minimum hit target on buttons and controls */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* legacy aliases (older page sheets); keep them resolving */
  --ink:        var(--text);
  --line:       var(--border);
  --ok:         var(--success);
  --accent-ink: var(--accent-text);

  color-scheme: light;
}

/* ---- DARK: explicit toggle only ------------------------------------------------------------ */
:root[data-theme="dark"] {
  --bg:            #0D1117;
  --surface:       #161B22;
  --chrome:        #161B22;
  --field-bg:      #0D1117;
  --well:          #0D1117;
  --border:        #30363D;
  --border-subtle: #484F58;

  --text:   #C9D1D9;
  --text-2: #B1BAC4;
  --muted:  #8B949E;
  --faint:  #768390;

  --accent:               #58A6FF;
  --accent-fill:          #1F6FEB;
  --accent-text:          #0D1117;
  --accent-soft:          rgba(88, 166, 255, 0.12);
  --accent-ring:          rgba(88, 166, 255, 0.38);
  --gradient-accent:      linear-gradient(135deg, #79C0FF 0%, #58A6FF 55%, #388BFD 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(88, 166, 255, 0.14) 0%, rgba(88, 166, 255, 0.04) 100%);
  --hl:                   rgba(88, 166, 255, 0.28);

  /* hues in dark: the 500 reads as text on #161B22 (violet takes the lighter #A78BFA) */
  --sky-text: #38BDF8; --amber-text: #F59E0B; --lime-text: #84CC16; --teal-text: #14B8A6; --orange-text: #F97316;
  --violet: #A78BFA; --violet-text: #A78BFA; --violet-on: #0F172A; --violet-soft: rgba(167, 139, 250, 0.15); --violet-ring: rgba(167, 139, 250, 0.35); --violet-grad: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 55%, #8B5CF6 100%);

  --success:      #3FB950;  --success-soft: rgba(63, 185, 80, 0.16);
  --warning:      #D29922;  --warning-soft: rgba(210, 153, 34, 0.16);
  --danger:       #F85149;  --danger-soft:  rgba(248, 81, 73, 0.14);
  --info:         #58A6FF;  --info-soft:    rgba(88, 166, 255, 0.14);

  --shadow-sm: 0 1px 2px rgba(1, 4, 9, 0.5);
  --shadow:    0 4px 12px rgba(1, 4, 9, 0.5);
  --shadow-lg: 0 8px 24px rgba(1, 4, 9, 0.6);
  --shadow-up: 0 -8px 24px rgba(1, 4, 9, 0.6);

  color-scheme: dark;
}

/* ---- HUES: .hue-<name> re-points the accent tokens for one element and its descendants ----------
   reve.nu's module-accent pattern (style.css .accent-* on a row): the section carries the color, the
   rules below it just read var(--accent). Used by the landing (why cards, steps, kicker, counter),
   the help sidebar group heads, and anything else that wants its own color without a user control. */
.hue-sky    { --accent: var(--sky);    --accent-link: var(--sky-text);    --accent-soft: var(--sky-soft);    --accent-ring: var(--sky-ring);    --gradient-accent: var(--sky-grad);    --accent-fill: var(--sky);    --accent-text: var(--sky-on);    --hl: var(--sky-soft); }
.hue-amber  { --accent: var(--amber);  --accent-link: var(--amber-text);  --accent-soft: var(--amber-soft);  --accent-ring: var(--amber-ring);  --gradient-accent: var(--amber-grad);  --accent-fill: var(--amber);  --accent-text: var(--amber-on);  --hl: var(--amber-soft); }
.hue-violet { --accent: var(--violet); --accent-link: var(--violet-text); --accent-soft: var(--violet-soft); --accent-ring: var(--violet-ring); --gradient-accent: var(--violet-grad); --accent-fill: var(--violet); --accent-text: var(--violet-on); --hl: var(--violet-soft); }
.hue-lime   { --accent: var(--lime);   --accent-link: var(--lime-text);   --accent-soft: var(--lime-soft);   --accent-ring: var(--lime-ring);   --gradient-accent: var(--lime-grad);   --accent-fill: var(--lime);   --accent-text: var(--lime-on);   --hl: var(--lime-soft); }
.hue-teal   { --accent: var(--teal);   --accent-link: var(--teal-text);   --accent-soft: var(--teal-soft);   --accent-ring: var(--teal-ring);   --gradient-accent: var(--teal-grad);   --accent-fill: var(--teal);   --accent-text: var(--teal-on);   --hl: var(--teal-soft); }
.hue-orange { --accent: var(--orange); --accent-link: var(--orange-text); --accent-soft: var(--orange-soft); --accent-ring: var(--orange-ring); --gradient-accent: var(--orange-grad); --accent-fill: var(--orange); --accent-text: var(--orange-on); --hl: var(--orange-soft); }

/* ============================================================================ BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 17px; }
@media (min-width: 900px) { html { font-size: 18px; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { color: var(--text); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--accent-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
code, kbd, pre, samp, .mono { font-family: var(--font-mono); }
code { font-size: 0.9em; background: var(--well); border: 1px solid var(--border); border-radius: 4px; padding: 0.05em 0.35em; }
pre { background: var(--well); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; overflow-x: auto; font-size: 0.9rem; }
pre code { background: none; border: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
::selection { background: var(--hl); }
mark, .hl {
  /* highlight mark behind a word or two: a wash under the lower part of the line, like a marker pen.
     A phrase, never a whole sentence: a full line reads as selected text (critique 2026-10-31). */
  background: linear-gradient(180deg, transparent 52%, var(--hl) 52%);
  color: inherit;
  padding: 0 0.12em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* focus: one ring everywhere */
a:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================================ SHELL */
header.top {
  background: var(--chrome);
  border-bottom: 3px solid var(--accent);     /* reve.nu app bar: accent rule under the band */
  box-shadow: var(--shadow-sm);
}
.top-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.brand { font-weight: 800; font-size: 1.45rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.brand span { color: var(--accent-link); }
.brand:hover { text-decoration: none; }
nav { display: flex; gap: 2px 4px; align-items: center; flex-wrap: wrap; }
nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 600; text-decoration: none; }
nav a:hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }
nav a[aria-current="page"] { color: var(--accent-link); box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
nav a.btn { margin-left: 6px; }
.nav-user { color: var(--muted); font-size: 0.9rem; padding: 0 6px 0 10px; }

/* the theme switcher: a ghost pill named for the theme you would switch TO. theme.js flips the
   root attribute; these rules pick which icon + label pair shows, so there is nothing to repaint. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); margin-left: 6px; padding: 0 14px 0 12px;
  border-radius: 999px; border: 1px solid var(--border-subtle); background: transparent;
  color: var(--text-2); font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.theme-toggle > span { display: inline-flex; align-items: center; gap: 8px; }
.theme-toggle .ico { display: block; flex: none; }
:root[data-theme="dark"] .theme-toggle__to-dark { display: none; }
:root:not([data-theme="dark"]) .theme-toggle__to-light { display: none; }
@media (max-width: 420px) { .theme-toggle__label { display: none; } .theme-toggle { padding: 0 11px; } }

main { max-width: var(--max); margin: 0 auto; padding: 0 16px 56px; }

footer { background: var(--chrome); border-top: 1px solid var(--border); padding: 28px 16px 40px; text-align: center; color: var(--muted); font-size: 0.95rem; }
footer p { margin: 0 0 6px; }

/* ============================================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 10px 20px;
  border-radius: var(--radius); border: 1px solid var(--border-subtle);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

.btn-primary {
  background-color: var(--accent-fill);
  background-image: var(--gradient-accent);
  border-color: transparent;
  color: var(--accent-text);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-ring); color: var(--accent-text); }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); }
.btn-primary[disabled]:hover { transform: none; }

.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.btn-lg { padding: 13px 28px; font-size: 1.08rem; }
.btn-block { display: flex; width: 100%; }

/* the one main call to action on a page: a soft ring that breathes outward */
@keyframes qsl-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-ring); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.btn-pulse { animation: qsl-pulse 2.2s ease-out infinite; }
.btn-pulse:hover, .btn-pulse:focus-visible { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .btn-pulse { animation: none; box-shadow: 0 0 0 4px var(--accent-ring); }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* a text button that looks like a link (Select all / none) */
.link, button.link { background: none; border: 0; padding: 0; color: var(--accent-link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: var(--tap); }

/* ============================================================================ BADGES, PILLS, STATUS */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; text-transform: uppercase;
  background: var(--well); color: var(--text-2); border: 1px solid var(--border);
  vertical-align: middle;
}
.badge-green  { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.badge-yellow { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.badge-red    { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger); }
.badge-blue, .badge-moved { background: var(--accent-soft); color: var(--accent-link); border-color: var(--accent); }

/* ============================================================================ NOTES, FLASHES, CARDS */
.flash { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.flash-ok { border-left-color: var(--success); }
.flash-err, .flash-warn { border-left-color: var(--warning); }
.flash-danger { border-left-color: var(--danger); }

.note { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 12px; }
.note-warn { border-left-color: var(--warning); }
.note-ok { border-left-color: var(--success); }
.banner { background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px; }
.empty { background: var(--surface); border: 1px dashed var(--border-subtle); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--muted); }

.form-errors { border: 1px solid var(--danger); border-left: 4px solid var(--danger); background: var(--danger-soft); border-radius: var(--radius); padding: 10px 16px; margin: 0 0 16px; }
.form-errors ul { margin: 0; padding-left: 18px; }
.form-note { font-size: 0.9rem; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.card-accent { border-top: 3px solid var(--accent); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* ============================================================================ FORMS */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
select, textarea {
  font: inherit; color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  min-height: var(--tap); padding: 10px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { line-height: 1.5; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 20px; height: 20px; margin: 0; flex: none; }
input[type="file"] { font: inherit; color: var(--text-2); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 12px; padding: 8px 14px; min-height: var(--tap);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent); }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0; background: var(--surface); min-width: 0; }
legend { font-weight: 700; padding: 0 6px; }
[aria-invalid="true"] { border-color: var(--danger) !important; }

.field { display: grid; gap: 6px; margin: 0; }
.field label { font-weight: 600; }
.auth-form { max-width: 440px; }
.auth-form .field { display: block; margin: 0 0 16px; }
.auth-form br { display: none; }
.auth-form label { display: block; margin: 0 0 6px; font-weight: 600; }
.auth-form input { display: block; width: 100%; }
.auth-form small { display: block; margin-top: 6px; }
.auth-form .btn { margin-top: 4px; }

/* ============================================================================ TABLES */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table-wrap th, .table-wrap td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table-wrap thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--well); font-weight: 600; }
.table-wrap tbody tr:hover > td { background: var(--accent-soft); }
.table-wrap tbody:last-child tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.center { text-align: center; }

/* ============================================================================ PAGE FURNITURE */
.muted { color: var(--muted); }
.lead-sm { color: var(--text-2); font-size: 1.05rem; margin: 0 0 24px; }
.crumbs { color: var(--muted); font-size: 0.95rem; margin: 16px 0 4px; }
.crumbs a { color: var(--muted); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 24px 0 16px; }
.eyebrow { font-family: var(--font-mono); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-link); margin: 0 0 12px; }

/* ============================================================================ LANDING */
.hero {
  padding: 64px 16px 36px; margin: 0 -16px; text-align: center;
  background: radial-gradient(70% 60% at 50% -10%, var(--accent-soft) 0%, transparent 65%);
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0 auto 18px; max-width: 18ch; }
.lead { font-size: 1.2rem; color: var(--text-2); max-width: 720px; margin: 0 auto 26px; line-height: 1.6; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0 0 24px; }
/* the two hero buttons are the biggest controls on the site: 56 px tall, wide enough to tap without aiming */
.cta .btn { min-height: 56px; min-width: 15.5rem; padding: 14px 34px; font-size: 1.15rem; border-radius: 10px; }
/* the pill under the hero buttons: the sent count from 100 up, "New in 2026" before that (a small number is anti-proof) */
.counter {
  display: inline-flex; align-items: baseline; gap: 8px; margin: 0 0 20px; padding: 8px 18px;
  font-family: var(--font-mono); color: var(--muted); font-size: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-sm);
}
.counter-num { font-size: 1.5rem; color: var(--accent-link); font-weight: 700; font-variant-numeric: tabular-nums; }

.how, .why, .section { padding: 40px 0; border-top: 1px solid var(--border); }
.how h2, .why h2, .section h2 { font-size: 1.7rem; margin: 0 0 20px; }

/* numbered steps: a gradient disc with the number, the text in a card. Each li carries a .hue-* class
   on the landing, so the discs cycle through sky, amber, and violet. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li {
  counter-increment: step; position: relative; padding: 14px 18px 14px 66px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.steps li::before {
  content: counter(step); position: absolute; left: 14px; top: 13px; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-fill); background-image: var(--gradient-accent); color: var(--accent-text);
  font-family: var(--font-mono); font-weight: 700; font-size: 1rem;
}
.steps li strong { color: var(--text); }

/* why cards: the top rule and a small round number badge read the card's own hue (.hue-* on each li) */
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; counter-reset: why; }
.grid li { counter-increment: why; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); color: var(--text-2); }
.grid li::before {
  content: counter(why); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-link); border: 1px solid var(--accent);
  font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem;
}
.grid li strong { display: block; color: var(--text); font-size: 1.08rem; margin-bottom: 4px; }

/* ============================================================================ PROGRESS (the four-step flow)
   layout() renders <nav class="progress"> at the top of <main> when a route passes step. Done steps
   are filled with the accent (the same gradient as the primary button), the current step is amber
   with a soft ring, later steps are muted. Names hide on phones except the current one. */
.progress { display: block; margin: 20px 0 4px; }   /* block, not the flex row every other nav gets, so the list spans the page */
.progress ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; }
.progress li { flex: 1 1 0; min-width: 0; position: relative; display: flex; justify-content: center; }
.progress li + li::before { content: ""; position: absolute; top: 22px; left: -50%; right: 50%; height: 2px; background: var(--border); }
.progress li.is-done + li::before { background: var(--accent); }
.progress a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%;
  min-height: var(--tap); padding: 4px 6px; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 0.85rem; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none;
}
.progress a:hover { color: var(--text); text-decoration: none; }
.progress-num {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--well); color: var(--muted); border: 2px solid var(--border);
  font-family: var(--font-mono); font-weight: 700; font-size: 1rem;
  transition: box-shadow 0.15s ease;
}
.progress-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress .is-done a { color: var(--text-2); }
.progress .is-done .progress-num { background-color: var(--accent-fill); background-image: var(--gradient-accent); color: var(--accent-text); border-color: transparent; }
.progress .is-current a { color: var(--text); }
.progress .is-current .progress-num { background: var(--amber); color: var(--amber-on); border-color: transparent; box-shadow: 0 0 0 4px var(--amber-soft); }
@media (max-width: 640px) {
  /* phones: only the current step keeps its name, hung under its circle so it can be wider than the column */
  .progress a { padding-bottom: 28px; }
  .progress li:not(.is-current) .progress-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .progress .is-current .progress-name { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); max-width: none; overflow: visible; }
}

/* ============================================================================ PROSE (legal pages, help articles) */
.prose { max-width: 760px; margin: 24px auto; color: var(--text); }
.prose h1 { font-size: 2rem; letter-spacing: -0.02em; margin: 0 0 12px; }
.prose h2 { font-size: 1.4rem; margin: 36px 0 10px; }
.prose h3 { font-size: 1.15rem; margin: 28px 0 8px; }
.prose p, .prose li { line-height: 1.65; }
.prose li { margin: 0 0 6px; }
.prose a { text-decoration: underline; }
.prose a.btn, .prose .btn { text-decoration: none; }
.prose img { height: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 8px 0 16px; display: block; box-shadow: var(--shadow-sm); }
.prose blockquote { margin: 16px 0; padding: 8px 16px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: var(--radius-sm); color: var(--text-2); }
.prose table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 0.95rem; background: var(--surface); }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--well); color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.prose > :first-child { margin-top: 0; }

@media (max-width: 640px) {
  .hero { padding-top: 40px; }
  .cta .btn { width: 100%; }
  main { padding-bottom: 40px; }
  /* a help table wider than a phone scrolls inside itself instead of pushing the page sideways */
  .prose table { display: block; overflow-x: auto; }
}

/* Header fit: a signed-in nav has seven items plus the theme switch. Drop the username first, then the switch label, so nothing wraps onto a second line before phone width. */
/* The nav column is capped at 1008 px at every viewport, so a signed-in header (eight items) drops the username and the toggle label outright instead of by viewport width. */
.top.is-signed-in .nav-user { display: none; }
.top.is-signed-in .theme-toggle__label { display: none; }
.top.is-signed-in .theme-toggle { padding: 0 11px; }
@media (max-width: 1440px) { .nav-user { display: none; } }
@media (max-width: 1320px) { .theme-toggle__label { display: none; } .theme-toggle { padding: 0 11px; } }
@media (max-width: 960px) { nav a { padding: 0 9px; } nav a.btn { margin-left: 2px; } }

/* Buy Me a Coffee: official yellow button under a one-line reason and a small hand-drawn arrow. It sits at the
   foot of "How it works", below the fold: in the hero its yellow was the most saturated thing on the page and
   beat the one call to action (critique 2026-10-31). Block-level and centered. */
.coffee { display: flex; flex-direction: column; align-items: center; gap: 0; width: max-content; max-width: 100%; margin: 32px auto 0; }
/* Buy Me a Coffee keeps a neutral ghost look in every accent: no accent border or wash on hover */
.coffee .btn:hover { border-color: var(--border-subtle); background: var(--well); color: var(--text); }
.coffee-note { margin: 0; font-size: 0.95rem; color: var(--muted); font-style: italic; }
.coffee-arrow { width: 44px; height: 30px; color: var(--muted); margin: 2px 0 4px 70px; }
.coffee-link img { display: block; height: 52px; width: auto; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: transform .15s ease; }
.coffee-link:hover img { transform: translateY(-1px); }

/* Either / or: two big, colored choices, used on /start and on the design page */
.eo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch;margin:12px 0 16px;border:0}
.eo-or{align-self:center;font-weight:800;font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.eo-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;padding:14px 16px;min-height:0;border:3px solid transparent;border-radius:var(--radius);color:#fff;font:inherit;cursor:pointer;text-decoration:none;opacity:.72;transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease}
.eo-card:hover{opacity:1;color:#fff;text-decoration:none;background-image:none}
.eo-templates,.eo-templates:hover{background:linear-gradient(135deg,#0969da,#6639ba)}
.eo-photos,.eo-photos:hover{background:linear-gradient(135deg,#bc4c00,#bf8700)}
.eo-card.is-on,.eo-card[aria-pressed="true"]{opacity:1;border-color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,.25);transform:translateY(-1px)}
.eo-thumb{display:block;width:100%;max-width:220px;height:auto;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.eo-text{display:block}
.eo-title{display:block;font-size:1.3rem;line-height:1.2;margin-bottom:4px;color:#fff}
.eo-sub{display:block;font-size:.95rem;line-height:1.35;color:#fff}
.eo-jump{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:16px 0;padding:12px 16px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius)}
.advanced-panel{margin:16px 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:10px 14px}
.advanced-panel summary{cursor:pointer;font-weight:600}
.advanced-panel[open] summary{margin-bottom:10px}
.advanced-panel .panel-row,.advanced-panel .flick-panel{border:0;background:none;padding:0;margin:0}
.panel-reset{margin:10px 0 0}
@media (max-width:640px){.eo{grid-template-columns:minmax(0,1fr)}.eo-or{justify-self:center}}

/* Home: no login needed, and what logging in adds */
.account-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.ac-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:20px}
.ac-card h2{margin:0 0 8px;font-size:1.35rem}
.ac-card ul{margin:0 0 10px;padding-left:20px}
.ac-card li+li{margin-top:6px}
.ac-free{border-top:5px solid #1a7f37}
.ac-login{border-top:5px solid #6639ba}
@media (max-width:720px){.account-choice{grid-template-columns:minmax(0,1fr)}}