/* Web type ladder: greeting 26 / page title 22 / section 18 / body 15 / label 12.5 px.
   Serif retained; headings track -0.02em, uppercase labels +0.06em. Native parity follows. */
/* ═══════════════════════════════════════════════════════════════
   BookClub — v3 design-system kit
   Provenance: extracted verbatim (token VALUES) from the locked
   board mockups/options/option-a2/periwinkle/index.html
   ("Option A2 · Periwinkle", per mockups/DESIGN-V3.md).
   Tokens are LOCKED — change only via DESIGN-V3.md, never here.
   Screen-specific board layout (the three demo phone screens'
   content: home feed, book sheet, TBR list) is NOT carried here —
   this file is the reusable system, not the demo.
   ═══════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;
  /* ground + surfaces */
  --ground:#FBF3E7;
  --board:#F4E9DA;
  --surf:#FFFCF7;
  --surf-2:#F8EEE1;
  --surf-3:#F2E3D1;
  --hair:#EADCC9;
  --hair-soft:#F0E4D4;

  /* ink */
  --ink:#372B23;
  --ink-2:#6E5B4D;
  --ink-3:#6F5E51;
  --ink-on-accent:#262E4D; /* accent: periwinkle */

  /* pastels */
  --butter:#A9B7EE; /* accent: periwinkle */
  --butter-soft:#E7EBFB; /* accent: periwinkle */
  --peach:#F7C8A4;
  --peach-soft:#FBE3D2;
  --rose:#EFA9A2;
  --rose-soft:#FADDDA;
  --rose-ink:#A34239;
  --mint:#BFD9C4;
  --mint-soft:#E2EFE4;
  --lilac-soft:#FCEBC4; /* accent: periwinkle */

  /* R7 nit (b): #5563C0 on --board (#F4E9DA) measured 4.45:1, just under WCAG AA's
     4.5:1 for normal text. Minimally darkened (R -1, G -1) to #5462C0, which clears
     it at 4.51:1 — a change too small to read as a different color. */
  --link:#5462C0; /* accent: periwinkle */
  --sel:#FFFFFF;             /* selected segment fill */

  /* depth: one light source, above */
  --sh-1: 0 1px 1px rgba(96,64,36,.045), 0 2px 5px -2px rgba(96,64,36,.07);
  --sh-2: 0 2px 3px -1px rgba(96,64,36,.06), 0 10px 22px -10px rgba(96,64,36,.16);
  --sh-3: 0 6px 12px -4px rgba(96,64,36,.10), 0 26px 46px -18px rgba(96,64,36,.26);
  --sh-cover: 0 1px 2px rgba(72,46,26,.12), 0 8px 18px -8px rgba(72,46,26,.30);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.55);

  /* geometry — 4/8 scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;
  --r-card:20px;   /* outer */
  --r-in:14px;     /* nested inside 20 with 6 pad */
  --r-chip:10px;
  --r-pill:999px;
  --tabbar:#FFFCF7;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --ground:#241C17;
  --board:#1B1512;
  --surf:#2F2621;
  --surf-2:#382D27;
  --surf-3:#43352D;
  --hair:#453830;
  --hair-soft:#3A2E28;

  --ink:#F6EADC;
  --ink-2:#CDB8A6;
  /* R7 nit (b): #A38D7B on --surf-2 (#382D27) measured 4.23:1, under WCAG AA's 4.5:1.
     Minimally lightened (+5 each channel) to #A89280, which clears it at 4.51:1. */
  --ink-3:#A89280;
  --ink-on-accent:#232B49; /* accent: periwinkle */

  --butter:#A3B2F0; /* accent: periwinkle */
  --butter-soft:#2F3552; /* accent: periwinkle */
  --peach:#EDBE9A;
  --peach-soft:#4A362A;
  --rose:#EDA9A1;
  --rose-soft:#4A302D;
  --rose-ink:#F3B3AA;
  --mint:#A9C8AF;
  --mint-soft:#2C3B2F;
  --lilac-soft:#4A3A24; /* accent: periwinkle */

  --link:#B8C2F5; /* accent: periwinkle */
  --sel:#5E4B3E;

  --sh-1: 0 1px 1px rgba(0,0,0,.30), 0 2px 5px -2px rgba(0,0,0,.36);
  --sh-2: 0 2px 3px -1px rgba(0,0,0,.34), 0 10px 22px -10px rgba(0,0,0,.55);
  --sh-3: 0 6px 12px -4px rgba(0,0,0,.40), 0 26px 46px -18px rgba(0,0,0,.70);
  --sh-cover: 0 1px 2px rgba(0,0,0,.45), 0 8px 18px -8px rgba(0,0,0,.65);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.06);
  --tabbar:#2F2621;
}

