/*
 * EquitableDocs Tool 6 audit bundle, unified design tokens (v4 redesign)
 * Written: 2026-05-08
 *
 * Sits on top of equitabledocs-site-style.css. Inherits palette, type, focus.
 * Adds: spacing scale, card frames, severity, identity strip, section breaks,
 * screenshot frame, audit-evidence chrome.
 *
 * Single source of truth for all five artefacts (HTML + Word spec mirrors).
 */

:root {
  /* ============== PALETTE (locked, mirrors equitabledocs site) ============== */
  --ed-text:           #0b0c0c;
  --ed-text-muted:     #4b5563;
  --ed-text-soft:      #6b7280;
  --ed-text-inverse:   #ffffff;

  --ed-bg:             #ffffff;
  --ed-bg-alt:         #f3f4f6;
  --ed-bg-deep:        #e5e7eb;
  --ed-bg-hero:        #1f2937;
  --ed-bg-footer:      #111827;
  --ed-bg-card:        #ffffff;

  --ed-accent:         #1e40af;
  --ed-accent-deep:    #172554;
  --ed-accent-soft:    #eef2ff;

  --ed-link:           #1e40af;
  --ed-link-visited:   #6b21a8;
  --ed-link-hover:     #172554;
  --ed-link-on-dark:   #93c5fd;

  --ed-border:         #d1d5db;
  --ed-border-strong:  #9ca3af;
  --ed-border-rule:    #6b7280;

  --ed-focus-bg:       #fde68a;
  --ed-focus-outline:  #78350f;

  /* Severities (axesCheck-aligned) */
  --ed-sev-blocker-bg:   #fee2e2;
  --ed-sev-blocker-text: #991b1b;
  --ed-sev-blocker-rule: #b91c1c;

  --ed-sev-high-bg:      #fef3c7;
  --ed-sev-high-text:    #78350f;
  --ed-sev-high-rule:    #b45309;

  --ed-sev-medium-bg:    #e0f2fe;
  --ed-sev-medium-text:  #075985;
  --ed-sev-medium-rule:  #0369a1;

  --ed-sev-polish-bg:    #f3f4f6;
  --ed-sev-polish-text:  #374151;
  --ed-sev-polish-rule:  #6b7280;

  --ed-sev-pass-bg:      #dcfce7;
  --ed-sev-pass-text:    #166534;
  --ed-sev-pass-rule:    #15803d;

  /* Magenta highlight inside page-evidence screenshots (kept) */
  --ed-magenta: #c8006e;

  /* ============== TYPE ============== */
  --ed-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;
  --ed-font-mono: "SF Mono", "Consolas", "Liberation Mono", "Menlo",
                  "Courier New", monospace;

  /* Body 1.125rem / line-height 1.6 (locked).
     Heading scale follows brand: H1 2.5rem, H2 1.875rem, H3 1.25rem.
     We add H4/H5 plus a "monumental" eyebrow size. */
  --ed-fs-eyebrow:   0.8125rem;   /* 13px, uppercase tracking */
  --ed-fs-meta:      0.9375rem;   /* 15px, identity strip + captions */
  --ed-fs-small:     1rem;        /* 16px, secondary body */
  --ed-fs-body:      1.125rem;    /* 18px, body (brand) */
  --ed-fs-lede:      1.3125rem;   /* 21px, hero lede */
  --ed-fs-h4:        1.0625rem;
  --ed-fs-h3:        1.25rem;
  --ed-fs-h2:        1.875rem;
  --ed-fs-h1:        2.5rem;
  --ed-fs-display:   3rem;        /* extends scale for cover heroes */

  --ed-lh-tight:     1.2;
  --ed-lh-snug:      1.35;
  --ed-lh-body:      1.6;

  --ed-tracking-eyebrow: 0.08em;

  /* ============== SPACING SCALE (4px base) ============== */
  --ed-space-1:   0.25rem;   /*  4px */
  --ed-space-2:   0.5rem;    /*  8px */
  --ed-space-3:   0.75rem;   /* 12px */
  --ed-space-4:   1rem;      /* 16px */
  --ed-space-5:   1.25rem;   /* 20px */
  --ed-space-6:   1.5rem;    /* 24px */
  --ed-space-7:   2rem;      /* 32px */
  --ed-space-8:   2.5rem;    /* 40px */
  --ed-space-9:   3rem;      /* 48px */
  --ed-space-10:  4rem;      /* 64px */
  --ed-space-11:  5rem;      /* 80px */
  --ed-space-12:  6rem;      /* 96px */

  /* Section-break heights (the "soothing breakages" the brief asks for) */
  --ed-break-sm: var(--ed-space-7);   /* 32px between sub-sections */
  --ed-break-md: var(--ed-space-9);   /* 48px between section starts */
  --ed-break-lg: var(--ed-space-11);  /* 80px between major regions */

  /* Card-to-card rhythm in finding stacks */
  --ed-card-gap: var(--ed-space-8);   /* 40px */

  /* ============== BORDERS, RADII, SHADOWS ============== */
  --ed-border-w:        1px;
  --ed-border-w-card:   1px;
  --ed-rule-w:          6px;          /* card severity rule (left edge) */
  --ed-divider-w:       2px;
  --ed-section-rule-w:  3px;

  --ed-radius-0: 0;
  --ed-radius-1: 0.125rem;
  --ed-radius-2: 0.25rem;
  --ed-radius-3: 0.375rem;

  --ed-shadow-flat: none;
  --ed-shadow-card: 0 1px 0 rgba(11,12,12,0.04),
                    0 2px 4px rgba(11,12,12,0.04);
  --ed-shadow-elev: 0 4px 16px rgba(11,12,12,0.08),
                    0 1px 2px rgba(11,12,12,0.06);

  /* ============== LAYOUT ============== */
  --ed-content-max:  64rem;    /* matches site .wrap (1024px) */
  --ed-prose-max:    44rem;    /* matches site p (704px) */
  --ed-evidence-max: 72rem;    /* slightly wider for evidence rows */

  /* ============== IDENTITY STRIP ============== */
  --ed-strip-height:    auto;
  --ed-strip-bg:        var(--ed-bg-hero);
  --ed-strip-fg:        var(--ed-text-inverse);
  --ed-strip-rule:      var(--ed-accent);

  /* ============== CARD FRAMES ============== */
  --ed-card-bg:         var(--ed-bg-card);
  --ed-card-border:     var(--ed-border-strong);
  --ed-card-pad-x:      var(--ed-space-7);
  --ed-card-pad-y:      var(--ed-space-7);
  --ed-card-radius:     var(--ed-radius-2);
}

