/* Actiphy Help Design — the whole stylesheet for help-template.
   A page loads tokens.css, then this file. Nothing else: no Bootstrap, no Font Awesome.
   The Bootstrap and Font Awesome classes that existing content uses are styled by the
   legacy content bindings below, so content needs no changes.
   Mobile first. Breakpoints: 768 (md) · 992 (lg: sidebar, header nav) · 1200 (xl: On this page column).
   Sections: base and reset · chrome (header, nav, drawer, toc, footer) · article prose · legacy content bindings ·
   components for new content · page types (portal, landing, search, 404, updater) · print. */

/* ---------- Icons used by CSS (Lucide-style, 24px grid, 1.75 stroke) ---------- */
:root {
  --ah-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --ah-i-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  --ah-i-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.5a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17h.01'/%3E%3C/svg%3E");
  --ah-i-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 2.5h7.6l5.7 5.7v7.6l-5.7 5.7H8.2l-5.7-5.7V8.2z'/%3E%3Cpath d='M12 8v5M12 16.5h.01'/%3E%3C/svg%3E");
  --ah-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --ah-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ah-i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --ah-i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2zM22 5h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
  --ah-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.5 3.2 8.3 7.5 9.5 4.3-1.2 7.5-5 7.5-9.5V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
html {
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-4)); /* the only offset for in-page targets: headings land just below the sticky header */
  scroll-behavior: smooth; /* in-page links (On this page, footnotes) glide to their target; instant under reduced motion */
}
@media (min-width: 992px) { html { scroll-padding-top: calc(var(--header-height-lg) + var(--space-6)); } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit; /* the lang rules below set the family on html */
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Page shell (body.ah-shell from ah/page-start.html): on a short page the footer sits at the bottom of the window. */
.ah-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.ah-shell > .ah-layout, .ah-shell > main { width: 100%; flex: 1 0 auto; } /* full width as flex items; they also fill the window's height, so the sidebar reaches the footer on a short page */
.ah-shell > .ah-footer { margin-top: auto; }

/* Reset: the few browser defaults this design relies on being neutral (replaces Bootstrap reboot). */
[hidden] { display: none !important; }
img, svg, video, canvas { vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
button, [role="button"], summary { cursor: pointer; }
button:disabled { cursor: not-allowed; }
table { border-collapse: collapse; }
pre, code, kbd, samp { font-family: var(--font-mono); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
::selection { background: var(--brand-soft); color: var(--ink); }

/* Language: html lang picks the family and line breaking. help-template collection labels map to
   ja-JP, zh-CN, zh-HK, zh-TW, ko-KR, de-DE, fr-FR, it-IT, en-US (underscore becomes hyphen). */
[lang|="ja"] { font-family: var(--font-sans-ja); line-break: strict; }
[lang="zh-CN"], [lang="zh-Hans"], [lang="zh-SG"] { font-family: var(--font-sans-zh-hans); line-break: strict; }
[lang="zh-TW"], [lang="zh-Hant"] { font-family: var(--font-sans-zh-hant); line-break: strict; }
[lang="zh-HK"], [lang="zh-Hant-HK"] { font-family: var(--font-sans-zh-hk); line-break: strict; }
[lang|="ko"] { font-family: var(--font-sans-ko); word-break: keep-all; }
[lang|="de"] .ah-article p, [lang|="de"] .ah-article li, [lang|="de"] .ah-article dd { hyphens: auto; -webkit-hyphens: auto; }

a { color: var(--brand); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 120ms ease-out; }
a:hover { color: var(--brand-strong); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
a:focus-visible { border-radius: 2px; }
mark, .ah-mark, .search-highlight { background: var(--mark); color: var(--ink); border-radius: 2px; padding: 0 1px; }

.ah-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ah-icon--sm { width: 16px; height: 16px; }
.ah-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ah-skip { position: absolute; left: var(--space-3); top: -60px; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--brand); color: var(--on-brand); font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; }
.ah-skip:focus { top: var(--space-2); color: var(--on-brand); }

/* ---------- Buttons ---------- */
.ah-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-target); padding: 0 var(--space-4);
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.ah-btn--primary { background: var(--brand); color: var(--on-brand); }
.ah-btn--primary:hover { background: var(--brand-strong); color: var(--on-brand); }
.ah-btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.ah-btn--secondary:hover { background: var(--surface-subtle); color: var(--ink); }
.ah-btn--quiet { background: transparent; color: var(--brand); }
.ah-btn--quiet:hover { background: var(--brand-soft); color: var(--brand-strong); }
.ah-btn:disabled, .ah-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ah-icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--touch-target); height: var(--touch-target); padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.ah-icon-btn:hover { background: var(--surface-subtle); color: var(--ink); }
@media (min-width: 992px) {
  .ah-btn { min-height: var(--control-height); }
  .ah-icon-btn { width: var(--control-height); height: var(--control-height); }
}

/* =====================================================================
   CHROME
   ===================================================================== */

/* ---------- Header ---------- */
.ah-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--surface); border-bottom: 1px solid var(--line); }
.ah-header__inner { display: flex; align-items: center; gap: var(--space-1); height: var(--header-height); max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-1); }
/* Brand: the logo opens the language selection page (site root), the title opens this language's home page. */
.ah-header__brand { display: flex; align-items: center; gap: var(--space-3); flex: 0 1 auto; min-width: 0; padding: 0 var(--space-2); }
.ah-header__home { display: flex; align-items: center; flex: none; padding: 10px 0; border-radius: var(--radius-sm); }
.ah-header__title, .ah-header__title:hover { color: var(--ink); text-decoration: none; }
.ah-header__title { display: block; padding: 12px 0; border-radius: var(--radius-sm); }
.ah-header__logo { display: none; height: 22px; width: auto; flex: none; }
.ah-header__mark { display: block; height: 24px; width: auto; flex: none; }
.ah-header__rule { display: none; width: 1px; height: 20px; background: var(--line); flex: none; }
.ah-header__title { min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-header__spacer { flex: 1 1 0; min-width: 0; }
.ah-header__nav { display: none; }
.ah-header__search { display: none; }
.ah-header__theme, .ah-header__lang-label, .ah-header__lang { display: none; }
.ah-theme-toggle .ah-icon--sun { display: none; }
[data-theme="dark"] .ah-theme-toggle .ah-icon--sun { display: block; }
[data-theme="dark"] .ah-theme-toggle .ah-icon--moon { display: none; }
.ah-header.is-search-open .ah-header__search { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: var(--space-2) var(--space-3); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); }
.ah-header.is-search-open .ah-search__key { display: none; }
.ah-header.is-search-open .ah-search__panel { left: var(--space-3); right: var(--space-3); }
@media (max-width: 991px) { .ah-header.is-search-open .ah-search__icon { left: calc(var(--space-3) * 2); } } /* the open bar has space-3 side padding: keep the magnifier inside the field, space-3 from its border */
@media (min-width: 768px) {
  .ah-header__inner { padding: 0 var(--space-3); }
  .ah-header__logo { display: block; }
  .ah-header__mark { display: none; }
  .ah-header__rule { display: block; }
}
@media (min-width: 992px) {
  .ah-header__inner { height: var(--header-height-lg); padding: 0 var(--space-6); gap: var(--space-2); }
  .ah-header__menu, .ah-header__search-btn { display: none; }
  .ah-header__brand { padding: 0; margin-right: var(--space-2); }
  .ah-header__logo { height: 24px; }
  .ah-header__nav { display: flex; align-items: center; gap: 2px; flex: none; margin: 0; padding: 0; list-style: none; }
  .ah-header__search, .ah-header.is-search-open .ah-header__search { display: block; position: static; flex: 0 2 240px; min-width: 160px; padding: 0; border: 0; box-shadow: none; background: none; } /* shrinks before the title does */
  .ah-header__theme { display: inline-grid; }
  .ah-header__lang { display: block; flex: none; } /* never squeezed: when the header is tight, only the title gives way (ellipsis) */
  .ah-header__lang-label { display: inline; white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1199px) { .ah-header__lang-label { display: none; } } /* globe icon only while the header is narrow; the button keeps its aria-label */
@media (min-width: 1440px) { .ah-header__search, .ah-header.is-search-open .ah-header__search { flex-basis: 280px; } }
.ah-header__nav a { display: inline-flex; align-items: center; height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ah-header__nav a:hover { background: var(--surface-subtle); color: var(--ink); }
.ah-header__nav a[aria-current] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* ---------- Search field (header) ---------- */
.ah-search { position: relative; margin: 0; }
.ah-search__icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.ah-search__input {
  display: block; width: 100%; height: var(--touch-target); margin: 0; padding: 0 44px 0 40px;
  font: inherit; font-size: 16px; line-height: 20px; color: var(--ink); /* 16px: iOS Safari zooms the page into any field smaller than that */
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  -webkit-appearance: none; appearance: none;
}
.ah-search__input::placeholder { color: var(--ink-muted); opacity: 1; }
.ah-search__input:focus-visible { border-color: var(--focus); }
.ah-search__key { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); }
@media (min-width: 992px) { .ah-search__input { height: var(--control-height); } }
@media (min-width: 992px) and (hover: hover) and (pointer: fine) { .ah-search__input { font-size: 15px; } } /* desktop with a mouse; tablets keep 16px */
/* Live results under the field, from the language's search_data.json; Enter opens search.html with every result. */
.ah-search__panel { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: var(--z-popover); max-height: 70vh; overflow-y: auto; margin: 0; padding: var(--space-2); list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.ah-search__result { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.ah-search__result:hover, .ah-search__result[aria-selected="true"] { background: var(--brand-soft); color: var(--ink); }
.ah-search__result-meta { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.ah-search__result-meta::first-letter, .ah-result__meta::first-letter { text-transform: uppercase; }
.ah-search__result-title { display: block; font-size: 15px; line-height: 22px; font-weight: 600; }
.ah-search__result-text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.ah-search__all { display: block; margin-top: var(--space-1); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; }
.ah-search__empty { margin: 0; padding: var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 991.98px) { .ah-search__panel { max-height: 60vh; } }

/* ---------- Language menu and landing grid ---------- */
.ah-lang { position: relative; }
.ah-lang__button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--touch-target); min-width: var(--touch-target); padding: 0 var(--space-2);
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 500;
  color: var(--ink-muted); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.ah-lang__button:hover { color: var(--ink); background: var(--surface-subtle); }
@media (min-width: 992px) { .ah-lang__button { height: var(--control-height); padding: 0 var(--space-3); } }
.ah-lang__menu { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: var(--z-popover); width: 260px; margin: 0; padding: var(--space-2); list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.ah-lang__menu[hidden] { display: none; }
.ah-lang--up .ah-lang__menu { top: auto; bottom: calc(100% + var(--space-2)); left: 0; right: auto; }
.ah-lang__label { white-space: nowrap; }
.ah-lang__option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--touch-target); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--ink); font-size: 15px; line-height: 20px; text-decoration: none; }
.ah-lang__option:hover { background: var(--surface-subtle); color: var(--ink); }
.ah-lang__option[aria-current="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ah-lang__code { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-muted); }
@media (min-width: 992px) { .ah-lang__option { min-height: 40px; } }

.ah-landing { max-width: 960px; margin: 0 auto; padding: var(--space-10) var(--space-4) var(--space-12); }
.ah-landing__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--brand); }
@media (min-width: 768px) { .ah-landing { padding-top: var(--space-16); padding-bottom: var(--space-16); } }
.ah-langgrid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 576px) { .ah-langgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ah-langgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
.ah-langgrid__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 64px; height: 100%; padding: var(--space-3) var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: border-color 120ms ease-out, color 120ms ease-out; }
.ah-langgrid__link:hover { border-color: var(--brand); color: var(--brand); box-shadow: var(--shadow-sm); }
.ah-langgrid__name { min-width: 0; font-size: 17px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.ah-langgrid__link .ah-icon { color: var(--ink-muted); }
.ah-langgrid__link:hover .ah-icon { color: var(--brand); }

/* ---------- Page layout ---------- */
.ah-layout { max-width: var(--page-max); margin: 0 auto; }
.ah-sidebar, .ah-toc-rail { display: none; }
.ah-main { min-width: 0; padding: var(--space-4) var(--space-4) var(--space-12); }
.ah-article { max-width: var(--content-max); margin: 0 auto; }
@media (min-width: 768px) { .ah-main { padding: var(--space-6) var(--space-8) var(--space-16); } }
@media (min-width: 992px) {
  .ah-layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .ah-layout--no-nav { display: block; }
  .ah-sidebar { display: block; padding: var(--space-6) var(--space-3) var(--space-12); background: var(--surface-subtle); border-right: 1px solid var(--line); }
  /* Only the page scrolls. The list sticks under the header; ahd.js lets a list taller than the window move with the page until its far end shows. */
  .ah-sidebar > .ah-nav { position: sticky; top: calc(var(--header-height-lg) + var(--space-6)); }
  .ah-main { padding: var(--space-8) var(--space-10) var(--space-16); }
}
@media (min-width: 1200px) {
  .ah-layout { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--toc-width); }
  .ah-layout--no-nav { display: grid; grid-template-columns: minmax(0, 1fr) var(--toc-width); }
  .ah-toc-rail { display: block; padding: var(--space-8) var(--space-6) var(--space-8) 0; }
  .ah-toc-rail > .ah-toc { position: sticky; top: calc(var(--header-height-lg) + var(--space-8)); }
  .ah-toc-inline { display: none; }
}
@media (min-width: 1600px) {
  /* Extra wide: the layout fills up to page-max (1920px); On this page fits a long heading on one line. */
  :root { --toc-width: var(--toc-width-wide); --content-max: var(--content-max-wide); }
}

