:root {
  --range-black: #030303;
  --range-carbon: #171717;
  --range-gunmetal: #3f3a3a;
  --range-titanium: #8a8685;
  --range-platinum: #e8e4e2;
  --range-red: #ed1d20;
  --range-panel: rgba(23, 23, 23, .92);
  --range-line: rgba(232, 228, 226, .12);
}

* { box-sizing: border-box; }

/* The range uses author CSS with explicit display values on cards and shells.
   Safari can otherwise let those declarations win over the HTML hidden state,
   leaving the loading gate visible above an already unlocked mission. */
.prim3-range-page [hidden] { display: none !important; }

body.prim3-range-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(circle at 85% 0%, rgba(237, 29, 32, .12), transparent 32rem),
    linear-gradient(180deg, #090909 0%, var(--range-black) 62%);
  color: var(--range-platinum);
}

.range-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--range-line);
  background: rgba(3, 3, 3, .92);
  backdrop-filter: blur(18px);
}

.range-home,
.range-runtime-tools a,
.range-secondary-link {
  color: var(--range-platinum);
  text-decoration: none;
  font-weight: 800;
}

.range-home:hover,
.range-runtime-tools a:hover,
.range-secondary-link:hover { color: #fff; }

.range-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-self: start;
}

.range-brand img { border-radius: 50%; width: 44px; height: 44px; }
.range-brand div { display: grid; }
.range-brand strong { letter-spacing: .18em; font-size: .9rem; }
.range-brand span { color: var(--range-titanium); font-size: .72rem; }