/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ed-font-sans);
  font-size: var(--ed-fs-body);
  line-height: var(--ed-lh-body);
  color: var(--ed-text);
  background: var(--ed-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 var(--ed-space-4); max-width: var(--ed-prose-max); }
p.lede { font-size: var(--ed-fs-lede); line-height: 1.55; }

h1, h2, h3, h4 { font-weight: 700; line-height: var(--ed-lh-tight); margin: 0 0 var(--ed-space-4); }
h1 { font-size: var(--ed-fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--ed-fs-h2); letter-spacing: -0.005em; }
h3 { font-size: var(--ed-fs-h3); line-height: var(--ed-lh-snug); }
h4 { font-size: var(--ed-fs-h4); line-height: var(--ed-lh-snug); }

a {
  color: var(--ed-link);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.08em;
}
a:visited { color: var(--ed-link-visited); }
a:hover { color: var(--ed-link-hover); text-decoration-thickness: 0.14em; }
a:focus-visible {
  outline: 3px solid var(--ed-focus-outline);
  outline-offset: 2px;
  background: var(--ed-focus-bg);
  color: var(--ed-text);
  text-decoration: none;
}

code, kbd, samp {
  font-family: var(--ed-font-mono);
  font-size: 0.92em;
  background: var(--ed-bg-alt);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-1);
  padding: 0.05em 0.35em;
}
pre {
  font-family: var(--ed-font-mono);
  font-size: 0.92rem;
  line-height: 1.55;
  background: var(--ed-bg-alt);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-2);
  padding: var(--ed-space-4) var(--ed-space-5);
  overflow-x: auto;
  margin: 0 0 var(--ed-space-4);
}
pre code { background: none; border: 0; padding: 0; }

