/* ═══════════════════════════════════════════════
   THE READING ROOM — "Sunlit Library"
   Warm parchment tones, high contrast, cover-forward
   Designed mobile-first for readability and touch
   ═══════════════════════════════════════════════ */

@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  button { font: inherit; border: none; background: none; cursor: pointer; }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }
}

@layer base {
  :root {
    /* Booklit palette — warm beige, teal, coral, sage */
    --bg: #f5f0e8;
    --bg-warm: #ede7db;
    --card: #fdfbf7;
    --card-hover: #ffffff;
    --surface: #e6e0d4;
    --surface-deep: #ddd5c5;
    --border: rgba(44, 53, 48, 0.09);
    --border-strong: rgba(44, 53, 48, 0.16);

    /* Text */
    --ink: #2c3530;
    --ink-secondary: #454f4a;
    --ink-muted: #6b756e;
    --ink-faint: #9ca39e;

    /* Accents from logo */
    --coral: #c96b4f;
    --coral-strong: #b35a40;
    --coral-bg: rgba(201, 107, 79, 0.09);
    --coral-bg-strong: rgba(201, 107, 79, 0.16);

    /* Keep amber aliases pointing to coral for minimal code changes */
    --amber: var(--coral);
    --amber-strong: var(--coral-strong);
    --amber-bg: var(--coral-bg);
    --amber-bg-strong: var(--coral-bg-strong);

    --teal: #3d5a52;
    --teal-bg: rgba(61, 90, 82, 0.08);
    --sage: #7a8c7a;
    --sage-bg: rgba(122, 140, 122, 0.08);
    --sky: #3d5a52;
    --sky-bg: rgba(61, 90, 82, 0.08);
    --dust: #8a857e;
    --dust-bg: rgba(138, 133, 126, 0.08);
    --red: #b04040;

    /* Typography */
    --serif: 'Fraunces', 'Georgia', serif;
    --sans: 'Outfit', system-ui, sans-serif;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;

    /* Radii */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 0.18s var(--ease-out);
    --t-med: 0.3s var(--ease-out);
    --t-slow: 0.45s var(--ease-out);
  }

  html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    background: var(--bg);
    background-image:
      radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201, 107, 79, 0.04) 0%, transparent 70%);
  }

  ::selection {
    background: var(--amber);
    color: #fff;
  }
}

/* ═══ GRAIN — subtle warmth texture ═══ */
@layer components {
  .grain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.018;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
  }
}

/* ═══ TOPBAR ═══ */
@layer components {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(246, 241, 233, 0.88);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid var(--border);
  }

  .topbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity var(--t-fast);
  }

  .logo:hover { opacity: 0.7; }

  .logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .logo-text {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }

  .topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .stats {
    display: flex;
    gap: var(--space-lg);
    font-size: 0.8rem;
    color: var(--ink-muted);
    font-weight: 500;
  }

  .stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .stat-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
  }
}

/* ═══ HERO ═══ */
@layer components {
  .hero {
    padding: var(--space-xl) 0 var(--space-lg);
    text-align: center;
  }

  .hero-deco {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: var(--space-lg);
  }

  .hero-deco span {
    display: block;
    width: 12px;
    border-radius: 3px;
    animation: shelfPulse 3s ease-in-out infinite;
  }

  .hero-deco span:nth-child(1) { height: 24px; animation-delay: 0s; background: var(--teal); opacity: 0.35; }
  .hero-deco span:nth-child(2) { height: 30px; animation-delay: 0.4s; background: var(--coral); opacity: 0.35; }
  .hero-deco span:nth-child(3) { height: 20px; animation-delay: 0.8s; background: var(--sage); opacity: 0.35; }

  @keyframes shelfPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 0.5; transform: scaleY(1.06); }
  }

  .hero-tagline {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 300;
    font-style: italic;
    color: var(--ink-muted);
    letter-spacing: 0.03em;
    font-variation-settings: 'opsz' 12;
  }
}

/* ═══ RECOMMENDATIONS PANE ═══ */
@layer components {
  .recs-pane {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    position: relative;
  }

  /* Subtle shelf edge — a warm wooden line */
  .recs-pane::after {
    content: '';
    display: block;
    height: 3px;
    margin-top: var(--space-md);
    border-radius: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--surface-deep) 15%,
      var(--surface) 50%,
      var(--surface-deep) 85%,
      transparent 100%
    );
  }

  .recs-heading {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
  }

  /* ── Editorial shelf framing ──
     The "For You" shelf gets a curated-broadsheet treatment: a tiny
     uppercase eyebrow line ("dateline · N picks · from your library")
     above a serif title, separated from the cards by a thin rule with a
     centered fleuron. The whole header reads like a typeset frontispiece
     — restrained, literary, unmistakably Booklit. */
  .recs-shelf-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-md);
    padding-top: 4px;
  }
  .recs-shelf-eyebrow {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
  }
  .recs-shelf-eyebrow:empty { display: none; }
  .recs-shelf-eyebrow em {
    font-style: normal;
    color: var(--ink-secondary);
    text-transform: none;
    letter-spacing: 0.04em;
    font-weight: 500;
    font-size: 0.66rem;
  }
  .recs-shelf-eyebrow-from { display: inline-flex; align-items: baseline; gap: 4px; }
  .recs-shelf-eyebrow-dot {
    color: var(--coral);
    font-weight: 700;
    transform: translateY(-1px);
  }
  .recs-shelf-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
  }
  .recs-shelf-title-row .recs-heading {
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.012em;
    /* Optical: drop the serif's natural baseline a hair so it sits cleanly
       against the rule below. */
    line-height: 1.1;
  }
  .recs-shelf-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .recs-shelf-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
  }
  .recs-shelf-rule-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border-strong) 35%, var(--border-strong) 65%, transparent 100%);
  }
  .recs-shelf-rule-orn {
    color: var(--coral);
    font-size: 0.85rem;
    line-height: 1;
    transform: translateY(-1px);
    /* Soft glow ties the ornament to the wildcard accent below. */
    text-shadow: 0 0 8px rgba(201, 107, 79, 0.18);
  }

  .recs-info-wrap {
    position: relative;
    display: inline-flex;
    margin-left: var(--space-sm);
  }

  .recs-info-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: all var(--t-fast);
  }
  .recs-info-btn:hover { color: var(--ink-secondary); background: var(--surface); }

  .recs-info-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 10px 14px;
    box-shadow: 0 4px 20px rgba(44, 53, 48, 0.10), 0 1px 4px rgba(44, 53, 48, 0.06);
    z-index: 20;
    white-space: nowrap;
    min-width: 160px;
  }
  .recs-info-popup p {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 3px 0;
    font-size: 0.73rem;
    line-height: 1.6;
  }
  .recs-info-popup p + p { border-top: 1px solid var(--border); }
  .recs-info-popup .info-label { color: var(--ink-muted); font-weight: 400; }
  .recs-info-popup .info-value { color: var(--ink); font-weight: 500; }

  .recs-batch-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: var(--space-sm);
  }

  .recs-batch-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--ink-muted);
    background: none;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--t-fast);
    padding: 0;
  }
  .recs-batch-btn:hover:not(:disabled) { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
  .recs-batch-btn:disabled { opacity: 0.3; cursor: default; }

  .recs-batch-label {
    font-size: 0.72rem;
    color: var(--ink-muted);
    white-space: nowrap;
    padding: 0 4px;
  }

  .recs-config-btn {
    background: none;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 5px 10px;
    color: var(--ink-faint);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-family: var(--sans);
    transition: all var(--t-fast);
  }
  .recs-config-btn:hover { color: var(--ink-secondary); background: var(--surface); border-color: var(--border-strong); }

  /* ── Edge-fade indicators ──
     A subtle gradient fades into the page background on the edge that
     has more cards offscreen. JS toggles `data-overflow-left` /
     `data-overflow-right` attributes on the wrapper as the user
     scrolls (or as the layout changes). The fade is drawn on the
     wrapper, not the scroll element, so it stays pinned while content
     slides past underneath. */
  .recs-scroll-edges,
  .recs-swimlane-track-edges {
    position: relative;
    /* Lets fades extend slightly past the cards' radius without
       clipping them; the scroll element handles its own clipping. */
  }
  .recs-scroll-edges::before,
  .recs-scroll-edges::after,
  .recs-swimlane-track-edges::before,
  .recs-swimlane-track-edges::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s var(--ease-out);
    z-index: 4;
  }
  .recs-scroll-edges::before,
  .recs-swimlane-track-edges::before {
    left: 0;
    background: linear-gradient(
      to right,
      var(--bg) 0%,
      rgba(245, 240, 232, 0.85) 35%,
      transparent 100%
    );
  }
  .recs-scroll-edges::after,
  .recs-swimlane-track-edges::after {
    right: 0;
    background: linear-gradient(
      to left,
      var(--bg) 0%,
      rgba(245, 240, 232, 0.85) 35%,
      transparent 100%
    );
  }
  .recs-scroll-edges[data-overflow-left]::before,
  .recs-swimlane-track-edges[data-overflow-left]::before { opacity: 1; }
  .recs-scroll-edges[data-overflow-right]::after,
  .recs-swimlane-track-edges[data-overflow-right]::after { opacity: 1; }

  /* ── Curated shelf — flex-wrap row, no horizontal scroll on wide
     viewports. The All Books recommendation shelf shows only the latest
     batch (the Recommendations page is where users dig into history),
     so on a desktop we drop the scrollbar entirely and let cards wrap
     naturally. `align-items: stretch` (the flex default) keeps every
     card in a row the same height regardless of pitch length. On
     narrow viewports the wrapped cards would stack into a tall single
     column that buries the rest of the page, so we switch back to a
     single horizontal scroll row there (see media query below). */
  .recs-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 16px;
    padding: 4px 2px 8px;
    align-items: stretch;
    overflow: visible;
  }
  @media (max-width: 760px) {
    .recs-scroll {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      padding-bottom: 14px;
      scrollbar-width: thin;
      scrollbar-color: rgba(44, 53, 48, 0.30) rgba(44, 53, 48, 0.06);
    }
    .recs-scroll::-webkit-scrollbar { height: 8px; }
    .recs-scroll::-webkit-scrollbar-track {
      background: rgba(44, 53, 48, 0.05);
      border-radius: 4px;
      margin: 0 12px;
    }
    .recs-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(44, 53, 48, 0.40), rgba(44, 53, 48, 0.28));
      border: 1px solid rgba(255, 255, 255, 0.30);
      border-radius: 4px;
    }
    .recs-scroll > .recs-card { scroll-snap-align: start; }
  }

  /* ── Batch separator ── */
  .recs-batch-sep {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    align-self: stretch;
    scroll-snap-align: start;
    gap: 6px;
  }
  .recs-batch-sep-date {
    font-size: 0.65rem;
    font-family: var(--sans);
    font-weight: 500;
    color: var(--ink-muted);
    white-space: nowrap;
    letter-spacing: 0.02em;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    opacity: 0.7;
  }
  .recs-batch-sep-line {
    flex: 1;
    width: 1px;
    min-height: 24px;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--border-strong) 20%,
      var(--border-strong) 80%,
      transparent
    );
  }

  /* ── Load-more sentinel ── */
  .recs-load-sentinel {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
  }
  .recs-load-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: var(--ink-faint);
    font-family: var(--sans);
    animation: recsPulse 2s ease-in-out infinite;
  }
  @keyframes recsPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
  }
  .recs-loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* ── Recommendation card ── */
  .recs-card {
    flex: 0 0 148px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px var(--border);
    animation: recsCardIn 0.45s var(--ease-out) both;
    animation-delay: var(--i, 0);
    position: relative;
  }
  .recs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(44, 53, 48, 0.1), 0 0 0 1px var(--border-strong);
  }

  /* Wildcard "out of your usual taste" accent — coral ring, warm glow,
     corner notch + bottom badge so the card stands out without changing
     its footprint. (No rotation: it interfered with the entry animation
     and read as a sizing glitch instead of a deliberate accent.) */
  .recs-card--wildcard {
    box-shadow:
      0 4px 14px rgba(201, 107, 79, 0.18),
      0 1px 3px rgba(44, 53, 48, 0.06),
      0 0 0 1.5px var(--coral);
    z-index: 1;
  }
  .recs-card--wildcard:hover {
    box-shadow:
      0 12px 28px rgba(201, 107, 79, 0.26),
      0 2px 6px rgba(44, 53, 48, 0.08),
      0 0 0 2px var(--coral);
  }
  /* Hand-cut paper corner — a small coral triangle in the top-left.
     Quietly announces "this one is on purpose, not by ranking". */
  .recs-card--wildcard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 18px 0 0;
    border-color: var(--coral) transparent transparent transparent;
    z-index: 3;
    pointer-events: none;
  }
  .recs-card-wildcard-badge {
    /* Centered along the bottom of the cover — never collides with the
       dismiss button (top-right) and stays single-line regardless of
       translation length. */
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 16px);
    z-index: 2;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--coral);
    border-radius: 999px;
    white-space: nowrap;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(201, 107, 79, 0.35);
  }

  /* Language picker on rec cards — tiny pills that swap the card in place. */
  .recs-card-langs {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .recs-card-lang {
    appearance: none;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  }
  .recs-card-lang:hover { border-color: var(--border-strong); color: var(--ink); }
  .recs-card-lang.active {
    background: var(--ink);
    color: var(--bg, #fff);
    border-color: var(--ink);
  }

  /* Dismiss (X) button */
  .recs-dismiss-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    /* Always visible — mobile has no hover. On desktop we dim it slightly
       until the card is hovered so it doesn't fight for attention. */
    opacity: 0.75;
    transition: opacity 0.15s, background 0.15s;
    padding: 0;
  }
  .recs-card:hover .recs-dismiss-btn,
  .recs-dismiss-btn:focus-visible { opacity: 1; }
  .recs-dismiss-btn:hover { background: rgba(176, 64, 64, 0.85); }

  /* Dismiss-reason popover — rendered at body level (see openDismissPopover)
     so it can escape the card's overflow:hidden. Positioning is set inline
     via getBoundingClientRect; this rule only covers visuals. */
  .recs-dismiss-pop {
    z-index: 1000;
    background: var(--card, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.1));
    border-radius: var(--r-md, 10px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: recsDismissPopIn 0.14s ease-out;
  }
  @keyframes recsDismissPopIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .recs-dismiss-pop-h {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-faint, #888);
    padding: 4px 6px 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .recs-dismiss-reason {
    appearance: none;
    background: none;
    border: none;
    text-align: left;
    padding: 6px 8px;
    font: inherit;
    font-size: 0.85rem;
    border-radius: var(--r-sm, 6px);
    color: var(--ink, inherit);
    cursor: pointer;
  }
  .recs-dismiss-reason:hover,
  .recs-dismiss-reason:focus-visible {
    background: var(--hover, rgba(0,0,0,0.05));
    outline: none;
  }
  .recs-dismiss-reason--negative { color: var(--coral, #c04040); }

  /* Rec-drawer dismiss block (shown only when the book isn't added). */
  .d-dismiss-block { padding-top: var(--space-sm); }
  .d-dismiss-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
  .d-dismiss-reason {
    appearance: none;
    background: var(--surface-muted, rgba(0,0,0,0.04));
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: 999px;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.8rem;
    color: var(--ink, inherit);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .d-dismiss-reason:hover:not(:disabled) {
    background: var(--hover, rgba(0,0,0,0.07));
  }
  .d-dismiss-reason:disabled { opacity: 0.5; cursor: default; }
  .d-dismiss-reason--negative { color: var(--coral, #c04040); }
  .d-dismiss-reason--negative:hover:not(:disabled) {
    background: rgba(176, 64, 64, 0.08);
    border-color: rgba(176, 64, 64, 0.3);
  }
  .d-dismiss-reason--selected {
    background: var(--ink, #2c3530);
    color: #fff;
    border-color: transparent;
  }

  @keyframes recsCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .recs-card-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: var(--surface);
    overflow: hidden;
    position: relative;
  }
  .recs-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .recs-card-cover img.loaded { opacity: 1; }

  .recs-card-cover-pending {
    width: 100%;
    height: 100%;
  }

  .recs-card-nocover {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    overflow: hidden;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
  }
  .recs-card-nocover .gen-cover { border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .recs-card-nocover .gen-cover-letter { font-size: 1.4rem; }
  .recs-card-nocover .gen-cover-title { font-size: 0.52rem; }
  .recs-card-nocover .gen-cover-author { font-size: 0.44rem; }

  .recs-card-info {
    padding: var(--space-sm) 10px var(--space-xs);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .recs-card-title {
    font-family: var(--serif);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .recs-card-author {
    font-size: 0.68rem;
    color: var(--ink-muted);
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recs-card-pitch {
    font-family: var(--serif);
    font-size: 0.68rem;
    font-style: italic;
    color: var(--ink-faint);
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    font-variation-settings: 'opsz' 10;
  }

  .recs-add-btn {
    margin: var(--space-xs) 10px 10px;
    padding: 6px 0;
    font-size: 0.68rem;
    font-weight: 500;
    font-family: var(--sans);
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--t-fast);
    letter-spacing: 0.01em;
  }
  .recs-add-btn:hover { background: var(--ink); }
  .recs-add-btn.added {
    background: var(--sage-bg);
    color: var(--sage);
    cursor: default;
    font-style: italic;
  }

  /* ── Config view ── */
  .recs-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
  }

  .recs-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.78rem;
    font-family: var(--sans);
    color: var(--ink-muted);
    padding: 5px 12px;
    border-radius: 6px;
    transition: all var(--t-fast);
  }
  .recs-back-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }

  .recs-config-body {
    max-width: 420px;
  }

  /* ── Recs config sections ── */
  .recs-cfg-section {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
  }
  .recs-cfg-section:last-child { border-bottom: none; }

  .recs-cfg-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .recs-cfg-sub {
    font-size: 0.78rem;
    color: var(--ink-faint);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
  }
  .recs-cfg-hint {
    font-size: 0.75rem;
    color: var(--ink-faint);
    font-style: italic;
    margin-top: 6px;
  }

  .recs-cfg-days {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .recs-cfg-day {
    padding: 6px 10px;
    font-size: 0.75rem;
    font-family: var(--sans);
    font-weight: 500;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: transparent;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all var(--t-fast);
  }
  .recs-cfg-day:hover {
    border-color: var(--teal);
    color: var(--teal);
  }
  .recs-cfg-day.active {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal);
  }

  .recs-cfg-stats {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
  }
  .recs-cfg-stat {
    font-size: 0.8rem;
    color: var(--ink-secondary);
  }
  .recs-cfg-stat strong {
    font-weight: 600;
    color: var(--ink);
  }

  .recs-cfg-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    font-size: 0.82rem;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    resize: vertical;
    line-height: 1.5;
    transition: border-color var(--t-fast);
  }
  .recs-cfg-textarea:focus {
    outline: none;
    border-color: var(--teal);
  }
  .recs-cfg-textarea::placeholder { color: var(--ink-faint); }

  .recs-cfg-save-desc {
    margin-top: 6px;
    padding: 6px 16px;
    font-size: 0.78rem;
    font-family: var(--sans);
    font-weight: 500;
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast);
  }
  .recs-cfg-save-desc:hover { background: var(--ink); }
  .recs-cfg-save-desc:disabled { opacity: 0.6; cursor: default; }

  /* ── Recs overview (full view) ── */
  .recs-overview {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
  }
  .recs-overview-card {
    flex: 1 1 100px;
    min-width: 90px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
  }
  .recs-overview-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    margin-bottom: 2px;
  }
  .recs-overview-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
  }

  /* ── Filter pills ── */
  .recs-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
  }
  .recs-filter-pill {
    padding: 5px 14px;
    font-size: 0.78rem;
    font-family: var(--sans);
    font-weight: 500;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background: transparent;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all var(--t-fast);
  }
  .recs-filter-pill:hover {
    border-color: var(--teal);
    color: var(--teal);
  }
  .recs-filter-pill.active {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal);
  }

  /* "Show dismissed" toggle — sits with the filter pills but visually
     distinct (icon + dashed border) so it reads as a different kind of
     control rather than just another filter. */
  .recs-dismissed-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-family: var(--sans);
    font-weight: 500;
    border: 1px dashed var(--border-strong);
    border-radius: 20px;
    background: transparent;
    color: var(--ink-faint);
    cursor: pointer;
    transition: all var(--t-fast);
  }
  .recs-dismissed-toggle:hover {
    color: var(--ink-secondary);
    border-color: var(--ink-secondary);
  }
  .recs-dismissed-toggle.active {
    border-style: solid;
    border-color: var(--ink-secondary);
    color: var(--ink);
    background: rgba(44, 53, 48, 0.04);
  }
  .recs-dismissed-toggle svg { flex-shrink: 0; }

  /* Dismissed-card state — shown only on the recs view when the toggle
     is on. Keep the card recognisable but clearly inactive: greyscale
     cover, dimmed info pane, line-through title, no add button. */
  .recs-card--dismissed {
    opacity: 0.7;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 0 0 1px var(--border);
  }
  .recs-card--dismissed:hover {
    opacity: 0.95;
    transform: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 0 0 1px var(--border-strong);
  }
  .recs-card--dismissed .recs-card-cover {
    background: rgba(44, 53, 48, 0.08);
  }
  .recs-card--dismissed .recs-card-cover img,
  .recs-card--dismissed .recs-card-cover .recs-card-nocover {
    filter: grayscale(1) brightness(0.85) contrast(0.9);
  }
  .recs-card--dismissed .recs-card-info {
    background: rgba(44, 53, 48, 0.06);
    color: var(--ink-faint);
  }
  .recs-card--dismissed .recs-card-title {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(44, 53, 48, 0.55);
    color: var(--ink-secondary);
  }
  .recs-card--dismissed .recs-card-author,
  .recs-card--dismissed .recs-card-pitch {
    color: var(--ink-faint);
  }
  /* Hide the wildcard ring/badge on dismissed cards — the dismiss reason
     is the headline now, not "try something different". */
  .recs-card--dismissed.recs-card--wildcard {
    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 0 0 1px var(--border);
  }
  .recs-card--dismissed .recs-card-wildcard-badge { display: none; }
  /* Dismiss-reason chip replacing the X button on dismissed cards. */
  .recs-card-dismissed-reason {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    z-index: 2;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-secondary);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* ── Swimlane source label ── */
  .recs-swimlane-source {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ink-faint);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
  }

  .recs-hint {
    font-size: 0.82rem;
    color: var(--ink-faint);
    margin-bottom: var(--space-md);
  }

  .recs-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: var(--sans);
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast);
    letter-spacing: 0.01em;
  }
  .recs-generate-btn:hover:not(:disabled) { background: var(--ink); transform: translateY(-1px); }
  .recs-generate-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .recs-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── Rec drawer add button ── */
  .recs-drawer-add {
    width: 100%;
    padding: 12px;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: var(--sans);
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast);
  }
  .recs-drawer-add:hover:not(:disabled) { background: var(--ink); }
  .recs-drawer-add.added {
    background: var(--sage-bg);
    color: var(--sage);
    cursor: default;
    font-style: italic;
  }

  .recs-card { cursor: pointer; }

  /* ── Mobile adjustments ── */
  @media (max-width: 680px) {
    .recs-pane { padding: var(--space-md) var(--space-md) var(--space-sm); }
    .recs-card { flex: 0 0 130px; }
    .recs-scroll { gap: 10px; }
    .recs-config-body { max-width: 100%; }
  }
}

