/* cogitator/army.css v68 */
/* Army Picker, Create Army flow, Army Builder layout shell, Combine Modal, Unit Card, Model Builder */

/* DevAgent - 2026-06-04
   What: v68 — .create-army__glyph-trigger-name gains line-height: 1.4. The span
         keeps overflow:hidden for its ellipsis, but its line box was too tight and
         clipped descenders (the "g" in "Choose a glyph"). No other change.
   Why:  Jérôme Gate 3 feedback — descender truncated on the glyph trigger text. */

/* DevAgent - 2026-06-04
   What: v67 — (1) Step 1 scrollbar now matches the Army Picker's exactly: the v65/v66
         body-level scrolling is replaced by PAGE scrolling. A new rule
         .create-army:has(.create-army__body) { height:auto; min-height:100dvh;
         overflow:visible; } unpins the root whenever the Step 1 body is rendered
         (Step 1 + edit-mode loading/error — never co-rendered with .army-builder),
         so the document scrolls and the scrollbar is the same window-edge document
         bar as the picker, by construction. .create-army__body reverts to the
         original centred 640px column (v64 styling). Step 2 keeps the pinned
         height:100dvh + overflow:hidden root its column scrolling requires.
         (2) .create-army__glyph-trigger-text gains gap: var(--space-1) — space
         between "Choose a glyph" and the hint line.
   Why:  Jérôme Gate 3 feedback — the Step 1 scrollbar should be styled like the
         Army list view's (the document scrollbar), plus glyph-trigger text spacing.
   Note: :has() requires Safari 15.4+/Chrome 105+ — fine for the iPad Safari and
         desktop targets. */

/* DevAgent - 2026-06-04
   What: v66 — .create-army__body scrollbar moved to the window edge. In v65 the
         body was the scroll container but was also the centred 640px column
         (max-width + margin:auto), so its scrollbar rendered beside the content.
         The body now stretches full-width (max-width / width / margin removed; a
         column-flex child stretches by default) and the 640px content column is
         centred via horizontal padding: max(var(--space-6), calc((100% - 640px)/2)).
         Same scroll behaviour as v65; the bar now sits at the right window edge,
         matching the Army Picker page scroll. Narrow viewports keep the original
         --space-6 side padding via max().
   Why:  Jérôme Gate 3 feedback — the scrollbar must sit at the window edge, not
         next to the form content. */

/* DevAgent - 2026-06-04
   What: v65 — .create-army__body gains min-height:0 + overflow-y:auto. The root
         .create-army is deliberately pinned to height:100dvh + overflow:hidden
         (v36/v37, required for Step 2 column scrolling) but the Step 1 body had no
         scroll of its own: as a flex child its implicit min-height:auto held it at
         full content height, the root clipped the overflow, and on a smaller iPad
         (landscape) the Army Details form below the fold was unreachable. The body
         now scrolls itself when content exceeds the viewport; when content fits,
         no scrollbar appears and rendering is identical. Step 2 (.army-builder)
         does not use .create-army__body and is untouched.
   Why:  Jérôme bug report — Step 1 (Army Details) could not be scrolled on a
         smaller iPad; content below the display area was inaccessible. */

/* DevAgent16 - 2026-06-02
   What: v64 — Builder header: removed the dead StepDots (.create-army__steps,
         .create-army__step-dot[*]) and inline-rename (.create-army__header-name-input[*],
         .create-army__header-pencil) rules. Added .create-army__header-menu (positions the
         shared hamburger on the header right, Step 2) + a charcoal-banner restyle of
         .army-menu__btn.
   Why:  CreateArmy.js v61 — step dots dropped; rename/glyph/delete moved into the shared menu. */

/* DevAgent16 - 2026-06-02
   What: v63 — Menu CSS renamed from .army-card__menu* to shared .army-menu* (the menu now
         lives in ArmyActions.js, reused by cards / viewer / builder). .army-menu__btn is
         self-contained (32×32 bordered, was piggybacking on .army-card__action-btn). No
         visual change on the cards. Item text stays right-aligned; danger item red.
   Why:  Shared menu extraction (ArmyPicker v23 + ArmyActions.js v1). */

/* DevAgent16 - 2026-06-02
   What: v62 — Card + picker polish (Jérôme review):
         1. Card lift on tap fixed — the :hover transform is gated behind
            @media (hover: hover), so a touch tap (which sticks :hover) no longer nudges
            the card up. Hover shadow is unchanged.
         2. Card menu items right-aligned (the dropdown sits at the card's right edge).
         3. Glyph cell gap loosened (--space-1 → --space-2) so the label sits a little
            further below the glyph; the cell already centres its content vertically.
         4. Group list no longer bolds the selected item (caused single-line names to
            reflow to two lines on select); selection now reads via background + colour.
   Why:  Jérôme review of the card menu + glyph picker. */

/* DevAgent16 - 2026-06-02
   What: v61 — Card dropdown menu was clipped by .army-card { overflow: hidden }. Removed
         that (→ overflow: visible) so the menu can extend past the card, and moved the
         rounded-corner clipping onto the pieces that need it: .army-card__strip gets top
         corner radii and .army-card__icon-slot gets a bottom-left radius. Visually
         identical card; the menu now overflows instead of being cut off. (A fixed/portal
         menu was avoided because .army-card:hover applies a transform, which would become
         the containing block and re-clip a fixed menu.)
   Why:  Jérôme review — the bottom half of the card menu was hidden behind the card. */

/* DevAgent16 - 2026-06-02
   What: v60 — Army card management is now a dropdown menu (ArmyPicker.js v22), not a
         combined modal. Removed the dead .manage-army-modal* rules; added
         .army-card__menu (dropdown wrapper / items / --danger) and a .glyph-picker__footer
         (Cancel / Save, reusing .ap-modal__cancel / __confirm). .army-card__menu-btn /
         __menu-bars and .create-army__glyph-trigger are retained (the latter for the
         upcoming CreateArmy Step 1 trigger).
   Why:  Jérôme review — hamburger → menu (Edit Name / Change Glyph / Delete / Duplicate),
         each opening its own focused modal; the glyph picker gains Cancel / Save. */

