/* css/tokens.css */
/* PopChat Next: design tokens.
   Grape/plum "Pop" look, kept from the old site, with one rule carried over:
   the pop gradient is LOUD, so it is budgeted to creation controls and the brand
   mark only. Everything else earns attention with weight and border.
   Places (clubs, the wordmark) get Righteous; people and UI text get the system stack.
   Theme: follows the OS. <html data-theme="light|dark"> overrides it. One axis only.
   The looks (looks.css + look-a.css, look-a-lite.css, look-c.css) override these tokens
   under :root[data-look]; nothing here changes when no look is set. */

@font-face {
  font-family: "Righteous";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/righteous-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Righteous";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/righteous-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* ---- brand (same in both themes) ---- */
  --grape: #7A3BFF;
  --coral: #FF4D8D;
  --amber: #FF9A3D;
  --pop-grad: linear-gradient(120deg, #7A3BFF 0%, #FF4D8D 55%, #FF9A3D 100%);
  --pop-ring: conic-gradient(from 200deg, #7A3BFF, #FF4D8D, #FF9A3D, #7A3BFF);
  --live: #FF4D8D;           /* the live dot; coral reads "now" */

  /* ---- type ---- */
  --font-display: "Righteous", ui-rounded, system-ui, sans-serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;   /* inputs: 16px stops iOS zooming on focus */
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --lh-tight: 1.2;
  --lh: 1.45;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ---- space (4/8/12/16/24, plus two big steps for page rhythm) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --gutter: 16px;

  /* ---- radii ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- hit targets ---- */
  --hit-sm: 32px;
  --hit: 44px;
  --hit-lg: 52px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.3, .7, .25, 1.05);
  --dur-1: .12s;
  --dur-2: .2s;
  --dur-3: .34s;
  --dur-4: .6s;

  /* ---- layout ---- */
  --rail-w: 248px;
  --aside-w: 320px;
  --main-w: 640px;
  --tabbar-h: 60px;
  --topbar-h: 56px;

  /* ---- category colours: pops carry their own colour, chrome stays quiet ---- */
  --cat-game: #6C3DF4;
  --cat-toy: #DB2777;
  --cat-tool: #4263EB;
  --cat-learn: #C2410C;
  --cat-data: #0D9488;
  --cat-create: #16A34A;

  /* ---- LIGHT (paper + plum ink) ---- */
  --bg: #FBF9FF;
  --bg-deep: #F3EFFA;
  --surface: #FFFFFF;
  --surface-2: #F4F0FB;
  --surface-3: #EAE4F5;
  --text: #1D1433;
  --muted: #6E6685;
  --faint: #8F88A3;
  --border: rgba(29, 20, 51, .10);
  --border-strong: rgba(29, 20, 51, .22);
  --primary: #7A3BFF;
  --primary-hover: #6A2EE8;
  --primary-press: #5A20D0;
  --accent-text: #6A2EE8;
  --accent-wash: rgba(122, 59, 255, .09);
  --ink: #1D1433;              /* strong buttons: ink on paper */
  --on-ink: #FFFFFF;
  --bubble-mine: #EEE6FF;
  --bubble-theirs: #FFFFFF;
  --success: #0F9F6E;
  --warning: #B7791F;
  --danger: #D92D3A;
  --danger-wash: rgba(217, 45, 58, .08);
  --focus: 0 0 0 3px rgba(122, 59, 255, .35);
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 0 0 1px rgba(29, 20, 51, .10), 0 1px 2px rgba(29, 20, 51, .08);
  --shadow-pop: none;
  --scrim: rgba(29, 20, 51, .45);
}

/* ---- DARK (plum, never neutral grey) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-game: #9D7BFF; --cat-toy: #F472B6; --cat-tool: #7C93FF;
    --cat-learn: #F0A544; --cat-data: #2DD4BF; --cat-create: #57D98A;
    --bg: #0F0B1D; --bg-deep: #08050F;
    --surface: #181129; --surface-2: #221A38; --surface-3: #2E2547;
    --text: #F2EEFB; --muted: #A79FBE; --faint: #8A82A0;
    --border: rgba(200, 182, 255, .11); --border-strong: rgba(200, 182, 255, .24);
    --primary: #9B6BFF; --primary-hover: #8A5BFF; --primary-press: #7A48F0;
    --accent-text: #BBA6FF; --accent-wash: rgba(155, 107, 255, .14);
    --ink: #F2EEFB; --on-ink: #120C22;
    --bubble-mine: #34245E; --bubble-theirs: #221A38;
    --success: #34D399; --warning: #E0B24C; --danger: #F2555F; --danger-wash: rgba(242, 85, 95, .12);
    --focus: 0 0 0 3px rgba(155, 107, 255, .5);
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: 0 0 0 1px rgba(255, 255, 255, .10), 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-pop: none;
    --scrim: rgba(4, 2, 10, .66);
  }
}
:root[data-theme="dark"] {
  --cat-game: #9D7BFF; --cat-toy: #F472B6; --cat-tool: #7C93FF;
  --cat-learn: #F0A544; --cat-data: #2DD4BF; --cat-create: #57D98A;
  --bg: #0F0B1D; --bg-deep: #08050F;
  --surface: #181129; --surface-2: #221A38; --surface-3: #2E2547;
  --text: #F2EEFB; --muted: #A79FBE; --faint: #8A82A0;
  --border: rgba(200, 182, 255, .11); --border-strong: rgba(200, 182, 255, .24);
  --primary: #9B6BFF; --primary-hover: #8A5BFF; --primary-press: #7A48F0;
  --accent-text: #BBA6FF; --accent-wash: rgba(155, 107, 255, .14);
  --ink: #F2EEFB; --on-ink: #120C22;
  --bubble-mine: #34245E; --bubble-theirs: #221A38;
  --success: #34D399; --warning: #E0B24C; --danger: #F2555F; --danger-wash: rgba(242, 85, 95, .12);
  --focus: 0 0 0 3px rgba(155, 107, 255, .5);
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 0 0 1px rgba(255, 255, 255, .10), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop: none;
  --scrim: rgba(4, 2, 10, .66);
}

/* ---- reduced motion: durations collapse, loops become stills (see .cover) ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   CLUB MESH WALLPAPERS: four radial colour fields over a base coat,
   kept verbatim from the old site. A club with no wallpaper gets one
   deterministically from its id. They are identity, not decoration,
   which is why they live with the tokens.
   ============================================================ */
.mesh { position: relative; isolation: isolate; background-color: var(--mesh-base, #4A3AB8); background-size: cover; background-position: center; }
/* a member-uploaded wallpaper arrives inline (partials "wall"); keep white text legible on any photo */
.mesh[style*="background-image"]:not(.mesh-chip, .mesh-dot)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--wall-scrim, linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 100%));
}
.mesh-chip[style*="background-image"] { box-shadow: inset 0 0 0 40px rgba(0,0,0,.22); text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.mesh-aurora { --mesh-base: #4A3AB8; background-color: #4A3AB8; background-image:
  radial-gradient(at 12% 18%, #7C5CFF 0, transparent 55%),
  radial-gradient(at 86% 10%, #3EC5FF 0, transparent 48%),
  radial-gradient(at 80% 92%, #FF6FA3 0, transparent 52%),
  radial-gradient(at 14% 94%, #35D0BA 0, transparent 46%); }
.mesh-sherbet { --mesh-base: #F2652F; background-color: #F2652F; background-image:
  radial-gradient(at 16% 14%, #FFC24B 0, transparent 52%),
  radial-gradient(at 88% 18%, #FF5E8E 0, transparent 55%),
  radial-gradient(at 78% 90%, #FFDD9A 0, transparent 50%),
  radial-gradient(at 8% 88%, #E8443C 0, transparent 48%); }
.mesh-tidepool { --mesh-base: #0E7F98; background-color: #0E7F98; background-image:
  radial-gradient(at 18% 16%, #35D0BA 0, transparent 52%),
  radial-gradient(at 88% 14%, #2E7DEA 0, transparent 50%),
  radial-gradient(at 76% 92%, #8FE3C0 0, transparent 48%),
  radial-gradient(at 10% 90%, #0A5E7A 0, transparent 55%); }
.mesh-meadow { --mesh-base: #2E9E5B; background-color: #2E9E5B; background-image:
  radial-gradient(at 14% 18%, #7FD692 0, transparent 50%),
  radial-gradient(at 86% 12%, #D8EC6A 0, transparent 46%),
  radial-gradient(at 82% 88%, #2FB5A0 0, transparent 52%),
  radial-gradient(at 10% 92%, #1E7A46 0, transparent 50%); }
.mesh-dusk { --mesh-base: #2A2350; background-color: #2A2350; background-image:
  radial-gradient(at 16% 14%, #6C3DF4 0, transparent 55%),
  radial-gradient(at 88% 20%, #B84A8C 0, transparent 50%),
  radial-gradient(at 74% 92%, #4A3AB8 0, transparent 55%),
  radial-gradient(at 8% 90%, #191347 0, transparent 52%); }
.mesh-peach { --mesh-base: #F98C6B; background-color: #F98C6B; background-image:
  radial-gradient(at 14% 16%, #FFD9C0 0, transparent 50%),
  radial-gradient(at 88% 14%, #F26D9C 0, transparent 52%),
  radial-gradient(at 80% 90%, #FFF0B8 0, transparent 46%),
  radial-gradient(at 12% 88%, #E85D3D 0, transparent 52%); }
.mesh-space { --mesh-base: #141433; background-color: #141433; background-image:
  radial-gradient(at 18% 20%, #3B2E8C 0, transparent 58%),
  radial-gradient(at 86% 12%, #0E7F98 0, transparent 48%),
  radial-gradient(at 78% 92%, #6C3DF4 0, transparent 46%),
  radial-gradient(at 6% 90%, #B84A8C 0, transparent 38%); }
.mesh-citrus { --mesh-base: #F2A93B; background-color: #F2A93B; background-image:
  radial-gradient(at 16% 16%, #FFE08A 0, transparent 52%),
  radial-gradient(at 88% 16%, #FF8C42 0, transparent 52%),
  radial-gradient(at 78% 90%, #A5CF5E 0, transparent 44%),
  radial-gradient(at 10% 90%, #E8712D 0, transparent 52%); }
.mesh-grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) .6px, transparent .6px);
  background-size: 5px 5px;
}
.mesh-grain[style*="background-image"]::after { display: none; }

/* css/components.css */
/* PopChat Next: components. Needs tokens.css first.
   Rule for buttons, kept from the old site: creation earns the pop gradient;
   everything else earns attention with weight and border, never with colour.
   Mobile first: every tappable thing is at least --hit (44px) unless it says -sm. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: var(--fw-medium) var(--fs-base)/var(--lh) var(--font-sans);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: -.01em; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 8px 12px; border-radius: var(--r-sm); }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .005em; }
.link { color: var(--accent-text); font-weight: var(--fw-semi); }
.link:hover { text-decoration: underline; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.grow { flex: 1; min-width: 0; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

/* ---------- icons (inline sprite, see templates/partials.html) ---------- */
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 26px; height: 26px; }
.ic-fill { fill: currentColor; stroke: none; }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--text); }
/* logo.svg is the original animated mark: a 34-unit P inside a 62-unit canvas that leaves
   room for its breathing halos. Draw the canvas big and pull the margins in, so the P
   itself is the size we mean and the halos spill over the neighbours. */
.brand img { --logo: 56px; width: var(--logo); height: var(--logo); margin: calc(var(--logo) * -.2); flex: none; max-width: none; }
.brand-word { letter-spacing: .01em; }

/* ---------- buttons ---------- */
.btn {
  --btn-h: var(--hit);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-weight: var(--fw-bold); font-size: var(--fs-base); line-height: 1; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
  user-select: none; text-decoration: none;
}
.btn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--text) 35%, transparent); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { box-shadow: var(--focus); border-radius: var(--r-pill); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* weight: the main non-creation action on a screen (Join, Follow, Send, Sign in) */
.btn-strong { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn-strong:hover { background: color-mix(in srgb, var(--ink) 86%, var(--primary)); border-color: transparent; }

/* the ONE gradient: Create, Build, Publish. Never anywhere else. */
.btn-create {
  position: relative; overflow: hidden; border: 0; color: #fff;
  background: var(--pop-grad); box-shadow: var(--shadow-pop);
}
.btn-create:hover { background: var(--pop-grad); filter: saturate(1.08) brightness(1.04); }
.btn-create::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform var(--dur-4) var(--ease-out);
}
.btn-create:hover::after { transform: translateX(120%); }

.btn-quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn-quiet:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: transparent; }
.btn-danger:hover { background: var(--danger-wash); border-color: var(--danger); }
.btn-sm { --btn-h: var(--hit-sm); padding: 0 12px; font-size: var(--fs-sm); gap: 6px; }
.btn-lg { --btn-h: var(--hit-lg); padding: 0 24px; font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn.is-on { background: var(--surface-2); }

.icon-btn {
  display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); flex: none;
  border-radius: var(--r-pill); border: 0; background: transparent; color: var(--text);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { border-radius: var(--r-pill); }
.icon-btn.on-mesh { color: #fff; background: rgba(0,0,0,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.icon-btn.on-mesh:hover { background: rgba(0,0,0,.3); }

/* action row buttons on cards: icon + count, quiet until pressed */
.act {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; margin: 0;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
}
.act:hover { background: var(--surface-2); color: var(--text); }
.act[aria-pressed="true"] { color: var(--coral); }
.act[aria-pressed="true"] .ic { fill: currentColor; }

/* ---------- surfaces ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); }
.section-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-4) 0; }

/* ---------- avatars ---------- */
.av {
  --av: 40px;
  width: var(--av); height: var(--av); flex: none; border-radius: 50%;
  display: inline-grid; place-items: center; overflow: hidden;
  font-weight: var(--fw-bold); font-size: calc(var(--av) * .4); line-height: 1; color: #fff;
  background: var(--av-bg, var(--grape)); text-transform: uppercase; letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av-xs { --av: 24px; }
.av-sm { --av: 32px; }
.av-lg { --av: 56px; }
.av-xl { --av: 96px; box-shadow: 0 0 0 4px var(--bg), var(--shadow-2); }
.av-stack { display: inline-flex; }
.av-stack .av { box-shadow: 0 0 0 2px var(--surface); }
.av-stack .av + .av { margin-left: -8px; }
/* avatar colours: picked from the handle, never random per render */
.av[data-hue="0"] { --av-bg: #7A3BFF; } .av[data-hue="1"] { --av-bg: #E8457A; }
.av[data-hue="2"] { --av-bg: #F07A2A; } .av[data-hue="3"] { --av-bg: #0E8F8F; }
.av[data-hue="4"] { --av-bg: #2E7DEA; } .av[data-hue="5"] { --av-bg: #2E9E5B; }
.av[data-hue="6"] { --av-bg: #B84A8C; } .av[data-hue="7"] { --av-bg: #4A3AB8; }

/* ---------- chips, badges, live ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semi); white-space: nowrap;
}
.chip:hover { border-color: var(--border-strong); }
.chip[aria-pressed="true"], .chip[aria-current="page"], .chip.is-on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.chips::-webkit-scrollbar { display: none; }

.keel { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-bold) 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--keel, var(--muted)); }
.keel::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
[data-cat="game"] { --keel: var(--cat-game); }  [data-cat="toy"] { --keel: var(--cat-toy); }
[data-cat="tool"] { --keel: var(--cat-tool); }  [data-cat="learn"] { --keel: var(--cat-learn); }
[data-cat="data"] { --keel: var(--cat-data); }  [data-cat="create"] { --keel: var(--cat-create); }

.badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--primary); color: #fff;
  font-size: 11px; font-weight: var(--fw-bold); line-height: 1;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(255,77,141,.6); animation: live-pulse 2s var(--ease) infinite; flex: none; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,141,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,77,141,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,141,0); } }
.live-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.92); color: #1D1433;
  font-size: 12px; font-weight: var(--fw-bold); white-space: nowrap;
}
.tag-draft { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); border: 1.5px dashed var(--border-strong); font-size: 12px; font-weight: var(--fw-bold); color: var(--muted); }

/* ---------- honest covers ----------
   A cover is a real frame from a recorded play. When it scrolls into view and the
   viewer allows motion, app.js swaps in the 5 s loop (pops that move only); with reduced motion it stays
   the still. Nothing on a cover is invented. */
.cover { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-3); }
.cover img, .cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover video { opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.cover video.is-playing { opacity: 1; }
.cover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); pointer-events: none; }
/* A tall cover (a phone-only pop) is letterboxed, never cropped: the whole
   frame, centred on a blurred copy of itself (app.js sets .tall and --cover-bg). */
.cover.tall img, .cover.tall video { object-fit: contain; }
.cover.tall::before { content: ""; position: absolute; inset: 0; background: var(--cover-bg, none) center / cover; filter: blur(22px) brightness(.7) saturate(1.2); transform: scale(1.2); }
.cover-play {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
  background: rgba(15, 11, 29, .72); color: #fff; font-size: 12px; font-weight: var(--fw-bold);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ---------- pop card (feed) ---------- */
.pop-card .pc-by { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4); }
.pc-by .who { min-width: 0; flex: 1; line-height: 1.25; }
.pc-by .who b { font-weight: var(--fw-bold); }
.pc-by .who .meta { display: block; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-by .who .meta a { color: var(--text); font-weight: var(--fw-semi); }
.pc-body { padding: var(--sp-3) var(--sp-4) 0; display: grid; gap: 4px; }
.pc-body h3 { font-size: var(--fs-lg); }
.pc-body p { color: var(--muted); }
.pc-actions { display: flex; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-2) var(--sp-2); }
.pc-actions .grow { flex: 1; }

/* ---------- live club card (feed) ---------- */
.club-card .cc-head {
  display: flex; align-items: flex-end; gap: var(--sp-3); min-height: 88px; padding: var(--sp-3) var(--sp-4);
  color: #fff;
}
.cc-head .cc-title { flex: 1; min-width: 0; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.club-name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); line-height: 1.05; letter-spacing: .01em; }
.cc-head .cc-sub { font-size: var(--fs-sm); font-weight: var(--fw-semi); opacity: .92; }
.cc-head .live-pill { align-self: flex-start; }
.cc-msgs { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4) var(--sp-2); display: grid; gap: var(--sp-3); }
.cc-msg { display: flex; gap: var(--sp-3); align-items: flex-start; }
.cc-msg .txt { min-width: 0; flex: 1; font-size: var(--fs-base); line-height: 1.35; }
.cc-msg .txt b { font-weight: var(--fw-bold); margin-right: 4px; }
.cc-msg time { font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; padding-top: 2px; }
.cc-msg.is-new, .bubble.is-new { animation: msg-in var(--dur-3) var(--ease-out); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cc-foot { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.cc-reply {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  height: var(--hit); padding: 0 6px 0 16px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted); font-weight: var(--fw-medium);
  border: 1.5px solid transparent;
}
.cc-reply:hover { border-color: var(--border-strong); color: var(--text); }
.cc-reply .send-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--on-ink); }

/* ---------- mini pop (shelves, grids, chat embeds) ---------- */
.mini-pop { display: grid; gap: 6px; min-width: 0; }
.mini-pop .cover { border-radius: var(--r-md); }
.mini-pop b { font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-pop .meta { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: 8px; }
.mini-pop .by { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -4px; }
.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-snap-type: x proximity; }
.shelf::-webkit-scrollbar { display: none; }
.shelf > * { scroll-snap-align: start; }
.pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4) var(--sp-3); }

/* ---------- chat ----------
   Newest at the bottom. The scroller is column-reverse, so it starts pinned to the
   bottom with no JS and stays there as messages arrive, unless you scrolled up. */
.chat-scroll { display: flex; flex-direction: column-reverse; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.chat-list { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--gutter); }
.day-sep { align-self: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); background: var(--surface-2); padding: 4px 10px; border-radius: var(--r-pill); margin: var(--sp-2) 0; }
.new-sep { display: flex; align-items: center; gap: var(--sp-2); color: var(--coral); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; }
.new-sep::before, .new-sep::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .5; }
.msg-group { display: flex; gap: var(--sp-2); align-items: flex-end; max-width: 100%; }
.msg-group .av { margin-bottom: 2px; }
.mg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: min(78%, 520px); align-items: flex-start; }
.mg-head { display: flex; gap: 8px; align-items: baseline; padding: 0 12px; font-size: var(--fs-xs); }
.mg-head b { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.mg-head time { color: var(--faint); }
.bubble {
  padding: 9px 13px; border-radius: 18px; background: var(--bubble-theirs); color: var(--text);
  border: 1px solid var(--border); line-height: 1.38; overflow-wrap: anywhere; max-width: 100%;
}
.mg-body .bubble:not(:last-child) { border-bottom-left-radius: 6px; }
.mg-body .bubble + .bubble { border-top-left-radius: 6px; }
.msg-group.mine { flex-direction: row-reverse; }
.msg-group.mine .mg-body { align-items: flex-end; }
.msg-group.mine .bubble { background: var(--bubble-mine); border-color: transparent; }
.msg-group.mine .mg-body .bubble:not(:last-child) { border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.msg-group.mine .mg-body .bubble + .bubble { border-top-left-radius: 18px; border-top-right-radius: 6px; }
.bubble-pop { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-3); align-items: center; padding: 6px; width: 320px; max-width: 100%; }
.bubble-pop .cover { border-radius: 12px; }
.bubble-img { display: block; padding: 4px; width: fit-content; max-width: min(320px, 100%); line-height: 0; }
.bubble-img img { display: block; max-width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: 14px; background: var(--surface-2); }
.bubble-img.is-sending img { opacity: .55; }
.bubble-pop b { display: block; font-weight: var(--fw-bold); }
.bubble-pop span { font-size: var(--fs-sm); color: var(--muted); }
.msg-system { align-self: center; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.chat-status { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--muted); padding: 4px; }
.chat-status[data-state="live"] .dot { background: var(--success); }
.chat-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }

/* ---------- input bar ---------- */
.inputbar {
  display: flex; align-items: flex-end; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.inputbar-field {
  flex: 1; min-height: var(--hit); max-height: 40dvh; resize: none; padding: 11px 16px;
  border-radius: calc(var(--hit) / 2); border: 1.5px solid var(--border); background: var(--surface-2);
  font-size: var(--fs-md); line-height: 1.3; field-sizing: content;
}
.inputbar-field:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.send { display: grid; place-items: center; width: var(--hit); height: var(--hit); flex: none; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink); transition: transform var(--dur-1) var(--ease); }
.send:active { transform: scale(.92); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field > label, .label { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.input {
  width: 100%; height: var(--hit-lg); padding: 0 16px; border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong); background: var(--surface); font-size: var(--fs-md);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
textarea.input { height: auto; padding: 14px 16px; line-height: 1.4; resize: vertical; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
.input::placeholder, .inputbar-field::placeholder { color: var(--faint); }
.help { font-size: var(--fs-sm); color: var(--muted); }
.code-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 360px; }
.code-boxes input { height: 56px; text-align: center; font: var(--fw-bold) 24px var(--font-mono); border-radius: var(--r-md); border: 1.5px solid var(--border-strong); background: var(--surface); min-width: 0; }
.code-boxes input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); }

/* ---------- segmented control ---------- */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--surface-2); }
.seg button { height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

/* ---------- list rows ---------- */
.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.row { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-3) var(--sp-4); }
.rows > li + li .row, .rows > .row + .row { border-top: 1px solid var(--border); }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: var(--fw-bold); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row .sub { font-size: var(--fs-sm); color: var(--muted); }
.row-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); flex: none; color: var(--text); }
.mesh-chip { width: 32px; height: 32px; border-radius: 10px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); display: grid; place-items: center; color: #fff; font: 400 13px/1 var(--font-display); }

/* ---------- tab bar (mobile) and rail (desktop) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 90%, transparent); border-top: 1px solid var(--border);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.tab { position: relative; display: flex; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: var(--fw-semi); }
.tab .ic { width: 24px; height: 24px; }
.tab > .ic, .tab > .av { margin: 3px 0; }
.tab[aria-current="page"] { color: var(--text); font-weight: var(--fw-bold); }
.tab[aria-current="page"] .ic { stroke-width: 2.4; }
.tab .badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.tab-create .ic-tile { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 10px; background: var(--pop-grad); color: #fff; box-shadow: var(--shadow-pop); }
.tab-create .ic { width: 20px; height: 20px; stroke-width: 2.6; }

.rail { display: none; }
@media (min-width: 1000px) {
  .tabbar { display: none; }
  .rail {
    position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4) var(--sp-4); border-right: 1px solid var(--border); overflow-y: auto;
  }
  .rail > * { flex-shrink: 0; } /* a long club list scrolls the rail; it must never squash Create to a sliver */
  .rail .brand { padding: 0 10px; margin-bottom: var(--sp-2); }
  .rail-nav { display: grid; gap: 2px; }
  .rail-nav a { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 12px; border-radius: var(--r-md); color: var(--text); font-weight: var(--fw-semi); font-size: var(--fs-md); }
  .rail-nav a:hover { background: var(--surface-2); }
  .rail-nav a[aria-current="page"] { background: var(--surface-2); font-weight: var(--fw-bold); }
  .rail-nav a[aria-current="page"] .ic { stroke-width: 2.4; }
  .rail-nav .badge { margin-left: auto; }
  .rail-clubs { display: grid; gap: 2px; }
  .rail-clubs a { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px; border-radius: var(--r-md); font-weight: var(--fw-semi); font-size: var(--fs-sm); }
  .rail-clubs a:hover { background: var(--surface-2); }
  .rail-clubs .mesh-chip { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
  .rail-clubs .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); }
  .rail-me:hover { background: var(--surface-2); }
  .rail-me .grow { flex: 1; min-width: 0; line-height: 1.2; }
  .rail-me .grow b, .rail-me .sub { display: block; }
  .rail-me .sub { font-size: var(--fs-xs); color: var(--muted); }
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--sp-2);
  height: var(--topbar-h); padding: 0 var(--sp-2) 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.topbar .title { flex: 1; min-width: 0; font-weight: var(--fw-bold); font-size: var(--fs-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .grow { flex: 1; }
.topbar.has-back { padding-left: var(--sp-1); }

/* ---------- empty state: one picture, one sentence, one action ---------- */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); }
.empty-art { width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-2); }
.empty-art .ic { width: 36px; height: 36px; }
.empty h3 { font-size: var(--fs-lg); }
.empty p { color: var(--muted); max-width: 34ch; }

/* ---------- every modal dialog dims and softly blurs the page behind it
   (QA3); a tap there or Esc closes it (app.js). Sheets and boxes may set
   their own colour; an anchored menu keeps the page clear. ---------- */
dialog::backdrop { background: var(--scrim, rgba(10, 8, 18, .5)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* ---------- dialog: the one sheet we allow (choose a profile) ---------- */
dialog.sheet {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 100%;
  border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-3);
}
dialog.sheet::backdrop { background: var(--scrim, rgba(10, 8, 18, .5)); }
dialog.sheet[open] { animation: sheet-up var(--dur-3) var(--ease-out); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-body { padding: var(--sp-3) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom)); display: grid; gap: var(--sp-4); }
.sheet-body h2 { font-size: var(--fs-xl); }
.sheet-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.sheet-actions .btn-strong { flex: 1; }
@media (min-width: 640px) { .sheet-actions .btn-strong { flex: none; } }
.sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 10px auto 0; }
@media (min-width: 640px) {
  dialog.sheet { margin: auto; max-width: 440px; border-radius: var(--r-xl); }
  .sheet-grip { display: none; }
  .sheet-body { padding: var(--sp-5); }
}

/* choice cards (radio as a big tappable row) */
.choice { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); border: 1.5px solid var(--border-strong); cursor: pointer; }
.choice:hover { background: var(--surface-2); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .grow { line-height: 1.3; }
.choice .sub { display: block; font-size: var(--fs-sm); color: var(--muted); }
.choice .tick { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; color: transparent; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice:has(input:checked) .tick { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.choice:has(input:focus-visible) { box-shadow: var(--focus); }

/* ---------- build progress (create flow) ---------- */
.buildlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.buildlog li { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; color: var(--faint); font-weight: var(--fw-semi); }
.buildlog li .st { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid var(--border-strong); }
.buildlog li[data-state="done"] { color: var(--text); }
.buildlog li[data-state="done"] .st { background: var(--success); border-color: var(--success); color: #fff; }
.buildlog li[data-state="active"] { color: var(--text); }
.buildlog li[data-state="active"] .st { border-color: var(--primary); border-right-color: transparent; animation: spin .8s linear infinite; }
.buildlog li .note { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); font-weight: var(--fw-medium); text-align: right; overflow-wrap: anywhere; }
/* create: builder status, place in line, and an ending that needs you */
.builder-status { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.builder-status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); }
.builder-status[data-level="free"] .dot { background: var(--success); }
.builder-status[data-level="busy"] .dot { background: var(--warning); }
.builder-status[data-level="full"] .dot, .builder-status[data-level="down"] .dot { background: var(--danger); }
.build-queue { margin: var(--sp-3) 0; padding: var(--sp-3); border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent-text); font-weight: var(--fw-semi); }
.build-failed { display: grid; gap: var(--sp-3); margin: var(--sp-3) 0; padding: var(--sp-4); border-radius: var(--r-md); background: var(--danger-wash); border: 1.5px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.build-failed[hidden] { display: none; }
.build-error { margin: 0; font-weight: var(--fw-bold); color: var(--text); }
.create-main.is-failed .buildlog li[data-state="active"] .st { animation: none; border-right-color: var(--border-strong); }
.buildlog li[data-state="failed"] { color: var(--danger); }
.buildlog li[data-state="failed"] .st { background: var(--danger); border-color: var(--danger); color: #fff; }
.buildlog li[data-state="failed"] .note { color: var(--danger); }
.create-main.is-failed .build-actions, .create-main.is-failed .meter { display: none; }
.build-actions { align-items: center; }
.draft-head { flex-wrap: wrap; gap: var(--sp-2); }
.draft-head .tag-draft { white-space: nowrap; }
.draft-head .cluster { flex-wrap: nowrap; gap: var(--sp-1); }
@keyframes spin { to { transform: rotate(360deg); } }
.meter { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.meter.is-create > i { background: var(--pop-grad); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: var(--r-pill); font-weight: var(--fw-semi); box-shadow: var(--shadow-3); animation: msg-in var(--dur-3) var(--ease-out); }

/* ---------- small popover menu (details/summary, no JS) ---------- */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px; padding: 6px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-3); display: grid; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border: 0; background: none; border-radius: var(--r-sm); text-align: left; font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.menu-list a:hover, .menu-list button:hover { background: var(--surface-2); }
.menu-list .danger { color: var(--danger); }

/* ---------- legal footer ---------- */
.legal { display: grid; gap: 4px; padding: var(--sp-5) var(--gutter) var(--sp-6); text-align: center; font-size: var(--fs-xs); color: var(--faint); }
.legal a { color: var(--muted); font-weight: var(--fw-semi); text-decoration: underline; text-underline-offset: 2px; }
.aside .legal { text-align: left; padding: var(--sp-2) var(--sp-2) 0; }

/* ---------- one menu style (app.js menu/openMenu; talk/017 #4) ----------
   A ⋯ menu is a dialog.sheet: a bottom sheet on a phone; on a desktop a
   popover anchored to the button that opened it (.is-anchored, placed by
   app.js). One header, one close button everywhere. */
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.sheet-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-x { flex: none; margin: -6px -8px -6px 0; }
dialog.sheet:focus { outline: none; }
.menu-sheet .menu-row .ic { flex: none; }
.menu-sheet .menu-row.danger, .menu-row.danger { color: var(--danger); }
dialog.sheet.is-anchored {
  position: fixed; inset: auto; margin: 0; width: min(340px, calc(100vw - 16px)); max-width: none; max-height: calc(100dvh - 16px);
  border-radius: var(--r-lg); border: 1px solid var(--border-strong); overflow: auto; overscroll-behavior: contain;
}
dialog.sheet.is-anchored[open] { animation: menu-in var(--dur-2) var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
dialog.sheet.is-anchored::backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.is-anchored .sheet-grip { display: none; }
.is-anchored .sheet-body { padding: var(--sp-3); gap: var(--sp-2); }
.is-anchored .sheet-body h2 { font-size: var(--fs-md); }
.is-anchored .menu-row { min-height: 40px; padding: 6px var(--sp-1); }
@media (prefers-reduced-motion: reduce) { dialog.sheet.is-anchored[open] { animation: none; } }
@media (max-width: 699px) {
  /* a phone: every menu is a bottom sheet */
  dialog.sheet.menu-sheet { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  dialog.sheet.menu-sheet .sheet-grip { display: block; }
}

/* a message the network lost: it stays, with Retry (chat.js failed) */
.msg.is-failed .bubble, .bubble.is-failed { opacity: .75; border: 1px dashed var(--danger) !important; }
.msg-failed { margin: 2px 4px 0; font-size: var(--fs-xs); color: var(--danger); text-align: right; }
.msg-failed .link { color: var(--danger); font-weight: var(--fw-bold); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.bubble.is-failed .msg-failed { display: block; text-align: left; margin: 4px 0 0; }

/* offline (app.js): one chip, top centre, while the browser or the live
   stream says we're cut off; sends wait and go when it's back */
.offline-chip {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 200;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-ink); font-size: var(--fs-sm); font-weight: var(--fw-semi); box-shadow: var(--shadow-3); white-space: nowrap;
}
.offline-chip[hidden] { display: none; }
.offline-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warning, #f5a524); }

/* Background swatches (club settings, profile editor; app.js data-mesh-pick). */
.mesh-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; }
.mesh-row .help { flex-basis: 100%; margin: 0; }
.mesh-swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.mesh-swatch[aria-pressed="true"] { border-color: var(--ink, currentColor); outline: 2px solid var(--bg, #fff); outline-offset: -4px; }
.mesh-swatch:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }

/* Top scores on a pop's page (popstats.go). */
.beat-banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; }
.score-boards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.score-board .row b { font-variant-numeric: tabular-nums; }
.score-board-h { padding: var(--sp-2) var(--sp-4) 0; }

/* "Catch me up" under the chat's "New since you left" line (catchup.go). */
.catchup { display: flex; justify-content: center; margin: var(--sp-2) 0; }
.catchup-text { margin: 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); font-size: 14px; line-height: 1.5; max-width: 640px; }
/* ---------- club icons (clubicon.go): a square avatar or logo, never the wallpaper squeezed small;
   without one, a monogram on the club's own colour. Rounded squares: people are circles. ---------- */
.club-icon { overflow: hidden; background-size: auto; }
.club-icon.has-icon { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.club-icon.has-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
:root .club-icon.club-mono, :root[data-look] .club-icon.club-mono {
  background-image: none !important; background-color: var(--mesh-base, #4A3AB8) !important;
  color: #fff; font: 700 13px/1 var(--font-sans) !important; letter-spacing: .02em; text-shadow: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
}
:root[data-look] .club-icon.has-icon { background-image: none !important; font-size: 0 !important; }
:root[data-look] .club-icon.club-mono.chat-thumb, :root .club-icon.club-mono.chat-thumb { font-size: 15px !important; }
:root[data-look] .club-icon.club-mono:is(.mc-icon, .dc-icon), :root .club-icon.club-mono:is(.mc-icon, .dc-icon) { font-size: 20px !important; }
:root[data-look] .club-icon.club-mono:is(.av-xl, .inv-sigil), :root .club-icon.club-mono:is(.av-xl, .inv-sigil) { font-size: 30px !important; }

/* welcome.html: the handle check as you type (welcome.js) */
.handle-note.is-bad { color: var(--danger); }

/* partials.html "signup-form": the field people never see (web/signupsig.go) */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* css/layout.css */
/* PopChat Next: page layouts. Needs tokens.css and components.css.
   Mobile first. Breakpoints: 1000px brings the rail (and drops the tab bar),
   1200px brings the right-hand aside. */

.only-desktop { display: none !important; }
@media (min-width: 1000px) {
  .only-mobile { display: none !important; }
  .only-desktop { display: revert !important; }
}
@media (pointer: coarse) { .only-pointer { display: none !important; } }
@media (pointer: fine) { .only-touch { display: none !important; } }
.mono { font-family: var(--font-mono); }
.stack.tight { gap: var(--sp-1); }

/* ---------- app shell ---------- */
.shell { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.main { max-width: var(--main-w); margin: 0 auto; min-width: 0; }
.aside { display: none; }
.is-guest .shell { padding-bottom: 96px; }

@media (min-width: 1000px) {
  body.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .shell, .is-guest .shell {
    display: grid; grid-template-columns: minmax(0, var(--main-w)); justify-content: center;
    gap: var(--sp-6); padding: 0 var(--sp-5);
  }
  .main { width: 100%; }
  .topbar { padding-left: 0; }
  .topbar.has-back { padding-left: 0; margin-left: -8px; }
}
@media (min-width: 1200px) {
  .shell, .is-guest .shell { grid-template-columns: minmax(0, var(--main-w)) var(--aside-w); }
  .aside {
    display: flex; flex-direction: column; gap: var(--sp-4);
    position: sticky; top: 0; align-self: start; max-height: 100dvh; overflow-y: auto;
    padding: var(--sp-4) 0 var(--sp-5); scrollbar-width: thin;
  }
}
/* one content width (talk/017 #10): a page with no right column is one
   centred column (720px), never a narrow strip on the left of a wide screen.
   Pages that use the width themselves (club, chats, settings, discover) set
   their own columns after this. */
@media (min-width: 1000px) {
  .shell:not(:has(> .aside)) { --main-w: 720px; grid-template-columns: minmax(0, var(--main-w)); justify-content: center; }
}
.aside .panel { display: grid; gap: var(--sp-3); }
.aside-foot { font-size: var(--fs-xs); padding: 0 var(--sp-2); }
.rows.tight .row { padding: var(--sp-2) 0; min-height: 56px; }
.rows .row .sub { display: block; }
.rail-label { padding: 0 10px; margin-bottom: 4px; }
.rail-guest { display: grid; gap: var(--sp-3); padding: 0 10px; }
.rail-pitch { color: var(--muted); font-size: var(--fs-sm); }

/* logged-out bar at the bottom of phones */
.joinbar {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: var(--sp-3); padding: 10px 10px 10px 18px;
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-3);
}
.joinbar p { flex: 1; min-width: 0; line-height: 1.25; }
.joinbar p b, .joinbar p span { display: block; }
.joinbar p span { font-size: var(--fs-sm); color: var(--muted); }
@media (min-width: 1000px) { .joinbar { display: none; } }

/* ---------- home ---------- */
.home-top .title { font-size: var(--fs-xl); }
.feed-tabs { padding: var(--sp-1) var(--gutter) var(--sp-3); margin: 0; }
.feed { display: grid; gap: var(--sp-4); padding: 0 12px var(--sp-5); }
@media (min-width: 640px) { .feed { padding: 0 0 var(--sp-5); } .feed-tabs { padding-left: 0; padding-right: 0; } }
.feed-end { padding: 0 12px var(--sp-6); }
.feed-more { display: flex; justify-content: center; padding: var(--sp-4) 12px var(--sp-6); }
.feed-more.is-loading .btn { opacity: .7; pointer-events: none; }
.feed .is-explore { position: relative; }
.hello {
  margin: var(--sp-1) 12px var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-radius: var(--r-xl);
  color: #fff; display: grid; gap: var(--sp-3); box-shadow: var(--shadow-2);
}
@media (min-width: 640px) { .hello { margin-left: 0; margin-right: 0; padding: var(--sp-6); } }
.hello h2 { font-size: clamp(26px, 7.4vw, 36px); line-height: 1.08; text-shadow: 0 2px 18px rgba(0,0,0,.2); }
.hello p { opacity: .92; max-width: 46ch; font-size: var(--fs-md); }
.hello .cluster { margin-top: var(--sp-1); }
.hello-cta { background: #fff; color: #1D1433; border-color: #fff; }
.hello-cta:hover { background: #F4F0FB; border-color: #F4F0FB; }
.hello-ghost { color: #fff; }
@media (max-width: 639px) { .hello-ghost { display: none; } .hello p { font-size: var(--fs-base); } }
.hello-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.aside-join h2 { font-size: 30px; background: var(--pop-grad); -webkit-background-clip: text; background-clip: text; color: transparent; width: max-content; }

/* ---------- home: clubs near you ----------
   Founder's pick (2026-10-05): the photo STRIP under the chips at every width,
   plus the LIVE rail ("Live near you", each nearby club's latest message) from
   1440px. Below that the home page has no right rail and the feed centres. */
.page-home .aside-live { display: none; }
@media (min-width: 1200px) {
  .page-home .shell { grid-template-columns: minmax(0, var(--main-w)); }
  .page-home { --main-w: clamp(640px, 52vw, 720px); }
}
@media (min-width: 1440px) {
  .page-home .shell { grid-template-columns: minmax(0, var(--main-w)) var(--aside-w); }
  .page-home .aside.aside-live { display: flex; }
}

/* the tile both the strip and the live rail use */
.near-tile { color: var(--text); }
.near-wall { display: block; background-size: cover; background-position: center; }
.near-name { font-family: var(--font-display); font-weight: var(--display-weight, 700); letter-spacing: var(--display-track, 0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.near-here { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--fw-semi); white-space: nowrap; }
.near-here .live-dot { width: 6px; height: 6px; }

/* strip: photo tiles under the chips, swipe sideways (arrows for mice) */
.club-strip { position: relative; margin: 0 0 var(--sp-4); }
.club-strip .near-list {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--gutter); scroll-padding-inline: var(--gutter); scroll-behavior: smooth;
}
.club-strip .near-list::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .club-strip .near-list { padding: 0; scroll-padding-inline: 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
}
.club-strip .near-tile, .club-strip .near-more {
  position: relative; isolation: isolate; overflow: hidden; flex: 0 0 156px; height: 88px; border-radius: 14px;
  scroll-snap-align: start; display: flex; align-items: flex-end; padding: 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.club-strip .near-tile { color: #fff; }
.club-strip .near-wall { position: absolute; inset: 0; z-index: -2; border-radius: 0; box-shadow: none; transition: transform var(--dur-3, .3s) var(--ease-out, ease-out); }
.club-strip .near-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.72) 100%); }
.club-strip .near-text { display: grid; gap: 2px; min-width: 0; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.club-strip .near-name { font-size: 14px; line-height: 1.15; }
.club-strip .near-here { opacity: .92; }
.club-strip :is(.near-last, .near-ago) { display: none; }
.club-strip .near-tile:hover .near-wall { transform: scale(1.04); }
@media (min-width: 1000px) { .club-strip .near-tile { flex-basis: 172px; height: 96px; } .club-strip .near-name { font-size: 15px; } }
.club-strip .near-more { flex-basis: 112px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: var(--fw-semi); background: rgba(255,255,255,.04); }
.club-strip .near-more:hover { color: var(--text); background: rgba(255,255,255,.07); }
.strip-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .strip-arrow {
    display: grid; place-items: center; position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px;
    border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: rgba(15,11,29,.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
    opacity: 0; transition: opacity var(--dur-2, .2s);
  }
  .strip-prev { left: -6px; } .strip-next { right: -6px; }
  .club-strip:hover .strip-arrow:not([disabled]) { opacity: 1; }
  .strip-arrow[disabled] { pointer-events: none; }
}

/* live: the right rail shows what's happening in clubs nearby */
.aside-live .section-title { display: flex; align-items: center; gap: 8px; }
.aside-live .section-title .live-dot { width: 6px; height: 6px; }
.aside-live .near-list { display: grid; }
.aside-live .near-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px 0; align-items: start; }
.aside-live .near-tile + .near-tile { border-top: 1px solid var(--border); }
.aside-live .near-tile:hover .near-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.aside-live .near-wall { width: 40px; height: 40px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.aside-live .near-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 3px; }
.aside-live .near-name { font-size: 15px; line-height: 1.2; }
.aside-live .near-here { grid-column: 1 / -1; grid-row: 3; color: #FF7AA5; }
.aside-live .near-ago { grid-column: 2; grid-row: 1; font-size: 12px; color: var(--faint); }
.aside-live .near-last { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aside-live .near-last b { color: var(--text); font-weight: var(--fw-semi); }
.aside-live .near-more { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--accent-text); }

/* ---------- club (chat) ---------- */
.page-club .tabbar { display: none; }
.page-club .shell { padding: 0; }
.club-main { display: flex; flex-direction: column; height: 100dvh; max-width: none; }
.club-head { color: #fff; padding: env(safe-area-inset-top) var(--sp-3) var(--sp-4) var(--gutter); flex: none; }
.club-head-bar { display: flex; align-items: center; gap: 4px; height: 52px; margin-left: -8px; }
.club-head-main { display: flex; align-items: flex-end; gap: var(--sp-3); }
.club-head .club-name { font-size: 30px; text-shadow: 0 2px 16px rgba(0,0,0,.25); }
.club-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.club-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.club-meta-members { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.club-meta-members:hover { text-decoration: underline; }
@media (max-width: 639px) { .club-meta .place { display: none; } }
.club-head .btn-strong { background: #fff; color: #1D1433; border-color: #fff; }
.joined { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.22); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; backdrop-filter: blur(6px); }
.club-shelf { flex: none; padding: 10px 0 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.shelf-pills { grid-auto-columns: max-content; gap: var(--sp-2); padding-right: 12px; }
.shelf-pill { display: flex; align-items: center; gap: 10px; height: 52px; padding: 4px 14px 4px 4px; border-radius: 14px; background: var(--surface-2); max-width: 230px; }
.shelf-pill:hover { background: var(--surface-3); }
.shelf-pill img { width: 58px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.shelf-pill > span { min-width: 0; display: grid; gap: 3px; line-height: 1.15; }
.shelf-pill b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-pill .keel, .shelf-pill .faint { font-size: 10px; }
.shelf-add { background: transparent; border: 1.5px dashed var(--border-strong); }
.shelf-add .ic-tile { width: 44px; height: 44px; border-radius: 10px; background: var(--pop-grad); color: #fff; display: grid; place-items: center; flex: none; }
.chat-area { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.chat-area .chat-scroll { flex: 1; }
.chat-list { width: 100%; max-width: 860px; margin: 0 auto; }
.chat-area .chat-status {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 5px 12px; box-shadow: var(--shadow-2); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.chat-area .chat-status[data-state="live"] { opacity: 0; transform: translate(-50%, -8px); pointer-events: none; }
.club-main .inputbar { flex: none; }
.join-to-talk { align-items: center; justify-content: space-between; padding-left: var(--gutter); }
.join-to-talk p { line-height: 1.3; }
.join-to-talk p b, .join-to-talk p span { display: block; }
.join-to-talk p span { font-size: var(--fs-sm); }
.club-addr { display: flex; align-items: center; gap: 6px; }
.here { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pop-grid.two { grid-template-columns: 1fr 1fr; }

@media (min-width: 1000px) {
  .page-club .shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .club-main { border-right: 1px solid var(--border); }
  .club-head { padding: var(--sp-2) var(--sp-5) var(--sp-5); }
  .club-head .club-name { font-size: 36px; }
  .club-shelf { padding-left: var(--sp-5); }
}
@media (min-width: 1200px) {
  .page-club .shell { grid-template-columns: minmax(0, 1fr) var(--aside-w); }
  .page-club .aside { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  .club-shelf { display: none; }
}

/* ---------- public profile (handle.popchat.me) ---------- */
.public-top { max-width: 1000px; margin: 0 auto; }
.profile { max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter) var(--sp-7); }
.profile-band { height: 132px; border-radius: var(--r-xl); }
@media (min-width: 720px) { .profile-band { height: 200px; } }
/* The actions sit beside the avatar while they fit on ONE line; when they
   don't, the whole row drops below the avatar. Never wrap inside that row
   here: a second line grew upward, under the band, and hid Follow (r017). */
.profile-id { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-top: -44px; padding: 0 var(--sp-3) 0 var(--sp-4); }
.profile-id .av { position: relative; z-index: 1; }
.profile-actions { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: var(--sp-2); padding-bottom: 2px; min-width: 0; margin-left: auto; }
/* a bookmark (saved.js) that is on: filled, in the accent colour, wherever it appears */
[data-act="bookmark"][aria-pressed="true"] { color: var(--accent-text); }
[data-act="bookmark"][aria-pressed="true"] svg { fill: currentColor; }
@media (max-width: 559px) { /* Follow, Message, Connect, Save, Report don't fit beside the avatar: their own row */
  .profile-actions { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; margin-left: 0; }
}
.profile-name { font-size: var(--fs-2xl); margin-top: var(--sp-3); padding: 0 var(--sp-1); }
.profile-handle { padding: 0 var(--sp-1); color: var(--muted); font-weight: var(--fw-semi); }
.profile-bio { padding: var(--sp-2) var(--sp-1) 0; max-width: 60ch; font-size: var(--fs-md); }
.stats { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: 0 var(--sp-1); margin: var(--sp-4) 0 0; color: var(--muted); }
.stats li { display: inline-flex; align-items: center; gap: 4px; }
.stats b { color: var(--text); font-weight: var(--fw-bold); }
.profile-section { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.profile .pop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 720px) { .profile .pop-grid { grid-template-columns: repeat(4, 1fr); } }
.profile .rows.card { box-shadow: none; }
.profile-foot { text-align: center; margin-top: var(--sp-6); font-size: var(--fs-sm); }

/* ---------- pop page ---------- */
.stage { padding: 0 12px; }
.stage-frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; background: #0F0B1D; box-shadow: var(--shadow-2); }
.stage-frame { background-size: cover; background-position: center; }
.stage-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.stage-frame iframe[data-pop-frame] { background: transparent; }
/* Under the framed pop: play it full screen, or open it on its own site. */
.stage-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) 0 0; }
.stage-acts .btn { min-height: 48px; padding: 0 var(--sp-5); font-size: var(--fs-md); }
.stage-acts .stage-play { flex: 1 1 220px; justify-content: center; }
.stage-acts .stage-open { flex: 1 1 220px; justify-content: center; min-width: 0; }
.stage-acts .stage-open span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-acts .stage-open b { font-weight: var(--fw-semi); }
.stage-start { position: absolute; inset: 0; padding: 0; border: 0; background: none; display: block; width: 100%; }
.stage-start img { width: 100%; height: 100%; object-fit: cover; }
.stage-start::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,11,29,0) 40%, rgba(15,11,29,.45)); }
.play-big {
  position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 28px 0 22px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.96); color: #1D1433; font-weight: 800; font-size: 17px; box-shadow: none;
  transition: transform var(--dur-2) var(--ease-spring);
}
.stage-start:hover .play-big { transform: translate(-50%, -50%) scale(1.05); }
.stage-note { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); padding: var(--sp-2) var(--sp-1) 0; }
.stage-note b { color: var(--text); font-weight: var(--fw-semi); }
.stage-note > span:not(.grow) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-note .grow { flex: 1; }
.pop-info { padding: var(--sp-3) var(--gutter) 0; display: grid; gap: var(--sp-2); }
.pop-title { font-size: var(--fs-2xl); }
.pop-blurb { color: var(--muted); font-size: var(--fs-md); }
.by-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.by-row .grow { flex: 1; min-width: 0; line-height: 1.25; }
.by-row .sub { display: block; font-size: var(--fs-sm); color: var(--muted); }
.by-row .sub a { color: var(--text); font-weight: var(--fw-semi); }
.pop-actions { display: flex; align-items: center; gap: 2px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 0; }
.pop-actions .grow { flex: 1; }
.pop-actions .act.is-nudged { box-shadow: 0 0 0 2px var(--grape); border-radius: 999px; animation: act-nudge .5s ease 3; }
@keyframes act-nudge { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .pop-actions .act.is-nudged { animation: none; } }
.cover-note { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--faint); }
.comments { padding: var(--sp-5) var(--gutter) var(--sp-5); display: grid; gap: var(--sp-4); }
.comment-form { display: flex; gap: var(--sp-2); align-items: center; }
.comment-form .input { height: var(--hit); border-radius: var(--r-pill); }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.comment { display: flex; gap: var(--sp-3); }
.comment p + p { margin-top: 2px; }
.club-mini { display: grid; box-shadow: var(--shadow-1); }
.club-mini-band { display: flex; align-items: flex-end; min-height: 76px; padding: var(--sp-3) var(--sp-4); color: #fff; }
.club-mini-band .club-name { font-size: var(--fs-xl); text-shadow: 0 1px 10px rgba(0,0,0,.25); }
.club-mini-sub { display: flex; align-items: center; gap: 8px; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--muted); }
@media (min-width: 640px) { .stage { padding: 0; } .pop-info, .comments { padding-left: 0; padding-right: 0; } }
@media (max-width: 639px) { .stage-note .pre { display: none; } }

/* ---------- create ---------- */
.allowance { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); padding-right: var(--sp-2); text-decoration: none; text-align: right; line-height: var(--lh-tight); max-width: 60%; margin-left: auto; text-wrap: balance; }
.allowance .ic { flex: none; }
.allowance:hover { color: var(--text); }
.allowance b { color: var(--text); }
.allowance.is-zero { color: var(--text); font-weight: var(--fw-semi); }

/* ---------- settings: plan ---------- */
.plan-note { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent-text); font-weight: var(--fw-semi); }
.plan-note.is-bad { background: var(--danger-wash); color: var(--danger); }
.plan-meter { padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-1); }
.plan-meter-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); }
.plan-meter.is-zero .plan-meter-line { color: var(--accent-text); }
.plan-manage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--border); }
.plan-tiers { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.plan-tier { padding: var(--sp-4); display: grid; gap: var(--sp-2); align-content: start; }
.plan-tier.is-current { box-shadow: 0 0 0 2px var(--grape); }
.plan-tier-head { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; }
.plan-tier-head h3 { font-size: var(--fs-lg); }
.plan-price { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.plan-price small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted); white-space: nowrap; }
.plan-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.plan-lines li { display: flex; gap: 6px; align-items: center; }
.plan-buy { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.plan-extra { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.plan-extra .title { font-size: var(--fs-md); }
.plan-extra .sub { color: var(--muted); font-size: var(--fs-sm); }
.plan-fine { text-align: center; }
.create-step { display: none; padding: var(--sp-2) var(--gutter) var(--sp-5); gap: var(--sp-4); }
.create-main[data-state="compose"] [data-step="compose"],
.create-main[data-state="building"] [data-step="building"],
.create-main[data-state="draft"] [data-step="draft"],
.create-main[data-state="published"] [data-step="published"] { display: grid; }
@media (min-width: 640px) { .create-step { padding-left: 0; padding-right: 0; } }
.ask-label { display: block; font-size: clamp(28px, 8vw, 36px); line-height: 1.08; margin: var(--sp-2) 0 var(--sp-4); }
.ask-box {
  border-radius: var(--r-xl); border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--pop-grad) border-box;
  box-shadow: var(--shadow-2);
}
.ask-input { display: block; width: 100%; min-height: 150px; padding: 18px 18px 10px; border: 0; background: transparent; resize: none; font-size: var(--fs-lg); line-height: 1.42; field-sizing: content; }
.ask-input:focus { outline: none; }
.ask-input::placeholder { color: var(--faint); }
.ask-files { list-style: none; margin: 0; padding: 0 14px; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ask-files:empty { display: none; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 2px 0 12px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.file-chip .icon-btn { width: 32px; height: 32px; }
.file-chip .chip-thumb { width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; object-fit: cover; }
.file-chip .chip-state { color: var(--muted); font-weight: var(--fw-reg, 400); }
.file-chip.is-uploading .chip-thumb { opacity: .55; }
.file-chip.is-failed { background: color-mix(in srgb, var(--danger, #c33) 14%, var(--surface-2)); }
.ask-bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) 6px; }
.ask-bar .grow { flex: 1; }
.ask-bar label.icon-btn { cursor: pointer; }
.ask-help { padding: 0 var(--sp-1); }
.meter-note { padding: 0 var(--sp-1); color: var(--text); }
.note-block { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font-weight: var(--fw-semi); }
.import-pop { padding: 0 var(--sp-1); }
.import-pop > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-semi); list-style: none; min-height: var(--hit); }
.import-pop > summary::-webkit-details-marker { display: none; }
.import-pop > summary:hover, .import-pop[open] > summary { color: var(--text); }
.import-form { display: grid; gap: var(--sp-3); padding: var(--sp-3) 0 var(--sp-2); }
.drop-zone { position: relative; display: grid; place-items: center; min-height: 84px; padding: var(--sp-3); border: 1.5px dashed var(--border-strong); border-radius: 14px; color: var(--muted); font-size: var(--fs-sm); text-align: center; cursor: pointer; }
.drop-zone span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-zone:hover, .drop-zone.is-over { color: var(--text); border-style: solid; }
.drop-zone:has(input:focus-visible) { box-shadow: var(--focus); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.import-source { overflow-wrap: anywhere; }
.examples { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.example { text-align: left; border: 1.5px dashed var(--border-strong); background: transparent; border-radius: 14px; padding: 12px 14px; color: var(--muted); font-weight: var(--fw-medium); }
.example:hover { color: var(--text); border-style: solid; }
.you-said { display: flex; justify-content: flex-end; }
.you-said .bubble { background: var(--bubble-mine); border-color: transparent; max-width: 88%; white-space: pre-line; }
.build-shot .shot-label, .cover .shot-label {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: var(--r-pill); background: rgba(15,11,29,.72); color: #fff; font-size: 12px; font-weight: var(--fw-bold);
}
.build-shot img { transition: opacity var(--dur-3) var(--ease); }
.build-body { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.draft-stage { aspect-ratio: 4 / 3; }
.change-box { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); }
.change-box .input { flex: 1 1 0; min-width: 0; height: var(--hit); border-radius: var(--r-pill); }
/* The change box is a growing textarea (grow.js): one line to start,
   taller as you type. (:is() outranks the looks' ".input { padding: 0 }".) */
:is(:root, :root[data-look]) .change-box textarea.input { min-height: var(--hit); padding: 9px 18px; line-height: 1.4; resize: none; overflow-y: hidden; border-radius: 22px; }
.change-box .btn { flex: none; }
.grow-hint { flex-basis: 100%; font-size: var(--fs-xs, 12px); color: var(--faint); padding-left: 18px; }
.ask-bar .grow-hint { flex-basis: auto; padding: 0 var(--sp-2) 0 0; }
@media (pointer: coarse) { .grow-hint { display: none; } }
/* A phone: the box takes the full width, the send button sits under it. */
@media (max-width: 600px) { .change-box textarea.input { flex-basis: 100%; } .change-box .btn { margin-left: auto; } }
.draft-form { display: grid; gap: var(--sp-5); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 6px; }
.cover-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.pick { position: relative; display: grid; gap: 6px; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .cover { border-radius: 10px; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color var(--dur-1) var(--ease); }
.pick:has(input:checked) .cover { outline-color: var(--ink); }
.pick:has(input:focus-visible) .cover { box-shadow: var(--focus); }
.pick-label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); }
.pick:has(input:checked) .pick-label { color: var(--text); }
.share-to .chip.toggle { position: relative; cursor: pointer; }
.share-to .chip.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.share-to .chip.toggle:has(input:checked) { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.share-to .chip.toggle:has(input:focus-visible) { box-shadow: var(--focus); }
.mesh-dot { width: 14px; height: 14px; border-radius: 5px; }
.publish-bar { position: sticky; bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); z-index: 5; }
@media (min-width: 1000px) { .publish-bar { bottom: var(--sp-4); } }
.published { padding-top: var(--sp-7); }
.how-steps { counter-reset: how; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
.how-steps li { position: relative; padding-left: 40px; }
.how-steps li::before { counter-increment: how; content: counter(how); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.how-steps b { display: block; color: var(--text); font-size: var(--fs-base); }

/* ---------- sign in ---------- */
body.page-auth { background: radial-gradient(900px 480px at 50% -12%, var(--accent-wash), transparent 70%), var(--bg); }
.auth { min-height: 100dvh; display: grid; justify-items: center; align-content: center; gap: var(--sp-4); padding: var(--sp-5) var(--gutter); }
.auth-card { width: 100%; max-width: 440px; display: grid; box-shadow: var(--shadow-2); border-radius: var(--r-xl); }
.auth-main { padding: var(--sp-5) var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; }
.auth-main .brand { margin-bottom: var(--sp-2); }
.auth-main h1 { font-size: var(--fs-2xl); }
.auth-step { display: none; gap: var(--sp-3); }
.auth:not([data-state="sent"]) [data-step="email"], .auth[data-state="sent"] [data-step="sent"] { display: grid; }
.auth[data-state="sent"] .or, .auth[data-state="sent"] .alts { display: none; }
.or { display: flex; align-items: center; gap: var(--sp-3); color: var(--faint); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.alts { display: grid; gap: var(--sp-2); }
.alt { border: 1.5px solid var(--border); border-radius: var(--r-lg); transition: border-color var(--dur-1) var(--ease); }
.alt[open] { border-color: var(--border-strong); }
.alt summary { list-style: none; display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: 10px 14px 10px 10px; cursor: pointer; border-radius: var(--r-lg); }
.alt summary::-webkit-details-marker { display: none; }
.alt summary:hover { background: var(--surface-2); }
.alt summary .grow { flex: 1; min-width: 0; line-height: 1.25; }
.alt summary .sub { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }
.alt summary > .ic { color: var(--muted); transition: transform var(--dur-2) var(--ease); }
.alt[open] summary > .ic { transform: rotate(90deg); }
.alt-body { padding: var(--sp-1) var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); justify-items: start; }
.alt-body.stack { justify-items: stretch; }
.qr { width: 184px; height: 184px; padding: 10px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--border); }
.qr-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); }
.qr-steps b { color: var(--text); }
.qr-wait { display: flex; align-items: center; gap: var(--sp-2); }
.spin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary); border-right-color: transparent; animation: spin .9s linear infinite; flex: none; }
.auth-side { padding: var(--sp-6) var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; justify-items: start; background: var(--surface-2); border-left: 1px solid var(--border); }
.auth-side h2 { font-size: var(--fs-xl); }
.auth-side .qr { margin: var(--sp-2) 0; }
.auth-foot { text-align: center; font-size: var(--fs-xs); max-width: 420px; }
@media (max-width: 639px) { .auth { padding: var(--sp-3) 10px; } .auth-main { padding: var(--sp-5) var(--sp-4); } }
@media (min-width: 1000px) {
  .auth-card:has(.auth-side) { max-width: 900px; grid-template-columns: 1fr 1fr; }
  .auth-card:not(:has(.auth-side)) { max-width: 480px; } /* no device QR (dev): one column fills the card */
  .auth-main { padding: var(--sp-6); }
}

/* ---------- settings ---------- */
.settings-main { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-5); align-content: start; }
.settings-main > :not(.topbar) { margin-left: 12px; margin-right: 12px; }
@media (min-width: 640px) { .settings-main > :not(.topbar) { margin-left: 0; margin-right: 0; } }
.settings-intro { padding: var(--sp-5) var(--sp-4) var(--sp-2); display: grid; gap: var(--sp-1); }
.settings-intro h2 { font-size: var(--fs-xl); }
.chip-mini { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent-text); font-size: 11px; font-weight: 800; }
.online { color: var(--success); font-weight: var(--fw-bold); }
.devices li.is-gone { opacity: .4; transition: opacity var(--dur-3) var(--ease); }
.add-device { padding-bottom: var(--sp-4); }
.add-device .title { font-size: var(--fs-md); }
.add-icon { background: var(--ink); color: var(--on-ink); }
.add-actions { padding: 0 var(--sp-4) 0 72px; }
.settings-danger { display: grid; gap: var(--sp-2); }
.popname .sub { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; overflow-wrap: anywhere; }
.popname .input-slug { width: auto; min-width: 8ch; flex: 1 1 12ch; padding: 4px 8px; }
.popname .help { font-size: var(--fs-sm); color: var(--muted, inherit); }
.popname-actions { flex: none; gap: var(--sp-2); }
@media (max-width: 480px) { .popname { flex-wrap: wrap; } .popname-actions { width: 100%; justify-content: flex-end; } }
.chip-mini.is-draft { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--text); }
.chip-mini.is-quiet { background: var(--surface-3); color: var(--muted); }
.chip-mini.is-warn { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--text); }
/* one pop's owner page (pop-manage.html) */
.manage-head { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4); }
.manage-cover { width: 120px; flex: none; border-radius: var(--r-md); }
.manage-cover img, .version-shot img { width: 100%; height: 100%; object-fit: cover; }
.manage-status { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.manage-head .sub { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.manage-running { padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-semi); }
.manage-change, .manage-players { margin: 0 var(--sp-4); }
.manage-players-acts { padding-bottom: var(--sp-4); }
.manage-repair { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) 0; }
.manage-repair .help { flex: 1 1 16rem; }
.manage-msg { padding: 0 var(--sp-4) var(--sp-4); min-height: 1em; }
.versions .version { flex-wrap: wrap; }
.version-shot { width: 72px; flex: none; border-radius: var(--r-sm); }
.versions .version .sub { overflow-wrap: anywhere; }
.versions .is-live { background: var(--accent-wash); }
.version-actions { flex: none; gap: var(--sp-2); }
@media (max-width: 480px) { .version-actions { width: 100%; justify-content: flex-end; } }
.manage-unpublish { padding: var(--sp-3) var(--sp-4) var(--sp-4); align-items: center; gap: var(--sp-3); }

/* ---------- social: club menu, invites, club settings, reports, pop page ---------- */
dialog.sheet { max-height: 92dvh; overflow: auto; }
.menu-rows { display: grid; }
.menu-row { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--hit); padding: var(--sp-2) var(--sp-1); border: 0; background: none; color: var(--text); font: inherit; font-weight: var(--fw-semi); text-align: left; cursor: pointer; border-radius: var(--r-md); }
.menu-row + .menu-row { border-top: 1px solid var(--border); }
.menu-row:hover { background: var(--surface-2); }
.menu-row .grow { flex: 1; }
.menu-row.danger { color: var(--danger); }
.vis-pill { display: inline-flex; align-items: center; gap: 4px; }
.club-aside-actions { margin-top: var(--sp-3); }
.invite-new { display: grid; gap: var(--sp-2); }
.invite-made { display: grid; gap: var(--sp-2); }
.invite-made[hidden] { display: none; }
.invite-made .input { font-size: var(--fs-sm); }
.invite-list li { padding: var(--sp-2) 0; display: grid; gap: 4px; }
.invite-list li + li { border-top: 1px solid var(--border); }
.invite-list .who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.invite-url { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.wall-preview { height: 96px; border-radius: var(--r-lg); background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: var(--sp-3); color: #fff; font-weight: var(--fw-bold); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.wall-pick { justify-self: start; align-self: flex-start; cursor: pointer; }
.wall-pick.is-busy { opacity: .6; pointer-events: none; }
.addr-field { display: flex; align-items: center; gap: 6px; }
.addr-field .input { flex: 1; min-width: 0; }
.new-club-form { max-width: 560px; }
.new-club-form fieldset { border: 0; padding: 0; margin: 0; }
.form-error { color: var(--danger); font-size: var(--fs-sm); }
.form-error[hidden] { display: none; }
.report-reasons { display: grid; gap: var(--sp-2); }
.report-reasons .choice { padding: var(--sp-2) var(--sp-3); }
.comment .grow { flex: 1; min-width: 0; }
.comment-body { overflow-wrap: anywhere; white-space: pre-wrap; }
.comment-x { width: 32px; height: 32px; opacity: .55; }
.comment-x:hover { opacity: 1; }
.pop-more { padding: 0 var(--gutter) var(--sp-5); }
@media (min-width: 640px) { .pop-more { padding-left: 0; padding-right: 0; } }
[data-act="save"][aria-pressed="true"], [data-act="like"][aria-pressed="true"] { color: var(--accent-text); }
.cover.no-preview .cover-play { display: none; }
.msg-pop { position: fixed; z-index: 50; background: var(--surface); color: var(--text); border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: 4px; }
.msg-pop button { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--danger); font: inherit; font-weight: var(--fw-semi); padding: 8px 12px; cursor: pointer; border-radius: var(--r-md); }
.msg-pop button:hover { background: var(--surface-2); }
.msg-pop button.is-plain { color: var(--text); }
.person-card .pc-by { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.person-card .pc-by .btn { flex: none; }
.person-card .person-pops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-4); }
.msg-pop { display: grid; }
.mod-actions .choice .sub { display: block; }
.bubble.is-picked { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.feed-empty[hidden] { display: none; }
.with-ic { display: flex; gap: 6px; align-items: flex-start; }
.with-ic > .ic { flex: none; margin-top: 2px; }
/* the strip's wallpapers are images, so tiles off to the side load lazily */
.near-wall { overflow: hidden; }
.near-wall > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* a profile read-only on the plan (web/profilecap.go): the owner's banner */
.ro-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin: var(--sp-2) 0 var(--sp-3); border-radius: var(--r-lg);
  border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--pop-grad) border-box; }
.ro-banner .grow { display: grid; gap: 2px; min-width: 12rem; flex: 1; }
.ro-banner .grow span { font-size: var(--fs-sm); color: var(--muted); }
.ro-banner .ro-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ro-banner-club { margin: var(--sp-2) var(--sp-3) var(--sp-2); }
.ro-banner-page { margin: var(--sp-3) var(--sp-3) 0; }
.chip-mini.chip-ro { margin-left: 6px; background: var(--surface-3); color: var(--muted); }
.choice.is-ro { opacity: .6; }
.ro-pick { cursor: pointer; }
.ro-pick input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.ro-foot { display: grid; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); }
.ro-foot .form-error:empty { display: none; }
@media (max-width: 599px) { .ro-banner .ro-actions { width: 100%; } .ro-banner .ro-actions .btn { flex: 1; justify-content: center; } }

/* A profile's own stated interests ("My interests", recs_people.go). */
.profile-into { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--sp-2) var(--sp-1) 0; margin: 0; }

/* near tiles: the strip shows the club's photo; the aside's list shows its icon (clubicon.go) */
.near-icon { display: none !important; }
.aside-live .near-wall { display: none; }
.aside-live .near-icon { display: grid !important; width: 40px; height: 40px; border-radius: 11px; }
:root[data-look] .club-icon.club-mono.near-icon, :root .club-icon.club-mono.near-icon { font-size: 14px !important; }
/* a club address page (club-public.html): its one action, under the stats */
.club-pub-join { margin-top: var(--sp-4); padding: 0 var(--sp-1); }

/* css/near.css */
/* near.css: local rooms. Home's Local section (near.html), Best of <area>
   (local.html), People you've met (met.html), a table's way back out (club.html). */

/* ---- the Local section: one line folded, rooms when open ---- */
.local { margin: 4px 0 16px; border-radius: var(--r-lg, 16px); position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--local-tint, color-mix(in srgb, var(--primary, #8B5CFF) 30%, transparent)), transparent 62%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--glow-b, #F43F5E) 55%, transparent), transparent 60%),
    var(--surface, #101017);
  box-shadow: inset 0 0 0 1px var(--border, rgba(255,255,255,.08)), var(--shadow-1, none); }
.local-bar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: none;
  font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.local-bar:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--r-lg, 16px); }
.local-pin { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff;
  background: var(--create-fill, linear-gradient(115deg, #4C1DE6, #9D1AA8 52%, #E8335A)); box-shadow: none; }
.local-line { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; font-size: 14.5px; }
.local-line b { font-family: var(--font-display, inherit); font-weight: var(--display-weight, 700); letter-spacing: var(--display-track, -.01em); }
.local-area { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.local-area::before { content: "·"; margin-right: 8px; color: var(--faint, var(--muted)); }
.local-here { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--text); }
.local-here .live-dot, .lt-here .live-dot, .best-table .live-dot { width: 7px; height: 7px; }
.local-busy { padding: 2px 9px; border-radius: var(--r-pill, 999px); font-size: 11.5px; font-weight: 700; color: var(--accent-text);
  background: var(--accent-wash); animation: local-pulse 2.4s ease-in-out infinite; }
.local.is-quiet .local-busy { animation: none; }
@keyframes local-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .local-busy { animation: none; } }
.local-chev { flex: none; color: var(--muted); transition: transform .2s ease; }
.local-bar[aria-expanded="true"] .local-chev { transform: rotate(90deg); }
@media (max-width: 480px) { .local-busy { display: none; } }

.local-body { padding: 2px 14px 12px; }
.local-body[hidden] { display: none; }
.local-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: thin; }
.local-sub { margin: 12px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint, var(--muted)); }
.local-near .lt { grid-template-columns: 1fr auto; }
.local-near .lt-wall { display: none; }
.local-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 13px; }
.local-foot:empty { display: none; }
.local-foot a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-text); font-weight: 600; }

/* a region's room: a tile */
.lt { scroll-snap-align: start; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; min-width: 0; padding: 10px 10px 10px 12px;
  border-radius: var(--r-md, 12px); background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--border, rgba(255,255,255,.08));
  position: relative; transition: transform .15s ease, box-shadow .15s ease; }
:root[data-theme="light"] .lt { background: rgba(255, 255, 255, .72); }
.lt.is-mine { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 60%, transparent); }
@media (hover: hover) { .lt:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--border-strong, rgba(255,255,255,.16)); } }
.lt-link { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 2px; min-width: 0;
  color: var(--text); text-decoration: none; }
.local-near .lt-link { grid-template-columns: minmax(0, 1fr); }
.lt-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole tile opens the room */
.lt-link:focus-visible { outline: none; }
.lt:has(.lt-link:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.lt-wall { grid-row: 1 / 4; width: 44px; height: 44px; border-radius: 12px; align-self: center; }
.lt-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lt-area { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-pill { flex: none; padding: 1px 7px; border-radius: var(--r-pill, 999px); font-size: 10.5px; font-weight: 700; background: var(--surface-3, rgba(255,255,255,.1)); color: var(--muted); }
.lt-pill.is-mine { background: var(--accent-wash); color: var(--accent-text); }
.lt-meta { display: flex; gap: 8px; font-size: 12px; color: var(--muted); }
.lt-here { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; }
.lt-last { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-last b { color: var(--text); font-weight: 600; }
.lt-quiet { font-style: italic; }
.lt-go { position: relative; z-index: 1; padding: 6px 13px; border: 0; border-radius: var(--r-pill, 999px); font: inherit; font-size: 12.5px; font-weight: 700;
  color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--create-fill, linear-gradient(115deg, #4C1DE6, #9D1AA8 52%, #E8335A)); box-shadow: none; }
.lt.is-mine .lt-go { background: var(--surface-3, #22222E); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong, rgba(255,255,255,.16)); }
.lt-go[aria-busy="true"], .best-item [aria-busy="true"], .best-hero [aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---- Best of <area> ---- */
.best-hero { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; padding: 26px 22px 22px; border-radius: var(--r-xl, 22px); overflow: hidden;
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  background-image: var(--hero-bg, none); }
.best-hero .display { margin: 0; color: #fff; }
.best-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.best-sub { margin: 0; max-width: 56ch; color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.5; }
.best-tables { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 16px; padding-bottom: 4px; }
.best-table { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-radius: var(--r-md, 12px); text-decoration: none; color: var(--text);
  background: var(--surface, #101017); box-shadow: inset 0 0 0 1px var(--border, rgba(255,255,255,.08)); font-size: 14px; }
.best-table span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.best-table.is-mine { box-shadow: inset 0 0 0 1.5px var(--primary); }
.best-sec { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.best-item { display: flex; flex-direction: column; gap: 8px; }
.best-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }

/* ---- People you've met ---- */
.met-clubs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.met-clubs .chip { min-height: 24px; font-size: 12px; }
.met-pages { justify-content: space-between; padding: 8px 4px 0; }

/* ---- a table's link back out (club.html) ---- */
.club-local { margin: 6px 0 0; font-size: 13px; }
.club-local a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill, 999px);
  color: #fff; font-weight: 650; text-decoration: none; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
/* a line from Popchat itself in a chat (chat.js) */
.chat-list .msg.is-system { display: flex; justify-content: center; align-self: stretch; width: 100%; max-width: none; }
.chat-list .msg.is-system .msg-sysline { width: fit-content; max-width: min(46ch, 92%); border-radius: 14px; margin: 6px auto; padding: 6px 14px; border-radius: var(--r-pill, 999px); font-size: 12.5px; line-height: 1.4;
  background: var(--accent-wash); color: var(--accent-text); }
.best-item { padding: 14px 16px; }

/* phones: one wide tile at a time, no wall */
@media (max-width: 520px) {
  .local-body { padding: 2px 10px 10px; }
  .local-row { grid-auto-columns: 86%; }
  .lt-link { grid-template-columns: minmax(0, 1fr); }
  .lt-wall { display: none; }
}

/* ---- the neighbourhood links under the rooms (r016: market, posts, alerts) ---- */
.local-hood { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.local-hood-a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md, 12px); text-decoration: none; color: var(--text);
  background: var(--surface, #101017); box-shadow: inset 0 0 0 1px var(--border, rgba(255,255,255,.08)); }
.local-hood-a:hover { box-shadow: inset 0 0 0 1px var(--border-strong, rgba(255,255,255,.16)); }
.local-hood-a > .ic { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #4C1DE6, #9D1AA8 60%, #E8335A); }
.local-hood-a > span { display: grid; min-width: 0; line-height: 1.25; }
.local-hood-a b { font-size: 14px; }
.local-hood-a span span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- regions (round 017): the switcher, the pick page, hubs (/r/<region>), /r/all ---- */
.rg-switch { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; max-width: 100%; padding: 4px 10px 4px 8px; margin-left: auto;
  border-radius: var(--r-pill, 999px); color: var(--text); font-size: 13px; text-decoration: none; white-space: nowrap;
  background: color-mix(in srgb, var(--surface-2, #1a1a24) 80%, transparent); box-shadow: inset 0 0 0 1px var(--border); }
.rg-switch:hover { box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); }
.rg-switch-t { overflow: hidden; text-overflow: ellipsis; }
.rg-switch-t b { font-weight: 700; }
.rg-chev { display: inline-flex; color: var(--muted); }
.rg-chev svg { transform: rotate(90deg); }
.rg-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--primary)) 25%, transparent); }
@media (max-width: 480px) { .topbar .rg-switch { font-size: 12px; max-width: 55%; } }
.local .rg-switch { margin: 0 0 6px; }
.local-flavour { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.local-flavour .rg-colours { margin: 0; }
.local-flavour a { color: var(--accent-text); font-weight: 600; }

.rg-sw { flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--sw, var(--primary)), color-mix(in srgb, var(--sw, var(--primary)) 55%, #000)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* the pick page and the autocomplete */
.rg-pick-now { padding: 14px 16px; margin: var(--sp-2, 8px) 0 var(--sp-3, 12px); display: grid; gap: 6px; }
.rg-pick-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rg-pick-note { margin: 0; font-size: 12.5px; }
.rg-inline { margin: 2px 0 0; }
.rg-search, .rg-ac { position: relative; display: flex; gap: 8px; align-items: center; margin: 0 0 var(--sp-3, 12px); }
.rg-search .rg-q, .rg-ac .rg-q { flex: 1; min-width: 0; padding-left: 36px; }
.rg-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: inline-flex; pointer-events: none; }
.rg-ac-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px; list-style: none; max-height: min(360px, 60vh); overflow-y: auto;
  border-radius: var(--r-md, 12px); background: var(--surface, #101017); box-shadow: var(--shadow-3, 0 18px 40px -12px rgba(0,0,0,.6)), inset 0 0 0 1px var(--border); scrollbar-width: thin; }
.rg-ac-list[hidden] { display: none; }
.rg-ac-opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; cursor: pointer; }
.rg-ac-opt[aria-selected="true"], .rg-ac-opt:hover { background: var(--accent-wash); }
.rg-ac-opt .grow, .rg-row .grow { display: grid; min-width: 0; }
.rg-ac-opt .sub, .rg-row .sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-ac-head { padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.rg-ac-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 13px; }
.rg-h { margin: var(--sp-3, 12px) 0 var(--sp-2, 8px); font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--faint, var(--muted)); }
.rg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rg-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md, 12px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.rg-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.rg-acts { display: flex; gap: 6px; margin: 0; flex: none; }
@media (max-width: 480px) { .rg-row { flex-wrap: wrap; } .rg-acts { width: 100%; justify-content: flex-end; } }
.rg-more { margin: var(--sp-3, 12px) 0; }
.rg-attrib { font-size: 12px; margin: var(--sp-5, 24px) 0 var(--sp-2, 8px); }
.rg-club-note { margin: 0; }

/* the hub */
.rg-main { --a1: #6D28D9; --a2: #DB2777; --a3: #F59E0B; }
.rg-hero { position: relative; display: flex; flex-direction: column; gap: 8px; margin: var(--sp-2, 8px) 0 var(--sp-4, 16px); padding: 28px 22px 22px;
  border-radius: var(--r-xl, 22px); overflow: hidden; color: #fff; isolation: isolate; }
.rg-hero a { color: inherit; }
.rg-kicker { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 650; letter-spacing: .02em; opacity: .9; }
.rg-name { margin: 0; color: #fff; font-size: clamp(30px, 7vw, 48px); line-height: 1.02; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.rg-aka { margin: 0; font-size: 14px; opacity: .92; }
.rg-tagline { margin: 2px 0 0; max-width: 42ch; font-size: 17px; font-weight: 600; line-height: 1.35; }
.rg-colours { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.rg-colour { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: var(--r-pill, 999px); background: rgba(0,0,0,.28); backdrop-filter: blur(6px); }
.rg-colour i { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.rg-hero-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rg-hero .btn-strong { background: #fff; color: #111; }
.rg-ghost { background: rgba(0,0,0,.3); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.rg-here-note { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; opacity: .85; }

/* the cover (round 018): a picture of the place when there is one (.rg-photo), else a deep
   gradient in the region's own colour (lightness variants only, no blending with a second colour:
   maroon stays maroon) with a fine diagonal pattern and a thin band of its second colour. */
.rg-main { --a-deep: color-mix(in oklab, var(--a1) 60%, #000); --a-bright: color-mix(in oklab, var(--a1) 80%, #fff); }
.rg-wall { background-color: var(--a-deep);
  background-image: radial-gradient(90% 120% at 88% 0%, color-mix(in oklab, var(--a-bright) 60%, transparent), transparent 62%),
    linear-gradient(155deg, var(--a1) 0%, var(--a-deep) 78%); }
.rg-wall::before, .rg-wall::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rg-wall::before { background: repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 1px, transparent 1px 16px);
  -webkit-mask: linear-gradient(100deg, #000, transparent 75%); mask: linear-gradient(100deg, #000, transparent 75%); }
.rg-wall::after { background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.38)), linear-gradient(0deg, var(--a2) 0 5px, transparent 5px); }
.rg-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.rg-wall.has-photo::before { background: linear-gradient(90deg, color-mix(in oklab, var(--a-deep) 78%, transparent) 0%, color-mix(in oklab, var(--a-deep) 35%, transparent) 55%, transparent 80%);
  -webkit-mask: none; mask: none; }
.rg-wall.has-photo::after { background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 30%, rgba(0,0,0,.45)), linear-gradient(0deg, var(--a1) 0 5px, transparent 5px); }
.rg-hero.has-photo { min-height: 300px; justify-content: flex-end; }
@media (max-width: 480px) { .rg-hero.has-photo { min-height: 340px; } }

.rg-missing { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 var(--sp-4, 16px); font-size: 14px; }
.rg-missing p { margin: 0; }
.rg-missing-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--a-bright), var(--a1)); }
.rg-count { padding: 10px 14px; margin: 0 0 var(--sp-3, 12px); }
.rg-count a { display: inline-flex; align-items: center; gap: 6px; }
.rg-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4, 16px); }
@media (min-width: 900px) { .rg-grid { grid-template-columns: 1fr 1fr; } }
.rg-sec { min-width: 0; }
.rg-sec .section-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.rg-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rg-all { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.rg-small { font-size: 13px; margin: 6px 0 8px; }
.rg-empty { font-size: 13.5px; margin: 0 0 8px; }
.rg-room { grid-auto-columns: minmax(230px, 1fr); }
.rg-ev .date-tile { flex: none; }
.row-icon.is-urgent { color: var(--danger); }
.rg-mk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rg-mk-card { display: grid; overflow: hidden; color: var(--text); text-decoration: none; }
.rg-mk-img { aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); }
.rg-mk-img img { width: 100%; height: 100%; object-fit: cover; }
.rg-mk-text { display: grid; padding: 6px 8px 8px; font-size: 12.5px; }
.rg-mk-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.rg-flavour .rg-h3, .rg-h3 { margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint, var(--muted)); }
.rg-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.rg-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 10px; font-size: 13px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.rg-team-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--sw, var(--a1)); }
.rg-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.rg-part { margin: var(--sp-4, 16px) 0 0; }
.rg-near { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.rg-near-list { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; }
.rg-near-tile { display: grid; gap: 2px; align-content: start; padding: 10px 12px 10px 14px; border-radius: var(--r-md, 12px); color: var(--text); text-decoration: none; font-size: 13px;
  background: linear-gradient(90deg, var(--sw, var(--primary)) 0 4px, var(--surface) 4px); box-shadow: inset 0 0 0 1px var(--border); }
.rg-near-tile b { font-size: 14.5px; }
.rg-near-tag { color: var(--muted); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rg-states { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.rg-states a { display: grid; padding: 9px 12px; border-radius: var(--r-md, 12px); color: var(--text); text-decoration: none; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.rg-states .faint { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-all-h { margin-top: var(--sp-5, 24px); }
.local-flavour .rg-colours { display: inline-flex; gap: 4px; }
.local-flavour .rg-dot { width: 9px; height: 9px; box-shadow: none; }
.local-missing { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: var(--accent-wash); }
.local-missing a { color: var(--accent-text); font-weight: 600; }
.local-pin[style] { background: var(--lp1); box-shadow: none; }
.local-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--muted); font-style: italic; }
.local-tag::before { content: "·"; margin-right: 8px; font-style: normal; color: var(--faint, var(--muted)); }
@media (max-width: 600px) { .local-tag { display: none; } }
.rg-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: var(--sp-2, 8px) 0 var(--sp-3, 12px); }
.rg-switch-row .rg-switch { margin-left: 0; }
.rg-main, .rg-pick { display: flex; flex-direction: column; min-width: 0; }
.rg-main > :not(.topbar):not(.legal), .rg-pick > :not(.topbar):not(.legal) { width: calc(100% - 2 * var(--gutter, 16px)); margin-left: auto; margin-right: auto; }
.rg-main > .rg-sec, .rg-main > .rg-part { margin-top: var(--sp-5, 24px); }
.rg-kicker { display: block; }
.rg-kicker svg { vertical-align: -2px; margin-right: 4px; }
.rg-hero .btn.rg-ghost, :root[data-theme="light"] .rg-hero .btn.rg-ghost { background: rgba(0,0,0,.32); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.rg-hero .btn.btn-strong, :root[data-theme="light"] .rg-hero .btn.btn-strong { background: #fff; color: #111; }
.rg-search .input.rg-q, .rg-ac .input.rg-q { padding-left: 38px; }
.rg-search-ic { z-index: 1; }
.rg-ac { flex-direction: column; align-items: stretch; }
.rg-ac .rg-ac-list { position: static; margin-top: 6px; box-shadow: inset 0 0 0 1px var(--border); }
.rg-ac .rg-search-ic { top: 26px; }
.rg-kicker svg { display: inline-block; }
.rg-hero .rg-ghost { background: rgba(0,0,0,.32) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4) !important; }
.rg-hero .btn-strong { background: #fff !important; color: #111 !important; }
.rg-flavour { grid-column: 1 / -1; }
.rg-fl-cols { display: grid; gap: 4px 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .rg-fl-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
ul.rg-chips { display: flex; flex-wrap: wrap; }
ul.rg-chips > li { display: inline-flex; }
@media (min-width: 900px) { .rg-fl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rg-fl-teams { grid-column: 1 / -1; } }
.rg-search .rg-q, .rg-ac .rg-q { padding-left: 40px !important; }
.rg-pick-line { display: block; }
.rg-pick-line .rg-dot { display: inline-block; margin-right: 6px; vertical-align: 0; }
.rg-ac .rg-q { flex: none; }
.rg-ac-foot { gap: 6px 16px; margin-top: 4px; }
@media (min-width: 601px) { .local-flavour .lf-tag { display: none; } }

/* ---- round 018: where you are, one step away ---- */
/* Home's Local section when nothing says where you are: "Pick your area". */
.local-pick { display: flex; align-items: center; gap: 12px; margin: 0 10px 10px; padding: 12px 14px; border-radius: var(--r-md, 12px);
  color: var(--text); text-decoration: none; background: color-mix(in srgb, var(--surface-2, var(--surface, #16161f)) 80%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, var(--border, transparent)); }
.local-pick:hover { box-shadow: inset 0 0 0 1px var(--primary); }
.local-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.local-pick-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: var(--create-fill, linear-gradient(115deg, #4C1DE6, #9D1AA8 52%, #E8335A)); }
.local-pick b { display: block; font-size: 15.5px; }
.local-pick .sub { display: block; font-size: 13px; color: var(--muted); }
.local-pick .grow { min-width: 0; flex: 1; }
/* The area chip in Home's header. */
.home-rg { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 46%; height: 34px; padding: 0 12px 0 10px;
  margin-left: 10px; border-radius: var(--r-pill, 999px); font-size: 13.5px; font-weight: 650; color: var(--text); text-decoration: none;
  background: color-mix(in srgb, var(--dot, var(--primary)) 14%, var(--surface, transparent));
  box-shadow: inset 0 0 0 1px var(--border, rgba(255,255,255,.1)); }
.home-rg:hover { box-shadow: inset 0 0 0 1px var(--primary); }
.home-rg-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-rg.is-unsure { color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent); }
@media (max-width: 480px) { .home-rg { font-size: 12.5px; height: 30px; padding: 0 10px 0 8px; margin-left: 6px; } }
/* A phone has no room for the word mark and a whole area name: the logo alone, so the chip reads in full ("Pick your area", not "Pic…"). */
@media (max-width: 480px) { :root .home-top:has(.home-rg) .brand .brand-word { display: none; } .home-rg { max-width: none; flex: 0 1 auto; } }
/* Onboarding's area step. */
.ob-area-now { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 15px; }
.ob-area-det { margin: 0 0 12px; }
.ob-area-ac { margin: 4px 0 14px; }
.ob-area-suggest .section-title { margin: 6px 0 8px; }
.ob-chip .rg-dot { width: 9px; height: 9px; margin-right: 6px; box-shadow: none; }
/* a region picture's credit: small, over the photo's corner */
.wall-credit { position: absolute; right: 10px; bottom: 6px; z-index: 2; max-width: 70%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; line-height: 1.3; color: rgba(255,255,255,.78); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.wall-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); }
.club-head .wall-credit { bottom: auto; top: 64px; }
/* the hub's local layer (flavour v2) */
.rg-welcome { margin: 0 0 var(--sp-4, 16px); max-width: 62ch; font-size: 16px; line-height: 1.5; color: var(--text); }
.rg-ideas { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.rg-ideas li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md, 12px); background: var(--surface-2, transparent); }
.rg-ideas .grow { min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.rg-ideas .faint { font-size: 12.5px; }
.rg-things { margin-top: 8px; }
.rg-when { font-size: 12px; font-weight: 650; color: var(--accent-text); }
.rg-pride { margin: 0 0 var(--sp-3); font-size: 15px; line-height: 1.5; }
.rg-culture .rg-history li { line-height: 1.45; }
.rg-newcomer { margin-top: var(--sp-3); }
.rg-newcomer > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.rg-newcomer .rg-items { margin-top: var(--sp-2); }
.rg-weather { display: flex; gap: 6px; align-items: flex-start; }
.rg-slang { margin: 0; display: grid; gap: 8px; }
.rg-slang div { display: grid; gap: 2px; }
.rg-slang dt { font-weight: 700; }
.rg-slang dd { margin: 0; color: var(--muted); font-size: 14px; }
/* a local room's conversation starters, while nothing has been said */
.chat-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px 12px; }
.chat-starters p { width: 100%; text-align: center; margin: 0; font-size: 13px; }
.chat-starters .chip { max-width: 100%; white-space: normal; text-align: left; }
/* the hub's photos from locals */
.rg-lw-grid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rg-lw-grid li { display: flex; flex-direction: column; gap: 4px; }
.rg-lw-grid img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md, 12px); }
.rg-lw-bar { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; }
.rg-lw-bar .faint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-lw-vote { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: var(--r-pill, 999px); background: none; color: var(--text); font: inherit; cursor: pointer; }
.rg-lw-vote[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-text); border-color: transparent; }
.rg-lw-report { width: 28px; height: 28px; }
.rg-lw-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rg-lw-own { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.rg-lw-form .rg-small { width: 100%; margin: 0; }

/* The region hub: this time of year, and a local saying (region_culture.go). */
.rg-season { padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; }
.rg-phrase { display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-3) 0; }

/* css/identity.css */
/* identity.css: "which profile am I?" (identity.html, identity.js): the composer's
   "as @handle" chip, the move-messages picker, the toast's Change, tiny "as" avatars,
   and the profile page's tabs. */

/* ---- the composer chip ---- */
.as-chip { display: inline-flex; align-items: center; gap: 6px; margin: 6px var(--gutter) 0; padding: 3px 10px 3px 3px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semi); cursor: pointer; max-width: calc(100% - 2 * var(--gutter)); }
.as-chip:hover { color: var(--ink); border-color: var(--border-strong); }
.as-chip span:not(.av) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-chip .as-caret { font-size: 10px; opacity: .7; }
.as-chip .av-xs { width: 20px; height: 20px; font-size: 9px; }
.composer:has(.as-chip) .inputbar { border-top: 0; }
.composer:has(.as-chip) { border-top: 1px solid var(--border); background: var(--surface); }

/* ---- moved messages ---- */
.msg-moved { font-size: var(--fs-xs); color: var(--faint); font-style: italic; margin-left: 6px; cursor: help; }

/* ---- picking messages to move ---- */
.move-bar { display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--gutter); border-top: 1px solid var(--border); background: var(--surface); flex: none; }
.move-bar[hidden] { display: none; }
.move-count { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.is-selecting #chat-list > .msg { transition: opacity var(--dur-2) var(--ease); }
.is-selecting #chat-list > .msg:not(.mine) { opacity: .38; }
.is-selecting #chat-list > .msg.mine { cursor: pointer; position: relative; }
.is-selecting #chat-list > .msg.mine .msg-tools { display: none; }
.is-selecting #chat-list > .msg.mine::before { content: ""; position: absolute; left: 6px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--surface); }
.is-selecting #chat-list > .msg.mine.is-picked::before { background: var(--primary); border-color: var(--primary);
  box-shadow: inset 0 0 0 3px var(--surface); }
.is-selecting #chat-list > .msg.mine.is-picked .bubble { outline: 2px solid var(--primary); outline-offset: 2px; }
.msg.is-moved-away { display: none; }
.move-list .move-club { font-weight: var(--fw-semi); }

/* ---- the toast's action ("Liked as @x · Change") ---- */
.toast.has-act { display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px); }
.toast[hidden] { display: none; }
.toast-act { border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 2px; }

/* ---- "as" avatars on Chats rows and the You page ---- */
.as-av { display: inline-grid; flex: none; margin-left: 4px; }
.as-av .av-xs { width: 20px; height: 20px; font-size: 9px; box-shadow: 0 0 0 2px var(--surface); }

/* ---- the profile page's tabs (Pops · Clubs · About) ---- */
.profile-tabs { display: flex; gap: 4px; margin: var(--sp-4, 16px) 0 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted);
  font-weight: var(--fw-semi); font-size: var(--fs-sm); white-space: nowrap; text-decoration: none; }
.profile-tab:hover { color: var(--ink); }
.profile-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }
.profile-tab .n { color: var(--faint); font-weight: var(--fw-medium); }
.profile-about dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.profile-about dt { color: var(--muted); font-size: var(--fs-sm); }
.profile-about dd { margin: 0; }
.profile-people { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-people a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }
.profile-people a:hover { border-color: var(--border-strong); }
.page-profile.app .profile { padding-bottom: calc(var(--tabbar-h, 64px) + 24px); }
.profile-empty { padding: 32px 0; text-align: center; }
.about-card { padding: var(--sp-4, 16px); display: grid; gap: var(--sp-3, 12px); }
.about-bio { margin: 0; max-width: 60ch; }
.about-connect { margin: 0; font-size: var(--fs-sm); }
/* inside the app's shell: no right rail, the page as wide as the public one */
@media (min-width: 1000px) {
  .page-profile.app .shell { grid-template-columns: minmax(0, 1000px); }
  .profile.in-shell { max-width: 1000px; padding: 0; }
}
.profile-top { margin: 0 calc(-1 * var(--gutter)); }
.also-you { margin: var(--sp-3, 12px) var(--sp-1, 4px) 0; align-items: center; }
.also-you .av-xs { width: 22px; height: 22px; font-size: 9px; }
.self-empty { margin: var(--sp-3, 12px) var(--sp-1, 4px) 0; }
.toast.has-act .toast-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.toast.has-act .toast-msg::after { content: " ·"; }
.toast-act { flex: none; }

/* css/trust.css */
/* trust.css: blocking (block.js), shared by every page that shows other
   people's words: chat rows fold away, menus carry Block. */

/* A blocked person's message: a quiet stub, the row's own content hidden
   until "show". The stub keeps its place so the conversation still reads. */
.chat-list .msg.is-blocked { grid-template-columns: 1fr; }
.chat-list .msg.is-blocked > :not(.msg-blocked) { display: none !important; }
.msg-blocked {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 2px 0 2px 44px;
  padding: 4px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-pill, 999px);
  background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-xs, 12.5px); cursor: pointer;
}
.msg-blocked:hover { color: var(--text); border-style: solid; }
.msg-blocked-show { font-weight: var(--fw-bold, 700); color: var(--text); }
.msg-blocked-show::before { content: "·"; margin-right: 6px; color: var(--muted); font-weight: normal; }
@media (max-width: 639px) { .msg-blocked { margin-left: 36px; } }

/* A comment's ⋯: Report and Block. */
.comment-menu { position: relative; flex: none; }
.comment-menu summary { list-style: none; display: grid; place-items: center; }
.comment-menu summary::-webkit-details-marker { display: none; }
.comment-menu .menu-list { right: 0; left: auto; min-width: 210px; }
.profile-menu { position: relative; }
.profile-menu summary { list-style: none; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu .menu-list { right: 0; left: auto; min-width: 220px; }

/* css/looks.css */
/* looks.css: what the looks (look-a.css + look-a-lite.css, look-c.css) have in common.
   Everything is scoped to :root[data-look], so with no look set the site is
   exactly the default. Each look file sets the tokens these rules read:
     --wm-color                               the wordmark ink (the mark is always the original)
     --create-fill, --create-ring, --create-glow, --create-text   the Create/Build/Publish button
     --wall-scrim, --hero-bg                  club photos and the logged-out hero
     --display-weight, --display-track, --title-font   type
     --r-bubble                               chat bubbles
   When a direction is chosen, fold this file and its look file into tokens.css /
   components.css and drop the [data-look] scoping. */

@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root[data-look] {
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 10px;
  --r-bubble: 14px;
  --display-weight: 700;
  --display-track: -.02em;
  --title-font: var(--font-display);
  --wm-h: 26px;
  --create-text: #fff;
  --wall-scrim:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.16) 58%, rgba(0,0,0,.72) 100%),
    radial-gradient(120% 90% at 0% 100%, rgba(0,0,0,.35), transparent 60%);
}
:root[data-look] body { font-feature-settings: "ss01" 0, "cv11" 1; letter-spacing: -.003em; }

/* ---------- type ---------- */
:root[data-look] .display,
:root[data-look] .club-name { font-weight: var(--display-weight); letter-spacing: var(--display-track); }
:root[data-look] :is(.ask-label, .pop-title, .profile-name, .auth-main h1, .home-top .title, .topbar .title, .sheet-body h2, .settings-intro h2, .auth-side h2, .empty h3, .aside-join h2) {
  font-family: var(--title-font); font-weight: var(--display-weight); letter-spacing: var(--display-track);
}

/* ---------- brand: the ORIGINAL gradient P (slow sheen, breathing halo) in every look,
   beside one outlined wordmark (Sora Bold, tracked tight) used as a mask, so it takes
   the look's ink colour (--wm-color) and stays identical everywhere. ---------- */
:root[data-look] .brand { gap: 9px; }
:root[data-look] .brand img { --logo: 60px; }
:root[data-look] .brand-word {
  display: block; flex: none; font-size: 0; color: var(--wm-color, var(--text));
  height: var(--wm-h); width: calc(var(--wm-h) * 3.69);
  background: currentColor;
  -webkit-mask: url(../../img/wordmark-a.svg) no-repeat 0 50% / contain; mask: url(../../img/wordmark-a.svg) no-repeat 0 50% / contain;
}
:root[data-look] .topbar .brand { --wm-h: 27px; }
@media (min-width: 1000px) {
  :root[data-look] .rail .brand { padding: 2px 10px 0 12px; margin-bottom: var(--sp-3); gap: 11px; --wm-h: 32px; }
  :root[data-look] .rail .brand img { --logo: 74px; }
}
:root[data-look] .auth-main .brand { --wm-h: 30px; }
:root[data-look] .auth-main .brand img { --logo: 68px; }

/* ---------- the Create / Build / Publish button: an animated gradient ring ---------- */
:root[data-look] .btn-create {
  border: 2px solid transparent; color: var(--create-text);
  background: var(--create-fill) padding-box, conic-gradient(from var(--ring), var(--create-ring)) border-box;
  box-shadow: var(--create-glow);
  animation: look-ring 3.6s linear infinite;
}
:root[data-look] .btn-create:hover { background: var(--create-fill) padding-box, conic-gradient(from var(--ring), var(--create-ring)) border-box; filter: brightness(1.08) saturate(1.05); }
@keyframes look-ring { to { --ring: 360deg; } }
:root[data-look] .tab-create .ic-tile {
  border: 2px solid transparent; border-radius: var(--r-pill);
  background: var(--create-fill) padding-box, conic-gradient(from var(--ring), var(--create-ring)) border-box;
  box-shadow: var(--create-glow); animation: look-ring 3.6s linear infinite; color: var(--create-text);
}
:root[data-look] .shelf-add .ic-tile { background: var(--create-fill); border-radius: var(--r-pill); color: var(--create-text); }
:root[data-look] .meter.is-create > i { background: var(--create-bar, var(--create-fill)); }
/* the composer wears the same ring, and it turns while you type */
:root[data-look] .ask-box {
  border-radius: var(--r-lg);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--ring), var(--create-ring)) border-box;
}
:root[data-look] .ask-box:focus-within { animation: look-ring 6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  :root[data-look] :is(.btn-create, .tab-create .ic-tile, .ask-box) { animation: none !important; --ring: 210deg; }
}

/* ---------- radii: small on surfaces, round only on buttons, avatars, pills ---------- */
:root[data-look] .bubble { border-radius: var(--r-bubble); }
:root[data-look] .mg-body .bubble:not(:last-child) { border-bottom-left-radius: 4px; }
:root[data-look] .mg-body .bubble + .bubble { border-top-left-radius: 4px; }
:root[data-look] .msg-group.mine .mg-body .bubble:not(:last-child) { border-bottom-left-radius: var(--r-bubble); border-bottom-right-radius: 4px; }
:root[data-look] .msg-group.mine .mg-body .bubble + .bubble { border-top-left-radius: var(--r-bubble); border-top-right-radius: 4px; }
:root[data-look] .bubble-pop .cover { border-radius: var(--r-sm); }
:root[data-look] .shelf-pill { border-radius: var(--r-pill); padding-right: 18px; }
:root[data-look] .shelf-pill img { border-radius: var(--r-pill); width: 64px; }
:root[data-look] .example { border-radius: var(--r-md); }
:root[data-look] .empty-art { border-radius: var(--r-pill); }
:root[data-look] .mesh-chip { border-radius: var(--r-sm); }
:root[data-look] .mesh-dot { border-radius: 50%; }
:root[data-look] .pick .cover { border-radius: var(--r-sm); }
:root[data-look] .joinbar { border-radius: var(--r-pill); }
:root[data-look] .inputbar-field { border-radius: calc(var(--hit) / 2); }
:root[data-look] .inputbar-field.is-multi { border-radius: 16px; }

/* ---------- clubs wear photographs, never colour fields ----------
   An uploaded wallpaper arrives inline; a club without one gets a default photo
   picked by its mesh name (stable, from the id). */
:root[data-look] :is(.club-head, .cc-head, .club-mini-band, .mesh-chip, .mesh-dot, .near-wall) { background-color: #15131c; background-size: cover; background-position: center; }
:root[data-look] :is(.club-head, .cc-head, .club-mini-band, .mesh-chip, .mesh-dot, .near-wall):is(.mesh-tidepool, .mesh-meadow) { background-image: url(../../wallpapers/default-1.webp); }
:root[data-look] :is(.club-head, .cc-head, .club-mini-band, .mesh-chip, .mesh-dot, .near-wall):is(.mesh-sherbet, .mesh-citrus) { background-image: url(../../wallpapers/default-2.webp); }
:root[data-look] :is(.club-head, .cc-head, .club-mini-band, .mesh-chip, .mesh-dot, .near-wall):is(.mesh-aurora, .mesh-space) { background-image: url(../../wallpapers/default-3.webp); }
:root[data-look] :is(.club-head, .cc-head, .club-mini-band, .mesh-chip, .mesh-dot, .near-wall):is(.mesh-dusk, .mesh-peach) { background-image: url(../../wallpapers/default-4.webp); }
:root[data-look] :is(.club-head, .cc-head, .club-mini-band)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--wall-scrim);
}
:root[data-look] .mesh-chip { box-shadow: inset 0 0 0 40px rgba(0,0,0,.28); text-shadow: 0 1px 3px rgba(0,0,0,.5); font-family: var(--font-sans); font-weight: 800; letter-spacing: -.02em; }
:root[data-look] .mesh-grain::after { display: none; }
:root[data-look] .cc-head { min-height: 132px; padding: var(--sp-4); }
:root[data-look] .cc-head .cc-title, :root[data-look] .club-head .club-name, :root[data-look] .club-mini-band .club-name { text-shadow: 0 1px 20px rgba(0,0,0,.35); }
:root[data-look] .club-head { padding-bottom: var(--sp-5); min-height: 216px; display: flex; flex-direction: column; justify-content: space-between; }
@media (min-width: 1000px) { :root[data-look] .club-head { min-height: 248px; } }
:root[data-look] .club-mini-band { min-height: 112px; }
:root[data-look] .live-pill { background: rgba(10, 10, 14, .5); color: #fff; backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
:root[data-look] .joined { background: rgba(10,10,14,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
:root[data-look] .icon-btn.on-mesh { background: rgba(10,10,14,.36); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

/* ---------- a profile wears a photo too (uploadable like a club's); the hero and
   empty states get the deep gradient, never pastel ---------- */
:root[data-look] .profile-band { background-color: #15131c; background-size: cover; background-position: center 60%; }
:root[data-look] .profile-band:is(.mesh-tidepool, .mesh-meadow) { background-image: url(../../wallpapers/default-1.webp); }
:root[data-look] .profile-band:is(.mesh-sherbet, .mesh-citrus, .mesh-peach) { background-image: url(../../wallpapers/default-4.webp); }
:root[data-look] .profile-band:is(.mesh-aurora, .mesh-space) { background-image: url(../../wallpapers/default-3.webp); }
:root[data-look] .profile-band.mesh-dusk { background-image: url(../../wallpapers/default-2.webp); }
:root[data-look] :is(.hello, .empty-art):is(.mesh) { background-image: var(--hero-bg); background-color: #120d24; }
:root[data-look] .hello h2 { text-shadow: none; }

/* ======================================================================
   POLISH (all looks). Depth, motion and finish, driven by a few tokens each
   look sets:
     --glow-a, --glow-b        the two ambient light colours (hero, cards, empty art)
     --lift                    the shadow a card lifts into on hover
     --card-hover-ring         the edge a card gains on hover
     --skel-a, --skel-b        skeleton base and its passing shine
   Every loop and transition here is off under prefers-reduced-motion.
   ====================================================================== */
:root[data-look] {
  --glow-a: rgba(122, 59, 255, .55);
  --glow-b: rgba(255, 77, 141, .45);
  --lift: none;
  --card-hover-ring: var(--border-strong);
  --skel-a: var(--surface-2);
  --skel-b: color-mix(in srgb, var(--surface-3) 70%, #fff 30%);
}

/* ---------- page and section transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  :root[data-look] .rail { view-transition-name: rail; }
  :root[data-look] .tabbar { view-transition-name: tabbar; }
  ::view-transition-old(root) { animation: 160ms var(--ease) both vt-out; }
  ::view-transition-new(root) { animation: 300ms var(--ease-out) both vt-in; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
  :root[data-look] :is(.main, .aside, .profile, .auth-card) { animation: page-in .5s var(--ease-out) backwards; }
  :root[data-look] .aside { animation-delay: .08s; }
  @keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
  /* feed and grid items rise into place as they scroll in (browsers without scroll timelines just show them) */
  @supports (animation-timeline: view()) {
    :root[data-look] :is(.feed > .card, .pop-grid > .mini-pop, .plan-tier) {
      animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 26%;
    }
    @keyframes rise-in { from { opacity: .25; transform: translateY(28px) scale(.985); } }
  }
}

/* ---------- press and hover: everything you can touch answers ---------- */
:root[data-look] :is(.btn, .chip, .act, .icon-btn, .send, .cc-reply, .shelf-pill, .near-tile, .rail-nav a, .rail-clubs a, .tab, .choice, .example, .menu-row) {
  transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
}
:root[data-look] :is(.btn, .chip, .act, .send, .cc-reply, .shelf-pill, .choice, .example, .menu-row):active { transform: scale(.96); }
:root[data-look] :is(.icon-btn, .tab):active { transform: scale(.9); }
:root[data-look] .near-tile:active { transform: scale(.97); }
@media (hover: hover) {
  :root[data-look] .btn:not(.btn-quiet, [disabled]):hover { transform: translateY(-1px); }
  :root[data-look] .btn-create:hover { transform: translateY(-2px); box-shadow: var(--create-glow); }
  :root[data-look] :is(.rail-nav .ic, .rail-clubs .mesh-chip, .act .ic) { transition: transform var(--dur-2) var(--ease-spring); }
  :root[data-look] :is(.rail-nav a:hover .ic, .rail-clubs a:hover .mesh-chip) { transform: scale(1.08); }
  :root[data-look] .act:hover .ic { transform: scale(1.12); }
}
/* a like lands with a little pop */
@media (prefers-reduced-motion: no-preference) {
  :root[data-look] .act[aria-pressed="true"] .ic { animation: like-pop .42s var(--ease-spring); }
  @keyframes like-pop { 40% { transform: scale(1.35); } }
}

/* ---------- cards: layered surfaces, a lift on hover, a glow in the pop's own colour ---------- */
:root[data-look] .card { position: relative; }
:root[data-look] :is(.pop-card, .club-card, .person-card, .club-mini, .plan-tier) { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease); }
@media (hover: hover) {
  :root[data-look] :is(.pop-card, .club-card, .person-card, .club-mini, .plan-tier):hover {
    transform: translateY(-3px); border-color: var(--card-hover-ring);
    box-shadow: var(--lift);
  }
  :root[data-look] :is(.pop-card, .mini-pop):hover .cover img { transform: scale(1.035); }
}
:root[data-look] .cover img { transition: transform .7s var(--ease-out); }

/* covers: a lit inner edge, and (where the look asks for it) a scrim; the Play pill is its own glass */
:root[data-look] :is(.pop-card, .mini-pop) .cover::after {
  background: var(--cover-scrim, none);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.2);
}
:root[data-look] .cover-play {
  z-index: 1; height: 32px; padding: 0 14px 0 11px; gap: 7px; background: rgba(10, 10, 16, .62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5);
  transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2);
}
@media (hover: hover) { :root[data-look] .pop-card:hover .cover-play { transform: scale(1.06); background: rgba(10,10,16,.8); } }

/* skeleton: until a cover's frame arrives, a shine passes over it (a few passes, then rests) */
:root[data-look] :is(.cover, .stage-frame) { background-color: var(--skel-a); }
:root[data-look] .cover::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--skel-b) 55%, transparent) 50%, transparent 80%);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-look] .cover::before { animation: skel 1.5s var(--ease) 6; }
  @keyframes skel { to { transform: translateX(100%); } }
}
/* the reusable skeleton for script-inserted placeholders: .skel on any block, .skel-line for text */
:root[data-look] .skel { position: relative; overflow: hidden; background: var(--skel-a); border-radius: var(--r-md); }
:root[data-look] .skel-line { height: 12px; border-radius: var(--r-pill); background: var(--skel-a); }
:root[data-look] .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--skel-b) 55%, transparent) 50%, transparent 80%); transform: translateX(-100%); }
@media (prefers-reduced-motion: no-preference) { :root[data-look] .skel::after { animation: skel 1.5s var(--ease) infinite; } }

/* pop card type: the title is a headline, the meta row is quiet and tidy */
:root[data-look] .pop-card .pc-by { padding: 14px var(--sp-2) 12px 16px; }
:root[data-look] .pc-body { padding: 14px 18px 2px; gap: 6px; }
:root[data-look] .pc-body h3 { font-family: var(--title-font); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 21px; line-height: 1.15; }
:root[data-look] .pc-body p { font-size: var(--fs-base); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-look] .pc-actions { padding: 6px 8px 8px; }
:root[data-look] .keel { gap: 7px; }
:root[data-look] .keel::before { box-shadow: none; }

/* club cards: the photo is the headline; live sits on glass and shimmers */
:root[data-look] .club-card .cc-head { min-height: 156px; padding: var(--sp-4) 18px; }
:root[data-look] .cc-msgs { padding: 14px 18px 6px; }
:root[data-look] .cc-foot { padding: 8px 14px 14px; }

/* ---------- live and "here now": a breathing dot and a shine that passes now and then ---------- */
:root[data-look] .live-pill { position: relative; overflow: hidden; isolation: isolate; height: 28px; padding: 0 12px 0 10px; gap: 7px; font-weight: 700; letter-spacing: .01em; }
:root[data-look] .live-pill::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.34) 50%, transparent 70%);
  transform: translateX(-120%);
}
:root[data-look] .live-dot { position: relative; background: var(--live); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-look] .live-pill::after { animation: live-shine 3.8s var(--ease) infinite; }
  @keyframes live-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
  :root[data-look] .live-dot { animation: none; }
  :root[data-look] .live-dot::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--live); opacity: 0;
    animation: live-ring 2.2s var(--ease-out) infinite;
  }
  @keyframes live-ring { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
}
/* the strip's "here now" sits on the same glass */
:root[data-look] .club-strip .near-here { display: inline-flex; width: max-content; height: 22px; padding: 0 9px 0 8px; border-radius: var(--r-pill); background: rgba(10,10,14,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11.5px; font-weight: 700; opacity: 1; text-shadow: none; }
:root[data-look] .club-strip .near-name { font-size: 16px; }
:root[data-look] .club-strip .near-text { gap: 6px; }
:root[data-look] .club-strip :is(.near-tile, .near-more) { height: 104px; border-radius: var(--r-lg); }
@media (min-width: 1000px) { :root[data-look] .club-strip .near-tile { height: 112px; flex-basis: 184px; } :root[data-look] .club-strip .near-more { height: 112px; } }
@media (hover: hover) { :root[data-look] .club-strip .near-tile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } }

/* ---------- the hero: a lit stage with slow-drifting light behind the words ---------- */
:root[data-look] .hello { position: relative; overflow: hidden; isolation: isolate; padding: 30px 26px 26px; gap: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
@media (min-width: 640px) { :root[data-look] .hello { padding: 44px 40px 38px; } }
:root[data-look] .hello::before, :root[data-look] .hello::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(40px); display: block; opacity: .8;
}
:root[data-look] .hello::before { width: 60%; aspect-ratio: 1; right: -12%; top: -38%; inset: -38% -12% auto auto; background: var(--glow-b); }
:root[data-look] .hello::after { width: 50%; aspect-ratio: 1; inset: auto auto -40% -10%; background: var(--glow-a); }
@media (prefers-reduced-motion: no-preference) {
  :root[data-look] .hello::before { animation: drift-a 16s ease-in-out infinite alternate; }
  :root[data-look] .hello::after { animation: drift-b 19s ease-in-out infinite alternate; }
  @keyframes drift-a { to { transform: translate(-28%, 22%) scale(1.15); } }
  @keyframes drift-b { to { transform: translate(34%, -18%) scale(.9); } }
}
:root[data-look] .hello .cluster { margin-top: 6px; }

/* ---------- empty states: a lit tile in a slowly turning ring, a headline, one action ---------- */
:root[data-look] .empty { position: relative; isolation: isolate; gap: 14px; padding: 48px 24px 40px; }
:root[data-look] .empty::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 18px; width: 280px; height: 190px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow-a), transparent); filter: blur(12px); opacity: .45; pointer-events: none;
}
:root[data-look] .empty-art { position: relative; width: 92px; height: 92px; margin-bottom: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
:root[data-look] .empty-art::after {
  content: ""; position: absolute; inset: -7px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ring), var(--create-ring));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}
