/* Olden Era reference — refined Tufte aesthetic.
   Cream paper, Charter serif, single accent per faction-kind. */

:root {
  --bg:        #fbf7ec;
  --bg-warm:   #f5efdd;
  --paper:     #fffdf6;
  --ink:       #1a1612;
  --ink-2:     #3a342c;
  --muted:     #6b6358;
  --faint:     #a59c8d;
  --rule:      #e3dac3;
  --rule-bold: #1a1612;
  --hover:     #f3ecd6;
  --accent:    #9a4818;       /* burnt orange — might */
  --accent-2:  #2c5d83;       /* slate blue — magic */
  --gold:      #b8861b;
  --combat:    oklch(0.55 0.12 35);
  --magic:     oklch(0.50 0.10 245);
  --school:    oklch(0.50 0.10 295);
  --utility:   oklch(0.50 0.05 110);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: Charter, "Iowan Old Style", "Iowan Old Style BT",
               Palatino, Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sans {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- shell ---------- */
.shell {
  max-width: min(100vw - 2rem, 1600px);
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
}

header.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 2px solid var(--rule-bold);
  padding-bottom: 0.6rem;
  margin-bottom: 0.4rem;
}
.masthead .brand {
  font-family: "Charter", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.masthead .brand .sub {
  font-style: italic;
  color: var(--muted);
  font-weight: 400;
  margin-left: 0.5em;
}
.masthead .meta {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

nav.tabs {
  flex-wrap: wrap;
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}
nav.tabs button, nav.tabs a {
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0.7rem 1rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
  text-decoration: none;
  display: inline-block;
}
nav.tabs button:hover, nav.tabs a:hover { color: var(--ink); }
nav.tabs button.active, nav.tabs a.active {
  color: var(--ink);
  border-bottom-color: var(--rule-bold);
  font-weight: 600;
}
nav.tabs .grow { flex: 1; }
/* The masthead brand is now an anchor — undo the global a { border-bottom } */
.masthead .brand { text-decoration: none; border-bottom: 0; color: inherit; }
.masthead .brand:hover { color: var(--accent); border-bottom: 0; }

/* ---------- typography ---------- */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: 2.2rem; line-height: 1.15; margin: 0.2em 0 0.4em; }
h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-weight: 600;
  color: var(--ink);
  margin: 2.2rem 0 0.8rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
}
h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  color: var(--muted);
  margin: 1.4rem 0 0.5rem;
}

p { margin: 0.4em 0 0.9em; max-width: 62em; text-wrap: pretty; }
p.lede { font-size: 1.1em; color: var(--ink-2); max-width: 42em; }
em { color: var(--ink); }
strong { font-weight: 600; }
code, .mono {
  font-family: "JetBrains Mono", Menlo, "SF Mono", Consolas, monospace;
  font-size: 0.88em;
}

/* ---------- glyphs / chips ---------- */
.glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  font-size: 0.78em;
  vertical-align: 0.05em;
  font-weight: 600;
}
.glyph-might { color: var(--accent); }
.glyph-magic { color: var(--accent-2); }

.faction-pill {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 0.2em 0.55em;
  border-radius: 2px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  white-space: nowrap;
}

.kbd {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  padding: 0.1em 0.4em;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--paper);
  color: var(--muted);
}

/* ---------- index page cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin: 1.4rem 0 2rem;
}
@media (max-width: 760px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  display: block;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.15s, background 0.15s;
}
.card:hover {
  border-color: var(--rule-bold);
  background: var(--paper);
}
.card .card-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.card .card-title {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.card .card-desc {
  color: var(--ink-2);
  font-size: 0.96rem;
  margin: 0;
}
.card .card-stats {
  display: flex;
  gap: 1.2rem;
  margin-top: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.card .card-stats b {
  display: block;
  font-family: Charter, Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
  line-height: 1;
}

.faction-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
  margin: 0.4rem 0 2rem;
}
@media (max-width: 760px) { .faction-strip { grid-template-columns: repeat(3, 1fr); } }
.faction-strip > div, .faction-strip > a {
  border: 1px solid var(--rule);
  padding: 0.7rem 0.7rem 0.6rem;
  background: var(--paper);
}
.faction-strip .name {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.faction-strip .skill {
  font-style: italic;
  color: var(--ink-2);
  font-size: 0.92rem;
  margin-top: 0.15rem;
}
.faction-strip .classes {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* ---------- subclass matrix ---------- */
.matrix-wrap {
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: auto;
  position: relative;
  max-height: calc(100vh - 240px);
}
table.matrix {
  border-collapse: separate;
  border-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  width: max-content;
  min-width: 100%;
}
table.matrix th, table.matrix td {
  padding: 0.34rem 0.5rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
table.matrix thead th {
  position: sticky;
  top: 0;
  background: var(--bg-warm);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-bold);
  z-index: 2;
  cursor: help;
}
table.matrix thead th.group-cap {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding-top: 0.25rem;
  padding-bottom: 0.2rem;
  z-index: 2;
}
table.matrix thead th.group-cap.combat  { color: var(--combat); }
table.matrix thead th.group-cap.magic   { color: var(--magic); }
table.matrix thead th.group-cap.school  { color: var(--school); }
table.matrix thead th.group-cap.utility { color: var(--utility); }

/* row-header cells (subclass name + class) */
table.matrix th.row-head, table.matrix td.row-head {
  text-align: left;
  font-family: Charter, Georgia, serif;
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--paper);
  position: sticky;
  left: 0;
  z-index: 1;
  padding-right: 0.8rem;
  white-space: nowrap;
}
table.matrix th.row-head { z-index: 3; background: var(--bg-warm); }
table.matrix td.row-head { border-right: 1px solid var(--rule); }
table.matrix td.row-head .row-class {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--muted);
  margin-top: 1px;
}
table.matrix td.row-glyph {
  width: 28px;
  padding-left: 0.7rem;
  background: var(--paper);
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 0;
}
table.matrix th.row-glyph {
  position: sticky; left: 0; z-index: 3; background: var(--bg-warm); width: 28px;
}

/* group dividers */
table.matrix .group-edge { border-left: 1px solid var(--rule-bold); }

/* effect cell */
table.matrix td.col-effect, table.matrix th.col-effect {
  text-align: left;
  white-space: normal;
  font-family: Charter, Georgia, serif;
  font-style: italic;
  color: var(--ink-2);
  max-width: 22em;
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 0.5rem 0.8rem;
}
table.matrix td.col-effect b { font-style: normal; font-weight: 600; color: var(--ink); }

/* faction divider rows */
table.matrix tr.faction-row td {
  background: var(--bg-warm);
  text-align: left;
  padding: 0.5rem 0.8rem 0.4rem;
  border-top: 1px solid var(--rule-bold);
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 700;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  left: 0;
}
table.matrix tr.faction-row td .fac-skill {
  text-transform: none;
  font-family: Charter, Georgia, serif;
  font-style: italic;
  font-size: 0.84rem;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 400;
  margin-left: 0.6em;
}

/* skill cells */
table.matrix td.skill-cell {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--faint);
}
table.matrix td.skill-cell.on        { color: var(--ink); }
table.matrix td.skill-cell.on .dot   { display: inline-block; width: 8px; height: 8px; border-radius: 1px; background: currentColor; }
table.matrix td.skill-cell.on.combat  { color: var(--combat); }
table.matrix td.skill-cell.on.magic   { color: var(--magic); }
table.matrix td.skill-cell.on.school  { color: var(--school); }
table.matrix td.skill-cell.on.utility { color: var(--utility); }

/* crosshair hover (column highlight on row hover) */
table.matrix tbody tr:not(.faction-row):hover td { background: var(--hover); }
table.matrix tbody tr:not(.faction-row):hover td.row-head,
table.matrix tbody tr:not(.faction-row):hover td.row-glyph { background: #ede5cc; }
table.matrix .col-hl { background: var(--hover); }

/* ---------- heroes view ---------- */
.controls {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.4rem 0 1.6rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
}
.controls .filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.controls label {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}
.search {
  font-family: Charter, Georgia, serif;
  font-size: 0.95rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.42rem 0.7rem;
  width: 220px;
  color: var(--ink);
  border-radius: 0;
}
.search:focus { outline: none; border-color: var(--rule-bold); }

.seg {
  display: inline-flex;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.seg button {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  background: none;
  border: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  cursor: pointer;
  border-right: 1px solid var(--rule);
}
.seg button:last-child { border-right: 0; }
.seg button.active { background: var(--ink); color: var(--paper); }
.seg button:hover:not(.active) { color: var(--ink); }

.count {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: auto;
}

/* faction band header inside heroes list */
.faction-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.2rem 0 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule-bold);
}
.faction-band .name {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.faction-band .skill {
  font-style: italic;
  color: var(--muted);
  font-size: 0.92rem;
}
.faction-band .counts {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: auto;
}

/* heroes table */
table.heroes {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  margin-bottom: 1rem;
}
table.heroes th {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--rule-bold);
  white-space: nowrap;
}
table.heroes th.num, table.heroes td.num { text-align: right; padding-right: 0.6rem; }
table.heroes td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.heroes tr:hover td { background: var(--hover); }
table.heroes .h-name {
  font-weight: 600;
  color: var(--ink);
}
table.heroes .h-spec {
  font-style: italic;
  color: var(--muted);
  font-size: 0.92em;
  display: block;
  margin-top: 1px;
}
table.heroes .stats-row {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
table.heroes .stats-row .lbl {
  color: var(--faint);
  font-size: 0.66rem;
  margin-right: 0.1em;
}
table.heroes .stats-row .v {
  display: inline-block;
  min-width: 1.1em;
  font-weight: 600;
  margin-right: 0.5em;
}
table.heroes .skill-chip {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.74rem;
  padding: 0.08em 0.45em;
  border: 1px solid var(--rule);
  margin-right: 0.3em;
  margin-bottom: 0.15em;
  white-space: nowrap;
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 2px;
}
table.heroes .skill-chip.faction { border-color: var(--accent); color: var(--accent); font-weight: 600; }
table.heroes .skill-chip.l2 { border-style: double; border-width: 3px; }
table.heroes .army {
  color: var(--ink-2);
  font-size: 0.92em;
  font-style: italic;
}
table.heroes .army .stack {
  white-space: nowrap;
  margin-right: 0.4em;
}
table.heroes .army .sep {
  color: var(--faint);
  margin-right: 0.4em;
}
table.heroes td.h-num {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.74rem;
  color: var(--faint);
  width: 28px;
  padding-left: 0.6rem;
}

/* footer notes */
.note {
  font-size: 0.92em;
  color: var(--muted);
  border-left: 2px solid var(--rule);
  padding: 0.2rem 0 0.2rem 0.9rem;
  margin: 1.2rem 0;
  max-width: 50em;
}
.note strong { color: var(--ink); }

footer.sitefoot {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  letter-spacing: 0.02em;
}

/* legend */
.legend {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4rem 0;
  margin-bottom: 0.6rem;
}
.legend .swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 0.4em;
  vertical-align: 0.05em;
}
.legend .combat  { background: var(--combat); }
.legend .magic   { background: var(--magic); }
.legend .school  { background: var(--school); }
.legend .utility { background: var(--utility); }

