/* ============================================================
   theme-space.css — the cinematic aerospace treatment.

   Visual only. Loads AFTER app.css and overrides presentation.
   No content, layout semantics, routes or behaviour change here.

   Applies to the hub (/) and the password page. Tool pages keep
   the denser working chrome from app.css, which suits long
   sessions better than glass over a photograph.
   ============================================================ */

:root {
  --sp-ink:        #F5F8FF;
  --sp-ink-dim:    #AEBBCB;
  --sp-blue:       #5D8CFF;
  --sp-blue-lift:  #6FA8FF;
  --sp-edge:       rgba(120, 160, 220, .30);
  --sp-edge-hot:   rgba(110, 160, 255, .55);
  --sp-glow:       rgba(70, 130, 255, .25);
  --sp-shell:      1220px;
}

/* ---------- full-bleed background ---------- */
body.space {
  min-height: 100vh;
  color: var(--sp-ink);
  background:
    linear-gradient(90deg,
      rgba(2, 8, 18, .86) 0%,
      rgba(2, 8, 18, .68) 45%,
      rgba(2, 8, 18, .35) 75%,
      rgba(2, 8, 18, .45) 100%),
    url("/img/space-bg.jpg") center center / cover no-repeat fixed,
    #020812;
}

/* The fixed layer is the expensive part; drop it where it costs most. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  body.space {
    background:
      linear-gradient(180deg,
        rgba(2, 8, 18, .88) 0%,
        rgba(2, 8, 18, .72) 50%,
        rgba(2, 8, 18, .90) 100%),
      url("/img/space-bg-mobile.jpg") center center / cover no-repeat scroll,
      #020812;
  }
}

body.space .wrap { max-width: var(--sp-shell); }

/* ---------- navigation ---------- */
body.space .site-header {
  background: rgba(2, 8, 18, .32);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(120, 160, 220, .22);
}
body.space .site-header .wrap { min-height: 74px; }

body.space .brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
body.space .nav a { color: var(--sp-ink-dim); font-size: .95rem; }
body.space .nav a:hover,
body.space .nav a.active { color: #fff; }

/* ---------- page head ---------- */
body.space main { padding-top: 3.5rem; }

body.space .page-title {
  font-size: clamp(2.4rem, 4.2vw, 3.1rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
body.space .page-sub {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--sp-ink-dim);
  margin-bottom: 3.25rem;
}

/* ---------- section headings with the glowing rule ---------- */
body.space main h2 {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: clamp(1.5rem, 2.1vw, 1.8rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
}
body.space main h2::after {
  content: "";
  width: 74px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sp-blue-lift), rgba(93, 140, 255, 0));
  box-shadow: 0 0 12px rgba(93, 140, 255, .8);
}

/* ---------- glass cards ---------- */
body.space .card {
  background: linear-gradient(135deg,
    rgba(10, 25, 45, .82),
    rgba(4, 12, 25, .62));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--sp-edge);
  border-radius: 14px;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Active course — the dominant panel */
body.space #active-list { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 430px); }
body.space #active-list .card {
  position: relative;
  min-height: 200px;
  padding: 1.6rem 1.75rem;
  border-color: var(--sp-edge-hot);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .32),
    0 0 34px var(--sp-glow),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.space #active-list h3 {
  color: var(--sp-blue-lift);
  font-size: 1.28rem;
  font-weight: 700;
  padding-right: 3rem;
  margin-bottom: .85rem;
}
body.space #active-list p { color: #D7E2F2; font-size: .98rem; line-height: 1.6; }

/* the chevron only appears on cards that genuinely link somewhere */
body.space a.card-link::after {
  content: "→";
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--sp-edge-hot);
  color: var(--sp-blue-lift);
  font-size: .95rem;
  transition: background .2s ease, transform .2s ease;
}
body.space a.card-link:hover::after {
  background: rgba(93, 140, 255, .16);
  transform: translateX(2px);
}

