.product-hub,
.desert-preview {
  display: grid;
  gap: 22px;
}

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(99, 179, 255, 0.1), rgba(165, 180, 252, 0.035) 42%, rgba(255, 255, 255, 0.015)),
    var(--surface);
  box-shadow: var(--shadow);
}

.product-hero h1 {
  font-size: clamp(32px, 4vw, 52px);
  max-width: 760px;
}

.product-hero p {
  max-width: 640px;
  font-size: 16px;
}

.product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.hub-section,
.preview-panel,
.product-card {
  min-width: 0;
}

.available-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.product-card {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.product-card.is-available {
  border-color: rgba(99, 179, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(99, 179, 255, 0.075), rgba(255, 255, 255, 0.018)),
    var(--surface-2);
}

.product-card h3 {
  font-size: 23px;
}

.product-card p,
.planned-row p,
.preview-panel p,
.product-disclaimer {
  color: var(--text-soft);
}

.product-card-topline,
.product-card-main,
.save-preview,
.disabled-control-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.product-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(99, 179, 255, 0.34);
  border-radius: var(--radius);
  background: rgba(99, 179, 255, 0.1);
  color: #d8ecff;
  font-weight: 820;
}

.hub-highlight-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-highlight-list li {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.35;
}

.hub-highlight-list.is-dense {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.coming-next-card {
  border-color: rgba(227, 181, 87, 0.32);
  background:
    linear-gradient(135deg, rgba(227, 181, 87, 0.08), rgba(99, 179, 255, 0.035)),
    var(--surface-2);
}

.product-disclaimer {
  max-width: 640px;
  font-size: 13px;
}

.preview-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 44px);
  grid-template-rows: repeat(2, 44px);
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(8, 12, 18, 0.34);
}

.preview-map span,
.preview-map i {
  border-radius: 8px;
}

.preview-map span {
  border: 1px solid rgba(99, 179, 255, 0.22);
  background: rgba(99, 179, 255, 0.075);
}

.preview-map i {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--warn);
}

.preview-map i:nth-of-type(1) { top: 23px; left: 24px; }
.preview-map i:nth-of-type(2) { right: 29px; top: 58px; }
.preview-map i:nth-of-type(3) { left: 62px; bottom: 21px; }

.planned-list {
  display: grid;
  gap: 10px;
}

.planned-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.35fr) minmax(180px, 0.8fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.planned-row h3 {
  margin-top: 7px;
  font-size: 17px;
}

.planned-row p {
  margin: 0;
}

.planned-row small {
  color: var(--muted);
  line-height: 1.45;
}

.desert-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.desert-preview-hero {
  align-items: center;
}

.preview-panel {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.roster-preview-list,
.assignment-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.roster-preview-list div,
.assignment-preview div {
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.roster-preview-list strong,
.assignment-preview strong {
  display: block;
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
}

.desert-entry,
.desert-planner {
  display: grid;
  gap: 18px;
}

/* ONE PAGE SHELL FOR THE WHOLE ENTRY FLOW.
   The site shell is 1420px because most routes are data-heavy. This one is a
   hero over a setup card: at 1420 the hero spanned the window while the form
   sat capped at 720 in the middle of it, which is exactly why the two read as
   unrelated objects. Capping the SECTION -- not each panel -- puts the hero,
   the setup card and Recent Workspaces on one grid, all the same width, all
   centred, with no empty column beside any of them. */
.desert-entry {
  width: min(1080px, 100%);
  margin-inline: auto;
  gap: var(--space-4);
}

/* --- The hero ---------------------------------------------------------------
   Header-sized, not stage-sized, and the one place on this page that says
   "Desert Storm" with something other than words: a faint map grid fading down
   from the top edge and a warm sand-toned glow at the inline end. Both are
   pseudo-elements of this box -- absolutely positioned, so neither becomes a
   grid item -- and both are placed with LOGICAL insets, so the glow sits at the
   left in Arabic and the right in English without a second rule. The grid's
   mask fades vertically, which is the one axis that means the same thing in
   both directions. */
.desert-entry-hero {
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: var(--space-5);
  padding: 22px 26px;
  border-color: var(--border-structural);
  background:
    linear-gradient(180deg, rgba(79, 141, 217, 0.05), transparent 62%),
    var(--surface-card);
  box-shadow: inset 0 1px 0 rgba(232, 188, 85, 0.13), var(--shadow-rest);
}

.desert-entry-hero::before,
.desert-entry-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* The sand glow. Warm, wide and low-alpha: atmosphere behind the copy, never a
   coloured panel under it. */
.desert-entry-hero::before {
  inset-block-start: -140px;
  inset-inline-end: -110px;
  width: 460px;
  height: 400px;
  background: radial-gradient(closest-side, rgba(217, 169, 63, 0.16), rgba(217, 169, 63, 0.05) 58%, transparent 100%);
}

/* The map grid. 34px cells at 5% gold -- readable as a motif, invisible as
   texture behind a paragraph. */
.desert-entry-hero::after {
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(217, 169, 63, 0.055) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, rgba(217, 169, 63, 0.055) 0 1px, transparent 1px 34px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 78%);
}

/* Above both layers. Without this the copy shares a stacking context with the
   grid and the glow and the paint order is left to chance. */
.desert-entry-hero > * {
  position: relative;
  z-index: 1;
}

.desert-entry-hero-copy {
  display: grid;
  justify-items: start;
  gap: 8px;
}

/* Smaller than a landing hero on purpose: this title introduces the card
   directly below it. */
.desert-entry-hero h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
}

.desert-entry-hero p {
  margin: 0;
  max-width: 62ch;
}

.desert-entry-hero .product-disclaimer {
  font-size: 12px;
  line-height: 1.5;
}

/* ONE COLUMN, in priority order: create a workspace, then resume one.
   It was a two-column split holding three panels (Recent | Create | Stored
   alliances). Saved Alliances is gone from this page and Recent Workspaces is now
   a collapsed disclosure, so a side-by-side split would put a closed one-line
   summary beside a full form and leave a column of empty panel behind it. */
.desert-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  /* NO CAP AND NO AUTO MARGIN HERE. Both moved up to `.desert-entry`, so the
     hero shares them and the setup card is no longer narrower than the header
     above it.

     `margin-inline: auto` had to go with the cap, not stay behind as a harmless
     leftover: an auto inline margin cancels a grid item's stretch, so the row
     fell back to shrink-to-fit and settled at its 981px max-content width
     inside a 1080px track -- centred, and still not the hero's width. */
  width: 100%;
}

/* --- Guided setup ---------------------------------------------------------
   One card, five states: information, searching, choosing, confirmed, creating.
   The rules below are the card's own; every colour, radius and control height
   comes from the shared tokens, so this reads as the same product as the
   planner it leads into. Nothing here is positioned with a physical left/right
   value -- the flow is used in Arabic as often as in English. */

/* The card itself. One container for the whole flow: everything inside it is
   separated by spacing, a numbered badge or a single faded rule, never by
   another border. Warmth comes from three low-alpha layers -- a sand glow at the
   top inline edge, a 22px tactical dot field at 3.5%, and a gold inner highlight
   on the top edge -- all of them behind the content and none of them strong
   enough to move body text off its contrast. */
.preview-panel.ds-setup {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: var(--space-5);
  padding: 30px;
  border-color: var(--border-structural);
  background: linear-gradient(180deg, var(--ds-panel) 0%, var(--ds-panel-2) 100%);
  box-shadow: inset 0 1px 0 rgba(232, 188, 85, 0.12), var(--shadow-panel);
}

/* The two texture layers, behind everything. z-index: -1 against the card's own
   isolation, so neither can land on top of a field or a button. */
.preview-panel.ds-setup::before,
.preview-panel.ds-setup::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Sand, at the top inline edge -- which is the right in Arabic and the left in
   English, because the inset is logical. */
.preview-panel.ds-setup::before {
  inset-block-start: -180px;
  inset-inline-start: -120px;
  width: 520px;
  height: 380px;
  background: radial-gradient(closest-side, rgba(217, 169, 63, 0.13), rgba(217, 169, 63, 0.04) 60%, transparent 100%);
}

/* A dot field, not a line grid: at 22px and 3.5% it reads as a surface, and it
   cannot produce the visible ruled repeat that a line grid does at this size. */
.preview-panel.ds-setup::after {
  inset: 0;
  background-image: radial-gradient(rgba(217, 169, 63, 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 60%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 60%);
}

/* --- Card header. Belongs to the whole card, so it sits above the split. --- */
.ds-setup-head {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding-block-end: 2px;
}

.ds-setup-head .eyebrow {
  margin-bottom: 0;
}

.ds-setup-head h2 {
  margin: 0;
  font-size: clamp(23px, 2.2vw, 30px);
  line-height: 1.2;
}

/* A short accent under the heading. One 34px gold stroke -- the restrained
   version of the two full-width rules this replaced. */
.ds-setup-head h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-block-start: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, var(--ds-gold), var(--ds-gold-dim));
}

/* Limited width on purpose: in Arabic an unconstrained supporting sentence
   stretches the full 1080px card and stops reading as a caption. */
.ds-setup-head-note {
  margin: 0;
  max-width: 58ch;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

/* --- The two-step indicator ------------------------------------------------
   Informational and aria-hidden. It is laid out with flexbox in logical order,
   so Step 1 leads on the right in Arabic and on the left in English with no
   second rule, and the connector between them mirrors with the flow. */
.ds-setup-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-block: 2px;
}

.ds-setup-steps-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.ds-setup-steps-label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ds-setup-steps-line {
  flex: 1 1 auto;
  max-width: 150px;
  height: 1px;
  background: var(--border-hairline);
}

/* --- The numbered badge, shared by the indicator and the step headings ------
   Dark navy fill, thin border, readable numeral. No oversized circle: 26px in
   the indicator, 28px on a step heading. */
.ds-setup-badge {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-structural);
  border-radius: var(--radius-sm);
  background: var(--surface-inset);
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ds-setup-badge-n { font-style: normal; font-weight: inherit; }

/* --- Step state. Five values, three appearances --------------------------
   ONE hook drives all of it: [data-setup-state] on the form. `.ds-setup-s1` and
   `.ds-setup-s2` mark the two steps in both the indicator and the columns, so a
   single pair of rules lights the badge in both places. The indicator sits
   OUTSIDE the form, so its rules read the state from the card via :has(). */
.ds-setup-s1 .ds-setup-badge,
.ds-setup-form[data-setup-state="confirmed"] .ds-setup-s2 .ds-setup-badge,
.ds-setup-form[data-setup-state="creating"] .ds-setup-s2 .ds-setup-badge,
.ds-setup:has(.ds-setup-form[data-setup-state="confirmed"]) .ds-setup-steps .ds-setup-s2 .ds-setup-badge,
.ds-setup:has(.ds-setup-form[data-setup-state="creating"]) .ds-setup-steps .ds-setup-s2 .ds-setup-badge {
  border-color: var(--ds-gold-line);
  background: var(--ds-gold-soft);
  color: var(--accent-selected);
}

