/*
 * American Debt Guide components. Uses tokens.css only: no raw colors, sizes or fonts.
 * Mobile-first: base styles are the phone layout; wider layouts are added in
 * min-width queries at 600px and 900px (documented in MASTER.md).
 */

/* ── Tool shell ───────────────────────────────────────────────────── */

.adg-tool {
  box-sizing: border-box;
  max-width: var(--adg-width-tool);
  margin-inline: auto;
  font-family: var(--adg-font-ui);
  font-size: var(--adg-text-base);
  line-height: var(--adg-leading-body);
  color: var(--adg-color-text);
  background: var(--adg-color-bg);
  /* Components inside size themselves to the tool's width, not the window's. */
  container-type: inline-size;
}
.adg-tool *,
.adg-tool *::before,
.adg-tool *::after { box-sizing: inherit; }

.adg-num { font-variant-numeric: tabular-nums; }

.adg-tool a:not(.adg-btn) { color: var(--adg-color-link); text-underline-offset: 0.15em; }
.adg-tool a:not(.adg-btn):hover { color: var(--adg-color-link-hover); }

/* Components set display (flex/grid); make sure the hidden attribute still hides them. */
.adg-tool [hidden] { display: none !important; }

.adg-section + .adg-section { margin-top: var(--adg-space-10); }
.adg-section__title {
  margin: 0 0 var(--adg-space-4);
  font-family: var(--adg-font-heading);
  font-size: var(--adg-text-lg);
  line-height: var(--adg-leading-snug);
  color: var(--adg-color-heading);
}

/* Visible focus everywhere, never removed. */
.adg-tool :focus-visible,
.adg-content :focus-visible {
  outline: 3px solid var(--adg-color-focus);
  outline-offset: 2px;
}

.adg-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.adg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--adg-space-2);
  min-height: var(--adg-tap-target);
  padding: var(--adg-btn-pad-y) var(--adg-btn-pad-x);
  border: 2px solid var(--adg-btn-bg);
  border-radius: var(--adg-btn-radius);
  background: var(--adg-btn-bg);
  color: var(--adg-btn-fg);
  font: var(--adg-weight-semibold) var(--adg-text-base) / 1.2 var(--adg-font-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--adg-duration-fast) ease-in-out, border-color var(--adg-duration-fast) ease-in-out;
}
.adg-btn:hover { background: var(--adg-btn-bg-hover); border-color: var(--adg-btn-bg-hover); color: var(--adg-btn-fg); }
.adg-btn--secondary { background: var(--adg-color-bg); color: var(--adg-color-action); }
.adg-btn--secondary:hover { background: var(--adg-color-action-subtle); color: var(--adg-color-action-hover); }
.adg-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--adg-color-action);
  padding-inline: var(--adg-space-2);
}
.adg-btn--ghost:hover { background: var(--adg-color-action-subtle); border-color: transparent; color: var(--adg-color-action-hover); }
.adg-btn--block { width: 100%; }
.adg-btn:disabled,
.adg-btn[aria-disabled="true"] {
  background: var(--adg-gray-100);
  border-color: var(--adg-gray-200);
  color: var(--adg-color-text-muted);
  cursor: not-allowed;
}

/* ── Form fields ──────────────────────────────────────────────────── */

.adg-field { display: grid; gap: var(--adg-space-1); align-content: start; }
.adg-label { font-weight: var(--adg-weight-semibold); font-size: var(--adg-text-sm); color: var(--adg-color-text); }
.adg-hint { font-size: var(--adg-text-sm); color: var(--adg-color-text-muted); }

.adg-input,
.adg-select {
  width: 100%;
  min-height: var(--adg-tap-target);
  padding: var(--adg-input-pad);
  border: 1px solid var(--adg-input-border);
  border-radius: var(--adg-input-radius);
  background: var(--adg-input-bg);
  color: var(--adg-color-text);
  /* 16px+ stops iOS zooming into the field on focus. */
  font: var(--adg-text-base) / 1.3 var(--adg-font-ui);
  font-variant-numeric: tabular-nums;
}
.adg-input:focus-visible,
.adg-select:focus-visible { outline: 3px solid var(--adg-color-focus); outline-offset: 0; border-color: var(--adg-color-focus); }

