/* ==========================================================================
   a11y.css — Accessibility Checker tool chunk (Cluster: a11y)

   Loaded only on the latex-accessibility-checker / pdf-accessibility-checker
   pages (see inc/enqueue.php chunk map). Uses global tokens from style.css;
   the widget frame mirrors the .tool-card visual language from tools.css.
   UX model: PageSpeed Insights — one input, a score gauge, prioritized
   audits in collapsible rows.

   The tool itself must pass its own standards: status is shown by a DISTINCT
   SHAPE + color icon (never color alone) with a screen-reader status word,
   focus is visible, contrast is AA on all text, and [hidden] always wins.
   ========================================================================== */

/* Brand status palette (the only colors used for status/accent meaning).
   The bright hexes ride on non-text objects (rings, status icons, dots) where
   the WCAG bar is 3:1; any status-colored TEXT uses the darker *-text shades
   so it clears 4.5:1 AA on white or on its tint. */
.a11y-widget {
  --a11y-pass:  #3D9B70;
  --a11y-fail:  #D94F4F;
  --a11y-warn:  #F4923A;
  --a11y-info:  #3B82F6;
  --a11y-pass-text:  #1A5A3A;
  --a11y-warn-text:  #6A5A1A;
  --a11y-fail-text:  #B3362E;
  --a11y-pass-ring:  var(--a11y-pass);
  --a11y-warn-ring:  var(--a11y-warn);
  --a11y-fail-ring:  var(--a11y-fail);
}

[hidden] { display: none !important; }

/* --- Hero typography (all checker pages) ---------------------------------
   Match the pricing page's H1 scale/weight (clamp 2rem..2.75rem, 600) instead
   of the global marketing hero (2.4..3.2rem, 800): these pages should read as
   a technical tool, not a landing page. Tag and sub scale down with it. */
.hero--a11y h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
}
.hero--a11y .hero-tag { font-size: clamp(.9rem, 1.6vw, 1.1rem); }
.hero--a11y .hero-sub { font-size: .94rem; max-width: 640px; }

/* --- Widget shell (sits inside .hero like the latexdiff widget) --------- */
.a11y-widget { padding: 40px 20px 56px; position: relative; z-index: 5; }
.a11y-widget__inner { max-width: 1010px; margin: 0 auto; }

