/* Educator hub, grade-band pages, bellringers and For schools (educators_hub.py), plus the site header
   and menu (school_world.header()). Prefix eh- for page parts. Loaded on every page, after release.css.
   Calm system: sections have no box; one card style; one emphasis card per page; ink text only (no gray);
   white text only on ink or blue. Rules start with #main so they beat the older panel rules in genz.css. */

:root{
  --eh-ink:#142b46; --eh-blue:#124dec; --eh-gold:#ffdc52; --eh-pink:#c2185b; --eh-line:#c9d4ea;
  --eh-quiet:#f4f7ff; --eh-gap:clamp(48px,6vw,72px); --eh-radius:16px; --eh-radius-lg:22px;
  --eh-lift:4px 5px 0 var(--eh-ink);
}

/* ---------- 1. Site header: lines up with the page content at every width (layout-audit issue 8) ----------
   The same insets as #main > .wrap (brand.css, casebook.css): 40px beside a 1240px column, 16px at 760px and below, 12px at 380px.
   Measured edges match at 360, 390, 761, 820, 1080, 1280, 1366, 1440 and 1920. */
.site-canvas > header.site-header{
  box-sizing:border-box!important; width:auto!important; max-width:none!important; margin:0!important;
  padding-inline:max(40px,calc((100% - 1240px) / 2))!important;
}
@media (max-width:760px){ .site-canvas > header.site-header{padding-inline:16px!important} }
@media (max-width:380px){ .site-canvas > header.site-header{padding-inline:12px!important} }

.school-header{display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:nowrap}
.school-header .brand{flex:0 0 auto}
.school-header .nav-stickers{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
  color:var(--eh-ink)!important;font-weight:750;font-size:1rem;line-height:1.2;text-decoration:none;white-space:nowrap}
.school-header .nav-stickers:hover,.school-header .nav-stickers:focus-visible{background:#fff6d6}
.school-header .nav-stickers .npw-icon{width:26px;height:26px}
.school-header .nav-start{white-space:nowrap}

@media (min-width:1081px){
  .school-header #main-nav{display:flex!important;align-items:center;gap:2px!important;margin-left:auto;position:static!important;
    flex-wrap:nowrap;width:auto;padding:0!important;background:transparent!important;box-shadow:none!important;max-height:none;overflow:visible}
  .school-header .nav-toggle,.school-header .nav-stickers--bar{display:none!important}
  .school-header .nav-stickers--menu{margin:0 6px 0 4px}
  .school-header .nav-group summary{padding:8px 10px!important;font-size:1rem!important}
  .nav-group--wide .nav-submenu{grid-template-columns:repeat(2,minmax(250px,1fr));min-width:560px!important}
  .school-header .nav-submenu{padding:10px!important;gap:2px!important}
  .school-header .nav-submenu a{padding:10px 14px!important;border-radius:12px!important}
  .nav-group:last-of-type .nav-submenu{left:auto!important;right:0!important}
}
/* Phones and small tablets: a Menu button; the open menu sits in the page flow and pushes content down. */
@media (max-width:1080px){
  .school-header{flex-wrap:wrap!important;row-gap:0!important}
  .school-header .nav-stickers--bar{order:1;margin-left:auto!important}
  .school-header .nav-toggle{display:flex!important;order:2;align-items:center;gap:14px;min-height:44px;margin-left:8px!important}
  .school-header .brand + .nav-toggle{margin-left:auto!important}
  .school-header #main-nav{order:3;display:none!important;position:static!important;flex:0 0 100%;width:100%;max-height:none!important;
    overflow:visible!important;box-shadow:none!important;border:0!important;border-top:1px solid var(--eh-line)!important;border-radius:0!important;
    margin:10px 0 0!important;padding:8px 0 18px!important;background:#fff!important}
  body.nav-ready .school-header #main-nav.nav-open,body:not(.nav-ready) .school-header #main-nav{display:block!important}
  .school-header .nav-group{display:block}
  .school-header .nav-group summary{justify-content:space-between;font-size:1.1rem!important;min-height:48px;padding:8px 4px!important}
  .school-header .nav-submenu{position:static!important;display:grid!important;grid-template-columns:1fr!important;min-width:0!important;
    box-shadow:none!important;border:0!important;border-left:3px solid var(--eh-gold)!important;border-radius:0!important;margin:0 0 10px 6px!important;padding:4px 0 4px 10px!important}
  .school-header .nav-submenu a{white-space:normal!important}
  .school-header .nav-stickers--menu{display:none}
  .school-header .nav-start{display:block;text-align:center;margin-top:12px}
}
/* Phones: the bar keeps only the star (the link's aria-label names it); the open menu shows "Sticker book" in words. */
@media (max-width:430px){
  .school-header .nav-stickers--bar{padding:8px;min-width:44px;min-height:44px;justify-content:center}
  .school-header .nav-stickers--bar span{display:none}
  .school-header .nav-stickers--menu{display:inline-flex;padding-inline:4px;min-height:48px}
}

