/* Base: reset, type roles, layout primitives, app shell.
   Type roles map 1:1 to the table in DESIGN.md -> Typography -> Type role map. A screen uses at
   most four roles above body size; more than four is noise, not hierarchy. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

/* One focus treatment for the whole product. Removing an outline without a replacement is a
   defect, so the replacement lives here and nothing else may override it. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-control);
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: var(--s-6); top: -100px; z-index: var(--z-tooltip);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--r-control); padding: var(--s-4) var(--s-6); box-shadow: var(--shadow-2);
}
.skip-link:focus { top: var(--s-4); }

/* ============================================================ TYPE ROLES */

.display { font-size: var(--t-4xl); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.h1 { font-size: var(--t-2xl); font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; text-wrap: balance; }
.h2 { font-size: var(--t-xl); font-weight: 600; line-height: 1.28; letter-spacing: -0.015em; text-wrap: balance; }
.h3 { font-size: var(--t-lg); font-weight: 600; line-height: 1.34; }
.h4 { font-size: var(--t-md); font-weight: 600; line-height: 1.4; }
.lede { font-size: var(--t-md); color: var(--ink-2); text-wrap: pretty; max-width: 62ch; }
.small { font-size: var(--t-xs); }
.meta { font-size: var(--t-2xs); color: var(--ink-3); }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.strong { font-weight: 600; }
.mono { font-family: var(--mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.prose { max-width: var(--prose); text-wrap: pretty; }
.prose p + p { margin-top: var(--s-5); }
.nowrap { white-space: nowrap; }

/* ============================================================ LAYOUT PRIMITIVES */

.stack > * + * { margin-top: var(--s-6); }
.stack-sm > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-9); }

.row { display: flex; align-items: center; gap: var(--s-4); }
.row-top { align-items: flex-start; }
.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.push { margin-inline-start: auto; }

.grid { display: grid; gap: var(--s-6); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--s-8); }
.band { width: 100%; max-width: var(--band-max); margin-inline: auto; padding-inline: var(--s-8); }
.hidden { display: none !important; }

/* ============================================================ APP SHELL */

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: var(--s-6);
  padding-inline: var(--s-7);
  background: var(--surface); border-bottom: 1px solid var(--line);
}

.brand-mark { display: flex; align-items: center; gap: var(--s-4); color: inherit; }
.brand-mark:hover { text-decoration: none; }
.brand-name { font-weight: 600; letter-spacing: -0.01em; }

.topnav { display: flex; align-items: center; gap: var(--s-2); }
.topnav a {
  color: var(--ink-2); font-size: var(--t-xs); font-weight: 500;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-control);
}
.topnav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.topnav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }

.body-area { flex: 1; display: flex; align-items: flex-start; min-height: 0; }
.main { flex: 1; min-width: 0; }
.main:focus { outline: none; }

.page { padding: var(--s-9) var(--s-8) var(--s-12); max-width: var(--content-max); margin-inline: auto; }
.page-head { margin-bottom: var(--s-9); }
.page-head .lede { margin-top: var(--s-4); }

/* Rail. Collapses to icons under 1100px and to a sheet under 760px: structural, not fluid. */
.rail {
  position: sticky; top: var(--topbar-h); flex: none;
  width: var(--rail-w); height: calc(100vh - var(--topbar-h));
  overflow-y: auto; padding: var(--s-6) var(--s-5);
  background: var(--surface-2); border-inline-end: 1px solid var(--line);
}
.rail[data-collapsed="true"] { width: var(--rail-w-collapsed); padding-inline: var(--s-3); }
.rail[data-collapsed="true"] .rail-title,
.rail[data-collapsed="true"] .nav-item span,
.rail[data-collapsed="true"] .nav-item .push { display: none; }
.rail[data-collapsed="true"] .nav-item { justify-content: center; }

.rail-group + .rail-group { margin-top: var(--s-8); }
.rail-title {
  font-size: var(--t-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3); padding: 0 var(--s-4) var(--s-4);
}

.nav-item {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-4); border-radius: var(--r-control);
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-2);
}
.nav-item:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.nav-item .icon { flex: none; }
.rail-collapse { width: 100%; margin-bottom: var(--s-6); color: var(--ink-3); }

.demo-bar {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-7); font-size: var(--t-2xs); color: var(--ink-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}

/* ============================================================ RESPONSIVE
   Four steps, each with a stated job. Typography never shrinks: if something does not fit, the
   layout changes, not the type scale. */

@media (max-width: 1180px) {
  .rail { width: var(--rail-w-collapsed); padding-inline: var(--s-3); }
  .rail .rail-title, .rail .nav-item span, .rail .nav-item .push { display: none; }
  .rail .nav-item { justify-content: center; }
}

@media (max-width: 1000px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .topbar { padding-inline: var(--s-5); gap: var(--s-4); }
  .topnav { display: none; }
  .page { padding: var(--s-7) var(--s-5) var(--s-11); }
  .g-2, .g-3, .g-4, .g-auto { grid-template-columns: minmax(0, 1fr); }

  /* The rail becomes a sheet: off-canvas, opened by the menu button, closed by its own control. */
  .rail {
    position: fixed; inset-block: var(--topbar-h) 0; inset-inline-start: 0;
    width: min(300px, 84vw); height: auto; z-index: var(--z-dropdown);
    transform: translateX(-102%); box-shadow: var(--shadow-3);
  }
  .rail[data-open="true"] { transform: none; }
  .rail .rail-title, .rail .nav-item span, .rail .nav-item .push { display: revert; }
  .rail .nav-item { justify-content: flex-start; }
  /* Touch targets never shrink below 44px, so the dense desktop padding is overridden here. */
  .nav-item { padding: var(--s-5) var(--s-4); min-height: 44px; }
}

@media (max-width: 560px) {
  .display { font-size: var(--t-3xl); }
}

/* The top bar is the one row that cannot wrap: on a phone the role menu's full name pushed it to
   538px and the whole page inherited a horizontal scroll. The avatar keeps the identity and the
   menu still names the person once it is open, so the label is what goes. */
@media (max-width: 760px) {
  .topbar .menu-wrap > .btn .nowrap { display: none; }
  .topbar .menu-wrap > .btn { padding-inline: var(--s-3); gap: var(--s-2); }
}

/* Under 560px the top bar carries: menu, seal, wordmark, search, three language codes, theme,
   notifications, identity. That is more than a phone width holds, and the overflow leaked into the
   document. The wordmark is what goes: the ASAN seal already identifies the service, and the title
   element carries the name for anyone who needs it announced. */
@media (max-width: 560px) {
  .topbar { gap: var(--s-3); padding-inline: var(--s-4); }
  .brand-name { display: none; }
  .lang-switch button { padding-inline: var(--s-3); }
}