/* Learning Hub navigation | monochrome prototype | 2026-10-27
   One shared presentation layer for course hubs, the Learning Hub landing page
   and KS3 navigation. Intentionally scoped OUT of classroom lesson pages,
   print booklets, revision questions, PDF readers and teaching diagrams. */
:root{
  --hubnav-ink:#171717;
  --hubnav-muted:#626262;
  --hubnav-border:#d5d5d5;
  --hubnav-faint:#ebebeb;
  --hubnav-white:#fff;
}
body.course-hub, body.learning-hub, body[data-year="8"] {
  --year-accent:#343434;
  --year-pale:#fff;
  --year-border:#d5d5d5;
  --year-ink:#171717;
  --green-dark:#171717;
  --green-mid:#303030;
  --green-pale:#fff;
  background:#fff;
  color:var(--hubnav-ink);
}
body.course-hub[data-year], body[data-year="8"] {
  --year-accent:#343434;
  --year-pale:#fff;
  --year-border:#d5d5d5;
  --year-ink:#171717;
}
/* Match the legacy Synergy preview specificity; otherwise green returns on its logo. */
html.synergy-hub-preview body.course-hub .topbar .mark{
  background:#fff;
  color:#171717;
  border:1px solid #bdbdbd;
}
html.synergy-hub-preview body.course-hub .course-topline .heading h1{color:#171717}
html.synergy-hub-preview body.course-hub .course-topline{
  border-bottom-color:#e5e5e5;
}
body.learning-hub .top{border-top:1px solid var(--hubnav-border)}
/* The shell: quiet branding, simple active tabs, no tinted panel backgrounds. */
body.course-hub .topbar, body.learning-hub .top, body[data-year="8"] .top {
  background:#fff;
  border-color:var(--hubnav-border);
}
body.course-hub .topbar .mark, body[data-year="8"] .mark {
  background:#fff;
  color:#171717;
  border:1px solid #bdbdbd;
}
body.course-hub .topbar .brand-copy strong,
body.course-hub .heading h1, body.course-hub .heading .eyebrow,
body.course-hub .term-head strong,
body[data-year="8"] .eyebrow,
body[data-year="8"] h1 {color:var(--hubnav-ink)}
body.course-hub .home, body.course-hub .back, body[data-year="8"] .back,
body[data-year="8"] .toplinks a {
  background:#fff;
  color:var(--hubnav-ink);
  border-color:var(--hubnav-border);
}
/* Override the Synergy experimental tab shading without switching it off. */
body.course-hub .course-nav .tabs,
html.synergy-hub-preview body.course-hub .course-nav .tabs {
  background:#fff;
  border:0;
  border-bottom:1px solid var(--hubnav-border);
  box-shadow:none;
  border-radius:0;
  padding:0;
  gap:3px;
}
body.course-hub .course-nav .tabs .tab,
html.synergy-hub-preview body.course-hub .course-nav .tabs .tab {
  color:#5a5a5a;
  background:#fff;
  border-radius:0;
  box-shadow:none;
  font-weight:650;
}
body.course-hub .course-nav .tabs .tab[aria-selected="true"],
html.synergy-hub-preview body.course-hub .course-nav .tabs .tab[aria-selected="true"] {
  background:#fff;
  color:#111;
  box-shadow:inset 0 -2px 0 #222;
  font-weight:850;
}
body.course-hub .year-btn,
body.course-hub .year-btn[aria-pressed="true"] {
  background:#fff;
  color:#262626;
  border:1px solid var(--hubnav-border);
  box-shadow:none;
  font-weight:700;
}
body.course-hub .year-btn[aria-pressed="true"] {
  border-color:#333;
  color:#111;
  font-weight:850;
  text-decoration:underline;
  text-underline-offset:4px;
}
body.course-hub #lessons .course-key,
body.course-hub #lessons .course-key summary {color:var(--hubnav-ink);background:#fff}
body.course-hub #lessons .year-toolbar .count,
body.course-hub #lessons .term-head span,
body.course-hub #lessons .course-key {color:var(--hubnav-muted)}
body.course-hub #lessons .term,
body.course-hub #lessons .term-head {
  background:#fff;
  border-color:var(--hubnav-faint);
  box-shadow:none;
}
body.course-hub #lessons .term-head{border-bottom:1px solid var(--hubnav-faint)}
body.course-hub #lessons .term-route{display:none}
/* Monochrome numbered lesson tiles; no subject/spec bars. */
body.course-hub #lessons .lesson-entry.lesson-choice {
  background:#fff;
  border:1px solid var(--hubnav-border);
  border-top:1px solid var(--hubnav-border);
  box-shadow:none;
}
body.course-hub #lessons .lesson-entry.lesson-choice:hover,
body.course-hub #lessons .lesson-entry.lesson-choice:focus-within{
  border-color:#888;
  box-shadow:0 3px 12px #00000012;
}
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-tile-open,
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-tile-number,
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-tile-title {color:#222}
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-tile-title {color:#676767}
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-tile-open:hover {background:#fafafa}
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-options-toggle {
  color:#2b2b2b;
  background:#fff;
  border-top:1px solid #e7e7e7;
}
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-options-toggle:hover,
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-options-toggle[aria-expanded="true"] {background:#f8f8f8}
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-scenarios {
  background:#fff;
  border-color:#bcbcbc;
  box-shadow:0 9px 24px #00000022;
}
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-scenarios-heading,
body.course-hub #lessons .lesson-entry.lesson-choice .scenario-copy {color:#222}
body.course-hub #lessons .lesson-grid .lesson-choice .lesson-scenario-action {
  background:#fff;
  color:#222;
  border-color:#ebebeb;
}
body.course-hub #lessons .lesson-grid .lesson-choice .lesson-scenario-action:hover,
body.course-hub #lessons .lesson-grid .lesson-choice .lesson-scenario-action:focus-visible{background:#f7f7f7;color:#111}
body.course-hub #lessons .lesson-grid .lesson-choice .scenario-symbol,
body.course-hub #lessons .lesson-grid .lesson-choice .scenario-arrow {color:#555}
body.course-hub #lessons .lesson-entry.lesson-choice .lesson-tile-unavailable {color:#777;background:#fff}
body.course-hub #lessons .lesson-entry.lesson-choice.lesson-choice-welcome .lesson-tile-open {background:#fff}
/* Legacy H446 lesson tiles use a spec-coloured ::after marker.
   Keep specification colours available only through the optional colour key. */
body.course-hub #lessons .lesson-entry > .lesson.spec-tile,
body.course-hub #lessons .lesson-entry > .lesson.spec-tile.live,
body.course-hub #lessons .lesson-entry > .lesson.spec-tile.planned,
body.course-hub #lessons .lesson-entry > .lesson {
  background:#fff;
  border-color:var(--hubnav-border);
  color:#222;
  box-shadow:none;
}
body.course-hub #lessons .lesson-entry > .lesson.spec-tile::after,
body.course-hub #lessons .lesson-entry > .lesson.live::after{display:none}
body.course-hub #lessons .lesson-entry > .lesson.planned {color:#777}
body.course-hub #lessons .lesson-info{background:#fff;border-color:#bdbdbd;color:#333}
body.course-hub #lessons .spec-group-title,
body.course-hub #lessons .spec-group-code {color:#333;border-color:#c5c5c5}
body.course-hub #lessons .spec-group {border-color:#ededed;background:#fff}
body.course-hub #lessons .lesson-detail {background:#fff;border-color:var(--hubnav-border);color:#222}
body.course-hub #lessons .lesson-finder{
  background:#fff;
  border:1px solid var(--hubnav-faint);
  box-shadow:none;
}
body.course-hub #lessons .lesson-finder input{
  background:#fff;
  color:#171717;
  border:1px solid var(--hubnav-border);
}
body.course-hub #lessons .lesson-finder label {color:#222}
body.course-hub #lessons .lesson-finder input:focus-visible {outline:2px solid #444}
/* Main gateway cards are navigation too: remove large coloured panels. */
body.learning-hub .gateway-card,
body.learning-hub .gateway-ks3,
body.learning-hub .gateway-gcse,
body.learning-hub .gateway-alevel,
body.learning-hub .gateway-school,
body.learning-hub .landing-choice-grid .stage-card,
body.learning-hub .landing-choice-grid .stage-card-dark {
  background:#fff;
  border:1px solid var(--hubnav-border);
  color:var(--hubnav-ink);
  box-shadow:none;
}
body.learning-hub .gateway-card:hover,
body.learning-hub .landing-choice-grid .stage-card:hover{
  background:#fafafa;
  border-color:#888;
  box-shadow:none;
  transform:none;
}
body.learning-hub .landing-choice-grid .stage-arrow{
  background:#fff;
  border:1px solid #ddd;
  color:#333;
}
body.learning-hub .resource {border-top-color:#d7d7d7}
body.learning-hub .simple-year-switch a[aria-current="page"]{
  background:#fff;
  color:#111;
  border-color:#333;
  text-decoration:underline;
  text-underline-offset:4px;
}
/* KS3 year navigation and lesson grids — identical neutral identity. */
body.learning-hub .year.landing-year,
body.learning-hub .year[data-year]{
  background:#fff!important;
  border:1px solid var(--hubnav-border)!important;
  color:#171717!important;
  box-shadow:none;
}
body.learning-hub .year.landing-year:hover,
body.learning-hub .year[data-year]:hover {background:#fafafa!important;border-color:#777!important}
body.learning-hub .year[data-year] .year-bottom,
body.learning-hub .year[data-year] .year-arrow,
body.learning-hub .year.landing-year .year-label {color:#333!important}
body.learning-hub .year[data-year] .year-arrow{background:transparent!important}
body.learning-hub .ks3-lessonhub .term,
body[data-year="8"] .term{
  background:#fff;
  border-color:var(--hubnav-border);
  box-shadow:none;
}
body.learning-hub .ks3-lessonhub .term-head,
body[data-year="8"] .term-head {
  background:#fff;
  color:#222;
  border-color:var(--hubnav-faint);
}
body.learning-hub .ks3-lessonhub .lesson-grid a,
body.learning-hub .ks3-lessonhub .lesson-pending,
body[data-year="8"] #lessons .lesson-grid a,
body[data-year="8"] #lessons .lesson-grid .lesson-pending {
  background:#fff;
  color:#252525;
  border:1px solid var(--hubnav-border);
  box-shadow:none;
}
body.learning-hub .ks3-lessonhub .lesson-grid a:hover,
body[data-year="8"] #lessons .lesson-grid a:hover {background:#fafafa;border-color:#777}
body.learning-hub .ks3-lessonhub .lesson-pending,
body[data-year="8"] #lessons .lesson-grid .lesson-pending {color:#777}
body[data-year="8"] .tabs a,
body[data-year="8"] .tabs button {
  background:#fff;
  color:#252525;
  border-color:var(--hubnav-border);
}
body[data-year="8"] .tabs .active,
body[data-year="8"] .tabs [aria-selected="true"]{
  background:#fff;
  color:#111;
  border-color:#555;
}
/* Keep focus unmistakable in both light and dark environments. */
body.course-hub #lessons a:focus-visible,
body.course-hub #lessons button:focus-visible,
body.learning-hub .year:focus-visible,
body[data-year="8"] #lessons a:focus-visible {outline:2px solid #222;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
 body.course-hub #lessons .lesson-entry.lesson-choice,
 body.learning-hub .year {transition:none}
}


/* Centralised lesson navigation | KS3 / OCR J277 / OCR H446 | 2026-10-27
   Core UI is neutral; a thin outline alone uses each course's existing colour.
   Do not apply this styling to individual lessons or revision resources. */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid {
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:8px;
  align-items:stretch;
  overflow:visible;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
  min-height:76px;
  margin:0;
  padding:0;
  overflow:visible;
  border:1.5px solid var(--spec-colour,#d5d5d5);
  border-radius:8px;
  background:#fff;
  box-shadow:none;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson:hover,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson:focus-within,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson[data-menu-open="true"] {
  z-index:60;
  border-color:var(--spec-colour,#999);
  box-shadow:0 3px 12px #00000012;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-tile-open {
  box-sizing:border-box;
  display:flex!important;
  flex:1 1 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:100%;
  min-width:0;
  min-height:47px;
  padding:7px 5px;
  margin:0;
  border:0;
  border-radius:7px 7px 0 0;
  background:#fff;
  color:#222;
  text-align:center;
  text-decoration:none;
  overflow:hidden;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-tile-number {
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:#202020;
  font:850 18px/1.15 system-ui,sans-serif;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-tile-title {
  display:block;
  width:100%;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  color:#626262;
  font:600 10px/1.25 system-ui,sans-serif;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.is-planned>.lesson-tile-open {
  border-radius:7px;
  color:#777;
  cursor:default;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.is-planned .lesson-tile-number {color:#777}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-options-toggle {
  box-sizing:border-box;
  display:block;
  width:100%;
  min-height:32px;
  margin:0;
  padding:5px 3px;
  border:0;
  border-top:1px solid #e6e6e6;
  border-radius:0 0 7px 7px;
  background:#fff;
  color:#282828;
  font:750 11px/1.3 system-ui,sans-serif;
  text-align:center;
  cursor:pointer;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-options-toggle:hover,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson[data-menu-open="true"]>.lesson-options-toggle {background:#f7f7f7}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-scenarios {
  box-sizing:border-box;
  position:absolute;
  top:100%;
  left:0;
  z-index:100;
  display:none;
  width:min(232px,calc(100vw - 24px));
  max-height:min(320px,calc(100vh - 24px));
  padding:5px 10px;
  margin:0;
  overflow-y:auto;
  border:1px solid #bcbcbc;
  border-radius:8px;
  background:#fff;
  color:#222;
  box-shadow:0 9px 22px #0000001e;
  text-align:left;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson[data-menu-open="true"]>.lesson-scenarios {display:block}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-scenario-action {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:43px;
  padding:9px 3px;
  border:0;
  border-bottom:1px solid #ececec;
  border-radius:0;
  background:#fff;
  color:#222;
  font:650 13px/1.3 system-ui,sans-serif;
  text-decoration:none;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-scenario-action:last-child{border-bottom:0}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-scenario-action:hover,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-scenario-action:focus-visible{background:#f6f6f6}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .scenario-symbol,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .scenario-copy {
  display:inline;
  min-height:0;
  width:auto;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .scenario-symbol{font-size:16px}
body:is(.course-hub,.central-legacy-hub) #lessons .central-lesson .lesson-tile-open:focus-visible,
body:is(.course-hub,.central-legacy-hub) #lessons .central-lesson .lesson-options-toggle:focus-visible,
body:is(.course-hub,.central-legacy-hub) #lessons .central-lesson .lesson-scenario-action:focus-visible{
  outline:2px solid #222;
  outline-offset:2px;
}
@media(max-width:900px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:700px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-options-toggle{min-height:35px}
}
@media(max-width:340px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* Keep a usable expanded colour key at mobile widths; legacy J277 hid its contents. */
@media(max-width:700px){
  body.course-hub #lessons .course-key[open] #specLegendMount {display:block}
  body.course-hub #lessons .course-key[open] .paper-key {display:flex}
}
/* Legacy KS3 years share the central controls while preserving their old resource tabs. */
body.central-legacy-hub #lessons .preview-help{display:none}
body.central-legacy-hub #lessons .central-legacy-key {
  position:relative;
  width:max-content;
  max-width:100%;
  margin:5px 0 9px auto;
  color:#333;
  font-size:12px;
}
body.central-legacy-hub #lessons .central-legacy-key summary{
  padding:6px 9px;
  border:1px solid #dedede;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
}
body.central-legacy-hub #lessons .ks3-colour-key{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:10px;
  border:1px solid #dedede;
  background:#fff;
}
body.central-legacy-hub #lessons .central-legacy-key-item{display:inline-flex;align-items:center;gap:6px}
body.central-legacy-hub #lessons .central-legacy-key-line{
  display:inline-block;
  width:18px;
  height:2px;
  border-radius:2px;
}


/* Restrained spec-point marker for J277/H446 only.
   Neutral outline, 3px line and text code; never a colour-filled card. */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson.has-spec-point,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson.has-spec-point:hover,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson.has-spec-point:focus-within,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson.has-spec-point[data-menu-open="true"]{
  border-color:#d5d5d5;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-spec-code{
  display:block;
  width:100%;
  min-width:0;
  min-height:0;
  margin:2px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#5d5d5d;
  font:650 10px/1.2 system-ui,sans-serif;
  text-align:center;
  white-space:nowrap;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-spec-line{
  display:block;
  flex:0 0 3px;
  width:100%;
  height:3px;
  min-height:3px;
  border:0;
  border-radius:0;
  background:var(--spec-mark-colour,#999);
}


/* Compact two-row desktop course navigation | centrally shared across KS3, J277 and H446
   Above 700px only: school bar; subject + tabs; year + colour key; lessons.
   All lesson content, tiles, Options interactions, and mobile styles remain intact. */
@media (min-width:701px) {
  body.course-hub.course-inline-nav .topbar {
    height:48px;
    min-height:48px;
    padding:0 18px;
  }
  body.course-hub.course-inline-nav .topbar .mark {
    width:30px;
    height:30px;
    font-size:15px;
  }
  body.course-hub.course-inline-nav .topbar .brand {gap:8px}
  body.course-hub.course-inline-nav .topbar .brand-copy span {
    font-size:13px;
    margin-top:0;
  }
  body.course-hub.course-inline-nav .topbar .home {
    padding:5px 9px;
    font-size:12px;
  }
  body.course-hub.course-inline-nav main {padding-top:6px}
  body.course-hub.course-inline-nav .course-topline,
  html.synergy-hub-preview body.course-hub.course-inline-nav .course-topline {
    gap:14px;
    margin:0 0 5px;
    padding:0 0 5px;
    border-bottom:1px solid #e9e9e9;
  }
  body.course-hub.course-inline-nav .course-topline .heading h1 {font-size:20px}
  body.course-hub.course-inline-nav .course-topline .heading .eyebrow {
    font-size:10px;
    letter-spacing:.09em;
    margin:0 0 2px;
  }
  body.course-hub.course-inline-nav .course-topline .course-nav .tabs,
  html.synergy-hub-preview body.course-hub.course-inline-nav .course-topline .course-nav .tabs {
    gap:6px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
  }
  body.course-hub.course-inline-nav .course-topline .course-nav .tabs .tab,
  html.synergy-hub-preview body.course-hub.course-inline-nav .course-topline .course-nav .tabs .tab {
    min-height:34px;
    padding:5px 6px;
    font-size:13px;
  }
  body.course-hub.course-inline-nav #lessons .year-toolbar {
    gap:6px;
    margin:0 0 3px;
  }
  body.course-hub.course-inline-nav #lessons .year-switch {gap:5px;margin:0}
  body.course-hub.course-inline-nav #lessons .year-switch .year-btn {
    min-height:34px;
    padding:5px 10px;
    font-size:13px;
  }
  body.course-hub.course-inline-nav #lessons .year-tools {gap:6px}
  body.course-hub.course-inline-nav #lessons .year-tools .count {display:none}
  body.course-hub.course-inline-nav #lessons .course-key summary {
    min-height:34px;
    padding:5px 9px;
  }
  body.course-hub.course-inline-nav #lessons .term {margin:6px 0 10px}
  body.course-hub.course-inline-nav #lessons .term-head {
    padding:6px 9px;
    margin:0 0 2px;
  }
  body.course-hub.course-inline-nav #lessons .lesson-grid {
    padding:8px;
  }
}


/* Shared desktop structural header: year selector in topline, key below final term
   The JS re-parents original interactive nodes, with no duplicate controls. */
@media (min-width:701px) {
  body.course-hub.course-inline-nav.desktop-nav-merged .course-topline {
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:12px;
  }
  body.course-hub.course-inline-nav.desktop-nav-merged .course-topline > .year-switch {
    display:flex;
    align-items:center;
    flex:0 0 auto;
    gap:5px;
    min-width:0;
    margin:0;
  }
  body.course-hub.course-inline-nav.desktop-nav-merged .course-topline > .year-switch .year-btn {
    box-sizing:border-box;
    min-height:34px;
    margin:0;
    padding:5px 9px;
    border-radius:6px;
    font-size:12px;
    line-height:1.25;
    white-space:nowrap;
  }
  body.course-hub.course-inline-nav.desktop-nav-merged .course-topline > .course-nav {
    flex:0 1 280px;
    max-width:280px;
    min-width:185px;
    margin:0 0 0 auto;
  }
  body.course-hub.course-inline-nav.desktop-nav-merged .course-topline .course-nav .nav-full {
    display:none;
  }
  body.course-hub.course-inline-nav.desktop-nav-merged .course-topline .course-nav .nav-short {
    display:inline;
  }
  body.course-hub.course-inline-nav.desktop-nav-merged #lessons .year-toolbar {
    display:none;
  }
  body.course-hub.course-inline-nav.desktop-nav-merged #lessons .lesson-footer {
    display:flex;
    justify-content:flex-end;
    padding:10px 0 4px;
    margin:9px 0 0;
    border-top:1px solid #e9e9e9;
  }
  body.course-hub.course-inline-nav.desktop-nav-merged #lessons .lesson-footer .course-key {
    position:relative;
    margin:0;
    font-size:12px;
  }
  body.course-hub.course-inline-nav.desktop-nav-merged #lessons .lesson-footer .course-key > .paper-key,
  body.course-hub.course-inline-nav.desktop-nav-merged #lessons .lesson-footer .course-key > #specLegendMount,
  body.course-hub.course-inline-nav.desktop-nav-merged #lessons .lesson-footer .course-key > .ks3-colour-key {
    position:static;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:auto;
    min-width:0;
    max-width:min(440px,calc(100vw - 40px));
    margin:6px 0 0;
    padding:10px 12px;
    border:1px solid #e6e6e6;
    border-radius:7px;
    background:#fff;
    box-shadow:none;
  }
  body.course-hub.course-inline-nav.desktop-nav-merged #lessons .lesson-footer .course-key > .paper-key,
  body.course-hub.course-inline-nav.desktop-nav-merged #lessons .lesson-footer .course-key .paper-key {
    flex-wrap:wrap;
    gap:8px 14px;
  }
}