/* DevAgent16 - 2026-06-02
   What: v59 — Glyph label font reduced (--text-sm → --text-xs, line-height 1.15) so long
         names (e.g. "Adeptus Astartes") fit on two lines without ellipsis truncation. The
         2-line clamp is kept only as a safety so a label can never overflow the fixed
         106px cell. No other change.
   Why:  Jérôme review — long labels were being truncated with "…"; shrink to fit instead. */

/* DevAgent16 - 2026-06-02
   What: v58 — Glyph picker tuning (Jérôme review):
         1. Super-group tabs bumped to 18px (was --text-base / 15px).
         2. Glyph cells shrunk (--gp-cell-h 128 → 106px; img 56 → 48px; tighter padding/
            gap) while the grid box height is pinned (--gp-grid-h now a literal 440px,
            unchanged from the old 3-row total) so ~3½ rows show — a partial row cues
            that more glyphs scroll below.
         3. Group buttons now wrap to two lines for long faction names
            (.glyph-picker__group white-space nowrap → normal) since the sidebar width
            is fixed; the mobile horizontal strip keeps nowrap.
   Why:  Jérôme review of the picker. */

/* DevAgent16 - 2026-06-02
   What: v57 — Army card management consolidation (ArmyPicker.js v21):
         1. Removed the now-dead glyph pencil rules (.army-card__icon-edit + its
            reveal/hover/touch rules) and reverted .army-card__icon-slot to no longer be
            position:relative (nothing overlays it now).
         2. Added the card hamburger: .army-card__menu-btn (reuses .army-card__action-btn
            sizing) + .army-card__menu-bars (CSS-drawn three-bar icon, currentColor so it
            inherits the button's hover colour, like .nav-menu__bars).
         3. Added .manage-army-modal styles: wider panel, flex header with a close ×,
            spacing above the glyph trigger, and the footer action buttons
            (.manage-army-modal__btn with --delete [red] / --duplicate [amber] /
            --save [green], based on the existing .ap-modal__confirm look). The glyph
            trigger reuses .create-army__glyph-trigger (added v54).
   Why:  Jérôme review — one hamburger → a management modal (name + glyph + Delete /
         Duplicate / Save) replaces the per-card rename/delete/pencil affordances. */

/* DevAgent16 - 2026-06-02
   What: v56 — Super-group tabs sized down a step (--text-lg → --text-base) and forced
         onto a single row (.glyph-picker__tabs no longer wraps; scrolls horizontally if
         ever too narrow; tabs no-wrap + flex:0 0 auto). Still larger than the original
         v54 size, just not large enough to wrap the four labels. No JS change.
   Why:  Jérôme review — at --text-lg the four labels wrapped to a second row. */

/* DevAgent16 - 2026-06-02
   What: v55 — Glyph picker layout tuning (Jérôme review):
         1. The glyph grid is now a FIXED three-row height (locked via explicit
            --gp-cell-h / --gp-gap / --gp-pad on .glyph-picker), scrolling internally
            beyond three rows instead of the modal resizing to content. The group list
            matches that height and scrolls independently.
         2. Super-group tabs (.glyph-picker__tab) enlarged — bigger font + taller
            padding for easier finger tapping.
         3. Group buttons (.glyph-picker__group) bumped a step in font + padding;
            groups column widened slightly to suit.
         No JS change — GlyphPicker.js stays v1.
   Why:  Jérôme review of the Gate 3 render. */

/* DevAgent16 - 2026-06-02
   What: v54 — Army glyph picker styles (.glyph-picker* — backdrop, panel, header,
         super-group tabs, group list, glyph grid, selected highlight) appended at the
         end of the file. Plus the army-card icon edit affordance: .army-card__icon-slot
         gains `position: relative` (the ONLY change to an existing rule) so the new
         .army-card__icon-edit pencil can be absolutely positioned in the slot's corner;
         the slot reveals the pencil on hover/focus. The Step 1 glyph trigger reuses the
         existing .create-army__field / .create-army__label idiom plus a small
         .create-army__glyph-trigger button. Tokens only — no new colours.
   Why:  DevAgent16 — the glyph picker (super-group → group → glyph grid) needs styling,
         army cards need an edit pencil over the icon, and Step 1 needs a glyph trigger. */

/* DevAgent15 - 2026-06-02
   What: v53 — Hamburger now drawn as three CSS bars (.nav-menu__bars) instead of
         the ☰ character. The glyph's ink sits high in its em box and never centred
         reliably across fonts; the drawn bars are symmetric around the flex centre,
         so the icon is always vertically centred. The font-size/line-height/padding
         glyph rules are removed. ArmyPicker.js v19 / Codex.js v4 render the span.
   Why:  Jérôme review — hamburger still wasn't vertically centred. */

/* DevAgent15 - 2026-06-02
   What: v52 — Hamburger glyph enlarged (--text-xl → --text-2xl) and optically
         re-centred in its square button (2px padding-top pulls the ☰ ink to the
         visual centre; flex centring alone left it sitting slightly high).
   Why:  Jérôme review — make ☰ a bit bigger and vertically centred. */

/* DevAgent15 - 2026-06-02
   What: v51 — Global hamburger nav styles (.nav-menu, .nav-menu__hamburger,
         .nav-menu__wordmark[-sep], .nav-menu__dropdown, .nav-menu__item[--active]).
         Inserted after the Army Picker header block, before the picker body.
         Faction-independent charcoal chrome; the dropdown is absolutely
         positioned under the hamburger (.nav-menu is the positioning context).
         No existing rule changed.
   Why:  DevAgent15 — the hamburger nav replaces the static "Cogitator" wordmark
         on the two landing pages (ArmyPicker shows ARMIES, Codex shows DATASHEETS). */

