/* v6 layout layer: parent/teacher journey */

/* ---------- header: Book is the primary action, Donate a hairline secondary ---------- */
.header-actions .header-give{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-2,#2f3848);border-radius:4px;color:var(--ink,#eef2f7);font-family:var(--font-body);font-size:.875rem;font-weight:600;line-height:1;text-decoration:none;transition:border-color .2s,color .2s}
.header-actions .header-give:hover{border-color:var(--ink-2,#a7b1c2)}
.header-actions .header-give:focus-visible{outline:2px solid var(--orange,#ff7a00);outline-offset:3px}
.header-actions .header-book{min-height:44px}
@media(max-width:900px){.header-actions .header-give{display:none}}
@media(max-width:600px){.header-actions .header-book{min-height:44px;padding:10px 12px;gap:10px}}
@media(max-width:374px){.header-actions .header-book svg{display:none}}
.mobile-nav__actions{display:grid;gap:8px}
.mobile-nav__actions .button{width:100%;justify-content:space-between}
.mobile-nav__give{display:flex;align-items:center;min-height:48px;padding:0 4px;color:inherit;font-size:1rem;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mobile-nav__give:hover{text-decoration-thickness:2px}

/* ---------- footer column labels are labels, not headings ---------- */
.site-footer .footer-heading{margin:0 0 14px;color:var(--ink-2,#a7b1c2);text-transform:uppercase}

/* ---------- practical details: a spec sheet, not cards ---------- */
.pd{border-bottom:1px solid var(--line,#232a36)}
.pd.section-space{padding-block:clamp(48px,6vw,80px)}
.pd__layout{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,5vw,80px);row-gap:28px;align-items:start}
.pd__head{grid-column:1;grid-row:1 / span 2}
main .pd__title:not(#\#){font-size:var(--text-h3,1.5rem);line-height:1.15;margin:0}
.pd__lead{margin:12px 0 0;color:var(--ink-2,#a7b1c2);font-size:var(--text-sm,.9375rem);max-width:34ch}
.pd__list{grid-column:2;margin:0;border-top:1px solid var(--line-2,#2f3848)}
.pd__row{display:grid;grid-template-columns:minmax(9rem,13rem) minmax(0,1fr);gap:24px;padding:14px 0;border-bottom:1px solid var(--line,#232a36)}
.pd__row dt{margin:0;font-family:var(--font-display);font-stretch:92%;font-weight:600;font-size:var(--text-label,.8125rem);letter-spacing:var(--label-track,.07em);text-transform:uppercase;color:var(--ink-2,#a7b1c2);padding-top:.2em}
.pd__row dd{margin:0;font-family:var(--font-body);font-size:var(--text-body,1.0625rem);line-height:1.5;color:var(--ink,#eef2f7)}
.pd__actions{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.pd__link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink,#eef2f7);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pd__link:hover{text-decoration-thickness:2px}
@media(max-width:900px){
  .pd__layout{grid-template-columns:1fr}
  .pd__head,.pd__list,.pd__actions{grid-column:1;grid-row:auto}
}
@media(max-width:600px){
  .pd__row{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .pd__actions .button{width:100%;justify-content:space-between}
}

/* ---------- Step 2 (home review) ---------- */
/* Word-by-word heading reveal: finish while the heading is still low on screen, never half-faded while being read */
@supports (animation-timeline:view()){
  body:not(.is-motion-paused):not([data-experience=standard]):not([data-scroll=false]) .mo-head.mo-sd .mo-w{
    animation-range:cover calc(1% + var(--i,0) * .8%) cover calc(12% + var(--i,0) * .8%)}
}
/* Phone hero: readable subtitle (was 13px in a 210px column) */
@media(max-width:600px){
  .hero-type .hero-summary{max-width:30ch;font-size:1.0625rem;line-height:1.5;margin:18px 0 20px}
}

/* ---------- Step 3 (programs review) ---------- */
/* No repeated placeholder art on datasheets: the figure appears only once a real photo exists
   (live-data.js removes .media-placeholder when a photo for that slot loads). The spec sheet takes the full width meanwhile. */
.ds .ds__fig:has(.media-placeholder){display:none}
.ds .ds__sheet-grid:has(.ds__fig .media-placeholder){grid-template-columns:minmax(0,1fr)}
.ds .ds__sheet-grid:has(.ds__fig .media-placeholder) .ds__copy{max-width:72ch}

/* ---------- Step 4 (remaining pages) ---------- */
/* "Other ways to help": action titles are list items, not section headings */
.v2-patch h2:not(#\#),.v2-patch h3:not(#\#){font-size:clamp(1.15rem,1rem + .4vw,1.35rem);line-height:1.2}
.v2-donation h2:not(#\#),.v2-donation h3:not(#\#){font-size:clamp(1.25rem,1.05rem + .5vw,1.5rem)}
/* About: no empty placeholder panel — the frame appears once a real photo is added in the sheet */
.page-editorial__media:has(.media-frame--about .media-placeholder){display:none}

/* ---------- Step 9 (fresh-eyes review fixes) ---------- */
/* P0: partnership placeholder figure → hidden until a real photo exists; copy takes the full width */
.v2-partnership__stage:has(.media-placeholder){display:none}
.v2-partnership__layout:has(.v2-partnership__stage .media-placeholder){grid-template-columns:minmax(0,1fr)}
.v2-partnership__layout:has(.v2-partnership__stage .media-placeholder) .v2-partnership__connection{display:none}
.v2-partnership__layout:has(.v2-partnership__stage .media-placeholder) .v2-partnership__copy{max-width:60ch}

/* P1: footer statement belongs to the type system (was 100% width, +tracking) */
.site-footer .site-footer__brand p{font-family:var(--font-display);font-stretch:var(--heading-stretch);letter-spacing:var(--heading-track);font-weight:700;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1.1;max-width:22ch}
/* P1: footer wordmark smaller, so the footer fits in one screen */
.site-footer .brand--footer{margin:40px 0 24px}
.brand--footer .brand__logo,.brand--footer .brand__image{width:min(100%,360px);max-height:none;margin-inline:0}

/* P1: small / low-contrast text */
.v2-patch .text-link:not(#\#){font-size:var(--text-sm);opacity:1}
.v2-resource__description:not(#\#){font-size:var(--text-sm);line-height:1.55;color:var(--ink-2)}
.v2-involved__text:not(#\#),.v2-donation>p:not(#\#){font-size:var(--text-sm)}

/* P1: orange only for live things and primary actions */
.v2-resource__kind:not(#\#){color:var(--ink-2)}
.v2-resource__graphic:not(#\#){color:var(--blue);opacity:.85}
@media(hover:hover){.v2-resource:hover .v2-resource__graphic:not(#\#){color:var(--orange);opacity:1}}

/* P2: Archivo semi-condensed needs a touch more word space at display sizes */
h1,h2,h3,.section-title{word-spacing:.06em}
/* P2: the decorative dot on primary buttons read as a glitch */
.button--yellow::after,.button--primary::after{content:none!important}
/* P2: rating-plate readouts that are words, not values, use the label face */
.cks-trust__readout:not(#\#){font-family:var(--font-mono);font-stretch:92%;letter-spacing:var(--label-track);text-transform:uppercase;font-weight:600}
/* Donate button on dark (non-orange) sections: primary orange fill + dark text (orange text on pale fill failed contrast) */
.v2-involved:not(.section-tone--yellow) .v2-donation__button:not(#\#){background:var(--orange);color:var(--on-accent)}
.v2-involved:not(.section-tone--yellow) .v2-donation__button:not(#\#) *{color:inherit}
.v2-involved:not(.section-tone--yellow) .v2-donation__button:not(#\#):hover{background:var(--orange-hi)}

/* ---------- Signal lab: pin on every desktop window ≥560px tall (was only >850px) ---------- */
/* Before: on laptop windows (<850px tall) the lab stopped pinning, scrolled away mid-sequence and never reached
   "Test"/"Create". Now it pins, fits the visible area (the bench drawing shrinks to the leftover height), stays
   vertically centred, and the scroll runway is shorter so stages respond straight away. */
@media(min-width:601px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
  body:not([data-experience=standard]):not([data-scroll=false]) .signal-lab{min-height:185svh}
  body:not([data-experience=standard]):not([data-scroll=false]) .lab-sticky{
    position:sticky;top:78px;height:calc(100svh - 78px);min-height:0;
    padding-block:clamp(14px,3.2vh,38px) clamp(12px,2.4vh,26px);
    display:flex;flex-direction:column;justify-content:center}
  body:not([data-experience=standard]):not([data-scroll=false]) .lab-workbench{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-block:clamp(6px,1.4vh,14px) 0}
  body:not([data-experience=standard]):not([data-scroll=false]) .signal-bench{flex:1 1 0;min-height:150px;height:auto;max-height:440px;width:100%}
  body:not([data-experience=standard]):not([data-scroll=false]) .lab-sequencer{margin-top:clamp(12px,2.6vh,28px)}
  body:not([data-experience=standard]):not([data-scroll=false]) .lab-control-panel{margin-top:clamp(8px,1.6vh,18px)}
  body:not([data-experience=standard]):not([data-scroll=false]) .lab-bottom{margin-top:clamp(8px,1.6vh,24px)}
}
/* short laptop windows: tighten the heading block so the bench keeps enough room */
@media(min-width:601px) and (min-height:560px) and (max-height:800px) and (prefers-reduced-motion:no-preference){
  .lab-heading h2:not(#\#){font-size:clamp(1.75rem,1.2rem + 1.6vw,2.4rem)}
  .lab-heading>p{font-size:var(--text-body);margin-top:6px}
  .lab-stage{padding-block:10px}
}
@media(min-width:601px) and (min-height:560px) and (max-height:760px) and (prefers-reduced-motion:no-preference){
  .lab-heading>p{display:none}           /* the control panel labels already say what to do */
  .lab-caption-stack{margin-top:2px;min-height:22px}
}

/* ---------- v7 step 7: long-form pages use the full width (was a 1040px block leaving ~400px empty at 1440) ---------- */
@media(min-width:1200px){
  .editorial-rows:not(#\#){max-width:none}
  .editorial-row:not(#\#){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .editorial-row .rte:not(#\#){max-width:68ch}
}
@media(min-width:1200px){.lesson-toy__wrap:not(#\#),.lesson-toy__next:not(#\#){max-width:none}}