/* ---------- units view ---------- */
.units-wrap {
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: auto;
  position: relative;
  max-height: calc(100vh - 320px);
}
table.units {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
table.units thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-warm);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  padding: 0.5rem 0.55rem;
  border-bottom: 1px solid var(--rule-bold);
  white-space: nowrap;
  user-select: none;
}
table.units thead th.num     { text-align: right; }
table.units thead th.sortable { cursor: pointer; }
table.units thead th.sortable:hover { color: var(--ink); }
table.units thead th.active  { color: var(--ink); }
table.units thead th .sort-arrow {
  display: inline-block;
  width: 0.7em;
  color: var(--accent);
  margin-left: 0.15em;
}

table.units td {
  padding: 0.36rem 0.55rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  white-space: nowrap;
}
table.units td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.units tbody tr:hover td { background: var(--hover); }

table.units .u-name {
  font-family: Charter, Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
table.units .u-id {
  font-family: "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--faint);
  margin-top: 1px;
}

table.units .ratio { color: var(--ink-2); font-weight: 600; }
table.units .dmg { color: var(--ink-2); }

table.units .variant {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 0.1em 0.5em;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
}
table.units .variant-base { color: var(--muted); }
table.units .variant-upg  { color: var(--accent);   border-color: var(--accent); }
table.units .variant-alt  { color: var(--accent-2); border-color: var(--accent-2); border-style: dashed; }

/* Faction pills inside units table — colored borders */
.faction-pill.faction-temple     { color: #8a4218; border-color: #d6b69b; }
.faction-pill.faction-necropolis { color: #555a5e; border-color: #c8c8cf; }
.faction-pill.faction-grove     { color: #2f6d3a; border-color: #b9d2bb; }
.faction-pill.faction-hive       { color: #8a3018; border-color: #e0b59f; }
.faction-pill.faction-schism     { color: #2c5d83; border-color: #b6cad8; }
.faction-pill.faction-dungeon    { color: #4a2c70; border-color: #c1b3d4; }
.faction-pill.faction-neutral    { color: var(--muted); border-color: var(--rule); }

/* multi-select segmented control: highlight uses a softer accent so it's
   visually distinct from single-select 'active' (which uses ink fill). */
.seg.multi button.active {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.seg.multi button.active:first-child,
.seg.multi button:nth-child(2).active {
  /* 'All' and 'Factions' shortcut buttons stay ink-styled */
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* heroes flat-table wrapper (single big sortable view) */
.heroes-wrap {
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: auto;
  position: relative;
  max-height: calc(100vh - 320px);
}
table.heroes.flat thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--rule-bold);
}
table.heroes.flat .h-class-line {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1px;
}

/* sortable heroes-table headers */
table.heroes thead th.sortable {
  cursor: pointer;
  user-select: none;
}
table.heroes thead th.sortable:hover { color: var(--ink); }
table.heroes thead th.active         { color: var(--ink); }
table.heroes thead th .sort-arrow {
  display: inline-block;
  width: 0.7em;
  color: var(--accent);
}

/* hero stat numerics */
table.heroes td.num {
  text-align: right;
  padding-right: 0.55rem;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-variant-numeric: tabular-nums;
}
table.heroes .stat-v { font-weight: 600; color: var(--ink); }
table.heroes .army-score {
  font-weight: 600;
  color: var(--ink-2);
}

/* spec cell: icon + name + description */
table.heroes .spec-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 24em;
}
table.heroes .spec-cell .spec-text { min-width: 0; }
table.heroes .spec-name {
  font-style: italic;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.93em;
  line-height: 1.15;
}
table.heroes .spec-desc {
  font-style: italic;
  color: var(--muted);
  font-size: 0.78em;
  line-height: 1.3;
  margin-top: 1px;
  /* clamp to two lines, full text via title attr */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- imagery: factions / heroes / units / specs ---------- */
.faction-strip > div, .faction-strip > a { text-align: center; }
.faction-strip > a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--rule);
  display: block;
  transition: border-color 0.15s, background 0.15s;
}
.faction-strip > a:hover { border-color: var(--rule-bold); background: var(--bg-warm); }
.faction-icon {
  width: 56px; height: 56px;
  display: block;
  margin: 0 auto 0.4rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
.faction-band {
  align-items: center;
}
.faction-band-icon {
  width: 32px; height: 32px;
  margin-right: 0.6rem;
  vertical-align: middle;
  flex-shrink: 0;
  object-fit: contain;
}

/* hero portrait in heroes table */
.h-portrait-cell { width: 52px; padding-right: 0.4rem !important; }
.h-portrait {
  width: 44px; height: 44px;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  display: block;
  object-fit: cover;
}
.h-name-row { display: flex; align-items: center; gap: 0.4rem; }
.spec-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  flex-shrink: 0;
  object-fit: contain;
  padding: 1px;
}

/* unit name cell with hover tooltip */
.units-wrap { position: relative; }
table.units td.u-name-cell { position: relative; overflow: visible; }
.u-name-wrap {
  position: relative;
  cursor: help;
  display: inline-block;
}
.u-tooltip {
  position: absolute;
  top: 100%;
  left: -8px;
  margin-top: 6px;
  width: 380px;
  max-width: 80vw;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-bold);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.1);
  padding: 0.7rem 0.9rem;
  font-family: Charter, Georgia, serif;
  font-size: 0.85rem;
  line-height: 1.45;
  z-index: 100;
  display: none;
  white-space: normal;
  pointer-events: none;
}
.u-name-wrap:hover .u-tooltip,
.u-name-wrap:focus-within .u-tooltip { display: block; }
.u-tooltip .tt-narr {
  font-style: italic;
  color: var(--muted);
  font-size: 0.84rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.u-tooltip .tt-section { margin-top: 0.45rem; }
.u-tooltip .tt-section:first-child { margin-top: 0; }
.u-tooltip .tt-head {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.u-tooltip .tt-entry { margin-bottom: 0.35rem; }
.u-tooltip .tt-entry:last-child { margin-bottom: 0; }
.u-tooltip .tt-name {
  font-weight: 600;
  color: var(--ink);
}
.u-tooltip .tt-desc {
  color: var(--ink-2);
}

/* Bottom-row tooltips flip up so they don't get clipped */
.units-wrap table.units tbody tr:nth-last-child(-n+5) .u-tooltip {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
}

/* unit icon in units table */
.u-icon-cell { width: 44px; padding-right: 0.3rem !important; }
.u-icon {
  width: 36px; height: 36px;
  display: block;
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  border-radius: 2px;
  object-fit: cover;
}

/* attack-type chip */
.atk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.12em 0.55em;
  border: 1px solid var(--rule);
  border-radius: 2px;
  white-space: nowrap;
  background: var(--paper);
}
.atk-chip .atk-glyph { font-size: 0.92em; opacity: 0.85; }
.atk-melee   { color: #8a3018; border-color: #d6a48b; }
.atk-long    { color: #6a4a18; border-color: #d6c08b; }
.atk-ranged  { color: #2c5d83; border-color: #a8c0d4; }

@media (max-width: 760px) {
  .shell { padding: 1.4rem 1rem 3rem; }
  table.matrix, table.units { font-size: 0.7rem; }
  .h-portrait { width: 36px; height: 36px; }
  .u-icon { width: 28px; height: 28px; }
}

/* ---------- tier list view ---------- */
.tier-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.74rem;
  color: var(--muted);
  margin: 0.4rem 0 1.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tier-scale b {
  color: var(--ink);
  font-weight: 700;
  display: inline-block;
  min-width: 1em;
  text-align: center;
  margin-right: 0.4em;
}
.tier-scale .tier-derived-key { font-style: italic; opacity: 0.85; }
.tier-scale .tier-derived-key em {
  font-style: normal;
  background: var(--bg-warm);
  padding: 0.05em 0.4em;
  border: 1px solid var(--rule);
  margin-right: 0.4em;
  font-size: 0.9em;
}

/* bans table */
.bans-wrap {
  border: 1px solid var(--rule);
  background: var(--paper);
  margin: 0.4rem 0 1.6rem;
}
table.bans {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
table.bans thead th {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: left;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--rule-bold);
}
table.bans thead th.num { text-align: right; width: 36px; }
table.bans td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  font-size: 0.92rem;
}
table.bans td.num {
  text-align: right;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  width: 36px;
}
table.bans tr:last-child td { border-bottom: 0; }
table.bans tr:hover td { background: var(--hover); }
table.bans .b-hero {
  display: flex; align-items: center; gap: 0.55rem;
  white-space: nowrap;
  width: 220px;
}
table.bans .b-portrait {
  width: 32px; height: 32px;
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  border-radius: 2px;
  object-fit: cover;
}
table.bans .b-name { font-weight: 600; color: var(--ink); }
table.bans .b-why { color: var(--ink-2); }

/* archetype cards */
.archetypes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0.4rem 0 1.6rem;
}
@media (max-width: 760px) { .archetypes { grid-template-columns: 1fr; } }
.archetype {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.85rem 1rem;
}
.archetype-title {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.35rem;
}
.archetype-body {
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* faction sections */
.faction-section { margin-bottom: 2.4rem; }
.faction-summary {
  font-size: 0.96rem;
  color: var(--ink-2);
  max-width: 56em;
  margin: 0.6rem 0 0.4rem;
}
.faction-tip {
  font-size: 0.88rem;
  color: var(--muted);
  border-left: 2px solid var(--rule);
  padding: 0.1rem 0 0.1rem 0.7rem;
  max-width: 52em;
  margin: 0 0 1rem;
}

/* tier blocks */
.tier-block { margin: 0.7rem 0 0.4rem; }
.tier-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.5rem;
}
.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--paper);
  border-radius: 2px;
  flex-shrink: 0;
}
.tier-badge.tier-S { background: #9a4818; }
.tier-badge.tier-A { background: #b8861b; }
.tier-badge.tier-B { background: #2c5d83; color: #fffdf6; }
.tier-badge.tier-C { background: var(--muted); }

.tier-label {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}
.tier-count {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  color: var(--faint);
  margin-left: auto;
  padding: 0.05em 0.45em;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

/* tier hero rows */
.tier-heroes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.tier-hero {
  display: flex;
  gap: 0.85rem;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.tier-hero:hover { background: var(--hover); }
.th-portrait {
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}
.th-body { flex: 1; min-width: 0; }
.th-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}
.th-name { font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.th-class {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.th-specialty {
  font-style: italic;
  color: var(--ink-2);
  font-size: 0.92rem;
}
.th-derived {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 0.05em 0.4em;
  border-radius: 2px;
  background: var(--bg-warm);
}
.th-army {
  color: var(--ink-2);
  font-size: 0.85rem;
  font-style: italic;
  margin-bottom: 0.2rem;
}
.th-note {
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 60em;
}

/* tier filter buttons retain segmented control look but accent by tier */
.seg.multi button.tier-S.active { background: #9a4818; border-color: #9a4818; }
.seg.multi button.tier-A.active { background: #b8861b; border-color: #b8861b; }
.seg.multi button.tier-B.active { background: #2c5d83; border-color: #2c5d83; }
.seg.multi button.tier-C.active { background: var(--muted); border-color: var(--muted); }

/* ---------- guides view ---------- */
.tips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin: 0.4rem 0 1.4rem;
}
@media (max-width: 760px) { .tips { grid-template-columns: 1fr; } }
.tip {
  border-left: 3px solid var(--rule);
  padding: 0.4rem 0.9rem;
  background: var(--paper);
}
.tip-title {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.tip-body {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.45;
}

.faction-guide { margin-top: 0.6rem; }

.guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-top: 1rem;
}
@media (max-width: 1080px) { .guide-grid { grid-template-columns: 1fr; } }

.guide-col h3 {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

table.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
table.guide-table th {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: left;
  font-weight: 600;
  padding: 0.45rem 0.5rem;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--rule-bold);
  white-space: nowrap;
}
table.guide-table th.num-col, table.guide-table td.num-col {
  text-align: right;
  width: 32px;
  padding-right: 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
}
table.guide-table th.phase-col, table.guide-table td.phase-col { width: 96px; }
table.guide-table th.prio-col, table.guide-table td.prio-col { width: 64px; text-align: center; }
table.guide-table td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: 0.92rem;
}
table.guide-table tr:hover td { background: var(--hover); }
table.guide-table tr.traps-divider td {
  background: var(--bg-warm);
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--rule-bold);
}
table.guide-table tr.trap-row td { color: var(--muted); }
table.guide-table tr.trap-row .b-name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule); }

.phase {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.phase-skip { color: var(--faint); }

.b-name { font-weight: 600; color: var(--ink); }
.b-id {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--faint);
  margin-top: 1px;
}
.l-desc {
  font-style: italic;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 1px;
}
.note-col { color: var(--ink-2); line-height: 1.45; }

.prio-badge {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.12em 0.5em;
  border-radius: 2px;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--muted);
  white-space: nowrap;
}
.prio-badge.prio-S { background: #9a4818; }
.prio-badge.prio-A { background: #b8861b; }
.prio-badge.prio-B { background: #2c5d83; }
.prio-badge.prio-trap {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--rule-bold);
}

/* ---------- draft view ---------- */
.format-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  margin: 0.4rem 0 1rem;
  max-width: 60em;
}
@media (max-width: 760px) { .format-list { grid-template-columns: 1fr; } }
.format-list li {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.88rem;
  background: var(--paper);
  border-left: 3px solid var(--accent);
  padding: 0.35rem 0.7rem;
  color: var(--ink-2);
}

.draft-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin: 0.4rem 0 1.6rem;
}
@media (max-width: 1080px) { .draft-cols { grid-template-columns: 1fr; } }
.draft-col {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 1rem 1.2rem;
}
.draft-col h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.draft-summary {
  font-size: 0.94rem;
  color: var(--ink-2);
  font-style: italic;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.6rem;
}
.draft-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}
.draft-steps li {
  margin-bottom: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.4;
}
.draft-steps .step-label {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--accent);
}
.draft-steps .step-body {
  font-size: 0.92rem;
  color: var(--ink-2);
}

.counter-matrix td { font-size: 0.88rem; }
.counter-matrix .note-col { font-size: 0.84rem; }

.ban-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin: 0.6rem 0 1.4rem;
}
@media (max-width: 1080px) { .ban-grid { grid-template-columns: 1fr; } }
.ban-section {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.8rem 1rem 0.6rem;
}
.ban-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
.ban-head-label {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.ban-head-icon {
  width: 28px; height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
.ban-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: banitem;
}
.ban-list li {
  display: flex;
  gap: 0.7rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--rule);
  counter-increment: banitem;
}
.ban-list li:last-child { border-bottom: 0; }
.ban-list li::before {
  content: counter(banitem);
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--faint);
  flex-shrink: 0;
  width: 1em;
  text-align: right;
  margin-right: 0.1rem;
  margin-top: 0.5rem;
}
.ban-portrait {
  width: 36px; height: 36px;
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.ban-body { flex: 1; min-width: 0; }
.ban-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.96rem;
}
.ban-why {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.4;
  margin-top: 1px;
}

/* ---------- faction view (per-faction combined page) ---------- */
.faction-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.faction-switcher a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.faction-switcher a:hover {
  border-color: var(--rule-bold);
  color: var(--ink);
}
.faction-switcher a.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.faction-switcher a img {
  width: 22px; height: 22px;
  object-fit: contain;
}
.faction-switcher a.active img { filter: brightness(0) invert(1); opacity: 0.9; }

.faction-hero {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0.4rem 0 0.6rem;
}
.faction-hero-icon {
  width: 64px; height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
  flex-shrink: 0;
}
.faction-hero-name {
  margin: 0;
  font-size: 2.4rem;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.faction-hero-classes {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.86rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}
.faction-hero-skill { color: var(--ink-2); text-transform: none; font-style: italic; letter-spacing: 0; }
.faction-lede { max-width: 56em; }

.faction-meta-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 1.6rem;
}
@media (max-width: 760px) { .faction-meta-cards { grid-template-columns: 1fr; } }
.meta-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.7rem 1rem;
}
.meta-card-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.meta-card-body {
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.meta-card-body b { font-weight: 700; color: var(--ink); }
.meta-card-why {
  font-size: 0.86rem;
  color: var(--ink-2);
  line-height: 1.45;
}

/* ban list — taller layout used in faction page */
.ban-list-tall li { padding: 0.6rem 0; }

/* army composition table */
.army-comp-table .b-name { font-size: 0.98rem; }
.tactics-list {
  margin: 0.4rem 0 1rem;
  padding-left: 1.2rem;
  max-width: 60em;
}
.tactics-list li {
  margin-bottom: 0.3rem;
  color: var(--ink-2);
  line-height: 1.45;
}

/* clickable faction pills (used inside matchup tables) */
a.faction-pill {
  text-decoration: none;
  cursor: pointer;
  border-bottom-width: 1px;
}
a.faction-pill:hover { border-color: var(--rule-bold); }

/* signature mechanic block on faction page */
.signature-mechanic {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.85rem 1.1rem 0.7rem;
  margin: 1rem 0 1.4rem;
  border-left: 3px solid var(--accent);
  max-width: 60em;
}
.signature-mechanic-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.signature-mechanic-title {
  font-family: Charter, Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.signature-mechanic-body {
  font-size: 0.94rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 0.6rem;
}
.signature-mechanic-link {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.signature-mechanic-link a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  font-weight: 600;
}

/* tournament-phase grid on faction page */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0.6rem 0 1.4rem;
}
@media (max-width: 1080px) { .phase-grid { grid-template-columns: 1fr; } }
.phase-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.8rem 1rem;
  border-top: 3px solid var(--accent);
}
.phase-card:nth-child(2) { border-top-color: var(--gold); }
.phase-card:nth-child(3) { border-top-color: var(--accent-2); }
.phase-card-head {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}
.phase-card-body {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------- mechanics primer view ---------- */
.mech-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0;
  margin: 0.4rem 0 1.6rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.mech-toc a {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
}
.mech-toc a:hover { color: var(--ink); border-color: var(--rule-bold); }

.mech-section { margin: 2.4rem 0; scroll-margin-top: 1rem; }
.mech-section h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin: 0.6rem 0 0.8rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: Charter, Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  border-bottom: 1px solid var(--rule-bold);
  padding-bottom: 0.5rem;
}
.mech-section h2 .mech-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent);
}
.mech-section h2 .mech-title {
  font-family: Charter, Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.mech-intro {
  font-size: 1.04rem;
  color: var(--ink-2);
  max-width: 56em;
  font-style: italic;
}
.mech-para {
  max-width: 60em;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0.6rem 0;
}
.mech-para strong, .mech-callout-body strong { color: var(--ink); font-weight: 600; }
.mech-para em, .mech-callout-body em { color: var(--ink); font-style: italic; }
.mech-para code, .mech-callout-body code {
  font-family: "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--bg-warm);
  padding: 0.05em 0.35em;
  border-radius: 2px;
}

.mech-callout {
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  border-left: 3px solid var(--accent-2);
  padding: 0.65rem 1rem;
  margin: 0.9rem 0;
  max-width: 60em;
}
.mech-callout-title {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.mech-callout-body {
  font-size: 0.94rem;
  color: var(--ink-2);
  line-height: 1.5;
}

.mech-facts {
  border: 1px solid var(--rule);
  border-collapse: collapse;
  margin: 0.8rem 0 1.2rem;
  width: 100%;
  max-width: 60em;
  background: var(--paper);
}
.mech-facts th {
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  width: 32%;
  background: var(--bg-warm);
}
.mech-facts td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.94rem;
}
.mech-facts tr:last-child th, .mech-facts tr:last-child td { border-bottom: 0; }

.mech-pitfalls {
  border-left: 3px solid var(--rule-bold);
  background: var(--bg-warm);
  padding: 0.55rem 1rem 0.55rem 1rem;
  margin: 1rem 0;
  max-width: 60em;
}
.mech-pitfalls-head {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.mech-pitfalls ul { margin: 0; padding-left: 1.2rem; }
.mech-pitfalls li {
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

.mech-links {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 1rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dotted var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
}
.mech-links-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink);
  margin-right: 0.4rem;
}
.mech-links a {
  color: var(--accent-2);
  border-bottom: 1px solid var(--accent-2);
}
.mech-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.mech-faction-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.8rem;
}
@media (max-width: 760px) { .mech-faction-grid { grid-template-columns: 1fr; } }
.mech-faction-card {
  display: block;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.15s, background 0.15s;
}
.mech-faction-card:hover { border-color: var(--rule-bold); }
.mech-faction-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.6rem;
}
.mech-faction-icon {
  width: 44px; height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
.mech-faction-title {
  font-family: Charter, Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  margin-top: 0.1rem;
}
.mech-faction-body {
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.5;
}

.mech-resources {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-top: 0.6rem;
}
@media (max-width: 760px) { .mech-resources { grid-template-columns: 1fr; } }
.mech-resource {
  display: block;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.7rem 1rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--rule);
}
.mech-resource:hover { border-color: var(--rule-bold); }
.mech-resource-title {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent-2);
  margin-bottom: 0.2rem;
}
.mech-resource-desc {
  color: var(--ink-2);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* faction-card on the hub */
.faction-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.faction-card-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}
.faction-card-icon {
  width: 48px; height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}

