/* ui/Hangar — the hangar station and the unlock panel. Contract: ./Hangar.spec.md
   Mockups: dist/mockups/02-hangar-phone.png (mobile first: one column, in the
   phone's order) and 02-hangar-desktop.png (from 900 px: the stage beside the
   inspector, the paint row under the stage, the roster along the bottom). */

.qc-hangar {
  --qc-hangar-ship: var(--qc-accent);
  display: flex;
  flex-direction: column;
  padding: 0 0 14px;
  color: var(--qc-text);
}
.qc-hangar[data-ship="laser"] { --qc-hangar-ship: var(--qc-ship-laser); }
.qc-hangar[data-ship="tracerTank"] { --qc-hangar-ship: var(--qc-ship-laser); }
.qc-hangar[data-ship="plasma"] { --qc-hangar-ship: var(--qc-ship-plasma); }
.qc-hangar[data-ship="heTank"] { --qc-hangar-ship: var(--qc-ship-plasma); }
.qc-hangar[data-ship="rocket"] { --qc-hangar-ship: var(--qc-ship-rocket); }
.qc-hangar[data-ship="scatter"] { --qc-hangar-ship: var(--qc-ship-scatter); }
.qc-hangar[data-ship="canisterTank"] { --qc-hangar-ship: var(--qc-ship-scatter); }
.qc-hangar[data-ship="arc"] { --qc-hangar-ship: var(--qc-ship-arc); }
.qc-hangar[data-ship="graviton"] { --qc-hangar-ship: var(--qc-ship-graviton); }
.qc-hangar[data-ship="mortarTank"] { --qc-hangar-ship: var(--qc-ship-graviton); }
.qc-hangar[data-ship="shuriken"] { --qc-hangar-ship: var(--qc-ship-shuriken); }
.qc-hangar[data-ship="gatling"] { --qc-hangar-ship: var(--qc-ship-gatling); }
.qc-hangar[data-ship="tesla"] { --qc-hangar-ship: var(--qc-ship-tesla); }
.qc-hangar[data-ship="inferno"] { --qc-hangar-ship: var(--qc-ship-inferno); }
.qc-hangar[data-ship="flameTank"] { --qc-hangar-ship: var(--qc-ship-inferno); }
.qc-hangar[data-ship="warden"] { --qc-hangar-ship: var(--qc-ship-warden); }
.qc-hangar[data-ship="harpoon"] { --qc-hangar-ship: var(--qc-ship-harpoon); }
.qc-hangar[data-ship="chrono"] { --qc-hangar-ship: var(--qc-ship-chrono); }
.qc-hangar[data-ship="fuseTank"] { --qc-hangar-ship: var(--qc-ship-chrono); }
.qc-hangar[data-ship="foundry"] { --qc-hangar-ship: var(--qc-ship-foundry); }

/* Below 900 px the stage's wrapper and the inspector dissolve into the column,
   so their parts can take the phone's order: stage, controls, readout, paint,
   the action, the roster. */
.qc-hangar__stage-wrap, .qc-hangar__inspector { display: contents; }
.qc-hangar__stage { order: 1; }
.qc-hangar__controls { order: 2; }
.qc-hangar__forms { order: 2; }
.qc-hangar__coach { order: 2; }
.qc-hangar__readout { order: 3; }
.qc-hangar__hair { order: 4; display: none; }
.qc-hangar__ratings { order: 5; }
.qc-hangar__traits { order: 6; }
.qc-hangar__forks { order: 7; }
.qc-hangar__paints { order: 8; }
.qc-hangar__spacer { order: 8; display: none; }
.qc-hangar__cta { order: 9; }
.qc-hangar__roster { order: 10; }

