/* ============================================================
   SC2 Timings — styles
   Dark theme, race-coded accents, mono for timestamps.
   ============================================================ */

:root {
  /* 2010-era Blizzard SC2 in-game-HUD palette: deep space black with
     cyan holographic accents and metallic panel grads. Race accents kept
     but recalibrated to match — Terran cobalt, Protoss amber-gold, Zerg
     violet, with soft glow tokens for hover/focus states. */
  --bg-0: #04070d;
  --bg-1: #0a121d;
  --bg-2: #0f1a2a;
  --bg-3: #1a2840;
  --border: #2c4a7a;
  --border-soft: #1a2a44;
  --border-bright: #4a7cb8;

  --text-0: #e6f0ff;
  --text-1: #b8c6dd;
  --text-2: #7e92b1;
  --text-3: #586c8a;

  --accent: #4ec3ff;
  --accent-soft: rgba(78, 195, 255, 0.16);
  --accent-glow: var(--accent-glow);
  --accent-deep: #1d6fa8;

  --terran: #4ea3ff;
  --terran-soft: rgba(78, 163, 255, 0.16);
  --protoss: #ffc84a;
  --protoss-soft: rgba(255, 200, 74, 0.16);
  --zerg: #c074e6;
  --zerg-soft: rgba(192, 116, 230, 0.16);

  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;

  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;

  --radius: 4px;
  --radius-lg: 6px;

  /* Sci-fi frame tokens */
  --panel-grad: linear-gradient(180deg, #16243d 0%, #0c1828 55%, #08111e 100%);
  --panel-grad-soft: linear-gradient(180deg, #11203a 0%, #0a1424 100%);
  --bevel-light: rgba(120, 180, 255, 0.2);
  --bevel-dark: rgba(0, 0, 0, 0.55);
  --scanline: rgba(78, 195, 255, 0.035);
  --hud-shadow: 0 0 0 1px var(--accent-soft), 0 8px 24px rgba(0, 8, 24, 0.6);
}

/* Race-reactive theming: selecting a race re-tints the ENTIRE page — accent,
   borders, panel gradients and the deep background — toward that race's colour
   (Terran cobalt-blue, Protoss amber-gold, Zerg violet), keeping the dark HUD
   style. The .race-transition class (added briefly on switch) animates it. */
body[data-race="terran"] {
  --accent: #4ea3ff; --accent-soft: rgba(78,163,255,0.16); --accent-glow: rgba(78,163,255,0.45); --accent-deep: #1d5fa8;
  --bg-0: #04070d; --bg-1: #0a121d; --bg-2: #0f1a2a; --bg-3: #1a2840;
  --border: #2c4a7a; --border-soft: #16263f; --border-bright: #4a7cb8;
  --bevel-light: rgba(120,180,255,0.2); --scanline: rgba(78,163,255,0.035);
  --panel-grad: linear-gradient(180deg, #16243d 0%, #0c1828 55%, #08111e 100%);
  --panel-grad-soft: linear-gradient(180deg, #11203a 0%, #0a1424 100%);
  --vignette-1: rgba(40, 90, 160, 0.18); --vignette-2: rgba(20, 60, 120, 0.12);
  --header-tint: rgba(30, 60, 110, 0.25);
}
body[data-race="protoss"] {
  --accent: #ffc84a; --accent-soft: rgba(255,200,74,0.16); --accent-glow: rgba(255,200,74,0.42); --accent-deep: #b88a1e;
  --bg-0: #0b0903; --bg-1: #171207; --bg-2: #221a0b; --bg-3: #382a12;
  --border: #6f561f; --border-soft: #2c2110; --border-bright: #b8902a;
  --bevel-light: rgba(255,210,120,0.18); --scanline: rgba(255,200,74,0.03);
  --panel-grad: linear-gradient(180deg, #2a2210 0%, #181206 55%, #120c03 100%);
  --panel-grad-soft: linear-gradient(180deg, #221a0c 0%, #150f05 100%);
  --vignette-1: rgba(190, 140, 40, 0.16); --vignette-2: rgba(150, 100, 20, 0.10);
  --header-tint: rgba(120, 90, 30, 0.25);
}
body[data-race="zerg"] {
  --accent: #c074e6; --accent-soft: rgba(192,116,230,0.16); --accent-glow: rgba(192,116,230,0.45); --accent-deep: #7a3da8;
  --bg-0: #08040d; --bg-1: #130a1d; --bg-2: #1d0f2a; --bg-3: #311a40;
  --border: #54287a; --border-soft: #251440; --border-bright: #8a4ab8;
  --bevel-light: rgba(210,140,255,0.18); --scanline: rgba(192,116,230,0.035);
  --panel-grad: linear-gradient(180deg, #241040 0%, #150a24 55%, #0d0518 100%);
  --panel-grad-soft: linear-gradient(180deg, #1c0d33 0%, #110720 100%);
  --vignette-1: rgba(150, 70, 200, 0.17); --vignette-2: rgba(110, 50, 160, 0.11);
  --header-tint: rgba(90, 40, 130, 0.25);
}
/* Animated colour sweep when switching race — scoped to a transient class so
   it never slows normal hover/focus transitions. */
body.race-transition,
body.race-transition *,
body.race-transition *::before,
body.race-transition *::after {
  transition: background-color 0.55s ease, background-image 0.55s ease,
              border-color 0.55s ease, color 0.4s ease, box-shadow 0.55s ease !important;
}

* { box-sizing: border-box; }

/* Inline UI icons — inherit text colour (so they follow the race accent) and
   sit on the text baseline next to labels. */
.ui-ico {
  display: inline-block;
  vertical-align: -0.14em;
  flex: none;
}
button .ui-ico + span,
button span + .ui-ico { margin-left: 2px; }
.btn-ico { display: inline-flex; align-items: center; gap: 5px; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Header ----- */

.site-header {
  background: linear-gradient(to bottom, var(--bg-1), var(--bg-0));
  border-bottom: 1px solid var(--border-soft);
  padding: 24px 0 20px;
}
.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.title-block { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.site-header h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.subtitle {
  color: var(--text-2);
  font-size: 14px;
}
/* Global header controls — Race (drives all tabs + theme), Live/PTR, and the
   "last updated" stamp, pinned to the right of the title. */
.global-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* Race radio — three icon buttons (Command Center / Nexus / Hatchery as the
   per-race emblems); the active race is lit with the accent. */
.global-race-radio {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
}
.race-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 5px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 12px;
}
.race-radio .race-emblem {
  width: 26px; height: 26px;
  flex: none;
  object-fit: contain;
  opacity: 0.65;
  transition: opacity 0.1s, filter 0.1s;
}
.race-radio:hover .race-emblem { opacity: 1; }
.race-radio[aria-checked="true"] .race-emblem {
  opacity: 1;
  filter: drop-shadow(0 0 5px var(--accent-glow));
}
.race-radio:hover { background: var(--bg-3); }
.race-radio[aria-checked="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.global-updated {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  user-select: none;
}
.toggle input { accent-color: var(--accent); }

/* ----- Mode nav ----- */

.mode-nav {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 10;
}
.mode-nav .container {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.mode-btn {
  background: transparent;
  border: 0;
  color: var(--text-2);
  padding: 14px 18px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.mode-btn:hover { color: var(--text-0); }
.mode-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ----- Panels ----- */

.mode-panel {
  display: none;
  padding: 32px 0;
}
.mode-panel.active { display: block; }
.panel-head { margin-bottom: 22px; }
.panel-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
}
.panel-head p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  max-width: 680px;
}
/* Compact Forge header — keep the title + how-to but reclaim vertical space so
   the actual build-making area sits higher on the page. */
.panel-head-compact {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.panel-head-compact h2 { font-size: 18px; margin: 0; }
/* "How it works" reduced to a small (?) badge; the body opens below as before. */
.forge-howto-q { margin-top: 0; }
.forge-howto-q > summary {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  list-style: none;
  padding: 0;
}
.forge-howto-q > summary::-webkit-details-marker { display: none; }
.forge-howto-q > summary::before { content: none; }
.forge-howto-q[open] > summary { border-color: var(--accent); color: var(--accent); }
.forge-howto-q:hover > summary { color: var(--text-0); border-color: var(--border-bright); }
.panel-head-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: normal;
}
@media (max-width: 700px) { .panel-head-sub { display: none; } }

/* Forge toolbar — a single tight row of secondary actions (Preset, Strict,
   Builds, Share, Clear, Resource priority disclosure) replacing the old
   stacked "Build setup" + "Resource priority" control groups. */
.forge-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.forge-toolbar .ghost { padding: 6px 10px; font-size: 13px; }
.forge-toolbar .ghost,
.marker-btn,
#forge-library, #forge-share { display: inline-flex; align-items: center; gap: 5px; }
.marker-btn { gap: 5px; }
.forge-toolbar .forge-strict-toggle { font-size: 12px; }
.forge-toolbar-preset select { min-width: 150px; }
.forge-toolbar .forge-status {
  margin-left: auto;
  align-self: center;
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
}
.forge-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  border-radius: var(--radius);
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.forge-clear-btn:hover {
  background: color-mix(in srgb, var(--bad) 22%, transparent);
  border-color: var(--bad);
  color: var(--text-0);
}
.forge-clear-btn .ui-ico { width: 15px; height: 15px; }

/* "Options" disclosure — Strict order + Resource priority grouped as a small
   popout so they don't clutter the band above the build editor. */
.forge-options-disclosure { font-size: 12px; position: relative; }
.forge-options-disclosure > summary {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer;
  color: var(--text-2);
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  list-style: none;
  user-select: none;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.forge-options-disclosure > summary::-webkit-details-marker { display: none; }
.forge-options-disclosure[open] > summary { color: var(--accent); border-color: var(--accent); }
.forge-options-disclosure:hover > summary { color: var(--text-0); }
.forge-options-body {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  margin-top: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  box-shadow: var(--hud-shadow);
}
.forge-options-divider { height: 1px; background: var(--border-soft); margin: 10px 0; }
.forge-priority-block .forge-priority-hint { display: block; margin-bottom: 8px; }

/* (?) explanation badge in the compact Forge header. */
.howto-q {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  padding: 0;
  transition: color 0.1s, border-color 0.1s;
}
.howto-q:hover { color: var(--accent); border-color: var(--accent); }
.howto-modal-body { max-height: 70vh; overflow-y: auto; }

/* Race is global now (header selector) — hide the redundant per-tab race
   pickers so there's one source of truth. */
#mode-scout label:has(#scout-race),
#mode-window label:has(#window-race),
#explorer-race-tabs,
#mode-reference .ref-tabs { display: none; }

/* Race is global now (header selector) — hide the redundant per-tab race
   pickers so there's one source of truth. */
#mode-scout label:has(#scout-race),
#mode-window label:has(#window-race),
#explorer-race-tabs,
#mode-reference .ref-tabs { display: none; }

.forge-howto {
  margin-top: 10px;
  border: 1px solid var(--border-1, #2a2a2a);
  border-radius: 6px;
  background: var(--bg-2, rgba(255,255,255,0.02));
  max-width: 820px;
}
.forge-howto > summary {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.forge-howto > summary::before {
  content: "▸ ";
  display: inline-block;
  font-size: 10px;
  margin-right: 4px;
  transition: transform 0.15s;
}
.forge-howto[open] > summary::before { transform: rotate(90deg); }
.forge-howto > summary::-webkit-details-marker { display: none; }
.forge-howto-body {
  padding: 4px 16px 14px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.forge-howto-body h4 {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.forge-howto-body h4:first-child { margin-top: 4px; }
.forge-howto-body ul {
  margin: 0 0 8px;
  padding-left: 22px;
}
.forge-howto-body li { margin-bottom: 3px; }
.forge-howto-body p { margin: 0 0 8px; }
.forge-howto-body code {
  background: var(--bg-3, rgba(255,255,255,0.06));
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* ----- Combo search (filterable dropdown) ----- */

.combo-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.combo-search input[type=text] {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-0);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  width: 100%;
}
.combo-search select {
  width: 100%;
  font-family: var(--mono);
  font-size: 13px;
}

/* ----- Type glyph badges ----- */
.type-glyph {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: middle;
}
.type-glyph.unit { background: var(--accent-soft); color: var(--accent); }
.type-glyph.building { background: var(--bg-3); color: var(--text-1); }
.type-glyph.addon { background: var(--bg-3); color: var(--text-2); }
.type-glyph.upgrade { background: var(--protoss-soft); color: var(--protoss); }

/* ----- Form controls ----- */

.controls-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.controls-row label {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Labelled control groups — organise the Forge header into clearly-named
   sections (Build setup / Resource priority) instead of one crowded bar. */
.forge-controls-group { margin-bottom: 14px; }
.forge-controls-group-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
  margin: 0 0 6px 2px;
}
.forge-controls-group .controls-row { margin-bottom: 0; }
/* Pushes the Builds/Share/Clear cluster + status to the right of the setup row. */
.forge-setup-spacer { flex: 1 1 0; min-width: 0; }
.forge-status {
  align-self: center;
  color: var(--text-3);
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}
.forge-strict-toggle {
  align-self: center;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Production-lane tag on a build row — muted, sits after the entity name. */
.forge-lane {
  margin-left: 6px;
  font-size: 10px;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 0 5px;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: middle;
  white-space: nowrap;
}

select, input[type=text] {
  background: var(--bg-2);
  color: var(--text-0);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  min-width: 140px;
  text-transform: none;
  letter-spacing: normal;
}
select:focus, input[type=text]:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  background: var(--accent);
  color: #06101e;
  border: 0;
  border-radius: 6px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.1s;
}
button:hover { filter: brightness(1.1); }
button.ghost {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--border);
}

/* ----- Result cards ----- */

.result-card {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
}
/* (No race-coloured left border — the global theme conveys race already, and
   the stripe read as visual clutter on the result card.) */

.result-headline {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.result-headline .target-name {
  font-size: 22px;
  font-weight: 600;
}
.headline-times {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.time-big {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.5px;
}
.time-side {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-2);
}
.time-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-3);
  letter-spacing: 0.5px;
  margin-right: 6px;
}

.cost-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--text-1);
}
.cost-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-2);
  border-radius: 999px;
  font-family: var(--mono);
}
.cost-pill .label {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
}
.cost-pill.minerals { color: var(--text-0); }
.cost-pill.gas { color: var(--good); }
.cost-pill.supply { color: var(--warn); }

/* ----- Roster: headline summary chips + visual grid ----- */
.headline-roster {
  display: flex;
  gap: 6px;
  align-items: center;
}
.roster-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--bg-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.2;
}
.roster-chip-glyph {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.roster-group {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}
.roster-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.roster-group-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
}
.roster-group-total {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-1);
}
.roster-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.roster-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  text-align: center;
}
.roster-item-icon {
  position: relative;
}
.roster-count {
  position: absolute;
  bottom: -3px;
  right: -4px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
  pointer-events: none;
}
.roster-item-name {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.2;
  word-break: break-word;
  hyphens: auto;
}

/* ----- Critical path table ----- */

.path-section {
  margin-top: 16px;
}
.path-section h3 {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
  font-weight: 600;
}
.path-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.path-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-2);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.path-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.path-table tr:last-child td { border-bottom: 0; }
.path-table .col-time { font-family: var(--mono); white-space: nowrap; color: var(--text-1); width: 1%; }
.path-table .col-build { font-family: var(--mono); color: var(--text-2); width: 1%; white-space: nowrap; }
.path-table .col-name { font-weight: 500; }
.path-table .col-cost { font-family: var(--mono); color: var(--text-1); white-space: nowrap; width: 1%; }
.path-table .col-detail { color: var(--text-2); font-size: 13px; }
.path-table .row-target td { color: var(--text-0); background: var(--accent-soft); }
.path-table .row-target .col-time { color: var(--accent); font-weight: 600; }
.path-table .row-starting { opacity: 0.65; }
.path-table .row-scouted .col-time { color: var(--protoss); }
.path-table .chrono-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  text-transform: uppercase;
  background: var(--protoss-soft);
  color: var(--protoss);
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--sans);
  letter-spacing: 0.5px;
}
.path-table .scouted-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  text-transform: uppercase;
  background: var(--protoss-soft);
  color: var(--protoss);
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

/* ----- Gantt visualization ----- */

.gantt {
  margin-top: 22px;
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 16px;
  overflow-x: auto;
}
.gantt-row {
  display: grid;
  /* Fixed widths on label and info columns so the track column is the
     same width on every row. Previously `auto` on info meant rows with
     longer info text (e.g., a supply tag) shrank the track and made
     identical-duration bars look different lengths. */
  grid-template-columns: 180px minmax(0, 1fr) 220px;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  min-height: 24px;
}
/* Wrapper that scrolls horizontally when the Gantt's inner min-width
   exceeds the column. Keeps each bar wide enough to be readable on
   long builds — without this, bars get so narrow that text clips
   mid-character. The min-width is computed in JS based on total span. */
.gantt-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.gantt-label {
  font-size: 13px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gantt-label .entity-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.gantt-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.gantt-track {
  position: relative;
  height: 22px;
  background: var(--bg-3);
  border-radius: 4px;
  min-width: 200px;
}
.gantt-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: #06101e;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  min-width: 4px;
  cursor: default;
}
/* Floating duration tag — sits as a sibling to the bar, anchored to
   the bar's right edge in the same percentage coordinate space. This
   avoids the "1..." clipping problem that any inside-the-bar label
   has on narrow bars. The text is faint so it reads as an annotation
   rather than competing with the bar color. */
.gantt-bar-tag {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  pointer-events: none;
}
.gantt-info {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding-left: 4px;
  /* Right-aligned content within a fixed-width column so the track
     column stays identical width on every row. */
  justify-content: flex-end;
  overflow: hidden;
}
.gantt-info .t-start { color: var(--text-1); }
.gantt-info .t-end   { color: var(--accent); font-weight: 600; }
.gantt-info .t-arrow { color: var(--text-3); }
.gantt-info .t-dur   { color: var(--text-3); }
/* Role-coded bars — workers/army/tech/upgrade. Race info isn't lost
   because the entity icon in the label column already carries it. */
.gantt-bar.role-worker  { background: #4ea3ff; }
.gantt-bar.role-army    { background: #f0824a; }
.gantt-bar.role-tech    { background: #ffc84a; }
.gantt-bar.role-upgrade { background: #4ec3ff; }
.gantt-bar.role-other   { background: var(--bg-3); }
.gantt-bar.starting     { background: var(--bg-3); border: 1px dashed var(--border); }
.gantt-bar.is-target    { box-shadow: 0 0 0 2px var(--accent); }

/* ----- Math display ----- */

.math-display {
  margin-top: 22px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-1);
  overflow-x: auto;
}
.math-display .formula-line { white-space: nowrap; }
.math-display .formula-line.final {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  border-top: 1px solid var(--border-soft);
  margin-top: 6px;
  padding-top: 6px;
}
.math-display .var { color: var(--protoss); }
.math-display .num { color: var(--text-0); }

/* ----- Scout list ----- */

.scout-controls .scout-add {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.scout-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.scout-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  font-size: 13px;
}
.scout-pill .x {
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 50%;
  cursor: pointer;
}
.scout-pill .x:hover { background: var(--bg-3); color: var(--bad); }
.scout-empty { color: var(--text-3); font-size: 13px; font-style: italic; }

/* ----- Threat list (scout result) ----- */

.threat-section {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 20px;
}
.threat-section h3 {
  margin: 0 0 14px;
  font-size: 16px;
}
.threat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.threat-card {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.threat-card.race-terran { border-left: 3px solid var(--terran); }
.threat-card.race-protoss { border-left: 3px solid var(--protoss); }
.threat-card.race-zerg { border-left: 3px solid var(--zerg); }

.threat-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}
.threat-time {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 18px;
  font-weight: 600;
}
.threat-meta {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
  font-family: var(--mono);
}

/* ----- Window lookup ----- */

.window-summary {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 20px;
}
.window-summary h3 {
  margin: 0 0 8px;
  font-size: 16px;
}
.window-summary .stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-right: 16px;
  font-size: 13px;
}
.window-summary .stat-num {
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 600;
  font-size: 18px;
}

.window-group { margin-top: 18px; }
.window-group h4 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
}
.window-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  font-size: 13px;
}
.window-list .item {
  background: var(--bg-2);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.window-list .item.unreachable { opacity: 0.4; }
.window-list .item-time {
  font-family: var(--mono);
  color: var(--text-2);
  font-size: 12px;
}

/* ----- Reference tables ----- */

.ref-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.ref-tab {
  background: var(--bg-2);
  color: var(--text-1);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
}
.ref-tab.active { background: var(--accent); color: #06101e; border-color: var(--accent); }

.ref-table-wrap {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.ref-table-wrap h3 {
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
  background: var(--bg-2);
}
.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ref-table th {
  text-align: left;
  padding: 9px 12px;
  background: var(--bg-2);
  font-weight: 500;
  color: var(--text-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-soft);
}
.ref-table th.num, .ref-table td.num {
  text-align: right;
  font-family: var(--mono);
  white-space: nowrap;
}
.ref-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.ref-table tr:last-child td { border-bottom: 0; }
.ref-table tr:hover td { background: var(--bg-2); }
.ref-table .deps {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}

/* ----- Entity icons (image with glyph fallback) ----- */
.entity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 4px;
  background: var(--bg-2);
  vertical-align: middle;
  flex-shrink: 0;
  overflow: hidden;
}
.entity-icon.race-terran  { box-shadow: inset 0 0 0 1px rgba(74, 144, 226, 0.4); }
.entity-icon.race-protoss { box-shadow: inset 0 0 0 1px rgba(255, 184, 74, 0.4); }
.entity-icon.race-zerg    { box-shadow: inset 0 0 0 1px rgba(176, 102, 217, 0.4); }
.entity-icon .ent-img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.entity-icon .icon-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
}
.entity-icon.icon-failed .ent-img { display: none; }
.entity-icon.icon-failed .icon-fallback { display: flex; }

/* Variant-disambiguation badge — anchored bottom-right of the icon.
   Used when an entity reuses another entity's image (e.g., a Factory
   Tech Lab uses the Factory icon as its base) so the user can still
   tell them apart at a glance. The base color is set inline. */
.entity-icon-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  padding: 1px 3px;
  color: #04111e;
  border-top-left-radius: 3px;
  box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
/* Tiny icons (Gantt row labels at 18px etc.) — keep the badge legible
   without dominating the base. */
.entity-icon[style*="18px"] .entity-icon-badge,
.entity-icon[style*="20px"] .entity-icon-badge {
  font-size: 7px;
  padding: 0 2px;
}

/* ----- Resource chart ----- */
.res-chart-wrap {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 12px 8px 8px;
}
.res-chart {
  width: 100%;
  height: auto;
  display: block;
}
.res-chart .grid {
  stroke: var(--border-soft);
  stroke-width: 1;
}
.res-chart .axis-label {
  fill: var(--text-3);
  font-size: 10px;
  font-family: var(--mono);
}
.res-chart .axis-label.sup { fill: var(--warn); }
.res-chart .event-mark {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.35;
}
.res-chart .event-mark.race-terran { stroke: var(--terran); }
.res-chart .event-mark.race-protoss { stroke: var(--protoss); }
.res-chart .event-mark.race-zerg { stroke: var(--zerg); }
.res-chart .line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.res-chart .line-min     { stroke: #a3c2eb; }
.res-chart .line-gas     { stroke: var(--good); }
.res-chart .line-sup     { stroke: var(--warn); }
.res-chart .line-sup-max { stroke: var(--warn); stroke-dasharray: 4 3; opacity: 0.5; stroke-width: 1.5; }
.res-chart .line-workers { stroke: #c9a8ff; stroke-dasharray: 2 3; stroke-width: 1.5; }

/* Milestone event icons rendered above the plot — small portraits
   marking buildings/upgrades/addons, with a thin connector line down
   to the plot area. Hover shows native tooltip via SVG <title>. */
.res-chart .event-icon-mark image {
  cursor: help;
  filter: drop-shadow(0 0 2px var(--accent-glow));
}
.res-chart .event-icon-mark image:hover {
  filter: drop-shadow(0 0 4px var(--accent));
}
.chart-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-2);
  padding: 8px 6px 4px;
}
.chart-legend .swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 2px;
}
.chart-legend .swatch-min     { background: #a3c2eb; }
.chart-legend .swatch-gas     { background: var(--good); }
.chart-legend .swatch-sup     { background: var(--warn); }
.chart-legend .swatch-sup-max { background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); background-size: 6px 3px; opacity: 0.6; }
.chart-legend .swatch-workers { background: linear-gradient(90deg, #c9a8ff 60%, transparent 60%); background-size: 5px 3px; }
.chart-legend .swatch-blocked { background: #d04545; height: 5px; border-radius: 1px; }
.res-chart .supply-blocked-band { fill: #d04545; opacity: 0.85; cursor: help; }
.chart-legend-hint { color: var(--text-3); font-style: italic; margin-left: auto; }

.res-chart-wrap { position: relative; }
.res-chart .hover-cursor {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}
.res-chart .hover-dot {
  stroke-width: 2;
  fill: var(--bg-1);
}
.res-chart .dot-min { stroke: #a3c2eb; }
.res-chart .dot-gas { stroke: var(--good); }
.res-chart .dot-sup { stroke: var(--warn); }
.res-chart .dot-workers { stroke: #c9a8ff; }

.chart-tooltip {
  position: absolute;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-1);
  pointer-events: none;
  z-index: 5;
  min-width: 200px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.chart-tooltip .tt-time {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 4px;
  margin-bottom: 4px;
}
.chart-tooltip .tt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.chart-tooltip .tt-row strong { color: var(--text-0); }
.chart-tooltip .tt-rate { color: var(--text-3); margin-left: auto; }
.chart-tooltip .tt-blocked { color: #d04545; font-weight: 700; font-size: 10px; margin-left: 6px; }
.chart-tooltip .tt-meta { color: var(--text-2); padding-top: 4px; border-top: 1px solid var(--border-soft); margin-top: 4px; }
.chart-tooltip .sw {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 2px;
}
.chart-tooltip .sw-min { background: #a3c2eb; }
.chart-tooltip .sw-gas { background: var(--good); }
.chart-tooltip .sw-sup { background: var(--warn); }

/* Step context: every action queued on the same beat at the cursor. */
.chart-tooltip .tt-context {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}
.chart-tooltip .tt-context-time {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  margin-bottom: 3px;
  font-family: var(--mono, monospace);
}
.chart-tooltip .tt-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-1);
  white-space: nowrap;
  margin-bottom: 1px;
}
.chart-tooltip .tt-step:last-child { margin-bottom: 0; }
.chart-tooltip .tt-step-name { font-weight: 500; }

.gantt-info .t-supply { color: var(--warn); }

/* ----- Build Forge ----- */

.forge-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.forge-column {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  min-width: 0;
}

/* Wide layout: both columns get their own viewport-bounded scroll surface.
   This way the page itself doesn't scroll on edit — the editor stays put
   on the left, and the result column preserves its scrollTop across the
   live re-render so you don't lose your place.
   Inside the editor column the controls (head + add + palette) sit
   in a non-scrolling fixed region at the top, and the build-order list
   is the only thing that scrolls — so the icon palette and search bar
   are always one click away no matter how long the list gets. */
@media (min-width: 1100px) {
  .forge-layout {
    grid-template-columns: minmax(440px, 500px) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }
  .forge-column {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  .forge-column.forge-editor {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
  }
  .forge-editor-fixed {
    flex: 0 0 auto;
  }
  .forge-editor .forge-list {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
    overflow-y: auto;
    padding-right: 4px;
  }
  .forge-editor .forge-browse-grid {
    max-height: 160px;
  }
}
@media (min-width: 1300px) {
  .forge-layout {
    grid-template-columns: minmax(480px, 540px) minmax(0, 1fr);
  }
}
.forge-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.forge-editor-head h3 { margin: 0; }
.forge-quick-add {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.forge-quick-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-right: 4px;
}
.forge-quick-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

/* Browse grid */
.forge-browse {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.forge-browse-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.forge-browse-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
}
.forge-browse-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.browse-tab {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.browse-tab:hover { background: var(--bg-3); color: var(--text-0); }
.browse-tab.active {
  background: var(--accent);
  color: #06101e;
  border-color: var(--accent);
}
/* Live ⇄ PTR economy toggle — a small segmented control in the Forge
   header. Mirrors .browse-tab so it reads as a paired switch. */
.forge-mode-toggle {
  display: inline-flex;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.forge-mode-toggle .mode-tab {
  background: var(--bg-2);
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--text-1);
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.forge-mode-toggle .mode-tab:last-child { border-right: 0; }
.forge-mode-toggle .mode-tab:hover { background: var(--bg-3); color: var(--text-0); }
.forge-mode-toggle .mode-tab.active {
  background: var(--accent);
  color: #06101e;
  font-weight: 600;
}

.forge-browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding: 2px;
}
.browse-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px 6px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: border-color 0.1s, background 0.1s, transform 0.1s;
}
.browse-tile:hover {
  border-color: var(--accent);
  background: var(--bg-3);
  transform: translateY(-1px);
}
.browse-tile:active { transform: translateY(0); }
.browse-tile .entity-icon { width: 36px; height: 36px; }
.browse-tile .tile-name {
  font-size: 11px;
  color: var(--text-0);
  font-weight: 500;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-tile .tile-cost {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
}
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.quick-chip:hover {
  background: var(--bg-3);
  border-color: var(--accent);
  color: var(--text-0);
}
.forge-h3 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
}
.forge-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  max-height: 540px;
  overflow-y: auto;
}
.forge-empty {
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
  padding: 14px 8px;
  text-align: center;
  background: var(--bg-2);
  border-radius: var(--radius);
}
.forge-row {
  display: grid;
  grid-template-columns: 18px 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: grab;
  transition: background 0.1s, border-color 0.1s, transform 0.1s;
}
.forge-row:hover { background: var(--bg-3); border-color: var(--border); }
.forge-row.dragging { opacity: 0.4; cursor: grabbing; }
.forge-row.drop-above { box-shadow: 0 -2px 0 0 var(--accent); }
.forge-row.drop-below { box-shadow: 0 2px 0 0 var(--accent); }
.forge-list.drag-target { outline: 1px dashed var(--border); outline-offset: 2px; border-radius: 8px; }
.forge-list.drop-end { box-shadow: inset 0 -3px 0 0 var(--accent); }
.browse-tile[draggable="true"] { cursor: grab; }
.browse-tile.dragging { opacity: 0.4; cursor: grabbing; }
.quick-chip[draggable="true"] { cursor: grab; }
.quick-chip.dragging { opacity: 0.4; cursor: grabbing; }

.forge-handle {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  text-align: center;
}
.forge-row:hover .forge-handle { color: var(--text-1); }

.forge-num {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 12px;
  text-align: right;
}

.forge-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.forge-action-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.forge-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.forge-name {
  font-weight: 500;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forge-state {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The two most-scanned values get emphasis; the rest of the economy
   readout is muted so the eye lands on time + supply first. */
.forge-state-time {
  color: var(--text-0);
  font-weight: 600;
}
.forge-state-supply {
  color: var(--text-1);
  background: var(--bg-3);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 2px;
}
.forge-state-econ { color: var(--text-3); margin-left: 2px; }
.forge-state-larva {
  color: var(--zerg);
  background: var(--zerg-soft);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 2px;
  font-weight: 600;
}
.forge-state-pending { color: var(--text-3); font-style: italic; }
.forge-state-warn {
  color: var(--warn);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forge-priority {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.forge-priority-hint {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  margin-left: 6px;
}
.priority-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-1);
}
.priority-arrow {
  background: transparent;
  border: 0;
  color: var(--text-2);
  padding: 0 4px;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.priority-arrow:hover:not(:disabled) { color: var(--accent); }
.priority-arrow:disabled { opacity: 0.25; cursor: not-allowed; }
.priority-name {
  padding: 0 4px;
  font-weight: 500;
}
.priority-chip-inline {
  font-size: 11px;
  padding: 2px 3px;
  background: var(--bg-3);
}
.priority-chip-inline .priority-name { padding: 0 3px; font-weight: 400; }
.forge-row-priority { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.forge-priority-inline {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.forge-delay {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 184, 74, 0.15);
  color: var(--warn);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: help;
}
.forge-delay-soft {
  background: rgba(120, 120, 120, 0.12);
  color: var(--text-3);
  font-weight: 400;
}
.forge-cost {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.forge-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.forge-repeat {
  width: 50px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-0);
  border-radius: 4px;
  padding: 4px 6px;
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  min-width: 0;
}
.forge-del {
  background: transparent;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  padding: 2px 8px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.forge-del:hover { color: var(--bad); background: var(--bg-1); }

/* Priority weight chip — same minimal aesthetic as the delete button:
   transparent background, no border, text-only. Hidden by default; the
   row reveals it on hover so the chrome is invisible until needed.
   Always visible (and accent-colored) when the weight is bumped >1, so
   the priorities you've actually set are visible at a glance. */
.forge-weight {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-family: var(--mono, monospace);
  font-size: 11px;
  line-height: 1;
  letter-spacing: -0.5px;
  padding: 0 6px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.5;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.1s, color 0.1s;
}
.forge-row:hover .forge-weight { opacity: 1; }
.forge-weight:hover { color: var(--text-1); background: var(--bg-1); }
.forge-weight-bump {
  color: rgb(96, 165, 250);
  opacity: 1;  /* always fully visible when set */
}
.forge-weight-bump:hover {
  color: rgb(147, 197, 253);
  background: var(--bg-1);
}

/* Timing-pin chip — mirrors .forge-weight: quiet until the row is hovered,
   and stays fully lit (accent) once a pin is set. */
.forge-pin {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-family: var(--mono, monospace);
  font-size: 11px;
  line-height: 1;
  letter-spacing: -0.5px;
  padding: 0 6px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.5;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.1s, color 0.1s;
}
.forge-row:hover .forge-pin { opacity: 1; }
.forge-pin:hover { color: var(--text-1); background: var(--bg-1); }
.forge-pin-set {
  color: rgb(250, 204, 21);
  opacity: 1;  /* always fully visible when set */
}
.forge-pin-set:hover {
  color: rgb(253, 224, 71);
  background: var(--bg-1);
}

/* Chrono Boost chip (Protoss) — quiet until hovered, cyan-lit once enabled. */
.forge-chrono {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1;
  padding: 0 5px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.5;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.1s, color 0.1s;
}
.forge-row:hover .forge-chrono { opacity: 1; }
.forge-chrono:hover { color: var(--text-1); background: var(--bg-1); }
.forge-chrono-set {
  color: var(--accent);
  opacity: 1;
  text-shadow: 0 0 6px var(--accent-glow);
}
/* Spillover: this step only caught the leftover window from an earlier cast —
   show the bolt half-lit (accent, but dimmer, no glow) to distinguish it. */
.forge-chrono-spill {
  color: var(--accent);
  opacity: 0.5;
}
.forge-row:hover .forge-chrono-spill { opacity: 0.7; }
/* Requested but no Nexus energy was available — boost did NOT apply. Warn
   colour so it's clear the chrono didn't take effect. */
.forge-chrono-noenergy {
  color: var(--warn);
  opacity: 1;
}
.forge-list.compact .forge-chrono { height: 24px; }

.forge-add {
  display: flex;
  gap: 6px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 10px;
}
.forge-add input[type=number] { width: 64px; min-width: 64px; }
.forge-add .combo-search input { padding: 6px 8px; font-size: 13px; }
.forge-add .combo-search input:focus { outline: 2px solid var(--accent); outline-offset: 0; }

/* Density toggle for the palette — compact mode = icon-only tiles */
.palette-density-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
  cursor: pointer;
  user-select: none;
}
.palette-density-toggle input { accent-color: var(--accent); }

/* Tier groupings inside the browse palette — a thin label band per tier
   so users see which tech depth a unit/building sits at without having
   to read prereqs in tooltips. */
.palette-tier {
  display: contents;
}
.palette-tier-label {
  grid-column: 1 / -1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  font-weight: 600;
  padding: 6px 4px 2px;
  border-top: 1px dashed var(--border-soft);
  margin-top: 2px;
}
.palette-tier-label:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }

/* Compact mode: icons-as-buttons. No outer frame, no border, no corner
   accent — just the portrait. Hover gets a subtle accent glow so the
   button affordance is still discoverable. */
.forge-browse-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 2px;
}
.forge-browse-grid.compact .browse-tile {
  padding: 2px;
  gap: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.forge-browse-grid.compact .browse-tile::before { display: none; }
.forge-browse-grid.compact .browse-tile:hover {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 0;
  box-shadow: 0 0 10px var(--accent-soft);
  transform: none;
}
.forge-browse-grid.compact .browse-tile .tile-name,
.forge-browse-grid.compact .browse-tile .tile-cost { display: none; }
.forge-browse-grid.compact .browse-tile .entity-icon { width: 32px; height: 32px; }
.forge-browse-grid.compact .palette-tier-label {
  padding: 4px 2px 1px;
  font-size: 9px;
}

/* Inline "+" insert affordance: a thin row that lives between every
   build-order entry. Shows a faint divider on hover, then a small
   "+ insert here" pill on click that opens the quick-insert popover.
   Ensures users can drop a step at any spot without dragging or
   reordering — solves the "lost in a long list" problem. */
.forge-insert {
  height: 6px;
  position: relative;
  cursor: copy;
  margin: -2px 0;
  border-radius: 4px;
  transition: background 0.1s;
}
.forge-insert::before {
  content: '';
  position: absolute;
  left: 36px;
  right: 8px;
  top: 50%;
  height: 1px;
  background: transparent;
  transition: background 0.1s;
}
.forge-insert:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.forge-insert:hover::before { background: var(--accent); }
.forge-insert::after {
  content: '+ insert';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: var(--accent);
  background: var(--bg-0);
  padding: 0 6px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.1s;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--mono);
}
.forge-insert:hover::after { opacity: 1; }
.forge-insert.active { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.forge-insert.active::before { background: var(--accent); }

/* Quick-insert popover — anchored next to the insert point. Shows the
   user's recent items first, then a tier-grouped icon grid for the
   current race. Click an icon to insert at that index. */
.forge-insert-popover {
  position: absolute;
  z-index: 50;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: 10px 12px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 360px;
  overflow-y: auto;
}
.forge-insert-popover h5 {
  margin: 0 0 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  font-weight: 600;
}
.forge-insert-popover h5:not(:first-child) { margin-top: 12px; }
.forge-insert-popover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 2px;
}
.forge-insert-popover-grid .browse-tile {
  padding: 2px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.forge-insert-popover-grid .browse-tile::before { display: none; }
.forge-insert-popover-grid .browse-tile:hover {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 0;
  box-shadow: 0 0 10px var(--accent-soft);
  transform: none;
}
.forge-insert-popover-grid .browse-tile .tile-name,
.forge-insert-popover-grid .browse-tile .tile-cost { display: none; }
.forge-insert-popover-grid .browse-tile .entity-icon { width: 32px; height: 32px; }
.forge-insert-popover-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-0);
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-family: inherit;
}
.forge-insert-popover-search:focus { outline: 2px solid var(--accent); }
.forge-insert-popover-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.forge-insert-popover-close:hover { color: var(--text-0); }

.forge-warnings {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 14px 0;
}
.forge-warnings h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--warn);
}
.forge-warning {
  font-size: 12px;
  color: var(--text-1);
  font-family: var(--mono);
  padding: 2px 0;
}
.forge-insights {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 14px 0;
}
.forge-insights h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--accent);
}
.forge-insight {
  font-size: 12px;
  color: var(--text-1);
  padding: 2px 0;
}

@media (max-width: 800px) {
  .forge-layout {
    grid-template-columns: 1fr;
  }
  .forge-row {
    grid-template-columns: 24px 30px 1fr 48px 24px;
    font-size: 12px;
  }
}

/* ----- Modal ----- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 20, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  width: min(440px, 90vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal h4 {
  margin: 0 0 4px;
  font-size: 17px;
}
.modal-row { margin: 12px 0; }
.modal-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.modal-row select { width: 100%; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.modal.modal-wide {
  width: min(780px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

/* ----- Build Library modal ----- */

.build-library {
  padding: 20px 22px;
}
.library-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.library-head h4 { margin: 0 0 2px; font-size: 17px; }
.library-sub {
  margin: 0;
  color: var(--text-2);
  font-size: 12.5px;
}
.library-sub em { color: var(--text-1); font-style: normal; }

.icon-btn {
  width: 30px; height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.library-save {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.library-save-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.library-save-row input[type="text"] {
  flex: 1 1 280px;
  min-width: 220px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-0);
  border-radius: var(--radius);
  padding: 8px 10px;
  font: inherit;
}
.library-save-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-3);
}

.library-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.library-filter {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
}
.library-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
}
.library-filter-btn:hover { color: var(--text-0); }
.library-filter-btn.active {
  background: var(--bg-3);
  color: var(--text-0);
}

.library-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}
.library-empty {
  padding: 28px 14px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  background: var(--bg-2);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
}

.library-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: border-color 120ms;
}
.library-card:hover { border-color: var(--border); }
.library-card-main { min-width: 0; flex: 1; }
.library-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}
.library-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.library-card-meta {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 3px;
  font-family: var(--mono);
}
.library-source {
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
}
.library-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.library-card-actions button {
  padding: 6px 10px;
  font-size: 12px;
}
.library-card-actions .danger:hover {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.4);
  color: var(--bad);
}