/* DebugAgent2 - 2026-06-02
   What: v50 — Create-army header centring reworked to an overlay model. The header is
         now position:relative; the title/name block lives in a full-width
         absolutely-positioned centring layer (.create-army__header-center, inset:0,
         flex-centred, pointer-events:none) so it centres against the whole header
         regardless of the back button / StepDots widths. The back button is
         position:absolute on the left and StepDots (.create-army__steps) on the right,
         both z above the layer with pointer-events:auto. The name block re-enables
         pointer-events. A symmetric horizontal safe-zone keeps a long title clear of
         the controls. The v49 .create-army__header-side flex zones are removed.
   Why:  Jérôme review — the wider button broke flex-zone centring; taking the
         controls out of flow removes their impact on the title. */

/* DebugAgent2 - 2026-06-02
   What: v49 — Create-army back button restyled as a solid button mirroring the
         Army Builder "SAVE ARMY" button (.ab-col-3__save-btn): amber fill,
         --text-inv text, heading font, uppercase + heading-tracking, --radius
         corners, --shadow-sm. Sized to content (auto width, 36px tall, horizontal
         padding) rather than full-width — it sits in the header's left zone. Hover
         darkens to --amber-dim. The previous transparent text-link styling is replaced.
   Why:  Jérôme review — the back button should read as a button, consistent with
         the app's primary button styling. */

/* DebugAgent2 - 2026-06-02
   What: v48 — Create-army back button now carries a context-dependent text label,
         so it is no longer icon-only: font-size dropped to --text-base,
         white-space:nowrap, horizontal padding added, fixed min-width removed
         (min-height kept as tap-height floor). The header is now a three-zone flex
         row — left (.create-army__header-side--left), centred title/name, right
         (--right, wrapping StepDots) — with both sides flex:1 1 0 so the title
         stays centred regardless of the back button's width. .create-army__header-title
         and .create-army__header-name dropped flex:1 in favour of flex:0 1 auto.
   Why:  DebugAgent2 mission — visible back-button label; centring must survive a
         variable-width button. */

/* DevAgent13 - 2026-06-01
   What: v47 — Step 1 faction/allegiance selects: closed control is single-line and
         clips with an ellipsis (no wrapping); option text never wraps. Added a
         max-width:560px media query that stacks the .create-army__row--details rows
         so each select gets the full body width on narrow viewports.
   Why: Long faction labels (e.g. "Chaos Space Marines [N/A]") were cramped in the
        two-column grid; this keeps them readable without breaking the 2×2 desktop
        layout. */

/* DevAgent13 - 2026-06-01
   What: v46 — Added .create-army__select option[data-na="true"] — dims faction
         options for factions with no units (status='empty'), shown in Step 1 as
         "{label} [N/A]". Uses color only (not background): option background is
         unreliable across WebKit/Safari. The new Super-Faction dropdown reuses the
         existing .create-army__field / .create-army__label / .create-army__select
         styles, so it needs no new rules.
   Why: DevAgent13 — Step 1 now lists all factions including unavailable ones, which
        must read as visually distinct but still selectable. */

/* DevAgent6 - 2026-05-28
   What: v45 — Added .combine-modal__option--selected (amber highlight for
         selected option). Added .combine-modal__ok:disabled (dimmed when no
         option selected yet).
   Why: CombineModal now uses a selection state — selected option needs visual
        feedback; Ok must be visually disabled until a selection is made. */

/* DevAgent4 - 2026-05-27
   What: v40 — Per-column CSS split. All column content styles moved to
         army-builder-col1.css, army-builder-col2.css, army-builder-col3.css.
         army.css now owns only: Army Picker, Create Army chrome (Steps 1+3),
         Army Builder layout shell (.army-builder, .ab-columns, .ab-col, .ab-col--1/2/3),
         Combine Modal, Unit Card (for DevAgent5), Model Builder, Spinner.
         Removed from this file: all .uf-*, .ab-filter-panel, .ab-view-toggle,
         .ab-col__header/filters/list/status, .ub-card, .ab-col-2__*, .ab-col-3__*.
   Why: Each column file is independently owned by a different agent.
        army.css contains only shared/structural styles that no column agent touches. */


/* DevAgent2 - 2026-05-26
   What: v1 — initial implementation */

/* DevAgent4 - 2026-05-27
   What: v39 — Two more scroll fixes.
         (1) .army-builder: added min-height:0. Every node in a flex column chain
             must have min-height:0 to pass height constraints down. Without it
             .army-builder won't shrink below its content size, so .ab-columns
             never gets a finite height to constrain the columns against.
         (2) .ub-card: added flex-shrink:0. Cards are flex items inside
             .ab-col__list (a flex column). Without flex-shrink:0 flexbox can
             compress each card vertically — the cards render at wrong height
             and the list still doesn't scroll correctly.
   Why: min-height:0 must be on every ancestor in the chain, not just the leaves.
        flex-shrink:0 on list items means "render at natural size, let the
        container scroll" — the standard pattern for scrollable item lists. */

/* DevAgent4 - 2026-05-27
   What: v38 — Column scroll fix. flex: 0 0 25% on column size declarations had
         flex-shrink:0, preventing columns from shrinking below their content height.
         Changed to flex: 1 1 25% (shrink allowed) so the column is bounded by the
         container and .ab-col__list can actually scroll. Same fix applied to all
         three columns — this is the correct pattern for all scrollable columns.
   Why: flex: 0 0 N% means "never shrink" — the column would expand past its
        container rather than constraining its children to scroll. */

/* DevAgent4 - 2026-05-27
   What: v37 — Two fixes for iPad Safari viewport height and column scrolling.
         (1) .create-army: 100vh → 100dvh. dvh (dynamic viewport height) accounts
             for Safari's address bar and tab chrome; 100vh on iOS includes that
             chrome in the measurement but content is still obscured by it.
         (2) .ab-col and .ab-col__list: added min-height:0. Without it, flexbox
             refuses to shrink items below their content size, so cards were
             compressed vertically instead of the list scrolling.
   Why: iOS Safari reports 100vh as the full screen including its own UI chrome.
        dvh dynamically tracks the actual visible area. min-height:0 is the
        standard fix to allow flex children to scroll rather than squish. */

