/* ===========================================================================
   UNIT Product Guide — V2 (design experiment)

   A restrained, product-led shell for the existing guide content. The design
   language comes from PG1mockup.png: a quiet fixed sidebar, a typographic
   hero, and content that is allowed to be the only loud thing on the page.

   RULES THIS FILE KEEPS
   ---------------------
   1. No raw colour values outside the token blocks.
   2. One accent, used for state and navigation — never decoration.
   3. Structure from space and hairlines, not from boxes and shadows.
   4. System fonts only. No webfont, no network request, no layout shift.
   5. Every token is defined in the light block first, then overridden for
      dark, so no colour has its only definition inside a media query.
   =========================================================================== */

/* --- Tokens: light -------------------------------------------------------- */
:root {
  --bg:            #ffffff;
  --bg-rail:       #fbfbfd;
  --surface:       #f6f6f9;
  --surface-2:     #f1f0fe;   /* pale lavender — active nav, icon tiles, panel */
  --line:          #ececf1;
  --line-2:        #e0e0e8;
  --ink:           #17171c;
  --ink-2:         #55555f;
  --ink-3:         #8a8a96;
  --accent:        #6c4cf7;
  --accent-ink:    #5638e8;
  --accent-soft:   #ede9ff;
  --shadow:        0 1px 2px rgb(20 20 30 / .04), 0 12px 32px rgb(20 20 30 / .06);
  --focus:         var(--accent);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --rail-w: 268px;
  --r-sm: 6px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;

  color-scheme: light;
}

/* --- Tokens: dark --------------------------------------------------------- */
/* Not an inversion. Sophisticated neutrals with real separation between the
   page, the rail and raised surfaces — deliberately never pure black. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #101014;
    --bg-rail:     #0c0c10;
    --surface:     #1a1a21;
    --surface-2:   #1c1930;
    --line:        #26262f;
    --line-2:      #32323d;
    --ink:         #ececf1;
    --ink-2:       #a2a2b0;
    --ink-3:       #7c7c8a;
    --accent:      #8b74ff;
    --accent-ink:  #a794ff;
    --accent-soft: #1e1a35;
    --shadow:      0 1px 2px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:          #101014;
  --bg-rail:     #0c0c10;
  --surface:     #1a1a21;
  --surface-2:   #1c1930;
  --line:        #26262f;
  --line-2:      #32323d;
  --ink:         #ececf1;
  --ink-2:       #a2a2b0;
  --ink-3:       #7c7c8a;
  --accent:      #8b74ff;
  --accent-ink:  #a794ff;
  --accent-soft: #1e1a35;
  --shadow:      0 1px 2px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .35);
  color-scheme: dark;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

/* Hidden by clipping, NOT by `left: -9999px`.

   Parking an element far off the left edge is invisible in a left-to-right
   page, but under `direction: rtl` the document's overflow runs the other way
   and that same element extends the scrollable width by 9999px — the whole
   guide scrolled sideways in Arabic. Clipping has no direction. */
.skip {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 12px; inset-inline-start: 12px; z-index: 100;
  width: auto; height: auto; margin: 0; padding: .75rem 1rem;
  clip: auto; clip-path: none; overflow: visible;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r);
}

.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
        stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Visible to a screen reader, not to the eye. Used for the labels on controls
   whose meaning is carried by an icon or a placeholder. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --- Shell ---------------------------------------------------------------- */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }

/* --- Rail (sidebar) ------------------------------------------------------- */
.rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--bg-rail);
  border-right: 1px solid var(--line);
  padding: 18px 14px 14px;
}
.rail-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 0; margin-bottom: 22px;
}
/* The marketing lockup, in its light and dark variants. The file names describe
   the THEME they belong to: unit-lockup-light.svg has dark ink for a light
   background. The artwork is never filtered or recoloured. */
