/* Books — "The Study" production stylesheet, from the approved prototype (design@ef806c9 docs/design/prototype/src/styles.css).
   CSP-safe: textures are files under /static/tex/ (img-src 'self'), fonts are self-hosted, no rule depends on inline style. */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/static/fonts/EBGaramond-latin.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("/static/fonts/EBGaramond-Italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/SourceSans3-latin.woff2") format("woff2"); }
:root {
  --font-display:"EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:"Source Sans 3", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* daylight study */
  --bg:#F3ECDF;--surface:#FBF8F1;--surface-raised:#FFFDF8;--surface-sunk:#EAE1CF;
  --ink:#2A1F18;--ink-2: #5E4D3D;--ink-3: #6F5C49;
  --line:#DCCFB8;--line-strong:#CDBEA3;--control:#9C8A70;
  --brass:#7A5A1F;--brass-fill:#B48A4A;--brass-hi:#D7B370;--brass-lo:#8A6A2E;
  --green:#2C4A3A;--green-ink:#2A5A41;--green-wash:#E3EADF;
  --oxblood:#7E2A27;--oxblood-ink:#7E2A27;--oxblood-wash:#F3E1DC;
  --amber-ink:#7A5A1F;--amber-wash:#F4E8CC;
  --on-fill:#F7F1E4;
  --focus:#7A5A1F;--star:#9C7434;
  --leather:#24382D;--leather-2: #1C2D24;--leather-ink:#EFE6D2;--leather-muted:#BDB298;--leather-active:#2F4A3B;
  --wood-1: #6A4429;--wood-2: #4B2F1C;--wood-3: #3A2414;--wood-edge:#845A37;--wood-back:#2E1D12;
  --shelf-light:rgba(255, 240, 210, .10);
  --room-glow:radial-gradient(1200px 700px at 0% 0%, rgba(255, 252, 240, .7), transparent 60%);
  --shadow-1: 0 1px 2px rgba(42, 31, 24, .06), 0 2px 8px -2px rgba(42, 31, 24, .10);
  --shadow-2: 0 1px 2px rgba(42, 31, 24, .08), 0 12px 32px -12px rgba(42, 31, 24, .30);
  --shadow-3: 0 24px 64px -16px rgba(42, 31, 24, .45);
  --r-xs:2px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-pill:999px;
  --s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--s6: 32px;--s7: 48px;--s8: 64px;
  --sidebar-w:248px;--content-max:1240px;
  --ease:cubic-bezier(.2, .7, .2, 1);
  color-scheme:light;
}
[data-theme="dark"] {
  /* Evening slate: cool architectural chrome; warmth lives in brass, leather, oxblood and oak. */
  --bg:#1F262E;--surface:#28313B;--surface-raised:#323D49;--surface-sunk:#1A2027;
  --ink:#F3E9D7;--ink-2: #C9BDAB;--ink-3: #AFA697;
  --line:#43505E;--line-strong:#536272;--control:#7B8997;
  --brass:#D8B474;--brass-fill:#B48A4A;--brass-hi:#E9CC8E;--brass-lo:#9C7A3E;
  --green:#3D6A52;--green-ink:#9CC6AC;--green-wash:#23362E;
  --oxblood:#8E3434;--oxblood-ink:#E9A09A;--oxblood-wash:#3A2528;
  --amber-ink:#E2C084;--amber-wash:#3A3427;
  --focus:#E2C084;--star:#D7AE6A;
  --leather:#202E34;--leather-2: #182329;--leather-ink:#F1E7D3;--leather-muted:#B9B0A0;--leather-active:#30424A;
  --wood-1: #775337;--wood-2: #5A3B26;--wood-3: #422B1B;--wood-edge:#916A48;--wood-back:#2B211A;
  --shelf-light:rgba(255, 202, 132, .13);
  --room-glow:radial-gradient(900px 600px at 0% 100%, rgba(180, 138, 74, .10), transparent 66%), radial-gradient(760px 520px at 100% 0%, rgba(92, 122, 142, .12), transparent 64%);
  --shadow-1: 0 1px 2px rgba(7, 11, 15, .44), 0 3px 10px -3px rgba(7, 11, 15, .48);
  --shadow-2: 0 1px 2px rgba(7, 11, 15, .52), 0 16px 40px -14px rgba(7, 11, 15, .76);
  --shadow-3: 0 28px 70px -16px rgba(5, 8, 11, .84);
  color-scheme:dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.5 var(--font-body);color:var(--ink);background:var(--bg);background-image:var(--room-glow);background-attachment:fixed;font-feature-settings:"kern", "liga";-webkit-font-smoothing:antialiased}
h1, h2, h3, h4{font-family:var(--font-display);font-weight:500;margin:0;letter-spacing:-.005em;color:var(--ink)}
p{margin:0}
a{color:var(--green-ink);text-underline-offset:3px}
button, input, select, textarea{font:inherit;color:inherit}
img{max-width:100%}
svg{width:1.15em;height:1.15em;flex:none;vertical-align:-0.2em}
.card-head a{display:inline-flex;align-items:center;gap:2px}
.num{font-variant-numeric:tabular-nums lining-nums}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--surface-raised);color:var(--ink);padding:10px 14px;border-radius:var(--r-sm);box-shadow:var(--shadow-2)}
.skip:focus{top:12px}

/* ---------- type scale ---------- */
.t-display-l{font-family:var(--font-display);font-size:42px;line-height:1.08;font-weight:500;letter-spacing:-.012em}
.t-display-m{font-family:var(--font-display);font-size:28px;line-height:1.15;font-weight:500}
.t-display-s{font-family:var(--font-display);font-size:21px;line-height:1.25;font-weight:500}
.t-body-l{font-size:18px;line-height:1.55}
.t-body-s{font-size:14px;line-height:1.45}
.t-label{font:600 12px/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.t-caption{font-size:13px;line-height:1.4;color:var(--ink-3)}
.t-italic{font-family:var(--font-display);font-style:italic}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;color:var(--leather-ink);background:
  radial-gradient(120% 60% at 30% 0%, rgba(255,255,255,.05), transparent 60%),
  url("/static/tex/leather.svg"),
  linear-gradient(180deg, var(--leather), var(--leather-2));
  box-shadow:inset -1px 0 0 rgba(0,0,0,.35), inset -6px 0 12px -6px rgba(0,0,0,.35);z-index:5}
.sidebar::after{content:"";position:absolute;inset:10px;border:1px dashed rgba(215, 179, 112, .28);border-radius:8px;pointer-events:none}
.brand{display:flex;align-items:center;gap:12px;padding:26px 22px 18px;text-decoration:none;color:inherit}
.crest{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:600 22px/1 var(--font-display);color:#2A1F18;background:radial-gradient(circle at 35% 30%, #F0D9A0, #B48A4A 55%, #7E5E26);box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(0,0,0,.4)}
.brand-name{font:500 23px/1 var(--font-display);letter-spacing:.01em}
.brand-sub{font-size:12px;color:var(--leather-muted);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.nav{padding:8px 14px;overflow-y:auto;flex:1}
.nav-group{margin:14px 8px 6px;font:600 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--leather-muted)}
.nav a{display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 12px;border-radius:8px;color:var(--leather-ink);text-decoration:none;font-size:15px;position:relative}
.nav a svg{width:18px;height:18px;opacity:.85;flex:none}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a[aria-current="page"]{background:var(--leather-active);box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.3)}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:-2px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--brass-hi)}
.nav .count{margin-left:auto;font-size:12px;color:var(--leather-muted);font-variant-numeric:tabular-nums}
.nameplate{margin:10px 14px 18px;padding:12px;border-radius:10px;display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.18);border:1px solid rgba(215,179,112,.25);color:inherit;text-align:left;cursor:pointer;width:calc(100% - 28px)}
.nameplate:hover{background:rgba(0,0,0,.28)}
.nameplate .who{font:500 17px/1.1 var(--font-display)}
.nameplate .sub{font-size:12px;color:var(--leather-muted)}
.nameplate .chev{margin-left:auto;opacity:.7;width:16px;height:16px;flex:none}
.nameplate > span{min-width:0}
.whose{white-space:nowrap}
.whose > svg{width:16px;height:16px;color:var(--ink-3)}
.shelf-list .groups{display:grid;gap:22px}
.mobile-only{display:none}

