/*!
 * Learn with SS UI layer — dark mode + focus mode
 * Pair with lws-ui.js. Load AFTER the Tailwind CDN script.
 *
 * How dark mode works here:
 *  1. Existing pages (hard-coded bg-white, border-brand-100, text-ink ...) are re-themed
 *     by the "compat layer" below, so you do NOT have to touch every class.
 *  2. New components use real Tailwind `dark:` variants (needs  darkMode: 'class'  in tailwind.config).
 *     The compat layer skips any element that already declares a matching `dark:bg-` / `dark:text-` /
 *     `dark:border-` utility, so the two never fight.
 */

/* ---------- 1. Design tokens ---------- */
:root {
  --mp-bg: #F3F7FB;
  --mp-surface: #FFFFFF;
  --mp-surface-2: #EEF5FC;
  --mp-border: #DCEBF8;
  --mp-text: #0B2540;
  --mp-muted: #64748B;
  --mp-link: #0F5CA8;
}
html.dark {
  --mp-bg: #0A1120;
  --mp-surface: #101A2E;
  --mp-surface-2: #16223A;
  --mp-border: #22314D;
  --mp-text: #E5ECF6;
  --mp-muted: #93A4BD;
  --mp-link: #7DB8F5;
  color-scheme: dark;
}

/* ---------- 2. Smooth theme switch (class is added for ~350ms only, so it never slows normal UI) ---------- */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, stroke .3s ease !important;
}

/* ---------- 3. Compat layer: re-theme legacy light-only classes ---------- */
html.dark body { background: var(--mp-bg); color: var(--mp-text); }

