/* ============================================================================
   Ollie — brand tokens + shared components + owl-avatar state animations.
   Palette (pinned): owl-brown #8b5e34, cream #c89b6a, amber #f2a03d,
   deep-navy #1b2540 / #33507a, ink #f4f1ea.
   ========================================================================== */
:root {
  --owl-brown: #8b5e34;
  --owl-brown-deep: #5f3d20;
  --cream: #c89b6a;
  --amber: #f2a03d;
  --amber-deep: #d9812a;
  --navy: #1b2540;
  --navy-2: #33507a;
  --ink: #f4f1ea;
  --ink-dim: #cfc9bb;

  --bg: var(--navy);
  --bg-panel: #22304f;
  --bg-card: #2b3c60;
  --text: var(--ink);
  --text-dim: var(--ink-dim);
  --border: rgba(244, 241, 234, 0.14);
  --focus: var(--amber);
  --danger: #e06a5b;
  --ok: #6fbf8b;

  --radius: 18px;
  --radius-sm: 10px;
  --radius-lg: 28px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.20);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-round: "Nunito", "Baloo 2", var(--font);
  --tap: 48px;
  --content-w: 1080px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: radial-gradient(1200px 700px at 50% -10%, var(--navy-2), var(--navy)) fixed;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- dyslexia-friendly toggle (no external font fetch) ------------------- */
body[data-dyslexia="on"] {
  --font: "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  letter-spacing: 0.03em;
  word-spacing: 0.08em;
  line-height: 1.7;
  font-weight: 600;
}
body[data-dyslexia="on"] * { letter-spacing: inherit; }

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* ---- nav / footer -------------------------------------------------------- */
.ollie-nav {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  max-width: var(--content-w); margin: 0 auto;
}
.ollie-nav__brand { display: flex; align-items: center; gap: 0.5rem; color: var(--ink);
  font-weight: 800; font-size: 1.3rem; letter-spacing: 0.01em; }
.ollie-nav__brand:hover { text-decoration: none; }
.ollie-nav__links { display: flex; gap: 1.25rem; margin-left: 1.5rem; }
.ollie-nav__links a { color: var(--text-dim); font-weight: 600; }
.ollie-nav__actions { margin-left: auto; display: flex; gap: 0.6rem; align-items: center; }
.ollie-footer {
  max-width: var(--content-w); margin: 3rem auto 1.5rem; padding: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  color: var(--text-dim); font-size: 0.85rem; border-top: 1px solid var(--border);
}
.ollie-footer__trust { color: var(--amber); font-weight: 600; }
.ollie-main { max-width: var(--content-w); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* ---- buttons ------------------------------------------------------------- */
.ollie-btn {
  font: inherit; font-weight: 700; cursor: pointer;
  min-height: var(--tap); padding: 0.7rem 1.4rem;
  border-radius: 999px; border: 2px solid transparent;
  background: var(--amber); color: #241606;
  transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease;
}
.ollie-btn:hover { filter: brightness(1.06); }
.ollie-btn:active { transform: translateY(1px) scale(0.99); }
.ollie-btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.ollie-btn--brown { background: var(--owl-brown); color: var(--ink); }
.ollie-btn--danger { background: var(--danger); color: #2a0d09; }
.ollie-btn--big { font-size: 1.4rem; min-height: 72px; padding: 1rem 2.4rem; border-radius: var(--radius-lg); }
.ollie-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- cards / panels ------------------------------------------------------ */
.ollie-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-soft);
}
.ollie-panel { background: var(--bg-panel); border-radius: var(--radius); padding: 1.25rem; }
.ollie-grid { display: grid; gap: 1.1rem; }
.ollie-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ollie-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---- forms --------------------------------------------------------------- */
.ollie-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.ollie-field label { font-weight: 700; color: var(--text-dim); font-size: 0.9rem; }
.ollie-input, .ollie-select, textarea.ollie-input {
  font: inherit; color: var(--ink); background: #1a2740;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem; min-height: var(--tap);
}
.ollie-input:focus { border-color: var(--amber); outline: none; }

