/* Buchmendel — interface styles. The 3D room is drawn on the canvas (#scene);
   everything here is the interface around it.

   1. Tokens and base
   2. Rail (left; a tab bar on phones)
   3. Owner card (top right)
   4. Hint and full-shelves note (bottom)
   5. Side panels (slide out from behind the rail)
   6. Reading drawer (right)
   7. Add / edit form
   8. Sign-in screen
   9. Shared bits: buttons, menus, toast
  10. Phones */

/* ============================================================
   1. Tokens and base
   ============================================================ */
/* Nordic library: a pale rail, white panels, one ink-blue accent. The room
   stays the only warm thing on screen. Night is the same design in the dark;
   index.html sets data-theme from your choice (or your system) before the
   page draws, so there's no flash. */
:root {
  color-scheme: light;
  --wall: #eef0ee;              /* behind everything, rarely seen */
  --wall-dim: #e3e6e4;
  --ink: #16202a;
  --ink-soft: #5b6773;
  --ink-faint: #8d97a1;
  --panel: #ffffff;
  --panel-dim: #f4f5f3;
  --panel-edge: #e3e5e4;
  --accent: #2e5b8a;
  --accent-hover: #244a72;
  --on-accent: #ffffff;
  --accent-wash: rgba(46, 91, 138, 0.08);
  --danger: #b03a2e;
  --danger-wash: rgba(176, 58, 46, 0.08);

  /* rail and places bar */
  --rail-w: 64px;
  --rail-bg: rgba(247, 246, 242, 0.96);
  --rail-solid: #f7f6f2;
  --rail-ink: #16202a;
  --rail-dim: #6b7682;
  --rail-hover: #eceeec;
  --rail-on: #e6ebf0;
  --rail-edge: #e1e3e0;

  /* owner card */
  --card-bg: rgba(255, 255, 255, 0.94);
  --card-ink: #16202a;
  --card-dim: #5b6773;
  --card-edge: #e3e5e4;
  --card-chip: #eef1f4;
  --avatar-bg: #2e5b8a;
  --avatar-ink: #ffffff;
  --friend: #5f8a73;

  --tip-bg: #16202a;            /* rail labels on hover */
  --tip-ink: #ffffff;
  --on-room: #f6eedf;           /* text written straight onto the 3D room */
  --backdrop: rgba(22, 32, 42, 0.35);
  --auth-bg: linear-gradient(135deg, #f3f4f2 0%, #e2e7ea 100%);

  --shadow-rail: 1px 0 0 #e1e3e0, 6px 0 18px rgba(22, 32, 42, 0.06);
  --shadow-soft: 0 6px 20px rgba(22, 32, 42, 0.12);
  --shadow-panel: 18px 0 48px rgba(22, 32, 42, 0.12);
  --shadow-drawer: -30px 0 80px rgba(22, 32, 42, 0.1);
  --shadow-pop: 0 16px 40px rgba(22, 32, 42, 0.14);
  --shadow-modal: 0 40px 90px rgba(22, 32, 42, 0.2);

  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --serif-ls: -0.02em;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --wall: #0f1216;
  --wall-dim: #1a1f25;
  --ink: #e7ebef;
  --ink-soft: #a3adb8;
  --ink-faint: #6f7a86;
  --panel: #171b21;
  --panel-dim: #1f242b;
  --panel-edge: #2a313a;
  --accent: #8db4de;
  --accent-hover: #a9c7e8;
  --on-accent: #0f1720;
  --accent-wash: rgba(141, 180, 222, 0.12);
  --danger: #e08a7a;
  --danger-wash: rgba(224, 138, 122, 0.12);

  --rail-bg: rgba(18, 22, 27, 0.94);
  --rail-solid: #12161b;
  --rail-ink: #e7ebef;
  --rail-dim: #8a95a1;
  --rail-hover: rgba(255, 255, 255, 0.06);
  --rail-on: rgba(141, 180, 222, 0.16);
  --rail-edge: #232a33;

  --card-bg: rgba(23, 27, 33, 0.92);
  --card-ink: #e7ebef;
  --card-dim: #a3adb8;
  --card-edge: #2a313a;
  --card-chip: #252c35;
  --avatar-bg: #8db4de;
  --avatar-ink: #0f1720;
  --friend: #7fae94;

  --tip-bg: #e7ebef;
  --tip-ink: #12161b;
  --backdrop: rgba(0, 0, 0, 0.5);
  --auth-bg: linear-gradient(135deg, #12161b 0%, #1b2129 100%);

  --shadow-rail: 1px 0 0 #232a33, 6px 0 18px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-panel: 18px 0 48px rgba(0, 0, 0, 0.4);
  --shadow-drawer: -30px 0 80px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 40px 90px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
}
body { margin: 0; position: relative; }
button { font: inherit; }

/* the room starts beside the rail, so the view is centred on what you can see */
#scene {
  position: fixed;
  top: 0; bottom: 0;
  left: var(--rail-w);
  width: calc(100% - var(--rail-w));
  height: 100%;               /* a canvas doesn't stretch between top and bottom by itself */
  display: block;
  touch-action: none;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-edge); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   2. Rail
   ============================================================ */
.rail {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--rail-w);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 0;
  background: var(--rail-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--rail-ink);
  box-shadow: var(--shadow-rail);
}
.rail[hidden] { display: none; }
.rail-mark {
  display: grid;
  place-items: center;
  padding: 2px 0 12px;
  color: var(--rail-ink);
  text-decoration: none;
}
/* the mark, Regal B: the B's bowls in the ink of where it stands, its books in the accent */
.bm-mark { display: block; }
.bm-frame { stroke: currentColor; }
.bm-books { fill: var(--accent); }
.rail-mark .bm-mark { width: 34px; height: 34px; }
.auth-brand .bm-mark { width: 56px; height: 56px; margin: 0 0 14px -6px; color: var(--ink); }
.rail-grow { flex: 1; }
.rail-btn, .rail .account-btn {
  all: unset;
  position: relative;
  box-sizing: border-box;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--rail-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rail-btn[hidden] { display: none; }
.rail-btn:hover { color: var(--rail-ink); background: var(--rail-hover); }
.rail-btn.on { color: var(--rail-ink); background: var(--rail-on); }
.rail-btn.add { margin-top: 8px; color: var(--on-accent); background: var(--accent); }
.rail-btn.add:hover { color: var(--on-accent); background: var(--accent-hover); }
.rail-btn:focus-visible, .rail .account-btn:focus-visible, .rail-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail .account-btn { margin-top: 6px; }
.rail .avatar { width: 32px; height: 32px; font-size: 15px; background: var(--avatar-bg); color: var(--avatar-ink); }

/* names on hover, to the right of the rail */
.rail [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translate(-4px, -50%);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--tip-bg);
  color: var(--tip-ink);
  font: 500 12px var(--sans);
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
}
.rail [data-tip]:hover::after, .rail [data-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.rail .menu-wrap:has(.menu:not([hidden])) [data-tip]::after { display: none; }

/* the account menu opens to the right of the avatar */
.rail .menu { top: auto; bottom: 0; right: auto; left: calc(100% + 14px); }

/* ============================================================
   3. Top right: the light picker and the owner card
   ============================================================ */
.top-right {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.top-right[hidden] { display: none; }

/* the owner card: who, then what's in the room as three small figures */
.owner {
  width: 320px;
  padding: 14px 16px 12px;
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--card-ink);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.owner-head { display: flex; align-items: center; gap: 12px; }
.owner .owner-av {
  width: 40px; height: 40px;
  flex-shrink: 0;
  font-size: 17px;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  box-shadow: 0 0 0 3px var(--card-chip);
}
.owner .owner-av.other { background: var(--friend); }
.owner-text { flex: 1; min-width: 0; }
.owner h2 {
  margin: 0;
  font: 400 19px/1.15 var(--serif);
  letter-spacing: var(--serif-ls);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-meta { margin-top: 2px; font-size: 12px; color: var(--card-dim); }

/* below the name: the counts, then one line each for what's being read now
   and what was read and watched last */
.owner-more { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--card-edge); }
.owner-counts { display: flex; align-items: center; gap: 14px; }
.stat { display: inline-flex; align-items: center; gap: 6px; color: var(--card-dim); }
.stat svg { flex-shrink: 0; width: 19px; height: 19px; }
.stat b { font: 600 14px var(--sans); color: var(--card-ink); font-variant-numeric: tabular-nums; }
.owner-lines { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.owner-lines:empty { display: none; }
.owner-line {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
}
.owner-line span { flex: 0 0 auto; min-width: 138px; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--card-dim); }
.owner-line i { min-width: 0; font: italic 400 15px/1.35 var(--serif); letter-spacing: var(--serif-ls); color: var(--card-ink); overflow: hidden; text-overflow: ellipsis; }
.owner-line:hover i { color: var(--accent); }
.owner-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.owner .who-actions { display: flex; gap: 6px; margin-top: 12px; }
.owner .who-actions:empty { display: none; }
.owner .who-actions button {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 12px var(--sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.owner .who-actions button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.owner .who-actions button.ghost { flex: 0 0 auto; background: transparent; color: var(--card-ink); border-color: var(--card-edge); font-weight: 500; }
.owner .who-actions button.ghost:hover { border-color: var(--card-ink); }

/* ============================================================
   4. Bottom of the room: hint, full-shelves note (the dock: the last section)
   ============================================================ */
.pick-hint {
  position: fixed;
  bottom: 24px;
  left: calc(50% + var(--rail-w) / 2);
  transform: translateX(-50%);
  z-index: 4;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-room);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.pick-hint.show { opacity: 0.8; }
body.has-room .pick-hint { bottom: 70px; }

.shelf-note {
  all: unset;
  position: fixed;
  right: 20px;
  bottom: 66px;
  z-index: 6;
  max-width: 280px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--rail-edge);
  background: var(--rail-bg);
  color: var(--rail-ink);
  font-size: 11.5px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.shelf-note[hidden] { display: none; }
.shelf-note:hover { background: var(--rail-solid); }
.shelf-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the light in your room, last in the room dock: one round button showing
   the current light; on hover (or a tap) it opens to the right with all four */
.light-pick {
  position: relative;
  display: flex;
  gap: 4px;
  isolation: isolate;
}
.light-pick[hidden] { display: none; }
.light-pick button {
  all: unset;
  position: relative;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--rail-dim);
  cursor: pointer;
  overflow: visible;
  transition: width 0.22s var(--ease-out), opacity 0.18s, margin 0.22s var(--ease-out), background 0.15s, color 0.15s;
}
.light-pick button:hover { color: var(--rail-ink); background: var(--rail-hover); }
/* the highlight is one disc that slides to the chosen light */
.lp-thumb {
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.32s var(--ease-out);
  pointer-events: none;
}
.light-pick button { z-index: 1; }
.light-pick button[aria-checked="true"], .light-pick button[aria-checked="true"]:hover { color: var(--on-accent); background: transparent; }
.light-pick button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* closed: only the current light shows */
.light-pick:not(:hover):not(:has(:focus-visible)):not(.open) button:not([aria-checked="true"]) {
  width: 0;
  margin-right: -4px;            /* swallow the gap too */
  opacity: 0;
  pointer-events: none;
}
/* its name, above the icon on hover */
.light-pick button::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--tip-bg);
  color: var(--tip-ink);
  font: 500 11.5px var(--sans);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
}
.light-pick button:hover::after, .light-pick button:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   5. Side panels: slide out from behind the rail. They sit under the rail
   (and over the owner card), start tucked fully behind it and glide out;
   closing reverses a little faster.
   ============================================================ */
.side-panel {
  position: fixed;
  top: 0; bottom: 0;
  left: var(--rail-w);
  z-index: 11;
  width: min(400px, calc(100vw - var(--rail-w)));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--panel-edge);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.26s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.26s, box-shadow 0.26s;
}
.side-panel[hidden] { display: flex !important; }
.side-panel.open {
  transform: translateX(0);
  visibility: visible;
  box-shadow: var(--shadow-panel);
  transition: transform 0.38s var(--ease-out), visibility 0s, box-shadow 0.38s;
}
@media (prefers-reduced-motion: reduce) { .side-panel, .side-panel.open { transition: none; } }

