/* Moonlight Toons — app styles (moved out of index.html in v0.9.50; loaded as app.css?v=APP_VERSION). */
/* ============================================================
   Moonlight Toons — design system (Phase 1)
   ============================================================ */
:root{
  /* Palette — a moonlit night, not pure black */
  --bg:            #0b0d20;
  --bg-2:          #0e1128;
  --surface:       #161a38;
  --surface-2:     #1c2147;
  --surface-hi:    #232a55;
  --line:          rgba(233,229,255,0.09);
  --line-strong:   rgba(233,229,255,0.16);

  --text:          #f3ecdf;   /* warm off-white */
  --text-soft:     #c7c3dd;
  --text-mute:     #8e8ab0;
  --text-faint:    #64628a;

  --violet:        #a78bfa;
  --violet-deep:   #7c6cf0;
  --blue:          #6ea8fe;
  --rose:          #f4a6c8;
  --gold:          #f0cf8a;

  --grad:          linear-gradient(135deg, #a78bfa 0%, #6ea8fe 100%);
  --grad-soft:     linear-gradient(135deg, rgba(var(--violet-rgb),.18), rgba(var(--blue-rgb),.18));

  /* Theme plumbing — every colour the CSS uses beyond the palette above.
     "-rgb" values are bare r,g,b triplets for rgba(var(--x-rgb),alpha).
     Midnight (these defaults) is the site's original look; the other themes
     override this whole block via html[data-theme="…"] below. */
  --on-accent:     #0d0f24;          /* text/icons on --grad buttons + chips */
  --on-accent-rgb: 13,15,36;
  --on-violet:     #fff;             /* text on a solid --violet pill */
  --ink-rgb:       255,255,255;      /* faint hover/fill washes (white on dark, dark on light) */
  --star-rgb:      255,255,255;      /* background starfield */
  --glow-rgb:      124,108,240;
  --violet-rgb:    167,139,250;
  --blue-rgb:      110,168,254;
  --rose-rgb:      244,166,200;
  --gold-rgb:      240,207,138;
  --ok:            #9fdcae;  --ok-rgb:    138,214,160;
  --bad:           #ff9e9e;  --bad-rgb:   255,120,120;
  --coral:         #ffb59e;  --coral-rgb: 255,158,128;
  --surface-rgb:   22,26,56;
  --bg-rgb:        11,13,32;
  --bar-rgb:       14,17,40;         /* translucent header / tab bar */
  --panel-a:       #1a1f45;          /* hero + modal panel gradient */
  --panel-b:       #10132e;
  --og-manhwa:     #c8b6ff;          /* origin badge text on cards */
  --og-manga:      #f7bcd6;
  --og-manhua:     #f3d99e;
  --og-webcomic:   #9fe3d8;

  --radius:        16px;
  --radius-sm:     12px;
  --radius-lg:     22px;

  --shadow:        0 18px 40px -22px rgba(0,0,0,.75);
  --shadow-glow:   0 12px 30px -12px rgba(var(--glow-rgb),.55);

  --nav-w:         252px;
  --bottom-nav-h:  70px;

  --ease:          cubic-bezier(.22,.61,.36,1);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------- Colour themes (Settings → Theme, or the header moon) ----------
   Set on <html data-theme> by the boot script in <head>; no attribute =
   Midnight. Keep THEMES in the script (names, swatches, theme-color) in sync. */
html[data-theme="watercolor"]{
  --bg:#0c2236; --bg-2:#0f2840; --surface:#143650; --surface-2:#1a4060; --surface-hi:#214c6e;
  --line:rgba(216,232,240,.10); --line-strong:rgba(216,232,240,.18);
  --text:#f3ead8; --text-soft:#c9d6df; --text-mute:#9fb3c4; --text-faint:#6f8aa0;
  --violet:#e0b464; --violet-deep:#2D8587; --blue:#5fb8b4; --rose:#b3a8cf; --gold:#D8A64F;
  --grad:linear-gradient(135deg, #e6bb6a 0%, #c9953f 100%);
  --on-accent:#2a1c05; --on-accent-rgb:42,28,5; --on-violet:#2a1c05;
  --glow-rgb:216,166,79; --violet-rgb:224,180,100; --blue-rgb:95,184,180; --rose-rgb:179,168,207; --gold-rgb:216,166,79;
  --surface-rgb:20,54,80; --bg-rgb:12,34,54; --bar-rgb:13,38,60; --panel-a:#18405e; --panel-b:#0f2a42;
}
html[data-theme="twilight"]{
  --bg:#232241; --bg-2:#2B2A4D; --surface:#34335c; --surface-2:#3a3863; --surface-hi:#47447a;
  --line:rgba(240,225,255,.10); --line-strong:rgba(240,225,255,.18);
  --text:#fbefe6; --text-soft:#d9cfe6; --text-mute:#b5b0d6; --text-faint:#8582ab;
  --violet:#F09AB3; --violet-deep:#d97a98; --blue:#8BA6D6; --rose:#F7B8A4; --gold:#FAD483;
  --grad:linear-gradient(135deg, #F09AB3 0%, #F7B8A4 100%);
  --on-accent:#3d1424; --on-accent-rgb:61,20,36; --on-violet:#3d1424;
  --star-rgb:255,240,220;
  --glow-rgb:240,154,179; --violet-rgb:240,154,179; --blue-rgb:139,166,214; --rose-rgb:247,184,164; --gold-rgb:250,212,131;
  --surface-rgb:52,51,92; --bg-rgb:35,34,65; --bar-rgb:40,39,74; --panel-a:#3d3a6b; --panel-b:#2a2950;
}
/* Light themes share the dark-ink washes, readable status colours and a
   softer shadow; each then sets its own palette. */
html[data-theme="blush"], html[data-theme="dreams"], html[data-theme="ivory"]{
  color-scheme:light;
  --on-accent:#ffffff; --on-accent-rgb:255,255,255; --on-violet:#ffffff;
  --ok:#2f8a55; --ok-rgb:47,138,85; --bad:#c0392b; --bad-rgb:200,70,70; --coral:#c25a3c; --coral-rgb:214,110,80;
  --surface-rgb:255,255,255;
  --shadow:0 14px 30px -18px rgba(60,40,90,.35);
  --og-manhwa:var(--violet); --og-manga:#a3456f; --og-manhua:#86601a; --og-webcomic:#1f7a70;
}
/* Light themes: things that sit ON cover art (status badges, the + / ✓ shelf
   button, shelf stars, the title banner) switch from dark glass to a frosted
   light glass in the theme's own colours. html[data-tone="light"] is set with
   data-theme by the boot script + Theme.paint(). */
html[data-tone="light"] .card .cover .badge,
html[data-tone="light"] .shc-badge,
html[data-tone="light"] .detail-cover .dc-badge,
html[data-tone="light"] .d-badge,
html[data-tone="light"] .og-badge.og-lg{
  background:rgba(255,255,255,.86); color:var(--text); border-color:rgba(var(--ink-rgb),.14);
  text-shadow:none;
}
/* Badges on cover art get a colour tint layered over that frosted white, so they read
   solid and match everywhere:
     status (card cover, title banner, shelf card, tonight's pick) → --blue tint
     content rating (title banner + cover poster)                  → --violet tint
     origin (Manhwa/Manga/Manhua)                                  → its own tint (below) */
html[data-tone="light"] .card .cover .badge,
html[data-tone="light"] .shc-badge,
html[data-tone="light"] .d-badge:not(.rating-badge){
  background:linear-gradient(rgba(var(--blue-rgb),.16), rgba(var(--blue-rgb),.16)), rgba(255,255,255,.86);
  border-color:rgba(var(--blue-rgb),.5); color:var(--text);
}
/* Publication status: one colour per status (statusClass() / mt_status_class()).
   --st = tint colour, --st-ink = text in dark themes, --st-ink-l = text in light themes. */
.st-ongoing{      --st:66,133,214;  --st-ink:#a9cdff; --st-ink-l:#24599c; }
.st-completed{    --st:47,158,96;   --st-ink:#94e2b4; --st-ink-l:#1f7344; }
.st-hiatus{       --st:214,150,40;  --st-ink:#f5d48c; --st-ink-l:#8a5a0e; }
.st-discontinued{ --st:205,72,60;   --st-ink:#ffa79c; --st-ink-l:#a3302a; }
:is(.card .cover .badge, .d-badge)[class*="st-"]{
  background:linear-gradient(rgba(var(--st),.30), rgba(var(--st),.30)), rgba(11,13,32,.62);
  border-color:rgba(var(--st),.6); color:var(--st-ink);
}
html[data-tone="light"] :is(.card .cover .badge, .d-badge)[class*="st-"]{
  background:linear-gradient(rgba(var(--st),.18), rgba(var(--st),.18)), rgba(255,255,255,.88);
  border-color:rgba(var(--st),.55); color:var(--st-ink-l);
}
html[data-tone="light"] .d-badge.rating-badge,
html[data-tone="light"] .detail-cover .dc-badge{
  background:linear-gradient(rgba(var(--violet-rgb),.2), rgba(var(--violet-rgb),.2)), rgba(255,255,255,.86);
  border-color:rgba(var(--violet-rgb),.45); color:var(--violet);
}
html[data-tone="light"] .og-lg.og-manhwa{ color:var(--og-manhwa); border-color:rgba(var(--violet-rgb),.45); }
html[data-tone="light"] .og-lg.og-manga{  color:var(--og-manga);  border-color:rgba(var(--rose-rgb),.6); }
html[data-tone="light"] .og-lg.og-manhua{ color:var(--og-manhua); border-color:rgba(var(--gold-rgb),.55); }
html[data-tone="light"] .card .cover .card-track:not(.on),
html[data-tone="light"] .shc-fav{
  background:rgba(255,255,255,.86); color:var(--text); border-color:rgba(var(--ink-rgb),.16);
}
html[data-tone="light"] .shc-fav.on{ color:var(--gold); border-color:rgba(var(--gold-rgb),.6); }
html[data-tone="light"] .card .cover .card-track:not(.on):hover{ background:var(--grad); color:var(--on-accent); border-color:transparent; }
/* Title banner: a light wash of the page colour over brighter blurred art. */
html[data-tone="light"] .d-hero::after{
  background:linear-gradient(180deg, rgba(var(--bg-rgb),.30) 0%, rgba(var(--bg-rgb),.45) 35%, rgba(var(--bg-rgb),.88) 100%);
}
html[data-tone="light"] .d-hero .cover-img{ filter:blur(22px) saturate(1.15) brightness(1.08); }
html[data-tone="light"] .d-hero h1{ color:var(--text); text-shadow:0 1px 14px rgba(var(--bg-rgb),.7); }
html[data-tone="light"] .d-alt{ color:var(--text-soft); }
@media (max-width:900px){ html[data-tone="light"] .d-hero{ box-shadow:0 12px 26px -16px rgba(60,40,90,.35); } }
/* Dark themes tint the banner with their own night colour instead of Midnight navy. */
html[data-theme="watercolor"] .d-hero::after{ background:linear-gradient(180deg,rgba(8,26,42,.35) 0%, rgba(8,26,42,.2) 30%, rgba(8,26,42,.85) 100%); }
html[data-theme="twilight"] .d-hero::after{ background:linear-gradient(180deg,rgba(28,27,54,.35) 0%, rgba(28,27,54,.2) 30%, rgba(28,27,54,.85) 100%); }

html[data-theme="blush"]{
  --bg:#FFF3E2; --bg-2:#fbead6; --surface:#ffffff; --surface-2:#fff8ef; --surface-hi:#f6e6d6;
  --line:rgba(90,60,80,.12); --line-strong:rgba(90,60,80,.20);
  --text:#3a3150; --text-soft:#5a5070; --text-mute:#7d7290; --text-faint:#8a7f9c;
  --violet:#5f7fae; --violet-deep:#4f6d99; --blue:#7291BD; --rose:#c97a92; --gold:#b0703f;
  --grad:linear-gradient(135deg, #6585b6 0%, #9a86bf 100%);
  --ink-rgb:58,49,80; --star-rgb:176,154,192;
  --glow-rgb:114,145,189; --violet-rgb:95,127,174; --blue-rgb:114,145,189; --rose-rgb:230,188,202; --gold-rgb:214,150,90;
  --bg-rgb:255,243,226; --bar-rgb:255,246,234; --panel-a:#fde3d8; --panel-b:#fff3e2;
}
html[data-theme="dreams"]{
  --bg:#f3effb; --bg-2:#ece6f8; --surface:#ffffff; --surface-2:#f8f5fd; --surface-hi:#e9e1f6;
  --line:rgba(40,30,118,.12); --line-strong:rgba(40,30,118,.20);
  --text:#281E76; --text-soft:#4a4390; --text-mute:#6a63a8; --text-faint:#7d77b3;
  --violet:#413C8F; --violet-deep:#281E76; --blue:#2f7f98; --rose:#9b6fc4; --gold:#9a7a2a;
  --grad:linear-gradient(135deg, #4a43a3 0%, #3a86a0 100%);
  --ink-rgb:40,30,118; --star-rgb:195,169,224;
  --glow-rgb:65,60,143; --violet-rgb:65,60,143; --blue-rgb:76,154,178; --rose-rgb:195,169,224; --gold-rgb:180,140,50;
  --bg-rgb:243,239,251; --bar-rgb:246,243,252; --panel-a:#e7dcf5; --panel-b:#f3effb;
}
html[data-theme="ivory"]{
  --bg:#F4F7EA; --bg-2:#eef1e2; --surface:#ffffff; --surface-2:#fafbf4; --surface-hi:#ebe4ef;
  --line:rgba(60,50,90,.12); --line-strong:rgba(60,50,90,.20);
  --text:#2f2a4a; --text-soft:#4f4868; --text-mute:#776f8f; --text-faint:#857e9c;
  --violet:#7a63c4; --violet-deep:#5e48a8; --blue:#3e86ab; --rose:#b277b8; --gold:#9a7a2a;
  --grad:linear-gradient(135deg, #8a72d0 0%, #5f9fc2 100%);
  --ink-rgb:47,42,74; --star-rgb:149,128,212;
  --glow-rgb:149,128,212; --violet-rgb:122,99,196; --blue-rgb:117,173,201; --rose-rgb:205,185,221; --gold-rgb:190,150,60;
  --bg-rgb:244,247,234; --bar-rgb:246,248,238; --panel-a:#e2d9e2; --panel-b:#F4F7EA;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }  /* hidden attr must always win over custom display */
html,body{ margin:0; padding:0; }
/* Stop iPhone Safari's "text autosizing" from enlarging text AFTER layout (it blew up
   blog-table text so long titles spilled into the next column). */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  font-family:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  /* Prevent sideways scroll WITHOUT making <body> a scroll container:
     `overflow-x:hidden` here breaks `position:sticky` for descendants on
     iOS Safari (the pinned mobile title banner). `overflow-x:clip` clips the
     same way but keeps sticky working. `hidden` stays as a fallback for
     browsers without `clip` support (pre-2022). */
  overflow-x:hidden;
  overflow-x:clip;
}
/* Atmospheric moon-glow backdrop */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 700px at 82% -8%, rgba(var(--glow-rgb),.28), transparent 60%),
    radial-gradient(900px 600px at 6% 12%, rgba(var(--blue-rgb),.14), transparent 55%),
    radial-gradient(700px 500px at 50% 108%, rgba(var(--rose-rgb),.08), transparent 60%),
    var(--bg);
}
/* faint starfield */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(var(--star-rgb),.5), transparent),
    radial-gradient(1.2px 1.2px at 70% 22%, rgba(var(--star-rgb),.35), transparent),
    radial-gradient(1.3px 1.3px at 85% 60%, rgba(var(--star-rgb),.3), transparent),
    radial-gradient(1px 1px at 35% 72%, rgba(var(--star-rgb),.28), transparent),
    radial-gradient(1.1px 1.1px at 55% 48%, rgba(var(--star-rgb),.22), transparent),
    radial-gradient(1.2px 1.2px at 12% 85%, rgba(var(--star-rgb),.25), transparent);
  opacity:.6;
}

h1,h2,h3,.display{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing:auto;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.08;
  margin:0;
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; border-radius:6px; }

/* ---------- App layout ---------- */
.app{
  display:grid;
  grid-template-columns:var(--nav-w) 1fr;
  min-height:100dvh;
}

/* ---------- Sidebar (desktop) ---------- */
.sidebar{
  position:sticky; top:0; align-self:start;
  height:100dvh;
  padding:26px 18px calc(24px + var(--safe-b));
  display:flex; flex-direction:column; gap:6px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(var(--surface-rgb),.55), rgba(var(--bg-rgb),.2));
  backdrop-filter:blur(8px);
}
.brand{
  display:flex; align-items:center; gap:12px;
  padding:6px 10px 20px;
}
.brand .glyph{ width:38px; height:38px; flex:0 0 auto; filter:drop-shadow(0 4px 10px rgba(var(--glow-rgb),.5)); }
.brand .wordmark{ display:flex; flex-direction:column; line-height:1; }
.brand .wordmark b{ font-family:"Fraunces",serif; font-weight:600; font-size:20px; letter-spacing:-.01em; }
.brand .wordmark span{ font-size:11px; color:var(--text-mute); letter-spacing:.14em; text-transform:uppercase; margin-top:5px; }

.nav-link{
  display:flex; align-items:center; gap:13px;
  padding:11px 14px; border-radius:12px;
  color:var(--text-soft); font-weight:500; font-size:15px;
  transition:background .2s var(--ease), color .2s var(--ease);
  position:relative; width:100%; text-align:left;
}
.nav-link .ico{ width:22px; height:22px; flex:0 0 auto; opacity:.85; }
.nav-link:hover{ background:rgba(var(--ink-rgb),.05); color:var(--text); }
.nav-link.active{ color:var(--text); background:var(--grad-soft); }
.nav-link.active::before{
  content:""; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:0 4px 4px 0; background:var(--grad);
}
.nav-link.cta{
  margin-top:6px;
  background:var(--grad); color:var(--on-accent); font-weight:600;
  box-shadow:var(--shadow-glow);
}
.nav-link.cta:hover{ filter:brightness(1.05); color:var(--on-accent); }
.nav-link.cta.active{ color:var(--on-accent); }
.nav-link.cta.active::before{ display:none; }
.sidebar .spacer{ flex:1; }
.sidebar-foot{ padding:10px 14px 0; color:var(--text-faint); font-size:12px; }

/* ---------- Desktop: the nav is a sticky top header (phones keep the bottom tab bar) ---------- */
@media (min-width:901px){
  :root{ --top-h:64px; scroll-padding-top:calc(var(--top-h) + 12px); }   /* in-page jumps stop below the header */
  .app{ display:block; }
  .sidebar{
    position:sticky; top:0; z-index:40; height:var(--top-h);
    flex-direction:row; align-items:center; gap:18px;
    padding:0 clamp(18px,3vw,40px);
    border-right:none; border-bottom:1px solid var(--line);
    background:rgba(var(--bar-rgb),.82); backdrop-filter:blur(14px);
  }
  .brand{ padding:0; gap:10px; flex:0 0 auto; }
  .brand .glyph{ width:32px; height:32px; }
  .brand .wordmark b{ font-size:18px; }
  .brand .wordmark span{ font-size:10px; margin-top:3px; }
  #sidenav{ flex:1; display:flex; align-items:center; justify-content:flex-end; gap:2px; min-width:0; }   /* tabs sit right, beside the moon */
  .nav-link{ width:auto; padding:8px 12px; gap:8px; font-size:14px; white-space:nowrap; border-radius:999px; }
  .nav-link .ico{ width:18px; height:18px; }
  .nav-link.active::before{ left:50%; top:auto; bottom:-12px; transform:translateX(-50%); width:24px; height:3px; border-radius:3px; }
  .nav-link.cta{ margin-top:0; padding:8px 16px; }
  .nav-link[data-nav="settings"]{ padding:8px 10px; }
  .nav-link[data-nav="settings"] span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .side-theme{ flex:0 0 auto; margin-left:0; }
  .sidebar .spacer, .sidebar-foot{ display:none; }
  .detail-grid .detail-aside{ top:calc(var(--top-h) + 20px); }   /* clear the header (beats the base rule further down) */
}
/* Narrower desktops: drop the tagline, then show icons only (except the Pick button). */
@media (min-width:901px) and (max-width:1180px){
  .brand .wordmark span{ display:none; }
}
@media (min-width:901px) and (max-width:1060px){
  .nav-link:not(.cta) span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .nav-link:not(.cta){ padding:9px 11px; }
  .nav-link:not(.cta)[title]{ cursor:pointer; }
}

/* ---------- Main ---------- */
main{ min-width:0; padding:0 0 calc(40px + var(--safe-b)); }
.wrap{ max-width:1180px; margin:0 auto; padding:28px clamp(18px,4vw,44px) 0; }
.screen[hidden]{ display:none; }
.screen{ animation:fade .34s var(--ease) both; }
/* Every screen shares the same content width (.wrap, 1180px) so pages line up
   under the full-width desktop header. Text-heavy screens use the room with
   multi-column layouts on wide screens (Settings cards, blog list). */
@media (min-width:1000px){
  .settings-group{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
  .blog-list{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch; }
  .blog-list > :not(.blog-card){ grid-column:1 / -1; }   /* in-feed ad etc. span the row */
}
@keyframes fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.page-head{ margin-bottom:22px; }
.page-head h1{ font-size:clamp(28px,4.2vw,40px); }
/* Every page intro spans the content width (same as The Reading Room), so all pages line up. */
.page-head p{ color:var(--text-mute); margin:10px 0 0; font-size:15px; max-width:none; }
.eyebrow{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet); font-weight:600; margin-bottom:12px;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--violet); opacity:.6; }

/* ---------- Hero (Home) ---------- */
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  padding:clamp(28px,5vw,54px);
  margin-bottom:38px;
  border:1px solid var(--line-strong);
  background:
    radial-gradient(600px 380px at 88% -20%, rgba(var(--violet-rgb),.42), transparent 62%),
    radial-gradient(500px 360px at 108% 120%, rgba(var(--blue-rgb),.30), transparent 60%),
    linear-gradient(160deg, var(--panel-a), var(--panel-b) 70%);
  box-shadow:var(--shadow);
}
.hero .moon{
  position:absolute; right:clamp(-40px,-2vw,10px); top:50%; transform:translateY(-50%);
  width:min(320px,42%); opacity:.9; pointer-events:none;
  filter:drop-shadow(0 20px 50px rgba(var(--glow-rgb),.5));
}
.hero-inner{ position:relative; z-index:1; max-width:60ch; }   /* text paints above the moon */
.hero .moon{ z-index:0; }
/* Light themes: where the dark text crosses the dark moon tile (tablets/phones),
   a faint glow in the page colour keeps it readable. */
html[data-tone="light"] .hero-inner h1,
html[data-tone="light"] .hero-inner p,
html[data-tone="light"] .hero-inner .eyebrow{
  text-shadow:0 0 1px rgba(var(--bg-rgb),.95), 0 0 3px rgba(var(--bg-rgb),.9), 0 0 8px rgba(var(--bg-rgb),.75);
}
.hero h1{ font-size:clamp(32px,5.4vw,54px); font-weight:600; }
.hero h1 em{ font-style:italic; color:var(--violet); }
.hero p{ color:var(--text-soft); font-size:clamp(15px,1.6vw,18px); line-height:1.55; margin:18px 0 26px; max-width:46ch; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px; font-weight:600; font-size:15px;
  transition:transform .18s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--grad); color:var(--on-accent); box-shadow:var(--shadow-glow); }
.btn-primary:hover{ filter:brightness(1.06); box-shadow:0 16px 34px -10px rgba(var(--glow-rgb),.7); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--text); background:rgba(var(--ink-rgb),.03); }
.btn-ghost:hover{ background:rgba(var(--ink-rgb),.07); }

/* ---------- Section rows ---------- */
.row-head{ display:flex; align-items:baseline; justify-content:space-between; margin:34px 0 16px; gap:16px; }
.row-head h2{ font-size:clamp(20px,2.6vw,26px); }
.row-head a{ color:var(--text-mute); font-size:14px; font-weight:500; white-space:nowrap; }
.row-head a:hover{ color:var(--violet); }

.hscroll{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(158px,180px);
  gap:16px; overflow-x:auto; padding:4px 4px 14px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
  scrollbar-color:var(--surface-hi) transparent;
}
.hscroll::-webkit-scrollbar{ height:8px; }
.hscroll::-webkit-scrollbar-thumb{ background:var(--surface-hi); border-radius:8px; }
.hscroll > *{ scroll-snap-align:start; }

/* Tonight's Mood spotlight banner (rotates daily) */
.mood-spot{
  border-radius:var(--radius-lg); border:1px solid var(--line-strong);
  padding:clamp(18px,3vw,26px) clamp(16px,3vw,26px) 6px;
  margin:38px 0 6px;
  background:
    radial-gradient(520px 300px at 92% -30%, rgba(var(--violet-rgb),.30), transparent 60%),
    linear-gradient(150deg, var(--panel-a), var(--panel-b) 72%);
}
.mood-spot .ms-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.mood-spot .ms-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:600; color:var(--violet); }
.mood-spot .ms-shuffle{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--text-soft);
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line-strong); background:rgba(var(--ink-rgb),.05);
  transition:color .15s, border-color .15s, background .15s, transform .15s;
}
.mood-spot .ms-shuffle:hover{ color:var(--violet); border-color:var(--violet); background:rgba(var(--violet-rgb),.12); }
.mood-spot .ms-shuffle:active{ transform:scale(.94); }
@media (max-width:520px){ .mood-spot .ms-shuffle span{ display:none; } .mood-spot .ms-shuffle{ padding:6px 10px; } }
.mood-spot .ms-title{ font-size:clamp(22px,3vw,30px); font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mood-spot .ms-emoji{ font-size:1.15em; line-height:1; }
.mood-spot .ms-blurb{ color:var(--text-soft); font-size:14.5px; line-height:1.5; margin:8px 0 2px; max-width:52ch; }
.mood-spot .ms-link{ display:inline-block; color:var(--text-mute); font-size:14px; font-weight:500; margin:2px 0 8px; cursor:pointer; }
.mood-spot .ms-link:hover{ color:var(--violet); }
.mood-spot .hscroll{ margin:0 -4px; padding-bottom:8px; }

/* ---------- Home: Blind Date (pitch cards, title hidden until Reveal) ---------- */
.bd-head{ align-items:flex-end; }
.bd-sub{ margin:6px 0 0; color:var(--text-mute); font-size:14px; }
.blind-date .ms-shuffle{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; flex:0 0 auto;
  font-size:12.5px; font-weight:600; color:var(--text-soft); padding:6px 12px; border-radius:999px;
  border:1px solid var(--line-strong); background:rgba(var(--ink-rgb),.05); transition:color .15s, border-color .15s, background .15s; }
.blind-date .ms-shuffle:hover{ color:var(--violet); border-color:var(--violet); background:rgba(var(--violet-rgb),.12); }
.bd-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px,1.8vw,18px); }
.bd-card{ position:relative; border-radius:var(--radius); border:1px solid rgba(var(--rose-rgb),.28); min-height:208px;
  padding:18px 18px 16px; display:flex; flex-direction:column;
  background:radial-gradient(300px 160px at 100% 0%, rgba(var(--rose-rgb),.16), transparent 70%),
             linear-gradient(160deg, var(--panel-a), var(--panel-b));
  transition:border-color .2s var(--ease), transform .2s var(--ease); }
