/* =========================================================================
   The Story Tavern: single source of truth for all styling.
   Everything is class/id based and colours come ONLY from the :root tokens
   below (dark theme; a light theme + toggle drops in by redefining these).
   Never hardcode a colour in a template or an inline style; add a semantic
   token here instead. See CSS-TEMPLATE-REFACTOR-SPEC.md.
   ========================================================================= */
:root{
  /* Dark theme (redesign). Same variable names so every component inherits
     the flip; a few overloaded vars are remapped in the rules below. */
  --ink:#ECE6D8;--muted:#8f97a1;--amber:#F2A84B;--amber-dk:#E0A94B;
  --timber:#171b20;--parch:#C2AF94;--parch-lt:#232a31;
  --bg:#0f1214;--card:#191d22;--line:#2a3037;--crimson:#d9645a;--forest:#13221B;
  --field:#12161a;--slate:#7E99A6;
  /* semantic surfaces (status tints) so nothing needs a hardcoded color */
  --bg-success:#16241b;--bg-danger:#2a1a18;--bg-warning:#241a0d;--bg-amber:#221c12;
  /* retailer brand marks (external logos, theme-independent) */
  --rt-amazon:#ff9900;--rt-goodreads:#a8734f;--rt-bookbub:#e4353f;--rt-apple:#9aa0a6;--rt-storygraph:#7b6cf0;
  --serif:Cinzel, Georgia, 'Times New Roman', serif;
  /* extra semantic tokens added for the de-inlining pass (replace literals
     that used to live in template style="" attributes). */
  --ink-on-amber:#1c1b19;      /* text on an amber fill */
  --ink-bright:#F4ECDC;        /* brightest ivory (brand wordmarks/headings) */
  --ink-nav:#EDE4D2;           /* nav/menu link ivory */
  --ink-nav-dim:#E9D9BD;       /* footer link ivory */
  --menu-bg:#2a2018;           /* dropdown/menu panel surface */
  --menu-hover:#3a2c1f;        /* dropdown/menu hover surface */
  --strip-bg:#3a2c1f;          /* promo/notice strip surface */
  --feed-unread:#34281c;       /* unread feed item surface */
  --viewas-bg:#7a2e2e;         /* staff "view as" banner */
  --ink-inverse:#fff;          /* text on the crimson view-as banner */
  --success-ink:#8fce9e;--success-line:#274a34;   /* flash success message */
  --danger-ink:#e8a59b;--danger-line:#4a2b26;     /* flash error message */
  --warning-ink:#e8c48a;       /* pending-work warning strip */
  --verify-line:#e3c9c2;--verify-ink:#7d2a20;     /* verify-email strip */
  --line-strong:#e0d2b8;       /* author role-badge border (legacy light) */
  --author-badge-ink:#6b4f2a;  /* author role-badge text (legacy light) */
  --tint-amber:rgba(242,168,75,.08);  /* translucent amber highlight (did-you-mean suggestion boxes) */
  --merge-line:#3a4650;        /* border for a "Merge" action button (dark-safe; was legacy light #ddceb3) */
  --shadow-sm:0 1px 2px rgba(28,27,25,.06);
  --shadow-card:0 1px 3px rgba(28,27,25,.08);
  --shadow-pop:0 6px 18px rgba(0,0,0,.3);
  --shadow-drop:0 8px 22px rgba(0,0,0,.34);
  --shadow-panel:-8px 0 28px rgba(0,0,0,.28);
  --scrim:rgba(0,0,0,.4);      /* modal/overlay scrim */
  --scrim-strong:rgba(0,0,0,.85);  /* lightbox scrim */
  /* Promo video canvas palette: the rendered video is a fixed "warm parchment"
     look that must NOT flip with the site's own light/dark theme, so it gets
     its own tokens (read via getComputedStyle in the canvas JS) instead of
     hardcoded hex in the script or reuse of theme tokens that could change. */
  --pv-timber:#2A2018;--pv-brown:#4D3B2C;--pv-tan:#C2AF94;--pv-tanlt:#EFE6D6;
  --pv-accent-1:#CF8526;--pv-accent-2:#7D2A20;--pv-accent-3:#2F5233;
  --pv-parchment-1:#F9F6EE;--pv-parchment-2:#F6F0E0;--pv-parchment-3:#FBF4E4;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--amber)}
h1,h2,h3{font-family:var(--serif);color:var(--ink);letter-spacing:.3px}
/* Headings scale with the viewport so a long title shrinks to fit
   instead of wrapping to a second line (caps at the old size on big
   screens, floors so it stays readable on phones). */
h1{margin-top:0;font-size:clamp(1.55rem,1.05rem + 1.7vw,2rem);line-height:1.22}
h2{font-size:clamp(1.2rem,0.95rem + 0.9vw,1.5rem)}
.wrap{max-width:1000px;margin:0 auto;padding:0 var(--sp-8)}
/* 3-column app shell: left nav ~25% | content ~50% | right ads ~25%. */
.shell{display:grid;grid-template-columns:minmax(210px,250px) 1fr;gap:var(--sp-10);align-items:start;
  width:95vw;max-width:1280px;margin:var(--sp-4) auto 0;padding:0 var(--sp-9);box-sizing:border-box}
.shell-solo{grid-template-columns:minmax(0,1180px);justify-content:center}
.shell-left,.shell-mid,.shell-right{min-width:0}
/* The ads column must span the full row height so its sticky content can
   ride along as the page scrolls. */
.shell-right{align-self:stretch}
.shell-mid{overflow-wrap:anywhere}
/* Ads column: stays on screen while the page scrolls; if the ads are ever
   taller than the window, the column gets its own scrollbar. */
.adside{position:sticky;top:16px;display:flex;flex-direction:column;gap:var(--sp-7);
        max-height:calc(100vh - 32px);overflow-y:auto}
.adcard{display:block;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-card)}
.adcard video,.adcard img{width:100%;display:block}
@media(max-width:1100px){ .shell{grid-template-columns:1fr} .shell-right{margin-top:var(--sp-4)} }
/* Old in-page 2-column wrapper: neutralized inside the shell. Its sidebar now
   lives in the shell's left column (via each page's leftbar block). */
.rdash{display:contents}
.rdash-side{display:none}
header{background:var(--timber);border-bottom:3px solid var(--amber)}
header .wrap{max-width:none}
nav{display:flex;align-items:center;flex-wrap:wrap}
.topbar{gap:var(--sp-7);min-height:66px}
.menuline{gap:var(--sp-9);min-height:48px;width:100%;border-top:1px solid rgba(244,236,220,.13);padding:var(--sp-2) 20% var(--sp-3) 0;justify-content:space-between}
nav a{color:var(--ink-nav)}
nav a:hover{color:var(--amber)}
nav .brand{display:flex;align-items:center;gap:var(--sp-5);font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink-bright);white-space:nowrap}
nav .brand img{height:56px;width:auto;display:block}
/* (top menu row styling lives in .menuline / .mainnav above) */
/* New Booksprout-style top menu items: bigger, spread out, icon in front. */
.mainnav{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-xl);font-weight:600;letter-spacing:.2px}
.mainnav .mnicon{width:20px;height:20px;flex-shrink:0}
/* Logged-out marketing header: collapse the two-tier nav into one row. */
@media(min-width:901px){
  .mkt .topbar{min-height:54px}
  .mkt nav .brand img{height:40px}
  .mkt .wrap{position:relative}
  .mkt .menuline{position:absolute;inset:0 0 auto 0;height:54px;min-height:0;width:auto;border-top:0;padding:0;gap:26px;align-items:center;justify-content:center;pointer-events:none}
  .mkt .menuline a{pointer-events:auto}
  .mkt .menuline .mnicon{display:none}
}
/* Legacy in-page 2-column wrapper. The shell now provides the columns, so this
   is neutralized (its sidebar moved to the shell's left column). */
main .wrap:has(.rdash){padding-left:0;padding-right:0}
.rnav{display:flex;flex-direction:column;gap:var(--sp-3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--sp-5);position:sticky;top:16px}
.rnav a{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-7);border-radius:var(--r-lg);color:var(--ink);font-weight:600;font-size:var(--fs-lg)}
.rnav a svg{width:20px;height:20px;flex-shrink:0}
.rnav a:hover{background:var(--menu-hover);color:var(--ink)}
.rnav a.on:hover{background:var(--amber);color:var(--ink-on-amber)}
.rnav a.on{background:var(--amber);border:1px solid var(--amber-dk);color:var(--ink-on-amber)}
.rnav-h{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:var(--sp-5) var(--sp-6) var(--sp-1);font-weight:700}
@media (max-width:820px){
  .rdash{flex-direction:column;gap:var(--sp-8)}
  .rdash-side{width:100%}
  .rnav{flex-direction:row;flex-wrap:wrap;position:static}
  .rnav a{font-size:var(--fs-base);padding:var(--sp-5) var(--sp-6)}
}
.navtoggle{display:none;background:none;border:0;color:var(--ink-nav);font-size:26px;line-height:1;cursor:pointer;margin-left:auto;padding:var(--sp-3) var(--sp-4)}
nav .spacer{flex:1}
nav .greet{color:var(--parch);font-size:var(--fs-md)}
.rolebadge{display:inline-block;font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4);margin-left:var(--sp-3);vertical-align:middle;line-height:1.7;letter-spacing:.02em}
.rolebadge.admin{background:var(--crimson);color:var(--ink-inverse)}
.rolebadge.mod{background:var(--amber);color:var(--ink-on-amber)}
.rolebadge.author{background:var(--card);color:var(--author-badge-ink);border:1px solid var(--line-strong)}
.pswitch{position:relative;display:inline-block}
.pswitch>summary{cursor:pointer;list-style:none}
.pswitch>summary::-webkit-details-marker{display:none}
.pswitch .pmenu{position:absolute;right:0;top:130%;background:var(--menu-bg);border:1px solid var(--timber);border-radius:var(--r-md);padding:var(--sp-3);min-width:170px;z-index:60;box-shadow:var(--shadow-pop)}
.pswitch .pmenu-h{font-size:var(--fs-xs);color:var(--muted);padding:var(--sp-1) var(--sp-4) var(--sp-3)}
.pswitch .pmenu form{margin:0}
.pswitch .pmenu button{display:block;width:100%;text-align:left;padding:var(--sp-3) var(--sp-4);color:var(--ink-nav);border-radius:var(--r-sm)}
.pswitch .pmenu button:hover:not(:disabled){background:var(--menu-hover)}
.pswitch .pmenu button:disabled{color:var(--amber);font-weight:700;cursor:default}
.navmenu{position:relative}
.navmenu>summary{cursor:pointer;list-style:none;color:var(--ink-nav);white-space:nowrap}
.navmenu>summary::-webkit-details-marker{display:none}
.navmenu>summary:hover{color:var(--amber)}
.navmenu[open]>summary{color:var(--amber)}
.navmenu .nmlist{position:absolute;left:0;top:160%;background:var(--menu-bg);border:1px solid var(--timber);border-radius:var(--r-md);padding:var(--sp-3);min-width:190px;z-index:60;box-shadow:var(--shadow-pop)}
.navmenu .nmlist a{display:block;padding:var(--sp-4) var(--sp-5);color:var(--ink-nav);border-radius:var(--r-sm);white-space:nowrap}
.navmenu .nmlist a:hover{background:var(--menu-hover);color:var(--amber)}
.navmenu .nmhead{font-size:var(--fs-xs);color:var(--muted);padding:var(--sp-2) var(--sp-5) var(--sp-1);text-transform:uppercase;letter-spacing:.04em}
.ql-toolbar button.ql-emoji{font-size:var(--fs-lg);line-height:1}
.emoji-panel{position:absolute;top:100%;left:0;z-index:70;background:var(--menu-bg);border:1px solid var(--timber);border-radius:var(--r-md);padding:var(--sp-3);grid-template-columns:repeat(8,1fr);gap:var(--sp-1);width:296px;max-height:180px;overflow:auto;box-shadow:var(--shadow-pop)}
.emoji-panel button{background:none;border:0;cursor:pointer;font-size:var(--fs-3xl);padding:var(--sp-2);border-radius:var(--r-2xs);line-height:1.2}
.emoji-panel button:hover{background:var(--menu-hover)}
@media (max-width:900px){
  .topbar{min-height:54px}
  header .wrap{width:auto}
  nav .brand{font-size:var(--fs-2xl)}
  nav .brand img{height:46px}
  .navtoggle{display:block}
  .menuline{display:none;flex-direction:column;align-items:flex-start;gap:var(--sp-7);padding:var(--sp-3) 0 var(--sp-7);border-top:0}
  .menuline.open{display:flex}
  .navmenu{width:100%}
  .navmenu .nmlist{position:static;box-shadow:none;border:0;background:transparent;padding:var(--sp-1) 0 var(--sp-1) var(--sp-7);min-width:0;border-left:2px solid var(--timber);margin-top:var(--sp-2)}
  .navmenu .nmlist a{padding:var(--sp-3) 0}
}
/* Phones: compact 2-row header (brand + hamburger, then icons), and pin
   the icon dropdowns to the viewport edges instead of their icon (a 320px
   panel anchored to a left-side icon otherwise hangs off-screen). */
@media (max-width:700px){
  .topbar{row-gap:0;column-gap:var(--sp-4)}
  nav .brand{order:1}
  .navtoggle{order:2;margin-left:auto}
  .iconrow{order:3;width:100%;margin-left:0;justify-content:flex-end;gap:var(--sp-1)}
}
.btn{display:inline-block;background:var(--amber);color:var(--ink-on-amber);padding:var(--sp-4) 15px;border-radius:var(--r-md);border:1px solid var(--amber-dk);cursor:pointer;font-size:var(--fs-base);font-weight:600}
.btn:hover{background:var(--amber-dk)}
.btn.sm{font-size:var(--fs-md);padding:var(--sp-3) var(--sp-6)}
.btn.xs{font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-5)}
/* Extra-small book-cover thumbnail (purchase rows, etc.). */
.cover-xs{width:52px;height:78px;border-radius:var(--r-sm);object-fit:cover}
.cover-ph{background:var(--parch-lt);border:1px solid var(--line)}
.linkbtn{background:none;border:0;color:var(--amber);cursor:pointer;font:inherit;padding:0}
/* ---- Top-bar icon row (Messages / Notifications / Support / Account) ---- */
.iconrow{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.hi-name{color:var(--ink-nav);font-size:var(--fs-md);margin:0 var(--sp-1) 0 var(--sp-4);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){.hi-name{display:none}}
.iconbtn,.navicon>summary{display:inline-flex;align-items:center;justify-content:center;position:relative;background:none;border:0;cursor:pointer;color:var(--ink-nav);padding:var(--sp-4);border-radius:var(--r-md);line-height:0;list-style:none}
.navicon>summary::-webkit-details-marker{display:none}
.iconbtn:hover,.navicon>summary:hover,.navicon[open]>summary{color:var(--amber);background:var(--menu-hover)}
.iconbtn svg,.navicon>summary svg{width:22px;height:22px}
.icon-badge{position:absolute;top:1px;right:0;background:var(--amber);color:var(--ink-on-amber);border-radius:var(--r-pill);min-width:16px;height:16px;font-size:var(--fs-2xs);font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 var(--sp-2);line-height:1}
.navicon{position:relative}
.icondrop{position:absolute;right:0;top:138%;width:320px;max-width:86vw;background:var(--menu-bg);border:1px solid var(--timber);border-radius:var(--r-lg);padding:var(--sp-3);z-index:70;box-shadow:var(--shadow-drop)}
.icondrop-h{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:var(--sp-3) var(--sp-4)}
.icondrop-h a{font-size:var(--fs-sm);text-transform:none;letter-spacing:0;color:var(--amber)}
.icondrop a,.icondrop button.dropitem{display:block;width:100%;text-align:left;padding:var(--sp-4) var(--sp-5);color:var(--ink-nav);border-radius:var(--r-sm);background:none;border:0;cursor:pointer;font:inherit}
.icondrop a:hover,.icondrop button.dropitem:hover{background:var(--menu-hover);color:var(--amber)}
.icondrop button.dropitem:disabled{color:var(--amber)}
.icondrop-sub{font-size:var(--fs-xs);color:var(--muted);padding:var(--sp-4) var(--sp-5) var(--sp-1);text-transform:uppercase;letter-spacing:.04em}
.icondrop-list{max-height:360px;overflow:auto}
/* Small screens: pin panels to the viewport, not their icon -- a 320px
   dropdown anchored to a left-side icon otherwise hangs off the screen
   edge. (Must come AFTER the base rules above to win the cascade.)
   Tablets get a right-pinned panel; phones get near-full-width. */
@media (max-width:900px){
  .icondrop{position:fixed;left:auto;right:10px;top:auto;width:320px;max-width:calc(100vw - 20px)}
  .pswitch .pmenu{max-width:calc(100vw - 20px)}
  .emoji-panel{max-width:calc(100vw - 30px)}
  .react-detail,.react-pop{max-width:calc(100vw - 30px);white-space:normal}
}
@media (max-width:700px){
  .icondrop{left:10px;right:10px;width:auto;max-width:none}
}
.icondrop .feeditem{display:block;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-sm);color:var(--ink-nav)}
.icondrop .feeditem:hover{background:var(--menu-hover);color:var(--ink-nav)}
.icondrop .feeditem.unread{background:var(--feed-unread)}
.icondrop .feeditem .fi-name{font-weight:600}
.icondrop .feeditem .fi-when{color:var(--muted);font-size:var(--fs-xs);margin-top:var(--sp-1)}
.icondrop-empty{color:var(--muted);font-size:var(--fs-md);padding:var(--sp-7) var(--sp-5);text-align:center}
.acct-sep{border-top:1px solid var(--timber);margin:var(--sp-2) 0}
.acct-name{font-family:var(--serif);color:var(--ink-bright);font-weight:700;padding:var(--sp-3) var(--sp-5) var(--sp-4);font-size:var(--fs-lg)}
/* ---- Slide-in Support panel ---- */
.sts-overlay{position:fixed;inset:0;background:var(--scrim);z-index:200;opacity:0;visibility:hidden;transition:opacity .2s}
.sts-overlay.open{opacity:1;visibility:visible}
.sts-panel{position:fixed;top:0;right:0;height:100%;width:390px;max-width:94vw;background:var(--bg);box-shadow:var(--shadow-panel);z-index:201;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s ease}
.sts-panel.open{transform:translateX(0)}
.sts-head{background:var(--timber);color:var(--ink-bright);padding:var(--sp-7) var(--sp-8);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);border-bottom:3px solid var(--amber);font-family:var(--serif);font-size:var(--fs-2xl)}
.sts-head button{background:none;border:0;color:var(--ink-bright);font-size:26px;line-height:1;cursor:pointer;padding:0 var(--sp-2)}
.sts-body{flex:1;overflow:auto;padding:var(--sp-8);display:flex;flex-direction:column;min-height:0}
.sts-view{display:flex;flex-direction:column;gap:var(--sp-5)}
.sts-view[hidden]{display:none}
.sts-view.grow{flex:1;min-height:0}
.sts-opt{display:flex;align-items:flex-start;gap:var(--sp-5);text-align:left;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-7) var(--sp-7);cursor:pointer;color:var(--ink);font:inherit}
.sts-opt:hover{border-color:var(--amber);color:var(--ink)}
.sts-opt .o-ic{font-size:22px;line-height:1}
.sts-opt .o-t{font-weight:600}
.sts-opt .o-d{font-size:var(--fs-md);color:var(--muted);margin-top:var(--sp-1)}
.sts-back{background:none;border:0;color:var(--amber-dk);cursor:pointer;font:inherit;padding:0;align-self:flex-start}
.sts-chat{flex:1;overflow:auto;display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-2) 0;min-height:120px}
.sts-msg{max-width:88%;padding:var(--sp-5) var(--sp-6);border-radius:var(--r-xl);font-size:var(--fs-base);line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.sts-msg.user{align-self:flex-end;background:var(--amber);color:var(--ink-on-amber);border-bottom-right-radius:var(--r-2xs)}
.sts-msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:var(--r-2xs)}
.sts-msg.note{align-self:center;color:var(--muted);font-size:var(--fs-sm);background:none}
.sts-inrow{display:flex;gap:var(--sp-4);align-items:flex-end;margin-top:var(--sp-4)}
.sts-inrow textarea{flex:1;resize:none;min-height:42px}
main{padding:var(--sp-7) 0;min-height:60vh}
.messages{list-style:none;padding:0;margin:0 0 var(--sp-8)}
.messages li{padding:var(--sp-5) var(--sp-7);border-radius:var(--r-md);background:var(--bg-success);color:var(--success-ink);margin-bottom:var(--sp-4);border:1px solid var(--success-line)}
.messages li.error{background:var(--bg-danger);color:var(--danger-ink);border-color:var(--danger-line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-9)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;color:var(--ink);box-shadow:var(--shadow-sm)}
.card img{width:100%;height:260px;object-fit:cover;background:var(--card)}
.card .noimg{height:260px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--card)}
.card .body{padding:var(--sp-6)}
.card h3{margin:0 0 var(--sp-3);font-size:var(--fs-xl)}
.meta{color:var(--muted);font-size:var(--fs-md)}
.pill{display:inline-block;font-size:var(--fs-sm);background:var(--parch-lt);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-5);margin:var(--sp-2) var(--sp-2) 0 0;color:var(--ink)}
a.pill{cursor:pointer;transition:filter .12s}
a.pill:hover{filter:brightness(.93)}
.reviewby{display:inline-block;color:var(--amber-dk);font-weight:600;font-size:var(--fs-sm)}
.reviewby .cal{font-style:normal;font-weight:400}
.due{font-weight:700;color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-9)}
.filters select,.filters input{padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md)}
.detail{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:20px}
.detail .imgs{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin:var(--sp-6) 0}
.detail .imgs img{max-height:320px;border-radius:var(--r-md)}
label{display:block;margin:var(--sp-6) 0 var(--sp-2);font-weight:600}
input[type=text],input[type=url],input[type=date],input[type=password],input[type=email],textarea,select{width:100%;padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-md);font:inherit;background:var(--field);color:var(--ink)}
.checks label{display:inline-flex;align-items:center;gap:var(--sp-3);font-weight:400;margin:0 var(--sp-7) var(--sp-3) 0}
.defs{background:var(--parch-lt);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);font-size:var(--fs-md);color:var(--muted);margin:var(--sp-4) 0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:var(--sp-4);border-top:1px solid var(--line)}
/* Column headers are short words (Delivery, Reliability); never split them
   across lines. Wrap a wide table in .table-scroll so nowrap can scroll
   on narrow screens instead of overflowing the page. */
