/* ============================================================
   SPACE-OPS 3030 — Team Builder (Rebuild)
   Visual spec: WebApp_v2.pdf
   Editorial / military manual; mostly white, black, red accent.
   ============================================================ */

:root {
  /* Type */
  --font-sans: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Neutrals */
  --bg: #FFFFFF;
  --panel-1: #F2F2F2;   /* asset detail column */
  --panel-2: #E5E5E5;   /* armory column (darker) */
  --line: #E0E0E0;
  --line-strong: #111111;
  --text: #111111;
  --muted: #6B6B6B;

  /* Accents — sampled from WebApp_v2.pdf page 6 */
  --red: #D9302D;        /* primary red (PLAYER tag, ranged accent) */
  --red-bg: #E44A4A;     /* selected row bg (mock pixel #E44A4A) */
  --red-on-dark: #e34a4a;/* labels on dark weapon/equipment boxes (readability over --pill-dark) */
  --green: #2D8A50;      /* melee */
  --blue: #2F5FB8;       /* equipment */
  --purple: #6E4FB7;     /* cybertech */
  --teal: #1499BE;       /* buff applied — dual-wield trait + modified stat */
  --pill-dark: #2D2D2D;  /* pill background (mock pixel #2D2D2D) */
  --pill-text: #F2F2F2;

  /* Sizing */
  --col-width: 380px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 10px;

  /* Motion — shared easing curves. --ease-out is a fast-then-settle
     deceleration (entrances only — its long tail reads as stutter on layout
     animations); --ease-smooth is evenly paced accelerate-then-settle for
     height/size changes; --ease-spring overshoots ~5% for a subtle "pop". */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Subtle hover tint + topbar backing — both need dark-mode variants. */
  --hover: rgba(0, 0, 0, 0.04);
  --topbar-bg: rgba(255, 255, 255, 0.85);

  color-scheme: light;
}

/* ==== Dark mode ====
   Opt-in only — the app defaults to light. The hamburger-menu toggle writes
   data-theme; the inline script in index.html applies it before paint (no
   flash). Only the tokens change; the design language is identical. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181818;
  --panel-1: #202020;      /* asset detail column */
  --panel-2: #282828;      /* armory popup */
  --line: #3A3A3A;
  --line-strong: #E8E8E8;  /* section dividers: black → light */
  --text: #E8E8E8;         /* body text: black → light gray */
  --muted: #9C9C9C;
  --red: #E4534D;          /* a notch brighter for contrast on dark */
  --red-bg: #C24440;
  --red-on-dark: #E4534D;
  --pill-dark: #343434;    /* a step lighter than its panel */
  --pill-text: #F2F2F2;
  --hover: rgba(255, 255, 255, 0.06);
  --topbar-bg: rgba(24, 24, 24, 0.85);
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100vh; }
/* Suppress iOS Safari's pull-to-refresh and rubber-band scrolling — a hard
   refresh used to wipe in-progress customNames before session restore landed,
   and even with restore, the reload is disruptive on iPad. */
html, body { overscroll-behavior-y: none; }
/* Both html and body get the bg so when content scrolls past 100vh, the area
   beneath body still paints the same color (otherwise the browser's default
   bg shows through — looks like a dark gap in dark-mode browsers).
   Using 100vh (not 100%) so it always references the viewport directly. */