/* ═══ LIBRARY TOOLBAR ═══ */
@layer components {
  .shelf-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
  }

  .library-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
  }

  .filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
  }

  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-muted);
    background: var(--bg-warm);
    border: 1px solid var(--border);
    border-radius: 20px;
    white-space: nowrap;
    transition: all var(--t-fast);
    cursor: pointer;
    min-height: 36px;
  }

  .filter-chip:hover {
    color: var(--ink-secondary);
    border-color: var(--border-strong, var(--amber-strong));
  }

  .filter-chip.active {
    color: var(--amber-strong);
    background: var(--amber-bg);
    border-color: var(--amber-strong);
  }

  .filter-chip-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.65;
    background: rgba(0,0,0,0.07);
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
  }

  .filter-chip.active .filter-chip-count {
    background: rgba(0,0,0,0.1);
    opacity: 0.8;
  }

  .sort-select {
    flex-shrink: 0;
    padding: 7px 30px 7px 12px;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-secondary);
    background: var(--bg-warm);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--t-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a857e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-height: 36px;
  }

  .sort-select:hover {
    border-color: var(--border-strong, var(--amber-strong));
    color: var(--ink);
  }

  .sort-select:focus {
    outline: none;
    border-color: var(--amber-strong);
    color: var(--ink);
  }
}

/* ═══ BOOK GRID ═══ */
@layer components {
  .book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    /* Locked-row layout — every card is exactly the same height across
       the entire grid. 240px is the budget for worst-case content
       (3-line title + 1-line author + 2-line excerpt + status row +
       foot row + gaps + padding). Cover stretches via object-fit so
       a 150-wide cover at this height crops cleanly. */
    grid-auto-rows: 240px;
    gap: 16px;
    padding-bottom: var(--space-2xl);
  }

  .book-card {
    max-width: 560px;
    /* Clip overflow if a freakishly long title somehow exceeds the
       budget — better than breaking grid alignment. */
    overflow: hidden;
  }
}

/* ═══ BOOK CARD — Horizontal, cover left, content right ═══ */
@layer components {
  .book-card {
    position: relative;
    display: flex;
    flex-direction: row;
    background: var(--card);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--t-med), box-shadow var(--t-med);
    box-shadow:
      0 1px 3px rgba(0,0,0,0.04),
      0 0 0 1px var(--border);
    animation: cardReveal 0.5s var(--ease-out) both;
    animation-delay: var(--delay, 0s);
  }

  @keyframes cardReveal {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .book-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 16px 48px rgba(0,0,0,0.10),
      0 4px 12px rgba(0,0,0,0.04),
      0 0 0 1px var(--border-strong);
  }

  .book-card:active {
    transform: scale(0.985);
    transition-duration: 0.08s;
  }

  /* Cover — left side, portrait orientation */
  .card-cover {
    width: 150px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-med), opacity var(--t-med);
    opacity: 0;
  }

  .card-cover img.loaded { opacity: 1; }

  .book-card:hover .card-cover img { transform: scale(1.04); }

  /* Page-edge shadow on right side of cover */
  .card-cover::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.06));
    z-index: 1;
  }

  /* No-cover placeholder */
  .card-cover-empty {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--surface) !important;
  }

  .card-cover-empty::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.04));
    z-index: 1;
  }

  .card-cover-empty .cover-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
  }

  .cover-spine[data-status="new"]            { background: var(--amber); }
  .cover-spine[data-status="reading"]        { background: var(--sky); }
  .cover-spine[data-status="finished"]       { background: var(--sage); }
  .cover-spine[data-status="not interested"] { background: var(--dust); }

  .card-cover-empty svg {
    width: 36px;
    height: 36px;
    color: var(--ink-faint);
    opacity: 0.3;
  }

  /* Generative cover placeholder */
  .gen-cover {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }
  .gen-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 40%, rgba(0,0,0,0.12) 100%);
    pointer-events: none;
  }
  .gen-cover-letter {
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    line-height: 1;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
  }
  .gen-cover-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    text-align: center;
    margin-top: 6px;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    position: relative;
    z-index: 1;
  }
  .gen-cover-author {
    font-family: 'Outfit', sans-serif;
    font-size: 0.5rem;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
    text-align: center;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    position: relative;
    z-index: 1;
  }

  /* Card body — four discrete sections stacked vertically.
       1. card-sec-head    Title + author (+ optional suggest badge)
       2. card-sec-resume  Excerpt + optional quote
       3. card-sec-meta    Rating (left) + status badge (right)
          ↳ pinned to bottom via margin-top:auto
       4. card-sec-foot    Date (left) + actions (right), border-top
     Sections are separated by `gap`; no margins on individual fields
     so they can't compound or collide. */
  .card-body {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .card-sec {
    min-width: 0;
  }
  .card-sec-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .card-sec-resume {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* Meta row pins to the bottom (above the foot border) so the bottom
     block — rating · status · separator · date · actions — stays
     grouped even when the title is short and there's whitespace
     above. */
  .card-sec-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
  }
  /* Status badge always hugs the right; rating (when present) sits
     to its left. */
  .card-sec-meta .card-badge {
    margin-left: auto;
    margin-top: 0;
  }

  .card-title {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    font-variation-settings: 'opsz' 28;
    margin: 0;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 9px;
    border-radius: 6px;
    white-space: nowrap;
    margin-top: 2px;
  }

  .card-badge[data-status="new"]            { color: var(--amber-strong); background: var(--amber-bg); }
  .card-badge[data-status="reading"]        { color: var(--sky); background: var(--sky-bg); }
  .card-badge[data-status="wishlist"]       { color: #8a5a18; background: rgba(180, 117, 32, 0.10); }
  .card-badge[data-status="finished"]       { color: var(--sage); background: var(--sage-bg); }
  .card-badge[data-status="not interested"] { color: var(--dust); background: var(--dust-bg); }

  .card-suggest-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 4px;
  }
  .card-suggest-pending  { color: var(--amber-strong); background: var(--amber-bg); }
  .card-suggest-rejected { color: var(--dust); background: var(--dust-bg); }

  .card-author {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ink-muted);
    margin: 0;
    font-family: var(--serif);
    font-weight: 300;
    font-variation-settings: 'opsz' 11;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-excerpt {
    font-size: 0.85rem;
    color: var(--ink-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ink-muted);
    padding-left: 14px;
    border-left: 3px solid var(--amber);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-variation-settings: 'opsz' 12;
  }

  /* Section 4 — date + actions, separated from the meta row by a
     hairline rule so the bottom block reads as a distinct "footer". */
  .card-sec-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  .card-date {
    font-size: 0.72rem;
    color: var(--ink-faint);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
  }

  .card-list-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-faint);
    transition: all var(--t-fast);
  }

  .card-list-btn:hover {
    background: var(--amber-bg);
    color: var(--amber-strong);
  }

  /* List popup on card */
  .card-list-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 50;
    min-width: 180px;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    padding: 6px;
    animation: popIn 0.15s var(--ease-out);
  }

  @keyframes popIn {
    from { opacity: 0; transform: translateY(4px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .clp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--ink-muted);
    text-align: left;
    transition: background var(--t-fast);
    cursor: pointer;
  }

  .clp-item:hover { background: var(--surface); color: var(--ink); }

  .clp-item.active { color: var(--ink); font-weight: 500; }

  .clp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .clp-check {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--amber-strong);
  }

  .card-arrow {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-faint);
    transition: all var(--t-fast);
  }

  .book-card:hover .card-arrow {
    background: var(--amber-bg-strong);
    color: var(--amber);
  }
}

/* ═══ EMPTY STATE ═══ */
@layer components {
  .empty-state {
    text-align: center;
    padding: 80px var(--space-lg) 120px;
  }

  .empty-books {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    margin-bottom: var(--space-lg);
  }

  .empty-book {
    width: 18px;
    height: var(--h, 80px);
    background: var(--c, var(--surface));
    border-radius: 3px;
    opacity: 0.4;
  }

  .empty-text {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-faint);
    font-weight: 300;
    font-variation-settings: 'opsz' 12;
  }
}

/* ═══ LOADING ═══ */
@layer components {
  .loading-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px var(--space-lg);
    color: var(--ink-faint);
    font-size: 0.9rem;
  }

  .book-loader {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: var(--space-md);
  }

  .book-loader-page {
    width: 10px;
    height: 28px;
    background: var(--surface-deep);
    border-radius: 2px;
    animation: loaderFlip 1.2s ease-in-out infinite;
  }

  .book-loader-page:nth-child(2) { animation-delay: 0.15s; height: 34px; }
  .book-loader-page:nth-child(3) { animation-delay: 0.3s; height: 24px; }

  @keyframes loaderFlip {
    0%, 100% { transform: scaleX(1); opacity: 0.3; }
    50% { transform: scaleX(0.5); opacity: 0.7; }
  }
}

