/* card.css — printable card chrome (.dcc-*) shared by every template. Ported 2026-10-31 from yaab css/cards-mode.css (lines 263-1230); skins were partitioned out rule-by-rule into templates/*.css. Dynamic values arrive as custom properties set via CSSOM (--dcc-card-bg, --dcc-radius, --dcc-*-mul, --dcc-fit, --dcc-accent, ...). */
/* card.css — printable card chrome (.dcc-*). Ported 2026-10-31 from yaab css/cards-mode.css lines 263-960,1214-1230.
 * Page/frame/card base + continuation + backs. Template skins live in templates/*.css.
 * Dynamic values arrive as custom properties set via CSSOM (no <style>, no style attrs):
 *   --dcc-card-bg --dcc-card-blend --dcc-radius --dcc-head-radius --dcc-stat-radius --dcc-head-section-radius
 *   --dcc-safe --dcc-*-mul --dcc-accent --dcc-back-scale/x/y --dcc-stat-cols */
/* ── Page (one printable sheet, always 1:1) */
.dcc-page {
  /* Width/height are set INLINE by JS in mm. CSS only handles cosmetics
   * and grid behaviour. */
  box-sizing: border-box;
  background: #ffffff;
  color: #111;
  display: grid;
  /* grid-template-columns/rows + padding + gap also set inline by JS */
}

/* Pretty drop shadow only in preview */
.cards-preview .dcc-page { box-shadow: 0 6px 24px rgba(0,0,0,0.45); }

/* The preview wraps each .dcc-page in a frame that scales it to fit.
 * Width and height are scaled, transform: scale on the inner page. The
 * frame clips the overflow created by transform-origin. */
.dcc-page-frame {
  --dcc-preview-scale: 0.55;
  width: calc(var(--dcc-page-w, 100mm) * var(--dcc-preview-scale));
  height: calc(var(--dcc-page-h, 100mm) * var(--dcc-preview-scale));
  overflow: hidden;
  position: relative;
  /* The preview pane is a flex column inside an `overflow:auto` parent.
   * Without flex-shrink:0 the column squashes every frame proportionally
   * when total content exceeds the viewport (2 cards => half-height each,
   * 3 => third, etc). Pin the frames at their physical size and let the
   * parent scroll. */
  flex: 0 0 auto;
}
.dcc-page-frame > .dcc-page { transform: scale(var(--dcc-preview-scale)); transform-origin: top left; }

/* Per-preset preview scale — keyed off the page width var on the frame. */

/* ── Card chrome
 * Sized in mm so the on-screen preview matches print 1:1. Visual style
 * cribbed from 10e GW datasheets — but with a grimdark texture pass:
 * - aged-parchment background with subtle dark grain (inline SVG noise)
 * - radial vignette for warmth at the corners
 * - metallic gradient on the title bar with a thin gold accent rule
 * - ornamental triangular flourish below the title
 * - faint embossed border to suggest a metal frame
 * Everything is inline (no external assets) so it survives the print
 * pipeline. SVG noise: feTurbulence in dark sepia, low alpha, locked
 * via stitchTiles so adjacent cards tile cleanly. */
