/* ---------- design tokens: every colour, size and radius below comes from here; the themes only swap these ---------- */
:root {
  /* surfaces and text */
  /* palette: warm charcoal surfaces; every colour at about the same lightness (OKLCH L .66–.78) so none of them glows */
  --bg: #141210; --panel: #1e1b18; --panel-2: #282521; --topbar-bg: #0f0d0a;
  --input-bg: #110f0d; --code-bg: #0f0d0a; --stripe: #22201d;
  --line: #3b3732; --line-soft: #2e2b26;
  --text: #ebe7df; --text-soft: #d1cdc5; --muted: #a29e96;
  /* the accent (gold): primary actions, the active item, focus */
  --accent: #d9b165; --accent-ink: #241803; --accent-line: #695123;
  --tint: color-mix(in srgb, var(--accent) 12%, var(--panel)); --tint-strong: color-mix(in srgb, var(--accent) 22%, var(--panel));
  /* meaning (warn is copper, kept apart from the gold) */
  --ok: #87b188; --ok-strong: #98c598; --ok-line: #405e40; --ok-ink: #0d1a0d;
  --danger: #b54b41; --bad: #d87a6b;
  --warn: #de8f57; --warn-strong: #d97c50; --warn-line: #814c24;
  --info: #88accb; --info-line: #405b72;
  --magic: #b394c2; --magic-line: #624b6c;
  --fx-dis: var(--warn); --fx-adv: var(--ok); --fx-fail: var(--bad);   /* sheet values changed by a condition / exhaustion */
  /* lore (wine): rules blocks (entry names, stat labels, section rules, dice in rules text);
     act (azure, the same blue as info): secondary actions and whose turn it is */
  --lore: #c67886; --lore-line: #6d3c46;
  --act: var(--info); --act-ink: #0a1723; --act-line: var(--info-line);
  /* item rarity */
  --r-uncommon: var(--ok); --r-rare: var(--info); --r-veryrare: var(--magic); --r-legendary: var(--warn); --r-artifact: var(--bad);
  /* encounter difficulty */
  --diff-easy: var(--ok); --diff-medium: var(--accent); --diff-hard: var(--warn-strong); --diff-deadly: var(--bad);
  --shadow: 0 8px 30px rgba(0, 0, 0, .5); --shadow-sm: none;
  /* containers: a subtle edge; boxes inside them: a shade, no border; hover: a light wash; focus: the accent ring */
  --edge: var(--line-soft); --hover: color-mix(in srgb, var(--text) 7%, transparent); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  /* type scale */
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-body: 15px; --fs-lg: 16px;
  --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 28px; --fs-5xl: 32px;
  /* radii */
  --r-sm: 3px; --r: 4px; --r-md: 4px; --r-lg: 6px; --r-pill: 999px; --radius: var(--r-md);
  /* the top bar's bottom edge (darker than the containers' edge) */
  --edge-strong: #000;
  /* type: the system UI font for text, a condensed face for headings / labels / big numbers, a serif only for character names */
  --head: Bahnschrift, 'Roboto Condensed', 'Arial Narrow', system-ui, 'Segoe UI', sans-serif;
  --display: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  --sans: system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --top: 58px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-body)/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
/* numbers line up in tables, stat boxes and rolls */
table, .ab, .stat, .mv, .roll, .hp-now, .comp-hp, .counter, .ac-box, .pip, .slot-row, .party { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
h1 { margin: 0 0 16px; font-size: var(--fs-4xl); }
h2 { margin: 0 0 4px; font-size: var(--fs-3xl); }
h3 { margin: 22px 0 8px; font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: .04em; }
h4 { margin: 14px 0 6px; font-size: var(--fs-md); text-transform: uppercase; letter-spacing: .05em; }
/* small uppercase labels: the condensed face */
.nav-group, th, .ab span, .stat span, .play-title, .sf-group h4 { font-family: var(--head); }
/* big numbers */
.ab b, .stat b, .hp-now b, .roll-head b { font-family: var(--head); }
.char-title h1, .sheet h1, .char-card-main b, .brand-name { font-family: var(--display); font-weight: normal; letter-spacing: 0; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.bad { color: var(--bad); }
hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; width: 100%; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--top);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--topbar-bg); border-bottom: 1px solid var(--edge-strong); box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2xl); color: var(--text); white-space: nowrap; }
.brand .ic { color: var(--accent); width: 26px; height: 26px; }
/* line icons (icon() in util.js) */
.ic { width: 1.15em; height: 1.15em; vertical-align: -.22em; flex: none; }
.btn .ic, .link .ic { width: 1.05em; height: 1.05em; }
.data-status { flex: 1; color: var(--muted); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { display: flex; gap: 8px; align-items: center; }
.segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--panel-2); flex: none; }
.segmented button { padding: 5px 13px; white-space: nowrap; border: 0; border-radius: var(--r); background: none; color: var(--muted); font: inherit; font-size: var(--fs-base); cursor: pointer; }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.load-as { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--muted); white-space: nowrap; }
.load-as select { width: auto; padding: 6px 8px; font-size: var(--fs-md); }
.asi { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 6px; }
.asi .field { margin-bottom: 0; min-width: 180px; }

/* ---------- accounts ---------- */
body.logged-out .topbar { justify-content: space-between; }
.auth-card {
  max-width: 440px; margin: 40px auto; padding: 28px 32px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.auth-card h1 { font-size: var(--fs-3xl); }
.btn.wide { width: 100%; justify-content: center; padding: 10px; margin: 6px 0 14px; }
.code-input { text-transform: uppercase; letter-spacing: .12em; font-family: var(--mono); }
.form-error { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--panel)); border-radius: var(--r); padding: 8px 12px; }
.narrow-form { max-width: 380px; }
.user-btn { background: none; border: 1px solid transparent; color: var(--text); font: inherit; font-size: var(--fs-base); cursor: pointer; padding: 6px 10px; border-radius: var(--r); }
.user-btn:hover, .user-btn.active { border-color: var(--line); background: var(--panel-2); }
.nav-group { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 10px 10px 2px; }
.save-status.saving { color: var(--accent); }
.save-status.error { color: var(--bad); }
code { font-family: var(--mono); background: var(--input-bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 6px; }
code.big { font-size: var(--fs-lg); }
.copy-row { display: flex; gap: 8px; margin: 8px 0; }
.copy-row input { flex: 1; }
.toolbar select { width: auto; }
.local-load { align-items: center; }

/* ---------- data sources ---------- */
.section-title { margin-top: 34px; font-size: var(--fs-2xl); }
.add-source { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.add-source input { flex: 1; min-width: 260px; }
.add-source select { width: auto; }
.remote-picker h3 { margin-top: 0; }
.file-list { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.file-row { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: var(--fs-base); }
.file-row:hover { background: var(--panel-2); }
.file-row > span:first-of-type { flex: 1; word-break: break-all; }
.remote-summary { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 12px; }
td a { color: var(--accent); }

/* ---------- buttons & inputs ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 14px; border-radius: var(--r); border: 1px solid var(--line); transition: background .12s, border-color .12s, color .12s;
  background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-base); white-space: nowrap;
}
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 9%, var(--panel-2)); border-color: color-mix(in srgb, var(--text) 22%, var(--panel-2)); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, #fff 12%, var(--accent)); border-color: color-mix(in srgb, #fff 12%, var(--accent)); }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { background: var(--hover); border-color: transparent; color: var(--text); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, #000 12%, var(--danger)); border-color: color-mix(in srgb, #000 12%, var(--danger)); }
.btn.small { padding: 3px 10px; font-size: var(--fs-md); }
button.link { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; font: inherit; font-size: var(--fs-sm); }
button.link:hover { color: var(--accent); }

a { color: var(--accent); }
input[type=text], input[type=number], input[type=search], input[type=password], select, textarea {
  width: 100%; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--input-bg); color: var(--text); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
textarea { resize: vertical; }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: var(--fs-md); color: var(--muted); margin-bottom: 4px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-base); white-space: nowrap; }

/* ---------- layout: top navigation + page ---------- */
main { padding: 22px 32px 60px; max-width: 1560px; margin: 0 auto; }
.mainnav { display: flex; gap: 4px; flex: 1; }
/* sections: condensed uppercase labels, the active one underlined (no box) */
.mainnav button {
  padding: 8px 12px; border: 0; border-radius: 0; background: none; color: var(--muted);
  font: 600 var(--fs-base) var(--head); text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
}
.mainnav button:hover { color: var(--text); }
.mainnav button.active { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent); }
/* the ☰ menu (phones only; on wider screens the sections are buttons in the bar) */
.mainnav .nav-toggle, .mainnav .nav-phone { display: none; }
.nav-items { display: contents; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head h1 { margin: 0; }
.page-head .toolbar { margin: 0; }

/* the character page */
.char-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.char-title { flex: 1; min-width: 200px; }
.char-title h1 { margin: 0; font-size: var(--fs-4xl); }
.char-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.char-tabs .tab { margin-bottom: -1px; }
/* print / file / D&D Beyond / share on the right of the tab row (sheet only) */
.char-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 4px auto; padding-left: 8px; }
.char-tools .roll-hint { cursor: help; font-size: var(--fs-body); }
.char-tabs:has(.char-tools) .levelup-tab { margin-left: 8px; }
.step-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; }
.step {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-base);
}
.step:hover { border-color: var(--accent); }
.step.active { border-color: var(--accent); background: var(--tint); }
.step .num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted);
}
.step.done .num { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); font-weight: bold; }

/* My characters */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.char-card { background: var(--panel); border: 1px solid var(--edge); box-shadow: var(--shadow-sm); transition: border-color .12s; border-radius: var(--radius); display: flex; flex-direction: column; }
.char-card:hover { border-color: var(--line); }
.char-card-main { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px 10px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.char-card-main b { font-size: var(--fs-2xl); color: var(--text); }
.char-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 14px; }

