/* 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 header plate, a row of plate tabs under it,
   the job board on the right and the strip. */

.sp-deck {
  --sp-deck-ship: var(--sp-accent);
  /* ui/DailyOps' bars take the selected ship's colour (the mockup's --bar-fill). */
  --sp-ops-fill: var(--sp-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(--sp-text);
  /* The bay floor: tread plate, barely there. */
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--sp-text) 2.2%, transparent) 0 3px, transparent 3px 18px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--sp-text) 2.2%, transparent) 0 3px, transparent 3px 18px);
}
.sp-deck[data-ship="laser"] { --sp-deck-ship: var(--sp-ship-laser); }
.sp-deck[data-ship="tracerTank"] { --sp-deck-ship: var(--sp-ship-laser); }
.sp-deck[data-ship="plasma"] { --sp-deck-ship: var(--sp-ship-plasma); }
.sp-deck[data-ship="heTank"] { --sp-deck-ship: var(--sp-ship-plasma); }
.sp-deck[data-ship="rocket"] { --sp-deck-ship: var(--sp-ship-rocket); }
.sp-deck[data-ship="scatter"] { --sp-deck-ship: var(--sp-ship-scatter); }
.sp-deck[data-ship="canisterTank"] { --sp-deck-ship: var(--sp-ship-scatter); }
.sp-deck[data-ship="arc"] { --sp-deck-ship: var(--sp-ship-arc); }
.sp-deck[data-ship="graviton"] { --sp-deck-ship: var(--sp-ship-graviton); }
.sp-deck[data-ship="mortarTank"] { --sp-deck-ship: var(--sp-ship-graviton); }
.sp-deck[data-ship="shuriken"] { --sp-deck-ship: var(--sp-ship-shuriken); }
.sp-deck[data-ship="gatling"] { --sp-deck-ship: var(--sp-ship-gatling); }
.sp-deck[data-ship="tesla"] { --sp-deck-ship: var(--sp-ship-tesla); }
.sp-deck[data-ship="inferno"] { --sp-deck-ship: var(--sp-ship-inferno); }
.sp-deck[data-ship="flameTank"] { --sp-deck-ship: var(--sp-ship-inferno); }
.sp-deck[data-ship="warden"] { --sp-deck-ship: var(--sp-ship-warden); }
.sp-deck[data-ship="harpoon"] { --sp-deck-ship: var(--sp-ship-harpoon); }
.sp-deck[data-ship="chrono"] { --sp-deck-ship: var(--sp-ship-chrono); }
.sp-deck[data-ship="fuseTank"] { --sp-deck-ship: var(--sp-ship-chrono); }
.sp-deck[data-ship="foundry"] { --sp-deck-ship: var(--sp-ship-foundry); }