.mono{width:34px;height:34px;flex:none;border-radius:50%;display:inline-grid;place-items:center;font:600 16px/1 var(--font-display);color:var(--on-fill);box-shadow:inset 0 0 0 2px rgba(215,179,112,.7), 0 1px 3px rgba(0,0,0,.3)}
.mono.green{background:#2C4A3A} .mono.oxblood{background:#7E2A27}
.mono.sm{width:24px;height:24px;font-size:12px;box-shadow:inset 0 0 0 1.5px rgba(215,179,112,.7)}
.mono.lg{width:56px;height:56px;font-size:26px}

.main-col{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:12px;padding:14px 40px;background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .search{flex:1;max-width:520px;position:relative}
.topbar .search input{width:100%;height:40px;padding:0 14px 0 40px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface)}
.topbar .search svg{position:absolute;left:14px;top:11px;width:18px;height:18px;color:var(--ink-3)}
.topbar .spacer{flex:1}
.whose{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface);font-size:14px;cursor:pointer;min-height:40px}
.whose b{font-weight:600}
.mobile-head{display:none}
main{padding:32px 40px 80px;width:100%;max-width:calc(var(--content-max) + 80px)}
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.page-head .kicker{margin-bottom:6px}
.page-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.tabbar{display:none}

/* ---------- buttons & controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-weight:600;font-size:14.5px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s, border-color .15s, transform .15s}
.btn svg{width:17px;height:17px}
.btn:hover{border-color:var(--control);background:var(--surface-raised)}
.btn.primary{background:linear-gradient(180deg, color-mix(in srgb, var(--green) 88%, white), var(--green));border-color:color-mix(in srgb, var(--green) 70%, black);color:var(--on-fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.25)}
.btn.primary:hover{background:var(--green)}
.btn.brass{background:linear-gradient(180deg, #E3C487, #B48A4A);border-color:#8A6A2E;color:#2A1F18;box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.25)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--surface-sunk)}
.btn.danger{color:var(--oxblood-ink)}
.btn.sm{min-height:32px;padding:0 12px;font-size:13.5px}
.btn.icon{padding:0;width:40px}
.btn[disabled], .btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
.seg{display:inline-flex;padding:3px;border-radius:var(--r-sm);background:var(--surface-sunk);border:1px solid var(--line)}
.seg button{min-height:34px;padding:0 14px;border:0;border-radius:4px;background:transparent;font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg button svg{width:16px;height:16px}
.seg button[aria-pressed="true"], .seg button[aria-selected="true"]{background:var(--surface-raised);color:var(--ink);box-shadow:var(--shadow-1)}
.field{display:grid;gap:6px}
.field label, .field .lbl{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.input, select.input, textarea.input{width:100%;min-height:42px;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--control);background:var(--surface-raised);color:var(--ink)}
textarea.input{min-height:84px;resize:vertical}
.input::placeholder{color:var(--ink-3)}
.input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.input[aria-invalid="true"]{border-color:var(--oxblood-ink);box-shadow:0 0 0 1px var(--oxblood-ink)}
.hint{font-size:13px;color:var(--ink-3)}
.err{font-size:13.5px;color:var(--oxblood-ink);display:flex;gap:6px;align-items:flex-start}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface);font-size:13.5px;color:var(--ink);white-space:nowrap}
.chip.filter{background:var(--green-wash);border-color:color-mix(in srgb, var(--green-ink) 35%, transparent)}
.chip.filter b{font-weight:600}
.chip button{border:0;background:transparent;padding:0;width:22px;height:22px;display:grid;place-items:center;cursor:pointer;border-radius:50%;color:var(--ink-2)}
.chip button:hover{background:rgba(0,0,0,.08)}
.chip svg{width:14px;height:14px}
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-pill);font:600 11.5px/1 var(--font-body);letter-spacing:.04em;text-transform:uppercase}
.badge svg{width:12px;height:12px}
.badge.shared{color:var(--brass);background:var(--amber-wash);border:1px solid color-mix(in srgb, var(--brass) 35%, transparent)}
.badge.smart{color:var(--green-ink);background:var(--green-wash);border:1px solid color-mix(in srgb, var(--green-ink) 30%, transparent)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.status.reading{color:var(--green-ink)} .status.read{color:var(--brass)} .status.tbr{color:var(--ink-2)} .status.dnf{color:var(--oxblood-ink)}
.status.tbr::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.stars{display:inline-flex;gap:1px;color:var(--star);vertical-align:middle}
.stars svg{width:15px;height:15px;stroke:var(--star);stroke-width:1.2px}
.stars svg.off{fill:none;stroke:var(--control);stroke-width:1.5px}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:22px;position:relative}
.card-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.card-head .t-display-s{flex:1}
.card-head a{font-size:14px;font-weight:600;text-decoration:none}
.rule{height:1px;background:var(--line);border:0;margin:16px 0}

/* ---------- wood & bookcase (the hero) ---------- */
.wood{background:
  url("/static/tex/wood.svg"),
  linear-gradient(180deg, var(--wood-1), var(--wood-2))}
.case{position:relative;border-radius:6px 6px 4px 4px;padding:0 18px 0;color:#F1E6D2;
  background:
    url("/static/tex/stile-left.svg") left top / 18px 800px repeat-y,
    url("/static/tex/stile-right.svg") right top / 18px 800px repeat-y,
    linear-gradient(90deg, var(--wood-2), var(--wood-1) 1.2%, var(--wood-2) 2.4%, var(--wood-back) 2.6%, var(--wood-back) 97.4%, var(--wood-2) 97.6%, var(--wood-1) 98.8%, var(--wood-2));
  box-shadow:var(--shadow-3), inset 0 0 0 1px rgba(0,0,0,.4)}
.case-crown{height:30px;margin:0 -26px;border-radius:4px 4px 2px 2px;position:relative;box-shadow:0 6px 10px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,170,.25), inset 0 -3px 0 rgba(0,0,0,.25)}
.case-crown::after{content:"";position:absolute;left:8px;right:8px;bottom:-6px;height:6px;background:linear-gradient(180deg, var(--wood-3), transparent)}
.case-plinth{height:26px;margin:0 -10px;border-radius:2px 2px 6px 6px;box-shadow:inset 0 2px 0 rgba(255,220,170,.18), 0 10px 20px -8px rgba(0,0,0,.6)}
.case-plate{position:absolute;top:4px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;padding:3px 16px;border-radius:3px;background:linear-gradient(180deg, #ECD39A, #B48A4A 60%, #8A6A2E);color:#2A1F18;font:600 12px/16px var(--font-display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.5);z-index:2}
.bay{position:relative;padding-top:22px;background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 28px),
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 6%, transparent 94%, rgba(0,0,0,.45)),
    url("/static/tex/back.svg"),
    var(--wood-back)}