/* Compendium-style list + detail */
.comp { display: grid; grid-template-columns: minmax(330px, 440px) minmax(0, 1fr); gap: 18px; align-items: start; }
.comp.wide-detail { grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); }
.comp-list { position: sticky; top: calc(var(--top) + 12px); display: flex; flex-direction: column; max-height: calc(100vh - var(--top) - 24px); min-width: 0; }
.list-tools { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; position: relative; }
.list-tools .search { flex: 1; min-width: 140px; }
.list-tools select { width: auto; font-size: var(--fs-md); padding: 6px 8px; }
.table-scroll { overflow: auto; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--panel); }
.comp-list .table-scroll { flex: 1; min-height: 0; }
.list-table { font-size: var(--fs-md); }
.list-table th { position: sticky; top: 0; background: var(--panel-2); z-index: 1; white-space: nowrap; }
.list-table th.sortable { cursor: pointer; user-select: none; }
.list-table th.sortable:hover { color: var(--text); }
.list-table td { padding: 5px 10px; border-color: var(--line-soft); }
.list-table tr[data-action] { cursor: pointer; }
.list-table tbody tr:hover td { background: var(--panel-2); }
.list-table tr.active td { background: var(--tint-strong); }
.list-table td.name { font-weight: 600; }
.ed-badge { display: inline-block; font-size: var(--fs-xs); padding: 0 5px; border-radius: var(--r-md); border: 1px solid var(--line); color: var(--muted); vertical-align: 1px; }
.ed-badge.ed-2024 { border-color: var(--info-line); color: var(--info); }
.ed-badge.ed-2014 { border-color: var(--accent-line); color: var(--accent); }
.comp-detail { background: var(--panel); border: 1px solid var(--edge); box-shadow: var(--shadow-sm); border-radius: var(--radius); padding: 20px 24px; min-width: 0; }
.comp-detail pre { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-sm); background: var(--code-bg); padding: 10px; border-radius: var(--r); max-height: 500px; overflow: auto; }
.detail-head h2 { font-size: var(--fs-4xl); }
.detail-head p { margin-bottom: 12px; }
.stat-table { width: auto; min-width: 50%; margin: 6px 0 14px; font-size: var(--fs-base); }
.stat-table th { color: var(--muted); font-size: var(--fs-md); padding: 5px 16px 5px 0; vertical-align: top; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
.stat-table td { padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.collapsible-group { margin: 12px 0; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.group-head h3 { margin: 8px 0; }
.choose-box { background: var(--tint); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 12px 16px; margin: 10px 0; }
.choose-box .field { margin-bottom: 6px; }
details.raw { margin-top: 18px; font-size: var(--fs-md); color: var(--muted); }
.cat-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.cat-tabs .more-cats { width: auto; font-size: var(--fs-base); padding: 7px 10px; }

/* classes: progression table + features */
.sub-buttons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; }
.chip { padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--edge); background: var(--panel-2); color: var(--text); font: inherit; font-size: var(--fs-md); cursor: pointer; }
.chip:hover { border-color: var(--line); background: color-mix(in srgb, var(--text) 10%, var(--panel-2)); }
.chip.active { background: var(--tint-strong); border-color: var(--accent); color: var(--text); font-weight: 600; }
.class-table { font-size: var(--fs-md); }
.rules-table { margin: 8px 0 14px; }
.rules-table caption { text-align: left; font-weight: 600; padding: 4px 0; }
.rules-table td { text-align: left; white-space: normal; }
.rules-list { margin: 6px 0 12px; padding-left: 20px; }
.rules-list li { margin: 3px 0; }
.rules-inset { border-left: 3px solid var(--accent); background: var(--panel-2); padding: 8px 14px; margin: 10px 0; border-radius: var(--r-sm); }
.class-table th { background: var(--panel-2); text-align: center; white-space: nowrap; padding: 5px 8px; border: 0; border-bottom: 1px solid var(--line); }
.class-table th.group { color: var(--text); font-weight: 600; }
.class-table td { text-align: center; padding: 4px 8px; border: 0; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.class-table .features-col { text-align: left; white-space: normal; min-width: 220px; }
.class-table tbody tr:nth-child(even) td { background: var(--stripe); }
.class-table tr.reached td { background: var(--tint) !important; }
.class-table a { color: var(--info); text-decoration: none; }
.class-table a.sub { color: var(--magic); font-style: italic; }
.class-table a:hover { text-decoration: underline; }
.class-body { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 24px; margin-top: 18px; align-items: start; }
.core-traits { background: var(--panel-2); border-radius: var(--radius); padding: 4px 16px 12px; font-size: var(--fs-base); }
.core-traits .stat-table { width: 100%; }
details.feature { border-bottom: 1px solid var(--line); padding: 8px 0; }
details.feature > summary { cursor: pointer; font-size: var(--fs-lg); font-weight: 600; }
details.feature .lvl { font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 6px; margin-right: 4px; vertical-align: 2px; }
details.feature p { margin: 8px 0; }

/* equipment step */
.equip-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.inventory td { padding: 5px 8px; }
.inventory tr.equipped td { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }
.inventory input.qty { width: 64px; padding: 4px 6px; }
.ac-box { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 12px 16px; margin: 14px 0; }
.ac-box .big { font-size: var(--fs-4xl); font-weight: 700; vertical-align: -3px; }
.warn-line { color: var(--warn); font-size: var(--fs-md); }
.warn-line::before { content: '⚠ '; }
.item-search { margin: 8px 0 18px; }
.item-results { margin-bottom: 8px; }
.item-results td { padding: 4px 8px; }
.sheet-inventory li.equipped { font-weight: 600; }

/* starting equipment choices */
.start-source { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; }
.start-source h4 { margin: 2px 0 8px; }
.start-fixed { font-size: var(--fs-base); }
.start-group { border-top: 1px solid var(--line-soft); padding: 8px 0; }
.start-opt { display: block; padding: 3px 6px; border-radius: var(--r); font-size: var(--fs-base); cursor: pointer; }
.start-opt.active { background: var(--tint); }
.start-opt input { vertical-align: -2px; }
.start-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 10px; margin: 6px 0 0 24px; }
.start-picks .field { margin-bottom: 6px; }

/* custom background, rule limits */
.custom-bg-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; margin-bottom: 10px; }
.check-grid .check { white-space: normal; }
.limits { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.counter b { color: var(--accent); }
.counter.done b { color: var(--ok); }
.counter.over b { color: var(--bad); }
.free-choices { display: flex; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); white-space: normal; }
.spell-row.is-full label { opacity: .55; }
.spell-tag { font-size: var(--fs-xs); padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.spell-tag.always { border-color: var(--ok-line); color: var(--ok); }
.spell-tag.arcanum { border-color: var(--magic-line); color: var(--magic); }
.spell-tag.innate, .spell-tag.known { border-color: var(--info-line); color: var(--info); }
.spellset { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.spellset select { width: auto; }
label.prep { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sheet-spells tr.unprepared td { opacity: .5; }
@media print { .sheet-spells tr.unprepared { display: none; } }

.notice { background: var(--tint); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; }
.empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 30px; text-align: center; color: var(--muted); }
.tag { display: inline-block; font-size: var(--fs-sm); padding: 1px 8px; border-radius: var(--r-pill); background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.tag.warn { border-color: var(--warn-line); color: var(--warn); }
.tag.legacy { font-size: var(--fs-xs); padding: 0 6px; }
.toolbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }

.step-nav { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* ---------- picker ---------- */
.picker { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.pick-list .search { margin-bottom: 8px; }
.cards { display: flex; flex-direction: column; gap: 3px; max-height: calc(100vh - 230px); overflow: auto; padding-right: 4px; }
.card {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  text-align: left; cursor: pointer; padding: 8px 12px; border-radius: var(--r);
  border: 1px solid transparent; background: var(--panel); color: var(--text); font: inherit;
}
.card:hover { border-color: var(--line); }
.card.active { border-color: var(--accent); background: var(--tint); }
.card small { color: var(--muted); font-size: var(--fs-xs); }
.pick-detail { background: var(--panel); border: 1px solid var(--edge); box-shadow: var(--shadow-sm); border-radius: var(--radius); padding: 20px 24px; min-width: 0; }
.pick-detail pre { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-sm); background: var(--code-bg); padding: 10px; border-radius: var(--r); max-height: 500px; overflow: auto; }
.subblock { border-left: 3px solid var(--accent); padding-left: 14px; margin: 10px 0 16px; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 14px 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }
details.trait { border-bottom: 1px solid var(--line); padding: 6px 0; }
details.trait summary, details summary { cursor: pointer; }
details.trait p { margin: 8px 0 4px 16px; color: var(--text-soft); }

/* ---------- abilities ---------- */
.tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
/* tabs: condensed uppercase labels, the active one underlined (no box) */
.tab {
  padding: 8px 14px; cursor: pointer; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--muted);
  font: 600 var(--fs-base) var(--head); text-transform: uppercase; letter-spacing: .04em;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; border-bottom: 1px solid var(--line); }
td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
td.c { text-align: center; }
td.total { font-weight: 600; font-size: var(--fs-lg); }
table.abil { max-width: 760px; margin-bottom: 12px; }
table.abil .ab-abbr { display: none; }
table.abil select, table.abil input { max-width: 110px; }
input.narrow { max-width: 80px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper b { width: 24px; text-align: center; font-size: var(--fs-lg); }
table.skills { max-width: 900px; }
table.skills tr.prof td:first-child b { color: var(--accent); }
table.library tr.current td { background: var(--tint); }
td.row-actions { text-align: right; }
td.row-actions > .btn { margin: 2px 0 2px 6px; }

/* ---------- equipment / spells ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.two-col.spells { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.filters { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; position: relative; }
.filters .search { flex: 1; min-width: 180px; }
.filters select { width: auto; }
.spell-list { max-height: calc(100vh - 280px); overflow: auto; border: 1px solid var(--edge); border-radius: var(--radius); }
.spell-row { padding: 7px 12px; border-bottom: 1px solid var(--line); }
.spell-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.spell-row details { margin-left: 24px; font-size: var(--fs-md); color: var(--muted); }
.spell-row details[open] { color: var(--text-soft); }
.spell-meta { color: var(--muted); font-size: var(--fs-md); margin-top: 6px; }
ul.chosen { padding-left: 18px; margin: 0; }

/* ---------- data browser ---------- */
.browser { display: grid; grid-template-columns: 210px 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.cat-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 200px); overflow: auto; }
.cat { display: flex; justify-content: space-between; gap: 6px; text-align: left; cursor: pointer; padding: 7px 10px; border: 0; border-radius: var(--r); background: none; color: var(--text); font: inherit; font-size: var(--fs-base); }
.cat:hover { background: var(--panel-2); }
.cat.active { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.cat.other { color: var(--muted); }
.cat .count { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- toast ---------- */
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: 520px;
  background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 12px 16px; box-shadow: var(--shadow); font-size: var(--fs-base);
}

/* ---------- character sheet (the app's own colours, as every other page) ---------- */
.sheet-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.sheet {
  background: var(--panel); color: var(--text); border: 1px solid var(--edge); box-shadow: var(--shadow-sm); border-radius: var(--r-lg); padding: 24px 28px; font-size: var(--fs-base);
}
.sheet h1 { font-size: var(--fs-5xl); margin: 0; }
.sheet h3 { font-size: var(--fs-lg); border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; margin-top: 20px; }
.sheet .muted, .sheet small { color: var(--muted); }
.sheet-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; }
.sheet-head p { margin: 4px 0 0; font-size: var(--fs-lg); }
.sheet dl.facts { margin: 0; }
.sheet dl.facts dt { color: var(--muted); }
.ab-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.ab { border: 1px solid transparent; border-radius: var(--r-md); text-align: center; padding: 6px 4px; background: var(--panel-2); }
.ab span { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.ab b { display: block; font-size: var(--fs-3xl); font-weight: 700; line-height: 1.2; }
.ab small { display: inline-block; border-radius: var(--r-pill); padding: 0 10px; background: var(--panel); color: var(--text); font-weight: 600; }
.stat-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; }
.stat { border: 1px solid transparent; border-radius: var(--r-md); text-align: center; padding: 6px 4px; background: var(--panel-2); }
.stat b { display: block; font-size: var(--fs-2xl); font-weight: 700; }
.stat span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.sheet-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 30px; }
ul.checklist { list-style: none; padding: 0; margin: 0; columns: 1; }
ul.checklist li { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
ul.checklist i { width: 11px; height: 11px; border: 1.5px solid var(--accent); border-radius: 50%; flex: none; }
ul.checklist li.on i { background: var(--accent); }
ul.checklist li.on { font-weight: 600; }
.sheet ul { padding-left: 18px; margin: 0 0 8px; }
.sheet table th { color: var(--muted); border-color: var(--line); }
.sheet table td { border-color: var(--line-soft); padding: 4px 10px; }

/* ---------- rolling dice on the sheet ---------- */
.sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.sheet-actions { align-items: center; }
button.rollable { font: inherit; color: inherit; cursor: pointer; }
button.rollable:not(.ab):not(.stat):not(.mv) { background: none; border: 0; padding: 0; text-align: inherit; }
.sheet .rollable:hover { color: var(--accent); }
ul.checklist button.rollable { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
button.ab.rollable, button.stat.rollable { width: 100%; text-align: center; transition: transform .08s, box-shadow .08s; }
button.ab.rollable:hover, button.stat.rollable:hover { box-shadow: 0 0 0 2px var(--accent); transform: translateY(-1px); }
button.stat.rollable b { text-decoration: underline dotted var(--muted); text-underline-offset: 4px; }
.roll-btn {
  font: inherit; font-size: var(--fs-md); cursor: pointer; padding: 1px 8px; margin: 1px 0; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); white-space: nowrap;
}
.roll-btn:hover { border-color: var(--accent-line); background: var(--tint); color: var(--accent); }
.save-dc { font-size: var(--fs-md); white-space: nowrap; color: var(--accent); }
.spell-rolls { white-space: normal; }
.small-note { font-size: var(--fs-sm); }

.dice-tray {
  position: sticky; box-shadow: var(--shadow-sm); top: calc(var(--top) + 16px); max-height: calc(100vh - var(--top) - 32px);
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.tray-head { display: flex; justify-content: space-between; align-items: baseline; }
.tray-head b { font-weight: 600; font-size: var(--fs-lg); }
.segmented.small { display: flex; }
.segmented.small button { flex: 1; padding: 5px 4px; font-size: var(--fs-sm); }
.quick-dice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.quick-dice .btn { justify-content: center; }
.custom-roll { display: flex; gap: 6px; }
.custom-roll input { padding: 5px 8px; }
.roll-log { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.roll { background: var(--panel-2); border: 1px solid transparent; border-radius: var(--r); padding: 7px 10px; font-size: var(--fs-md); }
.roll.latest { border-color: var(--accent); }
.roll-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.roll-head b { font-size: var(--fs-xl); font-weight: 700; }
.roll.latest .roll-head b { font-size: var(--fs-3xl); color: var(--accent); }
.roll-detail { color: var(--muted); font-size: var(--fs-sm); }
.roll-detail s { opacity: .6; }
.roll-note { font-weight: 600; margin-top: 2px; }
.roll.crit, .roll.fumble { border-left-width: 4px; }
.roll.crit { border-color: var(--ok); }
.roll.crit .roll-note, .roll.crit .roll-head b { color: var(--ok-strong); }
.roll.fumble { border-color: var(--danger); }
.roll.fumble .roll-note, .roll.fumble .roll-head b { color: var(--bad); }
.roll .btn { margin-top: 6px; }
/* reminders: a feature that can reroll or add to this roll */
.roll-help { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--line); font-size: var(--fs-sm); }
.roll-help .btn { margin: 0 0 0 4px; }
.tray-hint { font-size: var(--fs-xs); color: var(--muted); margin: 0; }

/* dice tray closed: a floating button, with the latest roll above it */
.dice-tray.closed {
  position: fixed; right: 16px; bottom: 16px; top: auto; z-index: 30; width: 280px; max-height: none;
  background: none; border: 0; padding: 0; align-items: flex-end; pointer-events: none;
}
.dice-tray.closed, .sheet-layout .dice-tray.closed { box-shadow: none; }
.dice-tray.closed > * { pointer-events: auto; }
.sheet-layout:has(.dice-tray.closed) { grid-template-columns: minmax(0, 1fr); }
.tray-toggle { box-shadow: var(--shadow); padding: 9px 18px; }
.tray-btns { display: flex; gap: 6px; align-items: center; justify-content: flex-end; max-width: 100%; }
.tray-last { box-shadow: var(--shadow); background: var(--panel); display: inline-flex; gap: 6px; align-items: baseline; max-width: 170px; padding: 7px 10px; }
.tray-last span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--muted); }
.tray-last b { color: var(--accent); font-size: var(--fs-lg); }
.tray-latest { position: relative; width: 100%; box-shadow: var(--shadow); border-radius: var(--r); }
.tray-latest .roll { background: var(--panel); padding-right: 26px; }
.tray-older { background: var(--panel); border-top: 1px solid var(--line); padding: 3px 26px 4px 10px; border-radius: 0 0 6px 6px; }
.roll-short { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); opacity: .85; line-height: 1.5; }
.roll-short span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roll-short small { font-weight: normal; }
.roll-log .roll:not(.latest) { font-size: var(--fs-md); }
.enc-conds { min-width: 180px; }
.cond-line { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-bottom: 3px; }
.cond-line select { width: auto; padding: 1px 4px; font-size: var(--fs-sm); }
.cond-tag { display: inline-flex; gap: 3px; align-items: center; }
.cond-tag .link { text-decoration: none; padding: 0 2px; }
.cond-tag.from-sheet { opacity: .8; font-style: italic; }
.enc-conds input[type=text] { font-size: var(--fs-md); padding: 2px 6px; }
a.pc-link { text-decoration: underline dotted; cursor: pointer; }
.tray-latest .close { position: absolute; top: 4px; right: 6px; font-size: var(--fs-lg); text-decoration: none; }
.tray-head span { display: flex; gap: 8px; }
/* the character's roll log in the dice tray, below this session's rolls */
.tray-log { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 6px; }
.tray-log-head { font-size: var(--fs-md); font-weight: 600; }
.tray-log .log-day { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); margin-top: 4px; }
.log-entry.crit b { color: var(--ok-strong); }
.log-entry.fumble b { color: var(--bad); }

