/* Achievements 2.0 — «Восхождения», drawn to the Arena Console design.
   ==========================================================================
   Every number below is COPIED from the design's inline styles, not judged by
   eye: padding 13px 16px, radius 17px, the 1.5fr/1fr split, the 122px wall
   track, the 9.5px footnotes. Where the design and tokens.css already agree —
   #f1c152, rgba(236,231,250,…), rgba(167,139,250,…), the Unbounded/JetBrains
   pair — the token is used, because they are the same value written twice.

   THE SCREEN SIZES AGAINST THE SCENE, NOT THE WINDOW. shell.css states the
   contract and this file obeys it: `@container scene (…)`, never `@media`. At
   a 1280px window the scene is ~858px and at 905 it is ~527, so a media query
   here would lay a two-column screen into a one-column hole. 600px of scene is
   the split: above it the design's console layout, below it the design's phone
   layout — the same break the mock draws between its tablet and its laptop.

   THE VIEW OWNS ITS OWN GUTTER. `.container` brings 18/16/24px of padding and a
   1060px clamp; the design's gallery is 16px 18px inside the full scene and
   nothing else. Neutralising it for this view (and only this view) is what
   makes the content box 822px at a 858px scene, which is the mock's number to
   the pixel. */

#scene.shell-scene > .container:has(> .ach-wrap) {
  max-width: none;
  padding: 0;
}

/* THE DESIGN'S TEXT MODEL IS ONE TIGHT DEFAULT PLUS EXPLICIT EXCEPTIONS, and
   inheriting base.css's 1.45 instead is worth 20 % on every chip and row here.
   1.3 is not a taste: it is what the design's own `line-height: normal` renders
   as, measured at the same scene width — a channel chip 16.9px tall, a tier
   ladder row 99. `normal` is NOT the way to say it, because the number `normal`
   resolves to comes from the font file: this app ships the variable Manrope,
   whose metrics give 1.65, so writing `normal` here reproduced the 20px chip
   the inherited 1.45 already gave. Every deliberate line-height below (1.25,
   1.35, 1.4, 1.5, 1.55) is the design's own and overrides this. */
.ach-wrap,
.ach-sheet,
.ach-demo-card {
  line-height: 1.3;
}

.ach-wrap {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 12px 15px 16px;
  min-width: 0;
}

/* The tab body. `min-width: 0` is load-bearing: a flex/grid child defaults to
   `min-width: auto`, so the horizontally scrolling filter rows and the 328-cell
   wall inside it would size the column to their own content and push the page
   sideways at 390px. */
.ach-body {
  min-width: 0;
  min-height: 0;
}

/* ── The head strip ────────────────────────────────────────────────────── */

.ach-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}
.ach-head-mark {
  font-size: 19px;
  line-height: 1;
  flex: 0 0 auto;
}
.ach-head-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.ach-head-line {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}
.ach-head-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  min-width: 0;
}
.ach-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  margin-left: auto;
}
.ach-sub {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(236, 231, 250, 0.5);
  max-width: 620px;
  text-wrap: pretty;
  display: none;
}