.race-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  border: 1px solid transparent;
}
.race-chip.race-terran { background: var(--terran-soft); color: var(--terran); border-color: var(--terran-soft); }
.race-chip.race-protoss { background: var(--protoss-soft); color: var(--protoss); border-color: var(--protoss-soft); }
.race-chip.race-zerg { background: var(--zerg-soft); color: var(--zerg); border-color: var(--zerg-soft); }

/* ----- Replay import picker ----- */

.picker-toolbar {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.picker-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-1);
  flex-wrap: wrap;
  text-transform: none;
  letter-spacing: 0;
}
.picker-duration input[type="number"] {
  width: 60px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-0);
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  font-family: var(--mono);
}
.picker-hint {
  color: var(--text-3);
  font-size: 11.5px;
  flex-basis: 100%;
}

.replay-step-swap {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
}

.replay-players {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 8px;
}
.replay-player {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.replay-player-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
}
.replay-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.replay-stepcount {
  color: var(--text-3);
  font-size: 12px;
  font-family: var(--mono);
}
.replay-result {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
}
.replay-result.win  { background: rgba(74, 222, 128, 0.15); color: var(--good); }
.replay-result.loss { background: rgba(248, 113, 113, 0.15); color: var(--bad); }
.replay-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
  font-size: 12px;
  color: var(--text-1);
}
.replay-step {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 3px 7px;
  font-family: var(--mono);
}
.replay-more {
  font-size: 11px;
  color: var(--text-3);
  align-self: center;
  margin-left: 4px;
}
.replay-player-actions {
  display: flex;
  gap: 8px;
}
.replay-player-actions button {
  font-size: 12.5px;
  padding: 6px 12px;
}
.replay-empty-note {
  font-size: 12px;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: 8px;
}