/* "$" before or "%" after a number */
.adg-affix { position: relative; display: flex; align-items: center; }
.adg-affix__text {
  position: absolute;
  color: var(--adg-color-text-muted);
  pointer-events: none;
}
.adg-affix--prefix .adg-affix__text { left: var(--adg-space-3); }
.adg-affix--prefix .adg-input { padding-left: calc(var(--adg-space-3) + 1ch + var(--adg-space-1)); }
.adg-affix--suffix .adg-affix__text { right: var(--adg-space-3); }
.adg-affix--suffix .adg-input { padding-right: calc(var(--adg-space-3) + 1.5ch + var(--adg-space-1)); }

.adg-field-msg { display: flex; gap: var(--adg-space-1); font-size: var(--adg-text-sm); }
.adg-field-msg--error { color: var(--adg-color-error); }
.adg-field-msg--warning { color: var(--adg-color-warning-text); }
.adg-input[aria-invalid="true"],
.adg-select[aria-invalid="true"] { border-color: var(--adg-color-error); border-width: 2px; }

/* Debt rows size to the space the tool actually has (container queries), not the screen:
   the theme's content column can be much narrower than the window.
   Narrow: stacked. 520px+: two lines (name, type, Remove / balance, APR, minimum). 860px+: one line. */
.adg-debt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Top-aligned so a field message under one input doesn't shift the others. */
  align-items: start;
  gap: var(--adg-space-3);
  padding: var(--adg-space-4);
  border: 1px solid var(--adg-card-border);
  border-radius: var(--adg-card-radius);
  background: var(--adg-color-bg-subtle);
}
/* On phones, name and type (the select) take the full row; the numbers pair up. */
.adg-debt-row .adg-field--wide { grid-column: 1 / -1; }
.adg-debt-row__remove { grid-column: 1 / -1; justify-self: end; }
@container (min-width: 520px) {
  .adg-debt-row { grid-template-columns: repeat(6, 1fr); }
  .adg-debt-row > .adg-field--wide:first-child { grid-column: span 3; }
  .adg-debt-row > .adg-field--wide:nth-child(2) { grid-column: span 2; }
  .adg-debt-row > .adg-field:not(.adg-field--wide) { grid-column: span 2; }
  /* Drop the button by one label line so it sits level with the inputs. */
  .adg-debt-row__remove { grid-column: 6; grid-row: 1; margin-top: calc(var(--adg-text-sm) * var(--adg-leading-body) + var(--adg-space-1)); }
}
@container (min-width: 860px) {
  .adg-debt-row { grid-template-columns: 2fr 1.6fr 1.3fr 1fr 1.2fr auto; }
  .adg-debt-row > .adg-field--wide:first-child,
  .adg-debt-row > .adg-field--wide:nth-child(2),
  .adg-debt-row > .adg-field:not(.adg-field--wide) { grid-column: auto; }
  .adg-debt-row__remove { grid-column: auto; grid-row: auto; }
}
.adg-debt-list { display: grid; gap: var(--adg-space-3); container-type: inline-size; }

/* Segmented control ("One total" / "By category"): a styled radio group. */
.adg-segmented {
  display: inline-flex;
  padding: var(--adg-space-1);
  border-radius: var(--adg-radius-md);
  background: var(--adg-gray-100);
  border: 0;
  margin: 0;
}
.adg-segmented input { position: absolute; opacity: 0; }
.adg-segmented label {
  min-height: calc(var(--adg-tap-target) - var(--adg-space-2));
  display: inline-flex; align-items: center;
  padding: 0 var(--adg-space-4);
  border-radius: var(--adg-radius-sm);
  font-size: var(--adg-text-sm);
  font-weight: var(--adg-weight-semibold);
  color: var(--adg-color-text-secondary);
  cursor: pointer;
}
.adg-segmented input:checked + label { background: var(--adg-color-bg); color: var(--adg-color-text); box-shadow: var(--adg-shadow-sm); }
.adg-segmented input:focus-visible + label { outline: 3px solid var(--adg-color-focus); outline-offset: 1px; }

/* What-if slider */
.adg-range { width: 100%; min-height: var(--adg-tap-target); accent-color: var(--adg-color-action); }
.adg-range-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--adg-space-4); }
.adg-range-value { font-size: var(--adg-text-lg); font-weight: var(--adg-weight-bold); font-variant-numeric: tabular-nums; }