/* surfaces */
html.dark :is(.bg-white, .bg-white\/95, .bg-white\/90):not([class*="dark:bg-"]) { background-color: var(--mp-surface); }
html.dark :is(.bg-surface, .bg-brand-50, .bg-blue-50, .bg-slate-50, .hover\:bg-brand-50:hover, .hover\:bg-slate-100:hover, .hover\:bg-white:hover):not([class*="dark:bg-"]) { background-color: var(--mp-surface-2); }
html.dark :is(.bg-brand-100, .bg-slate-100, .bg-slate-200):not([class*="dark:bg-"]) { background-color: #22314D; }
html.dark .bg-teal-soft:not([class*="dark:bg-"]) { background-color: rgba(14, 159, 154, .18); }
html.dark :is(.bg-emerald-50, .bg-emerald-100):not([class*="dark:bg-"]) { background-color: rgba(16, 185, 129, .14); }
html.dark :is(.bg-rose-50, .bg-rose-100, .hover\:bg-rose-50:hover):not([class*="dark:bg-"]) { background-color: rgba(244, 63, 94, .14); }
html.dark :is(.bg-amber-50, .bg-amber-100):not([class*="dark:bg-"]) { background-color: rgba(245, 158, 11, .16); }

/* borders & rings */
html.dark :is(.border-brand-100, .border-slate-100, .border-slate-200):not([class*="dark:border-"]) { border-color: var(--mp-border); }
html.dark :is(.border-brand-200, .border-slate-300):not([class*="dark:border-"]) { border-color: #2F4468; }
html.dark .border-emerald-300:not([class*="dark:border-"]) { border-color: rgba(52, 211, 153, .45); }
html.dark .border-rose-300:not([class*="dark:border-"]) { border-color: rgba(251, 113, 133, .45); }
html.dark .ring-brand-100:not([class*="dark:ring-"]) { --tw-ring-color: var(--mp-border); }

/* text */
html.dark :is(.text-ink, .text-slate-900, .text-slate-800, .hover\:text-slate-900:hover):not([class*="dark:text-"]) { color: var(--mp-text); }
html.dark :is(.text-slate-700, .text-slate-600):not([class*="dark:text-"]) { color: #B7C3D6; }
html.dark :is(.text-slate-500, .text-slate-400):not([class*="dark:text-"]) { color: var(--mp-muted); }
html.dark :is(.text-brand-600, .text-brand-700, .text-blue-600, .hover\:text-brand-600:hover):not([class*="dark:text-"]) { color: var(--mp-link); }
html.dark .text-brand-900:not([class*="dark:text-"]) { color: #DCEBF8; }
html.dark :is(.text-emerald-600, .text-emerald-700, .text-emerald-800):not([class*="dark:text-"]) { color: #6EE7B7; }
html.dark :is(.text-rose-600, .text-rose-700, .text-rose-800):not([class*="dark:text-"]) { color: #FDA4AF; }
html.dark :is(.text-amber-700, .text-amber-800, .text-amber-900):not([class*="dark:text-"]) { color: #FCD34D; }

/* form controls and native dialogs */
html.dark :is(input, select, textarea, .field):not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
  background-color: var(--mp-surface-2); color: var(--mp-text); border-color: var(--mp-border);
}
html.dark dialog { background: var(--mp-surface); color: var(--mp-text); }
html.dark ::placeholder { color: #6E7F99; }

/* ---------- 4. Toggle buttons (injected by lws-ui.js, or add [data-theme-toggle] / [data-focus-toggle] yourself) ---------- */
.mp-tools { display: inline-flex; align-items: center; gap: .25rem; }
.mp-icon-btn {
  display: inline-grid; place-items: center; height: 2.25rem; min-width: 2.25rem; padding: 0 .5rem; gap: .4rem;
  grid-auto-flow: column; border-radius: .5rem; color: #475569; background: transparent; font: 600 .8125rem/1 inherit;
  cursor: pointer; border: 0; transition: background-color .15s, color .15s;
}
.mp-icon-btn:hover { background: var(--mp-surface-2); color: var(--mp-text); }
.mp-icon-btn[aria-pressed="true"][data-focus-toggle] { background: var(--mp-surface-2); color: var(--mp-link); }
.mp-icon-btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
html.dark .mp-icon-btn { color: #B7C3D6; }
html.dark .mp-icon-btn:hover { color: var(--mp-text); }
.mp-icon-btn .mp-label { display: none; }
@media (min-width: 640px) { .mp-icon-btn[data-focus-toggle] .mp-label { display: inline; } }

/* sun / moon swap with a little spin */
.mp-icon-btn .mp-sun, .mp-icon-btn .mp-moon { transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .2s; }
.mp-icon-btn .mp-moon { display: none; }
html.dark .mp-icon-btn .mp-sun { display: none; }
html.dark .mp-icon-btn .mp-moon { display: block; }
.mp-icon-btn:active .mp-sun, .mp-icon-btn:active .mp-moon { transform: rotate(40deg) scale(.9); }

/* floating fallback when a page has no <header> */
.mp-float { position: fixed; right: 1rem; bottom: 5.5rem; z-index: 45; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 999px; padding: .25rem; box-shadow: 0 6px 20px rgba(11, 37, 64, .15); }

/* ---------- 5. Focus mode ---------- */
html.focus-mode body > header:not([data-focus-keep]),
html.focus-mode #sidebar,
html.focus-mode #appSidebar,
html.focus-mode #navOverlay,
html.focus-mode #overlay,
html.focus-mode [data-focus-hide] { display: none !important; }

/* content reclaims the space nav.js reserved for the sidebar (and re-centres if the page uses mx-auto) */
html.focus-mode .lg\:ml-64 { margin-left: auto !important; }

/* gentle entrance so the layout change does not feel like a jump */
html.focus-mode main { animation: mp-focus-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes mp-focus-in { from { opacity: .4; transform: scale(.992); } to { opacity: 1; transform: none; } }

.mp-focus-pill {
  position: fixed; top: .75rem; right: .75rem; z-index: 60; display: none; align-items: center; gap: .6rem;
  padding: .35rem .4rem .35rem .85rem; border-radius: 999px; font-size: .8125rem; font-weight: 600;
  background: var(--mp-surface); color: var(--mp-text); border: 1px solid var(--mp-border);
  box-shadow: 0 6px 24px rgba(11, 37, 64, .14); opacity: .55; transition: opacity .2s;
}
.mp-focus-pill:hover, .mp-focus-pill:focus-within { opacity: 1; }
html.focus-mode .mp-focus-pill { display: inline-flex; }
.mp-focus-pill [data-hud]:empty { display: none; }
.mp-focus-pill [data-hud] { font-variant-numeric: tabular-nums; color: var(--mp-muted); }
.mp-focus-pill button {
  border: 0; cursor: pointer; border-radius: 999px; padding: .4rem .75rem; font: inherit;
  background: var(--mp-surface-2); color: var(--mp-link);
}
.mp-focus-pill button:hover { filter: brightness(.96); }
.mp-focus-pill kbd { margin-left: .35rem; padding: 0 .3rem; border-radius: .25rem; border: 1px solid var(--mp-border); font-size: .7rem; }

@media (prefers-reduced-motion: reduce) {
  html.focus-mode main { animation: none; }
  html.theme-anim, html.theme-anim * { transition: none !important; }
  .mp-icon-btn .mp-sun, .mp-icon-btn .mp-moon { transition: none; }
}