/* ═══ DRAWER ═══ */
@layer components {
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(28, 23, 16, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity var(--t-slow);
  }

  .drawer-backdrop.open { opacity: 1; }

  .drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 201;
    width: min(520px, 100vw);
    transform: translateX(100%);
    transition: transform var(--t-slow);
  }

  .drawer.open { transform: translateX(0); }

  .drawer-inner {
    height: 100%;
    overflow-y: auto;
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 40px rgba(0,0,0,0.08);
  }

  .drawer-close {
    position: sticky;
    top: 0;
    float: right;
    margin: var(--space-md) var(--space-md) 0 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border-radius: var(--r-sm);
    color: var(--ink-muted);
    z-index: 2;
    transition: all var(--t-fast);
  }

  .drawer-close:hover {
    background: var(--surface-deep);
    color: var(--ink);
  }

  .drawer-content {
    padding: 20px 32px 48px;
  }

  /* Drawer cover */
  .d-cover-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-xl);
    padding-top: 16px;
  }

  .d-cover {
    position: relative;
    width: 180px;
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow:
      0 10px 40px rgba(0,0,0,0.12),
      0 3px 10px rgba(0,0,0,0.06);
    transition: transform var(--t-med);
  }

  .d-cover:hover { transform: scale(1.03) rotate(-0.5deg); }

  .d-cover img {
    width: 100%;
    display: block;
    object-fit: contain;
    opacity: 0;
    transition: opacity var(--t-med);
  }

  .d-cover img.loaded { opacity: 1; }

  .d-cover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 1;
  }

  .d-cover[data-status="new"]::before            { background: var(--amber); }
  .d-cover[data-status="reading"]::before        { background: var(--sky); }
  .d-cover[data-status="finished"]::before       { background: var(--sage); }
  .d-cover[data-status="not interested"]::before { background: var(--dust); }

  .d-cover::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 8px;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.03) 0px,
      rgba(0,0,0,0.01) 1px,
      transparent 1px,
      transparent 3px
    );
    border-right: 1px solid rgba(0,0,0,0.04);
  }

  .d-cover-placeholder {
    width: 180px;
    height: 250px;
    border-radius: var(--r-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    flex-direction: column;
    gap: 12px;
  }

  .d-find-cover {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--amber-strong);
    background: var(--amber-bg);
    padding: 8px 16px;
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
    min-height: 36px;
    cursor: pointer;
  }

  .d-find-cover:hover { background: var(--amber-bg-strong); }

  .d-find-cover:disabled {
    opacity: 0.6;
    cursor: default;
  }

  .d-manual-cover {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 240px;
    padding: 0 12px;
  }

  .d-cover-input {
    flex: 1;
    min-width: 0;
    font-family: var(--sans);
    font-size: 0.75rem;
    padding: 7px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--card);
    color: var(--ink);
    outline: none;
    transition: border-color var(--t-fast);
  }

  .d-cover-input:focus {
    border-color: var(--amber);
  }

  .d-cover-input::placeholder {
    color: var(--ink-faint);
  }

  .d-cover-save {
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    background: var(--amber);
    padding: 7px 12px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast);
  }

  .d-cover-save:hover { background: var(--amber-strong); }
  .d-cover-save:disabled { opacity: 0.6; cursor: default; }

  .d-cover-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
  }

  .d-change-cover {
    font-size: 0.72rem;
    color: var(--ink-faint);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    margin-top: 4px;
    transition: color var(--t-fast);
  }

  .d-change-cover:hover { color: var(--ink-muted); }

  .d-upload-cover {
    cursor: pointer;
  }

  .d-upload-btn {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--amber-strong);
    background: var(--amber-bg);
    padding: 8px 16px;
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
    display: inline-block;
  }

  .d-upload-btn:hover { background: var(--amber-bg-strong); }

  .d-spine {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    margin-bottom: var(--space-lg);
  }

  .d-spine[data-status="new"]            { background: var(--amber); }
  .d-spine[data-status="reading"]        { background: var(--sky); }
  .d-spine[data-status="finished"]       { background: var(--sage); }
  .d-spine[data-status="not interested"] { background: var(--dust); }

  .d-title {
    font-family: var(--serif);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 8px;
    font-variation-settings: 'opsz' 40;
  }

  .d-author {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    color: var(--ink-muted);
    margin-bottom: var(--space-xl);
    font-variation-settings: 'opsz' 11;
  }

  .d-block { margin-bottom: var(--space-lg); }

  .d-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
  }
  .d-detail-row:last-child { border-bottom: none; }
  .d-detail-label {
    color: var(--ink-faint);
    flex-shrink: 0;
  }
  .d-detail-value {
    color: var(--ink-secondary);
    text-align: right;
  }
  .d-detail-mono {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
  }

  .d-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    margin-bottom: var(--space-sm);
  }

  .d-text {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--ink-secondary);
  }

  .d-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--ink-secondary);
    padding-left: var(--space-md);
    border-left: 3px solid var(--amber);
    white-space: pre-wrap;
    font-variation-settings: 'opsz' 12;
  }

  .d-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--amber-strong);
    padding: 12px 20px;
    border-radius: var(--r-sm);
    background: var(--amber-bg);
    transition: background var(--t-fast);
    min-height: 44px;
  }

  .d-link:hover { background: var(--amber-bg-strong); }

  .d-lists {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .d-list-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-muted);
    transition: all var(--t-fast);
    text-align: left;
    min-height: 42px;
  }

  .d-list-toggle:hover {
    background: var(--surface-deep);
    color: var(--ink-secondary);
  }

  .d-list-toggle.active {
    border-color: var(--amber);
    background: var(--amber-bg);
    color: var(--ink);
  }

  .d-list-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .d-list-check {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--amber-strong);
  }

  .d-statuses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .d-status-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface);
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink-muted);
    transition: all var(--t-fast);
    min-height: 48px; /* touch-friendly */
  }

  .d-status-btn:hover {
    background: var(--surface-deep);
    color: var(--ink-secondary);
  }

  .d-status-btn.current {
    border-color: var(--amber);
    color: var(--amber-strong);
    background: var(--amber-bg);
  }

  .d-status-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* Rating slider */
  .d-rating-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-xl);
  }

  .d-rating-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
  }

  .d-rating-star {
    width: 11px;
    height: 11px;
    opacity: 0.5;
    flex-shrink: 0;
  }

  .d-rating-label-star {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 1px;
    opacity: 0.8;
  }

  .d-rating-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(
      to right,
      var(--coral) 0%,
      var(--coral) var(--pct, 0%),
      var(--border-strong) var(--pct, 0%),
      var(--border-strong) 100%
    );
    outline: none;
    cursor: pointer;
  }

  .d-rating-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--coral);
    border: 2.5px solid var(--card);
    box-shadow: 0 0 0 1.5px var(--coral);
    transition: transform 0.12s var(--ease-out), box-shadow 0.12s;
    cursor: pointer;
  }

  .d-rating-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--coral);
    border: 2.5px solid var(--card);
    box-shadow: 0 0 0 1.5px var(--coral);
    cursor: pointer;
  }

  .d-rating-slider:hover::-webkit-slider-thumb,
  .d-rating-slider:focus::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px var(--coral);
  }

  /* When unrated (value=0) hide the thumb slightly */
  .d-rating-slider[value="0"]::-webkit-slider-thumb {
    background: var(--surface-deep);
    box-shadow: 0 0 0 1.5px var(--border-strong);
  }

  .d-rating-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--coral-strong);
    min-width: 44px;
    justify-content: flex-end;
    white-space: nowrap;
    line-height: 1;
  }

  .d-rating-label-denom {
    font-weight: 400;
    color: var(--coral);
    opacity: 0.55;
    font-size: 0.7rem;
  }

  .d-rating-label-empty {
    font-weight: 400;
    color: var(--ink-faint);
    font-size: 0.75rem;
  }

  .card-rating-star {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    opacity: 0.7;
  }

  /* Card rating badge */
  .card-rating {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--coral-strong);
    background: var(--coral-bg);
    border-radius: 20px;
    padding: 2px 7px;
    letter-spacing: 0.01em;
    line-height: 1.5;
    white-space: nowrap;
  }

  .card-rating-denom {
    font-weight: 400;
    color: var(--coral);
    opacity: 0.6;
    font-size: 0.68rem;
  }

  .d-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--ink-faint);
  }

  .d-delete {
    font-size: 0.78rem;
    color: var(--ink-faint);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    transition: all var(--t-fast);
    min-height: 36px;
  }

  .d-delete:hover {
    color: var(--red);
    background: rgba(176, 64, 64, 0.08);
  }


  /* ── Report popover ── */
  .report-popover {
    position: absolute;
    top: 36px;
    right: 8px;
    z-index: 50;
    width: 228px;
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
    padding: 14px;
    animation: popoverIn 0.18s var(--ease-out);
  }
  @keyframes popoverIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }
  .report-popover-title {
    font-family: var(--serif);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 10px;
    font-variation-settings: 'opsz' 20;
  }
  .report-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
  }
  .report-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    color: var(--ink-secondary);
    cursor: pointer;
    transition: all var(--t-fast);
    text-align: left;
  }
  .report-option:hover { border-color: var(--border-strong); background: var(--surface); color: var(--ink); }
  .report-option.selected {
    border-color: var(--teal);
    background: var(--teal-bg);
    color: var(--ink);
  }
  .report-option svg { flex-shrink: 0; color: var(--ink-faint); }
  .report-option.selected svg { color: var(--teal); }
  .report-note {
    width: 100%;
    padding: 7px 10px;
    font-family: var(--sans);
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg);
    color: var(--ink);
    resize: none;
    outline: none;
    transition: border-color var(--t-fast);
    margin-bottom: 10px;
    height: 56px;
    display: none;
  }
  .report-note.visible { display: block; }
  .report-note:focus { border-color: var(--teal); }
  .report-note::placeholder { color: var(--ink-faint); }
  .report-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }
  .report-cancel {
    font-size: 0.72rem;
    color: var(--ink-faint);
    padding: 5px 10px;
    border-radius: var(--r-sm);
    transition: color var(--t-fast);
  }
  .report-cancel:hover { color: var(--ink-secondary); }
  .report-submit {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: var(--r-sm);
    background: var(--teal);
    color: #fff;
    opacity: 0.4;
    transition: opacity var(--t-fast);
    pointer-events: none;
  }
  .report-submit.ready {
    opacity: 1;
    pointer-events: auto;
  }
  .report-submit.ready:hover { opacity: 0.85; }

  /* Drawer report link */
  .d-report-link {
    font-size: 0.72rem;
    color: var(--ink-faint);
    padding: 4px 6px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color var(--t-fast), background var(--t-fast);
  }
  .d-report-link:hover { color: var(--ink-secondary); background: var(--surface); }
  .d-report-link.reported { color: var(--sage); pointer-events: none; }
}

/* ═══ UTILITIES ═══ */
@layer utilities {
  .hidden { display: none !important; }
}

/* ═══ MOBILE ═══ */
@media (max-width: 680px) {
  .topbar-inner {
    padding: 0 var(--space-md);
    height: 56px;
  }

  .logo-text { display: none; }
  .stats { display: none; }

  main { padding: 0; }
  .shelf-section { padding: 0 var(--space-md); }

  .hero { padding: var(--space-lg) 0 var(--space-md); }
  .hero-deco { margin-bottom: var(--space-md); }
  .hero-tagline { font-size: 0.92rem; }

  .library-toolbar {
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
  }

  .filter-chip {
    padding: 6px 11px;
    font-size: 0.78rem;
  }

  .sort-select {
    font-size: 0.78rem;
  }

  .book-grid {
    grid-template-columns: 1fr;
    /* Mobile content budget — title (2 lines, narrower viewport tends
       to break titles across more lines anyway) + author + excerpt
       (2 lines) + status + foot + gaps + padding. */
    grid-auto-rows: 220px;
    gap: 16px;
  }

  .card-cover, .card-cover-empty { width: 120px; }

  .card-body { padding: 14px 16px; gap: 5px; }
  .card-title { font-size: 1.02rem; -webkit-line-clamp: 2; }
  .card-author { font-size: 0.82rem; }
  .card-excerpt { font-size: 0.82rem; -webkit-line-clamp: 2; }
  .card-quote { font-size: 0.8rem; -webkit-line-clamp: 2; }

  /* Drawer fullscreen on mobile */
  .drawer { width: 100vw; }

  .drawer-close {
    width: 44px;
    height: 44px;
  }

  .drawer-content { padding: 16px 20px 40px; }
  .d-cover { width: 150px; }
  .d-cover-placeholder { width: 150px; height: 210px; }
  .d-title { font-size: 1.45rem; }
  .d-author { font-size: 0.92rem; }
  .d-text, .d-quote { font-size: 0.9rem; }

  .d-statuses {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .d-status-btn {
    padding: 14px 16px;
    font-size: 0.9rem;
  }

  .d-link {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }

  /* Settings modal mobile — slide up from bottom */
  .settings-modal {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* svh = small viewport height (browser UI always counted) — most reliable on iOS Safari */
    height: 92svh;
    max-height: 92svh;
    transform: translateY(100%);
    opacity: 1;
  }
  .settings-modal.open { transform: translateY(0); }
  .settings-inner {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    /* Fill the modal exactly so flex scrolling works */
    height: 100%;
    max-height: none;
  }
  .settings-body {
    padding: 8px 20px 0;
    min-height: 0; /* allows flex item to shrink below content height */
    overflow-y: scroll; /* scroll more reliable than auto on iOS */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  .settings-header { padding: 20px 20px 0; }
  .settings-footer {
    padding: 14px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .s-days { gap: 4px; }
  .s-day { width: 36px; height: 36px; font-size: 0.68rem; }
  .s-genre-grid { gap: 6px; }
  .s-genre-chip { padding: 5px 10px; font-size: 0.74rem; }
}

/* ═══ TABLET ═══ */
@media (min-width: 681px) and (max-width: 1100px) {
  .book-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ═══ LARGE DESKTOP ═══ */
@media (min-width: 1101px) {
  .book-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }
}

/* ═══ APP LAYOUT ═══ */
.app-layout {
  display: flex;
  min-height: calc(100vh - 60px);
}

.app-layout main {
  flex: 1;
  min-width: 0;
}

/* ═══ SIDEBAR ═══ */
.sidebar {
  width: 230px;
  flex-shrink: 0;
  padding: 24px 16px;
  border-right: 1px solid var(--border);
  background: var(--bg-warm);
  overflow-y: auto;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
}

.sidebar-section {
  margin-bottom: 28px;
}

.sidebar-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding: 0 10px;
  margin-bottom: 6px;
}

.sidebar-add-list {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--ink-faint);
  margin-right: 6px;
  margin-bottom: 6px;
  transition: all var(--t-fast);
}

.sidebar-add-list:hover {
  background: var(--surface);
  color: var(--ink-muted);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-muted);
  text-align: left;
  transition: all var(--t-fast);
  cursor: pointer;
}

.sidebar-item:hover {
  background: var(--surface);
  color: var(--ink-secondary);
}

.sidebar-item.active {
  background: var(--card);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.sidebar-item-count {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--ink-faint);
  min-width: 18px;
  text-align: center;
}

.sidebar-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-item-actions {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 2px;
}
.sidebar-item:hover .sidebar-item-actions { display: flex; }

.sidebar-item-hide {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-faint);
}
.sidebar-item-hide:hover { color: var(--ink-secondary); background: var(--surface-deep); }

.sidebar-item-delete {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--ink-faint);
  flex-shrink: 0;
  transition: all var(--t-fast);
}

.sidebar-item:hover .sidebar-item-count { display: none; }
.sidebar-item-delete:hover { color: #b04040; background: rgba(176,64,64,0.08); }

.sidebar-new-list {
  padding: 4px 4px;
}

.sidebar-new-input {
  width: 100%;
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  outline: none;
  transition: border-color var(--t-fast);
}

.sidebar-new-input:focus { border-color: var(--amber); }
.sidebar-new-input::placeholder { color: var(--ink-faint); }

/* Sidebar toggle (mobile) */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 70px;
  left: 12px;
  z-index: 90;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border-radius: var(--r-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: var(--ink-muted);
  transition: all var(--t-fast);
}

.sidebar-toggle:hover { color: var(--ink); }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 149;
  background: rgba(28, 23, 16, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 150;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--t-slow);
    box-shadow: 4px 0 20px rgba(0,0,0,0.08);
  }

  .sidebar.open { transform: translateX(0); }

  .sidebar-toggle { display: flex; }

  .app-layout { flex-direction: column; }
}