/* ——— the stage: a bracketed patch of the arena the parent draws into ——— */
.qc-hangar__stage { position: relative; flex: none; height: clamp(200px, 34dvh, 318px); margin: 10px 16px 0; } /* shorter on a short phone, so the action comes up */
.qc-hangar__canvas {
  /* Fills the bracketed area, one pixel inside the corners: the parent sizes
     its backing store to this element's rect and draws the ship at its centre. */
  position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); display: block;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 55%, transparent 100%);
}
.qc-hangar__spot {
  /* The spotlight ring under the hull: a hairline in the ship's colour. */
  position: absolute; left: 50%; top: 50%; z-index: 1; height: 58%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--qc-hangar-ship) 55%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--qc-hangar-ship) 14%, transparent), inset 0 0 18px color-mix(in srgb, var(--qc-hangar-ship) 10%, transparent);
  pointer-events: none;
}
.qc-hangar__stage[data-view="forms"] .qc-hangar__spot { display: none; }
.qc-hangar__corner, .qc-unlock .qc-hangar__corner {
  position: absolute; width: 10px; height: 10px;
  border: 0 solid color-mix(in srgb, var(--qc-hangar-ship) 60%, transparent);
}
.qc-hangar__corner:nth-of-type(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.qc-hangar__corner:nth-of-type(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.qc-hangar__corner:nth-of-type(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.qc-hangar__corner:nth-of-type(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

/* ——— the forms rail: Base → I → II → III along the path being looked at.
   Mobile first: the stages are rows under the stage (label, the path node,
   its fork alternatives as ghosts), every node free to shrink, so the rail
   never widens the page at 360 px. ——— */
.qc-hangar__forms { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 16px 0; list-style: none; min-width: 0; }
.qc-hangar__rail-stage { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.qc-hangar__rail-label { font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qc-text-faint); }
/* The numerals fit 34 px; BASE translated (BAZOWA, TEMEL) may not, so its row
   alone lets the label column grow, and the tier rows keep their width. */
.qc-hangar__rail-stage[data-stage="0"] { grid-template-columns: minmax(34px, max-content) minmax(0, 1fr); }
.qc-hangar__form {
  display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; padding: 4px 8px;
  border: 1px solid var(--qc-line); border-radius: 8px; background: color-mix(in srgb, var(--qc-space-1) 60%, transparent);
  color: var(--qc-text); cursor: pointer; text-align: left;
  font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.qc-hangar__form[data-path="true"] { border-color: color-mix(in srgb, var(--qc-hangar-ship) 50%, transparent); }
.qc-hangar__form[data-path="false"] { opacity: 0.6; border-style: dashed; }
.qc-hangar__form[aria-pressed="true"] { opacity: 1; cursor: default; border-color: var(--qc-hangar-ship); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc-hangar-ship) 60%, transparent); }
.qc-hangar__form[data-discovered="false"] { color: var(--qc-text-faint); }
.qc-hangar__form-canvas { width: 36px; height: 36px; flex: none; }
.qc-hangar__form-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; } /* a form's name wraps whole beside its chip, never "?…" */
.qc-hangar__form-kind, .qc-hangar__fork-kind {
  flex: none; padding: 0 5px; border: 1px solid var(--qc-line); border-radius: var(--qc-radius-sm);
  font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qc-text-dim);
}
.qc-hangar__form-kind[data-kind="halo"], .qc-hangar__fork-kind[data-kind="halo"] { color: var(--qc-accent-2); }
.qc-hangar__fork-kind { align-self: flex-start; }
/* An apex ghost's way in (§6.5): a line of its own under the name, never
   truncated, so it wraps inside the node at 360 px. */
.qc-hangar__form:has(> .qc-hangar__form-hint) { flex-wrap: wrap; }
.qc-hangar__form-hint {
  flex-basis: 100%; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--qc-font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--qc-text-dim);
}
/* The forms view's first-open coach mark: under the rail on a phone, a quiet
   callout with a thumb-sized way to put it away. */
.qc-hangar__coach {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; max-width: 100%;
  margin: 8px 16px 0; padding: 8px 10px;
  border: 1px dashed var(--qc-hangar-ship); border-radius: 8px; background: var(--qc-glass);
}
.qc-hangar__coach-text { flex: 1 1 12em; min-width: 0; margin: 0; font-size: 13px; color: var(--qc-text); }
.qc-hangar__coach-dismiss {
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--qc-line); border-radius: 8px; background: transparent; color: var(--qc-text);
  font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; cursor: pointer;
}

