/* =============================================================================
   audit-report.css — Joe Gullo audit report deliverables (digital + PDF)
   Ported from the "Audit Report Templates" design canvas. Two structurally
   identical reports differ only in copy, the breakdown rows, and whether the
   fix column shows a code diff (digital) or numbered Acrobat steps (PDF).

   All color flows from the tokens below. Severity is the one intentionally
   chromatic scale so findings stay scannable independent of brand.
   ========================================================================== */

:root {
  --ar-brand:        #294557;  /* deep slate blue — the brand */
  --ar-brand-hover:  #1e3444;  /* brand on interaction */
  --ar-brand-soft:   #dce5ec;  /* brand tint for chips / moderate */
  --ar-ink:          #232323;  /* headings */
  --ar-body:         #475569;  /* body copy */
  --ar-muted:        #525252;  /* labels, meta */
  --ar-faint:        #94a3b8;  /* ref codes, dividers text */
  --ar-line:         #e5e7eb;  /* borders */
  --ar-line-soft:    #f1f5f9;  /* inner row dividers */
  --ar-surface:      #ffffff;
  --ar-surface-alt:  #f8fafc;  /* meta band, fix column */
  --ar-surface-foot: #f7f7f7;

  /* Severity scale */
  --ar-critical:     #dc2626; --ar-critical-bg: #fef2f2; --ar-critical-fg: #991b1b;
  --ar-serious:      #d97706; --ar-serious-bg:  #fffbeb; --ar-serious-fg:  #92400e;
  --ar-moderate:     #294557; --ar-moderate-bg: #dce5ec; --ar-moderate-fg: #294557;
  --ar-minor:        #94a3b8; --ar-minor-bg:    #f1f5f9; --ar-minor-fg:    #475569;

  /* Impact / effort / score states */
  --ar-good:         #059669; --ar-good-bg: #ecfdf5; --ar-good-fg: #065f46;

  --ar-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ar-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Document shell ───────────────────────────────────────────────────────── */
.audit-doc {
  margin: 0;
  background: var(--ar-surface-alt);
  color: var(--ar-body);
  font-family: var(--ar-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.audit-doc * { box-sizing: border-box; }

.audit {
  position: relative;
  max-width: 1180px;
  margin: 40px auto;
  background: var(--ar-surface);
  border: 1px solid #e6ebf0;
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .12);
  overflow: hidden;
}

/* ── Skip link ────────────────────────────────────────────────────────────── */
.ar-skip {
  position: absolute;
  left: 16px; top: -44px;
  background: var(--ar-brand);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
  font: 600 14px/1 var(--ar-sans);
  text-decoration: none;
  z-index: 20;
  transition: top .12s ease;
}
.ar-skip:focus { top: 0; }

.audit a:focus-visible,
.audit button:focus-visible {
  outline: 3px solid var(--ar-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Site header band ─────────────────────────────────────────────────────── */
.ar-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 30px;
  border-bottom: 1px solid var(--ar-line);
  background: var(--ar-surface);
}
.ar-brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ar-brand-logo { display: block; height: 40px; width: auto; }
.ar-brand-mark {
  width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center;
  background: var(--ar-brand); color: #fff; font: 700 13px/1 var(--ar-sans);
}
.ar-brand-name { font: 700 17px/1 var(--ar-sans); color: var(--ar-brand); letter-spacing: -.01em; }
.ar-header__eyebrow {
  font: 700 11px/1.2 var(--ar-sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ar-muted);
}
.ar-nav { display: flex; align-items: center; gap: 24px; }
.ar-nav a { font: 500 14px/1 var(--ar-sans); color: var(--ar-body); text-decoration: none; }
.ar-nav a:hover { color: var(--ar-brand); }
.ar-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ar-brand); color: #fff;
  font: 600 14px/1 var(--ar-sans);
  padding: 12px 20px; border-radius: 8px; border: 1px solid var(--ar-brand);
  text-decoration: none;
}
.ar-cta-btn:hover { background: var(--ar-brand-hover); border-color: var(--ar-brand-hover); }

/* ── Shared eyebrow label ─────────────────────────────────────────────────── */
.ar-eyebrow {
  font: 700 11px/1.2 var(--ar-sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ar-muted);
}

/* ── Meta band ────────────────────────────────────────────────────────────── */
.ar-meta {
  background: var(--ar-surface-alt);
  border-bottom: 1px solid var(--ar-line);
  padding: 40px 30px;
}
.ar-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font: 500 13px/1 var(--ar-sans); color: var(--ar-muted); margin-bottom: 16px;
}
.ar-breadcrumb a { color: var(--ar-brand); text-decoration: none; }
.ar-meta-grid {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.ar-meta-main { display: flex; flex-direction: column; gap: 12px; }
.ar-title {
  font: 700 clamp(28px, 3.4vw, 36px)/1.2 var(--ar-sans);
  letter-spacing: -.02em; color: var(--ar-ink); margin: 0; text-wrap: balance;
}
.ar-prepared { font: 400 17px/1.5 var(--ar-sans); color: var(--ar-body); margin: 0; }
.ar-prepared strong { color: var(--ar-ink); font-weight: 600; }
.ar-meta-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px;
  font: 400 13px/1.4 var(--ar-sans); color: var(--ar-muted);
}
.ar-meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.ar-meta-row .sep { color: #cbd5e1; }
.ar-meta-row i { font-size: 15px; color: var(--ar-brand); }
.ar-standards { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ar-standard {
  font: 600 12px/1 var(--ar-sans); color: var(--ar-brand);
  background: var(--ar-brand-soft); padding: 6px 11px; border-radius: 999px;
}
/* acronym chips carry a plain-English tooltip; keep the pill clean */
.ar-standard abbr { text-decoration: none; cursor: help; border: 0; }

/* ── Score gauge ──────────────────────────────────────────────────────────── */
.ar-score {
  background: var(--ar-surface); border: 1px solid var(--ar-line); border-radius: 12px;
  padding: 22px 26px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05); min-width: 200px;
}
.ar-score__verdict { font: 600 14px/1.3 var(--ar-sans); text-align: center; }
.ar-score--good     .ar-score__verdict { color: var(--ar-good-fg); }
.ar-score--ok       .ar-score__verdict { color: var(--ar-serious-fg); }
.ar-score--poor     .ar-score__verdict { color: var(--ar-critical-fg); }

/* ── Legend ───────────────────────────────────────────────────────────────── */
.ar-legend {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 30px; border-bottom: 1px solid var(--ar-line);
}
.ar-legend__item {
  display: inline-flex; align-items: center; gap: 7px;
  font: 400 13px/1 var(--ar-sans); color: var(--ar-body);
}
.ar-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ar-legend__note { font: 400 13px/1 var(--ar-sans); color: var(--ar-muted); margin-left: auto; }

/* ── Section scaffolding ──────────────────────────────────────────────────── */
.ar-section { padding: 48px 30px; }
.ar-section--tight { padding: 0 30px 48px; }
.ar-h2 { font: 700 24px/1.3 var(--ar-sans); color: var(--ar-ink); margin: 0 0 4px; }
.ar-lede { font: 400 15px/1.6 var(--ar-sans); color: var(--ar-body); margin: 0; }

/* ── Executive summary ────────────────────────────────────────────────────── */
.ar-summary {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start;
}
.ar-summary__prose { display: flex; flex-direction: column; gap: 12px; }
.ar-summary__prose p { font: 400 16px/1.65 var(--ar-sans); color: var(--ar-body); margin: 0; }
.ar-glance {
  background: var(--ar-surface); border: 1px solid var(--ar-line); border-radius: 12px;
  padding: 22px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.ar-glance__list { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.ar-glance__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--ar-line-soft);
}
.ar-glance__row:last-child { border-bottom: 0; }
.ar-glance__label {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 14px/1 var(--ar-sans); color: var(--ar-body);
}
.ar-glance__label .ar-dot { width: 9px; height: 9px; }
.ar-glance__num { font: 700 15px/1 var(--ar-mono); color: var(--ar-ink); }

/* ── Breakdown bars ───────────────────────────────────────────────────────── */
.ar-breakdown { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.ar-bar {
  display: grid; grid-template-columns: 170px 1fr 132px; gap: 14px; align-items: center;
}
.ar-bar__label { font: 500 14px/1.4 var(--ar-sans); color: var(--ar-ink); }
.ar-bar__track {
  height: 8px; background: var(--ar-line); border-radius: 999px;
  position: relative; display: block;
}
.ar-bar__fill { position: absolute; inset: 0; border-radius: 999px; }
.ar-bar__val { font: 700 13px/1 var(--ar-mono); color: var(--ar-body); text-align: right; }

/* ── Findings ─────────────────────────────────────────────────────────────── */
.ar-findings { display: flex; flex-direction: column; gap: 20px; }
.ar-finding { border: 1px solid var(--ar-line); border-radius: 12px; overflow: hidden; }
.ar-finding__head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--ar-line);
}
.ar-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--ar-sans); letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.ar-pill .ar-dot { width: 7px; height: 7px; }
/* muted, not faint: ref codes are meaningful text and must clear AA/AAA contrast */
.ar-ref { font: 700 13px/1 var(--ar-mono); color: var(--ar-muted); }
.ar-finding__title {
  font: 600 18px/1.4 var(--ar-sans); color: var(--ar-ink);
  margin: 0; flex: 1; min-width: 200px;
}
.ar-wcag { font: 700 12px/1 var(--ar-mono); }