.forge-row-swap {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ----- Notes / footer ----- */

.notes-block {
  margin: 32px 0 40px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.notes-block h3 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
}
.notes-block ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.6;
}

.site-footer {
  margin-top: 40px;
  padding: 18px 0 30px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-3);
  font-size: 12px;
}
.footer-sep { margin: 0 8px; }

code {
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.9em;
}

/* ----- Mobile ----- */

@media (max-width: 700px) {
  .container { padding: 0 16px; }
  .site-header { padding: 18px 0 14px; }
  .site-header h1 { font-size: 22px; }
  .mode-btn { padding: 12px 12px; font-size: 13px; }
  .controls-row { padding: 12px; gap: 10px; }
  .controls-row label { width: 100%; }
  select, input[type=text] { width: 100%; min-width: 0; }
  .scout-controls .scout-add { flex-direction: column; align-items: stretch; }
  .gantt-row {
    grid-template-columns: 100px 1fr;
    gap: 6px;
    grid-template-areas: "label track" "info info";
    margin-bottom: 12px;
  }
  .gantt-label { grid-area: label; }
  .gantt-track { grid-area: track; }
  .gantt-info {
    grid-area: info;
    font-size: 10px;
    padding-left: 0;
  }
  .gantt-label { font-size: 12px; }
  .time-big { font-size: 22px; }
  .result-headline { gap: 10px; }
  .path-table th, .path-table td { padding: 6px 8px; font-size: 13px; }
  .path-table .col-detail { display: none; }
}