html, body { background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

/* ==== App chrome ==== */
.app-chrome {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.topbar {
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Translucent + blurred backing so scrolled content never collides with
     the breadcrumbs (it was fully transparent). Translucency instead of a
     solid bar because the builder's two columns have different background
     colors under it — a solid bar would paint a visible stripe. */
  background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
.topbar__menu {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: none; border: 0;
  cursor: pointer;
  padding: 0;
  color: var(--text);   /* drives the icon fill (currentColor) — flips in dark */
}
.topbar__menu svg { display: block; }

/* Hamburger dropdown — page navigation. Backdrop closes on outside click. */
.topbar__menu-backdrop { position: fixed; inset: 0; z-index: 55; }
.topbar__dropdown {
  position: fixed;
  top: 42px; left: 12px;
  z-index: 56;
  min-width: 210px;
  background: var(--bg);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  animation: modal-pop 0.24s var(--ease-spring);
}
.topbar__dropdown a,
.topbar__dropdown button {
  text-align: left;
  background: none; border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 9px 18px;
}
.topbar__dropdown a:hover,
.topbar__dropdown button:hover { background: var(--hover); color: var(--red); }
.topbar__crumbs {
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.01em;
  font-weight: 400;
}
.topbar__crumbs .sep { color: var(--muted); margin: 0 5px; }
.topbar__crumbs .crumb { cursor: pointer; }
.topbar__crumbs .crumb:hover { color: var(--red); }
.topbar__crumbs .crumb--root { text-transform: uppercase; letter-spacing: 0.02em; }

/* ==== Landing / Home ====
   Aligned to the team builder's column geometry (per page 7 reference):
   left edge = col 1 content-left (x=320), right edge = col 2 right edge
   (x=890) — a 570px-wide content band that sits on the same grid as the
   builder when you flip between pages. */
.home {
  margin: 56px 0 0;
  padding: 0 0 80px 320px;
}
.home__inner {
  /* Shrink-wrap to the title (the widest child) so the stripe band's right
     edge lines up with the end of the title text — and stays aligned if the
     title ever changes. Was a fixed 570px, which overshot the title by ~26px. */
  width: max-content;
  max-width: calc(100vw - 320px);
}
.home__title {
  font-size: 32px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin: 0 0 6px;
  white-space: nowrap;
}
.home__stripes {
  height: 114px;
  width: 100%;
  /* Caution-tape stripes — 42deg off vertical, ~66/34 stripe-to-gap,
     pixel-matched to page-1 of WebApp_v2.pdf at 1500-vp scale.
     The ~1px feather at each edge (26→27, 76→77) antialiases the diagonal —
     hard gradient stops stair-step because browsers can't smooth them. */
  background:
    repeating-linear-gradient(
      132deg,
      transparent 0 26px,
      var(--text) 27px 76px,
      transparent 77px
    );
  margin-bottom: 12px;
}
.home__player {
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 10px;
  min-height: 18px;
  line-height: 1.3;
}
.home__player.is-empty { visibility: hidden; }
.home__menu {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home__menu button {
  background: none;
  border: 0;
  text-align: left;
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  padding: 1px 0;
  cursor: pointer;
  width: max-content;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  line-height: 1.2;
}
.home__menu button:hover { color: var(--red); }
.home__menu button:disabled { color: var(--muted); cursor: default; }

/* ==== Builder layout ====
   Two permanent 50/50 columns: Team summary (left) + Asset detail (right).
   The Armory is a popup (.armory-modal) opened from "Equip from the Armory"
   or a loadout pill — no third column. Content inside each column is
   width-capped and gravitates toward the center dividing line. */
.builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 100vh;
}

.builder__col {
  /* Columns extend full viewport height behind the fixed topbar (matches mock).
     padding-top includes 40px to clear the topbar overlay. All columns stretch
     to the tallest column's height via the grid's align-items: stretch. */
  min-height: 100vh;
  padding: 68px 28px 60px;
  overflow: hidden;
}
.builder__col--summary {
  background: var(--bg);
  /* Content stack hugs the center dividing line (right edge of col 1). */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.builder__col--summary > * { width: 100%; max-width: 560px; }
.builder__col--detail {
  background: var(--panel-1);
}
.builder__col--detail > * { width: 100%; max-width: 480px; }
.builder__col--detail .detail-empty {
  font-size: 13px;
  color: var(--muted);
  padding-top: 6px;
}

/* Smooth slide-in on mount (fires when the detail content first appears). */
@keyframes col-slide-in {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.builder__col--detail > * {
  animation: col-slide-in 0.32s var(--ease-out);
}

/* Page-6 alignment: push the detail column down so its first section divider
   lands on the same horizontal line as the Team Assets divider in the summary
   column. The offset is the height of the summary column's team header above
   its Team Assets divider, PLUS the 40px topbar clearance already in --col. */
.builder__col--detail {
  padding-top: var(--col-header-offset, 180px);
}

/* Mid widths (tablet portrait, half-screen windows): two 50/50 columns leave
   only ~440px per side — content designed at 560/480 crams. Stack into ONE
   centered column instead; the ≤760px phone rules further tighten gutters. */
@media (max-width: 1039px) {
  .builder { grid-template-columns: 1fr; }
  .builder__col {
    min-height: auto;
    overflow: visible;
  }
  .builder__col--summary { align-items: center; }
  .builder__col--summary > * { max-width: 640px; }
  .builder__col--detail {
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .builder__col--detail > * { max-width: 640px; }
  .builder__col--detail.is-empty { display: none; }
}

/* ==== Motion ====
   Shared entrance/exit keyframes. Entrances use --ease-out (fast settle) or
   --ease-spring (subtle overshoot); exits are short plain eases — leaving
   should always feel quicker than arriving. */
@keyframes fade-in   { from { opacity: 0; } }
@keyframes fade-out  { to   { opacity: 0; } }
@keyframes modal-pop  { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
@keyframes modal-drop { to   { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes rise-in   { from { opacity: 0; transform: translateY(8px); } }
@keyframes pill-pop  { from { opacity: 0; transform: scale(0.92); } }
@keyframes expand-in { from { opacity: 0; transform: translateY(-4px); } }

/* Color/bg hovers everywhere settle smoothly instead of snapping. */
button { transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==== Armory popup (was column 3) ==== */
.armory-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  /* Top-anchored (not centered): a centered modal re-centers whenever its
     content height changes, so expanding an item made the top edge jump.
     Anchored, the popup only ever grows downward. */
  display: grid;
  justify-items: center;
  align-items: start;
  z-index: 150;
  padding: 8vh 24px 24px;
  animation: fade-in 0.2s ease;
}
.armory-modal {
  background: var(--panel-2);
  border-radius: 6px;
  width: min(640px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 28px 32px 20px;
  animation: modal-pop 0.34s var(--ease-spring);
}
/* Exit: Builder holds the popup mounted with .is-closing for ~180ms. */
.armory-modal-backdrop.is-closing { animation: fade-out 0.18s ease forwards; }
.armory-modal-backdrop.is-closing .armory-modal { animation: modal-drop 0.18s ease forwards; }
/* Rows cascade in on popup open AND filter switch (per-row --i, capped).
   Motion ONLY — no opacity. Any fade (even a partial one) reads as the whole
   panel flashing bright on filter switches; solid rows rippling downward
   into place give the same top-to-bottom reveal without a luminance jump. */
@keyframes row-cascade { from { transform: translateY(9px); } }
.armory-modal .armory-row {
  animation: row-cascade 0.26s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}

/* No vertical dividers between columns — column color shifts mark the
   boundary (matches mock pages 2–6). */

/* ==== NUX tour (first-time-user walkthrough) ==== */
/* Sits above the armory popup (z 150) and the HoverBox (200) so tour steps
   can point at elements inside them. The backdrop blocks interaction; the
   spotlight is a cutout drawn with a huge box-shadow. */
.tour__backdrop {
  position: fixed; inset: 0;
  z-index: 260;
}
.tour__spot {
  position: fixed;
  z-index: 261;
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  outline: 2px solid var(--red);
  outline-offset: 2px;
  pointer-events: none;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
/* No target (centered card): dim the whole screen via the backdrop instead
   of the spotlight's shadow. */
.tour__backdrop.is-dim { background: rgba(0,0,0,0.55); }
.tour__card {
  position: fixed;
  z-index: 262;
  background: var(--bg);
  border-radius: 6px;
  padding: 16px 18px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  /* Re-pops on every step (keyed remount) for a deliberate step-change feel. */
  animation: modal-pop 0.3s var(--ease-spring);
}
.tour__title {
  font-size: 16px;
  font-weight: 800;
  margin: 2px 0 6px;
}
.tour__body {
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.tour__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.tour__actions button {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 12px;
  cursor: pointer;
}
.tour__skip { color: var(--muted); }
.tour__skip:hover { color: var(--red); }
.tour__nav { display: flex; gap: 14px; }
.tour__nav button:hover { color: var(--red); }
.tour__next { color: var(--red); font-weight: 800; text-decoration: underline; }

/* ==== Primary action button (Done / Close on menus & popups) ====
   Red block with the same rounded corners as the item pills. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 9px 22px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.btn-primary:hover { background: var(--red-bg); }

/* ==== Notice banner (unavailable models/items, cloud-outage warnings) ==== */
.notice {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid #8a6d1f;
  background: rgba(255, 209, 102, 0.12);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #6d5615;
}
:root[data-theme="dark"] .notice {
  background: rgba(255, 209, 102, 0.08);
  color: #e6d6a8;
}

/* ==== Section labels (small red caps) ==== */
.tag {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.25;
  color: var(--red);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.tag--muted { color: var(--muted); }
.tag--inline { display: inline; margin-right: 8px; }

/* ==== Team header ==== */
.team-name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  background: none; border: 0;
  font-family: inherit;
  color: inherit;
  padding: 0;
  width: 100%;
  outline: none;
}
.team-name:focus { color: var(--red); }
.team-faction {
  /* Block so the select inside can fill the full content width and the
     right-anchored dropdown arrow lands at the column's right edge. */
  font-size: 16px;
  margin-top: 2px;
  font-weight: 500;
}
.team-faction select {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  padding: 0 20px 0 0;
  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 fill='%23111' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 10px 6px;
}
.team-faction select:hover { color: var(--red); }
/* The caret is a data-URI (can't use CSS vars inside it) — swap for a light
   fill in dark mode so it doesn't vanish. */
:root[data-theme="dark"] .team-faction select {
  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 fill='%23E8E8E8' d='M0 0l5 6 5-6z'/></svg>");
}
/* select's popup list gets UA-styled; keep its text readable */
.team-faction select option { background: var(--bg); color: var(--text); }
.team-rating {
  font-size: 14px;
  margin-top: 6px;
}
.team-rating strong { font-weight: 800; }
.team-rating.over { color: var(--red); }

/* ==== Section card ==== */
.section {
  margin-top: 32px;
}
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.section__title {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.005em;
}
.section__btn {
  background: none; border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
  padding: 0 2px;
}
.section__btn:hover { color: var(--red); }

/* ==== Team Assets list (default) ==== */
.assets {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asset-group { margin-bottom: 10px; }
.asset-group__tag {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.25;
  color: var(--red);
  text-transform: uppercase;
  margin: 6px 0 4px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.asset-group__tag .right {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.12em;
}
.asset-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 4px 0;
  font-size: 15px;
  cursor: pointer;
  border-radius: var(--radius);
  align-items: center;
}
.asset-row:hover {
  background: var(--hover);
}
/* Selected row bleeds out to col 1's right edge to meet col 2 (page 6).
   Bar's left edge stays at content-left aligning with the section header;
   the text inside gets a small left inset so it doesn't push up against
   the bar edge. Right side extends past col 1's right padding. */
.asset-row.is-selected {
  background: var(--red-bg);
  color: #fff;
  margin-right: -28px;
  padding-left: 12px;
  padding-right: 28px;
  border-radius: 0;
}
.asset-row.is-selected .asset-row__rating { color: rgba(255,255,255,0.85); }
.asset-row__name strong { font-weight: 700; }
.asset-row__rating {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 14px;
}

/* picker row: a stepper + label + rating */
.pick-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  font-size: 15px;
  border-radius: var(--radius);
}
.pick-row:hover { background: var(--hover); }
.pick-row__stepper {
  display: flex; gap: 14px;
  font-size: 18px; line-height: 1;
  color: var(--text);
}
.pick-row__stepper button {
  background: none; border: 0;
  cursor: pointer;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: inherit;
}
.pick-row__stepper button:hover { color: var(--red); }
.pick-row__stepper button:disabled { color: #c8c8c8; cursor: not-allowed; }
.pick-row__name { font-weight: 400; }
.pick-row__name.is-in-team { font-weight: 700; }
.pick-row__count { color: var(--muted); font-weight: 500; }
.pick-row__rating {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

/* picker panel container (card-ish, fixed-ish) */
.picker {
  background: var(--panel-1);
  border-radius: var(--radius-lg);
  padding: 14px 12px 16px;
  position: relative;
  margin-top: 2px;
  animation: rise-in 0.28s var(--ease-out);
}
/* Model-picker Done: same red block as the armory's, left-aligned with the
   model names (past the picker's 60px stepper column + 8px gap + 8px pad). */
.picker__close {
  margin: 16px 0 0 76px;
}

/* ==== Asset detail (right panel) ==== */
.asset-detail__tag {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.25;
  color: var(--red);
  text-transform: uppercase;
}
.asset-detail__name {
  font-size: 22px;
  font-weight: 800;
  margin: 2px 0 0;
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 4px;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 14px 0 18px;
  font-variant-numeric: tabular-nums;
}
.stat-row__cell { text-align: center; }
.stat-row__label {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.25;
  color: var(--red);
  text-transform: uppercase;
}
.stat-row__value {
  font-size: 20px;
  font-weight: 800;
}

.loadout-line {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 14px;
}

.carry { margin-top: 6px; }
.carry__slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.slot {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
}
.slot__action {
  background: none; border: 0;
  font-size: 18px; line-height: 1;
  width: 18px;
  cursor: pointer;
  color: var(--text);
  padding: 0;
}
.slot__action:hover { color: var(--red); }
.slot__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--pill-text);
  background: var(--pill-dark);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  animation: pill-pop 0.28s var(--ease-spring);
}
.slot__pill:hover { filter: brightness(1.1); }
.slot__pill--empty {
  background: #cfcfcf;
  color: #565656;
  font-weight: 500;
  cursor: pointer;
  border: 1px dashed #a8a8a8;
}
.slot__pill--empty:hover { background: #c2c2c2; color: var(--text); }
:root[data-theme="dark"] .slot__pill--empty {
  background: #242424;
  color: #9C9C9C;
  border-color: #4A4A4A;
}
:root[data-theme="dark"] .slot__pill--empty:hover { background: #2C2C2C; }

/* Selected slot — bleeds to col 2's right edge to meet col 3 (mirrors the
   selected-asset bar in col 1 that bleeds to meet col 2). No border-radius
   on the right side; padding compensates so the (Nr) rating stays in place. */
.slot__pill.is-selected,
.slot__pill--empty.is-selected {
  background: var(--red-bg);
  color: #fff;
  border-color: var(--red-bg);
  border-style: solid;
  box-shadow: none;
  margin-right: -28px;
  padding-right: 42px;
  border-radius: 0;
}
.slot__pill.is-selected .slot__pill__name { color: #fff; }

/* Pill color by category — no colored left edge or accent text per request;
   pills now read as plain dark with white text regardless of category. */
.pill--ranged,
.pill--melee,
.pill--equipment,
.pill--cybertech { background: var(--pill-dark); }
.pill--ranged .slot__pill__name,
.pill--melee .slot__pill__name,
.pill--equipment .slot__pill__name,
.pill--cybertech .slot__pill__name { color: var(--pill-text); }

/* ==== Armory ==== */
.armory__tag { color: var(--red); }
.armory__title {
  font-size: 22px;
  font-weight: 800;
  margin: 2px 0 0;
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 4px;
}
.armory__filter {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.armory__filter-tabs {
  display: flex;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
}
.armory__filter .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--red);
  text-transform: uppercase;
}
.armory__filter button {
  background: none; border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--muted);
}
.armory__filter button:hover { color: var(--text); }
.armory__filter button.is-active { color: var(--text); font-weight: 800; }

.armory__category-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--red);
  text-transform: uppercase;
  margin: 16px 0 6px;
}
.armory__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.armory-row {
  display: grid;
  grid-template-columns: 18px 18px 1fr;
  gap: 6px;
  align-items: stretch;
}
.armory-row__step {
  background: none; border: 0;
  cursor: pointer;
  font-size: 18px; line-height: 1;
  color: var(--text);
  /* Pin to the top so the steppers stay beside the name row when the pill
     grows to hold its expanded info (instead of drifting to mid-height). */
  align-self: start;
  padding: 8px 0 0;
}
.armory-row__step:hover { color: var(--red); }
.armory-row__step:disabled { color: #c8c8c8; cursor: not-allowed; }
.armory-row__pill {
  display: block;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--pill-text);
  background: var(--pill-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}
/* Pills stay fully rounded even while expanded — the info box below is its
   own rounded card, not a squared-off extension of the pill. */

/* Snappy unfold: the wrapper's grid row animates 0fr → 1fr, so the dark box
   grows downward out of the pill and the rows below slide (never jump) out
   of the way. The box stays opaque throughout — no blank-gap flash (the old
   opacity fade left one). Browsers without animatable fr tracks (pre-2023
   WebKit) just show it instantly. */
@keyframes unfold { from { grid-template-rows: 0fr; } }
@keyframes fold   { to   { grid-template-rows: 0fr; } }
/* The box's own padding doesn't shrink with the fr track — animate it in
   lockstep so the box truly grows from 0 (no padding lip snapping in/out). */
@keyframes unfold-pad { from { padding-top: 0; padding-bottom: 0; } }
@keyframes fold-pad   { to   { padding-top: 0; padding-bottom: 0; } }
.armory-expand-wrap {
  /* Lives INSIDE .armory-row__pill: the pill itself grows taller as this
     unfolds, so there is no seam and the pill's rounded corners are the only
     corners — throughout the animation. Pill padding provides the sides. */
  clear: both;
  display: grid;
  grid-template-rows: 1fr;
  animation: unfold 0.2s var(--ease-smooth);
}
.armory-expand-wrap > .armory-expand { animation: unfold-pad 0.2s var(--ease-smooth); }
/* Outgoing info (moved to another item, or closed): fold shut instead of
   vanishing — an instant unmount made the popup dip in height, then regrow.
   Same duration + curve as the unfold so a switch reads as ONE motion. */
.armory-expand-wrap.is-collapsing { animation: fold 0.2s var(--ease-smooth) forwards; }
.armory-expand-wrap.is-collapsing > .armory-expand { animation: fold-pad 0.2s var(--ease-smooth) forwards; }
.armory-expand {
  overflow: hidden;
  min-height: 0;
  color: var(--pill-text);
  /* Top padding = the gap between the name row and the info; bottom adds to
     the pill's own 8px. Both animate to 0 with the fold/unfold. */
  padding: 8px 0 10px;
  position: relative;
  /* Info text shouldn't look like part of the clickable name row. */
  cursor: default;
  font-weight: 400;
}
.armory-expand__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
}
.armory-expand__stats .lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--red-on-dark);
  text-transform: uppercase;
  display: block;
}
.armory-expand__stats .val {
  font-size: 14px;
  font-weight: 800;
}
.armory-expand__traits .lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--red-on-dark);
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}
/* Matches the hoverbox close: red block, static, left-aligned. */
.armory-expand__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.armory-expand__close:hover { background: var(--red-bg); }

/* ==== Team Management ==== */
.management {
  margin-top: 28px;
}
.management__title {
  font-size: 18px;
  font-weight: 800;
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 4px;
  margin: 0 0 8px;
}
.management__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.management__list button {
  background: none; border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 3px 0;
  font-size: 15px;
}
.management__list button:hover { color: var(--red); }
.management__list button:disabled { color: var(--muted); cursor: not-allowed; }

/* ==== Team View — new layout ====
   Centered header banner + responsive grid of asset cards + a Team
   Management container that flows as the last grid item. Cards auto-fit to
   however many columns the viewport allows. */
.team-view {
  background: var(--bg);
  min-height: 100vh;
}
.team-view__inner {
  max-width: 1640px;
  margin: 0 auto;
  padding: 80px 28px 80px;
  animation: col-slide-in 0.28s ease-out;
}
.team-view__header {
  max-width: 480px;
  margin: 0 0 40px;
  text-align: left;
}
.team-view__header .tag { margin-bottom: 2px; }
.team-view__name {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 2px 0 4px;
  line-height: 1.15;
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 4px;
}
.team-view__faction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
  margin-top: 2px;
}
.team-view__faction-caret { font-size: 10px; color: var(--text); }
.team-view__rating { font-size: 14px; margin-top: 4px; }
.team-view__rating strong { font-weight: 800; }

.team-view__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 60px 0;
  font-size: 14px;
}

.team-view__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 36px;
  /* Top-align so a short card doesn't stretch to its row's tallest card —
     each gray box hugs its own content. */
  align-items: start;
}
/* Cards cascade in on entry — capped at 8 steps so big teams don't lag. */
.team-view__grid > * { animation: rise-in 0.38s var(--ease-out) both; }
.team-view__grid > *:nth-child(2) { animation-delay: 45ms; }
.team-view__grid > *:nth-child(3) { animation-delay: 90ms; }
.team-view__grid > *:nth-child(4) { animation-delay: 135ms; }
.team-view__grid > *:nth-child(5) { animation-delay: 180ms; }
.team-view__grid > *:nth-child(6) { animation-delay: 225ms; }
.team-view__grid > *:nth-child(7) { animation-delay: 270ms; }
.team-view__grid > *:nth-child(n+8) { animation-delay: 300ms; }

.team-view__management {
  /* Same shape as an asset card so it flows naturally in the grid. */
  padding: 0;
}
.team-view__management-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 8px;
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 4px;
}
.team-view__management-btn {
  display: block;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-align: left;
  padding: 3px 0;
  cursor: pointer;
  width: 100%;
}
.team-view__management-btn:hover { color: var(--red); }
.team-view__management-btn--muted { color: var(--muted); margin-top: 12px; }

/* ==== Asset Card (new) ==== */
.asset-card {
  /* Light gray box around each model so its loadout reads as one visual
     block in the team view grid. */
  background: var(--panel-1);
  border-radius: 10px;
  padding: 18px 20px 20px;
}
/* Inner boxes (weapons / equipment pills) are --panel-1 by default, which
   would vanish against the gray card — step them down to --panel-2. */
.asset-card .weapon-box,
.asset-card .equip-row { background: var(--panel-2); }
.asset-card__type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--red);
  text-transform: uppercase;
  margin: 0 0 2px;
}
.asset-card__name-row { margin-bottom: 4px; }
.asset-card__name {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.005em;
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 4px;
  cursor: text;
}
.asset-card__name:hover { color: var(--text); }
.asset-card__name--editing {
  font-size: 22px;
  font-weight: 800;
  border: 0;
  border-bottom: 1.5px solid var(--red);
  background: none;
  padding: 0 0 4px;
  outline: none;
  width: 100%;
  font-family: inherit;
  letter-spacing: -0.005em;
  color: var(--red);
}
.asset-card__rating {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--muted);
}
/* Dual Wield presentation — the weapon name gets a muted "×2" suffix, the
   Dual Wield trait is appended in teal, and the buffed Attack stat renders
   in the same teal so the player sees the auto-applied modifier at a glance.
   Teal token: --teal. */
