/* Book Club with Claude — a quiet reading room. Serif for the book,
   sans for the tools. Warm paper background. */
:root {
  --paper: #faf8f4;
  --card: #ffffff;
  --ink: #2a2723;
  --muted: #8a8377;
  --line: #e7e1d6;
  --accent: #7a5c3e;        /* worn leather */
  --claude: #d97757;        /* Claude's chair — the warm orange, where it's LARGE */
  --claude-ink: #a8482a;    /* the same colour deepened for SMALL text: 5.46:1 on paper.
                               #d97757 is only 2.94:1 there, so it can't carry 11px type.
                               Same split, same reason, as --gold / --gold-dim. */
  --blur-bg: #f0ebe2;
  /* Matilda's spine (2026-07-19 sketch): the book's board and its gold leaf */
  --spine: #7d3221;
  --spine-band: #521f13;
  --gold: #edad4e;
  --gold-dim: #e6b573;   /* worst-case 4.77:1 on the darkest board — AA for the small labels */
  --shelf-wood: #3a2318;
  --shelf-plank: #24140d;
  --parchment: #f8f2e2;   /* the page inside the book, warmer than --paper */
  --catalog: #efe3c4;     /* old card-catalog stock, a touch tanner than the leaf */
  --radius: 14px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-read: Georgia, "Iowan Old Style", "Palatino", serif;
  --font-type: "Courier New", Courier, ui-monospace, "SFMono-Regular", monospace;
  --font-body: var(--font-read);   /* post-body font; the reading-font pref flips this only */
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
/* When logged in, lock the page to the dynamic viewport height so the thread
   scrolls inside #view and the pinned footer can't rubber-band (the Safari
   gotcha the Chartreux app hit). 100dvh tracks the shrinking mobile toolbar. */
body.authed { height: 100dvh; overflow: hidden; }
#app {
  max-width: 720px; margin: 0 auto;
  min-height: 100dvh; display: flex; flex-direction: column;
  /* reserve the phone's cutout/rounded-corner insets so nothing — even scrolled
     content — slips under the clock/notch or into the curved corners */
  padding-top: env(safe-area-inset-top);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
body.authed #app { height: 100dvh; }

.pilcrow { color: var(--claude-ink); font-weight: 700; }

/* top bar / drawer — book context + nav, above the scroll region */
#bar { flex: none; background: var(--paper); }
#bar[hidden] { display: none; }
.bookbar { border-bottom: 1px solid var(--line); }
.slim { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none;
  padding: 12px 2px; font-size: 14px; }
.slim .bk { font-family: var(--font-read); font-weight: 600; }
.slim .sc { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slim .chev { margin-left: auto; color: var(--accent); transition: transform .2s; flex: none; }
.bookbar.open .slim .chev { transform: rotate(180deg); }
.page-slim { cursor: default; }
.page-slim .back { color: var(--accent); text-decoration: none; font-size: 24px; line-height: 1; margin-right: 8px; cursor: pointer; }

.drawer { display: none; padding: 0 2px 12px; }
.bookbar.open .drawer { display: block; }
.sec-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 4px 4px; }
.sec-list { list-style: none; margin: 0; padding: 0; }
.sec-li { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 9px; cursor: pointer; font-size: 15px; }
.sec-li.sel { background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.06); font-weight: 600; }
/* A section you can see but not enter, because the book is still on the shelf.
   Dimmed and un-clickable — the shape of the book stays legible, including where
   the talk is, which is part of deciding whether to pick it up. */
