/* ── Library View Cards (.vc-*) + /lab/cards gallery (.vclab-*) ──────────────────────────────
   The record "view card" family: one compact, book-flavored card per Library record type
   (components in views/_cards.js, primitives in views/_cardkit.js). Visual recipe cloned from
   the monster stat block (.statblock/.sb-* in library-spa.css) so the two read as one family;
   kept in a separate file so the Library-screen redesign and this card system never collide.

   LAYOUT CONTRACT: every card has a STATIC per-type height (inline style from _cards.js).
   The identity zone (.vc-head) pins on top, the provenance footer on the bottom, and .vc-body
   scrolls between them. Sections are collapsible <details class="vc-cs"> whose headers stick
   to the top of the scroll area. */

/* ── ONE micro-label recipe: the 21 small-caps mono labels below are now bound directly to the
   `.mlbl` selector list in theme.css (per-class deltas stay knob values --mlbl-fs/-lh/-ls/-c in each
   class's own rule here). No recipe copy in this file. New code uses .mlbl directly. */

.vcard {
  position: relative;
  display: flex; flex-direction: column;
  font-family: var(--font-sans); color: var(--text);
  padding: var(--sp-8) var(--sp-9) var(--sp-7);   /* frame (bg/border/radius/shadow) comes from the shared recipe in theme.css */
}
.vcard.vc-slim { padding: 0.6875rem var(--sp-8) var(--sp-6); }

.vc-head { flex: none; }
/* scrollbar-gutter keeps the scrollbar's lane RESERVED even when it isn't shown, so text
   never re-wraps when expanding a section tips the body into scrolling */
.vc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 0.3125rem;
  scrollbar-gutter: stable; }

.vc-actions { position: absolute; top: 0.5625rem; right: 0.5625rem; display: flex; gap: var(--sp-4); z-index: 5; }
.vc-act { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem;
  border: 0.0625rem solid var(--border); border-radius: var(--r-md); background: var(--panel);
  color: var(--muted); font-size: var(--fs-md); text-decoration: none; cursor: pointer;
  transition: color .12s, border-color .12s; }
.vc-act:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .6); }

.vc-eyebrow { --mlbl-ls: .14em; --mlbl-c: var(--accent); margin-bottom: var(--sp-2); }
.vc-name { font: 600 var(--fs-card)/1.05 var(--font-display); color: var(--gold); letter-spacing: 0.01875rem;
  padding-right: 2.25rem; }
.vc-slim .vc-name { font-size: var(--fs-sub); }
.vc-meta { font-style: italic; font-size: var(--fs-smplus); color: var(--muted); margin: var(--sp-1) 0 0; }
.vc-bar { height: 0.1875rem; margin: var(--sp-5) 0; opacity: .9; flex: none;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  clip-path: polygon(0 50%, 0.4375rem 0, calc(100% - 0.4375rem) 0, 100% 50%, calc(100% - 0.4375rem) 100%, 0.4375rem 100%); }

/* pills — small state markers (Concentration / Ritual / rarity / Enforced …). The base shape is the
   shared .status-pill/.vc-pill recipe in theme.css; only the colour variants live here. */
.vc-pills { display: flex; flex-wrap: wrap; gap: 0.3125rem; margin: var(--sp-4) 0 0; }
.vc-pill.gold { color: var(--gold); border-color: rgba(var(--gold-soft-rgb), .45); }
.vc-pill.ember { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }

/* labeled rows — the "_sbLine" idea generalized */
.vc-rows { font-size: var(--fs-base); line-height: 1.5; margin: var(--sp-3) 0; }
.vc-row { margin: 0.0625rem 0; color: var(--text); }
.vc-k { font-weight: 600; color: var(--gold); }

/* chips — small enumerables (properties, languages, proficiencies, classes) */
.vc-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-3); vertical-align: middle; }
.vc-chip { font-size: var(--fs-xs); line-height: 1; padding: var(--sp-3) 0.4375rem; border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .22); border: 0.0625rem solid var(--border); color: var(--text); }
.vc-chip.on { border-color: rgba(var(--gold-soft-rgb), .55); color: var(--gold); }

/* wide (double-column) variant — an AUTHORED split per card: core facts LEFT, sections RIGHT.
   Each column is its OWN scroll surface (fills the body's fixed height), so the core-facts
   column stays visible while the section column scrolls; a hairline separates them. Cards
   without a split (equipment/options/knobs) keep the plain scrolling body. */
.vc-cols { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; height: 100%; }
.vc-col { min-width: 0; min-height: 0; overflow-y: auto; padding-right: 0.3125rem;
  scrollbar-gutter: stable; }
.vc-col + .vc-col { border-left: 0.0625rem solid var(--border-soft, var(--border));
  padding-left: var(--sp-9); margin-left: var(--sp-7); }

/* prose — plain flowing text; the CARD BODY is the one scroll surface (no nested caps) */
.vc-prose { font-size: var(--fs-base); line-height: 1.5; color: var(--text); margin: 0.4375rem 0 var(--sp-1);
  white-space: pre-line; }

/* collapsible section with sticky header — the card's structural unit */
.vc-cs { margin: var(--sp-4) 0 var(--sp-1); }
.vc-cs > summary.vc-cs-h { cursor: pointer; list-style: none;
  position: sticky; top: 0; z-index: 3;
  background: var(--panel-2);
  color: var(--gold); font: 600 var(--fs-lg)/1.2 var(--font-display); letter-spacing: 0.01875rem;
  border-bottom: 0.0625rem solid var(--border); padding: 0.3125rem var(--sp-1) var(--sp-3); }
.vc-cs > summary.vc-cs-h::-webkit-details-marker { display: none; }
.vc-cs-c { display: inline-block; margin-right: 0.4375rem; color: var(--accent); font-size: var(--fs-xs);
  transition: transform .12s; transform: translateY(-0.0625rem); }
.vc-cs[open] > summary .vc-cs-c { transform: rotate(90deg) translateX(-0.0625rem); }
.vc-cs-n { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--muted); letter-spacing: .05em;
  border: 0.0625rem solid var(--border); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-4); vertical-align: 0.125rem; }
.vc-cs-b { padding-top: var(--sp-1); }

/* legacy boxed disclosure (kit primitive; secondary depth where a full section is too much) */
.vc-more { margin: 0.4375rem 0 var(--sp-1); border: 0.0625rem solid var(--border-soft, var(--border)); border-radius: var(--r-lg);
  background: rgba(0, 0, 0, .14); }
.vc-more > summary { cursor: pointer; list-style: none; padding: var(--sp-4) var(--sp-6); --mlbl-fs: 0.6875rem; }   /* micro-label recipe via .mlbl (theme.css) */
.vc-more > summary::-webkit-details-marker { display: none; }
.vc-more > summary::before { content: "▸"; display: inline-block; margin-right: var(--sp-4); color: var(--accent);
  transition: transform .12s; }
.vc-more[open] > summary::before { transform: rotate(90deg); }
.vc-more[open] > summary { border-bottom: 0.0625rem solid var(--border-soft, var(--border)); }
.vc-more-body { padding: 0.4375rem var(--sp-6) 0.5625rem; }


/* small level tag ("L3") used in the class progression ledger rows */
.vc-tag { font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .06em; color: var(--accent);
  border: 0.0625rem solid rgba(var(--accent-rgb), .4); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-3); }
/* named feature block — the monster card's trait presentation, shared by all cards */
.vc-block { font-size: var(--fs-base); line-height: 1.5; color: var(--text); margin: var(--sp-4) 0; }
.vc-bi { font-weight: 600; font-style: italic; color: var(--text); }

/* ── Entry list: a POOL of named options, one compact row each ────────────────────────────────
   "Choose three of the following" used to render as one 3,800-character paragraph. Each option is
   now a row you can scan by name and open on demand — the whole pool costs the height a few
   paragraphs did, and no wording is summarized or dropped. */
.vc-el { margin: var(--sp-2) 0 var(--sp-3); border-left: 0.0625rem solid var(--border-soft, var(--border)); padding-left: var(--sp-4); }
.vc-el-name { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2); }
.vc-el-n { font: 600 var(--fs-micro)/1 var(--font-mono); color: var(--gold);
  border: 0.0625rem solid rgba(var(--gold-soft-rgb), .4); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); }
.vc-el-intro { font-size: var(--fs-smplus); line-height: 1.45; color: var(--muted); margin: 0 0 var(--sp-3); }
.vc-el-row { border-bottom: 0.0625rem solid rgba(var(--border-rgb, 120, 100, 70), .22); }
.vc-el-row:last-child { border-bottom: 0; }
.vc-el-h { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; list-style: none;
  padding: var(--sp-2) 0; font-size: var(--fs-smplus); line-height: 1.35; color: var(--text); }
