/* Character Forge — ink & brass theme
   Palette: #14161d (void), #1d212b (ink panel), #262b38 (raised panel),
            #c9a24a (brass), #8b3a3a (ember/danger), #e9e6da (parchment text),
            #6f7688 (muted) */

:root{
  --void:#14161d;
  --ink:#1d212b;
  --panel:#262b38;
  --panel-hi:#2f3545;
  --brass:#c9a24a;
  --brass-dim:#8a7233;
  --ember:#a3453f;
  --parchment:#e9e6da;
  --muted:#8992a6;
  --moss:#7fae6e;
  --line: rgba(201,162,74,0.25);
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; background:var(--void); color:var(--parchment);
  font-family:'Spectral', Georgia, serif; font-size:16px; line-height:1.55;
}

h1,h2,h3,h4{
  font-family:'Cinzel', Georgia, serif; font-weight:700; letter-spacing:.02em;
  color:var(--brass); margin:0 0 .6em;
}
h1{ font-size:1.9rem; } h2{ font-size:1.35rem; } h3{ font-size:1.05rem; text-transform:uppercase; letter-spacing:.12em; color:var(--parchment); }

a{ color:var(--brass); text-decoration:none; }
a:hover{ text-decoration:underline; }

.page{ max-width:980px; margin:0 auto; padding:0 20px 60px; }

.masthead{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 0 18px; border-bottom:1px solid var(--line);
  flex-wrap:wrap; gap:10px;
}
.brand{ display:flex; align-items:center; }
.brand-logo{ height:53px; width:auto; display:block; }
.active-character{ color:var(--muted); font-size:.95rem; }
.active-character strong{ color:var(--brass); }

/* Stepper: a brass-riveted ribbon of steps */
.stepper{
  display:flex; flex-wrap:wrap; gap:2px; margin:22px 0 30px;
  background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:6px;
}
.step{
  flex:1 1 auto; min-width:88px; display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:7px; color:var(--muted); font-size:.78rem;
}
.step-index{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--brass-dim);
  display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif;
  font-size:.7rem; color:var(--brass-dim); flex:none;
}
.step.is-done .step-index{ background:var(--brass-dim); color:var(--ink); border-color:var(--brass-dim); }
.step.is-current{ background:var(--panel); color:var(--parchment); }
.step.is-current .step-index{ background:var(--brass); border-color:var(--brass); color:var(--ink); }

.content{ padding-top:6px; }

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:26px 28px; margin-bottom:22px;
}
.card + .card{ margin-top:0; }

.lede{ color:var(--muted); margin-top:-8px; margin-bottom:22px; }

.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); }

.option{
  display:block; background:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; cursor:pointer; transition:border-color .15s, background .15s;
}
.option:hover{ border-color:var(--brass-dim); }
.option input[type=radio], .option input[type=checkbox]{ accent-color:var(--brass); margin-right:8px; }
.option.is-checked, .option:has(input:checked){ border-color:var(--brass); background:var(--panel-hi); }
.option.is-disabled{ opacity:.4; pointer-events:none; }
.option h4{ margin:0 0 4px; color:var(--parchment); font-family:'Spectral SC', serif; font-size:1.02rem; letter-spacing:.03em; }
.option p{ margin:0; color:var(--muted); font-size:.88rem; }
.tag{ display:inline-block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brass); border:1px solid var(--brass-dim); border-radius:20px; padding:1px 8px; }
.option .tag{ margin-top:6px; }

/* Equipped/Not Equipped status pills on the Weapons/Armor/Shield cards --
   same rounded-pill shape as .tag, filled red for Equipped (a clear
   "this is what you're carrying" signal) and outlined-only (no fill) for
   Not Equipped, which reads fine against this theme's dark background. */
