:root {
  --shell-header-h: 88px;
  --shell-gutter: 48px;
  --shell-rail-max: 1320px;
  --shell-rail: min(calc(100% - var(--shell-gutter)), var(--shell-rail-max));
  /* Header top air + gap from header bottom to first page block — same on every page. */
  --shell-header-top: 14px;
  --shell-content-gap: 24px;
  --shell-ink: var(--text, #F4EFE4);
  /* Match site header CTA (#f0c866), not the older --gold fallback. */
  --shell-accent: var(--m3-primary, var(--primary, #f0c866));
  --shell-accent-ink: var(--m3-on-primary, var(--primary-ink, #171310));
  --scroll-thumb: rgba(255, 255, 255, 0.14);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.26);
  --scroll-track: transparent;
}

@media (max-width: 1024px) {
  :root { --shell-gutter: 28px; }
}

@media (max-width: 780px) {
  :root { --shell-gutter: 20px; }
}

@media (max-width: 360px) {
  :root { --shell-gutter: 12px; }
}

/* Header scrolls with the page — not sticky, not fixed. */
body {
  display: block !important;
  padding-top: 0 !important;
  min-height: 100dvh;
}

.site-chrome,
.site-chrome-spacer {
  display: contents;
}

.site-header,
.checkout-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 20;
  width: 100%;
  height: var(--shell-header-h);
  margin: var(--shell-header-top, 14px) 0 0;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  isolation: auto !important;
}

.header-main {
  width: var(--shell-rail);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}

.brand {
  min-width: 0;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--shell-ink);
}

.brand-mark {
  width: 40px;
  height: 30px;
  object-fit: contain;
  flex: none;
}

.brand-word {
  width: 118px;
  height: 28px;
  object-fit: contain;
  flex: none;
  /* Same cream ink as nav labels — not a separate gold cast. */
  filter: brightness(0) invert(96%) sepia(8%) saturate(320%) hue-rotate(358deg);
}

.brand:hover img,
.brand:focus-visible img {
  opacity: 1 !important;
  transform: none !important;
}

.brand:hover .brand-word,
.brand:focus-visible .brand-word {
  filter: brightness(0) invert(96%) sepia(8%) saturate(320%) hue-rotate(358deg) !important;
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark { filter: none !important; }

.next-primary-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(4px, 1vw, 10px);
}

.next-primary-nav a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(12px, 1.4vw, 20px);
  border: 0;
  border-radius: 12px;
  color: var(--shell-ink);
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .88;
  transition: color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.next-primary-nav a:hover,
.next-primary-nav a.active {
  color: var(--shell-accent);
  background: rgba(255, 255, 255, .07);
  opacity: 1;
}

.site-search,
.shell-search-space,
.header-main .site-search {
  display: none !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header .icon-button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: var(--shell-ink);
  cursor: pointer;
  box-sizing: border-box;
  opacity: .9;
}

.site-header .icon-button:hover {
  background: rgba(255,255,255,.09);
  opacity: 1;
}

.site-header .icon-button svg { width: 22px; height: 22px; }

/* Keep header chrome from clipping the fixed inbox popover. */
.site-header,
.header-main,
.header-actions,
.inbox-chrome,
.inbox-bell-wrap {
  overflow: visible !important;
}

.inbox-chrome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.inbox-bell-wrap {
  position: relative;
}

.inbox-button {
  position: relative;
}

.inbox-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  z-index: 2;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--shell-accent, #f1d88a);
  color: var(--shell-accent-ink, #1a1b17);
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(18, 19, 21, .92);
}

/* Portaled to body + fixed by JS so header height never clips the list.
   Popovers use the graphite overlay (rgba(20,21,24,.98)), the pre-4A-1
   value, restored by owner decision 2026-09-27. */
.inbox-panel {
  position: fixed;
  z-index: 260;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  gap: 0;
  width: min(360px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(70dvh, 520px);
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: var(--overlay, rgba(20, 21, 24, .98));
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
}

.inbox-panel:not([hidden]) {
  display: flex;
}

.inbox-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.inbox-panel-head strong {
  font-size: 14px;
  font-weight: 750;
}

.inbox-panel-head a {
  color: var(--shell-accent, #f1d88a);
  font-size: 13px;
  text-decoration: none;
}

.inbox-panel-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

.inbox-empty {
  margin: 0;
  padding: 10px 4px 4px;
  color: rgba(255,255,255,.55);
}

.inbox-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: inherit;
  text-decoration: none;
}

.inbox-item:hover {
  background: rgba(255,255,255,.08);
}

.inbox-item.is-unread {
  background: rgba(241, 216, 138, .08);
}

.inbox-item strong {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  overflow-wrap: anywhere;
}

.inbox-item span {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 780px) {
  .inbox-panel {
    width: min(420px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    max-height: min(62dvh, calc(100dvh - 140px));
    border-radius: 18px;
    padding: 14px;
  }

  .inbox-panel-head strong { font-size: 15px; }
  .inbox-item { padding: 12px 12px; }
}

/* 2026-09-27 decision: «Войти» is graphite on every surface — gold is
   reserved for the page's own primary action and the active state. */
.header-login {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.14));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--shell-ink) !important;
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease;
}

.header-login:hover,
.header-login:focus-visible {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: var(--line-strong, rgba(255, 255, 255, 0.22));
  color: var(--shell-ink) !important;
}

/* Keyboard focus on the shell chrome: 2px ring in the text colour at 2px
   offset, never gold and never a fill (owner 2026-09-27, same rule as
   next.css and play.css). The shell restates it because the forum loads
   shell.css without next.css. The colour is pinned to --shell-ink rather
   than following the element's own text colour: active dock items and
   focused footer links have gold text, which drew a gold ring on them. */
.header-login:focus-visible,
.header-account:focus-visible,
.dock-account:focus-visible,
.site-header .icon-button:focus-visible,
.mobile-dock a:focus-visible,
.footer-column a:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4) !important;
  outline-offset: 2px;
}