/* ═══ FAB ═══ */
.fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 1px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}

.fab:active { transform: scale(0.95); }

@media (max-width: 680px) {
  .fab { bottom: 20px; right: 20px; width: 52px; height: 52px; }
}

/* ═══ SEARCH WIZARD ═══ */
.wizard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(28, 23, 16, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--t-slow);
}

.wizard-backdrop.open { opacity: 1; }

.wizard {
  position: fixed;
  top: min(10vh, 80px);
  left: 50%;
  z-index: 301;
  width: min(560px, 92vw);
  max-height: min(80vh, 80dvh);
  transform: translateX(-50%) scale(0.97);
  transform-origin: top center;
  opacity: 0;
  transition: transform var(--t-slow), opacity var(--t-slow);
}

.wizard.open {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.wizard-inner {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(80vh, 80dvh);
}

.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.wizard-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  font-variation-settings: 'opsz' 28;
}

.wizard-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  transition: all var(--t-fast);
}

.wizard-close:hover { background: var(--surface); color: var(--ink); }

.wizard-search {
  position: relative;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wizard-search-icon {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  pointer-events: none;
}

.wizard-input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 14px 44px;
  font-family: var(--sans);
  font-size: 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color var(--t-fast);
}

.wizard-input:focus { border-color: var(--amber); }
.wizard-input::placeholder { color: var(--ink-faint); }

.wizard-clear-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-muted);
  background: var(--surface);
  transition: all var(--t-fast);
  opacity: 0;
  pointer-events: none;
}
.wizard-clear-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
.wizard-clear-btn:hover { background: var(--border-strong); color: var(--ink); }

.wizard-scan-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--coral-bg);
  color: var(--coral);
  border: 1px solid var(--coral-bg-strong);
  cursor: pointer;
  transition: all var(--t-fast);
}
.wizard-scan-btn:hover {
  background: var(--coral-bg-strong);
  transform: scale(1.04);
}
.wizard-scan-btn:active { transform: scale(0.96); }

.wizard-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px 20px;
  max-height: min(50vh, 50dvh);
}

.wizard-type-filter {
  display: flex;
  gap: 6px;
  padding: 0 24px 12px;
  align-items: center;
}

.wizard-search-spinner {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.wizard-search-spinner.active {
  opacity: 1;
  animation: spinner-pulse 1s ease-in-out infinite;
}
@keyframes spinner-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%       { opacity: 1;    transform: scale(1.15); }
}
.wizard-type-pill {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-family: var(--sans);
  font-weight: 500;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
}
.wizard-type-pill:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.wizard-type-pill.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.wizard-hint {
  text-align: center;
  padding: 32px 16px;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  font-variation-settings: 'opsz' 12;
}

/* Search result row */
.wiz-book {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
  cursor: default;
}

.wiz-book:hover { background: var(--surface); }

.wiz-book-added {
  opacity: 0.5;
}

.wiz-book-cover {
  width: 48px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
}

.wiz-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wiz-book-nocover {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--r-sm);
}
.wiz-book-nocover .gen-cover-letter { font-size: 1rem; }
.wiz-book-nocover .gen-cover-title { font-size: 0.45rem; max-height: 1.3em; -webkit-line-clamp: 1; }
.wiz-book-nocover .gen-cover-author { display: none; }

.wiz-book-info {
  flex: 1;
  min-width: 0;
}

.wiz-book-title {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  font-variation-settings: 'opsz' 20;
}

.wiz-book-author {
  font-size: 0.8rem;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 2px;
}

.wiz-book-meta {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.wiz-add-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--amber-bg);
  color: var(--amber-strong);
  transition: all var(--t-fast);
}

.wiz-add-btn:hover {
  background: var(--amber-bg-strong);
  transform: scale(1.1);
}

.wiz-add-btn:disabled {
  transform: none;
  cursor: default;
}

.wiz-adding, .wiz-added {
  font-size: 0.65rem;
  font-weight: 600;
}

.wiz-added { color: var(--sage); }
.wiz-in-library { font-size: 0.65rem; font-weight: 600; color: var(--sage); flex-shrink: 0; }
.wiz-suggest-note { font-size: 0.6rem; color: var(--text-muted); margin: 0 0 4px; line-height: 1.3; max-width: 120px; text-align: right; }

/* Status picker that replaces the + button after tapping it */
.wiz-status-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.wiz-status-pick-btn {
  padding: 5px 10px;
  font-size: 0.7rem;
  font-family: var(--sans);
  font-weight: 600;
  border-radius: 20px;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
}
.wiz-status-pick-btn:hover {
  border-color: var(--amber);
  background: var(--amber-bg);
  color: var(--amber);
}
.wiz-status-pick-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Manual add form */
.wiz-manual {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.wiz-manual-label {
  font-family: var(--serif);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.wiz-manual-fields {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wiz-manual-input {
  flex: 1;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color var(--t-fast);
}

.wiz-manual-input:focus {
  border-color: var(--teal);
}

.wiz-manual-input::placeholder {
  color: var(--ink-faint);
}

.wiz-manual-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--sans);
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
}

.wiz-manual-btn:hover {
  background: #2c4a42;
}

.wiz-manual-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.wiz-suggest {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* "Show more from the web" button — appears between local results and the
   suggestion form. Visually distinct (dashed border, ghost style) so it
   reads as a fall-through action, not a primary CTA. */
.wiz-extend-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink-secondary);
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md, 10px);
  cursor: pointer;
  transition: all var(--t-fast);
}
.wiz-extend-btn:hover {
  background: rgba(44, 53, 48, 0.04);
  color: var(--ink);
  border-color: var(--ink-secondary);
  border-style: solid;
}
.wiz-extend-btn:disabled {
  opacity: 0.7;
  cursor: default;
}
.wiz-extend-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.wiz-suggest .wiz-manual-fields {
  flex-wrap: wrap;
}

.wiz-suggest-btn {
  background: var(--ink-muted) !important;
}

.wiz-suggest-btn:hover {
  background: var(--ink) !important;
}

@media (max-width: 680px) {
  .wiz-manual-fields {
    flex-direction: column;
  }
  .wiz-manual-input {
    width: 100%;
  }
  .wiz-manual-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 680px) {
  .wizard {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(92vh, 92dvh);
    transform: translateY(100%);
    border-radius: 0;
  }

  .wizard.open {
    transform: translateY(0);
  }

  .wizard-inner {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: min(92vh, 92dvh);
  }
}

/* ═══ AUTH SCREEN ═══ */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 30%, rgba(180, 117, 32, 0.05) 0%, transparent 70%);
}

.auth-card {
  text-align: center;
  width: 100%;
  max-width: 400px;
}

.auth-deco {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: var(--space-xl);
}

.auth-deco span {
  display: block;
  width: 14px;
  border-radius: 3px;
  background: var(--surface-deep);
}

.auth-deco span:nth-child(1) { height: 32px; background: var(--teal); opacity: 0.5; }
.auth-deco span:nth-child(2) { height: 48px; background: var(--coral); opacity: 0.5; }
.auth-deco span:nth-child(3) { height: 56px; background: var(--sage); opacity: 0.5; }
.auth-deco span:nth-child(4) { height: 40px; background: var(--teal); opacity: 0.3; }
.auth-deco span:nth-child(5) { height: 28px; background: var(--coral); opacity: 0.3; }

.auth-title {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  font-variation-settings: 'opsz' 48;
}

.auth-sub {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-muted);
  margin-bottom: var(--space-xl);
  font-variation-settings: 'opsz' 12;
}

/* Auth button */
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--teal);
  padding: 14px 32px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  min-height: 48px;
  transition: background var(--t-fast), transform var(--t-fast);
}

.auth-btn:hover { background: #2c4a42; }
.auth-btn:active { transform: scale(0.97); }

/* User avatar button in topbar */
.user-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  cursor: pointer;
  padding: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast);
}

.user-btn:hover { border-color: var(--amber); }

.user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-initial {
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.topbar-link {
  font-family: var(--serif);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  font-variation-settings: 'opsz' 11;
}
.topbar-link:hover {
  color: var(--teal);
  background: var(--card);
  border-color: var(--border-strong);
}

.topbar-sep {
  color: var(--border-strong);
  font-size: 0.72rem;
  user-select: none;
}

#clerk-auth {
  display: flex;
  justify-content: center;
}

#clerk-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ═══ SETTINGS MODAL ═══ */

.settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(28, 23, 16, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
}
.settings-backdrop.open { opacity: 1; pointer-events: auto; }

.settings-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 301;
  width: min(560px, 92vw);
  max-height: 85vh;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-slow), opacity var(--t-slow);
}
.settings-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.settings-inner {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px 0;
  flex-shrink: 0;
}

.settings-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.settings-close:hover { background: var(--surface); color: var(--ink); }

.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 28px 0;
}

.settings-footer {
  padding: 16px 28px 24px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

.s-header-rule {
  width: 32px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin-bottom: var(--space-sm);
}

.s-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  font-variation-settings: 'opsz' 36;
}

.s-subtitle {
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-muted);
  margin: 0;
  font-variation-settings: 'opsz' 11;
}

.s-section {
  margin-bottom: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.s-section:first-child {
  border-top: none;
  padding-top: var(--space-md);
}

.s-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: var(--space-sm);
}

.s-sublabel {
  font-family: var(--serif);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-muted);
  margin-bottom: var(--space-md);
  font-variation-settings: 'opsz' 11;
}

.s-name-wrap {
  position: relative;
}

.s-input {
  width: 100%;
  padding: 11px 40px 11px 14px;
  font-family: var(--sans);
  font-size: 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color var(--t-fast);
}
.s-input:focus { border-color: var(--teal); }
.s-input::placeholder { color: var(--ink-faint); }

.s-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b756e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.s-name-indicator {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  font-weight: 500;
  transition: color var(--t-fast);
}
.s-name-indicator.available { color: var(--sage); }
.s-name-indicator.taken { color: var(--red); }
.s-name-indicator.checking {
  color: var(--ink-faint);
  animation: s-pulse 1s ease-in-out infinite;
}
@keyframes s-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.s-name-hint {
  font-size: 0.72rem;
  margin-top: 6px;
  min-height: 1em;
}
.s-name-hint.available { color: var(--sage); }
.s-name-hint.taken { color: var(--red); }
.s-name-hint.checking { color: var(--ink-faint); }

.s-genre-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.s-genre-chip {
  padding: 6px 13px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 400;
  font-family: var(--sans);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.s-genre-chip:hover {
  border-color: var(--teal);
  color: var(--ink-secondary);
}
.s-genre-chip.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(61, 90, 82, 0.2);
}

.s-textarea {
  width: 100%;
  min-height: 80px;
  padding: 11px 14px;
  font-family: var(--serif);
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.6;
  resize: vertical;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  outline: none;
  font-variation-settings: 'opsz' 12;
  transition: border-color var(--t-fast);
}
.s-textarea:focus { border-color: var(--teal); }
.s-textarea::placeholder { color: var(--ink-faint); }

.s-days {
  display: flex;
  gap: 6px;
}

.s-day {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 500;
  font-family: var(--sans);
  background: var(--surface);
  border: 1px solid transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.s-day:hover {
  background: var(--surface-deep);
  color: var(--ink);
}
.s-day.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 2px 8px rgba(61, 90, 82, 0.25);
}

.s-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: var(--space-md);
}

.s-toggle-text {
  font-size: 0.86rem;
  color: var(--ink-secondary);
}

.s-toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 24px;
  background: var(--surface-deep);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  border: none;
  outline: none;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.s-toggle::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform var(--t-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.s-toggle:checked {
  background: var(--teal);
}
.s-toggle:checked::after {
  transform: translateX(20px);
}

.s-email-reveal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s var(--ease-out), opacity 0.25s var(--ease-out), margin 0.3s var(--ease-out);
  margin-top: 0;
}
.s-email-reveal.open {
  max-height: 60px;
  opacity: 1;
  margin-top: var(--space-sm);
}

.s-save {
  width: 100%;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--sans);
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
  min-height: 46px;
}
.s-save:hover {
  background: #2c4a42;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(61, 90, 82, 0.2);
}
.s-save:active { transform: scale(0.98); }
.s-save.saved {
  background: var(--sage);
  pointer-events: none;
}
.s-save:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.s-error {
  font-size: 0.78rem;
  color: var(--red);
  margin-top: var(--space-sm);
  min-height: 1em;
}

