/*
 * An operations interface, not a landing page.
 *
 * Dense, quiet, and honest about what is not implemented: an unimplemented surface is rendered
 * visibly disabled rather than as a button that does nothing. The state that matters most on this
 * page — MACHINE OFF — is styled to be the first thing read, and it is never styled as an error,
 * because OFF is the correct state rather than a fault.
 */

:root {
  color-scheme: dark light;
  --bg: #0d1013;
  --panel: #14191e;
  --panel-2: #1a2027;
  --line: #262e36;
  --ink: #e6edf3;
  --ink-dim: #93a1b0;
  --ink-faint: #64717e;
  --accent: #4b9fd5;
  --off: #d98a3c;
  --ok: #4c9a6a;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6f8;
    --panel: #ffffff;
    --panel-2: #f0f3f6;
    --line: #d8dee5;
    --ink: #16202a;
    --ink-dim: #4d5c6b;
    --ink-faint: #7b8794;
    --accent: #1f6feb;
    --off: #9a5b12;
    --ok: #1f7a4d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.loading { padding: 40px; color: var(--ink-faint); }

/* ---- auth surfaces ------------------------------------------------------ */

.gate {
  max-width: 420px;
  margin: 10vh auto;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.gate h1 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.01em; }
.gate .sub { margin: 0 0 22px; color: var(--ink-faint); font-size: 13px; }

label { display: block; margin: 0 0 14px; font-size: 12px; color: var(--ink-dim); }
label span { display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.06em; }

input {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 13px var(--sans);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  padding: 9px 14px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font: 600 13px var(--sans);
  cursor: pointer;
}
button[disabled] { background: var(--panel-2); color: var(--ink-faint); cursor: not-allowed; }
button.ghost { background: transparent; color: var(--ink-dim); border: 1px solid var(--line); }

.secret {
  margin: 14px 0;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: 12px/1.7 var(--mono);
  word-break: break-all;
  color: var(--ink);
}

.error { margin: 14px 0 0; color: var(--off); font-size: 13px; }

/* ---- console shell ------------------------------------------------------ */

.shell { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }

header.top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand { font-weight: 700; letter-spacing: -0.01em; }
.brand small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-faint); }
.spacer { flex: 1; }

.chip {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 11px var(--mono);
  color: var(--ink-dim);
}
.chip.aal2 { color: var(--ok); border-color: var(--ok); }

.body { display: grid; grid-template-columns: 220px 1fr; }