@media (prefers-reduced-motion: no-preference) { :root[data-look] .empty-art::after { animation: look-ring 7s linear infinite; } }
:root[data-look] .empty-art .ic { width: 38px; height: 38px; stroke-width: 1.8; }
:root[data-look] .empty h3 { font-size: 24px; }
:root[data-look] .empty p { font-size: var(--fs-md); line-height: 1.5; }
:root[data-look] .empty .btn { margin-top: 6px; }

/* ---------- rail and bars ---------- */
@media (min-width: 1000px) {
  :root[data-look] .rail { gap: 18px; padding-top: 26px; }
  :root[data-look] .rail .btn-create { height: 50px; font-size: 16px; margin: 2px 0 4px; }
  :root[data-look] .rail .btn-create .ic { width: 20px; height: 20px; }
  :root[data-look] .rail-nav a { height: 48px; gap: 15px; padding: 0 14px; border-radius: var(--r-pill); }
  :root[data-look] .rail-clubs a { border-radius: var(--r-pill); padding: 0 12px 0 8px; }
  :root[data-look] .rail-clubs .mesh-chip { border-radius: 50%; }
  :root[data-look] .rail-me { border-radius: var(--r-pill); padding: 8px 12px 8px 8px; border: 1px solid var(--border); }
}
:root[data-look] .tab-create .ic-tile { width: 50px; height: 34px; }
:root[data-look] :is(.home-top, .topbar) .title { font-family: var(--title-font); font-weight: var(--display-weight); letter-spacing: var(--display-track); }
:root[data-look] .home-top .title { font-size: 28px; }

