/* ============================================================
   The Shadow Over Aldermere — shared character-sheet styles
   ------------------------------------------------------------
   ONE stylesheet for all six sheets. Each sheet is two pages:
   a front "play side" and a back "reference side".

   HOW TO EDIT: most look-and-feel lives in the :root variables
   just below. Change a colour or size there and it updates
   everywhere. Per-character text lives in each .html file.
   ============================================================ */

/* ---------- 1. Fonts (downloaded locally, work offline) ---------- */
@font-face {
  font-family: 'Cinzel';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/cinzel.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/atkinson-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/atkinson-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/atkinson-italic.woff2') format('woff2');
}

/* ---------- 2. Tokens (colours + sizes) ---------- */
:root {
  --ink: #1a1a1a;
  --paper: #ffffff;
  --offense: #8a2e2e;      /* red: attacks and damage */
  --support: #2f6b43;      /* green: healing and support / defence */
  --control: #2a4d7a;      /* blue: control and special */
  --neutral: #3f3a36;      /* structural headers */
  --rule: #cbbfa8;         /* hairlines and box borders */
  --fill: #f4f1ea;         /* light box fill */
  --abilityFill: #efe7d6;  /* ability boxes */
  --cost-ink: #6b6760;

  /* Type scale (smaller now, to allow 0.75in page margins) */
  --fs-name: 24pt;
  --fs-big: 20pt;          /* vitals values */
  --fs-bar: 11.5pt;        /* coloured header bars */
  --fs-body: 11pt;         /* action descriptions, spells */
  --fs-small: 10pt;        /* captions, type column, skill numbers */

  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, 'Segoe UI', Arial, sans-serif;

  /* Letter (8.5x11in) minus 0.75in margins = 7.0 x 9.5in printable.
     Fill to a hair under 9.5 so a stray sub-pixel never spills a page. */
  --page-w: 7.0in;
  --page-h: 9.3in;

  /* Shared 5-column grid for the actions table. */
  --act-cols: 1.05fr 3.5fr 0.8fr 1.0fr 0.8fr;
}

body.tier-young { --fs-body: 10.5pt; }
body.tier-elder { --fs-body: 11.5pt; }

/* ---------- 3. Page + print scaffolding ---------- */
@page { size: Letter; margin: 0.75in; }

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.2;
  background: #d9d4cb;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.page {
  width: var(--page-w);
  min-height: var(--page-h);
  background: var(--paper);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  page-break-after: always;
  break-after: page;
}
.page:last-child { page-break-after: auto; break-after: auto; }
.fill { flex: 1 1 auto; min-height: 0; }

.page, .page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

