/* ===========================================================
   CoachLingua · Parent Dashboard
   Calm, trustworthy, readable. Mobile-first, no horizontal scroll.
   =========================================================== */
/* Parent tokens now MAP onto the shared design system (Gate 5C).
   Calm, trustworthy, readable — sky/green for data + trust, violet used
   sparingly. Every value derives from shared/design-system.css. */
:root{
  --pd-bg:var(--cl-bg); --pd-card:var(--cl-card); --pd-card2:var(--cl-card-2);
  --pd-line:var(--cl-line);
  --pd-txt:var(--cl-text); --pd-mut:var(--cl-text-muted); --pd-blue:var(--cl-sky);
  --pd-green:var(--cl-green-light); --pd-amber:var(--cl-gold); --pd-accent:var(--cl-violet);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--pd-bg);color:var(--pd-txt);
  font-family:var(--cl-font);
  -webkit-font-smoothing:antialiased;line-height:var(--cl-lh-body);}
#app{max-width:760px;margin:0 auto;padding:16px 16px 60px;}

/* top bar */
.pd-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 0 16px;border-bottom:1px solid var(--pd-line);margin-bottom:18px;}
.pd-logo{font-weight:800;font-size:17px;letter-spacing:.2px;display:flex;align-items:center;gap:9px;}
.pd-logo span{color:var(--pd-blue);}
.pd-mark{height:26px;width:auto;display:block;}
.pd-logo em{font-style:normal;color:var(--pd-mut);font-size:13px;font-weight:600;
  border-left:1px solid var(--pd-line);padding-left:9px;}
.pd-status{font-size:12px;font-weight:700;color:var(--pd-mut);white-space:nowrap;}
.pd-status.both{color:var(--pd-green);}
.pd-status.coach{color:var(--pd-blue);}
.pd-status.play{color:var(--pd-amber);}

/* screens */
.screen{display:none;animation:fade var(--cl-dur-med) var(--cl-ease);}
.screen.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.pd-h1{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:8px;}
.pd-sub{color:var(--pd-mut);font-size:15px;margin-bottom:22px;max-width:54ch;}
.pd-h2{font-size:15px;font-weight:800;margin:24px 0 10px;letter-spacing:.2px;}
.pd-empty{color:var(--pd-mut);background:var(--pd-card);border-radius:14px;
  padding:18px;text-align:center;font-size:14px;}

/* child grid */
.child-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.child-tile{width:100%;min-height:96px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;background:var(--pd-card);border:1px solid var(--pd-line);
  border-radius:16px;color:var(--pd-txt);cursor:pointer;padding:14px 10px;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;}
.child-tile:hover{transform:translateY(-2px);border-color:var(--pd-blue);background:var(--pd-card2);}
.ct-ava{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:18px;background:linear-gradient(135deg,var(--pd-accent),var(--pd-blue));color:#fff;}
.ct-name{font-weight:800;font-size:16px;}
.ct-meta{font-size:12px;color:var(--pd-mut);text-align:center;}

/* child header */
.pd-sub-top{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.pd-back{background:var(--pd-card);border:1px solid var(--pd-line);color:var(--pd-txt);
  border-radius:10px;padding:8px 14px;font-weight:700;font-size:14px;cursor:pointer;}
.pd-back:hover{border-color:var(--pd-blue);}
.pd-child{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;}
.pd-ava{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,var(--pd-accent),var(--pd-blue));color:#fff;}

/* summary */
.pd-summary{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--cl-green-soft),hsla(205,100%,65%,.10));
  border:1px solid var(--cl-line-strong);border-radius:var(--cl-r-xl);
  padding:20px 22px;font-size:16px;line-height:1.6;color:var(--cl-text);
  box-shadow:var(--cl-e2);}
.pd-summary::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--cl-green),var(--cl-sky));}
.pd-summary b{color:#fff;font-weight:var(--cl-fw-bold);}

/* headline stats */
.pd-stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px;}
.pd-stats li{background:var(--pd-card);border:1px solid var(--pd-line);border-radius:14px;
  padding:14px 8px;text-align:center;}
