/* ============================================================================
   AZRA DOCS — CONTENT
   Part 3 of 3. Article typography and every documentation component:
   headings with anchors, prose, tables, callouts, steps, flows, code,
   command references, module/plan/tile grids.

   Depends on adz-tokens.css only. Class prefix: adz-.
   ========================================================================== */

/* ── Section rhythm ───────────────────────────────────────────────────────── */
.adz-sec { padding: 6px 0 4px; }
.adz-sec + .adz-sec { margin-top: 34px; }
.adz-sec__head { display: flex; align-items: baseline; gap: 12px; }
.adz-sec__title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--adz-fs-h2);
}
.adz-sec__title .adz-ico { font-size: 20px; color: var(--adz-crimson-300); }
.adz-sec__lead {
  margin-top: 8px;
  max-width: 78ch;
  color: var(--adz-ink-2);
  font-size: var(--adz-fs-lead);
}

/* Heading anchors — appear on hover / focus, always visible to keyboards */
.adz-anchor {
  margin-left: 6px;
  color: var(--adz-ink-4);
  font-size: .78em;
  opacity: 0;
  transition: opacity var(--adz-dur-1) var(--adz-ease), color var(--adz-dur-1) var(--adz-ease);
}
h2:hover .adz-anchor,
h3:hover .adz-anchor,
h4:hover .adz-anchor,
.adz-anchor:focus-visible { opacity: 1; }
.adz-anchor:hover { color: var(--adz-pistachio); }

/* ── Prose ────────────────────────────────────────────────────────────────── */
.adz-article p { margin: 14px 0 0; max-width: 82ch; }
.adz-article p:first-child { margin-top: 0; }
.adz-article h3 { margin: 30px 0 0; font-size: var(--adz-fs-h3); }
.adz-article h4 { margin: 22px 0 0; font-size: var(--adz-fs-h4); color: var(--adz-ink); }
.adz-article h3 + p, .adz-article h4 + p { margin-top: 8px; }
.adz-article h3 + .adz-tablewrap, .adz-article h3 + .adz-table-scroll,
.adz-article h4 + .adz-tablewrap { margin-top: 12px; }

.adz-article ul,
.adz-article ol { margin: 12px 0 0; display: flex; flex-direction: column; gap: 7px; }
.adz-article ul > li,
.adz-article ol > li { position: relative; padding-left: 22px; max-width: 82ch; }
.adz-article ul > li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--adz-pistachio);
  box-shadow: 0 0 0 3px var(--adz-success-soft);
}
.adz-article ol { counter-reset: adz-ol; }
.adz-article ol > li { counter-increment: adz-ol; padding-left: 30px; }
.adz-article ol > li::before {
  content: counter(adz-ol);
  position: absolute;
  left: 0;
  top: .28em;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-xs);
  background: var(--adz-fill);
  color: var(--adz-pistachio);
  font-family: var(--adz-font-mono);
  font-size: 10.5px;
  line-height: 1;
}
.adz-article ul ul,
.adz-article ol ul,
.adz-article ul ol { margin-top: 7px; }