/* Uniform lesson card heights across published and planned lessons
   The single shared tile component omits Options until a real link exists.
   Keep its outer dimensions unchanged so missing resources cannot alter the grid. */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson {
  box-sizing:border-box;
  height:108px;
  min-height:108px;
  max-height:108px;
}


/* Align planned and published lesson contents */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.is-planned > .lesson-tile-open {
  padding-bottom:39px;
}
@media (max-width:700px) {
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.is-planned > .lesson-tile-open {
    padding-bottom:42px;
  }
}


/* Keep the full OCR specification code visible in a dedicated tile row
   The card remains 108px tall; the link/title alone may clip long titles,
   never the specification reference beneath it. */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point > .lesson-tile-open{
  min-height:0;
  padding:3px 5px;
  gap:2px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point .lesson-tile-number{
  flex:0 0 auto;
  font-size:17px;
  line-height:1.1;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point .lesson-tile-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  white-space:normal;
  overflow:hidden;
  overflow-wrap:break-word;
  text-overflow:clip;
  max-height:24px;
  min-height:0;
  font-size:10px;
  line-height:1.17;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point > .lesson-spec-code{
  box-sizing:border-box;
  display:flex;
  flex:0 0 15px;
  align-items:center;
  justify-content:center;
  width:100%;
  height:15px;
  min-height:15px;
  max-height:15px;
  margin:0;
  padding:0 2px;
  border:0;
  overflow:visible;
  white-space:nowrap;
  text-overflow:clip;
  font:650 10.5px/1.1 system-ui,sans-serif;
  color:#555;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.is-planned > .lesson-tile-open{
  padding-bottom:3px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.is-planned::after{
  content:"";
  box-sizing:border-box;
  display:block;
  flex:0 0 32px;
  width:100%;
  height:32px;
}
@media(max-width:700px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.is-planned::after{
    flex-basis:35px;
    height:35px;
  }
}


/* Short, quiet heading in every central lesson Options pop-up.
   Layout and actions remain identical across KS3, J277 and H446. */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-scenarios > .lesson-popup-heading{
  box-sizing:border-box;
  display:block;
  width:100%;
  min-width:0;
  margin:0 0 2px;
  padding:8px 3px 9px;
  border:0;
  border-bottom:1px solid #ebebeb;
  border-radius:0;
  background:#fff;
  color:#222;
  font:800 13px/1.3 system-ui,sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Shared lesson-resource navigation | 2026-10-28.
   Monochrome and compact; no changes to lesson bodies or revision guides. */
body.course-hub #lessons .lesson-usage-key{
  margin:7px 0 12px;
  border:1px solid #ddd;
  border-radius:8px;
  background:#fff;
  color:#222;
}
body.course-hub #lessons .lesson-usage-key summary{
  min-height:39px;
  padding:9px 12px;
  cursor:pointer;
  font:750 13px/1.3 system-ui,sans-serif;
}
body.course-hub #lessons .lesson-usage-items{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:11px 13px 13px;
  border-top:1px solid #eee;
}
body.course-hub #lessons .lesson-usage-item{display:flex;align-items:flex-start;gap:9px;min-width:0}
body.course-hub #lessons .lesson-usage-icon{
  flex:0 0 22px;display:grid;place-items:center;
  width:22px;height:22px;border:1px solid #bbb;border-radius:5px;
  font:700 15px/1 system-ui,sans-serif;color:#444;
}
body.course-hub #lessons .lesson-usage-item strong,
body.course-hub #lessons .lesson-usage-item small{display:block;line-height:1.35}
body.course-hub #lessons .lesson-usage-item strong{font-size:12px}
body.course-hub #lessons .lesson-usage-item small{font-size:11px;color:#555}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-print-group{padding:5px 2px 7px}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-print-heading{
  padding:5px 1px 8px;font:700 12px/1.2 system-ui,sans-serif;color:#252525;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-print-variants{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-print-variants .lesson-scenario-action{
  min-height:42px;justify-content:center;text-align:center;padding:5px 3px;
  border:1px solid #ccc;border-radius:6px;font-size:11px;line-height:1.2;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-print-variants .scenario-symbol:empty{display:none}

