/* ==========================================================================
   responsive.css — shared cross-device safety net for RAG Learning
   Linked last in <head> on every top-level page so it can fill gaps without
   fighting each page's own styles. Three concerns:
     1. A universal safety net so no page overflows the screen on any device.
     2. Responsive fixes for the shared marketing nav (.nav-* classes).
     3. The shared app off-canvas sidebar pattern for .app pages on phones.
   ========================================================================== */

/* ── 1. Universal safety net ────────────────────────────────────────────── */
/* Stop iOS from auto-inflating text. We deliberately do NOT hide horizontal
   overflow — fit-to-screen.js scales the page down to fit instead, so nothing
   is ever cut off. (Hiding overflow would clip content AND hide it from the
   fit calculation, which is the opposite of what we want.) */
html { -webkit-text-size-adjust: 100%; }

/* Media should shrink to fit its container, never push the page wider. */
img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; }

/* Wide tables and code blocks scroll inside themselves instead of the page. */
table { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }

/* ── 2. Marketing nav (index, features, pricing, subjects, support …) ────── */
/* On narrow phones the Sign in / Register buttons used to clip off-screen. */
@media (max-width: 600px) {
  .nav-wrap { gap: 12px; }
  .nav-right { gap: 6px; }
  .nav-btn { padding: 8px 14px; font-size: 11.5px; letter-spacing: 0.05em; }
}
@media (max-width: 380px) {
  .nav-wrap { gap: 8px; }
  .nav-btn { padding: 7px 11px; letter-spacing: 0.03em; }
  .logo-name { font-size: 17px; }
}

/* ── 3. App pages: collapse the fixed sidebar into an off-canvas drawer ──── */
/* Scoped to .app so marketing pages are untouched. Pages that already ship
   this pattern inline keep working; pages that don't now get it for free. */
@media (max-width: 768px) {
  .app .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 100;
  }
  .app .sidebar.open { transform: translateX(0); }
  .app .main { margin-left: 0; }
  /* Give the hamburger room above the page title when it appears. */
  .app .topbar > .mobile-menu-btn { margin-bottom: 14px; }
}

/* Hamburger toggle + dimming overlay (hidden on desktop, shown on phones). */
.mobile-menu-btn {
  display: none;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; flex-shrink: 0;
}
@media (max-width: 768px) { .mobile-menu-btn { display: flex; } }

.mobile-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.35); z-index: 99;
}
.mobile-overlay.active { display: block; }

/* ── 4. Focus-visible — keyboard navigation (#14) ───────────────────────── */
/* Show a clear outline only when navigating by keyboard, not on mouse click. */
:focus-visible {
  outline: 2px solid var(--accent, #2563EB);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── 5. Dark mode — system preference (#13) ─────────────────────────────── */
/* Overrides the CSS custom properties so every component that uses them
   automatically flips. No markup changes needed on individual pages. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0F1B2D;
    --surface:      #162035;
    --surface2:     #1C2A42;
    --surface3:     #243350;
    --border:       #2C3F5C;
    --border-hover: #3B82F6;
    --text:         #E2ECFB;
    --muted:        #7B98BF;
    --muted2:       #7A93B8;
    --accent:       #3B82F6;
    --accent-dark:  #60A5FA;
    --accent-dim:   rgba(59,130,246,0.15);
    --accent-glow:  rgba(59,130,246,0.28);

    --red:          #F87171;
    --red-bg:       rgba(248,113,113,0.12);
    --red-border:   rgba(248,113,113,0.28);
    --red-text:     #FCA5A5;

    --amber:        #FBBF24;
    --amber-bg:     rgba(251,191,36,0.12);
    --amber-border: rgba(251,191,36,0.28);
    --amber-text:   #FDE68A;

    --green:        #4ADE80;
    --green-bg:     rgba(74,222,128,0.12);
    --green-border: rgba(74,222,128,0.28);
    --green-text:   #86EFAC;

    /* Pro-card gradients fade to this; light mode falls back to #F6FBFE. */
    --card-glow-end: var(--surface2);
    /* Weekend tint in the exam calendars; light falls back to a pale wash. */
    --cal-weekend: rgba(255,255,255,0.03);

    /* Dark-only text tokens. Pages write them as var(--x, #light-hex): light
       mode never defines them, so it keeps that exact hex, and dark mode
       swaps in a shade that reads on the navy surfaces. */
    --amber-text-strong: var(--amber-text);
    --amber-vivid:       var(--amber);
    --red-vivid:         var(--red);
    --emerald-text:      var(--green);
    --green-text-strong: var(--green-text);
    --violet-text:       #C4B5FD;

    /* Dark --accent (#3B82F6) is too light for white text (3.7:1) and too
       dark for text on the surfaces (3.9-4.4:1). Solid fills under white
       text use --accent-solid(-end) instead, the light theme's own blues
       (5.2:1 / 6.7:1); accent-coloured text uses --accent-text. */
    --accent-solid:      #2563EB;
    --accent-solid-end:  #1D4ED8;
    --accent-text:       var(--accent-dark);
  }

  /* Soften heavy orb blobs so they don't over-power the dark background */
  .orb { opacity: 0.5; }

  /* Landing-page grid overlay is too harsh in dark mode */
  body::before { opacity: 0.4; }

  /* Nav background in dark mode */
  nav { background: rgba(22,32,53,0.92); }

  /* Frosted-glass cards need an adjusted shimmer */
  .preview-card { background: var(--surface); }
}