/* Top nav links are tabs: the ring sits inside the pill (offset -2px, like
   play.css .cab-nav-link) and the label is forced to ink, so keyboard focus
   never reads as the current page (gold label on the .07 pill). The offset
   is !important only to beat the later `.site-header a:focus-visible` rule,
   which has the same specificity. */
.next-primary-nav a:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4) !important;
  outline-offset: -2px !important;
  color: var(--shell-ink) !important;
}

.header-account,
.dock-account {
  min-height: 48px;
  max-width: min(240px, 42vw);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--shell-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.header-account:hover,
.header-account:focus-visible,
.dock-account:hover,
.dock-account:focus-visible,
.header-account[aria-expanded="true"],
.dock-account[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.09);
  color: var(--shell-ink);
  filter: none;
}

/* S3 (2026-09-27): on play.slarp.gg the account chip *is* the current page
   (no product in the nav is highlighted there) — the chip carries
   aria-current="page" (shell.py attrs()/chip_current). Guest chip stays
   graphite: «Войти» is never gold on any surface (see DECISIONS.md,
   "«Войти» графитовая..."). Once logged in, the chip itself stays graphite
   too (.07 fill, .12 border, ink name, like the current nav pill); the only
   gold is the solid avatar tile below, the current-page state marker. */
.header-login[aria-current="page"] {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: var(--line-strong, rgba(255, 255, 255, 0.22));
}

.header-account[aria-current="page"] {
  /* !important: site/src/css/next.css ships a competing !important
     .header-account background/border (see the same fight header-login
     already had to win above). */
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

/* The rule above also beats next.css's chip hover, so hover and the open
   menu restate it here, capped at the .10 selected+hover lift. */
.header-account[aria-current="page"]:is(:hover, :focus-visible, [aria-expanded="true"]) {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .2) !important;
}

.header-account[aria-current="page"] .header-account-name {
  color: var(--shell-ink);
}