::selection { background: var(--ed-focus-bg); color: var(--ed-text); }

/* ============================================================
   SKIP LINK
   ============================================================ */
.ed-skip-link {
  position: absolute;
  left: -1000px;
  top: 0;
  background: var(--ed-focus-bg);
  color: var(--ed-text);
  padding: 0.75rem 1.25rem;
  text-decoration: underline;
  font-weight: 700;
  z-index: 1000;
}
.ed-skip-link:focus {
  left: 0;
  outline: 3px solid var(--ed-focus-outline);
}

/* ============================================================
   IDENTITY STRIP, the "one bundle, five artefacts" cue
   Sits above every artefact (HTML + Word).
   ============================================================ */
.ed-identity {
  background: var(--ed-strip-bg);
  color: var(--ed-strip-fg);
  border-bottom: 4px solid var(--ed-strip-rule);
}
.ed-identity__inner {
  max-width: var(--ed-content-max);
  margin: 0 auto;
  padding: var(--ed-space-5) var(--ed-space-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ed-space-6);
}
.ed-identity__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ed-space-2);
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.ed-identity__brand-name {
  font-size: 1.1875rem;
}
.ed-identity__brand-tool {
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.ed-identity__brand-mark {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--ed-accent);
  position: relative;
  margin-right: var(--ed-space-2);
  flex-shrink: 0;
  border-radius: 2px;
}
.ed-identity__brand-mark::before,
.ed-identity__brand-mark::after {
  content: "";
  position: absolute;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ed-identity__brand-mark::before {
  width: 0.7rem;
  height: 2px;
}
.ed-identity__brand-mark::after {
  width: 2px;
  height: 0.7rem;
}
.ed-identity__crumbs {
  font-size: var(--ed-fs-meta);
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}
.ed-identity__crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ed-space-3);
}
.ed-identity__crumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--ed-space-3);
}
.ed-identity__crumbs li + li::before {
  content: "·";
  color: rgba(255,255,255,0.45);
  margin-right: var(--ed-space-3);
}
.ed-identity__crumbs li[aria-current="page"] {
  color: #fff;
  font-weight: 700;
}
.ed-identity__date {
  font-size: var(--ed-fs-meta);
  color: rgba(255,255,255,0.78);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Five-dot artefact progress (small, inside the strip on wider screens) */
.ed-identity__progress {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--ed-space-3);
}
.ed-identity__progress span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  display: block;
}
.ed-identity__progress span[data-current="true"] {
  background: var(--ed-accent);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}

@media (max-width: 720px) {
  .ed-identity__inner {
    grid-template-columns: 1fr;
    gap: var(--ed-space-3);
  }
  .ed-identity__date { justify-self: start; }
}

/* ============================================================
   COVER (artefact title block under the identity strip)
   ============================================================ */
.ed-cover {
  background: var(--ed-bg);
  border-bottom: 1px solid var(--ed-border);
}
.ed-cover__inner {
  max-width: var(--ed-content-max);
  margin: 0 auto;
  padding: var(--ed-space-10) var(--ed-space-5) var(--ed-space-9);
}
.ed-cover__eyebrow {
  display: inline-block;
  font-size: var(--ed-fs-eyebrow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ed-tracking-eyebrow);
  color: var(--ed-accent);
  margin: 0 0 var(--ed-space-4);
}
.ed-cover h1 {
  font-size: clamp(2rem, 4vw, var(--ed-fs-display));
  line-height: 1.1;
  max-width: 26ch;
  margin: 0 0 var(--ed-space-5);
}
.ed-cover__deck {
  font-size: var(--ed-fs-lede);
  line-height: 1.55;
  color: var(--ed-text-muted);
  max-width: 60ch;
  margin: 0 0 var(--ed-space-7);
}
.ed-cover__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--ed-space-5) var(--ed-space-7);
  border-top: 1px solid var(--ed-border);
  padding-top: var(--ed-space-5);
  max-width: 60rem;
}
.ed-cover__meta dt {
  font-size: var(--ed-fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ed-tracking-eyebrow);
  color: var(--ed-text-muted);
  margin: 0 0 var(--ed-space-1);
}
.ed-cover__meta dd {
  margin: 0;
  font-size: var(--ed-fs-small);
  color: var(--ed-text);
  font-weight: 600;
}