th{white-space:nowrap}
.table-scroll{overflow-x:auto}
footer{background:var(--timber);color:var(--parch);margin-top:44px}
footer .wrap{padding:var(--sp-9) var(--sp-8);font-size:var(--fs-md)}
footer .fbrand{font-family:var(--serif);color:var(--ink-bright);font-weight:700}
footer a{color:var(--ink-nav-dim)}
footer a:hover{color:var(--amber)}
footer .links{margin-top:var(--sp-4)}
.ni-count{display:inline-block;background:var(--amber);color:var(--ink-on-amber);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;padding:0 var(--sp-3);margin-left:var(--sp-3);vertical-align:middle}
.browse-tabs{display:flex;gap:var(--sp-4);margin-bottom:20px;flex-wrap:wrap}
.btab{display:inline-block;padding:var(--sp-5) var(--sp-9);border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:600;font-family:var(--serif)}
.btab:hover{border-color:var(--amber);color:var(--amber-dk)}
.btab.on{background:var(--amber);border-color:var(--amber-dk);color:var(--ink-on-amber)}
.licon{height:1.15em;width:auto;vertical-align:-0.22em;margin-right:.22em}
.richtext{line-height:1.6;word-wrap:break-word}
.richtext p{margin:0 0 .6em}
.richtext img{max-width:100%;height:auto;border-radius:var(--r-md);margin:var(--sp-3) 0}
.richtext blockquote{margin:.6em 0;padding:var(--sp-2) var(--sp-7);border-left:3px solid var(--amber);color:var(--muted)}
.richtext ul,.richtext ol{margin:.4em 0;padding-left:1.6em}
.richtext h2,.richtext h3{margin:.5em 0 .3em}
.richtext a{color:var(--amber-dk);text-decoration:underline}
/* Shared browse-card styles (Books page + reader Find reviews). */
.frail{margin-top:var(--sp-9)}
.frail-h{font-family:var(--serif);font-size:var(--fs-sm);letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:var(--sp-7) 0 var(--sp-3)}
.frail select{width:100%}
.frail .clearf{display:inline-block;margin-top:var(--sp-6);color:var(--amber-dk);font-size:var(--fs-md)}
.browse-top{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;margin:var(--sp-8) 0 var(--sp-2)}
.browse-top .srch{display:flex;gap:var(--sp-4);flex:1;min-width:220px;max-width:480px}
.browse-top .srch input{flex:1;width:auto}
.browse-count{font-size:var(--fs-md);color:var(--muted);white-space:nowrap}
.vtoggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-left:auto}
.vtoggle a{padding:var(--sp-3) var(--sp-6);color:var(--muted);display:flex;align-items:center;line-height:1}
.vtoggle a.on{background:var(--amber);color:var(--ink-on-amber)}
.cards.list{display:flex;flex-direction:column;gap:var(--sp-6)}
.cards.gridv{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--sp-8)}
/* Horizontal Featured rail (logged-out home): vertical cards, scroll sideways. */
.cards.rail{display:flex;gap:var(--sp-7);overflow-x:auto;padding-bottom:var(--sp-5);scroll-snap-type:x proximity;scrollbar-width:thin}
.cards.rail .acard{flex:0 0 290px;display:flex;flex-direction:row;scroll-snap-align:start}
.cards.rail .acard-cover{flex:0 0 94px;align-self:stretch;min-height:0}
.cards.rail .acard-cover img{width:100%;height:100%;object-fit:cover;object-position:center}
.cards.rail .acard-cover .noimg{min-height:0}
.cards.rail .acard-blurb{display:none}
.cards.rail .acard-body{padding:var(--sp-5) var(--sp-6);flex:1;min-width:0}
.cards.rail .acard-title{font-size:var(--fs-lg)}
.cards.rail .acard-due{margin-bottom:var(--sp-3)}
.cards.rail .mb7{display:none}
.cards.rail .acard-tags{max-height:24px;overflow:hidden;gap:var(--sp-2)}
.cards.rail .acard-tags .dashed,.cards.rail .acard-tags .c-crimson{display:none}
.acard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm)}
.cards.list .acard{display:flex}
.cards.gridv .acard{display:flex;flex-direction:column}
.acard-cover{background:var(--card);display:block;overflow:hidden}
/* List cards: a real cover, not a slice. Wider column, and the image
   CONTAINS (never crops) pinned to the top of however tall the card is. */
.cards.list .acard-cover{flex:0 0 150px;align-self:stretch;min-height:200px}
.cards.gridv .acard-cover{width:100%;aspect-ratio:2/3}
.cards.list .acard-cover img{object-fit:contain;object-position:top center}
.acard-cover .noimg{width:100%;height:100%;min-height:162px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-sm);text-align:center;padding:var(--sp-3)}
.acard-body{padding:var(--sp-6) var(--sp-7);min-width:0;flex:1}
.acard-title{margin:0 0 var(--sp-1);font-size:var(--fs-xl);font-family:var(--serif);line-height:1.25}
.acard-title a{color:inherit}
.acard-author{font-size:var(--fs-md);color:var(--muted);margin-bottom:var(--sp-3)}
.acard-blurb{margin:0 0 var(--sp-4);font-size:var(--fs-md);color:var(--ink);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard-blurb a{color:inherit}
.cards.gridv .acard-blurb{display:none}
.acard-due{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-4)}
.acard-tags{display:flex;flex-wrap:wrap}
/* ---- Feed: composer + post cards (Facebook-style) ---- */
.feedcol{max-width:680px}
.composer,.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--sp-7) var(--sp-8);margin-bottom:var(--sp-8);box-shadow:var(--shadow-sm)}
.composer-top{display:flex;gap:var(--sp-5);align-items:flex-start}
.composer textarea{border-radius:var(--r-xl);background:var(--bg)}
.composer-actions{display:flex;align-items:center;gap:var(--sp-5);margin-top:var(--sp-5);border-top:1px solid var(--line);padding-top:var(--sp-5)}
.photo-btn{display:inline-flex;align-items:center;gap:var(--sp-4);color:var(--timber);font-weight:600;font-size:var(--fs-base);cursor:pointer;padding:var(--sp-4) var(--sp-6);border-radius:var(--r-md)}
.photo-btn:hover{background:var(--parch-lt)}
.thumbs{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5)}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line)}
.av-round{border-radius:var(--r-round);object-fit:cover;flex:0 0 auto;background:var(--parch-lt)}
.post.ann{border:2px solid var(--amber);background:var(--bg-amber)}
.post-name{font-weight:600;color:var(--timber)}
.post-name a{color:inherit}
.post-sub{font-size:var(--fs-sm);color:var(--muted)}
.post-sub a{color:inherit}
.post-menu{position:relative;flex:0 0 auto}
.post-menu>summary{list-style:none;cursor:pointer;color:var(--muted);padding:var(--sp-1) var(--sp-5);border-radius:var(--r-md);font-size:var(--fs-4xl);line-height:1}
.post-menu>summary::-webkit-details-marker{display:none}
.post-menu>summary:hover{background:var(--parch-lt)}
.post-menu .pm{position:absolute;right:0;top:112%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3);min-width:150px;z-index:40;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.post-menu .pm a,.post-menu .pm button{display:block;width:100%;text-align:left;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-sm);background:none;border:0;cursor:pointer;font:inherit;color:var(--ink)}
.post-menu .pm a:hover,.post-menu .pm button:hover{background:var(--parch-lt)}
.post-body{margin-top:var(--sp-5)}
.post-media{margin-top:var(--sp-5);border-radius:var(--r-lg);overflow:hidden}
.post-media img{display:block;width:100%;max-height:520px;object-fit:cover;cursor:zoom-in}
.post-media.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.post-media.g2 img{height:240px;max-height:none}
.post-counts{display:flex;align-items:center;gap:var(--sp-7);font-size:var(--fs-md);color:var(--muted);padding:var(--sp-5) var(--sp-1) var(--sp-1)}
.react-summary{position:relative;display:inline-flex;gap:var(--sp-5);align-items:center;cursor:default}
.react-summary .rb{white-space:nowrap}
.react-detail{position:absolute;bottom:100%;left:0;display:none;background:var(--menu-bg);color:var(--ink-nav);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-6);font-size:var(--fs-md);min-width:160px;max-height:240px;overflow:auto;box-shadow:var(--shadow-drop);margin-bottom:var(--sp-4);z-index:35;white-space:nowrap}
.react-detail::after{content:"";position:absolute;top:100%;left:0;right:0;height:9px}
.react-detail div{padding:var(--sp-1) 0}
.react-summary:hover .react-detail{display:block}
.post-bar{display:flex;border-top:1px solid var(--line);margin-top:var(--sp-3);padding-top:var(--sp-2)}
.post-bar .barbtn{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);flex:1;background:none;border:0;cursor:pointer;font:inherit;color:var(--muted);padding:var(--sp-5) var(--sp-2);border-radius:var(--r-md);font-weight:600;font-size:var(--fs-base)}
.post-bar form{flex:1;margin:0;display:flex}
.post-bar .barbtn:hover{background:var(--parch-lt)}
.post-bar .barbtn.liked{color:var(--crimson)}
.react-wrap{position:relative;flex:1;display:flex}
.react-wrap>form{flex:1;display:flex;margin:0}
.react-pop{position:absolute;bottom:100%;left:0;display:none;gap:var(--sp-3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-3) var(--sp-5);box-shadow:0 6px 18px rgba(0,0,0,.16);margin-bottom:var(--sp-4);z-index:30}
.react-pop::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
.react-wrap:hover .react-pop,.react-pop:hover{display:flex}
.react-pop form{flex:0 0 auto;margin:0}
.react-pop button{background:none;border:0;cursor:pointer;font-size:25px;line-height:1;padding:var(--sp-1);border-radius:var(--r-round);transition:transform .1s}
.react-pop button:hover{transform:scale(1.35)}
.cmt{display:flex;gap:var(--sp-4);margin-top:var(--sp-5)}
.cmt-bub{background:var(--parch-lt);border-radius:var(--r-2xl);padding:var(--sp-4) var(--sp-6);min-width:0}
.cmt-name{font-weight:600;font-size:var(--fs-md);color:var(--timber)}
.cmt-name a{color:inherit}
.cmt-actions{font-size:var(--fs-sm);margin:var(--sp-2) 0 0 var(--sp-2);color:var(--muted)}
.cmt-box{display:flex;gap:var(--sp-4);align-items:center;margin-top:var(--sp-6)}
.cmt-box input[type=text]{flex:1;border-radius:var(--r-pill);background:var(--bg)}
.lightbox{position:fixed;inset:0;background:var(--scrim-strong);z-index:300;display:none;align-items:center;justify-content:center;padding:var(--sp-10);cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:96vw;max-height:94vh;border-radius:var(--r-md)}
/* ---- post detail ---- */
.pd-wrap{max-width:760px;margin:0 auto}
.pd-back{margin-bottom:var(--sp-6)}
.pd-card{position:relative}
.pd-report{position:absolute;top:var(--sp-7);right:54px}
.pd-report>summary{list-style:none;cursor:pointer;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-6);font-size:var(--fs-sm);font-weight:600}
.pd-report>summary::-webkit-details-marker{display:none}
.pd-report>summary:hover{border-color:var(--amber);color:var(--amber)}
.pd-columns{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sp-8);align-items:start;margin-top:var(--sp-2)}
.pd-col-h{font-family:var(--serif);font-size:var(--fs-lg);margin:0 0 var(--sp-6);color:var(--ink)}
.pd-who-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) 0}
.pd-who-name{flex:1;min-width:0;font-size:var(--fs-md);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-who-name a{color:inherit}
.pd-who-name a:hover{color:var(--amber)}
.pd-who-emoji{flex:0 0 auto}
.pd-initials{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-round);background:var(--parch-lt);color:var(--amber-dk);font-weight:700;font-size:var(--fs-sm);flex:0 0 auto}
.pd-thread .cmt{margin-top:var(--sp-6)}
.pd-thread .cmt:first-child{margin-top:0}
.pd-you{font-size:var(--fs-xs);font-weight:600;color:var(--amber-dk);background:var(--bg-amber);border-radius:var(--r-pill);padding:0 var(--sp-4)}
.pd-replyto{font-size:var(--fs-sm);color:var(--muted);font-weight:400}
.pd-composer{display:flex;gap:var(--sp-4);align-items:center;margin-top:var(--sp-7);border-top:1px solid var(--line);padding-top:var(--sp-6)}
.pd-composer input[type=text]{flex:1;border-radius:var(--r-pill);background:var(--bg)}
@media(max-width:760px){.pd-columns{grid-template-columns:1fr}.pd-report{position:static;margin-top:var(--sp-4);display:inline-block}}
/* ---- Logged-out marketing home ---- */
.home-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:center;padding:var(--sp-4) var(--sp-2) var(--sp-2)}
.hero-copy{max-width:560px;position:relative;z-index:2}
.home-hero h1{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem);line-height:1.14;margin:0 0 var(--sp-4)}
.home-hero .sub{color:var(--muted);font-size:clamp(.95rem,.9rem + .3vw,1.06rem);max-width:520px;margin:0 0 var(--sp-6);line-height:1.45}
.home-hero .ctas{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.home-hero .ctas .btn{font-size:var(--fs-lg);padding:var(--sp-5) var(--sp-9)}
.hero-collage{position:absolute;top:44px;right:2%;width:44%;max-width:520px;padding:var(--sp-3);perspective:1200px;perspective-origin:50% 55%;z-index:0;pointer-events:none}
.hero-collage-inner{display:grid;grid-template-columns:repeat(4,52px);gap:var(--sp-4);transform:rotateX(-42deg) rotateZ(28deg);transform-origin:center;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.hero-collage-inner img{width:52px;height:76px;object-fit:cover;border-radius:var(--r-2xs);box-shadow:var(--shadow-cover);background:var(--card)}
@media(max-width:820px){.home-hero{grid-template-columns:1fr}.hero-collage{display:none}}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber);background:transparent}
.home-hero .trust{color:var(--muted);font-size:var(--fs-md);margin-top:var(--sp-3)}
.genrechips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-2)}
.genrechips .gh{font-family:var(--serif);font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:var(--sp-4)}
.valuecards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--sp-7);margin:var(--sp-7) 0 var(--sp-3)}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--sp-6) var(--sp-7);display:grid;grid-template-columns:auto 1fr;column-gap:var(--sp-5);row-gap:var(--sp-2);align-items:start}
.vcard-ic{color:var(--amber);width:22px;height:22px;margin:0;grid-row:1;grid-column:1}
.vcard-ic svg{width:100%;height:100%;display:block}
.vcard h3{font-size:var(--fs-lg);margin:0;color:var(--amber);font-family:var(--serif);line-height:1.2;grid-row:1;grid-column:2}
.vcard p{margin:0;color:var(--muted);font-size:var(--fs-md);line-height:1.5;grid-column:1 / -1}
.home-cta-band{margin:var(--sp-6) 0 var(--sp-3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--sp-7);text-align:center}
.home-cta-band h2{margin:0 0 var(--sp-5);font-size:clamp(1.15rem,1rem + .6vw,1.4rem)}

/* ===================== Book detail page (three-column) ===================== */
.tac{text-align:center}
.bookdetail{display:grid;grid-template-columns:250px minmax(0,1fr) 272px;gap:26px;align-items:start;padding:var(--sp-2) 0 var(--sp-10)}
.bd-left,.bd-right,.bd-main{min-width:0}
.bd-cover{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow-cover);aspect-ratio:2/3}
.bd-actions{margin-top:var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-5)}
.bd-actions .btn,.bd-actions .linkbtn,.bd-buybox .btn{display:block;width:100%;text-align:center;box-sizing:border-box}
.bd-actions form{margin:0}
.bd-actions label{font-size:var(--fs-md);display:block;margin-bottom:var(--sp-2)}
.bd-actions textarea,.bd-actions select,.bd-actions input{width:100%;box-sizing:border-box}
.bd-dl{font-size:var(--fs-md);margin:var(--sp-1) 0 0;text-align:center}
.bd-applied{color:var(--ok);font-weight:600;margin:var(--sp-1) 0}
.bd-buybox{background:var(--card);border:1px solid var(--amber);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-7)}
.bd-expect{margin:var(--sp-7) 0 0;font-size:var(--fs-md);text-align:center}
.bd-match{margin-top:var(--sp-9);display:flex;flex-direction:column;align-items:center}
.bd-ring{width:108px;height:108px;border-radius:var(--r-round);background:conic-gradient(var(--amber) calc(var(--pct)*1%),var(--line) 0);display:grid;place-items:center}
.bd-ring-in{width:84px;height:84px;border-radius:var(--r-round);background:var(--card);display:grid;place-items:center;text-align:center;line-height:1.05}
.bd-ring-num{font-family:var(--serif);font-size:23px;color:var(--amber);font-weight:700;display:block}
.bd-ring-lbl{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.bd-main>h1{margin:0 0 var(--sp-2)}
.bd-blurb{margin:var(--sp-8) 0}
.bd-warn{max-width:640px;font-size:var(--fs-base);background:var(--card);border:1px solid var(--danger-line);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-7);margin:var(--sp-5) 0}
.bd-genres{margin:var(--sp-5) 0}
.bd-conf.is-hi{color:var(--ok)}
.bd-conf.is-mid{color:var(--amber-dk)}
.bd-conf.is-lo{color:var(--crimson)}
.vote-on{filter:none}
.vote-off{opacity:.45}
.bd-flagwarn{border-color:var(--danger-line)}
.bd-reviews{margin-top:var(--sp-10)}
.bd-avg{font-size:var(--fs-xl);color:var(--amber);font-family:var(--serif)}
.bd-reviewform{margin:var(--sp-5) 0 var(--sp-8)}
.bd-reviewgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-6);margin-top:var(--sp-6);align-items:start}
.bd-review{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-7)}
.bd-review-h{margin-bottom:var(--sp-3);font-size:var(--fs-base)}
.bd-review-b{font-size:var(--fs-md);line-height:1.45;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.bd-review-f{margin-top:var(--sp-4);display:flex;align-items:center;gap:var(--sp-5)}
.bd-morefrom{margin-top:26px}
.bd-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-7);margin-bottom:var(--sp-8)}
.bd-card-h{font-family:var(--serif);font-size:var(--fs-lg);margin:0 0 var(--sp-5);color:var(--ink-bright)}
.bd-author{display:flex;align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-4)}
.bd-avatar{width:var(--av-md);height:var(--av-md);border-radius:var(--r-round);object-fit:cover;border:1px solid var(--line);flex-shrink:0}
.bd-author-name{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600}
.bd-bio{font-size:var(--fs-md);color:var(--muted);line-height:1.5;margin:0 0 var(--sp-4)}
.bd-card-sub{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:var(--sp-5) 0 var(--sp-2)}
.bd-worklink{display:block;font-size:var(--fs-md);padding:var(--sp-1) 0}
.bd-author-more{display:inline-block;margin-top:var(--sp-4);font-size:var(--fs-md);color:var(--amber)}
.bd-covergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.bd-covergrid.wide{grid-template-columns:repeat(auto-fill,minmax(84px,96px));gap:var(--sp-7)}
.bd-cg{display:block;color:inherit}
.bd-cg-cov{display:block;aspect-ratio:2/3;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.bd-cg-t{display:block;font-size:var(--fs-xs);line-height:1.25;margin-top:var(--sp-2);color:var(--ink)}
.bd-morelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-6)}
.bd-morecard{display:flex;gap:var(--sp-6);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);color:inherit}
.bd-morecard-txt{min-width:0}
/* Title + author lines under a small cover (book detail "more from", reader
   dashboard "currently reading"). */
.bd-morecard-t,.rreading-t{display:block;font-family:var(--serif);font-size:var(--fs-base);line-height:1.2}
.bd-morecard-a,.rreading-a{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
@media(max-width:1000px){.bookdetail{grid-template-columns:1fr;gap:20px}}

/* ===================== Reader dashboard ===================== */
.pad4-12{padding:var(--sp-2) var(--sp-6)}
.mb10-0{margin-bottom:var(--sp-5)}
.rdash-title{margin:0;font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.rstat{display:flex;align-items:center;gap:var(--sp-5);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) 15px}
.rstat-ic{font-size:var(--fs-3xl);line-height:1}
.rstat-body{display:flex;flex-direction:column;line-height:1.15}
.rstat-num{font-family:var(--serif);font-size:var(--fs-2xl);font-weight:700;color:var(--amber)}
.rstat-lbl{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.rshelf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:30px}
.rshelf-sub{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:var(--sp-6)}
.rreading{display:flex;gap:var(--sp-6);align-items:center;margin-bottom:var(--sp-6);color:inherit}
.rreading-txt{min-width:0}
.rwant{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:var(--sp-6)}
.rwant-item{color:inherit}
.rwant-cov{display:block;aspect-ratio:2/3;border-radius:var(--r-xs);overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.rwant-t{display:block;font-size:var(--fs-xs);line-height:1.2;margin-top:var(--sp-2);color:var(--ink)}
.rapp{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.rapp-t{font-size:var(--fs-base);color:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbadge{font-size:var(--fs-sm);font-weight:600;padding:var(--sp-2) var(--sp-6);border-radius:var(--r-pill);white-space:nowrap}
.rbadge.is-approved{background:var(--bg-success);color:var(--ok)}
.rbadge.is-applied{background:var(--bg-amber);color:var(--amber-dk)}
.rbadge.is-declined{background:var(--bg-danger);color:var(--crimson)}
.rapp-end{display:inline-flex;align-items:center;gap:var(--sp-4)}
.rapp-x{margin:0;display:inline-flex}
.rapp-x button{background:none;border:0;color:var(--muted);font-size:var(--fs-3xl);line-height:1;cursor:pointer;padding:0 var(--sp-1)}
.rapp-x button:hover{color:var(--crimson)}
.rcompleted{display:inline-block;margin-top:var(--sp-5);font-size:var(--fs-md);color:var(--ok)}
.ract{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;padding:var(--sp-6) 0;border-top:1px solid var(--line)}
.ract-t{font-size:var(--fs-base);color:inherit;flex:1 1 130px;min-width:0}
.ract-sites{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.ract-site{font-size:var(--fs-xs);padding:var(--sp-1) var(--sp-4);border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted)}
.ract-site.is-done{color:var(--ok);border-color:var(--ok)}
.rbar{display:block;height:5px;border-radius:var(--r-pill);background:var(--line);margin-top:var(--sp-4);max-width:230px;overflow:hidden}
.rt{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-round);font-size:var(--fs-sm);font-weight:700;color:var(--ink);background:var(--slate);flex:0 0 auto}
.rt-amazon{background:var(--rt-amazon);color:var(--timber)}
.rt-goodreads{background:var(--rt-goodreads)}
.rt-bookbub{background:var(--rt-bookbub)}
.rt-apple{background:var(--rt-apple);color:var(--timber)}
.rt-storygraph{background:var(--rt-storygraph)}
.rt.is-done{outline:2px solid var(--ok);outline-offset:1px;background:var(--ok);color:var(--timber)}
@media(max-width:820px){.rshelf{grid-template-columns:1fr;gap:20px}}

/* ---- Author dashboard ---- */
.adash{display:contents}
.adash-title{font-family:var(--serif);font-size:28px;margin:0;color:var(--ink)}
.adash-stats{display:flex;gap:var(--sp-6)}
.astat{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-5) var(--sp-9);color:inherit;min-width:104px}
.astat-hi{border-color:var(--amber)}
.astat-num{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--amber);line-height:1}
.astat-lbl{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2)}
.apanel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--sp-8) var(--sp-9);margin-bottom:var(--sp-8)}
.apanel-h{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);margin-bottom:var(--sp-6)}
/* One size for every panel heading on the site (the page rebuilds had drifted
   to 17px and 18px in different families). */