.ar-finding__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; }
.ar-finding__body.is-single { grid-template-columns: 1fr; } /* executive view — no fix column */
.ar-finding__plain { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ar-finding__plain p { font: 400 15px/1.65 var(--ar-sans); color: var(--ar-body); margin: 0; }
.ar-affects {
  display: flex; align-items: center; gap: 8px; margin-top: 2px;
  font: 400 13px/1.4 var(--ar-sans); color: var(--ar-body);
}
.ar-affects i { font-size: 18px; color: var(--ar-brand); }
.ar-where {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font: 600 12px/1 var(--ar-mono); color: var(--ar-muted);
  background: var(--ar-line-soft); padding: 6px 10px; border-radius: 6px;
}
.ar-where i { font-size: 14px; color: var(--ar-brand); }

/* By-page grouping */
.ar-pagegroup { padding-top: 8px; }
.ar-pagegroup__title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 700 15px/1.3 var(--ar-mono); color: var(--ar-ink);
}
.ar-pagegroup__title i { color: var(--ar-brand); font-size: 18px; }
.ar-pagegroup__count {
  font: 700 12px/1 var(--ar-sans); color: var(--ar-muted);
  background: var(--ar-line-soft); padding: 4px 9px; border-radius: 999px;
}
.ar-finding__fix {
  padding: 20px; background: var(--ar-surface-alt);
  border-left: 1px solid var(--ar-line);
  display: flex; flex-direction: column; gap: 10px;
}
.ar-finding__foot {
  display: flex; gap: 10px; padding: 12px 20px;
  border-top: 1px solid var(--ar-line); background: var(--ar-surface);
}

