/* ============================================================
steel-statblock.css — Draw Steel statblocks, High-Fantasy Steel.
Loads AFTER steel-redesign.css (—fx-* tokens, .sc-crest) and
steel-ability-cards.css (reused: .sc-ability__pr / __tier / __cost
/ __chip / __section / __enh + the DrawSteelGlyphs tier badges).
Every piece is an INDEPENDENT preference (data-attr on ).
Prebuilt presets in the page just set a bundle of these at once.
data-sb-kwusage crest | text | grid | ledger keyword + usage block
(crest = the only mode with a crest + eyebrow)
data-sb-featstyle card | flat feature frame: own card with
action-colored spine, or flat list + diamond separators
data-sb-disttarget text | grid | ledger distance + target block
data-sb-meta grid | gridc | ledger secondary stats (2×2)
data-sb-charline two | one characteristic lines
data-sb-charbox off | on | onword boxed first letter
data-sb-villain banded | inline villain actions
data-sb-wide off | on multi-column on wide screens
data-sb-stickymeta on | off 2nd sticky line
Augmentation: body[data-aug-links], body[data-aug-sticky].
Shared cell vocabulary used by secondary stats AND feature specs:
grid = framed cell, label top-left, value below (left-aligned)
gridc = framed cell, value over label, centered (feature "grid" uses this)
ledger= hairline row, label left / value right
============================================================ */
/* ── ROLE palette: one saturated color per block, keyed to Role.
Hexes live in palette.css (--sc-role-*) as the single source. ── */
.sb-wrap[data-role="ambusher"] { --role: var(--sc-role-ambusher); }
.sb-wrap[data-role="harrier"] { --role: var(--sc-role-harrier); }
.sb-wrap[data-role="artillery"] { --role: var(--sc-role-artillery); }
.sb-wrap[data-role="brute"] { --role: var(--sc-role-brute); }
.sb-wrap[data-role="controller"] { --role: var(--sc-role-controller); }
.sb-wrap[data-role="leader"] { --role: var(--sc-role-leader); }
.sb-wrap[data-role="solo"] { --role: var(--sc-role-solo); }
.sb-wrap[data-role="hexer"] { --role: var(--sc-role-hexer); }
.sb-wrap[data-role="mount"] { --role: var(--sc-role-mount); }
.sb-wrap[data-role="support"] { --role: var(--sc-role-support); }
.sb-wrap[data-role="defender"] { --role: var(--sc-role-defender); }
.sb-wrap[data-role="minion"] { --role: var(--sc-role-minion); }
/* the role word in the header + sticky needs --role on its own element too */
.sb__sticky-role[data-role="leader"]{--role:var(--sc-role-leader)} .sb__sticky-role[data-role="brute"]{--role:var(--sc-role-brute)}
.sb__role[data-role="leader"]{--role:var(--sc-role-leader)} .sb__role[data-role="brute"]{--role:var(--sc-role-brute)}
/* ── MkDocs site integration ──
The bestiary page injects a "# Name" H1 (+ its `---` rule) for the title /
nav / TOC; once steel-statblock.js mounts .sb-wrap (which carries its own
.sb__name) that page H1 is redundant, so hide it — mirrors the ability-card
rule in steel-ability-cards.css. Pages still show the H1 if JS is disabled. */
.md-typeset:has(> .sb-wrap) > h1:first-child,
.md-typeset:has(> .sb-wrap) > h1:first-child + hr { display: none; }
/* ════════════════════════════════════════════════════════════
PLATE
════════════════════════════════════════════════════════════ */
.sb-wrap {
--pad: 1.2rem;
/* --sticky-top: real px from the viewport top where the sticky mini-header
parks (≈ Material's header + tabs bottom = 2×2.4rem at the 125% base). It
also insets the head's scroll-timeline so the reveal fires at the chrome
line (see the STICKY section). A constant now — the bar height varies with
fonts and the tabs row disappears below 76.25em, so tune on deploy if the
parked bar overlaps the tabs or floats with a gap. */
--sticky-top: 96px;
--sb-plate-solid: #1e2327; /* solid mid-tone of the plate, for diamond halos */
position: relative; max-width: 47rem; margin: 1.7rem auto;
/* contain the sticky's z-index so it can never paint over Material's fixed
header (z-index 4) / tabs (z-index 3) — without this the z-index:5 sticky
resolves in the root stacking context and slides OVER the tab bar. */
isolation: isolate;
}
[data-md-color-scheme="default"] .sb-wrap { --sb-plate-solid: #f4f6f6; }
.md-typeset.sb {
position: relative; margin: 0; padding: 0 0 .35rem;
border: 1px solid rgba(255,255,255,.06); border-radius: .65rem;
background: var(--fx-card-bg);
box-shadow: var(--fx-bevel), 0 10px 26px rgba(0,0,0,.36);
overflow: clip;
color: var(--md-default-fg-color);
}
[data-md-color-scheme="default"] .md-typeset.sb {
border-color: var(--md-default-fg-color--lightest);
box-shadow: var(--fx-bevel), 0 5px 14px rgba(0,0,0,.09);
}
/* ── HEADER: role gradient band + original bottom border w/ centered diamond ── */
.sb__head {
position: relative; padding: 1rem var(--pad) 1.05rem; margin-bottom: .55rem;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--role) 40%, var(--sb-plate-solid)),
color-mix(in srgb, var(--role) 9%, var(--sb-plate-solid)));
border-bottom: 1px solid color-mix(in srgb, var(--role) 38%, transparent);
}
.sb__head::after { /* the centered diamond, sitting ON the border */
content: ""; position: absolute; left: 50%; bottom: 0; width: 9px; height: 9px;
transform: translate(-50%, 50%) rotate(45deg);
background: var(--role);
box-shadow: 0 0 0 4px var(--sb-plate-solid), 0 0 0 5px color-mix(in srgb, var(--role) 40%, var(--sb-plate-solid));
}
.sb__head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sb__kw {
font-family: var(--md-small-header-font); font-variant: small-caps; letter-spacing: .07em;
font-size: .86rem; color: var(--md-default-fg-color--light); margin-bottom: .12rem;
}
.md-typeset .sb__name {
margin: 0; font-family: var(--md-large-header-font); text-transform: uppercase;
font-size: 2.3rem; line-height: .95; color: var(--sc-steel-lighter);
text-shadow: var(--fx-emboss); letter-spacing: .01em; text-wrap: balance;
}
.sb__class { text-align: right; flex: 0 0 auto; }
.sb__level { font-family: var(--md-small-header-font); font-size: .92rem; color: var(--md-default-fg-color--light); }
.sb__role {
font-family: var(--md-large-header-font); text-transform: uppercase; font-size: 1.4rem; line-height: 1.04;
color: var(--role); text-shadow: var(--fx-emboss); filter: brightness(1.15) saturate(1.1);
}
.sb__ev { font-family: var(--md-code-font, monospace); font-size: .82rem; color: var(--md-default-fg-color--light); margin-top: .12rem; }
/* Summoner-book gametime summon cost (no "EV" prefix) — a short phrase like
"7 essence for two minions"; keep it on one line (the card has room to spare). */
.sb__cost { text-transform: none; white-space: nowrap; }
/* ── FLAVOR (descriptive prose under the name, before the stat row) ──
Summoner portfolio summons carry a short description here; mirrors .fb__flavor. */
.sb__flavor {
font-family: var(--md-small-header-font); font-style: italic;
color: var(--md-default-fg-color--light); font-size: .94rem; line-height: 1.55;
padding: .3rem var(--pad) .55rem; margin: 0; text-wrap: pretty;
}
.sb__flavor a { color: var(--md-typeset-a-color); text-decoration: none; }
.sb__flavor a:hover { text-decoration: underline; }
/* ── DEFENSES row (Size/Speed/Stamina/Stability/Free Strike) ── */
.sb__defenses { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; padding: .3rem var(--pad) .65rem; }
.sb__stat { text-align: center; padding: .45rem .25rem; border: 1px solid var(--fx-metal-faint); border-radius: 7px; background: rgba(0,0,0,.22); }
[data-md-color-scheme="default"] .sb__stat { background: rgba(0,0,0,.03); }
.sb__stat .v { display: block; font-family: var(--md-large-header-font); font-size: 1.55rem; line-height: 1; color: var(--sc-steel-lighter); font-variant-numeric: tabular-nums; }
.sb__stat .l { display: block; margin-top: .2rem; font-family: var(--md-small-header-font); font-variant: small-caps; letter-spacing: .04em; font-size: .73rem; color: var(--md-default-fg-color--lighter); line-height: 1.05; }
/* ════════════════════════════════════════════════════════════
SHARED FIELD CELL — used by secondary stats AND feature specs
════════════════════════════════════════════════════════════ */
.sb__field-l { font-family: var(--md-small-header-font); font-variant: small-caps; letter-spacing: .06em; font-size: .74rem; color: var(--fx-metal); }
.sb__field-v { color: var(--md-default-fg-color); font-size: .92rem; line-height: 1.3; text-wrap: pretty; }
.sb__field-v b { color: var(--sc-steel-lighter); }
/* GRID — framed, label top-left, value below */
[data-sb-meta="grid"] .sb__meta .sb__field {
border: 1px solid var(--fx-metal-faint); border-radius: 8px; padding: .42rem .65rem;
background: rgba(0,0,0,.16); display: flex; flex-direction: column; gap: .08rem;
}
/* GRIDC — framed, value over label, centered (feature specs use this for "grid") */
[data-sb-meta="gridc"] .sb__meta .sb__field,
[data-sb-kwusage="grid"] .sb__ku .sb__field,
[data-sb-disttarget="grid"] .sb__dt .sb__field {
border: 1px solid var(--fx-metal-faint); border-radius: 8px; padding: .45rem .6rem; min-height: 3.3rem;
background: rgba(0,0,0,.16); display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; text-align: center; gap: .1rem;
}
[data-sb-meta="grid"] [data-md-color-scheme="default"] .sb__meta .sb__field,
[data-sb-meta="gridc"] [data-md-color-scheme="default"] .sb__meta .sb__field,
[data-sb-kwusage="grid"] [data-md-color-scheme="default"] .sb__ku .sb__field,
[data-sb-disttarget="grid"] [data-md-color-scheme="default"] .sb__dt .sb__field { background: rgba(0,0,0,.022); }
[data-sb-meta="gridc"] .sb__meta .sb__field-v,
[data-sb-kwusage="grid"] .sb__ku .sb__field-v,
[data-sb-disttarget="grid"] .sb__dt .sb__field-v { font-weight: 700; color: var(--sc-steel-lighter); }
/* LEDGER — hairline row, label left / value right */
[data-sb-meta="ledger"] .sb__meta .sb__field,
[data-sb-kwusage="ledger"] .sb__ku .sb__field,
[data-sb-disttarget="ledger"] .sb__dt .sb__field {
display: flex; align-items: baseline; justify-content: space-between; gap: .7rem;
padding: .4rem .1rem; border-bottom: 1px solid var(--fx-metal-faint);
}
[data-sb-meta="ledger"] .sb__meta .sb__field-v,
[data-sb-kwusage="ledger"] .sb__ku .sb__field-v,
[data-sb-disttarget="ledger"] .sb__dt .sb__field-v { text-align: right; }
/* ── SECONDARY STATS container ── */
.sb__meta { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: 0 var(--pad) .7rem; }
[data-sb-meta="ledger"] .sb__meta { gap: 0 1.6rem; }
/* ── CHARACTERISTICS — quick-glance rail ── */
.sb__chars {
display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem;
margin: 0 var(--pad) .35rem; padding: .55rem .4rem;
border: 1px solid var(--fx-metal-line); border-radius: 9px;
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.16));
}
[data-md-color-scheme="default"] .sb__chars { background: linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,.05)); }
.sb__char { display: grid; justify-items: center; align-content: center; gap: .1rem; }
.sb__char-box {
font-family: var(--md-code-font, monospace); font-size: .82rem; font-weight: 700; color: var(--fx-metal-bright);
border: 1px solid var(--fx-metal-line); border-radius: 4px; width: 1.45rem; height: 1.45rem;
display: none; place-items: center; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
}
.sb__char-v { font-family: var(--md-large-header-font); font-size: 1.6rem; line-height: 1; color: var(--sc-steel-lighter); font-variant-numeric: tabular-nums; }
.sb__char-l { font-family: var(--md-small-header-font); font-variant: small-caps; letter-spacing: .04em; font-size: .76rem; color: var(--md-default-fg-color--light); }
/* two-line + box (on/onword): [box][value] over [label] */
[data-sb-charline="two"][data-sb-charbox="on"] .sb__char,
[data-sb-charline="two"][data-sb-charbox="onword"] .sb__char {
grid-template-columns: auto auto; grid-template-areas: "box val" "lbl lbl"; justify-content: center; column-gap: .4rem; row-gap: .12rem;
}
[data-sb-charline="two"][data-sb-charbox="on"] .sb__char-box,
[data-sb-charline="two"][data-sb-charbox="onword"] .sb__char-box { display: grid; grid-area: box; align-self: center; }
[data-sb-charline="two"][data-sb-charbox="on"] .sb__char-v,
[data-sb-charline="two"][data-sb-charbox="onword"] .sb__char-v { grid-area: val; }
[data-sb-charline="two"][data-sb-charbox="on"] .sb__char-l,
[data-sb-charline="two"][data-sb-charbox="onword"] .sb__char-l { grid-area: lbl; }
/* one-line: flex row */
[data-sb-charline="one"] .sb__char { display: flex; align-items: baseline; justify-content: center; gap: .4rem; }
[data-sb-charline="one"] .sb__char-box { order: 1; }
[data-sb-charline="one"] .sb__char-l { order: 2; }
[data-sb-charline="one"] .sb__char-v { order: 3; font-size: 1.25rem; }
/* one + on → box + value (no word) */
[data-sb-charline="one"][data-sb-charbox="on"] .sb__char-box { display: grid; }
[data-sb-charline="one"][data-sb-charbox="on"] .sb__char-l { display: none; }
/* one + onword → box + word + value */
[data-sb-charline="one"][data-sb-charbox="onword"] .sb__char-box { display: grid; }
/* ════════════════════════════════════════════════════════════
FEATURES
════════════════════════════════════════════════════════════ */
.sb__features { padding: .6rem var(--pad) var(--pad); display: flex; flex-direction: column; gap: .65rem; }
/* action accents the ability-card file doesn't define */
.sb__feat[data-action="passive"] { --act: var(--sc-act-none); }
.sb__feat[data-action="villain"] { --act: #e0584b; }
.sb__feat[data-action="malice"] { --act: #9aa2a8; } /* malice = grey */
.sb__feat[data-action="main"] { --act: var(--sc-act-main); }
.sb__feat[data-action="maneuver"] { --act: var(--sc-act-maneuver); }
.sb__feat[data-action="triggered"] { --act: var(--sc-act-triggered); }
/* ── KILL BLOCK — neutralize the steel-ability-cards.css plate chrome ──
Every statblock feature is `article.sc-ability.sb__feat`, so the kills
select .sb__feat directly and sit at EXACT specificity floors. This file
loads after steel-ability-cards.css, so equal specificity wins by order:
.md-typeset .sc-ability (0,2,0) plate
[data-md-color-scheme="default"] .md-typeset .sc-ability (0,3,0) light plate
.md-typeset .sc-ability::before (0,2,1) watermark
.md-typeset .sc-ability:hover (0,3,0) hover lift
The featstyle mode rules below outrank these (attribute anchor) or out-order
them (same file, later) — keep ALL mode rules AFTER this block. */
.sb .sb__feat {
margin: 0; border: none; background: none; box-shadow: none;
overflow: visible; transition: none; padding: 0;
}
[data-md-color-scheme="default"] .sb .sb__feat { background: none; }
/* An element has ONE ::before: flat mode repurposes this same pseudo as the
feature separator (re-declaring display/opacity/mix-blend-mode); this kill
still matters for the FIRST feature (no `+` sibling), which would otherwise
show the ability-card watermark. */
.sb .sb__feat::before { display: none; }
.sb .sb__feat:hover { transform: none; box-shadow: none; }
/* ── FEATURE HEAD ── base = inline icon (non-crest) ── */
.sb__feat-head { display: flex; align-items: baseline; gap: .55rem; }
.sb__feat-crest { display: none; }
.sb__feat-icon { display: inline-flex; align-items: center; align-self: center; }
.sb__feat-glyph { font-family: "DrawSteelGlyphs", sans-serif; line-height: 1; -webkit-font-smoothing: antialiased; }
.sb__feat-icon .sb__feat-glyph { font-size: 1.15rem; color: var(--act); }
.sb__feat-eyebrow { display: none; align-items: center; gap: .5rem;
font-family: var(--md-small-header-font); font-variant: small-caps; text-transform: lowercase; letter-spacing: .1em; font-size: .92rem; color: var(--act); }
.sb__feat-titles { min-width: 0; flex: 1; }
.md-typeset .sb__feat-name { font-size: 1.32rem; margin: 0; }
.sb__feat-corner { margin-left: auto; align-self: baseline; display: flex; flex-direction: column; align-items: flex-end; }
/* ── crest mode (the only one with a crest + eyebrow) ── */
[data-sb-kwusage="crest"] .sb__feat-head { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: start; }
[data-sb-kwusage="crest"] .sb__feat-crest { display: inline-grid; width: 2.7rem; height: 3.05rem; }
[data-sb-kwusage="crest"] .sb__feat-crest .sb__feat-glyph { font-size: 1.1rem; color: var(--act); }
[data-sb-kwusage="crest"] .sb__feat-icon { display: none; }
[data-sb-kwusage="crest"] .sb__feat-eyebrow { display: flex; }
[data-sb-kwusage="crest"] .sb__feat-titles { align-self: end; }
[data-sb-kwusage="crest"] .sb__feat-corner { margin-left: 0; }
[data-sb-kwusage="crest"] .md-typeset .sb__feat-name { font-size: 1.4rem; }
/* ════════════════════════════════════════════════════════════
FEATURE FRAME — data-sb-featstyle: card | flat
(independent of data-sb-kwusage; spec:
.repo-docs/plans/2026-06-12-statblock-feature-style.md)
════════════════════════════════════════════════════════════ */
/* card = each feature in its own container with an action-colored spine
(the original statblock design's sub-card frame). */
[data-sb-featstyle="card"] .sb__feat {
background: rgba(0,0,0,.16); border-left: 3px solid var(--act);
border-radius: 9px; padding: .7rem .85rem .78rem;
}
/* scheme attr lives on , data-sb-* on — html-anchored attr FIRST */
[data-sb-featstyle="card"] [data-md-color-scheme="default"] .sb__feat { background: rgba(0,0,0,.022); }
/* flat = flat features with stylized-hr separators (line + dots + diamond) */
[data-sb-featstyle="flat"] .sb__features { gap: 0; }
[data-sb-featstyle="flat"] .sb__feat { padding: .9rem .2rem; }
/* the separator pseudos sit at the border-box top edge, so the visual gap is
margin-top above the divider and padding-top below it — keep them EQUAL or
the diamond drifts off-center (the kill block zeroes .sb__feat's own
padding, so these two values are the whole gap). */
[data-sb-featstyle="flat"] .sb__feat + .sb__feat { position: relative; margin-top: calc(1.25rem + -16px); padding-top: 1.25rem; }
[data-sb-featstyle="flat"] .sb__feat + .sb__feat::before {
/* this ::before doubles as the ability-card watermark (display:none'd by the
kill block, opacity .045 + overlay blend in steel-ability-cards.css) —
a rule repurposing a contested pseudo re-declares all three. */
display: block; opacity: 1; mix-blend-mode: normal;
content: ""; position: absolute; top: 2px; left: 5%; right: 5%; height: 4px;
/* matches the site's stylized
(steel-redesign.css): center-out steel
line + two seed dots flanking the haloed diamond (the ::after below). */
background:
linear-gradient(to right, transparent, var(--fx-metal-line)) no-repeat left center,
linear-gradient(to left, transparent, var(--fx-metal-line)) no-repeat right center,
radial-gradient(circle, var(--fx-metal) 1.4px, transparent 1.9px) no-repeat calc(50% - 24px) center,
radial-gradient(circle, var(--fx-metal) 1.4px, transparent 1.9px) no-repeat calc(50% + 24px) center;
background-size: calc(50% - 30px) 1px, calc(50% - 30px) 1px, 4px 4px, 4px 4px;
}
[data-sb-featstyle="flat"] .sb__feat + .sb__feat::after {
content: ""; position: absolute; top: 4px; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
background: var(--fx-metal); transform: rotate(45deg);
box-shadow: 0 0 0 4px var(--sb-plate-solid), 0 0 0 5px var(--fx-metal-faint);
}
/* cost badge (reuses .sc-ability__cost from ability-cards.css) */
.sb__feat-corner .sc-ability__cost { white-space: nowrap; }
/* ── KEYWORD + USAGE block ── */
.sb__ku { margin-top: .6rem; }
.sb__dt { margin-top: .55rem; }
/* crest mode: keywords are chips, usage lives in the eyebrow (hide the field) */
[data-sb-kwusage="crest"] .sb__ku { display: flex; flex-wrap: wrap; gap: .4rem; }
/* the chips live inside .sb__field-v (specField wrapper) and the JS joins them
with no whitespace — so the gap that separates them must sit on .sb__field-v,
not .sb__ku (which only holds the single keyword field in crest mode). */
[data-sb-kwusage="crest"] .sb__field--kw .sb__field-v { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
[data-sb-kwusage="crest"] .sb__field--kw .sb__field-l { display: none; }
[data-sb-kwusage="crest"] .sb__field--usage { display: none; }
/* text mode: space-between plain text, labels hidden (values are self-evident) */
[data-sb-kwusage="text"] .sb__ku { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
[data-sb-kwusage="text"] .sb__ku .sb__field-l { display: none; }
[data-sb-kwusage="text"] .sb__field--usage .sb__field-v { font-family: var(--md-small-header-font); font-variant: small-caps; letter-spacing: .04em; color: var(--md-default-fg-color--light); }
/* grid / ledger: two cells */
[data-sb-kwusage="grid"] .sb__ku, [data-sb-kwusage="ledger"] .sb__ku { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
[data-sb-kwusage="ledger"] .sb__ku { gap: 0 1.4rem; }
/* keywords: chips in crest mode, plain comma text otherwise */
[data-sb-kwusage="text"] .sb__field--kw .sc-ability__chip,
[data-sb-kwusage="grid"] .sb__field--kw .sc-ability__chip,
[data-sb-kwusage="ledger"] .sb__field--kw .sc-ability__chip {
border: none; background: none; padding: 0; font-size: .9rem; color: var(--sc-steel-lighter);
}
[data-sb-kwusage="text"] .sb__field--kw .sc-ability__chip:not(:last-child)::after,
[data-sb-kwusage="grid"] .sb__field--kw .sc-ability__chip:not(:last-child)::after,
[data-sb-kwusage="ledger"] .sb__field--kw .sc-ability__chip:not(:last-child)::after { content: ",\00a0"; color: var(--md-default-fg-color--light); }
/* ── DISTANCE + TARGET block ── */
/* text mode: space-between, small inline labels kept (which is which) */
[data-sb-disttarget="text"] .sb__dt { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
[data-sb-disttarget="text"] .sb__dt .sb__field { display: flex; align-items: baseline; gap: .4rem; }
[data-sb-disttarget="text"] .sb__dt .sb__field--tgt { text-align: right; }
[data-sb-disttarget="text"] .sb__dt .sb__field-v { font-weight: 700; color: var(--sc-steel-lighter); }
/* grid / ledger */
[data-sb-disttarget="grid"] .sb__dt, [data-sb-disttarget="ledger"] .sb__dt { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
[data-sb-disttarget="ledger"] .sb__dt { gap: 0 1.4rem; }
/* power roll spacing + body/trailing */
.sb__feat .sc-ability__pr { margin-top: .7rem; }
.sb__feat .sc-ability__section { margin-top: .65rem; }
.sb__feat .sc-ability__enh { margin-top: .85rem; }
.sb__feat-body, .sb__feat-trailing { font-size: .92rem; line-height: 1.5; color: var(--md-default-fg-color--light); text-wrap: pretty; margin: .55rem 0 0; }
.sb__feat-body { margin-top: .45rem; }
.sb__feat-body a, .sb__feat-trailing a, .sb__feat .res a, .sb__feat .sb__field-v a, .sc-ability__section-body a { color: var(--md-typeset-a-color); text-decoration: none; }
.sb__feat-body a:hover, .sb__feat-trailing a:hover, .sb__feat .res a:hover, .sb__feat .sb__field-v a:hover, .sc-ability__section-body a:hover { text-decoration: underline; }
/* ════════════════════════════════════════════════════════════
BANDS — Villain Actions + Malice Features (collapsible)
════════════════════════════════════════════════════════════ */
.sb__band { margin-top: .65rem; border: 1px solid var(--fx-metal-line); border-radius: 10px; overflow: hidden; }
.sb__band--villain { background: color-mix(in srgb, #e0584b 6%, transparent); }
.sb__band--malice { background: color-mix(in srgb, #9aa2a8 8%, transparent); }
.sb__band-head { /* the */
display: flex; align-items: center; gap: .65rem; width: 100%; padding: .6rem .8rem; cursor: pointer;
border: none; text-align: left; font: inherit; color: var(--sc-steel-lighter);
background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
list-style: none; /* drop the native disclosure marker */
}
.sb__band-head::-webkit-details-marker { display: none; }
.sb__band-head::marker { content: ""; }
.sb__band-crest { width: 2.1rem; height: 2.4rem; }
.sb__band--villain .sb__band-glyph { color: #e0584b; }
.sb__band--malice .sb__band-glyph { color: #9aa2a8; }
.sb__band-glyph { font-family: "DrawSteelGlyphs", sans-serif; font-size: 1rem; line-height: 1; -webkit-font-smoothing: antialiased; }
.sb__band-title { flex: 1; font-family: var(--md-large-header-font); text-transform: uppercase; letter-spacing: .02em; font-size: 1.25rem; color: var(--sc-steel-lighter); text-shadow: var(--fx-emboss); }
.sb__band-chev { color: var(--fx-metal); transition: transform .2s ease; font-size: 1rem; }
.sb__band:not([open]) .sb__band-chev { transform: rotate(-90deg); }
.sb__band-body { padding: .25rem .65rem .7rem; display: flex; flex-direction: column; gap: .55rem; }
/* a closed hides .sb__band-body natively — no display rule needed */
.sb__band-intro { font-family: var(--md-small-header-font); font-style: italic; color: var(--md-default-fg-color--light); font-size: .9rem; line-height: 1.5; margin: .4rem .2rem .15rem; text-wrap: pretty; }
.sb__band-source { font-variant: small-caps; font-style: normal; letter-spacing: .05em; color: var(--fx-metal); font-size: .82rem; }
/* flat-mode features inside a band get the same separators.
centering: gap above divider = band-body flex gap (.55rem) + margin-top,
gap below = padding-top — so margin-top is .65rem minus the flex gap. */
[data-sb-featstyle="flat"] .sb__band-body .sb__feat + .sb__feat { position: relative; margin-top: 0rem; padding-top: 1rem; }
[data-sb-featstyle="flat"] .sb__band-body .sb__feat + .sb__feat::before {
/* see the .sb__features separator above — same contested-::before rule:
re-declare display/opacity/mix-blend-mode when repurposing it. */
display: block; opacity: 1; mix-blend-mode: normal;
content: ""; position: absolute; top: -2px; left: 5%; right: 5%; height: 4px;
background:
linear-gradient(to right, transparent, var(--fx-metal-line)) no-repeat left center,
linear-gradient(to left, transparent, var(--fx-metal-line)) no-repeat right center,
radial-gradient(circle, var(--fx-metal) 1.4px, transparent 1.9px) no-repeat calc(50% - 24px) center,
radial-gradient(circle, var(--fx-metal) 1.4px, transparent 1.9px) no-repeat calc(50% + 24px) center;
background-size: calc(50% - 30px) 1px, calc(50% - 30px) 1px, 4px 4px, 4px 4px;
}
[data-sb-featstyle="flat"] .sb__band-body .sb__feat + .sb__feat::after {
content: ""; position: absolute; top: 0; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
background: var(--fx-metal); transform: rotate(45deg); box-shadow: 0 0 0 4px var(--sb-plate-solid), 0 0 0 5px var(--fx-metal-faint);
}
/* villain → INLINE: unwrap the band so cards read as normal features */
[data-sb-villain="inline"] .sb__band--villain { border: none; background: none; margin-top: 0; overflow: visible; }
[data-sb-villain="inline"] .sb__band--villain .sb__band-head { display: none; }
[data-sb-villain="inline"] .sb__band--villain .sb__band-body { display: flex !important; padding: 0; }
[data-sb-featstyle="card"][data-sb-villain="inline"] .sb__band--villain .sb__band-body { gap: .65rem; }
/* ── source cross-reference links inside statblocks (augmentation) ──
These are plain navigation links (href preserved from source markdown,
see steel-statblock.js); they use the same unified teal treatment as
every other link. No tooltip/definition behavior exists, so no help
cursor or dotted "hover-for-definition" underline. */
.sb-term { color: var(--md-typeset-a-color); text-decoration: none; }
.sb-term:hover { text-decoration: underline; }
body[data-aug-links="off"] .sb-term { color: inherit; cursor: text; pointer-events: none; }
/* ════════════════════════════════════════════════════════════
STICKY mini-header (augmentation)
════════════════════════════════════════════════════════════ */
.sb__sticky {
/* The card-size slider zooms .sb-wrap (extra.css: zoom: --sc-card-scale), and
this sticky lives inside it — so `top` is resolved in the zoomed space and
paints at top×scale real px. Divide by the scale so the real offset stays
the measured --sticky-top (see .sb-wrap) and clears Material's fixed
header/tabs at any card size. */
position: sticky; top: calc(var(--sticky-top) / var(--sc-card-scale, 1)); z-index: 5;
margin: 0; padding: 0 var(--pad);
max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
border-bottom: 1px solid transparent;
background: linear-gradient(180deg, color-mix(in srgb, var(--sb-plate-solid) 90%, var(--role)), var(--sb-plate-solid));
backdrop-filter: blur(4px);
transition: max-height .2s ease, opacity .2s ease, padding .2s ease;
}
body[data-aug-sticky="off"] .sb__sticky { display: none; }
/* Scroll-driven reveal — replaces steel-statblock.js (retired). The condensed
header fades in as the full .sb__head tucks up under Material's fixed chrome,
then rides along via position:sticky until the whole card scrolls past (sticky
containment carries it off — no explicit "card gone" rule needed). The head's
view-timeline is inset by the chrome height so "exit" is measured at the chrome
line, not the raw viewport top.
Guarded by @supports: where scroll-driven animations are unsupported (older
Safari/Firefox) the mini-header simply stays hidden and the full header
remains — a safe degradation.
NOTE: --sticky-top is now a CSS constant (no JS measuring Material's live
chrome), so the park offset + reveal point can drift with font size and across
the <76.25em tabs breakpoint; tune --sticky-top / animation-range on deploy.
max-height (12rem) is the reveal cap; it must clear the tallest open state
(row1 + wrapped secondary-stats row2) or overflow:hidden clips row2. */
@supports (animation-timeline: view()) {
.sb-wrap { timeline-scope: --sb-head-tl; }
.sb-wrap .sb__head {
view-timeline: --sb-head-tl block;
view-timeline-inset: calc(var(--sticky-top) / var(--sc-card-scale, 1)) auto;
}
.sb__sticky {
animation: sb-sticky-reveal linear both;
animation-timeline: --sb-head-tl;
animation-range: exit 75% exit 100%;
}
@keyframes sb-sticky-reveal {
to {
max-height: 12rem; opacity: 1; pointer-events: auto;
padding-top: .55rem; padding-bottom: .55rem; border-bottom-color: var(--role);
}
}
}
.sb__sticky-row1 { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.sb__sticky-id { display: flex; align-items: baseline; gap: .55rem; }
.sb__sticky-name { font-family: var(--md-large-header-font); text-transform: uppercase; font-size: 1.28rem; color: var(--sc-steel-lighter); }
.sb__sticky-role { font-family: var(--md-small-header-font); font-variant: small-caps; letter-spacing: .04em; font-size: 1rem; color: var(--role); }
.sb__sticky-stats { display: flex; align-items: stretch; gap: .6rem; margin-left: auto; flex-wrap: wrap; }
.sb__sticky-defs { display: flex; gap: .6rem; flex-wrap: wrap; }
.sb__sticky-chars { display: flex; gap: .6rem; flex-wrap: wrap; margin-left: .8rem; padding-left: 1rem; border-left: 1px solid var(--fx-metal-line); }
.sb__sticky .m, .sb__sticky .c {
display: flex; flex-direction: column; align-items: center; line-height: 1.06;
font-family: var(--md-small-header-font); font-size: .72rem; font-variant: small-caps; color: var(--md-default-fg-color--lighter); letter-spacing: .02em;
}
.sb__sticky .m b { font-style: normal; font-family: var(--md-code-font, monospace); font-size: .98rem; font-weight: 700; color: var(--sc-steel-lighter); }
/* characteristics flipped: value (big/bold) on top, M A R I P label below */
.sb__sticky .c b { font-style: normal; font-family: var(--md-code-font, monospace); font-size: 1rem; font-weight: 700; color: var(--sc-steel-lighter); }
.sb__sticky .c i { font-style: normal; font-family: var(--md-small-header-font); font-variant: small-caps; font-size: .68rem; color: var(--fx-metal-bright); letter-spacing: .03em; }
/* second row: secondary stats */
.sb__sticky-row2 { display: flex; flex-wrap: wrap; gap: .35rem 1.3rem; margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--fx-metal-faint); }
.sb__sticky .sm { font-size: .82rem; color: var(--md-default-fg-color--light); }
.sb__sticky .sm b { font-family: var(--md-small-header-font); font-variant: small-caps; letter-spacing: .04em; color: var(--fx-metal); margin-right: .35rem; font-weight: 400; }
[data-sb-stickymeta="off"] .sb__sticky-row2 { display: none; }
/* ════════════════════════════════════════════════════════════
WIDE — independent toggle: full-width plate, multi-column features
════════════════════════════════════════════════════════════ */
/* Fill the available content column instead of capping at a fixed rem width.
The old `max-width: 86rem` cap combined with `columns: 28rem` (+2rem gap) hard-
locked the feature flow to 2 columns: a 3rd needs 3×28 + 2×2 = 88rem > 86rem.
So no amount of widening the page or shrinking cards could ever reach 3 columns —
the plate just centered at 86rem and leaked whitespace to the sides.
Dropping the cap lets the auto-width plate fill its container. Crucially, do NOT
add an explicit `width` to compensate for the card-size zoom: extra.css applies
`zoom: var(--sc-card-scale)` to the whole .sb-wrap, and modern `zoom` is zoom-
AWARE — an auto/100% width already fills the container at any scale (no side gap),
AND the plate's inner coordinate space already measures container/scale wide, so
the fixed `columns: 28rem` minimum flows MORE columns as Card size shrinks. An
explicit `width: calc(100%/scale)` divides by the scale a second time → the plate
renders container/scale² wide and overflows the viewport (worse the smaller the
scale). Column count is governed by BOTH the Page width slider and Card size. */
[data-sb-wide="on"] .sb-wrap { max-width: none; }
/* Column count derives from a MINIMUM column width, not a viewport media query, so
the browser adds a column only while every column keeps ≥~28rem; narrow contexts
degrade to a single full-width column on their own. */
[data-sb-wide="on"] .sb__features { display: block; columns: 28rem; column-gap: 2rem; }
[data-sb-wide="on"] .sb__feat, [data-sb-wide="on"] .sb__band { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: .8rem; }
[data-sb-wide="on"] .sb__band-body { display: flex; }
[data-sb-wide="on"][data-sb-featstyle="flat"] .sb__feat { margin-bottom: 0; }
/* ════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 34em) {
.sb-wrap { --pad: .85rem; }
.md-typeset .sb__name { font-size: 1.85rem; }
.sb__head-row { flex-wrap: wrap; }
.sb__defenses { grid-template-columns: repeat(3, 1fr); }
.sb__meta { grid-template-columns: 1fr; }
[data-sb-meta="ledger"] .sb__meta { gap: 0; }
.sb__sticky-row1 { gap: .4rem .7rem; }
.sb__sticky-stats { gap: .4rem .7rem; }
.sb__sticky-chars { margin-left: 0; padding-left: 0; border-left: none; }
}
@media (max-width: 23em) { .sb__defenses { grid-template-columns: repeat(2, 1fr); } }
/* ════════════════════════════════════════════════════════════
PRINT
════════════════════════════════════════════════════════════ */
@media print {
.md-typeset.sb { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
.sb__sticky { display: none !important; }
/* bands render open by default; best-effort expand any a reader collapsed */
.sb__band:not([open]) .sb__band-body { display: flex !important; }
.sb__stat, .sb__chars, .sb__field, .sb__feat, .sb__feat .sc-ability__pr, .sb__feat .sc-ability__section { background: none !important; }
}
/* Back-link from a summon statblock to the Rival Summoner that conjures it
(steel-etl augmentRivalSummonerPages). Sits above the .sb-wrap card. */
.sb-backlink {
font-size: 0.85rem;
font-style: italic;
margin: 0 0 0.75rem;
opacity: 0.85;
}
.sb-backlink a {
font-weight: 600;
}
/* ════════════════════════════════════════════════════════════
PREVIEW CARDS — compact .sb-prev mini-statblocks on index /
group-landing pages (steel-etl statblock_preview.go). The zone
styling here is FIXED (decoupled from the global data-sb-* prefs);
.sb-cards[data-sbprev-*] gates which zones show.
════════════════════════════════════════════════════════════ */
.md-typeset .sb-cards {
display: grid; gap: 1rem; margin: 1rem 0; padding: 0;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
align-items: start; list-style: none;
}
/* Companion group landing: the base↔advancement pair grid (.sc-cards--pairs,
steel-redesign.css) doubles as a .sb-prev preview grid, so it also carries
.sb-cards (for the zone-toggle JS + CSS). Keep the 2-up pair template instead
of .sb-cards' auto-fill columns; top-align the tall preview against the short
advancement card. Collapses to one column on phones (matches .sc-cards--pairs). */
.md-typeset .sc-cards--pairs.sb-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
@media (max-width: 44.9375em) {
.md-typeset .sc-cards--pairs.sb-cards { grid-template-columns: 1fr; }
}
.sb-wrap.sb-prev { max-width: none; margin: 0; --pad: .9rem; isolation: isolate; }
.sb-prev .sb { box-shadow: var(--fx-bevel), 0 4px 12px rgba(0,0,0,.28); transition: border-color .15s ease; }
.sb-prev:hover .sb,
.sb-prev:focus-within .sb { border-color: color-mix(in srgb, var(--role) 55%, transparent); }
/* whole-card click target — mirrors .sc-card__link (steel-redesign.css). The
preview emits no inner anchors (links are stripped), so a flat overlay is safe. */
.sb-prev__link { position: absolute; inset: 0; z-index: 2; border-radius: .65rem; }
/* source provenance chip (e.g. "Summoner"), top-right of the card */
.sb-prev__src {
position: absolute; top: .5rem; right: .6rem; z-index: 1;
font-family: var(--md-small-header-font); font-variant: small-caps;
letter-spacing: .06em; font-size: .64rem; color: var(--md-default-fg-color--light);
}
/* header — tighter than the full card; collapses on the x-axis as-is */
.sb-prev .sb__head { padding: .5rem var(--pad) .5rem; margin-bottom: .65rem; }
.sb-prev.sb-wrap .md-typeset .sb__name { font-size: 1.4rem; }
.sb-prev .sb__role { font-size: 1.05rem; }
.sb-prev .sb__level, .sb-prev .sb__ev { font-size: .76rem; }
/* defenses — same 5-up grid, smaller faces */
.sb-prev .sb__defenses { padding: .25rem var(--pad) .5rem; gap: .3rem; }
.sb-prev .sb__stat { padding: .3rem .15rem; }
.sb-prev .sb__stat .v { font-size: 1.1rem; }
.sb-prev .sb__stat .l { font-size: .62rem; }
/* secondary stats — FIXED ledger layout */
.sb-prev .sb__meta { grid-template-columns: 1fr 1fr; gap: 0 1.2rem; padding: 0 var(--pad) .5rem; }
.sb-prev .sb__meta .sb__field {
display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
padding: .26rem .05rem; border-bottom: 1px solid var(--fx-metal-faint);
}
.sb-prev .sb__meta .sb__field-v { text-align: right; font-size: .82rem; }
/* characteristics — FIXED one-line, boxed first letter */
.sb-prev .sb__chars { margin: 0 var(--pad) .4rem; padding: .4rem .3rem; gap: .3rem; }
.sb-prev .sb__char { grid-auto-flow: column; justify-content: center; align-items: baseline; gap: .25rem; }
.sb-prev .sb__char-box { display: grid; width: 1.15rem; height: 1.15rem; font-size: .7rem; }
.sb-prev .sb__char-v { font-size: 1.05rem; }
.sb-prev .sb__char-l { display: none; }
/* feature preview list — icon · name · usage · cost
NOTE: .md-typeset prefix is load-bearing — Material's `.md-typeset ul{padding:0}`
(0,1,1) and `[dir=ltr] .md-typeset ul li{margin-left:1.25em}` (0,2,1) outspecify
bare class selectors, so the padding-top gap below the divider and the row indent
must beat them. */
.md-typeset .sb-prev__feats {
list-style: none; margin: .5rem var(--pad) .7rem; padding: 0.5rem 0 0;
border-top: 1px solid var(--fx-metal-faint);
display: flex; flex-direction: column; gap: 0;
}
[dir=ltr] .md-typeset .sb-prev__feat { margin-left: .5rem; }
.sb-prev__feat[data-action="passive"] { --act: var(--sc-act-none); }
.sb-prev__feat[data-action="villain"] { --act: #e0584b; }
.sb-prev__feat[data-action="main"] { --act: var(--sc-act-main); }
.sb-prev__feat[data-action="maneuver"] { --act: var(--sc-act-maneuver); }
.sb-prev__feat[data-action="triggered"] { --act: var(--sc-act-triggered); }
.sb-prev__feat[data-action="move"] { --act: var(--sc-act-main); }
/* Row: name · usage on the left, cost pinned right; subtle zebra banding keeps
the eye on a row across the gap (no per-row rule, no left-justified column). */
.sb-prev__feat { display: flex; align-items: baseline; gap: .5rem; font-size: .84rem; line-height: 1.25; padding: .2rem .4rem; border-radius: 4px; }
.sb-prev__feat:nth-child(odd) { background: rgba(255, 255, 255, .045); }
[data-md-color-scheme="default"] .sb-prev__feat:nth-child(odd) { background: rgba(0, 0, 0, .04); }
.sb-prev__feat-icon { flex: 0 0 auto; }
.sb-prev__feat-icon .sb__feat-glyph { font-size: .95rem; color: var(--act); }
.sb-prev__feat-name { flex: 0 1 auto; min-width: 0; font-family: var(--md-small-header-font); color: var(--sc-steel-lighter); }
.sb-prev__feat-usage { flex: 0 0 auto; font-size: .7rem; font-variant: small-caps; letter-spacing: .04em; color: var(--md-default-fg-color--light); }
.sb-prev__feat-cost { margin-left: auto; flex: 0 0 auto; font-family: var(--md-code-font, monospace); font-size: .76rem; color: var(--fx-metal-bright); }
/* ── ZONE TOGGLES — grid-level data-sbprev-* (build-time baseline + JS) ── */
.sb-cards[data-sbprev-stats="off"] .sb-prev .sb__defenses,
.sb-cards[data-sbprev-meta="off"] .sb-prev .sb__meta,
.sb-cards[data-sbprev-chars="off"] .sb-prev .sb__chars,
.sb-cards[data-sbprev-feats="off"] .sb-prev .sb-prev__feats { display: none; }
/* All four zones hidden → the header IS the whole card. Drop its stylized bottom
border + centered diamond + the gap they leave, so there's no orphaned empty
body below the header. */
.sb-cards[data-sbprev-stats="off"][data-sbprev-meta="off"][data-sbprev-chars="off"][data-sbprev-feats="off"] .sb-prev .sb__head {
margin-bottom: 0; border-bottom: none;
}
.sb-cards[data-sbprev-stats="off"][data-sbprev-meta="off"][data-sbprev-chars="off"][data-sbprev-feats="off"] .sb-prev .sb__head::after { display: none; }
.sb-cards[data-sbprev-stats="off"][data-sbprev-meta="off"][data-sbprev-chars="off"][data-sbprev-feats="off"] .sb-prev .sb { padding-bottom: 0; }
/* ── per-page toggle bar (statblock-preview.js) ── */
.sb-prev-bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1.3rem 0 .9rem; }
.sb-prev-bar__label {
font-family: var(--md-small-header-font); font-variant: small-caps;
letter-spacing: .06em; font-size: .78rem; color: var(--md-default-fg-color--light); margin-right: .15rem;
}
.sb-prev-bar__chip {
cursor: pointer; user-select: none; font: inherit; font-size: .78rem;
border: 1px solid var(--fx-metal-line); border-radius: 999px; padding: .18rem .7rem;
color: var(--md-default-fg-color--light); background: transparent; transition: background .12s, color .12s, border-color .12s;
}
.sb-prev-bar__chip[aria-pressed="true"] {
color: var(--sc-steel-lighter);
border-color: color-mix(in srgb, var(--md-accent-fg-color) 60%, transparent);
background: color-mix(in srgb, var(--md-accent-fg-color) 12%, transparent);
}
@media (max-width: 30em) {
.md-typeset .sb-cards { grid-template-columns: 1fr; }
}