.bd-card:hover{ border-color:rgba(var(--rose-rgb),.5); }
.bd-card.is-revealed{ border-color:rgba(var(--violet-rgb),.45); }
.bd-card.bd-in{ animation:bdIn .35s var(--ease); }
@keyframes bdIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.bd-front, .bd-back{ display:flex; flex-direction:column; flex:1; }
/* Home cards open on the Blind Date page when clicked (outside their buttons). */
.bd-card.bd-clickable{ cursor:pointer; }
.bd-card.bd-clickable:hover{ transform:translateY(-2px); }
.bd-num{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rose); font-weight:700; }
.bd-pitch{ font-family:"Fraunces",serif; font-size:clamp(17px,1.6vw,19.5px); line-height:1.42; color:var(--text); margin:10px 0 12px; flex:1; }
.bd-pitch-sm{ font-size:14.5px; color:var(--text-soft); flex:1; margin:12px 0; }
.bd-hints{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.bd-hints span{ font-size:11.5px; padding:3px 9px; border-radius:999px; color:var(--text-soft); border:1px solid var(--line-strong); }
.bd-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bd-btn{ padding:9px 18px; font-size:14px; }
.bd-ghost{ padding:9px 14px; border-radius:999px; font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  color:var(--text-soft); border:1px solid var(--line-strong); background:rgba(var(--ink-rgb),.04); }
.bd-ghost:hover{ color:var(--text); background:rgba(var(--ink-rgb),.09); }
.bd-ghost.on{ color:var(--ok); border-color:rgba(var(--ok-rgb),.45); }
.bd-who{ display:flex; gap:12px; align-items:center; }
.bd-cover{ position:relative; width:58px; height:80px; flex:0 0 auto; border-radius:9px; overflow:hidden; }
.bd-cover .cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Revealed home card: a big centred cover on top. */
.bd-cover.bd-cover-lg{ display:block; width:110px; height:154px; margin:2px auto 12px; border-radius:12px; box-shadow:0 12px 26px -14px rgba(0,0,0,.6); }
.is-revealed .bd-id{ text-align:center; }
.is-revealed .bd-meta{ justify-content:center; }
.bd-id{ min-width:0; }
.bd-title{ display:block; font-family:"Fraunces",serif; font-weight:600; font-size:17px; line-height:1.25; color:var(--text); margin:3px 0 6px; }
.bd-title:hover{ color:var(--violet); }
.bd-meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.bd-score{ color:var(--gold); font-weight:600; }
@media (max-width:900px){ .bd-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.bd-head-r{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.bd-head-r a{ color:var(--text-mute); font-size:14px; font-weight:500; white-space:nowrap; }
.bd-head-r a:hover{ color:var(--violet); }
.bd-hints .bdp-18{ color:var(--bad); border-color:rgba(var(--bad-rgb),.5); }
.bd-hints span.pace-fast, .bd-hints span.pace-steady, .bd-hints span.pace-slowburn{ color:var(--text); }

/* ---------- Binge Stacks (blog block + index) ---------- */
.stack-block{ margin:26px 0; padding:18px 20px; border-radius:var(--radius-lg); border:1px solid rgba(var(--violet-rgb),.35);
  background:linear-gradient(160deg, var(--panel-a), var(--panel-b)); }
.stk-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.stk-badge{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding:5px 12px; border-radius:999px;
  background:var(--grad); color:var(--on-accent); }
.stk-chain{ font-size:13.5px; color:var(--text-soft); font-weight:500; }
.stk-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.stk-step{ position:relative; display:flex; gap:14px; padding-bottom:22px; }
.stk-step:last-child{ padding-bottom:0; }
.stk-step:not(:last-child)::before{ content:""; position:absolute; left:15px; top:34px; bottom:4px; width:2px; border-radius:2px;
  background:linear-gradient(rgba(var(--violet-rgb),.6), rgba(var(--blue-rgb),.25)); }
.stk-num{ position:relative; flex:0 0 32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:14px;
  background:var(--grad); color:var(--on-accent); }
.stk-body{ flex:1; min-width:0; }
.stk-label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--rose); margin:6px 0 8px; }
.stk-card{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:12px; border:1px solid var(--line); background:var(--surface);
  transition:border-color .18s, transform .18s var(--ease); max-width:520px; }
.stk-card:hover{ border-color:var(--violet); transform:translateY(-1px); }
.stk-cov{ position:relative; width:48px; height:66px; border-radius:8px; overflow:hidden; flex:0 0 auto; display:grid; place-items:center; }
.stk-cov .cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stk-cov-18{ background:rgba(var(--bad-rgb),.15); color:var(--bad); font-weight:700; font-size:13px; }
.stk-name{ display:flex; flex-direction:column; gap:2px; font-family:"Fraunces",serif; font-weight:600; font-size:16px; color:var(--text); }
.stk-name small{ font-family:"Instrument Sans",sans-serif; font-weight:500; font-size:12px; color:var(--text-mute); }
.stk-missing{ font-size:13px; color:var(--text-mute); }
.stk-note{ margin:8px 0 0; font-size:14.5px; line-height:1.6; color:var(--text-soft); }
.stk-index{ display:grid; gap:12px; }   /* full content width, like Pick My Next Read */
.stk-idx{ display:flex; gap:16px; align-items:center; padding:14px; border-radius:var(--radius); border:1px solid var(--line-strong); background:var(--surface);
  transition:border-color .18s, transform .18s var(--ease); }
.stk-idx:hover{ border-color:var(--violet); transform:translateY(-2px); }
.stk-idx-covs{ display:flex; flex:0 0 auto; }
.stk-idx-cov{ position:relative; width:52px; height:72px; border-radius:8px; overflow:hidden; border:2px solid var(--surface); }
.stk-idx-cov + .stk-idx-cov{ margin-left:-18px; }
.stk-idx-cov .cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stk-idx-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.stk-idx-body b{ font-family:"Fraunces",serif; font-size:18px; color:var(--text); }
.stk-idx-ex{ font-size:13.5px; color:var(--text-soft); line-height:1.5; }
.stk-idx-n{ font-size:12px; color:var(--text-mute); }
@media (max-width:560px){ .stk-idx{ flex-direction:column; align-items:flex-start; } }

/* ---------- Help me remember ---------- */
.hmr-form textarea{ box-sizing:border-box; width:100%; padding:14px 16px; border-radius:var(--radius); font:inherit; font-size:16px; line-height:1.5; resize:vertical;
  color:var(--text); background:var(--surface); border:1px solid var(--line-strong); }
.hmr-form textarea:focus{ outline:none; border-color:var(--violet); }
.hmr-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:12px 0 24px; }
.hmr-row .btn{ padding:11px 22px; font-size:14.5px; }
.hmr-tip{ font-size:13px; color:var(--text-mute); }
.hmr-h{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--text-mute); margin-bottom:10px; }
.hmr-list{ display:grid; gap:10px; }
.hmr-item{ display:flex; gap:14px; align-items:flex-start; padding:12px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface);
  transition:border-color .18s, transform .18s var(--ease); }
.hmr-item:hover{ border-color:var(--violet); transform:translateY(-1px); }
.hmr-cov{ position:relative; width:56px; height:78px; border-radius:9px; overflow:hidden; flex:0 0 auto; }
.hmr-cov .cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hmr-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.hmr-title{ font-family:"Fraunces",serif; font-size:17px; color:var(--text); }
.hmr-alt{ font-size:12.5px; color:var(--text-mute); font-style:italic; }
.hmr-clues{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.hmr-clue{ font-size:12px; padding:3px 10px; border-radius:999px; color:var(--text); background:rgba(var(--violet-rgb),.12); border:1px solid rgba(var(--violet-rgb),.35); }
.hmr-none{ padding:16px 18px; border-radius:var(--radius); border:1px dashed var(--line-strong); color:var(--text-soft); font-size:14px; line-height:1.55; }
.hmr-none a{ color:var(--violet); }
.hmr-foot{ margin-top:14px; }

/* ---------- Compare page ---------- */
.cmp-link{ display:block; text-align:center; margin:14px 0 18px; padding:9px 12px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:var(--text-soft); border:1px solid var(--line-strong); background:rgba(var(--ink-rgb),.03); }
.cmp-link:hover{ color:var(--text); border-color:var(--violet); }
.cmp-slots{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:start; margin-bottom:22px; }
.cmp-vs{ align-self:center; font-family:"Fraunces",serif; font-style:italic; font-size:22px; color:var(--text-mute); }
.cmp-slot{ border:1px solid var(--line-strong); border-radius:var(--radius); padding:14px; background:var(--surface); min-width:0; }
.cmp-slot-h{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--text-mute); margin-bottom:10px; }
.cmp-head{ display:flex; align-items:center; gap:12px; }
.cmp-cov{ position:relative; width:56px; height:78px; border-radius:9px; overflow:hidden; flex:0 0 auto; }
.cmp-cov .cover-img, .cmp-opt-cov .cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cmp-title{ flex:1; min-width:0; font-family:"Fraunces",serif; font-weight:600; font-size:17px; line-height:1.25; color:var(--text); }
.cmp-change{ padding:6px 12px; border-radius:999px; font:inherit; font-size:12.5px; cursor:pointer; color:var(--text-soft); border:1px solid var(--line-strong); background:transparent; }
.cmp-change:hover{ border-color:var(--violet); color:var(--text); }
.cmp-search{ margin:0 0 10px; }
.cmp-auto{ width:100%; justify-content:center; margin-bottom:12px; padding:11px 16px; font-size:14px; white-space:normal; text-align:center; }
.cmp-sub{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); font-weight:700; margin:12px 0 8px; }
.cmp-opts{ display:grid; gap:6px; max-height:300px; overflow:auto; }
.cmp-opt{ display:flex; align-items:center; gap:10px; padding:6px; border-radius:10px; text-align:left; font:inherit; font-size:13.5px; cursor:pointer;
  color:var(--text); background:transparent; border:1px solid transparent; }