.apanel-h h2,.mstrip-h h2,.acct-card-h h2{font-family:var(--serif);font-size:var(--fs-2xl);margin:0;color:var(--ink)}
.apanel-more{font-size:var(--fs-md);color:var(--amber);white-space:nowrap}
.pad6-14{padding:var(--sp-3) var(--sp-7)}
/* active-listings table */
.atbl-wrap{overflow-x:auto}
.atbl{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.atbl th{font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;border-top:0;padding:var(--sp-2) var(--sp-5) var(--sp-4)}
.atbl td{border-top:1px solid var(--line);padding:var(--sp-5);vertical-align:middle}
.atbl-t{color:var(--ink);font-weight:600}
.atbl-t:hover{color:var(--amber)}
.atbl-act{white-space:nowrap}
.atbl-act a{color:var(--amber);font-size:var(--fs-md);margin-right:var(--sp-6)}
.apill{display:inline-block;font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-5);border:1px solid var(--line);color:var(--muted);background:var(--bg)}
.apill-open{background:var(--bg-amber);color:var(--amber-dk);border-color:var(--amber)}
.apill-published{color:var(--ok);border-color:var(--ok-line)}
.apill-closed{color:var(--muted)}
.apill-waiting{color:var(--info);border-color:var(--info-line)}
.abar{display:inline-block;vertical-align:middle;width:120px;height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin-right:var(--sp-4)}
.abar.sm{width:88px}
.abar-fill,.rbar-fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--amber);width:calc(var(--pct,0)*1%)}
/* two-column body */
.acols{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-8);align-items:start}
.acols-main{min-width:0}
/* featured campaign card */
.acamp{display:flex;gap:var(--sp-8);padding:var(--sp-8) var(--sp-9)}
.acamp-cov{flex:0 0 84px;width:84px;aspect-ratio:2/3;border-radius:var(--r-sm);overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.acamp-stats,.apl-rel{display:flex;gap:var(--sp-9);font-size:var(--fs-base);color:var(--muted);margin-bottom:var(--sp-6);flex-wrap:wrap}
.acamp-stats strong,.apl-rel strong{color:var(--ink);font-size:var(--fs-xl)}
.acamp-act{display:flex;gap:var(--sp-5);flex-wrap:wrap}
/* ARC team management */
.ateam,.abuzz-list{list-style:none;margin:0;padding:0}
.ateam-row{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.ateam-row:first-child{border-top:0}
.ateam-name{flex:1;min-width:0;font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.ateam-prog{display:flex;align-items:center;gap:var(--sp-1);flex:0 0 auto}
.ateam-flag{display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--crimson);border:1px solid var(--crimson);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4);margin-left:var(--sp-2)}
.ateam-row.is-overdue .ateam-name{color:var(--crimson)}
.ateam-act{font-size:var(--fs-md);color:var(--amber);white-space:nowrap;flex:0 0 auto}
/* retailer review progress */
.aret{display:flex;flex-direction:column;gap:var(--sp-1)}
.aret-row{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-4) 0;border-top:1px solid var(--line);font-size:var(--fs-base)}
.aret-row:first-child{border-top:0}
.aret-lbl{flex:1;color:var(--ink)}
.aret-nums{font-size:var(--fs-md);color:var(--muted)}
/* community buzz */
.abuzz{padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.abuzz:first-child{border-top:0}
.abuzz-t{display:block;font-size:var(--fs-base);font-weight:600;color:var(--ink)}
.abuzz-t:hover{color:var(--amber)}
.abuzz-stars{color:var(--amber);font-size:var(--fs-sm)}
.abuzz-body{margin:var(--sp-2) 0 0;font-size:var(--fs-md);color:var(--muted);line-height:1.45}
.abuzz-list li{padding:var(--sp-4) 0;border-top:1px solid var(--line);font-size:var(--fs-md)}
.abuzz-list li:first-child{border-top:0}
.abuzz-list a{color:var(--ink)}
.abuzz-list a:hover{color:var(--amber)}
/* ---- browse (logged in): filter rail, recommended strip, call cards ---- */
.brail{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--sp-7) var(--sp-7) var(--sp-8);margin-top:var(--sp-9);position:sticky;top:16px}
.brail-h{font-family:var(--serif);font-size:var(--fs-lg);color:var(--ink);margin:var(--sp-6) 0 var(--sp-4)}
.brail-h:first-child{margin-top:0}
.bchips{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.bchip{display:inline-block;font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-6);border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.bchip:hover{border-color:var(--amber);color:var(--amber)}
.bchip.on{background:var(--amber);border-color:var(--amber-dk);color:var(--ink-on-amber);font-weight:600}
.bchip.on:hover{color:var(--ink-on-amber)}
.brail select{width:100%;margin-top:var(--sp-3);font-size:var(--fs-md)}
.brail details{margin-top:var(--sp-6)}
.brail summary{cursor:pointer;font-size:var(--fs-md);color:var(--muted)}
.brail-reset{display:block;text-align:center;margin-top:var(--sp-7);font-size:var(--fs-md);padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink)}
.brail-reset:hover{border-color:var(--amber);color:var(--amber)}
.browse-title{font-family:var(--serif);font-size:28px;margin:0 0 var(--sp-4)}
.mstrip{margin:var(--sp-2) 0 var(--sp-8)}
.mstrip-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-6);margin-bottom:var(--sp-4)}
.mstrip-row{display:flex;gap:var(--sp-6);overflow-x:auto;padding:var(--sp-1) var(--sp-1) var(--sp-4);scroll-snap-type:x proximity;scrollbar-width:thin}
.mstrip-item{flex:0 0 250px;display:flex;gap:var(--sp-6);align-items:center;background:var(--card);border:1px solid var(--amber);border-radius:var(--r-lg);padding:var(--sp-5);color:inherit;scroll-snap-align:start}
.mstrip-item:hover{background:var(--bg-amber)}
.mstrip-txt{min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.mstrip-t{font-family:var(--serif);font-size:var(--fs-lg);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstrip-a{font-size:var(--fs-sm);color:var(--muted)}
.mstrip-m{font-size:var(--fs-xs);color:var(--ok);font-weight:600}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-7);margin-top:var(--sp-6)}
.bgrid.list{grid-template-columns:1fr}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.bcard-top{display:flex;gap:var(--sp-6);align-items:flex-start}
.bcard-t{font-family:var(--serif);font-size:var(--fs-xl);line-height:1.2;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcard-t a{color:inherit}
.bcard-a{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
.bcard-a a{color:inherit}
.bcard-ring{flex:0 0 52px;width:52px;height:52px;border-radius:var(--r-round);background:conic-gradient(var(--ok) calc(var(--pct)*1%),var(--line) 0);display:grid;place-items:center}
.bcard-ring span{width:40px;height:40px;border-radius:var(--r-round);background:var(--card);display:grid;place-items:center;font-size:var(--fs-sm);font-weight:700;color:var(--ok)}
.bcard-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.bcard-tags .pill{margin:0;font-size:var(--fs-xs);padding:var(--sp-1) var(--sp-4)}
.bcard-prog{font-size:var(--fs-sm);color:var(--muted);display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.bcard-prog .abar{width:auto;flex:1;min-width:80px;margin:0}
.bcard-done{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ok);border:1px solid var(--ok-line);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4)}
.bcard-cta{margin-top:auto;text-align:center;font-size:var(--fs-md);padding:var(--sp-4) var(--sp-5)}
.bgrid.list .bcard{flex-direction:row;align-items:center;flex-wrap:wrap}
.bgrid.list .bcard-top{flex:1 1 320px}
.bgrid.list .bcard-cta{margin-top:0}
@media(max-width:820px){.brail{position:static}}
/* ---- book team (manage readers) ---- */
.bt{display:contents}
.bt-head{display:flex;gap:var(--sp-7);align-items:center;margin:var(--sp-1) 0 var(--sp-8)}
.bt-title{font-family:var(--serif);font-size:26px;margin:0;line-height:1.15}
.bt-sum-h{font-family:var(--serif);font-size:var(--fs-xl);margin-bottom:var(--sp-2);width:100%}
.bt-sum-stats{display:flex;gap:var(--sp-3) 22px;flex-wrap:wrap;font-size:var(--fs-md);color:var(--muted)}
.bt-sum-stats strong{color:var(--ink);font-weight:600}
.bt-add{width:100%;border-top:1px solid var(--line);padding-top:var(--sp-6);margin-top:var(--sp-2)}
.bt-tbl td{vertical-align:top}
.bt-who{min-width:170px}
.bt-who a{color:var(--ink);font-weight:600}
.bt-rel{font-size:var(--fs-md);min-width:150px}
.bt-rel>span{display:block;margin-bottom:var(--sp-1)}
.bt-msg{max-width:360px}
.bt-quote{font-size:var(--fs-md);color:var(--muted);font-style:italic;line-height:1.45}
.bt-act{white-space:nowrap;text-align:right}
.bt-act .aform,.bt-act .btn{margin-left:var(--sp-2)}
.bt-detail>td{background:var(--bg);border-top:0;padding:var(--sp-4) var(--sp-7) var(--sp-7)}
.declbox{margin:0 0 var(--sp-6);background:var(--card);border:1px solid var(--danger-line);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6)}
.btn.danger{background:var(--crimson);border-color:var(--crimson);color:var(--ink-bright)}
.btn.danger:hover{background:var(--crimson);opacity:.9}
.bt-prog{min-width:170px;font-size:var(--fs-md)}
.bt-prog .abar{margin:0 var(--sp-3) 0 0}
.bt-rev{min-width:190px}
.bt-sites{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-sm)}
.bt-site{display:flex;align-items:center;gap:var(--sp-3)}
.bt-site.is-done{color:var(--ink)}
tr.is-overdue .bt-who a{color:var(--crimson)}
/* ---- chapters (manage chapters + single chapter edit) ---- */
.ch-setup{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--sp-9);align-items:start}
@media(max-width:820px){.ch-setup{grid-template-columns:1fr}}
.ch-setup-col{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.ch-import{border-top:1px solid var(--line);margin-top:var(--sp-6);padding-top:var(--sp-6)}
.ch-schedule{border-top:1px solid var(--line);margin-top:var(--sp-6);padding-top:var(--sp-6)}
.ch-toggle-row{display:flex;align-items:center;gap:var(--sp-5);font-size:var(--fs-base)}
.ch-viewlinks,.ch-viewlinks-2{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-base)}
.ch-notify{display:flex;align-items:center;gap:var(--sp-7);flex-wrap:wrap;border-top:1px solid var(--line);margin-top:var(--sp-8);padding-top:var(--sp-8)}
.ch-notify .ch-viewlinks-2{margin-left:auto;font-size:var(--fs-md);text-align:right}
.ch-prompt-row{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.ch-prompt-row input{flex:1}

/* ---- author / persona public profile ---- */
.ap{display:contents}
.ap-head,.ap-say{display:flex;gap:var(--sp-9);align-items:flex-start;flex-wrap:wrap}
.ap-avatar{width:var(--av-2xl);height:var(--av-2xl);border-radius:var(--r-round);object-fit:cover;flex:0 0 var(--av-2xl);border:2px solid var(--line);background:var(--bg)}
.ap-avatar-ph{display:grid;place-items:center;font-family:var(--serif);font-size:38px;color:var(--amber)}
.ap-id{flex:1;min-width:240px}
.ap-name{font-family:var(--serif);font-size:30px;margin:0;line-height:1.1}
.ap-bio{margin-top:var(--sp-4);font-size:var(--fs-base);max-width:560px}
.ap-links{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-8);margin-top:var(--sp-4);font-size:var(--fs-md)}
.ap-links a{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--muted)}
.ap-links a:hover{color:var(--amber)}
.ap-links svg{width:14px;height:14px}
.ap-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-3);min-width:150px;text-align:right}
.ap-side .btn{min-width:130px;text-align:center}
.ap-followers{font-size:var(--fs-md);color:var(--ink)}
.ap-mod{display:flex;gap:var(--sp-4);flex-wrap:wrap;justify-content:flex-end;margin-top:var(--sp-3)}
.ap-cols{margin-bottom:var(--sp-8)}
.ap-cols>div>.sec-h{margin-top:0}
.ap-calls{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-6)}
.ap-call{display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-6);margin:0}
.ap-call .apill{align-self:flex-start}
.ap-call-body{display:flex;gap:var(--sp-5);align-items:flex-start}
.ap-t{display:block;font-family:var(--serif);font-size:var(--fs-lg);line-height:1.2;color:var(--ink)}
.ap-apply{text-align:center;font-size:var(--fs-md);padding:var(--sp-4) var(--sp-5);margin-top:auto}
.ap-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-6)}
.ap-book{display:flex;gap:var(--sp-5);align-items:flex-start;padding:var(--sp-6);margin:0;color:inherit}
.ap-book:hover{border-color:var(--amber)}
.ap-stars{color:var(--amber);font-size:var(--fs-md);letter-spacing:1px}
.ap-overall{flex:0 0 120px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-1);padding:var(--sp-4) 0}
.ap-big{font-family:var(--serif);font-size:34px;line-height:1;color:var(--ink)}
.ap-quotes{flex:1;min-width:220px}
.ap-quote{padding:var(--sp-5) 0;border-top:1px solid var(--line);font-size:var(--fs-md);line-height:1.45}
.ap-quote:first-child{border-top:0}
.ap-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-2) 0}
.ap-tags .pill{margin:0}
.ap-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5);margin-bottom:var(--sp-4)}
.ap-stats>div{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);display:flex;flex-direction:column}
.ap-stat-n{font-family:var(--serif);font-size:22px;color:var(--amber);line-height:1.1}
.min0{min-width:0}
@media(max-width:820px){.ap-side{align-items:flex-start;text-align:left}}
/* ---- my tavern (feed + wall) ---- */
.mt-title{font-family:var(--serif);font-size:26px;margin:0 0 var(--sp-5)}
.mt-tabs{display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-2);margin-bottom:var(--sp-7)}
.mt-tab{flex:1;text-align:center;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-sm);font-size:var(--fs-base);font-weight:600;color:var(--muted)}
.mt-tab:hover{color:var(--ink)}
.mt-tab.on{background:var(--amber);color:var(--ink-on-amber)}
.mt-empty{padding:34px 20px;margin-bottom:0;gap:var(--sp-2)}
.mt-empty svg{width:44px;height:44px;color:var(--amber);margin-bottom:var(--sp-3)}
.mt-empty strong{font-family:var(--serif);font-size:var(--fs-3xl)}
/* ---- static pages (about, contact, privacy, terms) ---- */
.stp{max-width:860px;margin:var(--sp-5) auto var(--sp-10);background:var(--card);border:1px solid var(--amber-dk);border-radius:var(--r-2xl);padding:34px 40px 30px}
.stp-body{margin:0 auto}
.stp h1{font-family:var(--serif);font-size:34px;text-align:center;margin:0 0 var(--sp-4)}
.stp .stp-intro{text-align:center;color:var(--muted);font-size:var(--fs-lg);max-width:560px;margin:0 auto 26px}
.stp h2{font-family:var(--serif);font-size:21px;margin:var(--sp-10) 0 var(--sp-3)}
.stp p,.stp li{font-size:var(--fs-lg);line-height:1.6}
.stp-contact{max-width:440px;margin:0 auto}
.stp-contact label{display:block;font-size:var(--fs-md);font-weight:600;margin:var(--sp-6) 0 var(--sp-2)}
.stp-contact .btn{width:100%;margin-top:var(--sp-7)}
.stp-note{text-align:center;font-size:var(--fs-md);color:var(--muted);margin-top:var(--sp-9)}
@media(max-width:820px){.stp{padding:22px var(--sp-9)}.stp h1{font-size:28px}}
.aform{display:inline;margin:0}
.linkbtn.ateam-act,.linkbtn.apanel-more{color:var(--amber)}
@media(max-width:820px){.acols{grid-template-columns:1fr}.acamp{flex-direction:column}}

/* =========================================================================
   SEMANTIC STATUS TOKENS  (added for the de-inlining pass)
   Legacy light-theme literals scattered across templates map to these so
   nothing is a bare hex and a theme flip stays a one-file edit.
   ========================================================================= */
:root{
  --ok:#8fce9e;            /* positive / success text (was #1f6b2e #2f5233 #166534) */
  --ok-line:#274a34;       /* positive border (was #bfe3bf #cfe0cb #bfe3c4) */
  --bar-ok:#4a9a4a;        /* healthy progress-bar fill */
  --dot-on:#2ecc71;        /* presence dot online */
  --dot-off:#e74c3c;       /* presence dot offline */
  --info:#8fb8d6;          /* informational blue text (was #2a5673 #cfe0e8) */
  --info-line:#2d4657;     /* informational blue border (was #cdddea) */
  --purple:#c3a9e6;        /* purple accent text (was #4a327a #6B4E71) */
  --purple-line:#3a2f52;   /* purple border (was #b9a6e0) */
  --gold:#e8c48a;          /* gold/amber notice text (was #6b4a16 #7a4d12 #8a6d1a) */
  --gold-line:#3a3016;     /* gold/amber border (was #ecd9a8 #e3cfa3 #e7dcc6) */
  --ring-light:#fff;       /* presence-dot inner ring */
  --shadow-dot:0 0 0 1.5px var(--ink-inverse),0 0 0 2.5px rgba(0,0,0,.12); /* presence dot ring */
  --shadow-cover:0 2px 6px rgba(28,27,25,.18);      /* small cover thumb */
  --shadow-cover-lg:0 4px 14px rgba(28,27,25,.18);  /* promo cover */
  /* Reading-comfort modes in the in-browser reader (fixed, not theme colours). */
  --sepia-bg:#f4ecd8;--sepia-ink:#4a3f2e;--rdark-bg:#1e1c19;--rdark-ink:#dcd2c0;
  --rlight-bg:#faf8f4;--rlight-ink:#2c2a27;
}

/* =========================================================================
   METRIC SCALE  (spacing, radii, type, thumbnail and avatar sizes)
   The colour tokens above answer "what colour"; these answer "how big".
   Every margin, padding, gap, radius and text size in the rest of this file
   goes through one of them, so the whole site tightens or loosens from here.
   The scale is the 2px grid the mockups were drawn on; see CSS-AUDIT.md for
   the counts that chose these steps.
   ========================================================================= */
:root{
  /* spacing: 2px grid to 18px, then two roomier steps */
  --sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:10px;
  --sp-6:12px;--sp-7:14px;--sp-8:16px;--sp-9:18px;--sp-10:24px;
  /* radii: 2xs on tiny chips through 2xl on the big panels */
  --r-2xs:4px;--r-xs:5px;--r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:12px;
  --r-2xl:14px;--r-pill:999px;--r-round:50%;
  /* text sizes. Display sizes above 20px stay per-page, they are one-offs. */
  --fs-2xs:10px;--fs-xs:11px;--fs-sm:12px;--fs-md:13px;--fs-base:14px;
  --fs-lg:15px;--fs-xl:16px;--fs-2xl:17px;--fs-3xl:18px;--fs-4xl:20px;
  /* cover thumbnails (width and matching 2:3-ish height) */
  --cov-xs:42px;--cov-xs-h:60px;
  --cov-sm:46px;--cov-sm-h:66px;
  --cov-md:52px;--cov-md-h:76px;
  --cov-lg:56px;--cov-lg-h:80px;
  --cov-xl:64px;--cov-xl-h:94px;
  /* round avatars */
  --av-xs:30px;--av-sm:40px;--av-md:46px;--av-lg:64px;--av-xl:80px;--av-2xl:96px;
}

/* =========================================================================
   SHARED COMPONENT CLASSES  (repeated multi-property inline patterns)
   ========================================================================= */
/* ---- Cover thumbnail. One box in five sizes; every page that used to carry
   its own .*-cov rule now uses these. The inner <img> rule is shared with the
   aspect-ratio cover boxes that size themselves instead. ---- */
.cov{display:block;overflow:hidden;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);flex:0 0 auto}
.cov-xs{width:var(--cov-xs);height:var(--cov-xs-h)}
.cov-sm{width:var(--cov-sm);height:var(--cov-sm-h)}
.cov-md{width:var(--cov-md);height:var(--cov-md-h)}
.cov-lg{width:var(--cov-lg);height:var(--cov-lg-h)}
.cov-xl{width:var(--cov-xl);height:var(--cov-xl-h)}
.cov img,.acamp-cov img,.chub-blogcard-cov img,.acard-cover img,.bd-cg-cov img,
.rwant-cov img,.bd-cover img{width:100%;height:100%;object-fit:cover;display:block}
/* ---- Avatar (or placeholder tile) beside a name. ---- */
.who{display:flex;align-items:center;gap:var(--sp-5)}
/* ---- Empty state: a centred column of icon, headline, hint. Each caller
   sets its own roominess. ---- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center}
/* ---- Two equal columns that stack on a narrow screen. .top when the two
   columns should keep their own heights instead of matching. ---- */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
.cols-2.top{align-items:start}
@media(max-width:820px){.cols-2{grid-template-columns:1fr}}
/* ---- Section heading between cards. ---- */
.sec-h{font-family:var(--serif);font-size:var(--fs-4xl);margin:var(--sp-9) 0 var(--sp-4)}
/* ---- A wrapping row of buttons or stat chips. ---- */
.home-hero .ctas,.rdash-stats,.acamp-act,.ml-head-act,.sd-stripe-act,.sd-locked-act,
.bt-sum-act,.sg-row{display:flex;flex-wrap:wrap;gap:var(--sp-5)}
.bt-sum-act,.sg-row{gap:var(--sp-4)}
/* ---- Page head: title on the left, stats or buttons on the right. ---- */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin:var(--sp-1) 0 var(--sp-9)}
@media(max-width:820px){.head-row{align-items:flex-start}}
/* ---- preferences ---- */
/* Taste Preferences page: a header row (title + the slot unit-04's First
   Call Watchlist panel drops into), a rated/total progress bar, a masonry
   of collapsible section cards, and a sticky save/reset bar. */
.pf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-8);flex-wrap:wrap}
.pf-fc-slot:empty{display:none}
.pf-progress-line{margin:0 0 var(--sp-3)}
.abar.pf-bar{width:100%;max-width:520px;height:8px;margin-right:0}
/* Three flowing columns (not a CSS multi-column masonry: a break-inside:avoid
   card as tall as Genres next to short ones like Spice Levels leaves the
   browser's column-balancer with ugly gaps, so the columns are laid out
   explicitly instead, as three independent flex columns side by side). */
.pf-board{display:flex;gap:var(--sp-8);align-items:flex-start;margin-top:var(--sp-8)}
.pf-col{display:flex;flex-direction:column;gap:var(--sp-8);
  flex:0 0 calc((100% - 2*var(--sp-8))/3);width:calc((100% - 2*var(--sp-8))/3);min-width:0}
.pf-card-h{display:flex;align-items:center;gap:var(--sp-3);width:100%;background:none;
  border:0;padding:0;margin:0 0 var(--sp-5);cursor:pointer;font-family:var(--serif);
  font-size:var(--fs-2xl);color:var(--ink);text-align:left}
.pf-chev{display:inline-block;color:var(--muted);font-size:var(--fs-lg);transition:transform .15s ease}
.pf-card-h[aria-expanded="false"] .pf-chev{transform:rotate(-90deg)}
.pf-card-h[aria-expanded="false"] + .pf-card-body{display:none}
.pf-grid2{column-count:2;column-gap:var(--sp-8)}
.pf-cat{break-inside:avoid;margin-bottom:var(--sp-2)}
.pf-savebar{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:var(--sp-5);
  padding:var(--sp-6) 0;margin-top:var(--sp-7);background:var(--bg);border-top:1px solid var(--line)}
