/* AI Language Tutor / ThirtyTutors - design tokens
   Deep ink-navy + warm off-white + one muted crimson accent (quiet nod to
   Polish, not literal flag colors). Space Grotesk for headers/UI labels,
   Inter for transcript body text. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #141821;
  --panel: #1b212c;
  --panel-raised: #222a37;
  --border: #2a3140;
  --text: #ede9e3;
  --text-muted: #8b93a3;
  --accent: #c1403d;
  --accent-hover: #d64f4c;
  --accent-soft: rgba(193, 64, 61, 0.16);
  --ok: #7fa98e;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* Light theme - same warm off-white the header comment always promised,
   selected via the System/Light/Dark segmented control in the Settings
   modal's General tab (scripts/theme.js's setThemeMode flips this
   attribute; the no-FOUC snippet in index.html's <head> sets it from
   localStorage before first paint). Light is the fallback when nothing's
   been chosen yet, not System - a deliberate default, not "whatever the
   OS happens to be set to". Same accent color in both themes - it's the
   one deliberate brand color, not something that should shift with
   light/dark. */
html[data-theme="light"] {
  --bg: #f5f1e8;
  --panel: #ffffff;
  --panel-raised: #f0ebe0;
  --border: #ddd4c2;
  --text: #232017;
  --text-muted: #756f60;
  --accent: #c1403d;
  --accent-hover: #a83431;
  --accent-soft: rgba(193, 64, 61, 0.10);
  --ok: #3f8a5c;
}

/* System theme - deliberately a plain, neutral white/dark rather than a
   copy of the Light theme's warm off-white tokens above, so picking
   "System" looks visibly different from picking "Light" even when the OS
   happens to be in light mode. Tracks the OS preference live via the
   media query below - unlike the other two themes, there's no JS
   resolution step for this one (see theme.js), the browser just repaints
   it on its own if the OS preference changes while the app is open. */
html[data-theme="system"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-raised: #f1f1f1;
  --border: #d9d9d9;
  --text: #1f1f1f;
  --text-muted: #5f6368;
  --accent: #c1403d;
  --accent-hover: #a83431;
  --accent-soft: rgba(193, 64, 61, 0.10);
  --ok: #3f8a5c;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #141821;
    --panel: #1b212c;
    --panel-raised: #222a37;
    --border: #2a3140;
    --text: #ede9e3;
    --text-muted: #8b93a3;
    --accent: #c1403d;
    --accent-hover: #d64f4c;
    --accent-soft: rgba(193, 64, 61, 0.16);
    --ok: #7fa98e;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

#app {
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr);
  /* minmax: otherwise the top bar's content width sets the whole page's. */
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh; /* phones: excludes the browser's own bars, so nothing hides behind them */
  width: 100%;
}

/* #pageBody is the shared second grid row (below the top bar) every page
   renders its {% block content %} into - its direct child (#body on the
   learning page, #landingWrap, #avatarSelectApp) stretches to fill it via
   the explicit IDs below rather than a blanket "> *" rule, so a page can
   still add its own overflow/scroll behavior without fighting this. */
#pageBody {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
}
#pageBody > #body,
#pageBody > #landingWrap,
#pageBody > #homeWrap,
#pageBody > #avatarSelectApp {
  flex: 1;
  min-height: 0;
}

/* --- Layout body (main + avatar drawer, learning page only) --- */

#body {
  display: flex;
  min-height: 0;
  width: 100%;
}

/* .icon-btn lives here (not sidebar.css) since the top bar's theme toggle
   uses it too, and the top bar is now shared across every page including
   ones that don't link sidebar.css. */
.icon-btn {
  background: var(--panel-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-btn:disabled { opacity: 0.5; cursor: default; }

/* --- Print (Settings modal -> Data controls -> Print, see settings.js).
   #notesPrintArea is built and populated on demand right before
   window.print() is called, then removed afterward - everything else on
   the page is hidden for the duration via this rule rather than the
   printable content being part of the normal layout all along. --- */
#notesPrintArea { display: none; }
@media print {
  body > *:not(#notesPrintArea) { display: none !important; }
  #notesPrintArea {
    display: block !important;
    position: static;
    color: #000;
    background: #fff;
  }
}

/* Hands-free mic button (learning page top bar) - default muted (plain
   .icon-btn look); .live is the unmuted/listening state, matching the
   talk button's own red-accent "active" language in main.css. */
#handsFreeBtn.live {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}