/* DevAgent4 - 2026-05-27
   What: v36 — .create-army changed from min-height:100vh to height:100vh +
         overflow:hidden. This bounds the flex chain so columns never exceed the
         viewport; each column scrolls independently via its own overflow-y:auto.
   Why: min-height lets the page grow taller than the screen. height:100vh fixes
        the root height so the contained flex children fill exactly the viewport. */

/* DevAgent4 - 2026-05-27
   What: v35 — Faction toggle pill replaced with inline panel (same pattern as
         Filter/Abilities). Removed dead .ab-filter-toggle and variants.
   Why: All three filter buttons now use identical .uf-btn + .ab-filter-panel pattern. */

/* DevAgent4 - 2026-05-27
   What: v34 — Filter popovers replaced with inline panel.
         Removed: .uf-popover, .uf-popover--abilities, .uf-btn-wrap (position:relative).
         Added: .ab-filter-panel, .ab-filter-panel__header, .ab-filter-panel__title,
                .ab-filter-panel__clear. .uf-btn gets .uf-btn--open modifier.
                .uf-btn__chevron for the ▴/▾ indicator.
   Why: Inline panel is simpler and more reliable in a fixed-width column layout. */

/* DevAgent4 - 2026-05-27
   What: v33 — Three-column army builder layout (25/50/25).
         Added: .army-builder, .ab-columns, .ab-col, .ab-col--1/2/3,
                .ab-col__header/filters/list/status, .ab-filter-toggle,
                .ab-view-toggle, .ub-card, .ab-col-2__placeholder,
                .ab-col-3__header/body/footer and children.
         Removed: Dead unit-browser__ styles (replaced by ab-col/ub-card),
                  .create-army__body--wide (Step 2 is now full-screen .army-builder),
                  .create-army__header-center/army-name (never rendered).
         Kept: All unit-card styles (used by UnitCard.js, referenced by DevAgent5).
   Why: Foundation for full army building experience per spec. */

/* ============================================================
   ARMY PICKER — Full screen layout
   ============================================================ */

.army-picker {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ── Header bar ── */
.army-picker__header {
  background: var(--banner);
  color: var(--banner-text);
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  flex-shrink: 0;
}

.army-picker__wordmark {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--banner-text);
}

.army-picker__account {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.army-picker__display-name {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
}

.army-picker__logout-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.army-picker__logout-btn:hover {
  border-color: rgba(255,255,255,0.6);
  color: var(--text-inv);
}

/* ── Global nav — hamburger menu (DevAgent15 - 2026-06-02) ──
   Lives in the charcoal header bar of the two landing pages (ArmyPicker,
   Codex). Faction-independent: always uses --banner-text / charcoal chrome.
   The dropdown is absolutely positioned under the hamburger; .nav-menu is the
   positioning context. */
.nav-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-menu__hamburger {
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--touch-target);
  height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.nav-menu__hamburger:hover {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
}

/* Hamburger glyph drawn as three bars — perfectly centred regardless of font
   metrics (a ☰ glyph's ink sits high in its em box and never centres reliably).
   The middle bar is flex-centred in the button; ::before/::after are symmetric. */
.nav-menu__bars {
  position: relative;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--banner-text);
}
.nav-menu__bars::before,
.nav-menu__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--banner-text);
}
.nav-menu__bars::before { top: -7px; }
.nav-menu__bars::after  { top: 7px; }

.nav-menu__wordmark {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--banner-text);
}

.nav-menu__wordmark-sep {
  opacity: 0.4;
  font-weight: 400;
  margin: 0 var(--space-2);
}

.nav-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-above);
  min-width: 180px;
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.nav-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-menu__item:hover {
  background: var(--surface-lo);
}

.nav-menu__item--active {
  background: var(--amber-light);
  color: var(--amber-dim);
}

/* ── Body ── */
.army-picker__body {
  flex: 1;
  padding: var(--space-8) var(--space-6);
  max-width: var(--app-max-width);
  width: 100%;
  margin: 0 auto;
}

.army-picker__section-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-hi);
  margin-bottom: var(--space-5);
}

.army-picker__section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.army-picker__section-row .army-picker__section-title {
  margin-bottom: 0;
}

.army-picker__sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.army-picker__sort-label {
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.army-picker__sort-select {
  height: 36px;
  padding: 0 var(--space-8) 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  transition: border-color var(--transition-fast);
  min-height: var(--touch-target);
}

.army-picker__sort-select:focus {
  outline: none;
  border-color: var(--amber);
}

/* ── Filter controls ── */
.army-picker__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.army-picker__filter-wrap {
  position: relative;
}

.army-picker__filter-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  min-height: var(--touch-target);
}

.army-picker__filter-btn:hover {
  border-color: var(--border-hi);
  color: var(--text);
}

.army-picker__filter-btn--active {
  border-color: var(--amber);
  color: var(--amber-dim);
  background: var(--amber-light);
}

.army-picker__filter-badge {
  background: var(--amber);
  color: var(--text-inv);
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 1px 6px;
  line-height: 1.4;
}

.army-picker__filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-above) - 1);
}

.army-picker__filter-popover {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-above);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-4);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.army-picker__filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.army-picker__filter-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-hi);
}

.army-picker__filter-clear {
  background: transparent;
  border: none;
  font-size: var(--text-sm);
  color: var(--amber-dim);
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}

.army-picker__filter-clear:hover { text-decoration: underline; }

.army-picker__filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.army-picker__filter-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.army-picker__filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 640px;
  margin: 0 auto var(--space-3);
}

.army-picker__filter-chip {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--amber-light);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--amber-dim);
  font-weight: 600;
}

.army-picker__filter-chip button {
  background: transparent;
  border: none;
  color: var(--amber-dim);
  cursor: pointer;
  font-size: var(--text-base);
  padding: 0 2px;
  line-height: 1;
  display: flex;
  align-items: center;
}

.army-picker__filter-chip button:hover { color: var(--amber); }

/* ── Empty state ── */
.army-picker__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  gap: var(--space-6);
}

.army-picker__empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-lo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text-dim);
}

.army-picker__empty-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-hi);
  margin: 0;
}

