/* ErgScreen canonical application geometry.
   This file is the sole owner of primary page width, gutters, top rhythm, and hero geometry. */

/* Reserve the vertical-scrollbar lane on short and long pages alike. Without
   this, short views such as Recruit Assist Activity center against a wider
   viewport and appear several pixels farther right than scrolling views. */
html {
  scrollbar-gutter: stable;
}

:root {
  --erg-page-max: 1240px;
  --erg-page-gutter: 64px;
  --erg-page-top: 24px;
  --erg-page-bottom: 56px;
  --erg-section-gap: 18px;
  --erg-hero-height: 184px;
  --erg-hero-padding-x: 40px;
  --erg-hero-padding-y: 22px;
  --erg-hero-radius: 34px;
}

body .page {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--erg-page-top) 0 var(--erg-page-bottom) !important;
}

body .erg-page-shell,
body .erg-page-width {
  position: relative !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: min(var(--erg-page-max), calc(100vw - var(--erg-page-gutter))) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body .erg-page-shell {
  display: grid !important;
  gap: var(--erg-section-gap) !important;
  padding: 0 !important;
}

/* The shell owns vertical rhythm. Neutralize legacy section and card margins so
   adjacent page sections never receive both a grid gap and a component margin. */
body .erg-page-shell > * {
  margin-block: 0 !important;
}

body section.erg-page-hero,
body div.erg-page-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--erg-hero-height) !important;
  min-height: var(--erg-hero-height) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: var(--erg-hero-padding-y) var(--erg-hero-padding-x) !important;
  border: 0 !important;
  border-radius: var(--erg-hero-radius) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 90% 8%, rgba(20,184,166,.34), transparent 31%),
    radial-gradient(circle at 8% 96%, rgba(49,95,159,.20), transparent 30%),
    linear-gradient(135deg,#050b20 0%,#071331 58%,#064657 100%) !important;
  box-shadow: 0 34px 90px rgba(7,19,49,.22) !important;
}

body .erg-page-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.042) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(5,11,32,.74),rgba(5,11,32,.13) 60%,rgba(6,70,87,.10)) !important;
  background-size: 46px 46px, 46px 46px, auto !important;
}

body .erg-page-hero > * { position: relative !important; z-index: 1 !important; }
body .erg-page-hero .eyebrow { margin: 0 0 7px !important; color: #60f0e8 !important; }
body .erg-page-hero h1 {
  max-width: 1020px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(2.7rem, 5.3vw, 4.35rem) !important;
  line-height: .90 !important;
  letter-spacing: -.072em !important;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0,0,0,.24) !important;
}
body .erg-page-hero .subtle,
body .erg-page-hero p:not(.eyebrow) {
  max-width: none !important;
  margin: 13px 0 0 !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 1rem !important;
  line-height: 1.44 !important;
  font-weight: 740 !important;
  white-space: nowrap !important;
}

@media (max-width: 1050px) {
  :root { --erg-page-gutter: 32px; --erg-hero-height: auto; }
  body section.erg-page-hero, body div.erg-page-hero {
    height: auto !important; min-height: 220px !important;
    grid-template-columns: 1fr !important; align-items: start !important;
  }
  body .erg-page-hero .subtle,
  body .erg-page-hero p:not(.eyebrow) {
    white-space: normal !important;
  }
}
@media (max-width: 720px) {
  :root {
    --erg-page-gutter: 24px; --erg-page-top: 12px; --erg-page-bottom: 36px;
    --erg-section-gap: 14px; --erg-hero-padding-x: 24px; --erg-hero-padding-y: 28px;
    --erg-hero-radius: 28px;
  }
  body section.erg-page-hero, body div.erg-page-hero { min-height: 0 !important; }
  body .erg-page-hero h1 { font-size: clamp(2.25rem, 12vw, 3.4rem) !important; }
}

/* Report-family geometry.
   Report views use the same centered width and responsive gutters as top-level
   application pages so navigation does not shift horizontally between surfaces. */
