/* hub/parent.css — the parent view, layered on hub.css. */

.parent-note {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: 1.6rem;
  text-align: center;
  line-height: 1.6;
}
.parent-note a { color: var(--neon-2); }

.kid-card { margin-top: 1.4rem; position: relative; }

/* Hide/show a profile from the parent view (e.g. a parent's own test profile). */
.kid-hide {
  position: absolute; top: 0.9rem; right: 0.9rem;
  background: none; border: 1px solid var(--line, #2b2740); color: var(--text-dim);
  border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.72rem; cursor: pointer;
}
.kid-hide:hover { color: var(--text); border-color: var(--text-dim); }
.parent-hidden-note {
  position: static; margin-top: 1.2rem; color: var(--text-dim); font-size: 0.85rem;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.parent-hidden-note .kid-hide { position: static; }

/* 💾 Backup & restore panel. */
.backup-bar { border-left: 3px solid var(--accent, #ff3caa); }
.backup-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 0.3rem; }
.backup-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.7rem; }
.backup-dl { margin: 0; }
.backup-restore { position: static; }
.backup-msg { margin-top: 0.55rem; min-height: 1.1em; }
.backup-msg.ok { color: #86d6a2; }
.backup-msg.bad { color: #ff8a6a; }

/* Per-kid language focus — parent picks which ab-initio language each kid
   takes, so the Coach + "where to help" ignore the other language's dabbling. */
.kid-lang {
  margin-top: 0.6rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.kid-lang-label { font-size: 0.78rem; color: var(--text-dim); }
.kid-logbook {
  margin: 0.35rem 0;
  padding: 0.4rem 0.65rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.kid-logbook b { color: var(--text); }
.kid-lang-opt {
  font: inherit; font-size: 0.78rem; cursor: pointer;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--line, #2b2740); background: none; color: var(--text-dim);
}
.kid-lang-opt:hover { color: var(--text); }
.kid-lang-opt.on { border-color: var(--accent, #ff3caa); color: var(--text); font-weight: 700; }

.kid-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.kid-face { font-size: 1.8rem; }
.kid-name { font-weight: 800; font-size: 1.25rem; }
.kid-when { color: var(--text-dim); font-size: 0.8rem; margin-left: auto; }

.kid-games { display: grid; gap: 0.8rem; margin-top: 1rem; }
.kid-game { display: grid; gap: 0.25rem; }
.kid-game-name { font-weight: 700; font-size: 0.95rem; }
.kid-game-meta { color: var(--text-dim); font-size: 0.82rem; }
.kid-open { color: var(--neon-3); }

.kid-bar {
  position: relative;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.kid-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--good), #2f9e63);
  border-radius: 999px;
}
.kid-bar-label {
  position: relative;
  display: block;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.25rem;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.kid-nosync {
  margin-top: 0.7rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-dim);
  border-left: 3px solid var(--neon-3);
  background: rgba(255, 225, 77, 0.05);
  padding: 0.5rem 0.7rem;
  border-radius: 0 8px 8px 0;
}
.kid-nosync b { color: var(--neon-3); }

.kid-untouched {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  border-left: 2px solid var(--line);
  padding-left: 0.6rem;
}

.kid-misses-title { margin-top: 1.1rem; font-weight: 800; font-size: 0.95rem; }
.kid-misses { list-style: none; padding: 0; margin-top: 0.5rem; display: grid; gap: 0.35rem; }
.kid-miss {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  font-size: 0.88rem;
}
.kid-miss-game { margin-right: 0.3rem; }
.kid-miss-count {
  float: right;
  color: var(--neon-3);
  font-size: 0.78rem;
  font-weight: 700;
}

.kid-streak {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--neon-3, #ffe14d);
  border: 1px solid rgba(255, 176, 32, 0.4);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  cursor: help;
}

/* ------------------------------------------------ syllabus coverage map */
.coverage-panel { margin-top: 1.2rem; }
.coverage-subject { margin: 0.9rem 0; }
.coverage-subject-name { font-size: 1rem; margin-bottom: 0.3rem; }
.coverage-kid { color: var(--text-dim, #9d94b3); font-size: 0.82rem; }
.coverage-units { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; }
.coverage-unit { font-size: 0.88rem; padding: 0.18rem 0.4rem; border-radius: 6px; }
.coverage-unit.is-covered { color: #7fe0a0; }
.coverage-unit.is-partial { color: #e8d27c; }
.coverage-unit.is-built { color: #7cc7e8; }
.coverage-unit.is-gap { color: var(--text-dim, #9d94b3); }
.coverage-unit.is-nongoal { color: var(--text-dim, #9d94b3); font-style: italic; }
.coverage-chip { display: inline-block; width: 1.2em; font-weight: 800; }
.coverage-via { color: var(--text-dim, #9d94b3); font-size: 0.82rem; }
.coverage-next { font-size: 0.9rem; padding-left: 1.4rem; display: grid; gap: 0.3rem; }

.btn-claim {
  font-family: "Press Start 2P", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  border: none;
  background: linear-gradient(180deg, var(--neon, #ff3d9a), #c22371);
  color: #fff;
  cursor: pointer;
}
.btn-claim:hover { filter: brightness(1.12); }

/* ⧗ Inception — review-intensity knob, a small subsection inside the
   switchboard panel. Buttons reuse the .kid-lang-opt segmented-control look. */
.retention-panel {
  margin: 0.9rem 0 1.3rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line, #2b2740);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.retention-title { font-weight: 800; font-size: 0.95rem; margin-bottom: 0.3rem; }
.retention-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.retention-msg { margin-left: 0.2rem; min-height: 1.1em; }

/* the switchboard */
.switchboard { margin-top: 1.2rem; }
.switch-group { margin: 0.9rem 0 0.4rem; }
.switch-subject {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neon-2, #35e6ff);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 0.3rem;
  margin-bottom: 0.6rem;
}
.switch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.55rem 1.2rem; margin: 0 0 0.4rem; }
.switch-row { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-size: 0.92rem; }
.switch-row input { accent-color: var(--neon, #ff3d9a); width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; flex: 0 0 auto; }
.switch-text { display: flex; flex-direction: column; line-height: 1.3; }
.switch-topic { font-size: 0.76rem; color: var(--text-dim, #9aa); margin-top: 0.1rem; }
.switch-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

/* The Coach's notes on each kid card — per-subject readiness nudges. */
.coach-headline { color: #ffd21e; font-weight: 700; }
.coach-notes { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.coach-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border-left: 3px solid var(--line, #333);
  background: rgba(255, 255, 255, 0.03);
}
.coach-subj { font-weight: 600; }
.coach-head { font-weight: 600; text-align: right; }
.coach-detail { grid-column: 1 / -1; font-size: 0.86rem; opacity: 0.8; line-height: 1.4; }
.coach-note.is-revise { border-left-color: #ff8a5c; }
.coach-note.is-revise .coach-head { color: #ff8a5c; }
.coach-note.is-ready { border-left-color: #4fc9a0; }
.coach-note.is-ready .coach-head { color: #4fc9a0; }
.coach-note.is-ontrack { border-left-color: #4fc9a0; }
.coach-note.is-polish { border-left-color: #4cc9f0; }
.coach-note.is-idle { border-left-color: #9aa; }
.coach-note.is-idle .coach-head { color: #9aa; }

/* ✍ the kid's own Inception words. */
.kid-own-words { color: var(--text-dim); font-size: 0.88rem; line-height: 1.5; margin-top: 0.3rem; }

/* 🧠 Inception analytics — the parent's long view: workload calendar +
   weekly retention trend against the family's chosen retention target. */
.inc-analytics { border-left: 3px solid var(--neon-2, #35e6ff); margin-top: 1.4rem; }
.inc-sub { margin-top: 1rem; }
.inc-sub-title { font-weight: 700; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.5rem; }
.inc-note { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-dim); font-style: italic; }

.cal-strip { display: flex; align-items: flex-end; gap: 2px; height: 56px; padding-bottom: 0.3rem; }
.cal-bar {
  flex: 1 1 0; min-width: 3px; border-radius: 2px 2px 0 0;
  background: var(--neon-2, #35e6ff); opacity: 0.9;
}
.cal-bar.forecast {
  background: repeating-linear-gradient(45deg,
    var(--text-dim, #9d94b3), var(--text-dim, #9d94b3) 2px, transparent 2px, transparent 5px);
  opacity: 0.5;
}
.cal-bar.cal-today { outline: 2px solid var(--neon, #ff3d9a); outline-offset: 1px; }
.cal-caption {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; color: var(--text-dim); gap: 0.5rem;
}
.cal-today-label { color: var(--neon, #ff3d9a); font-weight: 700; }

.ret-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.55rem; }
.ret-row-label { flex: 0 0 6.5rem; font-size: 0.78rem; color: var(--text-dim); }
.ret-bars { position: relative; flex: 1 1 auto; display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.ret-bar { flex: 1 1 0; min-width: 3px; border-radius: 2px 2px 0 0; background: var(--good, #4fc9a0); }
.ret-bar.thin { opacity: 0.4; cursor: help; }
.ret-bar.ret-empty { background: none; }
.ret-target { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--neon-3, #ffe14d); cursor: help; }

/* TARS transcripts on the parent view. */
.tars-transcripts { margin-top: 0.6rem; display: grid; gap: 0.5rem; font-size: 0.85rem; }
.tars-transcript-kid { border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.7rem; }
.tars-transcript-kid summary { cursor: pointer; }
.tars-transcript-summary {
  margin: 0.5rem 0; padding: 0.4rem 0.6rem; border-left: 3px solid var(--accent, #8ecae6);
  color: var(--text-dim); font-size: 0.8rem;
}
.tars-transcript-turn { margin-top: 0.4rem; line-height: 1.4; }
.tars-transcript-turn.a { color: var(--text-dim); }