.header-account-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  /* Graphite by default — gold is the active-page treatment only (one gold
     CTA per screen). The tile turns gold solely on play.slarp.gg via
     [aria-current="page"] below; on every other page this avatar sat gold
     on its own, unrelated to any action (visual QA, 2026-09-27).
     !important: same fight as .header-login above — next.css ships a
     competing !important background on .header-account-avatar itself. */
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--shell-ink) !important;
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}
/* the chip's only gold = current-page state marker (DECISIONS 2026-09-27) */
.header-account[aria-current="page"] .header-account-avatar,
.dock-account[aria-current="page"] .header-account-avatar {
  background: var(--shell-accent) !important;
  color: var(--shell-accent-ink) !important;
}
.header-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header-account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
}

.menu-button,
.header-nav,
.theme-button { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 300;
  top: 8px;
  left: 10px;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--shell-accent);
  color: var(--shell-accent-ink);
}
.skip-link:focus { transform: none; }

.mobile-dock { display: none; }
.shell-product-dock { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.shell-product-dock a { min-width: 0; text-align: center; }
.shell-product-dock a .dock-label,
.shell-product-dock a span:not(.dock-icon):not(.header-account-avatar) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
}
.dock-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Every header and dock control, including the forum's (no next.css there). */
.site-header a:focus-visible,
.site-header button:focus-visible,
.mobile-dock a:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4);
  outline-offset: 2px;
}

/* Account menu (S1) — header popover and dock bottom sheet share this body. */
.account-menu-status {
  padding: 10px 14px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  color: var(--muted, #b3aa98);
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .01em;
}

.account-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--shell-ink);
  font-family: var(--body, "Golos Text", "Segoe UI", sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 44px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

/* 2026-09-27 QA (low): the wash above is subtle — keyboard focus on a menu
   item (popover or the dock's bottom sheet) needs its own visible ring, in
   the text colour per DECISIONS (never gold — that reads as an active tab). */
.account-menu-item:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4);
  outline-offset: -2px;
}

.account-menu-divider {
  height: 1px;
  margin: 6px 8px;
  background: var(--line, rgba(255, 255, 255, 0.1));
}

