/* ============================================================
   tokens-landings.css
   Landing-page extension to the EquitableDocs Tool 6 design system.

   Loaded ALONGSIDE tokens.css on every public tool landing page.
   Adds nothing to the audit-bundle artefacts.

   Class prefix: .ed-, BEM-ish, matching the audit system.
   No new colours. All tokens come from tokens.css.

   Sections, in order:
     01 Site header           .ed-site-header
     02 Tool hero             .ed-tool-hero
     03 Upload card           .ed-upload-card
     04 Form atoms            .ed-field, .ed-input, .ed-select, .ed-textarea,
                              .ed-checkbox-group, .ed-radio-group, .ed-file-input,
                              .ed-hint, .ed-field--error
     05 Buttons               .ed-btn, .ed-btn--primary/secondary/link, .ed-btn--lg
     06 Status region         .ed-status
     07 Result card           .ed-result
     08 Feature grid          .ed-features, .ed-feature-card
     09 Disclosure block      .ed-disclose
     10 Info table            .ed-info-table
     11 Panel                 .ed-panel, .ed-panel--privacy, .ed-panel--limits
     12 Site footer           .ed-site-footer
     13 Landings utilities    .ed-stack, .ed-prose
   ============================================================ */


/* ============================================================
   01 SITE HEADER
   ============================================================ */
.ed-site-header {
  background: var(--ed-bg);
  border-bottom: 1px solid var(--ed-border);
  position: relative;
  z-index: 10;
}
.ed-site-header__inner {
  max-width: var(--ed-content-max);
  margin: 0 auto;
  padding: var(--ed-space-4) var(--ed-space-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ed-space-6);
}
.ed-site-header__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ed-space-2);
  text-decoration: none;
  color: var(--ed-text);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.005em;
}
.ed-site-header__brand-mark {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--ed-text);
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: center;
}
.ed-site-header__brand-mark::before,
.ed-site-header__brand-mark::after {
  content: "";
  position: absolute;
  background: var(--ed-bg);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ed-site-header__brand-mark::before { width: 0.55rem; height: 2px; }
.ed-site-header__brand-mark::after { width: 2px; height: 0.55rem; }
.ed-site-header__brand-name { font-weight: 800; }
.ed-site-header__brand-tag {
  font-weight: 500;
  color: var(--ed-text-muted);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  margin-left: 0.2rem;
}

.ed-site-header__nav {
  display: flex;
  gap: var(--ed-space-5);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.ed-site-header__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--ed-space-5);
}
.ed-site-header__nav a {
  color: var(--ed-text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.ed-site-header__nav a:hover,
.ed-site-header__nav a:focus-visible { border-bottom-color: var(--ed-accent); color: var(--ed-accent); }
.ed-site-header__nav a[aria-current="page"] {
  color: var(--ed-accent);
  border-bottom-color: var(--ed-accent);
}

.ed-site-header__login {
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ed-text);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--ed-border-strong);
  border-radius: var(--ed-radius-2);
}
.ed-site-header__login:hover,
.ed-site-header__login:focus-visible { background: var(--ed-bg-alt); border-color: var(--ed-text); }

@media (max-width: 48rem) {
  .ed-site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand login" "nav nav";
    row-gap: var(--ed-space-3);
  }
  .ed-site-header__brand { grid-area: brand; }
  .ed-site-header__login { grid-area: login; }
  .ed-site-header__nav { grid-area: nav; justify-content: flex-start; }
}


/* ============================================================
   02 TOOL HERO
   Simpler than .ed-cover. Dark band, eyebrow + H1 + lede + paragraph.
   No CTA buttons. Action lives in the upload card immediately below.
   ============================================================ */