@media(max-width:980px){.pf-board{flex-wrap:wrap}.pf-col{flex-basis:calc(50% - var(--sp-8)/2);width:calc(50% - var(--sp-8)/2)}}
@media(max-width:700px){.pf-board{flex-wrap:wrap}.pf-col{flex-basis:100%;width:100%}.pf-grid2{column-count:1}}
/* Staff "view as" banner (top of page). */
.viewas-bar{background:var(--viewas-bg);color:var(--ink-inverse);text-align:center;padding:var(--sp-4) var(--sp-8);font-size:var(--fs-base);position:sticky;top:0;z-index:1000}
.viewas-bar a{color:var(--ink-inverse);text-decoration:underline;font-weight:700}
/* Full-width notice strips under the header. */
.notice-strip{border-bottom:1px solid var(--timber)}
.notice-strip .wrap{padding:var(--sp-3) var(--sp-8);font-size:var(--fs-md);display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
.notice-strip.promo{background:var(--strip-bg);color:var(--parch)}
.notice-strip.warn{background:var(--bg-warning);border-bottom-color:var(--amber);color:var(--warning-ink)}
.notice-strip.warn .wrap{padding:var(--sp-5) var(--sp-8);font-size:var(--fs-base);display:block}
.notice-strip.verify{background:var(--card);border-bottom-color:var(--verify-line);color:var(--verify-ink)}
.notice-strip.verify .wrap{padding:var(--sp-4) var(--sp-8);font-size:var(--fs-base);display:block}
.strip-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
.strip-link{color:var(--amber);font-weight:600}
/* Amber pill count badge used in sidebars / dropdown headers. */
.count-badge{background:var(--amber);color:var(--ink-on-amber);border-radius:var(--r-pill);padding:0 var(--sp-3);font-size:var(--fs-xs);font-weight:700;margin-left:auto}
/* Big serif stat number on dashboard cards. */
.statnum{font-size:26px;font-weight:700;font-family:var(--serif)}
/* Amazon-associate disclosure line in the footer. */
.footer-fine{margin-top:var(--sp-4);font-size:var(--fs-xs);opacity:.75}
/* Success confirmation card (support panel "sent"). */
.ok-card{background:var(--card);border-color:var(--ok-line)}
/* Full-width notice banner (upgrade prompts, grace-period warnings). */
.banner{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-7) var(--sp-9);margin:var(--sp-8) 0}
.banner.amber{border-color:var(--amber)}
.banner.amber2{border:2px solid var(--amber);text-align:center}
.banner.danger{border-color:var(--danger-line);color:var(--crimson)}
/* Boxed variant of a text link (looks like an outlined button). */
.linkbtn.boxed{border:1px solid var(--line);padding:var(--sp-4) var(--sp-8);border-radius:var(--r-md)}
/* Centered fine-print block. */
.fineprint{max-width:720px;margin:0 auto 26px;font-size:var(--fs-md);line-height:1.7}
/* Readable single-column content page (about/privacy/terms/contact/blog). */
.prose{max-width:720px}
.prose.wide{max-width:760px}
/* Round avatar preview on the profile / pen-name edit forms. */
.avatar-lg{width:var(--av-xl);height:var(--av-xl);object-fit:cover;border-radius:var(--r-round);margin-bottom:var(--sp-3)}
/* Auto-fill card grids at a few common minimums. */
.grid-200{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.grid-220{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grid-230{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
/* Card that lays its contents out as a space-between flex row (dashboard CTAs). */
.rowcard{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-7);flex-wrap:wrap}
/* Conditional accent borders (swapped by template logic instead of inline hexes). */
.ok-border{border-color:var(--ok-line)}
.amber-border{border-color:var(--amber)}
.crimson-border{border-color:var(--crimson)}
/* A whole card that is itself a block-level link. */
.block-card{display:block;padding:var(--sp-8);color:inherit}
/* Small status pills (forum "new", resolution badges, etc.). Base tint is a
   card surface; the colour variant sets border + text via a token. */
.pill.tag{font-size:var(--fs-xs);background:var(--card)}
.pill.gold{border-color:var(--gold-line);color:var(--gold)}
.pill.ok{border-color:var(--ok-line);color:var(--ok)}
.pill.info{border-color:var(--info-line);color:var(--info)}
.pill.purple{border-color:var(--purple-line);color:var(--purple)}
.pill.danger{border-color:var(--danger-line);color:var(--crimson)}
.pill.amber{border-color:var(--amber);color:var(--amber-dk)}
.pill.neutral{border-color:var(--line);color:var(--muted)}
.pill.cw{font-size:var(--fs-xs);border-color:var(--crimson);color:var(--crimson);background:transparent}
.pill.cw-hidden{font-size:var(--fs-xs);border-style:dashed;color:var(--muted);background:transparent}
.hidden-note{margin:var(--sp-3) 0 var(--sp-5)}
.pill.dashed{border-style:dashed;color:var(--muted)}
/* Filled green "% match" badge on browse cards. */
.pill.match{background:var(--ok-line);border-color:var(--ok-line);color:var(--ink-inverse);font-weight:700}

/* =========================================================================
   UTILITIES  (kept at the end so they win the cascade over components)
   One-property helpers that replace one-off inline style="" tweaks.
   ========================================================================= */
.m0{margin:0}
.mt0{margin-top:0}.mt4{margin-top:var(--sp-2)}.mt6{margin-top:var(--sp-3)}.mt8{margin-top:var(--sp-4)}
.mt10{margin-top:var(--sp-5)}.mt12{margin-top:var(--sp-6)}.mt14{margin-top:var(--sp-7)}.mt16{margin-top:var(--sp-8)}
.mt18{margin-top:var(--sp-9)}.mt20{margin-top:20px}.mt22{margin-top:22px}.mt24{margin-top:var(--sp-10)}.mt26{margin-top:26px}.mt28{margin-top:28px}.mt32{margin-top:32px}
.mb4{margin-bottom:var(--sp-2)}.mb6{margin-bottom:var(--sp-3)}.mb8{margin-bottom:var(--sp-4)}.mb10{margin-bottom:var(--sp-5)}.mb12{margin-bottom:var(--sp-6)}.mb16{margin-bottom:var(--sp-8)}
.mt6-0{margin:var(--sp-3) 0 0}.mt8-0{margin:var(--sp-4) 0 0}.mb6-0{margin:0 0 var(--sp-3)}.mb4-0{margin:0 0 var(--sp-2)}.mb10-0{margin:0 0 var(--sp-5)}.mb12-0{margin:0 0 var(--sp-6)}
.my14{margin:var(--sp-7) 0}
.mt3{margin-top:var(--sp-2)}
.ml6{margin-left:var(--sp-3)}.ml8{margin-left:var(--sp-4)}.ml10{margin-left:var(--sp-5)}.ml12{margin-left:var(--sp-6)}.mr6{margin-right:var(--sp-3)}.mr8{margin-right:var(--sp-4)}.ml-auto{margin-left:auto}
.mw420{max-width:420px}.mw520{max-width:520px}.mw560{max-width:560px}.mw640{max-width:640px}.mw660{max-width:660px}.mw680{max-width:680px}.mw700{max-width:700px}.mw720{max-width:720px}.mw760{max-width:760px}.mw820{max-width:820px}.mw880{max-width:880px}.mw900{max-width:900px}
.mw440{max-width:440px}.mw480{max-width:480px}
.mxauto{margin-left:auto;margin-right:auto}.mya40{margin:40px auto}
.fs11{font-size:var(--fs-xs)}.fs12{font-size:var(--fs-sm)}.fs13{font-size:var(--fs-md)}.fs14{font-size:var(--fs-base)}.fs15{font-size:var(--fs-lg)}.fs16{font-size:var(--fs-xl)}.fs17{font-size:var(--fs-2xl)}.fs18{font-size:var(--fs-3xl)}.fs20{font-size:var(--fs-4xl)}.fs21{font-size:21px}.fs24{font-size:24px}.fs26{font-size:26px}
.aib{align-items:baseline}.ovh{overflow:hidden}.fsh0{flex-shrink:0}
.lh16{line-height:1.6}.lh165{line-height:1.65}.lh17{line-height:1.7}
.fw400{font-weight:400}.fw600{font-weight:600}.fw700{font-weight:700}
.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}
.di{display:inline}.dib{display:inline-block}.dblock{display:block}.dflex{display:flex}.dif{display:inline-flex}
.pointer{cursor:pointer}.help{cursor:help}.self-center{align-self:center}.pad12-24{padding:var(--sp-6) var(--sp-10)}
.mb7{margin-bottom:var(--sp-4)}.minw140{min-width:140px}
.nowrap{white-space:nowrap}
.underline{text-decoration:underline}
.op6{opacity:.6}.op7{opacity:.7}.op75{opacity:.75}.cur-default{cursor:default}
.p5{padding:var(--sp-3)}.sticky-16{position:sticky;top:16px}
.pl18{padding-left:var(--sp-9)}.mb18-0{margin:0 0 var(--sp-9)}
.w-auto{width:auto}.w-full{width:100%}
.f1{flex:1;min-width:0}.fww{flex-wrap:wrap}.min0{min-width:0}
.mt2{margin-top:var(--sp-1)}.mb8-0{margin:0 0 var(--sp-4)}.mt4-0{margin:var(--sp-2) 0 0}
.ml2{margin-left:var(--sp-1)}.gap5{gap:var(--sp-3)}
.fs22{font-size:22px}.fs125{font-size:var(--fs-sm)}.fs135{font-size:var(--fs-md)}
.f0{flex:0 0 auto}.ml4{margin-left:var(--sp-2)}.mb14{margin-bottom:var(--sp-7)}
.p14{padding:var(--sp-7)}
.ellip{overflow:hidden;text-overflow:ellipsis}
/* Medium round avatar (author cards, member lists). */
.avatar-md{width:var(--av-md);height:var(--av-md);border-radius:var(--r-round);object-fit:cover;flex:0 0 auto;background:var(--card)}
/* Small round avatar (pen-name rows). */
.avatar-sm{width:var(--av-sm);height:var(--av-sm);border-radius:var(--r-round);object-fit:cover;flex:0 0 auto;display:inline-block;background:var(--timber)}
/* Flex row separated by a top rule (list rows inside a card). */
.row-line{display:flex;align-items:center;gap:var(--sp-5);border-top:1px solid var(--line);padding:var(--sp-5) 0}
/* Flex / grid layout helpers for one-off rows (colour-free layout only). */
.dgrid{display:grid}
.col{flex-direction:column}
.aic{align-items:center}.ais{align-items:flex-start}.aie{align-items:flex-end}
.jcsb{justify-content:space-between}.jcc{justify-content:center}.jce{justify-content:flex-end}
.gap4{gap:var(--sp-2)}.gap6{gap:var(--sp-3)}.gap8{gap:var(--sp-4)}.gap10{gap:var(--sp-5)}.gap12{gap:var(--sp-6)}.gap14{gap:var(--sp-7)}.gap16{gap:var(--sp-8)}
/* "Link copied" confirmation in the share bar (JS toggles display only). */
.copyok{font-size:var(--fs-sm);color:var(--ok)}
.serif{font-family:var(--serif)}
.c-inherit{color:inherit}
.c-muted{color:var(--muted)}
.c-amber{color:var(--amber)}
.c-amber-dk{color:var(--amber-dk)}
.c-crimson{color:var(--crimson)}
.c-ink-bright{color:var(--ink-bright)}
.c-ok{color:var(--ok)}
.c-gold{color:var(--gold)}
.c-info{color:var(--info)}
.c-timber{color:var(--timber)}.c-parch{color:var(--parch)}
/* Reduction-pass helpers (color-free layout one-offs collapsed to shared classes). */
.rel{position:relative}.abs{position:absolute}
.italic{font-style:italic}.vam{vertical-align:middle}.lh1{line-height:1}.lh13{line-height:1.3}
.notallowed{cursor:not-allowed}
.op25{opacity:.25}.op45{opacity:.45}.op5{opacity:.5}.op8{opacity:.8}
.ovxauto{overflow-x:auto}
.flex1{flex:1}
.bg-card{background:var(--card)}.bg-parch{background:var(--parch-lt)}.bg-timber{background:var(--timber)}
.fs19{font-size:19px}
.gap2{gap:var(--sp-1)}.gap7{gap:var(--sp-4)}.gap24{gap:var(--sp-10)}
.mt1{margin-top:var(--sp-1)}.mt5{margin-top:var(--sp-3)}.mt30{margin-top:30px}.mb18{margin-bottom:var(--sp-9)}
.mt2-0{margin:var(--sp-1) 0 0}.mb3-0{margin:0 0 var(--sp-2)}.mb2-0{margin:0 0 var(--sp-1)}.mb16-0{margin:0 0 var(--sp-8)}
.minw96{min-width:96px}.minw150{min-width:150px}.minw220{min-width:220px}.minw230{min-width:230px}.minw260{min-width:260px}
.mw340{max-width:340px}.mw460{max-width:460px}.mw840{max-width:840px}
.pad2-10{padding:var(--sp-1) var(--sp-5)}.pad3-10{padding:var(--sp-2) var(--sp-5)}.pad4-10{padding:var(--sp-2) var(--sp-5)}.pad6-12{padding:var(--sp-3) var(--sp-6)}
.pad7-14{padding:var(--sp-4) var(--sp-7)}.pad10-14{padding:var(--sp-5) var(--sp-7)}.pad10-22{padding:var(--sp-5) 22px}.pad14{padding:var(--sp-7)}.pad14-18{padding:var(--sp-7) var(--sp-9)}
/* Round avatar: base + a square size (also used for placeholder tiles). */
.avatar{border-radius:var(--r-round);object-fit:cover;flex:0 0 auto}
.sq30{width:30px;height:30px}.sq32{width:32px;height:32px}.sq38{width:38px;height:38px}.sq40{width:40px;height:40px}
.sq42{width:42px;height:42px}.sq44{width:44px;height:44px}.sq46{width:46px;height:46px}.sq48{width:48px;height:48px}
.sq52{width:52px;height:52px}.sq60{width:60px;height:60px}.sq64{width:64px;height:64px}.sq72{width:72px;height:72px}.sq90{width:90px;height:90px}
/* Small cover thumbnail (rounded, cover-fit). */
.thumb{object-fit:cover;flex:0 0 auto}.r6{border-radius:var(--r-sm)}.r8{border-radius:var(--r-md)}
/* Repeated bordered boxes. */
.trope-chip{display:inline-flex;align-items:center;gap:var(--sp-4);margin:0 var(--sp-4) var(--sp-4) 0;border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-6);background:var(--card)}
.divide-top{border-top:1px solid var(--line);padding:var(--sp-6) 0}
.rule{border:none;border-top:1px solid var(--line);margin:var(--sp-9) 0}
.codebox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-5);max-width:100%;overflow-wrap:anywhere}
/* Hidden until a script shows it. Scripts toggle the class, never style.display,
   so nothing has to carry an inline style just to start out hidden. */
.hide{display:none}
/* Odd fixed sizes the last few inline styles were carrying. */
.h20{height:20px}.h48{height:48px}.w84{width:84px}.mw320{max-width:320px}
.f0-42{flex:0 0 42px}.f0-50{flex:0 0 50px}
.fs34{font-size:34px}.obj-contain{object-fit:contain}
.mya60{margin:60px auto}.pad12-28{padding:var(--sp-6) 28px}.pad10{padding:var(--sp-5)}
.pl4{padding-left:var(--sp-2)}
.m4-8-0{margin:var(--sp-2) var(--sp-4) 0 0}.m4-0-8{margin:var(--sp-2) 0 var(--sp-4)}
.rule.tight{margin:var(--sp-7) 0}
/* Cover thumbnail on a shared post card (a bare <img>, not a .cov box). The
   element selector is needed to outrank `.card img`, which this sits inside. */
img.thumb-52{width:var(--cov-md);height:72px}
/* Left accent bar marking an unread / staff-written row. */
.lft-amber{border-left:3px solid var(--amber)}
/* Founding-member role badge, and the "won't fix" resolution pill. */
.rolebadge.founding{background:var(--gold);color:var(--ink-inverse)}
.pill.crimson{border-color:var(--line);color:var(--crimson)}
/* Presence dot (_dot.html). */
.dot{display:inline-block;width:9px;height:9px;border-radius:var(--r-round);
  vertical-align:middle;box-shadow:var(--shadow-dot)}
.dot.is-on{background:var(--dot-on)}
.dot.is-off{background:var(--dot-off)}
/* Amber-bordered note box (chapter tips, the direct-sales callout). */
.notebox{background:var(--card);border:1px solid var(--amber);border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-7)}
/* Staff-preview strip on the contest page. */
.preview-note{border:1px solid var(--purple-line);color:var(--purple);border-radius:var(--r-lg)}

/* =========================================================================
   PAGE COMPONENTS  (folded verbatim from the old per-page <style> blocks;
   colours routed through tokens, layout unchanged).
   ========================================================================= */
/* Right-sidebar promo card (_ad_sidebar). */
.promo-card{display:block;border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--card);color:var(--ink);text-decoration:none;padding:var(--sp-9) var(--sp-8);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.promo-card:hover{border-color:var(--amber)}
.promo-card .pc-tag{font-size:var(--fs-xs);letter-spacing:.14em;color:var(--amber);font-weight:700}
.promo-card .pc-big{font-family:var(--serif);font-size:23px;color:var(--ink);margin:var(--sp-3) 0 var(--sp-3);line-height:1.16}
.promo-card .pc-sub{font-size:var(--fs-md);color:var(--muted);line-height:1.5}
.promo-card .pc-cta{display:inline-block;margin-top:var(--sp-6);color:var(--amber);font-weight:600;font-size:var(--fs-base)}
/* Share bar (_share_bar). */
.sbtn{display:inline-flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-7);border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-md);color:var(--ink);background:var(--field);text-decoration:none;cursor:pointer}
.sbtn:hover{border-color:var(--amber);color:var(--amber-dk)}
.sharebar{margin:var(--sp-7) 0;padding:var(--sp-6) var(--sp-7);border:1px solid var(--gold-line);border-radius:var(--r-lg);background:var(--card)}
.sharebar-title{font-size:var(--fs-base);color:var(--gold)}
.sharebar-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-4);align-items:center}
/* Contest share cards + status badges (contest). */
.share-grid{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin:var(--sp-7) 0}
.share-card{flex:1;min-width:200px;border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-6) var(--sp-7);background:var(--card)}
.share-card h3{margin:0 0 var(--sp-4);font-size:var(--fs-lg)}
.pill-on{display:inline-block;background:var(--card);color:var(--ok);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;padding:var(--sp-1) var(--sp-4)}
.badge{display:inline-block;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;padding:var(--sp-1) var(--sp-5)}
.b-pending{background:var(--card);color:var(--gold)}.b-approved{background:var(--card);color:var(--ok)}
.b-flagged{background:var(--card);color:var(--purple)}.b-rejected{background:var(--card);color:var(--crimson)}
/* Listing / published-book wizard (listing_form, published_book_form). */
.lf-wrap{max-width:900px;margin:0 auto}
/* Step header: a tab strip with a progress rail underneath. JS sets --lf-prog
   to how far through the wizard you are. */
.lf-pills{position:relative;display:flex;flex-wrap:nowrap;gap:var(--sp-1);margin:var(--sp-3) 0 20px;border-bottom:2px solid var(--line)}
.lf-pills::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:var(--lf-prog,0%);background:var(--amber)}
.lf-pill{flex:1 1 0;min-width:0;text-align:center;font-family:var(--serif);font-size:var(--fs-sm);padding:var(--sp-5) var(--sp-3);border:0;border-radius:var(--r-md) var(--r-md) 0 0;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lf-pill:hover{color:var(--ink)}
.lf-pill.on{background:var(--bg-amber);color:var(--amber);font-weight:700}
.lf-pill .pn{opacity:.7;margin-right:var(--sp-2)}
.lf-step h2{margin:0 0 var(--sp-2);font-size:21px;text-align:center}
.lf-step .sub{color:var(--muted);font-size:var(--fs-md);margin:0 auto var(--sp-8);text-align:center;max-width:46ch}
.lf-step label{display:block;margin:var(--sp-5) 0 var(--sp-2)}
.lf-cover-row{display:flex;gap:var(--sp-6);align-items:flex-start}
.lf-cover-box{width:30%;min-width:96px;aspect-ratio:2/3;border:1px dashed var(--parch);border-radius:var(--r-lg);background:var(--field);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:var(--fs-sm);text-align:center;flex:0 0 auto;padding:var(--sp-4)}
label.lf-cover-box{cursor:pointer;margin:0}
label.lf-cover-box:hover{border-color:var(--amber);color:var(--amber)}
.lf-cover-box img{width:100%;height:100%;object-fit:cover}
.lf-rt label{display:inline-flex;align-items:center;gap:var(--sp-3);margin:0 var(--sp-7) var(--sp-2) 0;font-weight:400}
.lf-wrap .ql-editor{min-height:280px}
.lf-wrap.pub .ql-editor{min-height:300px}
.lf-chips{display:flex;flex-wrap:wrap;gap:var(--sp-3);min-height:36px;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3);background:var(--card)}
.lf-chip{display:inline-flex;align-items:center;gap:var(--sp-1);background:var(--parch-lt);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-6);font-size:var(--fs-md)}
.lf-chip button{border:0;background:none;cursor:pointer;color:var(--crimson);font-size:var(--fs-xl);line-height:1;padding:0 var(--sp-2)}
.lf-add{display:flex;gap:var(--sp-3);margin:var(--sp-3) 0 var(--sp-2)}
.lf-add input{flex:1}
.lf-add .btn{white-space:nowrap;padding:var(--sp-4) var(--sp-7)}
.lf-req{color:var(--crimson)}
.lf-nav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-10);border-top:1px solid var(--line);padding-top:var(--sp-8)}
.lf-nav .btn{min-width:150px;padding:var(--sp-5) var(--sp-9)}
.lf-nav-end{display:inline-flex;gap:var(--sp-5);align-items:center}
/* Reader-team application cards (manage_readers). */
.appcard .tabbtns{display:flex;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-4)}
.appcard .tabbtns button{border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-7);font-size:var(--fs-sm);cursor:pointer;color:var(--timber)}
.appcard .tabbtns button.on{background:var(--amber);border-color:var(--amber-dk);font-weight:700}
.appcard .tabpane{display:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-7);font-size:var(--fs-base)}
.appcard .tabpane.on{display:block}
.appcard .qa,.apl-qa{margin-bottom:var(--sp-5)}
.appcard .qa .q,.apl-qa .q{font-weight:600;font-size:var(--fs-md)}
.appcard .qa .a,.apl-qa .a{white-space:pre-wrap;margin-top:var(--sp-1)}
/* Message thread (messages_thread). */
.msg-compose .ql-editor{min-height:64px}
.msg-bubble{display:inline-block;max-width:100%;padding:var(--sp-5) var(--sp-7);border-radius:var(--r-2xl)}
.msg-bubble p:last-child{margin-bottom:0}
.msg-bubble.theirs{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl) var(--r-2xl) var(--r-2xl) var(--r-2xs)}
.msg-bubble.mine{background:var(--amber);color:var(--ink-on-amber);border-radius:var(--r-2xl) var(--r-2xl) var(--r-2xs) var(--r-2xl)}
.msg-window{max-width:100%;height:48vh;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-6);border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--bg);padding:var(--sp-8);margin-top:0;box-shadow:inset 0 1px 4px rgba(0,0,0,.2)}
.msg-window>.meta{margin:auto}
.msg-window::-webkit-scrollbar{width:10px}
.msg-window::-webkit-scrollbar-thumb{background:var(--card);border-radius:var(--r-sm);border:2px solid var(--line)}
/* Scrollable listing tables (my_listings). */
.listscroll{max-height:360px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.listscroll table{margin:0}
.listscroll thead th{position:sticky;top:0;background:var(--card);z-index:1;box-shadow:0 1px 0 var(--line)}
/* Book-preference rating rows (preferences). */
.pref-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-5);padding:var(--sp-3) 0;border-top:1px solid var(--line)}
.pref-row:first-of-type{border-top:none}
.pref-child{padding-left:22px;border-top-style:dashed}
.pref-child .pref-name{font-size:var(--fs-md);color:var(--muted)}
.pref-name{flex:1 1 140px;min-width:0;font-size:var(--fs-base)}
.pref-kidcount{font-size:var(--fs-xs)}
/* 1-5 star rating: the template writes the radios in DESCENDING order
   (5..1) as flat siblings of their own labels, and this row is flex-reversed
   so the page still reads 1..5 left to right; that lets a plain
   :checked ~ label sibling rule light every star up to the one picked,
   while it stays a real, keyboard-usable radio group. */
.pref-scale{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;flex:0 0 auto}
.pref-scale input{display:none}
.pref-scale label{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;font-size:var(--fs-xl);line-height:1;color:var(--line);margin:0}
.pref-scale input:checked ~ label,
.pref-scale label:hover,
.pref-scale label:hover ~ label{color:var(--amber)}
/* Content-warning "avoid" rows: a two-segment Warn me / Hide chip instead
   of a star scale (still two real radios, just styled as a segmented
   control rather than a fake <select>). */
.pref-avoid{flex-direction:row;justify-content:flex-start;gap:0;border:1px solid var(--line);
  border-radius:var(--r-pill);overflow:hidden}
.pref-avoid label{width:auto;height:auto;padding:var(--sp-3) var(--sp-6);font-size:var(--fs-sm);
  color:var(--muted);background:var(--card);border-right:1px solid var(--line)}