/* ——— the controls: ↺ BASE|FORMS ↻ on a phone; ↺ ↻ … BASE|FORMS wide ——— */
.qc-hangar__controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px 0; }
.qc-hangar__toggle { order: 1; }
.qc-hangar__round[data-direction="1"] { order: 2; }
.qc-hangar__round {
  flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--qc-line-strong); background: var(--qc-glass); color: var(--qc-text-dim); cursor: pointer;
}
.qc-hangar__round:hover { color: var(--qc-text); }
.qc-hangar__icon { width: 18px; height: 18px; background: currentColor; }
.qc-hangar__icon[data-icon="ccw"] { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7'/%3E%3Cpath d='M4 4v4h4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7'/%3E%3Cpath d='M4 4v4h4'/%3E%3C/svg%3E") center / contain no-repeat; }
.qc-hangar__icon[data-icon="cw"] { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v4h-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v4h-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.qc-hangar__toggle { display: inline-flex; padding: 3px; border-radius: 8px; border: 1px solid var(--qc-line); background: var(--qc-glass); }
.qc-hangar__toggle-button {
  height: 30px; padding: 0 14px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--qc-text-dim); cursor: pointer;
  font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.14em;
}
.qc-hangar__toggle-button[aria-pressed="true"] {
  color: var(--qc-text); background: color-mix(in srgb, var(--qc-hangar-ship) 20%, var(--qc-space-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc-hangar-ship) 60%, transparent);
}

/* ——— the readout (the inspector's text) ——— */
.qc-hangar__readout { padding: 12px 16px 0; }
.qc-hangar__name, .qc-unlock__name {
  margin: 0; font-family: var(--qc-font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase;
}
.qc-hangar__loadout { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--qc-text-dim); }
.qc-unlock__loadout { margin: 0; font-size: 14px; line-height: 1.5; color: var(--qc-text-dim); }
.qc-hangar__hair { flex: none; height: 1px; background: var(--qc-line); }
.qc-hangar__ratings { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; padding: 10px 16px 0; }
.qc-hangar__ratings dt { font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; color: var(--qc-text-faint); }
.qc-hangar__ratings dd { margin: 0; display: flex; align-items: center; }
.qc-hangar__rating-long { display: none; }
.qc-hangar__pips { display: inline-flex; gap: 2px; }
.qc-hangar__pips i { width: 12px; height: 4px; border-radius: 1px; background: var(--qc-line-strong); }
.qc-hangar__pips i[data-on="true"] { background: var(--qc-hangar-ship); box-shadow: 0 0 6px color-mix(in srgb, var(--qc-hangar-ship) 60%, transparent); }
/* Difficulty: the word and three pips after the ratings, the note under them.
   Tinted by level, but the word always says it (claims 37-39). */
/* The difficulty, a rating like the others: three bars in its level's colour, then its word. */
.qc-hangar__difficulty { --qc-difficulty: var(--qc-accent-2); gap: 8px; }
.qc-hangar__difficulty[data-level="easy"] { --qc-difficulty: var(--qc-accent-2); }
.qc-hangar__difficulty[data-level="medium"] { --qc-difficulty: var(--qc-rarity-legendary); }
.qc-hangar__difficulty[data-level="hard"] { --qc-difficulty: var(--qc-danger); }
.qc-hangar__difficulty-word { font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qc-difficulty); }
.qc-hangar__difficulty-pips i[data-on="true"] { background: var(--qc-difficulty); box-shadow: 0 0 6px color-mix(in srgb, var(--qc-difficulty) 60%, transparent); }
.qc-hangar__difficulty-note { order: 5; margin: 0; padding: 4px 16px 0; font-size: 13px; line-height: 1.45; color: var(--qc-text-dim); }
/* A tank's weight class, a rating beside hull, speed and power: its pips, then its name. */
.qc-hangar__class { gap: 8px; }
.qc-hangar__class-word { font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qc-text); }
.qc-hangar__explain { display: inline-flex; align-items: center; min-height: 28px; margin: -6px 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* A rating's label says it can be tapped with a faint dotted underline, no icon (Jackson: the ⓘ stuck out). */
.qc-hangar__explain > span { text-decoration: underline dotted; text-decoration-color: var(--qc-line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.qc-hangar__explain:hover, .qc-hangar__explain:focus-visible { color: var(--qc-text); }
.qc-hangar__explain:hover > span, .qc-hangar__explain:focus-visible > span { text-decoration-style: solid; text-decoration-color: var(--qc-text-dim); }
.qc-unlock .qc-hangar__difficulty-note { padding: 0; text-align: center; }
.qc-hangar__traits { margin: 0; padding: 12px 16px 0; font-size: 13px; line-height: 1.5; color: var(--qc-text-dim); }
.qc-hangar__weakness { color: var(--qc-text-faint); }
.qc-hangar__label { margin: 0; font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--qc-text-faint); }
.qc-hangar__forks { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 0; }
.qc-hangar__fork { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--qc-line); border-radius: 8px; background: color-mix(in srgb, var(--qc-space-1) 60%, transparent); }
.qc-hangar__fork-canvas { flex: none; width: 40px; height: 40px; }
.qc-hangar__fork-text { display: flex; flex-direction: column; min-width: 0; }
.qc-hangar__fork-name { font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.qc-hangar__fork-description { font-size: 12px; color: var(--qc-text-faint); }
.qc-hangar__fork { align-items: flex-start; }

/* The change lists (spec: The form card): a bullet a line, cyan when it helps,
   dimmed with a violet bullet when it costs; the words say which either way. */
.qc-hangar__changes { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 0; padding: 0; list-style: none; }
.qc-hangar__change { position: relative; padding-left: 12px; font-size: 12.5px; line-height: 1.35; color: var(--qc-text); }
.qc-hangar__change::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--qc-accent-2);
}
.qc-hangar__change[data-good="false"] { color: var(--qc-text-dim); }
.qc-hangar__change[data-good="false"]::before { background: var(--qc-warn, var(--qc-accent)); }

/* The previewed form's card: its tier, its name, its part, everything it does. */
.qc-hangar__form-card {
  order: 6; display: block; margin: 12px 16px 0; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--qc-hangar-ship) 45%, var(--qc-line));
  border-radius: 10px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--qc-hangar-ship) 12%, transparent), color-mix(in srgb, var(--qc-space-1) 70%, transparent) 70%);
}
.qc-hangar__form-card[data-tier="3"] { border-color: color-mix(in srgb, var(--qc-rarity-legendary) 55%, var(--qc-line)); }
.qc-hangar__form-tier { margin: 0; font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--qc-hangar-ship); }
.qc-hangar__form-card[data-tier="3"] .qc-hangar__form-tier { color: var(--qc-rarity-legendary); }
.qc-hangar__form-name { margin: 2px 0 0; font-family: var(--qc-font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--qc-text); }
.qc-hangar__form-part { margin: 2px 0 0; font-size: 12px; font-style: italic; color: var(--qc-text-faint); }

