/* ============================================================================
   AZRA DOCS — SHELL
   Part 2 of 3. The documentation chrome: reading-progress hairline, top bar,
   three-pane grid (navigation rail · article · on-this-page rail), mobile
   drawer, Ctrl/⌘+K command palette, pager and footer.

   Every class is new and prefixed adz-; the old docs layout is not referenced.
   Depends on adz-tokens.css only.
   ========================================================================== */

/* ── Reading progress ─────────────────────────────────────────────────────── */
.adz-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--adz-z-progress);
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.adz-progress > i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--adz-grad-brand);
  box-shadow: 0 0 12px rgba(220, 38, 38, .55);
  transition: width .1s linear;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.adz-top {
  position: sticky;
  top: 0;
  z-index: var(--adz-z-top);
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--adz-top-h);
  padding: 0 var(--adz-gutter);
  border-bottom: 1px solid var(--adz-line);
  background: var(--adz-glass);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.adz-top__start,
.adz-top__end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adz-top__start { flex: 1 1 auto; }
.adz-top__end { flex: none; }

.adz-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--adz-ink);
  font-family: var(--adz-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}
.adz-brand img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--adz-line-2);
}
.adz-brand b { font-weight: 700; }
.adz-brand span { color: var(--adz-ink-3); font-weight: 600; font-size: .82rem; }

.adz-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--adz-line);
  font-size: var(--adz-fs-xs);
  color: var(--adz-ink-3);
  white-space: nowrap;
  overflow: hidden;
}
.adz-crumb a { color: var(--adz-ink-3); }
.adz-crumb a:hover { color: var(--adz-pistachio); }
.adz-crumb > :last-child { color: var(--adz-ink-2); font-weight: 600; }
.adz-crumb__sep { opacity: .5; }
.adz-crumb--ellipsis > :not(:last-child):not(:nth-child(1)) { display: none; }

/* Search trigger — looks like a field, behaves like a button */
.adz-searchbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 190px;
  height: 34px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-ink-3);
  font-size: var(--adz-fs-sm);
  transition: border-color var(--adz-dur-2) var(--adz-ease),
              background var(--adz-dur-2) var(--adz-ease);
}
.adz-searchbtn:hover { border-color: var(--adz-line-3); background: var(--adz-fill-2); color: var(--adz-ink-2); }
.adz-searchbtn__label { flex: 1 1 auto; text-align: left; }
.adz-searchbtn .adz-ico { font-size: 15px; }

/* Icon button (drawer toggle, theme) */
.adz-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-ink-2);
  transition: color var(--adz-dur-1) var(--adz-ease), border-color var(--adz-dur-1) var(--adz-ease),
              background var(--adz-dur-1) var(--adz-ease), transform var(--adz-dur-1) var(--adz-ease);
}
.adz-iconbtn:hover { color: var(--adz-ink); border-color: var(--adz-line-3); background: var(--adz-fill-2); }
.adz-iconbtn:active { transform: scale(.92); }
.adz-iconbtn .adz-ico { font-size: 17px; }
.adz-top__menu { display: none; }

/* Theme toggle: exactly one glyph is rendered, chosen by the live theme — the
   moon while the site is dark, the sun while it is light. `display: contents`
   lets the wrapper span collapse so only the icon shows, and that is exactly
   why these rules are spelled out in full: a bare `.adz-theme__light` is
   (0,1,0) and loses to `.adz-iconbtn > span` (0,1,1), which painted the sun
   beside the moon in dark mode. */