.sp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 24px 22px 18px 30px;
  border-bottom: 1px solid var(--panel-edge);
}
.sp-header h2 { margin: 0; font: 400 25px var(--serif); letter-spacing: var(--serif-ls); }
.sp-body { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.sp-body .empty {
  padding: 40px 20px;
  font: italic 400 16px/1.5 var(--serif);
  color: var(--ink-faint);
  text-align: center;
}
.sp-section {
  padding: 10px 18px 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sp-hint { margin: 4px 18px 12px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* search field */
.sp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin: 12px 18px 8px;
  padding: 0 14px;
  background: var(--panel-dim);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink-soft);
  transition: border-color 0.15s, background 0.15s;
}
.sp-search:focus-within { background: var(--panel); border-color: var(--ink-soft); }
.sp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15px var(--sans); color: var(--ink); }
.sp-search input::placeholder { color: var(--ink-faint); }

/* rows: people, search results, items that don't fit */
.row-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.row-item:hover { background: var(--panel-dim); }
button.row-item { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 6px; cursor: pointer; }
button.row-item:hover { background: var(--panel-dim); }
button.row-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.who-meta { flex: 1; min-width: 0; display: block; }
.who-name { display: block; margin: 0 0 2px; font: 400 17px var(--serif); letter-spacing: var(--serif-ls); color: var(--ink); }
.who-handle { display: block; font-size: 11.5px; color: var(--ink-soft); }
.row-item .who-actions { display: flex; align-items: center; gap: 4px; }
.plain-link { color: inherit; text-decoration: none; }
.list-spine { width: 6px; align-self: stretch; min-height: 34px; flex-shrink: 0; border-radius: 2px; }

