/* ==========================================================================
   Sporometrics Client Portal — page shell.
   Background, canvas, masthead, nav row, footer. Ported from the theme's
   home.css shell section (Design Guide §16.3 / §16.5); the theme itself
   notes this shell is "pending shell.css extraction" — this is that file,
   scoped to the portal.

   Depends on tokens.css. Load: tokens -> components -> shell -> portal.
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* §16.3 layer 1 — fixed vertical gradient */
  background: linear-gradient(to bottom,
    #ffffff 0%, #ffffff 39%, #e5e5e5 55.5%, #e1e1e1 69%,
    #e5e5e5 82.5%, #ffffff 99%, #ffffff 100%) fixed;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* §16.3 layer 3 — soft white highlight at top-centre.
   Layer 2 (the #grain filter) is intentionally not implemented: a fixed
   position + filter:url() layer produced solid-black repaint artifacts
   during scroll, and unlike the marketing site the portal scrolls a lot. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 1100px 260px at 50% 0%,
    rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45%, rgba(255,255,255,0) 100%);
}

/* Breuer Text is self-hosted (assets/css/fonts.min.css, linked first in
   header.php) matching the main sporometrics.com site. tokens.css already
   sets --font-display to 'Breuer Text', system-ui — so no override is needed
   here; the system-ui fallback only shows briefly while the webfont loads or
   if a file 404s. */

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
img { max-width: 100%; height: auto; display: block; }

.canvas {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 20px 0;
  flex: 1 0 auto;
}

/* ---- Masthead ----------------------------------------------------------- */
.masthead {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 8px 4px 16px; gap: 16px;
}
.masthead .logo img { height: 56px; }
.masthead .who {
  text-align: right;
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.45;
}
.masthead .who strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  color: var(--heading-grey);
  letter-spacing: var(--tr-display);
}

/* ---- Nav row -----------------------------------------------------------
   §16.5: the bar is centred at 90% width and the content below pulls up
   ~22px (half the 45px bar height) to interlock. §16.8 item 5 notes the
   interlock is optional; kept here because it is the signature move.     */
.navrow { position: relative; z-index: 30; }
.spo-nav { width: 90%; margin: 0 auto; min-height: 45px; }
.spo-nav a.is-current { color: var(--heading-orange); }
.spo-nav a.nav-right { margin-left: auto; }

.stage { position: relative; z-index: 1; margin-top: -22px; padding-top: 22px; }
.stage > * + * { margin-top: var(--sp-6); }

/* ---- Footer ------------------------------------------------------------- */
.portal-footer {
  flex-shrink: 0;
  margin-top: var(--sp-10);
  background: var(--n-600);
  color: #fff;
  border-top-left-radius: var(--r-card);
  border-top-right-radius: var(--r-card);
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  padding: var(--sp-8) var(--sp-5);
  display: flex; justify-content: space-between; gap: var(--sp-8);
  font-size: var(--fs-sm); line-height: 1.6;
}
.portal-footer strong { display: block; margin-bottom: var(--sp-1); }
.portal-footer a { color: #fff; text-decoration: underline; }
.portal-footer a:hover { color: var(--orange-hi); }
.f-legal { text-align: right; }

/* ---- Responsive (§16.7: 1024 collapse, 639 mobile) ---------------------- */
@media (max-width: 1023px) {
  .spo-nav { width: 100%; gap: var(--sp-4); }
  .spo-nav a { font-size: 15px; letter-spacing: 0; }
}
@media (max-width: 639px) {
  .masthead { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .masthead .who { text-align: left; }
  .canvas { padding: 12px 12px 0; }
  /* Nav persists at all widths (§16.7) — no hamburger ships. */
  .spo-nav { flex-wrap: wrap; row-gap: var(--sp-2); }
  .spo-nav a.nav-right { margin-left: 0; }
  .footer-inner { flex-direction: column; gap: var(--sp-5); }
  .f-legal { text-align: left; }
}