/* ——— the action: Fly it, or Unlock ◈ N and the balance it leaves ——— */
.qc-hangar__cta { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 16px 14px; }
.qc-hangar .qc-hangar__action, .qc-unlock__button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 0; min-height: 56px; width: 100%; padding: 0 28px; border-radius: var(--qc-radius-sm);
  font-family: var(--qc-font-display); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: 0.12em; text-indent: 0.12em; text-transform: uppercase;
}
.qc-hangar .qc-hangar__action { --qc-action: var(--qc-hangar-ship); width: min(342px, calc(100% - 16px)); height: 56px; }
.qc-unlock__button.qc-button--primary { --qc-action: var(--qc-hangar-ship); }
.qc-hangar .qc-hangar__action[data-kind="flying"] { border: 1px solid var(--qc-line-strong); background: color-mix(in srgb, var(--qc-space-1) 55%, transparent); color: var(--qc-text-dim); }
.qc-hangar .qc-hangar__action[data-kind="short"] { border: 1px solid var(--qc-line); background: var(--qc-space-2); color: var(--qc-text-faint); }
.qc-hangar__balance, .qc-unlock__balance {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--qc-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 12px; color: var(--qc-text-dim);
}
.qc-hangar__arrow { color: var(--qc-text-faint); }
.qc-hangar__after { display: inline-flex; align-items: center; gap: 6px; color: var(--qc-text); }
.qc-hangar__hint { margin: 0; text-align: center; font-size: 13px; color: var(--qc-text-dim); }
.qc-hangar__amount { color: inherit; }

/* ——— paint jobs ——— */
.qc-hangar__paints { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 14px 16px 0; }
.qc-hangar__paints-label { display: none; }
.qc-hangar__paint {
  scroll-snap-align: start; flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; color: var(--qc-text-dim); cursor: pointer; font: inherit;
}
.qc-hangar__paint:disabled { cursor: default; }
.qc-hangar__paint-box {
  width: 68px; height: 68px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--qc-line); background: color-mix(in srgb, var(--qc-space-1) 70%, transparent);
}
.qc-hangar__paint-canvas { width: 60px; height: 60px; }
/* The rewarded "try it for a match" offer: a small ▶ on the box's corner, so
   the tag below keeps saying how the paint job is earned. */
.qc-hangar__paint-box { position: relative; }
.qc-hangar__paint-try {
  position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; font-size: 12px; line-height: 1; padding-left: 2px; color: var(--qc-text);
  background: var(--qc-space-1); border: 1px solid color-mix(in srgb, var(--qc-hangar-ship, var(--qc-accent)) 70%, transparent);
}
.qc-hangar__paint[data-state="selected"] .qc-hangar__paint-box { border-color: var(--qc-hangar-ship); box-shadow: 0 0 var(--qc-glow-sm) color-mix(in srgb, var(--qc-hangar-ship) 35%, transparent); }
.qc-hangar__paint[data-state="short"] { opacity: 0.7; }
.qc-hangar__paint-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--qc-text-dim); white-space: nowrap; }
.qc-hangar__tag {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 9px; border: 1px solid var(--qc-line);
  font-family: var(--qc-font-mono); font-size: 12px; color: var(--qc-quanta); white-space: nowrap; max-width: 100%; overflow: hidden;
}
.qc-hangar__tag[data-kind="free"], .qc-hangar__tag[data-kind="owned"] { color: var(--qc-text-dim); }
/* The free route under a price, on one line: the tiles are 84 px so "or Mastery 15" fits without running into the next one. */
.qc-hangar__paint-earn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; font-size: 12px; line-height: 1.2; color: var(--qc-text-dim); white-space: nowrap; }
.qc-unlock__earn { margin: 0; font-size: 13px; color: var(--qc-text-dim); text-align: center; }
.qc-hangar__tag[data-kind="locked"] { color: var(--qc-rarity-legendary); border-color: color-mix(in srgb, var(--qc-rarity-legendary) 40%, transparent); }
/* The Factory Pass's paint: its label under a holder's tick, and the one line a non-holder reads, which wraps (it is a sentence, not a price). */
.qc-hangar__paint-pass { max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; font-size: 12px; line-height: 1.2; color: var(--qc-paint-amber); white-space: nowrap; }
.qc-hangar__tag[data-kind="pass"] { height: auto; padding: 2px 4px; border-radius: 8px; font-family: var(--qc-font-ui); line-height: 1.2; text-align: center; white-space: normal; color: var(--qc-text-dim); border-color: color-mix(in srgb, var(--qc-paint-amber) 40%, transparent); }
.qc-hangar__paint[data-grant] .qc-hangar__paint-box { border-color: color-mix(in srgb, var(--qc-paint-amber) 45%, transparent); }
/* Locked, its tile is wider than a price's: "Comes with the / Factory Pass" in two lines, in every language, inside the row's height. */
.qc-hangar__paint[data-grant][data-state="locked"] { width: 100px; }