/* ═══ RECOMMENDATIONS FULL VIEW — Swimlane Discovery ═══ */
@layer components {

  .recs-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) var(--space-2xl);
    min-height: 60vh;
  }

  /* ── Top header with title + generate button ── */
  .recs-view-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    position: relative;
  }

  .recs-view-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--coral) 0%,
      var(--surface-deep) 40%,
      transparent 100%
    );
    border-radius: 1px;
  }

  .recs-view-title {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
  }

  .recs-view-subtitle {
    font-family: var(--serif);
    font-size: 0.82rem;
    font-style: italic;
    color: var(--ink-faint);
    margin: 4px 0 0;
    font-variation-settings: 'opsz' 10;
  }

  .recs-view-generate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: var(--sans);
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast);
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .recs-view-generate:hover:not(:disabled) {
    background: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(44, 53, 48, 0.18);
  }
  .recs-view-generate:disabled { opacity: 0.4; cursor: not-allowed; }

  .recs-view-generate .recs-spinner {
    width: 14px;
    height: 14px;
  }

  /* ── Weekly schedule strip ── */
  .recs-week-strip {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
  }

  .recs-week-day {
    width: 32px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 500;
    font-family: var(--sans);
    letter-spacing: 0.02em;
    color: var(--ink-faint);
    background: rgba(44, 53, 48, 0.03);
    border-radius: 5px;
    border: 1px solid transparent;
    transition: all var(--t-fast);
    position: relative;
  }

  .recs-week-day.today {
    color: var(--ink-secondary);
    background: rgba(44, 53, 48, 0.06);
    font-weight: 600;
  }

  .recs-week-day.scheduled {
    color: var(--teal);
    background: var(--teal-bg);
    border-color: rgba(61, 90, 82, 0.15);
    font-weight: 600;
  }

  .recs-week-day.scheduled::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal);
  }

  .recs-week-day.scheduled.today {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal);
    box-shadow: 0 2px 8px rgba(61, 90, 82, 0.25);
  }

  .recs-week-day.past-use {
    color: var(--coral);
    background: var(--coral-bg);
    border-color: rgba(201, 107, 79, 0.12);
  }

  .recs-week-label {
    font-size: 0.65rem;
    color: var(--ink-faint);
    margin-left: 8px;
    font-style: italic;
    font-family: var(--serif);
    font-variation-settings: 'opsz' 10;
  }

  @media (max-width: 680px) {
    .recs-week-strip { gap: 2px; }
    .recs-week-day { width: 28px; height: 22px; font-size: 0.58rem; }
  }

  /* ── Swimlane container ── */
  .recs-view-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  /* ── Single swimlane row ── */
  .recs-swimlane {
    opacity: 0;
    transform: translateY(20px);
    animation: swimlaneIn 0.6s var(--ease-out) both;
    animation-delay: var(--lane-delay, 0s);
  }

  @keyframes swimlaneIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── Swimlane header — date tag with decorative line ── */
  .recs-swimlane-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .recs-swimlane-date {
    font-family: var(--serif);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink-secondary);
    white-space: nowrap;
    position: relative;
    padding-left: 14px;
    letter-spacing: -0.01em;
  }

  .recs-swimlane-date::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
    transform: translateY(-50%);
  }

  .recs-swimlane-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-strong) 0%, transparent 80%);
  }

  .recs-swimlane-count {
    font-size: 0.7rem;
    color: var(--ink-faint);
    font-family: var(--sans);
    letter-spacing: 0.03em;
    flex-shrink: 0;
  }

  /* ── Swimlane scroll track — matches recs-scroll ── */
  .recs-swimlane-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    /* Generous bottom padding gives the scrollbar breathing room from
       the cards instead of crowding the cover edge. */
    padding: 4px 2px 18px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 2px;
  }
  /* Glass scrollbar — chunky rounded thumb sitting on a frosted track. */
  .recs-swimlane-track::-webkit-scrollbar { height: 10px; }
  .recs-swimlane-track::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(44, 53, 48, 0.04), rgba(44, 53, 48, 0.07));
    border: 1px solid rgba(44, 53, 48, 0.06);
    border-radius: 6px;
    margin: 0 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .recs-swimlane-track::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(44, 53, 48, 0.42), rgba(44, 53, 48, 0.30));
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 5px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.45),
      0 1px 2px rgba(44, 53, 48, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }
  .recs-swimlane-track::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(44, 53, 48, 0.55), rgba(44, 53, 48, 0.40));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 2px 4px rgba(44, 53, 48, 0.22);
  }
  .recs-swimlane-track::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, rgba(44, 53, 48, 0.62), rgba(44, 53, 48, 0.50));
  }
  /* Firefox — can't do glass effects, but match the higher contrast. */
  .recs-swimlane-track {
    scrollbar-width: auto;
    scrollbar-color: rgba(44, 53, 48, 0.38) rgba(44, 53, 48, 0.06);
  }

  /* ── "Latest" badge on first swimlane ── */
  .recs-swimlane-badge {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    background: var(--teal-bg);
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  /* ── Empty state ── */
  .recs-view-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    min-height: 50vh;
  }

  .recs-view-empty-icon {
    width: 120px;
    height: 120px;
    margin-bottom: var(--space-lg);
    opacity: 0.7;
    position: relative;
  }

  /* Three stacked book spines as illustration */
  .recs-view-empty-icon::before,
  .recs-view-empty-icon::after,
  .recs-view-empty-icon span {
    content: '';
    position: absolute;
    border-radius: 6px;
    left: 50%;
  }

  .recs-view-empty-icon::before {
    width: 40px;
    height: 90px;
    background: var(--surface-deep);
    transform: translateX(-50%) rotate(-8deg);
    bottom: 10px;
    box-shadow: inset -2px 0 0 rgba(44, 53, 48, 0.08);
  }
  .recs-view-empty-icon::after {
    width: 36px;
    height: 85px;
    background: var(--coral-bg-strong);
    border: 1px solid var(--coral-bg-strong);
    transform: translateX(-30%) rotate(3deg);
    bottom: 8px;
    box-shadow: inset -2px 0 0 rgba(201, 107, 79, 0.1);
  }
  .recs-view-empty-icon span {
    width: 38px;
    height: 88px;
    background: var(--teal-bg);
    border: 1px solid rgba(61, 90, 82, 0.12);
    transform: translateX(-70%) rotate(-2deg);
    bottom: 12px;
    box-shadow: inset -2px 0 0 rgba(61, 90, 82, 0.06);
    z-index: 1;
  }

  /* Sparkle dots */
  .recs-view-empty-sparkle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--coral);
    opacity: 0;
    animation: sparkle 2.4s ease-in-out infinite;
  }
  .recs-view-empty-sparkle:nth-child(2) {
    top: 8px; right: 12px;
    animation-delay: 0.6s;
  }
  .recs-view-empty-sparkle:nth-child(3) {
    top: 30px; left: 10px;
    background: var(--teal);
    animation-delay: 1.2s;
  }
  .recs-view-empty-sparkle:nth-child(4) {
    bottom: 20px; right: 20px;
    background: var(--sage);
    animation-delay: 1.8s;
  }

  @keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.8; transform: scale(1); }
  }

  .recs-view-empty-text {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }

  .recs-view-empty-sub {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin: 0 0 var(--space-lg);
    max-width: 320px;
    line-height: 1.6;
  }

  .recs-view-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 0.88rem;
    font-weight: 500;
    font-family: var(--sans);
    background: var(--teal);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--t-fast);
  }
  .recs-view-empty-btn:hover:not(:disabled) {
    background: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(44, 53, 48, 0.18);
  }
  .recs-view-empty-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ── Loading shimmer for lazy-loaded swimlanes ── */
  .recs-swimlane-loading {
    display: flex;
    gap: 18px;
    padding: 6px 4px var(--space-md);
  }

  .recs-swim-shimmer {
    flex: 0 0 148px;
    aspect-ratio: 2 / 3;
    border-radius: var(--r-md);
    background: linear-gradient(
      110deg,
      var(--surface) 30%,
      var(--bg-warm) 50%,
      var(--surface) 70%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }

  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ── Cooldown message in header ── */
  .recs-view-cooldown {
    font-family: var(--serif);
    font-size: 0.75rem;
    font-style: italic;
    color: var(--ink-faint);
    margin-left: var(--space-sm);
    white-space: nowrap;
  }

  /* ── Mobile ── */
  @media (max-width: 680px) {
    .recs-view {
      padding: calc(var(--space-md) + 40px) var(--space-md) var(--space-xl);
    }
    .recs-view-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-sm);
    }
    .recs-view-title { font-size: 1.3rem; }
    .recs-view-generate { width: 100%; justify-content: center; }
    .recs-swimlane-track { gap: 10px; }
  }
}

/* ═══ CAMERA SCANNER OVERLAY ═══ */

.cam-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #0d0c0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
}
.cam-overlay.hidden { display: none; }

.cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}

/* Viewfinder cutout */
.cam-viewfinder {
  position: relative;
  z-index: 2;
  width: min(72vw, 320px);
  aspect-ratio: 1.8 / 1;
}

/* Dark vignette around the viewfinder */
.cam-viewfinder::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse min(80vw, 380px) min(44vw, 200px) at 50% 50%,
    transparent 60%,
    rgba(10, 9, 7, 0.72) 100%
  );
  pointer-events: none;
}

/* Corner brackets */
.cam-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--coral);
  border-style: solid;
  border-width: 0;
}
.cam-tl { top: 0; left: 0;  border-top-width: 3px; border-left-width: 3px;  border-top-left-radius: 4px; }
.cam-tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 4px; }
.cam-bl { bottom: 0; left: 0;  border-bottom-width: 3px; border-left-width: 3px;  border-bottom-left-radius: 4px; }
.cam-br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 4px; }

/* Animated scan line */
.cam-scan-line {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--coral), transparent);
  border-radius: 1px;
  animation: cam-sweep 1.8s ease-in-out infinite;
  top: 0;
  box-shadow: 0 0 8px rgba(201, 107, 79, 0.6);
}
@keyframes cam-sweep {
  0%   { top: 6px;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 6px); opacity: 0; }
}

/* Close button */
.cam-close {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 20px));
  right: 20px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease;
}
.cam-close:hover { background: rgba(255, 255, 255, 0.22); }

/* Footer hint */
.cam-footer {
  position: absolute;
  bottom: max(40px, env(safe-area-inset-bottom, 40px));
  left: 0;
  right: 0;
  z-index: 10;
  text-align: center;
  padding: 0 24px;
}
.cam-hint {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.01em;
}

/* ═══ ONBOARDING ═══ */

.ob-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(20, 16, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
}
.ob-backdrop.open { opacity: 1; pointer-events: auto; }

.ob-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 401;
  width: min(520px, 92vw);
  max-height: 88vh;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--t-slow), opacity var(--t-slow);
}
.ob-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.ob-inner {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.18),
    0 0 0 1px var(--border),
    inset 0 1px 0 rgba(255,255,255,0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}

/* Progress ribbon */
.ob-progress {
  height: 3px;
  background: var(--surface);
  flex-shrink: 0;
  overflow: hidden;
}
.ob-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--sage));
  border-radius: 0 2px 2px 0;
  transition: width 0.5s var(--ease-out);
  width: 0%;
}

/* Body */
.ob-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 36px 8px;
  min-height: 0;
  transition: opacity 0.22s ease, transform 0.22s var(--ease-out);
}
.ob-body.transitioning {
  opacity: 0;
  transform: translateX(20px);
}
.ob-body.transitioning-back {
  opacity: 0;
  transform: translateX(-20px);
}

/* Footer */
.ob-footer {
  padding: 20px 36px 28px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Welcome step — centered text layout */
.ob-welcome {
  text-align: center;
  padding: 8px 0 16px;
}

/* Decorative book spines (welcome step) */
.ob-deco {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  margin-bottom: 28px;
  height: 64px;
}
.ob-deco span {
  display: block;
  border-radius: 3px 3px 2px 2px;
  opacity: 0.85;
}
.ob-deco span:nth-child(1) { width: 18px; height: 50px; background: var(--teal); opacity: 0.7; }
.ob-deco span:nth-child(2) { width: 14px; height: 40px; background: var(--coral); opacity: 0.6; }
.ob-deco span:nth-child(3) { width: 20px; height: 58px; background: #7a5c3a; opacity: 0.65; }
.ob-deco span:nth-child(4) { width: 16px; height: 44px; background: var(--sage); opacity: 0.75; }
.ob-deco span:nth-child(5) { width: 12px; height: 36px; background: var(--coral); opacity: 0.5; }
.ob-deco span:nth-child(6) { width: 22px; height: 62px; background: var(--teal); opacity: 0.5; }

/* Typography */
.ob-heading {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 10px;
  font-variation-settings: 'opsz' 48;
}
.ob-desc {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-secondary);
  line-height: 1.6;
  margin-bottom: 4px;
}

/* Form step heading */
.ob-step-heading {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  font-variation-settings: 'opsz' 36;
}
.ob-step-sub {
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-family: var(--sans);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Plans cards */
.ob-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.ob-plan-card {
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 18px 16px;
  background: var(--card);
  transition: border-color var(--t-fast);
}
.ob-plan-card.premium {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 4%, var(--card));
}
.ob-plan-card-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ob-plan-card.premium .ob-plan-card-title { color: var(--teal); }
.ob-plan-badge {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--teal);
  color: #fff;
}
.ob-plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ob-plan-features li {
  font-size: 0.8rem;
  font-family: var(--sans);
  color: var(--ink-secondary);
  line-height: 1.4;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.ob-plan-features li::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage);
  margin-top: 5px;
  flex-shrink: 0;
}
.ob-plan-card.premium .ob-plan-features li::before { background: var(--teal); }

/* Done step */
.ob-done {
  text-align: center;
  padding: 8px 0 20px;
}
.ob-done-icon {
  font-size: 2.5rem;
  margin-bottom: 20px;
  display: block;
}
.ob-done-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  align-items: center;
}
.ob-done-primary {
  width: 100%;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-family: var(--sans);
  font-weight: 600;
  background: var(--teal);
  color: #fff;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
  border: none;
}
.ob-done-primary:hover {
  background: #2c4a42;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(61, 90, 82, 0.25);
}
.ob-done-secondary {
  font-size: 0.85rem;
  font-family: var(--sans);
  color: var(--ink-muted);
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: color var(--t-fast);
}
.ob-done-secondary:hover { color: var(--ink); }

/* Footer buttons */
.ob-next {
  flex: 1;
  padding: 11px 20px;
  font-size: 0.88rem;
  font-family: var(--sans);
  font-weight: 600;
  background: var(--teal);
  color: #fff;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
  border: none;
  min-height: 42px;
}
.ob-next:hover {
  background: #2c4a42;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(61, 90, 82, 0.2);
}
.ob-next:active { transform: scale(0.98); }

.ob-back {
  padding: 11px 14px;
  font-size: 0.85rem;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--surface);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
  border: none;
  min-height: 42px;
  flex-shrink: 0;
}
.ob-back:hover { background: var(--surface-deep); color: var(--ink); }

.ob-skip {
  font-size: 0.8rem;
  font-family: var(--sans);
  color: var(--ink-faint);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: all var(--t-fast);
  padding: 4px 0;
  flex-shrink: 0;
}
.ob-skip:hover { color: var(--ink-muted); text-decoration-color: var(--border-strong); }

/* Welcome footer special layout */
.ob-footer-welcome {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.ob-footer-welcome .ob-next {
  width: 100%;
  padding: 13px 24px;
  font-size: 0.95rem;
}
.ob-footer-welcome .ob-skip {
  font-size: 0.82rem;
}

/* Language select (reuse s-select styling) */
.ob-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b756e' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  transition: border-color var(--t-fast);
  outline: none;
}
.ob-select:focus { border-color: var(--teal); }

