/* ═══════════════════════════════════════════════════════════════
   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.45;
  transition:background-color .16s ease-out,color .16s ease-out;
}
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);
  transition:background-color .16s ease-out,box-shadow .16s ease-out;
}

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

/* ── chip ─────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;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 .16s ease-out,filter .16s ease-out;
}
.btn:active{transform:scale(.975)}
.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:12px;padding:3px;
}
.seg button{
  flex:1;height:32px;border-radius:9px;font-size:13.5px;font-weight:660;color:var(--ink-2);
  transition:background-color .16s ease-out,color .16s ease-out,box-shadow .16s ease-out;
}
.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 .16s ease-out,color .16s ease-out;
}
.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:2px;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:22px 22px 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:56px;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:45px;background:var(--ground);
  display:flex;flex-direction:column;
  transition:background-color .16s ease-out;
}
.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));
}