/* Murof theme v3 "Float" — every surface floats on soft layered light.
   Tokens first; components read tokens only. Animate transform/opacity/filter only. */

/* ---------- Seamless page transitions (zero JS, cross-document) ---------- */
@view-transition { navigation: auto; }

/* ---------- Tokens: Pearl (light) ---------- */
:root {
  color-scheme: light;
  --bg: #eef0f4; --bg-tint-1: #dfe6ff; --bg-tint-2: #e3f6f3;
  --surface: rgb(255 255 255 / .86); --surface-solid: #fff; --surface-2: #f3f5f8; --surface-3: #e9ecf2;
  --border: rgb(15 23 42 / .07); --highlight: rgb(255 255 255 / .9);
  --text: #0f1729; --text-muted: #5f6b80; --text-faint: #8d97a8;
  --accent: #4f5bff; --accent-2: #12b5a6; --on-accent: #fff;
  --accent-soft: color-mix(in oklab, var(--accent) 10%, transparent);
  --glow: color-mix(in oklab, var(--accent) 30%, transparent);
  --pos: #10a35a; --neg: #e5484d; --unread: var(--accent);
  --sh: 222 47% 11%;                       /* shadow hue (hsl triplet) */
  --glass-blur: 18px; --glass-sat: 1.8;

  --font-ui: "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Menlo, monospace;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: .975rem;
  --fs-lg: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --track-tight: -.025em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px;
  --gap-float: 10px;                        /* air between floating cards */
  --r-scale: 1; --density: 1;
  --r-sm: calc(10px * var(--r-scale)); --r-md: calc(16px * var(--r-scale)); --r-lg: calc(22px * var(--r-scale)); --r-xl: calc(28px * var(--r-scale)); --r-pill: 999px;

  /* Layered, physically-plausible elevation: contact + ambient + depth */
  --e-1: 0 0 0 1px var(--border), 0 1px 2px hsl(var(--sh) / .04), 0 4px 10px -2px hsl(var(--sh) / .05), 0 14px 28px -12px hsl(var(--sh) / .08);
  --e-2: 0 0 0 1px var(--border), 0 2px 4px hsl(var(--sh) / .04), 0 12px 24px -6px hsl(var(--sh) / .09), 0 32px 56px -18px hsl(var(--sh) / .16);
  --e-3: 0 0 0 1px var(--border), 0 4px 8px hsl(var(--sh) / .05), 0 24px 48px -12px hsl(var(--sh) / .18), 0 48px 96px -24px hsl(var(--sh) / .22);
  --rim: inset 0 1px 0 var(--highlight);

  --ease-liquid: cubic-bezier(.22,1,.36,1);     /* settle */
  --ease-spring: cubic-bezier(.34,1.4,.64,1);   /* gentle overshoot */
  --ease-glide:  cubic-bezier(.65,0,.35,1);     /* symmetrical, for page morphs */
  --t-fast: 160ms; --t-med: 320ms; --t-slow: 560ms; --t-page: 420ms;
}

/* ---------- Tokens: Night ---------- */
:root[data-theme="night"] {
  color-scheme: dark;
  --bg: #090a0d; --bg-tint-1: #1b1f4d; --bg-tint-2: #0c3a37;
  --surface: rgb(24 26 32 / .82); --surface-solid: #181a20; --surface-2: #1f222a; --surface-3: #282c36;
  --border: rgb(255 255 255 / .07); --highlight: rgb(255 255 255 / .07);
  --text: #f1f3f7; --text-muted: #9aa3b2; --text-faint: #6b7383;
  --accent: #7c86ff; --accent-2: #38e0cf; --on-accent: #0b0c10;
  --glow: color-mix(in oklab, var(--accent) 45%, transparent);
  --pos: #3ddc84; --neg: #ff6b70; --sh: 0 0% 0%;
  --e-1: 0 0 0 1px var(--border), 0 1px 2px hsl(0 0% 0% / .3), 0 8px 20px -6px hsl(0 0% 0% / .45);
  --e-2: 0 0 0 1px var(--border), 0 4px 10px hsl(0 0% 0% / .35), 0 24px 48px -12px hsl(0 0% 0% / .6);
  --e-3: 0 0 0 1px var(--border), 0 8px 16px hsl(0 0% 0% / .4), 0 40px 80px -20px hsl(0 0% 0% / .7);
}
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] {
  color-scheme: dark;
  --bg: #090a0d; --bg-tint-1: #1b1f4d; --bg-tint-2: #0c3a37;
  --surface: rgb(24 26 32 / .82); --surface-solid: #181a20; --surface-2: #1f222a; --surface-3: #282c36;
  --border: rgb(255 255 255 / .07); --highlight: rgb(255 255 255 / .07);
  --text: #f1f3f7; --text-muted: #9aa3b2; --text-faint: #6b7383;
  --accent: #7c86ff; --accent-2: #38e0cf; --on-accent: #0b0c10;
  --glow: color-mix(in oklab, var(--accent) 45%, transparent);
  --pos: #3ddc84; --neg: #ff6b70; --sh: 0 0% 0%;
  --e-1: 0 0 0 1px var(--border), 0 1px 2px hsl(0 0% 0% / .3), 0 8px 20px -6px hsl(0 0% 0% / .45);
  --e-2: 0 0 0 1px var(--border), 0 4px 10px hsl(0 0% 0% / .35), 0 24px 48px -12px hsl(0 0% 0% / .6);
  --e-3: 0 0 0 1px var(--border), 0 8px 16px hsl(0 0% 0% / .4), 0 40px 80px -20px hsl(0 0% 0% / .7);
}}

