/* ===========================================================================
   /authorization-header-generator
   ---------------------------------------------------------------------------
   Self-contained: this page does not extend the shared .qdt-util theme. The
   supplied design has its own visual language - a six-card scheme rail, a
   terminal-style output console, numbered working steps - and expressing that
   as overrides on top of qdt-utility.css meant fighting it rule for rule.
   Owning the whole surface is shorter and makes dark mode possible, which
   qdt-utility.css (light-only) does not allow.

   Everything is scoped under .ahg-page. The design was a standalone document
   that styled body, *, h1-h3, button, input, select, textarea and table
   directly and put its palette on :root; unscoped, those rules would have
   restyled the site header, the footer and every form control on the site.

   ---------------------------------------------------------------------------
   THE ACCENT SYSTEM

   Each of the six schemes owns a colour, and selecting one repaints the hero,
   the panels, the console and the focus rings. The design did this by writing
   --active into :root from JavaScript, which means the script has to know the
   hex values - and therefore has to know which theme is active, or the dark
   palette silently loses.

   Here the six pairs are declared once per theme below, and the script only
   writes data-active-scheme="<key>" onto the page root. CSS maps that to
   --c / --ct. The script never sees a colour, and dark mode follows for free.
   ---------------------------------------------------------------------------

   Dark mode follows the site's own switch (html[data-theme="dark"], written by
   the inline script in _Layout.cshtml and by the theme dock). No
   prefers-color-scheme block: an OS preference would fight the site's toggle
   rather than follow it.

   Three families of class name appear here:
     ahg-*        - this page's own markup
     kv-*, code-block, message, empty-state
                  - emitted by authorization-header-generator.js. They used to
                    come from qdt-utility.css; since that link is gone they are
                    defined here. Renaming them would mean rewriting every
                    template string in a 1,300-line file for no gain.
     tool-*       - the shared page tail (reference section, FAQ), still owned
                    by tools.css, which is linked globally.
   =========================================================================== */

.ahg-page {
  --a-bg: #f5f7fb;
  --a-card: #ffffff;
  --a-card-2: #f8fafd;
  --a-sunk: #eef2f8;
  --a-ink: #0e1526;
  --a-ink-2: #33405a;
  --a-muted: #64708a;
  --a-faint: #9aa5bc;
  --a-line: #e2e7f0;
  --a-line-2: #cbd4e4;

  --c-basic: #2563eb;  --ct-basic: #eef3ff;
  --c-bearer: #7c3aed; --ct-bearer: #f4efff;
  --c-apikey: #059669; --ct-apikey: #e6f8f1;
  --c-digest: #c2610a; --ct-digest: #fff4e5;
  --c-sigv4: #e11d48;  --ct-sigv4: #ffeff3;
  --c-hmac: #0891b2;   --ct-hmac: #e5f8fd;

  --a-ok: #059669;     --a-ok-t: #e6f8f1;
  --a-warn: #c2610a;   --a-warn-t: #fff4e5;
  --a-bad: #e11d48;    --a-bad-t: #ffeff3;

  --a-sh-s: 0 1px 2px rgba(14, 21, 38, .06);
  --a-sh-m: 0 2px 5px rgba(14, 21, 38, .05), 0 14px 30px -16px rgba(14, 21, 38, .25);
  --a-sh-l: 0 6px 14px rgba(14, 21, 38, .07), 0 28px 56px -24px rgba(14, 21, 38, .3);

  --a-f: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --a-m: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --a-r: 14px; --a-r-s: 9px; --a-r-xs: 6px;

  /* Fallback accent, replaced the moment a scheme is selected. */
  --c: var(--c-basic);
  --ct: var(--ct-basic);

  color: var(--a-ink);
  font-family: var(--a-f);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 28px;
}

html[data-theme="dark"] .ahg-page {
  --a-bg: #080c14;
  --a-card: #111827;
  --a-card-2: #161f31;
  --a-sunk: #0c1220;
  --a-ink: #eef2f9;
  --a-ink-2: #c2ccdd;
  --a-muted: #8b98b0;
  --a-faint: #5d6980;
  --a-line: #1f2a3e;
  --a-line-2: #2e3b53;

  --c-basic: #6ba0ff;  --ct-basic: #13224a;
  --c-bearer: #b18cff; --ct-bearer: #241a46;
  --c-apikey: #34d399; --ct-apikey: #0d2e26;
  --c-digest: #fbbf24; --ct-digest: #33240f;
  --c-sigv4: #fb7185;  --ct-sigv4: #341823;
  --c-hmac: #22d3ee;   --ct-hmac: #0a2b36;

  --a-ok: #34d399;   --a-ok-t: #0d2e26;
  --a-warn: #fbbf24; --a-warn-t: #33240f;
  --a-bad: #fb7185;  --a-bad-t: #341823;

  --a-sh-s: 0 1px 2px rgba(0, 0, 0, .5);
  --a-sh-m: 0 2px 6px rgba(0, 0, 0, .45), 0 16px 32px -18px rgba(0, 0, 0, .8);
  --a-sh-l: 0 6px 16px rgba(0, 0, 0, .5), 0 30px 60px -26px rgba(0, 0, 0, .9);
}

/* The whole accent mapping. The script writes only the attribute. */
.ahg-page[data-active-scheme="basic"]  { --c: var(--c-basic);  --ct: var(--ct-basic) }
.ahg-page[data-active-scheme="bearer"] { --c: var(--c-bearer); --ct: var(--ct-bearer) }
.ahg-page[data-active-scheme="apikey"] { --c: var(--c-apikey); --ct: var(--ct-apikey) }
.ahg-page[data-active-scheme="digest"] { --c: var(--c-digest); --ct: var(--ct-digest) }
.ahg-page[data-active-scheme="sigv4"]  { --c: var(--c-sigv4);  --ct: var(--ct-sigv4) }
.ahg-page[data-active-scheme="hmac"]   { --c: var(--c-hmac);   --ct: var(--ct-hmac) }

/* Each rail card and each scheme panel carries its own colour regardless of
   which is selected, so the rail reads as six colours rather than one. */
.ahg-page [data-scheme="basic"],  .ahg-page [data-scheme-panel="basic"]  { --c: var(--c-basic);  --ct: var(--ct-basic) }
.ahg-page [data-scheme="bearer"], .ahg-page [data-scheme-panel="bearer"] { --c: var(--c-bearer); --ct: var(--ct-bearer) }
.ahg-page [data-scheme="apikey"], .ahg-page [data-scheme-panel="apikey"] { --c: var(--c-apikey); --ct: var(--ct-apikey) }
.ahg-page [data-scheme="digest"], .ahg-page [data-scheme-panel="digest"] { --c: var(--c-digest); --ct: var(--ct-digest) }
.ahg-page [data-scheme="sigv4"],  .ahg-page [data-scheme-panel="sigv4"]  { --c: var(--c-sigv4);  --ct: var(--ct-sigv4) }
.ahg-page [data-scheme="hmac"],   .ahg-page [data-scheme-panel="hmac"]   { --c: var(--c-hmac);   --ct: var(--ct-hmac) }

.ahg-page * { box-sizing: border-box }
.ahg-page h2, .ahg-page h3 { margin: 0; font-weight: 800; letter-spacing: -.025em; text-wrap: balance }
.ahg-page button, .ahg-page input, .ahg-page select, .ahg-page textarea { font: inherit; color: inherit }
.ahg-page button { cursor: pointer }
.ahg-page [hidden] { display: none !important }
.ahg-page :focus-visible { outline: 2px solid var(--c); outline-offset: 2px; border-radius: var(--a-r-xs) }
.ahg-page code, .ahg-page .mono { font-family: var(--a-m) }
@media (prefers-reduced-motion: reduce) { .ahg-page * { transition: none !important } }

/* ============================================================= 1. HERO == */

.ahg-page .ahg-hero {
  position: relative;
  overflow: hidden;
  margin: 18px 0 8px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--a-line));
  border-radius: 20px;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--ct) 98%, var(--a-card)) 0%,
    var(--a-card) 48%,
    color-mix(in srgb, var(--ct-bearer) 58%, var(--a-card)) 100%);
  box-shadow: 0 16px 44px -28px color-mix(in srgb, var(--c) 58%, transparent), var(--a-sh-m);
  transition: background .22s, border-color .22s, box-shadow .22s;
}
.ahg-page .ahg-hero::after {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  right: -100px; top: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 20%, transparent), transparent 68%);
  pointer-events: none;
}
.ahg-page .ahg-hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  gap: 22px;
  align-items: center;
}
.ahg-page .ahg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--a-card);
  border: 1px solid color-mix(in srgb, var(--c) 25%, var(--a-line));
  color: var(--c);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 5px 16px -10px color-mix(in srgb, var(--c) 50%, transparent);
}
.ahg-page .ahg-hero h1 {
  margin: 9px 0 7px;
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(110deg, var(--a-ink) 5%, var(--c) 72%, var(--c-bearer));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ahg-page .ahg-hero > .ahg-hero-in > div > p { margin: 0; max-width: 720px; font-size: 13px; color: var(--a-muted) }
.ahg-page .ahg-hero code {
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--a-card) 80%, transparent);
  border: 1px solid var(--a-line);
  font-size: .92em;
  color: var(--a-ink-2);
}
.ahg-page .ahg-hero-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.ahg-page .ahg-hero-point {
  position: relative;
  overflow: hidden;
  padding: 11px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--a-card) 88%, transparent);
  border: 1px solid var(--a-line);
  box-shadow: var(--a-sh-s);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.ahg-page .ahg-hero-point:hover {
  transform: translateY(-2px);
  box-shadow: var(--a-sh-m);
  border-color: color-mix(in srgb, var(--c) 24%, var(--a-line));
}
.ahg-page .ahg-hero-point .ahg-hp-emoji { display: block; margin-bottom: 4px; font-size: 17px; line-height: 1 }
.ahg-page .ahg-hero-point b { display: block; font-size: 11px }
.ahg-page .ahg-hero-point > span:last-child { display: block; margin-top: 2px; font-size: 9.5px; color: var(--a-muted) }

@media (max-width: 860px) {
  .ahg-page .ahg-hero-in { grid-template-columns: 1fr }
  .ahg-page .ahg-hero-points { max-width: 620px }
}
@media (max-width: 520px) {
  .ahg-page .ahg-hero { padding: 16px }
  .ahg-page .ahg-hero-points { grid-template-columns: 1fr 1fr }
  .ahg-page .ahg-hero-point:last-child { grid-column: 1 / -1 }
}

/* ======================================================= 2. MODE SWITCH == */

.ahg-page .ahg-modebar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
}
.ahg-page .ahg-modes {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--a-line);
  border-radius: 11px;
  background: var(--a-sunk);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
html[data-theme="dark"] .ahg-page .ahg-modes { box-shadow: none }
.ahg-page .ahg-mode {
  padding: 7px 17px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--a-muted);
  font-size: 13px;
  font-weight: 700;
  transition: background .15s, color .15s;
}
.ahg-page .ahg-mode.is-active {
  color: var(--c);
  background: linear-gradient(135deg, var(--a-card), color-mix(in srgb, var(--ct) 70%, var(--a-card)));
  box-shadow: var(--a-sh-s);
}
.ahg-page .ahg-modebar > p { margin: 0; font-size: 11.5px; color: var(--a-muted) }

/* ======================================================== 3. SCHEME RAIL == */

.ahg-page .ahg-rail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 2px 11px;
}
.ahg-page .ahg-rail-head h2 { display: flex; align-items: center; gap: 7px; font-size: 16px }
.ahg-page .ahg-rail-head h2 .ahg-sec-emoji { font-size: 17px }
.ahg-page .ahg-rail-head h2::after { content: "↓"; margin-left: 1px; color: var(--c); font-size: 15px; font-weight: 900 }
.ahg-page .ahg-rail-head > span {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 10%, var(--a-card));
  border: 1px solid color-mix(in srgb, var(--c) 18%, var(--a-line));
  color: var(--c);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* Six on one row. Below 1050px the row scrolls sideways instead of wrapping,
   because a 3+3 grid makes the last three look like a different tier. */
.ahg-page .ahg-rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; width: 100% }
@media (max-width: 1050px) {
  .ahg-page .ahg-rail {
    grid-template-columns: repeat(6, minmax(158px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .ahg-page .ahg-scheme { scroll-snap-align: start }
}

.ahg-page .ahg-scheme {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  min-height: 108px;
  min-width: 0;
  padding: 12px 11px 10px;
  text-align: left;
  border: 1px solid var(--a-line);
  border-radius: 14px;
  background: var(--a-card);
  color: inherit;
  transition: border-color .16s, box-shadow .16s, transform .12s, background .16s;
}
.ahg-page .ahg-scheme:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--c) 48%, var(--a-line));
  box-shadow: 0 8px 20px -18px color-mix(in srgb, var(--c) 65%, transparent);
}
.ahg-page .ahg-scheme.is-on {
  background: color-mix(in srgb, var(--ct) 56%, var(--a-card));
  border-color: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 12%, transparent);
}
.ahg-page .ahg-scheme-ic {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-bottom: 2px;
  border-radius: 8px;
  color: var(--c);
}
.ahg-page .ahg-scheme-ic svg { width: 17px; height: 17px }
.ahg-page .ahg-scheme-name { display: flex; align-items: center; gap: 6px; line-height: 1.25 }
.ahg-page .ahg-scheme-name .ahg-scheme-emoji { font-size: 13px; line-height: 1 }
.ahg-page .ahg-scheme-name > span:last-child { font-size: 13px; font-weight: 800; color: var(--a-ink) }
.ahg-page .ahg-scheme > .ahg-scheme-tag {
  font-family: var(--a-m);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--a-muted);
}
.ahg-page .ahg-level {
  width: max-content;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.ahg-page .ahg-level.is-common { background: var(--a-ok-t); color: var(--a-ok) }
.ahg-page .ahg-level.is-advanced { background: var(--a-warn-t); color: var(--a-warn) }

/* ========================================================= 4. WORKBENCH == */

.ahg-page .ahg-bench {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
@media (max-width: 980px) { .ahg-page .ahg-bench { grid-template-columns: 1fr } }

.ahg-page .ahg-panel {
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
  background: var(--a-card);
  box-shadow: 0 12px 34px -28px color-mix(in srgb, var(--c) 44%, transparent), var(--a-sh-s);
  transition: box-shadow .2s, border-color .2s;
}
.ahg-page .ahg-panel:hover {
  border-color: color-mix(in srgb, var(--c) 20%, var(--a-line));
  box-shadow: 0 16px 38px -28px color-mix(in srgb, var(--c) 54%, transparent), var(--a-sh-m);
}
.ahg-page .ahg-panel-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--a-line);
  background: linear-gradient(100deg, var(--ct), color-mix(in srgb, var(--ct) 48%, var(--a-card)));
}
.ahg-page .ahg-panel-h .ahg-pi {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--c);
  color: #fff;
  box-shadow: 0 7px 16px -8px var(--c);
}
.ahg-page .ahg-panel-h .ahg-pi svg { width: 14px; height: 14px }
.ahg-page .ahg-panel-h h3 { font-size: 13.5px }
.ahg-page .ahg-rfc {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid currentColor;
  background: var(--a-card);
  color: var(--c);
  font-family: var(--a-m);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.ahg-page .ahg-panel-b { padding: 16px }
.ahg-page .ahg-hint { margin: 0 0 14px; font-size: 12px; line-height: 1.55; color: var(--a-muted) }
.ahg-page .ahg-hint code, .ahg-page .ahg-note code, .ahg-page .ahg-tg-note code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--a-card-2);
  border: 1px solid var(--a-line);
  font-size: .92em;
  color: var(--a-ink-2);
}

/* ------------------------------------------------------------ form fields */

.ahg-page .ahg-form { display: none }
.ahg-page .ahg-form:not([hidden]) { display: block }

.ahg-page .ahg-fld { margin-bottom: 13px; min-width: 0 }
.ahg-page .ahg-fld:last-child { margin-bottom: 0 }
.ahg-page .ahg-fld > label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--a-muted);
}
.ahg-page .ahg-fld > label .ahg-opt {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--a-faint);
}
.ahg-page .ahg-inp {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--a-line-2);
  border-radius: var(--a-r-s);
  background: var(--a-card-2);
  color: var(--a-ink);
  font-family: var(--a-m);
  font-size: 13px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ahg-page textarea.ahg-inp { min-height: 76px; line-height: 1.55; resize: vertical }
.ahg-page select.ahg-inp { cursor: pointer }
.ahg-page .ahg-inp:focus {
  outline: none;
  border-color: var(--c);
  background: var(--a-card);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 10%, transparent);
}
.ahg-page .ahg-inp::placeholder { color: var(--a-faint) }
.ahg-page .ahg-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px }
@media (max-width: 520px) { .ahg-page .ahg-row2 { grid-template-columns: 1fr } }

/* A secret and its reveal button share one box, so the button reads as part of
   the field rather than as a second control beside it. */
.ahg-page .ahg-secret-field { display: flex; gap: 8px; align-items: stretch }
.ahg-page .ahg-secret-field .ahg-inp { flex: 1; min-width: 0 }
.ahg-page .ahg-eye {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  padding: 0;
  border: 1.5px solid var(--a-line-2);
  border-radius: var(--a-r-s);
  background: var(--a-card-2);
  color: var(--a-muted);
  transition: background .15s, color .15s, border-color .15s;
}
.ahg-page .ahg-eye:hover { background: var(--ct); color: var(--c); border-color: var(--c) }
.ahg-page .ahg-eye svg { width: 17px; height: 17px }
.ahg-page .ahg-eye .ahg-eye-off { display: none }
.ahg-page .ahg-eye.is-shown .ahg-eye-on { display: none }
.ahg-page .ahg-eye.is-shown .ahg-eye-off { display: block }

.ahg-page .ahg-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 13px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--a-ink-2);
  cursor: pointer;
}
.ahg-page .ahg-check input { width: auto; margin-top: 1px; accent-color: var(--c) }

.ahg-page .ahg-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px }
.ahg-page .ahg-cbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid var(--a-line-2);
  border-radius: 8px;
  background: var(--a-card);
  color: var(--a-ink-2);
  font-size: 12.5px;
  font-weight: 700;
  transition: background .14s, border-color .14s, color .14s;
}
.ahg-page .ahg-cbtn:hover { background: var(--a-card-2); border-color: var(--c); color: var(--c) }
.ahg-page .ahg-cbtn svg { width: 14px; height: 14px }
.ahg-page .ahg-cbtn.is-solid {
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 74%, #111827));
  border-color: var(--c);
  color: #fff;
  box-shadow: 0 7px 16px -9px var(--c);
}
.ahg-page .ahg-cbtn.is-solid:hover { filter: brightness(1.1); color: #fff }
.ahg-page .ahg-cbtn.is-copied { border-color: var(--a-ok); background: var(--a-ok-t); color: var(--a-ok); box-shadow: none }

/* =================================================== 5. OUTPUT CONSOLE == */

/* Reads as developer output rather than as another form card: dark in both
   themes, with the three window dots the design uses to say "this is a
   terminal, the thing in it is literal". */
.ahg-page #outPanel .ahg-panel-h {
  padding: 14px 16px 7px;
  border-bottom: 0;
  background: var(--a-card);
}
.ahg-page #outPanel .ahg-panel-h .ahg-pi { display: none }
.ahg-page #outPanel .ahg-panel-h h3 { font-size: 15px; color: var(--a-ink) }
.ahg-page #outPanel .ahg-panel-h .ahg-rfc {
  border: 0;
  background: var(--a-ok-t);
  color: var(--a-ok);
  font-family: var(--a-f);
  font-size: 10px;
  font-weight: 800;
  text-transform: capitalize;
  padding: 4px 9px;
}
.ahg-page #outPanel .ahg-panel-h .ahg-rfc::before { content: "● "; font-size: 9px }
.ahg-page #outPanel .ahg-panel-h .ahg-rfc.is-idle { background: var(--a-warn-t); color: var(--a-warn) }
.ahg-page #outPanel .ahg-panel-b { padding: 8px 14px 15px }

.ahg-page .ahg-console {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  margin-bottom: 10px;
  padding: 18px 14px 14px;
  border: 1px solid #1e293b;
  border-radius: 14px;
  background: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 28px -24px rgba(15, 23, 42, .75);
}
/* Against a dark card, #0f172a is nearly the same value as the surface, so the
   console goes darker still to keep its edge visible. */
html[data-theme="dark"] .ahg-page .ahg-console { background: #050a14; border-color: #1c2740 }
.ahg-page .ahg-console::before {
  content: "";
  position: absolute;
  top: 10px; left: 13px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fb7185;
  box-shadow: 12px 0 #fbbf24, 24px 0 #34d399;
}
.ahg-page .ahg-console .ahg-out-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
  color: #67e8f9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ahg-page .ahg-console .ahg-kind {
  padding: 2px 7px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .08);
  color: #cbd5e1;
  font-family: var(--a-m);
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: none;
}
.ahg-page .ahg-console .ahg-out-val {
  min-height: 45px;
  color: #f8fafc;
  font-family: var(--a-m);
  font-size: 12.5px;
  line-height: 1.7;
  word-break: break-all;
  white-space: pre-wrap;
}
.ahg-page .ahg-console .ahg-btn-row { position: absolute; right: 10px; top: 9px; margin: 0; gap: 6px }
.ahg-page .ahg-console .ahg-cbtn {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #182235;
  color: #e2e8f0;
  font-size: 10px;
  box-shadow: none;
}
.ahg-page .ahg-console .ahg-cbtn:hover { background: #22304a; border-color: #475569; color: #fff }
.ahg-page .ahg-console .ahg-cbtn.is-copied { background: #064e3b; border-color: #10b981; color: #d1fae5 }

.ahg-page .ahg-valueblock {
  padding: 11px 12px;
  border: 1px solid var(--a-line);
  border-radius: 10px;
  background: var(--a-card-2);
}
.ahg-page .ahg-valueblock .ahg-out-label {
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-muted);
}
.ahg-page .ahg-valueblock .ahg-out-val {
  max-height: 68px;
  overflow: auto;
  color: var(--a-ink-2);
  font-family: var(--a-m);
  font-size: 11.5px;
  font-weight: 500;
  word-break: break-all;
  white-space: pre-wrap;
}

/* ------------------------------------------------- the numbered working */

.ahg-page .ahg-working { margin-top: 9px }
.ahg-page .ahg-working > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 0;
  border-top: 1px solid var(--a-line);
  list-style: none;
  color: var(--a-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ahg-page .ahg-working > summary::-webkit-details-marker { display: none }
.ahg-page .ahg-working > summary::before {
  content: "▶";
  font-size: 9px;
  color: var(--c);
  transition: transform .18s;
}
.ahg-page .ahg-working[open] > summary::before { transform: rotate(90deg) }
.ahg-page .ahg-working > summary:hover { color: var(--a-ink) }
.ahg-page .ahg-steps { border-top: 1px solid var(--a-line) }
.ahg-page .ahg-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px dashed var(--a-line);
}
.ahg-page .ahg-step:last-child { border-bottom: none }
.ahg-page .ahg-step-n {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--ct);
  color: var(--c);
  font-family: var(--a-m);
  font-size: 10px;
  font-weight: 700;
}
.ahg-page .ahg-step-t b { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 800 }
.ahg-page .ahg-step-t code {
  display: block;
  font-family: var(--a-m);
  font-size: 11px;
  line-height: 1.6;
  color: var(--a-muted);
  word-break: break-all;
  white-space: pre-wrap;
}

/* ------------------------------------------------------ notes & warnings */

.ahg-page .ahg-note {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: var(--a-warn-t);
  color: var(--a-warn);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}
.ahg-page .ahg-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px }
.ahg-page .ahg-note.is-ok { background: var(--a-ok-t); color: var(--a-ok) }
.ahg-page .ahg-note.is-bad { background: var(--a-bad-t); color: var(--a-bad) }

.ahg-page .ahg-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.ahg-page .ahg-warnings:not(:empty) { margin-top: 12px }
.ahg-page .ahg-warn {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: var(--a-warn-t);
  color: var(--a-warn);
  font-size: 11.5px;
  line-height: 1.5;
}
.ahg-page .ahg-warn > span:first-child {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: currentColor;
  color: var(--a-warn-t);
  font-size: 11px;
  font-weight: 900;
}

.ahg-page .ahg-extra {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--c) 26%, var(--a-line));
  border-radius: 10px;
  background: var(--ct);
}
.ahg-page .ahg-extra-title {
  display: block;
  margin-bottom: 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c);
}
.ahg-page .ahg-extra-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 8px;
  padding: 3px 0;
  font-size: 10.5px;
}
.ahg-page .ahg-extra-row code { color: var(--a-ink-2); font-weight: 600 }
.ahg-page .ahg-extra-row span { font-family: var(--a-m); color: var(--a-muted); word-break: break-all }

/* ======================================================= 6. CODE EXPORT == */

/* The code card is deliberately neutral - it belongs to no one scheme - so it
   opts out of the accent and uses ink instead. The icon tile has to be stated
   for both themes: --a-ink is near-black in light and near-white in dark, so a
   white glyph on it works in one and vanishes in the other. */
.ahg-page .ahg-code-card { margin-top: 16px; --c: var(--a-ink-2); --ct: var(--a-card-2) }
.ahg-page .ahg-code-card .ahg-pi { background: var(--a-ink); color: var(--a-card); box-shadow: none }
.ahg-page .ahg-code-card .ahg-rfc { color: var(--a-muted); border-color: var(--a-line-2) }

/* The request line. Two schemes sign it, so for those it is not something the
   snippet may differ on - the row says so and locks the fields rather than
   letting you produce a snippet that cannot work. */
.ahg-page .ahg-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid var(--a-line);
  border-radius: 11px;
  background: var(--a-sunk);
  transition: border-color .18s, background .18s;
}
.ahg-page .ahg-target.is-signed {
  border-color: color-mix(in srgb, var(--c-sigv4) 30%, var(--a-line));
  background: color-mix(in srgb, var(--ct) 45%, var(--a-sunk));
}
.ahg-page .ahg-tg-lab {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-muted);
  white-space: nowrap;
}
.ahg-page .ahg-target select,
.ahg-page .ahg-target input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--a-line-2);
  border-radius: 8px;
  background: var(--a-card);
  color: var(--a-ink);
  font-family: var(--a-m);
  font-size: 12.5px;
}
.ahg-page .ahg-target select { width: auto; cursor: pointer }
.ahg-page .ahg-target select:focus,
.ahg-page .ahg-target input:focus { outline: none; border-color: var(--c) }
.ahg-page .ahg-tg-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--a-muted);
}
.ahg-page .ahg-target.is-signed .ahg-tg-note { color: var(--c); font-weight: 600 }
@media (max-width: 520px) {
  .ahg-page .ahg-target { grid-template-columns: 1fr }
  .ahg-page .ahg-target select { width: 100% }
}

.ahg-page .ahg-lang-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--a-line);
  border-radius: 10px;
  background: var(--a-sunk);
  overflow-x: auto;
}
.ahg-page .ahg-lang-tabs button {
  padding: 7px 14px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--a-muted);
  font-family: var(--a-m);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ahg-page .ahg-lang-tabs button.is-active {
  background: linear-gradient(135deg, var(--a-card), var(--ct));
  color: var(--c);
  box-shadow: var(--a-sh-s);
}
.ahg-page .ahg-code {
  margin: 12px 0 0;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--c) 13%, var(--a-line));
  border-radius: 11px;
  background: linear-gradient(145deg, var(--a-sunk), color-mix(in srgb, var(--ct) 28%, var(--a-card)));
  color: var(--a-ink-2);
  font-family: var(--a-m);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
}

/* ============================================================ 7. DECODE == */

.ahg-page .ahg-decode-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
@media (max-width: 980px) { .ahg-page .ahg-decode-grid { grid-template-columns: 1fr } }
.ahg-page .ahg-decode-grid > :first-child { --c: var(--c-bearer); --ct: var(--ct-bearer) }
.ahg-page .ahg-decode-grid > :last-child { --c: var(--c-apikey); --ct: var(--ct-apikey) }

.ahg-page .ahg-decode-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px }
.ahg-page .ahg-decode-head p { margin: 2px 0 0; font-size: 11.5px; color: var(--a-muted) }
.ahg-page .ahg-scheme-badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--a-card-2);
  border: 1px solid var(--a-line);
  color: var(--a-ink-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
}
.ahg-page .ahg-scheme-badge.is-basic { background: var(--a-bad-t); border-color: currentColor; color: var(--a-bad) }
.ahg-page .ahg-scheme-badge.is-bearer { background: var(--ct-bearer); border-color: currentColor; color: var(--c-bearer) }
.ahg-page .ahg-scheme-badge.is-apikey { background: var(--a-warn-t); border-color: currentColor; color: var(--a-warn) }
.ahg-page .ahg-scheme-badge.is-digest { background: var(--ct-digest); border-color: currentColor; color: var(--c-digest) }
.ahg-page .ahg-scheme-badge.is-sigv4 { background: var(--a-ok-t); border-color: currentColor; color: var(--a-ok) }

/* JWT header / payload and the SigV4 canonical request, in the decode report. */
.ahg-page .ahg-decode-block { margin-top: 12px }
.ahg-page .ahg-decode-block-label {
  display: block;
  margin-bottom: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--a-muted);
}

.ahg-page .ahg-reveal {
  padding: 3px 9px;
  border: 1px solid var(--a-line-2);
  border-radius: 999px;
  background: var(--a-card);
  color: var(--a-muted);
  font-family: var(--a-f);
  font-size: 9.5px;
  font-weight: 700;
}
.ahg-page .ahg-reveal:hover { background: var(--ct); border-color: var(--c); color: var(--c) }
.ahg-page .ahg-secret { word-break: break-all }

/* ================================================ 8. JS-EMITTED CLASSES == */

.ahg-page .kv-table { border: 1px solid var(--a-line); border-radius: 11px; overflow: hidden }
.ahg-page .kv-row {
  display: grid;
  grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 12px;
  border-bottom: 1px solid var(--a-line);
  font-size: 11.5px;
}
.ahg-page .kv-row:last-child { border-bottom: none }
.ahg-page .kv-row:nth-child(odd) { background: var(--a-card-2) }
.ahg-page .kv-key { color: var(--a-muted); font-weight: 700 }
.ahg-page .kv-value { min-width: 0; color: var(--a-ink); word-break: break-word; white-space: pre-wrap }
.ahg-page .kv-value.mono { font-family: var(--a-m); font-size: 11px }
.ahg-page .kv-value.is-ok { color: var(--a-ok) }
.ahg-page .kv-value.is-bad { color: var(--a-bad) }

.ahg-page .code-block {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--a-line);
  border-radius: 10px;
  background: var(--a-sunk);
  font-family: var(--a-m);
  font-size: 11px;
  line-height: 1.65;
  color: var(--a-ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.ahg-page .message { display: none }
.ahg-page .message.show {
  display: block;
  margin-top: 12px;
  padding: 10px 13px;
  border: 1px solid currentColor;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
}
.ahg-page .message.error { background: var(--a-bad-t); color: var(--a-bad) }
.ahg-page .message.warning { background: var(--a-warn-t); color: var(--a-warn) }
.ahg-page .message.success { background: var(--a-ok-t); color: var(--a-ok) }

.ahg-page .empty-state {
  padding: 20px;
  border: 1px dashed var(--a-line-2);
  border-radius: 12px;
  background: var(--a-card-2);
  color: var(--a-muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.ahg-page .empty-state code { font-size: 11.5px; color: var(--a-ink-2) }

/* =================================================== 9. REFERENCE TABLE == */

.ahg-page .ahg-ref { margin: 24px 0 8px }
.ahg-page .ahg-tablewrap {
  overflow: hidden;
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
  background: var(--a-card);
  box-shadow: var(--a-sh-s);
}
.ahg-page .ahg-tablescroll { overflow-x: auto }
.ahg-page .ahg-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12.5px }
.ahg-page .ahg-table th {
  padding: 11px 14px;
  text-align: left;
  background: var(--a-card-2);
  border-bottom: 1px solid var(--a-line);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a-muted);
}
.ahg-page .ahg-table td { padding: 11px 14px; border-bottom: 1px solid var(--a-line); vertical-align: top; color: var(--a-ink-2) }
.ahg-page .ahg-table tbody tr { transition: background .14s }
.ahg-page .ahg-table tbody tr:hover { background: color-mix(in srgb, var(--ct) 44%, var(--a-card)) }
.ahg-page .ahg-table tbody tr:last-child td { border-bottom: none }
.ahg-page .ahg-table td.ahg-sch { font-weight: 800; white-space: nowrap; color: var(--a-ink) }
.ahg-page .ahg-table td code { font-family: var(--a-m); font-size: 11.5px; color: var(--a-muted) }
.ahg-page .ahg-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50% }
.ahg-page .ahg-sec-badge { display: inline-block; padding: 3px 9px; border-radius: 100px; font-size: 10.5px; font-weight: 700; white-space: nowrap }
.ahg-page .ahg-sec-badge.is-hi { background: var(--a-ok-t); color: var(--a-ok) }
.ahg-page .ahg-sec-badge.is-mid { background: var(--a-warn-t); color: var(--a-warn) }
.ahg-page .ahg-sec-badge.is-lo { background: var(--a-bad-t); color: var(--a-bad) }

.ahg-page .ahg-footnote {
  margin: 16px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
  background: var(--a-card);
  font-size: 12px;
  line-height: 1.6;
  color: var(--a-muted);
}
.ahg-page .ahg-footnote strong { color: var(--a-ink-2) }

/* ================================================= 10. TOAST + NARROW == */

.ahg-page .ahg-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(80px);
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--a-ink);
  color: var(--a-bg);
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  z-index: 70;
  transition: transform .22s, opacity .22s;
  box-shadow: var(--a-sh-l);
}
.ahg-page .ahg-toast.is-show { transform: translateX(-50%) translateY(0); opacity: 1 }

@media (max-width: 620px) {
  .ahg-page .ahg-hero h1 { font-size: 27px }
  .ahg-page .ahg-panel-b { padding: 14px }
  .ahg-page .kv-row { grid-template-columns: 1fr; gap: 3px }
}
@media (max-width: 520px) {
  .ahg-page .ahg-console { min-height: 175px; padding-top: 48px }
  .ahg-page .ahg-console::before { top: 15px }
  .ahg-page .ahg-console .ahg-out-label { margin-top: 0 }
}