/* ============================================================================
   PARENT.CSS — Coach for Children, guardian/parent plane only (v5 experience
   layer, package P5).

   SCOPE: every rule below is written under the `.pv` ancestor class. Every
   guardian-facing view in views-parent.js and the two guardian-only reports
   in views-progress.js (viewProgress, viewSessionReport) wraps its rendered
   markup in a single `<div class="pv">`. The child-facing portfolio in
   views-progress.js (viewPortfolio) is deliberately NOT wrapped — that page
   belongs to the kid plane's own visual identity, owned by a different agent
   this wave, and this file must never reach it. Scoping under `.pv` also
   means nothing here can leak into the operator or ops planes' cards, since
   although viewOps lives in this same file, it shares `.pv`'s generic card
   polish only — no bespoke rules target it.

   PALETTE: this file introduces no new hues. Every colour below is one of the
   WOVEN tokens already defined in app.css `:root` (frozen this wave — see
   CONTRACT.md). What's new here is PAIRINGS: a token used as text against a
   background it wasn't already validated against in app.css. Every new
   pairing is contrast-checked and annotated inline with its computed ratio
   (WCAG relative-luminance formula, same method app.css's own comments use).
   Pairs app.css already annotates are reused by reference, not recomputed.

   No motion is added anywhere in this file, so prefers-reduced-motion has
   nothing to reduce here by construction. prefers-contrast: more is handled
   at the bottom. Every focusable control styled here is a pre-existing
   element (button/a/input) that already inherits app.css's global
   :focus-visible ring — nothing new needed.
   ========================================================================== */

.pv {
  --pv-gap-sm: 8px;
  --pv-gap-md: 14px;
  --pv-gap-lg: 26px;
}

/* ---- page rhythm: a little more air than the dense admin default -------- */
.pv .page-head { margin-bottom: 24px; }
.pv .report-section { margin: var(--pv-gap-lg) 0; }
.pv .report-section:first-of-type { margin-top: 18px; }
.pv .card.soft { padding: 22px 24px; }

/* ---- the "Printable version" ghost button (views-progress.js) -----------
   `.btn.ghost` has no rule in app.css at all — only `.kid-btn.ghost` exists,
   a different component for the child plane. Unstyled, it rendered as a
   plain solid `.btn` — the same visual weight as a primary call to action
   like "Start practice". A print utility button should read as quieter than
   that. ink pair: --pine (#2e5140) on --card (#fffdf8) = 8.73:1 (already the
   established `.btn.secondary` text colour on this ground elsewhere). */
.pv .btn.ghost {
  background: transparent;
  color: var(--pine);
  border: 1.5px solid rgba(46, 81, 64, 0.25);
}
.pv .btn.ghost:hover { background: rgba(46, 81, 64, 0.07); box-shadow: none; }

/* ============================================================================
   Dashboard hero — the front door. Everything else on the parent plane is a
   tool; this is the one moment worth a warmer welcome. Background stays
   --card (identical to every other card, so it reads as "considered", not
   "loud") with a single soft decorative wash tucked in the corner — no new
   art, just an existing WOVEN wash used as a shape. It sits fully behind the
   text (position/z-index below), so it never touches contrast.
   ========================================================================== */
.pv .pv-hero {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(46, 81, 64, 0.14);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 30px 32px 26px;
  margin-bottom: var(--pv-gap-lg);
}
.pv .pv-hero::before {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--sage-wash);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
/* keep the two flex children (text block + button row) above the wash */
.pv .pv-hero > div { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .pv .pv-hero { padding: 22px 20px; }
  .pv .pv-hero::before { width: 120px; height: 120px; top: -30px; right: -30px; }
}

@media print {
  .pv .pv-hero::before { display: none; }
}

/* ============================================================================
   Family grid — a set of people, not a table of rows.
   ========================================================================== */

/* A stable, purely-decorative wash behind each child's buddy portrait
   (washFor() in views-parent.js picks one of the four deterministically from
   the child's id). No text sits on these washes — the buddy SVG paints its
   own colours — so there is no contrast pairing to check here at all. */
.pv .mini-buddy.pv-avatar {
  border-radius: 20px;
  display: grid;
  place-items: center;
  padding: 4px;
}
.pv .mini-buddy.pv-avatar[data-wash="0"] { background: var(--sage-wash); }
.pv .mini-buddy.pv-avatar[data-wash="1"] { background: var(--apricot-wash); }
.pv .mini-buddy.pv-avatar[data-wash="2"] { background: var(--dusk-wash); }
.pv .mini-buddy.pv-avatar[data-wash="3"] { background: var(--sun-wash); }

/* The routine counts (sessions today, minutes used) were pill chips the same
   shape and weight as the real status signals (consent, safety, memory
   review) sitting right next to them — everything read as equally urgent,
   which is the "badge soup" an admin console has and a family album doesn't.
   They're quiet inline text now; the chips that remain are the ones that are
   actually a state a parent might act on.
   ink-soft (#48594f) on --card (#fffdf8) = 7.33:1. */
