/* Accessibility (WCAG 2.2 AA) fixes, loaded after site.css on every customer-facing layout. Kept out of site.css on
   purpose: a site.css change re-renders the ad videos. Audit: /tmp/pncs-ada-audit.md (2026-10-22).
   Light mode only where colours change: dark mode's own colours already pass. */

/* 1.4.3 Contrast: the brand green behind white button text (3.29:1 → 5.02:1), muted text (4.2:1 → 5.3:1), the sky
   blue used for small text (3.58:1 → 5.19:1) */
:root {
    --accent: #15803d;
    --accent-hover: #166534;   /* darker than the button (the old #12893e was lighter than #15803d, 4.49:1 under white) */
    --muted: #5b6875;
    --sky: #0369a1;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --accent: #22c55e; --muted: #8f9db3; --sky: #38bdf8; }
}
:root[data-theme="dark"] { --accent: #22c55e; --muted: #8f9db3; --sky: #38bdf8; }

/* Score band colours stay as they are for gauges and fills; text drawn in a band colour gets a darker shade */
:root:not([data-theme="dark"]) .score-pill,
:root:not([data-theme="dark"]) .rrow-avatar,
:root:not([data-theme="dark"]) .api-float b,
:root:not([data-theme="dark"]) [data-f="band"],
:root:not([data-theme="dark"]) .result-score strong,
:root:not([data-theme="dark"]) .report-score strong { color: color-mix(in srgb, var(--band, var(--muted)) 58%, #000); }
:root:not([data-theme="dark"]) .ptile .risk-label { color: color-mix(in srgb, var(--risk, var(--muted)) 62%, #000); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .score-pill,
    :root:not([data-theme="light"]) .rrow-avatar,
    :root:not([data-theme="light"]) .api-float b,
    :root:not([data-theme="light"]) [data-f="band"],
    :root:not([data-theme="light"]) .result-score strong,
    :root:not([data-theme="light"]) .report-score strong { color: var(--band, var(--muted)); }
    :root:not([data-theme="light"]) .ptile .risk-label { color: var(--risk); }
}

/* Faded text that fell under 4.5:1 */
.side-credits-num small, .tab-locked { opacity: 1; }
.tab-locked { color: var(--muted); }
.convo-card-meta, .answer-sample small, .stat small { color: var(--muted); }
:root[data-theme="light"] .status.s-paid, :root[data-theme="light"] .status.s-active { color: #2f7a4b; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .status.s-paid, :root:not([data-theme="dark"]) .status.s-active { color: #2f7a4b; } }
.leak-text strong { color: #fef08a; }   /* the Demo Mode banner (build only): yellow on red 4.22:1 → 5.56:1 */

/* 2.4.7 Focus visible: a ring on whatever has keyboard focus, including the fields that only changed a border */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--accent) !important;
    outline-offset: 2px !important;
}
:where(.search, .list-search, .blog-search, .ref-copy, .reveal-field, .code-share):focus-within {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
.search input:focus-visible, .list-search input:focus-visible, .blog-search input:focus-visible,
.ref-copy input:focus-visible, .reveal-field input:focus-visible, .code-share input:focus-visible { outline: none !important; }   /* the wrapper shows it */
.dropzone-target:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 2.5.8 Target size: checkboxes and radios at least 22px with room around them; small text buttons get height */
input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; margin: 2px; }
.link-button { display: inline-block; min-height: 24px; padding-block: 4px; line-height: 1.2; }

/* 2.1.1 Scrollable regions are focusable (site.js adds tabindex); show it when focused */
.table-wrap:focus-visible, .compare-wrap:focus-visible, .dash-table-wrap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 1.4.10 Reflow at 320px: the account header's tools fit */
@media (max-width: 360px) {
    .header-tools { gap: 6px; }
    .header-tools .account-chip-name { display: none; }
    .header-tools .btn-sm { padding-inline: 10px; }
}

/* 4.1.2 The maintenance notice's close button sits beside the <summary>, not inside it (portal_layout.php) */
.portal-maint-wrap { position: relative; }
.portal-maint-wrap + .portal-maint-wrap { margin-top: -12px; }
.portal-maint-wrap .portal-maint-head { padding-right: 60px; }
.portal-maint-close { position: absolute; top: 12px; right: 12px; }
@media (max-width: 560px) { .portal-maint-wrap .portal-maint-head { padding-right: 56px; } }

/* 1.4.10 Reflow at 320px: grids whose one column grew to its widest content now shrink to the screen */
.portal-main, .code-card { grid-template-columns: minmax(0, 1fr); }
.code-card-top, .portal-hello, .list-tools { min-width: 0; flex-wrap: wrap; }
.rrow-count { white-space: normal; }

/* The cookie choices' "Accept all" (consent.css): white on the brand green, light mode */
:root[data-theme="light"] .cc, :root[data-theme="light"] .cc-dialog { --cc-accent: #15803d; --cc-accent-hover: #166534; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .cc, :root:not([data-theme="dark"]) .cc-dialog { --cc-accent: #15803d; --cc-accent-hover: #166534; } }

/* 2.5.8 The inline "Change" buttons in lists get a full 24px row */
li > form > .link-button { vertical-align: middle; padding: 6px 4px; line-height: 1.2; }
li > form:has(> .link-button) { margin-left: 8px; }

/* 2.4.11 Focus not obscured: while the cookie choices sit at the bottom, keyboard focus scrolls clear of them */
html:has(.cc) { scroll-padding-bottom: 220px; }

/* Closed conversations were dimmed with opacity, which took their text under 4.5:1; they're marked by the
   "Closed" status instead */
.convo-card.is-closed { opacity: 1; }
:root[data-theme="light"] .convo-card.is-closed .status.s-paid, :root[data-theme="light"] .convo-card-go { color: #2f7a4b; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .convo-card-go { color: #2f7a4b; } }

/* Error messages in dark mode: #b91c1c on a dark card was under 3:1 (found 2026-10-24 on the login page) */
:root[data-theme="dark"] .form-error { color: #fecaca; background: rgba(248, 113, 113, 0.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-error { color: #fecaca; background: rgba(248, 113, 113, 0.16); } }