.army-picker__empty-sub {
  font-size: var(--text-base);
  color: var(--text-dim);
  margin: 0;
  max-width: 320px;
}

/* ── Army grid ── */
.army-picker__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Create new army button ── */
.army-picker__create-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--amber);
  color: var(--text-inv);
  border: none;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  padding: 0 var(--space-6);
  height: 48px;
  border-radius: var(--radius);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: background var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.army-picker__create-btn:hover {
  background: var(--amber-dim);
}

.army-picker__create-btn--card {
  background: transparent;
  color: var(--text-dim);
  border: 2px dashed var(--border);
  height: auto;
  min-height: 120px;
  width: 100%;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
  box-shadow: none;
  padding: var(--space-6);
}

.army-picker__create-btn--card:hover {
  background: var(--amber-light);
  border-color: var(--amber);
  color: var(--amber-dim);
}

.army-picker__create-btn--card .create-btn__plus {
  font-size: var(--text-2xl);
  line-height: 1;
}

/* ── Loading / error ── */
.army-picker__loading,
.army-picker__error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  color: var(--text-dim);
  font-size: var(--text-base);
  gap: var(--space-4);
}

.army-picker__error { color: var(--red); }

/* ============================================================
   ARMY CARD
   ============================================================ */

.army-card {
  border-radius: var(--radius-lg);
  /* DevAgent16 v61: was overflow:hidden (clipped the dropdown menu). Corner clipping is
     now handled per-piece (strip top radii + icon-slot bottom-left radius) so the menu
     can overflow the card. */
  overflow: visible;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.army-card:hover {
  box-shadow: var(--shadow);
}

/* DevAgent16 v62: only lift on real hover devices — a touch tap sticks :hover and was
   nudging the card up when the hamburger was tapped. */
@media (hover: hover) {
  .army-card:hover {
    transform: translateY(-2px);
  }
}

.army-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.army-card__strip {
  height: 8px;
  flex-shrink: 0;
  /* DevAgent16 v61: round top corners to match the card (card no longer clips). */
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.army-card__content {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 120px;
}

.army-card__icon-slot {
  width: 150px;
  flex-shrink: 0;
  background: var(--surface-lo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
  /* DevAgent16 v61: round bottom-left to match the card (card no longer clips). */
  border-bottom-left-radius: var(--radius-lg);
}

.army-card__icon-slot:hover {
  background: var(--surface-lo);
  opacity: 0.85;
}

.army-card__icon-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 1;
}

.army-card__body {
  padding: var(--space-4) var(--space-5);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.army-card__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.army-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-hi);
  line-height: 1.1;
  margin: 0;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.army-card__name:hover {
  color: var(--amber-dim);
}

.army-card__actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.army-card__action-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--border-hi);
  border-radius: var(--radius);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
  min-height: unset;
}

.army-card__action-btn:hover {
  background: var(--surface-lo);
  border-color: var(--border-hi);
  color: var(--text);
}

.army-card__action-btn--danger:hover {
  background: var(--red-light);
  border-color: var(--red);
  color: var(--red);
}

.army-card__faction {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.army-card__meta {
  display: flex;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.army-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.army-card__meta-label {
  font-size: var(--text-xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.army-card__meta-value {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--heading-weight);
  color: var(--text-hi);
}

.army-card__meta-value--faction {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================================
   ARMY PICKER MODALS — Rename + Delete
   ============================================================ */

.ap-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-6);
}

.ap-modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.ap-modal__header {
  background: var(--banner);
  color: var(--banner-text);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
}

.ap-modal__header--danger {
  background: var(--red);
}

.ap-modal__body {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ap-modal__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.ap-modal__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ap-modal__input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.ap-modal__desc {
  font-size: var(--text-base);
  color: var(--text);
  margin: 0;
}

.ap-modal__warning {
  font-size: var(--text-sm);
  color: var(--red);
  font-weight: 600;
  margin: 0;
}

.ap-modal__error {
  font-size: var(--text-sm);
  color: var(--red);
  padding: var(--space-2) var(--space-3);
  background: var(--red-light);
  border-radius: var(--radius);
  border: 1px solid rgba(139,26,26,0.2);
}

.ap-modal__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.ap-modal__cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 0 var(--space-5);
  height: 44px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  min-height: var(--touch-target);
}

.ap-modal__cancel:hover {
  border-color: var(--border-hi);
  color: var(--text);
}

.ap-modal__confirm {
  background: var(--amber);
  color: var(--text-inv);
  border: none;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  padding: 0 var(--space-6);
  height: 44px;
  border-radius: var(--radius);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: background var(--transition-fast);
}

.ap-modal__confirm:hover:not(:disabled) {
  background: var(--amber-dim);
}

.ap-modal__confirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ap-modal__confirm--danger {
  background: var(--red);
}

.ap-modal__confirm--danger:hover:not(:disabled) {
  background: var(--red-dim);
}

/* ============================================================
   CREATE ARMY — Multi-step flow chrome (Steps 1 + 3)
   ============================================================ */

.create-army {
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.create-army__header {
  background: var(--banner);
  color: var(--banner-text);
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  flex-shrink: 0;
  position: relative;
}

.create-army__back-btn {
  position: absolute;
  left: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--amber);
  color: var(--text-inv);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.create-army__back-btn:hover {
  background: var(--amber-dim);
}

/* Header side zones — left (back) and right (StepDots). Both flex:1 1 0 so they
   take equal width regardless of content, keeping the title/name centred. */
/* Full-width centring layer — holds the title/name block, centred against the whole
   header. Absolutely positioned over the header; pointer-events:none so its empty
   areas don't block clicks. The symmetric horizontal safe-zone reserves room for the
   controls (back button / StepDots) layered on top. */
.create-army__header-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-48, 160px);
  pointer-events: none;
}

.create-army__header-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--banner-text);
  flex: 0 1 auto;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
}

/* Army name + pencil in global header (Step 2) */
.create-army__header-name {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  pointer-events: auto;
}

/* DevAgent16 v64: hamburger menu on the header right (Step 2), mirroring the back
   button. The shared .army-menu (ArmyActions.js) sits inside this positioned wrapper. */