.ps-num{display:block;font-size:28px;font-weight:900;line-height:1;color:var(--pd-blue);
  font-variant-numeric:tabular-nums;}
.ps-lbl{display:block;font-size:11px;color:var(--pd-mut);margin-top:7px;font-weight:600;}

/* info blocks */
.pd-block{background:var(--pd-card);border:1px solid var(--pd-line);border-radius:16px;padding:6px 16px;}
.pd-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--pd-line);font-size:14px;}
.pd-row:last-child{border-bottom:none;}
.pd-row span{color:var(--pd-mut);}
.pd-row b{font-weight:800;font-size:15px;}
.pd-muted{color:var(--pd-mut);padding:16px 0;font-size:14px;}

/* words */
.pd-words{list-style:none;display:flex;flex-direction:column;gap:8px;}
.pw{background:var(--pd-card);border:1px solid var(--pd-line);border-radius:12px;
  padding:11px 14px;font-size:15px;}
.pw b{color:#fff;}
.pw-fr{color:var(--pd-mut);font-size:14px;font-weight:500;}
.pw.muted{color:var(--pd-mut);}

.pd-note{margin-top:26px;color:var(--pd-mut);font-size:12px;text-align:center;
  border-top:1px solid var(--pd-line);padding-top:16px;}

/* toast */
.pd-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:#0b1220;border:1px solid var(--pd-line);color:var(--pd-txt);padding:10px 18px;
  border-radius:12px;font-size:14px;font-weight:700;opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;z-index:50;}
.pd-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============================================================
   GATE 5C — premium parent trust/readability polish
   Read-only surface. Light brand. No kid-zone playfulness.
   ============================================================ */
.pd-top{align-items:center;}
.pd-h1{font-family:var(--cl-font-display);letter-spacing:-.4px;}
/* clearer info-block hierarchy */
.pd-block{box-shadow:var(--cl-e1);}
.pd-block .pd-row:hover b{color:var(--cl-sky);}
.pd-row b{transition:color var(--cl-dur-fast) var(--cl-ease);}
/* headline stat cards lift + readable focus */
.pd-stats li{transition:transform var(--cl-dur-med) var(--cl-ease),border-color var(--cl-dur-med) var(--cl-ease);}
.pd-stats li:hover{transform:translateY(-2px);border-color:var(--cl-line-strong);}
/* status dot pulse (calm, paused under reduced motion) */
.pd-status.both,.pd-status.coach,.pd-status.play{position:relative;}
/* richer empty states */
.pd-empty,.pd-muted{line-height:1.55;}
.pd-empty{border:1px dashed var(--cl-line);}
/* words rows hover affordance */
.pw{transition:border-color var(--cl-dur-fast) var(--cl-ease);}
.pw:hover{border-color:var(--cl-line-strong);}
/* focus visibility (a11y) */
.child-tile:focus-visible,.pd-back:focus-visible{outline:3px solid var(--cl-sky);outline-offset:3px;}
/* entrance: summary + stats fade-up on dashboard open */
#screenChild.active .pd-summary{animation:cl-fade-up var(--cl-dur-med) var(--cl-ease) both;}
#screenChild.active .pd-stats li{animation:cl-fade-up var(--cl-dur-med) var(--cl-ease) both;}
#screenChild.active .pd-stats li:nth-child(2){animation-delay:60ms;}
#screenChild.active .pd-stats li:nth-child(3){animation-delay:120ms;}
#screenChild.active .pd-stats li:nth-child(4){animation-delay:180ms;}

/* mobile */
@media (max-width:560px){
  #app{padding:14px 13px 56px;}
  .pd-h1{font-size:22px;}
  .pd-stats{grid-template-columns:repeat(2,1fr);}
  .ps-num{font-size:23px;}
  .pd-summary{font-size:15px;padding:16px;}
  .child-grid{grid-template-columns:repeat(2,1fr);}
}