/* ui/CommandDeck — the menu's frame. Contract: ./CommandDeck.spec.md
   Mobile first: phone portrait is the base; a short landscape gets an icon
   rail; 900 px and wider gets the labelled rail, the right column and the
   strip. Sizes follow the approved mockup (preview/premium/deck.css). */

.qc-deck {
  --qc-deck-ship: var(--qc-accent);
  /* ui/DailyOps' bars take the selected ship's colour (the mockup's --bar-fill). */
  --qc-ops-fill: var(--qc-deck-ship);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "opsline" "main" "nav";
  height: 100vh;
  height: 100dvh;
  color: var(--qc-text);
}
.qc-deck[data-ship="laser"] { --qc-deck-ship: var(--qc-ship-laser); }
.qc-deck[data-ship="tracerTank"] { --qc-deck-ship: var(--qc-ship-laser); }
.qc-deck[data-ship="plasma"] { --qc-deck-ship: var(--qc-ship-plasma); }
.qc-deck[data-ship="heTank"] { --qc-deck-ship: var(--qc-ship-plasma); }
.qc-deck[data-ship="rocket"] { --qc-deck-ship: var(--qc-ship-rocket); }
.qc-deck[data-ship="scatter"] { --qc-deck-ship: var(--qc-ship-scatter); }
.qc-deck[data-ship="canisterTank"] { --qc-deck-ship: var(--qc-ship-scatter); }
.qc-deck[data-ship="arc"] { --qc-deck-ship: var(--qc-ship-arc); }
.qc-deck[data-ship="graviton"] { --qc-deck-ship: var(--qc-ship-graviton); }
.qc-deck[data-ship="mortarTank"] { --qc-deck-ship: var(--qc-ship-graviton); }
.qc-deck[data-ship="shuriken"] { --qc-deck-ship: var(--qc-ship-shuriken); }
.qc-deck[data-ship="gatling"] { --qc-deck-ship: var(--qc-ship-gatling); }
.qc-deck[data-ship="tesla"] { --qc-deck-ship: var(--qc-ship-tesla); }
.qc-deck[data-ship="inferno"] { --qc-deck-ship: var(--qc-ship-inferno); }
.qc-deck[data-ship="flameTank"] { --qc-deck-ship: var(--qc-ship-inferno); }
.qc-deck[data-ship="warden"] { --qc-deck-ship: var(--qc-ship-warden); }
.qc-deck[data-ship="harpoon"] { --qc-deck-ship: var(--qc-ship-harpoon); }
.qc-deck[data-ship="chrono"] { --qc-deck-ship: var(--qc-ship-chrono); }
.qc-deck[data-ship="fuseTank"] { --qc-deck-ship: var(--qc-ship-chrono); }
.qc-deck[data-ship="foundry"] { --qc-deck-ship: var(--qc-ship-foundry); }

