/* Barycenters console — built on the design system, not beside it.
 *
 * Tokens come from the real source of truth. Nothing here invents a colour.
 *
 * THE COLOR LAW (enforced, not decorative):
 *   navy = consequence space · blue-white = lawful structure · steel = structure
 *   CYAN = ACTIVE RUNTIME ONLY — if something is cyan, the system is doing something.
 *
 * In this console that law does honest work: cyan appears on a LIVE service, a bound
 * boundary, and an ACCEPT. It never appears on an idle field, a heading, or a button that
 * merely could be pressed. And `authority_effect: 0` is deliberately NOT cyan, because the
 * system is not governing anything yet — the brand refuses to overstate it for us.
 */

/* The design system is linked DIRECTLY from the HTML (vendor/tokens.css, vendor/styles.css),
 * not @imported from here.
 *
 * @import was a trap twice over: it must precede every other rule, and — the one that actually
 * bit — a browser holding a STALE copy of this file keeps using its old @import, so the fix is
 * invisible no matter how correct the vendored files are. A <link> cannot be masked by a stale
 * parent stylesheet. Keep the tokens in the HTML; keep only real rules in here. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bc-void);
  color: var(--bc-text-primary);
  font-family: var(--bc-font-body);
  font-size: var(--bc-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 820px, not 1080. The prose caps at ~70ch for readability, so a 1080px panel left a dead
   gutter down the right of every card — which reads as broken, not as a considered column.
   Fit the container to the measure rather than letting the measure rattle around inside it.
   (I could not see this until I actually rendered the page. It is obvious the moment you do.) */
.shell { max-width: 820px; margin: 0 auto; padding: var(--bc-space-7) var(--bc-space-5) 6rem; }

/* ── masthead ─────────────────────────────────────────────── */
header.mast {
  display: flex; flex-wrap: wrap; gap: var(--bc-space-4);
  align-items: flex-end; justify-content: space-between;
  border-bottom: 1px solid var(--bc-border);
  padding-bottom: var(--bc-space-5); margin-bottom: var(--bc-space-6);
}
h1 {
  font-family: var(--bc-font-display); font-weight: 500;
  font-size: var(--bc-text-2xl); letter-spacing: -0.02em;
  color: var(--bc-text-on-dark); margin: 0;
}
.tagline { color: var(--bc-text-secondary); margin: var(--bc-space-1) 0 0; font-size: var(--bc-text-sm); }

/* Service state — derived from /readyz, NEVER hardcoded. Cyan only when genuinely live. */
.link-state {
  display: flex; align-items: center; gap: var(--bc-space-2);
  font-family: var(--bc-font-mono); font-size: var(--bc-text-xs);
  padding: var(--bc-space-2) var(--bc-space-3);
  border: 1px solid var(--bc-border); border-radius: var(--bc-radius-sm);
  background: var(--bc-surface-1);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bc-text-disabled); flex: 0 0 auto; }
.link-state[data-state="live"] { border-color: var(--bc-cyan); }
.link-state[data-state="live"] .dot { background: var(--bc-cyan); box-shadow: 0 0 8px var(--bc-cyan); }
.link-state[data-state="live"] .txt { color: var(--bc-cyan); }
.link-state[data-state="degraded"] .dot { background: var(--bc-error); }
.link-state[data-state="degraded"] .txt { color: var(--bc-error); }
.link-state[data-state="offline"] .txt { color: var(--bc-text-tertiary); }

/* ── steps ────────────────────────────────────────────────── */
.step {
  background: var(--bc-surface-1);
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm);
  padding: var(--bc-space-5);
  margin-bottom: var(--bc-space-4);
}
.step[hidden] { display: none; }
.step-head { display: flex; align-items: baseline; gap: var(--bc-space-3); margin-bottom: var(--bc-space-2); }
.step-n {
  font-family: var(--bc-font-mono); font-size: var(--bc-text-xs);
  color: var(--bc-text-tertiary); border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-sm); padding: 0.1rem 0.4rem; flex: 0 0 auto;
}
.step h2 {
  font-family: var(--bc-font-display); font-weight: 500; font-size: var(--bc-text-xl);
  color: var(--bc-text-on-dark); margin: 0; letter-spacing: -0.01em;
}
.step p.hint { color: var(--bc-text-secondary); font-size: var(--bc-text-sm); margin: 0 0 var(--bc-space-4); max-width: 70ch; }

