/* TCXC Help Center
   Read next to the members portal, often in a narrow window, by someone with a task to finish.
   Look: the TelecomsXchange brand system (claude.ai/artifact/K7fTw6z1Wkg1nXrLdnirbu) set as product documentation, in
   the manner of Apple Developer and Stripe docs: white guide pages, slate brand ink, hairlines, and dark "bookends"
   (the home hero and the footer) that stay dark in both themes. Exactly two brand hues: lime as a fill (progress,
   checks, badges, the primary button) and violet for focus. Lime-family text and small marks use --accent.
   Type: Poppins for everything, IBM Plex Mono only for values you type (IPs, prefixes, CSV columns). Self-hosted
   from /assets/fonts. Headings and buttons are sentence case. Radius by role: 6px panels, 8px buttons, 12px fields. */

:root {
  --paper: #ffffff; --surface: #ffffff; --sunk: #f6f7f8; --sunk-2: #eceef2;          /* gray-100 */
  --ink: #262d3a; --ink-2: #4b5563; --ink-3: #6b7280;   /* black-100/400/500; ink-3 is 4.6:1 on --sunk */
  --line: #e6e9ef; --line-strong: #d1d5db;               /* field-border, gray-500 */
  --lime: #dbfa60; --lime-hover: #c5e156; --lime-ink: #262d3a;   /* light-green, light-green-200, on-accent */
  --accent: #262d3a;                                     /* accent text: ink on light (lime text is unreadable on white); lime on dark */
  --mark: #dbfa60;                                       /* the brand lime as a fill: rails, rules, highlights, active marks */
  --icon-accent: #262d3a;                                /* icons and checks: ink on light, lime on dark */
  --link-line: #c5e156;                                  /* link underlines: light-green-200, the lime that still reads on white */
  --accent-soft: rgba(219, 250, 96, .33);                /* light-green-100: the highlight wash behind dark text */
  --focus: #542fbe; --focus-halo: rgba(84, 47, 190, .13); --focus-soft: #f0edf9;   /* purple, field-focus-halo, purple-100 */
  --danger: #b60e03; --danger-soft: #fdf1f0;             /* red: the only status colour, always with a message */
  --cool: #828c9f; --cool-line: #e2e8f0;                 /* blue (metadata icons), blue-300 (cool dividers) */
  --field-bg: #f8fafc; --field-border-hover: #cbd5e1; --field-ink: #0f172a; --field-label: #334155;   /* FormField */
  --tip-bg: #fbfee9; --tip-line: #e9f6b0;                /* tints of light-green for tips */
  --warn: #b60e03; --warn-bg: #fdf1f0; --warn-line: #f3c9c5;   /* warnings use the danger red, paired with a "!" and a title */
  --btn: #262d3a; --btn-ink: #ffffff;                    /* secondary dark controls, tooltips */
  --lift: 0 0 0 1px rgba(38, 45, 58, .06), 0 12px 32px -8px rgba(38, 45, 58, .18);   /* shadow-raised, softened */
  --badge: 0 1px 2px rgba(38, 45, 58, .06);
  /* the bookends: dark in both themes */
  --inv: #08090c; --inv-2: #12141a; --inv-ink: #ffffff; --inv-ink-2: rgba(255, 255, 255, .72); --inv-ink-3: rgba(255, 255, 255, .56);
  --inv-line: rgba(255, 255, 255, .12); --inv-line-strong: rgba(255, 255, 255, .28);

  --ui: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --measure: 700px;
  --col: 984px;   /* one centred column for every page: guide text + gap + "On this page" (700 + 64 + 220) */
  --side: 280px;
  --topbar: 64px;
  --r-s: 8px; --r-m: 6px; --r-f: 12px;   /* buttons, panels and cards, fields */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #000000; --surface: #0b0c10; --sunk: #111319; --sunk-2: #1a1d24;
    --ink: #ffffff; --ink-2: #b8bcc4; --ink-3: #8e939c;
    --line: #1d2027; --line-strong: #353943;
    --accent: #dbfa60; --mark: #dbfa60; --icon-accent: #dbfa60; --link-line: rgba(219, 250, 96, .6); --accent-soft: rgba(219, 250, 96, .14);
    --focus: #a38cf7; --focus-halo: rgba(163, 140, 247, .2); --focus-soft: rgba(163, 140, 247, .12);
    --danger: #ff8a80; --danger-soft: rgba(255, 138, 128, .1); --cool: #8e939c; --cool-line: #1d2027; --field-bg: #0b0c10; --field-border-hover: #4a4f5a; --field-ink: #ffffff; --field-label: #b8bcc4;
    --tip-bg: #0f1308; --tip-line: #283214;
    --warn: #ff8a80; --warn-bg: rgba(255, 138, 128, .08); --warn-line: rgba(255, 138, 128, .3);
    --btn: #ffffff; --btn-ink: #08090c;
    --lift: 0 0 0 1px #1d2027, 0 20px 48px -20px rgba(0, 0, 0, .8);
    --badge: none;
    --inv: #08090c; --inv-2: #101217;
  }
}
:root[data-theme="dark"] {
  --paper: #000000; --surface: #0b0c10; --sunk: #111319; --sunk-2: #1a1d24;
  --ink: #ffffff; --ink-2: #b8bcc4; --ink-3: #8e939c;
  --line: #1d2027; --line-strong: #353943;
  --accent: #dbfa60; --mark: #dbfa60; --icon-accent: #dbfa60; --link-line: rgba(219, 250, 96, .6); --accent-soft: rgba(219, 250, 96, .14);
  --focus: #a38cf7; --focus-halo: rgba(163, 140, 247, .2); --focus-soft: rgba(163, 140, 247, .12);
  --danger: #ff8a80; --danger-soft: rgba(255, 138, 128, .1); --cool: #8e939c; --cool-line: #1d2027; --field-bg: #0b0c10; --field-border-hover: #4a4f5a; --field-ink: #ffffff; --field-label: #b8bcc4;
  --tip-bg: #0f1308; --tip-line: #283214;
  --warn: #ff8a80; --warn-bg: rgba(255, 138, 128, .08); --warn-line: rgba(255, 138, 128, .3);
  --btn: #ffffff; --btn-ink: #08090c;
  --lift: 0 0 0 1px #1d2027, 0 20px 48px -20px rgba(0, 0, 0, .8);
  --badge: none;
  --inv: #08090c; --inv-2: #101217;
}

/* ------------------------------------------------------------------ motion
   Moving between pages cross-fades the content while the top bar and sidebar stay put (cross-document view
   transitions; browsers without them just navigate). Folding sections open smoothly; hovers ease in. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.side { view-transition-name: side; z-index: 15; }   /* the name makes .side its own stacking context: lift it so the search results it holds paint over the page (and stay under the header, 20) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
:root { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: clip; transition: block-size .22s cubic-bezier(.2, .8, .2, 1), content-visibility .22s allow-discrete; }
details[open]::details-content { block-size: auto; }
a, button, summary, .search-box, .act, .icon-btn, .aud-card, .sec-group a, .start-list a, .nav-list a, .side-sec-h, .pager .next {
  transition: color .14s ease, background-color .14s ease, border-color .14s ease, opacity .14s ease, text-decoration-color .14s ease; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar) + 24px); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15.5px/1.65 var(--ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
code { font: 500 .86em var(--mono); background: var(--sunk); border: 1px solid var(--line); padding: .08em .38em; border-radius: 6px; white-space: nowrap; }
/* code blocks: a command or sample to copy; scrolls sideways on narrow screens instead of widening the page */
pre { margin: 1.2em 0 1.6em; padding: 14px 16px; overflow-x: auto; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-m); font: 400 14px/1.55 var(--mono); -webkit-overflow-scrolling: touch; }
pre code { font: inherit; background: none; border: 0; padding: 0; white-space: pre; }
code.copyable { position: relative; cursor: copy; }
code.copyable:hover { border-color: var(--line-strong); background: var(--surface); }
code.copyable.copied { border-color: var(--ink-3); }
code.copyable.copied::after { content: "Copied"; position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0; padding: 4px 8px; border-radius: 6px; background: var(--btn); color: var(--btn-ink); font: 500 11.5px/1 var(--ui); white-space: nowrap; animation: rise .14s ease-out; pointer-events: none; }
strong { font-weight: 600; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--ui); font-weight: 600; letter-spacing: -.022em; margin: 0; color: var(--ink); }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; } .skip:focus { left: 12px; z-index: 40; background: var(--surface); color: var(--ink); padding: 8px 12px; border: 1px solid var(--line); }
@keyframes rise { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ top bar: full width, quiet */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.read-line { display: none; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.topbar.reading .read-line { display: block; }
.read-line i { display: block; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
.topbar-in { display: flex; align-items: center; gap: 16px; height: var(--topbar); padding: 0 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.logo { height: 22px; width: auto; display: block; } .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } }
:root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: block; }
.brand-tag { font: 500 14px/1 var(--ui); color: var(--ink-2); padding-left: 12px; border-left: 1px solid var(--line-strong); }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 2px; font: 500 14px/1 var(--ui); }
.topnav > a:not(.cta) { position: relative; color: var(--ink-2); text-decoration: none; padding: 10px 12px; border-radius: var(--r-s); }
.topnav > a:not(.cta):hover { color: var(--ink); }
.topnav > a[aria-current="true"] { color: var(--ink); }
/* the current tab: a short lime bar on the top bar's bottom edge */
.topnav > a[aria-current="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -13px; height: 3px; border-radius: 3px 3px 0 0; background: var(--lime); }
.topnav .tab-sep { width: 1px; height: 20px; margin: 0 8px; background: var(--line-strong); }
.topnav .cta { margin-left: 10px; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: 4px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { color: var(--ink); background: var(--sunk); } .icon-btn svg { width: 17px; height: 17px; }
.theme-btn .i-sun { display: none; } :root[data-theme="dark"] .theme-btn .i-sun { display: block; } :root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-btn .i-sun { display: block; } :root:not([data-theme]) .theme-btn .i-moon { display: none; } }
/* the top-bar search exists for narrow screens, where the sidebar (and its search) is hidden */
.top-search, .search-toggle { display: none; }
@media (max-width: 1023px) {
  .search-toggle { display: inline-grid; }
  .top-search { position: absolute; left: 0; right: 0; top: 100%; padding: 10px 24px 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .topbar.searching .top-search { display: block; animation: rise .14s ease-out; }
  .topbar.searching .search-toggle { background: var(--sunk); color: var(--ink); }
  .top-search .results { min-width: 0; }
}
@media (max-width: 600px) { .brand-tag { display: none; } .topbar-in { gap: 8px; padding: 0 16px; } .topnav > a:not(.cta) { padding: 10px 7px; } .topnav > a[aria-current="true"]::after { left: 7px; right: 7px; } .topnav .tab-sep, .topnav .tab-api { display: none; } .logo { height: 18px; } .top-search { padding: 10px 16px 12px; } }


/* ------------------------------------------------------------------ shell: sidebar + page */
/* the footer sits beside the sidebar, not under it: the sidebar stays pinned all the way to the end of the page */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: calc(100vh - var(--topbar)); }
.shell > .side { grid-row: 1 / span 2; }
.shell > .foot { grid-column: -2; }
main { min-width: 0; }
@media (max-width: 1023px) { .shell { grid-template-columns: minmax(0, 1fr); } .side { display: none !important; } }

.side { position: sticky; top: var(--topbar); align-self: start; height: calc(100vh - var(--topbar)); display: flex; flex-direction: column; border-right: 1px solid var(--line); font-size: 14px; }
.side-search { padding: 20px 20px 8px; position: relative; z-index: 25; }
.side-search .results { right: auto; width: min(560px, calc(100vw - var(--side) + 220px)); }
.side-nav { flex: 1; overflow: auto; padding: 12px 12px 40px; scrollbar-width: thin; }
.side-sec + .side-sec { margin-top: 18px; }
.side-sec-h { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-s); color: var(--ink); text-decoration: none; font-weight: 600; }
.side-sec-h:hover, .side-sec-h[aria-current="page"] { background: var(--sunk); }
.aud-icon { width: 20px; height: 20px; flex: none; }   /* the portal's menu icon size */
.side-sec-h .aud-icon { color: var(--icon-accent); }
.side-group summary { position: relative; display: block; padding: 6px 8px 6px 30px; border-radius: var(--r-s); color: var(--ink-2); cursor: pointer; list-style: none; line-height: 1.4; }
.side-group summary::-webkit-details-marker { display: none; }
.side-group summary::before { content: ""; position: absolute; left: 13px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s; }
.side-group[open] summary::before { transform: rotate(45deg); margin-top: -5px; }
.side-group summary:hover { color: var(--ink); background: var(--sunk); }
.side-group[open] summary { color: var(--ink); }
.side-group .nav-list { margin: 2px 0 8px 16px; border-left: 1px solid var(--line); }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a { position: relative; display: block; margin-left: -1px; padding: 5px 30px 5px 15px; border-left: 1.5px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.45; }
.nav-list a:hover { color: var(--ink); }
.nav-list a[aria-current="page"] { color: var(--ink); font-weight: 500; border-left: 3px solid var(--mark); background: linear-gradient(90deg, var(--sunk), transparent); }