/* faction-page CTA (e.g. open calculator) */
.faction-page-actions { margin: 0 0 1rem; }
.faction-page-cta {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  text-transform: uppercase;
}
.faction-page-cta:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* ---------- calculator view ---------- */
.calc-kind-switcher {
  display: flex;
  gap: 0;
  margin: 0.4rem 0 1rem;
  border-bottom: 1px solid var(--rule);
}
.calc-kind-switcher a {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--muted);
  padding: 0.55rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  cursor: pointer;
}
.calc-kind-switcher a:hover { color: var(--ink); }
.calc-kind-switcher a.active {
  color: var(--ink);
  border-bottom-color: var(--rule-bold);
  font-weight: 700;
}

/* hub cards */
.calc-hub-card { display: flex; flex-direction: column; gap: 0.6rem; }
.calc-hub-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: auto;
}
.calc-hub-actions a {
  flex: 1;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--rule);
  border-bottom-color: var(--accent);
  padding: 0.45rem 0.6rem;
  text-decoration: none;
  border-radius: 2px;
  background: var(--bg);
}
.calc-hub-actions a:hover {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}

.calc-totals-wide { grid-column: span 2; }

.calc-totals {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 1.2rem;
  align-items: center;
  background: var(--bg-warm);
  border: 1px solid var(--rule-bold);
  padding: 0.7rem 1rem;
  margin: 0.4rem 0 1.4rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
@media (max-width: 900px) {
  .calc-totals { grid-template-columns: 1fr; }
}
.calc-totals-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.calc-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: center;
}
.calc-res {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.35em;
}
.calc-res.empty { color: var(--faint); }
.calc-res.has   { color: var(--ink); font-weight: 600; }
.calc-res-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.calc-res.has .calc-res-label { color: var(--ink-2); }
.calc-res-value { min-width: 1ch; text-align: left; }