.adz-article code {
  padding: 2px 6px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r-xs);
  background: var(--adz-inset);
  color: var(--adz-pistachio-200);
  font-size: .84em;
  white-space: nowrap;
}
[data-theme="light"] .adz-article code { color: #2f6b2b; }

.adz-article a:not(.adz-btn):not(.adz-pager__link) {
  text-decoration: underline;
  text-decoration-color: var(--adz-line-success);
  text-underline-offset: 3px;
}
.adz-article a:not(.adz-btn):not(.adz-pager__link):hover { text-decoration-color: currentColor; }

.adz-content-note {
  margin-top: 10px;
  color: var(--adz-ink-3);
  font-size: var(--adz-fs-sm);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.adz-tablewrap,
.adz-table-scroll {
  position: relative;
  margin-top: 14px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-fill);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* A `position: sticky` header only sticks inside an ancestor that scrolls
   VERTICALLY. `overflow-x: auto` makes the wrapper a scroll container on both
   axes but one that never scrolls down — so headers stayed put and the sticky
   rule was decorative. `[data-adz-scroll]` (applied by the build to tables past
   a row count) makes the wrapper genuinely scrollable, which also keeps very
   long reference tables from becoming endless columns of scrolled page. */
.adz-tablewrap[data-adz-scroll] {
  max-height: min(78vh, 900px);
  overflow: auto;
  overscroll-behavior: contain;
}
.adz-tablewrap[data-adz-scroll]::-webkit-scrollbar { width: 8px; height: 8px; }
.adz-tablewrap::-webkit-scrollbar { height: 8px; }
.adz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--adz-fs-sm);
}
.adz-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 14px;
  border-bottom: 1px solid var(--adz-line-2);
  background: var(--adz-base);
  color: var(--adz-ink);
  font-family: var(--adz-font-display);
  font-size: var(--adz-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.adz-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--adz-line);
  color: var(--adz-ink-2);
  vertical-align: top;
  line-height: 1.6;
}
.adz-table tbody tr:last-child td { border-bottom: 0; }
.adz-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .014); }
[data-theme="light"] .adz-table tbody tr:nth-child(even) td { background: rgba(15, 23, 42, .018); }
.adz-table tbody tr:hover td { background: var(--adz-fill-2); }
.adz-table td strong { color: var(--adz-ink); }
.adz-table td code { white-space: normal; }
.adz-table__group th {
  padding: 9px 14px;
  border-top: 1px solid var(--adz-line-2);
  border-bottom: 1px solid var(--adz-line);
  background: linear-gradient(90deg, var(--adz-brand-soft), transparent 70%);
  color: var(--adz-ink);
  font-family: var(--adz-font-display);
  font-size: var(--adz-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}
.adz-table tr[hidden] { display: none; }

/* ── Callouts ─────────────────────────────────────────────────────────────── */
.adz-callout {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--adz-line);
  border-left: 3px solid var(--adz-info);
  border-radius: var(--adz-r);
  background: linear-gradient(90deg, var(--adz-info-soft), transparent 72%), var(--adz-fill);
  max-width: 88ch;
}
.adz-callout__ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--adz-fill-2);
  color: var(--adz-info);
}
.adz-callout__ico .adz-ico { font-size: 16px; }
.adz-callout__body { min-width: 0; font-size: var(--adz-fs-sm); line-height: 1.66; }
.adz-callout__body p + p { margin-top: 7px; }
.adz-callout__title {
  margin: 0 0 4px;
  color: var(--adz-ink);
  font-family: var(--adz-font-display);
  font-weight: 700;
  font-size: .88rem;
}
.adz-callout--tip {
  border-left-color: var(--adz-pistachio);
  background: linear-gradient(90deg, var(--adz-success-soft), transparent 72%), var(--adz-fill);
}
.adz-callout--tip .adz-callout__ico { color: var(--adz-pistachio); }
.adz-callout--warn {
  border-left-color: var(--adz-warn);
  background: linear-gradient(90deg, var(--adz-warn-soft), transparent 72%), var(--adz-fill);
}
.adz-callout--warn .adz-callout__ico { color: var(--adz-warn); }
.adz-callout--danger {
  border-left-color: var(--adz-crimson-400);
  background: linear-gradient(90deg, var(--adz-danger-soft), transparent 72%), var(--adz-fill);
}
.adz-callout--danger .adz-callout__ico { color: var(--adz-crimson-300); }
.adz-callout--note {
  border-left-color: var(--adz-line-3);
  background: var(--adz-fill);
}
.adz-callout--note .adz-callout__ico { color: var(--adz-ink-3); }

/* ── Steps (numbered stepper cards) ─────────────────────────────────────────
   The card geometry is re-asserted with element-qualified selectors because the
   generic prose rules above (`.adz-article ol > li`, specificity 0-1-2) also
   match a step: they indented it by 30px and painted a second counter marker
   over the badge. The number below is the only counter this component has, and
   the rail makes the cards read as one ordered sequence. */