.bay::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 0%, var(--shelf-light), transparent 70%);pointer-events:none}
.row{list-style:none;margin:0;padding:0 10px;display:flex;align-items:flex-end;gap:1px;min-height:120px;position:relative;content-visibility:auto;contain-intrinsic-size:auto 240px}
.board{height:20px;position:relative;z-index:1;margin:0 -18px;border-radius:1px;
  background: url("/static/tex/board.svg"),
    linear-gradient(180deg, var(--wood-edge) 0, var(--wood-1) 4px, var(--wood-2) 70%, var(--wood-3));
  box-shadow:0 -2px 0 rgba(0,0,0,.35), 0 8px 14px -4px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,170,.28)}
.board::before{content:"";position:absolute;left:18px;right:18px;top:-5px;height:5px;background:linear-gradient(180deg, transparent, rgba(0,0,0,.4))}

/* spines */
.spine{--c:#444;--t:#F1E6D2;--w:28px;--h:200px;position:relative;flex:none;width:var(--w);height:var(--h);padding:0;margin:0;border:0;cursor:pointer;color:var(--t);font:500 13px/1 var(--font-display);text-align:center;
  background:
    linear-gradient(90deg, rgba(0,0,0,.42) 0, rgba(255,255,255,.14) 14%, rgba(255,255,255,.04) 34%, rgba(0,0,0,0) 55%, rgba(0,0,0,.14) 80%, rgba(0,0,0,.46) 100%),
    var(--c);
  border-radius:2px 2px 1px 1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.4), 1px 0 1px rgba(0,0,0,.35);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden}
