/* Shared course-space layout only. Existing routes, search IDs, active/locked
   states and progress handlers stay owned by each hand-maintained page.
   All nine destinations remain visible; no scrolling or clipped tab labels. */
body[data-course-shell] :is(.hubbar,.snav,.course-header),
body[data-course-shell="guides"] .top {
  background:rgba(11,16,32,.96);
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#fff;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  position:sticky;
  top:0;
  z-index:40;
}
body[data-course-shell] :is(.hubbar .row,.snav .row,.header-row),
body[data-course-shell="guides"] .top .row {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"brand utility" "spaces spaces";
  align-items:center;
  gap:10px 16px;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:10px 24px 12px;
  position:relative;
}
body[data-course-shell] :is(.hubbar .brand,.snav .brand,.header-row .brand),
body[data-course-shell="guides"] .top .brand {
  grid-area:brand;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  margin:0;
  padding:0;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}
body[data-course-shell] :is(.hubbar .brand,.snav .brand,.header-row .brand) img,
body[data-course-shell="guides"] .top .brand img {width:34px;height:34px;display:block;flex:none}
body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav),
body[data-course-shell="guides"] .top .seg {
  grid-area:spaces;
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  align-items:stretch;
  gap:4px;
  width:100%;
  min-width:0;
  max-width:100%;
  margin:0;
  padding:4px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:rgba(255,255,255,.06);
  overflow:visible;
  scrollbar-width:none;
}
body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav) > a,
body[data-course-shell="guides"] .top .seg > a {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
  min-height:44px;
  height:auto;
  margin:0;
  padding:8px 9px;
  border:0;
  border-radius:20px;
  background:transparent;
  color:rgba(255,255,255,.82);
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:anywhere;
  text-wrap:balance;
  transition:background .18s,color .18s;
}
body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav) > a:hover,
body[data-course-shell="guides"] .top .seg > a:hover {background:rgba(255,255,255,.1);color:#fff;text-decoration:none}
body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav) > a[aria-current="page"],
body[data-course-shell="guides"] .top .seg > a[aria-current="page"] {background:#fff;color:#0B1020;font-weight:600}
body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav) .n,
body[data-course-shell="guides"] .top .seg .n {flex:none;font-size:11px;font-weight:700;background:rgba(255,198,41,.22);color:#FFE08A;border-radius:999px;padding:1px 7px;line-height:1.5}
body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav) > a[aria-current="page"] .n,
body[data-course-shell="guides"] .top .seg > a[aria-current="page"] .n {background:#FFF1C2;color:#6D2E46}
body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav) > a:focus-visible,
body[data-course-shell="guides"] .top .seg > a:focus-visible {outline:3px solid #FFC629;outline-offset:-3px}
body[data-course-shell] :is(.hubbar .sbtn,.snav .sbtn),
body[data-course-shell="guides"] .top .sbtn {grid-area:utility;position:static;justify-self:end;margin:0 112px 0 0;width:36px;height:36px;flex:none}
body[data-course-shell] :is(.hubbar .sbox,.snav .sbox),
body[data-course-shell="guides"] .top .sbox {right:24px;top:100%;z-index:60}
body[data-course-shell="hub"] > .lang,
body[data-course-shell="guides"] > .langbar,
body[data-course-shell="lessons"]:has(.snav) > .langbar {top:10px;right:max(24px,calc((100vw - 1280px)/2 + 24px));z-index:50}
body[data-course-shell="backup"] .languages {grid-area:utility;position:static;justify-self:end;margin:0;order:0;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.14);background:rgba(11,16,32,.72);border-radius:999px}
body[data-course-shell="backup"] .languages button {min-height:0;padding:6px 13px;font-size:12px;line-height:1.55;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.8)}
body[data-course-shell="backup"] .languages button[aria-pressed="true"] {background:#fff;color:#0B1020}
body[data-course-shell="backup"] .skip {z-index:70}
/* Module shortcuts must not sit under the taller, two-tier course header. */
body[data-course-shell="lessons"] .chips {position:static}
body[data-course-shell="lessons"] .mod {scroll-margin-top:180px}
body[data-course-shell="hub"] :is(#pre-tiles,#next-steps,[id^="paso-"]) {scroll-margin-top:180px}
/* The live-session date tabs wrap too; no separate sideways tab strip. */
body[data-course-shell="lessons"] .atabs {flex-wrap:wrap;overflow:visible}
body[data-course-shell="lessons"] .atabs .agrp {flex-wrap:wrap;max-width:100%;box-sizing:border-box}
/* #live is also the offscreen status announcer. Keep that native fragment
   at the page start without changing its accessibility or any route handler. */
body[data-course-shell="lessons"] > #live.sr {top:0}
/* Nine tabs between 1024 and 1279 px (e.g. a 1366 laptop at 125 %): the count
   badge moves under its label so whole words fit; words never split. */
@media(min-width:1024px) and (max-width:1279px){
  body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav),
  body[data-course-shell="guides"] .top .seg {gap:3px}
  body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav) > a,
  body[data-course-shell="guides"] .top .seg > a {flex-direction:column;gap:2px;padding:6px 4px;font-size:12.5px;line-height:1.25;overflow-wrap:normal;word-break:normal;hyphens:none}
  body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav) .n,
  body[data-course-shell="guides"] .top .seg .n {font-size:10px;padding:0 6px}
}
@media(max-width:1023px){
  body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav),
  body[data-course-shell="guides"] .top .seg {grid-template-columns:repeat(3,minmax(0,1fr));border-radius:20px}
}
@media(max-width:600px){
  /* A tall sticky header would obscure the lesson on a phone. */
  body[data-course-shell] :is(.hubbar,.snav,.course-header),
  body[data-course-shell="guides"] .top {position:relative}
  body[data-course-shell] :is(.hubbar .row,.snav .row,.header-row),
  body[data-course-shell="guides"] .top .row {padding:10px 12px 12px;gap:10px 8px}
  body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav),
  body[data-course-shell="guides"] .top .seg {grid-template-columns:repeat(3,minmax(0,1fr));border-radius:18px}
  body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav) > a,
  body[data-course-shell="guides"] .top .seg > a {padding:7px 5px;border-radius:14px;font-size:12.5px;flex-direction:column;gap:2px;overflow-wrap:normal}
  body[data-course-shell] :is(.hubbar .sbtn,.snav .sbtn),
  body[data-course-shell="guides"] .top .sbtn {margin-right:100px}
  body[data-course-shell="hub"] > .lang,
  body[data-course-shell="guides"] > .langbar,
  body[data-course-shell="lessons"]:has(.snav) > .langbar {position:absolute;right:12px}
  body[data-course-shell="lessons"] .mod {scroll-margin-top:12px}
  body[data-course-shell="hub"] :is(#pre-tiles,#next-steps,[id^="paso-"]) {scroll-margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
  body[data-course-shell] :is(.hubbar .seg,.snav .seg,.course-nav) > a,
  body[data-course-shell="guides"] .top .seg > a {transition:none}
}
@media print{
  body[data-course-shell] :is(.hubbar,.snav,.course-header),
  body[data-course-shell="guides"] .top {display:none}
}