/* ==========================================================================
   Lapriland app v2 design system: "the lamplit room"
   design/APP_V2_SPEC.md sections 4 and 5. Loaded by views/partials/header.ejs
   instead of app.css (which stays untouched for the admin portal and the
   marketing pricing page).

   Three materials:
     Ink    the warm surfaces of the room (Lamp) or warm cream (Paper)
     Paper  the cream note on which the journal writes back (.paper)
     Light  one amber: the lamp glow, focus, the active state, primary actions

   Themes: bare :root is Lamp (dark, the default). :root[data-theme="paper"]
   is Paper. :root[data-theme="system"] follows prefers-color-scheme. The
   inline script in the header sets data-theme from localStorage.lapri_theme
   before first paint, and data-daypart (dawn, day, evening, night) for the glow.

   Components use tokens only. Class names are the contract; /styleguide shows
   every one of them. Sections:
     1 tokens   2 paper theme   3 base   4 type   5 layout   6 icons
     7 buttons  8 chips   9 cards and paper   10 forms   11 feedback
     12 shell   13 overlays   14 motion   15 legacy compatibility   16 print
   ========================================================================== */


/* ==========================================================================
   1. TOKENS: Lamp (the default)
   ========================================================================== */
:root {
  color-scheme: dark;

  /* surfaces, warm ink (hue 62 is the amber's own hue) */
  --bg:        oklch(0.155 0.008 62);   /* #0f0b09, the marketing ink */
  --bg2:       oklch(0.180 0.010 62);
  --panel:     oklch(0.200 0.011 62);
  --card:      oklch(0.212 0.012 62);
  --card-hi:   oklch(0.245 0.013 62);
  --float:     oklch(0.228 0.013 62);   /* sheets, menus, palette, toasts */
  --well:      oklch(0.138 0.008 62);   /* recessed */
  --scrim:     oklch(0.075 0.010 62 / 0.66);
  --field-bg:  oklch(0.120 0.008 62 / 0.42);
  --card-grad: linear-gradient(180deg, oklch(0.222 0.012 62), oklch(0.197 0.011 62));
  --card-grad-hi: linear-gradient(180deg, oklch(0.252 0.013 62), oklch(0.222 0.012 62));
  --card-shadow: none;
  --quiet-bg:    oklch(0.945 0.006 70 / 0.055);
  --quiet-bg-hi: oklch(0.945 0.006 70 / 0.095);
  --track:       oklch(0.945 0.006 70 / 0.10);
  --seg-on:      oklch(0.285 0.013 62);

  /* lines (luminance is depth) */
  --hairline:  oklch(0.265 0.011 62);
  --border:    oklch(0.315 0.012 62);
  --border-hi: oklch(0.400 0.014 62);
  --lift:      inset 0 1px 0 oklch(0.98 0.02 70 / 0.045);

  /* text */
  --text:        oklch(0.945 0.006 70);
  --text2:       oklch(0.830 0.010 68);
  --muted:       oklch(0.690 0.013 64);   /* AA on every surface */
  --faint:       oklch(0.550 0.012 64);   /* decorative only, never running text */
  --placeholder: oklch(0.615 0.012 64);
  --text-read:   oklch(0.885 0.008 68);   /* Literata reading columns */

  /* the one amber */
  --accent:      oklch(0.800 0.135 62);   /* text, links, active states */
  --accent2:     oklch(0.700 0.130 50);
  --accent-lo:   oklch(0.839 0.129 71);
  --accent-hi:   oklch(0.720 0.140 50);
  --accent-ink:  oklch(0.190 0.035 62);   /* text ON amber fills, both themes */
  --accent-bg:   oklch(0.800 0.135 62 / 0.11);
  --accent-bd:   oklch(0.800 0.135 62 / 0.30);
  --accent-glow: oklch(0.780 0.150 62 / 0.42);
  --accent-grad: linear-gradient(157deg, var(--accent-lo), var(--accent-hi));
  --display-em:  oklch(0.870 0.110 78);   /* amber italic in display type */
  --wordmark:    oklch(0.870 0.110 78);
  --focus:       oklch(0.800 0.135 62);
  --select-bg:   oklch(0.400 0.075 62);

  /* categorical ramp: one L, one C, eight hues. Marks, dots, tints. */
  --c-amber: oklch(0.765 0.105  62);
  --c-ember: oklch(0.765 0.105  25);
  --c-gold:  oklch(0.765 0.105  90);
  --c-moss:  oklch(0.765 0.105 145);
  --c-teal:  oklch(0.765 0.105 195);
  --c-azure: oklch(0.765 0.105 245);
  --c-iris:  oklch(0.765 0.105 300);
  --c-rose:  oklch(0.765 0.105 350);
  /* the same hues for TEXT (AA on the theme's surfaces) */
  --c-amber-ink: var(--c-amber); --c-ember-ink: var(--c-ember);
  --c-gold-ink:  var(--c-gold);  --c-moss-ink:  var(--c-moss);
  --c-teal-ink:  var(--c-teal);  --c-azure-ink: var(--c-azure);
  --c-iris-ink:  var(--c-iris);  --c-rose-ink:  var(--c-rose);

  /* meaning */
  --hard:      oklch(0.720 0.060 350);    /* a hard memory: rose, low chroma, never red */
  --turning:   var(--accent);             /* a turning point: an amber ring */
  --traumatic: var(--hard);               /* legacy name */
  --formative: var(--c-azure);            /* legacy name */
  --pos:       var(--c-moss);
  --info:      var(--c-azure);
  --warn:      oklch(0.795 0.115 90);
  --neg:       oklch(0.720 0.160 27);     /* destructive only */
  --neg-bg:    oklch(0.720 0.160 27 / 0.13);
  --neg-bd:    oklch(0.720 0.160 27 / 0.38);
  --ring:      0 0 0 3px oklch(0.800 0.135 62 / 0.28);
  --ring-neg:  0 0 0 3px oklch(0.720 0.160 27 / 0.30);

  /* the paper note (cream on ink in Lamp) */
  --paper-bg:     oklch(0.945 0.022 82);
  --paper-ink:    oklch(0.270 0.020 55);
  --paper-muted:  oklch(0.460 0.025 60);
  --paper-accent: oklch(0.500 0.120 52);
  --paper-edge:   oklch(0.860 0.025 78);
  --paper-glow:   oklch(0.800 0.140 62 / 0.20);
  --shadow-paper: 0 34px 70px -34px oklch(0.02 0.01 62 / 0.95), 0 3px 10px -2px oklch(0.02 0.01 62 / 0.45);

  /* depth, for floating things only */
  --shadow-float: 0 22px 54px -14px oklch(0.03 0.01 62 / 0.78), 0 4px 14px -4px oklch(0.03 0.01 62 / 0.55);
  --shadow-sm: 0 2px 10px oklch(0.06 0.01 62 / 0.55);
  --shadow:    0 8px 30px oklch(0.05 0.01 62 / 0.60), 0 2px 8px oklch(0.05 0.01 62 / 0.45);
  --shadow-lg: 0 20px 60px oklch(0.04 0.01 62 / 0.70), 0 4px 14px oklch(0.05 0.01 62 / 0.50);

  /* the lamp glow, by time of day (lapri.js and the head script set data-daypart) */
  --glow-dawn-c: oklch(0.840 0.090 85);   --glow-dawn-a: 0.15;
  --glow-day-c:  oklch(0.800 0.050 75);   --glow-day-a:  0.085;
  --glow-eve-c:  oklch(0.780 0.140 62);   --glow-eve-a:  0.24;
  --glow-night-c: oklch(0.640 0.130 48);  --glow-night-a: 0.17;
  --glow-color: var(--glow-eve-c);
  --glow-alpha: var(--glow-eve-a);
  --grain-opacity: 0.05;
  --bar-bg:   oklch(0.155 0.008 62 / 0.76);
  --bar-line: oklch(0.945 0.006 70 / 0.075);
  --empty-art: oklch(0.945 0.006 70 / 0.42);

  /* type */
  --font-ui:   'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-read: 'Literata', Charter, 'Bitstream Charter', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-hero: 2.75rem;      --lh-hero: 1.09;      /* 44/48 */
  --fs-section: 1.75rem;   --lh-section: 1.215;  /* 28/34 */
  --fs-memory: 2.375rem;   --lh-memory: 1.16;    /* 38/44 */
  --fs-card: 1.1875rem;                          /* 19 */
  --fs-lead: 1.0625rem;                          /* 17 */
  --fs-read: 1.15625rem;   --lh-read: 1.75;      /* 18.5 */
  --fs-ui: 0.9375rem;      --lh-ui: 1.4667;      /* 15/22 */
  --fs-sm: 0.8125rem;      --lh-sm: 1.385;       /* 13/18 */
  --fs-label: 0.75rem;                           /* 12 */
  --fs-mono: 0.78125rem;                         /* 12.5 */
  --fs-eyebrow: 0.71875rem;                      /* 11.5 */
  --measure: 64ch;
  /* legacy scale (app.css names), kept for markup that still uses them */
  --fs-tiny: 0.6875rem; --fs-micro: 0.75rem; --fs-h3: 1.125rem; --fs-h2: 1.375rem;
  --fs-h1: 1.75rem; --fs-title: 1.875rem;
  --lh-display: 1.15; --lh-head: 1.25; --lh-dense: 1.55;
  --ls-display: -0.021em; --ls-head: -0.012em; --ls-read: 0.003em; --ls-ui: 0;
  --ls-caps: 0.085em; --ls-eyebrow: 0.14em;
  --measure-tight: 58ch; --measure-title: 26ch;
  --w-read-b: 500; --w-ui-md: 500; --w-ui-sb: 600;

  /* shape */
  --r-lg: 14px;       /* large cards, sheets */
  --r: 10px;          /* cards, inputs */
  --r-sm: 8px;
  --r-xs: 6px;
  --r-pill: 999px;    /* chips, pills, buttons */
  --radius: 10px; --radius-sm: 6px; --radius-xs: 4px;   /* legacy */

  /* space, on a 4px scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 32px;
  --pad-card: 24px;
  --pad-card-sm: 12px;
  --pad-page-x: var(--gutter);
  --gap-stack: var(--s4);
  --gap-section: var(--s7);
  --gap-inline: var(--s2);

  /* containers and chrome (widths are content widths; gutters sit outside) */
  --w-wide: 1320px;
  --w-app: 1180px;
  --w-read: 700px;
  --bar-h: 56px;
  --tabbar-h: 64px;
  --main-pt: 48px;
  --main-pb: 112px;
  --page-top: var(--main-pt);   /* legacy */

  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  /* stacking (dialogs and the palette use the browser's top layer) */
  --z-bar: 40;
  --z-tabbar: 45;
  --z-menu: 60;
  --z-toast: 90;
}