.ed-tool-hero {
  background: var(--ed-bg-hero);
  color: var(--ed-text-inverse);
  border-bottom: 4px solid var(--ed-accent);
}
.ed-tool-hero__inner {
  max-width: var(--ed-content-max);
  margin: 0 auto;
  padding: var(--ed-space-10) var(--ed-space-5) var(--ed-space-9);
}
.ed-tool-hero__eyebrow {
  display: inline-block;
  font-size: var(--ed-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ed-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ed-link-on-dark);
  margin-bottom: var(--ed-space-3);
}
.ed-tool-hero__title {
  margin: 0 0 var(--ed-space-4);
  font-size: var(--ed-fs-h1);
  letter-spacing: -0.015em;
  color: var(--ed-text-inverse);
}
.ed-tool-hero__tagline {
  margin: 0 0 var(--ed-space-5);
  font-size: var(--ed-fs-lede);
  line-height: 1.4;
  color: var(--ed-text-inverse);
  max-width: 50rem;
  font-weight: 500;
}
.ed-tool-hero__deck {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
  max-width: 50rem;
}


/* ============================================================
   03 UPLOAD CARD
   Primary action of every landing.
   Sits in its own band immediately below the hero.
   ============================================================ */
.ed-upload-band {
  background: var(--ed-bg-alt);
  border-bottom: 1px solid var(--ed-border);
}
.ed-upload-band__inner {
  max-width: var(--ed-content-max);
  margin: 0 auto;
  padding: var(--ed-space-8) var(--ed-space-5) var(--ed-space-9);
}
.ed-upload-card {
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-2);
  box-shadow: var(--ed-shadow-card);
  padding: var(--ed-space-7) var(--ed-space-7) var(--ed-space-6);
  max-width: 44rem;
  margin: 0 auto;
}
@media (max-width: 36rem) {
  .ed-upload-card { padding: var(--ed-space-5); }
}
.ed-upload-card__title {
  margin: 0 0 var(--ed-space-2);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.ed-upload-card__lede {
  margin: 0 0 var(--ed-space-6);
  color: var(--ed-text-muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: none;
}
.ed-upload-card__form {
  display: grid;
  gap: var(--ed-space-5);
}
.ed-upload-card__submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ed-space-4);
  align-items: center;
  margin-top: var(--ed-space-2);
}


/* ============================================================
   04 FORM ATOMS
   ============================================================ */
.ed-field {
  display: grid;
  gap: var(--ed-space-2);
}
.ed-field__label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ed-text);
}
.ed-field__label .ed-field__required {
  color: var(--ed-sev-blocker-text);
  margin-left: 0.2rem;
  font-weight: 800;
}
.ed-hint {
  font-size: 0.875rem;
  color: var(--ed-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Inputs */
.ed-input,
.ed-select,
.ed-textarea {
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ed-text);
  background: var(--ed-bg);
  border: 1px solid var(--ed-border-strong);
  border-radius: var(--ed-radius-2);
  padding: 0.65rem 0.85rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
}
.ed-textarea { min-height: 6rem; line-height: 1.55; resize: vertical; }
.ed-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ed-text) 50%),
    linear-gradient(-45deg, transparent 50%, var(--ed-text) 50%);
  background-position:
    calc(100% - 1.1rem) 1.15rem,
    calc(100% - 0.7rem) 1.15rem;
  background-size: 0.4rem 0.4rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.ed-input:hover,
.ed-select:hover,
.ed-textarea:hover { border-color: var(--ed-text); }
.ed-input:focus-visible,
.ed-select:focus-visible,
.ed-textarea:focus-visible {
  outline: none;
  border-color: var(--ed-accent);
  box-shadow: 0 0 0 3px var(--ed-focus-bg), 0 0 0 4px var(--ed-accent-deep);
}
.ed-input:disabled,
.ed-select:disabled,
.ed-textarea:disabled { background: var(--ed-bg-alt); color: var(--ed-text-muted); cursor: not-allowed; }