.rail-mark {
  display: block; width: 108px; height: 30px;
  background: url("unit-lockup-light.svg") no-repeat left center / contain;
}
:root[data-theme="dark"] .rail-mark { background-image: url("unit-lockup-dark.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rail-mark { background-image: url("unit-lockup-dark.svg"); }
}
.rail-brand .sub {
  font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding-left: 10px; border-left: 1px solid var(--line-2);
}

.rail-label {
  font: 700 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 22px 0 8px; padding: 0 8px;
}
.rail-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rail-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--r);
  color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: background 120ms, color 120ms;
}
.rail-nav a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.rail-nav a[aria-current] { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.rail-nav a[aria-current] .icon { color: var(--accent); }
.rail-nav .trail { margin-left: auto; color: var(--ink-3); }

/* Chapter context: the numbered chapter heading and its screen list. */
.rail-chapter {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 8px; margin: 22px 0 10px;
}
.rail-chapter .num { font: 400 11.5px/1 var(--mono); color: var(--accent); }
.rail-chapter .name { font-weight: 650; font-size: 14.5px; color: var(--ink); }
.rail-screens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.rail-screens a {
  display: block; padding: 7px 10px 7px 12px; border-radius: var(--r);
  border-left: 2px solid transparent;
  color: var(--ink-2); font-size: 13.5px; text-decoration: none;
}
.rail-screens a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.rail-screens a[aria-current] {
  background: var(--surface-2); color: var(--ink); font-weight: 600;
  border-left-color: var(--accent);
}

.rail-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }

/* --- Topbar --------------------------------------------------------------- */
/* A lower header brings the page title closer to the top without crowding it
   (PGv2 §8). Language, theme, UNIT App — no other navigation. */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 40px 6px; justify-content: flex-end;
}
/* On a documentation page search lives in the topbar, so it is reachable from
   every screen without sending the reader back to the homepage. */
.search--compact { margin-right: auto; width: min(320px, 42vw); }
.search--compact .search-field { height: 34px; padding: 0 10px; gap: 8px; border-radius: var(--r); }
.search--compact .search-field .icon { width: 16px; height: 16px; }
.search--compact input { font-size: 13.5px; }
.search--compact .kbd { padding: 3px 5px; font-size: 10.5px; }
.tb-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px;
  background: var(--bg); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r);
  font: 500 13px/1 var(--sans); cursor: pointer; text-decoration: none;
  transition: border-color 120ms, color 120ms;
}
.tb-btn:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.tb-menu { display: none; }

/* --- Theme control -------------------------------------------------------
   THE ESTABLISHED UNIT PATTERN, reused rather than reinvented (PGv2 §10).
   Both the V1 Product Guide and the marketing site render the same control: a
   32x32 bordered square holding a 15px half-filled circle, drawn in CSS rather
   than shipped as an icon file. V2's earlier sun/moon pair was invented and is
   gone.

   The button keeps its text ("Dark theme" / "Light theme") in the DOM — that is
   its accessible name, it is what the script updates, and it is what i18n
   translates. `font-size: 0` hides it visually without removing it. */
#theme-toggle {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer; flex-shrink: 0;
  font-size: 0; line-height: 0; color: transparent;
  transition: border-color 120ms;
}
#theme-toggle::before {
  content: "";
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: linear-gradient(90deg, var(--ink) 0 50%, transparent 50% 100%);
}
#theme-toggle:hover { border-color: var(--accent); }

/* --- Language selector ---------------------------------------------------
   V1's control, reused: a real <select>, which is keyboard-operable, works on
   every mobile platform without a custom popover, and is announced correctly
   by a screen reader. */
.lang-switch { display: inline-flex; }
.lang-switch select {
  font: 500 12px/1 var(--sans);
  height: 32px; padding: 0 24px 0 9px;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 14px, calc(100% - 9px) 14px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  transition: border-color 120ms, color 120ms;
}
.lang-switch select:hover { color: var(--ink); border-color: var(--accent); }

/* --- Page ----------------------------------------------------------------- */
.page { padding: 0 40px 64px; }
.wrap { max-width: 1140px; margin: 0 auto; }
/* A documentation page is one column of prose. Holding it to a narrower wrap
   keeps the measure honest without stranding it against a wide empty gutter. */
.wrap--doc { max-width: 880px; }

