gp-dimm-city 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -7,6 +7,141 @@ cut a version that has no `## [X.Y.Z]` heading below.
 
 ## [Unreleased]
 
+## [1.4.0] - 2026-10-11
+
+One way to set content in columns: Gutterpress core's `@columns N` …
+`@column-break` … `@end-columns`. Everything else this package did with
+columns is removed or now takes that marker. **This release needs
+Gutterpress 0.11.17-alpha.6 or later**: that core draws the column hairline
+(`--gp-column-rule`), reads a bare `@columns` as two, lets `@section`s sit
+inside an `@columns` run, and no longer splits a keep-together section that
+follows other content. Two rules here that only undid that last core
+behaviour (on a single-creature `@npc-stat` and on a section after a
+`.dc-intro` lede) are removed with it.
+
+### Changed
+
+- **`@columns` works inside a `@skill` card.** A `@columns 2` … `@end-columns`
+  run (and any `@column-break` in it) used to end the card at the marker, so
+  the columns and everything after them landed outside the card. They now stay
+  in the card's body, in place.
+- **`@card-grid`, `@npc-stat`, `@citizen-walkthrough` and the credits
+  colophon take `@columns 2` inside them.** `@card-grid` no longer sets its own
+  columns: write `@columns 2` around its cards (the grid keeps its chrome reset
+  and card density). An `@npc-stat` keeps creatures whole and breaks between
+  entries whether they sit directly in the block or in an `@columns` run in it
+  (a one-creature block follows a section at a page foot without splitting, and
+  the bar is never left alone above an empty first row);
+  a walkthrough keeps the two-line heading height in its column runs. The
+  credits snippet writes the colophon names in `@columns 2` instead of a
+  `dc-colophon-grid` div.
+- **The column gap and hairline are two tokens, set once.** `--gp-column-gap`
+  (the gutter) and `--gp-column-rule` (a 1pt hairline) are set at `:root`
+  instead of by rules on `.gp-columns-2` / `.gp-columns-3`. Three columns now
+  use the same gap as two (0.15in, was 0.18in). The hairline needs the next
+  Gutterpress; until then no column rule is drawn. `.dc-card-grid` and the
+  credits colophon set `--gp-column-rule: none`, as they never drew one.
+- The rules that let a section or a callout fragment inside a column run now
+  match any run (`@columns N`, or a count class on a panel), not only the
+  two- and three-column count classes; the guard on a page that was itself a
+  column run (`@page .gp-columns-2`) is gone with that form.
+
+### Removed
+
+- **`.dc-two-col` (`@skill {.dc-two-col}`) is gone.** A card that wants columns
+  wraps just that part of its body in `@columns 2`; the flavor line and sub-headers
+  stay full width. Books that wrote the class should replace it.
+- **`.dc-cards-two-col` is gone.** Written on a wrapper (typically
+  `@specialty .augmerc .dc-cards-two-col`), it set every skill card inside
+  two-column, which broke the layout of cards that should not be columned:
+  short blocks split into one-line fragments, a lone line in the right
+  column, list blocks divided unevenly. A wrapper no longer decides its
+  cards' columns. A card that needs two columns says so itself with
+  `@columns 2` inside it, and a section of running text uses core's
+  `@columns 2`. Books that wrote the class should delete it from their
+  `@specialty` lines; until they do it does nothing.
+- **`.column-break`** (`---{.column-break}`, an `<hr>`): write core's
+  `@column-break`.
+- **`.dc-colophon-grid`**, **`.dc-at-a-glance-cards`** (a three-across grid;
+  keep the `.dc-at-a-glance-card` cards and set them in `@columns 3`), and the
+  `column-fill: balance` rule on `.gp-columns-2` / `.gp-columns-3` (it restated
+  the CSS default).
+- The `.gp-grid-2` / `.gp-grid-3` support added in 1.3.0: the float-containment
+  default is a plain `:where(.section) { display: flow-root }` again, and the
+  grid-row spans for a panel's header bar are gone. A long run of gear entries
+  packs two-up in `@columns 2` inside a `@section .dc-allow-split`.
+- **`@column-panel` / `.dc-column-panel` are gone.** Columns have one spelling,
+  core's `@columns N`. Write a plain `@section` with the body in `@columns 2`;
+  the heading and intro paragraph stay above the run, full width. Before:
+  `@column-panel .gp-columns-2` … `@end-column-panel`; after: `@section` / `##
+  Heading` / `@columns 2` … `@end-columns` / `@end-section`. The migrated
+  panel looks like a normal `@section` card.
+
+## [1.3.0] - 2026-10-11
+
+### Changed
+
+- **The die chip now covers every wording of the instruction and no longer
+  disturbs the line it sits in.** Besides `ROLL THE DIE!`, the chip wraps
+  `ROLL A DIE!`, `ROLLS A DIE!` and `ROLLING THE DIE!` (uppercase, as written;
+  the text is never altered). It is redrawn as a stamped label (cream fill,
+  blood-red lettering, magenta rule and offset shadow) set as a plain inline
+  box, so a line holding a chip keeps the line height of the lines around it
+  and a chip never splits across two lines. Headings are left as plain heading
+  text. `--dc-roll-the-die-color` and `--dc-roll-the-die-border` work as before. (#18)
+- **A run of cards or gear entries can pack two-up** (#15). Core's `.gp-grid-2` and
+  `.gp-grid-3` did nothing on a `@section` or `@column-panel`: the plugin's
+  float-containment default (`display: flow-root`) sat in a later cascade layer
+  and beat core's `display: grid` at any specificity, so every card took a full
+  row. The default now steps aside for the two grid classes, and the header bar
+  and preamble paragraph of a grid panel span the first row.
+  `@column-panel .gp-grid-2 .dc-allow-split` is the gear and item layout; the
+  design guide's Gear section shows it.
+
+### Fixed
+
+- A heading word wider than its box now breaks instead of running under the
+  next column or being clipped at the edge. This applies to `h1`-`h6` and the
+  `.dc-h3`-`.dc-h6` looks in every context (a two-column run is about 3.4in
+  per column), not only inside cards. Headings whose words fit are unchanged,
+  and an author's soft hyphen (`&shy;`) still picks the break. (#13)
+- In a loose bulleted list (blank lines between items) the `»` bullet no longer
+  prints alone on a line above the item's text. A loose item's text is wrapped
+  in a paragraph, so the bullet is now drawn on that first paragraph and sits
+  inline with the first line, in alerts and callouts too. Tight lists and
+  every other list render exactly as before. (#17)
+- **`@npc-stat` blocks with `####` entries no longer split a creature across
+  pages or columns** (#16). The block may now break between entries (so
+  `@npc-stat .gp-columns-2` no longer jumps whole to the next page and leaves
+  a large empty area), the title bar stays with the first entry, and each
+  entry's name, stat lines and traits are kept together. Add `.dc-allow-split`
+  for an unusually long entry. A block with no `####` is unchanged.
+- The chapter opener's `# Title` is never split across two sheets: it keeps
+  together and stays with the block after it, so a long opener moves the
+  whole title to the next page instead of leaving one line of it at the
+  foot of the page before. (#12)
+- A callout label (`@callout gear label="SPECS"`, `[!NOTE]`, any variant) no
+  longer sits alone at the foot of a column or page with its body in the next
+  one: `.dc-alert-label` now carries `break-after: avoid`, which matters in the
+  multicol runs where a callout is allowed to split. A `@column-panel` header
+  bar can still be left at a page foot when its first block is not a
+  paragraph; that is a Chromium limit (it ignores `break-after: avoid` on a
+  `column-span: all` box), documented in `section.css`. (#14)
+- **A split column panel that ends in an `@card` or `@outcome` shrinks to its
+  content** (#15). Both drew a decoration with an absolutely positioned box,
+  which stopped Chromium balancing the panel's last fragment: it ran the full
+  page height, so the next panel could not start beneath it. The `@card` body's
+  decorative tick is now the skill card's alone (it was never part of the
+  `@card` primitive's tokens), and the outcome ladder's inner hairline is an
+  inset shadow.
+- **A column panel that ends flush with the page foot no longer spills its
+  bottom edge onto an extra page** (#15). The panel's bottom padding and rule
+  are painted as shadows below a box that ends with its content, so there is
+  no trailing box edge to push to the next sheet. Same picture, same spacing;
+  a neighbour with a larger top margin than the panel's bottom margin can now
+  sit up to 10px closer, because the padding that used to sit inside the panel
+  no longer adds to that gap.
+
 ## [1.2.0] - 2026-10-10
 
 Requires Gutterpress 0.11.16 or newer (the desktop app or CLI): older

package/components.yaml

@@ -65,7 +65,7 @@ components:
       - --dc-alert-label-spacing
       - --dc-alert-label-margin
       - --dc-alert-margin-top
-    breaks: "break-inside: avoid, relaxed to auto inside .gp-columns-2/-3 (dc-native.css)"
+    breaks: "break-inside: avoid, relaxed to auto inside a column run (@columns; dc-native.css)"
     notes: "`warning` is an unprefixed modifier on .dc-note. The blockquote form is single-block; use @callout for multi-paragraph bodies."
 
   - name: callout
@@ -202,7 +202,7 @@ components:
     css: styles/components/section.css
     unstyled: [dc-gear]
     breaks: "break-inside: avoid (via .dc-card)"
-    notes: "Renders as a plain .dc-card: nothing has ever styled .dc-gear (the only rules are inside the GEAR ENTRY tombstone comment in data.css). Reviving the treatment is a design decision — see that comment. Design guide only."
+    notes: "Renders as a plain .dc-card: nothing has ever styled .dc-gear (the only rules are inside the GEAR ENTRY tombstone comment in data.css). Reviving the treatment is a design decision — see that comment. Design guide only. A long run packs two-up in `@columns 2` inside a `@section .dc-allow-split`."
 
   - name: lede
     status: live
@@ -353,7 +353,7 @@ components:
   - name: skill
     status: live
     origin: plugin
-    recipe: "@skill [id=…] [{.dc-allow-split}] [{.dc-two-col}] / #### Name | Tier / > flavor / 1. **N AP** *Ability:* text / ##### Sub-header … @end-skill"
+    recipe: "@skill [id=…] [{.dc-allow-split}] / #### Name | Tier / > flavor / 1. **N AP** *Ability:* text / ##### Sub-header … @end-skill"
     emits:
       - div.dc-skill-card[name][data-break-inside=avoid] > div.dc-card-tab > h4.dc-tab-title + span.dc-tab-tier
       - div.dc-card-body > div.dc-card-inner > p.dc-flavor + div.dc-sub-header
@@ -368,7 +368,7 @@ components:
       - --dc-card-gap
       - --dc-card-tab-shadow
     breaks: "data-break-inside=avoid by default; {.dc-allow-split} opts into splitting (see allow-split); tab break-after: avoid; last two abilities glued"
-    notes: "Declared marker. Every #### heading in one @skill is its own card, with the @skill line's classes and attributes. @end-skill closes only the skill, never the path around it. A ##### Outcomes sub-header is swallowed (the outcomes block carries its own label)."
+    notes: "Declared marker. Every #### heading in one @skill is its own card, with the @skill line's classes and attributes. @end-skill closes only the skill, never the path around it. A ##### Outcomes sub-header is swallowed (the outcomes block carries its own label). Part of a card's body can sit in columns: wrap it in `@columns 2` … `@end-columns`; the run (and any `@column-break` in it) stays inside the card's .dc-card-inner, in place."
 
   - name: skill-highlight
     status: live
@@ -403,12 +403,13 @@ components:
   - name: roll-the-die
     status: live
     origin: plugin
-    recipe: "ROLL THE DIE!  (automatic on the canonical text in markdown prose; code spans and raw HTML are left alone)"
+    recipe: "ROLL THE DIE!  (automatic in markdown prose, uppercase only: ROLL|ROLLS|ROLLING + A|THE + DIE! — e.g. ROLL A DIE!, ROLLS A DIE!, ROLLING THE DIE!; code spans, raw HTML and headings are left alone)"
     emits: span.dc-roll-the-die
     css: styles/components/cards.css
     tokens: [--dc-roll-the-die-color, --dc-roll-the-die-border]
-    usage: ["ROLL THE DIE!"]
+    usage: ["ROLL THE DIE!", "ROLL A DIE!", "ROLLS A DIE!", "ROLLING THE DIE!"]
     breaks: none
+    notes: "A plain inline box (stamped label look): its padding and border paint around the text without making the line taller, so a line with a chip is the same height as one without. It never wraps: a chip that would straddle a line end moves to the next line whole."
 
   - name: img-wrapper
     status: live
@@ -428,14 +429,6 @@ components:
     breaks: none
 
   # ── Author classes on core markers, attrs and raw HTML ────────────────
-  - name: column-panel
-    status: live
-    origin: plugin
-    recipe: "@column-panel [.gp-columns-2] … @end-column-panel  (or @section .gp-columns-2 .dc-column-panel)"
-    emits: div.section.dc-column-panel
-    css: styles/components/section.css
-    breaks: "first heading glued to its first paragraph"
-
   - name: tabbed
     status: live
     origin: plugin
@@ -448,15 +441,16 @@ components:
   - name: card-grid
     status: live
     origin: plugin
-    recipe: "@card-grid … @end-card-grid  (or @section .dc-card-grid)"
-    emits: div.section.dc-card-grid
+    recipe: "@card-grid / @columns 2 / @specialty … / @end-columns / @end-card-grid  (or @section .dc-card-grid)"
+    emits: div.section.dc-card-grid > div.gp-columns.gp-columns-2
     css: [styles/components/section.css, styles/page-templates.css]
     breaks: "break-inside: auto on the grid; each specialty card avoid"
+    notes: "Sets no columns of its own: the cards go in `@columns 2` inside it."
 
   - name: citizen-walkthrough
     status: live
     origin: plugin
-    recipe: "@citizen-walkthrough [.gp-columns-2] … @end-citizen-walkthrough  (or @section .dc-citizen-walkthrough)"
+    recipe: "@citizen-walkthrough [@columns 2 … @end-columns] … @end-citizen-walkthrough  (or @section .dc-citizen-walkthrough)"
     emits: div.section.dc-citizen-walkthrough
     css: [styles/components/section.css, styles/dc-native.css]
     notes: "Themed through the section chassis tokens --dc-section-accent / --dc-section-bg (see section), which the design guide documents."
@@ -487,7 +481,7 @@ components:
   - name: npc-stat
     status: live
     origin: plugin
-    recipe: "@npc-stat … @end-npc-stat  (or @section .dc-npc-stat)"
+    recipe: "@npc-stat [### bar] [@columns 2 … @end-columns] … @end-npc-stat  (or @section .dc-npc-stat)"
     emits: div.section.dc-npc-stat
     css: [styles/components/section.css]
     tokens:
@@ -496,6 +490,7 @@ components:
       - --dc-npc-stat-label-color
       - --dc-npc-stat-rule
       - --dc-npc-stat-rule-width
+    breaks: "a block with #### entries breaks between entries, never inside one (keep-with-next chain; .dc-allow-split lets a long entry split), whether the entries are direct children or sit in an @columns run inside it; a block with no #### stays whole"
 
   - name: chapter-start
     status: live
@@ -511,14 +506,7 @@ components:
     recipe: "@page .page-credits .dc-credits"
     emits: div.page.dc-credits
     css: [styles/page-templates.css, styles/dc-native.css]
-    notes: "Styled in page-templates.css and dc-native.css — carried in from the books in 1.0.0."
-
-  - name: colophon-grid
-    status: live
-    origin: author
-    recipe: "raw <div class=\"dc-colophon-grid\"> on the credits page"
-    emits: div.dc-colophon-grid
-    css: styles/page-templates.css
+    notes: "Styled in page-templates.css and dc-native.css — carried in from the books in 1.0.0. The colophon names go in `@columns 2` inside `@section .credits-colophon`."
 
   - name: chevron
     status: live
@@ -567,11 +555,11 @@ components:
     css: styles/components/images.css
     breaks: "break-inside: avoid"
 
-  - name: at-a-glance-cards
+  - name: at-a-glance-card
     status: live
     origin: author
-    recipe: "raw <div class=\"dc-at-a-glance-cards\"> > <div class=\"dc-at-a-glance-card\">"
-    emits: div.dc-at-a-glance-cards > div.dc-at-a-glance-card
+    recipe: "@columns 3 / raw <div class=\"dc-at-a-glance-card\"> × 3 / @end-columns"
+    emits: div.dc-at-a-glance-card
     css: styles/components/data.css
 
   - name: stat-block
@@ -594,22 +582,6 @@ components:
     breaks: "break-inside: auto — opts a section or skill card out of the default avoid. A split specialty card also keeps its first two blocks, and any lead-in (ability row, bold-only line, paragraph before a list or table), with what follows (break-after: avoid)"
     notes: "The plugin reads this class (to drop data-break-inside=avoid) but never adds it."
 
-  - name: two-col
-    status: live
-    origin: author
-    recipe: "@skill {.dc-two-col}"
-    emits: div.dc-skill-card.dc-two-col
-    css: styles/components/cards.css
-    breaks: "list items and paragraphs break-inside: avoid within the columns"
-
-  - name: cards-two-col
-    status: live
-    origin: author
-    recipe: "@specialty .augmerc .dc-cards-two-col  (or on @chapter / @page / @section)"
-    emits: .dc-cards-two-col (on the ancestor it is written on; styles the .dc-skill-card inside it)
-    css: styles/components/cards.css
-    breaks: "list items break-inside: avoid; a paragraph may break between columns. Flavor line, ability rows, tables, sub-heads and rules span both columns. A card with .dc-allow-split stays single-column; a card with its own .dc-two-col keeps the per-card form"
-
   - name: snug
     status: live
     origin: author

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gp-dimm-city",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Dimm City design system for Gutterpress: the markdown-it macros (@skill, @specialty, @learning-path, @callout, …), print stylesheets, design tokens, fonts and page templates the Dimm City TTRPG books are set in.",
   "type": "module",
   "main": "plugin.js",
@@ -69,7 +69,7 @@
     "pack:check": "npm pack --dry-run"
   },
   "devDependencies": {
-    "gutterpress": "0.11.16",
+    "gutterpress": "0.11.17-alpha.6",
     "markdown-it": "^14.1.0"
   },
   "peerDependencies": {

package/plugin.js

@@ -58,7 +58,8 @@
  *                          before core's layout transform; anywhere else it is
  *                          core's section continuation)
  *   (chapter-opener composite is now markup-driven — see CSS notes below)
- *   `ROLL THE DIE!`      → span.dc-roll-the-die
+ *   `ROLL THE DIE!` (also ROLL A DIE!, ROLLS A DIE!, ROLLING THE DIE!)
+ *                        → span.dc-roll-the-die
  *   an image-only paragraph gets p.dc-img-wrapper
  *
  * GFM ALERT SYNTAX:
@@ -214,7 +215,8 @@ function buildStickerChain(items) {
   return html;
 }
 
-const ROLL_THE_DIE_TEXT = 'ROLL THE DIE!';
+// ROLL THE DIE! / ROLL A DIE! / ROLLS A DIE! / ROLLING THE DIE! — uppercase only.
+const ROLL_THE_DIE_PATTERN = /ROLL(?:S|ING)? (?:A|THE) DIE!/g;
 
 function isWordChar(char) {
   return char !== '' && /[A-Za-z0-9_]/.test(char);
@@ -231,17 +233,16 @@ function splitRollDieText(token, state) {
   const content = token.content || '';
   const replacement = [];
   let cursor = 0;
-  let searchFrom = 0;
-
-  while (searchFrom < content.length) {
-    const index = content.indexOf(ROLL_THE_DIE_TEXT, searchFrom);
-    if (index === -1) break;
+  const pattern = new RegExp(ROLL_THE_DIE_PATTERN.source, 'g');
+  let match;
 
+  while ((match = pattern.exec(content)) !== null) {
+    const index = match.index;
     const before = index > 0 ? content[index - 1] : '';
-    const end = index + ROLL_THE_DIE_TEXT.length;
+    const end = index + match[0].length;
     const after = end < content.length ? content[end] : '';
     if (isWordChar(before) || isWordChar(after)) {
-      searchFrom = index + 1;
+      pattern.lastIndex = index + 1;
       continue;
     }
 
@@ -249,14 +250,13 @@ function splitRollDieText(token, state) {
       replacement.push(copyTextToken(token, content.slice(cursor, index), state));
     }
 
-    const rollToken = copyTextToken(token, ROLL_THE_DIE_TEXT, state);
+    const rollToken = copyTextToken(token, match[0], state);
     rollToken.type = 'dc_roll_the_die';
     rollToken.tag = 'span';
     rollToken.nesting = 0;
     replacement.push(rollToken);
 
     cursor = end;
-    searchFrom = end;
   }
 
   if (replacement.length === 0) return null;
@@ -288,8 +288,10 @@ function updateRawHtmlStack(html, stack) {
 }
 
 function dcRollDieTransform(state) {
-  state.tokens.forEach(token => {
+  state.tokens.forEach((token, i) => {
     if (token.type !== 'inline' || !Array.isArray(token.children)) return;
+    // A heading is already display type: its wording stays plain heading text.
+    if (i > 0 && state.tokens[i - 1].type === 'heading_open') return;
 
     const children = [];
     const rawHtmlStack = [];
@@ -884,6 +886,8 @@ function dcSkillCards(state) {
     const emit = (html) => out.push(makeToken('html_block', html));
     let inCard = false;
     const belongsToCard = new Set(); // open/close tokens of the components that stay in the card
+    let columnsDepth = 0; // how many `@columns` runs sit open inside the current card
+    const columnsCloses = new Set(); // their close tokens
     let title = { name: '', tier: '' }; // the current card's title, for @continue
 
     const cardOpen = (cont) => {
@@ -900,7 +904,9 @@ function dcSkillCards(state) {
     for (let i = 0; i < content.length; i++) {
       const tok = content[i];
 
-      if (tok.type === 'heading_open' && tok.tag === 'h4') {
+      // An h4 inside a `@columns` run in a card is a plain heading: a card
+      // cannot start in the middle of another card's columns.
+      if (tok.type === 'heading_open' && tok.tag === 'h4' && columnsDepth === 0) {
         endCard();
         const parsed = parseSkillTitle(content[i + 1].content || '');
         title = { name: parsed.name, tier: parsed.tier };
@@ -950,6 +956,20 @@ function dcSkillCards(state) {
         do depth += content[end++].nesting; while (depth > 0);
         belongsToCard.add(tok).add(content[end - 1]);
       }
+      // `@columns` … `@end-columns` and the `@column-break`s between are content of
+      // the card too when they sit inside one: the columns run stays in the
+      // card's body, in place. (A run that opens before the card, around
+      // several cards, is not the card's: it ends the card as any layout token does.)
+      if (inCard && tok.type === 'layout_component_open' && tok.meta.kind === 'columns') {
+        let end = i;
+        let depth = 0;
+        do depth += content[end++].nesting; while (depth > 0);
+        belongsToCard.add(tok).add(content[end - 1]);
+        columnsCloses.add(content[end - 1]);
+        columnsDepth++;
+      }
+      if (columnsCloses.has(tok)) columnsDepth--;
+      if (tok.type === 'layout_column_break' && columnsDepth > 0) belongsToCard.add(tok);
       if (tok.type.startsWith('layout_') && !belongsToCard.has(tok)) endCard();
 
       if (!inCard) {
@@ -1357,8 +1377,7 @@ export const markers = {
   // styles/components/section.css. No variants: none of these is styled per
   // specialty (that lives on `.dc-specialty.<name>`, from `@specialty`), and
   // modifiers such as `.dc-plain`, `.dc-snug`, `.dc-allow-split` and
-  // `.gp-columns-2` stay author classes (`@column-panel .gp-columns-2`).
-  'column-panel': { section: true, class: 'dc-column-panel' },
+  // `.gp-columns-2` stay author classes.
   tabbed: { section: true, class: 'dc-tabbed' },
   'card-grid': { section: true, class: 'dc-card-grid' },
   'citizen-walkthrough': { section: true, class: 'dc-citizen-walkthrough' },

package/snippets/card-grid.md

@@ -1,5 +1,7 @@
 @card-grid
 
+@columns 2
+
 @specialty .{{specialty}}
 
 @specialty-card #card-{{specialty}}
@@ -16,4 +18,6 @@
 
 @end-specialty
 
+@end-columns
+
 @end-card-grid

package/snippets/credits-page.md

@@ -4,10 +4,10 @@
 
 @section .credits-colophon
 
-<div class="dc-colophon-grid">
+@columns 2
 
 **{{role}}:** {{names}}
 
-</div>
+@end-columns
 
 @end-section

package/styles/components/callouts.css

@@ -141,7 +141,8 @@
   margin-bottom: 0.04in;
 }
 
-.dc-alert li::before {
+.dc-alert li::before,
+.dc-alert li > p:first-child::before {
   color: var(--dc-alert-border);
 }
 
@@ -156,6 +157,11 @@
   letter-spacing: var(--dc-alert-label-spacing);
   margin-bottom: var(--dc-alert-label-margin);
   color: var(--dc-alert-label-color);
+  /* The label is a `span` (display: block), so core's heading rule does not
+     reach it. A callout may fragment in a multicol run (dc-native.css §8), and
+     without this the label can sit alone at a column or page foot with its
+     body in the next one. */
+  break-after: avoid;
 }
 
 /* ── Variant: Note (player-facing, default) ─────────────────────────────── */

package/styles/components/cards.css

@@ -288,80 +288,20 @@
    DELETED (2026-09-02): zero uses of either in any book's rendered HTML,
    zero emissions from the Dimm City plugin. */
 
-/* ── SKILL-CARD TWO-COLUMN BODY ────────────────────────────────────────────── */
-/* Two-column body variant for short skill cards. Applied via
-   `@skill {.dc-two-col}` in markdown. The .dc-card-inner content flows in
-   2 columns so a 4in single-column skill becomes ~2in tall, doubling
-   horizontal packing density. Column authority lives here; the card's
-   column-span and break rules stay in components/*.css. */
-.dc-skill-card.dc-two-col .dc-card-inner {
-  column-count: 2;
-  column-gap: 12px;
-  column-fill: balance;
-}
-
-/* Inside 2-col body, a table spans both columns so its chrome doesn't break
-   across the gap. */
-.dc-skill-card.dc-two-col .dc-card-inner table {
-  column-span: all;
-}
-
-/* AP/numbered list items must stay whole — splitting "Bullet to Blood"
-   across columns reads as sloppy. break-inside: avoid keeps each <li>
-   together in a single column even when the column boundary lands in
-   the middle of one. Paragraphs immediately following list items also
-   stay glued so their text doesn't strand from its anchor item. */
-.dc-skill-card.dc-two-col .dc-card-inner ul > li,
-.dc-skill-card.dc-two-col .dc-card-inner p {
+/* `.dc-two-col` (`@skill {.dc-two-col}`: a card's whole body in two columns)
+   and `.dc-cards-two-col` (every card under an ancestor) were here and are
+   DELETED. Columns are core's `@columns 2` … `@end-columns`, and a card that
+   wants them wraps just that part of its body: the skill rule keeps the run
+   inside `.dc-card-inner`, in place (plugin.js, `dcSkillCards`).
+
+   The one thing a card still says about its run: an ability row, a paragraph
+   or a list item stays whole. Split across the gap, an ability reads as
+   sloppy (a table, which `.dc-two-col` used to span across both columns,
+   goes outside the run instead). */
+.dc-card-inner .gp-columns :is(.dc-ability, p, li) {
   break-inside: avoid;
 }
 
-/* ── SKILL-CARD TWO-COLUMN FORM, BY ANCESTOR ───────────────────────────────── */
-/* `.dc-cards-two-col` on ANY ancestor of skill cards (a `@specialty` marker,
-   a `@chapter`/`@page`, a `@section`) makes every skill card inside it
-   two-column: `@specialty .augmerc .dc-cards-two-col`. It is the book-wide
-   counterpart of the per-card `.dc-two-col` above, and the two differ on
-   purpose. Here only running text (paragraphs and lists) flows in the two
-   columns, a paragraph MAY break between them so the columns balance, and a
-   list item stays whole. Everything else spans the card: the flavor line,
-   ability rows (AP pill + text: in a column they ran taller than the whole
-   card and could not balance), tables, outcome ladders, alerts, sub-heads
-   and rules. Per-card `.dc-two-col` instead keeps every paragraph whole and
-   spans only tables.
-   A card with its own `.dc-two-col` keeps the per-card form entirely: every
-   rule below excludes it, so its own, stricter form wins over the inherited
-   one. A card marked `.dc-allow-split` stays single-column: a balanced
-   multicol that fragments across pages leaves the first fragment's right
-   column empty.
-   Column authority for both forms is this file (COLUMNS_ALLOWLIST in
-   test/integrity.test.js): this is component-internal layout of the card
-   body, not a page or section template. */
-.dc-cards-two-col .dc-skill-card:not(.dc-two-col, .dc-allow-split) > .dc-card-body > .dc-card-inner {
-  column-count: 2;
-  column-gap: 16px;
-}
-
-/* The second selector: a text block left alone between two spanning pieces
-   (or at either end) cannot balance and would leave a column empty. */
-.dc-cards-two-col .dc-skill-card:not(.dc-two-col, .dc-allow-split) .dc-card-inner > :not(ul, ol, p:not(.dc-flavor)),
-.dc-cards-two-col .dc-skill-card:not(.dc-two-col, .dc-allow-split) .dc-card-inner > :is(:first-child, :not(ul, ol, p:not(.dc-flavor)) + *):is(:last-child, :has(+ :not(ul, ol, p))) {
-  column-span: all;
-}
-
-.dc-cards-two-col .dc-skill-card:not(.dc-two-col, .dc-allow-split) .dc-card-inner li {
-  break-inside: avoid;
-}
-
-/* An ability row under text that runs in the two columns sat flush on its
-   last line: the column row drops that text's bottom margin at the
-   spanning row. The row is moved down, not given a margin: a 0.08in margin
-   cost two pages in the Field Guide and split a card across a page turn, and
-   0.04in cost one page (measured). */
-.dc-cards-two-col .dc-skill-card:not(.dc-two-col, .dc-allow-split) .dc-card-inner > :is(p:not(.dc-flavor), ul, ol) + :is(p:not(.dc-flavor), ul, ol) + .dc-ability {
-  position: relative;
-  top: 0.06in;
-}
-
 /* A split card (`.dc-allow-split`) never opens with just its tab and a line
    or two at a page foot: its first two blocks (the flavor line and a
    possibly one-line ability) stay with the first two lines of what follows,
@@ -383,11 +323,18 @@
 
 /* Horizontal skill placement — not currently attempted. `.dc-specialty
    .skill-grid { columns: 2 }` and `display: grid` are both worth testing
-   before more work goes into the alternatives: the per-skill `.dc-two-col` body
-   variant (above), which shrinks each card vertically so 2 fit per page, or
+   before more work goes into the alternatives: an `@columns 2` run in the
+   card's body, which shrinks each card vertically so 2 fit per page, or
    cutting skill body text length at the markdown level. */
 
-.dc-card-body::before {
+/* Scoped to the skill card on purpose. This mark is an absolutely positioned
+   box, and an absolutely positioned box inside a multicol run stops Chromium
+   balancing the run's last fragment: it stretches to the full page height
+   instead of shrinking to its content, so a column run (`@columns 2`)
+   that ends in a `@card` took a page of its own and spilled its bottom edge
+   onto one more. The `@card` primitive shares the `.dc-card-body` class and
+   never meant to carry this tick (its tokens are the skill card's). */
+.dc-skill-card > .dc-card-body::before {
   content: '';
   position: absolute;
   top: 10px;
@@ -475,21 +422,35 @@
   font-weight: 600;
 }
 
-/* ROLL THE DIE! emphasis span — token: --dc-roll-the-die-color (default --blood)
-   --crimson default failed at 2.64:1 on the skill-card paper-aged substrate;
-   --blood is 5.07:1 there. Per-component overrides via the token are unchanged. */
+/* ROLL THE DIE! emphasis chip — tokens: --dc-roll-the-die-color (text, default
+   --blood), --dc-roll-the-die-border (default --hud-magenta).
+   A stamped label for an instruction to act. It is a plain non-replaced
+   `display: inline` box on purpose: an inline box's vertical padding, border
+   and shadow paint around its text without adding to the line box, so a line
+   holding a chip is exactly as tall as one without, and nothing around it
+   moves. `line-height: 0` keeps the chip's own font from growing the line,
+   the font is smaller than the body, and `white-space: nowrap` moves a chip that
+   would straddle a line end to the next line whole (it still adds no height).
+   `box-decoration-break: clone` keeps both edges if one ever does fragment.
+   The fill is opaque paper, so contrast is fixed whatever it sits on: --blood on --paper-cream is 7.7:1
+   (it failed at 2.64:1 on skill-card paper-aged as --crimson text). */
 .dc-roll-the-die {
-    font-family: var(--font-display);
-    font-size: 8pt;
-    font-weight: 700;
-    color: var(--dc-roll-the-die-color);
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    display: inline-block;
-    vertical-align: middle;
-    background-color: var(--paper-aged);
-    padding: 0.5em;
-    border: 2px dashed var(--dc-roll-the-die-border);
+  display: inline;
+  font-family: var(--font-display);
+  font-size: 0.8em;
+  font-weight: 700;
+  line-height: 0;
+  white-space: nowrap;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--dc-roll-the-die-color);
+  background-color: var(--paper-cream);
+  padding: 0.14em 0.35em;
+  margin-inline: 0.05em;
+  border: 1.5pt solid var(--dc-roll-the-die-border);
+  border-bottom-width: 3pt;
+  box-shadow: 1pt 1pt 0 var(--dc-roll-the-die-border);
+  box-decoration-break: clone;
 }
 
 /* ── AP base + author-facing variants ─────────────────────────────────── */