.adz-iconbtn > span { display: contents; }
.adz-iconbtn > span.adz-theme__light { display: none; }
[data-theme="light"] .adz-iconbtn > span.adz-theme__dark { display: none; }
[data-theme="light"] .adz-iconbtn > span.adz-theme__light { display: contents; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.adz-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-ink);
  font-size: var(--adz-fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--adz-dur-1) var(--adz-ease), border-color var(--adz-dur-1) var(--adz-ease),
              background var(--adz-dur-1) var(--adz-ease), box-shadow var(--adz-dur-1) var(--adz-ease);
}
.adz-btn:hover { border-color: var(--adz-line-3); background: var(--adz-fill-2); color: var(--adz-ink); }
.adz-btn:active { transform: translateY(1px); }
.adz-btn--primary {
  border-color: transparent;
  background: var(--adz-grad-crimson);
  color: #fff;
  box-shadow: 0 12px 26px -16px rgba(220, 38, 38, .9);
}
.adz-btn--primary:hover { color: #fff; box-shadow: var(--adz-glow-brand); }
.adz-btn--ghost {
  background: transparent;
  border-color: var(--adz-line-2);
  color: var(--adz-ink-2);
}
.adz-btn--ghost:hover { color: var(--adz-ink); border-color: var(--adz-line-3); background: var(--adz-fill); }
.adz-btn--soft {
  border-color: var(--adz-line-success);
  background: var(--adz-success-soft);
  color: var(--adz-pistachio-200);
}
.adz-btn--soft:hover { color: var(--adz-ink); }
.adz-btn--lg { height: 42px; padding: 0 20px; font-size: .92rem; }
.adz-btn--sm { height: 30px; padding: 0 11px; font-size: var(--adz-fs-xs); }
.adz-btn .adz-ico { font-size: 16px; }

/* ── Three-pane shell ─────────────────────────────────────────────────────── */
.adz-shell {
  display: grid;
  grid-template-columns: var(--adz-rail-w) minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

/* ── Navigation rail ──────────────────────────────────────────────────────── */
.adz-rail {
  position: sticky;
  top: var(--adz-top-h);
  align-self: start;
  height: calc(100vh - var(--adz-top-h));
  border-right: 1px solid var(--adz-line);
  background: var(--adz-rail-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.adz-rail__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 16px 12px 20px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.adz-rail__filter { position: relative; flex: none; }
.adz-rail__filter .adz-ico {
  position: absolute;
  top: 50%;
  left: 11px;
  font-size: 14px;
  color: var(--adz-ink-4);
  transform: translateY(-50%);
  pointer-events: none;
}
.adz-rail__filter input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-sm);
  background: var(--adz-fill);
  color: var(--adz-ink);
  font-size: var(--adz-fs-sm);
}
.adz-rail__filter input::placeholder { color: var(--adz-ink-4); }
.adz-rail__filter input:focus { border-color: var(--adz-line-3); outline: none; background: var(--adz-fill-2); }

.adz-nav { display: flex; flex-direction: column; gap: 4px; }

.adz-nav__group { border-radius: var(--adz-r-sm); }
.adz-nav__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--adz-r-sm);
  color: var(--adz-ink-3);
  font-family: var(--adz-font-display);
  font-size: var(--adz-fs-xs);
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
  transition: color var(--adz-dur-1) var(--adz-ease), background var(--adz-dur-1) var(--adz-ease),
              transform var(--adz-dur-1) var(--adz-ease);
}
.adz-nav__toggle:hover { color: var(--adz-ink-2); background: var(--adz-fill); }
.adz-nav__toggle:active { transform: scale(.985); }
.adz-nav__toggle .adz-ico { font-size: 13px; opacity: .75; }
.adz-nav__chev {
  margin-left: auto;
  font-size: 13px !important;
  transition: transform var(--adz-dur-2) var(--adz-ease);
}
.adz-nav__group[data-open="false"] .adz-nav__chev { transform: rotate(-90deg); }
/* The list's visibility is the markup's `hidden` attribute — flipped and
   animated by the shell script. A CSS display rule here would fight the
   animation and leave the two out of step. */

.adz-nav__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.adz-nav__item > a {
  flex: 1 1 auto;
  min-width: 0;
}
.adz-nav__item > a > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adz-nav__sub { flex: 0 0 100%; }
.adz-nav__item[hidden] { display: none; }
.adz-nav__group[hidden] { display: none; }

.adz-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 8px;
  margin-left: 6px;
  border-left: 1px solid var(--adz-line);
}
/* `display: flex` above out-specifies the UA's `[hidden]` rule, so a closed
   group needs its own line here or it would ship visible. */