.pref-avoid label:last-child{border-right:0}
.pref-avoid label:has(input:checked){background:var(--bg-warning);color:var(--warning-ink)}
.pref-avoid label:has(input[value="5"]:checked){background:var(--bg-danger);color:var(--danger-ink)}
.pref-clear{font-size:var(--fs-xs);color:var(--muted);cursor:pointer;flex:0 0 auto}
.pref-toggle{border:0;background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-sm);padding:0 var(--sp-1);flex:0 0 auto}
.pref-kids{display:none}
.pref-kids.open{display:block}
.pref-note{font-size:var(--fs-sm);color:var(--muted);margin:0 0 var(--sp-3)}
/* Plans / pricing (pricing). */
.plans{display:flex;gap:var(--sp-7);flex-wrap:wrap;align-items:stretch;margin:var(--sp-9) 0 var(--sp-6)}
.plan{flex:1;min-width:210px;border:1px solid var(--line);border-radius:var(--r-2xl);padding:20px;background:var(--card);display:flex;flex-direction:column}
.plan.featured{border:2px solid var(--amber);box-shadow:0 6px 22px rgba(0,0,0,.07)}
.plan.current{border:2px solid var(--dot-on)}
.plan h2{margin:0;font-size:21px}
.plan .price{font-size:32px;font-weight:700;font-family:var(--serif);margin:var(--sp-4) 0 0}
.plan .price .per{font-size:var(--fs-base);font-weight:400;color:var(--muted)}
.plan .save{font-size:var(--fs-sm);color:var(--ok);min-height:16px}
.plan ul{list-style:none;padding:0;margin:var(--sp-6) 0 var(--sp-9);font-size:var(--fs-md)}
.plan ul li{padding:var(--sp-3) 0 var(--sp-3) 20px;position:relative}
.plan ul li:before{content:"✓";position:absolute;left:0;color:var(--amber);font-weight:700}
.plan ul li.no{color:var(--muted)}
.plan ul li.no:before{content:"¹7";color:var(--crimson)}
.plan-no-lbl{font-weight:600;color:var(--muted)}
.plan .cta{margin-top:auto}
.ribbon{display:inline-block;background:var(--amber);color:var(--ink-on-amber);font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-5);margin-bottom:var(--sp-4)}
.curtag{display:inline-block;background:var(--card);color:var(--ink-inverse);font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-5);margin-bottom:var(--sp-4)}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--card)}
.toggle button{border:0;background:none;padding:var(--sp-4) var(--sp-9);font-weight:600;cursor:pointer;color:var(--muted);font-family:var(--serif)}
.toggle button.on{background:var(--amber);color:var(--ink-on-amber)}
.cmp th,.cmp td{text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp td.y{color:var(--ok);font-weight:700}
.cmp td.n{color:var(--muted)}
.cmp tr.group td{background:var(--card);font-weight:700;font-size:var(--fs-md)}
@media (max-width:700px){
  .cmp{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp th:not(:first-child),.cmp td:not(:first-child){white-space:nowrap}
  .cmp th:first-child,.cmp td:first-child{min-width:150px}
}
/* Reader-find filter row (reader_find). */
.rf-filters{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin:var(--sp-3) 0 var(--sp-1)}
.rf-filters select{width:auto;min-width:120px}
/* ---- In-browser reader (read_book). Full-width: collapse the shell to one
   column and give the panes the room. Scoped to .shell.reading so these
   overrides never touch any other page. ---- */
@media (min-width:821px){ body:has(.shell.reading){overflow:hidden} }
.shell.reading{grid-template-columns:1fr;max-width:none;width:100%;margin:0;padding:0;gap:0}
.shell.reading .shell-left,.shell.reading .shell-right{display:none}
.reader-fs{position:relative;margin-left:2vw;margin-right:2vw}
.reader-col::-webkit-scrollbar{width:14px}
.reader-col::-webkit-scrollbar-track{background:var(--card)}
.reader-col::-webkit-scrollbar-thumb{background:var(--card);border-radius:var(--r-sm);border:2px solid var(--line)}
.reader-col::-webkit-scrollbar-thumb:hover{background:var(--parch)}
.reader-col{scrollbar-width:auto;scrollbar-color:var(--parch) var(--line)}
/* The comfort bar now sits UNDER the panes (see .rv-bar at the end of this
   file for the bottom-bar layout). */
.reader-bar{display:flex;align-items:center;gap:var(--sp-7);flex-wrap:wrap;padding:var(--sp-4) 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.reader-bar .spacer{flex:1}
.reader-panes{display:flex;align-items:stretch;overflow:hidden}
.reader-col{overflow-y:auto;height:100%}
.reader-read{flex:1.7;border-right:1px solid var(--line)}
.reader-read-inner{max-width:760px;margin:0 auto;padding:22px 30px 34px}
.reader-disc{flex:0 0 340px;background:var(--card)}
.reader-disc-inner{padding:var(--sp-8) var(--sp-9)}
.chapter-body{line-height:1.75;font-size:var(--fs-3xl)}
.chapter-body p{margin:0 0 1em}
/* Three reading-comfort modes. Each one sets its own surface AND ink, and the
   headings, links and secondary lines inside the pane inherit that ink, so the
   chapter reads well in all three whatever the site theme does around it. */
.reader-read.rc-light{background:var(--rlight-bg);color:var(--rlight-ink)}
.reader-read.rc-sepia{background:var(--sepia-bg);color:var(--sepia-ink)}
.reader-read.rc-dark{background:var(--rdark-bg);color:var(--rdark-ink)}
.reader-read.rc-light .chapter-body,.reader-read.rc-sepia .chapter-body,.reader-read.rc-dark .chapter-body{color:inherit}
.reader-read:is(.rc-light,.rc-sepia,.rc-dark) :is(h1,h2,h3){color:inherit}
.reader-read:is(.rc-light,.rc-sepia,.rc-dark) a:not(.btn){color:inherit}
.reader-read:is(.rc-light,.rc-sepia,.rc-dark) a:not(.btn):hover{color:var(--amber-dk)}
.reader-read:is(.rc-light,.rc-sepia,.rc-dark) :is(.rv-by,.rv-chmeta,.rv-chlink,.rv-cta-p){color:inherit;opacity:.7}
.reader-read:is(.rc-light,.rc-sepia,.rc-dark) :is(.author-asks,.reader-note){background:transparent}
.rcbtn{cursor:pointer;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-5);font-size:var(--fs-md);color:var(--ink)}
.rcbtn:hover{background:var(--bg);border-color:var(--amber-dk)}
.reader-disc textarea{width:100%}
@media (max-width:820px){
  .reader-panes{flex-direction:column;height:auto !important}
  .reader-col{height:auto;overflow:visible}
  .reader-read{border-right:none;border-bottom:1px solid var(--line)}
  .reader-disc{flex:1 1 auto}
}
/* Reader page: the preview call-to-action card, the pinned "author asks" box,
   the respond-first locked box, and the quote banner. */
.reader-note{background:var(--card);border:1px solid var(--amber);border-radius:var(--r-xl);padding:var(--sp-8) 20px;font-size:var(--fs-base)}
.author-asks{border:1px solid var(--amber);background:var(--bg);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);margin:var(--sp-3) 0 var(--sp-5)}
.locked-box{border:1px dashed var(--line);border-radius:var(--r-lg);padding:var(--sp-7);text-align:center}

/* ---- account & settings ---- */
.acct{display:contents}
.acct-head,.sd-head{margin:var(--sp-1) 0 var(--sp-9)}
.acct-title{font-family:var(--serif);font-size:26px;margin:0}
.acct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);align-items:start}
.acct-col{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.acct-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--sp-8) var(--sp-9)}
.acct-card-h{margin-bottom:var(--sp-6)}
.acct-form label{margin:var(--sp-6) 0 var(--sp-2)}
.acct-label-tight{margin:var(--sp-6) 0 var(--sp-1)}
.acct-avatarrow,.pn-avatarrow{display:flex;align-items:center;gap:var(--sp-7);margin-bottom:var(--sp-2)}
.acct-avatarpic{width:var(--av-lg);height:var(--av-lg);border-radius:var(--r-round);object-fit:cover;background:var(--timber);flex:0 0 auto}
.acct-avatarbtn{position:relative;overflow:hidden;margin:0}
.acct-avatarbtn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;padding:0}
.acct-links-summary{margin-top:var(--sp-3)}
.acct-linklist{list-style:none;margin:var(--sp-2) 0 var(--sp-1);padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.acct-linklist a{color:var(--amber);word-break:break-all}
.acct-fullwidth{display:block;width:100%;text-align:center;box-sizing:border-box}
.acct-pen{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5) 0;border-bottom:1px solid var(--line)}
.acct-pen:last-of-type{border-bottom:0}
.acct-plan-name{font-family:var(--serif);font-size:var(--fs-4xl);color:var(--ink-bright);margin-top:var(--sp-1)}
.acct-plan-actions{margin-top:var(--sp-6)}
.acct-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-4)}
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);padding:var(--sp-5) 0;border-bottom:1px solid var(--line)}
.acct-row:last-child{border-bottom:0}
form.acct-row{border-bottom:0;padding:var(--sp-1) 0}
.acct-switch{position:relative;display:inline-flex;align-items:center;width:42px;height:24px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--field);cursor:pointer;padding:0}
.acct-switch.is-on{background:var(--amber);border-color:var(--amber-dk)}
.acct-knob{position:absolute;left:3px;top:2px;width:18px;height:18px;border-radius:var(--r-round);background:var(--ink-bright);transition:transform .15s}
.acct-switch.is-on .acct-knob{transform:translateX(18px);background:var(--ink-on-amber)}
@media(max-width:1080px){.acct-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.acct-grid{grid-template-columns:1fr}}
.ccquote{border-left:3px solid var(--amber);padding:var(--sp-1) var(--sp-4);margin-bottom:var(--sp-3);font-style:italic;color:var(--muted);font-size:var(--fs-md)}

/* ---- taxonomy tools (moderation + tag picker) ---- */
/* Moderate taxonomy page (moderate_taxonomy.html). */
.tx-kind{margin-top:30px}
.tx-tabs{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin:var(--sp-4) 0 var(--sp-7)}
.tx-tabs a{border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-6);font-size:var(--fs-md);text-decoration:none;color:inherit}
.tx-panel{position:sticky;top:8px;z-index:5;border:1px solid var(--amber-dk);background:var(--card);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-7);margin:var(--sp-5) 0;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.tx-panel form{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;margin:var(--sp-3) 0 0}
.tx-panel select,.tx-panel input[type=text]{width:auto;min-width:220px;flex:1}
.tx-tree{margin-top:var(--sp-4)}
.tx-row{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);flex-wrap:wrap}
.tx-row.tx-cat{background:var(--card);font-weight:700}
.tx-row.tx-child{padding-left:32px}
.tx-row.tx-hot{outline:2px solid var(--amber)}
.tx-name{flex:1;min-width:160px}
.tx-badge{font-size:var(--fs-xs);font-weight:400;border:1px dashed var(--line);border-radius:var(--r-pill);padding:0 var(--sp-4);color:var(--muted);margin-left:var(--sp-3)}
.tx-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.tx-actions button{font-size:var(--fs-sm)}
.tx-new{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;margin:var(--sp-5) 0}
.tx-new input{width:auto;min-width:220px}
.tx-count{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
details.tx-org summary{cursor:pointer;font-weight:700;margin-top:var(--sp-7)}
/* Pending-suggestions table: a wider action column, and mid-width selects
   for the approve/merge row forms. */
.tx-th-action{width:52%}
.tx-select-md{width:auto;min-width:170px}
/* Softer "Merge" variant of .btn (de-emphasized next to the primary Approve). */
.btn.merge{background:var(--parch-lt);border-color:var(--merge-line)}
/* Suggest-a-tag page (suggest_tag.html) and the listing-wizard tag picker
   (_tag_picker.html / _tag_picker_js.html). Both show a "did you mean" box
   of close existing matches while the visitor types a new term. */
.sg-block{margin-top:var(--sp-9)}
.sg-row input[type=text]{flex:2;min-width:200px}
.sg-row select{flex:1;min-width:170px}
.sg-dym{margin-top:var(--sp-3);font-size:var(--fs-md)}
.sg-dym-box{border:1px dashed var(--amber-dk);background:var(--tint-amber);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.sg-pill{border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-5);background:var(--card)}
.sg-err{color:var(--crimson);font-size:var(--fs-md);margin-top:var(--sp-2)}
.lf-add select.lf-cat{flex:0 1 190px;min-width:120px}
.lf-dym{margin:var(--sp-2) 0 var(--sp-3)}
.lf-dym-box{border:1px dashed var(--amber-dk);background:var(--tint-amber);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);font-size:var(--fs-md);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.lf-dym-pick{border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-5);cursor:pointer;font-size:var(--fs-md);color:inherit}
.lf-dym-pick:hover{border-color:var(--amber)}

/* ---- auth pages ---- */
/* Log in, sign up, check-your-email, and the password-reset set: all a
   single centered card (use with {% block shell_extra %} shell-solo{% endblock %}
   so the left sidebar column doesn't reserve space). */
.auth-wrap{max-width:440px;margin:40px auto;padding:0 var(--sp-8)}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:30px 26px;box-shadow:var(--shadow-sm)}
.auth-card h1{font-size:25px;text-align:center;margin:0 0 var(--sp-3)}
.auth-tagline{color:var(--muted);font-size:var(--fs-base);text-align:center;margin:0 0 22px}
.auth-icon{display:flex;justify-content:center;margin-bottom:var(--sp-7);color:var(--amber)}
.auth-icon svg{width:38px;height:38px}
.auth-card form p{margin:0 0 var(--sp-7)}
.auth-card label{margin:0 0 var(--sp-2)}
.auth-btn{display:block;width:100%;text-align:center;padding:var(--sp-6);font-size:var(--fs-lg);
  margin-top:var(--sp-3);box-sizing:border-box}
.auth-row-end{text-align:right;margin:-8px 0 var(--sp-7)}
.auth-row-end a{font-size:var(--fs-md);color:var(--muted)}
.auth-row-end a:hover{color:var(--amber)}
.auth-foot{text-align:center;margin:var(--sp-8) 0 0;font-size:var(--fs-base);color:var(--muted)}
.auth-foot a{color:var(--amber);font-weight:600}
.auth-intent-label{font-weight:600;margin:0 0 var(--sp-3)}
.auth-intent{display:flex;gap:var(--sp-5);margin:0 0 var(--sp-5)}
.auth-intent-btn{flex:1;text-align:center;padding:var(--sp-5) var(--sp-5);border-radius:var(--r-md);
  border:1px solid var(--line);background:transparent;color:var(--ink);
  font-size:var(--fs-base);font-weight:600}
.auth-intent-btn:hover{border-color:var(--amber);color:var(--amber)}
.auth-intent-btn.is-on{background:var(--amber);border-color:var(--amber-dk);
  color:var(--ink-on-amber)}
.auth-intent-btn.is-on:hover{color:var(--ink-on-amber)}
.auth-terms{display:flex;gap:var(--sp-4);align-items:flex-start;font-size:var(--fs-md);
  color:var(--muted);margin:var(--sp-1) 0 var(--sp-6);font-weight:400}
.auth-terms input{width:auto;margin:var(--sp-2) 0 0}
.auth-terms a{color:var(--ink);text-decoration:underline}
.auth-note{font-size:var(--fs-sm);color:var(--muted);margin:0 0 var(--sp-8);line-height:1.5}
.auth-card ul.errorlist{list-style:none;padding:0;margin:0 0 var(--sp-4);
  color:var(--crimson);font-size:var(--fs-md)}
.auth-found-other{margin:-6px 0 var(--sp-7)}
.lf-hint{font-size:var(--fs-sm);color:var(--muted);margin:var(--sp-1) 0 0}
/* ---- community hub ---- */
.chub-title{text-align:center}
.chub-sub{text-align:center}
.chub-cols{display:grid;grid-template-columns:1.3fr 1fr 0.9fr;gap:var(--sp-8);align-items:start}
/* The forum + contest columns are usually shorter than the buzz feed; pin them
   near the top instead of leaving dead space below as the feed runs long. */
.chub-col-forum,.chub-col-contest{position:sticky;top:16px}
.chub-composer{margin-bottom:var(--sp-7)}
.chub-feed-empty{margin:0}
.chub-more{display:block;text-align:center;margin-top:var(--sp-5)}
.chub-threadlist{display:flex;flex-direction:column;gap:var(--sp-5)}
.chub-thread{display:block;padding:var(--sp-5) var(--sp-6);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);color:inherit}
.chub-thread:hover{border-color:var(--amber)}
.chub-thread-t{font-weight:600;color:var(--ink)}
.chub-thread-snip{margin-top:var(--sp-2)}
.chub-thread-meta{margin-top:var(--sp-3)}
.chub-contest p{margin:0 0 var(--sp-4)}
.chub-contest-row{margin:var(--sp-3) 0}
.chub-contest-actions{display:flex;gap:var(--sp-4);margin-top:var(--sp-6);flex-wrap:wrap}
.chub-blogrow{margin-top:var(--sp-8)}
.chub-blogcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}
.chub-blogcard{display:block;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--bg);color:inherit}
.chub-blogcard:hover{border-color:var(--amber)}
.chub-blogcard-cov{display:block;aspect-ratio:16/9;background:var(--parch-lt)}
.chub-blogcard-body{display:block;padding:var(--sp-5) var(--sp-6)}
.chub-blogcard-t{display:block;font-weight:600;color:var(--ink);margin-bottom:var(--sp-2)}
@media(max-width:980px){.chub-cols{grid-template-columns:1fr 1fr}.chub-col-contest{grid-column:1/-1}}

/* ---- messages ---- */
/* Inbox (messages_inbox). */
.mg-inbox-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;margin-bottom:var(--sp-8)}
.mg-list{display:flex;flex-direction:column;gap:var(--sp-4);max-width:680px}
.mg-row{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-7);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card);color:inherit}
.mg-row:hover{border-color:var(--amber)}
.mg-row.mg-unread{background:var(--feed-unread)}
.mg-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5)}
.mg-row-name{font-weight:600;display:inline-flex;align-items:center;gap:var(--sp-3)}
.mg-dot{width:8px;height:8px;border-radius:var(--r-round);background:var(--amber);flex:0 0 auto}
.mg-row-time{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;flex:0 0 auto}
.mg-row-preview{margin-top:var(--sp-1);font-size:var(--fs-md);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-empty{padding:20px var(--sp-2)}

/* Conversation thread (messages_thread). */
.mg-thread{max-width:900px}
.mg-thread-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;padding-bottom:var(--sp-7);border-bottom:1px solid var(--line);margin-bottom:var(--sp-7)}
.mg-thread-id{display:flex;align-items:center;gap:var(--sp-6);min-width:0}
.mg-thread-name{font-family:var(--serif);font-size:var(--fs-4xl);margin:0;line-height:1.25}
.mg-thread-caption{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
.mg-thread-actions{display:flex;align-items:center;gap:var(--sp-4);flex:0 0 auto}
.mg-notice{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-6);margin:var(--sp-5) 0 0}
.mg-row-msg{display:flex;align-items:flex-end;gap:var(--sp-4);max-width:78%}
.mg-row-msg.mine{align-self:flex-end;flex-direction:row-reverse;text-align:right}
.mg-msg-col{min-width:0}
.mg-msg-meta{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2)}
.mg-msg-meta.mine{text-align:right}
.mg-composer{margin-top:var(--sp-7)}
.mg-composer-row{display:flex;justify-content:flex-end;margin-top:var(--sp-4)}
@media(max-width:600px){.mg-thread-head{align-items:flex-start}.mg-row-msg{max-width:92%}}
@media(max-width:820px){.chub-cols{grid-template-columns:1fr}.chub-col-contest{grid-column:auto}.chub-blogcards{grid-template-columns:1fr}.chub-col-forum,.chub-col-contest{position:static}}

/* ---- pricing ---- */
.pr-head{text-align:center;margin:var(--sp-2) 0 var(--sp-3)}
.pr-sub{max-width:640px;margin:0 auto}
.pr-faq{margin-top:var(--sp-10)}
.pr-faq-title{text-align:center;margin:0 0 var(--sp-9)}
.pr-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 36px}
.pr-faq-q{font-weight:700;margin-bottom:var(--sp-2)}
.pr-faq-a{color:var(--muted);font-size:var(--fs-md);line-height:1.6}
@media (max-width:760px){.pr-faq-grid{grid-template-columns:1fr}}
/* ---- listing wizard ---- */
/* The step body sits in one card, with the cover upload riding along in a rail
   on the left of every step (see mockups/wizard-create-listing.png). */
.lf-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);padding:22px var(--sp-10)}
.lf-title{text-align:center;font-size:clamp(1.25rem,1.05rem + .8vw,1.65rem);margin:0 0 var(--sp-9)}
.lf-cols{display:grid;grid-template-columns:172px minmax(0,1fr);gap:28px;align-items:start}
.lf-main{min-width:0}
.lf-aside{position:sticky;top:16px}
.lf-aside-lbl{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 var(--sp-4)}
.lf-aside .lf-cover-box{width:100%;min-width:0}
.lf-cover-plus{display:block;font-size:26px;line-height:1;margin-bottom:var(--sp-3);color:var(--amber)}
/* The real file input is off-screen; the cover tile is its label. */
.lf-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lf-cover-box:has(img){padding:0;border-style:solid;border-color:var(--line)}
.lf-cover-name{font-size:var(--fs-sm);color:var(--ink);margin:var(--sp-4) 0 0;overflow-wrap:anywhere}
.lf-cover-box:focus-within{border-color:var(--amber);color:var(--amber)}
/* A row of short numeric fields (page count, and later the guaranteed-review
   count on the reader-type step). */
.lf-numrow{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.lf-num{flex:1 1 180px;min-width:0}
.lf-num label{margin-top:0}
.lf-h3{font-family:var(--serif);font-size:var(--fs-xl);margin:var(--sp-9) 0 var(--sp-1)}
.lf-buy-lbl{flex:0 0 210px}
.lf-tags{display:block}
.lf-hidden{display:none}
@media(max-width:780px){
  .lf-cols{grid-template-columns:1fr;gap:var(--sp-9)}
  .lf-aside{position:static;max-width:190px}
  /* Too narrow for 6-7 tabs side by side: let the strip scroll instead. */
  .lf-pills{overflow-x:auto}
  .lf-pill{flex:0 0 auto;font-size:var(--fs-sm);padding:var(--sp-4) var(--sp-5);overflow:visible}
  .lf-card{padding:var(--sp-8) var(--sp-7)}
  .lf-nav .btn{min-width:0}
}

/* ---- reading view ---- */
/* read_book.html only. Layout: a narrow left rail (highlight tools, reading
   team, review-due card), then a main column holding the reading pane + the
   chapter-discussion panel, with the comfort bar pinned underneath. */
.rv-hide{display:none}
.rv-shell{display:flex;align-items:stretch;gap:var(--sp-8)}
.rv-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-2xl);overflow:hidden;background:var(--bg)}
.rv-panes{flex:1 1 auto;min-height:0}