.cmp-opt:hover{ background:rgba(var(--ink-rgb),.05); border-color:var(--line); }
.cmp-opt-cov{ position:relative; width:30px; height:42px; border-radius:6px; overflow:hidden; flex:0 0 auto; }
.cmp-none{ font-size:13px; color:var(--text-mute); margin:6px 0; }
.cmp-verdict{ border:1px solid rgba(var(--violet-rgb),.35); background:var(--grad-soft); border-radius:var(--radius); padding:14px 18px; margin-bottom:18px; }
.cmp-verdict ul{ margin:6px 0 0; padding-left:18px; font-size:14.5px; line-height:1.6; color:var(--text); }
.cmp-table-wrap{ overflow-x:auto; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); }
.cmp-table{ width:100%; border-collapse:collapse; font-size:14px; }
.cmp-table th, .cmp-table td{ padding:10px 14px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line); }
.cmp-table thead th{ font-family:"Fraunces",serif; font-size:15px; font-weight:600; color:var(--text); }
.cmp-table tbody th{ width:24%; font-weight:500; color:var(--text-mute); font-size:13px; }
.cmp-table td{ width:38%; color:var(--text); }
.cmp-table tr.cmp-sec th{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--violet); background:rgba(var(--ink-rgb),.03); }
.cmp-na{ color:var(--text-faint); }
.cmp-big{ font-family:"Fraunces",serif; font-size:20px; }
.cmp-bar{ display:inline-block; width:80px; height:6px; border-radius:6px; background:rgba(var(--ink-rgb),.08); vertical-align:middle; overflow:hidden; margin-right:6px; }
.cmp-bar i{ display:block; height:100%; background:var(--grad); }
.cmp-table .pf-segs{ display:inline-flex; vertical-align:middle; }
.cmp-table .pf-segs i{ width:14px; }
.cmp-binge{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:600; border:1px solid var(--line-strong); }
.cmp-binge.tone-good{ color:var(--ok); border-color:rgba(var(--ok-rgb),.5); background:rgba(var(--ok-rgb),.1); }
.cmp-binge.tone-ok{ color:var(--blue); border-color:rgba(var(--blue-rgb),.5); background:rgba(var(--blue-rgb),.1); }
.cmp-binge.tone-warn{ color:var(--gold); border-color:rgba(var(--gold-rgb),.5); background:rgba(var(--gold-rgb),.1); }
.cmp-binge.tone-bad{ color:var(--bad); border-color:rgba(var(--bad-rgb),.5); background:rgba(var(--bad-rgb),.1); }
.cmp-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.cmp-actions .btn{ padding:10px 18px; font-size:14px; }
@media (max-width:700px){
  .cmp-slots{ grid-template-columns:1fr; }
  .cmp-vs{ justify-self:center; }
  .cmp-table th, .cmp-table td{ padding:9px 10px; font-size:13px; }
  .cmp-table tbody th{ width:28%; }
  .cmp-bar{ width:46px; }
}

/* ---------- Blind Date page ---------- */
.bdp-card{ border-radius:var(--radius-lg); border:1px solid rgba(var(--rose-rgb),.35); padding:clamp(22px,4vw,40px);
  background:radial-gradient(520px 260px at 100% 0%, rgba(var(--rose-rgb),.18), transparent 70%), linear-gradient(160deg, var(--panel-a), var(--panel-b));
  box-shadow:var(--shadow); }
.bdp-card.is-revealed{ border-color:rgba(var(--violet-rgb),.5); }
.bdp-eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--rose); font-weight:700; }
.bdp-pitch{ font-family:"Fraunces",serif; font-style:italic; font-size:clamp(24px,3.4vw,34px); line-height:1.35; color:var(--text); margin:14px 0 16px; }
.bdp-hints{ margin-bottom:20px; }
.bdp-hints span{ font-size:12.5px; padding:5px 12px; }
.bdp-who{ display:flex; gap:24px; align-items:center; padding:20px 0 22px; border-top:1px solid var(--line); margin-top:4px; }
.bdp-cover{ position:relative; width:200px; height:280px; border-radius:16px; overflow:hidden; flex:0 0 auto; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); }
.bdp-cover .cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bdp-title{ display:block; font-family:"Fraunces",serif; font-weight:600; font-size:clamp(20px,2.6vw,26px); color:var(--text); margin:4px 0 8px; line-height:1.2; }
.bdp-title:hover{ color:var(--violet); }
.bdp-meta{ display:flex; align-items:center; gap:10px; font-size:13px; }
.bdp-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.bdp-actions .btn{ padding:11px 20px; font-size:14.5px; }
.bdp-share{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.bdp-sbtn{ padding:7px 13px; border-radius:999px; font:inherit; font-size:13px; font-weight:500; cursor:pointer; color:var(--text-soft);
  border:1px solid var(--line-strong); background:rgba(var(--ink-rgb),.04); }
.bdp-sbtn:hover{ color:var(--text); border-color:var(--violet); }
.bdp-adult{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:13.5px; color:var(--text-soft); cursor:pointer; }
.bdp-adult input{ accent-color:var(--violet); }
.bdp-more{ margin-top:14px; font-size:14px; color:var(--text-mute); }
.bdp-more a{ color:var(--violet); }
.bdp-empty{ padding:40px 0; color:var(--text-mute); }
@media (max-width:520px){
  .bd-grid{ gap:10px; }
  .bd-card{ padding:14px 13px 13px; min-height:190px; }
  .bd-pitch{ font-size:15.5px; }
  .bd-btn, .bd-ghost{ padding:8px 12px; font-size:13px; }
  .bd-card:nth-child(n+5){ display:none; }   /* 2×2 on phones keeps the section short */
  .bd-who{ flex-direction:column; align-items:flex-start; gap:8px; }
  .bd-cover{ width:46px; height:64px; }
  .bd-cover.bd-cover-lg{ width:84px; height:118px; }
  .bdp-who{ flex-direction:column; text-align:center; }
  .bdp-who .bdp-meta{ justify-content:center; }
  .bdp-cover{ width:180px; height:252px; }
  .bd-title{ font-size:15px; }
  .bd-meta{ flex-wrap:wrap; }
  .blind-date .ms-shuffle span{ display:none; }
}

/* ---------- Title cards ---------- */
.grid{
  display:grid; gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
}
.card{
  text-align:left; width:100%; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
  display:flex; flex-direction:column;
}
.card:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.card:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.card .cover{
  aspect-ratio:3/4; position:relative;
  display:flex; align-items:flex-end; padding:12px;
}
.card .cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(6,7,20,.72));
}
/* Real cover art layered over the gradient (first child → sits below the
   ::after darkening overlay and any badges). Inherits the container's radius. */
.cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
/* Discourage casual saving of cover art + blog images (no drag-out, no iOS
   long-press "Save image"). Paired with the contextmenu guard in the script;
   real protection is the .htaccess hotlink rule — a browser that shows an
   image always has the file. */
img{ -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }   /* every image: no drag-out, no iOS long-press "Save image" */
.card .cover .badge{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:10.5px; font-weight:600; letter-spacing:.04em;
  padding:4px 9px; border-radius:999px;
  background:rgba(11,13,32,.6); color:var(--text); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
}
.card .cover .cov-title{
  position:relative; z-index:2; font-family:"Fraunces",serif; font-weight:600;
  font-size:16px; line-height:1.16; color:#fff; text-decoration:none;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
a.cov-title:hover{ text-decoration:none; }
.card .meta{ padding:11px 13px 14px; display:flex; flex-direction:column; gap:8px; }
.card .meta .t{ font-weight:600; font-size:14px; line-height:1.25; }
.card .tags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.tag{
  font-size:11px; color:var(--text-soft);
  padding:3px 9px; border-radius:999px;
  background:rgba(var(--ink-rgb),.045); border:1px solid var(--line);
}
/* A long tag that wraps to two lines fills its row; centre + balance the lines so it
   doesn't leave a big empty gap on one side. */
.card .tags .tag{ text-align:center; text-wrap:balance; }
.rr-chip{ display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600;
  color:var(--gold); padding:3px 8px; border-radius:999px;
  background:rgba(var(--gold-rgb),.1); border:1px solid rgba(var(--gold-rgb),.3); font-variant-numeric:tabular-nums; }
.rr-chip:empty{ display:none; }
.rr-chip .rr-star{ font-size:11px; line-height:1; }

/* Origin badge (manhwa/manga/manhua) — colour-coded, readable on covers + cards */
.og-badge{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:rgba(var(--bg-rgb),.55); border:1px solid rgba(var(--ink-rgb),.16); }
.og-manhwa{ color:var(--og-manhwa); border-color:rgba(var(--violet-rgb),.55); }
.og-manga{  color:var(--og-manga);  border-color:rgba(var(--rose-rgb),.55); }
.og-manhua{ color:var(--og-manhua); border-color:rgba(var(--gold-rgb),.55); }
.og-webcomic{ color:var(--og-webcomic); border-color:rgba(45,160,150,.55); }
/* Light themes: the page-coloured fill went near-white, so tint each card badge with
   its own colour (as the dark themes read). The cover badge (.og-lg) keeps its glass. */
html[data-tone="light"] .og-badge.og-manhwa:not(.og-lg){ background:rgba(var(--violet-rgb),.13); }
html[data-tone="light"] .og-badge.og-manga:not(.og-lg){  background:rgba(163,69,111,.12); border-color:rgba(163,69,111,.45); }
html[data-tone="light"] .og-badge.og-manhua:not(.og-lg){ background:rgba(134,96,26,.13);  border-color:rgba(134,96,26,.45); }
html[data-tone="light"] .og-badge.og-webcomic:not(.og-lg){ background:rgba(31,122,112,.12); border-color:rgba(31,122,112,.45); }
/* Same tint on the title-page banner badge, layered over its frosted white so it
   stays readable on cover art. */
html[data-tone="light"] .og-lg.og-manhwa{ background:linear-gradient(rgba(var(--violet-rgb),.16), rgba(var(--violet-rgb),.16)), rgba(255,255,255,.86); }
html[data-tone="light"] .og-lg.og-manga{  background:linear-gradient(rgba(163,69,111,.14), rgba(163,69,111,.14)), rgba(255,255,255,.86); border-color:rgba(163,69,111,.45); }
html[data-tone="light"] .og-lg.og-manhua{ background:linear-gradient(rgba(134,96,26,.15), rgba(134,96,26,.15)), rgba(255,255,255,.86); border-color:rgba(134,96,26,.45); }
html[data-tone="light"] .og-lg.og-webcomic{ color:var(--og-webcomic); background:linear-gradient(rgba(31,122,112,.14), rgba(31,122,112,.14)), rgba(255,255,255,.86); border-color:rgba(31,122,112,.45); }
/* The large badge sits on cover art (title hero) → always the dark-glass look. */
.og-badge.og-lg{ padding:5px 11px; font-size:11px; backdrop-filter:blur(6px);
  background:rgba(11,13,32,.55); border-color:rgba(255,255,255,.16); }
.og-lg.og-manhwa{ color:#c8b6ff; border-color:rgba(167,139,250,.55); }
.og-lg.og-manga{  color:#f7bcd6; border-color:rgba(244,166,200,.55); }
.og-lg.og-manhua{ color:#f3d99e; border-color:rgba(240,207,138,.55); }
.og-lg.og-webcomic{ color:#9fe3d8; border-color:rgba(120,210,195,.55); }

/* "New" — brand-new series this year (isNewRelease / the New to Discover rule).
   Card: under the status badge; title page: after the rating badge. Theme accent fill. */
.card .cover .badge-new{
  position:absolute; top:40px; left:10px; z-index:2;
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; background:var(--grad); color:var(--on-accent);
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.d-badge.badge-new-d, html[data-tone="light"] .d-badge.badge-new-d{
  background:var(--grad); color:var(--on-accent); border-color:transparent;
  font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}

/* horizontal-scroll variant */
.hscroll .card .meta{ padding:10px 12px 12px; }

/* ---------- Chips (filters / tropes) ---------- */
.chip-wrap{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:999px; font-size:14px; font-weight:500;
  color:var(--text-soft); background:var(--surface);
  border:1px solid var(--line); cursor:pointer; text-decoration:none;
  transition:transform .16s var(--ease), border-color .18s, background .18s, color .18s;
}
a.chip:hover, a.chip:visited{ color:var(--text-soft); }
.facet-actions{ margin:2px 0 14px; }
/* "Best X" guide on facet pages (SEO Phase 3) — markup from mt_guide_html / guideHTML. */
.facet-guide{ margin:-6px 0 34px; }
.guide-byline{ font-size:13px; color:var(--text-mute); margin-bottom:16px; }
.guide-byline a{ color:var(--text-soft); font-weight:600; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; }
.guide-byline a:hover{ color:var(--violet); text-decoration-color:currentColor; }
.facet-guide p{ color:var(--text-soft); font-size:16px; line-height:1.72; margin:0 0 16px; }
.guide-intro p:first-child{ color:var(--text); font-size:17px; }
.facet-guide h2, .guide-all{ font-size:clamp(20px,2.6vw,24px); margin:30px 0 14px; color:var(--text); text-wrap:balance; }
.facet-guide h3{ font-size:17px; margin:20px 0 8px; color:var(--text); }
.guide-quick ul{ margin:0; padding-left:20px; display:grid; gap:9px; color:var(--text-soft); line-height:1.6; }
.guide-quick strong{ color:var(--text); }
.guide-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.guide-pick{ display:flex; gap:16px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.gp-cover{ flex:0 0 84px; width:84px; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:var(--grad-soft); display:block; }
.gp-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.gp-body{ min-width:0; flex:1; }
.gp-body h3{ margin:2px 0 4px; font-size:17px; line-height:1.3; }
.gp-body h3 a{ color:var(--text); text-decoration:none; }
.gp-body h3 a:hover{ color:var(--violet); }
.gp-n{ color:var(--violet); font-weight:700; }
.gp-meta{ font-size:12.5px; color:var(--text-mute); margin-bottom:8px; }
.gp-body p{ font-size:15px; margin:0; }
@media (min-width:760px){ .guide-list{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* Top-list carousel: pages of 4 picks, swipe/scroll sideways; arrows once JS is ready. */
.gp-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
.gp-carousel.gp-ready .gp-track{ scrollbar-width:none; }
.gp-carousel.gp-ready .gp-track::-webkit-scrollbar{ display:none; }
.gp-page{ flex:0 0 100%; min-width:0; scroll-snap-align:start; align-content:start; }
.gp-nav{ display:none; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.gp-carousel.gp-ready .gp-nav{ display:flex; }
.gp-btn{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text);
  font:600 14px/1 "Instrument Sans", system-ui, sans-serif; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s, transform .15s var(--ease); }
.gp-btn svg{ flex:0 0 auto; }
.gp-btn:hover:not(:disabled){ border-color:var(--violet); color:var(--violet); transform:translateY(-1px); }
.gp-btn:focus-visible, .gp-dot:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.gp-next:not(:disabled){ background:var(--grad); color:var(--on-accent); border-color:transparent; }
.gp-next:hover:not(:disabled){ color:var(--on-accent); filter:brightness(1.06); }
.gp-btn:disabled{ opacity:.4; cursor:default; }
.gp-dots{ display:flex; align-items:center; justify-content:center; gap:8px; flex:1; }
.gp-dot{ width:8px; height:8px; padding:0; border:0; border-radius:999px; background:rgba(var(--ink-rgb),.22); cursor:pointer; transition:width .2s var(--ease), background .2s; }
.gp-dot:hover{ background:rgba(var(--violet-rgb),.55); }
.gp-dot.on{ width:24px; background:var(--violet); }
/* "1 / N" is kept for screen readers; the dots show it visually. */
.gp-count{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* FAQ: collapsible Q&A (native <details>, works without JS). */
.guide-qa{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin:0 0 10px; }
.guide-qa > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:14px 16px; }
.guide-qa > summary::-webkit-details-marker{ display:none; }
.guide-qa > summary h3{ margin:0; font-size:16px; flex:1; }
.guide-qa > summary::after{ content:""; width:9px; height:9px; flex:0 0 auto; border-right:2px solid var(--text-mute); border-bottom:2px solid var(--text-mute); transform:rotate(45deg) translateY(-3px); transition:transform .18s var(--ease); }
.guide-qa[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }
.guide-qa > summary:hover h3{ color:var(--violet); }
.guide-qa > summary:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; border-radius:var(--radius); }
.qa-a{ padding:0 16px 4px; }
.qa-a p{ font-size:15.5px; }
/* Recommendation finder (SEO Phase 4) */
.finder-panel{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:16px 18px; margin:0 0 16px; }
.fp-label{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); font-weight:600; margin-bottom:10px; }
.fp-label span{ text-transform:none; letter-spacing:0; font-weight:400; margin-left:6px; }
.fp-moods{ margin-bottom:14px; gap:7px; }
.fp-moods .chip{ padding:7px 13px; font-size:13.5px; }
.fp-more{ background:none; border:0; padding:8px 6px; color:var(--violet); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.fp-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px 12px; }
.fp-row label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--text-mute); font-weight:600; min-width:0; }
.fp-row select{ width:100%; min-width:0; padding:9px 10px; border-radius:10px; border:1px solid var(--line-strong); background:var(--bg); color:var(--text); font:inherit; font-size:14px; font-weight:400; }
.fp-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.fp-foot .fp-check{ flex-direction:row; align-items:center; gap:7px; font-weight:500; color:var(--text-soft); cursor:pointer; }
.fp-foot .fp-sort{ flex-direction:row; align-items:center; gap:8px; }
.fp-foot .fp-sort select{ width:auto; }
.fp-spacer{ flex:1; }
@media (max-width:760px){ .fp-row{ grid-template-columns:repeat(2, minmax(0,1fr)); } .fp-foot{ display:flex; } }
.finder-starts{ margin-top:38px; padding-top:8px; border-top:1px solid var(--line); }
.finder-starts h2{ font-size:clamp(20px,2.6vw,24px); margin:26px 0 12px; color:var(--text); }
.finder-starts h3{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin:16px 0 8px; }
.fs-lead{ color:var(--text-soft); font-size:15px; line-height:1.65; margin:0 0 10px; }
.fs-n{ font-size:11.5px; color:var(--text-mute); margin-left:2px; }
.fs-guide{ font-size:11px; color:var(--violet); font-weight:600; }
.finder-starts .guide-qa > summary h3{ font-size:16px; letter-spacing:0; text-transform:none; color:var(--text); }
.page-head p.pick-alt{ color:var(--text-mute); font-size:14px; margin:8px 0 0; }
.pick-alt a, .pa-method{ color:var(--violet); text-decoration:underline; text-underline-offset:3px; }
.pa-method{ display:inline-block; font-size:13px; margin-top:10px; }
/* Manga / manhua section on facet pages */
.facet-other{ margin-top:40px; padding-top:6px; border-top:1px solid var(--line); }
.facet-other h2{ font-size:clamp(19px,2.4vw,22px); margin:26px 0 6px; color:var(--text); }
.fo-note{ color:var(--text-mute); font-size:15px; margin:0 0 16px; }   /* full width, same as the page intros */
.facet-twin{ margin-top:12px; font-size:14.5px; color:var(--text-soft); }
.facet-twin a{ color:var(--violet); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.hub-small{ text-align:center; color:var(--text-mute); font-size:14px; margin-top:18px; }
/* "From the blog" on facet pages */
.facet-blog{ margin-top:40px; padding-top:6px; border-top:1px solid var(--line); }
.facet-blog h2{ font-size:clamp(20px,2.6vw,24px); margin:26px 0 14px; color:var(--text); }
.fb-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
@media (max-width:760px){ .fb-grid{ grid-template-columns:1fr; } }
.fb-card{ display:flex; flex-direction:column; gap:7px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--text); text-decoration:none; transition:border-color .18s, transform .16s var(--ease); }
.fb-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.fb-title{ font-family:"Fraunces", Georgia, serif; font-size:17px; font-weight:700; line-height:1.3; transition:color .15s; }
.fb-card:hover .fb-title{ color:var(--violet); }
.fb-ex{ font-size:14px; line-height:1.55; color:var(--text-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fb-meta{ font-size:12px; color:var(--text-mute); margin-top:auto; }
.fb-all{ display:inline-block; margin-top:14px; font-size:14px; color:var(--violet); text-decoration:underline; text-underline-offset:3px; }
.guide-outro{ margin-top:22px; }
.guide-all{ margin-top:8px; }
@media (max-width:520px){ .gp-cover{ flex-basis:64px; width:64px; } .guide-pick{ gap:12px; padding:12px; } }
.chip:hover{ transform:translateY(-2px); color:var(--text); border-color:var(--line-strong); }
.chip.big{ padding:14px 20px; font-size:15px; }
.chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--grad); flex:0 0 auto; }
.chip.selected{ background:var(--grad); color:var(--on-accent); border-color:transparent; font-weight:600; }
.chip.selected .dot{ background:var(--on-accent); }

/* Browse hub segment switcher (Tropes / Genres / Moods / Leads) */
.seg-bar{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.seg{ padding:9px 16px; border-radius:999px; font-size:14px; font-weight:600;
  color:var(--text-soft); background:var(--surface); border:1px solid var(--line);
  text-decoration:none; cursor:pointer; transition:border-color .18s, background .18s, color .18s; }
.seg:hover{ color:var(--text); border-color:var(--line-strong); }
.seg.active{ background:var(--grad); color:var(--on-accent); border-color:transparent; }
.browse-tools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.browse-tools .searchbar{ flex:1 1 240px; margin:0; }
.browse-tools .sort-control{ flex:0 0 auto; }

.trope-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); }
.trope-card{
  padding:18px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface);
  display:flex; flex-direction:column; gap:8px; text-align:left;
  cursor:pointer; text-decoration:none; color:var(--text);
  transition:transform .2s var(--ease), border-color .2s, background .2s;
}
.trope-card:hover{ transform:translateY(-3px); border-color:var(--violet); background:var(--surface-2); }
.trope-card .n{ font-family:"Fraunces",serif; font-weight:600; font-size:17px; }
.trope-card .c{ font-size:12px; color:var(--text-mute); }
.trope-card .spark{ width:26px; height:26px; opacity:.7; margin-bottom:2px; }

/* ---------- Empty states ---------- */
.empty{
  text-align:center; padding:clamp(36px,7vw,72px) 24px;
  border:1px dashed var(--line-strong); border-radius:var(--radius-lg);
  background:radial-gradient(500px 300px at 50% -10%, rgba(var(--glow-rgb),.14), transparent 70%);
}
.empty .moon{ width:76px; margin:0 auto 20px; opacity:.9; filter:drop-shadow(0 10px 24px rgba(var(--glow-rgb),.5)); }
.empty h3{ font-size:22px; margin-bottom:8px; }
.empty p{ color:var(--text-mute); margin:0 auto 22px; max-width:40ch; font-size:14.5px; line-height:1.5; }

/* ---------- Search / bar ---------- */
.searchbar{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:12px 18px; margin-bottom:18px;
}
.searchbar svg{ width:18px; height:18px; opacity:.6; flex:0 0 auto; }
.searchbar input{
  flex:1; background:none; border:none; color:var(--text); font-size:15px; outline:none; min-width:0;
}
.searchbar input::placeholder{ color:var(--text-faint); }

.result-count{ color:var(--text-mute); font-size:13.5px; margin:6px 0 16px; }

/* ---------- Filter toolbar / panel ---------- */
.filter-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.filter-toggle{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px; border-radius:999px; font-size:14px; font-weight:500;
  color:var(--text); background:var(--surface); border:1px solid var(--line);
  transition:border-color .18s, background .18s;
}
.filter-toggle:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.filter-toggle svg{ width:17px; height:17px; opacity:.85; }
.filter-toggle[aria-expanded="true"]{ background:var(--grad-soft); border-color:var(--line-strong); }
.fbadge{
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--grad); color:var(--on-accent); font-size:11.5px; font-weight:700;
  display:inline-grid; place-items:center;
}
.clear-filters{ color:var(--text-mute); font-size:13.5px; padding:6px 4px; margin-left:auto; }
.clear-filters:hover{ color:var(--violet); }

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

/* Sort dropdown — matches the filter-toggle pill. */
.sort-control{ display:inline-flex; align-items:center; }
.sort-control select{
  appearance:none; -webkit-appearance:none;
  padding:10px 34px 10px 16px; border-radius:999px; font-size:14px; font-weight:500;
  color:var(--text); background-color:var(--surface); border:1px solid var(--line);
  cursor:pointer; transition:border-color .18s, background-color .18s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8ab0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
}
.sort-control select:hover{ border-color:var(--line-strong); background-color:var(--surface-2); }
.sort-control select:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }
.sort-control option{ background:var(--surface); color:var(--text); }

/* Pagination — Discover grid pager. */
.pagination{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:22px 0 8px; }
.pagination:empty, .pagination[hidden]{ display:none; }
.pagination .page-btn{
  min-width:38px; padding:8px 12px; border-radius:10px; font-size:14px; font-weight:600;
  color:var(--text); background:var(--surface); border:1px solid var(--line);
  transition:border-color .18s, background .18s, color .18s;
}
.pagination .page-btn:hover:not(:disabled):not(.current){ border-color:var(--line-strong); background:var(--surface-2); }
.pagination .page-btn.current{ background:var(--grad); border-color:transparent; color:var(--on-accent); }
.pagination .page-btn:disabled{ opacity:.4; cursor:default; }
.pagination .page-gap{ padding:0 4px; color:var(--text-mute); }

.active-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.active-pills:empty{ display:none; }
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 8px 6px 13px; border-radius:999px; font-size:12.5px; font-weight:500;
  background:var(--grad); color:var(--on-accent);
}
.pill .cat{ opacity:.7; font-weight:600; }
.pill button{ width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  background:rgba(var(--on-accent-rgb),.28); color:var(--on-accent); font-size:13px; line-height:1; }
.pill button:hover{ background:rgba(var(--on-accent-rgb),.5); }

