/* Terminal Space Program — "mission console" theme.
   Dark instrument panel. Semantic palette (each colour means something, the way
   the game uses colour). Display in Space Grotesk, every readout in JetBrains
   Mono. The signature is the braille-plotted orbit; everything else stays quiet. */

/* ---- self-hosted type (latin subset, ~82KB total) ---- */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/SpaceGrotesk-400.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/SpaceGrotesk-500.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/SpaceGrotesk-700.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/JetBrainsMono-400.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/JetBrainsMono-700.woff2) format('woff2'); }

:root {
  --void: #070b12;          /* deep space background */
  --void-2: #090f18;        /* alternate band */
  --panel: #0d131c;         /* card / panel surface */
  --panel-2: #111a26;       /* raised surface (inputs, chips) */
  --line: #1b2735;          /* hairline border */
  --line-bright: #2a3a4d;   /* brighter border / hover */

  --cyan: #5fd7ff;          /* structure · info · primary · apoapsis */
  --amber: #ffaf00;         /* key numbers · highlight · periapsis */
  --green: #3ddc84;         /* go · install · success */
  --violet: #d75fff;        /* calculators · secondary */
  --red: #ff5f5f;           /* alert (used sparingly) */
  --craft: #ffd93d;         /* the craft marker */

  --ink: #e7eef6;           /* primary text */
  --ink-dim: #93a3b5;       /* secondary text */
  --ink-faint: #5a6a7c;     /* tertiary / captions */

  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --display: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --wrap: 1140px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(95, 215, 255, 0.10), transparent 62%),
    radial-gradient(900px 480px at 6% 12%, rgba(215, 95, 255, 0.05), transparent 60%),
    var(--void);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: #9be8ff; }
code, kbd { font-family: var(--mono); font-size: 0.9em; }
strong { color: var(--ink); font-weight: 700; }
em { font-style: normal; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }

/* ---- layout primitives ---- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.2rem); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-alt { background: var(--void-2); border-block: 1px solid var(--line); }

.kicker {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint);
}
.section-head { margin: 0 0 2rem; }
.section-head h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem); margin: 0.4rem 0 0; color: var(--ink);
}
.section-head .kicker::before { content: '// '; color: var(--cyan); }

/* braille divider between bands */
.braille-rule {
  font-family: var(--mono); color: var(--cyan); opacity: 0.28;
  text-align: center; letter-spacing: 0.1em; user-select: none;
  font-size: 0.8rem; padding-block: 0.4rem; overflow: hidden; white-space: nowrap;
}

