/* base.css — the shared foundation every subject's theme sits on top of.
   Tokens and component grammar are taken from the Oct 20 blueprint mockups
   (Design artifact 9z8M5HmimnT5xiYidC3TR4); colors were sampled from the
   rendered mockup pages. Warm cream page, "Baloo 2" for display text,
   "Nunito" for body, big rounded cards, pill buttons, and the "pressed"
   bottom edge (a no-blur box-shadow straight down in a darker shade of the
   element's own color) the mockups use on every card and button.

   This file stays GENERIC: layout, type scale, and component shape (what a
   button/card/modal/header IS), never a subject's own color story. Screens
   built on top of it: css/home.css (child picker, child home, subject tiles)
   and css/trophy.css (Trophy room). A course's look lives in
   css/subjects/<name>.css, which only defines the --tile-* / --shelf-* tokens
   those screens read, never a component's structure. */

:root{
  /* ---- fonts ---- */
  --font-display: 'Baloo 2', system-ui, sans-serif;  /* headings, big numbers, anything playful */
  --font-body:    'Nunito', system-ui, sans-serif;   /* everything else */

  /* ---- base palette (sampled from the mockups) ---- */
  --cream:       #f3ebe0;  /* page background */
  --cream-card:  #fbf6ef;  /* card background, a shade lighter than the page */
  --ink:         #2b2924;
  --ink-soft:    #6b6258;
  --line:        #e0d2bd;
  --tan:         #e6dac6;  /* quiet buttons on cream (back button, footer pills) */
  --tan-line:    #d4c1a6;

  /* ---- shared brand teal (header band, primary actions, wordmark) ---- */
  --teal:        #205e5b;
  --teal-dark:   #144542;
  --teal-light:  #e4efec;

  /* ---- accents ---- */
  --gold:        #d9a03f;
  --rust:        #c36a4a;
  --rust-dark:   #9c4a30;

  /* ---- a subject theme overrides ONLY these two, never the tokens above ---- */
  --accent:      var(--teal);
  --accent-dark: var(--teal-dark);

  --radius-lg:   36px;  /* hero/feature blocks, subject tiles */
  --radius:      22px;  /* cards */
  --radius-sm:   14px;  /* buttons, inputs, small chips */
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 800;
}

button{
  font-family: inherit;
  cursor: pointer;
}

.hidden{ display: none !important; }

/* ---------- Screens ---------- */

.screen{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Header band ---------- */

.app-header{
  background: var(--accent);
  color: #fff;
  padding: 14px 16px;
  /* Leaves room for a phone's status bar / notch when this is added to the
     home screen as a PWA, or when a mobile browser's own chrome overlaps
     the top of the page — env() falls back to 0 on browsers that don't
     support it, so this is a no-op anywhere it isn't needed. */
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-header .back-btn{
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  border-radius: 14px;
  width: 44px;
  height: 44px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-header .back-btn:hover{ background: rgba(255,255,255,0.3); }
.app-header .greeting{
  flex: 1;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
}
.app-header .header-btn{
  background: rgba(255,255,255,0.16);
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: 14px;
}
.app-header .header-btn:hover{ background: rgba(255,255,255,0.3); }

/* ---------- Shared bits ---------- */

.empty-state{
  color: var(--ink-soft);
  text-align: center;
  font-size: 14px;
}
.content{
  flex: 1;
  padding: 18px 16px 40px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* small floating notice, for "that part isn't built yet" taps */
.toast{
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--teal-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  z-index: 80;
  max-width: calc(100vw - 32px);
  text-align: center;
}

/* ---------- Modals (Grown-up PIN gate, in-screen quizzes) ---------- */

.modal-bg{
  position: fixed; inset: 0;
  background: rgba(43,41,36,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  z-index: 50;
}
.modal{
  background: var(--cream-card);
  border-radius: var(--radius);
  padding: 26px;
  max-width: 340px;
  width: 100%;
}
.modal h2{
  margin: 0 0 14px;
  color: var(--teal-dark);
  font-size: 20px;
}
.modal input{
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 16px;
  margin-bottom: 10px;
  font-family: var(--font-body);
}
.modal .row{
  display: flex;
  gap: 8px;
}

/* ---------- Buttons — pill-shaped, with the mockups' "pressed" bottom shadow on primary ---------- */

.btn-primary{
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-weight: 800;
  font-size: 15px;
  flex: 1;
  box-shadow: 0 4px 0 var(--accent-dark);
}
.btn-primary:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--accent-dark); }
.btn-secondary{
  background: var(--teal-light);
  color: var(--teal-dark);
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-weight: 800;
  font-size: 15px;
}
.status-line{
  font-size: 13px;
  margin-top: 8px;
  font-weight: 700;
}
.status-line.err{ color: #9a3b1f; }
.status-line.ok{ color: #2f6e2f; }

/* ---------- Reading screen (structure here; color accent in subjects/reading.css) ---------- */

.reading-track{
  background: var(--cream-card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.reading-track h2{
  margin: 0 0 10px;
  font-size: 19px;
  color: var(--accent-dark);
}
.stamps-row{ margin: 0 0 12px; }
.stamp{
  display: inline-block;
  background: var(--teal-light);
  color: var(--teal-dark);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 4px 4px 0;
  font-size: 12px;
  font-weight: 800;
}
.constellation-progress{
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-weight: 700;
}
.book-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.book-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.book-row:first-child{ border-top: none; }
.book-row.mastered{ opacity: 0.7; }
.book-title{ font-size: 15px; font-weight: 700; }
.book-grl{ color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.quiz-options{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.quiz-options .quiz-option-btn{ flex: 1 1 auto; }
.quiz-result{
  text-align: center;
  padding: 10px 0 4px;
}
.quiz-result .quiz-result-headline{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-dark);
  margin: 0 0 6px;
}
.quiz-result .quiz-result-detail{
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

/* ---------- Grown-up setup forms ---------- */

.setup-panel h3{
  font-family: var(--font-display);
  color: var(--teal-dark);
  font-size: 17px;
  margin: 18px 0 8px;
}
.setup-form{
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--cream-card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 8px;
}
.setup-form label{
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 4px;
}
.setup-form input[type="text"],
.setup-form select{
  padding: 9px 11px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
  background: #fff;
}
.setup-form label input[type="checkbox"]{ margin-right: 6px; }
.question-block{
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.question-block-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.question-block-header span{
  font-weight: 800;
  font-size: 13px;
  color: var(--teal-dark);
}
.remove-question-btn, .remove-option-btn{
  background: none;
  border: none;
  color: var(--rust);
  font-weight: 800;
  font-size: 13px;
  padding: 4px 8px;
}
.option-row{
  display: flex;
  align-items: center;
  gap: 6px;
}
.option-row input{ flex: 1; }