.sec-li.locked { cursor: default; opacity: .45; }
.sec-li.locked:hover { background: none; }
.sec-li .cnt { margin-left: auto; color: var(--muted); font-size: 12px; }
.drawer-nav { display: flex; gap: 16px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.dnav { display: flex; align-items: center; gap: 4px; text-decoration: none; color: var(--accent); font-weight: 600; font-size: 14px; }

/* the page: thread + composer together, so one frame can wrap both. On the
   phone it's just a transparent flex column and nothing changes. */
#page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* the one scroll region — one section's comments */
.view { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: 8px; padding-bottom: 16px; }

/* generic bits */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 10px 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
button, .btn {
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  background: var(--accent); color: #fff; border: 0; border-radius: 10px;
  padding: 10px 16px; cursor: pointer;
}
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
button:disabled { opacity: .5; cursor: default; }
input, textarea, select {
  /* 16px min: iOS Safari auto-zooms (and stays zoomed) when you focus a field
     smaller than 16px — that was the "screen left zoomed in" bug. */
  font-family: var(--font-ui); font-size: 16px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
}
textarea { min-height: 74px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
.row { display: flex; gap: 8px; align-items: center; }
.err { color: #b23a2e; font-size: 13px; margin-top: 6px; }

/* login */
.login { max-width: 340px; margin: 12vh auto 0; text-align: center; }
.login .lede { font-family: var(--font-read); font-size: 17px; color: var(--muted); margin-bottom: 20px; }

/* book header */
.book-head h2 { font-family: var(--font-read); font-size: 24px; margin: 0 0 2px; }
.book-head .by { color: var(--muted); font-style: italic; }
.frontier-note { font-size: 13px; color: var(--accent); margin-top: 8px; }

/* the thread */
.msg { display: flex; gap: 10px; margin: 14px 0; }
.avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 15px;
  background: var(--accent);
}
.avatar.claude { background: var(--claude); font-size: 20px; }
.avatar.has-img { background-size: cover; background-position: center; color: transparent; }
.bubble { flex: 1; }
.byline { font-size: 13px; font-weight: 600; }
.byline .tag { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
.byline .when { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
/* the whole byline is the collapse toggle — big, obvious target */
.byline-toggle { cursor: pointer; user-select: none; display: inline-flex; align-items: center;
  margin: -3px -6px 0; padding: 3px 6px; border-radius: 7px; transition: background .12s; }
.byline-toggle:hover { background: var(--line); }
.byline .caret { color: var(--accent); margin-right: 7px; font-size: 15px; line-height: 1; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 1.5; margin-top: 2px; white-space: pre-wrap; }
.body.claude { color: #3a2c24; }   /* Claude's posts read in a warm ink, not the old violet-black */

/* A deactivated author reads ghostly: the PERSON fades (avatar desaturates, name
   greys and turns italic) but their WORDS stay fully legible — a post is never
   orphaned or hidden just because its author left the table. */
.msg.inactive .avatar { opacity: .45; filter: grayscale(.75); }
.msg.inactive .byline { color: var(--muted); font-style: italic; }

/* nested replies live in a .msg-children box under their parent — one indent +
   thread line per level, so collapsing a post folds the whole box with it */
.msg-children { margin-left: 21px; border-left: 2px solid rgba(122, 92, 62, .18); padding-left: 13px; }
.msg-children:empty { display: none; }
.msg-children[hidden] { display: none; }
/* past two levels, stop stepping right — deeper replies sit flush with their parent */
.msg-children.flat { margin-left: 0; border-left: 0; padding-left: 0; }
/* the "· N replies" hint shown on a collapsed post */
.fold-hint { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
/* the quiet Reply / Edit affordances under a post */
.msg-actions { display: flex; gap: 14px; margin-top: 2px; }
.msg-actions[hidden] { display: none; }
.reply-link { background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 3px 0 0; }
.reply-link:hover { color: var(--accent); text-decoration: underline; }
/* the inline reply / edit boxes that drop in under a post */
.reply-box, .edit-box { margin: 6px 0 14px; }
.reply-box textarea, .edit-box textarea { min-height: 52px; }
/* the quiet "· edited" marker in a byline */
.byline .edited { font-style: italic; }

/* a blurred post is a single muted line — a fog mark carries the carrot, no body */
.blurred-line { color: var(--muted); }
.byline .fog { margin-right: 7px; font-size: 13px; }
.confession-badge { font-size: 11px; color: var(--claude-ink); font-weight: 700; letter-spacing: .04em; }

/* the pinned bottom footer — slim by default, taps open into the full box.
   safe-area padding keeps it clear of the phone's curved corner / home bar */
#foot { flex: none; background: var(--paper); border-top: 1px solid var(--line);
  padding: 0 0 max(12px, env(safe-area-inset-bottom)); }
#foot[hidden] { display: none; }
.c-slim { padding: 14px 2px; color: var(--muted); font-size: 14px; cursor: pointer; }
.c-full { display: none; padding: 10px 0 6px; }
/* no manual grip — the box auto-grows upward as you type (see composer()) */
.c-full textarea { resize: none; }
.composer.open .c-full { display: block; }
.composer.open .c-slim { display: none; }
/* Post (fixed) + a morphing second slot, each half-width so Post never resizes.
   The second slot is "Hide this chapter/story" when the field is empty and
   "Cancel" once you start typing — same button, so nothing jumps. */
.c-actions { display: flex; gap: 8px; margin-top: 8px; }
.c-actions > button { flex: 1; }
/* Hide: neutral outline — re-fogs this section, instantly reversible. */
.c-hide { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.c-hide:hover { border-color: var(--accent); }
/* Cancel: the same slot, tinted red — it discards the draft you've typed. */
.c-cancel { background: transparent; color: #a2402f; border: 1px solid rgba(178, 58, 46, .38); }
.c-cancel:hover { border-color: #b23a2e; color: #b23a2e; }

/* --- floating navigation controls (Orca, 2026-07-23) ---
   Fixed bottom-right at every width; JS keeps `bottom` just above the composer.
   Provisional look — round palette buttons standing in for Matilda's real
   emblems (a ribbon for the bookmark, a room mark for the commons). */
#floaters {
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
  pointer-events: none;   /* only the buttons take clicks, not the gaps */
}
#floaters[hidden] { display: none; }
.floater[hidden] { display: none; }
/* the bookmark reads as its own thing — a distinct colour from the commons home
   (scoped by #floaters so it outranks the .floater base background below) */
#floaters .floater-bookmark { background: #35704f; }
.floater {
  pointer-events: auto;
  width: 60px; height: 60px; border-radius: 50%;
  border: 0; background: var(--accent); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(60, 42, 20, .3);
  transition: opacity .15s, background .15s, color .15s;
}
.floater:hover { filter: brightness(1.07); }
/* "you're here": the tap has nowhere to go, so the control dims to a quiet marker */
.floater.here { background: transparent; color: var(--accent); box-shadow: none; opacity: .5; cursor: default; }
.floater.here:hover { filter: none; }

/* Text size is now a global zoom on <html> (see applyPrefs) — it scales the
   whole app uniformly, so the old body-only reading-size rule is retired. */

/* user page */
.me { max-width: 460px; }
.me-title { font-family: var(--font-read); font-size: 24px; margin: 6px 0 0; }
.me-avatar { display: flex; align-items: flex-start; gap: 14px; }
.me-idcol { flex: 1; min-width: 0; }
.me-idcol .row input { flex: 1; min-width: 0; }
.me-idcol .row button { flex: none; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.segmented .seg { background: transparent; color: var(--muted); border: 0; border-radius: 0;
  padding: 8px 18px; font-weight: 600; }
.segmented .seg.on { background: var(--accent); color: #fff; }

/* Sign out, exiled well below the primary action and styled as a quiet
   destructive control rather than a confirm button. */
.signout-zone { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--line); }
button.danger { color: #b23a2e; border-color: rgba(178, 58, 46, .35); }
button.danger.armed { background: #b23a2e; border-color: #b23a2e; color: #fff; }

/* bookshelf */
.shelf-h { font-family: var(--font-read); font-size: 15px; font-weight: 600; color: var(--accent); margin: 20px 2px 2px; }
.shelf-h:first-child { margin-top: 6px; }
.book-row { display: block; text-decoration: none; color: var(--ink); }
.book-row:hover { border-color: var(--accent); }

/* the read-gate card: above an unread section's fogged thread. Its button IS
   the mark-read action; naming what's waiting leans on blur-as-carrot. */
.read-gate {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin: 8px 0 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.rg-title { font-family: var(--font-read); font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.rg-body { color: var(--muted); font-size: 14px; line-height: 1.45; }
.rg-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }

/* passive read-dot on a section row: hollow = unread, filled = read */
.sec-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .5;
}
.sec-dot.read { background: currentColor; opacity: .9; }

/* table (reader spread) */
.spread li { list-style: none; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spread .who { font-weight: 600; }
.spread .rel { color: var(--muted); }
/* closed spread = a row of the readers' faces (the guest book's signatures) */
.spread-summary { list-style: none; cursor: pointer; padding: 4px 0; }
.spread-summary::-webkit-details-marker { display: none; }
.spread-faces { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* --- desktop: the drawer becomes an always-open left rail (slice 2) --------
   Below this breakpoint we keep the mobile single column untouched. In the
   reading view (body.reading) #app becomes a two-panel grid: the rail (#bar)
   spans the full height on the left; the thread (#view) and composer (#foot)
   stack in the right column. Bookshelf/You pages don't get .reading, so they
   stay single-column centered. Kept deliberately plain — Matilda's
   stack-of-books reskin will restyle the rail later. */
@media (min-width: 900px) {
  body.reading #app {
    max-width: 1040px;
    display: grid;
    grid-template-columns: 304px minmax(0, 1fr);
    grid-template-areas: "rail page";
  }
  body.reading #bar {
    grid-area: rail; min-height: 0; overflow-y: auto;
    border-right: 1px solid var(--line);
    padding: 4px 22px 16px 2px;
  }
  /* the page keeps its own paper — #view is otherwise transparent, and the
     dark surround below would show straight through the thread */
  /* panels run to the app's own edges; the dark surround sits outside them */
  body.reading #app { padding-left: 0; padding-right: 0; }

  /* THE PAGE (Matilda's design): parchment inside a gold rule, framing the
     thread AND the composer as one leaf of the book. The frame lives on #page,
     which doesn't scroll, so it stays put while the thread moves under it.
     The ornament is deliberately plain — placeholder for her linework. */
  body.reading #page {
    grid-area: page; position: relative;
    background: var(--parchment); min-height: 0; padding: 13px;
  }
  body.reading #page::before {
    content: ''; position: absolute; inset: 9px; pointer-events: none;
    border: 1px solid var(--gold-dim);
    box-shadow: inset 0 0 0 3px var(--parchment), inset 0 0 0 4px rgba(205, 146, 67, .45);
  }
  body.reading #view { padding-left: 26px; padding-right: 26px; }
  body.reading #foot { padding-left: 26px; padding-right: 26px; background: transparent; border-top-color: rgba(205, 146, 67, .35); }

  /* the rail is always expanded: no chevron, no tap-to-collapse, no bottom rule */
  body.reading .bookbar .drawer { display: block; }
  body.reading .bookbar { border-bottom: 0; }
  body.reading .bookbar .slim { cursor: default; pointer-events: none; padding-top: 14px; }
  body.reading .bookbar .slim .chev { display: none; }
  /* the header is just the book title — the open section is shown in the list */
  body.reading .bookbar .slim .sc { display: none; }
  /* narrow rail: stack the read-marker label above its select so it doesn't wrap */
  body.reading .reader-ctl { flex-direction: column; align-items: stretch; gap: 5px; }
  body.reading .reader-ctl select { flex: none; width: 100%; }

  /* there's room on desktop — keep the composer open (a collapsed slim bar is
     easy to miss) and drop Cancel (nothing to collapse back to) */
  body.reading .composer .c-full { display: block; }
  body.reading .composer .c-slim { display: none; }
  body.reading .composer .c-full .ghost { display: none; }

  /* ── THE SPINE (Matilda's design, 2026-07-19) ────────────────────────────
     The middle panel isn't a sidebar, it's the book: dark board, gold-leaf
     lettering, raised bands at head and foot, and the reader's own name at the
     bottom where the author's name belongs. Same contents as before, dressed
     differently. Desktop only — mobile keeps the light drawer. */
  body.reading #bar {
    background: var(--spine); color: var(--gold);
    border-right: 0; padding: 0 20px;
  }
  body.reading #bar .bookbar { display: flex; flex-direction: column; min-height: 100%; border-bottom: 0; }
  body.reading #bar .drawer { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0 0 18px; }

  /* head band + title, stamped on the board */
  /* the raised bands derive from whichever board colour the book is wearing */
  body.reading #bar .slim { padding: 18px 0 14px; border-bottom: 2px solid color-mix(in srgb, var(--spine) 58%, #000); }
  body.reading #bar .slim .bk { color: var(--gold); font-size: 21px; line-height: 1.15; }

  /* "Sections:" — spine lettering, not a UI label */
  body.reading #bar .sec-h {
    color: var(--gold); font-family: var(--font-read); font-size: 15px;
    text-transform: capitalize; letter-spacing: 0; margin: 16px 4px 6px;
    border-bottom: 1px solid var(--gold-dim); padding-bottom: 2px;
    /* the drawer is a flex column, which blockifies inline-block — this keeps
       the rule under the word, the way it's drawn */
    display: inline-block; align-self: flex-start;
  }
  body.reading #bar .sec-h::after { content: ':'; }
  body.reading #bar .sec-li { color: var(--gold); font-family: var(--font-read); }
  body.reading #bar .sec-li.sel { background: rgba(255, 255, 255, .14); box-shadow: none; color: #fff3dc; }
  body.reading #bar .sec-li .cnt { color: var(--gold-dim); }

  /* reader-spread + read-marker have to read on the dark board */
  body.reading #bar .muted, body.reading #bar summary,
  body.reading #bar .reader-ctl .small { color: var(--gold-dim); }
  body.reading #bar .spread li { border-bottom-color: rgba(237, 173, 78, .35); color: var(--gold); }
  body.reading #bar .spread .rel { color: var(--gold-dim); }
  body.reading #bar select {
    background: rgba(0, 0, 0, .22); color: var(--gold); border-color: var(--gold-dim);
  }

  /* the foot: your name in the author's position */
  body.reading #bar .drawer-nav {
    margin-top: auto; align-items: center;
    border-top: 2px solid color-mix(in srgb, var(--spine) 58%, #000); padding-top: 14px;
  }
  body.reading #bar .dnav { color: var(--gold); font-family: var(--font-read); }
  /* the author's name is set as large as the title (Matilda) */
  body.reading #bar .dnav[href="#/me"] { font-size: 21px; }

  /* Below the three-panel breakpoint there's no shelf panel, but the spine
     should still look like it's standing ON a shelf rather than floating on
     paper — so the surround goes dark (Orca). */
  body.reading { background: var(--shelf-wood); }
}

/* ── THE BOOKSHELF PANEL (Matilda's design, slice 3b) ──────────────────────
   Books lying stacked in wooden compartments, one compartment per group.
   PROOF OF CONCEPT: the spines are drawn in CSS and the colours are
   placeholders standing in for her artwork. Hidden below the three-panel
   breakpoint — the phone and the narrower desktop never see it. */
#shelf { display: none; }
.shelf-title {
  display: block; text-decoration: none;
  font-family: var(--font-read); color: var(--gold); font-size: 18px;
  padding: 16px 12px 4px;
}
.shelf-title:hover, .shelf-title.on { color: #fff3dc; }
/* generous right padding so a book that pops out still has shelf behind it,
   never touching the spine panel (Matilda) */
.shelf-row { padding: 10px 26px 13px 11px; border-bottom: 7px solid var(--shelf-plank); }
.shelf-label {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold-dim); opacity: .7; margin: 0 2px 7px;
}
.bk-spine {
  position: relative; display: block; text-decoration: none;
  height: 30px; line-height: 30px; margin-bottom: 4px;
  border-radius: 2px 4px 4px 2px; padding: 0 30px 0 10px;
  font-family: var(--font-read); font-size: 12.5px; color: rgba(255, 255, 255, .93);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 2px 2px rgba(0, 0, 0, .35);
  transition: transform .14s;
}
/* the two bands near the fore-edge, as she drew them */
.bk-spine::after {
  content: ''; position: absolute; right: 9px; top: 6px; bottom: 6px; width: 7px;
  border-left: 2px solid rgba(0, 0, 0, .32); border-right: 2px solid rgba(0, 0, 0, .32);
}
/* the book you're in sits pulled out of the shelf */
.bk-spine:hover { transform: translateX(5px); }
.bk-spine.cur { transform: translateX(8px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 3px 7px rgba(0, 0, 0, .5); }
/* the unbound book: proposing the next read — an outline, because it isn't
   a book yet. Matilda's "special book you click on". */
.shelf-foot { border-bottom: 0; }
/* A proposal is UNBOUND — a real book (it wears the cover colour its proposer
   picked) that hasn't been bound into the library yet: the colour shows as an
   outline over a faint tint, with no board shadow and no fore-edge bands. Same
   vocabulary the "＋ Suggest a book" slot below already speaks. Graduating a
   book then BINDS it — a visible event on the shelf. DRAFT for Matilda. */
.bk-spine.bk-unbound {
  background: color-mix(in srgb, var(--cover) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--cover) 72%, #d8c9a0);
  box-shadow: none; color: rgba(255, 255, 255, .74); font-style: italic;
  height: 29px; line-height: 27px;
}
.bk-spine.bk-unbound::after { display: none; }   /* no fore-edge bands */
.bk-spine.bk-unbound:hover { color: rgba(255, 255, 255, .95); border-color: var(--gold-dim); }

.bk-spine.bk-new {
  border: 1px dashed rgba(237, 173, 78, .45); box-shadow: none;
  color: var(--gold-dim); height: 29px; line-height: 27px;
}
.bk-spine.bk-new::after { display: none; }
.bk-spine.bk-new:hover { color: var(--gold); border-color: var(--gold); }
/* the club's title page — the first leaf, set like a frontispiece */
.titlepage { max-width: 460px; margin: 0 auto; padding: 34px 8px 40px; text-align: center; }
/* Once there's news to show, the club's own nameplate steps back: the page is
   for what happened, not for introducing itself to someone who lives here. */
.titlepage.compact { padding-top: 16px; }
.titlepage.compact .tp-mark { font-size: 24px; margin-bottom: 4px; }
.titlepage.compact .tp-name { font-size: 26px; }
.titlepage.compact .tp-rule:first-of-type { margin-top: 14px; }
.tp-mark { color: var(--claude); font-size: 34px; line-height: 1; margin-bottom: 10px; }
.tp-name {
  font-family: var(--font-read); font-weight: 600; font-size: 38px;
  letter-spacing: .01em; margin: 0 0 10px;
}
.tp-lede { font-family: var(--font-read); font-style: italic; color: var(--muted); font-size: 16px; }
.tp-rule {
  width: 74px; height: 1px; margin: 26px auto; background: var(--accent); opacity: .45;
}
.tp-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 8px;
}
.tp-book { font-family: var(--font-read); font-size: 21px; }
.tp-book .tp-by { color: var(--muted); font-style: italic; }
/* left-aligned entries, but the block itself centred under the headings */
/* --- the front door: events, not state ------------------------------------
   Rows are left-aligned inside a centred column: a list of things that happened
   reads as a list, while centring each line would make it a monument. Nothing
   here carries a number, by design. */
.tp-talk, .tp-books { list-style: none; margin: 14px auto 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.tp-talk-row, .tp-book-row {
  display: block; text-decoration: none; color: var(--ink);
  padding: 10px 12px; border-radius: var(--radius);
}
.tp-talk-row { display: flex; gap: 11px; align-items: flex-start; }
.tp-talk-row:hover, .tp-book-row:hover { background: rgba(0, 0, 0, .04); }
/* Faces first, because who is the point. */
.tp-faces { display: flex; flex-wrap: wrap; gap: 4px; flex: none; margin: 2px 0; }
.tp-talk-who { font-family: var(--font-read); font-size: 15px; line-height: 1.4; }
.tp-talk-book { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 1px; }
.tp-book-t { font-family: var(--font-read); font-size: 17px; margin-bottom: 5px; }
.tp-book-t .tp-by { color: var(--muted); font-style: italic; font-size: 15px; }
/* Your bookmarks: each row is the link plus an × to let it go. */
.tp-bookmarks .bm-row { display: flex; align-items: center; gap: 4px; }
.tp-bookmarks .bm-row .tp-book-row { flex: 1; min-width: 0; }
.tp-bookmarks .bm-row .tp-book-t { margin-bottom: 0; }
.bm-remove {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .12s, color .12s;
}
.bm-remove:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
/* New since your last visit: a quiet mark in the margin, never a badge with a
   count in it. */
.tp-talk-row.fresh { position: relative; }
.tp-talk-row.fresh::before {
  content: ''; position: absolute; left: 1px; top: 16px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

.tp-cast { list-style: none; margin: 14px auto 0; padding: 0; display: grid; gap: 12px; width: fit-content; }
.tp-cast li { display: flex; align-items: center; gap: 11px; text-align: left; }
.tp-who { font-family: var(--font-read); font-size: 16px; }
.tp-ed { font-size: 12.5px; color: var(--muted); font-style: italic; }

/* cover-colour swatches on the propose form */
.swatches { display: flex; gap: 8px; margin: 6px 0 2px; }
.swatch {
  position: relative;
  width: 30px; height: 34px; padding: 0; border-radius: 2px 4px 4px 2px;
  border: 0; cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28);
  transition: transform .12s, box-shadow .12s;
}
.swatch:hover { transform: translateY(-3px); }
/* the chosen cover lifts off the row and takes a tick — clicking a swatch used
   to give no feedback at all until the book appeared on the shelf */
.swatch.on {
  transform: translateY(-5px);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 0 0 2px var(--card), 0 0 0 4px var(--accent), 0 3px 6px rgba(0, 0, 0, .3);
}
.swatch.on::after {
  content: '✓'; position: absolute; inset: 0;
  display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* admin page (#/admin) — host only */
.me-nav { display: flex; align-items: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.admin-link { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 14px; }
.admin-link:hover { text-decoration: underline; }
.roster { max-width: 560px; }
.mr { display: flex; align-items: center; gap: 12px; }
.mr-off { opacity: .55; }
.mr-who { flex: 1; min-width: 0; }
.mr-name { display: flex; align-items: center; gap: 8px; }
.mr-badges { display: flex; gap: 6px; }
.mr-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 6px; font-weight: 700; }
.mr-badge.host { background: var(--accent); color: #fff; }
.mr-badge.off { background: var(--line); color: var(--muted); }
.mr-status { margin-top: 3px; min-height: 0; }
.mr-actions { display: flex; gap: 8px; flex: none; }
.mr-actions button { padding: 6px 12px; font-size: 13px; }

/* ── the card catalog card (Orca's Oberlin-library idea, 2026-07-20) ─────────
   Anything that isn't the book itself — a suggestion, the You page, admin — is
   a card laid ON the open book: manila stock, lifted off the leaf by a shadow,
   with a punched rod-hole at the foot. A PLACEHOLDER look (CSS, not art) —
   Matilda may draw the real card stock later.
   FONT MODEL (Orca, 2026-07-23, from a real card): the printed bibliographic
   record is SERIF and readable; the TYPEWRITER face is reserved for what was
   typed on afterward — form fields you fill in, the call-number/catalog line —
   and handwriting is a later layer for personal notes. So serif is the ground,
   monospace the exception, not the reverse. */
.catalog-card {
  position: relative; max-width: 620px; margin: 10px auto 34px;
  background: var(--catalog);
  border: 1px solid #d3c299; border-radius: 3px;
  padding: 24px 28px 36px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 10px 26px rgba(60, 42, 20, .16);
  font-family: var(--font-read); color: #3d3117;
}
/* the on-deck cards are set down with a jaunty tilt; You/admin stay squared up */
.catalog-card.cc-suggest { transform: rotate(-0.5deg); }
/* the rod-hole, punched through to the leaf behind it */
.catalog-card::after {
  content: ''; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--parchment);
  box-shadow: inset 0 2px 3px rgba(60, 42, 20, .5), 0 1px 0 rgba(255, 255, 255, .4);
}
/* inner white boxes become ruled sections of the one card */
.catalog-card .card {
  background: transparent; border: 0; border-radius: 0;
  border-top: 1px solid rgba(120, 90, 40, .22);
  padding: 14px 0 6px; margin: 8px 0 0;
}
/* when the card IS the first thing on the sheet (no heading above it, e.g. the
   on-deck cards on the phone bookshelf), drop the divider so it isn't orphaned */
.catalog-card > .card:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }
.catalog-card .me, .catalog-card .roster { max-width: none; }
/* headings, ruled off like a catalog entry (serif now — the printed record) */
.catalog-card .shelf-h, .catalog-card .me-title {
  font-family: var(--font-read); color: #4a3a1c;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  font-size: 15px; margin: 0 0 4px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(120, 90, 40, .3);
}
.catalog-card .me-title { font-size: 20px; letter-spacing: .04em; }
.catalog-card .muted, .catalog-card .small { color: #6b5a38; }
/* a suggestion's note reads as the record does — serif, via its own .body font
   (var(--font-body)); no monospace override, so it stays readable. */
/* form fields on a card: cream, squared — a typed slot, not a modern pill */
.catalog-card input, .catalog-card textarea, .catalog-card select {
  background: rgba(255, 255, 255, .5); border: 1px solid #cdbb90;
  border-radius: 2px; font-family: var(--font-type); color: #3d3117;
}
.catalog-card button { border-radius: 4px; }
.catalog-card button.ghost { border-color: #cdbb90; color: #5a4a24; }
/* the suggestion's main entry — author/title set larger, the way it's typed
   at the head of a catalog card */
.catalog-card .byline { font-size: 15px; }

/* ── phone drafts (2026-07-20) — bring the desktop book-board look to the phone.
   ROUGH; a sketch for Matilda. Only below the desktop rail breakpoint. ────────*/
@media (max-width: 899px) {
  /* the reading-view top bar becomes the book's board: dark, gold-lettered,
     bleeding to the screen edges like a spine — but it still taps open/closed
     (chevron kept), unlike the always-open desktop rail. --spine is set per
     book on #bar by paintBook, so the board wears the book's colour. */
  body.reading #bar {
    background: var(--spine); color: var(--gold);
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right)));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  body.reading #bar .bookbar { border-bottom: 2px solid rgba(0, 0, 0, .3); }
  body.reading #bar .slim .bk { color: var(--gold); font-size: 16px; }
  body.reading #bar .slim .sc { color: var(--gold-dim); }
  body.reading #bar .slim .chev { color: var(--gold); }
  body.reading #bar .sec-h { color: var(--gold-dim); }
  body.reading #bar .sec-li { color: var(--gold); font-family: var(--font-read); }
  body.reading #bar .sec-li.sel { background: rgba(255, 255, 255, .14); box-shadow: none; color: #fff3dc; }
  body.reading #bar .sec-li .cnt { color: var(--gold-dim); }
  body.reading #bar .muted, body.reading #bar summary,
  body.reading #bar .reader-ctl .small { color: var(--gold-dim); }
  body.reading #bar .spread li { border-bottom-color: rgba(237, 173, 78, .35); color: var(--gold); }
  body.reading #bar .spread .rel { color: var(--gold-dim); }
  body.reading #bar select { background: rgba(0, 0, 0, .22); color: var(--gold); border-color: var(--gold-dim); }
  body.reading #bar .drawer-nav { border-top: 2px solid rgba(0, 0, 0, .3); }
  body.reading #bar .dnav { color: var(--gold); }

  /* The Bookshelf drawer stacked above the book's bar (Orca's two-drawer phone).
     It wears the shelf's wood so the two bars read as different objects. */
  /* the wood must reach both screen edges, so it bleeds back out through #bar's
     safe-area padding the same way #bar itself does */
  body.reading #bar .shelfbar {
    background: var(--shelf-wood);
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right)));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  body.reading #bar .shelfbar .shelf-title { display: none; }  /* the bar says it */
  body.reading #bar .shelfbar .shelf-row { padding: 8px 2px 10px; }
  body.reading #bar .shelfbar .bk-spine { height: 34px; line-height: 34px; font-size: 13.5px; }

  /* parchment everywhere (Orca, 2026-07-20): the phone reading surface goes warm
     like the desktop leaf, not the cooler --paper. Reading view only — the card
     pages (You/admin/bookshelf) keep paper. */
  body.reading #app { background: var(--parchment); }
  body.reading #foot { background: var(--parchment); border-top-color: rgba(205, 146, 67, .35); }

}

/* ── the three-panel layout: bookshelf · spine · page ──────────────────────
   Wide screens only. The app goes full-bleed here so the shelf and spine run
   to the window edges the way they're drawn; the extra width goes to the
   furniture, NOT to the prose — the thread stays at a readable measure. */
@media (min-width: 1200px) {
  body.reading #app {
    max-width: none; padding-left: 0; padding-right: 0;
    grid-template-columns: 224px 320px minmax(0, 1fr);
    grid-template-areas: "shelf rail page";
  }
  body.reading #shelf {
    display: block; grid-area: shelf; min-height: 0; overflow-y: auto;
    background: var(--shelf-wood);
  }
  body.reading #view, body.reading #foot { padding-left: 44px; padding-right: 36px; }
  body.reading #view > *, body.reading #foot .composer { max-width: 760px; }
  /* the shelf is right there now, so the link is redundant — this leaves just
     the reader's name at the foot of the spine, the way it's drawn */
  body.reading #bar .drawer-nav a[href="#/shelf"] { display: none; }
}

/* ── the Bookshelf bar in all three layouts (Orca, 2026-07-20) ───────────────
   Phone: stacked above the book's bar. Medium: rides at the TOP of the spine
   rail — the same object, so the layouts agree. Desktop (1200+): hidden, because
   the real shelf panel is its own column. Placed LAST so these outrank the
   rail's own .bookbar rules. */
.slim .you-link { margin-left: auto; }
.shelfbar .slim .chev { margin-left: 8px; }
/* You at the FOOT OF THE SPINE — the reader's name in the author's position
   (Matilda's drawing), at title size on the board. The .drawer-nav author's-
   position styling (margin-top:auto + the foot band) is already defined above. */
.spine-you .you-link { text-decoration: none; }
body.reading #bar .spine-you .you-link span { font-size: 20px; }
/* The phone doesn't get it on the spine — its Bookshelf bar carries You instead. */
@media (max-width: 899px) { .spine-you { display: none; } }
/* On the rail (medium+), the Bookshelf bar drops its You: the spine foot has it now. */
@media (min-width: 900px) { .shelfbar .slim .you-link { display: none; } }

@media (min-width: 900px) {
  /* the rail force-opens every drawer and deadens its slim — the shelf bar opts
     back out of both, so it stays a real tap-to-open drawer up here too */
  /* the wood spans the rail's full width, bleeding back through its 20px padding */
  body.reading #bar .shelfbar {
    background: var(--shelf-wood); min-height: 0;
    margin: 0 -20px; padding: 0 20px;
  }
  body.reading #bar .shelfbar .drawer { display: none; flex: none; padding: 0 0 10px; }
  body.reading #bar .shelfbar.open .drawer { display: block; }
  body.reading #bar .shelfbar .slim { cursor: pointer; pointer-events: auto; padding: 14px 0 12px; }
  body.reading #bar .shelfbar .slim .chev { display: block; }
  body.reading #bar .shelfbar .slim .bk { font-size: 18px; }
  body.reading #bar .shelfbar .shelf-title { display: none; }
}
@media (min-width: 1200px) {
  body.reading #bar .shelfbar { display: none; }
}

/* ── the catalogue lookup (Open Library) ─────────────────────────────────────
   Proposing a book can fill its card from a real library catalogue. Results are
   a short list you PICK from — never blind auto-fill. */
.lookup-hits { margin: 6px 0 2px; }
.lookup-hit {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; font-weight: 400;
}
.lookup-hit:hover { border-color: var(--accent); background: rgba(122, 92, 62, .05); }
.lookup-cover { width: 28px; height: 42px; object-fit: cover; border-radius: 2px; flex: none; }
/* the catalogue's record as it sits on a card — cover ONLY here, never the shelf */
.cat-rec { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 2px; }
.cat-cover { width: 34px; height: 52px; object-fit: cover; border-radius: 2px; flex: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
/* link back to the catalogue, and the lazily-fetched description under the record */
.cat-ol { display: inline-block; margin-top: 4px; font-size: 12px; color: #5a4a24;
  text-decoration: none; border-bottom: 1px solid rgba(90, 74, 36, .35); }
.cat-ol:hover { border-bottom-color: currentColor; }
.cat-desc { font-size: 14px; line-height: 1.5; margin: 8px 0 0; color: #4a3a1c;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cat-desc.open { -webkit-line-clamp: unset; overflow: visible; }
.cat-more { background: transparent; border: 0; color: #5a4a24; cursor: pointer;
  font-size: 12px; font-weight: 600; padding: 3px 0 0; }
/* the record you picked, confirmed in the propose form */
.lookup-chosen { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.lookup-chosen[hidden] { display: none; }
/* a deep result list scrolls inside the card instead of shoving the form down */
.lookup-hits { max-height: 340px; overflow-y: auto; }
/* a coverless book still holds its place: same rectangle, in its own colour */
.cover-blank { border-radius: 2px; }

/* A shelf with many proposals would run off the screen, so the drawers cap and
   scroll inside themselves (Orca, stress-testing). On the phone #bar can't
   scroll — it's flex:none above the thread — so the ceiling has to live here.
   At 900+ the rail scrolls, but capping keeps the book's sections reachable
   instead of pushed below a long shelf. */
@media (max-width: 899px) {
  body.reading #bar .bookbar .drawer { max-height: 62vh; overflow-y: auto; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  body.reading #bar .shelfbar.open .drawer { max-height: 50vh; overflow-y: auto; }
}

/* --- the admin shelf: books, and the controls that used to need SQL -------- */
/* Admin is a utility surface, so the theming stays light here on purpose: the
   buttons have to stay obvious. This is the one place a card aesthetic must
   not win. */
/* Below the card, on the leaf: the club talking about a proposal, and the
   controls for it or for a book. NOT printed on the card — a catalog card
   carries the library's record, not buttons (Orca, 2026-07-21). Same measure as
   the card so the two read as one column. */
.below-card { max-width: 620px; margin: -22px auto 34px; padding: 0 4px; }
.below-card .mr-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bk-panel[hidden] { display: none; }
.bk-form label:first-child { margin-top: 0; }
/* the skeleton as text: a table of contents pastes in whole */
.chunk-ta { min-height: 160px; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; }
/* exactly what will be saved, numbered as the sections will be */
.chunk-preview { margin: 8px 0 0; padding-left: 26px; font-size: 14px; }
.chunk-preview li { padding: 2px 0; }
.chunk-preview:empty { display: none; }

/* the host's graduation control, set apart from the comment box above it */
.choose-box { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
/* taking a proposal off the shelf: quiet, and set apart from the way in */
.sug-remove { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }

/* --- a section's second line ----------------------------------------------
   Whatever the host wants to say about the section, shown verbatim under its
   name (Orca, 2026-07-21): where it starts, what's in it, page numbers. A
   phrase from the text still travels best, because the club reads different
   editions — but that's advice now, not what the field IS. */
.anchor-line { font-size: 12.5px; line-height: 1.35; margin-top: 2px; font-weight: 400; }
.anchor-phrase { font-family: var(--font-read); font-style: italic; color: var(--accent); }
/* on the read-gate card it sits under the title, at reading size */
.read-gate .anchor-line { margin: 2px 0 10px; font-size: 14px; }
/* the spine's section list is a dark board at every width, so there it wears
   the gold rather than the accent */
body.reading #bar .anchor-phrase { color: var(--gold-dim); }
/* a bound book's card sits squared up — it's been accessioned and filed, unlike
   the on-deck cards, which are set down with a tilt */
.catalog-card.cc-book { transform: none; }
/* the preview is numbered by the sections' OWN numbers, which may skip, so it
   can't rely on an <ol>'s counter */
.chunk-preview { list-style: none; padding-left: 0; }
.chunk-prev-li { display: flex; gap: 8px; align-items: baseline; }
.chunk-prev-n { color: var(--accent); font-variant-numeric: tabular-nums; min-width: 2.6em; flex: none; }

/* --- login: one step at a time --------------------------------------------
   The single primary button on each step is centred, since the whole login
   column is. The alternatives underneath are quiet links, deliberately not
   buttons: after typing a code, the thing that starts over must not look like
   the thing that finishes (Orca, 2026-07-21). */
.login-row { justify-content: center; margin-top: 14px; }
.login-alts { justify-content: center; gap: 16px; margin-top: 12px; }
.login-alts .reply-link { font-size: 13px; }

/* The empty READING NOW shelf. An invitation, not a bare heading (audit 10.1) —
   for a new member this IS their whole shelf, so it's the first thing they read.
   Sits in the compartment where the spines would be, at spine height so the
   wooden row doesn't collapse to a sliver. */
.shelf-empty {
  color: var(--gold-dim, #c9a227); opacity: .75;
  font-size: 13px; line-height: 1.4; padding: 10px 4px; max-width: 210px;
}

/* A face is a link to its owner's card. No visual change at rest — the whole
   point is that faces already read as people — just a hint on hover. */
.face-link { display: inline-block; text-decoration: none; border-radius: 50%;
  /* size to the avatar, and never stretch: inside a flex row (a message) an
     unconstrained anchor grows to the post's full height and the round hover
     outline becomes a tall oval. */
  align-self: flex-start; line-height: 0; }
.face-link:hover { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- the library card -------------------------------------------------------
   The person-side mirror of the pocket's guest book. */
.lc-head { display: flex; gap: 14px; align-items: center; }
.lc-name { font-family: var(--font-read); font-size: 22px; margin: 0; }
.lc-role { color: var(--muted); font-size: 13px; font-style: italic; }
/* THE BOOKPLATE — Matilda's, and left visibly unfinished on purpose so it reads
   as a space reserved for her rather than a decision already taken. */
.lc-plate {
  margin-top: 16px; height: 108px; display: grid; place-items: center;
  border: 1px dashed var(--line); border-radius: 6px;
  color: var(--muted); font-family: var(--font-read); font-style: italic;
  letter-spacing: .08em; opacity: .55;
}
.lc-books { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 2px; }
.lc-book { display: block; text-decoration: none; color: var(--ink); padding: 7px 8px; border-radius: 9px; }
.lc-book:hover { background: rgba(0,0,0,.04); }
.lc-title { font-family: var(--font-read); font-size: 16px; }
.lc-head2 { margin-top: 22px; }
.lc-settings { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }

/* --- the back pocket -------------------------------------------------------
   Three strata under the card: the guest book, the provenance, then the talk.
   Each gets a quiet small-caps heading rather than a rule, so the pocket reads
   as one continuous record rather than four stacked boxes. */
.gb-head {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.guestbook, .provenance, .pocket-talk { margin-top: 22px; }
.gb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gb-list li { display: flex; gap: 10px; align-items: flex-start; }
.gb-who { font-family: var(--font-read); font-size: 15px; }
/* Who is holding it right now, said in words rather than with a badge. */
.gb-now { color: var(--accent); font-style: italic; font-size: 13px; }
.gb-ed { font-size: 12.5px; color: var(--muted); font-style: italic; }
.gb-when { font-size: 11.5px; color: var(--muted); opacity: .8; }
.prov-note { font-size: 15px; margin-top: 6px; }

/* --- picking a book up, putting it back ------------------------------------
   Sits under the book's card, above the host's controls. Only the FIRST
   below-card tucks up under the card; a second one needs its own air. */
.below-card + .below-card { margin-top: 22px; }
.pocket { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.pocket-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
/* 260px is chosen so the row BREAKS on a phone rather than squeezing: the
   placeholder ends in "(optional)", and a clipped one silently turns a skippable
   field into a demand. On the leaf's measure it still sits beside the button. */
.pocket-row input { flex: 1 1 260px; min-width: 0; }
/* The optional edition sits UNDER the button and reads as an aside, not a
   precondition. Narrower and lighter on purpose: above the button and full
   width, it looked like something you had to fill in before you could act. */
.pickup-ed-row { margin: 2px 0 4px; max-width: 340px; }
.pickup-edition { font-size: 14px; padding: 7px 10px; background: transparent; border-style: dashed; }
.pickup-edition::placeholder { font-style: italic; }


/* --- who wants a proposal -------------------------------------------------
   Faces, never a fraction: "Orca and Rachel want to read this" is a fact about
   who, while "2 of 7" is a scoreboard with an implied target. */
.interest { margin: 4px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.interest-faces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
/* Claude in the roster: a member like the others, with the one badge that
   explains why it has no Invite or Deactivate button */
.mr-badge.pilcrow-badge { background: var(--claude); color: #fff; }

/* the comment box at the foot of a suggestion card */
.sug-composer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }