/*
 * Family plan — the parent dashboard (plan §12). A calm daily plan: one large
 * "Today's next step" card with one primary button, the Evaluate → Elevate →
 * Excel rail (drawn by journey-check.css, the same component the guest result
 * uses), then small paper-like cards. Tokens and buttons come from
 * journey-context.css. Status always carries a label and a shape; colour is
 * never the only signal (WCAG 1.4.1). Reshapes on narrow screens, never clips.
 */
.pgf {
	--pgj-primary: var(--wp--preset--color--primary, #1b3beb);
	--pgj-primary-dark: var(--wp--preset--color--primary-dark, #0c1b9e);
	--pgj-ink: var(--wp--preset--color--ink, #03050f);
	--pgj-body: var(--wp--preset--color--body, #3d4570);
	--pgj-muted: var(--wp--preset--color--muted, #5f6894);
	--pgj-line: var(--wp--preset--color--line, #dbe0f1);
	--pgj-surface: var(--wp--preset--color--surface, #eceff9);
	--pgj-base: var(--wp--preset--color--base, #ffffff);
	--pgj-danger: var(--wp--preset--color--danger, #dc2626);
	--pgf-positive: var(--wp--preset--color--success, #15803d);
	--pgf-caution: var(--wp--preset--color--warning, #a16207);
	--pgf-attention: var(--wp--preset--color--attention, #c2410c);
	max-width: 960px; margin: 0 auto; padding: 8px 16px 40px;
	display: grid; gap: 16px;
	font-family: inherit; color: var(--pgj-body); line-height: 1.45;
}
.pgf *, .pgf *::before, .pgf *::after { box-sizing: border-box; }
.pgf > * { margin: 0; }
.pgf p { margin: 0; }

.pgf-head { display: grid; gap: 4px; }
.pgf-title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.2; color: var(--pgj-ink); }
.pgf-lead { font-size: 1.0625rem; color: var(--pgj-muted); }
.pgf-flash { padding: 10px 14px; border-radius: 10px; background: var(--pgj-surface); color: var(--pgj-ink); font-weight: 600; }
.pgf-context { font-weight: 600; color: var(--pgj-ink); }

/* ── Child switcher: one compact line per child ─────────────────── */
.pgf-kids ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pgf-kids li { margin: 0; }
.pgf-kid {
	display: grid; gap: 2px; min-width: 150px; min-height: 48px; padding: 10px 14px;
	border: 1px solid var(--pgj-line); border-radius: 12px; background: var(--pgj-base);
	color: var(--pgj-body); text-decoration: none;
}
.pgf-kid:hover { border-color: var(--pgj-primary); }
.pgf-kid[aria-current="page"] { border-color: var(--pgj-primary); box-shadow: inset 0 0 0 1px var(--pgj-primary); }
.pgf-kid__name { font-weight: 700; color: var(--pgj-ink); }
.pgf-kid__meta { font-size: .8125rem; color: var(--pgj-muted); }
.pgf-kid:focus-visible, .pgf-link:focus-visible { outline: 3px solid var(--wp--preset--color--accent, #4d93ff); outline-offset: 3px; }

/* ── Cards ──────────────────────────────────────────────────────── */
.pgf-card { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border: 1px solid var(--pgj-line); border-radius: 14px; background: var(--pgj-base); min-width: 0; }
.pgf-card > * { margin: 0; }
.pgf-h2 { margin: 0; font-size: 1.125rem; line-height: 1.3; color: var(--pgj-ink); }
.pgf-h3 { margin: 0; font-size: 1rem; line-height: 1.3; color: var(--pgj-ink); }
.pgf-muted { color: var(--pgj-muted); }
.pgf-note { font-size: .875rem; color: var(--pgj-muted); }
.pgf-link { color: var(--pgj-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pgf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pgf form { margin: 0; }

/* ── Today's next step: the one large card ─────────────────────── */
.pgf-today { gap: 10px; padding: 22px 22px 18px; border-color: var(--pgj-primary); box-shadow: 0 1px 0 var(--pgj-line), inset 0 0 0 1px var(--pgj-primary); }
.pgf-eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pgj-primary); }
.pgf-today__activity { margin: 0; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); line-height: 1.25; color: var(--pgj-ink); }
.pgf-today__reason { font-size: 1.0625rem; color: var(--pgj-body); }
.pgf-today__evidence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .9375rem; color: var(--pgj-muted); }
.pgf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.pgf-cta { min-height: 52px; padding: 12px 24px; font-size: 1.0625rem; }

/* ── Status: label + shape, tone as a role ─────────────────────── */
.pgf-status {
	display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
	border: 1px solid currentColor; border-radius: 999px;
	font-size: .8125rem; font-weight: 600; white-space: nowrap;
}
.pgf-status__icon { font-size: .875rem; line-height: 1; }
.pgf-status[data-tone="positive"] { color: var(--pgf-positive); }
.pgf-status[data-tone="caution"] { color: var(--pgf-caution); }
.pgf-status[data-tone="attention"] { color: var(--pgf-attention); }
.pgf-status[data-tone="neutral"] { color: var(--pgj-muted); border-style: dashed; }

/* ── Rail: journey-check.css draws it; the dashboard adds "Next" ─ */
.pgf-rail { margin: 0; }
.pgf .pgc-rail__step[data-state="recommended"] { border-color: var(--pgj-primary); border-style: dashed; color: var(--pgj-ink); }
.pgf .pgc-rail__step[data-state="recommended"] .pgc-rail__icon { color: var(--pgj-primary); }

/* ── Skills that need attention ─────────────────────────────────── */
.pgf-skills { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pgf-skill { display: grid; gap: 6px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--pgj-line); }
.pgf-skill:first-child { border-top: 0; padding-top: 0; }
.pgf-skill__name { font-weight: 700; color: var(--pgj-ink); overflow-wrap: break-word; }
.pgf-skill__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pgf-skill__evidence { font-size: .875rem; color: var(--pgj-muted); }
.pgf-skill .pgf-link { justify-self: start; font-size: .9375rem; }

.pgf-facts { display: grid; gap: 4px; margin: 0; padding: 0 0 0 1.1em; }
.pgf-facts li { margin: 0; color: var(--pgj-ink); }

/* ── New school year: confirm the grade (asked once a year) ────── */
.pgf-promotion { border-style: dashed; border-color: var(--pgj-primary); }
.pgf-promotion .pgj-btn { min-height: 44px; }
.pgf-promotion__yes { border-color: var(--pgj-primary); color: var(--pgj-primary); font-weight: 700; }

/* ── Secondary: tutor support and settings ─────────────────────── */
.pgf-support { display: grid; gap: 12px; }
.pgf-card--suggest { border-color: var(--pgf-attention); }
.pgf-privacy { display: grid; gap: 4px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--pgj-line); }
.pgf-privacy .pgj-btn--link { justify-self: start; min-height: 36px; padding: 4px 0; font-weight: 600; }
.pgf-extra { overflow-x: auto; }

.pgf .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
	.pgf { padding: 4px 12px 32px; gap: 14px; }
	.pgf-today { padding: 18px 16px 16px; }
	.pgf-cta { width: 100%; }
	.pgf-kid { min-width: 0; flex: 1 1 140px; }
	.pgf-kids li { flex: 1 1 140px; }
}

@media (prefers-reduced-motion: no-preference) {
	.pgf-kid { transition: border-color .15s ease; }
}