/* ——— the roster ——— */
.qc-hangar__roster { display: flex; align-items: center; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 10px 16px 14px; }
.qc-hangar__roster-ship[data-ship="laser"] { --qc-hangar-tile: var(--qc-ship-laser); }
.qc-hangar__roster-ship[data-ship="tracerTank"] { --qc-hangar-tile: var(--qc-ship-laser); }
.qc-hangar__roster-ship[data-ship="plasma"] { --qc-hangar-tile: var(--qc-ship-plasma); }
.qc-hangar__roster-ship[data-ship="heTank"] { --qc-hangar-tile: var(--qc-ship-plasma); }
.qc-hangar__roster-ship[data-ship="rocket"] { --qc-hangar-tile: var(--qc-ship-rocket); }
.qc-hangar__roster-ship[data-ship="scatter"] { --qc-hangar-tile: var(--qc-ship-scatter); }
.qc-hangar__roster-ship[data-ship="canisterTank"] { --qc-hangar-tile: var(--qc-ship-scatter); }
.qc-hangar__roster-ship[data-ship="arc"] { --qc-hangar-tile: var(--qc-ship-arc); }
.qc-hangar__roster-ship[data-ship="graviton"] { --qc-hangar-tile: var(--qc-ship-graviton); }
.qc-hangar__roster-ship[data-ship="mortarTank"] { --qc-hangar-tile: var(--qc-ship-graviton); }
.qc-hangar__roster-ship[data-ship="shuriken"] { --qc-hangar-tile: var(--qc-ship-shuriken); }
.qc-hangar__roster-ship[data-ship="gatling"] { --qc-hangar-tile: var(--qc-ship-gatling); }
.qc-hangar__roster-ship[data-ship="tesla"] { --qc-hangar-tile: var(--qc-ship-tesla); }
.qc-hangar__roster-ship[data-ship="inferno"] { --qc-hangar-tile: var(--qc-ship-inferno); }
.qc-hangar__roster-ship[data-ship="flameTank"] { --qc-hangar-tile: var(--qc-ship-inferno); }
.qc-hangar__roster-ship[data-ship="warden"] { --qc-hangar-tile: var(--qc-ship-warden); }
.qc-hangar__roster-ship[data-ship="harpoon"] { --qc-hangar-tile: var(--qc-ship-harpoon); }
.qc-hangar__roster-ship[data-ship="chrono"] { --qc-hangar-tile: var(--qc-ship-chrono); }
.qc-hangar__roster-ship[data-ship="fuseTank"] { --qc-hangar-tile: var(--qc-ship-chrono); }
.qc-hangar__roster-ship[data-ship="foundry"] { --qc-hangar-tile: var(--qc-ship-foundry); }
.qc-hangar__roster-ship {
  --qc-hangar-tile: var(--qc-hangar-ship);
  scroll-snap-align: start; position: relative; flex: none; width: 72px; height: 72px; padding: 3px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  border-radius: 10px; border: 1px solid var(--qc-line); background: color-mix(in srgb, var(--qc-space-1) 70%, transparent); color: var(--qc-text-dim); cursor: pointer;
}
.qc-hangar__roster-ship[aria-current="true"] {
  border-color: var(--qc-hangar-ship); cursor: default;
  box-shadow: 0 0 var(--qc-glow-sm) color-mix(in srgb, var(--qc-hangar-ship) 35%, transparent), inset 0 0 14px color-mix(in srgb, var(--qc-hangar-ship) 18%, transparent);
}
.qc-hangar__roster-canvas { flex: none; width: 42px; height: 42px; }
.qc-hangar__roster-ship[data-owned="false"] .qc-hangar__roster-canvas { opacity: 0.55; filter: saturate(0.6); }
.qc-hangar__code { font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; line-height: 1.3; color: var(--qc-text-dim); }
.qc-hangar__roster-name { display: none; max-width: 100%; font-family: var(--qc-font-ui); font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--qc-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-hangar__roster-ship[aria-current="true"] .qc-hangar__roster-name { color: var(--qc-text); }
.qc-hangar__roster-ship[aria-current="true"] .qc-hangar__code { color: var(--qc-text); }
.qc-hangar__mastery { position: relative; width: 40px; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--qc-space-2); overflow: hidden; }
.qc-hangar__mastery > i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--qc-hangar-tile); }
.qc-hangar__chip {
  position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 6px; border-radius: 9px;
  border: 1px solid var(--qc-line); background: var(--qc-glass);
  font-family: var(--qc-font-mono); font-size: 12px; color: var(--qc-quanta); white-space: nowrap;
}

@media (max-width: 599px) {
  /* The phone's hangar is the mockup's: no strengths, weaknesses or forks. */
  .qc-hangar__traits, .qc-hangar__forks { display: none; }
  /* Three ratings on one line must fit 360 px: narrower pips, tighter gaps. */
  .qc-hangar__ratings { gap: 10px; }
  .qc-hangar__pips i { width: 10px; }
}

/* A portrait phone (and a narrow tablet held upright): the order a player
   decides in. Which ship first (the roster, named), then the ship, its name
   and what to do with it, then how it looks, then its numbers. The landscape
   phone and the desktop keep their own rooms. */
@media (max-width: 599px), (max-width: 899px) and (min-height: 561px) {
  .qc-hangar__roster { order: 0; padding: 8px 16px 14px; border-bottom: 1px solid var(--qc-line); }
  .qc-hangar__stage { order: 1; height: clamp(170px, 26dvh, 260px); }
  .qc-hangar__controls, .qc-hangar__forms, .qc-hangar__coach { order: 2; }
  .qc-hangar__readout { order: 3; }
  .qc-hangar__cta { order: 4; }
  .qc-hangar__paints { order: 5; }
  .qc-hangar__ratings, .qc-hangar__difficulty-note { order: 6; }
  /* Four or five ratings (difficulty, and a tank's class) do not fit one line:
     two ratings a row, hull and speed over power and class. */
  .qc-hangar__ratings { display: grid; grid-template-columns: auto auto auto auto; justify-content: start; gap: 6px 10px; }
  .qc-hangar__traits, .qc-hangar__form-card { order: 7; }
  .qc-hangar__forks { order: 8; }
  .qc-hangar__roster .qc-hangar__code { display: none; }
  .qc-hangar__roster-name { display: block; }
}