/* a guide you've marked done carries a lime check, wherever it's listed */
.nav-list a.is-done::after, .sec-group a.is-done .g-t::after, .related a.is-done::after { content: ""; display: inline-block; width: 9px; height: 4.5px; border-left: 2px solid var(--icon-accent); border-bottom: 2px solid var(--icon-accent); transform: translateY(-.25em) rotate(-45deg); margin-left: .55em; }
.nav-list a.is-done::after { position: absolute; right: 10px; top: 50%; margin: -4px 0 0; transform: rotate(-45deg); }

/* page column for home and section pages */
/* every page (home, section, guide) sits in the same centred column, so edges don't move as you navigate */
.page-col, .doc { box-sizing: content-box; max-width: var(--col); margin: 0 auto; padding: 48px 40px 112px; }
@media (max-width: 760px) { .page-col, .doc { padding: 24px 16px 80px; } }

/* ------------------------------------------------------------------ search */
.search { position: relative; }
.search-box { display: flex; align-items: center; gap: 10px; background: var(--field-bg); border: 1.5px solid var(--line); border-radius: var(--r-f); padding: 0 14px; transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); }
.search-box:hover { border-color: var(--field-border-hover); background: var(--surface); }
.search-box:focus-within { border-color: var(--focus); background: var(--surface); box-shadow: 0 0 0 4px var(--focus-halo); }
.search-box svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--field-ink); font: 500 16px/1.3 var(--ui); padding: 12px 0; outline: none; }
.search input::placeholder { font-weight: 400; }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd, .results kbd { font: 500 11.5px/1 var(--ui); color: var(--ink-3); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; background: var(--sunk); }
.search-box:focus-within kbd { visibility: hidden; }
.search-sm .search-box { border-radius: var(--r-s); border-color: var(--line-strong); padding: 0 10px; gap: 8px; }
.search-sm input { font-size: 14px; padding: 8px 0; }
.search-sm .search-box svg { width: 15px; height: 15px; }

.results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); min-width: 380px; list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--lift); z-index: 30; max-height: min(70vh, 600px); overflow: auto; overscroll-behavior: contain; animation: rise .14s ease-out; text-align: left; }
.results a { display: block; padding: 11px 12px 12px; border-radius: var(--r-s); text-decoration: none; color: var(--ink); scroll-margin: 6px; }
.results a[aria-selected="true"], .results a:hover { background: var(--sunk); }
.results .r-head { display: flex; align-items: baseline; gap: 12px; }
.results .r-title { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; line-height: 1.35; }
.results .r-sec { flex: none; font-size: 12.5px; color: var(--ink-3); }
.results .r-path { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--ink-2); }
.results .r-path::before { content: ""; display: inline-block; width: 8px; height: 7px; margin: 0 8px 0 2px; vertical-align: .18em; border-left: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); border-bottom-left-radius: 3px; }
.results small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ink-3); font-size: 13px; line-height: 1.55; margin-top: 4px; }
.results mark { background: none; color: var(--ink); font-weight: 600; box-shadow: inset 0 -.45em 0 var(--accent-soft); }
.results .r-title mark { font-weight: inherit; }
.results .r-empty { padding: 14px 12px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.results .r-empty strong { display: block; color: var(--ink); margin-bottom: 2px; }
.results .r-empty a { display: inline; padding: 0; margin: 0; background: none; }
.results .r-foot { display: flex; gap: 18px; margin: 6px -6px -6px; padding: 9px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); background: var(--surface); position: sticky; bottom: -6px; }
.results .r-foot kbd { padding: 2px 5px; margin-right: 3px; }
@media (max-width: 600px), (hover: none) { .results .r-foot { display: none; } .search kbd { display: none; } }

/* ------------------------------------------------------------------ home
   A dark hero bookend across the content area, then audiences as an editorial block and "Start here" as a quiet
   stepper (the brand rejects icon-card grids). */