/* --- Home: hero ----------------------------------------------------------- */
/* One column. The right side is deliberately empty — see PGv2 §1: the floating
   Wallet card was too small to read and made the hero feel like a dashboard.
   Whitespace is the composition, not a gap waiting to be filled. */
.hero { max-width: 720px; }
.eyebrow {
  font: 700 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px;
}
.hero h1 {
  margin: 0 0 12px;
  font-size: clamp(38px, 5vw, 58px); line-height: 1.04; font-weight: 700; letter-spacing: -.03em;
}
.hero .lede { margin: 0 0 26px; font-size: 17px; color: var(--ink-2); max-width: 46ch; }

/* Search — a real control, not decoration. */
.search { position: relative; max-width: 680px; }
.search-field {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px; height: 56px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  transition: border-color 120ms, box-shadow 120ms;
}
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-field .icon { color: var(--ink-3); width: 19px; height: 19px; }
.search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: 400 15.5px/1 var(--sans); color: var(--ink);
}
.search input::placeholder { color: var(--ink-3); }
.kbd {
  font: 500 11.5px/1 var(--mono); color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 5px 7px; background: var(--surface); white-space: nowrap;
}
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.search-results[hidden] { display: none; }
.search-results a {
  display: block; padding: 9px 11px; border-radius: var(--r); color: var(--ink); text-decoration: none;
}
.search-results a:hover, .search-results a:focus-visible { background: var(--surface-2); text-decoration: none; }
.search-results .r-title { font-weight: 600; font-size: 14px; }
.search-results .r-meta { font-size: 12.5px; color: var(--ink-3); }
.search-results .r-none { padding: 12px; color: var(--ink-3); font-size: 14px; }

/* Popular actions — lightweight controls, not feature cards. */
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.actions-label { font-size: 13.5px; color: var(--ink-2); margin-right: 4px; }
.chipbtn {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: border-color 120ms, background 120ms;
}
.chipbtn:hover { border-color: var(--accent); background: var(--bg); text-decoration: none; }


/* --- Home: onboarding panel ---------------------------------------------- */
/* Restrained onboarding: shorter than before, still the pale lavender of the
   mockup, still not the loudest thing on the page (PGv2 §3). */
.onboard {
  display: flex; gap: 16px; align-items: center;
  background: var(--surface-2); border-radius: var(--r-lg);
  padding: 16px 20px; margin: 36px 0 0;
}
.onboard-mark {
  width: 44px; height: 44px; flex: none; border-radius: var(--r);
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  color: var(--accent); border: 1px solid var(--line);
}
.onboard-mark .icon { width: 21px; height: 21px; }
.onboard h2 { margin: 0 0 4px; font-size: 15.5px; font-weight: 650; color: var(--ink); }
.onboard p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); max-width: 62ch; }
.arrowlink { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 550; }
.arrowlink .icon { width: 16px; height: 16px; }