/* ---- status-line header ---- */
.statusline {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.78rem;
  padding: 0.55rem clamp(1.2rem, 4vw, 2.2rem);
  background: rgba(7, 11, 18, 0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.statusline .brand { color: var(--ink); letter-spacing: 0.04em; font-weight: 700; }
.statusline .brand b { color: var(--cyan); font-weight: 700; }
.statusline .lamp { color: var(--green); }
.statusline nav { display: flex; gap: clamp(0.7rem, 2.4vw, 1.5rem); flex-wrap: wrap; align-items: center; }
.statusline nav a { color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; }
.statusline nav a:hover, .statusline nav a[aria-current="page"] { color: var(--cyan); }
.cursor { color: var(--cyan); animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bmc-wrap { display: inline-flex; align-items: center; line-height: 0; }
.bmc-wrap a { margin: 0 !important; }
.bmc-wrap img { box-shadow: none !important; }

/* ---- hero ---- */
.hero { padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
.hero-copy { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .prompt { font-family: var(--mono); color: var(--cyan); font-size: 0.92rem; margin: 0 0 0.9rem; }
.hero .prompt::before { content: '> '; color: var(--ink-faint); }
.hero h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04;
  font-size: clamp(2.4rem, 6.2vw, 4.1rem); margin: 0 0 1.1rem; color: #fff;
}
.hero h1 .accent { color: var(--cyan); }
.hero .lede { font-size: 1.1rem; color: var(--ink-dim); max-width: 34rem; margin: 0 0 1.8rem; }
.hero .lede strong { color: var(--ink); }

.cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.8rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.62rem 1.05rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line-bright); background: var(--panel-2); color: var(--ink);
  transition: transform 0.06s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--cyan); color: #fff; box-shadow: 0 0 0 1px rgba(95, 215, 255, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4); }
.btn-go { background: rgba(61, 220, 132, 0.12); border-color: rgba(61, 220, 132, 0.5); color: #9af0c0; }
.btn-go:hover { border-color: var(--green); color: #c9ffe2; box-shadow: 0 0 0 1px rgba(61, 220, 132, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4); }
.btn-calc { border-color: rgba(215, 95, 255, 0.45); color: #e7b6ff; }
.btn-calc:hover { border-color: var(--violet); color: #f3d6ff; box-shadow: 0 0 0 1px rgba(215, 95, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-dim); }

.hero-points { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 0.84rem; color: var(--ink-dim); display: grid; gap: 0.34rem; }
.hero-points li { padding-left: 1.4rem; position: relative; }
.hero-points li::before { content: '▸'; position: absolute; left: 0; color: var(--cyan); }

/* ---- orbit panel (the signature) ---- */
.orbit-panel {
  position: relative; min-width: 0; background: linear-gradient(180deg, #0a1019, #070d14);
  border: 1px solid var(--line-bright); border-radius: 12px;
  padding: 1.1rem 1.1rem 0.9rem; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), 0 20px 60px rgba(0, 0, 0, 0.45);
}
.orbit-panel::before, .orbit-panel::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 1px solid var(--cyan); opacity: 0.55;
}
.orbit-panel::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.orbit-panel::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.orbit-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.5rem;
}
.orbit-head .dot { color: var(--green); }
.orbit-shot { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 6px; background: #171717; }
.orbit-legend {
  display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center;
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); margin-top: 0.5rem;
}
.orbit-legend b { font-weight: 400; }
.orbit-legend .l-apo { color: var(--cyan); } .orbit-legend .l-peri { color: var(--amber); }
.orbit-legend .l-craft { color: var(--craft); }

.pitch-lead { font-size: 1.15rem; color: var(--ink-dim); max-width: 50rem; margin: 0 0 2rem; }
.pitch-lead strong { color: var(--ink); }

/* ---- install ---- */
.install-grid { display: grid; gap: 1.1rem; }
.install-block { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1.05rem 1.15rem; }
.install-block .head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.install-block h3 { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin: 0; }
.tag { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12rem 0.45rem; border-radius: 4px; border: 1px solid var(--line-bright); color: var(--ink-faint); }
.tag-go { color: #9af0c0; border-color: rgba(61, 220, 132, 0.5); background: rgba(61, 220, 132, 0.08); }
.install-block .note { color: var(--ink-dim); font-size: 0.9rem; margin: 0 0 0.7rem; }
.install-block .note a { color: var(--cyan); }
.cmd {
  position: relative; margin: 0; padding: 0.85rem 3.4rem 0.85rem 1rem;
  background: #060a10; border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.6; color: #cfe0ef;
  overflow-x: auto; white-space: pre;
}
.cmd code { color: inherit; font-size: inherit; white-space: pre; }
.cmd .p { color: var(--green); user-select: none; }
.copy {
  position: absolute; top: 0.5rem; right: 0.5rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; cursor: pointer;
  color: var(--cyan); background: var(--panel-2); border: 1px solid var(--line-bright);
  border-radius: 5px; padding: 0.22rem 0.5rem; transition: all 0.12s ease;
}
.copy:hover { border-color: var(--cyan); }
.copy.copied { color: #062; background: var(--green); border-color: var(--green); }
.install-tip { margin-top: 1.5rem; padding: 1rem 1.2rem; background: rgba(95, 215, 255, 0.06); border: 1px solid rgba(95, 215, 255, 0.2); border-radius: 9px; color: var(--ink-dim); font-size: 0.93rem; }
.install-tip code, .install-tip kbd { color: var(--cyan); font-weight: 700; }

/* ---- calculators teaser (index) ---- */
.calc-teaser { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--violet); border-radius: 0 10px 10px 0; padding: 1.5rem 1.6rem; }
.calc-teaser .mini { font-family: var(--mono); font-size: 0.8rem; line-height: 1.1; color: rgba(215, 95, 255, 0.55); white-space: pre; }
.calc-teaser h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 0 0 0.4rem; color: var(--ink); }
.calc-teaser p { margin: 0 0 1rem; color: var(--ink-dim); font-size: 0.95rem; }

/* ============================================================
   CALCULATORS PAGE
   ============================================================ */
.calc-intro h1 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.9rem, 4.6vw, 2.8rem); margin: 0.5rem 0 0.8rem; color: #fff; }
.calc-intro p { color: var(--ink-dim); max-width: 52rem; }
.calc-intro .note { border-left: 2px solid var(--amber); padding-left: 1rem; font-size: 0.95rem; }
.calc-list { display: flex; flex-direction: column; gap: 1.4rem; }

.calc {
  --accent: var(--cyan);
  background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--accent);
  border-radius: 0 0 12px 12px; padding: 1.4rem clamp(1.1rem, 3vw, 1.7rem);
}
.calc--phasing { --accent: var(--amber); }
.calc--basics { --accent: var(--cyan); }
.calc--coverage { --accent: var(--green); }
.calc--commnet { --accent: var(--violet); }
.calc-head h2 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 0 0 0.35rem; color: var(--ink); }
.calc-head h2 .n { color: var(--accent); font-family: var(--mono); font-size: 1rem; margin-right: 0.4rem; }
.calc-head p { margin: 0 0 1.1rem; color: var(--ink-dim); font-size: 0.93rem; max-width: 60rem; }
.calc-head em { color: var(--accent); font-weight: 600; }
.calc-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.3rem; align-items: start; }
.calc-inputs { display: grid; gap: 0.75rem; align-content: start; }
.calc-inputs label { display: grid; gap: 0.3rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.calc-inputs input, .calc-inputs select {
  font-family: var(--mono); font-size: 0.92rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--line-bright); border-radius: 7px; background: var(--panel-2); color: var(--ink);
}
.calc-inputs input:focus, .calc-inputs select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(95, 215, 255, 0.15); }
.calc-inputs select { appearance: none; }