/* feed */
.feed-item { padding: 16px 18px; border-bottom: 1px solid var(--panel-edge); }
.feed-item:last-child { border-bottom: 0; }
.fi-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.fi-actor { font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; }
.fi-actor:hover { color: var(--accent); }
.fi-time { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.fi-verb { font-size: 13px; color: var(--ink-soft); }
.fi-book {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 5px;
  background: var(--panel-dim);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.fi-book:hover { background: var(--wall-dim); }
.fi-spine { width: 4px; flex-shrink: 0; border-radius: 1px; }
.fi-book-title { font: 400 17px/1.25 var(--serif); letter-spacing: var(--serif-ls); color: var(--ink); }
.fi-book-author { margin-top: 3px; font-size: 12px; color: var(--ink-soft); }

/* customize */
.cz { display: flex; flex-direction: column; gap: 18px; padding: 14px 18px 24px; }
.cz-section { display: flex; flex-direction: column; gap: 8px; }
.cz-label { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.cz-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-opt {
  all: unset;
  padding: 7px 13px;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  font: 500 12px var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.cz-opt:hover { color: var(--ink); border-color: var(--ink-soft); }
.cz-opt[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.cz-swatches { display: grid; grid-template-columns: repeat(8, 30px); gap: 8px; }
.cz-swatch {
  all: unset;
  width: 30px; height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  outline: 2px solid transparent;
  outline-offset: 2px;
  cursor: pointer;
  transition: outline-color 0.15s;
}
.cz-swatch[aria-pressed="true"] { outline-color: var(--ink); }
.cz-opt:focus-visible, .cz-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cz-custom { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.cz-custom input[type="color"] {
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--panel-edge);
  border-radius: 50%;
  background: none;
  overflow: hidden;
  cursor: pointer;
}
.cz-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cz-custom input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.cz-custom code { font-size: 11px; color: var(--ink-faint); }
.cz-actions { display: flex; }

/* the desk */
.desk-panel { display: flex; flex-direction: column; gap: 18px; padding: 12px 18px 24px; }
.desk-book { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--panel-edge); }
.desk-book:last-child { border-bottom: 0; }
.desk-head { display: flex; align-items: center; gap: 12px; }
.desk-titles { flex: 1; min-width: 0; }
.desk-title { font: 400 19px/1.2 var(--serif); letter-spacing: var(--serif-ls); color: var(--ink); }
.desk-author { font-size: 12px; color: var(--ink-soft); }
.desk-note { padding: 8px 12px; border-radius: 6px; background: var(--panel-dim); }
.desk-note .when { margin-bottom: 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.desk-note .text { font: 400 15px/1.45 var(--serif); color: var(--ink); white-space: pre-wrap; }
.desk-empty-note { margin: 0; font-size: 13px; font-style: italic; color: var(--ink-faint); }

/* ============================================================
   6. Reading drawer
   ============================================================ */
.reading-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 10;
  width: min(440px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--panel-edge);
  box-shadow: var(--shadow-drawer);
  transform: translateX(105%);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.reading-panel:not([hidden]).open { transform: translateX(0); }
.reading-panel[hidden] { display: flex !important; }

.rp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 30px 32px 20px; border-bottom: 1px solid var(--panel-edge); }
.rp-cover { width: 74px; height: 108px; flex-shrink: 0; object-fit: cover; border-radius: 3px; box-shadow: 0 6px 18px rgba(30, 22, 14, 0.22); }
.rp-head-text { flex: 1; min-width: 0; }
.rp-eyebrow { margin-bottom: 8px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.rp-title { margin: 0 0 6px; font: 400 27px/1.1 var(--serif); letter-spacing: var(--serif-ls); color: var(--ink); text-wrap: balance; }
.rp-author { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.rp-facts { margin: 6px 0 0; font-size: 12px; color: var(--ink-faint); }
.rp-facts:empty { display: none; }
.rp-close {
  all: unset;
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.rp-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rp-close:hover { color: var(--ink); background: var(--panel-dim); }

.rp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--panel-edge);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.rp-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.rp-meta .rating { font-size: 13px; letter-spacing: 0.04em; color: var(--accent); }
.rp-meta .rating .off { color: var(--ink-faint); }
.rp-meta .vis { padding: 4px 8px; border-radius: 3px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.15s; }
.rp-meta .vis:hover { background: var(--panel-dim); }

.rp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 32px; border-bottom: 1px solid var(--panel-edge); }
.rp-links a, .rp-links button { all: unset; padding: 5px 10px; border: 1px solid var(--panel-edge); border-radius: 999px; font-size: 11.5px; color: var(--ink-soft); cursor: pointer; }
.rp-links a:hover, .rp-links button:hover { color: var(--ink); border-color: var(--ink-soft); }
.rp-links button.on { color: var(--accent); border-color: var(--accent); }
.rp-links a:focus-visible, .rp-links button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* started · finished, how far in, Mark as read */
.rp-progress { display: flex; flex-direction: column; gap: 12px; padding: 14px 32px; border-bottom: 1px solid var(--panel-edge); font-size: 13px; color: var(--ink-soft); }
.rp-progress[hidden] { display: none; }
.pg-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pg-date { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pg-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.pg-value-row { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.pg-value { font-size: 13px; color: var(--ink); }
button.pg-value { all: unset; font-size: 13px; color: var(--ink); cursor: pointer; border-radius: 4px; transition: color 0.15s; }
button.pg-value.empty { color: var(--ink-faint); }
button.pg-value:hover { color: var(--accent); }
button.pg-value:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the real date input sits under the text, invisible: it only supplies the calendar */
.pg-picker { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.pg-clear { all: unset; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--ink-faint); cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; }
.pg-date:hover .pg-clear, .pg-clear:focus-visible { opacity: 1; }
.pg-clear:hover { color: var(--ink); background: var(--panel-dim); }
.pg-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .pg-clear { opacity: 1; } }
.pg-bar { height: 5px; border-radius: 3px; background: var(--panel-edge); overflow: hidden; }
.pg-bar[hidden] { display: none; }
.pg-bar span { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.3s var(--ease-out); }
.pg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pg-form { display: inline-flex; align-items: center; gap: 8px; }
.pg-in { display: inline-flex; align-items: center; gap: 6px; }
.pg-in input { width: 56px; box-sizing: border-box; padding: 4px 8px; border: 0; border-radius: 8px; background: var(--panel-dim); color: var(--ink); font: inherit; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pg-in input::-webkit-outer-spin-button, .pg-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pg-in input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.pg-of { font-variant-numeric: tabular-nums; }
.pg-mode { display: inline-flex; border: 1px solid var(--panel-edge); border-radius: 999px; overflow: hidden; }
.pg-mode button { all: unset; padding: 3px 9px; font-size: 11px; color: var(--ink-faint); cursor: pointer; }
.pg-mode button.on { background: var(--ink); color: var(--panel); }
.pg-mode button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pg-done { all: unset; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 500; cursor: pointer; }
.pg-done:hover { filter: brightness(1.08); }
.pg-done:disabled { opacity: 0.6; cursor: default; }
.pg-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-text { font-variant-numeric: tabular-nums; }
.pg-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; color: var(--ink); }
.pg-ask-btns { display: inline-flex; align-items: center; gap: 6px; }
.pg-ghost { all: unset; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--panel-edge); color: var(--ink-soft); font-size: 11.5px; cursor: pointer; }
.pg-ghost:hover { color: var(--ink); border-color: var(--ink-soft); }
.pg-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-x { all: unset; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--ink-faint); cursor: pointer; }
.pg-x:hover { color: var(--ink); background: var(--panel-dim); }
.pg-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rp-reactions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 32px; border-bottom: 1px solid var(--panel-edge); }
.rp-reactions button {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  box-sizing: border-box;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.rp-reactions button:hover { color: var(--ink); border-color: var(--ink-soft); }
.rp-reactions button.on { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.rp-reactions button:not(:has(.n)) { width: 32px; height: 28px; padding: 0; justify-content: center; }
.rp-reactions .glyph { display: grid; place-items: center; width: 14px; height: 14px; }
.rp-reactions .glyph svg { display: block; }
.rp-reactions .n { font-variant-numeric: tabular-nums; line-height: 1; }

.rp-tabs { display: flex; padding: 0 32px; border-bottom: 1px solid var(--panel-edge); }
.rp-tabs button {
  all: unset;
  position: relative;
  margin-right: 22px;
  padding: 12px 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}
.rp-tabs button.on { color: var(--ink); }
.rp-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.rp-tabs button span { margin-left: 4px; font-size: 10px; color: var(--ink-faint); }
.rp-tab-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rp-tab-panel[hidden] { display: none; }

.rp-list { flex: 1; overflow-y: auto; padding: 20px 32px 6px; }
.rp-list .empty { padding: 40px 20px 24px; font: italic 400 17px/1.45 var(--serif); color: var(--ink-faint); text-align: center; }
.note, .comment { padding: 14px 0 18px; border-bottom: 1px solid var(--panel-edge); }
.note:last-child, .comment:last-child { border-bottom: 0; }
.note .when, .comment .when {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.note .text, .comment .text { font: 400 16px/1.5 var(--serif); color: var(--ink); white-space: pre-wrap; }
.note .text[hidden] { display: none; }
.comment .author { font-size: 12.5px; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; }
.comment .author a { color: inherit; text-decoration: none; }
.comment .author a:hover { color: var(--accent); }
.note-acts { display: flex; gap: 12px; }
.note .edit, .note .del, .comment .del {
  all: unset;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s;
}
.note .edit:hover { color: var(--ink); }
.note .del:hover, .comment .del:hover { color: var(--danger); }
.note-edit textarea {
  width: 100%;
  min-height: 70px;
  padding: 8px 10px;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  outline: none;
  background: var(--panel-dim);
  font: 400 16px/1.5 var(--serif);
  color: var(--ink);
  resize: vertical;
}
.note-edit textarea:focus { border-color: var(--ink-soft); }
.note-edit .row { display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; }
.note-edit button { all: unset; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; }
.note-edit button[type=submit] { color: var(--accent); }
.note-edit button:hover { color: var(--ink); }

.rp-compose { padding: 16px 32px 18px; border-top: 1px solid var(--panel-edge); background: var(--panel-dim); }
.rp-compose textarea {
  width: 100%;
  min-height: 50px;
  border: none;
  outline: none;
  background: transparent;
  font: 400 16px/1.45 var(--serif);
  color: var(--ink);
  resize: none;
}
.rp-compose textarea::placeholder { color: var(--ink-faint); font-style: italic; }
.rp-compose .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.rp-compose button[type=submit] { all: unset; padding: 6px 0; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); cursor: pointer; transition: color 0.2s; }
.rp-compose button[type=submit]:hover { color: var(--ink); }
.rp-compose .hint { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }

.vis-picker { display: flex; gap: 4px; }
.vis-picker button { all: unset; padding: 5px 8px; border-radius: 3px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; transition: color 0.15s, background 0.15s; }
.vis-picker button:hover { color: var(--ink); }
.vis-picker button.on { color: var(--accent); background: var(--accent-wash); }

/* owner's row at the bottom: Edit on the left, Remove on the right */
.rp-danger { display: flex; justify-content: space-between; align-items: center; padding: 12px 32px 22px; }
.rp-danger[hidden] { display: none; }
.rp-danger button { all: unset; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); cursor: pointer; }
.rp-danger button:hover { color: var(--danger); }
.rp-danger .rp-edit { color: var(--ink-soft); }
.rp-danger .rp-edit:hover { color: var(--accent); }

/* ============================================================
   7. Add / edit form
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 16;
  width: min(520px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  box-shadow: var(--shadow-modal);
  transform: translate(-50%, -48%) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal[hidden] { display: block !important; }
.modal.is-book .only-movie, .modal.is-movie .only-book { display: none; }
/* the copyright and Credits, small in the bottom-right corner of a room */
.room-foot { position: fixed; right: 16px; bottom: 16px; z-index: 5; display: none; padding: 4px 10px; border-radius: 999px; background: var(--rail-bg); font-size: 11px; color: var(--rail-dim); opacity: 0.8; transition: opacity 0.15s; }
body.has-room .room-foot { display: block; }
.room-foot:hover, .room-foot:focus-within { opacity: 1; }
.room-foot a { color: inherit; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.room-foot a:hover { color: var(--rail-ink); }
.room-foot button { all: unset; color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); cursor: pointer; }
.room-foot button:hover { color: var(--rail-ink); }
.room-foot button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* the sign-in screen's foot: the same links */
.auth-foot { position: fixed; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 11.5px; color: var(--ink-faint); }
.auth-foot a { color: inherit; text-underline-offset: 2px; }
.auth-foot a:hover { color: var(--ink); }
/* the foot of the account menu: only on phones, where the room's footer is hidden */
.menu-legal { display: none; padding: 8px 12px 4px; font-size: 11.5px; color: var(--ink-faint); }
.menu-legal a, .menu-legal button { all: unset; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.menu-legal a:hover, .menu-legal button:hover { color: var(--ink); }
/* credits */
.credits { padding: 6px 30px 24px; }
.credits dl { margin: 0 0 8px; }
.credit-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--panel-edge); font-size: 13px; }
.credit-row:last-child { border-bottom: 0; }
.credit-row dt { color: var(--ink-faint); }
.credit-row dd { margin: 0; color: var(--ink); min-width: 0; }
.credit-row a { color: var(--ink); text-decoration-color: var(--panel-edge); text-underline-offset: 3px; }
.credit-row a:hover { color: var(--accent); }
.credit-lic { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--ink-faint); }
/* keyboard shortcuts */
.shortcuts-modal { width: min(480px, calc(100vw - 32px)); }
.sc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sc-close { all: unset; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -8px 0 0; border-radius: 50%; color: var(--ink-faint); cursor: pointer; }
.sc-close:hover { color: var(--ink); background: var(--panel-dim); }
.sc-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-body { display: flex; flex-direction: column; gap: 18px; padding: 10px 30px 28px; max-height: min(70vh, 560px); overflow-y: auto; }
.sc-group h3 { margin: 0 0 6px; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.sc-group dl { margin: 0; }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--panel-edge); font-size: 13px; }
.sc-row:last-child { border-bottom: 0; }
.sc-row dt { color: var(--ink); min-width: 0; }
.sc-row dd { margin: 0; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-faint); font-size: 12px; white-space: nowrap; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border: 1px solid var(--panel-edge); border-bottom-width: 2px; border-radius: 6px; background: var(--panel-dim); color: var(--ink); font: 500 11.5px var(--sans); }
.modal-header { padding: 28px 30px 6px; }
.modal .eyebrow { margin-bottom: 8px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.modal h2 { margin: 0; font: 400 27px var(--serif); letter-spacing: var(--serif-ls); color: var(--ink); }
.modal form { display: flex; flex-direction: column; gap: 18px; padding: 8px 30px 24px; }
.modal .credit { margin: -4px 0 0; font-size: 11px; line-height: 1.4; color: var(--ink-faint); }
.modal .credit a { color: inherit; }

.type-toggle { display: inline-flex; gap: 2px; margin-top: 14px; padding: 3px; border: 1px solid var(--panel-edge); border-radius: 999px; background: var(--wall-dim); }
.type-toggle button { all: unset; padding: 6px 16px; border-radius: 999px; font: 500 11.5px var(--sans); color: var(--ink-soft); cursor: pointer; transition: background 0.15s, color 0.15s; }
.type-toggle button.on { background: var(--ink); color: var(--panel); }
.type-toggle button:not(.on):hover { color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.field input[type=text], .field input[type=number], .field input[type=email], .field input[type=password] {
  padding: 6px 0;
  border: none;
  border-bottom: 1px solid var(--panel-edge);
  border-radius: 0;
  outline: none;
  background: transparent;
  font: 400 18px var(--serif);
  color: var(--ink);
  transition: border-color 0.2s;
}
.field input:focus { border-bottom-color: var(--accent); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 26px; height: 40px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  background-clip: padding-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.on { border-color: var(--ink); transform: translateY(-2px); }

.stars { display: flex; gap: 4px; }
.star { all: unset; font-size: 22px; line-height: 1; color: var(--ink-faint); cursor: pointer; transition: color 0.15s; }
.star.on { color: var(--accent); }


.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 6px; }
.modal-actions .cancel { padding: 11px 14px; border: none; background: transparent; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; transition: color 0.2s; }
.modal-actions .cancel:hover { color: var(--ink); }

/* catalogue suggestions under the title */
.suggest-field { position: relative; }
.suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 5;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  box-shadow: var(--shadow-pop);
}
.suggest-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 4px; cursor: pointer; }
.suggest-row[aria-selected="true"], .suggest-row:hover { background: var(--panel-dim); }
.suggest-row img, .suggest-row .nocover { width: 30px; height: 44px; flex-shrink: 0; object-fit: cover; border-radius: 2px; background: var(--wall-dim); }
.suggest-row .s-text { min-width: 0; }
.suggest-row .s-title { font: 400 16px/1.25 var(--serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-row .s-sub { font-size: 12px; color: var(--ink-soft); }
.suggest .s-note { padding: 10px 12px; font-size: 12.5px; color: var(--ink-soft); }

.picked { display: flex; align-items: center; gap: 12px; margin-top: -8px; padding: 10px 12px; background: var(--panel-dim); border: 1px solid var(--panel-edge); border-radius: 6px; }
.picked img { width: 36px; height: 52px; object-fit: cover; border-radius: 2px; background: var(--wall-dim); }
.picked-meta { flex: 1; min-width: 0; }
.picked-src { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.picked-line { font-size: 13px; color: var(--ink); }
.picked-clear { all: unset; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; }
.picked-clear:hover { color: var(--danger); }

/* ============================================================
   8. Sign-in screen
   ============================================================ */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  background: var(--auth-bg);
}
.auth-screen[hidden] { display: none; }
.auth-card { width: min(440px, 100%); padding: 40px 36px 32px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 8px; box-shadow: var(--shadow-modal); }
.auth-brand h1 { margin: 0 0 8px; font: 400 40px/1.05 var(--serif); letter-spacing: var(--serif-ls); }
.auth-brand p { margin: 0 0 24px; font: italic 400 16px/1.45 var(--serif); color: var(--ink-soft); }
.auth-tabs { display: flex; gap: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--panel-edge); }
.auth-tabs button { all: unset; position: relative; padding: 10px 0; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-soft); cursor: pointer; }
.auth-tabs button.on { color: var(--ink); font-weight: 500; }
.auth-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
#signin-form, #signup-form { display: flex; flex-direction: column; gap: 18px; }
#signin-form[hidden], #signup-form[hidden] { display: none; }
.auth-error { padding: 10px 14px; border: 1px solid var(--danger-wash); border-radius: 4px; background: var(--danger-wash); font-size: 13px; color: var(--danger); }
.auth-error[hidden] { display: none; }

