/* sheet.css - printable A4 character sheet. Ink on paper, stat-block red rules. */
.sheet {
  --ink: #1a1a1a;
  --muted: #5b5750;
  --rule: #8c1c13;
  --line: #b9b2a6;
  --fill: #f6f3ee;
  --tag: #e9e3d8;
  font-family: "Alegreya Sans", "Segoe UI", Arial, sans-serif;
  font-size: 8.6pt;
  line-height: 1.32;
  color: var(--ink);
}
.sheet .page {
  width: 210mm;
  min-height: 297mm;
  padding: 9mm 10mm 10mm;
  margin: 0 auto 8mm;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  position: relative;
}
.sheet h2, .sheet h3, .sheet h4, .sh-name b { font-family: "Alegreya", Georgia, serif; }
.sheet h2 {
  font-size: 13pt; color: var(--rule); margin: 4mm 0 1.5mm; padding-bottom: 0.6mm;
  border-bottom: 1.4pt solid var(--rule); font-variant: small-caps; letter-spacing: 0.02em;
}
.sheet h3 {
  font-size: 9.5pt; margin: 0 0 1.2mm; color: var(--rule); font-variant: small-caps; letter-spacing: 0.03em;
  border-bottom: 0.6pt solid var(--line); padding-bottom: 0.4mm;
}
.sheet h4 { font-size: 10pt; margin: 0; }
.sheet h5 { font-size: 9pt; margin: 2mm 0 0.5mm; font-family: "Alegreya", Georgia, serif; }
.sheet p { margin: 0 0 1.1mm; }
.sheet ul { margin: 0 0 1mm 4mm; padding: 0; }
.sheet ul.nobul { list-style: none; margin-left: 0; }
.sheet .lbl { display: block; font-size: 6.6pt; color: var(--muted); letter-spacing: 0.02em; }
.sheet small { color: var(--muted); }
.sheet .fine { font-size: 7.4pt; color: var(--muted); margin-top: 1mm; }
.sheet .tag { display: inline-block; background: var(--tag); border-radius: 2px; padding: 0 1.2mm; font-size: 6.8pt; font-weight: 600; color: #3b352c; }
.sheet .ref-spell { font-style: italic; }
.sheet .dice { font-weight: 600; }
.sheet b.ename { font-family: "Alegreya", Georgia, serif; }

/* header */
.sh-head { display: grid; grid-template-columns: 62mm 1fr auto; gap: 3mm; align-items: end; border-bottom: 2pt solid var(--rule); padding-bottom: 1.5mm; margin-bottom: 2.5mm; }
.sh-name b { font-size: 17pt; line-height: 1.05; display: block; }
.sh-meta { display: grid; grid-template-columns: 1.6fr 1.1fr 1fr 0.9fr 0.5fr; gap: 2mm; font-size: 8.4pt; }
.sh-meta > div { border-bottom: 0.5pt solid var(--line); padding-bottom: 0.4mm; }
.sh-page { font-family: "Alegreya", Georgia, serif; font-variant: small-caps; color: var(--rule); font-size: 10pt; }
.sh-foot { position: absolute; bottom: 4mm; left: 10mm; right: 10mm; font-size: 6.5pt; color: var(--muted); text-align: right; }

/* vitals */
.vitals { display: grid; grid-template-columns: 21mm 14mm 20mm 15mm 15mm 1fr 20mm 27mm 15mm; gap: 1.6mm; margin-bottom: 2.5mm; }
.vt { border: 0.8pt solid var(--ink); border-radius: 2mm; padding: 1mm 1.4mm; text-align: center; display: flex; flex-direction: column; justify-content: space-between; min-height: 15mm; }
.vt b { font-size: 15pt; font-family: "Alegreya", Georgia, serif; line-height: 1; }
.vt b.sm { font-size: 9.5pt; line-height: 1.15; }
.vt small { font-size: 6.4pt; line-height: 1.15; }
.vt.ac { border-width: 1.6pt; border-radius: 2mm 2mm 7mm 7mm; }
.vt.hp .hp-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 1mm; flex: 1; }
.vt.hp .hp-row > div { border-left: 0.5pt solid var(--line); display: flex; flex-direction: column; }
.vt.hp .hp-row > div:first-child { border-left: 0; }
.vt.ds small { display: flex; justify-content: space-between; align-items: center; gap: 1mm; white-space: nowrap; }
.vt .insp { width: 7mm; height: 7mm; border: 0.8pt solid var(--ink); transform: rotate(45deg); margin: 1mm auto 1.5mm; }

