/* ══════════════════════════════════════════════════════════════════════════
   GLASS LAGOON — Parent Model P3: gated, read-only in-app "Parents" stats view
   ──────────────────────────────────────────────────────────────────────────
   PURE ADDITIVE (parents-view.js). Adds a 3rd tile ("Parents", lock icon) to
   the Progress modal's view row (next to "My progress" / "My aquarium"), a
   parental gate that mirrors the /auth/ purchase gate (a×b sum), and a
   read-only per-child progress view reusing the family-dashboard card shape
   (mastery heatmap + suggestion). No kid-facing view, health/coin math, or
   storage is touched.

   The gate palette intentionally matches /auth/ (amber accents) so the two
   gates — store purchase gate + this in-app gate — feel like one mechanic.
   ══════════════════════════════════════════════════════════════════════════ */

/* Progress-picker "Parents" tile styles removed (Accounts Hub W5) — the tile
   is retired; the picker's own 2-across layout applies again. The overlay,
   gate and card styles below stay: parents-view.js keeps those code paths
   (child-login door + a×b gate for the native N5 option), and the Accounts
   hub renders the same pv-* card body via window.pvBuildChildCardBody. */

/* ── Overlay + modal ─────────────────────────────────────────────────────── */
.pv-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}
.pv-overlay[hidden] { display: none; }

.pv-modal {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
}