/* ---------- Side navigation ---------- */
.ah-nav { font-size: 14px; line-height: 20px; }
.ah-nav__section + .ah-nav__section { margin-top: var(--space-6); }
.ah-nav__heading { margin: 0 0 var(--space-2); padding: 0 var(--space-3); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .02em; color: var(--ink-muted); }
.ah-nav__list { margin: 0; padding: 0; list-style: none; }
.ah-nav__list .ah-nav__list { margin: 2px 0 var(--space-1) var(--space-4); padding-left: var(--space-2); border-left: 1px solid var(--line); }
.ah-nav__link {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--touch-target); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); color: var(--ink-muted); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.ah-nav__link:hover { background: var(--surface-subtle); color: var(--ink); }
.ah-sidebar .ah-nav__link:hover { background: var(--surface); }
.ah-nav__link[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ah-nav__group > summary { list-style: none; }
.ah-nav__group > summary::-webkit-details-marker { display: none; }
.ah-nav__chev { margin-left: auto; color: var(--ink-muted); transition: transform 160ms ease-out; }
.ah-nav__group[open] > summary .ah-nav__chev { transform: rotate(90deg); }
@media (min-width: 992px) { .ah-nav__link { min-height: 36px; padding: 8px var(--space-3); } }

/* ---------- Mobile drawer ---------- */
.ah-drawer {
  position: fixed; inset: 0 auto 0 0; z-index: var(--z-drawer);
  display: flex; flex-direction: column; width: 86vw; max-width: var(--sidebar-width);
  background: var(--surface); box-shadow: var(--shadow-drawer);
  transform: translateX(-100%); visibility: hidden;
  transition: transform 200ms ease-out, visibility 0s linear 200ms;
}
.ah-drawer.is-open { transform: none; visibility: visible; transition: transform 200ms ease-out; }
.ah-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--header-height); padding: 0 var(--space-1) 0 var(--space-4); border-bottom: 1px solid var(--line); flex: none; }
.ah-drawer__title { min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) var(--space-3) var(--space-6); }
.ah-drawer__sections { margin: 0 0 var(--space-4); padding: 0 0 var(--space-3); list-style: none; border-bottom: 1px solid var(--line); }
.ah-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); flex: none; }
.ah-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--overlay); }
.ah-scrim[hidden] { display: none; }
@media (min-width: 992px) { .ah-drawer, .ah-scrim { display: none; } }