.weapon-box__multi {
  /* Match the weapon name exactly — same font, size, weight, and color. */
  color: var(--text);
  font-weight: 700;
}
.weapon-box__stats .val--buffed { color: var(--teal); }
.term-link.is-buffed { color: var(--teal); }
.term-link.is-buffed:hover { color: var(--teal); filter: brightness(0.9); }
.asset-card .stat-row { margin: 14px 0 14px; }
.asset-card__row { margin-top: 14px; font-size: 13px; }
.asset-card__row .tag { margin-bottom: 4px; }
.asset-card__loadout { line-height: 1.5; }
.asset-card__slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==== Weapon Box (always expanded) ==== */
.weapon-box {
  background: var(--panel-1);
  border-radius: var(--radius-lg);
  padding: 10px 14px 12px;
}
.weapon-box__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--red);
  margin-bottom: 8px;
}
.weapon-box__head .term-link { border-bottom-style: dotted; }
.weapon-box__cost {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.weapon-box__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--red);
  margin-bottom: 8px;
}
.weapon-box__stats > div { text-align: center; }
.weapon-box__stats .lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--red);
  text-transform: uppercase;
  line-height: 1.4;
}
.weapon-box__stats .val {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.weapon-box__traits .lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.weapon-box__traits-list { font-size: 13px; line-height: 1.4; }

/* ==== Equipment Row (collapsed by default, click to expand) ==== */
.equip-row {
  background: var(--panel-1);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-radius 0.15s ease, background 0.15s ease;
}
.equip-row.is-open {
  border-radius: var(--radius-lg);
  padding: 10px 14px 12px;
}
.equip-row__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}
.equip-row__name { flex: 1; }
.equip-row__cost {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.equip-row__chevron {
  font-size: 10px;
  color: var(--text);
}
.equip-row__body {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--red);
  font-size: 13px;
  line-height: 1.45;
}
.equip-row__line { margin-top: 4px; }
.equip-row__line:first-child { margin-top: 0; }
.equip-row__line .lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--red);
  text-transform: uppercase;
  margin-right: 4px;
}
.equip-row__line--muted { opacity: 0.85; }