.ds-setup-s1 .ds-setup-steps-label,
.ds-setup:has(.ds-setup-form[data-setup-state="confirmed"]) .ds-setup-steps .ds-setup-s2 .ds-setup-steps-label,
.ds-setup:has(.ds-setup-form[data-setup-state="creating"]) .ds-setup-steps .ds-setup-s2 .ds-setup-steps-label {
  color: var(--text-secondary);
}

/* Step 1 complete. The number is replaced by a check -- a 18px mark in the
   badge, which is the only green on the card besides the confirmation panel's
   own indicator. */
.ds-setup-form[data-setup-state="confirmed"] .ds-setup-s1 .ds-setup-badge,
.ds-setup-form[data-setup-state="creating"] .ds-setup-s1 .ds-setup-badge,
.ds-setup:has(.ds-setup-form[data-setup-state="confirmed"]) .ds-setup-steps .ds-setup-s1 .ds-setup-badge,
.ds-setup:has(.ds-setup-form[data-setup-state="creating"]) .ds-setup-steps .ds-setup-s1 .ds-setup-badge {
  border-color: var(--ds-green-line);
  background: var(--ds-green-soft);
  color: var(--status-success);
}

.ds-setup-form[data-setup-state="confirmed"] .ds-setup-s1 .ds-setup-badge-n,
.ds-setup-form[data-setup-state="creating"] .ds-setup-s1 .ds-setup-badge-n,
.ds-setup:has(.ds-setup-form[data-setup-state="confirmed"]) .ds-setup-steps .ds-setup-s1 .ds-setup-badge-n,
.ds-setup:has(.ds-setup-form[data-setup-state="creating"]) .ds-setup-steps .ds-setup-s1 .ds-setup-badge-n {
  display: none;
}

.ds-setup-form[data-setup-state="confirmed"] .ds-setup-s1 .ds-setup-badge::after,
.ds-setup-form[data-setup-state="creating"] .ds-setup-s1 .ds-setup-badge::after,
.ds-setup:has(.ds-setup-form[data-setup-state="confirmed"]) .ds-setup-steps .ds-setup-s1 .ds-setup-badge::after,
.ds-setup:has(.ds-setup-form[data-setup-state="creating"]) .ds-setup-steps .ds-setup-s1 .ds-setup-badge::after {
  content: "\2713";
  font-size: 13px;
}

/* Step 2 active: blue, not gold. Gold is "you are here"; blue is "this is the
   action". Only the step heading takes it, so the indicator stays quiet. */
.ds-setup-form[data-setup-state="confirmed"] .ds-setup-col-workspace .ds-setup-badge,
.ds-setup-form[data-setup-state="creating"] .ds-setup-col-workspace .ds-setup-badge {
  border-color: var(--ds-blue-line);
  background: var(--ds-blue-soft);
  color: var(--action-text);
}

.ds-setup-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.ds-setup-col {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
}

/* Two columns from 860px up: below that the two halves would each be too narrow
   to hold a label and its field on one line. 56/44, top-aligned. */
@media (min-width: 860px) {
  .ds-setup-columns {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: 28px;
  }

  /* ONE FADED HAIRLINE, not a border on a box. A solid border-inline-start ran
     the column's full height at full strength and read as the edge of a second
     card; this fades out at both ends, so it separates without enclosing. It is
     a vertical gradient on a logically-inset pseudo-element, which mirrors in
     Arabic without a second rule. */
  .ds-setup-col-workspace {
    position: relative;
    padding-inline-start: 28px;
  }

  .ds-setup-col-workspace::before {
    content: "";
    position: absolute;
    inset-block: 2px 8px;
    inset-inline-start: 0;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--border-hairline) 14%,
      var(--border-hairline) 82%,
      transparent
    );
  }
}

/* --- Step headings ---------------------------------------------------------
   Badge, title, one line. This replaces the eyebrow-plus-full-width-rule pair,
   which drew a long gold line across each column and was the card's main source
   of visual noise. */
.ds-setup-step-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

.ds-setup-step-head .ds-setup-badge {
  width: 28px;
  height: 28px;
  margin-block-start: 1px;
  font-size: 13px;
}

.ds-setup-step-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ds-setup-step-title strong {
  color: var(--text-heading);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.25;
}

.ds-setup-step-title span {
  max-width: 46ch;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.ds-setup-section {
  display: grid;
  gap: 14px;
}

/* --- Step 2's guidance, before an alliance is confirmed --------------------
   A described next action rather than an empty box: recessed surface, one
   hairline, a short blue stroke at the inline start. It retires the moment the
   confirmation card in Step 1 answers it -- CSS only, so the paragraph stays in
   the DOM and no script has to remove it. */
.ds-setup-guidance {
  position: relative;
  margin: 0;
  padding: 11px 13px;
  padding-inline-start: 15px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-recessed);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.ds-setup-guidance::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: var(--radius-pill);
  background: var(--ds-blue);
}

.ds-setup-form[data-setup-state="confirmed"] .ds-setup-guidance,
.ds-setup-form[data-setup-state="creating"] .ds-setup-guidance {
  display: none;
}

/* Tag and warzone belong on one line: they are two short values describing the
   same alliance, and stacking them was most of the card's height. Scoped to
   this card -- the roster page uses the same class name for a wider pair. */
.ds-setup .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 11px;
}

/* The two required fields carry the card's weight: a slightly brighter label and
   a slightly stronger field edge than the optional ones behind the disclosure.
   No asterisk and no red -- nothing has failed, these are simply the two things
   being asked for. */
.ds-setup-section[data-setup-alliance-section] label {
  color: var(--text-secondary);
  font-weight: 600;
}

.ds-setup-section[data-setup-alliance-section] input {
  border-color: var(--border-structural);
}

.ds-setup-required-note {
  margin: -2px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* --- The optional block ----------------------------------------------------
   A native <details>: one click away, no script, and a real disclosure to a
   screen reader. It is quiet by construction -- recessed surface, hairline, a
   muted summary -- so it reads as "there is more if you want it" rather than as
   three more answers the form is waiting for. */
.ds-setup-optional {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-recessed);
}

.ds-setup-optional > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 13px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}

.ds-setup-optional > summary::-webkit-details-marker { display: none; }

.ds-setup-optional > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-inline-start: auto;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 120ms ease;
}

.ds-setup-optional[open] > summary::after { transform: rotate(-135deg); }

.ds-setup-optional > summary:hover { color: var(--text-secondary); }

.ds-setup-optional > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.ds-setup-optional > .ds-setup-section {
  padding: 2px 13px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .ds-setup-optional > summary::after { transition: none; }
}

/* 6px label-to-input, and inputs that are a control height rather than a box. */
.ds-setup .stacked-form label {
  gap: 6px;
}

.ds-setup .stacked-form input {
  min-height: 42px;
  padding: 9px 11px;
}

/* Step 1's own primary action. Full width in its column, a control height, and
   not a pixel taller -- it is the dominant action of ONE step, not of the card. */
.ds-setup-find {
  justify-self: stretch;
  min-height: 44px;
}

/* Step 2's action area. The two buttons and the one line that describes the
   opt-out sit in a single group, so the fallback reads as the quieter half of
   this step rather than as an unrelated boxed section. */
.ds-setup-actions {
  display: grid;
  gap: 9px;
  margin-block-start: 4px;
}

.ds-setup-actions-note {
  margin: 0;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.5;
}

/* Dominant only once there is something to import. */
.ds-setup-primary {
  min-height: 46px;
  font-size: 15px;
}

/* Restrained on purpose: an outline button beside a filled one reads as the
   other way out, not as the other half of a choice.

   TWO classes, deliberately. `button.secondary` in design-system.css is one class
   AND one element, which out-specifies a lone `.ds-setup-fallback` -- so the
   single-class version of this rule was dead the moment it was written, and it
   still LOOKED right only because the colour it failed to override happened to
   match the panel behind it. Matching the element as well makes the declaration
   and the render agree. */
.button.ds-setup-fallback {
  background: transparent;
}

.button.ds-setup-fallback:hover {
  background: var(--surface-hover);
}

[data-pending="true"] {
  pointer-events: none;
  opacity: 0.72;
}

/* The one region that speaks. It replaces its contents on every state change, so
   the card never grows a stack of stale panels. */
.ds-setup-result {
  display: grid;
  gap: 10px;
}

.ds-setup-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-recessed);
  color: var(--text-secondary);
  font-size: 13px;
}

.ds-setup-spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-structural);
  border-top-color: var(--accent-action);
  border-radius: 50%;
  animation: ds-setup-spin 720ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .ds-setup-spinner { animation: none; }
}

/* A failure or an empty result. Amber, hairline, quiet -- a state to resolve,
   not an alarm, and never a full-page error. */
.ds-setup-notice {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 13px 14px;
  border: 1px solid var(--ds-amber-line);
  border-radius: var(--radius-sm);
  background: var(--ds-amber-soft);
  color: var(--text-body);
  font-size: 13px;
  line-height: 1.5;
}

.ds-setup-notice p { margin: 0; }

.ds-setup-notice-fallback { color: var(--text-muted); }

.ds-setup-retry { min-height: 38px; }

.ds-setup-candidates {
  display: grid;
  gap: 8px;
}

.ds-setup-candidates-intro {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.ds-setup-candidate-list {
  display: grid;
  gap: 7px;
}

.ds-setup-candidate {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-recessed);
  color: var(--text-body);
  cursor: pointer;
  font: inherit;
  text-align: start;
}

/* Selection has to be unmistakable on a row that looks like a row: the gold edge
   is the same "you are choosing this" signal the badge uses. */
.ds-setup-candidate:hover,
.ds-setup-candidate:focus-visible {
  border-color: var(--ds-gold-line);
  background: var(--surface-hover);
}

.ds-setup-candidate-lines,
.ds-setup-confirm-lines {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ds-setup-candidate-lines strong,
.ds-setup-confirm-lines strong {
  color: var(--text-heading);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ds-setup-candidate-lines small,
.ds-setup-confirm-lines span {
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* The tag badge. Gold-tinted because a tag is an identity the reader recognises,
   and monospaced digits are not wanted here -- it is a name, not a number. */
.ds-setup-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--ds-gold-line);
  border-radius: var(--radius-sm);
  background: var(--ds-gold-soft);
  color: var(--accent-selected);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* Confirmation. A RAISED SURFACE, not a green panel: the neutral row colour with
   a hairline and a small shadow, so it reads as part of Step 1 rather than as a
   card nested inside the card. The only green left is the check mark itself. */
.ds-setup-confirm {
  display: grid;
  gap: 9px;
  padding: 12px 13px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-row);
  box-shadow: var(--shadow-rest);
}

.ds-setup-confirm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--status-success);
  font-size: 13px;
}

