/* =====================================================================
   Calm — a clean, uncluttered, reading-first template. The opposite of
   heavy chrome: flat surfaces, quiet hairline borders, warm paper
   neutrals, generous whitespace and a comfortable reading measure with
   a humanist font. Tuned for low cognitive load and effortless
   navigation. Everything is scoped to :root[data-template="calm"], so
   no other template is affected. Token-driven, light + dark.
   ===================================================================== */

:root[data-template="calm"] {
  /* comforting humanist reading type */
  --font-en: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font: var(--font-en);

  /* soft, unobtrusive rounding */
  --radius: 14px; --radius-sm: 10px;

  /* quiet, barely-there depth — flat by default, a whisper on lift */
  --shadow:    0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
  --shadow-lg: 0 6px 24px color-mix(in srgb, var(--ink) 9%, transparent);

  /* calm neutral surfaces, no gradients */
  --grad-brand: var(--brand);
  --glow-brand: transparent;
}
:root[data-template="calm"][data-theme="dark"] {
  --shadow:    0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.42);
}

/* ---- A quiet, flat page: no ambient wash, just calm paper ---- */
:root[data-template="calm"] body {
  background: var(--bg);
  letter-spacing: .002em;
}

/* =====================================================================
   Surfaces — flat cards with a single quiet hairline, no heavy shadow.
   Depth appears only on genuine interaction, never at rest.
   ===================================================================== */
:root[data-template="calm"] .card,
:root[data-template="calm"] .tcard,
:root[data-template="calm"] .comp,
:root[data-template="calm"] .stat,
:root[data-template="calm"] .kpi,
:root[data-template="calm"] .q-block,
:root[data-template="calm"] .continue-card,
:root[data-template="calm"] .toc {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: none;
}
:root[data-template="calm"] .tcard:hover,
:root[data-template="calm"] .continue-card:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
  box-shadow: var(--shadow);
  transform: none;
}

/* soft interior grouping surfaces */
:root[data-template="calm"] .mini-row,
:root[data-template="calm"] .q-option,
:root[data-template="calm"] .chip {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  box-shadow: none;
}

/* =====================================================================
   Chrome — the navbar, sidebar and topbar recede: no shadow, one calm
   line, so attention stays on the content.
   ===================================================================== */
:root[data-template="calm"] .navbar,
:root[data-template="calm"] .topbar {
  background: color-mix(in srgb, var(--bg-elev) 88%, var(--bg));
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
:root[data-template="calm"] .sidebar {
  background: var(--bg);
  border-inline-end: 1px solid var(--line);
  box-shadow: none;
}

/* nav items: quiet, generous, a soft filled pill only when active */
:root[data-template="calm"] .nav-item,
:root[data-template="calm"] .side-link {
  border-radius: var(--radius-sm);
  transition: background-color .14s ease, color .14s ease;
}
:root[data-template="calm"] .nav-item:hover,
:root[data-template="calm"] .side-link:hover {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
:root[data-template="calm"] .nav-item.active,
:root[data-template="calm"] .side-link.active {
  background: var(--accent-soft);
  color: var(--brand);
  box-shadow: none;
}

/* =====================================================================
   Reading — the heart of this theme. A comfortable measure, roomy line
   height and calm hierarchy make long sessions effortless.
   ===================================================================== */
:root[data-template="calm"] .session-body { max-width: 72ch; }
:root[data-template="calm"] .session-body p.para {
  font-size: 1.12rem; line-height: 1.9; margin: 1.15rem 0;
  color: var(--ink); letter-spacing: .002em;
}
:root[data-template="calm"] .session-body p.para.muted { color: var(--ink-soft); }
:root[data-template="calm"] .session-body .bullets,
:root[data-template="calm"] .session-body .numbered { line-height: 1.85; }
:root[data-template="calm"] .session-body .bullets li,
:root[data-template="calm"] .session-body .numbered li { margin: .6rem 0; }
:root[data-template="calm"] .session-body .h2 {
  margin-top: 3rem; letter-spacing: -.01em; font-weight: 700;
}
:root[data-template="calm"] .session-body .h3 { margin-top: 2rem; }

/* headings across the app: firm but not shouty */
:root[data-template="calm"] .page-title { letter-spacing: -.015em; font-weight: 700; }

/* =====================================================================
   Callouts — communicated with a calm side rule and soft tint instead
   of a boxed, shadowed block. Less visual noise, same emphasis.
   ===================================================================== */
:root[data-template="calm"] .callout {
  background: color-mix(in srgb, var(--brand) 5%, var(--bg-elev));
  border: 1px solid var(--line);
  border-inline-start: 3px solid color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: none;
}

/* =====================================================================
   Controls — flat, legible inputs and quiet buttons with a comfortable
   hit area. The primary button is a solid calm fill, no gradient/glow.
   ===================================================================== */
:root[data-template="calm"] .field input,
:root[data-template="calm"] .field select,
:root[data-template="calm"] .field textarea {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
:root[data-template="calm"] .field input:focus,
:root[data-template="calm"] .field select:focus,
:root[data-template="calm"] .field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
:root[data-template="calm"] .btn { box-shadow: none; }
:root[data-template="calm"] .btn-primary {
  background: var(--brand);
  border: 1px solid transparent;
}
:root[data-template="calm"] .btn-primary:hover {
  background: color-mix(in srgb, var(--brand) 88%, #000);
}

/* =====================================================================
   Quiz — tactile but calm answer cards; the selected state is a soft
   tint, not a loud ring.
   ===================================================================== */
:root[data-template="calm"] .q-option:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, var(--bg-soft));
  transform: none;
}
:root[data-template="calm"] .q-option.selected {
  border-color: var(--brand);
  background: var(--accent-soft);
  box-shadow: none;
}
:root[data-template="calm"] .q-option.selected .q-key {
  background: var(--brand); color: #fff;
}

/* =====================================================================
   Reduced motion — nothing here relies on movement, but keep hovers
   perfectly still for those who ask.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root[data-template="calm"] .tcard:hover,
  :root[data-template="calm"] .q-option:hover:not(:disabled) { transform: none; }
}