/* /assets/us-theme.css — dark mode D2 (2026-10-15). ONE token layer (Paper & Ink, light on :root, dark on html.dark; every
   text/background pair AA in both themes) + a DARK-ONLY compatibility layer for older pages built with Tailwind light classes.
   Every compat rule is  html.dark :where(.class)  — specificity (0,1,1): beats the plain Tailwind utility, never beats a page's own
   dark: class (0,2,0), so pages that already style dark keep their look. Light mode is untouched: no light rule changes a colour
   (--t-border-default in light = #e5e7eb, Tailwind's own default). */
:root{--t-paper:#faf5ef;--t-surface:#fffdfa;--t-surface-2:#f3eadf;--t-surface-3:#ebe0d2;--t-ink:#241d1b;--t-ink-soft:#4a403c;--t-ink-mute:#6b5f5a;--t-line:rgba(36,29,27,.14);--t-accent:#c2181c;--t-link:#1d4ed8;--t-ok:#0d7a54;--t-warn:#a2470a;--t-err:#c2181c;--t-focus:#1d4ed8;--t-border-default:#e5e7eb}
html.dark{--t-paper:#151011;--t-surface:#1d1618;--t-surface-2:#251c1f;--t-surface-3:#2f2427;--t-ink:#f2ebe6;--t-ink-soft:#d4c8c3;--t-ink-mute:#ab9d97;--t-line:rgba(242,235,230,.15);--t-accent:#ff6b6f;--t-link:#8ab6ff;--t-ok:#4fc79a;--t-warn:#f0b45e;--t-err:#ff7a7d;--t-focus:#8ab6ff;--t-border-default:rgba(242,235,230,.15)}
html.dark :where(body){background-color:var(--t-paper);color:var(--t-ink)}
html.dark :where(.bg-white,.bg-gray-50,.bg-slate-50,.bg-zinc-50,.bg-neutral-50,.bg-stone-50){background-color:var(--t-surface)}
html.dark :where(.bg-gray-100,.bg-slate-100,.bg-zinc-100,.bg-stone-100){background-color:var(--t-surface-2)}
html.dark :where(.bg-gray-200,.bg-slate-200,.bg-zinc-200,.bg-gray-300,.bg-slate-300){background-color:var(--t-surface-3)}
html.dark :where(.bg-white\/95,.bg-white\/90,.bg-white\/80,.bg-white\/70,.bg-white\/60,.bg-white\/50){background-color:rgba(29,22,24,.88)}
html.dark :where(.text-black,.text-gray-900,.text-gray-800,.text-slate-900,.text-slate-800,.text-zinc-900,.text-zinc-800,.text-neutral-900,.text-neutral-800,.text-stone-900,.text-stone-800){color:var(--t-ink)}
html.dark :where(.text-gray-700,.text-gray-600,.text-slate-700,.text-slate-600,.text-zinc-700,.text-zinc-600,.text-stone-700,.text-stone-600){color:var(--t-ink-soft)}
html.dark :where(.text-gray-500,.text-gray-400,.text-slate-500,.text-slate-400,.text-zinc-500,.text-zinc-400,.text-stone-500,.text-stone-400,.text-gray-300){color:var(--t-ink-mute)}
html.dark :where(.border-gray-50,.border-gray-100,.border-gray-200,.border-gray-300,.border-slate-100,.border-slate-200,.border-slate-300,.divide-gray-100>*,.divide-gray-200>*,.divide-slate-100>*,.divide-slate-200>*,.border-white){border-color:var(--t-line)}
html.dark :where(.hover\:bg-gray-50:hover,.hover\:bg-gray-100:hover,.hover\:bg-slate-50:hover,.hover\:bg-slate-100:hover,.hover\:bg-white:hover){background-color:var(--t-surface-3)}
html.dark :where(.hover\:text-gray-900:hover,.hover\:text-gray-800:hover,.hover\:text-slate-900:hover){color:var(--t-ink)}
html.dark :where(.bg-red-50,.bg-red-100){background-color:rgba(255,95,99,.14)}
html.dark :where(.bg-red-200){background-color:rgba(255,95,99,.24)}
html.dark :where(.hover\:bg-red-50:hover,.hover\:bg-red-100:hover,.hover\:bg-red-200:hover){background-color:rgba(255,95,99,.26)}
html.dark :where(.text-red-500,.text-red-600,.text-red-700,.text-red-800,.text-red-900){color:#ff9a9c}
html.dark :where(.border-red-100,.border-red-200,.border-red-300){border-color:rgba(255,95,99,.38)}
html.dark :where(.bg-rose-50,.bg-rose-100){background-color:rgba(255,95,130,.14)}
html.dark :where(.bg-rose-200){background-color:rgba(255,95,130,.24)}
html.dark :where(.hover\:bg-rose-50:hover,.hover\:bg-rose-100:hover,.hover\:bg-rose-200:hover){background-color:rgba(255,95,130,.26)}
html.dark :where(.text-rose-500,.text-rose-600,.text-rose-700,.text-rose-800,.text-rose-900){color:#ff9db6}
html.dark :where(.border-rose-100,.border-rose-200,.border-rose-300){border-color:rgba(255,95,130,.38)}
html.dark :where(.bg-pink-50,.bg-pink-100){background-color:rgba(240,110,170,.14)}
html.dark :where(.bg-pink-200){background-color:rgba(240,110,170,.24)}
html.dark :where(.hover\:bg-pink-50:hover,.hover\:bg-pink-100:hover,.hover\:bg-pink-200:hover){background-color:rgba(240,110,170,.26)}
html.dark :where(.text-pink-500,.text-pink-600,.text-pink-700,.text-pink-800,.text-pink-900){color:#f7a8cf}
html.dark :where(.border-pink-100,.border-pink-200,.border-pink-300){border-color:rgba(240,110,170,.38)}
html.dark :where(.bg-orange-50,.bg-orange-100){background-color:rgba(245,150,70,.14)}
html.dark :where(.bg-orange-200){background-color:rgba(245,150,70,.24)}
html.dark :where(.hover\:bg-orange-50:hover,.hover\:bg-orange-100:hover,.hover\:bg-orange-200:hover){background-color:rgba(245,150,70,.26)}
html.dark :where(.text-orange-500,.text-orange-600,.text-orange-700,.text-orange-800,.text-orange-900){color:#f8be8c}
html.dark :where(.border-orange-100,.border-orange-200,.border-orange-300){border-color:rgba(245,150,70,.38)}
html.dark :where(.bg-amber-50,.bg-amber-100){background-color:rgba(240,180,94,.14)}
html.dark :where(.bg-amber-200){background-color:rgba(240,180,94,.24)}
html.dark :where(.hover\:bg-amber-50:hover,.hover\:bg-amber-100:hover,.hover\:bg-amber-200:hover){background-color:rgba(240,180,94,.26)}
html.dark :where(.text-amber-500,.text-amber-600,.text-amber-700,.text-amber-800,.text-amber-900){color:#f5cd8e}
html.dark :where(.border-amber-100,.border-amber-200,.border-amber-300){border-color:rgba(240,180,94,.38)}
html.dark :where(.bg-yellow-50,.bg-yellow-100){background-color:rgba(235,200,80,.14)}
html.dark :where(.bg-yellow-200){background-color:rgba(235,200,80,.24)}
html.dark :where(.hover\:bg-yellow-50:hover,.hover\:bg-yellow-100:hover,.hover\:bg-yellow-200:hover){background-color:rgba(235,200,80,.26)}
html.dark :where(.text-yellow-500,.text-yellow-600,.text-yellow-700,.text-yellow-800,.text-yellow-900){color:#f0d98a}
html.dark :where(.border-yellow-100,.border-yellow-200,.border-yellow-300){border-color:rgba(235,200,80,.38)}
html.dark :where(.bg-lime-50,.bg-lime-100){background-color:rgba(170,210,90,.14)}
html.dark :where(.bg-lime-200){background-color:rgba(170,210,90,.24)}
html.dark :where(.hover\:bg-lime-50:hover,.hover\:bg-lime-100:hover,.hover\:bg-lime-200:hover){background-color:rgba(170,210,90,.26)}
html.dark :where(.text-lime-500,.text-lime-600,.text-lime-700,.text-lime-800,.text-lime-900){color:#c6e39a}
html.dark :where(.border-lime-100,.border-lime-200,.border-lime-300){border-color:rgba(170,210,90,.38)}
html.dark :where(.bg-green-50,.bg-green-100){background-color:rgba(79,199,154,.14)}
html.dark :where(.bg-green-200){background-color:rgba(79,199,154,.24)}
html.dark :where(.hover\:bg-green-50:hover,.hover\:bg-green-100:hover,.hover\:bg-green-200:hover){background-color:rgba(79,199,154,.26)}
html.dark :where(.text-green-500,.text-green-600,.text-green-700,.text-green-800,.text-green-900){color:#8fe0bf}
html.dark :where(.border-green-100,.border-green-200,.border-green-300){border-color:rgba(79,199,154,.38)}
html.dark :where(.bg-emerald-50,.bg-emerald-100){background-color:rgba(79,199,154,.14)}
html.dark :where(.bg-emerald-200){background-color:rgba(79,199,154,.24)}
html.dark :where(.hover\:bg-emerald-50:hover,.hover\:bg-emerald-100:hover,.hover\:bg-emerald-200:hover){background-color:rgba(79,199,154,.26)}
html.dark :where(.text-emerald-500,.text-emerald-600,.text-emerald-700,.text-emerald-800,.text-emerald-900){color:#8fe0bf}
html.dark :where(.border-emerald-100,.border-emerald-200,.border-emerald-300){border-color:rgba(79,199,154,.38)}
html.dark :where(.bg-teal-50,.bg-teal-100){background-color:rgba(80,200,190,.14)}
html.dark :where(.bg-teal-200){background-color:rgba(80,200,190,.24)}
html.dark :where(.hover\:bg-teal-50:hover,.hover\:bg-teal-100:hover,.hover\:bg-teal-200:hover){background-color:rgba(80,200,190,.26)}
html.dark :where(.text-teal-500,.text-teal-600,.text-teal-700,.text-teal-800,.text-teal-900){color:#93e0d8}
html.dark :where(.border-teal-100,.border-teal-200,.border-teal-300){border-color:rgba(80,200,190,.38)}
html.dark :where(.bg-cyan-50,.bg-cyan-100){background-color:rgba(80,190,230,.14)}
html.dark :where(.bg-cyan-200){background-color:rgba(80,190,230,.24)}
html.dark :where(.hover\:bg-cyan-50:hover,.hover\:bg-cyan-100:hover,.hover\:bg-cyan-200:hover){background-color:rgba(80,190,230,.26)}
html.dark :where(.text-cyan-500,.text-cyan-600,.text-cyan-700,.text-cyan-800,.text-cyan-900){color:#9ad8f0}
html.dark :where(.border-cyan-100,.border-cyan-200,.border-cyan-300){border-color:rgba(80,190,230,.38)}
html.dark :where(.bg-sky-50,.bg-sky-100){background-color:rgba(100,180,240,.14)}
html.dark :where(.bg-sky-200){background-color:rgba(100,180,240,.24)}
html.dark :where(.hover\:bg-sky-50:hover,.hover\:bg-sky-100:hover,.hover\:bg-sky-200:hover){background-color:rgba(100,180,240,.26)}
html.dark :where(.text-sky-500,.text-sky-600,.text-sky-700,.text-sky-800,.text-sky-900){color:#a5d3f7}
html.dark :where(.border-sky-100,.border-sky-200,.border-sky-300){border-color:rgba(100,180,240,.38)}
html.dark :where(.bg-blue-50,.bg-blue-100){background-color:rgba(110,160,255,.14)}
html.dark :where(.bg-blue-200){background-color:rgba(110,160,255,.24)}
html.dark :where(.hover\:bg-blue-50:hover,.hover\:bg-blue-100:hover,.hover\:bg-blue-200:hover){background-color:rgba(110,160,255,.26)}
html.dark :where(.text-blue-500,.text-blue-600,.text-blue-700,.text-blue-800,.text-blue-900){color:#a9c8ff}
html.dark :where(.border-blue-100,.border-blue-200,.border-blue-300){border-color:rgba(110,160,255,.38)}
html.dark :where(.bg-indigo-50,.bg-indigo-100){background-color:rgba(140,150,255,.14)}
html.dark :where(.bg-indigo-200){background-color:rgba(140,150,255,.24)}
html.dark :where(.hover\:bg-indigo-50:hover,.hover\:bg-indigo-100:hover,.hover\:bg-indigo-200:hover){background-color:rgba(140,150,255,.26)}
html.dark :where(.text-indigo-500,.text-indigo-600,.text-indigo-700,.text-indigo-800,.text-indigo-900){color:#b9c0ff}
html.dark :where(.border-indigo-100,.border-indigo-200,.border-indigo-300){border-color:rgba(140,150,255,.38)}
html.dark :where(.bg-violet-50,.bg-violet-100){background-color:rgba(170,140,255,.14)}
html.dark :where(.bg-violet-200){background-color:rgba(170,140,255,.24)}
html.dark :where(.hover\:bg-violet-50:hover,.hover\:bg-violet-100:hover,.hover\:bg-violet-200:hover){background-color:rgba(170,140,255,.26)}
html.dark :where(.text-violet-500,.text-violet-600,.text-violet-700,.text-violet-800,.text-violet-900){color:#cdb9ff}
html.dark :where(.border-violet-100,.border-violet-200,.border-violet-300){border-color:rgba(170,140,255,.38)}
html.dark :where(.bg-purple-50,.bg-purple-100){background-color:rgba(180,130,250,.14)}
html.dark :where(.bg-purple-200){background-color:rgba(180,130,250,.24)}
html.dark :where(.hover\:bg-purple-50:hover,.hover\:bg-purple-100:hover,.hover\:bg-purple-200:hover){background-color:rgba(180,130,250,.26)}
html.dark :where(.text-purple-500,.text-purple-600,.text-purple-700,.text-purple-800,.text-purple-900){color:#d2b6fc}
html.dark :where(.border-purple-100,.border-purple-200,.border-purple-300){border-color:rgba(180,130,250,.38)}
html.dark :where(.bg-fuchsia-50,.bg-fuchsia-100){background-color:rgba(220,120,240,.14)}
html.dark :where(.bg-fuchsia-200){background-color:rgba(220,120,240,.24)}
html.dark :where(.hover\:bg-fuchsia-50:hover,.hover\:bg-fuchsia-100:hover,.hover\:bg-fuchsia-200:hover){background-color:rgba(220,120,240,.26)}
html.dark :where(.text-fuchsia-500,.text-fuchsia-600,.text-fuchsia-700,.text-fuchsia-800,.text-fuchsia-900){color:#e9b3f5}
html.dark :where(.border-fuchsia-100,.border-fuchsia-200,.border-fuchsia-300){border-color:rgba(220,120,240,.38)}
html.dark :where(.from-white,.from-gray-50,.from-slate-50){--tw-gradient-from:var(--t-surface) var(--tw-gradient-from-position);--tw-gradient-to:rgba(29,22,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
html.dark :where(.to-white,.to-gray-50,.to-slate-50,.to-gray-100){--tw-gradient-to:var(--t-surface-2) var(--tw-gradient-to-position)}
html.dark :where(.via-white,.via-gray-50){--tw-gradient-to:rgba(29,22,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--t-surface) var(--tw-gradient-via-position),var(--tw-gradient-to)}
html.dark :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){background-color:var(--t-surface-2);color:var(--t-ink);border-color:var(--t-line)}
html.dark :where(input::placeholder,textarea::placeholder){color:var(--t-ink-mute)}
html.dark :where(table){color:var(--t-ink)}
html.dark :where(hr){border-color:var(--t-line)}
html.dark :where(.shadow,.shadow-sm,.shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl){--tw-shadow-color:rgba(0,0,0,.55)}
/* Filled accent buttons: in dark the page tokens (--red, --acc …) become bright pastels, so white text on them falls to 2.0–3.0.
   Dark ink on the bright fill is AA (≥ 6:1) on every one of them. Only classes that are ALWAYS a bright fill are listed. */
html.dark :where(.card-btn,.rbtn,.cbtn,.ebtn,.card-pin,.uf-hanko,.fabfeedback,.introbtn,.btn.enroll,.btn.enroll *,a.bg-red-600.text-white){color:#1a0e0f}
/* D5: the same dark-ink-on-bright-fill rule for the buttons the Paper & Ink pages scope themselves (.home / .usdash / .usprofile /
   flashcards' main .bg-purple-600) — written at THEIR specificity + html.dark, so it only ever applies in dark. */
html.dark .home .card-btn,html.dark .home .btn,html.dark .home .card-pin,html.dark .home .hero-search button,html.dark .usdash .card .cbtn,html.dark .usdash .resume-card .rbtn,html.dark .usdash .card .media .pill,html.dark .usdash .fabfeedback,html.dark .usprofile .btn,html.dark .usprofile .ava .cam{color:#1a0e0f}
html.dark .usdash .tab-btn.active,html.dark .usdash .tab-btn.active [id^="badge-"],html.dark .usdash .tab-btn.active>span{color:#1a0e0f!important}
/* P3-5 (2026-10-15): bg-purple-600 pills keep WHITE text in dark on a deep violet fill (5.7:1). D5 gave them dark ink for flashcards'
   pastel accent, but on take_mock_test the same class is real purple (dark ink there was 3.5). One fill works on both pages. */
html.dark body[class] main .bg-purple-600{background:#7c3aed!important;color:#fff}
/* P3-5 (2026-10-15, admin dark sweep): opacity variants (bg-blue-100/70, bg-purple-50/60 …) get the same dark tint as the plain class —
   they kept their light fill under light text (1.4–1.7). Generated from the rules above. */
html.dark :where([class*="bg-white/"],[class*="bg-gray-50/"],[class*="bg-slate-50/"],[class*="bg-zinc-50/"],[class*="bg-neutral-50/"],[class*="bg-stone-50/"]){background-color:var(--t-surface)}
html.dark :where([class*="bg-gray-100/"],[class*="bg-slate-100/"],[class*="bg-zinc-100/"],[class*="bg-stone-100/"]){background-color:var(--t-surface-2)}
html.dark :where([class*="bg-gray-200/"],[class*="bg-slate-200/"],[class*="bg-zinc-200/"],[class*="bg-gray-300/"],[class*="bg-slate-300/"]){background-color:var(--t-surface-3)}
html.dark :where([class*="bg-red-50/"],[class*="bg-red-100/"]){background-color:rgba(255,95,99,.14)}
html.dark :where([class*="bg-red-200/"]){background-color:rgba(255,95,99,.24)}
html.dark :where([class*="bg-rose-50/"],[class*="bg-rose-100/"]){background-color:rgba(255,95,130,.14)}
html.dark :where([class*="bg-rose-200/"]){background-color:rgba(255,95,130,.24)}
html.dark :where([class*="bg-pink-50/"],[class*="bg-pink-100/"]){background-color:rgba(240,110,170,.14)}
html.dark :where([class*="bg-pink-200/"]){background-color:rgba(240,110,170,.24)}
html.dark :where([class*="bg-orange-50/"],[class*="bg-orange-100/"]){background-color:rgba(245,150,70,.14)}
html.dark :where([class*="bg-orange-200/"]){background-color:rgba(245,150,70,.24)}
html.dark :where([class*="bg-amber-50/"],[class*="bg-amber-100/"]){background-color:rgba(240,180,94,.14)}
html.dark :where([class*="bg-amber-200/"]){background-color:rgba(240,180,94,.24)}
html.dark :where([class*="bg-yellow-50/"],[class*="bg-yellow-100/"]){background-color:rgba(235,200,80,.14)}
html.dark :where([class*="bg-yellow-200/"]){background-color:rgba(235,200,80,.24)}
html.dark :where([class*="bg-lime-50/"],[class*="bg-lime-100/"]){background-color:rgba(170,210,90,.14)}
html.dark :where([class*="bg-lime-200/"]){background-color:rgba(170,210,90,.24)}
html.dark :where([class*="bg-green-50/"],[class*="bg-green-100/"]){background-color:rgba(79,199,154,.14)}
html.dark :where([class*="bg-green-200/"]){background-color:rgba(79,199,154,.24)}
html.dark :where([class*="bg-emerald-50/"],[class*="bg-emerald-100/"]){background-color:rgba(79,199,154,.14)}
html.dark :where([class*="bg-emerald-200/"]){background-color:rgba(79,199,154,.24)}
html.dark :where([class*="bg-teal-50/"],[class*="bg-teal-100/"]){background-color:rgba(80,200,190,.14)}
html.dark :where([class*="bg-teal-200/"]){background-color:rgba(80,200,190,.24)}
html.dark :where([class*="bg-cyan-50/"],[class*="bg-cyan-100/"]){background-color:rgba(80,190,230,.14)}
html.dark :where([class*="bg-cyan-200/"]){background-color:rgba(80,190,230,.24)}
html.dark :where([class*="bg-sky-50/"],[class*="bg-sky-100/"]){background-color:rgba(100,180,240,.14)}
html.dark :where([class*="bg-sky-200/"]){background-color:rgba(100,180,240,.24)}
html.dark :where([class*="bg-blue-50/"],[class*="bg-blue-100/"]){background-color:rgba(110,160,255,.14)}
html.dark :where([class*="bg-blue-200/"]){background-color:rgba(110,160,255,.24)}
html.dark :where([class*="bg-indigo-50/"],[class*="bg-indigo-100/"]){background-color:rgba(140,150,255,.14)}
html.dark :where([class*="bg-indigo-200/"]){background-color:rgba(140,150,255,.24)}
html.dark :where([class*="bg-violet-50/"],[class*="bg-violet-100/"]){background-color:rgba(170,140,255,.14)}
html.dark :where([class*="bg-violet-200/"]){background-color:rgba(170,140,255,.24)}
html.dark :where([class*="bg-purple-50/"],[class*="bg-purple-100/"]){background-color:rgba(180,130,250,.14)}
html.dark :where([class*="bg-purple-200/"]){background-color:rgba(180,130,250,.24)}
html.dark :where([class*="bg-fuchsia-50/"],[class*="bg-fuchsia-100/"]){background-color:rgba(220,120,240,.14)}
html.dark :where([class*="bg-fuchsia-200/"]){background-color:rgba(220,120,240,.24)}
/* white text on saturated fills (fails in light too): in dark, a deeper fill or dark ink — light mode unchanged */
html.dark :where(.bg-red-500.text-white,.bg-red-600.text-white){background-color:#b91c1c}
html.dark :where(.bg-green-500.text-white,.bg-green-600.text-white){background-color:#15803d}
html.dark :where(.bg-emerald-500.text-white,.bg-emerald-600.text-white){background-color:#047857}
html.dark :where(.bg-gray-400.text-white,.bg-slate-400.text-white){background-color:#4b5563}
html.dark :where(.bg-yellow-400.text-white,.bg-yellow-500.text-white,.bg-amber-400.text-white,.bg-amber-500.text-white){color:#1a0e0f}
/* the Bookshelf entrance pill in the header has an inline red (2.9 on the dark header) */
html.dark [data-lib-entrance="header"]{color:#ff8b8e!important;border-color:rgba(255,139,142,.45)!important}
/* page-own white cards (student analytics) */
html.dark .glass-card{background:var(--t-surface)}