/* view-switch.css -- the one-click switch between the 3D homepage and the
   simple one (view-switch.js). Loaded on every path; each rule is scoped to
   the mode it belongs to. Bump ?v= on edit. */

/* 3D page: under Explore on the arch, right-aligned with it, in the same
   small glowing caps. Beside Explore it sat under the last chapter's label,
   whose active underline ran into it at 1280px and narrower. The arch hides
   the system cursor for its reticle, so this keeps cursor: none. */
html.mode-immersive .nav-rail .view-switch-simple {
  position: absolute;
  top: 104px;
  right: clamp(14px, 2vw, 40px);
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8dfd099;
  background: none;
  border: 1px solid rgba(232, 223, 208, 0.22);
  border-radius: 2px;
  padding: 3px 8px;
  cursor: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  transition: color 0.3s ease, border-color 0.3s ease, text-shadow 0.3s ease;
}
html.mode-immersive .nav-rail .view-switch-simple:hover,
html.mode-immersive .nav-rail .view-switch-simple:focus-visible {
  color: #fff0d2f2;
  border-color: rgba(212, 160, 74, 0.7);
  text-shadow: 0 0 9px var(--gold, #d4a04a), 0 1px 2px rgba(0, 0, 0, 0.95);
}
html.mode-immersive .nav-rail .view-switch-simple:focus-visible { outline: 2px solid var(--gold, #d4a04a); outline-offset: 2px; }

/* Simple page, on a device that can run the 3D one: in the top bar, pushed
   against the 44px menu button (view-switch.js inserts it before the menu),
   so it scrolls with the bar, sits under the open drawer, and comes early in
   the tab order. The fixed fallback is for a page without the bar. Under
   900px (a window narrowed since load) there is no 3D page to go to. */
.view-switch-3d {
  position: fixed;
  top: 16px;
  right: 72px;
  z-index: 79;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fefff;
  background: rgba(3, 6, 11, 0.78);
  border: 1px solid rgba(0, 229, 255, 0.45);
  border-radius: 2px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.12);
}
.view-switch-3d.in-bar { position: static; margin: 0 10px 0 auto; }
.view-switch-3d:hover { color: #fff; border-color: #00e5ff; }
@media (max-width: 899px) { .view-switch-3d { display: none; } }
.view-switch-3d:focus-visible { outline: 2px solid #00e5ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html.mode-immersive .nav-rail .view-switch-simple { transition: none; } }

/* The simple page on a wide screen. Its layout is the phone's (styles.css,
   the .mob rules), every chapter at 100% width; a desktop visitor who picks
   "Simple view" (or whose device the gate turns away) got 1,400px lines and
   full-width buttons. From 900px the chapters, the hero's content and the
   action bar sit in one centred reading column. The hero's picture stays
   full bleed. Phones and tablets under 900px are untouched. */
@media (min-width: 900px) {
  html.mob .section-overlay:not(#overlay-0) {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html.mob #overlay-0 .so-inner {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html.mob .mob-cta { justify-content: center; }
  html.mob .mob-cta .mob-cta-btn:not(.mob-cta-call) { flex: 0 1 300px; }
}