/* Group name styles (generated per usergroup) */
.ug-admin  { --name-c1: #f43f5e; --name-c2: #fb923c; }
.ug-mod    { --name-c1: #10b981; --name-c2: #14b8a6; }
.ug-indie  { --name-c1: #8b5cf6; --name-c2: #06b6d4; }
.ug-vip    { --name-c1: #f59e0b; --name-c2: #ef4444; }
.ug-member { --name-c1: var(--text); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: var(--fs-md)/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: color-mix(in oklab, var(--accent) 25%, transparent); }
img { max-width: 100%; display: block; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--surface-solid); padding: 8px 12px; border-radius: 10px; }
.muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .sm { font-size: var(--fs-sm); } .xs { font-size: var(--fs-xs); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--s-5); }
.num { font-variant-numeric: tabular-nums; }

/* Aurora: Murof's flowing backdrop. One fixed layer with a static glow plus two pseudo-element curtains.
   Only transform and opacity animate, so it runs on the GPU compositor: no JS, no canvas, no images, no filters,
   no layout or repaint of content. Paused when the tab is hidden; still under reduced motion.
   Themeable: --aurora-1/2/3 (colors) and --aurora-strength. By default they follow each theme's accent and tints. */
:root { --aurora-mix: 30%; --aurora-strength: .8;
  --aurora-1: color-mix(in oklab, var(--accent) var(--aurora-mix), var(--bg-tint-1));
  --aurora-2: color-mix(in oklab, var(--accent-2) var(--aurora-mix), var(--bg-tint-2));
  --aurora-3: color-mix(in oklab, var(--accent) calc(var(--aurora-mix) * .6), var(--bg-tint-2)); }
:root[data-theme="night"] { --aurora-mix: 42%; --aurora-strength: .75; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --aurora-mix: 42%; --aurora-strength: .75; } }
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; opacity: var(--aurora-strength);
  background: radial-gradient(130% 55% at 50% -12%, color-mix(in oklab, var(--aurora-1) 55%, transparent), transparent 70%); }
.ambient::before, .ambient::after { content: ""; position: absolute; inset: -20% -30%;
  will-change: transform, opacity; backface-visibility: hidden; } /* pre-softened multi-stop gradients instead of blur: phones keep 60 fps */
