:root {
  --apol-shell-sidebar: 188px;
  --apol-shell-topbar: 48px;
  --apol-shell-ink: #f4f8ff;
  --apol-shell-muted: #8fa7c9;
  --apol-shell-border: #263a58;
  --apol-shell-bg: #071326;
}

body.apol-global-shell {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding-top: var(--apol-shell-topbar);
  padding-left: var(--apol-shell-sidebar);
  overflow-x: hidden;
}

body.apol-global-shell > main { min-width: 0; max-width: 100%; }
body.apol-global-shell > main img,
body.apol-global-shell > main svg,
body.apol-global-shell > main iframe,
body.apol-global-shell > main canvas { max-width: 100%; }

body.apol-global-shell > header.map-topbar,
body.apol-global-shell > header.topbar,
body.apol-global-shell > header.top {
  display: none !important;
}
/* The shared chrome's rolling statement is sticky; under this fixed header it sticks just below it. */
body.apol-global-shell > .apol-chrome-banner { top: var(--apol-shell-topbar); z-index: 999; }

.apol-global-sidebar {
  position: fixed;
  z-index: 1002;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--apol-shell-sidebar);
  min-height: 100vh;
  padding: 18px 11px 14px;
  border-right: 1px solid var(--apol-shell-border);
  background: linear-gradient(180deg, #09162a, #071120);
  color: var(--apol-shell-ink);
  flex-direction: column;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.apol-global-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 6px 22px;
  text-decoration: none;
}

.apol-global-brand > b {
  display: grid;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  place-items: center;
  background: linear-gradient(135deg, #21df9d, #07956a);
  color: #03160e;
  box-shadow: 0 7px 18px rgba(20, 213, 147, .22);
}

.apol-global-brand strong,
.apol-global-brand small { display: block; }
.apol-global-brand strong { color: #fff; font-size: 12px; }
.apol-global-brand small { color: #75a3e5; font-size: 8px; letter-spacing: .03em; }
.apol-global-nav-label { padding: 5px 8px; color: #8198bc; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.apol-global-nav { display: grid; gap: 3px; }
.apol-global-nav a {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #93b7eb;
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
}
.apol-global-nav a span { width: 17px; color: #7da7e4; }
.apol-global-nav a:hover,
.apol-global-nav a:focus-visible,
.apol-global-nav a[aria-current="page"] { border-color: #0f795f; background: #0b3c36; color: #fff; outline: none; }
.apol-global-nav details { margin-top: 9px; padding-top: 8px; border-top: 1px solid #20304a; }
.apol-global-nav summary { padding: 8px; color: #9eb4d4; cursor: pointer; font-size: 9px; font-weight: 800; }
.apol-global-posture { display: grid; grid-template-columns: auto 1fr; gap: 3px 7px; margin-top: auto; padding: 13px 10px 0; border-top: 1px solid #20304a; color: #b9cdf0; font-size: 9px; }
.apol-global-posture i { width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; background: #2ee59d; }
.apol-global-posture small { grid-column: 2; color: #7896c2; line-height: 1.4; }

.apol-global-header {
  position: fixed;
  z-index: 1001;
  inset: 0 0 auto var(--apol-shell-sidebar);
  height: var(--apol-shell-topbar);
  /* A page's own `header { padding: 40px … }` (styles.css on the guidance pages) would otherwise
     push this bar's content down over the rolling statement beneath it. */
  padding: 0;
  margin: 0;
  text-align: left;
  border-radius: 0;
  border-bottom: 1px solid var(--apol-shell-border);
  background: #061225;
  color: var(--apol-shell-ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.apol-global-topbar { display: flex; height: var(--apol-shell-topbar); align-items: center; gap: 8px; padding: 7px 14px; }
.apol-global-topbar button,
.apol-global-topbar a {
  display: inline-grid;
  min-height: 33px;
  padding: 7px 10px;
  border: 1px solid #315078;
  border-radius: 8px;
  place-items: center;
  background: #11233d;
  color: #e5efff;
  text-decoration: none;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}
.apol-global-topbar button:hover,
.apol-global-topbar button:focus-visible,
.apol-global-topbar a:hover,
.apol-global-topbar a:focus-visible { border-color: #55dfad; color: #70efbd; outline: none; }
.apol-global-topbar h1 { min-width: 0; margin: 0; overflow: hidden; color: #fff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.apol-global-topbar .apol-global-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.apol-global-topbar .apol-global-signin { border-color: #0bd796; background: transparent; color: #61eab8; }
.apol-global-menu { display: none !important; }
.apol-global-scrim { display: none; }

@media (max-width: 860px) {
  body.apol-global-shell { padding-left: 0; }
  .apol-global-sidebar { width: 264px; transform: translateX(-100%); transition: transform .2s ease; }
  body.apol-global-nav-open .apol-global-sidebar { transform: none; }
  .apol-global-header { left: 0; }
  .apol-global-menu { display: inline-grid !important; }
  body.apol-global-nav-open .apol-global-scrim { position: fixed; z-index: 1000; inset: 0; display: block; border: 0; background: rgba(0, 0, 0, .55); }
}

@media (max-width: 560px) {
  .apol-global-topbar { padding: 6px 8px; }
  .apol-global-topbar h1 { flex: 1; font-size: 14px; }
  .apol-global-topbar .apol-global-actions a,
  .apol-global-topbar .apol-global-actions button { min-height: 29px; padding: 5px 7px; }
  body.apol-global-shell > main * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}

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