/* Dangerous trait special formatting: bold + red. */
.term-link.is-dangerous,
span.is-dangerous {
  color: var(--red) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--red);
}

/* ==== Hover tooltip ==== */
.hoverbox {
  position: fixed;
  background: #1A1A1A;
  color: #F2F2F2;
  border-radius: 4px;
  padding: 10px 12px 10px;
  min-width: 240px;
  max-width: 320px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  font-size: 12px;
  line-height: 1.5;
  animation: modal-pop 0.22s var(--ease-out);
}
.hoverbox__name {
  font-size: 13px;
  font-weight: 800;
  border-bottom: 1px solid #444;
  padding-bottom: 3px;
  margin-bottom: 6px;
}
.hoverbox__section {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
  border-top: 1px solid var(--red);
  margin-top: 8px;
  padding-top: 4px;
}
/* Same red-block language as the other Done buttons, sized for the compact
   popup. Static + left-aligned (was an underlined link, bottom-right). */
.hoverbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.hoverbox__close:hover { background: var(--red-bg); }
.hoverbox__trait-link {
  cursor: pointer;
  border-bottom: 1px dotted rgba(255,255,255,0.4);
}
.hoverbox__trait-link:hover { color: #fff; border-bottom-color: #fff; }

.term-link {
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
  opacity: 0.92;
}
.term-link:hover { opacity: 1; color: var(--red); }

/* ==== Toast / saved indicator ==== */
.toast {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: #1A1A1A;
  color: #F2F2F2;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 13px;
  z-index: 200;
  animation: toast-in 200ms ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ==== Modal (load team, etc.) ==== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: grid; place-items: center;
  z-index: 150;
  animation: fade-in 0.2s ease;
}
.modal { animation: modal-pop 0.32s var(--ease-spring); }
.modal {
  background: var(--bg);
  border-radius: 6px;
  padding: 24px;
  width: 92%;
  max-width: 520px;
  max-height: 80vh;
  overflow: auto;
}
.modal h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 16px;
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 6px;
}
.modal__list button {
  display: grid;
  grid-template-columns: 1fr auto auto;
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  align-items: center;
  gap: 12px;
}
.modal__list button:hover { background: rgba(0,0,0,0.03); }
.modal__list .meta { font-size: 12px; color: var(--muted); }
.modal__list .del {
  /* Tap target: bumped padding so mobile/iPad fingers reliably hit it. */
  color: var(--muted);
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(228, 74, 74, 0.2);
}
.modal__list .del:hover { color: var(--red); }
.modal__list .del.is-armed {
  color: #fff;
  background: var(--red);
  border-radius: 4px;
  font-weight: 700;
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.modal__actions button {
  background: none; border: 0;
  font: inherit;
  cursor: pointer;
  font-weight: 700;
  padding: 6px 10px;
}
.modal__actions button:hover { color: var(--red); }
.modal__empty {
  color: var(--muted);
  text-align: center;
  padding: 30px 0;
}
/* In-modal delete confirmation — an overlay INSIDE the app because native
   confirm() is silently suppressed on iOS DuckDuckGo (buttons looked dead). */
.confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: grid; place-items: center;
  z-index: 200; /* above .modal-backdrop's 150 */
}
.confirm-box {
  background: var(--bg);
  border-radius: 6px;
  padding: 20px 22px;
  width: 88%;
  max-width: 380px;
}
.confirm-box__title {
  font-size: 17px;
  font-weight: 800;
  border-bottom: 1.5px solid var(--text);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.confirm-box__body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.confirm-box__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.confirm-box__actions button {
  background: none; border: 0;
  font: inherit;
  cursor: pointer;
  font-weight: 700;
  padding: 6px 10px;
}
.confirm-box__actions .confirm-box__danger { color: var(--red); }
.confirm-box__actions button:hover { filter: brightness(0.8); }

/* ==== Print (Export to PDF via browser print dialog) ====
   The team view's screen layout is repurposed: topbar/actions hidden, the
   summary column collapses into a full-width banner above the card grid,
   and cards print with light borders on white so toner stays sane. */
@media print {
  .topbar { display: none !important; }
  .toast { display: none !important; }
  .hoverbox { display: none !important; }

  body, .app-chrome { background: #fff !important; }

  .team-view {
    display: block !important;
    min-height: 0;
  }
  .team-view__col {
    background: #fff !important;
    min-height: 0;
    padding: 0 !important;
    animation: none !important;
  }
  .team-view__col--summary {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px;
    border-bottom: 1.5px solid #111;
  }
  .team-view__col--summary .team-view__actions { display: none !important; }
  .team-view__name { font-size: 22px; margin: 0; }
  .team-view__faction { font-size: 13px; }
  .team-view__rating, .team-view__count { font-size: 12px; }

  .team-view__section {
    max-width: none !important;
    margin-bottom: 14px;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .team-view__cards {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .asset-card {
    background: #fff !important;
    border: 1px solid #bbb;
    break-inside: avoid;
    page-break-inside: avoid;
    padding: 10px 12px 10px !important;
  }
  /* Trim hover affordances since clicks don't exist on paper. */
  .term-link, .hoverbox__trait-link {
    border-bottom: none;
    cursor: default;
    color: inherit !important;
  }
}

/* ==== Responsive ====
   Tablet: drop summary when armory open (keep detail + armory).
   Phone: only show the deepest open column. */
/* No responsive grid overrides at standard widths — fixed widths are
   intentional per the page-8 reference. At narrow viewports the builder
   scrolls horizontally rather than re-arranging the columns. */
@media (max-width: 760px) {
  /* ---- Phone layout ----
     The desktop design right-aligns content inside the columns using large
     left/right paddings (summary padding-left:320px, armory padding-right:
     290px) and fixed column widths. On a phone that shoves everything off
     the right edge. Collapse to a single fluid column with even 18px
     gutters on both sides. */

  /* Home */
  .home { margin-top: 40px; padding: 0 18px 60px; }
  .home__inner { width: 100%; max-width: 100%; }
  .home__title { white-space: normal; font-size: 26px; }

  /* Builder — stack the two columns vertically, full width, even gutters */
  .builder { grid-template-columns: 1fr; }
  .builder__col {
    min-height: auto;
    overflow: visible;
    padding: 56px 18px 28px;
  }
  .builder__col--summary { padding-left: 18px; padding-right: 18px; }
  /* Drop the desktop divider-alignment top offset when columns are stacked,
     and hide the empty detail column entirely (no gray placeholder block). */
  .builder__col--detail { padding-top: 28px; }
  .builder__col--detail.is-empty { display: none; }
  /* Armory popup gets the full phone width minus gutters. */
  .armory-modal-backdrop { padding: 4vh 12px 12px; }
  .armory-modal { padding: 20px 18px 20px; max-height: 92vh; }

  /* Team View — one card per row so cards never exceed the viewport */
  .team-view__inner { padding: 64px 18px 60px; }
  .team-view__grid { grid-template-columns: 1fr; gap: 18px; }

  /* The selected-row / selected-pill "bleed" effects use margin-right:-28px
     to reach the desktop column edge. With an 18px gutter that overshoots
     the viewport by 10px and reintroduces a right-side cutoff — retune the
     bleed to the mobile gutter so the red bar still reaches the edge cleanly. */
  .asset-row.is-selected { margin-right: -18px; padding-right: 18px; }
  .slot__pill.is-selected,
  .slot__pill--empty.is-selected { margin-right: -18px; padding-right: 24px; }

  /* Long breadcrumbs ("SPACE OPS 3030 / Team Builder / <team>") shouldn't
     widen the fixed topbar past the viewport — let them truncate. */
  .topbar { padding: 0 14px; }
  .topbar__crumbs { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
}

/* At 4K / wide monitors, scale the builder columns up by ~130% so content
   isn't lost in a sea of side margin. Kicks in at 1700px+ so it doesn't
   trigger on standard 1080p / 1440p screens. Proportions match the design
   mock — only the scale changes. */
@media (min-width: 1700px) {
  /* Columns stay 50/50 — just let the content stacks grow. */
  .builder__col--summary > * { max-width: 720px; }
  .builder__col--detail > * { max-width: 620px; }
  .armory-modal { width: min(800px, 100%); }
}

/* ==== Team View grid on tablets (iPad) ====
   Portrait: 2 asset cards per row. Landscape: 3 per row. Bounded to the
   768–1366px CSS-width range so it targets iPads (incl. the 12.9" Pro,
   which is 1024px portrait / 1366px landscape) without overriding the
   auto-fill layout on phones (<768) or desktops (>1366). Orientation —
   not width alone — is used so the 12.9" Pro's 1024px portrait gets 2
   columns rather than colliding with smaller iPads' landscape width. */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
  .team-view__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
  .team-view__grid { grid-template-columns: repeat(3, 1fr); }
}