/* True phone action sheet: kept outside lesson-grid stacking contexts. */
.lesson-mobile-overlay[hidden]{display:none!important}
.lesson-mobile-overlay{
  position:fixed;inset:0;z-index:1100;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(0,0,0,.45);
}
.lesson-mobile-panel{
  box-sizing:border-box;width:100%;max-width:560px;max-height:85dvh;
  overflow:auto;background:#fff;border-radius:15px 15px 0 0;
  padding:12px 16px max(18px,env(safe-area-inset-bottom));
  color:#222;box-shadow:0 -5px 25px #0002;
}
.lesson-mobile-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 0 10px;border-bottom:1px solid #e8e8e8;
}
.lesson-mobile-toolbar strong{font:750 13px/1.3 system-ui,sans-serif}
.lesson-mobile-close{
  flex:0 0 44px;width:44px;height:44px;border:1px solid #ddd;
  border-radius:8px;background:#fff;color:#222;cursor:pointer;
  font:26px/1 system-ui,sans-serif;
}
.lesson-mobile-options .lesson-popup-heading{
  margin:0;padding:13px 0;font:800 17px/1.25 system-ui,sans-serif;
}
.lesson-mobile-options .lesson-scenario-action{
  box-sizing:border-box;display:flex;align-items:center;gap:11px;
  width:100%;min-height:48px;padding:12px 6px;border-top:1px solid #eee;
  color:#222;text-decoration:none;font:700 15px/1.3 system-ui,sans-serif;
}
.lesson-mobile-options .scenario-symbol{display:inline-block;min-width:22px;text-align:center}
.lesson-mobile-options .lesson-print-heading{padding:13px 6px 10px;border-top:1px solid #eee;font:750 15px/1.3 system-ui,sans-serif}
.lesson-mobile-options .lesson-print-variants{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.lesson-mobile-options .lesson-print-variants .lesson-scenario-action{
  justify-content:center;min-height:48px;padding:9px 5px;
  border:1px solid #bbb;border-radius:7px;text-align:center;font-size:13px;
}
.lesson-mobile-options .lesson-print-variants .scenario-symbol:empty{display:none}
.lesson-mobile-panel a:focus-visible,.lesson-mobile-close:focus-visible{
  outline:3px solid #333;outline-offset:2px;
}
body.lesson-mobile-open{overflow:hidden}
@media(max-width:700px),(pointer:coarse){
  body.course-hub #lessons .lesson-usage-items{grid-template-columns:1fr;gap:9px;padding:10px 13px}
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson{
    height:118px;min-height:118px;max-height:118px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-options-toggle{
    min-height:44px;font-size:12px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-scenarios{
    display:none!important;
  }
}
@media(max-width:340px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(prefers-reduced-motion:reduce){
  .lesson-mobile-panel{scroll-behavior:auto}
}

/* Navigation-only visual polish — 2026-10-28.
   Scope: course hub headings, tabs, keys, tiles and Options. NEVER classroom
   lesson pages, independent booklets, revision guides or other resource bodies.
   Use native variable system fonts: no third-party font requests. */
body.course-hub {
  --hubnav-ui-font:"Segoe UI Variable Text","Aptos","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hubnav-display-font:"Segoe UI Variable Display","Aptos Display","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hubnav-ink-strong:#17201d;
}
body.course-hub .topbar,
body.course-hub .course-topline,
body.course-hub #lessons,
body.course-hub .lesson-mobile-panel{
  font-family:var(--hubnav-ui-font);
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}
body.course-hub .topbar .brand-copy span{
  font-family:var(--hubnav-display-font);
  font-weight:780;
  letter-spacing:-.035em;
}
body.course-hub .course-topline .heading h1{
  font-family:var(--hubnav-display-font);
  color:var(--hubnav-ink-strong);
  font-weight:790;
  letter-spacing:-.045em;
  line-height:1.15;
}
@media(min-width:701px){
  body.course-hub.course-inline-nav .course-topline .heading h1{font-size:23px}
  body.course-hub.course-inline-nav.desktop-nav-merged .course-topline > .course-nav{max-width:305px;flex-basis:305px}
  body.course-hub.course-inline-nav .course-topline .course-nav .tabs .tab{
    font-family:var(--hubnav-ui-font);
    font-weight:650;
    letter-spacing:-.015em;
  }
}
body.course-hub .course-nav .tab{
  font-family:var(--hubnav-ui-font);
  transition:color .16s ease,background-color .16s ease;
}
body.course-hub #lessons .year-btn{
  font-family:var(--hubnav-ui-font);
  border-radius:9px!important;
  letter-spacing:-.015em;
}
body.course-hub #lessons .term{
  border-radius:13px;
  border-color:#e5e8e7;
}
body.course-hub #lessons .term-head{
  border-radius:12px 12px 0 0;
  padding:10px 13px;
}
body.course-hub #lessons .term-head strong{
  font-family:var(--hubnav-display-font);
  font-size:14px;
  font-weight:780;
  letter-spacing:-.025em;
  color:var(--hubnav-ink-strong);
}
body.course-hub #lessons .term-head span{font-size:11.5px;font-weight:540}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:11px;
  padding:12px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson{
  height:121px;
  min-height:121px;
  max-height:121px;
  border:1px solid #dfe4e1;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(14,28,22,.025);
  background:#fff;
  transition:border-color .17s ease,box-shadow .17s ease,transform .17s ease;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson:hover,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson:focus-within{
  transform:translateY(-1px);
  box-shadow:0 7px 19px rgba(19,35,27,.085);
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-tile-open{
  border-radius:12px 12px 0 0;
  padding:6px 7px 4px;
  gap:4px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-tile-number{
  font-family:var(--hubnav-display-font,system-ui);
  font-size:22px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-tile-title,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point .lesson-tile-title{
  font-family:var(--hubnav-ui-font,system-ui);
  font-size:12px;
  line-height:1.2;
  font-weight:570;
  letter-spacing:-.015em;
  color:#4c5853;
  max-height:29px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point .lesson-tile-number{
  font-size:21px;
  line-height:1.08;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-spec-code{
  font-family:var(--hubnav-ui-font,system-ui);
  font-size:10.5px;
  letter-spacing:.015em;
  color:#6b756f;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-options-toggle{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:6px 5px;
  border-radius:0 0 11px 11px;
  border-top-color:#edf0ef;
  font:730 12px/1.25 var(--hubnav-ui-font,system-ui);
  letter-spacing:-.01em;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-options-toggle::after{
  content:"";
  width:5px;
  height:5px;
  margin-top:-3px;
  transform:rotate(45deg);
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  opacity:.75;
  transition:transform .16s ease;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson[data-menu-open="true"]>.lesson-options-toggle::after{
  transform:translateY(3px) rotate(225deg);
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-spec-line{
  border-radius:0 0 11px 11px;
  opacity:.86;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-scenarios{
  width:min(258px,calc(100vw - 24px));
  border-color:#d9dedb;
  border-radius:12px;
  padding:7px 11px;
  box-shadow:0 15px 32px rgba(21,34,27,.14);
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-scenarios > .lesson-popup-heading{
  font:780 14px/1.3 var(--hubnav-display-font,system-ui);
  letter-spacing:-.02em;
  padding:9px 4px 11px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-scenario-action{
  min-height:47px;
  font:650 13px/1.3 var(--hubnav-ui-font,system-ui);
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .scenario-symbol svg,
body.course-hub #lessons .lesson-usage-icon svg,
body.course-hub .lesson-mobile-panel .scenario-symbol svg{
  width:18px;height:18px;display:block;stroke:currentColor;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .scenario-symbol{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;min-width:22px;
}
body.course-hub #lessons .lesson-usage-key{
  border-color:#e2e6e4;
  border-radius:12px;
  margin:9px 0 14px;
}
body.course-hub #lessons .lesson-usage-key summary{
  font:740 13px/1.35 var(--hubnav-ui-font);
  letter-spacing:-.015em;
  padding:10px 13px;
}
body.course-hub #lessons .lesson-usage-items{gap:14px;padding:12px 15px 14px}
body.course-hub #lessons .lesson-usage-icon{
  width:30px;height:30px;flex-basis:30px;border:1px solid #e4e8e5;
  border-radius:9px;color:#38463d;background:#f8faf9;
}
body.course-hub #lessons .lesson-usage-item strong{
  font:750 12px/1.35 var(--hubnav-ui-font);letter-spacing:-.012em;
}
body.course-hub #lessons .lesson-usage-item small{
  font:500 11px/1.4 var(--hubnav-ui-font);color:#67716c;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-print-heading{
  display:flex;align-items:center;gap:10px;
  font:750 12px/1.3 var(--hubnav-ui-font,system-ui);
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-print-variants .lesson-scenario-action{
  border-color:#dce1de;border-radius:8px;
  font:650 11px/1.25 var(--hubnav-ui-font,system-ui);
}
body.course-hub .lesson-mobile-panel{
  border-radius:22px 22px 0 0;
  padding:16px 18px max(19px,env(safe-area-inset-bottom));
  box-shadow:0 -18px 48px rgba(9,25,16,.15);
}
body.course-hub .lesson-mobile-panel::before{
  content:"";display:block;width:37px;height:4px;
  border-radius:10px;background:#d5dbd7;
  margin:0 auto 12px;
}
body.course-hub .lesson-mobile-options .lesson-popup-heading{
  font:780 19px/1.25 var(--hubnav-display-font);
  letter-spacing:-.035em;
}
body.course-hub .lesson-mobile-options .lesson-scenario-action{
  font:650 15px/1.35 var(--hubnav-ui-font);
}
body.course-hub .lesson-mobile-options .lesson-print-heading{
  display:flex;align-items:center;gap:10px;
  font:740 14px/1.35 var(--hubnav-ui-font);
}
body.course-hub .lesson-mobile-panel .scenario-symbol{
  display:inline-flex;align-items:center;justify-content:center;min-width:23px;
}
@media(max-width:1100px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
}
@media(max-width:900px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}
@media(max-width:700px),(pointer:coarse){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;padding:10px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson{
    height:124px;min-height:124px;max-height:124px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-options-toggle{
    min-height:44px;font-size:12px;
  }
  body.course-hub #lessons .lesson-usage-items{gap:11px}
  body.course-hub .course-topline .heading h1{font-size:22px}
}
@media(max-width:340px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson,
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-options-toggle::after,
  body.course-hub .course-nav .tab{transition:none!important}
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson:hover,
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson:focus-within{transform:none}
}

/* Repair lesson card content clipping after nav polish — 2026-10-28. */
/* hub.css defines .lesson-grid span {min-height:48px}; that inherited
   minimum forced the number AND title to each occupy 48px inside fixed
   121px cards. Reset these spans explicitly, and give subjects room. */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:11px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson{
  height:150px;
  min-height:150px;
  max-height:150px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-tile-open,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point>.lesson-tile-open{
  flex:1 1 auto;
  min-height:0;
  padding:9px 9px 7px;
  gap:6px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-tile-number,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point .lesson-tile-number{
  box-sizing:border-box;
  display:block;
  flex:0 0 auto;
  min-height:0;
  max-height:none;
  height:auto;
  font-size:21px;
  line-height:1.12;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-tile-title,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point .lesson-tile-title{
  box-sizing:border-box;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  flex:0 1 auto;
  min-height:0;
  height:auto;
  max-height:45px;
  padding:0;
  margin:0;
  white-space:normal;
  overflow:hidden;
  overflow-wrap:break-word;
  text-overflow:clip;
  font-size:12px;
  line-height:1.25;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-spec-code{
  flex:0 0 15px;
  min-height:15px;
  max-height:15px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-spec-line{
  flex:0 0 3px;
  min-height:3px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-options-toggle{
  flex:0 0 auto;
  min-height:39px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.is-planned>.lesson-tile-open{
  padding-bottom:6px;
}
@media(max-width:1050px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}
@media(max-width:850px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:700px),(pointer:coarse){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson{
    height:158px;
    min-height:158px;
    max-height:158px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-options-toggle{
    min-height:44px;
  }
}
@media(max-width:480px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Teach · Catch up · Print: direct-action card navigation, shared by all hubs.
   Scope is only hub navigation, never the classroom lesson or printable pages. */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson{
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  height:179px;
  min-height:179px;
  max-height:179px;
  border-radius:13px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-tile-open,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point>.lesson-tile-open{
  flex:1 1 auto;
  min-height:0;
  padding:9px 9px 6px;
  gap:6px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-tile-number,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point .lesson-tile-number{
  display:block;
  min-height:0;
  max-height:none;
  line-height:1.12;
  font-size:22px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-tile-title,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point .lesson-tile-title{
  display:-webkit-box;
  min-height:0;
  height:auto;
  max-height:59px;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  white-space:normal;
  overflow:hidden;
  overflow-wrap:break-word;
  font-size:12px;
  line-height:1.22;
  font-weight:600;
  color:#4c5853;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-spec-code{
  flex:0 0 15px;
  min-height:15px;
  max-height:15px;
  padding:0 3px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-spec-line{
  flex:0 0 3px;
  min-height:3px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.is-planned::after{
  content:none;
  display:none;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.is-planned>.lesson-tile-open{
  padding-bottom:7px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions{
  display:grid;
  grid-template-columns:repeat(var(--lesson-action-count,3),minmax(0,1fr));
  flex:0 0 53px;
  width:100%;
  min-height:53px;
  border-top:1px solid #e8ece9;
  background:#fcfdfc;
  border-radius:0 0 12px 12px;
  overflow:hidden;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-direct-action,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-options-toggle{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:100%;
  min-width:0;
  min-height:53px;
  height:53px;
  margin:0;
  padding:5px 2px;
  background:transparent;
  color:#25352e;
  border:0;
  border-right:1px solid #e8ece9;
  border-radius:0;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  font:700 10.8px/1.2 var(--hubnav-ui-font,system-ui);
  transition:background-color .15s ease,color .15s ease;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-direct-action:last-child{
  border-right:0;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-direct-action:hover,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-direct-action:focus-visible,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-direct-action[aria-expanded="true"]{
  background:#eef2ef;
  color:#101c16;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-options-toggle::after{
  display:none;
  content:none;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-icon,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-label{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:0;
  max-height:none;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  white-space:nowrap;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-icon svg{
  display:block;
  width:17px;
  height:17px;
  stroke:currentColor;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-label{
  font:700 10.8px/1.25 var(--hubnav-ui-font,system-ui);
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-action-status{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:100%;
  flex:0 0 53px;
  min-height:53px;
  padding:5px;
  border-top:1px solid #eff0ef;
  color:#7a827e;
  font:600 11px/1.2 var(--hubnav-ui-font,system-ui);
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.lesson-choice-welcome .lesson-tile-number{
  font-size:18px;
  letter-spacing:-.04em;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-scenarios{
  width:min(250px,calc(100vw - 24px));
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-scenarios>.lesson-print-variants{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:11px 0 9px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-scenarios>.lesson-print-variants>.lesson-scenario-action{
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  margin:0;
  padding:8px 3px;
  border:1px solid #d3d9d5;
  border-radius:8px;
  font:700 12px/1.2 var(--hubnav-ui-font,system-ui);
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-scenarios>.lesson-print-variants>.lesson-scenario-action .scenario-copy{
  min-height:0;
  height:auto;
  width:auto;
  padding:0;
  border:0;
}
body.course-hub #lessons .lesson-usage-key{
  margin:5px 0 11px;
  border-radius:10px;
}
body.course-hub #lessons .lesson-usage-key:not([open]) summary{
  border:0;
  min-height:36px;
  padding:8px 12px;
}
body.course-hub #lessons .lesson-usage-key summary{
  font-size:12px;
}
body.course-hub .lesson-mobile-options .lesson-print-variants{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:9px;
}
body.course-hub .lesson-mobile-options .lesson-print-variants .lesson-scenario-action{
  box-sizing:border-box;
  min-height:48px;
  justify-content:center;
  padding:10px 4px;
  border:1px solid #cfd5d1;
  border-radius:9px;
  font-size:14px;
}
body.course-hub .lesson-mobile-options .lesson-print-variants .scenario-copy{
  display:inline;
  min-height:0;
  width:auto;
  padding:0;
  border:0;
}
@media(max-width:700px),(pointer:coarse){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson{
    height:187px;
    min-height:187px;
    max-height:187px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions{
    flex-basis:56px;
    min-height:56px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-direct-action,
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-options-toggle{
    min-height:56px;
    height:56px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-action-status{
    flex-basis:56px;
    min-height:56px;
  }
}
@media(prefers-reduced-motion:reduce){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-direct-action{
    transition:none;
  }
}

/* Hub primary navigation: Full lesson / Catch up / Print, 2026-10-28. */
/* Give navigation actions the full single-click prominence, while the number
   and topic remain informational. No changes are made inside lesson pages. */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson{
  height:190px;
  min-height:190px;
  max-height:190px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-tile-open,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.has-spec-point>.lesson-tile-open{
  cursor:default;
  padding:11px 9px 8px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-tile-open:hover{
  background:#fff;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-direct-actions{
  flex-basis:64px;
  min-height:64px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-direct-action,
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-options-toggle{
  height:64px;
  min-height:64px;
  gap:4px;
  padding:8px 2px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-action-full-lesson{
  color:#15251d;
  background:#f6f8f6;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions .lesson-direct-label{
  white-space:normal;
  text-align:center;
  overflow-wrap:normal;
  word-break:normal;
  font-size:11.5px;
  font-weight:720;
  line-height:1.2;
  max-width:100%;
  min-height:0;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-action-status{
  flex-basis:64px;
  min-height:64px;
}
@media(max-width:1050px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:800px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:550px),(pointer:coarse) and (max-width:700px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson{
    height:198px;min-height:198px;max-height:198px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions{
    min-height:68px;flex-basis:68px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-direct-action,
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-options-toggle{
    height:68px;min-height:68px;
  }
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-action-status{
    flex-basis:68px;min-height:68px;
  }
}
@media(prefers-reduced-motion:reduce){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-direct-action,
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-direct-actions>.lesson-options-toggle{
    transition:none;
  }
}

/* Full-lesson card click repair | 2026-10-28.
   H446 and KS3 single-link lessons need one obvious target, not a repeated
   footer. The shared main link also works on J277 with other actions. */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-tile-open[href]{
  cursor:pointer;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-tile-open[href]:hover{
  background:#f7faf8;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson>.lesson-tile-open[href]:focus-visible{
  outline:3px solid #334c3c;
  outline-offset:-3px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson.lesson-primary-only{
  height:158px;
  min-height:158px;
  max-height:158px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.lesson-primary-only>.lesson-tile-open{
  border-radius:12px 12px 0 0;
  gap:7px;
  flex:1 1 auto;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-primary-hint{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:0;
  max-height:none;
  height:auto;
  margin:3px auto 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#3d6251;
  font:730 11px/1.3 var(--hubnav-ui-font,system-ui);
}
@media(max-width:700px),(pointer:coarse){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson.lesson-primary-only{
    height:166px;
    min-height:166px;
    max-height:166px;
  }
}

/* 20261029-stable-primary: keep a single primary lesson link regardless
   of whether future Catch up or Print resources are added. */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson.lesson-primary-only {
  height:190px;min-height:190px;max-height:190px;
}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson.lesson-primary-only > .lesson-tile-open {border-radius:12px}
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .central-lesson .lesson-direct-actions > :last-child {border-right:0}
@media(max-width:550px),(pointer:coarse) and (max-width:700px){
  body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-entry.central-lesson.lesson-primary-only{
    height:198px;min-height:198px;max-height:198px;
  }
}

/* Catch up / Catch up draft labelling | 2026-10-29 */
body:is(.course-hub,.central-legacy-hub) #lessons .lesson-grid .lesson-action-catch-up-draft .lesson-direct-label{
  font-size:10.5px;
  line-height:1.12;
  white-space:normal;
}