/* Checkbox / radio groups */
.ed-checkbox-group,
.ed-radio-group {
  display: grid;
  gap: var(--ed-space-3);
  margin: 0;
  padding: 0;
  border: 0;
}
.ed-checkbox-group__legend,
.ed-radio-group__legend {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ed-text);
  padding: 0;
  margin: 0 0 var(--ed-space-1);
}
.ed-check,
.ed-radio {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.7rem;
  align-items: start;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.25rem 0;
}
.ed-check input,
.ed-radio input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ed-accent);
  cursor: pointer;
}
.ed-check__text,
.ed-radio__text { color: var(--ed-text); }
.ed-check__hint,
.ed-radio__hint {
  display: block;
  grid-column: 2;
  font-size: 0.875rem;
  color: var(--ed-text-muted);
  margin-top: 0.15rem;
}

/* File input */
.ed-file-input {
  display: grid;
  gap: var(--ed-space-2);
}
.ed-file-input__control {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ed-space-3);
  border: 2px dashed var(--ed-border-strong);
  border-radius: var(--ed-radius-2);
  background: var(--ed-bg);
  padding: var(--ed-space-4) var(--ed-space-5);
  min-height: 4rem;
}
.ed-file-input__control:hover { border-color: var(--ed-accent); background: var(--ed-accent-soft); }
.ed-file-input__control[data-has-file="true"] { border-style: solid; border-color: var(--ed-accent); background: var(--ed-bg); }

/* Visually hide the native input but keep it accessible */
.ed-file-input__native {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.ed-file-input__native:focus-visible + .ed-file-input__faux {
  outline: 3px solid var(--ed-accent-deep);
  outline-offset: 2px;
  background: var(--ed-focus-bg);
}
.ed-file-input__faux {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ed-text);
  background: var(--ed-bg-alt);
  border: 1px solid var(--ed-border-strong);
  border-radius: var(--ed-radius-2);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.ed-file-input__name {
  font-size: 0.9375rem;
  color: var(--ed-text-muted);
}
.ed-file-input__name[data-has-file="true"] { color: var(--ed-text); font-weight: 600; }

/* Field error */
.ed-field--error .ed-input,
.ed-field--error .ed-select,
.ed-field--error .ed-textarea,
.ed-field--error .ed-file-input__control { border-color: var(--ed-sev-blocker-rule); }
.ed-field--error .ed-field__label { color: var(--ed-sev-blocker-text); }
.ed-field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ed-sev-blocker-text);
  font-weight: 600;
  margin: 0;
}
.ed-field__error::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  background: var(--ed-sev-blocker-rule);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}


/* ============================================================
   05 BUTTONS
   ============================================================ */
.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.005em;
  padding: 0.7rem 1.1rem;
  min-height: 2.75rem;
  border: 1px solid transparent;
  border-radius: var(--ed-radius-2);
  cursor: pointer;
  text-decoration: none;
  background: var(--ed-bg-alt);
  color: var(--ed-text);
  transition: background-color 60ms ease, color 60ms ease, border-color 60ms ease;
}
.ed-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ed-focus-bg), 0 0 0 4px var(--ed-accent-deep);
}
.ed-btn[disabled],
.ed-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.ed-btn--primary {
  background: var(--ed-accent);
  color: #fff;
  border-color: var(--ed-accent);
}
.ed-btn--primary:hover { background: var(--ed-accent-deep); border-color: var(--ed-accent-deep); }

.ed-btn--secondary {
  background: var(--ed-bg);
  color: var(--ed-accent);
  border-color: var(--ed-accent);
}
.ed-btn--secondary:hover { background: var(--ed-accent-soft); }

.ed-btn--link {
  background: transparent;
  color: var(--ed-accent);
  border: 0;
  padding: 0.4rem 0.2rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
  min-height: auto;
}
.ed-btn--link:hover { color: var(--ed-accent-deep); }

.ed-btn--lg {
  font-size: 1rem;
  padding: 0.95rem 1.4rem;
  min-height: 3.25rem;
  border-radius: var(--ed-radius-2);
}

.ed-btn--block { width: 100%; }


/* ============================================================
   06 STATUS REGION (inline)
   data-state: info | busy | success | refused | error
   ============================================================ */