.adz-nav__list[hidden] { display: none; }
.adz-nav__item > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  border-radius: 0 var(--adz-r-sm) var(--adz-r-sm) 0;
  color: var(--adz-ink-2);
  font-size: var(--adz-fs-sm);
  line-height: 1.45;
  transition: color var(--adz-dur-1) var(--adz-ease), background var(--adz-dur-1) var(--adz-ease);
}
.adz-nav__item > a:hover { color: var(--adz-ink); background: var(--adz-fill); }
.adz-nav__item > a.is-current {
  color: var(--adz-ink);
  font-weight: 600;
  background: linear-gradient(90deg, var(--adz-brand-soft), transparent 78%);
  box-shadow: inset 2px 0 0 var(--adz-crimson);
}
.adz-nav__item > a.is-current .adz-ico { color: var(--adz-crimson-300); }
.adz-nav__item .adz-ico { font-size: 15px; color: var(--adz-ink-4); }

.adz-nav__sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 14px; }
.adz-nav__sub[hidden] { display: none; }
.adz-nav__sub a {
  padding: 4px 8px;
  border-radius: var(--adz-r-xs);
  color: var(--adz-ink-3);
  font-size: var(--adz-fs-xs);
  line-height: 1.5;
  transition: color var(--adz-dur-1) var(--adz-ease), background var(--adz-dur-1) var(--adz-ease);
}
.adz-nav__sub a:hover { color: var(--adz-ink-2); background: var(--adz-fill); }
.adz-nav__sub a:active { background: var(--adz-fill-2); }
.adz-nav__sub a.is-current { color: var(--adz-pistachio); font-weight: 600; }
/* Links arrive just behind their list, a few milliseconds apart, so an opened
   section reads as one gesture. Transform only: if a renderer never ticks, the
   worst case is a 3px offset, never an invisible row. */
@keyframes adz-sub-link-in {
  from { transform: translateY(-3px); }
  to   { transform: none; }
}
.adz-nav__sub a { animation: adz-sub-link-in var(--adz-dur-2) var(--adz-ease) both; }
.adz-nav__sub a:nth-child(2) { animation-delay: 18ms; }
.adz-nav__sub a:nth-child(3) { animation-delay: 36ms; }
.adz-nav__sub a:nth-child(4) { animation-delay: 54ms; }
.adz-nav__sub a:nth-child(n+5) { animation-delay: 72ms; }

.adz-nav__exp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: var(--adz-r-xs);
  color: var(--adz-ink-4);
  transition: color var(--adz-dur-1) var(--adz-ease), background var(--adz-dur-1) var(--adz-ease),
              transform var(--adz-dur-1) var(--adz-ease);
}
.adz-nav__exp:hover { color: var(--adz-ink); background: var(--adz-fill-2); }
.adz-nav__exp:active { transform: scale(.86); }
.adz-nav__exp .adz-ico { font-size: 14px; transition: transform var(--adz-dur-2) var(--adz-ease); }
.adz-nav__item[data-sub="open"] .adz-nav__exp .adz-ico { transform: rotate(90deg); }

.adz-nav__empty {
  display: none;
  padding: 14px 10px;
  color: var(--adz-ink-4);
  font-size: var(--adz-fs-sm);
}
.adz-nav.is-empty .adz-nav__empty { display: block; }

/* ── Keyboard focus + press feedback ──────────────────────────────────────────
   The global ring (adz-tokens) is pistachio; the shell's chrome wears crimson —
   the rail's action colour — and, unlike the global rule, this one survives
   `input:focus { outline: none }` above, which used to leave the nav filter
   with no ring at all. Keyboard-only either way. */
.adz-nav a:focus-visible,
.adz-nav__toggle:focus-visible,
.adz-nav__exp:focus-visible,
.adz-rail__foot a:focus-visible,
.adz-rail__filter input:focus-visible,
.adz-iconbtn:focus-visible,
.adz-searchbtn:focus-visible,
.adz-btn:focus-visible {
  outline: 2px solid var(--adz-crimson);
  outline-offset: 2px;
}
.adz-nav__item > a:active { background: var(--adz-fill-2); }