.dcc-card {
  /* Background, border-radius, and typography multipliers (--dcc-*-mul)
   * are owned by the JS-injected <style id="cards-texture-style">. The
   * fallbacks below only apply if cards-mode.js never gets to inject
   * the rule (graceful degradation). Radius default 4mm matches a
   * physical R4 corner-cutter. */
  background: var(--dcc-card-bg, #ecdfb9);
  background-blend-mode: var(--dcc-card-blend, normal);
  border-radius: var(--dcc-radius, 3mm);
  color: #1c1308;
  border: 0.4mm solid #1a140a;
  /* Dual-layer border: outer dark + inner thin gold to read as a
   * gilded frame. The inset ring is a box-shadow so it doesn't take
   * extra layout space. */
  box-shadow: inset 0 0 0 0.2mm #b89052, inset 0 0 0 0.45mm rgba(0,0,0,0.18);
  box-sizing: border-box;
  /* Content padding = base inset + the borderless "safe margin" (--dcc-safe,
   * injected by cards-mode.js, default 0). Pushes text/data inward while the
   * card background still fills to the edge — for borderless overprint. */
  padding: calc(1.6mm + var(--dcc-safe, 0mm)) calc(2mm + var(--dcc-safe, 0mm));
  display: flex;
  flex-direction: column;
  gap: 1.2mm;
  overflow: hidden;
  position: relative;
  font-family: 'Cinzel', 'Times New Roman', serif;
}
.dcc-card-empty { background: transparent !important; border: 0.3mm dashed #c8b890; box-shadow: none; }

/* Card backs (duplex-print) */
.dcc-card-back {
  /* Reuse the gilded frame from .dcc-card; just strip the parchment
   * texture and let the user-uploaded image fill the cell. */
  padding: 0;
  background: #ecdfb9;
  display: block;
  position: relative;
  overflow: hidden;
}

/* ── Continuation cards (overflow spillover)
 * When a unit's text doesn't fit, splitOverflowingUnitCards() emits a
 * second card with class `dcc-card-cont`. The parchment overlay is sized
 * to its content (height: auto via flex flow) and pinned to the top of
 * the card; the rest of the cell shows either the user-set card-back
 * image (if `dcc-card-cont-art` is also set) or the page border colour
 * showing through. The friend's "art continues" idea, basically. */
.dcc-card-cont {
  /* Strip the card padding — the .dcc-cont-overlay handles its own. The
   * gilded frame box-shadow inherited from .dcc-card stays. The
   * !important on background beats the JS-injected
   * `.dcc-card { background: <texture> }` rule that's appended at
   * runtime — the article itself must be transparent so the back image
   * shows through. The parchment lives on .dcc-cont-overlay. */
  padding: 0;
  background: transparent !important;
  background-blend-mode: normal !important;
  position: relative;
  overflow: hidden;
}

/* Tighten card padding for many-up grids */
[data-grid-cols="3"] .dcc-card, [data-grid-rows="3"] .dcc-card { padding: 1.2mm; gap: 0.9mm; }

.dcc-card-cont .dcc-cont-bg {
  /* Same pin/scale rig as the duplex back image, but full-cell behind
   * the overlay (z-index 0) so the parchment overlay (z-index 1) covers
   * just the top portion. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center;
  transform: translate(calc(-50% + var(--dcc-back-x, 0%)), calc(-50% + var(--dcc-back-y, 0%))) scale(var(--dcc-back-scale, 1));
  z-index: 0;
  pointer-events: none;
}
.dcc-card-cont .dcc-cont-overlay {
  /* Parchment overlay — same look as a regular .dcc-card body. The
   * JS-injected dynamic stylesheet targets this selector too so the
   * active texture preset, intensity, and corner radius all apply. */
  position: relative;
  z-index: 1;
  padding: calc(1.6mm + var(--dcc-safe, 0mm)) calc(2mm + var(--dcc-safe, 0mm));
  display: flex;
  flex-direction: column;
  gap: 1.2mm;
  /* height: auto — only as tall as needed. */
  /* Soften the bottom edge so the boundary feels designed, not clipped. */
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  box-shadow: 0 2mm 3mm rgba(0,0,0,0.18);
}

/* When there's no user back image, the continuation card's bottom area
 * just shows the page background. Add a faint horizontal rule at the
 * overlay's bottom edge so the boundary still reads. */
.dcc-card-cont:not(.dcc-card-cont-art) .dcc-cont-overlay { border-bottom: 0.4mm solid #1a140a; }

/* "Continued" header tag — small italicised marker the renderer adds to
 * the cloned header on the continuation card. */
.dcc-head-cont::after { content: ' (cont.)'; font-style: italic; font-weight: 400; opacity: 0.7; font-size: 0.75em; }

/* Gold accent stripe immediately under the header. */
.dcc-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.6mm;
  height: 0.5mm;
  background: linear-gradient(90deg, rgba(184,144,82,0) 0%, #b89052 15%, #e7c87a 50%, #b89052 85%, rgba(184,144,82,0) 100%);
}

/* Tiny triangular flourish hanging below the gold stripe — reads as a
 * stamped seal / banner pendant. */
.dcc-head::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1.5mm;
  width: 2.4mm;
  height: 1mm;
  margin-left: -1.2mm;
  background: linear-gradient(135deg, #b89052 25%, transparent 25%) -0.6mm 0, linear-gradient(225deg, #b89052 25%, transparent 25%) 0.6mm 0;
  background-size: 1.2mm 1mm;
  background-repeat: no-repeat;
  pointer-events: none;
}
.dcc-back-img {
  /* Pinned to the centre of the cell, then translated by (offsetX,
   * offsetY) % and scaled. Container clips overflow so high scales
   * crop cleanly. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center;
  transform: translate(calc(-50% + var(--dcc-back-x, 0%)), calc(-50% + var(--dcc-back-y, 0%))) scale(var(--dcc-back-scale, 1));
  user-select: none;
  pointer-events: none;
}

/* Metallic title bar with a subtle horizontal sheen + gold accent rule. */
.dcc-head {
  background: linear-gradient(180deg, #0b0b0b 0%, #1c1c1c 30%, #292929 50%, #1c1c1c 70%, #0b0b0b 100%);
  color: #f4ead2;
  padding: 1.2mm 1.6mm;
  /* Default falls back to a noticeable rounding so the bar reads as
   * "tab-shaped" if cards-mode.js never gets to inject its dynamic
   * --dcc-head-radius. The Layout sub-tab's "Header corners" slider
   * controls the live value. */
  border-radius: var(--dcc-head-radius, 3mm);
  margin: -0.6mm -0.6mm 0;
  position: relative;
  box-shadow: 0 0.2mm 0 #5a4a22 inset, 0 -0.2mm 0 rgba(255,255,255,0.06) inset;
}
.dcc-name-line { display: flex; align-items: baseline; gap: 1.6mm; }
.dcc-name {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-weight: 700;
  font-size: calc(4.56mm * calc(var(--dcc-name-mul, 1) * var(--dcc-fit, 1)));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
  flex: 1 1 auto;
  line-height: 1.05;
  /* Long datasheet names wrap onto a second line instead of ellipsising:
   * "ASSAULT INTERCESSOR SQUAD" and its Jump Pack variant must stay
   * distinguishable on a printed card. min-width:0 lets the flex item shrink
   * below its content width so the wrap actually happens. */
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
  /* Sits on the dark header bar in every template — same printer hairline
   * dropout as the section labels, and Cinzel caps at a 600 weight so 700 is
   * already faux-bold. Thicken the strokes so the unit/stratagem name prints
   * solid. See `.dcc-section-label`. */
  -webkit-text-stroke: 0.12mm currentColor;
  text-stroke: 0.12mm currentColor;
  paint-order: stroke fill;
}
.dcc-head-strat .dcc-name-line { padding-right: 15mm; }
[data-grid-cols="3"] .dcc-name, [data-grid-rows="3"] .dcc-name { font-size: 3mm; }

/* Custom names aren't length-limited the way datasheet names are, and
 * .dcc-name has no auto-shrink — let a long one wrap rather than clip. */
.dcc-card .dcc-name { overflow-wrap: anywhere; }
.dcc-pts { background: var(--dcc-accent, #698cd3); color: #fff; font-weight: 600; font-size: 2.6mm; padding: 0.4mm 1.4mm; border-radius: 0.6mm; white-space: nowrap; }
.dcc-sub-line {
  display: flex;
  align-items: center;
  gap: 1.6mm;
  font-size: calc(2.86mm * calc(var(--dcc-sub-mul, 1) * var(--dcc-fit, 1)));
  margin-top: 0.6mm;
  color: #d8d8d2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Stratagem subtitle (CORE / FACTION / DETACHMENT STRATAGEM + PHASE: …)
 * is the only header label that has to fight a busy bronze CP pill for
 * attention, so it gets weight 700 unconditionally. Rule + unit
 * subtitles stay at the .dcc-sub-line default weight. */
.dcc-head-strat .dcc-sub-line { font-weight: 700; }
.dcc-role { opacity: 0.85; }
.dcc-strat-phase { margin-left: auto; opacity: 0.85; }

/* Stratagem CP pill.
 * Pinned to the header's top-right corner via absolute positioning. It used
 * to sit inline in .dcc-name-line (margin-left:auto), but that line is
 * baseline-aligned and the pill is a two-row column flex (num over "CP") —
 * its first row floated well above the name's baseline, inflating the line
 * height and shoving the subtitle down. Anchoring it removes the pill from
 * flow entirely so the name + subtitle keep their natural spacing; the
 * name-line gets right padding below so long names ellipsize clear of it. */
.dcc-head-strat .dcc-cp {
  position: absolute;
  top: 1.2mm;
  right: 1.6mm;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #b32020;
  border-radius: 0.6mm;
  padding: 1.04mm 2.07mm;
  line-height: 1;
  color: #fff;
}
.dcc-cp-num { font-size: 6.91mm; font-weight: 700; }
.dcc-cp-lbl { font-size: 2.76mm; opacity: 0.85; letter-spacing: 0.06em; }

/* Stat strip */
/* Wrapper around every stat row so the whole stat block is one addressable
 * section (data-sec="stats") for the manual page-2 spill panel. It's a plain
 * flex column so the enclosed .dcc-stats rows keep their own margins and the
 * card's column gap sits above/below the block, not between the rows. */
.dcc-stats-group { display: flex; flex-direction: column; }
.dcc-stats { display: grid; grid-template-columns: repeat(var(--dcc-stat-cols, 6), 1fr); gap: 0.6mm; margin-top: 0.6mm; }

/* Per-statline label for multi-profile units (Beast Snagga Boy vs Nob,
 * etc.). Sits just above its stat row; only emitted when a card has
 * more than one statline. Scales with the stat-block typography slider
 * via --dcc-stat-mul so it tracks the row it labels. */
.dcc-stat-rowlabel {
  font-size: calc(2.0mm * calc(var(--dcc-stat-mul, 1) * var(--dcc-fit, 1)));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a3f1a;
  margin: 0.9mm 0 0.2mm;
}
.dcc-stat-rowlabel:first-child { margin-top: 0.3mm; }
.dcc-stat-cell {
  background: linear-gradient(180deg, #1a1308 0%, #2a1f0e 100%);
  color: #f4ead2;
  /* Driven by the "Stat blocks" slider in Layout > Corner rounding. */
  border-radius: var(--dcc-stat-radius, 1mm);
  padding: 0.6mm 0.4mm;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: inset 0 0 0 0.1mm #6a4f1f;
}
.dcc-stat-key {
  font-size: calc(2.85mm * calc(var(--dcc-stat-mul, 1) * var(--dcc-fit, 1)));
  font-weight: 600;
  letter-spacing: 0.06em;
  /* Was 0.85 — printed text reads better full-opacity. */
  opacity: 0.95;
}
.dcc-stat-val { font-size: calc(5.4mm * calc(var(--dcc-stat-mul, 1) * var(--dcc-fit, 1))); }

/* Combined SV/invuln cell — the value reads "2+ / 4++", which is wider
 * than a standalone "2+", so we shrink the value font and tighten letter
 * spacing to keep it inside the cell. */
.dcc-stat-val-combo { font-size: calc(3.6mm * calc(var(--dcc-stat-mul, 1) * var(--dcc-fit, 1))) !important; letter-spacing: -0.02em; white-space: nowrap; font-weight: 700; margin-top: 0.4mm; }
[data-grid-cols="3"] .dcc-stat-val, [data-grid-rows="3"] .dcc-stat-val { font-size: 3.0mm; }

/* Section blocks (weapons, abilities, wargear, footers) */
.dcc-section { display: flex; flex-direction: column; }
.dcc-section-head {
  /* Bronze-bar look: dark base with a thin gold edge top + bottom. */
  background: linear-gradient(180deg, #2a1f0e 0%, #1a1308 100%);
  color: #f0e4c4;
  /* RANGED WEAPONS / MELEE WEAPONS / ABILITIES / WARGEAR / etc.
   * scale with their own "Section heads" typography slider —
   * separate from "Fine print" so users can pump the labels without
   * also bumping the footer-keywords line. */
  font-size: calc(2.47mm * calc(var(--dcc-heading-mul, 1) * var(--dcc-fit, 1)));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6mm 1.4mm;
  border-radius: var(--dcc-head-section-radius, 0.4mm) var(--dcc-head-section-radius, 0.4mm) 0 0;
  display: flex;
  align-items: center;
  gap: 1.2mm;
  box-shadow: inset 0 0.15mm 0 #6a4f1f, inset 0 -0.15mm 0 #6a4f1f;
}
.dcc-section-cols {
  margin-left: auto;
  /* Cancel the section-head's 1.4mm right padding so the column block's
   * right edge meets the weapons table's right edge below it; without this
   * every letter sits ~1.4mm left of the values it labels. */
  margin-right: -1.4mm;
  display: grid;
  /* Must match .dcc-w-table's fixed columns exactly so each header letter
   * sits centred over its column of values. Attacks (`D6+*`), Range (`24"`)
   * and Damage (`D6+2`) hold the widest values and get the most room; BS/WS
   * (`2+`, `—`), S and AP are never more than 2 glyphs. Total = 36mm = the
   * table's stat region. Order: Range A BS/WS S AP D. */
  grid-template-columns: 7mm 7.5mm 5mm 4.5mm 4.5mm 7.5mm;
  gap: 0;
  width: 36mm;
  text-align: center;
  /* Same base size as `.dcc-section-head` (2.47mm) and same multiplier
   * (--dcc-heading-mul) so the title and column-abbreviation halves
   * of the bar render identically and stay baseline-aligned at any
   * scale. The earlier 1.75mm base + --dcc-fine-mul split made one
   * side jitter behind the other when the user moved either slider. */
  font-size: calc(2.47mm * calc(var(--dcc-heading-mul, 1) * var(--dcc-fit, 1)));
  opacity: 0.95;
}
.dcc-section-label {
  flex: 0 0 auto;
  /* The section labels (RANGED WEAPONS / MELEE WEAPONS / …) print light-on-dark
   * in every template — a bronze bar in the default look, a solid ink block in
   * the stencil look. Cinzel only ships up to a 600 weight, so font-weight:700
   * is already as heavy as the face goes; printers still drop the skinniest
   * serif strokes against the dark background. A small same-colour text-stroke
   * thickens every stroke uniformly so the thin parts survive the print, and
   * `paint-order: stroke fill` keeps the fill on top so letter counters stay
   * open rather than filling in. */
  -webkit-text-stroke: 0.12mm currentColor;
  text-stroke: 0.12mm currentColor;
  paint-order: stroke fill;
}

/* Primarch section — gold-rich gradient + thicker rims so the
 * choose-from-N abilities read as a distinct "pick two" block at a
 * glance, separate from the always-on ABILITIES list above. */
.dcc-section-head-primarch {
  background: linear-gradient(180deg, #b89052 0%, #8a6a2a 50%, #5a3f1a 100%) !important;
  color: #fff8e0 !important;
  letter-spacing: 0.12em !important;
  box-shadow: inset 0 0.25mm 0 #f0d68a, inset 0 -0.25mm 0 #3a2710 !important;
  text-shadow: 0 0.1mm 0.15mm rgba(0,0,0,0.6);
}

/* Weapons table */
.dcc-w-table {
  width: 100%;
  border-collapse: collapse;
  /* Fixed layout so the stat columns are exactly the widths declared on
   * .dcc-num* below (not content-driven) — that's what lets the header
   * letters in .dcc-section-cols line up over their values. The name
   * column takes the remaining width. */
  table-layout: fixed;
  font-size: calc(2.86mm * calc(var(--dcc-w-mul, 1) * var(--dcc-fit, 1)));
}
.dcc-w-table tr { border-bottom: 0.15mm solid rgba(60, 40, 16, 0.32); }
.dcc-w-table tr:last-child { border-bottom: none; }

/* A weapon's stat row and its full-width keyword row are one entry: drop the
 * divider between them so the rule only falls below the keywords. */
.dcc-w-table tr.dcc-w-row.has-kw { border-bottom: none; }

/* Full-width keyword row — spans name + all stat columns, indented to line up
 * under the weapon name, with no top padding so it tucks under the stat row. */
/* Weapon names align with the ability text (section-content left edge), not
 * indented under the section-head label — matches the abilities block. The
 * keyword sub-row stays lined up under the weapon name. */
.dcc-w-kwcell { padding-top: 0 !important; padding-left: 0 !important; }
.dcc-w-name { font-weight: 600; padding-left: 0 !important; }
.dcc-w-kw { font-style: italic; font-size: calc(2.405mm * calc(var(--dcc-w-mul, 1) * var(--dcc-fit, 1))); color: #5a3f1a; margin-top: 0.2mm; font-weight: 400; }
.dcc-num {
  text-align: center;
  /* Base width is for the always-narrow S / AP columns; wider stats get an
   * explicit width via the modifier classes below. */
  width: 4.5mm;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* The wide-value columns. Widths here sum with the two 4.5mm S/AP columns to
 * the 36mm region that .dcc-section-cols mirrors (7 + 7.5 + 5 + 4.5 + 4.5 +
 * 7.5 = 36). Attacks (`D6+*`, `2D6`) is the addition that fixes values
 * bleeding into the BS column. */
.dcc-num-range { width: 7mm; }
.dcc-num-att { width: 7.5mm; }
.dcc-num-bs { width: 5mm; }
.dcc-num-dmg { width: 7.5mm; }
.dcc-abilities-primarch {
  /* A faint gold rule along the top edge of the body to extend the
   * header's accent into the content. */
  position: relative;
}
.dcc-abilities-primarch .dcc-abilities-body { border-top: 0.2mm solid rgba(184, 144, 82, 0.6); }

/* ── Template skins
 * A "template" is a full visual skin for the printable datacards, applied
 * as a `.dcc-tpl-<id>` class on every `.dcc-card` cell (fronts, backs,
 * continuations, empty padders, and the off-screen measure stage) by
 * cards-mode.js.
 * The DEFAULT look — gilded parchment, GW 10e style — is the un-suffixed
 * chrome above. It is exposed in the UI as the `classic` template
 * ("Gilded Parchment") and needs NO overrides here: `.dcc-tpl-classic`
 * simply inherits the base `.dcc-*` rules unchanged.
 * To add a template:
 *   1. add an entry to the TEMPLATES array in js/ui/cards-mode.js
 *      (id + label + a preview `swatch` gradient), and
 *   2. add a `.dcc-card.dcc-tpl-<id>` skin block below.
 * Nothing else changes — the renderer already tags every card cell with
 * the active template class and the measure stage matches it.
 * Specificity note: the texture system injects `.dcc-card { background }`
 * (0,1,0) and `.dcc-card-cont .dcc-cont-overlay { background }` (0,2,0)
 * at runtime via <style id="cards-texture-style">. A template that
 * recolours the card SURFACE must out-specify those, hence the
 * `.dcc-card.dcc-tpl-<id>` (0,2,0) and
 * `.dcc-card.dcc-tpl-<id> .dcc-cont-overlay` (0,3,0) selectors. Plain
 * ink/border overrides (e.g. `.dcc-tpl-<id> .dcc-rule-text`) already beat
 * the static base rules on specificity, so source order doesn't matter. */
/* ── Wargear-picker ×N chips on weapon rows
 * Shown when the army entry took N of an item via the wargear picker
 * (display toggle: "Wargear counts"). Sized in em so it scales with
 * every card template's own type size. */
.dcc-wg-count { font-size: 0.82em; font-weight: 700; margin-left: 0.35em; opacity: 0.85; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ×0 (all swapped away) reads dimmer than carried counts. */
.dcc-wg-count.dcc-wg-zero { opacity: 0.45; }

 * is untouched. */
.dcc-datasheet-name { font-weight: 600; letter-spacing: 0.08em; }


/* ── cards.thewheeliebois.com additions ─────────────────────────────────── */
/* Texture/radius arrive as custom properties (set by CSSOM on .dcc-page and the measuring host). */
.dcc-card-cont .dcc-cont-overlay { background: var(--dcc-card-bg, #ecdfb9); background-blend-mode: var(--dcc-card-blend, normal); }
/* "Bolden small text" — was a runtime <style>; now a class on the page root. */
.dcc-bold .dcc-w-kw, .dcc-bold .dcc-keywords, .dcc-bold .dcc-section-cols, .dcc-bold .dcc-w-table td.dcc-num { font-weight: 600 !important; }
/* Former inline styles. */
.dcc-dim { opacity: 0.7; }
.dcc-indent { margin-left: 1.6mm; }
.dcc-invuln-note { font-size: .62em; opacity: .75; }
.dcc-card-spillable { cursor: pointer; }
.dcc-note { font-style: italic; }
.dcc-sec-edited { }
/* Optional QR block on a card back */
.dcc-card-back .dcc-qr { position: absolute; right: 3mm; bottom: 3mm; width: 22mm; height: 22mm; padding: 1mm; background: #fff; border-radius: 1mm; z-index: 2; }
.dcc-card-back .dcc-qr svg { display: block; width: 100%; height: 100%; }
.dcc-card-back .dcc-qr-label { position: absolute; right: 3mm; bottom: 25.5mm; z-index: 2; background: #fff; color: #111; font: 600 2.2mm/1 sans-serif; padding: 0.5mm 1mm; border-radius: 0.6mm; }
/* Page frame: preview scaling is driven by --dcc-preview-scale (set per frame by JS). */
.dcc-page-frame { --dcc-preview-scale: 1; }
/* Off-screen measuring host (fit.js). Real mm sizes, never visible. */
.dcc-measure-stage { position: fixed; top: -99999px; left: 0; width: auto; height: auto; visibility: hidden; z-index: -9999; pointer-events: none; }
.dcc-measure-card { width: 100%; height: 100%; box-sizing: border-box; }

/* Abilities */
.dcc-abilities-body { padding: 0.8mm 1.4mm; font-size: calc(2.52mm * calc(var(--dcc-body-mul, 1) * var(--dcc-fit, 1))); line-height: 1.3; color: #1a1a1a; }
.dcc-ability-row {
  margin-bottom: 1.0mm;
  /* Preserves \n line breaks inserted by formatStructuredText() so
   * primarch / hero abilities with multi-option text read as a list,
   * not a wall. */
  white-space: pre-line;
}
.dcc-ability-row:last-child { margin-bottom: 0; }
.dcc-ability-row strong { color: #000; }
.dcc-core-row { color: #3a3a3a; font-size: calc(2.4mm * calc(var(--dcc-body-mul, 1) * var(--dcc-fit, 1))); white-space: normal; }

/* Wargear options */
.dcc-wargear-body { padding: 0.8mm 1.4mm; font-size: calc(2.46mm * calc(var(--dcc-body-mul, 1) * var(--dcc-fit, 1))); line-height: 1.3; color: #1a1a1a; }
.dcc-wargear-line { margin-bottom: 0.4mm; }
.dcc-wargear-line:last-child { margin-bottom: 0; }
.dcc-wargear-default { font-weight: 600; }
.dcc-wargear-line strong { color: #000; }
.dcc-wargear-sub { margin: 0.2mm 0 0.3mm 2.4mm; list-style: none; padding: 0; }
.dcc-wargear-sub li { position: relative; padding-left: 1.6mm; font-size: calc(2.34mm * calc(var(--dcc-body-mul, 1) * var(--dcc-fit, 1))); }
.dcc-wargear-sub li::before { content: '◦'; position: absolute; left: 0; color: #555; }

/* Rule + stratagem body text */
.dcc-rule-body, .dcc-strat-body { padding: 1mm 1.4mm; flex: 1 1 auto; }
.dcc-rule-text { font-size: calc(2.88mm * calc(var(--dcc-body-mul, 1) * var(--dcc-fit, 1))); line-height: 1.32; color: #1a1a1a; white-space: pre-wrap; }

/* Footer keywords */
.dcc-foot { margin-top: auto; padding-top: 0.8mm; border-top: 0.25mm solid rgba(60, 40, 16, 0.45); position: relative; }
.dcc-foot::before {
  /* Thin gold line above the dark divider — echoes the title bar. */
  content: '';
  position: absolute;
  top: -0.15mm;
  left: 0;
  right: 0;
  height: 0.15mm;
  background: linear-gradient(90deg, rgba(184,144,82,0) 0%, #b89052 30%, #b89052 70%, rgba(184,144,82,0) 100%);
}
.dcc-keywords { font-size: calc(2.34mm * calc(var(--dcc-fine-mul, 1) * var(--dcc-fit, 1))); letter-spacing: 0.02em; color: #2a1f0e; line-height: 1.25; }
.dcc-keywords strong { color: #0a0703; letter-spacing: 0.06em; }
.dcc-faction-kw { margin-bottom: 0.4mm; }

/* Type-shrink floor used by layout/fit.js (read with getComputedStyle). A template may override it. */
.dcc-card { --fit-min: 0.85; }
/* Cells are fixed by the layout, never by content. */
.dcc-page { grid-auto-rows: minmax(0, 1fr); }
.dcc-page > .dcc-card { min-height: 0; min-width: 0; height: 100%; }
/* Back art fills the cell (cover) whatever the image's intrinsic size; scale/offset then transform it. */
.dcc-back-img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
/* Weapon header: the R A BS S AP D letters never leave the card; on narrow cards the label yields instead. */
.dcc-section-head { min-width: 0; }
.dcc-section-label { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.dcc-section-cols { flex: 0 0 auto; }