/* filters (5etools style) */
.filter-btn { flex: none; }
.filter-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; width: min(560px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; max-height: 65vh; overflow: auto;
  box-shadow: var(--shadow); }
.filter-panel-head { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.filter-panel-head p { margin: 0; }
.filter-panel .filter-label { flex-basis: 100%; }
.filter-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line-soft); }
.filter-label { font-size: var(--fs-sm); color: var(--muted); min-width: 90px; }
.filter-group .chip { padding: 1px 9px; font-size: var(--fs-sm); }
.chip.f-inc { background: color-mix(in srgb, var(--ok) 22%, var(--panel)); border-color: var(--ok); color: var(--text); }
.chip.f-exc { background: color-mix(in srgb, var(--danger) 22%, var(--panel)); border-color: var(--danger); color: var(--text); text-decoration: line-through; }
details.trait.flash, details.feature.flash { animation: flash 2s ease-out; }
@keyframes flash { from { background: var(--tint-strong); } to { background: transparent; } }

/* sheet: features & traits */
.sheet-features { margin-top: 6px; }
.sf-group h4 { color: var(--muted); margin: 14px 0 4px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.sf-group { columns: 2 340px; column-gap: 30px; }
.sf-group h4 { column-span: all; }
.sheet-feature { break-inside: avoid; padding: 4px 0 6px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--top) + 12px); transition: background .4s; }
.roll-dmg { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin: 4px 0; padding-top: 4px; border-top: 1px dashed var(--line); }
.roll-dmg b { font-size: var(--fs-xl); }
.sheet-feature.sf-flash { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.sf-head small { color: var(--muted); }
.sf-rolls { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-left: 6px; font-size: var(--fs-md); }
.sf-tools { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 4px 0; font-size: var(--fs-md); }
.table-result { flex-basis: 100%; padding: 4px 8px; border-left: 3px solid var(--accent, #a33); background: var(--panel-2, rgba(127,127,127,.08)); }
.free-choices-box .free-choices { margin-top: 0; padding-top: 0; border-top: 0; }
.sf-link { color: var(--accent); text-decoration: none; margin-left: 4px; }
.sf-link:hover { text-decoration: underline; }
.sf-body { font-size: var(--fs-md); }
.sf-body p { margin: 3px 0; }
.sheet-feature.clamped .sf-body { max-height: 4.6em; overflow: hidden; mask-image: linear-gradient(#000 55%, transparent); }
.sheet button.link { color: var(--muted); }

/* sheet: play panel */
.play-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.play-box { border: 1px solid transparent; border-radius: var(--r-md); background: var(--panel-2); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; font-size: var(--fs-md); }
.play-box .btn:not(.primary):not(.danger) { background: var(--panel); color: var(--text); border-color: var(--edge); }
.play-box .btn:not(.primary):not(.danger):hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, var(--panel)); }
.play-box input, .play-box select { background: var(--bg); color: var(--text); border-color: var(--line); padding: 3px 6px; font-size: var(--fs-md); }
.play-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.hp-box.down { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hp-now b { font-size: var(--fs-3xl); font-weight: 700; }
.hp-now .temp { color: var(--ok); font-weight: 600; }
.hp-box meter { width: 100%; height: 10px; }
.hp-input { display: flex; gap: 4px; flex-wrap: wrap; }
.hp-input input { width: 76px; }
.rest-btns { display: flex; gap: 4px; }
.ds-row, .slot-row { display: flex; align-items: center; gap: 4px; }
.ds-row span, .slot-row span { min-width: 66px; }
.slot-row span { min-width: 32px; }
.pip { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--bg); cursor: pointer; padding: 0; }
.pip.used { background: var(--accent); }
.pip:hover { box-shadow: 0 0 0 2px var(--accent); }
.trackers { grid-column: span 2; }
.tracker { display: flex; justify-content: space-between; gap: 10px; width: 100%; align-items: center; }
.tracker-ctl { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.add-tracker { display: flex; gap: 4px; flex-wrap: wrap; width: 100%; }
.add-tracker input[type=text] { flex: 1; min-width: 100px; width: auto; }
.add-tracker input[type=number] { width: 54px; }
.add-tracker select { width: auto; }

/* ---------- features & feats step, level up ---------- */
.choice-box { background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--warn-line); border-radius: var(--radius); padding: 10px 14px; margin: 8px 0; }
.choice-box.done { border-left-color: var(--ok); }
.choice-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.choice-head b { font-size: var(--fs-lg); font-weight: 600; }
.choice-grid { max-height: 320px; overflow: auto; }
.check.unmet { opacity: .6; }
.tag.ok { border-color: var(--ok-line); color: var(--ok); }
.feat-fx { margin-top: 6px; }
.feat-fx h4 { margin: 8px 0 4px; }
.hp-rolls { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin-bottom: 8px; }
.hp-roll { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); }
.hp-roll span { flex: 1; color: var(--muted); }
.hp-roll input { width: 64px; padding: 4px 6px; }
.own-feature { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr) auto; gap: 8px; align-items: start; margin-bottom: 8px; }
.mc-table { max-width: 720px; margin-bottom: 6px; }
.mc-table td { padding: 4px 8px; }
.mc-table select { width: auto; }
.lvl-classes { display: flex; flex-direction: column; gap: 4px; max-width: 520px; margin-bottom: 10px; }
.lvl-classes select { width: auto; margin-left: 6px; }
ul.lvl-new { padding-left: 18px; }
ul.lvl-new details p { color: var(--text-soft); font-size: var(--fs-base); }

/* ---------- details step ---------- */
.details-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.details-layout .field > span { display: flex; justify-content: space-between; }
.form-grid.looks { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.portrait-box { display: flex; gap: 14px; align-items: flex-start; }
img.portrait, .portrait.empty { width: 128px; height: 128px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); flex: none; }
.portrait.empty { display: grid; place-items: center; color: var(--muted); font-size: var(--fs-md); background: var(--panel); }
.adjust-table td { padding: 4px 6px; }
.adjust-table select { width: auto; max-width: 220px; }
ul.snapshots { list-style: none; padding: 0; }
ul.snapshots li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid var(--line); }
.enc-box meter { width: 100%; height: 10px; }
.enc-box select { width: auto; padding: 3px 6px; font-size: var(--fs-md); }
select.in-container { width: auto; padding: 1px 4px; font-size: var(--fs-sm); margin-top: 2px; }