:root[data-daypart="dawn"]  { --glow-color: var(--glow-dawn-c);  --glow-alpha: var(--glow-dawn-a); }
:root[data-daypart="day"]   { --glow-color: var(--glow-day-c);   --glow-alpha: var(--glow-day-a); }
:root[data-daypart="night"] { --glow-color: var(--glow-night-c); --glow-alpha: var(--glow-night-a); }

@media (max-width: 1023.98px) {
  :root { --gutter: 24px; --pad-card: 20px; }
}
@media (max-width: 767.98px) {
  :root {
    --gutter: 16px; --pad-card: 18px;
    --bar-h: 52px;
    --main-pt: 24px;
    --main-pb: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 40px);
    --fs-hero: 2.125rem; --lh-hero: 1.18;       /* 34/40 */
    --fs-section: 1.5rem; --lh-section: 1.25;   /* 24/30 */
    --fs-memory: 1.875rem; --lh-memory: 1.2;    /* 30/36 */
    --fs-read: 1.09375rem;                      /* 17.5 */
    --gap-section: var(--s6);
  }
}


/* ==========================================================================
   2. PAPER THEME (cream stationery in daylight)
      The block is repeated inside the prefers-color-scheme media query for
      data-theme="system". Keep the two copies identical.
   ========================================================================== */
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: oklch(0.962 0.014 82); --bg2: oklch(0.945 0.016 80); --panel: oklch(0.978 0.010 82);
  --card: oklch(0.990 0.006 85); --card-hi: oklch(1 0 0); --float: oklch(0.995 0.004 85);
  --well: oklch(0.938 0.016 80); --scrim: oklch(0.250 0.020 60 / 0.34); --field-bg: oklch(1 0 0 / 0.62);
  --card-grad: linear-gradient(180deg, oklch(0.993 0.005 85), oklch(0.985 0.007 84));
  --card-grad-hi: linear-gradient(180deg, oklch(1 0 0), oklch(0.993 0.005 85));
  --card-shadow: 0 1px 2px oklch(0.30 0.030 60 / 0.05);
  --quiet-bg: oklch(0.240 0.020 55 / 0.045); --quiet-bg-hi: oklch(0.240 0.020 55 / 0.08);
  --track: oklch(0.240 0.020 55 / 0.10); --seg-on: oklch(1 0 0);
  --hairline: oklch(0.900 0.014 75); --border: oklch(0.850 0.016 72); --border-hi: oklch(0.760 0.020 70);
  --lift: inset 0 1px 0 oklch(1 0 0 / 0.7);
  --text: oklch(0.240 0.020 55); --text2: oklch(0.360 0.020 58); --muted: oklch(0.480 0.020 60);
  --faint: oklch(0.620 0.018 62); --placeholder: oklch(0.530 0.015 62); --text-read: oklch(0.270 0.020 55);
  --accent: oklch(0.510 0.130 52); --accent2: oklch(0.470 0.120 48);
  --accent-bg: oklch(0.720 0.140 60 / 0.14); --accent-bd: oklch(0.600 0.130 55 / 0.40);
  --accent-glow: oklch(0.720 0.150 60 / 0.40);
  --display-em: oklch(0.510 0.130 52); --wordmark: oklch(0.510 0.130 52);
  --focus: oklch(0.550 0.140 52); --select-bg: oklch(0.860 0.090 75);
  --c-amber: oklch(0.580 0.110 62); --c-ember: oklch(0.580 0.110 25); --c-gold: oklch(0.580 0.110 90);
  --c-moss: oklch(0.580 0.110 145); --c-teal: oklch(0.580 0.110 195); --c-azure: oklch(0.580 0.110 245);
  --c-iris: oklch(0.580 0.110 300); --c-rose: oklch(0.580 0.110 350);
  --c-amber-ink: oklch(0.470 0.110 62); --c-ember-ink: oklch(0.470 0.110 25); --c-gold-ink: oklch(0.470 0.110 90);
  --c-moss-ink: oklch(0.470 0.110 145); --c-teal-ink: oklch(0.470 0.110 195); --c-azure-ink: oklch(0.470 0.110 245);
  --c-iris-ink: oklch(0.470 0.110 300); --c-rose-ink: oklch(0.470 0.110 350);
  --hard: oklch(0.560 0.070 350); --warn: oklch(0.560 0.110 85);
  --neg: oklch(0.530 0.170 27); --neg-bg: oklch(0.530 0.170 27 / 0.09); --neg-bd: oklch(0.530 0.170 27 / 0.36);
  --ring: 0 0 0 3px oklch(0.600 0.140 55 / 0.26); --ring-neg: 0 0 0 3px oklch(0.530 0.170 27 / 0.25);
  --paper-bg: oklch(0.935 0.022 80); --paper-ink: oklch(0.240 0.020 55); --paper-muted: oklch(0.460 0.025 60);
  --paper-accent: oklch(0.500 0.120 52); --paper-edge: oklch(0.840 0.025 75); --paper-glow: oklch(0.860 0.110 72 / 0.30);
  --shadow-paper: 0 24px 48px -30px oklch(0.30 0.030 60 / 0.40), 0 2px 6px -2px oklch(0.30 0.030 60 / 0.12);
  --shadow-float: 0 22px 50px -18px oklch(0.30 0.030 60 / 0.30), 0 4px 12px -4px oklch(0.30 0.030 60 / 0.14);
  --shadow-sm: 0 2px 8px oklch(0.30 0.030 60 / 0.10); --shadow: 0 8px 24px oklch(0.30 0.030 60 / 0.12);
  --shadow-lg: 0 20px 50px oklch(0.30 0.030 60 / 0.18);
  --glow-dawn-c: oklch(0.900 0.080 88); --glow-dawn-a: 0.50;
  --glow-day-c: oklch(0.985 0.030 95);  --glow-day-a: 0.55;
  --glow-eve-c: oklch(0.860 0.100 70);  --glow-eve-a: 0.46;
  --glow-night-c: oklch(0.800 0.080 60); --glow-night-a: 0.32;
  --grain-opacity: 0.045;
  --bar-bg: oklch(0.962 0.014 82 / 0.82); --bar-line: oklch(0.240 0.020 55 / 0.09);
  --empty-art: oklch(0.240 0.020 55 / 0.40);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: oklch(0.962 0.014 82); --bg2: oklch(0.945 0.016 80); --panel: oklch(0.978 0.010 82);
    --card: oklch(0.990 0.006 85); --card-hi: oklch(1 0 0); --float: oklch(0.995 0.004 85);
    --well: oklch(0.938 0.016 80); --scrim: oklch(0.250 0.020 60 / 0.34); --field-bg: oklch(1 0 0 / 0.62);
    --card-grad: linear-gradient(180deg, oklch(0.993 0.005 85), oklch(0.985 0.007 84));
    --card-grad-hi: linear-gradient(180deg, oklch(1 0 0), oklch(0.993 0.005 85));
    --card-shadow: 0 1px 2px oklch(0.30 0.030 60 / 0.05);
    --quiet-bg: oklch(0.240 0.020 55 / 0.045); --quiet-bg-hi: oklch(0.240 0.020 55 / 0.08);
    --track: oklch(0.240 0.020 55 / 0.10); --seg-on: oklch(1 0 0);
    --hairline: oklch(0.900 0.014 75); --border: oklch(0.850 0.016 72); --border-hi: oklch(0.760 0.020 70);
    --lift: inset 0 1px 0 oklch(1 0 0 / 0.7);
    --text: oklch(0.240 0.020 55); --text2: oklch(0.360 0.020 58); --muted: oklch(0.480 0.020 60);
    --faint: oklch(0.620 0.018 62); --placeholder: oklch(0.530 0.015 62); --text-read: oklch(0.270 0.020 55);
    --accent: oklch(0.510 0.130 52); --accent2: oklch(0.470 0.120 48);
    --accent-bg: oklch(0.720 0.140 60 / 0.14); --accent-bd: oklch(0.600 0.130 55 / 0.40);
    --accent-glow: oklch(0.720 0.150 60 / 0.40);
    --display-em: oklch(0.510 0.130 52); --wordmark: oklch(0.510 0.130 52);
    --focus: oklch(0.550 0.140 52); --select-bg: oklch(0.860 0.090 75);
    --c-amber: oklch(0.580 0.110 62); --c-ember: oklch(0.580 0.110 25); --c-gold: oklch(0.580 0.110 90);
    --c-moss: oklch(0.580 0.110 145); --c-teal: oklch(0.580 0.110 195); --c-azure: oklch(0.580 0.110 245);
    --c-iris: oklch(0.580 0.110 300); --c-rose: oklch(0.580 0.110 350);
    --c-amber-ink: oklch(0.470 0.110 62); --c-ember-ink: oklch(0.470 0.110 25); --c-gold-ink: oklch(0.470 0.110 90);
    --c-moss-ink: oklch(0.470 0.110 145); --c-teal-ink: oklch(0.470 0.110 195); --c-azure-ink: oklch(0.470 0.110 245);
    --c-iris-ink: oklch(0.470 0.110 300); --c-rose-ink: oklch(0.470 0.110 350);
    --hard: oklch(0.560 0.070 350); --warn: oklch(0.560 0.110 85);
    --neg: oklch(0.530 0.170 27); --neg-bg: oklch(0.530 0.170 27 / 0.09); --neg-bd: oklch(0.530 0.170 27 / 0.36);
    --ring: 0 0 0 3px oklch(0.600 0.140 55 / 0.26); --ring-neg: 0 0 0 3px oklch(0.530 0.170 27 / 0.25);
    --paper-bg: oklch(0.935 0.022 80); --paper-ink: oklch(0.240 0.020 55); --paper-muted: oklch(0.460 0.025 60);
    --paper-accent: oklch(0.500 0.120 52); --paper-edge: oklch(0.840 0.025 75); --paper-glow: oklch(0.860 0.110 72 / 0.30);
    --shadow-paper: 0 24px 48px -30px oklch(0.30 0.030 60 / 0.40), 0 2px 6px -2px oklch(0.30 0.030 60 / 0.12);
    --shadow-float: 0 22px 50px -18px oklch(0.30 0.030 60 / 0.30), 0 4px 12px -4px oklch(0.30 0.030 60 / 0.14);
    --shadow-sm: 0 2px 8px oklch(0.30 0.030 60 / 0.10); --shadow: 0 8px 24px oklch(0.30 0.030 60 / 0.12);
    --shadow-lg: 0 20px 50px oklch(0.30 0.030 60 / 0.18);
    --glow-dawn-c: oklch(0.900 0.080 88); --glow-dawn-a: 0.50;
    --glow-day-c: oklch(0.985 0.030 95);  --glow-day-a: 0.55;
    --glow-eve-c: oklch(0.860 0.100 70);  --glow-eve-a: 0.46;
    --glow-night-c: oklch(0.800 0.080 60); --glow-night-a: 0.32;
    --grain-opacity: 0.045;
    --bar-bg: oklch(0.962 0.014 82 / 0.82); --bar-line: oklch(0.240 0.020 55 / 0.09);
    --empty-art: oklch(0.240 0.020 55 / 0.40);
  }
}