/* ============================================================
   9. Shared bits
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--panel);
  font: 400 15px/1 var(--serif);
}

.primary-btn {
  padding: 11px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--panel);
  font: 500 11px var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.primary-btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.primary-btn.wide { width: 100%; padding-block: 13px; }

.mini-btn {
  all: unset;
  padding: 6px 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mini-btn:hover { background: var(--ink); color: var(--panel); }
.mini-btn.ghost { color: var(--ink-soft); border-color: var(--panel-edge); }
.mini-btn.ghost:hover { color: var(--ink); border-color: var(--ink); background: transparent; }
.mini-btn.danger { color: var(--danger); border-color: transparent; }
.mini-btn.danger:hover { background: var(--danger-wash); border-color: transparent; }
.mini-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.menu-wrap { position: relative; }
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  box-shadow: var(--shadow-pop);
}
.menu[hidden] { display: none; }
.menu button {
  all: unset;
  display: block;
  padding: 9px 14px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.menu button:hover { background: var(--panel-dim); color: var(--accent); }
.menu .divider { height: 1px; margin: 4px 6px; background: var(--panel-edge); }
.menu .note-line { padding: 8px 14px 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }

.toast {
  position: fixed;
  bottom: 30px;
  left: calc(50% + var(--rail-w) / 2);
  z-index: 40;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--panel);
  font-size: 13px;
  box-shadow: var(--shadow-pop);
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.toast[hidden] { display: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
body.has-room .toast { bottom: 82px; }          /* above the room's bar */

