/* ============================================================================
   PTC / Aerolloy Learning Management System — Shared Design System
   ============================================================================
   WHY A SHARED STYLESHEET:
   The 5 pages of this app previously each carried their own copy of nearly
   identical CSS. Centralizing it here means one visual language across the
   whole app, and one place to tune it going forward.

   COMPATIBILITY CONTRACT (do not break):
   This app has no build step — JavaScript across all 5 pages builds HTML
   strings at runtime and drops in class names like `.session-item`,
   `.result-banner.success`, `.q-answer.rating`, `.cal-sess`, etc., and in
   a few places references CSS variables directly by name, e.g.
   `style="color:var(--muted)"`. Those class names AND these variable names
   --bg --card --border --text --muted --accent --accent-light
   --danger --danger-light --warn --warn-light --radius
   are therefore part of a stable contract with the JS and must keep working
   exactly as before. New tokens are layered underneath; the legacy names
   are aliased onto them so nothing upstream needs to change.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* --- Neutral scale: warm stone, not cold gray — reads as premium/paper-like
     rather than "generic SaaS dashboard blue-gray." --- */
  --n-0:   #FFFFFF;
  --n-25:  #FCFBF9;
  --n-50:  #F7F5F1;
  --n-100: #EFEBE3;
  --n-150: #E6E1D6;
  --n-200: #D9D3C4;
  --n-300: #C0B8A3;
  --n-400: #9C927A;
  --n-500: #756B54;
  --n-600: #574F3D;
  --n-700: #3E382A;
  --n-800: #2A251A;
  --n-900: #1B1810;

  /* --- Accent: the app's existing teal-emerald, deepened and given a full
     scale. Kept in the same hue family for brand continuity, refined for
     2026-era muted/sophisticated feel. Explicitly NOT purple/blue. --- */
  --a-50:  #E8F4EF;
  --a-100: #CDE7DB;
  --a-300: #6FB79C;
  --a-500: #0E7C5F;
  --a-600: #0B6750;
  --a-700: #084F3D;

  /* --- Semantic colors --- */
  --danger-50:  #FBEDEB;
  --danger-500: #B93C31;
  --danger-600: #9A2F26;
  --warn-50:    #FAF0D8;
  --warn-500:   #8A5A0B;

  /* --- Typography ---
     Inter is the modern-sans workhorse of 2026 web design: near-neutral,
     excellent at small sizes (important for dense tables/forms here), and
     variable-weight. System fonts are listed first/as fallback so the page
     never blocks on a font that fails to load. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --fs-xs: 0.75rem;    /* 12px — captions, meta */
  --fs-sm: 0.8125rem;  /* 13px — body small */
  --fs-base: 0.9375rem;/* 15px — body */
  --fs-md: 1.0625rem;  /* 17px — emphasized body */
  --fs-lg: 1.25rem;    /* 20px — section headings */
  --fs-xl: 1.5rem;     /* 24px — page title (desktop) */
  --fs-2xl: 1.875rem;  /* 30px — hero title (desktop) */

  /* --- Spacing: strict 8px grid (with a 4px half-step for tight contexts) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- Radius: soft but not pill-shaped by default --- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* --- Shadows: soft, layered, low-opacity — depth without heaviness --- */
  --shadow-xs: 0 1px 2px rgba(27, 24, 16, 0.05);
  --shadow-sm: 0 1px 3px rgba(27, 24, 16, 0.07), 0 1px 2px rgba(27, 24, 16, 0.05);
  --shadow-md: 0 6px 16px rgba(27, 24, 16, 0.09), 0 2px 4px rgba(27, 24, 16, 0.05);
  --shadow-lg: 0 16px 40px rgba(27, 24, 16, 0.14), 0 4px 10px rgba(27, 24, 16, 0.06);
  --shadow-focus: 0 0 0 3px var(--a-100);

  /* --- Motion: 200–300ms ease-in-out per spec, used consistently --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 320ms;

  /* --- Surface roles (theme-swappable — see dark mode below) --- */
  --bg-page: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-100);
  --border-c: var(--n-150);
  --text-c: var(--n-900);
  --text-muted-c: var(--n-500);
  --text-subtle-c: var(--n-400);

  /* ==========================================================================
     LEGACY VARIABLE ALIASES — required for backward compatibility.
     JS across the app injects HTML with inline `var(--name)` references.
     These names must continue to resolve exactly as they did before.
     ========================================================================== */
  --bg: var(--bg-page);
  --card: var(--surface);
  --border: var(--border-c);
  --text: var(--text-c);
  --muted: var(--text-muted-c);
  --accent: var(--a-500);
  --accent-light: var(--a-50);
  --danger: var(--danger-500);
  --danger-light: var(--danger-50);
  --warn: var(--warn-500);
  --warn-light: var(--warn-50);
  --radius: var(--radius-md);
}