/* ==========================================================================
   3. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden]:not([hidden="until-found"]) { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--bg);
  color: var(--text);
  scroll-padding-top: calc(var(--bar-h) + 20px);
}
/* While a sheet or dialog is open the page does not scroll; lapri.js pads by
   the scrollbar's width so nothing shifts sideways. */
html.is-locked { overflow: hidden; padding-right: var(--lock-gap, 0px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Transparent on purpose: the room (html background, the lamp and the
     grain below) must show through. A body background would cover them. */
  background: transparent;
  color: var(--text);
}

/* The lamp: a pool of light behind everything, tinted by the hour. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(75% 60% at 20% -12%, color-mix(in oklch, var(--glow-color) calc(var(--glow-alpha) * 100%), transparent), transparent 70%),
    radial-gradient(60% 45% at 95% 108%, color-mix(in oklch, var(--glow-color) calc(var(--glow-alpha) * 38%), transparent), transparent 72%);
}
/* Film grain: static, above the room, below every surface. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media (prefers-reduced-transparency: reduce) { body::before, body::after { display: none; } }

img, video { max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
:where(button) {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-align: inherit; border-radius: 0;
}
:where(button:disabled) { cursor: not-allowed; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }

a { color: var(--accent); text-decoration: none; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { text-decoration: underline; }

::selection { background: var(--select-bg); color: var(--text); }

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

* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-hi); background-clip: padding-box; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ==========================================================================
   4. TYPE
      Literata for display and reading, IBM Plex Sans for the interface,
      JetBrains Mono for dates and data. Fuzzy dates are always mono.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-read);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-section); line-height: var(--lh-section); }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4, h5, h6 { font-size: var(--fs-ui); }
p, li, dd, blockquote { text-wrap: pretty; }

/* Page hero, 44/48 (34/40 on phones). Wrap a phrase in <em> for the amber italic. */
.display, .page-head__title, .h-hero {
  font-family: var(--font-read);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
:is(.display, .page-head__title, .h-hero, .h-section, .h-memory) em {
  font-style: italic;
  color: var(--display-em);
}
.h-section {
  font-family: var(--font-read); font-size: var(--fs-section); line-height: var(--lh-section);
  font-weight: 500; letter-spacing: -0.015em; color: var(--text); text-wrap: balance;
}
.h-memory {
  font-family: var(--font-read); font-size: var(--fs-memory); line-height: var(--lh-memory);
  font-weight: 500; letter-spacing: -0.02em; color: var(--text); text-wrap: balance;
}
.h-card, .card__title {
  font-family: var(--font-read); font-size: var(--fs-card); line-height: 1.3;
  font-weight: 500; letter-spacing: -0.008em; color: var(--text);
}
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text2); max-width: 60ch; }

/* The reading voice: memories and long AI prose. */
.prose, .reading {
  font-family: var(--font-read);
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  letter-spacing: 0.003em;
  color: var(--text-read);
  max-width: var(--measure);
  hyphens: auto; -webkit-hyphens: auto;
  overflow-wrap: anywhere;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.prose > * + *, .reading > * + * { margin-top: 0.95em; }

.t-ui { font-size: var(--fs-ui); line-height: var(--lh-ui); }
.t-small, .t-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.t-label { font-size: var(--fs-label); line-height: 1.35; font-weight: 500; }
.t-micro { font-size: var(--fs-micro); }
.t-tiny { font-size: var(--fs-tiny); }
.muted { color: var(--muted); }
.text2 { color: var(--text2); }
.accent { color: var(--accent); }
.serif { font-family: var(--font-read); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.mono, .num, code, kbd, samp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
/* A date, fuzzy or exact: "c. 1994", "about 9", "2014 to 2017". */
.date {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow .icon { width: 14px; height: 14px; }
.eyebrow--muted { color: var(--muted); }
.kbd, kbd.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6em; height: 1.6em; padding: 0 0.4em;
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1; font-weight: 500;
  color: var(--text2);
  background: var(--quiet-bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  white-space: nowrap;
}
/* A prompt shown as a pull quote, with an amber rule. */
.quote {
  position: relative;
  padding: 2px 0 2px 22px;
  font-family: var(--font-read);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--text);
  text-wrap: balance;
}
.quote::before {
  content: ""; position: absolute; left: 0; top: 0.3em; bottom: 0.3em; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-lo), var(--accent-hi));
  box-shadow: 0 0 14px var(--accent-glow);
}
.quote__cite { display: block; margin-top: 10px; font-family: var(--font-mono); font-style: normal; font-size: var(--fs-mono); color: var(--muted); }
.quote--sm { font-size: 1.125rem; padding-left: 18px; }

mark {
  background: var(--accent-bg); color: inherit;
  border-radius: 3px; padding: 0 2px;
  box-shadow: inset 0 -1px 0 var(--accent-bd);
}

/* A quiet mark for "A turning point" and "A hard one". Never red, never loud. */
.marker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--muted); white-space: nowrap;
}
.marker .icon { width: 16px; height: 16px; }
.marker--turning .icon { color: var(--turning); }
.marker--hard .icon { color: var(--hard); }

/* Markdown rendered by res.locals.md(). Add .prose for the reading voice. */
.md-content { overflow-wrap: anywhere; }
.md-content > :first-child { margin-top: 0; }
.md-content > :last-child { margin-bottom: 0; }
.md-content p { margin: 0 0 0.9em; }
.md-content :is(h1, h2, h3, h4) { margin: 1.6em 0 0.5em; font-family: var(--font-read); }
.md-content h1 { font-size: 1.4em; } .md-content h2 { font-size: 1.22em; } .md-content h3 { font-size: 1.08em; }
.md-content :is(ul, ol) { margin: 0 0 0.9em; padding-left: 1.4em; list-style: revert; }
.md-content li { margin-bottom: 0.3em; }
.md-content li::marker { color: var(--faint); }
.md-content blockquote {
  margin: 1.2em 0; padding-left: 1.2em; border-left: 2px solid var(--accent-bd);
  color: var(--text2); font-style: italic;
}
.md-content a { text-decoration: underline; text-decoration-color: var(--accent-bd); }
.md-content strong { font-weight: 600; color: inherit; }
.md-content code { font-size: 0.86em; padding: 0.1em 0.35em; border-radius: 4px; background: var(--quiet-bg); border: 1px solid var(--hairline); }
.md-content pre { overflow-x: auto; padding: 12px; border-radius: var(--r-sm); background: var(--well); border: 1px solid var(--hairline); font-size: 0.85em; }
.md-content pre code { background: none; border: 0; padding: 0; }
.md-content hr { border: 0; height: 1px; width: 36%; margin: 2em auto; background: var(--border); }
.md-content img { display: block; max-width: 100%; height: auto; margin: 1.2em 0; border-radius: var(--r); border: 1px solid var(--hairline); }


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */
/* <main class="main main--app"> comes from the header, driven by `layout`. */
.main {
  display: block;
  width: 100%;
  margin-inline: auto;
  padding: var(--main-pt) var(--gutter) var(--main-pb);
}
.main:focus { outline: none; }   /* the skip link's target, not a control */
.main--app  { max-width: calc(var(--w-app) + 2 * var(--gutter)); }
.main--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }
.main--read { max-width: calc(var(--w-read) + 2 * var(--gutter)); }
.main--full { max-width: none; padding: 0 0 var(--main-pb-full, 0px); }
@media (max-width: 767.98px) {
  .main--full { --main-pb-full: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}

/* Centred columns for use inside any layout (mostly `full` pages). */
.page, .page--wide, .page--read {
  --page-w: var(--w-app);
  --page-pad: var(--gutter);
  width: 100%;
  max-width: calc(var(--page-w) + 2 * var(--page-pad));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.page--wide { --page-w: var(--w-wide); }
.page--read { --page-w: var(--w-read); }
.main:not(.main--full) :is(.page, .page--wide, .page--read) { --page-pad: 0px; }

/* Legacy containers (app.css), in case markup still carries them. */
.wrap { max-width: calc(var(--w-app) + 2 * var(--gutter)); margin-inline: auto; padding: var(--main-pt) var(--gutter) var(--main-pb); }
.wrap--read { max-width: calc(var(--w-read) + 2 * var(--gutter)); }
.wrap--full { max-width: none; }
.main .wrap { padding: 0; }

/* The head of a page: eyebrow, title, lead, actions. */
.page-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: var(--s7);
}
.page-head > :first-child { flex: 1 1 30rem; min-width: 0; }
.page-head__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.page-head__title { max-width: 28ch; }
.page-head__lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text2); max-width: 58ch; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-head--center { flex-direction: column; align-items: center; text-align: center; }
.page-head--center .page-head__text { align-items: center; }
.page-head--center > :first-child { flex: none; }
.page-head--tight { margin-bottom: var(--s5); }
/* legacy page heads (app.css markup) */
.page-head__back { flex-basis: 100%; order: -1; font-size: var(--fs-sm); color: var(--muted); }
.page-head__back:hover { color: var(--text); }
.page-title {
  font-family: var(--font-read); font-size: var(--fs-section); line-height: var(--lh-section);
  font-weight: 400; letter-spacing: -0.018em; margin: 0;
}
.page-sub { margin-top: 8px; font-size: var(--fs-ui); color: var(--muted); max-width: 62ch; }
.page-head--compact { align-items: center; margin-bottom: var(--s5); }

/* A back link above a page head. */
.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--muted); text-decoration: none;
}
.backlink:hover { color: var(--text); text-decoration: none; }
.backlink .icon { width: 16px; height: 16px; }

/* A section title row: title (and eyebrow) left, actions right. */
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 8px 16px; margin-bottom: var(--s4);
}
.section-head__title { font-family: var(--font-read); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; letter-spacing: -0.015em; }
.section-head__title--sm { font-size: 1.3125rem; line-height: 1.3; }
.section-head__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.section-head__lead { color: var(--muted); font-size: var(--fs-ui); max-width: 60ch; }

