/* ---------------------------------------------------------------------------
   Peltify demo — design tokens
   Palette, type and elevation lifted from the live site (peltify/app/globals.css)
   so the demo reads as the same product, not a bolt-on.
   --------------------------------------------------------------------------- */

:root {
  /* SHAPE — 2026-08-28, Nick: "move away from things being super rounded, it
     feels too AI-like". Boxy by default; roundness only for cover art, the
     segmented switch, search fields and avatars. Every stylesheet uses these
     three; a hard-coded radius is a bug. */
  --r-box: 3px;
  --r-art: 8px;
  /* Type */
  /* 2026-09-07 (Nick: the header/username face "is kind of childlike"): Inter,
     the neutral grotesk Instagram and Reddit both read as; Segoe only as a fallback. */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  /* Core palette — identical values to the marketing site */
  --ink: #24142e;
  --ink-soft: #655c69;
  --ink-faint: #8b8290;
  --paper: #f5f0e8;
  --paper-deep: #ebe3d8;
  --white: #fffdfa;
  --violet: #8b1fd1;
  --spine: #5e1580;
  --plum: #5e1580;
  --plum-light: #8b1fd1;
  --coral: #bf3e2f;
  --coral-dark: #a5341f;
  --blue: #9ed8f4;
  --lime: #d7f08f;
  --peach: #ffc8a8;

  /* Derived surfaces */
  --line: rgba(36, 20, 46, 0.14);
  --line-soft: rgba(36, 20, 46, 0.08);
  --line-strong: rgba(36, 20, 46, 0.24);
  --violet-wash: rgba(139, 31, 209, 0.08);
  --violet-wash-strong: rgba(139, 31, 209, 0.16);
  --lime-wash: rgba(215, 240, 143, 0.42);
  --coral-wash: rgba(191, 62, 47, 0.09);

  /* Elevation */
  --shadow: 0 28px 80px rgba(36, 20, 46, 0.14);
  --shadow-sm: 0 4px 14px rgba(36, 20, 46, 0.07);
  --shadow-md: 0 14px 38px rgba(36, 20, 46, 0.1);
  --shadow-inset: inset 0 1px 0 rgba(255, 253, 250, 0.7);

  /* Geometry */
  /* Boxy since 2026-08-28 — the four scales collapse onto the box radius so
     every card, tile, button and input squares up at once. --r-pill stays for
     the segmented switch, search fields and avatars ONLY; --r-art for covers. */
  --r-sm: var(--r-box);
  --r-md: var(--r-box);
  --r-lg: 4px;
  --r-xl: 4px;
  --r-pill: 999px;

  /* THE READING COLUMN (13.12, `_global/design-language/SPEC.md` message C:
     large aspect ratios must not be "hard to scroll through"). One number for
     how wide a column of things to read is allowed to get: a 2560px monitor
     that stretches a feed to its full width turns one screen of posts into
     four screens of scrolling. Every surface that stacks content down the page
     caps at this; a surface that wants more says so in its own file, once. */
  --col: 630px;
  --col-wide: 1000px;

  /* Rhythm */
  --gap-1: 6px;
  --gap-2: 10px;
  --gap-3: 16px;
  --gap-4: 24px;
  --gap-5: 36px;
  --gap-6: 56px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.68, 0.35, 1);
  --fast: 140ms;
  --med: 260ms;
  --slow: 480ms;
}