.ambient::before { background:
  radial-gradient(45% 14% at 28% 34%, var(--aurora-1), color-mix(in oklab, var(--aurora-1) 45%, transparent) 45%, transparent 100%),
  radial-gradient(38% 11% at 66% 26%, var(--aurora-2), color-mix(in oklab, var(--aurora-2) 40%, transparent) 50%, transparent 100%),
  radial-gradient(30% 18% at 52% 58%, color-mix(in oklab, var(--aurora-3) 80%, transparent), transparent 100%);
  transform-origin: 40% 40%; animation: aurora-a 54s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.ambient::after { background:
  radial-gradient(42% 12% at 70% 62%, var(--aurora-2), color-mix(in oklab, var(--aurora-2) 40%, transparent) 50%, transparent 100%),
  radial-gradient(34% 10% at 34% 72%, var(--aurora-3), color-mix(in oklab, var(--aurora-3) 40%, transparent) 50%, transparent 100%),
  radial-gradient(26% 16% at 80% 30%, color-mix(in oklab, var(--aurora-1) 70%, transparent), transparent 100%);
  transform-origin: 60% 60%; animation: aurora-b 41s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes aurora-a {
  0%   { transform: translate3d(-6%, -3%, 0) rotate(-9deg) skewX(-8deg) scale(1.05); }
  50%  { transform: translate3d(3%, 2%, 0) rotate(-2deg) skewX(6deg) scale(1.18); opacity: .7; }
  100% { transform: translate3d(7%, -2%, 0) rotate(6deg) skewX(-4deg) scale(1.08); } }
@keyframes aurora-b {
  0%   { transform: translate3d(5%, 3%, 0) rotate(7deg) skewX(6deg) scale(1.12); opacity: .65; }
  50%  { transform: translate3d(-2%, -3%, 0) rotate(1deg) skewX(-7deg) scale(1.02); }
  100% { transform: translate3d(-7%, 1%, 0) rotate(-6deg) skewX(4deg) scale(1.16); opacity: .8; } }
.tab-hidden .ambient::before, .tab-hidden .ambient::after { animation-play-state: paused; }

/* ---------- Floating surfaces ---------- */
.float { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--rim), var(--e-1); }
@supports (backdrop-filter: blur(1px)) { .glass { background: color-mix(in oklab, var(--surface-solid) 72%, transparent); backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur)); } }
.lift { transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-liquid), background-color var(--t-fast); }
@media (hover: hover) { .lift:hover { transform: translateY(-3px); box-shadow: var(--rim), var(--e-2); } }
.lift:active { transform: translateY(0) scale(.99); transition-duration: 90ms; }

/* ---------- Header island ---------- */
.top { position: sticky; top: 12px; z-index: 20; margin: 12px auto 0; max-width: 1160px; padding: 0 var(--s-5); view-transition-name: header; }
.top-in { display: flex; align-items: center; gap: var(--s-3); height: 58px; padding: 0 var(--s-2) 0 var(--s-4); border-radius: var(--r-pill); box-shadow: var(--rim), var(--e-2); background: var(--surface-solid); }
/* Every item in the island sits on the bar's centre line and keeps its label on one line; the nav gives way first (header.js folds extra links into More). */
.top-in > * { flex-shrink: 0; }
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 220px; font: 700 var(--fs-lg)/1.1 var(--font-display); letter-spacing: var(--track-tight); color: var(--text); }
/* The forum name wraps only at spaces, never mid-word: two lines at most, then an ellipsis (full name in the link's title) */
.logo-t { min-width: 0; overflow: hidden; overflow-wrap: normal; word-break: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.logo b { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 15px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px -4px var(--glow), inset 0 1px 0 rgb(255 255 255 / .35); }
.nav { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; margin-left: var(--s-3); position: relative; overflow-x: clip; }  /* safety net: nav text can never paint over search or buttons */
.nav > a, .nav > details > summary { flex: none; display: inline-flex; align-items: center; height: 36px; white-space: nowrap; }
.nav a { position: relative; color: var(--text-muted); padding: 0 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; line-height: 1; transition: color var(--t-fast); }
.nav a:hover { color: var(--text); }
.nav a[aria-current] { color: var(--text); }
.nav a[aria-current]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.nav-more { flex: none; position: relative; margin-left: -6px; }
.nav-more > summary { height: 36px; white-space: nowrap; gap: 4px; padding: 0 10px 0 14px; border-radius: var(--r-pill); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; line-height: 1; }
.nav-more > summary:hover, .nav-more[open] > summary, .nav-more.is-on > summary { color: var(--text); }
.nav-more > summary svg { width: 15px; height: 15px; transition: transform var(--t-med) var(--ease-spring); }
.nav-more[open] > summary svg { transform: rotate(180deg); }
.nav-more .menu-pop { left: 0; right: auto; transform-origin: top left; min-width: 200px; max-height: calc(100vh - 120px); overflow-y: auto; }
.nav-more .menu-pop a { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.nav-more .menu-pop a:hover { color: var(--text); background: var(--surface-2); }
.nav-more .menu-pop a[aria-current] { color: var(--text); background: var(--accent-soft); }
.nav-more .menu-pop a[aria-current]::before { display: none; }
.nav-more[hidden] { display: none; }
/* Phones: the bar's links live behind a menu icon at the right edge (header.js), so every link stays one tap away */
@media (max-width: 760px) {
  .nav-more { order: 9; margin-left: 0; }
  .nav-more > summary { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .nav-more > summary:hover, .nav-more[open] > summary { background: var(--surface-2); }
  .nav-more > summary svg { width: 22px; height: 22px; }
  .nav-more[open] > summary svg { transform: none; }
  .nav-more .menu-pop { left: auto; right: 0; transform-origin: top right; min-width: 220px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 120px); }
  .nav-more .menu-pop a { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  .nav-more .menu-pop details > summary { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }
  .nav-more .menu-pop details > .menu-pop { position: static; min-width: 0; max-width: none; padding: 0 0 4px 12px; box-shadow: none; background: none; transform: none; opacity: 1; }
}
/* NEW: the activity feed's name everywhere, with a soft accent glow */
.new-glow { color: var(--accent) !important; font-weight: 800 !important; letter-spacing: .08em; text-shadow: 0 0 10px color-mix(in oklab, var(--accent) 55%, transparent), 0 0 22px color-mix(in oklab, var(--accent) 30%, transparent); }
h1.new-glow, h1 .new-glow { letter-spacing: .06em; }
@media (prefers-reduced-motion: no-preference) {
  .new-glow { animation: new-glow 3.6s var(--ease-liquid, ease-in-out) infinite alternate; }
  @keyframes new-glow { from { text-shadow: 0 0 6px color-mix(in oklab, var(--accent) 35%, transparent), 0 0 14px color-mix(in oklab, var(--accent) 18%, transparent); } to { text-shadow: 0 0 12px color-mix(in oklab, var(--accent) 65%, transparent), 0 0 26px color-mix(in oklab, var(--accent) 35%, transparent); } }
}
.search { flex: 0 1000 300px; min-width: 180px; margin-left: auto; position: relative; }
.search input { width: 100%; height: 40px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); padding: 0 52px 0 38px; font: inherit; font-size: var(--fs-sm); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow var(--t-med) var(--ease-liquid), background-color var(--t-fast); }
.search input::placeholder { color: var(--text-faint); }
.search input:focus { outline: none; background: var(--surface-solid); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft); }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 600 11px/22px var(--font-ui); padding: 0 7px; border-radius: 6px; color: var(--text-faint); background: var(--surface-solid); box-shadow: inset 0 0 0 1px var(--border); pointer-events: none; }
.me { display: flex; align-items: center; gap: 2px; }
.me .btn, .me button { white-space: nowrap; }
/* Tablet widths: search becomes a round button that opens over the nav when focused */
@media (max-width: 1100px) and (min-width: 761px) {
  .search { flex: 0 0 40px; min-width: 40px; transition: flex-basis var(--t-med) var(--ease-liquid); }
  .search input { padding: 0 0 0 38px; cursor: pointer; }
  .search input::placeholder { opacity: 0; }
  .search kbd { display: none; }
  .search:focus-within { flex-basis: 260px; }
  .search:focus-within input { padding-right: 14px; cursor: text; }
  .search:focus-within input::placeholder { opacity: 1; }
  .top-in:has(.search:focus-within) .nav { visibility: hidden; }
  .search svg { left: 12px; }
}
@media (max-width: 1100px) {
  .me .btn[data-install] span { display: none; }
  .me .btn[data-install] { width: 34px; padding: 0; }
}
@media (max-width: 360px) {
  .me.guest .btn.sm { padding: 0 12px; }
}
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-muted); cursor: pointer; position: relative; transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-spring); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 20px; height: 20px; }
.badge { position: absolute; top: 6px; right: 6px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--neg); color: #fff; font: 700 10px/17px var(--font-ui); text-align: center; box-shadow: 0 0 0 2px var(--surface-solid); }