.create-army__header-menu {
  position: absolute;
  right: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* Restyle the shared menu button for the charcoal banner (light-on-dark). The
   descendant selector (0,2,0) outranks the base .army-menu__btn regardless of which
   stylesheet loads first. */
.create-army__header-menu .army-menu__btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--banner-text);
}

.create-army__header-menu .army-menu__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--banner-text);
}

/* Body — used by Step 1 and Step 3 */
/* DevAgent v67: Step 1 now scrolls the PAGE, not the body. When the root contains
   the body (Step 1 / edit-mode loading & error — never rendered with the Step 2
   .army-builder), the root unpins from 100dvh so the document scrolls — giving the
   exact same window-edge scrollbar as the Army Picker by construction. Step 2 still
   matches the base .create-army rule (height:100dvh + overflow:hidden), which its
   internal column scrolling requires. Replaces the v65/v66 body-level scroll. */
.create-army:has(.create-army__body) {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

.create-army__body {
  flex: 1;
  padding: var(--space-8) var(--space-6);
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.create-army__step-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-hi);
  margin: 0 0 var(--space-6) 0;
}

/* Form fields */
.create-army__field {
  margin-bottom: var(--space-5);
}

.create-army__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.create-army__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.create-army__input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.create-army__input--locked {
  background: var(--surface-lo);
  color: var(--text-dim);
  cursor: not-allowed;
  border-color: var(--border);
}

.create-army__input--locked:focus {
  border-color: var(--border);
  box-shadow: none;
}

.create-army__select-loading {
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-style: italic;
  padding: var(--space-3) 0;
}

.create-army__input::placeholder {
  color: var(--border-hi);
  font-style: italic;
  opacity: 1;
}