@media (min-width: 900px) {
  .qc-hangar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: minmax(0, 1fr) 140px 100px;
    grid-template-areas: "stage insp" "paints insp" "roster roster";
    height: 100%; min-height: 600px; padding: 0;
  }
  .qc-hangar__stage-wrap { display: block; grid-area: stage; position: relative; min-height: 0; }
  .qc-hangar__stage { position: absolute; inset: 22px 24px 72px; height: auto; margin: 0; }
  .qc-hangar__canvas {
    -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, black 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, black 55%, transparent 100%);
  }
  .qc-hangar__spot { height: 44%; }
  /* The rail runs across the top of the stage area, four columns, and the
     stage moves down under it. */
  .qc-hangar__forms {
    position: absolute; top: 14px; left: 24px; right: 24px; z-index: 2; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  }
  .qc-hangar__rail-stage, .qc-hangar__rail-stage[data-stage="0"] { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .qc-hangar__rail-stage .qc-hangar__form[data-path="false"] { min-height: 44px; }
  .qc-hangar[data-view="forms"] .qc-hangar__stage { top: 170px; }
  /* Wide, it floats over the stage just above the controls. */
  .qc-hangar__coach { position: absolute; left: 24px; right: 24px; bottom: 68px; z-index: 2; margin: 0; }
  .qc-hangar__controls { position: absolute; left: 24px; right: 24px; bottom: 12px; padding: 0; justify-content: flex-start; }
  .qc-hangar__round[data-direction="1"] { order: 0; }
  .qc-hangar__toggle { margin-left: auto; }

  .qc-hangar__inspector {
    grid-area: insp; display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto;
    padding: 26px 24px; border-left: 1px solid var(--qc-line); backdrop-filter: blur(6px);
    background: linear-gradient(270deg, color-mix(in srgb, var(--qc-space-1) 85%, transparent), color-mix(in srgb, var(--qc-space-1) 55%, transparent));
  }
  .qc-hangar__readout, .qc-hangar__ratings, .qc-hangar__traits, .qc-hangar__forks, .qc-hangar__cta, .qc-hangar__difficulty-note { padding: 0; }
  .qc-hangar__name { font-size: 22px; }
  .qc-hangar__loadout { margin-top: 6px; font-size: 14px; line-height: 1.55; }
  .qc-hangar__weapon, .qc-hangar__special { display: block; }
  .qc-hangar__sep { display: none; }
  .qc-hangar__hair { display: block; }
  .qc-hangar__ratings { display: grid; grid-template-columns: auto auto; gap: 6px 14px; }
  .qc-hangar__ratings dt { font-size: 13px; }
  .qc-hangar__rating-long { display: inline; }
  .qc-hangar__rating-short { display: none; }
  .qc-hangar__forks { margin-top: 4px; }
  .qc-hangar__spacer { display: block; flex: 1; }
  /* The action is what the inspector is for: pinned to its foot, so Unlock, its hint and
     Try it are never scrolled out of sight under a long fork list (docs/try-it.md). */
  .qc-hangar__cta {
    position: sticky; bottom: -26px; z-index: 1; gap: 10px;
    margin: 0 -24px -26px; padding: 14px 24px 22px;
    background: linear-gradient(0deg, var(--qc-space-1) 80%, transparent);
  }
  .qc-hangar .qc-hangar__action { width: 100%; }
  .qc-hangar__balance { font-size: 13px; }

  .qc-hangar__paints { grid-area: paints; align-items: center; gap: 10px; padding: 0 24px; border-top: 1px solid var(--qc-line); scroll-snap-type: none; }
  .qc-hangar__paint { gap: 4px; }
  .qc-hangar__paints > .qc-hangar__paint { align-self: flex-start; margin-top: 10px; }
  .qc-hangar__paints-label { display: block; flex: none; min-width: 54px; } /* grows for a longer word (Lackierung), never under the first tile */
  .qc-hangar__roster {
    grid-area: roster; padding: 0 20px; border-top: 1px solid var(--qc-line);
    background: linear-gradient(0deg, color-mix(in srgb, var(--qc-space-1) 90%, transparent), color-mix(in srgb, var(--qc-space-1) 50%, transparent));
  }
}

/* A landscape phone (740 x 360 to 932 x 430): one column put a 318 px stage in
   a 345 px window and the action, the paints and the roster under it, where a
   player never learns they are there. Instead: the stage on the left, the
   inspector and the paints on the right, the roster along the bottom, all on
   one screen. After the 900 px block, so it also wins on a wide phone. */
