/* Wide layout class — all wide-only structural CSS lives inside this single media block (FR-35) */

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  #portrait-frame:has([data-wide-root]) {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
  }

  /* Wide-layout row densification (SESSION-06) — 48px minimum, dock-only,
     pointer-only. The inner `@media (hover: hover) and (pointer: fine) and
     not (any-pointer: coarse)` guard ensures this NEVER matches when any
     coarse pointer is available (touch tablets, hybrid laptops, etc.), so
     wide surfaces with a touch pointer keep the 48px touch floor from
     styles/components.css. Scope is limited to `.wide-console-content-body`
     so `.wide-settings-body` rows always hit their 48px floor regardless
     of pointer capability. */
  @media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
    .wide-console-content-body .console-row:not(.console-static-row):not(.console-static-card),
    .wide-console-content-body .action-btn:not(.console-static-row):not(.console-static-card),
    .wide-console-content-body .item-card:not(.console-static-row):not(.console-static-card),
    .wide-console-content-body .equipment-card:not(.console-static-row):not(.console-static-card),
    .wide-console-content-body .protocol-card:not(.console-static-row):not(.console-static-card) {
      min-height: 48px;
    }
  }

  .wide-console-content-body .console-static-row,
  .wide-console-content-body .console-static-card {
    min-height: 0;
  }

  /* ═══ WIDE SHELL — three-region grid (Adaptive Layout System) ═══ */
  /*
   * Pane widths are driven by CSS custom properties owned by the M100 pane
   * controller (attachWidePanes in src/ui/layout.js). --wide-left-w carries
   * the user-chosen telemetry width; --wide-right-w carries the user-chosen
   * console-dock width (fixed again — amended by map-pan-zoom SESSION-04
   * per Custom Rule 8's 2026-08-17 amendment). data-pane-left /
   * data-pane-right = "open" | "collapsed" flip each pane between resizable
   * and rail states.
   *
   * The middle (playfield) track always holds 1fr and absorbs ALL surplus
   * viewport width in every state — the map docks and fills the entire
   * center. The vertical descent premise now lives in the CONTENT (the
   * 20×32 world behind the M104 pan/zoom viewport camera), not in column
   * geometry. Tracks always sum to 100vw so the rails (48px left / 96px
   * right when collapsed; the user-chosen dock widths when open) stay
   * flush to their viewport edges.
   */
  .wide-shell {
    position: relative;
    display: grid;
    /* Outer track mins hold at the original defaults (280/360) so the grid
     * never renders a track narrower than the pane state can request. The
     * middle playfield track absorbs surplus via 1fr; the console dock is
     * a fixed user-chosen width (max(360px, --wide-right-w)) so its left
     * edge is measurable from the viewport-right by the dock width alone. */
    grid-template-columns:
      minmax(280px, var(--wide-left-w, 280px))
      minmax(320px, 1fr)
      max(360px, var(--wide-right-w, 360px));
    /* mobile-pwa-hardening SESSION-01 — .wide-shell mounts as a child of the
       safe-area-padded #app-root content box (styles/base.css); 100%/100%
       fills that already-correct available frame instead of a raw 100vw/
       100vh that would render its docks under a device cutout. */
    grid-template-rows: 100%;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .wide-shell[data-pane-left="collapsed"] {
    grid-template-columns:
      48px
      minmax(320px, 1fr)
      max(360px, var(--wide-right-w, 360px));
  }
  /* icon-first-ui-density SESSION-03 §5.3 — the vertical tab column narrows
     96 → 76 across every state so the icon-first sprite (24px glyph + 8px
     badge) sits without a 20 px empty band. Reclaimed width falls into the
     console-content pane (dock outer width holds at ≥360; map column floor
     of 320 is unchanged). */
  .wide-shell[data-pane-right="collapsed"] {
    grid-template-columns:
      minmax(280px, var(--wide-left-w, 280px))
      minmax(320px, 1fr)
      76px;
  }
  .wide-shell[data-pane-left="collapsed"][data-pane-right="collapsed"] {
    grid-template-columns: 48px minmax(320px, 1fr) 76px;
  }
  /* Collapsed left dock: only the collapse button (its ◀ flips to ▶ by data-attr) shows.
     Every direct child of the telemetry dock is hidden. */
  .wide-shell[data-pane-left="collapsed"] .wide-telemetry-dock > * { display: none; }
  /* Collapsed right dock: hide the content pane; keep the vertical tab column usable. */
  .wide-shell[data-pane-right="collapsed"] .wide-console-content { display: none; }
  .wide-shell[data-pane-right="collapsed"] .wide-console-dock { grid-template-columns: 76px 0; }

  /* Map-only view (Issue H) — when a dock is collapsed, dissolve its dark
     panel background into the playfield so the shell reads as one continuous
     surface instead of three coloured columns. The collapse chevron keeps
     its own bg-panel-elevated background (line ~106) for contrast. */
  .wide-shell[data-pane-left="collapsed"] .wide-telemetry-dock,
  .wide-shell[data-pane-right="collapsed"] .wide-console-dock {
    background: var(--bg-base);
    border-left-color: transparent;
    border-right-color: transparent;
    box-shadow: none;
  }

  /* Resize handle: 8px hit strip straddling the gap between docks and the playfield. */
  .pane-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 20;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s ease;
    touch-action: none;
  }
  .pane-resize-handle:hover,
  .pane-resize-handle:focus {
    background: rgba(126, 200, 227, 0.18);
    box-shadow: 0 0 8px var(--accent);
    outline: none;
  }
  .pane-resize-handle.pane-resize-left { left: calc(var(--wide-left-w, 280px) - 4px); }
  /* Right handle straddles the playfield/console-dock boundary. The dock
   * is fixed at max(360px, --wide-right-w), so the boundary sits exactly
   * that far from the viewport-right in every open-state combo. */
  .pane-resize-handle.pane-resize-right {
    right: calc(max(360px, var(--wide-right-w, 360px)) - 4px);
  }
  .wide-shell[data-pane-left="collapsed"] .pane-resize-handle.pane-resize-left { display: none; }
  .wide-shell[data-pane-right="collapsed"] .pane-resize-handle.pane-resize-right { display: none; }

  /* Collapse chevron: pointer-only affordance, 44px minimum per design.md wide input rules.
     Positioned at the top-inside corner of each dock; opens/collapses the pane. */
  .pane-collapse-btn {
    position: absolute;
    top: 8px;
    z-index: 21;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    background: var(--bg-panel-elevated);
    border: 1px solid var(--border-dim);
    color: var(--accent);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
  }
  /* Shared actions inherit the established pane affordance without changing
     the 44px collapse target or the dock's existing visual surface. */
  .pane-collapse-btn.menu-action {
    font: inherit;
  }
  .pane-collapse-btn:hover,
  .pane-collapse-btn:focus {
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    outline: none;
  }
  .pane-collapse-btn.pane-collapse-left { left: 8px; }
  .pane-collapse-btn.pane-collapse-right { right: 8px; }
  /* When collapsed, the chevron flips to point outward (expand hint). */
  .wide-shell[data-pane-left="collapsed"] .pane-collapse-btn.pane-collapse-left::before { content: '▶'; }
  .wide-shell[data-pane-left="collapsed"] .pane-collapse-btn.pane-collapse-left { font-size: 0; }
  .wide-shell[data-pane-left="collapsed"] .pane-collapse-btn.pane-collapse-left::before { font-size: 14px; }
  .wide-shell[data-pane-right="collapsed"] .pane-collapse-btn.pane-collapse-right::before { content: '◀'; }
  .wide-shell[data-pane-right="collapsed"] .pane-collapse-btn.pane-collapse-right { font-size: 0; }
  .wide-shell[data-pane-right="collapsed"] .pane-collapse-btn.pane-collapse-right::before { font-size: 14px; }

  /* Telemetry dock (left region): stacked status fields + persistent LOG feed */
  .wide-telemetry-dock {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-dim);
    overflow: hidden;
    min-width: 0;
  }
  /* SESSION-06 density pass — dock/header/body padding tightened so the
     360px-max dock reclaims vertical space for actual content. */
  .wide-telemetry-header {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-dim);
    background: var(--bg-panel-elevated);
  }
  .wide-telemetry-field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(42, 26, 74, 0.5);
  }
  .wide-telemetry-field:last-child { border-bottom: 0; }
  .wide-telemetry-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .wide-telemetry-value {
    font-size: 14px;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
  }
  .wide-log-feed {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .wide-log-feed-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-dim);
    background: var(--bg-panel);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
    position: sticky;
    top: 0;
  }
  .wide-log-feed-scroll { flex: 1; overflow-y: auto; }

  /* Combat variant: initiative + active actor blocks */
  .wide-init-block {
    border-bottom: 1px solid var(--border-dim);
    background: var(--bg-panel);
  }
  .wide-init-header {
    padding: 10px 14px 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
  }
  .wide-init-rail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 4px 12px 14px;
  }
  .init-order { font-size: 10px; color: var(--text-secondary); }
  .init-slot.spent { opacity: 0.3; }
  .wide-active-actor {
    background: var(--bg-panel-elevated);
    border-bottom: 1px solid var(--accent);
    box-shadow: inset 0 -2px 8px rgba(126, 200, 227, 0.08);
    padding: 12px 14px;
  }
  .wide-active-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  .wide-active-name {
    font-size: 12px;
    color: var(--accent);
    font-weight: bold;
    text-shadow: 0 0 8px var(--accent);
    letter-spacing: 0.1em;
  }
  .wide-active-ap {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-secondary);
  }
  .wide-active-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    margin-bottom: 4px;
  }
  .wide-active-bar-row .bar-track { flex: 1; }
  .wide-active-conds {
    margin-top: 6px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }

  /* Playfield column (center region): the map docks and fills the middle
   * (Custom Rule 8 amendment, map-pan-zoom 2026-08-17). The vertical
   * descent premise lives in the CONTENT — the 20×32 world seen through
   * the M104 pan/zoom viewport camera — not in column geometry. */
  .wide-playfield-column {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    overflow: hidden;
    min-width: 0;
  }
  .wide-playfield-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .playfield-alert-banner {
    padding: 10px 14px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--danger);
    text-shadow: 0 0 8px var(--danger);
  }

  /* Console dock (right region).
     icon-first-ui-density SESSION-03 §5.3 — tab column width 96 → 76 so the
     icon-only vertical rail sheds the label-band; matches the collapsed-state
     rule above. */
  .wide-console-dock {
    display: grid;
    grid-template-columns: 76px 1fr;
    /* Mirrors .wide-shell's own row track (100%) — was 100vh to match a
       .wide-shell that was itself 100vh; now that .wide-shell is safe-area
       correct, this nested track must follow or its tab column/content pane
       overflow their actual (shorter, safe-area-padded) box. */
    grid-template-rows: 100%;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-dim);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.6), -1px 0 4px rgba(126, 200, 227, 0.1);
    overflow: hidden;
    min-width: 0;
  }
  .wide-console-tabs {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-dim);
    overflow: hidden;
  }
  .wide-mode-tab {
    flex: 1;
    /* SESSION-06 density pass — 96px → 72px reclaims vertical space while
       staying above the 44px minimum touch target. */
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(42, 26, 74, 0.5);
    background: transparent;
    text-decoration: none;
    transition: all 0.15s ease;
    writing-mode: horizontal-tb;
  }
  .wide-mode-tab.menu-action {
    width: 100%;
  }
  .wide-mode-tab:hover { color: var(--text-primary); }
  .wide-mode-tab.active {
    border-left-color: var(--accent);
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
    background: var(--accent-faint);
    box-shadow: inset 4px 0 8px rgba(126, 200, 227, 0.1);
  }
  .wide-mode-tab.disabled,
  .wide-mode-tab[disabled] { color: var(--text-disabled); cursor: not-allowed; }
  /* Icon-first vertical tab (icon-first-ui-density SESSION-03). SESSION-05
     will emit `.wide-mode-tab.icon-only` on every dock tab; the glyph sits
     centered with the numeric shortcut badge just below. Height (72px min)
     is unchanged — the win is horizontal (76px column vs 96px label band). */
  .wide-mode-tab.icon-only { gap: 2px; padding: 8px 4px; }
  .wide-mode-tab.icon-only .tab-key { align-self: center; margin-left: 0; }
  .wide-mode-tab.icon-only > .icon { flex-shrink: 0; }
  .wide-console-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--bg-panel);
  }
  .wide-console-content-header {
    /* SESSION-06 density pass — 14/20 → 10/14 padding trim.
       icon-first-ui-density SESSION-03 §5.3 — trimmed again 10/14 → 8/12 so
       the icon-first content header claims ~4px less vertical space in the
       narrow dock. */
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-dim);
    background: var(--bg-panel-elevated);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .wide-console-content-mode {
    font-size: 14px;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
  }
  .wide-console-content-body {
    flex: 1;
    min-height: 0;
    /* SESSION-06 density pass — 20 → 12 padding + systematic 8px rhythm on
       every direct child to reclaim vertical space in the narrow dock.
       SESSION-05 (Issue D) added padding-bottom: 24px so the last row of
       long gear/inventory scroll content clears the CRT scanline overlay. */
    padding: 12px 12px 24px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .wide-console-content-body > * + * { margin-top: 8px; }
  /* SESSION-05 (Issue D) — tighten gear stack spacing so the extra
     padding-bottom lands as visible clearance, not compound margin. */
  .wide-console-content-body .equipped-section,
  .wide-console-content-body .inventory-list {
    margin-bottom: 8px;
  }
  /* Combat actions ship as a 2-column grid in the wide dock so seven actions
     fit in four rows instead of a seven-tall stack. SESSION-05's combat pane
     emits `.combat-action-list` regardless of layout — this scope keeps
     portrait unchanged. */
  .wide-console-content-body .combat-action-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 8px;
  }

  /* ═══ MOVE-mode extras (autostop rows) ═══ */
  .autostop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg-panel-elevated);
    border: 1px solid var(--border-dim);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
  }
  .autostop-pill {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--accent);
    color: var(--accent);
    box-shadow: 0 0 4px var(--accent);
    font-size: 10px;
  }
  .autostop-pill.off {
    border-color: var(--text-dim);
    color: var(--text-dim);
    box-shadow: none;
  }

  /* ═══ COMBAT-mode extras (targeting) ═══ */
  /* SESSION-06 density pass — target-info and btn-confirm tighten padding
     so combat targeting fits inside the narrow dock without pushing the
     confirm button below the fold. */
  .target-info {
    padding: 8px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    font-size: 11px;
    color: var(--text-primary);
  }
  .target-info .target-name {
    color: var(--danger);
    font-weight: bold;
    text-shadow: 0 0 6px var(--danger);
  }
  .target-info .target-detail {
    color: var(--text-primary);
    font-size: 10px;
    margin-top: 2px;
    opacity: 0.9;
  }
  .btn-confirm {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 12px 20px;
    font-size: 11px;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    box-shadow: 0 0 8px var(--accent), inset 0 0 8px rgba(126, 200, 227, 0.1);
    text-align: center;
    transition: all 0.15s ease;
  }
  .btn-confirm:hover { background: rgba(126, 200, 227, 0.1); box-shadow: 0 0 16px var(--accent); }

  /* ═══ PARTY-mode extras (large sigil) ═══ */
  .sigil-lg {
    width: 42px;
    height: 42px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 0 4px var(--accent);
    box-shadow: 0 0 6px var(--accent);
  }
  /* Derived-stat rows: the console dock is narrow (max 360px minus padding),
     so the default 3-col grid overlaps compound rows like
     "Melee / Ranged / Protocol" → "+2 / -2 / +0". Stack derived rows in a
     single column in the dock; keep values on one line and let labels shrink
     so nothing wraps mid-value. Portrait keeps the 3-col grid unchanged. */
  .wide-console-content-body .party-derived {
    grid-template-columns: 1fr;
  }
  .wide-console-content-body .party-derived .party-stat-row {
    gap: 8px;
    align-items: baseline;
  }
  .wide-console-content-body .party-derived .stat-value {
    text-align: right;
    white-space: nowrap;
  }
  .wide-console-content-body .party-derived .stat-label {
    min-width: 0;
  }

  /* ═══ LOOT-mode extras (large container glyph) ═══ */
  .container-icon-lg {
    font-size: 32px;
    color: #e8d23a;
    text-shadow: 0 0 8px #e8d23a;
  }

  /* ═══ LOG-mode extras (sticky history header + share panel) ═══ */
  .log-history-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 16px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-dim);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
  }
  .share-panel {
    padding: 14px 16px;
    background: var(--bg-panel-elevated);
    border-top: 1px solid var(--accent);
  }
  .share-input {
    flex: 1;
    background: var(--bg-base);
    border: 1px solid var(--border-dim);
    color: var(--accent);
    font-family: inherit;
    font-size: 11px;
    padding: 10px 12px;
    outline: none;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     TITLE SCREEN (wide) — centered vertical stack, widened ornament field
     ═══════════════════════════════════════════════════════════════════════════ */
  .wide-title-screen {
    position: relative;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 48px 24px;
    box-sizing: border-box;
  }
  .wide-title-header {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--text-secondary);
    text-shadow: 0 0 8px var(--accent);
  }
  .wide-title-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
  }
  .wide-title-lockup {
    text-align: center;
    width: 100%;
    max-width: 720px;
  }
  .wide-title-ornament {
    font-size: 16px;
    letter-spacing: 0.3em;
    color: var(--text-secondary);
    text-shadow: 0 0 8px var(--accent);
    margin: 0 auto;
  }
  .wide-title-ornament::before { content: '◈'; margin-right: 0.6em; }
  .wide-title-ornament::after  { content: '◈'; margin-left: 0.6em; }
  .wide-title-word {
    display: block;
    font-size: 64px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent);
    line-height: 1.05;
    margin: 0;
  }
  .wide-title-tagline {
    margin-top: 20px;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: var(--text-dim);
  }
  .wide-title-branches {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(40vw, 420px);
    min-width: 280px;
  }
  .wide-title-branches.hidden-branches { display: none; }
  .wide-title-branches .branch-row {
    display: flex;
    gap: 14px;
  }
  .wide-title-branches .branch-row .btn-crt { flex: 1; }
  .wide-title-footer { text-align: center; }
  .wide-title-footer p {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--text-dim);
    margin: 4px 0;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SETTINGS SCREEN (wide) — two-column form, 48px row floor (lowered 96 →
     48 by touch-target-density-pass SESSION-02)
     ═══════════════════════════════════════════════════════════════════════════ */
  .wide-settings-shell {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100vw;
    height: 100vh;
    z-index: 10;
  }
  .wide-settings-header {
    padding: 18px 28px;
    background: var(--bg-panel-elevated);
    border-bottom: 1px solid var(--accent);
    text-align: center;
  }
  .wide-settings-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 24px 28px;
    overflow: hidden;
    min-height: 0;
  }
  .wide-settings-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
  }
  .wide-settings-footer {
    padding: 16px 28px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-dim);
    display: flex;
    justify-content: center;
  }
  .wide-settings-body .toggle-row,
  .wide-settings-body .slider-row {
    min-height: 48px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-dim);
    align-items: center;
    gap: 16px;
  }
  .wide-settings-body .panel > .toggle-row:first-child,
  .wide-settings-body .panel > .slider-row:first-child { border-top: 0; }
  .wide-settings-body .motion-options {
    min-height: 48px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-dim);
  }
  /* Slider row column contract (SESSION-06) — stable label / flexible input /
     value tracks so labels don't collapse under captions and the value chip
     always stays legible. `min-width: 0` on the label prevents flex overflow
     from pushing the input off-track at narrow dock widths. */
  .wide-settings-body .slider-row .slider-label {
    flex: 0 0 auto;
    min-width: 80px;
    max-width: 40%;
  }
  .wide-settings-body .slider-row input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
  }
  .wide-settings-body .slider-row .slider-value {
    flex: 0 0 auto;
    min-width: 48px;
    text-align: right;
  }
  /* Caption spacing between panel rows — keeps helper text off the row it
     describes. */
  .wide-settings-body .panel > .caption {
    display: block;
    padding: 4px 12px 8px;
    color: var(--text-dim);
  }
  .settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 8px 12px;
    border-top: 1px solid var(--border-dim);
  }
  .settings-row:first-child { border-top: 0; }
  .settings-row-label { flex: 1; padding-right: 12px; }
  .settings-row-label .row-title { font-size: 12px; font-weight: bold; color: var(--text-primary); }
  .settings-row-label .row-hint { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

  /* ═══════════════════════════════════════════════════════════════════════════
     IMPORT SCREEN (wide) — centered column, unchanged input width
     ═══════════════════════════════════════════════════════════════════════════ */
  .wide-import-shell {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    z-index: 10;
  }
  .wide-import-header {
    padding: 18px 28px;
    background: var(--bg-panel-elevated);
    border-bottom: 1px solid var(--accent);
    text-align: center;
  }
  .wide-import-stage {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 32px 24px;
  }
  .wide-import-column {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    max-height: 100%;
  }
  .wide-import-footer {
    padding: 14px 28px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-dim);
    display: flex;
    justify-content: center;
  }
  .wide-import-state {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    width: 100%;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     LIBRARY SCREEN (wide) — run-card grid
     ═══════════════════════════════════════════════════════════════════════════ */
  .wide-library-shell {
    position: relative;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .wide-library-header {
    padding: 18px 32px;
    background: var(--bg-panel-elevated);
    border-bottom: 1px solid var(--accent);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .wide-library-header .eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
  }
  .wide-library-header .headline {
    font-size: 20px;
    letter-spacing: 0.2em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
  }
  .wide-library-body {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
  }
  .wide-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
  }
  .run-card {
    display: grid;
    grid-template-columns: 8px 1fr;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    transition: all 0.15s ease;
    overflow: hidden;
    min-height: 200px;
    cursor: pointer;
  }
  .run-card:hover,
  .run-card:focus {
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    outline: none;
  }
  .run-card.broken { border-color: var(--danger); }
  .run-card.broken .load-error { color: var(--danger); font-size: 9px; padding: 0 18px; }
  .run-card .accent-swatch {
    width: 8px;
    height: 100%;
  }
  .run-card-body {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    gap: 10px;
  }
  .run-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .run-card-seed {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.1em;
  }
  .run-card-theme {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
  }
  .run-card-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .run-card-party {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }
  .run-card-depth {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .run-card-depth .label {
    font-size: 9px;
    color: var(--text-secondary);
    letter-spacing: 0.15em;
  }
  .run-card-depth .value {
    font-size: 32px;
    font-weight: bold;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
    line-height: 1;
  }
  .run-card-meta {
    font-size: 10px;
    color: var(--text-dim);
  }
  .run-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
  }
  .run-card-actions .btn-crt {
    flex: 1;
    padding: 10px 12px;
    font-size: 11px;
    min-height: 44px;
  }
  .btn-danger {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(232, 58, 58, 0.06);
  }
  .btn-danger:hover,
  .btn-danger:focus {
    border-color: var(--danger);
    color: #fff;
    background: rgba(232, 58, 58, 0.2);
    box-shadow: 0 0 8px var(--danger);
  }
  .no-limit-hint {
    grid-column: 1 / -1;
    padding: 14px;
    text-align: center;
    background: var(--bg-panel);
    border: 1px dashed var(--border-dim);
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 0.15em;
    opacity: 0.6;
  }
  .wide-library-footer {
    display: flex;
    gap: 14px;
    padding: 16px 32px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-dim);
    align-items: center;
  }
  .wide-library-footer .btn-crt {
    min-height: 56px;
    padding: 14px 28px;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SCORECARD SCREEN (wide) — two-pane split
     ═══════════════════════════════════════════════════════════════════════════ */
  .wide-scorecard-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(320px, 1fr);
    grid-template-rows: 100vh;
    width: 100vw;
    height: 100vh;
    z-index: 10;
  }
  .wide-scorecard-summary,
  .wide-scorecard-share {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    overflow: hidden;
    min-width: 0;
  }
  .wide-scorecard-summary {
    border-right: 1px solid var(--border-dim);
  }
  .wide-scorecard-header {
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--border-dim);
    background: var(--bg-panel-elevated);
    text-align: center;
  }
  .wide-scorecard-body {
    flex: 1;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
  }
  .wide-scorecard-actions {
    padding: 16px 28px;
    border-top: 1px solid var(--border-dim);
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     TELEMETRY DOCK — MANUAL CHIP (playtest-clarity-and-4x-floors SESSION-01)
     In-flow, self-aligned to the trailing edge as the header's first row so it
     reserves its own space and never covers the DEPTH value below it. No
     absolute positioning: no UI element may overlap another.
     ═══════════════════════════════════════════════════════════════════════════ */
  .wide-telemetry-manual-chip {
    align-self: flex-end;
    flex: 0 0 auto;
    margin-bottom: 2px;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     TUTORIAL SCREEN (wide) — two-page spread + appended summary state.
     Kept as long as `mocks/wide/tutorial.html` still ships these classes and
     the M75 module lives on disk (see the-manual SESSION-04 handoff).
     ═══════════════════════════════════════════════════════════════════════════ */
  .wide-tutorial-shell {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    width: 100vw;
    height: 100vh;
    z-index: 10;
  }
  .wide-tutorial-header {
    padding: 18px 28px;
    background: var(--bg-panel-elevated);
    border-bottom: 1px solid var(--accent);
    text-align: center;
  }
  .wide-tutorial-spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 24px 28px;
    overflow: hidden;
    min-height: 0;
  }
  .wide-tutorial-pane {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    overflow: hidden;
    min-height: 0;
  }
  .wide-tutorial-pane-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-dim);
    background: var(--bg-panel-elevated);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
  }
  .wide-tutorial-pane-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
  }
  .wide-tutorial-footer {
    padding: 14px 28px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-dim);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .wide-tutorial-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    gap: 16px;
  }
  .wide-tutorial-summary .badge {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--text-dim);
  }
  .wide-tutorial-summary .headline {
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent);
  }
  .wide-tutorial-summary .copy {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 340px;
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     CREATION SCREEN (wide) — two-pane roster/editor split
     ═══════════════════════════════════════════════════════════════════════════ */
  .wide-creation-shell {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(360px, 40%) 1fr;
    grid-template-rows: 1fr auto;
    width: 100vw;
    height: 100vh;
  }
  .wide-creation-left {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-dim);
    background: var(--bg-panel);
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
  .wide-creation-left::-webkit-scrollbar { width: var(--scrollbar-width); }
  .wide-creation-left::-webkit-scrollbar-track { background: var(--scrollbar-track); }
  .wide-creation-left::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; }
  .wide-creation-left::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
  .wide-creation-right {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: var(--bg-base);
  }
  .wide-creation-footer {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    gap: 14px;
    padding: 16px 24px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border-dim);
    align-items: center;
  }
  .wide-creation-footer .btn-crt { min-height: 56px; padding: 14px 24px; }

  /* Readout header (points/credits/AP) */
  .wide-readout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-panel-elevated);
    border-bottom: 1px solid var(--accent);
  }
  .wide-readout-cell { display: flex; flex-direction: column; }
  .wide-readout-cell .label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
  }
  .wide-readout-cell .value {
    font-size: 22px;
    font-weight: bold;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
    margin-top: 2px;
  }
  .wide-readout-cell .value.dim {
    color: var(--text-dim);
    text-shadow: none;
  }
  .wide-readout-cell .value .denom {
    font-size: 12px;
    color: var(--text-dim);
    font-weight: normal;
  }

  /* Roster — 4 character slots */
  .wide-roster {
    padding: 14px 20px 8px;
    border-bottom: 1px solid var(--border-dim);
    display: flex;
    flex-direction: column;
  }
  .wide-roster-heading {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    margin-bottom: 10px;
  }
  .wide-roster-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .wide-roster .char-slot {
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-dim);
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
  }
  .wide-roster .char-slot:hover { border-color: var(--text-secondary); }
  .wide-roster .char-slot.active {
    background: var(--bg-panel-elevated);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }
  .wide-roster .char-slot .label {
    font-size: 9px;
    margin-top: 6px;
    letter-spacing: 0.05em;
    color: var(--text-primary);
  }
  .wide-roster .char-slot.active .label {
    color: var(--accent);
    text-shadow: 0 0 4px var(--accent);
  }
  .wide-roster .char-slot .label.dim { color: var(--text-dim); }
  .wide-roster .remove-character-btn {
    align-self: flex-start;
    margin-top: 10px;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 10px;
  }

  /* Quick Start — empty-state affordance rendered above Saved configs when
     the party is empty (combat-and-ux-feedback-pass SESSION-04). Mirrors
     the portrait quick-start-section role in the wide left column: heading,
     tagline, then a stack of preset cards. Sized for the wide left pane
     (`minmax(360px, 40%)` per `.wide-creation-shell`) using the same
     tokens as neighboring `.wide-saved-configs`. */
  .wide-quick-start {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-dim);
    display: flex;
    flex-direction: column;
  }
  .wide-quick-start-heading {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
    margin-bottom: 6px;
  }
  .wide-quick-start-note {
    font-size: 10px;
    color: var(--text-dim);
    margin: 0 0 10px;
    letter-spacing: 0.05em;
  }
  .wide-quick-start-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .wide-quick-start-card {
    padding: 10px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .wide-quick-start-card:hover { border-color: var(--accent); }
  .wide-quick-start-card .card-detail {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.05em;
  }

  /* Saved configs list */
  .wide-saved-configs {
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .wide-saved-configs-heading {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
    margin-bottom: 10px;
  }
  .wide-saved-configs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
  }
  .wide-saved-configs .config-card {
    padding: 10px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .wide-saved-configs .config-card:hover { border-color: var(--accent); }
  .wide-saved-configs .config-card.active {
    background: var(--bg-panel-elevated);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }
  .wide-saved-configs .config-card.invalid { border-color: var(--danger); }
  .wide-saved-configs .config-card .name {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-primary);
    letter-spacing: 0.05em;
  }
  .wide-saved-configs .config-card.active .name { color: var(--accent); }
  .wide-saved-configs .config-card .meta {
    font-size: 10px;
    color: var(--text-dim);
  }
  .wide-saved-configs .config-card.save-slot {
    border-style: dashed;
    opacity: 0.8;
    align-items: center;
    text-align: center;
  }
  .wide-saved-configs .config-card.save-slot .name { color: var(--text-dim); }
  .wide-save-name-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
  }
  .wide-save-name-row .label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
  }
  .wide-save-name-input {
    background: var(--bg-base);
    border: 1px solid var(--border-dim);
    color: var(--accent);
    font-family: inherit;
    font-size: 11px;
    padding: 8px 10px;
    outline: none;
  }
  .wide-save-name-input:focus { border-color: var(--accent); box-shadow: 0 0 4px var(--accent); }

  /* Per-config action row (icon-first-ui-density SESSION-04) — holds the
     icon-only LOAD upload button and the icon+text destructive DELETE
     button inside each `.wide-saved-configs .config-card`. Layout-only;
     touch-target sizing is delegated to the inner `.btn-crt` rules and
     the surrounding pointer-density guard. */
  .config-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }

  /* Right pane — stacked editor sections */
  .wide-editor {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .wide-editor .creation-warning {
    padding: 12px 14px;
    color: var(--warning);
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .wide-section {
    display: flex;
    flex-direction: column;
  }
  .wide-section-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-dim);
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  .wide-section-heading .subtitle {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-shadow: none;
  }

  /* CLASS section — grid of class cards, projected stats below */
  .wide-editor .class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }
  .wide-editor .class-grid .class-card {
    padding: 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 48px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .wide-editor .class-grid .class-card:hover { border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }
  .wide-editor .class-grid .class-card.selected {
    background: var(--bg-panel-elevated);
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent);
  }
  .wide-editor .class-grid .class-card .row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
  }
  .wide-editor .class-grid .class-card .title {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-primary);
    letter-spacing: 0.05em;
  }
  .wide-editor .class-grid .class-card.selected .title {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
  }
  .wide-editor .class-grid .class-card .stats {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    margin-top: 2px;
  }
  .wide-editor .class-grid .class-card .desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
  }
  .wide-editor .projected-stats {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .wide-editor .projected-stats .heading {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
  }
  .wide-editor .projected-stats .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    font-size: 12px;
  }
  .wide-editor .projected-stats .grid > div {
    display: flex;
    flex-direction: column;
  }
  .wide-editor .projected-stats .grid .label {
    font-size: 9px;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
  }
  .wide-editor .projected-stats .grid .val {
    color: var(--accent);
    font-weight: bold;
    font-size: 14px;
  }
  .wide-editor .projected-stats .signature {
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.4;
  }

  /* SIGIL section — 220px hero preview + 4-col thumbnail grid */
  .wide-editor .sigil-picker {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    align-items: start;
  }
  .wide-editor .sigil-preview {
    width: 220px;
    height: 220px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 90px;
    font-weight: bold;
    text-shadow: 0 0 16px var(--accent), 0 0 32px var(--accent);
    box-shadow: 0 0 24px var(--accent), inset 0 0 24px rgba(126, 200, 227, 0.1);
    /* No font-family here: the sigil font must resolve through the sanctioned
       `.creature-sigil` / `.sigil-preview` rendering boundary in components.css
       (the sigil-lint allowlist forbids the face name in wide.css). Dropping the
       old `ui-monospace` override lets those lower-specificity rules win and
       fixes the tofu-glyph playtest finding. */
    justify-self: start;
  }
  .wide-editor .sigil-preview-caption {
    grid-column: 1;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-align: center;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-top: 8px;
    width: 220px;
  }
  .wide-editor .sigil-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .wide-editor .sigil-thumbs .sigil-option {
    aspect-ratio: 1;
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-weight: bold;
    font-size: 22px;
    text-shadow: 0 0 8px var(--accent);
    cursor: pointer;
    transition: all 0.15s ease;
    /* No font-family here — the glyph is a `.creature-sigil` child that carries
       the sigil face from components.css; the sigil-lint allowlist forbids
       naming the face in wide.css. */
    min-height: 72px;
    background: var(--bg-panel);
    padding: 0;
  }
  .wide-editor .sigil-thumbs .sigil-option:hover {
    box-shadow: 0 0 12px var(--accent);
    transform: scale(1.05);
  }
  .wide-editor .sigil-thumbs .sigil-option.selected {
    box-shadow: 0 0 16px var(--accent), 0 0 24px var(--accent);
    transform: scale(1.08);
  }
  .wide-editor .sigil-thumbs .sigil-option:disabled {
    color: var(--text-disabled);
    border-color: var(--border-dim);
    text-shadow: none;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }
  .wide-editor .sigil-note {
    grid-column: 1 / -1;
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 4px;
    line-height: 1.4;
  }

  /* ATTR section — grid of attribute rows with steppers */
  .wide-editor .attr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
  }
  .wide-editor .attr-grid .attr-row {
    padding: 10px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .wide-editor .attr-grid .attr-row .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .wide-editor .attr-grid .attr-row .name {
    display: flex;
    flex-direction: column;
  }
  .wide-editor .attr-grid .attr-row .name .full {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-primary);
    letter-spacing: 0.05em;
  }
  .wide-editor .attr-grid .attr-row .name .abbrev {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
  }
  .wide-editor .attr-grid .attr-row.primary .name .full {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
  }
  .wide-editor .attr-grid .attr-row .stepper {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .wide-editor .attr-grid .attr-row .stepper .val {
    font-size: 20px;
    font-weight: bold;
    width: 32px;
    text-align: center;
    color: var(--text-primary);
  }
  .wide-editor .attr-grid .attr-row.primary .stepper .val { color: var(--accent); }
  .wide-editor .attr-grid .attr-row .stepper-btn {
    width: 44px;
    height: 44px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
  }
  .wide-editor .attr-grid .attr-row .stepper-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 4px var(--accent);
  }
  .wide-editor .attr-grid .attr-row .stepper-btn:disabled {
    color: var(--text-disabled);
    border-color: var(--border-dim);
    cursor: not-allowed;
  }
  .wide-editor .attr-grid .attr-row .desc {
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.4;
  }
  .wide-editor .attr-grid .attr-row .bar-track {
    background: var(--bg-base);
    height: 4px;
    border: 1px solid var(--border-dim);
  }
  .wide-editor .attr-grid .attr-row .bar-fill {
    height: 100%;
    background: var(--accent);
    box-shadow: 0 0 2px var(--accent);
  }

  /* GEAR + TECH sections — one row per pickable item, priced on the right */
  .wide-editor .gear-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
  }
  .wide-editor .gear-group:last-child { margin-bottom: 0; }
  .wide-editor .gear-group-heading {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    margin-bottom: 6px;
  }
  .wide-editor .gear-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-dim);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 6px;
    min-height: 56px;
    text-align: left;
    gap: 12px;
  }
  .wide-editor .gear-row:hover:not(:disabled) { border-color: var(--accent); }
  .wide-editor .gear-row.selected {
    border-color: var(--accent);
    background: var(--bg-panel-elevated);
    box-shadow: 0 0 6px var(--accent);
  }
  .wide-editor .gear-row:disabled {
    border-color: var(--border-dim);
    border-style: dashed;
    cursor: not-allowed;
  }
  .wide-editor .gear-row .info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }
  .wide-editor .gear-row .info .name {
    font-size: 13px;
    color: var(--text-primary);
    letter-spacing: 0.05em;
  }
  .wide-editor .gear-row.selected .info .name { color: var(--accent); }
  .wide-editor .gear-row .info .stat {
    font-size: 10px;
    color: var(--text-dim);
  }
  .wide-editor .gear-row .cost {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: bold;
    flex-shrink: 0;
  }
  .wide-editor .gear-row.selected .cost {
    color: var(--accent);
    text-shadow: 0 0 4px var(--accent);
  }
  .wide-editor .gear-row .disabled-reason {
    font-size: 9px;
    color: var(--warning);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
  }
  .wide-editor .tech-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .wide-editor .tech-gate-note {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 8px;
    line-height: 1.4;
  }
}