/* Status colours are semantic, never decorative. */
:root {
  --ok: #2f7d4f;
  --ok-wash: rgba(47, 125, 79, 0.1);
  --warn: #9a6407;
  --warn-wash: rgba(154, 100, 7, 0.11);
  --stop: var(--coral-dark);
  --stop-wash: var(--coral-wash);
  --live: #8b1fd1;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Icons are never the element that should absorb free space, and inside a flex
   row an unconstrained SVG collapses to a sliver. */
svg {
  flex: none;
}

/* Any `display` in a component rule beats the hidden attribute's UA default,
   which silently turns hidden elements back on. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
  border-radius: var(--r-box);
}

::selection {
  background: var(--violet);
  color: var(--paper);
}

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

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

/* ===========================================================================
   ONE HUE PER MEDIUM.  2026-08-24.

   Added because the profile had no colour system, only colour: the ring
   coloured its segments by INDEX, the bubbles coloured theirs by DOM position,
   and the stat numbers borrowed `--blue` and `--lime`. Those two are pastels
   drawn for FILLS on a dark ground — as 23px text on white they sit at about
   1.6:1, which is why a page full of real numbers read as washed out.

   So: five hues, each owned by one medium, each ≥4.5:1 on `--white`. A tile,
   a bar, a donut wedge and a legend dot for the same medium are now the same
   colour on every surface, which is the whole reason a person can look once
   and know what they are looking at.

   USE THEM THROUGH `--m`. Any element carrying `data-m="music"` inherits
   `--m` and `--m-wash`, so a component never names a medium — it just draws
   itself in whatever hue its container turned out to be.
   =========================================================================== */

:root {
  --m-music: #8b1fd1;   --m-music-wash: rgba(139, 31, 209, 0.12);
  --m-film:  #4338ca;   --m-film-wash:  rgba(67, 56, 202, 0.12);
  --m-tv:    #0e7490;   --m-tv-wash:    rgba(14, 116, 144, 0.12);
  --m-books: #b45309;   --m-books-wash: rgba(180, 83, 9, 0.12);
  --m-games: #be185d;   --m-games-wash: rgba(190, 24, 93, 0.12);

  /* The fallback, for anything that is not a medium: the brand. */
  --m: var(--violet);
  --m-wash: var(--violet-wash);
}

[data-m="music"] { --m: var(--m-music); --m-wash: var(--m-music-wash); }
[data-m="film"]  { --m: var(--m-film);  --m-wash: var(--m-film-wash); }
[data-m="tv"]    { --m: var(--m-tv);    --m-wash: var(--m-tv-wash); }
[data-m="books"] { --m: var(--m-books); --m-wash: var(--m-books-wash); }
[data-m="games"] { --m: var(--m-games); --m-wash: var(--m-games-wash); }

/* ---------------------------------------------------------------------------
   TWO SHADOWS, AND ONLY TWO.

   The page had five elevations invented ad hoc across three restyles, which is
   most of what "clunky" was describing: nothing sat at a consistent height, so
   nothing read as a surface. `--lift` is a resting card. `--raise` is anything
   deliberately above the page. Neither is ever combined with a heavy border.
   --------------------------------------------------------------------------- */
:root {
  --lift: 0 1px 2px rgba(20, 16, 40, 0.04);
  --raise: 0 1px 2px rgba(20, 16, 40, 0.04), 0 10px 30px -18px rgba(20, 16, 40, 0.3);
  --raise-hi: 0 2px 4px rgba(20, 16, 40, 0.05), 0 22px 46px -22px rgba(20, 16, 40, 0.4);

  /* The hero. Deep enough that the light page below reads as paper on a desk. */
  --hero-ink: #fbf7ff;
  --hero-ink-soft: rgba(251, 247, 255, 0.74);
  --hero-ink-faint: rgba(251, 247, 255, 0.56);
  --hero-rule: rgba(251, 247, 255, 0.16);
}

/* ===========================================================================
   13.12 — THE SIGNATURE (design-language SPEC 2026-09-08, answer 33:
   "artwork everywhere, typography does the rest — serif titles, quiet sans
   facts, one purple, boxes only where tappable").

   SERIF TITLES. The name of a thing is set in the serif; everything else is
   the sans. This is the one place that decides, so a title does not read as
   Georgia on the profile and Inter in the feed.

   QUIET SANS FACTS. A fact about a thing — a creator, a year, a count, a
   kind — is small, `--ink-faint`, and carries no box.

   ONE PURPLE. `--violet` is the only accent in the app. There is no second
   brand colour; the five medium hues are a legend, not decoration.

   BOXES ONLY WHERE TAPPABLE. A background, a border or a radius on something
   nobody can press is decoration pretending to be a control. The classes
   below are labels — they state a fact and do nothing — so they lost theirs.
   =========================================================================== */
/* 2026-09-09, post-card entry 15: the serif is the MEDIA voice. `.pc-title`
   left this list — the post title and the body are the site's sans ("Font is
   kind of strange, doesnt match the whole site") — and `.pc-id-title`, the
   reviewed work's name, took its place. */
.pc-id-title, .ep-sec-title, .pp-name, .pfp-name, .mc-title, .sc-title,
.ig-empty > b, .stg-pane-h h2 {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
}

/* Labels, not controls: no background, no border, no radius, no padding. */
.bside-tag, .bpill-tag, .bgal-tag, .bgal-chip-tag, .bgal-manual-tag,
.bgal-gone-tag, .act-tag, .pp-tag-id, .fr-tag-id, .cmp-badge, .pc-id-lib {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 500;
}

/* The parts of the page nobody draws still belong to the design. */
:root { color-scheme: light; }

* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
  border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ===========================================================================
   13.12 — DARK MODE, AS ONE TOKEN SET
   `_global/design-language/SPEC.md` 2026-09-08, answer 32:
   "Settings › Appearance: Light · Dark · Follow system; system by default.
    One token set; Discover follows the theme (no dark island in light mode)."

   THE SAME NAMES, DIFFERENT VALUES. Nothing below is a new token — every line
   redefines one the light palette already declared, so every surface in the
   app comes with it and no component needs a dark rule of its own. A surface
   that paints its own dark palette is the thing this lane deleted from
   Discover.

   THREE STATES. `data-theme` is stamped on <html> ONLY for an explicit choice
   (src/theme.js). Its absence means "follow system", so the media query below
   is what a fresh visitor gets — and the `:root[data-theme="light"]` guard on
   it is what makes choosing Light on a dark machine actually work.

   THE PURPLE LIFTS RATHER THAN CHANGES. `--violet` at #8b1fd1 sits at about
   3:1 on the dark ground, so the dark set raises it to a lighter tint of the
   same hue: one purple, still, and readable on both papers.
   =========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f1ebf6;
    --ink-soft: #b6adbe;
    --ink-faint: #8b8290;
    --paper: #16101d;
    --paper-deep: #100b16;
    --white: #1e1728;
    --violet: #b26ae8;
    --spine: #c890f0;
    --plum: #c890f0;
    --plum-light: #b26ae8;
    --coral: #e0705f;
    --coral-dark: #e8836f;

    --line: rgba(241, 235, 246, 0.14);
    --line-soft: rgba(241, 235, 246, 0.08);
    --line-strong: rgba(241, 235, 246, 0.26);
    --violet-wash: rgba(178, 106, 232, 0.16);
    --violet-wash-strong: rgba(178, 106, 232, 0.28);
    --lime-wash: rgba(215, 240, 143, 0.16);
    --coral-wash: rgba(224, 112, 95, 0.16);

    --shadow: 0 28px 80px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 14px 38px rgba(0, 0, 0, 0.45);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.35);
    --raise: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
    --raise-hi: 0 2px 4px rgba(0, 0, 0, 0.4), 0 22px 46px -22px rgba(0, 0, 0, 0.85);

    --ok: #6fbd8c;
    --ok-wash: rgba(111, 189, 140, 0.14);
    --warn: #d9a441;
    --warn-wash: rgba(217, 164, 65, 0.15);
    --live: #b26ae8;

    /* One hue per medium, lifted to carry on the dark ground. */
    --m-music: #b26ae8;   --m-music-wash: rgba(178, 106, 232, 0.18);
    --m-film:  #8b83f0;   --m-film-wash:  rgba(139, 131, 240, 0.18);
    --m-tv:    #4bb6cf;   --m-tv-wash:    rgba(75, 182, 207, 0.18);
    --m-books: #dda15e;   --m-books-wash: rgba(221, 161, 94, 0.18);
    --m-games: #e8709f;   --m-games-wash: rgba(232, 112, 159, 0.18);

    /* 22.3 — the person's own bubble: a raised plum, pale words, a lifted mention. */
    --you-bg: #33253f;    --you-ink: #f4eefa;    --you-mention: #dcb8f7;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink: #f1ebf6;
  --ink-soft: #b6adbe;
  --ink-faint: #8b8290;
  --paper: #16101d;
  --paper-deep: #100b16;
  --white: #1e1728;
  --violet: #b26ae8;
  --spine: #c890f0;
  --plum: #c890f0;
  --plum-light: #b26ae8;
  --coral: #e0705f;
  --coral-dark: #e8836f;

  --line: rgba(241, 235, 246, 0.14);
  --line-soft: rgba(241, 235, 246, 0.08);
  --line-strong: rgba(241, 235, 246, 0.26);
  --violet-wash: rgba(178, 106, 232, 0.16);
  --violet-wash-strong: rgba(178, 106, 232, 0.28);
  --lime-wash: rgba(215, 240, 143, 0.16);
  --coral-wash: rgba(224, 112, 95, 0.16);

  --shadow: 0 28px 80px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 38px rgba(0, 0, 0, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.35);
  --raise: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  --raise-hi: 0 2px 4px rgba(0, 0, 0, 0.4), 0 22px 46px -22px rgba(0, 0, 0, 0.85);

  --ok: #6fbd8c;
  --ok-wash: rgba(111, 189, 140, 0.14);
  --warn: #d9a441;
  --warn-wash: rgba(217, 164, 65, 0.15);
  --live: #b26ae8;

  /* One hue per medium, lifted to carry on the dark ground. */
  --m-music: #b26ae8;   --m-music-wash: rgba(178, 106, 232, 0.18);
  --m-film:  #8b83f0;   --m-film-wash:  rgba(139, 131, 240, 0.18);
  --m-tv:    #4bb6cf;   --m-tv-wash:    rgba(75, 182, 207, 0.18);
  --m-books: #dda15e;   --m-books-wash: rgba(221, 161, 94, 0.18);
  --m-games: #e8709f;   --m-games-wash: rgba(232, 112, 159, 0.18);

  --you-bg: #33253f;    --you-ink: #f4eefa;    --you-mention: #dcb8f7;

  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* 22.3 (suggestions/SPEC.md 36: "The icon for reddit gets inverted too").
   Nothing inverts it: Reddit's mark is ONE orange fill with the alien CUT OUT,
   so on the dark ground the page shows through the cut-out and the mark reads
   negative (Spotify's bars and Goodreads' g do the same). In dark mode a
   platform mark sits on the light disc it was drawn for. Kind glyphs are
   untouched — they are drawn in currentColor and already follow the theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img[src*="/assets/sources/"] { background: #fff; border-radius: 50%; padding: 1px; box-sizing: border-box; }
}
:root[data-theme="dark"] img[src*="/assets/sources/"] { background: #fff; border-radius: 50%; padding: 1px; box-sizing: border-box; }