/* ============================================================
   Production efficiency — per-producer timeline showing busy/idle
   intervals on the build's time axis. Idle gaps are visible amber
   stretches; flagged producers turn red.
   ============================================================ */
.prod-util-scroll {
  /* Cap to container width — segments scale to fit instead of overflowing.
     Short events get a 2px minimum visual width via .prod-util-seg's
     percentage minimum so they stay hoverable. */
  overflow-x: hidden;
  border-radius: var(--radius);
}
.prod-util {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prod-util-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding: 5px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.prod-util-row.flagged {
  border-color: var(--bad);
  background: rgba(248, 113, 113, 0.06);
}
.prod-util-icon {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  left: 0;
  /* Match the row background so bars sliding under stay hidden. Flagged rows
     use the same solid backdrop — the slight tint difference vs the body is
     acceptable in exchange for clean horizontal scrolling. */
  background: var(--bg-2);
  z-index: 2;
  margin: -5px 0 -5px -8px;
  padding: 0 6px 0 8px;
}
.prod-util-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prod-util-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.prod-util-name {
  color: var(--text-0);
  font-weight: 600;
  font-size: 13px;
}
.prod-util-slots {
  color: var(--text-2);
  font-weight: 400;
  font-family: var(--mono);
  font-size: 12px;
}
.prod-util-pct {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.prod-util-pct.flagged { color: var(--bad); font-weight: 600; }
.prod-util-track-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.prod-util-track {
  position: relative;
  height: 7px;
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
}
.prod-util-avail {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(251, 191, 36, 0.32);
}
.prod-util-row.flagged .prod-util-avail {
  background: rgba(248, 113, 113, 0.40);
}
.prod-util-seg {
  position: absolute;
  top: 0; bottom: 0;
  min-width: 2px;  /* keep short actions hoverable when the Gantt is compressed */
  background: var(--good);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
/* Colored segments by entity kind so a Barracks lane visually distinguishes
   Marines, Tech Lab, Reactor, etc. Workers get a calmer hue since they
   dominate CC lanes; combat units use the brightest accent. */
.prod-util-seg-worker  { background: #4ade80; }  /* green — workers */
.prod-util-seg-unit    { background: #38bdf8; }  /* blue — combat units */
.prod-util-seg-addon   { background: #fbbf24; }  /* amber — Tech Lab/Reactor build */
.prod-util-seg-upgrade { background: #c084fc; }  /* purple — research */
.prod-util-seg-morph   { background: #facc15; }  /* gold — OC/Lair/Hive morph */
.prod-util-seg-swap    { background: #fb923c; }  /* orange — addon swap */

/* Idle gap overlays — translucent fills with cause-coded color, layered on
   top of the avail base but below the busy segments so they only paint
   stretches where nothing actually queued. Hover for the diagnosis tip. */
.prod-util-idle {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 0;
  cursor: help;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.prod-util-idle-supply {
  background: repeating-linear-gradient(135deg,
    rgba(248, 113, 113, 0.32) 0 6px,
    rgba(248, 113, 113, 0.10) 6px 12px);
  border-color: rgba(248, 113, 113, 0.6);
}
.prod-util-idle-resources {
  background: repeating-linear-gradient(135deg,
    rgba(251, 191, 36, 0.32) 0 6px,
    rgba(251, 191, 36, 0.10) 6px 12px);
  border-color: rgba(251, 191, 36, 0.6);
}
.prod-util-idle-list-order {
  background: repeating-linear-gradient(135deg,
    rgba(148, 163, 184, 0.30) 0 6px,
    rgba(148, 163, 184, 0.08) 6px 12px);
  border-color: rgba(148, 163, 184, 0.5);
}
.prod-util-idle:hover { filter: brightness(1.4); }

/* Styled hover tooltip for Gantt segments. Positioned via JS, anchored to
   body so it doesn't get clipped by the scroll container. Short delay,
   rich content, theme-coloured borders by cause. */
.prod-util-tooltip {
  position: absolute;
  z-index: 10000;
  background: var(--bg-1, #1a1a1a);
  border: 1px solid var(--border-1, #333);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.04);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-1, #ddd);
  max-width: 380px;
  line-height: 1.45;
  pointer-events: none;
  font-family: var(--ui-font, system-ui, sans-serif);
}
.prod-util-tooltip .ptip-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-1, #333);
}
.prod-util-tooltip .ptip-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-1, #fff);
}
.prod-util-tooltip .ptip-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3, #888);
}
.prod-util-tooltip .ptip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 2px;
}
.prod-util-tooltip .ptip-row > span:first-child {
  color: var(--text-3, #888);
}
.prod-util-tooltip .ptip-row > span:last-child {
  color: var(--text-1, #ddd);
  font-family: var(--mono, monospace);
}
.prod-util-tooltip .ptip-mute { color: var(--text-3, #888); }
.prod-util-tooltip .ptip-text {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-1, #333);
  color: var(--text-2, #bbb);
  font-size: 11.5px;
}
.prod-util-tooltip .ptip-warn {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(248, 113, 113, 0.4);
  color: rgb(248, 113, 113);
  font-size: 11.5px;
}
/* Cause-colored title accents for idle tooltips. */
.prod-util-tooltip .ptip-title.ptip-idle-supply .ptip-name { color: rgb(248, 113, 113); }
.prod-util-tooltip .ptip-title.ptip-idle-resources .ptip-name { color: rgb(251, 191, 36); }
.prod-util-tooltip .ptip-title.ptip-idle-list-order .ptip-name { color: rgb(148, 163, 184); }

/* Competing-spends list inside the idle tooltip — shows what was draining
   the bank in/near a resource-blocked gap. */
.prod-util-tooltip .ptip-compete {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-1, #333);
}
.prod-util-tooltip .ptip-compete-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3, #888);
  margin-bottom: 4px;
}
.prod-util-tooltip .ptip-compete-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  font-size: 11.5px;
  margin-bottom: 1px;
}
.prod-util-tooltip .ptip-compete-row > span:nth-child(2) {
  font-family: var(--mono, monospace);
  font-size: 11px;
}
.prod-util-tooltip .ptip-compete-row > span:nth-child(4) {
  font-family: var(--mono, monospace);
  color: rgb(251, 191, 36);
}
.prod-util-tooltip .ptip-weight {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  color: var(--text-3, #888);
  letter-spacing: -0.5px;
}
.prod-util-tooltip .ptip-weight-bump {
  color: rgb(96, 165, 250);  /* blue accent so >1 weights pop */
  font-weight: 600;
}

/* Orphan lane — actions that had no eligible producer free in time
   (e.g., a 2nd Orbital Command queued without a 2nd Command Center
   ready). Styled distinctly so users see the mismatch instead of
   thinking the action landed on a real producer. */
.prod-util-track-orphan {
  background: rgba(248, 113, 113, 0.15);
  border: 1px dashed rgba(248, 113, 113, 0.5);
  height: 14px;
  display: flex;
  align-items: center;
  padding-left: 6px;
}
.prod-util-orphan-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bad);
  font-family: var(--mono);
  pointer-events: none;
  z-index: 2;
  background: var(--bg-0);
  padding: 0 4px;
}
.prod-util-seg-orphan {
  background: var(--bad);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 4px rgba(248, 113, 113, 0.5);
}
.prod-util-axis-row {
  display: flex;
  gap: 8px;
  padding: 4px 8px 0 8px;
  /* Transparent border to match data rows' 1px border under box-sizing:
     border-box. Without this the axis is 2px wider than rows and the
     percentage marks drift. */
  border: 1px solid transparent;
}
.prod-util-axis-row .prod-util-icon {
  background: transparent;
  margin: -4px 0 0 -8px;
  padding: 0 6px 0 8px;
}
.prod-util-axis {
  position: relative;
  flex: 1 1 auto;
  height: 14px;
}
.prod-util-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
}
.prod-util-tick:first-child { transform: none; }
.prod-util-tick:last-child { transform: translateX(-100%); }
.prod-util-flag-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--bad);
  background: rgba(248, 113, 113, 0.15);
  border-radius: 999px;
  font-family: var(--mono);
  vertical-align: middle;
}
.prod-util-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-2);
}
.prod-util-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.prod-util-key {
  display: inline-block;
  width: 16px;
  height: 9px;
  border-radius: 2px;
}
.prod-util-key.busy { background: var(--good); }
.prod-util-key.idle { background: rgba(251, 191, 36, 0.45); }
.prod-util-key.offline { background: var(--bg-3); }

/* ----- Share / SALT modal ----- */
.share-modal { padding: 20px 22px; }
.share-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.share-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 0;
}
.share-tab:hover { color: var(--text-1); }
.share-tab.active {
  color: var(--text-1);
  border-bottom-color: var(--accent);
}
.share-pane { display: none; }
.share-pane.active { display: block; }
.share-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.share-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-1);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
  min-height: 60px;
  white-space: pre;
}
.share-textarea.share-textarea-tall {
  /* Tall enough to show many rows without scrolling inside the box,
     but capped so the modal doesn't outgrow the viewport. */
  min-height: 300px;
  max-height: 60vh;
}
.share-textarea.share-mono { word-break: break-all; white-space: pre-wrap; }
.share-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.share-skipped {
  flex: 1;
  font-size: 11px;
  color: var(--text-3);
}
.share-section { margin-bottom: 18px; }
.share-section-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
  margin-bottom: 6px;
}
.share-foot {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ================================================================
   PASS 2 — 2010 Blizzard SC2 era theme
   Inspired by the in-game Terran HUD: deep space black with cyan
   holographic accents, metallic frame panels with beveled corners,
   geometric uppercase headings, scanline ambience.
   These overrides come after the base styles so they win the cascade
   without requiring surgical edits to every existing selector.
   ================================================================ */

/* Body backdrop: a dark-blue radial vignette over space-black, with a
   very subtle scanline pattern. Fixed so it doesn't scroll. */
html, body {
  background:
    radial-gradient(ellipse at 50% -10%, var(--vignette-1), transparent 60%),
    radial-gradient(ellipse at 80% 110%, var(--vignette-2), transparent 55%),
    var(--bg-0);
  background-attachment: fixed;
  position: relative;
}
body::before {
  /* CRT-style scanline overlay sits ABOVE everything but is wholly
     transparent except for hairlines, so the page is fully usable
     underneath. pointer-events:none lets clicks pass through to content. */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    var(--scanline) 2px,
    var(--scanline) 3px
  );
  z-index: 9999;
  opacity: 0.4;
}

/* ----- Site header: command-bridge feel ----- */
.site-header {
  background:
    linear-gradient(180deg, var(--header-tint) 0%, rgba(10, 12, 18, 0.6) 100%),
    var(--bg-0);
  border-bottom: 1px solid var(--border);
  box-shadow:
    inset 0 -1px 0 var(--accent-soft),
    0 1px 0 rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 28px 0 22px;
  position: relative;
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0, var(--accent) 20%, var(--accent) 80%, transparent 100%);
  opacity: 0.4;
  filter: blur(1px);
}
.site-header h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-0);
  text-shadow: 0 0 18px var(--accent-glow), 0 0 1px var(--accent-glow);
  position: relative;
  padding-left: 18px;
}
.site-header h1::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  box-shadow: 0 0 8px var(--accent-glow);
}
.subtitle {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--text-2);
  font-family: var(--mono);
}