body.space .card-link:hover {
  transform: translateY(-3px);
  border-color: var(--sp-blue);
  background: linear-gradient(135deg,
    rgba(14, 32, 56, .86),
    rgba(6, 16, 32, .66));
  box-shadow:
    0 22px 55px rgba(0, 0, 0, .36),
    0 0 42px rgba(70, 130, 255, .32),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* Queued — three equal columns, quieter than Active */
body.space #tool-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
body.space #tool-list .card {
  background: rgba(5, 13, 27, .65);
  border: 1px solid rgba(130, 160, 200, .35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
  padding: 1.4rem 1.5rem;
  min-height: 150px;
}
body.space #tool-list h3 {
  color: #EAF1FF;
  font-size: 1.08rem;
  font-weight: 650;
  margin-bottom: .6rem;
}
body.space #tool-list p { color: var(--sp-ink-dim) !important; }
body.space #tool-list .card:hover {
  border-color: rgba(110, 160, 255, .5);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .3), 0 0 26px rgba(70, 130, 255, .16);
}

/* ---------- class files ---------- */
body.space .gate {
  margin-top: 3.25rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(120, 160, 220, .16);
}
body.space .gate .btn {
  background: rgba(8, 20, 38, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--sp-edge-hot);
  color: var(--sp-blue-lift);
  padding: .65rem 1.4rem;
  border-radius: 10px;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
body.space .gate .btn:hover {
  border-color: var(--sp-blue);
  background: rgba(14, 32, 58, .7);
  box-shadow: 0 0 24px rgba(70, 130, 255, .3);
}
body.space .gate p { color: var(--sp-ink-dim); }

body.space .footer {
  border-top: 1px solid rgba(120, 160, 220, .14);
  color: #8C9BB0;
}

/* ---------- password page ---------- */
body.space .gate-box {
  background: linear-gradient(135deg,
    rgba(10, 25, 45, .86),
    rgba(4, 12, 25, .70));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--sp-edge-hot);
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .45),
    0 0 40px var(--sp-glow),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.space .gate-box h1 { color: #fff; }
body.space .gate-box input[type="password"] {
  background: rgba(2, 8, 18, .6);
  border-color: var(--sp-edge);
  color: var(--sp-ink);
}
body.space .gate-box .btn.primary {
  background: var(--sp-blue);
  border-color: var(--sp-blue);
  color: #04101f;
  font-weight: 650;
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  body.space #tool-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 660px) {
  body.space #tool-list,
  body.space #active-list { grid-template-columns: 1fr; }
  body.space main { padding-top: 2rem; }
  body.space .page-sub { margin-bottom: 2rem; }
  body.space #active-list .card { min-height: 0; padding: 1.25rem 1.35rem; }
}

/* ---------- light theme keeps working ---------- */
:root[data-theme="light"] body.space,
body.space:has(:root[data-theme="light"]) { background: var(--bg); }
:root[data-theme="light"] .site-header { backdrop-filter: none; }

/* ---------- forced colors (Windows High Contrast) ----------
   This machine runs High Contrast, which by default replaces every author
   colour with system colours and would erase this design entirely.

   The design is already white-on-near-black with large type, so opting out
   keeps it legible rather than fighting it. Borders are made explicit so
   panel edges survive, and `prefers-contrast: more` still gets the plain
   treatment for anyone who genuinely needs it.

   If High Contrast is on deliberately, delete this block and the interface
   falls back to system colours.
   ------------------------------------------------------------ */
@media (forced-colors: active) {
  body.space,
  body.space .card,
  body.space .gate-box,
  body.space .site-header,
  body.space .btn,
  body.space main h2::after,
  body.space a.card-link::after {
    forced-color-adjust: none;
  }
  /* forced-color-adjust alone is not enough: the UA still replaces the
     background, so it has to be restated. */
  body.space {
    background:
      linear-gradient(90deg,
        rgba(2, 8, 18, .86) 0%,
        rgba(2, 8, 18, .68) 45%,
        rgba(2, 8, 18, .35) 75%,
        rgba(2, 8, 18, .45) 100%),
      url("/img/space-bg.jpg") center center / cover no-repeat fixed,
      #020812 !important;
    color: #F5F8FF !important;
  }
  /* the !important above also beats the mobile rule, so restate it here */
  @media (max-width: 900px) {
    body.space {
      background:
        linear-gradient(180deg,
          rgba(2, 8, 18, .88) 0%,
          rgba(2, 8, 18, .72) 50%,
          rgba(2, 8, 18, .90) 100%),
        url("/img/space-bg-mobile.jpg") center center / cover no-repeat scroll,
        #020812 !important;
    }
  }
  body.space .card {
    background: linear-gradient(135deg,
      rgba(10, 25, 45, .82), rgba(4, 12, 25, .62)) !important;
    border: 1px solid rgba(140, 180, 240, .5) !important;
  }
  body.space #tool-list .card {
    background: rgba(5, 13, 27, .72) !important;
  }
  body.space .gate-box {
    background: linear-gradient(135deg,
      rgba(10, 25, 45, .88), rgba(4, 12, 25, .72)) !important;
    border: 1px solid rgba(140, 180, 240, .5) !important;
  }
  body.space .site-header {
    background: rgba(2, 8, 18, .55) !important;
    border-bottom: 1px solid rgba(140, 180, 240, .35) !important;
  }
  body.space .page-title,
  body.space main h2,
  body.space .brand { color: #fff !important; }
  body.space .page-sub,
  body.space #tool-list p,
  body.space .gate p { color: #AEBBCB !important; }
  body.space #active-list h3,
  body.space a.card-link::after,
  body.space .gate .btn { color: #6FA8FF !important; }
  body.space #active-list p { color: #D7E2F2 !important; }
  body.space main h2::after {
    background: linear-gradient(90deg, #6FA8FF, rgba(93, 140, 255, 0)) !important;
  }
}

/* Windows High Contrast reports BOTH forced-colors: active and
   prefers-contrast: more, so a blanket prefers-contrast rule would undo
   everything above. Scope the plain fallback to people who asked for more
   contrast WITHOUT forced colours — a genuine preference, not High Contrast. */
@media (prefers-contrast: more) and (forced-colors: none) {
  body.space {
    background: #020812 !important;
  }
  body.space .card,
  body.space .gate-box {
    background: #06101D !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #7FA8E8;
  }
  body.space main h2::after { display: none; }
}

/* ============================================================
   SHARED TYPOGRAPHY — every page, no background

   The hub and login page carry the photographic backgrounds.
   The working pages (Flag Board, Drill, Vault) keep their plain
   surface, because glass over a photograph is tiring to read for
   an hour at a time — but they should still look like the same
   application. So: type, colour and accents travel; scenery does not.

   Applied via body.typeset, which every page carries.
   ============================================================ */

body.typeset {
  color: #F5F8FF;
  -webkit-font-smoothing: antialiased;
}

body.typeset .wrap { max-width: var(--sp-shell); }

/* nav */
body.typeset .brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
body.typeset .site-header .wrap { min-height: 74px; }
body.typeset .nav a { color: var(--sp-ink-dim); font-size: .95rem; }
body.typeset .nav a:hover,
body.typeset .nav a.active { color: #fff; }

/* page head */
body.typeset main { padding-top: 3rem; }
body.typeset .page-title {
  font-size: clamp(2.1rem, 3.4vw, 2.7rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
}
body.typeset .page-sub {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: var(--sp-ink-dim);
}

/* section headings + the glowing accent rule */
body.typeset main h2 {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: clamp(1.4rem, 1.9vw, 1.65rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
}
body.typeset main h2::after {
  content: "";
  flex: none;
  width: 74px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sp-blue-lift), rgba(93, 140, 255, 0));
  box-shadow: 0 0 12px rgba(93, 140, 255, .8);
}
body.typeset main h3 { color: #EAF1FF; font-weight: 650; }

/* accents */
body.typeset a { color: var(--sp-blue-lift); }
body.typeset .btn.primary {
  background: var(--sp-blue);
  border-color: var(--sp-blue);
  color: #04101f;
  font-weight: 650;
}
body.typeset .stat .num { letter-spacing: -0.02em; }
body.typeset .stat.ok .num { color: #5FD08A; }
body.typeset .badge.ok { color: #5FD08A; border-color: #5FD08A; }

/* the working pages keep denser cards, but same radius + border language */
body.typeset .card,
body.typeset .topic,
body.typeset .stat { border-radius: 12px; }
body.typeset .card,
body.typeset .stat { border-color: rgba(120, 160, 220, .22); }
body.typeset .topic { border-color: rgba(120, 160, 220, .18); }

body.typeset .footer { color: #8C9BB0; }

@media (forced-colors: active) {
  body.typeset main h2::after { forced-color-adjust: none; }
}