.ds-setup-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ds-green-line);
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}

.ds-setup-confirm-body {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

/* Quiet by construction: a text button at the inline end, which in Arabic is the
   left and in English the right, because the offset is logical. */
.ds-setup-quiet {
  justify-self: end;
  min-height: 36px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--link-color);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-setup-quiet:hover { color: var(--link-hover); }

/* The shared phone padding for panels is `.preview-panel { padding: 16px }`, and
   `.preview-panel.ds-setup` out-specifies it -- so without this the card would
   keep its 26px desk gutters on a 375px screen and lose 20px of field width to
   them. */
@media (max-width: 760px) {
  .preview-panel.ds-setup {
    gap: var(--space-4);
    padding: 16px;
  }

  .ds-setup-head h2 {
    font-size: 24px;
  }

  /* The step labels are the first thing to overflow a 375px row, so they wrap
     rather than push. The indicator stays one line as long as both fit; the
     connector is what gives back the space, because it is the only flexible
     item in the row. */
  .ds-setup-steps {
    gap: 8px;
  }

  .ds-setup-steps-line {
    min-width: 12px;
  }

  .ds-setup-steps-label {
    font-size: 12px;
  }

  .ds-setup-badge {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 560px) {
  /* Full-width actions, and the badge stops competing with the name beside it. */
  .ds-setup-actions,
  .ds-setup-notice { justify-items: stretch; }

  .ds-setup-retry,
  .ds-setup-find { width: 100%; }

  .ds-setup-tag { min-width: 52px; }

  .ds-setup-quiet { justify-self: start; }

  /* Below this the two step names cannot share a line in either language, so the
     indicator becomes two compact rows and the connector -- which only means
     something horizontally -- goes away rather than becoming a stray dash. */
  .ds-setup-steps {
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  .ds-setup-steps-item { flex: 1 1 100%; }

  .ds-setup-steps-line { display: none; }
}

/* Recent Workspaces: a native disclosure, closed on load. The whole summary row
   is the toggle, so the target is the heading rather than a marker beside it.

   Deliberately SECONDARY. It is the same width and alignment as the setup card
   above it -- both are children of the same capped section -- but it sits on the
   recessed surface with a hairline border and no highlight, so a closed row
   reads as "there is more here" rather than as a second offer competing with
   Create New Workspace. */
.desert-recent-workspaces {
  gap: var(--space-3);
  padding: 6px 22px 18px;
  border-color: var(--border-hairline);
  background: var(--surface-recessed);
}

/* Closed, the row IS the panel: the body padding below would otherwise leave a
   band of empty surface under a one-line summary. */
.desert-recent-workspaces:not([open]) {
  padding-block-end: 6px;
}

.desert-recent-workspaces > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  min-height: 52px;
}

/* Takes the free space so the count and the chevron both settle at the inline
   end. The chevron's own `margin-inline-start: auto` then has nothing left to
   claim, which is what keeps the two of them together instead of apart. */
.desert-recent-titles {
  flex: 1 1 auto;
  display: grid;
  gap: 1px;
  min-width: 0;
}

.desert-recent-titles .eyebrow {
  margin-bottom: 0;
  color: var(--text-faint);
}

.desert-recent-workspaces > summary h2 {
  font-size: 18px;
}

/* The count. A numeral in a quiet chip -- a fact about the panel, not a badge
   asking to be clicked. */
.desert-recent-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.desert-recent-count[hidden] { display: none; }

@media (max-width: 760px) {
  .desert-recent-workspaces {
    padding: 4px 16px 16px;
  }

  .desert-recent-workspaces:not([open]) {
    padding-block-end: 4px;
  }

  .desert-recent-workspaces > summary h2 {
    font-size: 16px;
  }
}

.desert-recent-workspaces > summary::-webkit-details-marker { display: none; }

.desert-recent-workspaces > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-inline-start: auto;
  border-right: 2px solid var(--text-muted, currentColor);
  border-bottom: 2px solid var(--text-muted, currentColor);
  transform: rotate(45deg);
  transition: transform 120ms ease;
}

.desert-recent-workspaces[open] > summary::after { transform: rotate(-135deg); }

.desert-recent-workspaces > summary h2 { margin: 0; }

.desert-recent-workspaces > summary:focus-visible {
  outline: 2px solid var(--focus, #7aa7d8);
  outline-offset: 2px;
}

.stacked-form,
.compact-form {
  display: grid;
  gap: 11px;
}

.stacked-form label,
.compact-form label,
.roster-controls label {
  display: grid;
  gap: 6px;
  color: var(--text-soft);
  font-size: 13px;
}

.stacked-form input,
.compact-form input,
.compact-form select,
.roster-controls input,
.roster-controls select {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

.stored-alliance-list {
  display: grid;
  gap: 9px;
  max-height: 460px;
  overflow: auto;
}

.stored-alliance-list article {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.stored-alliance-list span,
.stored-alliance-list code {
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.planner-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
  gap: 16px;
  align-items: end;
}

.planner-header h1 {
  font-size: clamp(28px, 3vw, 42px);
}

.planner-header p {
  color: var(--text-soft);
}

.planner-status-stack {
  display: grid;
  gap: 10px;
}

.taskforce-switch,
.phase-switch,
.mobile-planner-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.taskforce-switch button,
.phase-switch button,
.mobile-planner-tabs button {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-soft);
}

.taskforce-switch button[aria-selected="true"],
.phase-switch button[aria-selected="true"],
.mobile-planner-tabs button[aria-selected="true"] {
  border-color: rgba(99, 179, 255, 0.52);
  background: rgba(99, 179, 255, 0.15);
  color: var(--text);
}

.planner-alert {
  min-height: 42px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-soft);
}

.planner-alert.is-error {
  border-color: rgba(248, 113, 113, 0.48);
  color: #fecaca;
}

.planner-alert.is-success {
  border-color: rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
}

.planner-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.planner-summary article {
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
}

.planner-summary span {
  display: block;
  color: var(--text-soft);
  font-size: 12px;
}

.planner-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.mobile-planner-tabs {
  display: none;
}

.planner-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(440px, 1.25fr) minmax(320px, 0.78fr);
  gap: 14px;
  align-items: start;
}

.planner-panel,
.map-panel {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.planner-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  max-height: calc(100vh - 190px);
  overflow: auto;
}

.map-panel {
  padding: 14px;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-heading h2,
.tactics-card h3 {
  font-size: 18px;
}

.selected-player-pill {
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid rgba(99, 179, 255, 0.26);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 12px;
}

.roster-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.4fr);
  gap: 10px;
}

.roster-section-stack,
.roster-section {
  display: grid;
  gap: 10px;
}

.roster-section h3 {
  font-size: 14px;
  color: var(--text-soft);
}

.player-card {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

.player-card[draggable="true"] {
  cursor: grab;
}

.player-card.is-selected {
  border-color: rgba(99, 179, 255, 0.62);
  background: rgba(99, 179, 255, 0.12);
}

.player-card.is-unavailable {
  opacity: 0.72;
}

.player-card strong,
.assignment-chip {
  overflow-wrap: anywhere;
}

.player-meta,
.player-actions,
.assignment-row,
.role-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.player-meta span,
.role-pills span,
.assignment-chip,
.backup-count {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-soft);
  font-size: 12px;
}

.player-actions button,
.assignment-row button {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
}

.schematic-map {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 18% 80%, rgba(130, 72, 30, 0.22), transparent 18%),
    radial-gradient(circle at 77% 12%, rgba(116, 68, 37, 0.2), transparent 18%),
    linear-gradient(145deg, #c88946, #dca057 42%, #b8753d);
}

.map-sand {
  position: absolute;
  inset: 6%;
  border-radius: 42% 48% 38% 44%;
  background:
    radial-gradient(circle at 46% 48%, rgba(255, 237, 176, 0.42), transparent 28%),
    linear-gradient(135deg, rgba(255, 223, 154, 0.48), rgba(186, 113, 51, 0.24));
  opacity: 0.88;
}

.map-node-layer {
  position: absolute;
  inset: 0;
}

.spawn-zone {
  position: absolute;
  display: grid;
  place-items: center;
  translate: -50% -50%;
  border: 4px solid currentColor;
  background: color-mix(in srgb, currentColor 22%, transparent);
  color: #44c7f4;
  font-weight: 800;
}

.spawn-zone.is-red {
  color: #ef4444;
}

.building-node {
  position: absolute;
  display: grid;
  gap: 4px;
  justify-items: center;
  width: 126px;
  min-height: 92px;
  translate: -50% -50%;
  padding: 8px;
  border: 1px solid rgba(31, 41, 55, 0.22);
  border-radius: 10px;
  background: rgba(14, 20, 30, 0.74);
  color: #f8fafc;
  box-shadow: 0 12px 22px rgba(28, 18, 10, 0.25);
}

.building-node:hover,
.building-node:focus-visible,
.building-node.is-selected,
.building-node.is-drop-target {
  border-color: rgba(99, 179, 255, 0.84);
  outline: none;
}

.building-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(135deg, #f6d15c, #98a2b3);
  color: #111827;
  font-size: 17px;
  font-weight: 900;
}