/* ----- Mode nav: tactical command tabs ----- */
.mode-nav {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--accent-soft);
}
.mode-nav .container {
  display: flex;
  gap: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.mode-btn {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border-soft);
  color: var(--text-2);
  padding: 14px 22px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.15s, background 0.15s;
}
.mode-btn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.15s;
  box-shadow: 0 0 8px var(--accent-glow);
}
.mode-btn:hover { color: var(--text-0); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mode-btn.active {
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.mode-btn.active::after { transform: scaleX(1); }
.mode-btn:first-child { border-left: 1px solid var(--border-soft); }

/* ----- Panel headings ----- */
.panel-head h2 {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 18px;
  color: var(--text-0);
  font-weight: 700;
  margin: 0 0 6px;
  position: relative;
  padding-left: 14px;
}
.panel-head h2::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  box-shadow: 0 0 6px var(--accent-glow);
}
.panel-head p {
  color: var(--text-2);
  font-size: 13px;
  max-width: 720px;
}

/* ----- Panels: metallic HUD frame ----- */
.forge-column,
.notes-block {
  background: var(--panel-grad);
  border: 1px solid var(--border);
  /* Race-tinted HUD frame edge along the top — like the in-game panel rails. */
  border-top: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow:
    inset 0 1px 0 var(--bevel-light),
    inset 0 -1px 0 var(--bevel-dark),
    var(--hud-shadow);
  position: relative;
  border-radius: 0;
}
/* Subtle 2011-HUD corner brackets — small accent notches at the top-left and
   bottom-right of each column, plus a thin accent rule along the very top edge.
   Kept low-opacity so they read as "framing", not clutter. */
.forge-column::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: linear-gradient(135deg, var(--accent) 0 45%, transparent 45%);
  opacity: 0.4;
  pointer-events: none;
}
.forge-column::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  background: linear-gradient(315deg, var(--accent) 0 45%, transparent 45%);
  opacity: 0.4;
  pointer-events: none;
}