/* Sibling rhythm with gap, never doubled margins. */
.stack, .stack-sm, .stack-lg, .stack-xl { display: flex; flex-direction: column; min-width: 0; }
/* Buttons, chips and segmented controls keep their own width in a stack. */
:is(.stack, .stack-sm, .stack-lg, .stack-xl) > :is(.btn, .icon-btn, .chip, .seg, .cost, .badge, .marker) { align-self: flex-start; }
:is(.stack, .stack-sm, .stack-lg, .stack-xl) > :is(.btn--block, .seg--block) { align-self: stretch; }
.stack    { gap: var(--s4); }
.stack-sm { gap: var(--s2); }
.stack-lg { gap: var(--s6); }
.stack-xl { gap: var(--s8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.cluster--lg { gap: var(--s3); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--nowrap { flex-wrap: nowrap; }
.grid-2, .grid-3, .grid-auto { display: grid; gap: var(--s5); min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (max-width: 1023.98px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719.98px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .grid-2, .grid-3, .grid-auto { gap: var(--s4); } }

/* Main column and an aside, side by side from 1024px. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); align-items: start; }
.split__main, .split__aside { min-width: 0; display: flex; flex-direction: column; gap: var(--s6); }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--s7) var(--s8); }
  .split--wide-aside { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); }
  .split__aside--sticky { position: sticky; top: calc(var(--bar-h) + 24px); }
}

.rule { border: 0; height: 1px; background: var(--hairline); margin: 0; }
/* The lamp rail: a divider that fades at both ends, like the marketing rail. */
.rule--lamp {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--accent) 55%, transparent) 14%, color-mix(in oklch, var(--accent) 55%, transparent) 86%, transparent);
}


/* ==========================================================================
   6. ICONS  (<svg class="icon"><use href="#i-name"/></svg>)
   ========================================================================== */
.icon {
  display: inline-block;
  flex: none;
  width: 20px; height: 20px;
  vertical-align: -0.28em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; }
.icon--amber { color: var(--accent); }
.icon--fill { fill: currentColor; }


/* ==========================================================================
   7. BUTTONS
      .btn, .btn--primary (alias .primary), .btn--quiet, .btn--ghost,
      .btn--danger (menus and dialogs only), .btn--sm, .btn--lg, .btn--block,
      .icon-btn (round, 40px, needs aria-label). aria-busy="true" shows a
      spinner. A .cost pill may sit inside an AI button.
   ========================================================================== */
.btn {
  --btn-h: 40px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h);
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1),
              box-shadow var(--dur-2), filter var(--dur-1), transform var(--dur-1);
}
.btn:hover { border-color: var(--border-hi); background: var(--quiet-bg); color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 18px; height: 18px; margin-inline: -2px; }
.btn:has(> .icon:first-child) { padding-left: 15px; }

.btn--primary, .btn.primary {
  background: var(--accent-grad);
  color: var(--accent-ink);
  border-color: transparent;
  font-weight: 600;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.32), 0 8px 22px -12px var(--accent-glow);
}
.btn--primary:hover, .btn.primary:hover {
  background: var(--accent-grad);
  color: var(--accent-ink);
  border-color: transparent;
  filter: brightness(1.06) saturate(1.04);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.36), 0 12px 28px -12px var(--accent-glow);
}
.btn--quiet { border-color: transparent; background: var(--quiet-bg); color: var(--text2); }
.btn--quiet:hover { border-color: transparent; background: var(--quiet-bg-hi); color: var(--text); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn--ghost:hover { border-color: transparent; background: var(--quiet-bg); color: var(--text); }
.btn--danger, .btn.danger { color: var(--neg); border-color: var(--neg-bd); background: var(--neg-bg); }
.btn--danger:hover, .btn.danger:hover { color: var(--neg); border-color: var(--neg); background: color-mix(in oklch, var(--neg) 18%, transparent); }
.btn--danger:focus-visible, .btn.danger:focus-visible { outline-color: var(--neg); }

.btn--sm, .btn.small, .btn-compact { --btn-h: 32px; padding: 0 13px; gap: 6px; font-size: var(--fs-sm); }
.btn--sm .icon, .btn.small .icon { width: 16px; height: 16px; }
.btn--sm:has(> .icon:first-child) { padding-left: 10px; }
.btn--lg { --btn-h: 48px; padding: 0 24px; font-size: 1rem; gap: 10px; }
.btn--lg:has(> .icon:first-child) { padding-left: 20px; }
.btn--block { display: flex; width: 100%; }

.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
  opacity: 0.55; cursor: not-allowed; transform: none; filter: none;
}
:is(.btn--primary, .btn.primary):is(:disabled, [aria-disabled="true"], .is-disabled) {
  background: var(--quiet-bg-hi); color: var(--muted); border-color: transparent; box-shadow: none; opacity: 1;
}
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] > .icon { display: none; }
.btn[aria-busy="true"]::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid currentColor; border-right-color: transparent;
  animation: lp-spin 0.75s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(1turn); } }

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.icon-btn:hover { background: var(--quiet-bg-hi); color: var(--text); text-decoration: none; }
.icon-btn[aria-pressed="true"], .icon-btn.is-on { color: var(--accent); background: var(--accent-bg); }
.icon-btn--sm { width: 32px; height: 32px; }
.icon-btn--sm .icon { width: 18px; height: 18px; }
.icon-btn--bordered { border-color: var(--border); }
.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Legacy text buttons (app.css) */
.btn-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 8px; border-radius: 6px;
  color: var(--muted); font-size: var(--fs-sm); cursor: pointer;
}
.btn-link:hover { color: var(--text); text-decoration: none; }

/* What an AI action costs, shown before the click. */
.cost {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 20px; padding: 0 8px 0 6px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; line-height: 1; font-weight: 500;
  letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-bd);
}
.cost::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-lo), var(--accent-hi) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent-ink) 22%, transparent);
}
.cost--free { color: var(--muted); background: transparent; border-color: var(--border); }
.cost--free::before { display: none; }
.btn .cost { margin-right: -8px; }
.btn--sm .cost { margin-right: -5px; height: 18px; }
.btn--primary .cost, .btn.primary .cost {
  color: var(--accent-ink);
  background: color-mix(in oklch, var(--accent-ink) 11%, transparent);
  border-color: color-mix(in oklch, var(--accent-ink) 20%, transparent);
}
.btn--primary .cost::before, .btn.primary .cost::before { background: var(--accent-ink); opacity: 0.55; box-shadow: none; }


/* ==========================================================================
   8. CHIPS
      .chip, .chip--on, .chip--remove (with .chip__x), .chip--person (with an
      .avatar--xs), .chip--place (pin icon), .chip--mood (data-family="bright|
      calm|stormy|heavy|mixed" colours the dot), .chip--sm.
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.chip > span:not(.avatar):not(.cost) { overflow: hidden; text-overflow: ellipsis; }
a.chip, button.chip, label.chip { cursor: pointer; }
a.chip:hover, button.chip:hover, label.chip:hover { border-color: var(--border-hi); background: var(--quiet-bg); color: var(--text); text-decoration: none; }
.chip .icon { width: 14px; height: 14px; color: var(--muted); }
.chip--on, .chip[aria-pressed="true"], .chip[aria-selected="true"], label.chip:has(input:checked) {
  background: var(--accent-bg); border-color: var(--accent-bd); color: var(--accent);
}
.chip--on .icon, .chip[aria-pressed="true"] .icon { color: currentColor; }
/* A chosen chip stays chosen under the pointer (the plain hover rule above is
   more specific than .chip--on and used to make it look unchosen). */
a.chip.chip--on:hover, button.chip.chip--on:hover, button.chip[aria-pressed="true"]:hover,
button.chip[aria-selected="true"]:hover, label.chip:has(input:checked):hover {
  background: var(--accent-bg); border-color: var(--accent); color: var(--accent);
}
button.chip--mood.chip--on:hover, button.chip--mood[aria-pressed="true"]:hover, label.chip--mood:has(input:checked):hover {
  color: var(--text);
  background: color-mix(in oklch, var(--mood) 20%, transparent);
  border-color: color-mix(in oklch, var(--mood) 60%, transparent);
}
label.chip input[type="checkbox"], label.chip input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip--sm, .chip-sm { min-height: 22px; padding: 0 8px; font-size: var(--fs-label); gap: 4px; }
.chip--remove { padding-right: 3px; }
.chip__x {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--muted); background: transparent; border: 0; cursor: pointer;
}
.chip__x:hover { background: var(--quiet-bg-hi); color: var(--text); }
.chip__x .icon { width: 12px; height: 12px; color: currentColor; }
.chip--person { padding-left: 3px; }
.chip--person .avatar { width: 22px; height: 22px; font-size: 11px; }
.chip--place .icon { color: var(--muted); }
.chip--mood { --mood: var(--c-iris); }
.chip--mood::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mood);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--mood) 18%, transparent);
}
[data-family="bright"] { --mood: var(--c-gold); }
[data-family="calm"]   { --mood: var(--c-moss); }
[data-family="stormy"] { --mood: var(--c-ember); }
[data-family="heavy"]  { --mood: var(--c-azure); }
[data-family="mixed"]  { --mood: var(--c-iris); }
.chip--mood.chip--on, .chip--mood[aria-pressed="true"], label.chip--mood:has(input:checked) {
  color: var(--text);
  background: color-mix(in oklch, var(--mood) 15%, transparent);
  border-color: color-mix(in oklch, var(--mood) 50%, transparent);
}
/* A row of chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }


/* ==========================================================================
   9. CARDS, WELL, PAPER
   ========================================================================== */
.card {
  position: relative;
  min-width: 0;
  background: var(--card-grad);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--pad-card);
  box-shadow: var(--lift), var(--card-shadow);
  color: var(--text);
}
.card--flat { background: transparent; box-shadow: none; }
.card--compact { padding: 14px 16px; border-radius: var(--r); }
.card--link, a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), background var(--dur-2);
}
.card--link:hover, a.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-bd);
  background: var(--card-grad-hi);
  text-decoration: none;
}
.card--link:active, a.card:active { transform: translateY(0); }
/* When a card holds other controls, stretch its main link instead. */
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link:hover { text-decoration: none; }
.card:has(.card__link) :is(button, a:not(.card__link), input, select, textarea, label) { position: relative; z-index: 1; }
.card:has(.card__link:hover) { border-color: var(--accent-bd); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card__meta { color: var(--muted); font-size: var(--fs-sm); }
.card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }

.well {
  background: var(--well);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.22);
}
:root[data-theme="paper"] .well { box-shadow: inset 0 1px 2px oklch(0.30 0.03 60 / 0.07); }

/* The paper note: everything the journal writes back. A light island in Lamp,
   a slightly darker cream sheet in Paper. Tokens are remapped inside it, so
   chips, buttons and markdown adapt on their own. */
.paper {
  --text: var(--paper-ink);
  --text2: var(--paper-ink);
  --text-read: var(--paper-ink);
  --muted: var(--paper-muted);
  --faint: color-mix(in oklch, var(--paper-muted) 70%, var(--paper-bg));
  --accent: var(--paper-accent);
  --accent-bg: color-mix(in oklch, var(--paper-accent) 10%, transparent);
  --accent-bd: color-mix(in oklch, var(--paper-accent) 28%, transparent);
  --border: color-mix(in oklch, var(--paper-ink) 20%, transparent);
  --border-hi: color-mix(in oklch, var(--paper-ink) 34%, transparent);
  --hairline: var(--paper-edge);
  --quiet-bg: color-mix(in oklch, var(--paper-ink) 6%, transparent);
  --quiet-bg-hi: color-mix(in oklch, var(--paper-ink) 10%, transparent);
  --focus: var(--paper-accent);
  --select-bg: oklch(0.86 0.09 75);
  --well: color-mix(in oklch, var(--paper-ink) 5%, var(--paper-bg));
  --field-bg: oklch(1 0 0 / 0.55);
  --placeholder: color-mix(in oklch, var(--paper-muted) 85%, var(--paper-bg));
  --empty-art: color-mix(in oklch, var(--paper-ink) 40%, transparent);
  color-scheme: light;
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: clamp(22px, 3.2vw, 36px) clamp(20px, 3.4vw, 40px);
  border-radius: 8px;
  border: 1px solid var(--paper-edge);
  background: var(--paper-bg);
  color: var(--paper-ink);
  box-shadow: var(--shadow-paper);
  font-family: var(--font-read);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(75% 55% at 10% 0%, var(--paper-glow), transparent 68%);
}
.paper__label {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); line-height: 1.3; font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--paper-accent);
}
.paper__label .icon { width: 15px; height: 15px; }
.paper__title { font-family: var(--font-read); font-size: 1.375rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.012em; color: var(--paper-ink); margin-bottom: 10px; }
.paper__body > * + * { margin-top: 0.85em; }
.paper :is(h1, h2, h3, h4) { color: var(--paper-ink); }
.paper strong { color: var(--paper-ink); font-weight: 600; }
.paper a:not(.paper__cite):not(.btn):not(.chip) { color: var(--paper-accent); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--paper-accent) 35%, transparent); }
/* A citation: a small mono chip that opens the memory. */
.paper__cite, .cite {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px; margin: 0 1px;
  vertical-align: 0.12em;
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; line-height: 1; font-weight: 500;
  font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: 0;
  color: var(--paper-accent);
  background: color-mix(in oklch, var(--paper-accent) 9%, transparent);
  border: 1px solid color-mix(in oklch, var(--paper-accent) 24%, transparent);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
a.paper__cite:hover, a.cite:hover { text-decoration: none; background: color-mix(in oklch, var(--paper-accent) 16%, transparent); border-color: color-mix(in oklch, var(--paper-accent) 42%, transparent); }
.paper__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed color-mix(in oklch, var(--paper-ink) 18%, transparent);
  font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.4;
  color: var(--paper-muted);
}
.paper__meta .icon { width: 15px; height: 15px; color: var(--paper-accent); }
.paper__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--font-ui); }
.paper .btn--primary .cost, .paper .btn.primary .cost { color: var(--accent-ink); }
.paper ::selection { background: oklch(0.86 0.09 75); color: var(--paper-ink); }
.paper--flat { box-shadow: none; }
@media (min-width: 1024px) {
  .paper:not(.paper--flat):not(.paper--straight) { transform: rotate(-0.35deg); }
  .paper--tilt-r:not(.paper--flat):not(.paper--straight) { transform: rotate(0.3deg); }
}


/* ==========================================================================
   10. FORMS
       .field (.field__label, control, .field__hint, .field__error), .input,
       .textarea, .textarea--write, .select, .toggle, .radio-card,
       .chips-input, .seg. Bare inputs get the .input look at zero
       specificity, so any class overrides it.
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field__label, .label { font-size: var(--fs-sm); line-height: 1.35; font-weight: 500; color: var(--text2); }
.field__label .muted, .field__optional { font-weight: 400; color: var(--muted); }
.field__hint { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.field__error { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--neg); }
.field__error .icon { width: 16px; height: 16px; }
.field__row { display: flex; flex-wrap: wrap; gap: 12px; }
.field__row > * { flex: 1 1 180px; min-width: 0; }

.input, .textarea, .select,
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"])),
:where(select), :where(textarea) {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  line-height: 1.4;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  outline: none;
  transition: border-color var(--dur-1), box-shadow var(--dur-1), background-color var(--dur-1);
}
:is(.input, .textarea, .select):hover,
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, textarea):hover { border-color: var(--border-hi); }
:is(.input, .textarea, .select):focus,
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, textarea):focus {
  border-color: var(--accent); box-shadow: var(--ring); outline: none;
}
:is(.input, .textarea, .select)::placeholder, :where(input, textarea)::placeholder { color: var(--placeholder); opacity: 1; }
:is(.input, .textarea, .select)[aria-invalid="true"], .field.is-invalid :is(.input, .textarea, .select) { border-color: var(--neg-bd); }
:is(.input, .textarea, .select)[aria-invalid="true"]:focus { box-shadow: var(--ring-neg); border-color: var(--neg); }
:is(.input, .textarea, .select):disabled, :where(input, select, textarea):disabled { opacity: 0.55; cursor: not-allowed; }
.input--sm { min-height: 36px; padding: 7px 12px; font-size: var(--fs-sm); }
.input--lg { min-height: 52px; padding: 12px 16px; font-size: 1.0625rem; }
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; }
input[type="date"], input[type="time"], input[type="month"] { font-variant-numeric: tabular-nums; }

.textarea, :where(textarea) { min-height: 120px; resize: vertical; line-height: 1.55; }
/* The writing surface: Literata on the page, no box, grows with the words. */
.textarea--write {
  display: block;
  width: 100%;
  min-height: 12rem;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
  font-family: var(--font-read);
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--text-read);
  caret-color: var(--accent);
  field-sizing: content;
  overflow: hidden;
}
.textarea--write:hover { border: 0; }
.textarea--write:focus { box-shadow: -16px 0 0 -14px var(--accent-bd); border: 0; }
.textarea--write::placeholder { color: var(--placeholder); font-style: italic; }

.select, :where(select) {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23968a7d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  cursor: pointer;
}
select option { background: var(--float); color: var(--text); }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-hi); width: 18px; height: 18px; margin: 0; flex: none; }
.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-ui); line-height: 1.4; }
.check input { margin-top: 1px; }
.check__hint { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }

/* Switch: <label class="toggle"><input type="checkbox" role="switch">
   <span class="toggle__track"></span><span class="toggle__label">…</span></label> */
.toggle { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.toggle__track {
  position: relative; flex: none;
  width: 42px; height: 24px; border-radius: var(--r-pill);
  background: var(--quiet-bg-hi);
  border: 1px solid var(--border);
  transition: background var(--dur-2), border-color var(--dur-2);
}
.toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.3);
  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2);
}
.toggle input:checked + .toggle__track { background: var(--accent-grad); border-color: transparent; }
.toggle input:checked + .toggle__track::after { transform: translateX(18px); background: oklch(0.99 0.01 85); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.toggle input:disabled + .toggle__track { opacity: 0.5; }
.toggle__label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-ui); line-height: 1.4; color: var(--text); }
.toggle__hint { font-size: var(--fs-sm); color: var(--muted); }

/* A choice as a card: <label class="radio-card"><input type="radio">
   <span class="radio-card__art">(optional)</span><span class="radio-card__body">
   <span class="radio-card__title">…</span><span class="radio-card__desc">…</span></span></label> */
.radio-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.radio-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--card-grad);
  cursor: pointer;
  transition: border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1);
}
.radio-card:hover { border-color: var(--border-hi); }
.radio-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.radio-card::after {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border-hi);
  background: color-mix(in oklch, var(--bg) 72%, transparent);
  transition: all var(--dur-1);
}
.radio-card:has(input:checked) { border-color: var(--accent-bd); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-bd); }
.radio-card:has(input:checked)::after { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 4px, transparent 4.5px); }
.radio-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.radio-card__body { display: flex; flex-direction: column; gap: 3px; padding-right: 24px; }
.radio-card__title { font-weight: 500; color: var(--text); }
.radio-card__desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.radio-card__art { display: block; height: 64px; border-radius: var(--r-sm); border: 1px solid var(--hairline); overflow: hidden; }

/* Typing makes chips: Enter or comma commits, Backspace removes.
   Lapri.chips(el, opts) or data-chips on the container (see lapri.js). */
.chips-input {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--field-bg);
  cursor: text;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.chips-input:hover { border-color: var(--border-hi); }
.chips-input:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.chips-input .chip { background: var(--quiet-bg); border-color: var(--hairline); color: var(--text); }
.chips-input .chip.is-marked { border-color: var(--accent); background: var(--accent-bg); }
input.chips-input__field {
  flex: 1 0 120px; min-width: 90px; width: auto;
  min-height: 30px; padding: 3px 6px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
}
input.chips-input__field:focus { box-shadow: none; border: 0; }
.chips-input__list {
  position: absolute; z-index: var(--z-menu);
  top: calc(100% + 6px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: var(--float);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-float);
}
.chips-input__option {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 6px 10px; border-radius: 8px;
  color: var(--text2); cursor: pointer;
}
.chips-input__option[aria-selected="true"] { background: var(--accent-bg); color: var(--text); }
.chips-input__hint { margin-left: auto; font-size: var(--fs-label); color: var(--muted); }

/* Touch screens: controls at 16px so iOS does not zoom on focus, and tap
   targets of at least 40px (36px for chips, which sit in dense rows). */
@media (pointer: coarse) {
  .input, .textarea, .select, .chips-input__field,
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"])), :where(select), :where(textarea) {
    font-size: max(16px, 1em);
  }
  .btn--sm, .btn.small, .btn-compact { --btn-h: 40px; }
  .icon-btn--sm { width: 40px; height: 40px; }
  a.chip, button.chip, label.chip { min-height: 36px; }
  .seg__btn { min-height: 40px; }
  .chip__x { width: 30px; height: 30px; }
}