/* ============================================================
   10. Phones: the rail becomes a tab bar along the bottom, panels rise
   from below, the owner card spans the top
   ============================================================ */
@media (max-width: 720px) {
  :root { --rail-w: 0px; }
  #scene { height: calc(100% - 58px); }

  .rail {
    top: auto; right: 0;
    width: auto;
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .rail-mark, .rail-grow, .rail [data-tip]::after { display: none; }
  .rail-btn.add, .rail .account-btn { margin-top: 0; }
  .rail .menu { left: auto; right: 0; bottom: calc(100% + 12px); }

  .top-right { top: 8px; left: 8px; right: 8px; flex-direction: column-reverse; align-items: stretch; }
  .owner { width: auto; padding: 10px 12px; }
  .owner-more { margin-top: 8px; padding-top: 8px; }
  .owner-line span { min-width: 0; }
  .light-pick button::after { display: none; }
  .shelf-note { bottom: 162px; }

  .side-panel { top: 30%; bottom: 58px; left: 0; width: 100vw; border-radius: 16px 16px 0 0; transform: translateY(100%); }
  .side-panel.open { transform: translateY(0); }

  body.has-room .pick-hint { display: none; }
  .shelf-note { right: 8px; }
  .toast { bottom: 76px; }
  #shortcuts-btn { display: none; }      /* no keyboard to speak of */
  body.has-room .room-foot { display: none; }   /* the links move to the foot of the account menu */
  .menu-legal { display: block; }
  .auth-screen { flex-direction: column; }
  .auth-foot { position: static; margin-top: 18px; }
  body.has-room .toast { bottom: 128px; }

  .reading-panel { width: 100vw; bottom: 58px; }
  .rp-header { padding: 22px 24px 16px; }
  .rp-meta, .rp-reactions, .rp-tabs, .rp-links, .rp-progress, .rp-list, .rp-compose, .rp-danger { padding-left: 24px; padding-right: 24px; }
  .rp-title { font-size: 24px; }
  .primary-btn { padding: 9px 14px; font-size: 10.5px; }
  .cz-swatches { grid-template-columns: repeat(8, minmax(0, 30px)); gap: 6px; }
}
@media (max-width: 480px) { .row-2 { grid-template-columns: 1fr; } }

/* appearance switch in the account menu: Light · Night · Auto */
.menu .theme-pick { display: flex; gap: 2px; margin: 2px 8px 6px; padding: 2px; border: 1px solid var(--panel-edge); border-radius: 999px; }
.menu .theme-pick button { flex: 1; padding: 6px 10px; border-radius: 999px; font-size: 12px; text-align: center; color: var(--ink-soft); }
.menu .theme-pick button:hover { background: var(--panel-dim); color: var(--ink); }
.menu .theme-pick button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }


/* people: initials, name, handle, and where you stand with them */
.person-av { width: 34px; height: 34px; flex-shrink: 0; font-size: 14px; background: var(--panel-dim); color: var(--ink); }
.person-av.friend { background: var(--accent-wash); color: var(--accent); }
.row-item[role="link"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rel-tag { font-size: 11px; font-weight: 500; color: var(--ink-faint); }
.mini-btn:not(.ghost):not(.danger) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mini-btn:not(.ghost):not(.danger):hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

/* requests waiting for you, on the Friends button */
.rail-btn .badge {
  position: absolute;
  top: 4px; right: 3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font: 600 10px/16px var(--sans);
  text-align: center;
  box-shadow: 0 0 0 2px var(--rail-solid);
}

/* someone's room when you aren't friends: a closed door in the middle */
.room-locked {
  position: fixed;
  top: 50%;
  left: calc(50% + var(--rail-w) / 2);
  transform: translate(-50%, -50%);
  z-index: 5;
  width: min(380px, calc(100vw - var(--rail-w) - 48px));
  padding: 26px 28px 24px;
  text-align: center;
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--card-ink);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.room-locked[hidden] { display: none; }
.room-locked svg { color: var(--accent); }
.room-locked h2 { margin: 10px 0 6px; font: 400 22px/1.2 var(--serif); letter-spacing: var(--serif-ls); }
.room-locked p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--card-dim); }
body.room-is-locked .pick-hint, body.room-is-locked .owner-more { display: none; }

