/* theme-light-supplements.css - NIGHT_85C T5.
 *
 * Light-theme paint fixes the GENERATED theme-light.css (the Tailwind-utility
 * override layer) cannot reach:
 *   (1) the site watermark SVG tiles (a white-filled background-image),
 *   (2) hero `bg-clip-text` gradient headings,
 *   (3) component-CSS badges that HARDCODE dark-theme hue colors, or set color
 *       via an INLINE style (sparkline.js) that only !important can override.
 *
 * Every selector is scoped `[data-theme="light"]`, so dark (the DEFAULT) is
 * byte-identical. Loaded AFTER theme-light.css (base.html) so equal-specificity
 * rules win the cascade; `!important` is used ONLY where it must beat an inline
 * style (sparkline) or a same-specificity component rule (badges).
 */

/* ---- (1) Watermark tiles ---------------------------------------------------
 * static/img/watermark-tile.svg is fill="#ffffff" (tuned for the dark surface),
 * so at opacity 0.04 it is invisible on a light page. Invert to dark + a hair
 * more alpha so it reads in screenshots (same faint weight, opposite polarity). */
[data-theme="light"] .data-watermark {
  filter: invert(1);
  opacity: 0.05;
}

/* ---- (2) Hero gradient HEADINGS --------------------------------------------
 * `text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-500`
 * clips a too-light gradient onto a light page. Darken the stops to
 * green-700 -> emerald-700. SCOPED to `.text-transparent.bg-clip-text` so the
 * SHARED gradient utility on solid CTA buttons (dark text on the gradient FILL)
 * is NOT darkened (that would break their dark text). */