/* ── controls ─────────────────────────────────────────────── */
label { display: block; font-size: var(--bc-text-sm); color: var(--bc-text-secondary); margin-bottom: var(--bc-space-1); }
input[type="text"], textarea, select {
  width: 100%; padding: var(--bc-space-3);
  background: var(--bc-steel-slate); color: var(--bc-text-primary);
  border: 1px solid var(--bc-border); border-radius: var(--bc-radius-sm);
  font-family: var(--bc-font-body); font-size: var(--bc-text-sm);
}
textarea { font-family: var(--bc-font-body); min-height: 4.5rem; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--bc-electric-blue);   /* focus = the system responding */
  box-shadow: 0 0 0 1px var(--bc-electric-blue);
}
.row { display: flex; gap: var(--bc-space-3); flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 200px; }
.row > .narrow { flex: 0 0 auto; }

button {
  font-family: var(--bc-font-body); font-size: var(--bc-text-sm); font-weight: 600;
  padding: var(--bc-space-3) var(--bc-space-4);
  background: var(--bc-surface-2); color: var(--bc-text-primary);
  border: 1px solid var(--bc-border-strong); border-radius: var(--bc-radius-sm);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--bc-electric-blue); color: var(--bc-text-on-dark); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--bc-electric-blue); outline-offset: 2px; }
/* The authority event gets STRUCTURE, not cyan — signing is a human act, not the runtime
   doing something. The one button a machine cannot press is the one that never lights up. */
button.authority { border-width: 2px; border-color: var(--bc-text-secondary); }
button.danger { border-color: rgba(255,77,79,0.45); color: var(--bc-error); }

/* ── key custody ──────────────────────────────────────────── */
.custody {
  border-left: 2px solid var(--bc-border-strong);
  padding-left: var(--bc-space-4); margin-top: var(--bc-space-4);
}
.custody b { color: var(--bc-text-on-dark); display: block; font-size: var(--bc-text-sm); }
.custody span { color: var(--bc-text-secondary); font-size: var(--bc-text-sm); }
.warn {
  border-left: 2px solid var(--bc-error);
  padding-left: var(--bc-space-4); margin-top: var(--bc-space-4);
}
.warn b { color: var(--bc-error); display: block; font-size: var(--bc-text-sm); }
.warn span { color: var(--bc-text-secondary); font-size: var(--bc-text-sm); }

/* ── data ─────────────────────────────────────────────────── */
.mono, code {
  font-family: var(--bc-font-mono); font-size: var(--bc-text-xs);
  color: var(--bc-text-tertiary); word-break: break-all;
}
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--bc-space-2) var(--bc-space-4); margin-top: var(--bc-space-3); }
.kv dt { font-family: var(--bc-font-mono); font-size: var(--bc-text-xs); color: var(--bc-text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; }
.kv dd { margin: 0; font-family: var(--bc-font-mono); font-size: var(--bc-text-xs); color: var(--bc-text-primary); word-break: break-all; }

/* A bound boundary IS the system doing something — cyan is licensed here. */
.bound { color: var(--bc-cyan); }
.inert { color: var(--bc-text-tertiary); }

/* ── decisions ────────────────────────────────────────────── */
.decision {
  display: flex; gap: var(--bc-space-4); align-items: baseline;
  padding: var(--bc-space-3) 0; border-bottom: 1px solid var(--bc-border);
  font-family: var(--bc-font-mono); font-size: var(--bc-text-xs);
}
.decision:last-child { border-bottom: 0; }
.decision .verdict { flex: 0 0 5.5rem; font-weight: 700; }
.decision.accept .verdict { color: var(--bc-cyan); }     /* admission active */
.decision.refuse .verdict { color: var(--bc-error); }
.decision .why { color: var(--bc-text-secondary); flex: 1; word-break: break-word; }
.decision .seq { color: var(--bc-text-tertiary); flex: 0 0 auto; }

/* Honest empty state — never a confident zero. */
.empty { color: var(--bc-text-tertiary); font-family: var(--bc-font-mono); font-size: var(--bc-text-xs); padding: var(--bc-space-4) 0; }

.err {
  margin-top: var(--bc-space-3); padding: var(--bc-space-3);
  border: 1px solid rgba(255,77,79,0.4); border-radius: var(--bc-radius-sm);
  background: rgba(255,77,79,0.06); color: var(--bc-error);
  font-size: var(--bc-text-sm);
}
.err[hidden] { display: none; }

.footnote {
  margin-top: var(--bc-space-6); padding-top: var(--bc-space-5);
  border-top: 1px solid var(--bc-border);
  color: var(--bc-text-tertiary); font-size: var(--bc-text-sm); max-width: 72ch;
}