/* Mobile: bottom sheet */
@media (max-width: 680px) {
  .ob-modal {
    top: auto;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
    width: 100%;
    max-height: 92vh;
    opacity: 1;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .ob-modal.open { transform: translateY(0); }
  .ob-inner {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 92vh;
  }
  .ob-body { padding: 28px 24px 8px; }
  .ob-footer { padding: 16px 24px 32px; }
  .ob-plans-grid { grid-template-columns: 1fr; }
  .ob-heading { font-size: 1.4rem; }
}

/* ═══ GLOBAL GLASS SCROLLBAR ═══ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(44, 53, 48, 0.10);
  border-radius: 4px;
  transition: background 0.25s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(44, 53, 48, 0.20);
}
::-webkit-scrollbar-thumb:active {
  background: rgba(44, 53, 48, 0.30);
}
::-webkit-scrollbar-corner { background: transparent; }
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 53, 48, 0.10) transparent;
}

/* ═══════════════════════════════════════════════
   SOCIAL & BOOK CLUBS — "The Reading Parlour"
   Warm paper surfaces, letterpress micro-type,
   book-spine accents. Mirrors the library's
   sunlit-library vocabulary.
   ═══════════════════════════════════════════════ */

@layer components {

  /* ── shared social shell ──────────────────────────────────────────── */
  .friends-view, .clubs-view { padding: var(--space-xl) 0 var(--space-2xl); }
  .friends-view-body, .clubs-view-body {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
  }
  .friends-loading, .clubs-loading, .friends-error, .clubs-error {
    text-align: center;
    color: var(--ink-muted);
    font-style: italic;
    font-family: var(--serif);
    padding: var(--space-2xl) 0;
    font-size: 1.05rem;
  }
  .friends-empty, .clubs-empty {
    color: var(--ink-faint);
    font-style: italic;
    font-family: var(--serif);
    font-variation-settings: 'opsz' 12;
    padding: var(--space-md) 0;
    text-align: center;
  }

  /* Reusable paper-card surface — same tactile feel as .book-card / .recs-card */
  .paper-card {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow:
      0 1px 3px rgba(44, 53, 48, 0.04),
      0 0 0 1px var(--border);
    padding: var(--space-lg);
    min-width: 0;
    animation: cardReveal 0.5s var(--ease-out) both;
    animation-delay: var(--reveal-delay, 0s);
  }
  .paper-card--flush { padding: 0; overflow: hidden; }

  /* Section heading with letterpress feel + shelf-line underline */
  .social-h,
  .friends-h {
    font-family: var(--serif);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-muted);
    font-variation-settings: 'opsz' 14;
    margin: 0 0 var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  .social-h::before,
  .friends-h::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 2px;
    background: var(--coral);
    border-radius: 1px;
    opacity: 0.7;
  }
  .social-h .section-count {
    margin-left: auto;
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-faint);
    font-weight: 500;
  }

  /* Shared button vocabulary — shares tone with the drawer's .d-action */
  .friends-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--ink-secondary);
    border: 1px solid var(--border-strong);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    white-space: nowrap;
  }
  .friends-btn:hover { background: var(--surface); color: var(--ink); border-color: rgba(44, 53, 48, 0.28); }
  .friends-btn:active { transform: scale(0.97); }
  .friends-btn:disabled { opacity: 0.45; cursor: not-allowed; }

  .friends-btn-primary {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
  .friends-btn-primary:hover {
    background: #1a211d;
    color: var(--bg);
    border-color: #1a211d;
  }

  .friends-btn-ghost {
    background: transparent;
    color: var(--ink-secondary);
    border-color: var(--border);
  }
  .friends-btn-ghost:hover { color: var(--ink); background: var(--surface); border-color: var(--border-strong); }

  .friends-btn--danger { color: var(--red); border-color: rgba(176, 64, 64, 0.25); }
  .friends-btn--danger:hover { background: rgba(176, 64, 64, 0.06); color: var(--red); border-color: rgba(176, 64, 64, 0.45); }

  .friends-input, .friends-textarea {
    font: inherit;
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    width: 100%;
    min-width: 0;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  }
  .friends-input:focus, .friends-textarea:focus {
    outline: none;
    border-color: var(--coral);
    background: var(--card);
    box-shadow: 0 0 0 3px var(--coral-bg);
  }
  .friends-textarea { line-height: 1.55; resize: vertical; }

  .friends-add-error {
    color: var(--red);
    font-size: 0.8rem;
    font-family: var(--sans);
    margin-top: 6px;
    min-height: 18px;
  }

  /* ── Friends hero: identity + QR as a framed "letterhead" pair ────────── */
  .friends-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    position: relative;
  }
  @media (max-width: 720px) {
    .friends-hero { grid-template-columns: 1fr; }
  }

  .friends-identity {
    position: relative;
    padding: var(--space-xl) var(--space-lg);
    background:
      radial-gradient(ellipse 90% 55% at 0% 0%, rgba(201, 107, 79, 0.06) 0%, transparent 60%),
      var(--card);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(44, 53, 48, 0.04), 0 0 0 1px var(--border);
    overflow: hidden;
  }
  .friends-identity::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--coral) 0%, var(--teal) 100%);
    opacity: 0.55;
  }
  .friends-identity-kicker {
    font-family: var(--serif);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    margin-bottom: var(--space-sm);
  }
  .friends-identity-name {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    font-variation-settings: 'opsz' 36;
    line-height: 1.1;
    margin-bottom: 4px;
  }
  .friends-identity-handle {
    font-family: var(--serif);
    font-style: italic;
    color: var(--coral-strong);
    font-size: 1rem;
    font-variation-settings: 'opsz' 14;
  }
  .friends-identity-bio {
    margin-top: var(--space-md);
    color: var(--ink-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 48ch;
  }
  .friends-identity-flourish {
    position: absolute;
    bottom: -24px;
    right: -10px;
    font-family: var(--serif);
    font-size: 12rem;
    font-weight: 300;
    color: var(--coral);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    line-height: 1;
  }

  /* QR framed like an ex-libris print */
  .friends-qr-frame {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: 0 1px 3px rgba(44, 53, 48, 0.04), 0 0 0 1px var(--border);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-align: center;
    position: relative;
  }
  .friends-qr-frame::before,
  .friends-qr-frame::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-style: solid;
    border-color: var(--coral);
    opacity: 0.5;
  }
  .friends-qr-frame::before {
    top: 8px; left: 8px;
    border-width: 1.5px 0 0 1.5px;
    border-top-left-radius: 4px;
  }
  .friends-qr-frame::after {
    bottom: 8px; right: 8px;
    border-width: 0 1.5px 1.5px 0;
    border-bottom-right-radius: 4px;
  }
  .friends-qr-kicker {
    font-family: var(--serif);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-muted);
  }
  .friends-qr {
    width: 200px;
    height: 200px;
    display: block;
    background: #fff;
    padding: 10px;
    border-radius: var(--r-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) inset;
  }
  .friends-qr-label {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-secondary);
    font-size: 0.92rem;
    font-variation-settings: 'opsz' 12;
  }
  .friends-qr-hint {
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--ink-faint);
    letter-spacing: 0.02em;
  }
  .friends-no-username {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-muted);
    font-size: 0.9rem;
    margin: 0;
    padding: 0 var(--space-sm);
    line-height: 1.45;
  }

  /* ── Add-friend bar (full width, prominent) ───────────────────────────── */
  .friends-addbar {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: 0 1px 3px rgba(44, 53, 48, 0.04), 0 0 0 1px var(--border);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-xl);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-md);
  }
  .friends-addbar-label {
    font-family: var(--serif);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-muted);
    white-space: nowrap;
  }
  .friends-addbar-at {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    pointer-events: none;
  }
  .friends-addbar-input-wrap { position: relative; min-width: 0; }
  .friends-addbar-input-wrap .friends-input { padding-left: 32px; }
  @media (max-width: 680px) {
    .friends-addbar {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
    }
    .friends-addbar-label { margin-bottom: 2px; }
  }

  /* ── Sections grid: inbox + circle side-by-side, then sent + invites + notifs full width ── */
  .friends-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
  .friends-sections > .friends-section-full { grid-column: 1 / -1; }
  @media (max-width: 760px) {
    .friends-sections { grid-template-columns: 1fr; }
  }

  .friends-section {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: 0 1px 3px rgba(44, 53, 48, 0.04), 0 0 0 1px var(--border);
    padding: var(--space-lg);
    animation: cardReveal 0.5s var(--ease-out) both;
    animation-delay: var(--reveal-delay, 0.05s);
  }

  /* ── Friend / member row ─────────────────────────────────────────────── */
  .friends-list { display: flex; flex-direction: column; gap: 6px; }
  .friends-card-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-md);
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--bg-warm);
    transition: background var(--t-fast), transform var(--t-fast);
  }
  .friends-card-row:hover { background: var(--surface); transform: translateX(2px); }

  .friends-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1rem;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%),
      var(--coral-bg);
    color: var(--coral-strong);
    border: 1px solid rgba(201, 107, 79, 0.22);
    overflow: hidden;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }
  /* When the avatar is rendered as a wrapper <span> with an <img> inside,
     the inner img should fill the wrapper. When the avatar IS the img
     (class on the img itself), it inherits the size from .friends-avatar
     above — we only need to set object-fit so non-square images don't
     stretch into ovals, and reset the background the img inherits. */
  .friends-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border: none;
    background: transparent;
  }
  img.friends-avatar {
    object-fit: cover;
    background: transparent;
    border: 1px solid var(--border-strong);
  }
  /* Make sure the pile's smaller avatars stay circular too. */
  .clubs-members-pile img.friends-avatar { width: 32px; height: 32px; }

  /* Color rotation for avatar initial — tints based on name */
  .friends-avatar[data-tint="1"] { background: var(--teal-bg); color: var(--teal); border-color: rgba(61, 90, 82, 0.22); }
  .friends-avatar[data-tint="2"] { background: var(--sage-bg); color: var(--sage); border-color: rgba(122, 140, 122, 0.28); }
  .friends-avatar[data-tint="3"] { background: var(--dust-bg); color: var(--dust); border-color: rgba(138, 133, 126, 0.28); }

  .friends-card-meta { min-width: 0; }
  .friends-card-name {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.95rem;
    font-family: var(--sans);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .friends-card-handle {
    display: block;
    color: var(--ink-faint);
    font-size: 0.78rem;
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: 'opsz' 10;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .friends-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .friends-card-actions .friends-btn { padding: 5px 11px; font-size: 0.76rem; }

  /* Pending-count pill */
  .friends-badge {
    background: var(--coral);
    color: #fff;
    font-family: var(--sans);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    line-height: 1.5;
  }
  .friends-badge-muted { background: var(--surface-deep); color: var(--ink-secondary); }

  /* ── Invite tickets — paper slips ─────────────────────────────────────── */
  .friends-invite-list { display: flex; flex-direction: column; gap: var(--space-sm); }
  .friends-invite-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 14px;
    background: var(--bg-warm);
    border: 1px dashed rgba(44, 53, 48, 0.18);
    border-radius: var(--r-sm);
    position: relative;
  }
  /* Paper-ticket punch-holes on the ends — purely decorative. */
  .friends-invite-row::before,
  .friends-invite-row::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 0 0 1px var(--border);
    transform: translateY(-50%);
    pointer-events: none;
  }
  .friends-invite-row::before { left: -5px; }
  .friends-invite-row::after  { right: -5px; }
  .friends-invite-url {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
  }

  /* ── Notification prefs — toggle switch list ──────────────────────────── */
  .friends-prefs { display: flex; flex-direction: column; gap: 4px; }
  .friends-pref-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-md);
    padding: 10px 12px;
    background: var(--bg-warm);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t-fast);
  }
  .friends-pref-row:hover { background: var(--surface); }
  .friends-pref-row > span:first-of-type {
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--ink);
  }
  .friends-pref-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 40px; height: 22px;
    border-radius: 999px;
    background: var(--surface-deep);
    border: 1px solid var(--border-strong);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
    flex-shrink: 0;
    margin: 0;
  }
  .friends-pref-row input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform var(--t-fast);
  }
  .friends-pref-row input[type="checkbox"]:checked {
    background: var(--coral);
    border-color: var(--coral);
  }
  .friends-pref-row input[type="checkbox"]:checked::after {
    transform: translateX(18px);
  }

  .friends-hint {
    color: var(--ink-muted);
    font-size: 0.82rem;
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: 'opsz' 10;
    margin: 0 0 var(--space-sm);
    line-height: 1.5;
  }

  /* Small "empty" placeholder for friend rows list */
  .friends-empty-row {
    padding: var(--space-lg) 0;
    text-align: center;
    color: var(--ink-faint);
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    font-variation-settings: 'opsz' 12;
  }

  /* Sidebar pending badge */
  #sidebar-friends .sidebar-item-count {
    background: var(--coral);
    color: #fff;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* ── Username-claim modal ─────────────────────────────────────────────── */
  .uname-backdrop {
    position: fixed; inset: 0;
    background: rgba(28, 23, 16, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9000;
  }
  .uname-modal {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: var(--card);
    border-radius: var(--r-lg);
    padding: var(--space-xl);
    width: 90%;
    max-width: 440px;
    z-index: 9001;
    box-shadow: 0 30px 80px rgba(28, 23, 16, 0.35), 0 0 0 1px var(--border);
    overflow: hidden;
  }
  .uname-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--coral), var(--teal));
    opacity: 0.8;
  }
  .uname-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.45rem;
    font-variation-settings: 'opsz' 24;
    margin: 0 0 6px;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .uname-sub {
    color: var(--ink-muted);
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: 'opsz' 12;
    font-size: 0.92rem;
    margin: 0 0 var(--space-lg);
    line-height: 1.5;
  }
  .uname-row {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: 2px 14px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }
  .uname-row:focus-within {
    border-color: var(--coral);
    box-shadow: 0 0 0 3px var(--coral-bg);
  }
  .uname-at {
    color: var(--ink-muted);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    margin-right: 4px;
    font-variation-settings: 'opsz' 14;
  }
  .uname-input {
    flex: 1;
    border: none; outline: none;
    padding: 12px 0;
    font: inherit;
    font-family: var(--sans);
    font-size: 1rem;
    background: transparent;
    color: var(--ink);
  }
  .uname-error {
    color: var(--red);
    font-size: 0.82rem;
    margin: var(--space-sm) 0 0;
    min-height: 20px;
    font-family: var(--sans);
  }
  .uname-footer {
    margin-top: var(--space-lg);
    display: flex;
    justify-content: flex-end;
  }
  .uname-save {
    padding: 10px 22px;
    background: var(--ink);
    color: var(--bg);
    border: none;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast);
  }
  .uname-save:hover:not(:disabled) { background: #1a211d; }
  .uname-save:active { transform: scale(0.97); }
  .uname-save:disabled { opacity: 0.5; cursor: not-allowed; }

  /* QR scan overlay */
  .qr-scan-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9000;
  }
  .qr-scan-close {
    position: absolute; top: 20px; right: 20px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px; height: 44px;
    cursor: pointer;
    z-index: 9002;
    display: flex; align-items: center; justify-content: center;
  }
  .qr-scan-hint {
    position: absolute; bottom: 44px; left: 0; right: 0;
    text-align: center; color: #fff;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
  }


  /* ═══════════════════════════════════════════════
     BOOK CLUBS — the parlour & the shelf
     ═══════════════════════════════════════════════ */

  /* ── List view header ────────────────────────────────────────────────── */
  .clubs-index-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
  }
  .clubs-index-title {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 700;
    font-variation-settings: 'opsz' 36';
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
    line-height: 1;
  }
  .clubs-index-sub {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-muted);
    font-size: 0.95rem;
    font-variation-settings: 'opsz' 12;
    margin-top: 6px;
  }
  .clubs-index-rule {
    height: 3px;
    margin: var(--space-md) 0 var(--space-lg);
    border-radius: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--surface-deep) 15%,
      var(--surface) 50%,
      var(--surface-deep) 85%,
      transparent 100%
    );
  }

  /* Inline create-new-club form */
  .clubs-new-form {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: 0 1px 3px rgba(44, 53, 48, 0.04), 0 0 0 1px var(--border);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    position: relative;
    animation: dropIn 0.35s var(--ease-out) both;
  }
  @keyframes dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .clubs-new-form::before {
    content: '';
    position: absolute;
    top: 0; left: var(--space-lg);
    width: 60px; height: 3px;
    background: var(--coral);
    border-radius: 0 0 2px 2px;
    opacity: 0.7;
  }
  .clubs-new-form h4 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 6px;
    color: var(--ink);
    font-variation-settings: 'opsz' 18;
  }
  .clubs-new-desc { resize: vertical; min-height: 70px; }
  .clubs-new-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: 4px; }

  /* Club cards grid */
  .clubs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-md);
  }
  .clubs-card {
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-md);
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: 0 1px 3px rgba(44, 53, 48, 0.04), 0 0 0 1px var(--border);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med);
    animation: cardReveal 0.5s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
  .clubs-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(44, 53, 48, 0.09), 0 0 0 1px var(--border-strong);
  }
  .clubs-card:active { transform: translateY(-1px) scale(0.995); }
  .clubs-card-cover-col { position: relative; }
  .clubs-card-cover,
  .clubs-card-cover-blank {
    width: 84px;
    height: 126px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.10), 0 0 0 1px rgba(44, 53, 48, 0.04);
    background: var(--surface);
  }
  .clubs-card-cover-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 700;
    opacity: 0.4;
  }
  .clubs-card-cover-blank.small { width: 40px; height: 60px; font-size: 1rem; }
  /* page-edge shadow on the right side of the mini covers */
  .clubs-card-cover-col::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: 0; width: 6px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.07));
    border-radius: 0 3px 3px 0;
    pointer-events: none;
  }

  .clubs-card-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .clubs-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 2px;
  }
  .clubs-card-name {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
    font-variation-settings: 'opsz' 24;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .clubs-card-count {
    color: var(--ink-faint);
    font-family: var(--sans);
    font-size: 0.72rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }
  .clubs-card-desc {
    color: var(--ink-muted);
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.84rem;
    font-variation-settings: 'opsz' 10;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 2px 0;
  }

  .clubs-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--ink-muted);
    margin-top: auto;
    padding-top: 6px;
  }
  .clubs-card-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .clubs-card-status[data-phase="current"] { color: var(--coral-strong); }
  .clubs-card-status[data-phase="current"] .clubs-card-status-dot {
    background: var(--coral);
    box-shadow: 0 0 0 3px var(--coral-bg);
    animation: pulseDot 2s ease-in-out infinite;
  }
  .clubs-card-status[data-phase="upcoming"] { color: var(--teal); }
  .clubs-card-status[data-phase="upcoming"] .clubs-card-status-dot { background: var(--teal); }
  .clubs-card-status[data-phase="empty"] { color: var(--ink-faint); font-style: italic; }
  .clubs-card-status[data-phase="empty"] .clubs-card-status-dot { background: var(--dust); opacity: 0.5; }

  @keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 var(--coral-bg); }
    50% { box-shadow: 0 0 0 5px transparent; }
  }

  .clubs-card-pick-title {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* ── Club detail view ────────────────────────────────────────────────── */

  .clubs-detail-head {
    margin-bottom: var(--space-xl);
  }
  .clubs-back-btn {
    padding: 4px 10px !important;
    font-size: 0.78rem;
    margin-bottom: var(--space-md);
  }

  .clubs-detail-title-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    flex-wrap: wrap;
  }
  .clubs-h1 {
    font-family: var(--serif);
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 700;
    font-variation-settings: 'opsz' 36;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
    line-height: 1.02;
  }

  /* Status chip beside the title */
  .clubs-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  .clubs-status-chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .clubs-status-chip[data-phase="current"] {
    background: var(--coral-bg);
    color: var(--coral-strong);
    border-color: rgba(201, 107, 79, 0.22);
  }
  .clubs-status-chip[data-phase="current"] .clubs-status-chip-dot {
    background: var(--coral);
    box-shadow: 0 0 0 3px var(--coral-bg);
    animation: pulseDot 2s ease-in-out infinite;
  }
  .clubs-status-chip[data-phase="upcoming"] {
    background: var(--teal-bg);
    color: var(--teal);
    border-color: rgba(61, 90, 82, 0.2);
  }
  .clubs-status-chip[data-phase="upcoming"] .clubs-status-chip-dot { background: var(--teal); }
  .clubs-status-chip[data-phase="empty"] {
    background: var(--dust-bg);
    color: var(--dust);
    border-color: rgba(138, 133, 126, 0.2);
  }
  .clubs-status-chip[data-phase="empty"] .clubs-status-chip-dot { background: var(--dust); }

  .clubs-detail-desc {
    color: var(--ink-muted);
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: 'opsz' 14;
    font-size: 1.02rem;
    line-height: 1.55;
    margin: var(--space-md) 0;
    max-width: 60ch;
  }

  /* Member avatar pile under the hero */
  .clubs-detail-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
  }
  .clubs-members-pile { display: flex; align-items: center; }
  .clubs-members-pile .friends-avatar {
    width: 32px; height: 32px;
    font-size: 0.78rem;
    margin-left: -8px;
    box-shadow: 0 0 0 2px var(--bg);
  }
  .clubs-members-pile .friends-avatar:first-child { margin-left: 0; }
  .clubs-members-pile-more {
    margin-left: -8px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface-deep);
    color: var(--ink-secondary);
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg);
    position: relative;
    z-index: 1;
  }
  .clubs-meta-caption {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-muted);
    font-size: 0.85rem;
    font-variation-settings: 'opsz' 12;
  }

  .clubs-owner-bar {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
  }

  /* Detail grid — main column + side column on desktop */
  .clubs-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-lg);
    align-items: start;
  }
  .clubs-detail-grid > .clubs-detail-main { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
  .clubs-detail-grid > .clubs-detail-side { display: flex; flex-direction: column; gap: var(--space-md); }
  .clubs-detail-grid > .clubs-detail-full { grid-column: 1 / -1; }
  @media (max-width: 880px) {
    .clubs-detail-grid { grid-template-columns: 1fr; }
  }

  /* Section surface shared by detail view */
  .clubs-panel {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: 0 1px 3px rgba(44, 53, 48, 0.04), 0 0 0 1px var(--border);
    padding: var(--space-lg);
    min-width: 0;
  }
  .clubs-panel-h {
    font-family: var(--serif);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-muted);
    margin: 0 0 var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  .clubs-panel-h::before {
    content: '';
    display: inline-block;
    width: 14px; height: 2px;
    background: var(--coral);
    border-radius: 1px;
    opacity: 0.7;
  }
  .clubs-panel-h .section-count {
    margin-left: auto;
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-faint);
    font-weight: 500;
  }

  /* ── Now Reading — hero pick ────────────────────────────────────────── */
  .clubs-now {
    position: relative;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--space-lg);
    padding: var(--space-lg);
    background:
      radial-gradient(ellipse 90% 60% at 100% 0%, rgba(201, 107, 79, 0.05) 0%, transparent 60%),
      var(--card);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(44, 53, 48, 0.04), 0 0 0 1px var(--border);
    overflow: hidden;
    align-items: start;
  }
  .clubs-now::before {
    content: 'Reading now';
    position: absolute;
    top: 14px; right: 16px;
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--coral);
    text-transform: uppercase;
  }
  @media (max-width: 560px) {
    .clubs-now { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-md); }
    .clubs-now::before { top: 10px; right: 12px; }
  }
  .clubs-now-cover-wrap { position: relative; width: 160px; }
  @media (max-width: 560px) { .clubs-now-cover-wrap { width: 120px; margin: 0 auto; } }
  .clubs-now-cover,
  .clubs-now-cover-blank {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--r-sm);
    box-shadow: 4px 8px 24px rgba(28, 23, 16, 0.18), 0 0 0 1px rgba(44, 53, 48, 0.06);
    background: var(--surface);
  }
  .clubs-now-cover-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    font-family: var(--serif);
    font-size: 2.4rem;
    font-weight: 700;
    opacity: 0.3;
  }
  .clubs-now-cover-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 10px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.10));
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    pointer-events: none;
  }
  .clubs-now-meta { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
  .clubs-now-title {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    font-variation-settings: 'opsz' 30;
    letter-spacing: -0.015em;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
  }
  .clubs-now-author {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-muted);
    font-size: 1rem;
    font-variation-settings: 'opsz' 14;
    margin-top: 2px;
  }
  .clubs-now-dates {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-secondary);
    margin-top: var(--space-sm);
    display: flex;
    gap: var(--space-sm);
    align-items: center;
  }
  .clubs-now-dates-sep {
    color: var(--ink-faint);
  }
  .clubs-progress {
    margin-top: var(--space-md);
    height: 5px;
    background: var(--surface);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .clubs-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--coral) 0%, var(--coral-strong) 100%);
    border-radius: 999px;
    transition: width 0.6s var(--ease-out);
  }
  .clubs-progress-label {
    margin-top: 6px;
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
  }

  /* Wrapper around a pick card + its owner-only remove overlay button. */
  .clubs-pick-wrap {
    position: relative;
  }
  .clubs-shelf-spine-wrap {
    /* Pass through the shelf spine's own sizing (width is set on the
       .clubs-shelf-spine button) so the scroller's flex layout still
       snaps correctly. */
    flex: 0 0 auto;
  }
  .clubs-pick-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity var(--t-fast), background var(--t-fast);
    z-index: 2;
  }
  .clubs-pick-wrap:hover .clubs-pick-remove,
  .clubs-pick-remove:focus-visible {
    opacity: 1;
  }
  .clubs-pick-remove:hover {
    background: var(--coral, #e0615e);
  }
  .clubs-pick-remove:disabled {
    opacity: 0.4;
    cursor: wait;
  }

  /* Make .clubs-pick-block (the current pick button) unstyled wrapper
     around the now-reading card so it remains clickable. */
  button.clubs-pick-block {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: var(--r-lg);
    transition: transform var(--t-med), box-shadow var(--t-med);
  }
  button.clubs-pick-block:hover { transform: translateY(-2px); }
  button.clubs-pick-block:hover .clubs-now { box-shadow: 0 10px 26px rgba(44, 53, 48, 0.08), 0 0 0 1px var(--border-strong); }
  button.clubs-pick-block:active { transform: translateY(0); }

  /* ── Discussion ─────────────────────────────────────────────────────── */
  .clubs-discussion { padding: var(--space-lg); }
  .clubs-posts {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
  }
  .clubs-post {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-warm);
    border-radius: var(--r-md);
    position: relative;
    animation: cardReveal 0.4s var(--ease-out) both;
  }
  .clubs-post::before {
    content: '';
    position: absolute;
    top: var(--space-md); bottom: var(--space-md);
    left: 0;
    width: 3px;
    background: var(--coral);
    border-radius: 0 2px 2px 0;
    opacity: 0.25;
  }
  .clubs-post-body { min-width: 0; }
  .clubs-post-head {
    display: flex;
    gap: var(--space-sm);
    align-items: baseline;
    margin-bottom: 4px;
  }
  .clubs-post-name {
    font-family: var(--sans);
    font-weight: 500;
    color: var(--ink);
    font-size: 0.9rem;
  }
  .clubs-post-when {
    color: var(--ink-faint);
    font-size: 0.72rem;
    font-family: var(--sans);
  }
  .clubs-post-text {
    color: var(--ink-secondary);
    font-size: 0.95rem;
    font-family: var(--serif);
    font-variation-settings: 'opsz' 12;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .clubs-post-compose {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--border-strong);
  }
  .clubs-post-compose .friends-input,
  .clubs-post-compose .friends-textarea {
    min-height: 72px;
    resize: vertical;
    font-family: var(--serif);
    font-variation-settings: 'opsz' 12;
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .clubs-post-compose-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
  }

  /* ── Upcoming picks (small cards) ───────────────────────────────────── */
  .clubs-upcoming {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-sm);
  }
  .clubs-upcoming .clubs-pick-block {
    background: var(--bg-warm);
    padding: var(--space-sm);
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--space-sm);
    border-radius: var(--r-sm);
    text-align: left;
    border: 1px solid var(--border);
    transition: background var(--t-fast), transform var(--t-fast);
    cursor: pointer;
  }
  .clubs-upcoming .clubs-pick-block:hover { background: var(--surface); transform: translateY(-2px); }
  .clubs-upcoming .clubs-pick-cover,
  .clubs-upcoming .clubs-card-cover-blank {
    width: 44px; height: 66px;
    border-radius: 3px;
    box-shadow: 1px 2px 6px rgba(0,0,0,0.12);
    object-fit: cover;
    background: var(--surface);
  }
  .clubs-upcoming .clubs-pick-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 0.92rem;
    font-variation-settings: 'opsz' 14;
    color: var(--ink);
    line-height: 1.25;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .clubs-upcoming .clubs-pick-author {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-variation-settings: 'opsz' 10;
    margin: 2px 0;
  }
  .clubs-upcoming .clubs-pick-dates-line {
    color: var(--teal);
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ── The Shelf — past picks as a horizontal bookshelf ───────────────── */
  .clubs-shelf-panel { padding: var(--space-lg) 0; }
  .clubs-shelf-panel > .clubs-panel-h { padding: 0 var(--space-lg); }
  .clubs-shelf-caption {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-muted);
    font-size: 0.88rem;
    font-variation-settings: 'opsz' 12;
    padding: 0 var(--space-lg);
    margin-bottom: var(--space-md);
  }
  .clubs-shelf-scroller {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding: var(--space-sm) var(--space-lg) var(--space-md);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .clubs-shelf-scroller::-webkit-scrollbar { height: 6px; }
  .clubs-shelf-scroller::-webkit-scrollbar-track { background: rgba(44, 53, 48, 0.04); border-radius: 3px; margin: 0 24px; }
  .clubs-shelf-scroller::-webkit-scrollbar-thumb { background: rgba(44, 53, 48, 0.15); border-radius: 3px; }

  /* Wooden shelf edge */
  .clubs-shelf-panel::after {
    content: '';
    display: block;
    height: 4px;
    margin: 0 var(--space-lg);
    border-radius: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #b8a07e 15%,
      #8a7556 50%,
      #b8a07e 85%,
      transparent 100%
    );
    opacity: 0.35;
  }

  button.clubs-pick-block.clubs-shelf-spine {
    flex: 0 0 110px;
    scroll-snap-align: start;
    width: 110px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform var(--t-med);
    animation: cardReveal 0.45s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 50ms);
  }
  button.clubs-pick-block.clubs-shelf-spine:hover { transform: translateY(-4px); }
  button.clubs-pick-block.clubs-shelf-spine:hover .clubs-shelf-spine-cover { box-shadow: 3px 6px 16px rgba(44,53,48,0.18), 0 0 0 1px var(--border-strong); }
  .clubs-shelf-spine-cover,
  .clubs-shelf-spine-cover-blank {
    width: 110px;
    height: 165px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 2px 4px 10px rgba(28, 23, 16, 0.14), 0 0 0 1px rgba(44,53,48,0.06);
    background: var(--surface);
    transition: box-shadow var(--t-med);
  }
  .clubs-shelf-spine-cover-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 700;
    opacity: 0.35;
  }
  .clubs-shelf-spine-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 0.78rem;
    font-variation-settings: 'opsz' 10;
    color: var(--ink);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 2px;
  }
  .clubs-shelf-spine-date {
    font-family: var(--sans);
    color: var(--ink-faint);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
  }

  /* ── Members panel (side column) ─────────────────────────────────────── */
  .clubs-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--sans);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--coral-strong);
    background: var(--coral-bg);
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    border: 1px solid rgba(201, 107, 79, 0.18);
  }
  .clubs-role-pill::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--coral);
  }

  /* ── Pick dialog (modal) ─────────────────────────────────────────────── */
  .clubs-dialog {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: var(--card);
    border-radius: var(--r-lg);
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    width: 92%;
    max-width: 560px;
    z-index: 9001;
    box-shadow: 0 30px 80px rgba(28, 23, 16, 0.35), 0 0 0 1px var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .clubs-dialog::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--coral), var(--teal));
    opacity: 0.8;
  }
  .clubs-dialog h4 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.35rem;
    font-variation-settings: 'opsz' 24;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .clubs-dialog-sub {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-muted);
    font-size: 0.9rem;
    font-variation-settings: 'opsz' 12;
    margin: -8px 0 var(--space-sm);
    line-height: 1.5;
  }
  .clubs-pick-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    margin: 0 calc(var(--space-md) * -1);
    padding: 0 var(--space-md);
  }
  .clubs-pick-result {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--space-sm);
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
  }
  .clubs-pick-result:hover { background: var(--bg-warm); }
  .clubs-pick-result.selected {
    background: var(--coral-bg);
    border-color: rgba(201, 107, 79, 0.35);
    box-shadow: inset 0 0 0 1px var(--coral);
  }
  .clubs-pick-result > * { pointer-events: none; }
  .clubs-pick-result img,
  .clubs-pick-result .clubs-card-cover-blank {
    width: 44px; height: 66px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 1px 2px 6px rgba(0,0,0,0.10);
    background: var(--surface);
  }
  .clubs-pick-result-meta {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .clubs-pick-result-meta .clubs-pick-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 0.92rem;
    font-variation-settings: 'opsz' 14;
    color: var(--ink);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .clubs-pick-result-meta .clubs-pick-author {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-muted);
    font-size: 0.78rem;
    font-variation-settings: 'opsz' 10;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .clubs-pick-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
  .clubs-pick-dates label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .clubs-pick-dates input {
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 0.9rem;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }
  .clubs-pick-dates input:focus {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 3px var(--coral-bg);
  }

  /* Nested sidebar items — used for pinned clubs under the Book clubs link. */
  .sidebar-item-nested {
    padding-left: calc(var(--space-lg) + 8px);
    font-size: 0.84rem;
  }
  .sidebar-item-nested .sidebar-item-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ── Mobile refinements ─────────────────────────────────────────────── */
  @media (max-width: 480px) {
    .friends-view, .clubs-view { padding: var(--space-lg) 0 var(--space-xl); }
    .friends-view-body, .clubs-view-body { padding: 0 var(--space-md); }
    .paper-card, .friends-section, .clubs-panel { padding: var(--space-md); }
    .friends-identity { padding: var(--space-lg) var(--space-md); }
    .friends-addbar { padding: var(--space-md); }
    .clubs-now { padding: var(--space-md); }
    .clubs-dialog { padding: var(--space-lg) var(--space-md); max-width: 94%; }
    .friends-hero { margin-bottom: var(--space-lg); }
    .friends-sections { gap: var(--space-md); }
    .clubs-owner-bar .friends-btn { flex: 1 1 auto; justify-content: center; }
  }
  @media (max-width: 360px) {
    .friends-view-body, .clubs-view-body { padding: 0 12px; }
    .clubs-card { grid-template-columns: 64px 1fr; padding: 12px; }
    .clubs-card-cover,
    .clubs-card-cover-blank { width: 64px; height: 96px; }
  }

  /* ── Index header actions (Discover + New) ───────────────────────────── */
  .clubs-index-actions { display: flex; gap: var(--space-sm); }

  /* ── Form fields (create + edit + discover) ──────────────────────────── */
  .clubs-field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-muted);
    margin-top: 6px;
  }
  .clubs-field-hint {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin: 0;
  }

  /* ── Discover: inline expanding panel (mirrors .clubs-new-form look) ─ */
  .clubs-discover {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: 0 1px 3px rgba(44, 53, 48, 0.04), 0 0 0 1px var(--border);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    position: relative;
    animation: dropIn 0.35s var(--ease-out) both;
  }
  .clubs-discover::before {
    content: '';
    position: absolute;
    top: 0; left: var(--space-lg);
    width: 60px; height: 3px;
    background: var(--coral, #d46a5f);
    border-radius: 0 0 2px 2px;
    opacity: 0.7;
  }
  .clubs-discover h4 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0 0 2px;
    color: var(--ink);
  }
  .clubs-discover-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }
  .clubs-discover-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--border);
  }
  .clubs-discover-card-body { flex: 1; min-width: 0; }
  .clubs-discover-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  .clubs-discover-name {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink);
  }
  .clubs-discover-lang {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    background: var(--surface-deep);
    border-radius: 3px;
    padding: 2px 6px;
  }
  .clubs-discover-desc {
    font-family: var(--serif);
    color: var(--ink-muted);
    font-size: 0.9rem;
    margin: 4px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .clubs-discover-joined {
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-style: italic;
  }

  /* ── Public club preview (non-member view) ───────────────────────────── */
  .clubs-preview {
    background: var(--card);
    border-radius: var(--r-md);
    box-shadow: 0 1px 3px rgba(44, 53, 48, 0.04), 0 0 0 1px var(--border);
    padding: var(--space-xl);
    max-width: 640px;
    margin: var(--space-lg) auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .clubs-preview-name {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0;
  }
  .clubs-preview-meta {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
  }
  .clubs-preview-desc {
    font-family: var(--serif);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
  }
  .clubs-preview-pick {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--r-sm);
    background: var(--surface);
    align-items: center;
  }
  .clubs-preview-cover {
    width: 64px;
    height: 96px;
    object-fit: cover;
    border-radius: 3px;
  }
  .clubs-preview-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
  }
  .clubs-preview-title {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--ink);
  }
  .clubs-preview-dates {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-muted);
    font-size: 0.85rem;
  }
  .clubs-preview-join {
    align-self: flex-start;
  }

}

