/* Worlds Beyond: character sheet and battlemap */
[hidden]:not([hidden=until-found i]) { display: none !important; }

/* Layout: a planar chart. The portrait sits as a world in orbit, then an identity ledger, a vitals band, the attributes with their dice tray, the armor doll, and the advancement log */
:root {
  --bg: #E4E7EE;
  --sheet: #F6F7FA;
  --field: #ECEEF4;
  --ink: #1B2036;
  --muted: #5C6379;
  --rule: #C4C9D7;
  --track: #DCE0E9;
  --brass: #8C6220;
  --brass-soft: rgba(140, 98, 32, 0.12);
  --verdigris: #2A6F66;
  --verdigris-soft: rgba(42, 111, 102, 0.14);
  /* drawn over map pictures, which look the same in either theme */
  --map-line: #0B0B10;
  --map-reach: rgba(226, 178, 96, 0.1);
  --map-reach-edge: #E2B260;
  --map-free: rgba(110, 206, 190, 0.1);
  --map-free-edge: #6ECEBE;
  --map-line-light: #EDE3CF;
  --blood: #A13A35;
  --shadow: rgba(27, 32, 54, 0.24);
  --font-display: "Marcellus SC", "Trajan Pro", "Palatino Linotype", Georgia, serif;
  --font-body: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --font-label: "Alegreya Sans SC", "Alegreya Sans", "Gill Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D111E; --sheet: #141A2B; --field: #1A2136; --ink: #E7E4D8; --muted: #959CB2;
    --rule: #2C3452; --track: #232B44; --brass: #D6A85C; --brass-soft: rgba(214, 168, 92, 0.14);
    --verdigris: #5DB6AA; --verdigris-soft: rgba(93, 182, 170, 0.16); --blood: #DE6C63; --shadow: rgba(0, 0, 0, 0.55); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D111E; --sheet: #141A2B; --field: #1A2136; --ink: #E7E4D8; --muted: #959CB2;
  --rule: #2C3452; --track: #232B44; --brass: #D6A85C; --brass-soft: rgba(214, 168, 92, 0.14);
  --verdigris: #5DB6AA; --verdigris-soft: rgba(93, 182, 170, 0.16); --blood: #DE6C63; --shadow: rgba(0, 0, 0, 0.55); color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  padding-block: 24px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
body.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.sr-only, .field input.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sheet {
  max-width: 980px;
  margin: 0 auto;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(16px, 4vw, 36px);
  display: grid;
  gap: 34px;
}

/* inputs, shared */
input, textarea { font: inherit; color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.5; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:not([type="file"]):focus, textarea:focus { outline: none; }
input:not([type="file"]):focus-visible, textarea:focus-visible { background: var(--brass-soft); box-shadow: 0 2px 0 0 var(--brass); }
input[data-auto].manual { color: var(--brass); }

.btn {
  font-family: var(--font-label); font-weight: 700; font-size: 14px; letter-spacing: 0.1em;
  color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 3px;
  padding: 6px 12px; cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.danger { border-color: var(--blood); color: var(--blood); }
.btn.strong { border-color: var(--brass); color: var(--brass); }
.btn-link {
  justify-self: start; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-label); font-weight: 700; font-size: 13.5px; letter-spacing: 0.08em; color: var(--brass);
}
.btn-link:disabled { opacity: 0.45; cursor: default; }
.btn-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
.xbtn {
  width: 24px; height: 24px; padding: 0; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.xbtn svg { width: 15px; height: 15px; }
.xbtn:hover:not(:disabled) { color: var(--brass); }
.xbtn.del:hover:not(:disabled) { color: var(--blood); }
.xbtn:disabled { opacity: 0.3; cursor: default; }
.xbtn:focus-visible { outline: 2px solid var(--brass); outline-offset: 0; }

/* masthead */
.masthead {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--brass);
}
.eyebrow {
  margin: 0; font-family: var(--font-label); font-weight: 700; font-size: 13px;
  letter-spacing: 0.24em; color: var(--brass);
}
h1 {
  margin: 2px 0 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 9vw, 62px); line-height: 1; letter-spacing: 0.03em; text-wrap: balance;
}
.meta { margin: 0; font-family: var(--font-label); font-size: 13px; letter-spacing: 0.14em; color: var(--muted); }
.ornament {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 18px; height: 18px; padding: 0 10px; box-sizing: content-box;
  background: var(--sheet); color: var(--brass);
}

/* identity + details */
.top {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px 40px; align-items: center;
}
.identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.avatar { --av: 120px; position: relative; flex: none; width: var(--av); height: var(--av); margin: 16px 20px 16px 14px; }
.orbit {
  position: absolute; inset: -13px; border-radius: 50%;
  border: 1px dashed var(--rule); pointer-events: none;
  animation: orbit 60s linear infinite;
}
.orbit::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 3px var(--sheet);
}
@keyframes orbit { to { transform: rotate(360deg); } }
.portrait {
  position: relative; z-index: 1; width: 100%; height: 100%;
  display: grid; place-items: center; overflow: hidden; cursor: pointer;
  border-radius: 50%; border: 2px solid var(--brass); background: var(--field);
}
.portrait:hover { background: var(--brass-soft); }
.portrait:focus-within { outline: 2px solid var(--brass); outline-offset: 5px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-empty {
  display: grid; justify-items: center; gap: 4px; color: var(--muted);
  font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.14em;
}
.portrait-empty svg { width: 22px; height: 22px; color: var(--brass); }
.portrait-clear {
  position: absolute; z-index: 3; top: -4px; right: -6px; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: var(--sheet); border: 1px solid var(--rule); color: var(--muted); font-size: 16px; line-height: 1;
}
.portrait-clear:hover { color: var(--blood); border-color: var(--blood); }
.portrait-clear:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.octagon { clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.level-badge {
  position: absolute; z-index: 2; right: -18px; bottom: -12px; width: 56px; height: 56px;
  background: var(--brass); display: grid; place-items: center;
}
.level-badge::before { content: ""; position: absolute; inset: 2px; background: var(--sheet); clip-path: inherit; }
.level-badge > * { position: relative; }
.level-inner { display: grid; justify-items: center; line-height: 1; }
.level-inner label { font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; color: var(--brass); }
.level-inner input {
  width: 38px; text-align: center; border: 0; background: transparent;
  font-family: var(--font-display); font-size: 21px; padding: 1px 0 0;
}

.names { flex: 1; min-width: 0; display: grid; gap: 14px; }
.field { display: grid; gap: 2px; min-width: 0; align-content: start; }
.field label, .field .flabel {
  font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.15em; color: var(--muted);
}
.field input {
  width: 100%; min-width: 0; font-size: 17px; padding: 5px 2px;
  background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
}
.field.hero input { font-family: var(--font-display); font-size: clamp(22px, 5.6vw, 32px); padding-bottom: 3px; }

.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; }
.details .span-2, .details .wide { grid-column: span 2; }

/* section heads */
.sec-head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.sec-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 23px; letter-spacing: 0.05em; }
.sec-head .star { width: 14px; height: 14px; color: var(--brass); flex: none; }
.sec-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.note { margin: -4px 0 18px; max-width: 65ch; font-size: 14.5px; color: var(--muted); }
.note b { color: var(--brass); font-weight: 700; }
.hint { margin: 0; min-height: 1.4em; font-size: 13.5px; color: var(--muted); }

/* vitals */
.vitals-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; align-items: start; }
.pools { display: grid; gap: 24px; }
.pool.health { --pool: var(--blood); }
.pool.mana { --pool: var(--verdigris); }
.pool.mana.holy { --pool: var(--brass); }
.pool-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pool-name { font-family: var(--font-label); font-weight: 700; font-size: 15px; letter-spacing: 0.18em; color: var(--pool); padding-bottom: 6px; }
.pool-nums { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); }
.pool-nums input {
  width: 4.4ch; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  font-family: var(--font-display); font-size: 30px; line-height: 1.1; text-align: right; padding: 0 2px;
  font-variant-numeric: tabular-nums;
}
.pool-nums input.max { font-size: 20px; color: var(--muted); text-align: left; }
.pool-nums input.max.manual { color: var(--brass); }
.slash { color: var(--muted); font-size: 20px; }
.bar { height: 9px; margin-top: 10px; background: var(--track); border-radius: 2px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 100%; background: var(--pool); transition: width 0.3s ease; }
.bar span.idle { opacity: 0.3; }
.pool-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.foot-label { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.hit-die { display: flex; align-items: baseline; gap: 8px; }
.hit-die input {
  width: 9ch; padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  font-family: var(--font-display); font-size: 19px;
}
.pool-src { font-size: 13px; color: var(--muted); }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.seg button {
  font-family: var(--font-label); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em;
  padding: 5px 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--pool); color: var(--sheet); }
