:root {
  --bg-primary: #0a0e14;
  --bg-secondary: #131820;
  --bg-card: #1a212c;
  --border-subtle: #2a3340;
  --text-primary: #e6edf3;
  --text-secondary: #8b96a5;
  --accent-cyan: #4ec9d4;
  --accent-amber: #e0a060;
  --accent-red: #e06c75;
  --accent-green: #98c379;
  --accent-blue: #6699cc;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
  --max-width: 1100px;
  --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.55;
  font-size: 16px;
}

a { color: var(--accent-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.site-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 100;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px; gap: 16px; flex-wrap: wrap;
}
.site-brand { font-weight: 700; font-size: 1.1rem; color: var(--text-primary); }
.site-brand:hover { text-decoration: none; }
.site-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-nav a { color: var(--text-secondary); font-size: 0.95rem; }
.site-nav a:hover { color: var(--text-primary); text-decoration: none; }
.site-nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border-subtle);
  color: var(--text-primary); padding: 6px 10px;
  border-radius: var(--radius); cursor: pointer; font-size: 0.9rem;
}
@media (max-width: 720px) {
  .site-nav { display: none; flex-direction: column; width: 100%; background: var(--bg-secondary); padding: 12px 0; border-top: 1px solid var(--border-subtle); }
  .site-nav.open { display: flex; }
  .site-nav-toggle { display: block; }
}

.site-footer {
  background: var(--bg-secondary); border-top: 1px solid var(--border-subtle);
  padding: 24px 0; margin-top: 60px;
  color: var(--text-secondary); font-size: 0.9rem;
}
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; }

.btn { display: inline-block; background: var(--accent-cyan); color: var(--bg-primary); padding: 10px 20px; border-radius: var(--radius); border: none; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-subtle); }
.btn-compact { padding: 8px 16px; font-size: 0.9rem; }

.disclaimer-banner {
  background: var(--bg-secondary); border-left: 3px solid var(--accent-amber);
  padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 24px;
}

.eyebrow { color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }

h1, h2, h3, h4 { color: var(--text-primary); margin-top: 0; }
h1 { font-size: 2rem; margin-bottom: 16px; }
h2 { font-size: 1.5rem; margin-bottom: 12px; }
h3 { font-size: 1.2rem; margin-bottom: 8px; }

.page-main { padding-top: 40px; padding-bottom: 40px; }

.hero { padding-top: 60px; padding-bottom: 40px; }
.hero h1 { font-size: 2.4rem; }
.hero p { color: var(--text-secondary); font-size: 1.1rem; max-width: 700px; }

pre { background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-secondary); }

code { font-family: var(--font-mono); background: var(--bg-secondary); padding: 1px 6px; border-radius: 3px; font-size: 0.9em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* v0.8 unified shell */
.workstation-header-inner{max-width:1480px}
.brand-lockup{display:flex;align-items:center;gap:10px}
.brand-lockup span:last-child{display:flex;flex-direction:column;line-height:1.05}
.brand-lockup small{font-size:.62rem;color:#748399;font-weight:500;margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid #325468;background:#10222c;border-radius:8px;color:#55d9e7}
.header-search{flex:1;max-width:430px;margin:0 20px}
.header-search input{width:100%;background:#0a1118;border:1px solid #273645;border-radius:6px;color:#e7eef4;padding:8px 11px}
.header-search input:focus{outline:2px solid rgba(78,201,212,.35);border-color:#4ec9d4}
@media(max-width:900px){.header-search{display:none}}

/* ============================================================
   MARS ENGINEERING THEME v2.0 — token override + HUD system
   Appended layer; cascades over the base theme on every page.
   ============================================================ */
:root {
  --bg-primary: #0A0603;
  --bg-secondary: #120B06;
  --bg-card: #160E08;
  --border-subtle: #38271A;
  --text-primary: #F5EDE3;
  --text-secondary: #A8937E;
  --accent-cyan: #E06A28;    /* primary action → Mars orange */
  --accent-amber: #FFC857;
  --accent-red: #F0524F;
  --accent-green: #3FD68F;
  --accent-blue: #FFB25E;    /* ember for measurement accents */
  --mars: #E06A28;
  --mars-hi: #FF8A3D;
  --ember: #FFB25E;
  --mars-dim: rgba(224,106,40,.13);
  --line-2: rgba(224,106,40,.10);
  --radius: 0;               /* HUD: square corners */
}
body {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(224,106,40,.09), transparent 60%),
    radial-gradient(700px 600px at -10% 110%, rgba(224,106,40,.05), transparent 60%),
    var(--bg-primary);
}
a { color: var(--mars-hi); }
a:focus-visible, .btn:focus-visible { outline-color: var(--mars); }

/* HUD corner brackets on cards */
.card { position: relative; border-color: var(--border-subtle); }
.card::before, .card::after { content:""; position:absolute; width:15px; height:15px; pointer-events:none; }
.card::before { top:-1px; left:-1px; border-top:2px solid var(--mars); border-left:2px solid var(--mars); }
.card::after  { bottom:-1px; right:-1px; border-bottom:2px solid var(--mars); border-right:2px solid var(--mars); }

/* chamfered primary buttons */
.btn {
  background: linear-gradient(180deg, var(--mars-hi), var(--mars));
  color: #180B04;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  letter-spacing: .1em; text-transform: uppercase;
  font-size: .82rem; font-weight: 700;
}
.btn-secondary {
  background: transparent; color: var(--mars-hi);
  border: 1px solid var(--border-subtle); clip-path: none;
}
.btn-secondary:hover { border-color: var(--mars); }

/* headers / hero */
h1, h2, h3 { letter-spacing: .01em; }
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.12; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle); background: var(--bg-secondary);
  padding: 6px 14px; margin-bottom: 18px;
}
.eyebrow::before { content: "«"; color: var(--mars); }
.eyebrow::after  { content: "»"; color: var(--mars); }

.site-header { background: rgba(10,6,3,.92); backdrop-filter: blur(10px); }
.site-brand strong { letter-spacing: .06em; }
.site-brand small { display:block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text-secondary); }
.brand-logo-svg { vertical-align: middle; }
.header-search input, input[type="search"], input[type="text"], select, textarea {
  background: var(--bg-primary); border: 1px solid var(--border-subtle);
  color: var(--text-primary); font-family: var(--font-mono);
}
.header-search input:focus, input:focus, select:focus, textarea:focus { border-color: var(--mars); outline: none; }

table thead th {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-secondary);
}
code, pre, .mono { font-family: var(--font-mono); }
.disclaimer-banner { border-left-color: var(--accent-amber); }

/* status pill language shared with the workspace */
.pill { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2.5px 9px; white-space: nowrap; }
.pill-green { color: var(--accent-green); background: rgba(63,214,143,.12); border: 1px solid rgba(63,214,143,.3); }
.pill-amber { color: var(--accent-amber); background: rgba(255,200,87,.12); border: 1px solid rgba(255,200,87,.3); }
.pill-red   { color: var(--accent-red);   background: rgba(240,82,79,.12);  border: 1px solid rgba(240,82,79,.3); }
.pill-mars  { color: var(--mars-hi); background: var(--mars-dim); border: 1px solid var(--border-subtle); }
.pill-gray  { color: #6E5B4A; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }

/* v2.2: plain-language provenance banner on data pages */
.data-note{
  margin:14px auto 4px;border:1px solid var(--line-2);border-left:3px solid var(--mars);
  background:var(--bg-secondary);padding:11px 15px;font-size:.85rem;color:var(--text-secondary);
}
.data-note b{color:var(--text-primary)}
.data-note a{color:var(--mars-hi)}