.spine.paperback{border-radius:1px;background:linear-gradient(90deg, rgba(0,0,0,.30) 0, rgba(255,255,255,.08) 10%, rgba(0,0,0,0) 40%, rgba(0,0,0,.08) 85%, rgba(0,0,0,.34) 100%), var(--c)}
.spine .st{writing-mode:vertical-rl;flex:1 1 auto;min-height:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:10px 0 6px;font-size:clamp(10px, calc(var(--w) * .42), 15px);letter-spacing:.02em;line-height:1}
.spine .sa{writing-mode:vertical-rl;flex:none;max-height:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 9px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;opacity:.82;padding-bottom:10px}
.spine.band::before, .spine.band::after{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg, #7E5E26, #E9CC8E, #9C7A3E);opacity:.9}
.spine.band::before{top:12px;box-shadow:0 4px 0 -0.5px rgba(233,204,142,.55)}
.spine.band::after{bottom:12px;box-shadow:0 -4px 0 -0.5px rgba(233,204,142,.55)}
.spine.band .st{padding-top:22px} .spine.band .sa{padding-bottom:22px}
.spine.label .st{flex:none;max-height:60%;margin-top:18px;padding:8px 2px;background:color-mix(in srgb, var(--c) 30%, #1b130d);color:#F1E6D2;box-shadow:inset 0 0 0 1px rgba(233,204,142,.6);width:calc(100% - 6px)}
.spine.penguin{background:linear-gradient(90deg, rgba(0,0,0,.30) 0, rgba(255,255,255,.08) 10%, rgba(0,0,0,0) 40%, rgba(0,0,0,.08) 85%, rgba(0,0,0,.34) 100%), linear-gradient(180deg, var(--c) 0 16%, #EDE6D6 16% 84%, var(--c) 84%);color:#1d1712}
.spine.penguin .st{font-family:var(--font-body);font-weight:600;font-size:clamp(9px, calc(var(--w) * .36), 12px);letter-spacing:.04em;padding-top:18%}
.spine.penguin .sa{opacity:.7;padding-bottom:18%}
.spine.digital::after{content:attr(data-fmt);position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font:700 8px/1 var(--font-body);letter-spacing:.06em;color:#2A1F18;background:var(--brass-hi);padding:2px 3px;border-radius:2px}
.spine:hover, .spine:focus-visible{transform:translateY(-10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 18px -6px rgba(0,0,0,.7);z-index:2}
.spine:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.spine.lean{transform-origin:bottom left;transform:rotate(-7deg)}
.spine.lean:hover, .spine.lean:focus-visible{transform:rotate(-7deg) translateY(-6px)}
.spine.ghost{background:rgba(255,240,210,.04) !important;box-shadow:inset 0 0 0 1px rgba(233,204,142,.45);color:rgba(241,230,210,.72);border-radius:2px}
.spine.ghost::before, .spine.ghost::after{display:none}
.spine.ghost .st{background:none;box-shadow:none;color:inherit}

/* covers on shelves */
.row.covers{gap:14px;padding:0 16px;align-items:flex-end}
.cover{--c:#444;--t:#F1E6D2;position:relative;flex:none;width:var(--cw, 104px);aspect-ratio:2 / 3;border:0;padding:0;cursor:pointer;border-radius:1px 3px 3px 1px;overflow:hidden;color:var(--t);text-align:center;background:var(--c);container-type:inline-size;
  box-shadow:inset 3px 0 0 rgba(0,0,0,.25), inset 4px 0 0 rgba(255,255,255,.12), 0 1px 1px rgba(0,0,0,.4), 2px 6px 14px -4px rgba(0,0,0,.65);transition:transform .22s var(--ease);display:flex;flex-direction:column;font-family:var(--font-display)}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg, rgba(255,255,255,.12) 0, rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.18));pointer-events:none}
.cover:hover, .cover:focus-visible{transform:translateY(-6px) rotate(-.6deg)}
.cover .cv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:stretch}
.cover .ct{display:block;font-size:12.5cqw;line-height:1.05;font-weight:600;padding:0 8cqw;overflow-wrap:break-word;hyphens:auto}
.cover .ca{display:block;font:600 6.6cqw/1.1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;opacity:.85;padding:0 8cqw}
.cover.classic .cv{justify-content:center;gap:8cqw}
.cover.classic::before{content:"";position:absolute;inset:6cqw;border:1px solid color-mix(in srgb, var(--t) 55%, transparent);outline:1px solid color-mix(in srgb, var(--t) 30%, transparent);outline-offset:-4px}
.cover.penguin{background:linear-gradient(180deg, var(--c) 0 30%, #EDE6D6 30% 70%, var(--c) 70%);color:#1d1712}
.cover.penguin .cv{justify-content:center;gap:6cqw}
.cover.penguin .ct{font-family:var(--font-body);font-weight:700;font-size:10.5cqw}
.cover.modern .cv{justify-content:space-between;text-align:left}
.cover.modern .ct{font-family:var(--font-body);font-weight:700;font-size:14cqw;letter-spacing:-.01em;margin-top:12cqw}
.cover.modern .ca{margin-bottom:10cqw}
.cover.cloth{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px)}
.cover.cloth .cv{justify-content:flex-start}
.cover.cloth .ct{margin:20cqw 12cqw 0;padding:7cqw 4cqw;border:1px solid color-mix(in srgb, var(--t) 60%, transparent)}
.cover.cloth .ca{margin-top:auto;padding-bottom:12cqw}
.cover-flat{box-shadow:var(--shadow-2), inset 3px 0 0 rgba(0,0,0,.25)}
.cover-flat:hover{transform:none}

/* ---------- home ---------- */
.home-grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:20px}
.greet{margin-bottom:28px}
.greet h1{font-size:46px;line-height:1.05}
.greet h1 em{color:var(--brass)}
.now-reading{grid-column:span 7}
.challenge-card{grid-column:span 5}
.pick-card{grid-column:span 5}
.recent-card{grid-column:span 7}
.nr-list{display:grid;gap:16px}
.other-reading-strip{margin-top:18px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border-radius:8px;background:var(--tone-wash, var(--oxblood-wash));border:1px solid color-mix(in srgb, var(--tone-ink, var(--oxblood-ink)) 28%, transparent)}
.other-reading-strip .other-books{display:flex;gap:14px;align-items:center;min-width:0;overflow:hidden}
.other-reading-strip .other-book{min-width:0;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.other-reading-strip .other-book b{font:500 16px/1.2 var(--font-display)}
.other-reading-strip .other-book span{display:block;color:var(--ink-2);font-size:12.5px}
.nr-item{display:grid;grid-template-columns:76px 1fr auto;gap:16px;align-items:center;padding:8px;margin:-8px;border-radius:8px;color:inherit}
.nr-item:hover{background:var(--surface-sunk)}
.nr-item .meta{min-width:0}
.nr-item .title{display:block;font:500 21px/1.15 var(--font-display);color:var(--ink);text-decoration:none}
.nr-item .title:hover{text-decoration:underline}
.seg button[aria-checked="true"]{background:var(--surface-raised);color:var(--ink);box-shadow:var(--shadow-1)}
.nr-item .by{color:var(--ink-2);font-size:14.5px}
.mini-shelf{position:relative;padding:18px 18px 0;border-radius:8px;overflow:hidden;background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 24px), var(--wood-back)}
.mini-shelf .row{min-height:0;padding:0;gap:12px;content-visibility:visible}
.mini-shelf .board{margin:0 -18px}
.pick{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:start}
.pick .title{font:500 25px/1.1 var(--font-display)}

/* ---------- shelves screen ---------- */
.shelves-layout{display:grid;grid-template-columns:264px 1fr;gap:28px;align-items:start}
.shelves-layout > *, .home-grid > *, .stats-grid > *, .builder > *, .reading-split > *{min-width:0}
.shelf-list{position:sticky;top:96px;display:grid;gap:18px}
.shelf-list h2{font:600 11.5px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 8px 10px;display:flex;align-items:center;gap:6px}
.shelf-list ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.shelf-list a{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:15px}
.shelf-list a:hover{background:var(--surface-sunk)}
.shelf-list a[aria-current="true"]{background:var(--surface);box-shadow:var(--shadow-1), inset 0 0 0 1px var(--line);font-weight:600}
.shelf-list .sw{background:var(--c);width:6px;height:22px;border-radius:1px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.shelf-list .cnt{margin-left:auto;color:var(--ink-3);font-size:13px;font-variant-numeric:tabular-nums}
.shelf-list svg{width:15px;height:15px;flex:none}
.shelf-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.shelf-head h1{font-size:38px}
.shelf-head .actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.shelf-meta{display:flex;gap:14px;align-items:center;color:var(--ink-2);font-size:14px;margin:-8px 0 20px;flex-wrap:wrap}
.legend{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--ink-3);margin-top:14px;flex-wrap:wrap}
.hover-card{position:fixed;z-index:50;pointer-events:none;min-width:220px;max-width:280px;padding:12px 14px;border-radius:10px;background:var(--surface-raised);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow-3);opacity:0;transform:translateY(4px);transition:opacity .12s, transform .12s}
.hover-card.on{opacity:1;transform:none}
.hover-card .ht{font:500 18px/1.15 var(--font-display)}

/* ---------- library ---------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .search-lg{flex:1 1 320px;position:relative}
.toolbar .search-lg input{height:44px;padding-left:42px;border-radius:var(--r-sm)}
.toolbar .search-lg svg{position:absolute;left:14px;top:13px;width:18px;height:18px;color:var(--ink-3)}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 0 18px;border-bottom:1px solid var(--line);margin-bottom:20px}
.grid-books{display:grid;grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));gap:28px 22px}
.gb{text-decoration:none;color:inherit;display:grid;gap:8px}
.gb .cover{--cw:100%;width:100%}
.gb .gt{font:500 16.5px/1.2 var(--font-display)}
.gb .ga{font-size:13.5px;color:var(--ink-2)}
.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-1)}
.table th{text-align:left;font:600 11.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface-sunk);white-space:nowrap}
.table td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14.5px}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:color-mix(in srgb, var(--surface-sunk) 60%, transparent)}
.table .tt{font:500 17px/1.2 var(--font-display);text-decoration:none;color:var(--ink)}
.table .thumb{--cw:34px;width:34px}
.table .thumb .ct, .table .thumb .ca{display:none}
.fmt-icons{display:inline-flex;gap:4px}
.fmt{display:inline-grid;place-items:center;height:22px;min-width:22px;padding:0 5px;border-radius:4px;font:700 10.5px/1 var(--font-body);letter-spacing:.04em;border:1px solid var(--line-strong);color:var(--ink-2);background:var(--surface-raised)}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:20px;color:var(--ink-2);font-size:14px}

/* ---------- book detail ---------- */
.book-hero{display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:start}
.book-hero .cover{--cw:260px}

.book-title{font-size:48px;line-height:1.04}
.book-by{font:italic 400 23px/1.3 var(--font-display);color:var(--ink-2);margin-top:6px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0;font-size:14.5px;color:var(--ink-2)}
.facts b{color:var(--ink);font-weight:600}
.reading-split{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;margin-top:28px}
.reading-panel h3{display:flex;align-items:center;gap:10px;font-size:22px}
.reading-panel.theirs{background:color-mix(in srgb, var(--tone-wash, var(--oxblood-wash)) 62%, var(--surface));border-color:color-mix(in srgb, var(--tone-ink, var(--oxblood-ink)) 30%, var(--line));box-shadow:var(--shadow-1)}
.reading-panel.theirs h3 .badge{margin-left:auto;font-family:var(--font-body)}
.other-reading-data{margin-top:16px !important;padding-top:14px;border-top:1px solid color-mix(in srgb, var(--tone-ink, var(--oxblood-ink)) 24%, var(--line))}
.other-reading-data dd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.other-reading-note{margin-top:16px;padding-top:12px;border-top:1px dashed color-mix(in srgb, var(--oxblood-ink) 26%, var(--line))}
.empty.compact{padding:24px 12px 16px}
.status-picker{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.status-picker button{min-height:38px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface-raised);font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer}
.status-picker button[aria-checked="true"]{background:var(--green);border-color:var(--green);color:var(--on-fill)}
.rate{display:inline-flex;gap:2px}
.rate button{width:34px;height:34px;border:0;background:transparent;padding:3px;cursor:pointer;color:transparent;border-radius:4px}
.rate button svg{stroke:var(--control);stroke-width:1.5px}
.rate button.on{color:var(--star)}
.rate button.on svg{stroke:var(--star)}
.rate button svg{width:100%;height:100%}
.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px}
.dl dt{color:var(--ink-3)} .dl dd{margin:0}
dl.dl{margin:0}
.sec-rows{display:grid}
.sec-row{display:grid;grid-template-columns:200px 1fr auto;gap:6px 18px;align-items:center;padding:14px 0;border-top:1px solid var(--line);font-size:14.5px}
.sec-row:first-child{border-top:0;padding-top:0}
.copies td code, .mono-text{font:500 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;color:var(--ink-2);letter-spacing:.02em}
.section-title{display:flex;align-items:center;gap:12px;margin:40px 0 14px}
.section-title h2{font-size:26px}
.section-title .actions{margin-left:auto}
.form-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px 20px}
.form-grid .span2{grid-column:span 2}
.edit-copy{display:grid;grid-template-columns:150px 1fr 110px 150px 40px;gap:10px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-raised)}
.sticky-actions{position:sticky;bottom:0;display:flex;gap:10px;justify-content:flex-end;padding:14px 0;background:linear-gradient(180deg, transparent, var(--bg) 30%);margin-top:24px}

