/* css/codex.css — The Codex (DES-30/31/32/33): right slide-out rules library.
   SHARED by the Sheet Editor (index.html) AND the Character Editor (wizard.html) — DES-33's
   wizard integration is why this lives here and not in a page <style> block. Everything is
   scoped under .codex-panel / .codex-open / .cx-*; the :root hue scales are the §2b
   information-only colors (never chrome roles). */
:root {
  --sch-evo:#f97316; --sch-abj:#38bdf8; --sch-nec:#84cc16; --sch-ill:#c084fc;
  --sch-enc:#f472b6; --sch-div:#facc15; --sch-con:#2dd4bf; --sch-trs:#fb923c;
  --rar-common:#94a3b8; --rar-uncommon:#4ade80; --rar-rare:#60a5fa;
  --rar-vrare:#a78bfa; --rar-legendary:#f59e0b;
  /* mirrors of card.css's .card-scoped ability + damage tokens (the card scope can't leak
     here by design — keep these VALUES in sync with card.css if they ever change) */
  --cxp-str:#9b1c1c; --cxp-dex:#3a7d44; --cxp-con:#a07830;
  --cxp-int:#1d4ed8; --cxp-wis:#6d28d9; --cxp-cha:#be4b8a;
  --cxp-acid:#65a30d; --cxp-bludgeoning:#78716c; --cxp-cold:#0ea5e9; --cxp-fire:#ea580c;
  --cxp-force:#7c3aed; --cxp-lightning:#ca8a04; --cxp-necrotic:#4b5563; --cxp-piercing:#57534e;
  --cxp-poison:#16a34a; --cxp-psychic:#c026d3; --cxp-radiant:#d97706; --cxp-slashing:#6b7280;
  --cxp-thunder:#4f46e5;
}
/* ── The Codex (DES-30): right slide-out rules library ─────────────────────────
   §2b amendment 2026-07-25: the ONE right-side panel; overlays the canvas, never
   evicts the left editing panel. Anatomy per the Codex mockup (Sam-approved; binned 2026-07-27). */
.codex-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 372px; z-index: 30;
  background: var(--panel-bg); border-left: 1px solid var(--border);
  box-shadow: -18px 0 40px rgba(0,0,0,0.45); display: flex; flex-direction: column; }
.codex-panel[hidden] { display: none; }
/* DES-33d: in the Character Editor the panel is a BODY child (no .layout anchor) — fix it
   to the viewport; the topbar Codex button + ⓘ deep-links toggle it. */
body > .codex-panel { position: fixed; top: 0; height: 100vh; z-index: 90; }
/* §2b re-amendment (Sam 2026-07-25): Sheet Editor DOCKED mode — the Codex lives inside the
   left panel as its one view; the slide-out chrome comes off. */
.left-panel .codex-panel { position: static; width: auto; height: auto; flex: 1 1 auto;
  min-height: 0; border-left: none; box-shadow: none; }
/* …and FLOAT mode, only while the Spells view holds the left panel: fixed to the right so
   the spell text reads beside the Spells editor. */
.left-panel .codex-panel.cx-float { position: fixed; top: calc(var(--header-h, 50px) + 36px); right: 0;
  bottom: 0; left: auto; width: 372px; height: auto; z-index: 40;
  border-left: 1px solid var(--border); box-shadow: -18px 0 40px rgba(0,0,0,0.45); }
/* Audit SE-27: the float clears the view row so Fit/zoom stay reachable (36px = .preview-bar).
   Audit SE-26: DOCKED codex is a normal model-A view — no in-panel ✕ (the rail toggles it);
   only the float keeps its ✕. */
.left-panel .codex-panel:not(.cx-float) .cx-x { display: none; }
@media (max-width: 900px) { .left-panel .codex-panel.cx-float { width: min(372px, 88vw); } }
/* ⓘ deep-link affordance on wizard picker rows/labels */
.codex-info { background: none; border: 1px solid var(--border); color: var(--text-2);
  border-radius: 50%; width: 18px; height: 18px; font-size: 11px; line-height: 1; cursor: pointer;
  display: inline-grid; place-items: center; vertical-align: 1px; margin-left: 6px; font-family: inherit; }