/* ---------- Breadcrumb ---------- */
.ah-breadcrumb { margin: 0 0 var(--space-3); }
.ah-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.ah-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; }
.ah-breadcrumb__item a { color: var(--ink-muted); text-decoration: none; }
.ah-breadcrumb__item a:hover { color: var(--brand); text-decoration: underline; }
.ah-breadcrumb__item[aria-current="page"] { color: var(--ink); font-weight: 500; }
.ah-breadcrumb__sep { width: 16px; height: 16px; color: var(--ink-muted); }
@media (max-width: 767.98px) {
  .ah-breadcrumb__item { display: none; }
  .ah-breadcrumb__item:nth-last-child(2) { display: inline-flex; }
  .ah-breadcrumb__item:nth-last-child(2) .ah-breadcrumb__sep { display: none; }
  .ah-breadcrumb__item:nth-last-child(2) a { display: inline-flex; align-items: center; min-height: var(--touch-target); gap: var(--space-2); }
  .ah-breadcrumb__item:nth-last-child(2) a::before { content: ""; width: 7px; height: 7px; margin-left: 2px; border-left: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); }
}

/* ---------- Page TOC (jekyll-toc output: ul > li > a, h3 entries in a nested ul) ---------- */
.ah-toc__title { margin: 0 0 var(--space-3); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.ah-toc__list, .ah-toc__list ul { margin: 0; padding: 0; list-style: none; }
.ah-toc__list { border-left: 1px solid var(--line); }
.ah-toc__list li { margin: 0; }
.ah-toc__link, .ah-toc__list a { display: block; margin-left: -1px; padding: 6px 0 6px var(--space-3); border-left: 2px solid transparent; font-size: 14px; line-height: 20px; color: var(--ink-muted); text-decoration: none; }
.ah-toc__link:hover, .ah-toc__list a:hover { color: var(--ink); }
.ah-toc__list a[aria-current="true"], .ah-toc__list a.active { color: var(--brand); border-left-color: var(--brand); font-weight: 600; }
.ah-toc__list ul a, .ah-toc__sub .ah-toc__link { padding-left: var(--space-6); font-size: 13px; }
.ah-toc-inline { margin: 0 0 var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.ah-toc-inline > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 var(--space-4); font-size: 14px; line-height: 20px; font-weight: 600; list-style: none; cursor: pointer; border-radius: var(--radius-md); }
.ah-toc-inline > summary::-webkit-details-marker { display: none; }
.ah-toc-inline > summary .ah-icon { margin-left: auto; color: var(--ink-muted); transition: transform 160ms ease-out; }
.ah-toc-inline[open] > summary .ah-icon { transform: rotate(180deg); }
.ah-toc-inline .ah-toc__list { margin: 0 var(--space-4) var(--space-4); }
.ah-toc-inline .ah-toc__list a { padding-top: 10px; padding-bottom: 10px; }

/* ---------- Pager ---------- */
.ah-pager { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.ah-pager__link { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: border-color 120ms ease-out; }
.ah-pager__link:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); color: var(--ink); }
.ah-pager__dir { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .02em; color: var(--ink-muted); }
.ah-pager__title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--brand); }
.ah-pager__link--next { align-items: flex-end; text-align: right; }
@media (min-width: 768px) {
  .ah-pager { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .ah-pager__link--next:only-child { grid-column: 2; }
}

/* ---------- Footer and back to top ---------- */
.ah-footer { background: var(--surface-subtle); border-top: 1px solid var(--line); }
.ah-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.ah-footer__text { margin: 0; }
.ah-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.ah-footer a { color: var(--ink-muted); }
.ah-footer a:hover { color: var(--brand); }
@media (min-width: 768px) { .ah-footer__inner { padding-left: var(--space-8); padding-right: var(--space-8); } }
.ah-backtotop { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); z-index: var(--z-backtotop); display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); padding: 0; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); cursor: pointer; text-decoration: none; }
.ah-backtotop:hover { color: var(--brand); border-color: var(--brand); }
.ah-backtotop[hidden] { display: none; }

