/* The app's own font, served from here (fonts/, SIL OFL): no third party sees who opens a link (#199). */
@font-face { font-family: 'Nunito'; src: url('/fonts/Nunito-Variable.ttf') format('truetype'); font-weight: 200 1000; font-display: swap; }
/* The fallback page's styles: the tokens from design/web/tokens.css (light on :root, dark through
   prefers-color-scheme) and the few classes it uses from design/web/components.css. */
:root {
  color-scheme: light;
  --font-sans: Nunito, 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bg: #f5f1ea;
  --surface: #ffffff;
  --line: #ece6dc;
  --line-strong: #d6cec1;
  --text: #22201c;
  --text-muted: #6b655c;
  --text-on-ink: #f5f1ea;
  --ink: #22201c;
  --focus-ring: #2d63b8;
  --list-green: #2f7d5b;
  --list-green-soft: #dcefe4;
  --list-blue: #2d63b8;
  --list-blue-soft: #dde7f7;
  --list-orange: #b9531f;
  --list-orange-soft: #fbe3d3;
  --list-yellow: #8f6400;
  --list-yellow-soft: #faefc8;
  --list-purple: #6b4fb3;
  --list-purple-soft: #e8e1f7;
  --list-pink: #b03a6e;
  --list-pink-soft: #f8dde9;
  --confetti-1: #2f7d5b;
  --confetti-4: #e8b400;
  --confetti-6: #d0518a;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-5: 20px;
  --space-8: 32px;
  --touch-min: 44px;
  --icon-tile: 56px;
  --icon-list: 28px;
  --radius-xs: 3px;
  --radius-sm: 11px;
  --radius-xl: 22px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1c1a17;
    --surface: #26231f;
    --line: #38332d;
    --line-strong: #4a443c;
    --text: #f3eee6;
    --text-muted: #a89f93;
    --text-on-ink: #1c1a17;
    --ink: #f3eee6;
    --focus-ring: #7fa9ec;
    --list-green: #5cc094;
    --list-green-soft: #1f3a2e;
    --list-blue: #7fa9ec;
    --list-blue-soft: #1f2d48;
    --list-orange: #f2925e;
    --list-orange-soft: #43291b;
    --list-yellow: #e2b73c;
    --list-yellow-soft: #3b3113;
    --list-purple: #b39fec;
    --list-purple-soft: #2e2746;
    --list-pink: #ec88b5;
    --list-pink-soft: #45202f;
    --confetti-1: #5cc094;
    --confetti-4: #e2b73c;
    --confetti-6: #ec88b5;
  }
}

.lc-green  { --lc: var(--list-green);  --lc-soft: var(--list-green-soft); }
.lc-blue   { --lc: var(--list-blue);   --lc-soft: var(--list-blue-soft); }
.lc-orange { --lc: var(--list-orange); --lc-soft: var(--list-orange-soft); }
.lc-yellow { --lc: var(--list-yellow); --lc-soft: var(--list-yellow-soft); }
.lc-purple { --lc: var(--list-purple); --lc-soft: var(--list-purple-soft); }
.lc-pink   { --lc: var(--list-pink);   --lc-soft: var(--list-pink-soft); }

html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 17px; line-height: 24px; font-weight: 700;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
[hidden] { display: none !important; }

/* The board: everything centred in one column, 20 px gaps, 40 / 20 px padding, the legal
   line at the bottom. */
.page {
  min-height: 100dvh; box-sizing: border-box;
  padding: 40px var(--space-5) 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5); text-align: center;
  max-width: 420px; margin: 0 auto; position: relative;
}
.mark { display: block; }
.mark-ink { fill: var(--ink); }
.mark-check { fill: none; stroke: var(--text-on-ink); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.mark-c1 { fill: var(--confetti-1); }
.mark-c4 { fill: var(--confetti-4); }
.mark-c6 { fill: var(--confetti-6); }
.wordmark { height: 32px; width: auto; display: block; }

.list { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); width: 100%; }
.list .title { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.list .name { font-size: 18px; line-height: 24px; font-weight: 800; overflow-wrap: anywhere; }
.line { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text-muted); }

svg.lu { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.lu.list { width: var(--icon-list); height: var(--icon-list); }
.lo-tile {
  width: var(--icon-tile); height: var(--icon-tile); border-radius: var(--radius-xl);
  background: var(--lc-soft); color: var(--lc); display: grid; place-items: center; flex: none;
}
.page[data-state="loading"] .lo-tile { opacity: .55; }
.lo-skel { display: block; background: var(--line); border-radius: var(--radius-sm); height: 14px; }
.lo-skel.title { height: 18px; width: 120px; }
.page:not([data-state="loading"]) .lo-skel { display: none; }
.page[data-state="loading"] .name { display: none; }

.lo-status { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text-muted); }
.lo-btn.text { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min); padding: 0 var(--space-3); font-weight: 700; font-size: 16px; color: var(--text); border-radius: 999px; }

/* Under the badges of a shared list (board Fallback, normal and noname): `meta` in
   `text-muted`, at most 300 px wide. */
.again { margin: 0; max-width: 300px; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--text-muted); }
.badges { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; padding-top: var(--space-2); }
/* Placeholders for the official store badges, 40 px high (design/gaps.md). */
.lo-badge { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 8px; background: var(--ink); color: var(--text-on-ink); font-size: 14px; line-height: 18px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.lo-badge .brand { width: 20px; height: 20px; border-radius: 50%; border: 2px dashed var(--text-on-ink); opacity: .6; box-sizing: border-box; }

.lo-link { color: var(--text); text-decoration: underline; font: inherit; }
.lo-link.home { font-size: 15px; font-weight: 700; min-height: var(--touch-min); display: inline-flex; align-items: center; }

.lo-legal { position: absolute; left: var(--space-5); right: var(--space-5); bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--text-muted); }
.lo-legal a { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 6px; color: var(--text-muted); text-decoration: none; }
.lo-legal a:active { color: var(--text); }
.lo-legal .dot { color: var(--line-strong); }