/* ---------- Avatars, names, pips, rep ---------- */
.av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 14px; background: linear-gradient(135deg, var(--a1, #64748b), var(--a2, #334155)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 4px 10px -3px hsl(var(--sh) / .25); }
.av.sm { width: 28px; height: 28px; font-size: 11px; } .av.xs { width: 22px; height: 22px; font-size: 9px; }
.av.lg { width: 84px; height: 84px; font-size: 30px; box-shadow: 0 0 0 4px var(--surface-solid), 0 14px 30px -10px hsl(var(--sh) / .4); }
.uname { font-weight: 700; background: linear-gradient(90deg, var(--name-c1, var(--text)), var(--name-c2, var(--name-c1, var(--text)))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--surface-3); }
.pips i.on { background: var(--name-c1, var(--accent)); box-shadow: 0 0 6px color-mix(in oklab, var(--name-c1, var(--accent)) 50%, transparent); }
.pips.diamond i { border-radius: 1.5px; transform: rotate(45deg) scale(.82); }
.pips.bar i { width: 4px; height: 11px; border-radius: 2px; }
.rep { display: inline-flex; align-items: center; gap: 8px; }
.rep-bar { display: inline-flex; gap: 2px; }
.rep-bar i { width: 8px; height: 5px; border-radius: 3px; background: var(--surface-3); }
.rep-bar i.on { background: var(--pos); }
.rep b { font-size: var(--fs-xs); color: var(--pos); }

/* ---------- Page ---------- */
.page { display: grid; gap: var(--s-6); padding: var(--s-7) 0 120px; }
@media (min-width: 1080px) { .page.has-side { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .side { position: sticky; top: 96px; } }
.greet { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-top: var(--s-7); }
.greet h1 { font: 700 var(--fs-xl)/1.15 var(--font-display); letter-spacing: var(--track-tight); margin: 0 0 6px; }
.greet p { margin: 0; color: var(--text-muted); }
.home-greet { align-items: start; }
.home-greet .greet-tools { min-height: calc(var(--fs-xl) * 1.15); } /* Mark all read sits on the title line, not the lead line */

/* Segmented control: a floating pill slides between options */
.seg { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--rim), var(--e-1); position: relative; }
.seg a { position: relative; z-index: 1; padding: 8px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); transition: color var(--t-fast); }
.seg a[aria-current] { color: var(--text); }
.seg a[aria-current]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface-solid); box-shadow: var(--e-1); }