.pv-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid #eef2f7;
  flex: 0 0 auto;
}
.pv-modal-head .pv-title {
  font-size: 17px;
  font-weight: 800;
  color: #1e293b;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pv-modal-head .pv-title svg { width: 18px; height: 18px; color: #B45309; }
.pv-modal-head .pv-back,
.pv-modal-head .pv-close {
  background: #f1f5f9;
  border: none;
  border-radius: 10px;
  width: 34px; height: 34px;
  font-size: 18px;
  line-height: 1;
  color: #475569;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.pv-modal-head .pv-back:hover,
.pv-modal-head .pv-close:hover { background: #e2e8f0; }
.pv-modal-head .pv-back[hidden] { display: none; }

.pv-modal-body {
  padding: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Parental gate (mirrors /auth/ .parental-gate) ───────────────────────── */
.pv-gate { text-align: center; }
.pv-gate .pv-gate-q { font-size: 15px; color: #334155; margin: 4px 0 14px; }
.pv-gate .pv-gate-q strong { font-size: 20px; color: #d97706; }
.pv-gate .pv-gate-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 18px; font-weight: 700;
  text-align: center;
  font-family: inherit;
  box-sizing: border-box;
}
.pv-gate .pv-gate-input:focus { outline: none; border-color: #f59e0b; }
.pv-gate .pv-gate-error { color: #dc2626; font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 8px; }
.pv-gate .pv-gate-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pv-btn {
  font-family: inherit;
  border: none;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.pv-btn-primary { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; }
.pv-btn-primary:hover { filter: brightness(1.03); }
.pv-btn-ghost { background: transparent; color: #64748b; font-weight: 600; }
.pv-btn-ghost:hover { color: #334155; }

.pv-intro { font-size: 13px; color: #64748b; text-align: center; margin: 0 0 14px; }

/* ── Loading / empty ─────────────────────────────────────────────────────── */
.pv-state { text-align: center; color: #64748b; font-size: 14px; padding: 24px 8px; }

/* ── Child chooser (>1 child) ────────────────────────────────────────────── */
.pv-chooser-hint { font-size: 13px; color: #64748b; margin: 0 0 12px; }
.pv-child-list { display: flex; flex-direction: column; gap: 10px; }
.pv-child-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
}
.pv-child-row:hover { border-color: #cbd5e1; background: #f1f5f9; }
.pv-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #fff;
  background: #38bdf8;
}
.pv-avatar.palette-2 { background: #34d399; }
.pv-avatar.palette-3 { background: #a78bfa; }
/* P5.0: stack name over sub — inline spans jammed together without a
   separator ("Sagesage.0530") in the child header and chooser rows. */
.pv-child-row .pv-child-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pv-child-row .pv-child-name { font-size: 15px; font-weight: 700; color: #1e293b; }
.pv-child-row .pv-child-sub { font-size: 12px; color: #94a3b8; }
.pv-child-row .pv-chev { color: #cbd5e1; flex: 0 0 auto; font-size: 20px; }

/* ── Single child progress ───────────────────────────────────────────────── */
.pv-child-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pv-child-head .pv-child-meta { display: flex; flex-direction: column; min-width: 0; }
.pv-child-head .pv-child-name { font-size: 18px; font-weight: 800; color: #1e293b; }
.pv-child-head .pv-child-sub { font-size: 12px; color: #94a3b8; }

.pv-inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  align-items: center;
  font-size: 13px;
  color: #475569;
  margin-bottom: 4px;
}
/* Explains the "N of 12 tables mastered" stat, sits directly beneath it. */
.pv-mastered-note { margin: 0 0 14px; font-size: 11px; color: #94a3b8; line-height: 1.4; }
.pv-inline-stats strong { color: #1e293b; }
.pv-inline-stats .pv-sep { color: #cbd5e1; margin: 0 2px; }

/* Two panels mirroring the teacher view: Overall %, Focus next. */
.pv-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 2px 0 14px;
}
.pv-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pv-panel-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: #94a3b8;
}
.pv-panel-value { font-size: 22px; font-weight: 800; color: #1e293b; line-height: 1.1; }
.pv-panel-value.pv-panel-focus { font-size: 18px; }
.pv-panel-hint { font-size: 12px; font-weight: 600; color: #94a3b8; }

/* 7-day activity bar chart — "is my child practising?" */
.pv-activity { margin: 14px 0 4px; }
.pv-activity-caption { font-size: 11px; color: #64748b; margin-bottom: 8px; }
.pv-activity-none { color: #94a3b8; font-style: italic; }
.pv-activity-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: end;
}
.pv-bar-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pv-bar-track {
  width: 100%;
  height: 56px;
  background: #f1f5f9;
  border-radius: 5px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.pv-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
  border-radius: 5px 5px 0 0;
  min-height: 4px;
}
.pv-bar-day { font-size: 10px; font-weight: 700; color: #94a3b8; }

/* Mastery heatmap — mirrors /auth/ family dashboard grid, compact for phone. */
.pv-heatmap { margin: 4px 0 6px; }
/* Transposed grid (matches teacher): label column + 3 game-type columns,
   one row per table (1×–12×). */
.pv-heatmap-cols {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
}
.pv-heatmap .pv-col-header {
  font-size: 11px; font-weight: 700; color: #94a3b8; text-align: center;
  line-height: 1.2;   /* full game names wrap to 2 lines on narrow phones */
}
.pv-heatmap .pv-row-label {
  font-size: 12px; font-weight: 700; color: #64748b;
  padding-right: 8px; white-space: nowrap; text-align: right;
}
.pv-heatmap .pv-cell {
  min-height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: #f1f5f9;      /* not_started */
  color: #ffffff;
}
.pv-heatmap .pv-cell.mastered      { background: #22c55e; }
.pv-heatmap .pv-cell.learning      { background: #f59e0b; }
.pv-heatmap .pv-cell.learning-low  { background: #fcd9a3; color: #92400e; }
.pv-heatmap .pv-cell.not_started   { background: #f1f5f9; }

.pv-heatmap-key {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 10px; font-size: 11px; color: #64748b;
}
.pv-heatmap-key .pv-k { display: inline-flex; align-items: center; gap: 5px; }
.pv-heatmap-key .pv-sw { width: 12px; height: 12px; border-radius: 3px; background: #f1f5f9; display: inline-block; }
.pv-heatmap-key .pv-sw.mastered { background: #22c55e; }
.pv-heatmap-key .pv-sw.learning { background: #f59e0b; }

/* Positive "practise next" tip (mirrors /auth/ .tip). */
.pv-tip {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 14px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.4;
}
.pv-tip.nudge { background: #eff6ff; border-color: #bfdbfe; color: #1e3a5f; }
.pv-tip .pv-tip-icon { flex: 0 0 auto; }

.pv-footnote {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin: 16px 0 0;
}