/* Carry the selected prototype into its shared detail pages.
   demobar.js sets data-concept before the device-preview early return. */
body[data-concept]{
  --detail-font:"Gabarito",system-ui,sans-serif;
  --detail-heading:"Gabarito",system-ui,sans-serif;
  --detail-radius:18px;
  --detail-button-radius:999px;
  --detail-heading-weight:600;
  --detail-header-height:92px;
  --detail-header-width:1180px;
  --detail-header-gutters:96px;
  --detail-brand-size:19px;
  --detail-nav-size:14px;
  --detail-nav-gap:28px;
  --detail-nav-background:var(--paper);
  --paper:#fff;
  --ink:#123c48;
  --body:#405d64;
  --text:var(--body);
  --navy:var(--ink);
  --navy-dk:var(--ink);
  --teal:#154854;
  --teal-dk:#123c48;
  --wash:#edf4ef;
  --ice:var(--wash);
  --warm:#f8f3e7;
  --line:#d4dfdc;
  --gold:#efb64a;
  --gold-dk:#745015;
  --detail-hero:#edf4f2;
  background:var(--paper);
  color:var(--body);
  font-family:var(--detail-font);
}
body[data-concept] :is(h1,h2,h3){font-family:var(--detail-heading);font-weight:var(--detail-heading-weight);color:var(--ink)}
body[data-concept] :is(.site-header,.hdr){background:var(--detail-nav-background);border-color:var(--line)}
body[data-concept] :is(.header-inner,.hdr .w){min-height:var(--detail-header-height);width:min(var(--detail-header-width),calc(100% - var(--detail-header-gutters)));max-width:none;margin-inline:auto;padding-inline:0;gap:30px}
body[data-concept] :is(.site-name,.brand){font-family:var(--detail-font);font-size:var(--detail-brand-size);font-weight:600;letter-spacing:-.025em;color:var(--ink);line-height:1.2;max-width:none;white-space:nowrap;margin:0}
body[data-concept] :is(.site-menu,.mnav){background:transparent;color:var(--ink);border-color:var(--line);border-radius:7px}
body[data-concept] :is(#site-nav,#primary-nav){background:var(--detail-nav-background);font-family:var(--detail-font);font-size:var(--detail-nav-size);font-weight:500;gap:var(--detail-nav-gap)}
body[data-concept] :is(#site-nav,#primary-nav) a{color:var(--ink);font-size:inherit;font-weight:inherit}
body[data-concept] :is(#site-nav .library-link,#primary-nav .btn.gold){display:inline-flex;align-items:center;gap:18px;padding:12px 18px;background:var(--ink);border:1px solid var(--ink);color:#fff;border-radius:var(--detail-button-radius);line-height:1.5}
body[data-concept] :is(.button,.btn){font-family:var(--detail-font);border-radius:var(--detail-button-radius)}
body[data-concept] .button{background:var(--ink);color:#fff}
body[data-concept] .button:hover{background:var(--teal);color:#fff}
body[data-concept] .page-hero{max-width:900px;padding-bottom:80px}
body[data-concept] .page-hero h1{font-size:clamp(44px,5.6vw,76px);letter-spacing:-.045em;line-height:1.05;max-width:16ch}
body[data-concept] .page-hero .intro{max-width:660px}
body[data-concept] :is(.eyebrow,.kick){color:var(--teal);font-family:var(--detail-font)}
body[data-concept] .resource-card{border-radius:var(--detail-radius);background:var(--wash)}
body[data-concept] :is(.resource-card h3,.detail-list h3,.paper-list h3){line-height:1.25}
body[data-concept] .callout{border-radius:var(--detail-radius);background:var(--warm)}
body[data-concept] .impact{border-radius:var(--detail-radius);background:var(--wash)}
body[data-concept] .stats div{border-color:var(--line)}
body[data-concept] .stats strong{font-family:var(--detail-heading);font-weight:var(--detail-heading-weight)}
body[data-concept] :is(.priority-nav .number,.paper-topic){color:var(--teal)}
body[data-concept] .site-footer{background:var(--ink);color:#fff}
body[data-concept] .site-footer a{color:#fff}

/* Library and coalition use the same visual vocabulary as the priority pages. */
body.resource-page[data-concept] .hero{background:var(--detail-hero);color:var(--body)}
body.resource-page[data-concept] .hero h1{font-size:clamp(42px,4.8vw,68px);letter-spacing:-.04em;line-height:1.06}
body.resource-page[data-concept] .hero :is(p,.library-credit){color:var(--body)}
body.resource-page[data-concept] .hero p.crumb{color:var(--teal)}
body.resource-page[data-concept] .hero.mini .w{padding-top:72px;padding-bottom:72px;gap:64px}
body.resource-page[data-concept] .hero.mini .pic img{border-radius:var(--detail-radius);max-height:310px}
body.resource-page[data-concept] :is(.tool,.resource,.filterbar,.controls,.table-scroll){border-radius:var(--detail-radius);border-color:var(--line)}
body.resource-page[data-concept] :is(.tool,.resource){background:var(--paper)}
body.resource-page[data-concept] .resource h3{padding-right:30px}
body.resource-page[data-concept] .btn.gold{background:var(--gold);color:var(--ink)}
body.resource-page[data-concept] .btn.teal{background:var(--teal);color:#fff}
body.resource-page[data-concept] .btn.white{background:var(--paper);color:var(--ink);border-color:var(--line)}
body.resource-page[data-concept] .btn.ice{background:var(--wash);color:var(--ink)}
body.resource-page[data-concept] .filter-btn{border-radius:var(--detail-button-radius);font-family:var(--detail-font)}
body.resource-page[data-concept] .cta{background:var(--warm);color:var(--body)}
body.resource-page[data-concept] .cta h2{color:var(--ink)}
body.resource-page[data-concept] .cta p{color:var(--body)}
body.resource-page[data-concept] footer{background:var(--ink);color:#fff;border-color:var(--ink)}
body.resource-page[data-concept] footer a{color:#fff}
body.resource-page[data-concept] .tag-es{background:var(--warm);color:var(--teal)}
body.resource-page[data-concept] :is(.field input,.field select){border-radius:8px}
body.resource-page[data-concept] :is(.priority-links a,.crumb a){color:var(--ink)}

/* 01 — Community: generous curves, warm gold, and an open teal palette. */
body[data-concept="site-1"] :is(#site-nav .library-link,#primary-nav .btn.gold){background:#f1b847;color:#143f4c;border-color:#f1b847;border-radius:0 22px 0 22px}
body[data-concept="site-1"] .page-hero h1{font-weight:600}
body[data-concept="site-1"] .resource-card:nth-child(even){background:#eaf2f6}
body[data-concept="site-1"] .callout{border-radius:28px 28px 28px 7px}
body.resource-page[data-concept="site-1"] .hero.mini .pic img{border-radius:100px 12px 100px 12px}
body.resource-page[data-concept="site-1"] .tool:nth-child(even){background:#f4f8fb}

/* 02–03 — Restored Community concepts: white, teal, and warm gold. */
body:is([data-concept="site-2"],[data-concept="site-3"]){
  --detail-font:"Gabarito",system-ui,sans-serif;
  --detail-heading:"Gabarito",system-ui,sans-serif;
  --detail-heading-weight:600;
  --detail-radius:8px;
  --detail-header-height:100px;
  --detail-header-width:1180px;
  --detail-header-gutters:clamp(48px,10vw,144px);
  --detail-brand-size:20px;
  --detail-nav-size:15px;
  --detail-nav-gap:34px;
  --paper:#fff;
  --ink:#153e52;
  --body:#536772;
  --teal:#287d83;
  --teal-dk:#21696e;
  --wash:#f2f8f8;
  --warm:#fff9ed;
  --line:#dce6e8;
  --gold:#f6ae2d;
  --gold-dk:#815719;
  --detail-hero:var(--paper);
}
body:is([data-concept="site-2"],[data-concept="site-3"]) :is(.site-name,.brand){max-width:270px;white-space:normal;letter-spacing:-.03em}
body:is([data-concept="site-2"],[data-concept="site-3"]) :is(#site-nav .library-link,#primary-nav .btn.gold){background:transparent;color:var(--ink);border-color:#b9cdcf;border-radius:24px;padding:11px 18px}
body:is([data-concept="site-2"],[data-concept="site-3"]) .page-hero h1{letter-spacing:-.035em}
body:is([data-concept="site-2"],[data-concept="site-3"]) .resource-card{background:var(--wash);border:1px solid var(--line)}
body[data-concept="site-2"] .button{background:var(--gold);color:var(--ink)}
body[data-concept="site-2"] .button:hover{background:#ffc45d;color:var(--ink)}
body[data-concept="site-2"] .impact{background:var(--warm)}
body[data-concept="site-2"] .impact .stats div{border-color:#e7d9bb}
body.resource-page[data-concept="site-2"] .hero.mini .pic img{border-radius:100px 8px 100px 8px}
body[data-concept="site-3"]{
  --detail-radius:4px;
  --detail-button-radius:3px;
  --paper:#fcfcf9;
  --wash:#e9f2ef;
}
body[data-concept="site-3"] .button{background:var(--ink);color:#fff}
body[data-concept="site-3"] .button:hover{background:var(--teal);color:#fff}
body.resource-page[data-concept="site-3"] .hero.mini .pic img{border-radius:4px 100px 4px 4px}

/* 04–05 — Restored Child Mind concepts: open white space, navy serif, cyan. */
body:is([data-concept="child-1"],[data-concept="child-2"]){
  --detail-font:"Inter",system-ui,sans-serif;
  --detail-heading:"Source Serif 4",Georgia,serif;
  --detail-heading-weight:400;
  --detail-radius:16px;
  --detail-button-radius:999px;
  --detail-header-height:92px;
  --detail-header-width:1192px;
  --detail-header-gutters:96px;
  --detail-brand-size:16px;
  --detail-nav-size:13.6px;
  --detail-nav-gap:32px;
  --detail-nav-background:#fff;
  --paper:#fff;
  --ink:#132a4c;
  --body:#465368;
  --teal:#00758b;
  --teal-dk:#006574;
  --wash:#eef8fa;
  --warm:#eef8fa;
  --line:#dce3e9;
  --gold:#ffdb57;
  --gold-dk:#79631b;
  --detail-action:#17d6e3;
  --detail-hero:#fff;
}
body:is([data-concept="child-1"],[data-concept="child-2"]) :is(.site-name,.brand){max-width:260px;white-space:normal;font-weight:600;letter-spacing:-.035em;line-height:1.35}
body:is([data-concept="child-1"],[data-concept="child-2"]) :is(#site-nav .library-link,#primary-nav .btn.gold){background:var(--detail-action);color:var(--ink);border:1px solid var(--detail-action);border-radius:999px;padding:13px 19px;font-weight:600}
body:is([data-concept="child-1"],[data-concept="child-2"]) :is(.site-menu,.mnav){border-radius:999px}
body:is([data-concept="child-1"],[data-concept="child-2"]) .page-hero h1{letter-spacing:-.035em}
body:is([data-concept="child-1"],[data-concept="child-2"]) .resource-card{background:var(--paper);border:1px solid var(--line)}
body:is([data-concept="child-1"],[data-concept="child-2"]) .callout{background:var(--wash)}
body:is([data-concept="child-1"],[data-concept="child-2"]) .button{background:var(--detail-action);color:var(--ink)}
body:is([data-concept="child-1"],[data-concept="child-2"]) .button:hover{background:#44e3ec;color:var(--ink)}
body:is([data-concept="child-1"],[data-concept="child-2"]) .impact{background:var(--paper);border-top:1px solid var(--line);border-radius:0}
body:is([data-concept="child-1"],[data-concept="child-2"]) .priority-nav a[aria-current="page"]{border-color:var(--ink)}
body.resource-page:is([data-concept="child-1"],[data-concept="child-2"]) .hero.mini .pic img{border-radius:150px 150px 12px 12px}
body.resource-page:is([data-concept="child-1"],[data-concept="child-2"]) .tool .abbr{background:var(--detail-action);color:var(--ink)}
body.resource-page:is([data-concept="child-1"],[data-concept="child-2"]) .btn.gold{background:var(--detail-action);color:var(--ink)}
body[data-concept="child-2"]{--detail-header-height:100px}
body[data-concept="child-2"] :is(#site-nav .library-link,#primary-nav .btn.gold){background:var(--gold);border-color:var(--gold)}

/* The restored concepts keep their light footer and open resource surfaces. */
body:is([data-concept="site-2"],[data-concept="site-3"],[data-concept="child-1"],[data-concept="child-2"]) .site-footer,
body.resource-page:is([data-concept="site-2"],[data-concept="site-3"],[data-concept="child-1"],[data-concept="child-2"]) footer{background:var(--paper);color:var(--body);border-top:1px solid var(--line)}
body:is([data-concept="site-2"],[data-concept="site-3"],[data-concept="child-1"],[data-concept="child-2"]) .site-footer a,
body.resource-page:is([data-concept="site-2"],[data-concept="site-3"],[data-concept="child-1"],[data-concept="child-2"]) footer a{color:var(--ink)}

@media(max-width:1100px){
  body:is([data-concept="child-1"],[data-concept="child-2"]){--detail-header-gutters:64px;--detail-brand-size:14.72px;--detail-nav-gap:21.6px}
  body:is([data-concept="child-1"],[data-concept="child-2"]) :is(.site-name,.brand){max-width:200px}
}
@media(max-width:1000px){
  body[data-concept="site-1"]{--detail-header-gutters:64px;--detail-brand-size:17px;--detail-nav-size:13px;--detail-nav-gap:22px}
  body:is([data-concept="site-2"],[data-concept="site-3"]){--detail-header-height:90px;--detail-brand-size:18px;--detail-nav-size:14px;--detail-nav-gap:20px}
  body[data-concept] :is(.header-inner,.hdr .w){gap:20px}
  body.resource-page[data-concept] .hero.mini .w{gap:36px}
  body.resource-page[data-concept] .hero.mini .pic img{max-height:260px;aspect-ratio:16/7}
  body.resource-page[data-concept="site-2"] .hero.mini .pic img{border-radius:55px 6px}
  body.resource-page[data-concept="site-3"] .hero.mini .pic img{border-radius:4px 60px 4px 4px}
  body.resource-page:is([data-concept="child-1"],[data-concept="child-2"]) .hero.mini .pic img{border-radius:80px 80px 12px 12px}
}
@media(min-width:761px){
  body.resource-page[data-concept] .mnav{display:none}
  body.resource-page[data-concept] #primary-nav{display:flex;position:static;flex-direction:row;align-items:center;padding:0;border:0;box-shadow:none}
  body.resource-page[data-concept] #primary-nav>a{padding:0;border:0}
  body.resource-page[data-concept] #primary-nav>.btn{margin:0;align-self:auto}
}
@media(max-width:760px){
  body[data-concept]{--detail-header-height:78px;--detail-header-gutters:42px;--detail-brand-size:17px}
  body:is([data-concept="site-2"],[data-concept="site-3"]){--detail-header-height:82px;--detail-header-gutters:50px}
  body:is([data-concept="child-1"],[data-concept="child-2"]){--detail-header-height:80px;--detail-header-gutters:48px}
  body[data-concept] :is(.header-inner,.hdr .w){position:relative;gap:16px;flex-wrap:nowrap}
  body[data-concept] :is(.site-name,.brand){max-width:220px;white-space:normal;font-size:17px}
  body:is([data-concept="site-2"],[data-concept="site-3"]) :is(.site-name,.brand){max-width:190px;font-size:18px}
  body:is([data-concept="child-1"],[data-concept="child-2"]) :is(.site-name,.brand){max-width:220px;font-size:14.4px}
  body[data-concept] .site-menu{display:block;padding:9px 14px;font-size:13px}
  body[data-concept] .mnav{display:inline-flex}
  body[data-concept] :is(#site-nav,#primary-nav){display:none;position:absolute;top:100%;left:calc(var(--detail-header-gutters) / -2);right:calc(var(--detail-header-gutters) / -2);padding:18px 21px 24px;border-bottom:1px solid var(--line);box-shadow:0 14px 20px #1239460a;gap:6px;font-size:14px}
  body[data-concept] :is(#site-nav.is-open,#primary-nav.open){display:flex;flex-direction:column;align-items:stretch}
  body[data-concept] :is(#site-nav,#primary-nav)>a{padding:12px;border:0}
  body[data-concept] :is(#site-nav .library-link,#primary-nav .btn.gold){margin-top:6px;justify-content:space-between;align-self:flex-start}
}
@media(max-width:700px){
  body[data-concept] .page-hero{padding-bottom:54px}
  body[data-concept] .page-hero h1{font-size:clamp(40px,10.4vw,58px)}
  body.resource-page[data-concept] .hero.mini .w{padding-top:44px;padding-bottom:44px;gap:28px}
  body.resource-page[data-concept] .hero h1{font-size:clamp(40px,10vw,54px)}
  body.resource-page[data-concept] .hero.mini .pic img{max-height:210px}
  body.resource-page[data-concept] .btn{justify-content:center}
  body.resource-page[data-concept] .hero .row{align-items:flex-start;flex-direction:column}
}
@media(max-width:600px){
  body:is([data-concept="child-1"],[data-concept="child-2"]){--detail-header-height:76px;--detail-header-gutters:40px}
  body:is([data-concept="child-1"],[data-concept="child-2"]) :is(.site-name,.brand){max-width:175px;font-size:14.24px}
}