.building-node[data-objective-key="nuclear_silo"] .building-icon {
  border-radius: 50%;
  background: linear-gradient(135deg, #f8fafc, #475569);
}

.building-node[data-objective-key="oil_refinery"] .building-icon {
  background: linear-gradient(135deg, #86efac, #64748b);
}

.building-node[data-objective-key="field_hospital"] .building-icon {
  background: linear-gradient(135deg, #fee2e2, #facc15);
}

.building-name {
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.building-assignments {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.assignment-chip {
  max-width: 110px;
  color: #f8fafc;
}

.tactics-card {
  display: grid;
  gap: 11px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.detail-stack,
.assignment-list,
.validation-list {
  display: grid;
  gap: 8px;
}

.assignment-row,
.validation-item {
  justify-content: space-between;
  min-width: 0;
  padding: 9px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
}

.validation-item.is-error {
  border: 1px solid rgba(248, 113, 113, 0.38);
}

.danger-button {
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.3);
  color: #fecaca;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(99, 179, 255, 0.9);
  outline-offset: 2px;
}

@media (max-width: 1180px) {
  .planner-header,
  .desert-entry-grid {
    grid-template-columns: 1fr;
  }

  .taskforce-switch,
  .phase-switch {
    justify-content: flex-start;
  }

  .planner-layout {
    grid-template-columns: 1fr;
  }

  .planner-panel {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .available-grid,
  .desert-preview-grid,
  .planner-summary {
    grid-template-columns: 1fr;
  }

  .mobile-planner-tabs {
    display: flex;
    justify-content: stretch;
  }

  .mobile-planner-tabs button {
    flex: 1 1 0;
  }

  .planner-layout [data-planner-section] {
    display: none;
  }

  .planner-layout [data-planner-section].is-mobile-active {
    display: grid;
  }

  .schematic-map {
    min-height: 560px;
  }

  .building-node {
    width: 108px;
    min-height: 84px;
    padding: 7px;
  }

  .planner-header h1 {
    font-size: 28px;
  }

  .phase-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.roster-preview-list span,
.assignment-preview span {
  color: var(--muted);
  font-size: 12px;
}

.tactical-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(4, 46px);
  gap: 8px;
  min-height: 210px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(99, 179, 255, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 179, 255, 0.065) 1px, transparent 1px),
    rgba(8, 12, 18, 0.36);
  background-size: 36px 36px;
}

.zone,
.objective {
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
}

.zone {
  border: 1px solid rgba(99, 179, 255, 0.32);
  background: rgba(99, 179, 255, 0.1);
  color: #d8ecff;
  font-weight: 820;
}

.zone-a { grid-column: 1 / 3; grid-row: 1 / 3; }
.zone-b { grid-column: 5 / 7; grid-row: 1 / 3; }
.zone-c { grid-column: 3 / 5; grid-row: 3 / 5; }

.objective {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(227, 181, 87, 0.8);
  background: rgba(227, 181, 87, 0.16);
  align-self: center;
  justify-self: center;
}

.objective-one { grid-column: 3; grid-row: 2; }
.objective-two { grid-column: 4; grid-row: 2; }
.objective-three { grid-column: 4; grid-row: 3; }

.stage-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-list li {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.stage-list span {
  color: var(--muted);
}

.save-preview {
  align-items: center;
}

.disabled-control-row {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.disabled-control-row span {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  padding: 8px 11px;
}

.battle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  margin: 18px 0;
}

.internal-qa {
  display: grid;
  gap: 18px;
}

.internal-qa .compact {
  min-height: auto;
  padding-block: 24px;
}

.internal-qa .hero-actions,
.internal-qa .section-heading,
.internal-qa .sample-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.internal-qa .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.internal-qa .metric {
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-muted);
}

.internal-qa .metric span,
.internal-qa .microcopy,
.internal-qa .sample-meta {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.internal-qa .metric strong {
  color: var(--text-strong);
  font-size: 1.45rem;
}

.internal-qa .filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.internal-qa .filter-grid label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.internal-qa .filter-grid select {
  width: 100%;
}

.internal-qa .sample-group {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.internal-qa .sample-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
}

.internal-qa .sample-card summary {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(150px, 1fr) minmax(80px, 0.5fr) minmax(180px, 1.6fr) minmax(90px, 0.6fr);
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
}

.internal-qa .sample-card[open] summary {
  border-bottom: 1px solid var(--border);
}

.internal-qa .sample-card .table-wrap,
.internal-qa .sample-meta {
  margin: 12px 14px;
}

@media (max-width: 760px) {
  .internal-qa .section-heading,
  .internal-qa .hero-actions,
  .internal-qa .sample-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .internal-qa .sample-card summary {
    grid-template-columns: 1fr;
  }
}

.side-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.attacker-panel,
.attacker-accent { border-color: rgba(125, 183, 255, 0.42); }
.defender-panel,
.defender-accent { border-color: rgba(165, 180, 252, 0.34); }

.side-heading {
  display: flex;
  gap: 12px;
  align-items: center;
}

.side-heading h2 { margin-bottom: 3px; }
.side-heading p { margin: 0; }

.role-badge {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  font-weight: 820;
  color: #0d131a;
  flex: 0 0 auto;
}

.attacker-badge { background: var(--attack); }
.defender-badge { background: var(--defense); }

.side-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(110px, 0.7fr) auto;
  gap: 10px;
  align-items: end;
}

.versus-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
}

.versus-panel strong,
.score-orb {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #0b0f15;
  box-shadow: inset 0 0 0 5px rgba(99, 179, 255, 0.05);
  font-size: 24px;
}

.swap-button { width: 100%; }

.candidate-list,
.card-list,
.stack,
.warning-list {
  display: grid;
  gap: 12px;
}

/* Owned by design-system.css since the token migration. The copy that was
   here restated the same selector with the pre-migration palette and, loading
   later, won every time -- so the foundation was never actually in force. */
/* Hover no longer lifts the card. Nothing in this language transforms on
   hover: border, fill and label rise together and the movement was the one
   effect that made a dense list feel unstable under the cursor. */
.candidate-card:hover,
.list-card:hover {
  border-color: var(--border-hover);
  background: var(--surface-hover);
}

.empty-state.compact { padding: 10px; }

.search-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 13px;
}

.comparison-controls,
.filter-bar,
.recalc-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.8fr) auto;
  gap: 14px;
  align-items: end;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  margin-top: 8px;
}

.top-n-control {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) minmax(125px, 0.8fr);
  gap: 10px;
  align-items: end;
}

.primary-compare { min-width: 170px; }

.metrics,
.summary-strip,
.metric-grid,
.quality-grid,
.source-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quality-grid,
.source-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.freshness-grid,
.transparency-summary,
.local-h2h-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.refresh-form {
  display: grid;
  justify-items: end;
  gap: 7px;
  min-width: 190px;
}

.refresh-form small {
  color: var(--muted);
  font-size: 12px;
}

.freshness-card {
  display: grid;
  gap: 8px;
}

.freshness-card em {
  justify-self: start;
  font-style: normal;
}

.freshness-fresh { border-color: rgba(103, 211, 145, 0.45); color: #b9f2cc; background: rgba(103, 211, 145, 0.12); }
.freshness-aging { border-color: rgba(227, 181, 87, 0.48); color: #ffe0a4; background: rgba(227, 181, 87, 0.12); }
.freshness-stale { border-color: rgba(255, 121, 121, 0.5); color: #ffc4c4; background: rgba(255, 121, 121, 0.12); }

.score-transparency-table tfoot th {
  color: var(--text);
  background: rgba(99, 179, 255, 0.08);
}

.transparency-summary article,
.local-h2h-summary article,
.local-score-card {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px;
}

.transparency-summary span,
.local-h2h-summary span,
.local-score-card span,
.local-score-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.transparency-summary strong,
.local-h2h-summary strong,
.local-score-card strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.25;
}

.local-adjustment-status {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 16px;
}

.local-adjustment-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  width: min(480px, 100%);
  height: 100%;
  overflow: auto;
  padding: 22px;
  border-left: 1px solid var(--line);
  background: #101722;
  box-shadow: -20px 0 40px rgba(0, 0, 0, 0.34);
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.drawer-header h2 {
  margin-bottom: 6px;
}

.drawer-header p {
  margin: 0;
  color: var(--muted);
}

.local-editor {
  display: grid;
  gap: 14px;
}

.local-editor-identity {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.local-editor-identity strong,
.local-editor-identity small {
  display: block;
  overflow-wrap: anywhere;
}

.local-editor-identity small,
.local-editor-help {
  color: var(--muted);
  font-size: 12px;
}

.local-editor-input {
  display: grid;
  gap: 7px;
}

.local-editor-facts {
  margin: 0;
}

.local-adjust-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 8px;
  align-items: center;
}

.local-adjust-controls input {
  min-height: 38px;
}

.local-adjust-controls button {
  min-height: 38px;
  padding: 8px 10px;
}

.player-correction-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.player-correction-row small {
  color: var(--muted);
  font-size: 12px;
}

.manual-squad-type-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.manual-squad-type-control.is-compact {
  gap: 5px;
}

.manual-squad-type-control.is-readonly {
  display: inline-flex;
}

.manual-squad-type-control.is-readonly[hidden] {
  display: none;
}

.manual-squad-type-display {
  display: inline-flex;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.manual-squad-type-display.is-empty {
  color: var(--muted);
}

.manual-squad-type-form {
  flex: 1 1 260px;
  min-width: min(260px, 100%);
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-2);
}

.manual-squad-type-form[hidden] {
  display: none;
}

.manual-squad-type-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.manual-squad-type-form select {
  min-height: 38px;
}

.manual-type-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.manual-type-button {
  white-space: nowrap;
}

.manual-squad-type-badge {
  min-height: 24px;
  padding: 3px 8px;
}

[data-local-edit].is-adjusted {
  border-color: rgba(227, 181, 87, 0.48);
  color: #ffe0a4;
}

.compact-local-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.local-hidden-table {
  display: none;
}

.local-h2h-table td strong,
.local-h2h-table td small {
  display: block;
}

.local-h2h-table td small {
  color: var(--muted);
  font-size: 12px;
}

.metrics article,
.summary-strip article,
.metric-card {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 0;
}

.metrics span,
.summary-strip span,
.metric-card span,
.summary-side small,
.metric-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.metrics strong,
.summary-strip strong,
.metric-card strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  line-height: 1.25;
}

.comparison-hero {
  display: grid;
  gap: 18px;
}

.comparison-sides {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.15fr) minmax(0, 0.9fr);
  gap: 18px;
  align-items: start;
}

.summary-side {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  padding: 20px;
}

.summary-side h2 { font-size: 27px; }
.summary-side strong { font-size: 28px; }

.summary-side h2,
.summary-side strong,
.metric-card strong,
.summary-strip strong {
  overflow-wrap: anywhere;
}

.side-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
}

.side-meta span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-soft);
  font-size: 12px;
}

.side-power {
  display: grid;
  gap: 2px;
}

.score-orb {
  width: 112px;
  height: 112px;
  justify-self: center;
  text-align: center;
}

.score-orb span,
.score-orb small {
  color: var(--muted);
  font-size: 12px;
}

.score-orb strong {
  font-size: 25px;
}

.verdict-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(99, 179, 255, 0.28);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(99, 179, 255, 0.08), rgba(255, 255, 255, 0.015)),
    var(--surface-2);
}

.verdict-card.verdict-attacker { border-color: rgba(125, 183, 255, 0.38); }
.verdict-card.verdict-defender { border-color: rgba(165, 180, 252, 0.34); }
.verdict-card.verdict-even { border-color: rgba(189, 200, 214, 0.34); }

.more-menu {
  position: relative;
}

.more-menu > summary {
  list-style: none;
}

.more-menu > summary::-webkit-details-marker {
  display: none;
}

.more-menu-panel {
  position: absolute;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  min-width: 230px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.34);
}

.more-menu-panel a,
.more-menu-panel button {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
  font-weight: 750;
}