/* "Nothing you enter is stored or sent." */
.adg-privacy-note {
  display: flex; gap: var(--adg-space-2); align-items: flex-start;
  padding: var(--adg-space-3) var(--adg-space-4);
  border-radius: var(--adg-radius-md);
  background: var(--adg-color-info-bg);
  color: var(--adg-color-info-text);
  font-size: var(--adg-text-sm);
}
.adg-privacy-note svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.15em; }

/* ── Results ──────────────────────────────────────────────────────── */

.adg-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--adg-space-3); }
/* Sized by the tool's own width (.adg-tool is the container), like the debt rows. */
@container (min-width: 480px) { .adg-stat-grid { grid-template-columns: repeat(3, 1fr); } }
@container (min-width: 860px) { .adg-stat-grid { grid-template-columns: repeat(5, 1fr); } }
.adg-stat {
  padding: var(--adg-space-4);
  border: 1px solid var(--adg-card-border);
  border-radius: var(--adg-card-radius);
  background: var(--adg-card-bg);
}
.adg-stat__label { font-size: var(--adg-text-sm); color: var(--adg-color-text-secondary); }
.adg-stat__value {
  display: block;
  margin-top: var(--adg-space-1);
  font-size: var(--adg-stat-value-size);
  font-weight: var(--adg-weight-bold);
  line-height: var(--adg-leading-tight);
  color: var(--adg-color-text);
  font-variant-numeric: tabular-nums;
}
.adg-stat__sub { font-size: var(--adg-text-xs); color: var(--adg-color-text-muted); }

/* Grade badge: color + icon + word, never color alone. */
.adg-grade {
  display: inline-flex; align-items: center; gap: var(--adg-space-2);
  padding: var(--adg-space-2) var(--adg-space-4);
  border: 1px solid;
  border-radius: var(--adg-radius-full);
  font-weight: var(--adg-weight-bold);
  font-size: var(--adg-text-md);
}
.adg-grade svg { width: 1.25em; height: 1.25em; flex: none; }
.adg-grade--manageable { background: var(--adg-color-good-bg); border-color: var(--adg-color-good-border); color: var(--adg-color-good-text); }
.adg-grade--manageable svg { color: var(--adg-color-good-mark); }
.adg-grade--stretched { background: var(--adg-color-warning-bg); border-color: var(--adg-color-warning-border); color: var(--adg-color-warning-text); }
.adg-grade--stretched svg { color: var(--adg-color-warning-text); }
.adg-grade--underwater { background: var(--adg-color-critical-bg); border-color: var(--adg-color-critical-border); color: var(--adg-color-critical-text); }
.adg-grade--underwater svg { color: var(--adg-color-critical-mark); }

/* Snowball vs avalanche, side by side from 600px. */
.adg-compare { display: grid; gap: var(--adg-space-3); }
@media (min-width: 600px) { .adg-compare { grid-template-columns: 1fr 1fr; } }
.adg-plan {
  padding: var(--adg-card-pad);
  border: 1px solid var(--adg-card-border);
  border-top: 4px solid var(--adg-plan-color, var(--adg-color-border));
  border-radius: var(--adg-card-radius);
  background: var(--adg-card-bg);
}
.adg-plan--snowball { --adg-plan-color: var(--adg-chart-series-1); }
.adg-plan--avalanche { --adg-plan-color: var(--adg-chart-series-2); }
.adg-plan__title { margin: 0; font-size: var(--adg-text-md); font-weight: var(--adg-weight-bold); color: var(--adg-color-text); }
.adg-plan__tag {
  display: inline-block; margin-left: var(--adg-space-2);
  padding: 0 var(--adg-space-2);
  border-radius: var(--adg-radius-sm);
  /* Neutral on purpose: a factual label ("Less interest"), not a recommendation. */
  background: var(--adg-color-info-bg);
  color: var(--adg-color-info-text);
  font-size: var(--adg-text-xs); font-weight: var(--adg-weight-semibold);
  vertical-align: middle;
}
.adg-plan dl { display: grid; grid-template-columns: auto 1fr; gap: var(--adg-space-1) var(--adg-space-4); margin: var(--adg-space-3) 0 0; }
.adg-plan dt { color: var(--adg-color-text-secondary); font-size: var(--adg-text-sm); }
.adg-plan dd { margin: 0; text-align: right; font-weight: var(--adg-weight-semibold); font-variant-numeric: tabular-nums; }