.adz-rail__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--adz-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adz-rail__foot a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--adz-r-sm);
  color: var(--adz-ink-3);
  font-size: var(--adz-fs-xs);
}
.adz-rail__foot a:hover { color: var(--adz-ink-2); background: var(--adz-fill); }
.adz-rail__foot .adz-ico { font-size: 14px; }

/* ── Article column ───────────────────────────────────────────────────────── */
.adz-main {
  min-width: 0;
  padding: 0 var(--adz-gutter) 0;
}
.adz-article {
  max-width: var(--adz-article-max);
  padding: 34px 0 8px;
}

.adz-pagehead { position: relative; margin-bottom: 30px; }
.adz-pagehead__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px 4px 8px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-pistachio);
  font-family: var(--adz-font-display);
  font-size: var(--adz-fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.adz-pagehead__eyebrow .adz-ico { font-size: 14px; }
.adz-pagehead h1 {
  margin: 14px 0 0;
  font-size: var(--adz-fs-h1);
  background: var(--adz-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.adz-pagehead__lead {
  max-width: 66ch;
  margin-top: 12px;
  color: var(--adz-ink-2);
  font-size: var(--adz-fs-lead);
  line-height: 1.66;
}
.adz-pagehead__lead a { text-decoration: underline; text-decoration-color: var(--adz-line-success); }
.adz-pagehead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.adz-chipmeta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-ink-3);
  font-size: var(--adz-fs-xs);
}
.adz-chipmeta .adz-ico { font-size: 13px; }
.adz-pagehead__meta .adz-btn { height: 30px; padding: 0 12px; font-size: var(--adz-fs-xs); }

/* ── On-this-page rail ────────────────────────────────────────────────────── */
.adz-toc {
  position: sticky;
  top: var(--adz-top-h);
  align-self: start;
  height: calc(100vh - var(--adz-top-h));
  padding: 34px 16px 28px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.adz-toc__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding-left: 12px;
  color: var(--adz-ink-3);
  font-family: var(--adz-font-display);
  font-size: var(--adz-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.adz-toc__title .adz-ico { font-size: 13px; }
.adz-toc__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 1px solid var(--adz-line);
}
.adz-toc__list a {
  padding: 5px 10px 5px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--adz-ink-3);
  font-size: var(--adz-fs-xs);
  line-height: 1.5;
  transition: color var(--adz-dur-1) var(--adz-ease), border-color var(--adz-dur-1) var(--adz-ease);
}
.adz-toc__list a:hover { color: var(--adz-ink-2); }
.adz-toc__list a.is-current {
  border-left-color: var(--adz-crimson);
  color: var(--adz-ink);
  font-weight: 600;
}
.adz-toc__list a[data-level="2"] { font-weight: 600; color: var(--adz-ink-2); }
.adz-toc__list a[data-level="3"] { padding-left: 24px; }
.adz-toc__list a[data-level="4"] { padding-left: 34px; font-size: 11.5px; }
.adz-toc__top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 6px 11px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  color: var(--adz-ink-3);
  font-size: var(--adz-fs-xs);
}
.adz-toc__top:hover { color: var(--adz-ink); border-color: var(--adz-line-3); }
.adz-toc__top .adz-ico { font-size: 13px; }

/* Inline TOC (small screens) */
.adz-toc-inline {
  margin: 0 0 26px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-fill);
  overflow: hidden;
}
.adz-toc-inline > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  color: var(--adz-ink);
  font-weight: 600;
  font-size: var(--adz-fs-sm);
  cursor: pointer;
  list-style: none;
}
.adz-toc-inline > summary::-webkit-details-marker { display: none; }
.adz-toc-inline > summary .adz-ico { font-size: 15px; color: var(--adz-pistachio); }
.adz-toc-inline > summary .adz-nav__chev { margin-left: auto; }
.adz-toc-inline[open] > summary { border-bottom: 1px solid var(--adz-line); }
.adz-toc-inline__list { display: flex; flex-direction: column; padding: 6px 0 8px; }
.adz-toc-inline__list a {
  padding: 6px 16px;
  color: var(--adz-ink-2);
  font-size: var(--adz-fs-sm);
}
/* The scroll spy marks the current section in BOTH lists; without a rule for
   the inline (small-screen) variant the highlight only ever appeared on
   desktop. */
