/* sheet.css — the art + mechanics character sheet (WFBuilderSheet). SHARED by the offline builder
 * (builder.html) and the in-app "Print sheet" export (index.html), so the printed artifact looks
 * identical wherever it is produced. Loaded alongside each page's own chrome CSS.
 *
 * Hidden entirely until `body.printing` is set (by the builder's Print button or the app's Print
 * sheet action), then it replaces the page. The body-class swap — rather than only @media print —
 * means the markup is inspectable on screen while developing, and it lets `afterprint` restore the
 * page whether the user printed or cancelled.
 *
 * COLOURS ARE FORCED LIGHT, deliberately. The app is a dark theme; a dark sheet would print as a
 * solid black page or, more likely, get its backgrounds silently dropped by the browser — handing
 * the player a sheet with invisible rules.
 */

.builder-sheet { display: none; }

body.printing > *:not(.builder-sheet) { display: none !important; }

body.printing .builder-sheet {
  display: block;
  background: #fff;
  color: #111;
}

.sheet {
  max-width: 7.5in;
  margin: 0 auto;
  padding: 0.5in;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.4;
}

.sheet-head {
  border-bottom: 2px solid #111;
  padding-bottom: 0.4rem;
  margin-bottom: 0.9rem;
}

/* Header: portrait art slot beside the identity text. The portrait is the character's `portrait`-
 * role image in the app; the offline builder (no auth) shows a monogram. Fixed square so the
 * layout is stable whether or not art exists. */
.sheet-head-row { display: flex; gap: 0.8rem; align-items: flex-start; }
/* Portrait-oriented frame (taller than wide) — matches the in-app avatar shape and shows more of a
   standing figure than a square would. */
.sheet-portrait {
  flex: none; width: 1.1in; height: 1.4in;
  border: 1px solid #111; border-radius: 8px; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center; background: #f2efe9;
}
.sheet-portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.sheet-portrait-mono { font-size: 2.2rem; font-weight: bold; color: #6b6257; }
.sheet-head-text { min-width: 0; }
.sheet-name { margin: 0; font-size: 1.7rem; }
.sheet-subhead { margin: 0.2rem 0 0; font-size: 1rem; font-style: italic; }
.sheet-align { margin: 0.1rem 0 0; font-size: 0.8rem; opacity: 0.75; }
.sheet-oneline { margin: 0.25rem 0 0; font-size: 0.9rem; font-style: italic; opacity: 0.9; }
/* Fiction block — concept / ties / premise (the party-cohesion dynamic) */
.sheet-story { margin: 0.5rem 0 0; padding: 0.4rem 0.55rem; background: #f6f3ea; border: 1px solid #d8cfba; border-radius: 4px; break-inside: avoid; }
.sheet-story-line { margin: 0.1rem 0; font-size: 0.85rem; line-height: 1.35; }
.sheet-story-label { font-weight: 700; }

.sheet-abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.sheet-abil {
  border: 1px solid #111;
  border-radius: 4px;
  padding: 0.35rem 0.2rem;
  text-align: center;
}

.sheet-abil-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; }
.sheet-abil-score { font-size: 1.45rem; font-weight: bold; line-height: 1.1; }
.sheet-abil-mod { font-size: 0.95rem; }
.sheet-abil-save { font-size: 0.62rem; margin-top: 0.15rem; border-top: 1px solid #bbb; padding-top: 0.15rem; }
.sheet-abil-save.is-prof { font-weight: bold; }

/* Two columns that reflow to one on narrow paper. `break-inside: avoid` keeps a block from being
 * split across a page boundary — a spell list cut in half mid-column is the classic printed-sheet
 * failure. */
.sheet-cols { columns: 2; column-gap: 1.2rem; }

.sheet-block {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
}

.sheet-block-title {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #111;
  padding-bottom: 0.1rem;
}

.sheet-kv-grid { display: grid; gap: 0.15rem; }
.sheet-kv { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; }
.sheet-kv-label { opacity: 0.75; }
.sheet-kv-value { font-weight: bold; }

.sheet-list { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; }
.sheet-note { margin: 0.3rem 0 0; font-size: 0.78rem; font-style: italic; }
.sheet-slots { margin: 0.15rem 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sheet-spell-line,
.sheet-prof-line { margin: 0.2rem 0; font-size: 0.82rem; }

.sheet-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sheet-table th { text-align: left; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; }
.sheet-table th,
.sheet-table td { padding: 0.12rem 0.3rem 0.12rem 0; border-bottom: 1px solid #ddd; }

/* Saves & Skills: a compact two-per-row stat grid with a proficiency mark, name, and total.
 * ● proficient · ◆ expertise · ○ neither — the same vocabulary the live sheet uses. */
.sheet-stat-grid { display: grid; grid-template-columns: 1fr; gap: 0.05rem; }
.sheet-stat-grid--skills { grid-template-columns: 1fr 1fr; column-gap: 0.7rem; }
.sheet-stat-row { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.8rem; }
.sheet-stat-row.is-prof, .sheet-stat-row.is-exp { font-weight: bold; }
.sheet-stat-mark { flex: none; width: 0.9em; text-align: center; font-size: 0.7rem; }
.sheet-stat-row.is-exp .sheet-stat-mark { color: #8a5a00; }
.sheet-stat-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-stat-val { flex: none; font-variant-numeric: tabular-nums; }

/* A warning row under an attack (e.g. a Monk's unarmed strike, whose Martial Arts die this dataset
 * does not carry yet). */
.sheet-table-note td { font-size: 0.68rem; font-style: italic; color: #8a5a00; border-bottom: none; padding-top: 0.05rem; }

/* Full-caster spell section spans both columns so a long spell list gets a real page presence;
 * half-casters keep it inline in the flow. */
.sheet--full .sheet-block--spells { column-span: all; }

/* Optional gallery strip (in-app only). */
.sheet-gallery { column-span: all; display: flex; gap: 0.3rem; margin-top: 0.6rem; flex-wrap: wrap; }
.sheet-gallery-img { width: 1in; height: 1in; object-fit: cover; border: 1px solid #111; border-radius: 4px; }

/* Region art — a gallery image pinned to a specific sheet section. Sits at the foot of its section,
   sized to the column, and prints with the sheet. break-inside avoids splitting across a page. */
.sheet-region-art { margin: 0.4rem 0 0; padding: 0; break-inside: avoid; }
/* contain (not cover) so the WHOLE image fits inside the frame — cover cropped the edges off. A neutral
   backdrop fills any letterbox gap left by the image's aspect ratio. */
.sheet-region-art-img { display: block; width: 100%; max-height: 2.6in; object-fit: contain; background: #f2efe6; border: 1px solid #111; border-radius: 4px; }

.sheet-foot {
  column-span: all;
  margin-top: 1rem;
  padding-top: 0.4rem;
  border-top: 1px solid #111;
  font-size: 0.62rem;
  opacity: 0.75;
}

@media print {
  @page { margin: 0.4in; }
  .sheet { padding: 0; max-width: none; }
  /* Belt and braces: if anything reaches the printer outside body.printing, hide it there too. */
  body:not(.printing) .builder-sheet { display: none; }
}