/* ────────────────────────────────────────────── FONTS (self-hosted) */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-mono-symbols2.woff2') format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-mono-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ────────────────────────────────────────────── DESIGN TOKENS
   Pale lavender pastel, white cards, decorative dotted board background. */
:root {
  --bg:        oklch(0.985 0.012 295);
  --bg-dot:    oklch(0.945 0.022 295);
  --paper:     #fdfcff;
  --card:      #ffffff;
  --line:      oklch(0.88 0.022 295);
  --line-soft: oklch(0.93 0.018 295);

  --ink:       oklch(0.22 0.025 295);
  --ink-2:     oklch(0.38 0.025 295);
  --mute:      oklch(0.52 0.02 295);
  --mute-2:    oklch(0.64 0.018 295);
  --accent:    oklch(0.52 0.14 295);
  --tape:      oklch(0.86 0.08 75);

  --up:        oklch(0.62 0.16 150);
  --up-soft:   oklch(0.93 0.07 150);
  --deg:       oklch(0.74 0.16 75);
  --deg-soft:  oklch(0.94 0.07 75);
  --dn:        oklch(0.58 0.20 28);
  --dn-soft:   oklch(0.94 0.06 25);

  --plum:      oklch(0.55 0.18 340);
  --plum-soft: oklch(0.93 0.06 340);
  --whale:     oklch(0.55 0.13 230);
  --whale-soft:oklch(0.93 0.05 230);

  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  /* accent depth — link hover + soft fills/rings */
  --accent-ink:  oklch(0.44 0.15 295);
  --accent-soft: oklch(0.93 0.05 295);

  /* fluid type ramp — min … preferred … max */
  --text-xs:  clamp(0.69rem, 0.14vw + 0.65rem, 0.75rem);
  --text-sm:  clamp(0.78rem, 0.22vw + 0.73rem, 0.84rem);
  --text-base:clamp(0.90rem, 0.30vw + 0.84rem, 0.98rem);
  --text-lg:  clamp(0.98rem, 0.50vw + 0.86rem, 1.125rem);
  --text-xl:  clamp(1.25rem, 0.85vw + 1.06rem, 1.5rem);
  --text-2xl: clamp(1.6rem,  1.6vw  + 1.2rem,  2.2rem);

  /* line-height modes */
  --lh-tight:1.2; --lh-snug:1.4; --lh-ui:1.3; --lh-prose:1.62;

  /* prose measures */
  --measure-prose:66ch; --measure-tight:42ch;

  /* spacing rhythm — 4px base scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;

  /* radius scale — consolidated */
  --radius-xs:4px; --radius-md:12px; --radius-lg:20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; color: var(--ink); }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-ui);
  font-variant-numeric: tabular-nums lining-nums;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(var(--bg-dot) 1px, transparent 1.2px) 0 0 / 20px 20px,
    var(--bg);
}
::selection { background: var(--accent); color: #fff; }

/* ────────────────────────────────────────────── PAGE LAYOUT */
.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 28px 80px;
  position: relative;
}
.loading {
  min-height: 100vh; display: grid; place-items: center;
  color: var(--mute); font-size: 18px;
  text-align: center; padding: 24px;
}
.loading b { color: var(--ink); font-weight: 600; }

/* Loading spinner — CSS border ring, reduced-motion honored. */
.spinner {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
.spinner.lg { width: 30px; height: 30px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Stale banner — only when /api/status fails AND we already had data. */
.stale-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin: 0 0 24px;
  background: var(--dn-soft);
  border: 1px solid oklch(0.85 0.10 25);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: oklch(0.40 0.13 25);
}
.stale-bar i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dn);
  flex: none;
}

/* (Hero and section-header styles previously defined here were removed —
   the page now leads directly with the Plum and Whale column headings.) */

/* ────────────────────────────────────────────── COLUMNS */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-top: var(--s-5);
}
@media (max-width: 700px) {
  .columns { grid-template-columns: 1fr; gap: var(--s-6); }
}
.column { display: flex; flex-direction: column; min-width: 0; }