/* ---------- Board index: each forum is its own floating card ---------- */
.cat { margin-bottom: var(--s-6); }
.cat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 0 6px var(--s-3); font: 650 var(--fs-xs)/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); user-select: none; }
.cat > summary::-webkit-details-marker { display: none; }
.cat > summary:hover { color: var(--text-muted); }
.cat > summary .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cat, var(--accent)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cat, var(--accent)) 18%, transparent); }
.cat > summary .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.cat > summary .chev { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease-spring); }
.cat:not([open]) > summary .chev { transform: rotate(-90deg); }
:root { interpolate-size: allow-keywords; }
.cat::details-content { height: 0; overflow: clip; transition: height var(--t-med) var(--ease-liquid), content-visibility var(--t-med) allow-discrete; }
.cat[open]::details-content { height: auto; overflow: visible; }
.stack { display: grid; gap: var(--gap-float); padding: 2px; }

.forum { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 112px 250px; align-items: center; gap: var(--s-4); padding: calc(18px * var(--density)) var(--s-5); }
.f-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); position: relative; box-shadow: inset 0 0 0 1px var(--border); transition: transform var(--t-med) var(--ease-spring); }
.forum:hover .f-ico { transform: scale(1.06) rotate(-3deg); }
.f-ico svg { width: 22px; height: 22px; }
.unread .f-ico { color: var(--on-accent); background: linear-gradient(135deg, var(--cat, var(--accent)), color-mix(in oklab, var(--cat, var(--accent)) 60%, var(--accent-2))); box-shadow: 0 8px 18px -6px color-mix(in oklab, var(--cat, var(--accent)) 60%, transparent), inset 0 1px 0 rgb(255 255 255 / .3); }
.f-title { font: 650 var(--fs-lg)/1.3 var(--font-display); letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.f-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.unread .f-title::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--unread); box-shadow: 0 0 0 3px var(--accent-soft); vertical-align: middle; }
.f-desc { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; overflow-wrap: anywhere; }
.forum > div { min-width: 0; }
.subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; position: relative; z-index: 1; }
.subs a { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); background: var(--surface-2); padding: 3px 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--border); transition: color var(--t-fast), background-color var(--t-fast); }
.subs a:hover { color: var(--accent); background: var(--accent-soft); }
.f-stats { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
.f-stats b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.last { display: flex; gap: 12px; align-items: center; min-width: 0; position: relative; z-index: 1; padding: 8px 10px; margin: -8px -10px; border-radius: var(--r-md); transition: background-color var(--t-fast); }
.last:hover { background: var(--surface-2); }
.last > div { min-width: 0; }
.last .t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-sm); font-weight: 600; color: var(--text); overflow: hidden; overflow-wrap: anywhere; }
.last .m { font-size: var(--fs-xs); color: var(--text-faint); }

@media (max-width: 860px) {
  .forum { grid-template-columns: 42px minmax(0, 1fr); gap: 4px var(--s-3); padding: var(--s-4); }
  .f-ico { width: 42px; height: 42px; grid-row: span 2; align-self: start; }
  .f-stats { grid-column: 2; display: flex; gap: var(--s-3); font-size: var(--fs-xs); }
  .f-stats br { display: none; }
  .last { grid-column: 2; margin: 6px -10px -8px; }
  .last .av { width: 24px; height: 24px; font-size: 9px; }
}

