/* fugue HCI design system — literate / terminal.
   The shared visual language for fugue and the swarm UIs that follow.
   Tokens first, then components. Box-drawing panels, ledger lines, COGGY
   glyphs, planetary role chips. Mono everywhere; dim by default; colour earns
   attention. Nothing decorative — every weight and hue carries meaning. */

:root {
  /* palette — a dim terminal at rest, signal colours sparingly */
  --bg:      #0a0d0e;
  --bg-2:    #0e1314;
  --fg:      #c4ccc6;
  --dim:     #5c6562;
  --faint:   #2a3230;
  --line:    #1b2321;
  --accent:  #e0a458;   /* amber — structure, headings, the brand */
  --ok:      #7fb069;   /* green — verdict true, healthy */
  --bad:     #d16666;   /* red — verdict false, dropped, refuted */
  --info:    #6fa8c7;   /* blue — neutral data */
  --warn:    #d6a84a;

  /* planetary roles (SWARM.md) — each owns a hue */
  --mercury: #9fb4b0; --venus: #d6a4c4; --mars: #d16666;
  --jupiter: #e0a458; --saturn: #8a93b0; --sol: #e6c86a; --luna: #9fc7d6;

  --mono: "Berkeley Mono","JetBrains Mono","SF Mono",ui-monospace,"Menlo",monospace;
  --u: 0.5rem;                 /* spacing unit */
  --maxw: 76ch;                /* a readable measure, terminal-width */
}

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
  margin: 0; padding: calc(var(--u) * 4) var(--u);
  background: var(--bg); color: var(--fg);
  font-family: var(--mono); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { max-width: var(--maxw); margin: 0 auto; }

::selection { background: var(--accent); color: var(--bg); }

a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--faint); }
a:hover { border-bottom-color: var(--accent); }

h1,h2,h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h1 { color: var(--accent); font-size: 1.7rem; margin: 0 0 var(--u); }
h2 { color: var(--fg); font-size: 1.15rem; margin: calc(var(--u)*4) 0 var(--u);
     border-bottom: 1px solid var(--line); padding-bottom: calc(var(--u)/2); }
h3 { color: var(--dim); font-size: 0.95rem; margin: calc(var(--u)*2) 0 var(--u);
     text-transform: uppercase; letter-spacing: 0.08em; }
p  { margin: var(--u) 0; }
.dim   { color: var(--dim); }
.faint { color: var(--faint); }

/* ── panel ── a box-drawn frame with a title tab in the top border ───────── */
.panel {
  position: relative;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--bg-2);
  padding: calc(var(--u)*2.5) calc(var(--u)*2) calc(var(--u)*2);
  margin: calc(var(--u)*2) 0;
}
.panel > .tab {
  position: absolute; top: -0.72em; left: var(--u);
  background: var(--bg); padding: 0 var(--u);
  color: var(--accent); font-size: 0.8rem; letter-spacing: 0.06em;
}
.panel > .tab::before { content: "┌ "; color: var(--faint); }
.panel > .tab::after  { content: " ┐"; color: var(--faint); }

/* ── ledger ── the honesty stream: dim mono lines, glyph-prefixed ────────── */
.ledger { margin: var(--u) 0; font-size: 0.85rem; color: var(--dim); }
.ledger .line { display: block; white-space: pre-wrap; }
.ledger .line::before { content: "· "; color: var(--faint); }
.ledger .k { color: var(--info); }
.ledger .v { color: var(--fg); }

/* ── verdict ── proof made visual ────────────────────────────────────────── */
.verdict { font-weight: 600; }
.verdict.ok::after  { content: " ✓"; }
.verdict.bad::after { content: " ✗"; }
.ok  { color: var(--ok); }
.bad { color: var(--bad); }

/* ── code ── */
pre, code { font-family: var(--mono); }
pre {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: 2px; padding: calc(var(--u)*1.5); overflow-x: auto;
  font-size: 0.85rem; color: var(--fg); margin: var(--u) 0;
}
code { color: var(--accent); }
pre code { color: inherit; }
.cmt { color: var(--dim); }

/* ── table ── primitives, claims ─────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: var(--u) 0; font-size: 0.88rem; }
th, td { text-align: left; padding: calc(var(--u)*0.75) var(--u); border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; }
td code { color: var(--accent); }

/* ── glyph / chip ── COGGY + planetary vocabulary ────────────────────────── */
.glyph { color: var(--accent); }
.chip {
  display: inline-block; padding: 0 calc(var(--u)*0.75); margin: 0 calc(var(--u)/4);
  border: 1px solid var(--line); border-radius: 2px; font-size: 0.78rem; color: var(--dim);
}
.role { border-color: currentColor; }
.role.mercury { color: var(--mercury); } .role.venus { color: var(--venus); }
.role.mars { color: var(--mars); } .role.jupiter { color: var(--jupiter); }
.role.saturn { color: var(--saturn); } .role.sol { color: var(--sol); }
.role.luna { color: var(--luna); }

/* ── status dot ── for /health ──────────────────────────────────────────── */
.dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%;
       background: var(--ok); margin-right: calc(var(--u)/2); vertical-align: middle; }
.dot.bad { background: var(--bad); }

/* ── provenance footer ── no anonymous artifacts ─────────────────────────── */
footer { max-width: var(--maxw); margin: calc(var(--u)*6) auto 0;
         border-top: 1px solid var(--line); padding-top: calc(var(--u)*2);
         font-size: 0.78rem; color: var(--dim); }
footer dl { display: grid; grid-template-columns: max-content 1fr; gap: 0 var(--u); margin: 0; }
footer dt { color: var(--faint); } footer dd { margin: 0; color: var(--dim); }