[data-theme="light"] .text-transparent.bg-clip-text.from-green-400.to-emerald-500 {
  background-image: linear-gradient(to right, #15803d, #047857);
  -webkit-background-clip: text;
          background-clip: text;
}

/* ---- (3a) Percentile badges -----------------------------------------------
 * percentile-badge.css HARDCODES the dark-theme hue (e.g. color:#ef4444) which
 * fails AA on the pale light tint. Darken the band text to hue-700/800; the
 * <small> percent child (no own color) inherits. */
[data-theme="light"] .percentile-badge--bottom-quartile { color: #b91c1c !important; }  /* red-700 */
[data-theme="light"] .percentile-badge--below-median    { color: #c2410c !important; }  /* orange-700 */
[data-theme="light"] .percentile-badge--above-median    { color: #854d0e !important; }  /* yellow-800 */
[data-theme="light"] .percentile-badge--top-quartile    { color: #15803d !important; }  /* green-700 */
[data-theme="light"] .percentile-badge--none            { color: #525252 !important; }  /* neutral-600 */

/* ---- (3b) Accountability A-F badges ---------------------------------------
 * accountability-badge.css hardcodes hue-600. __grade + __score children inherit
 * (accountability-badge--none already reads var(--color-text-tertiary), fixed in T3). */
[data-theme="light"] .accountability-badge--a { color: #166534 !important; }  /* green-800 (the __score sub-label on the green-600@14% tint needs 800 for AA) */
[data-theme="light"] .accountability-badge--b { color: #3f6212 !important; }  /* lime-800 */
[data-theme="light"] .accountability-badge--c { color: #854d0e !important; }  /* yellow-800 */
[data-theme="light"] .accountability-badge--d { color: #9a3412 !important; }  /* orange-800 */
[data-theme="light"] .accountability-badge--f { color: #b91c1c !important; }  /* red-700 */

/* ---- (3c) Sparkline trend label -------------------------------------------
 * sparkline.js sets `.sparkline-trend` color via an INLINE style (bright
 * green/red/gray tuned for the dark card) which persists after theme toggle and
 * only !important can beat. The up/down/flat glyph carries direction, so one
 * dark neutral keeps meaning while clearing AA. The SVG trend LINE keeps its hue
 * (not a text node). */
[data-theme="light"] .sparkline-trend { color: #404040 !important; }  /* neutral-700 */

/* ---- (3d) Data-source footer brand ----------------------------------------
 * attribution.css var(--accent-green,#4ade80) = green-400, too light on white. */
[data-theme="light"] .data-source-footer .source-brand { color: #15803d !important; }  /* green-700 */

/* ---- (3e) Chart container box + blog chart placeholder --------------------
 * aggregate-chart.css [data-chart] hardcodes a dark box (background
 * rgba(13,13,26,0.5) + dark border) that does not flip on light, so the blog
 * placeholder (app/services/blog.py, shown until the chart lib draws) is dark
 * text on a dark box. Flip the box to white on light (matches the T4 --chart-bg)
 * so the placeholder + any future in-box text reads. */
/* NIGHT_85D — the 85C block below only overrode [data-chart]. The other two
 * chart wrappers, [data-aggregate-chart] (aggregate-chart.css:27) and
 * .chart-canvas (filing-chart.css:50), also hardcode a dark box
 * (rgba(13,13,26,0.5) and rgba(10,10,10,0.4)) that does NOT flip on light — so
 * even once the canvas paints #ffffff (--chart-bg), the wrapper's padding /
 * legend row / attribution row leak the dark box around it ("dark card floating
 * on a white page"). Carry the same white override to those selectors. Dark
 * (the DEFAULT) is byte-identical: no [data-theme="light"] rule matches when
 * data-theme="dark". */
[data-theme="light"] [data-aggregate-chart],
[data-theme="light"] [data-chart],
[data-theme="light"] [data-filing-chart] .chart-canvas,
[data-theme="light"] .chart-canvas {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .blog-chart__placeholder { color: #404040 !important; }  /* neutral-700 */

/* ---- (3f) NIGHT_90 - Chart chrome CHILDREN inside the (now white) wrapper -
 * NIGHT_85D flipped the four wrapper backgrounds to #ffffff on light, but the
 * CHILD chrome elements INSIDE the wrapper (range-btn row, tooltip surface,
 * aggregate legend overlay, chart error placeholder, attribution links, section
 * title) still paint their dark defaults from filing-chart.css:27-123 and
 * aggregate-chart.css:16-83 - reads as "dark chrome around white canvas around
 * dark chrome" on light theme (Screenshots 2026-07-10 002455/002509/002837).
 * Flip each child to a light equivalent: white/near-white backgrounds, neutral-
 * 700+ text (Rule 4 muted floor), green-800 accented text on green-50 fills
 * (Rule 3 transparent-chip). Dark (the DEFAULT) is byte-identical: no
 * [data-theme="light"] selector matches when data-theme="dark". !important is
 * required because the source rules in filing-chart.css / aggregate-chart.css
 * are top-level (no [data-theme] scope) and therefore tie on specificity - same
 * precedent as the 85D wrapper block (L83) and the NIGHT_87 autocomplete block. */

/* Filing-chart range button row (above the plot area) */
[data-theme="light"] .chart-range-btn {
  background: rgb(244, 244, 245) !important;             /* neutral-100 */
  border: 1px solid rgb(228, 228, 231) !important;       /* neutral-200 */
  color: rgb(64, 64, 64) !important;                     /* neutral-700 muted floor */
}
[data-theme="light"] .chart-range-btn:hover {
  border-color: rgb(163, 163, 163) !important;           /* neutral-400 */
  color: rgb(23, 23, 23) !important;                     /* neutral-900 */
}
[data-theme="light"] .chart-range-btn--active {
  background: rgb(240, 253, 244) !important;             /* green-50 - Rule 3 fill */
  border-color: rgb(22, 163, 74) !important;             /* green-600 */
  color: rgb(20, 83, 45) !important;                     /* green-800 - Rule 3 text */
}

/* Filing-chart tooltip surface (hover overlay drawn inside the wrapper) */
[data-theme="light"] .chart-tooltip {
  background: rgba(255, 255, 255, 0.98) !important;      /* white overlay */
  border: 1px solid rgb(228, 228, 231) !important;       /* neutral-200 */
  color: rgb(64, 64, 64) !important;                     /* neutral-700 muted */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important; /* hairline */
}
[data-theme="light"] .chart-tooltip__title {
  color: rgb(23, 23, 23) !important;                     /* neutral-900 primary */
}
[data-theme="light"] .chart-tooltip__row {
  color: rgb(64, 64, 64) !important;                     /* neutral-700 muted floor */
}
[data-theme="light"] .chart-tooltip__row b {
  color: rgb(23, 23, 23) !important;                     /* neutral-900 accented */
}

/* Filing-chart error placeholder (falls back to error state) */
[data-theme="light"] .chart-error {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgb(228, 228, 231) !important;       /* neutral-200 */
  color: rgb(64, 64, 64) !important;                     /* neutral-700 */
}
[data-theme="light"] .chart-loading {
  color: rgb(64, 64, 64) !important;                     /* neutral-700 muted floor */
}
[data-theme="light"] .chart-attribution,
[data-theme="light"] .chart-attribution a {
  color: rgb(82, 82, 82) !important;                     /* neutral-600 */
}
[data-theme="light"] .chart-attribution a:hover {
  color: rgb(20, 83, 45) !important;                     /* green-800 hover */
}

/* Aggregate-chart section title and overlays */
[data-theme="light"] .chart-section__title {
  color: rgb(64, 64, 64) !important;                     /* neutral-700 muted floor */
}
[data-theme="light"] .agg-chart__legend {
  background: rgba(255, 255, 255, 0.85) !important;      /* white overlay */
  color: rgb(64, 64, 64) !important;                     /* neutral-700 */
}
[data-theme="light"] .agg-chart__attribution {
  color: rgb(82, 82, 82) !important;                     /* neutral-600 */
}
[data-theme="light"] .agg-chart__attribution a {
  color: rgb(82, 82, 82) !important;
}
[data-theme="light"] .agg-chart__attribution a:hover {
  color: rgb(20, 83, 45) !important;                     /* green-800 hover */
}
[data-theme="light"] .agg-chart__error {
  color: rgb(64, 64, 64) !important;                     /* neutral-700 muted floor */
}

/* ---- (4) Simple/Technical terminology toggle -------------------------------
 * NIGHT_85H T1. components/terminology-toggle.css consumes
 * var(--color-border-secondary, #404040) for BOTH the outer container border
 * AND the slider track. That var is undefined anywhere (grep -rn
 * color-border-secondary static/css/ returns only the two consumer lines), so
 * the #404040 fallback (neutral-700) fires on both themes. On the white light
 * page the container reads as a dark chrome capsule with a dark track. Flip the
 * paint to light neutrals; keep the CHECKED-state (Technical mode) blue slider
 * byte-identical (the base rule's var(--color-text-info,#2563eb) fallback is
 * already the right blue on both themes, so no active-state override needed). */
[data-theme="light"] .terminology-toggle {
  border-color: #d4d4d4;              /* neutral-300, matches header border tone */
  background: #ffffff;                /* solid white, kills the rgba(38,38,38,0.6) fallback */
}
[data-theme="light"] .terminology-toggle__slider {
  background: #d4d4d4;                /* neutral-300, matches the resting track on light chrome */
}
[data-theme="light"] .terminology-toggle__slider::before {
  background: #ffffff;                /* thumb stays white; already white in default rule but
                                         restated so the paint-layer rule stands alone */
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
}
[data-theme="light"] .terminology-toggle__label {
  color: #525252;                     /* neutral-600, meets Rule 4 muted floor */
}
[data-theme="light"] .terminology-toggle__label--active {
  color: #171717;                     /* neutral-900, primary text */
}

/* ---- (5) Nav icon buttons (theme toggle + mobile hamburger) ----------------
 * NIGHT_85H T2. templates/partials/header.html:181 (theme toggle) and 158
 * (mobile hamburger) carry `bg-neutral-800/60` — a Tailwind fractional-alpha
 * utility compiled as `.bg-neutral-800\/60` which theme-light.css lines 139/281
 * do NOT match (they match bare `.bg-neutral-800` only). Result: chrome bg stays
 * neutral-800 rgba on light. The bare `border-neutral-700` on the same button IS
 * caught by theme-light.css (border flips to neutral-300 correctly), but the fill
 * remains dark, so the button reads as a floating dark capsule on white. Flip the
 * fractional-alpha bg to a faint dark tint on white, matching the NIGHT_84
 * --color-bg-hover polarity used elsewhere on light (rgba(0,0,0,0.04)). This is a
 * GENERIC opacity-utility override: fixes theme toggle, #mobile-menu-btn, and
 * #user-menu-btn (all consumers of .bg-neutral-800\/60) in one rule, no template
 * edit. The escaped slash \/ is REQUIRED — a bare / will not match (HALT #8). */
[data-theme="light"] .bg-neutral-800\/60 {
  background-color: rgba(0, 0, 0, 0.04);    /* matches --color-bg-hover on light */
}
[data-theme="light"] .hover\:bg-neutral-800\/60:hover {
  background-color: rgba(0, 0, 0, 0.06);    /* one step deeper on hover, still light */
}

/* ---- (6) NIGHT_87 — Autocomplete dropdown (hero search) --------------------
 * static/css/components/autocomplete.css hardcodes a slate-900 panel + green-400
 * on green-900/18 group label + neutral-100 name + neutral-400 meta — every one
 * of those declarations was tuned for the dark hero (bg-neutral-950) and paints
 * a dark panel over the white page on light theme. Flip the panel to a white
 * chrome capsule + Rule 3 transparent-chip badges + Rule 4 dark-gray muted text.
 * Scoped [data-theme="light"] so dark (the DEFAULT) is byte-identical.
 *
 * !important is required because the source rules in autocomplete.css are
 * top-level (no [data-theme] scope) and therefore tie the added rules on
 * specificity; the supplements sheet is loaded AFTER theme-light.css in
 * base.html but component sheets can load in either order, so !important is
 * the safe explicit-win. Same precedent as the sparkline-trend rule at line 62. */
[data-theme="light"] .autocomplete-dropdown {
  background: rgba(255, 255, 255, 0.98) !important;      /* white chrome */
  border: 1px solid rgb(228, 228, 231) !important;       /* neutral-200 */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;/* hairline shadow */
}

[data-theme="light"] .autocomplete-group-label {
  color: rgb(20, 83, 45) !important;                     /* green-800, Rule 3 text */
  background: rgb(240, 253, 244) !important;             /* green-50, Rule 3 fill */
  border-bottom: 1px solid rgb(228, 228, 231) !important;
}

[data-theme="light"] .autocomplete-item {
  color: rgb(23, 23, 23) !important;                     /* neutral-900, primary */
  border-bottom: 1px solid rgb(228, 228, 231) !important;
}

[data-theme="light"] .autocomplete-item:hover,
[data-theme="light"] .autocomplete-item:focus,
[data-theme="light"] .autocomplete-item[aria-selected="true"] {
  background: rgb(240, 253, 244) !important;             /* green-50 hover fill */
  color: rgb(20, 83, 45) !important;                     /* green-800 highlight text */
}

[data-theme="light"] .autocomplete-name {
  color: rgb(23, 23, 23) !important;                     /* neutral-900 */
}

[data-theme="light"] .autocomplete-meta {
  color: rgb(64, 64, 64) !important;                     /* neutral-700, muted floor */
}

[data-theme="light"] .autocomplete-meta strong {
  color: rgb(20, 83, 45) !important;                     /* green-800, accented count */
}

[data-theme="light"] .autocomplete-empty,
[data-theme="light"] .autocomplete-loading {
  color: rgb(64, 64, 64) !important;                     /* neutral-700, muted floor */
}

[data-theme="light"] .autocomplete-kind {
  background: rgb(244, 244, 245) !important;             /* neutral-100 fill */
  color: rgb(64, 64, 64) !important;                     /* neutral-700 text */
}

[data-theme="light"] .autocomplete-kind--alias {
  background: rgb(239, 246, 255) !important;             /* blue-50 */
  color: rgb(30, 58, 138) !important;                    /* blue-900 */
}
[data-theme="light"] .autocomplete-kind--group {
  background: rgb(245, 243, 255) !important;             /* violet-50 */
  color: rgb(76, 29, 149) !important;                    /* violet-900 */
}
[data-theme="light"] .autocomplete-kind--prefix {
  background: rgb(240, 253, 244) !important;             /* green-50 */
  color: rgb(20, 83, 45) !important;                     /* green-800 */
}
[data-theme="light"] .autocomplete-kind--trigram {
  background: rgb(255, 251, 235) !important;             /* amber-50 */
  color: rgb(120, 53, 15) !important;                    /* amber-900 */
}