/* ============================================================
   COMPLIANCE RIBBON, the axesCheck-style "Not met" pair.
   Two cards on a tinted band. Same grammar across all five artefacts.
   ============================================================ */
.ed-ribbon {
  background: var(--ed-bg-alt);
  border-top: 1px solid var(--ed-border);
  border-bottom: 1px solid var(--ed-border);
}
.ed-ribbon__inner {
  max-width: var(--ed-content-max);
  margin: 0 auto;
  padding: var(--ed-space-7) var(--ed-space-5);
}
.ed-ribbon__label {
  font-size: var(--ed-fs-eyebrow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ed-tracking-eyebrow);
  color: var(--ed-text-muted);
  margin: 0 0 var(--ed-space-4);
}
.ed-ribbon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--ed-space-5);
}
.ed-ribbon-card {
  background: var(--ed-bg-card);
  border: 2px solid var(--ed-sev-blocker-rule);
  padding: var(--ed-space-6) var(--ed-space-6) var(--ed-space-6) var(--ed-space-6);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--ed-space-4) var(--ed-space-5);
  align-items: start;
}
.ed-ribbon-card[data-state="pass"] {
  border-color: var(--ed-sev-pass-rule);
}
.ed-ribbon-card__mark {
  width: 3rem;
  height: 3rem;
  background: var(--ed-sev-blocker-bg);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--ed-sev-blocker-rule);
  line-height: 1;
}
.ed-ribbon-card[data-state="pass"] .ed-ribbon-card__mark {
  background: var(--ed-sev-pass-bg);
  color: var(--ed-sev-pass-rule);
}
.ed-ribbon-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ed-space-3);
  margin: 0 0 var(--ed-space-2);
}
.ed-ribbon-card__std {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ed-text);
}
.ed-ribbon-card__verdict {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ed-sev-blocker-text);
}
.ed-ribbon-card[data-state="pass"] .ed-ribbon-card__verdict {
  color: var(--ed-sev-pass-text);
}
.ed-ribbon-card__body {
  margin: 0;
  font-size: var(--ed-fs-small);
  color: var(--ed-text);
  line-height: 1.55;
  max-width: none;
  grid-column: 2;
}
.ed-ribbon-card__counts {
  grid-column: 2;
  margin: var(--ed-space-3) 0 0;
  font-size: 0.9375rem;
  color: var(--ed-text-muted);
}
.ed-ribbon-card__counts strong { color: var(--ed-text); font-weight: 700; }

/* ============================================================
   SECTION BREAKS, the "soothing breakages" between major regions.
   Pattern: full-bleed alt-band with eyebrow + numbered H2.
   ============================================================ */
.ed-section {
  padding: var(--ed-break-md) 0;
}
.ed-section--alt { background: var(--ed-bg-alt); }
.ed-section--deep { background: var(--ed-bg-hero); color: var(--ed-text-inverse); }
.ed-section--deep h2,
.ed-section--deep h3 { color: var(--ed-text-inverse); }
.ed-section--deep p { color: rgba(255,255,255,0.92); }
.ed-section--deep a { color: var(--ed-link-on-dark); }

.ed-section__inner {
  max-width: var(--ed-content-max);
  margin: 0 auto;
  padding: 0 var(--ed-space-5);
}