/* ---------- Side panels ---------- */
.panel { padding: var(--s-5); margin-bottom: var(--gap-float); }
.panel h3 { margin: 0 0 var(--s-3); font: 650 var(--fs-xs)/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.online { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-sm); }
.faces { display: flex; margin-bottom: var(--s-3); } .faces .av { margin-right: -5px; box-shadow: 0 0 0 2px var(--surface-solid); }  /* overlap without covering the next face's initials */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); }
.stat b { display: block; font: 700 var(--fs-lg)/1.2 var(--font-display); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--fs-xs); color: var(--text-faint); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-xs); }

/* ---------- Buttons & chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: var(--surface-solid); color: var(--text); font: 650 var(--fs-sm)/1 var(--font-ui); white-space: nowrap; cursor: pointer; box-shadow: var(--rim), var(--e-1); transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-liquid); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--rim), var(--e-2); }
.btn:active { transform: scale(.96); transition-duration: 90ms; }
.btn.primary { color: var(--on-accent); background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, #fff), var(--accent)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 1px 2px hsl(var(--sh) / .2), 0 8px 20px -6px var(--glow); }
.btn.primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 2px 4px hsl(var(--sh) / .2), 0 14px 30px -8px var(--glow); }
.btn svg { width: 16px; height: 16px; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font: 650 var(--fs-xs)/1 var(--font-ui); white-space: nowrap; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); vertical-align: middle; }
.chip.teal { background: color-mix(in oklab, var(--accent-2) 14%, transparent); color: color-mix(in oklab, var(--accent-2) 75%, var(--text)); }
.chip.ghost { background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }

/* ---------- Thread page ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--fs-sm); color: var(--text-faint); padding-top: var(--s-7); }
.crumbs > *, .crumb > :not(.sep) { min-width: 0; overflow-wrap: anywhere; }
.crumb { display: inline-flex; align-items: first baseline; gap: 6px; max-width: 100%; }
.crumb > .sep { flex: none; }
.crumbs a { color: var(--text-muted); padding: 2px 8px; border-radius: var(--r-pill); transition: background-color var(--t-fast), color var(--t-fast); }
.crumbs a:hover { background: var(--surface); color: var(--text); }
.thead { padding: var(--s-6) var(--s-6); margin: var(--s-4) 0 var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: end; justify-content: space-between; }
.thead > div { min-width: 0; }
.thead h1 { margin: 0 0 var(--s-3); font: 700 var(--fs-xl)/1.15 var(--font-display); letter-spacing: var(--track-tight); overflow-wrap: anywhere; }
.thead .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: var(--fs-sm); color: var(--text-muted); }
.thead .meta > * { min-width: 0; overflow-wrap: anywhere; }
.pager { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.pager a, .pager span { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); transition: background-color var(--t-fast), color var(--t-fast); }
.pager a:hover { color: var(--text); background: var(--surface-solid); }
.pager [aria-current] { background: var(--surface-solid); color: var(--text); box-shadow: var(--e-1); }

.posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } /* the column never grows past the page on small phones */
.post { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0; padding: 8px; scroll-margin-top: 100px; }
.post:target { box-shadow: var(--rim), 0 0 0 2px var(--accent), var(--e-2); }

/* Identity card floats inside the post */
.ident { position: relative; overflow: hidden; border-radius: calc(var(--r-lg) - 6px); background: var(--surface-2); padding: var(--s-5) var(--s-4); text-align: center; box-shadow: inset 0 0 0 1px var(--border); align-self: start; }
.ident::before { content: ""; position: absolute; inset: 0 0 auto; height: 92px; background: var(--banner, linear-gradient(135deg, var(--name-c1, var(--accent)), var(--name-c2, var(--accent-2)))); background-size: cover; background-position: center; }
.ident::after { content: ""; position: absolute; inset: 0 0 auto; height: 92px; background: linear-gradient(to bottom, transparent 20%, var(--surface-2)); }
.ident > * { position: relative; z-index: 1; }
.ident .av.lg { margin: 16px auto 12px; }
.ident .uname { font-size: var(--fs-lg); }
.utitle { font-size: var(--fs-xs); color: var(--text-muted); margin: 2px 0 10px; }
.rank { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; margin-bottom: 10px; }
.ufacts { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--border); text-align: left; font-size: var(--fs-xs); }
.ufacts dt { color: var(--text-faint); } .ufacts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ux { position: absolute; opacity: 0; pointer-events: none; } .ux-lbl { display: none; }