.pill-equipped, .pill-not-equipped{
  display:inline-block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  border-radius:20px; padding:2px 10px; margin-bottom:10px;
}
.pill-equipped{ color:#fff; background:var(--ember); border:1px solid var(--ember); }
.pill-not-equipped{ color:#fff; background:transparent; border:1px solid #fff; }

.mod-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; font-size:.82rem; color:var(--muted); }
.mod-row span{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:2px 7px; }
.mod-row span.pos{ color:#7fbf7f; } .mod-row span.neg{ color:var(--ember); }

.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Equipment picker tables (step8-equipment, sheet/equipment): a hidden
   spacer cell used only below 640px to force a hard line-break between
   the info cells (name/cost/weight/ASF/check penalty) and the action
   cells (Qty/Give/Equipped) -- see the mobile block for how. Hidden here
   so it never renders as a stray empty column on desktop. */
.edit-equipment-table .mobile-break{ display:none; }
.edit-equipment-table .cell-qty{ max-width:100px; }
/* Override the generic input[type=number]{width:100%} -- inside an
   80-100px cell that left barely enough room for one digit alongside
   the browser's built-in spinner arrows. Wide enough for 2 digits +
   arrows comfortably. */
.cell-qty input.qty-input{ width:70px; padding:9px 6px; text-align:center; }
table{ width:100%; border-collapse:collapse; font-size:.92rem; }
th,td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
th{ color:var(--brass); font-family:'Cinzel',serif; font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
tr:last-child td{ border-bottom:none; }

input[type=text], input[type=number], select, textarea{
  width:100%; background:var(--ink); border:1px solid var(--line); color:var(--parchment);
  border-radius:7px; padding:9px 11px; font-family:inherit; font-size:1rem;
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--brass); outline-offset:1px; }
label{ display:block; font-size:.82rem; color:var(--muted); margin-bottom:5px; }
.field{ margin-bottom:16px; }
textarea{ min-height:110px; resize:vertical; }

.btn{
  display:inline-block; background:var(--brass); color:var(--void); border:none;
  font-family:'Cinzel',serif; font-weight:700; letter-spacing:.04em; font-size:.85rem;
  padding:12px 26px; border-radius:8px; cursor:pointer; text-transform:uppercase;
}
.btn:hover{ background:#d9b25e; }
.btn:disabled{ background:var(--brass-dim); color:var(--muted); cursor:not-allowed; }
.btn:disabled:hover{ background:var(--brass-dim); }
.btn.secondary{ background:transparent; color:var(--brass); border:1px solid var(--brass-dim); }
.btn.secondary:hover{ background:var(--panel-hi); }
.btn.danger{ background:transparent; color:var(--ember); border:1px solid var(--ember); }
.btn-row{ display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:12px; flex-wrap:wrap; }

/* Small secondary/utility buttons (Scrap Character, Equip toggles, etc.) --
   same compact look as their old inline-style padding, but with a real
   touch target instead of a ~20px-tall hit area on mobile. */
.btn-sm{ padding:6px 14px; font-size:.78rem; min-height:36px; display:inline-flex; align-items:center; }

.budget{
  display:flex; justify-content:space-between; align-items:center; background:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:10px 16px; margin-bottom:18px; font-size:.9rem;
}
.budget strong{ color:var(--brass); }
.budget.is-over strong{ color:var(--ember); }

/* Equipment pages: the cost/weight card doubles as a sticky Save bar --
   pins to the top of the viewport once scrolled past, so the totals and
   Save button stay reachable through a long equipment list. */
.sticky-budget{
  position:sticky; top:0; z-index:20; gap:12px; flex-wrap:wrap;
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
}
.sticky-budget .budget-figures{ flex:1 1 auto; }

/* Nav links (Back to sheet, Manage Magic Items) folded into the sticky
   budget bar itself so they stay reachable on scroll, same as the
   totals/Save button -- its own flex item, wraps its two buttons
   independently of the figures/weight/Save group. */
.budget-nav{ display:flex; gap:8px; flex-wrap:wrap; }

/* A validation/info message inside a sticky-budget card: forced onto its
   own full-width line below the figures/button row (flex-wrap:wrap above
   makes the flex:1 1 100% basis actually break the line) -- and simply
   absent, taking up zero space, whenever there's no message to show. */
.budget-message{ flex:1 1 100%; margin:10px 0 0; }

/* Generic sticky-card modifier: same pin-to-top/shadow treatment as
   .sticky-budget above, but with no flex layout of its own -- for cards
   whose content isn't a single row (e.g. a button row stacked over a
   multi-column stat grid). */
.sticky-card{
  position:sticky; top:0; z-index:20;
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
}

.pill-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pill{ background:var(--ink); border:1px solid var(--line); border-radius:20px; padding:4px 12px; font-size:.82rem; }

.notice{ border-left:3px solid var(--brass); background:var(--ink); padding:10px 14px; border-radius:0 8px 8px 0; margin-bottom:18px; font-size:.9rem; color:var(--muted); }
.notice.warn{ border-color:var(--ember); }
.notice.ok{ border-color:var(--moss); }

.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }

.char-list{ list-style:none; margin:0; padding:0; }
.char-list li{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 18px; border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:var(--ink);
}
.char-list .meta{ color:var(--muted); font-size:.85rem; }
.char-list .name{ color:var(--parchment); font-family:'Spectral SC', serif; font-size:1.05rem; }
.char-list .name.is-shared{ color:var(--moss); }
.char-list .actions{ display:flex; gap:8px; flex-wrap:wrap; }
.char-list .actions form{ display:inline; }
.share-row{ display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.share-row select{ width:auto; min-width:160px; }
.shared-line{ margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Characters/Parties tabs on the character list page */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.tab-btn{
  background:transparent; border:none; color:var(--muted); font-family:'Cinzel',serif;
  text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; padding:12px 20px;
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-btn:hover{ color:var(--parchment); }
.tab-btn.is-active{ color:var(--brass); border-bottom-color:var(--brass); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

/* Party accordion (Parties tab) */
.party-list{ list-style:none; margin:0; padding:0; }
.party-item{ border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:var(--ink); overflow:hidden; }
.party-head{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px 18px; cursor:pointer; flex-wrap:wrap;
}
.party-head:hover{ background:var(--panel-hi); }
.party-name{ color:var(--parchment); font-family:'Spectral SC', serif; font-size:1.05rem; }
.party-meta{ color:var(--muted); font-size:.85rem; margin-top:2px; }
.chevron{ color:var(--brass-dim); font-size:.8rem; transition:transform .15s; flex:none; }
.party-item.is-open .chevron{ transform:rotate(90deg); }
.party-detail{ display:none; border-top:1px solid var(--line); padding:20px 18px; background:var(--panel); }
.party-item.is-open .party-detail{ display:block; }
.party-detail h4{ margin:0 0 10px; color:var(--brass); font-family:'Cinzel',serif; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }

/* Collapsible equipment-category cards (step8-equipment, sheet/equipment)
   -- same accordion idiom as the party list above (clickable head, hidden
   body until .is-open, rotating .chevron), scoped separately since these
   cards use the plain .card shell rather than .party-item's own styling. */
.equip-category-head{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:10px; }
.equip-category-head .chevron{ font-size:1.4rem; }
.equip-category-body{ display:none; margin-top:16px; }
.equip-category.is-open .equip-category-body{ display:block; }
.equip-category.is-open .chevron{ transform:rotate(90deg); }

/* Per-category filter row (search box + optional type dropdown for
   Weapon/Armor), sitting at the top of .equip-category-body, above the
   table -- see static/equip-filters.js for the row-hiding logic. */
.equip-filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.equip-filter-row .equip-search{ flex:1 1 200px; }
.equip-filter-row .equip-type-filter{ flex:0 1 160px; }
.party-detail section{ margin-bottom:22px; }
.party-detail section:last-child{ margin-bottom:0; }

/* Collapsible spell-level cards (step2c/2d-spellbook/spells-known,
   levelup_spellbook/spells_known, sheet_spells_known,
   sheet_prepare_spells) -- same accordion idiom as the equipment
   category cards above (clickable head, hidden body until .is-open,
   rotating .chevron), scoped separately since a level's clickable head
   is sometimes the plain .card shell's own <h3> row and sometimes the
   existing .budget bar that already tracks that level's chosen count. */
.level-card-head{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:10px; }
.level-card-head .chevron{ font-size:1.4rem; }
.level-card-body{ display:none; margin-top:16px; }
.level-card.is-open .level-card-body{ display:block; }
.level-card.is-open .chevron{ transform:rotate(90deg); }

.roster{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.roster li{ background:var(--ink); border:1px solid var(--line); border-radius:20px; padding:5px 12px; font-size:.85rem; }

.invite-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
.invite-form .field{ flex:1 1 220px; margin-bottom:0; }

.mini-char-list{ list-style:none; margin:0; padding:0; }
.mini-char-list li{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:.9rem; flex-wrap:wrap; }
.mini-char-list li:last-child{ border-bottom:none; }
.mini-char-list .char-info{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.mini-char-list .owner{ color:var(--muted); font-size:.85rem; }

.sheet-header{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; align-items:flex-end; margin-bottom:10px; }
.sheet-header h1{ margin-bottom:0; }
.stat-block{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:18px 0; }
.stat{ background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:12px 8px; text-align:center; }
.stat .label{ font-size:.68rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.stat .score{ font-family:'Cinzel',serif; font-size:1.5rem; color:var(--parchment); margin:4px 0 0; }
.stat .mod{ color:var(--brass); font-size:.85rem; }

.colophon{ text-align:center; color:var(--muted); font-size:.78rem; padding-top:30px; border-top:1px solid var(--line); margin-top:40px; }

.tight-list{ margin:0; padding-left:18px; color:var(--muted); }
.tight-list li{ margin-bottom:4px; }
.tight-list li:last-child{ margin-bottom:0; }

.skills-columns{ align-items:start; }
.skills-table th, .skills-table td{ padding:4px 6px; font-size:.82rem; }

@media (max-width:640px){
  .stat-block{ grid-template-columns:repeat(3,1fr); }
  .stepper{ font-size:.68rem; }
  .page{ padding:0 12px 40px; }
  .card{ padding:16px 18px; }

  /* Sticky cost/weight/Save bar: force onto up to 3 lines -- the nav
     links (Back to sheet/Manage Magic Items, when present) alone on
     their own line, the You-have/Cost-this-session figures alone on the
     next, Total weight + the Save button together on the last --
     instead of squeezing everything onto one line and forcing the page
     to scroll sideways. .budget-nav and .budget-figures each get
     flex:1 1 100% (forcing their own line); .budget-weight is left at
     its default flex sizing so it wraps onto the same line as the
     button, which the margin-left:auto below then pins to the right
     edge of that line. margin-left:auto is scoped to the Save button
     specifically (a direct child of .sticky-budget) rather than every
     .btn, so it doesn't also drag the nav links' own buttons rightward. */
  .sticky-budget{
    flex-wrap:wrap; font-size:.78rem; padding:8px 12px;
  }
  .sticky-budget .budget-nav{ flex:1 1 100%; }
  .sticky-budget .budget-figures{ flex:1 1 100%; }
  .sticky-budget > .btn{ margin-left:auto; padding:8px 14px; font-size:.72rem; }

  /* Spell Almanac: 605 rows x 5 columns is too dense for a horizontal
     scroll wrapper to be pleasant on a phone -- re-lay each spell's
     existing <td>s into a 2-line "card" via CSS Grid instead. Line 1 =
     Name/Type/Descriptor, line 2 = School. Level(s) is dropped from
     this view entirely (the Level filter above the table still works). */
  #almanac-table thead{ display:none; }
  #almanac-table, #almanac-table tbody{ display:block; width:100%; }
  #almanac-table tr.spell-row{
    display:grid;
    grid-template-columns:1fr auto auto;
    grid-template-areas:"name type descriptor" "school school school";
    column-gap:8px; row-gap:2px; padding:10px 4px;
    border-bottom:1px solid var(--line);
  }
  #almanac-table tr.spell-row td{ border:none; padding:0; }
  #almanac-table tr.spell-row td:nth-child(1){ grid-area:name; font-weight:600; color:var(--parchment); }
  #almanac-table tr.spell-row td:nth-child(2){ grid-area:school; color:var(--muted); font-size:.85rem; }
  #almanac-table tr.spell-row td:nth-child(3){ display:none; }
  #almanac-table tr.spell-row td:nth-child(4){ grid-area:type; font-size:.8rem; text-align:right; }
  #almanac-table tr.spell-row td:nth-child(5){ grid-area:descriptor; font-size:.8rem; text-align:right; }
  #almanac-table tr.spell-detail{ display:block; }
  #almanac-table tr.spell-detail td{ display:block; width:100%; padding:8px 4px; }

  /* Gear/Equipment table: 2-line-per-item layout instead of a 6-column
     row that forces horizontal scrolling. Line 1 = item name + the
     Equipped status/toggle button; line 2 = Category/ASF/Check Penalty/
     Qty, each prefixed with a small label since there's no visible
     column header to read them against once thead is hidden. */
  table.equipment-table thead{ display:none; }
  table.equipment-table, table.equipment-table tbody{ display:block; width:100%; }
  table.equipment-table tr{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    column-gap:8px; row-gap:4px; padding:10px 4px;
    border-bottom:1px solid var(--line);
  }
  table.equipment-table tr:last-child{ border-bottom:none; }
  table.equipment-table td{ border:none; padding:0; }
  table.equipment-table td:nth-child(1){ grid-row:1; grid-column:1 / 5; font-weight:600; color:var(--parchment); }
  table.equipment-table td:nth-child(7){ grid-row:1; grid-column:5 / 6; text-align:right; }
  table.equipment-table td:nth-child(2),
  table.equipment-table td:nth-child(3),
  table.equipment-table td:nth-child(4),
  table.equipment-table td:nth-child(5),
  table.equipment-table td:nth-child(6){ grid-row:2; color:var(--muted); font-size:.8rem; }
  table.equipment-table td:nth-child(2){ grid-column:1; }
  table.equipment-table td:nth-child(3){ grid-column:2; }
  table.equipment-table td:nth-child(4){ grid-column:3; }
  table.equipment-table td:nth-child(5){ grid-column:4; }
  table.equipment-table td:nth-child(6){ grid-column:5; }
  [data-label]::before{ content: attr(data-label) ": "; color:var(--brass-dim); }

  /* Equipment picker tables (step8-equipment, sheet/equipment): these
     have a variable column count (Armor/Shield rows add ASF + Check
     Penalty columns the others don't have), so a fixed nth-child grid
     like the Gear table's above won't line up consistently. Instead,
     line 1 = item name/cost/weight(/ASF/check penalty), then a hidden
     .mobile-break spacer cell with flex-basis:100% forces a hard wrap,
     so line 2 = Qty/Give/Equipped together regardless of how much text
     line 1 needed. */
  table.edit-equipment-table thead{ display:none; }
  table.edit-equipment-table, table.edit-equipment-table tbody{ display:block; width:100%; }
  table.edit-equipment-table tr{
    display:flex; flex-wrap:wrap; align-items:center;
    column-gap:10px; row-gap:6px; padding:10px 4px;
    border-bottom:1px solid var(--line);
  }
  table.edit-equipment-table tr:last-child{ border-bottom:none; }
  table.edit-equipment-table td{ border:none; padding:0; }
  table.edit-equipment-table .cell-name{ flex:1 1 auto; font-weight:600; color:var(--parchment); }
  table.edit-equipment-table .cell-cost,
  table.edit-equipment-table .cell-weight,
  table.edit-equipment-table .cell-asf,
  table.edit-equipment-table .cell-checkpen{ color:var(--muted); font-size:.8rem; }
  table.edit-equipment-table .mobile-break{ display:block; flex-basis:100%; height:0; }
  /* cell-qty becomes its own small flex row (the "Qty: " ::before label,
     then the input) instead of the desktop max-width:80px block -- at
     that width the label text + a width:100% input didn't both fit on
     one line, so the input wrapped onto its own line below the label,
     which visually threw off Give/Equipped (siblings in the outer flex
     row) looking aligned with the label instead of the actual input. */
  table.edit-equipment-table .cell-qty{
    display:flex; align-items:center; gap:4px; max-width:none;
  }
  table.edit-equipment-table .cell-qty .qty-input{ width:64px; flex:none; }
  table.edit-equipment-table .cell-equipped{ margin-left:auto; }
}

@media (max-width:480px){
  /* The 15-step wizard ribbon wraps into several rows at this width if
     every step shows its full label -- collapse to numbered dots only,
     keeping just the current step's label as one piece of text context. */
  .step-label{ display:none; }
  .step.is-current .step-label{ display:inline; }
}

@media print{
  @page{ margin:0.4in; }
  .no-print, .masthead, .stepper, .colophon{ display:none !important; }
  html,body{ background:#fff; color:#000; font-size:10px; line-height:1.3; }
  .page{ max-width:100%; padding:0; }
  h1{ font-size:1.3rem; margin-bottom:.2em; }
  h3{ font-size:.78rem; margin-bottom:.4em; }
  h1,h2,h3,h4{ color:#000; }
  a{ color:#000; text-decoration:none; }
  .lede{ margin-top:0; margin-bottom:8px; }
  .card{ background:#fff; border:1px solid #999; border-radius:4px; padding:10px 12px; margin-bottom:10px; page-break-inside:avoid; }
  table{ font-size:.9em; }
  th,td{ padding:3px 6px; border-bottom:1px solid #ccc; }
  th{ color:#000; }
  .stat-block{ margin:10px 0; gap:6px; }
  .stat{ background:#fff; border:1px solid #999; padding:6px 4px; }
  .stat .score, .stat .mod{ color:#000; }
  .stat .score{ font-size:1.1rem; margin-top:2px; }
  .tag{ border-color:#999; color:#000; padding:0 5px; }
  input[type=text], input[type=number]{ background:#fff; border:1px solid #999; color:#000; padding:4px 6px; }
  .field{ margin-bottom:0; }
  .grid{ gap:8px; }

  /* Force the sheet onto three pages: page 1 = identity/abilities/combat/
     traits/proficiencies/languages; page 2 = skills+feats; page 3 =
     equipment/money/backstory. */
  .print-break{ break-before:page; page-break-before:always; }
}