.seg button:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }

.ratings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rating {
  display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center;
  padding: 10px 8px; border: 1px solid var(--rule); border-radius: 4px; background: var(--field);
}
.rating label { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; line-height: 1.2; color: var(--muted); }
.rating-val { display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.rating-val input {
  width: 3.2ch; border: 0; background: transparent; text-align: center;
  font-family: var(--font-display); font-size: 32px; line-height: 1.15; padding: 0;
}
.unit { font-family: var(--font-label); font-size: 13px; color: var(--muted); letter-spacing: 0.08em; }
.rsrc { font-size: 12.5px; color: var(--muted); }

.tracker {
  display: grid; gap: 10px; align-self: stretch; align-content: start;
  padding: 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--field);
}
.tr-top, .tr-foot { display: flex; justify-content: space-between; gap: 10px; }
.tr-top { align-items: flex-start; }
.tr-top.sub { padding-top: 10px; border-top: 1px dashed var(--rule); }
.tr-foot { align-items: center; }
.tr-head { display: grid; gap: 1px; min-width: 0; }
.tr-title { font-family: var(--font-label); font-weight: 700; font-size: 15px; letter-spacing: 0.18em; color: var(--brass); }
.tr-src { font-size: 13px; color: var(--muted); }
.tr-max { display: flex; align-items: baseline; gap: 6px; flex: none; }
.tr-max label { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.tr-max input {
  width: 3ch; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  font-family: var(--font-display); font-size: 20px; text-align: center; padding: 0;
}
.pips { display: flex; flex-wrap: wrap; gap: 2px; min-height: 32px; }
.pip {
  position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: transparent;
  display: grid; place-items: center; cursor: pointer; border-radius: 4px;
}
.pip::before {
  content: ""; width: 15px; height: 15px; transform: rotate(45deg); border-radius: 2px;
  border: 1.5px solid var(--muted); transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pip.on::before { background: var(--brass); border-color: var(--brass); }
.pip:hover::before { border-color: var(--brass); }
.pip:focus-visible { outline: 2px solid var(--brass); outline-offset: 0; }
.pip.ring::before { transform: none; border-radius: 50%; width: 15px; height: 15px; }
.pip.star::before, .pip.star::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border: 0; border-radius: 1px; background: var(--rule); transform: none; transition: background-color 0.15s ease;
}
.pip.star::before { transform: rotate(45deg); }
.pip.star.on::before, .pip.star.on::after { background: var(--brass); }
.tr-count { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* dice tray */
.roller {
  display: grid; gap: 12px; margin-bottom: 26px;
  padding: 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--field);
}
.roller-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.roller-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rolls { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.roll-chip {
  position: relative; min-width: 0; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
.roll-chip.empty {
  display: grid; justify-items: center; gap: 1px; padding: 8px 4px 6px;
  border-style: dashed; background: transparent; color: var(--muted); cursor: default; touch-action: auto;
}
.chip-main {
  width: 100%; display: grid; justify-items: center; gap: 1px; padding: 8px 4px 6px;
  border: 0; background: transparent; color: inherit; font: inherit; cursor: inherit;
}
.chip-main:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; border-radius: 4px; }
.rv { font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rd { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rtag { min-height: 1.35em; font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; color: var(--brass); }
.roll-chip.used .rv { color: var(--muted); }
.roll-chip.selected { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.chip-x { position: absolute; top: 1px; right: 1px; }


/* attributes */
.attr-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.group h3 { margin: 0 0 10px; font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.22em; color: var(--brass); }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat {
  display: grid; gap: 10px; align-content: start; min-width: 0;
  padding: 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.stat.ascended { border-color: var(--brass); }
.stat.drop-ok { border-style: dashed; border-color: var(--brass); cursor: pointer; }
.stat.drop-hover { background: var(--brass-soft); }
.stat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.abbr { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.07em; }
.stat-name { font-size: 13.5px; color: var(--muted); }
.stat-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cell { display: grid; justify-items: center; gap: 4px; }
.cap { font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; color: var(--muted); }
.score {
  width: 2.6ch; padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  font-family: var(--font-display); font-size: 40px; line-height: 1.15; text-align: center;
  font-variant-numeric: tabular-nums;
}
.mod { position: relative; width: 54px; height: 54px; display: grid; place-items: center; background: var(--brass); }
.mod::before { content: ""; position: absolute; inset: 2px; background: var(--field); clip-path: inherit; }
.mod-input {
  position: relative; width: 46px; padding: 0; border: 0; background: transparent; text-align: center;
  font-family: var(--font-display); font-size: 21px;
}
.milestones {
  position: relative; list-style: none; margin: 0; padding: 9px 0 0; border-top: 1px dashed var(--rule);
  display: grid; gap: 5px; font-size: 13px; line-height: 1.25; color: var(--muted);
}
.ms-btn {
  width: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 7px;
  padding: 1px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: help;
}
.ms-btn:hover .ms-name, .ms-btn.open .ms-name { text-decoration: underline dotted; text-underline-offset: 3px; }
.ms-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; border-radius: 2px; }
.milestones .pop { left: -6px; right: -6px; }
.ms-gem { width: 7px; height: 7px; transform: rotate(45deg) translateY(-1px); border: 1px solid var(--muted); align-self: center; }
.ms-at { font-weight: 700; font-variant-numeric: tabular-nums; }
.milestones li.reached { color: var(--ink); }
.milestones li.reached .ms-gem { background: var(--brass); border-color: var(--brass); }
.milestones li.reached .ms-at { color: var(--brass); }

/* equipment: the armor doll */
.equip-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px 32px; align-items: start; }
.doll-col { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.doll { position: relative; width: 100%; max-width: 440px; aspect-ratio: 400 / 500; margin-bottom: 6px; }
.figure { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.figure .part, .figure .body { fill: var(--field); stroke: var(--rule); stroke-width: 1.5; stroke-linejoin: round; transition: fill 0.25s ease, stroke 0.25s ease; }
.figure .part.worn { fill: var(--brass-soft); stroke: var(--brass); }
.figure .part.acc { fill: none; stroke-dasharray: 3 3; }
.figure .part.acc.worn { fill: var(--brass-soft); stroke-dasharray: none; }
.figure .part.gem.worn { fill: var(--brass); }
.figure .part.chain, .figure .part.chain.worn { fill: none; }
.figure .part.target { stroke: var(--brass); stroke-dasharray: 5 4; }
.figure .seam { fill: none; stroke: var(--rule); stroke-width: 1; }
.figure .lead { fill: none; stroke: var(--rule); stroke-width: 1.2; transition: stroke 0.25s ease; }
.figure .lead.worn { stroke: var(--brass); }
.figure .anchor { fill: var(--sheet); stroke: var(--rule); stroke-width: 1.5; transition: fill 0.25s ease, stroke 0.25s ease; }
.figure .anchor.worn { fill: var(--brass); stroke: var(--brass); }
.figure .plinth { fill: none; stroke: var(--rule); stroke-dasharray: 2 5; }
.slot {
  position: absolute; width: 28%; min-height: 17.2%;
  display: flex; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.slot.cl { left: 0; }
.slot.cr { left: 72%; }
.slot.r1 { top: 2%; }
.slot.r2 { top: 21.6%; }
.slot.r3 { top: 41.2%; }
.slot.r4 { top: 60.8%; }
.slot.r5 { top: 80.4%; }
.slot.filled { border-color: var(--brass); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.slot.selected { box-shadow: inset 0 0 0 1px var(--brass); }
.slot.drop-ok { border-style: dashed; border-color: var(--brass); }
.slot.drop-hover { background: var(--brass-soft); }
.slot-main {
  flex: 1; min-width: 0; display: grid; align-content: start; gap: 1px; text-align: left;
  padding: 6px 8px 7px; border: 0; background: transparent; color: inherit; font: inherit; cursor: inherit;
}
.slot:not(.filled) .slot-main { cursor: pointer; }
.slot-main:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; border-radius: 4px; }
.slot-label { font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.slot-name {
  font-size: 13.5px; line-height: 1.2; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.slot-empty { font-size: 13px; color: var(--muted); opacity: 0.7; }
.slot-ar { padding-right: 22px; font-family: var(--font-display); font-size: 16px; line-height: 1.2; color: var(--brass); }
.slot-x { position: absolute; right: 1px; bottom: 1px; }
.hands-head { width: 100%; max-width: 440px; margin-top: 8px; }
.hands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 440px; }
.slot.hand { position: relative; left: auto; top: auto; width: auto; min-height: 74px; }
.slot.blocked { border-style: dashed; }
.attacks { display: grid; gap: 8px; width: 100%; max-width: 440px; }
.atk { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--rule); border-left: 3px solid var(--brass); border-radius: 0 4px 4px 0; background: var(--field); }
.atk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.atk-name { font-size: 16px; overflow-wrap: anywhere; }
.atk-ap { flex: none; font-family: var(--font-display); font-size: 15px; color: var(--brass); }
.atk-line { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.atk-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.atk-empty { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.worn-rest { margin: 0; font-size: 12.5px; color: var(--muted); font-style: italic; }
.card-ar b.sm { font-size: 16px; }

/* rolling */
.roll-stat {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer; border-radius: 2px;
}
.roll-stat svg { width: 14px; height: 14px; color: var(--brass); opacity: 0.65; transition: opacity 0.15s ease; }
.roll-stat:hover svg { opacity: 1; }
.roll-stat:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.mini-roll {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 8px;
  border: 1px solid var(--rule); border-radius: 3px; background: transparent; cursor: pointer;
  font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--brass);
}
.mini-roll svg { width: 13px; height: 13px; }
.mini-roll:hover { border-color: var(--brass); }
.mini-roll:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  width: min(440px, calc(100% - 32px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 14px; align-items: center;
  padding: 12px 8px 12px 16px; border: 1px solid var(--brass); border-radius: 6px; background: var(--sheet); box-shadow: 0 12px 30px var(--shadow);
}
.toast.pop-in { animation: toast-in 0.22s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast-total { min-width: 1.5em; text-align: center; font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--brass); font-variant-numeric: tabular-nums; }
.toast-total.nat20 { color: var(--verdigris); }
.toast-total.nat1 { color: var(--blood); }
.toast-body { display: grid; gap: 2px; min-width: 0; }
.toast-title { font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; color: var(--muted); overflow-wrap: anywhere; }
.toast-math { font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.toast-note { font-size: 13.5px; color: var(--verdigris); }
.toast-note:empty { display: none; }
.toast #toastClose { align-self: start; }
.toast-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.toast-actions:empty { display: none; }

/* long rest */
.rest { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.rest .pool-src { flex: 1 1 14em; }

/* defenses */
.defs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.def { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--field); }
.def.ready { border-color: var(--brass); }
.def-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.def-name { font-family: var(--font-display); font-size: 21px; letter-spacing: 0.04em; }
.def-kind { font-family: var(--font-label); font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em; color: var(--verdigris); }
.def p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.def .def-rel { color: var(--ink); }
.def-tbd { padding-top: 8px; border-top: 1px dashed var(--rule); font-style: italic; }
.def-roll { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.def-num { font-family: var(--font-display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.def:not(.ready) .def-num { color: var(--muted); }
.defs-foot { margin: 12px 0 0; max-width: 65ch; font-size: 13.5px; color: var(--muted); }
.incoming {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px;
  padding: 12px 14px; border: 1px dashed var(--rule); border-radius: 4px;
}
.incoming .field { width: 9em; }
.chk { display: inline-flex; align-items: center; gap: 7px; padding-bottom: 7px; font-size: 14px; cursor: pointer; }
.chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--brass); }
.incoming .pool-src { flex: 1 1 14em; padding-bottom: 7px; }

/* concentration */
.conc {
  grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--field);
}
.conc.on { border-color: var(--verdigris); }
.conc-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; border: 1px solid var(--rule); background: var(--track); transition: background-color 0.2s ease; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 0.2s ease, background-color 0.2s ease; }
#concOn:checked + .sw { background: var(--verdigris); border-color: var(--verdigris); }
#concOn:checked + .sw::after { transform: translateX(14px); background: var(--sheet); }
.conc-toggle:focus-within .sw { outline: 2px solid var(--brass); outline-offset: 2px; }
.conc-lab { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); }
.conc.on .conc-lab { color: var(--verdigris); }
#concWhat { flex: 1 1 8em; min-width: 0; padding: 3px 2px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; font-size: 15px; }
.conc:not(.on) #concWhat { display: none; }
.conc .mini-roll { margin-top: 0; margin-left: auto; }
.doll-total { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.doll-ar { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--brass); font-variant-numeric: tabular-nums; }

.equip-side { display: grid; gap: 24px; min-width: 0; }
.list-wrap { display: grid; gap: 10px; }
.list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }

.worn { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--brass); }
.worn-row {
  display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.worn-slot { padding-top: 3px; font-family: var(--font-label); font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em; color: var(--muted); }
.worn-body { min-width: 0; display: grid; gap: 4px; }
.worn-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.worn-name { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.worn-ar { flex: none; font-family: var(--font-display); font-size: 16px; color: var(--brass); }
.abils { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--brass-soft); display: grid; gap: 3px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.abils b { color: var(--ink); font-weight: 700; }
.worn-none { margin: 0; font-size: 13px; color: var(--muted); opacity: 0.75; }
.worn-tools { display: flex; gap: 2px; }
.worn-empty { padding: 16px 0; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--rule); }

.pack {
  min-height: 112px; padding: 10px; border: 1px dashed var(--rule); border-radius: 4px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; align-content: start;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pack.drop-ok { border-color: var(--brass); cursor: pointer; }
.pack.drop-hover { background: var(--brass-soft); }
.pack-empty { margin: 0; align-self: center; padding: 18px 8px; font-size: 14px; color: var(--muted); text-align: center; grid-column: 1 / -1; }
.card {
  position: relative; min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px;
  padding: 8px 4px 8px 8px; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
.card.selected { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.card-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--field); color: var(--brass); }
.card-icon svg { width: 21px; height: 21px; }
.card-main {
  flex: 1; min-width: 0; display: grid; gap: 1px; padding: 0; text-align: left;
  border: 0; background: transparent; color: inherit; font: inherit; cursor: inherit;
}
.card-main:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
.card-name { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.card-meta { font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.card-ar { flex: none; display: grid; justify-items: center; line-height: 1; }
.card-ar b { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--brass); }
.card-ar span { font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; color: var(--muted); }
.card-tools { flex: none; display: grid; gap: 2px; }
.card-bonus, .worn-bonus { font-family: var(--font-label); font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em; color: var(--verdigris); overflow-wrap: anywhere; }
.worn-bonus { margin: 0; }
.gear { font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; color: var(--verdigris); white-space: nowrap; }
.bonus-rows { display: grid; gap: 8px; margin-top: 4px; }
.bonus-rows:empty { display: none; }
.bonus-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 4.5em auto; gap: 8px; align-items: center;
  padding: 6px 4px 6px 10px; border-left: 2px solid var(--verdigris); border-radius: 0 4px 4px 0; background: var(--sheet);
}
.bonus-row select, .bonus-row input {
  width: 100%; min-width: 0; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: transparent; font: inherit; font-size: 15px; color: var(--ink);
}
.bonus-row select { cursor: pointer; background-color: var(--sheet); }
.bonus-row select optgroup { background-color: var(--sheet); color: var(--brass); font-weight: 700; }
.bonus-row select option { background-color: var(--sheet); color: var(--ink); font-weight: 400; }
.score.geared { color: var(--verdigris); }
.bonus-row select:focus { outline: none; }
.bonus-row select:focus-visible { background: var(--brass-soft); box-shadow: 0 2px 0 0 var(--brass); }
.card-abils { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.abil-chip {
  padding: 2px 9px; border: 1px solid var(--brass); border-radius: 999px; background: transparent;
  font: inherit; font-size: 12.5px; line-height: 1.3; color: var(--brass); cursor: help;
}
.abil-chip.open { background: var(--brass-soft); }
.abil-chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
/* Popups sit against their card or milestone list, so they always fit inside it. */
.pop {
  display: none; position: absolute; z-index: 20; left: 4px; right: 4px; bottom: calc(100% + 6px);
  padding: 8px 10px; border: 1px solid var(--brass); border-radius: 4px; background: var(--sheet);
  box-shadow: 0 8px 20px var(--shadow); text-align: left; cursor: default;
  font-size: 13.5px; line-height: 1.4; color: var(--ink); white-space: normal; overflow-wrap: anywhere;
}
.pop b { display: block; margin-bottom: 2px; font-weight: 700; color: var(--brass); }
.has-tip.open .pop, .has-tip:focus-visible .pop { display: block; }
@media (hover: hover) { .has-tip:hover .pop { display: block; } }
.lifting { opacity: 0.35; }
.ghost {
  position: fixed; z-index: 60; margin: 0; pointer-events: none;
  transform: translate(-50%, -70%) rotate(-3deg); box-shadow: 0 12px 28px var(--shadow);
}
.card.ghost { width: 230px; }
.roll-chip.ghost { width: 76px; display: grid; justify-items: center; padding: 8px 4px; }

.forge {
  display: grid; gap: 14px; padding: 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--field);
}
.forge.editing { border-color: var(--brass); }
.forge-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
.forge-row .grow { flex: 1 1 12em; }
.forge-row .ar-field { width: 6em; }
.pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pick button {
  font-family: var(--font-label); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em;
  padding: 5px 10px; border: 1px solid var(--rule); border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer;
}
.pick button[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--sheet); }
.pick button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.abil-rows { display: grid; gap: 10px; margin-top: 4px; }
.abil-rows:empty { display: none; }
.abil-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px;
  padding: 8px 4px 8px 10px; border-left: 2px solid var(--brass); border-radius: 0 4px 4px 0; background: var(--sheet);
}
.abil-row input, .abil-row textarea {
  grid-column: 1; width: 100%; min-width: 0; padding: 3px 2px;
  background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
}
.abil-row input { font-weight: 700; font-size: 15px; }
.abil-row textarea { font-size: 14.5px; line-height: 1.35; resize: vertical; min-height: 2.6em; }
.abil-row .abil-del { grid-column: 2; grid-row: 1; }
.abil-uses { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13.5px; color: var(--muted); }
.abil-row .abil-uses input { width: 3.6em; font-weight: 400; font-size: 14.5px; }
.abil-uses select, .eff-row select, .eff-row input {
  min-width: 0; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: transparent; font: inherit; font-size: 15px; color: var(--ink);
}
.abil-uses select { font-size: 14px; }
.abil-uses select, .eff-row select { cursor: pointer; background-color: var(--sheet); }
.abil-uses select option, .eff-row select option { background-color: var(--sheet); color: var(--ink); }
.abil-uses select:focus, .eff-row select:focus, .eff-row input:focus { outline: none; }
.abil-uses select:focus-visible, .eff-row select:focus-visible, .eff-row input:focus-visible { background: var(--brass-soft); box-shadow: 0 2px 0 0 var(--brass); }
.eff-rows { display: grid; gap: 8px; margin-top: 4px; }
.eff-rows:empty { display: none; }
.eff-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center;
  padding: 6px 4px 8px 10px; border-left: 2px solid var(--verdigris); border-radius: 0 4px 4px 0; background: var(--sheet);
}
.eff-row .eff-k { width: 100%; }
.eff-params { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.eff-params input { width: 5.5em; }
.eff-params input.wide { flex: 1 1 9em; width: auto; }
.eff-lab { font-size: 13.5px; color: var(--muted); }
.fhint { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.set-row { display: grid; gap: 0; }
.set-row .chk { padding-bottom: 2px; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.06em; }
.uses-line { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
.use-pips { display: inline-flex; flex-wrap: wrap; }
.use-pips .pip { width: 28px; height: 28px; }
.use-pips .pip::before { width: 12px; height: 12px; }
.uses-txt { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.atk-eff { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.05em; color: var(--verdigris); }
.def-val { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.forge-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.forge-error { margin: 0; font-size: 13.5px; color: var(--blood); }

/* advancement */
.log-bar { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.log-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.log-level { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.04em; }
.log-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 4px; }
.log { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.log th, .log td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.log thead th {
  font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.12em;
  color: var(--muted); background: var(--field);
}
.log tbody th { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--brass); }
.log tbody tr:last-child th, .log tbody tr:last-child td { border-bottom-color: var(--brass); }
.log tbody tr.asi { background: var(--brass-soft); }
.log .snap { font-size: 16px; }
.log input {
  width: 3.2ch; padding: 2px 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  font-size: 16px; text-align: center;
}
.log input.roll-in { width: 4.2ch; }
.log input.rolled { animation: rolled 0.9s ease; }
@keyframes rolled { from { background: var(--brass-soft); } to { background: transparent; } }
.roll { display: inline-flex; align-items: center; gap: 4px; }
.die-btn {
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: var(--brass);
}
.die-btn:hover { border-color: var(--brass); }
.die-btn:disabled { opacity: 0.4; cursor: default; }
.die-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.die-btn svg { width: 16px; height: 16px; }
.maxnote { font-size: 14px; color: var(--muted); }
.log .out { font-family: var(--font-display); font-size: 18px; }
.log .out.hp { color: var(--blood); }
.log .out.mp { color: var(--verdigris); }
.log.holy .out.mp { color: var(--brass); }
.log .out.pts { color: var(--brass); }
.log tfoot th, .log tfoot td { border-bottom: 0; background: var(--field); }
.log tfoot th { font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: var(--muted); text-align: right; padding-right: 10px; }
.log-missing { margin: 10px 0 0; font-size: 14px; color: var(--blood); }

/* footer */
.foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--rule);
}
.foot p { margin: 0; font-size: 14px; color: var(--muted); }
.foot p.error { color: var(--blood); }
.confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; }

/* dice mode: advantage and disadvantage, kept on screen so every d20 uses it */
body { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.advbar {
  position: fixed; z-index: 65; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 5px 5px 5px 12px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--sheet); box-shadow: 0 6px 18px var(--shadow);
}
.adv-lab { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); white-space: nowrap; }
.adv-lab svg { width: 14px; height: 14px; color: var(--brass); }
.advbar .seg { flex-wrap: nowrap; border-radius: 999px; }
.advbar .seg button { padding: 6px 11px; white-space: nowrap; }
.advbar[data-mode="adv"] { border-color: var(--verdigris); }
.advbar[data-mode="dis"] { border-color: var(--blood); }
.advbar .seg button[data-mode="norm"][aria-pressed="true"] { background: var(--brass); color: var(--sheet); }
.advbar .seg button[data-mode="adv"][aria-pressed="true"] { background: var(--verdigris); color: var(--sheet); }
.advbar .seg button[data-mode="dis"][aria-pressed="true"] { background: var(--blood); color: var(--sheet); }
.toast { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

/* health: damage, healing, death threshold and bleeding out */
.hp-act { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hp-act input {
  width: 6.5em; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  font-size: 16px; font-variant-numeric: tabular-nums;
}
.hp-act .btn { padding: 5px 11px; }
.btn.heal { border-color: var(--verdigris); color: var(--verdigris); }
.btn.hurt { border-color: var(--blood); color: var(--blood); }
.dt-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; }
.dt-val { font-family: var(--font-display); font-size: 19px; color: var(--blood); font-variant-numeric: tabular-nums; }
.trauma { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.trauma b { min-width: 1.6ch; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 17px; font-variant-numeric: tabular-nums; }
.trauma .xbtn { border: 1px solid var(--rule); }
.dying { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--blood); border-radius: 4px; background: var(--field); }
.dying-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.dying-title { font-family: var(--font-label); font-weight: 700; font-size: 15px; letter-spacing: 0.16em; color: var(--blood); }
.dying-sub { font-size: 13px; color: var(--muted); }
.dying.stable { border-color: var(--verdigris); }
.dying.stable .dying-title { color: var(--verdigris); }
.dying.dead { border-width: 3px; border-style: double; }
.dying .bar { margin-top: 0; }
.bar.death span { background: var(--blood); }
.dying-txt { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.dying-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.dying-acts .chk { padding-bottom: 0; }

/* ability score increases */
.asi-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: -6px 0 18px; }
.asi-bar:empty { display: none; }
.asi-bar.spending { padding: 10px 12px; border: 1px solid var(--brass); border-radius: 4px; background: var(--brass-soft); }
.asi-title { font-family: var(--font-label); font-weight: 700; font-size: 14px; letter-spacing: 0.14em; color: var(--brass); }
.asi-left { font-size: 15px; font-variant-numeric: tabular-nums; }
.asi-sum { font-size: 13.5px; color: var(--muted); }
.asi-bar .pick { margin-top: 0; }
.asi-push { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.asi-row { display: none; align-items: center; justify-content: space-between; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--brass); }
.attr-groups.spending .asi-row { display: flex; }
.asi-row .xbtn { width: 32px; height: 32px; border: 1px solid var(--brass); color: var(--brass); font-size: 20px; }
.asi-row .xbtn:disabled { border-color: var(--rule); color: var(--muted); }
.asi-got { font-family: var(--font-label); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; color: var(--muted); text-align: center; }
.asi-got.on { color: var(--brass); }
.asi-log { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.asi-log b { color: var(--ink); font-weight: 700; }

/* portrait forms */
.form-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.form-thumb {
  width: 40px; height: 40px; padding: 0; overflow: hidden; cursor: pointer; flex: none;
  border-radius: 50%; border: 2px solid var(--rule); background: var(--field);
}
.form-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.form-thumb[aria-pressed="true"] { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.form-thumb:focus-visible, .form-add:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.form-add {
  width: 40px; height: 40px; padding: 0; flex: none; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px dashed var(--brass); background: transparent; color: var(--brass); font-size: 22px; line-height: 1;
}
.form-add:hover { background: var(--brass-soft); }
.forms input#formName { font-size: 15px; }
.form-hint { font-size: 13px; color: var(--muted); }

/* actions that cost AP */
.acts-row { display: grid; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.act { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.act .tr-src { flex: 1 1 14em; min-width: 0; }
.get-in, .move-in { display: inline-flex; align-items: baseline; gap: 8px; }
.get-in input, .move-in input {
  width: 4.2em; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  font-size: 16px; font-variant-numeric: tabular-nums;
}
.move-in input { width: 5em; font-family: var(--font-display); font-size: 20px; }

/* given AP (Command) and Surge's free movement */
.given-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; }
.given-row .foot-label { width: 4.6em; }
.given-row .pips { min-height: 32px; }
.given-row .tr-src { flex: 1 1 10em; min-width: 0; }
.pip.given::before, .pip.free.on::before { background: var(--verdigris); border-color: var(--verdigris); }
.pip.free::before { border-color: var(--verdigris); }
.pip.free:hover::before, .pip.given:hover::before { border-color: var(--brass); }

/* movement */
.side-stack { display: grid; gap: 24px; align-content: start; min-width: 0; }
.move-done { flex: none; padding-top: 2px; }
.move-left { margin: 0; color: var(--verdigris); }
.move-act { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
#movePlan { margin: -4px 0 0; }

/* sheet / battlemap switch */
.views { justify-self: start; display: inline-flex; margin-top: -10px; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.views button {
  font-family: var(--font-label); font-weight: 700; font-size: 14px; letter-spacing: 0.12em;
  padding: 7px 18px; border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
.views button + button { border-left: 1px solid var(--rule); }
.views button[aria-pressed="true"] { background: var(--brass); color: var(--sheet); }
.views button:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; }
/* Only the Battlemap is a different destination; sheet panels use their own tabs. */
main.sheet:not(.view-map) > .mapsec { display: none; }
main.sheet > section[hidden] { display: none !important; }
main.view-map > section:not(.mapsec), main.view-map > footer,
main.view-map > .sheet-tabs { display: none; }

/* battlemap */
.note b.free-word { color: var(--verdigris); }
.mapsec { min-width: 0; }
.map-hud {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 12px;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--field);
}
.hud-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-token {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; border: 2px solid var(--brass); background: var(--sheet);
  font-family: var(--font-display); font-size: 17px; color: var(--brass);
}
.hud-token img, .map-token img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.hud-names { display: grid; min-width: 0; }
.hud-name { font-family: var(--font-display); font-size: 20px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-at { font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; color: var(--brass); }
.hud-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hud-stat { display: grid; }
.hud-stat b { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hud-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-left: auto; }
.hud-acts .chk { padding-bottom: 0; }
.hud-light { display: inline-flex; align-items: center; gap: 8px; }
.hud-light select {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 3px; padding: 3px 6px;
}
.hud-light select:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.map-wrap {
  overflow: auto; max-height: min(72vh, 800px); overscroll-behavior: contain;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--bg);
}
.map-stage { position: relative; }
.map-stage svg { display: block; user-select: none; -webkit-user-select: none; }
.map-stage svg:focus { outline: none; }
.map-stage svg:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.m-floor { fill: var(--sheet); }
.m-grid { fill: none; stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.m-lab { fill: var(--muted); font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; }
.m-reach { fill: var(--brass-soft); }
.m-free { fill: var(--verdigris-soft); }
.m-edge { fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-dasharray: 5 4; }
.m-edge.free { stroke: var(--verdigris); }
.has-img .m-grid { stroke: var(--map-line); }
.has-img .m-reach { fill: var(--map-reach); stroke: none; }
.has-img .m-free { fill: var(--map-free); stroke: none; }
.has-img .m-edge { stroke: var(--map-reach-edge); stroke-width: 2; }
.has-img .m-edge.free { stroke: var(--map-free-edge); }
.m-wall { fill: url(#mHatch); }
.m-hatch { stroke: var(--blood); stroke-width: 2; }
.m-wallbox { fill: none; stroke: var(--blood); stroke-width: 1; opacity: 0.7; }
.m-rough { fill: url(#mDots); }
.m-dot { fill: var(--brass); }
.has-img .m-dot { fill: var(--map-reach-edge); }
.m-path { fill: none; stroke: var(--brass); stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linecap: round; }
.m-target { fill: var(--brass-soft); stroke: var(--brass); stroke-width: 2.5; }
.m-path.bad { stroke: var(--blood); }
.m-target.bad { fill: none; stroke: var(--blood); }
.has-img .m-path { stroke: var(--map-reach-edge); }
.has-img .m-target { fill: var(--map-reach); stroke: var(--map-reach-edge); }
.has-img .m-path.bad, .has-img .m-target.bad { stroke: #FF7A6E; fill: none; }
.has-img .m-lab { fill: var(--muted); }
.has-img.dark-map .m-grid { stroke: var(--map-line-light); }
.has-img.dark-map .m-lab { fill: var(--muted); }
.m-link circle { fill: rgba(11, 11, 16, 0.62); stroke: var(--map-reach-edge); stroke-width: 1.5; }
.m-link path { fill: none; stroke: #F4EBDA; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-stairs { fill: none; stroke: var(--map-free-edge); stroke-width: 1.5; stroke-dasharray: 4 3; }
.map-prompt {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 6px 6px 6px 12px; border: 1px solid var(--brass); border-radius: 4px;
  background: var(--sheet); box-shadow: 0 6px 18px var(--shadow);
}
.mp-what { font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: var(--ink); }
.map-prompt .btn { padding: 5px 12px; }
.m-tag {
  fill: var(--ink); font-family: var(--font-label); font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em;
  paint-order: stroke; stroke: var(--sheet); stroke-width: 4px; stroke-linejoin: round;
}
.map-token {
  position: absolute; z-index: 1; display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; border: 2px solid var(--brass); background: var(--sheet); box-shadow: 0 2px 6px var(--shadow);
  font-family: var(--font-display); color: var(--brass); line-height: 1;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: left 0.18s ease, top 0.18s ease;
}
.map-token.dragging { z-index: 3; cursor: grabbing; box-shadow: 0 8px 18px var(--shadow); transition: none; }
/* walking a route one square at a time */
.map-token.walking { transition: left var(--step, 130ms) linear, top var(--step, 130ms) linear; }
/* fog of war: squares never seen are black, squares seen before but out of sight are dimmed */
.m-fog-dark { fill: #05060A; }
.m-fog-dim { fill: #05060A; fill-opacity: 0.62; }
.m-fog.lifted { opacity: 0.4; }
/* enemy tokens */
.map-foes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.map-foe {
  position: absolute; pointer-events: auto; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: left 0.18s ease, top 0.18s ease;
}
.map-foe.dragging { z-index: 3; cursor: grabbing; transition: none; }
.foe-disc {
  width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%;
  background: #5B201C; border: 2px solid #E2857A; color: #F8ECE8; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  font-family: var(--font-label); font-weight: 700; letter-spacing: 0.02em; line-height: 1;
}
.foe-hp { position: absolute; left: 14%; right: 14%; bottom: -6px; height: 4px; border-radius: 2px; background: rgba(11, 11, 16, 0.75); overflow: hidden; }
.foe-hp span { display: block; height: 100%; background: #E2857A; }
.map-foe.targeted .foe-disc { box-shadow: 0 0 0 3px #F2C46B, 0 2px 10px rgba(0, 0, 0, 0.6); }
.map-foe.down .foe-disc { background: #2A2A30; border-color: #77777F; color: #B9B9C2; }
.map-foe.down .foe-hp { display: none; }
.map-foe.spotted { animation: foe-spot 0.3s ease-out; }
@keyframes foe-spot { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
.foe-chip {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: #5B201C; border: 2px solid #E2857A; color: #F8ECE8; font-family: var(--font-label); font-weight: 700; font-size: 12px;
}
.down > .foe-chip, .foe-panel.down .foe-chip { background: #2A2A30; border-color: #77777F; color: #B9B9C2; }
/* the enemy you're targeting */
.foe-panel {
  display: grid; gap: 10px; margin-top: 10px; padding: 12px 14px;
  border: 1px solid var(--blood); border-radius: 4px; background: var(--field);
}
.foe-top { display: flex; align-items: center; gap: 12px; }
.foe-title { display: grid; flex: 1; min-width: 0; }
.foe-name { font-family: var(--font-display); font-size: 19px; line-height: 1.2; }
.foe-facts { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.foe-atks { display: flex; flex-wrap: wrap; gap: 8px; }
.foe-atks:empty { display: none; }
.foe-panel .hint:empty { display: none; }
/* the enemy roster under the map */
.foes { display: grid; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--rule); }
.foes-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.foes-head .note { margin: 0; flex: 1 1 22em; }
.foe-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--field);
}
.foe-form .field.nm { flex: 1 1 12em; }
.foe-form .field.n input { width: 4.2em; text-align: center; font-family: var(--font-display); }
.foe-form .acts { display: flex; gap: 8px; }
.placing { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; border: 1px dashed var(--brass); border-radius: 4px; }
.placing .hint { flex: 1 1 16em; color: var(--ink); }
.foe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foe-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 6px 8px 6px 10px;
  border: 1px solid var(--rule); border-radius: 4px;
}
.foe-row.down { opacity: 0.65; }
.foe-row .nm-in {
  flex: 1 1 8em; min-width: 6em; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  font-family: var(--font-display); font-size: 17px; padding: 2px;
}
.foe-row .where { font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; color: var(--muted); min-width: 4.5em; }
.foe-row .nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.foe-row .num { display: inline-flex; align-items: baseline; gap: 5px; }
.foe-row .num input {
  width: 3.4em; border: 0; border-bottom: 1px solid var(--rule); background: transparent; text-align: center;
  font-family: var(--font-display); font-size: 17px; font-variant-numeric: tabular-nums; padding: 0;
}
.foe-row .btn-link { padding: 2px 0; }
.foe-empty { margin: 0; font-size: 14px; color: var(--muted); }
.map-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 40px; margin-top: 10px; }
.map-foot .hint { flex: 1 1 18em; min-height: 0; }
.map-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 8px; }
.map-opts .opt { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.map-opts .chk { padding-bottom: 0; }
.map-opts select {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: 3px; padding: 4px 6px;
}
.map-opts select:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.grid-in { display: inline-flex; align-items: center; gap: 8px; }
.grid-in input { width: 7.5em; accent-color: var(--brass); }
.grid-in .pool-src { min-width: 3ch; font-variant-numeric: tabular-nums; }
.size-in { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; }
.size-in input {
  width: 3.2em; padding: 2px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; text-align: center;
  font-family: var(--font-display); font-size: 18px; font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) { .map-token, .map-foe { transition: none; } .map-foe.spotted { animation: none; } }

/* taking a hit */
.take-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; width: 100%; }
.take-row .pool-src { flex: 1 1 14em; }
.incoming .take-row .pool-src { padding-bottom: 0; }

/* advancement: stat increase record */
.asi-log { display: grid; gap: 4px; }
.asi-item { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.asi-item .btn-link { padding: 0; font-size: 13px; }
.asi-all { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* footer actions */
.foot-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* dual wielding */
.atk.dual { border-left-color: var(--verdigris); }
.atk-sub { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .adv-lab span { display: none; }
  .advbar { padding-left: 10px; }
  .advbar .seg button { padding: 6px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit { animation: none; }
  .bar span { transition: none; }
  .log input.rolled { animation: none; }
  .figure .part, .figure .lead, .figure .anchor, .slot, .stat, .pack { transition: none; }
  .toast.pop-in { animation: none; }
  .sw, .sw::after, .roll-stat svg { transition: none; }
}

/* responsive */
@media (max-width: 820px) {
  .top, .vitals-grid, .attr-groups, .equip-grid, .defs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .rolls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .avatar { --av: 96px; margin: 14px 20px 14px 12px; }
  .identity { gap: 12px; }
  .details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .details .wide { grid-column: auto; }
  .masthead .meta { order: -1; width: 100%; }
}
@media (max-width: 480px) {
  .slot-main { padding: 4px 6px 5px; }
  .slot-label { font-size: 10px; letter-spacing: 0.06em; }
  .slot-name { font-size: 12.5px; -webkit-line-clamp: 1; }
  .slot-ar { font-size: 14.5px; }
  .worn-row { grid-template-columns: minmax(0, 1fr) auto; }
  .worn-slot { grid-column: 1 / -1; padding-top: 0; }
}

/* Character-specific resources, independent of the legacy Mana/Holy Power pool. */
.custom-resources { display:grid; gap:10px; }
.custom-resource-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.custom-resource-header h3 { margin:0; font:400 19px var(--font-display); }
.resource-mana-toggle, .resource-refill { display:flex; align-items:center; gap:7px; font-size:14px; }
.resource-mana-toggle input, .resource-refill input { accent-color:var(--brass); }
.resource-list { display:grid; gap:14px; }
.resource-empty { margin:0; font-size:14px; color:var(--muted); }
.custom-resource { border:1px solid var(--rule); border-radius:4px; background:var(--field); padding:12px; display:grid; gap:10px; min-width:0; }
.resource-top { display:flex; align-items:flex-end; gap:10px; }
.resource-name { flex:1; min-width:0; }
.custom-resource label:not(.resource-refill) { display:grid; gap:3px; min-width:0; }
.custom-resource input:not([type=checkbox]), .custom-resource select { min-width:0; width:100%; border:1px solid var(--rule); border-radius:3px; background:var(--sheet); color:var(--ink); padding:5px; font:inherit; }
.resource-figure { font:18px var(--font-display); font-variant-numeric:tabular-nums; white-space:nowrap; }
.resource-meter { height:9px; background:var(--track); border-radius:3px; overflow:hidden; }
.resource-meter span { height:100%; display:block; background:var(--verdigris); transition:width .2s ease; }
.resource-meter.brass span { background:var(--brass); }
.resource-meter.blue span { background:#548bd8; }
.resource-meter.red span { background:var(--blood); }
.resource-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.resource-actions { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
.resource-adjust { width:90px; }
.resource-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:end; }
.resource-refill { grid-column:1/-1; }
@media(max-width:420px) { .resource-values { grid-template-columns:repeat(2,minmax(0,1fr)); } .resource-actions .btn { padding:6px 8px; } }

/* Character-specific ability library. Form editing deliberately doesn't alter combat calculations yet. */
.ability-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.ability-search { flex:2 1 220px; } .ability-category { flex:1 1 145px; }
.ability-toolbar label:not(.ability-favorites), .ability-field { display:grid; gap:4px; min-width:0; }
.ability-toolbar input:not([type=checkbox]), .ability-toolbar select, .ability-editor input, .ability-editor select, .ability-editor textarea { width:100%; min-width:0; border:1px solid var(--rule); border-radius:3px; padding:7px; background:var(--field); color:var(--ink); font:inherit; }
.ability-favorites { display:flex; align-items:center; gap:6px; font-size:14px; padding-bottom:8px; white-space:nowrap; }
.ability-favorites input { accent-color:var(--brass); }
.ability-count { margin:12px 0 8px; font-size:13px; color:var(--muted); }
.ability-list { display:grid; gap:10px; }
.ability-empty { margin:0; padding:20px; border:1px dashed var(--rule); border-radius:4px; color:var(--muted); font-size:14px; }
.ability-card { border:1px solid var(--rule); border-radius:4px; min-width:0; background:var(--sheet); }
.ability-card[open] { border-color:var(--brass); }
.ability-summary { padding:12px; display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; cursor:pointer; list-style:none; }
.ability-summary::-webkit-details-marker { display:none; }
.ability-summary:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
.ability-summary-name { font-family:var(--font-display); font-size:18px; flex:1 1 145px; }
.ability-summary-category { color:var(--muted); font-size:13px; }
.ability-summary-badges { display:flex; flex-wrap:wrap; gap:5px; }
.ability-tag { border:1px solid var(--rule); border-radius:20px; padding:2px 7px; font-size:12px; color:var(--muted); }
.ability-summary-arrow { color:var(--brass); transition:transform .2s ease; }
.ability-card[open] .ability-summary-arrow { transform:rotate(180deg); }
.ability-editor { display:grid; gap:12px; padding:12px; border-top:1px solid var(--rule); }
.ability-editor-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ability-editor textarea { resize:vertical; min-height:70px; }
.ability-card-actions { display:flex; flex-wrap:wrap; gap:8px; }
@media(max-width:560px) { .ability-editor-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:380px) { .ability-editor-row { grid-template-columns:1fr; } }

/* File actions live near the Sheet / Battlemap switch, not at the bottom of the sheet. */
.sheet-actions { justify-content: flex-start; padding-top: 12px; border-top: 1px solid var(--rule); }
.sheet-actions #saveStatus { flex: 1 1 180px; }
.sheet-actions .foot-acts { min-width: 0; }
@media (max-width: 540px) { .sheet-actions .foot-acts { width: 100%; } .sheet-actions .btn { padding: 7px 9px; } }

/* Ability activation status and manual tracker controls */
.ability-activate {display:flex; align-items:center; flex-wrap:wrap; gap:10px;}
.ability-status {font-size:13px; color:var(--muted);}
.ability-feedback {font-size:14px; color:var(--verdigris); margin:8px 0; min-height:1em;}
.ability-feedback.ability-error {color:var(--blood);}
.ability-uses-left {max-width:180px;}

/* Keep ability activation visible in both collapsed and expanded cards. */
.ability-item { position:relative; min-width:0; }
.ability-item.has-quick-use .ability-summary { padding-right:99px; }
.ability-quick-use {
  position:absolute; z-index:2; top:8px; right:31px;
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-height:34px; padding:5px 8px; border:1px solid var(--brass); border-radius:4px;
  background:var(--brass); color:var(--sheet); font:700 12px var(--font-label);
  cursor:pointer;
}
.ability-quick-use svg { width:16px; height:16px; fill:currentColor; }
.ability-quick-use:hover { filter:brightness(1.09); }
.ability-quick-use:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.ability-capacity { display:flex; align-items:end; flex-wrap:wrap; gap:10px; }
.ability-capacity .ability-field { flex:1 1 145px; }
.ability-capacity .btn { margin-bottom:1px; }
@media(max-width:440px) {
  .ability-item.has-quick-use .ability-summary { padding-right:87px; }
  .ability-quick-use { right:26px; padding:5px 6px; min-height:33px; }
}

/* Optional sheet-targeted movement ability effect. */
.ability-effect-config {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.ability-effect-hint {font-size:12px;color:var(--muted);margin:0;}
@media(max-width:500px){.ability-effect-config{grid-template-columns:1fr;}}

/* Automatic temporary bonuses are teal; explicit manual overrides stay orange. */
input[data-auto].ability-adjusted:not(.manual) { color: var(--verdigris); }
.rsrc.ability-bonus-label { color: var(--verdigris); }

/* Multiple editable sheet-targeted ability effects. */
.ability-effects { display:grid; gap:10px; padding:10px; border:1px solid var(--rule); border-radius:4px; }
.ability-effects-head { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.ability-effect-row { display:flex; align-items:end; gap:8px; flex-wrap:wrap; border-top:1px dashed var(--rule); padding-top:8px; }
.ability-effect-row .ability-field { flex:1 1 140px; }
.resource-effect-bonus { color:var(--verdigris); font-size:12px; font-weight:700; }

/* Status Effects: a third navigable character view, with no new combat engine. */
.statussec { min-width:0; display:grid; gap:14px; align-content:start; }
.status-summary { font-family:var(--font-label); font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--verdigris); margin:0; }
.status-feedback { margin:0; min-height:0; font-size:13px; color:var(--verdigris); }
.status-feedback:empty { display:none; }
.status-panel { display:grid; gap:12px; min-width:0; border:1px solid var(--rule); border-radius:5px; padding:14px; }
.status-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:9px; flex-wrap:wrap; }
.status-section-head h3 { margin:0; font-family:var(--font-display); font-size:20px; }
.status-help { font-size:12px; color:var(--muted); }
.status-list { display:grid; gap:10px; }
.status-empty { border:1px dashed var(--rule); border-radius:4px; padding:16px; margin:0; font-size:13px; color:var(--muted); }
.status-card { padding:12px; border:1px solid var(--rule); border-radius:5px; background:var(--field); display:grid; gap:9px; min-width:0; }
.status-card-top { display:flex; justify-content:space-between; align-items:start; flex-wrap:wrap; gap:10px; }
.status-card-top h3 { margin:4px 0 0; font-family:var(--font-display); font-size:18px; overflow-wrap:anywhere; }
.status-kind { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.status-kind.status-buff { color:var(--verdigris); }
.status-kind.status-debuff { color:var(--blood); }
.status-kind.status-condition { color:var(--brass); }
.status-card-actions { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.status-turns { font-size:13px; color:var(--brass); }
.status-modifiers { display:flex; flex-wrap:wrap; gap:7px; }
.status-modifier { border:1px solid var(--verdigris); border-radius:30px; color:var(--verdigris); padding:4px 9px; font-size:12px; font-weight:700; }
.status-secondary { margin:0; color:var(--muted); font-size:12px; }
.status-note { margin:0; white-space:pre-wrap; font-size:13px; overflow-wrap:anywhere; }
.status-edit { display:flex; gap:10px; flex-wrap:wrap; }
.status-edit .ability-field { flex:1 1 180px; max-width:320px; }
.status-form { display:grid; gap:10px; padding-top:15px; border-top:1px dashed var(--rule); }
.status-form h4 { margin:0; font-family:var(--font-display); font-size:17px; }
.status-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.status-form .ability-field { display:grid; gap:5px; min-width:0; }
.status-form input, .status-form select, .status-form textarea, .status-edit input { width:100%; min-width:0; background:var(--field); border:1px solid var(--rule); color:var(--ink); padding:8px; border-radius:4px; font:inherit; }
.status-form textarea { resize:vertical; }
.status-form > button { justify-self:start; }
@media(max-width:540px) {
 .status-form-grid { grid-template-columns:1fr; }
 .status-card-actions { width:100%; justify-content:space-between; }
 .views { display:flex; flex-wrap:nowrap; width:100%; max-width:100%; }
 .views button { flex:1 1 0; min-width:0; padding:9px 5px; font-size:12px; letter-spacing:0; white-space:nowrap; }
}

.status-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.status-actions .status-summary { flex:1 1 180px; }

/* Two levels of navigation: separate Battlemap destination above the sheet tabs.
   Both rows stay reachable while scrolling long ability and equipment libraries. */
.views.main-views {
  position: sticky; top: 0; z-index: 60;
  justify-self: stretch; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; width: 100%; padding: 7px 2px;
  margin-top: -10px; border: 0; border-radius: 0; overflow: visible;
  background: var(--sheet); box-shadow: 0 4px 12px -11px var(--ink);
}
.views.main-views button {
  border: 1px solid var(--rule); border-radius: 5px; background: var(--field);
  padding: 10px 16px; font-size: 14px; font-weight: 700; letter-spacing: .055em;
}
.views.main-views button + button { border-left: 1px solid var(--rule); }
.views.main-views button[data-view="sheet"] { flex: 0 1 auto; }
.views.main-views button[data-view="map"] {
  margin-left: auto; border-color: var(--verdigris); color: var(--verdigris);
  box-shadow: inset 3px 0 0 var(--verdigris);
}
.views.main-views button[data-view="map"][aria-pressed="true"] {
  background: var(--verdigris); border-color: var(--verdigris); color: var(--sheet);
  box-shadow: none;
}
.views.main-views button[data-view="sheet"][aria-pressed="true"] {
  background: var(--brass); border-color: var(--brass); color: var(--sheet);
}
.sheet-tabs {
  position: sticky; top: 59px; z-index: 59; justify-self: stretch;
  display: flex; align-items: center; flex-wrap: nowrap; gap: 4px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  margin-top: -23px; padding: 8px 4px;
  background: var(--sheet); border-bottom: 2px solid var(--rule);
  box-shadow: 0 4px 12px -12px var(--ink);
}
.sheet-tabs button {
  appearance: none; flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent;
  background: transparent; padding: 9px 13px;
  font: 700 13px var(--font-label); letter-spacing: .04em;
  white-space: nowrap; cursor: pointer; color: var(--muted);
}
.sheet-tabs button:hover { color: var(--brass); }
.sheet-tabs button[aria-pressed="true"] {
  color: var(--brass); background: var(--field); border-bottom-color: var(--brass);
}
.sheet-tabs button:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
@media (max-width: 540px) {
  .views.main-views { gap: 12px; }
  .views.main-views button {
    flex: 0 1 auto; font-size: 13px; letter-spacing: 0;
    padding: 9px 11px;
  }
  .sheet-tabs { top: 55px; margin-top: -24px; padding-inline: 0; }
  .sheet-tabs button { font-size: 12px; padding: 9px 10px; }
}

/* Scalable Ability Library: filter fields wrap, compact cards keep Use accessible. */
.ability-toolbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; align-items:end; }
.ability-toolbar .ability-search { grid-column:span 2; }
.ability-toolbar .ability-field, .ability-toolbar label { min-width:0; }
.ability-view-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:16px; padding-top:4px; }
.ability-view-controls .ability-favorites { padding:4px 0; }
.ability-view-controls #abilityAdd { margin-left:auto; }
.ability-view-controls #abilityClearFilters { margin-left:8px; }
.ability-list.is-compact { gap:5px; }
.ability-list.is-compact .ability-summary { min-height:41px; padding:7px 12px; gap:5px 9px; }
.ability-list.is-compact .ability-summary-name { font-size:15px; flex:0 1 auto; }
.ability-list.is-compact .ability-summary-category { font-size:11px; }
.ability-list.is-compact .ability-summary-badges .ability-tag:nth-child(n+3) { display:none; }
.ability-list.is-compact .ability-tag { padding:1px 6px; font-size:11px; }
.ability-list.is-compact .ability-quick-use { top:5px; min-height:30px; }
.ability-list.is-compact .ability-card[open] .ability-summary { padding-block:10px; }
@media(max-width:750px) {
  .ability-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:440px) {
  .ability-toolbar { grid-template-columns:minmax(0,1fr); }
  .ability-toolbar .ability-search { grid-column:auto; }
  .ability-view-controls { gap:10px 12px; margin-top:14px; }
  .ability-view-controls #abilityClearFilters { margin-left:0; }
  .ability-view-controls #abilityAdd { margin-left:0; }
}

/* Character-specific ability forms: independent of portrait forms or gear. */
.ability-loadouts { display:grid; gap:9px; min-width:0; padding:14px; border:1px solid var(--brass); border-radius:5px; background:var(--field); }
.ability-loadouts-bar { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.ability-loadouts-bar .ability-field { flex:1 1 170px; }
.ability-loadouts-bar .ability-loadout-active { flex:2 1 190px; }
.ability-loadouts-bar select, .ability-loadouts-bar input { box-sizing:border-box; width:100%; min-width:0; background:var(--sheet); border:1px solid var(--rule); border-radius:4px; padding:8px; color:var(--ink); font:inherit; }
.ability-loadouts-bar button { min-height:35px; }
.ability-loadouts-options { display:flex; gap:9px 18px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted); }
.ability-loadouts-options .ability-favorites { padding:0; color:var(--ink); }
.ability-loadouts-feedback { min-height:0; margin:0; font-size:12px; color:var(--verdigris); }
.ability-loadouts-feedback:empty { display:none; }
.ability-memberships { min-width:0; padding:10px; border:1px solid var(--rule); display:grid; gap:8px; }
.ability-memberships legend { font:700 13px var(--font-label); color:var(--brass); padding:0 4px; }
.ability-memberships label { display:inline-flex; flex-wrap:nowrap; gap:6px; align-items:center; font-size:13px; }
.ability-memberships input { accent-color:var(--brass); }
.ability-editor .ability-memberships input[type="checkbox"] {
  appearance:auto; flex:0 0 16px; width:16px; min-width:16px; height:16px;
  padding:0; margin:0; accent-color:var(--brass);
}
.ability-membership-list { display:flex; gap:9px 14px; flex-wrap:wrap; }
.ability-item.ability-inactive { opacity:.75; }
.ability-item.ability-inactive .ability-quick-use { filter:grayscale(1); cursor:not-allowed; }
@media(max-width:460px) { .ability-loadouts { padding:10px; } .ability-loadouts-bar { align-items:stretch; } .ability-loadouts-bar button { flex:1 1 auto; } }

/* Second-stage mechanical forms: optional portrait sync and derived stat bonuses. */
.ability-loadout-config { min-width:0; }
.loadout-mechanics { border:1px solid var(--rule); border-radius:4px; padding:9px 11px; background:var(--sheet); }
.loadout-mechanics > summary { cursor:pointer; color:var(--brass); font:700 13px var(--font-label); }
.loadout-mechanics > summary:focus-visible { outline:2px solid var(--brass); outline-offset:3px; }
.loadout-mechanics-content { display:grid; gap:10px; padding-top:12px; }
.loadout-mechanics-content > .ability-field { max-width:440px; }
.loadout-mechanics-content select, .loadout-stat-grid input {
  box-sizing:border-box; background:var(--field); border:1px solid var(--rule);
  color:var(--ink); padding:7px 8px; border-radius:4px; font:inherit; width:100%; min-width:0;
}
.loadout-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
@media(max-width:520px) { .loadout-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Form-specific custom resources, with balances preserved across form switches. */
.resource-view-options {display:flex;align-items:center;gap:9px 15px;flex-wrap:wrap;justify-content:space-between;margin:7px 0;}
.resource-view-options label {display:inline-flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;}
.resource-form-summary {font-size:12px;color:var(--verdigris);}
.resource-memberships {border:1px solid var(--rule);border-radius:4px;padding:8px 10px;min-width:0;display:grid;gap:7px;}
.resource-memberships legend {padding:0 4px;color:var(--brass);font-size:12px;font-weight:700;}
.resource-memberships label {display:inline-flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;}
.resource-memberships input[type="checkbox"],.resource-view-options input[type="checkbox"] {appearance:auto;width:16px;height:16px;min-width:16px;margin:0;accent-color:var(--brass);}
.resource-membership-list {display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;}
.custom-resource.resource-inactive {opacity:.75;}
.resource-inactive-note {color:var(--brass);font-size:12px;font-weight:700;margin:0;}
.custom-resource.resource-inactive .resource-actions button:disabled {cursor:not-allowed;opacity:.45;}

/* Mechanical form equipment profiles: shared inventory, different worn slot layouts. */
.equipment-profile-bar {display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--brass);border-radius:5px;background:var(--field);margin:12px 0 18px;}
.equipment-profile-bar > div:first-child {flex:1 1 250px;}
.equipment-profile-bar strong {display:block;font-family:var(--font-display);font-size:19px;margin:3px 0;}
.equipment-profile-note {font-size:12px;color:var(--muted);margin:0;max-width:550px;}
.equipment-profile-actions {display:flex;gap:9px;flex-wrap:wrap;}
.equipment-profile-actions .btn:disabled {opacity:.5;cursor:not-allowed;}
@media(max-width:540px){.equipment-profile-actions{width:100%;}.equipment-profile-actions .btn{flex:1 1 160px;}}

/* Entry point to the optional offline DM workspace (distinct from the sheet tabs). */
.dm-launch { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:-18px; }
.dm-launch a { text-decoration:none; }
.dm-launch span { color:var(--muted); font-size:14px; }