.range-sync {
  justify-self: end;
  padding: .42rem .7rem;
  border: 1px solid var(--range-line);
  border-radius: 999px;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.range-sync[data-kind="good"] { border-color: rgba(111, 229, 152, .4); color: #aef4c5; }
.range-sync[data-kind="warn"] { border-color: rgba(255, 202, 97, .45); color: #ffd983; }
.range-sync[data-kind="syncing"] { border-color: rgba(232, 228, 226, .26); }

.range-gate {
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  display: grid;
  place-items: center;
  padding: .75rem;
}

.range-gate-card {
  width: min(680px, 100%);
  padding: 1.25rem 1rem;
  text-align: center;
  border: 1px solid var(--range-line);
  border-radius: 20px;
  background: var(--range-panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .34);
}

.range-gate-card img { margin-bottom: .45rem; border-radius: 50%; width: 72px; height: 72px; }
.range-gate-card h1 { margin: .25rem 0 .8rem; font-size: clamp(1.9rem, 11vw, 2.8rem); }
.range-gate-card p { color: #bcb7b5; line-height: 1.55; }

.range-shell {
  width: min(100% - 1rem, 1280px);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.5rem) 0 5rem;
  padding-top: 1.2rem;
}

.range-kicker {
  margin: 0 0 .55rem;
  color: var(--range-red);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.range-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 2rem;
  align-items: end;
  padding-bottom: 2.4rem;
}

.range-hero h2,
.range-mission-head h2 {
  margin: 0;
  font-size: clamp(2.8rem, 7vw, 6.6rem);
  line-height: .93;
  letter-spacing: -.045em;
}

.range-hero h2 span { color: var(--range-red); }
.range-hero > div > p:last-child,
.range-mission-head > div > p:last-child {
  max-width: 760px;
  color: #bcb7b5;
  font-size: 1.02rem;
  line-height: 1.65;
}

.range-contract {
  display: grid;
  gap: .55rem;
}

.range-contract span {
  display: block;
  padding: .72rem .8rem;
  border: 1px solid var(--range-line);
  border-radius: 10px;
  color: #c9c5c3;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.range-readiness,
.range-loadout,
.range-prep,
.range-mission-card,
.range-mission {
  margin-top: 1rem;
  border: 1px solid var(--range-line);
  border-radius: 20px;
  background: var(--range-panel);
}

.range-readiness,
.range-loadout,
.range-prep,
.range-mission-card { padding: clamp(1.2rem, 3vw, 2rem); }

.range-section-head h2,
.range-stage-copy h2,
.range-debrief h3 {
  margin: 0 0 .6rem;
}

.range-section-head > p:last-child,
.range-stage-copy > p:last-child,
.range-debrief p {
  margin: 0;
  color: #aaa5a3;
  line-height: 1.6;
}

.range-readiness-grid,
.range-score-grid,
.range-clock-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}

.range-readiness-grid article,
.range-score-grid article,
.range-clock-grid article {
  padding: 1rem;
  border: 1px solid var(--range-line);
  border-radius: 14px;
  background: rgba(3, 3, 3, .45);
}

.range-readiness-grid small,
.range-score-grid small,
.range-clock-grid small {
  display: block;
  margin-bottom: .4rem;
  color: var(--range-titanium);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.range-readiness-grid b,
.range-score-grid b,
.range-clock-grid b { font-size: 1.15rem; }

.range-tool-list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: .75rem;
  padding: 0;
  margin: 1.25rem 0 0;
}

.range-tool-list li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid var(--range-line);
  border-radius: 12px;
}

.range-tool-list li b { color: #aef4c5; font-size: .63rem; letter-spacing: .08em; }
.range-tool-list li span { font-weight: 800; }

.range-prep-list {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: .75rem;
  margin-top: 1.25rem;
}

.range-prep-option {
  display: flex;
  gap: .8rem;
  min-height: 104px;
  padding: 1rem;
  border: 1px solid var(--range-line);
  border-radius: 14px;
  cursor: pointer;
}

.range-prep-option:has(input:checked) { border-color: rgba(237, 29, 32, .65); background: rgba(237, 29, 32, .08); }
.range-prep-option:has(input:disabled) { opacity: .48; cursor: default; }
.range-prep-option input { margin-top: .2rem; accent-color: var(--range-red); }
.range-prep-option span { display: grid; gap: .4rem; }
.range-prep-option small { color: #9d9896; line-height: 1.35; }

.range-mission-card {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 1.5rem;
  align-items: end;
}

.range-mission-card h2 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 4vw, 3.2rem); }
.range-mission-card > div > p:last-child { color: #aaa5a3; line-height: 1.55; max-width: 820px; }

.range-history {
  display: grid;
  gap: .25rem;
  min-width: 200px;
  padding: .85rem 1rem;
  border-left: 2px solid var(--range-red);
  background: rgba(3, 3, 3, .32);
  font-size: .78rem;
}
.range-history span { color: #aaa5a3; }

.range-primary,
.range-primary-link,
.range-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .78rem 1rem;
  border-radius: 10px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.range-primary,
.range-primary-link {
  border: 1px solid var(--range-red);
  /* a shade under --range-red so white button text clears WCAG AA 4.5:1 */
  background: #e71c1f;
  color: #fff;
  text-decoration: none;
}

.range-primary:hover,
.range-primary-link:hover { filter: brightness(1.08); }
.range-secondary-link { border: 1px solid var(--range-line); background: transparent; }

.range-mission { overflow: hidden; }
.range-mission-head {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 2rem;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--range-line);
}
.range-mission-head h2 { font-size: clamp(2.3rem, 5vw, 4.6rem); }
.range-clock-grid { grid-template-columns: minmax(0,1fr); margin: 0; align-self: end; margin-top: 1rem; }

.range-runtime-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  min-height: 610px;
}

.range-runtime-tools {
  padding: 1.2rem;
  border-right: 0;
  background: rgba(3, 3, 3, .26);
  border-bottom: 1px solid var(--range-line);
}

.range-runtime-tools > div {
  display: grid;
  gap: .25rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--range-line);
}
.range-runtime-tools span { color: #8f8a88; font-size: .78rem; line-height: 1.4; }
.range-runtime-tools a { display: block; margin-top: 1.2rem; font-size: .8rem; }

.range-runtime-main { padding: clamp(1rem, 3vw, 2rem); }
.range-message {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(237, 29, 32, .35);
  border-radius: 12px;
  background: rgba(237, 29, 32, .07);
  line-height: 1.5;
}

.range-evidence-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 1rem;
  margin-top: 1.2rem;
}
.range-evidence-list { display: grid; gap: .65rem; }
.range-evidence {
  display: grid;
  gap: .25rem;
  width: 100%;
  padding: .85rem 1rem;
  text-align: left;
  border: 1px solid var(--range-line);
  border-radius: 12px;
  background: rgba(3, 3, 3, .48);
  color: inherit;
  cursor: pointer;
}
.range-evidence:hover,
.range-evidence.is-reviewed { border-color: rgba(237, 29, 32, .5); }
.range-evidence small { color: var(--range-titanium); font-size: .6rem; font-weight: 900; letter-spacing: .08em; }

.range-evidence-detail,
.range-guidance,
.range-debrief {
  padding: 1.2rem;
  border: 1px solid var(--range-line);
  border-radius: 14px;
  background: rgba(3, 3, 3, .35);
}
.range-evidence-detail small { color: var(--range-red); font-weight: 850; }
.range-evidence-detail h3 { margin: .5rem 0; }
.range-evidence-detail p,
.range-guidance p { color: #b1acab; line-height: 1.65; }

.range-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.2rem;
}
.range-action-row span { color: #8f8a88; font-size: .78rem; }

.range-form {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: .85rem;
  margin-top: 1.2rem;
}
.range-form label { display: grid; gap: .4rem; }
.range-form label span { color: #aaa5a3; font-size: .72rem; font-weight: 800; }
.range-form select {
  width: 100%;
  min-height: 48px;
  padding: .7rem .8rem;
  border: 1px solid var(--range-line);
  border-radius: 10px;
  background: #0f0f0f;
  color: var(--range-platinum);
}
.range-form .range-primary { align-self: end; }

.range-choice-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: .8rem;
  margin-top: 1.2rem;
}
.range-choice {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: .65rem;
  padding: 1rem;
  text-align: left;
  border: 1px solid var(--range-line);
  border-radius: 14px;
  background: rgba(3, 3, 3, .42);
  color: inherit;
  cursor: pointer;
}
.range-choice:hover { border-color: rgba(237, 29, 32, .55); transform: translateY(-1px); }
.range-choice small { color: var(--range-red); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.range-choice span { line-height: 1.55; }

.range-guidance { margin-top: 1rem; border-left: 3px solid var(--range-red); }
.range-guidance p { margin-bottom: 0; }

.range-score-grid { grid-template-columns: minmax(0,1fr); }
.range-debrief { margin-top: 1rem; }
.range-debrief h3:not(:first-child) { margin-top: 1.2rem; }

.range-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem);
  border-top: 1px solid var(--range-line);
  color: #827d7b;
  font-size: .75rem;
  flex-direction: column;
}

.range-home { display: none; }

.range-readiness-grid { grid-template-columns: minmax(0,1fr); }

@media (min-width: 900.02px) {
  .range-topbar { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .range-brand { justify-self: auto; }
  .range-hero { grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); }
  .range-mission-card { grid-template-columns: minmax(0, 1fr) auto; }
  .range-mission-head { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .7fr); }
  .range-runtime-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .range-runtime-tools { border-right: 1px solid var(--range-line); border-bottom: 0; }
  .range-home { display: inline; }
}

.range-hero h2 { font-size: clamp(2.45rem, 14vw, 4.3rem); }

@media (min-width: 620.02px) {
  .range-topbar { padding: .75rem clamp(1rem, 3vw, 2.5rem); }
  .range-brand img { width: 54px; height: 54px; }
  .range-sync { font-size: .66rem; }
  .range-gate { padding: clamp(1rem, 3vh, 2rem) 1rem; }
  .range-gate-card { padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: 26px; }
  .range-gate-card img { width: 96px; height: 96px; margin-bottom: .75rem; }
  .range-gate-card h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
  .range-shell { width: min(1280px, calc(100% - 2rem)); padding-top: clamp(2rem, 5vw, 4.5rem); }
  .range-tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range-prep-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range-clock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
  .range-evidence-layout { grid-template-columns: minmax(210px, .45fr) minmax(0, 1fr); }
  .range-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range-choice { min-height: 150px; }
  .range-score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .range-footer { flex-direction: row; }
  .range-readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range-hero h2 { font-size: clamp(2.8rem, 7vw, 6.6rem); }
}
@media (min-width: 900.02px) {
  .range-tool-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .range-prep-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .range-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .range-score-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .range-readiness-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}