.calc-lp {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.calc-lp-value {
  font-family: Charter, Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.calc-lp-label {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.calc-totals-actions button {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  border-radius: 2px;
}
.calc-totals-actions button:hover { border-color: var(--rule-bold); color: var(--ink); }

.calc-cat { margin: 0.5rem 0 0.7rem; }
.calc-cat h3 {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  margin: 0 0 0.3rem;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2rem;
}
.calc-buildings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.4rem;
}
.calc-building {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.4rem 0.55rem;
  border-radius: 3px;
  display: flex; flex-direction: column; gap: 0.3rem;
  cursor: pointer;
  transition: border-color 60ms, background 60ms;
}
.calc-building:hover { border-color: var(--rule-bold); background: var(--hover); }
.calc-building:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.calc-building.picked { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.calc-building-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.calc-building-icon {
  width: 44px; height: 44px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px;
  flex-shrink: 0;
}
.calc-building-titles {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.calc-building-name {
  font-family: Charter, Georgia, serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.15;
}
.calc-building-name.tight { font-size: 0.82rem; }
.calc-building-id {
  font-size: 0.62rem;
  color: var(--faint);
}
/* Level chips render inline in a single row under the header. */
.calc-level-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.calc-level-effect {
  font-style: italic;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  padding: 0.15rem 0.4rem;
  border-left: 2px solid var(--rule);
}
.calc-level-effect.active {
  color: var(--ink-2);
  border-left-color: var(--accent);
}
.calc-level-effect-name {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}
.calc-level-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.45rem;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  background: var(--bg);
  border: 1px solid var(--rule);
  cursor: pointer;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  font-size: 0.74rem;
  white-space: nowrap;
}
.calc-level-btn:hover { border-color: var(--rule-bold); color: var(--ink); }
.calc-level-btn.active {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.calc-level-btn.active.calc-level-law {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.calc-level-num {
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.calc-level-cost {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25em;
  font-size: 0.72rem;
}
.calc-cost {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  white-space: nowrap;
  color: inherit;
}
.calc-cost-icon {
  width: 14px; height: 14px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}
/* Slight tint on the icon when sitting on the accent-coloured active chip
   so light-on-dark renders OK; otherwise the asset already has decent
   alpha. */
.calc-level-btn.active .calc-cost-icon { filter: brightness(0) invert(1); }

/* Prereq strip: which other buildings this one's *current* level depends on. */
.calc-prereqs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.25rem;
  align-items: center;
  font-size: 0.72rem;
}
.calc-prereqs-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
  margin-right: 0.15rem;
}
.calc-prereq {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.05rem 0.35rem 0.05rem 0.2rem;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--muted);
  line-height: 1.4;
}
.calc-prereq.satisfied {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border-color: var(--accent);
  color: var(--ink-2);
}
.calc-prereq-icon {
  width: 16px; height: 16px;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px;
  flex-shrink: 0;
}
.calc-prereq-name {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
}
.calc-prereq-lvl {
  font-weight: 700;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ----- laws ----- */
.calc-law-row {
  margin: 0.6rem 0;
  padding: 0;
}
.calc-law-row.locked { opacity: 0.6; }

/* Threshold band — horizontal rule with a centered "X/Y LP" status pill.
   Replaces the prose row header so the eye lands on the law cards faster.
   Per-law descriptions stay visible on the cards below — only the row
   *header* compacted. */
.calc-law-row-band {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 0.5rem;
}
.calc-law-row-band::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.calc-law-row-num {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
}
.calc-law-row-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}
.calc-law-row-pill.open {
  background: color-mix(in oklch, var(--accent-2) 14%, transparent);
  border-color: var(--accent-2);
  color: var(--ink-2);
}
.calc-law-row-progress {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.calc-law-row-pill-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.calc-law-row-pill-note {
  color: var(--faint);
  font-size: 0.68rem;
  font-style: italic;
}

/* Two columns reflect the in-game law-screen layout (A on the left, B on the
   right). Each column is its own group; laws stack vertically within. */
.calc-law-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.7rem;
}
@media (max-width: 760px) { .calc-law-groups { grid-template-columns: 1fr; } }
.calc-law-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.calc-law {
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: 0.4rem 0.55rem;
  border-radius: 3px;
  display: flex; flex-direction: column; gap: 0.3rem;
  cursor: pointer;
  transition: border-color 60ms, background 60ms;
}
.calc-law:hover { border-color: var(--rule-bold); background: var(--hover); }
.calc-law:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}
.calc-law.picked { border-color: var(--accent-2); box-shadow: inset 2px 0 0 var(--accent-2); }
.calc-law-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.calc-law-icon {
  width: 44px; height: 44px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px;
  flex-shrink: 0;
}
.calc-law-titles {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.calc-law-name {
  font-family: Charter, Georgia, serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.15;
}
.calc-law-num {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.62rem;
  color: var(--faint);
}
.calc-law-desc {
  font-style: italic;
  color: var(--ink-2);
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0.2rem 0;
}

/* ---------- per-faction unit browser ---------- */
.ftier-block { margin: 1.4rem 0 1.8rem; }
.ftier-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  border-bottom: 2px solid var(--rule-bold);
  padding-bottom: 0.4rem;
  margin-bottom: 0.7rem;
}
.ftier-num {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ftier-count {
  font-family: Charter, Georgia, serif;
  font-style: italic;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.ftier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
@media (max-width: 1080px) { .ftier-grid { grid-template-columns: 1fr; } }

.ucard {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.85rem 1rem;
  border-radius: 2px;
  border-top: 3px solid var(--rule-bold);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ucard-base { border-top-color: var(--muted); }
.ucard-upg  { border-top-color: var(--accent); }
.ucard-alt  { border-top-color: var(--accent-2); border-top-style: dashed; }

.ucard-head {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.ucard-icon {
  width: 56px; height: 56px;
  object-fit: cover;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  flex-shrink: 0;
}
.ucard-head-body { flex: 1; min-width: 0; }
.ucard-variant-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.ucard-name {
  font-family: Charter, Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
}
.ucard-id {
  font-size: 0.7rem;
  color: var(--faint);
  margin-top: 1px;
}

.ucard-narr {
  font-style: italic;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px dotted var(--rule);
}

.ucard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem 0.6rem;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-variant-numeric: tabular-nums;
}
.ucard-stats > div {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: 0.85rem;
}
.ucard-stats .lbl {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  min-width: 2.6em;
}
.ucard-stats b {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
}

.ucard-effects {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.55rem;
}
.ucard-effect-block {}
.ucard-effect-head {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.ucard-effect-list {
  margin: 0;
  padding-left: 1rem;
  list-style: disc;
}
.ucard-effect-list li {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-2);
  margin-bottom: 0.2rem;
}
.ucard-effect-name { font-weight: 600; color: var(--ink); }
.ucard-effect-desc { font-style: italic; color: var(--ink-2); }

.ucard-no-effects {
  font-size: 0.78rem;
  color: var(--faint);
  font-style: italic;
  border-top: 1px dotted var(--rule);
  padding-top: 0.5rem;
}

/* ---------- map objects view ---------- */
.mo-cat { margin: 1.6rem 0; }
.mo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.8rem;
}
.mo-card {
  display: flex;
  gap: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 2px;
}
.mo-img {
  width: 140px; height: 140px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 4px;
  flex-shrink: 0;
}
.mo-body { flex: 1; min-width: 0; }
.mo-name {
  font-family: Charter, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.005em;
}
.mo-desc {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0 0 0.4rem;
}
.mo-narr {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
  font-style: italic;
}

/* ---------- map templates view ---------- */
.mt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 0.5rem 0.7rem;
}
@media (max-width: 760px) { .mt-grid { grid-template-columns: 1fr; } }
.mt-card {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 3px;
}
.mt-img {
  width: 120px; height: 120px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 3px;
  flex-shrink: 0;
}
@media (max-width: 760px) { .mt-img { width: 100px; height: 100px; } }
.mt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.mt-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.mt-name {
  font-family: Charter, Georgia, serif;
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  text-transform: none;
  line-height: 1.2;
}
.mt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.mt-tag {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 0.1em 0.5em;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-2);
  background: var(--bg);
}
.mt-tag-classic     { color: var(--accent);   border-color: var(--accent); }
.mt-tag-single-hero { color: var(--accent-2); border-color: var(--accent-2); }
.mt-tag-pve         { color: var(--gold);     border-color: var(--gold); }
.mt-tag-scenario    { color: var(--combat);   border-color: var(--combat); }
.mt-tag-tournament  { color: var(--magic);    border-color: var(--magic); }
.mt-tag-size        { color: var(--muted); }
.mt-tag-players     { color: var(--muted); font-variant-numeric: tabular-nums; }
.mt-desc {
  font-size: 0.8rem;
  color: var(--ink-2);
  line-height: 1.4;
  margin: 0;
}

/* === Resources page (compact card grid) === */
.res-section { margin: 0.6rem 0 1rem; }
.res-section > h2 {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.2rem;
  margin: 0 0 0.45rem;
}
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem 0.7rem;
}
.res-card {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 3px;
}
.res-img {
  width: 56px; height: 56px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px;
  flex-shrink: 0;
  align-self: flex-start;
}
.res-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.res-name {
  font-family: Charter, Georgia, serif;
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  line-height: 1.15;
}
.res-narr {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.35;
}
.res-narr em { color: var(--muted); font-style: italic; }
.res-tactical {
  font-size: 0.78rem;
  color: var(--ink-2);
  line-height: 1.35;
  margin: 0;
}

/* ---------- subclasses view (simplified card list) ---------- */
.sub-faction-block { margin: 1.4rem 0 1.8rem; }
/* Two columns: might (Knight, etc.) on the left, magic (Cleric, etc.) on
   the right. Column-first flow so each class's two subclasses stack
   vertically instead of going across rows. */
.sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: 0.8rem;
  margin-top: 0.8rem;
}
@media (max-width: 760px) {
  .sub-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
}
.sub-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.85rem 1rem;
  border-radius: 2px;
  border-left: 3px solid var(--rule-bold);
}
.sub-card.sub-might { border-left-color: var(--accent); }
.sub-card.sub-magic { border-left-color: var(--accent-2); }
.sub-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.sub-name {
  font-family: Charter, Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
}
.sub-class {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.sub-skills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
@media (max-width: 540px) { .sub-skills { grid-template-columns: repeat(3, 1fr); } }
.sub-skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  padding: 0.3rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  border-radius: 2px;
  border-top: 2px solid var(--rule-bold);
}
.sub-skill.sub-skill-combat  { border-top-color: var(--combat); }
.sub-skill.sub-skill-magic   { border-top-color: var(--magic); }
.sub-skill.sub-skill-school  { border-top-color: var(--school); }
.sub-skill.sub-skill-utility { border-top-color: var(--utility); }
.sub-skill-icon {
  width: 32px; height: 32px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px;
}
.sub-skill-name {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.2;
}
.sub-effect {
  font-style: italic;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.45;
  border-top: 1px dotted var(--rule);
  padding-top: 0.5rem;
}
.sub-effect b { color: var(--ink); font-weight: 600; }