/* ── Evidence (screenshots / video) ───────────────────────────────────────── */
.ar-evidence {
  padding: 16px 20px; border-top: 1px solid var(--ar-line);
  background: var(--ar-surface-alt);
  display: flex; flex-direction: column; gap: 10px;
}
.ar-evidence__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px;
}
.ar-evidence__fig { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ar-evidence__item {
  display: block; border: 1px solid var(--ar-line); border-radius: 8px;
  overflow: hidden; background: #fff; text-decoration: none; width: 100%;
}
.ar-evidence__item img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
}
video.ar-evidence__item { display: block; width: 100%; height: auto; background: #111; }
a.ar-evidence__item:hover { border-color: var(--ar-brand); }
a.ar-evidence__item { cursor: zoom-in; }
.ar-evidence__cap { font: 400 12px/1.45 var(--ar-sans); color: var(--ar-body); }

/* ── Pages tested (scope) ─────────────────────────────────────────────────── */
.ar-pagelist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ar-pagelist li { display: flex; align-items: baseline; gap: 8px; font: 400 14px/1.5 var(--ar-sans); color: var(--ar-body); flex-wrap: wrap; }
.ar-pagelist li i { color: var(--ar-brand); align-self: center; }
.ar-pagelist strong { color: var(--ar-ink); }
.ar-page__url { color: var(--ar-muted); }
.ar-pagelist a { color: var(--ar-brand); word-break: break-all; }

/* ── Lightbox (enlarge evidence images) ───────────────────────────────────── */
.ar-lightbox { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .85); cursor: zoom-out; }
.ar-lightbox.is-open { display: flex; }
.ar-lightbox__fig { margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 96vw; max-height: 96vh; }
.ar-lightbox__fig img { max-width: 96vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); background: #fff; }
.ar-lightbox__fig figcaption { color: #fff; font: 500 14px/1.5 var(--ar-sans); text-align: center; max-width: 64ch; }
.ar-lightbox__close { position: fixed; top: 16px; right: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.ar-lightbox__close:hover { background: rgba(255, 255, 255, .32); }
.ar-lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ── Fix these first ──────────────────────────────────────────────────────── */
.ar-priorities { background: var(--ar-brand-soft); border-radius: 12px; margin: 0 30px 8px; padding: 22px 26px; }
.ar-priolist { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: prio; display: flex; flex-direction: column; gap: 8px; }
.ar-prio { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ar-line); border-radius: 10px; padding: 12px 14px; }
.ar-prio::before {
  counter-increment: prio; content: counter(prio); flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%; background: var(--ar-brand); color: #fff;
  font: 700 13px/1 var(--ar-mono); display: grid; place-items: center;
}
.ar-prio__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-prio__main strong { font: 600 15px/1.35 var(--ar-sans); color: var(--ar-ink); }
.ar-prio__loc { font: 500 12px/1 var(--ar-sans); color: var(--ar-muted); display: inline-flex; align-items: center; gap: 4px; }
.ar-prio .ar-pill, .ar-prio .ar-chip { flex: 0 0 auto; }

/* ── What's already working well ──────────────────────────────────────────── */
.ar-strengths__meter { margin: 16px 0 18px; max-width: 520px; }
.ar-strengths__stat { font: 400 16px/1.4 var(--ar-sans); color: var(--ar-body); margin: 0 0 8px; }
.ar-strengths__num { font: 700 30px/1 var(--ar-sans); color: var(--ar-good-fg); vertical-align: -3px; margin-right: 2px; }
.ar-strengths__bar { height: 10px; border-radius: 999px; background: var(--ar-good-bg); overflow: hidden; }
.ar-strengths__bar > span { display: block; height: 100%; background: var(--ar-good); border-radius: 999px; }
.ar-strengths__lead { font: 400 14px/1.5 var(--ar-sans); color: var(--ar-muted); margin: 0; }
.ar-strengths .ar-strengthlist {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px;
}
@media (max-width: 640px) { .ar-strengths .ar-strengthlist { grid-template-columns: 1fr; } }
.ar-strengthlist li { display: flex; align-items: flex-start; gap: 8px; font: 400 14px/1.45 var(--ar-sans); color: var(--ar-body); }
.ar-strengthlist li i { color: var(--ar-good); flex: 0 0 auto; margin-top: 2px; }
.ar-strengths__more { margin: 14px 0 0; }
.ar-strengths__more > summary { cursor: pointer; font: 600 14px/1.4 var(--ar-sans); color: var(--ar-brand); list-style: none; display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
.ar-strengths__more > summary::-webkit-details-marker { display: none; }
.ar-strengths__more > summary::before { content: "▸"; font-size: 11px; }
.ar-strengths__more[open] > summary::before { content: "▾"; }
.ar-strengths__more[open] > summary { margin-bottom: 12px; }
@media print { .ar-strengths__more > summary { display: none; } .ar-strengths__more > .ar-strengthlist { display: grid; } }
.ar-method__link { margin: 10px 0 0; }
.ar-method__link a { font: 600 14px/1.4 var(--ar-sans); color: var(--ar-brand); }
.ar-chip { font: 600 12px/1 var(--ar-sans); padding: 5px 10px; border-radius: 6px; }
.ar-chip--high   { color: var(--ar-critical-fg); background: var(--ar-critical-bg); }
.ar-chip--medium { color: var(--ar-serious-fg);  background: var(--ar-serious-bg); }
.ar-chip--low    { color: var(--ar-good-fg);      background: var(--ar-good-bg); }

/* ── Severity helpers (pills + dots) ──────────────────────────────────────── */
.is-critical .ar-dot, .ar-dot.is-critical { background: var(--ar-critical); }
.is-serious  .ar-dot, .ar-dot.is-serious  { background: var(--ar-serious); }
.is-moderate .ar-dot, .ar-dot.is-moderate { background: var(--ar-moderate); }
.is-minor    .ar-dot, .ar-dot.is-minor    { background: var(--ar-minor); }

.ar-pill.is-critical { background: var(--ar-critical-bg); color: var(--ar-critical-fg); }
.ar-pill.is-serious  { background: var(--ar-serious-bg);  color: var(--ar-serious-fg); }
.ar-pill.is-moderate { background: var(--ar-moderate-bg); color: var(--ar-moderate-fg); }
.ar-pill.is-minor    { background: var(--ar-minor-bg);    color: var(--ar-minor-fg); }

/* ── Code diff (digital fix) ──────────────────────────────────────────────── */
.ar-code {
  font: 500 13px/1.65 var(--ar-mono);
  background: #fff; color: var(--ar-brand);
  padding: 14px 16px; border: 1px solid var(--ar-line); border-radius: 8px;
  margin: 0; white-space: pre-wrap; word-break: break-word;
}
.ar-code .c   { color: var(--ar-muted); }
.ar-code .del { color: var(--ar-critical-fg); font-weight: 700; }
.ar-code .add { color: var(--ar-good-fg); font-weight: 700; }

/* ── Numbered steps (PDF fix) ─────────────────────────────────────────────── */
ol.ar-steps {
  margin: 0; padding-left: 0; list-style: none; counter-reset: s;
  display: flex; flex-direction: column; gap: 10px;
}
ol.ar-steps li {
  counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: 10px;
  font: 400 14px/1.55 var(--ar-sans); color: var(--ar-body);
}
ol.ar-steps li::before {
  content: counter(s); grid-row: 1;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--ar-brand-soft); color: var(--ar-brand);
  font: 700 12px/24px var(--ar-mono); text-align: center;
}

/* ── Glossary terms (dotted underline) ────────────────────────────────────── */
.gloss,
.audit .glossary-term-link {
  color: var(--ar-brand);
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  font-weight: 600;
}
.gloss:hover,
.audit .glossary-term-link:hover {
  text-decoration-style: solid; text-decoration-thickness: 2px;
}
.audit a:not(.gloss):not(.glossary-term-link):not(.ar-cta-btn):not(.ar-cta__btn) { color: var(--ar-brand); }

/* ── CTA banner ───────────────────────────────────────────────────────────── */
.ar-cta {
  background: var(--ar-brand); border-radius: 16px; padding: 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.ar-cta__copy { flex: 1; min-width: 240px; }
.ar-cta h2 { font: 700 24px/1.3 var(--ar-sans); color: #fff; margin: 0 0 8px; }
.ar-cta p  { font: 400 16px/1.6 var(--ar-sans); color: var(--ar-brand-soft); margin: 0; }
.ar-cta__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ar-brand);
  font: 600 15px/1 var(--ar-sans); padding: 14px 24px; border-radius: 8px; text-decoration: none;
}
.ar-cta__btn:hover { background: var(--ar-brand-soft); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.ar-footer {
  background: var(--ar-surface-foot); border-top: 1px solid var(--ar-line);
  padding: 40px 30px 24px;
}
.ar-footer__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.ar-footer__brand { display: flex; align-items: center; gap: 10px; }
.ar-footer__brand a { font: 600 14px/1 var(--ar-sans); color: var(--ar-brand); text-decoration: none; }
.ar-footer__brand a:hover { text-decoration: underline; }
.ar-footer__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ar-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 12px/1 var(--ar-sans); color: var(--ar-good-fg);
  background: var(--ar-good-bg); padding: 6px 11px; border-radius: 999px;
}
.ar-footer__fine { font: 400 13px/1.5 var(--ar-sans); color: var(--ar-muted); }

/* ── Export / print controls (screen only) ───────────────────────────────── */
.ar-toolbar {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  max-width: 1180px; margin: 24px auto -16px; padding: 0 8px;
}
/* Department view switcher (Full · Executive · Developer) */
.ar-viewswitch { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ar-viewswitch__label {
  font: 700 11px/1 var(--ar-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ar-muted); margin-right: 6px;
}
.ar-viewswitch__btn {
  font: 600 13px/1 var(--ar-sans); color: var(--ar-body); text-decoration: none;
  background: #fff; border: 1px solid var(--ar-line); border-radius: 8px; padding: 8px 12px;
}
.ar-viewswitch__btn:hover { border-color: var(--ar-brand); color: var(--ar-brand); }
.ar-viewswitch__btn.is-active {
  background: var(--ar-brand); color: #fff; border-color: var(--ar-brand);
}
.ar-toolbar__btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13px/1 var(--ar-sans); color: var(--ar-brand);
  background: #fff; border: 1px solid var(--ar-line); border-radius: 8px;
  padding: 9px 14px; cursor: pointer; text-decoration: none;
}
.ar-toolbar__btn:hover { border-color: var(--ar-brand); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .ar-nav { display: none; }
  .ar-meta-grid { grid-template-columns: 1fr; }
  .ar-summary { grid-template-columns: 1fr; }
  .ar-finding__body { grid-template-columns: 1fr; }
  .ar-finding__fix { border-left: 0; border-top: 1px solid var(--ar-line); }
  .ar-bar { grid-template-columns: 110px 1fr; }
  .ar-bar__val { grid-column: 2; text-align: left; }
}

/* ── Methodology timeline ─────────────────────────────────────────────────── */
.ar-method { padding-bottom: 48px; }
.ar-timeline {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  max-width: 820px;
}
.ar-timeline__item {
  position: relative;
  display: grid; grid-template-columns: 200px 1fr; gap: 16px;
  padding: 14px 0 14px 22px;
  border-left: 2px solid var(--ar-line);
}
.ar-timeline__item::before {
  content: ""; position: absolute; left: -7px; top: 19px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ar-brand); border: 2px solid #fff;
}
.ar-timeline__item:last-child { border-left-color: transparent; }
.ar-timeline__label { font: 700 13px/1.4 var(--ar-mono); color: var(--ar-brand); }
.ar-timeline__desc  { font: 400 15px/1.6 var(--ar-sans); color: var(--ar-body); }

