/* ============ PF2e Character Forge — shared styles ============ */
:root {
  --ink: #12141c; --panel: #1a1d28; --panel-2: #212533; --edge: #2e3345;
  --text: #e9e7df; --muted: #a7a394;
  --brass: #c9a227; --brass-dim: #9a7d24; --verdigris: #4f9a8e; --warn: #d8a02f;
  --serif: "Palatino Linotype", Palatino, Georgia, serif;
  --ui: system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
/* dark is the primary theme — light is opt-in via the ◐ Theme toggle only */
:root[data-theme="dark"] { --ink:#12141c; --panel:#1a1d28; --panel-2:#212533; --edge:#2e3345; --text:#e9e7df; --muted:#a7a394; --brass:#c9a227; --brass-dim:#9a7d24; }
:root[data-theme="light"] { --ink:#d9d5c9; --panel:#eceadf; --panel-2:#e2dfd2; --edge:#c4bda9; --text:#23252e; --muted:#6a6656; --brass:#9a7d24; --brass-dim:#b8942a; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--ui); line-height: 1.45; }
button { font-family: inherit; }

/* ================= app chrome ================= */
header.top {
  display: flex; align-items: center; gap: 14px; padding: 11px 20px;
  border-bottom: 1px solid var(--edge); background: linear-gradient(180deg, var(--panel-2), var(--panel));
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.crest {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass), var(--brass-dim) 70%, #5c4a15);
  display: grid; place-items: center; color: #241d05; font-family: var(--serif); font-weight: 700; font-size: 18px;
}
header.top h1 { font-family: var(--serif); font-size: 18px; margin: 0; }
header.top .tag { font-size: 10.5px; color: var(--muted); font-family: var(--mono); letter-spacing: .1em; }
.pages { display: flex; gap: 6px; margin-left: 14px; }
.pages a { text-decoration: none; font-size: 12.5px; padding: 6px 12px; border: 1px solid var(--edge); border-radius: 5px; color: var(--text); background: var(--panel-2); }
.pages a:hover { border-color: var(--brass); }
.pages a.on { background: var(--brass); color: #241d05; border-color: var(--brass); font-weight: 600; }
.top-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--edge); padding: 6px 12px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.btn:hover { border-color: var(--brass); }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn.primary { background: var(--brass); color: #241d05; border-color: var(--brass); font-weight: 600; }

.app { display: grid; grid-template-columns: 330px minmax(0,1fr) 232px; gap: 20px; max-width: 1500px; margin: 18px auto 50px; padding: 0 16px; align-items: start; }
@media (max-width: 1240px) { .app { grid-template-columns: 330px minmax(0,1fr); } .steps { display: none; } }
@media (max-width: 980px) { .app { grid-template-columns: 1fr; } .rail { position: static !important; max-height: none !important; } }

/* ================= right column: creation checklist ================= */
.steps { position: sticky; top: 62px; max-height: calc(100vh - 76px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 6px; padding: 12px 12px 14px; }
.steps h3 { margin: 0 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 400; }
.stepbar { height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; margin: 6px 0 4px; }
.stepbar > div { height: 100%; background: var(--brass); transition: width .25s; }
.stepsum { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.stepitem { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 5px 6px; border-radius: 5px; cursor: pointer;
  color: var(--text); font-size: 12.5px; font-family: var(--ui); line-height: 1.35; }
.stepitem:hover { background: var(--panel-2); }
.stepitem .tick { flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--edge);
  display: grid; place-items: center; font-size: 10px; color: transparent; margin-top: 1px; }
.stepitem.done .tick { background: var(--good); border-color: var(--good); color: #071613; }
.stepitem.done { color: var(--muted); }
.stepitem.done .lbl { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.stepitem.opt { color: var(--verdigris); }
.stepitem.opt .tick { border-color: color-mix(in srgb, var(--verdigris) 55%, var(--edge)); }
.stepitem.opt.done { color: var(--muted); }
.stepitem .lbl small { display: block; font-size: 9.5px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.steps .sep { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--verdigris); margin: 10px 6px 2px; }
@media print { .steps { display: none !important; } }

/* ================= left rail (builder) ================= */
.rail { position: sticky; top: 62px; max-height: calc(100vh - 76px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
details.rg { background: var(--panel); border: 1px solid var(--edge); border-radius: 6px; }
details.rg > summary {
  cursor: pointer; list-style: none; padding: 9px 12px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass); display: flex; align-items: center; gap: 8px;
}
details.rg > summary::before { content: "\25B8"; font-size: 10px; transition: transform .12s; }
details.rg[open] > summary::before { transform: rotate(90deg); }
details.rg > summary .badge { margin-left: auto; font-size: 10px; background: var(--warn); color: #241d05; border-radius: 10px; padding: 1px 8px; letter-spacing: .02em; }
.rg-b { padding: 4px 12px 12px; }
.field { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.field > span { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); }
input[type=text], select {
  background: var(--ink); color: var(--text); border: 1px solid var(--edge); border-radius: 4px;
  padding: 6px 8px; font-family: var(--ui); font-size: 13px; width: 100%;
}
input:focus-visible, select:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.tbtn { background: var(--panel-2); color: var(--text); border: 1px solid var(--edge); border-radius: 4px; padding: 4px 9px; cursor: pointer; font-size: 12px; font-family: var(--mono); }
.tbtn.on { background: var(--brass); border-color: var(--brass); color: #241d05; font-weight: 600; }
.tbtn:disabled { opacity: .35; cursor: not-allowed; }
.note { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.warnnote { font-size: 11.5px; color: var(--warn); margin-top: 6px; }
.cfggrp { margin-top: 10px; }
.cfggrp > .lbl { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); }
.chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 2px 0; }
.chk input { accent-color: var(--brass); }
/* equipment section headers — larger, fantasy display face */
.eqhead {
  font-family: "Cinzel", var(--serif); font-weight: 700; font-size: 16px;
  letter-spacing: .08em; color: var(--brass);
  display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px;
}
.eqhead::after { content: ""; flex: 1; height: 1px; align-self: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 45%, transparent), transparent); }
.eqhead .eqsub { font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: .1em; color: var(--muted); }
.cfggrp + .cfggrp { margin-top: 16px; }

.langgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 5px; max-height: 220px; overflow-y: auto; }
.langgrid .chk { font-size: 11.5px; }

.gearcats { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 4px 0 6px; }
.gearcats .chk { font-size: 11px; color: var(--muted); gap: 5px; padding: 1px 0; }
.gearcats .lvlf { width: auto; min-width: 74px; font-size: 11px; padding: 3px 5px; margin-left: auto; }

/* gear item rows: separated so they don't clump */
.field.gearrow { margin-top: 12px; border-top: 1px dotted var(--edge); padding-top: 8px; }
.field.gearrow:first-of-type { border-top: 0; }

/* dropdown row descriptions revealed on hover */
#cbxdrop .cbx-row { flex-wrap: wrap; }
#cbxdrop .cbx-row .cbx-desc { display: none; flex-basis: 100%; font-size: 10.5px; color: var(--muted);
  line-height: 1.4; padding: 2px 0 3px 10px; border-left: 2px solid var(--brass); margin: 2px 0 2px 2px; }
#cbxdrop .cbx-row:hover .cbx-desc { display: block; }
.slotgrp { margin-top: 10px; border-top: 1px dotted var(--edge); padding-top: 8px; cursor: default; user-select: none; }
.slotgrp select { cursor: pointer; }
.slotgrp .lv { font-family: var(--mono); font-size: 10px; color: var(--brass); letter-spacing: .1em; }
.slot { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.slot > span { font-size: 10.5px; color: var(--muted); }
.sprow { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12.5px; }
.sprow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .1s; }

/* hover a spell: the name lights up and its short description unfolds below */
.spitem { border-radius: 4px; cursor: default; user-select: none; }
.spitem .stog { cursor: pointer; }
.spitem:hover { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.spitem:hover .sprow .nm { color: var(--brass); font-weight: 600; }
.spitem .spdesc { display: none; font-size: 11px; color: var(--muted); line-height: 1.45;
  padding: 1px 8px 6px 10px; border-left: 2px solid var(--brass); margin: 0 0 3px 2px; }
.spitem:hover .spdesc { display: block; }
.spitem .spdesc .spmeta2 { margin-top: 2px; color: var(--verdigris); font-size: 10.5px; }
.sprow .tg { margin-left: auto; display: flex; gap: 4px; flex: none; }
.stog { width: 21px; height: 21px; border-radius: 4px; border: 1px solid var(--edge); background: var(--panel-2); cursor: pointer; font-size: 11px; color: var(--muted); line-height: 1; padding: 0; }
.stog.on-book { background: var(--brass); border-color: var(--brass); color: #241d05; }
.stog.on-prep { background: var(--verdigris); border-color: var(--verdigris); color: #071613; }
.stog:disabled { opacity: .3; cursor: not-allowed; }
.srank { margin-top: 9px; }
.srank > .lbl { font-family: var(--mono); font-size: 10px; color: var(--brass); letter-spacing: .1em; }
.sp-more { font-size: 11px; color: var(--muted); font-style: italic; padding: 4px 0 2px; text-align: center;
  border-top: 1px dashed var(--edge); margin-top: 4px; }

/* ================= the paper sheet ================= */
.paper {
  --p-bg: #171a22; --p-box: #20242f; --p-ink: #e6e3d8; --p-fade: #8f8a7c;
  --p-line: #4b5065; --p-soft: #3b4053; --p-soft2: #333848; --p-hint: #2a2f3d;
  --p-red: #b04a45; --p-red-ink: #f6efe3;
  background: var(--p-bg); color: var(--p-ink); border: 1px solid var(--p-line);
  box-shadow: 0 12px 40px rgba(0,0,0,.35); border-radius: 3px;
  padding: 20px 22px 24px; max-width: 850px; font-size: 13px;
}
.paper .ttl { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 3px solid var(--p-red); padding-bottom: 4px; }
.paper .ttl h2 { margin: 0; font-family: var(--serif); font-size: 20px; letter-spacing: .02em; color: var(--p-red); }
.paper .ttl span { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: var(--p-fade); }

.pbar {
  background: var(--p-red); color: var(--p-red-ink); text-transform: uppercase;
  font-weight: 700; font-size: 11px; letter-spacing: .16em;
  padding: 4px 16px 3px 9px; margin: 16px 0 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
}
.pbox { border: 1.5px solid var(--p-line); border-radius: 3px; background: var(--p-box); }
.plbl { font-size: 8px; text-transform: uppercase; letter-spacing: .13em; color: var(--p-fade); font-weight: 700; }
.pnum { font-weight: 700; font-variant-numeric: tabular-nums; }

/* identity strip for pages 2-3 */
.pstrip { display: flex; gap: 16px; flex-wrap: wrap; border-bottom: 1.5px solid var(--p-line); padding: 8px 2px 6px; }
.pstrip .cell .v { font-weight: 700; font-size: 14px; min-height: 17px; }
.pstrip .cell.grow { flex: 1; }

/* TEML */
.teml { display: inline-flex; gap: 2px; vertical-align: middle; }
.tb { width: 13px; height: 13px; border: 1px solid var(--p-line); border-radius: 2px; font-size: 8px; font-weight: 700; display: grid; place-items: center; color: var(--p-fade); background: var(--p-box); }
.tb.fill { background: var(--p-red); border-color: var(--p-red); color: var(--p-red-ink); }

/* header grid */
.phead { display: grid; grid-template-columns: 2.2fr 1.2fr .7fr; gap: 8px; margin-top: 12px; }
.phead2 { display: grid; grid-template-columns: 1.2fr .5fr 1.6fr 1.1fr .6fr; gap: 8px; margin-top: 8px; }
.pfield { border-bottom: 1.5px solid var(--p-line); padding: 1px 2px 2px; min-height: 30px; display: flex; flex-direction: column; justify-content: flex-end; }
.pfield .v { font-size: 14.5px; font-weight: 600; min-height: 18px; }
.pfield .v.big { font-size: 18px; font-family: var(--serif); }
.pfield .plbl { margin-top: 1px; }

/* attributes — compact, modifier only */
.pattr { display: grid; grid-template-columns: repeat(6, minmax(52px, 76px)); gap: 6px; }
.abox { text-align: center; overflow: hidden; }
.abox .hd { background: var(--p-red); color: var(--p-red-ink); font-size: 8px; font-weight: 700; letter-spacing: .16em; padding: 1.5px 0; }
.abox .m { font-size: 14px; font-weight: 700; line-height: 1.4; padding: 1px 0 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .pattr { grid-template-columns: repeat(3,1fr); } }

/* defense row — compact */
.pdef { display: grid; grid-template-columns: 104px 1fr 160px; gap: 8px; align-items: start; }
@media (max-width: 700px) { .pdef { grid-template-columns: 1fr; } }
.shield {
  width: 58px; height: 62px; margin: 0 auto;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
  background: var(--p-line); display: grid; place-items: center; padding: 2px;
}
.shield .in { width: 100%; height: 100%; clip-path: polygon(2% 2%, 98% 2%, 98% 54%, 50% 97%, 2% 54%); background: var(--p-box); display: grid; place-items: center; text-align: center; }
.shield .n { font-size: 17px; font-weight: 800; line-height: 1; }
.shield .plbl { font-size: 6.5px; }
.acbrk { display: flex; justify-content: center; gap: 5px; margin-top: 4px; font-size: 8.5px; color: var(--p-fade); text-align: center; }
.acbrk b { display: block; font-size: 11px; color: var(--p-ink); }
.saves3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.savebox { text-align: center; padding-bottom: 4px; overflow: hidden; }
.savebox .hd { background: var(--p-red); color: var(--p-red-ink); font-size: 8px; font-weight: 700; letter-spacing: .13em; padding: 1.5px 0; margin-bottom: 2px; }
.savebox .n { font-size: 16px; font-weight: 700; }
.savebox .brk { font-size: 8.5px; color: var(--p-fade); margin-top: 2px; }
.hpbox { padding: 6px 9px; }
.hpbox .top { display: flex; align-items: baseline; gap: 7px; justify-content: center; }
.hpbox .max { font-size: 28px; font-weight: 800; line-height: 1.1; }
.hpbox .top .plbl { font-size: 10px; }
.hpwrite { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 5px; }
.wcell { border: 1px dashed var(--p-soft); border-radius: 3px; height: 24px; padding: 1px 4px; }
.dots { margin-top: 5px; font-size: 8px; color: var(--p-fade); letter-spacing: .07em; text-align: center; }
.dots .dotrow { margin-top: 2px; }
.dot { display: inline-block; width: 9px; height: 9px; border: 1.2px solid var(--p-line); border-radius: 50%; vertical-align: -1px; margin-right: 2px; background: var(--p-box); }

/* hero point pips — clickable on screen, plain circles in print */
.hpip { display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 1.6px solid var(--p-line); background: var(--p-box); cursor: pointer; margin: 0 2px; vertical-align: middle; }
.hpip.on { background: var(--p-red); border-color: var(--p-red); }
.hpip:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-red) 30%, transparent); }
@media print { .hpip { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* misc row */
.pmisc { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px,1fr)); gap: 6px; }
.mbox { padding: 5px 8px; text-align: center; }
.mbox .r1 { display: flex; align-items: center; gap: 7px; justify-content: center; }
.mbox .n { font-size: 14px; font-weight: 700; }
.mbox .sub { font-size: 9px; color: var(--p-fade); margin-top: 1px; }

/* body two-col */
.pcols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 700px) { .pcols { grid-template-columns: 1fr; } }

/* skills — rows clickable */
table.psk { width: 100%; border-collapse: collapse; }
table.psk td { padding: 2.5px 3px; border-bottom: 1px solid var(--p-soft2); font-size: 12px; }
table.psk td.tot { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; width: 34px; }
table.psk td.ab { color: var(--p-fade); font-size: 9.5px; text-transform: uppercase; width: 28px; }
table.psk td.tm { width: 66px; }
table.psk tr[data-psk] { cursor: pointer; }
table.psk tr[data-psk]:hover td { background: var(--p-hint); }
table.psk tr.locked { cursor: default; }
table.psk tr.locked:hover td { background: transparent; }
.skhint { font-size: 10px; color: var(--p-fade); margin: 2px 0 4px; }
.skhint b { color: var(--p-red); }

/* strikes */
.strike { padding: 6px 9px; margin-bottom: 6px; }
.strike .r1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.strike .wn { font-weight: 700; font-size: 13.5px; }
.strike .atk { font-size: 16px; font-weight: 800; }
.strike .mapv { font-size: 10.5px; font-weight: 700; color: var(--p-fade); font-variant-numeric: tabular-nums; }
.strike .sub { font-size: 10px; color: var(--p-fade); margin-top: 1px; }
.strike .sub b.dmg { color: var(--p-ink); font-size: 11px; }
.strike .sub b.wtrait { color: var(--p-red); font-size: 10px; }
.strike .critnote { font-size: 9px; color: var(--p-fade); }
.strike .actg { margin-left: auto; }
.strike .rel { color: var(--p-fade); font-weight: 400; font-size: 8.5px; letter-spacing: 0; }

/* action-cost glyphs (◆ = 1 action, ⟳ = reaction) */
.actg { color: var(--p-red); font-weight: 700; font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
.ract { color: var(--brass); font-size: 9.5px; letter-spacing: 1px; white-space: nowrap; flex: none; }

/* prepared-count controls in the rail */
.prepct { min-width: 15px; text-align: center; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.prepct.has { color: var(--verdigris); font-weight: 700; }

/* ================= equipment combobox dropdown ================= */
#cbxdrop {
  position: absolute; z-index: 60; display: none;
  max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); font-size: 12.5px;
}
#cbxdrop .cbx-h {
  position: sticky; top: 0; display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 3px; background: var(--panel-2);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); border-top: 1px solid var(--edge);
}
#cbxdrop .cbx-h:first-child { border-top: 0; }
#cbxdrop .cbx-h::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--brass) 35%, transparent); }
#cbxdrop .cbx-row {
  display: flex; align-items: baseline; gap: 10px; padding: 4px 10px; cursor: pointer;
}
#cbxdrop .cbx-row:hover, #cbxdrop .cbx-row.act { background: color-mix(in srgb, var(--brass) 18%, var(--panel)); }
#cbxdrop .cbx-row .cn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cbxdrop .cbx-row .cm { flex: none; font-size: 10.5px; color: var(--muted); font-family: var(--mono); }
#cbxdrop .cbx-more { padding: 5px 10px; font-size: 11px; color: var(--muted); font-style: italic; }
#cbxdrop .cbx-row.lk { opacity: .45; cursor: not-allowed; }
#cbxdrop .cbx-row.lk:hover { background: transparent; }

/* rune selects under a weapon/armor row */
.runerow { display: flex; gap: 4px; margin: 4px 0 2px 10px; }
.runerow select { flex: 1; min-width: 0; font-size: 11px; padding: 3px 4px; color: var(--muted); }
.runerow select:has(option:checked:not([value=""])) { color: var(--brass); border-color: var(--brass); }

/* item level chip on the sheet */
.ilvl { font-size: 9px; color: var(--p-fade); text-transform: uppercase; letter-spacing: .06em; }
.wprofs td { padding: 2px 4px; font-size: 11.5px; }
.langbox, .senbox { padding: 6px 9px; font-size: 12.5px; min-height: 34px; }

/* feats & inventory (page 2) */
.pflist { width: 100%; border-collapse: collapse; }
.pflist td { border-bottom: 1px solid var(--p-soft2); padding: 4px 4px; font-size: 12px; vertical-align: top; }
.pflist td.lv { width: 26px; font-weight: 700; color: var(--p-red); text-align: right; }
.pflist td.ty { width: 96px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--p-fade); padding-top: 7px; }
.pflist .un { color: var(--p-soft); font-style: italic; }
.pflist .fdesc { font-size: 10px; color: var(--p-fade); margin-top: 1px; line-height: 1.35; }

