/* Homework Magic universal page layer — consistent, child-friendly and accessible. */
:root { --hm-content-width: 1180px; --hm-gap: 18px; --hm-focus: #2f7de1; --hm-kid-menu-font: "Nunito", "Avenir Next Rounded", "Segoe UI Rounded", ui-rounded, "Avenir Next", "Nunito Sans", "Segoe UI", system-ui, sans-serif; --hm-nav-font: var(--hm-kid-menu-font); }
body.hm-page, body.hm-app, body.hm-eleven, body.hm-rewards, body.hm-pricing, body.hm-article {
  min-height:100vh; color:#233247; font-family:"Nunito","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
}
header { font-family:var(--hm-nav-font); }
body.hm-page, body.hm-eleven, body.hm-rewards { background:#fffdf8; }
.header, .mock-header, .site-header, .hm-site-header { background:rgba(255,255,255,.97); border-bottom:1px solid #dfe4f0; box-shadow:0 3px 16px rgba(35,50,71,.07); }
.header-content, .hm-nav-wrap, .header-inner { width:min(var(--hm-content-width), calc(100% - 36px)); min-height:76px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo, .brand, .hm-brand { white-space:nowrap; }
.nav-links, .site-nav, .hm-nav, .hm-main-nav, header nav { display:flex; align-items:center; justify-content:flex-end; gap:10px 16px; flex-wrap:nowrap; min-width:0; overflow-x:auto; scrollbar-width:thin; font-family:var(--hm-nav-font)!important; font-weight:600!important; }
.hm-main-nav.hm-has-stage-menu { overflow:visible; }
.nav-links a, .nav-links summary, .site-nav a, .site-nav summary, .hm-nav a, .hm-nav summary, .hm-main-nav a, .hm-main-nav summary, header nav a, header nav summary { white-space:nowrap; text-decoration:none; color:#344054; padding:9px 4px; font-family:inherit!important; font-size:.95rem!important; font-style:normal!important; font-weight:600!important; letter-spacing:normal!important; line-height:1.35!important; text-transform:none!important; }
.nav-links a:hover, .site-nav a:hover, .hm-nav a:hover, .hm-main-nav a:hover { color:#5d3ca8; }
.container, .wrap, main { max-width:var(--hm-content-width); margin-left:auto; margin-right:auto; }
/* Some long-form 11+ pages deliberately use a narrower reading column than
   the rest of the site. Match the navigation's left and right edges to the
   content children on those templates, so the header never appears to drift. */
body.hm-article .hm-nav-wrap { width: 100%; }
body.hm-eleven .topic-header .hm-nav-wrap { width:min(1080px, calc(100% - 40px)); }
body.hm-eleven .mock-header .hm-nav-wrap { width:min(1136px, calc(100% - 44px)); }
.card, .panel, .practice-card, .question-card { border-radius:20px; }
button, .btn, a.button { min-height:44px; touch-action:manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:4px solid rgba(47,125,225,.28)!important; outline-offset:3px; }
@media (max-width:760px){ .header-content,.hm-nav-wrap,.header-inner{width:min(var(--hm-content-width),calc(100% - 24px));min-height:68px;gap:12px;} body.hm-article .hm-nav-wrap{width:100%;} body.hm-eleven .topic-header .hm-nav-wrap{width:calc(100% - 40px);} body.hm-eleven .mock-header .hm-nav-wrap{width:calc(100% - 28px);} .nav-links,.site-nav,.hm-main-nav{justify-content:flex-start;gap:8px 12px;} .nav-links a,.site-nav a,.hm-main-nav a{font-size:.95rem;padding:8px 3px;} }
@media (max-width:560px){ body.hm-eleven .topic-header .hm-nav-wrap{width:calc(100% - 26px);} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* Reusable learning-app header for 11+ spaces. Keeping the same structure as
   /app prevents narrow, differently centred navigation bars on the older
   standalone templates. */
header.hm-app-header {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0 0 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hm-line, #dfe4f0);
  border-radius: 0;
  background: rgba(255,255,255,.94);
  box-shadow: none;
}
.hm-app-header .header-content {
  width: min(1240px, calc(100% - 36px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Keep the learner profile button in the flex row, beside the nav. */
.hm-app-header .header-content.hm-kid-avatar-host {
  padding-right: 0 !important;
}
.hm-app-header .hm-kid-avatar-host > .hm-kid-avatar {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  margin-left: 4px;
  align-self: center;
}
.hm-app-header .logo {
  flex: 0 0 auto;
  color: var(--hm-ink, #182b49);
  -webkit-text-fill-color: currentColor;
  background: none;
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.hm-app-header .nav-links,
.hm-app-header .hm-main-nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  flex-wrap: wrap;
  overflow: visible;
}
.hm-app-header .nav-links a,
.hm-app-header .hm-main-nav a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  margin: 0;
  padding: 8px 10px;
  border-radius: 11px;
  color: var(--hm-ink, #182b49);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.hm-app-header .nav-links a:hover,
.hm-app-header .nav-links a:focus-visible,
.hm-app-header .hm-main-nav a:hover,
.hm-app-header .hm-main-nav a:focus-visible {
  color: var(--hm-purple-dark, #5d3ca8);
  background: var(--hm-purple-soft, #f1edff);
}
@media (max-width:980px) {
  .hm-app-header .header-content { align-items: center; flex-direction: column; }
  .hm-app-header .nav-links,
  .hm-app-header .hm-main-nav {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
  }
  .hm-app-header .nav-links a,
  .hm-app-header .hm-main-nav a { flex: 0 0 auto; }
  .hm-app-header .hm-kid-avatar-host > .hm-kid-avatar {
    align-self: center;
    margin: 4px 0 0;
  }
}
@media (max-width:760px) {
  .hm-app-header .header-content { width: min(1240px, calc(100% - 24px)); min-height: 68px; gap: 12px; }
}


.hm-article-funnel {
  max-width: 1120px;
  margin: 52px auto 10px;
  padding: 30px 0 6px;
}
.hm-funnel-heading {
  max-width: 760px;
  margin: 0 auto 24px;
  text-align: center;
}
.hm-funnel-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--hm-purple, #6c4cff);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hm-funnel-heading h2 {
  margin: 0;
  color: var(--hm-navy, #17233d);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
}
.hm-funnel-heading p {
  margin: 9px auto 0;
  color: #69758a;
  font-size: 14px;
  line-height: 1.55;
}
.hm-funnel-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.hm-funnel-step {
  position: relative;
  display: flex;
  min-height: 205px;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 20px 18px;
  border: 1px solid var(--hm-border, #e4e8ef);
  border-radius: 20px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 7px 22px rgba(30,45,70,.055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hm-funnel-step:hover,
.hm-funnel-step:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--hm-shadow, 0 12px 30px rgba(30,45,70,.10));
  border-color: #cfc3ff;
}
.hm-funnel-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 50%;
  background: #f1edff;
  font-size: 25px;
}
.hm-funnel-step:nth-child(2) .hm-funnel-icon { background: #e9f8ef; }
.hm-funnel-step:nth-child(3) .hm-funnel-icon { background: #fff2e5; }
.hm-funnel-step-number {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1edff;
  color: var(--hm-purple, #6c4cff);
  font-size: 11px;
  font-weight: 900;
}
.hm-funnel-step strong {
  color: var(--hm-navy, #17233d);
  font-size: 16px;
  line-height: 1.3;
}
.hm-funnel-step > span:not(.hm-funnel-icon):not(.hm-funnel-step-number):not(.hm-funnel-cta) {
  margin-top: 8px;
  color: #69758a;
  font-size: 12px;
  line-height: 1.5;
}
.hm-funnel-cta {
  margin-top: auto;
  padding-top: 14px;
  color: var(--hm-purple, #6c4cff);
  font-size: 12px;
  font-weight: 850;
}
@media (max-width: 700px) {
  .hm-funnel-steps { grid-template-columns: 1fr; }
  .hm-funnel-step { min-height: 175px; }
}

/* === inlined left-menu shell from app-shell.css === */
/* Homework Magic left-menu shell.
   Cursor-style layout (left rail, site links at the bottom) with child-safe
   cream/purple colours, large labelled targets, and no icon-only collapse.
   Layout is applied via body.hm-shell and .hm-shell-sidebar from auth-nav.js
   so it does not depend on :has() selector lists. */

:root {
  --hm-sidebar-width: 272px;
  --hm-shell-bar-height: 64px;
}

body.hm-shell:not(.hm-shell-app) {
  padding-left: var(--hm-sidebar-width);
}

body.hm-shell-app {
  padding-left: 0 !important;
}

.hm-shell-sidebar {
  position: fixed !important;
  z-index: 40 !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  width: var(--hm-sidebar-width) !important;
  max-width: var(--hm-sidebar-width) !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 14px 10px 18px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overflow-anchor: none !important;
  border: 0 !important;
  border-right: 1px solid var(--hm-line, #dfe4f0) !important;
  border-radius: 0 !important;
  background: #f7f7f8 !important;
  box-shadow: 4px 0 18px rgba(35, 50, 71, .06) !important;
  backdrop-filter: none !important;
}

/* Parent/teacher dashboards keep inline `header { padding: 1rem 5% }` rules.
   The sidebar class plus !important above wins as soon as markup is parsed. */
body.hm-page.hm-shell:not(.hm-shell-app) > header {
  box-sizing: border-box !important;
}

.hm-shell-sidebar .hm-nav-wrap,
.hm-shell-sidebar .header-content,
.hm-shell-sidebar .header-inner,
.hm-shell-sidebar .wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.hm-shell .hm-shell-sidebar .hm-brand,
body.hm-shell .hm-shell-sidebar .logo,
body.hm-shell .hm-shell-sidebar .brand {
  width: min(100%, 196px) !important;
  height: 82px !important;
  margin: 0 0 4px !important;
  flex: 0 0 auto !important;
}

.hm-shell-role {
  display: none;
  flex: 0 0 auto;
  margin: 0 0 8px;
  padding: 10px 10px 8px;
  border: 1.5px solid #ece7fb;
  border-radius: 16px;
  background: #fff;
}

.hm-shell-role.hm-kid-avatar-host,
body.hm-shell[data-hm-role="parent"] .hm-shell-role,
body.hm-shell[data-hm-role="teacher"] .hm-shell-role {
  display: block;
}

.hm-shell-role-label {
  margin: 0;
  color: var(--hm-purple-dark, #493bbd);
  font-family: var(--hm-nav-font, "Nunito", "Segoe UI", sans-serif);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hm-shell-sidebar .nav-links,
.hm-shell-sidebar .hm-main-nav,
.hm-shell-sidebar nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: auto !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}

.hm-shell-sidebar .hm-kid-learning-nav,
.app-sidebar .hm-kid-learning-nav,
.hm-shell-sidebar nav.tabs,
.app-sidebar nav.tabs {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  margin-top: 0 !important;
  justify-content: flex-start !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 4px !important;
  padding: 4px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Parent space (Child progress, rewards, plan, memory): hide Homework / 11+. */
.hm-shell-sidebar .hm-kid-learning-nav[hidden],
.app-sidebar .hm-kid-learning-nav[hidden],
.hm-shell-sidebar nav.tabs[hidden],
.app-sidebar nav.tabs[hidden],
body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar .hm-kid-learning-nav,
body.hm-shell[data-hm-parent-space="1"] .app-sidebar .hm-kid-learning-nav,
body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar nav.tabs,
body.hm-shell[data-hm-parent-space="1"] .app-sidebar nav.tabs {
  display: none !important;
}

body.hm-shell[data-hm-role="kid"] .hm-nav-stage-menu,
body.hm-shell[data-hm-role="kid"] .hm-nav-cta {
  display: none !important;
}

.hm-shell-sidebar > a.hm-brand + a,
.hm-shell-sidebar > a.logo + a,
.hm-shell-sidebar > a.brand + a {
  margin-top: auto !important;
}

.hm-shell-sidebar > a[hidden],
body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar > a:not(.hm-brand):not(.logo):not(.brand) {
  display: none !important;
}

.hm-shell-sidebar .nav-links a,
.hm-shell-sidebar .nav-links summary,
.hm-shell-sidebar .hm-main-nav a,
.hm-shell-sidebar .hm-main-nav summary,
.hm-shell-sidebar nav a,
.hm-shell-sidebar > a:not(.hm-brand):not(.logo):not(.brand) {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 12px;
  color: var(--hm-ink, #233247) !important;
  background: transparent;
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: left;
  white-space: normal !important;
}

.hm-shell-sidebar .nav-links a[hidden],
.hm-shell-sidebar .hm-main-nav a[hidden],
.hm-shell-sidebar nav a[hidden] {
  display: none !important;
}

.hm-shell-sidebar .nav-links a:hover,
.hm-shell-sidebar .nav-links a:focus-visible,
.hm-shell-sidebar .hm-main-nav a:hover,
.hm-shell-sidebar .hm-main-nav a:focus-visible,
.hm-shell-sidebar .hm-main-nav summary:hover,
.hm-shell-sidebar .hm-main-nav summary:focus-visible,
.hm-shell-sidebar nav a:hover,
.hm-shell-sidebar nav a:focus-visible {
  color: var(--hm-purple-dark, #493bbd) !important;
  background: var(--hm-purple-soft, #f1efff) !important;
}

.hm-shell-sidebar .hm-main-nav .hm-nav-cta {
  justify-content: center;
  color: #fff !important;
  background: var(--hm-purple, #6558e8) !important;
  box-shadow: 0 3px 0 var(--hm-ink, #233247);
  font-weight: 850 !important;
}

.hm-shell-sidebar .hm-main-nav .hm-nav-cta:hover,
.hm-shell-sidebar .hm-main-nav .hm-nav-cta:focus-visible {
  background: var(--hm-purple-dark, #493bbd) !important;
}

/* 访客（未登录）左侧栏：Start Free Practice 固定在 logo 正下方的顶部位置。 */
.hm-shell-sidebar .hm-nav-cta.hm-shell-start-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px;
  color: #fff !important;
  background: var(--hm-purple, #6558e8) !important;
  box-shadow: 0 3px 0 var(--hm-ink, #233247);
  font-size: .95rem !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  text-align: center;
  text-decoration: none;
  white-space: normal !important;
}

.hm-shell-sidebar .hm-nav-cta.hm-shell-start-cta:hover,
.hm-shell-sidebar .hm-nav-cta.hm-shell-start-cta:focus-visible {
  background: var(--hm-purple-dark, #493bbd) !important;
}

.hm-shell-sidebar .hm-shell-register-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 40px;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 2px solid var(--hm-ink, #233247) !important;
  border-radius: 12px;
  background: #fff !important;
  color: var(--hm-ink, #233247) !important;
  box-shadow: 0 3px 0 var(--hm-ink, #233247);
  font-size: .9rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: center;
  text-decoration: none;
  white-space: normal !important;
}

.hm-shell-sidebar .hm-shell-register-cta:hover,
.hm-shell-sidebar .hm-shell-register-cta:focus-visible {
  background: #fff7ea !important;
  color: var(--hm-ink, #233247) !important;
}

.hm-shell-sidebar .hm-main-nav {
  padding: 12px 4px 0 !important;
  border-top: 1px solid var(--hm-line, #dfe4f0);
}

.hm-shell-sidebar .hm-main-nav a.active,
.hm-shell-sidebar .hm-main-nav a[aria-current="page"],
.app-sidebar .hm-main-nav a.active,
.app-sidebar .hm-main-nav a[aria-current="page"] {
  background: #e4e4ea !important;
  color: var(--hm-ink, #233247) !important;
  font-weight: 800 !important;
}

/* Parent account links (Homework tools → Log out) keep dashboard purple style
   on progress/rewards/memory/pricing as well as parent-dashboard. */
.hm-shell-sidebar .hm-main-nav a.active[data-parent-account-link],
.hm-shell-sidebar .hm-main-nav a[aria-current="page"][data-parent-account-link],
.app-sidebar .hm-main-nav a.active[data-parent-account-link],
.app-sidebar .hm-main-nav a[aria-current="page"][data-parent-account-link],
.hm-shell-sidebar .hm-main-nav.hm-parent-account-nav a.active,
.hm-shell-sidebar .hm-main-nav.hm-parent-account-nav a[aria-current="page"],
.app-sidebar .hm-main-nav.hm-parent-account-nav a.active,
.app-sidebar .hm-main-nav.hm-parent-account-nav a[aria-current="page"] {
  background: #ecebff !important;
  color: var(--hm-purple-dark, #493bbd) !important;
}

.hm-shell-sidebar .hm-kid-learning-nav a,
.app-sidebar .tabs .tab,
.app-sidebar .tabs a.tab {
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  text-decoration: none;
  font-weight: 700 !important;
  padding: 11px 12px !important;
}

.hm-shell-sidebar .hm-kid-learning-nav a:hover,
.hm-shell-sidebar .hm-kid-learning-nav a:focus-visible,
.app-sidebar .tabs a.tab:hover,
.app-sidebar .tabs a.tab:focus-visible {
  color: var(--hm-ink, #233247) !important;
  background: #ececf1 !important;
}

.hm-shell-sidebar .hm-kid-learning-nav a.active,
.hm-shell-sidebar .hm-kid-learning-nav a[aria-current="page"] {
  background: #e4e4ea !important;
  color: var(--hm-ink, #233247) !important;
  font-weight: 750 !important;
}

.app-sidebar .tabs .tab.tab-group-homework,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-homework,
.app-sidebar .hm-kid-learning-nav a.tab-group-homework {
  color: var(--hm-purple-dark, #493bbd) !important;
  background: var(--hm-purple-soft, #f1efff) !important;
}

.app-sidebar .tabs .tab.tab-group-homework:hover,
.app-sidebar .tabs .tab.tab-group-homework:focus-visible,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-homework:hover,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-homework:focus-visible,
.app-sidebar .hm-kid-learning-nav a.tab-group-homework:hover,
.app-sidebar .hm-kid-learning-nav a.tab-group-homework:focus-visible {
  color: var(--hm-purple-dark, #493bbd) !important;
  background: #e0d8ff !important;
}

.app-sidebar .tabs .tab.tab-group-homework.active,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-homework.active,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-homework[aria-current="page"],
.app-sidebar .hm-kid-learning-nav a.tab-group-homework.active,
.app-sidebar .hm-kid-learning-nav a.tab-group-homework[aria-current="page"] {
  color: var(--hm-purple-dark, #493bbd) !important;
  background: #d4c8ff !important;
}

.app-sidebar .tabs .tab.tab-group-eleven,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-eleven,
.app-sidebar .hm-kid-learning-nav a.tab-group-eleven {
  color: #176b52 !important;
  background: var(--hm-teal-soft, #e7f8f2) !important;
}

.app-sidebar .tabs .tab.tab-group-eleven:hover,
.app-sidebar .tabs .tab.tab-group-eleven:focus-visible,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-eleven:hover,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-eleven:focus-visible,
.app-sidebar .hm-kid-learning-nav a.tab-group-eleven:hover,
.app-sidebar .hm-kid-learning-nav a.tab-group-eleven:focus-visible {
  color: #176b52 !important;
  background: #cfeee4 !important;
}

.app-sidebar .tabs .tab.tab-group-eleven.active,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-eleven.active,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-eleven[aria-current="page"],
.app-sidebar .hm-kid-learning-nav a.tab-group-eleven.active,
.app-sidebar .hm-kid-learning-nav a.tab-group-eleven[aria-current="page"] {
  color: #176b52 !important;
  background: #b7e6d8 !important;
}

.app-sidebar .tabs .tab.tab-group-seag,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-seag,
.app-sidebar .hm-kid-learning-nav a.tab-group-seag {
  color: #9a3412 !important;
  background: #fff1e0 !important;
}

.app-sidebar .tabs .tab.tab-group-seag:hover,
.app-sidebar .tabs .tab.tab-group-seag:focus-visible,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-seag:hover,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-seag:focus-visible,
.app-sidebar .hm-kid-learning-nav a.tab-group-seag:hover,
.app-sidebar .hm-kid-learning-nav a.tab-group-seag:focus-visible {
  color: #9a3412 !important;
  background: #ffe0c2 !important;
}

.app-sidebar .tabs .tab.tab-group-seag.active,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-seag.active,
.hm-shell-sidebar .hm-kid-learning-nav a.tab-group-seag[aria-current="page"],
.app-sidebar .hm-kid-learning-nav a.tab-group-seag.active,
.app-sidebar .hm-kid-learning-nav a.tab-group-seag[aria-current="page"] {
  color: #9a3412 !important;
  background: #ffd0a3 !important;
}

.app-sidebar .tabs .tab-group-homework + .tab-group-eleven,
.hm-shell-sidebar .hm-kid-learning-nav .tab-group-homework + .tab-group-eleven {
  margin-top: 8px !important;
}

.hm-shell-sidebar .parent-dash-tabs,
.app-sidebar .parent-dash-tabs {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

.hm-shell-sidebar .parent-dash-tabs .parent-dash-tab,
.app-sidebar .parent-dash-tabs .parent-dash-tab {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0;
  border-radius: 12px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--hm-ink, #233247) !important;
  font-family: var(--hm-nav-font, "Nunito", "Segoe UI", sans-serif);
  font-size: .95rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hm-shell-sidebar .parent-dash-tabs .parent-dash-tab:hover,
.hm-shell-sidebar .parent-dash-tabs .parent-dash-tab:focus-visible,
.app-sidebar .parent-dash-tabs .parent-dash-tab:hover,
.app-sidebar .parent-dash-tabs .parent-dash-tab:focus-visible {
  background: var(--hm-purple-soft, #f1efff) !important;
  color: var(--hm-purple-dark, #493bbd) !important;
  text-decoration: none !important;
}

.hm-shell-sidebar .parent-dash-tabs .parent-dash-tab.active,
.hm-shell-sidebar .parent-dash-tabs .parent-dash-tab[aria-current="page"],
.hm-shell-sidebar .parent-dash-tabs .parent-dash-tab[aria-selected="true"],
.app-sidebar .parent-dash-tabs .parent-dash-tab.active,
.app-sidebar .parent-dash-tabs .parent-dash-tab[aria-current="page"],
.app-sidebar .parent-dash-tabs .parent-dash-tab[aria-selected="true"] {
  background: #ecebff !important;
  color: var(--hm-purple-dark, #493bbd) !important;
  box-shadow: none !important;
  font-weight: 800;
}

body.hm-shell[data-hm-role="parent"] .hm-shell-sidebar .hm-main-nav a,
body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar .hm-main-nav a,
body.hm-shell[data-hm-role="parent"] .app-sidebar .hm-main-nav a,
body.hm-shell[data-hm-parent-space="1"] .app-sidebar .hm-main-nav a {
  border-radius: 12px !important;
}

body.hm-shell[data-hm-role="parent"] .hm-shell-sidebar .hm-main-nav a:hover,
body.hm-shell[data-hm-role="parent"] .hm-shell-sidebar .hm-main-nav a:focus-visible,
body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar .hm-main-nav a:hover,
body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar .hm-main-nav a:focus-visible,
body.hm-shell[data-hm-role="parent"] .app-sidebar .hm-main-nav a:hover,
body.hm-shell[data-hm-role="parent"] .app-sidebar .hm-main-nav a:focus-visible,
body.hm-shell[data-hm-parent-space="1"] .app-sidebar .hm-main-nav a:hover,
body.hm-shell[data-hm-parent-space="1"] .app-sidebar .hm-main-nav a:focus-visible {
  background: var(--hm-purple-soft, #f1efff) !important;
  color: var(--hm-purple-dark, #493bbd) !important;
  text-decoration: none !important;
}

.hm-shell-sidebar .hm-main-nav a[data-parent-account-link].active,
.hm-shell-sidebar .hm-main-nav a[data-parent-account-link][aria-current="page"],
.app-sidebar .hm-main-nav a[data-parent-account-link].active,
.app-sidebar .hm-main-nav a[data-parent-account-link][aria-current="page"],
body.hm-shell[data-hm-role="parent"] .hm-shell-sidebar .hm-main-nav a.active,
body.hm-shell[data-hm-role="parent"] .hm-shell-sidebar .hm-main-nav a[aria-current="page"],
body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar .hm-main-nav a.active,
body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar .hm-main-nav a[aria-current="page"],
body.hm-shell[data-hm-role="parent"] .app-sidebar .hm-main-nav a.active,
body.hm-shell[data-hm-role="parent"] .app-sidebar .hm-main-nav a[aria-current="page"],
body.hm-shell[data-hm-parent-space="1"] .app-sidebar .hm-main-nav a.active,
body.hm-shell[data-hm-parent-space="1"] .app-sidebar .hm-main-nav a[aria-current="page"],
.hm-shell-sidebar .hm-main-nav.hm-parent-account-nav a.active,
.hm-shell-sidebar .hm-main-nav.hm-parent-account-nav a[aria-current="page"],
.app-sidebar .hm-main-nav.hm-parent-account-nav a.active,
.app-sidebar .hm-main-nav.hm-parent-account-nav a[aria-current="page"] {
  background: #ecebff !important;
  color: var(--hm-purple-dark, #493bbd) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar .hm-main-nav.hm-parent-account-nav,
body.hm-shell[data-hm-role="parent"] .hm-shell-sidebar .hm-main-nav.hm-parent-account-nav,
body.hm-shell[data-hm-parent-space="1"] .app-sidebar .hm-main-nav.hm-parent-account-nav {
  padding: 12px 4px 0 !important;
  border-top: 1px solid var(--hm-line, #dfe4f0) !important;
  margin-top: auto !important;
}

body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar .hm-main-nav.hm-parent-account-nav a,
body.hm-shell[data-hm-role="parent"] .hm-shell-sidebar .hm-main-nav.hm-parent-account-nav a,
body.hm-shell[data-hm-parent-space="1"] .app-sidebar .hm-main-nav.hm-parent-account-nav a,
body.hm-shell[data-hm-role="parent"] .app-sidebar .hm-main-nav.hm-parent-account-nav a {
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--hm-ink, #233247) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar .hm-main-nav.hm-parent-account-nav a:hover,
body.hm-shell[data-hm-parent-space="1"] .hm-shell-sidebar .hm-main-nav.hm-parent-account-nav a:focus-visible,
body.hm-shell[data-hm-role="parent"] .hm-shell-sidebar .hm-main-nav.hm-parent-account-nav a:hover,
body.hm-shell[data-hm-role="parent"] .hm-shell-sidebar .hm-main-nav.hm-parent-account-nav a:focus-visible,
body.hm-shell[data-hm-parent-space="1"] .app-sidebar .hm-main-nav.hm-parent-account-nav a:hover,
body.hm-shell[data-hm-parent-space="1"] .app-sidebar .hm-main-nav.hm-parent-account-nav a:focus-visible {
  background: var(--hm-purple-soft, #f1efff) !important;
  color: var(--hm-purple-dark, #493bbd) !important;
}

/* Progress/rewards page headers become the left rail — cancel page card chrome. */
body.hm-shell div.header.hm-shell-sidebar,
body.hm-shell .header.hm-shell-sidebar {
  max-width: var(--hm-sidebar-width, 272px) !important;
  background: #f7f7f8 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: 4px 0 18px rgba(35, 50, 71, .06) !important;
}

/* Kid learning soft-nav: keep the left menu, swap only the right panel. */
.app-main > .hm-kid-panel-frame {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 0;
  background: #fffdf8;
}
.app-main > .hm-kid-panel-frame[hidden] {
  display: none !important;
}
body.hm-kid-panel-active {
  overflow: hidden;
}
body.hm-kid-panel-active .app-main > :not(.hm-kid-panel-frame):not(.app-menu-toggle) {
  display: none !important;
}
body.hm-kid-panel-active .app-main {
  display: flex !important;
  flex-direction: column !important;
}

/* Pages loaded inside the kid right-panel iframe: content only, no second menu. */
html.hm-kid-embed,
html.hm-kid-embed body,
body.hm-kid-embed {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  overflow: auto !important;
  background: #fffdf8 !important;
}
html.hm-kid-embed .app-shell,
html.hm-kid-embed .app-sidebar,
html.hm-kid-embed .app-sidebar-backdrop,
html.hm-kid-embed .app-menu-toggle,
html.hm-kid-embed .app-sidebar-close,
html.hm-kid-embed .hm-shell-sidebar,
html.hm-kid-embed .hm-shell-bar,
html.hm-kid-embed .hm-shell-backdrop,
html.hm-kid-embed .hm-shell-close,
html.hm-kid-embed .hm-shell-menu,
html.hm-kid-embed .hm-skip-link,
html.hm-kid-embed .skip-link,
html.hm-kid-embed body > header,
html.hm-kid-embed body > .header,
html.hm-kid-embed body > .mock-header,
html.hm-kid-embed body > .finder-header,
html.hm-kid-embed body > .hm-site-header,
html.hm-kid-embed body > .topic-header,
body.hm-kid-embed .app-shell,
body.hm-kid-embed .app-sidebar,
body.hm-kid-embed .app-sidebar-backdrop,
body.hm-kid-embed .app-menu-toggle,
body.hm-kid-embed .hm-shell-sidebar,
body.hm-kid-embed .hm-shell-bar,
body.hm-kid-embed header.hm-site-header,
body.hm-kid-embed header.mock-header,
body.hm-kid-embed > header {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html.hm-kid-embed body.hm-shell,
body.hm-kid-embed.hm-shell,
html.hm-kid-embed body.hm-shell-app,
body.hm-kid-embed.hm-shell-app {
  padding-left: 0 !important;
  padding-top: 0 !important;
}
html.hm-kid-embed .app-main,
body.hm-kid-embed .app-main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
@media (max-width: 900px) {
  body.hm-kid-panel-active .app-main > .hm-kid-panel-frame {
    min-height: calc(100dvh - 56px);
  }
}

.hm-shell-sidebar .hm-nav-stage-menu {
  position: static;
  width: 100%;
}

.hm-shell-sidebar .hm-nav-stage-links {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  min-width: 0 !important;
  margin: 4px 0 8px;
  padding: 0 0 0 8px;
  border: 0 !important;
  border-left: 3px solid #ece7fb !important;
  border-radius: 0 12px 12px 0;
  background: transparent !important;
  box-shadow: none !important;
}

.hm-shell-sidebar .hm-main-nav .hm-nav-stage-links a {
  min-height: 40px;
  font-weight: 650 !important;
}

.hm-shell-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1.5px solid var(--hm-line, #dfe4f0);
  border-radius: 12px;
  background: #fff;
  color: var(--hm-ink, #233247);
  font-family: var(--hm-nav-font, "Nunito", "Segoe UI", sans-serif);
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
}

.hm-shell-bar {
  display: none;
  position: fixed;
  z-index: 45;
  top: 0;
  right: 0;
  left: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: var(--hm-shell-bar-height);
  padding: 8px 12px;
  border-bottom: 1px solid var(--hm-line, #dfe4f0);
  background: rgba(255, 250, 240, .97);
}

.hm-shell-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--hm-line, #dfe4f0);
  border-radius: 12px;
  background: #fff;
  color: var(--hm-ink, #233247);
  font-family: var(--hm-nav-font, "Nunito", "Segoe UI", sans-serif);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.hm-shell-backdrop {
  display: none;
  position: fixed;
  z-index: 35;
  inset: 0;
  background: rgba(35, 50, 71, .38);
}

.app-sidebar .hm-main-nav,
.app-sidebar .nav-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 4px;
  width: 100%;
  margin-top: auto;
  padding: 12px 4px 0;
  border-top: 1px solid var(--hm-line, #dfe4f0);
  overflow: visible;
  flex-wrap: nowrap;
}

.app-sidebar .hm-main-nav a,
.app-sidebar .hm-main-nav summary,
.app-sidebar .nav-links a {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 12px;
  color: var(--hm-ink, #233247) !important;
  text-align: left;
  white-space: normal !important;
}

.app-sidebar .hm-main-nav a[hidden] {
  display: none !important;
}

.app-sidebar .hm-main-nav a:hover,
.app-sidebar .hm-main-nav a:focus-visible,
.app-sidebar .hm-main-nav summary:hover,
.app-sidebar .nav-links a:hover {
  color: var(--hm-purple-dark, #493bbd) !important;
  background: var(--hm-purple-soft, #f1efff) !important;
}

.app-sidebar .hm-nav-stage-menu {
  position: static;
  width: 100%;
}

.app-sidebar .hm-nav-stage-links {
  position: static !important;
  left: auto !important;
  right: auto !important;
  min-width: 0 !important;
  margin: 4px 0 8px;
  padding: 0 0 0 8px;
  border: 0 !important;
  border-left: 3px solid #ece7fb !important;
  border-radius: 0 12px 12px 0;
  background: transparent !important;
  box-shadow: none !important;
}

.app-sidebar .hm-shell-role {
  margin: 0 6px 10px;
}

.app-sidebar,
.app-sidebar .logo,
.app-sidebar .tab,
.app-sidebar a,
.app-sidebar button,
.app-sidebar summary,
.hm-shell-sidebar,
.hm-shell-sidebar .logo,
.hm-shell-sidebar a,
.hm-shell-sidebar button,
.hm-shell-sidebar summary {
  font-family: var(--hm-kid-menu-font, "Nunito", "Segoe UI", sans-serif) !important;
}

.app-sidebar .tab,
.app-sidebar .hm-main-nav a,
.app-sidebar .hm-main-nav summary,
.hm-shell-sidebar .hm-kid-learning-nav a,
.hm-shell-sidebar .tabs a,
.hm-shell-sidebar .hm-main-nav a,
.hm-shell-sidebar .hm-main-nav summary {
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html.hm-shell-app-root,
html.hm-shell-app-root body {
  height: 100%;
}

body.hm-shell-app:not(.hm-app) {
  overflow: hidden;
}

body.hm-shell-app:not(.hm-app) .app-shell {
  display: flex;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}


/* Curriculum pages use the same fixed learner sidebar without inheriting the
   narrower article wrapper around the whole shell. Only the reading column is
   constrained, matching the rest of the public school pages. */
body.hm-article.hm-shell-app:not(.hm-app) > .app-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.hm-article.hm-shell-app:not(.hm-app) .app-main > main.ks1-page,
body.hm-article.hm-shell-app:not(.hm-app) .app-main > main.ks2-page,
body.hm-article.hm-shell-app:not(.hm-app) .app-main > main.ks3-page {
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.hm-shell-app:not(.hm-app) .app-sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 272px;
  align-self: flex-start;
  position: sticky;
  top: 0;
  width: 272px;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  padding: 14px 10px 18px;
  overflow: hidden;
  overflow-anchor: none;
  border-right: 1px solid var(--hm-line, #dfe4f0);
  background: #f7f7f8;
  z-index: 30;
}

body.hm-shell-app:not(.hm-app) .app-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: auto;
  background: #fffdf8;
}

body.hm-shell-app:not(.hm-app) .app-sidebar-backdrop {
  display: none;
}

body.hm-shell-app:not(.hm-app) .app-menu-toggle,
body.hm-shell-app:not(.hm-app) .app-sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border: 1.5px solid var(--hm-line, #dfe4f0);
  border-radius: 12px;
  background: #fff;
  color: var(--hm-ink, #233247);
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 901px) {
  body.hm-shell-app:not(.hm-app) .app-main > .header {
    display: none;
  }
}

@media (max-width: 900px) {
  body.hm-shell-app:not(.hm-app) {
    overflow: auto;
  }

  body.hm-shell-app:not(.hm-app) .app-shell {
    display: block;
    height: auto;
    min-height: 100%;
  }

  body.hm-shell-app:not(.hm-app) .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: min(288px, 86vw);
    flex-basis: auto;
    transform: translateX(-105%);
    box-shadow: 8px 0 24px rgba(24, 43, 73, .12);
  }

  body.app-sidebar-open.hm-shell-app:not(.hm-app) .app-sidebar {
    transform: none;
  }

  body.hm-shell-app:not(.hm-app) .app-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(24, 43, 73, .38);
  }

  body.app-sidebar-open.hm-shell-app:not(.hm-app) .app-sidebar-backdrop {
    display: block;
  }

  body.hm-shell-app:not(.hm-app) .app-menu-toggle,
  body.hm-shell-app:not(.hm-app) .app-sidebar-close {
    display: inline-flex;
  }

  body.hm-shell-app:not(.hm-app) .app-main {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
}

@media (max-width: 980px) {
  body.hm-shell:not(.hm-shell-app) {
    padding-left: 0;
  }

  body.hm-shell:not(.hm-shell-app) {
    padding-top: var(--hm-shell-bar-height);
  }

  body.hm-shell:not(.hm-shell-app) .hm-shell-sidebar {
    width: min(288px, 86vw) !important;
    max-width: min(288px, 86vw) !important;
    transform: translateX(-105%);
    box-shadow: 8px 0 24px rgba(24, 43, 73, .12) !important;
  }

  body.hm-shell-open:not(.hm-shell-app) .hm-shell-sidebar {
    transform: none !important;
    z-index: 50 !important;
  }

  body.hm-shell:not(.hm-shell-app) .hm-shell-bar { display: flex; }
  body.hm-shell:not(.hm-shell-app) .hm-shell-close { display: inline-flex; }
  body.hm-shell-open:not(.hm-shell-app) .hm-shell-backdrop { display: block; }
  body.hm-shell-open:not(.hm-shell-app) .hm-shell-bar { visibility: hidden; }

  .hm-shell-sidebar .nav-links a,
  .hm-shell-sidebar .hm-main-nav a,
  .hm-shell-sidebar .hm-main-nav summary {
    display: flex !important;
  }

  .hm-shell-sidebar .nav-links a[hidden],
  .hm-shell-sidebar .hm-main-nav a[hidden],
  .hm-shell-sidebar nav a[hidden] {
    display: none !important;
  }

  body.hm-shell-app .hm-shell-bar,
  body.hm-shell-app .hm-shell-backdrop,
  body.hm-shell-app .hm-shell-close {
    display: none !important;
  }
}

body.mock-page.hm-shell .exam-view,
body.mock-page.hm-shell .results-view {
  min-height: 100vh;
}

body.hm-register.hm-shell:not(.hm-shell-app),
body.hm-auth.hm-shell:not(.hm-shell-app) {
  align-items: stretch !important;
  justify-content: flex-start !important;
}

body.hm-register.hm-shell:not(.hm-shell-app) .register-container {
  margin: 32px auto;
}

@media (prefers-reduced-motion: reduce) {
  .hm-shell-sidebar {
    transition: none;
  }
}

/* SEND learning support. The same rules are injected by reading-support.js
   so a cached copy of this file still picks up the toggle. */
html.hm-send-dyslexia body,
html.hm-send-dyslexia button,
html.hm-send-dyslexia input,
html.hm-send-dyslexia textarea,
html.hm-send-dyslexia select {
  font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important;
}
html.hm-send-dyslexia body { line-height: 1.6; }
html.hm-send-large { zoom: 1.12; }
html.hm-send-xlarge { zoom: 1.28; }
html.hm-send-wide body { letter-spacing: 0.04em; word-spacing: 0.16em; line-height: 1.65; }
html.hm-send-cream body { background: #f7f1df !important; }
html.hm-send-links a { text-decoration: underline !important; text-underline-offset: 0.15em; }


/* Universal Homework Magic capybara brand consistency */
.hm-brand {
  display:inline-flex !important;
  align-items:center !important;
  width:105px !important;
  height:44px !important;
  margin-right:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  font-size:0 !important;
  line-height:0 !important;
  white-space:nowrap !important;
  background:url('/static/images/homework-magic-logo-header.webp?v=20261005-capybara') center / contain no-repeat !important;
  color:transparent !important;
  text-decoration:none !important;
}
.hm-brand > * { display:none !important; }
/* The generated learner sidebar is shared by app.html and curriculum pages.
   Keep its brand row identical everywhere instead of limiting the wordmark to
   body.hm-app. */
.app-sidebar .app-sidebar-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  padding: 0 6px !important;
  flex: 0 0 auto !important;
}
.app-sidebar .app-sidebar-head .logo {
  display: block !important;
  width: 160px !important;
  max-width: 160px !important;
  min-width: 0 !important;
  height: 68px !important;
  flex: 1 1 160px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-color: #fff !important;
  background-image: url('/static/images/homework-magic-logo-header.webp?v=20261005-capybara') !important;
  background-position: center center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
}
.app-sidebar .app-sidebar-head .logo:hover,
.app-sidebar .app-sidebar-head .logo:focus-visible { color:transparent !important; }
.app-sidebar .app-sidebar-head .logo img { display:none !important; }
.app-sidebar .app-sidebar-head .app-sidebar-close {
  margin-left:auto !important;
  flex:0 0 auto !important;
}

/* Keep the actual capybara wordmark as the single visible brand asset. */
.hm-brand .hm-brand-image { display:none !important; }


/* Stable capybara wordmark: keep the complete logo visible on every page. */
.hm-brand,
.hm-page .brand,
.hm-eleven .brand,
.hm-app .logo,
.hm-auth .auth-header > a,
.hm-register .logo,
.hm-page header > a[aria-label="Homework Magic home"] {
  width: 180px !important;
  height: 72px !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
}

body.hm-app .app-sidebar .app-sidebar-head .logo {
  width: 160px !important;
  height: 68px !important;
  flex-basis: 160px !important;
  max-width: 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}


/* Shared learner sidebar section labels. Keep them compact so the same menu
   fits on curriculum, homework, 11+/SEAG and progress pages. */
.app-sidebar .sidebar-hub,
.hm-shell-sidebar .sidebar-hub {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 2px;
  padding: 0 8px;
  color: #626b7a;
  font-family: var(--hm-kid-menu-font, "Nunito", "Segoe UI", sans-serif) !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: .015em;
}

/* 11+ and SEAG are one quiet drawer. It is closed until the learner opens it. */
.app-sidebar .prep-drawer,
.hm-shell-sidebar .prep-drawer,
.app-sidebar .homework-drawer,
.hm-shell-sidebar .homework-drawer,
.app-sidebar .grownup-drawer,
.hm-shell-sidebar .grownup-drawer {
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
}

.app-sidebar .sidebar-drawer-summary,
.hm-shell-sidebar .sidebar-drawer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: #e7f8f2;
  color: #176b52;
  font-family: var(--hm-kid-menu-font, "Nunito", "Segoe UI", sans-serif) !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.app-sidebar .sidebar-drawer-summary::-webkit-details-marker,
.hm-shell-sidebar .sidebar-drawer-summary::-webkit-details-marker {
  display: none;
}

.app-sidebar .sidebar-drawer-summary:hover,
.app-sidebar .sidebar-drawer-summary:focus-visible,
.hm-shell-sidebar .sidebar-drawer-summary:hover,
.hm-shell-sidebar .sidebar-drawer-summary:focus-visible {
  background: #cfeee4;
}

.app-sidebar .sidebar-drawer-summary:focus-visible,
.hm-shell-sidebar .sidebar-drawer-summary:focus-visible {
  outline: 3px solid rgba(47, 125, 225, .35);
  outline-offset: 2px;
}

.app-sidebar .sidebar-drawer-chevron,
.hm-shell-sidebar .sidebar-drawer-chevron {
  flex: 0 0 auto;
  transition: transform .16s ease;
}

.app-sidebar .prep-drawer[open] .sidebar-drawer-chevron,
.hm-shell-sidebar .prep-drawer[open] .sidebar-drawer-chevron,
.app-sidebar .homework-drawer[open] .sidebar-drawer-chevron,
.hm-shell-sidebar .homework-drawer[open] .sidebar-drawer-chevron,
.app-sidebar .grownup-drawer[open] .sidebar-drawer-chevron,
.hm-shell-sidebar .grownup-drawer[open] .sidebar-drawer-chevron {
  transform: rotate(180deg);
}

.app-sidebar .prep-drawer-content,
.hm-shell-sidebar .prep-drawer-content,
.app-sidebar .homework-drawer-content,
.hm-shell-sidebar .homework-drawer-content,
.app-sidebar .grownup-drawer-content,
.hm-shell-sidebar .grownup-drawer-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 5px 0 0;
  padding: 0 0 0 8px;
  border-left: 3px solid #d7efe7;
}

.app-sidebar .prep-drawer-content .tab,
.hm-shell-sidebar .prep-drawer-content .tab,
.app-sidebar .homework-drawer-content .tab,
.hm-shell-sidebar .homework-drawer-content .tab,
.app-sidebar .grownup-drawer-content > a,
.hm-shell-sidebar .grownup-drawer-content > a {
  width: 100%;
}

.app-sidebar .sidebar-drawer-summary-grownup,
.hm-shell-sidebar .sidebar-drawer-summary-grownup {
  background: #f1efff;
  color: #493bbd;
}

.app-sidebar .sidebar-drawer-summary-grownup:hover,
.app-sidebar .sidebar-drawer-summary-grownup:focus-visible,
.hm-shell-sidebar .sidebar-drawer-summary-grownup:hover,
.hm-shell-sidebar .sidebar-drawer-summary-grownup:focus-visible {
  background: #e4e0ff;
}

@media (max-width: 480px) {
  .hm-brand,
  .hm-page .brand,
  .hm-eleven .brand,
  .hm-app .logo,
  .hm-auth .auth-header > a,
  .hm-register .logo,
  .hm-page header > a[aria-label="Homework Magic home"] {
    width: 150px !important;
    height: 60px !important;
  }
  body.hm-app .app-sidebar .app-sidebar-head .logo {
    width: 150px !important;
    height: 64px !important;
    flex-basis: 150px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar .sidebar-drawer-chevron,
  .hm-shell-sidebar .sidebar-drawer-chevron {
    transition: none;
  }
}


/* Homework Magic unique, meaningful menu icons (2026-10-14).
   Match destinations, not their ordinal position: 11+ drawers and long menus
   must never reuse a fruit every five rows. Pure CSS; no icon downloads.
   Icons are decorative, so accessible text labels and links stay unchanged. */
.app-sidebar .tabs .tab,
.app-sidebar .hm-kid-learning-nav a,
.hm-shell-sidebar .hm-kid-learning-nav a,
.app-sidebar .hm-main-nav a,
.hm-shell-sidebar .hm-main-nav a,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content > a,
.hm-shell-sidebar .parent-dash-tabs .parent-dash-tab,
.hm-shell-sidebar .teacher-dash-tabs .teacher-dash-tab,
.hm-shell-sidebar .sa-nav > button,
.hm-shell-sidebar .sa-secondary-link,
.sa-side .sa-nav > button,
.sa-side .sa-secondary-link,
.sa-side .sa-account-nav > a {
  --hm-menu-icon: "✨";
}

:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) :is([data-tab="home"], [href="/app?tab=home"]) { --hm-menu-icon: "🍓"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) :is([data-tab="assigned-homework"], [href="/app?tab=assigned-homework"]) { --hm-menu-icon: "🍊"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) :is([data-tab="homework"], [href="/app?tab=homework"]) { --hm-menu-icon: "🍇"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) :is([data-tab="eleven"], [href="/app?tab=eleven"]) { --hm-menu-icon: "🍎"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) :is([data-tab="seag"], [href="/app?tab=seag"]) { --hm-menu-icon: "🥝"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) :is([data-tab="challenges"], [href="/app?tab=challenges"]) { --hm-menu-icon: "🏆"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) [href="/homework-mistakes"] { --hm-menu-icon: "🍐"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) [href="/elevenplus-mock-exams"] { --hm-menu-icon: "🍋"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) [href="/elevenplus-topic-mastery"] { --hm-menu-icon: "🫐"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) [href="/elevenplus-year-round-plan"] { --hm-menu-icon: "🍑"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) [href="/elevenplus-mistakes"] { --hm-menu-icon: "🍒"; }
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) [href="/elevenplus/articles"] { --hm-menu-icon: "🍍"; }

/* Keep the original GCSE book icon when its existing link moves inside Homework. */
:is(.app-sidebar, .hm-shell-sidebar) .homework-drawer-content .hm-gcse-practice-link { --hm-menu-icon: "📗"; }

/* The play/account links retain the same icons on every learner page. */
:is(.app-sidebar, .hm-shell-sidebar) .hm-main-nav #kid-progress-link,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content #kid-progress-link { --hm-menu-icon: "🌈"; }
:is(.app-sidebar, .hm-shell-sidebar) .hm-main-nav #kid-rewards-link,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content #kid-rewards-link { --hm-menu-icon: "🎁"; }
:is(.app-sidebar, .hm-shell-sidebar) .hm-main-nav #kid-playtime-link,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content #kid-playtime-link { --hm-menu-icon: "🐹"; }
:is(.app-sidebar, .hm-shell-sidebar) .hm-main-nav #kid-buddies-link,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content #kid-buddies-link { --hm-menu-icon: "🫶"; }
:is(.app-sidebar, .hm-shell-sidebar) .hm-main-nav #kid-team-race-link,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content #kid-team-race-link { --hm-menu-icon: "🏁"; }
:is(.app-sidebar, .hm-shell-sidebar) .hm-main-nav #parent-dashboard-link,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content #parent-dashboard-link { --hm-menu-icon: "🏠"; }
:is(.app-sidebar, .hm-shell-sidebar) .hm-main-nav #teacher-dashboard-link,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content #teacher-dashboard-link { --hm-menu-icon: "👩‍🏫"; }
:is(.app-sidebar, .hm-shell-sidebar) .hm-main-nav #home-login-link,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content #home-login-link { --hm-menu-icon: "🔑"; }
:is(.app-sidebar, .hm-shell-sidebar) .hm-main-nav #home-logout-link,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content #home-logout-link { --hm-menu-icon: "👋"; }

/* Adult dashboards also use a unique pictogram for each visible action. */
.hm-shell-sidebar #tab-children { --hm-menu-icon: "👧"; }
.hm-shell-sidebar #tab-screen-free { --hm-menu-icon: "🖨️"; }
.hm-shell-sidebar #tab-school { --hm-menu-icon: "🏫"; }
.hm-shell-sidebar #tab-report { --hm-menu-icon: "📈"; }
.hm-shell-sidebar #tab-requests { --hm-menu-icon: "💌"; }
.hm-shell-sidebar #parent-nav-child-rewards { --hm-menu-icon: "🎁"; }
.hm-shell-sidebar #parent-nav-child-progress { --hm-menu-icon: "🌈"; }
.hm-shell-sidebar #parent-nav-help-child-improve { --hm-menu-icon: "💡"; }
.hm-shell-sidebar #parent-nav-homework-tools { --hm-menu-icon: "📚"; }
.hm-shell-sidebar #parent-nav-manage-plan { --hm-menu-icon: "💳"; }
.hm-shell-sidebar #parent-nav-memory { --hm-menu-icon: "🧠"; }
.hm-shell-sidebar #parent-logout { --hm-menu-icon: "👋"; }
.hm-shell-sidebar #tab-classes { --hm-menu-icon: "🏫"; }
.hm-shell-sidebar #tab-manage-students { --hm-menu-icon: "👥"; }
.hm-shell-sidebar #tab-homework-stats { --hm-menu-icon: "📝"; }
.hm-shell-sidebar #tab-print-homework { --hm-menu-icon: "🖨️"; }
.hm-shell-sidebar #tab-assign { --hm-menu-icon: "📬"; }
.hm-shell-sidebar #tab-class-stats { --hm-menu-icon: "📊"; }
.hm-shell-sidebar #tab-learning-summary { --hm-menu-icon: "📈"; }
.hm-shell-sidebar #tab-eleven-plus-coach { --hm-menu-icon: "🍉"; }
.hm-shell-sidebar #teacher-nav-homework-tools { --hm-menu-icon: "📚"; }
.hm-shell-sidebar #teacher-nav-school-admin { --hm-menu-icon: "🛠️"; }
.hm-shell-sidebar #teacher-logout { --hm-menu-icon: "👋"; }
:is(.hm-shell-sidebar, .sa-side) .sa-nav button[data-sa-view="dashboard"] { --hm-menu-icon: "🏠"; }
:is(.hm-shell-sidebar, .sa-side) .sa-nav button[data-sa-view="teachers"] { --hm-menu-icon: "👩‍🏫"; }
:is(.hm-shell-sidebar, .sa-side) .sa-nav button[data-sa-view="classes"] { --hm-menu-icon: "🏫"; }
:is(.hm-shell-sidebar, .sa-side) .sa-nav button[data-sa-view="more"] { --hm-menu-icon: "⚙️"; }
:is(.hm-shell-sidebar, .sa-side) .sa-secondary-link[href="/teacher-dashboard"] { --hm-menu-icon: "📊"; }
:is(.hm-shell-sidebar, .sa-side) .sa-secondary-link[href="/app"] { --hm-menu-icon: "📚"; }
:is(.hm-shell-sidebar, .sa-side) .sa-secondary-link[href="/teachers"] { --hm-menu-icon: "📖"; }
:is(.hm-shell-sidebar, .sa-side) #school-admin-logout { --hm-menu-icon: "👋"; }
.app-sidebar .tabs > .tab::before,
.app-sidebar .tabs .prep-drawer-content .tab::before,
.app-sidebar .tabs .homework-drawer-content .tab::before,
.app-sidebar .hm-kid-learning-nav a::before,
.hm-shell-sidebar .hm-kid-learning-nav a::before,
.app-sidebar .hm-main-nav > a::before,
.hm-shell-sidebar .hm-main-nav > a::before,
:is(.app-sidebar, .hm-shell-sidebar) .grownup-drawer-content > a::before,
.hm-shell-sidebar .parent-dash-tabs > .parent-dash-tab::before,
.hm-shell-sidebar .teacher-dash-tabs > .teacher-dash-tab::before,
.hm-shell-sidebar .sa-nav > button::before,
.hm-shell-sidebar .sa-secondary-link::before,
.sa-side .sa-nav > button::before,
.sa-side .sa-secondary-link::before,
.sa-side .sa-account-nav > a::before {
  content: var(--hm-menu-icon, "✨");
  display: inline-block;
  width: 1.55em;
  flex: 0 0 1.55em;
  margin-right: .5em;
  text-align: center;
  font-size: 1.17em;
  line-height: 1;
  vertical-align: -0.05em;
  filter: drop-shadow(0 1px 1px rgba(37,22,58,.11));
  pointer-events: none;
}
/* Hide original school-admin pictograms only when their replacement is shown. */
.hm-shell-sidebar .sa-nav .sa-nav-icon,
.sa-side .sa-nav .sa-nav-icon { display: none; }
/* The 11+ and grown-up summary icons differ from their nested choices. */
.app-sidebar .sidebar-drawer-summary::before,
.hm-shell-sidebar .sidebar-drawer-summary::before {
  content: "🍉";
  margin-right: .5em;
  font-size: 1.15em;
}
.app-sidebar .sidebar-drawer-summary-homework::before,
.hm-shell-sidebar .sidebar-drawer-summary-homework::before {
  content: "🍇";
}
.app-sidebar .sidebar-drawer-summary-grownup::before,
.hm-shell-sidebar .sidebar-drawer-summary-grownup::before {
  content: "👨‍👩‍👧";
}

/* Homework drawer matches the 11+ drawer but has its own fruit and purple colour. */
.app-sidebar .sidebar-drawer-summary-homework,
.hm-shell-sidebar .sidebar-drawer-summary-homework {
  background: #f0edff;
  color: #493bbd;
}
.app-sidebar .sidebar-drawer-summary-homework:hover,
.hm-shell-sidebar .sidebar-drawer-summary-homework:hover,
.app-sidebar .sidebar-drawer-summary-homework:focus-visible,
.hm-shell-sidebar .sidebar-drawer-summary-homework:focus-visible {
  background: #e3ddff;
}
.app-sidebar .sidebar-drawer-summary-homework.active,
.hm-shell-sidebar .sidebar-drawer-summary-homework.active {
  background: #dcd3ff;
}
.app-sidebar .homework-drawer-content,
.hm-shell-sidebar .homework-drawer-content {
  border-left-color: #dcd3ff;
}
/* Challenges is a sibling of 11+ & SEAG Prep, never a nested green submenu item. */
.app-sidebar .tabs > .tab-group-challenges,
.hm-shell-sidebar .hm-kid-learning-nav > .tab-group-challenges {
  background: #fffaef;
  color: #493bbd;
  font-weight: 800;
}
.app-sidebar .tabs > .tab-group-challenges:hover,
.app-sidebar .tabs > .tab-group-challenges:focus-visible,
.hm-shell-sidebar .hm-kid-learning-nav > .tab-group-challenges:hover,
.hm-shell-sidebar .hm-kid-learning-nav > .tab-group-challenges:focus-visible {
  background: #f0ebff;
}
.app-sidebar .tabs > .tab-group-challenges.active,
.hm-shell-sidebar .hm-kid-learning-nav > .tab-group-challenges.active {
  background: #e5ddff;
}

/* GCSE Practice sits between 11+ & SEAG Prep and Challenges. */
.app-sidebar .gcse-drawer,
.hm-shell-sidebar .gcse-drawer {
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
}
.app-sidebar .gcse-drawer[open] .sidebar-drawer-chevron,
.hm-shell-sidebar .gcse-drawer[open] .sidebar-drawer-chevron {
  transform: rotate(180deg);
}
.app-sidebar .gcse-drawer-content,
.hm-shell-sidebar .gcse-drawer-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 5px 0 0;
  padding: 0 0 0 8px;
  border-left: 3px solid #dcd3ff;
}
.app-sidebar .gcse-drawer-content .tab,
.hm-shell-sidebar .gcse-drawer-content .tab {
  width: 100%;
}
.app-sidebar .tabs .gcse-drawer-content .tab::before,
.hm-shell-sidebar .tabs .gcse-drawer-content .tab::before {
  content: "📗";
  display: inline-block;
  width: 1.55em;
  flex: 0 0 1.55em;
  margin-right: .5em;
  text-align: center;
  font-size: 1.17em;
}
.app-sidebar .sidebar-drawer-summary-gcse::before,
.hm-shell-sidebar .sidebar-drawer-summary-gcse::before {
  content: "📗";
}
.app-sidebar .sidebar-drawer-summary-gcse,
.hm-shell-sidebar .sidebar-drawer-summary-gcse {
  background: #f0edff;
  color: #493bbd;
}
.app-sidebar .sidebar-drawer-summary-gcse:hover,
.hm-shell-sidebar .sidebar-drawer-summary-gcse:hover,
.app-sidebar .sidebar-drawer-summary-gcse:focus-visible,
.hm-shell-sidebar .sidebar-drawer-summary-gcse:focus-visible {
  background: #e3ddff;
}
.app-sidebar .sidebar-drawer-summary-gcse.active,
.hm-shell-sidebar .sidebar-drawer-summary-gcse.active {
  background: #dcd3ff;
}

/* Top-level learner sections share the same icon, label start and horizontal rhythm. */
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) > :is(.homework-drawer, .prep-drawer, .gcse-drawer, .grownup-drawer) {
  margin: 0;
  box-sizing: border-box;
}
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) > :is(.homework-drawer, .prep-drawer, .gcse-drawer, .grownup-drawer) > .sidebar-drawer-summary {
  justify-content: flex-start;
  min-height: 48px;
  padding: 11px 12px;
  box-sizing: border-box;
}
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) > :is(.homework-drawer, .prep-drawer, .gcse-drawer, .grownup-drawer) > .sidebar-drawer-summary > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) > :is(.homework-drawer, .prep-drawer, .gcse-drawer, .grownup-drawer) > .sidebar-drawer-summary::before {
  content: "🍉";
  display: inline-block;
  flex: 0 0 1.55em;
  width: 1.55em;
  margin-right: .5em;
  text-align: center;
  font-size: 1.17em;
  line-height: 1;
}
:is(.app-sidebar, .hm-shell-sidebar) .sidebar-drawer-summary-homework::before { content: "🍇" !important; }
:is(.app-sidebar, .hm-shell-sidebar) .sidebar-drawer-summary-gcse::before { content: "🍊" !important; }
/* GCSE Mistakes is a subitem, with its own fruit. */
:is(.app-sidebar, .hm-shell-sidebar) .gcse-drawer-content .tab::before { content: "🍐" !important; }

/* Match Today for the three learner section labels, while preserving
   their individual colours, fruit icons and expandable navigation. */
:is(.app-sidebar, .hm-shell-sidebar) :is(.homework-drawer, .prep-drawer, .gcse-drawer)
  > .sidebar-drawer-summary,
:is(.app-sidebar, .hm-shell-sidebar) :is(.homework-drawer, .prep-drawer, .gcse-drawer)
  > .sidebar-drawer-summary > span:first-child {
  font-family: var(--hm-kid-menu-font, "Nunito", "Segoe UI", sans-serif) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* GCSE Mistakes uses exactly the same purple ink as GCSE Practice, including
   focus/hover and the currently selected state. */
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) .gcse-drawer-content a.tab,
:is(.app-sidebar, .hm-shell-sidebar) :is(.tabs, .hm-kid-learning-nav) .gcse-drawer-content a.tab:is(:hover, :focus-visible, .active, [aria-current="page"]) {
  color: #493bbd !important;
}

/* World Explorer now shares every other top-level menu's icon-to-label gap.
   Hide the previous embedded globe if an older cached script still creates it. */
.app-sidebar .tabs > .hm-learning-path-nav,
.hm-shell-sidebar .hm-kid-learning-nav .hm-learning-path-nav { --hm-menu-icon: "🗺️"; }
.app-sidebar .tabs > .hm-world-explorer-nav,
.hm-shell-sidebar .hm-kid-learning-nav .hm-world-explorer-nav { --hm-menu-icon: "🌍"; }
:is(.app-sidebar, .hm-shell-sidebar) .hm-world-explorer-nav > .hm-world-explorer-nav-icon {
  display: none !important;
}

/* Pupil navigation: Me follows Challenges, while Log out remains at the foot. */
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer[hidden] { display: none !important; }
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer > .sidebar-drawer-summary {
  justify-content: flex-start;
  background: #f1efff;
  color: #493bbd;
  min-height: 48px;
  padding: 11px 12px;
  font-weight: 700 !important;
}
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer > .sidebar-drawer-summary:hover,
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer > .sidebar-drawer-summary:focus-visible {
  background: #e3ddff;
}
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer > .sidebar-drawer-summary::before {
  content: "🧸" !important;
  display: inline-block;
  flex: 0 0 1.55em;
  width: 1.55em;
  margin-right: .5em;
  text-align: center;
  font-size: 1.17em;
}
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer > .sidebar-drawer-summary > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer[open] .sidebar-drawer-chevron {
  transform: rotate(180deg);
}
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 5px 0 0;
  padding-left: 8px;
  border-left: 3px solid #dcd3ff;
}
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content .tab {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  color: #493bbd;
  background: #f8f6ff;
  text-decoration: none;
}
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content .tab:hover,
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content .tab:focus-visible,
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content .tab.active {
  background: #e3ddff;
}
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content #kid-progress-link { --hm-menu-icon: "🌈"; }
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content #kid-rewards-link { --hm-menu-icon: "🎁"; }
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content #kid-playtime-link { --hm-menu-icon: "🐹"; }
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content #kid-buddies-link { --hm-menu-icon: "🫶"; }
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content .tab::before {
  content: var(--hm-menu-icon, "✨");
  display: inline-block;
  flex: 0 0 1.55em;
  width: 1.55em;
  margin-right: .5em;
  text-align: center;
  font-size: 1.17em;
  line-height: 1;
}
:is(.app-sidebar, .hm-shell-sidebar) .me-drawer-content a[hidden] { display: none !important; }
:is(.app-sidebar, .hm-shell-sidebar) .hm-main-nav > #home-logout-link {
  margin-top: auto;
  --hm-menu-icon: "👋";
}

/* Pupil sidebar: one icon-to-text gap for all rows, including World Explorer.
   Parent and teacher navigation is deliberately excluded. */
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) {
  --hm-pupil-icon-width: 1.35em;
  --hm-pupil-icon-gap: .18em;
}
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) .tab::before,
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > :is(.homework-drawer, .prep-drawer, .gcse-drawer, .grownup-drawer, .me-drawer) > .sidebar-drawer-summary::before,
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) .me-drawer-content .tab::before {
  width: var(--hm-pupil-icon-width) !important;
  flex: 0 0 var(--hm-pupil-icon-width) !important;
  margin-right: var(--hm-pupil-icon-gap) !important;
}

/* Give adjacent top-level pupil destinations their own gentle background.
   Submenu links retain their existing colour coding and active states. */
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > :is(.tab[data-tab="home"], a[href="/app?tab=home"]) {
  background: #fff7e6 !important;
  color: #77510d !important;
}
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > :is(.tab, a.tab).hm-world-explorer-nav {
  background: #e4f6ee !important;
  color: #126a55 !important;
}
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > :is(.tab, a.tab).hm-learning-path-nav {
  background: #eeebff !important;
  color: #493bbd !important;
}
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > :is(.tab[data-tab="assigned-homework"], a[href="/app?tab=assigned-homework"]) {
  background: #fff0e4 !important;
  color: #904519 !important;
}
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > .homework-drawer > .sidebar-drawer-summary {
  background: #eaf1ff !important;
  color: #334e92 !important;
}
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > :is(.tab[data-tab="eleven"], a[href="/app?tab=eleven"]) {
  background: #e4f6ef !important;
  color: #176b52 !important;
}
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > :is(.tab[data-tab="seag"], a[href="/app?tab=seag"]) {
  background: #fff1df !important;
  color: #9a3412 !important;
}
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > :is(.tab[data-tab="challenges"], a[href="/app?tab=challenges"]) {
  background: #ffeaf2 !important;
  color: #8b3155 !important;
}
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > .me-drawer > .sidebar-drawer-summary {
  background: #f2edff !important;
  color: #493bbd !important;
}
/* Preserve a clearer active destination and a visible hover/keyboard cue. */
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > :is(.tab, a.tab):is(:hover, :focus-visible, .active, [aria-current="page"]),
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > :is(.homework-drawer, .prep-drawer, .me-drawer) > .sidebar-drawer-summary:is(:hover, :focus-visible, .active, [aria-current="page"]),
:is(.app-sidebar .tabs, .hm-shell-sidebar .hm-kid-learning-nav) > .me-drawer[open] > .sidebar-drawer-summary {
  filter: saturate(1.08) brightness(.96);
  box-shadow: inset 3px 0 0 currentColor;
}
/* The standalone 11+ shortcuts are consecutive top-level rows on /app;
   alternate their soft tones so they don't look like a single solid block. */
.app-sidebar .tabs > a.tab.tab-group-eleven:nth-child(odd):not(.active):not([aria-current="page"]) {
  background: #f0efff !important;
  color: #493bbd !important;
}