/* KIDTECHLABS Campus v2 (home, "Our solutions"; scenes/campus.js): the school campus in the hub
   markup the metro left (#lab-metro, metro-* classes: the lab pages' "Back to campus" links, the
   return scripts and metro.css's hub, controls and card styles carry over). These rules add the v2
   layer: the static poster (while it builds, and as the fallback), the lab labels, the toolbar and
   its popovers, Skip intro, the phone lab selector, the docked lab card with its activity stepper
   and hero panel, and the HTML list of the labs. Brand colours only (coral, yellow, sky, navy,
   white); every control is a 44 px target on touch screens and shows a clear keyboard focus. */
.campus-hub { --metro-mission-box: 0px; --metro-mission-gap: 0px; }
.campus-hub .metro-mission, .campus-hub .metro-legend, .campus-hub .metro-tags, .campus-hub .metro-labels, .campus-hub .metro-glimpse, .campus-hub .metro-bubble, .campus-hub .metro-hotspots, .campus-hub .metro-poster { display: none !important; }
.campus-hub .campus-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.campus-hub .metro-stage,
.home .solutions-combined .campus-hub .metro-stage { background: linear-gradient(180deg, #F3F9FC 0%, #F4EFE6 52%, #EFE7D9 100%); }

/* ---------- the poster: the campus as a still picture while the 3D builds (and the fallback) */
.campus-poster { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; transition: opacity 0.6s ease; }
.campus-poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.campus-hub[data-ready="true"] .campus-poster { opacity: 0; }
.campus-hub[data-ready="true"] .metro-canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .campus-poster { transition: none; } }

/* ---------- the lab labels: every place's full name on a white chip on its own building (placed by the
   scene: nudged apart where they would overlap, a leader line and a dot tie each chip to its roof; a
   place outside the frame gets an edge chip with an arrow toward it) */
.campus-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.campus-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.campus-leader-halo { stroke: #fff; stroke-opacity: 0.85; stroke-width: 4.2; stroke-linecap: round; }
.campus-leader { stroke: #1E2942; stroke-opacity: 0.78; stroke-width: 1.7; stroke-linecap: round; }
.campus-leader-dot { fill: #fff; stroke: #1E2942; stroke-width: 1.8; }
.campus-label {
  --tone: var(--coral);
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 15px 0 5px;
  border: 0; border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap;
  font: 600 15.5px/1 var(--heading-font); letter-spacing: -0.005em; visibility: hidden; pointer-events: auto;
  box-shadow: 0 0 0 1px rgba(30, 41, 66, 0.16), 0 2px 4px rgba(23, 44, 67, 0.12), 0 8px 18px -8px rgba(23, 44, 67, 0.45);
  transition: opacity 0.25s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* (the hit area: at least 44 px round the chip) */
.campus-label::before { content: ""; position: absolute; left: -4px; right: -4px; top: -4px; bottom: -4px; border-radius: 999px; }
.campus-label[data-mode="on"], .campus-label[data-mode="edge"] { visibility: visible; }
.campus-label[data-measure="true"] { visibility: hidden !important; transition: none; }
.campus-label-code {
  display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; box-sizing: border-box;
  background: var(--tone); color: var(--ink); font: 800 12px/1 var(--heading-font); letter-spacing: 0.02em; box-shadow: inset 0 0 0 1.5px rgba(30, 41, 66, 0.85);
}
.campus-label[data-dark="true"] .campus-label-code { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.campus-label-ico svg { display: block; }
.campus-label-arrow { display: none; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; margin-right: -2px; border-radius: 50%; background: var(--ink); color: #fff; transform: rotate(var(--arrow, 0rad)); }
.campus-label-arrow svg { display: block; }
.campus-label[data-mode="edge"] { padding-left: 4px; box-shadow: 0 0 0 1.5px rgba(30, 41, 66, 0.55), 0 8px 18px -8px rgba(23, 44, 67, 0.5); }
.campus-label[data-mode="edge"] .campus-label-arrow { display: inline-grid; }
.campus-label:hover { box-shadow: 0 0 0 2px var(--ink), 0 8px 18px -8px rgba(23, 44, 67, 0.55); }
.campus-label:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink), 0 8px 18px -8px rgba(23, 44, 67, 0.55); }
@media (max-width: 639px), (max-height: 500px) {
  .campus-label { height: 32px; gap: 6px; padding: 0 12px 0 4px; font-size: 13.5px; }
  .campus-label::before { left: -6px; right: -6px; top: -6px; bottom: -6px; }
  .campus-label-code { min-width: 24px; height: 24px; padding: 0 5px; font-size: 11px; }
  .campus-label-arrow { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .campus-label { transition: none; } }

/* ---------- the toolbar */
.campus-ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.campus-tools { position: absolute; top: 14px; left: calc(16px + env(safe-area-inset-left, 0px)); display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 300px); pointer-events: none; }
.campus-btn {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin: 0; padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1px solid rgba(30, 41, 66, 0.14); background: rgba(255, 255, 255, 0.88); color: var(--ink); cursor: pointer;
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  font: 600 12.5px/1.2 var(--body-font); letter-spacing: 0.005em; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 16px -10px rgba(30, 41, 66, 0.5);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.campus-btn svg { flex: 0 0 auto; }
.campus-btn[hidden] { display: none; }
.campus-btn:hover { background: #fff; border-color: rgba(30, 41, 66, 0.55); transform: translateY(-1px); }
.campus-btn:active { transform: none; }
.campus-btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.campus-btn:focus-visible, .campus-skip:focus-visible, .campus-pick-step:focus-visible, .campus-pick-main:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
.campus-btn[aria-expanded="true"] { background: #fff; border-color: var(--ink); }
.campus-back { background: var(--ink); border-color: var(--ink); color: #fff; }
.campus-btn-short { display: none; }
.campus-back:hover { background: #2E3B57; border-color: #2E3B57; }
.campus-btn[aria-pressed="true"] { background: var(--yellow); border-color: rgba(30, 41, 66, 0.4); }
.campus-tools[data-riding="true"] .campus-btn:not(.campus-back) { display: none; }
@media (max-width: 1100px) { .campus-icon-btn .campus-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .campus-icon-btn { padding: 0; width: 38px; justify-content: center; } }
@media (max-width: 820px), (pointer: coarse) {
  .campus-btn { min-height: 44px; }
  .campus-icon-btn { width: 44px; }
}
@media (max-width: 639px) {
  .campus-tools { top: 10px; left: calc(8px + env(safe-area-inset-left, 0px)); max-width: calc(100% - 200px); gap: 5px; }
  .campus-tools .campus-btn:not(.campus-back) .campus-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .campus-tools .campus-btn:not(.campus-back) { width: 44px; padding: 0; justify-content: center; }
  .campus-tools [data-act="labs"] { display: none; }
  .campus-back { padding-right: 14px; }
  .campus-back .campus-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .campus-back .campus-btn-short { display: inline; }
  .campus-ui[data-level="1"] .campus-tools [data-act="replay"], .campus-ui[data-level="2"] .campus-tools [data-act="replay"] { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .campus-tools { top: 8px; }
  .campus-tools .campus-btn .campus-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .campus-tools .campus-btn { width: 44px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .campus-btn { transition: none; } .campus-btn:hover { transform: none; } }

/* ---------- popovers: All labs, Follow */
.campus-pop {
  position: absolute; z-index: 6; top: 62px; left: calc(16px + env(safe-area-inset-left, 0px)); width: min(360px, calc(100% - 32px)); max-height: calc(100% - 80px);
  overflow: auto; overscroll-behavior: contain; margin: 0; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.98); color: var(--ink); pointer-events: auto;
  box-shadow: 0 0 0 1px rgba(30, 41, 66, 0.1), 0 22px 44px -22px rgba(30, 41, 66, 0.6), 0 6px 14px -8px rgba(30, 41, 66, 0.28);
}
.campus-pop[hidden] { display: none; }
.campus-pop-h { margin: 2px 6px 8px; color: #46536E; font: 700 11px/1.3 var(--body-font); letter-spacing: 0.08em; text-transform: uppercase; }
.campus-pop-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.campus-pop-item { display: flex; align-items: center; gap: 2px; border-radius: 12px; }
.campus-pop-show {
  flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; margin: 0; padding: 6px 8px 6px 6px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit;
}
.campus-pop-show:hover, .campus-pop-item[data-current="true"] .campus-pop-show { background: #F2F6F9; }
.campus-pop-show:focus-visible, .campus-pop-go:focus-visible, .campus-pop-row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.campus-pop-code {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--tone); color: var(--ink);
  font: 800 11.5px/1 var(--heading-font); box-shadow: inset 0 0 0 1.5px rgba(30, 41, 66, 0.85);
}
.campus-pop-item[style*="--ink"] .campus-pop-code { color: #fff; }
.campus-pop-text { display: flex; flex-direction: column; min-width: 0; }
.campus-pop-name { font: 600 14px/1.25 var(--heading-font); letter-spacing: -0.01em; }
.campus-pop-kind { margin-top: 1px; color: #4F5A70; font: 500 11.5px/1.3 var(--body-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campus-pop-go { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; color: #C9532F; }
.campus-pop-go:hover { background: #FFF1EC; }
.campus-pop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; margin: 0; padding: 8px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink); font: 600 13.5px/1.2 var(--body-font); text-align: left; cursor: pointer;
}
.campus-pop-row:hover { background: #F2F6F9; }
.campus-pop-row kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: #EEF2F6; color: #46536E; font: 700 11px/1 var(--body-font); }
.campus-pop-empty { margin: 8px; color: #46536E; font-size: 0.85rem; }
.campus-follow-pop { width: min(260px, calc(100% - 32px)); }
@media (max-width: 639px) {
  .campus-pop { top: auto; left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); width: auto; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); max-height: min(70%, 460px); }
}

/* ---------- zoom on portrait phones: pinch (Touch to explore) and double tap zoom; the whole-campus button stays */
@media (max-width: 639px) {
  .campus-hub .metro-zoom [data-act="zin"], .campus-hub .metro-zoom [data-act="zout"] { display: none; }
  /* (the whole-campus button above the selector, bottom right: the top right corner is where the back row's names go) */
  .metro-hub.campus-hub .metro-zoom { top: auto; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
}

/* ---------- Skip intro */
.campus-skip {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0;
  padding: 8px 18px 8px 13px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; cursor: pointer; pointer-events: auto;
  font: 700 13px/1.2 var(--heading-font); letter-spacing: 0.01em; box-shadow: 0 10px 24px -12px rgba(30, 41, 66, 0.7);
}
.campus-skip[hidden] { display: none; }
.campus-skip:hover { background: #2E3B57; }
.campus-hub[data-intro="true"] .metro-hint { opacity: 0; }

/* ---------- the phone lab selector: previous, the lab, next (the lab opens the list of all of them) */
.campus-picker { display: none; }
@media (max-width: 639px) {
  .campus-picker {
    position: absolute; left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 6px; pointer-events: none;
  }
  .campus-pick-step, .campus-pick-main {
    pointer-events: auto; margin: 0; border: 1px solid rgba(30, 41, 66, 0.14); background: rgba(255, 255, 255, 0.94); color: var(--ink); cursor: pointer;
    -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: 0 8px 20px -12px rgba(30, 41, 66, 0.6);
  }
  .campus-pick-step { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border-radius: 50%; }
  .campus-pick-main { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 12px 0 6px; border-radius: 999px; font: 600 14px/1.2 var(--heading-font); text-align: left; }
  .campus-pick-main svg { flex: 0 0 auto; margin-left: auto; }
  .campus-pick-code:empty { display: none; }
  .campus-pick-code { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; background: var(--yellow); color: var(--ink); font: 800 12px/1 var(--heading-font); box-shadow: inset 0 0 0 1.5px rgba(30, 41, 66, 0.85); box-sizing: border-box; }
  .campus-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .campus-skip { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .metro-hub.campus-hub .metro-explore { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .campus-ui[data-card-layout="sheet"] .campus-picker, .campus-ui[data-card-layout="sheet"] .metro-explore, .campus-ui[data-following="true"] .campus-picker { visibility: hidden; }
}

/* ---------- the lab card: docked at the stage's right on desktops (metro.css: the sheet and side layouts) */
.campus-card { --pv-accent: var(--coral); }
.campus-card .metro-pv-code[hidden] { display: none; }
.campus-card[data-layout="dock"] {
  left: auto; right: calc(16px + env(safe-area-inset-right, 0px)); top: 62px; width: min(360px, 40%); max-height: calc(100% - 78px); transform: none !important; display: flex;
}
.campus-card[data-layout="dock"] .metro-pv-card, .campus-card[data-layout="side"] .metro-pv-card { display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
.campus-card[data-layout="side"] .metro-pv-card { overflow: hidden; }
.campus-card .campus-card-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.campus-card[data-layout="sheet"] .campus-card-scroll { max-height: 34svh; }
.campus-card-learn { margin: 12px 0 0; }
.campus-card-learn[hidden] { display: none; }
.campus-card-h { margin: 0 0 6px; color: #46536E; font: 700 10.5px/1.3 var(--body-font); letter-spacing: 0.08em; text-transform: uppercase; }
.campus-learn { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.campus-learn li { position: relative; padding-left: 22px; color: #26354D; font: 500 0.86rem/1.45 var(--body-font); }
.campus-learn li::before {
  content: ""; position: absolute; left: 2px; top: 0.42em; width: 12px; height: 7px; border-left: 2.4px solid var(--ink); border-bottom: 2.4px solid var(--ink);
  transform: rotate(-45deg); border-radius: 1px;
}
.campus-card .metro-pv-status[hidden] { display: none; }
.campus-card-more {
  flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; margin: 0; padding: 10px 14px 10px 16px;
  border: 1.5px solid rgba(30, 41, 66, 0.22); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; font: 700 0.88rem/1.2 var(--heading-font); text-align: left;
}
.campus-card-more[hidden] { display: none; }
.campus-card-more:hover { border-color: var(--ink); background: #F6F9FB; }
.campus-card-more:focus-visible, .campus-step-btn:focus-visible, .campus-hero-btn:focus-visible, .campus-hero-toggle:focus-visible, .campus-tour-btn:focus-visible, .campus-hero-range input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.campus-card-try { background: var(--yellow); border-color: var(--ink); }
.campus-card-try:hover { background: #FFE37F; }
.campus-card .metro-pv-go { flex: 1 1 100%; }
/* (a navy lab: its link is navy with white text, never navy on navy) */
.campus-card[data-tone="navy"] .metro-pv-go { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), 0 3px 0 #0F1626; }
.campus-card[data-tone="navy"] .metro-pv-go:focus-visible { outline-color: var(--yellow); }
.campus-card[data-tone="navy"] .metro-pv-status::before { background: var(--blue); }
.campus-card .metro-pv-go[hidden] { display: none; }
/* level 2: the activity stepper */
.campus-steps { margin-top: 12px; }
.campus-steps[hidden] { display: none; }
.campus-step-head { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.campus-step-count { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 38px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: #fff; font: 800 10.5px/1 var(--heading-font); letter-spacing: 0.04em; }
.campus-step-title { color: var(--ink); font: 650 1rem/1.25 var(--heading-font); letter-spacing: -0.01em; }
.campus-step-caption { margin: 6px 0 0; color: #34465A; font: 400 0.86rem/1.5 var(--body-font); min-height: 2.9em; }
.campus-step-nav { display: flex; gap: 8px; margin-top: 10px; }
.campus-step-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; margin: 0; padding: 8px 10px; border: 1.5px solid rgba(30, 41, 66, 0.22);
  border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; font: 700 0.84rem/1.2 var(--heading-font);
}
.campus-step-btn:hover:not(:disabled) { border-color: var(--ink); }
.campus-step-btn:disabled { opacity: 0.38; cursor: default; }
/* the hero panel (rendered from the place's handle.hero) */
.campus-hero { margin-top: 12px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #FFF8E2, #FFFDF6); box-shadow: inset 0 0 0 1px rgba(30, 41, 66, 0.1); }
.campus-hero[hidden] { display: none; }
.campus-hero-h { margin: 0; color: var(--ink); font: 700 0.95rem/1.25 var(--heading-font); }
.campus-hero-intro { margin: 4px 0 0; color: #34465A; font: 400 0.8rem/1.45 var(--body-font); }
.campus-hero-controls { display: grid; gap: 8px; margin-top: 10px; }
.campus-hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin: 0; padding: 10px 16px; border: 0; border-radius: 999px;
  background: var(--coral); color: var(--ink); cursor: pointer; font: 700 0.9rem/1.2 var(--heading-font); box-shadow: inset 0 0 0 1.5px var(--ink), 0 3px 0 var(--ink);
}
.campus-hero-btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px var(--ink), 0 1px 0 var(--ink); }
.campus-hero-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 6px 4px; border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font: 600 0.84rem/1.3 var(--body-font); text-align: left;
}
.campus-switch { position: relative; flex: 0 0 auto; width: 40px; height: 24px; border-radius: 999px; background: #D5D9E2; box-shadow: inset 0 0 0 1.5px rgba(30, 41, 66, 0.35); transition: background 0.18s; }
.campus-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(30, 41, 66, 0.4); transition: transform 0.18s; }
.campus-hero-toggle[aria-checked="true"] .campus-switch { background: var(--blue); }
.campus-hero-toggle[aria-checked="true"] .campus-switch::after { transform: translateX(16px); }
.campus-hero-range { display: grid; gap: 4px; color: var(--ink); font: 600 0.82rem/1.3 var(--body-font); }
.campus-hero-rrow { display: flex; align-items: center; gap: 10px; }
.campus-hero-range input { flex: 1 1 auto; min-height: 32px; margin: 0; accent-color: var(--coral); }
@media (pointer: coarse) { .campus-hero-range input { min-height: 44px; } }
.campus-hero-range output { min-width: 42px; color: #26354D; font: 700 0.82rem/1 var(--heading-font); text-align: right; }
.campus-hero-lab { color: var(--ink); font: 600 0.82rem/1.3 var(--body-font); }
.campus-hero-tour { display: grid; gap: 4px; }
.campus-tour-row { display: flex; align-items: center; gap: 8px; }
.campus-tour-btn { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0; border: 1.5px solid rgba(30, 41, 66, 0.22); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.campus-tour-btn:disabled { opacity: 0.38; cursor: default; }
.campus-tour-cap { flex: 1 1 auto; min-width: 0; color: #34465A; font: 500 0.8rem/1.35 var(--body-font); }
.campus-hero-readout { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff; color: var(--ink); font: 600 0.8rem/1.4 var(--body-font); box-shadow: inset 0 0 0 1px rgba(30, 41, 66, 0.12); }
.campus-hero-readout:empty { display: none; }
.campus-hero-note { margin: 8px 0 0; color: #5B6782; font: 500 0.72rem/1.4 var(--body-font); }
@media (prefers-reduced-motion: reduce) { .campus-switch, .campus-switch::after { transition: none; } }
/* sheets and side panels: the essentials only (the scroll area holds the rest) */
.campus-card[data-layout="sheet"] .campus-learn li:nth-child(n+3), .campus-card[data-layout="side"] .campus-learn li:nth-child(n+3) { display: none; }
.campus-card[data-layout="sheet"] .metro-pv-actions, .campus-card[data-layout="side"] .metro-pv-actions { flex-wrap: wrap; gap: 6px; }
.campus-card[data-layout="sheet"] .campus-card-more, .campus-card[data-layout="sheet"] .metro-pv-go { flex: 1 1 calc(50% - 6px); min-width: 0; justify-content: center; font-size: 0.82rem; padding-inline: 10px; }
.campus-card[data-layout="sheet"] .campus-card-try { flex-basis: 100%; order: 3; }
.campus-card[data-layout="sheet"] .campus-step-caption { min-height: 0; font-size: 0.8rem; }
/* what the open card moves aside */
.campus-ui[data-card-layout="dock"] .metro-zoom { visibility: hidden; }
.campus-ui[data-card-layout="side"] .metro-zoom, .campus-ui[data-card-layout="side"] .metro-explore { right: calc(min(300px, 44%) + 22px); }
.campus-ui[data-card-layout="sheet"] .metro-zoom { visibility: hidden; }

/* ---------- the follow bar: a dot in the colour of what is followed */
.campus-hub .metro-ridebar-dot { background: var(--line, var(--coral)); }
.campus-hub .metro-ridebar-text { max-width: min(58vw, 420px); overflow: hidden; text-overflow: ellipsis; }
.campus-hub .metro-ridebar[data-line="yellow"] { --line: var(--yellow); }

/* ---------- the HTML list of the labs (screen readers while the 3D runs; the page's list without it) */
.campus-hub .campus-list { margin: 0; padding: 0; list-style: none; }
.campus-hub .campus-item[style*="--ink"] .metro-card-code { color: #fff; }
.campus-hub .campus-item-learn { margin: 6px 0 2px; color: #34465A; font-size: 0.82rem; line-height: 1.5; }
.campus-hub .campus-also { display: none; }
.campus-hub .campus-also-h { margin: 0 0 10px; color: #46536E; font: 700 0.75rem/1.3 var(--body-font); letter-spacing: 0.08em; text-transform: uppercase; }
.campus-hub .campus-also-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.campus-hub .campus-also-list li { padding: 14px 18px; border: 1px solid #e1e7eb; border-radius: 18px; background: #fff; }
.campus-hub .campus-also-list h3 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.campus-hub .campus-also-list p { margin: 6px 0 0; font-size: 0.84rem; line-height: 1.5; }
/* without the 3D (no WebGL, a module error): the still campus over the list of labs, both in the flow */
.campus-hub[data-fallback="true"] .metro-stage, .campus-hub[data-scene-error="true"] .metro-stage {
  display: block !important; height: min(62vh, 58vw) !important; height: min(62svh, 58vw) !important; min-height: 220px; cursor: default;
}
/* (portrait screens show the tall poster - the same media as its <source> - most of it, not a band) */
@media (max-aspect-ratio: 4/5) {
  .campus-hub[data-fallback="true"] .metro-stage, .campus-hub[data-scene-error="true"] .metro-stage { height: min(78vh, 150vw) !important; height: min(78svh, 150vw) !important; }
}
.campus-hub[data-fallback="true"] .metro-canvas, .campus-hub[data-scene-error="true"] .metro-canvas,
.campus-hub[data-fallback="true"] .metro-hint, .campus-hub[data-scene-error="true"] .metro-hint,
.campus-hub[data-fallback="true"] .campus-ui, .campus-hub[data-scene-error="true"] .campus-ui,
.campus-hub[data-fallback="true"] .campus-labels, .campus-hub[data-scene-error="true"] .campus-labels { display: none !important; }
.campus-hub[data-fallback="true"] .campus-poster, .campus-hub[data-scene-error="true"] .campus-poster { opacity: 1; }
.campus-hub[data-fallback="true"] .campus-also, .campus-hub[data-scene-error="true"] .campus-also { display: block; width: min(1180px, 100% - 32px); margin: 4px auto 26px; }
.campus-hub[data-fallback="true"] .metro-card, .campus-hub[data-scene-error="true"] .metro-card { padding-top: 0; }
@media (max-width: 400px) { .campus-hub .metro-tools .metro-btn span:not(.metro-btn-ico) { display: none; } }

/* phones (portrait and landscape): no hint line at the stage's edge - the Touch to explore button says it */
@media (max-width: 639px), (max-height: 500px) and (pointer: coarse) { .campus-hub .metro-hint { display: none !important; } }