/* Two card shapes, both our own CSS: no official frames, textures, icons or artwork.
   .ws  warscroll card  190 x 135 mm (2 per portrait sheet); small = the same card at zoom .7263 (138 x 98, 4 per landscape sheet)
   .ac  ability card     63 x 88 mm  (9 per portrait sheet), used for battle traits, enhancements, lore spells and battle tactics
   Two colours per card: --c1 (header) and --c2 (banner and keyword bar). Ability bands are coloured by the
   ability's own type (see --ab-* below), which is how an Age of Sigmar ability reads at a glance. */

.ws, .ac {
  --c1: #2c3742; --c2: #16202a;
  --display: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  --head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Spectral', Georgia, 'Times New Roman', serif;
  --paper: #f6f2e7; --paper2: #eae4d4; --ink: #1c1a16; --rule: #cec6b2;
  --ab-offensive: #99242a; --ab-defensive: #1d4e89; --ab-movement: #2d6a4f; --ab-shooting: #8c5a10;
  --ab-control: #5b3a86; --ab-rallying: #0f6e6e; --ab-special: #3d4452; --ab-battleDamaged: #6b1f1f;
  position: relative; box-sizing: border-box; flex: none;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.24; text-align: left;
  border: .5mm solid var(--c2);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ws { width: 190mm; height: 135mm; font-size: var(--fs, 3.6mm); }
.ac { width: 63mm; height: 88mm; font-size: var(--fs, 2.5mm); }
.ws.small { zoom: .7263; }
.rounded { border-radius: 2.5mm; }
.ws *, .ac * { box-sizing: border-box; }
.ws b, .ac b { font-weight: 700; }

/* ---------- header band ---------- */
.ws-head { flex: none; position: relative; background: var(--c1); color: #fff; padding: 2.6mm 4mm 2.4mm; }
.ws-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.2mm; background: var(--c2); }
.ws-name { font: 700 6.4mm/1.05 var(--display); letter-spacing: .01em; padding-right: 34mm; }
.ws-name span { display: block; font: 400 3.2mm/1.2 var(--body); font-style: italic; opacity: .85; letter-spacing: 0; margin-top: .6mm; }
.ws-tags { position: absolute; right: 4mm; top: 3mm; display: flex; gap: 1.2mm; }
.ws-tags i {
  font: 700 2.4mm/1 var(--head); font-style: normal; letter-spacing: .12em; text-transform: uppercase;
  padding: 1mm 1.8mm; border: .3mm solid #ffffff66; border-radius: .6mm;
}
.ws-tags i.pts { background: #ffffff1f; }

/* stat discs: Move, Health, Save, Control, then the conditional ones */
.ws-stats { margin-top: 2.2mm; display: flex; align-items: center; gap: 1.8mm; }
.ws-stats .disc { width: 13mm; text-align: center; }
.ws-stats .disc i {
  display: block; font: 700 2.4mm/1 var(--head); font-style: normal; letter-spacing: .08em; margin-bottom: .8mm; text-transform: uppercase;
}
.ws-stats .disc b {
  display: flex; align-items: center; justify-content: center; width: 11mm; height: 11mm; margin: 0 auto;
  border-radius: 50%; background: #fff; color: var(--ink); font: 700 4.4mm/1 var(--head);
  box-shadow: 0 0 0 .5mm var(--c2);
}
.ws-stats .sep { width: .3mm; height: 11mm; background: #ffffff59; margin: 3.2mm .6mm 0; }
.ws-stats .pill {
  align-self: flex-end; display: flex; align-items: baseline; gap: .8mm; padding: 1.1mm 2mm; margin-bottom: .2mm;
  border: .3mm solid #ffffff73; border-radius: 1mm; font-family: var(--head); white-space: nowrap;
}
.ws-stats .pill i { font: 500 2.4mm/1 var(--head); font-style: normal; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.ws-stats .pill b { font: 700 3.2mm/1 var(--head); }

/* ---------- body ---------- */
.ws-body { flex: 1; min-height: 0; display: flex; gap: 2.6mm; padding: 2.2mm 3mm 1.6mm; }
.ws-left { flex: 1 1 54%; min-width: 0; overflow: hidden; font-size: var(--fsl, var(--fs)); }
.ws-right { flex: 1 1 46%; min-width: 0; overflow: hidden; font-size: var(--fsr, var(--fs)); }

.hd {
  background: var(--c1); color: #fff; font: 700 1em/1 var(--head); letter-spacing: .1em; text-transform: uppercase;
  padding: .5em .7em; margin: 0 0 .55em;
}
.hd.sub { background: var(--c2); margin-top: .9em; }

table.wpn { width: 100%; border-collapse: collapse; margin-bottom: 1.1em; }
table.wpn th {
  background: var(--c2); color: #fff; font: 700 .92em/1 var(--head); letter-spacing: .07em; text-transform: uppercase;
  padding: .4em .45em; text-align: center; white-space: nowrap;
}
table.wpn th.n { text-align: left; font-size: 1.02em; letter-spacing: .1em; }
table.wpn td { padding: .34em .45em; text-align: center; border-bottom: .15mm solid var(--rule); white-space: nowrap; }
table.wpn td.n { text-align: left; white-space: normal; font-weight: 600; }
table.wpn tr:nth-child(even) td { background: var(--paper2); }
table.wpn td.empty { text-align: left; color: #6a655a; font-style: italic; }
/* weapon abilities (Crit (Mortal), Companion, Anti-HERO (+1 Rend)…) sit under the weapon name */
table.wpn .wk { display: block; font: 700 .8em/1.15 var(--head); letter-spacing: .04em; text-transform: uppercase; color: var(--c1); }

/* ---------- ability block ---------- */
.ab { border: .25mm solid var(--rule); border-left: 1mm solid var(--ab, var(--c1)); background: #fff; margin-bottom: .55em; }
.ab-top {
  display: flex; align-items: center; gap: .45em; padding: .3em .5em;
  background: var(--ab, var(--c1)); color: #fff; font-family: var(--head);
}
.ab-top .gl { flex: none; width: 1.5em; height: 1.5em; }
.ab-top .gl svg { width: 100%; height: 100%; display: block; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ab-top .when { flex: 1; min-width: 0; font: 700 .88em/1.15 var(--head); letter-spacing: .07em; text-transform: uppercase; }
.ab-top .val { flex: none; font: 700 .95em/1 var(--head); letter-spacing: .05em; padding: .2em .45em; background: #00000038; border-radius: .5mm; white-space: nowrap; }
.ab-name { font: 700 1.08em/1.15 var(--display); padding: .35em .6em .1em; }
.ab-body { padding: 0 .6em .4em; }
.ab-body p { margin: .25em 0 0; }
.ab-body p.d::before, .ab-body p.e::before { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ab-body p.d::before { content: 'Declare: '; }
.ab-body p.e::before { content: 'Effect: '; }
.ab-kw { padding: 0 .6em .45em; }
.ab-kw span {
  display: inline-block; font: 700 .8em/1 var(--head); letter-spacing: .06em; text-transform: uppercase;
  padding: .25em .5em; margin: .25em .25em 0 0; border: .25mm solid var(--ab, var(--c1)); color: var(--ab, var(--c1)); border-radius: .6mm;
}
.kwd { font: 700 .95em/1 var(--head); text-transform: uppercase; letter-spacing: .03em; }

.ws-right ul, .ws-left ul, .ab-body ul { margin: .25em 0 0; padding-left: 1.1em; }
.ws-right li, .ws-left li, .ab-body li { margin: 0 0 .15em; }
.ws-right p, .ws-left p { margin: 0 0 .5em; }
.note { font-style: italic; color: #4a453b; }

/* Dense warscroll: a named hero with eight abilities. The band and the name share one row, and every
   padding comes in, which is worth two or three lines of rules text on the same card. */
.ws.dense .ws-body { padding: 1.6mm 2.4mm 1.2mm; gap: 2mm; }
.ws.dense .ab { margin-bottom: .32em; border-left-width: .7mm; }
.ws.dense .ab-hd { display: flex; align-items: stretch; }
.ws.dense .ab-top { flex: 0 1 auto; min-width: 0; padding: .22em .4em; }
.ws.dense .ab-top .gl { width: 1.2em; height: 1.2em; }
.ws.dense .ab-top .when { font-size: .8em; letter-spacing: .04em; }
.ws.dense .ab-name {
  flex: 1 1 auto; display: flex; align-items: center; min-width: 0;
  background: var(--ab, var(--c1)); color: #fff; padding: .22em .5em; font-size: 1em;
}
.ws.dense .ab-body { padding: .25em .5em .3em; }
.ws.dense .ab-body p { margin: 0 0 .2em; }
.ws.dense .ab-kw { padding: 0 .5em .28em; }
.ws.dense .ab-kw span { margin-top: .15em; padding: .2em .4em; }
.ws.dense table.wpn { margin-bottom: .7em; }
.ws.dense table.wpn th { padding: .3em .35em; }
.ws.dense table.wpn td { padding: .22em .35em; }
.ws.dense .hd { padding: .32em .55em; margin-bottom: .4em; }
.ws.dense .hd.sub { margin-top: .6em; }

/* ---------- keyword bar ---------- */
.ws-foot { flex: none; display: flex; min-height: 6.5mm; font-family: var(--head); text-transform: uppercase; }
.ws-foot > div { padding: 1.2mm 3mm; display: flex; align-items: center; line-height: 1.15; }
.ws-foot .kw { flex: 1; background: var(--paper2); color: var(--ink); border-top: .3mm solid var(--c2); }
.ws-foot .fkw { flex: 0 0 34%; background: var(--c2); color: #fff; }
.ws-foot i { font-style: normal; font-weight: 500; font-size: .85em; letter-spacing: .07em; opacity: .85; }
.ws-foot b { font-weight: 700; font-size: 1.05em; letter-spacing: .03em; }

/* ---------- back of a warscroll ---------- */
.ws.back .ws-sub { font: 700 2.8mm/1 var(--head); letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: 1.6mm; }
.ws.back .ws-left, .ws.back .ws-right { flex: 1 1 50%; }
table.meta { width: 100%; border-collapse: collapse; margin: 0 0 .8em; }
table.meta td { padding: .32em .6em; border-bottom: .15mm solid var(--rule); }
table.meta td:first-child { font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; width: 1%; }
table.meta tr:nth-child(even) td { background: var(--paper2); }

/* ---------- ability card (63 x 88 mm) ---------- */
.ac { border-color: var(--ab, var(--c2)); }
.ac-top { flex: none; background: var(--ab, var(--c1)); color: #fff; padding: 2mm 2.4mm 1.8mm; }
.ac-kind { display: flex; align-items: center; gap: 1.2mm; font: 700 2.2mm/1 var(--head); letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
.ac-kind .gl { flex: none; width: 3.6mm; height: 3.6mm; }
.ac-kind .gl svg { width: 100%; height: 100%; display: block; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ac-name { font: 700 4.4mm/1.1 var(--display); margin-top: 1.4mm; }
.ac-when {
  flex: none; background: var(--c2); color: #fff; padding: 1.4mm 2.4mm;
  font: 700 2.3mm/1.2 var(--head); letter-spacing: .07em; text-transform: uppercase;
  display: flex; align-items: center; gap: 1.5mm;
}
.ac-when .val { margin-left: auto; padding: .4mm 1.2mm; background: #ffffff2e; border-radius: .5mm; white-space: nowrap; }
.ac-body { flex: 1; min-height: 0; overflow: hidden; padding: 2mm 2.4mm; font-size: var(--fsl, var(--fs)); }
.ac-body p { margin: 0 0 .5em; }
.ac-body p.d::before, .ac-body p.e::before { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ac-body p.d::before { content: 'Declare: '; }
.ac-body p.e::before { content: 'Effect: '; }
.ac-foot {
  flex: none; background: var(--paper2); border-top: .3mm solid var(--c2); padding: 1.4mm 2.4mm;
  font: 700 2.2mm/1.2 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  display: flex; gap: 2mm; align-items: baseline;
}
.ac-foot .src { flex: 1; min-width: 0; }
.ac-foot .kw { font-weight: 500; opacity: .8; }