/* Chart frame. Series colors come from tokens; text stays in ink colors. */
.adg-chart { margin: var(--adg-space-4) 0 0; padding: var(--adg-space-4); border: 1px solid var(--adg-card-border); border-radius: var(--adg-card-radius); background: var(--adg-chart-surface); }
.adg-chart__legend { display: flex; flex-wrap: wrap; gap: var(--adg-space-4); margin: 0 0 var(--adg-space-3); padding: 0; list-style: none; font-size: var(--adg-text-sm); color: var(--adg-color-text-secondary); }
.adg-chart__key { display: inline-block; width: 16px; height: 0; margin-right: var(--adg-space-2); border-top: 2px solid; vertical-align: middle; }
.adg-chart__key--1 { border-color: var(--adg-chart-series-1); }
.adg-chart__key--2 { border-color: var(--adg-chart-series-2); }
.adg-chart__key--ref { border-top-style: dashed; border-color: var(--adg-chart-reference); }
.adg-chart__title { margin: 0 0 var(--adg-space-2); font-weight: var(--adg-weight-semibold); color: var(--adg-color-text); }

/* Frame: y labels | plot, then x labels. Labels are HTML so they stay 13px at any
   width; the SVG stretches to the plot and strokes stay 2px (non-scaling-stroke). */
.adg-chart__frame { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 200px auto; column-gap: var(--adg-space-2); }
@media (min-width: 600px) { .adg-chart__frame { grid-template-rows: 240px auto; } }
.adg-chart__y, .adg-chart__x { position: relative; font-size: var(--adg-text-xs); color: var(--adg-chart-axis); font-variant-numeric: tabular-nums; }
.adg-chart__y { min-width: 4.5em; }
.adg-chart__y span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.adg-chart__x { grid-column: 2; height: 1.75em; }
.adg-chart__x span { position: absolute; top: var(--adg-space-1); transform: translateX(-50%); white-space: nowrap; }
.adg-chart__x span:first-child { transform: none; }
.adg-chart__x span:last-child { transform: translateX(-100%); }
.adg-chart__plot { position: relative; touch-action: pan-y; }
.adg-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.adg-chart .grid { stroke: var(--adg-chart-grid); stroke-width: 1; }
.adg-chart .series-1 { stroke: var(--adg-chart-series-1); }
.adg-chart .series-2 { stroke: var(--adg-chart-series-2); }
.adg-chart .series-ref { stroke: var(--adg-chart-reference); stroke-dasharray: 4 4; }
.adg-chart .series-1, .adg-chart .series-2, .adg-chart .series-ref { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Hover layer */
.adg-chart__cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--adg-chart-axis); pointer-events: none; }
.adg-chart__tip {
  position: absolute; top: 0; z-index: 1;
  display: grid; gap: 2px;
  min-width: 11rem;
  padding: var(--adg-space-2) var(--adg-space-3);
  border: 1px solid var(--adg-color-border);
  border-radius: var(--adg-radius-md);
  background: var(--adg-color-bg);
  box-shadow: var(--adg-shadow-md);
  font-size: var(--adg-text-xs);
  color: var(--adg-color-text-secondary);
  pointer-events: none;
}
.adg-chart__tip strong { color: var(--adg-color-text); }
.adg-chart__tip b { float: right; margin-left: var(--adg-space-3); color: var(--adg-color-text); font-variant-numeric: tabular-nums; }
.adg-chart__note { margin: var(--adg-space-3) 0 0; font-size: var(--adg-text-sm); color: var(--adg-color-text-secondary); }
.adg-chart__table { margin-top: var(--adg-space-3); font-size: var(--adg-text-sm); }
.adg-chart__table summary { min-height: var(--adg-tap-target); display: flex; align-items: center; color: var(--adg-color-link); cursor: pointer; }

/* Verdict card */
.adg-verdict {
  padding: var(--adg-space-6);
  border: 1px solid var(--adg-card-border);
  border-left: 6px solid var(--adg-verdict-accent);
  border-radius: var(--adg-card-radius);
  background: var(--adg-card-bg);
  box-shadow: var(--adg-shadow-md);
}
.adg-verdict__eyebrow { margin: 0; font-size: var(--adg-text-sm); font-weight: var(--adg-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--adg-color-text-secondary); }
.adg-verdict__title { margin: var(--adg-space-1) 0 var(--adg-space-3); font-family: var(--adg-font-heading); font-size: var(--adg-text-xl); line-height: var(--adg-leading-snug); color: var(--adg-color-heading); }
.adg-verdict__actions { display: flex; flex-wrap: wrap; gap: var(--adg-space-3); margin-top: var(--adg-space-5); }