/* Segmented control. Buttons (role="tab", JS) or links (aria-current). */
.seg {
  display: inline-flex; align-items: center; gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--quiet-bg);
  border: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none;
  min-height: 34px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);
}
.seg__btn:hover { color: var(--text); text-decoration: none; }
.seg__btn[aria-selected="true"], .seg__btn[aria-current="page"], .seg__btn[aria-pressed="true"], .seg__btn.is-on {
  background: var(--seg-on); color: var(--text);
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.22), inset 0 1px 0 oklch(1 0 0 / 0.05);
}
.seg__btn .icon { width: 16px; height: 16px; }
.seg__count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg--block { display: flex; width: 100%; max-width: none; }
.seg--block .seg__btn { flex: 1 1 0; }
.seg--sm .seg__btn { min-height: 28px; padding: 0 12px; font-size: var(--fs-label); }


/* ==========================================================================
   11. FEEDBACK AND SMALL PIECES
       .empty, .skeleton, .avatar, .progress, .dots, .ring, .badge
   ========================================================================== */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px;
  max-width: 460px;
  margin-inline: auto;
  padding: 40px 20px;
}
.empty__art { display: block; width: 120px; height: 96px; color: var(--empty-art); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty__title { font-family: var(--font-read); font-size: 1.375rem; line-height: 1.3; font-weight: 500; color: var(--text); }
.empty__text { font-size: 1rem; line-height: 1.55; color: var(--text2); max-width: 38ch; }
.empty > .btn, .empty__actions { margin-top: 6px; }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.empty--inline { flex-direction: row; text-align: left; align-items: center; max-width: none; margin: 0; padding: 16px 4px; gap: 18px; }
.empty--inline .empty__art { width: 72px; height: 58px; }
.empty--inline > .btn { margin-top: 0; margin-left: auto; }
@media (max-width: 559.98px) { .empty--inline { flex-wrap: wrap; } .empty--inline > .btn { margin-left: 0; } }

.skeleton {
  --sk-base: color-mix(in oklch, var(--text) 7%, transparent);
  --sk-shine: color-mix(in oklch, var(--text) 13%, transparent);
  display: block;
  border-radius: 6px;
  background: linear-gradient(100deg, var(--sk-base) 30%, var(--sk-shine) 50%, var(--sk-base) 70%);
  background-size: 300% 100%;
  animation: lp-shimmer 1.6s ease-in-out infinite;
}
.skeleton--line { height: 0.72em; margin: 0.55em 0; border-radius: 4px; }
.skeleton--line:last-child { width: 62%; }
.skeleton--title { height: 1.3em; width: 55%; margin-bottom: 0.6em; }
.skeleton--block { height: 120px; border-radius: var(--r); }
.skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }
@keyframes lp-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* A person's initial, coloured by a stable hash of their name:
   <span class="avatar" data-tone="<%= toneFor(name) %>"><%= initialOf(name) %></span> */
.avatar {
  --tone: var(--c-amber);
  --tone-ink: var(--c-amber-ink);
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  font-family: var(--font-read);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  color: var(--tone-ink);
  background: color-mix(in oklch, var(--tone) 17%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tone) 40%, transparent);
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { width: 22px; height: 22px; font-size: 11px; }
.avatar--sm { width: 28px; height: 28px; font-size: 12.5px; }
.avatar--md { width: 36px; height: 36px; font-size: 15px; }
.avatar--lg { width: 56px; height: 56px; font-size: 23px; }
.avatar--xl { width: 88px; height: 88px; font-size: 36px; }
[data-tone="amber"] { --tone: var(--c-amber); --tone-ink: var(--c-amber-ink); }
[data-tone="ember"] { --tone: var(--c-ember); --tone-ink: var(--c-ember-ink); }
[data-tone="gold"]  { --tone: var(--c-gold);  --tone-ink: var(--c-gold-ink); }
[data-tone="moss"]  { --tone: var(--c-moss);  --tone-ink: var(--c-moss-ink); }
[data-tone="teal"]  { --tone: var(--c-teal);  --tone-ink: var(--c-teal-ink); }
[data-tone="azure"] { --tone: var(--c-azure); --tone-ink: var(--c-azure-ink); }
[data-tone="iris"]  { --tone: var(--c-iris);  --tone-ink: var(--c-iris-ink); }
[data-tone="rose"]  { --tone: var(--c-rose);  --tone-ink: var(--c-rose-ink); }
.avatars { display: flex; }
.avatars .avatar + .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px color-mix(in oklch, var(--tone) 40%, transparent); }

/* Thin progress: <div class="progress" style="--p: 25"><span class="progress__bar"></span></div>
   (--p is 0 to 100) or a native <progress class="progress" value max>. */
.progress {
  position: relative; display: block;
  width: 100%; height: 4px;
  border-radius: var(--r-pill);
  background: var(--track);
  overflow: hidden;
  border: 0;
  appearance: none; -webkit-appearance: none;
}
.progress__bar {
  display: block; height: 100%;
  width: calc(var(--p, 0) * 1%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-hi), var(--accent-lo));
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width var(--dur-3) var(--ease-out);
}
.progress--lg { height: 8px; }
progress.progress::-webkit-progress-bar { background: var(--track); border-radius: var(--r-pill); }
progress.progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent-hi), var(--accent-lo)); border-radius: var(--r-pill); }
progress.progress::-moz-progress-bar { background: linear-gradient(90deg, var(--accent-hi), var(--accent-lo)); border-radius: var(--r-pill); }

/* The gentle week: seven dots, filled where something was kept. Never a streak. */
.dots { display: flex; align-items: flex-start; gap: 12px; list-style: none; margin: 0; padding: 0; }
.dots__day { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.dots__mark {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--border-hi);
  background: transparent;
}
.dots__day.is-kept .dots__mark {
  background: radial-gradient(circle at 35% 30%, var(--accent-lo), var(--accent-hi));
  border-color: transparent;
  box-shadow: 0 0 10px var(--accent-glow);
}
.dots__day.is-today .dots__mark { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.dots__label { font-family: var(--font-mono); font-size: 10.5px; line-height: 1; font-weight: 500; color: var(--muted); text-transform: uppercase; }

/* Progress ring:
   <span class="ring" style="--p: 33" role="img" aria-label="4 of 12">
     <svg viewBox="0 0 36 36" aria-hidden="true"><circle class="ring__track" cx="18" cy="18" r="16"/>
     <circle class="ring__value" cx="18" cy="18" r="16" pathLength="100"/></svg>
     <span class="ring__label">4<small>/12</small></span></span> */
.ring { --size: 56px; --p: 0; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--size); height: var(--size); }
.ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring__track { fill: none; stroke: var(--track); stroke-width: 2.5; }
.ring__value {
  fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: calc(var(--p) * 1) 100;
  filter: drop-shadow(0 0 3px var(--accent-glow));
  transition: stroke-dasharray var(--dur-3) var(--ease-out);
}
.ring__label { position: relative; font-family: var(--font-mono); font-size: 13px; line-height: 1; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.ring__label small { font-size: 10px; color: var(--muted); }
.ring--sm { --size: 36px; }
.ring--sm .ring__label { font-size: 10.5px; }
.ring--lg { --size: 88px; }
.ring--lg .ring__label { font-size: 17px; }

/* Small labels (legacy, and quiet status words) */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: 500; line-height: 1;
  color: var(--text2); background: var(--quiet-bg); border: 1px solid var(--hairline);
  white-space: nowrap;
}
.badge--amber, .badge.mood, .badge-pro { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-bd); }
.badge.traumatic { color: var(--hard); background: color-mix(in oklch, var(--hard) 12%, transparent); border-color: transparent; }
.badge.formative { color: var(--c-azure-ink); background: color-mix(in oklch, var(--c-azure) 12%, transparent); border-color: transparent; }
.badge-ok { color: var(--c-moss-ink); background: color-mix(in oklch, var(--c-moss) 13%, transparent); border-color: transparent; }
.badge-free { color: var(--muted); }
.badge-admin { color: var(--c-iris-ink); background: color-mix(in oklch, var(--c-iris) 13%, transparent); border-color: transparent; }

/* A plain notice line inside a page (not a toast). */
.notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--accent-bg); border: 1px solid var(--accent-bd);
  color: var(--text); font-size: var(--fs-sm); line-height: 1.5;
}
.notice .icon { width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }
.notice--quiet { background: var(--quiet-bg); border-color: var(--hairline); }
.notice--quiet .icon { color: var(--muted); }


/* ==========================================================================
   12. SHELL
       Desktop: sticky top bar (wordmark, nav, search, Talk, Write, avatar).
       Phones (< 768px): slim top bar and a bottom tab bar with a raised
       Capture button. Markup lives in partials/header.ejs and footer.ejs.
   ========================================================================== */
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--accent-grad); color: var(--accent-ink); font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: 12px; text-decoration: none; }

.bar {
  position: sticky; top: 0; z-index: var(--z-bar);
  padding-top: env(safe-area-inset-top);
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid var(--bar-line);
  view-transition-name: lapri-bar;
}
@media (prefers-reduced-transparency: reduce) { .bar, .tabbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.bar__inner {
  display: flex; align-items: center; gap: 20px;
  height: var(--bar-h);
  max-width: calc(var(--w-app) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
body.layout-wide .bar__inner { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }
body.layout-full .bar__inner { max-width: none; }

.wordmark {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  color: var(--wordmark);
  text-decoration: none;
  font-family: var(--font-read);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 1;
  letter-spacing: -0.005em;
}
.wordmark:hover { text-decoration: none; color: var(--wordmark); }
.wordmark__mark { width: 22px; height: 22px; flex: none; }
.wordmark__mark * { stroke: none; }

.nav { display: flex; align-items: stretch; align-self: stretch; gap: 2px; margin-left: 12px; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0 12px;
  color: var(--muted);
  font-size: var(--fs-ui);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-1);
}
.nav__link:hover { color: var(--text); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--accent-hi), var(--accent-lo));
  box-shadow: 0 0 12px var(--accent-glow);
}
.nav__link:focus-visible { outline-offset: -4px; border-radius: 10px; }

.bar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bar .btn { --btn-h: 36px; padding: 0 15px; font-size: 0.875rem; }
.bar .btn:has(> .icon:first-child) { padding-left: 12px; }
.bar .btn .icon { width: 17px; height: 17px; }