.codex-info:hover { color: #c4b5fd; border-color: var(--accent); }
.cx-head { padding: 12px 14px 10px; background: var(--panel-2); border-bottom: 1px solid var(--divider); }
.cx-titlerow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cx-book { width: 20px; height: 20px; color: #c4b5fd; }
.cx-title { font-size: var(--fs-xl); font-weight: 700; flex: 1; }
.cx-x { color: var(--text-2); font-size: 14px; width: 26px; height: 26px; display: grid;
  place-items: center; border-radius: var(--r-ctl); background: none; border: none; cursor: pointer; }
.cx-x:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.cx-search { display: flex; align-items: center; gap: 8px; background: var(--ui-bg);
  border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 6px 10px; margin-bottom: 10px; }
.cx-search svg { width: 13px; height: 13px; color: var(--text-2); flex: none; }
.cx-searchinput { flex: 1; background: none; border: none; outline: none; color: var(--text);
  font: inherit; font-size: var(--fs-md); min-width: 0; }
.cx-searchinput::placeholder { color: var(--text-2); }
.cx-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-tab { border-radius: var(--r-pill); padding: 4px 11px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-2); border: 1px solid var(--border); background: none; cursor: pointer; font-family: inherit; }
.cx-tab:hover { color: var(--text); }
.cx-tab.on { background: var(--accent-a25); border-color: var(--accent); color: #d6c7fb; }
.cx-crumb { display: flex; align-items: center; gap: 6px; padding: 9px 14px; color: var(--text-2);
  font-size: var(--fs-sm); border-bottom: 1px solid var(--divider); }
.cx-crumb b { color: var(--label); }
.cx-crumb[hidden] { display: none; }
.cx-back { background: none; border: none; color: var(--text-2); font-size: 15px; cursor: pointer;
  padding: 0 4px; border-radius: var(--r-ctl); }
.cx-back:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.cx-scroll { flex: 1; overflow: auto; padding: 14px; }
/* browse rows (picker-row style; accent ✓ = on this sheet, per §2b) */
.cx-group { margin-bottom: 14px; }
.cx-grouplabel { font-size: var(--fs-xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--label); font-weight: 700; margin-bottom: 5px; }
.cx-row { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r-ctl); padding: 5px 8px; cursor: pointer;
  color: var(--text); font: inherit; font-size: var(--fs-md); }
.cx-row:hover { background: rgba(255,255,255,0.05); }
.cx-rowname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-onsheet { color: #c4b5fd; font-weight: 700; flex: none; }
.cx-rowsub { color: var(--text-2); font-size: var(--fs-sm); flex: none; }
/* entry cards */
.cx-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cx-ribbon { height: 4px; width: 100%; }
.cx-pad { padding: 14px 16px 16px; }
.cx-idrow { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
/* Audit SE-25: source/book chips ride the title row's right edge (metadata up top,
   actions in the footer) */
.cx-idmain { flex: 1; min-width: 0; }
.cx-idtrail { display: flex; gap: 4px; align-items: center; flex-shrink: 0; margin-top: 1px; }
.cx-idtrail .cx-src { margin-left: 0; }
.cx-medal { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  flex: none; background: rgba(255,255,255,0.06); }
.cx-medal svg { width: 21px; height: 21px; }
.cx-name { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; }
.cx-kind { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; font-style: italic; }
/* chip rows center-aligned so prereq chips never stretch taller than neighbors (Sam §6.5) */
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; align-items: center; }
.cx-chip { border-radius: var(--r-pill); padding: 2.5px 10px; font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid var(--border); color: var(--label); background: rgba(255,255,255,0.03); font-family: inherit; }
.cx-chip.warn { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.4); color: var(--warning); }
.cx-link { color: #c4b5fd; border-color: rgba(124,58,237,0.5); cursor: pointer; }
.cx-link::after { content: ' \2197'; font-size: 9px; opacity: 0.8; }
/* ability flags — BARE colored bubbles, no pill wrapper; +N stays neutral text (Sam §6.5) */
.cx-abflag { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 700; }
.cx-abdot { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff; }
.cx-abamt { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; color: var(--text); }
.cx-abor { color: #64748b; font-style: italic; font-weight: 400; }
.cx-abcap { color: var(--text-2); font-weight: 400; margin-left: 2px; }
.cx-mono { font-family: 'DM Mono', monospace; color: var(--text); letter-spacing: -0.02em; }
/* body text + the formatText pill language restyled for dark chrome */
.cx-body { line-height: 1.6; color: var(--text); font-size: var(--fs-md); }
.cx-body p { margin-bottom: 8px; }
.cx-body .cx-ul { margin: 0 0 8px 18px; }
.cx-body .cx-ul li { margin-bottom: 4px; }
/* DES-34: printable spellbook appendix — previews below the card on screen; prints as
   compact pages BEHIND the sheet (rides the existing print pipeline). Verbatim text. */
.cx-appendix { background: #fdfcf8; color: #1a202c; width: 210mm; max-width: 100%;
  margin: 24px auto 40px; padding: 12mm 14mm; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35); font-size: 10px; line-height: 1.45; }
.cx-apx-title { font-size: 15px; font-weight: 700; border-bottom: 2px solid #0f766e;
  padding-bottom: 5px; margin-bottom: 10px; display: flex; align-items: baseline; }
.cx-apx-count { margin-left: auto; font-size: 10px; font-weight: 600; color: #64748b; }
.cx-appendix .cx-apx-cols, .cx-appendix { column-gap: 8mm; }
.cx-appendix { columns: 2; }
.cx-apx-title { column-span: all; }
.cx-apx-spell { break-inside: avoid; margin-bottom: 9px; }
.cx-apx-name { font-weight: 700; font-size: 11px; }
.cx-apx-kind { font-weight: 400; font-style: italic; color: #64748b; font-size: 9px; }
.cx-apx-stats { font-size: 9px; color: #334155; margin: 1px 0 3px; }
.cx-apx-stats b { color: #0f766e; font-weight: 700; }
.cx-apx-body p { margin: 0 0 4px; }
.cx-apx-body .cx-hlh { font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase;
  color: #0f766e; font-weight: 700; margin: 4px 0 1px; }
.cx-apx-body .cx-ul { margin: 0 0 4px 14px; padding: 0; }
.cx-apx-body table { border-collapse: collapse; font-size: 9px; margin: 3px 0; }
.cx-apx-body th, .cx-apx-body td { border: 1px solid #cbd5e1; padding: 2px 5px; text-align: left; }
/* the card's pill/format spans render as plain ink on paper */
.cx-apx-body .dnd-dice { font-weight: 700; }
.cx-apx-body .dnd-spell { font-style: italic; }
.cx-apx-body .dnd-skill, .cx-apx-body .dnd-cond, .cx-apx-body .dnd-term { font-weight: 700; }
@media print {
  .cx-appendix { break-before: page; page-break-before: always; box-shadow: none;
    border-radius: 0; margin: 0; width: auto; }
}
/* DES-34: the spellbook toggle on spell cards */
.cx-bookbtn { background: none; border: 1px solid var(--border); color: var(--text-2);
  border-radius: var(--r-ctl); padding: 4px 10px; font: inherit; font-weight: 700;
  font-size: var(--fs-sm); cursor: pointer; }
.cx-bookbtn:hover { color: var(--text); border-color: #64748b; }
.cx-bookbtn.on { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.5); color: var(--success); }

/* DES-33: hover-peek mini card (screen-only; positioned by codex.js) */
.cx-peek { position: fixed; z-index: 60; max-width: 270px; background: var(--panel-bg);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45); pointer-events: none; font-size: var(--fs-md);
  color: var(--text); line-height: 1.45; }
.cx-peek[hidden] { display: none; }
.cx-peekname { font-weight: 700; }
.cx-peekkind { font-size: var(--fs-sm); color: var(--text-2); font-style: italic; margin-bottom: 4px; }
.cx-peekfact { font-size: var(--fs-sm); }
.cx-peekhint { font-size: var(--fs-xs); color: var(--text-2); margin-top: 6px; }
@media print { .cx-peek { display: none !important; } }
/* DES-33: filters, pins, cross-links, keyboard focus */
.cx-filterrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.cx-filter { cursor: pointer; padding: 2px 9px; font-size: var(--fs-xs); }
.cx-pin { background: none; border: none; color: var(--text-2); font-size: 15px; cursor: pointer;
  padding: 0 4px; border-radius: var(--r-ctl); line-height: 1; }
.cx-pin:hover { color: var(--warning); }
.cx-pin.on { color: var(--warning); }
.cx-splink { background: none; border: none; padding: 0; font: inherit; font-style: italic;
  color: #c4b5fd; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.cx-splink:hover { color: #d6c7fb; }
.cx-row.kb { background: var(--accent-a12); outline: 1px solid var(--accent); }
/* DES-32: Add to Sheet — the entry-card footer's one filled primary (accent, like the
   mockup); the DES-23 _dupPrompt warn card renders inside the panel unchanged. */
.cx-addbtn { background: var(--accent); color: #fff; border: none; border-radius: var(--r-ctl);
  padding: 4px 12px; font: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; }
.cx-addbtn:hover { background: var(--accent-hover); }
.codex-panel .addp-dup { margin-top: 8px; }
/* DES-31: CAST AT row + Yours ⇄ Book segmented toggle + personalized-number pills */
.cx-castrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.cx-castlbl { font-size: var(--fs-xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--label); font-weight: 700; margin-right: 2px; }
.cx-cast { cursor: pointer; padding: 2px 8px; }
.cx-chip.acc { background: var(--accent-a25); border-color: var(--accent); color: #d6c7fb; }
.cx-castout { font-size: var(--fs-md); color: var(--text-2); margin-left: 2px; }
.cx-castout b { color: var(--text); }
.cx-castsp { flex: 1; }
.cx-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-pill);
  overflow: hidden; font-size: var(--fs-xs); font-weight: 700; }
.cx-seg-btn { background: none; border: none; color: var(--text-2); padding: 3px 9px;
  cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: 700; }
.cx-seg-btn.on { background: var(--accent-a25); color: #d6c7fb; }
.cx-yours { display: inline-block; border-radius: var(--r-pill); padding: 0 7px; margin-left: 4px;
  font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 700; vertical-align: 1px;
  background: var(--accent-a12); color: #d6c7fb; border: 1px solid rgba(124,58,237,0.5); }
/* TECH-8: the 2x2 spell stat grid (mockup anatomy) + verbatim SRD tables */
.cx-statgrid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--divider);
  border-radius: var(--r-md); overflow: hidden; margin-bottom: 12px; }
.cx-stat { padding: 8px 11px; background: rgba(255,255,255,0.02); }
.cx-stat:nth-child(odd) { border-right: 1px solid var(--divider); }
.cx-stat:nth-child(-n+2) { border-bottom: 1px solid var(--divider); }
.cx-stat .k { font-size: var(--fs-xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--label); font-weight: 700; margin-bottom: 2px; }
.cx-stat .v { font-family: 'DM Mono', monospace; font-size: var(--fs-md); overflow-wrap: anywhere; }
.cx-table { margin: 4px 0 10px; overflow-x: auto; }
.cx-table table { border-collapse: collapse; font-size: var(--fs-sm); width: 100%; }
.cx-table th, .cx-table td { border: 1px solid var(--divider); padding: 4px 8px; text-align: left; }
.cx-table th { background: rgba(255,255,255,0.04); color: var(--label); }
.cx-hlh { font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--label); font-weight: 700; margin: 10px 0 3px; }
.cx-dim { color: var(--text-2); }
.cx-stub { padding: 4px 2px; line-height: 1.55; }
.codex-panel .dnd-dice { font-family: 'DM Mono', monospace; font-weight: 700; color: #fdba74; }
.codex-panel .dnd-spell { color: #c4b5fd; font-style: italic; }
.codex-panel .dnd-skill, .codex-panel .dnd-cond, .codex-panel .dnd-term { font-weight: 700; color: var(--label); }
/* Sam's combined-pill rule (2026-07-25): damage dice+type and DC+ability saves render as
   ONE colored pill — same classes formatText emits for the card, restyled for dark chrome */
.codex-panel .abil, .codex-panel .dnd-dmg, .cx-peek .abil, .cx-peek .dnd-dmg {
  display: inline-block; color: #fff; font-weight: 700; font-size: 11px; line-height: 1.5;
  border-radius: var(--r-pill); padding: 0 7px; vertical-align: baseline; }
.codex-panel .abil-str, .cx-peek .abil-str { background: var(--cxp-str); }
.codex-panel .abil-dex, .cx-peek .abil-dex { background: var(--cxp-dex); }
.codex-panel .abil-con, .cx-peek .abil-con { background: var(--cxp-con); }
.codex-panel .abil-int, .cx-peek .abil-int { background: var(--cxp-int); }
.codex-panel .abil-wis, .cx-peek .abil-wis { background: var(--cxp-wis); }
.codex-panel .abil-cha, .cx-peek .abil-cha { background: var(--cxp-cha); }
.codex-panel .dmg-acid { background: var(--cxp-acid); } .codex-panel .dmg-bludgeoning { background: var(--cxp-bludgeoning); }
.codex-panel .dmg-cold { background: var(--cxp-cold); } .codex-panel .dmg-fire { background: var(--cxp-fire); }
.codex-panel .dmg-force { background: var(--cxp-force); } .codex-panel .dmg-lightning { background: var(--cxp-lightning); }
.codex-panel .dmg-necrotic { background: var(--cxp-necrotic); } .codex-panel .dmg-piercing { background: var(--cxp-piercing); }
.codex-panel .dmg-poison { background: var(--cxp-poison); } .codex-panel .dmg-psychic { background: var(--cxp-psychic); }
.codex-panel .dmg-radiant { background: var(--cxp-radiant); } .codex-panel .dmg-slashing { background: var(--cxp-slashing); }
.codex-panel .dmg-thunder { background: var(--cxp-thunder); }
.cx-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border-top: 1px solid var(--divider); margin-top: 13px; padding-top: 10px; }
.cx-minichip { border-radius: var(--r-pill); padding: 1.5px 8px; font-size: var(--fs-xs);
  font-weight: 600; border: 1px solid var(--divider); color: var(--text-2); }
/* source tags (DND-22): 5.5E · 5E · EBERRON · HOMEBREW — no version numbers (Sam) */
.cx-src { margin-left: auto; border-radius: 4px; padding: 2px 7px; font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: 0.05em; font-family: 'DM Mono', monospace; }
.cx-src-5\.5e { background: rgba(148,163,184,0.12); color: var(--text-2); border: 1px solid var(--divider); }
.cx-src-5e { background: rgba(96,165,250,0.1); color: #93c5fd; border: 1px solid rgba(96,165,250,0.35); }
/* book chip (Sam 2026-07-25): SRD / PHB / DMG — neutral, sits before the edition tag;
   only the LAST footer tag hugs the right edge */
.cx-src-book { background: rgba(255,255,255,0.04); color: var(--label); border: 1px solid var(--divider); }
.cx-foot .cx-src + .cx-src { margin-left: 4px; }
.cx-src-eberron { background: rgba(45,212,191,0.1); color: #5eead4; border: 1px solid rgba(45,212,191,0.35); }
.cx-src-homebrew { background: rgba(244,114,182,0.1); color: #f9a8d4; border: 1px solid rgba(244,114,182,0.35); }
/* quiet hover affordance: the book button appears when its spell row is hovered (screen only;
   app.js delegates the click). DES-49 2026-07-26: the .fb/.wb reveal selectors are GONE —
   the 📖 is spells-column-only since 2026-07-25 (render.js codexBtn), so they matched nothing. */
#preview .codex-open { opacity: 0; border: none; background: none; cursor: pointer; padding: 0 2px;
  font-size: 10px; line-height: 1; vertical-align: 1px; transition: opacity 0.12s; border-radius: 3px; }
#preview .sp-row:hover .codex-open { opacity: 0.85; }
#preview .codex-open:hover { opacity: 1; background: rgba(124,58,237,0.18); outline: 1.5px solid var(--accent); }
@media print { #preview .codex-open { display: none !important; } }
@media (max-width: 900px) { .codex-panel { width: min(372px, 88vw); position: fixed; top: auto; height: 100%; } }
@media (max-width: 480px) { .codex-panel { width: 100vw; } }