.ed-section__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ed-space-2) var(--ed-space-5);
  align-items: baseline;
  margin: 0 0 var(--ed-space-7);
  padding-bottom: var(--ed-space-5);
  border-bottom: var(--ed-section-rule-w) solid var(--ed-text);
}
.ed-section--deep .ed-section__head { border-bottom-color: rgba(255,255,255,0.85); }
.ed-section__num {
  font-family: var(--ed-font-mono);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ed-accent);
  align-self: end;
  padding-bottom: 0.4rem;
}
.ed-section--deep .ed-section__num { color: var(--ed-link-on-dark); }
.ed-section__eyebrow {
  font-size: var(--ed-fs-eyebrow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ed-tracking-eyebrow);
  color: var(--ed-text-muted);
  grid-column: 2;
}
.ed-section--deep .ed-section__eyebrow { color: rgba(255,255,255,0.78); }
.ed-section__title {
  grid-column: 2;
  margin: 0;
  font-size: var(--ed-fs-h2);
  line-height: var(--ed-lh-tight);
  letter-spacing: -0.005em;
}
.ed-section__lede {
  grid-column: 2;
  margin: var(--ed-space-3) 0 0;
  font-size: var(--ed-fs-lede);
  color: var(--ed-text-muted);
  max-width: 60ch;
  line-height: 1.55;
}
.ed-section--deep .ed-section__lede { color: rgba(255,255,255,0.92); }

/* ============================================================
   FINDING CARDS, strong outlined card with severity rule.
   Generous 2rem padding, 2.5rem gap between cards. Card boundaries
   are unambiguous: 1px frame + 6px coloured rule + drop shadow.
   ============================================================ */
.ed-findings {
  display: grid;
  gap: var(--ed-card-gap);
}

.ed-finding {
  background: var(--ed-card-bg);
  border: var(--ed-border-w-card) solid var(--ed-card-border);
  border-left: var(--ed-rule-w) solid var(--ed-sev-high-rule);
  border-radius: var(--ed-card-radius);
  box-shadow: var(--ed-shadow-card);
  padding: 0;
  scroll-margin-top: 6rem;
}
.ed-finding[data-severity="blocker"] { border-left-color: var(--ed-sev-blocker-rule); }
.ed-finding[data-severity="high"]    { border-left-color: var(--ed-sev-high-rule); }
.ed-finding[data-severity="medium"]  { border-left-color: var(--ed-sev-medium-rule); }
.ed-finding[data-severity="polish"]  { border-left-color: var(--ed-sev-polish-rule); }
.ed-finding[data-severity="pass"]    { border-left-color: var(--ed-sev-pass-rule); }

.ed-finding__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--ed-space-3) var(--ed-space-5);
  align-items: baseline;
  padding: var(--ed-space-6) var(--ed-card-pad-x) var(--ed-space-4);
  border-bottom: 1px solid var(--ed-border);
}
.ed-finding__id {
  font-family: var(--ed-font-mono);
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--ed-text-muted);
  letter-spacing: 0.04em;
}
.ed-finding__title {
  margin: 0;
  font-size: 1.5rem;
  line-height: var(--ed-lh-snug);
  letter-spacing: -0.005em;
  color: var(--ed-text);
  grid-column: 1 / -1;
  order: 2;
}
.ed-finding__title-row {
  display: contents;
}
.ed-finding__pill-row {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--ed-space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ed-finding__body {
  padding: var(--ed-space-6) var(--ed-card-pad-x) var(--ed-space-7);
  display: grid;
  gap: var(--ed-space-6);
}

.ed-finding__lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ed-text);
  margin: 0;
  max-width: 60ch;
}

.ed-finding__callout {
  background: var(--ed-bg-alt);
  border-left: 4px solid var(--ed-accent);
  padding: var(--ed-space-5) var(--ed-space-6);
  border-radius: var(--ed-radius-2);
}
.ed-finding__callout-label {
  display: block;
  font-size: var(--ed-fs-eyebrow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ed-tracking-eyebrow);
  color: var(--ed-accent-deep);
  margin: 0 0 var(--ed-space-2);
}
.ed-finding__callout p:last-child { margin-bottom: 0; }
.ed-finding__callout p { max-width: 60ch; }