@media (max-height: 560px) and (min-width: 600px) {
  .qc-hangar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "stage insp" "stage paints" "roster roster";
    height: 100%; min-height: 0; padding: 0;
  }
  .qc-hangar__traits, .qc-hangar__forks { display: none; }

  /* The stage fills its half, the controls over its foot. */
  .qc-hangar__stage-wrap { display: block; grid-area: stage; position: relative; min-height: 0; }
  .qc-hangar__stage { position: absolute; inset: 6px 12px 54px; height: auto; margin: 0; }
  .qc-hangar__spot { height: 62%; }
  .qc-hangar__controls { position: absolute; left: 12px; right: 12px; bottom: 6px; gap: 10px; padding: 0; justify-content: flex-start; }
  .qc-hangar__round[data-direction="1"] { order: 0; }
  .qc-hangar__toggle { margin-left: auto; }
  /* The forms view: the rail and the coach mark scroll above a smaller stage. */
  .qc-hangar[data-view="forms"] .qc-hangar__stage-wrap { display: flex; flex-direction: column; overflow-y: auto; }
  .qc-hangar[data-view="forms"] .qc-hangar__forms { order: 0; padding: 6px 12px 0; }
  .qc-hangar[data-view="forms"] .qc-hangar__coach { order: 1; margin: 6px 12px 0; }
  .qc-hangar[data-view="forms"] .qc-hangar__stage { order: 2; position: relative; inset: auto; flex: none; height: 160px; margin: 6px 12px 0; }
  .qc-hangar[data-view="forms"] .qc-hangar__controls { order: -1; position: static; padding: 6px 12px 0; } /* the way back to Base stays in view */

  .qc-hangar__inspector {
    grid-area: insp; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto;
    padding: 10px 16px 8px; border-left: 1px solid var(--qc-line);
    background: linear-gradient(270deg, color-mix(in srgb, var(--qc-space-1) 85%, transparent), color-mix(in srgb, var(--qc-space-1) 55%, transparent));
  }
  .qc-hangar__readout, .qc-hangar__ratings, .qc-hangar__cta { padding: 0; }
  /* The action straight under the name: on the shortest phones the ratings
     are what scrolls, never the button. */
  .qc-hangar__readout { order: 1; }
  .qc-hangar__cta { order: 2; }
  .qc-hangar__ratings { order: 4; gap: 10px; }
  /* Difficulty before the ratings, which scroll first; the note is the
     inspector's one line too many here, and the row's word says it. */
  .qc-hangar__difficulty-note { display: none; }
  .qc-hangar__hair, .qc-hangar__spacer { order: 4; }
  .qc-hangar__pips i { width: 8px; }
  .qc-hangar__loadout { margin-top: 2px; }
  .qc-hangar__cta { gap: 6px; }
  .qc-hangar .qc-hangar__action { width: 100%; height: 48px; min-height: 48px; }

  .qc-hangar__paints {
    grid-area: paints; align-items: flex-start; gap: 8px; padding: 6px 16px 8px;
    border-top: 1px solid var(--qc-line); border-left: 1px solid var(--qc-line); scroll-snap-type: none;
  }
  .qc-hangar__paint { width: 84px; gap: 3px; }
  .qc-hangar__paint-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .qc-hangar__paint-box { width: 46px; height: 46px; }
  .qc-hangar__paint-canvas { width: 40px; height: 40px; }

  .qc-hangar__roster { grid-area: roster; gap: 10px; padding: 6px 12px 12px; border-top: 1px solid var(--qc-line); }
  .qc-hangar__roster-ship { width: 58px; height: 56px; padding-top: 2px; }
  .qc-hangar__roster-canvas { width: 32px; height: 32px; }
  .qc-hangar__code { font-size: 13px; letter-spacing: 0.08em; }
}