/* Notices */
.adg-notice {
  display: flex; gap: var(--adg-space-3); align-items: flex-start;
  padding: var(--adg-space-4);
  border: 1px solid;
  border-radius: var(--adg-radius-md);
  font-size: var(--adg-text-sm);
}
.adg-notice svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.1em; }
.adg-notice--info { background: var(--adg-color-info-bg); border-color: var(--adg-color-info-border); color: var(--adg-color-info-text); }
.adg-notice--warning { background: var(--adg-color-warning-bg); border-color: var(--adg-color-warning-border); color: var(--adg-color-warning-text); }
.adg-notice--critical { background: var(--adg-color-critical-bg); border-color: var(--adg-color-critical-border); color: var(--adg-color-critical-text); }
.adg-notice p { margin: 0; }
.adg-notice p + p { margin-top: var(--adg-space-2); }

.adg-disclaimer { margin-top: var(--adg-space-6); font-size: var(--adg-text-xs); color: var(--adg-color-text-muted); }

/* Monetization slot: reserved, collapses completely when empty (brief §3). */
.adg-slot:empty { display: none; }
.adg-slot { margin-top: var(--adg-space-5); }

/* Payoff table */
.adg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.adg-table { width: 100%; border-collapse: collapse; font-size: var(--adg-text-sm); font-variant-numeric: tabular-nums; }
.adg-table caption { text-align: left; font-weight: var(--adg-weight-semibold); padding-bottom: var(--adg-space-2); }
.adg-table th, .adg-table td { padding: var(--adg-space-2) var(--adg-space-3); border-bottom: 1px solid var(--adg-color-border); text-align: right; }
.adg-table th:first-child, .adg-table td:first-child { text-align: left; }
.adg-table thead th { color: var(--adg-color-text-secondary); font-weight: var(--adg-weight-semibold); border-bottom-width: 2px; }
/* Small phones: tighter cells so most tables fit without scrolling; text tables may also hyphenate.
   Tables that still don't fit (the five-path comparison, the payoff schedule) scroll inside .adg-table-wrap. */
@media (max-width: 480px) {
  .adg-table { font-size: var(--adg-text-xs); }
  .adg-table th, .adg-table td { padding-inline: var(--adg-space-2); }
  .adg-table--text th, .adg-table--text td { hyphens: auto; }
}

/* ── Site content (guides, path pages) ────────────────────────────── */

.adg-content { font-family: var(--adg-font-body); color: var(--adg-color-text); }
.adg-content a { color: var(--adg-color-link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.adg-content a:hover { color: var(--adg-color-link-hover); text-decoration-thickness: 2px; }
/* Button-styled links keep button colors inside content (and against theme link styles). */
.adg-content a.adg-btn, a.adg-btn { color: var(--adg-btn-fg); text-decoration: none; }
.adg-content a.adg-btn--secondary, a.adg-btn--secondary,
.adg-content a.adg-btn--ghost, a.adg-btn--ghost { color: var(--adg-color-action); }
.adg-content a.adg-btn--secondary:hover, a.adg-btn--secondary:hover,
.adg-content a.adg-btn--ghost:hover, a.adg-btn--ghost:hover { color: var(--adg-color-action-hover); }

.adg-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--adg-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--adg-text-sm); color: var(--adg-color-text-muted); }
.adg-breadcrumbs li + li::before { content: "/"; margin-right: var(--adg-space-2); color: var(--adg-gray-300); }

.adg-byline { font-size: var(--adg-text-sm); color: var(--adg-color-text-secondary); }