/* ============================================================
   SEVERITY PILLS, solid coloured, axesCheck-style
   ============================================================ */
.ed-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: var(--ed-radius-1);
  background: var(--ed-bg-alt);
  color: var(--ed-text);
  border: 1px solid var(--ed-border);
  white-space: nowrap;
}
.ed-pill[data-tone="blocker"] {
  background: var(--ed-sev-blocker-bg);
  color: var(--ed-sev-blocker-text);
  border-color: var(--ed-sev-blocker-rule);
}
.ed-pill[data-tone="high"] {
  background: var(--ed-sev-high-bg);
  color: var(--ed-sev-high-text);
  border-color: var(--ed-sev-high-rule);
}
.ed-pill[data-tone="medium"] {
  background: var(--ed-sev-medium-bg);
  color: var(--ed-sev-medium-text);
  border-color: var(--ed-sev-medium-rule);
}
.ed-pill[data-tone="polish"] {
  background: var(--ed-sev-polish-bg);
  color: var(--ed-sev-polish-text);
  border-color: var(--ed-sev-polish-rule);
}
.ed-pill[data-tone="pass"] {
  background: var(--ed-sev-pass-bg);
  color: var(--ed-sev-pass-text);
  border-color: var(--ed-sev-pass-rule);
}
.ed-pill[data-tone="quiet"] {
  background: transparent;
  color: var(--ed-text-muted);
  border-color: var(--ed-border);
}

.ed-pill__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ============================================================
   EVIDENCE ROW, three-column transcript / tags / fix steps
   ============================================================ */
.ed-evidence {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: var(--ed-space-5);
}
@media (max-width: 900px) {
  .ed-evidence { grid-template-columns: 1fr; }
}
.ed-evidence__col {
  background: var(--ed-bg-alt);
  border: 1px solid var(--ed-border);
  padding: var(--ed-space-5) var(--ed-space-5) var(--ed-space-6);
  border-radius: var(--ed-radius-2);
  display: flex;
  flex-direction: column;
}
.ed-evidence__col[data-kind="audio"] {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.ed-evidence__col[data-kind="tags"] {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #0f172a;
}
.ed-evidence__col[data-kind="tags"] code,
.ed-evidence__col[data-kind="tags"] pre {
  background: rgba(255,255,255,0.04);
  color: #e2e8f0;
  border-color: rgba(255,255,255,0.08);
}
.ed-evidence__label {
  font-size: var(--ed-fs-eyebrow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ed-tracking-eyebrow);
  color: var(--ed-text-muted);
  margin: 0 0 var(--ed-space-3);
}
.ed-evidence__col[data-kind="tags"] .ed-evidence__label {
  color: #94a3b8;
}
.ed-evidence__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 var(--ed-space-3);
  line-height: 1.35;
}

/* Hear-it-aloud button (Web Speech) */
.ed-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ed-bg);
  color: var(--ed-accent);
  font-family: var(--ed-font-sans);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--ed-accent);
  border-radius: var(--ed-radius-2);
  cursor: pointer;
  margin: var(--ed-space-3) 0 0;
}
.ed-audio-btn:hover { background: var(--ed-accent-soft); }
.ed-audio-btn:focus-visible {
  outline: 3px solid var(--ed-focus-outline);
  outline-offset: 2px;
  background: var(--ed-focus-bg);
  color: var(--ed-text);
}
.ed-audio-btn[aria-pressed="true"] {
  background: var(--ed-accent);
  color: #fff;
}
.ed-audio-btn__icon {
  width: 1.1rem; height: 1.1rem;
  display: inline-block;
}

.ed-transcript {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  max-width: none;
}
.ed-transcript em { color: var(--ed-text-muted); font-style: italic; }

/* ============================================================
   FIX STEPS list
   ============================================================ */