.forge-h3 {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* ----- Buttons: clipped corners, holo highlight.
   Targeting via :is() is too broad — there are dozens of small button
   types in this app. Set defaults that look good on the primary action
   buttons (Add, etc.), then back off via the .ghost class for the rest. */
/* Primary action buttons.
   Border is OFF — a 1px border can't follow a clip-path diagonal cut, so
   the corner reads as "broken." The gradient + inset highlights/shadows
   already give the button a clean, well-defined edge. Smaller corner
   cuts (5px) for proportions on these short buttons. */
.forge-add #forge-add-btn,
#scout-add-btn,
.modal-actions button[data-act="ok"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, #060b14) 0%, color-mix(in srgb, var(--accent) 34%, #060b14) 100%);
  color: var(--text-0);
  border: 0;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 10px var(--accent-soft);
  transition: filter 0.1s, box-shadow 0.1s;
}
.forge-add #forge-add-btn:hover,
#scout-add-btn:hover,
.modal-actions button[data-act="ok"]:hover {
  filter: brightness(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0 14px var(--accent-glow);
}
button.ghost {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  color: var(--text-1);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
button.ghost:hover {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border-color: var(--accent);
  color: var(--text-0);
}

/* ----- Form inputs.
   All form controls get the dark HUD background and crisp 1px border.
   Native number-input spinners and the OS-themed select chevron are
   replaced with custom themed alternatives so nothing looks "browser
   default." Number inputs still accept arrow-key and scroll-wheel
   increment natively. */
input[type="text"],
input[type="number"],
select,
textarea {
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text-0);
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 0;
  transition: border-color 0.1s, box-shadow 0.1s;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent-soft);
}

/* Number inputs — keep the native up/down spinner so the field is
   immediately functional. Mono digits + right-align so the value reads
   as a counter. The native spinner colors are OS-themed and slightly
   off the HUD palette, but the alternative (custom +/- buttons or no
   spinner at all) was strictly worse for usability. */
input[type="number"] {
  font-family: var(--mono);
  text-align: right;
}

/* Selects — strip the OS chevron and draw our own in accent cyan via an
   inline SVG background. The encoded SVG keeps everything dependency-free. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0 Z' fill='%234ec3ff'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 6px;
  padding-right: 28px;
  cursor: pointer;
}
select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0 Z' fill='%23a8e0ff'/></svg>");
}
select::-ms-expand { display: none; }
/* The dropdown menu items themselves use OS styling on most browsers —
   only Chrome/Edge let you style optgroup/option. Set readable colors
   so the open list at least matches the dark theme on those engines. */
select option,
select optgroup { background: var(--bg-0); color: var(--text-0); }

/* Repeat-count input on each forge row keeps the same theming */
.forge-repeat {
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text-0);
  font-family: var(--mono);
  text-align: right;
  border-radius: 0;
}
.forge-repeat:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ----- Browse / reference tabs.
   No clip-path here — these inactive chips have semi-transparent bg, so a
   diagonal corner cut produces a borderless edge along the diagonal that
   reads as "broken." Sharp 1px rectangles with a thin glow border keep
   the sci-fi feel without that artifact. */
.browse-tab,
.ref-tab {
  background: linear-gradient(180deg, rgba(40, 70, 110, 0.3), rgba(15, 28, 48, 0.3));
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  padding: 5px 12px;
  border-radius: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  font-weight: 600;
}
.browse-tab:hover,
.ref-tab:hover {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  color: var(--text-0);
  border-color: var(--border-bright);
}
.browse-tab.active,
.ref-tab.active {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #04111e;
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ----- Browse tiles: HUD targeting cell ----- */
.browse-tile {
  background: linear-gradient(180deg, rgba(20, 40, 70, 0.6), rgba(10, 20, 35, 0.6));
  border: 1px solid var(--border-soft);
  border-radius: 0;
  position: relative;
  transition: border-color 0.1s, background 0.1s, transform 0.1s, box-shadow 0.1s;
}
.browse-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  border-style: solid;
  border-width: 8px 8px 0 0;
  border-color: var(--accent) transparent transparent transparent;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.1s;
}
.browse-tile:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: 0 0 12px var(--accent-soft);
  transform: translateY(-1px);
}
.browse-tile:hover::before { opacity: 0.9; }
.browse-tile .tile-name {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
}
.browse-tile .tile-cost {
  font-size: 9px;
  color: var(--text-3);
}

/* ----- Build-order rows: console line items ----- */
.forge-row {
  background: linear-gradient(180deg, rgba(20, 40, 70, 0.4), rgba(10, 20, 35, 0.5));
  border: 1px solid var(--border-soft);
  border-radius: 0;
  border-left: 3px solid var(--border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 5%, transparent);
}
.forge-row:hover {
  background: linear-gradient(180deg, rgba(40, 75, 120, 0.5), rgba(20, 40, 70, 0.5));
  border-color: var(--border-bright);
  border-left-color: var(--accent);
}
.forge-num {
  font-family: var(--mono);
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-soft);
}
.forge-name {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  font-size: 13px;
}

/* ----- Quick chips & priority chips.
   Same rationale as the tabs above — no clip-path on transparent
   backgrounds. Sharp rectangles + accent glow on hover. */
.quick-chip,
.priority-chip {
  background: linear-gradient(180deg, rgba(40, 70, 110, 0.4), rgba(15, 28, 48, 0.4));
  border: 1px solid var(--border);
  border-radius: 0;
}
.quick-chip:hover {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-soft);
}