/* ===== Notes, sorting, import ===== */

/* a quotation in the notebook: serif italic behind a rule, its page as a citation */
.note.is-quote .text, .desk-note.is-quote .text {
  padding-left: 14px;
  border-left: 2px solid var(--ink-faint);
  font-style: italic;
}
.note-page {
  display: block;
  margin-top: 6px;
  font: 500 10.5px var(--sans);
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.note.is-quote .note-page::before { content: "— "; }

/* compose and edit: "Quote" and the page */
.rp-compose .row.note-opts, .note-edit .row.note-opts { justify-content: flex-start; gap: 16px; margin-top: 8px; }
.note-edit .row.note-opts { margin-top: 6px; }
.rp-compose .quote-toggle, .note-edit .quote-toggle {
  all: unset;
  padding: 5px 8px;
  border-radius: 3px;
  font: 500 10px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}
.rp-compose .quote-toggle:hover, .note-edit .quote-toggle:hover { color: var(--ink); }
.rp-compose .quote-toggle[aria-pressed="true"], .note-edit .quote-toggle[aria-pressed="true"] { color: var(--accent); background: var(--accent-wash); }
.quote-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-field {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font: 500 10px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.page-field input {
  width: 58px;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid var(--panel-edge);
  outline: 0;
  background: transparent;
  font: 400 13px var(--sans);
  color: var(--ink);
  -moz-appearance: textfield;
}
.page-field input::-webkit-inner-spin-button, .page-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.page-field input:focus { border-bottom-color: var(--accent); }

/* search: Books & films · Notes */
.search-tabs { display: flex; gap: 2px; margin: 12px 18px 0; padding: 3px; border: 1px solid var(--panel-edge); border-radius: 999px; background: var(--wall-dim); }
.search-tabs button { all: unset; flex: 1; padding: 6px 12px; border-radius: 999px; font: 500 11.5px var(--sans); text-align: center; color: var(--ink-soft); cursor: pointer; }
.search-tabs button[aria-selected="true"] { background: var(--ink); color: var(--panel); }
.search-tabs button:not([aria-selected="true"]):hover { color: var(--ink); }
.search-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.note-hit { align-items: stretch; }
.note-hit .nh-text { margin-bottom: 5px; font: 400 15px/1.45 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.note-hit.is-quote .nh-text { padding-left: 10px; border-left: 2px solid var(--ink-faint); font-style: italic; }
.note-hit .nh-page { font: 500 10.5px var(--sans); font-style: normal; color: var(--ink-faint); white-space: nowrap; }
.note-hit .who-handle b { font-weight: 600; color: var(--ink); }
.note-hit mark { padding: 0 1px; border-radius: 2px; background: rgba(230, 190, 60, 0.38); color: inherit; }
:root[data-theme="dark"] .note-hit mark { background: rgba(230, 190, 60, 0.3); }

/* sorting the bookcase in view: a small bar just above the places bar */

/* import: the file, what's in it, and a first look at the rows */
.import-help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.import-modal input[type=file] { font: 400 13px var(--sans); color: var(--ink-soft); }
.import-preview { padding: 14px 16px; border-radius: 6px; background: var(--panel-dim); }
.import-preview[hidden] { display: none; }
.import-counts { margin: 0 0 6px; font: 400 17px/1.35 var(--serif); color: var(--ink); }
.import-note { margin: 0 0 6px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.import-note.warn { color: var(--danger); }
.import-rows { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 12px; color: var(--ink); }
.import-rows td { padding: 4px 6px 4px 0; border-top: 1px solid var(--panel-edge); vertical-align: top; }
.import-rows td:first-child { font-family: var(--serif); font-size: 13.5px; }
.import-rows td:not(:first-child) { color: var(--ink-soft); white-space: nowrap; }
.import-rows td.stars { color: var(--accent); letter-spacing: 0.05em; }
.import-rows tr.have { opacity: 0.45; }
.import-modal .primary-btn:disabled { opacity: 0.45; cursor: default; transform: none; }

@media (max-width: 720px) {
  }

/* ===== Account, notifications, app ===== */

/* the account menu's dialogs (account.js): the add form's .modal, smaller */
.account-modal { width: min(440px, 92vw); }
.account-modal .invite-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 30px 24px; }
.account-modal .invite-body > * { align-self: stretch; }
.account-modal .invite-body > .primary-btn { align-self: flex-start; }
.account-modal .modal-actions { margin-top: 0; }
.modal-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.primary-btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.primary-btn.danger-btn { background: var(--danger); border-color: var(--danger); color: #fff; }
.primary-btn.danger-btn:not(:disabled):hover { background: var(--danger); border-color: var(--danger); filter: brightness(1.08); }

/* invite a friend: the link with its Copy button, then your invites */
.invite-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; background: var(--panel-dim); border: 1px solid var(--panel-edge); border-radius: 8px; }
.invite-link[hidden] { display: none; }
.invite-link input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 13px var(--sans); color: var(--ink); }
.invite-head { margin-top: 4px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.invite-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.invite-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--panel-edge); font-size: 13px; color: var(--ink); }
.invite-row:last-child { border-bottom: 0; }
.invite-row.done { color: var(--ink-faint); }
.invite-code { font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-faint); }
.invite-status { flex: 1; min-width: 0; }

/* sign-up by invitation */
.auth-note { margin: 0; padding: 10px 14px; border-radius: 4px; background: var(--accent-wash); font-size: 13px; line-height: 1.5; color: var(--ink); }
.auth-note[hidden] { display: none; }
#signup-form.by-invitation > :not(.auth-note) { display: none; }

/* notifications: one row each, unread ones with a dot and a wash */
button.row-item.notif-row { align-items: flex-start; }
button.row-item.notif-row:disabled { cursor: default; }
button.row-item.notif-row:disabled:hover { background: none; }
.notif-row .person-av { margin-top: 2px; }
.notif-text { display: block; margin-bottom: 3px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.notif-text b { font-weight: 600; color: var(--ink); }
.notif-text i { font: italic 400 15px var(--serif); letter-spacing: var(--serif-ls); color: var(--ink); }
.notif-row.unread { background: var(--accent-wash); }
.notif-row.unread .person-av { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--danger); }
.notif-row + .notif-row { margin-top: 2px; }