body .report-page-shell {
  position: relative !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  width: min(var(--erg-page-max), calc(100vw - var(--erg-page-gutter))) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body .report-page-shell > * {
  max-width: 100%;
}


/* Canonical application console v1.
   Settings, Athlete Profile, and Recruit Packet Studio use one geometry,
   one detached rail surface, one main surface, and one navigation language. */
@media (min-width: 901px) {
  body .app-console-shell {
    display: grid !important;
    grid-template-columns: 216px minmax(0, 1fr) !important;
    gap: var(--erg-section-gap, 18px) !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: auto !important;
  }

  body .app-console-shell::before,
  body .app-console-shell::after {
    content: none !important;
    display: none !important;
  }

  body .app-console-rail,
  body .app-console-main {
    min-width: 0 !important;
    align-self: start !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  body .app-console-rail {
    position: sticky !important;
    top: 18px !important;
    width: 216px !important;
    min-width: 216px !important;
    max-width: 216px !important;
    max-height: calc(100vh - 36px) !important;
    overflow-y: auto !important;
    padding: 20px 18px !important;
    border: 1px solid var(--erg-soft-line, rgba(203,213,225,.76)) !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(15,139,141,.065), transparent 31%),
      var(--erg-card-bg, rgba(255,255,255,.95)) !important;
    box-shadow: 0 20px 56px rgba(7,19,49,.07) !important;
  }

  body .app-console-main {
    width: 100% !important;
    max-width: none !important;
    padding: 24px 26px 28px !important;
    border: 1px solid var(--erg-soft-line, rgba(203,213,225,.76)) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(15,139,141,.055), transparent 31%),
      var(--erg-card-bg, rgba(255,255,255,.95)) !important;
    box-shadow: 0 20px 56px rgba(7,19,49,.07) !important;
    overflow: visible !important;
  }
}

body .app-console-nav {
  display: grid !important;
  gap: 6px !important;
}

body .app-console-nav-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 40px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(203,213,225,.78) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.82) !important;
  color: #475569 !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.03) !important;
  opacity: 1 !important;
}

body .app-console-nav-row:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(15,139,141,.24) !important;
  background: #fff !important;
}

body .app-console-nav-row.is-active,
body .app-console-nav-row[aria-selected="true"],
body .app-console-nav-row[aria-current="step"],
body .app-console-nav-row[aria-current="page"] {
  border-color: rgba(15,139,141,.36) !important;
  background: rgba(15,139,141,.085) !important;
  color: var(--erg-teal, #007a80) !important;
  box-shadow:
    inset 0 0 0 1px rgba(15,139,141,.08),
    0 10px 24px rgba(15,139,141,.08) !important;
  opacity: 1 !important;
}

body .app-console-nav-row.is-active strong,
body .app-console-nav-row[aria-selected="true"] strong,
body .app-console-nav-row[aria-current] strong {
  color: var(--erg-teal, #007a80) !important;
}

body .app-console-nav-row.is-active small,
body .app-console-nav-row[aria-selected="true"] small,
body .app-console-nav-row[aria-current] small {
  color: #0f766e !important;
}

body .app-console-nav-row.is-disabled:not(.is-active),
body .app-console-nav-row[aria-disabled="true"]:not(.is-active) {
  opacity: .48 !important;
  cursor: not-allowed !important;
}

body .app-console-nav-chevron {
  display: inline-block !important;
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(15,139,141,.68) !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

@media (max-width: 900px) {
  body .app-console-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .app-console-rail,
  body .app-console-main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body .app-console-rail {
    position: static !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 20px !important;
    border: 1px solid var(--erg-soft-line, rgba(203,213,225,.76)) !important;
    border-bottom: 0 !important;
    border-radius: 30px 30px 0 0 !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(15,139,141,.065), transparent 31%),
      var(--erg-card-bg, rgba(255,255,255,.95)) !important;
    box-shadow: 0 20px 56px rgba(7,19,49,.07) !important;
  }

  body .app-console-main {
    padding: 22px !important;
    border: 1px solid var(--erg-soft-line, rgba(203,213,225,.76)) !important;
    border-radius: 0 0 30px 30px !important;
    background: var(--erg-card-bg, rgba(255,255,255,.95)) !important;
    box-shadow: 0 20px 56px rgba(7,19,49,.07) !important;
  }
}

@media (max-width: 620px) {
  body .app-console-rail {
    padding: 14px !important;
  }

  body .app-console-main {
    padding: 18px !important;
  }
}
/* End canonical application console v1. */


/* Canonical console stale-global boundary v65.
   Navigation copy must never be treated as a numbered badge column. */
body .app-console-nav-row > .app-console-nav-copy,
body .packet-canonical-nav-row > .packet-canonical-nav-copy {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  place-items: initial !important;
}

body .app-console-nav-row > .app-console-nav-copy > strong,
body .app-console-nav-row > .app-console-nav-copy > small,
body .packet-canonical-nav-row > .packet-canonical-nav-copy > strong,
body .packet-canonical-nav-row > .packet-canonical-nav-copy > small {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
/* End canonical console stale-global boundary v65. */