/* ----------------------------------------------------------------------------
   2. DARK MODE
   Two ways in: (a) the user explicitly picked a theme via the toggle
   (persisted as data-theme="dark|light" on <html>, handled by theme.js),
   or (b) no explicit choice has been made yet and the OS is in dark mode.
   Both rules below apply the identical palette so there's one source of
   truth for the dark values.
   ---------------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --n-0:   #17140F; --n-25:  #1B1712; --n-50:  #201C16; --n-100: #2A251D;
  --n-150: #342E24; --n-200: #423B2E; --n-300: #5C5340; --n-400: #8A8066;
  --n-500: #B3A78A; --n-600: #D3C8AE; --n-700: #E6DDC9; --n-800: #F1EBDD;
  --n-900: #FAF6EE;
  --a-50: #113127; --a-100: #14402F; --a-300: #2F8E6E; --a-500: #3EB68F;
  --a-600: #5FCBA6; --a-700: #8ADCC0;
  --danger-50: #3A1613; --danger-500: #E27367; --danger-600: #EF8F84;
  --warn-50: #362A0E; --warn-500: #E0AE4C;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.3);
  --shadow-focus: 0 0 0 3px var(--a-100);
  --bg-page: var(--n-50); --surface: var(--n-25); --surface-2: var(--n-100);
  --border-c: var(--n-150); --text-c: var(--n-900); --text-muted-c: var(--n-500);
  --text-subtle-c: var(--n-400);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --n-0:   #17140F; --n-25:  #1B1712; --n-50:  #201C16; --n-100: #2A251D;
    --n-150: #342E24; --n-200: #423B2E; --n-300: #5C5340; --n-400: #8A8066;
    --n-500: #B3A78A; --n-600: #D3C8AE; --n-700: #E6DDC9; --n-800: #F1EBDD;
    --n-900: #FAF6EE;
    --a-50: #113127; --a-100: #14402F; --a-300: #2F8E6E; --a-500: #3EB68F;
    --a-600: #5FCBA6; --a-700: #8ADCC0;
    --danger-50: #3A1613; --danger-500: #E27367; --danger-600: #EF8F84;
    --warn-50: #362A0E; --warn-500: #E0AE4C;
    --shadow-md: 0 6px 16px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3);
    --bg-page: var(--n-50); --surface: var(--n-25); --surface-2: var(--n-100);
    --border-c: var(--n-150); --text-c: var(--n-900); --text-muted-c: var(--n-500);
    --text-subtle-c: var(--n-400);
  }
}

/* ----------------------------------------------------------------------------
   3. RESET & BASE
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  padding: var(--sp-5);
  max-width: 760px;
  margin: 0 auto;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 640px) {
  body { padding: var(--sp-3); }
}

h1, h2, h3, p { margin: 0; }

/* Visible, WCAG-friendly focus ring on every interactive element */
a, button, input, select, textarea, [tabindex] {
  outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

::selection { background: var(--a-100); color: var(--n-900); }

/* ----------------------------------------------------------------------------
   4. HEADER / BRAND / TITLES
   ---------------------------------------------------------------------------- */
.logo-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.logo-band img { height: 28px; width: auto; object-fit: contain; }
@media (max-width: 480px) { .logo-band img { height: 20px; } }

.header-row { margin-bottom: var(--sp-2); }

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-1);
}
.logo-block { width: 30%; text-align: center; }
.logo-block img { max-width: 100%; max-height: 32px; }
.logo-block .fmt { font-size: 8px; color: var(--muted); margin-top: 3px; }