.adz-article ol.adz-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
/* Belt and braces: whatever tag the list ends up as, no generic list marker and
   no generic indent may reach a step card. */
.adz-article .adz-steps > li,
.adz-article .adz-steps > li::before { padding-left: 18px; content: none; list-style: none; }
.adz-article ol.adz-steps > li.adz-step {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  padding: 15px 18px;
  max-width: 84ch;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-fill);
  counter-increment: none;
  transition: border-color var(--adz-dur-2) var(--adz-ease), transform var(--adz-dur-2) var(--adz-ease);
}
.adz-step:hover { border-color: var(--adz-line-2); transform: translateX(2px); }
/* Connector rail: 2px, centred on the badge (padding-left 18 + half of 34). */
.adz-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 60px;
  bottom: -13px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--adz-line-2), transparent);
}
.adz-step__num {
  display: grid;
  place-items: center;
  align-self: start;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--adz-grad-crimson);
  color: #fff;
  font-family: var(--adz-font-display);
  font-weight: 700;
  font-size: .86rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 22px -14px rgba(220, 38, 38, .95);
}
.adz-step__body { min-width: 0; }
/* The title shares the badge's 34px band, so number and heading sit on one
   optical centre instead of the number floating above the first line. */
.adz-step__title {
  margin: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  color: var(--adz-ink);
  font-family: var(--adz-font-display);
  font-size: .95rem;
  font-weight: 700;
}
.adz-step__body > p { margin-top: 6px; font-size: var(--adz-fs-sm); }
.adz-step__body > p:first-of-type { margin-top: 0; }
.adz-step__body > .adz-content-note { margin-top: 6px; }
.adz-step__body ul { margin-top: 8px; }
.adz-step__body ul > li { font-size: var(--adz-fs-sm); }

/* ── Flows (sign-in, delivery, lifecycle diagrams) ────────────────────────── */
.adz-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.adz-flow__box {
  padding: 9px 14px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-ink);
  font-size: var(--adz-fs-sm);
  white-space: nowrap;
}
.adz-flow__arrow { color: var(--adz-crimson-300); font-weight: 700; }

/* ── Code blocks, mockups, copy button ────────────────────────────────────── */
.adz-code {
  position: relative;
  margin: 16px 0 0;
  padding: 15px 16px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-code-bg);
  overflow-x: auto;
}
.adz-code pre { margin: 0; color: var(--adz-ink-2); font-size: var(--adz-fs-sm); line-height: 1.75; }
.adz-article pre { margin: 16px 0 0; }

.adz-mock {
  position: relative;
  margin: 16px 0 0;
  padding: 15px 16px;
  border: 1px dashed var(--adz-line-2);
  border-radius: var(--adz-r);
  background: var(--adz-inset);
  color: var(--adz-ink-2);
  font-size: var(--adz-fs-sm);
  line-height: 1.9;
}
.adz-mock code { background: var(--adz-fill); border-color: var(--adz-line-2); }
/* A mockup's values are copied from the value itself: one click, tap or Enter on
   the chip. There is no floating button on a mockup — such a button could only
   copy the surrounding prose, which is what made the old affordance useless on
   the duration strip and the SLA strip. */
.adz-mock code[data-adz-chip-copy] { cursor: copy; }
.adz-mock code[data-adz-chip-copy]:hover {
  border-color: var(--adz-line-success);
  color: var(--adz-pistachio);
}
.adz-mock code[data-adz-chip-copy]:focus-visible {
  outline: 2px solid var(--adz-line-success);
  outline-offset: 2px;
}
.adz-mock code[data-adz-chip-copy].is-done {
  background: var(--adz-success-soft);
  border-color: var(--adz-line-success);
  color: var(--adz-pistachio);
}

/* The Copy button. It sits in a block's own bar when the block has one and
   floats in the corner of a real code block otherwise — always visible, because
   a control that only appears on hover reads as a missing feature and can never
   be reached on touch. `has-copy` is set by adz-core.js when it injects the
   floating variant, and reserves the space the button occupies. */