/* ═══════════════════════════════════════════════
   CLUB LEDGER & LIBRARY-STATE ACTIONS
   The ledger: guestbook-style ratings strip with
   an illuminated-serif aggregate at the head.
   ═══════════════════════════════════════════════ */

@layer components {

  .clubs-ledger {
    grid-column: 1 / -1;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed rgba(44, 53, 48, 0.16);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .clubs-ledger-head {
    font-family: var(--serif);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
    font-variation-settings: 'opsz' 12;
  }

  .clubs-ledger-row {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
  }

  /* Verdict — the big serif numeral + caption */
  .clubs-ledger-verdict {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    padding-right: var(--space-md);
    border-right: 1px solid var(--border);
  }
  .clubs-ledger-score {
    font-family: var(--serif);
    font-size: clamp(2rem, 5vw, 2.6rem);
    font-weight: 700;
    font-variation-settings: 'opsz' 48;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
  }
  .clubs-ledger-caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .clubs-ledger-caption-label {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-secondary);
    font-size: 0.82rem;
    font-variation-settings: 'opsz' 12;
  }
  .clubs-ledger-caption-meta {
    font-family: var(--sans);
    color: var(--ink-faint);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
  }

  .clubs-ledger-empty {
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: 'opsz' 12;
    color: var(--ink-muted);
    font-size: 0.92rem;
    padding-right: var(--space-md);
    border-right: 1px solid var(--border);
  }

  /* Individual marks — a small avatar + inked score */
  .clubs-ledger-marks {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .clubs-ledger-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 36px;
    transition: transform var(--t-fast);
    cursor: default;
  }
  .clubs-ledger-mark:hover { transform: translateY(-1px); }
  .clubs-ledger-mark .friends-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
  }

  .clubs-ledger-mark-score {
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: 'opsz' 14;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
    /* Underline like an ink stroke */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--coral);
  }
  .clubs-ledger-mark-dash {
    font-family: var(--serif);
    color: var(--ink-faint);
    font-size: 1rem;
    line-height: 1;
    opacity: 0.55;
  }
  .clubs-ledger-mark-state {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.7rem;
    color: var(--teal);
    font-variation-settings: 'opsz' 8;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .clubs-ledger-mark[data-state="reading"] .friends-avatar {
    /* subtle "currently in their hands" pulse — very restrained */
    box-shadow: 0 0 0 2px var(--teal-bg);
  }
  .clubs-ledger-mark[data-state="unrated"] .friends-avatar {
    opacity: 0.65;
  }

  /* Compact aggregate on shelf spines — just the score */
  .clubs-ledger-mini {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 6px;
    background: var(--coral-bg);
    border-radius: 999px;
    font-family: var(--serif);
    line-height: 1.1;
    white-space: nowrap;
  }
  .clubs-ledger-mini-score {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--coral-strong);
    font-feature-settings: 'lnum' 1, 'tnum' 1;
    font-variation-settings: 'opsz' 12;
    letter-spacing: -0.01em;
  }
  .clubs-ledger-mini-count {
    font-size: 0.66rem;
    color: var(--ink-muted);
    font-family: var(--sans);
    letter-spacing: 0.02em;
  }

  /* In-card library actions — a span role="button" used instead of a
     real <button> so we can nest inside the outer clubs-pick-block
     button without invalid HTML. */
  .clubs-now-action {
    margin-top: var(--space-sm);
  }
  .clubs-card-library-btn,
  .clubs-card-library-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
    user-select: none;
  }
  .clubs-card-library-btn {
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast);
  }
  .clubs-card-library-btn:hover { background: #1a211d; }
  .clubs-card-library-btn:active { transform: scale(0.96); }
  .clubs-card-library-btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
  }
  .clubs-card-library-badge {
    background: var(--sage-bg);
    color: var(--sage);
    border: 1px solid rgba(122, 140, 122, 0.25);
    font-style: italic;
    font-family: var(--serif);
    font-variation-settings: 'opsz' 10;
  }
  .clubs-card-library-badge::before {
    content: '\2713';
    font-weight: 700;
    font-style: normal;
    font-family: var(--sans);
    color: var(--sage);
  }

  /* Upcoming / small cards — push the action + keep it sized right */
  .clubs-upcoming .clubs-card-library-btn,
  .clubs-upcoming .clubs-card-library-badge {
    margin-top: 4px;
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  /* Mobile refinements */
  @media (max-width: 560px) {
    .clubs-ledger-row { gap: var(--space-md); }
    .clubs-ledger-verdict,
    .clubs-ledger-empty {
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding-right: 0;
      padding-bottom: var(--space-sm);
      width: 100%;
    }
    .clubs-ledger-marks { width: 100%; }
  }
}