/* Horizontal row of pill dropdowns — each category opens its own popover.
   position+z-index lift the panel (and its popovers) above the results grid,
   which sits later in the DOM. Without this the fade animation's residual
   transform makes the panel its own stacking context and the dropdowns render
   behind the cards. */
.filter-panel{
  position:relative; z-index:50;
  display:flex; flex-wrap:wrap; gap:10px;
  padding:0; margin-bottom:16px; border:0; background:none;
  animation:fade .28s var(--ease) both;
}
.filter-group{ position:relative; }
.filter-group .group-toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 14px; border-radius:999px;
  color:var(--text-soft); background:var(--surface); border:1px solid var(--line);
  font-size:13px; font-weight:500; white-space:nowrap;
  transition:color .18s, border-color .18s, background .18s;
}
.filter-group .group-toggle:hover{ color:var(--text); border-color:var(--line-strong); background:var(--surface-2); }
.filter-group:not(.collapsed) .group-toggle{ background:var(--grad-soft); border-color:var(--line-strong); color:var(--text); }
.filter-group.has-active .group-toggle{ border-color:rgba(var(--violet-rgb),.55); color:var(--text); }
.filter-group .gt-count{
  font-size:11px; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:inline-grid; place-items:center; color:var(--on-accent); background:var(--grad);
}
.filter-group .gt-count[hidden]{ display:none; }
.filter-group .gt-chev{ color:var(--text-mute); transition:transform .22s var(--ease); flex:0 0 auto; }
.filter-group:not(.collapsed) .gt-chev{ transform:rotate(180deg); }
.filter-group .group-body{
  position:absolute; top:calc(100% + 8px); left:0; z-index:40;
  min-width:210px; max-width:min(320px,78vw); max-height:280px; overflow-y:auto;
  padding:14px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--line-strong); box-shadow:var(--shadow);
  animation:fade .16s var(--ease) both;
}
.filter-group.collapsed .group-body{ display:none; }
.filter-group .chip-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-group .chip{ padding:7px 13px; font-size:13px; }
@media (max-width:520px){
  .filter-group .group-body{ min-width:min(260px,80vw); }
}

/* ---------- Detail additions ---------- */
.detail-sub{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); font-weight:600; margin-bottom:12px; }

/* "Featured in our guides" — ONE card listing the posts that mention/review
   this title as plain clickable titles. */
.feat-card{ margin:26px 0 24px; padding:16px 18px 8px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); }
.feat-card .detail-sub{ margin:0 0 6px; }
.feat-list{ display:flex; flex-direction:column; }
.feat-post{ display:flex; align-items:baseline; gap:10px; padding:10px 0; color:var(--text); text-decoration:none;
  border-top:1px solid var(--line); }
.feat-post:first-child{ border-top:none; }
.feat-post::after{ content:"→"; margin-left:auto; padding-left:10px; color:var(--text-mute); }
.feat-post:hover .feat-title{ color:var(--violet); }   /* only the title text reacts on hover */
/* Celestial Dreams: its accent (indigo) is too close to its text colour to read
   as a hover, so every text hover in this theme uses its teal (--blue) instead. */
html[data-theme="dreams"] .feat-post:hover .feat-title,
html[data-theme="dreams"] .post-author:hover,
html[data-theme="dreams"] .pa-titles a:hover b,
html[data-theme="dreams"] .post-link:hover,
html[data-theme="dreams"] .post-table .cell-title:hover span,
html[data-theme="dreams"] .set-link:hover,
html[data-theme="dreams"] .legal a:hover,
html[data-theme="dreams"] .row-head a:hover,
html[data-theme="dreams"] .mood-spot .ms-link:hover,
html[data-theme="dreams"] .clear-filters:hover,
html[data-theme="dreams"] .back-link:hover,
html[data-theme="dreams"] .qr-link:hover,
html[data-theme="dreams"] .shc-title:hover,
html[data-theme="dreams"] .cmt-reply-btn:hover,
html[data-theme="dreams"] .cmt-collapse:hover,
html[data-theme="dreams"] .foot-links a:hover,
html[data-theme="dreams"] .auth-forgot:hover{ color:var(--blue); }
html[data-theme="dreams"] .post-author:hover{ text-decoration-color:currentColor; }
.feat-tag{ flex:none; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--on-violet); background:var(--violet); padding:2px 7px; border-radius:999px; }
.feat-title{ font-size:14.5px; font-weight:600; line-height:1.4; transition:color .15s ease; }

/* Detail hero */
.d-hero{
  border-radius:var(--radius-lg); overflow:hidden; position:relative;
  min-height:220px; display:flex; align-items:flex-end; padding:26px;
  border:1px solid var(--line-strong); margin-bottom:20px; box-shadow:var(--shadow);
}
.d-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,7,20,.35) 0%, rgba(6,7,20,.2) 30%, rgba(6,7,20,.85) 100%); }
/* Portrait cover art doesn't crop well into a wide banner, so use it as a
   soft blurred backdrop instead — keeps the mood, no awkward crop. The sharp
   version still shows in the side poster. */
.d-hero .cover-img{ filter:blur(22px) saturate(1.2) brightness(.7); transform:scale(1.2); }
.d-hero-in{ position:relative; z-index:2; width:100%; }
/* Uploaded banner (.has-banner): the picture is shown clean across the top at its OWN
   shape (official banners often have the title logo baked in, so nothing is laid over
   it), height-capped. The badges + title sit in a panel BELOW it, on a blurred, tinted
   copy of the same banner so the two read as one piece. Without a banner the hero keeps
   its compact blurred-cover look. */
.d-hero.has-banner{ display:block; padding:0; min-height:0; }
.d-hero.has-banner::after{ display:none; }
.d-hero .banner-img{ position:relative; z-index:1; display:block; width:100%; height:auto;
  max-height:min(300px, 36vh); object-fit:cover; object-position:center; }
.d-hero-body{ position:relative; overflow:hidden; padding:16px 24px 18px; border-top:1px solid rgba(255,255,255,.12);
  /* Round the panel's own bottom corners and force a real clip: Safari (iPad/iPhone)
     ignores overflow:hidden + border-radius for the blurred layer inside without the mask. */
  border-radius:0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  -webkit-mask-image:-webkit-radial-gradient(white, black); isolation:isolate; }
.d-hero-body .d-badges{ margin-bottom:8px; }
.d-hero-body h1{ font-size:clamp(22px,3.4vw,32px); }
.d-hero-body .banner-blur{ position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px);
  object-fit:cover; filter:blur(30px) saturate(1.25) brightness(.55); }
.d-hero-body::before{ content:""; position:absolute; inset:0; z-index:1; background:rgba(6,7,20,.45); }
.d-hero-body .d-hero-in{ z-index:2; }
html[data-tone="light"] .d-hero-body{ border-top-color:rgba(var(--violet-rgb),.25); }
html[data-tone="light"] .d-hero-body .banner-blur{ filter:blur(30px) saturate(1.15) brightness(1.12); }
html[data-tone="light"] .d-hero-body::before{ background:rgba(var(--bg-rgb),.72); }
.d-hero h1{ font-size:clamp(26px,4.4vw,38px); color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.d-alt{ color:rgba(243,236,224,.72); font-size:14px; margin-top:7px; font-family:"Fraunces",serif; font-style:italic; }
/* Detail body: content on the left, a sticky cover + info panel on the right. */
.detail-grid{ display:flex; gap:38px; align-items:flex-start; }
.detail-content{ order:1; flex:1 1 auto; min-width:0; }        /* left */
.detail-aside{ order:2; flex:0 0 264px; position:sticky; top:24px; } /* right */
.detail-cover{
  position:relative; aspect-ratio:3/4; width:100%; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-strong); box-shadow:var(--shadow);
}
.detail-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%, rgba(6,7,20,.4)); }
/* Light themes: banner + cover poster get a thin accent-colour frame and an accent-tinted
   shadow instead of the grey line and dark drop shadow; no dark fade on the poster. */
html[data-tone="light"] .d-hero,
html[data-tone="light"] .detail-cover{ border-color:rgba(var(--violet-rgb),.45); box-shadow:0 12px 26px -18px rgba(var(--violet-rgb),.5); }
html[data-tone="light"] .detail-cover::after{ background:linear-gradient(180deg,transparent 70%, rgba(var(--violet-rgb),.10)); }
/* The dark placeholder gradient (inline style) peeks out as a thin dark edge around the
   rounded cover/banner — swap it for a pale accent tint in light themes. */