.app-title {
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: var(--sp-1) 0 var(--sp-2);
  color: var(--text);
}
@media (max-width: 480px) { .app-title { font-size: var(--fs-lg); } }

.title {
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 650;
  letter-spacing: 0.04em;
  margin: var(--sp-1) 0 var(--sp-5);
  color: var(--text-muted-c);
  text-transform: uppercase;
}

.subtitle {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted-c);
  margin: 0 0 var(--sp-5);
  line-height: 1.6;
}

/* Theme toggle button, injected by theme.js into the header */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-c);
  background: var(--surface);
  color: var(--text-muted-c);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.theme-toggle-btn:hover { background: var(--surface-2); color: var(--text); }
.theme-toggle-btn:active { transform: scale(0.94); }
.theme-toggle-btn svg { width: 18px; height: 18px; }
.theme-toggle-btn .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; }

.theme-toggle-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-2);
}

/* ----------------------------------------------------------------------------
   5. NAVIGATION
   ---------------------------------------------------------------------------- */
#nav-band {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  padding: var(--sp-1);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-xs);
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: none;
  color: var(--text-muted-c);
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-btn:hover { background: var(--surface-2); color: var(--text); }
.nav-btn svg { width: 19px; height: 19px; transition: transform var(--dur) var(--ease); }
.nav-btn:hover svg { transform: translateY(-1px); }
.nav-btn.active { color: var(--a-600); background: var(--a-50); font-weight: 650; }
html[data-theme="dark"] .nav-btn.active { color: var(--a-600); }

/* Home screen: tile grid */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.home-tile {
  aspect-ratio: 1;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-xl);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.home-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--a-300);
}
.home-tile:active { transform: translateY(-1px); }
.home-tile svg { width: 32px; height: 32px; color: var(--a-500); }
.home-tile span:not(.badge-soon) {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  padding: 0 var(--sp-2);
}
.badge-soon {
  font-size: 10px;
  font-weight: 650;
  background: var(--warn-50);
  color: var(--warn-500);
  padding: 2px 9px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

.coming-soon-card { text-align: center; padding: var(--sp-8) var(--sp-5); }
.coming-soon-title { font-size: var(--fs-lg); font-weight: 650; margin: 0 0 var(--sp-2); }
.coming-soon-text { font-size: var(--fs-sm); color: var(--text-muted-c); margin: 0; }

/* ----------------------------------------------------------------------------
   6. CARDS & SECTIONS
   ---------------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.session-banner {
  background: var(--a-50);
  color: var(--a-600);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.session-banner strong { font-weight: 650; }

.session-info { font-size: var(--fs-sm); color: var(--text-muted-c); }
.session-info strong { color: var(--text); font-size: var(--fs-md); display: block; margin-bottom: var(--sp-1); font-weight: 650; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.stat {
  background: var(--card);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.stat .num { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.stat .label { font-size: var(--fs-xs); color: var(--text-muted-c); margin-top: var(--sp-1); }

/* ----------------------------------------------------------------------------
   7. FORMS
   ---------------------------------------------------------------------------- */
.field { margin-bottom: var(--sp-3); }
label.field-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-bottom: var(--sp-2);
}

input[type=text], input[type=date], input[type=time], input[type=month],
input[type=password], input[type=file], select, textarea {
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-c);
  font-size: var(--fs-base);
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input[type=text]:focus, input[type=date]:focus, input[type=time]:focus,
input[type=month]:focus, input[type=password]:focus, select:focus, textarea:focus {
  border-color: var(--a-500);
  box-shadow: var(--shadow-focus);
}
input[type=text]::placeholder, textarea::placeholder { color: var(--text-subtle-c); }
input[type=text] { flex: 1; min-width: 160px; }
textarea { resize: vertical; font-family: var(--font-mono); font-size: var(--fs-sm); }

.field-row { display: flex; gap: var(--sp-3); margin-top: 0; flex-wrap: wrap; }