.ed-status {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 0.65rem 0.85rem;
  border-radius: var(--ed-radius-2);
  border: 1px solid var(--ed-border);
  background: var(--ed-bg-alt);
  color: var(--ed-text);
  min-height: 2.5rem;
}
.ed-status:empty,
.ed-status[data-state=""],
.ed-status[data-state="idle"] { display: none; }

.ed-status__shape {
  display: inline-block;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  background: currentColor;
  clip-path: circle(50% at 50% 50%);
}
.ed-status__text { color: inherit; font-weight: 600; }
.ed-status__text strong { font-weight: 800; }

.ed-status[data-state="info"] {
  background: var(--ed-bg-alt);
  color: var(--ed-text);
  border-color: var(--ed-border);
}
.ed-status[data-state="info"] .ed-status__shape { clip-path: circle(50% at 50% 50%); background: var(--ed-text-muted); }

.ed-status[data-state="busy"] {
  background: var(--ed-accent-soft);
  color: var(--ed-accent-deep);
  border-color: var(--ed-accent);
}
.ed-status[data-state="busy"] .ed-status__shape {
  /* concentric ring; pure-CSS, no animation */
  background: transparent;
  border: 3px solid var(--ed-accent);
  border-radius: 50%;
  width: 1rem; height: 1rem;
  clip-path: none;
  margin-top: 0.2rem;
}

.ed-status[data-state="success"] {
  background: var(--ed-sev-pass-bg);
  color: var(--ed-sev-pass-text);
  border-color: var(--ed-sev-pass-rule);
}
.ed-status[data-state="success"] .ed-status__shape {
  background: var(--ed-sev-pass-rule);
  clip-path: polygon(20% 50%, 0 70%, 40% 100%, 100% 30%, 80% 10%, 40% 70%);
}

.ed-status[data-state="refused"] {
  background: var(--ed-sev-high-bg);
  color: var(--ed-sev-high-text);
  border-color: var(--ed-sev-high-rule);
}
.ed-status[data-state="refused"] .ed-status__shape {
  background: var(--ed-sev-high-rule);
  /* horizontal slash, distinct from error 'X' */
  clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
}

.ed-status[data-state="error"] {
  background: var(--ed-sev-blocker-bg);
  color: var(--ed-sev-blocker-text);
  border-color: var(--ed-sev-blocker-rule);
}
.ed-status[data-state="error"] .ed-status__shape {
  background: var(--ed-sev-blocker-rule);
  clip-path: polygon(15% 0, 0 15%, 35% 50%, 0 85%, 15% 100%, 50% 65%, 85% 100%, 100% 85%, 65% 50%, 100% 15%, 85% 0, 50% 35%);
}


/* ============================================================
   07 RESULT CARD
   data-variant: success | refused
   ============================================================ */
.ed-result {
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-left: 6px solid var(--ed-sev-pass-rule);
  border-radius: var(--ed-radius-2);
  box-shadow: var(--ed-shadow-card);
  padding: var(--ed-space-6) var(--ed-space-7) var(--ed-space-7);
  display: grid;
  gap: var(--ed-space-5);
}
.ed-result[hidden] { display: none; }
.ed-result[data-variant="refused"] { border-left-color: var(--ed-sev-high-rule); }
.ed-result[data-variant="error"]   { border-left-color: var(--ed-sev-blocker-rule); }

.ed-result__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ed-space-3) var(--ed-space-4);
  align-items: start;
}
.ed-result__shape {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ed-sev-pass-bg);
  color: var(--ed-sev-pass-text);
}
.ed-result__shape::after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--ed-sev-pass-rule);
  clip-path: polygon(20% 50%, 0 70%, 40% 100%, 100% 30%, 80% 10%, 40% 70%);
}
.ed-result[data-variant="refused"] .ed-result__shape { background: var(--ed-sev-high-bg); }
.ed-result[data-variant="refused"] .ed-result__shape::after {
  background: var(--ed-sev-high-rule);
  clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
}
.ed-result[data-variant="error"] .ed-result__shape { background: var(--ed-sev-blocker-bg); }
.ed-result[data-variant="error"] .ed-result__shape::after {
  background: var(--ed-sev-blocker-rule);
  clip-path: polygon(15% 0, 0 15%, 35% 50%, 0 85%, 15% 100%, 50% 65%, 85% 100%, 100% 85%, 65% 50%, 100% 15%, 85% 0, 50% 35%);
}