/* ——— line icons: CSS masks over currentColor (the mockup's ICON set) ——— */
.sp-deck__glyph {
  display: inline-block; flex: none; width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--sp-deck-glyph) center / contain no-repeat;
  mask: var(--sp-deck-glyph) center / contain no-repeat;
}
.sp-deck__glyph[data-glyph="play"] { --sp-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"); }
.sp-deck__glyph[data-glyph="hangar"] { --sp-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"); }
.sp-deck__glyph[data-glyph="studio"] { --sp-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 20l3-1 11-11-2-2L5 17z'/%3E%3Cpath d='M14 6l2 2'/%3E%3Cpath d='M17 14l3 3-3 3-3-3z'/%3E%3C/svg%3E"); }
.sp-deck__glyph[data-glyph="blueprints"] { --sp-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%3Crect x='3.5' y='3.5' width='17' height='17' rx='1.5'/%3E%3Cpath d='M3.5 9.2h17M3.5 14.8h17M9.2 3.5v17M14.8 3.5v17'/%3E%3Crect x='9.2' y='9.2' width='5.6' height='5.6' fill='black'/%3E%3C/svg%3E"); }
.sp-deck__glyph[data-glyph="armory"] { --sp-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"); }
.sp-deck__glyph[data-glyph="ops"] { --sp-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"); }
.sp-deck__glyph[data-glyph="records"] { --sp-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"); }
.sp-deck__glyph[data-glyph="news"] { --sp-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"); }
.sp-deck__glyph[data-glyph="more"] { --sp-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. */
.sp-deck__glyph[data-glyph="gear"] { --sp-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"); }
.sp-deck__glyph[data-glyph="menu"] { --sp-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. */
.sp-deck__glyph[data-glyph="globe"] { --sp-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 ——— */
.sp-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: linear-gradient(180deg, var(--sp-space-2), var(--sp-space-1));
  border-bottom: 3px solid var(--sp-seam);
  box-shadow: inset 0 1px 0 var(--sp-edge-light);
}
/* The Sproks logo (docs/brand.md §2), the stamped drop-cap: the Kit S as the first letter, then PROKS in the display face at 700, 0.08em. */
.sp-deck__wordmark {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--sp-font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--sp-text);
  filter: drop-shadow(0 2px 0 var(--sp-edge-dark));
}
.sp-deck__mark { width: 24px; height: 24px; flex: none; background: url("../../../assets/brand/sproks-mark.svg") center / contain no-repeat; }
/* Compact: the mark alone, an S; the name is the wordmark's label. */
.sp-deck__wordmark-text { display: none; }
.sp-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.sp-deck__pilot { min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--sp-radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; position: relative; }
button.sp-deck__pilot:hover { background: color-mix(in oklab, var(--sp-text) 6%, transparent); }
.sp-deck__pilot-level { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--sp-font-display); font-weight: 500; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
/* A gauge set into the plate: a dark well, blocks of fill. */
.sp-deck__pilot-bar { position: relative; flex: none; width: 72px; height: 10px; border-radius: 2px; background: var(--sp-well); border: 1px solid var(--sp-seam); box-shadow: var(--sp-inset); overflow: hidden; }
.sp-deck__pilot-bar i { position: absolute; inset: 1px auto 1px 1px; background: var(--sp-gauge); }
.sp-deck__pilot-xp { display: none; font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 12px; color: var(--sp-text-dim); white-space: nowrap; }
.sp-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. */
.sp-deck__top-left { justify-self: start; display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-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. */
.sp-deck[data-chassis="true"] .sp-deck__top { grid-template-columns: auto minmax(0, 1fr) auto; }
.sp-deck[data-chassis="true"] .sp-deck__pilot-bar { display: none; }
.sp-deck[data-chassis="true"] .sp-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 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. */
.sp-deck[data-chassis="true"] button.sp-deck__pilot { padding: 0 4px; }
.sp-deck__icon-button, .sp-deck__station { min-width: 44px; min-height: 44px; }
.sp-deck__icon-button { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--sp-text-dim); cursor: pointer; border-radius: var(--sp-radius-sm); }
.sp-deck__icon-button:hover, .sp-deck__icon-button:focus-visible { color: var(--sp-text); }
.sp-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(--sp-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 12px; letter-spacing: 0.08em; color: var(--sp-text-dim); white-space: nowrap;
}

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

/* ——— navigation: a bottom tab bar on a phone ——— */
.sp-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(--sp-well);
  border-top: 3px solid var(--sp-seam);
}
.sp-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(--sp-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(--sp-font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
/* Where you are is a lit plate in the selection colour, dark lettering on it: never the ship's orange. */
.sp-deck__station[aria-current="page"] { color: var(--sp-ink); background: var(--sp-select); }
.sp-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. */
.sp-deck__station-label { min-width: 0; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-deck__dot { position: absolute; top: 8px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 1px; background: var(--sp-accent); border: 1px solid var(--sp-seam); }
/* A phone's five tabs: with More offered, News lives in the More menu (What's new). */
.sp-deck[data-more="true"] .sp-deck__station[data-station="news"] { display: none; }

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

.sp-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(--sp-radius);
  background: var(--sp-rivets), var(--sp-plate); border: 1px solid var(--sp-seam);
  box-shadow: var(--sp-bevel), 0 0 0 2px var(--sp-quanta);
  text-align: center;
}
.sp-deck__notice-title { margin: 0 0 8px; font-family: var(--sp-font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; }
.sp-deck__notice-body { margin: 0 0 16px; color: var(--sp-text-dim); line-height: 1.5; }
.sp-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) {
  .sp-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";
  }
  .sp-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. */
  .sp-deck__main { padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
  .sp-deck__ops-summary { display: inline-flex; }
  .sp-deck__opsline { display: none; }
  .sp-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: 3px solid var(--sp-seam);
  }
  .sp-deck__station { min-height: 48px; color: var(--sp-text-dim); }
  .sp-deck__station-label { display: none; }
  .sp-deck[data-more="true"] .sp-deck__station[data-station="news"] { display: flex; }
  .sp-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. */
.sp-deck__back {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--sp-text); cursor: pointer; justify-self: start;
  font-family: var(--sp-font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
}
.sp-deck__back-chevron { font-size: 20px; line-height: 1; color: var(--sp-text-dim); }

@media (min-width: 900px) and (min-height: 500px) {
  .sp-deck {
    grid-template-columns: minmax(0, 1fr) 316px;
    /* 98 px of chrome: every station's own height budget (ui/BlueprintBuilder's board) counts on it. */
    grid-template-rows: 52px 46px minmax(0, 1fr);
    grid-template-areas: "top top" "nav nav" "main aside";
  }
  .sp-deck[data-station="hangar"], .sp-deck[data-station="armory"], .sp-deck[data-station="ops"], .sp-deck[data-station="records"], .sp-deck[data-station="news"], .sp-deck[data-station="blueprints"], .sp-deck[data-station="studio"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "nav" "main";
  }
  .sp-deck[data-strip="true"] {
    grid-template-rows: 52px 46px minmax(0, 1fr) 100px;
    grid-template-areas: "top top" "nav nav" "main aside" "strip strip";
  }
  .sp-deck[data-strip="true"]:is([data-station="hangar"], [data-station="armory"], [data-station="ops"], [data-station="records"], [data-station="news"], [data-station="studio"], [data-station="blueprints"]) {
    grid-template-areas: "top" "nav" "main" "strip";
  }
  .sp-deck[data-titled="true"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .sp-deck[data-titled="true"] .sp-deck__nav { display: none; }
  /* Hazard tape along the bay's floor. */
  .sp-deck::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 3; background: var(--sp-tape); pointer-events: none; }
  .sp-deck__back { font-size: 18px; }
  .sp-deck__back-chevron { display: none; }
  .sp-deck__top { padding: 0 16px 0 20px; gap: 12px; }
  .sp-deck__top-left { gap: 16px; }
  .sp-deck__top-right { gap: 8px; }
  .sp-deck__mark { width: 28px; height: 28px; }
  /* The drop-cap. The S body (the mark's 8..56 × 4..60 box) stands 1.12 × the cap height
     (Oswald's caps are 0.81em), its foot on the baseline; the orb and the thruster hang outside
     the box. The gap after it is the face's bearing plus the tracking: 0.14em. */
  .sp-deck__wordmark { gap: 0; align-items: baseline; font-size: 22px; }
  .sp-deck__wordmark .sp-deck__mark { position: relative; width: calc(0.9072em * 48 / 56); height: 0.9072em; margin-right: 0.14em; background: none; }
  .sp-deck__wordmark .sp-deck__mark::before {
    content: ""; position: absolute; left: calc(0.9072em * -8 / 56); top: calc(0.9072em * -5 / 56);
    width: calc(0.9072em * 66 / 56); height: calc(0.9072em * 66 / 56);
    background: url("../../../assets/brand/sproks-mark-small.svg") center / contain no-repeat;
  }
  .sp-deck__wordmark-text { display: inline; margin-right: -0.08em; }
  .sp-deck__pilot-bar { width: 160px; }
  .sp-deck[data-chassis="true"] .sp-deck__top { grid-template-columns: 1fr auto 1fr; }
  .sp-deck[data-chassis="true"] .sp-deck__pilot-bar { display: block; }
  .sp-deck[data-chassis="true"] .sp-deck__pilot-level { letter-spacing: 0.1em; white-space: nowrap; }
  .sp-deck[data-chassis="true"] button.sp-deck__pilot { padding: 0 10px; }
  .sp-deck__pilot-xp { display: inline; }
  .sp-deck__icon-button { display: grid; }
  .sp-deck__opsline { display: none; }
  /* The tab row: plates with their top corners cut (the Kit mark's 45°), standing in a dark channel. */
  .sp-deck__nav {
    grid-auto-flow: column; grid-auto-columns: minmax(150px, max-content); justify-content: start; align-items: end; gap: 6px;
    padding: 0 20px; border-top: 0; border-bottom: 2px solid var(--sp-seam);
    background: var(--sp-well); box-shadow: inset 0 6px 8px var(--sp-edge-dark);
  }
  .sp-deck__station {
    flex-direction: row; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px;
    font-family: var(--sp-font-display); font-weight: 500; font-size: 16px; letter-spacing: 0.12em; color: var(--sp-text-dim);
    background: linear-gradient(180deg, var(--sp-space-2), var(--sp-space-1));
    clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%, 0 11px);
  }
  .sp-deck__station:hover { color: var(--sp-text); background: linear-gradient(180deg, color-mix(in srgb, var(--sp-text) 8%, var(--sp-space-2)), var(--sp-space-2)); }
  .sp-deck__station .sp-deck__glyph { display: none; }
  .sp-deck__station-label { overflow: visible; }
  .sp-deck[data-more="true"] .sp-deck__station[data-station="news"] { display: flex; }
  .sp-deck__station--more { display: none; }
  .sp-deck__station[aria-current="page"] { color: var(--sp-ink); font-weight: 700; background: linear-gradient(180deg, color-mix(in srgb, var(--sp-select) 80%, white), var(--sp-select)); }
  .sp-deck__dot { position: static; margin-left: 2px; }
  /* The job board. */
  .sp-deck__aside {
    display: block; grid-area: aside; min-height: 0; overflow-y: auto; padding: 18px 16px 24px;
    border-left: 3px solid var(--sp-seam);
    background: color-mix(in srgb, var(--sp-space-1) 55%, var(--sp-space-0)); box-shadow: inset 1px 0 0 var(--sp-edge-light);
  }
  .sp-deck__main { padding-bottom: 8px; }
  /* The balance sits in a socket. */
  .sp-deck__top-right > .sp-quanta { padding: 5px 12px; margin-right: 8px; border-radius: var(--sp-radius-sm); background: var(--sp-well); border: 1px solid var(--sp-seam); box-shadow: var(--sp-inset); }
  /* The row itself; its look is the strip's own. */
  .sp-deck__strip { display: flex; grid-area: strip; align-items: stretch; min-width: 0; }
  .sp-deck__strip > * { flex: 1; min-width: 0; }
}

/* The More dot: something unread behind ☰ / the More tab (What's new). */
.sp-deck__icon-button, .sp-deck__station--more { position: relative; }
.sp-deck__icon-button .sp-deck__dot, .sp-deck__station--more .sp-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) ——— */
.sp-deck__language { position: relative; display: flex; flex: none; }
.sp-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(--sp-radius-sm);
  background: none; color: var(--sp-text-dim); cursor: pointer;
  font-family: var(--sp-font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.06em;
}
.sp-deck__language-button:hover, .sp-deck__language-button:focus-visible, .sp-deck__language-button[aria-expanded="true"] { color: var(--sp-text); }
.sp-deck__language-button[aria-expanded="true"] { background: color-mix(in oklab, var(--sp-text) 8%, transparent); }
/* Open, the top bar rises over the scrim, so the picker is above it and a click elsewhere lands on it. */
.sp-deck[data-language-open="true"] .sp-deck__top { position: relative; z-index: 21; }
.sp-deck__language-scrim { position: fixed; inset: 0; z-index: 20; }
.sp-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(--sp-radius); border: 1px solid var(--sp-seam);
  background: var(--sp-plate);
  box-shadow: var(--sp-bevel), 0 12px 32px var(--sp-edge-dark);
}
.sp-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(--sp-radius-sm);
  background: none; color: var(--sp-text-dim); cursor: pointer; text-align: start;
  font-family: var(--sp-font-ui); font-weight: 500; font-size: 14px;
}
.sp-deck__language-item:hover, .sp-deck__language-item:focus-visible { color: var(--sp-text); background: color-mix(in oklab, var(--sp-text) 8%, transparent); }
.sp-deck__language-item[aria-checked="true"] { color: var(--sp-text); font-weight: 600; }
.sp-deck__language-mark { flex: none; min-width: 1em; color: var(--sp-select); }