.vc-el-h::-webkit-details-marker { display: none; }
.vc-el-h:hover { color: var(--gold); }
.vc-el-c { flex: none; font-size: var(--fs-micro); color: var(--muted); transition: transform .12s ease; }
.vc-el-row[open] > .vc-el-h { color: var(--gold); }
.vc-el-row[open] > .vc-el-h .vc-el-c { transform: rotate(90deg); }
.vc-el-b { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
  padding: 0 0 var(--sp-3) calc(var(--fs-micro) + var(--sp-3)); }
@media (prefers-reduced-motion: reduce) { .vc-el-c { transition: none; } }

/* rollable tables — dice pill + zebra grid; the card body is the scroll surface */
.vc-tbl { margin: var(--sp-5) 0 var(--sp-1); }
.vc-tbl-h { display: flex; align-items: center; gap: 0.4375rem; margin-bottom: var(--sp-3); }
.vc-tbl-name { font: 600 var(--fs-base)/1.2 var(--font-sans); color: var(--text); }
.vc-dice { font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .06em; color: var(--gold);
  border: 0.0625rem solid rgba(var(--gold-soft-rgb), .45); border-radius: var(--r-pill); padding: var(--sp-2) 0.4375rem; flex: none; }
.vc-tbl-wrap { border: 0.0625rem solid var(--border-soft, var(--border)); border-radius: var(--r-lg); overflow: hidden; }
table.vc-roll { width: 100%; border-collapse: collapse; font-size: var(--fs-smplus); line-height: 1.4; }
table.vc-roll th { background: var(--panel-2);
  --mlbl-fs: var(--fs-2xs); --mlbl-lh: 1.2; --mlbl-ls: .07em; --mlbl-c: var(--gold);
  text-align: left; padding: var(--sp-4) var(--sp-5); border-bottom: 0.0625rem solid var(--border); }
table.vc-roll td { padding: 0.3125rem var(--sp-5); vertical-align: top; color: var(--text);
  border-bottom: 0.0625rem solid var(--border-soft, var(--border)); }
table.vc-roll tbody tr:nth-child(even) { background: rgba(0, 0, 0, .14); }
table.vc-roll td:first-child { font-family: var(--font-mono); color: var(--muted); white-space: nowrap; }

.vc-source { flex: none; margin-top: var(--sp-5); --mlbl-fs: var(--fs-2xs); --mlbl-lh: normal; --mlbl-ls: .08em; }

/* ── Monster stat block — view-card-family layer (component: _statblock.js) ──────────────────
   The .sb-* base lives in library-spa.css; this layer adds the family layout contract (static
   height, pinned .sb-head, scrolling .sb-body, sticky collapsible sections) plus the token
   portrait and identity pills/chips. */
.statblock { display: flex; flex-direction: column; height: 46.5625rem; }
.statblock.sb-wide { height: 35rem; }
.sb-cols { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; height: 100%; }
.sb-col { min-width: 0; min-height: 0; overflow-y: auto; padding-right: 0.3125rem;
  scrollbar-gutter: stable; }
.sb-col + .sb-col { border-left: 0.0625rem solid var(--border-soft, var(--border));
  padding-left: var(--sp-9); margin-left: var(--sp-7); }
.sb-head { flex: none; }
.sb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 0.3125rem;
  scrollbar-gutter: stable; }
.statblock .sb-source { flex: none; margin-top: var(--sp-5); }

.sb-token { position: absolute; top: 2.75rem; right: 0.75rem; width: 4rem; height: 4rem; object-fit: cover;
  border-radius: var(--r-round); border: 0.125rem solid rgba(var(--gold-soft-rgb), .45); background: var(--panel);
  box-shadow: var(--shadow-drop-sm); z-index: 4; }
.sb-idrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin: 0.3125rem 0 0;
  padding-right: 4.875rem; }
.sb-idrow .vc-pills { margin: 0; }
/* when a token portrait is present, the header must clear its full height (token bottom =
   44px top + 64px + breathing room) so the first divider bar never crosses it */
.statblock.sb-hastok .sb-idrow { min-height: 3.25rem; }

/* monster section headers reuse the family collapsible, in stat-block typography */
.statblock .vc-cs > summary.vc-cs-h { font-size: var(--fs-sub); }

/* ── /lab/cards gallery ── */
.vclab { max-width: 85rem; margin: 0 auto; padding: 1.125rem var(--sp-10) 3.75rem; }
.vclab-head { display: flex; align-items: baseline; gap: var(--sp-6); margin-bottom: var(--sp-3); }
.vclab-head h1 { font: 600 var(--fs-hero)/1.1 var(--font-display); color: var(--gold); margin: 0; }
.vclab-tally { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .08em; padding: 0.3125rem 0.5625rem;
  border-radius: var(--r-pill); border: 0.0625rem solid var(--border); color: var(--muted); }
.vclab-tally.ok { color: var(--good); border-color: rgba(80, 160, 90, .5); }
.vclab-tally.bad { color: var(--bad); border-color: rgba(var(--bad-soft-rgb), .5); }
.vclab-h { font: 600 var(--fs-sub)/1.2 var(--font-display); color: var(--gold); margin: 1.375rem 0 var(--sp-6);
  border-bottom: 0.0625rem solid var(--border); padding-bottom: var(--sp-3); }
/* wide-capable samples = the two authored variants side by side: single | wide double-column;
   single-only types render one card at the single-column width */
.vclab-grid { display: block; }
.vclab-cell { margin: 0 0 1.375rem; }
.vclab-pair { display: grid; grid-template-columns: 25rem minmax(33.75rem, 50rem); gap: 1.125rem;
  align-items: start; }
.vclab-one { max-width: 25rem; }
.vclab-var { --mlbl-fs: var(--fs-micro); --mlbl-ls: .12em; margin: 0 0 var(--sp-3) var(--sp-1); }
@media (max-width: 1080px) { .vclab-pair { grid-template-columns: 1fr; } }
.vclab-tag { font: 600 var(--fs-2xs)/1.4 var(--font-mono); letter-spacing: .05em; color: var(--muted);
  margin: 0 var(--sp-1) 0.3125rem; }
.vclab-tag b { color: var(--accent); font-weight: 600; }
.vclab-wait, .vclab-err { border: 0.0625rem dashed var(--border); border-radius: var(--r-xl); padding: 1.125rem;
  font-size: var(--fs-smplus); color: var(--muted); }
.vclab-err { color: var(--bad); border-color: rgba(var(--bad-soft-rgb), .5); white-space: pre-wrap; }

/* ── PLAY VIEW CARD (.pcard/.pc-*) — the card-family CONTROL surface for the encounter screen
   (views/_playcard.js; workbench at /lab/playcard). Same grammar as .vcard (pinned head,
   scrolling .vc-body, .vc-cs sections, pinned footer) but rows/buttons drive the engine.
   COMPACT is law: resting = head + section index. ────────────────────────────────────────── */
.pcard {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 23.75rem;
  font-family: var(--font-sans); color: var(--text); font-size: var(--fs-base);
  padding: var(--sp-6) var(--sp-7) var(--sp-5);   /* frame comes from the shared recipe in theme.css */
}
.pcard .vc-body { padding-right: var(--sp-3); }
.pcard.pc-ref .vc-body { opacity: .82; }

.pc-head { flex: none; }
.pc-id { display: flex; align-items: center; gap: var(--sp-5); }
.pc-disc { flex: none; width: 2.125rem; height: 2.125rem; border-radius: var(--r-round); overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.125rem solid var(--side, var(--accent)); background: var(--panel);
  font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--muted); box-shadow: 0 0 0 0.0625rem rgba(0,0,0,.5); }