.pbody { padding: var(--s-4) var(--s-6) var(--s-3); display: flex; flex-direction: column; min-width: 0; }
.phead { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--s-3); }
.phead a { color: var(--text-faint); font-weight: 600; }
.content { font-size: 1.0125rem; line-height: 1.7; min-width: 0; overflow-wrap: anywhere; }
.content p { margin: 0 0 var(--s-4); }
.content a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-med) var(--ease-liquid); }
.content a:hover { background-size: 100% 1px; }
.content blockquote { margin: 0 0 var(--s-4); padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--border); font-size: var(--fs-sm); }
.content blockquote cite { display: block; font-style: normal; font-weight: 700; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 4px; }
.content pre { margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: #0d1117; color: #e6edf3; font: var(--fs-sm)/1.6 var(--font-mono); overflow-x: auto; box-shadow: var(--e-1); }
.shot { aspect-ratio: 16/9; margin: 0 0 var(--s-4); border-radius: var(--r-md); display: grid; place-items: center; color: rgb(255 255 255 / .55); font-weight: 700; letter-spacing: .12em; font-size: var(--fs-sm); background: radial-gradient(120% 90% at 20% 10%, #4338ca, transparent 60%), radial-gradient(90% 80% at 90% 90%, #f59e0b, transparent 55%), #0f766e; box-shadow: var(--e-2); }
.sig { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-faint); max-height: 160px; overflow: hidden; }

.actions { display: flex; flex-wrap: wrap; gap: 2px; margin-top: var(--s-3); }
.act { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-muted); font: 600 var(--fs-sm)/1 var(--font-ui); cursor: pointer; transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-spring); }
.act:hover { background: var(--surface-2); color: var(--text); } .act:active { transform: scale(.93); }
.act svg { width: 16px; height: 16px; }
.act .n { font-variant-numeric: tabular-nums; }
.act.end { margin-left: auto; }
.act[aria-pressed="true"] { color: var(--pos); background: color-mix(in oklab, var(--pos) 12%, transparent); }
.act.like[aria-pressed="true"] { color: var(--neg); background: color-mix(in oklab, var(--neg) 10%, transparent); }
.act[aria-pressed="true"] svg { animation: pop 520ms var(--ease-spring); }
@keyframes pop { 30% { transform: scale(1.5) rotate(-10deg); } 60% { transform: scale(.9); } }

/* Optimistic new post: appears instantly, settles in like liquid */
.post.fresh { animation: settle var(--t-slow) var(--ease-spring) both; }
.post.fresh .phead span::after { content: " · sending"; color: var(--accent); }
.post.fresh.sent .phead span::after { content: " · just now"; color: var(--text-faint); }
@keyframes settle { from { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(6px); } }

/* Reply dock: a floating glass pill that grows when you focus it */
.dock { position: fixed; z-index: 15; left: 50%; bottom: 18px; width: min(560px, calc(100% - 28px)); transform: translateX(-50%); display: flex; gap: 8px; align-items: flex-end; padding: 8px; border-radius: 28px; box-shadow: var(--rim), var(--e-3); transition: width var(--t-slow) var(--ease-liquid), border-radius var(--t-med); view-transition-name: dock; }
.dock:focus-within { width: min(780px, calc(100% - 28px)); border-radius: 24px; }
.dock textarea { flex: 1; resize: none; border: 0; background: transparent; color: var(--text); padding: 11px 14px; font: inherit; min-height: 44px; max-height: 36vh; field-sizing: content; }
.dock textarea:focus { outline: none; }
.dock textarea::placeholder { color: var(--text-faint); }
.dock .btn { height: 44px; }