/* =====================================================================
   ARTICLE PROSE — what Markdown (kramdown) produces, with no classes. Scoped to .ah-article.
   ===================================================================== */
.ah-article h1 { margin: 0 0 var(--space-3); padding: 0; font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.ah-article h2 { margin: var(--space-8) 0 var(--space-3); padding: var(--space-6) 0 0; border-top: 1px solid var(--line); font-size: 22px; line-height: 30px; font-weight: 700; color: var(--ink); }
.ah-article h3 { margin: var(--space-6) 0 var(--space-2); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.ah-article h4 { margin: var(--space-6) 0 var(--space-2); font-size: 17px; line-height: 26px; font-weight: 600; color: var(--ink); }
.ah-article h5 { margin: var(--space-5) 0 var(--space-2); font-size: 16px; line-height: 26px; font-weight: 600; color: var(--ink); }
.ah-article h6 { margin: var(--space-4) 0 var(--space-1); font-size: 15px; line-height: 24px; font-weight: 600; color: var(--ink-muted); }
.ah-article h1:first-child { margin-top: 0; }
.ah-article p, .ah-article ul, .ah-article ol, .ah-article dl { margin: 0 0 var(--space-4); }
.ah-article ul, .ah-article ol { padding-left: var(--space-6); }
.ah-article ul { list-style-type: disc; }
.ah-article ul ul { list-style-type: circle; }
.ah-article li + li { margin-top: var(--space-1); }
.ah-article li > p { margin-bottom: var(--space-2); }
.ah-article li > ul, .ah-article li > ol { margin: var(--space-2) 0; }
.ah-article strong, .ah-article b { font-weight: 600; }
.ah-article hr { height: 0; margin: var(--space-8) 0; padding: 0; border: 0; border-top: 1px solid var(--line); background: none; opacity: 1; color: inherit; }
.ah-article blockquote { margin: var(--space-4) 0; padding: var(--space-1) 0 var(--space-1) var(--space-4); border-left: 3px solid var(--line); color: var(--ink-muted); }
.ah-article blockquote > :last-child { margin-bottom: 0; }
.ah-article img { max-width: 100%; height: auto; vertical-align: middle; }
.ah-article code { font-family: var(--font-mono); font-size: .875em; padding: 1px 5px; color: var(--ink); background: var(--code-surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.ah-article dt { margin: var(--space-4) 0 0; font-weight: 600; }
.ah-article dt:first-child { margin-top: 0; }
.ah-article dd { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.ah-article .text-right { text-align: right; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.ah-article .ah-breadcrumb__list { margin: 0; padding: 0; list-style: none; }
.ah-article .ah-breadcrumb__item + .ah-breadcrumb__item { margin-top: 0; }
.ah-article .ah-toc__list, .ah-article .ah-toc__list ul { padding-left: 0; list-style: none; }
.ah-article .ah-toc__list ul { margin: 0; }
.ah-article .ah-toc__list li + li { margin-top: 0; }
.ah-lead { font-size: 18px; line-height: 30px; color: var(--ink-muted); }
.ah-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-6); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.ah-anchor { margin-left: var(--space-2); color: var(--ink-muted); text-decoration: none; opacity: 0; }
h2:hover > .ah-anchor, h3:hover > .ah-anchor, .ah-anchor:focus-visible { opacity: 1; }
@media (min-width: 768px) {
  .ah-article h1 { font-size: 32px; line-height: 40px; }
  .ah-article h2 { margin-top: var(--space-12); font-size: 24px; line-height: 32px; }
}

/* =====================================================================
   LEGACY CONTENT BINDINGS — the Bootstrap / Font Awesome classes and kramdown output that
   existing help content already uses, styled here so content needs no changes once
   Bootstrap and Font Awesome are gone. Supported classes (measured across all help repos):
   alert, alert-info, alert-primary, alert-success, alert-warning, alert-danger, alert-alert,
   table, text-right, eula-include, and on portal pages only: container-fluid, content,
   card-group, card-deck, card, card-body, card-title, card-text, card-footer, h3, btn,
   btn-primary, text-white, text-center, w-75, m-0, px-5, pt-5, fal, fa-file-alt, fa-book-open,
   fa-file-certificate. Any other Bootstrap class in content renders unstyled.
   ===================================================================== */

/* Screenshots: a paragraph that starts with an image. The template adds .ah-shot at build time
   (content | replace: '<p><img', '<p class="ah-shot"><img'). Images inside text stay inline. */
.ah-article .ah-shot { margin: var(--space-4) 0 var(--space-5); }
.ah-article .ah-shot > img:first-child { display: block; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--image-ground); cursor: zoom-in; }
.ah-article img { background-color: var(--image-ground); }
[data-theme="dark"] .ah-article .ah-shot > img:first-child, [data-theme="dark"] .ah-figure__frame img { filter: brightness(.9); }
[data-theme="dark"] .ah-article p:not(.ah-shot) > img, [data-theme="dark"] .ah-article li > img, [data-theme="dark"] .ah-article td > img { padding: 2px; border-radius: 3px; }

/* Callouts: p / li with .alert + .alert-info | -primary | -warning | -danger | -success.
   Icon only by default. An author may add a title in the attribute list:
   {: .alert .alert-warning data-title="Caution" }  -> the title shows above the text.
   The icon is ::after (decorative); the title is ::before, so screen readers read it first. */
.ah-article .alert { position: relative; margin: var(--space-4) 0; padding: var(--space-3) var(--space-4) var(--space-3) 44px; color: var(--ink); background: var(--note-soft); border: 1px solid var(--note-line); border-radius: var(--radius-md); font-size: 15px; line-height: 26px; }
.ah-article .alert::after { content: ""; position: absolute; left: var(--space-4); top: 15px; width: 20px; height: 20px; background-color: var(--note); -webkit-mask: var(--ah-i-info) center / contain no-repeat; mask: var(--ah-i-info) center / contain no-repeat; }
.ah-article .alert[data-title]::before { content: attr(data-title); display: block; font-size: 14px; line-height: 26px; font-weight: 700; color: var(--note); }
.ah-article .alert a { color: var(--brand); }
.ah-article .alert > :last-child { margin-bottom: 0; }
.ah-article .alert code { background: var(--surface); }
.ah-article .alert-success { background: var(--tip-soft); border-color: var(--tip-line); }
.ah-article .alert-success::after { background-color: var(--tip); -webkit-mask-image: var(--ah-i-tip); mask-image: var(--ah-i-tip); }
.ah-article .alert-success[data-title]::before { color: var(--tip); }
.ah-article .alert-warning { background: var(--caution-soft); border-color: var(--caution-line); }
.ah-article .alert-warning::after { background-color: var(--caution); -webkit-mask-image: var(--ah-i-caution); mask-image: var(--ah-i-caution); }
.ah-article .alert-warning[data-title]::before { color: var(--caution); }
.ah-article .alert-danger { background: var(--warning-soft); border-color: var(--warning-line); }
.ah-article .alert-danger::after { background-color: var(--warning); -webkit-mask-image: var(--ah-i-warning); mask-image: var(--ah-i-warning); }
.ah-article .alert-danger[data-title]::before { color: var(--warning); }
/* Stacked callouts sit 8px apart everywhere: at the top level the 16px gap is pulled in by 8px; inside a list item it is 8px already. */
.ah-article .alert + .alert { margin-top: calc(-1 * var(--space-2)); }
.ah-article li > .alert { margin: var(--space-2) 0; }
.ah-article li > .alert + .alert { margin-top: 0; }

/* Collapsible sections: <details><summary>## Heading</summary>…</details>, and the details.html include. */
.ah-article details:not([class]) { margin: var(--space-4) 0; }
.ah-article details:not([class]) > summary { display: flex; align-items: center; gap: var(--space-2); list-style: none; cursor: pointer; border-radius: var(--radius-sm); }
.ah-article details:not([class]) > summary::-webkit-details-marker { display: none; }
.ah-article details:not([class]) > summary::before { content: ""; flex: none; width: 20px; height: 20px; background-color: var(--ink-muted); -webkit-mask: var(--ah-i-chevron) center / contain no-repeat; mask: var(--ah-i-chevron) center / contain no-repeat; transition: transform 160ms ease-out; }
.ah-article details:not([class])[open] > summary::before { transform: rotate(90deg); }
.ah-article details:not([class]) > summary:hover::before { background-color: var(--brand); }
.ah-article details:not([class]) > summary > h1, .ah-article details:not([class]) > summary > h2, .ah-article details:not([class]) > summary > h3, .ah-article details:not([class]) > summary > h4, .ah-article details:not([class]) > summary > p { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
.ah-article details:not([class]) > summary > p { font-weight: 600; }
.ah-article details:not([class]) > summary:has(> h2) { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.ah-article details:not([class]) > summary:has(> h2)::before { width: 24px; height: 24px; }
.ah-article details:not([class])[open] > summary { margin-bottom: var(--space-3); }
@media (min-width: 768px) { .ah-article details:not([class]) > summary:has(> h2) { margin-top: var(--space-12); } }

/* Tables: markdown tables, with or without {: .table}. Desktop: full width. Phone: the table scrolls. */
.ah-article table { width: 100%; margin: var(--space-4) 0 var(--space-5); border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); font-size: 15px; line-height: 24px; caption-side: top; }
.ah-article th, .ah-article td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--line); background: transparent; box-shadow: none; overflow-wrap: anywhere; }
.ah-article thead th { background: var(--surface-subtle); font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: normal; }
.ah-article thead th:first-child { border-top-left-radius: calc(var(--radius-md) - 1px); }
.ah-article thead th:last-child { border-top-right-radius: calc(var(--radius-md) - 1px); }
.ah-article tbody tr:last-child > * { border-bottom: 0; }
.ah-article .text-right, .ah-article th.text-right, .ah-article td.text-right { text-align: right; }
@media (max-width: 767.98px) { .ah-article table:not(.ah-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* Code: kramdown + rouge (div.highlighter-rouge > div.highlight > pre.highlight > code) and plain pre.
   Legacy code blocks wrap, because existing content also puts prose in them. */
.ah-article div.highlighter-rouge { position: relative; margin: var(--space-4) 0 var(--space-5); }
.ah-article div.highlighter-rouge pre { padding-right: 88px; }
.ah-copy { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: var(--space-1); height: 32px; padding: 0 10px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); opacity: 0; transition: opacity 120ms ease-out, color 120ms ease-out; }
.ah-copy:hover { color: var(--ink); }
.ah-copy.is-copied { color: var(--tip); }
.ah-article div.highlighter-rouge:hover .ah-copy, .ah-copy:focus-visible, .ah-copy.is-copied { opacity: 1; }
@media (hover: none) { .ah-copy { opacity: 1; } }
.ah-article pre { margin: var(--space-4) 0 var(--space-5); padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--ink); background: var(--code-surface); border: 1px solid var(--line); border-radius: var(--radius-md); white-space: pre-wrap; overflow-wrap: anywhere; }
.ah-article div.highlight > pre, .ah-article div.highlighter-rouge pre { margin: 0; }
.ah-article pre code { padding: 0; font-size: inherit; color: inherit; background: none; border: 0; border-radius: 0; }
.ah-article .highlight .c, .ah-article .highlight .c1, .ah-article .highlight .cm, .ah-article .highlight .cs { color: var(--ink-muted); font-style: italic; }
.ah-article .highlight .k, .ah-article .highlight .kd, .ah-article .highlight .kn, .ah-article .highlight .nb { color: var(--brand); }
.ah-article .highlight .s, .ah-article .highlight .s1, .ah-article .highlight .s2 { color: var(--tip); }

/* License text: <pre class="eula-include">{% include _EULA/… %}</pre> */
.ah-license, .ah-article pre.eula-include { margin: var(--space-4) 0; padding: 0; font-family: inherit; font-size: 15px; line-height: 26px; color: var(--ink); background: none; border: 0; border-radius: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Search results page: search.js renders h3 > a and p into ul#search-results. */
.ah-article #search-results { margin: var(--space-4) 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ah-article #search-results > h3 { margin: var(--space-4) 0 var(--space-1); padding: 0; border: 0; font-size: 17px; line-height: 26px; font-weight: 600; }
.ah-article #search-results > h3 a { text-decoration: none; }
.ah-article #search-results > h3 a:hover { text-decoration: underline; }
.ah-article #search-results > p { margin: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); font-size: 15px; line-height: 24px; color: var(--ink-muted); overflow-wrap: anywhere; }

/* Product portal: contents/_<lang>/index.md uses Bootstrap .card-group markup; the repositories' unpublished
   root index.md files also use Bootstrap 4's .card-deck. Font Awesome is gone, so the three fal icons are
   drawn here. !important is used only against inline styles in the content (style="width: 23rem", style="padding-top: 60px"). */
.container-fluid.content:has(> .card-group, > .card-deck) { max-width: 1080px; margin: 0 auto; padding-top: 0 !important; padding-left: var(--space-4); padding-right: var(--space-4); padding-bottom: var(--space-12); } /* !important: content sets style="padding-top: 60px" for the old fixed header */
.content :is(.card-group, .card-deck) { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; padding: var(--space-6) 0 0; }
@media (min-width: 768px) { .content :is(.card-group, .card-deck) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-10); } }
.content :is(.card-group, .card-deck) > .card { position: relative; display: flex; flex-direction: column; width: auto !important; min-width: 0; margin: 0; padding: var(--space-5); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color 120ms ease-out; }
.content :is(.card-group, .card-deck) > .card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.content :is(.card-group, .card-deck) > .card:has(a:focus-visible) { box-shadow: var(--focus-ring); }
.content :is(.card-group, .card-deck) .card-body { flex: 1; padding: 0; }
.content :is(.card-group, .card-deck) .card-title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin: 0 0 var(--space-2); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.content :is(.card-group, .card-deck) .card-title i.fal { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--brand-soft); font-size: 0; line-height: 0; font-style: normal; }
.content :is(.card-group, .card-deck) .card-title i.fal::before { content: ""; width: 22px; height: 22px; background-color: var(--brand); -webkit-mask: var(--ah-i-file) center / contain no-repeat; mask: var(--ah-i-file) center / contain no-repeat; }
.content :is(.card-group, .card-deck) .card-title i.fa-book-open::before { -webkit-mask-image: var(--ah-i-book); mask-image: var(--ah-i-book); }
.content :is(.card-group, .card-deck) .card-title i.fa-file-certificate::before { -webkit-mask-image: var(--ah-i-shield); mask-image: var(--ah-i-shield); }
.content :is(.card-group, .card-deck) .card-text { margin: 0; font-size: 15px; line-height: 26px; color: var(--ink-muted); }
.content :is(.card-group, .card-deck) .card-text strong { display: inline-block; margin-top: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--caution-soft); color: var(--caution); font-size: 13px; line-height: 22px; font-weight: 600; }
.content :is(.card-group, .card-deck) .card-footer { margin: var(--space-4) 0 0; padding: 0; text-align: left; background: none; border: 0; }
.content :is(.card-group, .card-deck) .card-footer p { margin: 0; }
/* The link is the .btn ([x](docs/){:.btn}), or sits in a .btn paragraph ({: .btn} on the next line: deploy-media-creator-contents, HyperBoot-help). */
.content :is(.card-group, .card-deck) .card-footer :is(a.btn, .btn > a) { position: static; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; color: var(--brand); background: none; border: 0; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; }
.content :is(.card-group, .card-deck) .card-footer :is(a.btn, .btn > a)::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.content :is(.card-group, .card-deck) .card-footer :is(a.btn, .btn > a)::after { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--ah-i-arrow) center / contain no-repeat; mask: var(--ah-i-arrow) center / contain no-repeat; }
.content :is(.card-group, .card-deck) .card-footer :is(a.btn, .btn > a):focus-visible { outline: none; box-shadow: none; }