/* ——— line icons: CSS masks over currentColor (the mockup's ICON set) ——— */
.qc-deck__glyph {
  display: inline-block; flex: none; width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--qc-deck-glyph) center / contain no-repeat;
  mask: var(--qc-deck-glyph) center / contain no-repeat;
}
.qc-deck__glyph[data-glyph="play"] { --qc-deck-glyph: 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='M7 5l12 7-12 7z'/%3E%3C/svg%3E"); }
.qc-deck__glyph[data-glyph="hangar"] { --qc-deck-glyph: 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='M3 20V9l9-5 9 5v11'/%3E%3Cpath d='M8 20v-6h8v6'/%3E%3C/svg%3E"); }
.qc-deck__glyph[data-glyph="armory"] { --qc-deck-glyph: 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='M12 3l7 4v10l-7 4-7-4V7z'/%3E%3Cpath d='M12 8.5l1.1 2.3 2.4.3-1.8 1.7.5 2.5-2.2-1.2-2.2 1.2.5-2.5-1.8-1.7 2.4-.3z'/%3E%3C/svg%3E"); }
.qc-deck__glyph[data-glyph="ops"] { --qc-deck-glyph: 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%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E"); }
.qc-deck__glyph[data-glyph="records"] { --qc-deck-glyph: 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='M5 20V10M12 20V4M19 20v-7'/%3E%3C/svg%3E"); }
.qc-deck__glyph[data-glyph="news"] { --qc-deck-glyph: 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='M5 5h14v14H5z'/%3E%3Cpath d='M8 9h8M8 12h8M8 15h5'/%3E%3C/svg%3E"); }
.qc-deck__glyph[data-glyph="more"] { --qc-deck-glyph: 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%3Ccircle cx='6' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='18' cy='12' r='1'/%3E%3C/svg%3E"); }
/* A cog, in the rail's 1.5 px line: the old circle and eight rays read as a sun (Jackson). Same outline as ui/Settings' gear. */
.qc-deck__glyph[data-glyph="gear"] { --qc-deck-glyph: 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-linejoin='round'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54A.48.48 0 0 0 13.9 2h-3.84a.48.48 0 0 0-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.71 8.47a.49.49 0 0 0 .12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); }
.qc-deck__glyph[data-glyph="menu"] { --qc-deck-glyph: 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 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
/* The language button's globe: a circle, the equator and one meridian. */
.qc-deck__glyph[data-glyph="globe"] { --qc-deck-glyph: 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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E"); }

/* ——— top bar: compact (phones) is the base ——— */
.qc-deck__top {
  grid-area: top;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: var(--qc-glass);
  border-bottom: 1px solid var(--qc-line);
  backdrop-filter: blur(6px);
}
.qc-deck__wordmark {
  display: inline-flex; align-items: center; gap: 12px; min-width: 0;
  font-weight: 200; font-size: 15px; letter-spacing: 0.4em; text-transform: uppercase; white-space: nowrap;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--qc-accent-2) 45%, transparent));
}
.qc-deck__mark { width: 14px; height: 14px; flex: none; background: linear-gradient(135deg, transparent 50%, var(--qc-accent-2) 50%); }
.qc-deck__wordmark-text, .qc-deck__wordmark::after {
  background: linear-gradient(90deg, var(--qc-text), var(--qc-accent-2) 55%, var(--qc-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Compact: "QC" is drawn; the full name stays for a screen reader. */
.qc-deck__wordmark-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.qc-deck__wordmark::after { content: "QC"; content: "QC" / ""; }
.qc-deck__pilot { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
/* docs/profiles.md: with onPilot the readout is the way to your own profile. */
button.qc-deck__pilot { min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--qc-radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; position: relative; }
button.qc-deck__pilot:hover { background: color-mix(in oklab, var(--qc-text) 6%, transparent); }
.qc-deck__pilot-level { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--qc-font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.qc-deck__pilot-bar { position: relative; flex: none; width: 72px; height: 4px; border-radius: 2px; background: var(--qc-space-2); overflow: hidden; }
.qc-deck__pilot-bar i { position: absolute; inset: 0 auto 0 0; background: var(--qc-xp); border-radius: 2px; }
.qc-deck__pilot-xp { display: none; font-family: var(--qc-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 12px; color: var(--qc-text-dim); white-space: nowrap; }
.qc-deck__top-right { justify-self: end; display: flex; align-items: center; gap: 4px; }
/* The wordmark (or back) and the Ships / Tanks toggle: the whole deck's context. */
.qc-deck__top-left { justify-self: start; display: flex; align-items: center; gap: 6px; min-width: 0; }
.qc-deck__chassis { flex: none; }
/* Compact with the toggle: the middle column gives way, and the pilot readout keeps
   its level and drops the bar, so the top bar never pushes the deck wider than a phone. */
.qc-deck[data-chassis="true"] .qc-deck__top { grid-template-columns: auto minmax(0, 1fr) auto; }
.qc-deck[data-chassis="true"] .qc-deck__pilot-bar { display: none; }
.qc-deck[data-chassis="true"] .qc-deck__pilot-level { overflow: visible; text-overflow: clip; letter-spacing: 0.04em; white-space: normal; line-height: 1.1; text-align: center; } /* never "PIL… 1": the words are whole, at worst on two lines */
/* ...and the compact wordmark is the mark alone, its QC letters giving their room to the level
   (2026-10-01: "PILOT 1" read "PIL… 1" in German, "P… 1" in French at 360 px). */
.qc-deck[data-chassis="true"] .qc-deck__wordmark::after { content: none; }
/* ...and the readout's tap area keeps its height but gives its sides to the
   words: "ПИЛОТ 1" and "PİLOT 1" beside a longer toggle than SHIPS | TANKS. */
.qc-deck[data-chassis="true"] button.qc-deck__pilot { padding: 0 4px; }
.qc-deck__icon-button, .qc-deck__station { min-width: 44px; min-height: 44px; }
.qc-deck__icon-button { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--qc-text-dim); cursor: pointer; border-radius: var(--qc-radius-sm); }
.qc-deck__icon-button:hover, .qc-deck__icon-button:focus-visible { color: var(--qc-text); }
.qc-deck__ops-summary {
  display: none; align-items: center; min-height: 44px; margin-right: 14px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--qc-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 12px; letter-spacing: 0.08em; color: var(--qc-text-dim); white-space: nowrap;
}

/* ——— the Factory Pass tag on the counter: a link (the block renders none on a portal) ———
   A narrow bar has no width to give (at 360 px the pilot level already takes the last of it), so
   the base hangs the tag under the number, at the counter's right edge, where it costs none. Its
   ::before is the 44 px tap area, reaching up over the balance, which is no control. From
   1200 px the tag sits in the row at the counter's right (end of this file). */
.qc-deck__balance { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.qc-deck__pass {
  position: relative; flex: none; display: inline-flex; align-items: center; min-height: 16px; padding: 0 5px;
  border: 1px solid var(--qc-quanta); border-radius: 8px; background: transparent; color: var(--qc-quanta);
  font-family: var(--qc-font-ui); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; text-decoration: none;
}
.qc-deck__pass::before { content: ""; position: absolute; right: -1px; bottom: -3px; width: max(100%, 44px); height: 44px; }
/* The invitation's two wordings: the narrow bar's here, the row's from 1200 px. */
.qc-deck__pass-text { display: none; }
.qc-deck__pass:hover { background: color-mix(in srgb, var(--qc-quanta) 14%, transparent); }
/* A member's is filled: a status. Dark on the Quanta colour, 13:1 on the default theme. */
.qc-deck__pass[data-state="member"] { background: var(--qc-quanta); color: var(--qc-space-0); font-family: var(--qc-font-mono); font-variant-numeric: tabular-nums; }
.qc-deck__pass[data-state="member"]:hover { background: color-mix(in srgb, var(--qc-quanta) 86%, var(--qc-text)); }

/* ——— Daily Ops line (phones) ——— */
.qc-deck__opsline { grid-area: opsline; }

/* ——— navigation: a bottom tab bar on a phone ——— */
.qc-deck__nav {
  grid-area: nav;
  display: grid;
  grid-auto-flow: column;
  /* Even tabs, but never narrower than a label: a long word ("Operaciones",
     "Cephanelik") takes room from a short one rather than being cut. */
  grid-auto-columns: minmax(min-content, 1fr);
  padding: 0 env(safe-area-inset-right) max(20px, env(safe-area-inset-bottom)) env(safe-area-inset-left);
  background: var(--qc-glass);
  border-top: 1px solid var(--qc-line);
  backdrop-filter: blur(6px);
}
.qc-deck__station {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 56px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--qc-text-faint);
  /* Five tabs share a 360 px phone: the labels are the UI face at its 12 px
     floor, since the display face may not go under 13 px (premium-pass §1.11
     rule 6) and at 13 px RECORDS would not fit its tab. */
  font-family: var(--qc-font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.qc-deck__station[aria-current="page"] { color: var(--qc-text); }
.qc-deck__station[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px;
  background: var(--qc-deck-ship); box-shadow: 0 0 8px var(--qc-deck-ship);
}
.qc-deck__caret { display: none; }
/* A longer word in another language (German, Russian) ends in an ellipsis inside its tab or rail row; the button keeps the whole name as its label. */
.qc-deck__station-label { min-width: 0; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-deck__dot { position: absolute; top: 8px; right: calc(50% - 16px); width: 6px; height: 6px; border-radius: 50%; background: var(--qc-accent-2); box-shadow: 0 0 6px var(--qc-accent-2); }
/* A phone's five tabs: with More offered, News lives in the More menu (What's new). */
.qc-deck[data-more="true"] .qc-deck__station[data-station="news"] { display: none; }

.qc-deck__main { grid-area: main; min-height: 0; overflow-y: auto; }
.qc-deck__aside { display: none; }
.qc-deck__strip { display: none; }

.qc-deck__notice {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  width: min(420px, calc(100vw - 32px)); padding: 24px; border-radius: var(--qc-radius);
  background: var(--qc-glass); border: 1px solid var(--qc-quanta); backdrop-filter: blur(8px);
  box-shadow: 0 0 var(--qc-glow-lg) color-mix(in srgb, var(--qc-quanta) 30%, transparent);
  text-align: center;
}
.qc-deck__notice-title { margin: 0 0 8px; font-family: var(--qc-font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; }
.qc-deck__notice-body { margin: 0 0 16px; color: var(--qc-text-dim); line-height: 1.5; }
.qc-deck__notice-action { min-height: 48px; width: 100%; }

/* ——— a short landscape (phones on their side): an icon rail ——— */
@media (orientation: landscape) and (max-height: 499px) {
  .qc-deck {
    grid-template-columns: calc(56px + env(safe-area-inset-left)) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "nav top" "nav main";
  }
  .qc-deck__top { min-height: 44px; }
  /* The rail takes the left inset; the stations keep off the right one (a notch
     when the phone turns that way) and the home indicator. */
  .qc-deck__main { padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
  .qc-deck__ops-summary { display: inline-flex; }
  .qc-deck__opsline { display: none; }
  .qc-deck__nav {
    grid-auto-flow: row; grid-auto-rows: 48px; align-content: start;
    padding: 12px 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-top: 0; border-right: 1px solid var(--qc-line);
  }
  .qc-deck__station { min-height: 48px; color: var(--qc-text-dim); }
  .qc-deck__station-label { display: none; }
  .qc-deck[data-more="true"] .qc-deck__station[data-station="news"] { display: flex; }
  .qc-deck__station[aria-current="page"] { background: linear-gradient(90deg, color-mix(in srgb, var(--qc-deck-ship) 16%, transparent), transparent 80%); }
  .qc-deck__station[aria-current="page"]::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 2px; height: auto; box-shadow: 0 0 10px var(--qc-deck-ship); }
  .qc-deck__dot { top: 8px; right: 10px; }
}

/* ——— desktop: the labelled rail, the right column and the strip ——— */
/* A titled sub-screen (the Hangar, mockup 02): the mark, ‹ and the title as a way back. */
.qc-deck__back {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--qc-text); cursor: pointer; justify-self: start;
  font-family: var(--qc-font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
}
.qc-deck__back-chevron { font-size: 20px; line-height: 1; color: var(--qc-text-dim); }

@media (min-width: 900px) and (min-height: 500px) {
  .qc-deck {
    grid-template-columns: 168px minmax(0, 1fr) 300px;
    grid-template-rows: 56px minmax(0, 1fr);
    grid-template-areas: "top top top" "nav main aside";
  }
  .qc-deck[data-station="hangar"], .qc-deck[data-station="armory"], .qc-deck[data-station="ops"], .qc-deck[data-station="records"], .qc-deck[data-station="news"] {
    grid-template-columns: 168px minmax(0, 1fr);
    grid-template-areas: "top top" "nav main";
  }
  .qc-deck[data-strip="true"] {
    grid-template-rows: 56px minmax(0, 1fr) 100px;
    grid-template-areas: "top top top" "nav main aside" "strip strip strip";
  }
  .qc-deck[data-strip="true"]:is([data-station="hangar"], [data-station="armory"], [data-station="ops"], [data-station="records"], [data-station="news"]) {
    grid-template-areas: "top top" "nav main" "strip strip";
  }
  .qc-deck[data-titled="true"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .qc-deck[data-titled="true"] .qc-deck__nav { display: none; }
  /* A pilot's first menu: no rail, the station alone. */
  .qc-deck[data-bare="true"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .qc-deck[data-bare="true"] .qc-deck__nav { display: none; }
  .qc-deck__back { font-size: 16px; }
  .qc-deck__back-chevron { display: none; }
  .qc-deck__top { padding: 0 16px 0 20px; gap: 12px; }
  .qc-deck__top-left { gap: 16px; }
  .qc-deck__top-right { gap: 8px; }
  .qc-deck__wordmark-text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .qc-deck__wordmark::after { content: none; }
  .qc-deck__pilot-bar { width: 160px; }
  .qc-deck[data-chassis="true"] .qc-deck__top { grid-template-columns: 1fr auto 1fr; }
  .qc-deck[data-chassis="true"] .qc-deck__pilot-bar { display: block; }
  .qc-deck[data-chassis="true"] .qc-deck__pilot-level { letter-spacing: 0.12em; white-space: nowrap; }
  .qc-deck[data-chassis="true"] button.qc-deck__pilot { padding: 0 10px; }
  .qc-deck__pilot-xp { display: inline; }
  .qc-deck__icon-button { display: grid; }
  .qc-deck__opsline { display: none; }
  .qc-deck__nav {
    grid-auto-flow: row; grid-auto-rows: 48px; align-content: start;
    padding: 24px 0 0; border-top: 0; border-right: 1px solid var(--qc-line);
    background: linear-gradient(90deg, color-mix(in srgb, var(--qc-space-1) 80%, transparent), transparent);
    backdrop-filter: none;
  }
  .qc-deck__station { flex-direction: row; justify-content: flex-start; gap: 10px; padding-left: 24px; min-height: 48px; font-family: var(--qc-font-display); font-size: 14px; letter-spacing: 0.12em; color: var(--qc-text-dim); }
  .qc-deck__station:hover { color: var(--qc-text); }
  .qc-deck__station .qc-deck__glyph { display: none; }
  .qc-deck[data-more="true"] .qc-deck__station[data-station="news"] { display: flex; }
  .qc-deck__station--more { display: none; }
  .qc-deck__caret { display: inline-block; width: 4px; margin-left: -14px; font-size: 13px; color: var(--qc-deck-ship); }
  .qc-deck__station[aria-current="page"] { color: var(--qc-text); background: linear-gradient(90deg, color-mix(in srgb, var(--qc-deck-ship) 16%, transparent), transparent 80%); }
  .qc-deck__station[aria-current="page"]::before { top: 10px; bottom: 10px; left: 0; right: auto; width: 2px; height: auto; box-shadow: 0 0 10px var(--qc-deck-ship); }
  .qc-deck__dot { position: static; margin-left: 2px; }
  .qc-deck__aside {
    display: block; grid-area: aside; min-height: 0; overflow-y: auto; padding: 20px 16px 16px;
    border-left: 1px solid var(--qc-line);
    background: linear-gradient(270deg, color-mix(in srgb, var(--qc-space-1) 80%, transparent), color-mix(in srgb, var(--qc-space-1) 40%, transparent));
  }
  /* The row itself; its look (gradient, hairline, 20 px inset) is the strip's own (ui/ShipStrip). */
  .qc-deck__strip { display: flex; grid-area: strip; align-items: stretch; min-width: 0; }
  .qc-deck__strip > * { flex: 1; min-width: 0; }
}

/* The More dot: something unread behind ☰ / the More tab (What's new). */
.qc-deck__icon-button, .qc-deck__station--more { position: relative; }
.qc-deck__icon-button .qc-deck__dot, .qc-deck__station--more .qc-deck__dot { position: absolute; top: 10px; right: 10px; margin: 0; }

/* ——— the language: a globe and the code beside the gear, at every width (docs/i18n.md §4) ——— */
.qc-deck__language { position: relative; display: flex; flex: none; }
.qc-deck__language-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 44px; min-height: 44px; padding: 0 2px; border: 0; border-radius: var(--qc-radius-sm);
  background: none; color: var(--qc-text-dim); cursor: pointer;
  font-family: var(--qc-font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.06em;
}
.qc-deck__language-button:hover, .qc-deck__language-button:focus-visible, .qc-deck__language-button[aria-expanded="true"] { color: var(--qc-text); }
.qc-deck__language-button[aria-expanded="true"] { background: color-mix(in oklab, var(--qc-text) 8%, transparent); }
/* Open, the top bar rises over the scrim, so the picker is above it and a click elsewhere lands on it. */
.qc-deck[data-language-open="true"] .qc-deck__top { position: relative; z-index: 21; }
.qc-deck__language-scrim { position: fixed; inset: 0; z-index: 20; }
.qc-deck__language-picker {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1;
  display: grid; min-width: 200px; max-width: calc(100vw - 32px); max-height: min(70vh, 520px); overflow-y: auto;
  padding: 6px; border-radius: var(--qc-radius); border: 1px solid var(--qc-line);
  /* Opaque: a backdrop blur inside the blurred top bar sees nothing to blur. */
  background: var(--qc-space-1);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--qc-space-0) 60%, transparent);
}
.qc-deck__language-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--qc-radius-sm);
  background: none; color: var(--qc-text-dim); cursor: pointer; text-align: start;
  font-family: var(--qc-font-ui); font-weight: 500; font-size: 14px;
}
.qc-deck__language-item:hover, .qc-deck__language-item:focus-visible { color: var(--qc-text); background: color-mix(in oklab, var(--qc-text) 8%, transparent); }
.qc-deck__language-item[aria-checked="true"] { color: var(--qc-text); font-weight: 600; }
.qc-deck__language-mark { flex: none; min-width: 1em; color: var(--qc-accent-2); }

/* ——— the Factory Pass tag where the bar has the width: in the row, at the counter's right ——— */
@media (min-width: 1200px) {
  .qc-deck__balance { flex-direction: row; align-items: center; gap: 8px; }
  .qc-deck__pass { min-height: 22px; padding: 0 8px; border-radius: 11px; }
  .qc-deck__pass::before { right: -1px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .qc-deck__pass-text { display: inline; }
  .qc-deck__pass-short { display: none; }
}