body { background: var(--solo-bg, #F8FAFC); }

  .pd-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 5rem;
  }

  /* ── Settings link in the header ── */
  /* Contrast measured, not eyeballed (2026-08-08), after this button was
     reported as nearly invisible on the Help at Home hero.

     The hero is a navy-to-slate gradient and the button sits on a 10% white
     fill, so the effective background had to be composited before measuring -
     reading the raw tokens would have flattered it.

       background:  #1E293B -> #334155, +10% white = rgb(53,62,79) -> (71,84,102)
       old text:    #2DD4BF  -> 5.78 at the light end but only 4.14 at the dark
                    end, so it FAILED AA (4.5) across half the button.
       old border:  rgba(255,255,255,.25) -> 1.66:1, well under the 3:1 that
                    WCAG 1.4.11 asks of a UI boundary. That is why it was hard
                    to FIND, not just hard to read.
       now:         #99F6E4 text -> 6.11 worst case, and a 0.65-alpha teal
                    border -> 3.36 worst case. Both pass, and it still reads
                    as teal rather than washing out to white.

     Worth knowing: --solo-mastery-deep (#14B8A6) measures 3.09 here, so it is
     WORSE than what was there. Do not "fix" this by reaching for the deeper
     teal - on a dark ground the paler end of the ramp is the accessible one. */
  .pd-header-link {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1.5px solid rgba(153, 246, 228, 0.65);
    border-radius: 999px;
    color: #99F6E4;
    font-family: var(--solo-font-head);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    flex-shrink: 0;
    align-self: flex-end;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .pd-header-link:hover,
  .pd-header-link:focus-visible {
    background: rgba(45, 212, 191, 0.22);
    border-color: rgba(204, 251, 241, 0.85);
    color: #CCFBF1;   /* 6.83 worst case - lighter on hover, never darker */
  }
  /* Keyboard users need to see where they are, and this was hover-only. */
  .pd-header-link:focus-visible {
    outline: 3px solid #CCFBF1;
    outline-offset: 2px;
  }
  .pd-header-link svg { width: 16px; height: 16px; stroke: currentColor; }

  /* ── Engagement strip (latest legend, level + XP, day streak) ──
     Reads from SoloProgression for the currently selected child.
     Same shape as the student dashboard so parents get the same
     glance-able status. */
  .pd-stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
  }
  .pd-stat-tile {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #F8FAFC;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.20),
                inset 0 0 0 1px rgba(45, 212, 191, 0.18);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease;
  }
  a.pd-stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.30),
                inset 0 0 0 1px rgba(45, 212, 191, 0.45);
  }
  .pd-stat-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(45, 212, 191, 0.18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1.5px solid rgba(45, 212, 191, 0.30);
  }
  .pd-stat-icon img { width: 100%; height: 100%; object-fit: cover; }
  .pd-stat-icon svg { width: 28px; height: 28px; stroke: #5EEAD4; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .pd-stat-icon-letter { font-family: var(--solo-font-head); font-size: 1.4rem; font-weight: 700; color: #5EEAD4; }
  .pd-stat-meta { flex: 1; min-width: 0; }
  .pd-stat-eyebrow {
    display: block;
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #5EEAD4;
    margin-bottom: 0.2rem;
  }
  .pd-stat-value {
    display: block;
    font-family: var(--solo-font-head);
    font-size: 1.05rem; font-weight: 700;
    color: #F8FAFC;
    line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pd-stat-sub {
    display: block;
    font-size: 0.76rem;
    color: rgba(248, 250, 252, 0.65);
    margin-top: 0.2rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pd-stat-bar {
    margin-top: 0.5rem;
    height: 6px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    overflow: hidden;
  }
  .pd-stat-bar-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #2DD4BF 0%, #5EEAD4 100%);
    border-radius: 3px;
    transition: width .8s cubic-bezier(.34, 1.56, .64, 1);
  }
  /* 7-day activity sparkline inside the streak tile - shared shape with
     student dashboard for visual continuity. Bars represent calendar
     days oldest-to-newest, today on the right with a halo ring. */
  .pd-stat-spark {
    display: none;
    align-items: flex-end;
    gap: 3px;
    height: 22px;
    margin: 0.4rem 0 0.1rem;
  }
  .pd-stat-spark.is-ready { display: flex; }
  .pd-stat-spark-bar {
    flex: 1;
    min-width: 6px;
    border-radius: 2px;
    background: rgba(94, 234, 212, 0.18);
    border: 1px solid rgba(94, 234, 212, 0.25);
    transition: background .2s ease;
  }
  .pd-stat-spark-bar.is-active {
    background: linear-gradient(180deg, #2DD4BF 0%, #14B8A6 100%);
    border-color: transparent;
  }
  .pd-stat-spark-bar.is-today {
    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.4);
  }

  /* ── Vault row: Periodic Table mini-map + Academic snapshot ── */
  .pd-vault-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 0 0 1.5rem;
    align-items: stretch;
  }
  @media (max-width: 900px) { .pd-vault-row { grid-template-columns: 1fr; } }
  /* Make the Atomic Vault mini fill its grid cell evenly with the
     Discoveries card next to it. */
  .pd-vault-row .solo-mini-vault, .pd-vault-row #pd-vault-mini { height: 100%; }
  .pd-card-link {
    font-family: var(--solo-font-head);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--solo-mastery-text);
    text-decoration: none;
  }
  .pd-card-link:hover { color: var(--solo-mastery); text-decoration: underline; }

  /* ── Academic snapshot card: last five attempts + trend arrow ──
     Replaces the legacy "Scientists discovered" card. A parent's
     first question is "how are they doing?" - this answers it in
     one glance: the score bars, the trend, the most-recent unit. */
  .pd-snapshot-trend {
    display: flex; align-items: baseline; gap: 0.55rem;
    padding: 0 0 0.7rem;
    border-bottom: 1px solid var(--solo-divider);
    margin-bottom: 0.7rem;
  }
  .pd-snapshot-trend-pct {
    font-family: var(--solo-font-head);
    font-size: 1.6rem; font-weight: 700; color: var(--solo-heading-color, var(--solo-navy));
    line-height: 1;
  }
  .pd-snapshot-trend-arrow {
    font-size: 1.1rem; font-weight: 700; line-height: 1;
  }
  .pd-snapshot-trend-arrow.is-up    { color: #15803D; }
  .pd-snapshot-trend-arrow.is-down  { color: #B91C1C; }
  .pd-snapshot-trend-arrow.is-flat  { color: var(--solo-text-mute); }
  .pd-snapshot-trend-sub {
    font-size: 0.78rem; color: var(--solo-text-mute);
  }
  .pd-snapshot-list {
    display: flex; flex-direction: column; gap: 0.4rem;
  }
  .pd-snapshot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px 70px;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    background: var(--solo-bg);
    border: 1px solid var(--solo-divider);
    border-radius: 10px;
  }
  .pd-snapshot-unit {
    font-family: var(--solo-font-head);
    font-size: 0.82rem; font-weight: 600; color: var(--solo-heading-color, var(--solo-navy));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pd-snapshot-bar {
    height: 6px; background: var(--solo-divider);
    border-radius: 999px; overflow: hidden;
  }
  .pd-snapshot-bar-fill {
    height: 100%;
    background: var(--solo-mastery);
    border-radius: 999px;
  }
  .pd-snapshot-bar-fill.is-warn { background: #F59E0B; }
  .pd-snapshot-bar-fill.is-low  { background: #DC2626; }
  .pd-snapshot-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem; font-weight: 600; color: var(--solo-heading-color, var(--solo-navy));
    text-align: right;
    white-space: nowrap;
  }
  .pd-snapshot-empty {
    font-size: 0.85rem; color: var(--text-mid);
    line-height: 1.5; padding: 0.5rem 0;
  }

  /* ── Section grouping (SoloLab / SoloCognition) ── */
  .pd-section { margin: 0 0 2rem; }
  .pd-section-head {
    display: flex; align-items: baseline; gap: 0.75rem;
    margin: 0 0 0.85rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--solo-divider);
  }
  .pd-section-head h2 {
    font-family: var(--solo-font-head);
    font-size: 1.1rem; font-weight: 700;
    color: var(--solo-heading-color, var(--solo-navy));
    letter-spacing: -0.01em;
    margin: 0;
  }
  .pd-section-head .pd-section-eyebrow {
    font-family: var(--solo-font-body);
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--solo-text-mute);
  }
  .pd-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
  }
  .pd-cards-grid .pd-card { margin-bottom: 0; }
  .pd-card--wide { grid-column: 1 / -1; }
  @media (max-width: 720px) {
    .pd-cards-grid { grid-template-columns: 1fr; }
  }
  /* Required Practicals table can be wide on small screens. */
  #rp-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Header layout (Solo 2027) ── */
  /* Visual chrome (gradient + Light Teal-White type) now comes from the
     .solo-banner utility class on the markup; this rule only handles the
     page-specific layout - flex spacing, margin, etc. */
  .pd-header {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
  }

  /* ── Multilingual top strip (persona-plan §3.3, Priya-mum) ──
     EAL parent switches the summary line to Polish / Punjabi / Urdu.
     Sits just below the header; small, unobtrusive, but discoverable. */
  .pd-multilang {
    margin: 0 0 1.75rem;
    padding: .8rem 1rem;
    background: var(--solo-bg, #F8FAFC);
    border: 1px solid var(--solo-divider, #E2E8F0);
    border-radius: 12px;
  }
  .pd-multilang-chips {
    display: flex; gap: .4rem; flex-wrap: wrap;
    margin-bottom: .55rem;
  }
  .pd-multilang-chip {
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--solo-divider, #E2E8F0);
    background: var(--solo-bg-elevated, #FFFFFF);
    color: var(--solo-text, #334155);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    min-height: 32px;
  }
  .pd-multilang-chip:hover { border-color: var(--solo-mastery-deep, #0F766E); }
  .pd-multilang-chip.is-active {
    background: var(--solo-mastery, #2DD4BF);
    border-color: var(--solo-mastery, #2DD4BF);
    color: #0F172A;
  }
  .pd-multilang-line {
    margin: 0;
    font-size: 1.02rem;
    color: var(--solo-heading-color, var(--solo-navy));
    font-weight: 600;
    line-height: 1.4;
  }
  .pd-multilang-beta {
    margin: .5rem 0 0;
    font-size: .78rem;
    color: var(--solo-text-mute, #64748B);
    font-style: italic;
  }
  .pd-multilang-beta a { color: var(--solo-mastery-text, #14B8A6); font-weight: 600; }
  .pd-header-left { display: flex; align-items: center; gap: 1.25rem; }
  .pd-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--solo-mastery);
    color: #1E293B;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    flex-shrink: 0;
    /* Halo comes from .solo-glow-mastery utility - added on the markup */
  }
  .pd-header-text h1 {
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
    /* Font, weight, colour all handled by the cascade:
       - .solo-banner sets --solo-heading-color: #F0FDFA
       - body.theme-solo h1 picks it up via var(--solo-heading-color)
       - font-family and weight inherit from theme-solo h1 base rule */
  }
  /* Sub-text and badge labels: Light Teal-White at varying opacities so the
     hierarchy still reads (h1 → primary, sub-text/labels → secondary) but
     every line clears AA contrast on the slate gradient. */
  .pd-header-text p {
    font-size: 0.85rem;
    color: rgba(240, 253, 250, 0.85);
  }
  /* Tiny role pill above the greeting so a parent always knows
     they're on the Parent view (not Tutor / Student). Light type
     on the dark gradient banner; small dot anchors it visually. */
  .pd-role-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.45rem;
    padding: 0.25rem 0.7rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(45, 212, 191, 0.45);
    border-radius: 999px;
    font-family: var(--solo-font-head);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--solo-mastery, #2DD4BF);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .pd-role-pill svg { width: 12px; height: 12px; stroke: currentColor; }
  .pd-child-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(240, 253, 250, 0.18);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    text-align: right;
    backdrop-filter: blur(6px);
  }
  .pd-child-badge .child-label {
    font-family: var(--solo-font-head);
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(240, 253, 250, 0.7);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 0.25rem;
  }
  .pd-child-badge .child-name {
    font-size: 1rem;
    font-weight: 600;
    color: #F0FDFA;
  }
  /* Predicted-grade chip: tiny pill below the "Last quiz" line in
     the child badge. Derived from the most-recent 5 quiz attempts'
     average %. Bands are deliberately conservative; the chip text
     explains its provenance on hover. Hidden when no quiz data
     exists so we don't show "predicted: 1" to a brand-new child. */
  .pd-grade-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: var(--solo-font-head, 'Lexend', sans-serif);
    font-size: .7rem; font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 999px;
    letter-spacing: .03em;
    margin-top: .4rem;
    cursor: help;
    line-height: 1.4;
  }
  .pd-grade-chip[hidden] { display: none; }
  .pd-grade-chip.pd-grade-low  { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
  .pd-grade-chip.pd-grade-mid  { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
  .pd-grade-chip.pd-grade-good { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
  .pd-grade-chip-num {
    background: rgba(15, 23, 42, .12);
    border-radius: 4px;
    padding: 0 .35rem;
    font-weight: 800;
    font-size: .72rem;
  }

  .pd-child-badge .child-last-login {
    font-size: 0.75rem;
    color: rgba(240, 253, 250, 0.7);
    margin-top: 0.2rem;
  }
  /* Tour highlight: the engine paints a white "pad" behind the
     highlighted target so dim text reads against the backdrop. The
     child badge is light text on a translucent dark bg though, so a
     white pad turns the contents into white-on-white. Suppress the
     pad here - the teal halo + dim do enough work on their own. */
  .pd-child-badge.solo-tour-target-active::before {
    background: transparent !important;
  }

  /* ── Single-column dashboard layout. Account/admin moved to a
     separate parent-settings.html page (linked from the header).
     Sections inside use their own 2-col grid via .pd-cards-grid. */
  .pd-grid {
    display: block;
  }
  .pd-main { display: block; }

  /* ── Cards (Solo 2027 reskin) ── */
  .pd-card {
    background: var(--solo-bg-elevated);
    border-radius: var(--solo-radius);
    border: 1px solid var(--solo-divider);
    overflow: hidden;
    box-shadow: var(--solo-shadow-1);
  }
  .pd-card-head {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--solo-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
  }
  .pd-card-head-left { display: flex; align-items: center; gap: 0.6rem; }
  .pd-card-head h2 {
    font-family: var(--solo-font-head);
    font-weight: 600;
    font-size: 1rem;
    color: var(--solo-heading-color, var(--solo-navy));
    letter-spacing: -0.01em;
    margin: 0;
  }
  .pd-card-head .pd-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--solo-mastery-pale);
    color: var(--solo-mastery-text);
    flex-shrink: 0;
  }
  .pd-card-head .pd-icon .solo-icon { stroke: currentColor; width: 16px; height: 16px; }
  .pd-card-body { padding: 1.25rem 1.5rem; }

  /* "This week" plain-English summary strip - sits above the panels */
  .pd-week-strip {
    max-width: 1200px;
    margin: 1.25rem auto 0;
    padding: 0 1rem;
  }
  /* Audit AMBER 23 - "This week" lifted into a proper card so it
     dominates the page above the gamification stats strip. Parents
     said "is my child OK / what did they do" is the question they
     arrive with - it shouldn't be a one-line subtitle. */
  .pd-week-strip__inner {
    display: flex; flex-direction: column; gap: .5rem;
    background: linear-gradient(135deg, var(--solo-mastery-pale, #CCFBF1) 0%, #F8FAFC 100%);
    border: 1px solid rgba(45, 212, 191, 0.5);
    border-radius: 14px;
    padding: 1.1rem 1.35rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
  }
  .pd-week-strip__eyebrow {
    font-family: var(--solo-font-head, 'Lexend', sans-serif);
    font-size: .72rem; font-weight: 700;
    color: var(--solo-mastery-deep, #14B8A6);
    letter-spacing: .12em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: .45rem;
  }
  .pd-week-strip__eyebrow::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: var(--solo-mastery, #2DD4BF);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .25);
  }
  .pd-week-strip__text {
    color: var(--solo-heading-color, var(--solo-navy, #1E293B));
    font-size: 1.05rem;
    line-height: 1.55;
    font-weight: 500;
  }

  /* CSV-export button + hint (sits just above the activity feed). */
  .pd-csv-export {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    padding: .65rem 0;
  }
  .pd-csv-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--solo-navy, #1E293B);
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: .55rem 1.1rem;
    font-family: var(--solo-font-head, 'Lexend', sans-serif);
    font-size: .85rem; font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  }
  .pd-csv-btn:hover {
    background: #0F172A;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .18);
  }
  .pd-csv-btn:disabled {
    background: var(--solo-bg); color: #94A3B8; cursor: not-allowed;
    transform: none; box-shadow: none;
  }
  .pd-csv-hint {
    font-size: .78rem; color: var(--solo-text-mute, #64748B);
  }

  /* Recent activity feed - chronological event list (A3) */
  .feed-list {
    display: flex; flex-direction: column;
    gap: .35rem;
    max-height: 480px; overflow-y: auto;
    padding-right: .25rem;
  }
  .feed-row {
    display: grid;
    grid-template-columns: 56px 32px 1fr auto;
    gap: .75rem; align-items: center;
    padding: .55rem .6rem;
    border-radius: 8px;
    transition: background-color .12s;
  }
  .feed-row + .feed-row {
    border-top: 1px solid var(--solo-divider, #E2E8F0);
    border-top-left-radius: 0; border-top-right-radius: 0;
    padding-top: .65rem;
  }
  .feed-row:hover { background: var(--solo-bg, #F8FAFC); }
  .feed-date {
    font-size: .72rem; font-weight: 600;
    color: var(--text-light, #64748B);
    text-align: right;
    font-family: var(--solo-font-head, 'Lexend', sans-serif);
    letter-spacing: .02em;
  }
  .feed-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
  }
  .feed-icon.is-quiz { background: #E0F2FE; color: #0369A1; }
  .feed-icon.is-rp   { background: #FEF3C7; color: #92400E; }
  .feed-icon.is-rp.is-error { background: #FEE2E2; color: #991B1B; }
  .feed-icon.is-res  { background: #F3E8FF; color: #6B21A8; }
  .feed-icon.is-kc   { background: #DCFCE7; color: #166534; }
  .feed-body { font-size: .9rem; color: var(--solo-text, #334155); line-height: 1.45; }
  .feed-body strong { color: var(--solo-heading-color, var(--solo-navy, #1E293B)); font-weight: 600; }
  .feed-badge {
    font-family: var(--solo-font-head, 'Lexend', sans-serif);
    font-size: .68rem; font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 999px;
    letter-spacing: .03em;
    white-space: nowrap;
  }
  .feed-badge.is-good { background: #DCFCE7; color: #166534; }
  .feed-badge.is-mid  { background: #FEF3C7; color: #92400E; }
  .feed-badge.is-low  { background: #FEE2E2; color: #991B1B; }
  .feed-empty {
    padding: 1.5rem; text-align: center;
    color: var(--text-mid, #64748B); font-size: .9rem;
  }
  @media (max-width: 600px) {
    .feed-row { grid-template-columns: 50px 28px 1fr; }
    .feed-row .feed-badge { grid-column: 2 / 4; justify-self: start; margin-top: .25rem; }
  }

  /* NWOW PDF download footer */
  .nwow-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: .65rem;
    padding: .85rem 1rem 1rem;
    border-top: 1px solid var(--solo-divider, #E2E8F0);
    margin-top: .25rem;
  }
  .nwow-pdf-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--solo-mastery-deep, #0F766E);
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: .5rem 1rem;
    font-family: var(--solo-font-head, 'Lexend', sans-serif);
    font-size: .82rem; font-weight: 700;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .nwow-pdf-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(15, 23, 42, .14); }
  .nwow-pdf-btn--ehcp { background: var(--solo-navy, #1E293B); }
  .nwow-pdf-btn--termly { background: var(--solo-mastery, #2DD4BF); color: #0F172A; }
  .nwow-pdf-btn--mail { background: #4F46E5; }
  .nwow-pdf-btn--share { background: #0F766E; }
  .nwow-pdf-btn--homeed { background: #0E7490; }
  /* LA-portfolio: amber to match the PDF's amber cover fill. */
  .nwow-pdf-btn--la { background: #B45309; }
  /* SENCo / EHCP / LA evidence disclosure - default closed so a parent
     on week 2 doesn't see a wall of acronym buttons. Native <details>
     for keyboard a11y + screen-reader expand/collapse semantics; the
     summary is a focusable, brand-toned pill that signals "more". */
  .nwow-evidence-more {
    margin-top: .35rem;
    border-top: 1px dashed var(--solo-divider, #E2E8F0);
    padding-top: .85rem;
  }
  .nwow-evidence-more > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: var(--solo-bg, #F8FAFC);
    border: 1px solid var(--solo-divider, #E2E8F0);
    color: var(--solo-text, #334155);
    font-family: var(--solo-font-head, 'Lexend', sans-serif);
    font-weight: 600;
    font-size: .88rem;
    transition: border-color .15s ease, background .15s ease;
  }
  .nwow-evidence-more > summary:hover,
  .nwow-evidence-more > summary:focus-visible {
    border-color: var(--solo-mastery, #2DD4BF);
    background: var(--solo-mastery-pale, #CCFBF1);
    color: var(--solo-mastery-text, #0F766E);
    outline: none;
  }
  .nwow-evidence-more > summary::-webkit-details-marker { display: none; }
  .nwow-evidence-more > summary::after {
    content: '▾';
    margin-left: auto;
    transition: transform .2s ease;
  }
  .nwow-evidence-more[open] > summary::after { transform: rotate(180deg); }
  .nwow-evidence-more[open] > summary {
    border-color: var(--solo-mastery, #2DD4BF);
    background: var(--solo-mastery-pale, #CCFBF1);
    color: var(--solo-mastery-text, #0F766E);
  }
  .nwow-evidence-more__hint {
    margin: .85rem 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--solo-text-mute, #475569);
  }
  .nwow-evidence-more > .nwow-pdf-btn { margin-top: .5rem; }
  .nwow-logo-row {
    margin-top: .75rem; padding-top: .85rem;
    border-top: 1px dashed var(--solo-divider, #E2E8F0);
    display: flex; flex-direction: column; gap: .65rem;
  }
  .nwow-logo-label {
    display: flex; flex-direction: column; gap: .35rem;
    font-size: .82rem; color: var(--solo-text, #334155);
  }
  .nwow-logo-label input[type="file"] {
    font-size: .78rem;
    border: 1px dashed var(--solo-divider, #E2E8F0);
    background: var(--solo-bg, #F8FAFC);
    padding: .45rem .6rem; border-radius: 8px;
  }
  .nwow-logo-preview {
    display: flex; align-items: center; gap: .75rem;
    background: var(--solo-bg, #F8FAFC);
    border: 1px solid var(--solo-divider, #E2E8F0);
    border-radius: 8px; padding: .45rem .6rem;
  }
  .nwow-logo-preview img {
    max-height: 40px; max-width: 90px; object-fit: contain;
    background: #FFFFFF; /* darkmode-ok */ border-radius: 4px;
  }
  .nwow-logo-clear {
    border: 1px solid var(--solo-divider, #E2E8F0);
    background: var(--solo-bg-elevated, #FFFFFF);
    color: var(--solo-text, #334155);
    padding: .35rem .7rem; border-radius: 999px;
    font-size: .78rem; cursor: pointer;
  }
  .nwow-foot__hint { font-size: .76rem; color: var(--solo-text-mute, #64748B); margin: 0; }

  /* "Normal way of working" - accessibility-usage panel */
  .nwow-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
  }
  .nwow-tile {
    background: var(--solo-bg, #F8FAFC);
    border: 1px solid var(--solo-divider, #E2E8F0);
    border-radius: 10px;
    padding: .75rem .9rem;
  }
  .nwow-tile-head {
    display: flex; align-items: center; gap: .55rem;
    margin-bottom: .35rem;
  }
  .nwow-tile-icon {
    width: 32px; height: 32px;
    background: var(--solo-mastery-pale, #CCFBF1);
    color: var(--solo-mastery-deep, #14B8A6);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700;
    flex-shrink: 0;
  }
  .nwow-tile-label {
    font-family: var(--solo-font-head, 'Lexend', sans-serif);
    font-weight: 600; font-size: .9rem;
    color: var(--solo-heading-color, var(--solo-navy, #1E293B));
  }
  .nwow-tile-state {
    font-size: .92rem;
    color: var(--solo-heading-color, var(--solo-navy, #1E293B));
    font-weight: 600;
    margin-bottom: .2rem;
  }
  .nwow-tile-meta {
    font-size: .78rem;
    color: var(--solo-text-mute, #64748B);
  }

  /* ── Focus areas (Solo 2027 reskin) ── */
  /* Surface uses mastery-pale (your focus, moving forward). Badges shift to the
     deep-slate Misconception family per the brief - calm/considered, not alarming. */
  .focus-area {
    background: var(--solo-mastery-pale);
    border: 1px solid rgba(45, 212, 191, 0.35);
    border-radius: var(--solo-radius-sm);
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
  }
  .focus-area:last-child { margin-bottom: 0; }
  .focus-area-badge {
    font-family: var(--solo-font-head);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 0.25rem 0.55rem;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.1rem;
  }
  .badge-misconception { background: var(--solo-misconception);      color: white; }
  .badge-gap           { background: var(--solo-misconception-pale); color: var(--solo-misconception-deep); }
  .focus-area-text strong { display: block; font-size: 0.9rem; color: var(--solo-heading-color, var(--solo-navy)); margin-bottom: 0.2rem; }
  .focus-area-text p      { font-size: 0.82rem; color: var(--solo-text); margin: 0; line-height: 1.5; }
  .no-focus { font-size: 0.88rem; color: var(--solo-text-mute); font-style: italic; }

  /* ── SoloCognition ── */
  .unit-block { margin-bottom: 1.5rem; }
  .unit-block:last-child { margin-bottom: 0; }
  .unit-name {
    font-family: var(--solo-font-head);
    font-size: 0.95rem;
    color: var(--solo-heading-color, var(--solo-navy));
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: 0.6rem;
  }
  .attempt-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-light);
  }
  .attempt-label {
    font-size: 0.72rem;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    color: var(--text-mid);
    flex-shrink: 0;
  }
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin-top: 0.5rem;
  }
  .cat-chip {
    border-radius: 8px;
    padding: 0.55rem 0.6rem;
    text-align: center;
    cursor: help;
    position: relative;
    transition: transform 0.1s;
  }
  .cat-chip:hover { transform: translateY(-1px); }
  .cat-count { font-size: 1.1rem; font-weight: 700; display: block; line-height: 1; margin-bottom: 0.15rem; }
  .cat-label { font-size: 0.65rem; font-weight: 600; display: block; line-height: 1.3; }
  /* PCA × RAG flag chips (Solo 2027 reskin).
     Family of three colours per the brief:
       Mastery (teal)          → secure, confidence boost
       Confidence (amber)      → lucky guess, overconfident, still forming
       Misconception (slate)   → misconception, knowledge gap
     Skipped uses neutral. Subtle two-tone within each family separates the cells. */
  .cat-secure        { background: var(--solo-mastery-pale);    color: var(--solo-mastery-text); }
  .cat-confidence    { background: rgba(45, 212, 191, 0.18);    color: var(--solo-mastery-text); }
  .cat-lucky         { background: var(--solo-confidence-pale); color: var(--solo-confidence-deep); }
  .cat-overconfident { background: rgba(245, 158, 11, 0.22);    color: #7c2d12; }
  .cat-forming       { background: rgba(245, 158, 11, 0.10);    color: var(--solo-confidence-deep); }
  .cat-misconception { background: var(--solo-misconception);   color: white; }
  .cat-gap           { background: var(--solo-misconception-pale); color: var(--solo-misconception-deep); }
  .cat-skipped       { background: var(--solo-bg);              color: var(--solo-text-mute); }
  .cat-chip .tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: white;
    font-size: 0.72rem;
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    width: 200px;
    text-align: left;
    z-index: 100;
    font-weight: 400;
    pointer-events: none;
  }
  .cat-chip .tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--navy);
  }
  .cat-chip:hover .tooltip { display: block; }
  .attempt-compare {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-mid);
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--off-white);
    border-radius: 6px;
    border: 1px solid var(--border);
  }
  .compare-arrow { font-weight: 700; }

  /* ── Resources ── */
  .resource-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
  }
  .resource-row:last-child { border-bottom: none; }
  .resource-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--solo-mastery-deep); flex-shrink: 0; }
  .resource-name { flex: 1; color: var(--text); }
  .resource-date { font-size: 0.75rem; color: var(--text-light); }

  /* ── Edit forms ── */
  .edit-trigger-btn {
    font-size: 0.75rem;
    color: var(--solo-mastery-text, #0F766E);
    background: none;
    border: 1px solid var(--teal-light);
    border-radius: 6px;
    padding: 0.3rem 0.65rem;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s;
  }
  .edit-trigger-btn:hover { background: var(--teal-pale); }

  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
    gap: 1rem;
  }
  .info-row:last-child { border-bottom: none; }
  .info-label { color: var(--text-mid); flex-shrink: 0; width: 110px; font-size: 0.82rem; }
  .info-value { color: var(--solo-heading-color, var(--navy)); font-weight: 500; text-align: right; font-size: 0.85rem; overflow-wrap: anywhere; min-width: 0; }

  .edit-form { display: none; padding-top: 1rem; }
  .edit-form.open { display: block; }
  .edit-form .form-group { margin-bottom: 0.9rem; }
  .edit-form .form-label { font-size: 0.8rem; color: var(--text-mid); display: block; margin-bottom: 0.3rem; }
  .edit-form .form-input,
  .edit-form .form-select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--solo-heading-color, var(--navy));
    background: var(--solo-bg-elevated, #FFFFFF);
    outline: none;
    box-sizing: border-box;
  }
  .edit-form .form-input:focus,
  .edit-form .form-select:focus { border-color: var(--solo-mastery-text, #0F766E); box-shadow: 0 0 0 3px rgba(0,158,142,.1); }
  .edit-form-actions { display: flex; gap: 0.6rem; justify-content: flex-end; padding-top: 0.5rem; }
  /* Buttons (Solo 2027 reskin): mastery for save/confirm, ghost for cancel.
     Same dimensions as before so existing layouts don't shift. */
  .btn-save {
    background: var(--solo-mastery);
    color: var(--solo-heading-color, var(--solo-navy));
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.55rem 1.2rem;
    font-family: var(--solo-font-head);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background var(--solo-fast) var(--solo-ease), color var(--solo-fast) var(--solo-ease), box-shadow var(--solo-fast) var(--solo-ease);
  }
  .btn-save:hover { background: var(--solo-mastery-deep); color: #FFFFFF; box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.28), var(--solo-shadow-2); }
  .btn-cancel {
    background: transparent;
    color: var(--solo-text);
    border: 1px solid var(--solo-divider);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-family: var(--solo-font-head);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--solo-fast) var(--solo-ease);
  }
  .btn-cancel:hover { background: var(--solo-misconception-pale); }
  .save-msg {
    font-size: 0.82rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    display: none;
  }
  .save-msg.success { display: block; background: #dcfce7; color: #166534; }
  .save-msg.error   { display: block; background: #fee2e2; color: #991b1b; }

  /* ── Plan options ── */
  .plan-option {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .plan-option:last-of-type { margin-bottom: 0; }
  .plan-option:hover { border-color: var(--teal-light); background: var(--teal-pale); }
  .plan-option.selected { border-color: var(--solo-mastery-text, #0F766E); background: var(--teal-pale); }
  .plan-option-radio {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
  }
  .plan-option.selected .plan-option-radio {
    border-color: var(--solo-mastery-text, #0F766E);
    background: var(--solo-mastery-deep);
    box-shadow: inset 0 0 0 3px white;
  }
  .plan-option-body { flex: 1; }
  .plan-option-name { font-size: 0.88rem; font-weight: 600; color: var(--solo-heading-color, var(--navy)); }
  .plan-option-price { font-size: 0.78rem; color: var(--solo-mastery-text, #0F766E); font-weight: 600; margin: 0.1rem 0 0.25rem; }
  .plan-option-desc { font-size: 0.78rem; color: var(--text-mid); line-height: 1.5; }

  /* ── Billing ── */
  .billing-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--teal-pale);
    border: 1.5px solid var(--teal-light);
    border-radius: 10px;
    margin-bottom: 1rem;
  }
  .billing-plan-name { font-weight: 600; color: var(--solo-heading-color, var(--navy)); font-size: 0.9rem; }
  .billing-plan-price { font-size: 0.82rem; color: var(--text-mid); margin-top: 0.15rem; }
  .billing-plan-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--solo-mastery-deep);
    color: white;
    padding: 0.2rem 0.55rem;
    border-radius: 5px;
    letter-spacing: .04em;
    flex-shrink: 0;
  }
  .billing-note {
    font-size: 0.8rem;
    color: var(--text-mid);
    line-height: 1.6;
    padding: 0.75rem;
    background: var(--off-white);
    border-radius: 8px;
    border: 1px solid var(--border);
  }

  /* ── Loading / empty ── */
  .loading { color: var(--text-light); font-size: 0.88rem; padding: 1rem 0; }
  .empty-state { text-align: center; padding: 1.5rem 1rem; color: var(--text-light); font-size: 0.88rem; }
  .empty-state a { color: var(--solo-mastery-text, #0F766E); text-decoration: none; font-weight: 500; }

  @media (max-width: 720px) {
    .pd-grid { grid-template-columns: 1fr; }
    .pd-header { flex-direction: column; align-items: flex-start; }
    .pd-child-badge { text-align: left; width: 100%; box-sizing: border-box; }
    .pd-card-head { flex-wrap: wrap; gap: 0.5rem; }
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
    .pd-wrap { padding: 1.5rem 1rem 4rem; }
  }
  @media (max-width: 480px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .pd-header { padding: 1.25rem; }
    .pd-card-body { padding: 1rem; }
    .pd-card-head { padding: 0.9rem 1rem; }
    .info-row { flex-direction: column; gap: 0.2rem; }
    .info-value { text-align: left; font-size: 0.9rem; }
    .info-label { width: auto; }
    .billing-plan { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  }

  /* ─── Lite mode ───────────────────────────────────────────────────
     A "give me the facts" view for parents who find the gameification
     overwhelming or just irrelevant. Hides:
       - the engagement strip (HoLL legend / atomic rank tile / streak)
       - the atomic vault mini-map
       - the roadmap card (purely informational, can re-show via Settings)
     Keeps:
       - This week strip, Academic snapshot, every results / RP / NWOW
         section, the Messages inbox, and the SoloCognition / SoloLab
         actual data panels.
     Persisted in localStorage so the choice survives a refresh. */
  .pd-lite-toggle.is-active {
    background: var(--solo-mastery, #2DD4BF);
    color: #0F172A;
    border-color: var(--solo-mastery, #2DD4BF);
  }
  /* !important kept here intentionally: the targeted IDs may have inline
     display styles applied at mount-time by their respective JS modules
     (SoloProgression, SoloRoadmap, SoloVaultMiniMap), and inline styles
     win unless we hoist the override with !important. Remove only after
     confirming none of those modules write element.style.display. */
  body.pd-lite #pd-stats-strip,
  body.pd-lite #pd-vault-mini,
  body.pd-lite #solo-roadmap {
    display: none !important;
  }
  body.pd-lite .pd-vault-row {
    /* No more vault column means the snapshot card should span fully. */
    grid-template-columns: 1fr !important;
  }
  body.pd-lite .pd-header {
    background: var(--solo-bg-elevated, #FFFFFF) !important;
    color: var(--solo-text, #334155);
  }
  body.pd-lite .pd-role-pill,
  body.pd-lite .pd-header h1,
  body.pd-lite .pd-header p {
    color: var(--solo-text, #334155);
  }

  /* ── School search autocomplete ── */
  .school-search-wrap { position: relative; }
  .school-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--solo-bg-elevated, #FFFFFF); border: 1.5px solid var(--border); border-radius: 10px;
    box-shadow: 0 6px 20px rgba(27,58,107,0.12); z-index: 200;
    max-height: 240px; overflow-y: auto;
  }
  .school-opt { padding: .55rem .85rem; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: background .12s; }
  .school-opt:last-child { border-bottom: none; }
  .school-opt:hover, .school-opt.focused { background: var(--solo-bg); }
  .school-opt-name { font-size: .875rem; font-weight: 600; color: var(--solo-heading-color, var(--navy)); }
  .school-opt-name mark { background: #dbeafe; color: var(--solo-heading-color, var(--navy)); border-radius: 2px; padding: 0 1px; }
  .school-opt-detail { font-size: .75rem; color: #64748b; margin-top: 1px; }
  .school-selected-tag {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--solo-bg-elevated); border: 1.5px solid #bfdbfe; border-radius: 8px;
    padding: .35rem .65rem; font-size: .875rem; color: var(--solo-heading-color, var(--navy)); font-weight: 600;
    margin-top: .3rem; max-width: 100%; word-break: break-word;
  }
  .school-clear-btn { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 1rem; line-height: 1; padding: 0; flex-shrink: 0; }
  .school-clear-btn:hover { color: #ef4444; }

  /* ── Multi-child selector ── */
  .child-selector-wrap { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
  .child-selector {
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:8px;
    color:white; font-family:inherit; font-size:0.88rem; padding:0.4rem 0.7rem;
    cursor:pointer; outline:none;
  }
  .child-selector option { background:#1E293B; color:white; }
  .btn-add-child {
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:999px;
    color:rgba(255,255,255,.85); font-family:inherit; font-size:0.82rem; font-weight:600;
    padding:0.4rem 0.85rem; cursor:pointer; white-space:nowrap; transition:background .15s;
  }
  .btn-add-child:hover { background:rgba(255,255,255,.2); }

  /* ── Empty-state CTA - shown when a parent has no children linked ── */
  .pd-empty-state {
    background: var(--solo-bg-elevated, #FFFFFF);
    border: 1px solid var(--solo-divider, #E2E8F0);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    margin: 1rem 0 2rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
  }
  .pd-empty-state__inner { max-width: 540px; margin: 0 auto; }
  .pd-empty-state__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 18px;
    background: rgba(45, 212, 191, 0.10);
    color: var(--solo-mastery-deep, #0F766E);
    margin-bottom: 1rem;
  }
  .pd-empty-state__title {
    font-family: var(--solo-font-head, 'Lexend');
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 700;
    color: var(--solo-heading-color, var(--solo-navy, #0F172A));
    letter-spacing: -0.015em;
    margin: 0 0 0.5rem;
  }
  .pd-empty-state__sub {
    font-family: var(--solo-font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--solo-text, #334155);
    margin: 0 auto 1.5rem;
    max-width: 460px;
  }
  .pd-empty-state__cta {
    display: inline-block;
    background: var(--solo-mastery, #2DD4BF);
    color: #0F172A;
    font-family: var(--solo-font-head, 'Lexend');
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    padding: 14px 28px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s, transform 0.05s;
  }
  .pd-empty-state__cta:hover {
    background: #5EEAD4;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.28), 0 6px 18px rgba(15, 23, 42, 0.12);
  }
  .pd-empty-state__cta:active { transform: translateY(1px); }
  .pd-empty-state__help {
    margin: 1.25rem auto 0;
    font-family: var(--solo-font-body);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--solo-text-mute, #64748B);
    max-width: 460px;
  }
  /* When the empty state is showing, hide the main dashboard sections
     so the page isn't cluttered with 5 "no data" boxes. */
  body.pd-empty .pd-grid { display: none !important; }

  /* Audit RED 5: explainer trio below the Add-child CTA. Only renders
     while the empty state is visible (no children linked yet) and gives
     a parent an answer to "what is my child actually going to use?".
     Three cards: SoloLab, SoloCognition, SoloSight (the one they're on).
     The current tile is dimmed to "You're here" and reads as a
     breadcrumb anchor rather than a destination. */
  .pd-empty-state__tour {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 1.75rem auto 0;
    max-width: 760px;
    text-align: left;
  }
  @media (max-width: 720px) {
    .pd-empty-state__tour { grid-template-columns: 1fr; }
  }
  .pd-empty-state__tile {
    background: var(--solo-bg-elevated, #FFFFFF);
    border: 1px solid var(--solo-divider, #E2E8F0);
    border-radius: 14px;
    padding: 1.1rem 1.15rem 1.05rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    display: flex; flex-direction: column;
  }
  .pd-empty-state__tile-eyebrow {
    font-family: var(--solo-font-head, 'Lexend');
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--solo-mastery-deep, #0F766E);
    margin-bottom: 0.5rem;
    display: flex; align-items: center; gap: 0.4rem;
  }
  .pd-empty-state__tile-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--solo-mastery, #2DD4BF);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
  }
  .pd-empty-state__tile-title {
    font-family: var(--solo-font-head, 'Lexend');
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--solo-heading-color, var(--solo-navy, #0F172A));
    line-height: 1.25;
    margin: 0 0 0.45rem;
  }
  .pd-empty-state__tile-body {
    font-family: var(--solo-font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--solo-text, #334155);
    margin: 0 0 0.85rem;
    flex: 1;
  }
  .pd-empty-state__tile-link {
    align-self: flex-start;
    font-family: var(--solo-font-head, 'Lexend');
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--solo-mastery-deep, #0F766E);
    text-decoration: none;
  }
  .pd-empty-state__tile-link:hover {
    text-decoration: underline;
    text-decoration-color: rgba(45, 212, 191, 0.6);
    text-underline-offset: 3px;
  }
  .pd-empty-state__tile-link--quiet {
    color: var(--solo-text-mute, #64748B);
    font-weight: 500;
  }
  .pd-empty-state__tile--current {
    background: rgba(45, 212, 191, 0.06);
    border-color: rgba(45, 212, 191, 0.45);
  }

  /* ── Add-child modal ── */
  .ac-overlay { position:fixed; inset:0; background:rgba(10,20,40,.55); z-index:500; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
  .ac-overlay.hidden { display:none; }
  .ac-modal { background: var(--solo-bg-elevated, #FFFFFF); border-radius:16px; padding:2rem; width:min(440px,94vw); box-shadow:0 20px 60px rgba(0,0,0,.2); }
  .ac-modal h3 { font-family:'Lora',serif; font-size:1.1rem; color: var(--solo-heading-color, var(--navy)); margin:0 0 0.25rem; }
  .ac-modal p  { font-size:0.84rem; color:var(--text-mid); margin:0 0 1.25rem; }
  .ac-modal .form-group { margin-bottom:0.85rem; }
  .ac-modal .form-label { font-size:0.8rem; color:var(--text-mid); display:block; margin-bottom:0.3rem; }
  .ac-modal .form-input, .ac-modal .form-select { width:100%; border:1px solid var(--border); border-radius:8px; padding:0.6rem 0.8rem; font-size:0.88rem; font-family:inherit; color: var(--solo-heading-color, var(--navy)); box-sizing:border-box; }
  .ac-modal .form-input:focus, .ac-modal .form-select:focus { outline:none; border-color:var(--solo-mastery-text, #0F766E); }
  .ac-modal-actions { display:flex; gap:0.6rem; justify-content:flex-end; margin-top:1rem; }
  .ac-msg { font-size:0.82rem; margin-top:0.5rem; padding:0.4rem 0.7rem; border-radius:6px; display:none; }
  .ac-msg.success { display:block; background:#dcfce7; color:#166534; }
  .ac-msg.error   { display:block; background:#fee2e2; color:#991b1b; }

  /* ── Required Practicals table ── */
  .rp-table { width:100%; border-collapse:collapse; font-size:0.83rem; }
  .rp-table th { text-align:left; padding:0.4rem 0.5rem; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mid); border-bottom:2px solid var(--border); }
  .rp-table td { padding:0.5rem 0.5rem; border-bottom:1px solid var(--border); vertical-align:middle; }
  .rp-table tr:last-child td { border-bottom:none; }
  .rp-badge-done { display:inline-block; background:#dcfce7; color:#166534; font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:12px; }
  .rp-badge-none { display:inline-block; background:#f1f5f9; /* darkmode-ok */ color:#94a3b8; font-size:0.7rem; padding:2px 8px; border-radius:12px; }
  .rp-skills { font-size:0.72rem; color:var(--solo-mastery-text, #0F766E); line-height:1.5; display:flex; flex-wrap:wrap; gap:.25rem; }
  /* Skill chip: now shows code + short label by default so parents on
     mobile (no hover) can read it without tapping. Full description
     stays on the title attr for desktop hover and assistive tech. */
  .rp-skill-chip {
    display:inline-flex; align-items:center; gap:.3rem;
    background: var(--solo-mastery-pale, #CCFBF1);
    color: var(--solo-mastery-deep, #14B8A6);
    border: 1px solid rgba(45, 212, 191, 0.4);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .72rem;
    font-weight: 600;
    cursor: help;
    line-height: 1.3;
  }
  .rp-skill-chip:hover { background: var(--solo-mastery, #2DD4BF); color: #fff; }
  .rp-skill-chip-code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    background: rgba(15, 23, 42, .08);
    color: inherit;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .65rem;
    letter-spacing: .02em;
  }
  .rp-safe-ok  { color:#166534; font-size:0.78rem; font-weight:600; }
  .rp-safe-err { color:#d97706; font-size:0.78rem; font-weight:600; }
  .rp-subject-head { font-family:'Lora',serif; font-size:0.88rem; font-weight:600; color: var(--solo-heading-color, var(--navy)); padding:0.6rem 0.5rem 0.3rem; }
  @media (max-width:580px) { .rp-table th:nth-child(3), .rp-table td:nth-child(3) { display:none; } }

  /* ── Knowledge Check Results ── */
  .kc-subject {
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--solo-heading-color, var(--navy));
    margin: 0.75rem 0 0.35rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--teal-light);
  }
  .kc-subject:first-child { margin-top: 0; }
  .kc-paper {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mid);
    margin: 0.6rem 0 0.25rem 0.5rem;
  }
  .kc-unit {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--solo-heading-color, var(--navy));
    margin: 0.4rem 0 0.2rem 1rem;
  }
  .kc-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    margin: 0.15rem 0 0.15rem 1.75rem;
    border-radius: 8px;
    background: var(--sand-pale);
    font-size: 0.82rem;
  }
  .kc-subunit-name { flex: 1; color: var(--text-dark); }
  .kc-attempts { font-size: 0.75rem; color: var(--text-mid); white-space: nowrap; }
  .kc-score-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .kc-score-4 { background:#dcfce7; color:#166534; }
  .kc-score-3 { background:#d1fae5; color:#065f46; }
  .kc-score-2 { background:#fef9c3; color:#854d0e; }
  .kc-score-1 { background:#ffedd5; color:#9a3412; }
  .kc-score-0 { background:#fee2e2; color:#991b1b; }
  .kc-score-none { background:#f1f5f9; /* darkmode-ok */ color:#94a3b8; }
  .kc-history-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.72rem;
    cursor: pointer;
    color: var(--text-mid);
  }
  .kc-history-toggle:hover { background: var(--border); }
  .kc-history {
    margin: 0.1rem 0 0.4rem 2.25rem;
    font-size: 0.78rem;
    color: var(--text-mid);
    display: none;
  }
  .kc-history.open { display: block; }
  .kc-history-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-left: 2px solid var(--border);
    margin-bottom: 0.15rem;
  }