/* ── 6. Explicit dark/light — user toggle overrides system preference ─────── */
/* html[data-theme="dark"] has specificity (0,1,1) which beats :root (0,1,0),
   so it always wins regardless of which stylesheet defined the light values.
   theme.js sets this attribute synchronously before first paint.             */

html[data-theme="dark"] {
  --bg: #0F1B2D; --surface: #162035; --surface2: #1C2A42; --surface3: #243350;
  --border: #2C3F5C; --border-hover: #3B82F6;
  --text: #E2ECFB; --muted: #7B98BF; --muted2: #7A93B8;
  --accent: #3B82F6; --accent-dark: #60A5FA;
  --accent-dim: rgba(59,130,246,0.15); --accent-glow: rgba(59,130,246,0.28);
  --red: #F87171; --red-bg: rgba(248,113,113,0.12); --red-border: rgba(248,113,113,0.28); --red-text: #FCA5A5;
  --amber: #FBBF24; --amber-bg: rgba(251,191,36,0.12); --amber-border: rgba(251,191,36,0.28); --amber-text: #FDE68A;
  --green: #4ADE80; --green-bg: rgba(74,222,128,0.12); --green-border: rgba(74,222,128,0.28); --green-text: #86EFAC;
  --card-glow-end: var(--surface2);
  --cal-weekend: rgba(255,255,255,0.03);
  --amber-text-strong: var(--amber-text); --amber-vivid: var(--amber);
  --red-vivid: var(--red); --emerald-text: var(--green);
  --green-text-strong: var(--green-text); --violet-text: #C4B5FD;
  --accent-solid: #2563EB; --accent-solid-end: #1D4ED8; --accent-text: var(--accent-dark);
}
html[data-theme="dark"] .orb { opacity: 0.5; }
html[data-theme="dark"] body::before { opacity: 0.4; }
html[data-theme="dark"] nav { background: rgba(22,32,53,0.92); }
html[data-theme="dark"] .preview-card { background: var(--surface); }

/* White text sits on the status colours (--red, --green, --amber) in a few
   places. Dark mode lightens those colours, so white on them drops below
   2:1. The sign-out button keeps a deep red; dots and answer letters take dark
   text instead. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .signout-btn.confirm { background: #DC2626; border-color: #DC2626; color: #fff; }
    html:not([data-theme="light"]) .signout-btn.confirm:hover { background: #B91C1C; border-color: #B91C1C; }
    html:not([data-theme="light"]) .day-done, html:not([data-theme="light"]) .day-today, html:not([data-theme="light"]) .option-btn.correct .option-letter, html:not([data-theme="light"]) .option-btn.wrong .option-letter, html:not([data-theme="light"]) .option-btn.reveal .option-letter { color: #0F1B2D; }
}
html[data-theme="dark"] .signout-btn.confirm { background: #DC2626; border-color: #DC2626; color: #fff; }
html[data-theme="dark"] .signout-btn.confirm:hover { background: #B91C1C; border-color: #B91C1C; }
html[data-theme="dark"] .day-done, html[data-theme="dark"] .day-today, html[data-theme="dark"] .option-btn.correct .option-letter, html[data-theme="dark"] .option-btn.wrong .option-letter, html[data-theme="dark"] .option-btn.reveal .option-letter { color: #0F1B2D; }

/* Force light — overrides system dark preference when user chose light */
html[data-theme="light"] {
  --bg: #EAF2FC; --surface: #FFFFFF; --surface2: #F0F6FD; --surface3: #DBE8F6;
  --border: #B8D0E8; --border-hover: #2563EB;
  --text: #0B1E3F; --muted: #445F85; --muted2: #7891B0;
  --accent: #2563EB; --accent-dark: #1D4ED8;
  --accent-dim: rgba(37,99,235,0.1); --accent-glow: rgba(37,99,235,0.2);
  --red: #DC2626; --red-bg: rgba(220,38,38,0.07); --red-border: rgba(220,38,38,0.18); --red-text: #B91C1C;
  --amber: #D97706; --amber-bg: rgba(217,119,6,0.07); --amber-border: rgba(217,119,6,0.18); --amber-text: #B45309;
  --green: #16A34A; --green-bg: rgba(22,163,74,0.07); --green-border: rgba(22,163,74,0.18); --green-text: #15803D;
  --card-glow-end: #F6FBFE;
  --cal-weekend: rgba(248,251,254,0.6);
  /* Unset the dark-only text tokens so each use falls back to its own hex. */
  --amber-text-strong: initial; --amber-vivid: initial;
  --red-vivid: initial; --emerald-text: initial;
  --green-text-strong: initial; --violet-text: initial;
  --accent-solid: initial; --accent-solid-end: initial; --accent-text: initial;
}