/* Character builder (see _system/character-generator-design.md). Uses the universe site's own colour
   variables where they exist, with safe fallbacks, so each universe's theme carries through. */
.cb-root { --cb-ink: #1b1b1f; --cb-muted: #5d6068; --cb-line: rgba(0, 0, 0, 0.16); --cb-accent: var(--us-accent, #b9852b); --cb-bg: #ffffff; --cb-soft: rgba(0, 0, 0, 0.045); max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; font-size: 16px; line-height: 1.45; }
.cb-intro, .cb-ui, .cb-sheetwrap { background: #fbfaf6; color: var(--cb-ink); padding: 18px 18px 22px; border-radius: 10px; }
.cb-sheetwrap { margin-top: 28px; }
.cb-root * { box-sizing: border-box; }
.cb-intro h1 { margin: 0 0 6px; }
.cb-intro { margin-bottom: 14px; }
.cb-intro p { margin: 0; max-width: 70ch; color: var(--cb-muted); }
.cb-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding: 10px 14px; margin: 0 0 14px; background: var(--cb-bg); border: 1px solid var(--cb-line); border-bottom: 3px solid var(--cb-accent); border-radius: 6px; font-weight: 600; }
.cb-bar strong { font-size: 1.35em; }
.cb-xp.is-over strong, .cb-warn { color: #a3261c; }
.cb-ok { color: #1d6b33; }
.cb-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; }
.cb-step { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--cb-line); border-radius: 999px; background: var(--cb-bg); color: inherit; font: inherit; cursor: pointer; }
.cb-step.is-active { background: var(--cb-accent); border-color: var(--cb-accent); color: #fff; font-weight: 700; }
.cb-stepno { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cb-soft); font-size: 0.8em; }
.cb-step.is-active .cb-stepno { background: rgba(255, 255, 255, 0.25); }
.cb-main h2 { margin: 6px 0 4px; }
.cb-main h3 { margin: 18px 0 6px; }
.cb-help { color: var(--cb-muted); max-width: 72ch; margin: 0 0 12px; }
.cb-sexrow { display: flex; gap: 8px; margin: 0 0 14px; }
.cb-chip { padding: 8px 18px; border: 1px solid var(--cb-line); border-radius: 999px; background: var(--cb-bg); font: inherit; cursor: pointer; color: inherit; }
.cb-chip.is-on { background: var(--cb-ink); color: #fff; border-color: var(--cb-ink); }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cb-grid-tight { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.cb-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px; background: var(--cb-bg); border: 2px solid var(--cb-line); border-radius: 8px; font: inherit; color: inherit; cursor: pointer; }
.cb-card:hover { border-color: var(--cb-accent); }
.cb-card.is-on { border-color: var(--cb-accent); box-shadow: 0 0 0 3px rgba(185, 133, 43, 0.28); }
.cb-card img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: var(--cb-soft); }
.cb-card-name { font-weight: 700; font-size: 1.05em; }
.cb-card-meta { color: var(--cb-muted); font-size: 0.9em; }
.cb-card-text { font-size: 0.9em; color: var(--cb-ink); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.cb-detail { margin: 16px 0; padding: 12px 14px; background: var(--cb-soft); border-radius: 8px; }
.cb-detail h3 { margin-top: 0; }
.cb-btn { display: inline-block; padding: 8px 14px; border: 1px solid var(--cb-line); border-radius: 6px; background: var(--cb-bg); color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.cb-btn:hover:not(:disabled) { border-color: var(--cb-accent); }
.cb-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cb-btn.cb-primary { background: var(--cb-accent); border-color: var(--cb-accent); color: #fff; font-weight: 700; }
.cb-btn.cb-danger { color: #a3261c; }
.cb-btn.cb-sm { padding: 3px 10px; min-width: 34px; }
.cb-pager { display: flex; justify-content: space-between; margin: 24px 0 0; }
.cb-swaps { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 12px; }
.cb-swap select { padding: 4px 8px; font: inherit; }
.cb-charrow, .cb-skillrow, .cb-gearrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 6px 0; border-bottom: 1px solid var(--cb-line); }
.cb-charname, .cb-skillname, .cb-gearname { flex: 1 1 200px; }
.cb-charval { min-width: 28px; text-align: center; font-weight: 700; font-size: 1.15em; }
.cb-abbr { color: var(--cb-muted); font-size: 0.8em; }
.cb-cost { color: var(--cb-muted); font-size: 0.9em; min-width: 90px; }
.cb-star { color: var(--cb-accent); margin-right: 4px; }
.cb-pips { display: inline-flex; gap: 3px; }
.cb-pip { width: 13px; height: 13px; border: 1.5px solid var(--cb-ink); border-radius: 50%; background: #fff; }
.cb-pip.is-on { background: var(--cb-ink); }
.cb-pip.is-locked { opacity: 0.3; }
.cb-skillrow.is-prof { background: rgba(185, 133, 43, 0.08); }
.cb-derived { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.cb-derived dt { color: var(--cb-muted); } .cb-derived dd { margin: 0; font-weight: 700; }
.cb-talent { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cb-line); }
.cb-talent.is-locked { opacity: 0.6; }
.cb-talent.is-on { background: rgba(185, 133, 43, 0.1); }
.cb-talentbody { display: flex; flex-direction: column; gap: 2px; }
.cb-check { flex: 0 0 auto; align-self: flex-start; padding: 5px 10px; border: 1px solid var(--cb-line); border-radius: 6px; background: var(--cb-bg); font: inherit; cursor: pointer; color: inherit; }
.cb-talent.is-on .cb-check { background: var(--cb-accent); color: #fff; border-color: var(--cb-accent); }
.cb-check:disabled { cursor: not-allowed; }
.cb-why { color: #a3261c; font-size: 0.88em; }
.cb-gearcat { margin: 8px 0; border: 1px solid var(--cb-line); border-radius: 6px; padding: 6px 12px; }
.cb-gearcat summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.cb-problems { margin: 14px 0; padding: 10px 14px 10px 30px; background: #fdecea; border-left: 4px solid #a3261c; border-radius: 4px; color: #6e1a13; }
.cb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; margin: 0 0 12px; }
.cb-field { display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
.cb-field input, .cb-field textarea, .cb-prompt { padding: 7px 9px; border: 1px solid var(--cb-line); border-radius: 6px; font: inherit; font-weight: 400; width: 100%; }
.cb-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.cb-hidden { position: absolute; left: -9999px; }
.cb-actions { margin: 20px 0 6px; }
.cb-muted { color: var(--cb-muted); }

/* the sheet: shown under the steps, and the only thing that prints */
.cb-sheettitle { margin: 0 0 10px; }
.cb-sheetholder { overflow-x: auto; }
.cb-sheet { display: flex; flex-direction: column; gap: 18px; }
.cb-page { width: 7.9in; min-height: 10.3in; padding: 0.35in; background: #fff; color: #111; border: 1px solid #bbb; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); font-size: 11px; line-height: 1.3; }
.cb-shead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--cb-accent); margin-bottom: 10px; }
.cb-shead h1 { margin: 0; font-size: 22px; }
.cb-sunivs { color: #555; font-size: 12px; }
.cb-sid { display: grid; grid-template-columns: 1.6in 1fr; gap: 12px; margin-bottom: 10px; }
.cb-sportrait { width: 1.6in; height: 2.4in; border: 1.5px solid #111; background: #f1f1f1; display: grid; place-items: center; overflow: hidden; color: #888; }
.cb-sportrait img { width: 100%; height: 100%; object-fit: cover; }
.cb-sfields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-content: start; }
.cb-sbox { display: flex; flex-direction: column; border-bottom: 1px solid #111; min-height: 0.42in; }
.cb-slabel { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: #555; }
.cb-svalue { font-size: 13px; font-weight: 700; padding-top: 2px; }
.cb-schars, .cb-sder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0; }
.cb-sder { grid-template-columns: repeat(7, 1fr); }
.cb-sder .cb-slabel { font-size: 8px; }
.cb-sder .cb-sbig { font-size: 20px; }
.cb-sder .cb-spool { min-height: 24px; display: flex; align-items: center; justify-content: center; }
.cb-sder .cb-dicerow { font-size: 11px; gap: 1px; }
.cb-schar { border: 1.5px solid #111; border-radius: 6px; padding: 4px 6px; text-align: center; }
.cb-sbig { display: block; font-size: 22px; font-weight: 800; }
.cb-stwo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cb-stwo h3 { margin: 6px 0 4px; font-size: 13px; border-bottom: 1.5px solid #111; }
.cb-srow { display: grid; grid-template-columns: 12px 1fr 34px auto; gap: 4px; align-items: center; padding: 1.5px 0; border-bottom: 1px dotted #aaa; }
.cb-sstar { color: var(--cb-accent); font-size: 10px; }
.cb-sabbr { color: #666; font-size: 9px; }
.cb-ttrow { padding: 3px 0; border-bottom: 1px dotted #aaa; }
.cb-snotes { white-space: pre-wrap; }

@media (max-width: 700px) { .cb-page { transform-origin: top left; } }

@media print {
  @page { size: Letter; margin: 0.3in; }
  .cb-ui, .cb-intro, .cb-sheettitle, .us-nav, .us-footer, .us-skip, .us-notice { display: none !important; }
  body.universe-site, html { background: #fff !important; }
  .cb-root { padding: 0; max-width: none; }
  .cb-sheetwrap { margin: 0; padding: 0; background: none; }
  .cb-sheetholder { overflow: visible; }
  .cb-sheet { display: block; }
  .cb-page { width: 100%; min-height: 0; height: 10.2in; padding: 0; border: 0; box-shadow: none; break-after: page; page-break-after: always; overflow: hidden; }
  .cb-page:last-child { break-after: auto; page-break-after: auto; }
  .cb-pip, .cb-shead, .cb-schar, .cb-sportrait { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.cb-spool { font-size: 12px !important; line-height: 1.15; padding-top: 2px; }
.cb-dicerow { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: center; font-size: 20px; }
.cb-dicerow .dice.sm { font-size: 14px; }
.cb-smods h3 { margin: 0 0 4px; }
.cb-smods { margin-bottom: 8px; }
@media print { .dice::before, .dice::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

.cb-stable { width: 100%; border-collapse: collapse; font-size: 9.5px; margin: 0 0 6px; }
.cb-stable th { text-align: left; font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1.5px solid #111; padding: 2px 3px; }
.cb-stable td { border-bottom: 1px dotted #aaa; padding: 2px 3px; vertical-align: top; }
.cb-stable tr.is-worn td { background: rgba(185, 133, 43, 0.14); font-weight: 600; }
.cb-stable .dice.sm { font-size: 11px; }

.cb-stwo.cb-swide { grid-template-columns: 1.7fr 1fr; }
.cb-card.is-locked { opacity: 0.45; cursor: not-allowed; }

/* Shared phone/tablet controls and character library. */
.cb-main > select, .cb-main > input { display:block; width:100%; max-width:100%; min-height:44px; padding:8px; font:inherit; margin:8px 0; }
.cb-field select { font:inherit; min-height:44px; max-width:100%; }
.cb-field input[type=checkbox] { width:24px; height:24px; }
.cb-main, .cb-library, .cb-field { min-width:0; }
.cb-save-error { padding:12px; background:#fff0e8; border:2px solid currentColor; }
@media(max-width:480px) { .cb-fields { grid-template-columns:minmax(0,1fr); } .cb-ui { padding:12px; } }

/* ---- Era look ----
   A generator data file may carry sheet.theme.vars (applied to .cb-root by character-builder.js). The rules
   below use only those variables, so each Era Book brings its own colours and fonts and no extra CSS. */
.cb-themed { --cb-bg: var(--cb-paper); font-family: var(--cb-body-font, inherit); }
.cb-themed .cb-intro, .cb-themed .cb-ui, .cb-themed .cb-sheetwrap { background: var(--cb-paper); color: var(--cb-ink); }
.cb-themed .cb-intro h1, .cb-themed .cb-ui h2, .cb-themed .cb-sheettitle { font-family: var(--cb-head-font, inherit); color: var(--cb-accent); font-weight: 400; letter-spacing: 0.02em; }
.cb-themed h3, .cb-themed .cb-step, .cb-themed .cb-card-name { font-family: var(--cb-sub-font, inherit); }
.cb-themed .cb-bar { background: var(--cb-buff); border-color: var(--cb-rule); border-bottom-color: var(--cb-banner); }
.cb-themed .cb-card { background: var(--cb-paper); border-color: var(--cb-rule); }
.cb-themed .cb-card:hover, .cb-themed .cb-card.is-on { border-color: var(--cb-banner); }
.cb-themed .cb-card.is-on { box-shadow: 0 0 0 3px rgba(203, 53, 38, 0.28); }
.cb-themed .cb-btn.cb-primary, .cb-themed .cb-step.is-active { background: var(--cb-banner); border-color: var(--cb-banner); }
.cb-themed .cb-detail { background: var(--cb-buff); }
.cb-themed .cb-page { background: var(--cb-paper); color: var(--cb-ink); border: 3px double var(--cb-accent); outline: 1px solid var(--cb-rule); outline-offset: -7px; font-family: var(--cb-body-font, inherit); }
.cb-themed .cb-shead { background: var(--cb-banner); color: var(--cb-paper); border-bottom: 0; padding: 5px 10px; align-items: center; }
.cb-themed .cb-shead h1 { font-family: var(--cb-head-font, inherit); font-weight: 400; letter-spacing: 0.06em; color: var(--cb-paper); }
.cb-themed .cb-sunivs { color: var(--cb-paper); font-family: var(--cb-sub-font, inherit); }
.cb-themed .cb-sportrait { border: 3px double var(--cb-ink); background: var(--cb-buff); }
.cb-themed .cb-sbox { border-bottom-color: var(--cb-rule); }
.cb-themed .cb-slabel { font-family: var(--cb-sub-font, inherit); color: var(--cb-rule); }
.cb-themed .cb-schar { border: 2px solid var(--cb-accent); background: var(--cb-buff); }
.cb-themed .cb-stwo h3 { font-family: var(--cb-sub-font, inherit); color: var(--cb-accent); border-bottom: 2px solid var(--cb-accent); }
.cb-themed .cb-stable th { background: var(--cb-accent); color: var(--cb-paper); border-bottom: 0; font-family: var(--cb-sub-font, inherit); }
.cb-themed .cb-stable tbody tr:nth-child(even) td { background: var(--cb-buff); }
.cb-themed .cb-stable td, .cb-themed .cb-srow, .cb-themed .cb-ttrow { border-bottom-color: var(--cb-rule); }
.cb-themed .cb-sstar { color: var(--cb-banner); }
@media print { .cb-themed .cb-page { outline: 1px solid var(--cb-rule); border: 3px double var(--cb-accent); height: 10.1in; } .cb-themed .cb-shead, .cb-themed .cb-stable th, .cb-themed .cb-schar, .cb-themed .cb-sportrait, .cb-themed .cb-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* The skill names on the sheet are roll buttons (aria-label "Roll <skill>"). Drawn as plain text so the sheet is as tall
   as before they existed: the browser's default button box added about 6px to each of 23 rows, which pushed the
   skills and talents past the page and out of the printed PDF. */
.cb-sheet .cb-sname button { all: unset; cursor: pointer; font: inherit; color: inherit; }
.cb-sheet .cb-sname button:hover, .cb-sheet .cb-sname button:focus-visible { text-decoration: underline; }
@media print { .cb-sheet .cb-sname button { cursor: default; text-decoration: none; } .cb-page { box-sizing: border-box; } }

/* Printing from the main-site layout (Tabler): its page wrapper adds half an inch above the sheet, which pushed page one
   past the paper and printed blank pages between the sheets. The sheet owns the whole printable area. */
@media print {
  body:has(.cb-root) .page-wrapper, body:has(.cb-root) .page-body, body:has(.cb-root) .page-body > .container-xl, body:has(.cb-root) .page-body > .container-xl > * { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  body:has(.cb-root) .navbar, body:has(.cb-root) footer, body:has(.cb-root) .footer { display: none !important; }
  .cb-themed .cb-page { height: 10in; padding: 0.14in 0.22in; box-sizing: border-box; }
  .cb-themed .cb-shead { margin: 0 0 8px; }
  .cb-themed .cb-sheetwrap, .cb-themed .cb-sheetholder { background: none; }
}

/* Long skill lists: two columns across the page; the talents then sit at the top of page two. */
.cb-sdense h3 { margin: 6px 0 4px; font-size: 13px; border-bottom: 1.5px solid #111; }
.cb-sskcols { column-count: 2; column-gap: 22px; }
.cb-sskcols .cb-srow { break-inside: avoid; }
.cb-sdensetalents { margin: 0 0 10px; }
.cb-themed .cb-sdense h3 { font-family: var(--cb-sub-font, inherit); color: var(--cb-accent); border-bottom: 2px solid var(--cb-accent); }
/* Print: a sheet page is as tall as its content (at least the paper), never clipped; a long page flows onto the next sheet. */
@media print {
  .cb-page { height: auto !important; min-height: 10.1in; overflow: visible !important; }
  .cb-page:not(:last-child) { break-after: page; page-break-after: always; }
  .cb-themed .cb-page { min-height: 10in; }
}