/* --- Home: explore grid --------------------------------------------------- */
.section-h { font-size: 15px; font-weight: 650; margin: 40px 0 16px; color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.tile {
  display: flex; gap: 16px; align-items: flex-start; height: 100%;
  padding: 20px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: border-color 120ms;
}
.tile:hover { border-color: var(--accent); text-decoration: none; }
.tile-mark {
  width: 46px; height: 46px; flex: none; border-radius: var(--r);
  background: var(--surface-2); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.tile-mark .icon { width: 21px; height: 21px; }
.tile-title { display: block; font-size: 15px; font-weight: 650; color: var(--ink); margin-bottom: 4px; }
.tile-desc { display: block; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
/* The one affordance a tile carries: a chevron that says "this goes somewhere".
   Faint until the tile is hovered or focused, so six of them never read as
   decoration (PGv2 §5). */
.tile-go { margin-left: auto; align-self: center; color: var(--ink-3); opacity: .45;
           transition: opacity 120ms, color 120ms; }
.tile:hover .tile-go, .tile:focus-visible .tile-go { opacity: 1; color: var(--accent); }
.tile-go .icon { width: 16px; height: 16px; }
[dir="rtl"] .tile-go { margin-left: 0; margin-right: auto; }
[dir="rtl"] .tile-go .icon { transform: scaleX(-1); }
.center-link { text-align: center; margin: 28px 0 0; }

/* --- All chapters --------------------------------------------------------- */
.ch-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ch-list li { border-bottom: 1px solid var(--line); }
.ch-list a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: baseline;
  padding: 18px 8px; color: inherit; text-decoration: none;
}
.ch-list a:hover { background: var(--surface); text-decoration: none; }
.ch-list .num { font: 400 12.5px/1.6 var(--mono); color: var(--ink-3); }
.ch-list .name { font-size: 15.5px; font-weight: 650; color: var(--ink); }
.ch-list .desc { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-2); margin-top: 3px; }

/* --- Content pages -------------------------------------------------------- */
.doc { max-width: 760px; }
.crumbs { font-size: 13px; color: var(--ink-3); margin: 4px 0 20px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.crumbs a { color: var(--ink-2); }

.doc h1 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -.025em;
          font-weight: 700; margin: 0 0 28px; }
.doc h2 { font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em;
          margin: 44px 0 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h3 { font-size: 16px; font-weight: 650; margin: 30px 0 10px; }
.doc p { margin: 0 0 16px; color: var(--ink-2); max-width: 72ch; }
.doc strong { color: var(--ink); font-weight: 650; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; color: var(--ink-2); max-width: 72ch; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--ink-3); }
.doc dl { margin: 0 0 16px; max-width: 72ch; }
.doc dt { font-weight: 650; color: var(--ink); margin-top: 18px; }
.doc dd { margin: 5px 0 0; color: var(--ink-2); }
.doc code { font: 400 13.5px/1.5 var(--mono); background: var(--surface); padding: 2px 5px;
            border-radius: var(--r-sm); }

/* Callouts — a hairline and a label, never a shouty box. */
.doc .note {
  border-left: 2px solid var(--accent); background: var(--surface-2);
  padding: 16px 18px; border-radius: 0 var(--r) var(--r) 0; margin: 0 0 22px; max-width: 72ch;
}
.doc .note p { color: var(--ink-2); }
.doc .note p:last-child { margin-bottom: 0; }
.doc .note-label {
  display: block; font: 700 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 9px;
}
.doc .note--quiet { border-left-color: var(--line-2); background: var(--surface); }
.doc .note--quiet .note-label { color: var(--ink-3); }
.doc .note--open { border-left-color: var(--accent); background: var(--surface-2); }

/* Screenshots — framed, never filtered. Click opens the file. */
.doc .shot { margin: 0 0 28px; }
.doc .shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg);
  box-shadow: var(--shadow);
}
.doc .shot figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.doc .shot-title { display: block; color: var(--ink-2); }
.doc .shot-meta, .doc .shot-warn { display: block; }
.doc .shot-warn { color: var(--accent-ink); }

/* Tables scroll inside their own container; the page never scrolls sideways. */
.doc .table-scroll { overflow-x: auto; margin: 0 0 22px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; }
.doc caption { text-align: left; font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0;
                   border-bottom: 1px solid var(--line); }
.doc th { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
          font-weight: 700; }
.doc td { color: var(--ink-2); }

/* Previous / next */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 52px;
         padding-top: 24px; border-top: 1px solid var(--line); }