.calc-output { font-family: var(--mono); font-size: 0.88rem; background: #060a10; border: 1px solid var(--line); border-radius: 9px; padding: 0.95rem 1.05rem; }
.out-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.out-label { color: var(--ink-dim); }
.out-val { color: var(--cyan); font-weight: 700; text-align: right; }
.out-val strong { color: var(--amber); }
.out-sub { color: var(--ink-faint); font-size: 0.74rem; margin: 0.05rem 0 0.5rem; }
.out-hr { border: none; border-top: 1px dashed var(--line-bright); margin: 0.55rem 0; }
.out-warn { color: var(--red); font-weight: 700; }
.calc-foot { font-size: 0.8rem; color: var(--ink-faint); margin: 1rem 0 0; }
.calc-foot code { color: var(--amber); }

.ref-table { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: 0.84rem; }
.ref-table caption { text-align: left; color: var(--ink-faint); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.5rem; }
.ref-table th, .ref-table td { text-align: left; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--line); color: var(--ink-dim); }
.ref-table th { color: var(--ink-faint); font-family: var(--mono); font-weight: 400; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; }
.ref-table td:first-child { font-family: var(--mono); color: var(--ink); }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); background: var(--void); padding-block: 2.2rem; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-family: var(--mono); font-size: 0.78rem; }
.site-footer .links a { color: var(--ink-dim); }
.site-footer .links a:hover { color: var(--cyan); }
.site-footer .fine { color: var(--ink-faint); font-size: 0.8rem; margin-top: 0.8rem; max-width: 50rem; }
.site-footer .fine a { color: var(--ink-dim); }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .orbit-panel { order: -1; }
  .calc-body { grid-template-columns: 1fr; }
  .calc-teaser { grid-template-columns: 1fr; }
  .calc-teaser .mini { display: none; }
}

/* ---- motion / a11y floor ---- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .cursor { opacity: 1; }
}