/* phones: the bell joins the tab bar, and buttons may narrow */
@media (max-width: 720px) {
  .rail-btn, .rail .account-btn { flex: 0 1 42px; min-width: 34px; }
}
/* ===== Reading life: dates, want to read, stats, lending ===== */
:root { --rl-books: #2f69a8; --rl-films: #c0843a; }
:root[data-theme="dark"] { --rl-books: #5b93d6; --rl-films: #bf8236; }

/* add form: Read it / Want to read, and the finished date */
.type-toggle.rl-status { align-self: flex-start; margin-top: 0; }
.picked[hidden] { display: none; }   /* .picked's display: flex outranked [hidden]: the empty card showed on a fresh form */
.modal.is-wishlist .rl-date-field, .modal.is-wishlist .rl-year-field, .modal.is-wishlist .rl-rating-field { display: none; }
.field input[type=date] {
  padding: 5px 0;
  border: none;
  border-bottom: 1px solid var(--panel-edge);
  border-radius: 0;
  outline: none;
  background: transparent;
  font: 400 16px var(--serif);
  color: var(--ink);
}

/* inline asks: a date to mark something read, a name to lend it to */
.rl-ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rl-ask input {
  padding: 4px 8px;
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  background: var(--panel);
  font: 400 12.5px var(--sans);
  color: var(--ink);
  outline: none;
}
.rl-ask input:focus { border-color: var(--accent); }
.rl-ask input[type=text] { width: 130px; }
.rp-links .rl-ask button { padding: 5px 10px; }
.rp-links .rl-lent { padding: 5px 10px; border-radius: 999px; font-size: 11.5px; color: var(--ink); background: var(--accent-wash); }

/* want-to-read list */
.rl-wish { cursor: default; flex-wrap: wrap; }
.rl-wish:has(.rl-ask) .who-actions { flex-basis: 100%; justify-content: flex-start; padding-left: 20px; }
.rl-wish .who-meta { flex: 1; min-width: 0; }
.rl-wish .who-actions { flex-wrap: wrap; justify-content: flex-end; }
.rl-thumb { width: 28px; height: 42px; flex-shrink: 0; object-fit: cover; border-radius: 2px; background: var(--panel-dim); }

/* year in review */
.rl-stats { padding-bottom: 18px; }
.rl-headline { display: flex; flex-direction: column; gap: 4px; margin: 6px 18px 14px; padding: 16px 18px; border-radius: 10px; background: var(--accent-wash); }
.rl-headline span { font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.rl-headline b { font: 400 24px/1.2 var(--serif); letter-spacing: var(--serif-ls); color: var(--ink); }
.rl-headline em { font-style: normal; font-size: 12.5px; color: var(--ink-soft); }
.rl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 18px 8px; }
.rl-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--panel-edge); border-radius: 8px; }
.rl-tile span { font-size: 11px; color: var(--ink-soft); }
.rl-tile b { font: 500 18px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.rl-legend { display: flex; gap: 14px; margin: 0 18px 8px; font-size: 11.5px; color: var(--ink-soft); }
.rl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rl-key { width: 10px; height: 10px; border-radius: 2px; }
.rl-key.books, .rl-bar.books { background: var(--rl-books); }
.rl-key.films, .rl-bar.films { background: var(--rl-films); }
.rl-chart { display: flex; flex-direction: column; gap: 8px; margin: 0 18px 10px; }
.rl-year { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; }
.rl-year-label { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rl-bars { display: flex; flex-direction: column; gap: 2px; }
.rl-bar-line { display: flex; align-items: center; gap: 6px; height: 12px; }
.rl-bar { display: block; height: 10px; border-radius: 0 4px 4px 0; }
.rl-bar-line i { font-style: normal; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rl-bar-line:hover i { color: var(--ink); }
.rl-top { margin: 0 18px 6px; padding: 0; list-style: none; counter-reset: rl; }
.rl-top li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--panel-edge); font-size: 13.5px; color: var(--ink); counter-increment: rl; }
.rl-top li span::before { content: counter(rl) ".  "; color: var(--ink-faint); }
.rl-top li b { font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* phones: the two extra rail buttons still fit the tab bar */
@media (max-width: 440px) { .rail-btn, .rail .account-btn { width: 34px; } }

/* ===== Shell: sidebar, tabs, library, welcome ===== */

/* tabs at the top of a panel: the segmented pill (.search-tabs), with a
   count on a tab when something waits there */
.tab-strip { margin-bottom: 4px; }
.tab-strip button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.tab-badge {
  min-width: 15px; height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font: 600 9.5px/15px var(--sans);
  text-align: center;
}
.tab-badge[hidden] { display: none; }
.tab-body { padding-top: 6px; }
.tab-body:focus-visible { outline: none; }
.sp-actions { display: flex; gap: 8px; margin: 0 18px 12px; }

/* four tabs in a narrow panel: smaller words, no wasted padding */
.tab-strip button { padding: 6px 8px; }
#sp-body[data-panel="library"] .tab-strip button { padding: 6px 6px; font-size: 11px; }

/* the toast with an Undo in it */
.toast-action {
  all: unset;
  margin-left: 2px;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.toast-action:hover { text-decoration-thickness: 2px; }
.toast-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* a longer text field in a dialog (Edit profile: about you) */
.field textarea {
  padding: 6px 0;
  border: none;
  border-bottom: 1px solid var(--panel-edge);
  outline: none;
  background: transparent;
  resize: vertical;
  font: 400 16px/1.45 var(--serif);
  color: var(--ink);
}
.field textarea:focus { border-bottom-color: var(--accent); }

/* editing a note: who can see it on the left, Cancel and Save on the right */
.note-edit .row:has(.vis-picker) { justify-content: space-between; align-items: center; }
.note-edit .row > span { display: inline-flex; gap: 14px; }

/* a new account's empty room: three first steps in the middle (like the closed door) */
.welcome {
  position: fixed;
  top: 50%;
  left: calc(50% + var(--rail-w) / 2);
  transform: translate(-50%, -50%);
  z-index: 5;
  width: min(420px, calc(100vw - var(--rail-w) - 32px));
  padding: 24px 24px 16px;
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--card-ink);
  border: 1px solid var(--card-edge);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}
.welcome[hidden] { display: none; }
.welcome h2 { margin: 0 0 4px; font: 400 24px/1.2 var(--serif); letter-spacing: var(--serif-ls); text-align: center; }
.welcome > p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--card-dim); text-align: center; }
.welcome-steps { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.welcome-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--card-edge); }
.welcome-tick {
  flex: 0 0 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--card-edge);
  font: 600 12px var(--sans);
  color: var(--card-dim);
}
.welcome-steps li.done .welcome-tick { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.welcome-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.welcome-text b { font-size: 14px; font-weight: 500; }
.welcome-text i { font-style: normal; font-size: 12px; color: var(--card-dim); }
.welcome-steps li.done .welcome-text b { color: var(--card-dim); text-decoration: line-through; text-decoration-color: var(--card-edge); }
.welcome-steps .mini-btn { flex-shrink: 0; }
.welcome-skip {
  all: unset;
  display: block;
  margin: 10px auto 0;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--card-dim);
  cursor: pointer;
}
.welcome-skip:hover { color: var(--card-ink); text-decoration: underline; }
.welcome-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 720px) {
  .welcome { top: auto; bottom: 70px; transform: translateX(-50%); }
}

/* ===== Room navigation: the dock, shelf names, arrows, selection ===== */
:root { --brass: #c9a45a; }

/* the room dock, bottom centre: one bar of same-size round buttons, home
   first. It's placed by its left edge (centred while closed), so when the
   light opens at its right end nothing else moves. */
.room-dock {
  --dock-half: 25px;                    /* half the bar with home alone */
  position: fixed;
  bottom: 16px;
  left: calc(50% + var(--rail-w) / 2);
  transform: translateX(calc(-1 * var(--dock-half)));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--rail-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rail-edge);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.room-dock:has(.room-controls:not([hidden])) { --dock-half: 97.5px; }   /* home, divider, three buttons */
.room-dock[hidden] { display: none; }
.room-controls { display: contents; }
.room-controls[hidden] { display: none; }
.rd-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--rail-edge); }
.rd-btn {
  all: unset;
  position: relative;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--rail-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rd-btn:hover { color: var(--rail-ink); background: var(--rail-hover); }
.rd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd-btn:disabled { opacity: 0.35; cursor: default; background: none; }
.rd-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-wash); }
.rd-home[aria-pressed="true"] { cursor: default; }
.rd-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--tip-bg);
  color: var(--tip-ink);
  font: 500 11.5px var(--sans);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s, transform 0.12s;
}
.rd-btn:not(:disabled):hover::after, .rd-btn:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.rd-home[aria-pressed="true"]:hover::after { opacity: 0; }
body.has-room .pick-hint { bottom: 76px; }