.adz-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  background: var(--adz-base);
  color: var(--adz-ink-3);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  transition: color var(--adz-dur-2) var(--adz-ease), border-color var(--adz-dur-2) var(--adz-ease),
    background var(--adz-dur-2) var(--adz-ease);
}
.adz-copy:hover { color: var(--adz-ink); border-color: var(--adz-line-3); }
.adz-copy.is-done {
  color: var(--adz-pistachio);
  border-color: var(--adz-line-success);
  background: var(--adz-success-soft);
}
.adz-copy .adz-ico { font-size: 12px; }
/* Floating variant: adz-core.js tags the host with `has-copy` and appends the
   button as its last child, so one selector covers every shape — a `.adz-code`
   wrapper, a bare <pre>, a <pre> inside a callout — and the host reserves the
   corner the button sits in. */
.has-copy { position: relative; }
.has-copy > .adz-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}
.adz-code.has-copy { padding-right: 92px; }
.adz-article > pre.has-copy,
.adz-callout__text pre.has-copy {
  padding: 14px 92px 14px 16px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-code-bg);
}

/* ── Trigger cards (the ways to run a text command) ──────────────────────────
   One card per trigger, each with its own label and its own Copy button wired to
   `data-adz-copy-text`, so a reader copies exactly the command they want instead
   of a box that mixed two commands with their annotations. */
.adz-triggers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.adz-trigger {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--adz-line);
  border-left: 3px solid var(--adz-crimson-400);
  border-radius: var(--adz-r);
  background: var(--adz-inset);
  overflow: hidden;
}
/* The bar is written after the command (so the archive's word order survives the
   build's prose guard and a screen reader hears the command first) but is shown
   above it, the way a code block's header sits over its content. */
.adz-trigger__bar { order: -1; }
.adz-trigger--prefix { border-left-color: var(--adz-crimson-400); }
.adz-trigger--mention { border-left-color: var(--adz-pistachio); }
.adz-trigger--prefix .adz-trigger__label { color: var(--adz-crimson-300); }
.adz-trigger--mention .adz-trigger__label { color: var(--adz-pistachio-200); }
.adz-trigger__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px 7px 14px;
  border-bottom: 1px solid var(--adz-line);
  background: var(--adz-fill);
}
.adz-trigger__label {
  display: block;
  min-width: 0;
  color: var(--adz-ink-3);
  font-size: 11.5px;
  letter-spacing: .01em;
}
/* The archive's annotation is lowercase; the label leading a card wants a
   capital. Done in CSS so the text the prose guard diffs against is untouched. */
.adz-trigger__label::first-letter { text-transform: uppercase; }
.adz-trigger__label code { font-size: .95em; }
.adz-article .adz-trigger__cmd {
  margin: 0;
  max-width: none;
  padding: 14px;
  background: var(--adz-code-bg);
  font-family: var(--adz-font-mono);
  font-size: var(--adz-fs-sm);
  line-height: 1.7;
  overflow-x: auto;
}
.adz-article .adz-trigger__cmd code {
  padding: 0;
  border: 0;
  background: none;
  color: var(--adz-ink);
  font-size: 1em;
  white-space: pre;
}

/* ── Card grids ───────────────────────────────────────────────────────────── */
.adz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.adz-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adz-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adz-card {
  padding: 15px 16px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-fill);
  transition: border-color var(--adz-dur-2) var(--adz-ease), background var(--adz-dur-2) var(--adz-ease),
              transform var(--adz-dur-2) var(--adz-ease);
}
.adz-card:hover { border-color: var(--adz-line-2); background: var(--adz-fill-2); transform: translateY(-2px); }
.adz-card h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--adz-ink);
  font-size: .92rem;
}
.adz-card h4 .adz-ico { font-size: 16px; color: var(--adz-crimson-300); }
.adz-card p { margin-top: 7px; font-size: var(--adz-fs-sm); }
.adz-card--brand { border-top: 3px solid var(--adz-crimson); }
.adz-card--success { border-top: 3px solid var(--adz-pistachio); }
.adz-card--gold { border-top: 3px solid var(--adz-warn); }
.adz-card--violet { border-top: 3px solid var(--adz-violet); }