/* ── Verified checklist (optional, client-facing) ─────────────────────────── */
.ar-checklist { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.ar-checklist__phase {
  font: 700 13px/1.3 var(--ar-sans); letter-spacing: .02em;
  color: var(--ar-ink); margin: 0 0 8px;
}
.ar-checklist__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-check {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--ar-line-soft);
  font: 400 14px/1.5 var(--ar-sans); color: var(--ar-body);
}
.ar-check__status {
  width: 14px; height: 14px; border-radius: 50%; align-self: center;
  border: 2px solid var(--ar-faint); background: transparent;
}
.ar-check.is-pass .ar-check__status { background: var(--ar-good);     border-color: var(--ar-good); }
.ar-check.is-fail .ar-check__status { background: var(--ar-critical); border-color: var(--ar-critical); }
.ar-check.is-na   .ar-check__status { background: var(--ar-line);     border-color: var(--ar-faint); }
.ar-check__state {
  font: 700 11px/1 var(--ar-mono); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ar-muted); align-self: center;
}
.ar-check.is-pass .ar-check__state { color: var(--ar-good-fg); }
.ar-check.is-fail .ar-check__state { color: var(--ar-critical-fg); }
.ar-check.is-pending .ar-check__state { color: var(--ar-faint); }

@media (max-width: 820px) {
  .ar-timeline__item { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Reduced motion (brand: all transitions must honor this) ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .audit-doc *, .audit-doc *::before, .audit-doc *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print / PDF ──────────────────────────────────────────────────────────── */
@media print {
  @page { margin: 14mm; }
  .audit-doc { background: #fff !important; }
  .ar-toolbar, .ar-skip { display: none !important; }
  .audit {
    max-width: none; margin: 0; border-radius: 0 !important;
    border: none; box-shadow: none !important;
  }
  .ar-header { position: static; }
  .ar-finding, .ar-glance, .ar-score, .ar-cta { break-inside: avoid; }
  .ar-section, .ar-section--tight { padding-left: 0; padding-right: 0; }
  .ar-meta, .ar-legend { padding-left: 0; padding-right: 0; }
}