/* long-text clamp: collapsed to 5 lines until "more" is clicked */
.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.clamp.expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
.morebtn {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--p-red); background: none; border: none; cursor: pointer; padding: 1px 0 0; font-family: inherit;
}
.morebtn:hover { text-decoration: underline; }
.invgrid { columns: 2; column-gap: 18px; font-size: 12.5px; }
.invgrid .invitem { break-inside: avoid; padding: 3px 0 5px; border-bottom: 1px solid var(--p-soft2); }
.invgrid .bx { display: inline-block; width: 9px; height: 9px; border: 1.2px solid var(--p-line); margin-right: 6px; }
.invgrid .fdesc { font-size: 10px; color: var(--p-fade); line-height: 1.4; margin: 2px 0 0 15px; }

/* spells-per-day table (page 3) */
table.sptable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.sptable th { font-size: 8px; text-transform: uppercase; letter-spacing: .12em; color: var(--p-fade);
  text-align: left; padding: 2px 8px 3px 4px; border-bottom: 1.5px solid var(--p-line); }
table.sptable td { font-size: 12px; padding: 2.5px 8px 2.5px 4px; border-bottom: 1px solid var(--p-soft2); }
table.sptable td:first-child { font-weight: 600; }
table.sptable tr:last-child td { border-bottom: 0; }