.create-army__select {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.create-army__select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.create-army__select--placeholder {
  color: var(--border-hi);
  font-style: italic;
}

.create-army__select option[value=""] {
  color: var(--border-hi);
  font-style: italic;
}

/* DevAgent13 - 2026-06-01
   N/A (status='empty') faction options shown dimmed. option background colour is
   unreliable cross-browser, so colour only. */
.create-army__select option[data-na="true"] {
  color: var(--text-dim);
}

/* DevAgent13 - 2026-06-01 (v47)
   Faction/Allegiance labels can be long (e.g. "Chaos Space Marines [N/A]" or an
   incomplete faction marked with " *"). Keep the closed control on one line — clip
   with an ellipsis rather than wrapping — and never wrap option text. The native
   option popup sizes itself to the longest option, so it shows full names. */
.create-army__select {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-army__select option {
  white-space: nowrap;
}

/* On narrow viewports the two-column Step 1 detail rows get cramped, clipping long
   faction names. Stack them so each select takes the full body width. The 2×2 grid
   is preserved on tablet/desktop. */
@media (max-width: 560px) {
  .create-army__row--details {
    flex-direction: column;
    gap: var(--space-5);
  }
}

/* Format grid */
.format-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.format-grid {
  display: grid;
  gap: var(--space-3);
}

.format-grid--row {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.format-option {
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  background: var(--surface);
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  min-height: var(--touch-target);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.format-option:hover       { border-color: var(--amber); background: var(--amber-light); }
.format-option--selected   { border-color: var(--amber); background: var(--amber-light); }

.format-option__name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-hi);
}

.format-option--selected .format-option__name { color: var(--amber-dim); }

.format-option__desc {
  font-size: var(--text-xs);
  color: var(--text-dim);
}

/* Footer / buttons */
.create-army__footer {
  margin-top: var(--space-8);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.create-army__next-btn {
  background: var(--amber);
  color: var(--text-inv);
  border: none;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  padding: 0 var(--space-8);
  height: 48px;
  border-radius: var(--radius);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: background var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.create-army__next-btn:hover:not(:disabled) { background: var(--amber-dim); }
.create-army__next-btn:disabled             { opacity: 0.45; cursor: not-allowed; }

.create-army__cancel-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 0 var(--space-6);
  height: 48px;
  border-radius: var(--radius);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.create-army__cancel-btn:hover {
  border-color: var(--border-hi);
  color: var(--text);
}

.create-army__error-msg {
  color: var(--red);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--red-light);
  border-radius: var(--radius);
  border: 1px solid rgba(139,26,26,0.2);
}

.create-army__row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.create-army__field--grow {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}


/* ============================================================
   ARMY BUILDER — Step 2 three-column layout
   DevAgent4 - 2026-05-27
   ============================================================ */

/* Root wrapper — fills the flex column below the header */
.army-builder {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* Three-column container — fills remaining height */
.ab-columns {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Base column */
.ab-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--bg);
}

.ab-col:last-child {
  border-right: none;
}

/* Column proportions — 25 / 50 / 25
   flex: 1 1 N% — the middle 1 (flex-shrink:1) is critical: it allows the column
   to be bounded by its container so inner overflow-y:auto actually scrolls. */
.ab-col--1 { flex: 1 1 25%; width: 25%; max-width: 25%; border-right: 2px solid #444444; }
.ab-col--2 { flex: 1 1 50%; width: 50%; max-width: 50%; background: var(--surface); }
.ab-col--3 { flex: 1 1 25%; width: 25%; max-width: 25%; background: var(--surface); }

/* ============================================================
   UNIT CARD — used by UnitCard.js (DevAgent5 will render in Column 2)
   ============================================================ */

.unit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.unit-card:hover { border-color: var(--border-hi); box-shadow: var(--shadow-sm); }

.unit-card__photo {
  width: 120px;
  flex-shrink: 0;
  background: var(--surface-lo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--border);
  align-self: stretch;
}

.unit-card__photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unit-card__photo--fallback { background: var(--surface-lo); min-height: 80px; }
.unit-card__photo-icon { font-size: 1.5rem; color: var(--border-hi); user-select: none; }

.unit-card__info {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.unit-card__header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.unit-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-hi);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unit-card__meta { display: flex; gap: var(--space-3); align-items: center; flex-shrink: 0; }
.unit-card__models { font-size: var(--text-sm); color: var(--text-dim); }

.unit-card__points {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--heading-weight);
  color: var(--amber-dim);
  white-space: nowrap;
}

.unit-card__points--none {
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: normal;
}

.unit-card__stats {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: -6px;
  margin-bottom: 4px;
}

.unit-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.unit-card__stat-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.unit-card__stat-value {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--banner);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--heading-weight);
  color: var(--text-inv);
  line-height: 1;
}

.unit-card__weapon-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.unit-card__weapon-types { display: flex; gap: var(--space-1); }

.unit-card__weapon-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.unit-card__weapon-badge--ranged { background: #e8f0fb; color: #1a3a6b; border: 1px solid rgba(26,58,107,0.25); }
.unit-card__weapon-badge--melee  { background: #fbe8e8; color: #6b1a1a; border: 1px solid rgba(107,26,26,0.25); }

.unit-card__pill-row { display: flex; align-items: flex-start; gap: var(--space-1); flex-wrap: wrap; }

.unit-card__pill-row--keywords {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border);
}

.unit-card__pill-row-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding-top: 2px;
  min-width: 48px;
}

.unit-card__pill-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.unit-card__pill {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.unit-card__pill--weapon  { background: var(--surface-lo); color: var(--text-dim); border: 1px solid var(--border); }
.unit-card__pill--core    { background: #eef5fb; color: #1a3a6b; border: 1px solid rgba(26,58,107,0.2); }
.unit-card__pill--faction { background: var(--tyranids-light); color: var(--tyranids); border: 1px solid rgba(90,31,107,0.2); }
.unit-card__pill--keyword { background: var(--surface-lo); color: var(--text-dim); border: 1px solid var(--border); font-style: italic; }

.unit-card__expand-btn {
  background: transparent;
  border: none;
  font-size: var(--text-xs);
  color: var(--amber-dim);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
  letter-spacing: 0.02em;
}
.unit-card__expand-btn:hover { text-decoration: underline; }

.unit-card__add-btn {
  background: var(--amber);
  color: var(--text-inv);
  border: none;
  font-size: 1.75rem;
  font-weight: 300;
  width: 68px;
  align-self: stretch;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
  border-radius: 0;
  border-left: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.unit-card__add-btn:hover    { background: var(--amber-dim); }
.unit-card__add-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.unit-card__added-badge {
  background: var(--green-light);
  color: var(--green);
  border-left: 1px solid rgba(26,92,46,0.2);
  font-size: var(--text-xs);
  font-weight: 600;
  width: 68px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.unit-card__remove-btn {
  background: var(--surface-lo);
  color: var(--text-dim);
  border: none;
  border-left: 1px solid var(--border);
  font-size: var(--text-xl);
  font-weight: 400;
  width: 68px;
  align-self: stretch;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.unit-card__remove-btn:hover {
  background: var(--red-light);
  color: var(--red);
  border-left-color: rgba(139,26,26,0.2);
}

/* ============================================================
   COMBINE MODAL
   ============================================================ */

.combine-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-6);
}

.combine-modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
}

.combine-modal__header {
  color: var(--banner-text);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
}

.combine-modal__body {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.combine-modal__desc {
  font-size: var(--text-sm);
  color: var(--text-dim);
  line-height: 1.5;
}

.combine-modal__option {
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  background: var(--surface);
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.combine-modal__option:hover {
  border-color: var(--amber);
  background: var(--amber-light);
}

.combine-modal__option--selected {
  border-color: var(--amber);
  background: var(--amber-light);
}

.combine-modal__option--selected .combine-modal__option-title {
  color: var(--amber-dim);
}

.combine-modal__option-title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-hi);
}

.combine-modal__option:hover .combine-modal__option-title {
  color: var(--amber-dim);
}

.combine-modal__option-desc {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.combine-modal__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.combine-modal__cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.combine-modal__cancel:hover {
  border-color: var(--border-hi);
  color: var(--text);
}

.combine-modal__ok {
  background: var(--amber);
  border: none;
  color: var(--text-inv);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: background var(--transition-fast);
}

.combine-modal__ok:hover {
  background: var(--amber-dim);
}

.combine-modal__ok:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   MODEL BUILDER — Step 3
   ============================================================ */

.model-builder {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.model-builder__unit-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-hi);
  margin: 0 0 var(--space-2) 0;
}

.model-builder__unit-sub {
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin: 0 0 var(--space-4) 0;
}

.model-builder__progress {
  font-size: var(--text-sm);
  color: var(--text-dim);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-lo);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

.model-builder__progress strong { color: var(--amber-dim); }

.model-builder__profile-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.model-builder__profile-header {
  background: var(--banner);
  color: var(--banner-text);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.model-builder__profile-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
}

.model-builder__profile-count-info { font-size: var(--text-sm); opacity: 0.7; }

.model-builder__profile-body {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.model-builder__instance {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.model-builder__instance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-lo);
  border-bottom: 1px solid var(--border);
}

.model-builder__instance-label   { font-weight: 600; font-size: var(--text-sm); color: var(--text); }
.model-builder__instance-default { font-size: var(--text-xs); color: var(--text-dim); }

.model-builder__instance-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.wargear-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.wargear-option__label {
  font-size: var(--text-sm);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 80px;
  flex-shrink: 0;
}

.wargear-option__select {
  flex: 1;
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  min-height: var(--touch-target);
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.wargear-option__select:focus { outline: none; border-color: var(--amber); }

.wargear-option__checkbox-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.wargear-option__checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--amber);
  flex-shrink: 0;
}

.wargear-option__checkbox-label { font-size: var(--text-sm); color: var(--text); cursor: pointer; }

.model-builder__default-equip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.model-builder__equip-tag {
  background: var(--surface-lo);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.model-builder__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.model-builder__save-btn {
  background: var(--green);
  color: var(--text-inv);
  border: none;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  padding: 0 var(--space-8);
  height: 48px;
  border-radius: var(--radius);
  cursor: pointer;
  min-height: var(--touch-target);
  transition: background var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.model-builder__save-btn:hover:not(:disabled) { background: #164d25; }
.model-builder__save-btn:disabled             { opacity: 0.45; cursor: not-allowed; }

.model-builder__saving {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-dim);
  font-size: var(--text-sm);
  padding: var(--space-4);
  justify-content: center;
}

/* ============================================================
   SHARED — Spinner
   ============================================================ */

.spinner-sm {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   ARMY GLYPH PICKER — DevAgent16 - 2026-06-02
   Shared modal (GlyphPicker.js): super-group tabs → group list → glyph grid.
   Plus the army-card icon edit pencil and the CreateArmy Step 1 glyph trigger.
   Faction-independent chrome; reuses existing tokens only.
   ============================================================ */

/* --- Shared army menu hamburger (ArmyActions.js: cards, viewer, builder) --- */
.army-menu__btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--border-hi);
  border-radius: var(--radius);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
  min-height: unset;
}

.army-menu__btn:hover {
  background: var(--surface-lo);
  border-color: var(--border-hi);
  color: var(--text);
}

.army-menu__bars {
  position: relative;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.army-menu__bars::before,
.army-menu__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.army-menu__bars::before { top: -5px; }
.army-menu__bars::after  { top: 5px; }

/* --- Shared army menu dropdown --- */
.army-menu {
  position: relative;
}

.army-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-dropdown, 50);
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
}

.army-menu__item {
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-align: right;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
  min-height: unset;
}

.army-menu__item:hover {
  background: var(--surface-lo);
}

.army-menu__item--danger {
  color: var(--red);
}

.army-menu__item--danger:hover {
  background: var(--red-light);
}

/* --- CreateArmy Step 1: glyph trigger beside the army name --- */
.create-army__glyph-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.create-army__glyph-trigger:hover {
  border-color: var(--border-hi);
  background: var(--surface-lo);
}

.create-army__glyph-trigger-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-lo);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.create-army__glyph-trigger-thumb img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.create-army__glyph-trigger-thumb--empty {
  color: var(--text-dim);
  font-size: var(--text-lg);
}

.create-army__glyph-trigger-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* DevAgent v67: breathing room between "Choose a glyph" and the hint line. */
  gap: var(--space-1);
}

