/* ════════════════════════════════════════════════════════════════════
   src/encounter-builder.css — Battlefield Generator, Stage 1.
   The three-column builder: ENCOUNTER (generator) │ BESTIARY (beside) │
   STATBLOCK (creature quick view). Visual system taken verbatim from the
   Claude Design handoff §2 (colors, fonts). Logic is wired to our existing
   engine; the bestiary data + full cards remain ours.

   Palette (handoff §2.1):
     dark console #26211c  fills #312a23/#3a3228/#423a31  trough #1c1810
     parchment    card #fbf8f1/#faf6ec/#fdfcf9  page #d9d5c8  toolbar #efe9dd
     clay #9a4436 (primary)  #945230 (toggle/active)  burnt #ad5e30/#8a4d2a
     sage #4e6b62/#5f7338     slate #4c5d72     ochre #c69230/#d7b154
   Fonts: Spectral (serif), Hanken Grotesk (sans/body), JetBrains Mono (mono).
   ════════════════════════════════════════════════════════════════════ */

/* collapsed builder — Generate Battle (or Collapse) hides it; the Update Battle button in the
   console brings it back with the roster intact (display:none preserves the textarea value) */
.eb-wrap.eb-collapsed{ display:none; }
.eb-wrap{
  --eb-dark:#26211c; --eb-d2:#312a23; --eb-d3:#3a3228; --eb-d4:#423a31;
  --eb-paper:#fbf8f1; --eb-paper2:#faf6ec; --eb-paper3:#fdfcf9;
  --eb-line:#e4dcc8; --eb-line2:#d9d5c8; --eb-toolbar:#efe9dd;
  --eb-clay:#9a4436; --eb-clay2:#945230; --eb-burnt:#ad5e30; --eb-burnt2:#8a4d2a;
  --eb-sage:#4e6b62; --eb-olive:#5f7338; --eb-slate:#4c5d72; --eb-ochre:#c69230;
  --eb-ink:#2a241d; --eb-ink2:#6b6253; --eb-mute:#8a8170;
  --eb-mono:'JetBrains Mono',ui-monospace,monospace;
  --eb-serif:'Spectral',Georgia,serif;
  --eb-sans:'Hanken Grotesk',system-ui,sans-serif;
  font-family:var(--eb-sans);
  display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start;
  gap:14px; width:100%; position:relative;
}
/* gen-alone state now centers naturally via flex; .eb-no-bes is retained only for JS compatibility */
.eb-intro{ flex-basis:100%; position:relative; display:flex; justify-content:center; align-items:center; gap:12px; margin:2px 2px 14px; min-height:38px; }
/* Sits over a left-anchored hero image that rotates (dark art) AND, on wider viewports, over the light cream
   page. Cream fill reads on the dark art; the tight dark outline keeps it legible on the cream. */
.eb-intro-head{ margin:0; font-family:var(--gs-font-display,'Spectral',Georgia,serif); font-weight:700; font-size:clamp(26px,3.8vw,46px); line-height:1.05; letter-spacing:-.02em; text-align:center; color:#f8efdd;
  text-shadow:0 0 1px rgba(20,12,4,1), 0 0 3px rgba(20,12,4,.95), 1px 1px 2px rgba(20,12,4,.85), -1px 1px 2px rgba(20,12,4,.85), 1px -1px 2px rgba(20,12,4,.85), -1px -1px 2px rgba(20,12,4,.85), 0 3px 16px rgba(14,8,2,.5); }