.col-head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding: 0 var(--s-1);
}
.col-motif {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  background: #fff;
  display: grid; place-items: center;
  flex: none;
}
.column[data-host="plum"]  .col-motif { color: var(--plum);  background: var(--plum-soft); }
.column[data-host="whale"] .col-motif { color: var(--whale); background: var(--whale-soft); }
.col-head h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.col-head .where {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 2px;
}

.col-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px;
  position: relative;
}
/* Decorative stickers. Base carries shared styling + the default position
   (top/right/width) for any image not listed below; per-image modifiers
   override. Modifier rules are generated from the sticker filenames — see
   stkClass() in app.jsx. */
.stk {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.15));
  width: 80px; /* size fallback only — every listed sticker overrides it.
     No inset defaults here: they would leak into modifiers that anchor by
     the opposite edge (e.g. bottom/left) and over-constrain them. An
     unlisted file therefore falls back to the top-left corner. */
}
.stk--dukecop-png{top:61px;left:250px;width:70px;transform:rotate(2deg)}
.stk--dukehappy-png{top:390px;right:160px;width:70px}
.stk--dukelick-png{top:51px;right:35px;width:82px}
.stk--dukeswim-png{right:-30px;bottom:40px;width:92px;transform:rotate(6deg)}
.stk--duketongue-png{bottom:20px;left:-30px;width:75px}
.stk--dukeysmile-png{right:-24px;bottom:120px;width:80px;transform:rotate(-5deg)}
.stk--froggy-png{bottom:40px;left:-30px;width:80px}
.stk--peridots6render-by-theoffcolors-png{right:-28px;bottom:60px;width:80px}
.stk--rubushka-png{right:-24px;bottom:120px;width:80px;transform:rotate(-5deg)}
.stk--rubycafe-png{top:78px;right:85px;width:70px;transform:rotate(-12deg)}
.stk--rubywetsuit-png{top:75px;left:350px;width:100px;transform:rotate(-7deg)}
.stk--sandydawg-png{top:100px;right:50px;width:90px;transform:rotate(10deg)}
.stk--animal-well-bunnies-pixel-art-game-rant-png{top:90px;right:50px;width:96px;transform:rotate(2deg)}
.stk--bb-1-png{top:100px;right:0px;width:74px;transform:rotate(-9deg)}
.stk--dukecryptid-png{bottom:0px;left:-400px;width:88px}
.stk--milk-berry-sticker-png{bottom:20px;left:-30px;width:75px}
.stk--owl-png{top:270px;left:-50px;width:76px}
.stk--sandy-1-sticker-png{top:74px;right:65px;width:82px}
.stk--soot-1-sticker-png{top:60px;left:-26px;width:60px;transform:rotate(8deg)}
.stk--soot-2-sticker-png{top:140px;left:-22px;width:58px;transform:rotate(-7deg)}
.stk--soot-3-png{right:-24px;bottom:180px;width:62px;transform:rotate(9deg)}
.stk--soot-4-png{top:220px;right:-22px;width:60px;transform:rotate(-5deg)}
.stk--soot-5-png{bottom:200px;left:-24px;width:58px;transform:rotate(7deg)}
.stk--steven-universe-pumpkin-512x512-png{bottom:20px;left:-30px;width:75px}
.stk--tokyotoilet-jpg{bottom:240px;left:-28px;width:80px;transform:rotate(4deg)}
.stk--tokyotoilet-png{top:340px;left:-26px;width:80px;transform:rotate(-8deg)}
/* Card is just three rows (Plex / Seerr / Downloads) — no dividers,
   no group gaps. Padding on each row carries the spacing. */

/* ────────────────────────────────────────────── SERVICE ROW */
.svc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "indicator name   since"
    "indicator detail since";
  gap: 1px var(--s-3);
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
  color: inherit;
  transition: background 160ms;
}
a.svc { cursor: pointer; }
a.svc:hover { background: oklch(0.97 0.014 295); }