.ed-result__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.ed-result__lede {
  margin: var(--ed-space-2) 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ed-text-muted);
  max-width: 60ch;
}

.ed-result__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--ed-space-4);
  background: var(--ed-bg-alt);
  border-radius: var(--ed-radius-2);
  padding: var(--ed-space-4) var(--ed-space-5);
}
.ed-result__stat-num {
  display: block;
  font-family: var(--ed-font-mono);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ed-text);
  line-height: 1.05;
}
.ed-result__stat-label {
  display: block;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ed-text-muted);
  font-weight: 800;
  margin-top: 0.35rem;
}

.ed-result__tracking {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ed-space-3);
  align-items: center;
  background: var(--ed-bg-hero);
  color: var(--ed-text-inverse);
  padding: var(--ed-space-4) var(--ed-space-5);
  border-radius: var(--ed-radius-2);
}
.ed-result__tracking-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.78);
  font-weight: 800;
}
.ed-result__tracking-id {
  display: block;
  font-family: var(--ed-font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ed-text-inverse);
  letter-spacing: 0.04em;
  margin-top: 0.3rem;
  word-break: break-all;
}
.ed-result__tracking .ed-btn--secondary {
  background: transparent;
  color: var(--ed-link-on-dark);
  border-color: var(--ed-link-on-dark);
}
.ed-result__tracking .ed-btn--secondary:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: #fff;
}

.ed-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ed-space-3);
}


/* ============================================================
   08 FEATURE GRID
   ============================================================ */
.ed-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--ed-space-5);
}
.ed-feature-card {
  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) var(--ed-space-6);
  display: grid;
  gap: var(--ed-space-3);
  align-content: start;
}
.ed-feature-card__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.ed-feature-card__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ed-text-muted);
  max-width: none;
}


/* ============================================================
   09 DISCLOSURE
   ============================================================ */
.ed-disclose {
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-2);
  margin: 0 0 var(--ed-space-3);
  overflow: hidden;
}
.ed-disclose > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--ed-space-4);
  padding: var(--ed-space-4) var(--ed-space-5);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ed-text);
}
.ed-disclose > summary::-webkit-details-marker { display: none; }
.ed-disclose > summary::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--ed-text);
  border-bottom: 2px solid var(--ed-text);
  transform: rotate(45deg);
  transition: transform 120ms ease;
}
.ed-disclose[open] > summary::after { transform: rotate(-135deg); }
.ed-disclose > summary:hover { background: var(--ed-bg-alt); }
.ed-disclose > summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--ed-focus-bg), inset 0 0 0 4px var(--ed-accent-deep);
}
.ed-disclose__body {
  padding: 0 var(--ed-space-5) var(--ed-space-5);
  border-top: 1px solid var(--ed-border);
  padding-top: var(--ed-space-4);
}
.ed-disclose__body > *:first-child { margin-top: 0; }
.ed-disclose__body > *:last-child { margin-bottom: 0; }


/* ============================================================
   10 INFO TABLE
   ============================================================ */