/* --- left rail --- */
.rv-rail{flex:0 0 176px;display:flex;flex-direction:column;gap:var(--sp-9);padding:var(--sp-5) 0 var(--sp-6)}
.rv-rail-brand{text-align:center}
.rv-rail-brand img{max-width:100%;max-height:96px;object-fit:contain;opacity:.92}
.rv-tools{display:flex;flex-direction:column;gap:var(--sp-7)}
.rv-tool{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-5);background:none;border:0;padding:0;cursor:pointer;color:var(--muted);text-align:right;font:inherit;font-size:var(--fs-sm);line-height:1.25}
.rv-tool-lbl{flex:1 1 auto}
.rv-tool-ico{flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-round);border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);color:var(--amber)}
.rv-tool:hover{color:var(--ink)}
.rv-tool:hover .rv-tool-ico{border-color:var(--amber);background:var(--bg-amber)}
.rv-team{border-top:1px solid var(--line);padding-top:var(--sp-6)}
.rv-team-h{margin:0 0 var(--sp-4);font-size:var(--fs-md)}
.rv-team-list{max-height:34vh;overflow-y:auto;padding-right:var(--sp-2)}
.rv-team .tm{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.rv-team .tm img,.rv-team .tm .ph{width:var(--av-xs);height:var(--av-xs);border-radius:var(--r-round);object-fit:cover;flex:0 0 auto}
.rv-team .tm .ph{background:var(--card);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);color:var(--muted);font-weight:700}
.rv-team .tm a{font-size:var(--fs-sm);color:inherit;line-height:1.2;text-decoration:none}
.rv-team .tm a:hover{text-decoration:underline}
.rv-due{margin-top:auto;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card);padding:var(--sp-5) var(--sp-6)}
.rv-due-t{font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--sp-4)}
.rv-due-btn{display:block;text-align:center;width:100%;font-size:var(--fs-sm);padding:var(--sp-3) var(--sp-4)}

/* --- reading pane --- */
.rv-chnav{display:flex;align-items:center;font-size:var(--fs-md);margin-bottom:var(--sp-9)}
.rv-chnav-btm{margin:26px 0 0;border-top:1px solid var(--line);padding-top:var(--sp-7)}
.rv-chnav-sp{flex:1 1 auto}
.rv-chlink{color:var(--muted);text-decoration:none}
.rv-chlink:hover{color:var(--amber)}
.rv-chlink-off{opacity:.35}
.rv-head{text-align:center;margin-bottom:26px}
.rv-tag{display:inline-block;border:1px solid var(--amber);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-6);font-size:var(--fs-xs);letter-spacing:.6px;text-transform:uppercase;color:var(--amber);margin-bottom:var(--sp-6)}
.rv-book{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.05rem);margin:0}
.rv-book a{color:inherit;text-decoration:none}
.rv-by{font-size:var(--fs-md);color:var(--muted);margin-top:var(--sp-2)}
.rv-ch{font-family:var(--serif);font-size:clamp(1.05rem,.9rem + .7vw,1.35rem);margin:20px 0 var(--sp-1)}
.rv-chmeta{font-size:var(--fs-sm);color:var(--muted)}
.rv-cta{text-align:center;margin-top:26px}
.rv-cta-h{font-family:var(--serif);margin:0 0 var(--sp-7);font-size:1.3rem}
.rv-cta-btn{display:inline-block;min-width:260px;padding:var(--sp-5) 22px;font-size:var(--fs-lg)}
.rv-cta-p{margin:var(--sp-6) 0 0;font-size:var(--fs-sm);color:var(--muted)}

/* --- discussion panel --- */
.rv-disc{border-left:1px solid var(--line)}
.rv-disc-inner{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.rv-disc-head{display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.rv-disc-h{margin:0;font-size:var(--fs-xl);flex:1 1 auto}
.rv-mode{flex:0 0 auto;border:1px solid var(--amber-dk);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-5);font-size:var(--fs-2xs);letter-spacing:.4px;text-transform:uppercase;color:var(--amber)}
.rv-pinned{position:relative;margin:0 0 var(--sp-6)}
.rv-pinned-h{font-weight:700;font-size:var(--fs-sm);color:var(--amber)}
.rv-pinned-p{font-size:var(--fs-md);margin-top:var(--sp-3);line-height:1.45}
.rv-disc-scroll{flex:1 1 auto;min-height:60px;overflow-y:auto;padding-right:var(--sp-2)}
.rv-empty{font-size:var(--fs-md)}
.rv-locked{margin-top:var(--sp-4)}
.rv-locked-ico{font-size:var(--fs-4xl)}
.rv-locked-t{margin:var(--sp-3) 0 0;font-size:var(--fs-base)}
.rv-locked-p{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);line-height:1.45}
.rv-composer{flex:0 0 auto;border-top:1px solid var(--line);padding-top:var(--sp-5);margin-top:var(--sp-5)}
.rv-ctitle{margin-bottom:var(--sp-3)}
.rv-composer .ql-editor{min-height:54px}
.rv-composer-row{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-4)}
.rv-composer-sp{flex:1 1 auto}
/* One comment: avatar in the gutter, body beside it, nesting via --ind. */
.rv-cc{margin-top:var(--sp-6);margin-left:calc(var(--ind,0) * 1px)}
.rv-cc-row{display:flex;gap:var(--sp-5)}
.rv-cc-av{flex:0 0 auto}
.rv-cc-av img,.rv-cc-av .ph{width:var(--av-xs);height:var(--av-xs);border-radius:var(--r-round);object-fit:cover;display:flex;align-items:center;justify-content:center}
.rv-cc-av .ph{background:var(--bg);border:1px solid var(--line);font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.rv-cc-body{flex:1 1 auto;min-width:0;border-left:2px solid var(--line);padding-left:var(--sp-5)}
.rv-cc-title{font-weight:700;font-size:var(--fs-base);margin-bottom:var(--sp-1)}
.rv-cc-quote{margin:var(--sp-2) 0}

/* --- bottom comfort bar --- */
.rv-bar{flex:0 0 auto;border-bottom:0;gap:var(--sp-6);padding:var(--sp-4) var(--sp-8)}
.rv-bar-group{display:flex;align-items:center;gap:var(--sp-3)}
.rv-dots{gap:var(--sp-4)}
.rv-dot{width:17px;height:17px;border-radius:var(--r-round);border:1px solid var(--line);cursor:pointer;padding:0}
.rv-dot-light{background:var(--rlight-bg)}
.rv-dot-sepia{background:var(--sepia-bg)}
.rv-dot-dark{background:var(--rdark-bg)}
.rv-dot-on{box-shadow:0 0 0 2px var(--amber)}
.rv-prog{display:flex;align-items:center;gap:var(--sp-5);min-width:190px}
.rv-prog-track{flex:1 1 auto;height:7px;border-radius:var(--r-pill);background:var(--field);border:1px solid var(--line);overflow:hidden}
.rv-prog-fill{display:block;height:100%;width:calc(var(--pct,0) * 1%);background:var(--amber)}
.rv-prog-lbl{flex:0 0 auto;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
/* Contents + download popovers: a <details> that opens UPWARD out of the bar. */
.rv-pop{position:relative}
.rv-pop>summary{list-style:none;display:inline-block}
.rv-pop>summary::-webkit-details-marker{display:none}
.rv-pop-menu{position:absolute;bottom:calc(100% + 8px);left:0;z-index:40;min-width:230px;max-height:52vh;overflow-y:auto;background:var(--menu-bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3);box-shadow:var(--shadow-drop)}
.rv-dl .rv-pop-menu{left:auto;right:0}
.rv-toc-item{display:block;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-sm);font-size:var(--fs-md);color:var(--ink-nav);text-decoration:none}
.rv-toc-item:hover{background:var(--menu-hover);color:var(--amber)}
.rv-toc-on{color:var(--amber);font-weight:700}

@media (max-width:820px){
  .rv-shell{flex-direction:column;gap:var(--sp-6)}
  .rv-rail{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-6)}
  .rv-rail-brand{display:none}
  .rv-tools{flex-direction:row;gap:var(--sp-5)}
  .rv-tool{text-align:left}
  .rv-team{border-top:0;padding-top:0;flex:1 1 160px}
  .rv-team-list{display:flex;flex-wrap:wrap;gap:var(--sp-5);max-height:none}
  .rv-team .tm{margin-bottom:0}
  .rv-due{margin-top:0}
  .rv-due-btn{display:inline-block;width:auto}
  .rv-disc{border-left:0;border-top:1px solid var(--line)}
  .rv-disc-scroll{overflow:visible}
  .rv-prog{min-width:130px}
}

/* ---- my listings ---- */
.ml-head-act{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.ml-cover .noimg{width:100%;height:100%;min-height:0;font-size:9px;padding:var(--sp-1)}
.ml-date{min-width:130px}
.ml-act{width:224px}
.ml-actrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.ml-actrow .btn{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs);text-align:center}
.ml-actrow-more{margin-top:var(--sp-3);display:flex;gap:var(--sp-6)}
.ml-empty{text-align:center;padding:36px var(--sp-8);color:var(--muted)}
.ml-empty-icon{width:48px;height:48px;color:var(--muted);margin-bottom:var(--sp-5)}
.ml-empty .btn{margin-top:var(--sp-6)}
/* ---- forum ---- */
.fo-section-h{margin-top:22px}
.fo-index-h h2{margin:0}
/* "+ New Thread" -- a details/summary dropdown listing categories to post in,
   since a topic always belongs to a category (there's no generic composer). */
.fo-newthread{position:relative}
.fo-newthread>summary{list-style:none;cursor:pointer}
.fo-newthread>summary::-webkit-details-marker{display:none}
.fo-newthread-menu{position:absolute;right:0;top:112%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);min-width:200px;z-index:30;box-shadow:var(--shadow-pop)}
.fo-newthread-menu a{display:block;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);color:var(--ink)}
.fo-newthread-menu a:hover{background:var(--parch-lt);color:var(--amber)}
.fo-newthread-hint{padding:var(--sp-1) var(--sp-4) var(--sp-3)}
/* Forum Categories list */
.fo-catlist{display:flex;flex-direction:column}
.fo-catrow{display:flex;align-items:center;gap:var(--sp-7);padding:var(--sp-5) var(--sp-2);border-bottom:1px solid var(--line);color:inherit}
.fo-catlist .fo-catrow:last-child{border-bottom:0}
.fo-catrow:hover{color:var(--amber)}
.fo-cat-icon{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-md);background:var(--parch-lt);color:var(--amber);display:flex;align-items:center;justify-content:center}
.fo-cat-icon svg{width:18px;height:18px}
.fo-cat-body{flex:1;min-width:0;display:flex;flex-direction:column}
.fo-cat-name{font-weight:600;color:var(--ink)}
.fo-cat-desc{margin-top:var(--sp-1)}
.fo-cat-count{flex:0 0 auto;white-space:nowrap}
.fo-cat-dot{display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:var(--r-round);background:var(--line)}
.fo-cat-dot.is-on{background:var(--dot-on)}
/* Recent & Active Threads: two side-by-side tables, stacking on narrow screens */
/* Thread page: header panel + moderation row */
.fo-threadhead{margin-bottom:var(--sp-8)}
.fo-modrow{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--sp-2) 0}
/* One post (the original post or a reply) -- avatar left, name/time/body/actions right */
.fo-post{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-8) var(--sp-9);margin-bottom:var(--sp-6)}
.fo-post-op{border-color:var(--amber-dk)}
.fo-post-row{display:flex;gap:var(--sp-7);align-items:flex-start}
.fo-post-avatar{flex:0 0 auto;width:52px}
.fo-avatar-ph{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink)}
.fo-post-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.fo-post-actions{margin-top:var(--sp-4);font-size:var(--fs-md)}
.fo-you{border-color:var(--gold-line);color:var(--gold);font-size:var(--fs-xs)}
.fo-kids{margin-left:26px;margin-top:var(--sp-4)}
.fo-composer{margin-top:var(--sp-8)}

/* ---- forum category + find reviews ---- */
/* Forum category: one apanel holding the category head, a full-width New
   Thread button, and the thread table (reuses .atbl / .fo-cat-dot / .who). */
.fc-desc{margin-top:0}
.fc-newthread-btn{display:block;text-align:center;width:100%;margin:var(--sp-6) 0 var(--sp-2);padding:var(--sp-5)}
.fc-col-unread{width:44px;text-align:center}
/* Find reviews: reuses Browse's .bgrid/.bcard; adds the stage filter chips.
   The view only supports one reader-type filter at a time (an exact-match GET
   param), so these render as single-select chips, not true checkboxes. */
.fr-head{margin-bottom:0}
.fr-stage-h{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-3)}
.fr-stage-row{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.fr-stage-chip{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-6);border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.fr-stage-chip:hover{border-color:var(--amber);color:var(--amber)}
.fr-stage-chip.on{background:var(--amber);border-color:var(--amber-dk);color:var(--ink-on-amber);font-weight:600}
.fr-stage-chip.on:hover{color:var(--ink-on-amber)}
.fr-box{width:14px;height:14px;border-radius:var(--r-sm);border:1px solid currentColor;flex:0 0 auto;position:relative}
.fr-stage-chip.on .fr-box::after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fr-stage-note{margin-top:var(--sp-3)}
.fr-more{margin-bottom:var(--sp-3)}
.fr-more summary{cursor:pointer}

/* ---- blog ---- */
.bl-wrap{max-width:1040px}
/* Composer fields (blog_compose): a big title line and a small slug line. */
.bl-title-input{padding:var(--sp-5) var(--sp-6);border:1px solid var(--line)}
.bl-slug-input{padding:var(--sp-3) var(--sp-4);border:1px solid var(--line)}
.bl-cover-thumb{width:120px;height:80px}
/* The chapter editor's contenteditable surface (chapter_edit). */
.ch-editor{border:1px solid var(--line);min-height:320px;max-height:520px;overflow-y:auto}
.bl-sec-h{font-family:var(--serif);font-size:var(--fs-xl);margin:var(--sp-9) 0 var(--sp-5);color:var(--ink)}
.bl-byline{font-size:var(--fs-sm)}
.bl-byline a{color:inherit}
.bl-byline a:hover{color:var(--amber)}
/* featured card */
.bl-feat{display:flex;gap:var(--sp-9);align-items:flex-start;text-decoration:none}
.bl-feat-cov{flex:0 0 320px;width:320px;max-width:44%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line)}
.bl-feat-t{font-family:var(--serif);font-size:22px;margin:0 0 var(--sp-3);color:var(--ink)}
.bl-feat:hover .bl-feat-t{color:var(--amber)}
.bl-feat-x{margin:var(--sp-4) 0 0;color:var(--muted);font-size:var(--fs-base);line-height:1.5}
/* recent posts rows */
.bl-row{display:flex;gap:var(--sp-7);align-items:flex-start;padding:var(--sp-7) 0;border-top:1px solid var(--line);text-decoration:none}
.bl-row:first-of-type{border-top:0}
.bl-row-cov{flex:0 0 96px;width:96px;height:68px;object-fit:cover;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line)}
.bl-row-cov-ph{display:grid;place-items:center;font-size:22px}
.bl-row-t{font-family:var(--serif);font-size:var(--fs-xl);margin:0;color:var(--ink)}
.bl-row:hover .bl-row-t{color:var(--amber)}
.bl-row-x{margin:var(--sp-3) 0 0;color:var(--muted);font-size:var(--fs-md);line-height:1.45}
/* pagination */
.bl-pager{display:flex;justify-content:center;align-items:center;gap:var(--sp-3);margin-top:22px;flex-wrap:wrap}
.bl-page,.bl-page-nav{display:inline-block;min-width:30px;text-align:center;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);border:1px solid var(--line);color:var(--ink);font-size:var(--fs-md)}
.bl-page:hover,.bl-page-nav:hover{border-color:var(--amber);color:var(--amber)}
.bl-page-on{background:var(--amber);border-color:var(--amber-dk);color:var(--ink-on-amber);font-weight:600}
/* post page layout */
.bl-cols{display:grid;grid-template-columns:1fr 300px;gap:var(--sp-10);align-items:start}
.bl-cover{max-height:420px;object-fit:cover;border-radius:var(--r-xl)}
/* share row */
.bl-share{display:flex;align-items:center;gap:var(--sp-5);margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:1px solid var(--line)}
.bl-share-lbl{margin-right:var(--sp-1)}
.bl-share-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-round);border:1px solid var(--line);color:var(--ink);background:transparent;cursor:pointer}
.bl-share-ico svg{width:16px;height:16px}
.bl-share-ico:hover{border-color:var(--amber);color:var(--amber)}
.bl-share-ok{margin-left:var(--sp-1);display:none}
.bl-share-ok-on{display:inline}
/* about the author */
.bl-auth{display:flex;align-items:center;gap:var(--sp-5);text-decoration:none}
.bl-auth-av{width:var(--av-md);height:var(--av-md);border-radius:var(--r-round);object-fit:cover;flex:0 0 var(--av-md);background:var(--bg);border:1px solid var(--line)}
.bl-auth-av-ph{display:grid;place-items:center;font-family:var(--serif);font-size:var(--fs-2xl);color:var(--amber)}
.bl-auth-name{font-weight:600;color:var(--ink)}
.bl-auth:hover .bl-auth-name{color:var(--amber)}
.bl-auth-bio{margin:var(--sp-5) 0 0;line-height:1.5}
/* related posts */
.bl-rel{display:flex;gap:var(--sp-5);align-items:flex-start;padding:var(--sp-5) 0;border-top:1px solid var(--line);text-decoration:none}
.bl-rel:first-of-type{border-top:0}
.bl-rel-cov{flex:0 0 44px;width:44px;height:44px;object-fit:cover;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line)}
.bl-rel-cov-ph{display:grid;place-items:center;font-size:var(--fs-xl)}
.bl-rel-t{display:block;font-size:var(--fs-md);font-weight:600;color:var(--ink);line-height:1.3}
.bl-rel:hover .bl-rel-t{color:var(--amber)}
@media (max-width:820px){
  .bl-cols{grid-template-columns:1fr}
  .bl-feat{flex-direction:column}
  .bl-feat-cov{width:100%;max-width:none}
}

/* ---- my arcs ---- */
.ma-tbl td{vertical-align:top}
.ma-book{display:flex;gap:var(--sp-5);align-items:flex-start}
.ma-book-txt{min-width:0}
.ma-review{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.ma-rt-item{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm)}
.ma-onsite{background:var(--slate)}
.ma-act{width:36px;text-align:center}
.ma-done summary{cursor:pointer;color:var(--ink);font-size:var(--fs-base);list-style:none}
.ma-done summary::-webkit-details-marker{display:none}
.ma-done summary::before{content:"▸";display:inline-block;margin-right:var(--sp-4);color:var(--amber);transition:transform .15s}
.ma-done[open] summary::before{transform:rotate(90deg)}
.ma-done-sec{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.ma-done-h{font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:var(--sp-3)}
.ma-done-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);padding:var(--sp-3) 0;font-size:var(--fs-md)}
@media(max-width:820px){.atbl-wrap{overflow-x:auto}.ma-tbl{min-width:760px}}

/* ---- sell direct ---- */
.sd-status{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--serif);font-size:var(--fs-xl);margin:0}
.sd-stripe-act,.sd-locked-act{margin-top:var(--sp-5)}
.sd-locked{position:relative;background:var(--bg);border:1px solid var(--amber);border-radius:var(--r-xl);padding:var(--sp-8) var(--sp-9)}
.sd-locked-h{font-family:var(--serif);margin:0;font-size:var(--fs-xl)}

.sd-toggle{display:inline-flex;align-items:center;gap:var(--sp-4);cursor:default}
.sd-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.sd-toggle-track{position:relative;display:inline-block;width:38px;height:21px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--field);transition:background .15s,border-color .15s}
.sd-toggle-track::after{content:"";position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:var(--r-round);background:var(--muted);transition:transform .15s,background .15s}
.sd-toggle input:checked+.sd-toggle-track{background:var(--ok-line);border-color:var(--ok)}
.sd-toggle input:checked+.sd-toggle-track::after{transform:translateX(17px);background:var(--ok)}
.sd-toggle-lbl{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;color:var(--muted)}
.sd-toggle input:checked~.sd-toggle-lbl{color:var(--ok)}

.sd-price-input{width:88px;padding:var(--sp-3) var(--sp-4)}

.sd-cert{display:flex;align-items:flex-start;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--muted);max-width:260px}
.sd-cert input{margin-top:var(--sp-2);flex:0 0 auto}

.sd-sales{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.sd-sales-total{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-7) var(--sp-8)}
.sd-sales-lbl{font-size:var(--fs-sm);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sd-sales-num{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--amber);margin:var(--sp-2) 0}
.sd-sales-sub{font-size:var(--fs-sm);color:var(--muted)}
@media(max-width:760px){.sd-sales{grid-template-columns:1fr}}

/* ---- library ---- */
.lib-filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--sp-8) var(--sp-9) var(--sp-7);margin:var(--sp-7) 0 var(--sp-9)}
.lib-filters-h{font-family:var(--serif);font-size:var(--fs-2xl);margin:0 0 var(--sp-7);text-align:center}
.lib-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-7) var(--sp-8)}
.lib-field label{margin:0 0 var(--sp-2)}
.lib-field-search{grid-column:1 / -1}
@media (min-width:820px){.lib-field-search{grid-column:auto}}
.lib-reset{display:inline-block;margin-top:var(--sp-6);font-size:var(--fs-md);color:var(--amber-dk)}
.lib-reset:hover{color:var(--amber)}
.lib-filter-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-8);flex-wrap:wrap;margin-top:var(--sp-8);padding-top:var(--sp-7);border-top:1px solid var(--line)}
.lib-label{font-family:var(--serif);font-size:var(--fs-sm);letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:0 0 var(--sp-3)}
.lib-cw{margin-top:var(--sp-1)}
.lib-cw summary{display:inline-block;cursor:pointer;font-size:var(--fs-xs);border:1px solid var(--crimson);color:var(--crimson);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-5);background:transparent}
.lib-cw[open] summary{border-radius:var(--r-lg) var(--r-lg) 0 0}
.lib-cw-body{font-size:var(--fs-sm);color:var(--muted);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);padding:var(--sp-3) var(--sp-5)}
.lib-cta-row{display:flex;gap:var(--sp-4);margin-top:auto;padding-top:var(--sp-1)}
.lib-cta-row .btn{flex:1;text-align:center;font-size:var(--fs-md);padding:var(--sp-4) var(--sp-5)}

/* ---- bookshelf ---- */
.bs-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:var(--sp-7);margin-bottom:var(--sp-4)}
.bs-row-want{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bs-row-read{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.bs-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-7)}
.bs-reading,.bs-want{display:flex;align-items:center;gap:var(--sp-6)}
.bs-finished{display:flex;flex-direction:column;gap:var(--sp-6)}
.bs-finished-top{display:flex;gap:var(--sp-6)}
.bs-info{min-width:0;flex:1 1 auto}
.bs-title{display:block;font-family:var(--serif);font-size:var(--fs-lg);line-height:1.25;color:var(--ink)}
.bs-author{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
.bs-bar{margin-top:var(--sp-4);max-width:none}
.bs-chapter{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-3)}
.bs-cta{flex:0 0 auto;font-size:var(--fs-md);padding:var(--sp-4) var(--sp-7);white-space:nowrap}
.bs-stars{color:var(--amber);font-size:var(--fs-base);letter-spacing:1px;margin-top:var(--sp-3)}
.bs-rating-txt{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-1)}
.bs-btn-block{display:block;width:100%;text-align:center}
.bs-menu{position:absolute;top:10px;right:10px}
.bs-menu>summary{list-style:none;cursor:pointer;color:var(--muted);padding:var(--sp-1) var(--sp-4);border-radius:var(--r-md);font-size:var(--fs-3xl);line-height:1}
.bs-menu>summary::-webkit-details-marker{display:none}
.bs-menu>summary:hover{background:var(--parch-lt)}
.bs-menu[open]>summary{color:var(--amber)}
.bs-menu-pop{position:absolute;right:0;top:112%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3);min-width:172px;z-index:30;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.bs-menu-pop form{margin:0}
.bs-menu-pop button{display:block;width:100%;text-align:left;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-sm);background:none;border:0;cursor:pointer;font:inherit;color:var(--ink)}
.bs-menu-pop button:hover{background:var(--parch-lt)}
.bs-empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--r-xl);padding:20px;color:var(--muted);font-size:var(--fs-md);max-width:520px}
.bs-empty p{margin:0}
@media(max-width:560px){.bs-reading,.bs-want{flex-wrap:wrap}.bs-cta{margin-top:var(--sp-4)}}

