/* Mars Arena — mission-control theme.
   Palette per MARS_ARENA_PORTFOLIO_MANIFEST §5: basalt near-black, oxidised
   Mars red, PDS amber, cold telemetry cyan. Monospace is reserved for
   provenance and telemetry so that a number always looks like a measurement. */
:root {
  --bg: #0c0b0a;
  --bg2: #14120f;
  --bg3: #1c1915;
  --bg4: #241f19;
  --fg: #ece7df;
  --fg-dim: #a39a8d;
  --fg-faint: #6d655b;

  --rust: #c65a2e;          /* oxidised Mars red — the product's own accent */
  --rust-dim: #8a3d1e;
  --amber: #e0a13a;         /* PDS amber — archive facts */
  --cyan: #58b6c8;          /* telemetry cyan — computed values */
  --violet: #8e7bc3;        /* knowledge layer, kept away from archive colours */

  --border: #2b251e;
  --border-hi: #3d342a;
  --danger: #d8574f;
  --ok: #6fae72;
  --warn: #d9944f;

  --title-h: 27px;
  --menubar-h: 36px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font: 13px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- menubar ---------- */
#menubar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--menubar-h);
  display: flex; align-items: center; gap: 10px; padding: 0 11px;
  background: linear-gradient(#191510, #100d0a);
  border-bottom: 1px solid var(--border);
  z-index: 5000; user-select: none;
}
.mb-title {
  font-weight: 700; letter-spacing: .06em; margin-right: 4px; white-space: nowrap;
  font-size: 13px; text-transform: uppercase;
}
.mb-title span { color: var(--rust); }
.mb-buttons { display: flex; gap: 3px; flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.mb-buttons::-webkit-scrollbar { display: none; }
.mb-btn {
  padding: 3px 9px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  color: var(--fg-dim); border: 1px solid transparent; font-size: 12px;
}
.mb-btn:hover { color: var(--fg); background: var(--bg3); }
.mb-btn.on { color: var(--rust); border-color: var(--rust-dim); background: rgba(198,90,46,.10); }
.mb-right { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.mb-stat {
  font-family: var(--mono); font-size: 11px; color: var(--fg-dim);
  padding: 2px 8px; border-radius: 4px; background: var(--bg3); border: 1px solid var(--border);
  white-space: nowrap;
}
.mb-stat b { color: var(--amber); font-weight: 600; }

/* ---------- desktop & windows ---------- */
#desktop { position: fixed; top: var(--menubar-h); left: 0; right: 0; bottom: 0; overflow: hidden; }
.win {
  position: absolute; display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  min-width: 200px; min-height: 120px;
}
.win.focused { border-color: var(--border-hi); box-shadow: 0 12px 38px rgba(0,0,0,.75); }
.win-title {
  height: var(--title-h); flex: 0 0 var(--title-h);
  display: flex; align-items: center; gap: 8px; padding: 0 9px;
  background: linear-gradient(#221d17, #191510);
  border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0;
  cursor: grab; user-select: none;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: #bdb4a7;
}
.win.focused .win-title { color: var(--fg); }
.win-title:active { cursor: grabbing; }
.win-dock, .win-close {
  width: 17px; height: 17px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-faint); cursor: pointer; font-size: 12px; line-height: 1; flex: none;
}
.win-dock { margin-left: auto; font-family: var(--mono); }
.win-dock:hover { color: var(--cyan); background: var(--bg4); }
.win-close:hover { background: var(--danger); color: #fff; }
.win-body { flex: 1 1 auto; overflow: auto; position: relative; }
.win-body.noscroll { overflow: hidden; }
.win-grip { position: absolute; right: 0; bottom: 0; width: 17px; height: 17px; cursor: nwse-resize; z-index: 10; }
.win-grip::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px;
  border-right: 2px solid #4b4238; border-bottom: 2px solid #4b4238;
}
/* left/right dock edges — the IDE-style pull the owner asked for */
.win.docked-right, .win.docked-left { border-radius: 0; box-shadow: none; }
.win.docked-right { border-right: 0; border-top: 0; border-bottom: 0; }
.win.docked-left { border-left: 0; border-top: 0; border-bottom: 0; }
.win-edge {
  position: absolute; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 11;
}
.win-edge.left { left: -3px; }
.win-edge.right { right: -3px; }
.win-edge:hover { background: rgba(88,182,200,.25); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg3); color: var(--fg); border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 10px; font-size: 12px; cursor: pointer; user-select: none;
}
.btn:hover { border-color: var(--rust-dim); color: #fff; }
.btn:active { background: var(--bg4); }
.btn.primary { background: var(--rust-dim); border-color: var(--rust-dim); color: #fff; }
.btn.primary:hover { background: var(--rust); }
.btn.small { padding: 2px 7px; font-size: 11px; }
.btn.on { color: var(--rust); border-color: var(--rust-dim); background: rgba(198,90,46,.10); }
.btn:disabled { opacity: .42; cursor: default; pointer-events: none; }
.input, .select, textarea.input {
  background: #080706; color: var(--fg); border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 7px; font-size: 12px; outline: none; font-family: var(--mono);
}
.input:focus, .select:focus { border-color: var(--rust-dim); }
.select { font-family: var(--sans); }
label.chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; color: var(--fg-dim); user-select: none; }
label.chk input { accent-color: var(--rust); }
input[type=range] { accent-color: var(--rust); height: 16px; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th {
  position: sticky; top: 0; z-index: 2; text-align: left; padding: 5px 8px;
  background: var(--bg3); color: var(--fg-dim); font-weight: 600;
  border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; cursor: pointer;
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
}
.table th:hover { color: var(--fg); }
.table th.sorted { color: var(--amber); }
.table td { padding: 4px 8px; border-bottom: 1px solid #1a1612; white-space: nowrap; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: rgba(198,90,46,.08); }
.table tbody tr.sel { background: rgba(198,90,46,.17); }
.table .num { font-family: var(--mono); }

/* ---------- score bar (preserves the original arena look) ---------- */
.bar { display: inline-flex; align-items: center; gap: 7px; }
.bar-track { width: 74px; height: 5px; border-radius: 3px; background: #241f19; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--rust-dim), var(--rust)); }
.bar-val { font-family: var(--mono); font-size: 11.5px; color: var(--fg); min-width: 34px; text-align: right; }

/* ---------- tags ---------- */
.tag {
  font-size: 10px; font-family: var(--mono); padding: 1px 6px; border-radius: 9px;
  background: var(--bg3); color: var(--fg-dim); border: 1px solid var(--border); white-space: nowrap;
}
/* The three claims channels from CONTRACT.md. Every number on screen wears one:
   amber came from the archive unchanged, cyan was computed here, violet was said
   by a person on camera. */
.tag.archive { color: var(--amber); border-color: #6a4f1f; background: rgba(224,161,58,.09); }
.tag.computed { color: var(--cyan); border-color: #24525c; background: rgba(88,182,200,.09); }
.tag.corpus { color: var(--violet); border-color: #463d6b; background: rgba(142,123,195,.10); }
.tag.fact { color: var(--ok); border-color: #2c4c2e; background: rgba(111,174,114,.09); }
.tag.inference { color: var(--cyan); border-color: #24525c; background: rgba(88,182,200,.09); }
.tag.speculation { color: var(--warn); border-color: #6a4a20; background: rgba(217,148,79,.09); }
.tag.p0 { color: var(--fg-faint); }
.tag.p1 { color: var(--fg-dim); }
.tag.p2 { color: var(--amber); border-color: #6a4f1f; }
.tag.p3 { color: var(--rust); border-color: var(--rust-dim); background: rgba(198,90,46,.12); }

/* ---------- misc ---------- */
.pane { padding: 9px; }
.row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row + .row { margin-top: 7px; }
.col { display: flex; flex-direction: column; gap: 4px; }
.sep { height: 1px; background: var(--border); margin: 9px 0; }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.mono { font-family: var(--mono); }
.fld-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.msg-empty { padding: 20px 12px; color: var(--fg-faint); text-align: center; font-size: 12px; }
.err { color: var(--danger); font-size: 12px; }
.canvas-host { position: absolute; inset: 0; }
.canvas-host canvas { display: block; width: 100%; height: 100%; }
.hud {
  position: absolute; pointer-events: none; font-family: var(--mono); font-size: 10.5px;
  color: var(--fg-dim); background: rgba(8,7,6,.72); padding: 3px 7px; border-radius: 4px;
  border: 1px solid var(--border); white-space: pre;
}
.hud.tl { left: 8px; top: 8px; }
.hud.bl { left: 8px; bottom: 8px; }
.hud.br { right: 8px; bottom: 8px; }
.overlay-btns { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; z-index: 3; }

/* ---------- the foot of the stage ----------
   The switch and the legend both want the bottom of the globe, and when they were
   positioned independently they overlapped: the legend ran under the switch and its
   last few words came out the other side as loose fragments. Stacking them in one
   column means neither can be placed on top of the other by a change in the length
   of the other's text. */
.stage-foot {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.stage-foot > * { pointer-events: auto; max-width: 100%; }

/* Larger than the buttons top-right because it answers a different kind of question.
   Those change how the globe is drawn; this changes what is on it, which is the only
   choice on this screen a first-time reader has to make before anything means
   anything. */
.layer-switch {
  display: flex; gap: 5px;
  padding: 4px; border-radius: 9px;
  background: rgba(8, 7, 6, .82); border: 1px solid var(--border);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
}
.ls-btn {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 11px; border-radius: 6px; white-space: nowrap;
  font-family: var(--sans); font-size: 12px; color: var(--fg-faint);
  background: transparent; border: 1px solid transparent;
}
.ls-btn:hover { color: var(--fg-dim); border-color: var(--border-hi); }
/* Off is legible, not hidden: a reader has to be able to find the layer they turned
   off. Only the opacity of the glyph and the weight of the label carry the state. */
.ls-btn .ls-g { font-size: 13px; line-height: 1; opacity: .35; }
.ls-btn.on { color: var(--fg); background: var(--bg3); border-color: var(--border-hi); }
.ls-btn.on .ls-g { opacity: 1; }
.ls-btn .ls-n {
  font-family: var(--mono); font-size: 11px; color: var(--fg-faint);
  padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .04);
}
.ls-btn.on .ls-n { color: var(--fg-dim); background: rgba(255, 255, 255, .07); }
@media (max-width: 560px) {
  .layer-switch { flex-wrap: wrap; justify-content: center; }
  .ls-btn { padding: 5px 8px; font-size: 11.5px; }
}

/* The legend, as the second row of that column. `position:static` overrides .hud's
   absolute placement so the flex column can own where it goes. */
.stage-foot .hud {
  position: static; white-space: normal; line-height: 1.7;
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center;
  justify-content: center;
}
.legend-part { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.legend-part + .legend-part {
  border-left: 1px solid var(--border-hi); padding-left: 14px;
}

/* provenance strip — every data surface carries its source */
.prov {
  font-family: var(--mono); font-size: 10px; color: var(--fg-faint);
  padding: 5px 9px; border-top: 1px solid var(--border); background: #0a0908;
  line-height: 1.5;
}
.prov b { color: var(--fg-dim); font-weight: 600; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #322b23; border-radius: 5px; border: 2px solid var(--bg2); }
::-webkit-scrollbar-thumb:hover { background: #443b30; }