nav.side { padding: 16px 12px; border-right: 1px solid var(--line); background: var(--panel); }
nav.side h2 {
  margin: 14px 8px 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
nav.side a, nav.side span.nav {
  display: flex;
  justify-content: space-between;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13px;
}
nav.side a.current { background: var(--panel-2); color: var(--ink); }
nav.side span.nav { color: var(--ink-faint); cursor: not-allowed; }
nav.side .tag { font: 9px var(--mono); letter-spacing: 0.05em; color: var(--ink-faint); }

main { padding: 24px; }
main h1 { margin: 0 0 2px; font-size: 20px; letter-spacing: -0.02em; }
main .lede { margin: 0 0 22px; color: var(--ink-faint); font-size: 13px; }

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.card .k {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card .v { margin-top: 6px; font: 18px var(--mono); letter-spacing: -0.01em; }
.card .v.off { color: var(--off); }
.card .n { margin-top: 6px; font-size: 12px; color: var(--ink-faint); }

.panel {
  margin-top: 18px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.panel h3 { margin: 0 0 10px; font-size: 13px; }
.panel p { margin: 0 0 8px; color: var(--ink-dim); font-size: 13px; }
.panel .src { font: 11px var(--mono); color: var(--ink-faint); }

.notimpl {
  display: inline-block;
  padding: 2px 7px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  font: 10px var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

@media (max-width: 720px) {
  .body { grid-template-columns: 1fr; }
  nav.side { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---- rAS console v1: tree, priority, convergence -------------------------
   An operations cockpit: dense, hierarchy-forward, status-forward. Priority is a TEXT label
   first — colour is decoration and never the only signal, so the page survives greyscale, a
   colour-vision difference and a bad projector. */

.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* An empty registry and a refused one must never look alike. `settled` is a fact; `refused` is
   a fault. Neither is a spinner. */
.state { border: 1px solid var(--line, #2a2f3a); border-radius: 8px; padding: 18px; margin: 12px 0; }
.state h3 { margin: 0 0 8px; font-size: 15px; }
.state p { margin: 4px 0; color: var(--dim, #98a0ae); font-size: 13px; line-height: 1.5; }
.state.settled { border-style: solid; background: rgba(255, 255, 255, 0.02); }
.state.settled h3 { color: var(--fg, #e6e9ef); }
.state.refused { border-color: #7a3b3b; background: rgba(122, 59, 59, 0.12); }
.state.refused h3 { color: #ff9b9b; }
/* Withheld is neither settled nor broken, so it borrows the treatment of neither: red would say
   this service failed, and the plain settled panel would say the operator is looking at an
   answer. Amber, and bordered on the leading edge so it reads as a boundary. */
.state.withheld { border-color: #7a6a33; background: rgba(122, 106, 51, 0.12); border-left-width: 3px; }
.state.withheld h3 { color: #e8c46a; }

.tree { display: flex; flex-direction: column; gap: 2px; }
.node { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 7px 10px; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  font-size: 13px; }
.node:hover { background: rgba(255, 255, 255, 0.04); }
.node:focus-visible { outline: 2px solid #6ea8fe; outline-offset: 1px; }
.node.sel { background: rgba(110, 168, 254, 0.14); border-color: #3d5a8a; }
/* Indentation carries depth, and a left rule makes the level readable without counting pixels. */
.node.d1 { margin-left: 22px; border-left: 1px solid #2a2f3a; }
.node.d2 { margin-left: 44px; border-left: 1px solid #2a2f3a; }
.node.d3 { margin-left: 66px; border-left: 1px solid #2a2f3a; }
.node.d4 { margin-left: 88px; border-left: 1px solid #2a2f3a; }
.node.d5 { margin-left: 110px; border-left: 1px solid #2a2f3a; }

.mid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.life { font-size: 10.5px; letter-spacing: 0.06em; color: var(--dim, #98a0ae); }
.conv { font-size: 11px; color: #8fb3e0; }

.prio { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 7px;
  border-radius: 3px; border: 1px solid currentColor; }
.p-high { color: #ffb4a2; }
.p-medium { color: #e8d48b; }
.p-low { color: #9fb8c8; }
.p-undeclared { color: #8b93a1; border-style: dashed; }

/* The elevation flag states a NEGATIVE: authorization is not established. It is deliberately not
   a success colour, a tick, a shield or anything else that could read as approval. */
.flag { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; color: #f0c674;
  border: 1px dashed #7a6321; border-radius: 3px; padding: 2px 6px; }
.warnbox { border: 1px dashed #7a6321; border-radius: 6px; padding: 10px; margin-top: 8px; }
.warnbox p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--dim, #98a0ae); }

.rootbadge { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; color: #cdb4ff;
  border: 1px solid #4a3d6b; border-radius: 3px; padding: 2px 6px; }

.detail { border: 1px solid var(--line, #2a2f3a); border-radius: 8px; padding: 14px 16px;
  position: sticky; top: 12px; }
.detail.empty { border-style: dashed; }
.detail h3 { margin: 0 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; }
.detail h4 { margin: 14px 0 6px; font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--dim, #98a0ae); text-transform: uppercase; }
.pair { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 3px 0;
  font-size: 12.5px; }
.pair .k { color: var(--dim, #98a0ae); }
.pair .v { word-break: break-word; }

.buckets { display: flex; flex-direction: column; gap: 14px; }
.bucket { border: 1px solid var(--line, #2a2f3a); border-radius: 8px; padding: 12px 14px; }
/* UNDECLARED is visually set apart from the three canonical buckets so a reader does not file it
   alongside them as a fourth priority. */
.bucket.b-undeclared { border-style: dashed; opacity: 0.92; }
.bhead { display: flex; gap: 10px; align-items: center; }
.bhead .count { font-size: 18px; font-weight: 700; }
.notcanon { font-size: 10.5px; letter-spacing: 0.06em; color: #8b93a1;
  border: 1px dashed #4a505c; border-radius: 3px; padding: 2px 6px; }
.prow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 6px 2px; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 12.5px; }

.targets { display: flex; flex-direction: column; gap: 14px; }
.target { border: 1px solid var(--line, #2a2f3a); border-radius: 8px; padding: 12px 14px; }
.target h3 { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.target .count { font-size: 11px; color: var(--dim, #98a0ae); }

.muted { color: var(--dim, #98a0ae); font-size: 12px; line-height: 1.55; }
.order { margin-top: 14px; font-style: italic; }
.chip.off { color: #ffb4a2; border-color: #6b3a32; }

/* The Principal control surface (PROMPT-041). No green: an approval is a phase, not a success. */
.ceremony { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; max-width: 720px; }
.ceremony label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ceremony input { padding: 7px 9px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--line, #2a2f3a); background: rgba(255, 255, 255, 0.03);
  color: var(--fg, #e6e9ef); }
.bytes { white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.5;
  max-height: 420px; overflow: auto; padding: 12px; border-radius: 6px;
  border: 1px solid var(--line, #2a2f3a); background: rgba(0, 0, 0, 0.25); }
/* Amber, like the withheld state and unlike a confirmation: this is a boundary, not a success. */
.panel.approval { border-color: #7a6a33; background: rgba(122, 106, 51, 0.1); }
.fingerprint { font-size: 12px; word-break: break-all; color: #e8c46a; margin: 0 0 8px; }
button.reserved { border-color: #7a6a33; }
button.reserved[disabled] { opacity: 0.5; cursor: not-allowed; }