/* PDA Compass role pathways (A06): parents, family, you, educators, clinicians.
   Page-specific layout only; components come from css/site.css. Every token has a fallback so the page
   stays readable while the shell stylesheet is still landing. */

.pw-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5, 24px); align-items: center; }
.pw-hero__art { width: clamp(120px, 28vw, 200px); color: var(--accent, #2a6f8f); justify-self: end; }
.pw-hero__art svg { width: 100%; height: auto; display: block; }
.pw-hero .lede { max-width: var(--measure, 62ch); }
@media (max-width: 640px) {
  .pw-hero { grid-template-columns: 1fr; }
  .pw-hero__art { justify-self: start; width: 112px; }
}

#pathway { padding-block: var(--space-5, 24px) var(--space-8, 64px); }

/* Age bands (parents) */
.pw-age { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px) var(--space-4, 16px); padding: var(--space-4, 16px); border: 1px solid var(--line, #d9dde3); border-radius: var(--radius-m, 12px); background: var(--surface, #fff); margin-bottom: var(--space-5, 24px); }
.pw-age__label { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.pw-age__row { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.pw-age .chip { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line, #c7ccd4); border-radius: 999px; background: var(--surface-2, #f3f5f7); color: var(--ink, #1f2933); cursor: pointer; font: inherit; }
.pw-age .chip[aria-pressed="true"] { background: var(--accent, #2a6f8f); color: var(--accent-ink, #fff); border-color: var(--accent, #2a6f8f); }
.pw-age .chip:focus-visible { outline: 3px solid var(--focus, #ffbf47); outline-offset: 2px; }

/* Jump list: static, not sticky. The shell's .toc sticks under the header, and at 375px this list is ~340px tall,
   so it covered every step heading you jumped to (measured 2026-10-22, X4). */
.pw-toc { position: static; margin-bottom: var(--space-5, 24px); }
.pw-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.pw-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2, #f3f5f7); color: var(--ink, #1f2933); text-decoration: none; font-size: 0.95rem; }
.pw-toc a:hover, .pw-toc a:focus-visible { background: var(--accent-soft, #dcebf2); }

/* Numbered steps */
.pw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-7, 48px); }
.pw-step { scroll-margin-top: 8px; } /* the shell's html{scroll-padding-top} already clears the sticky header */
.pw-step__head { display: flex; align-items: center; gap: var(--space-3, 12px); margin-bottom: var(--space-2, 8px); }
.pw-step__num { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent, #2a6f8f); color: var(--accent-ink, #fff); font-weight: 700; font-family: var(--font-display, inherit); }
.pw-step__title { margin: 0; font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
.pw-step__intro { max-width: var(--measure, 62ch); color: var(--ink-muted, #52606d); margin: 0 0 var(--space-4, 16px); }

/* Generic fallbacks when site.css has not landed: keep the grids readable */
.pw-understand, .pw-cards, .pw-tools, .pw-resources, .pw-orgs, .pw-helplines { display: grid; gap: var(--space-4, 16px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 0; padding: 0; list-style: none; }
.pw-step .card { min-width: 0; }
.pw-idea__title, .pw-card .card__title, .pw-link .card__title { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.pw-card__links { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }

/* If you only do three things */
.pw-three { padding: var(--space-5, 24px); border-radius: var(--radius-l, 16px); background: var(--accent-soft, #dcebf2); border: 1px solid var(--line, #d9dde3); }
.pw-three__list { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-3, 12px); font-size: 1.1rem; }
.pw-three__list li { padding-left: 4px; }
.pw-three__list li::marker { font-weight: 700; color: var(--accent, #2a6f8f); }
.pw-three__links { margin-top: var(--space-4, 16px); }
.pw-three__links .btn { min-height: 44px; display: inline-flex; align-items: center; }
.pw-child-note { display: flex; align-items: center; gap: 6px; margin: var(--space-2, 8px) 0 0; }

/* Nation tag beside a link ("England", "England and Wales") */
.pw-nation { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; background: var(--accent-soft, #dcebf2); color: var(--accent-deep, var(--accent, #2a6f8f)); white-space: nowrap; vertical-align: middle; }

/* Links list */
.pw-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3, 12px); }
.pw-links .card__title a { word-break: break-word; display: inline-flex; align-items: center; min-height: 44px; }
/* 44px targets at every pointer size (the shell's .btn--small is 36px with a mouse) */
.pw-step .btn--small, .pw-step .save { min-height: 44px; }

/* Tools */
.pw-tool__link { display: grid; gap: 6px; padding: var(--space-4, 16px); min-height: 44px; text-decoration: none; color: inherit; height: 100%; }
.pw-tool__icon { color: var(--accent, #2a6f8f); }
.pw-tool__body { color: var(--ink-muted, #52606d); font-size: 0.95rem; }

/* Reflection (you) */
.pw-reflect { list-style: none; margin: var(--space-4, 16px) 0; padding: 0; display: grid; gap: var(--space-3, 12px); }
.pw-reflect li { display: flex; gap: var(--space-3, 12px); align-items: flex-start; padding: var(--space-4, 16px); border: 1px solid var(--line, #d9dde3); border-radius: var(--radius-m, 12px); background: var(--surface, #fff); font-size: 1.05rem; }
.pw-reflect .icon { flex: none; color: var(--accent, #2a6f8f); margin-top: 2px; }
.pw-reflect__note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Handout (family) */
.pw-handout { background: var(--surface, #fff); border: 1px solid var(--line, #d9dde3); border-radius: var(--radius-m, 12px); padding: var(--space-5, 24px); max-width: 72ch; margin-bottom: var(--space-4, 16px); }
.pw-handout__title { margin-top: 0; }
.pw-handout p { margin: 0 0 var(--space-3, 12px); }
.pw-handout__foot { font-size: 0.85rem; color: var(--ink-muted, #52606d); margin-bottom: 0 !important; }

/* Support */
.pw-sub { margin: var(--space-4, 16px) 0 var(--space-3, 12px); font-size: 1.1rem; }
.pw-helpline__contact { gap: var(--space-2, 8px); flex-wrap: wrap; align-items: center; }
.pw-helpline__contact a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 4px; }
.pw-helpline__phone { font-weight: 700; font-size: 1.1rem; }
.pw-crisis { margin-top: var(--space-5, 24px); }
.pw-crisis p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); margin: 0; }
.pw-more { margin: var(--space-4, 16px) 0 0; }
.pw-more .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

/* Open all / Close all above a list of strategy cards */
.pw-openall { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2, 8px); margin: 0 0 var(--space-3, 12px); }
.pw-openall .btn { min-height: 44px; }

/* Sources */
.pw-sources { margin-top: var(--space-7, 48px); padding-top: var(--space-5, 24px); border-top: 1px solid var(--line, #d9dde3); }
.pw-sources ul { padding-left: 1.2em; display: grid; gap: 6px; }
.pw-sources h2 { font-size: 1.2rem; }

/* Print: the family handout on its own */
@media print {
  body.pw-print-handout > :not(main), body.pw-print-handout main > :not(.container), body.pw-print-handout #pathway > :not(.pw-steps), body.pw-print-handout .pw-steps > li:not(#step-handout), body.pw-print-handout #step-handout .pw-step__head, body.pw-print-handout #step-handout .pw-step__intro, body.pw-print-handout .no-print, body.pw-print-handout .it-btn { display: none !important; }
  body.pw-print-handout .pw-handout { border: 0; padding: 0; max-width: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .pw-step { scroll-behavior: smooth; }
}

/* 2026-10-22 user test (lane 11): the generic .toc link has a negative left margin for its accent bar, which made
   these step pills overlap their neighbour by 4px. Pills need neither. */
.pw-toc a { margin-left: 0; border-left: 0; }