/* the hero follows the theme (only the header and footer stay dark in light mode): a soft wash into the page */
.home-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sunk) 0%, var(--paper) 100%); color: var(--ink); text-align: center; padding: clamp(56px, 8vw, 104px) 24px clamp(56px, 7vw, 88px); border-bottom: 1px solid var(--line); }
/* one quiet mark of the exchange: a fine grid that fades out towards the search */
.home-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 0%, transparent 72%); opacity: .7; }
.home-hero > * { position: relative; }
.hero-in { max-width: 760px; margin: 0 auto; }
.home-hero h1 { color: var(--ink); font-size: clamp(34px, 4.8vw, 54px); font-weight: 400; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance; }
.home-hero h1 span { font-weight: 600; color: var(--ink); padding: 0 .08em; background: linear-gradient(transparent 60%, var(--lime) 60%, var(--lime) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }   /* split-weight heading: a lime highlighter on light */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-hero h1 span { color: var(--lime); background: none; padding: 0; } }
:root[data-theme="dark"] .home-hero h1 span { color: var(--lime); background: none; padding: 0; }
.home-hero .lede { margin: 0 auto 32px; max-width: 48ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: balance; }
.home-hero .search { max-width: 560px; margin: 0 auto; }
.home-hero .search-box { background: var(--paper); border-color: var(--line-strong); box-shadow: 0 12px 32px rgba(38, 45, 58, .08); }
.home-hero .search input { padding: 15px 0; font-size: 16px; }
.home-hero .results { text-align: left; color: var(--ink); }
.popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-3); }
.popular .pop-h { margin-right: 4px; font-weight: 500; }
.popular a { display: inline-block; padding: 6px 14px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
@media (max-width: 560px) {   /* phones: one row that scrolls sideways, fading at the edges, instead of four wrapped rows */
  .popular { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 20px -24px 0; padding: 2px 24px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
  .popular::-webkit-scrollbar { display: none; }
  .popular li { flex: none; }
}
.popular a:hover { color: var(--ink); border-color: var(--mark); background: var(--accent-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-hero .search-box { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); } }
:root[data-theme="dark"] .home-hero .search-box { box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.home.page-col { padding-top: 0; }

/* audiences: two editorial columns, each listing its topic groups */
.aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; padding: 64px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 1180px) and (min-width: 861px) { .aud { grid-template-columns: 1fr 1fr; } .aud-col:last-child { grid-column: 1 / -1; } .aud-col:last-child .aud-topics { columns: 2; column-gap: 48px; } .aud-col:last-child .aud-topics li { break-inside: avoid; } }
.aud-col h2 { display: flex; align-items: center; gap: 12px; font-size: 24px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 8px; }
.aud-col h2 a { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.aud-col h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.aud-col h2 .aud-icon { width: 26px; height: 26px; stroke-width: 1.5; color: var(--icon-accent); }
.aud-col > p { margin: 0 0 20px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 40ch; }
.aud-topics { list-style: none; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--line); }
.aud-topics li { border-bottom: 1px solid var(--line); }
.aud-topics a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.aud-topics a:hover { color: var(--accent); }
.aud-topics .n { flex: none; font: 500 12.5px/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.aud-more { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.aud-more a { color: var(--ink-2); font-weight: 500; }
.aud-more a:hover { color: var(--ink); }

.start { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; padding: 64px 0; border-bottom: 1px solid var(--line); }
.start:last-child { border-bottom: 0; }
.start-intro h2 { font-size: 30px; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 12px; text-wrap: balance; }
.start-intro p { margin: 0 0 20px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.start-intro .all { font-size: 14px; color: var(--ink-2); font-weight: 500; }
/* the stepper: a thin rule over each step, monospace numerals, no boxes */
.start-list { list-style: none; margin: 0; padding: 0; }
.start-list li { border-top: 1px solid var(--line); }
.start-list li:last-child { border-bottom: 1px solid var(--line); }
.start-list a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; padding: 18px 0 20px; color: var(--ink); text-decoration: none; }
.sl-n { grid-row: 1 / span 2; position: relative; padding-top: 2px; font: 500 13px/1.4 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.sl-t { font-weight: 600; font-size: 15.5px; line-height: 1.4; }
.sl-d { color: var(--ink-2); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.start-list a:hover .sl-t { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.start-list a.is-done .sl-n { color: transparent; }
.start-list a.is-done .sl-n::after { content: ""; position: absolute; left: 1px; top: 6px; width: 10px; height: 5px; border-left: 2px solid var(--icon-accent); border-bottom: 2px solid var(--icon-accent); transform: rotate(-45deg); }
.start-list a.is-done .sl-t { color: var(--ink-2); }
@media (max-width: 860px) { .start, .aud { grid-template-columns: 1fr; gap: 40px; padding: 48px 0; } }

/* your place on a path (home, section pages) */
.path-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px 16px; margin: 0 0 20px; max-width: 420px; }
.path-progress .pp-bar { grid-column: 1 / -1; }
.pp-count { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-next { justify-self: end; max-width: 100%; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-bar, .pp-bar { height: 4px; border-radius: 4px; background: var(--sunk-2); overflow: hidden; }
.sp-bar i, .pp-bar i { display: block; height: 100%; background: var(--lime); border-radius: 4px; transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }

/* ------------------------------------------------------------------ section page */
.sec-head h1 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -.03em; margin: 24px 0 12px; }
.sec-head .lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 0 28px; max-width: 48ch; }
.sec-body { padding-top: 8px; max-width: 760px; }
.sec-group { padding: 36px 0 0; scroll-margin-top: calc(var(--topbar) + 24px); }
.sec-group h2 { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); margin: 0 0 4px; }
.sec-group h2 .n { font: 500 12px/1 var(--mono); }
.sec-group ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.sec-group li { border-bottom: 1px solid var(--line); }
.sec-group a { position: relative; display: block; padding: 18px 40px 19px 0; text-decoration: none; color: var(--ink); }
.sec-group a::after { content: ""; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid var(--ink-3); border-top: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .3s var(--ease), border-color .14s; }
.sec-group a:hover::after { transform: translateX(3px) rotate(45deg); border-color: var(--icon-accent); }
.sec-group a:hover .g-t { color: var(--accent); }
.sec-group .g-t { display: block; font-weight: 600; font-size: 16px; line-height: 1.4; transition: color .14s; }
.sec-group .g-d { display: block; margin-top: 4px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; max-width: 64ch; }

/* ------------------------------------------------------------------ guide layout */
.doc { display: grid; grid-template-columns: minmax(0, var(--measure)) 220px; gap: 64px; justify-content: space-between; }
.toc { position: sticky; top: calc(var(--topbar) + 48px); align-self: start; max-height: calc(100vh - var(--topbar) - 64px); overflow: auto; font-size: 13.5px; scrollbar-width: thin; }
@media (max-width: 1339px) { .doc { grid-template-columns: minmax(0, var(--measure)); } .toc { display: none; } }
.side-h { font: 600 13px/21px var(--ui); color: var(--ink); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc ol a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1.5px solid transparent; color: var(--ink-3); text-decoration: none; line-height: 1.45; }
.toc ol a:hover { color: var(--ink); }
.toc ol a.active { color: var(--ink); font-weight: 500; border-left-color: var(--mark); }
.steps-progress { margin-top: 28px; }
.steps-progress .side-h { display: none; }
.sp-count { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.try { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.try p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.try-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: var(--r-s); border: 1px solid var(--line-strong); color: var(--ink); font: 500 13.5px/1.3 var(--ui); text-decoration: none; }
.try-btn:hover { background: var(--sunk); }
.try-btn svg { width: 14px; height: 14px; }

/* "On this page" as a sticky bar wherever the right column is hidden */
.mini-toc { display: none; position: sticky; top: var(--topbar); z-index: 6; margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--r-m); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mini-toc summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 14px; min-width: 0; }
.mini-toc summary::-webkit-details-marker { display: none; }
.mini-toc summary::after { content: ""; order: 4; flex: none; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.mini-toc[open] summary::after { transform: translateY(2px) rotate(225deg); }
.mt-label { flex: none; font-weight: 600; color: var(--ink-3); font-size: 13px; }
.mt-steps { flex: none; order: 3; margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mini-toc summary:has(.mt-steps:not([hidden]))::after { margin-left: 0; }
.mt-cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.mini-toc ol { list-style: none; margin: 0; padding: 4px 6px 8px; border-top: 1px solid var(--line); max-height: 60vh; overflow: auto; }
.mini-toc a { display: block; padding: 9px 10px; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; font-size: 14.5px; line-height: 1.4; }
.mini-toc a.active { color: var(--ink); font-weight: 500; background: var(--sunk); }
@media (max-width: 1339px) { .mini-toc { display: block; } html { scroll-padding-top: calc(var(--topbar) + 72px); } }  /* land headings below the sticky bar */
@media (max-width: 760px) { .mini-toc.stuck { margin-left: -16px; margin-right: -16px; border-radius: 0; border-width: 0 0 1px; } }

/* narrow screens: the topic tree folds above the guide */
.sec-nav { display: none; margin: 0 0 24px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.sec-nav summary { cursor: pointer; padding: 11px 14px; font-weight: 500; font-size: 14.5px; list-style: none; display: flex; align-items: center; gap: 12px; }
.sec-nav summary::-webkit-details-marker { display: none; }
.sec-nav summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: translateY(-2px) rotate(45deg); transition: transform .2s; flex: none; }
.sec-nav[open] summary::after { transform: translateY(2px) rotate(225deg); }
.sec-nav .nav-group { padding: 0 14px; margin: 10px 0 14px; }
.sec-nav .group-h { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 0 0 4px; }
.sec-nav .nav-list { border-left: 1px solid var(--line); }
@media (max-width: 1023px) { .sec-nav { display: block; } }

/* ------------------------------------------------------------------ guide: head */
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 14px; line-height: 21px; color: var(--ink-3); margin: 0; }
.crumbs a { color: var(--ink-3); text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.crumbs .sep { margin: 0 8px; color: var(--line-strong); }
.crumbs [aria-current] { color: var(--ink); }
@media (max-width: 760px) { .art .crumbs [aria-current], .art .crumbs .sep:nth-last-child(2) { display: none; } }  /* the h1 right below says it */
.art { min-width: 0; }
.art .crumbs { margin-bottom: 40px; }
.art h1 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 18px; max-width: 19em; text-wrap: balance; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0 0 32px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; color: var(--ink-3); font-size: 14px; margin: 0; }
.meta > span + span::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 12px; vertical-align: -1px; background: var(--line-strong); }
.meta-done { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; }
.meta-done::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--icon-accent); border-bottom: 2px solid var(--icon-accent); transform: translateY(-2px) rotate(-45deg); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.act { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); color: var(--ink-2); font: 500 13px/1 var(--ui); text-decoration: none; cursor: pointer; }
.act:hover, .act[aria-expanded="true"] { color: var(--ink); background: var(--sunk); }
.act svg { width: 15px; height: 15px; flex: none; }
.act-share-wrap { position: relative; }
.share-menu { position: absolute; z-index: 12; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--lift); animation: rise .14s ease-out; }
.act-ai + .share-menu { min-width: 232px; }
.share-menu.from-left { right: auto; left: 0; }   /* set by kb.js when the menu would stick out left of the text column */
.share-menu a, .share-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 400 14px/1.2 var(--ui); text-decoration: none; text-align: left; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover, .share-menu :focus-visible { background: var(--sunk); outline: none; }
.share-menu svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.sm-h { margin: 0 0 2px; padding: 6px 10px 4px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.sm-sep { margin: 6px -6px; border: 0; border-top: 1px solid var(--line); }
/* phones: the meta wraps, so items are spaced rather than divided (a divider would start a line) */
@media (max-width: 520px) { .meta { gap: 4px 16px; } .meta > span + span::before { display: none; } }
.print-head, .print-foot, .faq-print { display: none; }

/* the short answer: a soft callout with an icon, like a note on a product doc */
/* the short answer as a brand FeatureCard: a near-white panel with a 4px lime rule in place of an icon */
.answer { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 0 0 40px; padding: 20px 24px 20px 34px; background: #fbfbfb; border: 1px solid var(--line); border-radius: var(--r-m); }
.answer::before { content: ""; position: absolute; left: 16px; top: 22px; bottom: 22px; width: 4px; border-radius: 4px; background: var(--lime); }
.answer svg { display: none; }
.answer svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--icon-accent); }
.answer p { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 15px; line-height: 1.7; color: var(--ink); }
/* long hostnames and URLs break rather than widen narrow screens */
.prose, .qz legend, .qz-opt span, .qz-why { overflow-wrap: anywhere; min-width: 0; }

/* ------------------------------------------------------------------ guide: body */
.prose { font-size: 16px; line-height: 1.75; color: var(--ink); text-wrap: pretty; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.025em; margin: 2.4em 0 .7em; text-wrap: balance; }
.prose h3 { font-size: 17.5px; line-height: 1.4; letter-spacing: -.015em; margin: 1.9em 0 .55em; }
.prose > h2:first-child { margin-top: .4em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.3em; } .prose ul li { margin: .4em 0; padding-left: .2em; }
.prose ul li::marker { color: var(--ink-3); }
.prose em { color: var(--ink-2); }
.prose :target { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--accent-soft); box-shadow: 0 0 0 8px var(--accent-soft); } to { background: transparent; box-shadow: 0 0 0 8px transparent; } }
.prose .anchor { margin-left: .3em; color: var(--ink-3); text-decoration: none; font-weight: 400; opacity: 0; }
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus-visible, .prose .anchor.copied { opacity: 1; }
.prose .anchor.copied::after { content: "Link copied"; margin-left: 8px; font: 500 13px var(--ui); color: var(--ink-2); vertical-align: middle; }

/* steps: round number badges on a thin rail. With JS each badge is a button that ticks the step off;
   ticked badges fill lime and the rail behind them turns lime too. */
.prose ol { list-style: none; padding: 0; margin: .4em 0 1.8em; counter-reset: step; }
.prose ol > li { position: relative; padding: 0 0 1.2em 44px; counter-increment: step; min-height: 28px; }
.prose ol > li::before { content: ""; position: absolute; left: 13.5px; top: 34px; bottom: 4px; width: 1px; background: var(--line-strong); }
.prose ol > li:last-child { padding-bottom: .2em; } .prose ol > li:last-child::before { display: none; }
.prose ol > li::after, .step-check { position: absolute; left: 0; top: 1px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--badge); font: 500 12.5px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.prose ol > li::after { content: counter(step); }
.prose ol ol, .prose ul ol { margin-top: .6em; }
.prose ol.live > li::after { display: none; }
.step-check { padding: 0; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.step-check:hover { border-color: var(--ink-3); color: var(--ink); }
.step-check:active { transform: scale(.94); }
.ticked > .step-check { background: var(--lime); border-color: var(--lime); color: transparent; box-shadow: none; }
.ticked > .step-check::after { content: ""; position: absolute; width: 10px; height: 5px; border-left: 2px solid var(--lime-ink); border-bottom: 2px solid var(--lime-ink); transform: translateY(-1px) rotate(-45deg); }
.prose ol > li.ticked { color: var(--ink-2); }
.prose ol > li.ticked::before { background: var(--lime); }

/* screenshots: column width, framed like a window on a light mat, sharp at any density (srcset serves 2x on retina).
   Nothing moves on hover: a transform would land the image on a sub-pixel and blur it. */
.prose > .shot { margin: 1.8em 0 2.4em; }
.shot button { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-m); background: none; cursor: zoom-in; position: relative; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--r-m); background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 2px 8px -4px rgba(20, 20, 24, .10); transition: box-shadow .2s ease; }
.shot button:hover img { box-shadow: 0 0 0 1px var(--line-strong), 0 6px 18px -8px rgba(20, 20, 24, .18); }
.shot button::after { content: "Enlarge"; position: absolute; right: 12px; bottom: 12px; background: var(--btn); color: var(--btn-ink); font: 500 12px/1 var(--ui); padding: 7px 10px; border-radius: 6px; opacity: 0; transition: opacity .15s; }
.shot button:hover::after, .shot button:focus-visible::after { opacity: 1; }
.shot figcaption { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin-top: 10px; text-align: center; }
@media (max-width: 600px) { .shot img { border-radius: 8px; } .shot button::after { display: none; } }
.shot .shot-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot .shot-light { display: none; } :root:not([data-theme="light"]) .shot .shot-dark { display: block; }
  :root:not([data-theme="light"]) .shot .shot-any { filter: brightness(.86) contrast(1.04); }
}
:root[data-theme="dark"] .shot .shot-light { display: none; } :root[data-theme="dark"] .shot .shot-dark { display: block; }
:root[data-theme="dark"] .shot .shot-any { filter: brightness(.86) contrast(1.04); }
.zoom { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.zoom::backdrop { background: rgba(10, 10, 12, .9); }
.zoom[open] .zoom-in img { animation: zoomin .2s ease-out; }
@keyframes zoomin { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.zoom-in { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; padding: 64px 24px 24px; cursor: zoom-out; }
.zoom img { max-width: min(1600px, 100%); height: auto; border-radius: 8px; }
.zoom-close { position: fixed; top: 14px; right: 16px; background: #fff; color: #1c1d1f; border: 0; border-radius: var(--r-s); padding: 8px 14px; font: 500 14px var(--ui); cursor: pointer; }
.zoom-cap { position: fixed; top: 20px; left: 24px; right: 120px; color: #ececee; font: 500 14.5px var(--ui); margin: 0; }

/* tables */
.prose > .table-wrap { overflow-x: auto; margin: 1.3em 0 2em; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.5; }
.prose th, .prose td { padding: 12px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose tr:last-child td { border-bottom: 0; }
.prose th { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--sunk); padding-top: 10px; padding-bottom: 10px; border-bottom-color: var(--line-strong); }
.prose td:first-child { min-width: 9em; }

/* tips and warnings: tinted callouts */
.admonition { border-radius: var(--r-m); padding: 15px 20px 16px; margin: 1.6em 0 1.8em; background: var(--tip-bg); border: 1px solid var(--tip-line); font-size: 15.5px; line-height: 1.65; }
.admonition p { margin: 0 0 .4em; } .admonition p:last-child { margin: 0; }
.prose .admonition-title { font: 600 14px/1.3 var(--ui); display: flex; align-items: center; gap: 8px; margin: 0 0 .4em; color: var(--ink); }
.admonition.tip .admonition-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 3px var(--accent-soft); }
.admonition.warning { background: var(--warn-bg); border-color: var(--warn-line); }
.prose .admonition.warning .admonition-title { color: var(--warn); }
.admonition.warning .admonition-title::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--warn); color: var(--warn-bg); font: 700 11px/1 var(--ui); }

/* FAQ */
.faq { margin-top: 3.2em; max-width: var(--measure); }
.faq h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.025em; margin: 0 0 .6em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; font-weight: 500; font-size: 16px; line-height: 1.45; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 22px/1 var(--ui); color: var(--ink-3); transition: transform .2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -2px 0 16px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; animation: rise .18s ease-out; }

/* ------------------------------------------------------------------ guide: end */
.after { margin-top: 3.2em; max-width: var(--measure); }
.finish { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.finish p { margin: 0; color: var(--ink-2); font-size: 15px; }
.done-btn { display: inline-flex; align-items: center; gap: 9px; font: 500 14px/1 var(--ui); padding: 9px 13px 9px 11px; border-radius: var(--r-s); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.done-btn::before { content: ""; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line-strong); background: var(--surface); }
.done-btn:hover { background: var(--sunk); }
.done-btn[aria-pressed="true"]::before { background: var(--lime); border-color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%230c0d0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pager { display: grid; gap: 12px; margin: 0 0 48px; }
.pager .next { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); text-decoration: none; }
.pager .next:hover { background: var(--sunk); }
.pager small { grid-column: 1; font-size: 13.5px; color: var(--ink-3); }
.pager .pg-t { grid-column: 1; font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
.pager .pg-d { grid-column: 1; margin-top: 2px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.pager .pg-go { grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); transition: transform .2s ease, background-color .14s ease; }
.pager .next:hover .pg-go { background: var(--surface); }
.pager .pg-go svg { width: 18px; height: 18px; }
.pager .next:hover .pg-go { transform: translateX(3px); }
.pager .next.is-done small::after { content: ", done"; }
.pager .prev { justify-self: start; color: var(--ink-3); font-size: 14px; text-decoration: none; }
.pager .prev:hover { color: var(--ink); text-decoration: underline; }
.related h2, .help h2 { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink); margin: 0 0 8px; }
.related ul { list-style: none; margin: 0 0 32px; padding: 0; }
.related a { display: inline-block; padding: 3px 0; }
.help { padding-top: 20px; border-top: 1px solid var(--line); }
.help p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.build { margin: 20px 0 0; color: var(--ink-3); font-size: 13px; }
.build a { color: var(--ink-3); }

/* ------------------------------------------------------------------ footer: the closing dark bookend */
.foot { background: var(--inv); color: var(--inv-ink-3); font-size: 14px; padding: 56px 0 32px; }
.foot-in { box-sizing: content-box; max-width: var(--col); margin: 0 auto; padding: 0 40px; }  /* the page column's edges */
@media (max-width: 760px) { .foot-in { padding: 0 16px; } }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; padding-bottom: 40px; border-bottom: 1px solid var(--inv-line); }
.foot-brand .logo { height: 22px; display: block; margin: 0 0 14px; }
.foot-brand p { margin: 0; max-width: 30ch; color: var(--inv-ink-3); line-height: 1.6; }
.foot h2 { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--inv-ink); margin: 0 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { color: var(--inv-ink-2); text-decoration: none; }
.foot a:hover { color: var(--inv-ink); text-decoration: underline; text-decoration-color: var(--lime); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding-top: 24px; font-size: 13px; }
.foot-bottom p { margin: 0; }
.foot code { background: var(--inv-2); border-color: var(--inv-line); color: var(--inv-ink-2); }
.verified::before { content: ""; display: inline-block; vertical-align: 1px; margin-right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(219, 250, 96, .18); }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { transition: none !important; animation: none !important; }
  details::details-content { transition: none; } html { scroll-behavior: auto; } }

/* ------------------------------------------------------------------ print and PDF
   A document, not a web page. Always light. A title block with the logo and the guide's place in its path, the
   short answer, the guide; running page numbers. Screenshots sit with their step; FAQ answers print in full;
   related guides carry their addresses so they're usable from paper. */