.create-army__glyph-trigger-name {
  font-size: var(--text-base);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* DevAgent v68: overflow:hidden (kept for the ellipsis) was clipping descenders
     ("g" in "Choose a glyph") — the line box was too tight. 1.4 fits descenders. */
  line-height: 1.4;
}

.create-army__glyph-trigger-hint {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

/* --- Picker modal --- */
.glyph-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-6);
}

.glyph-picker {
  /* DevAgent16 v58: cells shrunk to show ~3½ rows (a partial row cues scrolling), while
     the grid box height stays pinned at the old 3-row total (440px) so the modal height
     is unchanged. --gp-grid-h is now a literal, decoupled from --gp-cell-h. */
  --gp-cell-h: 106px;
  --gp-gap:    12px;
  --gp-pad:    16px;
  --gp-grid-h: 440px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.glyph-picker__header {
  background: var(--banner);
  color: var(--banner-text);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.glyph-picker__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
}

.glyph-picker__close {
  background: transparent;
  border: none;
  color: var(--banner-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-2);
  opacity: 0.85;
  transition: opacity var(--transition-fast);
  min-height: unset;
}

.glyph-picker__close:hover { opacity: 1; }

/* Cancel / Save footer (DevAgent16 v60). Buttons reuse .ap-modal__cancel / __confirm. */
.glyph-picker__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.glyph-picker__empty {
  padding: var(--space-6);
  color: var(--text-dim);
  font-size: var(--text-base);
  text-align: center;
}

.glyph-picker__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Level 1 — super-group tabs */
.glyph-picker__tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.glyph-picker__tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-dim);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  white-space: nowrap;
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-3);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  min-height: unset;
}

.glyph-picker__tab:hover { color: var(--text); }

.glyph-picker__tab--active {
  color: var(--text-hi);
  border-bottom-color: var(--amber);
}

/* Levels 2 + 3 — group list + glyph grid side by side, fixed to the 3-row height */
.glyph-picker__cols {
  display: flex;
  min-height: 0;
}

.glyph-picker__groups {
  width: 224px;
  flex-shrink: 0;
  height: var(--gp-grid-h);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.glyph-picker__group {
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: var(--text-base);
  text-align: left;
  padding: var(--space-3) var(--space-3);
  cursor: pointer;
  /* DevAgent16 v58: sidebar width is fixed, so long faction names wrap to a 2nd line
     rather than being clipped. The mobile strip re-applies nowrap below. */
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.2;
  transition: background var(--transition-fast), color var(--transition-fast);
  min-height: unset;
}

.glyph-picker__group:hover {
  background: var(--surface-lo);
  color: var(--text);
}

.glyph-picker__group--active {
  background: var(--surface-lo);
  color: var(--text-hi);
}

.glyph-picker__grid {
  flex: 1;
  min-width: 0;
  height: var(--gp-grid-h);
  overflow-y: auto;
  padding: var(--gp-pad);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  grid-auto-rows: var(--gp-cell-h);
  gap: var(--gp-gap);
  align-content: start;
}

.glyph-picker__grid-empty {
  color: var(--text-dim);
  font-size: var(--text-sm);
  padding: var(--space-4);
}

.glyph-picker__glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--space-2) var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              box-shadow var(--transition-fast);
  min-height: unset;
}

.glyph-picker__glyph:hover {
  border-color: var(--border-hi);
  background: var(--surface-lo);
}

.glyph-picker__glyph--selected {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.glyph-picker__glyph-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.glyph-picker__glyph-label {
  font-size: var(--text-xs);
  color: var(--text-dim);
  text-align: center;
  line-height: 1.15;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Narrow screens: stack the group list above the grid as a horizontal strip. */
@media (max-width: 640px) {
  .glyph-picker { max-height: 92vh; }
  .glyph-picker__cols { flex-direction: column; }
  .glyph-picker__groups {
    width: 100%;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .glyph-picker__group { white-space: nowrap; }
}