.adz-toc-inline__list a.is-current {
  color: var(--adz-ink);
  font-weight: 600;
  background: linear-gradient(90deg, var(--adz-brand-soft), transparent 80%);
  box-shadow: inset 2px 0 0 var(--adz-crimson);
}
.adz-toc-inline__list a[data-level="3"] { padding-left: 30px; font-size: var(--adz-fs-xs); }
.adz-toc-inline__list a[data-level="4"] { padding-left: 42px; font-size: var(--adz-fs-xs); }

/* ── Prev / next pager ────────────────────────────────────────────────────── */
.adz-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: var(--adz-article-max);
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--adz-line);
}
.adz-pager__link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-fill);
  transition: border-color var(--adz-dur-2) var(--adz-ease), background var(--adz-dur-2) var(--adz-ease),
              transform var(--adz-dur-2) var(--adz-ease);
}
.adz-pager__link:hover {
  border-color: var(--adz-line-3);
  background: var(--adz-fill-2);
  transform: translateY(-2px);
}
.adz-pager__link--next { text-align: right; align-items: flex-end; }
.adz-pager__link--prev { text-align: left; align-items: flex-start; }
.adz-pager__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--adz-ink-4);
  font-size: var(--adz-fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.adz-pager__label .adz-ico { font-size: 13px; }
.adz-pager__name { color: var(--adz-ink); font-family: var(--adz-font-display); font-weight: 600; font-size: .95rem; }
.adz-pager__spacer { display: block; }
.adz-pager--r1 { grid-template-columns: minmax(0, 1fr); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.adz-foot {
  max-width: var(--adz-article-max);
  margin-top: 34px;
  padding: 22px 0 40px;
  border-top: 1px solid var(--adz-line);
  color: var(--adz-ink-4);
  font-size: var(--adz-fs-xs);
}
.adz-foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.adz-foot a { color: var(--adz-ink-3); }
.adz-foot a:hover { color: var(--adz-pistachio); }
.adz-foot__note { margin-top: 10px; max-width: 70ch; line-height: 1.7; }

/* ── Mobile drawer + backdrop ─────────────────────────────────────────────── */
.adz-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--adz-z-backdrop);
  border: 0;
  padding: 0;
  background: var(--adz-scrim);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--adz-dur-2) var(--adz-ease);
}
.adz-backdrop.is-open { opacity: 1; pointer-events: auto; }
body.adz-lock { overflow: hidden; }