/* ---------- 2. Sections: spacing and a hairline, no boxes ---------- */
#main > section.eh-sec{
  background:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; clip-path:none!important;
  padding:0!important; margin:var(--eh-gap) auto 0!important; color:var(--eh-ink);
}
#main > section.eh-sec + section.eh-sec{border-top:1px solid var(--eh-line)!important;padding-top:var(--eh-gap)!important}
#main > section.eh-intro:first-child{margin-top:clamp(28px,4vw,48px)!important}
#main > section.eh-intro + section.eh-sec{border-top:0!important;padding-top:0!important;margin-top:clamp(32px,4vw,48px)!important}
#main > section.eh-sec:last-child{margin-bottom:var(--eh-gap)!important}
#main .eh-sec :is(h1,h2,h3,h4){color:var(--eh-ink);font-family:var(--display,'Clash Display',sans-serif)!important;letter-spacing:0;text-wrap:pretty;overflow-wrap:break-word}
#main .eh-sec h1{font-size:clamp(2.3rem,5vw,4rem)!important;line-height:1.05!important;font-weight:700;margin:0!important}
#main .eh-sec h2{font-size:clamp(1.6rem,3vw,2.4rem)!important;line-height:1.1!important;font-weight:650;margin:0!important}
#main .eh-sec h3{font-size:clamp(1.15rem,1.6vw,1.3rem)!important;line-height:1.25!important;font-weight:650;margin:0!important}
#main .eh-sec h4{font-size:1.1rem!important;line-height:1.25!important;font-weight:650;margin:0!important}
#main .eh-sec p,#main .eh-sec li,#main .eh-sec dd,#main .eh-sec td,#main .eh-sec th{color:var(--eh-ink)}
#main .eh-sec p{margin:0}
#main .eh-sec p + p{margin-top:12px!important}
#main .eh-sec h2 + :is(p,div,ol,ul,dl){margin-top:16px!important}
#main .eh-sec .eh-sec-lead{max-width:68ch;font-size:1.08rem;line-height:1.55;margin-top:12px!important}
#main .eh-lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;max-width:60ch;margin-top:16px!important}
#main .eh-sec .eh-sub{margin-top:40px!important}
#main .eh-sec a:not([class]),#main .eh-more,#main .eh-row-links a,#main .eh-jump a,#main .eh-crumbs a,#main .eh-toc a,#main .eh-chart-list a,#main .eh-family-list a,#main .eh-dl{
  color:var(--eh-blue)!important; text-decoration:underline!important; text-decoration-thickness:1.5px!important; text-underline-offset:3px!important; font-weight:700}
#main .eh-sec :is(a,button):focus-visible{outline:3px solid var(--eh-blue)!important;outline-offset:3px!important}
.eh-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* action rows and download links */
#main .eh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:14px!important}
#main .eh-dl,#main .eh-btn-dl{display:inline-flex;align-items:center;gap:8px}
/* One size for every button in an action row (the download buttons used to render larger than "Open on screen"). */
#main .eh-sec .eh-actions :is(a,button):is(.btn,.primary-action){font-size:1rem!important;line-height:1.25!important;min-height:48px;box-sizing:border-box;
  padding:11px 20px!important;display:inline-flex;align-items:center;gap:8px}
#main .eh-sec .eh-actions :is(.btn,.primary-action) span{font-size:inherit!important}
#main .eh-dl .npw-icon,#main .eh-btn-dl .npw-icon,#main .eh-band-dl .npw-icon{width:1.2em;height:1.2em}
#main .eh-row-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px!important;font-size:.95rem}

/* ---------- 3. Intro, breadcrumb and jump links ---------- */
#main .eh-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;padding:0;margin:0 0 16px!important;font-size:.95rem}
#main .eh-crumbs li{font-weight:700}
#main .eh-crumbs li + li::before{content:"/";margin:0 10px;color:var(--eh-ink);font-weight:500}
#main .eh-jump{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px!important}