/* spellcasting (page 3) */
.spmeta { display: grid; grid-template-columns: repeat(3, minmax(120px,1fr)); gap: 8px; margin-bottom: 8px; }
.sprank-sheet { margin-top: 8px; }
.sprank-sheet .hd { display: flex; gap: 8px; align-items: baseline; border-bottom: 1.5px solid var(--p-line); }
.sprank-sheet .hd b { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.sprank-sheet .hd span { font-size: 10px; color: var(--p-fade); margin-left: auto; }
.spl { padding: 3px 0 4px; border-bottom: 1px dotted var(--p-soft2); }
.spl:last-child { border-bottom: 0; }
.spl .r { display: flex; align-items: baseline; gap: 10px; }
.spl .r .actg { margin-left: auto; }
.spl .sn { font-weight: 700; font-size: 12.5px; }
.spl .sm { font-size: 10.5px; color: var(--p-ink); }
.spl .sm b { font-size: 11px; }
.spl .sr { font-size: 10px; color: var(--p-fade); }
.spl .sr i { color: var(--p-red); font-style: normal; font-weight: 600; }
.spl .hnote { color: var(--verdigris); }
.spl .hup { font-size: 9.5px; font-weight: 700; color: var(--verdigris); }
.spl .sd { font-size: 10px; color: var(--p-fade); line-height: 1.35; }
.spl.compact { display: inline-block; margin-right: 14px; border-bottom: 0; }
.emptyline { color: var(--p-soft); font-style: italic; font-size: 12px; padding: 4px 0; }

.pfoot { margin-top: 16px; border-top: 1px solid var(--p-soft); padding-top: 6px; font-size: 9px; color: var(--p-fade); display: flex; justify-content: space-between; letter-spacing: .06em; }

footer.foot { max-width: 1280px; margin: 0 auto 40px; padding: 0 16px; color: var(--muted); font-size: 12px; }
.cov { display: inline-block; margin: 2px 8px 2px 0; font-family: var(--mono); font-size: 11px; }

/* ================= print: all sheet pages ================= */
#printall { display: none; }
@media print {
  header.top, .rail, footer.foot, .noprint { display: none !important; }
  body { background: white; }
  .app { display: none !important; }           /* on-screen page is replaced by the full set */
  #printall { display: block; }
  #printall .printpage { page-break-after: always; }
  #printall .printpage:last-child { page-break-after: auto; }
  .paper { box-shadow: none; border: none; max-width: none; padding: 0; border-radius: 0; }
  .pbar, .abox .hd, .savebox .hd, .tb.fill, .shield { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pbar-block, .pbox, .sprank-sheet, .strike { break-inside: avoid; }
  /* paper always prints the complete text */
  .clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .morebtn { display: none !important; }
}

/* ================= bestiary-specific ================= */
.blist { margin-top: 10px; }
.brow { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: 5px; cursor: pointer; }
.brow:hover { background: var(--panel-2); }
.brow.sel { background: color-mix(in srgb, var(--brass) 16%, var(--panel)); }
.brow .bn { font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .blvl { flex: none; font-family: var(--mono); font-size: 11px; color: var(--brass); }
.brow .btr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--muted); }
.brow .bsrc { flex: none; font-size: 9.5px; color: var(--muted); font-family: var(--mono); }
.brow .badd { flex: none; }
.b-more { font-size: 11px; color: var(--muted); font-style: italic; text-align: center; padding: 6px 0; border-top: 1px dashed var(--edge); }

/* stat block on paper */
.sb-name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: "Cinzel", var(--serif); font-weight: 700; font-size: 21px; color: var(--p-red);
  border-bottom: 2.5px solid var(--p-red); padding-bottom: 3px; margin-top: 6px; }