/* ── Module filter chips (command pages) ──────────────────────────────────── */
.adz-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 22px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.adz-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-ink-2);
  font-size: var(--adz-fs-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--adz-dur-1) var(--adz-ease), border-color var(--adz-dur-1) var(--adz-ease),
              background var(--adz-dur-1) var(--adz-ease);
}
.adz-chip .adz-ico { font-size: 15px; color: var(--adz-ink-4); }
.adz-chip:hover { color: var(--adz-ink); border-color: var(--adz-line-2); background: var(--adz-fill-2); }
.adz-chip.is-current { border-color: var(--adz-line-brand); background: var(--adz-brand-soft); color: var(--adz-ink); }
.adz-chip.is-current .adz-ico { color: var(--adz-crimson-300); }
.adz-chip__n {
  padding: 1px 6px;
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill-2);
  color: var(--adz-ink-3);
  font-family: var(--adz-font-mono);
  font-size: 10px;
}
.adz-chip.is-current .adz-chip__n { background: var(--adz-brand-soft); color: var(--adz-ink); }

/* ── Live table filter ────────────────────────────────────────────────────── */
.adz-filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  padding: 11px 14px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-fill);
}
.adz-filterbar__field { position: relative; flex: 1 1 240px; }
.adz-filterbar__field .adz-ico {
  position: absolute;
  top: 50%;
  left: 11px;
  font-size: 14px;
  color: var(--adz-ink-4);
  transform: translateY(-50%);
  pointer-events: none;
}
.adz-filterbar input {
  width: 100%;
  height: 32px;
  padding: 0 12px 0 32px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-sm);
  background: var(--adz-inset);
  color: var(--adz-ink);
  font-size: var(--adz-fs-sm);
}
.adz-filterbar input:focus { outline: none; border-color: var(--adz-line-3); }
.adz-filterbar__count { color: var(--adz-ink-4); font-size: var(--adz-fs-xs); }

/* ── Cross-link chips ─────────────────────────────────────────────────────── */
.adz-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.adz-linkchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-ink-2);
  font-size: var(--adz-fs-xs);
  font-weight: 600;
}
.adz-linkchip:hover { color: var(--adz-ink); border-color: var(--adz-line-3); background: var(--adz-fill-2); }
.adz-linkchip .adz-ico { font-size: 14px; color: var(--adz-pistachio); }

/* ── Command surfaces ─────────────────────────────────────────────────────── */
.adz-surfacehead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 26px 0 0;
  font-size: var(--adz-fs-h3);
}
.adz-surface {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-ink-2);
  font-family: var(--adz-font-body);
  font-size: var(--adz-fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.adz-surface .adz-ico { font-size: 14px; }
.adz-surface--slash { border-color: var(--adz-line-brand); background: var(--adz-brand-soft); color: var(--adz-crimson-300); }
.adz-surface--prefix { border-color: var(--adz-line-success); background: var(--adz-success-soft); color: var(--adz-pistachio); }
.adz-surface--context { border-color: var(--adz-line-violet); background: var(--adz-violet-soft); color: var(--adz-violet); }
.adz-surface--component { border-color: var(--adz-line-info); background: var(--adz-info-soft); color: var(--adz-info); }

/* ── Command rows (module guides) ─────────────────────────────────────────── */
.adz-cmds { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.adz-cmdline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 11px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-fill);
  transition: border-color var(--adz-dur-1) var(--adz-ease), background var(--adz-dur-1) var(--adz-ease);
}
.adz-cmdline:hover { border-color: var(--adz-line-2); background: var(--adz-fill-2); }
.adz-cmdline__glyph {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--adz-grad-crimson);
  color: #fff;
  font-family: var(--adz-font-mono);
  font-size: 13px;
  font-weight: 600;
}
.adz-cmdline__name {
  background: none;
  border: 0;
  padding: 0;
  color: var(--adz-ink);
  font-family: var(--adz-font-mono);
  font-size: var(--adz-fs-sm);
  font-weight: 600;
}
.adz-cmdline__desc {
  grid-column: 2;
  color: var(--adz-ink-3);
  font-size: var(--adz-fs-xs);
  line-height: 1.6;
}