.adg-path-grid { display: grid; gap: var(--adg-space-3); }
@media (min-width: 600px) { .adg-path-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .adg-path-grid { grid-template-columns: repeat(3, 1fr); } }
.adg-path-card {
  display: block;
  padding: var(--adg-card-pad);
  border: 1px solid var(--adg-card-border);
  border-radius: var(--adg-card-radius);
  background: var(--adg-card-bg);
  color: var(--adg-color-text);
  text-decoration: none;
  transition: border-color var(--adg-duration-fast) ease-in-out, box-shadow var(--adg-duration-fast) ease-in-out;
}
.adg-path-card:hover { border-color: var(--adg-color-action); box-shadow: var(--adg-shadow-md); }
.adg-path-card__title { margin: 0 0 var(--adg-space-2); font-family: var(--adg-font-heading); font-size: var(--adg-text-md); color: var(--adg-color-heading); }
.adg-path-card p { margin: 0; font-size: var(--adg-text-sm); color: var(--adg-color-text-secondary); }

.adg-faq details { border-bottom: 1px solid var(--adg-color-border); }
.adg-faq summary {
  min-height: var(--adg-tap-target);
  padding: var(--adg-space-3) 0;
  font-weight: var(--adg-weight-semibold);
  cursor: pointer;
}
.adg-faq details > :not(summary) { margin: 0 0 var(--adg-space-4); }

/* "Run the audit to see if this fits you" (brief §4), on path pages and guides. */
.adg-cta {
  display: grid; gap: var(--adg-space-3);
  margin: var(--adg-space-8) 0;
  padding: var(--adg-space-6);
  border-radius: var(--adg-card-radius);
  background: var(--adg-color-bg-brand-subtle);
  border: 1px solid var(--adg-navy-100);
}
.adg-cta__title { margin: 0; font-family: var(--adg-font-heading); font-size: var(--adg-text-lg); font-weight: var(--adg-weight-bold); color: var(--adg-color-heading); }
.adg-cta p { margin: 0; }
.adg-cta .adg-btn { justify-self: start; color: var(--adg-btn-fg); text-decoration: none; }

/* Home: three-step "how it works" strip */
.adg-howto { display: grid; gap: var(--adg-space-3); margin: 0; padding: 0; list-style: none; counter-reset: adg-howto; }
@media (min-width: 600px) { .adg-howto { grid-template-columns: repeat(3, 1fr); } }
.adg-howto li {
  counter-increment: adg-howto;
  margin: 0;
  padding: var(--adg-space-5);
  border: 1px solid var(--adg-card-border);
  border-radius: var(--adg-card-radius);
  background: var(--adg-card-bg);
}
.adg-howto li::before {
  content: counter(adg-howto);
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; margin-bottom: var(--adg-space-2);
  border-radius: var(--adg-radius-full);
  background: var(--adg-color-action-subtle);
  color: var(--adg-color-action);
  font-weight: var(--adg-weight-bold);
}
.adg-howto strong { display: block; margin-bottom: var(--adg-space-1); color: var(--adg-color-heading); }

/* Home: trust signals */
.adg-trust { display: grid; gap: var(--adg-space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .adg-trust { grid-template-columns: 1fr 1fr; } }
.adg-trust li { margin: 0; padding-left: var(--adg-space-4); border-left: 3px solid var(--adg-color-action); }
.adg-trust strong { display: block; color: var(--adg-color-heading); }

/* Key facts box at the top of a path page */
.adg-facts { margin: var(--adg-space-6) 0; padding: var(--adg-space-5); border: 1px solid var(--adg-card-border); border-radius: var(--adg-card-radius); background: var(--adg-color-bg-subtle); }
.adg-facts dl { display: grid; grid-template-columns: 1fr; gap: var(--adg-space-1) var(--adg-space-5); margin: 0; }
@media (min-width: 600px) { .adg-facts dl { grid-template-columns: max-content 1fr; } }
.adg-facts dt { font-weight: var(--adg-weight-semibold); }
.adg-facts dd { margin: 0 0 var(--adg-space-2); color: var(--adg-color-text-secondary); }
@media (min-width: 600px) { .adg-facts dd { margin: 0; } }

.adg-sources { font-size: var(--adg-text-sm); color: var(--adg-color-text-secondary); }
.adg-sources ol { padding-left: var(--adg-space-5); }

/* ── Motion & print ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .adg-tool *, .adg-content * { transition: none !important; animation: none !important; }
}

/* "Print / save as PDF": results only, no inputs or buttons (brief §3). */
@media print {
  .adg-no-print, .adg-btn, .adg-range, .adg-slot { display: none !important; }
  .adg-tool { max-width: none; }
  .adg-verdict, .adg-stat, .adg-plan, .adg-chart { box-shadow: none; break-inside: avoid; }
}