@page { size: A4; margin: 18mm 17mm 22mm;
  @bottom-left { content: string(doc-title); font: 8.5pt "Poppins", sans-serif; color: #6b7280; }
  @bottom-right { content: counter(page) " / " counter(pages); font: 8.5pt "Poppins", sans-serif; color: #6b7280; } }
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme] {   /* also beats the dark-device block when JavaScript is off */
    --paper: #fff; --surface: #fff; --sunk: #f6f7f8; --sunk-2: #eceef2; --ink: #262d3a; --ink-2: #4b5563; --ink-3: #6b7280;
    --line: #e6e9ef; --line-strong: #d1d5db; --accent: #262d3a; --mark: #dbfa60; --icon-accent: #262d3a; --link-line: #c5e156; --accent-soft: #f3fbd3; --tip-bg: #f8fce9; --tip-line: #e2eeb4;
    --warn: #8a5a00; --warn-bg: #fdf7e7; --warn-line: #f0dfb0; --badge: none;
  }
  html { scroll-padding: 0; }
  body { background: #fff; color: var(--ink); font-size: 10.5pt; line-height: 1.5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar, .side, .toc, .sec-nav, .mini-toc, .pager, .foot, .anchor, .actions, .finish, .crumbs, .zoom, .skip,
  .shot button::after, .meta-done, .try, .finish-test { display: none !important; }
  .shell, .doc { display: block; padding: 0; min-height: 0; }
  .art, .answer, .faq, .after { max-width: none; }
  .art h1 { string-set: doc-title content(text); }
  /* the site header's dark band with the two-tone logo and a lime rule, as on screen in either theme */
  .print-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 22pt; padding: 11pt 14pt; background: #08090c; border-bottom: 2pt solid #dbfa60; font: 500 9pt/1.3 var(--ui); color: rgba(255, 255, 255, .72); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .print-head .ph-logo { height: 15pt; width: auto; display: block; }
  .art h1 { font-size: 26pt; line-height: 1.1; letter-spacing: -.03em; max-width: none; margin: 0 0 8pt; }
  .meta-row { margin: 0 0 16pt; }
  .meta { font-size: 9.5pt; }
  .answer { margin: 0 0 20pt; padding: 10pt 12pt 10pt 22pt; break-inside: avoid; }
  .answer::before { left: 10pt; top: 11pt; bottom: 11pt; width: 3pt; }
  .answer svg { width: 12pt; height: 12pt; margin-top: 1pt; }
  .answer p { font-size: 11pt; line-height: 1.5; }
  .prose { font-size: 10.5pt; line-height: 1.55; }
  .prose p { margin-bottom: 8pt; }
  .prose h2 { font-size: 15pt; margin: 20pt 0 7pt; break-after: avoid; }
  .prose h3 { font-size: 12pt; margin: 14pt 0 5pt; break-after: avoid; }
  .prose > h2:first-child { margin-top: 0; }
  .prose p, .prose li { orphans: 3; widows: 3; }
  .prose ol > li { padding: 0 0 8pt 28pt; min-height: 20pt; break-inside: avoid; }
  .prose ol > li::before { left: 9.5pt; top: 24pt; }
  .prose ol > li::after, .step-check { width: 19pt; height: 19pt; border-radius: 5pt; font-size: 9.5pt; color: var(--ink) !important; background: #fff !important; border-color: var(--line-strong) !important; }
  .step-check::after { display: none !important; }
  .prose ol > li.ticked { color: var(--ink); } .prose ol > li.ticked::before { background: var(--line-strong); }
  .prose > .shot { margin: 6pt 0 14pt; break-inside: avoid; }
  .shot button { padding: 0; border: 0; background: none; border-radius: 0; }
  .shot img { width: auto; max-width: 100%; max-height: 118mm; margin: 0 auto; border-radius: 3pt; box-shadow: 0 0 0 .75pt var(--line-strong); }
  .shot .shot-light, .shot .shot-any, .shot .shot-fixed { display: block !important; filter: none !important; }
  .shot .shot-dark { display: none !important; }
  .shot figcaption { margin-top: 5pt; font-size: 8.5pt; }
  .prose > .table-wrap { overflow: visible; border-radius: 4pt; margin: 8pt 0 14pt; }
  .prose table { font-size: 9.5pt; } .prose th, .prose td { padding: 5pt 8pt; } .prose tr { break-inside: avoid; } .prose thead { display: table-header-group; }
  .prose th { font-size: 9pt; }
  .admonition { padding: 8pt 10pt; margin: 8pt 0 12pt; font-size: 10pt; break-inside: avoid; }
  code.copyable { cursor: auto; } code.copyable::after { display: none; }
  .faq { margin-top: 20pt; }
  .faq h2 { font-size: 15pt; }
  .faq details { display: none !important; }
  .faq-print { display: block; margin: 0; }
  .faq-print dt { font-weight: 600; margin: 9pt 0 2pt; break-after: avoid; }
  .faq-print dd { margin: 0 0 6pt; color: var(--ink-2); font-size: 10pt; break-inside: avoid; }
  .after { margin-top: 18pt; }
  .related { break-inside: avoid; }
  .related h2, .help h2 { font-size: 9.5pt; color: var(--ink-3); }
  .related ul { margin-bottom: 14pt; } .related li { margin: 0 0 3pt; }
  .related a { padding: 0; font-weight: 500; text-decoration: none; }
  .related a::after { content: " " attr(data-abs); color: var(--ink-3); font-weight: 400; font-size: 9pt; }
  .help { padding: 8pt 10pt; break-inside: avoid; }
  .help p { font-size: 10pt; }
  .build { font-size: 8.5pt; margin-top: 10pt; }
  .print-foot { display: block; margin: 2pt 0 0; font: 8.5pt/1.4 var(--mono); color: var(--ink-3); }
  a { color: inherit; text-decoration: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: var(--ink-3); word-break: break-all; }
}

/* ---------------------------------------------------------------- Ask AI
   The guide's Ask AI menu reuses the share menu. On the home page, a quiet line under the search box. */

/* ---------------------------------------------------------------- the way to a section's test */
.side-test { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 6px 8px 6px 11px; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; line-height: 1.4; }
.side-test svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.side-test:hover, .side-test[aria-current="page"] { color: var(--ink); background: var(--sunk); }
.pp-test { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 14px; font-weight: 500; }
.pp-test svg { width: 17px; height: 17px; flex: none; }
.pp-test[hidden], .finish-test[hidden] { display: none; }
.finish-test { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--tip-line); background: var(--tip-bg); border-radius: var(--r-m); color: var(--ink-2); text-decoration: none; font-size: 15px; line-height: 1.5; }
.finish-test strong { color: var(--ink); font-weight: 600; }
.finish-test svg { width: 20px; height: 20px; color: var(--ink); }
.finish-test:hover { border-color: var(--mark); }
.finish-test:hover svg:last-child { transform: translateX(3px); }
.finish-test svg:last-child { transition: transform .2s ease; }

/* ---------------------------------------------------------------- tests */
/* the brand's green button: lime fill, ink label, a small lift on hover */
.btn-primary, .topnav .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: var(--r-s);
  background: linear-gradient(135deg, var(--lime) 0%, rgba(219, 250, 96, .9) 100%); box-shadow: 0 2px 8px rgba(219, 250, 96, .25);
  color: var(--lime-ink); font: 600 15px/1 var(--ui); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease); }