/* ----- Race chip pills ----- */
.race-chip {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0;
}

/* ----- Result card: telemetry feel.
   The result-card sits inside the right forge-column which already has
   corner triangles, so we don't double up. Race accent gets a top stripe. */
.result-card {
  background: linear-gradient(180deg, rgba(15, 28, 48, 0.4), rgba(8, 14, 24, 0.6));
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 18px;
  margin: 0;
  position: relative;
}
.result-card.race-terran  { border-top: 2px solid var(--terran); }
.result-card.race-protoss { border-top: 2px solid var(--protoss); }
.result-card.race-zerg    { border-top: 2px solid var(--zerg); }
.target-name {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}
.time-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 9px;
  color: var(--text-3);
}
.time-big {
  font-family: var(--mono);
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
  font-weight: 700;
}

/* ----- Cost pills: HUD readouts (sharp rectangles, no clip-path).
   Same reason as the chip rules above — semi-transparent backgrounds
   don't pair well with diagonal clip cuts. */
.cost-pill {
  border-radius: 0;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(30, 50, 80, 0.6), rgba(10, 18, 32, 0.7));
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 11px;
  padding: 4px 10px;
}
.cost-pill .label {
  font-size: 9px;
  color: var(--text-3);
  margin-right: 4px;
}

/* ----- Gantt bars: HUD progress meters ----- */
.gantt-track {
  background: rgba(8, 16, 30, 0.7);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  height: 22px;
  position: relative;
  overflow: hidden;
}
.gantt-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 8px,
    color-mix(in srgb, var(--accent) 5%, transparent) 8px,
    color-mix(in srgb, var(--accent) 5%, transparent) 9px
  );
  pointer-events: none;
}
.gantt-bar {
  border-radius: 0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 6px rgba(0, 0, 0, 0.3);
}
.gantt-label-text {
  letter-spacing: 0.3px;
}

/* ----- Tables ----- */
.path-table {
  border: 1px solid var(--border-soft);
  background: rgba(8, 14, 26, 0.5);
}
.path-table thead th {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-size: 10px;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
}
.path-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* ----- Headings inside result panels ----- */
.path-section h3 {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--accent);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 5px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 12px;
}
.path-section h3::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 6px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent-glow);
}

/* ----- Roster grid items ----- */
.roster-group {
  background: linear-gradient(180deg, rgba(15, 28, 48, 0.6), rgba(8, 14, 24, 0.8));
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 10px;
}
.roster-group-head {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.roster-group-name {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
}
.roster-group-total {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-1);
}
.roster-item {
  background: rgba(15, 28, 48, 0.4);
  border: 1px solid transparent;
  transition: border-color 0.1s, background 0.1s;
}
.roster-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 8px var(--accent-soft);
}
.roster-count {
  background: var(--accent);
  color: #04111e;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 0;
  clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
}

/* ----- Footer ----- */
.site-footer {
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 14px 0;
}

/* ----- Scrollbar (webkit) ----- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border: 1px solid var(--bg-0);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border); }
* { scrollbar-color: var(--bg-3) var(--bg-0); }  /* Firefox */

/* ----- Notes block ----- */
.notes-block {
  padding: 16px 18px;
}
.notes-block h3 {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--accent);
  margin: 0 0 8px;
}
.notes-block ul li {
  font-size: 12px;
  color: var(--text-2);
  padding: 3px 0 3px 14px;
  position: relative;
  list-style: none;
}
.notes-block ul {
  padding-left: 0;
}
.notes-block ul li::before {
  content: '◤';
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--accent);
  font-size: 9px;
  opacity: 0.7;
}

/* ----- Forge browse-grid heading and palette tier labels ----- */
.forge-browse-label {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
}
.palette-tier-label {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* ----- Modals ----- */
.modal {
  background: var(--panel-grad);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 var(--bevel-light),
    inset 0 -1px 0 var(--bevel-dark),
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 30px var(--accent-soft);
  position: relative;
}
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 18px; height: 18px;
  background: linear-gradient(135deg, var(--accent) 0 50%, transparent 50%);
  opacity: 0.7;
}
.modal::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 18px; height: 18px;
  background: linear-gradient(315deg, var(--accent) 0 50%, transparent 50%);
  opacity: 0.7;
}
.modal h4 {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  font-size: 14px;
}

/* ----- Toggle (no clip-path — see chip rules above) ----- */
.toggle {
  background: linear-gradient(180deg, rgba(20, 40, 70, 0.4), rgba(8, 16, 30, 0.5));
  border: 1px solid var(--border-soft);
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

/* ----- Mode panel container ----- */
.mode-panel {
  padding: 22px 0;
}
.panel-head {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

/* ----- Window Lookup result items — icon + name + time in compact tiles.
   The whole list of "what you can have by T:TT" reads as a sorted icon
   grid grouped by type. */
.window-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.window-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(20, 40, 70, 0.4), rgba(10, 20, 35, 0.5));
  border: 1px solid var(--border-soft);
  padding: 7px 10px;
  font-size: 13px;
  transition: border-color 0.1s, background 0.1s;
}
.window-item:hover {
  border-color: var(--border-bright);
  background: linear-gradient(180deg, rgba(40, 75, 120, 0.5), rgba(20, 40, 70, 0.5));
}
.window-item.unreachable { opacity: 0.45; }
.window-item .entity-icon { width: 32px; height: 32px; flex: 0 0 auto; }
.window-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.window-item-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.window-item-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
}
.window-group-count {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

/* ----- Reference table icons — small portrait next to each row name. */
.ref-table .col-name-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ref-row-icon { display: inline-flex; flex: 0 0 auto; }
.ref-row-icon .entity-icon { width: 24px; height: 24px; }

/* ----- Entity picker — shared icon-grid component used on Tech Explorer
   and Scout Translator. Same visual language as the Forge palette but
   includes a race-tab strip for pages that span all three races. */
.entity-picker {
  background: var(--panel-grad);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 var(--bevel-light),
    inset 0 -1px 0 var(--bevel-dark),
    var(--hud-shadow);
  padding: 14px 16px;
  margin: 16px 0;
}
.entity-picker h3 {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 6px;
}
.entity-picker-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.entity-picker-races,
.entity-picker-types {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.race-tab {
  background: linear-gradient(180deg, rgba(40, 70, 110, 0.3), rgba(15, 28, 48, 0.3));
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  padding: 5px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  font-weight: 600;
}
.race-tab:hover { color: var(--text-0); border-color: var(--border-bright); }
.race-tab.active { color: #04111e; border-color: var(--accent); }
.race-tab[data-race="terran"].active  { background: var(--terran); }
.race-tab[data-race="protoss"].active { background: var(--protoss); }
.race-tab[data-race="zerg"].active    { background: var(--zerg); }
.entity-picker-hint {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--mono);
}
.entity-picker-grid {
  max-height: 360px;
  overflow-y: auto;
}
.entity-picker-grid .browse-tile.is-selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--accent) 22%, transparent));
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ----- Collapsible sections.
   Any element with class="collapsible-section" and data-section-id
   becomes click-to-toggle on its h3. State persists in localStorage so
   the user's preference survives reloads. The chevron rotates and the
   content (everything that isn't an h3) hides when collapsed. */
.collapsible-section h3 {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.collapsible-section h3::after {
  content: '▾';
  margin-left: auto;
  color: var(--text-3);
  font-size: 11px;
  transition: transform 0.15s, color 0.1s;
  display: inline-block;
}
.collapsible-section h3:hover::after { color: var(--accent); }
.collapsible-section[data-collapsed="true"] h3::after { transform: rotate(-90deg); }
.collapsible-section[data-collapsed="true"] h3 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
}
.collapsible-section[data-collapsed="true"] > :not(h3) {
  display: none;
}

/* ----- Editor column layout — single section divider above the list.
   Removed the duplicate "Add Unit" header (the search placeholder
   self-labels). The palette grid is collapsible so users can give the
   Build Order list the full column when they're working on a long build. */

/* The row holding the situational marker buttons (Swap / Priority / Gas /
   Idle) + the recent chips strip — they share a row instead of stacking.
   These are advanced/occasional actions, so they're visually demoted below
   the primary add-entity flow. */
.forge-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}
.forge-action-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 2px;
}
.forge-action-row .marker-btn {
  font-size: 12px;
  padding: 3px 8px;
  opacity: 0.85;
}
.forge-action-row .marker-btn:hover {
  opacity: 1;
}
.forge-action-row .forge-quick-add {
  margin-left: auto;
  border-top: 0;
  padding: 0;
  flex: 1 1 200px;
  justify-content: flex-end;
}

/* Palette collapse toggle: chevron in the palette head. Clicking it
   sets data-collapsed on .forge-browse, which hides the grid and gives
   the Build Order list the full column. */
.palette-collapse-toggle {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.1s, border-color 0.1s, background 0.1s, transform 0.15s;
}
.palette-collapse-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.forge-browse[data-collapsed="true"] .forge-browse-grid { display: none; }
.forge-browse[data-collapsed="true"] .palette-collapse-toggle { transform: rotate(-90deg); }
.forge-browse[data-collapsed="true"] .palette-density-toggle { display: none; }

.forge-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.forge-section-title {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-soft);
  position: relative;
  padding-left: 14px;
}
.forge-section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  box-shadow: 0 0 6px var(--accent-glow);
}
.forge-section-hint {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--mono);
}
.forge-section-hint kbd {
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-0);
  margin: 0 1px;
}
.forge-section-divider {
  margin: 16px -16px 12px;
  padding: 10px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 13%, transparent) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 100%),
    linear-gradient(180deg, rgba(20, 40, 75, 0.6), rgba(8, 18, 32, 0.6));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 var(--bevel-light),
    inset 0 -1px 0 var(--bevel-dark),
    0 0 12px var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}
.forge-section-divider::before {
  /* Glowing top edge — distinguishes the divider as a "system band" */
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0, var(--accent) 30%, var(--accent) 70%, transparent 100%);
  opacity: 0.6;
  filter: blur(0.5px);
}
.forge-section-divider .forge-section-title {
  font-size: 13px;
  letter-spacing: 3px;
}
.forge-section-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  background: rgba(8, 16, 30, 0.6);
  border: 1px solid var(--border-soft);
  padding: 2px 8px;
  letter-spacing: 1px;
}

/* Compact / comfortable density toggle for the Build Order list. The
   icon glyph swaps based on the active mode (≡ comfortable, ═ compact)
   so the button reads as a state rather than an action. */