/* ── Command signatures inside table cells ────────────────────────────────── */
.adz-sig {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--adz-ink);
  font-family: var(--adz-font-mono);
  font-size: var(--adz-fs-sm);
  white-space: normal;
}
.adz-sig b { color: var(--adz-crimson-300); font-weight: 700; }
.adz-sig__args { color: var(--adz-pistachio); opacity: .92; }

/* ── Badges, pills, tags ──────────────────────────────────────────────────── */
.adz-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-ink-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.adz-badge--open,
.adz-badge--allow { border-color: var(--adz-line-success); background: var(--adz-success-soft); color: var(--adz-pistachio-200); }
.adz-badge--deny { border-color: var(--adz-line-danger); background: var(--adz-danger-soft); color: var(--adz-crimson-300); }
.adz-badge--muted { color: var(--adz-ink-4); }

.adz-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 2px 8px;
  border: 1px solid var(--adz-line-success);
  border-radius: var(--adz-r-pill);
  background: var(--adz-success-soft);
  color: var(--adz-pistachio);
  font-size: 10.5px;
  font-weight: 600;
}
.adz-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--adz-line-brand);
  border-radius: var(--adz-r-pill);
  background: var(--adz-brand-soft);
  color: var(--adz-crimson-300);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Hub: hero, stats, module groups, tiles, quick actions ────────────────── */
.adz-hero {
  position: relative;
  margin: 0 0 34px;
  padding: 34px 30px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r-xl);
  background:
    radial-gradient(560px 240px at 12% -20%, var(--adz-hero-1), transparent 70%),
    radial-gradient(520px 260px at 92% 8%, var(--adz-hero-2), transparent 68%),
    var(--adz-fill);
  overflow: hidden;
}
.adz-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  background: var(--adz-fill);
  color: var(--adz-ink-2);
  font-size: var(--adz-fs-xs);
  font-weight: 600;
}
.adz-hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--adz-pistachio);
  box-shadow: 0 0 0 4px rgba(168, 208, 141, .18);
}
.adz-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  background: var(--adz-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.adz-hero p { margin-top: 13px; max-width: 62ch; color: var(--adz-ink-2); font-size: var(--adz-fs-lead); }
.adz-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.adz-hero__search {
  position: absolute;
  top: 30px;
  right: 30px;
  width: min(300px, 42%);
}

.adz-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.adz-stat {
  padding: 12px 14px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-inset);
}
.adz-stat__num {
  font-family: var(--adz-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--adz-ink);
  line-height: 1.1;
}
.adz-stat__lbl { margin-top: 3px; color: var(--adz-ink-3); font-size: var(--adz-fs-xs); }

/* ── Module groups (hub) ──────────────────────────────────────────────────── */
.adz-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.adz-modgroup {
  padding: 18px 18px 16px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r-lg);
  background: var(--adz-fill);
}
.adz-modgroup__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--adz-line);
}
.adz-modgroup__head h3 { font-size: 1rem; }
.adz-modgroup__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--adz-brand-soft);
  color: var(--adz-crimson-300);
}
.adz-modgroup__icon .adz-ico { font-size: 17px; }
.adz-modgroup--engage .adz-modgroup__icon { background: var(--adz-success-soft); color: var(--adz-pistachio); }
.adz-modgroup__sub { color: var(--adz-ink-3); font-size: var(--adz-fs-xs); }
.adz-modgroup__count {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-pill);
  color: var(--adz-ink-3);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.adz-modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.adz-mod {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 13px 14px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-inset);
  transition: border-color var(--adz-dur-2) var(--adz-ease), transform var(--adz-dur-2) var(--adz-ease),
              background var(--adz-dur-2) var(--adz-ease);
}
.adz-mod:hover { border-color: var(--adz-line-3); background: var(--adz-fill-2); transform: translateY(-2px); }
.adz-mod__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--adz-fill-2);
  color: var(--adz-pistachio);
}
.adz-mod__icon .adz-ico { font-size: 16px; }
.adz-mod__name { color: var(--adz-ink); font-family: var(--adz-font-display); font-weight: 600; font-size: .9rem; }
.adz-mod__desc { margin-top: 3px; color: var(--adz-ink-3); font-size: var(--adz-fs-xs); line-height: 1.55; }