.ach-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  flex: 0 0 100%;
  min-width: 0;
}
.ach-tab {
  white-space: nowrap;
  min-height: 44px;
  padding: 8px 15px;
  border-radius: 9px;
  border: 1px solid rgba(167, 139, 250, 0.16);
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  color: rgba(236, 231, 250, 0.5);
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
@media (hover: hover) {
  .ach-tab:hover { color: rgba(236, 231, 250, 0.8); }
}
.ach-tab.active {
  background: rgba(241, 193, 82, 0.16);
  color: var(--gold);
  border-color: rgba(241, 193, 82, 0.42);
}

/* ── Panels ────────────────────────────────────────────────────────────── */

.ach-panel {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  border-radius: 15px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  background: rgba(18, 12, 34, 0.5);
  min-width: 0;
}
.ach-panel-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ach-panel-head.row {
  flex-direction: row;
  align-items: baseline;
  gap: 9px;
}
/* The title of a two-part head never gives width to the footnote beside it:
   «ДО ЧЕГО БЛИЖЕ ВСЕГО» broken across two lines reads as two headings. */
.ach-panel-head.row .ach-panel-title { flex: 0 0 auto; white-space: nowrap; }
.ach-panel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ach-panel-note {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.5;
  color: rgba(236, 231, 250, 0.4);
  text-wrap: pretty;
}
.ach-panel-note.right { display: none; }
/* Two homes for one sentence and one chip: the console has a slot the phone
   does not, so each pair renders both nodes and hides the wrong one. */
.on-wide { display: none; }
.grow { flex: 1 1 auto; }

/* ── The badge: frame over emblem, six materials ───────────────────────── */

/* Tier is the frame and nothing else. `--ach-ink` is the tier's type colour and
   `--ach-edge` its rgb triple, so every chip, rule and glow downstream reads
   one variable instead of repeating six colour tables. */
.tier-foothills  { --ach-ink: #e2a35c; --ach-edge: 197, 138, 75; }
.tier-trail      { --ach-ink: #dfe5f2; --ach-edge: 200, 208, 228; }
.tier-pass       { --ach-ink: #f1c152; --ach-edge: 241, 193, 82; }
.tier-ridge      { --ach-ink: #dff0fb; --ach-edge: 120, 170, 230; }
.tier-summit     { --ach-ink: #bfefff; --ach-edge: 170, 225, 255; }
.tier-death_zone { --ach-ink: #f1c152; --ach-edge: 241, 193, 82; }

/* The area is the SURFACE the badge sits on, never the badge. The emblems ship
   on opaque indigo, so a colour field behind them is invisible — established by
   compositing a real one and looking at it. Six hues for six areas. */
.dom-chess     { --ach-hue: 124, 58, 237; }
.dom-arcade    { --ach-hue: 45, 212, 191; }
.dom-arena     { --ach-hue: 241, 193, 82; }
.dom-people    { --ach-hue: 236, 72, 153; }
.dom-calendar  { --ach-hue: 96, 165, 250; }
.dom-chronicle { --ach-hue: 167, 139, 250; }
.dom-other     { --ach-hue: 163, 230, 53; }

.ach-badge {
  position: relative;
  width: var(--ach-b, 54px);
  height: var(--ach-b, 54px);
  flex: 0 0 auto;
}
.ach-emblem,
.ach-frame,
.ach-laurel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
/* The emblem sits inside the frame's opening. It ships with an opaque dark
   ground — correct for the art — so it is inset and clipped rather than
   composited against a colour field, which would be invisible behind it. */
.ach-emblem {
  inset: 14%;
  width: 72%;
  height: 72%;
  border-radius: 12%;
  object-fit: cover;
  z-index: 1;
}
.ach-frame { z-index: 2; }
.tier-summit .ach-frame     { filter: drop-shadow(0 0 9px rgba(170, 225, 255, 0.5)); }
.tier-death_zone .ach-frame { filter: drop-shadow(0 0 11px rgba(241, 193, 82, 0.4)); }

/* One piece of art, used twice: the second branch is the first, mirrored.
   Percentages, not `calc(var(--ach-b) …)`: profile.js draws this same badge and
   sizes it with its own `width`/`height` rules, which never touch `--ach-b`.
   A laurel measured from the variable would be drawn for a 54px badge on the
   26px one in the dossier's name row. A percentage measures the box that is
   actually there. */
.ach-laurel {
  z-index: 3;
  inset: auto;
  left: -20%;
  top: -6%;
  width: 62%;
  height: 112%;
}
.ach-laurel-r {
  left: auto;
  right: -20%;
  transform: scaleX(-1);
}

/* A secret shows a question mark on the empty field, never its emblem: the
   emblem names the subject as plainly as the title would. */
.ach-secret-mark {
  position: absolute;
  inset: 14%;
  z-index: 1;
  border-radius: 12%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 32%, #241a44, #0d0a1c 78%);
  font-family: var(--font-display);
  font-size: calc(var(--ach-b, 54px) * 0.34);
  font-weight: 800;
  color: rgba(236, 231, 250, 0.45);
}

/* A badge with no entry behind it: the anatomy row's six materials, and the
   placeholder a ticker row falls back to when the key is not in the catalogue
   this browser is holding. It never carries a step numeral, because there is no
   step — the numeral belongs to an entry and this is not one. */
.ach-badge-bare .ach-numeral { display: none; }

/* The anatomy row, where the subject is the material and a family emblem would
   say «this entry» instead of «this tier»: the same indigo field, one plain
   mark on it, the frame over the top. */
.ach-frame-glyph {
  position: absolute;
  inset: 14%;
  z-index: 1;
  border-radius: 12%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 32%, #241a44, #0d0a1c 78%);
  font-size: calc(var(--ach-b, 54px) * 0.36);
  line-height: 1;
}

/* Locked badges are muted, not extinguished — and the way to mute this art is
   not the obvious one. The emblems are painted dark by design: a deep indigo
   ground with the subject carried almost entirely by a gold rim light.
   `grayscale()` removes exactly that rim and `brightness(<1)` crushes what is
   left to solid black, so both of the usual "locked" treatments turn the badge
   into an empty frame. What works is desaturating PARTLY, keeping the rim, and
   fading. Settled by rendering six candidates side by side in the real grid. */
.ach-badge.locked .ach-emblem { filter: saturate(0.35) brightness(0.9) opacity(0.7); }
.ach-badge.locked .ach-frame { filter: grayscale(0.92) brightness(0.5); }

.ach-numeral {
  position: absolute;
  z-index: 3;
  right: -4%;
  bottom: 2%;
  padding: 1px 4px;
  border-radius: 5px;
  background: #0c0918;
  border: 1px solid rgba(var(--ach-edge, 241, 193, 82), 0.6);
  font-family: var(--font-mono);
  font-size: max(8px, calc(var(--ach-b, 54px) * 0.15));
  font-weight: 700;
  line-height: 1.35;
  color: var(--ach-ink, #f1c152);
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

.ach-tierchip {
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ach-edge, 167, 139, 250), 0.5);
}
.open .ach-tierchip,
.ach-sheet-head .ach-tierchip { color: rgba(var(--ach-edge, 167, 139, 250), 0.85); }

.ach-domchip,
.ach-domcap {
  font-size: 8px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--ach-hue, 167, 139, 250), 0.85);
}
.ach-heldchip {
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(53, 199, 131, 0.4);
  background: rgba(53, 199, 131, 0.1);
  color: var(--ok);
  white-space: nowrap;
}
.ach-firstchip {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(241, 193, 82, 0.16);
  border: 1px solid rgba(241, 193, 82, 0.45);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* ── Bars ──────────────────────────────────────────────────────────────── */

.ach-bar {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: rgba(167, 139, 250, 0.14);
  overflow: hidden;
}
.ach-bar.thin { height: 4px; }
.ach-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--violet), var(--ach-ink, var(--gold)));
}

/* ── Loading and failure ───────────────────────────────────────────────── */

/* Not a spinner over an empty page — the same tiles in the state «still on the
   way», at the geometry the real ones will land in. */
.ach-load { display: flex; flex-direction: column; gap: 9px; }
.ach-load-line { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ach-load-title { font-family: var(--font-display); font-size: 11px; font-weight: 800; }
.ach-load-sub { font-size: 10px; color: rgba(236, 231, 250, 0.42); }
.ach-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ach-skel {
  height: 104px;
  border-radius: 13px;
  border: 1px solid rgba(167, 139, 250, 0.1);
  background: linear-gradient(100deg, rgba(20, 13, 38, 0.6), rgba(38, 26, 66, 0.5) 40%, rgba(20, 13, 38, 0.6));
  animation: achBreathe 1.8s infinite;
}
.ach-skel-row { height: 54px; border-radius: 12px; }
@keyframes achBreathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.ach-fail-wrap { display: flex; justify-content: center; padding-top: 24px; }
.ach-fail {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px;
  border-radius: 15px;
  border: 1px solid rgba(255, 93, 108, 0.3);
  background: rgba(40, 14, 22, 0.45);
}
.ach-fail-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: #ff8a94;
}
.ach-fail-sub { font-size: 11px; line-height: 1.55; color: rgba(236, 231, 250, 0.66); text-wrap: pretty; }
.ach-fail-why { font-size: 10px; color: rgba(236, 231, 250, 0.36); }
.ach-fail-btn {
  white-space: nowrap;
  align-self: flex-start;
  min-height: 44px;
  padding: 12px 17px;
  border-radius: 11px;
  border: 1px solid rgba(255, 93, 108, 0.45);
  background: rgba(255, 93, 108, 0.1);
  font: inherit;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  color: #ff8a94;
  cursor: pointer;
}
.ach-empty-line {
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
  color: rgba(236, 231, 250, 0.42);
  text-wrap: pretty;
}

/* ── Tab 1: «Ближайшие» ────────────────────────────────────────────────── */

.ach-lay-near,
.ach-lay-case,
.ach-lay-grid,
.ach-lay-alerts {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  min-height: 0;
}
.ach-col { display: flex; flex-direction: column; gap: 11px; min-width: 0; min-height: 0; }

.ach-near-list { display: flex; flex-direction: column; gap: 9px; }
.ach-near {
  --ach-b: 44px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 13px;
  text-align: left;
  border: 1px solid rgba(var(--ach-edge, 167, 139, 250), 0.2);
  background: var(--panel-soft);
  transition: border-color 0.16s;
}
.ach-near-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ach-near-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ach-near-name {
  font-size: 11px;
  font-weight: 800;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach-near-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: rgba(236, 231, 250, 0.7);
  white-space: nowrap;
}
.ach-near-tier { text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--ach-edge, 167, 139, 250), 0.7); }
.ach-near-left {
  font-size: 9px;
  line-height: 1.35;
  color: rgba(236, 231, 250, 0.36);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach-near-empty {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 14px;
  border-radius: 13px;
  border: 1px dashed rgba(167, 139, 250, 0.24);
  background: var(--panel-soft);
}
.ach-empty-title { font-size: 12px; font-weight: 800; }
.ach-empty-body { font-size: 10px; line-height: 1.55; color: rgba(236, 231, 250, 0.5); text-wrap: pretty; }
.ach-cta {
  align-self: flex-start;
  white-space: nowrap;
  min-height: 44px;
  margin-top: 4px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 0;
  background: var(--gold-grad);
  color: var(--gold-ink);
  font: inherit;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* The anatomy row: six frames, so the set reads as one cabinet. */
.ach-frames {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ach-frame-cell {
  --ach-b: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 0;
}
.ach-frame-name { font-size: 10px; font-weight: 800; color: var(--ach-ink); }
.ach-frame-cnt { font-family: var(--font-mono); font-size: 9px; color: rgba(236, 231, 250, 0.3); }
.ach-frame-mat {
  font-size: 8.5px;
  line-height: 1.35;
  color: rgba(236, 231, 250, 0.4);
  text-wrap: pretty;
  display: none;
}

.ach-recent-list { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.ach-recent-row {
  --ach-b: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(var(--ach-edge, 167, 139, 250), 0.14);
  background: var(--panel-soft);
  min-width: 0;
}
.ach-recent-row.first {
  border-color: rgba(var(--ach-edge, 241, 193, 82), 0.4);
  background: rgba(var(--ach-edge, 241, 193, 82), 0.06);
}
.ach-recent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ach-recent-who { font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.ach-recent-name { font-size: 9.5px; color: rgba(236, 231, 250, 0.5); overflow-wrap: anywhere; }
.ach-recent-row .ach-firstchip { margin-top: 2px; }
.ach-recent-when { font-size: 9px; color: rgba(236, 231, 250, 0.3); white-space: nowrap; }

.ach-demo {
  white-space: nowrap;
  min-height: 44px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(167, 139, 250, 0.3);
  background: var(--panel-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: rgba(236, 231, 250, 0.6);
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s;
}
@media (hover: hover) {
  .ach-demo:hover { border-color: rgba(241, 193, 82, 0.5); color: var(--gold); }
}

/* ── Tab 2: «Вся сетка» ────────────────────────────────────────────────── */

.ach-filter-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 15px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  background: rgba(18, 12, 34, 0.5);
  min-width: 0;
}
.ach-filters { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ach-filter-axis { display: block; min-width: 0; }
.ach-filter-label {
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(236, 231, 250, 0.34);
  flex: 0 0 auto;
}
/* Three axes × 33 chips wrap to roughly 800px of filters on a 390px screen,
   which puts the first badge below the fold. One scrolling line per axis costs
   ~150px total and keeps every chip reachable.
   No negative-margin bleed: it looks better, but the row then sticks out past
   its parent and gives the whole DOCUMENT a horizontal scrollbar. */
.ach-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  overscroll-behavior-x: contain;
}
.ach-filter-row::-webkit-scrollbar { display: none; }
.ach-filter-gap { flex: 0 0 14px; }
/* The second label on the genre row: the design puts «Состояние» inside the
   row rather than on an axis of its own, so three chips do not cost a line. */
.ach-filter-label.inline { display: inline-block; flex: 0 0 auto; margin-bottom: 0; width: auto; }
.ach-filter-sub .ach-filter-label { color: var(--gold); opacity: 0.7; }

.ach-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  background: var(--panel-soft);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  color: rgba(236, 231, 250, 0.5);
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.ach-chip.active {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.14);
  color: rgba(236, 231, 250, 0.95);
}
/* A tier chip carries the tier's own material, active or not — it is the one
   filter whose colour is a fact rather than a state. */
.ach-chip.tier-foothills,
.ach-chip.tier-trail,
.ach-chip.tier-pass,
.ach-chip.tier-ridge,
.ach-chip.tier-summit,
.ach-chip.tier-death_zone {
  font-weight: 800;
  border-color: rgba(var(--ach-edge), 0.16);
  background: rgba(var(--ach-edge), 0.04);
}
.ach-chip.tier-foothills.active,
.ach-chip.tier-trail.active,
.ach-chip.tier-pass.active,
.ach-chip.tier-ridge.active,
.ach-chip.tier-summit.active,
.ach-chip.tier-death_zone.active {
  border-color: rgba(var(--ach-edge), 0.6);
  background: rgba(var(--ach-edge), 0.14);
  color: var(--ach-ink);
}
.ach-chip-label { min-width: 0; }
.ach-chip-count { font-family: var(--font-mono); font-size: 9px; opacity: 0.6; }

.ach-grid-new {
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
  color: rgba(236, 231, 250, 0.44);
  text-wrap: pretty;
}

.ach-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 8px;
  min-height: 0;
  min-width: 0;
}

.ach-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 7px 9px;
  border-radius: 13px;
  text-align: center;
  min-width: 0;
  border: 1px solid rgba(var(--ach-hue), 0.13);
  background: rgba(var(--ach-hue), 0.028);
  transition: transform 0.16s, border-color 0.16s;
  /* 328 tiles is the whole catalogue and the design shows all of it behind the
     filters. Skipping the layout and paint of the ones off screen is what keeps
     that honest instead of paginated. */
  content-visibility: auto;
  contain-intrinsic-size: auto 128px;
}
.ach-tile.open {
  border-color: rgba(var(--ach-hue), 0.3);
  background: rgba(var(--ach-hue), 0.07);
}
@media (hover: hover) {
  .ach-tile:has(.ach-open:hover) { transform: translateY(-2px); border-color: rgba(241, 193, 82, 0.45); }
}
.ach-tile-name {
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(236, 231, 250, 0.46);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.ach-tile.open .ach-tile-name,
.ach-slot .ach-tile-name { font-weight: 800; color: rgba(236, 231, 250, 0.92); }
.ach-tile-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; }
.ach-tile-dot { opacity: 0.3; font-size: 8px; }
.ach-tile-rec {
  width: 100%;
  font-size: 9px;
  line-height: 1.35;
  color: rgba(236, 231, 250, 0.36);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach-tile-rec.closed { color: var(--gold); }
.ach-tile-secret {
  font-size: 8.5px;
  line-height: 1.3;
  color: rgba(236, 231, 250, 0.3);
  text-wrap: pretty;
}
.ach-grid-foot { display: flex; flex-direction: column; gap: 5px; }
.ach-grid-note {
  font-size: 9.5px;
  line-height: 1.5;
  color: rgba(236, 231, 250, 0.34);
  text-wrap: pretty;
}
.ach-secrets { opacity: 0.8; }

/* ── The two overlays on a tile ────────────────────────────────────────── */

/* The tap target. A sibling overlay rather than a handler on the card, so it is
   a real <button> with a real focus ring and cannot nest inside the share
   button — which sits at z-index 4, one above this, so the two never contend
   and no `stopPropagation` is needed anywhere. */
.ach-open {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ach-open:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (hover: hover) {
  .ach-near:has(.ach-open:hover) { border-color: rgba(241, 193, 82, 0.4); }
}

/* A 44px tap target that costs the cell nothing. At 390px a cell is 104px wide
   and the badge inside it is 54, so there is no room in the flow for a control
   the platform minimum says must be 44px square. `position: absolute` is the
   whole trick: the button is out of flow, so it cannot add a pixel to the
   cell's height, and its hit area is free to overlap the badge's corner — the
   badge is stacked images that are all `pointer-events: none`. */
.ach-share {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
}
.ach-share-mark {
  display: block;
  width: 22px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--gold);
  background: rgba(8, 6, 15, 0.86);
  border: 1px solid rgba(241, 193, 82, 0.35);
  border-radius: 7px;
  transition: border-color 0.15s, transform 0.12s;
}
@media (hover: hover) {
  .ach-share:hover .ach-share-mark { border-color: rgba(241, 193, 82, 0.75); }
}
.ach-share:active .ach-share-mark { transform: scale(0.9); }
.ach-share:focus-visible .ach-share-mark { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ── Tab 3: «Витрина» ──────────────────────────────────────────────────── */

.ach-case-head {
  gap: 10px;
  padding: 13px;
  border-radius: 15px;
  border-color: rgba(241, 193, 82, 0.24);
  background: rgba(24, 17, 8, 0.4);
}
.ach-case-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ach-case-head .ach-panel-title { font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.ach-case-note { font-size: 10px; color: var(--gold); font-weight: 700; }
.ach-case-slots { display: flex; flex-wrap: wrap; gap: 9px; }
.ach-slot {
  --ach-b: 58px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px;
  width: 96px;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(241, 193, 82, 0.3);
  background: rgba(241, 193, 82, 0.05);
  text-align: center;
}
.ach-slot.empty { border: 0; background: none; }
.ach-slot-box {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 16px;
  border: 1px dashed rgba(167, 139, 250, 0.3);
  display: grid;
  place-items: center;
  font-size: 17px;
  color: rgba(167, 139, 250, 0.4);
}
.ach-slot-n { font-size: 9px; color: rgba(236, 231, 250, 0.3); }
.ach-case-hint {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.5;
  color: rgba(236, 231, 250, 0.4);
  text-wrap: pretty;
}

/* ── Tab 4: «Оповещения» ───────────────────────────────────────────────── */

.ach-ladder-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(var(--ach-edge), 0.18);
  background: rgba(18, 12, 32, 0.44);
  min-width: 0;
}
.ach-ladder-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ach-ladder-chip {
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(var(--ach-edge), 0.45);
  background: rgba(var(--ach-edge), 0.08);
  font-size: 10px;
  font-weight: 800;
  color: var(--ach-ink);
}
.ach-chan {
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(167, 139, 250, 0.14);
  background: rgba(18, 12, 32, 0.6);
  color: rgba(236, 231, 250, 0.28);
}
.ach-chan.on {
  border-color: rgba(53, 199, 131, 0.4);
  background: rgba(53, 199, 131, 0.1);
  color: rgba(53, 199, 131, 0.95);
}
.ach-toast-silent {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1px dashed rgba(167, 139, 250, 0.22);
  background: rgba(16, 11, 28, 0.5);
}
.ach-toast-silent-title { font-size: 10px; font-weight: 800; color: rgba(236, 231, 250, 0.45); }
.ach-toast-silent-body { font-size: 9.5px; line-height: 1.5; color: rgba(236, 231, 250, 0.35); text-wrap: pretty; }

/* The specimen label is not decoration. Nothing in this column happened — it
   is a drawing of what a toast looks like at that tier — and the one word that
   says so has to be on the block, not in a caption somewhere else. */
.ach-specimen { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ach-specimen-lbl {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(236, 231, 250, 0.3);
}
.ach-toast {
  --ach-b: 38px;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: 330px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid rgba(var(--ach-edge), 0.45);
  background: linear-gradient(120deg, rgba(20, 14, 34, 0.97), rgba(12, 8, 22, 0.97));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(var(--ach-edge), 0.14);
}
.ach-toast-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ach-toast-kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.ach-toast-title { font-size: 11.5px; font-weight: 800; line-height: 1.3; text-wrap: pretty; }
.ach-toast.first .ach-toast-title { color: var(--gold); }
.ach-toast-sub { font-size: 9.5px; line-height: 1.4; color: rgba(236, 231, 250, 0.45); text-wrap: pretty; }
.ach-toast-cta {
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(var(--ach-edge), 0.14);
  border: 1px solid rgba(var(--ach-edge), 0.4);
  font-size: 9.5px;
  font-weight: 800;
  color: var(--ach-ink);
}
.ach-alert-special {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(241, 193, 82, 0.2);
  background: rgba(30, 21, 8, 0.3);
}
.ach-alert-special-name { font-size: 11px; font-weight: 800; color: var(--gold); }
.ach-alert-special-why { font-size: 9.5px; line-height: 1.5; color: rgba(236, 231, 250, 0.44); text-wrap: pretty; }

.ach-ticker-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 11px;
  border: 1px solid rgba(127, 216, 255, 0.28);
  background: linear-gradient(90deg, rgba(20, 32, 44, 0.8), rgba(14, 10, 26, 0.7));
  overflow: hidden;
}
.ach-ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7fd8ff;
  flex: 0 0 auto;
  animation: achPulse 2.4s infinite;
}
@keyframes achPulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }
.ach-ticker-line {
  font-size: 11px;
  font-weight: 700;
  color: #bfefff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ach-digest-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  background: linear-gradient(160deg, rgba(24, 17, 44, 0.9), rgba(14, 10, 26, 0.9));
}
.ach-digest-top { display: flex; align-items: center; gap: 8px; }
.ach-digest-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 11px;
  background: var(--gold-grad);
  color: var(--gold-ink);
}
.ach-digest-bot { font-size: 10px; font-weight: 800; color: var(--violet-300); }
.ach-digest-title { font-family: var(--font-display); font-size: 14px; font-weight: 800; }
.ach-digest-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(var(--ach-edge), 0.16);
  background: rgba(var(--ach-edge), 0.03);
}
.ach-digest-row.hot {
  border-color: rgba(var(--ach-edge), 0.4);
  background: rgba(var(--ach-edge), 0.07);
}
.ach-digest-icon { font-size: 14px; line-height: 1; }
.ach-digest-text { font-size: 10.5px; font-weight: 700; color: rgba(236, 231, 250, 0.78); overflow-wrap: anywhere; }
.ach-digest-row.hot .ach-digest-text { font-weight: 800; color: rgba(236, 231, 250, 0.95); }

.ach-group-panel {
  border-color: rgba(192, 132, 252, 0.24);
  background: rgba(24, 14, 38, 0.5);
}
.ach-group-panel .ach-panel-title { color: #d8b4fe; }
.ach-group-card {
  display: flex;
  gap: 9px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(192, 132, 252, 0.3);
  background: linear-gradient(160deg, rgba(28, 16, 44, 0.9), rgba(14, 10, 26, 0.9));
}
.ach-group-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 11px;
  background: linear-gradient(135deg, #c084fc, #6d28d9);
}
.ach-group-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ach-group-bot { font-size: 10px; font-weight: 800; color: #d8b4fe; }
.ach-group-line { font-size: 11px; line-height: 1.5; color: rgba(236, 231, 250, 0.9); text-wrap: pretty; }

/* ── «Как выглядит открытие» ───────────────────────────────────────────── */

.ach-demo-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 4, 12, 0.78);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.ach-demo-scrim.in { opacity: 1; }
.ach-demo-card {
  --ach-b: 104px;
  width: min(560px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 24px 26px;
  border-radius: 22px;
  border: 1px solid rgba(241, 193, 82, 0.4);
  background: linear-gradient(155deg, rgba(44, 30, 10, 0.9), rgba(18, 12, 32, 0.95));
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}
.ach-demo-top { display: flex; align-items: center; gap: 17px; min-width: 0; }
.ach-demo-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ach-demo-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.ach-demo-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.ach-demo-desc { font-size: 11px; color: rgba(236, 231, 250, 0.55); line-height: 1.45; }
.ach-demo-nums {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(167, 139, 250, 0.07);
  border: 1px solid rgba(167, 139, 250, 0.2);
}
.ach-demo-count { display: flex; align-items: baseline; gap: 6px; }
.ach-demo-now { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--gold); }
.ach-demo-of { font-family: var(--font-mono); font-size: 15px; color: rgba(236, 231, 250, 0.34); }
.ach-demo-open {
  padding: 6px 12px;
  border-radius: 9px;
  background: rgba(53, 199, 131, 0.14);
  border: 1px solid rgba(53, 199, 131, 0.4);
  font-size: 11px;
  font-weight: 800;
  color: var(--ok);
  white-space: nowrap;
}
.ach-demo-rec { font-size: 10px; line-height: 1.4; color: rgba(236, 231, 250, 0.36); }
.ach-demo-teaser {
  --ach-b: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(167, 139, 250, 0.3);
  background: var(--panel-soft);
}
.ach-demo-teaser-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ach-demo-teaser-lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(236, 231, 250, 0.36);
}
.ach-demo-teaser-text { font-size: 12px; font-weight: 800; color: rgba(236, 231, 250, 0.9); text-wrap: pretty; }
.ach-demo-alert { font-size: 9.5px; line-height: 1.5; color: rgba(236, 231, 250, 0.36); text-wrap: pretty; }
.ach-demo-acts { display: flex; gap: 9px; }
.ach-demo-close {
  white-space: nowrap;
  flex: 1;
  min-height: 44px;
  padding: 13px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--gold-ink);
  font: inherit;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

/* ── The detail sheet ──────────────────────────────────────────────────────
   A bottom sheet on a phone and a centred dialog on the console — which is
   exactly the two geometries the design draws, and the reason there are two:
   a full-width bottom sheet on a 1280px monitor is a letterbox, and a centred
   460px box on a 390px phone is a thing you cannot dismiss with a thumb.
   Both mount into the same `#modal-root` at the same `--z-modal`, so the app
   still has exactly one overlay layer. */

.ach-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(6, 4, 12, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}
.ach-sheet-scrim.in { opacity: 1; }

.ach-sheet {
  position: relative;
  width: 100%;
  max-height: min(88dvh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: 22px 22px 0 0;
  border-top: 1px solid rgba(167, 139, 250, 0.3);
  background: linear-gradient(180deg, rgba(28, 19, 50, 0.99), rgba(14, 10, 26, 0.99));
  /* Transform only, so the entrance composites: no layout, no paint. */
  transform: translate3d(0, 100%, 0);
  transition: transform 320ms var(--ease-out);
  will-change: transform;
}
.ach-sheet-scrim.in .ach-sheet { transform: none; }
.ach-sheet.dragging { transition: none; }

/* `overscroll-behavior: contain` is what actually stops the scroll chaining
   into the page behind — not the body lock, which is `overflow: hidden` and
   nothing more. */
.ach-sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(22px + env(safe-area-inset-bottom));
}
.ach-sheet-content { display: flex; flex-direction: column; gap: 11px; }

/* The grabber owns the drag; the body owns the scroll. They share no surface,
   so there is nothing to arbitrate and no `scrollTop === 0` guard to be wrong
   about during iOS rubber-band overscroll. */
.ach-grab {
  flex: 0 0 auto;
  height: 26px;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
}
.ach-grab::before {
  content: "";
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--stroke-strong);
  transition: width 160ms var(--ease-out), background 160ms;
}
.ach-sheet.dragging .ach-grab::before { width: 54px; background: var(--gold); }