.ed-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-2);
  overflow: hidden;
}
.ed-info-table caption {
  text-align: left;
  caption-side: top;
  font-size: var(--ed-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ed-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ed-text-muted);
  padding: 0 0 var(--ed-space-3);
}
.ed-info-table th,
.ed-info-table td {
  padding: 0.7rem 0.95rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ed-border);
}
.ed-info-table thead th {
  background: var(--ed-bg-alt);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ed-text-muted);
  font-weight: 800;
}
.ed-info-table tbody th[scope="row"] {
  background: var(--ed-bg);
  font-weight: 700;
  color: var(--ed-text);
  width: 14rem;
}
.ed-info-table tbody tr:nth-child(even) td,
.ed-info-table tbody tr:nth-child(even) th[scope="row"] { background: rgba(243,244,246,0.4); }
.ed-info-table tbody tr:last-child td,
.ed-info-table tbody tr:last-child th { border-bottom: 0; }
.ed-info-table code {
  font-family: var(--ed-font-mono);
  font-size: 0.875em;
  background: var(--ed-bg-alt);
  padding: 0.05em 0.4em;
  border-radius: 3px;
}


/* ============================================================
   11 PANEL  (privacy / limits / generic)
   ============================================================ */
.ed-panel {
  background: var(--ed-bg-alt);
  border-left: 4px solid var(--ed-accent);
  border-radius: var(--ed-radius-2);
  padding: var(--ed-space-5) var(--ed-space-6) var(--ed-space-6);
}
.ed-panel__title {
  margin: 0 0 var(--ed-space-2);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.ed-panel__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ed-text);
  max-width: 60ch;
}
.ed-panel__body p { margin: 0 0 var(--ed-space-3); }
.ed-panel__body p:last-child { margin-bottom: 0; }
.ed-panel__body ul {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--ed-space-2);
}
.ed-panel--privacy { border-left-color: var(--ed-accent); }
.ed-panel--limits  { border-left-color: var(--ed-text-muted); }


/* ============================================================
   12 SITE FOOTER
   ============================================================ */
.ed-site-footer {
  background: var(--ed-bg-footer);
  color: var(--ed-text-inverse);
  margin-top: var(--ed-space-12);
}
.ed-site-footer__inner {
  max-width: var(--ed-content-max);
  margin: 0 auto;
  padding: var(--ed-space-9) var(--ed-space-5) var(--ed-space-7);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--ed-space-7);
}
@media (max-width: 48rem) {
  .ed-site-footer__inner { grid-template-columns: 1fr; }
}
.ed-site-footer__colophon {
  display: grid;
  gap: var(--ed-space-3);
  align-content: start;
}
.ed-site-footer__brand {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ed-text-inverse);
}
.ed-site-footer__tagline {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 30rem;
}
.ed-site-footer__links {
  display: grid;
  gap: var(--ed-space-2);
  align-content: start;
}
.ed-site-footer__links-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-bottom: var(--ed-space-2);
}
.ed-site-footer__links a {
  color: var(--ed-link-on-dark);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: 0.2rem 0;
}
.ed-site-footer__links a:hover,
.ed-site-footer__links a:focus-visible {
  color: #fff;
  text-decoration: underline;
}
.ed-site-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 0;
  padding: var(--ed-space-5) var(--ed-space-5);
  max-width: var(--ed-content-max);
  margin-left: auto;
  margin-right: auto;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
}


/* ============================================================
   13 LANDINGS UTILITIES
   ============================================================ */
.ed-stack > * + * { margin-top: var(--ed-space-5); }
.ed-stack--lg > * + * { margin-top: var(--ed-space-7); }
.ed-stack--xl > * + * { margin-top: var(--ed-space-9); }

.ed-prose {
  max-width: 44rem;
  font-size: var(--ed-fs-body);
  line-height: 1.6;
  color: var(--ed-text);
}
.ed-prose > * + * { margin-top: var(--ed-space-4); }
.ed-prose h2 { font-size: var(--ed-fs-h2); margin-top: var(--ed-space-7); letter-spacing: -0.005em; }
.ed-prose h3 { font-size: 1.25rem; margin-top: var(--ed-space-6); }
.ed-prose ul,
.ed-prose ol { padding-left: 1.4rem; display: grid; gap: var(--ed-space-2); }

/* Visually-hidden helper for screen-reader-only labels */
.ed-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