/* ----------------------------------------------------------------------------
   8. BUTTONS
   ---------------------------------------------------------------------------- */
button {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-c);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
button:hover { background: var(--surface-2); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

button.primary {
  background: var(--a-500);
  color: #fff;
  border-color: var(--a-500);
  box-shadow: var(--shadow-sm);
}
button.primary:hover { background: var(--a-600); border-color: var(--a-600); box-shadow: var(--shadow-md); }
button.primary:disabled { background: var(--a-300); border-color: var(--a-300); box-shadow: none; }

button.danger {
  background: var(--danger-500);
  color: #fff;
  border-color: var(--danger-500);
}
button.danger:hover { background: var(--danger-600); border-color: var(--danger-600); }

button.link, button.danger-link {
  border: none;
  background: none;
  padding: 0;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.link { color: var(--a-600); font-size: var(--fs-xs); }
button.danger-link { color: var(--danger-500); font-size: var(--fs-xs); }
button.link:hover, button.danger-link:hover { background: none; opacity: 0.8; }

.row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* ----------------------------------------------------------------------------
   9. LISTS: sessions, employees, calendar
   ---------------------------------------------------------------------------- */
.session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-c);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.session-item:last-child { border-bottom: none; }
.session-item:hover { background: var(--surface-2); }
.session-name { font-size: var(--fs-base); font-weight: 600; }
.session-meta { font-size: var(--fs-xs); color: var(--text-muted-c); margin-top: 2px; }

.emp-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border-c); background: var(--surface); }
.emp-row:last-child { border-bottom: none; }
.emp-name { font-size: var(--fs-sm); font-weight: 500; }
.emp-id { font-size: var(--fs-xs); color: var(--text-muted-c); }
.badge-given { font-size: var(--fs-xs); color: var(--a-600); font-weight: 600; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.cal-dow { font-size: 10px; font-weight: 650; color: var(--text-muted-c); text-align: center; padding: var(--sp-1) 0; text-transform: uppercase; letter-spacing: 0.03em; }
.cal-cell { height: 92px; border: 1px solid var(--border-c); border-radius: var(--radius-sm); padding: var(--sp-1); background: var(--surface); display: flex; flex-direction: column; overflow-y: auto; }
.cal-cell.cal-empty { background: transparent; border-color: transparent; }
.cal-daynum { font-size: 11px; color: var(--text-muted-c); margin-bottom: 2px; font-weight: 600; }
.cal-sess { font-size: 10px; line-height: 1.3; background: var(--a-50); color: var(--a-600); border-radius: 5px; padding: 3px 5px; margin-bottom: 2px; cursor: pointer; overflow-wrap: break-word; word-break: break-word; white-space: normal; flex-shrink: 0; transition: background var(--dur) var(--ease); }
.cal-sess:hover { background: var(--a-100); }

.link-box { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); width: 100%; }
.link-box input { flex: 1; font-size: var(--fs-xs); font-family: var(--font-mono); background: var(--surface-2); }

/* ----------------------------------------------------------------------------
   10. STATUS: banners, badges, hints, errors
   ---------------------------------------------------------------------------- */
.result-banner {
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
  display: none;
  font-size: var(--fs-base);
  animation: bannerIn var(--dur-slow) var(--ease);
}
@keyframes bannerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.result-banner.success { background: var(--a-50); color: var(--a-600); display: block; }
.result-banner.duplicate { background: var(--warn-50); color: var(--warn-500); display: block; }
.result-banner.error { background: var(--danger-50); color: var(--danger-500); display: block; }
.result-banner .name { font-weight: 700; font-size: var(--fs-md); display: block; margin-bottom: 2px; }

.error-text { color: var(--danger-500); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.hint { font-size: var(--fs-xs); color: var(--text-muted-c); margin-top: var(--sp-2); }
.section-hint { font-size: var(--fs-xs); color: var(--text-muted-c); margin: var(--sp-1) 0 var(--sp-3); font-style: italic; }

#sync-warning, .sync-warning {
  display: none;
  font-size: var(--fs-sm);
  color: var(--warn-500);
  background: var(--warn-50);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
}