.ed-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--ed-space-3);
}
.ed-steps li {
  position: relative;
  padding: 0 0 0 2.4rem;
  font-size: 1rem;
  line-height: 1.55;
  counter-increment: step;
}
.ed-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.7rem;
  height: 1.7rem;
  background: var(--ed-text);
  color: #fff;
  font-family: var(--ed-font-mono);
  font-size: 0.9rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.ed-evidence__col[data-kind="tags"] .ed-steps li::before {
  background: var(--ed-link-on-dark);
  color: #0f172a;
}

/* ============================================================
   PAGE-EVIDENCE FIGURE, full-width inside card, captions above + below
   ============================================================ */
.ed-evidence-figure {
  margin: 0;
  border: 1px solid var(--ed-border);
  background: var(--ed-bg-alt);
  border-radius: var(--ed-radius-2);
  overflow: hidden;
}
.ed-evidence-figure__caption-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ed-space-2);
  padding: var(--ed-space-3) var(--ed-space-5);
  background: var(--ed-bg);
  border-bottom: 1px solid var(--ed-border);
  font-size: var(--ed-fs-meta);
  color: var(--ed-text-muted);
}
.ed-evidence-figure__caption-top strong { color: var(--ed-text); font-weight: 700; }
.ed-evidence-figure__caption-top .ed-pill { font-size: 0.75rem; padding: 0.2rem 0.45rem; }

.ed-evidence-figure__frame {
  background: #fff;
  display: grid;
  place-items: center;
  padding: var(--ed-space-6);
  min-height: 14rem;
}
.ed-evidence-figure__frame img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-1);
}
.ed-evidence-figure__caption-bottom {
  font-size: var(--ed-fs-meta);
  color: var(--ed-text-muted);
  padding: var(--ed-space-3) var(--ed-space-5) var(--ed-space-4);
  border-top: 1px solid var(--ed-border);
  background: var(--ed-bg);
}

.ed-evidence-figure--placeholder .ed-evidence-figure__frame {
  background:
    repeating-linear-gradient(135deg,
      #f3f4f6 0 12px,
      #e5e7eb 12px 24px);
  font-family: var(--ed-font-mono);
  color: var(--ed-text-muted);
  font-size: 0.875rem;
  text-align: center;
}

/* ============================================================
   TOC CARDS (top-of-artefact navigation)
   ============================================================ */
.ed-toc {
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-2);
  padding: var(--ed-space-5) var(--ed-space-6);
}
.ed-toc h2 {
  font-size: 1.25rem;
  margin: 0 0 var(--ed-space-4);
}
.ed-toc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ed-space-3);
}
.ed-toc__card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--ed-space-3);
  align-items: center;
  padding: var(--ed-space-3) var(--ed-space-4);
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  text-decoration: none;
  color: var(--ed-text);
  border-radius: var(--ed-radius-2);
}
.ed-toc__card:hover,
.ed-toc__card:focus-visible {
  border-color: var(--ed-accent);
  background: var(--ed-accent-soft);
  color: var(--ed-text);
  text-decoration: none;
}
.ed-toc__card-id {
  font-family: var(--ed-font-mono);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--ed-accent);
}
.ed-toc__card-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

/* ============================================================
   FOOTER POINTER (cross-artefact siblings)
   ============================================================ */
.ed-pointer {
  background: var(--ed-bg-footer);
  color: var(--ed-text-inverse);
}
.ed-pointer__inner {
  max-width: var(--ed-content-max);
  margin: 0 auto;
  padding: var(--ed-space-9) var(--ed-space-5) var(--ed-space-7);
}
.ed-pointer__label {
  font-size: var(--ed-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ed-tracking-eyebrow);
  font-weight: 800;
  color: rgba(255,255,255,0.78);
  margin: 0 0 var(--ed-space-4);
}
.ed-pointer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--ed-space-4);
  margin: 0 0 var(--ed-space-7);
}
.ed-pointer__card {
  display: block;
  padding: var(--ed-space-5);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  text-decoration: none;
  color: var(--ed-text-inverse);
  border-radius: var(--ed-radius-2);
}
.ed-pointer__card:hover,
.ed-pointer__card:focus-visible {
  background: rgba(255,255,255,0.10);
  border-color: var(--ed-link-on-dark);
  color: var(--ed-text-inverse);
}
.ed-pointer__card-num {
  font-family: var(--ed-font-mono);
  font-size: 0.875rem;
  color: var(--ed-link-on-dark);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.ed-pointer__card-title {
  margin: 0.4rem 0 0.3rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
.ed-pointer__card-sub {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.78);
  max-width: none;
}
.ed-pointer__colophon {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: var(--ed-space-5);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.78);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ed-space-3);
}
.ed-pointer__colophon a { color: var(--ed-link-on-dark); }