.ach-sheet-x {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--text-dim);
  font-size: 17px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .ach-sheet-x:hover { color: var(--text); }
}
.ach-sheet-x:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

.ach-sheet-hero {
  --ach-b: 96px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  touch-action: none;
  min-width: 0;
}
.ach-sheet-badge { position: relative; flex: 0 0 auto; }
.ach-sheet-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ach-sheet-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ach-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ach-first-plate {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  border-radius: 13px;
  border: 1px solid rgba(241, 193, 82, 0.35);
  background: rgba(241, 193, 82, 0.06);
}
.ach-first-who { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--gold); }
.ach-first-when { font-size: 10px; color: rgba(236, 231, 250, 0.6); }

.ach-sheet-prog { display: flex; flex-direction: column; gap: 5px; }
.ach-sheet-nums { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ach-sheet-nums .cur { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.ach-sheet-nums .tgt { font-size: 10px; color: rgba(236, 231, 250, 0.4); }
.ach-sheet-prog .ach-bar { height: 6px; }

/* The one prominent answer to «что нужно сделать». Full-brightness text, not a
   dimmed aside: this is the line that is not an aside. */
.ach-plate {
  padding: 13px;
  background: var(--panel-soft);
  border: 1px solid var(--stroke);
  border-left: 2px solid rgba(241, 193, 82, 0.55);
  border-radius: 13px;
}
.ach-plate-lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.ach-plate-txt { font-size: 13px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }

/* The composite checklist — the fix for the ten entries that state a count and
   name none of the candidates. */
.ach-kids { margin-top: 10px; display: flex; flex-direction: column; }
.ach-kids-head {
  font-size: 10px;
  color: rgba(236, 231, 250, 0.4);
  margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.ach-kid {
  --ach-b: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 2px;
  background: none;
  border: 0;
  border-top: 1px solid var(--stroke);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
div.ach-kid { cursor: default; } /* a secret child is not a door */
.ach-kid .ach-numeral { display: none; }
.ach-kid-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.ach-kid.got .ach-kid-name { color: var(--text); }
.ach-kid-tick { width: 16px; text-align: center; font-size: 13px; color: rgba(236, 231, 250, 0.34); }
.ach-kid.got .ach-kid-tick { color: var(--ok); }
.ach-kid:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.ach-sheet-state { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ach-when { font-size: 10px; color: rgba(236, 231, 250, 0.4); font-variant-numeric: tabular-nums; }
.ach-sheet-sub { font-size: 11px; color: rgba(236, 231, 250, 0.6); line-height: 1.45; }
.ach-sheet-note { font-size: 11px; color: rgba(236, 231, 250, 0.4); line-height: 1.45; }
/* «Первым взошёл: @vanya» — a footnote in the route book, deliberately quiet.
   At village scale a name is the rarity signal; a percentage would be noise. */
.ach-first { font-size: 10px; color: rgba(236, 231, 250, 0.36); line-height: 1.4; }
.ach-sheet-gear,
.ach-sheet-share { width: 100%; justify-content: center; }

/* ── The console layout: two columns, the page scrolls ─────────────────────
   The view grows to content and the scene scrolls. The old height-lock
   (height:100% + overflow:hidden, minmax(0,1fr) grid rows, overflow-y:auto
   on inner lists) was the prison that stranded content below the fold of a
   box whose scroller is invisible on macOS. */

@container scene (min-width: 600px) {
  .ach-wrap {
    display: grid;
    grid-template-rows: auto auto;
    gap: 13px;
    padding: 16px 18px;
  }
  .ach-body { display: flex; flex-direction: column; }

  /* The head becomes the design's gold strip: one row, the tabs pushed right
     by the flexible middle rather than by a spacer. */
  .ach-head {
    gap: 12px;
    padding: 13px 16px;
    border-radius: 17px;
    border: 1px solid rgba(241, 193, 82, 0.26);
    background: linear-gradient(115deg, rgba(40, 28, 10, 0.6), rgba(18, 12, 34, 0.72));
  }
  .ach-head-mark { font-size: 22px; }
  .ach-head-title { font-size: 15px; }
  .ach-count { font-size: 12px; margin-left: 0; }
  .ach-sub { display: block; }
  .ach-tabs { display: flex; flex: 0 0 auto; gap: 6px; margin-left: auto; }
  .ach-tab { min-height: 34px; }

  .ach-panel { padding: 14px 15px; border-radius: 16px; border-color: rgba(167, 139, 250, 0.2); background: rgba(18, 12, 34, 0.56); }
  .ach-panel-title { font-size: 11px; }
  .on-wide { display: inline-block; }
  .on-narrow { display: none; }
  .ach-panel-note.below { display: none; }
  .ach-panel-note.right {
    display: block;
    text-align: right;
    max-width: 300px;
    font-size: 9px;
    line-height: 1.4;
    color: rgba(236, 231, 250, 0.34);
  }

  /* «Ближайшие»: the routes and the anatomy on the left, the mountain's own
     week on the right, at the design's 1.5fr / 1fr. */
  .ach-lay-near {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 13px;
  }
  .ach-lay-near > .ach-col { gap: 12px; }
  .ach-near-panel { flex: 0 0 auto; }
  .ach-anatomy { flex: 1; min-height: 0; }
  .ach-frames { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
  .ach-frame-mat { display: block; }
  .ach-recent .ach-recent-list { flex: 1; min-height: 0; }
  .ach-near { min-height: 0; }
  .ach-near-name { font-size: 12px; }
  .ach-near-num { font-size: 11px; color: rgba(236, 231, 250, 0.72); }
  .ach-demo { min-height: 40px; padding: 11px 14px; border-radius: 11px; font-size: 10px; }

  /* «Вся сетка»: the filter block is fixed, the wall sizes to content. */
  .ach-filter-card { flex: 0 0 auto; }
  .ach-filters { gap: 7px; }
  /* `flex-start` rather than `center`: the genre row wraps to two lines at this
     width and a vertically centred axis label then floats between them. */
  .ach-filter-axis { display: flex; align-items: flex-start; gap: 8px; }
  .ach-filter-label { margin-bottom: 0; width: 56px; flex: 0 0 56px; line-height: 32px; }
  .ach-filter-label.inline { line-height: 32px; }
  .ach-filter-row { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
  .ach-chip { min-height: 32px; }
  .ach-wall {
    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
    gap: 10px;
  }
  .ach-wall-case { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  .ach-grid-foot { flex: 0 0 auto; }

  /* «Витрина» and «Оповещения» size to content; the scene scrolls. */
  .ach-lay-case { gap: 12px; }
  .ach-lay-case .ach-wall { flex: 0 0 auto; }
  .ach-case-head { padding: 15px 16px; border-radius: 16px; gap: 11px; }
  .ach-case-head .ach-panel-title { font-size: 12px; }
  .ach-slot { width: 104px; padding: 9px; border-radius: 15px; --ach-b: 58px; }

  .ach-lay-alerts {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 13px;
  }
  .ach-col-scroll { gap: 9px; }
  .ach-lay-alerts > .ach-col-scroll:last-child { gap: 12px; }

  .ach-skeleton { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .ach-skel { height: 96px; }
  .ach-load-title { font-size: 12px; }

}

/* THE SHEET IS THE ONE BLOCK HERE THAT IS NOT A @container RULE, and it has to
   be. It mounts into `#modal-root`, a body child — there is no `scene`
   container above it, so a container query there matches nothing and the
   console kept the phone's full-width bottom sheet. It is also correct on the
   merits: a fixed overlay is sized by the viewport, not by the scene. 720px is
   the width above which a full-bleed bottom sheet becomes a letterbox. */
@media (min-width: 720px) {
  .ach-sheet-scrim {
    align-items: center;
    padding: 24px;
    background: rgba(6, 4, 12, 0.72);
  }
  .ach-sheet {
    width: min(460px, 100%);
    max-height: min(84dvh, 740px);
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.3);
    background: linear-gradient(150deg, rgba(30, 20, 52, 0.96), rgba(14, 10, 26, 0.96));
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.98);
    transition: transform 260ms var(--spring), opacity 200ms var(--ease-out);
  }
  .ach-sheet-scrim.in .ach-sheet { transform: none; opacity: 1; }
  .ach-sheet-body { padding: 0 22px 22px; }
  .ach-sheet-content { gap: 13px; }
  .ach-sheet-hero { gap: 16px; padding-top: 4px; }
  .ach-sheet-head { gap: 5px; }
  .ach-sheet-title { font-size: 18px; }
  .ach-sheet .ach-firstchip { padding: 3px 9px; font-size: 9px; }
  .ach-first-plate { padding: 14px 15px; border-radius: 14px; gap: 6px; }
  .ach-first-who { font-size: 20px; }
  .ach-first-when { font-size: 11px; }
  .ach-sheet-nums .cur { font-size: 14px; }
  .ach-sheet-prog { gap: 6px; }
  .ach-plate { padding: 13px 15px; }
  .ach-plate-txt { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ach-sheet-scrim,
  .ach-demo-scrim,
  .ach-sheet { transition-duration: 1ms; }
  .ach-skel,
  .ach-ticker-dot { animation: none; }
  .ach-grab::before { transition: none; }
  .ach-tile:has(.ach-open:hover) { transform: none; }
}