/* ==========================================================================
   Homeschooling module — a calm, structured, warm long-term curriculum space.
   Reuses TangibleAI's design tokens from styles.css (loaded first) and adds the
   dusty-blue + terracotta accents called for by the module. Deliberately free of
   streaks, leaderboards, reward points and busy animation.
   ========================================================================== */
:root {
  --hs-cream: #fff8ec;
  --hs-sage: #b9cdb7;
  --hs-sage-deep: #6f8f72;
  --hs-dusty-blue: #7a9bb5;
  --hs-dusty-blue-soft: #e8f0f6;
  --hs-terracotta: #c47b61;
  --hs-terracotta-soft: #f8ebe4;
  --hs-ink: #24302a;
  --hs-line: #ece1cf;
}

.hs-body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 80% -10%, #fdeede 0%, transparent 60%),
    radial-gradient(900px 400px at -10% 10%, #eef3ea 0%, transparent 55%),
    var(--hs-cream);
  color: var(--hs-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

/* ---- Top navigation ---- */
.hs-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.25rem;
  background: rgba(255, 248, 236, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hs-line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.hs-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; color: var(--hs-sage-deep); text-decoration: none; margin-right: 0.5rem; }
.hs-brand .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--hs-sage-deep); display: grid; place-items: center; color: #fff; }
.hs-brand small { display: block; font-weight: 600; font-size: 0.72rem; color: var(--hs-terracotta); letter-spacing: 0.02em; }
.hs-nav-links { display: flex; gap: 0.25rem; flex-wrap: wrap; flex: 1; }
.hs-nav a.hs-tab, .hs-nav button.hs-tab {
  font: inherit; font-weight: 600; font-size: 0.9rem;
  color: var(--hs-ink); background: transparent; border: none; cursor: pointer;
  padding: 0.5rem 0.85rem; border-radius: var(--radius-pill, 980px); text-decoration: none;
  transition: background 0.15s;
}
.hs-nav a.hs-tab:hover, .hs-nav button.hs-tab:hover { background: var(--hs-dusty-blue-soft); }
.hs-nav a.hs-tab.active { background: var(--hs-sage-deep); color: #fff; }
.hs-nav .hs-nav-back { font-size: 0.85rem; color: var(--hs-sage-deep); text-decoration: none; font-weight: 600; }
.hs-nav .hs-account { font-size: 0.82rem; color: var(--text-light, #68766d); }

/* ---- Layout ---- */
.hs-main { max-width: 960px; margin: 0 auto; padding: 1.75rem 1.25rem 5rem; }
.hs-page-head { margin-bottom: 1.5rem; }
.hs-page-head h1 { font-size: 1.7rem; margin: 0 0 0.25rem; color: var(--hs-sage-deep); }
.hs-page-head p { margin: 0; color: var(--text-mid, #3f4a42); }
.hs-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; color: var(--hs-terracotta); }

/* ---- Cards ---- */
.hs-card {
  background: #fff; border: 1px solid var(--hs-line); border-radius: 20px;
  padding: 1.4rem; box-shadow: 0 2px 6px rgba(90,65,35,0.06), 0 12px 30px rgba(90,65,35,0.06);
  margin-bottom: 1.1rem;
}
.hs-card h2 { font-size: 1.15rem; margin: 0 0 0.6rem; color: var(--hs-sage-deep); }
.hs-card h3 { font-size: 1rem; margin: 0 0 0.4rem; color: var(--hs-ink); }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.hs-stat { background: var(--hs-dusty-blue-soft); border-radius: 16px; padding: 1rem 1.1rem; }
.hs-stat .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light, #68766d); font-weight: 700; }
.hs-stat .value { font-size: 1.25rem; font-weight: 700; color: var(--hs-sage-deep); margin-top: 0.15rem; }
.hs-stat.tera { background: var(--hs-terracotta-soft); }
.hs-stat.tera .value { color: var(--hs-terracotta); }
.hs-stat.sage { background: var(--accent-soft, #e7efe4); }

/* ---- Buttons ---- */
.hs-btn {
  font: inherit; font-weight: 700; cursor: pointer; border: none; border-radius: var(--radius-pill, 980px);
  padding: 0.7rem 1.3rem; background: var(--hs-sage-deep); color: #fff; transition: background 0.15s, transform 0.05s;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem;
}
.hs-btn:hover { background: #566f58; }
.hs-btn:active { transform: translateY(1px); }
.hs-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hs-btn.secondary { background: #fff; color: var(--hs-sage-deep); border: 1.5px solid var(--hs-line); }
.hs-btn.secondary:hover { background: var(--hs-dusty-blue-soft); }
.hs-btn.tera { background: var(--hs-terracotta); }
.hs-btn.tera:hover { background: #a9634c; }
.hs-btn.block { display: flex; width: 100%; justify-content: center; }
.hs-btn.small { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
.hs-btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---- Forms ---- */
.hs-field { margin-bottom: 1rem; }
.hs-field label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 0.35rem; color: var(--text-mid, #3f4a42); }
.hs-field input, .hs-field select, .hs-field textarea {
  font: inherit; width: 100%; padding: 0.65rem 0.8rem; border: 1.5px solid var(--hs-line);
  border-radius: 12px; background: #fffdf8; color: var(--hs-ink);
}
.hs-field textarea { min-height: 90px; resize: vertical; }
.hs-field input:focus, .hs-field select:focus, .hs-field textarea:focus { outline: none; border-color: var(--hs-sage-deep); }
.hs-checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hs-check {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem;
  border: 1.5px solid var(--hs-line); border-radius: var(--radius-pill, 980px); cursor: pointer; font-size: 0.88rem; background: #fff;
}
.hs-check input { accent-color: var(--hs-sage-deep); }
.hs-check.on { border-color: var(--hs-sage-deep); background: var(--accent-soft, #e7efe4); }

/* ---- Choice tiles (onboarding) ---- */
.hs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; }
.hs-tile {
  border: 1.5px solid var(--hs-line); border-radius: 16px; padding: 1rem; cursor: pointer; background: #fff;
  text-align: left; transition: border-color 0.15s, background 0.15s; font: inherit;
}
.hs-tile:hover { border-color: var(--hs-dusty-blue); }
.hs-tile.on { border-color: var(--hs-sage-deep); background: var(--accent-soft, #e7efe4); }
.hs-tile b { display: block; color: var(--hs-sage-deep); }
.hs-tile small { color: var(--text-light, #68766d); }

/* ---- Progress ---- */
.hs-progress { height: 12px; border-radius: 999px; background: var(--hs-line); overflow: hidden; }
.hs-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--hs-sage), var(--hs-sage-deep)); border-radius: 999px; }
.hs-progress-label { font-size: 0.82rem; color: var(--text-light, #68766d); margin-top: 0.35rem; }

/* ---- Onboarding stepper ---- */
.hs-steps { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hs-step-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; background: var(--hs-line); color: var(--text-light, #68766d); }
.hs-step-dot.on { background: var(--hs-sage-deep); color: #fff; }
.hs-step-dot.done { background: var(--hs-sage); color: #fff; }

/* ---- Daily plan sections ---- */
.hs-section { border: 1px solid var(--hs-line); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 0.8rem; background: #fff; }
.hs-section.done { background: var(--accent-soft, #e7efe4); border-color: var(--hs-sage); }
.hs-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.hs-section-head h3 { margin: 0; color: var(--hs-sage-deep); }
.hs-section-body { white-space: pre-wrap; margin-top: 0.5rem; color: var(--text-mid, #3f4a42); }
.hs-section .hs-notes { margin-top: 0.6rem; }
.hs-pill { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; text-transform: capitalize; }
.hs-pill.pending { background: var(--hs-line); color: var(--text-light, #68766d); }
.hs-pill.complete { background: var(--accent-soft, #e7efe4); color: var(--hs-sage-deep); }
.hs-pill.skipped { background: var(--hs-terracotta-soft); color: var(--hs-terracotta); }

/* ---- Calendar ---- */
.hs-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hs-cal .dow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light, #68766d); text-align: center; font-weight: 700; }
.hs-day { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--hs-line); padding: 0.35rem; font-size: 0.78rem; background: #fff; cursor: pointer; display: flex; flex-direction: column; }
.hs-day .n { font-weight: 700; }
.hs-day .b { font-size: 0.62rem; color: var(--text-light, #68766d); margin-top: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-day.completed { background: var(--accent-soft, #e7efe4); border-color: var(--hs-sage); }
.hs-day.missed { background: #fdeeec; border-color: var(--danger-line, #f3cfc9); }
.hs-day.holiday, .hs-day.break, .hs-day.pause { background: var(--hs-dusty-blue-soft); border-color: var(--hs-dusty-blue); }
.hs-day.festival { background: #fbf5e6; border-color: var(--amber-line, #ecdcb0); }
.hs-day.planned { border-color: var(--hs-sage-deep); }
.hs-day.rest { opacity: 0.55; }
.hs-cal-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.9rem; font-size: 0.78rem; color: var(--text-light, #68766d); }
.hs-cal-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.hs-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--hs-line); }

/* ---- States ---- */
.hs-loading, .hs-empty, .hs-error { text-align: center; padding: 2.5rem 1rem; color: var(--text-light, #68766d); }
.hs-error { color: var(--danger, #c0392b); }
.hs-spinner { width: 34px; height: 34px; border: 3px solid var(--hs-line); border-top-color: var(--hs-sage-deep); border-radius: 50%; margin: 0 auto 0.9rem; animation: hs-spin 0.8s linear infinite; }
@keyframes hs-spin { to { transform: rotate(360deg); } }
.hs-msg { padding: 0.7rem 0.9rem; border-radius: 12px; font-size: 0.9rem; margin: 0.8rem 0; }
.hs-msg.error { background: var(--danger-soft, #fdeeec); color: var(--danger, #c0392b); }
.hs-msg.ok { background: var(--accent-soft, #e7efe4); color: var(--hs-sage-deep); }
.hs-msg.info { background: var(--hs-dusty-blue-soft); color: #3f5a70; }

/* ---- Curriculum tree ---- */
.hs-year-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.7rem; }
.hs-block { border-left: 4px solid var(--hs-dusty-blue); padding: 0.6rem 0.9rem; margin-bottom: 0.6rem; background: #fffdf8; border-radius: 0 12px 12px 0; }
.hs-block b { color: var(--hs-sage-deep); }
.hs-block .meta { font-size: 0.78rem; color: var(--text-light, #68766d); }
.hs-block.explored { border-left-color: var(--hs-sage-deep); }
.hs-block.current { border-left-color: var(--hs-terracotta); background: var(--hs-terracotta-soft); }

.hs-work-samples { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.7rem; }
.hs-work-samples figure { margin: 0; width: 120px; }
.hs-work-samples img { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; border: 1px solid var(--hs-line); }
.hs-work-samples figcaption { font-size: 0.72rem; color: var(--text-light, #68766d); }

@media (max-width: 640px) {
  .hs-main { padding: 1.25rem 0.9rem 4rem; }
  .hs-nav { padding: 0.7rem 0.9rem; }
  .hs-day .b { display: none; }
}