/* ═══════════════════════════════════════════════════════════════════
   BIBLIOCCULT — own CSS surface (per docs/videoccult-page-structure.md
   §5: each pillar owns its own files, consumes the shared theme-core
   tokens, matches the shape not the literal classes). Base tokens
   (--void/--gold/--chamber/--border/--text/etc.) come from
   ../css/theme-core.css, imported in index.html the same way Games
   imports it.
   ═══════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Real font tokens, matching css/main.css and games/videoccult-games.css
   by NAME, not just by coincidentally-identical fallback literal.
   theme-core.css (imported in index.html) does not define font tokens
   at all -- confirmed by grep, it's a color-only 21-token system -- so
   each pillar owns its own font tokens locally, same as main.css/games
   css both do. BC previously never defined these itself and referenced
   them under invented names (--font-body, --font-mono) that don't exist
   anywhere else in the codebase, relying entirely on scattered inline
   fallback literals to happen to match. Renamed to the real shared names
   below so this is genuinely wired to the same system, not accidentally
   matching it today and silently drifting the moment either real
   pillar's values change. */
:root{
  --font-occult:'Cinzel',serif;
  --font-vhs:'Share Tech Mono',monospace;
  --font-grimoire:'Crimson Text',serif;
}

body{
  background:var(--void,#050407); color:var(--text,#e8e0d0);
  font-family:var(--font-grimoire,'Crimson Text',Georgia,serif);
  min-height:100vh;
}

.vc-shell{display:flex;flex-direction:column;min-height:100vh}

/* ── Top bar — reconciled directly against the real nav in index.html
   (.nav-logo/.nav-links/.nav-right, css/main.css) and
   games/index.html's .games-topbar-logo/-links/-right (identical shape).
   Height matches Games' --games-nav-h (4.5rem) exactly rather than an
   arbitrary shorter value -- the prior 58px read visibly thinner than
   both real siblings side by side. Three top-level flex children
   (logo/links/right) + justify-content:space-between is what actually
   centers the links; a wrapping div around logo+links (the prior
   .bc-topbar-left) defeats that distribution entirely. ──────────── */
.bc-topbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:4.5rem;
  background:var(--nav-shell,#0a0709);border-bottom:1px solid var(--rim,rgba(201,151,58,.08));
}
.bc-topbar-logo{display:flex;align-items:center}
.bc-topbar-wordmark{font-family:var(--font-occult,'Cinzel',serif);font-weight:700;font-size:19px;letter-spacing:.1em;color:var(--gold-pale,#f0d080)}
.bc-topbar-wordmark .sigil{color:var(--gold,#c9973a);margin:0 .15em}
.bc-topbar-links{display:flex;gap:2px;font-family:var(--font-vhs,monospace);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
/* Filled-pill active/hover state, matching .nav-links a.active /
   .games-topbar-links a.active exactly -- the prior underline-only
   treatment was a visibly weaker echo of the real pattern, not the
   pattern itself. */
.bc-topbar-links a{color:var(--dust,#7d7390);text-decoration:none;padding:8px 16px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:all .15s}
.bc-topbar-links a:hover,.bc-topbar-links a.active{
  color:var(--gold,#c9973a);
  background:var(--nav-active-bg,color-mix(in srgb,var(--gold,#c9973a) 8%,transparent));
  border-color:var(--nav-active-border,color-mix(in srgb,var(--gold,#c9973a) 15%,transparent));
}
.bc-topbar-right{display:flex;align-items:center}

/* Auth pill — same shape as games/index.html's .sidebar-auth-pill
   (dot + avatar + label + action), reused here rather than reinvented;
   see the topbar markup comment in index.html for why this shape was
   chosen over Movies/TV's dropdown .nav-user. Populated by topbar.js. */
.bc-auth-pill{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;border:1px solid var(--border,rgba(201,151,58,.14));background:rgba(0,0,0,.25)}
.bc-auth-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--dust,#7d7390);box-shadow:0 0 5px var(--dust,#7d7390);transition:background .3s,box-shadow .3s}
.bc-auth-pill.authed .bc-auth-dot{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.6)}
.bc-avatar{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:none;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,var(--blood,#5a0a0a),var(--panel,#1a1218));border:1px solid rgba(201,151,58,.35);font-size:15px;line-height:1;color:var(--gold,#c9973a)}
.bc-auth-pill.authed .bc-avatar{display:flex}
.bc-avatar img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.bc-auth-label{font-family:var(--font-vhs,monospace);font-size:.6875rem;letter-spacing:1px;text-transform:uppercase;color:var(--dust,#7d7390)}
.bc-auth-pill.authed .bc-auth-label{color:rgba(180,255,212,.8)}
.bc-auth-action{font-family:var(--font-vhs,monospace);font-size:.6875rem;letter-spacing:1px;text-transform:uppercase;color:var(--gold,#c9973a);opacity:.8;cursor:pointer;border:none;background:none;padding:0;transition:opacity .15s}
.bc-auth-action:hover{opacity:1}

/* ── Auth gate ──────────────────────────────────────────────────
   .bc-main hidden until topbar.js confirms a real session and adds
   `bc-authed` to <body>; the gate itself is the inverse. Default
   (neither class resolved yet) shows the gate, not the app -- see
   index.html's own comment on why this order avoids a content flash. */
.bc-auth-gate{
  display:flex;min-height:60vh;align-items:center;justify-content:center;padding:40px 20px;
}
body.bc-authed .bc-auth-gate{display:none}
.bc-auth-gate-card{
  text-align:center;max-width:360px;padding:36px 32px;border-radius:10px;
  background:var(--sidebar-shell,#080610);border:1px solid var(--rim,rgba(201,151,58,.08));
}
.bc-auth-gate-sigil{font-size:2rem;color:var(--gold,#c9973a);margin-bottom:10px}
.bc-auth-gate-title{font-family:var(--font-occult,'Cinzel',serif);font-weight:700;font-size:1.375rem;color:var(--gold-pale,#f0d080);margin-bottom:8px}
.bc-auth-gate-sub{color:var(--fog,#8a7e94);font-size:.9375rem;margin:0 0 22px}
.bc-auth-gate .bc-detail-btn{display:inline-block;text-decoration:none}

/* ── Body layout ────────────────────────────────────────────────── */
.bc-main{flex:1;display:none}
body.bc-authed .bc-main{display:flex}
aside.bc-sidebar{
  width:220px;flex-shrink:0;padding:20px 14px;display:flex;flex-direction:column;
  background:var(--sidebar-shell,#080610);
  border-right:1px solid var(--rim,rgba(201,151,58,.08));
}
.bc-sidebar-label{font-family:var(--font-vhs,monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust,#7d7390);margin:20px 0 8px}
.bc-sidebar-label:first-child{margin-top:0}
/* Reconciled against the real .sidebar-item/.sidebar-item.active/
   .sidebar-item .icon in css/main.css -- same shape/numbers, BC's own
   class name per page-structure.md §5. */
.bc-sidebar-item{position:relative;display:flex;align-items:center;gap:.625rem;padding:.5625rem .625rem;border-radius:6px;font-family:var(--font-vhs,monospace);font-size:.6875rem;letter-spacing:1px;text-transform:uppercase;color:var(--dust,#7d7390);cursor:pointer;transition:all .15s;border:1px solid transparent}
.bc-sidebar-item:hover{background:var(--chamber,#150f22);color:var(--gold,#c9973a);border-color:var(--rim,rgba(201,151,58,.08))}
.bc-sidebar-item.active{background:var(--chamber,#150f22);color:var(--gold,#c9973a);border-color:var(--border,rgba(201,151,58,.14))}
.bc-sidebar-item.disabled{cursor:default;opacity:.5}
.bc-sidebar-item.disabled:hover{background:none;color:var(--dust,#7d7390);border-color:transparent}
.bc-sidebar-item .icon{font-size:.875rem;width:18px;text-align:center}
/* No max-width cap -- matches Sanctum's real main content exactly
   (css/main.css .dashboard-layout: grid-template-columns:13.75rem 1fr,
   the 1fr column is genuinely unconstrained). The previous 1100px cap
   here was a leftover from the original static mockup's narrower
   layout, not an intentional match to anything real. */
.bc-page{flex:1;padding:32px 40px}
.bc-page-eyebrow{font-family:var(--font-vhs,monospace);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold,#c9973a);opacity:.85;margin:0 0 8px}
.bc-page-title{font-family:var(--font-occult,'Cinzel',serif);font-weight:700;font-size:1.75rem;color:var(--gold-pale,#f0d080);margin:0 0 6px}
.bc-page-sub{color:var(--fog,#8a7e94);font-size:.9375rem;margin:0 0 18px;max-width:60ch}
.bc-page-divider{height:1px;background:var(--rim,rgba(201,151,58,.08));margin-bottom:26px}

/* ── Test harness (phase-1 proof surface, not final library UI) ──── */
.bc-harness-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.bc-harness-card{
  background:var(--chamber,#150f22);border:1px solid var(--border,rgba(201,151,58,.14));
  border-radius:10px;padding:18px;
}
.bc-harness-card h3{font-family:var(--font-occult,'Cinzel',serif);font-size:1rem;color:var(--text,#e8e0d0);margin:0 0 6px}
.bc-harness-card p{font-size:.8125rem;color:var(--fog,#8a7e94);margin:0 0 14px;line-height:1.5}
.bc-harness-card button{
  width:100%;font-family:var(--font-vhs,monospace);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;
  padding:10px;border-radius:6px;border:1px solid var(--border-bright,rgba(201,151,58,.4));
  background:transparent;color:var(--gold-pale,#f0d080);cursor:pointer;transition:background .15s;
}
.bc-harness-card button:hover{background:var(--gold-glow,rgba(201,151,58,.12))}
.bc-harness-tag{display:inline-block;font-family:var(--font-vhs,monospace);font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:var(--altar,#1e1530);color:var(--dust,#7d7390);margin-bottom:10px}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — capped activity rails (docs/videoccult-page-structure.md
   §7: "Activity slice -- recently logged by the user, recently/soon
   released. Not archive-wide stats, not a catalog browser."). No stat
   row and no By Publisher breakdown here anymore -- that was catalog/
   archive framing from the first rebuild pass, removed outright (§7
   material belongs to the future Discover page, not relocated here).
   Every rail still holds a small, explicitly-capped item count (see
   data.js's fetchRecentlyLogged/fetchCurrentlyReading .limit() calls)
   -- that discipline is unchanged from the original crash fix. Never
   turn .bc-rail-scroll into an unbounded grid without a real
   pagination story behind it.
   Numbers reconciled directly against the real Sanctum markup/CSS
   (index.html #view-dashboard, css/main.css .continue-rail/
   .continue-scroll) -- same shape, own tokens, per page-structure.md
   §5. --deep/--chamber/--gold/--border/etc. are real shared
   theme-core.css tokens (confirmed present, not guessed) so they're
   used bare; --radius/--font-occult/--font-vhs are NOT shared
   (main.css-local), so those keep BC's existing fallback pattern.
   BC's rail items are its own established cover-first card
   (.bc-cover-card, reconciled against "The Stacks" mockup) rather
   than Sanctum's compact thumbnail+text row card -- the RAIL
   CONTAINER mechanics (wrapping auto-fill grid, not a horizontal
   scroller) are what's actually being matched. */
.bc-rail-card{background:var(--deep);border:1px solid var(--border);border-radius:10px;padding:22px;margin-bottom:28px}
.bc-rail-head{font-family:var(--font-occult,'Cinzel',serif);font-size:.875rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gold-pale);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--rim)}
/* Wrapping grid, not a horizontal scroller -- matches Sanctum's real
   .continue-scroll mechanic exactly (repeat(auto-fill,minmax(...,1fr))).
   This is the actual fix for a small item count implying a scrollbar
   that isn't really there: a wrapping grid fills the width naturally
   across rows instead. */
.bc-rail-scroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.bc-rail-item .bc-cover-art{aspect-ratio:2/3}
.bc-rail-item-static .bc-cover-card{cursor:default}
.bc-rail-item-static .bc-cover-art:hover{transform:none;border-color:var(--rim);box-shadow:0 10px 24px rgba(0,0,0,.5)}

/* ═══════════════════════════════════════════════════════════════
   LIBRARY CARD + DETAIL MODAL — shared visual language for any
   cover-card surface (dashboard rails today; a future Discover grid
   reuses these same classes rather than reinventing them).
   ═══════════════════════════════════════════════════════════════ */
.bc-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.bc-count-label{font-family:var(--font-vhs,monospace);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dust,#7d7390)}

.bc-empty-state{padding:60px 20px;text-align:center;color:var(--fog,#8a7e94);font-family:var(--font-vhs,monospace);font-size:.8125rem}
.bc-empty-state.bc-error{color:var(--blood-text,#e07070)}

.bc-cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px}
.bc-cover-card{cursor:pointer}
.bc-cover-art{
  aspect-ratio:2/3;border-radius:4px;position:relative;overflow:hidden;
  border:1px solid var(--rim,rgba(201,151,58,.08));box-shadow:0 10px 24px rgba(0,0,0,.5);
  background:var(--altar,#1e1530) center/cover no-repeat;
  transition:transform .2s ease,border-color .2s,box-shadow .2s;
}
.bc-cover-card:hover .bc-cover-art{
  transform:translateY(-5px);border-color:var(--gold,#c9973a);
  box-shadow:0 16px 34px rgba(0,0,0,.6),0 0 0 1px rgba(201,151,58,.25);
}
.bc-cover-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-vhs,monospace);font-size:10px;color:var(--dust,#7d7390);text-align:center;padding:10px}
/* Bumped from 22px/11px per direct feedback that it read too small to
   register as a real signal, especially now that the glyph actually
   varies by real format instead of being the same icon everywhere. */
.bc-format-glyph{
  position:absolute;top:8px;left:8px;z-index:3;width:30px;height:30px;border-radius:6px;
  background:rgba(5,4,7,.8);border:1px solid var(--border-bright,rgba(201,151,58,.4));
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.bc-cover-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,4,7,.94) 100%);
  display:flex;align-items:flex-end;padding:12px;opacity:0;transition:opacity .2s ease;
}
.bc-cover-card:hover .bc-cover-overlay{opacity:1}
.bc-cover-overlay-series{font-weight:600;font-size:13px;color:var(--bone,#f2ece0);line-height:1.25}
.bc-cover-overlay-meta{font-family:var(--font-vhs,monospace);font-size:10px;color:var(--fog,#8a7e94);text-transform:uppercase;margin-top:3px;letter-spacing:.05em}

/* ── Detail modal (card→modal, page-structure.md §5) ─────────────── */
.bc-modal-backdrop{
  position:fixed;inset:0;z-index:1500;background:rgba(5,4,7,.8);
  display:none;align-items:center;justify-content:center;padding:30px;backdrop-filter:blur(2px);
}
.bc-modal-backdrop.open{display:flex}
/* Modal-as-flex-column: a fixed-height cover+content row, then a
   full-width footer sibling below it (never nested inside the content
   column -- action buttons need to stay reachable regardless of how
   long the info column's content gets, and run the full width of the
   modal, not just under the text). Replaces an earlier CSS-Grid
   version (2026-08-24) that tried to derive the cover's size by
   stretching it to match the content column's height -- real bug,
   found live: for a real comic cover (not a photo), any crop reads as
   visibly broken (a logo or barcode sliced off), and grid's max-height
   also doesn't constrain intrinsic row sizing the way you'd expect, so
   "long content" cases silently CLIPPED overflow instead of scrolling
   it. Real, measured comic-cover aspect ratio (12 real covers checked
   across single-issue/TPB/omnibus, all 0.644-0.667) replaces that
   entirely: the cover column sizes itself from its own real 2:3 ratio
   (never stretched, never cropped), and a definite pixel height on
   .bc-detail-row (not max-height -- that was the actual clipping bug)
   is what makes the content column's internal scroll genuinely work
   for long editions instead of silently losing content past the fold. */
.bc-detail-modal{
  background:var(--chamber,#150f22);border:1px solid var(--border-bright,rgba(201,151,58,.4));border-radius:10px;
  max-width:720px;width:100%;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6);
  display:flex;flex-direction:column;
}
.bc-detail-row{display:flex;min-height:0;height:460px}
.bc-detail-cover{aspect-ratio:2/3;height:100%;flex-shrink:0;position:relative;background:var(--altar,#1e1530) center/cover no-repeat}
.bc-detail-content{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;position:relative}
/* Bigger, better-structured variant (per direct feedback the original
   read cramped for what it needed to show -- format/facts/description
   on top of what was already there). Not a literal 2x of every number,
   but meaningfully roomier throughout: wider modal, wider cover column,
   larger type, more breathing room -- both new modals (dashboard.js,
   discover.js) use this class now. */
.bc-detail-modal-lg{max-width:1040px}
.bc-detail-modal-lg .bc-detail-row{height:640px}
.bc-detail-modal-lg .bc-detail-body{padding:36px 40px}
.bc-detail-modal-lg .bc-detail-title{font-size:28px}
.bc-detail-modal-lg .bc-detail-sub{font-size:15.5px}
@media (max-width:640px){
  /* Stacked layout has no shared row height to derive the cover's
     size from -- whole modal scrolls as one block instead of the
     content column scrolling independently, same as this used to
     work before the row/footer split. */
  .bc-detail-modal{max-height:92vh;overflow-y:auto}
  .bc-detail-row{flex-direction:column;height:auto}
  .bc-detail-cover{height:auto;flex-shrink:0}
  .bc-detail-body{overflow-y:visible}
}
.bc-detail-body{flex:1;min-height:0;overflow-y:auto;padding:26px 28px}
.bc-detail-footer{border-top:1px solid var(--rim,rgba(201,151,58,.08));padding:14px 28px;flex-shrink:0}
.bc-detail-modal-lg .bc-detail-footer{padding:16px 40px}
.bc-detail-close{
  position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;
  background:var(--altar,#1e1530);border:1px solid var(--rim,rgba(201,151,58,.08));
  color:var(--fog,#8a7e94);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.bc-detail-close:hover{border-color:var(--blood-bright,#c0392b);color:var(--blood-text,#e07070)}
.bc-detail-eyebrow{font-family:var(--font-vhs,monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#c9973a);margin-bottom:6px}
.bc-detail-title{font-family:var(--font-occult,'Cinzel',serif);font-weight:600;font-size:21px;color:var(--bone,#f2ece0);margin-bottom:4px}
.bc-detail-sub{font-family:var(--font-grimoire,'Crimson Text',serif);font-style:italic;color:var(--fog,#8a7e94);font-size:13.5px;margin-bottom:10px}
.bc-detail-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-vhs,monospace);font-size:11px;letter-spacing:.03em;color:var(--fog,#8a7e94);margin-bottom:14px}
.bcd-facts-sep{color:var(--rim,rgba(201,151,58,.2))}
/* No max-width cap -- the 60ch cap left visible dead space on the
   right of the now-1040px-wide modal's body column, per direct
   feedback. The column itself (already fixed by the modal's own grid)
   is the real width constraint, nothing more needed. Paragraphs get
   real spacing now that descriptionParagraphs() (discover.js/
   dashboard.js) preserves the source HTML's actual <p> boundaries
   instead of flattening them into one run-on block. */
.bc-detail-desc{font-family:var(--font-grimoire,'Crimson Text',serif);font-size:14px;line-height:1.65;color:var(--text,#e8e0d0);margin-bottom:16px}
.bc-detail-desc p{margin:0 0 12px}
.bc-detail-desc p:last-child{margin-bottom:0}
.bc-detail-provenance{font-family:var(--font-vhs,monospace);font-size:10px;color:var(--dust,#7d7390);line-height:1.7;margin-bottom:16px}
/* Metron creator credits -- data.js's fetchMetronCredits, rendered
   only when a real match exists (see discover.js's renderMetronCredits
   for the "no section at all, not an empty box" convention). */
.bc-detail-credits{border-top:1px solid var(--rim,rgba(201,151,58,.08));padding-top:12px;margin-bottom:16px}
.bcd-credits-label{font-family:var(--font-vhs,monospace);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust,#7d7390);margin-bottom:8px}
.bcd-credits-row{display:flex;gap:8px;font-size:12.5px;line-height:1.6}
.bcd-credits-row + .bcd-credits-row{margin-top:2px}
.bcd-credits-role{flex:0 0 92px;font-family:var(--font-vhs,monospace);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold,#c9973a)}
.bcd-credits-names{color:var(--text,#e8e0d0)}
/* One credit role with a lot of names (an omnibus's 25+ writers)
   shouldn't make the whole panel that tall by default -- show the
   first 3, collapse the rest behind a toggle. Real Metron issues can
   carry this many contributors; verified live against a synthesized
   25-contributor case before landing. */
.bcd-more-toggle{font-family:var(--font-vhs,monospace);font-size:10.5px;color:var(--gold,#c9973a);cursor:pointer;margin-left:4px;white-space:nowrap}
.bcd-more-toggle:hover{text-decoration:underline}
.bcd-names-extra{display:none}
.bcd-names-extra.open{display:inline}
/* Characters -- a flat set of names with no "role" attached (unlike
   Credits), so they get their own labeled section and a chip/pill
   treatment instead of another row in the Credits grid. Forcing them
   into that grid implied a role that doesn't exist and made the two
   blend together -- direct feedback 2026-08-24. Matches how IMDb/
   Letterboxd separate Cast from Crew, and how Metron itself (the data
   source) models characters as a distinct field from credits. */
.bc-detail-characters{margin-bottom:16px}
.bcd-char-chips{display:flex;flex-wrap:wrap;gap:8px}
.bcd-char-chip{
  font-family:var(--font-grimoire,'Crimson Text',serif);font-size:12.5px;color:var(--text,#e8e0d0);
  background:var(--altar,#1e1530);border:1px solid var(--rim,rgba(201,151,58,.15));
  border-radius:999px;padding:4px 12px;white-space:nowrap;
}
.bc-detail-actions{display:flex;gap:8px;flex-wrap:wrap}
.bc-detail-btn{
  font-family:var(--font-vhs,monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 16px;border-radius:6px;cursor:pointer;border:1px solid var(--border,rgba(255,255,255,.12));
  background:transparent;color:var(--text,#e8e0d0);transition:all .15s;
}
.bc-detail-btn.primary{background:var(--gold,#c9973a);color:var(--void,#050407);border-color:var(--gold,#c9973a);font-weight:600}
.bc-detail-btn.primary:hover{background:var(--gold-bright,#e8b84b);border-color:var(--gold-bright,#e8b84b)}
.bc-detail-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ═══════════════════════════════════════════════════════════════
   READER — reconciled against "The Stacks" mockup (uploaded
   2026-08-23). Structure/class names below intentionally mirror the
   mockup's own (.reader-top/.reader-body/.page-frame/.reader-bottom/
   .sigil-toggle/.ease-panel) prefixed bc- for this pillar's own CSS
   surface, per page-structure.md §5 -- not reinvented, reconciled.
   ═══════════════════════════════════════════════════════════════ */
.bc-reader-modal{position:fixed;inset:0;z-index:2000;display:none}
.bc-reader-modal.open{display:block}
.bc-reader-backdrop{position:absolute;inset:0;background:rgba(5,4,7,.8);backdrop-filter:blur(2px)}
.bc-reader-dialog{position:absolute;inset:0;background:var(--void,#050407);display:flex;flex-direction:column}
.bc-reader-loading,.bc-reader-error{padding:40px;text-align:center;color:var(--fog,#8a7e94);font-family:var(--font-vhs,monospace);font-size:.8125rem;margin:auto}
.bc-reader-error{color:var(--blood-text,#e07070)}

/* ── Top bar (mockup .reader-top) ──────────────────────────────── */
.bc-reader-titlebar{
  display:flex;align-items:center;justify-content:space-between;padding:16px 28px;flex-shrink:0;
  border-bottom:1px solid var(--rim,rgba(201,151,58,.08));background:var(--abyss,#080610);
}
.bc-reader-title-block{display:flex;flex-direction:column}
.bc-reader-title{font-family:var(--font-occult,'Cinzel',serif);font-size:15px;color:var(--gold-bright,#e8b84b);letter-spacing:.04em}
.bc-reader-progress-hint{font-family:var(--font-vhs,monospace);font-size:11px;color:var(--dust,#7d7390);margin-top:2px;letter-spacing:.08em}
.bc-reader-close{font-family:var(--font-vhs,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog,#8a7e94);
  background:none;border:1px solid var(--rim,rgba(201,151,58,.08));border-radius:2px;padding:9px 16px;cursor:pointer;transition:all .2s}
.bc-reader-close:hover{border-color:var(--blood-bright,#c0392b);color:var(--blood-text,#e07070)}

.bc-reader-body{flex:1;min-height:0;position:relative}

/* ── Native layout (mockup .reader-body / .page-frame) ───────────── */
.bc-reader-native-layout{display:flex;flex-direction:column;height:100%}
.bc-reader-page-stage{
  flex:1;display:flex;align-items:center;justify-content:center;position:relative;
  padding:20px;overflow:hidden;
}
.bc-reader-page-frame{
  height:100%;max-width:100%;aspect-ratio:.72;background:var(--deep,#0e0b18);
  border:1px solid var(--rim,rgba(201,151,58,.08));border-radius:2px;
  box-shadow:0 30px 70px rgba(0,0,0,.65);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.bc-reader-page-img{max-width:100%;max-height:100%;object-fit:contain;transition:filter .15s, transform .15s;user-select:none}
.bc-fit-width .bc-reader-page-img{width:100%;height:auto;max-height:none}
.bc-fit-native .bc-reader-page-img{max-width:none;max-height:none}
.bc-reader-page-img.loading{opacity:.3}

/* click-drag left/right edges to turn, matching the mockup's
   .reader-nav-zone -- kept in addition to keyboard nav and the fit
   toolbar below, not instead of them (provider-scope §8 lists both
   edge-turn AND keyboard nav/scrubber as in-scope reader features). */
.bc-reader-nav-zone{
  position:absolute;top:0;bottom:0;width:18%;display:flex;align-items:center;
  opacity:0;transition:opacity .2s;cursor:pointer;font-family:var(--font-vhs,monospace);
  font-size:22px;color:var(--gold-bright,#e8b84b);z-index:2;background:none;border:none;
}
.bc-reader-nav-zone:hover{opacity:.8}
.bc-reader-nav-zone.prev{left:0;justify-content:flex-start;padding-left:14px;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent)}
.bc-reader-nav-zone.next{right:0;justify-content:flex-end;padding-right:14px;background:linear-gradient(270deg,rgba(0,0,0,.25),transparent)}

/* Guided Panel: fixed 2x2-quadrant zoom/isolate (documented
   simplification -- no real panel-boundary data yet, see reader.js). */
.bc-reader-page-img.bc-guided-active{
  transform:scale(2) translate(var(--bc-guided-x,0%),var(--bc-guided-y,0%));
  transform-origin:top left;
}
.bc-guided-frame{position:absolute;inset:12px;border:2px dashed var(--gold,#c9973a);border-radius:6px;pointer-events:none;opacity:.5;z-index:2}

/* ── Bottom bar (mockup .reader-bottom): thin progress track +
   click-to-seek, small fit-mode glyph row folded in unobtrusively
   rather than a separate full toolbar. ────────────────────────── */
.bc-reader-bottom{
  padding:14px 28px 20px;border-top:1px solid var(--rim,rgba(201,151,58,.08));
  background:var(--abyss,#080610);display:flex;align-items:center;gap:18px;flex-shrink:0;flex-wrap:wrap;
}
.bc-progress-label{font-family:var(--font-vhs,monospace);font-size:10.5px;color:var(--dust,#7d7390);white-space:nowrap}
.bc-progress-track{flex:1;min-width:120px;height:3px;background:var(--rim,rgba(201,151,58,.08));border-radius:2px;position:relative;cursor:pointer}
.bc-progress-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--blood,#8b1a1a),var(--gold,#c9973a));border-radius:2px}
.bc-fit-group{display:flex;gap:4px}
.bc-fit-btn{
  font-family:var(--font-vhs,monospace);font-size:9px;letter-spacing:.04em;
  background:transparent;border:1px solid var(--rim,rgba(201,151,58,.08));color:var(--dust,#7d7390);
  width:24px;height:24px;border-radius:3px;cursor:pointer;
}
.bc-fit-btn.active{border-color:var(--gold,#c9973a);color:var(--gold-pale,#f0d080)}

/* ── Provider-hosted layout — thin chrome, no fit/zoom/progress-track
   controls (the provider owns page-level UI entirely). ─────────── */
.bc-reader-hosted-layout{display:flex;flex-direction:column;height:100%}
.bc-hosted-notice{padding:8px 16px;font-size:.6875rem;color:var(--dust,#7d7390);background:var(--altar,#1e1530);text-align:center}
.bc-hosted-frame{flex:1;border:none;width:100%;background:#0d1117}
.bc-hosted-open-tab{margin:24px auto;display:inline-block;text-decoration:none;padding:10px 20px;border-radius:6px}

/* ═══════════════════════════════════════════════════════════════
   READING-EASE — floating sigil toggle + panel (mockup .sigil-toggle
   / .ease-panel), NOT an inline sidebar column. Only relevant/shown
   while the reader is open and in native mode.
   ═══════════════════════════════════════════════════════════════ */
#bc-warmth-layer{
  position:fixed;inset:0;z-index:2050;pointer-events:none;
  background:rgba(255,150,60,var(--bc-ease-warmth,0));mix-blend-mode:multiply;
  transition:background .25s ease;display:none;
}
#bc-warmth-layer.active{display:block}

.bc-sigil-toggle{
  position:fixed;bottom:26px;right:26px;z-index:2060;width:52px;height:52px;border-radius:50%;
  background:var(--abyss,#080610);border:1px solid var(--border,rgba(201,151,58,.4));
  display:none;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.5);transition:border-color .25s,transform .25s;
}
.bc-reader-modal.bc-reader-native.open .bc-sigil-toggle{display:flex}
.bc-sigil-toggle:hover{border-color:var(--gold,#c9973a);transform:scale(1.05)}
.bc-sigil-toggle svg{width:26px;height:26px}

.bc-ease-panel{
  position:fixed;bottom:88px;right:26px;z-index:2060;width:270px;
  background:var(--abyss,#080610);border:1px solid var(--border,rgba(201,151,58,.4));border-radius:4px;
  padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.6);display:none;flex-direction:column;gap:20px;
}
.bc-ease-panel.open{display:flex}
.bc-ease-panel-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--rim,rgba(201,151,58,.08))}
.bc-ease-panel-head svg{width:20px;height:20px}
.bc-ease-panel-title{font-family:var(--font-occult,'Cinzel',serif);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright,#e8b84b)}
.bc-ease-row{display:flex;flex-direction:column;gap:8px}
.bc-ease-row-label{display:flex;justify-content:space-between;font-family:var(--font-vhs,monospace);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fog,#8a7e94)}
.bc-ease-row-label span:last-child{color:var(--dust,#7d7390)}
.bc-ease-panel input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:var(--rim,rgba(201,151,58,.08));border-radius:2px;outline:none}
.bc-ease-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold-bright,#e8b84b);cursor:pointer;box-shadow:0 0 0 3px rgba(232,200,120,.15)}
.bc-ease-toggle-row{display:flex;gap:8px}
.bc-ease-toggle-btn{flex:1;padding:9px 6px;font-family:var(--font-vhs,monospace);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--chamber,#150f22);border:1px solid var(--rim,rgba(201,151,58,.08));border-radius:2px;color:var(--dust,#7d7390);
  cursor:pointer;text-align:center;transition:all .2s}
.bc-ease-toggle-btn.active{border-color:var(--gold,#c9973a);color:var(--gold-bright,#e8b84b);background:var(--altar,#1e1530)}

/* ═══════════════════════════════════════════════════════════════
   VIEW SWITCHING — same shape as games/videoccult-games.js's real
   .vc-view/.active mechanism (showView/.vc-view/.active), BC's own
   prefix. Two views today (Dashboard/Discover); wiring lives in
   discover.js (showBcView). ─────────────────────────────────────── */
.bc-view{display:none}
.bc-view.active{display:block}

/* ═══════════════════════════════════════════════════════════════
   DISCOVER — publisher -> series -> editions drill-down + search.
   Reuses .bc-cover-card/.bc-cover-art/.bc-cover-overlay/
   .bc-format-glyph as-is for series + edition cards (same visual
   language as the dashboard rails, per page-structure.md §5's "card
   grids... don't reinvent per page" doctrine) — only publisher tiles
   and the small series issue-count badge are genuinely new components,
   since neither has a real precedent elsewhere in the app. ─────────── */

/* Sized to match the real Discover search bar exactly (css/main.css
   .search-bar-container/.search-bar/.search-icon) -- full width, not
   capped, same padding/font-size/icon position/focus glow. The prior
   480px-capped, smaller version was a visibly weaker echo of the real
   pattern, same category of miss as the topbar/sidebar scale earlier. */
.bc-discover-searchbar{position:relative;margin-bottom:18px}
.bc-discover-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:1.125rem;pointer-events:none}
#bc-discover-search{
  width:100%;padding:0.875rem 1.25rem 0.875rem 3.125rem;border-radius:8px;
  background:var(--deep,#0e0a18);border:1px solid var(--border,rgba(201,151,58,.14));
  color:var(--text,#e8e0d0);font-family:var(--font-grimoire,'Crimson Text',serif);font-size:1rem;font-style:italic;
  transition:all .2s;
}
#bc-discover-search::placeholder{color:var(--dust,#7d7390)}
#bc-discover-search:focus{
  outline:none;border-color:var(--border-bright,rgba(201,151,58,.4));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#c9973a) 8%,transparent),0 0 20px color-mix(in srgb,var(--gold,#c9973a) 10%,transparent);
}

.bc-discover-crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:14px;
  font-family:var(--font-vhs,monospace);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
}
.bc-discover-crumbs a{color:var(--dust,#7d7390);text-decoration:none;cursor:pointer;transition:color .15s}
.bc-discover-crumbs a:hover{color:var(--gold,#c9973a)}
.bc-crumb-sep{color:var(--rim,rgba(201,151,58,.2))}
.bc-crumb-current{color:var(--gold-pale,#f0d080)}

.bc-discover-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px;min-height:1px}
/* Matches the real main-site filter chip exactly (css/main.css
   .filter-chip/.filter-chip.active) -- same shape, own token
   fallbacks. Active state uses gold, not blood, to stay in the format-
   badge's own color language rather than borrowing the "danger/veto"
   red the main site's filter chips use for an unrelated purpose. */
.bc-discover-chips{display:flex;gap:8px;flex-wrap:wrap}
.bc-filter-chip{
  font-family:var(--font-vhs,monospace);font-size:.625rem;letter-spacing:2px;text-transform:uppercase;
  padding:.375rem .875rem;border-radius:3px;background:var(--deep,#0e0a18);border:1px solid var(--border,rgba(201,151,58,.14));
  color:var(--dust,#7d7390);cursor:pointer;transition:all .15s;
}
.bc-filter-chip:hover{border-color:var(--gold,#c9973a);color:var(--gold,#c9973a)}
.bc-filter-chip.active{border-color:var(--gold,#c9973a);color:var(--gold-bright,#e8b84b);background:color-mix(in srgb,var(--gold,#c9973a) 12%,transparent)}
.bc-discover-sort{display:flex;align-items:center;gap:8px;font-family:var(--font-vhs,monospace);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dust,#7d7390)}
.bc-discover-sort select{
  background:var(--chamber,#150f22);color:var(--text,#e8e0d0);border:1px solid var(--border,rgba(201,151,58,.14));
  border-radius:5px;padding:6px 10px;font-family:var(--font-vhs,monospace);font-size:10.5px;letter-spacing:.04em;cursor:pointer;
}
.bc-discover-sort select:focus{outline:none;border-color:var(--gold,#c9973a)}

.bc-discover-grid{display:grid;gap:18px}
.bc-discover-grid-series,.bc-discover-grid-editions{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bc-discover-grid-publishers{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}

/* Matched to .bc-format-glyph's scale (30px/15px) -- was noticeably
   smaller/lighter-weight than the badge sharing the same corner of the
   card. min-width/height keeps 1-2 digit counts circular like the
   glyph badge; padding lets it grow into a pill for longer numbers
   instead of clipping. */
.bc-series-count{
  position:absolute;top:8px;right:8px;z-index:3;min-width:30px;height:30px;padding:0 9px;border-radius:999px;
  background:rgba(5,4,7,.8);border:1px solid var(--border-bright,rgba(201,151,58,.4));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-vhs,monospace);font-size:13px;letter-spacing:.02em;color:var(--gold-pale,#f0d080);
}

/* My Library card's physical/digital indicator -- same corner/size as
   .bc-series-count (top-right, 30px) since format-glyph already owns
   the top-left corner on every card. */
.bc-owned-badge{
  position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border-radius:6px;
  background:rgba(5,4,7,.8);border:1px solid var(--border-bright,rgba(201,151,58,.4));
  display:flex;align-items:center;justify-content:center;font-size:15px;
}

/* Wishlist card's quick-remove -- same corner/size as .bc-owned-badge,
   hidden until hover so the grid doesn't read as cluttered with a
   destructive action visible on every card at rest. */
.bc-wishlist-remove{
  position:absolute;top:8px;right:8px;z-index:4;width:30px;height:30px;border-radius:6px;
  background:rgba(5,4,7,.85);border:1px solid var(--border-bright,rgba(201,151,58,.4));
  color:var(--fog,#8a7e94);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s,border-color .15s,color .15s;
}
.bc-cover-card:hover .bc-wishlist-remove{opacity:1}
.bc-wishlist-remove:hover{border-color:var(--blood-bright,#c0392b);color:var(--blood-text,#e07070)}

/* Bigger than the first pass (150px -> 220px) per direct feedback that
   it read small; logo chip is the visual anchor now, cover-collage
   demoted to background texture rather than the main focal element. */
.bc-publisher-tile{
  position:relative;height:220px;border-radius:10px;overflow:hidden;cursor:pointer;
  border:1px solid var(--rim,rgba(201,151,58,.08));background:var(--altar,#1e1530);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform .2s ease,border-color .2s,box-shadow .2s;
}
.bc-publisher-tile:hover{transform:translateY(-4px);border-color:var(--gold,#c9973a);box-shadow:0 16px 34px rgba(0,0,0,.5)}
.bc-pub-collage{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
.bc-pub-collage-img{background:center/cover no-repeat;filter:saturate(.6) brightness(.32)}
.bc-pub-tile-name{position:relative;z-index:2;font-family:var(--font-occult,'Cinzel',serif);font-weight:700;font-size:1.375rem;color:var(--gold-pale,#f0d080);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.bc-pub-tile-body{position:relative;z-index:2;margin-top:14px}
.bc-pub-tile-meta{font-family:var(--font-vhs,monospace);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--fog,#8a7e94);text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* Logo variant -- the wordmark fills the whole tile edge to edge (was
   a small 150x90 chip floating on empty space; Kris's call 2026-08-24).
   Parent's overflow:hidden + border-radius (above) does the corner
   clipping, so this doesn't need its own radius. Cream ground, same
   token the old chip used -- most publisher wordmarks need a light
   ground to read (black text, or full-color like DC's roundel). */
.bc-pub-logo-fill{
  position:absolute;inset:0;background:#f4f1ea;
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.bc-pub-logo-fill img{max-width:100%;max-height:100%;object-fit:contain}
/* Series/issue counts on hover, same language as a comic cover-card's
   own .bc-cover-overlay (dark gradient, opacity 0 -> 1 on hover) -- the
   logo alone already identifies the publisher at rest. */
.bc-pub-tile-hover{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 45%,rgba(5,4,7,.92) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
  opacity:0;transition:opacity .2s ease;
}
.bc-publisher-tile-logo:hover .bc-pub-tile-hover{opacity:1}
.bc-pub-tile-hover-name{font-family:var(--font-occult,'Cinzel',serif);font-weight:700;font-size:1.125rem;color:var(--gold-pale,#f0d080)}
.bc-pub-tile-hover-meta{font-family:var(--font-vhs,monospace);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--fog,#8a7e94);margin-top:4px}

.bc-discover-loadmore-wrap{display:flex;justify-content:center;margin-top:28px}
#bc-discover-loadmore{min-width:220px;text-align:center}
.bc-ease-note{font-family:var(--font-grimoire,'Crimson Text',serif);font-style:italic;font-size:11.5px;color:var(--dust,#7d7390);line-height:1.5;padding-top:4px;border-top:1px solid var(--rim,rgba(201,151,58,.08))}

/* ═══════════════════════════════════════════════════════════════
   ADD TO LIBRARY — format-choice sheet + physical/digital forms
   (library-add.js). Reuses .bc-modal-backdrop/.open for the overlay
   mechanics and .bc-filter-chip for condition selection (same chip
   language Discover's format filter already established) rather than
   inventing new primitives where an existing one already fits. Forms
   get real spacing/labels/sections per this codebase's "never
   barebones" standard for forms -- not a bare list of <input>s. ─── */

.bc-addlib-sheet{
  background:var(--chamber,#150f22);border:1px solid var(--border-bright,rgba(201,151,58,.4));border-radius:10px;
  max-width:480px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 30px 70px rgba(0,0,0,.6);
  padding:28px 30px;
}
.bc-addlib-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.bc-addlib-title{font-family:var(--font-occult,'Cinzel',serif);font-weight:600;font-size:20px;color:var(--bone,#f2ece0)}
.bc-addlib-sub{font-family:var(--font-grimoire,'Crimson Text',serif);font-style:italic;color:var(--fog,#8a7e94);font-size:13px;margin-top:4px}

.bc-addlib-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bc-addlib-choice{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 14px;border-radius:10px;
  background:var(--altar,#1e1530);border:1px solid var(--border,rgba(201,151,58,.14));cursor:pointer;
  transition:all .15s;color:var(--text,#e8e0d0);
}
.bc-addlib-choice:hover{border-color:var(--gold,#c9973a);background:var(--deep,#0e0a18);transform:translateY(-2px)}
.bc-addlib-choice-icon{font-size:28px}
.bc-addlib-choice-name{font-family:var(--font-occult,'Cinzel',serif);font-weight:600;font-size:15px;color:var(--gold-pale,#f0d080)}
.bc-addlib-choice-desc{font-family:var(--font-grimoire,'Crimson Text',serif);font-size:11.5px;color:var(--fog,#8a7e94);text-align:center;line-height:1.4}

.bc-addlib-form{display:flex;flex-direction:column;gap:16px}
.bc-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* .bc-form-row's own display:grid (a class rule) silently beats the
   browser's built-in [hidden]{display:none} (very low UA-stylesheet
   specificity) -- confirmed live: the grade/asking-price rows were
   visible from the start regardless of condition/checkbox state.
   Explicit attribute-selector override fixes it without reaching for
   !important. */
.bc-form-row[hidden]{display:none}
.bc-form-group{display:flex;flex-direction:column;gap:6px}
.bc-form-label{font-family:var(--font-vhs,monospace);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dust,#7d7390)}
.bc-form-input{
  width:100%;padding:9px 12px;border-radius:6px;background:var(--deep,#0e0a18);
  border:1px solid var(--border,rgba(201,151,58,.14));color:var(--text,#e8e0d0);
  font-family:var(--font-grimoire,'Crimson Text',serif);font-size:14px;transition:border-color .15s,box-shadow .15s;
}
.bc-form-input::placeholder{color:var(--dust,#7d7390);font-style:italic}
.bc-form-input:focus{
  outline:none;border-color:var(--border-bright,rgba(201,151,58,.4));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#c9973a) 8%,transparent);
}
.bc-form-textarea{resize:vertical;min-height:52px;font-family:var(--font-grimoire,'Crimson Text',serif)}
.bc-condition-chips{display:flex;flex-wrap:wrap;gap:6px}
.bc-form-checkbox{display:flex;align-items:center;gap:8px;font-family:var(--font-vhs,monospace);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text,#e8e0d0);cursor:pointer}
.bc-form-checkbox input{accent-color:var(--gold,#c9973a);width:15px;height:15px;cursor:pointer}

.bc-addlib-error{font-family:var(--font-vhs,monospace);font-size:11px;color:var(--blood-text,#e07070);background:color-mix(in srgb,var(--blood,#8b1a1a) 12%,transparent);border:1px solid var(--blood,#8b1a1a);border-radius:6px;padding:8px 12px}
.bc-addlib-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}