/* Starting-hero strip on spell cards — small portraits + names, replacing
   the awkward faction-pill text chips. */
.spell-starters {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px dotted var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.spell-starters-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
}
.spell-starter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.spell-starter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15rem 0.45rem 0.15rem 0.2rem;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.74rem;
  line-height: 1.3;
  transition: border-color 60ms, color 60ms;
}
.spell-starter-chip:hover { border-color: var(--rule-bold); color: var(--ink); }
.spell-starter-portrait {
  width: 22px; height: 22px;
  object-fit: cover;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 50%;
  flex-shrink: 0;
}
.spell-starter-chip.faction-temple     { border-color: oklch(0.5 0.12 35 / 0.5); }
.spell-starter-chip.faction-necropolis { border-color: oklch(0.5 0.04 280 / 0.5); }
.spell-starter-chip.faction-grove      { border-color: oklch(0.5 0.12 145 / 0.5); }
.spell-starter-chip.faction-hive       { border-color: oklch(0.55 0.13 25 / 0.5); }
.spell-starter-chip.faction-schism     { border-color: oklch(0.55 0.1 230 / 0.5); }
.spell-starter-chip.faction-dungeon    { border-color: oklch(0.5 0.12 305 / 0.5); }

/* lexiav verdict line under the subclass effect */
.sub-card-head .tier-badge {
  margin-left: auto;
  font-size: 0.75rem;
}
.sub-verdict {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dotted var(--rule);
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.45;
}
.sub-verdict-src {
  display: inline-block;
  margin-right: 0.4rem;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  vertical-align: 0.05rem;
}

/* ---------- spells view ---------- */
.spell-school { margin: 1.4rem 0 1.8rem; }
.spell-school h2 {
  border-bottom-color: var(--accent-2);
}
.spell-school-day h2     { border-bottom-color: oklch(0.62 0.14 80); }
.spell-school-night h2   { border-bottom-color: oklch(0.45 0.10 295); }
.spell-school-space h2   { border-bottom-color: oklch(0.55 0.12 245); }
.spell-school-primal h2  { border-bottom-color: oklch(0.55 0.16 30); }
.spell-school-neutral h2 { border-bottom-color: var(--rule-bold); }

.spell-tier-block { margin: 0.8rem 0 1.2rem; }
.spell-tier-head {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px dotted var(--rule);
}
.spell-tier-cd {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-style: italic;
  font-size: 0.92em;
}