.pc-disc img { width: 100%; height: 100%; object-fit: cover; }
.pc-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pc-name { font: 600 var(--fs-lg)/1.1 var(--font-display); color: var(--gold); letter-spacing: 0.0125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-meta { font-size: var(--fs-xs); color: var(--muted); font-style: italic; }
.pc-eco { flex: none; display: inline-flex; gap: var(--sp-3); }
.pc-pip { display: inline-flex; align-items: center; justify-content: center;
  width: 1.125rem; height: 1.125rem; border-radius: var(--r-sm); font: 600 var(--fs-2xs)/1 var(--font-mono);
  border: 0.0625rem solid var(--border); color: var(--gold); background: var(--panel); font-style: normal; }
.pc-pip.used { opacity: .3; text-decoration: line-through; }

.pc-hp { position: relative; height: 0.75rem; margin: 0.4375rem 0 0; border-radius: var(--r-md);
  background: rgba(0,0,0,.45); border: 0.0625rem solid var(--border); overflow: hidden; }
.pc-hp i { position: absolute; inset: 0 auto 0 0; background: var(--ok, #4a8); }
.pc-hp i.warn { background: var(--warn, #b92); }
.pc-hp i.bad { background: var(--bad, #b33); }
.pc-hp u { position: absolute; top: 0; bottom: 0; background: rgba(120,160,255,.5); text-decoration: none; }
.pc-hp-t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 600 var(--fs-micro)/1 var(--font-mono); color: #fff; text-shadow: 0 0.0625rem 0.125rem #000; letter-spacing: .06em; }

.pc-ds { display: flex; align-items: center; gap: var(--sp-3); margin-top: 0.3125rem; justify-content: center; }
.pc-ds-l { --mlbl-fs: 0.5625rem; --mlbl-ls: .12em; margin: 0 var(--sp-3); }
.pc-ds-s, .pc-ds-f { width: 0.5625rem; height: 0.5625rem; border-radius: var(--r-round); border: 0.0625rem solid var(--border); font-style: normal; }
.pc-ds-s.on { background: var(--ok, #4a8); border-color: var(--ok, #4a8); }
.pc-ds-f.on { background: var(--bad, #b33); border-color: var(--bad, #b33); }

.pc-core { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) 0.4375rem; margin-top: var(--sp-4); font-size: var(--fs-smplus); }
.pc-core .pc-k { font-weight: 600; color: var(--gold); font-size: var(--fs-xs); letter-spacing: .04em; }
.pc-tag { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--accent); border: 0.0625rem solid var(--border);
  border-radius: var(--r-sm); padding: var(--sp-1) 0.3125rem; }
.pc-conds { display: inline-flex; gap: var(--sp-2); margin-left: auto; }
.pc-cond { font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .05em; padding: var(--sp-2) var(--sp-3);
  border: 0.0625rem solid var(--border); border-radius: var(--r-sm); color: var(--warn, #b92); }
.pc-cond.rm { cursor: pointer; }
.pc-cond.rm:hover { color: var(--bad, #b33); border-color: var(--bad, #b33); }
.pcard .vc-bar { margin-top: 0.4375rem; }

/* book-flavored control rows — the row IS the button */
.pc-row { display: block; width: 100%; text-align: left; margin: 0 0 var(--sp-3); padding: 0.3125rem 0.4375rem;
  border: 0.0625rem solid var(--border-soft, var(--border)); border-radius: var(--r-md); background: transparent;
  color: var(--text); cursor: pointer; font: inherit; line-height: 1.35;
  transition: border-color .12s, background .12s; }
.pc-row:hover:not(:disabled) { border-color: rgba(var(--accent-rgb), .65); background: rgba(var(--accent-rgb), .07); }
.pc-row:disabled { cursor: default; }
.pc-row.spent { opacity: .38; }
.pc-row-n { font-weight: 600; font-style: italic; color: var(--gold); margin-right: 0.3125rem; }
.pc-row-f { color: var(--muted); font-size: var(--fs-sm); }
.pc-row-t { float: right; font: 600 var(--fs-micro)/1.6 var(--font-mono); color: var(--accent);
  border: 0.0625rem solid var(--border); border-radius: var(--r-sm); padding: 0 var(--sp-3); margin-left: 0.3125rem; }

/* compact momentary-action buttons */
.pc-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* .pc-btn folded onto the kit (2.1): elements now carry `btn btn-sm pc-btn`; only STATE deltas remain here. */
.pc-btn.spent { opacity: .38; cursor: default; }
/* .is-on now uses the kit's canonical gold-fill selected treatment; primary emphasis is filled `btn-primary`. */

/* spell slot pips */
.pc-slots { display: flex; align-items: center; gap: var(--sp-2); margin: 0.3125rem 0 var(--sp-2); }
.pc-slots-l { margin-right: var(--sp-3); }
.pc-slot { width: 0.5rem; height: 0.5rem; border-radius: var(--r-round); border: 0.0625rem solid var(--gold); font-style: normal; }
.pc-slot.on { background: var(--gold); }

/* DM section rows */
.pc-dm-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3125rem; margin: 0 0 var(--sp-4); }
.pc-dm-hp { width: 4rem; }
.pc-dm-hp .ui-num { width: 100%; }
/* kit Select inside a DM row takes the row's slack */
.pc-dm-row .sel2 { flex: 1 1 auto; min-width: 8.75rem; }

/* pinned footer — aim prompts, reaction answers, End turn */
.pc-foot { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4);
  padding-top: 0.4375rem; margin-top: var(--sp-4); border-top: 0.0625rem solid var(--border-soft, var(--border));
  min-height: 2.125rem; }
.pc-foot-p { font-size: var(--fs-smplus); color: var(--gold); font-weight: 600; }
.pc-foot-wait { font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
.pc-nl { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: var(--fs-xs); color: var(--muted); }
.pc-foot .btn-primary { margin-left: auto; }

/* the /lab/playcard workbench */
.pclab { max-width: 62.5rem; margin: 0 auto; padding: 1.125rem var(--sp-10) 3.75rem; }
.pclab-stage { display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; gap: 1.125rem; align-items: stretch; margin-top: var(--sp-8); }
.pclab-log code { display: block; font: var(--fs-xs)/1.5 var(--font-mono); color: var(--muted);
  border-bottom: 0.0625rem dashed var(--border-soft, var(--border)); padding: var(--sp-2) 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .pclab-stage { grid-template-columns: 1fr; } }

/* pcard content-audit additions (PHB/DMG/MM review 2026-07-19) */
.pc-insp { color: var(--gold); margin-left: 0.3125rem; font-size: var(--fs-sm); }
.pc-sense { font-size: var(--fs-xs); color: var(--muted); }
.pc-leg { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-1); }
.pc-slot.lg { border-color: var(--accent); }
.pc-slot.lg.on { background: var(--accent); }
/* defenses strip — resist/immune/vulnerable are table-critical facts */
.pc-defs { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 0.3125rem; }
.pc-def { font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .04em; padding: var(--sp-2) 0.3125rem;
  border: 0.0625rem solid var(--border); border-radius: var(--r-sm); color: var(--muted); }
.pc-def.im { color: var(--gold); border-color: rgba(var(--gold-soft-rgb), .5); }
.pc-def.rs { color: var(--ok, #4a8); border-color: rgba(80, 170, 130, .5); }
.pc-def.vu { color: var(--bad, #b33); border-color: rgba(var(--bad-soft-rgb), .55); }
/* read-only book note (Multiattack pattern, trait text, legendary preamble) */
.pc-note { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); margin: var(--sp-2) 0 0.3125rem; }
.pc-note b { color: var(--text); font-style: italic; }
/* resource rows — feature button + uses pips + cadence */
.pc-res { display: flex; align-items: center; gap: var(--sp-4); }
.pc-res .pc-row { flex: 1 1 auto; margin-bottom: var(--sp-3); }
.pc-res-pips { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.pc-res-cad { --mlbl-fs: var(--fs-micro); --mlbl-ls: .05em; margin-left: var(--sp-2); }
/* saves & checks quick-roll grid */
.pc-rollhead { margin: var(--sp-1) 0 0.3125rem; }
.pc-rollseg button { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-6); }
.pc-rolls { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.pc-roll { text-align: center; font: 500 var(--fs-xs)/1.2 var(--font-mono); }
.pc-roll b { color: var(--gold); margin-left: var(--sp-2); }
/* workbench world-events rail */
.pclab-side { display: flex; flex-direction: column; gap: var(--sp-9); }
.pclab-events { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

/* ── tabbed CHARACTER play card (.pchar-*) — layout mirrored from the operator's sample UI,
   skinned in the family theme (views/_playcard_char.js) ─────────────────────────────────── */
/* DEFINITE default width — a percentage/max-width would resolve against a content-sized column
   and make the card's width follow the ACTIVE TAB's content (it visibly re-sized per tab).
   Resizing overrides this inline; the narrow-screen case is handled by the media query below. */
.pcard.pchar { width: 28.75rem; max-width: none; padding-right: var(--sp-4);
  outline: 0.0625rem solid rgba(var(--gold-soft-rgb), .25); outline-offset: 0.1875rem;
  /* the card is resizable, so its layout must respond to ITS OWN width, not the viewport's */
  container-type: inline-size; container-name: pchar; }
@media (max-width: 540px) { .pcard.pchar { width: 100%; } }
.pchar-frame { flex: 1 1 auto; min-height: 0; display: flex; }
/* body + footer share the LEFT column so the tab rail's height never changes between tabs */
.pchar-colwrap { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pchar-colwrap .pc-foot { margin-right: var(--sp-1); }
.pchar-body { flex: 1 1 auto; min-height: 0; }
/* right-edge vertical tab rail — the sample's signature */
.pchar-tabs { flex: none; width: 1.625rem; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-2); overflow: hidden;
  /* size container: the rail swaps words for icons based on ITS OWN height (below) */
  container-type: size; container-name: pchartabs; }
/* flex-basis 0 + min-height 0 so six tabs always share whatever height the card has (a short
   card clips the label rather than pushing tabs outside the frame; each carries a title) */
.pchar-tab { flex: 1 1 0; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; padding: var(--sp-4) var(--sp-3); border: 0.0625rem solid var(--border);
  border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--panel); color: var(--muted); cursor: pointer;
  font: 600 var(--fs-2xs)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  transition: color .12s, border-color .12s; }
.pchar-tab:hover { color: var(--text); }
.pchar-tab.on { color: var(--gold); border-color: rgba(var(--gold-soft-rgb), .55);
  background: rgba(var(--accent-rgb), .1); }
/* gold banner heading (the sample's burgundy banner, family-toned) */
.pchar-ban { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-5) 0 var(--sp-3);
  padding: var(--sp-3) 0.5625rem; border: 0.0625rem solid rgba(var(--gold-soft-rgb), .35); border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(0, 0, 0, .25));
  --mlbl-fs: var(--fs-2xs); --mlbl-ls: .12em; --mlbl-c: var(--gold); }
.pchar-ban-r { color: var(--text); display: inline-flex; align-items: center; gap: var(--sp-2); }
.pchar-line { font-size: var(--fs-base); padding: 0.0625rem var(--sp-2) var(--sp-2); border-bottom: 0.0625rem solid var(--border-soft, var(--border)); }
.pchar-beliefs { display: flex; flex-direction: column; gap: var(--sp-2); }
.pchar-belief { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); border-left: 0.1875rem solid var(--muted); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--panel); }
.pchar-belief-accurate { border-left-color: var(--ok); }
.pchar-belief-false, .pchar-belief-distorted { border-left-color: var(--bad); }
.pchar-belief-unverified { border-left-color: var(--warn); }
.pchar-belief-subj { font-weight: 600; margin-right: var(--sp-2); }
.pchar-belief-src { color: var(--muted); font-size: var(--fs-2xs); margin-left: var(--sp-2); }
.pchar-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-6); }
/* Main tab: ability/save rails flanking the center stack */
.pchar-main { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) 4.75rem; gap: 0 var(--sp-5);
  min-height: 100%; }
.pchar-rail { display: flex; flex-direction: column; }
.pchar-rail .pchar-ban { flex: none; }
.pchar-rail .pchar-abox { flex: 1 1 auto; }
.pchar-mid { display: flex; flex-direction: column; justify-content: space-between; }
.pchar-rail { min-width: 0; }
.pchar-rail .pchar-ban { padding: var(--sp-3) 0.3125rem; font-size: var(--fs-micro); justify-content: center; }
.pchar-abox { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) 0.3125rem; margin: 0 0 var(--sp-3);
  background: rgba(0, 0, 0, .18); align-items: center; }
.pchar-abox-k { font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .08em; color: var(--gold);
  display: inline-flex; align-items: center; gap: var(--sp-2); }
.pchar-abox-v { font: 600 var(--fs-lg)/1.1 var(--font-display); color: var(--text); grid-row: 2; }
.pchar-abox-m { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--muted); grid-column: 2; }
.pchar-abox .pchar-dice { grid-column: 2; grid-row: 2; }
.pchar-dice { border: none; background: none; color: var(--accent); cursor: pointer; padding: 0.0625rem var(--sp-1);
  font-size: var(--fs-base); line-height: 1; transition: color .12s, transform .12s; }
.pchar-dice:hover { color: var(--gold); transform: scale(1.15); }
.pchar-prof { display: inline-block; width: 0.4375rem; height: 0.4375rem; border-radius: var(--r-round);
  background: var(--gold); border: 0.0625rem solid var(--gold); }
.pchar-prof.ex { background: var(--accent); border-color: var(--accent); }
.pchar-prof.off { background: transparent; border-color: var(--border); }
.pchar-stats, .pchar-hp-row { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-2) var(--sp-1) 0.3125rem; }
.pchar-shield { display: inline-flex; align-items: flex-start; justify-content: center;
  padding-top: var(--sp-3); width: 2.25rem; height: 2.125rem; font: 600 var(--fs-lg)/1.1 var(--font-display); color: var(--gold);
  border: 0.125rem solid rgba(var(--gold-soft-rgb), .6); background: rgba(0, 0, 0, .25); margin-bottom: var(--sp-1);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.pchar-stat { font: 600 var(--fs-md)/1 var(--font-display); color: var(--text);
  border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: 0.3125rem var(--sp-5); background: rgba(0,0,0,.2); }
.pchar-hpk { --mlbl-fs: 0.5625rem; }
/* Skills tab table */
.pchar-sk-h, .pchar-sk { display: grid; grid-template-columns: 1fr 2.125rem 2.75rem 2.5rem 1.375rem;
  gap: 0.3125rem; align-items: center; }
.pchar-sk-h { --mlbl-fs: 0.5625rem; padding: var(--sp-1) var(--sp-2) var(--sp-3); border-bottom: 0.0625rem solid var(--border); }
.pchar-sk { padding: 0.15625rem var(--sp-2); border-bottom: 0.0625rem solid var(--border-soft, var(--border)); font-size: var(--fs-smplus); }
.pchar-sk-n { display: inline-flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.pchar-sk-s { color: var(--muted); font: 600 var(--fs-2xs)/1 var(--font-mono); }
.pchar-sk-misc { width: 2.5rem; }
.pchar-sk-misc .ui-num { width: 100%; font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-2); }
.pchar-sk-t { font-weight: 600; color: var(--gold); text-align: right; }
/* Abilities tab underlined reference rows */
.pchar-urow { font-size: var(--fs-smplus); padding: var(--sp-2) var(--sp-2) var(--sp-3); border-bottom: 0.0625rem solid var(--border-soft, var(--border)); }
.pchar-urow[title]:not([title=""]) { cursor: help; }
/* Inventory */
.pchar-inv-h, .pchar-inv { display: grid; grid-template-columns: 1.625rem 1fr 2.25rem 2.875rem; gap: 0.3125rem; align-items: center; }
.pchar-inv-h { --mlbl-fs: 0.5625rem; padding: var(--sp-1) var(--sp-2) var(--sp-3); border-bottom: 0.0625rem solid var(--border); }
.pchar-inv { padding: 0.15625rem var(--sp-2); border-bottom: 0.0625rem solid var(--border-soft, var(--border)); font-size: var(--fs-smplus); }
.pchar-inv-q { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--muted); }
.pchar-inv-w { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--muted); text-align: right; }
.pchar-eqp { width: 1.25rem; height: 1.25rem; border-radius: var(--r-round); border: 0.0625rem solid var(--border);
  background: var(--panel); color: var(--muted); font: 600 var(--fs-micro)/1 var(--font-mono); cursor: pointer; }
.pchar-eqp.on { color: var(--gold); border-color: rgba(var(--gold-soft-rgb), .6); }
.pchar-coins, .pchar-idrow { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-2) var(--sp-1) 0.3125rem; }
.pchar-coin { font-size: var(--fs-xs); color: var(--muted); border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3) 0.4375rem; background: rgba(0, 0, 0, .18); }
.pchar-coin b { color: var(--gold); font-size: var(--fs-smplus); margin-right: var(--sp-1); }
/* Actions tab extras */
.pchar-sprow { display: flex; align-items: center; gap: var(--sp-4); }
.pchar-sprow .pc-row { flex: 1 1 auto; }
.pchar-uses { flex: none; font: 600 var(--fs-2xs)/1.2 var(--font-mono); color: var(--muted);
  border: 0.0625rem solid var(--border); border-radius: var(--r-sm); padding: var(--sp-3) 0.3125rem; }
.pchar-uses b { color: var(--gold); }
.pchar-mode { display: inline-flex; align-items: center; gap: 0.4375rem; }
.pchar-mode-l { --mlbl-fs: var(--fs-micro); --mlbl-ls: .12em; }
.pchar-modeseg button { font-size: var(--fs-2xs); padding: var(--sp-2) var(--sp-5); }

/* live-character picker on the playcard workbench */
.pclab-pick { min-width: 15rem; }

/* pchar redesign pass (recreating the sample UI faithfully) */
/* framed portrait + NAME banner identity block */
.pchar-id { display: flex; align-items: flex-start; gap: var(--sp-6); }
.pchar-portrait { flex: none; width: 3.25rem; height: 3.25rem; border-radius: var(--r-md); overflow: hidden;
  border: 0.0625rem solid rgba(var(--gold-soft-rgb), .55); box-shadow: 0 0 0 0.1875rem var(--panel), 0 0 0 0.25rem var(--border);
  background: var(--panel); display: flex; align-items: center; justify-content: center; }
.pchar-portrait img { width: 100%; height: 100%; object-fit: cover; }
.pchar-portrait-f { font: 600 var(--fs-lg)/1 var(--font-mono); color: var(--muted); }
.pchar-id-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pchar-id-top { display: flex; align-items: center; gap: var(--sp-4); }
.pchar-id-top .pchar-name { flex: 1 1 auto; min-width: 0; }
.pchar-name { font: 600 var(--fs-sub)/1.15 var(--font-display); color: var(--gold); letter-spacing: 0.0125rem;
  border-bottom: 0.0625rem solid var(--border); padding: var(--sp-1) var(--sp-1) var(--sp-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pchar-insp { flex: none; font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .1em; color: var(--muted);
  border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.pchar-insp.on { color: var(--gold); border-color: rgba(var(--gold-soft-rgb), .6); }
/* banner internals */
.pchar-ban-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchar-ban-v { color: var(--text); font-size: var(--fs-xs); }
/* labeled value columns (AC·INIT·SPEED, WND·MAX·TMP) */
.pchar-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-1); }
.pchar-col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.pchar-lbl { --mlbl-fs: 0.5625rem; --mlbl-lh: 1.25; --mlbl-ls: .12em; text-align: center; }
.pchar-valbox { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-width: 2.75rem; min-height: 1.875rem; padding: var(--sp-1) var(--sp-5); border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  background: rgba(0, 0, 0, .22); font: 600 var(--fs-md)/1 var(--font-display); color: var(--text); }
.pchar-sub { --mlbl-fs: var(--fs-micro); --mlbl-ls: .12em; margin-top: var(--sp-4); }
/* HD + death saves row */
.pchar-hd-row { display: flex; align-items: center; gap: var(--sp-5); margin-top: 0.4375rem; }
.pchar-ds { display: inline-flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.pchar-ds-col { display: inline-flex; flex-direction: column; gap: var(--sp-2); }
.pchar-ds-r { display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 600 var(--fs-micro)/1 var(--font-mono); color: var(--muted); }
.pc-ds-s, .pc-ds-f { display: inline-block; }
.pc-ds-s { border-color: rgba(80, 170, 130, .6); }
.pc-ds-f { border-color: rgba(var(--bad-soft-rgb), .6); }
/* crisp SVG d20 roll buttons (glyph dice rendered as tofu) */
.pchar-dice { display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--accent); cursor: pointer; padding: 0.0625rem;
  transition: color .12s, transform .12s; }
.pchar-dice:hover { color: var(--gold); transform: scale(1.12); }
.pchar-d20 { width: 0.9375rem; height: 0.9375rem; display: block; }
/* ability/save plaques (rail) */
.pchar-abox { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  align-content: center; column-gap: var(--sp-3);
  border: 0.0625rem solid var(--border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-4) var(--sp-3); margin: 0 0 var(--sp-3);
  background: rgba(0, 0, 0, .18); }
.pchar-abox-k { grid-column: 1 / -1; font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .1em;
  color: var(--gold); display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: 0.0625rem; }
.pchar-abox-v { font: 600 var(--fs-lg)/1 var(--font-display); color: var(--text); }
.pchar-abox-m { display: inline; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--muted); }
.pchar-abox .pchar-dice { justify-self: end; }
/* weapon rows — name + SPLIT attack/damage roll chips (the sample's core interaction) */
.pchar-wpn { display: flex; align-items: center; gap: var(--sp-4); padding: 0.21875rem var(--sp-1);
  border-bottom: 0.0625rem solid var(--border-soft, var(--border)); }
.pchar-wpn-n { flex: 1 1 auto; min-width: 0; font-weight: 600; font-style: italic; color: var(--gold);
  font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchar-chip { flex: none; font: 600 var(--fs-xs)/1.2 var(--font-mono); padding: var(--sp-3) 0.4375rem; border-radius: var(--r-md);
  cursor: pointer; background: rgba(0, 0, 0, .2); transition: filter .12s; }
.pchar-chip:hover:not(:disabled) { filter: brightness(1.3); }
.pchar-chip:disabled { opacity: .35; cursor: default; }
.pchar-chip.atk { border: 0.0625rem solid rgba(var(--accent-rgb), .65); color: var(--accent); }
.pchar-chip.dmg { border: 0.0625rem solid rgba(var(--bad-soft-rgb), .65); color: #d4695f; }
.pchar-wpn-r { flex: none; font: 600 var(--fs-micro)/1 var(--font-mono); color: var(--muted); }
/* inventory gains a Location column */
.pchar-inv-h, .pchar-inv { grid-template-columns: 1.5rem 1fr 4.375rem 2rem 2.875rem; }
.pchar-inv-l { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.pchar-eqp.on { color: var(--gold); }
.pchar-eqp:not(.on) { color: var(--ok, #4a8); }
/* carried-item actions: equip/stow toggle + drop; a play-acquired gp value / magic mark */
.pchar-inv-act { display: flex; gap: var(--sp-3); align-items: center; justify-content: flex-end; }
.pchar-drop { width: 1.25rem; height: 1.25rem; border-radius: var(--r-sm); font-size: var(--fs-2xs); }  /* icon-btn (2.2) */
.pchar-inv-val { margin-left: var(--sp-4); font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.pchar-inv-mi { margin-left: 0.3125rem; color: var(--gold); font-size: var(--fs-xs); }
.pchar-wpn-mi { margin-left: var(--sp-3); color: var(--gold); font-size: var(--fs-xs); }
/* inline base-item picker: a magic weapon/armor asks which base it enchants before it can arm you */
.pchar-inv-base { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-2) 0.4375rem 1.625rem;
  border-bottom: 0.0625rem solid var(--border-soft, var(--border)); }
.pchar-inv-base-l { --mlbl-fs: 0.5625rem; --mlbl-ls: .08em; flex: 0 0 auto; }   /* micro-label recipe via .mlbl (theme.css) */
.pchar-inv-base .sel2 { flex: 1 1 auto; min-width: 0; }

/* inventory columns adapt to the data actually present */
.pchar-inv-h.noloc:not(.nowt), .pchar-inv.noloc:not(.nowt) { grid-template-columns: 1.5rem 1fr 2rem 2.875rem; }
.pchar-inv-h.nowt:not(.noloc), .pchar-inv.nowt:not(.noloc) { grid-template-columns: 1.5rem 1fr 4.375rem 2.875rem; }
.pchar-inv-h.nowt.noloc, .pchar-inv.nowt.noloc { grid-template-columns: 1.5rem 1fr 2.875rem; }

/* pchar window chrome — resize handles on every edge/corner + reset/minimize buttons */
.pchar-winbtns { flex: none; display: inline-flex; gap: var(--sp-2); margin-left: var(--sp-1); }
.pchar-winbtn { width: 1.25rem; height: 1.25rem; border-radius: var(--r-sm); font-size: var(--fs-2xs); }  /* icon-btn (2.2) */
.pcard.pchar.pc-min { height: auto; }
.pcard.pchar.pc-min .pc-head { margin-bottom: 0; }
.pchar-rz { position: absolute; z-index: 6; }
.pchar-rz.rz-n { top: -0.25rem; left: 0.625rem; right: 0.625rem; height: 0.5rem; cursor: n-resize; }
.pchar-rz.rz-s { bottom: -0.25rem; left: 0.625rem; right: 0.625rem; height: 0.5rem; cursor: s-resize; }
.pchar-rz.rz-e { right: -0.25rem; top: 0.625rem; bottom: 0.625rem; width: 0.5rem; cursor: e-resize; }
.pchar-rz.rz-w { left: -0.25rem; top: 0.625rem; bottom: 0.625rem; width: 0.5rem; cursor: w-resize; }
.pchar-rz.rz-ne { top: -0.3125rem; right: -0.3125rem; width: 0.875rem; height: 0.875rem; cursor: ne-resize; }
.pchar-rz.rz-nw { top: -0.3125rem; left: -0.3125rem; width: 0.875rem; height: 0.875rem; cursor: nw-resize; }
.pchar-rz.rz-se { bottom: -0.3125rem; right: -0.3125rem; width: 0.875rem; height: 0.875rem; cursor: se-resize; }
.pchar-rz.rz-sw { bottom: -0.3125rem; left: -0.3125rem; width: 0.875rem; height: 0.875rem; cursor: sw-resize; }


/* ── resizable-card responsiveness: keyed to the CARD's width (container queries) ───────────
   A resized card can be narrower than any viewport breakpoint would catch, so the Main tab's
   three-column sheet and the paired rows collapse on the container, not the window. */
@container pchar (max-width: 26.875rem) {
  .pchar-main { grid-template-columns: 1fr; gap: 0; }
  /* ability/save rails lie down as 3-across plaque grids instead of tall side columns */
  .pchar-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .pchar-rail .pchar-ban { grid-column: 1 / -1; }
  .pchar-rail .pchar-abox { margin: 0; }
  .pchar-two { grid-template-columns: 1fr; }
  .pchar-hd-row { flex-wrap: wrap; }
  .pchar-ds { margin-left: 0; }
}
@container pchar (max-width: 23.125rem) {
  /* AC·INIT·SPEED stays three-across — the boxes fit, and 2-up orphans Speed on its own row */
  .pchar-sk-h, .pchar-sk { grid-template-columns: 1fr 1.875rem 2.25rem 1.375rem; }
  .pchar-sk-misc { display: none; }            /* the situational-modifier input needs room */
  .pchar-sk-h span:nth-child(3) { display: none; }
}
/* no text selection while dragging a handle (a drag would otherwise select the card's text) */
body.pchar-resizing { user-select: none; cursor: default; }
body.pchar-resizing * { cursor: inherit !important; }


/* Tab rail: words while they fit, icons when they don't. "Abilities"/"Actions" share a first
   letter and 26px is too narrow for rotated abbreviations, so the small form is an icon set
   (full label stays as title + aria-label). Keyed to the RAIL's height, so it follows resize. */
.pchar-tab-i { width: 0.9375rem; height: 0.9375rem; display: none; flex: none; }
@container pchartabs (max-height: 29.375rem) {
  .pchar-tab-l { display: none; }
  .pchar-tab-i { display: block; }
  .pchar-tab { writing-mode: horizontal-tb; padding: var(--sp-3) var(--sp-1); }
}


/* the header doubles as the card's drag bar (its buttons/inputs opt out in JS) */
.pchar-grab { cursor: grab; }
body.pchar-resizing .pchar-grab { cursor: grabbing; }
.pchar-grab .pchar-winbtn, .pchar-grab .pchar-name { cursor: pointer; }


/* ── /lab/playcard workbench: SANDBOX (left, the table surface) + PANEL (right, the controls) ─ */
.pclab { max-width: 90rem; }
.pclab-sandbox { position: relative; min-height: 43.75rem; padding: 1.625rem 1.125rem 1.125rem;
  border: 0.0625rem solid var(--border); border-radius: var(--r-2xl);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 0.75rem, transparent 0.75rem 1.5rem),
              linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.14)); }
.pclab-sandbox-l { position: absolute; top: 0.5rem; left: 0.875rem;
  --mlbl-fs: var(--fs-micro); --mlbl-ls: .14em; }
.pclab-empty { padding: 2.5rem 0 0 var(--sp-3); }
.pclab-panel { display: flex; flex-direction: column; gap: var(--sp-9); padding: var(--sp-8);
  border: 0.0625rem solid var(--border); border-radius: var(--r-2xl); background: var(--panel); min-width: 0; }
.pclab-grp { display: flex; flex-direction: column; gap: 0.4375rem; align-items: flex-start; }
.pclab-grp .vclab-var { margin: 0; }
.pclab-grp > .sel2, .pclab-grp .sel2 { width: 100%; }
.pclab-seg { flex-wrap: wrap; }
.pclab-seg button { font-size: var(--fs-xs); padding: var(--sp-3) 0.5625rem; }
.pclab-btns { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.pclab-loggrp { flex: 1 1 auto; min-height: 0; }
.pclab-log { width: 100%; flex: 1 1 auto; min-height: 5.625rem; max-height: 16.25rem; overflow-y: auto;
  border-top: 0.0625rem solid var(--border-soft, var(--border)); padding-top: 0.3125rem; }
.pclab-log code { display: block; font: var(--fs-xs)/1.5 var(--font-mono); color: var(--muted);
  border-bottom: 0.0625rem dashed var(--border-soft, var(--border)); padding: var(--sp-2) 0; overflow-wrap: anywhere; }

/* ── in-play REFERENCE: hover `?` → verbatim hint → free-floating Library card (views/_ref.js) ─ */
.ref-wrap { position: relative; display: inline-flex; align-items: center; }
.ref-wrap.inline { display: inline; }
.ref-q { position: absolute; top: -0.375rem; right: -0.4375rem; z-index: 4;
  width: 0.9375rem; height: 0.9375rem; padding: 0; border-radius: var(--r-round);
  border: 0.0625rem solid rgba(var(--accent-rgb), .6); background: var(--panel);
  color: var(--accent); font: 600 var(--fs-micro)/1 var(--font-mono); cursor: help;
  opacity: 0; transition: opacity .12s, color .12s, border-color .12s; }
.ref-wrap:hover .ref-q, .ref-wrap:focus-within .ref-q, .ref-q.on { opacity: 1; }
.ref-q:hover, .ref-q.on { color: var(--gold); border-color: var(--gold); }
/* hint bubble — the rule's opening verbatim sentence, then a way into the full record */
/* PORTALLED to <body> (views/_ref.js) — fixed, above every panel, never clipped by the card's
   scrolling body. z 80 sits above the floating cards (70) and the modal band. */
.ref-pop { position: fixed; z-index: 80; width: 16.75rem;
  display: flex; flex-direction: column; gap: 0.3125rem; padding: 0.5625rem 0.6875rem var(--sp-6);
  border: 0.0625rem solid var(--border); border-top: 0.125rem solid var(--accent); border-radius: var(--r-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-drop-md); cursor: default; }
.ref-pop-n { font: 600 var(--fs-base)/1.2 var(--font-display); color: var(--gold); letter-spacing: 0.0125rem; }
.ref-pop-t { font-size: var(--fs-sm); line-height: 1.45; color: var(--text); }
.ref-pop-more { align-self: flex-start; margin-top: 0.0625rem; padding: var(--sp-2) var(--sp-5); cursor: pointer;
  border: 0.0625rem solid var(--border); border-radius: var(--r-md); background: var(--panel);
  color: var(--accent); font: 600 var(--fs-2xs)/1.2 var(--font-mono); letter-spacing: .06em; }
.ref-pop-more:hover { color: var(--gold); border-color: rgba(var(--gold-soft-rgb), .6); }
/* a failed lookup still needs somewhere to say so */
.ref-fail { position: fixed; z-index: 70; left: 50%; top: 40%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-8) var(--sp-9);
  border: 0.0625rem solid var(--border); border-radius: var(--r-xl); background: var(--panel); font-size: var(--fs-smplus); }


/* FLOATING view card — the card IS the window: it positions itself, drags by its identity head,
   and closes from its own actions cluster (no outer container). */
.vcard.vc-float, .statblock.vc-float { z-index: 70; width: 26.25rem; max-width: calc(100vw - 1.5rem);
  box-shadow: var(--shadow-drop-lg); }
.vc-float .vc-head, .vc-float .sb-head { cursor: grab; }
.vc-float .vc-head:active, .vc-float .sb-head:active { cursor: grabbing; }
.vc-close { color: var(--muted); }
.vc-close:hover { color: var(--bad, #b33); border-color: rgba(var(--bad-soft-rgb), .6); }

/* in-prose linked terms — the word itself is the affordance (a `?` per word is unreadable) */
.ref-term-wrap { position: relative; display: inline; }
.ref-term { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  cursor: help; border-bottom: 0.0625rem dotted rgba(var(--accent-rgb), .75); }
.ref-term:hover, .ref-term:focus-visible { color: var(--accent); border-bottom-style: solid; }

/* See-also chips open the record they name (dead names are dropped upstream) */
.ref-chip-wrap { position: relative; display: inline-flex; }
.ref-chip { cursor: pointer; font: inherit; }
.ref-chip:hover { color: var(--gold); border-color: rgba(var(--gold-soft-rgb), .6); }

/* transient-write controls on the character card (editing+loot phase 1) */
.pc-hp.editable { cursor: pointer; }
.pc-hp.editable:hover { outline: 0.0625rem solid rgba(var(--gold-soft-rgb), .5); outline-offset: 0.0625rem; }
.pchar-hped { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-1);
  padding: var(--sp-4) var(--sp-5); border: 0.0625rem solid rgba(var(--gold-soft-rgb), .4); border-radius: var(--r-lg);
  background: rgba(0, 0, 0, .25); }
.pchar-hped-l { display: inline-flex; align-items: center; gap: var(--sp-3); --mlbl-ls: .08em; }   /* micro-label recipe via .mlbl (theme.css) */
.pchar-hped-l input { width: 3.25rem; }
.pchar-hped-max { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--muted); }
.pchar-insp.editable { cursor: pointer; }
.pchar-insp.editable:hover { color: var(--gold); border-color: rgba(var(--gold-soft-rgb), .6); }
.pchar-hd-spend { margin-left: var(--sp-4); padding: var(--sp-2) var(--sp-5); font-size: var(--fs-2xs); }

/* loot panel — the floating treasure window is a CARD on the ONE window primitive (views/_loot.js) */
.loot-host { position: fixed; z-index: 72; left: 50%; top: 8.5rem; transform: translateX(-50%); }
.pcard.loot-win { width: 16.25rem; max-width: calc(100vw - 1.5rem); padding: var(--sp-5) var(--sp-6) 0.5625rem; }
.pcard.loot-win .loot-scroll { min-height: 0; }
.loot-bar { display: flex; align-items: center; gap: var(--sp-5); padding-bottom: var(--sp-3); }
.loot-t { flex: 1 1 auto; min-width: 0; --mlbl-fs: 0.6875rem; --mlbl-ls: .12em; --mlbl-c: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loot-x { width: 1.25rem; height: 1.25rem; border-radius: var(--r-sm); font-size: var(--fs-2xs); }  /* icon-btn (2.2) */
.loot-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: 0.3125rem; }
.loot-row { display: flex; align-items: center; gap: var(--sp-5); }
.loot-n { flex: 1 1 auto; min-width: 0; font-size: var(--fs-base); }
.loot-coins .loot-n { color: var(--gold); font-weight: 600; }
.loot-all { margin-top: var(--sp-3); align-self: flex-start; }
.loot-empty { font-size: var(--fs-smplus); color: var(--muted); font-style: italic; padding: var(--sp-4) var(--sp-1); }
/* hoard item tags: a magic-item mark and a gem/art gp value, inline after the name */
.loot-mi { margin-left: 0.3125rem; color: var(--gold); font-size: var(--fs-xs); }
.loot-val { margin-left: 0.3125rem; font: 600 var(--fs-micro)/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); }

/* loot-feel selector on the playcard workbench */
.pclab-feel { display: inline-flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.pclab-feelseg button { text-transform: capitalize; font-size: var(--fs-2xs); padding: var(--sp-2) 0.4375rem; }
/* Skill rows: the ? flows right after the name text, centered on the row — the default corner
   badge would float detached over the Stat column (the name cell spans the whole column). */
.pchar-sk .ref-wrap { min-width: 0; }
.pchar-sk .ref-q { position: static; margin-left: var(--sp-1); flex: 0 0 auto; }
/* Named-rule rows (Abilities tab): the ? flows after the name, same as skill rows. The wrap
   spans the ROW so hovering anywhere on the line reveals the ?. */
.pchar-urow .ref-wrap { display: flex; width: 100%; min-width: 0; }
.pchar-urow .ref-q { position: static; margin-left: var(--sp-1); flex: 0 0 auto; }

/* DM loot curation controls */
.loot-coinsedit { display: flex; flex-wrap: wrap; gap: 0.3125rem; margin-bottom: var(--sp-3); }
.loot-coinl { display: inline-flex; align-items: center; gap: var(--sp-2); font: 600 var(--fs-micro)/1 var(--font-mono);
  letter-spacing: .06em; color: var(--muted); }
/* wide enough for a 6-digit hoard value (a CR17+ hoard can carry tens of thousands of coins) */
.loot-coinl input { width: 3.875rem; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
.loot-rm { width: 1.25rem; height: 1.25rem; border-radius: var(--r-sm); font-size: var(--fs-2xs); }  /* icon-btn (2.2) */
.loot-add { position: relative; margin-top: var(--sp-3); }
.loot-q { width: 100%; }
.loot-found { position: absolute; z-index: 3; top: calc(100% + 0.125rem); left: 0; right: 0; max-height: 12.5rem;
  overflow-y: auto; border: 0.0625rem solid var(--border); border-radius: var(--r-lg); background: var(--panel);
  box-shadow: var(--shadow-drop-md); }
.loot-founditem { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); width: 100%;
  text-align: left; padding: 0.3125rem 0.5625rem; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer;
  border-bottom: 0.0625rem solid var(--border-soft, var(--border)); }
.loot-founditem:hover { background: rgba(var(--accent-rgb), .12); color: var(--gold); }
.loot-foundcat { --mlbl-fs: 0.5625rem; --mlbl-ls: .06em; }
.loot-dmfoot { display: flex; gap: var(--sp-4); margin-top: var(--sp-5); }
/* Class point pools (ki / lay on hands / sorcery points / channel divinity) */
.pc-pool { margin-top: var(--sp-1); }
.pc-pool-opt { display: flex; align-items: center; gap: var(--sp-4); }
.pc-pool-opt .pc-row { flex: 1 1 auto; margin-bottom: var(--sp-3); }
.pc-pool-cost { color: var(--gold); margin-right: var(--sp-3); }

/* ── DM Play Card — the DM's table-control surface (views/_dmcard.js) ─────────────────────────
   Reuses the .pcard frame + CSec sections + .pc-btn/.pc-dm-row/.pc-foot family; .dmc-* below are
   the DM-card-specific bits (mode/clock head, initiative list, threat-clock meters). */
.pcard.dmcard { max-width: 25rem; }
.dmc-head { display: flex; flex-direction: column; gap: var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 0.0625rem solid var(--border-soft, var(--border)); margin-bottom: var(--sp-3); }
.dmc-head .pc-name { font-size: var(--fs-md); }
.dmc-headrow { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.dmc-clock { justify-content: space-between; }
.dmc-clocklbl { font-size: var(--fs-xs); color: var(--muted); font-style: italic; }
.dmc-seg { flex-wrap: wrap; }
.dmc-seg button { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-5); }
.dmc-auton .dmc-seg button { font-size: var(--fs-2xs); padding: var(--sp-1) var(--sp-4); }

.dmc-body { padding-right: var(--sp-3); }
.dmc-in { flex: 1 1 auto; min-width: 0; padding: var(--sp-3) 0.4375rem; border: 0.0625rem solid var(--border);
  border-radius: var(--r-md); background: var(--panel); color: var(--text); font: inherit; }
.dmc-guide { margin-top: var(--sp-1); }

/* the Scene release queue */
.dmc-queue { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-4); }
.dmc-qrow { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0.3125rem; border-radius: var(--r-md);
  background: rgba(var(--accent-rgb), .05); border: 0.0625rem solid var(--border-soft, var(--border)); }
.dmc-qwho { --mlbl-fs: var(--fs-micro); --mlbl-ls: normal; --mlbl-c: var(--accent); flex: none; }
.dmc-qtext { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-qx { width: 1.25rem; height: 1.25rem; border-radius: var(--r-sm); font-size: var(--fs-xs); }  /* icon-btn (2.2) */

/* Encounter */
.dmc-flow { margin-bottom: 0.3125rem; }
.dmc-init { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-4); }
.dmc-initrow { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); }
.dmc-initrow.on { background: rgba(var(--gold-rgb), .12); }
.dmc-initn { width: 2.75rem; }
.dmc-initn .ui-num { width: 100%; padding: 0.0625rem var(--sp-2); font: 600 var(--fs-xs) var(--font-mono); text-align: center; }
.dmc-side { flex: none; width: 0.4375rem; height: 0.4375rem; border-radius: var(--r-round); background: var(--muted); }
.dmc-side.dmc-foe { background: var(--bad, #b33); }
.dmc-side.dmc-ally { background: var(--ok, #4a8); }
.dmc-initnm { font-size: var(--fs-smplus); }
.dmc-togs { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.dmc-togrow { display: flex; align-items: center; gap: var(--sp-5); }
.dmc-tl { --mlbl-ls: .06em; flex: none; min-width: 3.875rem; }

/* Selected token */
.dmc-selhp { display: flex; align-items: center; gap: 0.4375rem; margin-bottom: 0.3125rem; }
.dmc-selk { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--gold); letter-spacing: .06em; }
.dmc-selv { font: 600 var(--fs-md) var(--font-mono); color: var(--text); }
.dmc-dead { color: var(--bad, #b33); border-color: var(--bad, #b33); }
.dmc-dying { color: var(--warn, #b92); border-color: var(--warn, #b92); }

/* Table roster */
.dmc-prow { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-1) 0; }
.dmc-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--r-round); background: var(--ok, #4a8); }
.dmc-dot.away { background: var(--muted); opacity: .6; }
.dmc-pnm { font-size: var(--fs-smplus); flex: none; }
.dmc-pboard { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs); color: var(--muted); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-boards { margin-top: 0.3125rem; }

/* Time & World — threat-clock meters */
.dmc-clocks { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.dmc-krow { display: flex; align-items: center; gap: 0.4375rem; }
.dmc-knm { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-kmeter { display: inline-flex; gap: var(--sp-1); flex: none; }
.dmc-kseg { width: 0.5625rem; height: 0.5625rem; border-radius: var(--r-xs); border: 0.0625rem solid var(--border); background: transparent; }
.dmc-kseg.on { background: var(--gold); border-color: var(--gold); }
.dmc-empty { font-size: var(--fs-xs); color: var(--muted); font-style: italic; padding: var(--sp-2) 0; }
.dmc-empty a { color: var(--accent); cursor: pointer; text-decoration: underline; }
/* #21: clock authoring + rated/complete markers */
.dmc-krate { margin-left: var(--sp-2); font-size: var(--fs-2xs); opacity: .7; }
.dmc-kdone { flex: none; color: var(--gold); font-weight: 700; }
.dmc-kadd { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.dmc-kin { width: 100%; background: var(--panel-2); border: 0.0625rem solid var(--border);
  border-radius: var(--r-md); color: var(--text); font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); }
.dmc-krowin { display: flex; gap: var(--sp-5); }
.dmc-kl { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xs);
  color: var(--muted); }
.dmc-loothint { padding-top: var(--sp-3); }

/* interactives P2: DM board-interactives rows */
.dmc-inters { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.dmc-irow { display: flex; align-items: center; gap: var(--sp-3); }
.dmc-inm { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-ist { color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; }
.dmc-irow .sel2 { width: 7rem; flex: none; }

/* Safety / Session lists */
.dmc-slist { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: 0.3125rem; }
.dmc-veil { color: var(--accent); border-color: var(--accent); }

/* footer answer-strip extras */
.dmc-foot-t { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs); color: var(--muted); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-foot-in { flex: 1 1 auto; min-width: 0; padding: var(--sp-2) var(--sp-4); border: 0.0625rem solid var(--border);
  border-radius: var(--r-md); background: var(--panel); color: var(--text); font: inherit; }

/* lab: give the floating loot window room beside the card */
.dmclab .pclab-sandbox { min-height: 40rem; }

/* ── DM Play Card v2 — windowed + tab rail (operator 2026-07-23) ──────────────────────────────
   Reuses the character card's window chrome (.pchar-frame/.pchar-colwrap/.pchar-rz/.pchar-grab/
   .pchar-winbtn/.pchar-resizing); .dmc-tabs is its own rail so it's independent of the char card's
   icon media query. Default width DEFINITE (the layout trap: a content-sized width would follow the
   active tab). */
.pcard.dmcard { width: 27.5rem; max-width: none; padding-right: var(--sp-4); }
@media (max-width: 520px) { .pcard.dmcard { width: 100%; } }
.pcard.dmcard.pc-min { height: auto !important; }
.pcard.dmcard.pc-min .dmc-head { border-bottom: 0; margin-bottom: 0; }

.dmc-headtags { display: inline-flex; align-items: center; gap: var(--sp-3); }
.dmc-alert { border: 0.0625rem solid var(--bad, #b33); color: var(--bad, #b33); background: rgba(179,51,51,.12);
  border-radius: var(--r-sm); padding: var(--sp-1) 0.3125rem; font: 600 var(--fs-2xs)/1 var(--font-mono); cursor: pointer; }
.dmc-alert:hover { background: rgba(179,51,51,.22); }
.dmc-xcard { border: 0.0625rem solid var(--border); background: var(--panel); color: var(--muted);
  border-radius: var(--r-sm); width: 1.375rem; height: 1.25rem; cursor: pointer; font-size: var(--fs-sm); line-height: 1; }
.dmc-xcard:hover { border-color: var(--bad, #b33); color: var(--bad, #b33); }
.dmc-xcard.on { border-color: var(--bad, #b33); color: var(--bad, #b33); background: rgba(179,51,51,.18); }

/* the body scrolls; head + footer + rail stay put */
.dmc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: var(--sp-3); }
.dmc-tabc { display: flex; flex-direction: column; gap: var(--sp-4); }
.dmc-sh { --mlbl-fs: var(--fs-micro); --mlbl-c: var(--gold); margin: var(--sp-4) 0 0.0625rem; }
.dmc-sh-n { color: var(--accent); }
.dmc-ta { flex: 1 1 auto; min-width: 0; min-height: 2.625rem; resize: vertical; padding: 0.3125rem 0.4375rem;
  border: 0.0625rem solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--text); font: inherit; }

/* vertical tab rail (right edge) — always shows the word label rotated */
.dmc-tabs { flex: none; width: 1.5rem; display: flex; flex-direction: column; gap: var(--sp-3);
  padding-left: var(--sp-3); border-left: 0.0625rem solid var(--border-soft, var(--border)); }
.dmc-tab { flex: 1 1 0; min-height: 0; writing-mode: vertical-rl; text-orientation: mixed;
  border: 0.0625rem solid var(--border); border-radius: var(--r-md); background: var(--panel); color: var(--muted);
  cursor: pointer; font: 600 var(--fs-xs)/1 var(--font-sans); letter-spacing: .04em; padding: var(--sp-4) 0.0625rem;
  transition: color .12s, border-color .12s; }
.dmc-tab:hover { color: var(--text); }
.dmc-tab.on { color: var(--gold); border-color: rgba(var(--gold-soft-rgb),.55); background: rgba(var(--gold-rgb),.10); }
.dmc-tab.nudge { border-color: rgba(179,51,51,.6); }

/* ── DM Play Card — content refinements (operator 2026-07-23): date, difficulty, split-party ──── */
.dmc-cal { font: 600 var(--fs-xs) var(--font-mono); color: var(--gold); margin-bottom: var(--sp-1); }
.dmc-diff { display: inline-block; font: 600 var(--fs-2xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
  padding: var(--sp-1) var(--sp-4); border-radius: var(--r-sm); margin-bottom: var(--sp-3); border: 0.0625rem solid var(--border); }
.dmc-diff-easy { color: var(--ok, #4a8); border-color: rgba(74,168,136,.5); }
.dmc-diff-medium { color: var(--gold); border-color: rgba(var(--gold-soft-rgb),.5); }
.dmc-diff-hard { color: var(--warn, #b92); border-color: rgba(185,153,34,.55); }
.dmc-diff-deadly { color: var(--bad, #b33); border-color: rgba(179,51,51,.55); background: rgba(179,51,51,.08); }
.dmc-boardgrp { margin-bottom: var(--sp-4); }
.dmc-boardh { --mlbl-fs: var(--fs-micro); --mlbl-ls: .08em;
  padding: var(--sp-2) 0 var(--sp-1); border-bottom: 0.0625rem solid var(--border-soft, var(--border)); margin-bottom: var(--sp-2); }
.dmc-boardn { color: var(--accent); }

/* LootPanel INLINE mode — the DM's CURATION renders as a native block in the Loot tab; the
   PLACED window (what players take from) stays a floating .loot-win. Source picker names the loot,
   so the window title-bar chrome collapses to a thin caption. */
.loot-inline { position: static; width: 100%; margin-top: var(--sp-5); overflow: visible;
  border: 0; border-top: 0.0625rem solid var(--border-soft, var(--border)); border-radius: 0; background: none; }
.loot-inline.loot-dm { width: 100%; }
.loot-inline .loot-bar { cursor: default; padding: var(--sp-4) 0 var(--sp-3); background: none; border-bottom: 0; }
.loot-inline .loot-t { font-size: var(--fs-micro); }
.loot-inline .loot-x { width: 1.125rem; height: 1.125rem; font-size: var(--fs-micro); }
.loot-inline .loot-body { padding: 0; gap: var(--sp-3); }
.loot-inline .loot-coinsedit { gap: var(--sp-3); }
.loot-inline .loot-coinl input { width: 2.875rem; }
.loot-inline .loot-dmfoot { margin-top: var(--sp-4); }
.dmc-lootlive { font: 600 var(--fs-xs) var(--font-mono); color: var(--muted); margin-top: var(--sp-4);
  padding: 0.3125rem var(--sp-5); border-radius: var(--r-md); border: 0.0625rem dashed var(--border);
  background: rgba(var(--accent-rgb), .05); }
.dmc-lootlive b { color: var(--gold); font-weight: 600; }
.dmc-lootlive.placed { color: var(--ok, #4a8); border-style: solid; border-color: rgba(74,168,136,.4); }