/* at a bookcase: ‹ › to the bookcases beside it, ˄ ˅ a shelf at a time */
.case-arrows[hidden], .ca-btn[hidden] { display: none; }
.ca-btn {
  all: unset;
  position: fixed;
  z-index: 5;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid var(--rail-edge);
  border-radius: 50%;
  background: var(--rail-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  color: var(--rail-ink);
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 0.15s, background 0.15s;
}
.ca-btn:hover { opacity: 1; background: var(--rail-solid); }
.ca-btn:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.ca-prev { left: calc(var(--rail-w) + 14px); top: calc(50% - 22px); }
.ca-next { right: 16px; top: calc(50% - 22px); }
.ca-up { right: 16px; top: calc(50% - 78px); }
.ca-down { right: 16px; top: calc(50% + 34px); }

/* Visit a room ▾, on the owner card */
.owner-head .visit { position: relative; flex-shrink: 0; align-self: flex-start; }
.visit-btn {
  all: unset;
  padding: 5px 10px;
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  font: 500 11.5px var(--sans);
  color: var(--card-dim);
  white-space: nowrap;
  cursor: pointer;
}
.visit-btn:hover, .visit-btn[aria-expanded="true"] { color: var(--card-ink); border-color: var(--card-ink); }
.visit-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visit-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 240px;
  max-height: min(360px, 60vh);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
}
.visit-menu[hidden] { display: none; }
.visit-menu button {
  all: unset;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.visit-menu button:hover, .visit-menu button:focus-visible { background: var(--panel-dim); color: var(--accent); }
.visit-menu button[aria-current] { color: var(--ink-faint); }
.visit-menu .visit-av { width: 26px; height: 26px; font-size: 12px; background: var(--avatar-bg); color: var(--avatar-ink); }
.visit-menu .visit-av.other { background: var(--friend); }
.visit-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visit-note { padding: 8px 10px 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }

/* naming a shelf: a chip at the shelf's left end, just under its front edge */
.shelf-chips { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.shelf-chip { position: absolute; top: 0; left: 0; pointer-events: auto; transition: opacity 0.15s; }
.shelf-chip[hidden] { display: none; }
.shelf-chip:not(.show):not(:focus-within) { opacity: 0; pointer-events: none; }
.shelf-chip .chip-btn {
  all: unset;
  display: inline-block;
  max-width: 220px;
  padding: 3px 10px;
  border: 1px dashed rgba(246, 238, 223, 0.55);
  border-radius: 999px;
  background: rgba(20, 16, 12, 0.72);
  color: var(--on-room);
  font: 500 11.5px var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.shelf-chip.named .chip-btn { border-style: solid; border-color: var(--brass); }
.shelf-chip.named .chip-btn::after { content: ' ✎'; opacity: 0.7; }
.shelf-chip .chip-btn:hover { background: rgba(20, 16, 12, 0.88); }
.shelf-chip .chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shelf-chip input {
  width: 200px;
  padding: 4px 10px;
  border: 1px solid var(--brass);
  border-radius: 999px;
  outline: none;
  background: var(--panel);
  color: var(--ink);
  font: 500 12px var(--sans);
  box-shadow: var(--shadow-soft);
}

/* picking several: the pill at the top of the room, and the list of shelves */
.pick-bar {
  position: fixed;
  top: 12px;
  left: calc(50% + var(--rail-w) / 2);
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--rail-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rail-edge);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.pick-bar[hidden], .pick-bar button[hidden] { display: none; }
.pick-bar button { all: unset; padding: 6px 12px; border-radius: 999px; font: 500 12px var(--sans); color: var(--rail-dim); white-space: nowrap; cursor: pointer; }
.pick-bar button:hover { color: var(--rail-ink); background: var(--rail-hover); }
.pick-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-bar .pb-select[aria-pressed="true"] { background: var(--rail-ink); color: var(--rail-solid); }
.pick-bar .pb-count { padding: 0 6px 0 8px; font: 600 12px var(--sans); color: var(--accent); white-space: nowrap; }
.pick-bar .pb-count:empty { display: none; }
.pick-bar .pb-move { color: var(--on-accent); background: var(--accent); }
.pick-bar .pb-move:hover { color: var(--on-accent); background: var(--accent-hover); }
.move-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  max-height: min(420px, 62vh);
  overflow-y: auto;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
}
.move-list[hidden] { display: none; }
.move-list .ml-case { padding: 8px 10px 3px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.pick-bar .move-list button { display: flex; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 6px 10px; border-radius: 5px; font: 400 13px var(--sans); color: var(--ink); }
.pick-bar .move-list button:hover, .pick-bar .move-list button:focus-visible { background: var(--panel-dim); color: var(--accent); outline: none; }
.move-list .ml-shelf { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.move-list .ml-n { flex-shrink: 0; font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* phones: the map sits on the tab bar, the room's buttons stack above it */
@media (max-width: 720px) {
  .room-dock { bottom: 66px; }
  .rd-btn::after { display: none; }
  .shelf-note { bottom: 176px; }
    .pick-bar { top: auto; bottom: 176px; }
  .move-list { top: auto; bottom: calc(100% + 8px); }
  .ca-prev { left: 6px; }
  .ca-next, .ca-up, .ca-down { right: 6px; }
  .welcome { bottom: 166px; }
}

/* the "Visit a room" door and the "pick several" switch: round icon buttons */
.visit-btn { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 50%; flex-shrink: 0; }
.room-select-btn[hidden] { display: none; }
.room-select-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
/* phones: the card stays compact so the bookcases show — counts only */
@media (max-width: 720px) {
  .owner-lines { display: none; }
  .owner-more { margin-top: 6px; padding-top: 6px; }
}

/* ⋯ on a person: further actions in a small menu */
.more-wrap { position: relative; }
.more-btn { all: unset; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); cursor: pointer; }
.more-btn:hover, .more-btn[aria-expanded="true"] { background: var(--panel-dim); color: var(--ink); }
.more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
  min-width: 150px; padding: 4px;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 8px;
  box-shadow: var(--shadow-pop);
}
.more-menu[hidden] { display: none; }
.more-menu button { all: unset; display: block; box-sizing: border-box; width: 100%; padding: 8px 12px; border-radius: 5px; font-size: 13px; color: var(--ink); cursor: pointer; }
.more-menu button:hover, .more-menu button:focus-visible { background: var(--panel-dim); outline: none; }
.more-menu button.danger { color: var(--danger); }

/* between rooms: the room dims behind a soft curtain with whose room it is */
.room-travel {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  left: var(--rail-w);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--wall) 70%, transparent) 0%, var(--wall) 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out);
}
.room-travel[hidden] { display: none; }
.room-travel.on { opacity: 1; pointer-events: auto; }
.rt-av { width: 56px; height: 56px; font-size: 22px; background: var(--avatar-bg); color: var(--avatar-ink); transform: translateY(6px); transition: transform 0.6s var(--ease-out); }
.rt-name { font: 400 30px/1.2 var(--serif); letter-spacing: var(--serif-ls); color: var(--ink); transform: translateY(8px); transition: transform 0.6s var(--ease-out); }
.room-travel.on .rt-av, .room-travel.on .rt-name { transform: none; }
@media (max-width: 720px) { .room-travel { bottom: 58px; } .rt-name { font-size: 24px; } }