/* ---- notifications ---- */
.nf-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);flex-wrap:wrap}
.nf-list{padding:0}
.nf-row{display:flex;align-items:flex-start;gap:var(--sp-6);padding:var(--sp-7) var(--sp-9);border-top:1px solid var(--line)}
.nf-row:first-child{border-top:0}
.nf-row.nf-unread{background:var(--feed-unread)}
.nf-dot{flex:0 0 8px;width:8px;height:8px;border-radius:var(--r-round);margin-top:var(--sp-5);background:transparent}
.nf-unread .nf-dot{background:var(--amber)}
.nf-icon{flex:0 0 var(--av-sm);width:var(--av-sm);height:var(--av-sm);border-radius:var(--r-round)}
.nf-glyph{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--amber);background:var(--field)}
.nf-glyph svg{width:20px;height:20px}
.nf-body{min-width:0}
.nf-label{font-weight:700;color:var(--ink-bright)}
.nf-text{margin-top:var(--sp-1)}
.nf-when{margin-top:var(--sp-2)}
.nf-actions{display:flex;align-items:center;gap:var(--sp-5);margin-top:var(--sp-1)}
.nf-action{white-space:nowrap}
.nf-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:var(--fs-4xl);line-height:1;padding:var(--sp-1) var(--sp-2)}
.nf-x:hover{color:var(--crimson)}
.nf-empty{gap:var(--sp-4);padding:52px var(--sp-10);min-height:220px}
.nf-empty-icon{width:56px;height:56px;color:var(--muted)}
.nf-empty-title{font-weight:700;color:var(--ink-bright);font-size:var(--fs-xl)}

/* Header bell dropdown feed, restyled to match the notifications page. */
.nf-d-row{display:flex;align-items:flex-start;gap:var(--sp-5)}
.nf-d-icon{flex:0 0 var(--av-xs);width:var(--av-xs);height:var(--av-xs);border-radius:var(--r-round)}
.nf-d-glyph{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--amber)}
.nf-d-glyph svg{width:15px;height:15px}
.nf-d-body{min-width:0}
.nf-d-label{display:block;font-weight:600}
.nf-d-text{display:block}
.nf-d-action{color:var(--amber)}

/* ---- members directory ---- */
.md-filters{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end}
.md-filter-col{display:flex;flex-direction:column;gap:var(--sp-3)}
.md-filter-search{flex:1 1 220px;min-width:200px}
.md-filter-label{font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.md-online-check{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-md);color:var(--ink);cursor:pointer;white-space:nowrap}
.md-online-check input{width:auto}
.md-viewtoggle a{white-space:nowrap;font-size:var(--fs-md)}

.md-cards{display:grid;gap:var(--sp-8);margin-top:var(--sp-9)}
.md-cards.md-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.md-cards.md-list{display:flex;flex-direction:column;gap:var(--sp-5)}

.md-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-4);box-shadow:var(--shadow-sm)}
.md-cards.md-list .md-card{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--sp-7);padding:var(--sp-6) var(--sp-8)}
.md-cards.md-list .md-card-id{flex:1 1 220px}
.md-cards.md-list .md-badges{flex:0 0 auto}
.md-cards.md-list .md-bio{flex:2 1 260px;margin:0}
.md-cards.md-list .md-followers{flex:0 0 auto}
.md-cards.md-list .md-actions{flex:0 0 auto;margin-left:auto}

.md-name-row{display:flex;align-items:center;gap:var(--sp-3)}
.md-name{font-weight:700;color:var(--ink)}
.md-you{font-size:var(--fs-xs);font-weight:700;background:var(--line);color:var(--muted);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4)}
.md-status{font-size:var(--fs-sm);color:var(--muted);display:flex;align-items:center;gap:var(--sp-3)}
.md-status.on{color:var(--dot-on)}

.md-badges{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.md-role-reader{background:var(--bg);color:var(--muted);border:1px solid var(--line)}

.md-bio{margin:0;font-size:var(--fs-md);color:var(--ink);line-height:1.45}
.md-followers{font-size:var(--fs-md);color:var(--muted)}
.md-actions{display:flex;gap:var(--sp-4);margin-top:var(--sp-1)}
.md-actions form{margin:0;flex:1;display:flex}
.md-actions>a{flex:1}
.md-actions .btn{width:100%}
.md-cards.md-list .md-actions form,.md-cards.md-list .md-actions>a{flex:0 0 auto}
.md-cards.md-list .md-actions .btn{width:auto}

@media (max-width:640px){
  .md-filters{gap:var(--sp-7)}
  .md-cards.md-list .md-card{flex-direction:column;align-items:stretch}
  .md-cards.md-list .md-actions{margin-left:0}
}

/* ---- authors landing ---- */
.au-bio{min-height:calc(var(--fs-md) * 1.45 * 2)}
.au-genres{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.au-genres .pill{margin:0}
.au-stats{display:flex;flex-direction:column;gap:var(--sp-2)}
.au-stat{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-md);color:var(--muted)}
.au-stat svg{flex:0 0 auto;width:15px;height:15px;color:var(--muted)}
.md-cards.md-list .au-genres,.md-cards.md-list .au-stats{flex:0 0 auto}

/* ---- pen names ---- */
/* Disabled buttons (tokens only, no per-caller overrides needed). */
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none;background:var(--card);color:var(--muted);border-color:var(--line)}
.btn.ghost[disabled],.btn.ghost.is-disabled{background:transparent;color:var(--muted);border-color:var(--line)}
/* Manage Pen Names: one row per identity inside the .apanel list card. */
.pn-row{display:flex;align-items:center;gap:var(--sp-7);padding:var(--sp-7) 0}
.pn-row+.pn-row{border-top:1px solid var(--line)}
.pn-avatar-ph{background:var(--timber)}
.pn-name-line{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.pn-handle{margin-top:var(--sp-1)}
.pn-caption{margin-top:var(--sp-1)}
.pn-actions{display:flex;gap:var(--sp-4);flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.pn-btn-danger{color:var(--crimson);border-color:var(--crimson)}
.pn-btn-danger:hover:not([disabled]){background:var(--bg-danger);color:var(--crimson);border-color:var(--crimson)}
.pn-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-7);flex-wrap:wrap;border-top:1px solid var(--line);margin-top:var(--sp-3);padding-top:var(--sp-8)}
@media(max-width:640px){
  .pn-row{align-items:flex-start;flex-wrap:wrap}
  .pn-actions{width:100%;justify-content:flex-start;margin-left:58px}
}
/* Add / Edit Pen Name form. */
.pn-brand{border-top:1px solid var(--line);margin-top:var(--sp-8);padding-top:var(--sp-6)}
.pn-brandimg img{max-height:48px;max-width:280px;object-fit:contain}
.pn-colorinput{width:64px;height:36px;padding:var(--sp-1)}
.pn-formact{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-7)}
/* Header "Switch Persona" list (inside the account dropdown). */
.pn-switch-row{display:flex!important;align-items:center;gap:var(--sp-5);padding:var(--sp-4)!important}
.pn-switch-avatar{flex:0 0 auto}
.pn-switch-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pn-switch-name{font-weight:600;color:var(--ink-nav);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-switch-row:disabled .pn-switch-name{color:var(--amber)}
.pn-switch-primary{font-weight:400;color:var(--muted);font-size:var(--fs-sm)}
.pn-switch-handle{font-size:var(--fs-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-switch-check{flex:0 0 auto;color:var(--amber);font-weight:700}

/* ---- profile edit + become author ---- */
/* Existing rows in the Review & Social Links formset: a platform "avatar",
   the editable fields, then reorder/remove actions. */
.pe-links-card{margin-top:var(--sp-2)}
.pe-linklist{display:flex;flex-direction:column}
.pe-linkrow{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) 0;flex-wrap:wrap}
.pe-linkrow+.pe-linkrow{border-top:1px solid var(--line)}
.pe-picon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-round);background:var(--parch-lt);
  color:var(--ink);font-weight:700;font-size:var(--fs-md)}
.pe-linkbody{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.pe-linkbody select{width:auto;min-width:140px}
.pe-linkbody input[type=text]{width:150px}
.pe-linkbody input[type=url]{flex:1;min-width:180px}
.pe-linkact{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-5)}
.pe-reorder{background:none;border:0;color:var(--amber);cursor:pointer;font-size:var(--fs-xl);
  line-height:1;padding:var(--sp-2)}
.pe-reorder:disabled{color:var(--muted);cursor:not-allowed;opacity:.5}
.pe-remove{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:600;
  font-size:var(--fs-md);cursor:pointer}
/* Add New Link: quick-pick platform icons above the real (full-choice) select. */
.pe-addrow{border-top:1px dashed var(--line);margin-top:var(--sp-5);padding-top:var(--sp-7)}
.pe-addrow-h{font-weight:600;margin-bottom:var(--sp-5)}
.pe-platform-pick{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-2)}
.pe-picon-btn{width:34px;height:34px;border-radius:var(--r-round);border:1px solid var(--line);
  background:var(--field);color:var(--ink);font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-md)}
.pe-picon-btn.on{background:var(--amber);border-color:var(--amber-dk);color:var(--ink-on-amber)}
.pe-addrow .row-fields{display:flex;gap:var(--sp-6);flex-wrap:wrap;align-items:flex-start}
.pe-addrow .row-fields>div{flex:1;min-width:160px}
.pe-formact{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-8)}
@media(max-width:640px){
  .pe-linkrow{align-items:flex-start}
  .pe-linkbody{width:100%}
  .pe-linkact{width:100%;justify-content:flex-end}
}
/* Become an Author: benefits card, then either the request form or the
   pending-review inset. */
.pe-benefits{display:flex;align-items:flex-start;gap:var(--sp-7)}
.pe-benefits-icon{flex:0 0 auto;width:var(--av-md);height:var(--av-md);border-radius:var(--r-round);
  background:var(--bg-amber);display:flex;align-items:center;justify-content:center;font-size:var(--fs-3xl)}
.pe-pending{background:var(--bg-amber);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--sp-8)}
.pe-pending-status{font-size:var(--fs-sm);color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:var(--sp-4)}
.pe-pending-status strong{color:var(--warning-ink)}
.pe-pending h3{margin:0 0 var(--sp-4)}

/* ---- admin hub ---- */
/* Media-usage meters: a track with a fill whose width comes from --pct and
   whose colour comes from the level class. */
.mu-track{height:var(--sp-5);background:var(--card);border-radius:var(--r-sm);overflow:hidden}
.mu-row-track{flex:1;background:var(--card);border-radius:var(--r-xs);height:var(--sp-8);overflow:hidden}
.mu-fill{height:100%;width:calc(var(--pct,0)*1%);background:var(--bar-ok)}
.mu-fill.is-watch{background:var(--amber)}
.mu-fill.is-over{background:var(--crimson)}
/* Canvas preview in the promo reel / video builders (the script resizes it). */
.promo-canvas{width:270px;height:480px;border-radius:var(--r-xl);border:1px solid var(--line);
  box-shadow:var(--shadow-cover-lg);background:var(--card)}
.ol-steps{margin:0 0 var(--sp-7) 20px;padding:0}
.ah-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-6)}
.ah-actions{display:flex;flex-direction:column;gap:var(--sp-3);min-width:200px}
.ah-actions form{margin:0}
.ah-actions .btn{width:100%;text-align:center}
.ah-reason{max-width:220px}
.ah-pre{white-space:pre-wrap}
.ah-pill-restricted{background:var(--crimson);color:var(--ink-bright);border-color:var(--crimson)}
/* ---- apply ---- */
/* Reader Apply page: book row under the card heading, and the smaller
   sub-headings ("What the Author Asks", "Author's Questions", "Your
   Message", "My Reliability Card", "Acknowledgement") stacked one card. */
.apl-book{margin:0 0 var(--sp-8)}
.apl-sec{font-family:var(--serif);font-size:var(--fs-xl);margin:var(--sp-8) 0 var(--sp-4);color:var(--ink)}
.apl-sec:first-child{margin-top:0}
/* ---- rating forms ---- */
/* rate_reader.html / rate_author.html: context strip (cover + who/what is
   being rated), a five-star radio control, a two-column checklist and a
   note field. Shared by both pages. */
.rf-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rf-context{display:flex;gap:var(--sp-7);align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-6);margin:var(--sp-6) 0 var(--sp-8)}
.rf-context-cols{display:flex;flex-wrap:wrap;gap:var(--sp-9);flex:1;min-width:0}
.rf-context-col{min-width:0}
.rf-context-label{display:block;color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--sp-1)}
.rf-context-title{font-weight:600;font-size:var(--fs-xl);color:var(--ink)}
.rf-context-sub{color:var(--muted);font-size:var(--fs-md)}
.rf-persona{display:flex;align-items:center;gap:var(--sp-4)}
.rf-persona .rf-context-title{font-size:var(--fs-lg)}
.rf-section{font-weight:600;font-size:var(--fs-lg);color:var(--ink);margin:var(--sp-8) 0 var(--sp-3)}
/* Star rating: five radios, hidden but focusable, each paired with a label
   that shows a star glyph. DOM order is 5..1 and the row is reversed with
   flex, so ":checked ~ .rf-star" (a following-sibling match) lights up
   every star at or before the checked one without any script. */
.rf-stars{display:inline-flex;flex-direction:row-reverse;gap:var(--sp-2);justify-content:flex-end}
.rf-star-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rf-star{cursor:pointer;font-size:28px;line-height:1;color:var(--parch)}
.rf-star::before{content:"☆"}
.rf-star-input:checked ~ .rf-star{color:var(--amber)}
.rf-star-input:checked ~ .rf-star::before{content:"★"}
.rf-stars:hover .rf-star:hover,.rf-stars:hover .rf-star:hover ~ .rf-star{color:var(--amber)}
.rf-stars:hover .rf-star:hover::before,.rf-stars:hover .rf-star:hover ~ .rf-star::before{content:"★"}
.rf-star-input:focus-visible + .rf-star{outline:2px solid var(--amber);outline-offset:2px;
  border-radius:var(--r-2xs)}
.rf-checklist{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-8);
  margin:var(--sp-3) 0 var(--sp-6)}
.rf-check-item{display:flex;align-items:center;gap:var(--sp-4);font-weight:400;margin:0}
.rf-checkbox{appearance:none;-webkit-appearance:none;width:24px;height:24px;flex:0 0 24px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--field);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.rf-checkbox:checked{background:var(--amber);border-color:var(--amber-dk)}
.rf-checkbox:checked::after{content:"✓";color:var(--ink-on-amber);font-size:15px;font-weight:700}
.rf-checkbox:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.rf-note textarea,.rf-note{margin:0}
.rf-submit{width:100%;text-align:center}
@media(max-width:520px){
  .rf-context{flex-direction:column}
  .rf-checklist{grid-template-columns:1fr}
}
/* ---- contest ---- */
.ct-head{text-align:center;margin:var(--sp-2) 0 var(--sp-3)}
.ct-lead{max-width:640px;margin:0 auto}
.ct-row{margin-bottom:var(--sp-8)}
.ct-linkrow{display:flex;gap:var(--sp-6);flex-wrap:wrap;align-items:stretch}
.ct-linkbox{flex:1 1 260px;min-width:0;border:1px solid var(--line);background:var(--field);
  color:var(--ink);font:inherit;font-size:var(--fs-base)}
.ct-linkrow .btn{flex:0 0 auto}
.ct-platforms{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:center;margin-top:var(--sp-7)}
.ct-pwrap{position:relative;display:inline-flex}
.ct-pbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--field);color:var(--ink);
  cursor:pointer}
.ct-pbtn:hover{border-color:var(--amber);color:var(--amber)}
.ct-pbtn.ct-copied{border-color:var(--ok);color:var(--ok)}
.ct-pbtn svg{width:19px;height:19px}
.ct-pdone{position:absolute;top:-6px;right:-6px;background:var(--card);color:var(--ok);
  border-radius:var(--r-round);font-size:var(--fs-2xs);font-weight:700;line-height:1;
  width:15px;height:15px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line)}
.ct-entryform{margin-top:var(--sp-9);padding-top:var(--sp-8);border-top:1px solid var(--line)}
.ct-form{display:flex;gap:var(--sp-5);flex-wrap:wrap;align-items:center;margin-top:var(--sp-5)}
.ct-form select,.ct-form input{border:1px solid var(--line);background:var(--field);color:var(--ink);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-6);font:inherit;font-size:var(--fs-base)}
.ct-form input[type=url]{flex:1 1 220px;min-width:0}
.ct-stat{text-align:center}
.ct-bignum{font-family:var(--serif);font-size:44px;color:var(--amber);line-height:1;margin:var(--sp-5) 0}
.ct-nextdraw{font-size:var(--fs-2xl);font-weight:600;margin:var(--sp-5) 0 var(--sp-3)}
.ct-prize{text-align:center}
.ct-crown{width:48px;height:48px;margin:var(--sp-5) auto;color:var(--amber)}
.ct-crown svg{width:100%;height:100%}
.ct-winnerlist{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.ct-winnerlist li{display:flex;justify-content:space-between;gap:var(--sp-5);
  border-bottom:1px solid var(--line);padding-bottom:var(--sp-4)}
.ct-winnerlist li:last-child{border-bottom:0;padding-bottom:0}
.ct-ruleslist{margin:var(--sp-8) 0 0;padding-left:22px;display:flex;flex-direction:column;gap:var(--sp-7)}
.ct-ruleslist li{font-size:var(--fs-lg);line-height:1.6;padding-left:var(--sp-3)}
.ct-rulescard{max-width:720px;margin:0 auto}
/* ---- purchases + support ---- */
/* My Purchases: Read/Download actions stack in the .atbl actions cell. */
.ps-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
/* Ticket header: status pill + staff-only close/reopen form share a row. */
.ps-ticket-act{display:flex;align-items:center;gap:var(--sp-5);flex:0 0 auto}
.ps-ticket-act form{margin:0}
/* Small round glyph standing in for a staff avatar in the ticket thread. */
.ps-staff-avatar{display:grid;place-items:center;font-size:var(--fs-sm)}
/* ---- follows + promo video ---- */
/* Following / Followers list: a numbered rows-in-a-card list, reusing the
   .mt-tabs switch from My Tavern for the Following/Followers toggle. */
.fl-panel{max-width:640px}
.fl-tabs{max-width:420px}
.fl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-7)}
.fl-row{display:flex;align-items:center;gap:var(--sp-5)}
.fl-num{flex:0 0 auto;width:18px;text-align:right;color:var(--muted);font-weight:600}
.fl-who{flex:1 1 auto;min-width:0}
.fl-name{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2)}
.fl-role-reader{background:transparent;color:var(--muted);border:1px solid var(--line)}
.fl-actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-4)}
.fl-follow-btn{min-width:112px;text-align:center}
/* A tiny <details> menu (same pattern as .bs-menu / .post-menu) behind the
   Unfollow / Block buttons. */
.fl-menu{position:relative}
.fl-menu summary{list-style:none;cursor:pointer}
.fl-menu summary::-webkit-details-marker{display:none}
.fl-menu-pop{position:absolute;right:0;top:112%;background:var(--menu-bg);border:1px solid var(--timber);border-radius:var(--r-md);padding:var(--sp-3);min-width:160px;z-index:30;box-shadow:var(--shadow-pop)}
.fl-menu-pop form{margin:0}
.fl-menu-pop button{display:block;width:100%;background:none;border:0;padding:var(--sp-4);text-align:left;cursor:pointer;color:var(--ink);font-size:var(--fs-base)}
.fl-menu-pop button:hover{background:var(--menu-hover)}
@media (max-width:520px){
  .fl-row{flex-wrap:wrap}
  .fl-actions{width:100%;justify-content:flex-end}
}

/* Promo Video Builder: phone-shaped preview on the left, actions + suggested
   captions on the right. */
.pv-layout{display:flex;gap:var(--sp-10);flex-wrap:wrap;align-items:flex-start}
.pv-preview-col{flex:0 0 auto}
.pv-actions-col{flex:1 1 280px;min-width:260px;max-width:360px}
.pv-fmts{max-width:300px}
.pv-phone{display:inline-flex;flex-direction:column;align-items:stretch;gap:var(--sp-3);background:var(--pv-timber);border:1px solid var(--line-strong);border-radius:var(--r-2xl);padding:var(--sp-4)}
.pv-phone-bar{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);color:var(--ink-nav-dim);font-size:var(--fs-xs);font-weight:700}
.pv-play{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--r-round);background:var(--amber);color:var(--ink-on-amber);font-size:var(--fs-2xs)}
.pv-canvas{display:block;border-radius:var(--r-lg)}
.pv-canvas.fmt-vertical{width:270px;height:480px}
.pv-canvas.fmt-landscape{width:480px;height:270px}
.pv-canvas.fmt-square{width:360px;height:360px}
.pv-hint{max-width:300px}
.pv-btn-primary,.pv-btn-secondary{display:block;width:100%;text-align:center}
.pv-btn-hint{margin-bottom:var(--sp-6)}
.pv-captions-h{font-size:var(--fs-lg);margin:var(--sp-9) 0 var(--sp-5)}
.pv-captions-sub{font-weight:400}
.pv-captions{display:flex;flex-direction:column;gap:var(--sp-5)}
.pv-caption{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6)}
.pv-caption-h{display:flex;align-items:center;gap:var(--sp-3);font-weight:700;margin-bottom:var(--sp-4)}
.pv-caption-text{margin:0 0 var(--sp-5);color:var(--muted);font-size:var(--fs-sm);white-space:pre-wrap}
.pv-copy{font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-6)}
/* ==== unit-01 ==== */
/* Bring a Reader panel on the Account page: the invite link row and the
   signed-up / counted tally. Colours come from the existing tokens. */
.ref-linkrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ref-link{flex:1 1 260px;min-width:0;overflow-wrap:anywhere;background:var(--field);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;color:var(--ink)}
.ref-counts{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;font-size:14px}
/* ==== unit-12 review-guarantee ==== */
/* The guarantee strip on the team page, and the author's activity page. All
   colour comes from existing tokens: --ok for met, --warning-ink for work
   pending, --crimson for a reopened spot. */
.gt{width:100%;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.gt-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gt-h{font-family:var(--serif);font-size:15px;color:var(--ink)}
.gt-more{font-size:13px;color:var(--amber);margin-left:auto;white-space:nowrap}
.gt-pill-ok{color:var(--ok);border-color:var(--ok-line)}
.gt-pill-work{color:var(--warning-ink);border-color:var(--warning-ink)}
.gt-bar{display:flex;align-items:center;gap:8px;margin-top:8px}
.gt-bar .abar{margin-right:0}
.gt-stats{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px;font-size:13.5px;color:var(--muted)}
.gt-stats strong{color:var(--ink);font-weight:600}
.gt-warn{color:var(--warning-ink);font-weight:600}
.gt-last{margin:6px 0 0}
.gt-log{list-style:none;margin:0;padding:0;font-size:14px}
.gt-log li{padding:8px 0;border-top:1px solid var(--line)}
.gt-log li:first-child{border-top:0}
.gt-note{display:block;color:var(--muted);font-size:13px}
/* ==== end unit-12 ==== */

/* ==== unit-14 ==== */
.hs-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.hs-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px}
.hs-thumb{width:100%;height:140px;object-fit:cover;border-radius:8px;background:var(--card);display:block}
@media (max-width:640px){
  .hs-grid{grid-template-columns:1fr 1fr}
}

/* ==== unit-18 ==== */
/* My Shelf (universal ARC tracker, app `shelf`): reuses .apanel/.apanel-h/.atbl/
   .pill/.reviewby/.linkbtn/.btn from the reader reskin; these few rules cover
   only what those don't already: the overdue row tint and the select used as
   an inline quick status changer inside an .atbl-act cell. */
.atbl tr.is-overdue .atbl-t{color:var(--crimson)}
.atbl-act select{width:auto;padding:4px 6px;margin-right:8px;font-size:12px}
.atbl-act .aform{margin-right:8px}

/* ==== unit-19 ==== */
/* Book tours (the `tours` app). Status pills reuse the tokens site.css already
   defines; nothing here introduces a colour of its own. */