.topnav .cta { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-primary:hover, .topnav .cta:hover { transform: translateY(-2px); background: var(--lime-hover); box-shadow: 0 6px 20px rgba(219, 250, 96, .4); color: var(--lime-ink); }
.btn-primary:focus-visible, .topnav .cta:focus-visible { outline: 2px solid var(--focus); box-shadow: 0 0 0 3px rgba(219, 250, 96, .2); }
.btn-primary:active, .topnav .cta:active { transform: none; box-shadow: none; }
@media (max-width: 440px) { .topnav a.cta { display: none; } }   /* phones: Log in moves out of the way of the tabs */
@media (max-width: 380px) { .logo { height: 16px; } .topbar-in { padding: 0 12px; gap: 4px; } .topnav > a:not(.cta) { padding: 10px 6px; font-size: 13.5px; } .topnav > a[aria-current="true"]::after { left: 6px; right: 6px; } .icon-btn { width: 32px; height: 32px; margin-left: 2px; } }
@media (max-width: 340px) { .logo { height: 14px; } .topnav > a:not(.cta) { padding: 10px 4px; font-size: 13px; } .topnav > a[aria-current="true"]::after { left: 4px; right: 4px; } }
.quiz .sec-head .lede { max-width: 52ch; }
.qz-gate { margin: -12px 0 28px; font-size: 14.5px; color: var(--ink-3); max-width: 60ch; }
.quiz-form { max-width: var(--measure); }
.qz { margin: 0 0 14px; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); scroll-margin-top: calc(var(--topbar) + 24px); }
.qz legend { float: left; width: 100%; display: flex; gap: 12px; margin: 0 0 14px; padding: 0; font-weight: 600; font-size: 16.5px; line-height: 1.45; letter-spacing: -.01em; }
.qz legend + * { clear: both; }
.qz-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -1px; border: 1px solid var(--line-strong); border-radius: var(--r-m); font: 500 12.5px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.qz-opt { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--ink); transition: border-color .12s, background .12s; }
.qz-opt:hover { background: var(--sunk); }
.qz-opt input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); }
.qz-opt:has(input:checked) { border-color: var(--ink-3); background: var(--sunk); }
.qz-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.qz-opt:has(input:disabled) { cursor: default; }
.qz.right { border-color: var(--tip-line); }
.qz.wrong { border-color: var(--warn-line); }
.qz-opt.is-answer, .qz-opt.is-answer:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.qz-opt.is-wrong, .qz-opt.is-wrong:has(input:checked) { border-color: var(--warn-line); background: var(--warn-bg); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.qz-why { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.qz-why strong { color: var(--ink); }
.qz-why a { display: inline-block; font-weight: 500; }
.qz-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin: 24px 0 0; }
.qz-left { margin: 0; color: var(--warn); font-size: 14.5px; }
.qz-left:empty { display: none; }
.qz-count { margin: 0 0 0 auto; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qz-count:empty { display: none; }
.qz-result { max-width: var(--measure); margin: 0 0 28px; padding: 22px 24px 24px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--sunk); outline: none; scroll-margin-top: calc(var(--topbar) + 24px); }
.qz-result.passed { background: var(--tip-bg); border-color: var(--tip-line); }
.qr-h { font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.qr-p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.qr-pass { margin: 18px 0 0; }
.qr-pass label { display: block; font-size: 13.5px; line-height: 20px; font-weight: 600; letter-spacing: -.005em; color: var(--field-label); margin: 0 0 8px; }
.qr-row { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-row input { flex: 1 1 240px; min-width: 0; height: 52px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-f); background: var(--field-bg); color: var(--field-ink); font: 500 16px var(--ui); transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.qr-row input:hover { border-color: var(--field-border-hover); background: var(--surface); }
.qr-row .btn-primary { height: 52px; }
.qr-row input:focus { outline: none; border-color: var(--focus); background: var(--surface); box-shadow: 0 0 0 4px var(--focus-halo); }
.qr-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-3); }
.qr-fail { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.qr-fail .act { height: 42px; padding: 0 16px; font-size: 14px; }

/* ---------------------------------------------------------------- certificates
   The certificate is a document: always light, like the PDFs, so it reads the same in a screenshot, on paper and in
   the downloaded image. */
.cert-empty h1 { font-size: clamp(30px, 3.6vw, 40px); letter-spacing: -.03em; margin: 8px 0 12px; }
.cert-empty .lede { font-size: 17px; color: var(--ink-2); max-width: 52ch; }
.cert { position: relative; aspect-ratio: 1.414; max-width: 880px; box-sizing: border-box; display: flex; flex-direction: column; padding: clamp(24px, 6%, 56px) clamp(22px, 7%, 64px);
  background: #fff; color: #262d3a; border: 1px solid #d1d5db; border-radius: 4px; box-shadow: var(--lift); overflow: hidden; container-type: inline-size; }
.cert::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--lime); }
.c-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 auto; }
.c-top svg { width: clamp(128px, 30cqi, 230px); height: auto; }
.c-kind { font-size: max(12px, 1.7cqi); font-weight: 500; color: #6b7280; }
.c-name { margin: 0; font-size: clamp(26px, 6.4cqi, 58px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.c-line { margin: 1.2cqi 0 0; font-size: clamp(14px, 2.3cqi, 21px); color: #4b5563; }
.c-title { margin: .6cqi 0 0; font-size: clamp(20px, 4.4cqi, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.c-covers { margin: 2.2cqi 0 auto; max-width: 62ch; font-size: clamp(12px, 1.75cqi, 16px); line-height: 1.5; color: #4b5563; }
.c-meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 6cqi; margin: 0; padding-top: 2.4cqi; border-top: 1px solid #e6e9ef; }
.c-meta dt { font-size: clamp(11px, 1.5cqi, 14px); color: #6b7280; }
.c-meta dd { margin: 0; font-size: clamp(13px, 2cqi, 18px); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
  .cert { aspect-ratio: auto; gap: 14px; }
  .c-meta { grid-template-columns: 1fr 1fr; }
  .cert-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cert-actions .btn-primary { grid-column: 1 / -1; }
  .cert-actions .act { justify-content: center; padding: 0 10px; }
  /* the test: tighter cards so the options keep room for their text */
  .qz { padding: 16px 14px 14px; }
  .qz legend { gap: 10px; font-size: 16px; }
  .qz-opt { gap: 10px; padding: 10px 11px; font-size: 14.5px; }
  .qz-result { padding: 18px 16px 20px; }
  .qr-h { font-size: 22px; }
  .qr-row .btn-primary, .qr-fail .btn-primary, .qr-fail .act { flex: 1 1 100%; }
  /* long typed values (URLs, endpoints) wrap on phones instead of widening the page; code blocks still scroll */
  :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
  /* ...except in tables, which scroll inside their frame: a prefix like 447 stays on one line instead of one digit per line */
  .prose td code, .prose th code { white-space: nowrap; overflow-wrap: normal; }
  .prose td, .prose th { overflow-wrap: normal; padding-left: 12px; padding-right: 12px; }
  .prose td:first-child { min-width: 5.5em; }
}
.cert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 880px; margin: 24px 0 0; }
.cert-actions .act { height: 42px; padding: 0 14px; font-size: 14px; }
.cert-note { max-width: 70ch; margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.cert-note strong { color: var(--ink-2); font-weight: 500; }
@page cert { size: A4 landscape; margin: 0; }   /* named, so the guides' PDFs keep their A4 portrait pages */
@media print {
  .cert-page { page: cert; padding: 0; max-width: none; }
  .cert-actions, .cert-note { display: none !important; }
  .cert { width: 297mm; height: 210mm; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; padding: 22mm 24mm; }
}

/* ---------------------------------------------------------------- API reference
   Stripe-style: each endpoint in two columns, what it does and its parameters on the left, the request and an example
   response on the right in dark code panels that stick while you read. The panels stay dark in both themes. */
.ref { box-sizing: content-box; max-width: 1240px; margin: 0 auto; padding: 48px 40px 112px; }
@media (max-width: 760px) { .ref { padding: 24px 16px 80px; } }
.ref-head { max-width: 760px; padding-bottom: 32px; }
.ref-head h1 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -.03em; margin: 24px 0 12px; }
.ref-head .lede { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 24px; }
.ref-overview .prose { max-width: 760px; }
.ref-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.ref-index li { border-bottom: 1px solid var(--line); }
.ref-index a { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.ref-index a:hover span:last-child { color: var(--accent); }

.m { display: inline-block; flex: none; min-width: 44px; padding: 3px 0; border-radius: 4px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .02em; text-align: center; }
.m-get { background: var(--accent-soft); color: var(--accent); }
.m-post { background: var(--focus-soft); color: var(--focus); }
.m-put, .m-patch { background: var(--sunk-2); color: var(--ink); }
.m-delete { background: var(--danger-soft); color: var(--danger); }

.ep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar) + 8px); }
.ep-doc h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.02em; margin: 0 0 10px; }
.ep-a { color: inherit; text-decoration: none; }
.ep-a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.ep-sig { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.ep-sig code { background: none; border: 0; padding: 0; font-size: 14px; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.ep-desc { margin: 0 0 18px; color: var(--ink-2); line-height: 1.7; }
.ep-note { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--tip-line); background: var(--tip-bg); border-radius: var(--r-m); font-size: 14.5px; line-height: 1.6; }
.ep-doc h4 { margin: 28px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; color: var(--ink); }
.ep-none { color: var(--ink-3); font-size: 14.5px; margin: 12px 0 0; }
.params { list-style: none; margin: 0; padding: 0; }
.params li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.p-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.p-n { background: none; border: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.p-t, .p-in { font-size: 12.5px; color: var(--ink-3); }
.p-in::before { content: "·"; margin-right: 10px; color: var(--line-strong); }
.p-req { font-size: 11.5px; font-weight: 600; color: var(--focus); }
.params p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
table.errs { width: 100%; border-collapse: collapse; font-size: 14px; }
.ep-doc .table-wrap { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-m); overflow-x: auto; }
table.errs th, table.errs td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.errs th { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--sunk); }
table.errs tr:last-child td { border-bottom: 0; }
table.errs code { white-space: normal; overflow-wrap: anywhere; }

.ep-code { position: sticky; top: calc(var(--topbar) + 24px); align-self: start; display: grid; gap: 16px; min-width: 0; }
.cp { background: var(--inv); border: 1px solid #1b1e25; border-radius: var(--r-s); overflow: hidden; color: #e6e9ef; box-shadow: 0 12px 32px -12px rgba(8, 9, 12, .45); }
.cp-h { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 14px; border-bottom: 1px solid #1b1e25; background: #0f1116; }
.cp-t { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12.5px; font-weight: 600; color: #b8bcc4; }
.cp-path { font: 500 12.5px/1.3 var(--mono); color: #e6e9ef; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp .m-get { background: rgba(219, 250, 96, .14); color: var(--lime); }
.cp .m-post { background: rgba(163, 140, 247, .16); color: #c3b4ff; }
.cp-tabs { display: flex; margin-left: auto; }
.cp-tabs button, .cp-copy { border: 0; background: none; color: #8e939c; font: 500 12.5px/1 var(--ui); padding: 8px 9px; border-radius: 6px; cursor: pointer; }
.cp-tabs button:hover, .cp-copy:hover { color: #fff; }
.cp-tabs button[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .08); }
.cp-copy { margin-left: 2px; }
.cp-resp .cp-copy, .cp-ex + .cp-copy { margin-left: auto; }
.cp-resp .cp-ex + .cp-copy { margin-left: 2px; }
.cp-ex { margin-left: auto; max-width: 55%; background: #181b22; color: #e6e9ef; border: 1px solid #2a2e37; border-radius: 6px; font: 500 12.5px var(--ui); padding: 5px 8px; }
.cp pre { margin: 0; padding: 16px 18px; border: 0; border-radius: 0; background: none; color: #e6e9ef; font: 400 13px/1.65 var(--mono); max-height: 520px; overflow: auto; }
.cp pre code { color: inherit; }
.t-k { color: #c3b4ff; } .t-s { color: var(--lime); } .t-n { color: #f0c35a; } .t-kw { color: #c3b4ff; } .t-f { color: #8ecbff; }
@media (max-width: 1100px) {
  .ep { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ep-code { position: static; }
}

/* the overview's resource list */
.ref-res-h { font-size: 23px; letter-spacing: -.025em; margin: 56px 0 8px; }
.ref-res { list-style: none; margin: 0; padding: 0; max-width: 960px; border-top: 1px solid var(--line-strong); }
.ref-res li { border-bottom: 1px solid var(--line); }
.ref-res a { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 4px 32px; align-items: baseline; padding: 18px 0; color: var(--ink); text-decoration: none; }
.ref-res a:hover .ri-t { color: var(--accent); }
.ri-t { font-weight: 600; font-size: 15.5px; }
.ri-d { color: var(--ink-2); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ri-n { font: 500 12px/1.4 var(--mono); color: var(--ink-3); white-space: nowrap; }
@media (max-width: 760px) { .ref-res a { grid-template-columns: minmax(0, 1fr) auto; } .ri-d { grid-column: 1 / -1; grid-row: 2; } }

/* the reference's sidebar: methods line up in a column */
.ref-nav .nav-list a { display: flex; align-items: baseline; gap: 8px; padding-right: 10px; }
.ref-nav .nav-list .m { min-width: 38px; font-size: 9.5px; padding: 2px 0; }
.ref-nav .side-sec-h { margin-bottom: 6px; }
@media print { .ep { display: block; break-inside: avoid; } .ep-code { position: static; margin-top: 12pt; } .cp-tabs, .cp-copy, .cp-ex { display: none !important; } .cp pre[hidden] { display: none !important; } }

/* ---------------------------------------------------------------- diagrams
   Inline SVGs (assets/diagrams/) drawn with these classes, so one file follows the theme and prints cleanly. */
.prose > .diagram { margin: 1.8em 0 2.4em; padding: 24px 20px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--sunk); }
.diagram svg { display: block; width: 100%; height: auto; font-family: var(--ui); overflow: visible; }
.diagram figcaption { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin-top: 12px; text-align: center; }
.diagram .d-box rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.diagram .d-hl rect { stroke: var(--mark); stroke-width: 2.4; }
.diagram .d-h { font-size: 16px; font-weight: 600; fill: var(--ink); }
.diagram .d-m { font-size: 13.5px; fill: var(--ink-2); }
.diagram .d-s { font-size: 12px; fill: var(--ink-3); }
.diagram .d-mono { font-family: var(--mono); font-size: 13px; fill: var(--ink); }
.diagram .d-line { stroke: var(--ink-3); stroke-width: 1.6; fill: none; }
.diagram .d-dash { stroke-dasharray: 5 4; }
.diagram .d-arrow { fill: var(--ink-3); }
.diagram .d-pill { fill: color-mix(in srgb, var(--lime) 33%, var(--surface)); stroke: color-mix(in srgb, var(--mark) 45%, transparent); }
@media print { .prose > .diagram { break-inside: avoid; padding: 10pt; } }
@media (max-width: 600px) {   /* phones: keep diagram text readable; the figure scrolls sideways instead of shrinking */
  .prose > .diagram { overflow-x: auto; padding: 16px 12px 12px; }
  .diagram svg { min-width: 600px; }
  .diagram figcaption { position: sticky; left: 0; max-width: calc(100vw - 58px); text-align: left; }
}
/* long sample paths and hashes in reference prose wrap instead of widening the page */
.ep-doc { overflow-wrap: anywhere; }
.ep-doc code { white-space: normal; }

/* ---------------------------------------------------------------- API reference: parameters and tables, readable at a glance
   Names in mono ink, types colour-coded, location and required as quiet chips, example and allowed values coloured
   like the JSON in the code panels. */
.params li { padding: 16px 0 16px; }
.p-h { gap: 6px 8px; align-items: center; }
.p-n { font: 600 14px/1.3 var(--mono); color: var(--ink); background: none; border: 0; padding: 0; }
.p-t, .p-in, .p-req, .p-opt { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font: 500 11.5px/1 var(--mono); }
.p-in::before { content: none; }
.p-t { color: var(--ink-2); background: var(--sunk); }
.p-t-string { color: var(--accent); background: var(--accent-soft); }
.p-t-integer, .p-t-number { color: var(--focus); background: var(--focus-soft); }
.p-t-boolean { color: var(--ink); background: var(--cool-line); }
.p-in { color: var(--ink-3); border: 1px solid var(--line); background: none; }
.p-req { color: var(--focus); background: var(--focus-soft); font-family: var(--ui); font-weight: 600; }   /* violet: the brand forms hue */
.p-opt { color: var(--ink-3); font-family: var(--ui); padding: 0 2px; }
.params p { margin: 8px 0 0; }
.params p code, .ep-desc code, .ep-note code, table.errs td:last-child code { font-size: .84em; color: var(--ink); background: var(--sunk); border-color: var(--line); }
.p-meta { display: grid; gap: 6px; margin-top: 10px; }
.p-meta > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.pm-k { flex: none; min-width: 58px; color: var(--ink-3); font-weight: 500; }
.pm-v { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
code.pv { font: 500 12.5px/1.5 var(--mono); background: var(--sunk); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; white-space: normal; overflow-wrap: anywhere; }
/* on light backgrounds the code-panel colours need more contrast */
code.pv .t-s, code.em .t-s { color: var(--accent); }
code.pv .t-n { color: var(--focus); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) code.pv .t-n { color: #c3b4ff; } }
:root[data-theme="dark"] code.pv .t-n { color: #c3b4ff; }

/* error tables: a framed table with a tinted header, zebra rows and the message as a coloured string */
.ep-doc .errs-wrap { margin-top: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-s); overflow: hidden; overflow-x: auto; box-shadow: var(--badge); }
table.errs { font-size: 14px; }
table.errs thead th { padding: 10px 16px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); background: var(--sunk-2); border-bottom: 1px solid var(--line-strong); }
table.errs td { padding: 12px 16px; line-height: 1.55; color: var(--ink-2); }
table.errs tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sunk) 60%, transparent); }
table.errs tbody tr:hover td { background: var(--sunk); }
table.errs td:first-child { width: 46%; }
code.em { font: 500 12.5px/1.5 var(--mono); background: none; border: 0; padding: 0; white-space: normal; overflow-wrap: anywhere; }

/* tables in the overview and guides' prose: same frame and header */
.ref .prose > .table-wrap { border-color: var(--line-strong); border-radius: var(--r-s); box-shadow: var(--badge); }
.ref .prose th { background: var(--sunk-2); font-size: 11.5px; letter-spacing: .02em; }
.ref .prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sunk) 60%, transparent); }
.ref .prose td code { color: var(--focus); }

/* ---------------------------------------------------------------- brand Tag: names the topic above a section heading */
.tag { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; padding: 6px 16px; margin: 0 0 20px; border-radius: 4px; background: var(--lime); color: var(--lime-ink); font: 500 14px/1.2 var(--ui); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .answer { background: rgba(255, 255, 255, .03); } }
:root[data-theme="dark"] .answer { background: rgba(255, 255, 255, .03); }
@media print { .answer { background: #fbfbfb !important; } .answer::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

/* ---------------------------------------------------------------- the guide's "How it works" flow
   3-5 steps joined by labelled arrows; a row on wide screens, a column on phones. Hidden on request (kb.js remembers). */
.flow { margin: -16px 0 40px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.flow > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.flow > summary::-webkit-details-marker { display: none; }
.fl-cap::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 2px; background: var(--mark); vertical-align: 1px; }
.fl-toggle { margin-left: auto; font-weight: 500; color: var(--ink-3); }
.fl-toggle::after { content: "Hide diagram"; }
.flow:not([open]) .fl-toggle::after { content: "Show diagram"; }
.flow > summary:hover .fl-toggle { color: var(--ink); }
.fl { list-style: none; margin: 0; padding: 4px 16px 20px; display: flex; align-items: stretch; gap: 0; counter-reset: fl; }
.fl-node { flex: 1 1 0; min-width: min-content; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 15px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--paper); text-align: center; justify-content: center; }
.fl-node strong { font-size: 14px; line-height: 1.3; color: var(--ink); overflow-wrap: break-word; hyphens: manual; }
.fl-node > span:not(.sr-only) { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); overflow-wrap: break-word; }
.fl-hl { border-color: var(--mark); box-shadow: 0 0 0 1px var(--mark), 0 0 0 4px var(--accent-soft); }
.fl code { font-size: 11px; padding: 0 4px; white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.fl-arrow { flex: 0 1 60px; min-width: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; }
.fl-via { font-size: 11px; line-height: 1.3; color: var(--ink-3); text-align: center; overflow-wrap: break-word; min-height: 1em; max-width: 100%; }
.fl-arrow i { position: relative; display: block; width: 100%; height: 1.5px; background: var(--ink-3); }
.fl-arrow i::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--ink-3); border-right: 0; }
/* five steps don't fit across the text column readably: they stack, as on phones */
@media (max-width: 760px) {
  .fl { flex-direction: column; padding: 4px 14px 16px; }
  .fl-node { text-align: left; min-width: 0; }
  .fl-arrow { flex: none; flex-direction: row-reverse; justify-content: flex-end; min-height: 34px; padding: 0 0 0 18px; gap: 10px; }
  .fl-arrow i { width: 1.5px; height: 26px; flex: none; }
  .fl-arrow i::after { right: auto; left: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 7px solid var(--ink-3); border-bottom: 0; }
  .fl-via { text-align: left; }
}
@media print { .flow { break-inside: avoid; margin: 0 0 14pt; } .flow:not([open]) .fl { display: flex; } .fl-toggle { display: none; } .flow > summary { padding: 6pt 8pt; } }
.fl-n5 { flex-direction: column; padding: 4px 16px 18px; }
.fl-n5 .fl-node { text-align: left; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; padding: 11px 14px; min-width: 0; }
.fl-n5 .fl-node strong { flex: 0 0 auto; min-width: 150px; }
.fl-n5 .fl-arrow { flex: none; flex-direction: row-reverse; justify-content: flex-end; min-height: 30px; padding: 0 0 0 18px; gap: 10px; }
.fl-n5 .fl-arrow i { width: 1.5px; height: 22px; flex: none; }
.fl-n5 .fl-arrow i::after { right: auto; left: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 7px solid var(--ink-3); border-bottom: 0; }
.fl-n5 .fl-via { text-align: left; }
@media (max-width: 760px) { .fl-n5 .fl-node { flex-direction: column; gap: 4px; } .fl-n5 .fl-node strong { min-width: 0; } }

/* ---------------------------------------------------------------- the top bar as a dark bookend in both themes
   Same ground as the home hero and the footer, carrying the official two-tone logo (white and lime) that the brand
   reserves for dark grounds. */
.topbar { background: color-mix(in srgb, var(--inv) 96%, transparent); border-bottom-color: var(--inv-line); color: var(--inv-ink); }
.topbar .logo-light { display: none !important; } .topbar .logo-dark { display: block !important; }
.topbar .brand-tag { color: var(--inv-ink-2); border-left-color: var(--inv-line-strong); }
.topbar .topnav > a:not(.cta) { color: var(--inv-ink-2); }
.topbar .topnav > a:not(.cta):hover, .topbar .topnav > a[aria-current="true"] { color: var(--inv-ink); }
.topbar .topnav .tab-sep { background: var(--inv-line-strong); }
.topbar .icon-btn { background: transparent; border-color: var(--inv-line-strong); color: var(--inv-ink-2); }
.topbar .icon-btn:hover, .topbar.searching .search-toggle { background: rgba(255, 255, 255, .08); color: var(--inv-ink); }
.topbar :focus-visible { outline-color: #a38cf7; }

/* ---------------------------------------------------------------- home: the three audiences as brand FeatureCards
   A near-white panel with the FeatureCard's 4px lime rule along the top. Each card is a subgrid of four rows (title,
   line, topics, footer) so the lists and footers line up across the cards whatever their lengths. */
.aud { gap: 20px; padding: 56px 0 64px; }
.aud-col { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; overflow: hidden;
  padding: 30px 28px 24px; background: #fbfbfb; border: 1px solid var(--line); border-radius: var(--r-m); transition: border-color .3s var(--ease, ease); }
.aud-col::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--lime); }
.aud-col:hover { border-color: var(--line-strong); }
.aud-col h2 { margin: 0 0 12px; padding: 0; font-size: 22px; }
.aud-col h2 a { gap: 14px; }
.aud-col h2 a:hover { text-decoration: none; }
.aud-ico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-s); background: var(--lime); color: var(--lime-ink); }
.aud-ico svg { width: 22px; height: 22px; stroke-width: 1.6; }
.aud-col > p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.aud-topics { align-self: start; margin: 0 0 24px; border-top: 1px solid var(--line); }
.aud-topics li { border-bottom: 1px solid var(--line); }
.aud-topics li:last-child { border-bottom: 0; }
.aud-topics a { align-items: center; padding: 11px 0; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.aud-topics a:hover { color: var(--ink); }
.aud-topics a:hover .t { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .22em; }
.aud-topics .n { min-width: 26px; padding: 3px 8px; border-radius: 999px; background: var(--sunk-2); color: var(--ink-2); font: 500 12px/1.2 var(--mono); text-align: center; transition: background .3s, color .3s; }
.aud-topics a:hover .n { background: var(--lime); color: var(--lime-ink); }
.aud-foot { align-self: end; padding-top: 18px; border-top: 1px solid var(--line); }
.aud-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.aud-cta svg { width: 16px; height: 16px; color: var(--icon-accent); transition: transform .3s var(--ease, ease); }
.aud-cta:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .22em; }
.aud-cta:hover svg { transform: translateX(3px); }
.aud-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 13px; }
.aud-links a { color: var(--ink-3); font-weight: 500; text-decoration: none; }
.aud-links a:hover { color: var(--ink); text-decoration: underline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aud-col { background: rgba(255, 255, 255, .03); } }
:root[data-theme="dark"] .aud-col { background: rgba(255, 255, 255, .03); }
@supports not (grid-template-rows: subgrid) { .aud-col { display: flex; flex-direction: column; } .aud-foot { margin-top: auto; } }
@media (max-width: 1180px) and (min-width: 861px) { .aud-col:last-child .aud-topics { columns: 2; column-gap: 40px; } .aud-col:last-child .aud-topics li:last-child { border-bottom: 1px solid var(--line); } }
@media (max-width: 860px) { .aud { gap: 16px; padding: 40px 0 48px; } .aud-col { padding: 26px 20px 20px; } }

/* ---------------------------------------------------------------- code blocks in guides: the API reference's dark panel */
.prose > .code { margin: 1.2em 0 1.7em; border: 1px solid #1b1e25; border-radius: var(--r-s); overflow: hidden; background: var(--inv); box-shadow: 0 12px 32px -14px rgba(8, 9, 12, .45); }
.code-h { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 8px 0 14px; background: #0f1116; border-bottom: 1px solid #1b1e25; font: 600 12px/1 var(--ui); color: #8e939c; }
.code-copy { border: 0; background: none; color: #8e939c; font: 500 12.5px/1 var(--ui); padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.code-copy:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.prose > .code pre { margin: 0; border: 0; border-radius: 0; background: none; color: #e6e9ef; font: 400 13px/1.65 var(--mono); padding: 14px 16px; }
.code .t-c { color: #7d8590; font-style: normal; }
.code .t-k { color: #c3b4ff; } .code .t-s { color: var(--lime); } .code .t-kw { color: #8ecbff; }
@media print { .prose > .code { background: #f6f7f8; border-color: #e6e9ef; box-shadow: none; } .code-h { background: #eceef2; color: #4b5563; border-color: #e6e9ef; } .code-copy { display: none; }
  .prose > .code pre { color: #262d3a; } .code .t-c { color: #6b7280; } .code .t-k { color: #542fbe; } .code .t-s { color: #8a5a00; } .code .t-kw { color: #1d4ed8; } }

/* the certificate's header: the site's dark band with the two-tone logo, a lime rule beneath (screen, PNG and print).
   The band sits flush in the card; the rest of the certificate is the padded .c-body. */
.cert::before { display: none; }
.cert { padding: 0; }
.cert .c-top { margin: 0; padding: clamp(18px, 4.2cqi, 36px) clamp(22px, 7cqi, 64px); background: #08090c; border-bottom: 5px solid var(--lime); }
.cert .c-top .c-kind { color: rgba(255, 255, 255, .72); }
.c-body { flex: 1; display: flex; flex-direction: column; padding: clamp(20px, 5cqi, 48px) clamp(22px, 7cqi, 64px) clamp(22px, 5.5cqi, 52px); }
.c-body .c-name { margin-top: auto; }
.c-body .c-covers { margin-bottom: auto; }
@media print { .cert { padding: 0; } .cert .c-top { padding: 12mm 24mm; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .c-body { padding: 14mm 24mm 18mm; } }

/* ---------------------------------------------------------------- callouts as Atlassian-style panels
   A soft tint, no border, a solid icon in the panel's colour and the text beside it (the "Tip"/"Warning" title stays
   for screen readers and print only). Types: tip (success green), warning, info, note, danger. */
.admonition { position: relative; margin: 1.5em 0 1.7em; padding: 12px 16px 12px 44px; border: 0; border-radius: 4px; background: var(--pn-bg, #dcfff1); font-size: 15px; line-height: 1.65; color: var(--ink); }
.admonition::before { content: ""; position: absolute; left: 12px; top: 11px; width: 24px; height: 24px; background: var(--pn-icon, #22a06b);
  -webkit-mask: var(--pn-glyph) center / contain no-repeat; mask: var(--pn-glyph) center / contain no-repeat; }
.prose .admonition-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.admonition p { margin: 0 0 .45em; } .admonition p:last-child { margin: 0; }
.admonition code { background: rgba(255, 255, 255, .55); border-color: rgba(9, 30, 66, .12); }
.admonition.tip, .admonition.success { --pn-bg: #dcfff1; --pn-icon: #22a06b; --pn-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16m1.364-10.964-2.152 4.11-1.543-1.39a1 1 0 1 0-1.338 1.487l2.5 2.25a1 1 0 0 0 1.555-.279l2.75-5.25a1 1 0 0 0-1.772-.928%22/%3E%3C/svg%3E"); }
.admonition.warning { --pn-bg: #fff7d6; --pn-icon: #e56910; --pn-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22m13.31 5.343 7.359 13.17A1 1 0 0 1 19.796 20H4.204a1 1 0 0 1-.873-1.488l7.36-13.169a1.5 1.5 0 0 1 2.618 0M12 8.5a1.09 1.09 0 0 0-1.081 1.239l.513 3.766a.573.573 0 0 0 1.136 0l.513-3.766A1.09 1.09 0 0 0 12 8.5m0 8.63a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25%22/%3E%3C/svg%3E"); }
.admonition.info { --pn-bg: #e9f2ff; --pn-icon: #1d7afc; --pn-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16m0-8.5a1 1 0 0 0-1 1V15a1 1 0 0 0 2 0v-2.5a1 1 0 0 0-1-1m0-1.125a1.375 1.375 0 1 0 0-2.75 1.375 1.375 0 0 0 0 2.75%22/%3E%3C/svg%3E"); }
.admonition.note { --pn-bg: #f3f0ff; --pn-icon: #8270db; --pn-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22M8 4h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m1.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm0 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z%22/%3E%3C/svg%3E"); }
.admonition.danger, .admonition.error { --pn-bg: #ffeceb; --pn-icon: #c9372c; --pn-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22m13.485 11.929 2.122-2.121a1 1 0 0 0-1.415-1.415l-2.12 2.122L9.95 8.393a1 1 0 0 0-1.414 1.415l2.12 2.12-2.12 2.122a1 1 0 0 0 1.414 1.414l2.121-2.12 2.121 2.12a1 1 0 1 0 1.415-1.414zM12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16%22/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .admonition { background: color-mix(in srgb, var(--pn-icon) 16%, #0b0c10); }
  :root:not([data-theme="light"]) .admonition code { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); } }
:root[data-theme="dark"] .admonition { background: color-mix(in srgb, var(--pn-icon) 16%, #0b0c10); }
:root[data-theme="dark"] .admonition code { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
@media print { .admonition { padding: 7pt 10pt 7pt 28pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .admonition::before { left: 9pt; top: 8pt; width: 12pt; height: 12pt; } }
.admonition.tip, .admonition.success, .admonition.warning, .admonition.info, .admonition.note, .admonition.danger, .admonition.error { background: var(--pn-bg); border: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .admonition.tip, :root:not([data-theme="light"]) .admonition.warning, :root:not([data-theme="light"]) .admonition.info, :root:not([data-theme="light"]) .admonition.note, :root:not([data-theme="light"]) .admonition.danger { background: color-mix(in srgb, var(--pn-icon) 16%, #0b0c10); } }
:root[data-theme="dark"] .admonition.tip, :root[data-theme="dark"] .admonition.warning, :root[data-theme="dark"] .admonition.info, :root[data-theme="dark"] .admonition.note, :root[data-theme="dark"] .admonition.danger { background: color-mix(in srgb, var(--pn-icon) 16%, #0b0c10); }
@media (max-width: 560px) { .c-body { gap: 10px; } }

/* ---------------------------------------------------------------- docs-platform polish (after Mintlify)
   Round step markers, the sidebar's current page as a soft lime pill, heading links as a button in the left gutter,
   screenshots on a padded mat, and the search box's shortcut shown as Cmd/Ctrl K (kb.js sets it per platform). */
.prose ol > li::after, .step-check { border-radius: 50%; }

.nav-list a { border-radius: 0 6px 6px 0; transition: background-color .2s var(--ease), color .2s var(--ease); }
.nav-list a:hover { background: var(--sunk); }
.nav-list a[aria-current="page"] { background: var(--accent-soft); border-left: 2px solid var(--mark); font-weight: 600; }

@media (min-width: 761px) {
  .prose h2, .prose h3 { position: relative; }
  .prose .anchor { position: absolute; left: -34px; top: 50%; width: 24px; height: 24px; margin: -12px 0 0; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 0; transition: opacity .2s var(--ease), border-color .2s var(--ease); }
  .prose .anchor::before { content: ""; width: 13px; height: 13px; background: var(--ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244'/%3E%3C/svg%3E") center / contain no-repeat; }
  .prose .anchor:hover { border-color: var(--line-strong); }
  .prose .anchor:hover::before { background: var(--ink); }
  .prose .anchor.copied::after { position: absolute; left: 32px; white-space: nowrap; margin: 0; }
}

.shot button { padding: 8px; background: var(--sunk); border: 1px solid var(--line); border-radius: 12px; }
.shot img { border-radius: 6px; }
.shot button::after { right: 20px; bottom: 20px; }
@media (max-width: 600px) { .shot button { padding: 5px; border-radius: 10px; } }
@media print { .shot button { padding: 0; background: none; border: 0; } }

/* ---------------------------------------------------------------- touch screens: every link and button a comfortable
   target (about 40px tall) without changing how the page looks; the extra height is padding, balanced by margins */
@media (pointer: coarse) {
  .help a, .build a { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .brand { padding: 10px 0; margin: -10px 0; }
  .foot ul { gap: 0; }
  .foot ul a { display: inline-block; padding: 9px 0; }
  .foot p a { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .pager .prev { display: inline-block; padding: 10px 0; }
  .prose .anchor { display: inline-block; padding: 4px 8px; margin-left: .1em; }
  .aud-links a, .start-intro .all { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .fl-via { font-size: 12px; }
}

/* ---------------------------------------------------------------- home: Ask AI bar
   One rounded bar under the search: a lime sparkle, the invitation, and a button per assistant. The border fades from
   lime at the ends to the hairline colour in the middle. */
.ask-bar { display: inline-flex; align-items: center; gap: 10px; margin: 28px 0 0; padding: 5px 5px 5px 6px; border: 1px solid transparent; border-radius: 999px;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(90deg, var(--lime), var(--line-strong) 35%, var(--line-strong) 65%, var(--lime)) border-box;
  box-shadow: 0 8px 24px -12px rgba(38, 45, 58, .18); font-size: 14px; }
.ab-lead { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.ab-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); }
.ab-ico svg { width: 16px; height: 16px; }
.ab-opts { display: inline-flex; gap: 4px; }
.ab-opts a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--sunk);
  color: var(--ink); font-weight: 500; text-decoration: none; transition: background-color .25s var(--ease), color .25s var(--ease); }
.ab-opts a svg { width: 12px; height: 12px; opacity: .5; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.ab-opts a:hover { background: var(--lime); color: var(--lime-ink); }
.ab-opts a:hover svg { opacity: 1; transform: translate(1px, -1px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ask-bar { box-shadow: none; } }
:root[data-theme="dark"] .ask-bar { box-shadow: none; }
@media (max-width: 560px) {
  .ask-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; }
  .ab-opts { display: flex; width: 100%; } .ab-opts a { flex: 1; padding: 0 8px; height: 40px; }
}