/* Mobile tab bar: floating glass pill */
.tabbar { display: none; }
@media (max-width: 760px) {
  /* Phones keep desktop's rhythm: the big spacing steps shrink with the screen, so gaps, card padding and gutters read the same */
  :root { --s-5: 16px; --s-6: 20px; --s-7: 24px; --s-8: 36px; --gap-float: 8px; }
  /* Header: same 12px gutter as the page, and a backdrop strip above the pill so scrolled cards never show over it */
  .top { top: 0; margin-top: 0; padding: calc(8px + env(safe-area-inset-top)) 12px 0; background: linear-gradient(to bottom, var(--bg) calc(8px + env(safe-area-inset-top)), transparent 0); }
  .top-in { height: 54px; padding-left: 14px; }
  .nav, .search, .me .icon-btn:not(.keep) { display: none; }
  .me, .me.guest { margin-left: auto; }
  .logo { flex-shrink: 1; min-width: 0; font-size: var(--fs-md, 17px); }
  .me.guest { gap: 6px; }
  /* Guests: Install app moves into the menu (header.js adds it there), so the forum name keeps its room */
  .top-in:has(.me.guest) { gap: var(--s-2); }
  .me.guest .btn[data-install] { display: none; }
  .nav-more .nav-install { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); font: 600 var(--fs-sm)/1.2 var(--font-ui); text-align: left; cursor: pointer; }
  .nav-more .nav-install:hover { color: var(--text); background: var(--surface-2); }
  .nav-more .nav-install svg { width: 18px; height: 18px; flex: none; }
  .wrap { padding: 0 12px; }
  .greet { padding-top: var(--s-6); }
  .tabbar { display: flex; justify-content: space-around; position: fixed; z-index: 15; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 62px; padding: 0 6px; border-radius: var(--r-pill); box-shadow: var(--rim), var(--e-3); view-transition-name: tabbar; }
  .tabbar a { flex: 1; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--text-faint); font: 600 10px/1 var(--font-ui); border-radius: var(--r-pill); }
  .tabbar a[aria-current] { color: var(--accent); }
  .tabbar svg { width: 22px; height: 22px; }
  body.thread .tabbar { display: none; }
  .dock { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .forum { padding: 14px; }  /* forum cards: same padding-to-width feel as desktop */
  .thead { padding: var(--s-4); }
  .post { grid-template-columns: minmax(0, 1fr); padding: 6px; }
  .ident { text-align: left; padding: 10px 12px; }
  .ident::before { height: 100%; opacity: .18; } .ident::after { display: none; }
  .ident .row { display: flex; align-items: center; gap: 12px; }
  .ident .who { flex: 1; min-width: 0; }
  .ident .av.lg { width: 44px; height: 44px; font-size: 16px; margin: 0; box-shadow: 0 0 0 2px var(--surface-solid); }
  .ident .uname { font-size: var(--fs-md); }
  .utitle { margin: 0; } .rank { flex-direction: row; margin: 4px 0 2px; }
  .ux-lbl { display: inline-flex; cursor: pointer; font: 700 var(--fs-xs)/1 var(--font-ui); color: var(--text-muted); padding: 8px 12px; border-radius: var(--r-pill); background: var(--surface-solid); box-shadow: var(--e-1); }
  .ux:not(:checked) ~ .ufacts { display: none; }
  .pbody { padding: var(--s-4) var(--s-3) var(--s-2); }
  .page { padding-bottom: 110px; }
}

/* ---------- Footer & theme switch ---------- */
.footer { padding: var(--s-6) 0 120px; color: var(--text-faint); font-size: var(--fs-xs); }
.footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
/* Phones: the footer clears the floating tab bar (62px + 12px) and the phone's home bar, so the credit line is never behind it */
@media (max-width: 760px) { .footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } }
/* Touch phones zoom the whole page in when a field under 16px gets focus (iOS), which leaves every gap looking bigger and the
   page cut off on the right. Fields keep 16px text on touch phones so the page never zooms. */
@media (max-width: 760px) and (pointer: coarse) { input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, select { font-size: 16px !important; } }
.theme-pick { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--rim), var(--e-1); }
.theme-pick button { border: 0; background: transparent; color: var(--text-muted); font: 600 var(--fs-xs)/1 var(--font-ui); padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer; }
.theme-pick button[aria-pressed="true"] { background: var(--surface-solid); color: var(--text); box-shadow: var(--e-1); }

/* ---------- Motion layer ---------- */
/* Arrival: content floats up into place, staggered */
@keyframes float-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.rise { animation: float-in var(--t-slow) var(--ease-liquid) both; animation-delay: calc(var(--i, 0) * 40ms); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: float-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
  /* Page morph: old page sinks and blurs away, new page floats up; header, dock and tab bar stay put */
  ::view-transition-group(*) { animation-duration: var(--t-page); animation-timing-function: var(--ease-liquid); }
  ::view-transition-old(root) { animation: vt-out 240ms var(--ease-glide) both; }
  ::view-transition-new(root) { animation: vt-in var(--t-page) var(--ease-liquid) both; }
  @keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(16px) scale(1.01); filter: blur(6px); } }
  /* The theme switch reveals the new theme as an expanding circle (JS sets --x/--y) */
  .vt-theme::view-transition-old(root) { animation: none; }
  .vt-theme::view-transition-new(root) { animation: theme-wipe 640ms var(--ease-liquid) both; }
  @keyframes theme-wipe { from { clip-path: circle(0 at var(--x, 50%) var(--y, 0)); } to { clip-path: circle(150vmax at var(--x, 50%) var(--y, 0)); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation: none !important; transition-duration: 1ms !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 700px) {
  /* Small screens: no blur in page transitions or entrance animations (blur is the costliest effect on phone GPUs). */
  @keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(16px) scale(1.01); } }
  @keyframes settle { from { opacity: 0; transform: translateY(24px) scale(.97); } }
}