.svc-indicator {
  grid-area: indicator;
  align-self: center;
  width: 14px; height: 14px;
  border-radius: var(--radius-xs);
  background: var(--up);
  flex: none;
}
.svc[data-status="degraded"] .svc-indicator { background: var(--deg); }
.svc[data-status="down"]     .svc-indicator { background: var(--dn); }

.svc-name {
  grid-area: name;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: var(--lh-tight);
}
.svc-link-arrow {
  width: 11px; height: 11px;
  color: var(--mute);
  flex: none;
  transition: color 160ms, transform 160ms;
}
a.svc:hover .svc-link-arrow {
  color: var(--ink-2);
  transform: translate(1px, -1px);
}

.svc-detail {
  grid-area: detail;
  font-size: 13px;
  color: var(--mute);
  margin-top: 2px;
}
.svc[data-status="down"] .svc-detail     { color: oklch(0.45 0.16 28); font-weight: 500; }
.svc[data-status="degraded"] .svc-detail { color: oklch(0.48 0.15 70); font-weight: 500; }

.svc-since {
  grid-area: since;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  white-space: nowrap;
  text-align: right;
}

/* ────────────────────────────────────────────── UPDATES */
.updates {
  display: flex; flex-direction: column; gap: var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px dashed var(--line);
}
.updates-empty { color: var(--mute); font-size: var(--text-sm); font-style: italic; }
.upd {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--s-5) var(--s-6);
}
.upd::before {
  /* tape strip — to use a custom image, swap `background` for `background-image: url(…); background-size: cover;` */
  content: "";
  position: absolute; top: -8px; left: 24px;
  width: 70px; height: 16px;
  background: var(--tape);
  opacity: 0.78;
  transform: rotate(-3deg);
  border-radius: var(--radius-xs);
}

.upd-head {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.upd-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-xs);
}
.upd-tag[data-status="active"]    { background: var(--dn); }
.upd-tag[data-status="scheduled"] { background: oklch(0.58 0.15 70); }
.upd-tag[data-status="resolved"]  { background: oklch(0.50 0.13 150); }
.upd-date {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--mute);
}

.upd-title {
  margin: 0 0 var(--s-2);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: var(--lh-tight);
}
/* ────────────────────────────────────────────── PROSE
   Shared long-form module (canonical token names). Applied to the
   bleach-sanitized Updates post body. Extends onboarding's .prose with
   pre/pre code and h4 (both allowed by the bleach sanitizer). */
.prose { max-width: var(--measure-prose); font-size: var(--text-base); line-height: var(--lh-prose); color: var(--ink-2); font-variant-numeric: oldstyle-nums proportional-nums; text-wrap: pretty; }
.prose > * + * { margin-top: 1.05em; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--ink); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; text-wrap: balance; }
.prose h1 { font-size: var(--text-2xl); line-height: 1.14; letter-spacing: -.02em; margin-top: 0; }
.prose h2 { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -.01em; margin-top: 1.9em; }
.prose h3 { font-size: var(--text-lg); line-height: 1.3; margin-top: 1.6em; }
.prose h4 { font-size: var(--text-base); line-height: 1.3; margin-top: 1.4em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .5em; }
.prose p { margin: 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent-ink); }
.prose ul, .prose ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: .4em; }
.prose li { padding-left: .2em; }
.prose li::marker { color: var(--mute); }
.prose blockquote { margin: 0; padding: .1em 0 .1em 1.1em; border-left: 3px solid var(--accent-soft); color: var(--ink-2); }
.prose code, .prose .code { font-family: var(--font-mono); font-size: .9em; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: .08em .38em; font-variant-numeric: lining-nums tabular-nums; }
.prose pre { margin: 0; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: .8em 1em; overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; font-size: .9em; }
.prose abbr { font-variant-caps: all-small-caps; letter-spacing: .045em; text-decoration: none; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 1.7em 0; }
.prose small, .prose .fine { font-size: var(--text-sm); color: var(--mute); }
.prose .num, .tnum { font-variant-numeric: lining-nums tabular-nums; }