/* ---- pills / badges ------------------------------------------------------ */
.ollie-pill { display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  background: rgba(242,160,61,0.16); color: var(--amber); }
.ollie-pill--ok { background: rgba(111,191,139,0.16); color: var(--ok); }
.ollie-pill--warn { background: rgba(224,106,91,0.16); color: var(--danger); }

/* ---- toasts -------------------------------------------------------------- */
.ollie-toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex;
  flex-direction: column; gap: 0.6rem; z-index: 9999; }
.ollie-toast { background: var(--bg-card); color: var(--ink); border: 1px solid var(--border);
  border-left: 5px solid var(--amber); border-radius: 12px; padding: 0.8rem 1.1rem;
  box-shadow: var(--shadow); max-width: 340px; animation: ollie-toast-in 0.25s ease; }
.ollie-toast--ok { border-left-color: var(--ok); }
.ollie-toast--err { border-left-color: var(--danger); }
@keyframes ollie-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* ============================================================================
   Owl avatar — states: idle | listening | thinking | talking
   Container: .ollie-avatar[data-state]; sized by --owl-size.
   ========================================================================== */
.ollie-avatar { position: relative; width: var(--owl-size, 160px); height: var(--owl-size, 160px);
  display: inline-grid; place-items: center; }
.ollie-avatar__glow { position: absolute; inset: -8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,160,61,0.35), transparent 62%);
  opacity: 0; transition: opacity 0.3s ease; }
.ollie-avatar__owl { width: 100%; height: 100%; transform-origin: 50% 88%; }
.ollie-avatar__owl svg { width: 100%; height: 100%; display: block; }
.ollie-avatar__pupil { transition: transform 0.2s ease; }
.ollie-avatar__beak { transform-origin: 100px 100px; }

/* idle: slow breathing + occasional blink handled in JS via state swaps */
.ollie-avatar[data-state="idle"] .ollie-avatar__owl { animation: ollie-breathe 4s ease-in-out infinite; }

/* listening: gentle lean + amber glow */
.ollie-avatar[data-state="listening"] .ollie-avatar__glow { opacity: 1; }
.ollie-avatar[data-state="listening"] .ollie-avatar__owl { animation: ollie-listen 1.6s ease-in-out infinite; }

/* thinking: eyes drift up, subtle wobble */
.ollie-avatar[data-state="thinking"] .ollie-avatar__owl { animation: ollie-think 2.2s ease-in-out infinite; }
.ollie-avatar[data-state="thinking"] .ollie-avatar__pupil { transform: translateY(-4px); }

/* talking: beak opens/closes + bob */
.ollie-avatar[data-state="talking"] .ollie-avatar__glow { opacity: 0.7; }
.ollie-avatar[data-state="talking"] .ollie-avatar__owl { animation: ollie-talk 0.42s ease-in-out infinite; }
.ollie-avatar[data-state="talking"] .ollie-avatar__beak { animation: ollie-beak 0.42s ease-in-out infinite; }

@keyframes ollie-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes ollie-listen  { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes ollie-think   { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } }
@keyframes ollie-talk    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ollie-beak    { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.6); } }

@media (prefers-reduced-motion: reduce) {
  .ollie-avatar__owl, .ollie-avatar__beak { animation: none !important; }
}

/* ---- captions band (accessibility: on-screen captions of tutor speech) --- */
.ollie-captions { font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 700;
  background: rgba(0,0,0,0.35); border-radius: var(--radius); padding: 1rem 1.4rem;
  min-height: 3.5rem; }

/* ---- utility ------------------------------------------------------------- */
.ollie-hidden { display: none !important; }
.ollie-center { text-align: center; }
.ollie-stack { display: flex; flex-direction: column; gap: 1rem; }
.ollie-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
h1, h2, h3 { line-height: 1.15; }