/* ── Command palette (Ctrl / ⌘ + K) ───────────────────────────────────────── */
.adz-palette {
  position: fixed;
  inset: 0;
  z-index: var(--adz-z-palette);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 9vh 16px 16px;
  background: var(--adz-scrim-soft);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--adz-dur-2) var(--adz-ease);
}
.adz-palette[hidden] { display: none; }
.adz-palette.is-open { opacity: 1; pointer-events: auto; }
.adz-palette__panel {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: 74vh;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-lg);
  background: var(--adz-base);
  box-shadow: var(--adz-shadow-3);
  overflow: hidden;
  transform: translateY(-10px) scale(.99);
  transition: transform var(--adz-dur-2) var(--adz-ease);
}
.adz-palette.is-open .adz-palette__panel { transform: none; }
.adz-palette__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--adz-line);
}
.adz-palette__field .adz-ico { font-size: 17px; color: var(--adz-ink-3); }
.adz-palette__field input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: none;
  color: var(--adz-ink);
  font-size: .98rem;
}
.adz-palette__field input::placeholder { color: var(--adz-ink-4); }
.adz-palette__results {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
}
.adz-palette__res {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--adz-r-sm);
  cursor: pointer;
}
.adz-palette__res .adz-ico { font-size: 16px; color: var(--adz-ink-4); }
.adz-palette__res.is-active,
.adz-palette__res:hover { background: var(--adz-fill-2); }
.adz-palette__res.is-active .adz-ico { color: var(--adz-crimson-300); }
.adz-palette__resbody { min-width: 0; }
.adz-palette__restitle { color: var(--adz-ink); font-weight: 600; font-size: var(--adz-fs-sm); }
.adz-palette__restitle mark { background: var(--adz-success-soft); color: var(--adz-ink); border-radius: 3px; }
.adz-palette__resdesc {
  color: var(--adz-ink-3);
  font-size: var(--adz-fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adz-palette__reswhere {
  margin-left: auto;
  flex: none;
  color: var(--adz-ink-4);
  font-size: var(--adz-fs-xs);
}
.adz-palette__empty { padding: 26px 14px; color: var(--adz-ink-3); text-align: center; font-size: var(--adz-fs-sm); }
.adz-palette__hints {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-top: 1px solid var(--adz-line);
  color: var(--adz-ink-4);
  font-size: var(--adz-fs-xs);
}
.adz-palette__hints span { display: inline-flex; align-items: center; gap: 5px; }

/* Drawer-only close button in the rail header */
.adz-rail__head { display: none; }

/* ============================================================================
   RESPONSIVE
   Desktop ≥1240 · Tablet 1024–1239 · Drawer ≤1023 · Compact ≤640
   ========================================================================== */

@media (min-width: 1240px) {
  .adz-shell {
    grid-template-columns: var(--adz-rail-w) minmax(0, 1fr) var(--adz-toc-w);
  }
  .adz-toc { display: block; }
  .adz-toc-inline { display: none; }
}

@media (min-width: 1024px) and (max-width: 1239px) {
  .adz-shell { grid-template-columns: var(--adz-rail-w) minmax(0, 1fr); }
  .adz-toc { display: none; }
}

@media (max-width: 1023px) {
  .adz-shell { grid-template-columns: minmax(0, 1fr); }

  .adz-top__menu { display: inline-flex; }
  .adz-crumb { display: none; }

  .adz-rail {
    position: fixed;
    top: var(--adz-top-h);
    left: 0;
    z-index: var(--adz-z-drawer);
    width: min(88vw, 330px);
    height: calc(100dvh - var(--adz-top-h));
    border-right: 1px solid var(--adz-line-2);
    background: var(--adz-base);
    box-shadow: var(--adz-shadow-3);
    transform: translateX(-102%);
    visibility: hidden;
    will-change: transform;
    /* visibility flips only after the slide has finished, so the closing drawer
       is not cut mid-flight — and a closed drawer leaves the tab order. */
    transition: transform var(--adz-dur-2) var(--adz-ease), visibility 0s linear var(--adz-dur-2);
  }
  .adz-rail.is-open { transform: none; visibility: visible; transition: transform var(--adz-dur-2) var(--adz-ease); }

  .adz-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--adz-line);
  }
  .adz-rail__head strong {
    font-family: var(--adz-font-display);
    font-size: var(--adz-fs-sm);
    color: var(--adz-ink);
  }

  .adz-toc { display: none; }
  .adz-article { padding-top: 26px; }

  .adz-pager { grid-template-columns: minmax(0, 1fr); }
  .adz-pager__link--next { text-align: left; align-items: flex-start; }
}

@media (max-width: 820px) {
  .adz-searchbtn { min-width: 0; }
  .adz-searchbtn__label { display: none; }
  .adz-searchbtn kbd { display: none; }
}

@media (max-width: 640px) {
  :root { --adz-top-h: 54px; }
  .adz-brand span { display: none; }
  .adz-top__cta--plans { display: none; }
  .adz-pagehead__meta { gap: 6px; }
  .adz-foot { padding-bottom: 30px; }
}

@media (max-width: 420px) {
  .adz-top__cta--dash span { display: none; }
}