/* ——— the unlock panel: a centred modal, a bottom sheet on a phone ——— */
.qc-unlock[data-open="false"] { display: none; }
.qc-unlock { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; }
.qc-unlock__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--qc-space-0) 70%, transparent); }
.qc-unlock__panel {
  --qc-hangar-ship: var(--qc-accent);
  position: relative; width: min(480px, calc(100vw - 32px)); max-height: 90vh; overflow: auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px 22px;
  border-radius: var(--qc-radius); border: 1px solid var(--qc-line); background: var(--qc-glass); backdrop-filter: blur(8px);
  text-align: center; color: var(--qc-text);
}
.qc-unlock__panel[data-ship="laser"] { --qc-hangar-ship: var(--qc-ship-laser); }
.qc-unlock__panel[data-ship="tracerTank"] { --qc-hangar-ship: var(--qc-ship-laser); }
.qc-unlock__panel[data-ship="plasma"] { --qc-hangar-ship: var(--qc-ship-plasma); }
.qc-unlock__panel[data-ship="heTank"] { --qc-hangar-ship: var(--qc-ship-plasma); }
.qc-unlock__panel[data-ship="rocket"] { --qc-hangar-ship: var(--qc-ship-rocket); }
.qc-unlock__panel[data-ship="scatter"] { --qc-hangar-ship: var(--qc-ship-scatter); }
.qc-unlock__panel[data-ship="canisterTank"] { --qc-hangar-ship: var(--qc-ship-scatter); }
.qc-unlock__panel[data-ship="arc"] { --qc-hangar-ship: var(--qc-ship-arc); }
.qc-unlock__panel[data-ship="graviton"] { --qc-hangar-ship: var(--qc-ship-graviton); }
.qc-unlock__panel[data-ship="mortarTank"] { --qc-hangar-ship: var(--qc-ship-graviton); }
.qc-unlock__panel[data-ship="shuriken"] { --qc-hangar-ship: var(--qc-ship-shuriken); }
.qc-unlock__panel[data-ship="gatling"] { --qc-hangar-ship: var(--qc-ship-gatling); }
.qc-unlock__panel[data-ship="tesla"] { --qc-hangar-ship: var(--qc-ship-tesla); }
.qc-unlock__panel[data-ship="inferno"] { --qc-hangar-ship: var(--qc-ship-inferno); }
.qc-unlock__panel[data-ship="flameTank"] { --qc-hangar-ship: var(--qc-ship-inferno); }
.qc-unlock__panel[data-ship="warden"] { --qc-hangar-ship: var(--qc-ship-warden); }
.qc-unlock__panel[data-ship="harpoon"] { --qc-hangar-ship: var(--qc-ship-harpoon); }
.qc-unlock__panel[data-ship="chrono"] { --qc-hangar-ship: var(--qc-ship-chrono); }
.qc-unlock__panel[data-ship="fuseTank"] { --qc-hangar-ship: var(--qc-ship-chrono); }
.qc-unlock__panel[data-ship="foundry"] { --qc-hangar-ship: var(--qc-ship-foundry); }
.qc-unlock__handle { display: none; }
.qc-unlock .qc-hangar__ratings { order: 0; display: grid; grid-template-columns: auto auto; justify-content: center; gap: 6px 16px; padding: 0; }
.qc-unlock .qc-hangar__ratings dt { font-size: 13px; }
.qc-unlock .qc-hangar__rating-long { display: inline; }
.qc-unlock .qc-hangar__rating-short { display: none; }
.qc-unlock__dismiss { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--qc-text-dim); font-size: 16px; cursor: pointer; }
.qc-unlock__stage { width: 160px; height: 160px; }
.qc-unlock__forks { margin: 0; font-size: 13px; color: var(--qc-text-dim); }
.qc-unlock__traits { margin: 0; font-size: 13px; line-height: 1.5; color: var(--qc-text-dim); }
.qc-unlock__weakness { color: var(--qc-text-faint); }
.qc-unlock__hint { margin: 0; text-align: center; font-size: 13px; color: var(--qc-text-dim); }
.qc-unlock__actions { display: flex; gap: 12px; width: 100%; }
.qc-unlock__actions .qc-button--ghost { flex: 0 0 40%; }
.qc-unlock__panel[data-phase="unlocking"] .qc-unlock__stage { filter: drop-shadow(0 0 var(--qc-glow-lg) color-mix(in srgb, var(--qc-hangar-ship) 55%, transparent)); }

@media (max-width: 599px) {
  .qc-unlock { place-items: end stretch; }
  .qc-unlock__panel {
    width: 100%; max-height: 90vh; border-radius: var(--qc-radius) var(--qc-radius) 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
  /* The grab strip spans the sheet's top edge; the bar is the visible part. */
  .qc-unlock__handle {
    display: flex; justify-content: center; align-self: stretch;
    margin: -20px -24px -4px; padding: 10px 0 14px; touch-action: none; cursor: grab;
  }
  .qc-unlock__handle i { width: 36px; height: 4px; border-radius: 2px; background: var(--qc-line-strong); }
  .qc-unlock__panel[data-phase="unlocking"] .qc-unlock__handle { cursor: default; }
  .qc-unlock__actions { flex-direction: column; }
  .qc-unlock__button { min-height: 56px; }
}

/* A landscape phone: the unlock panel and the paint confirm share the panel;
   at 844 x 390 a 160 px ship pushed the balance line off the bottom. */
@media (max-height: 560px) and (min-width: 600px) {
  .qc-unlock__panel { max-height: calc(100dvh - 16px); gap: 8px; padding: 16px 24px 14px; }
  .qc-unlock__stage { width: 96px; height: 96px; }
  .qc-unlock__button { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .qc-unlock__panel[data-phase="unlocking"] .qc-unlock__stage { filter: none; }
}

/* Thumbs: the Base / Forms toggle is 44 px tall on a touch screen (docs/premium-pass.md §1.11 rule 1). */
@media (pointer: coarse) {
  .qc-hangar__toggle-button { height: 44px; }
}

/* docs/try-it.md: Try it, a quiet second action under the first. */
.qc-hangar .qc-hangar__try {
  min-height: 44px;
  width: min(342px, calc(100% - 16px));
  border: 1px solid var(--qc-line-strong);
  border-radius: var(--qc-radius-sm);
  background: none;
  color: var(--qc-text);
  font: 600 14px/1 var(--qc-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.qc-hangar .qc-hangar__try:hover { border-color: var(--qc-accent-2); }
@media (max-width: 599px) {
  .qc-hangar .qc-hangar__try { width: 100%; }
}
@media (min-width: 900px) {
  .qc-hangar .qc-hangar__try { width: 100%; }
}