/* ── Documentation tiles ──────────────────────────────────────────────────── */
.adz-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.adz-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--adz-line);
  border-radius: var(--adz-r);
  background: var(--adz-fill);
  transition: border-color var(--adz-dur-2) var(--adz-ease), background var(--adz-dur-2) var(--adz-ease),
              transform var(--adz-dur-2) var(--adz-ease);
}
.adz-tile:hover { border-color: var(--adz-line-3); background: var(--adz-fill-2); transform: translateY(-2px); }
.adz-tile__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--adz-brand-soft);
  color: var(--adz-crimson-300);
}
.adz-tile__icon .adz-ico { font-size: 18px; }
.adz-tile__name { color: var(--adz-ink); font-family: var(--adz-font-display); font-weight: 600; }
.adz-tile__desc { margin-top: 3px; color: var(--adz-ink-3); font-size: var(--adz-fs-xs); line-height: 1.55; }
.adz-tile__arrow { color: var(--adz-ink-4); }
.adz-tile:hover .adz-tile__arrow { color: var(--adz-pistachio); }

/* ── Quick actions ────────────────────────────────────────────────────────── */
.adz-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.adz-quick__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r);
  background: var(--adz-inset);
  transition: border-color var(--adz-dur-2) var(--adz-ease), transform var(--adz-dur-2) var(--adz-ease);
}
.adz-quick__item:hover { border-color: var(--adz-line-3); transform: translateY(-2px); }
.adz-quick__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--adz-fill-2);
  color: var(--adz-pistachio);
}
.adz-quick__icon .adz-ico { font-size: 17px; }
.adz-quick__name { color: var(--adz-ink); font-family: var(--adz-font-display); font-weight: 600; font-size: .9rem; }
.adz-quick__desc { margin-top: 2px; color: var(--adz-ink-3); font-size: var(--adz-fs-xs); }

/* ── Plans ────────────────────────────────────────────────────────────────── */
.adz-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.adz-plan {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--adz-line-2);
  border-radius: var(--adz-r-lg);
  background: var(--adz-fill);
}
.adz-plan--pro {
  border-color: var(--adz-line-brand);
  background:
    radial-gradient(400px 180px at 100% -10%, var(--adz-hero-1), transparent 70%),
    var(--adz-fill);
  box-shadow: var(--adz-glow-brand);
}
.adz-plan__name {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--adz-ink);
  font-family: var(--adz-font-display);
  font-size: 1.05rem;
  font-weight: 700;
}
.adz-plan__price {
  margin-top: 10px;
  color: var(--adz-ink);
  font-family: var(--adz-font-display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}
.adz-plan__price small { color: var(--adz-ink-3); font-size: .8rem; font-weight: 500; }
.adz-plan__desc { margin-top: 9px; color: var(--adz-ink-3); font-size: var(--adz-fs-sm); }
.adz-plan__features { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.adz-article .adz-plan__features > li,
.adz-article .adz-plan__features > li::before { padding-left: 24px; content: none; }
.adz-plan__features > li {
  position: relative;
  color: var(--adz-ink-2);
  font-size: var(--adz-fs-sm);
  line-height: 1.55;
}
.adz-plan__features > li::after {
  content: "";
  position: absolute;
  top: .5em;
  left: 4px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--adz-pistachio);
  border-bottom: 2px solid var(--adz-pistachio);
  transform: rotate(-45deg);
}
.adz-plan__features > li.adz-plan__no { color: var(--adz-ink-3); }
.adz-plan__features > li.adz-plan__no::after {
  top: .55em;
  left: 5px;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--adz-crimson-400);
  transform: none;
}