/* Desktop popover, portaled to body and positioned under the chip by JS. */
.account-menu {
  position: fixed;
  z-index: 260;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: var(--overlay, rgba(20, 21, 24, .98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
}

.account-menu:not([hidden]) { display: flex; }

/* Mobile bottom sheet (S2), full width, anchored to the safe area. */
.account-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: none;
  background: var(--scrim, rgba(8, 9, 12, .58));
}

.account-sheet-backdrop:not([hidden]) { display: block; }

.account-sheet {
  position: fixed;
  z-index: 300;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  max-height: min(72dvh, 520px);
  padding: 6px 8px calc(14px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: var(--overlay, rgba(20, 21, 24, .98));
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  transition: transform 160ms ease;
}

.account-sheet:not([hidden]) { display: flex; }

.account-sheet-grabber {
  flex: none;
  width: 36px;
  height: 4px;
  margin: 8px auto 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  touch-action: none;
}

.account-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.account-sheet-body .account-menu-item { font-size: 15px; }

body.account-sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .account-sheet { transition: none; }
}

.checkout-header .checkout-header-main {
  width: min(calc(100% - 40px), 1200px);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.checkout-header-title {
  justify-self: center;
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--shell-ink);
}

/* Dense Majestic-style footer: information first, no separating stripe. */
.site-ip-notice {
  background: transparent;
  border: 0;
  padding: 10px 0 0;
}

.site-ip-notice-inner {
  width: var(--shell-rail);
  margin-inline: auto;
}

.site-ip-notice p {
  margin: 0;
  max-width: 72em;
  /* 0.75 measures 5.01:1 on #121315 (AA for 11px). */
  color: rgba(179, 170, 152, 0.75);
  font-size: 11px;
  line-height: 1.45;
}

.site-ip-notice strong {
  color: rgba(244, 239, 228, 0.82);
  font-weight: 700;
}

.site-footer {
  flex: none;
  border: 0 !important;
  background: var(--m3-surface, #121315) !important;
  padding: clamp(22px, 3vw, 36px) 0 clamp(40px, 5vw, 62px) !important;
}

.footer-majestic {
  width: var(--shell-rail);
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    minmax(240px, 1.1fr) minmax(120px, .55fr) minmax(120px, .55fr)
    minmax(220px, .9fr) minmax(170px, .7fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}

.footer-company {
  min-width: 0;
}

.footer-brand {
  width: max-content;
  min-height: 38px;
  margin-bottom: 15px;
}

.footer-company > strong,
.footer-column > strong {
  display: block;
  margin-bottom: 16px;
  color: rgba(244, 239, 228, .94);
  font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.footer-company > strong {
  margin-bottom: 8px;
}

.footer-company p {
  max-width: 39em;
  margin: 4px 0 0;
  color: rgba(179, 170, 152, .72);
  font-size: 10px;
  line-height: 1.5;
}

.footer-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Vertical rhythm moves into the links' own padding below (WCAG 2.5.8
     target size, design-backlog п.7) — kept visually close to the old 11px. */
  gap: 1px;
}

.footer-column a {
  min-height: 0 !important;
  display: inline-block !important;
  padding-block: 5px;
  color: rgba(179, 170, 152, .78);
  font-size: 11px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 150ms ease;
}

/* 2026-09-27 QA: toggleFooterAuthLink() sets [hidden] on .footer-auth-link
   for a logged-in visitor, but the `!important` display above beats the
   UA's `[hidden]{display:none}` rule, so a signed-in person still saw
   "Войти" in the footer. Restate hidden with matching specificity. */
.footer-column a[hidden] {
  display: none !important;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--shell-accent);
}

.footer-column a:focus-visible,
.footer-brand:focus-visible {
  outline: 2px solid var(--shell-ink, #F4EFE4);
  outline-offset: 2px;
  border-radius: 8px;
}

.footer-contacts a:last-child {
  color: rgba(244, 239, 228, .9);
  text-decoration: underline;
  text-decoration-color: rgba(233, 200, 124, .45);
  text-underline-offset: 4px;
}

.footer-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 980px) {
  :root { --shell-header-h: 78px; }
  .brand-word { width: 96px; height: 22px; }
  .brand-mark { width: 34px; height: 26px; }
  .next-primary-nav a {
    font-size: 14px;
    padding-inline: 10px;
  }
  .header-login { min-height: 44px; padding-inline: 16px; font-size: 13px; }
  .header-account { min-height: 44px; max-width: min(200px, 40vw); padding: 0 10px 0 6px; gap: 8px; }
  .header-account-avatar { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
  .header-account-name { font-size: 13px; }
  .site-header .icon-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .footer-majestic {
    grid-template-columns: repeat(4, minmax(130px, .6fr));
  }
  .footer-company { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  :root { --shell-header-h: 68px; }
  .header-main {
    width: var(--shell-rail);
    display: flex;
    gap: 10px;
  }
  /* The logo is never a shrinkable flex item — review2 (high) measured the
     wordmark image poking out of a squeezed .brand box into the bell/mail
     icons at 375px on every host that still loads the pre-shell !important
     header rules (site/src/css/next.css, community/board/board.css). */
  .brand { flex: none; }
  .brand-word { width: 84px; height: 20px; }
  .brand-mark { width: 28px; height: 21px; }
  .next-primary-nav { display: none; }
  .header-actions { margin-left: auto; }
  .header-login {
    min-height: 42px;
    padding-inline: 14px;
    font-size: 12px;
    border-radius: 10px;
  }
  /* The account chip already lives in the mobile dock (.dock-account) once
     logged in — keeping the header copy too crowds brand + bell + mail +
     chip into one row and the chip pushes into the logo (visual QA,
     2026-09-27). Guests still see .header-login above; only the logged-in
     header chip is hidden here. */
  .header-account { display: none; }
  .dock-account {
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    max-width: none;
    padding: 6px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
  }
  .dock-account .header-account-avatar {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 10px;
  }
  .dock-account > span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
  }
  .site-header .icon-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }
  .mobile-dock {
    position: fixed;
    z-index: 150;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(calc(100% - 24px), 560px);
    min-height: 68px;
    display: grid;
    gap: 2px;
    transform: translateX(-50%);
    border: 0;
    border-radius: 22px;
    background: rgba(27, 29, 32, .92);
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
  }
  .mobile-dock a {
    min-height: 56px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    border-radius: 14px;
    color: rgba(244, 239, 228, .72);
    padding: 6px 4px;
    font-family: var(--display, "Geologica", "Segoe UI", sans-serif);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: -.01em;
    line-height: 1.1;
    transition: color 160ms ease, background 160ms ease, opacity 160ms ease;
  }
  .mobile-dock a:hover {
    color: var(--shell-ink, #F4EFE4);
    background: rgba(255, 255, 255, .05);
  }
  .mobile-dock a.active {
    border: 0;
    background: rgba(255, 255, 255, .08);
    color: var(--shell-accent, #f0c866);
  }
  .mobile-dock a.dock-account {
    gap: 3px;
  }
  .mobile-dock .header-account-avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 10px;
  }
  .mobile-dock a.active .dock-icon,
  .mobile-dock a.active svg {
    color: var(--shell-accent, #f0c866);
  }
  /* S3 (2026-09-27): dock account slot on play.slarp.gg — the active dock
     item treatment (.08 neutral tile, gold icon and label) plus the gold
     avatar tile; the guest slot has no aria-current and stays graphite. */
  .mobile-dock a[aria-current="page"]:not(.dock-account) {
    background: rgba(255, 255, 255, .08);
    color: var(--shell-ink, #F4EFE4);
  }
  .mobile-dock a.dock-account[aria-current="page"] {
    background: rgba(255, 255, 255, .08);
    color: var(--shell-accent, #f0c866);
  }
  .mobile-dock a.dock-account[aria-current="page"] .dock-icon,
  .mobile-dock a.dock-account[aria-current="page"] svg {
    color: var(--shell-accent, #f0c866);
  }
  /* Focus must stay in the text colour, never gold (DECISIONS). Redundant
     since the shared chrome ring is pinned to --shell-ink instead of the
     element's own (here gold) text colour; kept as a harmless guard. */
  .mobile-dock a.dock-account[aria-current="page"]:focus-visible {
    outline-color: var(--shell-ink, #F4EFE4) !important;
  }
  .site-footer {
    padding: 38px 0 calc(96px + env(safe-area-inset-bottom)) !important;
  }
  .footer-majestic {
    width: var(--shell-rail);
    grid-template-columns: 1fr 1fr;
    gap: 34px 24px;
  }
  .footer-company,
  .footer-documents {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .header-main { width: var(--shell-rail); gap: 6px; }
  .brand { gap: 8px; }
  .brand-word { width: 72px; height: 17px; }
  .header-login { padding-inline: 12px; }
  .header-actions { gap: 6px; }
  .inbox-chrome { gap: 6px; }
  .inbox-badge {
    top: -4px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
  }
  .footer-majestic { grid-template-columns: 1fr; }
  .footer-company,
  .footer-documents { grid-column: auto; }
  /* Five dock slots at 360px («Ускоритель» clipped to «Ускорит…» —
     design-backlog п.11): shorter label text (shell.py DOCK_LABELS) plus a
     little less type and padding so nothing truncates. */
  .mobile-dock { padding: 6px; gap: 0; }
  .mobile-dock a {
    padding: 5px 2px;
    font-size: 9px;
    letter-spacing: -.02em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .mobile-dock {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Quiet shared scrollbar — every page and every overflow surface. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb, rgba(255, 255, 255, 0.14))
    var(--scroll-track, transparent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb, rgba(255, 255, 255, 0.14))
    var(--scroll-track, transparent);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--scroll-track, transparent);
}

*::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid transparent;
  border-radius: 999px;
  background-color: var(--scroll-thumb, rgba(255, 255, 255, 0.14));
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-hover, rgba(255, 255, 255, 0.26));
}

*::-webkit-scrollbar-corner {
  background: transparent;
}