.sb-name .cr { font-size: 13px; font-family: var(--mono); color: var(--p-ink); letter-spacing: .06em; }
.sb-traits { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0; }
.sb-trait { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--p-red); color: var(--p-red-ink); padding: 2px 8px; border-radius: 2px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sb-trait.rar-uncommon { background: #7a4d12; }
.sb-trait.rar-rare { background: #1a4a7a; }
.sb-trait.sz { background: #3d3a33; }
.sb-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; margin: 8px 0 10px; }
.sb-vitals .vbx { border: 1.5px solid var(--p-line); border-radius: 3px; background: var(--p-box); text-align: center; padding: 4px 2px; }
.sb-vitals .vbx .k { font-size: 8px; text-transform: uppercase; letter-spacing: .12em; color: var(--p-fade); font-weight: 700; }
.sb-vitals .vbx .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-vitals .vbx.hpv .v { color: var(--p-red); }
.sb-body { font-size: 12.5px; line-height: 1.5; }
.sb-body .sb-p { margin: 5px 0; }
.sb-body hr { border: 0; border-top: 1.5px solid var(--p-line); margin: 8px 0; }
.sb-flavor { font-style: italic; color: var(--p-fade); font-size: 12px; margin: 6px 0 2px; }
.sb-actions-glyph { color: var(--p-red); font-weight: 700; letter-spacing: 1px; }
.sb-empty { color: var(--p-fade); font-style: italic; padding: 30px 0; text-align: center; }

/* encounter builder */
.encrow { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 12.5px; }
.encrow .en { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.encrow .ect, .encrow .exp { font-family: var(--mono); font-size: 11px; color: var(--muted); flex: none; }
.threat { margin-top: 8px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--edge); text-align: center; }
.threat .tl { font-family: "Cinzel", var(--serif); font-weight: 700; font-size: 15px; }
.threat .tx2 { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.threat.t-trivial .tl { color: var(--muted); }
.threat.t-low .tl { color: var(--good); }
.threat.t-moderate .tl { color: var(--brass); }
.threat.t-severe .tl { color: #d8742f; }
.threat.t-extreme .tl { color: #e05252; }
.threat.t-beyond .tl { color: #e05252; text-decoration: underline wavy; }

@media print {
  .rail, header.top, footer.foot, .blist, .b-more, .noprint { display: none !important; }
  /* the copied forge print CSS hides .app in favor of its multi-page print set;
     the bestiary prints the app itself, so bring it back */
  .app { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .paper { box-shadow: none; border: none; max-width: none; padding: 0; }
}

/* clearable search inputs: × button wipes the field */
.clearwrap { position: relative; display: block; }
.clearwrap input { padding-right: 24px; width: 100%; }
.clearx { position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; line-height: 1; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0; }
.clearx:hover { background: var(--panel-2); color: var(--text); }

/* ================= print encounter ================= */
#printenc { display: none; }
.enctbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.enctbl th { font-size: 8px; text-transform: uppercase; letter-spacing: .12em; color: var(--p-fade);
  text-align: left; padding: 2px 8px 3px 4px; border-bottom: 1.5px solid var(--p-line); }
.enctbl td { font-size: 12px; padding: 3px 8px 3px 4px; border-bottom: 1px solid var(--p-soft2); }
.enctbl tr.tot td { border-bottom: 0; border-top: 1.5px solid var(--p-line); }
.enc-block { break-inside: avoid; margin-top: 16px; padding-top: 4px; }
.enc-ct { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--p-red);
  letter-spacing: .08em; text-transform: uppercase; }
@media print {
  body.print-enc .app { display: none !important; }
  body.print-enc #printenc { display: block; }
  #printenc .paper { box-shadow: none; border: none; max-width: none; padding: 0; }
}

/* creature attribute rectangles */
.sb-attrs { display: grid; grid-template-columns: repeat(6, minmax(50px, 76px)); gap: 6px; margin: 0 0 10px; }
.sb-attrs .abx { border: 1.5px solid var(--p-line); border-radius: 3px; background: var(--p-box); text-align: center; overflow: hidden; }
.sb-attrs .abx .hd { background: var(--p-red); color: var(--p-red-ink); font-size: 8px; font-weight: 700;
  letter-spacing: .16em; padding: 1.5px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sb-attrs .abx .m { font-size: 14px; font-weight: 700; padding: 2px 0 3px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .sb-attrs { grid-template-columns: repeat(3, 1fr); } }

/* creature list scrolls inside its own window so the page (and footer) stay reachable */
.blist { max-height: 62vh; overflow-y: auto; border: 1px solid var(--edge); border-radius: 6px;
  padding: 0 8px 8px; background: color-mix(in srgb, var(--panel) 30%, transparent); }
.blist .pbar { position: sticky; top: 0; z-index: 2; margin-top: 8px; }

/* the list lives on the light paper — use paper colors, not rail colors */
.paper .blist { background: var(--p-box); border-color: var(--p-soft); }
.paper .brow .bn { color: var(--p-ink); }
.paper .brow .blvl { color: var(--brass-dim); }
.paper .brow .btr, .paper .brow .bsrc { color: var(--p-fade); }
.paper .brow:hover { background: var(--p-hint); }
.paper .brow.sel { background: color-mix(in srgb, var(--brass) 22%, var(--p-box)); }
.paper .brow .stog { background: var(--p-box); border-color: var(--p-line); color: var(--p-ink); }
.paper .brow .stog:hover { background: var(--p-hint); }
.paper .b-more { color: var(--p-fade); border-top-color: var(--p-soft); }
.paper .sb-empty { color: var(--p-fade); }

/* ===== paper theming: dark by default, light via toggle, ALWAYS light in print ===== */
:root[data-theme="light"] .paper {
  --p-bg:#faf8f1; --p-box:#ffffff; --p-ink:#17140f; --p-fade:#7c756a;
  --p-line:#37322a; --p-soft:#b9b2a4; --p-soft2:#dad4c6; --p-hint:#f0ebdd;
  --p-red:#6b1a14; --p-red-ink:#f6efe3;
}
@media print {
  .paper, :root[data-theme="dark"] .paper, :root[data-theme="light"] .paper {
    --p-bg:#ffffff; --p-box:#ffffff; --p-ink:#17140f; --p-fade:#7c756a;
    --p-line:#37322a; --p-soft:#b9b2a4; --p-soft2:#dad4c6; --p-hint:#f0ebdd;
    --p-red:#6b1a14; --p-red-ink:#f6efe3;
    background:#ffffff;
  }
}
/* ================= bestiary layout: two columns ================= */
/* The side column collapses to an icon strip (the forge's rail-min pattern): a class
   flip on #app, never a re-render, so the list keeps its scroll and the panels their
   state. Both the strip and the panels are always in the DOM. */
:root { --railw: 330px; --minw: 52px; --minbtn-w: 38px; --minbtn-h: 34px; }
.app.bapp { grid-template-columns: var(--railw) minmax(0,1fr); transition: grid-template-columns .24s cubic-bezier(.4,0,.2,1); }
.app.bapp.rail-min { grid-template-columns: var(--minw) minmax(0,1fr); }
@media (max-width: 980px) {
  .app.bapp, .app.bapp.rail-min { grid-template-columns: 1fr; }
  .railcol { position: static !important; max-height: none !important; }
  .app.rail-min .railmin { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
}
.no-anim, .no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
/* the column itself is what sticks; the panel list inside it just flows */
.railcol { position: sticky; top: 62px; max-height: calc(100vh - 76px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.rail { position: static; max-height: none; overflow: visible; padding-right: 0; }
.mintop { display: flex; }
.railtop { justify-content: flex-start; }
.app.rail-min .railtop { justify-content: center; }
.mintog { background: var(--panel); color: var(--brass); border: 1px solid var(--edge); border-radius: 6px; cursor: pointer;
  font-family: var(--mono); font-size: 14px; line-height: 1; width: var(--minbtn-w); height: var(--minbtn-h); padding: 0;
  display: flex; align-items: center; justify-content: center; }
.mintog:hover { border-color: var(--brass-dim); color: var(--text); }
.mintog:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.minstrip { display: none; gap: 8px; opacity: 0; transition: opacity .18s ease .06s, display .18s allow-discrete; }
.app.rail-min .railmin { display: flex; flex-direction: column; align-items: center; opacity: 1; }
@starting-style { .app.rail-min .railmin { opacity: 0; } }
.app.rail-min .rail { display: none; }
.minicon { position: relative; width: var(--minbtn-w); height: var(--minbtn-h); display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--brass); border: 1px solid var(--edge); border-radius: 6px; cursor: pointer; }
.minicon .g { font-size: 17px; line-height: 1; }
.minicon:hover { border-color: var(--brass-dim); color: var(--text); }
.minicon .mdot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
details.rg > summary { min-height: calc(var(--minbtn-h) - 2px); }

/* header: the random-encounter button sits alone between the title and the actions */
.btn.lucky { margin-left: auto; }
.top-actions { margin-left: auto; }

/* finder */
.tabbar { display: flex; gap: 6px; margin-top: 6px; }
.tabbar .tbtn { flex: 1; }
.cnt { font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin-left: 5px; }
.tbtn.on .cnt { color: #241d05; }
.gearcats.types { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.gearcats .chk .cnt { margin-left: auto; padding-left: 6px; }

/* list chips */
.chip { flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--p-soft); border-radius: 3px; padding: 0 5px; color: var(--p-fade); line-height: 1.5; }
.chip.spoil { border-color: color-mix(in srgb, var(--warn) 60%, transparent); color: var(--warn); text-transform: none; letter-spacing: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.rar-uncommon { color: #d08a3a; border-color: #7a4d12; }
.chip.rar-rare { color: #5d9ee0; border-color: #1a4a7a; }
.chip.rar-unique { color: #b88ae0; border-color: #4d2a7a; }
.chip.cx { color: var(--p-ink); }

/* stat block extras */
.sb-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sb-tools a.tbtn { text-decoration: none; }
.adjbar { display: inline-flex; align-items: center; gap: 4px; }
.adjbar .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-fade); margin: 0 4px 0 6px; }
.adjtag { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--p-fade); }
.sb-adjnote { font-size: 11px; color: var(--p-fade); border-left: 2px solid var(--p-red); padding: 3px 8px; margin: 0 0 10px; line-height: 1.4; }
.sb-rk { font-size: 11.5px; color: var(--p-fade); margin: 4px 0 6px; }
.sb-rk b { color: var(--p-ink); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-right: 6px; }
.sb-aside { margin: 8px 0; padding: 6px 10px; border: 1px solid var(--p-soft); border-left: 3px solid var(--p-red); border-radius: 3px; background: var(--p-hint); font-size: 12px; line-height: 1.45; }
.sb-hz { font-size: 12.5px; line-height: 1.5; margin: 6px 0; }
.sb-hz b { color: var(--p-red); }
.sb-trait.ty { background: var(--p-red); }
.sb-trait.cx { background: #3d3a33; }
.sb-trait.rar-unique { background: #4d2a7a; }

/* encounter rows */
.encrow .en { cursor: pointer; }
.encrow .en:hover { color: var(--brass); }
.encrow .en small { font-family: var(--mono); font-size: 9.5px; color: var(--muted); margin-left: 4px; }
.encrow.hz .en::before { content: "\26A0\FE0E "; color: var(--muted); font-size: 10px; }
.adjmark { font-style: normal; font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--warn); margin-right: 4px; }
.stog.adj { font-family: var(--mono); font-weight: 700; }
.stog.adj.elite { background: var(--warn); border-color: var(--warn); color: #241d05; }
.stog.adj.weak { background: var(--verdigris); border-color: var(--verdigris); color: #071613; }
.threat .award { margin-top: 4px; color: var(--text); }
.threat .award b { color: var(--brass); }
.warnnote { color: var(--warn); }

/* random-encounter dialog */
.rcover { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.62); display: grid; place-items: center; }
.rcbox { width: min(440px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; padding: 14px 16px 16px; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.rcbox h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 17px; color: var(--brass); }

/* toast */
#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 90; max-width: min(620px, calc(100vw - 32px));
  background: var(--panel-2); color: var(--text); border: 1px solid var(--brass); border-radius: 6px; padding: 8px 14px; font-size: 12.5px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media print {
  .sb-tools, .mintop, .minstrip, #toast, .rcover { display: none !important; }
  .sb-aside { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}