/* ---------- one icon size per role: 20 in tiles and rows, 18 in pills and actions ---------- */
:root[data-look] :is(.row-icon, .add-icon) .ic { width: 20px; height: 20px; }
:root[data-look] :is(.chip, .btn-sm, .act, .menu-list, .menu-row, .cover-play) .ic { width: 18px; height: 18px; }
:root[data-look] .cover-play .ic { width: 14px; height: 14px; fill: currentColor; }
:root[data-look] .row-icon { border-radius: 50%; }

/* ---------- forms, menus, toasts ---------- */
:root[data-look] .input { border-radius: var(--r-pill); padding: 0 20px; }
:root[data-look] textarea.input { border-radius: var(--r-lg); }
:root[data-look] .menu-list { border-radius: var(--r-lg); padding: 6px; transform-origin: top right; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-look] .menu[open] .menu-list { animation: pop-in var(--dur-2) var(--ease-out); }
  @keyframes pop-in { from { opacity: 0; transform: scale(.94) translateY(-4px); } }
}
:root[data-look] .menu-list :is(a, button) { border-radius: var(--r-pill); }

/* ---------- plans: a price you'd want to pay ---------- */
:root[data-look] .plan-tier { padding: 22px 20px; gap: 10px; }
:root[data-look] .plan-tier-head h3 { font-family: var(--title-font); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 22px; }
:root[data-look] .plan-price { font-family: var(--title-font); font-size: 32px; letter-spacing: -.03em; line-height: 1.05; }
:root[data-look] .plan-lines { gap: 9px; }
:root[data-look] .plan-tier.is-current {
  border: 2px solid transparent; box-shadow: var(--create-glow);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--ring), var(--create-ring)) border-box;
}
@media (prefers-reduced-motion: no-preference) { :root[data-look] .plan-tier.is-current { animation: look-ring 6s linear infinite; } }
:root[data-look] .plan-tier.is-current .chip-mini { background: var(--create-fill); color: #fff; }

/* ---------- profile and pop page ---------- */
:root[data-look] .profile-band { box-shadow: none; }
:root[data-look] .profile-name { font-size: 34px; }
:root[data-look] .stats b { font-family: var(--title-font); font-size: 18px; }
:root[data-look] .pop-title { font-size: 32px; line-height: 1.1; }
:root[data-look] .play-big { height: 62px; padding: 0 30px 0 24px; font-size: 18px; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-look] .play-big::before {
    content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(255,255,255,.6); z-index: -1;
    animation: play-halo 2.6s var(--ease-out) infinite;
  }
  @keyframes play-halo { 0% { transform: scale(.94); opacity: .9; } 70%, 100% { transform: scale(1.16); opacity: 0; } }
}

/* ---------- a conversation with nothing in it yet: the system line becomes the empty state ---------- */
:root[data-look] .chat-list:not(:has(.msg-group, .msg)) { flex: 1 0 auto; justify-content: center; }
:root[data-look] .chat-list:not(:has(.msg-group, .msg)) .msg-system {
  display: grid; justify-items: center; gap: 18px; max-width: 32ch; margin: auto; padding: 40px 0;
  font-size: var(--fs-md); line-height: 1.5; color: var(--muted);
}
:root[data-look] .chat-list:not(:has(.msg-group, .msg)) .msg-system::before {
  content: ""; width: 92px; height: 92px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.4A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 12h.01M12 12h.01M15.5 12h.01' stroke-width='2.6'/%3E%3C/svg%3E") center / 40px no-repeat,
    var(--create-fill);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
:root[data-look] .chat-list:has(.msg-group, .msg) .msg-system { margin-bottom: var(--sp-2); }

/* ---------- sign in ---------- */
:root[data-look] .auth-main h1 { font-size: 34px; }

/* css/look-a.css */
/* Look A, "Afterglow": dark-first and cinematic. Near-black with violet and rose
   light leaking in from the edges, glass surfaces, photographs doing the colour work,
   and one deep gradient that belongs to making things.
   Type: Sora (display, places and headlines) + Geist (people and UI). Both SIL OFL 1.1.
   Dark only by design: the photos and pops read best on black. */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("../../fonts/sora-latin.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../../fonts/geist-latin.woff2") format("woff2"); }