/* ---------- rule builder ---------- */
.rules{display:grid;gap:10px}
.rule-row{display:grid;grid-template-columns:34px 170px 150px 1fr 40px;gap:10px;align-items:center;padding:10px;border-radius:8px;background:var(--surface-raised);border:1px solid var(--line)}
.rule-row .joiner{font:600 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--brass);text-align:center}
.value-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:42px;padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--control);background:var(--surface)}
.value-chips .chip{height:28px}
.builder{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}

/* ---------- add ---------- */
.add-wrap{max-width:860px}
.isbn-box{display:flex;gap:10px}
.isbn-box .input{font:500 22px/1 ui-monospace, Menlo, Consolas, monospace;letter-spacing:.08em;min-height:56px}
.match{display:grid;grid-template-columns:120px 1fr;gap:22px}
.fmt-pick{display:flex;gap:8px;flex-wrap:wrap}
.fmt-pick button{min-height:40px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface-raised);cursor:pointer;font-weight:600;font-size:14px;display:inline-flex;gap:8px;align-items:center}
.fmt-pick button[aria-checked="true"]{border-color:var(--green-ink);box-shadow:inset 0 0 0 1px var(--green-ink);background:var(--green-wash);color:var(--green-ink)}
.notice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:8px;font-size:14.5px;border:1px solid}
.notice svg{width:18px;height:18px;flex:none;margin-top:2px}
.notice.info{background:var(--amber-wash);border-color:color-mix(in srgb, var(--brass) 35%, transparent);color:var(--ink)}
.notice.error{background:var(--oxblood-wash);border-color:color-mix(in srgb, var(--oxblood-ink) 35%, transparent);color:var(--ink)}
.notice.error svg{color:var(--oxblood-ink)}
.notice.ok{background:var(--green-wash);border-color:color-mix(in srgb, var(--green-ink) 35%, transparent)}
.notice.ok svg{color:var(--green-ink)}
.result-list{display:grid;gap:10px}
.result{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--surface-raised)}


/* ---------- wishlist ---------- */
.wish-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:18px}
.wish{display:grid;grid-template-columns:84px 1fr;gap:16px}
.wish .tt{font:500 20px/1.15 var(--font-display)}
.ribbon{position:absolute;top:14px;right:-6px;padding:4px 10px 4px 12px;font:700 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--on-fill);background:var(--oxblood);box-shadow:0 2px 4px rgba(0,0,0,.25)}
.ribbon::after{content:"";position:absolute;right:0;bottom:-6px;border-top:6px solid #4a1513;border-right:6px solid transparent}

.stats-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:20px}