@media screen {
  body { padding: 24px 0; }
  /* On screen, pad the page out to a full 8.5x11in sheet so the margins
     show as a white border (print gets these margins from @page instead).
     Content box stays 7.0 x 9.3in, identical to print, so nothing reflows. */
  .page {
    width: 8.5in;
    min-height: calc(var(--page-h) + 1.5in);
    padding: 0.75in;
    box-shadow: 0 3px 14px rgba(0,0,0,0.35);
    margin: 0 auto 28px;
  }
}
@media print {
  body { background: #fff; padding: 0; }
  .page { width: 100%; box-shadow: none; margin: 0; }
}

/* ---------- 4. Shared helpers ---------- */
.tiny { font-size: var(--fs-small); }
strong, b { font-weight: 700; }
em, i { font-style: italic; }

.section-bar {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-bar);
  color: #fff;
  background: var(--neutral);
  padding: 0.04in 0.12in;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.section-bar.offense { background: var(--offense); }
.section-bar.support { background: var(--support); }
.section-bar.control { background: var(--control); }

/* ---------- 5. Identity band (art LEFT, name, vitals RIGHT) ---------- */
.identity {
  display: flex;
  align-items: center;
  gap: 0.18in;
  border-bottom: 2px solid var(--neutral);
  padding-bottom: 0.08in;
  margin-bottom: 0.1in;
  flex: 0 0 auto;
}
.art-box {
  flex: 0 0 auto;
  width: 1.3in; height: 1.3in;
  border: 2px solid var(--neutral);
  background: var(--fill);
  overflow: hidden;
  position: relative;
}
.art-box img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
}
.art-box .art-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-small); color: #8a8275; text-transform: uppercase; letter-spacing: 1px;
}
.identity .who { flex: 1 1 auto; min-width: 0; }
.identity .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-name);
  line-height: 1.0;
  margin: 0;
}
.identity .subtitle { font-size: 13pt; font-weight: 700; margin-top: 0.05in; color: #333; }

/* Three small vitals boxes, on the right of the identity band. */
.vitals { display: flex; gap: 0.1in; flex: 0 0 auto; }
.vital {
  width: 1.05in;
  border: 1.5px solid var(--rule);
  background: var(--fill);
  text-align: center;
  padding: 0.05in 0.04in 0.06in;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.vital .label {
  font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.4px; color: #4a443d; line-height: 1.05;
}
.vital .num {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-big); line-height: 1.05; margin-top: 0.02in;
}
.vital .num.hp { font-family: var(--font-body); font-size: 17pt; white-space: nowrap; }
.vital .num .slash { color: #8a8275; }
/* Solid write-on line for current Hit Points. */
.hp-blank { display: inline-block; width: 0.42in; height: 0.15in; border-bottom: 2px solid var(--ink); vertical-align: -0.01in; }

/* ---------- 6. Abilities strip (6 across, spelled out) ---------- */
.abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.07in;
  margin-bottom: 0.07in;
  flex: 0 0 auto;
}
.ability {
  border: 1.5px solid var(--rule);
  background: var(--abilityFill);
  display: flex; align-items: baseline; justify-content: center; gap: 0.05in;
  padding: 0.045in 0.04in;
}
.ability .ab-name { font-size: 9.5pt; color: #4a443d; line-height: 1.05; }
.ability .ab-mod { font-family: var(--font-display); font-weight: 700; font-size: 15pt; line-height: 1.0; }

/* ---------- 7. Skills (all 18, in a grid) ---------- */
.skills { flex: 0 0 auto; margin-bottom: 0.07in; }
.skills h3, .block h3 {
  font-family: var(--font-display); font-size: 12pt; font-weight: 700; margin: 0 0 0.03in;
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.005in 0.2in;
  border: 1.5px solid var(--rule);
  padding: 0.05in 0.1in;
}
.skill { display: flex; justify-content: space-between; font-size: 9.5pt; padding: 0.003in 0; }
.skill .sk-num { font-weight: 400; }
.skill.trained .sk-num { font-weight: 700; }
.skill.trained .sk-name { font-weight: 700; }
.skills .hint { font-size: var(--fs-small); font-style: italic; color: #4a443d; margin-top: 0.04in; }

/* ---------- 8. Actions table (full width, 5 columns) ---------- */
.actions { display: flex; flex-direction: column; gap: 0.05in; }
.action-head {
  display: grid;
  grid-template-columns: var(--act-cols);
  gap: 0.1in;
  font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; color: #6b6760;
  padding: 0 0.02in 0.02in;
  border-bottom: 1px solid var(--rule);
}
.action-group { display: flex; flex-direction: column; }
.action-group .rows { padding-top: 0.01in; }
.action {
  display: grid;
  grid-template-columns: var(--act-cols);
  gap: 0.1in;
  align-items: baseline;
  padding: 0.028in 0.02in;
  line-height: 1.12;
  border-bottom: 1px dotted var(--rule);
}
.action:last-child { border-bottom: none; }
.action .a-name { font-weight: 700; }
.action .a-desc { }
.action .a-hit { font-weight: 700; white-space: nowrap; }
.action .a-dmg { font-weight: 700; }
.action .a-type { font-size: var(--fs-small); color: var(--cost-ink); font-style: italic; }

/* ---------- 9. Turn helper ---------- */
.turn-helper {
  border: 1.5px solid var(--neutral);
  background: var(--fill);
  padding: 0.05in 0.12in;
  margin-top: 0.07in;
  flex: 0 0 auto;
}
.turn-helper .th-title {
  font-family: var(--font-display); font-weight: 700; font-size: 12pt; margin-bottom: 0.02in;
}
.turn-helper .th-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.1in;
}
.turn-helper .th-item { font-size: var(--fs-body); }
.turn-helper .th-item .t-key { font-weight: 700; }
.turn-helper .th-item .t-sub { font-size: var(--fs-small); color: #4a443d; display: block; }

/* ---------- 10. Trackers (just show the boxes) ---------- */
.trackers {
  margin-top: 0.09in;
  border-top: 2px solid var(--neutral);
  padding-top: 0.07in;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.06in 0.3in;
  flex: 0 0 auto;
}
.tracker { display: flex; align-items: center; gap: 0.08in; }
.tracker .tk-label { font-size: var(--fs-small); font-weight: 700; }
.pips { display: inline-flex; gap: 0.05in; }
.pip { width: 0.16in; height: 0.16in; border: 1.5px solid var(--ink); border-radius: 50%; display: inline-block; }

/* ---------- 11. Bob's three big buttons ---------- */
.btn3-row { display: flex; flex-direction: column; gap: 0.12in; flex: 1 1 auto; }
.btn3 {
  flex: 1 1 0;
  border: 3px solid var(--neutral);
  border-radius: 6px;
  padding: 0.08in 0.16in 0.1in;
  display: flex; flex-direction: column; justify-content: center;
}
.btn3.offense { border-color: var(--offense); }
.btn3.support { border-color: var(--support); }
.btn3.control { border-color: var(--control); }
.btn3 .btn3-title {
  font-family: var(--font-display); font-weight: 700; font-size: 17pt; line-height: 1.05;
  color: #fff; padding: 0.05in 0.16in; margin: -0.08in -0.16in 0.08in; border-radius: 3px 3px 0 0;
}
.btn3.offense .btn3-title { background: var(--offense); }
.btn3.support .btn3-title { background: var(--support); }
.btn3.control .btn3-title { background: var(--control); }
.btn3 .b-line { font-size: var(--fs-body); padding: 0.025in 0; line-height: 1.2; }
.btn3 .b-line .b-name { font-weight: 700; }
.btn3 .b-line .roll { font-weight: 700; }
.also { margin-top: 0.1in; border: 1.5px dashed var(--rule); padding: 0.07in 0.12in; font-size: var(--fs-body); flex: 0 0 auto; }
.also .also-label { font-family: var(--font-display); font-weight: 700; font-size: 11pt; text-transform: uppercase; letter-spacing: 0.6px; color: #4a443d; }

/* ---------- 12. Highlighted feature box (e.g. Portent) ---------- */
.spotlight { border: 3px solid var(--control); background: #eef2f8; padding: 0.07in 0.14in; }
.spotlight .sl-title { font-family: var(--font-display); font-weight: 700; font-size: 14pt; color: var(--control); margin-bottom: 0.03in; }
.spotlight .sl-body { font-size: var(--fs-body); }

/* ---------- 13. Back page: reference sections ---------- */
.back .block { margin-bottom: 0.09in; }
.back .block .rows { padding-top: 0.03in; }
.def { padding: 0.03in 0; border-bottom: 1px dotted var(--rule); }
.def:last-child { border-bottom: none; }
.def .term { font-weight: 700; }
.def .gloss { font-size: var(--fs-body); line-height: 1.18; }

.inv-list { margin: 0.02in 0 0.06in; padding-left: 0.22in; columns: 2; column-gap: 0.2in; column-fill: balance; }
.inv-list li { padding: 0.012in 0; }
.coins { font-weight: 700; margin-top: 0.04in; }
.writeon { height: 0.28in; border-bottom: 1px solid var(--rule); }
/* Notes area that grows to fill the rest of the back page with ruled lines. */
.notes-block { display: flex; flex-direction: column; }
.notes-fill {
  flex: 1 1 auto; min-height: 0.5in; margin-top: 0.02in;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 0.32in, var(--rule) 0.32in, var(--rule) calc(0.32in + 1px));
}

.cols-2 { column-count: 2; column-gap: 0.28in; }
.cols-2 .def { break-inside: avoid; }

.vital, .ability, .action, .btn3, .def, .turn-helper, .spotlight, .skill { break-inside: avoid; }