/* ── base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* R8-M4 (RG-12-class): the `hidden` content attribute has UA-stylesheet specificity equal
   to a single class selector, so any element that ALSO carries its own `display` rule (a
   button's .btn, a flex/grid container's own class, etc.) can win the specificity tie and
   stay visible while `hidden` is true (clubs.html's #leave-club-btn, `.btn{display:
   inline-flex}`, was the R8 instance; reader.html's `.reader[hidden]` fixed the same class
   for `.reader{display:grid}` in R6). One global, !important rule closes the class for
   every element on every page, present and future, instead of a new per-element mirror
   each time a fix is needed. */
[hidden]{display:none !important}
body{
  background:var(--board);
  color:var(--ink);
  font-family:Georgia, 'Iowan Old Style', Palatino, 'Palatino Nova', serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  font-size:15px; line-height:1.5;
  transition:background-color var(--d-quick) var(--ease-out-quart),color var(--d-quick) var(--ease-out-quart);
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* ── links ────────────────────────────────────────────────────────
   Any inline/secondary link must resolve to the periwinkle accent in
   BOTH themes. Bound here at the token level so it cannot drift when
   a screen sets its own color on an <a> or .link without a rule. */
a,.link{color:var(--link)}

/* ── section header ───────────────────────────────────────────── */
.secttl{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:var(--s4) 0 var(--s2);
}
.secttl h3{margin:0;font-size:17px;font-weight:750;letter-spacing:-.015em}
.secttl a{font-size:13.5px;font-weight:650;color:var(--link);text-decoration:none}

/* ── card ─────────────────────────────────────────────────────── */
.card{
  background:var(--surf);border-radius:var(--r-card);
  box-shadow:var(--sh-1),var(--inset-hi);
  padding-inline:var(--s4);
  transition:background-color var(--d-quick) var(--ease-out-quart);
}

/* ── cover tile ───────────────────────────────────────────────── */
.cover{border-radius:var(--r-cover);box-shadow:var(--sh-cover);background:var(--surf-3);object-fit:cover}
.cover.lg{border-radius:var(--r-cover-lg)}

/* ── chip ─────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--s4);border-radius:var(--r-pill);
  font-size:13px;font-weight:640;background:var(--surf);color:var(--ink-2);box-shadow:var(--sh-1),var(--inset-hi);
}
.chip.on{background:var(--butter-soft);color:var(--ink);font-weight:700}
.chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── pill button: accent (default), soft, ghost ──────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 18px;border-radius:var(--r-pill);
  font-size:15px;font-weight:700;letter-spacing:-.008em;
  background:var(--butter);color:var(--ink-on-accent);
  box-shadow:var(--sh-1);
  transition:transform var(--d-quick) var(--ease-out-quart),filter var(--d-quick) var(--ease-out-quart);
}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-soft{background:var(--butter-soft);color:var(--ink);box-shadow:none}
.btn-ghost{background:var(--surf-2);color:var(--ink);box-shadow:none}

/* icon-only pill button (e.g. sheet dock actions) */
.iconbtn{
  width:48px;height:48px;border-radius:var(--r-pill);background:var(--surf);
  display:grid;place-items:center;color:var(--ink-2);box-shadow:var(--sh-1),var(--inset-hi);
}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── segmented control ───────────────────────────────────────── */
.seg{
  display:flex;gap:2px;background:var(--surf-3);border-radius:var(--r-row);padding:3px;
}
.seg button{
  flex:1;height:32px;border-radius:var(--r-chip);font-size:13.5px;font-weight:660;color:var(--ink-2);
  transition:background-color var(--d-quick) var(--ease-out-quart),color var(--d-quick) var(--ease-out-quart);
}
.seg button[aria-pressed="true"]{background:var(--sel);color:var(--ink);font-weight:750;box-shadow:var(--sh-1)}

/* ── light/dark toggle (two-button group variant) ────────────── */
.toggle{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--surf);border-radius:var(--r-pill);padding:3px;
  box-shadow:var(--sh-1),var(--inset-hi);
}
.toggle button{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px 6px 11px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--ink-3);
  transition:background-color var(--d-quick) var(--ease-out-quart),color var(--d-quick) var(--ease-out-quart);
}
.toggle button[aria-pressed="true"]{background:var(--butter-soft);color:var(--ink)}
.toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── avatar ───────────────────────────────────────────────────── */
.avatar{
  width:36px;height:36px;border-radius:var(--r-pill);flex:0 0 auto;
  display:grid;place-items:center;font-size:14px;font-weight:750;letter-spacing:-.01em;
  background:var(--peach-soft);color:var(--rose-ink);box-shadow:var(--inset-hi);
}
html[data-theme="dark"] .avatar{color:var(--ink)}
/* small avatar, four rotating color slots (feed/list rows) */
.av{width:34px;height:34px;border-radius:var(--r-pill);flex:0 0 auto;display:grid;place-items:center;font-size:13px;font-weight:740}
.av.a1{background:var(--rose-soft);color:var(--rose-ink)}
.av.a2{background:var(--mint-soft);color:#3D6349}
.av.a3{background:var(--lilac-soft);color:#5D4B7A}
.av.a4{background:var(--butter-soft);color:#8A6014}
html[data-theme="dark"] .av.a2{color:#BEDCC5}
html[data-theme="dark"] .av.a3{color:#D6C9EC}
html[data-theme="dark"] .av.a4{color:#A3B2F0} /* accent: periwinkle */

/* ── progress bar ─────────────────────────────────────────────── */
.meter{height:7px;border-radius:var(--r-pill);background:var(--surf-3);overflow:hidden}
.meter i{display:block;height:100%;border-radius:var(--r-pill);background:var(--butter)}

/* ── rating bar (five nubs, each independently fillable) ─────── */
.ratebar{display:flex;gap:5px}
.ratebar i{display:block;width:26px;height:11px;border-radius:var(--r-pill);background:var(--surf-3);overflow:hidden}
.ratebar i b{display:block;height:100%;background:var(--butter);border-radius:var(--r-pill)}

/* ── list row ─────────────────────────────────────────────────── */
.row{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3)}
.row + .row{border-top:1px solid var(--hair-soft)}
.row .ord{width:18px;flex:0 0 auto;text-align:right;font-size:13px;font-weight:700;color:var(--ink-3)}
.row .cover{width:36px;height:54px;flex:0 0 auto}
.row .t{flex:1;min-width:0}
.row .t h5{margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.012em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t p{margin:2px 0 0;font-size:12.5px;font-weight:540;color:var(--ink-3)}
.row .grip{width:24px;flex:0 0 auto;display:grid;gap:3.5px;padding:0 3px;cursor:grab}
.row .grip i{display:block;height:1.8px;border-radius:var(--r-grip);background:var(--ink-3);opacity:.55}

/* ── tab bar (five-item bottom nav) ──────────────────────────── */
.tabbar{
  flex:0 0 auto;height:84px;padding:9px 6px 0;
  display:flex;align-items:flex-start;
  background:color-mix(in srgb,var(--tabbar) 88%,transparent);
  backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid var(--hair-soft);
  position:relative;z-index:20;
}
.tabbar .t{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;font-weight:640;letter-spacing:.005em;color:var(--ink-3);
}
.tabbar .t svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tabbar .t.on{color:var(--link)}
.homebar{
  position:absolute;bottom:9px;left:50%;transform:translateX(-50%);
  width:140px;height:5px;border-radius:var(--r-pill);background:var(--ink);opacity:.26;
}

/* ── sheet + scrim ────────────────────────────────────────────── */
.scrim{position:absolute;inset:0;background:rgba(46,30,20,.46);z-index:5}
html[data-theme="dark"] .scrim{background:rgba(0,0,0,.48)}
.sheet{
  position:absolute;left:0;right:0;top:54px;bottom:0;z-index:10;
  background:var(--ground);border-radius:var(--r-card) var(--r-card) 0 0;
  box-shadow:0 -2px 0 rgba(255,255,255,.35) inset,0 -18px 40px -12px rgba(60,40,24,.35);
  display:flex;flex-direction:column;overflow:hidden;
}
html[data-theme="dark"] .sheet{box-shadow:0 -2px 0 rgba(255,255,255,.05) inset,0 -18px 40px -12px rgba(0,0,0,.6)}
.grabber{width:38px;height:5px;border-radius:var(--r-pill);background:var(--ink-3);opacity:.4;margin:7px auto 0;flex:0 0 auto}
.sheethead{display:flex;align-items:center;justify-content:flex-end;padding:4px var(--s5) 0}
.xbtn{
  width:30px;height:30px;border-radius:var(--r-pill);background:var(--surf-3);
  display:grid;place-items:center;color:var(--ink-2);
}
.xbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
/* bottom action dock, for use inside a .sheet */
.dock{
  flex:0 0 auto;padding:10px var(--s5) 16px;
  background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:blur(18px);border-top:1px solid var(--hair-soft);
  display:flex;gap:var(--s3);align-items:center;position:relative;
}
.dock .btn{flex:1;height:48px;font-size:16px}

/* ── iPhone frame ─────────────────────────────────────────────── */
.phone{
  width:402px;height:874px;flex:0 0 auto;position:relative;
  border-radius:var(--r-phone);padding:11px;
  background:linear-gradient(160deg,#CBBBA8,#9E8B79 40%,#C4B4A2 68%,#8E7D6C);
  box-shadow:var(--sh-3);
}
@media (max-width:430px){
  .phone{
    --pw:min(402px,calc(100vw - 32px));
    width:var(--pw);height:calc(var(--pw) * 874 / 402);
  }
}
html[data-theme="dark"] .phone{background:linear-gradient(160deg,#5A4C42,#2E2621 42%,#4B3F37 70%,#241E1A)}
.screen{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:var(--r-screen);background:var(--ground);
  display:flex;flex-direction:column;
  transition:background-color var(--d-quick) var(--ease-out-quart);
}
.island{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:118px;height:33px;border-radius:var(--r-pill);background:#100C0A;z-index:40;
}
.status{
  height:54px;flex:0 0 auto;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 26px 4px;font-size:14.5px;font-weight:640;letter-spacing:.01em;color:var(--ink);
  position:relative;z-index:30;
}
.status .glyphs{display:flex;align-items:center;gap:6px}
.status svg{fill:currentColor}
.scroll{flex:1 1 auto;overflow:hidden;position:relative}
.pad{padding:0 var(--s5)}
.navbar{
  position:relative;z-index:20;padding:2px var(--s5) 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
}
.navbar h2{
  margin:0;font-size:31px;line-height:1.12;font-weight:800;letter-spacing:-.028em;
}
.navbar .sub{margin:2px 0 0;font-size:13.5px;font-weight:560;color:var(--ink-3)}
.fade{
  position:absolute;left:0;right:0;bottom:86px;height:34px;pointer-events:none;z-index:15;
  background:linear-gradient(to bottom,transparent,var(--ground));
}

/* Motion extension: shared segmented controls and stagger tokens. */
:root{--r-cover:6px;--r-cover-lg:8px;--r-strip-cover:4px;--r-phone:56px;--r-screen:45px;--r-grip:2px;}
/* Equal tracks make thumb translation exactly selected index × option width. */
/* Section D motion tokens. Spring curves use sampled damped response in JS. */
:root{
  --d-press:100ms;--d-quick:160ms;--d-ui:220ms;--d-sheet:400ms;
  --d-close:260ms;--d-hero:700ms;--d-flip:600ms;--d-reduced:120ms;
  --d-shelf-sort:320ms;--d-shelf-rearrange:260ms;
  --d-loader-delay:400ms;--d-loader-hold:300ms;--d-loader-exit:100ms;
  --d-long-wait:4000ms;--d-cancel:10000ms;
  --stagger-step:40ms;--stagger-dur:var(--d-ui);
  --ease-press:var(--ease-out-quart);--ease-quick:var(--ease-out-quart);
  --ease-ui:var(--ease-out-quart);--ease-close:var(--ease-out-quart);
  --ease-flip:cubic-bezier(.4,0,.2,1);
  /* linear() interpolates sampled spring response; this is not constant-speed easing. */
  --ease-sheet:linear(0.00000,0.12808,0.36530,0.58991,0.76076,0.87480,0.94336,0.98050,0.99817,1.00495,1.00632,1.00544,1.00394,1.00254,1.00149,1.00079,1.00038,1.00015,1.00005,1.00001,1.00000);
  --ease-hero:var(--ease-sheet);
  --spring-damping:.85;--spring-response:.40;
}
@media(prefers-reduced-motion:reduce){
  :root{--d-shelf-sort:0ms;--d-shelf-rearrange:0ms;--d-press:0ms;--d-quick:0ms;--d-ui:0ms;--d-sheet:0ms;--d-close:0ms;--d-hero:0ms;--d-flip:0ms;--stagger-step:0ms}
}
.seg{position:relative;display:inline-grid;grid-template-columns:repeat(var(--seg-count,2),minmax(0,1fr));gap:0;background:var(--surf-3);border-radius:var(--r-pill);padding:3px;isolation:isolate}
.seg button{position:relative;z-index:1;min-width:44px;min-height:44px;border-radius:var(--r-pill);padding:0 11px;font-size:13.5px;font-weight:660;color:transparent;background:transparent;touch-action:manipulation}
.seg button[aria-pressed]{color:transparent}
.seg button[aria-pressed="true"]{background:transparent;box-shadow:none}
.seg button::before,.seg button::after{content:attr(data-seg-label) / "";position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-on-accent);border-radius:inherit;opacity:0;transition:opacity var(--d-ui) var(--ease-out-quart);pointer-events:none}
.seg button::before{color:var(--ink-2);opacity:1}
.seg button[aria-pressed="true"]::before{opacity:0}
.seg button[aria-pressed="true"]::after{opacity:1}
.seg button:focus-visible{outline:2px solid var(--link);outline-offset:2px}.seg button:focus-visible::before,.seg button:focus-visible::after{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:var(--s1)}
.seg-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;border-radius:var(--r-pill);background:var(--butter);box-shadow:inset 0 0 0 1px var(--ink-3);pointer-events:none;transition:transform var(--d-ui) var(--ease-out-quart)}
@media(prefers-reduced-motion:reduce){.seg-thumb,.seg button::before,.seg button::after{transition:none!important;will-change:auto!important}}

/* Shared description attribution uses the label rhythm. */
.description-credit{font-size:var(--t-label);color:var(--ink-3);margin-top:var(--s2);line-height:var(--s4)}
.description-credit a{position:relative;color:var(--link);text-decoration:underline;text-decoration-thickness:from-font;text-underline-position:from-font}
.description-credit a::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}

/* Appearance presets: source colors remain the locked kit tokens in each mode. */
:root{
  --preset-ground:#FBF3E7;
  --preset-board:#F4E9DA;
  --preset-butter:#A9B7EE;
  --preset-butter-soft:#E7EBFB;
}
html[data-theme="dark"]{
  --preset-ground:#241C17;
  --preset-board:#1B1512;
  --preset-butter:#A3B2F0;
  --preset-butter-soft:#2F3552;
}

:root{
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1);
  --ease-in-out-quart:cubic-bezier(0.76,0,0.24,1);
}
html[data-ground="milky"]{--ground:var(--preset-ground)}
html[data-ground="oat"]{--ground:var(--surf-2);--board:var(--surf-2)}
html[data-ground="blush"]{--ground:var(--rose-soft);--board:var(--rose-soft)}
html[data-ground="sage"]{--ground:var(--mint-soft);--board:var(--mint-soft)}
html[data-ground="slate"]{--ground:var(--preset-butter-soft);--board:var(--preset-butter-soft)}
html[data-accent="periwinkle"]{--butter:var(--preset-butter)}
html[data-accent="peach"]{--butter:var(--peach)}
html[data-accent="rose"]{--butter:var(--rose)}
html[data-accent="mint"]{--butter:var(--mint)}
html[data-accent="lavender"]{--butter:color-mix(in srgb,var(--preset-butter) 70%,var(--rose) 30%)}

/* R1 accessibility extension: reviewed overrides; locked base above stays intact. */
:root{
  --ink-3:#6C5B4E;
  --initial-ink:#1B1512;
  --initial-paper:#FFFCF7;
  --star-empty:color-mix(in srgb,var(--hair) 35%,var(--ink) 65%);
}
html[data-theme="dark"]{--ink-3:#B49E8C}
/* Native press states also work on touch; gesture surfaces retain their own touch-action. */
:where(button,[role="button"],a[href],summary){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:is(.btn,.btn-soft,.chip,.mini,.seg button,.iconbtn,a.card,.card a,.club-summary,.club-vote,.club-pin,.result a,.shelf-row .b,.filter,.genre-choice,.close-dialog,.club-filter,.marks,.thread-toggle,.feed-earlier,.feed-cover-button,#gossip-source button,.upload,.bs-sheet-symbol-button,.bs-sheet-shelf-action,.bs-sheet-more,.bs-sheet-close,.bs-reads button):active:not(:disabled):not([aria-disabled="true"]){ text-decoration:underline; }
@media (prefers-reduced-motion:no-preference){
  :is(.btn,.btn-soft,.chip,.mini,.seg button,.iconbtn,a.card,.card a,.club-summary,.club-vote,.club-pin,.result a,.shelf-row .b,.bs-book,.filter,.genre-choice,.close-dialog,.club-filter,.marks,.thread-toggle,.feed-earlier,.feed-cover-button,#gossip-source button,.upload,.bs-sheet-symbol-button,.bs-sheet-shelf-action,.bs-sheet-more,.bs-sheet-close,.bs-reads button){transition:transform var(--d-press) var(--ease-press)}
  :is(.btn,.btn-soft,.chip,.mini,.seg button,.iconbtn,a.card,.card a,.club-summary,.club-vote,.club-pin,.result a,.shelf-row .b,.bs-book,.filter,.genre-choice,.close-dialog,.club-filter,.marks,.thread-toggle,.feed-earlier,.feed-cover-button,#gossip-source button,.upload,.bs-sheet-symbol-button,.bs-sheet-shelf-action,.bs-sheet-more,.bs-sheet-close,.bs-reads button):active:not(:focus-visible):not(:disabled):not([aria-disabled="true"]){transform:scale(.97)}
}
:is(.btn,.btn-soft,.chip,.mini,.seg button,.iconbtn,a.card,.card a,.club-summary,.club-vote,.club-pin,.result a,.shelf-row .b,.bs-book,.filter,.genre-choice,.close-dialog,.club-filter,.marks,.thread-toggle,.feed-earlier,.feed-cover-button,#gossip-source button,.upload,.bs-sheet-symbol-button,.bs-sheet-shelf-action,.bs-sheet-more,.bs-sheet-close,.bs-reads button):focus-visible{transition:none!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  :is(.btn,.btn-soft,.chip,.mini,.seg button,.iconbtn,a.card,.card a,.club-summary,.club-vote,.club-pin,.result a,.shelf-row .b,.bs-book,.filter,.genre-choice,.close-dialog,.club-filter,.marks,.thread-toggle,.feed-earlier,.feed-cover-button,#gossip-source button,.upload,.bs-sheet-symbol-button,.bs-sheet-shelf-action,.bs-sheet-more,.bs-sheet-close,.bs-reads button){transition:none!important;transform:none!important;will-change:auto}
}

/* PR system extension: owner-approved 2026-09-09. Base palette stays locked. */
:root{
  --t-greet:26px;
  --t-title:22px;
  --t-sect:18px;
  --t-body:15px;
  --t-label:12.5px;
  --h-track:-.02em;
  --r-row:12px;
  --card-elev:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(55,43,35,.06),0 1px 2px rgba(55,43,35,.06),0 8px 24px -16px rgba(55,43,35,.35);
  --card-elev-dark:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.3),0 10px 28px -16px rgba(0,0,0,.7);
  /* Pin chart hues to periwinkle across accent presets. */
  --ramp-0:var(--surf-3);
  --ramp-1:#7280D3;
  --ramp-2:#5462C0;
  --ramp-3:#3E4A8E;
  --ramp-4:#2C356A;
}
html[data-theme="dark"]{
  --card-elev:var(--card-elev-dark);
  --ramp-1:#6E7CCF;
  --ramp-2:#8390DE;
  --ramp-3:#97A5E8;
  --ramp-4:#A9B7EE;
}
body{font-size:var(--t-body);letter-spacing:normal;transition:none}
h1,.navbar h2{font-size:var(--t-title);letter-spacing:var(--h-track)}
h2,h3,h4,.secttl h3{font-size:var(--t-sect);letter-spacing:var(--h-track)}
.greeting{font-size:var(--t-greet);letter-spacing:var(--h-track)}
.row .t h5{font-size:var(--t-body);letter-spacing:normal}
.secttl a,.chip,.seg button,.toggle button,.row .t p,.row .ord,.tabbar .t,.navbar .sub{font-size:var(--t-label);letter-spacing:normal}
.btn,.avatar,.av,.status,.dock .btn{font-size:var(--t-body);letter-spacing:normal}
.card,.sheet,html[data-theme="dark"] .sheet{border:0;box-shadow:var(--card-elev)}
.card:not(.motion-grow),.sheet:not(.motion-grow),html[data-theme="dark"] .sheet:not(.motion-grow){transition:none}
.chip{border-radius:var(--r-chip);padding:0 var(--s4)}
.btn{border-radius:var(--r-row)}
.iconbtn,.avatar,.av,.xbtn{border-radius:50%}
.btn,.seg button,.toggle button,.xbtn{min-height:44px;touch-action:manipulation}
.xbtn{width:44px;height:44px}
button.chip,a.chip{min-height:44px;touch-action:manipulation}
/* Instant theme changes; motion uses only transform/opacity and the shared easing. */
.btn,.seg button,.toggle button{transition:transform var(--d-press) var(--ease-out-quart)}
.screen{transition:none}
@media (prefers-reduced-motion:reduce){
  .btn,.seg button,.toggle button{transition:none;transform:none;will-change:auto}
}

/* Zero remains a zero count, with a visible ground marker. */
body .mcol .bar.zero{min-height:2px;background:var(--ramp-0)}

/* Find: keep reader chips in a 22px band below the cover, in DOM order. */
.results-grid .cover-wrap .circle-avatars{position:relative;inset:auto;height:22px;margin-block:0;flex-wrap:nowrap}

/* Loop 12 accessibility extension: reviewed overrides (owner 2026-09-10); locked base and earlier extensions stay intact.
   A01/rule M: interactive score nubs get an ink-3 outline, fill stays the accent.
   A02: link ink passes 4.5:1 on every selectable ground (Blush needed a 10% ink mix in light).
   A04: semantic error/success inks replace page literals. */
:root{--preset-link:#5462C0;--blush-link:#515DB0;--danger:var(--rose-ink);--success:var(--ink-2)}
html[data-theme="dark"]{--preset-link:#B8C2F5;--blush-link:var(--preset-link)}
html[data-ground="milky"]{--link:var(--preset-link)}
html[data-ground="oat"]{--link:var(--preset-link)}
html[data-ground="blush"]{--link:var(--blush-link)}
html[data-ground="sage"]{--link:var(--preset-link)}
html[data-ground="slate"]{--link:var(--preset-link)}
.ratebar-input i{outline:1px solid var(--ink-3)}

/* Batch 1 foundations: outer safe areas add to existing gutters; Reader chrome is local. */
html{overscroll-behavior-y:contain}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
:where(h1,h2,h3,h4,h5,h6):not(.prose *){text-wrap:balance}
p:not(.prose *){text-wrap:pretty}

/* Shared toast appearance, reused verbatim from shelves.html and book.html. */
.toast{ width:max-content; max-width:calc(100vw - 32px); position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--ground); padding:10px 18px; border-radius:var(--r-pill); font-size:var(--t-label); font-weight:650; z-index:50; opacity:0; pointer-events:none; transition:opacity var(--d-ui) var(--ease-out-quart); letter-spacing:normal; }
.toast.show{ opacity:1; }
.toast.error{ background:var(--rose-ink); }
.toast.action{ pointer-events:auto; display:inline-flex; align-items:center; gap:10px; padding:var(--s1) var(--s1) var(--s1) 18px; border-radius:var(--r-card); }
.toast .toast-undo{ background:none; border:1px solid currentColor; color:inherit; border-radius:var(--r-pill); padding:3px 10px; font:inherit; font-weight:700; cursor:pointer; touch-action:manipulation; }
body .toast .toast-undo{ flex:0 0 auto; inline-size:max-content; min-inline-size:64px; min-block-size:44px; padding-inline:var(--s4); white-space:nowrap; }
body .toast[data-instant="true"]{ transition:none!important; }

/* Batch 2: toast clocks require pointer access; keyboard and reduced motion stay static. */
.toast{transition:opacity var(--d-quick) var(--ease-out-quart)!important}
.toast.show{transition-duration:var(--d-ui)!important}
body .toast.show{pointer-events:none;bottom:calc(var(--s6) + env(safe-area-inset-bottom))}
body .toast.show.action{pointer-events:auto}
.toast:focus-within,body:has(:focus-visible) .toast,.seg.seg-instant *,.seg.seg-instant button::before,.seg.seg-instant button::after{transition:none!important}
@media(prefers-reduced-motion:reduce){.toast{transition:none!important}}

/* Batch 3: inset cover edges and stronger optional control boundaries. */
:where(img.cover,.cover img,.front img,.detail-art img,.super img,.avatar img){outline:1px solid oklch(0 0 0 / .1);outline-offset:-1px}
html[data-theme="dark"] :where(img.cover,.cover img,.front img,.detail-art img,.super img,.avatar img){outline-color:oklch(1 0 0 / .1)}
@media(prefers-contrast:more){
  :is(button,input,select,textarea,[role="button"],a.btn){outline:2px solid var(--ink);outline-offset:0}
  :is(button,input,select,textarea,[role="button"],a.btn):focus-visible{outline-offset:2px}
}

/* Page-specific disabled treatments retain precedence over this fallback. */
:where(.btn,.btn-soft,.btn-ghost):is(:disabled,[aria-disabled="true"]){opacity:.5;cursor:not-allowed}

/* Audio / full-text badge sits below the cover so it never covers the artwork. */
[data-media-work]:has(.cover-media-badge){margin-bottom:calc(22px + var(--s1))}
.cover-media-badge{position:absolute;top:calc(100% + var(--s1));right:0;display:flex;gap:var(--s1);align-items:center;justify-content:center;min-width:22px;height:22px;padding-inline:var(--s1);border-radius:var(--r-pill);background:var(--surf);color:var(--ink);pointer-events:none}