/* Flash the "Add to library" button when the user taps a card for a
   book they haven't added — tells them which control to use without a
   modal or toast. CSS-only; the JS just re-applies the class. */
@layer components {
  @keyframes clubsAddFlash {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 var(--coral-bg); }
    40%  { transform: scale(1.08); box-shadow: 0 0 0 8px transparent; }
    100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
  }
  .clubs-card-library-btn--flash {
    animation: clubsAddFlash 0.6s var(--ease-out) 1;
  }
}

/* Pick-picker: filter pills + external-result styling. Matches the
   visual vocabulary of the library wizard's .wizard-type-pill without
   colliding with its selectors. */
@layer components {
  .clubs-pick-types {
    display: flex;
    gap: 6px;
    margin: -4px 0 4px;
  }
  .clubs-pick-type {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  }
  .clubs-pick-type:hover { background: var(--bg-warm); color: var(--ink-secondary); }
  .clubs-pick-type.active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }

  /* Extra metadata line on a pick result: year · pages, plus a tiny
     source badge for non-local sources and a "not in catalog" note
     for rows we can't select. */
  .clubs-pick-result-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--ink-faint);
    letter-spacing: 0.02em;
    margin-top: 2px;
  }
  .clubs-pick-result-source {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .clubs-pick-result-note {
    color: var(--dust);
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: 'opsz' 10;
    font-size: 0.72rem;
    letter-spacing: 0;
  }
  /* Muted state for external (ISBNdb/Google/OL, work_id=null) rows —
     visible but clearly not pickable. */
  .clubs-pick-result--external {
    opacity: 0.75;
    cursor: not-allowed;
  }
  .clubs-pick-result--external:hover { background: transparent; }
  .clubs-pick-result--external .clubs-pick-title { color: var(--ink-muted); }
}

/* ═══════════════════════════════════════════════
   CHANGE-EDITION MENU — "The Catalog Drawer"
   Popover anchored to a pill under the drawer cover.
   Lets the user swap which edition their library row
   points at (different cover, language, publisher).
   ═══════════════════════════════════════════════ */
@layer components {
  .ed-wrap {
    display: flex;
    justify-content: center;
    position: relative;
    margin: -6px 0 10px;
  }

  /* Trigger pill — shows current edition's language + count of alternatives */
  .ed-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 10px;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-secondary);
    background: var(--card);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
    transition:
      border-color var(--t-fast),
      background var(--t-fast),
      transform var(--t-fast),
      box-shadow var(--t-fast),
      color var(--t-fast);
  }
  .ed-trigger:hover {
    border-color: rgba(44, 53, 48, 0.28);
    background: var(--card-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(44,53,48,0.06);
  }
  .ed-trigger:focus-visible {
    outline: none;
    border-color: var(--coral);
    box-shadow: 0 0 0 3px var(--coral-bg);
  }
  .ed-trigger[aria-expanded="true"] {
    background: var(--amber-bg);
    border-color: var(--coral);
    color: var(--coral-strong);
  }

  /* Language chip inside trigger — Fraunces italic, like a handwritten
     call-number on a library card */
  .ed-trigger-lang {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    color: var(--ink);
    padding: 1px 9px;
    border-radius: 6px;
    background: var(--amber-bg);
    box-shadow: inset 0 0 0 1px rgba(201, 107, 79, 0.18);
    transition: background var(--t-fast), box-shadow var(--t-fast);
  }
  .ed-trigger[aria-expanded="true"] .ed-trigger-lang {
    background: var(--card);
    box-shadow: inset 0 0 0 1px rgba(201, 107, 79, 0.35);
  }
  .ed-trigger-count {
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
  }
  .ed-trigger-chev {
    width: 11px;
    height: 11px;
    color: var(--ink-faint);
    transition: transform var(--t-med), color var(--t-fast);
  }
  .ed-trigger[aria-expanded="true"] .ed-trigger-chev {
    transform: rotate(180deg);
    color: var(--coral-strong);
  }

  /* Popover — "the drawer" */
  .ed-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: min(320px, calc(100vw - 48px));
    background: linear-gradient(180deg, #fbf6ec 0%, #f5f0e4 100%);
    border: 1px solid rgba(44, 53, 48, 0.12);
    border-radius: 14px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 20px 50px rgba(44, 53, 48, 0.18),
      0 4px 14px rgba(44, 53, 48, 0.08);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity 180ms var(--ease-out),
      transform 220ms var(--ease-out),
      visibility 0s linear 220ms;
    z-index: 205;
  }
  .ed-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    transition:
      opacity 200ms var(--ease-out),
      transform 260ms var(--ease-out),
      visibility 0s;
  }

  /* Pin-notch pointing up to the trigger */
  .ed-menu::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translateX(-50%) rotate(45deg);
    background: #fbf6ec;
    border-top: 1px solid rgba(44, 53, 48, 0.12);
    border-left: 1px solid rgba(44, 53, 48, 0.12);
  }

  /* Brass drawer-pull edge under the heading */
  .ed-menu-head {
    position: relative;
    padding: 12px 16px 10px;
    border-bottom: 1px solid rgba(44, 53, 48, 0.08);
  }
  .ed-menu-head::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(201, 107, 79, 0.55) 25%,
      rgba(201, 107, 79, 0.75) 50%,
      rgba(201, 107, 79, 0.55) 75%,
      transparent 100%);
    border-radius: 2px;
  }
  .ed-menu-label {
    font-family: var(--sans);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 500;
  }
  .ed-menu-title {
    font-family: var(--serif);
    font-size: 0.98rem;
    font-weight: 400;
    font-style: italic;
    color: var(--ink-secondary);
    margin-top: 2px;
  }
  .ed-menu-title em { font-style: normal; color: var(--ink); }

  .ed-menu-list {
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
  .ed-menu-list::-webkit-scrollbar { width: 6px; }
  .ed-menu-list::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
  }

  /* Single catalog card row */
  .ed-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px 8px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    animation: ed-row-in 360ms var(--ease-out) forwards;
    transition:
      background var(--t-fast),
      border-color var(--t-fast),
      transform var(--t-fast);
  }
  .ed-card:nth-child(1) { animation-delay: 40ms; }
  .ed-card:nth-child(2) { animation-delay: 90ms; }
  .ed-card:nth-child(3) { animation-delay: 140ms; }
  .ed-card:nth-child(4) { animation-delay: 190ms; }
  .ed-card:nth-child(5) { animation-delay: 240ms; }
  .ed-card:nth-child(n+6) { animation-delay: 290ms; }

  @keyframes ed-row-in {
    to { opacity: 1; transform: translateY(0); }
  }

  .ed-card:hover {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(44, 53, 48, 0.08);
  }
  .ed-card:focus-visible {
    outline: none;
    background: var(--card);
    border-color: var(--coral);
    box-shadow: 0 0 0 3px var(--coral-bg);
  }
  .ed-card:active { transform: scale(0.995); }
  .ed-card[aria-current="true"] {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(201, 107, 79, 0.22);
  }
  .ed-card[aria-current="true"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: var(--coral);
    border-radius: 0 2px 2px 0;
  }

  /* Mini-cover with a book-spine shadow on the right */
  .ed-card-cover {
    position: relative;
    width: 44px;
    height: 60px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--surface);
    box-shadow:
      0 2px 6px rgba(44,53,48,0.10),
      0 1px 2px rgba(44,53,48,0.06);
    flex-shrink: 0;
  }
  .ed-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ed-card-cover::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(to bottom,
      rgba(0,0,0,0.08) 0, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 2px);
  }
  .ed-card-nocover {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-faint);
    font-size: 0.7rem;
  }

  .ed-card-body { min-width: 0; }
  .ed-card-line1 {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 2px;
  }
  .ed-card-lang {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.94rem;
    letter-spacing: 0.005em;
    color: var(--ink);
    line-height: 1;
  }
  .ed-card-year {
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  .ed-card-line2 {
    font-family: var(--sans);
    font-size: 0.72rem;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ed-card-line2 em {
    font-style: normal;
    color: var(--ink-muted);
  }

  .ed-card-mark {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ed-card-mark-tick {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(201,107,79,0.35);
  }
  .ed-card-mark-tick svg { width: 10px; height: 10px; }

  .ed-menu-empty {
    padding: 28px 16px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ink-muted);
  }

  /* "Show N more" toggle separating preferred rows from unknown-language
     ones. Sits in the list below preferred rows, revealed naturally as the
     user scrolls past them. Fades away once clicked. */
  .ed-unknown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 4px 0 2px;
    padding: 9px 10px;
    background: transparent;
    border: none;
    border-top: 1px dashed rgba(44, 53, 48, 0.14);
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--ink-muted);
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: color var(--t-fast), background var(--t-fast);
  }
  .ed-unknown-toggle svg {
    width: 11px;
    height: 11px;
    color: var(--ink-faint);
    transition: transform var(--t-fast);
  }
  .ed-unknown-toggle:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.5);
  }
  .ed-unknown-toggle:hover svg {
    transform: translateY(1px);
    color: var(--coral);
  }
  .ed-unknown-toggle:focus-visible {
    outline: none;
    background: var(--card);
    box-shadow: 0 0 0 3px var(--coral-bg);
    border-radius: 8px;
    color: var(--ink);
  }
  /* Reset the inner cards' stagger delays when the group reveals — otherwise
     previously-animated rows flash in again at stale delays. */
  .ed-unknown-group .ed-card { animation-delay: 0ms; }

  /* Success toast anchored to the picker */
  .ed-toast {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 7px 14px;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(44,53,48,0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease-out), transform 300ms var(--ease-out);
    z-index: 206;
    white-space: nowrap;
  }
  .ed-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-18px);
  }
  .ed-toast svg {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 5px;
    color: var(--sage);
  }

  /* "A new batch is generating…" banner shown above the recs shelf while a
     background task is running. Coral left bar to read as a notification,
     warm paper background so it doesn't fight with the book cards below. */
  .recs-generating-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
    background: linear-gradient(90deg, rgba(201,107,79,0.09) 0%, rgba(201,107,79,0.03) 100%);
    border: 1px solid rgba(201,107,79,0.18);
    border-left: 3px solid var(--coral);
    border-radius: var(--r-sm);
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink-secondary);
    letter-spacing: 0.01em;
  }
  .recs-generating-banner .recs-spinner {
    border-color: rgba(201,107,79,0.25);
    border-top-color: var(--coral);
    flex-shrink: 0;
  }

  /* Cover-swap animation: the drawer's main cover fades out, spine pulses
     coral while the new image loads, then crossfades in. */
  .d-cover.swapping img {
    opacity: 0;
    transform: translateX(-8px);
  }
  .d-cover.swapping::before {
    animation: ed-spine-pulse 500ms var(--ease-out);
  }
  @keyframes ed-spine-pulse {
    0%, 100% { opacity: 1; }
    50% { background: var(--coral); opacity: 1; }
  }
}