html[data-tone="light"] .d-hero,
html[data-tone="light"] .detail-cover{ background:rgba(var(--violet-rgb),.14) !important; }
.detail-cover .dc-badge{
  position:absolute; top:12px; left:12px; z-index:2; font-size:11px; font-weight:600; letter-spacing:.03em;
  padding:5px 11px; border-radius:999px; background:rgba(11,13,32,.6); color:#fff;
  border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px);
}
/* Metadata restyled as a vertical info panel inside the sidebar. */
.detail-aside .quick-facts{ flex-direction:column; gap:0; padding:4px 16px; margin:14px 0 0; }
.detail-aside .qf{
  flex:1 1 auto; min-width:0; flex-direction:row; align-items:baseline; justify-content:space-between;
  gap:12px; padding:11px 0; border-right:none; border-bottom:1px solid var(--line);
}
.detail-aside .qf:last-child{ border-bottom:none; }
.detail-aside .qf-v{ text-align:right; }
.detail-aside .best-for{ margin:14px 0 0; }
@media (max-width:900px){
  .detail-grid{ display:block; }   /* natural DOM order: facts panel first, then content */
  .detail-aside{ position:static; margin-bottom:24px; } /* separate the info panel from the content below */
  /* Keep the sharp cover poster in the info panel below… */
  .detail-cover{ display:block; max-width:320px; margin:0 auto 2px; }
  /* …and bring the blurred cover art back as the title banner, PINNED to the
     top as you scroll. Compact so it reads as a slim header, not a wall. */
  .d-hero{
    position:sticky; top:0; z-index:6;
    min-height:0; padding:14px 16px 16px; margin-bottom:16px;
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
    box-shadow:0 12px 26px -14px rgba(0,0,0,.72);
  }
  .d-hero .d-badges{ margin-bottom:8px; flex-wrap:wrap; }
  /* Banner layout on phones/tablets: full banner picture (it scrolls away — see
     pinHeroStrip), then the compact title panel that stays pinned. */
  .d-hero.has-banner{ padding:0; }
  .d-hero .banner-img{ max-height:40vh; }
  .d-hero-body{ padding:14px 16px 16px; }
  .d-hero h1{ font-size:clamp(20px,5.2vw,27px); }
  .d-hero .d-alt{ margin-top:4px; font-size:13px; }
  /* The fixed theme + settings buttons sit top-right on phones/iPad, so Share moves
     to the banner's bottom-right as a round icon button (text keeps clear of it). */
  .d-hero .hero-share{ top:auto; bottom:12px; right:12px; }
  .d-hero .hero-share .share-btn{ width:38px; height:38px; padding:0; justify-content:center; }
  .d-hero .hero-share .share-btn span{ display:none; }
  .d-hero h1, .d-hero .d-alt{ padding-right:46px; }
  /* Badges row stays clear of the fixed theme/settings buttons. */
  .d-hero .d-badges{ padding-right:96px; }
  /* iPhone Safari paints the status-bar strip with the pinned banner's background
     COLOUR. The light-theme banner tint was see-through, so that strip came out
     near-white — give it the page colour underneath so the strip matches the page. */
  html[data-tone="light"] .d-hero{ background:linear-gradient(rgba(var(--violet-rgb),.14), rgba(var(--violet-rgb),.14)), var(--bg) !important; }
}
@media (max-width:560px){
  .detail-cover{ max-width:none; } /* full-bleed cover poster on phones */
}
.d-badges{ display:flex; gap:8px; margin-bottom:12px; }
.d-badge{ font-size:11px; font-weight:600; letter-spacing:.03em; padding:5px 11px; border-radius:999px;
  background:rgba(11,13,32,.55); border:1px solid rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px); }
.d-badge.rating-badge{ background:rgba(167,139,250,.25); border-color:rgba(167,139,250,.5); }
/* The rating badge on the cover poster matches the banner's rating badge. */
.detail-cover .dc-badge{ background:linear-gradient(rgba(167,139,250,.25), rgba(167,139,250,.25)), rgba(11,13,32,.6); border-color:rgba(167,139,250,.5); }

/* Quick facts */
.quick-facts{
  display:flex; flex-wrap:wrap; gap:10px 8px; margin-bottom:22px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:16px 8px;
}
.qf{ flex:1 1 auto; min-width:96px; padding:0 14px; display:flex; flex-direction:column; gap:4px;
  border-right:1px solid var(--line); }
.qf:last-child{ border-right:none; }
.qf-l{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.qf-v{ font-size:14.5px; color:var(--text); font-weight:500; }

/* Ratings */
.ratings-block{ display:flex; gap:20px; align-items:center; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:20px; margin-bottom:26px; }
.share-menu-wrap{ position:relative; }
.share-menu{ position:fixed; min-width:172px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.45); padding:6px; z-index:60; display:flex; flex-direction:column; }
.share-menu button{ text-align:left; padding:9px 12px; border-radius:8px; background:transparent; border:0;
  color:var(--text); font:inherit; font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap; }
.share-menu button:hover{ background:var(--surface-hi); }
.share-menu.hidden{ display:none; }
.overall{ display:flex; align-items:center; gap:12px; padding-right:20px; border-right:1px solid var(--line); }
.overall-num{ font-family:"Fraunces",serif; font-weight:600; font-size:46px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.overall-lbl{ font-size:12px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.1em; line-height:1.5; font-weight:600; }
.overall-lbl span{ display:block; color:var(--text-faint); font-size:10.5px; letter-spacing:.06em; }
.subratings{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:11px; }
.sub-top{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; }
.sub-top span{ color:var(--text-soft); } .sub-top b{ color:var(--text); }
.sub-bar{ height:6px; border-radius:6px; background:rgba(var(--ink-rgb),.07); overflow:hidden; }
.sub-bar i{ display:block; height:100%; border-radius:6px; background:var(--grad); }

/* Track-this-title card (shelf status dropdown + your rating + reader activity) */
.track-card{
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  padding:16px 18px 18px; margin-bottom:24px; box-shadow:var(--shadow); }
.tc-controls{ display:flex; gap:22px; flex-wrap:wrap; align-items:flex-end; }
.tc-field{ display:flex; flex-direction:column; gap:8px; }
.tc-field > label{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); font-weight:600; }
.tc-select{ min-width:200px; padding:11px 13px; border-radius:11px; font:inherit; font-size:15px;
  color:var(--text); background:var(--surface); border:1px solid var(--line-strong);
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e8ab0' stroke-width='2.4' 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 12px center; padding-right:34px; }
.tc-select:focus{ outline:none; border-color:var(--violet); }
.tc-rate[hidden]{ display:none; }
.tc-divider{ height:1px; background:var(--line); margin:18px 0 15px; }

/* Community / reader activity (aggregate counts + user rating across members) */
.cm-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.cm-fav{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text);
  padding:6px 12px; border-radius:999px; border:1px solid rgba(var(--gold-rgb),.4); background:rgba(var(--gold-rgb),.08); }
.cm-fav-star{ color:var(--gold); font-size:14px; line-height:1; }
.cm-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.cm-stat{ text-align:center; padding:12px 6px; border-radius:var(--radius-sm);
  background:rgba(var(--ink-rgb),.035); border:1px solid var(--line); }
.cm-num{ font-family:"Fraunces",serif; font-weight:600; font-size:26px; line-height:1; color:var(--text); }
.cm-lbl{ font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-mute);
  font-weight:600; margin-top:6px; line-height:1.3; }
.cm-foot{ margin-top:12px; font-size:12px; color:var(--text-faint); }
.cm-userrating{ display:flex; align-items:baseline; gap:7px; margin-bottom:13px;
  padding:10px 14px; border-radius:var(--radius-sm); background:rgba(var(--gold-rgb),.07);
  border:1px solid rgba(var(--gold-rgb),.22); }
.cm-ur-star{ color:var(--gold); font-size:17px; line-height:1; position:relative; top:2px; }
.cm-userrating b{ font-family:"Fraunces",serif; font-size:22px; line-height:1; color:var(--text); }
.cm-ur-max{ font-size:12px; color:var(--text-mute); }
.cm-ur-lbl{ margin-left:auto; font-size:12px; color:var(--text-faint); align-self:center; }
@media (max-width:520px){
  .cm-grid{ grid-template-columns:repeat(3,1fr); }
  .tc-select{ width:100%; min-width:0; }
  .tc-field{ width:100%; }
}

/* ---------- Mobile collapsibles (title page space-savers) ----------
   A section marked .mcol can hide its .mcol-hide children behind a toggle.
   The effect ONLY applies on phones/tablets (≤860px); on desktop the toggle
   is hidden and every child shows, so .is-collapsed is inert there. */
.mcol-toggle{ display:none; }
.mcol-toggle{ align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--text-soft);
  background:var(--surface-2); border:1px solid var(--line); line-height:1; }
.mcol-toggle:hover{ color:var(--text); border-color:var(--line-strong); }
.mcol-toggle .mcol-chev{ width:14px; height:14px; transition:transform .2s var(--ease); }
.mcol-toggle[aria-expanded="true"] .mcol-chev{ transform:rotate(180deg); }
.mcol-toggle.chip-more{ margin-left:2px; }        /* sits at the end of a chip row */
.mcol-head-r{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:900px){
  .mcol-toggle{ display:inline-flex; }
  .mcol.is-collapsed .mcol-hide{ display:none !important; }
  .mcol .chip-wrap{ align-items:center; }
}

/* Spoiler label */
/* No top margin: the block above (ratings / track card / notes) already ends with 24–26px. */
.spoiler-label{ display:inline-flex; align-items:center; gap:8px; margin-top:0;
  font-size:13px; padding:8px 14px; border-radius:999px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text-soft); }
.spoiler-label b{ color:var(--text); }
.spoiler-label svg{ flex:0 0 auto; }
.spoiler-label.sp-no{ border-color:rgba(var(--ok-rgb),.4); color:var(--ok); }
.spoiler-label.sp-minor{ border-color:var(--line-strong); }
.spoiler-label.sp-moderate{ border-color:rgba(var(--gold-rgb),.45); color:var(--gold); }
.spoiler-label.sp-major{ border-color:rgba(var(--coral-rgb),.5); color:var(--coral); background:rgba(var(--coral-rgb),.08); }

.synopsis{ color:var(--text-soft); line-height:1.66; font-size:15.5px; margin:0 0 20px; white-space:pre-line; }
.my-take{ border:1px solid rgba(var(--violet-rgb),.28); background:var(--grad-soft); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:28px; }
.my-take .mt-label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--violet); font-weight:700; margin-bottom:8px; }
.my-take p{ margin:0; color:var(--text); line-height:1.62; font-size:15px; white-space:pre-line; }

/* Why / What-may-not pair */
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px; }
.pair-card{ border-radius:var(--radius); padding:18px 20px; border:1px solid var(--line); }
.pair-card .pc-h{ font-weight:600; font-size:14.5px; margin-bottom:9px; display:flex; align-items:center; gap:9px; }
.pair-card .pc-i{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:14px; flex:0 0 auto; }
.pair-card p{ margin:0; color:var(--text-soft); line-height:1.55; font-size:14px; white-space:pre-line; }
.pair-card.good{ background:rgba(var(--ok-rgb),.08); border-color:rgba(var(--ok-rgb),.28); }
.pair-card.good .pc-h{ color:var(--ok); } .pair-card.good .pc-i{ background:rgba(var(--ok-rgb),.2); color:var(--ok); }
.pair-card.warn{ background:rgba(var(--gold-rgb),.08); border-color:rgba(var(--gold-rgb),.28); }
.pair-card.warn .pc-h{ color:var(--gold); } .pair-card.warn .pc-i{ background:rgba(var(--gold-rgb),.2); color:var(--gold); }

/* Story profile (title page): feeling meters, romance dynamic tiles, lead + heads-up chips */
.story-profile{ border:1px solid var(--line-strong); border-radius:var(--radius); padding:16px 18px 18px; margin:0 0 26px;
  background:linear-gradient(160deg, var(--surface-2), var(--surface)); }
.pf-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.pf-head .detail-sub{ margin:0; }
.pf-pace{ font-size:12.5px; color:var(--text-mute); padding:5px 12px; border-radius:999px; border:1px solid var(--line-strong); }
.pf-pace b{ color:var(--text); font-weight:600; }
/* Pacing colour code (title page pill + Blind Date hint): Fast = coral, Steady = blue, Slow-burn = rose */
.pace-fast{ border-color:rgba(var(--coral-rgb),.55) !important; background:rgba(var(--coral-rgb),.14); }
.pace-steady{ border-color:rgba(var(--blue-rgb),.55) !important; background:rgba(var(--blue-rgb),.14); }
.pace-slowburn{ border-color:rgba(var(--rose-rgb),.55) !important; background:rgba(var(--rose-rgb),.14); }
.pf-pace.pace-fast b{ color:var(--coral); }
.pf-pace.pace-steady b{ color:var(--blue); }
.pf-pace.pace-slowburn b{ color:var(--rose); }
.pf-bars{ display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; }
.pf-feel{ display:grid; grid-template-columns:minmax(0,1fr) auto 64px; align-items:center; gap:10px; font-size:13px; }
.pf-fl{ color:var(--text-soft); min-width:0; }
.pf-feel b{ font-weight:600; color:var(--text); font-size:12.5px; text-align:right; }
.pf-segs{ display:flex; gap:3px; }
.pf-segs i{ width:16px; height:7px; border-radius:3px; background:rgba(var(--ink-rgb),.09); }
.pf-segs i.on{ background:var(--grad); }
.pf-block{ margin-top:16px; }
.pf-h{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); font-weight:600; margin-bottom:8px; }
.pf-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:8px; }
.pf-tile{ padding:9px 12px; border-radius:var(--radius-sm); background:rgba(var(--rose-rgb),.08); border:1px solid rgba(var(--rose-rgb),.22); }
.pf-tile span{ display:block; font-size:11px; color:var(--text-mute); letter-spacing:.04em; margin-bottom:2px; }
.pf-tile b{ font-size:14px; font-weight:600; color:var(--text); }
.pf-chips{ display:flex; flex-wrap:wrap; gap:7px; }
/* Story profile tabs (Overview / Spoilers / Gallery) + spoiler gate + gallery + photo viewer */
.pf-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.pf-tab{ padding:7px 14px; border-radius:999px; font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--text-soft); background:transparent; border:1px solid var(--line-strong); transition:color .15s, border-color .15s, background .15s; }
.pf-tab:hover{ color:var(--text); border-color:var(--violet); }
.pf-tab.on{ background:var(--grad); color:var(--on-accent); border-color:transparent; }
.pf-gate{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:26px 16px; border-radius:var(--radius);
  border:1px dashed rgba(var(--rose-rgb),.5); background:rgba(var(--rose-rgb),.06); }
.pf-gate p{ margin:0; color:var(--text-soft); font-size:14px; }
.pf-gate-btn{ padding:9px 18px; font-size:14px; }
.pf-gated{ position:relative; }
/* Story strengths + frustrations: their own section under the tags (two columns on desktop). */
.pf-split{ margin-top:20px; padding-top:16px; border-top:1px dashed var(--line-strong); display:grid; gap:14px 24px; }
.pf-split.two{ grid-template-columns:1fr 1fr; }
.pf-split .pf-block{ margin-top:0; }
@media (max-width:640px){ .pf-split.two{ grid-template-columns:1fr; } }
.pf-blur-hint{ margin:0 0 10px; font-size:12px; color:var(--text-mute); }
.rc-sp[data-pf-blur]{ cursor:pointer; border-radius:10px; padding:4px 6px; margin:0 -6px; transition:background .15s; }
.rc-sp[data-pf-blur]:hover{ background:rgba(var(--rose-rgb),.07); }
.rc-sp.is-blurred .rc-sp-t{ filter:blur(7px); user-select:none; }
.rc-sp-t{ flex:1; min-width:0; font-size:14.5px; color:var(--text); line-height:1.5; }
.rc-names-sp{ font-family:"Fraunces",serif; font-weight:600; font-size:17px; }
.pf-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.pf-gal-item{ position:relative; display:block; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:zoom-in;
  aspect-ratio:3/4; background:var(--surface-2); }
.pf-gal-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s var(--ease); }
.pf-gal-item:hover img{ transform:scale(1.04); }
.pv-ov{ position:fixed; inset:0; z-index:9999; background:rgba(5,6,16,.92); display:flex; align-items:center; justify-content:center; padding:24px; }
.pv-fig{ margin:0; max-width:min(92vw, 1100px); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:10px; }
.pv-fig img{ max-width:100%; max-height:80vh; border-radius:12px; object-fit:contain; display:block; }
.pv-fig figcaption{ color:#e9e5ff; font-size:14px; text-align:center; }
.pv-x, .pv-nav{ position:absolute; border:0; cursor:pointer; color:#fff; background:rgba(255,255,255,.12); border-radius:50%; display:grid; place-items:center; }
.pv-x{ top:16px; right:16px; width:42px; height:42px; font-size:18px; }
.pv-nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:28px; }
.pv-nav.prev{ left:14px; } .pv-nav.next{ right:14px; }
.pv-x:hover, .pv-nav:hover{ background:rgba(255,255,255,.24); }
.pv-count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#cfc9ef; font-size:13px; }
.pf-chip.good{ border-color:rgba(var(--ok-rgb),.45); background:rgba(var(--ok-rgb),.12); color:var(--ok); }

/* Romance dynamic card: names, tiles, tap-to-reveal spoilers (text + photo) */
.romance-card .rc-names{ font-family:"Fraunces",serif; font-size:18px; font-weight:600; color:var(--text); margin:0 0 10px; }
.romance-card .rc-names > span::before, .romance-card .rc-names .spoil > span::before{ content:"♥ "; color:var(--rose); }
.rc-spoilers{ display:grid; gap:8px; margin-top:10px; }
.rc-sp{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rc-sp-l{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--rose); min-width:64px; }
.spoil{ position:relative; display:inline-flex; align-items:center; border:1px dashed rgba(var(--rose-rgb),.5); border-radius:12px;
  background:rgba(var(--rose-rgb),.08); color:var(--text); font:inherit; font-size:13.5px; padding:6px 12px; cursor:pointer; text-align:left; }
.spoil > span:first-child, .spoil > img{ filter:blur(7px); transition:filter .25s var(--ease); user-select:none; }
.spoil .spoil-hint{ position:absolute; inset:0; display:grid; place-items:center; font-family:"Instrument Sans",sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text); pointer-events:none; }
.spoil.revealed{ border-style:solid; }
.spoil.revealed > span:first-child, .spoil.revealed > img{ filter:none; user-select:auto; }
.spoil.revealed .spoil-hint{ display:none; }
.spoil-inline{ font-family:inherit; font-size:inherit; font-weight:inherit; padding:2px 10px; }
.spoil-text{ flex:1; min-width:0; }
.spoil-photo{ padding:0; overflow:hidden; border-radius:14px; width:100%; max-width:420px; }
.spoil-photo > img{ display:block; width:100%; height:auto; max-height:360px; object-fit:cover; filter:blur(18px) saturate(.8); transform:scale(1.05); }
.spoil-photo.revealed > img{ transform:none; }
.spoil-photo .spoil-hint{ background:rgba(var(--bg-rgb),.25); font-size:12.5px; }
.pf-chip{ font-size:12.5px; padding:5px 12px; border-radius:999px; border:1px solid rgba(var(--violet-rgb),.35); background:rgba(var(--violet-rgb),.1); color:var(--text); }
.pf-chip.warn{ border-color:rgba(var(--gold-rgb),.4); background:rgba(var(--gold-rgb),.1); color:var(--gold); }
.pf-chip, .tw-chip, .pf-pace{ display:inline-flex; align-items:center; gap:4px; line-height:1.4; }
@media (max-width:640px){ .pf-bars{ grid-template-columns:1fr; } }
.story-profile .pf-block:first-of-type{ margin-top:4px; }
.story-profile .chip-wrap{ gap:7px; }
/* Every pill in the card matches the pet-peeve / content-note pill size (12.5px, 5px 12px). */
.story-profile .chip{ padding:5px 12px; font-size:12.5px; line-height:1.4; gap:6px; color:var(--text); }
.story-profile .chip .dot{ width:6px; height:6px; }
.story-profile .mcol-toggle.chip-more{ padding:5px 12px; font-size:12.5px; }
/* One colour per tag type (title page): genre = blue, mood = rose, trope = violet, lead = mint */
.chip.fc-genre{ background:rgba(var(--blue-rgb),.18);   border-color:rgba(var(--blue-rgb),.55); }
.chip.fc-mood{  background:rgba(var(--rose-rgb),.18);   border-color:rgba(var(--rose-rgb),.55); }
.chip.fc-trope{ background:rgba(var(--violet-rgb),.18); border-color:rgba(var(--violet-rgb),.55); }
.chip.fc-lead{  background:rgba(var(--ok-rgb),.18);     border-color:rgba(var(--ok-rgb),.55); }
.chip.fc-genre .dot{ background:rgb(var(--blue-rgb)); }
.chip.fc-mood .dot{  background:rgb(var(--rose-rgb)); }
.chip.fc-trope .dot{ background:rgb(var(--violet-rgb)); }
.chip.fc-lead .dot{  background:rgb(var(--ok-rgb)); }
a.chip.fc-genre:hover{ border-color:rgba(var(--blue-rgb),.7); }
a.chip.fc-mood:hover{  border-color:rgba(var(--rose-rgb),.7); }
a.chip.fc-trope:hover{ border-color:rgba(var(--violet-rgb),.7); }
a.chip.fc-lead:hover{  border-color:rgba(var(--ok-rgb),.75); }

