/* Parent dashboard only. Main includes this after the app's existing styles. */
.screen.parent-dashboard {
  --pd-ink: #172b4c;
  --pd-muted: #566077;
  --pd-green: #397c49;
  color: var(--pd-ink);
  background: #fcf8f1;
  padding: 18px clamp(14px, 4vw, 36px) 24px !important;
}
.parent-dashboard .p-wrap { max-width: 940px; }
.parent-dashboard :is(button, summary, input):focus-visible {
  outline: 3px solid #69529a;
  outline-offset: 5px;
}
.parent-dashboard :is(h1, h2, h3, p, span) { overflow-wrap: anywhere; }
.parent-dashboard .pd-profiles {
  border: 0; box-shadow: none; background: transparent;
  padding: 0; margin: 0 auto 12px; gap: 6px;
}
.parent-dashboard .pd-profiles > h2 {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.parent-dashboard .profile-cards { flex-wrap: nowrap; gap: clamp(6px, 3vw, 32px); }
.parent-dashboard .profile-tile {
  flex: 1 1 0; max-width: 180px; padding: 10px 4px;
  border: 0; border-radius: 24px; color: var(--pd-ink); gap: 12px;
  transition: transform .18s ease, background .18s ease;
}
.parent-dashboard .profile-tile[aria-pressed="true"] { background: transparent; }
.parent-dashboard .profile-portrait {
  width: clamp(68px, 15vw, 126px); height: clamp(68px, 15vw, 126px);
  border: 4px solid #fcf8f1; background: #e6dcf2;
  box-shadow: none; font-size: clamp(42px, 9vw, 70px);
}
.parent-dashboard .profile-tile:nth-child(2) .profile-portrait { background: #ffdfc8; }
.parent-dashboard .profile-tile:nth-child(3) .profile-portrait { background: #e2d5f0; }
.parent-dashboard .profile-tile[aria-pressed="true"] .profile-portrait {
  background: #d8f0e2; border-color: #fcf8f1;
  outline: 4px solid #64aa7d; outline-offset: 3px;
}
.parent-dashboard .profile-name { font-size: clamp(17px, 3vw, 26px); font-weight: 800; }
.parent-dashboard .pd-profiles > .p-button { align-self: center; min-height: 44px; font-size: 14px; color: #52645b; }
.parent-dashboard .pd-hero { text-align: center; padding: 12px 0 28px; }
.parent-dashboard .pd-hero h1 { font-size: clamp(32px, 6.4vw, 62px); line-height: 1.3; font-weight: 900; letter-spacing: -.035em; }
.parent-dashboard .pd-hero h1::after {
  content: ''; display: block; width: 108px; height: 8px;
  margin: 8px auto 12px; background: #b5dcbc; border-radius: 80% 30%; transform: rotate(-4deg);
}
.parent-dashboard .pd-child-title { font-size: clamp(20px, 3.2vw, 31px); line-height: 1.45; }
.parent-dashboard .pd-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 25%);
  gap: 14px 24px; position: relative; padding: clamp(22px, 4vw, 36px);
  margin: 0 0 18px; border: 1px solid #fff; border-radius: clamp(26px, 5vw, 40px);
  background: #fffcf8; box-shadow: 0 7px 18px #5f47300c, 0 2px 4px #5f473006;
}
.parent-dashboard .pd-card > h2 { grid-column: 1; font-size: clamp(25px, 4.6vw, 42px); font-weight: 900; line-height: 1.3; }
.parent-dashboard .pd-card-body { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.parent-dashboard .pd-card-copy { font-size: clamp(17px, 2.8vw, 24px); line-height: 1.6; }
.parent-dashboard .pd-art { grid-column: 2; grid-row: 1 / 3; align-self: center; pointer-events: none; }
.parent-dashboard .pd-art svg { display: block; width: 100%; height: auto; }
.parent-dashboard :is(.pd-known-letters, .p-letter-row) { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.7vw, 16px); }
.parent-dashboard :is(.pd-letter, .p-letter) {
  display: grid; place-items: center; width: clamp(54px, 10vw, 88px); height: clamp(60px, 10.5vw, 94px);
  border: 1px solid #ffffff80; border-radius: 28%; color: var(--pd-ink);
  background: #e9d9f6; font-size: clamp(37px, 6.5vw, 64px); font-weight: 900; line-height: 1;
}
.parent-dashboard :is(.pd-letter, .p-letter):nth-child(4n + 2) { background: #d8efdd; }
.parent-dashboard :is(.pd-letter, .p-letter):nth-child(4n + 3) { background: #ffddc1; }
.parent-dashboard :is(.pd-letter, .p-letter):nth-child(4n + 4) { background: #ffe9b0; }
.parent-dashboard .pd-known-letters:empty { display: none; }
.parent-dashboard .pd-next { background: #fdfdf7; }
.parent-dashboard .pd-plan-badge { background: #eee4f6; border-radius: 30px; color: #493665; padding: 7px 18px; font-size: clamp(14px, 2.3vw, 20px); line-height: 1.5; }
.parent-dashboard .p-caption { color: var(--pd-muted); font-size: 14px; line-height: 1.8; }
.parent-dashboard .p-caption[hidden] { display: none; }
.parent-dashboard .pd-practice.p-button {
  grid-column: 1 / -1; justify-self: center; width: min(100%, 680px);
  border: 0; border-radius: 28px; background: var(--pd-green); color: #fff;
  font-size: clamp(22px, 4vw, 34px); font-weight: 800; min-height: 64px; margin-top: 6px;
  box-shadow: 0 4px 0 #286139; transition: transform .18s ease, background .18s ease;
}
.parent-dashboard .pd-practice.p-button:hover { background: #2c683c; }
.parent-dashboard .pd-journey { display: flex; gap: 14px; }
.parent-dashboard .pd-journey > .p-muted { color: var(--pd-muted); }
.parent-dashboard .pd-journey-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 0; list-style: none; }
.parent-dashboard .pd-journey-steps li { text-align: center; position: relative; }
.parent-dashboard .pd-journey-steps li + li::before { content: ''; position: absolute; inset-inline-start: -20px; top: 29px; width: 10px; height: 10px; border-left: 3px solid #89b98b; border-bottom: 3px solid #89b98b; transform: rotate(45deg); }
.parent-dashboard .pd-step-art { display: grid; place-items: center; width: 90px; height: 66px; margin: 0 auto 10px; border-radius: 55% 40%; background: #eee5f6; color: #8b65a2; font-size: 57px; line-height: 1; }
.parent-dashboard li:nth-child(2) .pd-step-art { background: #eaf0dc; color: #7c8051; }
.parent-dashboard li:nth-child(3) .pd-step-art { background: #fff0d0; color: #af7b1d; }
.parent-dashboard .pd-journey h3 { font-size: clamp(19px, 3vw, 27px); margin: 0 0 6px; }
.parent-dashboard .pd-journey-steps p { font-size: 15px; color: var(--pd-muted); line-height: 1.6; }
.parent-dashboard .pd-details { border: 1px solid #e9e2d9; border-radius: 24px; margin-top: 22px; background: #fffcf8; }
.parent-dashboard .pd-details summary { cursor: pointer; padding: 18px 22px; min-height: 56px; font-size: 18px; font-weight: 700; border-radius: 24px; }
.parent-dashboard .pd-details > .p-card { margin: 0; border: 0; border-radius: 24px; background: transparent; }
.parent-dashboard .pd-details .p-button { color: var(--pd-ink); }
.parent-dashboard .pd-sync-status { color: var(--pd-muted); text-align: center; font-size: 13px; padding: 18px 8px; line-height: 1.7; }
.parent-dashboard .pd-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid #e5ded3; padding: 14px 0 max(4px, env(safe-area-inset-bottom)); }
.parent-dashboard .pd-footer .p-button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 80px; padding: 8px 4px; border: 0; border-radius: 26px; background: transparent; color: var(--pd-ink); font-size: clamp(17px, 2.6vw, 23px); }
.parent-dashboard .pd-footer [aria-current="page"] { background: #e5efd9; color: #2d633b; font-weight: 800; }
.parent-dashboard .pd-nav-icon { width: 32px; height: 32px; line-height: 1; }
.parent-dashboard .pd-nav-icon svg { display: block; width: 100%; height: 100%; }
.parent-dashboard .pd-plan-details summary { cursor: pointer; min-height: 44px; padding: 8px 0; color: var(--pd-muted); font-size: 14px; }
.parent-dashboard .pd-plan-details[hidden] { display: none; }
@media (max-width: 540px) {
  .parent-dashboard .pd-card { grid-template-columns: minmax(0, 1fr) 80px; gap: 12px; padding: 22px 18px; }
  .parent-dashboard .pd-card > h2 { grid-column: 1 / -1; }
  .parent-dashboard .pd-card-body { grid-column: 1 / -1; }
  .parent-dashboard .pd-art { grid-column: 2; grid-row: 1; width: 72px; opacity: .65; display: none; }
  .parent-dashboard .pd-journey-steps { gap: 14px; }
  .parent-dashboard .pd-journey-steps p { font-size: 13px; }
  .parent-dashboard .pd-step-art { width: 66px; height: 58px; font-size: 46px; }
  .parent-dashboard .pd-journey-steps li + li::before { inset-inline-start: -12px; font-size: 27px; }
  .parent-dashboard .p-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .parent-dashboard .p-progress-letter { min-width: 0; }
}
@media (min-width: 400px) and (max-width: 540px) {
  .parent-dashboard .pd-card-body { grid-column: 1; }
  .parent-dashboard .pd-art { display: block; grid-row: 2; width: 80px; opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .parent-dashboard .pd-hero, .parent-dashboard .pd-card { animation: pd-arrive .4s ease both; }
  .parent-dashboard .pd-next { animation-delay: .06s; }
  .parent-dashboard .pd-journey { animation-delay: .12s; }
  .parent-dashboard .profile-tile:hover, .parent-dashboard .pd-practice:hover { transform: translateY(-2px); }
  @keyframes pd-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .parent-dashboard *, .parent-dashboard *::before, .parent-dashboard *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Card colors follow shuffled positions, never letter identity or correctness. */
.quiz .options .opt{color:#192c50;background:#f1def8;border:3px solid #fff;font-weight:700}.quiz .options .opt:nth-child(3n+2){background:#d8efe4}.quiz .options .opt:nth-child(3n){background:#ffe3bb}.quiz .options .opt.ok{background:#c4edc5;color:#192c50}.quiz .options .opt.bad{background:#fbd4d6;color:#192c50}

.parent-dashboard .pd-progress-legend{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:14px;color:var(--pd-ink)}.parent-dashboard .pd-legend-item{display:inline-flex;align-items:center;gap:8px}.parent-dashboard .pd-legend-swatch{display:inline-block;width:20px;height:20px;border-radius:6px;flex:none;box-sizing:border-box;background:#f5f5f2;border:1px solid #e1e4dd}.parent-dashboard .pd-legend-swatch.practice{background:#fff2d9;border-color:#e8c87e}.parent-dashboard .pd-legend-swatch.steady{background:#dceee1;border-color:#a1c4ab}