.forge-list-density-toggle {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  width: 28px;
  height: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  margin-left: 4px;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.forge-list-density-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.forge-list-density-toggle .density-icon-compact { display: none; }
.forge-list-density-toggle[data-compact="true"] .density-icon-comfy { display: none; }
.forge-list-density-toggle[data-compact="true"] .density-icon-compact { display: inline; }
.forge-list-density-toggle[data-compact="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

/* Compact build-list rows — single-line, dense, hover for full info.
   We collapse the per-row state line into a compact mono-font inline
   span next to the name (truncated with ellipsis when narrow). The
   delete and repeat controls stay tappable. */
.forge-list.compact .forge-row {
  padding: 4px 8px;
  min-height: 30px;
  font-size: 12px;
  grid-template-columns: 14px 24px minmax(0, 1fr) auto;
  gap: 8px;
}
.forge-list.compact .forge-row .forge-handle { font-size: 12px; }
/* iconHtml() sets width/height inline, so we need !important to win
   the cascade against the inline style. Without this the icon stays
   at its rendered size (26px) and pokes above/below the compact row. */
.forge-list.compact .forge-row .entity-icon {
  width: 18px !important;
  height: 18px !important;
}
.forge-list.compact .forge-action-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.forge-list.compact .forge-action-text {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.forge-list.compact .forge-name {
  font-size: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.forge-list.compact .forge-state {
  font-size: 10px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
  display: inline-block;
}
/* Hide redundant chrome in compact mode — the per-row cost pill and
   pending/delay badges add noise to a row that should fit on one line. */
.forge-list.compact .forge-cost { display: none; }
.forge-list.compact .forge-state-pending,
.forge-list.compact .forge-delay { display: none; }
/* Compact-mode weight chip: visible at all weights so the user can see
   AND change priority without leaving compact mode. Sized to match the
   adjacent repeat input so the controls strip stays visually aligned. */
.forge-list.compact .forge-weight,
.forge-list.compact .forge-pin {
  height: 24px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}
/* Compact repeat input — keep the native spinner arrows visible so
   users can click up/down. Width sized to fit two digits plus the OS
   spinner widget without crowding. */
.forge-list.compact .forge-repeat {
  width: 56px;
  height: 24px;
  padding: 2px 4px;
  box-sizing: border-box;
}
.forge-list.compact .forge-del {
  font-size: 14px;
  padding: 0 6px;
  height: 24px;
  display: inline-flex;
  align-items: center;
}
.forge-list.compact .forge-row-priority .forge-priority-inline { display: none; }
.forge-list.compact .forge-insert { height: 4px; margin: -1px 0; }
.forge-list.compact .forge-insert::after { display: none; }

/* Quick-add chips between the add bar and the palette: a compact strip
   labeled "Recent" so its purpose is obvious. */
.forge-quick-add {
  margin: 8px 0 4px;
  padding: 6px 0;
  border-top: 1px dashed var(--border-soft);
}

/* The palette browse-head rebalances now that "Palette" label is gone —
   tabs flush left, density toggle flush right. */
.forge-browse {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
}
.forge-browse-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* ----- Insert popover ----- */
.forge-insert-popover {
  background: var(--panel-grad);
  border: 1px solid var(--border-bright);
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 var(--bevel-light),
    0 20px 60px rgba(0, 0, 0, 0.7),
    0 0 30px var(--accent-soft);
  position: absolute;
}
.forge-insert-popover::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--accent) 0 50%, transparent 50%);
  opacity: 0.7;
}
.forge-insert-popover h5 {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ================================================================
   MOBILE — tighter type, denser controls, larger tap targets.
   Two breakpoints:
     - 900px and below: tablet / large phone landscape
     - 600px and below: phone portrait
   Scanlines, decorative corner triangles, big letter-spacing all
   reduce on small screens to cut visual noise. Tap targets stay
   above the 36px iOS/Android minimum on the controls users actually
   touch (rows, chips, buttons).
   ================================================================ */

@media (max-width: 900px) {
  .container { padding: 0 14px; }
  .site-header { padding: 18px 0 14px; }
  .site-header h1 {
    font-size: 22px;
    letter-spacing: 2px;
    padding-left: 12px;
  }
  .site-header h1::before { width: 3px; top: 4px; bottom: 4px; }
  .subtitle { font-size: 10px; letter-spacing: 1px; }
  .global-controls { margin-top: 10px; gap: 12px; }

  .panel-head h2 { font-size: 16px; letter-spacing: 2px; padding-left: 10px; }
  .panel-head p { font-size: 12px; }

  /* Mode nav becomes a horizontal scroller so all 5 tabs stay accessible
     without wrapping or shrinking text below readable size. */
  .mode-nav .container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .mode-nav .container::-webkit-scrollbar { display: none; }
  .mode-btn {
    padding: 12px 14px;
    font-size: 11px;
    letter-spacing: 1.2px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Forge controls row: tighten + ensure each control has a comfortable
     tap target. Buttons grow to 38px min height. */
  .controls-row {
    gap: 8px;
  }
  .controls-row label,
  .controls-row select,
  .controls-row input {
    font-size: 12px;
  }
  button.ghost {
    min-height: 36px;
    padding: 7px 12px;
  }
  .forge-add #forge-add-btn,
  #scout-add-btn { min-height: 38px; }

  /* Section heads/dividers: smaller, less aggressive letter-spacing */
  .forge-section-title { font-size: 11px; letter-spacing: 2px; }
  .forge-section-divider {
    margin: 12px -14px 10px;
    padding: 8px 14px;
  }
  .forge-section-hint { display: none; }

  /* Forge rows: bigger font, more vertical breathing room for thumbs */
  .forge-row {
    grid-template-columns: 22px 26px minmax(0, 1fr) auto;
    padding: 10px 10px;
    font-size: 13px;
    min-height: 44px;
  }
  .forge-row .forge-handle { font-size: 16px; }
  .forge-row .forge-del {
    min-width: 32px;
    min-height: 32px;
    font-size: 22px;
  }
  .forge-repeat { width: 52px; height: 32px; }

  /* Inline insert points: bigger hit zone, since CSS hover doesn't
     translate to touch. The "+ insert" pill stays visible on tap. */
  .forge-insert {
    height: 14px;
    margin: 0;
  }
  .forge-insert::before { left: 16px; right: 4px; background: var(--border-soft); }
  .forge-insert::after {
    opacity: 0.7;
    font-size: 10px;
  }

  /* Palette: bigger tiles by default since fingers are bigger than
     mouse cursors. Compact mode still works for power users. */
  .forge-browse-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 5px;
    max-height: 200px;
  }
  .browse-tile { padding: 6px 4px; min-height: 64px; }
  .browse-tile .entity-icon { width: 32px; height: 32px; }
  .forge-browse-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  }
  .forge-browse-grid.compact .browse-tile { min-height: 44px; }
  .forge-browse-grid.compact .browse-tile .entity-icon { width: 30px; height: 30px; }

  /* Browse / ref tabs: comfortable thumbs */
  .browse-tab, .ref-tab { padding: 8px 14px; min-height: 36px; }

  /* Result column charts: shrink height, keep readable */
  .res-chart-wrap { padding: 0; }
  .res-chart { width: 100%; height: auto; max-height: 220px; }

  /* Gantt label column shrinks but stays usable */
  .gantt-row { grid-template-columns: 130px minmax(0, 1fr) auto; gap: 8px; }
  .gantt-label { font-size: 12px; }
  .gantt-info { display: none; }

  /* Roster grid: 2 cols min, big enough to read */
  .roster-grid { grid-template-columns: 1fr; gap: 10px; }
  .roster-items { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }

  /* Quick-add chips: bigger, easier to tap */
  .quick-chip { padding: 6px 12px 6px 6px; min-height: 32px; font-size: 12px; }

  /* Priority chip strip wraps and uses more space per chip */
  .forge-priority { gap: 8px; }
  .priority-chip { padding: 4px 6px; min-height: 32px; }
  .priority-arrow { padding: 4px 8px; min-width: 24px; min-height: 24px; }

  /* Modals: full-width on phones, padded modestly */
  .modal { width: min(560px, 94vw); padding: 18px; }
  .modal-overlay { padding: 12px; }
}

@media (max-width: 600px) {
  /* Disable the CRT scanline overlay on phones — it adds visual noise
     to small screens without contributing the cinematic feel it has on
     desktop. Keep the dark-blue gradient backdrop. */
  body::before { display: none; }

  /* Even tighter type on small phones. */
  .site-header h1 { font-size: 18px; letter-spacing: 1.5px; }
  .panel-head h2 { font-size: 14px; letter-spacing: 1.5px; }
  .forge-section-divider { margin-left: -12px; margin-right: -12px; }
  .container { padding: 0 12px; }

  /* Hide the corner-triangle decorations on the column edges — they
     read as clutter at small sizes. */
  .forge-column::before,
  .forge-column::after { display: none; }

  /* The forge-add row stacks: search takes full width, then count+button,
     then the secondary buttons wrap. */
  .forge-add {
    flex-wrap: wrap;
    gap: 6px;
  }
  .forge-add .combo-search { flex: 1 1 100%; }
  .forge-add input[type=number] { width: 64px; }
  .forge-add #forge-add-btn { flex: 1 1 auto; min-width: 100px; }
  .forge-add .ghost { flex: 1 1 auto; min-width: 0; padding: 7px 8px; font-size: 10px; }

  /* Result card padding shrinks */
  .result-card { padding: 12px; }
  .cost-row { gap: 4px; }
  .cost-pill { font-size: 10px; padding: 3px 8px; }
  .time-big { font-size: 18px; }
  .time-side { font-size: 13px; }

  /* Path / step-detail tables become horizontally scrollable rather
     than getting squeezed unreadably narrow. */
  .path-section .path-table-wrap,
  .path-section table {
    overflow-x: auto;
    display: block;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .path-table th, .path-table td { font-size: 11px; padding: 6px 8px; }

  /* Producer-utilization rows: shorter for the smaller screen */
  .prod-util-row { font-size: 11px; }

  /* Insert popover: full width minus margin */
  .forge-insert-popover {
    width: calc(100vw - 16px);
    max-height: 60vh;
  }
}

/* Touch devices: hover-only affordances need a steady-state visible
   alternative so users don't have to "discover" the + insert points. */
@media (hover: none) {
  .forge-insert::before { background: var(--border-soft); }
  .forge-insert::after { opacity: 0.5; }
  .forge-insert:active { background: var(--accent-soft); }
}

/* Mobile-only de-clutter: drop ambient labels that consume space
   without driving an action. Live-status is reassuring on desktop but
   purely informational, and the priority parenthetical is long. */
@media (max-width: 800px) {
  #forge-status { display: none; }
  .forge-priority-hint { display: none; }
}