/* ============================================================
   STANDARDS TABLE (used in 01 Professional Report)
   ============================================================ */
.ed-stdtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  margin: 0;
}
.ed-stdtable thead th {
  text-align: left;
  padding: var(--ed-space-3) var(--ed-space-4);
  font-size: var(--ed-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ed-tracking-eyebrow);
  font-weight: 800;
  color: var(--ed-text-muted);
  border-bottom: 2px solid var(--ed-text);
  background: var(--ed-bg-alt);
}
.ed-stdtable tbody th,
.ed-stdtable tbody td {
  text-align: left;
  padding: var(--ed-space-4);
  border-bottom: 1px solid var(--ed-border);
  vertical-align: top;
}
.ed-stdtable tbody th {
  font-weight: 700;
  width: 22%;
}
.ed-stdtable tbody tr:nth-child(even) { background: #fafafa; }

/* ============================================================
   PROGRESSIVE-DISCLOSURE DETAILS (used in 01 / V4 preview)
   ============================================================ */
.ed-disclose {
  border: 1px solid var(--ed-border);
  border-left: 4px solid var(--ed-accent);
  border-radius: var(--ed-radius-2);
  background: var(--ed-bg);
  padding: 0;
  margin: 0 0 var(--ed-space-4);
}
.ed-disclose > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--ed-space-4) var(--ed-space-5);
  font-weight: 700;
  font-size: 1.0625rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--ed-space-3);
  align-items: center;
}
.ed-disclose > summary::-webkit-details-marker { display: none; }
.ed-disclose > summary::before {
  content: "▶";
  font-size: 0.85rem;
  color: var(--ed-accent);
  transition: transform 150ms;
}
.ed-disclose[open] > summary::before { transform: rotate(90deg); }
.ed-disclose > summary::after {
  content: "Click to expand";
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ed-text-muted);
}
.ed-disclose[open] > summary::after { content: "Click to collapse"; }
.ed-disclose > summary:hover { background: var(--ed-bg-alt); }
.ed-disclose > summary:focus-visible {
  outline: 3px solid var(--ed-focus-outline);
  outline-offset: -2px;
  background: var(--ed-focus-bg);
}
.ed-disclose__body {
  padding: var(--ed-space-5);
  border-top: 1px solid var(--ed-border);
}

/* ============================================================
   UTILITY
   ============================================================ */
.ed-shell {
  max-width: var(--ed-content-max);
  margin: 0 auto;
  padding: 0 var(--ed-space-5);
}
.ed-shell--wide {
  max-width: var(--ed-evidence-max);
}
.ed-stack-lg > * + * { margin-top: var(--ed-break-md); }
.ed-stack-md > * + * { margin-top: var(--ed-break-sm); }
.ed-meta { font-size: var(--ed-fs-meta); color: var(--ed-text-muted); }

/* Reduced motion + forced colours (inherited approach) */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .ed-finding,
  .ed-ribbon-card,
  .ed-toc__card,
  .ed-pointer__card { border: 2px solid ButtonText; }
  .ed-pill { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  a:focus-visible { outline: 3px solid LinkText; }
}

@media (max-width: 720px) {
  :root { --ed-card-pad-x: var(--ed-space-5); }
  .ed-cover h1 { font-size: 2rem; }
  .ed-section__head { grid-template-columns: 1fr; }
  .ed-section__num { grid-row: 1; grid-column: 1; }
  .ed-section__eyebrow,
  .ed-section__title,
  .ed-section__lede { grid-column: 1; }
}