/* ---------- 4. Grade-band cards ---------- */
#main .eh-band-grid{display:grid;gap:24px;margin-top:24px!important;grid-template-columns:repeat(4,minmax(0,1fr))}
#main .eh-band-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){ #main .eh-band-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1100px) and (min-width:861px){ #main .eh-band-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:860px){ #main .eh-band-grid[data-count="3"]{grid-template-columns:1fr} }
@media (max-width:640px){ #main .eh-band-grid{grid-template-columns:1fr} }
#main .eh-band{display:flex;flex-direction:column;border:2px solid var(--eh-ink);border-radius:var(--eh-radius-lg);padding:12px 12px 22px;margin:0}
#main .eh-band--gold{background:var(--eh-gold)}
#main .eh-band--blue{background:var(--eh-blue)}
#main .eh-band--ink{background:var(--eh-ink)}
#main .eh-band--paper{background:#fff}
#main .eh-band--blue :is(h3,p,li,span),#main .eh-band--ink :is(h3,p,li,span){color:#fff!important}
#main .eh-cover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:6px solid #fff;border-radius:var(--eh-radius);
  box-shadow:0 0 0 2px var(--eh-ink);box-sizing:border-box;background:#fff}
#main .eh-band-body{display:flex;flex-direction:column;flex:1;padding:16px 8px 0}
#main .eh-band h3{font-size:clamp(1.6rem,2.3vw,2.1rem)!important;line-height:1.05!important;font-weight:700}
#main .eh-band-line{font-weight:700;margin-top:6px!important}
#main .eh-band-facts{margin-top:6px!important;font-size:.95rem;line-height:1.4}
#main .eh-band-label{font-size:.85rem;font-weight:800;margin-top:14px!important}
#main .eh-eds{list-style:none;padding:0;margin:6px 0 0!important;display:grid;gap:4px;font-size:.95rem;line-height:1.35}
#main .eh-eds li{padding-left:14px;position:relative}
#main .eh-eds li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:2px;background:currentColor}
#main .eh-band-note{font-size:.95rem;line-height:1.4;margin-top:12px!important}
#main .eh-band-actions{margin-top:auto!important;padding-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#main .eh-band .eh-band-open{width:100%;box-sizing:border-box}
#main .eh-band-dl{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--eh-ink)!important;text-decoration:underline!important;
  text-decoration-thickness:1.5px!important;text-underline-offset:3px!important}
#main .eh-band--blue .eh-band-dl,#main .eh-band--ink .eh-band-dl{color:#fff!important}
#main .eh-band--blue .eh-band-dl span,#main .eh-band--ink .eh-band-dl span{color:#fff!important}
#main .eh-band :is(a,button):focus-visible{outline-color:var(--eh-gold)!important}
#main .eh-college{margin-top:24px!important;border:2px solid var(--eh-ink);border-radius:var(--eh-radius-lg);padding:20px 24px;background:#fff}
#main .eh-college p{margin-top:8px!important}

