/* Pagehush design tokens and components.
   Direction: a bookshop, not a dashboard. Warm-neutral paper, very few boxes; the colour comes from the covers. */
:root {
  --bg: #F8F7F4; --surface: #FFFFFF; --surface-2: #F0EEEA; --surface-3: #E4E1DB;
  --ink: #171B26; --muted: #565D6D; --faint: #666C7B; --line: #E3E0DA;
  --accent: #1D6B73; --accent-hover: #175A61; --accent-ink: #FFFFFF; --accent-soft: #E0EEEE;
  --amber: #855604; --amber-soft: #F6EAD2;
  --mature: #AE3445; --mature-soft: #F6DDE0;
  --ok: #2C7A4B; --ok-soft: #DCEFE3;
  --cover1: #1D6B73; --cover2: #3B2F5C; --cover3: #7A3B2E; --cover4: #2F4A2A; --cover5: #1E2F52; --cover6: #5B3A5E;
  --shadow: 0 1px 2px rgba(23,27,38,.05), 0 10px 30px rgba(23,27,38,.08);
  --book-shadow: 0 1px 1px rgba(23,27,38,.08), 0 12px 24px -12px rgba(23,27,38,.45);
  --display: "Young Serif", "Noto Serif Devanagari", Georgia, "Times New Roman", serif;
  --body: "Figtree", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --read: "Newsreader", "Noto Serif Devanagari", Georgia, serif;
  --easy: "Atkinson Hyperlegible", "Figtree", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --radius: 14px;
  color-scheme: light;
}
/* Dark theme: follows the device unless the member picked Light or Dark (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12141B; --surface: #191C25; --surface-2: #20242F; --surface-3: #2A2F3C;
    --ink: #E9E7E2; --muted: #A5A9B5; --faint: #8F94A2; --line: #282C38;
    --accent: #6CBDC4; --accent-hover: #86CBD1; --accent-ink: #0F1218; --accent-soft: #19343A;
    --amber: #E2AA4A; --amber-soft: #3A2E17;
    --mature: #E57A88; --mature-soft: #3C1E25;
    --ok: #6BC78F; --ok-soft: #173226;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --book-shadow: 0 1px 1px rgba(0,0,0,.4), 0 12px 24px -10px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #12141B; --surface: #191C25; --surface-2: #20242F; --surface-3: #2A2F3C;
    --ink: #E9E7E2; --muted: #A5A9B5; --faint: #8F94A2; --line: #282C38;
    --accent: #6CBDC4; --accent-hover: #86CBD1; --accent-ink: #0F1218; --accent-soft: #19343A;
    --amber: #E2AA4A; --amber-soft: #3A2E17;
    --mature: #E57A88; --mature-soft: #3C1E25;
    --ok: #6BC78F; --ok-soft: #173226;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --book-shadow: 0 1px 1px rgba(0,0,0,.4), 0 12px 24px -10px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(30px, 4.5vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 28px); }
h3 { font-size: 19px; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow, .kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.kicker:hover { text-decoration: none; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Layout */
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding-inline: 20px; }
main { padding-block: 32px 96px; min-height: 60vh; min-height: 60svh; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* Top bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); transition: transform .25s; }
.topbar.hide { transform: translateY(-100%); }
.topbar-inner { display: flex; align-items: center; gap: 20px; padding-block: 12px; flex-wrap: wrap; }
.logo { font-family: var(--display); font-size: 22px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.logo:hover { text-decoration: none; }
.logo .mark { width: 15px; height: 22px; color: var(--accent); flex: none; margin-top: -2px; }
.nav { display: flex; gap: 20px; font-weight: 500; font-size: 14.5px; }
.nav a { color: var(--muted); }
.nav a.on, .nav a:hover { color: var(--ink); text-decoration: none; }
.search-box { flex: 1; min-width: 160px; max-width: 320px; }
.search-box input { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 14px; color: var(--ink); }
.search-box input:focus { border-color: var(--accent); outline: none; background: var(--surface); }
.topbar .sp { flex: 1; }
.icon-link { position: relative; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; }
.icon-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.icon-link svg { width: 20px; height: 20px; }
.dot { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--mature); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.top-actions { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.mobile-only { display: none !important; }
@media (max-width: 760px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: revert !important; }
  .bottom-nav.mobile-only, .icon-link.mobile-only { display: flex !important; }
  .topbar-inner { flex-wrap: nowrap; padding-block: 8px; }
  .top-actions { margin-left: auto; gap: 2px; }
  .chips.scroll-x { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  .chips.scroll-x .chip { flex: none; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* User menu */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 220px; padding: 6px; z-index: 40; display: flex; flex-direction: column; }
.menu-panel a, .menu-panel button { display: block; width: 100%; text-align: left; padding: 8px 12px; border-radius: 8px; color: var(--ink); font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-2); text-decoration: none; }
.menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menu-panel .who { padding: 8px 12px; font-size: 13px; color: var(--faint); }

/* 18+ switch */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; font-family: inherit; padding: 4px; }
.switch .track { width: 34px; height: 20px; border-radius: 999px; background: var(--surface-3); position: relative; transition: background .2s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s; }
.switch[aria-checked="true"] .track { background: var(--mature); }
.switch[aria-checked="true"] .track::after { left: 17px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 9px 18px; font-weight: 600; font-size: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer; white-space: nowrap; line-height: 1.2; transition: background .15s, border-color .15s, transform .15s; }
.btn:hover { text-decoration: none; background: var(--surface-2); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.pri:hover { background: var(--accent-hover); }
.btn.warn { background: var(--mature); border-color: var(--mature); color: #fff; }
.btn.ghost { background: none; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 6px 13px; font-size: 13px; }
.btn.lg { padding: 12px 24px; font-size: 15px; }
.btn.pri:active, .btn.lg:active { transform: translateY(1px); }
.btn.on { border-color: var(--mature); color: var(--mature); }
.btn.tip { border-color: var(--amber); color: var(--amber); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.linkish:hover { text-decoration: underline; }

/* Tags and chips */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.tag.accent { background: var(--accent-soft); color: var(--accent); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
.tag.mature { background: var(--mature-soft); color: var(--mature); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 6px 14px; border-radius: 999px; border: 1px solid transparent; font-size: 13.5px; color: var(--muted); background: var(--surface-2); font-weight: 500; }
.chip:hover { text-decoration: none; color: var(--ink); background: var(--surface-3); }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.panel-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.callout { border-left: 3px solid var(--amber); background: var(--amber-soft); padding: 12px 16px; border-radius: 0 10px 10px 0; font-size: 14.5px; }
.callout.red { border-color: var(--mature); background: var(--mature-soft); }
.callout.teal { border-color: var(--accent); background: var(--accent-soft); }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Flash messages */
.flash-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.flash { padding: 10px 14px; border-radius: 10px; font-size: 14.5px; background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); }
.flash.error { background: var(--mature-soft); }
.flash.warning { background: var(--amber-soft); }

/* Avatars */
.av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--cover2), var(--accent)); flex: none; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.sm { width: 24px; height: 24px; font-size: 10px; }
.av.lg { width: 92px; height: 92px; font-size: 30px; border: 4px solid var(--surface); }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who .name { font-weight: 600; font-size: 14px; color: var(--ink); display: block; }
.who .sub { font-size: 12.5px; color: var(--faint); }

/* Covers: drawn per category so shelves look like a bookshop. Uploaded covers replace the drawing. */
.cover { container-type: inline-size; position: relative; aspect-ratio: 3 / 4; width: 100%; max-width: 100%; border-radius: 3px 7px 7px 3px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 11% 10% 10% 13%; color: #fff;
  --c1: #2E6E78; --c2: #143A42; background: linear-gradient(165deg, var(--c1), var(--c2)); box-shadow: var(--book-shadow); transition: transform .25s ease, box-shadow .25s ease; }
.cover::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 5%; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.08) 70%, transparent); pointer-events: none; }
.cover > * { position: relative; z-index: 1; }
.cv-g { font-family: var(--body); font-size: 9.5px; font-size: clamp(8.5px, 6.6cqi, 12px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .82; }
.cv-t { font-family: var(--display); font-size: 15px; font-size: clamp(11px, 11.5cqi, 30px); line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; margin-top: auto; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.cv-a { font-family: var(--body); font-size: 10px; font-size: clamp(8.5px, 7cqi, 13px); opacity: .85; letter-spacing: .02em; }
.cover.has-img { padding: 0; background: var(--surface-2); }
.cover.has-img::before { display: none; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.card:hover .cover, a:hover > .cover, .hero-cover:hover .cover { transform: translateY(-3px); box-shadow: 0 2px 2px rgba(0,0,0,.08), 0 18px 30px -14px rgba(0,0,0,.55); }
/* Colour schemes */
.h-ember { --c1: #8A4B2F; --c2: #47210F; } .h-night { --c1: #2B3A5C; --c2: #111A2D; } .h-sea { --c1: #2E6E78; --c2: #123840; }
.h-forest { --c1: #3D6B3A; --c2: #1A3320; } .h-plum { --c1: #6B4E8A; --c2: #2C1F40; } .h-blood { --c1: #74202E; --c2: #22090E; }
.h-rose { --c1: #B0566A; --c2: #592234; } .h-slate { --c1: #4A5D73; --c2: #212B37; } .h-ochre { --c1: #9A6B2A; --c2: #4A3112; }
.h-ink { --c1: #33384A; --c2: #101219; } .h-dusk { --c1: #8C5A7A; --c2: #3A2440; }
/* Patterns, one per category */
.cv-rings::before { background: repeating-radial-gradient(circle at 78% 22%, transparent 0 9px, rgba(255,255,255,.13) 9px 10px); }
.cv-orbit::before { background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.9) 0 2.2%, transparent 2.6%), radial-gradient(circle at 50% 40%, transparent 0 28%, rgba(255,255,255,.16) 28.5% 29.5%, transparent 30% 44%, rgba(255,255,255,.1) 44.5% 45.5%, transparent 46%); }
.cv-rain::before { background: repeating-linear-gradient(104deg, transparent 0 8px, rgba(255,255,255,.1) 8px 9px); }
.cv-bars::before { background: repeating-linear-gradient(90deg, transparent 0 14%, rgba(255,255,255,.07) 14% 16%), radial-gradient(circle at 50% 38%, rgba(255,255,255,.18), transparent 40%); }
.cv-glow::before { background: radial-gradient(circle at 50% 38%, rgba(255,150,160,.75) 0 4%, rgba(200,60,80,.4) 13%, transparent 42%); }
.cv-waves::before { background: radial-gradient(130% 42% at 50% 104%, rgba(255,255,255,.2) 0 40%, transparent 41%), radial-gradient(130% 42% at 22% 96%, rgba(255,255,255,.12) 0 40%, transparent 41%); }
.cv-frame::before { inset: 6%; border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(255,255,255,.18); }
.cv-river::before { background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.09) 10px 12px); -webkit-mask-image: linear-gradient(transparent 35%, #000); mask-image: linear-gradient(transparent 35%, #000); }
.cv-split::before { background: linear-gradient(128deg, transparent 0 58%, rgba(255,255,255,.12) 58%); }
.cv-dots::before { background: radial-gradient(circle, rgba(255,255,255,.18) 0 2px, transparent 2.5px) 0 0 / 14px 14px; }
.cv-windows::before { background: linear-gradient(rgba(255,226,150,.35), rgba(255,226,150,.35)) 62% 22% / 14% 11% no-repeat, linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)) 82% 22% / 14% 11% no-repeat, linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)) 62% 38% / 14% 11% no-repeat, linear-gradient(rgba(255,226,150,.25), rgba(255,226,150,.25)) 82% 38% / 14% 11% no-repeat; }
.cv-stars::before { background: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 70% 18%, #fff 0 1.3px, transparent 1.8px), radial-gradient(circle at 85% 45%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 40% 52%, rgba(255,255,255,.8) 0 1px, transparent 1.5px), radial-gradient(circle at 60% 36%, rgba(255,255,255,.7) 0 .8px, transparent 1.2px); }
.cv-moon::before { background: radial-gradient(circle at 74% 24%, rgba(255,255,255,.85) 0 11%, transparent 11.5%), radial-gradient(circle at 74% 24%, rgba(255,255,255,.12) 0 22%, transparent 23%); }
.cv-ruled::before { background: repeating-linear-gradient(0deg, transparent 0 13px, rgba(255,255,255,.1) 13px 14px), linear-gradient(90deg, transparent 0 22%, rgba(255,140,140,.3) 22% calc(22% + 1px), transparent calc(22% + 1px)); }
.cv-shelf::before { background: repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 3px, transparent 3px 11px, rgba(255,255,255,.06) 11px 13px, transparent 13px 19px); -webkit-mask-image: linear-gradient(#000 30%, transparent 75%); mask-image: linear-gradient(#000 30%, transparent 75%); }
.cv-stamp::before { background: radial-gradient(circle at 72% 26%, transparent 0 15%, rgba(255,255,255,.3) 15.5% 16.5%, transparent 17% 19%, rgba(255,255,255,.18) 19.5% 20%, transparent 20.5%); }
.c0 { --c1: #2E6E78; --c2: #123840; } .c1 { --c1: #6B4E8A; --c2: #2C1F40; } .c2 { --c1: #8A4B2F; --c2: #47210F; } .c3 { --c1: #3D6B3A; --c2: #1A3320; } .c4 { --c1: #2B3A5C; --c2: #111A2D; } .c5 { --c1: #8C5A7A; --c2: #3A2440; }
.adult-badge { position: absolute; top: 7px; right: 7px; z-index: 2; background: var(--mature); color: #fff; font-family: var(--body); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .02em; }
.new-badge { position: absolute; top: 7px; left: 9%; z-index: 2; background: #F3C969; color: #2A1E05; font-family: var(--body); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: .04em; text-transform: uppercase; }
.card { display: flex; flex-direction: column; gap: 6px; color: var(--ink); min-width: 0; }
.card:hover { text-decoration: none; }
.card:hover .t { color: var(--accent); }
.card .t { font-weight: 600; font-size: 14px; line-height: 1.3; margin-top: 4px; }
.card .s { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.35; }
.card .s.faint { color: var(--faint); }
.shelf { display: flex; gap: 20px; overflow-x: auto; padding: 4px 2px 12px; margin-inline: -2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.shelf::-webkit-scrollbar { display: none; }
.shelf > .card { flex: 0 0 140px; scroll-snap-align: start; }
@media (max-width: 560px) { .shelf { gap: 14px; } .shelf > .card { flex-basis: 116px; } }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 16px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-head h2 { font-size: clamp(21px, 2.6vw, 25px); }
.section-head a { font-size: 13.5px; font-weight: 600; }

.gate-strip { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 16px; font-size: 14px; color: var(--muted); }
.gate-strip b { color: var(--ink); }

/* Story page */
.story-head { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 760px) { .story-head { grid-template-columns: minmax(0, 1fr); gap: 24px; } .story-side { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: end; } }
.stats { display: flex; gap: 24px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.stats b { display: block; font-size: 18px; }
.stats span { font-size: 12px; color: var(--faint); }
.toc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.toc-list li { border-bottom: 1px solid var(--line); }
.toc-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 6px; color: var(--ink); font-weight: 500; }
.toc-list a:hover { background: var(--surface-2); text-decoration: none; border-radius: 8px; }
.toc-list .n { display: inline-block; min-width: 1.8em; font-variant-numeric: tabular-nums; color: var(--faint); font-weight: 400; }

/* Reader */
.reader-shell { background: var(--surface); color: var(--ink); transition: background .25s, color .25s; }
.reader-shell.paper { color-scheme: light; --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F2F4; --surface-3: #E3E6EA; --ink: #1A1A1A; --muted: #555B66; --faint: #7A808B; --line: #DDE0E5;
  --accent: #1D6B73; --accent-hover: #175A61; --accent-ink: #FFFFFF; --accent-soft: #DCEDEE; --mature: #AE3445; --mature-soft: #F6DDE0; --amber: #9A6508; --amber-soft: #F6EAD2; }
.reader-shell.sepia { color-scheme: light; --bg: #F3E9D6; --surface: #F3E9D6; --surface-2: #EADDC4; --surface-3: #DDCDAE; --ink: #3B2F20; --muted: #6E5E48; --faint: #8A7A62; --line: #D8C8AA;
  --accent: #7A4E1D; --accent-hover: #653F15; --accent-ink: #FFF8EC; --accent-soft: #E8D6B8; --mature: #A2372E; --mature-soft: #F0D5C8; --amber: #8A5A0A; --amber-soft: #EFDDB8; }
.reader-shell.night { color-scheme: dark; --bg: #0B0D12; --surface: #0B0D12; --surface-2: #151922; --surface-3: #1E2330; --ink: #B9BFCB; --muted: #8C93A3; --faint: #6B7282; --line: #222835;
  --accent: #5FA9B0; --accent-hover: #74B9BF; --accent-ink: #0B0D12; --accent-soft: #14282C; --mature: #D9727F; --mature-soft: #2E181D; --amber: #D09A40; --amber-soft: #2B2314; }
.reader-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 0; z-index: 50; transition: width .1s linear; }
.reader { display: grid; grid-template-columns: minmax(0, 1fr) 60px; gap: 24px; max-width: 860px; margin: 0 auto; padding: 32px 20px 60px; }
@media (max-width: 640px) { .reader { grid-template-columns: minmax(0, 1fr); } }
.reader h1 { font-size: clamp(28px, 4vw, 36px); }
.reader .meta { color: var(--muted); font-size: 13.5px; }
.story-text { --size: 19px; --line: 1.75; --width: 64ch; font-family: var(--read); font-size: var(--size); line-height: var(--line); max-width: var(--width); display: flex; flex-direction: column; gap: 1em; }
.story-text.clean { font-family: var(--body); }
.story-text.easy { font-family: var(--easy); }
.story-text h2 { font-size: 1.35em; margin-top: .6em; }
.story-text h3 { font-size: 1.15em; margin-top: .4em; }
.story-text blockquote { margin: 0; padding-left: 1em; border-left: 3px solid var(--line); font-style: italic; }
.story-text .ql-align-center { text-align: center; }
.story-text .ql-align-right { text-align: right; }
.rail { display: flex; flex-direction: column; gap: 10px; align-items: center; position: sticky; top: 90px; align-self: start; }
@media (max-width: 640px) { .rail { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); flex-direction: row; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; box-shadow: var(--shadow); z-index: 20; top: auto; } }
.rail-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.1; font-variant-numeric: tabular-nums; cursor: pointer; font-family: inherit; }
.rail-btn:hover { border-color: var(--faint); text-decoration: none; }
.rail-btn svg { width: 18px; height: 18px; }
.rail-btn.on { border-color: var(--mature); color: var(--mature); }
.rail-btn.saved { border-color: var(--accent); color: var(--accent); }
.warn-box { border: 1px solid var(--mature); background: var(--mature-soft); color: var(--ink); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.chapter-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 20px; }
.prefs-panel { position: fixed; right: 16px; top: 76px; width: min(300px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 14px; z-index: 45; }
.prefs-panel label, .prefs-panel .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); display: flex; flex-direction: column; gap: 6px; }
.prefs-panel input[type=range] { width: 100%; accent-color: var(--accent); }
.swatches { display: flex; gap: 8px; }
.swatches button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; font-family: var(--read); font-weight: 700; font-size: 13px; }
.swatches button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { letter-spacing: 0; text-transform: none; border: 0; background: none; padding: 5px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); font-family: var(--body); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Comments */
.comments { display: flex; flex-direction: column; gap: 18px; }
.cmt { display: flex; gap: 10px; }
.cmt .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cmt .body .head { font-size: 13.5px; font-weight: 600; }
.cmt .body .head span { font-weight: 400; color: var(--faint); margin-left: 6px; }
.cmt .body p { font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }
.cmt .actions { display: flex; gap: 14px; font-size: 12.5px; color: var(--faint); align-items: center; flex-wrap: wrap; }
.cmt .actions button, .cmt .actions a { background: none; border: 0; padding: 0; color: var(--faint); font: inherit; cursor: pointer; }
.cmt .actions button:hover, .cmt .actions a:hover { color: var(--ink); }
.cmt .actions .liked { color: var(--mature); }
.replies { margin-left: 42px; display: flex; flex-direction: column; gap: 14px; }
.writer-badge { font-size: 10px; background: var(--accent); color: var(--accent-ink); padding: 1px 6px; border-radius: 4px; margin-left: 6px; font-weight: 700; vertical-align: 1px; }
.held { font-size: 12px; color: var(--amber); }

/* Forms */
form.stack > p, .form-row { display: flex; flex-direction: column; gap: 6px; }
label { font-weight: 600; font-size: 14px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=date], input[type=datetime-local], input[type=search], input[type=number], select, textarea {
  width: 100%; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 15px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.helptext, .help { font-size: 13px; color: var(--faint); font-weight: 400; }
.help.warn-note { color: var(--amber); background: var(--amber-soft); padding: 7px 10px; border-radius: 10px; }
.errorlist { list-style: none; padding: 0; margin: 0; color: var(--mature); font-size: 13.5px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.check-row input { margin-top: 3px; flex: none; }
.choice-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.choice-list label { font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.form-card { max-width: 520px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.form-card form { display: flex; flex-direction: column; gap: 14px; }
.form-card form p { display: flex; flex-direction: column; gap: 6px; }
.form-card form p:has(input[type=checkbox]) { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Settings */
.settings { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
@media (max-width: 760px) { .settings { grid-template-columns: minmax(0, 1fr); } }
.side-nav { display: flex; flex-direction: column; gap: 2px; font-size: 14px; align-self: start; position: sticky; top: 80px; }
@media (max-width: 760px) { .side-nav { flex-direction: row; overflow-x: auto; position: static; } }
.side-nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); white-space: nowrap; display: flex; justify-content: space-between; gap: 8px; }
.side-nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.side-nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-nav em { font-style: normal; font-family: var(--mono); font-size: 11px; }
.pref-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 16px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--line); }
.pref-row:last-child { border-bottom: 0; }
@media (max-width: 620px) { .pref-row { grid-template-columns: minmax(0, 1fr); } }

/* Profile */
.banner { height: 180px; border-radius: 16px 16px 0 0; background: linear-gradient(120deg, var(--cover5), var(--cover1) 60%, var(--cover2)); overflow: hidden; }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.prof { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.prof-head { display: flex; gap: 6px 18px; align-items: flex-start; padding: 0 22px; margin-top: -46px; flex-wrap: wrap; }
.prof-head .nm, .prof-head .acts { padding-top: 56px; }
@media (max-width: 560px) { .prof-head .nm { padding-top: 0; flex-basis: 100%; } .prof-head .acts { padding-top: 0; } }
.prof-head .nm { flex: 1; min-width: 200px; }
.prof-head .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prof-head .acts .btn { height: 40px; justify-content: center; }
.prof-head .acts .icon-btn, .prof-head .acts .share-btn:not(:has(span:not(.sr-only))) { width: 40px; padding: 0; display: inline-flex; align-items: center; }
.prof-head .acts summary.icon-btn { list-style: none; cursor: pointer; }
.prof-head .acts summary.icon-btn::-webkit-details-marker { display: none; }
.prof-head .acts .icon-btn svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  /* Phones: the main buttons share the row, the icon buttons stay square at the end */
  .prof-head .acts { flex-basis: 100%; flex-wrap: nowrap; }
  .prof-head .acts > .btn:not(.icon-btn):not(.share-btn), .prof-head .acts > .share-btn:has(span:not(.sr-only)) { flex: 1 1 0; min-width: 0; }
  .prof-head .acts > details, .prof-head .acts > .share-btn:not(:has(span:not(.sr-only))) { flex: none; }
}
/* Profile intro: tagline, quick facts (city with flag, age, writing since) and links. Empty items never show. */
.pronouns { font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--muted); vertical-align: middle; white-space: nowrap; }
.prof-intro { padding: 10px 22px 0; display: flex; flex-direction: column; gap: 10px; }
.tagline { margin: 0; font-family: var(--read); font-size: 18px; line-height: 1.45; color: var(--ink); max-width: 60ch; }
.prof-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: var(--muted); }
.prof-facts li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.prof-facts svg { color: var(--faint); flex: none; }
img.flag { display: inline-block; width: 20px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); vertical-align: -2px; flex: none; }
.prof-links { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-links .social { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); background: var(--surface); }
.prof-links .social:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* About tab */
.complete-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); margin-bottom: 18px; }
.complete-card:hover { text-decoration: none; }
.complete-card > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.meter { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.about-sec { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.about-sec h3 { font-family: var(--body); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 0; }
.about-sec p { margin: 0; }
.about-bio, .about-photos { grid-column: 1 / -1; }
.about-bio p { font-family: var(--read); font-size: 17px; line-height: 1.65; }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px 16px; margin: 0; }
.facts-grid dt { font-size: 12.5px; color: var(--faint); }
.facts-grid dd { margin: 2px 0 0; font-weight: 600; }
.chip-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.strong { background: var(--accent-soft); color: var(--accent); }
.fav-authors { font-family: var(--read); }
.social-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.social-list a { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 10px; color: var(--ink); }
.social-list a:hover { background: var(--surface-2); text-decoration: none; }
.social-list a > span { display: flex; flex-direction: column; min-width: 0; }
.social-list a > span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-list svg { flex: none; color: var(--muted); }
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 700px) { .photo-strip { grid-template-columns: repeat(6, 1fr); } }
.photo-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; background: var(--surface-2); }

/* Profile settings */
.edit-sec h2 { font-size: 20px; }
.edit-row { display: flex; gap: 10px 14px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.edit-sec h2 + .edit-row { border-top: 0; padding-top: 0; }
.edit-main { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lbl { font-weight: 600; font-size: 14px; display: block; }
.vis-pick { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 4px 0 10px; background: var(--surface); flex: none; }
.vis-pick select { border: 0; background: transparent; font-size: 13px; padding: 5px 4px; width: auto; color: var(--ink); }
.pill-choices, .chip-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-choice, .chip-check { position: relative; cursor: pointer; }
.pill-choice input, .chip-check input, .photo-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-choice span, .chip-check span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; }
.pill-choice input:checked + span, .chip-check input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pill-choice input:focus-visible + span, .chip-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.city-picker { position: relative; max-width: 420px; }
.city-chosen { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; }
.city-chosen[hidden], .city-find[hidden] { display: none; }
.city-label { font-weight: 600; flex: 1; min-width: 0; }
.city-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: 300px; overflow-y: auto; }
.city-results li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.city-results li span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-results li.on, .city-results li:hover { background: var(--surface-2); }
.city-results li.none { color: var(--muted); cursor: default; }
.social-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.social-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding-left: 10px; }
.social-input:focus-within { border-color: var(--accent); }
.social-ico { color: var(--muted); display: grid; }
.social-input input { border: 0; background: transparent; box-shadow: none; min-width: 0; }
.photo-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.photo-pick { position: relative; cursor: pointer; border-radius: 10px; overflow: hidden; }
.photo-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photo-pick .tick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.35); color: transparent; font-weight: 700; font-size: 13px; border: 2px solid #fff; }
.photo-pick input:checked ~ .tick { background: var(--accent); color: #fff; }
.photo-pick input:checked ~ img { outline: 3px solid var(--accent); outline-offset: -3px; }
.photo-pick.full { opacity: .45; cursor: not-allowed; }
.gender-self { max-width: 320px; margin-top: 4px; }
.gender-self[hidden] { display: none; }
.chosen-photos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chosen-photos[hidden] { display: none; }
.chosen-photos li { position: relative; width: 64px; height: 64px; }
.chosen-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.chosen-photos .remove { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ink); color: var(--bg); font-size: 15px; line-height: 1; display: grid; place-items: center; cursor: pointer; padding: 0; }
.chosen-photos .remove:hover { background: var(--mature); }
.links-note { background: var(--amber-soft); padding: 8px 10px; border-radius: 8px; }
.image-box { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.image-thumb { position: relative; flex: none; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; border: 1px solid var(--line); }
.img-avatar .image-thumb { width: 72px; height: 72px; border-radius: 50%; }
.img-banner .image-thumb { width: min(100%, 240px); aspect-ratio: 3 / 1; border-radius: 10px; }
.image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s, filter .2s; }
.image-thumb img[hidden], .image-thumb .image-empty[hidden] { display: none; }
.image-thumb img.removing { opacity: .3; filter: grayscale(1); }
.image-empty { font-weight: 600; color: var(--faint); font-size: 13px; text-align: center; padding: 4px; }
.img-avatar .image-empty { font-size: 20px; }
.image-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex: 1; min-width: 180px; }
.image-actions label.btn { cursor: pointer; }
.image-actions [hidden] { display: none; }
.image-actions [data-status] { flex-basis: 100%; }
.danger-text { color: var(--mature); }
/* Cover prompt for AI image tools (story form) */
.cover-prompt { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; margin-top: 4px; }
.cover-prompt-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.cover-prompt-styles label { position: relative; cursor: pointer; }
.cover-prompt-styles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cover-prompt-styles span { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; }
.cover-prompt-styles input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.cover-prompt-styles input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cover-prompt-text { margin: 0; font-size: 13.5px; line-height: 1.55; background: var(--surface); border-radius: 8px; padding: 10px 12px; user-select: all; }
/* Moderator edits */
.edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 4px; }
.mod-pictures { display: flex; flex-wrap: wrap; gap: 14px; }
.mod-picture { display: flex; flex-direction: column; gap: 6px; width: 150px; }
.mod-picture img { width: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
.mod-picture.shape-cover img { aspect-ratio: 3 / 4; }
.mod-picture.shape-avatar img { aspect-ratio: 1; border-radius: 50%; }
.mod-picture.shape-banner { width: 240px; }
.mod-picture.shape-banner img { aspect-ratio: 3 / 1; }
.mod-picture.shape-photo img { aspect-ratio: 1; }
.mod-edited input, .mod-edited textarea, .mod-edited select { border-color: var(--amber); background: var(--amber-soft); }
.tag.amber { background: var(--amber-soft); color: var(--amber); }
#mod-editor { min-height: 320px; background: var(--surface); }
dialog.mod-crop { max-width: 780px; padding: 16px 18px; display: none; }
dialog.mod-crop[open] { display: flex; flex-direction: column; gap: 10px; }
.crop-stage { display: grid; place-items: center; background: #111; border-radius: 10px; padding: 10px; overflow: hidden; }
.crop-stage canvas { max-width: 100%; touch-action: none; cursor: move; }
.change-list { display: flex; flex-direction: column; gap: 14px; }
.change { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.change .before { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); white-space: pre-line; }
.change .after { white-space: pre-line; }
.change .long { max-height: 220px; overflow: auto; background: var(--surface-2); border-radius: 8px; padding: 10px; font-size: 14px; }
.sticky-save { position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: flex-end; }
.sticky-save .btn { box-shadow: var(--shadow); }
@media (max-width: 640px) { .sticky-save { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .tagline { font-size: 16.5px; } }

.tabs { display: flex; gap: 22px; padding: 0 22px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; overflow-x: auto; }
.tabs a { padding: 12px 0; white-space: nowrap; color: var(--muted); }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* Tables */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 500; background: var(--surface-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.flagged td { background: var(--mature-soft); }
.score { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { width: 54px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.bar i { display: block; height: 100%; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.kpi b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 600; }
.kpi span { font-size: 12px; color: var(--faint); }

/* Studio editor */
.editor-shell { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
@media (max-width: 900px) { .editor-shell { grid-template-columns: minmax(0, 1fr); } }
.editor-main { padding: 20px 26px 30px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.editor-main .title-input { border: 0; padding: 0; font-family: var(--display); font-size: 28px; background: none; box-shadow: none; }
.editor-main .title-input:focus { box-shadow: none; }
.editor-aside { border-left: 1px solid var(--line); background: var(--surface-2); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) { .editor-aside { border-left: 0; border-top: 1px solid var(--line); } }
#editor { font-family: var(--read); font-size: 18px; line-height: 1.75; min-height: 420px; }
#editor .ql-editor { padding: 8px 0; min-height: 420px; }
#editor .ql-editor.ql-blank::before { left: 0; color: var(--faint); font-style: normal; }
.ql-toolbar.ql-snow { border: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 0 0 10px !important; font-family: var(--body) !important; }
.ql-container.ql-snow { border: 0 !important; font-family: var(--read) !important; font-size: 18px !important; }
.ql-snow .ql-stroke { stroke: var(--muted) !important; }
.ql-snow .ql-fill { fill: var(--muted) !important; }
.ql-snow .ql-picker { color: var(--muted) !important; }
.ql-snow .ql-picker-options { background: var(--surface) !important; }
.ql-editor .ql-align-center { text-align: center; }
.ql-editor blockquote { border-left: 3px solid var(--line) !important; padding-left: 1em; font-style: italic; }
.ql-scene::after { content: "⁂"; font-size: 16px; color: var(--muted); }
.sug { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.sug del { color: var(--mature); }
.sug ins { color: var(--ok); text-decoration: none; font-weight: 600; }
.sug .why { color: var(--muted); font-size: 13px; }
.sug-details { border-color: var(--accent); }
.sug-details .sug-blurb { margin: 0; font-family: var(--read); font-size: 14.5px; line-height: 1.5; }
.sug-details .tag.accent { align-self: flex-start; }
.sug-details .row .tag { text-transform: none; letter-spacing: 0; }
.save-state { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.status-pill { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.st-draft { background: var(--surface-2); color: var(--muted); }
.st-review { background: var(--amber-soft); color: var(--amber); }
.st-live { background: var(--ok-soft); color: var(--ok); }
.st-changes { background: var(--mature-soft); color: var(--mature); }

/* Modal (native dialog) */
dialog { border: 0; border-radius: 16px; padding: 0; max-width: 440px; width: calc(100% - 32px); background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(10,13,24,.55); }
dialog form { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
dialog h2 { font-size: 24px; }
dialog p { color: var(--muted); font-size: 14.5px; }
dialog .acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Notifications */
.notes { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.notes li + li { border-top: 1px solid var(--line); }
.notes a { display: flex; gap: 12px; padding: 14px 16px; color: var(--ink); align-items: flex-start; }
.notes a:hover { background: var(--surface-2); text-decoration: none; }
.notes .unread { background: var(--accent-soft); }
.notes time { font-size: 12.5px; color: var(--faint); display: block; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding-block: 28px; color: var(--faint); font-size: 13.5px; }
.footer a { color: var(--muted); }
.footer .row { gap: 18px; }

/* Long-form static pages */
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 14px; }
.prose h2 { margin-top: 18px; }
.legal-operator { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.legal-operator p { margin: 0; }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* allauth pages */
.allauth h1 { font-size: 28px; }
.allauth form { display: flex; flex-direction: column; gap: 14px; }
.allauth form p { display: flex; flex-direction: column; gap: 6px; }
.allauth form p:has(> input[type=checkbox]) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.allauth button[type=submit], .allauth form button { display: inline-flex; justify-content: center; border-radius: 8px; padding: 9px 16px; font-weight: 600; font-size: 14px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-family: inherit; cursor: pointer; }
.allauth ul { padding-left: 18px; }

/* Reader extras */
.recap-box { border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 14.5px; }
.recap-box summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.recap-box p { margin-top: 6px; color: var(--muted); }
.listen-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.listen-bar select { width: auto; padding: 4px 8px; font-size: 13px; }
.listen-bar label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.story-text .speaking { background: var(--accent-soft); border-radius: 4px; box-shadow: 0 0 0 4px var(--accent-soft); }

/* Moderation photo grid */
.mod-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.mod-photo { display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
.mod-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.mod-photo.is-partial img { border: 2px solid var(--mature); }

/* Albums */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.photo-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.thumb-wrap, .album-cover { position: relative; display: block; aspect-ratio: 1; max-width: 100%; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.thumb-wrap img, .album-cover img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.album-cover { display: grid; place-items: center; }
.album-cover img { position: absolute; inset: 0; }
.album-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 6px; z-index: 2; }
.blur-gate img { filter: blur(18px) saturate(.6); transform: scale(1.08); }
.blur-gate.revealed img { filter: none; transform: none; }
.blur-veil { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; cursor: pointer; }
.blur-veil span { background: var(--surface); color: var(--mature); font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--mature); }
.blur-gate.revealed .blur-veil { display: none; }
.is-pending img { opacity: .65; }
.pending-tag { position: absolute; bottom: 8px; left: 8px; z-index: 2; }
.upload-box { border: 1px dashed var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.upload-box label { display: flex; flex-direction: column; gap: 4px; }
.photo-full { margin: 0; position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; max-height: 80vh; max-height: 80svh; }
.photo-full img { max-height: 80vh; max-height: 80svh; width: auto; max-width: 100%; object-fit: contain; }
.album-card .t { margin-top: 2px; }

/* Messages */
.thread { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 80%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg .bubble { background: var(--surface-2); padding: 9px 13px; border-radius: 14px 14px 14px 4px; font-size: 15px; overflow-wrap: anywhere; }
.msg .link-note { font-size: 12.5px; }
.msg-not-sent { align-self: stretch; margin: 6px 0; }
.link-check { margin: 10px 0; }
.link-check ul { margin: 6px 0 0; padding-left: 18px; }
.link-check code { overflow-wrap: anywhere; }
.msg.mine .bubble { background: var(--accent); color: var(--accent-ink); border-radius: 14px 14px 4px 14px; }
/* A message: bubble, its ⋯ menu beside it, reactions under it. Time and ticks sit in the bubble's corner. */
.msg-row { display: flex; align-items: center; gap: 4px; max-width: 100%; }
.msg.mine .msg-row { flex-direction: row-reverse; }
.msg .bubble { position: relative; min-width: 64px; }
.msg .meta { float: right; display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 -4px 10px; font-size: 11px; line-height: 1;
  color: var(--faint); white-space: nowrap; }
.msg.mine .meta { color: color-mix(in srgb, var(--accent-ink) 72%, transparent); }
.msg.cont .meta time { display: none; }
.msg.cont .meta:not(:has(.ticks)) { display: none; }
.msg .edited { font-style: italic; }
.ticks { font-weight: 700; letter-spacing: -3px; padding-right: 3px; }
.ticks.seen { color: #7fd8ff; }
.msg.mine .ticks.seen { color: #b9ecff; text-shadow: 0 0 1px rgba(0,0,0,.25); }
.msg-quote { display: block; border-left: 3px solid currentColor; padding: 4px 8px; margin: 0 0 6px; border-radius: 6px;
  background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; font-size: 13px; opacity: .9; }
.msg-quote:hover { text-decoration: none; opacity: 1; }
.msg-quote b { display: block; font-size: 12px; }
.msg-quote span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.msg.gone .bubble { background: none !important; border: 1px dashed var(--line); color: var(--faint) !important; font-style: italic; font-size: 14px; }
.msg.flash .bubble { animation: msgflash 1.2s ease-out; }
@keyframes msgflash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.msg-dots { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--faint); cursor: pointer; list-style: none; opacity: 0; transition: opacity .15s; }
.msg-dots::-webkit-details-marker { display: none; }
.msg-dots svg { width: 16px; height: 16px; }
.msg:hover .msg-dots, .msg-menu[open] .msg-dots, .msg-dots:focus-visible { opacity: 1; }
.msg-dots:hover { background: var(--surface-2); color: var(--ink); }
@media (hover: none) { .msg-dots { opacity: .4; } }
.msg-menu .menu-panel { min-width: 230px; }
@media (min-width: 761px) { .msg-menu .menu-panel { position: fixed; right: auto; } }
.msg-menu .menu-panel form { margin: 0; }
.msg-react-row { display: flex; justify-content: space-between; gap: 2px; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.msg-react-row button { width: auto !important; padding: 4px 6px !important; font-size: 22px !important; border-radius: 50% !important; line-height: 1; transition: transform .1s; }
.msg-react-row button:hover { transform: scale(1.2); }
.msg-react-row button.on { background: var(--accent-soft) !important; }
.msg-rx { display: flex; gap: 4px; margin-top: -6px; padding: 0 8px; position: relative; z-index: 1; }
.msg-rx button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 1px 7px; font-size: 13px; cursor: pointer; display: inline-flex; gap: 3px; align-items: center; }
.msg-rx button.on { border-color: var(--accent); background: var(--accent-soft); }
.msg-rx button span { font-size: 11.5px; color: var(--muted); }
.msg-day { align-self: center; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); padding: 3px 12px; border-radius: 999px; margin: 6px 0; }
.typing-line { color: var(--accent); font-style: italic; }
.composer { flex-wrap: wrap; }
.composer-context { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 10px; font-size: 13.5px; }
.composer-context[hidden] { display: none; }
.composer-context > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.composer-context [data-context-text] { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-context.editing { border-left-color: var(--amber, #d9a441); }
.composer { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; min-width: 0; resize: none; overflow-y: hidden; min-height: 44px; max-height: 140px; border-radius: 22px;
  padding: 11px 16px; font: inherit; font-size: 16px; line-height: 1.35; }  /* 16px: phones don't zoom in when you tap it */
.composer-send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; cursor: pointer; flex: none; }
.composer-send svg { width: 20px; height: 20px; }
.composer-hint { margin: -4px 0 0; }
@media (hover: none) and (pointer: coarse) { .composer-hint { display: none; } }  /* phones: Enter makes a new line */
.msg-head { display: flex; align-items: center; gap: 10px; }
.msg-head .who { flex: 1; }
.msg-more { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); cursor: pointer; list-style: none; }
.msg-more::-webkit-details-marker { display: none; }
.msg-more:hover, details[open] > .msg-more { background: var(--surface-2); color: var(--ink); }
.msg-more svg { width: 20px; height: 20px; }

/* Paragraph reactions and quote sharing */
.react-strip { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; vertical-align: middle; font-family: var(--body); font-size: 12px; font-style: normal; }
.react-chip { background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.react-chip.mine { box-shadow: inset 0 0 0 1px var(--accent); }
.react-add { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; font-size: 11px; padding: 1px 7px; cursor: pointer; opacity: 0; transition: opacity .15s; font-family: var(--body); }
#story-text > *:hover .react-add, .react-add:focus-visible { opacity: 1; }
@media (hover: none) { .react-add { opacity: .7; } }
.react-pop { position: absolute; z-index: 60; display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.react-pop button { border: 0; background: none; font-size: 20px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; }
.react-pop button:hover, .react-pop button:focus-visible { background: var(--surface-2); }
.quote-btn { position: absolute; z-index: 55; }

/* Charts (single series; accent hue; text in ink tokens) */
.chart { position: relative; margin: 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ytick { fill: var(--faint); font-size: 11px; text-anchor: end; dominant-baseline: middle; font-family: var(--body); font-variant-numeric: tabular-nums; }
.chart .xtick { fill: var(--faint); font-size: 11px; text-anchor: middle; font-family: var(--body); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--accent); opacity: .12; }
.chart .end, .chart .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart .cross { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .bar { fill: var(--accent); }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 12.5px; padding: 4px 9px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Challenges, lists, updates, badges */
.challenge-card { color: inherit; gap: 8px; }
.challenge-card:hover { text-decoration: none; border-color: var(--faint); }
.challenge-prompt { font-family: var(--display); font-size: 22px; line-height: 1.25; text-wrap: balance; }
.challenge-card.big .challenge-prompt { font-size: clamp(24px, 3.4vw, 32px); }
.phase-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .phase-steps { grid-template-columns: minmax(0, 1fr); } }
.phase-steps li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); }
.phase-steps li span { font-size: 12.5px; color: var(--faint); }
.phase-steps li.now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.phase-steps li.done { opacity: .6; }
.entry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.entry { gap: 8px; }
.entry.winner { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.entry-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.place { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.place-1 { background: var(--amber-soft); color: var(--amber); }
.list-picker { position: absolute; left: 0; right: auto; top: calc(100% + 6px); }
.post p { font-size: 15.5px; }
.story-link { align-self: flex-start; font-size: 13.5px; font-weight: 600; background: var(--surface-2); padding: 5px 10px; border-radius: 8px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.badge { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.badge .medal { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-family: var(--display); font-size: 15px; }
.badge.gold .medal { background: var(--amber-soft); color: var(--amber); }
.badge b { font-size: 13.5px; display: block; }
.badge span { font-size: 12px; color: var(--faint); }
.streak { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--amber); background: var(--amber-soft); padding: 3px 10px; border-radius: 999px; }

/* Audio and tips */
.narration { display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.narration audio { width: 100%; }
.tip-amounts { display: flex; gap: 8px; flex-wrap: wrap; }
.tip-amounts button { min-width: 72px; }
.tip-amounts button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.audio-badge { position: absolute; bottom: 8px; left: 8px; z-index: 2; background: rgba(0,0,0,.6); color: #fff; font-family: var(--body); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }

/* 18+ teaser cover: no artwork until the reader passes the age gate */
.cover-locked { background: repeating-linear-gradient(135deg, var(--surface-3) 0 10px, var(--surface-2) 10px 20px); color: var(--ink); }
.cover-locked::before { display: none; }
.teaser-gate { border: 1px solid var(--mature); background: var(--mature-soft); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--faint); list-style: none; padding: 0; margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
.crumbs a { color: var(--muted); }

/* Writing flow */
.steps-bar { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; color: var(--faint); }
.steps-bar li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--surface-2); }
.steps-bar li a { color: inherit; display: inline-flex; align-items: center; gap: 8px; }
.steps-bar li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-family: var(--mono); font-size: 11.5px; }
.steps-bar li.done { color: var(--ok); }
.steps-bar li.done span { background: var(--ok-soft); }
.steps-bar li.now { color: var(--accent-ink); background: var(--accent); }
.steps-bar li.now span { background: rgba(255,255,255,.25); color: var(--accent-ink); }
.kind-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.kind-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-weight: 500; background: var(--surface); }
.kind-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.kind-card input { margin-top: 4px; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.checklist .tick { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--faint); font-size: 12px; }
.checklist li.ok .tick { background: var(--ok-soft); color: var(--ok); }
select optgroup { font-weight: 700; }
.cat-children { list-style: none; margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 6px; border-left: 2px solid var(--line); }

/* Skip link */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }

/* Bottom navigation (phones) */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--faint); padding: 4px 0; text-decoration: none; }
.bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav a.on { color: var(--accent); }
.bottom-nav a.write svg { background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 3px; width: 30px; height: 26px; }

/* Toasts */
.toasts { position: fixed; z-index: 70; right: 16px; top: calc(70px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 760px) { .toasts { left: 16px; right: 16px; width: auto; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; background: var(--ink); color: var(--bg); border-radius: 10px; padding: 11px 12px 11px 14px; font-size: 14.5px; box-shadow: var(--shadow); animation: toast-in .2s ease-out; transition: opacity .25s, transform .25s; }
.toast span { flex: 1; }
.toast.error { background: var(--mature); color: #fff; }
.toast.warning { background: var(--amber); color: #fff; }
.toast.out { opacity: 0; transform: translateY(-6px); }
.toast-x { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .8; padding: 0 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Search suggestions */
.search-box { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.suggest:empty { display: none; }
.suggest .grp { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 8px 12px 4px; }
.suggest a { display: flex; gap: 10px; align-items: center; padding: 7px 12px; color: var(--ink); font-size: 14px; }
.suggest a:hover, .suggest a:focus { background: var(--surface-2); text-decoration: none; outline: none; }
.suggest a .faint { margin-left: auto; font-size: 12px; }
.suggest .all { border-top: 1px solid var(--line); color: var(--accent); font-weight: 600; }

/* Theme switch */
.theme-switch { display: flex; align-items: center; gap: 4px; padding: 6px 12px; }
.theme-switch button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.theme-switch.compact { padding: 0; }
.theme-switch .small { margin-right: auto; }
.menu-row { padding: 4px 6px; }
.menu-row .switch { width: 100%; justify-content: flex-start; font-size: 14px; color: var(--ink); }

/* Password show/hide */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: var(--surface-2); color: var(--muted); border-radius: 6px; padding: 4px 9px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* Working state for buttons */
button[aria-busy="true"], .btn[aria-busy="true"] { opacity: .65; cursor: progress; }
.htmx-request.btn, .htmx-request .btn { opacity: .65; }
.load-more { grid-column: 1 / -1; display: flex; justify-content: center; padding-top: 8px; }
.search-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.search-filters select, .search-filters input[type=search] { width: auto; flex: 1; min-width: 160px; }
.search-filters label { font-weight: 500; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }

/* Sign in / join */
.auth-card { max-width: 440px; }
.auth-card .form-row label { font-weight: 600; }
.or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
fieldset.dob { border: 0; padding: 0; margin: 0; }
fieldset.dob legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.dob-selects { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 8px; }
.dob-selects select { width: 100%; }

/* Welcome: interests */
.pick-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pick-group legend { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick input, .pick-writer input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 500; font-size: 14px; cursor: pointer; }
.pick input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pick input:focus-visible + span, .pick-writer:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-writers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pick-writer { position: relative; display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 400; }
.pick-writer > span:not(.pick-state) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pick-state::after { content: "Follow"; font-size: 12px; font-weight: 700; color: var(--accent); }
.pick-writer:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pick-writer:has(input:checked) .pick-state::after { content: "✓ Following"; }
.prompt-card { color: inherit; border-style: dashed; }
.prompt-card:hover { text-decoration: none; border-color: var(--accent); }
.error-page { max-width: 560px; margin: 40px auto; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* Studio cards */
.work-list { display: flex; flex-direction: column; gap: 12px; }
.work-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.work-cover .cover { padding: 8px 6px 8px 9px; }
.work-cover .cv-g, .work-cover .cv-a, .work-cover .adult-badge, .work-cover .audio-badge { display: none; }
.work-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.work-title { font-weight: 700; font-size: 16.5px; color: var(--ink); }

/* Editor comfort */
#editor .ql-editor p { margin-bottom: .85em; }
#editor .ql-editor h2, #editor .ql-editor h3 { margin: .6em 0 .4em; }
.editor-bar { position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 30; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; box-shadow: var(--shadow); }
.editor-bar .save-state { margin-right: auto; }
@media (max-width: 760px) { .editor-bar.mobile-only { display: flex !important; } .editor-main { padding: 16px; } }
.preview-banner { position: sticky; top: 0; z-index: 35; background: var(--amber-soft); color: var(--ink); text-align: center; padding: 8px 12px; font-size: 14px; border-bottom: 1px solid var(--line); }
.progress-mini { height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.progress-mini i { display: block; height: 100%; background: var(--accent); }

/* Notifications */
.notes a { align-items: center; }
.note-who { display: flex; align-items: center; flex: none; }
.note-who .av { margin-right: -8px; border: 2px solid var(--surface); }
.note-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex: none; position: relative; }
.note-who .av + .note-icon { width: 22px; height: 22px; margin-left: 0; align-self: flex-end; }
.note-icon svg { width: 15px; height: 15px; }
.k-badge, .k-challenge { color: var(--amber); background: var(--amber-soft); }
.k-tip { color: var(--mature); background: var(--mature-soft); }
.k-new_chapter { color: var(--accent); background: var(--accent-soft); }
.k-warning { color: var(--mature); background: var(--mature-soft); }
.k-follow { color: var(--ok); background: var(--ok-soft); }
.note-text { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 12px; }
.note-text time { flex: none; }
.note-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.crop-preview { position: relative; max-width: 240px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.crop-preview img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.crop-preview .help { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); color: #fff; padding: 4px 8px; font-size: 11.5px; }
.dropzone { transition: border-color .15s, background .15s; }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-label { cursor: pointer; }
.queue-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.queue-thumbs:empty { display: none; }
.queue-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.queue-thumbs img.too-big { outline: 2px solid var(--mature); opacity: .5; }
.upload-progress { display: flex; align-items: center; gap: 10px; }
.upload-progress .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.upload-progress .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.back-link { align-self: flex-start; color: var(--muted); font-weight: 600; }
.login-prompt { align-items: stretch; text-align: center; }
.login-prompt .logo { justify-content: center; font-size: 20px; }
.login-prompt h2 { font-size: 24px; }
dialog#login-prompt { max-width: 380px; }
.browse-tabs { padding: 0; }
.album-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.albums-shelf > .card { flex: 0 0 150px; }

/* Full-screen photo viewer */
body.viewer-open { overflow: hidden; padding-bottom: 0; }
body.viewer-open .topbar, body.viewer-open .footer { display: none; }
.viewer { position: fixed; inset: 0; z-index: 80; background: #05070C; color: #F2F4F8; display: flex; flex-direction: column; transition: opacity .2s; }
.viewer-top, .viewer-bottom { position: absolute; left: 0; right: 0; z-index: 2; display: flex; gap: 12px; padding: 12px 14px; transition: opacity .2s, transform .2s; }
.viewer-top { top: 0; align-items: center; padding-top: calc(12px + env(safe-area-inset-top, 0px)); background: linear-gradient(rgba(0,0,0,.7), transparent); }
.viewer-bottom { bottom: 0; flex-direction: column; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.viewer.bare .viewer-top, .viewer.bare .viewer-bottom, .viewer.bare .viewer-nav { opacity: 0; pointer-events: none; }
.viewer-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; flex: none; }
.viewer-btn svg { width: 20px; height: 20px; }
.viewer-btn:hover, .viewer-btn:focus-visible { background: rgba(255,255,255,.26); text-decoration: none; }
.viewer-title { flex: 1; min-width: 0; color: #fff; display: flex; flex-direction: column; line-height: 1.25; }
.viewer-title b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-title span { font-size: 12.5px; opacity: .75; }
.viewer-title:hover { text-decoration: none; }
.viewer-count { font-family: var(--mono); font-size: 13px; background: rgba(255,255,255,.14); padding: 4px 10px; border-radius: 999px; }
.viewer-stage { flex: 1; display: grid; place-items: center; overflow: hidden; touch-action: pan-y pinch-zoom; }
.viewer-figure { margin: 0; position: relative; max-width: 100vw; max-height: 100%; display: grid; place-items: center; }
.viewer-figure img { max-width: 100vw; max-height: 100dvh; width: auto; height: auto; object-fit: contain; transition: opacity .18s, transform .15s; user-select: none; -webkit-user-drag: none; }
.viewer-figure img.swap { opacity: .25; }
@media (min-width: 761px) { .viewer-figure img { max-width: calc(100vw - 140px); max-height: calc(100dvh - 140px); } }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 64px; display: grid; place-items: center; font-size: 40px; line-height: 1; color: #fff; background: rgba(255,255,255,.1); border-radius: 12px; transition: opacity .2s; }
.viewer-nav:hover { background: rgba(255,255,255,.22); text-decoration: none; }
.viewer-nav.prev { left: 14px; } .viewer-nav.next { right: 14px; }
@media (hover: none) { .viewer-nav { display: none; } }
.viewer-caption { font-size: 15px; max-width: 70ch; }
.viewer-caption:empty { display: none; }
.viewer-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.viewer-meta .who { color: #fff; font-size: 13.5px; }
.viewer-report { color: rgba(255,255,255,.7); font-size: 13px; }
.viewer-hint { font-size: 12px; opacity: .55; text-align: center; }
@media (hover: hover) { .viewer-hint { display: none; } }

/* Album grid as a tight gallery on phones */
@media (max-width: 560px) {
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .photo-grid .thumb-wrap { border-radius: 4px; }
}
.blur-veil { flex-direction: column; gap: 8px; }
.blur-veil { display: flex; align-items: center; justify-content: center; }
.blur-veil[hidden] { display: none; }
.veil-always { background: rgba(0,0,0,.55); color: #fff; border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.veil-always:hover, .veil-always:focus-visible { background: rgba(0,0,0,.75); }

/* Category row: always one line, scrolls sideways */
.chip-row { position: relative; }
.chips.one-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.chips.one-row::-webkit-scrollbar { display: none; }
.chips.one-row.at-end { -webkit-mask-image: none; mask-image: none; }
.chips.one-row .chip { flex: none; }
.chip.more { border-style: dashed; color: var(--accent); font-weight: 600; }
.chip-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-size: 20px; line-height: 1; cursor: pointer; }
.chip-arrow.left { left: -6px; } .chip-arrow.right { right: -6px; }
@media (hover: none) { .chip-arrow { display: none; } }
.cat-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cat-card { gap: 8px; }
.cat-top { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink); font-size: 17px; }
.cat-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cat-card li { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }

/* ---------- Bookshop redesign: home, story page, reader ---------- */
.home { gap: 44px; }
@media (max-width: 760px) { .home { gap: 34px; } main { padding-top: 20px; } }

/* Greeting for signed-in readers */
.greeting { display: flex; flex-direction: column; gap: 6px; }
.greeting h1 { font-size: clamp(28px, 4vw, 40px); }
.greeting p { color: var(--muted); font-size: 16.5px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Hero: one story, its first line, one button */
.hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 8px; }
.hero-cover { display: block; }
.hero-cover:hover { text-decoration: none; }
.hero-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hero h2 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; }
.hero h2 a { color: inherit; }
.hero h2 a:hover { text-decoration: none; color: var(--accent); }
.hero-quote { margin: 0; font-family: var(--read); font-style: italic; font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--ink); max-width: 58ch; }
.hero-blurb { color: var(--muted); font-size: 17px; max-width: 58ch; }
.hero-meta { color: var(--faint); font-size: 14px; }
.hero .row { gap: 12px; margin-top: 4px; }
.hero-empty { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .hero { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
  .hero h2 { font-size: 25px; }
  .hero-quote { font-size: 16px; grid-column: 1 / -1; }
  .hero-body { display: contents; }
  .hero-body > .kicker { grid-column: 2; grid-row: 1; align-self: end; }
  .hero-body > h2 { grid-column: 2; grid-row: 2; }
  .hero-body > .hero-meta { grid-column: 2; grid-row: 3; align-self: start; }
  .hero-body > .hero-quote, .hero-body > .hero-blurb { grid-column: 1 / -1; grid-row: 4; }
  .hero-body > .row { grid-column: 1 / -1; grid-row: 5; }
  .hero-cover { grid-column: 1; grid-row: 1 / span 3; }
}

/* Continue reading: wide cards with progress */
.cont-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cont-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--surface); border-radius: 12px; padding: 12px 14px 12px 12px; color: var(--ink); box-shadow: 0 1px 2px rgba(23,27,38,.04); border: 1px solid var(--line); }
.cont-card:hover { text-decoration: none; border-color: var(--surface-3); }
.cont-card:hover .t { color: var(--accent); }
.cont-card .cover { padding: 6px; }
.cont-card .cover .cv-g, .cont-card .cover .cv-a, .cont-card .cover .cv-t, .cont-card .audio-badge, .cont-card .adult-badge { display: none; }
.cont-card .new-badge { left: 50%; transform: translateX(-50%); top: auto; bottom: 6px; font-size: 8.5px; padding: 1px 5px; }
.cont-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cont-body .t { font-weight: 600; font-size: 15px; line-height: 1.3; }
.cont-body .s { font-size: 13px; color: var(--muted); }
.cont-body .progress-mini { margin-top: 6px; height: 4px; }
.new-text { color: var(--amber); font-weight: 700; }

/* First lines */
.first-lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px 28px; }
.first-line { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 4px 18px; border-left: 2px solid var(--accent); color: var(--ink); }
.first-line:hover { text-decoration: none; }
.first-line:hover q { color: var(--accent); }
.first-line q { font-family: var(--read); font-size: 18px; line-height: 1.5; quotes: "“" "”"; transition: color .15s; }
.first-line span { font-size: 13px; color: var(--muted); }

/* Writers to follow */
.writer-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 28px; }
.writer-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.writer-chip .who { min-width: 0; }
.writer-chip .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }

/* Gentle prompts */
.prompt-strip { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 15px; }
.prompt-strip:hover { text-decoration: none; }
.write-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 32px; border-radius: 18px; background: var(--ink); color: var(--bg); }
.write-band h2 { font-size: clamp(24px, 3vw, 32px); }
.write-band p { color: color-mix(in srgb, var(--bg) 78%, transparent); max-width: 56ch; margin-top: 8px; }
.write-band .btn.pri { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.write-band .btn.pri:hover { background: var(--surface-2); }
@media (max-width: 560px) { .write-band { padding: 24px 20px; } }

/* Challenge card sits in the flow now: lighter */
.challenge-card.big { background: var(--surface); border-color: var(--line); padding: 22px 24px; }

/* Story page */
.story-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.facts { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.facts div { display: flex; flex-direction: column; gap: 1px; }
.facts dt { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.facts dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.story-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.story-main h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.06; }
.kicker-row { gap: 12px; }
.blurb { font-size: 18px; line-height: 1.55; color: var(--muted); white-space: pre-line; max-width: 62ch; }
.warn-line { font-size: 14px; color: var(--mature); }
.warn-line b { font-weight: 600; }
.actions-row { gap: 10px; }
/* Save, List and Share look alike: one outlined style, one height */
.actions-row > .btn, .actions-row > .menu > .btn { border: 1px solid var(--line); min-height: 34px; }
.actions-row > .btn:not(.on), .actions-row > .menu > .btn { background: var(--surface); }
.actions-row > .btn.on { border-color: var(--mature); }
@media (max-width: 560px) {
  /* Phones: Save, List and Share as three matching buttons sharing the row */
  .actions-row { gap: 8px; }
  .actions-row > .btn, .actions-row > .menu { flex: 1 1 0; min-width: 0; }
  .actions-row > .menu { display: flex; }
  .actions-row > .btn, .actions-row > .menu > .btn { height: 40px; justify-content: center; padding-inline: 8px; white-space: nowrap; }
  .actions-row > .menu > .btn { width: 100%; }
  .actions-row > a[href*="/studio/"] { flex-basis: 100%; }  /* the writer's own "Edit in studio" gets its own line */
  .actions-row .list-picker { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 60; }
}
.opening { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px 22px; color: var(--ink); margin-top: 6px; }
.opening:hover { text-decoration: none; border-color: var(--surface-3); }
.opening:hover .opening-more { text-decoration: underline; }
.opening-k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.opening-text { display: flex; flex-direction: column; gap: .9em; font-family: var(--read); font-size: 19px; line-height: 1.7; max-height: 15em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.opening-more { color: var(--accent); font-weight: 600; font-size: 14.5px; }
.about-story { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; scroll-margin-top: 80px; }
.about-story h2 { font-size: 19px; margin: 0; }
.about-story p { margin: 0; line-height: 1.7; color: var(--ink); }
.about-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 4px 0 0; }
.about-facts > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.about-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.about-facts dd { margin: 0; font-size: 14.5px; line-height: 1.6; }
.about-next-k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint) !important; margin-top: 4px !important; }
@media (max-width: 560px) { .about-story { padding: 18px 16px; } }
.about-story:lang(hi) p, .about-story:lang(hi) dd { line-height: 1.9; }
.about-story:lang(hi) .about-facts dt, .about-story:lang(hi) .about-next-k { letter-spacing: 0; text-transform: none; font-size: 13px; }
@media (max-width: 560px) { .opening { padding: 20px 18px 18px; } .opening-text { font-size: 17.5px; } }
.h-sm { font-size: 22px; }
.tags-quiet .chip { font-size: 12.5px; padding: 4px 11px; }

/* Reader: calmer header and end-of-chapter card */
.reader-crumb { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13.5px; color: var(--faint); }
.reader-crumb a { color: var(--muted); font-weight: 600; }
.reader-crumb span + span::before, .reader-crumb a + span::before { content: "·"; margin-right: 14px; color: var(--faint); }
.reader-crumb .tag::before { content: none !important; }
.reader-title { font-size: clamp(30px, 4.4vw, 42px); }
.reader-by { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.reader-by .who .name { font-size: 14px; }
.reader-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
@media (max-width: 560px) { .reader-tools .btn.sm { padding-inline: 10px; } }
.endcard { margin-top: 28px; display: flex; flex-direction: column; gap: 20px; background: var(--surface-2); border-radius: 18px; padding: 24px 26px 26px; }
.end-mark { text-align: center; color: var(--faint); font-size: 18px; letter-spacing: .3em; }
.end-next { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.end-next > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.end-next b { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.6vw, 24px); line-height: 1.2; }
.end-next > .end-next-btns { flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; }
.cl-open { display: inline-flex; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid var(--line); background: var(--surface); }
.cl-open > span { color: var(--faint); font-weight: 500; }
@media (max-width: 560px) { .end-next > .end-next-btns { flex-direction: column; align-items: stretch; width: 100%; } }

/* Library (templates/stories/library.html) */
.lib-tabs { display: none; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.library.tabbed .lib-tabs { display: flex; }
.library.tabbed .lib-h { display: none; }
.lib-tabs button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.lib-tabs button span { color: var(--faint); font-weight: 500; margin-left: 3px; }
.lib-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.lib-tabs button[aria-selected="true"] span { color: inherit; opacity: .7; }
@media (max-width: 560px) { .lib-tabs button { flex: 1 1 auto; padding: 8px 10px; font-size: 13.5px; } }  /* all four fit on a phone */
.lib-item { position: relative; }
.lib-item .cont-card { padding-right: 44px; height: 100%; }
.lib-when { position: absolute; right: 14px; bottom: 10px; font-size: 11.5px; color: var(--faint); pointer-events: none; }
.lib-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: none;
  color: var(--faint); font-size: 15px; cursor: pointer; display: grid; place-items: center; }
.lib-x:hover { background: var(--surface-2); color: var(--ink); }
.lib-undo { display: flex; align-items: center; gap: 8px; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; font-size: 14px; color: var(--muted); }
.lib-again { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-top: 4px; }
.lib-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.lib-list { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px; color: var(--ink); }
.lib-list:hover { text-decoration: none; border-color: var(--surface-3); }
.lib-list b { font-size: 14.5px; line-height: 1.3; }
.lib-stack { position: relative; height: 96px; margin-bottom: 8px; display: block; }
.lib-stack-cover { position: absolute; top: 6px; width: 58px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.45); }
.lib-stack-cover .cover { font-size: 6px; }
.lib-stack-cover:nth-child(1) { left: 4px; transform: rotate(-6deg); z-index: 1; }
.lib-stack-cover:nth-child(2) { left: 38px; top: 2px; z-index: 2; }
.lib-stack-cover:nth-child(3) { left: 72px; transform: rotate(6deg); z-index: 1; }
.lib-stack-empty { display: grid; place-items: center; height: 100%; border: 1px dashed var(--line); border-radius: 10px; color: var(--faint); font-size: 12.5px; }
.lib-list-new { justify-content: center; align-items: center; border-style: dashed; color: var(--accent); font-weight: 700; min-height: 150px; }

/* The Save sheet (templates/stories/_save_sheet.html) */
.save-sheet { max-width: 460px; }
.ss { display: grid; gap: 2px; padding: 0 2px; }
.ss-title { font-family: var(--display); font-size: 19px; line-height: 1.25; margin: 0; }
.ss-sub { font-size: 12.5px; color: var(--faint); margin: 0 0 8px; }
.ss hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.ss-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 8px; border: 0; background: none; border-radius: 12px;
  font: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.ss-opt:hover { background: var(--surface-2); }
.ss-opt > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ss-opt small { color: var(--faint); font-size: 12px; }
.ss-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); display: grid; place-items: center; flex: none;
  font-size: 13px; color: transparent; transition: background .12s, border-color .12s; }
.ss-opt[aria-pressed="true"] .ss-box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ss-new summary { list-style: none; cursor: pointer; padding: 12px 8px; border-radius: 12px; color: var(--accent); font-weight: 600; }
.ss-new summary::-webkit-details-marker { display: none; }
.ss-new summary:hover { background: var(--surface-2); }
.ss-new form { display: flex; gap: 8px; padding: 2px 8px 8px; }
.ss-new input[type="text"] { flex: 1; min-width: 0; font-size: 16px; }

/* The chapter list in the reader (templates/stories/_chapter_list.html): a bottom sheet on phones, a panel on computers */
.chapter-sheet { max-width: 520px; }
.cl-head { padding: 0 6px 10px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.cl-head b { font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.25; }
.cl-head span { font-size: 12.5px; color: var(--faint); }
.cl-list { list-style: none; margin: 0; padding: 6px 0; display: grid; gap: 2px; }
.cl-ch { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 11px 10px; border-radius: 12px; color: var(--ink); scroll-margin: 60px; }
a.cl-ch:hover { background: var(--surface-2); text-decoration: none; }
.cl-n { font-weight: 700; font-size: 13px; color: var(--faint); text-align: center; }
.cl-t { font-size: 15px; overflow-wrap: anywhere; }
.cl-m { font-size: 12px; color: var(--faint); white-space: nowrap; }
.cl-read .cl-n { color: var(--accent); }
.cl-read .cl-t { color: var(--muted); }
.cl-now { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
a.cl-now:hover { background: var(--accent-soft); }
.cl-now .cl-t { font-weight: 700; color: var(--accent); }
.cl-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; padding: 2px 8px; margin-left: 4px; vertical-align: 2px; }
.cl-soon { opacity: .75; }
.cl-soon .cl-m { color: var(--amber); }
.end-links { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 14px; font-weight: 600; border-top: 1px solid var(--line); padding-top: 14px; }
.end-links a { color: var(--muted); }
.end-more { display: flex; flex-direction: column; gap: 12px; }
.end-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .endcard { padding: 20px 16px; margin-inline: -4px; } .end-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .end-shelf > :nth-child(4) { display: none; } .end-next .btn { width: 100%; } }
.reader-shell .rail-btn { background: var(--surface); }

@media (max-width: 760px) {
  .story-side { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: end; }
  .top-actions .btn.sm { padding: 6px 11px; }
  .top-actions { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .cover { transition: none; } }

/* Free narration player (female / male readings) */
/* Listen player: streams a reading in parts while it is made (static/js/voice-player.js) */
.voice-player { display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); border-radius: 16px; padding: 12px 14px; }
.voice-player[hidden] { display: none; }
.vp-row { display: flex; align-items: center; gap: 10px; }
.vp-play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 6px 16px -8px var(--accent); position: relative; }
.vp-play.sm { width: 38px; height: 38px; box-shadow: none; }
.vp-play svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.vp-play.sm svg { width: 17px; height: 17px; }
.vp-play .i-pause, .vp-play .i-spin, .is-playing .vp-play .i-play, .is-loading .vp-play .i-play, .is-loading .vp-play .i-pause { display: none; }
.is-playing .vp-play .i-pause { display: block; }
.is-loading .vp-play .i-spin { display: block; grid-area: 1 / 1; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: vp-spin .8s linear infinite; }
@keyframes vp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-loading .vp-play .i-spin { animation-duration: 2.4s; } }
.vp-skip { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; position: relative; padding: 0; }
.vp-skip svg { width: 22px; height: 22px; grid-area: 1 / 1; }
.vp-skip span { grid-area: 1 / 1; font-size: 8.5px; font-weight: 700; margin-top: 2px; }
.vp-time { margin-left: auto; color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.vp-status { margin: 0; font-size: 13.5px; font-weight: 600; min-height: 1.3em; }
.vp-status.quiet { font-weight: 400; color: var(--muted); }
.vp-bar { position: relative; height: 18px; display: flex; align-items: center; }
.vp-bar::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--line); }
.vp-made { position: absolute; left: 0; height: 4px; border-radius: 2px; background: var(--faint); opacity: .45; width: 0; transition: width .4s; }
.vp-bar input[type=range] { position: relative; width: 100%; margin: 0; accent-color: var(--accent); background: transparent; }
.vp-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vp-opts .chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-family: inherit; padding: 5px 12px; width: auto; }
.vp-opts select.chip { appearance: none; -webkit-appearance: none; padding: 5px 12px; }
.vp-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.vp-checks label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.vp-checks input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

/* The paragraph being read aloud */
#story-text > * { transition: background-color .35s ease, box-shadow .35s ease; border-radius: 6px; }
#story-text > .reading-now { background: var(--accent-soft); box-shadow: 0 0 0 6px var(--accent-soft); }
/* the sentence being read, inside the paragraph being read */
::highlight(reading-sentence) { background-color: rgba(29, 107, 115, .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) ::highlight(reading-sentence) { background-color: rgba(108, 189, 196, .3); } }
:root[data-theme="dark"] ::highlight(reading-sentence) { background-color: rgba(108, 189, 196, .3); }
.reader-shell.paper ::highlight(reading-sentence) { background-color: rgba(29, 107, 115, .22); }
.reader-shell.sepia ::highlight(reading-sentence) { background-color: rgba(122, 78, 29, .24); }
.reader-shell.night ::highlight(reading-sentence) { background-color: rgba(95, 169, 176, .32); }
.sentence-overlay { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 2; }
.sentence-overlay i { position: absolute; border-radius: 3px; background: rgba(29, 107, 115, .18); }
.follow-pill { position: fixed; z-index: 31; left: 50%; transform: translateX(-50%); bottom: 96px; border: 0; border-radius: 999px; padding: 9px 16px;
  background: var(--accent); color: var(--accent-ink); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; box-shadow: var(--shadow); cursor: pointer; }
.follow-pill[hidden] { display: none; }
@media (max-width: 640px) { .follow-pill { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); } }
.follow-debug { position: fixed; z-index: 99; top: 60px; left: 8px; right: 8px; margin: 0; padding: 6px; font-size: 11px; white-space: pre-wrap; background: rgba(0,0,0,.75); color: #fff; border-radius: 6px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #story-text > * { transition: none; } }

/* Voice picker: a sheet that slides up on phones, a dialog on wider screens */
dialog.sheet { padding: 10px 18px 18px; max-width: 460px; }
dialog.sheet h2 { font-size: 20px; }
.sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 8px; }
.sheet-group { margin: 12px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.voice-list { list-style: none; margin: 0; padding: 0; }
.voice-list li { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.voice-list li:last-child { border-bottom: 0; }
.voice-sample { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; }
.voice-sample svg { width: 14px; height: 14px; }
.voice-sample.on { color: var(--accent); border-color: var(--accent); }
.voice-pick { flex: 1; display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "name ready tick" "about ready tick"; align-items: center; column-gap: 8px; text-align: left; background: none; border: 0; padding: 10px 0; cursor: pointer; color: var(--ink); font-family: inherit; }
.voice-pick b { grid-area: name; font-size: 15px; }
.voice-pick span { grid-area: about; font-size: 13px; color: var(--muted); }
.voice-pick .ready { grid-area: ready; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 6px; }
.voice-pick .tick { grid-area: tick; font-style: normal; color: var(--accent); visibility: hidden; font-weight: 700; }
.voice-pick.on .tick { visibility: visible; }
@media (max-width: 640px) {
  dialog.sheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 18px 18px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 85vh; }
  dialog.sheet[open] { animation: sheet-up .22s ease-out; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Mini player: stays on screen while you read and listen */
.mini-player { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(520px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 8px 12px 12px; box-shadow: var(--shadow); }
.mini-player[hidden] { display: none; }
.mini-info { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font-family: inherit; }
.mini-info b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-info > span { font-size: 12.5px; color: var(--muted); }
.mini-close { font-size: 16px; color: var(--muted); padding: 6px; }
.mini-bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.mini-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
#mini-made { background: var(--faint); opacity: .45; }
#mini-done { background: var(--accent); }
@media (max-width: 640px) { .mini-player { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* Contact page */
.contact-card { max-width: 600px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-msg { white-space: pre-line; overflow-wrap: anywhere; font-size: 15.5px; }

/* 18+ section: shown locked to guests and adults with 18+ off */
.cat-locked { color: var(--ink); border-color: var(--mature-soft); background: linear-gradient(160deg, var(--mature-soft), var(--surface) 70%); }
.cat-locked:hover { text-decoration: none; border-color: var(--mature); }
.chip.adult-chip { color: var(--mature); background: var(--mature-soft); font-weight: 600; }
.adult-band { display: flex; justify-content: space-between; align-items: center; gap: 18px 28px; flex-wrap: wrap; padding: 24px 26px;
  border-radius: 18px; background: linear-gradient(135deg, var(--mature-soft), var(--surface) 75%); border: 1px solid var(--mature-soft); }
.adult-band h2 { font-size: clamp(21px, 2.6vw, 26px); }
.adult-band p { color: var(--muted); max-width: 60ch; margin-top: 6px; }
.adult-band .tag { margin-bottom: 8px; }
@media (max-width: 760px) { .hero.hero-empty { grid-template-columns: minmax(0, 1fr); } .hero-empty .hero-body { display: flex; } .hero-empty .hero-body > * { align-self: flex-start; } }

/* 18+ switch: a settings row in the account menu, a small pill in the top bar */
.adult-form { margin: 0; display: contents; }
.menu-panel .switch, .menu-row .switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink); text-align: left; }
.menu-panel .switch:hover { background: var(--surface-2); }
.menu-row { padding: 0; }
.switch .track { flex: none; }
.switch-pill { gap: 7px; padding: 4px 6px 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.switch-pill:hover { border-color: var(--mature); color: var(--mature); }
.switch-pill .track { width: 28px; height: 16px; }
.switch-pill .track::after { top: 2px; left: 2px; width: 12px; height: 12px; }
.switch-pill[aria-checked="true"] { background: var(--mature-soft); border-color: var(--mature); color: var(--mature); }
.switch-pill[aria-checked="true"] .track::after { left: 14px; }
@media (max-width: 760px) { .switch-pill { padding: 3px 5px 3px 9px; font-size: 12px; } .switch-pill .track { width: 24px; } .switch-pill[aria-checked="true"] .track::after { left: 10px; } }
.switch[aria-checked="false"] .track { background: color-mix(in srgb, var(--faint) 45%, transparent); }

/* Category picker (writing forms) */
.cat-picker { display: flex; flex-direction: column; gap: 10px; }
.cp-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
.cp-summary[hidden], .cp-browse[hidden], .cp-step[hidden], .cp-results[hidden] { display: none; }
.cp-chosen { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-chosen b { font-size: 16px; }
.cp-rule.is-adult { color: var(--mature); font-weight: 600; }
.cp-rule.is-young { color: var(--ok); font-weight: 600; }
.cp-browse { display: flex; flex-direction: column; gap: 10px; }
.cp-search { font-size: 15.5px; }
.cp-results { display: flex; flex-direction: column; gap: 6px; }
.cp-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.cp-result:hover, .cp-result:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.cp-result span:not(.tag) { font-size: 13px; color: var(--muted); }
.cp-genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cp-genre { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.cp-genre:hover, .cp-genre:focus-visible { border-color: var(--accent); }
.cp-genre b { font-size: 14.5px; }
.cp-genre span:not(.tag) { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.cp-subs { display: flex; flex-direction: column; gap: 8px; }
.cp-subs .chip { cursor: pointer; font: inherit; font-size: 13.5px; }
.cp-subs .chip:first-child { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
@media (max-width: 560px) { .cp-genres { grid-template-columns: 1fr 1fr; } .cp-genre span:not(.tag) { display: none; } }

/* Medium screens: keep the top bar on one line (the search box becomes the search icon) */
@media (min-width: 761px) and (max-width: 1100px) {
  .topbar-inner { flex-wrap: nowrap; }
  .topbar .search-box { display: none !important; }
  .topbar .icon-link.mobile-only { display: inline-flex !important; }
  .nav { gap: 16px; }
}

.cover-now { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.cover-now img { width: 72px; height: 96px; object-fit: cover; border-radius: 3px 6px 6px 3px; box-shadow: var(--book-shadow); flex: none; }

/* Tag chips input */
.tag-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); cursor: text; }
.tag-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tag-list { display: contents; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: 13.5px; font-weight: 600; max-width: 100%; overflow-wrap: anywhere; }
.tag-chip button { border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.tag-chip button:hover { background: var(--surface); }
.tag-entry { flex: 1; min-width: 120px; border: 0 !important; box-shadow: none !important; padding: 4px !important; background: none !important; }
.tag-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--faint); }
.tag-meta .tag-full { color: var(--amber); font-weight: 600; }
.tag-msg { color: var(--amber); }

/* Narrow phones (Galaxy S2x, iPhone mini, 360px and below): compact top bar, never any sideways scroll */
html, body { overflow-x: clip; }
.topbar-inner { min-width: 0; }
.logo { flex-shrink: 0; }
@media (max-width: 420px) {
  .topbar-inner { gap: 8px; }
  .logo { font-size: 19px; gap: 6px; }
  .logo .mark { width: 13px; height: 19px; }
  .top-actions { gap: 0; }
  .top-actions .btn.ghost { display: none; }          /* "Sign in": the bottom bar has it */
  .top-actions .btn.sm { padding: 6px 12px; font-size: 13px; }
  .icon-link { width: 32px; height: 32px; }
  .icon-link svg { width: 19px; height: 19px; }
  .switch-pill { padding: 3px 4px 3px 8px; gap: 5px; font-size: 11.5px; }
  .wrap, .wrap-narrow { padding-inline: 14px; }
}
@media (max-width: 420px) { .chips.scroll-x { margin-inline: -14px; padding-inline: 14px; } }
@media (max-width: 420px) {
  #account-menu { margin-left: 10px; }  /* keep the profile picture clear of the bell and its badge */
  .top-actions .dot { right: -2px; top: 0; }
}
@media (max-width: 380px) {
  .topbar-inner { gap: 6px; }
  .logo { font-size: 18px; }
  .icon-link { width: 28px; height: 30px; }
  .icon-link svg { width: 18px; height: 18px; }
  .menu > summary .av { width: 30px; height: 30px; font-size: 11px; }
  .switch-pill .track { width: 22px; }
  .switch-pill[aria-checked="true"] .track::after { left: 8px; }
}

/* Uploaded cover photos (option A): gently dimmed, soft dark fade, title on top. Off when the writer's image has its own title. */
.cover.has-img.photo-titled { padding: 11% 10% 10% 13%; }
.cover.has-img.photo-titled img { filter: brightness(.82) saturate(.95); }
.cover .cv-fade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,20,.45) 0%, transparent 22%, transparent 45%, rgba(10,12,20,.82) 100%); }
.cover.has-img .cv-g, .cover.has-img .cv-t, .cover.has-img .cv-a { position: relative; z-index: 2; }
.cover.has-img .cv-t { text-shadow: 0 1px 12px rgba(0,0,0,.45); }

.cover-live { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.cover-live[hidden] { display: none; }
.cover-live .cover { width: 150px; flex: none; }
/* The publish-page preview is small: keep the title across the cover, never split inside a word. */
.cover-live .cv-t { align-self: stretch; text-wrap: wrap; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.cover.has-img:not(.photo-titled) .cv-fade, .cover.has-img:not(.photo-titled) .cv-g,
.cover.has-img:not(.photo-titled) .cv-t, .cover.has-img:not(.photo-titled) .cv-a { display: none; }
.cv-g { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Admin Insights */
.seg a { padding: 5px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.seg a:hover { color: var(--ink); text-decoration: none; }
.seg a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.kpi .delta { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--faint); margin-top: 2px; }
.kpi .delta.up { color: var(--ok); }
.kpi .delta.down { color: var(--mature); }
.share { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; }
.share i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); position: relative; overflow: hidden; }
.share i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--accent); border-radius: 3px; }
.insights-table th a { color: inherit; white-space: nowrap; }
.insights-table th a[aria-current="true"] { color: var(--accent); }
.insights-table td:first-child { min-width: 180px; }

/* ===== Wall ===== */
.wall { max-width: 620px; margin-inline: auto; gap: 14px; }
.av.md { width: 40px; height: 40px; font-size: 14px; }
.wall-top { display: grid; gap: 10px; }
.wall-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-2); border-radius: 12px; padding: 4px; gap: 4px; }
.wall-tabs a { text-align: center; padding: 8px 6px; border-radius: 9px; font-weight: 600; font-size: 14.5px; color: var(--muted); }
.wall-tabs a:hover { color: var(--ink); text-decoration: none; }
.wall-tabs a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.people-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; }
.people-search svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
.people-search input { border: 0; background: none; padding: 9px 0; font: inherit; font-size: 15px; width: 100%; color: var(--ink); outline: none; }
.people-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.compose-prompt { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: var(--faint); }
.compose-prompt:hover { text-decoration: none; border-color: var(--accent); }
.compose-prompt .fake-input { flex: 1; background: var(--surface-2); border-radius: 999px; padding: 9px 14px; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-photo svg { width: 24px; height: 24px; color: var(--ok); }
.near-me { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.near-me select { width: auto; flex: 1; max-width: 260px; }
.wall-feed { display: grid; gap: 14px; }
.wall-feed .load-more, .wall .load-more { display: flex; justify-content: center; }
.wall-empty .big { font-family: var(--display); font-size: 22px; color: var(--ink); margin: 0; }

.wall-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; overflow: hidden; min-width: 0; }
.wall-card > * { min-width: 0; }
.wc-head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 12px 6px 14px; }
.wc-head .who { flex: 1; align-items: center; }
.wc-head .who a.name { font-weight: 650; color: var(--ink); font-size: 15px; }
.wc-head .who .sub { display: block; }
.wc-head .who .sub a { color: inherit; }
.flag-sm { width: 16px; height: 12px; border-radius: 2px; vertical-align: -1px; box-shadow: 0 0 0 1px var(--line); }
.share .flag-sm { display: inline-block; margin-right: 5px; }
.wc-menu summary { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; color: var(--muted); }
.wc-menu summary:hover { background: var(--surface-2); }
.wc-menu .menu-panel form { margin: 0; }
.danger-text { color: var(--mature) !important; }
.wc-text { padding: 2px 14px 12px; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.wc-text.big { font-size: 20px; line-height: 1.4; }
.wc-photos { display: grid; gap: 2px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface-2); }
.wc-photos.n1 { grid-template-columns: minmax(0, 1fr); }
.wc-photos .wc-ph { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.wc-photos.n1 .wc-ph { aspect-ratio: auto; max-height: 560px; }
.wc-photos.n3 .wc-ph:first-child { grid-row: span 2; aspect-ratio: auto; }
.wc-photos img, .wc-photos-all img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-photos.n1 img { height: auto; max-height: 560px; object-fit: contain; background: var(--surface-2); }
.wc-photos-all { display: grid; gap: 4px; }
.wc-photos-all .wc-ph { position: relative; display: block; }
.wc-photos-all img { height: auto; }
.ph-badge { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.ph-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: 26px; font-weight: 700; }
.wc-album { margin: 0; padding: 8px 14px 0; font-size: 13px; color: var(--faint); }
.wc-album a { font-weight: 600; }
.wc-story { display: flex; align-items: center; gap: 12px; margin: 10px 14px 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
.wc-story:hover { text-decoration: none; border-color: var(--accent); }
.wc-story > span:last-child { display: grid; min-width: 0; }
.wc-story b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-story span span { font-size: 13px; color: var(--faint); }
.wc-cover { width: 46px; flex: none; display: block; }
.wc-cover .cover .cv-g, .wc-cover .cover .cv-a, .wc-cover .cover .adult-badge, .wc-cover .cover .audio-badge, .wc-cover .cover .new-badge { display: none; }
.wc-cover .cover .cv-t { font-size: 7px; }
.wc-actions { display: flex; gap: 4px; padding: 6px 8px 8px; margin-top: 10px; border-top: 1px solid var(--line); }
.wc-btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); padding: 8px 6px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.wc-btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.wc-btn.liked { color: var(--mature); }
.wc-btn.off { cursor: default; color: var(--faint); font-weight: 500; }
.wc-btn.off:hover { background: none; }
.wc-chapter { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; }
.wc-chapter .wc-cover { width: 44px; }
.wc-chapter-text { display: grid; gap: 1px; min-width: 0; }
.wc-chapter-text .sub { font-size: 12.5px; color: var(--faint); display: flex; align-items: center; gap: 4px; }
.wc-chapter-text .sub a { color: inherit; font-weight: 600; }
.wc-chapter-text b { font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
.wc-ch-title { color: var(--ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* comments on a post */
.wc-comments { padding: 14px; gap: 12px; }
.wc-comments h2 { font-size: 19px; }
.pc { display: flex; gap: 8px; align-items: flex-start; }
.pc-body { min-width: 0; display: grid; gap: 2px; }
.pc-bubble { background: var(--surface-2); border-radius: 14px; padding: 8px 12px; }
.pc-bubble .name { font-weight: 650; font-size: 13.5px; color: var(--ink); }
.pc-bubble p { margin: 2px 0 0; font-size: 14.5px; overflow-wrap: anywhere; }
.pc-meta { font-size: 12px; color: var(--faint); padding-left: 10px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pc-meta form.inline { display: inline; }
.pc-meta .linkish { font-size: 12px; }
.pc-form { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
.pc-form textarea { flex: 1; min-width: 0; resize: none; border-radius: 18px; padding: 8px 14px; min-height: 38px; font: inherit; font-size: 15px; }

/* new post */
.compose { padding: 0 14px 14px; gap: 12px; }
.compose-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); margin-inline: -14px; padding-inline: 10px 12px; background: var(--surface); }
.compose-head h1 { font-size: 19px; margin: 0; }
.compose-head .btn[disabled] { opacity: .45; cursor: default; }
.compose-me { display: flex; gap: 10px; align-items: center; }
.compose-me > div { display: grid; gap: 3px; justify-items: start; }
.pill-select { width: auto; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 3px 28px 3px 10px; background-color: var(--surface-2); color: var(--ink); }
.compose textarea[data-compose-text] { border: 0; padding: 4px 0; font-size: 18px; resize: none; min-height: 96px; background: none; box-shadow: none; outline: none; }
.compose-count { font-size: 12.5px; color: var(--amber); text-align: right; }
.compose-photos { display: grid; gap: 8px; }
.compose-photos .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.compose-photos .thumbs:empty { display: none; }
.compose-photos .thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.compose-photos .thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-x { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 13px; cursor: pointer; display: grid; place-items: center; }
.add-photos { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 14px; cursor: pointer; font-weight: 600; color: var(--muted); }
.add-photos:hover { border-color: var(--accent); color: var(--accent); }
.add-photos svg { width: 22px; height: 22px; color: var(--ok); }
.add-photos input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.add-photos:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.compose-album { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.compose-album[hidden], .new-album[hidden] { display: none; }
.new-album { display: grid; gap: 4px; }
.hint { margin: 0; font-size: 13px; color: var(--muted); }
.hint:empty { display: none; }
.hint.warn { color: var(--amber); background: var(--amber-soft); padding: 8px 10px; border-radius: 8px; }
.compose-more summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); padding: 4px 0; }
.compose-more[open] { display: grid; gap: 10px; }

/* people rows (search, suggestions, followers) */
.people-list { gap: 0; padding: 4px 14px; }
.person-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.person-row:last-child { border-bottom: 0; }
.person-row .who { flex: 1; }
.person-row .who .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-row form { margin: 0; flex: none; }
.count-pill { display: inline-block; font-family: var(--body); font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 1px 9px; vertical-align: middle; }
.pref-end { display: flex; justify-content: flex-end; }
@media (max-width: 620px) { .pref-end { justify-content: flex-start; } }

/* Features page switches */
.feature-group { gap: 0; padding-block: 8px; }
.feature-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.feature-row:last-child { border-bottom: 0; }
.feature-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.feature-text b { font-size: 15px; }
.feature-text span { font-size: 13.5px; color: var(--muted); }
.feature-row form { margin: 0; }
.toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); padding: 4px; }
.toggle .track { width: 44px; height: 26px; border-radius: 999px; background: var(--surface-3); position: relative; transition: background .2s; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
.toggle[aria-checked="true"] .track { background: var(--ok); }
.toggle[aria-checked="true"] .track::after { left: 21px; }
.toggle[aria-checked="true"] .state { color: var(--ok); }
.toggle .state { min-width: 22px; text-align: left; }

/* checkbox shown as a switch (privacy) */
input[type="checkbox"].as-switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--surface-3); position: relative; cursor: pointer; transition: background .2s; margin: 0; flex: none; }
input[type="checkbox"].as-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
input[type="checkbox"].as-switch:checked { background: var(--ok); }
input[type="checkbox"].as-switch:checked::after { left: 21px; }
input[type="checkbox"].as-switch:disabled { opacity: .6; cursor: default; }
.story-places { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.story-places span { display: inline-flex; align-items: center; gap: 6px; }
.place-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.place-filters label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
.place-filters select { width: auto; min-width: 140px; }
.lock-mark { font-size: 16px; vertical-align: 4px; }

/* ===== Photos: strip in posts, viewer, albums, uploader ===== */
.back-link { font-weight: 600; font-size: 14px; justify-self: start; }
.wc-car { position: relative; background: var(--surface-2); }
.wc-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  aspect-ratio: var(--ratio, 1); max-height: 78vh; max-height: 78svh; }  /* svh: doesn't change when a phone's address bar slides away, so photos never resize while scrolling */
.wc-track::-webkit-scrollbar { display: none; }
.wc-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative; cursor: zoom-in; overflow: hidden; }
.wc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.wc-slide:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.wc-count { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.wc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: #111; font-size: 22px; line-height: 1; cursor: pointer; display: none; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.wc-arrow.prev { left: 10px; } .wc-arrow.next { right: 10px; }
@media (hover: hover) { .wc-car:hover .wc-arrow:not([hidden]) { display: grid; place-items: center; } }
.wc-dots { display: flex; justify-content: center; gap: 5px; padding: 8px 0 0; }
.wc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.wc-dots i.on { background: var(--accent); transform: scale(1.2); }
.heart-pop { position: absolute; inset: 0; display: grid; place-items: center; font-size: 84px; opacity: 0; pointer-events: none; transform: scale(.5); }
.heart-pop.go { animation: heartpop .8s ease forwards; }
@keyframes heartpop { 0% { opacity: 0; transform: scale(.5); } 20% { opacity: 1; transform: scale(1.1); } 40% { transform: scale(.95); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .heart-pop.go { animation-duration: .01s; } }

/* comment preview under Wall posts */
.wc-peek { display: grid; gap: 4px; padding: 0 14px 12px; }
.wc-pc { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.wc-pc a { color: var(--ink); }
.wc-more { font-size: 13px; color: var(--faint); }
.wc-quick { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.wc-quick input { flex: 1; min-width: 0; border: 0; background: var(--surface-2); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 14px; color: var(--ink); }
.wc-quick input:focus { outline: 2px solid var(--accent-soft); }
.wc-quick .linkish { font-weight: 700; color: var(--accent); }

/* post page comments */
.post-page { padding-bottom: 8px; }
.likers-line { font-size: 14px; color: var(--muted); }
.pc-thread { display: grid; gap: 8px; }
.pc-reply { margin-left: 36px; }
.pc .av.sm { width: 30px; height: 30px; font-size: 11px; }
.pc-author { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin-left: 6px; }
.pc-meta { gap: 10px; }
.pc-meta .linkish, .pc-like { font-size: 12px; font-weight: 700; color: var(--faint); }
.pc-like.liked { color: var(--mature); }
.pc-menu summary { list-style: none; cursor: pointer; padding: 0 4px; font-weight: 700; }
.pc-menu summary::-webkit-details-marker { display: none; }
.pc-menu .menu-panel { left: 0; right: auto; min-width: 150px; }
.pc-edit { display: grid; gap: 6px; margin-top: 4px; }
.pc-edit textarea { font: inherit; font-size: 14px; border-radius: 10px; padding: 6px 10px; resize: none; }
.pc-bar { position: sticky; bottom: 0; z-index: 15; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 6px; box-shadow: 0 -6px 18px -12px rgba(0,0,0,.35); }
@media (max-width: 760px) { .pc-bar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }
.pc-bar-row { display: flex; gap: 8px; align-items: flex-end; }
.pc-bar textarea { flex: 1; min-width: 0; resize: none; border-radius: 18px; padding: 8px 14px; min-height: 38px; font: inherit; font-size: 15px; }
.pc-replying { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); padding: 0 4px; }
.pc-replying[hidden] { display: none; }

/* the viewer */
html.pv-open { overflow: hidden; }
.pv { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; display: flex; flex-direction: column;
  transform: translateY(var(--pull, 0)); opacity: calc(1 - var(--pull, 0px) / 400px); transition: opacity .15s; }
.pv[hidden] { display: none; }
.pv-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 8px; position: relative; z-index: 2; }
.pv-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.pv-btn svg { width: 20px; height: 20px; }
.pv-title { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.pv-title b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-title > span { font-size: 12.5px; opacity: .75; }
.pv-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x pinch-zoom; }
.pv-track::-webkit-scrollbar { display: none; }
.pv-track.locked { overflow: hidden; touch-action: none; }
.pv-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; overflow: hidden; position: relative; }
.pv-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .25s; user-select: none; }
.pv-slide.zoomed { cursor: grab; }
.pv-slide.zoomed img { transition: none; }
.pv-partial img { filter: blur(28px); }
.pv-partial.revealed img { filter: none; }
.pv-veil { position: absolute; background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.pv-partial.revealed .pv-veil { display: none; }
.pv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; cursor: pointer; display: none; z-index: 2; }
.pv-nav.prev { left: 12px; } .pv-nav.next { right: 12px; }
@media (hover: hover) { .pv-nav:not([hidden]) { display: grid; place-items: center; } }
.pv-bottom { padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; background: linear-gradient(transparent, rgba(0,0,0,.75)); position: relative; z-index: 2; }
.pv-cap { margin: 0; font-size: 15px; max-height: 6em; overflow: auto; }
.pv-cap[hidden] { display: none; }
.pv-acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pv-like { border: 0; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-weight: 700; font-size: 15px; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.pv-like[aria-pressed="true"] { background: rgba(229,122,136,.25); }
.pv-link { color: #fff; opacity: .85; font-size: 14px; font-weight: 600; }
.pv-link:hover { opacity: 1; text-decoration: none; }
.pv-link[hidden], .pv-like[hidden] { display: none; }
.pv-report { margin-left: auto; opacity: .55; font-weight: 500; font-size: 13px; }
.pv-hint { margin: 0; font-size: 11.5px; opacity: .5; text-align: center; }
@media (hover: hover) { .pv-hint { display: none; } }

/* album cards */
.acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px 12px; }
.acard { display: grid; gap: 4px; color: var(--ink); min-width: 0; align-content: start; }
.acard:hover { text-decoration: none; }
.acard:hover .amosaic, .acard:hover .album-cover { box-shadow: 0 0 0 2px var(--accent); }
.amosaic { display: grid; gap: 2px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; transition: box-shadow .15s; }
.amosaic img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.amosaic.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.amosaic.n2 { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
.amosaic.n3 img:first-child { grid-row: span 2; }
.amosaic.big { aspect-ratio: 16 / 9; border-radius: 14px; }
.acard-t { font-weight: 650; font-size: 15px; line-height: 1.25; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.acard-s { font-size: 12.5px; color: var(--faint); }
.newbadge { color: var(--accent); font-weight: 700; }
.acard-by { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.albums-shelf .acard { width: 160px; flex: none; }

/* album page */
.album-page { max-width: 720px; margin-inline: auto; gap: 14px; }
.album-head { display: grid; gap: 10px; }
.album-head h1 { font-size: clamp(26px, 5vw, 34px); margin: 0; }
.album-owner { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.album-owner > span { display: grid; line-height: 1.3; }
.album-owner:hover { text-decoration: none; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
@media (max-width: 620px) { .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-inline: -14px; } }
.ag-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.ag-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
@media (hover: hover) { .ag-tile:hover img { transform: scale(1.04); } }
.ag-tile.is-pending img { opacity: .6; }
.ag-tile .lk { position: absolute; left: 6px; bottom: 4px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* uploader */
.up-drop { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 22px 16px; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; color: var(--muted); position: relative; }
.up-drop:hover, .up-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.up-drop svg { width: 30px; height: 30px; color: var(--ok); }
.up-drop b { color: var(--ink); font-size: 16px; }
.up-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.up-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.up-tip { margin: 0; }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.up-tile { display: grid; gap: 4px; position: relative; min-width: 0; }
.up-tile.dragging { opacity: .55; }
.up-img { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.up-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-st { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; font-weight: 700; color: #fff; padding: 4px 7px; background: rgba(0,0,0,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-st.st-approved { background: rgba(44,122,75,.85); }
.up-tile.bad .up-st, .up-st.st-rejected { background: rgba(174,52,69,.9); white-space: normal; }
.up-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.3); }
.up-bar i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .2s; }
.up-tile.uploading .up-st { bottom: 4px; }
.up-cover { position: absolute; top: 6px; left: 6px; font-size: 10.5px; font-weight: 700; background: var(--accent); color: var(--accent-ink); padding: 2px 7px; border-radius: 999px; }
.up-handle { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 16px; cursor: grab; touch-action: none; }
.up-cap { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-menu { position: absolute; top: 5px; left: 5px; }
.up-menu > summary { width: 30px; height: 30px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-weight: 700; }
.up-tile:has(.up-cover) .up-menu { top: 30px; }
.up-menu .menu-panel { left: 0; right: auto; min-width: 210px; }
.up-capform { display: flex; gap: 6px; padding: 6px; }
.up-capform input { flex: 1; min-width: 0; padding: 5px 8px; font-size: 13px; }
.compose-photos .thumb { overflow: visible; }
.compose-photos .thumb img { border-radius: 10px; }
.thumb-cap { position: absolute; left: 4px; right: 4px; bottom: 4px; width: calc(100% - 8px); font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 6px; border: 0; background: rgba(0,0,0,.6); color: #fff; }
.thumb-cap::placeholder { color: rgba(255,255,255,.75); }
.compose-photos .thumb input[type="text"].thumb-cap { height: 26px; min-height: 0; padding: 2px 7px; font-size: 12px; line-height: 1.2; border-radius: 7px; border: 0; box-shadow: none; background: rgba(0,0,0,.62); color: #fff; }

/* Account menu on phones: the top bar stays on screen, so the menu scrolls inside the space between it and the
   bottom bar (Settings and Sign out were cut off before). */
@media (max-width: 760px) {
  #account-menu .menu-panel { position: fixed; top: calc(56px + env(safe-area-inset-top, 0px)); right: 8px; left: auto;
    width: min(300px, calc(100vw - 16px)); max-height: calc(100dvh - 56px - 76px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #account-menu .menu-panel a, #account-menu .menu-panel button { padding: 11px 12px; font-size: 15px; }
}

/* ===== App frame on phones ===== */
.bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600;
  color: var(--faint); padding: 4px 0; text-decoration: none; background: none; border: 0; font-family: inherit; cursor: pointer; min-height: 48px;
  -webkit-tap-highlight-color: transparent; }
.bottom-nav button svg, .bottom-nav a svg { width: 22px; height: 22px; }
.bottom-nav .write svg { background: var(--accent); color: var(--accent-ink); border-radius: 11px; padding: 4px; width: 40px; height: 30px; }
.bottom-nav a:active, .bottom-nav button:active { transform: scale(.92); }
.bottom-nav a.on { color: var(--accent); }
.tab-av { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.tab-av .av.xs { width: 24px; height: 24px; font-size: 9px; }
.bottom-nav a.on .tab-av .av { box-shadow: 0 0 0 2px var(--accent); }
.tab-dot { position: absolute; top: -2px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--mature); border: 2px solid var(--surface); }
.av.xs { width: 24px; height: 24px; font-size: 9px; }
.tab-title { font-size: 30px; margin: 0; }
.apphead-back, .apphead-title { display: none; }
@media (max-width: 760px) {
  .hide-phone { display: none !important; }
  .back-link { display: none; }
  .topbar:has(.apphead-back) .logo { display: none; }
  .apphead-back { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border-radius: 50%; color: var(--ink); flex: none; }
  .apphead-back:active { background: var(--surface-2); }
  .apphead-back svg { width: 22px; height: 22px; }
  .apphead-title { display: block; font-weight: 700; font-size: 16.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
  .topbar:has(.apphead-back) .sp { display: none; }
  .topbar .icon-link { width: 40px; height: 40px; }
  .topbar .icon-link svg { width: 22px; height: 22px; }
  .topbar { transition: transform .25s ease; }
  .topbar.hide { transform: translateY(-100%); }
  .btn, .chip, .linkish { -webkit-tap-highlight-color: transparent; }
  .btn:active, .chip:active, .me-tile:active, .me-row:active, .bs-opt:active { transform: scale(.97); }
}

/* bottom sheets (Create, ⋯ menus) */
dialog.bsheet { margin: auto auto 0; width: 100%; max-width: 560px; max-height: 88dvh; border: 0; padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0; background: var(--surface); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
dialog.bsheet[open] { display: grid; gap: 4px; animation: sheetup .22s ease-out; }
dialog.bsheet::backdrop { background: rgba(0,0,0,.45); }
@keyframes sheetup { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
.bsheet-grab { width: 42px; height: 5px; border-radius: 3px; background: var(--line); justify-self: center; margin: 4px 0 10px; }
.bsheet-list { display: grid; gap: 2px; }
.bs-opt { display: flex; gap: 14px; align-items: center; padding: 10px 6px; border-radius: 14px; color: var(--ink); }
.bs-opt:hover { background: var(--surface-2); text-decoration: none; }
.bs-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; font-size: 21px; flex: none; }
.bs-opt b { display: block; font-size: 15.5px; }
.bs-opt span span { font-size: 13px; color: var(--faint); }
.bsheet-close { margin-top: 6px; width: 100%; }
@media (min-width: 761px) { dialog.bsheet { margin: auto; border-radius: 22px; } }
@media (max-width: 760px) {
  /* ⋯ menus on posts, comments, albums and photos open as bottom sheets with a dimmed page behind */
  details.wc-menu[open] > summary::before, details.pc-menu[open] > summary::before, details.up-menu[open] > summary::before, details.msg-menu[open] > summary::before {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 89; cursor: default; }
  .wc-menu .menu-panel, .pc-menu .menu-panel, .up-menu .menu-panel, .msg-menu .menu-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 90; min-width: 0;
    border-radius: 20px 20px 0 0; padding: 14px 10px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 80dvh; overflow: auto; animation: sheetup .2s ease-out; }
  .wc-menu .menu-panel a, .wc-menu .menu-panel button, .pc-menu .menu-panel a, .pc-menu .menu-panel button,
  .up-menu .menu-panel a, .up-menu .menu-panel button, .msg-menu .menu-panel > a, .msg-menu .menu-panel > button, .msg-menu .menu-panel form button { padding: 14px 14px; font-size: 16px; border-radius: 12px; }
  .msg-react-row button { font-size: 28px !important; }
}

/* Discover */
.discover { gap: 18px; }
.discover-search { position: relative; display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid transparent; border-radius: 14px; padding: 0 14px; }
.discover-search:focus-within { border-color: var(--accent); background: var(--surface); }
.discover-search svg { width: 20px; height: 20px; color: var(--faint); flex: none; }
.discover-search input { border: 0; background: none; padding: 12px 0; font: inherit; font-size: 16px; width: 100%; color: var(--ink); outline: none; box-shadow: none; }
.genre-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.genre-tile { background: var(--g); border-radius: 14px; min-height: 72px; padding: 12px; display: flex; align-items: flex-end; color: #fff; font-weight: 700; font-size: 15px; line-height: 1.2; box-shadow: inset 0 -30px 40px -20px rgba(0,0,0,.35); }
.genre-tile:hover { text-decoration: none; filter: brightness(1.08); }
@media (max-width: 420px) { .genre-tiles { grid-template-columns: 1fr 1fr; } }
.help-links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--faint); padding: 8px 0 4px; }
.help-links a { color: var(--muted); }

/* Me */
.me-page { gap: 16px; }
.me-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; color: var(--ink); }
.me-card:hover { text-decoration: none; border-color: var(--accent); }
.me-card .av.lg { width: 62px; height: 62px; font-size: 21px; border: 0; }
.me-card > span { display: grid; gap: 2px; min-width: 0; }
.me-card b { font-size: 18px; }
.me-stats { display: flex; gap: 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.me-stats b { font-size: 13px; color: var(--ink); }
.me-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.me-tile { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; text-align: center; min-height: 84px; padding: 10px 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.2; }
.me-tile:hover { text-decoration: none; border-color: var(--accent); }
.me-tile i { font-style: normal; font-size: 24px; line-height: 1; }
.me-tile em { font-style: normal; font-size: 11px; color: var(--faint); font-weight: 500; }
.me-tile .b { position: absolute; top: 7px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mature); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.me-list { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; display: grid; overflow: hidden; }
.me-list form { margin: 0; }
.me-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--ink); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; }
.me-list > :first-child, .me-list > :first-child .me-row { border-top: 0; }
.me-row:hover { background: var(--surface-2); text-decoration: none; }
.me-row > span[aria-hidden] { color: var(--faint); font-size: 20px; }
.me-row .adult-form, .me-row .adult-form .switch { width: 100%; }
.me-row .switch { justify-content: space-between; font-size: 15.5px; color: var(--ink); padding: 0; }
.me-theme { justify-content: flex-start; }
.me-row[hidden] { display: none; }

/* "Load more" while loading: the button just shows its spinner, same size, so nothing on the page moves or flashes */
.load-more.htmx-request { position: relative; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* pull to refresh (installed app) */
.ptr { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 60; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; color: var(--accent); font-size: 20px; transform: translateY(-60px); opacity: 0; transition: opacity .15s; pointer-events: none; }
.ptr.ready { color: var(--ok); }
.ptr.spin span { animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* install card on Home */
.install-card { display: flex; gap: 12px; align-items: center; background: var(--ink); color: var(--bg); border-radius: 16px; padding: 12px 14px; }
.install-card[hidden] { display: none; }
.install-card > span:first-child { font-size: 24px; }
.install-card .t { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
.install-card .t b { display: block; font-size: 14.5px; }
.install-card .btn { flex: none; }
.install-card .x { background: none; border: 0; color: inherit; opacity: .7; font-size: 18px; cursor: pointer; padding: 4px; }

/* smooth page changes: the bars stay, the page fades */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.bottom-nav { view-transition-name: tabbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ===== Full-screen reading on phones ===== */
.rtop { display: none; }
@media (max-width: 760px) {
  body.reading .topbar { display: none; }
  body.reading .reader-crumb { display: none; }
  .rtop { display: flex; align-items: center; gap: 4px; position: fixed; top: 0; left: 0; right: 0; z-index: 45; padding: calc(4px + env(safe-area-inset-top, 0px)) 6px 4px;
    background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
    transition: transform .25s ease, opacity .25s ease; }
  .rtop-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: none; border: 0; font: inherit; font-weight: 700; font-size: 16px; flex: none; cursor: pointer; }
  .rtop-btn:active { background: var(--surface-2); }
  .rtop-btn svg { width: 22px; height: 22px; }
  .rtop-title { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
  .rtop-title b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rtop-title span { font-size: 12px; color: var(--faint); }
  body.reading .reader-shell { padding-top: calc(54px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 84px !important; }
  body.reading .reader-progress { z-index: 46; top: 0; }
  /* the actions become a full-width bar at the bottom */
  body.reading .rail { position: fixed; top: auto; display: flex; flex-direction: row; align-items: center; z-index: 40; left: 0; right: 0; bottom: 0; transform: none; border-radius: 0; border: 0; border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; gap: 0; box-shadow: none;
    background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: transform .25s ease, opacity .25s ease; }
  body.reading .rail > * { flex: 1; }
  body.reading .rail .rail-btn { width: auto; height: 48px; border: 0; border-radius: 12px; background: none; font-size: 11px; font-weight: 600; }
  body.reading .rail .rail-btn svg { width: 21px; height: 21px; }
  body.reading.chrome-off .rtop { transform: translateY(-100%); opacity: 0; pointer-events: none; }
  body.reading.chrome-off .rail { transform: translateY(100%); opacity: 0; pointer-events: none; }
  body.reading .mini-player { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}
.rail-phone { display: none; }
@media (max-width: 760px) { body.reading .rail-phone { display: grid; } }
@media (max-width: 760px) { .topbar .icon-link.hide-phone, .topbar .hide-phone { display: none !important; } }
@media (max-width: 760px) {
  .genre-tiles { grid-template-columns: none; grid-template-rows: repeat(2, 68px); grid-auto-flow: column; grid-auto-columns: 40%;
    overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; scroll-snap-type: x proximity; }
  .genre-tiles::-webkit-scrollbar { display: none; }
  .genre-tile { min-height: 0; scroll-snap-align: start; font-size: 14px; }
}
@media (max-width: 760px) { body:has(.apphead-back) .crumbs { display: none; } }
/* The editor's save bar sits just above the bottom tab bar on phones. */
@media (max-width: 760px) { .editor-bar { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 760px) {
  body.typing .bottom-nav { display: none !important; }
  body.typing .editor-bar { bottom: env(safe-area-inset-bottom, 0px); }
  body.typing .pc-bar { bottom: 0; }
}

/* Story cards on the Wall (new chapters, and stories linked in posts) */
.wc-book { padding-bottom: 12px; }
.book-row { display: flex; gap: 14px; padding: 4px 14px 0; color: var(--ink); align-items: flex-start; }
.book-row:hover { text-decoration: none; }
.book-row:hover .book-title { color: var(--accent); }
.book-cover { width: 92px; flex: none; }
.book-cover .cover { box-shadow: var(--book-shadow); }
.book-cover .cover .cv-a, .book-cover .cover .cv-g, .book-cover .cover .new-badge { display: none; }
.book-info { display: grid; gap: 3px; min-width: 0; align-content: start; padding-top: 2px; }
.book-genre { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.book-title { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.15; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-line { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.book-blurb { font-size: 13.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.book-meta { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.book-acts { display: flex; gap: 8px; padding: 12px 14px 0; flex-wrap: wrap; }
.book-acts .btn { flex: 1; justify-content: center; min-height: 40px; }
.wc-storybox { margin: 10px 14px 0; padding: 10px 0 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.wc-storybox .book-row { padding: 0 12px; }
.wc-storybox .book-cover { width: 70px; }
.wc-storybox .book-title { font-size: 17px; }
.wc-storybox .book-meta { color: var(--accent); font-weight: 600; }

/* ===== Computers: side bar for members ===== */
.sidenav { display: none; }
@media (min-width: 1024px) {
  body.signed-in { --side-w: 248px; padding-left: var(--side-w); }
  body.signed-in .sidenav { display: flex; flex-direction: column; gap: 6px; position: fixed; z-index: 35; left: 0; top: 0; bottom: 0; width: var(--side-w);
    padding: 18px 14px 14px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
  body.signed-in .side-dup, body.signed-in .topbar .logo, body.signed-in .topbar .nav { display: none !important; }
  body.signed-in .topbar-inner { max-width: 1240px; }
  body.signed-in .search-box { flex: 1; max-width: 560px; }
  body.signed-in .search-box input { width: 100%; }
  body.signed-in .wrap { max-width: 1240px; }
}
.sn-logo { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 22px; color: var(--ink); padding: 4px 12px 16px; }
.sn-logo:hover { text-decoration: none; }
.sn-logo .mark { width: 15px; height: 22px; color: var(--accent); }
.sn-links { display: grid; gap: 2px; width: 100%; }
.sn-links a, .sn-links summary { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; color: var(--ink);
  font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; }
.sn-links summary::-webkit-details-marker { display: none; }
.sn-links a:hover, .sn-links summary:hover { background: var(--surface-2); text-decoration: none; }
.sn-links a.on, .sn-links summary.on, .sn-notes[open] > summary { background: var(--accent-soft); color: var(--accent); }
.sn-links svg { width: 23px; height: 23px; flex: none; }
.sn-links > a > span, .sn-links summary > span { flex: 1; }
.sn-links em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--mature); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sn-create { margin: 12px 0 6px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.sn-create:hover { background: var(--accent-hover); }
.sn-create svg { width: 20px; height: 20px; }
.sn-me { margin-top: auto; width: 100%; }
.sn-me > summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; position: relative; }
.sn-me > summary:hover { background: var(--surface-2); }
.sn-me-name { display: grid; line-height: 1.25; min-width: 0; flex: 1; }
.sn-me-name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-me-name span { font-size: 12.5px; color: var(--faint); }
.sn-me .menu-panel { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; min-width: 240px; }
.sn-me .tab-dot { top: 6px; right: 6px; }
/* notifications panel beside the side bar */
.sn-notes { position: relative; }
.sn-panel { position: fixed; left: 256px; top: 16px; width: 380px; max-height: calc(100vh - 32px); overflow-y: auto; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; }
.np-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 10px; }
.np-head b { font-size: 16px; }
.np-empty { color: var(--muted); padding: 12px; margin: 0; font-size: 14px; }
.sn-panel .notes { margin: 0; }
@media (min-width: 1024px) {
  body.signed-in .topbar .sp { display: none; }
  body.signed-in .search-box { flex: 1 1 560px; }
  body.signed-in .top-actions { margin-left: auto; }
}

/* right column (Wall, Home) */
.side-rail { display: none; }
@media (min-width: 1200px) {
  body.signed-in .with-rail { display: grid; grid-template-columns: minmax(0, 620px) 310px; gap: 36px; justify-content: center; align-items: start; }
  body.signed-in .with-rail.home-rail { grid-template-columns: minmax(0, 1fr) 300px; }
  body.signed-in .with-rail .wall { margin: 0; max-width: none; }
  body.signed-in .side-rail { display: grid; gap: 16px; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 12px; }
}
.rail-box { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; }
.rail-box h2 { font-family: var(--body); font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin: 0; }
.rail-story { display: flex; gap: 12px; align-items: center; color: var(--ink); min-width: 0; }
.rail-story:hover { text-decoration: none; }
.rail-story:hover b { color: var(--accent); }
.rail-cover { width: 40px; flex: none; }
.rail-cover .cover .cv-a, .rail-cover .cover .cv-g, .rail-cover .cover .cv-t, .rail-cover .cover .adult-badge, .rail-cover .cover .audio-badge, .rail-cover .cover .new-badge { display: none; }
.rail-story > span:last-child { display: grid; gap: 1px; min-width: 0; }
.rail-story b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-story span span { font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-bar { height: 4px; border-radius: 2px; background: var(--surface-2); margin-top: 4px; overflow: hidden; }
.rail-bar i { display: block; height: 100%; background: var(--accent); }
.rail-post { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 13.5px; line-height: 1.4; }
.rail-post:hover { text-decoration: none; background: var(--surface-2); }
.rail-more { font-size: 13px; font-weight: 600; }
.side-rail .people-list { padding: 0; }
.side-rail .person-row { padding: 8px 0; }
.side-rail .person-row .who .sub { max-width: 150px; }
.side-rail .help-links { padding: 0 4px; font-size: 12px; }
/* tall photos: keep them within the screen on computers */
@media (min-width: 761px) { .wc-track { max-height: 70vh; max-height: 70svh; } }

/* A post's own page: one column on phones; on computers a post with photos has the photos on the left and the
   words, likes and comments on the right. */
.post-page { max-width: 620px; margin-inline: auto; }
.post-stage { display: none; }
@media (min-width: 1024px) {
  .post-page { max-width: 1180px; }
  .post-solo { max-width: 640px; margin-inline: auto; display: grid; gap: 14px; }
  .post-split { display: grid; grid-template-columns: minmax(0, 1fr) 410px; grid-template-rows: minmax(0, 1fr); height: calc(100vh - 150px); min-height: 520px;
    border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
  .post-stage { display: block; position: relative; background: #0E0F12; min-width: 0; min-height: 0; overflow: hidden; }
  .post-stage .wc-car { height: 100%; background: transparent; }
  .post-stage .wc-track { aspect-ratio: auto; height: 100%; max-height: none; }
  .post-stage .wc-slide img { object-fit: contain; }
  .post-stage .wc-dots { position: absolute; left: 0; right: 0; bottom: 14px; }
  .post-stage .wc-dots i { background: rgba(255,255,255,.35); }
  .post-stage .wc-dots i.on { background: #fff; }
  .post-stage .wc-arrow:not([hidden]) { display: grid; place-items: center; }
  .post-split .post-side { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-width: 0; min-height: 0; padding-bottom: 0; }
  .post-split .post-side > .wall-card { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
  .post-split .post-side .wc-car, .post-split .post-side .wc-dots { display: none; }
  .post-split .post-side .likers-line { padding: 0 14px; }
  .post-split .wc-comments { border: 0; border-radius: 0; flex: 1 0 auto; align-content: start; }
  .post-split .pc-bar { position: sticky; bottom: 0; border-radius: 0; border-width: 1px 0 0; box-shadow: none; margin-top: auto; }
}

/* Messages: one screen at a time on phones; list and conversation side by side on computers */
.msg-empty-pane, .msg-layout.in-thread > .msg-list-pane, .msg-list-title { display: none; }
@media (min-width: 1024px) {
  html:has(.msg-layout) { overflow: hidden; }  /* only the conversation list and the chat scroll, never the page */
  body:has(.msg-layout) .footer { display: none; }
  .msg-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: var(--fit-h, calc(100vh - 170px)); min-height: 0;
    border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
  .msg-layout.in-thread { height: var(--fit-h, calc(100vh - 110px)); }
  .msg-layout > .msg-list-pane, .msg-layout.in-thread > .msg-list-pane { display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--line); overflow-y: auto; padding: 12px; }
  .msg-list-title { display: block; font-size: 20px; margin: 4px 4px 0; }
  .msg-list-pane .notes a.current { background: var(--accent-soft); }
  .msg-empty-pane { display: grid; place-items: center; padding: 24px; }
  .msg-empty-pane .empty { border: 0; }
  .msg-thread-pane { display: flex; flex-direction: column; padding: 14px 18px; min-height: 0; }
  .msg-thread-pane .thread { flex: 1; max-height: none; min-height: 0; }
  .msg-back { display: none; }
}
.msg-thread-pane { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1023px) {
  /* One conversation fills the screen like a chat app: messages from the bottom up, the typing box held at the bottom */
  .msg-thread-pane { min-height: calc(100dvh - 92px - env(safe-area-inset-top, 0px)); }
  .msg-thread-pane .thread { flex: 1; justify-content: flex-end; max-height: none; overflow: visible; background: none; border: 0; padding: 4px 0; }
  .msg-thread-pane .composer { position: sticky; bottom: 0; z-index: 5; background: var(--bg); margin: 0 -16px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .msg-head { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 6; background: var(--bg); padding: 6px 0; }
  .msg-head:has(details[open]) { z-index: 40; }  /* its ⋯ sheet dims the whole screen, top bar included */
}
body.thread-page, body.thread-page main { padding-bottom: 0; }  /* no tab bar while in a conversation */
.sn-panel .notes { border: 0; border-radius: 12px; }
.sn-panel .notes a { padding: 10px 10px; gap: 10px; }
.sn-panel .note-text { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 14px; text-align: left; }
.studio-kpis .kpi { color: var(--ink); }
.studio-kpis .kpi:hover { text-decoration: none; border-color: var(--accent); }
.studio-kpis em.up { font-style: normal; color: var(--ok); font-weight: 700; }
.work-card .row form { margin: 0; }
@media (min-width: 1100px) { .work-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1024px) {
  .album-page { max-width: 1180px; }
  .album-head { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: 28px; align-items: end; }
  .album-head > .amosaic { grid-row: 1 / span 6; aspect-ratio: 16 / 10; }
  .album-head > :not(.amosaic) { grid-column: 2; }
  .album-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
  .ag-tile { border-radius: 6px; }
}
.side-start { display: none; }
@media (min-width: 1024px) {
  .story-side { position: sticky; top: 80px; align-self: start; }
  .side-start { display: flex; width: 100%; }
}
@media (min-width: 1100px) {
  .prof-cols { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; border-top: 1px solid var(--line); }
  .prof-info { border-right: 1px solid var(--line); padding-block: 8px; position: sticky; top: 70px; }
  .prof-info .stats { flex-wrap: wrap; row-gap: 12px; }
  .prof-body > .tabs { border-top: 0; }
}
/* All stories and genre pages: filters in a left column on computers */
.browse-filters { display: none; }
@media (min-width: 1024px) {
  .browse-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
  .browse-filters { display: grid; gap: 20px; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
  .browse-sort, .browse-chips { display: none !important; }
}
.bf-group { display: grid; gap: 2px; }
.bf-title { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding: 0 10px 4px; }
.bf-group a { padding: 7px 10px; border-radius: 9px; color: var(--ink); font-size: 14.5px; }
.bf-group a:hover { background: var(--surface-2); text-decoration: none; }
.bf-group a.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.charcount { display: block; font-size: 12.5px; color: var(--faint); margin-top: 4px; text-align: right; }
.charcount.low { color: var(--amber); }
.charcount.over { color: var(--mature); font-weight: 700; }
.charcount.ok { color: var(--ok); }
.form-row:has(.errorlist) input, .form-row:has(.errorlist) textarea, .form-row:has(.errorlist) select,
.form-row:has(.errorlist) .cat-picker { border-color: var(--mature) !important; box-shadow: 0 0 0 3px var(--mature-soft); }
.form-row:has(.errorlist) > label, .form-row:has(.errorlist) > span:first-child { color: var(--mature); }
.errorlist { color: var(--mature); font-weight: 600; font-size: 13.5px; }
.confirm-sheet h2 { font-size: 22px; margin: 0 0 6px; }
.confirm-sheet p { margin: 0 0 12px; }
.work-card .wc-menu summary { width: 32px; height: 32px; }
.report-link { white-space: nowrap; }
.report-sheet .report-body, .report-body { display: grid; gap: 10px; }
.report-title { font-size: 22px; margin: 0; }
.report-reasons { display: grid; gap: 2px; }
.report-reasons label { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 15px; }
.report-reasons label:hover { background: var(--surface-2); }
.report-reasons label:has(input:checked) { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.report-reasons input { accent-color: var(--accent); width: 18px; height: 18px; }
.report-done { text-align: center; display: grid; gap: 8px; justify-items: center; padding: 10px 0; }
.report-done .big { font-size: 34px; margin: 0; color: var(--ok); }

/* Photos on computers: the whole photo, never cropped, over a soft blurred copy of itself */
.wc-bg { display: none; }
@media (min-width: 761px) {
  .wc-track { width: 100%; }
  .wc-slide { background: #111; }
  .wc-bg { display: block; position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(22px) brightness(.7); }
  .wc-slide img { position: relative; object-fit: contain; }
}
/* the full-screen viewer: the photo always fits the screen; thumbnails underneath on computers */
.pv-slide { height: 100%; }
.pv-slide img { max-height: calc(100dvh - 190px); }
.pv-thumbs { display: none; }
@media (hover: hover) and (min-width: 761px) {
  .pv-slide img { max-height: calc(100dvh - 230px); max-width: calc(100vw - 160px); cursor: zoom-in; }
  .pv-slide { cursor: zoom-out; }
  .pv-nav { width: 52px; height: 52px; font-size: 32px; }
  .pv-thumbs { display: flex; gap: 6px; justify-content: center; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
  .pv-thumbs:empty { display: none; }
  .pv-thumb { flex: none; width: 52px; height: 52px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; padding: 0; background: #222; cursor: pointer; opacity: .55; }
  .pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .pv-thumb.on { border-color: #fff; opacity: 1; }
  .pv-thumb:hover { opacity: .9; }
  .pv-hint { display: none; }
}
[data-live][hidden] { display: none !important; }


/* The slim side bar (smaller laptops, and while reading a chapter): icons only, opening to full width with labels
   while the pointer is over it (or keyboard focus is in it). It floats over the page, so nothing moves. */
@media (min-width: 1024px) and (max-width: 1279px) { body.signed-in { --side-w: 76px; } }
@media (min-width: 1024px) { body.signed-in.reading { --side-w: 76px; } }
@media (min-width: 1024px) {
  body.signed-in .sidenav { transition: width .18s ease, box-shadow .18s ease; }
  body.signed-in .sidenav:is(:hover, :focus-within, :has(details[open])) { width: 248px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.signed-in .sidenav:not(:hover):not(:focus-within):not(:has(details[open])) { padding-inline: 10px; align-items: center; }
  body.signed-in .sidenav:not(:hover):not(:focus-within):not(:has(details[open])) :is(.sn-logo span, .sn-links > a > span, .sn-links summary > span, .sn-create span, .sn-me-name, .sn-more) { display: none; }
  body.signed-in .sidenav:not(:hover):not(:focus-within):not(:has(details[open])) :is(.sn-links a, .sn-links summary) { justify-content: center; padding: 11px; }
  body.signed-in .sidenav:not(:hover):not(:focus-within):not(:has(details[open])) .sn-links em { position: absolute; top: 2px; right: 2px; }
  body.signed-in .sidenav:not(:hover):not(:focus-within):not(:has(details[open])) .sn-create { width: 48px; height: 48px; padding: 0; }
  body.signed-in .sidenav:is(:hover, :focus-within, :has(details[open])) { box-shadow: 8px 0 30px -12px rgba(0,0,0,.3); }
}
@media (min-width: 1024px) {
  body.signed-in.reading .sidenav:not(:hover):not(:focus-within):not(:has(details[open])) { padding-inline: 10px; align-items: center; }
  body.signed-in.reading .sidenav:not(:hover):not(:focus-within):not(:has(details[open])) :is(.sn-logo span, .sn-links > a > span, .sn-links summary > span, .sn-create span, .sn-me-name, .sn-more) { display: none; }
  body.signed-in.reading .sidenav:not(:hover):not(:focus-within):not(:has(details[open])) :is(.sn-links a, .sn-links summary) { justify-content: center; padding: 11px; }
  body.signed-in.reading .sidenav:not(:hover):not(:focus-within):not(:has(details[open])) .sn-links em { position: absolute; top: 2px; right: 2px; }
  body.signed-in.reading .sidenav:not(:hover):not(:focus-within):not(:has(details[open])) .sn-create { width: 48px; height: 48px; padding: 0; }
  body.signed-in.reading .sidenav:is(:hover, :focus-within, :has(details[open])) { box-shadow: 8px 0 30px -12px rgba(0,0,0,.3); }
  body.signed-in.reading .reader-progress { left: var(--side-w); }
  body.signed-in .sidenav { white-space: nowrap; overflow-x: hidden; }
}
/* Phone reading bar: a word under each control, so it reads as reading controls rather than a menu */
@media (max-width: 760px) {
  body.reading .rail .rail-btn { display: grid; justify-items: center; align-content: center; gap: 1px; height: 52px; }
  body.reading .rail .rail-btn br { display: none; }
  body.reading .rail .rail-btn > span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
  body.reading .rail .rail-btn[data-label]::after { content: attr(data-label); font-size: 10.5px; font-weight: 600; color: var(--faint); }
}
/* Rounded search boxes: the field inside has no square border or glow of its own; the rounded box shows focus */
.people-search input, .discover-search input { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
.people-search input:focus, .discover-search input:focus { border: 0; box-shadow: none; outline: none; }
/* The small "who can see this" picker: our own arrow with room around it */
.pill-select { appearance: none; -webkit-appearance: none; padding: 5px 30px 5px 12px; line-height: 1.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23656b79' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }

/* --- Privacy: story audience note, follower groups ---------------------------------------------------------- */
.aud-warn { display: none; margin: 4px 0 0; }
.form-row:has(input[name="audience"][value="followers"]:checked) .aud-warn,
.form-row:has(input[name="audience"][value^="group"]:checked) .aud-warn { display: block; }
.find-choices { display: grid; gap: 8px; padding-block: 10px 6px; }
.find-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.find-choice input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.find-choice > span { display: grid; gap: 2px; }
.find-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pref-link { color: inherit; text-decoration: none; }
.pref-link:hover b { text-decoration: underline; }
.pref-link .pref-end { justify-self: end; display: inline-flex; gap: 8px; align-items: center; font-size: 20px; color: var(--muted); }
.pref-link .count-pill { font-size: 12px; }
@media (max-width: 620px) { .pref-link { grid-template-columns: minmax(0, 1fr) auto; } }
.group-list { display: grid; gap: 0; }
.group-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.group-row:last-child { border-bottom: 0; }
.group-row .ge { font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); flex: none; }
.group-row .gn { flex: 1; min-width: 0; display: grid; align-content: center; gap: 1px; }
.group-row .chev { color: var(--muted); font-size: 20px; }
.emoji-pick { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.emoji-pick label { cursor: pointer; }
.emoji-pick input { position: absolute; opacity: 0; pointer-events: none; }
.emoji-pick span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); font-size: 20px; }
.emoji-pick input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.emoji-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.member-search { width: 100%; }
.member-list { display: grid; max-height: 60vh; overflow: auto; }
.member-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.member-row:last-child { border-bottom: 0; }
.member-row .who { flex: 1; min-width: 0; display: grid; align-content: center; gap: 1px; line-height: 1.3; }
.member-row .who .sub { color: var(--muted); font-size: 13px; }
.member-row input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.member-row[hidden] { display: none; }
.group-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.aud-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aud-groups { font-size: 13px; font-weight: 600; }

/* --- Suggestions (stories/taste.py) ------------------------------------------------------------------------- */
.pick-card { position: relative; display: flex; flex-direction: column; min-width: 0; flex: 0 0 140px; scroll-snap-align: start; }
@media (max-width: 560px) { .pick-card { flex-basis: 116px; } }
.pick-card .why { font-size: 12.5px; font-weight: 600; color: var(--accent); line-height: 1.3; }
.pick-more { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px); }
.pick-more:hover, .pick-more:focus-visible { background: rgba(0,0,0,.7); }
/* The ⋯ shares the top-right corner with the 18+ badge: keep it on top and the badge beside it, and keep the card
   lifted while the pointer is on the ⋯ (otherwise the cover dropping and rising under the pointer made it flicker). */
.pick-more { z-index: 3; transition: transform .15s; }
.pick-card .adult-badge { right: 36px; }
.pick-card:hover .cover { transform: translateY(-3px); box-shadow: 0 2px 2px rgba(0,0,0,.08), 0 18px 30px -14px rgba(0,0,0,.55); }
.pick-card:hover .pick-more { transform: translateY(-3px); }
.pick-sheet-title { font-family: var(--display); font-weight: 400; font-size: 20px; margin: 0 4px 6px; }
.pick-why { cursor: default; }
button.bs-opt { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.taste-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.taste-bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.chip-x button { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.chip-x button:hover { background: var(--surface-2); color: var(--ink); }
.chip-x { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.taste-list { display: grid; }
.taste-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.mode-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.mode-switch button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.mode-switch button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.trow { display: grid; grid-template-columns: minmax(96px, 170px) minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.trow:first-child { border-top: 0; }
.trow.manual { grid-template-columns: minmax(96px, 170px) minmax(0, 1fr) auto; }
.trow-name { font-weight: 600; font-size: 14.5px; min-width: 0; display: grid; line-height: 1.3; }
.trow-src { font-weight: 400; font-size: 12px; color: var(--faint); }
.taste-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.taste-bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.trow.manual .fader { grid-column: 2; }
.trow.manual .fader-off { grid-column: 2; grid-row: 1; justify-self: start; font-size: 11px; font-weight: 700; color: var(--mature); pointer-events: none; transform: translateY(-15px); }
.trow-x { background: none; border: 0; color: var(--faint); font-size: 15px; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.trow-x:hover { background: var(--surface-2); color: var(--ink); }
.taste-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.add-genre { margin-left: auto; flex: none; }
/* Mixer-style fader: a groove with marks, filled to the value, and a ribbed cap you drag. */
.fader { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.fader:focus-visible { outline: none; }
.fader::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
  background: linear-gradient(var(--accent), var(--accent)) 0 / var(--v, 50%) 100% no-repeat,
              repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--faint) 45%, transparent) calc(10% - 1px) 10%), var(--surface-2); }
.fader::-moz-range-track { height: 8px; border-radius: 4px; background: var(--surface-2); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.fader::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--accent); }
.fader::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 30px; margin-top: -11px; border-radius: 5px; border: 1px solid rgba(0,0,0,.35);
  background: repeating-linear-gradient(0deg, #e9e9ec 0 3px, #c9cad0 3px 4px), #ddd; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.fader::-moz-range-thumb { width: 18px; height: 30px; border-radius: 5px; border: 1px solid rgba(0,0,0,.35);
  background: repeating-linear-gradient(0deg, #e9e9ec 0 3px, #c9cad0 3px 4px), #ddd; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.fader:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.fader:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) { .trow, .trow.manual { grid-template-columns: minmax(0, 1fr) auto; }
  .trow .taste-bar { grid-column: 1 / -1; }
  .trow.manual .trow-name { grid-column: 1; } .trow.manual form { grid-column: 2; grid-row: 1; }
  .trow.manual .fader, .trow.manual .fader-off { grid-column: 1 / -1; grid-row: 2; } .trow.manual .fader-off { transform: translateY(-17px); } }
.genre-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px; }
.gchip { cursor: pointer; }
.gchip input { position: absolute; opacity: 0; pointer-events: none; }
.gchip span { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 500; }
.gchip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.gchip input:checked + span::after { content: " ✓"; }
.gchip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.more-specific summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; padding: 4px; }
.more-specific[open] { max-height: 40vh; overflow: auto; }
.sub-group { display: grid; gap: 4px; padding: 6px 4px; }
.sub-group b { font-size: 13px; color: var(--muted); }
#add-genre form { max-height: 80vh; overflow: auto; }
.count-me { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }

/* --- Sharing (stories/share.py) ------------------------------------------------------------------------------ */
.share-btn { display: inline-flex; align-items: center; gap: 6px; }
.share-btn svg { width: 17px; height: 17px; flex: none; }
.rtop-btn.share-btn svg { width: 20px; height: 20px; }
.share-sheet [data-share-main], .share-sheet [data-share-ig] { display: grid; gap: 12px; }
.share-sheet [hidden] { display: none !important; }
.share-native { width: 100%; justify-content: center; }
.share-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; padding: 4px 0; }
.share-app { display: grid; justify-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); text-decoration: none; background: none; border: 0; font-family: inherit; cursor: pointer; padding: 0; }
.share-app:hover { text-decoration: none; color: var(--ink); }
.share-app i { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-style: normal; font-size: 22px; font-weight: 700; color: #fff; transition: transform .15s; }
.share-app:hover i, .share-app:focus-visible i { transform: translateY(-2px); }
.share-app i svg { width: 26px; height: 26px; }
.sa-wa { background: #25D366; } .sa-fb { background: #1877F2; font-family: Georgia, serif; font-size: 28px !important; }
.sa-ig { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); } .sa-x { background: #111; }
.sa-tg { background: #229ED9; } .sa-em { background: #6B7180; } .sa-cp { background: var(--accent); } .sa-qr { background: #2E3440; }
.share-ig-pick { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); justify-self: start; }
.share-ig-pick button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.share-ig-pick button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.share-ig-img { justify-self: center; max-height: 46vh; max-width: 100%; border-radius: 14px; box-shadow: 0 10px 28px -12px rgba(0,0,0,.5); background: var(--surface-2); }
.share-ig-actions { gap: 8px; justify-content: center; }
.share-ig-url { font-weight: 600; word-break: break-all; color: var(--ink); }
.end-share { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); margin-top: 6px; }
.kit-text { width: 100%; resize: none; font: inherit; font-size: 14.5px; }
.kit-cards { display: grid; grid-template-columns: 9fr 16fr; gap: 14px; align-items: end; }
.kit-cards figure { margin: 0; display: grid; gap: 8px; justify-items: center; }
.kit-cards img { width: 100%; border-radius: 12px; box-shadow: 0 8px 22px -12px rgba(0,0,0,.45); background: var(--surface-2); }
.qr-page { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 20px 0; background: var(--bg); }
.qr-page:fullscreen { align-content: center; padding: 40px; }
.qr-page:fullscreen .qr-code svg { width: min(70vh, 80vw); height: auto; }
.qr-page:fullscreen .qr-actions { display: none; }
.qr-code svg { display: block; width: min(320px, 80vw); height: auto; aspect-ratio: 1; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.qr-page h1 { font-size: 30px; margin: 6px 0 0; }
.qr-page p { margin: 0; }
.qr-actions { gap: 8px; justify-content: center; margin-top: 8px; }
@media print {
  .topbar, .tabbar, .sidenav, .side-dup, .qr-actions, .apphead, footer, .site-footer { display: none !important; }
  .qr-page { padding: 0; } .qr-code svg { width: 12cm; box-shadow: none; }
}
.came-from { display: grid; gap: 8px; }
.cf-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 40px; gap: 12px; align-items: center; font-size: 14px; }
.cf-row b { text-align: right; }
.cf-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.cf-bar i { display: block; height: 100%; background: var(--accent); }

/* --- Listen, made easy to see (docs/listen-plan.html) -------------------------------------------------------- */
.listen-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) 54px; gap: 14px; align-items: center; width: 100%; margin: 14px 0 6px; padding: 12px 14px; border: 0; border-radius: 18px; cursor: pointer; text-align: left; font-family: inherit; color: #fff;
  background: linear-gradient(135deg, #1E2F52, #1D6B73); box-shadow: 0 12px 26px -16px rgba(0,0,0,.7); transition: transform .15s, box-shadow .15s; }
.listen-card:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -16px rgba(0,0,0,.75); }
.listen-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.listen-card[hidden] { display: none; }
.lc-cover { width: 52px; height: 70px; border-radius: 7px; background: linear-gradient(160deg, #7A3B5E, #3B2F5C) center / cover no-repeat; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.lc-text { display: grid; gap: 2px; min-width: 0; }
.lc-text b { font-size: 16px; }
.lc-text > span:not(.lc-wave) { font-size: 13px; opacity: .85; }
.lc-wave { display: flex; gap: 3px; align-items: end; height: 16px; margin-top: 6px; }
.lc-wave i { width: 3px; border-radius: 2px; background: #9FE0E3; height: 40%; }
.lc-wave i:nth-child(3n) { height: 85%; } .lc-wave i:nth-child(4n+1) { height: 60%; } .lc-wave i:nth-child(5n+2) { height: 100%; } .lc-wave i:nth-child(7n) { height: 30%; }
.listen-card:hover .lc-wave i { animation: lc-bounce 1s ease-in-out infinite alternate; }
.lc-wave i:nth-child(even) { animation-delay: -.5s !important; }
@keyframes lc-bounce { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .listen-card:hover .lc-wave i { animation: none; } }
.lc-play { width: 54px; height: 54px; border-radius: 50%; background: #fff; color: #1D6B73; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.lc-play svg { width: 24px; height: 24px; margin-left: 3px; }
.listen-tip { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #171B26; color: #fff; font-size: 14px; }
.listen-tip[hidden] { display: none; }
.listen-tip span { flex: 1; }
.listen-tip button { background: none; border: 0; color: #fff; opacity: .7; font-size: 15px; cursor: pointer; padding: 4px 6px; }
.read-listen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.read-listen .btn { justify-content: center; }
.read-listen .btn:only-child { grid-column: 1 / -1; }
.listen-btn { border: 2px solid var(--accent); color: var(--accent); background: var(--surface); font-weight: 700; }
.listen-btn:hover { background: var(--accent-soft); text-decoration: none; }
/* Mini player: dark, with the cover, like a music app */
.mini-player { background: #171B26; border-color: #171B26; color: #fff; }
.mini-player .mini-info b { color: #fff; }
.mini-player .mini-info > span, .mini-player .mini-close { color: rgba(255,255,255,.72); }
.mini-player .vp-play { background: #fff; color: #171B26; }
.mini-player .mini-bar { background: rgba(255,255,255,.18); }
.mini-cover { flex: none; width: 34px; height: 46px; border-radius: 5px; background: linear-gradient(160deg, #7A3B5E, #3B2F5C) center / cover no-repeat; }
/* 🎧 on story covers */
.card { position: relative; }
.cover-wrap { position: relative; display: block; }
.listen-badge { position: absolute; bottom: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); pointer-events: none; z-index: 1; }
/* Home banner */
.audio-banner { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #1E2F52, #1D6B73); }
.audio-banner[hidden] { display: none; }
.ab-play { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; color: #1D6B73; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.ab-play svg { width: 24px; height: 24px; } .ab-play .i-pause { display: none; }
.audio-banner.is-playing .ab-play .i-play { display: none; } .audio-banner.is-playing .ab-play .i-pause { display: block; }
.ab-text { display: grid; gap: 3px; min-width: 0; }
.ab-text b { font-size: 16px; } .ab-text > span { font-size: 13.5px; opacity: .85; }
.ab-text a { color: #9FE0E3; font-weight: 700; font-size: 14px; margin-top: 2px; }
.ab-x { align-self: start; background: none; border: 0; color: #fff; opacity: .7; font-size: 15px; cursor: pointer; padding: 2px 4px; }

/* --- Moderation → Stories (moderation/stories.py) ----------------------------------------------------------- */
.ms-progress { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ms-bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.ms-bar i { display: block; height: 100%; background: var(--ok); border-radius: 5px; transition: width .6s; }
.ms-filters { display: grid; gap: 10px; }
.ms-search { position: relative; max-width: 420px; }
.ms-search svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.ms-search input { width: 100%; padding-left: 38px; border-radius: 999px; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ms-chips .pill-select { max-width: 190px; }
.ms-chips .pill-select.on { background-color: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ms-sort { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ms-count { display: flex; gap: 12px; align-items: baseline; }
@media (max-width: 700px) {
  .ms-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
  .ms-chips::-webkit-scrollbar { display: none; }
  .ms-chips .pill-select { flex: none; } .ms-sort { margin-left: 0; flex: none; }
}
.ms-table { width: 100%; font-size: 14px; }
.ms-table td { vertical-align: middle; }
.ms-story { display: flex; gap: 10px; align-items: center; color: inherit; min-width: 200px; }
.ms-story:hover b { text-decoration: underline; }
.ms-story > span:last-child { display: grid; line-height: 1.3; }
.ms-story small { color: var(--faint); font-size: 12.5px; }
.ms-cover { flex: none; width: 30px; height: 40px; border-radius: 4px; background: linear-gradient(160deg, #5B3A5E, #1E2F52) center / cover no-repeat; }
.ms-state { font-size: 12.5px; font-weight: 600; }
.ms-review { color: var(--amber); } .ms-removed, .ms-rejected { color: var(--mature); } .ms-draft { color: var(--faint); } .ms-live { color: var(--ok); }
.ms-check { width: 28px; }
.au { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.au.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.au.part { background: var(--amber-soft); color: var(--amber); }
.au.no { background: var(--mature-soft); color: var(--mature); }
.au.run { background: var(--accent-soft); color: var(--accent); }
.ms-bulk { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow); }
.ms-bulk[hidden] { display: none; }
.ms-chapters { display: grid; }
.ms-ch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.ms-ch:first-child { border-top: 0; }
.ms-ch-main { display: grid; gap: 2px; min-width: 0; }
.ms-ch-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ms-ch-act audio { height: 34px; max-width: 100%; }
.show-sm { display: none; }
@media (max-width: 700px) { .ms-table .hide-sm { display: none; } .show-sm { display: inline; } .ms-wrap table { min-width: 0 !important; }
  .ms-story { min-width: 0; } .ms-cover { display: none; } .ms-table td, .ms-table th { padding-left: 6px; padding-right: 6px; } .ms-table .au { font-size: 11.5px; padding: 3px 7px; } }
.para-play { position: absolute; z-index: 25; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.3); animation: para-pop .15s ease-out; }
.para-play[hidden] { display: none; }
.para-play svg { width: 15px; height: 15px; margin-left: 2px; }
@keyframes para-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-btn { gap: 6px; }
.ai-note { color: var(--accent); } .ai-note.error { color: var(--mature); }

/* --- Loading feedback (docs/speed-plan.html) ---------------------------------------------------------------- */
.page-loading { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .2s; }
.page-loading i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.page-loading.on { opacity: 1; }
.page-loading.on i { animation: page-load 8s cubic-bezier(.1,.7,.3,1) forwards; }
.page-loading.done i { width: 100% !important; animation: none; transition: width .2s; }
@keyframes page-load { 0% { width: 0; } 20% { width: 45%; } 60% { width: 75%; } 100% { width: 92%; } }
.btn.is-busy, button.is-busy { cursor: progress; opacity: .85; }
.busy-spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: busy-turn .7s linear infinite; }
@keyframes busy-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-spin { animation-duration: 1.6s; } }
.cores-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.core-opt { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.core-opt span { font-size: 13px; color: var(--muted); }
.core-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.core-opt:hover { border-color: var(--accent); }
.wall-show { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); gap: 2px; align-self: flex-start; }
.wall-show a { font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; }
.wall-show a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.wall-show a:hover { color: var(--ink); }
/* Endless scrolling: never let the browser hold the page steady on the loading button that's about to be replaced
   (the classic cause of infinite-scroll jumps on phones); it keeps a story or post on screen still instead. */
.load-more { overflow-anchor: none; min-height: 56px; display: flex; justify-content: center; align-items: center; }
.load-more ~ *, footer, .site-footer { overflow-anchor: none; }
/* Moderation → Stories: the ⋯ menu beside each story (its panel floats above the sideways-scrolling table) */
.ms-story-cell { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.ms-more { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; color: var(--muted); flex: none; }
.ms-more:hover { background: var(--surface-2); }
details[data-float-menu] > .menu-panel { position: fixed; right: auto; }  /* never inside the table, so it can't make it scroll or jump */
/* Moderator editor: a story with no cover yet */
.mod-picture.is-empty { display: flex; flex-direction: column; gap: 6px; }
.mod-picture-empty { display: grid; place-items: center; aspect-ratio: 3 / 4; width: 100%; max-width: 180px; border: 2px dashed var(--line); border-radius: 10px; color: var(--faint); font-size: 13px; background: var(--surface-2); }
/* Invitations and the /write page (community/founding.py) */
.invite-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: var(--surface); border: 1px solid var(--accent); border-radius: 16px; padding: 14px 16px; margin: 14px 0; box-shadow: 0 0 0 4px var(--accent-soft); }
.invite-card[hidden] { display: none; }
.invite-ic { font-size: 24px; line-height: 1; flex: none; padding-top: 2px; }
.invite-body { display: grid; gap: 8px; min-width: 0; flex: 1; }
.invite-body > span, .invite-body .spread > span { display: grid; gap: 1px; }
.invite-body p { margin: 0; font-family: var(--read); font-size: 15.5px; line-height: 1.55; }
.invite-card .x { border: 0; background: none; color: var(--faint); font-size: 16px; cursor: pointer; padding: 2px 4px; }
.founding-mark { color: #C8961E; margin-left: 4px; font-size: .9em; }
.write-page { max-width: 720px; margin: 0 auto; gap: 22px; }
.write-hero { display: flex; align-items: center; gap: 12px; }
.write-hero h1 { margin: 0; font-size: clamp(30px, 6vw, 42px); }
.write-ic { font-size: 34px; }
.write-message { display: grid; gap: 14px; font-family: var(--read); font-size: 18px; line-height: 1.65; }
.write-message p { margin: 0; }
.write-prompts { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-style: italic; }
.write-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.write-perks > div { display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.write-perks > div > span:first-child { font-size: 20px; }
.write-perks > div > span:last-child { font-size: 13.5px; color: var(--muted); }
.write-faces { display: flex; flex-wrap: wrap; gap: 14px; }
.write-faces a { display: grid; justify-items: center; gap: 4px; width: 76px; text-align: center; font-size: 12.5px; color: var(--ink); }
.write-built { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.invite-preview { border: 1px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 12px; padding: 10px 12px; font-family: var(--read); font-size: 15px; line-height: 1.5; background: var(--surface); }
.invite-preview::before { content: "Preview"; display: block; font-family: var(--body); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 4px; }
/* Moderator editor: fix broken lines and grammar suggestions (static/js/textfix.js) */
.mod-textfix { margin-bottom: 10px; }
.mod-suggestions { max-height: 46vh; overflow: auto; }
.mod-suggestions:empty { display: none; }
.callout.ok { border-color: var(--ok); background: #DCEFE3; color: #1f4d33; }
:root[data-theme="dark"] .callout.ok { background: #173226; color: #bfe6cf; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .callout.ok { background: #173226; color: #bfe6cf; } }
/* Split into chapters (stories/split.py) */
.split-page { max-width: 820px; }
.split-bar { position: sticky; top: 64px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); }
.split-list { margin: 0; padding-left: 22px; display: grid; gap: 2px; max-height: 30vh; overflow: auto; }
.split-blocks { display: grid; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.split-row { padding: 8px 14px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.split-row:first-child { border-top: 0; }
.split-row.is-heading .split-text { font-weight: 700; }
.split-row.is-cut { border-top: 3px solid var(--accent); background: var(--accent-soft); }
.split-text { font-family: var(--read); font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.split-row.is-heading .split-text, .split-row.is-cut .split-text { color: var(--ink); }
.split-cut { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.split-cut[hidden] { display: none; }
.split-cut input[type=text] { flex: 1; min-width: 180px; padding: 6px 10px; }
.split-here { justify-self: start; opacity: .55; }
.split-row:hover .split-here, .split-here:focus-visible { opacity: 1; }
@media (max-width: 640px) { .split-bar { top: calc(56px + env(safe-area-inset-top, 0px)); } .split-here { opacity: 1; } }

/* --- Story finder (/find/, finder/; docs/story-finder-plan.html) ------------------------------------------------ */
.finder-entry { background: linear-gradient(150deg, var(--accent-soft), var(--surface)); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.finder-entry h2 { font-size: 20px; margin: 0; }
.finder-entry-ask { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--accent); border-radius: 14px; background: var(--surface); padding: 4px 4px 4px 14px; }
.finder-entry-ask input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); padding: 8px 0; outline: none; }
.finder-entry-ask input:focus, .finder-entry-ask input:focus-visible { box-shadow: none; outline: none; border: 0; }  /* the whole box shows focus instead */
.finder-entry-ask:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.finder-entry-ask button { width: 40px; height: 40px; border-radius: 11px; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 17px; cursor: pointer; flex: none; }
.finder-entry .chips.scroll-x { margin-inline: 0; padding-inline: 0; }
.finder-entry .chip { background: var(--surface); border-color: var(--line); white-space: nowrap; }

.finder { display: flex; flex-direction: column; min-width: 0; }
.finder-chat { display: flex; flex-direction: column; min-width: 0; }
.finder-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; }
.finder-top h1 { font-size: 26px; margin: 0; }
.finder-thread { display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; min-width: 0; }
.finder-me { align-self: flex-end; max-width: 84%; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 18px 18px 4px 18px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; scroll-margin-top: 80px; }
.finder-ai { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; min-width: 0; scroll-margin-top: 80px; }
.finder-ai p { margin: 0; }
.finder-who { font-size: 12.5px; font-weight: 700; color: var(--faint); }
.finder-ai .chips { gap: 6px; }
.finder-ai .chip { cursor: pointer; font-family: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.finder-got .chip { background: var(--accent-soft); border-color: transparent; font-size: 12.5px; padding: 4px 11px; }
.finder-got .chip span { color: var(--faint); margin-left: 2px; }
.finder-next .chip, .finder-ideas .chip { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.finder-picks { display: flex; flex-direction: column; gap: 10px; }
.finder-pick { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; min-width: 0; }
.finder-cover { width: 64px; flex: none; }
.finder-cover .cover { font-size: 7px; }
.finder-pick-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.finder-pick-title { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); }
.finder-meta { font-size: 12.5px; color: var(--faint); }
.finder-why { margin: 2px 0 0; font-family: var(--read); font-size: 15px; line-height: 1.45; color: var(--ink); }
.finder-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.finder-acts .btn { padding: 6px 12px; font-size: 13px; }
.finder-write { border: 1.5px dashed var(--accent); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; background: var(--surface); font-size: 14px; color: var(--muted); }
.finder-write b { font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--ink); }
.finder-restart { align-self: flex-start; margin: 0; }
.finder-typing { display: inline-flex; gap: 5px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.finder-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: finder-dot 1.2s infinite ease-in-out; }
.finder-typing i:nth-child(2) { animation-delay: .15s; } .finder-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes finder-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .finder-typing i { animation: none; opacity: .6; } }
.finder-error { color: var(--mature); font-size: 14px; margin: 0; }
.finder-composer { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; align-items: flex-end; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
.finder-composer textarea { flex: 1; min-width: 0; resize: none; overflow-y: hidden; border: 1px solid var(--line); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 16px; line-height: 1.35; background: var(--surface); color: var(--ink); max-height: 140px; }
.finder-composer textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.finder-send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.finder-send svg { width: 20px; height: 20px; }
.finder-fine { font-size: 12px; color: var(--faint); margin: 0; padding-bottom: 8px; }
.finder-results { display: none; }
body.finder-page .footer { display: none; }
body.finder-page, body.finder-page main { padding-bottom: 0; }  /* no tab bar or footer on this page */
@media (max-width: 899px) {
  .finder { min-height: calc(100dvh - 78px - env(safe-area-inset-top, 0px)); }  /* the typing box sits at the bottom */
  .finder-chat, .finder-thread { flex: 1; }
  .finder-top h1 { display: none; }
  .finder-top { padding-bottom: 12px; justify-content: flex-end; }
  .finder-top:has(form[hidden]) { display: none; }
}
@media (min-width: 900px) {
  html:has(body.finder-page) { overflow: hidden; }  /* only the chat and the stories scroll, never the page */
  .finder { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 0; height: var(--finder-h, calc(100dvh - 124px)); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); margin-block: 0 16px; }
  .finder-chat { border-right: 1px solid var(--line); min-height: 0; padding: 18px 18px 0; }
  .finder-thread { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-right: 4px; }
  .finder-thread .finder-picks { display: none; }  /* the stories get the big space on the right */
  .finder-composer { background: var(--surface); }
  .finder-results { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px; background: var(--bg); min-width: 0; }
  .finder-results-head h2 { font-size: 24px; margin: 0; }
  .finder-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
  .finder-big .finder-pick { flex-direction: column; padding: 14px; }
  .finder-big .finder-cover { width: 110px; }
  .finder-big .finder-cover .cover { font-size: 11px; }
  .finder-also-title { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin: 6px 0 0; font-family: var(--body); }
  .finder-also { display: flex; flex-direction: column; gap: 8px; }
  .finder-also-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; color: var(--ink); }
  .finder-also-t { font-weight: 600; }
  .finder-empty { margin: auto; max-width: 360px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--muted); }
  .finder-empty h2 { font-size: 22px; color: var(--ink); margin: 0; }
  .finder-empty-mark { font-size: 34px; }
}
.end-finder { align-self: flex-start; font-weight: 600; font-size: 14px; }
.audio-soon { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 14px; line-height: 1.45; }
.audio-soon b { color: var(--ink); font-weight: 600; }

/* --- Story lists and classic author pages (/lists/, /authors/; storylists/) ------------------------------------- */
.sl-page { display: grid; gap: 28px; min-width: 0; }
.sl-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sl-main h1 { margin: 0; font-size: clamp(26px, 6vw, 36px); line-height: 1.15; }
.sl-crumbs { font-size: 13px; color: var(--faint); }
.sl-intro { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 68ch; }
.sl-chips .chip { white-space: nowrap; }
.sl-items { display: flex; flex-direction: column; gap: 12px; }
.sl-item { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; min-width: 0; }
.sl-item.sl-new { border-color: var(--accent); }
.sl-num { font-family: var(--display); font-size: 20px; color: var(--faint); width: 22px; flex: none; text-align: center; padding-top: 2px; }
.sl-cover { width: 64px; flex: none; }
.sl-cover .cover { font-size: 7px; }
.sl-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sl-text h3 { margin: 0; font-family: var(--body); font-size: 16px; font-weight: 700; line-height: 1.3; }
.sl-text h3 a { color: var(--ink); }
.sl-newtag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sl-meta { font-size: 13px; color: var(--faint); }
.sl-why { margin: 2px 0 0; font-family: var(--read); font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.sl-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sl-acts .btn { padding: 6px 12px; font-size: 13px; }
.sl-faq { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; }
.sl-faq h3 { font-family: var(--body); font-size: 15.5px; font-weight: 700; margin: 10px 0 4px; }
.sl-faq p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.sl-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sl-side h2 { font-size: 13px; font-family: var(--body); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 8px 0 0; }
.sl-links { display: flex; flex-direction: column; gap: 6px; }
.sl-links a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 14.5px; }
.sl-links a span { color: var(--faint); font-variant-numeric: tabular-nums; }
.sl-write { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; border: 1.5px dashed var(--accent); border-radius: 14px; font-size: 14px; color: var(--muted); margin-top: 8px; }
.sl-write b { color: var(--ink); font-family: var(--display); font-weight: 400; font-size: 17px; }
.sl-author { display: flex; gap: 14px; align-items: center; }
.sl-av { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #3B2F5C, #1D6B73); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 24px; flex: none; }
.sl-author h1 { margin: 0; }
.sl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.sl-cards.scroll { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.sl-cards.scroll .sl-card { flex: none; width: 160px; }
.sl-card { border-radius: 16px; padding: 14px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 108px; }
.sl-card b { font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1.15; }
.sl-card span { font-size: 12px; opacity: .85; }
.sl-card:hover { text-decoration: none; filter: brightness(1.08); }
.sl-g1 { background: linear-gradient(150deg, #6B1E25, #1B1013); } .sl-g2 { background: linear-gradient(150deg, #1D6B73, #0B2528); }
.sl-g3 { background: linear-gradient(150deg, #2B3A55, #0E1320); } .sl-g4 { background: linear-gradient(150deg, #7A5A1E, #2A1C08); }
.sl-g5 { background: linear-gradient(150deg, #5B3A5E, #1E1428); }
@media (min-width: 900px) {
  .sl-page { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .sl-items { display: grid; grid-template-columns: 1fr 1fr; }
  .sl-side { position: sticky; top: 84px; }
}

/* Phones and tablets: small buttons keep their look but get a finger-sized touch area (about 40px) */
@media (hover: none) and (pointer: coarse) {
  .pick-more::after { content: ""; position: absolute; inset: -8px; }
  .react-add { position: relative; font-size: 13px; padding: 3px 10px; }
  .react-add::after { content: ""; position: absolute; inset: -10px -6px; }
  .wc-quick .linkish { padding: 10px 8px; margin: -10px -8px -10px 0; }
  .tag-chip button { width: 30px; height: 30px; }
  .chip-x button { padding: 8px 10px; }
  .ql-toolbar.ql-snow button { width: 36px !important; height: 36px !important; padding: 6px !important; }
  .ql-toolbar.ql-snow .ql-formats { margin-right: 6px !important; }
}

/* Welcome step: the "I agree" box sits beside its sentence, and the whole line is tappable */
.form-card form.welcome-form p:has(> input[type="checkbox"]) { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.form-card form.welcome-form p > input[type="checkbox"] { order: -1; width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.form-card form.welcome-form p:has(> input[type="checkbox"]) label { flex: 1 1 auto; width: auto; margin: 0; cursor: pointer; }

/* --- Languages (docs/languages-plan.html): chips, versions, Hindi reading ------------------------------------- */
.lang-chips .chip { min-width: 52px; text-align: center; }
.tag.series-tag { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.genre-tile { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; }
.genre-tile small { font-size: 11.5px; font-weight: 500; opacity: .85; }
.version-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: 12px; }
.version-card:hover { text-decoration: none; filter: brightness(.98); }
.version-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.vc-icon { font-size: 20px; }
.rtop .rtop-lang { display: inline-flex; align-items: center; width: auto; min-width: 0; padding: 0 8px; flex-direction: row; gap: 3px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.version-list { list-style: none; margin: 8px 0 0; padding: 0; }
.version-list li > * { display: flex; flex-direction: column; padding: 12px 6px; border-bottom: 1px solid var(--line); color: var(--ink); }
.version-list li:last-child > * { border-bottom: 0; }
.version-list span.on { color: var(--muted); }
.version-list a:hover { background: var(--surface-2); text-decoration: none; border-radius: 8px; }
.version-list li span span, .version-list li a span { font-size: 13px; color: var(--muted); }
.lang-menu summary { list-style: none; cursor: pointer; white-space: nowrap; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu .menu-row { padding: 6px 12px; }
.lang-row { font-size: 16px; }
.lang-home .lead { font-size: 18px; color: var(--ink); }
/* Devanagari has marks above and below its letters: more room between lines, and no slanted "italics" (there are
   none in the script, so emphasis is bold instead). */
.story-text:lang(hi) { --line: 1.9; }
:lang(hi) .opening-text, .blurb:lang(hi), :lang(hi) .blurb { line-height: 1.9; }
.story-text:lang(hi) em, .story-text:lang(hi) i { font-style: normal; font-weight: 600; }
.lang-badge { position: absolute; bottom: 8px; right: 8px; z-index: 2; background: rgba(255,255,255,.9); color: #171B26; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.work-cover .lang-badge { display: none; }
.crumb-lang { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }

/* Pictures in a classic's text (the code in The Dancing Men): black ink on a clear background, light in the dark theme. */
.story-text img.cipher { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.story-text img.cipher.inline { display: inline; margin: 0 .1em; height: 1.6em; width: auto; vertical-align: -.4em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .story-text img.cipher { filter: invert(1); } }
:root[data-theme="dark"] .story-text img.cipher { filter: invert(1); }

/* A one-chapter story read on its own page (story_detail): the text in the reading font, then a way into the reader. */
.single-read { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.single-end { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Reporting a private message */
.report-quote { margin: 0 0 6px; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--surface-2); border-radius: 8px; font-size: 14px; color: var(--muted); white-space: pre-line; }
.report-convo { display: grid; gap: 6px; padding: 8px; background: var(--surface-2); border-radius: 10px; }
.report-convo p { margin: 0; padding: 6px 8px; border-radius: 8px; }
.report-convo p.reported { background: color-mix(in srgb, var(--mature) 14%, transparent); border-left: 3px solid var(--mature); }

/* The 18+ address (core/adulthost.py): the age popup over the page, and a thin bar to go back */
.adult-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 16px; font-size: 13px;
  background: color-mix(in srgb, var(--mature) 12%, var(--bg)); border-bottom: 1px solid var(--line); }
.adult-bar a { color: var(--ink); font-weight: 600; }
.age-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
  background: rgba(10, 12, 18, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.age-gate-box { max-width: 440px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 28px 26px 22px; text-align: center; display: grid; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.age-gate-box h2 { margin: 0; font-size: 24px; }
.age-gate-box p { margin: 0; color: var(--muted); line-height: 1.55; }
.age-gate-badge { justify-self: center; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--mature); color: var(--mature) !important; font-weight: 800; font-size: 18px; }
.age-gate-actions { display: grid; gap: 10px; margin-top: 6px; }
body:has(.age-gate) { overflow: hidden; }