:root[data-look="a"] {
  color-scheme: dark;
  --font-display: "Sora", "Geist", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 650;
  --display-track: -.035em;

  --grape: #8B5CFF; --coral: #FF3D7F; --amber: #FF8A3D; --live: #FF3D7F;
  --pop-grad: linear-gradient(115deg, #5B21FF 0%, #B0179F 55%, #F43F5E 100%);
  --create-fill: linear-gradient(115deg, #4C1DE6 0%, #9D1AA8 52%, #E8335A 100%);
  --create-ring: #6D5BFF, #22D3EE 18%, #F0F9FF 24%, #F472B6 40%, #FB923C 58%, #8B5CFF 80%, #6D5BFF;
  --create-glow: 0 0 0 1px rgba(255,255,255,.06);
  --hero-bg:
    radial-gradient(90% 120% at 0% 0%, #5B21B6 0%, transparent 62%),
    radial-gradient(70% 110% at 100% 100%, #BE185D 0%, transparent 60%),
    radial-gradient(60% 90% at 100% 0%, #0E7490 0%, transparent 62%),
    linear-gradient(#0B0820, #0B0820);

  --cat-game: #A78BFA; --cat-toy: #F472B6; --cat-tool: #7DD3FC;
  --cat-learn: #FDBA74; --cat-data: #5EEAD4; --cat-create: #86EFAC;

  --bg: #07070C; --bg-deep: #040407;
  --surface: #101017; --surface-2: #181822; --surface-3: #22222E;
  --text: #F4F3F8; --muted: #A3A2B6; --faint: #73728A;
  --border: rgba(255, 255, 255, .075); --border-strong: rgba(255, 255, 255, .16);
  --primary: #8B5CFF; --primary-hover: #9D74FF; --primary-press: #7B47FF;
  --accent-text: #C0ABFF; --accent-wash: rgba(139, 92, 255, .16);
  --ink: #FFFFFF; --on-ink: #08080D;
  --bubble-mine: #2A1C63; --bubble-theirs: #15151E;
  --success: #34D399; --warning: #FBBF24; --danger: #FB5470; --danger-wash: rgba(251, 84, 112, .12);
  --focus: 0 0 0 3px rgba(139, 92, 255, .55);
  --shadow-1: none;
  --shadow-2: inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-3: 0 0 0 1px rgba(255, 255, 255, .10), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop: none;
  --scrim: rgba(3, 3, 8, .72);

  --glow-a: rgba(109, 40, 255, .62);
  --glow-b: rgba(232, 51, 90, .5);
  --lift: inset 0 1px 0 rgba(255,255,255,.08);
  --card-hover-ring: rgba(255, 255, 255, .16);
  --skel-a: #14141c;
  --skel-b: rgba(255, 255, 255, .14);
  --cover-scrim: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.3) 100%);
}

/* light leaking in from the edges; fixed so it reads as the room, not the page */
:root[data-look="a"] body {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(109, 40, 255, .17), transparent 62%),
    radial-gradient(900px 560px at -12% 108%, rgba(232, 51, 90, .10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* glass surfaces: a whisper of white, a hairline, a lit top edge */
:root[data-look="a"] :is(.card, .panel) {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
:root[data-look="a"] .btn:not(.btn-create, .btn-strong, .btn-quiet, .hello-cta, .btn-coin) { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
:root[data-look="a"] .btn:not(.btn-create, .btn-strong, .btn-quiet, .hello-cta, .btn-coin):hover { background: rgba(255,255,255,.1); }
:root[data-look="a"] .btn-strong { box-shadow: none; }
:root[data-look="a"] .chip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: var(--muted); }
:root[data-look="a"] .chip:hover { color: var(--text); }
:root[data-look="a"] :is(.chip[aria-current="page"], .chip[aria-pressed="true"], .chip.is-on, .share-to .chip.toggle:has(input:checked)) { background: #fff; border-color: #fff; color: var(--on-ink); }
:root[data-look="a"] .cc-reply, :root[data-look="a"] .inputbar-field { background: rgba(255,255,255,.05); }
:root[data-look="a"] .section-title { color: var(--faint); letter-spacing: .12em; font-size: 11px; }
:root[data-look="a"] .badge { background: linear-gradient(135deg, #8B5CFF, #E8335A); }

/* the rail and bars are smoked glass over the room */
:root[data-look="a"] .rail { border-right-color: rgba(255,255,255,.06); background: rgba(255,255,255,.012); }
:root[data-look="a"] .rail-nav a[aria-current="page"] { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
:root[data-look="a"] .topbar { background: color-mix(in srgb, var(--bg) 35%, transparent); }
:root[data-look="a"] :is(.tabbar, .inputbar) { background: rgba(12, 12, 18, .72); border-top-color: rgba(255,255,255,.07); }

/* people: avatars as lit gradients */
:root[data-look="a"] .av { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
:root[data-look="a"] .av[data-hue="0"] { --av-bg: linear-gradient(140deg, #8B5CFF, #4C1DE6); }
:root[data-look="a"] .av[data-hue="1"] { --av-bg: linear-gradient(140deg, #FF5C8A, #C0174F); }
:root[data-look="a"] .av[data-hue="2"] { --av-bg: linear-gradient(140deg, #FF9F43, #D9480F); }
:root[data-look="a"] .av[data-hue="3"] { --av-bg: linear-gradient(140deg, #2DD4BF, #0F766E); }
:root[data-look="a"] .av[data-hue="4"] { --av-bg: linear-gradient(140deg, #60A5FA, #1D4ED8); }
:root[data-look="a"] .av[data-hue="5"] { --av-bg: linear-gradient(140deg, #4ADE80, #15803D); }
:root[data-look="a"] .av[data-hue="6"] { --av-bg: linear-gradient(140deg, #E879F9, #A21CAF); }
:root[data-look="a"] .av[data-hue="7"] { --av-bg: linear-gradient(140deg, #818CF8, #3730A3); }
:root[data-look="a"] .av-xl { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px rgba(255,255,255,.1); }

/* chat: their words on glass, yours lit from within */
:root[data-look="a"] .bubble { border-color: rgba(255,255,255,.06); }
:root[data-look="a"] .msg-group.mine .bubble { background: linear-gradient(135deg, #3B1BB8, #6A1A8C); color: #fff; }
:root[data-look="a"] .you-said .bubble { background: linear-gradient(135deg, #3B1BB8, #6A1A8C); color: #fff; }
:root[data-look="a"] .new-sep { color: #FF6B9A; }
:root[data-look="a"] .club-shelf { background: rgba(10,10,15,.85); border-bottom-color: rgba(255,255,255,.06); }
:root[data-look="a"] .shelf-pill { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
:root[data-look="a"] .chat-area { background: transparent; }

/* the logged-out hero: a lit stage */
:root[data-look="a"] .hello { border: 1px solid rgba(255,255,255,.08); }
:root[data-look="a"] .hello-cta { background: #fff; color: #08080D; border-color: #fff; }
:root[data-look="a"] .aside-join h2 { background: var(--pop-grad); -webkit-background-clip: text; background-clip: text; }

/* pop stage and sign-in */
:root[data-look="a"] .stage-frame { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
:root[data-look="a"] .play-big { background: rgba(255,255,255,.96); }
:root[data-look="a"] body.page-auth { background: radial-gradient(900px 520px at 50% -10%, rgba(109,40,255,.28), transparent 70%), radial-gradient(700px 400px at 100% 110%, rgba(232,51,90,.14), transparent 70%), var(--bg); }
:root[data-look="a"] .auth-side { background: rgba(255,255,255,.025); border-left-color: rgba(255,255,255,.06); }
:root[data-look="a"] .input, :root[data-look="a"] .code-boxes input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
:root[data-look="a"] .how-steps li::before { background: rgba(255,255,255,.07); }
:root[data-look="a"] .row-icon { background: rgba(255,255,255,.06); }

/* places set big: the club name is the headline */
:root[data-look="a"] .cc-head .club-name { font-size: 28px; }
:root[data-look="a"] .club-head .club-name { font-size: 40px; }
@media (min-width: 1000px) { :root[data-look="a"] .club-head .club-name { font-size: 52px; } }
:root[data-look="a"] .hello h2 { font-size: clamp(32px, 9vw, 46px); line-height: 1.02; }
:root[data-look="a"] .ask-label { font-size: clamp(32px, 8.6vw, 44px); }

/* ---------- the snazz: the room breathes, glass catches light ---------- */
/* two slow pools of light drift behind everything (body is isolated so they sit
   above its background and below the page) */
:root[data-look="a"] body { isolation: isolate; }
:root[data-look="a"] body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 22% at 72% 18%, rgba(109, 40, 255, .20), transparent 70%),
    radial-gradient(24% 20% at 18% 82%, rgba(232, 51, 90, .12), transparent 70%),
    radial-gradient(20% 18% at 88% 78%, rgba(14, 116, 144, .12), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-look="a"] body::before { animation: room-drift 46s ease-in-out infinite alternate; }
  @keyframes room-drift { 50% { transform: translate(-4%, 3%) rotate(4deg); } 100% { transform: translate(3%, -2%) rotate(-3deg) scale(1.05); } }
}
/* glass cards: a lit top edge and a glow in the pop's own colour on hover */
:root[data-look="a"] .card::before {
  content: ""; position: absolute; z-index: 2; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
:root[data-look="a"] .club-card .cc-head { min-height: 168px; }
:root[data-look="a"] .pc-body h3 { font-size: 22px; }
:root[data-look="a"] .pc-by .who b { font-weight: 650; }
/* chips: glass pills; the current one is lit */
:root[data-look="a"] .chip { height: 38px; padding: 0 16px; }
:root[data-look="a"] :is(.chip[aria-current="page"], .chip[aria-pressed="true"], .chip.is-on) { box-shadow: none; }
/* the rail's current item gets a gradient edge */
@media (min-width: 1000px) {
  :root[data-look="a"] .rail-nav a[aria-current="page"] {
    background: linear-gradient(90deg, rgba(139,92,255,.22), rgba(232,51,90,.08) 70%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  }
  :root[data-look="a"] .rail-nav a[aria-current="page"] .ic { color: #D9CCFF; filter: none; }
  :root[data-look="a"] .rail-me { background: rgba(255,255,255,.03); }
}
/* the hero headline catches the light */
:root[data-look="a"] .hello h2 { background: linear-gradient(180deg, #fff 40%, #FFD6EC); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-look="a"] .ask-label { background: linear-gradient(100deg, #fff 30%, #E5D9FF 60%, #FFC7DE); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
/* plans: paid tiers are lit from inside */
:root[data-look="a"] .plan-tier.is-current { background: linear-gradient(160deg, #1A1033, #120D1E 60%) padding-box, conic-gradient(from var(--ring), var(--create-ring)) border-box; }
:root[data-look="a"] .plan-note { background: linear-gradient(90deg, rgba(139,92,255,.16), rgba(232,51,90,.08)); box-shadow: inset 0 0 0 1px rgba(139,92,255,.25); }
/* sign in: the card floats in the light */
:root[data-look="a"] .auth-card { box-shadow: 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.07); }


/* css/look-a-lite.css */
/* Look A Lite, "Afterglow Lite": the same personality as Afterglow, in daylight.
   Bright, faintly lavender surfaces (never stark white), frosted glass in layers,
   deep plum ink, and the SAME deep gradients doing the accent work: the turning ring
   on Create, the lit hero stage, live pills on glass, category glows. Never pastel.
   It is Afterglow plus data-theme="light" (layout.html sets that for Auto on a light
   device, or when Afterglow Lite is chosen), so every look-a.css rule applies and
   this file only re-lights it. Text meets WCAG AA on every surface it sits on.
   All motion comes from looks.css / look-a.css and stops under prefers-reduced-motion. */

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

  --cat-game: #6D28D9; --cat-toy: #BE185D; --cat-tool: #0369A1;
  --cat-learn: #B4400A; --cat-data: #0D6B63; --cat-create: #13733A;

  --bg: #F5F3FA; --bg-deep: #ECE8F5;
  --surface: #FFFFFF; --surface-2: #F1EEF8; --surface-3: #E7E2F1;
  --text: #120E22; --muted: #56506E; --faint: #625C7C;
  --border: rgba(38, 24, 92, .09); --border-strong: rgba(38, 24, 92, .2);
  --primary: #6D28F0; --primary-hover: #5F1EE0; --primary-press: #5218C8;
  --accent-text: #5B21D6; --accent-wash: rgba(109, 40, 240, .08);
  --ink: #120E22; --on-ink: #FFFFFF;
  --bubble-mine: #3B1BB8; --bubble-theirs: #FFFFFF;
  --success: #047052; --warning: #92400E; --danger: #C8102E; --danger-wash: rgba(200, 16, 46, .07);
  --focus: 0 0 0 3px rgba(109, 40, 240, .38);
  --shadow-1: none;
  --shadow-2: inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-3: 0 0 0 1px rgba(38, 24, 92, .12), 0 1px 2px rgba(38, 24, 92, .08);
  --shadow-pop: none;
  --scrim: rgba(18, 14, 34, .42);

  --create-glow: none;
  --glow-a: rgba(109, 40, 255, .42);
  --glow-b: rgba(232, 51, 90, .34);
  --lift: inset 0 1px 0 #fff;
  --card-hover-ring: rgba(109, 40, 240, .26);
  --skel-a: #ECE8F4;
  --skel-b: #FFFFFF;
  --cover-scrim: none;
  /* the stage: the same deep gradient, lit violet to magenta to rose, with no black in it */
  --hero-bg:
    radial-gradient(90% 120% at 0% 0%, #6D28D9 0%, transparent 60%),
    radial-gradient(70% 110% at 100% 100%, #E11D48 0%, transparent 62%),
    radial-gradient(60% 90% at 100% 0%, #0E7490 0%, transparent 60%),
    linear-gradient(115deg, #2E1065 0%, #5B1A8E 50%, #8A1550 100%);
}

/* the room: daylight with deep violet, rose and teal light pouring in from the edges
   (round 010: stronger, so Lite reads as Afterglow in daylight, never pastel) */
:root[data-look="a"][data-theme="light"] body {
  background:
    radial-gradient(1100px 640px at 80% -10%, rgba(109, 40, 237, .26), transparent 62%),
    radial-gradient(900px 600px at -10% 110%, rgba(225, 29, 92, .18), transparent 60%),
    radial-gradient(700px 480px at 108% 72%, rgba(14, 116, 144, .12), transparent 62%),
    linear-gradient(180deg, #F4F1FB, #EFEAF7);
  background-attachment: fixed;
}
:root[data-look="a"][data-theme="light"] body::before {
  background:
    radial-gradient(28% 22% at 72% 18%, rgba(124, 58, 237, .14), transparent 70%),
    radial-gradient(24% 20% at 18% 82%, rgba(225, 29, 92, .09), transparent 70%),
    radial-gradient(20% 18% at 88% 78%, rgba(8, 145, 178, .09), transparent 70%);
}

/* frosted glass in layers: white glass, a plum hairline, a lit top edge, a coloured shadow */
:root[data-look="a"][data-theme="light"] :is(.card, .panel) {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.74));
  border-color: rgba(38, 24, 92, .08);
  box-shadow: inset 0 1px 0 #fff;
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
}
:root[data-look="a"][data-theme="light"] .card::before { background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .4), rgba(225, 29, 92, .3), transparent); }
:root[data-look="a"][data-theme="light"] .btn:not(.btn-create, .btn-strong, .btn-quiet, .hello-cta, .btn-coin) { background: rgba(255,255,255,.82); border-color: rgba(38, 24, 92, .14); box-shadow: 0 1px 2px rgba(38, 24, 92, .06); }
:root[data-look="a"][data-theme="light"] .btn:not(.btn-create, .btn-strong, .btn-quiet, .hello-cta, .btn-coin):hover { background: #fff; border-color: rgba(109, 40, 240, .3); }
:root[data-look="a"][data-theme="light"] .btn-strong { box-shadow: none; }
:root[data-look="a"][data-theme="light"] .chip { background: rgba(255,255,255,.72); border-color: rgba(38, 24, 92, .11); color: var(--muted); box-shadow: 0 1px 2px rgba(38, 24, 92, .05); }
:root[data-look="a"][data-theme="light"] :is(.chip[aria-current="page"], .chip[aria-pressed="true"], .chip.is-on, .share-to .chip.toggle:has(input:checked)) {
  background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none;
}
:root[data-look="a"][data-theme="light"] :is(.cc-reply, .inputbar-field) { background: rgba(255,255,255,.86); border-color: rgba(38, 24, 92, .12); }

/* the rail and bars are frosted glass over the room */
:root[data-look="a"][data-theme="light"] .rail { border-right-color: rgba(38, 24, 92, .07); background: rgba(255,255,255,.42); }
:root[data-look="a"][data-theme="light"] .rail-nav a[aria-current="page"] { background: rgba(109, 40, 240, .08); box-shadow: inset 0 0 0 1px rgba(109, 40, 240, .1); }
:root[data-look="a"][data-theme="light"] .topbar { background: color-mix(in srgb, var(--bg) 38%, transparent); }
:root[data-look="a"][data-theme="light"] :is(.tabbar, .inputbar) { background: rgba(255,255,255,.8); border-top-color: rgba(38, 24, 92, .08); }
@media (min-width: 1000px) {
  :root[data-look="a"][data-theme="light"] .rail-nav a[aria-current="page"] {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(38, 24, 92, .06);
  }
  :root[data-look="a"][data-theme="light"] .rail-nav a[aria-current="page"] .ic { color: #6D28D9; filter: none; }
  :root[data-look="a"][data-theme="light"] .rail-me { background: rgba(255,255,255,.7); box-shadow: 0 1px 2px rgba(38, 24, 92, .05); }
}

/* people: the same lit gradient avatars, ringed in white */
:root[data-look="a"][data-theme="light"] .av { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
:root[data-look="a"][data-theme="light"] .av-xl { box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(38, 24, 92, .08); }

/* chat: theirs on white glass, yours lit from within (the same deep gradient) */
:root[data-look="a"][data-theme="light"] .bubble { border-color: rgba(38, 24, 92, .08); box-shadow: 0 1px 2px rgba(38, 24, 92, .05); }
:root[data-look="a"][data-theme="light"] .new-sep { color: #C2185B; }
:root[data-look="a"][data-theme="light"] .club-shelf { background: rgba(255,255,255,.86); border-bottom-color: rgba(38, 24, 92, .08); }
:root[data-look="a"][data-theme="light"] .shelf-pill { background: rgba(255,255,255,.86); box-shadow: inset 0 0 0 1px rgba(38, 24, 92, .09), 0 1px 2px rgba(38, 24, 92, .06); }

/* a pop shared in your own (gradient) bubble keeps white type */
:root[data-look="a"][data-theme="light"] :is(.msg-group.mine, .you-said) .bubble-pop :is(span, b) { color: rgba(255,255,255,.86); }
:root[data-look="a"][data-theme="light"] :is(.msg-group.mine, .you-said) .bubble-pop b { color: #fff; }
:root[data-look="a"][data-theme="light"] :is(.msg-group.mine, .you-said) .bubble-pop .keel { color: #fff; }

/* the hero stays a lit stage: the deep gradient is the point, in daylight too */
:root[data-look="a"][data-theme="light"] .hello { border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 1px rgba(38, 24, 92, .06); }
:root[data-look="a"][data-theme="light"] .hello p { color: rgba(255,255,255,.9); }
:root[data-look="a"][data-theme="light"] .hello .hello-ghost { color: #fff; }

/* headlines on light catch the gradient instead of the light */
:root[data-look="a"][data-theme="light"] .ask-label { background: linear-gradient(100deg, #120E22 25%, #5B21B6 62%, #BE185D); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* pop stage, sign-in, forms */
:root[data-look="a"][data-theme="light"] .stage-frame { box-shadow: 0 0 0 1px rgba(38, 24, 92, .08); }
:root[data-look="a"][data-theme="light"] body.page-auth {
  background: radial-gradient(900px 520px at 50% -10%, rgba(124, 58, 237, .2), transparent 70%), radial-gradient(700px 400px at 100% 110%, rgba(225, 29, 92, .12), transparent 70%), var(--bg);
}
:root[data-look="a"][data-theme="light"] .auth-side { background: rgba(255,255,255,.5); border-left-color: rgba(38, 24, 92, .07); }
:root[data-look="a"][data-theme="light"] .auth-card { box-shadow: 0 0 0 1px rgba(38, 24, 92, .07), inset 0 1px 0 #fff; }
:root[data-look="a"][data-theme="light"] :is(.input, .code-boxes input) { background: rgba(255,255,255,.9); border-color: rgba(38, 24, 92, .16); }
:root[data-look="a"][data-theme="light"] .how-steps li::before { background: rgba(109, 40, 240, .1); color: var(--accent-text); }
:root[data-look="a"][data-theme="light"] .row-icon { background: rgba(109, 40, 240, .08); color: var(--accent-text); }

/* plans: the current tier is lit glass in the turning ring */
:root[data-look="a"][data-theme="light"] .plan-tier.is-current { background: linear-gradient(160deg, #FFFFFF, #F6F1FF 60%) padding-box, conic-gradient(from var(--ring), var(--create-ring)) border-box; }
:root[data-look="a"][data-theme="light"] .plan-note { background: linear-gradient(90deg, rgba(124, 58, 237, .1), rgba(225, 29, 92, .06)); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .18); }

/* small things: the club strip lifts into a soft coloured shadow, keels glow less */
@media (hover: hover) { :root[data-look="a"][data-theme="light"] .club-strip .near-tile:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); } }
:root[data-look="a"][data-theme="light"] .keel::before { box-shadow: none; }
:root[data-look="a"][data-theme="light"] .section-title { color: var(--faint); }
:root[data-look="a"][data-theme="light"] .empty::before { opacity: .3; }

/* css/look-c.css */
/* Look C, "Punch": playful but sharp. Warm cream paper, a confident chunky
   grotesque for every headline, crisp ink outlines, and punchy colour blocks
   (hot pink, tangerine, cobalt, lime) that feel like stickers, not wallpaper.
   Type: Bricolage Grotesque (display) + Plus Jakarta Sans (UI). Both SIL OFL 1.1. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../../fonts/bricolage-grotesque-latin.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); }

:root[data-look="c"] {
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 800;
  --display-track: -.035em;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 10px;
  --r-bubble: 16px;

  --pink: #FF2D6F; --tang: #FF7A00; --cobalt: #3B3BFF; --lime: #C4F23A;
  --grape: #3B3BFF; --coral: #FF2D6F; --amber: #FF7A00; --live: #FF2D6F;
  --pop-grad: linear-gradient(105deg, #FF1F6A 0%, #FF5A1F 60%, #FF9500 100%);
  --create-fill: linear-gradient(105deg, #F0145F 0%, #FF4D1A 60%, #FF8A00 100%);
  --create-ring: #C4F23A, #3B3BFF 25%, #FF2D6F 50%, #FFD000 75%, #C4F23A;
  --create-glow: 3px 3px 0 var(--ink);
  --hero-bg:
    radial-gradient(70% 100% at 100% 0%, #FF9500 0%, transparent 60%),
    radial-gradient(80% 120% at 0% 100%, #3B3BFF 0%, transparent 62%),
    linear-gradient(#FF1F6A, #FF1F6A);

  --cat-game: #3B3BFF; --cat-toy: #E8126A; --cat-tool: #0A84C6;
  --cat-learn: #E85D00; --cat-data: #009B77; --cat-create: #3A9A00;

  --bg: #FFF8EE; --bg-deep: #FBEEDC;
  --surface: #FFFFFF; --surface-2: #FDF0DF; --surface-3: #F6E3CB;
  --text: #15121C; --muted: #625B6B; --faint: #938A9C;
  --border: rgba(21, 18, 28, .14); --border-strong: #15121C;
  --primary: #3B3BFF; --primary-hover: #2A2AEB; --primary-press: #1F1FC9;
  --accent-text: #3B3BFF; --accent-wash: rgba(59, 59, 255, .08);
  --ink: #15121C; --on-ink: #FFFFFF;
  --bubble-mine: #C4F23A; --bubble-theirs: #FFFFFF;
  --success: #138A4B; --warning: #B26B00; --danger: #E0123E; --danger-wash: rgba(224, 18, 62, .08);
  --focus: 0 0 0 3px rgba(59, 59, 255, .35);
  --shadow-1: none;
  --shadow-2: 4px 4px 0 var(--ink);
  --shadow-3: 6px 6px 0 var(--ink);
  --shadow-pop: 3px 3px 0 var(--ink);
  --scrim: rgba(21, 18, 28, .5);
}
@media (prefers-color-scheme: dark) {
  :root[data-look="c"]:not([data-theme="light"]) {
    --cat-game: #8E8EFF; --cat-toy: #FF6FA5; --cat-tool: #4FC3FF; --cat-learn: #FF9D4D; --cat-data: #2EE0B2; --cat-create: #C4F23A;
    --bg: #131017; --bg-deep: #0B090E; --surface: #1C1822; --surface-2: #26212E; --surface-3: #332C3D;
    --text: #FFF7EE; --muted: #B9B0C2; --faint: #857C8F;
    --border: rgba(255, 247, 238, .12); --border-strong: rgba(255, 247, 238, .7);
    --primary: #7C7CFF; --accent-text: #A9A9FF; --accent-wash: rgba(124, 124, 255, .14);
    --ink: #FFF7EE; --on-ink: #131017; --bubble-mine: #C4F23A; --bubble-theirs: #26212E;
    --danger: #FF4D6D;
    --shadow-2: 4px 4px 0 #000; --shadow-3: 6px 6px 0 #000; --shadow-pop: 3px 3px 0 #000; --create-glow: 3px 3px 0 #000;
  }
}
:root[data-look="c"][data-theme="dark"] {
  --cat-game: #8E8EFF; --cat-toy: #FF6FA5; --cat-tool: #4FC3FF; --cat-learn: #FF9D4D; --cat-data: #2EE0B2; --cat-create: #C4F23A;
  --bg: #131017; --bg-deep: #0B090E; --surface: #1C1822; --surface-2: #26212E; --surface-3: #332C3D;
  --text: #FFF7EE; --muted: #B9B0C2; --faint: #857C8F;
  --border: rgba(255, 247, 238, .12); --border-strong: rgba(255, 247, 238, .7);
  --primary: #7C7CFF; --accent-text: #A9A9FF; --accent-wash: rgba(124, 124, 255, .14);
  --ink: #FFF7EE; --on-ink: #131017; --bubble-mine: #C4F23A; --bubble-theirs: #26212E;
  --danger: #FF4D6D;
  --shadow-2: 4px 4px 0 #000; --shadow-3: 6px 6px 0 #000; --shadow-pop: 3px 3px 0 #000; --create-glow: 3px 3px 0 #000;
}

/* chunky display everywhere a headline lives */
:root[data-look="c"] .club-name { font-size: 26px; line-height: .95; }
:root[data-look="c"] .club-head .club-name { font-size: 40px; }
@media (min-width: 1000px) { :root[data-look="c"] .club-head .club-name { font-size: 52px; } }
:root[data-look="c"] .hello h2 { font-size: clamp(34px, 9.6vw, 50px); line-height: .95; }
:root[data-look="c"] .ask-label { font-size: clamp(34px, 9vw, 46px); line-height: .98; }
:root[data-look="c"] .pop-title, :root[data-look="c"] .profile-name { font-size: 36px; line-height: 1; }
:root[data-look="c"] .home-top .title { font-size: 28px; }
:root[data-look="c"] .pc-body h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.025em; }
:root[data-look="c"] .section-title { font-family: var(--font-display); text-transform: none; letter-spacing: -.01em; font-size: 17px; font-weight: 800; color: var(--text); }
:root[data-look="c"] .rail-label { font-size: 15px; }
:root[data-look="c"] .rail-nav a { font-weight: 700; }

/* crisp ink outlines; the hard offset shadow is saved for things you can press or open */
:root[data-look="c"] :is(.card, .panel) { border: 1.5px solid var(--ink); box-shadow: none; }
:root[data-look="c"] .club-card, :root[data-look="c"] .auth-card, :root[data-look="c"] .ask-box { box-shadow: var(--shadow-2); }
:root[data-look="c"] .btn { border-width: 1.5px; border-color: var(--ink); }
:root[data-look="c"] .btn-quiet { border-color: transparent; }
:root[data-look="c"] .btn-strong { box-shadow: 3px 3px 0 var(--pink); }
:root[data-look="c"] .btn-strong:active, :root[data-look="c"] .btn-create:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
:root[data-look="c"] .btn-create { border-color: var(--ink); }
:root[data-look="c"] .chip { border: 1.5px solid var(--ink); font-weight: 700; }
:root[data-look="c"] :is(.chip[aria-current="page"], .chip[aria-pressed="true"], .chip.is-on, .share-to .chip.toggle:has(input:checked)) { background: var(--lime); color: #15121C; border-color: var(--ink); }
:root[data-look="c"] .badge { background: var(--pink); }
:root[data-look="c"] .rail { border-right: 1.5px solid var(--ink); }
:root[data-look="c"] .rail-nav a[aria-current="page"] { background: var(--lime); color: #15121C; box-shadow: inset 0 0 0 1.5px var(--ink); }
:root[data-look="c"] .rail-nav a { border-radius: var(--r-pill); }
:root[data-look="c"] .keel::before { border-radius: 50%; }
:root[data-look="c"] .mesh-chip { box-shadow: inset 0 0 0 40px rgba(0,0,0,.22), 0 0 0 1.5px var(--ink); }

/* people: candy-coloured discs with an ink ring */
:root[data-look="c"] .av { box-shadow: 0 0 0 1.5px var(--ink); }
:root[data-look="c"] .av[data-hue="0"] { --av-bg: #3B3BFF; } :root[data-look="c"] .av[data-hue="1"] { --av-bg: #FF2D6F; }
:root[data-look="c"] .av[data-hue="2"] { --av-bg: #FF7A00; } :root[data-look="c"] .av[data-hue="3"] { --av-bg: #00A887; }
:root[data-look="c"] .av[data-hue="4"] { --av-bg: #0A84C6; } :root[data-look="c"] .av[data-hue="5"] { --av-bg: #3A9A00; }
:root[data-look="c"] .av[data-hue="6"] { --av-bg: #B026FF; } :root[data-look="c"] .av[data-hue="7"] { --av-bg: #15121C; }
:root[data-look="c"] .av-xl { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--ink); }

/* chat: yours on lime with ink type, theirs on white with an ink hairline */
:root[data-look="c"] .bubble { border: 1.5px solid var(--ink); }
:root[data-look="c"] .msg-group.mine .bubble, :root[data-look="c"] .you-said .bubble { color: #15121C; border-color: var(--ink); }
:root[data-look="c"] .new-sep { color: var(--pink); }
:root[data-look="c"] .shelf-pill { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); }
:root[data-look="c"] .club-shelf { border-bottom: 1.5px solid var(--ink); }
:root[data-look="c"] .inputbar { border-top: 1.5px solid var(--ink); }
:root[data-look="c"] .tabbar { border-top: 1.5px solid var(--ink); }
:root[data-look="c"] .inputbar-field, :root[data-look="c"] .cc-reply { border: 1.5px solid var(--ink); background: var(--surface); }

/* hero: a sticker of colour */
:root[data-look="c"] .hello { border: 1.5px solid var(--ink); box-shadow: var(--shadow-2); }
:root[data-look="c"] .hello-cta { background: var(--lime); color: #15121C; border: 1.5px solid #15121C; box-shadow: 3px 3px 0 #15121C; }
:root[data-look="c"] .aside-join h2 { background: none; color: var(--text); }
:root[data-look="c"] .stage-frame { box-shadow: var(--shadow-2); border: 1.5px solid var(--ink); }
:root[data-look="c"] .profile-band { border: 1.5px solid var(--ink); }
:root[data-look="c"] body.page-auth { background: var(--bg); }
:root[data-look="c"] .auth-side { background: var(--lime); color: #15121C; border-left: 1.5px solid var(--ink); }
:root[data-look="c"] .auth-side :is(.muted, .faint, .help, p) { color: #2A2433; }
:root[data-look="c"] .input, :root[data-look="c"] .code-boxes input { border-color: var(--ink); }
:root[data-look="c"] .how-steps li::before { background: var(--lime); color: #15121C; box-shadow: 0 0 0 1.5px var(--ink); }
:root[data-look="c"] .example { border-color: var(--ink); }

/* pops are stickers too */
:root[data-look="c"] :is(.mini-pop .cover, .pick .cover, .build-shot) { box-shadow: 0 0 0 1.5px var(--ink); }
:root[data-look="c"] .pop-card .cover { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
:root[data-look="c"] .cc-head { border-bottom: 1.5px solid var(--ink); }
:root[data-look="c"] .club-head { border-bottom: 1.5px solid var(--ink); }

/* ---------- finish: stickers that jump when you reach for them ---------- */
:root[data-look="c"] {
  --glow-a: rgba(255, 45, 111, .5);
  --glow-b: rgba(255, 149, 0, .55);
  --lift: 6px 6px 0 var(--ink);
  --card-hover-ring: var(--ink);
  --skel-a: #F6E9D6;
  --skel-b: #FFFFFF;
}
:root[data-look="c"][data-theme="dark"] { --skel-a: #26212E; --skel-b: rgba(255,255,255,.12); }
@media (hover: hover) {
  /* no soft glow here: the hard shadow grows and the card hops up-left */
  :root[data-look="c"] :is(.pop-card, .club-card, .person-card, .club-mini, .plan-tier):hover { transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--ink); }
  :root[data-look="c"] .btn:not(.btn-quiet, [disabled]):hover { transform: translate(-1px, -1px); }
  :root[data-look="c"] .chip:hover { box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px, -1px); }
  :root[data-look="c"] .club-strip .near-tile:hover { box-shadow: 4px 4px 0 var(--ink); }
}
:root[data-look="c"] .pop-card, :root[data-look="c"] .person-card { box-shadow: 3px 3px 0 var(--ink); }
:root[data-look="c"] .club-strip .near-tile { box-shadow: inset 0 0 0 1.5px var(--ink); }
:root[data-look="c"] .club-strip .near-name { font-weight: 800; font-size: 17px; }
:root[data-look="c"] .keel::before { box-shadow: none; }
:root[data-look="c"] .empty h3 { font-size: 28px; }
:root[data-look="c"] .empty-art { box-shadow: 4px 4px 0 var(--ink); border: 1.5px solid var(--ink); }
:root[data-look="c"] .empty::before { opacity: .3; }
:root[data-look="c"] .hello { box-shadow: 5px 5px 0 var(--ink); }
:root[data-look="c"] .profile-band { box-shadow: 5px 5px 0 var(--ink); }
:root[data-look="c"] .plan-tier.is-current { box-shadow: 5px 5px 0 var(--ink); }
:root[data-look="c"] .plan-price { font-weight: 800; }
:root[data-look="c"] .live-pill { background: var(--lime); color: #15121C; box-shadow: 0 0 0 1.5px #15121C; backdrop-filter: none; }
:root[data-look="c"] .club-strip .near-here { background: var(--lime); color: #15121C; box-shadow: 0 0 0 1.5px #15121C; text-shadow: none; }
:root[data-look="c"] .auth-card { box-shadow: 6px 6px 0 var(--ink); }
@media (min-width: 1000px) { :root[data-look="c"] .rail-me { border: 1.5px solid var(--ink); } }

/* css/look-f.css */
/* Look F, the "Hometown" collection: Prairie, Workshop, Ranch, Lake House, Friday Night,
   Urban Camo, Newsroom and Home team. Founder (2026-10-08): "the current app looks cool to me but very
   silicon valley instead of flyover country". Warm paper and honest materials instead of neon
   glass: solid surfaces, hairline borders, no glow, no heavy shadows, photos doing the colour.
   layout.html sets data-fam="f" for these and always resolves data-theme to light or dark,
   so each look below is two plain token sets. Every text pair meets WCAG AA (4.5:1);
   TestLookContrast checks it from this file. web.Looks (looks.go) carries the picker swatches.
   Type: Bricolage Grotesque (display) + Plus Jakarta Sans (UI), loaded by look-c.css;
   Friday Night uses Sora for its scoreboard headlines. */

/* ---------- the family: what every Hometown look shares ---------- */
:root[data-fam="f"] {
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 750;
  --display-track: -.025em;
  --wm-color: var(--text);
  --create-glow: none;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-pop: none;
  --r-bubble: 14px;
  --glow-a: color-mix(in oklab, var(--primary) 40%, transparent);
  --glow-b: color-mix(in oklab, var(--coral) 30%, transparent);
}
:root[data-fam="f"][data-theme="light"] {
  color-scheme: light;
  --shadow-3: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(0, 0, 0, .06);
  --skel-a: var(--surface-2); --skel-b: var(--surface-3);
}
:root[data-fam="f"][data-theme="dark"] {
  color-scheme: dark;
  --shadow-3: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(0, 0, 0, .4);
  --skel-a: var(--surface-2); --skel-b: var(--surface-3);
}
:root[data-fam="f"] body { background: var(--bg); }
:root[data-fam="f"] :is(.card, .panel) { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
:root[data-fam="f"] .chip { background: var(--surface); border-color: var(--border); }
:root[data-fam="f"] :is(.chip[aria-current="page"], .chip[aria-pressed="true"], .chip.is-on) { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
:root[data-fam="f"] .badge { background: var(--primary); color: #fff; }
:root[data-fam="f"] .section-title { color: var(--muted); letter-spacing: .08em; font-size: 11px; }
:root[data-fam="f"] .topbar { background: color-mix(in srgb, var(--bg) 90%, transparent); border-bottom: 1px solid var(--border); }
:root[data-fam="f"] :is(.tabbar, .inputbar) { background: var(--surface); border-top-color: var(--border); }
:root[data-fam="f"] .rail { background: var(--bg); border-right-color: var(--border); }
:root[data-fam="f"] .rail-nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-text); box-shadow: none; }
:root[data-fam="f"] .btn-create { color: var(--create-text); }
/* type: bigger, tighter headlines and roomier body text; one weight for UI */
:root[data-fam="f"] { --lh-body: 1.55; }
:root[data-fam="f"] body { line-height: var(--lh-body); }
:root[data-fam="f"] :is(h1, .page-title, .hero-title) { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: 1.12; }
:root[data-fam="f"] :is(h2, .club-name, .pop-title) { font-family: var(--font-display); letter-spacing: -.015em; line-height: 1.2; }
:root[data-fam="f"] .topbar .title { font-family: var(--font-display); letter-spacing: -.01em; }
/* accents used one way everywhere: links and current tabs in the accent text
   colour, filled buttons in the primary, washes for "selected" */
:root[data-fam="f"] a.link, :root[data-fam="f"] .link { color: var(--accent-text); }
:root[data-fam="f"] .tabbar .tab[aria-current="page"] { color: var(--accent-text); }
:root[data-fam="f"] .club-tab[aria-selected="true"] { color: var(--text); }
:root[data-fam="f"] .btn { border-radius: var(--r-md); }
:root[data-fam="f"] .btn-strong { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
:root[data-fam="f"] .chip { font-weight: 600; }
/* surfaces: cards a hair off the page, with a top highlight in dark mode
   instead of a shadow */
:root[data-fam="f"][data-theme="dark"] :is(.card, .panel) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
:root[data-fam="f"] :is(.card, .panel):is(a, [href]):hover { border-color: var(--border-strong); }

/* ---------- Prairie: wheat paper, big-sky blue, barn red ---------- */
:root[data-look="prairie"][data-theme="light"] {
  --bg: #FBF6EA; --bg-deep: #F3EAD3;
  --surface: #FFFFFF; --surface-2: #F7F0DE; --surface-3: #EDE2C6;
  --text: #1F1A12; --muted: #5C5344; --faint: #7A6F5C;
  --border: rgba(31, 26, 18, .12); --border-strong: rgba(31, 26, 18, .26);
  --primary: #A3262A; --primary-hover: #8E1F23; --primary-press: #7A1A1E;
  --accent-text: #9A2226; --accent-wash: rgba(163, 38, 42, .08);
  --ink: #1F1A12; --on-ink: #FFFFFF;
  --bubble-mine: #DCEBF7; --bubble-theirs: #FFFFFF;
  --success: #2F6B2F; --warning: #7A5000; --danger: #B3261E; --danger-wash: rgba(179, 38, 30, .08);
  --focus: 0 0 0 3px rgba(46, 120, 184, .40);
  --scrim: rgba(31, 26, 18, .45);
  --grape: #2E78B8; --coral: #A3262A; --amber: #C8932F; --live: #C2362F;
  --pop-grad: linear-gradient(115deg, #7E1C20 0%, #A3262A 55%, #A8402A 100%);
  --create-fill: linear-gradient(115deg, #8E1F23 0%, #A3262A 60%, #B03A2E 100%);
  --create-ring: #A3262A, #E2B85C 50%, #A3262A;
  --create-text: #FFFFFF;
  --hero-bg: radial-gradient(90% 120% at 100% 0%, #9CC3E6 0%, transparent 60%), linear-gradient(#E9D6A8, #E9D6A8);
  --cat-game: #2E5E8C; --cat-toy: #A3262A; --cat-tool: #3D6680; --cat-learn: #7A5000; --cat-data: #2F6B5E; --cat-create: #3E6B2A;
}
:root[data-look="prairie"][data-theme="dark"] {
  --bg: #15120C; --bg-deep: #0D0B07;
  --surface: #1E1A13; --surface-2: #28231A; --surface-3: #332D22;
  --text: #F5EEDC; --muted: #BDB29B; --faint: #9A8F7A;
  --border: rgba(245, 238, 220, .10); --border-strong: rgba(245, 238, 220, .22);
  --primary: #C2383A; --primary-hover: #CF4A4B; --primary-press: #A82F31;
  --accent-text: #F29A8C; --accent-wash: rgba(194, 56, 58, .18);
  --ink: #F5EEDC; --on-ink: #15120C;
  --bubble-mine: #1F3A55; --bubble-theirs: #28231A;
  --success: #6CC46C; --warning: #E3B341; --danger: #FF6B5E; --danger-wash: rgba(255, 107, 94, .12);
  --focus: 0 0 0 3px rgba(111, 168, 220, .5);
  --scrim: rgba(5, 4, 2, .7);
  --grape: #6FA8DC; --coral: #C2383A; --amber: #E2B85C; --live: #FF6B5E;
  --pop-grad: linear-gradient(115deg, #8E2A2C 0%, #A8322F 100%);
  --create-fill: linear-gradient(115deg, #A82F31 0%, #C2383A 100%);
  --create-ring: #C2383A, #E2B85C 50%, #C2383A;
  --create-text: #FFFFFF;
  --hero-bg: radial-gradient(90% 120% at 100% 0%, #1F3A55 0%, transparent 60%), linear-gradient(#2B2416, #2B2416);
  --cat-game: #8FB8E0; --cat-toy: #F29A8C; --cat-tool: #9CC0D6; --cat-learn: #E3B341; --cat-data: #7CC7B4; --cat-create: #9CCB7E;
}

/* ---------- Workshop: denim, brushed steel, safety orange ---------- */
:root[data-look="workshop"][data-theme="light"] {
  --bg: #F2F4F6; --bg-deep: #E6EAEE;
  --surface: #FFFFFF; --surface-2: #EEF1F4; --surface-3: #E1E6EB;
  --text: #14202B; --muted: #4A5866; --faint: #66727F;
  --border: rgba(20, 32, 43, .12); --border-strong: rgba(20, 32, 43, .26);
  --primary: #1F4E79; --primary-hover: #1A4268; --primary-press: #153756;
  --accent-text: #1F4E79; --accent-wash: rgba(31, 78, 121, .08);
  --ink: #14202B; --on-ink: #FFFFFF;
  --bubble-mine: #DCE7F2; --bubble-theirs: #FFFFFF;
  --success: #1E7A46; --warning: #8A4B00; --danger: #B42318; --danger-wash: rgba(180, 35, 24, .08);
  --focus: 0 0 0 3px rgba(232, 89, 12, .45);
  --scrim: rgba(20, 32, 43, .45);
  --grape: #1F4E79; --coral: #E8590C; --amber: #E8590C; --live: #E8590C;
  --pop-grad: linear-gradient(115deg, #17406A 0%, #1F4E79 55%, #27598A 100%);
  --create-fill: linear-gradient(115deg, #FF6A00 0%, #FF8A1F 100%);
  --create-ring: #FF6A00, #FFB15C 50%, #FF6A00;
  --create-text: #14202B;
  --hero-bg: radial-gradient(80% 110% at 100% 100%, #FF8A1F 0%, transparent 55%), linear-gradient(#C7D3DF, #C7D3DF);
  --cat-game: #1F4E79; --cat-toy: #B23C0A; --cat-tool: #39566E; --cat-learn: #8A4B00; --cat-data: #1E6B6B; --cat-create: #1E7A46;
}
:root[data-look="workshop"][data-theme="dark"] {
  --bg: #0F141A; --bg-deep: #0A0E12;
  --surface: #161D25; --surface-2: #1E2731; --surface-3: #28323E;
  --text: #E8EEF4; --muted: #A3B1BF; --faint: #8592A0;
  --border: rgba(232, 238, 244, .10); --border-strong: rgba(232, 238, 244, .22);
  --primary: #2F6FAE; --primary-hover: #3A7CBC; --primary-press: #28619A;
  --accent-text: #8DBBE6; --accent-wash: rgba(91, 155, 213, .16);
  --ink: #E8EEF4; --on-ink: #0F141A;
  --bubble-mine: #1F3A57; --bubble-theirs: #1E2731;
  --success: #4CC38A; --warning: #F2A93B; --danger: #FF6B5E; --danger-wash: rgba(255, 107, 94, .12);
  --focus: 0 0 0 3px rgba(255, 122, 26, .55);
  --scrim: rgba(3, 5, 8, .7);
  --grape: #5B9BD5; --coral: #FF7A1A; --amber: #FF7A1A; --live: #FF7A1A;
  --pop-grad: linear-gradient(115deg, #1F4E79 0%, #2A5F94 100%);
  --create-fill: linear-gradient(115deg, #FF6A00 0%, #FF8A1F 100%);
  --create-ring: #FF7A1A, #FFB15C 50%, #FF7A1A;
  --create-text: #0F141A;
  --hero-bg: radial-gradient(80% 110% at 100% 100%, #7A3A0A 0%, transparent 55%), linear-gradient(#1A2633, #1A2633);
  --cat-game: #8DBBE6; --cat-toy: #FFA266; --cat-tool: #A9C1D6; --cat-learn: #F2A93B; --cat-data: #6CCFCF; --cat-create: #6FD39E;
}

/* ---------- Ranch: saddle leather, sage, a long sunset ---------- */
:root[data-look="ranch"][data-theme="light"] {
  --bg: #F8F3EC; --bg-deep: #EFE6DA;
  --surface: #FFFDF9; --surface-2: #F3EBE0; --surface-3: #E8DCCB;
  --text: #241A12; --muted: #5E5044; --faint: #7A6B5C;
  --border: rgba(36, 26, 18, .12); --border-strong: rgba(36, 26, 18, .26);
  --primary: #B5400F; --primary-hover: #9E370C; --primary-press: #872F0A;
  --accent-text: #A8380A; --accent-wash: rgba(181, 64, 15, .08);
  --ink: #241A12; --on-ink: #FFFFFF;
  --bubble-mine: #E3EDE0; --bubble-theirs: #FFFDF9;
  --success: #3F6B47; --warning: #8A5300; --danger: #B3261E; --danger-wash: rgba(179, 38, 30, .08);
  --focus: 0 0 0 3px rgba(94, 132, 102, .45);
  --scrim: rgba(36, 26, 18, .45);
  --grape: #5E8466; --coral: #B5400F; --amber: #D17A2C; --live: #C2410C;
  --pop-grad: linear-gradient(115deg, #7A3B1C 0%, #B5400F 55%, #D17A2C 100%);
  --create-fill: linear-gradient(115deg, #9E370C 0%, #B5400F 100%);
  --create-ring: #B5400F, #E7A55C 50%, #B5400F;
  --create-text: #FFFFFF;
  --hero-bg: radial-gradient(90% 120% at 0% 100%, #E7A55C 0%, transparent 60%), linear-gradient(#C8D8C3, #C8D8C3);
  --cat-game: #3F6B6B; --cat-toy: #A8380A; --cat-tool: #5E6B3A; --cat-learn: #8A5300; --cat-data: #3F6B47; --cat-create: #6B4A2A;
}
:root[data-look="ranch"][data-theme="dark"] {
  --bg: #16120E; --bg-deep: #0E0B08;
  --surface: #1F1914; --surface-2: #2A221B; --surface-3: #362C23;
  --text: #F6EEE4; --muted: #C2B4A4; --faint: #9C8E7E;
  --border: rgba(246, 238, 228, .10); --border-strong: rgba(246, 238, 228, .22);
  --primary: #C2410C; --primary-hover: #D2511A; --primary-press: #A8380A;
  --accent-text: #F5A06B; --accent-wash: rgba(194, 65, 12, .18);
  --ink: #F6EEE4; --on-ink: #16120E;
  --bubble-mine: #2E3B2F; --bubble-theirs: #2A221B;
  --success: #7FBF86; --warning: #E8B04A; --danger: #FF6B5E; --danger-wash: rgba(255, 107, 94, .12);
  --focus: 0 0 0 3px rgba(143, 184, 154, .5);
  --scrim: rgba(5, 3, 2, .7);
  --grape: #8FB89A; --coral: #E07A3A; --amber: #E8B04A; --live: #FF7A45;
  --pop-grad: linear-gradient(115deg, #A8380A 0%, #E07A3A 100%);
  --create-fill: linear-gradient(115deg, #A8380A 0%, #C2410C 100%);
  --create-ring: #C2410C, #E8B04A 50%, #C2410C;
  --create-text: #FFFFFF;
  --hero-bg: radial-gradient(90% 120% at 0% 100%, #6B2A0C 0%, transparent 60%), linear-gradient(#232A22, #232A22);
  --cat-game: #8FC7C7; --cat-toy: #F5A06B; --cat-tool: #B9C78F; --cat-learn: #E8B04A; --cat-data: #8FB89A; --cat-create: #D9B38C;
}

/* ---------- Lake House: pine, lake blue, cream ---------- */
:root[data-look="lake"][data-theme="light"] {
  --bg: #FAF7EF; --bg-deep: #F0EBDD;
  --surface: #FFFFFF; --surface-2: #F3EFE3; --surface-3: #E7E1D0;
  --text: #13221D; --muted: #4C5B55; --faint: #66746E;
  --border: rgba(19, 34, 29, .12); --border-strong: rgba(19, 34, 29, .26);
  --primary: #1F5E4A; --primary-hover: #194F3E; --primary-press: #144033;
  --accent-text: #1F5E4A; --accent-wash: rgba(31, 94, 74, .08);
  --ink: #13221D; --on-ink: #FFFFFF;
  --bubble-mine: #D8E9F0; --bubble-theirs: #FFFFFF;
  --success: #1F6B3F; --warning: #7A5200; --danger: #B3261E; --danger-wash: rgba(179, 38, 30, .08);
  --focus: 0 0 0 3px rgba(43, 110, 143, .42);
  --scrim: rgba(19, 34, 29, .45);
  --grape: #2B6E8F; --coral: #C8553D; --amber: #C9922E; --live: #C8553D;
  --pop-grad: linear-gradient(115deg, #1F5E4A 0%, #2B6E8F 100%);
  --create-fill: linear-gradient(115deg, #1F5E4A 0%, #2B6E8F 100%);
  --create-ring: #1F5E4A, #2B6E8F 50%, #1F5E4A;
  --create-text: #FFFFFF;
  --hero-bg: radial-gradient(90% 120% at 100% 0%, #9CC9DD 0%, transparent 60%), linear-gradient(#CFE0D2, #CFE0D2);
  --cat-game: #2B6E8F; --cat-toy: #A8452F; --cat-tool: #3D6680; --cat-learn: #7A5200; --cat-data: #1F5E4A; --cat-create: #3E6B2A;
}
:root[data-look="lake"][data-theme="dark"] {
  --bg: #0E1513; --bg-deep: #09100E;
  --surface: #15201C; --surface-2: #1D2A25; --surface-3: #26352F;
  --text: #EEF3EC; --muted: #A8B8B0; --faint: #869690;
  --border: rgba(238, 243, 236, .10); --border-strong: rgba(238, 243, 236, .22);
  --primary: #2E7D63; --primary-hover: #378A6F; --primary-press: #276B55;
  --accent-text: #7CC7AA; --accent-wash: rgba(46, 125, 99, .18);
  --ink: #EEF3EC; --on-ink: #0E1513;
  --bubble-mine: #1C3A47; --bubble-theirs: #1D2A25;
  --success: #6FCF97; --warning: #E3B341; --danger: #FF6B5E; --danger-wash: rgba(255, 107, 94, .12);
  --focus: 0 0 0 3px rgba(107, 179, 214, .5);
  --scrim: rgba(2, 5, 4, .7);
  --grape: #6BB3D6; --coral: #E07A62; --amber: #E3B341; --live: #E07A62;
  --pop-grad: linear-gradient(115deg, #2E7D63 0%, #2B6E8F 100%);
  --create-fill: linear-gradient(115deg, #276B55 0%, #2E7D63 100%);
  --create-ring: #2E7D63, #6BB3D6 50%, #2E7D63;
  --create-text: #FFFFFF;
  --hero-bg: radial-gradient(90% 120% at 100% 0%, #1C3A47 0%, transparent 60%), linear-gradient(#17271F, #17271F);
  --cat-game: #6BB3D6; --cat-toy: #E8957F; --cat-tool: #9CC0D6; --cat-learn: #E3B341; --cat-data: #7CC7AA; --cat-create: #9CCB7E;
}

/* ---------- Friday Night: stadium navy and gold under the lights ---------- */
:root[data-look="friday"] {
  --font-display: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;
  --display-weight: 800;
  --display-track: -.02em;
}
:root[data-look="friday"] .section-title { text-transform: uppercase; letter-spacing: .14em; }
:root[data-look="friday"][data-theme="light"] {
  --bg: #F4F6FA; --bg-deep: #E7ECF4;
  --surface: #FFFFFF; --surface-2: #EEF2F8; --surface-3: #DFE6F1;
  --text: #0B1530; --muted: #3E4A66; --faint: #5E6A86;
  --border: rgba(11, 21, 48, .12); --border-strong: rgba(11, 21, 48, .28);
  --primary: #0B2A6F; --primary-hover: #0A2460; --primary-press: #081D4D;
  --accent-text: #0B2A6F; --accent-wash: rgba(11, 42, 111, .08);
  --ink: #0B1530; --on-ink: #FFFFFF;
  --bubble-mine: #FFF1C2; --bubble-theirs: #FFFFFF;
  --success: #17703F; --warning: #7A5600; --danger: #B71C32; --danger-wash: rgba(183, 28, 50, .08);
  --focus: 0 0 0 3px rgba(224, 168, 0, .55);
  --scrim: rgba(11, 21, 48, .5);
  --grape: #0B2A6F; --coral: #D7263D; --amber: #E0A800; --live: #D7263D;
  --pop-grad: linear-gradient(115deg, #0B2A6F 0%, #173C8F 55%, #1E46A8 100%);
  --create-fill: linear-gradient(115deg, #F2B705 0%, #FFCB2E 100%);
  --create-ring: #F2B705, #FFE27A 50%, #F2B705;
  --create-text: #0B1530;
  --hero-bg: radial-gradient(70% 120% at 50% -10%, #FFF3C4 0%, transparent 60%), linear-gradient(#0B2A6F, #0B2A6F);
  --cat-game: #0B2A6F; --cat-toy: #B71C32; --cat-tool: #2F4A80; --cat-learn: #7A5600; --cat-data: #1E5E6B; --cat-create: #17703F;
}
:root[data-look="friday"][data-theme="dark"] {
  --bg: #070C1C; --bg-deep: #040712;
  --surface: #0E1530; --surface-2: #162045; --surface-3: #1F2B57;
  --text: #F5F7FF; --muted: #B4BDDA; --faint: #8F99B8;
  --border: rgba(245, 247, 255, .11); --border-strong: rgba(245, 247, 255, .24);
  --primary: #2F5BD3; --primary-hover: #3D6AE0; --primary-press: #274DB5;
  --accent-text: #FFD24D; --accent-wash: rgba(242, 183, 5, .14);
  --ink: #F5F7FF; --on-ink: #070C1C;
  --bubble-mine: #1F2F6B; --bubble-theirs: #162045;
  --success: #4CC38A; --warning: #FFD24D; --danger: #FF5C70; --danger-wash: rgba(255, 92, 112, .12);
  --focus: 0 0 0 3px rgba(242, 183, 5, .6);
  --scrim: rgba(2, 3, 9, .72);
  --grape: #6E8EF0; --coral: #FF5C70; --amber: #F2B705; --live: #FF5C70;
  --pop-grad: linear-gradient(115deg, #1C3C8C 0%, #2549A8 100%);
  --create-fill: linear-gradient(115deg, #F2B705 0%, #FFCB2E 100%);
  --create-ring: #F2B705, #FFE27A 50%, #F2B705;
  --create-text: #070C1C;
  --hero-bg: radial-gradient(70% 120% at 50% -10%, #3B4F99 0%, transparent 60%), linear-gradient(#0B1640, #0B1640);
  --cat-game: #8FA8F5; --cat-toy: #FF8A9A; --cat-tool: #A9BDE6; --cat-learn: #FFD24D; --cat-data: #6CCFCF; --cat-create: #6FD39E;
}

/* ---------- Urban Camo: concrete greys, olive drab, and a camo trim ----------
   The camo is only ever trim: a band under the top bar, the current tab's underline and
   the edge of cards. It never sits behind text. */
:root[data-look="camo"][data-theme="light"] {
  --bg: #EEEFEC; --bg-deep: #E3E5E0;
  --surface: #FFFFFF; --surface-2: #E7E8E4; --surface-3: #DADCD6;
  --text: #1A1C1A; --muted: #4E524D; --faint: #686C66;
  --border: rgba(26, 28, 26, .13); --border-strong: rgba(26, 28, 26, .28);
  --primary: #4B5D2E; --primary-hover: #3F4F26; --primary-press: #33401F;
  --accent-text: #4B5D2E; --accent-wash: rgba(75, 93, 46, .09);
  --ink: #1A1C1A; --on-ink: #FFFFFF;
  --bubble-mine: #E1E6D6; --bubble-theirs: #FFFFFF;
  --success: #3B6B2F; --warning: #7A5200; --danger: #B3261E; --danger-wash: rgba(179, 38, 30, .08);
  --focus: 0 0 0 3px rgba(75, 93, 46, .4);
  --scrim: rgba(26, 28, 26, .45);
  --grape: #4B5D2E; --coral: #B3261E; --amber: #A87A2A; --live: #C2410C;
  --pop-grad: linear-gradient(115deg, #2E3A1C 0%, #3F4F26 55%, #4B5D2E 100%);
  --create-fill: linear-gradient(115deg, #3A4824 0%, #4B5D2E 55%, #5A6F35 100%);
  --create-ring: #4B5D2E, #9EB86A 50%, #4B5D2E;
  --create-text: #FFFFFF;
  --hero-bg: var(--camo) 0 0 / 160px 160px, linear-gradient(#B9BCB5, #B9BCB5);
  --cat-game: #3D5266; --cat-toy: #8A3A2A; --cat-tool: #4E524D; --cat-learn: #7A5200; --cat-data: #2F6B5E; --cat-create: #4B5D2E;
  --camo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%23C9CCC5'/%3E%3Cpath d='M0 18c14-8 26 4 38-2s20-16 34-8 10 22-4 26-30-4-42 6S4 56 0 44z' fill='%239DA19A'/%3E%3Cpath d='M58 52c12-10 30-6 40 4s22 6 22 18-16 14-28 10-18 10-32 6-14-28-2-38z' fill='%236E726C'/%3E%3Cpath d='M6 80c10-6 24-2 30 8s-4 22-16 20S-6 96 6 80z' fill='%23E8EAE5'/%3E%3Cpath d='M84 0c10 4 24 0 30 8s-2 14-12 14-22 4-24-6 0-12 6-16z' fill='%23E8EAE5'/%3E%3Cpath d='M38 96c8-6 22-4 28 4s16 6 20 14-8 8-20 6-26 2-30-8 0-10 2-16z' fill='%239DA19A'/%3E%3Cpath d='M20 34c6-2 12 2 10 8s-10 6-14 2 0-8 4-10z' fill='%234A4E49'/%3E%3Cpath d='M98 92c6-2 14 0 14 8s-8 8-14 6-6-12 0-14z' fill='%234A4E49'/%3E%3C/svg%3E");
}
:root[data-look="camo"][data-theme="dark"] {
  --bg: #121412; --bg-deep: #0B0C0B;
  --surface: #1B1E1B; --surface-2: #242824; --surface-3: #2E332E;
  --text: #ECEEE9; --muted: #B0B5AD; --faint: #8E938B;
  --border: rgba(236, 238, 233, .10); --border-strong: rgba(236, 238, 233, .22);
  --primary: #5A6F35; --primary-hover: #667D3D; --primary-press: #4E612E;
  --accent-text: #B8CC8A; --accent-wash: rgba(140, 170, 90, .16);
  --ink: #ECEEE9; --on-ink: #121412;
  --bubble-mine: #2C3524; --bubble-theirs: #242824;
  --success: #8FC77A; --warning: #E3B341; --danger: #FF6B5E; --danger-wash: rgba(255, 107, 94, .12);
  --focus: 0 0 0 3px rgba(184, 204, 138, .45);
  --scrim: rgba(3, 4, 3, .72);
  --grape: #9EB86A; --coral: #FF6B5E; --amber: #D9A54A; --live: #FF7A45;
  --pop-grad: linear-gradient(115deg, #3F4F26 0%, #4E612E 100%);
  --create-fill: linear-gradient(115deg, #4E612E 0%, #5A6F35 100%);
  --create-ring: #4E612E, #9EB86A 50%, #4E612E;
  --create-text: #FFFFFF;
  --hero-bg: var(--camo) 0 0 / 160px 160px, linear-gradient(#2A2E2A, #2A2E2A);
  --cat-game: #9CB4CC; --cat-toy: #E89A8A; --cat-tool: #B0B5AD; --cat-learn: #E3B341; --cat-data: #7CC7B4; --cat-create: #B8CC8A;
  --camo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%23353A34'/%3E%3Cpath d='M0 18c14-8 26 4 38-2s20-16 34-8 10 22-4 26-30-4-42 6S4 56 0 44z' fill='%234F564D'/%3E%3Cpath d='M58 52c12-10 30-6 40 4s22 6 22 18-16 14-28 10-18 10-32 6-14-28-2-38z' fill='%23737A70'/%3E%3Cpath d='M6 80c10-6 24-2 30 8s-4 22-16 20S-6 96 6 80z' fill='%23202320'/%3E%3Cpath d='M84 0c10 4 24 0 30 8s-2 14-12 14-22 4-24-6 0-12 6-16z' fill='%231E211E'/%3E%3Cpath d='M38 96c8-6 22-4 28 4s16 6 20 14-8 8-20 6-26 2-30-8 0-10 2-16z' fill='%233B403B'/%3E%3Cpath d='M20 34c6-2 12 2 10 8s-10 6-14 2 0-8 4-10z' fill='%236F746C'/%3E%3Cpath d='M98 92c6-2 14 0 14 8s-8 8-14 6-6-12 0-14z' fill='%236F746C'/%3E%3C/svg%3E");
}
/* the trim: strips of camo (background, never border-image, so the pattern reads as camo, not stitching) */
:root[data-look="camo"] { --camo-trim: var(--camo); }
:root[data-look="camo"][data-theme="light"] {
  --camo-trim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%237D817C'/%3E%3Cpath d='M0 18c14-8 26 4 38-2s20-16 34-8 10 22-4 26-30-4-42 6S4 56 0 44z' fill='%23A4A8A2'/%3E%3Cpath d='M58 52c12-10 30-6 40 4s22 6 22 18-16 14-28 10-18 10-32 6-14-28-2-38z' fill='%234A4E49'/%3E%3Cpath d='M6 80c10-6 24-2 30 8s-4 22-16 20S-6 96 6 80z' fill='%23D6D8D3'/%3E%3Cpath d='M84 0c10 4 24 0 30 8s-2 14-12 14-22 4-24-6 0-12 6-16z' fill='%23D6D8D3'/%3E%3Cpath d='M38 96c8-6 22-4 28 4s16 6 20 14-8 8-20 6-26 2-30-8 0-10 2-16z' fill='%23A4A8A2'/%3E%3Cpath d='M20 34c6-2 12 2 10 8s-10 6-14 2 0-8 4-10z' fill='%232F322F'/%3E%3Cpath d='M98 92c6-2 14 0 14 8s-8 8-14 6-6-12 0-14z' fill='%232F322F'/%3E%3C/svg%3E");
}
:root[data-look="camo"] .topbar { position: sticky; }
:root[data-look="camo"] .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none;
  background: var(--camo-trim) 0 0 / 90px 90px;
}
:root[data-look="camo"] :is(.card, .panel) {
  border: 1px solid var(--border); border-left: 6px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--camo-trim) 0 0 / 90px 90px border-box;
}
:root[data-look="camo"] .rail .brand { position: relative; padding-bottom: 14px; }
:root[data-look="camo"] .rail .brand::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 0; height: 7px; border-radius: 4px; background: var(--camo-trim) 0 0 / 90px 90px; }
:root[data-look="camo"] :is(.rail-nav a, .tabbar a) { position: relative; }
:root[data-look="camo"] :is(.rail-nav a[aria-current="page"], .tabbar a[aria-current="page"])::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 5px; border-radius: 3px; pointer-events: none;
  background: var(--camo-trim) 0 0 / 90px 90px;
}
:root[data-look="camo"] .club-tab[aria-selected="true"]::after { height: 5px; border-radius: 3px; background: var(--camo-trim) 0 0 / 60px 60px; }

/* ---------- Newsroom: popchat.news on paper ----------
   The founder's popchat.news (2026-10-08): white paper, zinc greys, its violet accent, Instrument
   Serif headlines over Plus Jakarta Sans, thin rules and room to breathe. The violet is the
   site's hover shade (#6D5DE6), because its #7C6EF6 can't carry white text (3.9:1).
   Dark is newsprint at night: warm charcoal, never pure black. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../../fonts/instrument-serif-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../../fonts/instrument-serif-latin-italic.woff2") format("woff2"); }
:root[data-look="news"] {
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --display-weight: 400;
  --display-track: -.005em;
  --r-bubble: 10px;
}
:root[data-look="news"][data-theme="light"] {
  --bg: #FFFFFF; --bg-deep: #F4F4F5;
  --surface: #FFFFFF; --surface-2: #F4F4F5; --surface-3: #E4E4E7;
  --text: #18181B; --muted: #52525B; --faint: #71717A;
  --border: rgba(0, 0, 0, .10); --border-strong: rgba(0, 0, 0, .18);
  --primary: #6D5DE6; --primary-hover: #5E4FD6; --primary-press: #5446C9;
  --accent-text: #5E4FD6; --accent-wash: rgba(124, 110, 246, .08);
  --ink: #18181B; --on-ink: #FFFFFF;
  --bubble-mine: #ECEAFE; --bubble-theirs: #F4F4F5;
  --success: #15803D; --warning: #B45309; --danger: #B91C1C; --danger-wash: rgba(185, 28, 28, .08);
  --focus: 0 0 0 3px rgba(124, 110, 246, .40);
  --scrim: rgba(24, 24, 27, .45);
  --grape: #7C6EF6; --coral: #B91C1C; --amber: #B45309; --live: #DC2626;
  --pop-grad: linear-gradient(115deg, #6D5DE6 0%, #7C6EF6 100%);
  --create-fill: linear-gradient(115deg, #5E4FD6 0%, #6D5DE6 100%);
  --create-ring: #7C6EF6, #E4E4E7 50%, #7C6EF6;
  --create-text: #FFFFFF;
  --hero-bg: linear-gradient(#F4F4F5, #F4F4F5);
  --cat-game: #5E4FD6; --cat-toy: #B91C1C; --cat-tool: #3F3F46; --cat-learn: #B45309; --cat-data: #0F766E; --cat-create: #15803D;
}
:root[data-look="news"][data-theme="dark"] {
  --bg: #141416; --bg-deep: #0E0E10;
  --surface: #1C1C20; --surface-2: #25252A; --surface-3: #2F2F35;
  --text: #EDEDEF; --muted: #A8A8B3; --faint: #8E8E99;
  --border: rgba(237, 237, 239, .10); --border-strong: rgba(237, 237, 239, .20);
  --primary: #6D5DE6; --primary-hover: #5E4FD6; --primary-press: #5446C9;
  --accent-text: #B3AAFF; --accent-wash: rgba(124, 110, 246, .16);
  --ink: #EDEDEF; --on-ink: #141416;
  --bubble-mine: #2A2547; --bubble-theirs: #25252A;
  --success: #4ADE80; --warning: #FBBF24; --danger: #F87171; --danger-wash: rgba(248, 113, 113, .12);
  --focus: 0 0 0 3px rgba(179, 170, 255, .45);
  --scrim: rgba(5, 5, 6, .72);
  --grape: #A99FFF; --coral: #F87171; --amber: #FBBF24; --live: #F87171;
  --pop-grad: linear-gradient(115deg, #6D5DE6 0%, #A99FFF 100%);
  --create-fill: linear-gradient(115deg, #5E4FD6 0%, #6D5DE6 100%);
  --create-ring: #A99FFF, #2F2F35 50%, #A99FFF;
  --create-text: #FFFFFF;
  --hero-bg: linear-gradient(#1C1C20, #1C1C20);
  --cat-game: #B3AAFF; --cat-toy: #F87171; --cat-tool: #A8A8B3; --cat-learn: #FBBF24; --cat-data: #5EEAD4; --cat-create: #4ADE80;
}
/* the paper: serif headlines, thin rules, small-caps section labels, more air */
:root[data-look="news"] :is(h1, h2, .page-title, .club-name, .pop-title, .hero-title) { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--display-track); }
:root[data-look="news"] .section-title { font-family: var(--font-sans); font-variant: small-caps; text-transform: lowercase; letter-spacing: .1em; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border-strong); padding-top: 10px; }
:root[data-look="news"] .topbar { border-bottom: 1px solid var(--border-strong); }
:root[data-look="news"] :is(.card, .panel) { border-radius: 10px; }
:root[data-look="news"] .chip { border-radius: 6px; }

/* ---------- Home team: the area's colours everywhere ----------
   A neutral base; layout.html's region-accent block sets the accent tokens from the area's
   colour (exact on light pages, lifted along its hue on dark ones). Without an area
   (regional colours off, or no area with colours) it falls back to a quiet slate blue. */
:root[data-look="team"][data-theme="light"] {
  --bg: #F4F5F7; --bg-deep: #E9EBEF;
  --surface: #FFFFFF; --surface-2: #EEF0F3; --surface-3: #E1E4E9;
  --text: #15181D; --muted: #4B525C; --faint: #646B75;
  --border: rgba(21, 24, 29, .12); --border-strong: rgba(21, 24, 29, .26);
  --primary: #2F4A6B; --primary-hover: #283F5C; --primary-press: #21344C;
  --accent-text: #2F4A6B; --accent-wash: rgba(47, 74, 107, .08);
  --ink: #15181D; --on-ink: #FFFFFF;
  --bubble-mine: #E2E8F0; --bubble-theirs: #FFFFFF;
  --success: #1E7A46; --warning: #7A5200; --danger: #B3261E; --danger-wash: rgba(179, 38, 30, .08);
  --focus: 0 0 0 3px rgba(47, 74, 107, .38);
  --scrim: rgba(21, 24, 29, .45);
  --grape: #2F4A6B; --coral: #B3261E; --amber: #A87A2A; --live: #B3261E;
  --pop-grad: linear-gradient(115deg, #2F4A6B 0%, #4A6A92 100%);
  --create-fill: linear-gradient(115deg, #2F4A6B 0%, #3E5D82 100%);
  --create-ring: #2F4A6B, #C9D2DD 50%, #2F4A6B;
  --create-text: #FFFFFF;
  --hero-bg: linear-gradient(#D5DCE6, #D5DCE6);
  --cat-game: #2F4A6B; --cat-toy: #8A2A3A; --cat-tool: #3D5266; --cat-learn: #7A5200; --cat-data: #2F6B5E; --cat-create: #1E7A46;
}
:root[data-look="team"][data-theme="dark"] {
  --bg: #0F1114; --bg-deep: #0A0B0D;
  --surface: #171A1F; --surface-2: #1F232A; --surface-3: #292E36;
  --text: #EEF0F3; --muted: #A9B0BA; --faint: #8A919B;
  --border: rgba(238, 240, 243, .10); --border-strong: rgba(238, 240, 243, .22);
  --primary: #3E6A9E; --primary-hover: #4A78AD; --primary-press: #355B88;
  --accent-text: #9DBDE3; --accent-wash: rgba(62, 106, 158, .18);
  --ink: #EEF0F3; --on-ink: #0F1114;
  --bubble-mine: #22324A; --bubble-theirs: #1F232A;
  --success: #4CC38A; --warning: #E3B341; --danger: #FF6B5E; --danger-wash: rgba(255, 107, 94, .12);
  --focus: 0 0 0 3px rgba(157, 189, 227, .5);
  --scrim: rgba(3, 4, 5, .72);
  --grape: #6E95C6; --coral: #FF6B5E; --amber: #E3B341; --live: #FF6B5E;
  --pop-grad: linear-gradient(115deg, #3E6A9E 0%, #6E95C6 100%);
  --create-fill: linear-gradient(115deg, #355B88 0%, #3E6A9E 100%);
  --create-ring: #6E95C6, #292E36 50%, #6E95C6;
  --create-text: #FFFFFF;
  --hero-bg: linear-gradient(#1C2533, #1C2533);
  --cat-game: #9DBDE3; --cat-toy: #E89AA6; --cat-tool: #A9B0BA; --cat-learn: #E3B341; --cat-data: #7CC7B4; --cat-create: #6FD39E;
}

/* ---------- area colours on the area's own surfaces (every look) ----------
   layout.html's region-accent block sets --region-fill / --region-text; a page that carries
   them (a local room, an area's club or page) shows the colour as a band, never as the app's accent. */
:root:has(#region-accent) :is(.best-hero, .rg-hero, .club-head.is-area) { box-shadow: inset 0 -4px 0 var(--region-fill); }
:root:has(#region-accent) .local-pin { background: var(--region-fill); color: var(--region-on); }
:root:has(#region-accent) .home-rg .rg-dot { background: var(--region-fill); }

/* css/chrome.css */
/* chrome.css: the app's frame on every popchat.com page, loaded after the looks.
   - slim themed scrollbars everywhere (no grey OS gutters)
   - the top bar has no band of its own: it is clear at rest and only frosts once
     something scrolls under it (chrome.js sets .is-stuck)
   - the rail: brand, nav and Create on top, the club list scrolls on its own,
     the current profile / settings button stays pinned at the bottom
   - settings: an iOS-style section list on the left (desktop) or a drill-down
     list (phone), using the full width
   - list tools: a filter box, sticky list heads, "show more" paging */

/* ---------- scrollbars ---------- */
:root {
  --scroll-thumb: color-mix(in srgb, var(--text) 22%, transparent);
  --scroll-thumb-hover: color-mix(in srgb, var(--primary) 70%, transparent);
  scrollbar-color: var(--scroll-thumb) transparent;
  scrollbar-width: thin;
}
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- the top bar: no band of its own ---------- */
:root[data-look][data-look][data-look] .topbar, .topbar {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
:root[data-look][data-look][data-look] .topbar.is-stuck, .topbar.is-stuck {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--border);
}

/* ---------- the rail: pinned top and bottom, clubs scroll between ---------- */
@media (min-width: 1000px) {
  :root[data-look] .rail, .rail { overflow: hidden; }
  .rail .rail-clubs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; margin: 0 -6px; }
  .rail-clubs-head { display: grid; gap: 6px; padding: 0 6px 6px; }
  .rail-clubs-head .rail-label { margin: 0; }
  .rail-clubs-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    display: grid; gap: 2px; align-content: start; padding: 0 6px 6px;
    mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent);
  }
  .rail-clubs-list::-webkit-scrollbar { width: 6px; }
  .rail .rail-me { margin-top: 0; }
  .rail-foot { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .rail-foot .rail-me { flex: 1; min-width: 0; }
  .rail-foot .rail-me .grow b, .rail-foot .rail-me .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.rail-filter {
  width: 100%; height: 34px; padding: 0 12px 0 32px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text); font: inherit; font-size: var(--fs-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f88a3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 11px 50%;
}
.rail-filter:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
.rail-clubs-empty, .rail-clubs-more { padding: 6px 10px; font-size: var(--fs-xs); color: var(--muted); }
.rail .rail-clubs .rail-clubs-more a { display: inline; height: auto; padding: 0; color: var(--accent-text); font-weight: var(--fw-semi); background: none; }
.rail-clubs-more { flex-shrink: 0; }
.rail-theme { flex: none; }

/* ---------- settings: section list + detail, full width ---------- */
body.page-settings .shell { grid-template-columns: minmax(0, 1fr) !important; }
body.page-settings .main.settings-main { max-width: 1240px; width: 100%; }
body.page-settings .aside { display: none; }

.settings-nav { display: grid; gap: var(--sp-4); align-content: start; }
.settings-nav .sn-head { display: none; }
.sn-staff { display: none !important; }
body.is-staff .sn-staff { display: grid !important; }
.sn-group { list-style: none; margin: 0; padding: 4px; display: grid; gap: 1px; border-radius: var(--r-lg); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent); }
:root[data-look="a"] .sn-group { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
:root[data-look="a"][data-theme="light"] .sn-group { background: rgba(255,255,255,.78); }
.sn-group a {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 10px 6px 8px;
  border-radius: var(--r-md); color: var(--text); font-weight: var(--fw-semi); font-size: var(--fs-base);
}
.sn-group a:hover { background: var(--surface-2); }
.sn-group a[aria-current="page"] { background: var(--accent-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent); }
.sn-group a .grow { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.sn-group a .sub { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-group a > .ic:last-child { color: var(--faint); width: 16px; height: 16px; }
.sn-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.sn-ic .ic { width: 17px; height: 17px; stroke-width: 2.2; }
.sn-ic.t1 { background: linear-gradient(135deg, #5B21FF, #9D1AA8); }
.sn-ic.t2 { background: linear-gradient(135deg, #9D1AA8, #E8335A); }
.sn-ic.t3 { background: linear-gradient(135deg, #E8335A, #F97316); }
.sn-ic.t4 { background: linear-gradient(135deg, #0E7490, #4C1DE6); }
.sn-ic.t5 { background: linear-gradient(135deg, #047857, #0E7490); }
.sn-ic.t6 { background: linear-gradient(135deg, #312E81, #6D28D9); }
.sn-ic.t7 { background: linear-gradient(135deg, #B45309, #BE185D); }
.sn-ic.t8 { background: linear-gradient(135deg, #1E1B4B, #0E7490); }
.sn-label { padding: 0 12px; margin: 0 0 -10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; }

/* phone and narrow: a drill-down. /settings is the list; a section hides it. */
@media (max-width: 759px) {
  .settings-main:not(.is-root) > .settings-nav { display: none; }
  .settings-main.is-root > :not(.settings-nav, .topbar) { display: none; }
  .settings-main.is-root > .settings-nav { margin: 0 12px; }
  .settings-main.is-root .sn-group a[aria-current="page"] { background: none; box-shadow: none; }
  .sn-group a { min-height: 52px; }
}
/* wide: the list on the left, the section on the right */
@media (min-width: 760px) {
  .settings-main {
    grid-template-columns: 250px minmax(0, 1fr); column-gap: var(--sp-5);
    padding-left: var(--sp-2); padding-right: var(--sp-2);
  }
  .settings-main > * { grid-column: 2; min-width: 0; }
  .settings-main > .settings-nav {
    grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 0; align-self: start;
    max-height: 100dvh; overflow-y: auto; padding: var(--sp-4) 2px var(--sp-5);
  }
  .settings-nav .sn-head { display: block; padding: 6px 12px 0; font-family: var(--title-font, var(--font-display)); font-size: var(--fs-2xl); font-weight: var(--display-weight, 700); letter-spacing: var(--display-track, 0); }
  /* the list's own heading names the place; each section brings its own */
  .settings-main > .topbar { display: none; }
  .settings-main { padding-top: var(--sp-5); --list-top: 0px; }
  .settings-main > .settings-nav { top: 0; margin-top: calc(var(--sp-5) * -1); }
}
@media (min-width: 1000px) {
  .settings-main { grid-template-columns: 270px minmax(0, 1fr); column-gap: var(--sp-6); }
}
/* the old pill tabs are gone; anything still asking for them gets the list */
.settings-tabs { display: none; }

/* a section's own head: title and a line under it */
.sec-head { display: grid; gap: 4px; padding: 0 4px; }
.sec-head h2 { font-size: var(--fs-2xl); font-family: var(--title-font, var(--font-display)); font-weight: var(--display-weight, 700); letter-spacing: var(--display-track, 0); }
.sec-head p { color: var(--muted); }

/* ---------- list tools ---------- */
.list-tools {
  position: sticky; top: var(--list-top, var(--topbar-h)); z-index: 5; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
:root[data-look="a"] .list-tools { background: color-mix(in srgb, var(--bg) 70%, transparent); }
:root[data-look="a"][data-theme="light"] .list-tools { background: rgba(255,255,255,.85); }
.list-filter { flex: 1 1 200px; min-width: 0; height: 38px; padding: 0 14px 0 36px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background-color: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f88a3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px 50%; }
:root[data-look="a"] .list-filter { background-color: rgba(255,255,255,.05); }
:root[data-look="a"][data-theme="light"] .list-filter { background-color: #fff; }
.list-filter:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
.list-count { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.list-more { display: flex; justify-content: center; padding: var(--sp-3); border-top: 1px solid var(--border); }
.list-empty { padding: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); }
[data-paged] > li.is-paged-out, [data-filterable] > li.is-filtered-out { display: none; }
/* sheets inside a settings page keep their own placement */
.settings-main > dialog.sheet { margin: auto auto 0; grid-column: auto; }
@media (min-width: 640px) { .settings-main > dialog.sheet { margin: auto; } }

/* Your areas in the rail (region clubs, round 019). */
.rail-clubs-list a.is-area { --area: var(--primary); background: color-mix(in oklab, var(--area) 14%, transparent); }
.rail-clubs-list a.is-area .mesh-chip { box-shadow: 0 0 0 2px var(--area); }
.rail-area { display: inline-flex; vertical-align: -2px; color: var(--area, var(--primary)); }
.rail-area svg { width: 13px; height: 13px; }

/* css/mobilenav.css */
/* mobilenav.css: getting around on every width (talk/019), loaded after chrome.css.
   - phone (< 760px): the tab bar, Home · Chats · Clubs · Activity · You; Create
     is the small + in the Home and You headers
   - tablet (760–999px): a slim rail of icons instead of the tab bar, with
     its labels as tooltips; the page keeps its phone-width column
   - desktop (≥ 1000px): the full rail (components.css, chrome.css)
   - the You hub (you.html), right-rail panels brought into the page on
     narrower screens, and autosave's "Restored your draft" note */

/* ---------- the header + (Create, not the hero) ---------- */
.create-plus { flex: none; }
:root[data-look] .create-plus {
  width: 34px; height: 34px; border-radius: var(--r-pill); color: var(--create-text, #fff);
  background: var(--create-fill); box-shadow: none;
}
:root[data-look] .create-plus .ic { width: 20px; height: 20px; stroke-width: 2.6; }
:root[data-look] .create-plus:hover { filter: brightness(1.08); }

/* ---------- tablet: the icon rail ---------- */
@media (min-width: 760px) and (max-width: 999px) {
  :root { --rail-w: 76px; --tabbar-h: 0px; }
  body.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .tabbar { display: none; }
  .shell, .is-guest .shell { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }
  .joinbar { left: calc(var(--rail-w) + 10px); }
  .is-guest .shell { padding-bottom: 96px; }

  .rail {
    position: sticky; top: 0; height: 100dvh;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) 8px var(--sp-3); border-right: 1px solid var(--border);
    overflow: hidden;
  }
  .rail > * { flex-shrink: 0; }
  .rail .brand { padding: 0; margin: 0 0 var(--sp-1); justify-content: center; }
  .rail .brand img { --logo: 40px; width: 40px; height: 40px; }
  .rail .brand-word, .rail .rl, .rail-clubs-head, .rail-clubs .name, .rail-clubs .as-av,
  .rail-clubs-more, .rail-clubs-empty, .rail-me .grow, .rail-me > .ic, .rail-guest { display: none !important; }
  .rail-nav { display: grid; gap: 4px; }
  .rail-nav a {
    position: relative; display: grid; place-items: center; width: 52px; height: 46px;
    border-radius: var(--r-md); color: var(--text);
  }
  .rail-nav a:hover, .rail-nav a[aria-current="page"] { background: var(--surface-2); }
  .rail-nav a[aria-current="page"] .ic { stroke-width: 2.4; }
  .rail-nav .badge, .rail-clubs .badge { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; font-size: 10px; box-shadow: 0 0 0 2px var(--bg); }
  .rail .btn-create { width: 52px; height: 44px; min-height: 0; padding: 0; justify-content: center; }
  .rail .btn-create .ic { margin: 0; }
  .rail .rail-clubs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
  .rail-clubs-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
    display: grid; gap: 4px; justify-items: center; align-content: start; padding: 2px 0 8px;
    mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent);
  }
  .rail-clubs-list::-webkit-scrollbar { display: none; }
  .rail-clubs a { position: relative; display: grid; place-items: center; width: 52px; height: 44px; border-radius: var(--r-md); }
  .rail-clubs a:hover { background: var(--surface-2); }
  .rail-clubs .mesh-chip { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
  .rail-foot { display: grid; justify-items: center; gap: 6px; margin-top: auto; }
  .rail-me { display: grid; place-items: center; padding: 4px; border-radius: var(--r-pill); }
  .rail-me:hover { background: var(--surface-2); }
  /* the phone header's logo is the rail's job here; Home says its name */
  .topbar > .brand.only-mobile { display: none !important; }
  .home-top .title.only-desktop { display: block !important; }
  .search-pill .only-desktop { display: inline !important; }
}

/* ---------- right-rail panels on narrower screens: into the page ---------- */
/* Create: your drafts (then how it works) under the composer, not gone. */
@media (max-width: 1199px) {
  .page-create .shell > .aside {
    display: grid; gap: var(--sp-4); width: 100%; max-width: var(--main-w);
    margin: var(--sp-5) auto 0; padding: 0 12px;
  }
  .page-create .shell > .aside .how { order: 2; }
  /* the newest few; "All your pops and versions" has the rest (no endless list) */
  .page-create .shell > .aside .rows > li:nth-child(n+6) { display: none; }
}
@media (min-width: 640px) and (max-width: 1199px) { .page-create .shell > .aside { padding: 0; } }

/* ---------- Clubs: Local's places one tap away (not behind the fold) ---------- */
.clubs-hood { margin: 0 12px var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clubs-hood .local-hood-a { padding: 8px 10px; }
.local:has(.local-bar[aria-expanded="true"]) + .clubs-hood { display: none; } /* open, the section shows them itself */
.clubs-hood .local-hood-a b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clubs-hood .local-hood-a span span { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 640px) { .clubs-hood { margin-left: 0; margin-right: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- the You hub ---------- */
.you-main { display: grid; gap: var(--sp-5); align-content: start; padding-bottom: var(--sp-6); }
.you-sec { display: grid; gap: var(--sp-2); padding: 0 12px; }
@media (min-width: 640px) { .you-sec { padding: 0; } }
.you-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.you-sec .section-title { margin: 0; padding: 0 4px; }
.you-sec-head .link { font-size: var(--fs-sm); font-weight: var(--fw-semi); padding: 0 4px; }
.you-profiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.you-profile {
  display: flex; align-items: center; gap: var(--sp-2); padding: 10px 12px 10px 10px;
  border-radius: var(--r-lg); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent);
}
:root[data-look="a"] .you-profile { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
:root[data-look="a"][data-theme="light"] .you-profile { background: rgba(255,255,255,.78); }
.you-profile-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text); }
.you-profile-main .grow { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.you-profile-main b { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you-profile-main .sub { font-size: var(--fs-sm); color: var(--muted); }
.you-profile-main > .ic { color: var(--faint); }
.you-thumb { width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--muted); }
.you-thumb img { width: 100%; height: 100%; object-fit: cover; }
.you-pop-list a .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you-empty { display: flex; align-items: center; gap: 12px; padding: 12px; color: var(--text); }
.you-empty .grow { flex: 1; display: grid; }
.you-empty .sub { font-size: var(--fs-sm); color: var(--muted); }
.you-settings .settings-nav .sn-head { display: none; }
.you-foot { gap: var(--sp-3); }
.you-foot form { margin: 0; }
.you-legal { text-align: center; }

/* ---------- autosave: "Restored your draft · Discard" ---------- */
.as-note { display: flex; align-items: center; gap: 6px; margin: 6px 4px 0; font-size: var(--fs-xs); color: var(--muted); }
.as-note .link { font: inherit; font-weight: var(--fw-semi); color: var(--accent-text); background: none; border: 0; padding: 0; cursor: pointer; }
.as-note .link:hover { text-decoration: underline; }
.as-note.is-float {
  position: absolute; left: 12px; bottom: calc(100% + 6px); margin: 0; padding: 4px 12px; z-index: 6;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2);
}

/* ---------- the drawer: the full rail, sliding over the page (< 1000px) ----------
   The phone tab bar's Menu, the slim rail's menu button and a swipe from the
   left edge open it (chrome.js); a tap outside, a swipe back, Esc or Back
   close it. Desktop has the rail itself, so none of this applies there. */
.rail-drawer-head, .drawer-scrim { display: none; }
.th-sun { display: none; }
:root[data-theme="light"] .th-moon { display: inline-flex; }
:root:not([data-theme="light"]) .th-moon { display: none; }
:root:not([data-theme="light"]) .th-sun { display: inline-flex; }
@media (min-width: 760px) and (max-width: 999px) {
  .rail-drawer-head { display: flex; justify-content: center; }
  .rail-drawer-head .rail-close { display: none; }
}
@media (max-width: 999px) {
  .drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 90; background: rgba(8, 8, 14, .44);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  body.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }
  body.drawer-open .rail {
    display: flex !important; flex-direction: column; align-items: stretch; gap: var(--sp-3);
    position: fixed; z-index: 91; top: 0; left: 0; bottom: 0; height: 100dvh;
    width: min(320px, 86vw); padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--bg); border-right: 1px solid var(--border); overflow: hidden;
    animation: drawer-in .22s cubic-bezier(.2, .8, .2, 1);
  }
  body.drawer-open .rail .rail-drawer-head { display: flex; justify-content: flex-end; margin-bottom: -40px; }
  body.drawer-open .rail .rail-drawer-head .rail-expand { display: none; }
  body.drawer-open .rail .rail-drawer-head .rail-close { display: grid; width: 44px; height: 44px; }
  body.drawer-open .rail :is(.brand-word, .rl, .rail-clubs-head, .rail-clubs .name, .rail-clubs .as-av, .rail-me .grow, .rail-me > .ic, .rail-guest) { display: revert !important; }
  body.drawer-open .rail .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px; justify-content: flex-start; }
  body.drawer-open .rail .brand img { width: 32px; height: 32px; }
  body.drawer-open .rail-nav { display: grid; gap: 2px; }
  body.drawer-open .rail-nav a {
    display: flex; align-items: center; gap: 14px; width: auto; height: 50px; padding: 0 14px;
    border-radius: var(--r-md); color: var(--text); font-weight: var(--fw-semi); font-size: var(--fs-md);
  }
  body.drawer-open .rail-nav a[aria-current="page"] { background: var(--surface-2); font-weight: var(--fw-bold); }
  body.drawer-open .rail-nav .badge { position: static; margin-left: auto; box-shadow: none; }
  body.drawer-open .rail .btn-create { width: auto; height: 48px; padding: 0 16px; justify-content: center; gap: 8px; }
  body.drawer-open .rail .rail-clubs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0 -6px; }
  body.drawer-open .rail-clubs-head { display: grid; gap: 6px; padding: 0 6px 6px; }
  body.drawer-open .rail-clubs-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: grid; gap: 2px; align-content: start; justify-items: stretch; padding: 0 6px 6px;
  }
  body.drawer-open .rail-clubs a { display: flex; align-items: center; gap: 12px; width: auto; height: 50px; padding: 0 10px; border-radius: var(--r-md); font-weight: var(--fw-semi); font-size: var(--fs-md); color: var(--text); }
  body.drawer-open .rail-clubs .mesh-chip { width: 34px; height: 34px; border-radius: 10px; }
  body.drawer-open .rail-clubs .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.drawer-open .rail-clubs .badge { position: static; margin-left: auto; box-shadow: none; }
  body.drawer-open .rail-foot { display: flex; align-items: center; gap: 6px; margin-top: 0; }
  body.drawer-open .rail-foot .rail-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); }
  body.drawer-open .rail-me .grow { line-height: 1.2; }
  body.drawer-open .rail-me .grow b, body.drawer-open .rail-me .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.drawer-open .rail-me .sub { font-size: var(--fs-xs); color: var(--muted); }
  body.drawer-open .rail-foot .rail-theme { width: 44px; height: 44px; }
  body.drawer-dragging .rail { animation: none; transition: none; }
}
@keyframes drawer-in { from { transform: translateX(-104%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.drawer-open .rail { animation: none; }
  .drawer-scrim { transition: none; }
}

/* css/chats.css */
/* chats.css: the Chats list (chatlist.html) on /chats, beside a club or a
   conversation on a desktop (.chatpane, Slack/Discord style), and as the club
   switcher sheet on a phone. Loaded on every page (layout.html), after chrome.css. */

/* ---------- rows ---------- */
.chatlist { display: grid; gap: var(--sp-2); min-width: 0; }
.chatlist-find {
  display: flex; align-items: center; gap: 8px; margin: 0 var(--gutter); padding: 0 12px; height: 40px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted);
}
.chatlist-find:focus-within { border-color: var(--primary); }
.chatlist-q { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); outline: none; }
.chat-rows { list-style: none; margin: 0; padding: 0 calc(var(--gutter) - 8px); display: grid; gap: 2px; }
.chat-rows > li[hidden] { display: none; }
.chat-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  padding: 8px; border-radius: 14px; color: inherit; text-decoration: none; min-height: 62px;
}
.chat-row:hover { background: var(--surface-2); }
.chat-row.is-current { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.chat-thumb.mesh-chip, .chat-thumb.av { width: 44px; height: 44px; --av: 44px; font-size: 15px; }
.chat-thumb.mesh-chip { border-radius: 12px; }
.chat-row-main { display: grid; gap: 2px; min-width: 0; }
.chat-row-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.chat-row-title { flex: 0 0 auto; max-width: 72%; font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chat-row-hint { flex: 0 6 auto; min-width: 0; font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row-time { margin-left: auto; flex: none; padding-left: 6px; font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; }
.chat-row-last { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row.is-unread .chat-row-title { font-weight: var(--fw-bold); }
.chat-row.is-unread .chat-row-last { color: var(--text); }
.chat-row.is-unread .chat-row-time { color: var(--accent-text); font-weight: var(--fw-semi); }
.chat-row .badge { position: static; }
.chat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pop-grad, var(--primary)); }
.chatlist-none, .chatlist-empty { padding: var(--sp-3) var(--gutter); font-size: var(--fs-sm); }

/* ---------- /chats ---------- */
.chats-main { padding-bottom: var(--sp-5); }
.chats-main .chatlist { margin-top: var(--sp-1); }
.chats-find { margin: var(--sp-5) var(--gutter) 0; }
.chats-pick { display: none; }
@media (min-width: 1000px) {
  .page-chats .shell { grid-template-columns: 360px minmax(0, 1fr); justify-content: stretch; gap: 0; padding: 0; }
  .page-chats .chats-main {
    position: sticky; top: 0; height: 100dvh; overflow-y: auto; border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 35%, transparent);
  }
  .page-chats .chats-main .topbar { padding: 0 var(--sp-3) 0 var(--sp-4); }
  .chats-pick { display: grid !important; place-items: center; min-height: 100dvh; padding: var(--sp-6); }
  .chats-pick-in { width: min(100%, 460px); display: grid; gap: var(--sp-3); justify-items: center; text-align: center; }
  .chats-pick-ring { width: 96px; height: 96px; }
  .chats-pick-actions { justify-content: center; }
  .chats-pick-find { width: 100%; margin-top: var(--sp-5); display: grid; gap: var(--sp-2); text-align: left; }
}

/* ---------- /chats/new ---------- */
.chats-new .chats-new-find { margin-bottom: var(--sp-4); }
.chats-new .chats-new-find .faint { font-weight: var(--fw-semi); }
.chats-new-results { display: grid; gap: var(--sp-4); padding: 0 var(--gutter); }
.chats-new-results .chat-rows { padding: 4px; }
.chats-new-none, .chats-new-club { padding: 0 var(--gutter); }
.chats-new-club { margin-top: var(--sp-5); }

/* ---------- the pane beside a chat (desktop) ---------- */
.chatpane, .chatpane-scrim { display: none; }
.chatpane-head { display: flex; align-items: center; gap: 4px; padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-4); }
.chatpane-title { font-family: var(--font-display); font-size: var(--fs-lg, 20px); font-weight: var(--fw-bold); color: inherit; text-decoration: none; }
.chatpane .chatlist { padding-bottom: var(--sp-4); }
.chatpane .chatlist-find { margin: 0 var(--sp-3); }
.chatpane .chat-rows { padding: 0 6px; }
@media (min-width: 1000px) {
  body.app.has-chatpane { grid-template-columns: var(--rail-w) 340px minmax(0, 1fr); }
  .has-chatpane .chatpane {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; min-width: 0;
    border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 35%, transparent);
  }
  .has-chatpane .chatpane .chatlist { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; align-content: start; }
  .chatpane-close { display: none; }
  /* The pane is the club list now: the rail keeps nav, Create and you. */
  .has-chatpane .rail .rail-clubs, .page-chats .rail .rail-clubs { visibility: hidden; }
  /* Room for the conversation: the club's own side rail waits for a wide screen. */
  .has-chatpane.page-club .shell { grid-template-columns: minmax(0, 1fr); }
  .has-chatpane.page-club .aside { display: none; }
  .has-chatpane .club-shelf { display: block; }
}
@media (min-width: 1640px) {
  .has-chatpane.page-club .shell { grid-template-columns: minmax(0, 1fr) var(--aside-w); }
  .has-chatpane.page-club .aside { display: flex; }
  .has-chatpane .club-shelf { display: none; }
}

/* ---------- phones: the same pane is the club switcher sheet ---------- */
.club-switch { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.club-switch:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.club-switch-caret { transform: rotate(90deg); opacity: .85; flex: none; }
.club-switch-mini { all: unset; cursor: pointer; display: none; }
@media (min-width: 1000px) { .club-switch { cursor: default; pointer-events: none; } .club-switch-caret { display: none; } }
@media (max-width: 999px) {
  .chatpane.is-open {
    display: flex; flex-direction: column; position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
    max-height: min(78dvh, 640px); padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-3);
    animation: chatpane-up var(--dur-3, .24s) var(--ease, ease) both;
  }
  .chatpane.is-open .chatlist { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .chatpane-scrim.is-open { display: block; position: fixed; inset: 0; z-index: 89; background: rgba(8, 6, 16, .5); }
}
@keyframes chatpane-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chatpane.is-open { animation: none; } }

/* ---------- club page: Join shows once (the bar under the chat has it) ---------- */
.club-main[data-tab="chat"] .club-head-join { display: none; }

/* ---------- unread in a club ---------- */
.jump-unread {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-2);
}
.jump-unread[hidden] { display: none; }
.jump-unread .ic { transform: rotate(-90deg); }

/* ---------- thumbnails: no initials painted over a photo ---------- */
:root[data-look] .mesh-chip { font-size: 0 !important; }

/* ---------- the rail's club list: same order and names as Chats ---------- */
.rail-hint { font-weight: var(--fw-medium); font-size: 11px; color: var(--faint); }

/* the Chats filters (/chats?show=, chatmarks.go): links, so Back works */
.chat-shows { display: flex; margin: 0 8px 8px; }
.chat-shows a { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; border-radius: var(--r-pill);
  color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-sm); text-decoration: none; }
.chat-shows a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.member-row .member-dm { flex: none; }

/* css/notify.css */
/* notify.css: the push ask, muted chats, Settings → Notifications, the
   club's Notifications sheet, Share to… and the offline page
   (notify.js, share-target.js; web/notify_*.go, web/pwa.go). */

/* the gentle ask: a card above the tab bar, lit by the turning ring */
.push-ask {
  position: fixed; z-index: 60; left: 16px; right: 16px;
  bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 12px);
  display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center;
  max-width: 460px; margin: 0 auto; padding: 14px 16px;
  border: 1.5px solid transparent; border-radius: var(--r-lg, 18px);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--ring), var(--create-ring, #6D5BFF, #F472B6, #FB923C, #6D5BFF)) border-box;
  box-shadow: var(--shadow-pop, 0 10px 30px -8px rgba(109, 40, 255, .6));
  animation: look-ring 6s linear infinite;
  transform: translateY(16px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.push-ask.is-in { transform: none; opacity: 1; }
.push-ask-ring { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pop-grad, linear-gradient(115deg, #7A3BFF, #FF4D8D)); color: #fff; }
.push-ask-text { line-height: 1.3; }
.push-ask-text .sub { display: block; font-size: var(--fs-sm, 14px); color: var(--muted); }
.push-ask-acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
@media (min-width: 1000px) { .push-ask { bottom: 24px; left: auto; right: 24px; } }
@media (prefers-reduced-motion: reduce) { .push-ask { animation: none; transition: none; } }

/* a club set to Off, on Chats */
.chat-muted { display: inline-grid; place-items: center; color: var(--faint); margin-left: 4px; flex: none; }
.chat-muted .ic { width: 15px; height: 15px; }

/* Settings → Notifications */
.push-state { padding: 0 var(--sp-4, 16px); }
.notify-clubs .row { gap: 12px; }
.notify-select { width: auto; min-width: 11.5em; flex: none; }
.notify-club.is-off .title { color: var(--muted); }
.quiet-times { gap: 12px; padding: 0 2px; }
.quiet-times label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.quiet-times .input { width: auto; }

/* the club menu's sheet */
.notify-level .tick { margin-left: auto; visibility: hidden; color: var(--accent-text); }
.notify-level[aria-checked="true"] { background: var(--accent-wash); }
.notify-level[aria-checked="true"] .tick { visibility: visible; }

/* Share to… */
.share-to { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.share-compose { display: grid; gap: 10px; padding: 14px; margin-bottom: 16px; }
.share-text { width: 100%; resize: vertical; min-height: 4.5em; font: inherit; }
.share-photos { display: flex; gap: 8px; overflow-x: auto; }
.share-photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; flex: none; }
.share-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.share-row .tick { margin-left: auto; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); color: transparent; }
.share-row[aria-pressed="true"] { background: var(--accent-wash); }
.share-row[aria-pressed="true"] .tick { background: var(--primary); border-color: var(--primary); color: #fff; }
.share-row:disabled { opacity: .45; cursor: not-allowed; }
.share-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.share-bar .btn { width: 100%; max-width: 560px; margin: 0 auto; display: flex; justify-content: center; }
.page-share .tabbar { display: none; }
@media (min-width: 1000px) { .share-bar { left: var(--rail-w, 0); } }

/* offline */
.offline .empty { min-height: 70vh; }
.offline-ring { display: grid; place-items: center; padding: 3px; border-radius: 50%;
  background: conic-gradient(from var(--ring), var(--create-ring, #6D5BFF, #F472B6, #FB923C, #6D5BFF)); animation: look-ring 6s linear infinite; }
.offline-ring img { width: 64px; height: 64px; padding: 10px; border-radius: 50%; background: var(--bg, #07070C); }
@media (prefers-reduced-motion: reduce) { .offline-ring { animation: none; } }
.quiet-form, .digest-choices { padding: 0 var(--sp-4, 16px) var(--sp-4, 16px); }
.notify-level .grow { line-height: 1.3; }
.notify-level .sub { display: block; font-size: var(--fs-sm, 14px); }

/* css/msg.css */
/* msg.css (r014 messaging depth): formatting, the composer's Aa bar, voice
   notes, typing and "Seen", message requests, #tags. */

/* ---------- formatted text (fmt.js) ---------- */
.md { white-space: normal; }
.md .md-p, .md .md-quote { display: block; }
.md .md-p + .md-p { margin-top: .35em; }
.md strong { font-weight: var(--fw-bold, 700); }
.md s { opacity: .75; }
.md .md-code, .md .md-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.md .md-code { padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, currentColor 12%, transparent); overflow-wrap: anywhere; }
.md .md-pre { margin: .35em 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, currentColor 10%, transparent);
  overflow-x: auto; max-width: 100%; white-space: pre; line-height: 1.35; }
.md .md-pre code { white-space: pre; }
.md .md-quote { margin: .25em 0; padding: 0 0 0 10px; border-left: 3px solid color-mix(in srgb, currentColor 40%, transparent); opacity: .9; }
.md .md-list { margin: .25em 0; padding-left: 1.3em; }
.md .md-list li { margin: 0; }
.md a.md-link, .md a.md-tag, .md a.md-at { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.md .md-tag, .md a.md-at { text-decoration: none; font-weight: var(--fw-bold, 700); color: var(--accent-text, inherit); }
.msg.mine .md a.md-tag, .msg.mine .md a.md-at, .msg-group.mine .md a.md-tag, .msg-group.mine .md a.md-at { color: inherit; }
.md a.md-tag:hover, .md a.md-at:hover { text-decoration: underline; }
.spoiler { background: currentColor; border-radius: 4px; cursor: pointer; transition: background .2s; padding: 0 2px; }
.spoiler > * { visibility: hidden; }
.spoiler:not(.shown) { color: transparent; background: color-mix(in srgb, var(--text, #fff) 75%, transparent); }
.spoiler.shown { background: color-mix(in srgb, currentColor 14%, transparent); cursor: auto; }
.spoiler.shown > * { visibility: visible; }
.spoiler:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---------- the Aa bar ---------- */
.inputbar { flex-wrap: wrap; }
.fmt-toggle { flex: none; font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.fmt-toggle.is-on { color: var(--primary); }
.fmt-bar { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 2px 2px; }
.fmt-bar[hidden] { display: none; }
.fmt-btn { min-width: 34px; height: 32px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 14px; cursor: pointer; }
.fmt-btn:hover { border-color: var(--primary); }
.fmt-hint { flex-basis: 100%; color: var(--faint); font-size: var(--fs-xs, 12px); font-family: ui-monospace, Menlo, monospace; padding: 2px 4px 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .fmt-hint { display: none; } }

/* ---------- voice notes ---------- */
.bubble-voice { display: flex; align-items: center; gap: 8px; min-width: 220px; max-width: 320px; padding: 6px 10px 6px 6px; }
.vn-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--ink, #fff); color: var(--on-ink, #000); display: grid; place-items: center; cursor: pointer; }
.vn-tri { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.vn.is-playing .vn-tri { width: 10px; height: 12px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 35%, transparent 35% 65%, currentColor 65%); }
.vn-bars { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; touch-action: none; min-width: 96px; }
.vn-bars i { display: block; flex: 1; height: var(--h, 30%); min-height: 3px; border-radius: 2px; background: color-mix(in srgb, currentColor 35%, transparent); }
.vn-bars i.on { background: currentColor; }
.vn-time { font-size: var(--fs-xs, 12px); font-variant-numeric: tabular-nums; opacity: .8; min-width: 32px; text-align: right; }
.vn-speed { flex: none; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 2px 6px; cursor: pointer; }
.vn.is-broken .vn-bars { opacity: .4; }
.vn-rec { flex-basis: 100%; display: flex; align-items: center; gap: 10px; }
.vn-rec[hidden] { display: none; }
.inputbar.is-recording > :not(.vn-rec):not(.fmt-bar) { display: none; }
.vn-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b5c; animation: vn-blink 1s infinite; }
@keyframes vn-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .vn-dot { animation: none; } }
.vn-clock { font-variant-numeric: tabular-nums; font-weight: 700; }
.vn-live { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; }
.vn-live i { display: block; flex: 1; height: var(--h, 10%); border-radius: 2px; background: var(--primary); }
.vn-note { color: var(--faint); font-size: var(--fs-xs, 12px); }

/* ---------- typing, Seen ---------- */
.typing-line { display: flex; align-items: center; gap: 8px; padding: 4px 16px; color: var(--muted); font-size: var(--fs-xs, 12px); }
.typing-line[hidden] { display: none; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: typing-b 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-b { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; } }
.dm-seen, .seen-by { display: block; color: var(--faint); font-size: var(--fs-xs, 12px); padding: 0 12px; }
.seen-by { text-align: right; margin: 2px 0 0; }

/* ---------- message requests ---------- */
.chat-requests { display: flex; align-items: center; gap: 12px; margin: 4px 8px 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; }
.chat-requests .sub { display: block; color: var(--muted); font-size: var(--fs-xs, 12px); }
.chat-requests-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--pop-grad, var(--primary)); color: #fff; }
.requests-intro { padding: 0 var(--sp-4, 16px); margin: 0 0 14px; }
.request-row { display: grid; gap: 6px; padding-bottom: 10px; }
.request-row .row { text-decoration: none; color: inherit; }
.request-acts { padding: 0 12px 0 60px; }
.dm-request { padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface-2); display: grid; gap: 8px; }

/* ---------- account: two-step, export ---------- */
.tf-qr svg { width: 180px; height: 180px; background: #fff; border-radius: 12px; padding: 6px; }
.tf-secret, .tf-code-list { font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.tf-code-list { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); line-height: 1.6; }
.tf-setup, .tf-codes, .tf-form { padding: 0 var(--sp-4, 16px) var(--sp-4, 16px); }
.export-state { padding: 0 var(--sp-4, 16px); }
.fmt-cheat { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; margin: 0; padding: 0 var(--sp-4, 16px) var(--sp-4, 16px); }
.fmt-cheat div { display: flex; gap: 10px; align-items: baseline; }
.fmt-cheat dt code { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.fmt-cheat dd { margin: 0; color: var(--muted); }

/* ---------- the composer at phone width (talk/017 #14) ----------
   ＋ (photo, poll, event) on the left, Aa inside the field, mic and send on
   the right: "Message #general" stays on one line at 390. */
.inputbar-in { flex: 1; min-width: 0; position: relative; display: flex; align-items: flex-end; }
.inputbar-in .inputbar-field { flex: 1; min-width: 0; padding-right: 46px; }
.inputbar-in .fmt-toggle { position: absolute; right: 4px; bottom: 4px; width: 36px; height: 36px; min-width: 0; }
.inputbar-field::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inputbar > .icon-btn { flex: none; }
@media (max-width: 420px) {
  .inputbar { gap: 4px; padding-left: var(--sp-2); padding-right: var(--sp-2); }
}
/* One line is a pill; taller is a rounded rectangle that grows to 40% of the
   screen (half on a desktop), then scrolls inside (grow.js sets the height
   and .is-multi). ＋, Aa, mic and send stay on the bottom line. */
.inputbar-field {
  transition: border-radius .18s var(--ease, ease), border-color var(--dur-1, .12s) var(--ease, ease);
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text, #888) 28%, transparent) transparent;
}
.inputbar-field.is-multi { border-radius: 16px; padding-left: 14px; }
.inputbar-field::-webkit-scrollbar { width: 6px; }
.inputbar-field::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text, #888) 28%, transparent); border-radius: 3px; }
.inputbar-field::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
@media (min-width: 900px) { .inputbar-field { max-height: 50dvh; } }
@media (prefers-reduced-motion: reduce) { .inputbar-field { transition: none; } }
/* the send button's chevron: what Enter does (grow.js) */
.inputbar > .send { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.inputbar > .send.is-held { transform: scale(.9); }
.send-mode {
  flex: none; position: relative; z-index: 1; align-self: flex-end;
  width: 18px; height: 18px; margin: 0 0 30px calc(-18px - var(--sp-2) + 4px); padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--surface, #fff); background: var(--surface-3, var(--surface-2)); color: var(--muted);
}
.send-mode .ic { width: 11px; height: 11px; }
.send-mode::before { content: ""; position: absolute; inset: -7px; } /* a bigger target */
.send-mode:hover, .send-mode:focus-visible { color: var(--text); }
.enter-hint { display: none; flex-basis: 100%; order: 99; padding: 0 6px; color: var(--faint); font-size: 11px; line-height: 1.2; text-align: right; }
.inputbar.is-multi:focus-within .enter-hint, .inputbar.show-hint .enter-hint { display: block; }
.inputbar.is-recording > .enter-hint { display: none; }
/* the Aa row above a post, comment or event box (fmt.js toolbar) */
.fmt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fmt-row .fmt-toggle { height: 32px; min-width: 40px; border-radius: 10px; }
.fmt-row .fmt-bar { flex-basis: auto; flex: 1; padding: 0; }
.fmt-row .fmt-hint { flex-basis: 100%; }
.comment-form:has(.fmt-row) { flex-wrap: wrap; }
.comment-form .fmt-row { order: -1; flex-basis: 100%; }

/* ~channel links (fmt.js textDOM): the channel glyph's quiet cousin, never a #. */
.md a.md-ch { color: var(--accent-text); font-weight: var(--fw-semi); text-decoration: none; white-space: nowrap; }
.md a.md-ch::before { content: "\203A\00a0"; opacity: .6; }
.md a.md-ch:hover { text-decoration: underline; }

/* A mention waiting (chan_unread.go): set apart from plain "new". */
.badge.badge-at { background: var(--danger); color: #fff; }
.ch-unread.is-mention { background: var(--danger); color: #fff; }

/* ---------- membership lines (clubadd.go): quiet, a run folds into one ---------- */
.chat-list .msg.is-system.is-member-line .msg-sysline { background: none; border: 0; box-shadow: none; padding: 2px 10px; margin: 2px auto; opacity: .75; font-size: 12px; }
.member-fold { display: flex; align-items: center; gap: 6px; align-self: center; margin: 4px auto; padding: 3px 10px; border: 0; border-radius: var(--r-pill, 999px);
  background: none; color: var(--muted); font: inherit; font-size: var(--fs-xs, 12px); cursor: pointer; }
.member-fold:hover { background: var(--surface-2, rgba(127,127,127,.12)); color: var(--text); }
.member-fold .ic { opacity: .7; }
.chat-list > .msg.is-member-line[hidden] { display: none; }

/* ---------- a quick count under a message (headcount.go): "Coming? 👍 12 coming" ---------- */
.headcount { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.headcount-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border-radius: var(--r-pill, 999px);
  border: 1.5px solid var(--border); background: var(--surface, transparent); color: var(--text); font: inherit; font-weight: var(--fw-semi); cursor: pointer; }
.headcount-btn:hover { border-color: var(--primary); }
.headcount-btn.is-me { border-color: var(--primary); background: var(--accent-wash, rgba(127,90,240,.12)); }
.headcount-e { font-size: 20px; line-height: 1; }
.headcount-n { font-weight: var(--fw-bold, 700); color: var(--primary); }
.headcount-btn .headcount-n::before { content: "·"; margin-right: 8px; color: var(--muted); font-weight: normal; }
.headcount-who { font-size: var(--fs-xs, 12px); max-width: 40ch; }

/* ---------- bleeped words (bleep.js; the (i) leads to Settings → Messages) ---------- */
.bleep { font-weight: 600; letter-spacing: .02em; white-space: nowrap; cursor: help; }
.bleep-i { display: inline-block; margin-left: .2em; font-size: .85em; line-height: 1; text-decoration: none; color: var(--muted, inherit); opacity: .8; vertical-align: baseline; }
.bleep-i:hover, .bleep-i:focus-visible { opacity: 1; color: var(--primary, inherit); }
.bleep-note { color: var(--muted, inherit); font-style: italic; }
.bleep-show { appearance: none; border: 0; background: none; padding: 0; margin-left: .2em; font: inherit; font-style: normal; font-weight: 600; color: var(--primary, inherit); text-decoration: underline; cursor: pointer; }
.bleep-body[hidden] { display: none; }

/* css/share.css */
/* share.css: the share sheet and the publish fireworks (share.js). */
.share-sheet {
  width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-3);
}
.share-sheet::backdrop { background: rgba(7, 7, 12, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.share-sheet[open] { display: grid; gap: var(--sp-3); animation: share-in .28s var(--ease-out, ease-out); }
@keyframes share-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .share-sheet[open] { animation: none; } }
@media (max-width: 520px) {
  .share-sheet { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }
  @keyframes share-in { from { transform: translateY(40px); opacity: 0; } }
}
.share-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px var(--sp-2); }
.share-title { font-size: var(--fs-xl); line-height: 1.15; overflow-wrap: anywhere; }
.share-sub { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-sm); }
.share-close { margin: -6px -8px 0 0; }
.is-party .share-title { background: var(--pop-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.share-qr {
  justify-self: center; width: min(240px, 64vw); aspect-ratio: 1; padding: 10px; border-radius: var(--r-lg); background: #fff;
  display: grid; place-items: center; color: #333; font-size: var(--fs-sm);
  box-shadow: 0 0 0 1px var(--border);
}
.is-party .share-qr { box-shadow: 0 0 0 1px var(--border), 0 0 0 5px rgba(255, 77, 141, .18); }
.share-qr svg { width: 100%; height: 100%; display: block; }
.share-qr-cap { text-align: center; color: var(--muted); font-size: var(--fs-xs); margin-top: -4px; }
.share-url { display: flex; gap: var(--sp-2); }
.share-input { flex: 1; min-width: 0; font-size: var(--fs-sm); text-overflow: ellipsis; }
.share-copy { flex: none; }
.share-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.pc-fireworks { position: fixed; inset: 0; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; pointer-events: none; z-index: 2147483000; }

/* An invite's channels (share.js opts.invite): Messages, Email, WhatsApp. */
.share-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.share-chan { flex-direction: column; gap: 4px; height: auto; padding: 10px 6px; font-size: var(--fs-sm); text-decoration: none; }

/* css/people.css */
/* people.css: one person's actions, the same row everywhere (partials.html
   "person-acts", social.js personActs): Follow, then ⋯. It never wraps
   under or hides behind anything: it doesn't shrink, and what's beside it
   gives way (ellipsis) instead. */
.person-acts { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.person-acts .person-menu > summary { width: 36px; height: 36px; }
.person-acts .menu-list { min-width: 210px; }

/* rows whose main part is a link: the actions sit beside it, not in it */
.search-people li.has-acts { display: flex; align-items: center; gap: 4px; padding-right: var(--sp-3, 12px); }
.search-people li.has-acts { min-width: 0; }
.search-people li.has-acts > .row { flex: 1; min-width: 0; }
.search-people li.has-acts .grow { min-width: 0; }
.people-list > li { min-width: 0; }
.people-list .row .grow { min-width: 0; }

/* club members: badges wrap under the name instead of pushing it out */
.member-top { flex-wrap: wrap; row-gap: 2px; }
.member-top b { max-width: 100%; }

/* the pop page's maker row: Follow and ⋯ stay together on the right */
.by-row .person-acts { margin-left: auto; }


/* a contact card, wherever it's shown (profile, DM sheet, settings preview) */
.contact-card { margin: 0; display: grid; gap: 2px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.contact-card > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--sp-3); padding: 12px 14px; background: var(--surface-2); }
@media (max-width: 480px) { .contact-card > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.contact-card dt { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.contact-card dd { margin: 0; overflow-wrap: anywhere; user-select: text; }
.profile-contact { margin: var(--sp-4, 16px) 0 0; display: grid; gap: var(--sp-2, 8px); max-width: 560px; }
.profile-contact .section-title { display: flex; align-items: center; gap: 6px; }
.profile-contact-note { display: flex; gap: 8px; align-items: center; margin: var(--sp-3, 12px) 0 0; color: var(--muted); }

/* the contact card editor (settings-profile.html "card-field", talk/019):
   each field a small panel — icon, type, kind, move/remove — then its value(s) */
.card-lines { display: grid; gap: var(--sp-2, 8px); }
.pe-card .card-line { display: grid; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.pe-card .card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.card-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 999px; color: var(--accent-text); background: var(--accent-wash); }
.card-ic svg { width: 16px; height: 16px; }
.pe-card .card-tname { font-weight: var(--fw-bold); }
.pe-card .card-kind { flex: none; width: auto; min-width: 7.5em; height: 34px; min-height: 0; padding: 0 30px 0 12px; font-size: var(--fs-sm); }
.pe-card .card-moves { margin-left: auto; display: flex; gap: 2px; }
.pe-card .card-moves .icon-btn { width: 36px; height: 36px; }
.pe-card .card-moves .icon-btn svg { width: 16px; height: 16px; }
.pe-card .card-moves .icon-btn[disabled] { opacity: .3; pointer-events: none; }
.pe-card .card-vals { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pe-card .card-line[data-type="other"] .card-vals { grid-template-columns: minmax(7em, 12em) 1fr; }
.pe-card .card-adr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pe-card .card-adr .card-street { grid-column: 1 / -1; }
.pe-card .card-adr textarea { resize: vertical; min-height: 2.6em; }
.pe-card .card-line .field { margin: 0; display: grid; gap: 4px; min-width: 0; }
.pe-card .card-cap { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); }
.pe-card .card-err { margin: 0; color: var(--danger); font-size: var(--fs-sm); }
.pe-card [aria-invalid="true"] { border-color: var(--danger); }
.pe-card .card-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pe-card .card-add .card-cap { margin-right: 2px; }
@media (max-width: 480px) {
  .pe-card .card-line[data-type="other"] .card-vals, .pe-card .card-adr { grid-template-columns: 1fr; }
  .pe-card .card-line { padding-inline: 10px; }
  .pe-card .card-head { gap: 6px; }
  .pe-card .card-kind { min-width: 0; padding-right: 26px; }
  .pe-card .card-moves { gap: 0; }
  .pe-card .card-moves .icon-btn { width: 32px; height: 36px; }
}
.card-save { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.card-save-v3 { font-size: var(--fs-sm); }
.contact-card dt { display: flex; align-items: center; gap: 8px; }
.contact-card dt .card-ic { width: 24px; height: 24px; }
.contact-card dt .card-ic svg { width: 14px; height: 14px; }
.contact-card > div { align-items: center; }
.contact-card > div[data-type="address"] { align-items: start; }

/* css/credit.css */
/* credit.css: credits on photos and videos (round 020; credit.js, mediacredit.go). */
.credit-fields { display: grid; gap: var(--sp-3); border: 0; margin: 0; padding: 0; min-width: 0; }
.credit-fields > legend { padding: 0; margin-bottom: var(--sp-2); font-weight: var(--fw-bold); }
.credit-fields .field[hidden] { display: none; }
.credit-src { display: flex; gap: var(--sp-2); min-width: 0; }
.credit-src .input { flex: 1; min-width: 0; }
.credit-note { color: var(--muted); }
dialog.credit-sheet .sheet-body { gap: var(--sp-3); }
dialog.credit-sheet .sheet-actions { align-items: center; }
dialog.credit-sheet .sheet-actions .btn-strong { flex: 0 0 auto; min-width: 120px; }
@media (min-width: 640px) {
  dialog.credit-sheet { margin: auto; max-width: 520px; border-radius: var(--r-xl); }
}
.credit-line a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); text-underline-offset: 2px; }

/* the club lightbox's foot: caption, credit, actions */
dialog.lightbox .lb-foot { grid-column: 1 / -1; display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: 8px var(--gutter) calc(12px + env(safe-area-inset-bottom)); }
dialog.lightbox .lb-foot .lb-cap { padding: 0; margin: 0; }
dialog.lightbox .lb-credit { margin: 0; font-size: var(--fs-sm); color: rgba(255,255,255,.72); max-width: min(100%, 96ch); overflow-wrap: anywhere; }
dialog.lightbox .lb-credit[hidden], dialog.lightbox .lb-acts [hidden] { display: none; }
dialog.lightbox .lb-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
dialog.lightbox .lb-acts:not(:has(> :not([hidden]))) { display: none; }

/* a profile's header photo credit (profile.html) and in settings */
.profile-band { position: relative; }
.profile-band .wall-credit { top: 6px; bottom: auto; max-width: 64%; } /* the avatar overlaps its bottom-left */
.pe-credit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.pe-credit:empty { display: none; }

/* a club's photo as a region suggestion (region-suggest.html) */
.rc-from { margin: 0; display: grid; gap: 6px; }
.rc-from img { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r-lg); }

/* css/ads.css */
/* ads.css: sponsored items (web/templates/ads-parts.html) and the
   advertiser pages (advertise*.html). In the core bundle. */

.ad-label { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--muted); letter-spacing: .02em; }
.ad-head { color: var(--text); }
.ad-line { color: var(--muted); }

/* Text ad: a slim line inside a slowly turning colour border. The border
   is a conic gradient behind a 1.5px inset; prefers-reduced-motion keeps
   the colours and stops the turn. */
@property --ad-turn { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.ad-text {
  --ad-a: var(--primary); --ad-b: var(--coral, #FF6B6B); --ad-c: var(--amber, #F5A524); --ad-d: var(--cat-data);
  position: relative; border-radius: var(--r-lg); padding: 1.5px; margin: var(--sp-3) 0;
  background: conic-gradient(from var(--ad-turn), var(--ad-a), var(--ad-b), var(--ad-c), var(--ad-d), var(--ad-a));
  animation: ad-turn 14s linear infinite;
}
@keyframes ad-turn { to { --ad-turn: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ad-text { animation: none; } }
.ad-text-in {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--sp-3);
  background: var(--surface); border-radius: calc(var(--r-lg) - 1.5px); padding: var(--sp-2) var(--sp-3);
}
.ad-text .ad-label { grid-column: 1 / -1; }
.ad-text-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); min-width: 0; text-decoration: none; }
.ad-text-a:hover .ad-head { text-decoration: underline; }
.ad-text .ad-head { font-size: var(--fs-md); }
.ad-text .ad-line { font-size: var(--fs-sm); }
.ad-host { font-size: var(--fs-xs); color: var(--accent-text); }

/* "Why this?" */
.ad-why { font-size: var(--fs-xs); color: var(--faint); }
.ad-why summary { cursor: pointer; list-style: none; white-space: nowrap; }
.ad-why summary::-webkit-details-marker { display: none; }
.ad-why summary:hover { color: var(--muted); }
.ad-why[open] { grid-column: 1 / -1; }
.ad-why p { margin: var(--sp-1) 0 0; color: var(--muted); max-width: 52ch; }

/* Card */
.ad-card { display: grid; }
.ad-card-pic { display: block; aspect-ratio: 1.91 / 1; background: var(--surface-2); overflow: hidden; }
.ad-card-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-1); }
.ad-card .ad-head { font-size: var(--fs-lg); margin: 0; }
.ad-card .ad-head a { color: inherit; text-decoration: none; }
.ad-card .ad-head a:hover { text-decoration: underline; }
.ad-card .ad-line { margin: 0; }
.ad-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); flex-wrap: wrap; }
.feed > .ad-card { margin-block: var(--sp-3); }
.best-main .ad-card { margin: var(--sp-4) 0; }

/* Sponsored thread pinned at the top of a club */
.ad-pin {
  display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) var(--sp-3) 0; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--r-md);
  background: var(--accent-wash); color: var(--text); text-decoration: none;
}
.ad-pin:hover { border-color: var(--border-strong); }
.ad-pin-ic { color: var(--accent-text); display: flex; }
.ad-pin-txt { display: grid; min-width: 0; flex: 1; }
.ad-pin .ad-head, .ad-pin .ad-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-pin .ad-line { font-size: var(--fs-sm); }
.ad-pin-go { display: flex; align-items: center; gap: 2px; font-size: var(--fs-sm); color: var(--accent-text); white-space: nowrap; }
@media (max-width: 480px) { .ad-pin-go { display: none; } }

/* The sponsored thread page */
.sp-main { padding-bottom: var(--sp-7); }
.sp-main > :not(.topbar) { margin-inline: 16px; } /* phones: a gutter, like settings */
@media (min-width: 640px) { .sp-main > :not(.topbar) { margin-inline: 0; } }
.sp-post { padding: var(--sp-4); margin: var(--sp-3) 0; }
.sp-post .ad-head { font-size: var(--fs-xl); margin: var(--sp-1) 0 var(--sp-2); }
.sp-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 var(--sp-3); }
.sp-note { font-size: var(--fs-xs); color: var(--faint); }
.sp-replies { display: grid; gap: var(--sp-2); }
.sp-reply { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); }
.sp-reply p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-form { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0; }
.sp-form textarea { min-height: 88px; resize: vertical; }

/* Advertiser pages */
.adv-main { padding-bottom: var(--sp-7); }
.adv-hero { padding: var(--sp-5) var(--sp-4); margin: var(--sp-3) 0; }
.adv-hero h2 { margin: 0 0 var(--sp-2); }
.adv-prices { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: var(--sp-3) 0; }
.adv-price { padding: var(--sp-3) var(--sp-4); }
.adv-price b { display: block; }
.adv-price .num { color: var(--accent-text); font-weight: var(--fw-semi); }
.adv-list { display: grid; gap: var(--sp-2); }
.adv-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); color: inherit; text-decoration: none; }
.adv-row:hover { border-color: var(--border-strong); }
.adv-state { font-size: var(--fs-xs); font-weight: var(--fw-semi); padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); align-self: start; }
.adv-state.is-live { background: var(--accent-wash); color: var(--accent-text); }
.adv-state.is-review { color: var(--warning); }
.adv-form { display: grid; gap: var(--sp-4); }
.adv-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.adv-formats { display: grid; gap: var(--sp-2); }
.adv-groups { display: grid; gap: var(--sp-2); }
.adv-group { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.adv-group summary { cursor: pointer; font-weight: var(--fw-semi); }
.adv-group .chk { display: flex; gap: var(--sp-2); align-items: center; padding: 4px 0; }
.adv-group-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 var(--sp-3); margin-top: var(--sp-2); }
.adv-preview { display: grid; gap: var(--sp-3); }
.adv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.adv-stat { padding: var(--sp-3) var(--sp-4); }
.adv-stat b { display: block; font-size: var(--fs-xl); }
.adv-stat span { color: var(--muted); font-size: var(--fs-sm); }
.adv-days { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.adv-days th, .adv-days td { text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--border); }
.adv-days td + td, .adv-days th + th { text-align: right; }
.adv-scroll { overflow-x: auto; scrollbar-width: thin; }
.adv-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0; }
.adv-actions form { margin: 0; }
.adv-bad { color: var(--danger); font-size: var(--fs-sm); }

/* Settings → Characters (hosts_chars.go): one's own club hosts */
.hc-card > :not(.settings-intro) { margin-inline: var(--sp-4); }
.hc-card { padding-bottom: var(--sp-4); }
.hc-card > h2 { margin-top: var(--sp-4); }
.hc-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; }
.hc-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.hc-row { flex-wrap: wrap; }
.hc-row form { margin: 0; }
.hc-pic { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-2, var(--surface)); }
.hc-pic-initial { display: grid; place-items: center; font-weight: 700; color: var(--text); text-transform: uppercase; }
.hc-draw { display: flex; gap: var(--sp-2); align-items: center; flex-basis: 100%; padding-left: calc(44px + var(--sp-2)); }
.hc-draw select { width: auto; max-width: 12rem; }
.hc-form .row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.sp-join { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Settings → Interests: what was learned */
.si-learned { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; }
.si-learned-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.si-learned-row form { margin: 0; }
.si-ads { display: grid; gap: var(--sp-2); justify-items: start; }
#learned > :not(.settings-intro) { margin-inline: var(--sp-4); } /* the card has no inner padding; .settings-intro brings its own */
#learned { padding-bottom: var(--sp-4); }

/* css/powerup.css */
/* powerup.css: the gold coin on a button whose thing ran out, and the
   power-up sheet (web/powerups.go, js/powerup.js). The coin keeps its own
   gold in every theme. */

.has-coin { position: relative; }
.pu-coin { display: inline-flex; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; flex: none; }
.pu-coin svg { width: 100%; height: 100%; }
.has-coin > .pu-coin { animation: pu-bob 2.6s ease-in-out infinite; }
.icon-btn.has-coin > .pu-coin, .btn-block.has-coin > .pu-coin { position: absolute; top: -6px; right: -6px; margin: 0; }
@keyframes pu-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .has-coin > .pu-coin { animation: none; } }

.pu-sheet, dialog.sheet.pu-sheet { width: min(440px, calc(100vw - 32px)); padding: 22px; display: grid; gap: 12px; }
.pu-head { display: flex; align-items: center; gap: 10px; }
.pu-head .pu-coin { width: 34px; height: 34px; margin: 0; }
.pu-title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.pu-lead { margin: 0; color: var(--muted, inherit); }
.pu-buy { margin: 0; }
.pu-buy .btn { width: 100%; display: grid; justify-items: center; gap: 2px; padding: 12px 16px; }
.btn.btn-coin { background: linear-gradient(180deg, #ffd75e, #e8a317); color: #3a2600; border: 1px solid #c98b0c; font-weight: 700; }
.btn.btn-coin:hover { filter: brightness(1.05); }
.btn.btn-coin.is-quiet { background: transparent; color: inherit; border: 1px solid #d9a63a; }
.pu-buy-main { font-weight: 700; }
.pu-buy-sub { font-size: .85rem; font-weight: 500; opacity: .85; }
.pu-plan { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); color: inherit; text-decoration: none; }
.pu-plan.is-hero { border-color: #d9a63a; }
.pu-plan .pu-buy { margin-top: 6px; }
.pu-plan-sub { font-size: .9rem; opacity: .85; }
.pu-wait { margin: 0; font-size: .9rem; }
.pu-close { justify-self: center; }
.pu-page { max-width: 480px; margin: 32px auto; padding: 22px; }
@media (max-width: 520px) { .pu-page { margin: 16px; } }

/* "Draw me one" (settings-profile.html, profiledraw.go) and club look picks */
.pe-draw { display: grid; gap: 10px; padding: 14px 0 4px; }
.pe-draw .section-title { margin: 0; }
.pe-draw-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-pick { position: relative; }
.chip-pick input { position: absolute; opacity: 0; pointer-events: none; }
.chip-pick span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line, rgba(127, 127, 127, .35)); font-size: .88rem; cursor: pointer; }
.chip-pick input:checked + span { background: var(--primary, #7c5cff); border-color: transparent; color: #fff; }
.chip-pick input:focus-visible + span { outline: 2px solid var(--primary, #7c5cff); outline-offset: 2px; }
.pe-draw-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pe-draw-picks.is-wide { grid-template-columns: 1fr; }
.pe-draw-pick { all: unset; cursor: pointer; display: grid; gap: 6px; justify-items: center; font-size: .88rem; }
.pe-draw-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); }
.pe-draw-picks.is-wide .pe-draw-pick img { aspect-ratio: 21 / 9; }
.pe-draw-pick:focus-visible img, .pe-draw-pick:hover img { outline: 3px solid var(--primary, #7c5cff); outline-offset: 2px; }

/* popstart/popstart-extras.css */
/*
 * Popstart Extras — notification / toast styles.
 * Copyright (c) 2025-2026 Jamieson Becker. MIT License
 *
 * This file is the externalized form of the styles that
 * popstart-extras.js injects via document.createElement('style')
 * when no <link id="ps-notify-styles" rel="stylesheet"> is present.
 *
 * Apps with strict Content-Security-Policy `style-src 'self'` (no
 * 'unsafe-inline') should serve this file and reference it before
 * popstart-extras.js loads:
 *
 *   <link id="ps-notify-styles" rel="stylesheet" href="/path/to/popstart-extras.css">
 *   <script src="/path/to/popstart-extras.js"></script>
 *
 * popstart-extras.js detects #ps-notify-styles on the page and skips
 * its inline injection so no CSP violation occurs.
 *
 * Colours are --ps-note-* variables on .ps-note: light by default,
 * dark under prefers-color-scheme: dark. Keep this file identical to
 * the inline copy in popstart-extras.js (test/browser/theme.html checks).
 *
 * Apps without a strict CSP can ignore this file — popstart-extras.js
 * still injects equivalent styles at runtime.
 */

.ps-note-stack{
	position:fixed;
	right:1rem;
	bottom:1rem;
	z-index:9999;
	display:flex;
	flex-direction:column-reverse;
	align-items:flex-end;
	gap:.65rem;
	max-width:min(26rem,calc(100vw - 1.5rem));
	pointer-events:none
}
/* colours follow the device: light by default, dark below */
.ps-note{
	--ps-note-accent:#2f7fc1;
	--ps-note-bg:rgba(255,255,255,.97);
	--ps-note-bg-end:rgba(246,247,249,.97);
	--ps-note-edge:rgba(0,0,0,.10);
	--ps-note-shadow:0 12px 32px rgba(0,0,0,.16);
	--ps-note-fg:#1f2328;
	--ps-note-title:#111418;
	--ps-note-muted:rgba(31,35,40,.68);
	--ps-note-rule:rgba(0,0,0,.08);
	--ps-note-code-bg:rgba(0,0,0,.05);
	pointer-events:auto;
	width:min(24rem,calc(100vw - 1.5rem));
	opacity:.96;
	transform:translate3d(24px,16px,0) scale(.97);
	animation:ps-note-in .32s cubic-bezier(.2,.8,.2,1) forwards
}
.ps-note.success{--ps-note-accent:#1f8a5b}
.ps-note.info{--ps-note-accent:#2f7fc1}
.ps-note.warning{--ps-note-accent:#a8740f}
.ps-note.error,.ps-note.danger{--ps-note-accent:#c8344c}
@media(prefers-color-scheme: dark){
	.ps-note{
		--ps-note-accent:#58a7e7;
		--ps-note-bg:rgba(34,37,43,.94);
		--ps-note-bg-end:rgba(20,22,27,.94);
		--ps-note-edge:rgba(255,255,255,.12);
		--ps-note-shadow:0 18px 40px rgba(0,0,0,.28);
		--ps-note-fg:#f2eee8;
		--ps-note-title:#fff4ec;
		--ps-note-muted:rgba(255,244,236,.68);
		--ps-note-rule:rgba(255,255,255,.08);
		--ps-note-code-bg:rgba(0,0,0,.22)
	}
	.ps-note.success{--ps-note-accent:#43c488}
	.ps-note.info{--ps-note-accent:#58a7e7}
	.ps-note.warning{--ps-note-accent:#e0b24c}
	.ps-note.error,.ps-note.danger{--ps-note-accent:#ef5d73}
}
.ps-note.closing{
	animation:ps-note-out .18s ease-in forwards
}
.ps-note-card{
	position:relative;
	padding:.8rem .9rem .85rem;
	border:1px solid transparent;
	border-radius:14px;
	background:
		linear-gradient(180deg,var(--ps-note-bg),var(--ps-note-bg-end)) padding-box,
		linear-gradient(135deg,var(--ps-note-accent),var(--ps-note-edge),var(--ps-note-edge)) border-box;
	box-shadow:var(--ps-note-shadow);
	backdrop-filter:blur(18px) saturate(1.1);
	-webkit-backdrop-filter:blur(18px) saturate(1.1);
	color:var(--ps-note-fg);
	animation:ps-note-float var(--ps-note-time,5000ms) linear forwards
}
.ps-note-head{
	display:flex;
	align-items:flex-start;
	gap:.75rem
}
.ps-note-copy{
	min-width:0;
	flex:1
}
.ps-note-title{
	display:block;
	font-size:.88rem;
	font-weight:700;
	line-height:1.3;
	color:var(--ps-note-title)
}
.ps-note-msg{
	display:block;
	font-size:.82rem;
	line-height:1.45;
	color:var(--ps-note-fg)
}
.ps-note-title+.ps-note-msg{
	margin-top:.22rem
}
.ps-note-close{
	appearance:none;
	border:none;
	background:none;
	color:var(--ps-note-muted);
	font-size:1.1rem;
	line-height:1;
	padding:.05rem;
	cursor:pointer;
	transition:color .15s,transform .15s
}
.ps-note-close:hover,
.ps-note-close:focus-visible{
	color:var(--ps-note-title);
	transform:scale(1.08)
}
.ps-note-close:focus-visible{
	outline:2px solid var(--ps-note-accent);
	outline-offset:2px
}
.ps-note-detail{
	margin-top:.55rem;
	border-top:1px solid var(--ps-note-rule);
	padding-top:.45rem
}
.ps-note-detail summary{
	cursor:pointer;
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.02em;
	color:var(--ps-note-muted);
	list-style:none
}
.ps-note-detail summary::-webkit-details-marker{
	display:none
}
.ps-note-detail pre{
	margin-top:.45rem;
	padding:.6rem .7rem;
	border-radius:10px;
	background:var(--ps-note-code-bg);
	color:var(--ps-note-fg);
	font-size:.72rem;
	line-height:1.45;
	white-space:pre-wrap;
	word-break:break-word
}
@keyframes ps-note-in{
	from{opacity:0;transform:translate3d(24px,16px,0) scale(.97)}
	to{opacity:.96;transform:translate3d(0,0,0) scale(1)}
}
@keyframes ps-note-out{
	from{opacity:.96;transform:translate3d(0,0,0) scale(1)}
	to{opacity:0;transform:translate3d(18px,8px,0) scale(.96)}
}
@keyframes ps-note-float{
	from{transform:translateY(0)}
	to{transform:translateY(-8px)}
}
@media(prefers-reduced-motion: reduce){
	.ps-note,
	.ps-note.closing,
	.ps-note-card,
	.ps-note-close,
	.ps-note-close:hover{
		animation:none !important;
		transition:none !important;
		transform:none !important
	}
	.ps-note{
		--ps-note-time:0ms;
		opacity:.96
	}
}
@media(max-width:600px){
	.ps-note-stack{
		right:.75rem;
		left:.75rem;
		bottom:.75rem;
		max-width:none
	}
	.ps-note{
		width:100%
	}
}