/* Readability fixes, Oct 10 2026: every High item in 03_Website/readability-audit-oct2026 (WCAG 2.2 AA contrast).
   build_prod.py links this LAST in every page's <head>, so it wins over page styles; !important beats inline styles.
   Rules of thumb kept here:
   - In light mode the brand red is too light for TEXT on white (2.95:1). Wherever red is text, light mode uses
     #C8381B (5.2:1). Buttons and fills keep the bright #FF6343. Dark mode keeps the bright red everywhere (6.4:1).
   - Red buttons carry near-black text (#14100E), the site rule since Sep 3; white or teal on red fails.
   - Footer and small print use real greys, not 20%-ink. */

:root:not([data-theme="dark"]) {
  --yellow-text: #7A5F00;             /* gold links and labels on white: was #A98508 (2.95:1), now 6:1 */
  --teal-text: #00736D;               /* teal links on cream: was #00847D (4.2:1), now 5.2:1 */
}

/* 1. Footer: links and the small print (were 20-35% ink, 1.6-2.7:1) */
.footer-col a { color: rgba(var(--ink-rgb), 0.72) !important; }
.footer-bottom p, .footer-bottom a { color: rgba(var(--ink-rgb), 0.62) !important; }
:root:not([data-theme="dark"]) .footer-login { color: #C8381B !important; }

/* 2. Red as text, light mode only. Inline styles are matched only where "color" starts a declaration, so a red
      background ("background-color:var(--red)") is never touched. */
:root:not([data-theme="dark"]) :is(
  .btn-outline, .tag-newsreel, .thanks-kicker, .tear-go, .post-more, .act-tool.paid, .bar-val, .chapter-name,
  .dl-eyebrow, .dl-title .accent, .merch-eyebrow, .merch-ship,
  [style^="color:var(--red)"], [style^="color: var(--red)"], [style*=";color:var(--red)"], [style*="; color:var(--red)"]
) { color: #C8381B !important; }
:root:not([data-theme="dark"]) .btn-outline { border-color: rgba(200, 56, 27, 0.55) !important; }
/* ...except the Academy's Apply button, which is a red-filled button with near-black text (keep it as designed) */
:root:not([data-theme="dark"]) .nav .btn-outline:is(.js-apply, [href="#apply"], [href="/academy/apply/"]) { color: #14100E !important; border-color: #14100E !important; }
/* purple as text, light mode: was 2.9-3.1:1 */
:root:not([data-theme="dark"]) :is(.feature-tag, [style^="color:var(--purple)"], [style*=";color:var(--purple)"], [style*="; color:var(--purple)"]) { color: #7A2FB8 !important; }

/* 3. Red buttons: near-black text (white on red was 2.95:1; the Top 100 button was teal on red, 1.25:1) */
.btn.btn-primary, .btn-primary, .classroom-capture button { color: #14100E !important; }

/* 4. Faint greys */
.ab26 .stop { opacity: 0.88 !important; }            /* About timeline: stops waiting their turn were 55% */
.ab26 .stop .tx { color: #a6a6a6 !important; }
.press-count, .marquee-label, .pres-foot, .ds-fine, .merch-more,
[style*="color:rgba(var(--ink-rgb),.4)"], [style*="color:rgba(var(--ink-rgb),.3)"] { color: rgba(var(--ink-rgb), 0.62) !important; }
.inst-row span { color: rgba(var(--ink-rgb), 0.7) !important; }

/* ---- Oct 10 2026, round 2: the Medium and Low items (03_Website/readability-audit-oct2026/v2) ---- */

/* 5. Forms. Placeholders at 68% of the field's own text colour (were 2.6-4.4:1); field borders at 55% of it, so an
      empty field can be found on the page (WCAG 1.4.11, 3:1; several were 1.3-2.5:1). A focused field keeps its own colour. */
input::placeholder, textarea::placeholder { color: inherit !important; color: color-mix(in srgb, currentColor 68%, transparent) !important; opacity: 1 !important; }
:is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="range"], [type="color"]), select, textarea):not(:focus) {
  border-color: color-mix(in srgb, currentColor 55%, transparent) !important;
}
select:not(:focus):not([data-keep-border]) { border-color: color-mix(in srgb, var(--text, currentColor) 55%, transparent) !important; }   /* a select shows its prompt in grey */

/* 6. Links inside running text are underlined, not told apart by colour alone (WCAG 1.4.1) */
p a:not([class*="btn"]):not(nav a):not(footer a):not(.footer a) { text-decoration-line: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* 7. Bars that text scrolls under are near-solid: the Academy's cream bar (82%) and the old Cooked page's gradient */
:root:not([data-theme="dark"]):is(:has(.mast), :has(link[href^="/css/academy.css"])) { --nav-bg: rgba(250, 247, 242, 0.95); }
.c-nav { background: rgba(10, 10, 10, 0.92) !important; }
.c-hero { overflow-x: clip; }   /* Cooked: the floating post images ran 70px past the right edge (sideways scroll) */

/* 8. Greys at 45-50% ink and two reds (3.0-4.5:1) */
:is(.shot-caption, .proof-as-seen, .lib-quote-cite span, .merch-secure, .thanks-creds dt) { color: rgba(var(--ink-rgb), 0.66) !important; }
:root:not([data-theme="dark"]) :is(.baby-toggle, .bio-toggle) { color: #555 !important; }
.page > .masthead .tag { color: #5c5c5c !important; }                                   /* admin brief: a white page in both themes */
body:has(.detail-row) :is(.chap .t, .detail-row .label, .cta-section .cta-note) { color: #5F5C59 !important; }   /* acceptance letter: cream in both themes */
[data-theme="dark"]:has(.mast):not(:has(.detail-row)) :is(.mast .m2, .facts span[style*="C2411C"]) { color: #FF7A5C !important; }
.ev-who span { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }                            /* events: a speaker's outlet over the photo */

/* Sections 9-12 change sizes and line lengths: screens only, so printed pages (the one-page admin brief) keep their print layout. */
@media screen {

/* 9. Nothing under 12px: labels, kickers, tags, captions and table heads that were 9-11.5px. :where() keeps this at zero
      specificity, so the body-text sizes below win where both match. */
:where(
  .tool-tags .tag, .mast .m1, .mast .m2, .mast .vol, .fact-row .k, .ii-head,
  .advisors-label, .chart-kicker, .tear-kicker, .tear-fig, .prog-kicker, .page > .masthead .tag, .level-bar .mono-sm,
  .card h3 .feature-tag, .shot-frame > div > span, .article-hero figcaption, .story-media figcaption, .story-kicker,
  .bar-hint, #story-text h4, .metric span, .qp-label, .poll-btn, #disc-count, .tn .clock,
  .library-demo-label, .ev-chip, .mlt-eyebrow, .mlt-eyebrow a, .mlt-body thead th, .mlt-body .step-num,
  .chap .t, .thanks-kicker,
  .namle-badge p.mono, .form-group label, .detail-row .label, .team-col .team-role,
  .timeline-num, .money-row .k, .ai-eyebrow, .blog-eyebrow, .post-kicker, .act-tool, .rk-label:not(.rk-note), .rk-crumb a,
  .rk-chip, .rk-sortbtn, .rk-table th, th.c-person, .rk-tag, .rk-mp, .rk-mp b, .role-meta, .af-group label,
  .e-section-eyebrow, .marquee-label, .chart-caption span, .pres-credit, #pres-count, a.fineprint,
  .ev-meta span, body:has(.ev-series) .body > .d, .ev-kicker, body:has(.ev-series) .logos > b, .c-log-label, .c-timeline-meridiem, .c-timeline-note,
  .c-tier-label, .thanks-creds dt, .baby-toggle, .bio-toggle, .c-nav-rsvp
) { font-size: 12px !important; }
/* inline sizes under 12px ("Last updated" lines, demo-window titles) */
:where([style*="font-size:9px"], [style*="font-size:9.5px"], [style*="font-size:10px"], [style*="font-size:10.5px"], [style*="font-size:11px"], [style*="font-size:11.5px"],
  [style*="font-size: 9px"], [style*="font-size: 10px"], [style*="font-size: 10.5px"], [style*="font-size: 11px"], [style*="font-size: 11.5px"]) { font-size: 12px !important; }
html:is(:has(.mast), :has(link[href^="/css/academy.css"])):not(:has(.detail-row)) :is(.nav-inner .nav-links a, .nav-actions .btn-outline) { font-size: 12px !important; }   /* Academy menu (11.5px) */
@media (max-width: 600px) { :is(.hero-strip .facts span, .issue-index a span) { font-size: 12px !important; } }   /* 13px on desktop already */
span.library-demo-label { font-size: 12px !important; letter-spacing: .5px !important; }   /* the page forces 9px on phones */

/* 10. Body text: 15px and up on desktop, 16px on phones (was 13-15.5px) */
p.body-medium, .namle-badge p:not(.mono), .team-col > p:not(.team-role), .rk-finding p, p.rk-bio, .tn-grid .tn > p,
body:has(.ev-series) .body > p, .c-panelist-bio, .sff-more p { font-size: 15px !important; }
/* fine print that runs to a full sentence or two is body text too */
.cta-section .cta-note, .colophon .fine, p.rk-note, .page:has(> .masthead) .full > p.proof, .pres-foot { font-size: 15px !important; }
.page:has(> .masthead) > p, .page:has(> .masthead) .grid > div > p:not(.proof) { font-size: 15px !important; }   /* admin brief */
@media (max-width: 600px) {
  p.body-medium, .namle-badge p:not(.mono), .team-col > p:not(.team-role), .rk-finding p, p.rk-bio, .tn-grid .tn > p,
  body:has(.ev-series) .body > p, .c-panelist-bio, .sff-more p, .page:has(> .masthead) > p, .page:has(> .masthead) .grid > div > p:not(.proof),
  .section.legal p, .section.legal li, .outcome > p, .tear-note, .careers-list li > p, .af-note, .careers-note p,
  .rk-capbox p, .pilot-chart > p, #pres-body p, .ev-card > p, .thanks-note, body:has(.fastext) #top p.lead,
  .cta-section .cta-note, .colophon .fine, p.rk-note, .page:has(> .masthead) .full > p.proof, .pres-foot { font-size: 16px !important; }
}

/* 11. Line length: under ~90 characters */
.section.legal p, .section.legal li { font-size: 16px !important; }
.section.legal > :is(h2, p) { max-width: 760px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.mlt-wrap { max-width: 800px !important; }
:is(.step-row > p, .faq-item > p, .cta-section .cta-note, .colophon .fine, .rk-note, .page:has(> .masthead) > p, .page:has(> .masthead) .full > p,
  .pres-foot, .outcome > p, .callout > p, .post-dek, .kit-form-lede) { max-width: 44em; }
:is(.cta-section .cta-note, .colophon .fine, .pres-foot) { margin-left: auto; margin-right: auto; }
.cta-section .cta-note { line-height: 1.5 !important; }
figure.pull-quote blockquote p, .qp-card .qp-q { line-height: 1.42 !important; }

/* 12. The Academy chart (an SVG 720 units wide): axis labels at 12px as drawn, not 10px of a scaled-down picture.
       On phones the chart is 342px wide, so labels need 25.5 units; every third month is kept so they fit. */
.chart svg :is(.cm, .cpm) { font-size: 14px !important; }
.chart-container svg text { font-size: 14.5px !important; }     /* libraries growth chart, 800 units wide */
/* ...drawn in white for a dark card: in light mode its title was white on white (1.04:1) and its labels 3.4:1 */
:root:not([data-theme="dark"]) .chart-container svg text[fill="#fff"] { fill: #111 !important; }
:root:not([data-theme="dark"]) .chart-container svg text[fill="#898989"] { fill: #5c5c5c !important; }
:root:not([data-theme="dark"]) .chart-container svg line { stroke: rgba(17, 17, 17, 0.14) !important; }
@media (max-width: 900px) { .chart-container svg text { font-size: 20px !important; } }
@media (max-width: 600px) { .chart-container svg text { font-size: 38px !important; } }   /* drawn 252px wide on a phone */
[data-theme="dark"] .chart svg :is(.cm, .cpm) { fill: #A89C92 !important; }   /* the light-mode grey was 3.8:1 on black */
[data-theme="dark"] .chart svg .cp { fill: #FF7A5C !important; }               /* the peak's dark red was 3.95:1 on black */
@media (max-width: 600px) {
  .chart svg { overflow: visible; }
  .chart svg :is(.cm, .cpm) { font-size: 25.5px !important; }
  .chart svg .cm:is([x="85"], [x="139"], [x="247"], [x="301"], [x="409"], [x="463"], [x="571"], [x="625"]) { display: none; }
  .chart svg .cpm { transform: translate(-30px, 20px); }
}

}   /* @media screen */