/* Search: a pill with the shortcut on desktop, an icon on phones. */
.bar-search {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; min-width: 196px;
  padding: 0 7px 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--quiet-bg);
  color: var(--muted);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-1), color var(--dur-1), background-color var(--dur-1);
}
.bar-search:hover { border-color: var(--border); color: var(--text2); text-decoration: none; }
.bar-search .icon { width: 17px; height: 17px; }
.bar-search__label { flex: 1; text-align: left; }
.bar-search__keys { display: inline-flex; gap: 3px; }
.bar-search .kbd { height: 20px; min-width: 20px; font-size: 11px; background: transparent; }

.avatar-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  margin-right: -2px;
  cursor: pointer;
  transition: box-shadow var(--dur-1);
}
.avatar-btn .avatar { transition: box-shadow var(--dur-1); }
.avatar-btn:hover .avatar, .avatar-btn[aria-expanded="true"] .avatar {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tone) 60%, transparent), 0 0 0 3px color-mix(in oklch, var(--tone) 16%, transparent);
}

@media (max-width: 1099.98px) {
  .bar__inner { gap: 14px; }
  .nav { margin-left: 4px; }
  .nav__link { padding: 0 10px; }
  .nav__link[aria-current="page"]::after { left: 10px; right: 10px; }
  .bar-search { min-width: 0; width: 36px; padding: 0; justify-content: center; }
  .bar-search__label, .bar-search__keys { display: none; }
  .bar-talk__label { display: none; }
  .bar .bar-talk { width: 36px; padding: 0; justify-content: center; }
}
@media (max-width: 767.98px) {
  .bar__inner { gap: 6px; padding-right: 10px; }
  .nav, .bar-talk, .bar-write { display: none; }
  .bar-search { border-color: transparent; background: transparent; width: 40px; height: 40px; color: var(--text2); }
  .bar-search .icon { width: 20px; height: 20px; }
  .wordmark { font-size: 1.25rem; }
}

/* Phone tab bar */
.tabbar { display: none; }
@media (max-width: 767.98px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 max(4px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-right));
    background: var(--bar-bg);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    border-top: 1px solid var(--bar-line);
    view-transition-name: lapri-tabbar;
  }
}
.tabbar__link {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tabbar__link .icon { width: 24px; height: 24px; }
.tabbar__link:hover { color: var(--text); text-decoration: none; }
.tabbar__link[aria-current="page"] { color: var(--accent); }
.tabbar__link[aria-current="page"]::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 22px; height: 2px; margin-left: -11px;
  border-radius: 0 0 2px 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
}
.tabbar__capture {
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tabbar__disc {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  transform: translateY(-14px);
  background: var(--accent-grad);
  color: var(--accent-ink);
  box-shadow: 0 0 0 5px var(--bg), inset 0 1px 0 oklch(1 0 0 / 0.35), 0 12px 26px -8px var(--accent-glow);
  transition: transform var(--dur-2) var(--ease-out), filter var(--dur-1);
}
.tabbar__disc .icon { width: 26px; height: 26px; stroke-width: 2; }
.tabbar__capture:active .tabbar__disc { transform: translateY(-12px) scale(0.96); }
.tabbar__capture:focus-visible { outline: none; }
.tabbar__capture:focus-visible .tabbar__disc { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Capture choices (the sheet the phone's centre button opens) */
.capture-choices { display: grid; gap: 12px; }
.capture-choice {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  padding: 18px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--card-grad);
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-1), background var(--dur-1);
}
.capture-choice:hover { border-color: var(--accent-bd); text-decoration: none; }
.capture-choice__icon {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-bd);
}
.capture-choice__icon .icon { width: 24px; height: 24px; }
.capture-choice--primary .capture-choice__icon { background: var(--accent-grad); color: var(--accent-ink); box-shadow: 0 8px 20px -10px var(--accent-glow); }
.capture-choice__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.capture-choice__title { font-family: var(--font-read); font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.capture-choice__desc { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }


/* ==========================================================================
   13. OVERLAYS
       Sheets, dialogs, the palette: <dialog> elements opened by lapri.js with
       showModal() (top layer, focus contained, Esc closes). Menus: popovers
       from [data-menu] triggers. Toasts: #toast.
   ========================================================================== */
dialog { color: var(--text); }
dialog::backdrop { background: var(--scrim, oklch(0.075 0.01 62 / 0.66)); }
/* A <div class="sheet"> handed to Lapri.sheet.open() is wrapped in a dialog;
   its own box steps aside so head, body and foot lay out as usual. */
.overlay-content { display: contents; }
/* Shortcut hints: ⌘ on Apple keyboards, Ctrl elsewhere (data-os set in <head>). */
:root[data-os="mac"] .key-other, :root:not([data-os="mac"]) .key-mac { display: none; }

/* Sheet: a right drawer from 768px, a bottom sheet below.
   <dialog class="sheet" aria-labelledby="x-title">
     <header class="sheet__head"><h2 class="sheet__title" id="x-title">…</h2>
       <button class="icon-btn" data-close aria-label="Close">…</button></header>
     <div class="sheet__body">…</div>
     <footer class="sheet__foot">…</footer></dialog> */
dialog.sheet {
  position: fixed;
  margin: 0; padding: 0;
  border: 0;
  max-width: none; max-height: none;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--float);
  color: var(--text);
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-3) var(--ease-out);
}
dialog.sheet:not([open]) { display: none; }
dialog.sheet::backdrop {
  background: var(--scrim, oklch(0.075 0.01 62 / 0.66));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
dialog.sheet.is-open::backdrop { opacity: 1; }
@media (min-width: 768px) {
  dialog.sheet {
    inset: 0 0 0 auto;
    width: min(480px, 100vw);
    height: 100dvh;
    border-left: 1px solid var(--border);
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    transform: translateX(104%);
  }
  dialog.sheet--wide { width: min(640px, 100vw); }
  dialog.sheet.is-open { transform: none; }
}
@media (max-width: 767.98px) {
  dialog.sheet {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 92dvh;
    border-top: 1px solid var(--border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(104%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  dialog.sheet.is-open { transform: none; }
  dialog.sheet::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
    border-radius: 2px; background: var(--border-hi); opacity: 0.8;
  }
}
.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 16px 12px 24px;
}
.sheet__head .icon-btn { margin: -6px -4px -6px 0; }
.sheet__title { font-family: var(--font-read); font-size: 1.375rem; line-height: 1.25; font-weight: 500; letter-spacing: -0.012em; }
.sheet__sub { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }
.sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 24px; }
.sheet__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 24px 16px;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 767.98px) {
  .sheet__head { padding: 22px 12px 10px 20px; }
  .sheet__body { padding: 6px 20px 20px; }
  .sheet__foot { padding: 12px 20px 14px; }
}

/* Dialog: small and centred. Lapri.dialog.confirm() builds one of these. */
dialog.dialog {
  margin: auto;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--float);
  color: var(--text);
  box-shadow: var(--shadow-float);
  overflow: auto;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
dialog.dialog.is-open { opacity: 1; transform: none; }
dialog.dialog::backdrop { opacity: 0; transition: opacity var(--dur-2); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
dialog.dialog.is-open::backdrop { opacity: 1; }
dialog.dialog--wide { width: min(560px, calc(100vw - 32px)); }
.dialog__body { padding: 26px 26px 6px; display: flex; flex-direction: column; gap: 10px; }
.dialog__title { font-family: var(--font-read); font-size: 1.375rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.012em; }
.dialog__text { color: var(--text2); line-height: 1.55; }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 18px 26px 22px; }

/* Menus: <button data-menu="m1" aria-haspopup="menu" aria-expanded="false">
   <div class="menu" id="m1" role="menu" hidden> .menu__item (role="menuitem"),
   .menu__sep, .menu__label, .menu__item--danger. */
.menu {
  position: fixed;
  z-index: var(--z-menu);
  min-width: 220px;
  max-width: min(340px, calc(100vw - 16px));
  max-height: min(78dvh, 560px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--float);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-float);
  color: var(--text);
  font-family: var(--font-ui);
  transform-origin: var(--menu-origin, top right);
  animation: lp-menu-in var(--dur-2) var(--ease-out);
}
.menu[popover] { inset: auto; margin: 0; }
@keyframes lp-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.menu__item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--text2);
  font-size: var(--fs-ui);
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.menu__item:hover, .menu__item:focus-visible, .menu__item.is-active {
  background: var(--quiet-bg-hi); color: var(--text); text-decoration: none; outline: none;
}
.menu__item .icon { width: 18px; height: 18px; color: var(--muted); }
.menu__item:hover .icon, .menu__item:focus-visible .icon { color: var(--text2); }
.menu__item > .cost, .menu__item > .menu__end { margin-left: auto; }
.menu__item--danger, .menu__item--danger .icon { color: var(--neg); }
.menu__item--danger:hover, .menu__item--danger:focus-visible { background: var(--neg-bg); color: var(--neg); }
.menu__item--danger:hover .icon { color: var(--neg); }
.menu__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.menu__check { margin-left: auto; color: var(--accent) !important; }
.menu__item:not([aria-checked="true"]) .menu__check { visibility: hidden; }
.menu__item[aria-checked="true"] { color: var(--text); }
.menu__sep { display: block; height: 1px; margin: 6px 6px; border: 0; background: var(--hairline); }
.menu__label {
  padding: 10px 10px 5px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}
.menu form { display: contents; }

/* The account menu's head and its one balance line */
.menu__head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.menu__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.menu__name { font-family: var(--font-read); font-size: 1.0625rem; font-weight: 500; color: var(--text); line-height: 1.2; }
.menu__email { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__credits { gap: 10px; }
.menu__credits .cost { margin-left: 0; }
.menu__credits-text { color: var(--text2); }
.menu__credits-more { margin-left: auto; font-size: var(--fs-sm); color: var(--accent); }

/* Command palette */
dialog.palette {
  margin: min(12vh, 120px) auto auto;
  width: min(640px, calc(100vw - 24px));
  max-height: min(72dvh, 580px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--float);
  color: var(--text);
  box-shadow: var(--shadow-float), 0 0 0 1px color-mix(in oklch, var(--accent) 6%, transparent), 0 0 80px -30px var(--accent-glow);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
dialog.palette:not([open]) { display: none; }
dialog.palette.is-open { opacity: 1; transform: none; }
dialog.palette::backdrop { opacity: 0; transition: opacity var(--dur-2); }
dialog.palette.is-open::backdrop { opacity: 1; }
.palette__search { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--hairline); }
.palette__search > .icon { width: 20px; height: 20px; color: var(--accent); }
input.palette__input {
  flex: 1; min-width: 0;
  height: 58px; min-height: 0;
  padding: 0;
  border: 0; border-radius: 0;
  background: transparent; box-shadow: none; outline: none;
  font-family: var(--font-ui); font-size: 1.0625rem; color: var(--text);
}
input.palette__input:focus { box-shadow: none; }
.palette__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 8px; }
.palette__section {
  padding: 12px 10px 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}