/* ============================================================================
   CONTENT RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .adz-cards--2,
  .adz-cards--3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .adz-hero { padding: 24px 20px; }
  .adz-hero__search { position: static; width: 100%; margin-top: 18px; }
  .adz-sec + .adz-sec { margin-top: 28px; }
  .adz-callout { grid-template-columns: minmax(0, 1fr); }
  .adz-callout__ico { width: 24px; height: 24px; }
  .adz-article ol.adz-steps > li.adz-step { padding: 13px 15px; }
  .adz-step:not(:last-child)::after { top: 58px; }
  .adz-tablewrap,
  .adz-table-scroll { border-radius: var(--adz-r-sm); }
  .adz-modgroup { padding: 15px 14px 13px; }
  .adz-modgroup__count { margin-left: 0; }
}

@media (max-width: 480px) {
  .adz-article ol.adz-steps { gap: 10px; }
  .adz-article ol.adz-steps > li.adz-step {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 12px;
    padding: 12px 13px;
  }
  .adz-step__num { width: 28px; height: 28px; border-radius: 9px; font-size: .8rem; }
  .adz-step__title { min-height: 28px; }
  .adz-step:not(:last-child)::after { left: 26px; top: 49px; bottom: -11px; }
  .adz-trigger__bar { padding: 7px 8px 7px 12px; }
  .adz-cmdline { grid-template-columns: minmax(0, 1fr); }
  .adz-cmdline__desc { grid-column: 1; }
  .adz-cmdline__glyph { display: none; }
}

/* ============================================================================
   COMPONENT GLUE
   Small rules that keep the converted markup tight: children of the new
   wrappers, spacing between stacked components, and the overrides that stop
   the generic prose rules from dressing purpose-built components.
   ========================================================================== */
.adz-callout__text p + p { margin-top: 7px; }
.adz-callout__text > :first-child { margin-top: 0; }
.adz-callout__text > p { max-width: none; }

.adz-tile__body,
.adz-mod__body,
.adz-quick__item > div { min-width: 0; }
.adz-mod__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.adz-mod__tags .adz-pill { margin-top: 0; }

.adz-hero__dot { display: inline-block; }
.adz-hero__badge { margin-bottom: 2px; }

.adz-cmdline + .adz-cmdline { margin-top: 6px; }
.adz-card + .adz-card { margin-top: 0; }
.adz-callout + .adz-callout,
.adz-tablewrap + .adz-tablewrap { margin-top: 12px; }
.adz-filterbar + .adz-tablewrap { margin-top: 10px; }
.adz-notes + .adz-tablewrap { margin-top: 12px; }

.adz-h3 { margin: 30px 0 0; font-size: var(--adz-fs-h3); }
.adz-list { margin-top: 12px; }

/* Purpose-built components must not inherit the generic prose code chip */
.adz-article .adz-sig,
.adz-article .adz-cmdline__name {
  padding: 0;
  border: 0;
  background: none;
  white-space: normal;
}
.adz-article .adz-sig { font-size: var(--adz-fs-sm); }
.adz-article .adz-cmdline__name { font-weight: 600; }

/* Section lead is a lead, not a paragraph with a note chip bolted on */
.adz-article .adz-sec__lead + p { margin-top: 14px; }
.adz-sec__lead .adz-ico { margin-right: 2px; }

/* Step bodies keep their own rhythm inside the numbered card */
.adz-step__body > *:first-child { margin-top: 0; }
.adz-step__body > ul > li::before { top: .62em; }
.adz-step__body > ul { margin: 0; padding-left: 4px; }
.adz-article .adz-step__title { margin: 0; font-size: .95rem; }
.adz-article .adz-step__body > ul,
.adz-article .adz-step__body > ol { margin-left: 4px; }