.apill.tr-draft{color:var(--muted)}
.apill.tr-scheduled{color:var(--info);border-color:var(--info-line)}
.apill.tr-live{background:var(--bg-amber);color:var(--amber-dk);border-color:var(--amber)}
.apill.tr-completed{color:var(--ok);border-color:var(--ok-line)}
.apill.tr-canceled{color:var(--muted);text-decoration:line-through}
.apill.ts-ok{color:var(--ok);border-color:var(--ok-line)}
.apill.ts-bad{color:var(--danger-ink);border-color:var(--danger-line)}
.apill.ts-wait{color:var(--gold);border-color:var(--gold-line)}
.apill.ts-info{color:var(--info);border-color:var(--info-line)}
.apill.ts-off{color:var(--muted)}
.t19-counts{display:flex;flex-wrap:wrap;gap:6px}
.t19-mark{margin-right:12px}
.t19-chan{display:flex;align-items:center;gap:8px}
.t19-report>td{background:var(--bg)}
.t19-reportbox label{margin-top:0}
.t19-reportrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.t19-reportrow input[type=url]{flex:1 1 220px;width:auto}
.t19-narrow{max-width:120px}
/* The datetime and number inputs this unit adds are not covered by the global
   input rule above, so they get the same field treatment here. */
input[type=datetime-local],input[type=number]{width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--field);color:var(--ink)}

/* ==== unit-03 ==== */
/* The Roll + Seconded. The page and the Seconded button reuse .apanel/.atbl/
   .apill/.who/.avatar/.btn/.btn.ghost/.meta/.mt-tabs as-is; the only new rule
   is the top-rank badge, which reuses the existing .rolebadge base and the
   same amber token pair the "Moderator" badge already uses. */
.rolebadge.roll{background:var(--amber);color:var(--ink-on-amber)}

/* ==== unit-10 group-migration ==== */
/* The Facebook-group recognition mark. Its own token pair rather than a reuse
   of --gold, so it is never mistaken for the (dead) Founding Member perk and
   nothing about the two can drift into each other. */
:root{--charter:var(--info);--charter-ink:var(--ink-on-amber)}
.rolebadge.charter{background:var(--charter);color:var(--charter-ink)}
.gc-narrow{max-width:110px}
.gc-inline{display:inline}
.apill.gc-live{color:var(--ok);border-color:var(--ok-line)}
.apill.gc-cap{color:var(--gold);border-color:var(--gold-line)}
.apill.gc-off{color:var(--muted);text-decoration:line-through}
/* ==== end unit-10 ==== */

/* ==== unit-13 ==== */
/* Reading heat map (author) + the reaction row in the reading view. Every tone
   below keys off a semantic token that site.css already defines: --bar-ok for a
   healthy depth, --amber for "look at this", --crimson for a real drop-off. */
.abar-fill.hm-ok{background:var(--bar-ok)}
.abar-fill.hm-warn{background:var(--amber)}
.abar-fill.hm-bad{background:var(--crimson)}
.apill.hm-ok{color:var(--ok);border-color:var(--ok-line)}
.apill.hm-warn{color:var(--gold);border-color:var(--gold-line)}
.apill.hm-bad{color:var(--crimson);border-color:var(--crimson)}
.apill.hm-skim{color:var(--info);border-color:var(--info-line)}
.hm-num{font-size:var(--fs-md);color:var(--muted)}
.hm-tally{display:inline-flex;flex-wrap:wrap;gap:var(--sp-4)}
.hm-tally-i{font-size:var(--fs-md);white-space:nowrap}
.hm-moments{margin-top:var(--sp-3)}
.hm-moment{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2)}
/* Reader-side picker. The rail already styles .rv-tools; this only adds the
   emoji row and its two hint lines. */
.hm-react-form{margin:0}
.hm-react-h{font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:var(--sp-4)}
.hm-react-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.hm-rx{padding:var(--sp-2) var(--sp-4);line-height:1.1}
.hm-rx-on{border-color:var(--amber);color:var(--amber)}
.hm-react-hint,.hm-react-msg{margin:var(--sp-4) 0 0}

/* ==== unit-15 ==== */
/* Reader Card, Reader Radar and the reader search page. Layout and spacing
   only: every colour here is an existing token, and the result cards reuse
   .md-card wholesale so a reader in search looks like a member in the
   directory rather than a second visual language for the same thing. */
.u15-card{margin-top:var(--sp-7);padding-top:var(--sp-6);border-top:1px solid var(--line)}
.u15-card.is-own{margin-top:var(--sp-8)}
.u15-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5)}
.u15-card-t{margin:0;font-size:var(--fs-xl);font-family:var(--serif)}
.u15-card-sub{margin:var(--sp-2) 0 var(--sp-5)}
.u15-facts{display:flex;flex-direction:column;gap:var(--sp-5);margin:var(--sp-5) 0}
.u15-fact{display:flex;flex-direction:column;gap:var(--sp-2)}
.u15-fact .meta{text-transform:uppercase;letter-spacing:.05em}
.u15-spice{font-size:var(--fs-lg);color:var(--ink)}
.u15-badges{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.u15-shelf{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.u15-shelf-i{display:block;width:46px;border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;background:var(--card);aspect-ratio:2/3}
.u15-shelf-i img{display:block;width:100%;height:100%;object-fit:cover}
.u15-shelf-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  padding:var(--sp-2);font-size:var(--fs-xs);color:var(--muted);text-align:center;line-height:1.2}
.u15-opts{display:flex;flex-direction:column;gap:var(--sp-5);margin-top:var(--sp-6)}
.u15-opt{display:flex;align-items:flex-start;gap:var(--sp-5);margin:0;font-weight:400;cursor:pointer}
.u15-opt-save{align-self:flex-start}

/* Reader Radar: a stat strip, never a list of people. */
.u15-radar{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-7);margin:var(--sp-8) 0}
.u15-radar-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-5)}
.u15-radar-t{margin:0;font-size:var(--fs-xl);font-family:var(--serif)}
.u15-radar-list{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:var(--sp-5) var(--sp-9)}
.u15-radar-row{display:flex;align-items:baseline;gap:var(--sp-3)}
.u15-radar-n{font-size:var(--fs-4xl);font-weight:700;color:var(--amber-dk);line-height:1}
.u15-radar-lbl{font-size:var(--fs-md);color:var(--ink)}
.u15-radar-note{margin:var(--sp-3) 0 0}

/* Reader search */
.u15-search-sub{max-width:70ch;margin:0 0 var(--sp-7)}
.u15-filters{display:flex;flex-wrap:wrap;gap:var(--sp-5);align-items:flex-end;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-7);margin-bottom:var(--sp-7)}
.u15-filter{display:flex;flex-direction:column;gap:var(--sp-2);flex:1 1 170px}
.u15-filter label{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.u15-filter-q{flex:2 1 220px}
.u15-filter-go{flex:0 0 auto}
.u15-res-spice{font-size:var(--fs-md);color:var(--ink)}
.u15-invite{flex:1}
.u15-invite>summary{display:block;width:100%;text-align:center;cursor:pointer;list-style:none}
.u15-invite>summary::-webkit-details-marker{display:none}
.u15-invite-body{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.u15-invite-l{font-size:var(--fs-md)}
@media(max-width:620px){
  .u15-filter,.u15-filter-q{flex:1 1 100%}
}

/* ==== unit-17 ==== */
/* Tavern Card backlist lending: the borrow/return widget on listing_detail.html
   and the current-loan panel on tavern_card.html reuse .btn/.meta/.linkbtn/
   .apanel/.bgrid/.bcard/.atbl/.sd-toggle; only the cover+info row is new. */
.tc-current{display:flex;gap:14px;align-items:flex-start}
.tc-note{margin:8px 0 4px}

/* Landing 19b: the graphic maker and the content backlog. The maker reuses the
   .pv-* promo layout classes as they are; these are only the pieces that page
   does not already have. */
:root{
  /* Canvas drop shadow for the tour graphic, beside the other --pv-* canvas
     colours: the graphic must look the same in either site theme, so it reads
     its palette from tokens of its own rather than the UI tokens. */
  --pv-shadow:rgba(28,27,25,.38);
}
.t19-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-6)}
.t19-gal-item{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.t19-gal-item img{display:block;width:100%;height:auto;background:var(--bg)}
.t19-gal-item figcaption{padding:var(--sp-5)}
.t19-gal-cap{margin:var(--sp-4) 0;font-size:var(--fs-sm);color:var(--muted);white-space:pre-wrap}
.t19-gal-act{display:flex;align-items:center;gap:var(--sp-5);font-size:var(--fs-sm)}
.t19-strip{display:flex;gap:var(--sp-5);overflow-x:auto;padding-bottom:var(--sp-3)}
.t19-strip-item{flex:0 0 auto;width:120px;text-align:center}
.t19-strip-item img{display:block;width:120px;height:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}

/* ==== unit-20a ==== */
/* Coming Soon: an announced-but-not-yet-open call. Reuses the existing
   "informational" pair (.apill-waiting / .apill.ts-info already use these
   same tokens) rather than a new colour, since this is the same kind of
   state -- waiting, not active. The class name matches this codebase's
   established apill-<status value>.lower convention (my_listings.html and
   author_dashboard.html already emit it automatically), rather than a
   second, differently-spelled modifier. */
.apill-coming_soon{color:var(--info);border-color:var(--info-line)}


/* ==== unit-11 tavern-regular ==== */
/* The standing page reuses .apanel/.apanel-h/.rdash-stats/.rstat/.btn/.pill
   from the reader reskin; .pill.gold and .pill.info (the early-access chip)
   already exist. Only the badge needs a variant, on the same --gold/
   --gold-line pair every other gold surface (sharebar, fo-you) already uses. */
.rolebadge.regular{background:var(--card);color:var(--gold);border:1px solid var(--gold-line)}
/* ==== end unit-11 ==== */


/* ==== unit-09 retention ==== */
/* "What to read next" panel (_unit09_next_reads.html), on reader_dashboard.html
   and inside my_arcs.html's Completed section. Reuses .apanel/.apanel-h/.cov
   from the reskin; only the match/author rows below are new, and every colour
   is an existing token (--gold for the "new for you" match accent, matching
   the spec's own list). */
.u09-matches{display:flex;gap:var(--sp-6);overflow-x:auto;padding:var(--sp-1) var(--sp-1) var(--sp-4);scroll-snap-type:x proximity;scrollbar-width:thin}
.u09-match{flex:0 0 220px;display:flex;gap:var(--sp-5);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5);color:inherit;scroll-snap-align:start}
.u09-match:hover{border-color:var(--gold)}
.u09-match-txt{min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.u09-match-t{font-family:var(--serif);font-size:var(--fs-md);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u09-match-m{font-size:var(--fs-xs);color:var(--gold);font-weight:600}
.u09-authors{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);align-items:baseline;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.u09-authors-h{font-size:var(--fs-sm);color:var(--muted);flex:1 1 100%}
.u09-author{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm)}


/* Timed takeovers (19c): a card per coordinated wave, plus the stop picker on
   the takeover form. Tokens only, same as everything above. */
.t19-waves{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.t19-wave{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--bg)}
.t19-wave-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.t19-wave-t{margin:0;font-size:16px}
.t19-count{white-space:nowrap}
.t19-wave-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.t19-wave-list li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.t19-wave-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.t19-picks>div{display:flex;flex-direction:column;gap:8px}
.t19-picks label{display:flex;gap:8px;align-items:center;margin-top:0;font-weight:400}
.t19-picks input[type=checkbox]{width:auto;margin:0}
.t19-check{display:flex;gap:8px;align-items:center;font-weight:400}
.t19-check input[type=checkbox]{width:auto;margin:0}


/* ==== unit-16 ==== */
/* Outcome packages + the Launch Pass. The package promise is one line inside
   the existing .plan card, the pass cards reuse the .plan surface recipe at a
   smaller scale, and the picker/calculator panels are plain .apanel +
   .cols-2. Every colour here is an existing token; nothing new was added to
   :root for this unit. */
.u16-promise{margin:var(--sp-4) 0 var(--sp-5);font-size:var(--fs-md);line-height:1.45}

.u16-pass{margin:var(--sp-10) 0}
.u16-pass-sub{max-width:70ch;margin:0 0 var(--sp-7)}
.u16-pass-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--sp-6);margin-bottom:var(--sp-7)}
.u16-pass-card{display:flex;flex-direction:column;gap:var(--sp-4);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--sp-8) var(--sp-9)}
.u16-pass-name{margin:0;font-family:var(--serif);font-size:var(--fs-3xl)}
.u16-pass-price{font-size:26px;font-weight:700;color:var(--amber-dk);line-height:1}
.u16-pass-once{font-size:var(--fs-md);font-weight:400}
.u16-pass-promise{margin:0;font-size:var(--fs-md);line-height:1.45;flex:1}
.u16-pass-meta{font-size:var(--fs-sm)}
.u16-pass-card .btn{margin-top:auto}
.u16-pass-fine{max-width:78ch;margin:0}

.u16-choose{margin:var(--sp-10) 0}
.u16-panel{margin-bottom:0}
.u16-q{border:0;padding:0;margin:var(--sp-7) 0 0;display:flex;flex-direction:column;gap:var(--sp-3)}
.u16-q-t{padding:0;font-size:var(--fs-base);font-weight:600}
.u16-a{display:flex;align-items:flex-start;gap:var(--sp-4);margin:0;
  font-weight:400;font-size:var(--fs-md);cursor:pointer}
.u16-a input[type=radio]{width:auto;margin:0}
.u16-res{margin-top:var(--sp-8);padding:var(--sp-6) var(--sp-7);
  background:var(--bg-amber);border:1px solid var(--gold-line);border-radius:var(--r-lg)}
.u16-res-name{font-family:var(--serif);font-size:var(--fs-4xl);color:var(--gold);
  margin-bottom:var(--sp-2)}
.u16-slider-l{display:block;font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-2)}
.u16-slider{width:100%;max-width:220px}
.u16-tasks{list-style:none;margin:var(--sp-7) 0 0;padding:0;display:flex;
  flex-direction:column;gap:var(--sp-4)}
.u16-task{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--sp-6);font-size:var(--fs-md)}
.u16-task-n{color:var(--muted);white-space:nowrap}
.u16-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-6);
  margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--line)}
.u16-total-n{font-size:var(--fs-4xl);color:var(--amber-dk);white-space:nowrap}
.u16-pass-pill{display:inline-block;margin-top:var(--sp-3)}
/* ==== end unit-16 ==== */

/* ==== nav-fixes ==== */
.rnav a.rnav-cta{margin-top:var(--sp-3);padding-top:var(--sp-6);border-top:1px solid var(--line);border-radius:0;color:var(--amber);font-size:var(--fs-md)}
.rnav a.rnav-cta:hover{background:transparent;color:var(--amber-dk)}
.shell-left .adside{position:static;margin-top:var(--sp-7)}
.md-viewas{margin-left:auto;text-decoration:none;font-size:var(--fs-md)}

/* ==== phone-fixes ==== */
/* Findings from the phone-width walk (2026-09-23). Inputs at 16px so iOS
   does not zoom on focus; 40px tap targets for nav, chips and row actions;
   grids that hold tables must be allowed to shrink; a few rows that never
   wrapped. */
input[type=text],input[type=url],input[type=date],input[type=password],input[type=email],input[type=datetime-local],input[type=number],input[type=search],input[type=tel],textarea,select{font-size:max(16px,var(--fs-base))}
input[type=file]{max-width:100%}
.cols-2>*,.acols>*,.apanel{min-width:0}
.adash-stats{flex-wrap:wrap}
.linkbtn.tap,.atbl-act a,.atbl-act .linkbtn,.pn-actions .btn,.ateam-act{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-4)}
.bchip{min-height:36px;display:inline-flex;align-items:center}
.iconbtn,.navicon>summary,.navtoggle{min-width:40px;min-height:40px}
.sts-head button{min-width:40px;min-height:40px;font-size:var(--fs-xl)}
.sts-panel .meta a{display:inline-block;padding:var(--sp-4) 0}
.ql-toolbar button{width:36px!important;height:36px!important}
@media(max-width:900px){
  .mainnav{min-height:44px;padding:var(--sp-3) 0;width:100%}
  .iconrow{position:relative}
  .navicon{position:static}
  .icondrop{position:absolute;top:calc(100% + var(--sp-2));right:0;left:auto;width:min(320px,calc(100vw - 20px))}
  .bchip{min-height:40px}
}
@media(max-width:640px){
  .pn-actions{width:calc(100% - 58px)}
}

/* ==== theme-light ==== */
/* Light mode, colours taken from Michelle's light-mode home mockup
   (mockups/home-light-2.png, 2026-09-23): white header and cards on a soft
   grey page, dark ink, gold accent with dark text on it, green "open" and
   amber "closing" badges. Same token names as the dark :root so every page
   flips at once; only tokens change here. */
:root[data-theme="light"]{
  color-scheme:light;
  --ink:#1a1a1a;--muted:#6d6d6d;--amber:#b08f3f;--amber-dk:#8f7130;
  --timber:#ffffff;--parch:#5a4a2f;--parch-lt:#ebecf0;
  --bg:#f0f1f4;--card:#ffffff;--line:#dcdde2;--crimson:#b3392f;--forest:#cfe5db;
  --field:#ffffff;--slate:#3d5d74;
  --bg-success:#cfe5db;--bg-danger:#fbe9e7;--bg-warning:#f4e9c9;--bg-amber:#f7efd9;
  --ink-on-amber:#1a1a1a;--ink-bright:#111111;--ink-nav:#1a1a1a;--ink-nav-dim:#4a4a4a;
  --menu-bg:#ffffff;--menu-hover:#ebecf0;--strip-bg:#ebecf0;--feed-unread:#f7efd9;
  --success-ink:#2d5137;--success-line:#b6d8c6;--danger-ink:#8a2a20;--danger-line:#f0c3bd;
  --warning-ink:#7a5a1a;--line-strong:#cfd3da;--author-badge-ink:#5a4a2f;
  --tint-amber:rgba(188,153,74,.12);--merge-line:#cfd3da;
  --shadow-sm:0 1px 2px rgba(26,26,26,.06);--shadow-card:0 1px 3px rgba(26,26,26,.08);
  --shadow-pop:0 6px 18px rgba(26,26,26,.14);--shadow-drop:0 8px 22px rgba(26,26,26,.16);
  --shadow-panel:-8px 0 28px rgba(26,26,26,.14);--scrim:rgba(26,26,26,.35);
  --ok:#2d5137;--ok-line:#b6d8c6;--bar-ok:#3a7a5a;
  --info:#3d5d74;--info-line:#c9d7e0;--purple:#4a327a;--purple-line:#b9a6e0;
  --gold:#7a5a1a;--gold-line:#e8dcb5;
}
.theme-form{display:inline-flex}
.ract-site{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm)}


/* ==== unit-22 ==== */
/* Refer and earn (catalog/templates/catalog/refer_earn.html) and the promo card
   that replaced the Share & Win one. Almost everything on the page is a shared
   component already (.apanel, .astat, .abar, .atbl, .apill, .sbtn, .ref-link);
   these are only the few spacings and wraps those components do not carry. */
.re-prog{font-size:var(--fs-lg);color:var(--ink);margin:0 0 var(--sp-4)}
.re-bar{width:100%;max-width:340px;height:8px;margin:0 0 var(--sp-4)}
.re-prog-sub{margin:0 0 var(--sp-7)}
.re-stats{flex-wrap:wrap;gap:var(--sp-5)}
.re-next{margin:var(--sp-7) 0 0}
.re-note .meta{color:var(--ink)}
.re-rules{margin:0;padding-left:var(--sp-8);line-height:1.5}
.re-rules li{margin-bottom:var(--sp-5)}
.re-rules strong{color:var(--ink)}
.re-tbl .apill{margin-right:var(--sp-4)}
.re-note-cell{display:block;margin-top:var(--sp-2)}


/* ==== unit-23 ==== */
/* The affiliate program: the public program page
   (catalog/templates/catalog/affiliate_program.html), the affiliate's own
   dashboard, and Michelle's queue. Nearly everything on all three is an
   existing shared component (.prose, .apanel, .astat, .atbl, .apill, .btn,
   .ref-link, .sbtn); these are the few spacings, wraps and one form those
   components do not carry. Tokens only, no literals. */
.aff-rules{margin:0 0 var(--sp-7);padding-left:var(--sp-8);line-height:1.55}
.aff-rules li{margin-bottom:var(--sp-5)}
.aff-rules strong{color:var(--ink)}
.aff-cta{padding:var(--sp-6) var(--sp-7);margin:var(--sp-7) 0}
.aff-form{max-width:520px}
.aff-form textarea,.aff-form input[type=text]{width:100%}
.aff-form label{display:block;font-weight:600;color:var(--ink)}
.aff-check{display:flex;align-items:flex-start;gap:var(--sp-4);font-weight:400}
.aff-check span{color:var(--muted);font-size:var(--fs-sm)}
.aff-stats{flex-wrap:wrap;gap:var(--sp-5)}
.aff-note{margin:var(--sp-6) 0 0}
.aff-disclose{margin:var(--sp-6) 0 0}
.aff-disclose strong{color:var(--ink)}
.aff-cell{display:block;margin-top:var(--sp-2)}
.aff-where{max-width:320px}
.aff-payrun{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-7)}


/* ==== unit-24 ==== */
/* My Crew: the crew page (catalog/templates/catalog/my_crew.html), the invite
   panel on the book team page, and the reader's own "crews you are on" list.
   Nearly everything is a shared component already (.apanel, .atbl, .astat,
   .apill, .pill, .btn, .who, .codebox, .linkbtn); these are the few wraps,
   spacings and one textarea those components do not carry. Tokens only. */
.cr-invite{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5)}
.cr-mailbox{flex-basis:100%;border-top:1px solid var(--line);padding-top:var(--sp-6);margin-top:var(--sp-4)}
.cr-mail-ta{width:100%;max-width:560px}
.cr-addlbl{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--muted);font-weight:400;margin-top:var(--sp-3)}
.cr-pens{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.cr-pens .pill.on{background:var(--amber);border-color:var(--amber);color:var(--ink-on-amber)}
.cr-pens-note{flex-basis:100%}
.cr-sell{margin:0 0 var(--sp-7);padding-left:var(--sp-8);line-height:1.55}
.cr-sell li{margin-bottom:var(--sp-5)}
.cr-note{margin:var(--sp-6) 0 0}
.cr-link{display:inline-block;max-width:340px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.cr-gone{margin:0;padding-left:var(--sp-8);line-height:1.6}
.cr-mine{list-style:none;margin:0;padding:0}
.cr-mine li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;padding:var(--sp-5) 0;border-bottom:1px solid var(--line)}
.cr-mine li:last-child{border-bottom:0}

/* ==== richtext-colours ==== */
/* User rich text never sets its own colours: anything pasted with an inline
   style inherits the theme, so blurbs, bios, posts, comments, reviews and
   forum bodies read correctly in dark and light mode alike. */
.richtext [style],.ql-editor [style]{color:inherit!important;background:transparent!important}

/* ==== live-audit ==== */
footer .links a{display:inline-block;padding:var(--sp-4) var(--sp-2)}
.brail select{font-size:max(16px,var(--fs-md))}
@media(max-width:900px){.pill{min-height:36px;display:inline-flex;align-items:center}}
/* Word and Docs pastes leave empty paragraphs behind; they take no space. */
.richtext p:empty,.richtext p:has(> br:only-child){display:none}
/* Narrow screens: a data table keeps its shape and scrolls sideways inside .atbl-wrap. */
@media(max-width:900px){.atbl-wrap .atbl{min-width:640px}}
.toggle button.on .meta{color:var(--ink-on-amber)}
.bd-cg-cov .noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:90px;color:var(--muted);font-size:var(--fs-sm);background:var(--card);border-radius:var(--r-md);text-align:center;padding:var(--sp-3)}