/* ---------- sheet additions ---------- */
/* sheet tabs on every screen (Companions only in its own tab) */
.sheet-tabs { display: flex; gap: 2px; overflow-x: auto; margin: -6px 0 10px; position: sticky; top: 0; z-index: 15; background: var(--bg); padding: 6px 0; }
.sheet-tabs button { flex: 1; padding: 7px 10px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--muted); font: 600 var(--fs-base) var(--head); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; cursor: pointer; }
.sheet-tabs button:hover { color: var(--text); }
.sheet-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
/* read-only sheets and printing (not .arranged): every part rendered, the tab shows its own (old share links: sections) */
@media screen {
  .sheet:not(.arranged)[data-tab="all"] .sheet-companions, .sheet:not(.arranged)[data-tab="all"] .tab-only,
  .sheet:not(.arranged)[data-tab="all"] .blk[data-tabs]:not([data-tabs~="all"]),
  .sheet:not(.arranged)[data-tab="stats"] [data-tabs]:not([data-tabs~="stats"]),
  .sheet:not(.arranged)[data-tab="actions"] [data-tabs]:not([data-tabs~="actions"]),
  .sheet:not(.arranged)[data-tab="spells"] [data-tabs]:not([data-tabs~="spells"]),
  .sheet:not(.arranged)[data-tab="inventory"] [data-tabs]:not([data-tabs~="inventory"]),
  .sheet:not(.arranged)[data-tab="companions"] [data-tabs]:not([data-tabs~="companions"]),
  .sheet:not(.arranged)[data-tab="features"] [data-tabs]:not([data-tabs~="features"]),
  .sheet:not(.arranged)[data-tab="background"] [data-tabs]:not([data-tabs~="background"]),
  .sheet:not(.arranged)[data-tab="notes"] [data-tabs]:not([data-tabs~="notes"]),
  .sheet:not(.arranged)[data-tab="extras"] [data-tabs]:not([data-tabs~="extras"]) { display: none; }
  .sheet:not(.arranged)[data-tab="all"] .play-panel:has(> .tab-only:only-child) { display: none; }
  .sheet:not(.arranged)[data-tab]:not([data-tab="all"]) .sheet-cols { grid-template-columns: 1fr; gap: 0; }
  .sheet:not(.arranged)[data-tab]:not([data-tab="all"]):not([data-tab="stats"]) .blk { grid-column: span 12; }
}
/* the parts of a tab (SheetLayout): a 12-column grid, wN = N columns wide; Arrange shows a bar on each part */
.sheet-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
.blk { grid-column: span 12; min-width: 0; }
.blk.w3 { grid-column: span 3; } .blk.w4 { grid-column: span 4; } .blk.w6 { grid-column: span 6; } .blk.w8 { grid-column: span 8; }
.blk > .play-box, .blk > .play-stack, .blk-in > .play-box, .blk-in > .play-stack { margin: 4px 0; }
/* a part bigger / smaller than its default size: the content scales (zN = N %), it does not reflow */
.blk:has(> .blk-in) { display: flex; flex-direction: column; }
.blk-in { flex: 1; min-width: 0; }
.blk-in:has(> .play-box) { display: flex; flex-direction: column; }
.blk-in > .play-box { flex: 1; }
.blk-in.z50 { zoom: .5; } .blk-in.z67 { zoom: .67; } .blk-in.z75 { zoom: .75; } .blk-in.z133 { zoom: 1.33; } .blk-in.z150 { zoom: 1.5; }
.blk > .play-box { box-sizing: border-box; min-height: calc(100% - 8px); }
.play-stack { display: flex; flex-direction: column; gap: 8px; }
.blk.n12 ul.checklist { columns: 2; column-gap: 24px; }
/* skills: up to 3 columns when the part is wide enough (each at least 190px) */
.blk.n8 ul.checklist.skills, .blk.n12 ul.checklist.skills { columns: 3 190px; column-gap: 24px; }
ul.checklist li { break-inside: avoid; }
.blk.editing { outline: 1px dashed var(--muted); outline-offset: 2px; border-radius: var(--r-sm); padding: 0 4px 4px; margin: 6px 0; }
.blk.editing.dragging { opacity: .4; }
.blk.editing.drop-target { outline: 2px solid var(--accent); }
.blk-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: var(--panel); border-bottom: 1px solid var(--line); margin: 0 -4px 4px; padding: 3px 6px; cursor: grab; font-size: var(--fs-sm); color: var(--muted); }
.blk-bar .blk-name { flex: 1; font-weight: 600; }
.blk-bar .btn { padding: 1px 7px; background: var(--panel-2); color: var(--text); border-color: var(--line); }
.blk-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 8px; border: 1px dashed var(--muted); border-radius: var(--r); color: var(--text); }
.blk-add select { width: auto; margin-left: 6px; }
.sheet-tabs button.arrange-btn { flex: none; }
.sheet-head img.portrait { width: 84px; height: 84px; border-color: var(--line); }
.sheet-title { flex: 1; min-width: 200px; }
.inspiration { border: 1px solid transparent; border-radius: var(--r-md); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; padding: 4px 10px; text-align: center; align-self: center; }
.inspiration b { display: block; font-size: var(--fs-2xl); color: var(--muted); line-height: 1; }
.inspiration span { font-size: var(--fs-xs); text-transform: uppercase; color: var(--muted); }
.inspiration.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.inspiration.on b { color: var(--accent); }
.defenses { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--fs-md); margin: 2px 0 8px; }
.defenses b { color: var(--muted); font-weight: 600; }
.conditions { grid-column: span 2; }
.cond-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.cond-chips .chip { padding: 1px 8px; font-size: var(--fs-sm); background: var(--panel); color: var(--text); border-color: var(--edge); }
.cond-chips .chip.active { background: color-mix(in srgb, var(--warn) 24%, var(--panel)); border-color: var(--warn); color: var(--text); font-weight: 600; }
.exhaustion { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
ul.cond-notes { margin: 0; padding-left: 16px; font-size: var(--fs-sm); }
.conc { font-size: var(--fs-md); }
.hd-row { display: flex; align-items: center; gap: 8px; }
.mark { display: inline-block; font-size: var(--fs-xs); font-weight: 700; border: 1px solid currentColor; border-radius: var(--r-sm); padding: 0 3px; margin-left: 3px; opacity: .75; vertical-align: 1px; }
.sheet .conc-btn { font-size: var(--fs-xs); }
.sheet .conc-btn.on { color: var(--accent); font-weight: 600; }
.spell-note input { padding: 2px 6px; font-size: var(--fs-sm); min-width: 90px; background: var(--bg); color: var(--text); border-color: var(--line); }
.print-only { display: none; }
ul.checklist li.exp i { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--accent); }
.attune-slot { display: inline-block; border: 1px dashed var(--line); border-radius: var(--r); padding: 0 8px; margin-right: 4px; color: var(--muted); font-size: var(--fs-sm); }
.attune-slot.on { border-style: solid; color: var(--text); }
.sheet-inventory ul.contents { margin: 0; padding-left: 16px; font-size: var(--fs-md); }
.sheet-actions-list .segmented { flex: none; }
.act-groups { columns: 2 360px; column-gap: 30px; }
.act-group { break-inside: avoid; }
.act-group h4 { color: var(--muted); margin: 12px 0 4px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 3px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.act-name { flex: 1; min-width: 150px; }
.act-ctl { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.act-desc { width: 100%; font-size: var(--fs-sm); }
.act-desc p { margin: 2px 0; }
.roll-detail.fx { color: var(--warn); }
.theme-btn { padding: 6px 10px; }

/* ---------- light colours ---------- */
:root[data-theme="light"] {
  --bg: #f6f3ef; --panel: #fefdfb; --panel-2: #eeebe5; --topbar-bg: #fefdfb;
  --input-bg: #fefdfb; --code-bg: #f3f0eb; --stripe: #f8f6f3;
  --line: #d5d0c8; --line-soft: #e1ddd7;
  --text: #241e18; --text-soft: #3b342d; --muted: #69625a;
  --accent: #996516; --accent-ink: #fff; --accent-line: #dcc091;
  --tint: color-mix(in srgb, var(--accent) 9%, var(--panel)); --tint-strong: color-mix(in srgb, var(--accent) 18%, var(--panel));
  --ok: #407142; --ok-strong: #2f5f32; --ok-line: #a6c9a6; --ok-ink: #fff;
  --danger: #b33830; --bad: #a8372a;
  --warn: #b55422; --warn-strong: #ad411c; --warn-line: #eab89c;
  --info: #386189; --info-line: #abc0d7;
  --magic: #754888; --magic-line: #cab5d4;
  --shadow: 0 8px 30px rgba(0, 0, 0, .14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --edge: #dedad3; --edge-strong: var(--line); --hover: color-mix(in srgb, var(--text) 5%, transparent);
  --lore: #8d364b; --lore-line: #e2b7be;
  --act-ink: #fff;
}

/* ---------- responsive ---------- */
@media (max-width: 1250px) {
  .sheet-layout { grid-template-columns: 1fr; }
  .dice-tray { position: fixed; right: 12px; bottom: 12px; top: auto; width: 290px; max-height: 55vh; z-index: 30;
    box-shadow: var(--shadow); }
}
@media (max-width: 1100px) {
  .comp, .comp.wide-detail { grid-template-columns: minmax(0, 1fr); }
  .comp-list { position: static; max-height: 45vh; }
  .class-body, .equip-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .two-col, .two-col.spells, .sheet-cols { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 16px; position: static; }
  main { padding: 18px 16px 40px; }
  .ab-row { grid-template-columns: repeat(3, 1fr); }
  .sheet-grid .blk { grid-column: span 12; }
  .blk.n8 ul.checklist.skills, .blk.n12 ul.checklist { columns: 1; }
  .blk-in[class*=" z"] { zoom: 1; }
}

/* ---------- print ---------- */
@media print {
  /* black on white whatever the theme */
  :root, :root[data-theme="light"] { --bg: #fff; --panel: #fff; --panel-2: #fff; --line: #bbb; --text: #000; --muted: #555; --accent: #6e1f1a; --accent-ink: #fff;
    --lore: #6e1f1a; --lore-line: #bbb; --act: #000; --act-line: #bbb; }
  .no-print, .step-nav { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .sheet { border: 0; border-radius: 0; padding: 0; }
  .sheet-cols { grid-template-columns: 1fr 1.4fr; }
  .stat-row { grid-template-columns: repeat(7, 1fr); }
  .ab-row { grid-template-columns: repeat(6, 1fr); }
  .sheet-layout { display: block; }
  ul.checklist button.rollable, button.stat.rollable b { text-decoration: none; }
  .roll-btn { border: 0; background: none; padding: 0; }
}

/* ---------- phones: the sheet one section at a time, bigger buttons ---------- */
@media (max-width: 700px) {
  .sheet { padding: 16px 14px; }
  .sheet h1 { font-size: var(--fs-3xl); }
  .sheet-tabs button { padding: 9px 10px; }
  .sheet-actions { flex-wrap: wrap; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .ab-row { grid-template-columns: repeat(3, 1fr); }
  .play-panel { grid-template-columns: 1fr; }
  .conditions, .trackers { grid-column: auto; }
  .roll-btn { padding: 5px 12px; font-size: var(--fs-body); }
  .pip { width: 22px; height: 22px; }
  ul.checklist li { padding: 4px 0; }
  .details-layout, .own-feature { grid-template-columns: minmax(0, 1fr); }
  .step-bar { flex-wrap: nowrap; overflow-x: auto; }
  .step { white-space: nowrap; }
}
@media print {
  .print-only { display: inline; }
  .act-group[hidden] { display: block !important; }
  .sheet-actions-list .segmented, .cond-chips .chip:not(.active) { display: none; }
}

/* level up: easy to find next to the character tabs */
.char-tabs .levelup-tab { margin: 0 0 4px auto; align-self: center; border: 1px solid var(--accent); border-radius: var(--r); background: var(--accent); color: var(--accent-ink, #1a1a1a); }
.char-tabs .levelup-tab.active { background: var(--panel); color: var(--accent); border-bottom-color: var(--accent); }
.levelup-ready { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cast-sel { font-size: var(--fs-sm); padding: 1px 4px; margin-left: 6px; width: auto; max-width: 14em; }

/* searchable dropdowns (feats): a filter box above the list */
.select-search { display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.select-search .opt-filter { padding: 4px 8px; font-size: var(--fs-md); }
.select-search select[size] { padding: 2px; }
small.src { font-size: var(--fs-xs); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 5px; white-space: nowrap; }
.missing-note { margin: -6px 0 16px; padding: 8px 12px; border-left: 3px solid var(--warn-line); background: var(--panel); border-radius: 0 6px 6px 0; font-size: var(--fs-base); }
.missing-note b { color: var(--warn); font-weight: 600; }
.hint { border: 0; background: none; color: var(--accent); cursor: help; font-size: var(--fs-base); padding: 0 3px; vertical-align: 1px; }
.hint:hover, .hint:focus { color: var(--text); }
.quick-build { margin-top: 18px; }
.offline-badge { background: color-mix(in srgb, var(--warn) 18%, var(--panel)); border-color: var(--warn-line); color: var(--warn); }
.save-status.local { color: var(--warn); }
.target-ac { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--muted); margin: 6px 0; }
.target-ac input { width: 4.5em; padding: 3px 6px; }
.older-toggle { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.dead-box { grid-column: 1 / -1; border-color: var(--danger); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dead-box b { color: var(--bad); font-size: var(--fs-lg); }
.cond-notes + .against, p.against { font-size: var(--fs-md); margin: 4px 0; }

/* ---------- bestiary stat blocks (Compendium, companions, encounter tracker) ---------- */
.stat-block { font-size: var(--fs-base); max-width: 760px; }
.stat-block p { margin: 3px 0; }
.stat-block h4 { margin: 12px 0 4px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-lg); }
.mon-scores { border-collapse: collapse; margin: 6px 0; }
.mon-scores th, .mon-scores td { padding: 2px 6px; text-align: center; font-size: var(--fs-md); white-space: nowrap; }
.mon-act p { margin: 4px 0 2px; }
.mon-rolls { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.mon-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.mon-hit { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r); font-size: var(--fs-md); }
.mon-hit.active { border-color: var(--accent); }
.enc-picks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.enc-picks select { font-size: var(--fs-sm); padding: 2px 4px; max-width: 100%; }
.list-tools select { width: auto; }

/* ---------- campaigns ---------- */
.camp-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.camp-forms .toolbar input { flex: 1; min-width: 0; }
.camp-code code.big { font-size: var(--fs-2xl); letter-spacing: .1em; margin: 0 8px; }
.party td { vertical-align: top; }
.party meter { display: block; width: 90px; height: 8px; margin-top: 3px; }
.party tr.active td { background: var(--panel-2); }
.nowrap { white-space: nowrap; }
.temp { color: var(--info); font-weight: 600; }
.camp-members { padding-left: 18px; }
.camp-layout > .step-body { min-width: 0; }
.camp-log { max-height: 560px; }
.camp-roll.private { border-style: dashed; opacity: .85; }
.tray-party { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tray-party .tray-head b { font-size: var(--fs-body); }
.tray-party select { font-size: var(--fs-sm); padding: 2px 4px; max-width: 60%; }
.tray-party .roll-log { max-height: 220px; }
.camp-sources { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 14px; }
.notice.warn { border-color: var(--warn-line); }
.notice.warn ul { margin: 4px 0; }
.readonly-sheet { margin-top: 14px; }
.readonly-sheet .sheet-actions, .readonly-sheet .dice-tray, .readonly-sheet .add-tracker, .readonly-sheet .hp-input, .readonly-sheet .sheet-add-item,
.readonly-sheet .rest-btns, .readonly-sheet .share-panel, .readonly-sheet .cast-sel, .readonly-sheet .comp-hp .no-print, .readonly-sheet .sheet-companions .toolbar,
.readonly-sheet .group-head .no-print { display: none !important; }
.readonly-sheet .sheet-layout { grid-template-columns: minmax(0, 1fr); }
.readonly-sheet input, .readonly-sheet select, .readonly-sheet textarea, .readonly-sheet .pip, .readonly-sheet .chip { pointer-events: none; }
.readonly-sheet .rollable, .readonly-sheet .roll-btn { cursor: default; }
.shared-view .topbar .actions, .shared-view .mainnav { display: none; }
.shared-view #main { max-width: 1200px; margin: 0 auto; padding: 16px; }
.share-panel { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.share-panel .copy-row { width: 100%; max-width: 640px; }

/* encounter builder and initiative tracker */
.enc-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.enc-diff { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 8px 12px; margin: 10px 0; }
.enc-diff p { margin: 3px 0; }
.diff-easy, .diff-low, .diff-trivial, .diff-below-low { color: var(--diff-easy); }
.diff-medium, .diff-moderate { color: var(--diff-medium); }
.diff-hard, .diff-high { color: var(--diff-hard); }
.diff-deadly, .diff-above-high { color: var(--diff-deadly); }
.tracker-box { border-left-color: var(--warn-line); }
table.init-table input[type=text] { min-width: 120px; }
table.init-table input.qty { width: 4.5em; padding: 3px 6px; }
table.init-table tr.turn td { background: var(--panel-2); box-shadow: inset 0 1px 0 var(--act), inset 0 -1px 0 var(--act); }
table.init-table tr.hidden-row td { opacity: .6; font-style: italic; }
table.init-table tr.bloodied td:nth-child(5) b { color: var(--warn); }
table.init-table tr.down td { opacity: .5; text-decoration: line-through; }
table.init-table tr.down td input, table.init-table tr.down td button { text-decoration: none; }
.add-combatant-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); width: fit-content; max-width: 100%; }
.add-combatant-pop input[type=text] { width: 12em; }
.mon-list:empty { display: none; }
.init-list { padding-left: 0; list-style: none; max-width: 480px; }
.init-list li { padding: 6px 10px; border: 1px solid var(--edge); border-radius: var(--r); margin-bottom: 4px; background: var(--panel); }
.init-list li.turn { border-color: var(--act); box-shadow: 0 0 0 1px var(--act); }
.init-list li.down { opacity: .5; text-decoration: line-through; }
.init-list li b { display: inline-block; min-width: 2.2em; color: var(--accent); }
.init-list li.delayed { opacity: .7; font-style: italic; }

/* encounters: library, builder, runner, players' banner, table screen */
.sub-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.sub-tabs .tab { padding: 5px 12px; font-size: var(--fs-md); }
.enc-head-fields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.enc-head-fields .enc-title { flex: 1 1 14em; font-size: var(--fs-lg, 1.1em); font-weight: 600; }
.enc-head-fields select { width: auto; max-width: 100%; }
.enc-present { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.enc-field { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }
.enc-field > span { color: var(--muted); font-size: var(--fs-sm); }
.enc-field textarea { width: 100%; }
.enc-filters select { width: auto; max-width: 11em; }
.enc-picks input.qty { width: 3.5em; padding: 2px 4px; }
.xp-bar { display: grid; grid-template-columns: repeat(40, 1fr); gap: 1px; height: 12px; margin: 6px 4px; padding: 1px; border: 1px solid var(--edge); border-radius: 0; background: var(--panel-2); transform: skewX(-20deg); }
.xp-bar i { background: transparent; border-radius: 1px; }
.xp-bar i.on { background: var(--diff-easy); }
.diff-bar-medium i.on, .diff-bar-moderate i.on { background: var(--diff-medium); }
.diff-bar-hard i.on, .diff-bar-high i.on { background: var(--diff-hard); }
.diff-bar-deadly i.on, .diff-bar-above-high i.on { background: var(--diff-deadly); }
.xp-bar i.mark { box-shadow: inset -2px 0 0 var(--text); }
.enc-lib td { vertical-align: middle; }
.enc-st-ready { border-color: var(--ok-line); color: var(--ok); }
.enc-st-used { opacity: .7; }
.enc-order { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.enc-order .chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--edge); border-radius: var(--r-pill); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-md); cursor: pointer; }
.enc-order .chip b { color: var(--accent); }
.enc-order .chip.now { border-color: var(--act); box-shadow: 0 0 0 1px var(--act); background: color-mix(in srgb, var(--act) 14%, var(--panel)); }
.enc-order .chip.down { opacity: .5; text-decoration: line-through; }
.enc-order .chip.hidden-row, .enc-order .chip.waiting, .enc-order .chip.delayed { font-style: italic; opacity: .75; cursor: default; }
.enc-run-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; align-items: start; }
.turn-card { border-left-color: var(--act); }
.turn-card h3 { margin: 0; }
.enc-reminders { margin: 6px 0; padding-left: 18px; font-size: var(--fs-md); }
.enc-reminders li { margin: 2px 0; }
.leg-pips { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: var(--fs-sm); color: var(--muted); }
.leg-pips .pip { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1px solid var(--accent-line); background: transparent; cursor: pointer; }
.leg-pips .pip.on { background: var(--accent); }
.hp-typed { width: 5.5em !important; }
.enc-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.enc-multi select { width: auto; }
.enc-more { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; }
.enc-more input[type=text] { width: 10em; }
.row-actions .link.used { color: var(--muted); }
table.init-table tr.waiting-row td { opacity: .6; font-style: italic; }
.enc-opts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.enc-opts .copy-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.enc-opts .copy-row input { flex: 1 1 16em; }
.enc-info summary, .enc-log summary { cursor: pointer; color: var(--muted); }
.read-aloud { border-left: 3px solid var(--accent-line); margin: 6px 0; padding: 4px 10px; font-style: italic; }
.enc-map { max-width: 100%; max-height: 360px; border-radius: var(--r); margin-top: 6px; }
.enc-log ol { max-height: 240px; overflow: auto; margin: 4px 0; }
.enc-banner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.enc-summary .toolbar { margin-top: 6px; }
.table-view #main { max-width: 900px; }
.table-view h1 { font-size: 2.2rem; }
.table-list { max-width: none; }
.table-list li { font-size: 1.8rem; padding: 10px 16px; }
.table-list li small { font-size: 1.2rem; color: var(--muted); }
@media (max-width: 900px) { .enc-run-grid { grid-template-columns: 1fr; } }

/* ---------- sheet: items, Wild Shape, companions ---------- */
.items-box { grid-column: span 2; }
.items-box .tracker > span:first-child { min-width: 0; }
.wild-box { grid-column: 1 / -1; border-color: var(--ok-line); box-shadow: 0 0 0 1px var(--ok-line); }
.charges-in { font-size: var(--fs-sm); color: var(--muted); margin-left: 6px; white-space: nowrap; }
.charges-in input { width: 4.5em; padding: 1px 4px; }
.sheet-companions .companions { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.companion { border: 1px solid transparent; border-radius: var(--r-md); padding: 8px 12px; background: var(--panel-2); min-width: 0; overflow-wrap: anywhere; }
/* the stat block stays inside its card (the score table used to spill into the next companion) */
.companion .mon-scores { width: 100%; table-layout: fixed; }
.companion .mon-scores th, .companion .mon-scores td { padding: 2px 1px; white-space: normal; }
.companion.active { border-color: var(--ok-line); box-shadow: 0 0 0 1px var(--ok-line); }
.companion h4 { margin: 2px 0; font-size: var(--fs-xl); }
.comp-hp { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: var(--fs-md); margin: 4px 0; }
.comp-hp b { font-size: var(--fs-2xl); font-weight: 700; }
.comp-hp.down b { color: var(--accent); }
.comp-hp input { width: 76px; padding: 2px 6px; background: var(--bg); color: var(--text); border-color: var(--line); }
.comp-hp .btn, .comp-form .btn:not(.primary), .mon-hit .btn { background: var(--panel); color: var(--text); border-color: var(--line); }
.comp-form { background: var(--panel-2); border-radius: var(--r); padding: 8px 12px; }
.comp-form input, .comp-form select, .comp-form textarea { background: var(--bg); color: var(--text); border-color: var(--line); }
.comp-form .mon-hit { border-color: var(--line); }
.form-grid.six { grid-template-columns: repeat(6, minmax(52px, 1fr)); }
.empty-companions h3 { display: inline-block; margin-right: 10px; }
.empty-companions p { display: inline; }

@media (max-width: 900px) {
  .enc-builder { grid-template-columns: 1fr; }
  .form-grid.six { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .items-box { grid-column: auto; }
  .sheet-companions .companions { grid-template-columns: 1fr; }
}
.stat-block .save-dc { color: var(--bad); }
.sheet .stat-block .save-dc { color: var(--accent); }

/* ---------- names in Actions explain themselves (as on 5etools): hover card, pinned panel on the right, a bottom sheet on phones ---------- */
.info-name { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: help; text-align: left;
  text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.info-name:hover, .info-name:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
.info-pop, .info-panel { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-size: var(--fs-base); }
.info-pop { position: fixed; z-index: 60; max-height: 60vh; overflow: auto; border-radius: var(--r-md); box-shadow: var(--shadow); padding: 0 14px 10px; }
.info-panel:not([hidden]) { position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; overflow: auto;
  padding: 0 16px 16px; box-shadow: -8px 0 30px rgba(0, 0, 0, .35); display: block; }
.info-head { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; justify-content: space-between; background: var(--panel-2);
  border-bottom: 1px solid var(--line); padding: 10px 0 6px; margin-bottom: 8px; }
.info-head b { font-size: var(--fs-lg); font-weight: 600; }
.info-head small { color: var(--muted); font-size: var(--fs-xs); }
.info-close { border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: var(--r); font-size: var(--fs-2xl); line-height: 1; padding: 2px 10px; cursor: pointer; }
.info-body p { margin: 6px 0; }
.info-body .muted, .info-body .src { color: var(--muted); }
.info-body h2 { font-size: var(--fs-xl); }
.info-body .stat-table th, .info-body .stat-table td { border-color: var(--line); color: var(--text); }
.info-backdrop { display: none; }
@media (min-width: 1251px) { body.info-open .sheet-layout { margin-right: 410px; } }
@media (max-width: 700px), (hover: none) {
  .info-panel:not([hidden]) { top: auto; left: 0; width: auto; max-height: 72vh; border-radius: var(--r-lg) 14px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .4); }
  .info-panel:not([hidden])::before { content: ''; display: block; width: 44px; height: 4px; border-radius: var(--r-sm); background: var(--line); margin: 8px auto 0; }
  .info-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .35); }
  .info-name { cursor: pointer; }
}

/* actions split into attacks, spells and features */
.act-sub h5 { margin: 8px 0 2px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.std-actions { font-size: var(--fs-md); margin: 2px 0 6px; }
.sheet-actions-list .group-head { flex-wrap: wrap; gap: 8px; }

/* spells: a table as on D&D Beyond (Name · Time · Range · Hit / DC · Effect) */
.spell-tools { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 4px 0 8px; }
.spell-tools input[type=search] { width: 180px; padding: 4px 8px; background: var(--bg); color: var(--text); border-color: var(--line); }
.spell-tools .segmented button { padding: 3px 9px; font-size: var(--fs-sm); }
.spell-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.spell-table th, .spell-table td { text-align: left; vertical-align: top; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.spell-table thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.spell-table tr.spell-lv th { color: var(--text); font-size: var(--fs-base); font-weight: 600; padding-top: 12px; border-bottom: 1px solid var(--line); }
.spell-table .sp-cast { width: 1%; white-space: nowrap; }
.spell-table .sp-cast .cast-sel { max-width: 92px; font-size: var(--fs-sm); padding: 2px 4px; }
.spell-table .sp-cast .spell-prep { margin: 0 6px 0 0; vertical-align: -2px; }
.spell-table .sp-name small { display: block; font-size: var(--fs-xs); line-height: 1.3; }
.spell-table .save-dc { white-space: nowrap; font-weight: 600; }
.sheet-spells tr.unprepared td:not(.sp-cast) { opacity: .5; }
@media (max-width: 700px) {
  .spell-table thead { display: none; }
  /* one compact row per spell (as on D&D Beyond): cast | name | hit / DC, below it time · range | effect */
  .spell-table, .spell-table tbody { display: block; }
  .spell-table tr:not(.spell-lv) { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "cast name name hit" "cast time range effect";
    gap: 0 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
  .spell-table tr.spell-lv { display: block; }
  .spell-table tr.spell-lv th { display: block; padding: 8px 0 2px; font-size: var(--fs-base); }
  .spell-table tr:not(.spell-lv) td { border: 0; padding: 0; min-width: 0; }
  .spell-table .sp-cast { grid-area: cast; width: auto; }
  .spell-table .sp-cast .cast-sel { max-width: 64px; }
  .spell-table .sp-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spell-table .sp-name small { display: none; }
  .spell-table .sp-time { grid-area: time; }
  .spell-table .sp-range { grid-area: range; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spell-table .sp-time, .spell-table .sp-range { font-size: var(--fs-xs); color: var(--muted); }
  .spell-table .sp-hit { grid-area: hit; text-align: right; }
  .spell-table .sp-effect { grid-area: effect; text-align: right; }
  .spell-table .roll-btn { padding: 2px 8px; font-size: var(--fs-md); }
  .spell-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .spell-tools > * { flex: none; }
  .sheet-spells .small-note { display: none; }
}
.warn-box { border-color: var(--warn-line); }

/* notes and the party's shared notes / inventory on the sheet */
.sheet-notes textarea, .party-box textarea { width: 100%; background: var(--bg); color: var(--text); border-color: var(--line); }
.party-box input[type=text], .party-box input[type=number] { background: var(--bg); color: var(--text); border-color: var(--line); }
.party-page .party-box input, .party-page .party-box textarea { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.party-items { list-style: none; padding: 0 !important; margin: 0 0 8px; }
.party-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.party-page .party-items li { border-color: var(--line); }
.party-items .party-name { flex: 1; min-width: 140px; }
.party-store { margin-bottom: 8px; }
.party-store h4 { margin: 8px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.party-store.over h4 { color: var(--bad); }
.party-qty { display: inline-flex; align-items: center; gap: 4px; }
.party-qty .btn { padding: 0 7px; }
.party-gold input { width: 80px; padding: 2px 6px; }
.party-add input[name=name] { flex: 1; min-width: 140px; }
.party-add .small-num { width: 64px; }
.party-conflict .notice { margin: 4px 0 8px; }
.give-btn { font-size: var(--fs-xs); margin-left: 6px; }
.trash-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.trash-row small { display: block; }
.vault-sheet { border: 1px solid var(--line); border-radius: var(--r); padding: 8px; margin: 6px 0 10px; max-height: 70vh; overflow: auto; }
.vault-send { flex-basis: 100%; padding: 8px 10px; border-top: 1px solid var(--line); }
.vault-send input { width: 100%; }
.admin-limit { margin: 14px 0 6px; flex-wrap: wrap; }
.admin-limit input { width: 90px; margin-left: 6px; }
.inline-edit { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.inline-edit input[type=text] { width: 140px; }
.admin-chars { list-style: none; margin: 0; padding: 0; }
.admin-chars li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 3px 0; }
.admin-chars li .btn { margin-left: auto; }
.toast .btn { margin-left: 6px; }

/* foldable sheet panels: click a heading */
.foldable { cursor: pointer; user-select: none; }
.foldable::before { content: '▾'; display: inline-block; width: 1em; font-size: .8em; opacity: .55; transition: transform .15s; }
.foldable.folded::before { transform: rotate(-90deg); }
@media screen { .fold-hidden { display: none !important; } }
@media print { .foldable::before { content: none; } }

/* dice rolling across the screen */
.dice-fx { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.fx-die { position: absolute; left: 0; top: 0; width: 60px; height: 60px; display: grid; place-items: center;
  background: var(--panel); color: var(--text); font: 700 22px/1 var(--sans); box-shadow: var(--shadow);
  transform: translate(var(--x1), var(--y1)); animation: fx-throw .65s cubic-bezier(.2, .7, .3, 1) var(--delay, 0ms) both, fx-fade .4s ease-in 1.8s forwards; }
.fx-die span { display: block; }
.fx-die.d4 { clip-path: polygon(50% 4%, 97% 92%, 3% 92%); padding-top: 18px; }
.fx-die.d6 { border-radius: var(--r-pill); }
.fx-die.d8 { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.fx-die.d10 { clip-path: polygon(50% 0, 100% 42%, 50% 100%, 0 42%); }
.fx-die.d12 { clip-path: polygon(50% 0, 98% 36%, 80% 96%, 20% 96%, 2% 36%); }
.fx-die.d20 { clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); }
.fx-die.dn { border-radius: 50%; }
.fx-die.landed { background: var(--accent); color: var(--accent-ink); }
.fx-die.crit.landed { background: var(--ok); color: var(--ok-ink); }
.fx-die.fumble.landed { background: var(--danger); color: #fff; }
.fx-die.dropped.landed { opacity: .45; }
.fx-more { position: absolute; left: 50%; top: calc(50% + 70px); transform: translateX(-50%); color: var(--text); background: rgba(0, 0, 0, .6); padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--fs-md); }
@keyframes fx-throw {
  from { transform: translate(var(--x0), var(--y0)) rotate(var(--r)) scale(.7); }
  to { transform: translate(var(--x1), var(--y1)) rotate(0) scale(1); }
}
@keyframes fx-fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-die { animation: fx-fade .4s ease-in 1.4s forwards; } }

/* equip from the sheet */
.inv-eq { display: inline-block; width: 16px; margin: 0 6px 0 0; vertical-align: -2px; }
.sheet-inventory .inline-check { font-size: var(--fs-sm); color: var(--muted); margin-left: 4px; }
.portrait-help { padding-left: 18px; margin: 6px 0 0; }
.portrait-help li { margin-bottom: 3px; }

/* ---------- phones and touch screens ---------- */
@media (max-width: 760px) {
  /* top bar: logo + account on one line, the sections below (an extra Admin button no longer widens the page) */
  .topbar { gap: 6px 10px; padding: 8px 12px; }
  .brand { font-size: var(--fs-xl); }
  .actions { margin-left: auto; gap: 6px; }
  .user-btn { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 8px; }
  .user-btn .tag { display: none; }
  .topbar { flex-wrap: nowrap; }
  .mainnav { flex: none; position: relative; }
  .mainnav .nav-toggle { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); color: var(--text); font-size: var(--fs-body); white-space: nowrap; }
  .nav-items { display: none; }
  .mainnav.open .nav-items { display: flex; flex-direction: column; gap: 2px; position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 200px;
    padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
  .mainnav.open .nav-items button { display: block; text-align: left; padding: 10px 12px; font-size: var(--fs-body); }
  .mainnav .nav-phone { border-top: 1px solid var(--line) !important; border-radius: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mainnav .nav-phone + .nav-phone { border-top: 0 !important; }
  .actions .user-btn, .actions [data-top="logout"] { display: none; }
  h1 { font-size: var(--fs-3xl); }
  .detail-head h2 { font-size: var(--fs-2xl); }
  .auth-card { margin: 16px auto; padding: 20px 18px; }
  .comp-detail, .pick-detail { padding: 14px; }
  .picker, .browser { grid-template-columns: minmax(0, 1fr); }
  .cards, .cat-list { max-height: 40vh; }
  .toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  /* wide tables scroll on their own instead of widening the page */
  table.library, table.abil, table.skills, table.adjust-table, table.mc-table { display: block; overflow-x: auto; }
  /* long check box labels (homebrew rules, campaign rules) wrap; selects never wider than the screen */
  .check { display: inline-block; white-space: normal; max-width: 100%; }
  .check > small.muted { display: block; margin: 2px 0 8px 1.7em; }
  select { max-width: 100%; }
  /* Compendium / picker lists: name, the next two columns and the source (the rest is in the detail) */
  .list-table th:nth-child(n+4):not(:last-child), .list-table td:nth-child(n+4):not(:last-child) { display: none; }
  .list-table th, .list-table td { padding: 5px 6px; }
  .comp-list { max-height: none; }
  .comp-list .table-scroll { max-height: 50vh; }
  /* class and rules tables scroll sideways with the first column kept in view */
  .class-table th:first-child, .class-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel-2); }
  .rules-table td { min-width: 6em; }
  /* ability scores: short names, narrow columns, the inputs keep a usable width */
  table.abil { width: 100%; }
  table.abil th { white-space: normal; font-size: var(--fs-xs); line-height: 1.2; vertical-align: bottom; }
  table.abil th, table.abil td { padding: 4px 3px; }
  table.abil .ab-full { display: none; }
  table.abil .ab-abbr { display: inline; }
  table.abil select, table.abil input { min-width: 3.4em; width: 3.6em; max-width: 4.6em; padding: 4px 2px; }
  /* inventory (Equipment step): one card per item: equip | name … remove, below it qty, weight, attune */
  table.inventory, table.inventory tbody { display: block; }
  table.inventory thead { display: none; }
  table.inventory tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; grid-template-areas: "eq item item rm" "eq qty wt att";
    gap: 4px 12px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
  table.inventory tr.equipped { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }
  table.inventory td { display: block; padding: 0; border: 0; background: none !important; min-width: 0; }
  table.inventory td:nth-child(1) { grid-area: eq; }
  table.inventory td:nth-child(2) { grid-area: item; }
  table.inventory td:nth-child(3) { grid-area: qty; display: flex; align-items: center; gap: 6px; }
  table.inventory td:nth-child(3)::before { content: 'Qty'; color: var(--muted); font-size: var(--fs-sm); }
  table.inventory td:nth-child(4) { grid-area: wt; }
  table.inventory td:nth-child(5) { grid-area: att; display: flex; align-items: center; gap: 6px; }
  table.inventory td:nth-child(5):not(:empty)::before { content: 'Attune'; color: var(--muted); font-size: var(--fs-sm); }
  table.inventory td:nth-child(6) { grid-area: rm; }
  /* character / campaign / admin tabs wrap */
  .char-tabs { flex-wrap: wrap; gap: 4px; border-bottom: 0; }
  .char-tabs .tab { flex: 1 1 auto; margin-bottom: 0; padding: 7px 10px; }
  .char-tabs .levelup-tab { margin-left: 0; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }
}
@media (max-width: 700px) {
  /* sheet tabs: all visible (wrapped) instead of a sideways scroll; not sticky, they would cover half the screen */
  .sheet-tabs { flex-wrap: wrap; gap: 4px; position: static; }
  .sheet-tabs button { flex: 1 1 auto; padding: 7px 8px; font-size: var(--fs-md); }
  .dice-tray:not(.closed) { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 60vh; }
  /* monster stat blocks: ability scores wrap instead of widening the table */
  .mon-scores { width: 100%; table-layout: fixed; }
  .mon-scores th, .mon-scores td { white-space: normal; padding: 2px 1px; font-size: var(--fs-sm); }
  .mon-scores .roll-btn { padding: 1px 3px; font-size: var(--fs-sm); }
  /* initiative tracker: each combatant a card (init, name, actions / AC, HP / conditions) */
  table.init-table, table.init-table > tbody { display: block; overflow: visible; }
  table.init-table > thead { display: none; }
  table.init-table > tbody > tr { display: grid; grid-template-columns: 1.1em 4.5em minmax(0, 1fr) auto; grid-template-areas: "mk init name act" "mk ac hp hp" "mk cond cond cond";
    gap: 6px 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
  table.init-table > tbody > tr:has(> td:only-child) { display: block; padding: 4px 0 10px; }
  table.init-table > tbody > tr > td { border: 0; padding: 0; background: none !important; box-shadow: none !important; }
  table.init-table > tbody > tr > td:nth-child(1) { grid-area: mk; }
  table.init-table > tbody > tr > td:nth-child(2) { grid-area: init; }
  table.init-table > tbody > tr > td:nth-child(3) { grid-area: name; }
  table.init-table > tbody > tr > td:nth-child(4) { grid-area: ac; display: flex; gap: 4px; align-items: center; }
  table.init-table > tbody > tr > td:nth-child(5) { grid-area: hp; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  table.init-table > tbody > tr > td:nth-child(6) { grid-area: cond; min-width: 0; }
  table.init-table > tbody > tr > td:nth-child(7) { grid-area: act; }
  table.init-table > tbody > tr > td:nth-child(4)::before { content: 'AC'; color: var(--muted); font-size: var(--fs-sm); }
  table.init-table > tbody > tr > td:nth-child(5)::before { content: 'HP'; color: var(--muted); font-size: var(--fs-sm); }
  table.init-table > tbody > tr:has(> td:only-child) > td::before { content: none; }
  table.init-table > tbody > tr.turn { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--act); }
  table.init-table input[type=text] { min-width: 0; width: 100%; }
  table.init-table .row-actions .link { font-size: var(--fs-xl); padding: 2px 6px; text-decoration: none; }
  .enc-conds { min-width: 0; }
}
@media (pointer: coarse) {
  /* 16px stops phones zooming in on every field; bigger targets for fingers */
  input[type=text], input[type=number], input[type=search], input[type=password], textarea, select { font-size: var(--fs-lg) !important; }
  .btn.small { padding: 6px 10px; }
  button.link { padding: 4px 2px; font-size: var(--fs-md); }
  .sheet-actions > .muted { display: none; } /* shift / ctrl-click hint */
}

/* ---------- the sheet's vitals bar (MobileSheet in sheetui.js) and the sheet without repeats, every screen ---------- */
/* hit points, AC, initiative, speed, conditions, rests and inspiration are in the bar and its pop-outs; name and facts in
   the page head (facts again at the bottom of All); hit dice in the senses line; feature uses inside Features & Traits */
.m-vitals { display: none; }
.mv { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 4px 2px;
  border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--panel); color: var(--text); font: inherit; }
button.mv { cursor: pointer; }
.mv b { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; white-space: nowrap; }
.mv b small { font-size: var(--fs-sm); color: var(--muted); }
.mv > span { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mv .temp { font-style: normal; font-size: var(--fs-sm); color: var(--ok); margin-left: 3px; }
.mv.hp.down b { color: var(--danger); }
.mv.active { border-color: var(--accent); }
.mv-quick, .mv-wide { display: none; }
.mv-row { display: flex; gap: 6px; }
.mv-btn { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; justify-content: center; padding: 5px 10px; min-height: 34px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--text); font: inherit; font-size: var(--fs-md); cursor: pointer; }
.mv-btn.conds { flex: 1; min-width: 0; justify-content: flex-start; }
.mv-btn.conds.on { border-color: var(--warn-line); }
.mv-btn.active { border-color: var(--accent); }
.mv-btn.insp { font-size: var(--fs-2xl); line-height: 1; padding: 4px 10px; color: var(--muted); }
.mv-btn.insp.on { color: var(--accent); border-color: var(--accent); }
.m-pop, .m-pop-back { display: none; }
.m-pop-back { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .4); }
.m-pop { position: fixed; z-index: 45; overflow: auto; flex-direction: column; gap: 8px; box-shadow: 0 -8px 30px rgba(0, 0, 0, .4); }
.m-pop-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; background: var(--panel); padding: 6px 0; border-bottom: 1px solid var(--line); }
.m-pop-head b { font-size: var(--fs-lg); font-weight: 600; }
.m-pop .play-box, .m-pop .play-stack { width: 100%; box-sizing: border-box; font-size: var(--fs-base); }
.m-pop .hp-input { width: 100%; }
.m-pop .hp-input input { flex: 1; min-width: 0; width: auto; }
.m-pop .hp-input .btn { padding: 8px 12px; }
.m-pop .cond-chips .chip { padding: 4px 10px; font-size: var(--fs-md); }
@media screen { .m-vitals { display: flex; } .m-pop { display: flex; } .m-pop-back { display: block; } }
.sheet.arranged .st-vital, .sheet.arranged .sheet-head .inspiration,
.sheet.arranged .blk:not(.editing):is([data-blk="hp"], [data-blk="deathsaves"], [data-blk="conditions"], [data-blk="effects"], [data-blk="rests"]) { display: none; }
.m-only, .char-quick, .ph-only { display: none; }
.sheet.arranged .m-only:not(.ph-only) { display: revert; }
.sheet.arranged .sf-uses { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; margin: 2px 0 4px; }
.m-bottom { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.m-bottom dl.facts { font-size: var(--fs-md); }
.sheet.arranged .sheet-head .sheet-title, .sheet.arranged .sheet-head dl.facts { display: none; }
.sheet.arranged .sheet-head { border-bottom: 0; padding-bottom: 0; }
.sheet.arranged .blk:not(.editing)[data-blk="head"]:not(:has(img.portrait)),
.sheet.arranged .blk:not(.editing)[data-blk="numbers"],
.sheet.arranged[data-tab="stats"] .blk:not(.editing)[data-blk="slots"],
.sheet.arranged:has(.blk[data-blk="features"]) .blk:not(.editing)[data-blk="trackers"] { display: none; }
/* spell slots reflow instead of scaling: wide, the boxes side by side and each level's row next to the other */
.blk.w8[data-blk="slots"] > .blk-in, .blk.w12[data-blk="slots"] > .blk-in { flex-direction: row; flex-wrap: wrap; gap: 0 10px; }
.act-slots { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 4px 0; }
.blk.w8[data-blk="slots"] .play-box, .blk.w12[data-blk="slots"] .play-box, .act-slots .play-box { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.sheet-tabs .ti { display: none; }

/* ---------- wider screens: the bar is one row under the top bar (damage / heal in it), the tabs stick below it ---------- */
@media screen and (min-width: 761px) {
  :root { --mv-h: 56px; }
  :root { --st-h: 44px; }
  /* sheet tabs on top, the vitals bar under them, both sticky under the top bar */
  .sheet-sticky { position: sticky; top: 0; z-index: 16; background: var(--bg); margin: -6px 0 10px; }
  .sheet-sticky:has(.m-vitals) { top: var(--top); }
  .sheet-sticky .sheet-tabs { position: static; margin: 0; }
  .m-vitals { gap: 8px; align-items: stretch; height: var(--mv-h); box-sizing: border-box; background: var(--bg); padding: 0 0 6px; margin: 0; }
  .m-vitals .mv { min-width: 70px; padding: 2px 12px; }
  .m-vitals .mv.hp { min-width: 104px; }
  .m-vitals .mv-wide { display: flex; }
  .mv-quick { display: flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
  .mv-quick input { width: 64px; padding: 4px 6px; }
  .mv-row { flex: 1; min-width: 0; }
  .mv-row .mv-btn { min-height: 0; }
  .mv-btn.conds { overflow: hidden; flex-wrap: nowrap; }
  .sheet-tabs .ti { display: inline; margin-right: 6px; }
  /* below the bar, not from the bottom */
  .m-pop-back { background: rgba(0, 0, 0, .25); }
  .m-pop { top: calc(var(--pop-top, calc(var(--top) + var(--st-h) + var(--mv-h))) + 8px); left: 50%; transform: translateX(-50%); width: min(370px, calc(100vw - 32px));
    max-height: calc(100vh - var(--pop-top, calc(var(--top) + var(--st-h) + var(--mv-h))) - 24px); padding: 0 12px 12px; border-radius: var(--r-lg); box-shadow: var(--shadow); }
  .m-pop .play-box, .m-pop .play-stack { font-size: var(--fs-md); }
  /* the dice tray stays visible and usable above a pop-out's backdrop */
  body:has(.m-pop) .dice-tray { z-index: 46; }
  /* level up is the tab next to Character sheet */
  .sheet-actions [data-action="level-up"] { display: none; }
}
@media (min-width: 761px) and (max-width: 1150px) {
  .mv-quick, .sheet-tabs .ti { display: none; }
}
/* the tray floats at the bottom right here: the pop-out goes left of it */
@media screen and (min-width: 761px) and (max-width: 1250px) {
  body:has(.dice-tray:not(.closed)) .m-pop { left: 16px; transform: none; width: min(370px, calc(100vw - 340px)); }
}

/* ---------- phones: the vitals bar in two rows on top, tabs as a bar at the bottom, pop-outs from the bottom ---------- */
@media (max-width: 760px) {
  .sheet-sticky { display: contents; }
  .m-vitals { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 6px; position: sticky; top: 0; z-index: 16;
    background: var(--bg); padding: 6px 0 8px; margin: 0 0 6px; border-bottom: 1px solid var(--line); }
  .mv-row { grid-column: 1 / -1; }
  /* a fixed height (it grew when the browser's toolbar came back while scrolling up) */
  .sheet-tabs { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 35; margin: 0; gap: 0; flex-wrap: nowrap;
    height: 50px; box-sizing: border-box; overflow: hidden; contain: layout paint; align-items: stretch; padding: 2px;
    background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .35); }
  .sheet-tabs::-webkit-scrollbar { display: none; }
  .sheet-tabs button { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: var(--r-md); background: none; color: var(--muted); }
  .sheet-tabs button.active { background: var(--panel-2); color: var(--accent); }
  .sheet-tabs .ti { display: block; font-size: var(--fs-2xl); line-height: 1; }
  .sheet-tabs .ti .ic { width: 22px; height: 22px; display: block; }
  .sheet-tabs .tl, .sheet-tabs .arrange-btn { display: none; }
  .readonly-sheet .sheet-tabs { position: static; flex-wrap: wrap; height: auto; overflow: visible; contain: none; box-shadow: none; border: 0; background: none; }
  .readonly-sheet .sheet-tabs button { flex: 1 1 auto; padding: 6px 8px; }
  .readonly-sheet .sheet-tabs .tl { display: inline; }
  .readonly-sheet .sheet-tabs .ti, .readonly-sheet .sheet-tabs .tl-more { display: none; }
  main:has(.sheet-tabs) { padding-bottom: 72px; }
  body:has(main .sheet-tabs) .dice-tray.closed { bottom: 60px; right: 10px; }
  body:has(main .sheet-tabs) .dice-tray:not(.closed) { bottom: 56px; max-height: calc(100vh - 130px); }
  body:has(main .sheet-tabs) .toast { bottom: 60px; }
  /* no print / file / share buttons; level up is the ⬆ tab next to Character sheet */
  .sheet-actions, .levelup-ready .lu-now, .char-tabs .lu-text { display: none; }
  /* smaller header */
  .char-head { gap: 4px 12px; margin-bottom: 6px; }
  .char-title { min-width: 0; }
  .char-title h1 { font-size: var(--fs-xl); }
  .char-title > span { font-size: var(--fs-sm); }
  .sheet-head { gap: 4px 10px; padding-bottom: 6px; margin-bottom: 8px; }
  .sheet-head img.portrait { width: 48px; height: 48px; }
  .sheet .sheet-head h1 { font-size: var(--fs-2xl); }
  .sheet-head p { font-size: var(--fs-md); }
  .sheet-head dl.facts { font-size: var(--fs-sm); gap: 2px 10px; }
  .sheet-title { min-width: 0; }
  /* pop-outs from the bottom (hit points, conditions, rest) */
  .m-pop { left: 0; right: 0; bottom: 0; max-height: 80vh; padding: 0 12px 16px; border-radius: var(--r-lg) 14px 0 0; }
  .m-pop::before { content: ''; display: block; flex: none; width: 44px; height: 4px; border-radius: var(--r-sm); background: var(--line); margin: 8px auto 0; }
  /* proficiency in the senses line, the background texts at the bottom of All (no Background tab) */
  .ph-only, .sheet.arranged .m-only.ph-only { display: revert; }
  .sheet-tabs button[data-tab="background"] { display: none; }
  .readonly-sheet .sheet-tabs button[data-tab="background"] { display: flex; }
  /* Character sheet tab: not while the sheet is open; level up a small button next to Edit and Roll log */
  .char-tabs { flex-wrap: nowrap; }
  .char-tabs .sheet-tab-btn.active { display: none; }
  .char-tabs .levelup-tab { flex: none; align-self: center; padding: 5px 9px; font-size: var(--fs-md); line-height: 1; }
  /* on the sheet: edit (✎) and level up (⬆) next to the name instead of a row of tabs; My characters is in the top bar */
  .char-head:has(.char-quick) { flex-wrap: nowrap; }
  .char-head .back, .char-tabs.on-sheet { display: none; }
  .char-head .char-title { flex: 1; }
  .char-quick { display: flex; gap: 6px; flex: none; }
  .char-quick .icon { padding: 5px 10px; font-size: var(--fs-lg); line-height: 1; }
  .char-quick .lu-text { display: none; }
}
@media screen and (min-width: 1251px) {
  .sheet-sticky:has(.m-vitals) ~ .sheet-layout .dice-tray:not(.closed) { top: calc(var(--top) + var(--st-h) + var(--mv-h) + 16px); max-height: calc(100vh - var(--top) - var(--st-h) - var(--mv-h) - 32px); }
}

/* ---------- values changed by a condition or exhaustion (data-fx; the reason is in the title) ---------- */
[data-fx] { --fx: var(--fx-dis); color: var(--fx) !important; box-shadow: inset 0 -2px 0 var(--fx); }
[data-fx="adv"] { --fx: var(--fx-adv); }
[data-fx="fail"] { --fx: var(--fx-fail); }
[data-fx] b, [data-fx] span, [data-fx] small { color: inherit; }
:is(.stat, .ab, .mv)[data-fx] b::after { content: ' ▼'; font-size: .6em; vertical-align: middle; }
:is(.stat, .ab, .mv)[data-fx="fail"] b::after { content: ' ✕'; }
button.rollable[data-fx]:not(.ab):not(.stat):not(.mv)::after { content: ' ▼'; font-size: .7em; }
button.rollable[data-fx="fail"]:not(.ab):not(.stat):not(.mv)::after { content: ' ✕'; }
:is(.stat, .ab, .mv)[data-fx="adv"] b::after { content: ' ▲'; }
button.rollable[data-fx="adv"]:not(.ab):not(.stat):not(.mv)::after { content: ' ▲'; }
.fx-note { font-size: var(--fs-md); padding: 3px 8px; border-left: 3px solid var(--fx); box-shadow: none; }
.sheet-actions-list.incap .act-groups { opacity: .55; }
@media print { [data-fx] { color: inherit !important; box-shadow: none; } [data-fx] b::after, button.rollable[data-fx]::after { content: none !important; } }

/* ---- books & sources (js/books.js): kind colours, the content bar and the pop-out */
.k-core { --k: #d1a954; } .k-supplement { --k: #5b93d6; } .k-adventure { --k: #58a875; } .k-other { --k: #8e95a3; }
.k-partnered { --k: #a77de0; } .k-homebrew { --k: #e0823f; } .k-era2014 { --k: #c9a454; } .k-era2024 { --k: #8fb3e0; }
.bk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk-open small { color: inherit; opacity: .8; }
.page-head .bk-bar { margin-left: auto; }
.src-tag.k-other, .src-tag.k-partnered, .src-tag.k-homebrew { border-left: 3px solid var(--k); padding-left: 5px; }
.bk-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 90; }
.bk-modal { position: fixed; z-index: 91; top: 6vh; left: 50%; transform: translateX(-50%); width: min(920px, calc(100vw - 32px)); max-height: 88vh;
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); }
.bk-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bk-head h2 { margin: 0; font-size: var(--fs-2xl); flex: 1 1 auto; }
.bk-head .search { flex: 0 1 220px; min-width: 120px; }
.bk-modal > p { margin: 0; }
.bk-quick { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.bk-groups { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bk-label { font-size: var(--fs-sm); color: var(--muted); min-width: 60px; }
.bk-group { font: inherit; font-size: var(--fs-md); padding: 3px 10px; border-radius: var(--r-lg); cursor: pointer; color: var(--text);
  border: 1px solid var(--k); background: transparent; }
.bk-group small { opacity: .75; margin-left: 2px; }
.bk-group.on { background: color-mix(in srgb, var(--k) 35%, var(--panel)); font-weight: 600; }
.bk-group.mixed { background: linear-gradient(90deg, color-mix(in srgb, var(--k) 35%, var(--panel)) 50%, transparent 50%); }
.bk-group.off { border-style: dashed; color: var(--muted); }
.bk-body { overflow-y: auto; min-height: 0; padding-right: 4px; }
.bk-sec { border-left: 4px solid var(--k); padding: 2px 0 6px 10px; margin-bottom: 10px; }
.bk-sec h3 { margin: 2px 0 6px; font-size: var(--fs-body); color: var(--k); }
.bk-sec h3 .link { font-size: var(--fs-sm); margin-left: 6px; }
.bk-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-pill { font: inherit; font-size: var(--fs-sm); padding: 2px 9px; border-radius: var(--r-sm); cursor: pointer; text-align: left;
  border: 1px solid var(--k); background: color-mix(in srgb, var(--k) 30%, var(--panel)); color: var(--text); }
.bk-pill.off { background: transparent; border-color: var(--line); color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.bk-pill:hover { border-color: var(--accent); }
.bk-era { font-size: var(--fs-xs); padding: 0 4px; border-radius: var(--r); border: 1px solid var(--info-line); color: var(--info); margin-left: 3px; text-decoration: none; display: inline-block; }
.bk-foot { margin: 0; padding-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .bk-modal { top: 8px; max-height: calc(100vh - 16px); width: calc(100vw - 16px); padding: 12px; } }
:root[data-theme="light"] .k-core { --k: #a87d22; } :root[data-theme="light"] .k-supplement { --k: #2f6db3; }
:root[data-theme="light"] .k-adventure { --k: #2f7d4b; } :root[data-theme="light"] .k-other { --k: #6b7280; }
:root[data-theme="light"] .k-partnered { --k: #7a4cc0; } :root[data-theme="light"] .k-homebrew { --k: #c0601d; }
:root[data-theme="light"] .k-era2014 { --k: #a87d22; } :root[data-theme="light"] .k-era2024 { --k: #2f6db3; }

/* This turn: used action / bonus action / reaction (Actions part) */
.sheet-actions-list .segmented button.turn-used { text-decoration: line-through; opacity: .5; }
.act-group h4[data-turn-kind] { cursor: pointer; }
.act-group h4.turn-used { color: var(--muted); text-decoration: line-through; }
.act-group.turn-used .act-sub { opacity: .55; }
.turn-reset { font-size: var(--fs-sm); white-space: nowrap; }

/* ---------- campaign wiki, quests, tables, bestiary ---------- */
.camp-tabs { flex-wrap: wrap; }
.camp-tab-pick { display: none; }
.camp-tab-pick select { width: 100%; font-size: var(--fs-md); padding: 8px 10px; }
@media (max-width: 760px) {
  /* campaign pages as a dropdown: the tab bar took half the screen */
  .camp-tabs { display: none; }
  .camp-tab-pick { display: block; margin-bottom: 12px; }
}
.entries-page .entry-list { max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.entry-group h4 { margin: 10px 0 4px; color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.entry-row { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 5px 10px; border: 1px solid transparent;
  border-radius: var(--r); background: none; color: var(--text); font: inherit; cursor: pointer; }
.entry-row:hover { background: var(--panel-2); }
.entry-row.active { border-color: var(--accent); background: var(--panel-2); }
.entry-view h2 small.tag { vertical-align: middle; }
.entry-pic { float: right; max-width: 220px; max-height: 260px; margin: 0 0 10px 16px; border-radius: var(--r); border: 1px solid var(--line); }
.entry-pic.small { float: none; max-width: 90px; max-height: 90px; margin: 0 10px 0 0; vertical-align: middle; }
.entry-body blockquote, .read-aloud { border-left: 3px solid var(--accent); margin: 8px 0; padding: 4px 14px; background: var(--panel-2); border-radius: 0 6px 6px 0; font-style: italic; }
.entry-body ul, .entry-body ol { margin: 0 0 10px; padding-left: 22px; }
.entry-view::after { content: ''; display: block; clear: both; }
button.link.wiki-link { color: var(--accent); text-decoration: underline dotted; font: inherit; padding: 0; vertical-align: baseline; }
button.link.wiki-link.missing { color: var(--muted); }
.dm-notes { margin-top: 12px; }
.entry-editor textarea { width: 100%; font-family: inherit; }
.entry-editor .form-grid.tight { gap: 0 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.entry-editor .form-grid.six, .monster-editor .form-grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.entry-pic-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.table-row-edit { border-left: 3px solid var(--line); padding-left: 12px; margin: 10px 0 16px; }
.shop-item-edit { align-items: end; }
.table-result { border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; background: var(--panel-2); }
.table-result h3 { margin: 0; }
.loot-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.loot-line .toolbar { margin: 0; }
.shop-table tr.sold-out td { opacity: .5; }
.gifts-box { margin-top: 16px; }
.quest-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: start; }
.quest-col h3 { margin-top: 0; }
.quest-card { border: 1px solid var(--edge); border-radius: var(--radius); background: var(--panel); padding: 8px 10px; margin-bottom: 8px; }
.quest-card.open { border-color: var(--accent); }
.quest-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.quest-head select { width: auto; font-size: var(--fs-sm); padding: 2px 4px; }
.quest-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.quest-move { padding: 1px 5px; font-size: var(--fs-xs); line-height: 1.2; }
.quest-title { font-weight: 600; text-align: left; }
.quest-done .quest-title, .quest-failed .quest-title { color: var(--muted); }
.quest-failed .quest-title { text-decoration: line-through; }
.archived-camps { margin: 14px 0; }
.archived-camps summary { cursor: pointer; color: var(--muted); }
@media (max-width: 760px) {
  .entry-pic { float: none; display: block; margin: 0 0 10px; max-width: 100%; }
  .entry-editor .form-grid.six, .monster-editor .form-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entries-page .entry-list { max-height: 40vh; }
}
.warn-text { color: var(--warn); }

/* rolling with real dice: the options of a roll, the number typed in; a roll shown on the players' Party page */
.roll-manual input[type="number"], .loot-steps input[type="number"] { width: 7em; }
.roll-options { max-height: 20em; overflow: auto; margin-top: .4em; }
.roll-options table { margin: 0; }
.shown-roll { border-left: 3px solid var(--accent); }

/* campaign Base tab */
.base .small-num { width: 64px; }
.base .base-name { font: inherit; font-weight: 700; border: 1px solid transparent; background: transparent; color: inherit; width: min(100%, 22em); }
.base .base-name:hover, .base .base-name:focus { border-color: var(--line, #8884); }
.base textarea { width: 100%; }
.base-list .tab { margin-right: 4px; }
.base-log { max-height: 16em; overflow: auto; }
.base-class { margin: 6px 0; }
.sb-ev td { vertical-align: top; min-width: 9em; }
.sb-ev td.sb-hit { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 600; }

/* homebrew rules (js/homebrew.js) */
.hb-insp { display: inline-flex; align-items: center; gap: 4px; align-self: center; }
.hb-insp .hb-add { font-size: var(--fs-sm); }
.hb-boxes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; align-items: flex-start; }
.hb-boxes .play-box { min-width: 14em; }
.hb-count { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hb-count b { font-size: var(--fs-xl); }
.hb-spend { display: flex; flex-wrap: wrap; gap: 4px; }
.hb-sec { margin-bottom: 14px; }
.hb-picks select { margin: 2px 4px 2px 0; }
.shade-box { border-color: var(--accent); }
.sheet-skills h4 { margin: 6px 0 2px; font-size: var(--fs-sm); text-transform: uppercase; color: var(--muted); }

/* ---------- colour roles: lore (rules blocks), act (secondary actions, whose turn) ---------- */
/* rules blocks: entry names in the serif, labels, scores and section headings in lore */
.detail-head h2 { font-family: var(--display); font-weight: normal; font-variant: small-caps; letter-spacing: .01em; color: var(--lore); }
.detail-head { border-bottom: 2px solid; border-image: linear-gradient(90deg, var(--lore), transparent) 1; margin-bottom: 12px; }
.detail-head p { margin-bottom: 8px; }
.stat-block > p > b { color: var(--lore); }
.stat-block .mon-scores { border-top: 1px solid var(--lore-line); border-bottom: 1px solid var(--lore-line); }
.stat-block .mon-scores th { color: var(--lore); }
.stat-block h4 { color: var(--lore); font-family: var(--display); font-weight: normal; font-variant: small-caps; text-transform: none; font-size: var(--fs-xl);
  border-bottom: 1px solid; border-image: linear-gradient(90deg, var(--lore), transparent) 1; }
.stat-block .mon-act b i { color: var(--text); }
.stat-block .roll-btn, .comp-detail .roll-btn { border-color: var(--lore-line); color: var(--lore); background: color-mix(in srgb, var(--lore) 8%, var(--panel)); border-radius: var(--r-sm); }
.stat-block .roll-btn:hover, .comp-detail .roll-btn:hover { border-color: var(--lore); background: color-mix(in srgb, var(--lore) 18%, var(--panel)); color: var(--text); }
.stat-block .save-dc { color: var(--lore); }
/* dice elsewhere (sheet, spells): a gold edge so they read as buttons */
.roll-btn { border-color: var(--accent-line); }

/* secondary actions in a panel's header: teal outline; toggled buttons: a teal wash */
.group-head .toolbar .btn:not(.primary):not(.danger) { background: none; border-color: var(--act-line); color: var(--act); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.group-head .toolbar .btn:not(.primary):not(.danger):hover:not(:disabled) { background: color-mix(in srgb, var(--act) 12%, transparent); border-color: var(--act); }
.btn.active:not(.primary):not(.danger), .group-head .toolbar .btn.active:not(.primary):not(.danger) { background: color-mix(in srgb, var(--act) 18%, var(--panel)); border-color: var(--act); color: var(--text); }
/* the fight's own main button (Next turn) */
#encRunner .btn.primary { background: var(--act); border-color: var(--act); color: var(--act-ink); }
#encRunner .btn.primary:hover:not(:disabled) { background: color-mix(in srgb, #fff 12%, var(--act)); border-color: color-mix(in srgb, #fff 12%, var(--act)); }
.enc-order .chip.now b { color: var(--act); }
.enc-banner { border-color: var(--act-line); }

/* top bar: uppercase sections, the current one underlined */
.mainnav .nav-items > button { font-size: var(--fs-md); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.mainnav .nav-items > button.active { background: none; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--r) var(--r) 0 0; }

/* save status as a pill with a dot */
.save-status { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border: 1px solid var(--edge); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--muted); }
.save-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.save-status.saved { color: var(--ok); border-color: var(--ok-line); }
.save-status.saving { border-color: var(--accent-line); }
.save-status.local { border-color: var(--warn-line); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.save-status.error { border-color: var(--danger); background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* panel headers and the roll log */
.group-head h3, .tray-head b { letter-spacing: .01em; }
.subblock > .group-head { border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.roll-head b { color: var(--text); }

/* sheet: hit points by how many are left; spell slots in the spell colour */
.hp-box.hp-half .hp-now b { color: var(--warn); }
.hp-box.hp-low .hp-now b, .hp-box.down .hp-now b { color: var(--bad); }
.hp-box:not(.hp-half):not(.hp-low):not(.down) .hp-now b { color: var(--ok-strong); }
.slot-row .pip { border-color: var(--magic); }
.slot-row .pip.used { background: var(--magic); }
.slot-row .pip:hover { box-shadow: 0 0 0 2px var(--magic); }
.slot-row > span:first-child { color: var(--magic); font-weight: 600; }
@media print { .detail-head, .stat-block h4, .sheet h3 { border-image: none; border-color: #bbb; } }

/* ---------- colour in the remaining places ---------- */
/* bars (hit points, carrying): our colours instead of the browser's */
meter { -webkit-appearance: none; appearance: none; background: var(--panel-2); border: 0; border-radius: var(--r-pill); overflow: hidden; }
meter::-webkit-meter-bar { background: var(--panel-2); border: 0; border-radius: var(--r-pill); height: 100%; }
meter::-webkit-meter-optimum-value { background: var(--ok); border-radius: var(--r-pill); }
meter::-webkit-meter-suboptimum-value { background: var(--warn); border-radius: var(--r-pill); }
meter::-webkit-meter-even-less-good-value { background: var(--bad); border-radius: var(--r-pill); }
meter::-moz-meter-bar { background: var(--ok); border-radius: var(--r-pill); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--bad); }

/* magic item rarity: the name or the rarity word (li: only the item's name) */
.rar-uncommon:not(li), li.rar-uncommon > .info-name { color: var(--r-uncommon); }
.rar-rare:not(li), li.rar-rare > .info-name { color: var(--r-rare); }
.rar-veryrare:not(li), li.rar-veryrare > .info-name { color: var(--r-veryrare); }
.rar-legendary:not(li), li.rar-legendary > .info-name { color: var(--r-legendary); }
.rar-artifact:not(li), li.rar-artifact > .info-name { color: var(--r-artifact); }

/* sheet: section headings in gold small caps over a fading rule; ability modifiers and the vital numbers */
.sheet h3 { font-family: var(--display); font-weight: normal; font-variant: small-caps; text-transform: none; letter-spacing: .02em; font-size: var(--fs-xl); color: var(--accent);
  border-bottom: 1px solid; border-image: linear-gradient(90deg, var(--accent-line), transparent) 1; }
.sf-group h4 { color: var(--accent); }
.ab b { color: var(--accent); }
.ab span, .stat span { color: var(--muted); }
.stat.st-vital { box-shadow: inset 0 -2px 0 var(--accent-line); }
.ac-box .big { color: var(--accent); }

/* spells: ritual / concentration marks in the spell colour */
.mark { color: var(--magic); border-color: var(--magic-line); opacity: 1; }

/* notices by meaning (the plain one stays gold) */
.notice.ok, .notice.levelup-ready { background: color-mix(in srgb, var(--ok) 10%, var(--panel)); border-color: var(--ok-line); }
.notice.warn, .notice.warn-box { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color: var(--warn-line); }
.notice.dm-notes, .notice.ddb-report, .notice.enc-opts { background: color-mix(in srgb, var(--info) 9%, var(--panel)); border-color: var(--info-line); }

/* tags by meaning */
.tag.info { border-color: var(--info-line); color: var(--info); }
.tag.magic { border-color: var(--magic-line); color: var(--magic); }
.tag.bad { border-color: var(--danger); color: var(--bad); }

/* character list: class and level in gold, a gold edge on hover */
.char-card-main span { color: var(--accent); font-weight: 600; font-size: var(--fs-md); }
.char-card:hover { border-color: var(--accent-line); }

/* Compendium: level badges and table headers */
details.feature .lvl { color: var(--accent); border-color: var(--accent-line); }
.class-table th { background: var(--tint); color: var(--text); }
.class-table caption { color: var(--lore); font-family: var(--display); font-variant: small-caps; font-size: var(--fs-lg); text-align: left; }

/* ---------- raised panels (the palette study look): content sits on cards, not on the page ---------- */
.subblock { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 12px 16px; margin: 10px 0 16px; box-shadow: var(--shadow-sm); }
.subblock > h3:first-child, .subblock > .group-head:first-child h3 { margin-top: 0; }
.subblock .subblock { background: var(--panel-2); border-color: transparent; }
.turn-card, .tracker-box { border-left-color: var(--edge); }
.enc-run-grid > .subblock { margin: 0; }
/* the creature whose turn it is: its name as on a stat block (monsters in wine, characters in gold) */
.turn-card > .group-head h3 { font-family: var(--display); font-weight: normal; font-variant: small-caps; text-transform: none; font-size: var(--fs-2xl); color: var(--accent); }
.turn-card:has(.stat-block) > .group-head h3 { color: var(--lore); }
.turn-card > .group-head h3 small { font-family: var(--sans); font-variant: normal; font-size: var(--fs-md); }
.turn-stats > summary { color: var(--muted); cursor: pointer; }
/* initiative table: init in gold, the row whose turn it is in azure, rows as bands */
table.init-table td:nth-child(2) input { color: var(--accent); font-weight: 700; }
table.init-table tr.turn td:nth-child(2) input { color: var(--act); }
table.init-table tbody > tr:not(.turn) > td { border-bottom-color: var(--line-soft); }
table.init-table tr.turn td { background: color-mix(in srgb, var(--act) 10%, var(--panel)); }


/* Owlbear Rodeo link (js/obr.js) */
.obr-badge { margin-right: 6px; white-space: nowrap; align-self: center; }
.obr-badge.ok { color: var(--ok-strong); }
.obr-tok { white-space: nowrap; }
.obr-tok.on { color: var(--ok-strong); }
.obr-opts { margin-top: 6px; }