/* page 1 layout */
.p1grid { display: grid; grid-template-columns: 50mm 1fr; gap: 3mm; }
.abil { border: 0.8pt solid var(--ink); border-radius: 2mm; margin-bottom: 1.6mm; padding: 1mm 1.6mm 1.2mm; break-inside: avoid; }
.abil-top { display: grid; grid-template-columns: 1fr auto auto; gap: 1.5mm; align-items: center; border-bottom: 0.6pt solid var(--line); padding-bottom: 0.6mm; margin-bottom: 0.6mm; }
.abil-name { font-family: "Alegreya", Georgia, serif; font-variant: small-caps; font-weight: 700; font-size: 9.6pt; color: var(--rule); }
.abil-mod { font-family: "Alegreya", Georgia, serif; font-size: 15pt; font-weight: 700; line-height: 1; }
.abil-score { border: 0.8pt solid var(--ink); border-radius: 50%; width: 7.5mm; height: 7.5mm; display: grid; place-items: center; font-size: 8.6pt; font-weight: 600; }
.abil-list { list-style: none; margin: 0; padding: 0; }
.abil-list li { display: flex; align-items: center; gap: 1.2mm; font-size: 8.2pt; line-height: 1.38; }
.abil-list li.save { font-weight: 700; border-bottom: 0.4pt dotted var(--line); }
.abil-list .v { width: 6mm; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { width: 2.2mm; height: 2.2mm; border: 0.7pt solid var(--ink); border-radius: 50%; display: inline-block; flex: none; box-sizing: border-box; }
.dot.on { background: var(--ink); }
.dot.ex { background: var(--ink); box-shadow: 0 0 0 0.7pt #fff, 0 0 0 1.4pt var(--ink); }
.dot.half { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }

.box { border: 0.8pt solid var(--ink); border-radius: 2mm; padding: 1.4mm 2mm 1.6mm; margin-bottom: 2mm; break-inside: avoid; }
.box.rules p { font-size: 7.8pt; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4mm; align-items: start; }
.tbl { width: 100%; border-collapse: collapse; font-size: 8pt; }
.tbl th { text-align: left; font-size: 6.8pt; color: var(--muted); font-weight: 600; border-bottom: 0.6pt solid var(--line); padding: 0.4mm 1mm; }
.tbl td { border-bottom: 0.4pt solid #e2ddd4; padding: 0.7mm 1mm; vertical-align: top; }
.tbl td.c, .tbl th.c { text-align: center; }
.tbl td.notes { font-size: 7.2pt; color: #3d3a35; }
.tbl.atk td:nth-child(2) { font-weight: 700; text-align: center; white-space: nowrap; }
.tbl.res td:first-child { width: 42%; }
.boxes { display: inline-flex; gap: 0.9mm; flex-wrap: wrap; vertical-align: middle; }
.boxes i { width: 2.8mm; height: 2.8mm; border: 0.7pt solid var(--ink); display: inline-block; }
.boxes.round i { border-radius: 50%; }
.pool { font-variant-numeric: tabular-nums; }
.pl { display: grid; grid-template-columns: auto 1fr; gap: 0.5mm 2mm; margin: 0; }
.pl dt { font-weight: 700; font-size: 7.6pt; }
.pl dd { margin: 0; font-size: 8pt; }
.passives { display: flex; gap: 1.5mm; margin-bottom: 1mm; }
.passives > div { flex: 1; border: 0.6pt solid var(--line); border-radius: 1.5mm; text-align: center; padding: 0.6mm; }
.passives b { display: block; font-size: 12pt; font-family: "Alegreya", Georgia, serif; }
.passives small { font-size: 6.4pt; }

/* text-heavy pages */
.cols { column-count: 2; column-gap: 5mm; column-rule: 0.4pt solid #e2ddd4; }
.feat { break-inside: avoid-column; margin-bottom: 2.2mm; }
.feat h4 { border-left: 1.4mm solid var(--rule); padding-left: 1.4mm; line-height: 1.15; }
.feat .fmeta, .spell .smeta2 { font-size: 7pt; color: var(--muted); margin: 0.3mm 0 0.6mm 2.8mm; }
.feat .ftext, .spell .ftext { font-size: 8.2pt; }
.feat .ftext p, .spell .ftext p { margin-bottom: 0.9mm; }
.feat.ref h4 { border-left-color: var(--line); font-size: 9pt; }
.feat.intro h4 { border-left-color: var(--ink); }
.feat.intro .ftext { font-style: italic; color: #3d3a35; }
.feat.item .effects { font-weight: 700; margin: 0.4mm 0 0.6mm 2.8mm; }
.inset { border-left: 0.8pt solid var(--line); padding-left: 2mm; margin: 0.8mm 0; }
.etable { border-collapse: collapse; width: 100%; font-size: 7.4pt; margin: 1mm 0; break-inside: avoid; }
.etable caption { font-weight: 700; text-align: left; font-size: 7.6pt; }
.etable th { border-bottom: 0.6pt solid var(--line); text-align: left; padding: 0.3mm 0.8mm; }
.etable td { border-bottom: 0.3pt solid #e7e2d9; padding: 0.3mm 0.8mm; vertical-align: top; }
.actsec { margin-bottom: 2mm; }
.actsec .std { font-size: 8pt; margin-bottom: 1.2mm; }
.spl { columns: 2; column-gap: 5mm; margin-left: 4mm; font-size: 8pt; }
.spl li { break-inside: avoid; margin-bottom: 0.6mm; }
.spl .lvl { font-size: 6.8pt; color: var(--muted); }
.fgroup { margin-bottom: 1mm; }

/* spellcasting */
.scstats { display: flex; flex-direction: column; gap: 0.8mm; margin-bottom: 1.4mm; }
.scs { display: flex; gap: 4mm; align-items: baseline; font-size: 8.4pt; }
.scs > b:first-child { min-width: 34mm; font-family: "Alegreya", Georgia, serif; }
.slots { display: flex; flex-wrap: wrap; gap: 2mm 4mm; }
.slot { display: flex; flex-direction: column; gap: 0.5mm; }
.tbl.spells td { font-size: 7.6pt; padding: 0.5mm 0.8mm; }
.spell { break-inside: avoid-column; margin-bottom: 2.4mm; }
.spell h4 { border-left: 1.4mm solid var(--rule); padding-left: 1.4mm; }
.spell .sl { font-family: "Alegreya Sans", Arial, sans-serif; font-weight: 400; font-size: 7.2pt; color: var(--muted); }
.spell .smeta { font-size: 7.3pt; margin: 0.3mm 0 0 2.8mm; }

/* equipment */
.coins { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1mm; text-align: center; }
.coins > div { border: 0.6pt solid var(--line); border-radius: 1.5mm; padding: 0.6mm; }
.coins b { display: block; font-size: 11pt; }
.att { margin: 0 0 0 5mm; padding: 0; }
.att li { border-bottom: 0.5pt solid var(--line); min-height: 5mm; }
.tbl.inv td { font-size: 7.8pt; padding: 0.35mm 1mm; }

/* details */
.dgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6mm 3mm; margin-bottom: 3mm; }
.dgrid > div { border-bottom: 0.5pt solid var(--line); min-height: 7mm; }
.box.txt .pre { white-space: pre-wrap; min-height: 22mm; font-size: 8.6pt; }

@page { size: A4; margin: 0; }
@media print {
  .sheet .page { margin: 0; box-shadow: none; page-break-after: always; break-after: page; min-height: 0; }
  .sheet .page:last-child { page-break-after: auto; break-after: auto; }
  .sh-foot { position: static; margin-top: 3mm; }
}

.fsum p { margin-bottom: 0.9mm; font-size: 8pt; }
.scline { display: flex; flex-wrap: wrap; gap: 1mm 5mm; font-size: 8pt; margin-bottom: 1mm; }
.exrow { display: flex; gap: 3mm; align-items: center; }
.exrow .ex { display: inline-flex; align-items: center; gap: 0.8mm; font-size: 8pt; }
.exrow .ex i { width: 3mm; height: 3mm; border: 0.7pt solid var(--ink); display: inline-block; }
.exh .fine { margin-top: 0.6mm; }
.logent { border-bottom: 0.6pt solid var(--line); padding: 1.5mm 0 2mm; break-inside: avoid; }
.logent .pre { white-space: pre-wrap; font-size: 8.6pt; }
.logent.blank .lines { height: 32mm; background: repeating-linear-gradient(transparent, transparent 6.5mm, #d9d3c8 6.5mm, #d9d3c8 6.8mm); }
.tips ul, .tips ol { margin: 0 0 1mm 5mm; padding: 0; font-size: 9pt; line-height: 1.4; }
.tips li { margin-bottom: 1.1mm; break-inside: avoid; }
.feat .chosen { background: var(--fill); border-radius: 1mm; padding: 0.6mm 1.4mm; font-size: 8pt; }

/* ---------------------------------------------------------------- phone screens: reflowed, larger sheet (print stays A4) */
@media screen and (max-width: 760px) {
  .sheet .page { width: auto; min-height: 0; padding: 4mm 3.5mm 5mm; margin: 0 0 4mm; zoom: 1.5; }
  .sh-head { grid-template-columns: 1fr; gap: 1.5mm; }
  .sh-meta { grid-template-columns: 1fr 1fr; }
  .vitals { grid-template-columns: repeat(3, 1fr); }
  .vitals .vt.hp { grid-column: 1 / -1; }
  .p1grid, .grid2 { grid-template-columns: 1fr; }
  .cols, .spl { column-count: 1; columns: 1; }
  .dgrid { grid-template-columns: 1fr 1fr; }
  .sh-foot { position: static; margin-top: 2mm; }
  .tbl { display: block; overflow-x: auto; }
  .etable { display: block; overflow-x: auto; }
  .scs { flex-wrap: wrap; gap: 1mm 4mm; }
  .scs > b:first-child { min-width: 0; }
}