.palette__item {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text2);
  cursor: pointer;
  text-decoration: none;
}
.palette__item:hover { text-decoration: none; }
.palette__item[aria-selected="true"] {
  background: var(--accent-bg); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent-bd);
}
.palette__item > .icon { width: 18px; height: 18px; color: var(--muted); }
.palette__item[aria-selected="true"] > .icon { color: var(--accent); }
.palette__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.palette__title { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__sub { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__sub mark { background: transparent; box-shadow: none; color: var(--text); font-weight: 500; padding: 0; }
.palette__meta { flex: none; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.palette__empty { padding: 26px 16px 22px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.palette__foot {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 10px 16px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-label); color: var(--muted);
}
.palette__foot span { display: inline-flex; align-items: center; gap: 5px; }
.palette__foot .kbd { height: 18px; min-width: 18px; font-size: 10px; }
@media (max-width: 767.98px) {
  dialog.palette { margin-top: calc(8px + env(safe-area-inset-top)); max-height: 76dvh; border-radius: 16px; }
  .palette__foot { display: none; }
}

/* Keyboard shortcuts sheet */
.keys { display: flex; flex-direction: column; margin: 4px 0 0; }
.keys__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.keys__row:last-child { border-bottom: 0; }
.keys__row dt { color: var(--text2); font-size: var(--fs-ui); }
.keys__row dd { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }

/* Toasts (window.toast / Lapri.toast). Kinds: ok, err (alias bad), info, warn. */
.toasts, #toast {
  position: fixed;
  z-index: var(--z-toast);
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: auto; top: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  width: auto; max-width: min(420px, calc(100vw - 32px));
  margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--text);
  pointer-events: none;
}
.toasts:empty, #toast:empty { display: none; }
@media (max-width: 767.98px) {
  .toasts, #toast {
    left: 12px; right: 12px; max-width: none;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
    align-items: stretch;
  }
}
.toasts .t, #toast .t {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 12px 16px 12px 34px;
  border-radius: 12px;
  background: var(--float);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-float);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.45;
  animation: lp-toast-in var(--dur-3) var(--ease-out);
}
.toasts .t::before, #toast .t::before {
  content: ""; position: absolute; left: 15px; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
.toasts .t.ok::before, #toast .t.ok::before { background: var(--c-moss); box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-moss) 18%, transparent); }
.toasts .t.err::before, .toasts .t.bad::before, #toast .t.err::before, #toast .t.bad::before { background: var(--neg); box-shadow: 0 0 0 3px color-mix(in oklch, var(--neg) 18%, transparent); }
.toasts .t.err, .toasts .t.bad, #toast .t.err, #toast .t.bad { border-color: var(--neg-bd); }
.toasts .t.info::before, #toast .t.info::before { background: var(--c-azure); box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-azure) 18%, transparent); }
.toasts .t.warn::before, #toast .t.warn::before { background: var(--warn); }
.toasts .t.is-leaving, #toast .t.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity 200ms, transform 200ms; }
.toasts .toast-action, #toast .toast-action { margin-left: auto; color: var(--accent); font-weight: 600; white-space: nowrap; }
@keyframes lp-toast-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }


/* ==========================================================================
   14. MOTION
       Content fades up 8px over --dur-2, lists stagger by 30ms, sheets slide
       over --dur-3. Cross-page fades use view transitions (Chromium).
       Everything honours prefers-reduced-motion.
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: lp-vt-out var(--dur-2) ease both; }
::view-transition-new(root) { animation: lp-vt-in var(--dur-3) var(--ease-out) both; }
@keyframes lp-vt-out { to { opacity: 0; } }
@keyframes lp-vt-in { from { opacity: 0; transform: translateY(8px); } }
/* Switching themes is a plain cross-fade (Lapri.theme.set adds the class). */
:root.is-theme-shift::view-transition-old(root) { animation: lp-vt-out var(--dur-3) ease both; }
:root.is-theme-shift::view-transition-new(root) { animation: lp-fade var(--dur-3) ease both; }

.main { animation: lp-fade var(--dur-2) var(--ease-out) both; }
@keyframes lp-fade { from { opacity: 0; } }
/* Opt-in: don't put these on an ancestor of a position:fixed element. */
.fade-up { animation: lp-fade-up var(--dur-2) var(--ease-out) both; }
.stagger > * { animation: lp-fade-up var(--dur-2) var(--ease-out) both; }
.stagger > :nth-child(2)  { animation-delay: 30ms; }
.stagger > :nth-child(3)  { animation-delay: 60ms; }
.stagger > :nth-child(4)  { animation-delay: 90ms; }
.stagger > :nth-child(5)  { animation-delay: 120ms; }
.stagger > :nth-child(6)  { animation-delay: 150ms; }
.stagger > :nth-child(7)  { animation-delay: 180ms; }
.stagger > :nth-child(8)  { animation-delay: 210ms; }
.stagger > :nth-child(9)  { animation-delay: 240ms; }
.stagger > :nth-child(10) { animation-delay: 270ms; }
.stagger > :nth-child(n+11) { animation-delay: 300ms; }
@keyframes lp-fade-up { from { opacity: 0; transform: translateY(8px); } }
/* The recording ring breathes. */
.breathe { animation: lp-breathe 2.6s ease-in-out infinite; }
@keyframes lp-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.82; } }
/* A line that draws itself once (the lifeline): set pathLength="1" on the path. */
.draw-in { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lp-draw 1.2s var(--ease-out) forwards; }
@keyframes lp-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* Transitions go to 0s, not a tiny duration: transition-property defaults
     to "all", so a tiny duration would turn every style change into a
     transition. Animations keep 0.01ms so animationend still fires. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  @view-transition { navigation: none; }
  .card--link:hover, a.card:hover { transform: none; }
  .skeleton { animation: none; }
}


/* ==========================================================================
   15. LEGACY COMPATIBILITY
       app.css class names that page markup still uses, re-dressed in the
       new tokens. Page-specific legacy styles live in lapri-legacy.css, which
       the header loads only for views that set no pageCss.
   ========================================================================== */
.card-h, .section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px;
}
.card-h > :first-child, .section-header > :first-child { min-width: 0; }
.card-title { font-family: var(--font-read); font-size: var(--fs-card); font-weight: 500; line-height: 1.3; }
.card-h p, .section-header p { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); max-width: 60ch; }
.card--sub {
  background: var(--quiet-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 12px 16px;
}
.card .card--sub { background: color-mix(in oklch, var(--bg) 40%, transparent); }
.card--sub.card--link:hover { border-color: var(--accent-bd); background: var(--quiet-bg-hi); transform: none; }
.card--quiet { background: var(--bg2); }
.card--flush { padding: 0; }
.card-centered { text-align: center; padding: var(--s6); }
.section + .section { margin-top: var(--gap-section); }
.section > h2, .section-header h2 { font-size: 1.3125rem; }
.empty-state { text-align: center; padding: 48px 24px; color: var(--muted); }
.empty-state h2 { color: var(--text); margin-bottom: 8px; }
.empty-state p { margin-bottom: 18px; }
.empty-state--tight { padding: 24px 0; }
.empty-icon { width: 84px; height: 84px; margin: 0 auto 16px; font-size: 0; }
.empty-icon svg { display: block; width: 100%; height: 100%; }
.form-group { margin-bottom: 20px; }
.form-group > label, .form-group > .label-row label { display: block; margin-bottom: 7px; font-size: var(--fs-sm); font-weight: 500; color: var(--text2); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.settings-table { width: 100%; border-collapse: collapse; }
.settings-table td { padding: 12px 10px; vertical-align: top; }
.settings-table td:first-child { width: 42%; }
.settings-table strong { font-weight: 500; }
.stat-pill {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text2); background: var(--quiet-bg);
}
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-hint { margin-top: 5px; font-size: var(--fs-label); color: var(--muted); }
.entry-body, .det-body, .analysis-body, .qa-a, .rewrite-text, .j-note-body, .rev-body {
  font-family: var(--font-read); font-size: var(--fs-read); line-height: var(--lh-read);
  color: var(--text-read); max-width: var(--measure); overflow-wrap: anywhere;
}
.rewrite-text { white-space: pre-wrap; }
.rev-body, .j-note-body { font-size: var(--fs-ui); line-height: var(--lh-dense); }
/* Legacy modal overlay (div-based) */
.modal-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-card { width: min(440px, 100%); max-height: 80dvh; overflow-y: auto; padding: 24px; border-radius: var(--r-lg); background: var(--float); border: 1px solid var(--border); box-shadow: var(--shadow-float); }
.modal-card h3 { margin-bottom: 14px; }
.modal-card input { margin-bottom: 8px; }
/* Legacy slide-over (div-based) */
.slideover-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--scrim); }
.slideover {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(460px, 100vw); overflow-y: auto; padding: 22px 22px 32px;
  background: var(--float); border-left: 1px solid var(--border); box-shadow: var(--shadow-float);
}
.slideover-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }


/* ==========================================================================
   16. PRINT: Paper colours, no chrome, no glow or grain.
   ========================================================================== */
@media print {
  :root, :root[data-theme] {
    color-scheme: light;
    --bg: #fff; --bg2: #fff; --panel: #fff; --card: #fff; --float: #fff; --well: #fafafa;
    --card-grad: #fff; --card-grad-hi: #fff; --card-shadow: none; --lift: none;
    --text: #1f1a16; --text2: #332b25; --muted: #5a5048; --faint: #8c8279; --text-read: #1f1a16;
    --accent: #8a4610; --hairline: #e3ddd4; --border: #d2cabf; --border-hi: #b9afa3;
    --paper-bg: #fff; --paper-ink: #1f1a16; --paper-muted: #5a5048; --paper-accent: #8a4610; --paper-edge: #d2cabf;
    --shadow-paper: none; --shadow-float: none;
  }
  html, body { background: #fff !important; }
  body::before, body::after,
  .bar, .tabbar, .toasts, #toast, .skip-link, dialog, .menu, .no-print { display: none !important; }
  .main { padding: 0 !important; max-width: none !important; animation: none; }
  a { color: inherit; text-decoration: none; }
  .paper { box-shadow: none; transform: none !important; border: 1px solid var(--paper-edge); }
  .card, .paper { break-inside: avoid; }
}