/* ============================================================
   14 VERDICT PILL  (added 12 May 2026)
   --------------------------------------------------------------
   Resolves the BEM gap surfaced by Font Auditor:
   - per-font verdicts have FOUR states (BROKEN, RISKY, WARN, SAFE);
   - per-document verdict has THREE states (PASS, REVIEW, FAIL).

   Tone mapping (locked, do not invent new tones):
     BROKEN  -> --ed-sev-blocker (the file is unsafe)
     RISKY   -> --ed-sev-high    (the file is at risk)
     WARN    -> --ed-sev-medium  (should fix before publish)
     SAFE    -> --ed-sev-pass    (no action)
     PASS    -> --ed-sev-pass
     REVIEW  -> --ed-sev-medium
     FAIL    -> --ed-sev-blocker

   Each verdict pairs a colour with a non-decorative shape so colour
   is never load-bearing (WCAG 1.4.1 Use of Color, COGA Plain).
   ============================================================ */
.ed-verdict-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.7rem;
  border-radius: var(--ed-radius-1);
  border: 1px solid currentColor;
  font-family: var(--ed-font-mono);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: var(--ed-bg);
}
.ed-verdict-pill__shape {
  width: 0.65rem;
  height: 0.65rem;
  flex: none;
  background: currentColor;
}
.ed-verdict-pill__label { color: var(--ed-text); }

/* --- Per-font verdicts (4 states) --------------------------- */
.ed-verdict-pill[data-verdict="broken"] {
  color: var(--ed-sev-blocker-text);
  background: var(--ed-sev-blocker-bg);
  border-color: var(--ed-sev-blocker-rule);
}
.ed-verdict-pill[data-verdict="broken"] .ed-verdict-pill__shape {
  /* Filled square: hardest, most blocking shape */
  border-radius: 1px;
}

.ed-verdict-pill[data-verdict="risky"] {
  color: var(--ed-sev-high-text);
  background: var(--ed-sev-high-bg);
  border-color: var(--ed-sev-high-rule);
}
.ed-verdict-pill[data-verdict="risky"] .ed-verdict-pill__shape {
  /* Triangle (bordered, not filled) */
  width: 0; height: 0;
  background: transparent;
  border-left: 0.36rem solid transparent;
  border-right: 0.36rem solid transparent;
  border-bottom: 0.62rem solid currentColor;
}

.ed-verdict-pill[data-verdict="warn"] {
  color: var(--ed-sev-medium-text);
  background: var(--ed-sev-medium-bg);
  border-color: var(--ed-sev-medium-rule);
}
.ed-verdict-pill[data-verdict="warn"] .ed-verdict-pill__shape {
  /* Circle */
  border-radius: 50%;
}

.ed-verdict-pill[data-verdict="safe"] {
  color: var(--ed-sev-pass-text);
  background: var(--ed-sev-pass-bg);
  border-color: var(--ed-sev-pass-rule);
}
.ed-verdict-pill[data-verdict="safe"] .ed-verdict-pill__shape {
  /* Tick */
  width: 0.7rem; height: 0.4rem;
  background: transparent;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: 25% 75%;
}

/* --- Per-document overall (3 states) ------------------------ */
.ed-verdict-pill[data-overall="pass"] {
  color: var(--ed-sev-pass-text);
  background: var(--ed-sev-pass-bg);
  border-color: var(--ed-sev-pass-rule);
}
.ed-verdict-pill[data-overall="pass"] .ed-verdict-pill__shape {
  width: 0.7rem; height: 0.4rem;
  background: transparent;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: 25% 75%;
}

.ed-verdict-pill[data-overall="review"] {
  color: var(--ed-sev-medium-text);
  background: var(--ed-sev-medium-bg);
  border-color: var(--ed-sev-medium-rule);
}
.ed-verdict-pill[data-overall="review"] .ed-verdict-pill__shape {
  border-radius: 50%;
}