.best-for{ border-left:3px solid var(--violet); background:var(--grad-soft); border-radius:0 12px 12px 0;
  padding:14px 18px; margin-bottom:28px; font-size:15px; line-height:1.5; }
/* Light themes: the 18% accent wash reads muddy on pale backgrounds — use a soft tint. */
html[data-tone="light"] .my-take,
html[data-tone="light"] .best-for{ background:linear-gradient(135deg, rgba(var(--violet-rgb),.07), rgba(var(--blue-rgb),.07)); }
html[data-tone="light"] .my-take{ border-color:rgba(var(--violet-rgb),.22); }
.best-for span{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--violet); font-weight:600; margin-bottom:4px; }
.best-for b{ font-weight:500; color:var(--text); }

/* Trigger warnings */
.tw-section{ display:flex; flex-direction:column; gap:14px; margin-bottom:8px; }
.tw-group{ border-radius:var(--radius); padding:16px 18px; border:1px solid var(--line); }
.tw-h{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; margin-bottom:11px; }
.tw-group.serious{ background:rgba(var(--bad-rgb),.09); border-color:rgba(var(--bad-rgb),.4); }
.tw-group.serious .tw-h{ color:var(--bad); font-size:14.5px; }
.tw-group.notes{ background:var(--surface); }
.tw-group.notes .tw-h{ color:var(--text-mute); text-transform:uppercase; letter-spacing:.1em; font-size:11.5px; }
.tw-chip{ font-size:12.5px; padding:5px 12px; border-radius:999px; background:rgba(var(--ink-rgb),.05);
  border:1px solid var(--line); color:var(--text-soft); }
.tw-chip.serious{ background:rgba(var(--bad-rgb),.14); border-color:rgba(var(--bad-rgb),.4); color:var(--bad); font-weight:500; }

/* Title page: every sub-heading shares ONE caps style (size, spacing, weight); each keeps
   its own colour (My Take violet, Why you'd like it green, cautions gold, serious red). */
#detailBody .detail-sub,
#detailBody .sc-eyebrow,
#detailBody .jr-title,
#detailBody .overall-lbl,
#detailBody .my-take .mt-label,
#detailBody .pair-card .pc-h,
#detailBody .pf-h,
#detailBody .tw-h,
#detailBody .tw-group.serious .tw-h,
#detailBody .tw-group.notes .tw-h{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; line-height:1.4; }
#detailBody .pair-card .pc-i{ width:20px; height:20px; font-size:12px; }   /* icon sized to the caps label */
/* Reading links */
.reading-links{ margin-top:24px; margin-bottom:8px; }
.read-legal{ display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:999px;
  background:var(--grad); color:var(--on-accent); font-weight:600; font-size:15px; box-shadow:var(--shadow-glow); }
.read-legal:hover{ filter:brightness(1.06); }
.platforms{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.platform-badge{ padding:8px 15px; border-radius:999px; font-size:13px; color:var(--text-soft);
  background:var(--surface); border:1px solid var(--line-strong); }
.platform-badge:hover{ color:var(--text); border-color:var(--violet); }

.cover-credit{ margin-top:30px; color:var(--text-faint); font-size:11.5px; }
.cover-credit .cc-note{ display:block; margin-top:4px; opacity:.85; }
/* Reading links + credit relocated into the sidebar, under the cover */
.aside-links{ margin:14px 0 0; }
.aside-links .read-legal{ display:flex; justify-content:center; width:100%; padding:13px 18px; font-size:14.5px; }
.aside-links .platforms{ margin-top:10px; gap:7px; }
.aside-links .platform-badge{ font-size:12.5px; padding:7px 12px; }
.aside-credit{ margin-top:18px; }

@media (max-width:560px){
  .pair{ grid-template-columns:1fr; }
  .overall{ border-right:none; padding-right:0; }
  .qf{ border-right:none; min-width:42%; }
}

/* ---------- Pick / Blog stubs ---------- */
.stub-card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(160deg, var(--surface), var(--bg-2));
  padding:clamp(30px,5vw,56px); text-align:center; box-shadow:var(--shadow);
}
.stub-card .moon{ width:80px; margin:0 auto 22px; filter:drop-shadow(0 14px 30px rgba(var(--glow-rgb),.55)); }
.stub-card h2{ font-size:clamp(24px,4vw,34px); margin-bottom:12px; }
.stub-card p{ color:var(--text-soft); max-width:44ch; margin:0 auto 26px; line-height:1.55; }
.steps{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.step{ display:flex; align-items:center; gap:8px; color:var(--text-mute); font-size:13px; }
.step b{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-soft); border:1px solid var(--line-strong); color:var(--violet); font-size:13px; }

/* stats strip / detail stub */
.detail-hero{
  border-radius:var(--radius-lg); overflow:hidden; position:relative;
  min-height:220px; display:flex; align-items:flex-end; padding:26px;
  border:1px solid var(--line-strong); margin-bottom:22px; box-shadow:var(--shadow);
}
.detail-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%, rgba(6,7,20,.8)); }
.detail-hero .dh-inner{ position:relative; z-index:2; }
.detail-hero .status{ color:var(--text-soft); font-size:13px; margin-top:8px; }
.back-link{ display:inline-flex; align-items:center; gap:7px; color:var(--text-mute); font-size:14px; margin-bottom:18px; }
.back-link:hover{ color:var(--violet); }
.note-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; color:var(--text-soft); line-height:1.6; }

/* ---------- Shelf-status control (detail page) ---------- */
.sc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.sc-eyebrow{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); font-weight:600; }
.fav-star{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600;
  color:var(--text-soft); background:rgba(var(--ink-rgb),.04); border:1px solid var(--line);
  transition:color .18s, border-color .18s, background .18s;
}
.fav-star:hover{ color:var(--text); border-color:var(--line-strong); }
.fav-star.on{ color:var(--gold); border-color:rgba(var(--gold-rgb),.5); background:rgba(var(--gold-rgb),.1); }
.fav-star svg{ transition:transform .2s var(--ease); }
.fav-star.on svg{ transform:scale(1.08); }
.sc-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; min-height:20px; }
.sc-state{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text-soft); }
.sc-state b{ color:var(--text); }
.sc-dot{ width:8px; height:8px; border-radius:50%; background:var(--grad); flex:0 0 auto; box-shadow:0 0 10px rgba(var(--glow-rgb),.7); }
.sc-hint{ font-size:12.5px; color:var(--text-mute); line-height:1.4; }
.sc-remove{ color:var(--text-mute); font-size:12.5px; white-space:nowrap; padding:4px 2px; }
.sc-remove:hover{ color:var(--coral); }

/* card "on shelf" marker */
/* Quick-track button on a title card: "+" to add to the shelf, "✓" once on it
   (tap again to remove). Replaces the old static shelf-mark tick. */
.card .cover .card-track{
  position:absolute; top:8px; right:8px; z-index:3; padding:0;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-size:20px; line-height:1; font-weight:600;
  background:rgba(11,13,32,.62); color:#fff; border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px); cursor:pointer;
  transition:transform .15s var(--ease), background .15s, color .15s, border-color .15s;
}
.card .cover .card-track:hover{ transform:scale(1.09); background:var(--grad); color:var(--on-accent); border-color:transparent; }
.card .cover .card-track.on{ background:var(--grad); color:var(--on-accent); border-color:transparent;
  box-shadow:var(--shadow-glow); font-size:15px; font-weight:800; }
.card .cover .card-track.on:hover{ background:rgba(255,120,120,.9); color:#2a0a0a; box-shadow:none; } /* hint: tap removes */

/* ---------- Toast (one-tap confirmation) ---------- */
.mt-toast{
  position:fixed; left:50%; transform:translate(-50%, 20px);
  bottom:calc(var(--bottom-nav-h) + 22px + var(--safe-b));
  z-index:70; pointer-events:none;
  background:var(--surface-hi); color:var(--text);
  border:1px solid var(--line-strong); border-radius:999px;
  padding:11px 20px; font-size:13.5px; font-weight:500;
  box-shadow:var(--shadow); opacity:0;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.mt-toast.show{ opacity:1; transform:translate(-50%, 0); }
@media (min-width:901px){ .mt-toast{ bottom:34px; } }

/* ---------- Pick My Next Read — quiz ---------- */
.quiz-card{
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  background:linear-gradient(165deg, var(--panel-a), var(--panel-b) 78%);
  padding:clamp(22px,4vw,34px); box-shadow:var(--shadow);
  animation:fade .3s var(--ease) both;
}
.quiz-progress{ display:flex; align-items:center; gap:6px; margin-bottom:22px; }
.qp{ display:inline-flex; align-items:center; gap:8px; color:var(--text-faint); font-size:12.5px; font-weight:500; }
.qp b{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px;
  background:rgba(var(--ink-rgb),.05); border:1px solid var(--line); color:var(--text-mute); }
.qp.cur{ color:var(--text); }
.qp.cur b{ background:var(--grad); color:var(--on-accent); border-color:transparent; }
.qp.done{ color:var(--text-soft); }
.qp.done b{ background:rgba(var(--ok-rgb),.18); border-color:rgba(var(--ok-rgb),.4); color:var(--ok); }
.qp-line{ flex:1; height:1px; background:var(--line); max-width:38px; }
.quiz-q{ font-size:clamp(21px,3vw,28px); margin-bottom:8px; }
.quiz-sub{ color:var(--text-mute); font-size:14px; margin:0 0 20px; }
.quiz-chips{ gap:10px; }
.quiz-chip .qc-c{ font-size:11px; color:var(--text-faint); margin-left:4px; }
.quiz-chip.selected .qc-c{ color:rgba(var(--on-accent-rgb),.6); }
.quiz-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; }
.quiz-nav .btn[disabled]{ opacity:.4; pointer-events:none; }
.source-list{ display:flex; flex-direction:column; gap:12px; }
.source-opt{
  text-align:left; padding:16px 18px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface);
  display:flex; flex-direction:column; gap:5px;
  transition:transform .16s var(--ease), border-color .18s, background .18s;
}
.source-opt:hover{ transform:translateY(-2px); border-color:var(--line-strong); background:var(--surface-2); }
.source-opt b{ font-size:15.5px; font-weight:600; }
.source-opt span{ font-size:13px; color:var(--text-mute); line-height:1.4; }
.source-opt.selected{ border-color:transparent; background:var(--grad-soft); box-shadow:inset 0 0 0 1.5px var(--violet); }
.source-opt.selected b{ color:var(--text); }

/* quiz result */
.quiz-result{ animation:fade .34s var(--ease) both; }
.qr-eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); font-weight:700; margin-bottom:14px; }
.qr-note{ font-size:13px; color:var(--gold); background:rgba(var(--gold-rgb),.09); border:1px solid rgba(var(--gold-rgb),.3);
  border-radius:12px; padding:10px 14px; margin-bottom:16px; line-height:1.45; }
.qr-card{
  display:grid; grid-template-columns:180px 1fr; gap:22px;
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  background:var(--surface); padding:20px; box-shadow:var(--shadow);
}
.qr-cover{ aspect-ratio:3/4; border-radius:var(--radius); position:relative; display:flex; align-items:flex-start; padding:12px; }
.qr-cover .d-badge{ font-size:10.5px; }
.qr-body{ min-width:0; display:flex; flex-direction:column; }
.qr-body h2{ font-size:clamp(22px,3vw,28px); margin-bottom:10px; }
.qr-why{ color:var(--violet); font-size:14.5px; font-weight:500; font-style:italic;
  font-family:"Fraunces",serif; margin-bottom:14px; line-height:1.4; }
.qr-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.qr-syn{ color:var(--text-soft); line-height:1.6; font-size:14.5px; margin:0 0 20px; }
.qr-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; }
.qr-actions .btn{ padding:12px 20px; font-size:14px; }
.qr-more{ display:flex; gap:20px; margin-top:16px; }
.qr-link{ color:var(--text-mute); font-size:13.5px; font-weight:500; }
.qr-link:hover{ color:var(--violet); }
@media (max-width:600px){
  .qr-card{ grid-template-columns:1fr; }
  .qr-cover{ max-width:200px; }
}

/* ---------- My Shelf ---------- */
.shelf-stats{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.ss-cell{
  flex:1 1 120px; min-width:0;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:14px 16px; display:flex; flex-direction:column; gap:3px;
}
.ss-cell b{ font-family:"Fraunces",serif; font-size:26px; font-weight:600; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ss-cell span{ font-size:12px; color:var(--text-mute); letter-spacing:.02em; }

.shelf-search{ margin-bottom:14px; }
.shelf-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.shelf-tabs{ gap:8px; }
.shelf-tabs .chip{ padding:8px 14px; font-size:13px; }
.shelf-filter-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px 0 14px; }
.shelf-filter-row .filter-panel{ margin-bottom:0; }
.shelf-filter-row .clear-filters{ margin-left:auto; }
.shelf-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.shelf-random{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:9px 15px; border-radius:999px; font-size:13.5px; font-weight:500;
  color:var(--text); background:rgba(var(--ink-rgb),.03); border:1px solid var(--line-strong);
}
.shelf-random:hover:not(:disabled){ background:rgba(var(--ink-rgb),.07); border-color:var(--violet); }
.shelf-random:disabled{ opacity:.4; cursor:not-allowed; }
.view-toggle{ display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; background:var(--surface); }
.view-toggle .vt{ padding:8px 11px; color:var(--text-mute); display:grid; place-items:center; transition:background .18s, color .18s; }
.view-toggle .vt:hover{ color:var(--text); }
.view-toggle .vt.on{ background:var(--grad); color:var(--on-accent); }
/* Custom sort dropdown — themed so the open list matches the app (native
   <select> popups are OS-drawn and can't be styled to fit the dark UI). */
.sort-dd{ position:relative; display:inline-flex; }
.sort-btn{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:9px 14px; border-radius:999px; font:inherit; font-size:13.5px; font-weight:500;
  color:var(--text); background:rgba(var(--ink-rgb),.03); border:1px solid var(--line-strong); cursor:pointer;
  transition:border-color .18s, background .18s;
}
.sort-btn:hover{ border-color:var(--violet); background:rgba(var(--ink-rgb),.07); }
.sort-btn .sort-lead{ color:var(--text-mute); font-weight:400; }
.sort-btn .chev{ color:var(--text-mute); transition:transform .2s var(--ease); flex:0 0 auto; }
.sort-dd.open .sort-btn{ border-color:var(--violet); }
.sort-dd.open .sort-btn .chev{ transform:rotate(180deg); }
.sort-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:220px;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:14px;
  box-shadow:var(--shadow); padding:6px; display:none; flex-direction:column; gap:2px;
}
.sort-dd.open .sort-menu{ display:flex; animation:fade .16s var(--ease) both; }
.sort-opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left;
  padding:9px 12px; border-radius:9px; font-size:13.5px; color:var(--text-soft); cursor:pointer;
  transition:background .14s, color .14s;
}
.sort-opt:hover{ background:rgba(var(--ink-rgb),.06); color:var(--text); }
.sort-opt.sel{ color:var(--text); background:var(--grad-soft); font-weight:600; }
.sort-opt .tick{ opacity:0; color:var(--violet); flex:0 0 auto; }
.sort-opt.sel .tick{ opacity:1; }

.shelf-list.shelf-list{ display:grid; gap:clamp(14px,2vw,20px); grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.shelf-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.shelf-card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); }
.shc-cover{ position:relative; aspect-ratio:3/4; width:100%; display:block; text-align:left; }
.shc-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, rgba(6,7,20,.55)); }
.shc-badge{ position:absolute; top:9px; left:9px; z-index:2; font-size:10px; font-weight:600; letter-spacing:.03em;
  padding:4px 9px; border-radius:999px; background:rgba(11,13,32,.62); color:#fff; border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.shc-fav{ position:absolute; top:7px; right:7px; z-index:3; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; color:rgba(255,255,255,.55);
  background:rgba(11,13,32,.5); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); transition:color .18s, transform .18s; }
.shc-fav:hover{ transform:scale(1.08); color:#fff; }
.shc-fav.on{ color:var(--gold); border-color:rgba(var(--gold-rgb),.5); }
.shc-body{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:7px; }
.shc-title{ text-align:left; font-weight:600; font-size:14px; line-height:1.25; color:var(--text); }
.shc-title:hover{ color:var(--violet); }
.shc-sub{ font-size:12.5px; color:var(--text-mute); font-variant-numeric:tabular-nums; }
.shc-stars{ font-size:13px; letter-spacing:1px; }
.shc-row{ margin-top:2px; }
.shc-select{ position:relative; display:block; }
.shc-select select{
  -webkit-appearance:none; appearance:none; width:100%;
  padding:8px 30px 8px 12px; border-radius:10px; font:inherit; font-size:12.5px; font-weight:500;
  color:var(--text); background:var(--surface-2); border:1px solid var(--line-strong); cursor:pointer;
}
.shc-select select:hover{ border-color:var(--violet); }
.shc-select svg{ position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--text-mute); pointer-events:none; }

/* list view */
.shelf-list.as-list{ display:flex; flex-direction:column; gap:10px; grid-template-columns:none; }
.as-list .shelf-card{ flex-direction:row; align-items:stretch; }
.as-list .shc-cover{ width:64px; flex:0 0 64px; aspect-ratio:auto; }
.as-list .shc-fav{ width:26px; height:26px; font-size:13px; top:5px; left:5px; right:auto; }
.as-list .shc-badge{ display:none; }
.as-list .shc-body{ flex:1; min-width:0; justify-content:center; padding:11px 14px; }
.as-list .shc-row{ max-width:220px; }

.shelf-empty-filter{ grid-column:1/-1; padding:44px 20px; }
.shelf-empty-filter .moon{ width:56px; margin-bottom:14px; }
.shelf-empty-filter h3{ font-size:19px; }

/* ---------- Reading journal (detail page) ---------- */
.journal{ border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface);
  padding:18px 20px 20px; margin-bottom:24px; }
.jr-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.jr-title{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); font-weight:700; }
.jr-updated{ font-size:12px; color:var(--text-faint); }
.jr-fields{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:16px; }
.jr-field{ display:flex; flex-direction:column; gap:8px; }
.jr-field label{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); font-weight:600; }
.jr-chap{ flex:0 0 auto; }
.jr-chap-in{ display:flex; align-items:center; gap:9px; }
.jr-chap-in input{ width:88px; padding:10px 12px; border-radius:10px; font:inherit; font-size:15px;
  color:var(--text); background:var(--surface-2); border:1px solid var(--line-strong); font-variant-numeric:tabular-nums; }
.jr-chap-in input:focus{ outline:none; border-color:var(--violet); }
.jr-total{ color:var(--text-mute); font-size:14px; font-variant-numeric:tabular-nums; }
.jr-stars{ display:flex; align-items:center; gap:4px; }
.jr-star{ font-size:24px; line-height:1; color:rgba(var(--gold-rgb),.28); transition:color .12s, transform .12s; padding:2px; }
.jr-star:hover{ transform:scale(1.12); }
.jr-star.on{ color:var(--gold); }
.jr-clear{ margin-left:8px; font-size:12px; color:var(--text-mute); padding:4px 6px; }
.jr-clear:hover{ color:var(--coral); }
.jr-clear.hidden{ display:none; }
.journal textarea{ width:100%; padding:12px 14px; border-radius:12px; font:inherit; font-size:14.5px; line-height:1.55;
  color:var(--text); background:var(--surface-2); border:1px solid var(--line-strong); resize:vertical; min-height:74px; }
.journal textarea:focus{ outline:none; border-color:var(--violet); }
.journal textarea::placeholder{ color:var(--text-faint); }

/* ---------- Comments ---------- */
.comments{ margin-top:8px; }
.cmt-count{ color:var(--text-faint); font-weight:600; letter-spacing:0; text-transform:none; }
.cmt-signin{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--surface); padding:16px 18px; color:var(--text-soft); font-size:14px; }
.cmt-composer{ border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); padding:12px; }
.cmt-toolbar{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; }
.cmt-toolbar button{ min-width:34px; padding:7px 11px; border-radius:9px; font-size:13px; font-weight:600;
  color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line);
  transition:color .15s, border-color .15s, background .15s; }
.cmt-toolbar button:hover{ color:var(--text); border-color:var(--line-strong); background:var(--surface-hi); }
.cmt-toolbar button i{ font-style:italic; } .cmt-toolbar button b{ font-weight:800; }
.cmt-composer textarea{ width:100%; padding:12px 13px; border-radius:11px; font:inherit; font-size:14.5px; line-height:1.55;
  color:var(--text); background:var(--bg-2); border:1px solid var(--line); resize:vertical; min-height:64px; }
.cmt-composer textarea:focus{ outline:none; border-color:var(--violet); }
.cmt-composer textarea::placeholder{ color:var(--text-faint); }
.cmt-img-wrap{ position:relative; display:inline-block; margin-top:10px; }
.cmt-img-wrap[hidden]{ display:none; }
.cmt-img-wrap img{ max-height:150px; max-width:100%; border-radius:10px; border:1px solid var(--line-strong); display:block; }
.cmt-img-x{ position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%;
  background:var(--surface-hi); border:1px solid var(--line-strong); color:var(--text); font-size:15px; line-height:1;
  display:grid; place-items:center; box-shadow:var(--shadow); }
.cmt-img-x:hover{ color:var(--coral); }
.cmt-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:11px; }
.cmt-hint{ font-size:12px; color:var(--text-faint); }
.cmt-hint b{ color:var(--text-mute); } .cmt-hint i{ color:var(--text-mute); font-style:italic; }
.cmt-list{ margin-top:16px; display:flex; flex-direction:column; gap:14px; }
.cmt-empty, .cmt-loading{ color:var(--text-mute); font-size:13.5px; padding:10px 2px; }
.cmt{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:13px 15px; }
.cmt-top{ display:flex; align-items:baseline; gap:9px; margin-bottom:7px; }
.cmt-author{ font-weight:600; font-size:13.5px; color:var(--text); }
.cmt-time{ font-size:12px; color:var(--text-faint); }
.cmt-del{ margin-left:auto; font-size:12px; color:var(--text-mute); padding:2px 4px; }
.cmt-del:hover{ color:var(--coral); }
.cmt-body{ font-size:14.5px; line-height:1.6; color:var(--text-soft); word-wrap:break-word; overflow-wrap:anywhere; }
.cmt-body strong{ color:var(--text); font-weight:700; }
.cmt-body em{ font-style:italic; }
.cmt-body blockquote{ margin:6px 0; padding:4px 0 4px 12px; border-left:3px solid var(--line-strong); color:var(--text-mute); }
.cmt-photo{ margin-top:10px; max-height:340px; max-width:100%; border-radius:10px; border:1px solid var(--line-strong); display:block; }
.cmt-spoiler{ background:var(--surface-hi); color:transparent; border-radius:4px; padding:0 3px; cursor:pointer;
  filter:blur(5px); transition:filter .15s, color .15s; user-select:none; }
.cmt-spoiler.revealed{ filter:none; color:inherit; background:rgba(var(--violet-rgb),.12); user-select:auto; cursor:auto; }
/* Replies (threaded). A comment's replies nest under it with a hairline rail. */
.cmt-actions{ display:flex; align-items:center; gap:14px; margin-top:9px; }
.cmt-reply-btn, .cmt-collapse{ font-size:12.5px; font-weight:600; color:var(--text-mute);
  display:inline-flex; align-items:center; gap:5px; padding:2px 2px; }
.cmt-reply-btn:hover, .cmt-collapse:hover{ color:var(--violet); }
.cmt-collapse .mcol-chev{ width:13px; height:13px; transition:transform .2s var(--ease); }
.cmt-collapse[aria-expanded="false"] .mcol-chev{ transform:rotate(-90deg); }
.cmt-children{ margin-top:14px; display:flex; flex-direction:column; gap:14px;
  padding-left:16px; border-left:2px solid var(--line); }
.cmt-children[hidden]{ display:none; }
/* Past the indent cap, stop adding rails so deep threads don't march off-screen.
   The negative margin cancels each parent comment's own left padding+border
   (13px 15px + 1px = 16px) so every capped level lines up flush at the cap
   depth instead of creeping right. Threading + collapse still work. */
.cmt-children.cmt-flat{ padding-left:0; border-left:none; margin-left:-16px; }
@media (max-width:560px){ .cmt-children{ padding-left:11px; } .cmt-children.cmt-flat{ padding-left:0; margin-left:-16px; } }
/* Inline reply composer (a trimmed version of the main composer). */
.cmt-replyform{ margin-top:11px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--bg-2); padding:11px; }
.cmt-replyform textarea{ width:100%; padding:10px 12px; border-radius:10px; font:inherit; font-size:14px;
  line-height:1.55; color:var(--text); background:var(--surface); border:1px solid var(--line); resize:vertical; min-height:56px; }
.cmt-replyform textarea:focus{ outline:none; border-color:var(--violet); }
.cmt-replyform .cmt-foot{ margin-top:9px; }
.cmt-rf-actions{ display:flex; gap:8px; }

/* read-only star row (cards) */
.stars-ro .st{ color:rgba(var(--gold-rgb),.26); }
.stars-ro .st.on{ color:var(--gold); }

@media (max-width:520px){
  .shelf-toolbar{ gap:10px; }
  .shelf-actions{ width:100%; flex-wrap:wrap; }
  .shelf-random{ flex:1; justify-content:center; }
  .sort-dd{ flex:1 1 100%; order:-1; }
  .sort-btn{ width:100%; justify-content:space-between; }
  .sort-menu{ left:0; right:0; min-width:0; }
}

/* ---------- Blog: list ---------- */
.blog-list{ display:flex; flex-direction:column; gap:16px; }
.blog-card{
  text-align:left; width:100%;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:22px 24px;
  display:flex; flex-direction:column; gap:9px;
  color:inherit; text-decoration:none; cursor:pointer;
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s, background .2s;
}
.blog-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); background:var(--surface-2); box-shadow:var(--shadow); }
.bc-meta{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-mute); }
.bc-meta time{ color:var(--text-soft); }
.bc-dot{ opacity:.6; }
.bc-title{ font-size:clamp(20px,2.6vw,25px); line-height:1.15; text-wrap:balance; }
.blog-card:hover .bc-title{ color:var(--text); }
.bc-excerpt{ margin:0; color:var(--text-soft); font-size:15px; line-height:1.55; max-width:60ch; }
.bc-more{ font-size:13.5px; font-weight:600; color:var(--violet); margin-top:2px; }

/* ---------- Blog: single post ---------- */
.post{ max-width:none; }
/* ---- Blog post: article + sticky sidebar on wide screens ---- */
.post-aside{ display:none; }
@media (min-width:1000px){
  .post-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start; }
  .post-aside{ display:flex; flex-direction:column; gap:14px;
    position:sticky; top:calc(var(--top-h, 0px) + 20px);
    max-height:calc(100vh - var(--top-h, 0px) - 40px); overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; padding-right:2px; }
  .post-title-row > .share-btn{ display:none; }          /* the sidebar has Share */
  .post-layout .post-mentioned{ display:none; }           /* the sidebar lists them */
}
.pa-card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:16px; }
.pa-card[hidden]{ display:none; }
.pa-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); font-weight:600; margin-bottom:10px; }
.pa-by{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:14px; color:var(--text-mute); }
.pa-by .post-author{ font-size:15px; }
.pa-share{ width:100%; justify-content:center; margin-top:14px; }
.pa-toc{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.pa-toc a{ display:block; padding:6px 10px; border-left:2px solid var(--line); font-size:13.5px; line-height:1.4; color:var(--text-soft);
  transition:color .15s, border-color .15s, background .15s; }
.pa-toc a:hover{ color:var(--text); background:rgba(var(--ink-rgb),.04); }
.pa-toc a.on{ color:var(--text); border-left-color:var(--violet); background:rgba(var(--violet-rgb),.08); font-weight:500; }
.pa-titles{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pa-titles a{ display:flex; gap:11px; align-items:center; color:var(--text); }
.pa-titles a:hover b{ color:var(--violet); }
.pa-titles img, .pa-titles .pa-ph{ width:38px; height:52px; border-radius:6px; object-fit:cover; flex:0 0 auto; background:var(--surface-2); display:block; }
.pa-titles span{ display:flex; flex-direction:column; min-width:0; }
.pa-titles b{ font-size:13.5px; font-weight:600; line-height:1.3; transition:color .15s; }
.pa-titles small{ font-size:12px; color:var(--text-mute); margin-top:2px; }
.post-head{ margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.post-meta{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-mute); margin-bottom:14px; }
.post-meta time{ color:var(--violet); font-weight:500; }
.post-meta{ flex-wrap:wrap; }
.post-author{ color:var(--text-soft); font-weight:600; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; }
.post-author:hover{ color:var(--violet); text-decoration-color:currentColor; }
.post-title{ font-size:clamp(28px,4.6vw,44px); line-height:1.08; text-wrap:balance; }
.post-content{ max-width:none; }
.post-p{ color:var(--text-soft); font-size:16.5px; line-height:1.75; margin:0 0 20px; }
.post-p:first-child{ color:var(--text); font-size:18px; }
.post-h2{ font-size:clamp(20px,2.8vw,26px); margin:34px 0 14px; color:var(--text); text-wrap:balance; }
.post-link{ color:var(--violet); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.post-link:hover{ color:var(--text); }
.post-fig{ margin:8px 0 24px; text-align:center; }
.post-fig img{ max-width:100%; max-height:440px; width:auto; height:auto; margin:0 auto;
  border-radius:var(--radius); border:1px solid var(--line-strong); box-shadow:var(--shadow); display:block; }
.post-fig-cap{ margin-top:9px; font-size:13px; color:var(--text-mute); text-align:center; font-style:italic; }
/* Photo carousel block — CSS scroll-snap, so it swipes even without JS (SSR /
   preview); arrows + counter appear once JS marks it .pc-ready. */
.post-carousel{ position:relative; margin:8px 0 24px; }
.pc-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:var(--radius);
  border:1px solid var(--line-strong); background:var(--surface-2); box-shadow:var(--shadow); }
.pc-track::-webkit-scrollbar{ display:none; }
.pc-track:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; }
.pc-slide{ flex:0 0 100%; scroll-snap-align:center; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pc-slide img{ display:block; width:100%; height:clamp(240px,52vw,440px); object-fit:contain; }
.pc-slide .post-fig-cap{ margin:0; padding:9px 14px 11px; }
.pc-nav{ position:absolute; top:calc(clamp(240px,52vw,440px) / 2); transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong);
  background:color-mix(in srgb, var(--surface) 85%, transparent); color:var(--text);
  font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow); }
.pc-nav.prev{ left:10px; } .pc-nav.next{ right:10px; }
.pc-nav:disabled{ opacity:0; pointer-events:none; }
.pc-count{ position:absolute; top:10px; right:10px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--surface) 85%, transparent); color:var(--text); border:1px solid var(--line); }
.pc-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin-top:4px; }
/* 7px dot inside a 19px tap target (padding + content-box background). */
.pc-dots button{ width:19px; height:19px; padding:6px; border:0; border-radius:50%; cursor:pointer;
  background:var(--line-strong); background-clip:content-box; transition:background-color .2s, transform .2s; }
.pc-dots button:hover{ background-color:var(--text-mute); }
.pc-dots button.on{ background-color:var(--violet); transform:scale(1.25); }
.pc-dots button:focus-visible{ outline:2px solid var(--violet); outline-offset:0; }
.post-carousel:not(.pc-ready) .pc-nav, .post-carousel:not(.pc-ready) .pc-count{ display:none; }
.post-carousel:not(.pc-ready) .pc-dots button{ pointer-events:none; cursor:default; }
.post-table-wrap{ overflow-x:auto; margin:8px 0 24px; border:1px solid var(--line); border-radius:var(--radius); -webkit-overflow-scrolling:touch; }
.post-table{ border-collapse:collapse; width:100%; font-size:14.5px; }
.post-table th, .post-table td{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:middle; color:var(--text-soft); }
.post-table th{ background:var(--surface-2); color:var(--text); font-weight:600; white-space:nowrap; }
.post-table tr:last-child td{ border-bottom:0; }
.post-table th:last-child, .post-table td:last-child{ border-right:0; }
.post-table .cell-title{ display:inline-flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; }
.post-table .cell-title span{ font-weight:500; }
.post-table .cell-title:hover span{ color:var(--violet); }
.post-table .cell-cover{ width:44px; height:60px; object-fit:cover; border-radius:6px; border:1px solid var(--line-strong); flex:0 0 auto; }
.post-table .cell-img{ max-height:80px; max-width:120px; border-radius:6px; display:block; }
/* Phones: a tighter table. Long titles wrap inside their own column (never spill into
   the next), and a table still too wide scrolls sideways inside its frame. */
@media (max-width:600px){
  .post-table{ font-size:13.5px; }
  .post-table th, .post-table td{ padding:8px 9px; }
  .post-table th{ white-space:normal; }
  .post-table .cell-title{ display:flex; gap:8px; }
  .post-table .cell-title span{ min-width:0; overflow-wrap:break-word; }
  .post-table .cell-cover{ width:34px; height:46px; }
}

/* Share button (title hero + blog post) */
.share-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--text); background:rgba(var(--bg-rgb),.5);
  border:1px solid var(--line-strong); backdrop-filter:blur(6px); white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s; }
.share-btn:hover{ background:var(--grad-soft); border-color:var(--line-strong); }
.share-btn svg{ flex:0 0 auto; }
.hero-share{ position:absolute; top:16px; right:16px; z-index:3; }
.post-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.post-title-row .post-title{ margin:0; }
.post-title-row .share-btn{ flex:0 0 auto; margin-top:6px; }

/* Blog pagination */
.pager{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:28px; }
.pager-btn{ min-width:40px; padding:8px 13px; border-radius:10px; font-size:13.5px; font-weight:600;
  color:var(--text-soft); background:var(--surface); border:1px solid var(--line); cursor:pointer;
  transition:color .15s, border-color .15s, background .15s; }
.pager-btn:hover:not(:disabled){ color:var(--text); border-color:var(--line-strong); background:var(--surface-2); }
.pager-btn.active{ background:var(--grad); color:var(--on-accent); border-color:transparent; }
.pager-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* Site footer */
.site-foot{ text-align:center; color:var(--text-faint); font-size:12.5px; letter-spacing:.02em;
  padding:34px 16px 12px; margin-top:44px; border-top:1px solid var(--line); }

/* Ad slots (inert/empty until AdSense is configured) */
.ad-slot{ margin:22px auto; text-align:center; overflow:hidden; }
.ad-slot:empty{ display:none; }
.ad-slot ins{ margin:0 auto; }