.more-menu-panel a:hover,
.more-menu-panel button:hover,
.more-menu-panel a:focus-visible,
.more-menu-panel button:focus-visible {
  background: var(--surface-2);
  color: var(--text);
}

.verdict-topline,
.reason-heading,
.squad-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.verdict-topline strong {
  font-size: 22px;
  line-height: 1.15;
}

.score-line {
  display: grid;
  gap: 3px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(8, 12, 18, 0.52);
}

.score-line span,
.score-line small,
.verdict-meta span,
.verdict-callouts span,
.verdict-factors > span {
  color: var(--muted);
  font-size: 12px;
}

.score-line strong {
  font-size: 34px;
  line-height: 1;
}

.verdict-meta,
.verdict-callouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.verdict-meta div,
.verdict-callouts div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.verdict-meta strong,
.verdict-callouts strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.verdict-factors {
  display: grid;
  gap: 9px;
}

.score-factor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
}

.score-factor span {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.score-factor i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.score-factor.is-attacker i,
.reason-card.reason-attacker .reason-meter span,
.metric-bar.is-attacker span {
  background: var(--attack);
}

.score-factor.is-defender i,
.reason-card.reason-defender .reason-meter span,
.metric-bar.is-defender span {
  background: var(--defense);
}

.verdict-timestamp {
  color: var(--muted);
}

.why-panel .section-title {
  margin-bottom: 16px;
}

.reason-grid,
.strength-grid,
.range-grid,
.analysis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.strength-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.range-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reason-card,
.signal-card,
.range-card,
.squad-detail-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.reason-card h3,
.squad-detail-card h3 {
  margin: 0;
  font-size: 18px;
}

.reason-card p,
.signal-card p,
.range-card p {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 13px;
}

.reason-card.reason-attacker { border-color: rgba(125, 183, 255, 0.3); }
.reason-card.reason-defender { border-color: rgba(165, 180, 252, 0.28); }

.compare-values {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.reason-meter,
.metric-bar {
  height: 8px;
  overflow: hidden;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.reason-meter span,
.metric-bar span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: var(--accent);
}

.metric-card-analysis em {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.signal-card.attacker-card { border-color: rgba(125, 183, 255, 0.28); }
.signal-card.defender-card { border-color: rgba(165, 180, 252, 0.26); }
.signal-card.is-risk { background: rgba(227, 181, 87, 0.045); }

.signal-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.signal-list li {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.signal-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.signal-list span {
  color: var(--muted);
  font-size: 13px;
}

.range-card strong {
  display: block;
  font-size: 18px;
}

.formation-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  width: max-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.formation-badge svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.formation-badge path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.formation-tank { color: #ffd6b1; border-color: rgba(242, 163, 95, 0.34); }
.formation-missile { color: #f8d690; border-color: rgba(227, 181, 87, 0.34); }
.formation-aircraft { color: #b9dcff; border-color: rgba(99, 179, 255, 0.34); }
.formation-mixed { color: #d3c9ff; border-color: rgba(166, 145, 255, 0.34); }
.formation-unknown { color: var(--muted); }

.squad-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.squad-type-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  mask: var(--squad-type-icon) center / contain no-repeat;
  -webkit-mask: var(--squad-type-icon) center / contain no-repeat;
}

.squad-type-tank {
  --squad-type-icon: url("/static/icons/squad-tank.svg");
  color: #ffd8ad;
  border-color: rgba(242, 163, 95, 0.32);
}

.squad-type-aircraft {
  --squad-type-icon: url("/static/icons/squad-aircraft.svg");
  color: #b9dcff;
  border-color: rgba(99, 179, 255, 0.32);
}

.squad-type-missile {
  --squad-type-icon: url("/static/icons/squad-missile.svg");
  color: #f6d98d;
  border-color: rgba(227, 181, 87, 0.32);
}

.squad-type-unavailable {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.squad-type-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.squad-type-legend-title {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.squad-type-legend-title b {
  color: var(--accent);
}

.squad-type-legend small {
  flex: 1 1 260px;
  min-width: 180px;
  color: var(--muted);
  line-height: 1.45;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.compact-title {
  margin-bottom: 12px;
}

.key-matchups-section {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.key-matchup-list,
.public-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.key-matchup-card,
.public-comparison-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.key-matchup-card strong,
.public-comparison-card h2,
.public-comparison-card p {
  overflow-wrap: anywhere;
}

.key-matchup-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: baseline;
}

.key-matchup-sides span {
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.key-matchup-sides b {
  white-space: nowrap;
}

.public-comparison-card h2 {
  margin: 3px 0 6px;
  font-size: 20px;
}

.public-comparison-card p {
  margin: 0;
  color: var(--muted);
}

.comparison-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.comparison-card-metrics span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);
  font-size: 12px;
}

/* Owned by design-system.css since the token migration. The copy that was
   here restated the same selector with the pre-migration palette and, loading
   later, won every time -- so the foundation was never actually in force. */
/* The active tab was blue-tinted here, which is the inversion this redesign
   exists to correct: a tab you chose is SELECTED, and selected is gold. */

.tab-panel { display: block; }

.mode-shell {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.mode-tabs {
  position: sticky;
  top: 64px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  margin-bottom: 2px;
  background: rgba(15, 18, 23, 0.96);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.mode-tabs .tab-button {
  min-width: 160px;
  min-height: 42px;
  padding: 10px 18px;
}

.mode-tabs .tab-button.is-active {
  border-color: rgba(99, 179, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(99, 179, 255, 0.14), rgba(99, 179, 255, 0.05)),
    var(--surface-2);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.mode-panel {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.top3-matchup-list,
.top3-quality-side {
  display: grid;
  gap: 12px;
}

.matchup-list {
  display: grid;
  gap: 12px;
}

.matchup-card,
.top3-matchup-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-3);
  overflow: hidden;
}

.matchup-summary,
.top3-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(140px, 0.6fr) minmax(0, 1.2fr) auto auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px;
}

.matchup-summary::-webkit-details-marker,
.top3-summary::-webkit-details-marker,
.top3-matchup-card > summary::-webkit-details-marker,
.top3-player-quality > summary::-webkit-details-marker {
  display: none;
}

.details-toggle {
  justify-self: end;
  min-height: 40px;
  min-width: 118px;
  padding: 8px 12px;
  border: 1px solid rgba(99, 179, 255, 0.34);
  border-radius: var(--radius-sm);
  background: rgba(99, 179, 255, 0.08);
  color: var(--text);
  font-weight: 800;
}

.details-toggle:hover {
  border-color: rgba(99, 179, 255, 0.58);
  background: rgba(99, 179, 255, 0.14);
}

.details-toggle:focus-visible {
  outline: 3px solid rgba(99, 179, 255, 0.34);
  outline-offset: 2px;
}

.top3-summary {
  grid-template-columns: auto minmax(0, 1fr) minmax(140px, auto) minmax(0, 1fr) auto auto;
}

.matchup-side {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.defender-side {
  grid-template-columns: auto minmax(0, 1fr) auto;
  text-align: right;
}

.matchup-side strong,
.top3-summary strong {
  overflow-wrap: anywhere;
}

.matchup-side small,
.top3-summary small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.matchup-side b {
  color: var(--text);
  font-size: 16px;
  white-space: nowrap;
}

.matchup-power-type {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

.attacker-side .matchup-power-type {
  justify-content: flex-start;
}

.diff-chip {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 112px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-soft);
  font-weight: 800;
}

.diff-chip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.diff-chip.is-attacker { color: #cbe5ff; border-color: rgba(125, 183, 255, 0.34); }
.diff-chip.is-defender { color: #d9dfff; border-color: rgba(165, 180, 252, 0.32); }

.expand-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.matchup-expanded {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 14px 14px;
}

.detail-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.detail-list div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.detail-list dt {
  color: var(--muted);
  font-size: 12px;
}

.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.squad-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.squad-line div {
  min-width: 0;
}

.squad-line strong,
.squad-line small {
  display: block;
}

.local-adjust-button {
  min-height: 38px;
  white-space: nowrap;
}

.local-adjustment-badge {
  width: fit-content;
  margin-top: 5px;
}

.top3-local-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.top3-local-list h4 {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
}

.top3-local-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}

.top3-local-row strong,
.top3-local-row small {
  display: block;
  overflow-wrap: anywhere;
}

.top3-local-row small {
  color: var(--muted);
  font-size: 12px;
}

.top3-local-power {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.compact-warning {
  margin-top: 12px;
}

.top3-matchup-card,
.top3-player-quality {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-3);
  overflow: hidden;
}

.top3-matchup-card > summary,
.top3-player-quality > summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(130px, auto) minmax(90px, auto) auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.top3-matchup-card > summary.top3-summary {
  grid-template-columns: auto minmax(0, 1fr) minmax(140px, auto) minmax(0, 1fr) auto auto;
}

.top3-matchup-card > .top3-summary {
  grid-template-columns: auto minmax(0, 1fr) minmax(140px, auto) minmax(0, 1fr) auto auto auto;
}

.top3-player-quality > summary {
  grid-template-columns: minmax(180px, 1fr) auto auto;
}

.top3-matchup-detail {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
}

.top3-player-pair,
.top3-quality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Owned by design-system.css since the token migration. The copy that was
   here restated the same selector with the pre-migration palette and, loading
   later, won every time -- so the foundation was never actually in force. */
/* Three things went with it. `text-align: left` is physical and reversed every
   Arabic table's alignment relative to its own text; `start` is in the shared
   rule. `font-weight: 800` asks for a master no shipped face has, so the browser
   fabricated a stem. And the 4n+1 zebra fought both the row hover and the
   selected-row fill for the same pixels -- one signal per row, and it is the one
   the user caused.

   Only the layout half of `td small` stays: its colour and size come from the
   shared rule. */
td small {
  display: block;
}

.rank-pill {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-weight: 800;
}

.player-chip {
  display: grid;
  gap: 4px;
}

.player-chip strong {
  font-size: 15px;
}

.player-chip.attacker strong { color: #cbe5ff; }
.player-chip.defender strong { color: #d9dfff; }

.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}

.result-attacker { color: #cbe5ff; background: var(--attack-soft); border: 1px solid rgba(125, 183, 255, 0.34); }
.result-defender { color: #d9dfff; background: var(--defense-soft); border: 1px solid rgba(165, 180, 252, 0.32); }
.result-tie { color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line); }
.result-unavailable { color: #d8d1c1; background: rgba(227, 181, 87, 0.12); border: 1px solid rgba(227, 181, 87, 0.35); }

.positive { color: #cbe5ff; font-weight: 800; }
.negative { color: #d9dfff; font-weight: 800; }

.compact-facts {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 13px;
}

.compact-facts div {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 10px;
}

.compact-facts dt { color: var(--muted); }
.compact-facts dd { margin: 0; }

.inline-check {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.inline-check input { width: auto; margin-top: 5px; }

/* Owned by design-system.css since the token migration. The copy that was
   here restated the same selector with the pre-migration palette and, loading
   later, won every time -- so the foundation was never actually in force. */

.progress-track {
  height: 12px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin: 16px 0;
}

.progress-track span {
  display: block;
  height: 100%;
  min-width: 4px;
  background: var(--accent);
  border-radius: inherit;
}

.success-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: rgba(103, 211, 145, 0.1);
  border: 1px solid rgba(103, 211, 145, 0.35);
  border-radius: var(--radius);
  padding: 14px;
}

.list-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text);
}

.list-card strong,
.list-card span {
  display: block;
}

.list-card span,
.list-metrics {
  color: var(--muted);
}

.list-metrics {
  text-align: right;
  display: grid;
  gap: 4px;
  flex: 0 0 auto;
}

.list-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.inline-action-form {
  display: contents;
}

.product-card-note {
  color: var(--muted);
  font-size: 14px;
}

.export-button { margin-top: 16px; }

.analytics-shell {
  display: grid;
  gap: 18px;
}

.analytics-hero {
  display: grid;
  gap: 16px;
}

.analytics-mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(8, 12, 18, 0.35);
}

.analytics-mode-switch a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-soft);
}

.analytics-mode-switch a.is-active {
  color: var(--text);
  background: var(--surface-2);
  border-color: rgba(99, 179, 255, 0.58);
}

.analytics-summary-grid,
.resilience-grid,
.tier-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.job-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.analytics-summary-grid article,
.tier-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.analytics-summary-grid span,
.analytics-summary-grid small,
.tier-card dt {
  color: var(--muted);
  font-size: 12px;
}

.analytics-summary-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
}

.tier-segment {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.tier-segment-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.tier-segment-item::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  width: calc(var(--share) * 1%);
  background: var(--accent);
}

.tier-segment-item strong,
.tier-segment-item span,
.tier-segment-item small {
  position: relative;
  display: block;
}

.power-rank-chart {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.rank-bar-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 90px;
  gap: 10px;
  align-items: center;
}

.rank-bar-row > span,
.rank-bar-row > strong {
  color: var(--text-soft);
  font-size: 12px;
}

.rank-bar-row div {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.rank-bar-row i {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: var(--accent);
}

.rank-bar-row.is-cliff i {
  background: var(--warn);
}

.rank-bar-row.is-missing i {
  background: transparent;
}

.analytics-controls {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 0.8fr) minmax(160px, 0.8fr) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.analytics-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.inline-filter {
  display: inline-flex;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px;
}

.inline-filter input {
  width: auto;
  min-height: auto;
}

.analytics-grid-table th,
.analytics-grid-table td {
  white-space: nowrap;
}

.analytics-player-detail summary {
  cursor: pointer;
}

.cell-power {
  display: grid;
  gap: 4px;
  min-width: 110px;
}

.cell-power i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.tier-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.tier-elite { border-color: rgba(242, 163, 95, 0.36); }
.tier-upper { border-color: rgba(99, 179, 255, 0.36); }
.tier-middle { border-color: rgba(112, 211, 154, 0.36); }
.tier-lower { border-color: rgba(227, 181, 87, 0.36); }

.analytics-mobile-cards {
  display: none;
}

.analytics-mobile-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}

.analytics-mobile-card summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
}

.analytics-mobile-card b {
  grid-column: 1 / -1;
  font-size: 20px;
}

.analytics-mobile-card .compact-facts {
  padding: 0 12px 12px;
}

.report-shell {
  display: grid;
  gap: 18px;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.report-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.report-copy-source {
  position: absolute;
  left: -9999px;
}

.report-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 20px;
}

.report-list li {
  color: var(--text-soft);
}

.disclaimer {
  border-color: rgba(227, 181, 87, 0.48);
}

@media (max-width: 1040px) {
  .product-hero,
  .desert-preview-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .product-hero-actions {
    justify-content: flex-start;
  }

  .product-card-main,
  .save-preview {
    display: grid;
  }

  .planned-row,
  .desert-preview-grid {
    grid-template-columns: 1fr;
  }

  .hub-highlight-list.is-dense {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .comparison-sides,
  .battle-layout {
    grid-template-columns: 1fr;
  }

  .score-orb,
  .versus-panel {
    justify-self: center;
  }

  .metrics,
  .summary-strip,
  .metric-grid,
  .quality-grid,
  .source-grid,
  .key-matchup-list,
  .public-comparison-grid,
  .freshness-grid,
  .transparency-summary,
  .local-h2h-summary,
  .insight-grid,
  .reason-grid,
  .strength-grid,
  .range-grid,
  .analysis-grid,
  .matchup-expanded,
  .analytics-summary-grid,
  .tier-segment,
  .tier-card-grid,
  .resilience-grid,
  .report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .matchup-summary,
  .top3-summary,
  .top3-matchup-card > summary.top3-summary,
  .top3-matchup-card > .top3-summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .matchup-summary .diff-chip,
  .top3-summary .diff-chip,
  .matchup-summary .result-badge,
  .top3-summary .result-badge,
  .matchup-summary .details-toggle,
  .top3-summary .details-toggle {
    grid-column: span 1;
  }
}

@media (max-width: 760px) {
  /* Block padding only: the shell's INLINE space is the gutter in its width
     calculation, and padding on top of that indented the content twice. */
  .shell { padding-block: var(--space-4); }

  .product-hero,
  .product-card,
  .preview-panel {
    padding: 16px;
  }

  .product-hero h1 {
    font-size: 32px;
  }

  .available-grid,
  .hub-highlight-list,
  .hub-highlight-list.is-dense,
  .roster-preview-list,
  .assignment-preview {
    grid-template-columns: 1fr;
  }

  .product-hero-actions,
  .disabled-control-row {
    align-items: stretch;
    justify-content: stretch;
  }

  .product-hero-actions > *,
  .disabled-control-row > * {
    flex: 1 1 100%;
  }

  .product-card-topline {
    align-items: flex-start;
  }

  .preview-map {
    grid-template-columns: repeat(2, 36px);
    grid-template-rows: repeat(2, 36px);
    width: max-content;
  }

  .panel,
  .comparison-hero {
    padding: 16px;
  }

  .section-title,
  .page-hero,
  .profile-hero,
  .list-card {
    display: grid;
  }

  .side-search-form,
  .comparison-controls,
  .filter-bar,
  .recalc-form,
  .top-n-control,
  .metrics,
  .summary-strip,
  .metric-grid,
  .quality-grid,
  .source-grid,
  .freshness-grid,
  .transparency-summary,
  .local-h2h-summary,
  .insight-grid,
  .reason-grid,
  .strength-grid,
  .range-grid,
  .analysis-grid,
  .matchup-expanded,
  .analytics-summary-grid,
  .tier-segment,
  .tier-card-grid,
  .resilience-grid,
  .report-grid,
  .analytics-controls,
  .top3-player-pair,
  .top3-quality-grid {
    grid-template-columns: 1fr;
  }

  .refresh-form {
    justify-items: start;
  }

  .local-adjust-controls {
    grid-template-columns: 1fr;
  }

  .manual-squad-type-form,
  .manual-type-actions,
  .manual-type-actions button {
    width: 100%;
  }

  .top3-local-row,
  .squad-line {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .drawer-panel {
    width: 100%;
    padding: 18px;
  }

  .drawer-header {
    display: grid;
  }

  .more-menu {
    width: 100%;
  }

  .more-menu-panel {
    position: static;
    min-width: 0;
  }

  .verdict-meta,
  .verdict-callouts {
    grid-template-columns: 1fr;
  }

  .verdict-topline {
    display: grid;
    gap: 4px;
  }

  .mode-tabs {
    position: static;
  }

  .mode-tabs .tab-button {
    flex: 1 1 150px;
    min-width: 0;
  }

  .top3-matchup-card > summary,
  .top3-player-quality > summary,
  .matchup-summary,
  .top3-summary,
  .top3-matchup-card > summary.top3-summary,
  .top3-matchup-card > .top3-summary {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .matchup-side,
  .defender-side {
    grid-template-columns: auto minmax(0, 1fr);
    text-align: left;
  }

  .matchup-power-type {
    justify-content: flex-start;
    gap: 7px;
  }

  .matchup-side b {
    grid-column: 1 / -1;
  }

  .defender-side .formation-badge {
    grid-row: 1;
  }

  .diff-chip {
    justify-items: start;
    min-width: 0;
  }

  .formation-badge,
  .squad-type-badge {
    white-space: normal;
  }

  .squad-type-legend {
    align-items: flex-start;
  }

  .detail-list div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .attacker-panel { grid-row: 1; }
  .versus-panel { grid-row: 2; }
  .defender-panel { grid-row: 3; }

  .list-metrics {
    text-align: left;
  }

  h1 { font-size: 30px; }

  .table-wrap table {
    min-width: 820px;
  }

  .compact-facts div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .analytics-grid-wrap {
    display: none;
  }

  .analytics-mobile-cards {
    display: grid;
    gap: 10px;
  }

  .analytics-controls {
    align-items: stretch;
  }

  .rank-bar-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .rank-bar-row strong {
    grid-column: 2;
  }
}

/* Phase 4H Desert Storm map-first workspace. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shell:has(.desert-planner) {
  width: 100%;
  max-width: none;
  padding: 0;
}

.desert-entry .stored-alliance-list {
  display: grid;
  gap: 10px;
  max-height: 540px;
  overflow: auto;
}

.stored-alliance-card {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  text-align: left;
}

.stored-alliance-card:hover,
.stored-alliance-card:focus-visible,
.stored-alliance-card[aria-selected="true"] {
  border-color: rgba(105, 183, 255, 0.58);
  background: rgba(105, 183, 255, 0.12);
}

.stored-alliance-card span,
.stored-alliance-card small,
.selected-alliance-summary {
  color: var(--text-soft);
}

.selected-alliance-summary {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
}

.desert-planner {
  height: calc(100vh - var(--sticky-header-height));
  min-height: 680px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 18%, rgba(36, 122, 192, 0.12), transparent 32%),
    linear-gradient(180deg, #07101a 0%, #050a10 100%);
  color: #f4f8fd;
}

.planner-header {
  display: grid;
  grid-template-columns: minmax(270px, 1.15fr) minmax(270px, 0.62fr) minmax(420px, 1.25fr) minmax(190px, 0.5fr);
  gap: 18px;
  align-items: center;
  min-height: 112px;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(4, 10, 17, 0.94);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26);
}

.planner-title-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.planner-shield {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border: 1px solid rgba(87, 167, 255, 0.48);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(31, 115, 216, 0.96), rgba(14, 76, 147, 0.9));
  color: #dcedff;
  font-weight: 900;
}

.planner-header h1 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(24px, 2vw, 34px);
  line-height: 1.12;
}

.planner-header p,
.export-cluster small,
.central-unlock-note,
.phase-label,
.mode-switch > span {
  margin: 0;
  color: #aab8ca;
  font-size: 12px;
}

.taskforce-switch,
.mode-switch,
.phase-switch,
.mobile-planner-tabs,
.map-controls,
.roster-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.taskforce-switch {
  justify-content: center;
}

.taskforce-switch button,
.mode-switch button,
.phase-switch button,
.mobile-planner-tabs button,
.map-controls button,
.roster-filter button,
.icon-button,
.panel-edge-toggle,
.tiny-button {
  min-height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(13, 24, 38, 0.82);
  color: #d9e5f2;
  font-weight: 800;
}

.taskforce-switch button {
  min-width: 132px;
  min-height: 44px;
}

.taskforce-switch button[aria-selected="true"],
.mode-switch button[aria-checked="true"],
.phase-switch button[aria-selected="true"],
.mobile-planner-tabs button[aria-selected="true"],
.roster-filter button[aria-selected="true"] {
  border-color: rgba(88, 166, 255, 0.74);
  background: linear-gradient(180deg, rgba(38, 124, 224, 0.96), rgba(22, 86, 168, 0.94));
  color: #ffffff;
}

.phase-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  min-width: 0;
}

.mode-switch {
  align-content: end;
  padding: 0 14px 0 0;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
}

.phase-switch {
  min-width: 0;
  flex-wrap: wrap;
}

.phase-switch button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 8px;
  align-items: center;
  min-width: 145px;
  padding: 8px 10px;
  text-align: left;
}

.phase-switch button span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  font-size: 12px;
}

.phase-switch strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.phase-switch small {
  color: #bed0e4;
  font-size: 11px;
}

.central-unlock-note {
  max-width: 154px;
  padding: 9px 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
}

.export-cluster {
  display: grid;
  justify-items: stretch;
  gap: 6px;
}

.export-button {
  min-height: 48px;
  border-color: rgba(88, 166, 255, 0.72);
  background: linear-gradient(180deg, #1b78d7, #1054aa);
  color: #ffffff;
  font-size: 16px;
}

.planner-alert {
  min-height: 34px;
  padding: 8px 32px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 0;
  background: rgba(6, 12, 20, 0.8);
  color: #aebccf;
  font-size: 13px;
}

.planner-alert.is-error {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.28);
}

.planner-alert.is-success {
  color: #bbf7d0;
  background: rgba(20, 83, 45, 0.25);
}

.mobile-planner-tabs {
  display: none;
}

.battlefield-layout {
  position: relative;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 34px minmax(250px, 292px) minmax(0, 1fr) minmax(300px, 340px) 34px;
  gap: 0;
  overflow: hidden;
}

.battlefield-layout[data-left-panel="closed"] {
  grid-template-columns: 34px 0 minmax(0, 1fr) minmax(300px, 340px) 34px;
}

.battlefield-layout[data-right-panel="closed"] {
  grid-template-columns: 34px minmax(250px, 292px) minmax(0, 1fr) 0 34px;
}

.battlefield-layout[data-left-panel="closed"][data-right-panel="closed"] {
  grid-template-columns: 34px 0 minmax(0, 1fr) 0 34px;
}

.planner-panel {
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  height: 100%;
  max-height: none;
  overflow: auto;
  padding: 18px 14px;
  border: 0;
  border-radius: 0;
  background: rgba(7, 17, 27, 0.92);
  box-shadow: 16px 0 40px rgba(0, 0, 0, 0.3);
}

.roster-panel {
  grid-column: 2;
  border-right: 1px solid rgba(148, 163, 184, 0.14);
}

.tactics-panel {
  grid-column: 4;
  border-left: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.3);
}

.panel-edge-toggle {
  z-index: 3;
  writing-mode: vertical-rl;
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  background: rgba(6, 15, 25, 0.82);
}

.panel-edge-left {
  grid-column: 1;
}

.panel-edge-right {
  grid-column: 5;
}

.panel-heading,
.card-title-row,
.map-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-heading h2,
.tactics-card h3 {
  margin: 0;
  font-size: 15px;
}

.icon-button {
  width: 34px;
  min-height: 34px;
  padding: 0;
}

.roster-toolbar {
  display: grid;
  gap: 10px;
}

.roster-toolbar label {
  display: grid;
  gap: 5px;
  color: #b8c6d8;
  font-size: 12px;
}

.roster-toolbar input,
.compact-form input,
.compact-form select {
  width: 100%;
  min-width: 0;
  min-height: 35px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(9, 18, 30, 0.9);
  color: #f3f8ff;
}

.roster-filter {
  flex-wrap: wrap;
}

.roster-filter button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.planner-counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.planner-counters span,
.state-strip span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: #aebccf;
  font-size: 11px;
}

.planner-counters strong,
.state-strip strong {
  color: #ffffff;
  font-size: 13px;
}

.roster-section-stack,
.roster-section {
  display: grid;
  gap: 8px;
}

.roster-section h3 {
  margin: 8px 0 0;
  color: #b8c6d8;
  font-size: 12px;
  text-transform: uppercase;
}

.player-card {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(14, 26, 40, 0.84);
}

.player-card:hover,
.player-card:focus-visible,
.player-card.is-selected {
  border-color: rgba(88, 166, 255, 0.68);
  background: rgba(25, 58, 93, 0.56);
}

.player-card[draggable="true"] {
  cursor: grab;
}

.player-rank {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 50%;
  color: #d5e2f1;
  font-size: 12px;
}

.player-body {
  min-width: 0;
}

.player-name {
  display: block;
  overflow: hidden;
  color: #f8fbff;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.player-meta,
.player-actions,
.role-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.player-meta span,
.role-pills span,
.assignment-chip,
.drop-hint {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: #c4d1df;
  font-size: 11px;
}

.player-meta .strongest-power {
  color: #ffffff;
  font-weight: 850;
}

.drag-handle {
  color: #91a1b4;
  font-weight: 900;
  letter-spacing: -2px;
}

.compact-actions {
  grid-column: 1 / -1;
}

.player-more {
  grid-column: 1 / -1;
}

.player-more summary {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #c9d7e6;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.player-more[open] summary {
  margin-bottom: 7px;
}

.advanced-actions {
  display: flex;
  flex-wrap: wrap;
}

.tiny-button {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}

.tiny-button.is-danger {
  color: #fecaca;
}

.map-panel {
  position: relative;
  grid-column: 3;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #0a1119;
}

.map-toolbar {
  position: absolute;
  z-index: 4;
  top: 16px;
  left: 18px;
  right: 18px;
  pointer-events: none;
}

.map-toolbar > * {
  pointer-events: auto;
}

.selected-player-pill,
.map-controls {
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 9px;
  background: rgba(7, 14, 22, 0.78);
  color: #dce8f6;
  font-size: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.map-controls button {
  min-width: 34px;
  min-height: 30px;
  padding: 4px 8px;
}

.schematic-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 90%, rgba(82, 42, 20, 0.4), transparent 20%),
    radial-gradient(circle at 80% 10%, rgba(92, 49, 21, 0.32), transparent 22%),
    linear-gradient(135deg, #d99a54 0%, #d19249 45%, #b36b32 100%);
  touch-action: none;
}

.map-world {
  position: absolute;
  inset: 0;
  transform-origin: center;
  transition: transform 80ms linear;
}

.map-sand {
  position: absolute;
  inset: 5% 6%;
  border-radius: 38% 43% 36% 42%;
  background:
    radial-gradient(circle at 51% 45%, rgba(255, 226, 154, 0.5), transparent 24%),
    radial-gradient(circle at 30% 20%, rgba(255, 229, 166, 0.3), transparent 24%),
    linear-gradient(140deg, rgba(244, 190, 111, 0.62), rgba(173, 100, 44, 0.22));
  box-shadow: inset 0 0 80px rgba(94, 52, 26, 0.32);
}

.map-sand::before,
.map-sand::after {
  content: "";
  position: absolute;
  inset: -5%;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 14% 20%, rgba(92, 47, 22, 0.33), transparent 17%),
    radial-gradient(ellipse at 86% 16%, rgba(92, 47, 22, 0.33), transparent 15%),
    radial-gradient(ellipse at 88% 82%, rgba(92, 47, 22, 0.32), transparent 14%),
    radial-gradient(ellipse at 9% 78%, rgba(92, 47, 22, 0.32), transparent 14%);
  opacity: 0.72;
}

.map-road {
  position: absolute;
  width: 56%;
  height: 8%;
  border-radius: 50%;
  border-top: 12px solid rgba(255, 233, 182, 0.22);
  filter: blur(0.4px);
}

.map-road-a {
  left: 20%;
  top: 42%;
  rotate: 19deg;
}

.map-road-b {
  left: 21%;
  top: 52%;
  rotate: -22deg;
}

.map-road-c {
  left: 28%;
  top: 41%;
  width: 42%;
  rotate: 88deg;
}

.map-node-layer {
  position: absolute;
  inset: 0;
}

.building-node {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 142px;
  min-height: 104px;
  translate: -50% -50%;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #f8fbff;
  filter: drop-shadow(0 12px 18px rgba(33, 20, 10, 0.38));
}

.building-node:hover,
.building-node:focus-visible,
.building-node.is-selected,
.building-node.is-drop-target {
  outline: 2px solid rgba(88, 166, 255, 0.86);
  outline-offset: 5px;
  border-radius: 14px;
}

.building-node.is-central-locked .building-art {
  filter: grayscale(0.22) brightness(0.82);
}

.building-node.is-central-locked::after {
  content: "10:00";
  position: absolute;
  top: -8px;
  right: 8px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(11, 18, 28, 0.86);
  color: #f7d58a;
  font-size: 10px;
  font-weight: 900;
}

.building-art {
  position: relative;
  display: block;
  width: 86px;
  height: 64px;
}

.building-art::before {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 20px;
  border-radius: 50%;
  background: rgba(41, 45, 49, 0.35);
}

.building-art i,
.building-art b {
  position: absolute;
  display: block;
}

.building-art i {
  left: 20px;
  top: 20px;
  width: 46px;
  height: 34px;
  border: 2px solid rgba(40, 47, 56, 0.45);
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(135deg, #f2c548, #8ea2b7);
}

.building-art b {
  left: 30px;
  top: 7px;
  width: 26px;
  height: 23px;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(135deg, #fff2a7, #d8aa28);
}

.building-oil_refinery .building-art i {
  left: 14px;
  top: 18px;
  width: 22px;
  height: 38px;
  border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, #d8ec9e, #7f8f92);
  box-shadow: 32px 0 0 #8fa09d;
}

.building-oil_refinery .building-art b {
  left: 17px;
  top: 9px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #8ee16c;
  box-shadow: 32px 0 0 #8ee16c;
}

.building-field_hospital .building-art i {
  background: linear-gradient(135deg, #ffe970, #cfa642);
}

.building-field_hospital .building-art b {
  background:
    linear-gradient(#dd3d32, #dd3d32) center / 22px 6px no-repeat,
    linear-gradient(#dd3d32, #dd3d32) center / 6px 22px no-repeat,
    #f7f0c8;
}

.building-nuclear_silo .building-art i {
  left: 17px;
  top: 15px;
  width: 52px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 42%, #f6f7f2 0 18%, #818993 19% 38%, #2e3742 39% 100%);
}

.building-science_hub .building-art i {
  left: 26px;
  top: 15px;
  width: 36px;
  height: 40px;
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(180deg, #e9eef4, #f0bd35);
}

.building-science_hub .building-art b {
  left: 33px;
  top: 5px;
  width: 22px;
  height: 18px;
  border-radius: 50% 50% 4px 4px;
  background: #dce8f4;
}

.building-info_center .building-art i {
  background: linear-gradient(135deg, #6ba7dc, #263e55);
}

.building-info_center .building-art b {
  left: 36px;
  top: 0;
  width: 14px;
  height: 29px;
  border-radius: 999px;
  background: #f4cd45;
}

.building-arsenal .building-art i {
  background: linear-gradient(135deg, #66798c, #e0ba3c);
}

.building-arsenal .building-art b {
  left: 18px;
  top: 3px;
  width: 13px;
  height: 38px;
  border-radius: 5px;
  background: #475569;
  box-shadow: 38px 0 0 #475569;
}

.building-mercenary_factory .building-art i {
  left: 14px;
  width: 58px;
  background: linear-gradient(135deg, #f6bd36, #cb7628);
}

.building-mercenary_factory .building-art b {
  left: 60px;
  top: 10px;
  width: 12px;
  height: 44px;
  border-radius: 4px;
  background: #384452;
}

.building-name,
.assignment-chip {
  max-width: 138px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.building-name {
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(8, 12, 16, 0.82);
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.22);
}

.building-assignments {
  display: grid;
  justify-items: center;
  gap: 3px;
}

.assignment-chip {
  color: #f8fbff;
  background: rgba(5, 12, 19, 0.84);
}

.assignment-primary {
  border-left: 3px solid #4ea8ff;
}

.assignment-backup {
  border-left: 3px solid #a9b8ca;
}

.assignment-count {
  position: absolute;
  right: 8px;
  bottom: 30px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.88);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.building-tooltip {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(100% + 10px);
  display: grid;
  gap: 5px;
  width: 260px;
  max-width: min(260px, 80vw);
  translate: -50% 6px;
  padding: 13px 14px;
  border: 1px solid rgba(88, 166, 255, 0.32);
  border-radius: 10px;
  background: rgba(7, 15, 24, 0.96);
  color: #dbe8f6;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, translate 120ms ease;
}

.building-tooltip strong {
  color: #ffffff;
  font-size: 15px;
}

.building-tooltip span,
.building-tooltip em {
  color: #c4d2e2;
  font-size: 12px;
  font-style: normal;
}

.building-node:hover .building-tooltip,
.building-node:focus-visible .building-tooltip {
  translate: -50% 0;
  opacity: 1;
}

.map-free-zone {
  position: absolute;
  right: 7%;
  bottom: 6%;
  display: grid;
  gap: 2px;
  min-width: 130px;
  padding: 9px 12px;
  border: 1px dashed rgba(13, 24, 38, 0.36);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #101820;
  font-weight: 850;
}

.map-free-zone small {
  color: #263241;
  font-size: 11px;
  font-weight: 700;
}

.map-free-zone.is-drop-target,
.tactics-card.is-drop-target {
  outline: 2px solid rgba(88, 166, 255, 0.92);
  outline-offset: 3px;
}

.map-toast {
  position: absolute;
  left: 50%;
  bottom: 28px;
  translate: -50% 0;
  max-width: min(520px, calc(100% - 40px));
  padding: 10px 14px;
  border-radius: 9px;
  background: rgba(18, 20, 22, 0.72);
  color: #e4edf6;
  font-size: 12px;
}

.building-drawer {
  position: absolute;
  z-index: 5;
  right: 28px;
  bottom: 24px;
  width: min(430px, calc(100% - 56px));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(7, 15, 24, 0.93);
  color: #e8f1fb;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

.building-drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 850;
}

.building-drawer[open] {
  padding-bottom: 14px;
}

.building-drawer[open] summary {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.building-drawer .detail-stack,
.building-drawer .compact-form {
  padding: 12px 14px 0;
}

.tactics-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(13, 24, 38, 0.72);
}

.enemy-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.enemy-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  color: #f8fbff;
  text-align: center;
}

.enemy-card span {
  justify-self: center;
  min-width: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #dce7f3;
  font-size: 11px;
}

.enemy-card strong,
.enemy-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enemy-card small {
  color: #b8c7d8;
}

.compact-form {
  display: grid;
  gap: 8px;
}

.compact-form label {
  display: grid;
  gap: 5px;
  color: #b8c7d8;
  font-size: 12px;
}

.compact-inline-form {
  grid-template-columns: minmax(0, 1fr) minmax(86px, 0.5fr) auto;
  align-items: end;
}

.assignment-list,
.validation-list,
.detail-stack {
  display: grid;
  gap: 8px;
}

.assignment-row,
.validation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
  color: #d8e4f1;
  font-size: 12px;
}

.assignment-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mark-row span {
  color: #ffffff;
}

.validation-item.is-error {
  border: 1px solid rgba(248, 113, 113, 0.42);
  color: #fecaca;
}

.state-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.danger-button {
  min-height: 38px;
  border: 1px solid rgba(248, 113, 113, 0.42);
  border-radius: 8px;
  background: rgba(127, 29, 29, 0.32);
  color: #fecaca;
}

.empty-state.compact {
  padding: 10px;
  color: #aebccf;
  font-size: 12px;
}

@media (max-width: 1500px) {
  .planner-header {
    grid-template-columns: minmax(260px, 1fr) minmax(260px, auto) minmax(190px, auto);
  }

  .phase-toolbar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .export-cluster {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 900px) {
  .shell:has(.desert-planner) {
    width: 100%;
  }

  .desert-planner {
    height: auto;
    min-height: calc(100vh - var(--sticky-header-height));
    overflow: visible;
  }

  .planner-header {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 14px;
  }

  .planner-title-lockup,
  .taskforce-switch,
  .phase-toolbar,
  .export-cluster {
    grid-column: 1;
    grid-row: auto;
  }

  .planner-title-lockup > div {
    min-width: 0;
  }

  .taskforce-switch,
  .mode-switch,
  .phase-switch {
    justify-content: flex-start;
  }

  .phase-toolbar {
    grid-template-columns: 1fr;
  }

  .mode-switch {
    border-right: 0;
    padding-right: 0;
  }

  .mobile-planner-tabs {
    display: flex;
    padding: 10px 14px;
    background: rgba(4, 10, 17, 0.94);
  }

  .mobile-planner-tabs button {
    flex: 1 1 0;
  }

  .battlefield-layout {
    display: block;
    min-height: auto;
  }

  .panel-edge-toggle {
    display: none;
  }

  .planner-panel,
  .map-panel {
    display: none;
    height: auto;
    min-height: calc(100vh - 250px);
  }

  .planner-panel.is-mobile-active,
  .map-panel.is-mobile-active {
    display: grid;
  }

  .schematic-map {
    min-height: calc(100vh - 270px);
  }

  .roster-panel,
  .tactics-panel {
    border: 0;
    box-shadow: none;
  }
}

/* 560, not 520. The Desert Storm phone shell class is set from
   matchMedia("(max-width: 560px)"), so a control styled at 520 was unstyled in
   the 40px band where the phone shell is already active. One number. */
@media (max-width: 560px) {
  .planner-header h1 {
    font-size: 24px;
    overflow-wrap: normal;
    word-break: normal;
  }

  .taskforce-switch,
  .mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phase-switch {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mode-switch > span,
  .phase-label {
    grid-column: 1 / -1;
  }

  .export-cluster {
    justify-items: stretch;
  }

  .phase-switch button {
    min-width: 0;
  }

  .central-unlock-note {
    max-width: none;
  }

  .planner-counters,
  .state-strip,
  .enemy-top-grid,
  .compact-inline-form {
    grid-template-columns: 1fr;
  }

  .map-toolbar {
    position: static;
    display: grid;
    padding: 10px;
    background: rgba(6, 12, 20, 0.88);
  }

  .schematic-map {
    min-height: 640px;
  }

  .building-node {
    width: 118px;
    scale: 0.86;
  }

  .building-tooltip {
    display: none;
  }

  .building-drawer {
    right: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
  }

  .map-toast {
    display: none;
  }
}

.manual-matchup-form,
.matchup-side-card,
.matchup-summary-card {
  display: grid;
  gap: 14px;
}

.matchup-builder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.matchup-side-card,
.matchup-summary-card,
.nested-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.matchup-side-card select,
.matchup-side-card textarea {
  width: 100%;
}

.form-actions,
.job-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.compact-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-soft);
}

.table-wrap {
  overflow-x: auto;
}

.table-wrap table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.table-wrap th,
.table-wrap td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.table-wrap th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .matchup-builder-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  :root {
    color-scheme: light;
  }

  body {
    background: #ffffff;
    color: #111827;
    font-size: 12px;
  }

  .topbar,
  .no-print,
  .mode-tabs,
  .tab-bar,
  .export-button,
  button,
  .button {
    display: none !important;
  }

  .shell {
    width: 100%;
    padding: 0;
  }

  .panel,
  .comparison-hero,
  .report-card,
  .metric-card,
  .analytics-summary-grid article {
    box-shadow: none;
    background: #ffffff;
    color: #111827;
    border-color: #d1d5db;
    break-inside: avoid;
  }

  .tab-panel.is-hidden,
  [hidden] {
    display: none !important;
  }

  .report-shell {
    gap: 10px;
  }

  .report-grid,
  .quality-grid,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  a,
  .muted,
  p,
  small,
  .eyebrow,
  .metadata-line,
  .status-pill {
    color: #374151 !important;
  }

  .report-page-break {
    break-before: page;
  }
}

.nav-logout-form{margin:0}.nav-logout-form button{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:0}.nav-logout-form button:hover{color:var(--accent-hover)}

.language-switch {
  border: 1px solid var(--border-color, rgba(255,255,255,.18));
  border-radius: 8px;
  padding-inline: .75rem;
  font-weight: 700;
}