.ed-verdict-pill[data-overall="fail"] {
  color: var(--ed-sev-blocker-text);
  background: var(--ed-sev-blocker-bg);
  border-color: var(--ed-sev-blocker-rule);
}
.ed-verdict-pill[data-overall="fail"] .ed-verdict-pill__shape {
  border-radius: 1px;
}

/* Larger sizing modifier, used inside the result card head */
.ed-verdict-pill--lg {
  padding: 0.5rem 0.95rem;
  font-size: 0.9375rem;
  gap: 0.65rem;
}
.ed-verdict-pill--lg .ed-verdict-pill__shape { width: 0.85rem; height: 0.85rem; }
.ed-verdict-pill--lg[data-verdict="risky"] .ed-verdict-pill__shape {
  width: 0; height: 0;
  border-left-width: 0.46rem;
  border-right-width: 0.46rem;
  border-bottom-width: 0.78rem;
}
.ed-verdict-pill--lg[data-verdict="safe"] .ed-verdict-pill__shape,
.ed-verdict-pill--lg[data-overall="pass"] .ed-verdict-pill__shape {
  width: 0.9rem; height: 0.55rem;
  border-left-width: 2.5px;
  border-bottom-width: 2.5px;
}

/* ============================================================
   IN-HOUSE BEM AMENDMENT (added 8 May 2026 by portal-claude)
   ============================================================
   Both reference pages (accessmitra-reference.html and
   font-auditor-reference.html) use BEM child names that were not
   defined elsewhere in this file. Defined here so the reference
   pages render as intended without per-tool placeholder CSS.

   This block was authored in-house, not by Claude Design, after
   the second Font Auditor round (8 May 2026) closed the verdict
   pill gap but left these names unaddressed.

   When Claude Design next touches this file, they should review
   this block and either:
     (a) endorse it (move comment into the canonical position),
     (b) refactor it (e.g. replace .ed-pointer__id with the
         existing .ed-pointer__card-num across both reference pages
         and update this file accordingly).
   ============================================================ */

.ed-pointer__id {
  display: block;
  font-family: var(--ed-font-mono);
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--ed-link-on-dark);
  letter-spacing: 0.04em;
  margin-bottom: var(--ed-space-2);
}
.ed-pointer__title {
  margin: 0 0 var(--ed-space-2);
  font-size: 1.0625rem;
  font-weight: 700;
  color: inherit;
}
.ed-pointer__body {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: none;
}

.ed-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--ed-space-4);
}

/* AccessMitra and AltBridge use .ed-toc as a vertical numbered card
   stack with an .ed-toc__num + .ed-toc__title + .ed-toc__body shape.
   The audit-bundle .ed-toc__card is a horizontal 3-column grid for
   "id title arrow" rows; we override its layout when used inside an
   <ol class="ed-toc"> with vertical-stack children. Font Auditor uses
   .ed-steps instead, which sidesteps this; so this override is opt-in
   (no impact on the audit-bundle TOC pattern).
*/
ol.ed-toc {
  background: transparent;
  border: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ed-space-4);
}
ol.ed-toc > .ed-toc__card {
  display: block;
  padding: var(--ed-space-5) var(--ed-space-6);
  background: var(--ed-bg);
  border: 1px solid var(--ed-border);
  border-radius: var(--ed-radius-2);
  box-shadow: var(--ed-shadow-card);
}
.ed-toc__num {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--ed-accent);
  color: #ffffff;
  font-family: var(--ed-font-mono);
  font-size: 1.25rem;
  font-weight: 800;
  border-radius: 50%;
  margin-bottom: var(--ed-space-3);
}
.ed-toc__title {
  margin: 0 0 var(--ed-space-2);
  font-size: var(--ed-fs-h3);
  font-weight: 700;
  line-height: 1.3;
}
.ed-toc__body {
  margin: 0;
  font-size: var(--ed-fs-small);
  line-height: 1.55;
  color: var(--ed-text-muted);
}

/* === END IN-HOUSE BEM AMENDMENT === */