/* Legal / About pages */
.legal{ color:var(--text-soft); font-size:15.5px; line-height:1.75; }
.legal h2{ font-size:18px; color:var(--text); margin:28px 0 10px; }
.legal p{ margin:0 0 14px; }
.legal a{ color:var(--violet); }
.legal b{ color:var(--text); }
.legal-date{ color:var(--text-mute); font-size:13.5px; }
.author-card{ display:flex; gap:16px; align-items:flex-start; padding:18px 18px 4px; margin:0 0 8px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.author-avatar{ flex:0 0 auto; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); color:var(--on-accent); font-family:"Fraunces",serif; font-weight:600; font-size:19px; }
@media (max-width:520px){ .author-card{ flex-direction:column; gap:10px; } }
.legal-note{ margin-top:26px; padding:14px 16px; border:1px dashed var(--line-strong); border-radius:var(--radius);
  background:var(--surface); color:var(--text-mute); font-size:13.5px; }
.foot-links{ margin-bottom:8px; }
.foot-note{ max-width:115ch; margin:10px auto 0; font-size:11.5px; line-height:1.55; color:var(--text-faint); letter-spacing:0; }
.foot-links a{ color:var(--text-mute); cursor:pointer; }
.foot-links a:hover{ color:var(--violet); }

/* Cookie consent banner */
.consent{ position:fixed; left:16px; right:16px; bottom:calc(16px + var(--safe-b)); z-index:75;
  max-width:640px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 18px; border-radius:var(--radius); background:var(--surface-2);
  border:1px solid var(--line-strong); box-shadow:var(--shadow); animation:fade .3s var(--ease) both; }
.consent[hidden]{ display:none; }
.consent-text{ flex:1 1 260px; font-size:13.5px; color:var(--text-soft); line-height:1.5; }
.consent-text a{ color:var(--violet); cursor:pointer; }
.consent-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.consent-actions .btn{ padding:9px 15px; font-size:13.5px; }
@media (max-width:900px){ .consent{ bottom:calc(var(--bottom-nav-h) + 16px + var(--safe-b)); } }

/* Toggle switch (Settings) */
.toggle{ position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; }
.toggle input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.toggle-tr{ position:absolute; inset:0; border-radius:999px; background:var(--surface-hi); border:1px solid var(--line-strong); transition:background .18s, border-color .18s; }
.toggle-tr::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--text-mute); transition:transform .18s, background .18s; }
.toggle input:checked + .toggle-tr{ background:var(--grad); border-color:transparent; }
.toggle input:checked + .toggle-tr::after{ transform:translateX(18px); background:#fff; }

/* Mature (18+) content gate on the detail page */
.mature-gate{ max-width:440px; margin:40px auto; text-align:center; padding:34px 26px;
  border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }
.mg-badge{ width:52px; height:52px; margin:0 auto 16px; border-radius:14px; display:grid; place-items:center;
  font-weight:700; font-size:15px; color:var(--coral); background:rgba(var(--bad-rgb),.16); border:1px solid rgba(var(--bad-rgb),.5); }
.mature-gate h2{ font-size:22px; margin-bottom:8px; }
.mature-gate p{ color:var(--text-soft); font-size:14.5px; line-height:1.6; margin:0 0 20px; }
.mg-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
/* Age-gate birthdate form (inline on the detail gate) */
.mg-dob{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin:0 0 16px; }
.mg-dob input{ padding:10px 12px; border-radius:10px; border:1px solid var(--line-strong);
  background:var(--surface-2, var(--surface)); color:var(--text); font-size:15px; }
.mg-err{ color:var(--bad); font-size:13.5px; min-height:18px; margin:-8px 0 12px; }
.mg-fine{ color:var(--text-soft); font-size:12.5px; margin:14px 0 0; }
/* Locked (18+) browse card */
.card-locked{ cursor:pointer; }
.card-locked .cov-blur{ position:absolute; inset:0; overflow:hidden; }
.card-locked .cov-blur .cover-img{ filter:blur(20px); transform:scale(1.18); }
.card-locked .lock-veil{ position:absolute; inset:0; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; background:rgba(10,10,20,.42); backdrop-filter:blur(2px); }
.card-locked .lock-badge{ font-weight:700; font-size:13px; color:#ffb59e;
  background:rgba(255,120,120,.18); border:1px solid rgba(255,120,120,.55); border-radius:999px; padding:3px 12px; }
.card-locked .lock-ic{ font-size:22px; opacity:.9; }
.card-locked .cov-title{ position:relative; z-index:2; }
.post-list{ margin:0 0 22px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.post-list li{ position:relative; padding-left:26px; color:var(--text-soft); font-size:16px; line-height:1.6; }
.post-list li::before{
  content:""; position:absolute; left:4px; top:11px;
  width:8px; height:8px; border-radius:50%; background:var(--grad);
}
/* Numbered list: same rhythm, the dot becomes a counter. */
ol.post-list{ counter-reset:pl; }
ol.post-list li{ counter-increment:pl; padding-left:30px; }
ol.post-list li::before{ content:counter(pl) "."; width:auto; height:auto; border-radius:0; background:none;
  top:0; left:0; color:var(--violet); font-weight:700; font-variant-numeric:tabular-nums; }
.post-h3{ font-size:clamp(18px,2.3vw,21px); margin:26px 0 10px; color:var(--text); text-wrap:balance; }
.post-quote{ margin:0 0 22px; padding:14px 18px; border-left:3px solid var(--violet); border-radius:0;
  background:rgba(var(--violet-rgb),.07); color:var(--text); font-family:"Fraunces",serif; font-style:italic;
  font-size:17px; line-height:1.65; }
.post-al-center{ text-align:center; }
.post-al-right{ text-align:right; }
.post-al-justify{ text-align:justify; }
.post-mentioned{ margin-top:40px; padding-top:26px; border-top:1px solid var(--line); }
.post-mentioned .hscroll{ grid-auto-columns:minmax(150px,168px); }

.post-nav{ display:flex; justify-content:space-between; gap:14px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.post-nav-btn{
  flex:1 1 0; min-width:0; text-align:left;
  display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:14px 18px; transition:border-color .2s, background .2s, transform .18s var(--ease);
}
.post-nav-btn:hover{ border-color:var(--violet); background:var(--surface-2); transform:translateY(-2px); }
.post-nav-btn.right{ text-align:right; align-items:flex-end; }
.pn-dir{ font-size:12px; color:var(--text-mute); font-weight:600; letter-spacing:.02em; }
.pn-title{ font-family:"Fraunces",serif; font-size:15px; color:var(--text); line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

@media (max-width:560px){
  .post-nav{ flex-direction:column; }
  .post-nav-btn.right{ text-align:left; align-items:flex-start; }
}

/* ---------- Settings ---------- */
.settings-group{ display:flex; flex-direction:column; gap:16px; }
.set-card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:22px 24px; }
.set-head{ display:flex; align-items:center; gap:11px; font-family:"Fraunces",serif; font-weight:600; font-size:19px; margin-bottom:10px; }
.set-head .ico{ width:22px; height:22px; color:var(--violet); flex:0 0 auto; }
.set-p{ color:var(--text-soft); font-size:14.5px; line-height:1.6; margin:0 0 16px; }
.set-p b{ color:var(--text); }
.set-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.set-actions .btn{ padding:12px 20px; font-size:14px; }
.set-fine{ color:var(--text-faint); font-size:12.5px; line-height:1.5; margin:14px 0 0; }
.set-msg{ display:none; margin-top:14px; font-size:13.5px; line-height:1.5; padding:10px 14px; border-radius:10px; }
.set-msg.show{ display:block; }
.set-msg.ok{ color:var(--ok); background:rgba(var(--ok-rgb),.1); border:1px solid rgba(var(--ok-rgb),.3); }
.set-msg.err{ color:var(--coral); background:rgba(var(--coral-rgb),.1); border:1px solid rgba(var(--coral-rgb),.35); }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.set-row:last-child{ border-bottom:none; }
/* A data row directly above action buttons shouldn't draw its divider right
   against them — drop the line and give the buttons room to breathe. */
.set-row:has(+ .set-actions){ border-bottom:none; }
.set-row + .set-actions{ margin-top:14px; }
.set-row span{ color:var(--text-mute); }
.set-row b{ color:var(--text); font-weight:500; }
.set-link{ color:var(--violet); font-weight:500; }
.set-link:hover{ text-decoration:underline; }

/* Mobile settings button (sidebar with Settings is hidden < 900px) */
.mobile-settings{ display:none; }
@media (max-width:900px){
  .mobile-settings{
    display:grid; place-items:center;
    position:fixed; top:calc(10px + var(--safe-t)); right:14px; z-index:55;
    width:40px; height:40px; border-radius:50%;
    background:rgba(var(--bar-rgb),.72); backdrop-filter:blur(10px);
    border:1px solid var(--line-strong); color:var(--text-soft);
    box-shadow:var(--shadow);
  }
  .mobile-settings:hover{ color:var(--text); }
  .mobile-settings .ico{ width:20px; height:20px; }
}

/* ---------- Theme picker (moon button + popover + Settings grid) ---------- */
.theme-btn{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  color:var(--text-soft); border:1px solid var(--line-strong); background:rgba(var(--ink-rgb),.03);
  transition:color .15s, border-color .15s, transform .15s; }
.theme-btn:hover, .theme-btn[aria-expanded="true"]{ color:var(--violet); border-color:var(--violet); }
.theme-btn .ico{ width:19px; height:19px; }
.side-theme{ margin-left:auto; width:34px; height:34px; }
.mobile-theme{ display:none; }
@media (max-width:900px){
  .mobile-theme{ display:grid; position:fixed; top:calc(10px + var(--safe-t)); right:62px; z-index:55;
    background:rgba(var(--bar-rgb),.72); backdrop-filter:blur(10px); box-shadow:var(--shadow); }
}
.theme-pop{ position:fixed; z-index:90; width:min(300px, calc(100vw - 20px)); padding:8px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:0 18px 44px -12px rgba(0,0,0,.45); display:flex; flex-direction:column; gap:2px; }
.theme-pop-h{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); padding:6px 10px 4px; }
.theme-opt{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:9px 10px;
  border-radius:var(--radius-sm); border:1px solid transparent; color:var(--text); }
.theme-opt:hover{ background:rgba(var(--ink-rgb),.05); }
.theme-opt.on{ border-color:var(--violet); background:rgba(var(--violet-rgb),.10); }
.theme-sw{ display:flex; flex:0 0 auto; border-radius:999px; overflow:hidden; border:1px solid var(--line-strong); }
.theme-sw i{ width:13px; height:26px; display:block; }
.theme-nm{ display:flex; flex-direction:column; min-width:0; flex:1; }
.theme-nm b{ font-weight:600; font-size:14px; }
.theme-nm small{ font-size:12px; color:var(--text-mute); }
.theme-check{ color:var(--violet); font-weight:700; opacity:0; }
.theme-opt.on .theme-check{ opacity:1; }
.theme-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:8px; margin-top:12px; }
.theme-grid .theme-opt{ border-color:var(--line); background:var(--surface-2); }
.theme-grid .theme-opt.on{ border-color:var(--violet); background:rgba(var(--violet-rgb),.10); }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:rgba(6,7,20,.62); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s var(--ease);
}
.modal-overlay.show{ opacity:1; }
.modal{
  position:relative; width:min(560px,100%); max-height:86dvh; overflow:auto;
  background:linear-gradient(165deg,var(--panel-a),var(--panel-b) 82%);
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:28px clamp(20px,4vw,32px);
  transform:translateY(12px) scale(.985); transition:transform .22s var(--ease);
}
.modal-overlay.show .modal{ transform:none; }
.modal-x{
  position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%;
  color:var(--text-mute); font-size:22px; line-height:1; display:grid; place-items:center;
}
.modal-x:hover{ background:rgba(var(--ink-rgb),.06); color:var(--text); }
.modal-eyebrow{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); font-weight:700; margin-bottom:8px; }
.modal-h{ font-size:clamp(22px,3vw,28px); margin-bottom:20px; }
.modal-cta{ margin-top:24px; width:100%; justify-content:center; }

.whatsnew{ display:flex; flex-direction:column; gap:20px; }
.cl-head{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.cl-ver{ font-size:11.5px; font-weight:700; color:var(--on-accent); background:var(--grad); padding:3px 9px; border-radius:999px; }
.cl-title{ font-family:"Fraunces",serif; font-weight:600; font-size:16px; }
.cl-notes{ margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.cl-notes li{ position:relative; padding-left:22px; color:var(--text-soft); font-size:14.5px; line-height:1.55; }
.cl-notes li::before{ content:""; position:absolute; left:3px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--violet); }

/* ---------- Auth modal ---------- */
.auth-google{ width:100%; justify-content:center; gap:10px; padding:12px; background:#fff; color:#1f1f1f; border:none; font-weight:600; }
.auth-google:hover{ filter:brightness(.96); background:#fff; }
.auth-google svg{ flex:0 0 auto; }
.auth-or{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-faint); font-size:12px; }
.auth-or::before, .auth-or::after{ content:""; height:1px; flex:1; background:var(--line); }
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-field{ display:flex; flex-direction:column; gap:7px; }
.auth-field label{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); font-weight:600; }
.auth-field input{ width:100%; padding:12px 14px; border-radius:11px; font:inherit; font-size:15px;
  color:var(--text); background:var(--surface-2); border:1px solid var(--line-strong); }
.auth-field input:focus{ outline:none; border-color:var(--violet); }
.auth-forgot{ align-self:flex-start; color:var(--text-mute); font-size:13px; padding:0; }
.auth-forgot:hover{ color:var(--violet); }
.auth-err{ display:none; font-size:13px; line-height:1.45; color:var(--coral); }
.auth-err.show{ display:block; }
.auth-err.ok{ color:var(--ok); }
.auth-submit{ width:100%; justify-content:center; margin-top:4px; }
.auth-toggle{ margin-top:20px; text-align:center; font-size:13.5px; color:var(--text-mute); }
.auth-toggle button{ color:var(--violet); font-weight:600; padding:0 4px; }
.auth-toggle button:hover{ text-decoration:underline; }

/* reconciliation choice */
.reco-opts{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.reco-opt{ text-align:left; padding:16px 18px; border-radius:var(--radius);
  border:1px solid var(--line-strong); background:var(--surface); display:flex; flex-direction:column; gap:4px;
  transition:transform .16s var(--ease), border-color .18s, background .18s; }
.reco-opt:hover{ transform:translateY(-2px); border-color:var(--violet); background:var(--surface-2); }
.reco-opt b{ font-size:15.5px; }
.reco-opt span{ font-size:13px; color:var(--text-mute); }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:20px; z-index:45;
  bottom:calc(24px + var(--safe-b));
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--grad); color:var(--on-accent);
  box-shadow:var(--shadow-glow);
  transform:translateY(12px) scale(.92); opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.to-top.show{ transform:none; opacity:1; pointer-events:auto; }
.to-top svg{ width:22px; height:22px; }
.to-top:hover{ filter:brightness(1.06); }
/* Above the bottom tab bar on phones/tablets so it never overlaps the nav. */
@media (max-width:900px){
  .to-top{ bottom:calc(var(--bottom-nav-h) + 16px + var(--safe-b)); }
}

/* ---------- Update banner ---------- */
.update-banner{
  position:fixed; left:16px; right:16px; z-index:65;
  bottom:calc(var(--bottom-nav-h) + 16px + var(--safe-b));
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:16px;
  box-shadow:var(--shadow); transform:translateY(16px); opacity:0;
  transition:opacity .24s var(--ease), transform .24s var(--ease);
}
.update-banner.show{ transform:none; opacity:1; }
.ub-glyph{ width:32px; height:32px; flex:0 0 auto; }
.ub-txt{ flex:1; font-size:13px; color:var(--text-soft); line-height:1.4; }
.ub-txt b{ color:var(--text); }
.ub-refresh{ padding:9px 16px; border-radius:999px; background:var(--grad); color:var(--on-accent); font-weight:600; font-size:13px; white-space:nowrap; }
.ub-refresh:hover{ filter:brightness(1.05); }
.ub-x{ color:var(--text-mute); font-size:20px; padding:2px 6px; flex:0 0 auto; }
.ub-x:hover{ color:var(--text); }
@media (min-width:901px){ .update-banner{ left:auto; right:24px; bottom:24px; width:380px; } }

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{ display:none; }

/* ---------- iOS install hint ---------- */
.ios-hint{
  position:fixed; left:16px; right:16px; z-index:60;
  bottom:calc(var(--bottom-nav-h) + 16px + var(--safe-b));
  background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:16px; padding:14px 16px; box-shadow:var(--shadow);
  display:none; align-items:center; gap:12px;
}
.ios-hint.show{ display:flex; }
.ios-hint .glyph{ width:34px; height:34px; flex:0 0 auto; }
.ios-hint .txt{ flex:1; font-size:13px; color:var(--text-soft); line-height:1.4; }
.ios-hint .txt b{ color:var(--text); }
.ios-hint .x{ color:var(--text-mute); font-size:20px; padding:4px 8px; flex:0 0 auto; }

/* ============================================================
   Responsive: collapse to bottom nav below 900px
   ============================================================ */
@media (max-width:900px){
  .app{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
  main{ padding-bottom:calc(var(--bottom-nav-h) + 24px + var(--safe-b)); }
  .wrap{ padding-top:calc(20px + var(--safe-t)); }

  .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    height:calc(var(--bottom-nav-h) + var(--safe-b)); padding-bottom:var(--safe-b);
    background:rgba(var(--bar-rgb),.86); backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
    justify-content:space-around; align-items:center;
  }
  .tab{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:var(--text-mute); font-size:10.5px; font-weight:500;
    padding:8px 6px; flex:1; transition:color .2s var(--ease); min-width:0;
  }
  .tab .ico{ width:23px; height:23px; opacity:.9; }
  .tab.active{ color:var(--text); }
  .tab.active .ico{ filter:drop-shadow(0 2px 8px rgba(var(--glow-rgb),.7)); }
  .tab.pick{ flex:0 0 auto; }
  .tab.pick .ico-wrap{
    width:52px; height:52px; border-radius:50%; margin-top:-24px;
    background:var(--grad); display:grid; place-items:center;
    box-shadow:var(--shadow-glow); border:4px solid var(--bg-2);
  }
  .tab.pick .ico{ width:24px; height:24px; opacity:1; }
  .tab.pick .ico path, .tab.pick .ico circle{ stroke:var(--on-accent); }
  .tab.pick span{ margin-top:2px; }
}
@media (min-width:901px){
  .mobile-tropes-link{ display:none; }
}
@media (max-width:520px){
  .grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .hero .moon{ opacity:.35; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}