.eb-intro-head em{ font-style:italic; font-weight:600; color:#edb44f; }
.eb-intro-collapse{ position:absolute; right:46px; top:50%; transform:translateY(-50%); margin:0; }   /* pinned right; clears the ~40px tab rail */

/* Collapse Battle Builder — full-width row below the columns; a clay-tinted ghost pill, centered. Shown only while a battle board is open. */
.eb-collapse-row{ flex-basis:100%; display:flex; justify-content:center; margin:6px 0 2px; }
.eb-collapse-row[hidden]{ display:none; }   /* the display:flex above would otherwise defeat the hidden attribute */
.eb-collapse-below{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; cursor:pointer;
  background:var(--eb-paper); border:1px solid var(--eb-line2); border-radius:10px; color:var(--eb-ink2);
  font-family:var(--eb-mono); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; transition:background .14s, color .14s, border-color .14s; }
.eb-collapse-below:hover{ background:#f3eee2; color:var(--eb-clay); border-color:var(--eb-clay); }

/* ── a column shell ──────────────────────────────────────────────── */
.eb-col{ background:var(--eb-paper); border:none; border-radius:14px;
  box-shadow:0 10px 26px rgba(60,46,26,.10); overflow:hidden; display:flex; flex-direction:column;
  min-width:0; animation:ebIn .16s ease both; }
@keyframes ebIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.eb-col-bes{ width:352px; max-height:var(--eb-bes-cap, 420px); } .eb-col-stat{ width:372px; }
.eb-col-bes.eb-tall{ --eb-bes-cap:82vh; }    /* expand toggle → near-full height */
.eb-col-gen{ flex:0 1 420px; min-width:320px; }    /* encounter/generator column */
.eb-col-bes, .eb-col-stat{ flex:none; }            /* fixed-width side panels */
.eb-col[hidden]{ display:none; }                   /* (0,2,0) beats .eb-col{display:flex} so hidden truly hides */

/* ── ApproachSliver flow ─────────────────────────────────────────────────────
   Battlesmith sits centred alone; opening the Bestiary slides it left (the pair centres together)
   and fades the Bestiary in beside it; picking a creature slides the Statblock in OVER the Bestiary,
   darkening it (scrim) and leaving a thin sliver + a ‹ arrow. JS (ebLayout) owns the left/width/height
   numbers; these rules own the transitions + enter states. Box internals are untouched. Narrow stacks. */
.eb-wrap.eb-anim{ display:block; }
.eb-wrap.eb-anim .eb-col{ animation:none; }         /* the slide/fade below replaces the ebIn pop-in */
.eb-wrap.eb-anim .eb-col-gen{ position:absolute; top:0; margin:0; z-index:1; transition:left .58s cubic-bezier(.32,.82,.24,1); }
.eb-wrap.eb-anim .eb-col-bes{ position:absolute; top:0; max-height:none; z-index:2; opacity:0; transform:translateX(-10px); transition:opacity .44s ease, transform .52s cubic-bezier(.2,.7,.2,1); }
.eb-wrap.eb-anim.eb-bes-in .eb-col-bes{ opacity:1; transform:translateX(0); }
.eb-wrap.eb-anim .eb-scrim{ position:absolute; top:0; border-radius:14px; background:rgba(15,10,6,.5); opacity:0; pointer-events:none; z-index:3; transition:opacity .4s ease; }
.eb-wrap.eb-anim.eb-stat-in .eb-scrim{ opacity:1; pointer-events:auto; cursor:pointer; }
.eb-wrap.eb-anim .eb-col-stat{ position:absolute; top:0; z-index:4; opacity:0; transform:translateX(26px); transition:opacity .4s ease, transform .48s cubic-bezier(.2,.72,.2,1); }
.eb-wrap.eb-anim.eb-stat-in .eb-col-stat{ opacity:1; transform:translateX(0); }
.eb-wrap.eb-anim .eb-stat-body{ flex:1 1 auto; min-height:0; max-height:none; }   /* fill the fixed-height column and scroll within it */
.eb-scrim{ display:none; }
.eb-wrap.eb-anim .eb-scrim{ display:block; }
/* the "Collapse Battlesmith" row (Summon overlay) rides below the absolute boxes — JS sets its top */
.eb-wrap.eb-anim .eb-collapse-row{ position:absolute; margin:0; }
.eb-scrim-arrow{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:30px; height:46px; border-radius:9px; background:rgba(244,239,230,.16); border:1px solid rgba(244,239,230,.28); display:flex; align-items:center; justify-content:center; color:#f0e8dd; font-size:20px; line-height:1; box-shadow:0 4px 12px -6px rgba(0,0,0,.5); }
/* Narrow (JS toggles .eb-narrow) — fall back to a simple vertical stack, no overlay. */
.eb-wrap.eb-narrow{ display:flex; flex-direction:column; align-items:stretch; }
.eb-wrap.eb-narrow .eb-col{ position:static; width:auto; opacity:1; transform:none; }
.eb-wrap.eb-narrow .eb-scrim{ display:none; }

/* dark console header used atop each column. Round its own top corners to match the column's
   14px radius — otherwise the cream paper behind bleeds a 1px sliver above the square header. */
.eb-chead{ display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--eb-dark); color:#f3ecdd; border-radius:14px 14px 0 0; }
.eb-chead-badge{ width:30px; height:30px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#a8523f,#7e3b2c); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.eb-chead-badge.eb-sage{ background:linear-gradient(160deg,#5f7a64,#46604f); }
.eb-chead-badge.eb-slate{ background:linear-gradient(160deg,#566f86,#3f546c); }
.eb-chead-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.eb-chead-eyebrow{ font-family:var(--eb-mono); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#e8dcc4; }
.eb-chead-sub{ font-size:11.5px; color:#b7ab93; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eb-count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--eb-clay); color:#fff; font-family:var(--eb-mono); font-size:11px; font-weight:700; }
.eb-chead-x{ margin-left:auto; width:26px; height:26px; border:none; background:#3a3228; color:#cdbfa6; border-radius:7px; cursor:pointer; font-size:13px; }
/* blue "+" in the statblock header — quick-add the standard creature (or scroll to variants when Allow Ranks is on) */
.eb-stat-add{ width:26px; height:26px; flex:none; border:none; border-radius:7px; background:#3d6ea5; color:#eef4fa; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .13s; }
.eb-stat-add:hover{ background:#4a7cb4; }
.eb-chead-x:hover{ background:#473d31; color:#fff; }

/* ── ENCOUNTER (generator) column ───────────────────────────────── */
.eb-gen-toggles{ display:flex; gap:6px; padding:12px 14px; background:var(--eb-dark); border-top:1px solid #3a322833; flex-wrap:nowrap; }
.eb-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 9px; border-radius:9px; background:#312a23; cursor:pointer; user-select:none; flex:0 1 auto; min-width:0; }
.eb-toggle-lbl{ font-family:var(--eb-mono); font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#cabda4; white-space:nowrap; }
.eb-sw{ position:relative; width:34px; height:18px; border-radius:999px; background:#1c1810; transition:background .15s; flex:none; }
.eb-sw::after{ content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#8d8472; transition:transform .15s,background .15s; }
.eb-toggle.is-on .eb-sw{ background:var(--eb-clay2); }
.eb-toggle.is-on .eb-sw::after{ transform:translateX(16px); background:#fff; }

.eb-gen-body{ background:var(--eb-paper3); padding:10px 12px 14px; }
.eb-roster{ display:flex; flex-direction:column; gap:0; margin-bottom:10px; }
.eb-rrow{ display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid var(--eb-line); }
.eb-rrow:last-child{ border-bottom:none; }
.eb-rtag{ flex:none; width:46px; text-align:center; font-family:var(--eb-mono); font-size:8.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--eb-mute); border:1px solid var(--eb-line2); border-radius:5px; padding:3px 0; background:#f4f1e8; }
.eb-rname{ flex:1; min-width:0; font-size:14px; color:var(--eb-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eb-rstep{ flex:none; display:flex; align-items:center; gap:6px; }
.eb-rstep button{ width:26px; height:26px; border:1px solid var(--eb-line2); background:#f6f3ea; border-radius:7px; cursor:pointer;
  font-size:15px; color:var(--eb-ink2); display:flex; align-items:center; justify-content:center; line-height:1; }
.eb-rstep button:hover{ background:#efe9db; border-color:#cfc6b0; }
.eb-rstep .eb-rqty{ min-width:16px; text-align:center; font-family:var(--eb-mono); font-size:12px; font-weight:700; color:var(--eb-ink); }
.eb-rx{ flex:none; width:22px; height:22px; border:none; background:none; color:#c9bca3; cursor:pointer; border-radius:6px; opacity:0; font-size:13px; }
.eb-rrow:hover .eb-rx{ opacity:1; } .eb-rx:hover{ background:#f0e0d9; color:var(--eb-clay); }
/* ── Summon More Foes: committed rows, floor-locked steppers, the "already in the fight" message ── */
.eb-rrow.is-committed .eb-rname{ color:#7a6f5c; }
.eb-rrow.is-committed .eb-rx{ opacity:.4; }
.eb-rstep button.is-locked, .eb-rx.is-locked{ opacity:.4; cursor:not-allowed; }
.eb-floor-msg{ font-size:12px; font-weight:600; color:var(--eb-clay,#9a4436); background:#f7e6e0; border:1px solid #e8cec6; border-radius:7px; padding:6px 10px; margin:2px 4px 8px; }
.eb-btn[data-summon-disabled]{ opacity:.4; pointer-events:none; }
.eb-roster-empty{ padding:18px 6px; text-align:center; color:var(--eb-mute); font-size:13px; font-style:italic; }
.eb-roster-hint2{ display:block; margin-top:6px; font-style:normal; font-size:12px; opacity:.85; }
.eb-roster-hint2 b{ font-weight:700; }
/* Generate-with-no-creatures nudge: flash the empty-state red (twice) */
@keyframes eb-pulse-red{ 35%,70%{ color:#cf3a2a; } }
.eb-roster-empty.eb-pulse{ animation:eb-pulse-red .55s ease-in-out 2; }

.eb-searchrow{ display:flex; gap:8px; margin-bottom:11px; }
.eb-search{ flex:1; display:flex; align-items:center; gap:8px; padding:0 11px; height:40px; border:1px solid var(--eb-line2); border-radius:10px; background:#fff; }
.eb-search svg{ flex:none; color:var(--eb-mute); }
.eb-search input{ flex:1; border:none; outline:none; background:none; font-family:var(--eb-sans); font-size:13.5px; color:var(--eb-ink); }
.eb-search input::placeholder{ color:#aaa090; }
.eb-besbtn{ flex:none; display:inline-flex; align-items:center; gap:7px; padding:0 13px; height:40px; border-radius:10px;
  background:var(--eb-clay); border:none; color:#fff; cursor:pointer; font-family:var(--eb-mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.eb-besbtn:hover{ background:#88392c; } .eb-besbtn.is-on{ background:var(--eb-burnt2); }

.eb-actions{ display:flex; gap:6px; }
.eb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; border-radius:11px; cursor:pointer;
  font-family:var(--eb-sans); font-size:14px; font-weight:600; border:1px solid transparent; white-space:nowrap; }
.eb-btn-primary{ flex:1; background:var(--eb-clay); color:#fff; box-shadow:0 6px 16px rgba(154,68,54,.28); }
.eb-btn-primary:hover{ background:#88392c; }
.eb-btn-sec{ padding:0 12px; background:#fff; border-color:var(--eb-line2); color:var(--eb-ink); }
.eb-btn-sec:hover{ background:#f6f3ea; }
.eb-btn-ghost{ padding:0 12px; background:#fff; border-color:var(--eb-line2); color:var(--eb-mute); }
.eb-btn-ghost:hover{ background:#f0e0d9; color:var(--eb-clay); }

/* autocomplete dropdown for the search box (reuses our resolver) */
/* #ebAc is portaled to <body> (to escape the Summon overlay's transform), so it can't inherit the
   .eb-wrap-scoped builder tokens — surface the ones the dropdown needs at :root (+ dark) so it renders
   the same wherever it lives. */
:root{ --eb-sans:'Hanken Grotesk',system-ui,sans-serif; --eb-mono:'JetBrains Mono',ui-monospace,monospace;
  --eb-ink:#2a241d; --eb-ink2:#6b6253; --eb-line2:#d9d5c8; --eb-burnt2:#8a4d2a; }
body.gs-dark{ --eb-ink:#efe3c8; --eb-ink2:#bfb08a; --eb-line2:#3a3120; }
/* Fixed (not absolute) so the list escapes the Battlesmith box's overflow:hidden and can run taller
   than the box — JS positions it under the search field. */
.eb-ac{ position:fixed; z-index:1200; background:#fff; border:1px solid var(--eb-line2); font-family:var(--eb-sans);
  border-radius:10px; box-shadow:0 14px 30px rgba(40,30,16,.18); overflow-y:auto; overscroll-behavior:contain; display:none; }
.eb-ac.open{ display:block; } .eb-searchrow{ position:relative; }
.eb-ac-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; cursor:pointer; font-size:13px; color:var(--eb-ink); }
.eb-ac-item.eb-ac-var{ padding-left:26px; } .eb-ac-item.eb-ac-var .eb-ac-nm::before{ content:'\21B3'; margin-right:5px; opacity:.45; }
.eb-ac-item.sel,.eb-ac-item:hover{ background:#f4efe4; }
.eb-ac-l{ display:flex; align-items:center; gap:8px; min-width:0; }
.eb-ac-plus{ flex:none; width:18px; height:18px; border-radius:5px; background:linear-gradient(160deg,#586c84,#3f5169);
  color:#fff; font-size:14px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(40,40,60,.3); }
.eb-ac-item:hover .eb-ac-plus, .eb-ac-item.sel .eb-ac-plus{ background:linear-gradient(160deg,#6a80a0,#4a5f7d); }
.eb-ac-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eb-ac-hint{ font-family:var(--eb-mono); font-size:8.5px; letter-spacing:.05em; color:#a89a7c; padding:6px 12px; border-top:1px solid var(--eb-line2); text-transform:uppercase; }
.eb-ac-cr{ font-family:var(--eb-mono); font-size:10px; font-weight:700; color:var(--eb-burnt2); }

/* ── BESTIARY column ────────────────────────────────────────────── */
.eb-organize{ display:flex; align-items:center; gap:8px; padding:11px 14px; background:var(--eb-paper2); border-bottom:1px solid var(--eb-line); }
.eb-organize-lbl{ font-family:var(--eb-mono); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--eb-mute); }
.eb-seg{ display:inline-flex; background:#e7e0d0; border-radius:8px; padding:2px; }
.eb-seg button{ border:none; background:none; cursor:pointer; padding:5px 12px; border-radius:6px; font-family:var(--eb-mono);
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--eb-ink2); }
.eb-seg button.is-on{ background:#fff; color:var(--eb-clay); box-shadow:0 1px 3px rgba(60,46,26,.14); }
.eb-bes-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:8px 10px 12px; }
/* Specialized slim scrollbar for the bestiary + statblock scrollers — a rounded tan
   thumb on a bare track, so the panels drop the chunky default OS bar (which reads as
   a bright white strip in dark mode). Firefox uses scrollbar-*; WebKit the pseudo-elements. */
.eb-bes-scroll, .eb-stat-body{ scrollbar-width:thin; scrollbar-color:#c3b79c transparent; }
.eb-bes-scroll::-webkit-scrollbar, .eb-stat-body::-webkit-scrollbar{ width:11px; }
.eb-bes-scroll::-webkit-scrollbar-track, .eb-stat-body::-webkit-scrollbar-track{ background:transparent; margin:6px 0; }
.eb-bes-scroll::-webkit-scrollbar-thumb, .eb-stat-body::-webkit-scrollbar-thumb{
  background:#c3b79c; border-radius:999px; border:3px solid transparent; background-clip:padding-box; }
.eb-bes-scroll::-webkit-scrollbar-thumb:hover, .eb-stat-body::-webkit-scrollbar-thumb:hover{ background:#a99a7c; }
.eb-grp{ border:1px solid var(--eb-line); border-radius:10px; margin-bottom:8px; overflow:hidden; background:#fff; }
.eb-grp-head{ display:flex; align-items:center; gap:9px; padding:11px 13px; cursor:pointer; user-select:none; background:var(--eb-paper3); }
.eb-grp-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--eb-sage); }
/* Type-group glyph badge (vendored game-icons on a colour-coded disc); replaces the plain dot for mapped types. */
.eb-grp-ico{ width:22px; height:22px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 1px 2px rgba(40,28,16,.2); }
.eb-grp-ico svg{ width:13px; height:13px; color:#f5efe2; }
.eb-grp-name{ flex:1; font-size:14px; font-weight:600; color:var(--eb-ink); }
.eb-grp-count{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:18px; padding:0 6px; border-radius:999px;
  background:#ece6d8; color:var(--eb-ink2); font-family:var(--eb-mono); font-size:10px; font-weight:700; }
.eb-grp-caret{ color:var(--eb-mute); transition:transform .15s; } .eb-grp.is-open .eb-grp-caret{ transform:rotate(180deg); }
.eb-grp-body{ display:none; flex-wrap:wrap; gap:6px; padding:4px 11px 12px; } .eb-grp.is-open .eb-grp-body{ display:flex; }
.eb-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid var(--eb-line2); border-radius:8px;
  background:#fff; cursor:pointer; font-size:12.5px; color:var(--eb-ink); }
.eb-chip:hover{ background:#f6f3ea; border-color:#cfc6b0; } .eb-chip.is-active{ background:var(--eb-clay); border-color:var(--eb-clay); color:#fff; }
.eb-chip-cr{ font-family:var(--eb-mono); font-size:9.5px; font-weight:700; color:var(--eb-burnt2); } .eb-chip.is-active .eb-chip-cr{ color:#f4d3c9; }

/* ── STATBLOCK quick view column ────────────────────────────────── */
.eb-stat-body{ background:var(--eb-paper3); padding:16px 18px 18px; max-height:600px; overflow-y:auto; }
.eb-stat-namerow{ display:flex; align-items:center; gap:10px; margin-bottom:3px; }
.eb-stat-name{ font-family:var(--eb-serif); font-size:26px; font-weight:700; color:var(--eb-ink); line-height:1.05; }
.eb-stat-cr{ flex:none; font-family:var(--eb-mono); font-size:11px; font-weight:700; color:var(--eb-burnt2); border:1px solid #e3d3b7; background:#f4ead4; border-radius:6px; padding:2px 7px; }
.eb-stat-sub{ font-family:var(--eb-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--eb-mute); margin-bottom:11px; }
.eb-stat-flavor{ font-family:var(--eb-serif); font-style:italic; font-size:14.5px; line-height:1.5; color:#4a4234; margin-bottom:14px; }
.eb-stat-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:14px; }
.eb-tile{ border:1px solid var(--eb-line2); border-radius:10px; padding:9px 8px; text-align:center; background:#fff; }
.eb-tile-k{ font-family:var(--eb-mono); font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--eb-mute); }
.eb-tile-v{ font-family:var(--eb-serif); font-size:21px; font-weight:700; color:var(--eb-ink); line-height:1.1; }
.eb-tile-v.eb-tile-small{ font-size:12.5px; font-weight:600; line-height:1.25; padding-top:3px; }
.eb-stat-rows{ margin-bottom:14px; }
.eb-srow{ display:grid; grid-template-columns:88px 1fr; gap:10px; padding:6px 0; border-top:1px solid var(--eb-line); align-items:baseline; }
.eb-srow:first-child{ border-top:none; }
.eb-srow-k{ font-family:var(--eb-mono); font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--eb-mute); }
.eb-srow-v{ font-size:13px; color:var(--eb-ink); }
.eb-traits{ margin-bottom:14px; } .eb-trait{ margin-bottom:8px; }
.eb-trait-n{ font-size:13px; font-weight:700; color:var(--eb-ink); } .eb-trait-d{ font-size:12.5px; color:#5a5141; line-height:1.45; }
.eb-add{ border-top:1px solid var(--eb-line); padding-top:12px; }
.eb-add-lbl{ font-family:var(--eb-mono); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--eb-mute); margin-bottom:8px; }
.eb-add-row{ display:flex; flex-wrap:wrap; gap:8px; }
.eb-addchip{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:600; border:1px solid transparent; }
.eb-addchip-std{ background:var(--eb-clay); color:#fff; } .eb-addchip-std:hover{ background:#88392c; }
.eb-addchip-var{ background:#fff; border-color:var(--eb-line2); color:var(--eb-ink); } .eb-addchip-var:hover{ background:#f6f3ea; }
.eb-stat-empty{ padding:60px 24px; text-align:center; color:var(--eb-mute); }
.eb-stat-empty svg{ color:#cbbfa6; margin-bottom:10px; }
.eb-stat-empty-t{ font-family:var(--eb-serif); font-size:16px; color:var(--eb-ink2); margin-bottom:4px; }
.eb-stat-empty-s{ font-size:12.5px; }

/* ════════════════════════════════════════════════════════════════════
   Dark theme (body.gs-dark) — the three builder columns follow the app's
   Light/Dark toggle. The column HEADERS were always dark (--eb-dark); this
   carries the BODIES, fields, chips and borders down with them, so each panel
   reads as one dark surface instead of a light parchment card ringed by a pale
   stroke on the dark page. Palette tracks the handoff's dark console.
   ════════════════════════════════════════════════════════════════════ */
body.gs-dark .eb-wrap{
  --eb-paper:#1b1710; --eb-paper2:#211c14; --eb-paper3:#1f1a12;
  --eb-line:#362e1e; --eb-line2:#3a3120; --eb-toolbar:#211c14;
  --eb-ink:#efe3c8; --eb-ink2:#bfb08a; --eb-mute:#8f8168;
}
/* the panel outline blends into the dark surround — no pale "white stroke" */
body.gs-dark .eb-col{ border-color:#2a2418; box-shadow:0 12px 30px rgba(0,0,0,.5); }
/* fields, chips, tiles, dropdowns, secondary buttons, segments hard-coded #fff / pale tan */
body.gs-dark .eb-search,
body.gs-dark .eb-ac,
body.gs-dark .eb-grp,
body.gs-dark .eb-chip,
body.gs-dark .eb-tile,
body.gs-dark .eb-btn-sec,
body.gs-dark .eb-btn-ghost,
body.gs-dark .eb-addchip-var,
body.gs-dark .eb-rtag,
body.gs-dark .eb-seg button.is-on{ background:#2a2417; border-color:#3a3120; color:var(--eb-ink); }
body.gs-dark .eb-seg{ background:#141009; }
body.gs-dark .eb-rstep button{ background:#2a2417; border-color:#3a3120; color:var(--eb-ink2); }
body.gs-dark .eb-grp-count,
body.gs-dark .eb-stat-cr{ background:#33291a; border-color:#4a3d24; color:#e3d3ab; }
/* hovers + selected states */
body.gs-dark .eb-chip:hover,
body.gs-dark .eb-btn-sec:hover,
body.gs-dark .eb-addchip-var:hover,
body.gs-dark .eb-rstep button:hover,
body.gs-dark .eb-ac-item.sel,
body.gs-dark .eb-ac-item:hover{ background:#332b1b; border-color:#4a3d24; }
body.gs-dark .eb-btn-ghost:hover,
body.gs-dark .eb-rx:hover{ background:#3a2a20; color:#e0b3a4; }
body.gs-dark .eb-collapse-below:hover{ background:#2a2417; }
/* text that was hard-coded near-black in the light theme */
body.gs-dark .eb-stat-flavor{ color:#c9bd9f; }
body.gs-dark .eb-trait-d,
body.gs-dark .eb-srow-v{ color:var(--eb-ink2); }
body.gs-dark .eb-rrow.is-committed .eb-rname{ color:#9a8d74; }
/* the clay "already in the fight" notice → dark red-tint */
body.gs-dark .eb-floor-msg{ background:#2e1b16; border-color:#5a3228; color:#e6a58f; }
/* placeholder + faint empty-state icon */
body.gs-dark .eb-search input::placeholder{ color:#6f6552; }
body.gs-dark .eb-stat-empty svg{ color:#5a5038; }
/* specialized scrollbar → a dark tan thumb in dark mode */
body.gs-dark .eb-bes-scroll, body.gs-dark .eb-stat-body{ scrollbar-color:#4a3d24 transparent; }
body.gs-dark .eb-bes-scroll::-webkit-scrollbar-thumb, body.gs-dark .eb-stat-body::-webkit-scrollbar-thumb{ background:#463a22; }
body.gs-dark .eb-bes-scroll::-webkit-scrollbar-thumb:hover, body.gs-dark .eb-stat-body::-webkit-scrollbar-thumb:hover{ background:#5c4b2c; }