/* UDL Toolkit (reading aloud, glossary hints, dark mode) */
:root{
  --udl-bg:#ffffff;
  --udl-ink:#1f2937;
  --udl-panel:#ffffff;
  --udl-border:#e5e7eb;
  --udl-accent:#2563eb;
  --udl-shadow:0 8px 20px rgba(0,0,0,.08);
}
html.udl-dark{
  --udl-bg:#0b1220;
  --udl-ink:#e5e7eb;
  --udl-panel:#0f172a;
  --udl-border:#23324a;
  --udl-accent:#60a5fa;
  --udl-shadow:0 10px 24px rgba(0,0,0,.4);
}
.udl-root{ /* allow gentle override without breaking site */
  color:var(--udl-ink);
  background-color:transparent;
}
html.udl-dark body{ background-color:#0b1220; color:var(--udl-ink); }
.udl-toolbar{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  display:flex; gap:8px; flex-wrap:wrap;
}
.udl-btn{
  appearance:none; border:none; cursor:pointer; font-weight:700;
  padding:10px 12px; border-radius:12px;
  background:var(--udl-panel);
  color:var(--udl-ink);
  border:2px solid var(--udl-border);
  box-shadow: var(--udl-shadow);
}
.udl-btn:focus{ outline:3px solid var(--udl-accent); outline-offset:2px }
.udl-tooltip{
  position:fixed; z-index:9998; max-width:360px;
  background:var(--udl-panel); color:var(--udl-ink);
  border:2px solid var(--udl-border); border-radius:12px; padding:10px 12px;
  box-shadow: var(--udl-shadow);
}
.udl-tooltip h4{ margin:0 0 6px; font-size:14px }
.udl-tooltip p{ margin:0; font-size:14px; line-height:1.6 }
.udl-underline{ border-bottom:2px dotted var(--udl-accent); cursor:help }
@media (prefers-color-scheme: dark){
  :root:not(.udl-force-light) html:not(.udl-force-light) body{ background:#0b1220; color:#e5e7eb }
}


/* === UDL Dark Mode Compatibility Fixes (cards/buttons/utility colors) === */
html.udl-dark {
  color-scheme: dark;
}

/* Common card-like containers */
html.udl-dark .card,
html.udl-dark .icon-tile,
html.udl-dark .panel,
html.udl-dark [class*="card"],
html.udl-dark [class*="panel"],
html.udl-dark [class*="tile"] {
  background-color: #0f172a !important; /* slate-900-ish */
  color: #e5e7eb !important;           /* slate-200 */
  border-color: #23324a !important;    /* darker border */
  box-shadow: none !important;
}

/* Tailwind-ish text utility overrides commonly seen in light themes */
html.udl-dark .text-slate-500,
html.udl-dark .text-slate-600,
html.udl-dark .text-slate-700,
html.udl-dark .text-gray-500,
html.udl-dark .text-gray-600,
html.udl-dark .text-gray-700 {
  color: #cbd5e1 !important; /* slate-300 */
}

/* Tailwind-ish ring/border utilities */
html.udl-dark .ring-slate-200,
html.udl-dark .ring-gray-200,
html.udl-dark .border-slate-200,
html.udl-dark .border-gray-200 {
  --tw-ring-color: #23324a;
  border-color: #23324a !important;
}

/* Generic white backgrounds -> dark */
html.udl-dark [class*="bg-white"],
html.udl-dark [style*="background:#fff"],
html.udl-dark [style*="background: #fff"] {
  background-color: #0f172a !important;
}

/* Buttons */
html.udl-dark .btn,
html.udl-dark button:not(.udl-btn),
html.udl-dark .button,
html.udl-dark [role="button"] {
  background-color: #111827 !important; /* gray-900 */
  color: #e5e7eb !important;
  border-color: #334155 !important;     /* slate-700 */
  box-shadow: none !important;
}

/* Buttons with gradient/light backgrounds become outlined */
html.udl-dark .btn.primary,
html.udl-dark .btn.ok,
html.udl-dark .btn.blue {
  background: transparent !important;
  border-color: #3b82f6 !important;   /* blue-500 accent */
  color: #e5e7eb !important;
}

/* Badges/labels */
html.udl-dark .badge {
  background: rgba(30,41,59,.6) !important; /* slate-800 */
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* Inputs */
html.udl-dark input,
html.udl-dark select,
html.udl-dark textarea {
  background-color: #0b1220 !important;
  color: #e5e7eb !important;
  border-color: #334155 !important;
}

/* Links remain readable */
html.udl-dark a { color: #60a5fa !important; }