/* =====================================================================
   COMPONENTS FOR NEW OR MIGRATED CONTENT
   ===================================================================== */

/* ---------- Image viewer (full-screen screenshot) ---------- */
.ah-viewer { position: fixed; inset: 0; z-index: var(--z-popover); display: flex; flex-direction: column; background: var(--overlay-strong); color: var(--on-overlay); }
.ah-viewer[hidden] { display: none; }
.ah-viewer__bar { display: flex; justify-content: flex-end; flex: none; padding: var(--space-2) var(--space-2) 0; }
.ah-viewer__close { display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); padding: 0; color: var(--ink); background: var(--surface-raised); border: 0; border-radius: var(--radius-full); cursor: pointer; }
.ah-viewer__stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; padding: var(--space-2) var(--space-4); touch-action: pinch-zoom; }
.ah-viewer__img { display: block; max-width: 100%; max-height: 100%; background: var(--image-ground); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.ah-viewer__caption { flex: none; margin: 0; padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); font-size: 14px; line-height: 20px; text-align: center; color: var(--on-overlay); }

/* ---------- Callout ---------- */
.ah-callout { display: flex; gap: var(--space-3); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); background: var(--note-soft); border: 1px solid var(--note-line); border-radius: var(--radius-md); color: var(--ink); font-size: 15px; line-height: 26px; }
.ah-callout .ah-callout__icon { margin-top: 3px; color: var(--note); }
.ah-callout .ah-callout__body { flex: 1; min-width: 0; }
.ah-callout .ah-callout__body > * { margin: 0; }
.ah-callout .ah-callout__body > * + * { margin-top: var(--space-2); }
.ah-callout .ah-callout__body ul, .ah-callout .ah-callout__body ol { padding-left: var(--space-5); }
.ah-callout .ah-callout__body li + li { margin-top: 2px; }
.ah-callout .ah-callout__title { display: block; font-size: 14px; line-height: 26px; font-weight: 700; color: var(--note); }
.ah-callout .ah-callout__title + * { margin-top: 0; }
.ah-callout--tip { background: var(--tip-soft); border-color: var(--tip-line); }
.ah-callout--tip .ah-callout__icon, .ah-callout--tip .ah-callout__title { color: var(--tip); }
.ah-callout--caution { background: var(--caution-soft); border-color: var(--caution-line); }
.ah-callout--caution .ah-callout__icon, .ah-callout--caution .ah-callout__title { color: var(--caution); }
.ah-callout--warning { background: var(--warning-soft); border-color: var(--warning-line); }
.ah-callout--warning .ah-callout__icon, .ah-callout--warning .ah-callout__title { color: var(--warning); }

