/* ==========================================================================
   AmPuH SEO Intelligence - Enterprise Design System  v0.31.0
   --------------------------------------------------------------------------
   LOAD ORDER CONTRACT: this stylesheet must be the FIRST stylesheet in <head>,
   before any page-specific stylesheet. Every selector is namespaced .ds-*, so
   it cannot collide with the 56 legacy stylesheets, and page CSS that loads
   after it always wins. No !important is used anywhere in this file.

   Tokens are resolved from ampuh-tokens.css (loaded last) with inline
   fallbacks so this file degrades safely if the token layer is ever absent.
   ========================================================================== */

/* ---------------------------------------------------------------- LAYOUT */
.ds-shell {
  width: 100%;
  max-width: var(--ds-shell-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--ds-gutter, 24px);
}

.ds-stack        { display: flex; flex-direction: column; gap: var(--ds-space-6, 24px); }
.ds-stack--tight { gap: var(--ds-space-3, 12px); }
.ds-stack--loose { gap: var(--ds-space-10, 40px); }
.ds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3, 12px);
}
.ds-row--between { justify-content: space-between; }
.ds-spacer { flex: 1 1 auto; min-width: 0; }

/* Auto-fit grid: no manual breakpoints needed, cards never overflow. */
.ds-grid {
  display: grid;
  gap: var(--ds-space-4, 16px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.ds-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ds-grid > * { min-width: 0; }

/* --------------------------------------------------------------- HEADINGS */
.ds-page-head {
  display: grid;
  gap: var(--ds-space-5, 20px);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  padding-block: var(--ds-space-8, 32px) var(--ds-space-6, 24px);
}
@media (min-width: 900px) {
  .ds-page-head--split { grid-template-columns: minmax(0, 1fr) auto; }
}
.ds-page-title {
  margin: 0;
  color: var(--ds-text, #162319);
  font: 700 var(--ds-font-size-display, 2rem) / var(--ds-leading-tight, 1.18) var(--ds-font-sans, system-ui);
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.ds-page-lead {
  margin: var(--ds-space-2, 8px) 0 0;
  max-width: 68ch;
  color: var(--ds-text-muted, #536054);
  font: 400 var(--ds-font-size-md, .9375rem) / var(--ds-leading-normal, 1.55) var(--ds-font-sans, system-ui);
  text-wrap: pretty;
}
.ds-eyebrow {
  display: block;
  margin: 0 0 var(--ds-space-2, 8px);
  color: var(--ds-text-muted, #536054);
  font: 700 var(--ds-font-size-xs, .75rem) / 1.2 var(--ds-font-sans, system-ui);
  letter-spacing: var(--ds-tracking-label, .08em);
  text-transform: uppercase;
}
.ds-section-title {
  margin: 0;
  color: var(--ds-text, #162319);
  font: 650 var(--ds-font-size-lg, 1.0625rem) / var(--ds-leading-snug, 1.35) var(--ds-font-sans, system-ui);
  letter-spacing: -.01em;
}
.ds-label {
  color: var(--ds-text-muted, #536054);
  font: 700 var(--ds-font-size-xs, .75rem) / 1.2 var(--ds-font-sans, system-ui);
  letter-spacing: var(--ds-tracking-label, .08em);
  text-transform: uppercase;
}
.ds-help {
  margin: 0;
  color: var(--ds-text-muted, #536054);
  font: 400 var(--ds-font-size-sm, .8125rem) / var(--ds-leading-normal, 1.55) var(--ds-font-sans, system-ui);
}
.ds-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------- BREADCRUMBS */
.ds-breadcrumb { margin: 0; padding: var(--ds-space-4, 16px) 0 0; }
.ds-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  margin: 0; padding: 0;
  list-style: none;
  font: 500 var(--ds-font-size-xs, .75rem) / 1.4 var(--ds-font-sans, system-ui);
}
.ds-breadcrumb li { display: flex; align-items: center; gap: var(--ds-space-2, 8px); min-width: 0; }
.ds-breadcrumb li + li::before {
  content: "/";
  color: var(--ds-border-strong, #7d8375);
  font-weight: 400;
}
.ds-breadcrumb a { color: var(--ds-text-muted, #536054); text-decoration: none; overflow-wrap: anywhere; }
.ds-breadcrumb a:hover { color: var(--ds-pine, #0e5631); text-decoration: underline; }
.ds-breadcrumb [aria-current="page"] { color: var(--ds-text, #162319); font-weight: 650; overflow-wrap: anywhere; }

/* --------------------------------------------------------------- SURFACES */
.ds-card {
  min-width: 0;
  padding: var(--ds-space-6, 24px);
  border: 1px solid var(--ds-border, #ccd2c5);
  border-radius: var(--ds-radius-lg, 14px);
  background: var(--ds-surface, #fefdfa);
}
.ds-card--flush { padding: 0; overflow: hidden; }
.ds-card--raised { box-shadow: var(--ds-shadow-md, 0 8px 20px rgba(0,0,0,.06)); }
.ds-card--sunken { background: var(--ds-surface-sunken, #e9ebdf); }
.ds-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-3, 12px);
  margin: 0 0 var(--ds-space-5, 20px);
}
.ds-card--flush > .ds-card__head {
  margin: 0;
  padding: var(--ds-space-5, 20px) var(--ds-space-6, 24px);
  border-bottom: 1px solid var(--ds-border, #ccd2c5);
}
.ds-card__body { padding: var(--ds-space-6, 24px); }
.ds-divider { height: 1px; margin: 0; border: 0; background: var(--ds-border, #ccd2c5); }

/* ----------------------------------------------------------- METRIC CARDS */
.ds-metric {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1, 4px);
  min-width: 0;
  padding: var(--ds-space-5, 20px);
  border: 1px solid var(--ds-border, #ccd2c5);
  border-radius: var(--ds-radius-lg, 14px);
  background: var(--ds-surface, #fefdfa);
}
.ds-metric__label {
  color: var(--ds-text-muted, #536054);
  font: 700 var(--ds-font-size-xs, .75rem) / 1.2 var(--ds-font-sans, system-ui);
  letter-spacing: var(--ds-tracking-label, .08em);
  text-transform: uppercase;
}
.ds-metric__value {
  color: var(--ds-text, #162319);
  font: 700 var(--ds-font-size-metric, 1.75rem) / 1.05 var(--ds-font-sans, system-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.ds-metric__note {
  color: var(--ds-text-muted, #536054);
  font: 400 var(--ds-font-size-xs, .75rem) / var(--ds-leading-snug, 1.35) var(--ds-font-sans, system-ui);
  font-style: normal;
}
.ds-metric--accent { border-left: 3px solid var(--ds-pine, #0e5631); }

/* ---------------------------------------------------------------- BUTTONS */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2, 8px);
  min-height: var(--ds-touch, 44px);
  padding: 0 var(--ds-space-5, 20px);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md, 10px);
  background: none;
  color: inherit;
  font: 650 var(--ds-font-size-sm, .8125rem) / 1.2 var(--ds-font-sans, system-ui);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition:
    background-color var(--ds-duration, 160ms) var(--ds-ease-out, ease),
    border-color var(--ds-duration, 160ms) var(--ds-ease-out, ease),
    color var(--ds-duration, 160ms) var(--ds-ease-out, ease),
    box-shadow var(--ds-duration, 160ms) var(--ds-ease-out, ease);
}
.ds-btn--primary {
  border-color: var(--ds-pine-dark, #01351d);
  background: var(--ds-pine, #0e5631);
  color: oklch(100% 0 0);
  box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}
.ds-btn--primary:hover { background: var(--ds-pine-hover, #004626); }
.ds-btn--secondary {
  border-color: var(--ds-border-strong, #7d8375);
  background: var(--ds-surface, #fefdfa);
  color: var(--ds-pine, #0e5631);
}
.ds-btn--secondary:hover { background: var(--ds-surface-sunken, #e9ebdf); }
.ds-btn--ghost { color: var(--ds-pine, #0e5631); }
.ds-btn--ghost:hover { background: var(--ds-surface-sunken, #e9ebdf); }
.ds-btn--danger {
  border-color: var(--ds-danger, #a12c25);
  background: var(--ds-surface, #fefdfa);
  color: var(--ds-danger, #a12c25);
}
.ds-btn--danger:hover { background: var(--ds-danger-tint, #f7e9e8); }
.ds-btn--sm { min-height: 34px; padding: 0 var(--ds-space-3, 12px); font-size: var(--ds-font-size-xs, .75rem); }
.ds-btn--block { width: 100%; }
.ds-btn[disabled],
.ds-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Button loading state, driven by ampuh-ui.js (no layout shift: text stays) */
.ds-btn[data-loading="true"] { cursor: progress; }
.ds-btn[data-loading="true"]::before {
  content: "";
  width: 1em; height: 1em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ds-spin 700ms linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- BADGES */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  max-width: 100%;
  padding: 3px var(--ds-space-3, 12px);
  border: 1px solid;
  border-radius: var(--ds-radius-pill, 999px);
  font: 700 var(--ds-font-size-xs, .75rem) / 1.5 var(--ds-font-sans, system-ui);
  letter-spacing: .02em;
  white-space: nowrap;
}
/* Never colour-only: every badge also carries a shape glyph and a text label. */
.ds-badge::before { font-size: .9em; line-height: 1; }
.ds-badge--success { border-color: var(--ds-success, #0b6834); background: var(--ds-success-tint, #e6f4ea); color: var(--ds-success, #0b6834); }
.ds-badge--success::before { content: "\2713"; }
.ds-badge--warning { border-color: var(--ds-warning, #915e07); background: var(--ds-warning-tint, #f8f0dd); color: var(--ds-warning, #915e07); }
.ds-badge--warning::before { content: "\26A0"; }
.ds-badge--danger  { border-color: var(--ds-danger, #a12c25); background: var(--ds-danger-tint, #f9e9e8); color: var(--ds-danger, #a12c25); }
.ds-badge--danger::before { content: "\2715"; }
.ds-badge--info    { border-color: var(--ds-info, #075c8b); background: var(--ds-info-tint, #e6f1f8); color: var(--ds-info, #075c8b); }
.ds-badge--info::before { content: "\2139"; }
.ds-badge--neutral { border-color: var(--ds-border-strong, #7d8375); background: var(--ds-neutral-tint, #e9ebdf); color: var(--ds-text-muted, #536054); }
.ds-badge--neutral::before { content: "\2013"; }

/* ----------------------------------------------------------------- METER */
.ds-meter {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-surface-sunken, #e9ebdf);
}
.ds-meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--ds-pine, #0e5631); }
.ds-meter__fill--success { background: var(--ds-success, #0b6834); }
.ds-meter__fill--warning { background: var(--ds-warning, #915e07); }
.ds-meter__fill--danger  { background: var(--ds-danger, #a12c25); }
/* Width comes from the width attribute of an inline SVG or a preset class:
   inline style attributes are forbidden by the application CSP. */
.ds-meter__fill[data-fill="0"]   { width: 0; }
.ds-meter__fill[data-fill="25"]  { width: 25%; }
.ds-meter__fill[data-fill="50"]  { width: 50%; }
.ds-meter__fill[data-fill="75"]  { width: 75%; }
.ds-meter__fill[data-fill="100"] { width: 100%; }

/* ------------------------------------------------------------------ FORMS */
.ds-field { display: flex; flex-direction: column; gap: var(--ds-space-2, 8px); min-width: 0; }
.ds-field > label,
.ds-field__label {
  color: var(--ds-text, #162319);
  font: 650 var(--ds-font-size-sm, .8125rem) / 1.3 var(--ds-font-sans, system-ui);
}
.ds-field__req { color: var(--ds-danger, #a12c25); font-weight: 700; }
.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  min-height: var(--ds-touch, 44px);
  padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
  border: 1px solid var(--ds-border-strong, #7d8375);
  border-radius: var(--ds-radius-md, 10px);
  background: var(--ds-surface-raised, #fff);
  color: var(--ds-text, #162319);
  font: 400 1rem / 1.4 var(--ds-font-sans, system-ui);
  transition: border-color var(--ds-duration, 160ms) var(--ds-ease-out, ease),
              box-shadow var(--ds-duration, 160ms) var(--ds-ease-out, ease);
}
.ds-textarea { min-height: 96px; resize: vertical; }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--ds-pine, #0e5631); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  border-color: var(--ds-pine, #0e5631);
  box-shadow: 0 0 0 3px var(--ds-pine-tint, #e8f2ec);
  outline: none;
}
.ds-input[aria-invalid="true"],
.ds-select[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] { border-color: var(--ds-danger, #a12c25); }
.ds-field__error {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  color: var(--ds-danger, #a12c25);
  font: 600 var(--ds-font-size-sm, .8125rem) / 1.4 var(--ds-font-sans, system-ui);
}
.ds-field__error::before { content: "\26A0"; }

/* ----------------------------------------------------------------- ALERTS */
.ds-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ds-space-3, 12px);
  padding: var(--ds-space-4, 16px) var(--ds-space-5, 20px);
  border: 1px solid;
  border-radius: var(--ds-radius-md, 10px);
  font: 400 var(--ds-font-size-sm, .8125rem) / var(--ds-leading-normal, 1.55) var(--ds-font-sans, system-ui);
  overflow-wrap: anywhere;
}
/* v1.9.1. A COMPONENT THAT SETS display MUST RESPECT THE hidden ATTRIBUTE.
   .ds-alert is display:grid, and `hidden` is display:none from the UA stylesheet - a class rule
   beats it. free-tools.php ships a verdict alert with the hidden attribute and it rendered anyway:
   an empty amber box, 55px tall, on all 19 public tool pages before the visitor had run anything.
   Guarded here rather than at each call site, because the component is what breaks the promise and
   every future consumer inherits the fix. Found by end-to-end testing in a browser, not by reading. */
.ds-alert[hidden] { display: none; }
.ds-alert::before { font-size: 1rem; line-height: 1.3; }
.ds-alert strong { display: block; margin-bottom: 2px; font-weight: 700; }
.ds-alert p { margin: 0; }
.ds-alert--success { border-color: var(--ds-success, #0b6834); background: var(--ds-success-tint, #e6f4ea); color: var(--ds-success, #0b6834); }
.ds-alert--success::before { content: "\2713"; }
.ds-alert--warning { border-color: var(--ds-warning, #915e07); background: var(--ds-warning-tint, #f8f0dd); color: var(--ds-warning, #915e07); }
.ds-alert--warning::before { content: "\26A0"; }
.ds-alert--danger  { border-color: var(--ds-danger, #a12c25); background: var(--ds-danger-tint, #f9e9e8); color: var(--ds-danger, #a12c25); }
.ds-alert--danger::before { content: "\2715"; }
.ds-alert--info    { border-color: var(--ds-info, #075c8b); background: var(--ds-info-tint, #e6f1f8); color: var(--ds-info, #075c8b); }
.ds-alert--info::before { content: "\2139"; }

/* ------------------------------------------------------------ EMPTY STATE */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-3, 12px);
  padding: var(--ds-space-10, 40px) var(--ds-space-6, 24px);
  border: 1px dashed var(--ds-border-strong, #7d8375);
  border-radius: var(--ds-radius-lg, 14px);
  background: var(--ds-surface, #fefdfa);
}
.ds-empty__title {
  margin: 0;
  color: var(--ds-text, #162319);
  font: 650 var(--ds-font-size-lg, 1.0625rem) / 1.3 var(--ds-font-sans, system-ui);
}
.ds-empty__body {
  margin: 0;
  max-width: 56ch;
  color: var(--ds-text-muted, #536054);
  font: 400 var(--ds-font-size-sm, .8125rem) / var(--ds-leading-normal, 1.55) var(--ds-font-sans, system-ui);
}

/* ----------------------------------------------------------------- TABLES */
.ds-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--ds-radius-lg, 14px);
}
.ds-table {
  width: 100%;
  /* ==========================================================================
     v1.80.19. SEPARATE, NOT COLLAPSE, AND THIS IS WHY THE STICKY HEADER NEVER HELD.

     `position: sticky` on a `<th>` is ignored by WebKit and was ignored by Chromium for
     years when the table's used `border-collapse` is `collapse`. The header three rules
     below has declared `position: sticky` since it was written, and this line was
     quietly cancelling it.

     ampuh-tokens.css ALREADY DECIDED THIS, and its decision has never applied. It
     carries `:where(.ds-table, table) { border-collapse: separate; border-spacing: 0 }` -
     exactly the pair you write to make a sticky header work while keeping the visual
     identical. But `:where()` contributes ZERO specificity, and `.ds-table` here is
     (0,1,0), so this rule won on weight no matter that tokens loads last. A layer that
     is loaded last and writes everything at zero specificity cannot correct a plain
     class rule; it can only add to one. Ten more of its intents are inert for the same
     reason - see the list in qa/regression.py - and this is the only one of the eleven
     that breaks a FUNCTION rather than a colour.

     VISUALLY IDENTICAL HERE, WHICH IS WHY IT IS SAFE. `separate` doubles borders only
     where two cells both draw a border on their shared edge. These cells draw
     `border-bottom` and nothing else: no vertical borders, no border on the table, and
     `border-spacing: 0` removes the gap `separate` would otherwise introduce. The
     `tbody tr:last-child td { border-bottom: 0 }` rule still lands the same way.
     ========================================================================== */
  border-collapse: separate;
  border-spacing: 0;
  font: 400 var(--ds-font-size-sm, .8125rem) / var(--ds-leading-snug, 1.35) var(--ds-font-sans, system-ui);
}
.ds-table caption {
  padding: 0 0 var(--ds-space-3, 12px);
  color: var(--ds-text-muted, #536054);
  font-size: var(--ds-font-size-xs, .75rem);
  text-align: left;
}
.ds-table th,
.ds-table td {
  padding: var(--ds-space-4, 16px);
  border-bottom: 1px solid var(--ds-border, #ccd2c5);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.ds-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ds-surface-sunken, #e9ebdf);
  color: var(--ds-text-muted, #536054);
  font: 700 var(--ds-font-size-xs, .75rem) / 1.3 var(--ds-font-sans, system-ui);
  letter-spacing: var(--ds-tracking-label, .08em);
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover { background: var(--ds-pine-tint, #eef4f0); }
.ds-table td[data-numeric] { font-variant-numeric: tabular-nums; }
.ds-table__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2, 8px); }

/* Mobile: the table becomes stacked cards. Requires data-label on each td. */
@media (max-width: 760px) {
  .ds-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ds-table--stack tbody tr {
    display: grid;
    gap: var(--ds-space-2, 8px);
    margin-bottom: var(--ds-space-3, 12px);
    padding: var(--ds-space-4, 16px);
    border: 1px solid var(--ds-border, #ccd2c5);
    border-radius: var(--ds-radius-md, 10px);
    background: var(--ds-surface, #fefdfa);
  }
  .ds-table--stack tbody tr:hover { background: var(--ds-surface, #fefdfa); }
  .ds-table--stack td {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    gap: var(--ds-space-3, 12px);
    align-items: start;
    padding: 0;
    border: 0;
  }
  .ds-table--stack td::before {
    content: attr(data-label);
    color: var(--ds-text-muted, #536054);
    font: 700 var(--ds-font-size-xs, .75rem) / 1.5 var(--ds-font-sans, system-ui);
    letter-spacing: var(--ds-tracking-label, .08em);
    text-transform: uppercase;
  }
  .ds-table--stack td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .ds-table--stack td[data-label=""]::before { content: none; }
}

/* ----------------------------------------------- PROGRESSIVE DISCLOSURE */
.ds-disclose {
  border: 1px solid var(--ds-border, #ccd2c5);
  border-radius: var(--ds-radius-md, 10px);
  background: var(--ds-surface, #fefdfa);
}
.ds-disclose > summary {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2, 8px);
  min-height: var(--ds-touch, 44px);
  padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
  color: var(--ds-pine, #0e5631);
  font: 650 var(--ds-font-size-sm, .8125rem) / 1.3 var(--ds-font-sans, system-ui);
  cursor: pointer;
  list-style: none;
}
.ds-disclose > summary::-webkit-details-marker { display: none; }
.ds-disclose > summary::after {
  content: "\25BE";
  margin-left: auto;
  transition: transform var(--ds-duration, 160ms) var(--ds-ease-out, ease);
}
.ds-disclose[open] > summary::after { transform: rotate(180deg); }
.ds-disclose[open] > summary { border-bottom: 1px solid var(--ds-border, #ccd2c5); }
.ds-disclose__body {
  padding: var(--ds-space-4, 16px);
  color: var(--ds-text-muted, #536054);
  font: 400 var(--ds-font-size-sm, .8125rem) / var(--ds-leading-normal, 1.55) var(--ds-font-sans, system-ui);
}
.ds-disclose__body code,
.ds-code {
  padding: 2px 6px;
  border: 1px solid var(--ds-border, #ccd2c5);
  border-radius: var(--ds-radius-sm, 6px);
  background: var(--ds-surface-sunken, #e9ebdf);
  color: var(--ds-text, #162319);
  font: 400 .85em / 1.5 var(--ds-font-mono, monospace);
  overflow-wrap: anywhere;
}

/* Plain-language gloss beside a technical term. */
.ds-gloss { display: flex; flex-direction: column; gap: 2px; }
.ds-gloss__term { color: var(--ds-text, #162319); font-weight: 650; }
.ds-gloss__plain { color: var(--ds-text-muted, #536054); font-size: var(--ds-font-size-sm, .8125rem); }

/* -------------------------------------------------------------- SKELETON */
.ds-skeleton {
  border-radius: var(--ds-radius-sm, 6px);
  background: linear-gradient(90deg,
    var(--ds-surface-sunken, #e9ebdf) 25%,
    var(--ds-border, #ccd2c5) 37%,
    var(--ds-surface-sunken, #e9ebdf) 63%);
  background-size: 400% 100%;
  animation: ds-shimmer 1.4s ease infinite;
}
.ds-skeleton--text { height: 1em; }
.ds-skeleton--line { height: 8px; }
@keyframes ds-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* --------------------------------------------------------------- TOOLBAR */
.ds-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ds-space-3, 12px);
  padding: var(--ds-space-4, 16px);
  border: 1px solid var(--ds-border, #ccd2c5);
  border-radius: var(--ds-radius-lg, 14px);
  background: var(--ds-surface-sunken, #e9ebdf);
}
.ds-toolbar .ds-field { flex: 1 1 240px; }

/* When JavaScript is available the explicit Apply button can be hidden,
   because ampuh-ui.js submits the form on change. Without JS it stays
   visible, which keeps the control usable as pure HTML. */
.js .ds-auto-submit__apply { display: none; }

/* ------------------------------------------------------------------ SUBNAV */
/* Added v0.31.3. Section navigation within one area of the product, used by
   Search Operations and the Google Cloud control centre. Purely additive: no
   existing .ds-* rule was altered, so every earlier phase is unaffected.
   Selection is signalled by fill AND weight, and carries aria-current in the
   markup, so it never depends on colour alone. */
.ds-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2, 8px);
  padding: var(--ds-space-2, 8px);
  border: 1px solid var(--ds-border, #ccd2c5);
  border-radius: var(--ds-radius-lg, 14px);
  background: var(--ds-surface-sunken, #e9ebdf);
}
.ds-subnav > a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--ds-space-4, 16px);
  border-radius: var(--ds-radius-md, 10px);
  color: var(--ds-text-muted, #536054);
  font: 650 var(--ds-font-size-sm, .8125rem) / 1.2 var(--ds-font-sans, system-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ds-duration, 160ms) var(--ds-ease-out, ease),
              color var(--ds-duration, 160ms) var(--ds-ease-out, ease);
}
.ds-subnav > a:hover { background: var(--ds-surface, #fefdfa); color: var(--ds-pine, #0e5631); }
.ds-subnav > a[aria-current="page"] {
  background: var(--ds-pine, #0e5631);
  color: oklch(100% 0 0);
  font-weight: 700;
}
/* In-page anchors within a surface: lighter treatment, no current state. */
.ds-subnav--inpage {
  border-style: dashed;
  background: transparent;
}

/* ============================================================== SPECIFICATION
   v0.63.3. THE COMPONENT THAT WAS DEFINED TWELVE TIMES.

   .tool-scope is the summary panel in a page head: label, value, occasional note.
   Nine templates use it and TWELVE page stylesheets define it, several of them
   byte-for-byte identical, and connectors.css carries a copy its own template does
   not even use. Integrations spells the same component .connector-scope, with the
   same rules under a different name.

   That is the actual reason this application looks less finished than it is. Every
   page reimplements the same object, so every page's version drifts a little, and
   drift reads as carelessness however careful each individual page was.

   Defined here once. It is a specification: label left, value right, aligned on the
   baseline, a single inset hairline for depth rather than a drop shadow, which is
   how hardware documentation has presented one for forty years.
   ========================================================================== */
.ds-spec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--ds-space-2, 8px) var(--ds-space-5, 20px);
  margin: 0;
  padding: var(--ds-space-5, 20px);
  border: 1px solid var(--ds-border, #ccd2c5);
  border-radius: var(--ds-radius-lg, 14px);
  background: var(--ds-surface, #fefdfa);
  box-shadow: inset 0 1px 0 var(--ds-surface-raised, #fff), 0 1px 2px oklch(29% .068 157 / .04);
}
.ds-spec dt {
  grid-column: 1;
  margin: 0;
  color: var(--ds-text-muted, #536054);
  font: 600 var(--ds-font-size-xs, .75rem) / 1.5 var(--ds-font-sans, system-ui);
  letter-spacing: var(--ds-tracking-label, .08em);
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-spec dd {
  grid-column: 2;
  margin: 0;
  color: var(--ds-text, #162319);
  font: 600 var(--ds-font-size-md, .9375rem) / 1.45 var(--ds-font-sans, system-ui);
  font-variant-numeric: tabular-nums;
}
/* A note belongs to the value above it, so it stays in the value column and drops
   its weight instead of starting a row that reads like another fact. */
.ds-spec__note {
  color: var(--ds-text-muted, #536054);
  font: 400 var(--ds-font-size-xs, .8125rem) / 1.5 var(--ds-font-sans, system-ui);
}
.ds-spec dd + dd { margin-top: calc(var(--ds-space-1, 4px) * -1); }
.ds-spec__url,
.ds-spec code { overflow-wrap: anywhere; font-weight: 400; font-size: var(--ds-font-size-sm, .8125rem); }

/* v0.63.4. THE STACKED VARIANT, and it exists to make a conversion safe rather than
   to indulge two looks.

   The ten duplicated copies were all the SAME layout: dt above dd, stacked, because
   every one of them sits in a narrow aside beside a page title. .ds-spec above is a
   two-column grid, which suits the wide summary panel on Setup and Integrations and
   would visibly re-lay-out the eight pages that used the stacked form.

   Those eight pages cannot be rendered in the build environment, and two of them are
   Superadmin surfaces. Converting their LAYOUT blind, in the same release that removes
   their stylesheet rules, would mean shipping an unverifiable visual change on top of a
   structural one. So the variant preserves them exactly: same padding, same weights,
   same rhythm as the block it replaces.

   This is not two components. It is one component in a wide slot and a narrow slot,
   which is a fact about the slot rather than a preference. Whether those eight pages
   would read better in two columns is a taste question that needs eyes on each page,
   and it is not answered by deleting duplicate CSS. */
.ds-spec--stacked {
  display: block;
  padding: var(--ds-space-4, 16px) var(--ds-space-5, 20px);
  box-shadow: none;
}
.ds-spec--stacked dt {
  white-space: normal;
  font-weight: 700;
  line-height: 1.2;
}
.ds-spec--stacked dd {
  margin: var(--ds-space-1, 4px) 0 0;
  font-weight: 650;
  line-height: 1.35;
}
.ds-spec--stacked dd + dt { margin-top: var(--ds-space-4, 16px); }
/* The base pulls a second dd up against the first, which is right for a value and its
   note in a two-column panel. Stacked, the note sets its own 12px, so the pull-up is
   cancelled rather than left to be won on specificity. Verified against all eight
   converted templates: every consecutive dd pair there is a value followed by a note. */
.ds-spec--stacked dd + dd { margin-top: 0; }
.ds-spec--stacked .ds-spec__note {
  margin-top: var(--ds-space-3, 12px);
  font-size: var(--ds-font-size-xs, .75rem);
}

/* ==================================================================== COUNT
   v0.63.3. A TALLY IS NOT A STATUS, and three surfaces were using a status badge
   for one because there was nothing else to reach for.

   .ds-badge is a status scale: every tone carries a shape glyph so status is never
   colour-only, which WCAG 1.4.1 requires. .ds-badge--neutral's glyph is an en dash.
   So "3 on record" rendered as "- 3 on record" and read as a bullet somebody forgot
   to remove, and "12 total" the same.

   A count needs no glyph, because it asserts nothing about health. It needs figures
   that do not change width as the number changes, which is what a tally is for.
   ========================================================================== */
.ds-count {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--ds-space-3, 12px);
  border: 1px solid var(--ds-border, #ccd2c5);
  border-radius: var(--ds-radius-pill, 999px);
  background: var(--ds-surface-sunken, #e9ebdf);
  color: var(--ds-text-muted, #536054);
  font: 600 var(--ds-font-size-xs, .75rem) / 1.5 var(--ds-font-sans, system-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* v0.63.3. Figures that sit in a column must not shift width as their value changes.
   Declared here rather than per page, because every table in the application has the
   same problem and eight of them had already solved it privately. */
.ds-table td[data-numeric],
.ds-table th[data-numeric],
.ds-metric__value { font-variant-numeric: tabular-nums; }