/* --- Upload card --------------------------------------------------------- */
.a11y-drop {
  background: var(--color-bg, #fff);
  border: 2px dashed var(--color-border, #D4CCBD);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-card, 0 8px 32px rgba(0,0,0,.07));
  padding: 44px 28px;
  text-align: center;
  cursor: pointer;
}
.a11y-drop.is-dragover {
  border-color: var(--color-accent, #BF6438);
  background: var(--color-accent-tint, #FEF0E7);
}
.a11y-drop__icon { display: block; color: var(--color-accent, #BF6438); margin: 0 auto 10px; width: 46px; }
.a11y-drop__icon svg { display: block; }
.a11y-drop__title { font-weight: 600; margin: 0 0 4px; font-size: 1.05rem; }
.a11y-drop__file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.a11y-drop__label { display: inline; }
.a11y-drop__browse {
  color: var(--color-accent, #BF6438); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; font-weight: 600;
}
.a11y-drop__label:focus-within .a11y-drop__browse {
  outline: 3px solid var(--color-accent, #BF6438); outline-offset: 3px; border-radius: 3px;
}
.a11y-drop__name { margin: 14px 0 0; color: var(--color-text-muted, #5C5B56); font-size: .95rem; }
.a11y-drop__formats { margin: 6px 0 0; color: var(--color-text-muted, #5C5B56); font-size: .85rem; }

/* Consent checkbox — required before the scan button enables. */
.a11y-consent {
  display: flex; gap: 10px; align-items: flex-start;
  max-width: 62ch; margin: 18px auto 0; text-align: left;
  color: var(--color-text-muted, #5C5B56); font-size: .92rem; cursor: pointer;
}
.a11y-consent__box { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-accent, #BF6438); cursor: pointer; }
.a11y-consent__text { line-height: 1.5; }

.a11y-controls { margin-top: 16px; text-align: center; }
.a11y-scan-btn[disabled],
.a11y-scan-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* --- Progress / error ---------------------------------------------------- */
.a11y-progress { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0 0; }
.a11y-progress__spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--color-border-subtle, #E8E6E0);
  border-top-color: var(--color-accent, #BF6438);
  animation: a11y-spin .9s linear infinite;
}
@keyframes a11y-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .a11y-progress__spinner { animation: none; } }
.a11y-error {
  margin: 18px 0 0; padding: 14px 18px;
  background: #FDF0EF; border: 1px solid var(--color-error, #D94F4F);
  color: var(--a11y-fail-text, #B3362E); border-radius: var(--radius-md, 12px);
}

/* --- Report panel (calm, spacious; PageSpeed-like pacing) ---------------- */
.a11y-report {
  margin-top: 30px; text-align: left;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-subtle, #E8E6E0);
  border-radius: var(--radius-lg, 20px);
  padding: 44px 48px 48px;
  font-size: 14px; line-height: 1.6;
}
@media (max-width: 640px) { .a11y-report { padding: 26px 18px 30px; } }

.a11y-report__back { display: inline-flex; margin-bottom: 22px; }
/* Modest centered caption above the score; the score + CTA are the focal
   point. Kept as an h2 focus target / SR landmark on completion. */
.a11y-report__title {
  font-family: var(--font-display, inherit);
  font-size: 15px; font-weight: 700; text-align: center;
  margin: 0 0 4px; outline: none; color: var(--color-text, #141413);
}
.a11y-report__title:focus-visible { outline: 3px solid var(--color-accent, #BF6438); outline-offset: 3px; border-radius: 4px; }
/* Section labels: small, upper, muted — the Lighthouse audit-group style. */
.a11y-report h3 {
  font-family: var(--font-sans, inherit);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-text-muted, #5C5B56);
  margin: 0 0 16px;
}

/* Score header: big centered gauge with concise meta stacked below (the
   report's focal point, PageSpeed-style). */
.a11y-scorehead {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; margin: 4px 0 0; padding-bottom: 4px;
}

/* Generous single-line dividers between report sections (PageSpeed pacing:
   no boxes, a thin rule with breathing room either side). Hidden sections are
   display:none so they contribute no stray borders; the first visible section's
   top border reads as the divider under the score + CTA block. */
.a11y-report__body > section {
  border-top: 1px solid var(--color-border-subtle, #E8E6E0);
  padding-top: 30px; margin-top: 30px;
}
.a11y-gauge { width: 152px; }
.a11y-gauge svg { width: 100%; height: auto; display: block; }
.a11y-gauge__bg { fill: none; stroke: var(--color-border-subtle, #E8E6E0); stroke-width: 8; }
.a11y-gauge__fg {
  fill: none; stroke-width: 8; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 60px 60px;
  stroke-dasharray: 326.7;
}
.a11y-gauge__num { font-size: 40px; font-weight: 800; fill: var(--color-text, #141413); }
.a11y-gauge__grade { font-size: 13px; font-weight: 700; fill: var(--color-text-muted, #5C5B56); }
.a11y-scorehead__meta { max-width: 64ch; }
.a11y-scorehead__mode { font-weight: 700; font-size: 15px; margin: 0 0 5px; color: var(--color-text, #141413); }
.a11y-scorehead__det { color: var(--color-text-muted, #5C5B56); margin: 0; font-size: 12.5px; line-height: 1.55; }

/* "Fix these first" — a prioritized checklist: each item gets a numbered
   circular badge, a bold action with its point impact and responsibility chip,
   then a how-to hint below. */
.a11y-fixes { list-style: none; counter-reset: a11yfix; padding: 0; margin: 4px 0 0; display: grid; gap: 20px; }
.a11y-fixes li {
  counter-increment: a11yfix; position: relative;
  padding-left: 44px; max-width: 84ch;
}
.a11y-fixes li::before {
  content: counter(a11yfix); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-accent-tint, #FEF0E7); color: var(--color-accent-strong, #8A3A1A);
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.a11y-fixes__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.a11y-fixes__what { font-weight: 700; color: var(--color-text, #141413); }
.a11y-fixes__impact { color: var(--a11y-pass-text); font-weight: 800; white-space: nowrap; font-size: 12.5px; }
.a11y-fixes__hint { display: block; color: var(--color-text-muted, #5C5B56); font-size: 12.5px; margin-top: 6px; line-height: 1.55; }
.a11y-fixes__layer {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  background: var(--color-bg-sand, #F9F8F5); border: 1px solid var(--color-border-subtle, #E8E6E0);
  border-radius: var(--radius-pill, 40px); padding: 1px 9px;
  color: var(--color-text-muted, #5C5B56); vertical-align: middle;
}

/* Math note (informational: brand info blue on a light tint) */
.a11y-mathnote {
  background: #EFF4FF;
  border-left: 3px solid var(--a11y-info, #3B82F6);
  padding: 14px 16px; border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
  max-width: 82ch; font-size: 13px;
}

/* "Whose job is it?" — the split score as three small circular gauges (mini
   score rings) with a name and a one-line "whose job" description. No boxes. */
.a11y-layers__intro { color: var(--color-text-muted, #5C5B56); font-size: 13px; max-width: 84ch; margin: -6px 0 22px; line-height: 1.55; }
.a11y-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.a11y-layers__card { background: transparent; padding: 4px 6px; text-align: center; }
.a11y-mini { width: 88px; margin: 0 auto 12px; }
.a11y-mini svg { width: 100%; height: auto; display: block; }
.a11y-mini__bg { fill: none; stroke: var(--color-border-subtle, #E8E6E0); stroke-width: 9; }
.a11y-mini__fg {
  fill: none; stroke-width: 9; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 60px 60px; stroke-dasharray: 326.7;
}
.a11y-mini__num { font-size: 36px; font-weight: 800; fill: var(--color-text, #141413); }
.a11y-layers__card h4 { margin: 0 0 5px; font-size: 13px; }
.a11y-layers__desc { color: var(--color-text-muted, #5C5B56); font-size: 12px; margin: 0; line-height: 1.5; }

/* Check rows (calm audit rows): flat, a thin divider between items, roomy
   vertical rhythm. Status is a distinct-shape icon (not a pill), with an
   SR-only status word carried in the row for assistive tech. */
.a11y-checks { display: grid; gap: 0; }
.a11y-check {
  border: none; border-bottom: 1px solid var(--color-border-subtle, #E8E6E0);
  border-radius: 0; background: transparent;
}
.a11y-check:last-child { border-bottom: none; }
.a11y-check summary {
  display: flex; align-items: center; gap: 13px; padding: 14px 4px;
  cursor: pointer; list-style: none; font-size: 14px;
}
.a11y-check summary::-webkit-details-marker { display: none; }
.a11y-check summary:hover .a11y-check__summary { color: var(--color-accent, #BF6438); }

/* Status icon: distinct SHAPE per outcome (triangle=fail, diamond=warning,
   disc=pass, ring=review, dash=n/a), colored with the brand palette. The
   shape is the non-color cue, so meaning never rests on color alone. */
.a11y-status { width: 17px; height: 17px; flex-shrink: 0; display: inline-flex; }
.a11y-status svg { width: 100%; height: 100%; display: block; }
.a11y-status--pass { color: var(--a11y-pass); }
.a11y-status--fail { color: var(--a11y-fail); }
.a11y-status--warning { color: var(--a11y-warn); }
.a11y-status--info { color: var(--a11y-info); }
.a11y-status--neutral { color: var(--color-text-muted, #5C5B56); }

.a11y-check__id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-text-muted, #5C5B56); font-size: 11px; opacity: .75; }
.a11y-check__summary { flex: 1; color: var(--color-text, #141413); }
.a11y-check__body { padding: 0 4px 18px 34px; font-size: 13px; }
.a11y-check__conf { display: block; color: var(--color-text-muted, #5C5B56); font-size: 11.5px; margin-top: 10px; }
.a11y-finding { margin-top: 12px; }
.a11y-finding__title { font-weight: 600; margin: 0; }
.a11y-finding__detail { margin: 4px 0 0; color: var(--color-text-muted, #5C5B56); max-width: 80ch; }
.a11y-finding__hint { margin: 6px 0 0; max-width: 80ch; }
.a11y-finding__hint strong { color: var(--a11y-pass-text); }
.a11y-finding__improve { margin: 6px 0 0; color: var(--color-text-muted, #5C5B56); font-style: italic; max-width: 76ch; }
.a11y-wcag { color: var(--color-text-muted, #5C5B56); font-size: 11.5px; margin-top: 6px; }

/* Notes, share-link result, disclaimer */
.a11y-notes { color: var(--color-text-muted, #5C5B56); display: grid; gap: 8px; max-width: 84ch; padding-left: 20px; list-style: disc; font-size: 13px; }
/* Long "N extra documents" note: the file list is tucked into a dropdown so it
   no longer floods the report. */
.a11y-note-files { margin: 6px 0; }
.a11y-note-files__summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--color-accent, #BF6438); font-weight: 600; }
.a11y-note-files__summary::-webkit-details-marker { display: none; }
.a11y-note-files__list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; list-style: disc; overflow-wrap: anywhere; }
.a11y-note-files__tail { display: block; margin-top: 8px; }
/* Share-link output lives under the CTA buttons; left-aligned to match. */
.a11y-share__result { max-width: 76ch; overflow-wrap: anywhere; margin: 16px 0 0; font-size: 12.5px; text-align: left; color: var(--color-text-muted, #5C5B56); }
.a11y-disclaimer {
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--color-border-subtle, #E8E6E0);
  color: var(--color-text-muted, #5C5B56); font-size: 12px; max-width: 88ch; line-height: 1.6;
}

/* Context-aware conversion block: sits just above the disclaimer, left-aligned
   with the rest of the report (no box). The statement runs the full width so it
   fits on ~2 lines, then the three buttons sit left-aligned on the next line.
   A full-width divider above it separates it from the report body. */
.a11y-cta {
  border-top: 1px solid var(--color-border-subtle, #E8E6E0);
  margin-top: 30px; padding-top: 34px; text-align: left;
}
.a11y-cta__text {
  margin: 0 0 20px; max-width: none;
  font-family: var(--font-display, inherit);
  font-weight: 700; font-size: 17px; line-height: 1.45;
  color: var(--color-text, #141413);
}
.a11y-cta__actions { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }

/* Category summary rows (flat, thin dividers; a PageSpeed-style count pill). */
.a11y-catrows { display: grid; gap: 0; margin-top: 2px; }
.a11y-catrow {
  display: flex; align-items: center; gap: 12px; padding: 13px 4px;
  border-top: 1px solid var(--color-border-subtle, #E8E6E0); font-size: 14px;
}
.a11y-catrow:first-child { border-top: none; padding-top: 2px; }
.a11y-catrow__name { font-weight: 600; flex: 1; color: var(--color-text, #141413); }
/* Count pill: dot + "pass/applicable" ratio, tinted by category status. */
.a11y-catrow__pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 12px; border-radius: var(--radius-pill, 40px);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.a11y-catrow__pill--pass { color: var(--a11y-pass-text); background: var(--color-green-tint, #EDFBF1); }
.a11y-catrow__pill--fail { color: var(--a11y-fail-text); background: #FDF0EF; }
.a11y-catrow__pill--warn { color: var(--a11y-warn-text); background: var(--color-yellow-tint, #FEF9E7); }
.a11y-catrow__pill--neutral { color: var(--color-text-muted, #5C5B56); background: var(--color-bg-subtle, #FAFAFA); }
.a11y-catrow__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.a11y-catrow__pill--pass .a11y-catrow__dot { background: var(--a11y-pass); }
.a11y-catrow__pill--fail .a11y-catrow__dot { background: var(--a11y-fail); }
.a11y-catrow__pill--warn .a11y-catrow__dot { background: var(--a11y-warn); }
.a11y-catrow__pill--neutral .a11y-catrow__dot { background: var(--color-text-muted, #5C5B56); }

/* Chevron on expandable rows (rotates when open) */
.a11y-check__chev { margin-left: auto; width: 12px; height: 12px; flex-shrink: 0; position: relative; }
.a11y-check__chev::before {
  content: ""; position: absolute; top: 1px; left: 2px;
  width: 7px; height: 7px; border-right: 2px solid var(--color-text-muted, #5C5B56);
  border-bottom: 2px solid var(--color-text-muted, #5C5B56);
  transform: rotate(45deg); transition: transform .15s ease;
}
@media (prefers-reduced-motion: reduce) { .a11y-check__chev::before { transition: none; } }
details[open] > summary .a11y-check__chev::before { transform: rotate(-135deg); top: 4px; }

.a11y-checks__none {
  display: flex; gap: 11px; align-items: flex-start;
  color: var(--a11y-pass-text); padding: 12px 4px 2px; margin: 0;
  max-width: 82ch; font-size: 13px;
}
.a11y-checks__none .a11y-status { margin-top: 1px; }

/* Collapsed clump groups (Passed / Not applicable / Manual review): flat rows
   with a thin divider, matching the check rows they sit among. Labels are
   uppercased to read as the same tier as the section labels. */
.a11y-clump {
  border: none; border-bottom: 1px solid var(--color-border-subtle, #E8E6E0);
  border-radius: 0; background: transparent;
}
.a11y-clump:last-child { border-bottom: none; }
.a11y-clump__summary {
  display: flex; align-items: center; gap: 13px; padding: 14px 4px;
  cursor: pointer; list-style: none; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}
.a11y-clump__summary::-webkit-details-marker { display: none; }
.a11y-clump__summary:hover .a11y-clump__label { color: var(--color-accent, #BF6438); }
.a11y-clump__label { color: var(--color-text-muted, #5C5B56); }
.a11y-clump__label--pass { color: var(--a11y-pass-text, #1A5A3A); }
.a11y-clump__summary:hover .a11y-clump__label--pass { color: var(--a11y-pass); }
.a11y-clump__body { padding: 2px 0 12px 30px; display: grid; gap: 0; }

/* Report credit line */
.a11y-credit {
  margin-top: 12px; color: var(--color-text-muted, #5C5B56); font-size: 12px;
}
.a11y-credit a { color: var(--color-accent, #BF6438); }

/* Spacing between the below-widget info cards. The `.tool-tiers` flex-column
   gap lives in tools.css, which does not load on the checker pages (only the
   a11y chunk does), so restate it here to keep the three cards from touching. */
.delivery-section .tool-tiers { display: flex; flex-direction: column; gap: 24px; }

/* The global .delivery-section__sub caps at max-width:540px (a readable
   measure on the pricing/service pages). On the checker pages the sub sits
   above a full-width two-column features grid, so the narrow cap reads as a
   stray left column under a full-width heading. .delivery-section h2 has no
   max-width of its own (it just fills the section) — match that instead of
   picking an arbitrary cap. */
.delivery-section .delivery-section__sub { max-width: none; }

/* ==========================================================================
   Print / "Download Report" -> browser "Save as PDF". Triggered by
   window.print() with body.a11y-printing set: shows only the report content
   (no page chrome, no interactive CTA), with all detail expanded and sensible
   page breaks. The JS opens every <details> before printing.
   ========================================================================== */
@media print {
  body.a11y-printing .site-header,
  body.a11y-printing .site-footer,
  body.a11y-printing .wa-sticky,
  body.a11y-printing .hero__stack,
  body.a11y-printing .a11y-upload,
  body.a11y-printing .a11y-report__back,
  body.a11y-printing .a11y-cta,
  body.a11y-printing .divider-grid,
  body.a11y-printing .divider,
  body.a11y-printing .delivery-section,
  body.a11y-printing .cta-band,
  body.a11y-printing .a11y-check__chev,
  body.a11y-printing .a11y-note-files__summary { display: none !important; }

  body.a11y-printing .hero--tool,
  body.a11y-printing .a11y-widget,
  body.a11y-printing .a11y-widget__inner { padding: 0 !important; margin: 0 !important; }

  body.a11y-printing .a11y-report {
    border: none !important; margin: 0 !important; padding: 0 !important;
  }
  /* Force collapsed detail open for the export. */
  body.a11y-printing .a11y-check__body,
  body.a11y-printing .a11y-clump__body,
  body.a11y-printing .a11y-note-files__list { display: block !important; }
  /* Avoid splitting a unit across pages. */
  body.a11y-printing .a11y-check,
  body.a11y-printing .a11y-catrow,
  body.a11y-printing .a11y-layers__card,
  body.a11y-printing .a11y-fixes li { break-inside: avoid; }
  body.a11y-printing .a11y-report h3 { break-after: avoid; }
  body.a11y-printing .a11y-credit { break-before: avoid; }
}