/* ---------- Steps ---------- */
.ah-steps, .ah-article .ah-steps { margin: var(--space-6) 0; padding: 0; list-style: none; counter-reset: ah-step; }
.ah-steps > .ah-step { position: relative; margin: 0; padding: 0 0 var(--space-8) 44px; counter-increment: ah-step; }
.ah-steps > .ah-step::before { content: counter(ah-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font-size: 14px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ah-steps > .ah-step::after { content: ""; position: absolute; left: 13.5px; top: 36px; bottom: var(--space-2); width: 1px; background: var(--line); }
.ah-steps > .ah-step:last-child { padding-bottom: 0; }
.ah-steps > .ah-step:last-child::after { display: none; }
.ah-step > .ah-step__title { margin: 0 0 var(--space-2); padding: 0; border: 0; font-size: 18px; line-height: 28px; font-weight: 600; }
.ah-step .ah-step__body > * { margin: 0; }
.ah-step .ah-step__body > * + * { margin-top: var(--space-3); }
@media (min-width: 768px) {
  .ah-steps > .ah-step { padding-left: 52px; }
  .ah-steps > .ah-step::before { width: 32px; height: 32px; font-size: 15px; }
  .ah-steps > .ah-step::after { left: 15.5px; top: 40px; }
  .ah-step > .ah-step__title { font-size: 20px; line-height: 32px; }
}

/* ---------- Figure ---------- */
.ah-figure { margin: var(--space-4) 0 var(--space-5); }
.ah-figure__frame { position: relative; display: block; overflow: hidden; background: var(--image-ground); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ah-figure__frame img { display: block; width: 100%; height: auto; }
.ah-figure__zoom { position: absolute; right: var(--space-2); top: var(--space-2); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: zoom-in; }
.ah-figure__zoom:hover { color: var(--brand); border-color: var(--brand); }
.ah-figure__caption { margin-top: var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
@media (min-width: 992px) { .ah-figure__zoom { opacity: 0; transition: opacity 120ms ease-out; } .ah-figure__frame:hover .ah-figure__zoom, .ah-figure__zoom:focus-visible { opacity: 1; } }

/* ---------- Inline markup ---------- */
.ah-ui { padding: 1px 6px; font-size: .9375em; font-weight: 600; color: var(--ink); background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ah-menupath { display: inline; }
.ah-menupath__sep { display: inline-block; width: 16px; height: 16px; margin: 0 2px; vertical-align: -3px; color: var(--ink-muted); }
kbd, .ah-kbd { display: inline-block; min-width: 1.75em; padding: 0 5px; font-family: var(--font-mono); font-size: .8125em; line-height: 1.6; text-align: center; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); box-shadow: none; }
.ah-code-inline { font-family: var(--font-mono); font-size: .875em; padding: 1px 5px; color: var(--ink); background: var(--code-surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-wrap: anywhere; }

/* ---------- Code block ---------- */
.ah-codeblock { margin: var(--space-4) 0 var(--space-5); overflow: hidden; background: var(--code-surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ah-codeblock__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-1) 0 var(--space-4); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.ah-codeblock__copy { display: inline-flex; align-items: center; gap: var(--space-1); height: 44px; padding: 0 var(--space-3); font: inherit; color: var(--ink-muted); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.ah-codeblock__copy:hover { color: var(--ink); }
.ah-codeblock__copy.is-copied { color: var(--tip); }
.ah-codeblock > pre { margin: 0; padding: var(--space-3) var(--space-4); overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--ink); background: none; border: 0; border-radius: 0; white-space: pre; overflow-wrap: normal; tab-size: 4; }
.ah-codeblock > pre code { font: inherit; padding: 0; color: inherit; background: none; border: 0; }
.ah-codeblock .ah-prompt { color: var(--ink-muted); -webkit-user-select: none; user-select: none; }
.ah-codeblock .ah-comment { color: var(--ink-muted); font-style: italic; }
.ah-codeblock .ah-param { color: var(--brand); font-style: italic; }
@media (min-width: 992px) { .ah-codeblock__bar { min-height: 40px; } .ah-codeblock__copy { height: 32px; } }

/* ---------- Data table ---------- */
.ah-table-wrap { margin: var(--space-4) 0 var(--space-5); overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-md); }
.ah-table-wrap > table, .ah-table-wrap > .ah-table { margin: 0; border: 0; border-radius: 0; }
.ah-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; color: var(--ink); }
.ah-table--wide { min-width: 640px; }
.ah-table th, .ah-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.ah-table thead th { background: var(--surface-subtle); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow-wrap: normal; }
.ah-table tbody th { font-weight: 600; }
.ah-table tbody tr:last-child > * { border-bottom: 0; }
.ah-table--sticky th:first-child, .ah-table--sticky td:first-child { position: sticky; left: 0; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
.ah-table--sticky thead th:first-child { background: var(--surface-subtle); }
.ah-yes, .ah-no { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.ah-yes { color: var(--tip); font-weight: 600; }
.ah-no { color: var(--ink-muted); }

/* ---------- Disclosure (box) ---------- */
.ah-disclosure, .ah-article details.ah-disclosure { margin: var(--space-4) 0; border: 1px solid var(--line); border-radius: var(--radius-md); }
.ah-disclosure > summary, .ah-article details.ah-disclosure > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); margin: 0; padding: var(--space-2) var(--space-4); font-size: 15px; line-height: 22px; font-weight: 600; list-style: none; cursor: pointer; border: 0; border-radius: var(--radius-md); }
.ah-disclosure > summary::-webkit-details-marker { display: none; }
.ah-disclosure > summary:hover { background: var(--surface-subtle); }
.ah-disclosure__chev { color: var(--ink-muted); transition: transform 160ms ease-out; }
.ah-disclosure[open] > summary, .ah-article details.ah-disclosure[open] > summary { margin: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.ah-disclosure[open] > summary .ah-disclosure__chev { transform: rotate(90deg); }
.ah-disclosure .ah-disclosure__body { padding: var(--space-3) var(--space-4) var(--space-4); font-size: 15px; line-height: 26px; }
.ah-disclosure .ah-disclosure__body > :first-child { margin-top: 0; }
.ah-disclosure .ah-disclosure__body > :last-child { margin-bottom: 0; }

/* ---------- Option list ---------- */
.ah-options, .ah-article .ah-options { margin: var(--space-4) 0; padding: 0; border-top: 1px solid var(--line); }
.ah-option { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.ah-option .ah-option__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; }
.ah-option__name { font-size: 16px; line-height: 26px; font-weight: 600; color: var(--ink); }
.ah-option__default { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--ink-muted); }
.ah-option .ah-option__desc { margin: var(--space-1) 0 0; color: var(--ink); font-size: 15px; line-height: 26px; }
.ah-option .ah-option__desc > * { margin: 0; }
.ah-option .ah-option__desc > * + * { margin-top: var(--space-2); }
.ah-option .ah-options { margin: var(--space-3) 0 0; border-top: 0; }
.ah-option .ah-option { padding: var(--space-2) 0 var(--space-2) var(--space-4); border-bottom: 0; border-left: 2px solid var(--line); }
.ah-option .ah-option + .ah-option { margin-top: var(--space-2); }

/* ---------- Edition badges ---------- */
.ah-editions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.ah-editions__label { margin-right: var(--space-1); font-weight: 600; }
.ah-edition { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand); font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.ah-edition--off { background: transparent; color: var(--ink-muted); border: 1px dashed var(--line-strong); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------- Document list ---------- */
.ah-doclist, .ah-article .ah-doclist { margin: var(--space-4) 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ah-doclist > li, .ah-article .ah-doclist > li { margin: 0; }
.ah-doclist__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-1); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ah-doclist__link:hover { background: var(--surface-subtle); color: var(--ink); }
.ah-doclist__text { flex: 1; min-width: 0; }
.ah-doclist__title { display: block; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--brand); }
.ah-doclist__desc { display: block; margin-top: 2px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.ah-doclist__link > .ah-icon { color: var(--ink-muted); }

/* ---------- Search results (new markup) ---------- */
.ah-results__summary { margin: 0 0 var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.ah-results, .ah-article .ah-results { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ah-results > .ah-result, .ah-article .ah-results > .ah-result { margin: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.ah-result__meta { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ah-result__title { font-size: 17px; line-height: 26px; font-weight: 600; text-decoration: none; }
.ah-result__title:hover { text-decoration: underline; }
.ah-result .ah-result__text { margin: var(--space-1) 0 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.ah-results-empty { padding: var(--space-8) 0; text-align: center; color: var(--ink-muted); }
.ah-results-empty strong { display: block; margin-bottom: var(--space-1); font-size: 17px; line-height: 26px; color: var(--ink); }

/* ---------- Portal cards (new markup) ---------- */
.ah-portal { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ah-portal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.ah-portal__card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color 120ms ease-out; }
.ah-portal__card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.ah-portal__card:has(a:focus-visible) { box-shadow: var(--focus-ring); }
.ah-portal__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--brand); }
.ah-portal .ah-portal__title { margin: var(--space-2) 0 0; padding: 0; border: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.ah-portal__title a { color: var(--ink); text-decoration: none; }
.ah-portal__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ah-portal__title a:focus-visible { box-shadow: none; }
.ah-portal__card:hover .ah-portal__title a { color: var(--brand); }
.ah-portal .ah-portal__desc { flex: 1; margin: 0; font-size: 15px; line-height: 26px; color: var(--ink-muted); }
.ah-portal__flag { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--caution-soft); color: var(--caution); font-size: 13px; line-height: 22px; font-weight: 600; }
.ah-portal__more { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--brand); }

/* =====================================================================
   PAGE TYPES
   ===================================================================== */

/* ---------- 404 ---------- */
.ah-notfound { max-width: 560px; margin: 0 auto; padding: var(--space-16) var(--space-4); text-align: center; }
.ah-notfound__code { margin: 0; font-size: 64px; line-height: 64px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand); }
.ah-notfound__title { margin: var(--space-4) 0 var(--space-2); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink); }
.ah-notfound__text { margin: 0 0 var(--space-6); color: var(--ink-muted); }

/* ---------- Compact article: the simple layout (release notes inside the product updater window) ---------- */
.ah-article--compact { max-width: none; padding: var(--space-4); font-size: 15px; line-height: 24px; }
.ah-article--compact h2 { margin-top: var(--space-6); padding-top: var(--space-4); font-size: 18px; line-height: 26px; }
.ah-article--compact h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ah-article--compact h3, .ah-article--compact h4 { margin-top: var(--space-4); font-size: 15px; line-height: 24px; }
.ah-article--compact p, .ah-article--compact ul, .ah-article--compact ol { margin-bottom: var(--space-3); }

/* ---------- Print ---------- */
@media print {
  .ah-header, .ah-sidebar, .ah-toc-rail, .ah-toc-inline, .ah-drawer, .ah-scrim, .ah-backtotop, .ah-pager, .ah-footer, .ah-skip, .ah-figure__zoom, .ah-codeblock__copy, .ah-copy, .ah-viewer, .ah-lang, .ah-breadcrumb { display: none !important; }
  .ah-layout { display: block; }
  .ah-main { padding: 0; }
  .ah-article { max-width: none; }
  .ah-article h2, .ah-article h3, .ah-article h4 { break-after: avoid; page-break-after: avoid; }
  .ah-article pre, .ah-article table, .ah-article blockquote, .ah-article .alert, .ah-callout, .ah-article .ah-shot, .ah-figure { break-inside: avoid; page-break-inside: avoid; }
  .ah-article a { color: inherit; text-decoration: underline; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  html { scroll-behavior: auto !important; }
}