.spell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.7rem;
}
.spell-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.6rem 0.8rem;
  border-radius: 2px;
}
.spell-head {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dotted var(--rule);
}
.spell-icon {
  width: 40px; height: 40px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px;
  flex-shrink: 0;
}
.spell-head-body { flex: 1; min-width: 0; }
.spell-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.spell-name {
  font-family: Charter, Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-transform: none;
  line-height: 1.15;
}
.spell-scope {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.05em 0.4em;
  border-radius: 2px;
}
.spell-meta {
  display: flex;
  gap: 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 1px;
}
.spell-magic-type {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.spell-mana { font-variant-numeric: tabular-nums; }
.spell-desc {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0;
  font-style: italic;
}

/* ---------- skills view ---------- */
.skill-group { margin: 1.6rem 0; }
.skill-group h2 { margin-top: 1.4rem; }
.skill-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.skill-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 1rem 1.2rem;
  border-radius: 2px;
}
.skill-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.skill-icon {
  width: 56px; height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 2px;
}
.skill-head-body { flex: 1; min-width: 0; }
.skill-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.skill-name {
  font-family: Charter, Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  text-transform: none;
}
.skill-type-chip {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  padding: 0.12em 0.5em;
  border: 1px solid var(--rule-bold);
  border-radius: 2px;
  color: var(--ink-2);
}
.skill-sc-count, .skill-never {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.skill-never { color: var(--faint); font-style: italic; }
.skill-base-desc {
  margin: 0;
  font-style: italic;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}

.skill-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
@media (max-width: 1080px) { .skill-levels { grid-template-columns: 1fr; } }
.skill-level {
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: 0.6rem 0.8rem;
  border-top: 3px solid var(--rule-bold);
  border-radius: 2px;
}
.skill-level-1 { border-top-color: var(--accent); }
.skill-level-2 { border-top-color: var(--gold); }
.skill-level-3 { border-top-color: var(--accent-2); }
.skill-level-head {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.skill-level-icon {
  width: 32px; height: 32px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px;
  flex-shrink: 0;
}
.skill-level-tier {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.1rem;
}
.skill-level-num {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.skill-level-tier-name {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}
.skill-level-name {
  font-family: Charter, Georgia, serif;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink);
  line-height: 1.15;
}
.skill-level-desc {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin-bottom: 0.5rem;
}

.skill-subskills {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dotted var(--rule);
}
.skill-subskills-head {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.skill-subskills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.skill-subskill {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.skill-subskill-icon {
  width: 26px; height: 26px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px;
  flex-shrink: 0;
}
.skill-subskill-name {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.15;
}
.skill-subskill-desc {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.35;
  margin-top: 1px;
}

.skill-foot {
  border-top: 1px solid var(--rule);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
}
.skill-foot:first-of-type { margin-top: 0; }
.skill-foot-starters { margin-bottom: 0.4rem; }

.skill-starter-count {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.skill-starter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.4rem;
}
.skill-starter {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  border-radius: 2px;
}
.skill-starter-portrait {
  width: 32px; height: 32px;
  object-fit: cover;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  flex-shrink: 0;
}
.skill-starter-body { min-width: 0; flex: 1; }
.skill-starter-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skill-starter-meta {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  margin-top: 1px;
}
.skill-starter-level {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.skill-foot-head {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.skill-foot-subs { display: flex; flex-direction: column; gap: 0.35rem; }
.skill-foot-fac {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.skill-foot-sub-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.skill-foot-sub.might { color: var(--accent); font-weight: 600; }
.skill-foot-sub.magic { color: var(--accent-2); font-weight: 600; }
.skill-foot-sub em.skill-foot-class {
  color: var(--muted);
  font-style: italic;
  font-weight: 400;
  font-size: 0.85em;
}

/* ---------- dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #15110d;
    --bg-warm:   #1d1812;
    --paper:     #1a1611;
    --ink:       #ede4cf;
    --ink-2:     #c8bfa8;
    --muted:     #8b8474;
    --faint:     #5b5648;
    --rule:      #3a342a;
    --rule-bold: #75694e;
    --hover:     #25201a;
    --accent:    #d68b4a;       /* warmer burnt orange for dark */
    --accent-2:  #6fa6cf;       /* slate blue, lifted */
    --gold:      #e0a93a;
    --combat:    oklch(0.72 0.13 35);
    --magic:     oklch(0.72 0.12 245);
    --school:    oklch(0.72 0.12 295);
    --utility:   oklch(0.78 0.06 110);
  }

  /* tier badges — keep saturated so they pop on dark */
  .tier-badge.tier-S { background: #c46124; color: #1a1611; }
  .tier-badge.tier-A { background: #d8a52a; color: #1a1611; }
  .tier-badge.tier-B { background: #4a89b8; color: #1a1611; }
  .tier-badge.tier-C { background: #6b6358; color: #1a1611; }

  .prio-badge { color: #1a1611; }
  .prio-badge.prio-S { background: #c46124; }
  .prio-badge.prio-A { background: #d8a52a; }
  .prio-badge.prio-B { background: #4a89b8; }
  .prio-badge.prio-trap {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--rule-bold);
  }

  /* faction pills get more contrast against dark paper */
  .faction-pill { background: var(--bg-warm); color: var(--ink); }
  .faction-pill.faction-temple     { color: #e2a87a; border-color: #6e4a2c; }
  .faction-pill.faction-necropolis { color: #b3b6bb; border-color: #50535a; }
  .faction-pill.faction-grove     { color: #82c189; border-color: #355b3a; }
  .faction-pill.faction-hive       { color: #e08c6e; border-color: #6c3825; }
  .faction-pill.faction-schism     { color: #92bcd9; border-color: #355170; }
  .faction-pill.faction-dungeon    { color: #b8a3df; border-color: #4a3970; }
  .faction-pill.faction-neutral    { color: var(--muted); border-color: var(--rule); }

  .atk-melee   { color: #e08c6e; border-color: #6c3825; }
  .atk-long    { color: #e0c478; border-color: #6c5825; }
  .atk-ranged  { color: #92bcd9; border-color: #355170; }

  /* portraits / icons sit on warm dark plate */
  .h-portrait, .th-portrait, .ban-portrait, .u-icon, .spec-icon {
    background: #2a2419;
  }

  /* faction-card icons & glyphs need a bit more punch */
  .faction-icon, .faction-hero-icon, .faction-card-icon, .faction-band-icon {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  }

  /* search input + segmented control inverted */
  .search { background: var(--paper); color: var(--ink); }
  .seg button.active { background: var(--ink); color: var(--bg); }
  .seg.multi button.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
  .seg.multi button:first-child.active,
  .seg.multi button:nth-child(2).active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .seg.multi button.tier-S.active { background: #c46124; border-color: #c46124; color: #1a1611; }
  .seg.multi button.tier-A.active { background: #d8a52a; border-color: #d8a52a; color: #1a1611; }
  .seg.multi button.tier-B.active { background: #4a89b8; border-color: #4a89b8; color: #1a1611; }
  .seg.multi button.tier-C.active { background: #6b6358; border-color: #6b6358; color: #1a1611; }

  /* faction-switcher active pill needs to invert against dark bg */
  .faction-switcher a.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .faction-switcher a.active img { filter: brightness(0) invert(0); opacity: 0.85; }

  /* tooltip readability */
  .u-tooltip {
    background: #221d16;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.4);
  }

  /* lighten footer slightly */
  footer.sitefoot { color: var(--muted); }

  /* calculator: dark mode polish for active button states */
  .calc-level-btn.active { background: #c46124; color: #1a1611; border-color: #c46124; }
  .calc-level-btn.active.calc-level-law { background: #4a89b8; color: #1a1611; border-color: #4a89b8; }
  .calc-totals { background: #1d1812; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
  .calc-lp-value { color: #d68b4a; }
}

/* ---------- artifacts view ---------- */
.art-section { margin: 1.6rem 0; }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.8rem; }
.art-card { display: flex; gap: 0.8rem; padding: 0.8rem; border: 1px solid var(--rule); background: var(--paper); border-radius: 2px; border-left: 3px solid var(--rule-bold); }
.art-rarity-common    { border-left-color: var(--muted); }
.art-rarity-uncommon  { border-left-color: oklch(0.55 0.12 145); }
.art-rarity-rare      { border-left-color: var(--accent-2); }
.art-rarity-legendary { border-left-color: var(--gold); }
.art-rarity-unique    { border-left-color: var(--accent); }
.art-img { width: 96px; height: 96px; object-fit: contain; background: var(--bg-warm); border: 1px solid var(--rule); border-radius: 2px; padding: 4px; flex-shrink: 0; }
.art-body { flex: 1; min-width: 0; }
.art-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.art-name { font-family: Charter, Georgia, serif; font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--ink); text-transform: none; }
.art-meta { display: flex; gap: 0.4rem; align-items: center; }
.art-rarity-chip { font-family: -apple-system, Inter, sans-serif; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 0.1em 0.5em; border: 1px solid var(--rule); border-radius: 2px; }
.art-rarity-chip-common    { color: var(--muted); }
.art-rarity-chip-uncommon  { color: oklch(0.45 0.12 145); border-color: oklch(0.55 0.12 145); }
.art-rarity-chip-rare      { color: var(--accent-2); border-color: var(--accent-2); }
.art-rarity-chip-legendary { color: var(--gold);     border-color: var(--gold); }
.art-rarity-chip-unique    { color: var(--accent);   border-color: var(--accent); }
.art-level { font-family: -apple-system, Inter, sans-serif; font-size: 0.66rem; color: var(--faint); font-weight: 600; }
.art-desc { font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; margin: 0 0 0.4rem; }
.art-bonuses { margin: 0 0 0.4rem; padding-left: 1.1rem; font-size: 0.82rem; color: var(--ink-2); }
.art-bonuses li { margin: 0.1rem 0; }
.art-narr { font-size: 0.78rem; color: var(--muted); font-style: italic; line-height: 1.4; margin: 0 0 0.4rem; }
.art-set { font-family: -apple-system, Inter, sans-serif; font-size: 0.7rem; color: var(--muted); border-top: 1px dotted var(--rule); padding-top: 0.3rem; margin-top: 0.4rem; }
.art-set-label { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-right: 0.4em; }
.art-set-name { color: var(--accent); font-weight: 600; }
.art-set-pieces { color: var(--faint); margin-left: 0.4em; }

/* spell chips in the heroes table */
.spell-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.05em 0.4em;
  margin-right: 0.3em;
  margin-bottom: 0.15em;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 2px;
  font-size: 0.74rem;
  color: var(--ink-2);
  white-space: nowrap;
}
.spell-chip-icon {
  width: 18px; height: 18px;
  object-fit: contain;
  background: var(--bg-warm);
  border-radius: 1px;
}
.spell-chip-name {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.74rem;
}

/* hero-page link in the heroes table */
.h-name-link { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); font-weight: 600; }
.h-name-link:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* ---------- single-hero page ---------- */
.hero-page-head { display: flex; gap: 1.2rem; align-items: center; margin: 0.5rem 0 1.4rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--rule-bold); }
.hero-page-portrait { width: 96px; height: 96px; object-fit: cover; background: var(--bg-warm); border: 1px solid var(--rule); border-radius: 2px; flex-shrink: 0; }
.hero-page-titles { flex: 1; }
.hero-page-name { margin: 0; font-size: 2rem; font-family: Charter, Georgia, serif; font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; text-transform: none; }
.hero-page-class { margin-top: 0.3rem; font-family: -apple-system, Inter, sans-serif; font-size: 0.92rem; color: var(--ink-2); }
.hero-page-id { font-size: 0.7rem; color: var(--faint); margin-top: 0.3rem; }
.hero-section { margin: 1.4rem 0; }
.hero-section h2 { margin-bottom: 0.6rem; }
.hero-spec { display: flex; gap: 0.8rem; align-items: flex-start; }
.hero-spec-icon { width: 56px; height: 56px; object-fit: contain; background: var(--bg-warm); border: 1px solid var(--rule); border-radius: 50%; padding: 2px; flex-shrink: 0; }
.hero-spec-name { font-family: Charter, Georgia, serif; font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.hero-spec-desc { font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; margin: 0.3rem 0 0; max-width: 56em; font-style: italic; }
.hero-stats { display: flex; gap: 1.6rem; flex-wrap: wrap; font-family: -apple-system, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.hero-stats > div { display: flex; flex-direction: column; gap: 0.15rem; }
.hero-stats .lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.hero-stats b { font-family: Charter, Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.hero-spell-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.hero-spell-row { display: flex; gap: 0.6rem; align-items: center; padding: 0.4rem; border: 1px solid var(--rule); background: var(--paper); border-radius: 2px; max-width: 32em; }
.hero-spell-icon { width: 36px; height: 36px; object-fit: contain; background: var(--bg-warm); border: 1px solid var(--rule); border-radius: 2px; padding: 1px; flex-shrink: 0; }
.hero-spell-name { font-weight: 600; color: var(--ink); }
.hero-spell-meta { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.hero-army { font-style: italic; color: var(--ink-2); margin: 0; }
.hero-army-score { font-family: -apple-system, Inter, sans-serif; font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0 0; }
.hero-tier-row { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem; border: 1px solid var(--rule); background: var(--paper); border-radius: 2px; max-width: 60em; }
.hero-tier-note { color: var(--ink-2); line-height: 1.5; }
.hero-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
.hero-roster-card { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem; border: 1px solid var(--rule); background: var(--paper); border-radius: 2px; text-align: center; text-decoration: none; color: inherit; }
.hero-roster-card:hover { border-color: var(--accent); }
.hero-roster-card.current { border-color: var(--accent); background: var(--bg-warm); }
.hero-roster-portrait { width: 56px; height: 56px; object-fit: cover; background: var(--bg-warm); border: 1px solid var(--rule); border-radius: 2px; }
.hero-roster-name { font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.hero-roster-spec { font-size: 0.7rem; color: var(--muted); font-style: italic; }

/* masterful spell variant — bold gold chip, clearly distinct from base spell */
.spell-chip-masterful {
  border: 2px solid var(--gold);
  background: oklch(0.62 0.18 75 / 0.18);
  box-shadow: 0 0 0 1px var(--gold) inset;
  padding: 0.05em 0.5em;
  font-weight: 600;
}
.spell-chip-master {
  color: var(--gold);
  font-weight: 800;
  font-size: 0.95em;
  margin-right: 0.15em;
}
.spell-chip-masterful .spell-chip-name {
  color: var(--ink);
  font-weight: 600;
}
.spell-chip-masterful .spell-chip-name em {
  font-style: italic;
  color: var(--gold);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.05em;
}

.hero-spell-masterful { border: 2px solid var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.hero-spell-master { color: var(--gold); font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 0.4em; }

/* clickable army-stack segment */
.stack-link {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
  cursor: pointer;
}
.stack-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* clickable spell chip = inherits hero/spell chip styles, just becomes a link */
a.spell-chip { text-decoration: none; cursor: pointer; }
a.spell-chip:hover { border-color: var(--accent); }
a.spell-chip.spell-chip-masterful:hover { box-shadow: 0 0 0 1px var(--accent) inset; }

/* single-spell page */
.spell-page-head { display: flex; gap: 1.2rem; align-items: center; margin: 0.5rem 0 1.4rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--rule-bold); }
.spell-page-icon { width: 80px; height: 80px; object-fit: contain; background: var(--bg-warm); border: 1px solid var(--rule); border-radius: 2px; padding: 4px; flex-shrink: 0; }
.spell-page-name { margin: 0; font-size: 2rem; font-family: Charter, Georgia, serif; font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; text-transform: none; }
.spell-page-meta { margin-top: 0.4rem; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.spell-page-id { font-size: 0.7rem; color: var(--faint); margin-top: 0.4rem; }
.spell-page-desc { font-size: 1.02rem; color: var(--ink-2); line-height: 1.6; max-width: 50em; }

/* MASTERFUL prefix renders on its own line above the spell name (the inline
   form was making the heroes-table starting-spells column blow out wide). */
.spell-chip-masterful { padding: 0.2em 0.45em; }
.spell-chip-masterful .spell-chip-name {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.spell-chip-masterful .spell-chip-name em {
  display: block;
  font-size: 0.66em;
  line-height: 1;
}

/* === Combat simulator ===
   Uses --paper / --bg-warm / --rule / --ink / --muted so it tracks both light
   and dark themes from the existing token system. */
.cs-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  margin: 1rem 0 1.25rem;
}
.cs-side {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
}
.cs-side-h {
  margin: 0 0 0.5rem;
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.cs-field { margin: 0.5rem 0 0.6rem; }
.cs-lbl {
  font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.cs-sub { text-transform: none; letter-spacing: 0; color: var(--ink-2); font-size: 0.85rem; }

/* Faction picker — pill row */
.cs-fac-row {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.cs-fac-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.55rem 0.25rem 0.35rem;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit; font-size: 0.78rem;
  color: var(--ink-2);
  line-height: 1;
}
.cs-fac-pill:hover { background: var(--hover); color: var(--ink); }
.cs-fac-pill img { width: 18px; height: 18px; object-fit: contain; }
.cs-fac-pill.selected {
  border-color: var(--rule-bold);
  color: var(--ink); font-weight: 600;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule-bold);
}

/* Hero / unit icon grids */
.cs-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 4px;
}
.cs-icon-btn {
  position: relative;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2px;
  cursor: pointer;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cs-icon-btn:hover { border-color: var(--rule-bold); background: var(--hover); }
.cs-icon-btn.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
  background: var(--paper);
}
.cs-icon-btn img {
  width: 100%; height: 100%; object-fit: contain;
  display: block;
}
.cs-icon-none {
  font-family: var(--serif, Charter, Georgia, serif);
  font-size: 1.2rem; color: var(--muted);
}
.cs-variant-tag {
  position: absolute; top: 1px; right: 2px;
  background: rgba(0,0,0,0.55); color: #fff7e0;
  font-size: 0.62rem; font-weight: 700;
  padding: 0 3px; border-radius: 2px;
  line-height: 1.2;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

/* Stat strip under the unit picker */
.cs-statline {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem;
  font-size: 0.85rem; color: var(--ink-2);
  margin: 0.4rem 0 0.6rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg-warm);
  border-radius: 3px;
}
.cs-statline b {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.04em;
  margin-right: 0.2rem;
}

/* Inline label/input rows */
.cs-inline-row {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem;
  margin: 0.45rem 0;
  align-items: end;
}
.cs-inline-row label {
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.78rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.cs-inline-row label.cs-skill { flex: 1; min-width: 12em; }
.cs-num, .cs-select {
  font-family: inherit; font-size: 0.92rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  text-transform: none; letter-spacing: 0;
}
.cs-num { width: 5em; }
.cs-select { width: 100%; }

/* VS rail */
.cs-vs {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem;
  padding: 0 0.25rem;
  align-self: stretch;
}
.cs-vs-text {
  font-family: var(--serif, Charter, Georgia, serif);
  font-size: 1.4rem; color: var(--muted);
}
.cs-swap {
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink);
  border-radius: 50%;
  width: 2.1rem; height: 2.1rem;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.cs-swap:hover { background: var(--hover); border-color: var(--rule-bold); }
.cs-lucky {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: var(--ink-2);
  white-space: nowrap;
}
.cs-mul {
  background: color-mix(in oklch, var(--gold) 20%, transparent);
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 0 0.3em;
  font-size: 0.78em; color: var(--gold); font-weight: 700;
}

/* Result panel */
.cs-result {
  background: var(--paper);
  padding: 1rem 1.25rem;
  border-radius: 6px;
  border: 1px solid var(--rule);
}
.cs-breakdown {
  border-collapse: collapse;
  width: 100%; max-width: 38rem;
  margin: 0.5rem 0 1rem;
  font-size: 0.92rem;
  color: var(--ink);
}
.cs-breakdown td { padding: 0.2rem 0.5rem; }
.cs-breakdown td:first-child { color: var(--muted); }
.cs-breakdown .cs-total-row td {
  border-top: 1px solid var(--rule);
  padding-top: 0.4rem; font-weight: 600;
}
.cs-final {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 1rem;
}
.cs-final-block {
  background: var(--bg-warm);
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.cs-final-lbl { color: var(--muted); font-size: 0.85rem; }
.cs-final-val {
  font-size: 1.6rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0.15rem 0;
  color: var(--ink);
}
.cs-final-sub { color: var(--muted); font-size: 0.82rem; }
.cs-caveat {
  font-size: 0.85rem; color: var(--muted);
  margin-top: 1rem; max-width: 52em;
}

@media (max-width: 980px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-vs { flex-direction: row; padding: 0.4rem 0; }
  .cs-final { grid-template-columns: 1fr; }
}

/* === Hotkeys page (compact quick-reference) === */
.hk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}
.hk-head h1 { margin: 0; }
.hk-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: var(--muted);
  cursor: pointer;
}
.hk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 0.6rem 0.9rem;
  margin: 0.4rem 0 1rem;
  align-items: start;
}
.hk-section {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.5rem 0.7rem 0.4rem;
  break-inside: avoid;
}
.hk-section-h {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.25rem;
  color: var(--muted);
  font-weight: 600;
}
.hk-table { width: 100%; border-collapse: collapse; }
.hk-table tr { border-bottom: 1px dotted var(--rule); }
.hk-table tr:last-child { border-bottom: none; }
.hk-name {
  padding: 0.18rem 0.4rem 0.18rem 0;
  font-size: 0.82rem;
  color: var(--ink);
  vertical-align: middle;
  line-height: 1.25;
}
.hk-key-cell {
  padding: 0.18rem 0;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 0.82rem;
}
.hk-row-unkeyed .hk-name { color: var(--muted); }
.hk-key-empty { color: var(--faint); font-style: italic; font-size: 0.9rem; }

.hk-key { display: inline-flex; align-items: center; gap: 0.1rem; flex-wrap: wrap; justify-content: flex-end; }
.hk-chord { display: inline-flex; align-items: center; gap: 0.1rem; }
.hk-or { color: var(--muted); font-size: 0.72rem; padding: 0 0.1rem; }
.hk-plus { color: var(--muted); font-size: 0.7rem; padding: 0 0.02rem; }
.hk-kbd {
  display: inline-block;
  padding: 0.02rem 0.32rem;
  min-width: 1.2em;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  line-height: 1.35;
  background: var(--bg-warm);
  border: 1px solid var(--rule-bold);
  border-radius: 3px;
  color: var(--ink);
  box-shadow: 0 1px 0 var(--rule-bold);
}

/* === Hero Builder === */
.hb-section {
  margin: 1rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
}
.hb-section h2 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 0.3rem;
}
.hb-level-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.hb-level-val {
  font-family: Charter, Georgia, serif;
  font-size: 1.3rem; color: var(--accent); font-weight: 700;
  margin: 0 0.1em;
}
.hb-bp-note {
  font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.hb-level-control {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.5rem 0 0.6rem;
}
.hb-slider {
  flex: 1; min-width: 14em;
  accent-color: var(--accent);
}
.hb-level-ticks { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.hb-tick {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.7rem; font-weight: 600;
  padding: 0.15rem 0.45rem;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.hb-tick:hover { border-color: var(--rule-bold); color: var(--ink); }
.hb-tick.active {
  background: var(--accent); color: var(--paper); border-color: var(--accent);
}
.hb-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0.5rem 0 0.4rem;
}
@media (max-width: 600px) { .hb-stats { grid-template-columns: repeat(2, 1fr); } }
.hb-stat {
  text-align: center;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.4rem 0.5rem;
}
.hb-stat-lbl {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 700;
}
.hb-stat-val {
  font-family: Charter, Georgia, serif;
  font-size: 1.5rem; color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hb-stat-base {
  font-size: 0.66rem; color: var(--faint); font-style: italic;
}
.hb-foot {
  font-size: 0.7rem; color: var(--muted); margin: 0.4rem 0 0;
}

.hb-base-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem 0.7rem;
}
.hb-base-block { min-width: 0; }
.hb-base-eyebrow {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 700;
  margin-bottom: 0.3rem;
}
.hb-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.hb-chip {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.15rem 0.45rem;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 0.78rem;
  color: var(--ink-2);
  text-decoration: none;
}
a.hb-chip:hover { border-color: var(--rule-bold); color: var(--ink); }
.hb-chip-spell.masterful {
  border-color: var(--gold);
  background: color-mix(in oklch, var(--gold) 12%, transparent);
}
.hb-chip-spell em {
  font-style: italic;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.7em;
  text-transform: uppercase;
  margin-right: 0.3em;
}
.hb-army-count {
  font-size: 0.7rem; color: var(--ink); font-weight: 700;
}
.hb-spec {
  font-size: 0.82rem; color: var(--ink-2);
  margin: 0.5rem 0 0;
}
.hb-spec b { color: var(--ink); font-weight: 600; }

.hb-note { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.5rem; }
.hb-skill-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.hb-skill-table th {
  text-align: left;
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding: 0.2rem 0.4rem;
}
.hb-skill-table td {
  padding: 0.2rem 0.4rem;
  border-bottom: 1px dotted var(--rule);
  vertical-align: middle;
}
.hb-skill-table tr:last-child td { border-bottom: none; }
.hb-skill-table .hb-num { text-align: right; font-variant-numeric: tabular-nums; }
.hb-skill-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 0.5em;
  vertical-align: middle;
}
.hb-skill-dot.hb-skill-combat  { background: var(--combat); }
.hb-skill-dot.hb-skill-magic   { background: var(--magic); }
.hb-skill-dot.hb-skill-school  { background: var(--school); }
.hb-skill-dot.hb-skill-utility { background: var(--utility); }
.hb-skill-group {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.hb-skill-starting td { background: color-mix(in oklch, var(--accent) 8%, transparent); }
.hb-skill-tag {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.02rem 0.35rem;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700;
  background: var(--accent); color: var(--paper);
  border-radius: 2px;
}

.hb-fac-row {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin: 0.6rem 0 1rem;
}
.hb-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}
.hb-hero-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: border-color 60ms, background 60ms;
}
.hb-hero-card:hover { border-color: var(--accent); background: var(--hover); }
.hb-hero-card.hb-might { border-top: 2px solid var(--accent); }
.hb-hero-card.hb-magic { border-top: 2px solid var(--accent-2); }
.hb-hero-portrait {
  width: 80px; height: 80px;
  object-fit: cover;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.hb-hero-name { font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.hb-hero-spec { font-size: 0.7rem; color: var(--muted); font-style: italic; }

/* === Hero Builder: simulator-specific === */
.hb-actions {
  display: inline-flex; gap: 0.35rem; flex-wrap: wrap;
  margin-left: auto;
}
.hb-btn {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.78rem; font-weight: 600;
  padding: 0.35rem 0.7rem;
  background: var(--bg-warm); border: 1px solid var(--rule);
  border-radius: 3px; cursor: pointer;
  color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.hb-btn:hover:not(:disabled) { border-color: var(--rule-bold); color: var(--ink); }
.hb-btn:disabled { opacity: 0.4; cursor: default; }
.hb-btn-primary {
  background: var(--accent); color: var(--paper); border-color: var(--accent);
}
.hb-btn-primary:hover:not(:disabled) { color: var(--paper); }
.hb-btn-sm { padding: 0.2rem 0.5rem; font-size: 0.7rem; }

.hb-stat.rolled {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  animation: hb-flash 0.4s ease;
}
@keyframes hb-flash {
  0%   { background: color-mix(in oklch, var(--accent) 25%, var(--bg-warm)); }
  100% { background: var(--bg-warm); }
}
.hb-stat-delta {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0.05em 0.4em;
  background: var(--accent); color: var(--paper);
  font-size: 0.68rem;
  border-radius: 3px;
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-weight: 700;
  vertical-align: 0.15em;
}

.hb-prompt {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, var(--paper));
}
.hb-offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.hb-offer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule-bold);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  transition: background 60ms, border-color 60ms;
}
.hb-offer:hover {
  background: var(--hover);
  border-color: var(--accent);
}
.hb-offer-name { font-weight: 600; font-size: 0.95rem; }
.hb-offer-lvl {
  grid-column: 2;
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}
.hb-offer-chance {
  grid-row: 1 / span 2;
  grid-column: 3;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
}

.hb-skill-chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.hb-skill-chip b { color: var(--ink); font-weight: 700; }
.hb-skill-cur {
  margin-left: 0.4em;
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 700;
}
.hb-skill-tag-max { background: var(--muted); }
.hb-skill-maxed td { opacity: 0.55; }

.hb-log-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.82rem;
}
.hb-log-table th {
  text-align: left;
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding: 0.2rem 0.4rem;
}
.hb-log-table td {
  padding: 0.2rem 0.4rem;
  border-bottom: 1px dotted var(--rule);
}
.hb-log-table tr:last-child td { border-bottom: none; }

/* Offer card group accents */
.hb-offer-combat  { border-top: 3px solid var(--combat); }
.hb-offer-magic   { border-top: 3px solid var(--magic); }
.hb-offer-school  { border-top: 3px solid var(--school); }
.hb-offer-utility { border-top: 3px solid var(--utility); }

/* === Hero builder: items / artifacts === */
.hb-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.4rem;
  margin: 0.4rem 0;
}
.hb-slot { position: relative; }
.hb-slot-btn {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.5rem 0.4rem;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-2);
  min-height: 110px;
}
.hb-slot-btn:hover { border-color: var(--rule-bold); background: var(--hover); }
.hb-slot.filled .hb-slot-btn { border-color: var(--accent); }
.hb-slot.open .hb-slot-btn { outline: 2px solid var(--accent); outline-offset: -2px; }
.hb-slot-lbl {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 700;
}
.hb-slot-img {
  width: 44px; height: 44px;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px;
}
.hb-slot-name {
  font-size: 0.78rem; font-weight: 600;
  color: var(--ink); text-align: center;
  line-height: 1.2;
}
.hb-slot-empty {
  font-size: 0.72rem; font-style: italic;
  color: var(--faint);
}
.hb-slot-x {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-size: 0.8rem; line-height: 1; cursor: pointer;
  color: var(--muted);
  padding: 0;
}
.hb-slot-x:hover { color: var(--ink); border-color: var(--rule-bold); }

/* Rarity colours — borders only, keep page tone clean */
.hb-rarity-common    { color: var(--ink-2); }
.hb-rarity-rare      { color: oklch(0.55 0.14 230); }
.hb-rarity-epic      { color: oklch(0.55 0.18 290); }
.hb-rarity-legendary { color: var(--gold); }
.hb-rarity-all       { color: var(--muted); }

/* Picker panel */
.hb-picker {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.7rem;
  background: var(--bg-warm);
  border: 1px solid var(--rule-bold);
  border-radius: 4px;
}
.hb-picker-head {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.hb-picker-title {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink); font-weight: 700;
}
.hb-picker-filter {
  display: inline-flex; gap: 0.2rem;
  margin-left: auto;
}
.hb-picker-rarity {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.18rem 0.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px; cursor: pointer;
}
.hb-picker-rarity.active {
  background: var(--accent); color: var(--paper); border-color: var(--accent);
}
.hb-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.35rem;
  max-height: 28rem;
  overflow-y: auto;
}
.hb-art-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.5rem;
  padding: 0.35rem 0.45rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  align-items: center;
}
.hb-art-card:hover { border-color: var(--rule-bold); background: var(--hover); }
.hb-art-card.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.hb-art-card.hb-rarity-legendary { border-left-color: var(--gold); }
.hb-art-card.hb-rarity-epic      { border-left-color: oklch(0.55 0.18 290); }
.hb-art-card.hb-rarity-rare      { border-left-color: oklch(0.55 0.14 230); }
.hb-art-card.hb-rarity-common    { border-left-color: var(--rule); }
.hb-art-icon {
  grid-row: 1 / span 2;
  width: 36px; height: 36px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 2px;
}
.hb-art-name {
  font-size: 0.82rem; font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
}
.hb-art-bonus {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.25;
}

.hb-item-bonuses { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px dotted var(--rule); }
.hb-bonus-list {
  list-style: none; padding: 0; margin: 0.25rem 0 0;
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.82rem; color: var(--ink-2);
}
.hb-bonus-list li {
  padding: 0.1rem 0;
}
.hb-bonus-sep { color: var(--faint); }

/* === Hero sim: compact offer cards === */
.hb-offer {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.1rem 0.5rem;
  padding: 0.4rem 0.55rem;
  background: var(--paper);
  border: 1px solid var(--rule-bold);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  transition: background 60ms, border-color 60ms;
}
.hb-offer:hover { background: var(--hover); }
.hb-offer.upgrade {
  background: color-mix(in oklch, var(--accent-2) 6%, var(--paper));
}
.hb-offer-icon {
  grid-row: 1 / span 2;
  width: 40px; height: 40px;
  object-fit: contain;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px;
}
.hb-offer-name {
  grid-column: 2;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.2;
}
.hb-offer-state {
  grid-column: 2;
  font-size: 0.7rem;
  color: var(--ink-2);
  line-height: 1.25;
}
.hb-offer-state b {
  font-family: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-right: 0.25em;
  padding: 0.04rem 0.35rem;
  border-radius: 999px;
  color: var(--paper);
}
.hb-offer.new .hb-offer-state b { background: var(--accent); }
.hb-offer.upgrade .hb-offer-state b { background: var(--accent-2); }
.hb-offer-chance {
  grid-row: 1 / span 2;
  grid-column: 3;
  font-size: 0.7rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
/* Sub-skill offer: long descriptive text instead of chance column. */
.hb-offer-desc {
  grid-column: 2 / span 2;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
  font-style: italic;
}
.hb-offer.subskill { grid-template-columns: 40px 1fr; padding: 0.45rem 0.55rem; }

/* 3 columns of offers on wide screens */
.hb-offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.4rem;
  margin: 0.4rem 0;
}

/* Tiny skill icons in chip list, log, and roll table */
.hb-skill-chip-icon, .hb-log-icon, .hb-skill-row-icon {
  width: 20px; height: 20px;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px;
  vertical-align: middle;
  flex-shrink: 0;
}
.hb-skill-chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.18rem 0.55rem 0.18rem 0.25rem;
}
.hb-log-skill {
  display: flex; align-items: center; gap: 0.4em;
}
.hb-skill-cell {
  display: flex; align-items: center; gap: 0.45em;
}

/* === Hero sim: current skills (rows with sub-skill chips) === */
.hb-skill-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.35rem;
}
.hb-skill-row {
  display: flex;
  gap: 0.45rem;
  padding: 0.3rem 0.4rem;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: 3px;
  align-items: flex-start;
}
.hb-skill-row.hb-skill-combat  { border-left-color: var(--combat); }
.hb-skill-row.hb-skill-magic   { border-left-color: var(--magic); }
.hb-skill-row.hb-skill-school  { border-left-color: var(--school); }
.hb-skill-row.hb-skill-utility { border-left-color: var(--utility); }
.hb-skill-row-img {
  width: 32px; height: 32px;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px;
  flex-shrink: 0;
}
.hb-skill-row-body { flex: 1; min-width: 0; }
.hb-skill-row-head {
  display: flex; align-items: baseline; gap: 0.4em;
  flex-wrap: wrap;
}
.hb-skill-row-name { font-weight: 600; font-size: 0.86rem; color: var(--ink); }
.hb-skill-row-lvl {
  font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--accent);
}
.hb-subskill-chips {
  display: flex; flex-wrap: wrap; gap: 0.2rem;
  margin-top: 0.25rem;
}
.hb-subskill-chip {
  display: inline-flex; align-items: center; gap: 0.25em;
  padding: 0.05rem 0.4rem 0.05rem 0.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--ink-2);
}
.hb-subskill-chip-icon {
  width: 18px; height: 18px;
  object-fit: contain;
  background: var(--bg-warm);
  border-radius: 50%;
}
.hb-log-sub {
  margin-left: 0.4em;
  font-size: 0.78em;
  color: var(--muted);
  font-style: italic;
}