.pager a {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit; transition: border-color 120ms;
}
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager .next { text-align: right; }
.pager .dir { font: 700 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pager .name { font-size: 14.5px; font-weight: 600; color: var(--ink); }

/* --- Footer --------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--line); margin-top: 56px; padding: 22px 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  font-size: 13px; color: var(--ink-3);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 22px; }
.foot a { color: var(--ink-2); }
.foot .tail { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.foot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --rail-w: 232px; }
  .page, .topbar, .foot { padding-left: 26px; padding-right: 26px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  /* The rail becomes a drawer. Off-canvas, not merely narrower. */
  .rail {
    position: fixed; inset: 0 auto 0 0; width: min(310px, 86vw); z-index: 60;
    transform: translateX(-102%); transition: transform 180ms ease;
    box-shadow: var(--shadow);
  }
  .rail.is-open { transform: none; }

  /* A compact header, not a squeezed desktop one.
     `justify-content: flex-end` overflows to the LEFT when the row runs out of
     room, which pushed the menu button off-screen entirely — visible to a
     test, unreachable to a thumb. Start-aligned, search takes the slack, and
     the buttons that only carry a label lose it and keep their icon. */
  .topbar { padding: 12px 20px; justify-content: flex-start; gap: 8px; }
  .tb-menu { display: inline-flex; }
  .tb-btn { padding: 0 10px; }
  .tb-menu span, .tb-app span, #theme-toggle .tb-label { display: none; }
  .search--compact { flex: 1; width: auto; min-width: 0; margin-right: 0; }
  .tb-ver { display: none; }
  .page, .foot { padding-left: 20px; padding-right: 20px; }
  .scrim { position: fixed; inset: 0; background: rgb(10 10 14 / .44); z-index: 50; }
  .scrim[hidden] { display: none; }
}
@media (max-width: 620px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .onboard { flex-direction: column; gap: 14px; padding: 18px; }
  .search-field { height: 50px; }
  .kbd { display: none; }              /* no keyboard to shortcut from */
  .ch-list a { grid-template-columns: 34px minmax(0, 1fr); }
  .foot .tail { margin-left: 0; }
  .doc h2 { margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Print: the content, nothing else. */
@media print {
  .rail, .topbar, .foot, .pager, .skip, .scrim { display: none; }
  .shell { display: block; }
  .page { padding: 0; }
  .doc { max-width: none; }
}

/* --- Right-to-left --------------------------------------------------------
   Arabic is one of the six locales V1 supports, so V2 has to hold up in it.
   The shell is a grid, so the rail swaps side on its own; these rules fix the
   pieces that are directional by hand. Verified with Playwright, not assumed. */
[dir="rtl"] body { direction: rtl; }
/* NO column reordering here. A grid's inline axis already reverses under
   `direction: rtl`, so the rail — the first child, in column one — moves to the
   right on its own. Overriding grid-template-columns AND setting `order`
   double-flipped it: the rail stayed on the left and the page overflowed. Only
   the border needs swapping, because that is a physical edge. */
[dir="rtl"] .rail { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .rail-brand .sub { padding-left: 0; padding-right: 10px;
                               border-left: 0; border-right: 1px solid var(--line-2); }
[dir="rtl"] .rail-screens a { border-left: 0; border-right: 2px solid transparent; padding: 7px 12px 7px 10px; }
[dir="rtl"] .rail-screens a[aria-current] { border-right-color: var(--accent); }
[dir="rtl"] .rail-nav .trail { margin-left: 0; margin-right: auto; }
[dir="rtl"] .rail-mark { background-position: right center; }
[dir="rtl"] .crumbs ol { padding: 0; }
[dir="rtl"] .doc ul, [dir="rtl"] .doc ol { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .doc .note { border-left: 0; border-right: 2px solid var(--accent);
                         border-radius: var(--r) 0 0 var(--r); }
[dir="rtl"] .doc .note--quiet { border-right-color: var(--line-2); }
[dir="rtl"] .doc th, [dir="rtl"] .doc td { text-align: right; padding: 10px 0 10px 14px; }
[dir="rtl"] .pager .next { text-align: left; }
[dir="rtl"] .foot .tail { margin-left: 0; margin-right: auto; }
[dir="rtl"] .search--compact { margin-right: 0; margin-left: auto; }
/* Arrow glyphs point the other way when the reading direction does. */
[dir="rtl"] .arrowlink .icon, [dir="rtl"] .rail-nav .trail .icon { transform: scaleX(-1); }
[dir="rtl"] code, [dir="rtl"] pre { direction: ltr; unicode-bidi: embed; text-align: left; }

@media (max-width: 860px) {
  [dir="rtl"] .shell { grid-template-columns: minmax(0, 1fr); }
  [dir="rtl"] .rail { inset: 0 0 0 auto; transform: translateX(102%); }
  [dir="rtl"] .rail.is-open { transform: none; }
}