/* ---------- 5. What it is ---------- */
#main .eh-what-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
#main .eh-what-text p{font-size:1.1rem;line-height:1.6;max-width:62ch}
#main .eh-glance{margin:0;padding:22px 24px;background:var(--eh-quiet);border-radius:var(--eh-radius);display:grid;gap:14px}
#main .eh-glance div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px}
#main .eh-glance dt{font-weight:800}
#main .eh-glance dd{margin:0;line-height:1.45}
@media (max-width:860px){ #main .eh-what-grid{grid-template-columns:1fr} }
@media (max-width:420px){ #main .eh-glance div{grid-template-columns:1fr;gap:2px} }

/* ---------- 6. Class period: three steps and four pacing options ---------- */
#main .eh-steps{list-style:none;padding:0;margin:24px 0 0!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#main .eh-step{border-top:3px solid var(--eh-ink);padding-top:16px;display:grid;gap:10px;align-content:start}
#main .eh-step h3{display:flex;align-items:center;gap:10px}
#main .eh-step-n{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--eh-ink);color:#fff!important;
  font:800 1rem/1 var(--body,sans-serif)}
#main .eh-step p{line-height:1.5}
/* Phones: one step per row, the icon beside the heading so each step stays short. */
@media (max-width:700px){
  #main .eh-steps{grid-template-columns:1fr}
  #main .eh-step{grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
  #main .eh-step > p{grid-column:1 / -1}
}
#main .eh-cards{display:grid;gap:20px;margin-top:20px!important}
#main .eh-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ #main .eh-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ #main .eh-cards--4{grid-template-columns:1fr} }
#main .eh-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1.5px solid var(--eh-ink);border-radius:var(--eh-radius);padding:20px;margin:0}
#main .eh-card p{line-height:1.5}
#main .eh-card .eh-more{margin-top:auto}
#main :is(.eh-card,.eh-step,.eh-res) > .npw-icon{width:34px;height:34px}

/* ---------- 7. Tables that turn into cards on small screens ---------- */
#main .eh-table-wrap{margin-top:24px!important}
#main .eh-table{width:100%;border-collapse:collapse;font-size:.98rem;line-height:1.45;table-layout:auto}
#main .eh-table thead th{text-align:left;font-weight:800;font-size:.9rem;padding:0 12px 10px;border-bottom:2px solid var(--eh-ink);vertical-align:bottom}
#main .eh-table tbody :is(th,td){text-align:left;vertical-align:top;padding:16px 12px;border-bottom:1px solid var(--eh-line);font-weight:500}
#main .eh-table :is(th,td):first-child{padding-left:0}
#main .eh-case-no{display:block;color:var(--eh-pink)!important;font-weight:800;font-size:.85rem}
#main .eh-case-t{display:block;font-weight:750;font-size:1.02rem;margin-top:2px}
#main .eh-case-s{display:block;margin-top:6px;font-size:.95rem}
#main .eh-table--practice th[scope=row]{width:30%}
#main .eh-table--band th[scope=row]{width:19%}
#main .eh-table--band td:nth-of-type(1){width:24%}
#main .eh-table--band td:nth-of-type(2){width:16%}
#main .eh-table--band td:nth-of-type(3){width:10%}
#main .eh-table--band td:last-child{width:14%;min-width:10.5em}
#main .eh-table--band td:last-child .eh-row-links{flex-direction:column;gap:6px;margin-top:0!important}
#main .eh-row-links a{overflow-wrap:normal!important;word-break:normal!important;hyphens:none}
#main .eh-fw{list-style:none;margin:0!important;padding:0;display:grid;gap:6px}
#main .eh-fw li{max-width:none}
/* Card mode. The column heads are hidden (display:none, so nothing is clipped); each value keeps its label from data-label. */
@media (max-width:860px){
  #main .eh-table--practice,#main .eh-table--practice :is(tbody,tr,th,td){display:block;width:auto!important}
  #main .eh-table--practice thead{display:none}
}
@media (max-width:1100px){
  #main .eh-table--band,#main .eh-table--band :is(tbody,tr,th,td){display:block;width:auto!important;min-width:0!important}
  #main .eh-table--band thead{display:none}
  #main .eh-table--band td:last-child .eh-row-links{flex-direction:row;gap:6px 16px}
  #main .eh-table--band tbody tr{border:1.5px solid var(--eh-ink);border-radius:var(--eh-radius);padding:18px 20px;margin-bottom:16px;background:#fff}
  #main .eh-table--band tbody :is(th,td){border:0;padding:0}
  #main .eh-table--band tbody td{margin-top:14px}
  #main .eh-table--band tbody td::before{content:attr(data-label);display:block;font-size:.85rem;font-weight:800;color:var(--eh-pink)}
}
/* Wide cards (701-1100px): the case on the first row, then the fields two across, so a card is half as tall. */
@media (min-width:701px) and (max-width:1100px){
  #main .eh-table--band tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  #main .eh-table--band tbody th[scope=row],#main .eh-table--band tbody td[data-label="Task"],#main .eh-table--band tbody td[data-label="Open"]{grid-column:1 / -1}
}
/* The college table has a seventh column (Frameworks, with a "How this task uses them" list), so it is a card per case at every width. */
#main .eh-table--college,#main .eh-table--college :is(tbody,tr,th,td){display:block;width:auto!important;min-width:0!important}
#main .eh-table--college thead{display:none}
#main .eh-table--college td:last-child .eh-row-links{flex-direction:row;gap:6px 16px}
#main .eh-table--college tbody tr{border:1.5px solid var(--eh-ink);border-radius:var(--eh-radius);padding:18px 20px;margin-bottom:16px;background:#fff}
#main .eh-table--college tbody :is(th,td){border:0;padding:0}
#main .eh-table--college tbody td{margin-top:14px}
#main .eh-table--college tbody td::before{content:attr(data-label);display:block;font-size:.85rem;font-weight:800;color:var(--eh-pink)}
@media (min-width:701px){
  #main .eh-table--college tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-items:start;
    grid-template-areas:"case case" "task task" "make time" "fw std" "open open"}
  #main .eh-table--college tbody th[scope=row]{grid-area:case}
  #main .eh-table--college tbody td[data-label="Task"]{grid-area:task}
  #main .eh-table--college tbody td[data-label="Students make"]{grid-area:make}
  #main .eh-table--college tbody td[data-label="Time"]{grid-area:time}
  #main .eh-table--college tbody td[data-label="Frameworks"]{grid-area:fw}
  #main .eh-table--college tbody td[data-label="Professional standards"]{grid-area:std}
  #main .eh-table--college tbody td[data-label="Open"]{grid-area:open}
}
/* Wide screens: three columns. The task and the frameworks take two of them; what students make, the time and the codes sit beside them. */
@media (min-width:1101px){
  #main .eh-table--college tbody tr{grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-areas:"case case case" "task task make" "task task time" "fw fw std" "open open open"}
}
#main .eh-fw-how{margin-top:10px}
#main .eh-fw-how summary{cursor:pointer;font-weight:750;color:var(--eh-blue);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  min-height:32px;display:inline-flex;align-items:center}
#main .eh-fw-how summary:focus-visible{outline:3px solid var(--eh-blue);outline-offset:3px}
#main .eh-fw-how ul{margin:8px 0 0!important;padding-left:1.1em;display:grid;gap:8px}
#main .eh-fw-how li{max-width:none;line-height:1.45}
/* College page: how the tasks work */
#main .eh-about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,3vw,48px);margin-top:24px!important}
@media (max-width:1100px){ #main .eh-about-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #main .eh-about-plan{grid-column:1 / -1} }
@media (max-width:760px){ #main .eh-about-grid{grid-template-columns:1fr} }
#main .eh-about-grid h3{border-top:3px solid var(--eh-ink);padding-top:14px}
#main .eh-list{margin:12px 0 0!important;padding-left:1.2em;display:grid;gap:8px}
#main .eh-list li{max-width:none;line-height:1.5}
#main .eh-about-plan h3 + p{margin-top:12px!important}
#main .eh-about-plan p{line-height:1.5}
@media (max-width:860px){
  #main .eh-table--practice tbody tr{border:1.5px solid var(--eh-ink);border-radius:var(--eh-radius);padding:18px 20px;margin-bottom:16px;background:#fff}
  #main .eh-table--practice tbody :is(th,td){border:0;padding:0}
  #main .eh-table--practice tbody td{margin-top:12px}
  #main .eh-table--practice tbody td::before{content:attr(data-label);display:block;font-size:.85rem;font-weight:800;color:var(--eh-pink)}
}

/* ---------- 8. Resource cards ---------- */
#main .eh-res-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:24px!important}
@media (max-width:1100px){ #main .eh-res-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ #main .eh-res-grid{grid-template-columns:1fr} }
#main a.eh-res{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px 14px;align-items:start;padding:18px 20px;
  background:#fff;border:1.5px solid var(--eh-ink);border-radius:var(--eh-radius);color:var(--eh-ink)!important;text-decoration:none!important}
#main a.eh-res > .npw-icon{grid-row:1 / span 2}
#main .eh-res-t{font-weight:800;font-size:1.05rem;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;color:var(--eh-ink)}
#main .eh-res-d{line-height:1.45;color:var(--eh-ink)}
#main a.eh-res:hover{background:var(--eh-quiet)}

/* ---------- 9. Access note and the course note ---------- */
#main .eh-access p{max-width:72ch;font-size:1.05rem;line-height:1.55}
#main .eh-note p{font-size:15px;line-height:1.5;max-width:none}

/* ---------- 10. Band pages ---------- */
#main .eh-core-card{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,40px);align-items:center;margin-top:24px!important;
  background:#fff;border:2px solid var(--eh-ink);border-radius:var(--eh-radius-lg);padding:clamp(16px,2.4vw,28px);box-shadow:var(--eh-lift)}
@media (max-width:1000px) and (min-width:701px){ #main .eh-core-card{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)} }
@media (max-width:700px){ #main .eh-core-card{grid-template-columns:1fr} }
#main .eh-book-row + .eh-book-row{border-top:1px solid var(--eh-line);margin-top:20px!important;padding-top:20px}
#main .eh-legacy{margin-top:6px!important;font-size:.95rem}
#main .eh-same{margin-top:20px!important;font-weight:700}
#main .eh-course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px!important}
#main .eh-course{background:#fff;border:1.5px solid var(--eh-ink);border-radius:var(--eh-radius);padding:20px 22px;margin:0}
#main .eh-course:last-child:nth-child(odd){grid-column:1 / -1}
#main .eh-course h3 + p{margin-top:8px!important}
#main .eh-count{font-weight:800}
@media (max-width:860px){ #main .eh-course-grid{grid-template-columns:1fr} }
#main .eh-chart-list{list-style:none;padding:0;margin:20px 0 0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px 28px}
#main .eh-chart-list span{display:block;font-size:.92rem;margin-top:2px}
/* Recommended resources (educators_hub._resources_sec): a compact two-column list, a small kind chip before each link. */
#main .eh-res-list{list-style:none;padding:0;margin:20px 0 0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:18px 36px}
#main .eh-res-list > li{margin:0!important;padding:14px 0 0;border-top:2px solid var(--eh-ink);break-inside:avoid}
#main .eh-res-list > li::marker{content:none}
#main .eh-res-case{margin:0 0 8px!important;font:650 1.1rem/1.3 var(--display,'Clash Display',sans-serif)}
#main .eh-res-case a.eh-res-guide{color:var(--eh-ink)!important;text-decoration:underline!important;text-decoration-thickness:1.5px!important;text-underline-offset:4px!important}
#main .eh-res-case a.eh-res-guide:hover{text-decoration-thickness:2.5px!important}
#main .eh-res-links{list-style:none;padding:0;margin:0!important;display:grid;gap:8px}
#main .eh-res-links li{margin:0!important;font-size:1rem;line-height:1.45}
#main .eh-res-links li::marker{content:none}
#main .eh-res-links a{color:var(--eh-blue)!important;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:700}
#main .eh-res-kind{display:inline-block;min-width:3.9em;margin-right:4px;padding:1px 8px;border:1.5px solid var(--eh-ink);border-radius:999px;background:#fff;
  font-size:.8125rem;font-weight:800;line-height:1.35;text-align:center;vertical-align:.08em}
#main .eh-res-kind--teach{background:var(--eh-gold)}
#main .eh-res-kind--watch{background:#ffeef5}
#main .eh-res-kind--try{background:#eaf0ff}
#main .eh-res-pub{display:block;margin-top:1px;font-size:.875rem;font-weight:600}
#main .eh-res-kit{margin:24px 0 0!important;padding:12px 16px;border-radius:var(--eh-radius);background:var(--eh-quiet)}
#main .eh-res-more{margin:22px 0 0!important;padding:0;border:0;background:none;box-shadow:none}
#main .eh-res-more > summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:9px 18px;border:2px solid var(--eh-ink);border-radius:999px;
  background:#fff;box-shadow:3px 4px 0 var(--eh-gold);font-weight:750;cursor:pointer;list-style:none;color:var(--eh-ink)}
#main .eh-res-more > summary::-webkit-details-marker{display:none}
#main .eh-res-more > summary::before{content:"";width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
#main .eh-res-more[open] > summary::before{transform:rotate(45deg)}
#main .eh-res-more > summary:focus-visible{outline:3px solid var(--eh-blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){#main .eh-res-more > summary::before{transition:none}}#main .eh-family-list{margin:16px 0 0!important;padding-left:1.2em;columns:2 320px;column-gap:40px}
#main .eh-family-list li{break-inside:avoid;margin-bottom:8px}
/* College frameworks */
#main .eh-frames > p{max-width:75ch;line-height:1.55}
#main .eh-fw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;margin-top:28px!important}
@media (max-width:760px){ #main .eh-fw-grid{grid-template-columns:1fr} }
#main .eh-fw-used{list-style:none;padding:0;margin:12px 0 0!important;display:grid;gap:10px}
#main .eh-fw-used li{max-width:none;line-height:1.4}
#main .eh-fw-used a{font-weight:700}
#main .eh-fw-used span{display:block;font-size:.95rem;margin-top:2px}

/* ---------- 11. Bellringers: big type to project, one per page to print ---------- */
#main .eh-how{margin:20px 0 0!important;padding-left:1.3em;display:grid;gap:6px;max-width:70ch;font-size:1.08rem;line-height:1.5}
#main .eh-how li{font-size:inherit!important;line-height:inherit!important}
#main .eh-bell-toc{margin-top:24px!important}
#main .eh-bell-toc p{font-weight:800}
#main .eh-bell-toc ol{list-style:none;padding:0;margin:8px 0 0!important;display:flex;flex-wrap:wrap;gap:8px}
#main .eh-bell-toc a{display:grid;place-items:center;min-width:44px;height:44px;border:1.5px solid var(--eh-ink);border-radius:12px;text-decoration:none!important;color:var(--eh-ink)!important}
#main .eh-bell-toc a:hover{background:var(--eh-quiet)}
#main .eh-bells{display:grid;gap:clamp(32px,4vw,48px)}
#main .eh-bell{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,3vw,44px);align-items:start;
  background:#fff;border:2px solid var(--eh-ink);border-radius:var(--eh-radius-lg);padding:clamp(18px,3vw,40px);margin:0;scroll-margin-top:16px}
/* The case label and title on the left, the two tools on the right, lined up with the title's last line. */
#main .eh-bell-head{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:20px}
#main .eh-bell-title{flex:1 1 420px;min-width:0}
#main .eh-bell-title h2{font-size:clamp(1.5rem,2.6vw,2.2rem)!important}
#main .eh-sec .eh-bell-title > h2{margin-top:4px!important}  /* release.css adds 32px above any h2 that follows a p */
/* brand.css sizes .btn > span at 23px (an old arrow style); these buttons keep one size. */
#main .eh-sec .btn > span{font-size:inherit!important;line-height:inherit!important}
#main .eh-bell-case{font-weight:800;color:var(--eh-pink)!important;font-size:1.05rem}
#main .eh-bell-tools{display:flex;flex-wrap:wrap;gap:10px}
#main .eh-bell-tools .btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px!important;font-size:.95rem!important}
#main .eh-bell-doc{margin:0;background:var(--eh-quiet);border-radius:var(--eh-radius);padding:clamp(16px,2.5vw,28px)}
#main .eh-bell-doc figcaption{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;font-weight:700;font-size:.98rem;line-height:1.4}
#main .eh-lbl{display:inline-block;background:var(--eh-ink);color:#fff!important;border-radius:999px;padding:3px 12px;font-weight:800;font-size:.85rem}
#main .eh-bell-doc blockquote{margin:14px 0 0;padding:0;border:0;font:600 clamp(1.3rem,2.3vw,1.85rem)/1.38 var(--body,sans-serif);color:var(--eh-ink)}
#main .eh-bell-doc blockquote p + p{margin-top:10px!important}
/* A form's Yes and No choices: an empty box before each word. */
#main .eh-choice{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
#main .eh-choice + .eh-choice{margin-left:.2em}
#main .eh-choice::before{content:"";width:.8em;height:.8em;border:2px solid currentColor;border-radius:3px;box-sizing:border-box}
/* casebook.css sets every p and li to 1rem; the document and questions take their size from their container here. */
#main .eh-bell-doc blockquote p,#main .eh-bell-qs ol li{font-size:inherit!important;line-height:inherit!important}
#main .eh-bell-qs{display:grid;gap:12px;align-content:start}
#main .eh-bell-q{font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.35;font-weight:600}
#main .eh-bell-qs h3{margin-top:6px!important}
#main .eh-bell-qs ol{margin:0!important;padding-left:1.4em;display:grid;gap:6px;font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.4}
#main .eh-bell-listen{border-left:4px solid var(--eh-gold);padding-left:12px;line-height:1.45;font-size:1.02rem}
@media (max-width:900px){ #main .eh-bell{grid-template-columns:1fr} #main .eh-bell-qs{margin-top:20px} }
#main .eh-bell:fullscreen{overflow:auto;border:0;border-radius:0;padding:4vw 5vw;align-content:center}
#main .eh-bell:fullscreen .eh-bell-print{display:none}
#main .eh-bell:fullscreen .eh-bell-doc blockquote{font-size:clamp(1.8rem,3.2vw,3rem)}
#main .eh-bell:fullscreen .eh-bell-q{font-size:clamp(1.5rem,2.6vw,2.3rem)}
#main .eh-bell:fullscreen .eh-bell-qs ol{font-size:clamp(1.3rem,2vw,1.8rem)}
#main .eh-bell::backdrop{background:#fff}

/* ---------- 12. For schools ---------- */
#main .eh-schools{display:grid!important;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
#main .eh-toc{position:sticky;top:16px;border-left:3px solid var(--eh-gold);padding-left:16px}
#main .eh-toc p{font-weight:800}
#main .eh-toc ol{margin:8px 0 0!important;padding-left:1.2em;display:grid;gap:8px;line-height:1.35}
#main .eh-qa{scroll-margin-top:16px}
#main .eh-qa + .eh-qa{border-top:1px solid var(--eh-line);margin-top:40px!important;padding-top:40px}
#main .eh-qa h2{font-size:clamp(1.4rem,2.4vw,1.9rem)!important}
#main .eh-qa p,#main .eh-qa li{max-width:72ch;line-height:1.6;font-size:1.05rem}
#main .eh-qa h2 + p{margin-top:14px!important}
#main .eh-research{margin:20px 0 0!important;padding-left:1.4em;display:grid;gap:22px}
#main .eh-research li p + p{margin-top:6px!important}
#main .eh-cite{font-weight:600}
@media (max-width:860px){ #main .eh-schools{grid-template-columns:1fr} #main .eh-toc{position:static} }

/* ---------- 13. Families page additions ---------- */
#main .family-page-list{columns:2 320px;column-gap:40px;padding-left:1.4em}
#main .family-page-list li{break-inside:avoid;margin-bottom:8px}
#main .family-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px!important}
/* The conversation steps beside the media and privacy notes, so the text uses the row (two columns from 900px). */
#main .school-reading.family-guide{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px clamp(32px,5vw,72px);align-items:start}
#main .family-guide .family-actions{grid-column:1 / -1;margin-top:28px!important}
#main .family-guide .family-col > h2:first-child{margin-top:0!important}
#main .family-guide :is(p,li){max-width:none}
@media (max-width:900px){ #main .school-reading.family-guide{grid-template-columns:1fr} #main .family-guide .family-col + .family-col{margin-top:32px} }
/* Page openings (school_world.opening()): a lead the same size as the other hub pages. */
#main .school-opening > div > p{font-size:clamp(1.1rem,1.6vw,1.3rem)!important;line-height:1.5!important;max-width:60ch}

/* ---------- 14. Footer: the same items as the header menu (school_world.directory()) ----------
   The invitation, the link columns and the colophon line up with the header and the page content
   (the same insets as section 1: 40px beside a 1240px column, 16px at 760px and below, 12px at 380px). */
.site-canvas .school-footer > :is(.footer-invitation,.footer-directory,.footer-colophon){
  box-sizing:border-box!important; width:auto!important; max-width:none!important;
  margin-left:max(40px,calc((100% - 1240px) / 2))!important; margin-right:max(40px,calc((100% - 1240px) / 2))!important}
.site-canvas .school-footer > :is(.footer-directory,.footer-colophon){padding-left:0!important;padding-right:0!important}
@media (max-width:760px){ .site-canvas .school-footer > :is(.footer-invitation,.footer-directory,.footer-colophon){margin-left:16px!important;margin-right:16px!important} }
@media (max-width:380px){ .site-canvas .school-footer > :is(.footer-invitation,.footer-directory,.footer-colophon){margin-left:12px!important;margin-right:12px!important} }
.school-footer .footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.school-footer .footer-directory nav a{color:var(--eh-ink)}
@media (max-width:1050px){ .school-footer .footer-brand{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px 28px} }

/* ---------- 15. Print: bellringers one to a page; no site chrome ---------- */
@media print{
  body[data-page^="educators"]{padding:0!important;background:#fff!important}
  body[data-page^="educators"] :is(.site-header,.school-footer,.skip,.toast,.gz-unlock,.gz-sticker,.eh-jump,.eh-bell-tools,.eh-bell-toc,.eh-actions,.eh-bell-open){display:none!important}  body[data-page^="educators"] .site-canvas{border-radius:0!important;box-shadow:none!important;border:0!important}
  /* books.css hides every child of main except .bk-book when printing; educator pages print their own sections. */
  body[data-page^="educators"] #main > section.eh-sec{display:block!important}
  body[data-page="educators-bellringers"] #main > section.eh-intro{display:none!important}
  body[data-page="educators-bellringers"] #main > .eh-bells{border:0!important;padding:0!important;margin:0!important;display:block}
  #main .eh-bell{display:block;border:0;border-radius:0;padding:0;break-after:page;page-break-after:always}
  #main .eh-bell:last-child{break-after:auto}
  #main .eh-bell-doc{background:#fff;border:2px solid #000;margin-top:12pt}
  #main .eh-bell-doc .eh-lbl{color:#000!important;background:#fff!important;border:1.5px solid #000}
  #main .eh-bell-case{font-size:14pt}
  #main .eh-bell-head > h2{font-size:24pt!important}
  #main .eh-bell-doc blockquote{font-size:20pt;line-height:1.35}
  #main .eh-bell-q{font-size:18pt;margin-top:16pt}
  #main .eh-bell-qs ol{font-size:14pt}
  #main .eh-bell-listen{font-size:12pt}
  body.eh-print-one #main .eh-bell:not(.is-printing){display:none!important}
  #main .eh-table tbody tr{break-inside:avoid}
}

/* ---------- 16. House look (screen): thick navy outlines, colored offsets, filled panels, sticker steps ---------- */
@media screen{
  #main{--eh-pink:#ee326c}
  /* sections are spacing, not hairlines */
  #main > section.eh-sec + section.eh-sec{border-top:0!important}
  #main .eh-band{border-width:2.5px;border-radius:26px;box-shadow:7px 7px 0 var(--eh-blue)}
  #main .eh-band--blue{box-shadow:7px 7px 0 var(--eh-gold)}
  #main .eh-band--ink{box-shadow:7px 7px 0 var(--eh-pink)}
  #main .eh-cover{box-shadow:0 0 0 2.5px var(--eh-ink)}
  #main :is(.eh-card,.eh-course,a.eh-res,.eh-college){border:2.5px solid var(--eh-ink);border-radius:22px;box-shadow:6px 6px 0 var(--eh-blue)}
  #main :is(.eh-card,.eh-course,a.eh-res):nth-child(3n+2){box-shadow:6px 6px 0 var(--eh-gold)}
  #main :is(.eh-card,.eh-course,a.eh-res):nth-child(3n){box-shadow:6px 6px 0 var(--eh-pink)}
  #main a.eh-res:hover{background:#fff;transform:translate(-2px,-2px)}
  #main .eh-core-card{border-width:2.5px;border-radius:26px;box-shadow:8px 8px 0 var(--eh-blue)}
  #main .eh-glance{background:var(--eh-gold);border:2.5px solid var(--eh-ink);border-radius:24px}
  /* class-period steps: sticker cards in blue, gold and pink */
  #main .eh-step{border:2.5px solid var(--eh-ink);border-radius:22px;padding:20px 22px 22px;background:#fff;box-shadow:6px 6px 0 var(--eh-blue)}
  #main .eh-step:nth-child(1){background:#e3ebff}
  #main .eh-step:nth-child(2){background:#fff3c4;box-shadow:6px 6px 0 var(--eh-gold)}
  #main .eh-step:nth-child(3){background:#ffe6ef;box-shadow:6px 6px 0 var(--eh-pink)}
  #main .eh-step-n{width:40px;height:40px;font-size:1.15rem;background:var(--eh-ink)}
  #main :is(.eh-card,.eh-step,.eh-res) > .npw-icon{width:46px;height:46px}
  /* tables: a navy rule under the heads, soft navy lines between rows */
  #main .eh-table thead :is(th,td){border-bottom:2.5px solid var(--eh-ink)}
  #main .eh-table tbody :is(th,td){border-bottom:1.5px solid rgba(20,43,70,.28)}
  #main :is(.eh-table--band,.eh-table--college,.eh-table--practice) tbody tr{border-width:2.5px}
}