.id-status { font-size: var(--fs-sm); margin-top: var(--sp-2); font-weight: 500; }
.id-status.ok { color: var(--a-600); }
.id-status.bad { color: var(--danger-500); }

.empty, .empty-state { color: var(--text-muted-c); font-style: italic; }
.empty-state { text-align: center; padding: var(--sp-7) var(--sp-4); font-style: normal; font-size: var(--fs-sm); }

/* ----------------------------------------------------------------------------
   11. QUESTION / ANSWER BLOCKS (feedback view + form)
   ---------------------------------------------------------------------------- */
.q-block { margin-bottom: var(--sp-4); }
.q-num { font-size: var(--fs-xs); color: var(--text-muted-c); font-weight: 600; }
.q-text { font-size: var(--fs-base); font-weight: 600; margin: 2px 0 var(--sp-2); }
.q-answer { font-size: var(--fs-base); background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); white-space: pre-wrap; }
.q-answer.rating { display: inline-block; background: var(--a-50); color: var(--a-600); font-weight: 650; padding: var(--sp-1) var(--sp-4); border-radius: var(--radius-sm); }

.radio-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.radio-opt {
  flex: 1;
  min-width: 70px;
  text-align: center;
  border: 1px solid var(--border-c);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--surface);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.radio-opt input { display: none; }
.radio-opt:hover { border-color: var(--a-300); }
.radio-opt:active { transform: scale(0.97); }
.radio-opt.selected { background: var(--a-50); border-color: var(--a-500); color: var(--a-600); font-weight: 650; }

.success-card { text-align: center; padding: var(--sp-8) var(--sp-5); }
.success-card .check {
  font-size: 44px;
  color: var(--a-500);
  margin-bottom: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--a-50);
}

/* ----------------------------------------------------------------------------
   12. QR CODES
   ---------------------------------------------------------------------------- */
#qr, .qr-large {
  display: flex;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--n-0);
  border-radius: var(--radius-md);
  margin: var(--sp-4) 0;
}
#status { font-size: var(--fs-sm); color: var(--text-muted-c); }

/* ----------------------------------------------------------------------------
   13. MODALS
   ---------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 12, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--sp-4);
  animation: overlayIn var(--dur) var(--ease);
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn var(--dur-slow) var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-title { font-size: var(--fs-lg); font-weight: 650; margin: 0 0 var(--sp-4); }
.name-row { font-size: var(--fs-xs); color: var(--text-muted-c); margin-bottom: var(--sp-4); }

/* ----------------------------------------------------------------------------
   14. LEARNING VAULT SPECIFIC
   ---------------------------------------------------------------------------- */
.toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
.toolbar input[type=text] { flex: 1; min-width: 180px; }

.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.vault-card {
  background: var(--card);
  border: 1px solid var(--border-c);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.vault-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--n-200); }
.vault-card-top { display: flex; gap: var(--sp-3); align-items: flex-start; }

.filetype-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 750;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.filetype-badge.pdf  { background: linear-gradient(135deg, #C6493C, #A6362B); }
.filetype-badge.docx { background: linear-gradient(135deg, #2E6FD9, #1D57B8); }
.filetype-badge.pptx { background: linear-gradient(135deg, #D97B2E, #B85F1D); }

.vault-name { font-size: var(--fs-base); font-weight: 650; color: var(--text); cursor: pointer; background: none; border: none; text-align: left; padding: 0; font-family: inherit; transition: color var(--dur) var(--ease); }
.vault-name:hover { text-decoration: underline; color: var(--a-600); }
.vault-meta { font-size: var(--fs-xs); color: var(--text-muted-c); line-height: 1.5; }
.tag-pill { display: inline-block; background: var(--a-50); color: var(--a-600); font-size: 11px; font-weight: 550; padding: 2px 9px; border-radius: var(--radius-full); margin: 2px 4px 0 0; }
.vault-actions { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--border-c); }

/* ----------------------------------------------------------------------------
   15. UTILITIES
   ---------------------------------------------------------------------------- */
code { font-family: var(--font-mono); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}