/* ---------- sign-in ---------- */
.signin{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;padding:24px;background:var(--wood-back)}
.signin .backdrop{position:absolute;inset:-20px;filter:blur(2px) saturate(.9);opacity:.9}
.signin .backdrop .case{box-shadow:none;border-radius:0}
.signin::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 45%, rgba(20,12,6,.35), rgba(12,7,3,.88));pointer-events:none}
.signin-card{position:relative;z-index:2;width:min(420px, 100%);padding:40px 36px 30px;border-radius:14px;color:var(--leather-ink);
  background:radial-gradient(120% 70% at 30% 0%, rgba(255,255,255,.06), transparent 60%), url("/static/tex/leather-card.svg"), linear-gradient(180deg, #24382D, #1A2A21);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.85), inset 0 0 0 1px rgba(215,179,112,.35)}
.signin-card::before{content:"";position:absolute;inset:9px;border:1px dashed rgba(215,179,112,.35);border-radius:9px;pointer-events:none}
.signin-card h1{color:var(--leather-ink);font-size:34px;text-align:center}
.signin-card .sub{text-align:center;color:var(--leather-muted);margin:6px 0 26px;font-size:15px}
.signin-card .field label{color:#E2D6BD}
.signin-card .input{background:#F7F1E4;color:#2A1F18;border-color:#9C8A70}
.signin-card .input::placeholder{color:#6F5C49}
.signin-card .btn.brass{width:100%;min-height:46px;font-size:16px}
.signin-card .foot{margin-top:22px;text-align:center;font-size:13px;color:var(--leather-muted)}
.signin-card .err{color:#F2B2A8}
.signin-card .crest{margin:0 auto 14px;width:54px;height:54px;font-size:28px}
.signin-card :focus-visible{outline-color:#E9CC8E}
.otp{font:600 30px/1 ui-monospace, Menlo, Consolas, monospace !important;letter-spacing:.5em;text-align:center;padding-left:.5em !important;min-height:60px !important}

/* ---------- account / menus / dialogs ---------- */
.menu{position:absolute;right:40px;top:62px;z-index:30;width:320px;padding:8px;border-radius:12px;background:var(--surface-raised);border:1px solid var(--line-strong);box-shadow:var(--shadow-3)}
.menu .mh{display:flex;gap:12px;align-items:center;padding:10px}
.menu a, .menu button.mi{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 10px;border:0;background:transparent;border-radius:6px;text-decoration:none;color:var(--ink);font-size:14.5px;cursor:pointer;text-align:left}
.menu a:hover, .menu button.mi:hover{background:var(--surface-sunk)}
.menu svg{width:17px;height:17px;color:var(--ink-2)}
dialog{border:0;padding:0;border-radius:14px;background:var(--surface-raised);color:var(--ink);box-shadow:var(--shadow-3);width:min(480px, calc(100vw - 32px))}
dialog::backdrop{background:rgba(20, 12, 6, .55);backdrop-filter:blur(2px)}
.dlg-body{padding:26px;display:grid;gap:16px}
.dlg-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 26px;border-top:1px solid var(--line);background:var(--surface)}
.switch{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.switch input{appearance:none;width:42px;height:24px;border-radius:12px;background:var(--control);position:relative;cursor:pointer;flex:none;transition:background .15s;margin:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch input:checked{background:var(--green)}
.switch input:checked::after{transform:translateX(18px)}
.lens{display:inline-flex;gap:8px;align-items:center;padding:6px 12px 6px 6px;border-radius:var(--r-pill);font-size:13.5px;background:var(--tone-wash, var(--oxblood-wash));border:1px solid color-mix(in srgb, var(--tone-ink, var(--oxblood-ink)) 30%, transparent)}

/* ---------- states ---------- */
.empty{text-align:center;padding:40px 24px;display:grid;justify-items:center;gap:10px}
.empty .t-display-s{margin-top:4px}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .home-grid > *{grid-column:span 12 !important}
  .shelves-layout{grid-template-columns:220px 1fr;gap:20px}
  .reading-split, .stats-grid, .builder{grid-template-columns:1fr}
}
@media (max-width: 860px) {
  :root{--sidebar-w:0px}
  .shell{grid-template-columns:1fr}
  .sidebar, .topbar{display:none}
  .mobile-head{display:flex;position:sticky;top:0;z-index:6;align-items:center;gap:10px;padding:10px 16px;min-height:56px;color:var(--leather-ink);background:linear-gradient(180deg, var(--leather), var(--leather-2));box-shadow:0 2px 10px rgba(0,0,0,.25)}
  .mobile-head .crest{width:32px;height:32px;font-size:18px}
  .mobile-head .ttl{font:500 21px/1 var(--font-display);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-head .btn.icon{color:var(--leather-ink);background:transparent;border-color:rgba(215,179,112,.35);width:44px;min-height:44px}
  .mobile-head .whose-m{border:0;background:transparent;padding:0;cursor:pointer;min-width:44px;min-height:44px;display:grid;place-items:center}
  main{padding:20px 16px 110px}
  .tabbar{display:grid;grid-template-columns:repeat(5, 1fr);position:fixed;left:0;right:0;bottom:0;z-index:10;padding:6px 6px calc(6px + env(safe-area-inset-bottom));color:var(--leather-ink);background:linear-gradient(180deg, var(--leather), var(--leather-2));box-shadow:0 -2px 12px rgba(0,0,0,.3);border-top:1px solid rgba(215,179,112,.3)}
  .tabbar a{display:grid;justify-items:center;gap:3px;min-height:52px;padding-top:6px;text-decoration:none;color:var(--leather-muted);font-size:11.5px;font-weight:600;border-radius:8px}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a[aria-current="page"]{color:var(--leather-ink);background:rgba(255,255,255,.06)}
  .tabbar a[aria-current="page"] svg{color:var(--brass-hi)}
  .tabbar .add-tab span.circ{width:46px;height:46px;margin-top:-18px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg, #E3C487, #B48A4A);color:#2A1F18;box-shadow:0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5)}
  .greet h1{font-size:34px}
  .t-display-l, .shelf-head h1{font-size:32px}
  .shelves-layout{grid-template-columns:1fr}
  .shelf-list{position:static;display:block}
  .shelf-list .groups{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 8px;margin:0 -16px;scrollbar-width:none}
  .shelf-list .groups > div, .shelf-list .groups ul, .shelf-list .groups li, .shelf-list .groups > .mobile-only{display:contents}
  .shelf-list .groups .mobile-only a{border-style:dashed}
  .shelf-list .groups h2{display:none}
  .shelf-list .groups a{flex:none;white-space:nowrap;border:1px solid var(--line-strong);border-radius:var(--r-pill);min-height:44px;padding:0 14px;background:var(--surface)}
  .shelf-list .groups a[aria-current="true"]{background:var(--green);color:var(--on-fill);border-color:var(--green)}
  .shelf-list .groups a .cnt{color:inherit;margin-left:4px}
  .shelf-list .desktop-only{display:none !important}
  .shelf-head{margin-top:14px}
  .shelf-head .actions{margin-left:0;width:100%}
  .shelf-head .actions select{flex:1;min-width:0}
  .case{padding:0 10px}
  .case-crown{margin:0 -14px} .board{margin:0 -10px}
  .row{padding:0 4px}
  .row.covers{gap:10px;padding:0 8px}
  .book-hero{grid-template-columns:1fr;gap:20px}
  .book-hero .cover-wrap{display:flex;justify-content:center}
  .book-hero .cover{--cw:180px;width:180px !important}
  .book-title{font-size:34px;text-align:center} .book-by{text-align:center;font-size:20px}
  .facts{justify-content:center}
  .form-grid{grid-template-columns:1fr} .form-grid .span2{grid-column:auto}
  .edit-copy{grid-template-columns:1fr 1fr}
  .rule-row{grid-template-columns:1fr 1fr 40px}
  .rule-row .joiner{grid-column:1 / -1;text-align:left}
  .rule-row .value-chips{grid-column:1 / -1;grid-row:3}
  .table.responsive thead{display:none}
  .table.responsive tr{display:grid;grid-template-columns:40px 1fr auto;gap:2px 12px;padding:12px;border-bottom:1px solid var(--line)}
  .table.responsive td{padding:0;border:0}
  .table.responsive td.hide-m{display:none}
  .table.responsive td:first-child{grid-row:span 3}
  .menu{right:8px;left:8px;width:auto;top:60px;position:fixed}
  .pick{grid-template-columns:90px 1fr}
  .page-head .actions{margin-left:0}
  .isbn-box{flex-direction:column}
  .match{grid-template-columns:90px 1fr;gap:16px}
  .wish-grid{grid-template-columns:1fr}
  .copies-table{display:block}
  .table.copies.responsive tr{grid-template-columns:1fr 1fr auto;align-items:center}
  .table.copies.responsive td:first-child{grid-row:auto}
  .table.copies.responsive td:nth-child(2){grid-column:1 / 3;grid-row:2}
  .table.copies.responsive td:last-child{grid-column:3;grid-row:1 / 3}
  .mini-shelf .row > li:nth-child(n+5){display:none !important}
  .sec-row{grid-template-columns:1fr}
  .nr-item{grid-template-columns:60px 1fr}
  .nr-item > :last-child{grid-column:2}
  .other-reading-strip{grid-template-columns:auto 1fr;align-items:start}
  .other-reading-strip > .badge{grid-column:2;justify-self:start}
  .other-reading-strip .other-books{display:grid;gap:8px;margin-top:4px}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .spine:hover, .spine:focus-visible, .cover:hover, .cover:focus-visible{transform:none}
  .spine.lean:hover, .spine.lean:focus-visible{transform:rotate(-7deg)}
}
@media (forced-colors: active) {
  .spine, .cover{border:1px solid CanvasText;forced-color-adjust:none}
  .btn, .chip, .seg button{border:1px solid ButtonText}
}

/* Production additions (E2): utilities replacing the prototype's inline styles, and components it did not draw
   (Sort these, reorder mode, toast, offline bar). Same tokens, no new visual language. */
.li-contents{display:contents}
/* `hidden` must win over component display rules (.notice, .err, .chip… set display): scripts toggle it. */
[hidden]{display:none !important}
.plain-list{list-style:none;margin:0;padding:0}
.stack-6, .stack-8, .stack-10, .stack-12, .stack-14, .stack-16{display:grid;align-content:start}
.stack-6{gap:6px} .stack-8{gap:8px} .stack-10{gap:10px} .stack-12{gap:12px} .stack-14{gap:14px} .stack-16{gap:16px}
.row-flex{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row-flex.nowrap{flex-wrap:nowrap;gap:14px} .row-flex.end{justify-content:flex-end}
.push{margin-left:auto} .minw0{min-width:0} .measure{max-width:62ch} .center{justify-items:center;text-align:center}
.right{text-align:right} .start{justify-self:start} .narrow{max-width:520px} .pad-10{padding:6px 10px}
.mt-4{margin-top:4px} .mt-6{margin-top:6px} .mt-12{margin-top:12px} .mt-14{margin-top:14px} .mt-16{margin-top:16px}
.mt-18{margin-top:18px} .mt-20{margin-top:20px} .mt-22{margin-top:22px} .mt-32{margin-top:32px}
.mb-10{margin-bottom:10px} .mb-14{margin-bottom:14px} .mb-20{margin-bottom:20px}
/* text tints; not .green/.oxblood, which are the monogram tone classes */
.ink-green{color:var(--green-ink)} .ink-oxblood{color:var(--oxblood-ink)}
hr.rule.tight{margin:4px 0}
fieldset.bare{border:0;padding:0;margin-left:0;margin-right:0}
fieldset.bare legend, .lbl{font-size:13.5px;font-weight:600;color:var(--ink-2)}
fieldset.bare legend{margin-bottom:8px}
.inline-form{display:inline-flex;margin:0}
.input.auto{width:auto;min-height:44px}
.seg a.seg-a{min-height:34px;padding:0 14px;border-radius:4px;font-weight:600;font-size:14px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.seg a.seg-a svg{width:16px;height:16px}
.seg a.seg-a[aria-current="true"], .seg a.seg-a[aria-selected="true"]{background:var(--surface-raised);color:var(--ink);box-shadow:var(--shadow-1)}
.chip .chip-x{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2)}
.chip .chip-x:hover{background:rgba(0,0,0,.08)}
a.chip{text-decoration:none}
.input.add-filter, select.chip-select{width:auto;min-height:30px;padding:2px 10px;border-style:dashed;font-size:13.5px;border-radius:999px}
.crumbs{margin-bottom:18px}
.kicker-link{text-decoration:none}
.book-sub{font:400 22px/1.25 var(--font-display);color:var(--ink-2);margin-top:4px}

/* covers: width classes (the prototype passed --cw inline) and the cached image over the cloth cover */
.cover.w34, .cover.thumb{--cw:34px} .cover.w40{--cw:40px} .cover.w54{--cw:54px} .cover.w76{--cw:76px}
.cover.w80{--cw:80px} .cover.w84{--cw:84px} .cover.w110{--cw:110px} .cover.w120{--cw:120px}
.cover.w140{--cw:140px} .cover.w260{--cw:260px}
.cover.thumb .ct, .cover.thumb .ca, .cover.w40 .ca, .cover.w34 .ca{display:none}
.cover > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cover > img.broken{display:none}
.cover.has-img::before{display:none}
.stars svg.half .half-off{fill:none;stroke:var(--control);stroke-width:1.5px}
.stars svg.half .half-on{fill:currentColor}

/* monograms */
.mono.brass{background:#7A5A1F}
.mono.xs{width:18px;height:18px;font-size:10px;box-shadow:inset 0 0 0 1px rgba(215,179,112,.7);vertical-align:-4px}

/* nav extras */
.nav .badge-count, .badge-count{margin-left:auto;min-width:22px;height:20px;padding:0 7px;display:inline-grid;place-items:center;border-radius:999px;background:var(--brass-hi);color:#2A1F18;font:700 12px/1 var(--font-body)}
.brand > span:last-child{display:grid}
.tabbar a{position:relative}
.tab-dot{position:absolute;top:8px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--brass-hi)}
.menu-note{padding:0 10px 8px}
.menu form{margin:0}
.when-dark{display:none}
[data-theme="dark"] .when-dark{display:inline} [data-theme="dark"] svg.when-dark{display:inline-block}
[data-theme="dark"] .when-light{display:none}
.badge.unconfirmed{color:var(--brass);background:var(--amber-wash);border:1px dashed color-mix(in srgb, var(--brass) 55%, transparent);margin-left:6px;vertical-align:2px}

/* home */
.challenge-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.ring{position:relative;width:148px;height:148px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .ring-track{stroke:var(--surface-sunk)}
.ring .ring-label{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .big{font:500 46px/1 var(--font-display)}
.pace{display:grid;gap:10px;flex:1;min-width:180px}
.pace-bar{height:10px;border-radius:6px;background:var(--surface-sunk);position:relative;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.pace-bar .fill{position:absolute;inset:0 auto 0 0;width:var(--pct, 0%);border-radius:6px;background:linear-gradient(90deg, var(--brass-lo), var(--brass-hi))}
.pace-bar .mark{position:absolute;top:-5px;left:var(--pct, 0%);width:2px;height:20px;background:var(--ink);border-radius:1px}
.mini-shelf .row.covers{justify-content:flex-start}
.recent-list{margin-top:14px;display:grid;gap:8px}
.recent-list li{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.recent-title{font:500 17px/1.2 var(--font-display);color:var(--ink);text-decoration:none}

/* bookcase extras */
.case.covers-mode .row{gap:14px;padding:0 16px}
.case .empty.on-wood p{color:#E9DCC4} .case .empty.on-wood .t-display-s{color:#F1E6D2}
.case.mini .row{min-height:0}
.backdrop-spine{cursor:default}
.case.reordering .spine{cursor:grab}
.case.reordering .spine.picked{transform:translateY(-14px);box-shadow:0 0 0 2px var(--brass-hi), 0 14px 22px -6px rgba(0,0,0,.8)}
.spine.dragging{opacity:.45}
.reorder-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border-radius:8px;background:var(--amber-wash);border:1px solid color-mix(in srgb, var(--brass) 35%, transparent)}
.hover-card .hc-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hover-card hr{margin:10px 0}
.compact-notice{padding:6px 10px;font-size:13.5px}
.preview-count{margin:6px 0 2px}
.preview-list{margin-top:14px;display:grid;gap:6px}

/* forms and book pages */
.rate-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.rate .star-shape{fill:none;stroke:var(--control);stroke-width:1.5px}
.rate .star-half{fill:none}
.rate button.on .star-shape{fill:var(--star);stroke:var(--star)}
.rate button.half .star-half{fill:var(--star)} .rate button.half .star-shape{stroke:var(--star)}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.top-rule{padding-top:12px;border-top:1px solid var(--line)}
.btn.big{min-height:56px;padding:0 22px}
.isbn-box .input.search-text{font:500 19px/1 var(--font-body);letter-spacing:0}
.result-title{font:500 18px/1.2 var(--font-display)}
.book-details summary{cursor:pointer;color:var(--green-ink);font-weight:600}
.edit-top{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.cover-col{display:grid;gap:10px;justify-items:center;max-width:240px}
.cover-replace summary{list-style:none} .cover-replace summary::-webkit-details-marker{display:none}
.no-copy{align-self:center}
.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}
.two-col > *{min-width:0}
.sec-details summary{list-style:none} .sec-details summary::-webkit-details-marker{display:none}
.sec-details[open]{grid-column:1 / -1}
.more-card{padding:8px;display:grid}
.more-card a{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:16px}
.more-card a:hover{background:var(--surface-sunk)}
.center-col{display:grid;justify-items:center;text-align:center;gap:6px}
.qr{margin:0;padding:12px;background:#fff;border-radius:8px}
.qr svg{width:200px;height:200px}
.secret{font-size:15px;word-break:break-all}
.signin-card .notice.on-leather, .notice.on-leather{background:rgba(126,42,39,.35);border-color:rgba(242,178,168,.4);color:#F7F1E4;margin-bottom:16px}
.signin-card .hint.on-leather{color:#CDBEA3}
.signin-card .foot a{color:#E2D6BD}
.signin .backdrop .case-body{min-height:100vh}

/* Sort these (Addendum 2): built from list rows, chips, buttons and notices */
.big-badge{height:30px;padding:0 12px;font-size:12.5px}
.sort-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 4px 12px;border-bottom:1px solid var(--line)}
.check{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--green);margin:0}
.sort-list{margin-bottom:90px}
.sort-row{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--line);border-radius:6px;overflow:hidden}
.sort-row:focus-visible, .sort-row.focused{outline:2px solid var(--focus);outline-offset:-2px}
.sort-row.selected{background:var(--green-wash)}
.sort-row.leaving{opacity:.3;transition:opacity .2s}
.sort-face{display:grid;grid-template-columns:28px 40px 1fr;gap:12px;align-items:center;min-width:0;background:inherit}
.sort-face .tt{font:500 18px/1.2 var(--font-display);color:var(--ink);text-decoration:none}
.sort-actions{display:flex;gap:6px}
.bulkbar{position:sticky;bottom:16px;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:var(--surface-raised);border:1px solid var(--line-strong);box-shadow:var(--shadow-3)}
.show-m{display:none}

/* toast and offline */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:min(520px, calc(100vw - 32px));padding:12px 16px;border-radius:10px;background:var(--surface-raised);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow-3);font-size:14.5px;display:flex;gap:10px;align-items:center}
.toast.error{border-color:color-mix(in srgb, var(--oxblood-ink) 50%, transparent)}
.offline-bar{position:sticky;top:0;z-index:20;border-radius:0}
/* offline: write controls ([data-write], or inside one) keep their label; app.js disables them */
body.offline [data-write]:is(a, button, input, select, textarea), body.offline [data-write] :is(a, button, input, select, textarea, label){opacity:.45;filter:saturate(.4);cursor:not-allowed}

@media (max-width: 1180px){.two-col{grid-template-columns:1fr} }
@media (max-width: 860px) {
  .edit-top{grid-template-columns:1fr} .cover-col{max-width:none}
  .ring{width:120px;height:120px} .ring .big{font-size:38px}
  .hide-m{display:none} .show-m{display:inline}
  .sort-row{grid-template-columns:1fr;touch-action:pan-y;padding:0}
  .sort-face{position:relative;z-index:1;padding:10px 6px;background:var(--bg);transition:transform .2s var(--ease)}
  .sort-row.selected .sort-face{background:var(--green-wash)}
  .sort-row.swiped .sort-face{transform:translateX(-100%)}
  .sort-actions{position:absolute;inset:0;justify-content:flex-end;align-items:center;padding:0 8px;background:var(--surface-sunk)}
  .sort-actions .btn{min-height:44px}
  .bulkbar{bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .input.auto{flex:1;min-width:0}
  .toolbar .inline-form{flex:1}
}
.value-chips .input{width:auto;min-height:32px;padding:4px 8px}
.value-chips .input.num{width:110px}
.value-chips .input.add-filter{min-height:30px;padding:2px 10px;min-width:140px}

/* E2 remediation (design-E2-adfcbbc; see README "Bookcase states"). B3: unpacked case (before shelf.js, or no JS). */
.cloth-0{--c:#7a2020} .cloth-1{--c:#1f3556} .cloth-2{--c:#2c4a3a} .cloth-3{--c:#16181b} .cloth-4{--c:#e8dec6} .cloth-5{--c:#c67037}
.cloth-6{--c:#d5a33b} .cloth-7{--c:#56294a} .cloth-8{--c:#2f5d6b} .cloth-9{--c:#8b8f78} .cloth-10{--c:#a23a2b} .cloth-11{--c:#f1ede3}
.cloth-12{--c:#272a3d} .cloth-13{--c:#6b4829} .cloth-14{--c:#b8b09c} .cloth-15{--c:#3c5a82} .cloth-16{--c:#c9b07a} .cloth-17{--c:#8b2d38}
.cloth-18{--c:#465238} .cloth-19{--c:#915629} .cloth-20{--c:#0f3b3a} .cloth-21{--c:#d9cdb0}
[class*=cloth-]{--t:#F3EAD8}
:is(.cloth-4, .cloth-5, .cloth-6, .cloth-9, .cloth-11, .cloth-14, .cloth-16, .cloth-21){--t:#1d1712}
.sw-16{--w:16px} .sw-20{--w:20px} .sw-24{--w:24px} .sw-28{--w:28px} .sw-32{--w:32px} .sw-36{--w:36px} .sw-40{--w:40px}
.sw-44{--w:44px} .sw-48{--w:48px} .sw-52{--w:52px} .sw-56{--w:56px}
.sh-176{--h:176px} .sh-192{--h:192px} .sh-208{--h:208px} .sh-224{--h:224px} .sh-240{--h:240px}
.spine.narrow .sa{display:none}
.case:not(.packed){--pitch:284px}
.case.covers-mode:not(.packed){--pitch:200px}
.case:not(.packed) .bay{padding-top:0}
.case:not(.packed) .row{flex-wrap:wrap;gap:0;min-height:0;margin:0 -18px;padding:0 28px;content-visibility:visible;
  background:repeating-linear-gradient(transparent 0 calc(var(--pitch) - 25px), rgba(0,0,0,.4) calc(var(--pitch) - 20px), var(--wood-edge) 0, var(--wood-1) calc(var(--pitch) - 16px), var(--wood-3) var(--pitch))}
.case:not(.packed) .row > li{display:flex;align-items:flex-end;height:var(--pitch);padding:0 1px 20px 0}
.case.covers-mode:not(.packed) .row > li{padding-right:14px}
.js .case[aria-busy="true"] .row > li{animation:shelf-pulse 1.6s ease-in-out .5s infinite}
@keyframes shelf-pulse{50%{opacity:.6}}
.backdrop-spine.label .st{min-height:30%}
/* P1 */
.wish .tt a{color:var(--ink);text-decoration:none}
.wish .tt a:hover, .wish .tt a:focus-visible{text-decoration:underline}
/* P4: the other person's card, strip and lens wear their colour (--tone-* read above; default oxblood) */
.tone-green{--tone-wash:var(--green-wash);--tone-ink:var(--green-ink)}
.tone-oxblood{--tone-wash:var(--oxblood-wash);--tone-ink:var(--oxblood-ink)}
.tone-brass{--tone-wash:var(--amber-wash);--tone-ink:var(--amber-ink)}
.ink-brass{color:var(--amber-ink)}
/* P7 */
.pick-from{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.input.sm{width:auto;min-height:32px;padding:2px 8px;font-size:13px}
.dice-btn svg{transition:transform .4s var(--ease)}
.dice-btn:hover svg, .dice-btn:focus-visible svg{transform:rotate(90deg)}
.dice-btn:active svg{transform:rotate(180deg)}
/* P8: text links >= 24 px tall (card-head actions 44 px on phone) */
.card-head a, .recent-title, .crumbs a, .kicker-link{min-height:24px;display:inline-flex;align-items:center}
/* P9 */
.input.otp-sm{font:600 22px/1 ui-monospace, Menlo, Consolas, monospace;letter-spacing:.4em;text-align:center;padding-left:.4em;min-height:48px}
@media (max-width: 860px) {
  .case:not(.packed){--pitch:232px}
  .case.covers-mode:not(.packed){--pitch:156px}
  .case:not(.packed) .row{margin:0 -10px;padding:0 14px}
  .case:not(.packed) .spine{width:calc(var(--w) * .8);height:calc(var(--h) * .8)}
  .case.covers-mode:not(.packed) .cover{--cw:76px}
  .card-head a{min-height:44px}
}
@media (prefers-reduced-motion: reduce) {
  .js .case[aria-busy="true"] .row > li{animation:none}
  .dice-btn svg{transform:none !important}
}