/* MathLab navigation fixes (Phase 3, Nov 2026), loaded last with ml-nav.1.js. Screen only. */
@media screen {
  /* Skip link on rebuilt course and lesson pages: hidden until focused, same look as the main site's */
  .ml-skip { position: absolute; left: -999px; top: 8px; z-index: 1000; background: #c8f03c; color: #0b1425; padding: 8px 14px; border-radius: 8px; font: 700 15px/1.2 "DM Sans", Arial, sans-serif; text-decoration: none; }
  .ml-skip:focus { left: 12px; outline: 3px solid #0b1425; outline-offset: 2px; }

  /* Headings that receive focus after a page change: no ring for mouse/touch, a clear ring for keyboard */
  .ml-nav-target:focus { outline: none; }
  .ml-nav-target:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

  /* Idea links: the idea lands at the top with a short highlight */
  [data-panel="learn"] section.part { scroll-margin-top: 12px; }
  #em-idea, #vp-worked-example { scroll-margin-top: 84px; }
  section.part.ml-idea-hit { box-shadow: 0 0 0 2px #c8f03c; border-radius: 14px; transition: box-shadow .4s; }
  @media (prefers-reduced-motion: reduce) { section.part.ml-idea-hit { transition: none; } }

  /* Something continues sideways: fade the cut edge (works in both themes) */
  [data-ml-more-right] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  [data-ml-more-left] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  [data-ml-more-left][data-ml-more-right] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}
/* Lesson tab bar on phones: the four tabs share the width, so "Challenge" is no longer cut off from 375 px up;
   on narrower screens the bar still scrolls and its cut edge fades (see [data-ml-more-right] above) */
@media screen and (max-width: 520px) {
  .topbar .tabs .tab { flex: 1 0 auto; padding-left: 6px; padding-right: 6px; }
}
@media screen and (max-width: 374px) {
  .topbar .tabs .tab { padding-left: 4px; padding-right: 4px; }
}

/* ---------- Version 2 ---------- */
@media screen {
  /* Footer: links the site marks hidden (Chapter review tests for non-teachers) stay hidden; a footer rule used to show them */
  footer a[hidden] { display: none !important; }
  footer br:has(+ a[hidden]) { display: none; }

  /* "Courses" menu and Search on rebuilt pages: the header is navy in both themes, so fixed colors */
  .ml-cmenu { position: relative; display: inline-flex; }
  .ml-cmenu-btn, .ml-lsearch-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid rgba(234, 240, 248, .28) !important; border-radius: 999px !important; background: rgba(255, 255, 255, .04) !important; color: #eaf0f8 !important; font: 500 15px/1 "DM Sans", "IBM Plex Sans", Arial, sans-serif; cursor: pointer; white-space: nowrap; }
  .ml-cmenu-btn svg { width: 14px; height: 14px; transition: transform .15s; }
  .ml-cmenu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ml-lsearch-btn svg { width: 15px; height: 15px; }
  .ml-cmenu-btn:hover, .ml-lsearch-btn:hover { background: rgba(255, 255, 255, .09) !important; }
  .ml-cmenu-btn:focus-visible, .ml-lsearch-btn:focus-visible { outline: 2px solid #c8f03c; outline-offset: 2px; }
  .ml-cmenu-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1200; min-width: 220px; padding: 8px; border: 1px solid #304670; border-radius: 14px; background: #14223f; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
  .ml-cmenu-panel[hidden] { display: none; }
  .ml-cmenu-panel ul { list-style: none; margin: 0; padding: 0; }
  .ml-cmenu-panel a { display: block; padding: 10px 12px; border-radius: 9px; color: #eaf0f8 !important; font: 500 15px/1.3 "IBM Plex Sans", Arial, sans-serif; text-decoration: none; }
  .ml-cmenu-panel a:hover, .ml-cmenu-panel a:focus-visible { background: rgba(255, 255, 255, .08); outline: none; box-shadow: inset 0 0 0 2px #c8f03c; }
  .ml-cmenu-panel a[aria-current] { box-shadow: inset 3px 0 0 #c8f03c; }
  .ml-cmenu-panel .ml-cmenu-all { margin-top: 6px; padding-top: 12px; border-top: 1px solid #304670; border-radius: 0 0 9px 9px; color: #b3c1d6 !important; }
  .ml-ntools { display: inline-flex; align-items: center; gap: 8px; }
  .topbar .ml-ntools { margin-left: auto; margin-right: 8px; }
  .topbar .ml-cmenu-btn, .topbar .ml-lsearch-btn { height: 38px; font-size: 14.5px; }

  /* Search dialog on rebuilt pages */
  .ml-ls-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(5, 12, 26, .62); display: flex; justify-content: center; align-items: flex-start; padding: 9vh 16px 16px; }
  .ml-ls-overlay[hidden] { display: none; }
  html.ml-ls-open { overflow: hidden; }
  .ml-ls-box { width: min(640px, 100%); max-height: 78vh; display: flex; flex-direction: column; border: 1px solid #304670; border-radius: 16px; background: #14223f; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); overflow: hidden; color: #eaf0f8; }
  .ml-ls-input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #304670; }
  .ml-ls-input svg { width: 18px; height: 18px; color: #b3c1d6; flex: none; }
  .ml-ls-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #eaf0f8; font: 400 17px/1.4 "IBM Plex Sans", Arial, sans-serif; }
  .ml-ls-input input::placeholder { color: #8fa1bd; }
  .ml-ls-input button { all: unset; cursor: pointer; padding: 4px 9px; border: 1px solid #304670; border-radius: 7px; color: #b3c1d6; font: 500 13px/1 "DM Sans", Arial, sans-serif; }
  .ml-ls-input button:focus-visible { outline: 2px solid #c8f03c; }
  .ml-ls-list { overflow-y: auto; padding: 6px; }
  .ml-ls-list a { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 10px 12px; border-radius: 10px; color: #eaf0f8 !important; text-decoration: none; }
  .ml-ls-list a b { font: 600 15px/1.35 "IBM Plex Sans", Arial, sans-serif; }
  .ml-ls-list a small { grid-column: 2; color: #b3c1d6; font-size: 13px; line-height: 1.4; }
  .ml-ls-list a.active, .ml-ls-list a:hover, .ml-ls-list a:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
  .ml-ls-list a.active { box-shadow: inset 3px 0 0 #c8f03c; }
  .ml-ls-tag { grid-row: span 2; align-self: start; padding: 3px 7px; border-radius: 6px; background: rgba(44, 197, 179, .16); color: #6fe3d4; font: 600 12px/1.3 "DM Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
  .ml-ls-empty { margin: 0; padding: 18px 14px; color: #b3c1d6; }
}
/* Phones: the menu button gets compact; "Search" on rebuilt pages keeps only its icon */
@media screen and (max-width: 600px) {
  .ml-cmenu-btn, .ml-lsearch-btn { height: 38px; padding: 0 11px; font-size: 14px; }
  .ml-lsearch-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ml-cmenu-panel { left: 0; right: auto; min-width: 210px; max-width: calc(100vw - 32px); }
}
@media print { .ml-cmenu, .ml-lsearch-btn, .ml-ls-overlay { display: none !important; } }