.pv .pv-child-meta {
  margin: 2px 0 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.pv .pv-child-card .child-facts { margin-top: 0; }

/* ============================================================================
   "Latest practice summaries" — the actual moment, not the score. The old
   version led with a same-line "4/5 ·" fraction; the number is still on the
   full Summaries and session-report pages (with its full evidence attached),
   but a dashboard teaser is not where a family should meet their child's
   practice as a grade. This is what happened, whose it was, and when.
   ========================================================================== */
.pv .pv-moment-list { display: flex; flex-direction: column; }
.pv .pv-moment { padding: 14px 2px; border-bottom: 1px dashed rgba(46, 81, 64, 0.14); }
.pv .pv-moment:last-child { border-bottom: 0; padding-bottom: 4px; }
.pv .pv-moment-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
/* pine-deep (#223d30) on --card = 11.62:1 — same colour as every heading. */
.pv .pv-moment-child { font-family: var(--font-display); font-weight: 600; color: var(--pine-deep); font-size: 1rem; }
/* ink-faint (#5c6a5a) on --card = 5.65:1 — app.css's own annotated pair. */
.pv .pv-moment-meta { font-size: 0.76rem; color: var(--ink-faint); white-space: nowrap; }
.pv .pv-moment-text { margin: 6px 0 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }

.pv .pv-notice-list .pv-notice { padding: 10px 2px; }

/* ============================================================================
   Practice summaries page — the same "actual words first" idea, full length.
   ========================================================================== */
.pv .pv-summary-text { font-size: 1.02rem; line-height: 1.6; margin: 8px 0; }
.pv .pv-eval-block { margin-top: 14px; padding-top: 12px; }

/* ============================================================================
   Period report — "What went well" and "Things worth asking about" upgraded
   from bare bullet dashes to small, warm, self-contained cards. These two
   sections are the least score-like and most human parts of the report, and
   used to be its plainest typography; now they carry real visual weight.
   ========================================================================== */
.pv .win-list.pv-win-list,
.pv .prompt-list.pv-prompt-list { display: flex; flex-direction: column; gap: var(--pv-gap-sm); }

/* "went well" — sage, the app's existing positive/affirmative hue.
   ok-ink (#3d6a50) on --sage-wash = 5.19:1 (app.css's own annotated pair).
   ink (#23372e) on --sage-wash = 10.46:1. */
.pv .win-list.pv-win-list li.pv-win {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--sage-wash);
  border: 1px solid rgba(71, 119, 92, 0.28);
  border-radius: var(--radius-soft);
  padding: 11px 14px;
}
.pv .pv-win-mark { flex: none; color: var(--ok-ink); margin-top: 2px; }
.pv .pv-win strong {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pine-deep); margin-bottom: 2px;
}
.pv .pv-win p { margin: 0; color: var(--ink); line-height: 1.5; }

/* "worth asking about" — dusk, the app's existing reflective/informational
   hue (same family as the "info" chip and the "steady" trend chip).
   ink (#23372e) on --dusk-wash = 10.15:1. */
.pv .prompt-list.pv-prompt-list li.pv-prompt {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--dusk-wash);
  border: 1px solid rgba(124, 111, 148, 0.3);
  border-radius: var(--radius-soft);
  padding: 11px 14px;
  font-size: 0.95rem;
}
.pv .pv-prompt svg { flex: none; margin-top: 2px; color: var(--dusk-ink); }
.pv .pv-prompt span { color: var(--ink); line-height: 1.5; }

/* ---- "Materials used" — quieter rows, still legible, no chips ----------- */
.pv .mat-list.pv-used-list { display: flex; flex-direction: column; }
.pv .pv-used-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; border-bottom: 1px dashed rgba(46, 81, 64, 0.14);
}
.pv .pv-used-row:last-child { border-bottom: 0; }
.pv .pv-used-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--pine-deep); }
.pv .pv-used-title svg { color: var(--clay-ink); }
.pv .pv-used-count { color: var(--ink-faint); font-size: 0.85rem; white-space: nowrap; }

/* ---- a touch more room in the improvement / evidence cards -------------- */
.pv .crit-list { gap: 18px; }
.pv .crit-card { padding: 20px 22px; }
.pv .crit-why { line-height: 1.6; }
.pv .crit-block.crit-next { padding: 13px 16px; }

.pv .skill-table td, .pv .skill-table tbody th { padding: 15px 12px; }
.pv .rung { width: 16px; height: 10px; }

.pv .layer-grid { gap: var(--pv-gap-md); }
.pv .layer-card { padding: 16px 18px; }
.pv .layer-card li { padding: 7px 0 7px 18px; line-height: 1.5; }

.pv table.woven td { padding: 11px 10px; }

/* ============================================================================
   prefers-contrast: more — app.css has no such block anywhere yet, so this
   plane defines its own: thicken the hairline borders that carry structure
   (cards, the new win/prompt/used rows, voice/payment rows) and swap the
   faintest tertiary text colour for a stronger one already used elsewhere.
   ========================================================================== */
@media (prefers-contrast: more) {
  .pv .card,
  .pv .crit-card,
  .pv .layer-card,
  .pv .win-list.pv-win-list li.pv-win,
  .pv .prompt-list.pv-prompt-list li.pv-prompt,
  .pv .voice-row,
  .pv .pm-card {
    border-width: 2px;
  }
  .pv .pv-moment-meta,
  .pv .pv-used-count,
  .pv .muted {
    color: var(--ink-soft);
  }
}