/* ─────────────────────────────────────────────────────────────
   The Sealed Registry

   The split is the argument: the participants' half is in
   daylight, the chain's half is in the dark. Colour lives almost
   entirely on the side that can see. The oracle is a thin strip
   along the bottom — the smallest surface on screen, because it
   opens the least. Red is reserved for a refusal; violet for the
   one thing only the regulator may do.
   ───────────────────────────────────────────────────────────── */

:root {
  /* participants — daylight */
  --c-ground: #EFEAE0;
  --c-surface: #F8F5EE;
  --c-raised: #FFFFFF;
  --c-line: #D9D0C1;
  --c-text: #16130E;
  --c-dim: #6E6455;
  --c-signal: #1B6B4A;
  --c-signal-ink: #124A33;
  --c-reject: #A8321F;
  --c-unmask: #5B3A8E;

  /* chain — the dark */
  --x-ground: #080B10;
  --x-surface: #0D1219;
  --x-line: #1B222C;
  --x-text: #8592A2;
  --x-dim: #6B7787;
  --x-good: #37B57C;
  --x-alert: #FF5C5C;
  --x-accent: #6FA8DC;

  --shell: #0B0F14;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--shell);
  color: var(--c-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1001px) {
  body { height: 100vh; overflow: hidden; }
}

/* ── masthead ──────────────────────────────────────────────── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  padding: 14px 26px;
  background: var(--shell);
  border-bottom: 1px solid #000;
}

.masthead__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}

.masthead__claim { margin: 0; flex: 1; min-width: 250px; color: #97A2B0; font-size: 14px; }

.masthead__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #97A2B0;
}

.dot { width: 7px; height: 7px; border-radius: 50%; background: #4A5563; flex: none; }
.dot--warn { background: #F5A524; animation: pulse 1.1s ease-in-out infinite; }
.dot--ok { background: #4ADE80; }
.dot--err { background: var(--x-alert); }

@keyframes pulse { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .dot--warn { animation: none; }
}

/* ── split ─────────────────────────────────────────────────── */

.split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.pane {
  display: flex;
  flex-direction: column;
  padding: 18px 24px 22px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.pane--people { background: var(--c-ground); }
.pane--chain { background: var(--x-ground); color: var(--x-text); }

.pane__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 9px;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--c-line);
  flex: none;
}

.pane--chain .pane__label { border-bottom-color: var(--x-line); }

.pane__who {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.pane__role { font-size: 12px; color: var(--c-dim); }
.pane--chain .pane__role { color: var(--x-dim); }

/* ── intro sandbox ─────────────────────────────────────────── */

.intro {
  flex: none;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 0 14px;
  margin-bottom: 14px;
}

.intro__summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  cursor: pointer;
  list-style: none;
}

.intro__summary::-webkit-details-marker { display: none; }
.intro__title { font-size: 13.5px; font-weight: 700; }
.intro__hint { font-size: 12px; color: var(--c-dim); }

.intro__lede { margin: 0 0 10px; font-size: 13px; color: var(--c-dim); line-height: 1.5; }

.intro__controls { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }

.intro__num {
  width: 74px;
  padding: 7px 9px;
  font: 600 14px var(--font-mono);
  border: 1px solid var(--c-line);
  border-radius: 7px;
  background: var(--c-raised);
}

.intro__op {
  padding: 7px 6px;
  font: 700 14px var(--font-mono);
  border: 1px solid var(--c-line);
  border-radius: 7px;
  background: var(--c-raised);
}

.intro__run {
  padding: 7px 14px;
  font: 600 13px var(--font-sans);
  color: #fff;
  background: var(--c-signal);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.intro__run:disabled { opacity: 0.45; cursor: default; }

.stages { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }

.stage {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  background: var(--c-raised);
  border: 1px solid var(--c-line);
  border-radius: 7px;
}

.stage__who { font-size: 12px; font-weight: 700; }
.stage__body {
  font: 11px var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-dim);
}
.stage__ms { font: 11px var(--font-mono); color: var(--c-dim); }

.intro__punch {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-signal-ink);
}

.intro__caveat { margin: 0 0 12px; font-size: 11.5px; color: var(--c-dim); }

/* ── role cards ────────────────────────────────────────────── */

.roles {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 13px;
}

.role {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  text-align: left;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 9px;
  cursor: pointer;
  font-family: var(--font-sans);
  min-width: 0;
}

.role.is-active { background: var(--c-raised); border-color: var(--c-signal); box-shadow: 0 0 0 1px var(--c-signal); }
.role--reg.is-active { border-color: var(--c-unmask); box-shadow: 0 0 0 1px var(--c-unmask); }

.role__name { font-size: 13px; font-weight: 700; color: var(--c-text); }
.role--reg .role__name { color: var(--c-unmask); }
.role__addr { font: 10.5px var(--font-mono); color: var(--c-dim); }
.role__status {
  font-size: 10.5px;
  color: var(--c-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── consoles ──────────────────────────────────────────────── */

.console { flex: none; margin-bottom: 12px; }

.console__title { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.console--reg .console__title { color: var(--c-unmask); }
.console__hint { margin: 0 0 10px; font-size: 12px; color: var(--c-dim); }

.form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }

.field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 150px; }
.field__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-dim); }
.field__input {
  padding: 8px 10px;
  font: 600 13.5px var(--font-mono);
  border: 1px solid var(--c-line);
  border-radius: 7px;
  background: var(--c-raised);
  min-width: 0;
}

.submit {
  padding: 9px 16px;
  font: 700 13px var(--font-sans);
  color: #fff;
  background: var(--c-signal);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  flex: none;
}

.submit:disabled { opacity: 0.45; cursor: default; }

.lookup { border-top: 1px dashed var(--c-line); padding-top: 10px; }
.lookup .field { margin-bottom: 8px; }
.lookup__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lookup__note { margin: 7px 0 0; font-size: 11.5px; color: var(--c-dim); }

.act {
  padding: 8px 13px;
  font: 600 12.5px var(--font-sans);
  border-radius: 7px;
  border: 1px solid var(--c-line);
  background: var(--c-raised);
  color: var(--c-text);
  cursor: pointer;
}

.act--ask { border-color: var(--c-signal); color: var(--c-signal-ink); }
.act--dare { border-color: var(--c-reject); color: var(--c-reject); }
.act--unmask { background: var(--c-unmask); border-color: var(--c-unmask); color: #fff; }
.act--census { border-color: var(--c-unmask); color: var(--c-unmask); }

/* ── result card ───────────────────────────────────────────── */

.result { flex: 1; min-height: 90px; }

.result__empty {
  padding: 16px;
  font-size: 13px;
  color: var(--c-dim);
  background: var(--c-surface);
  border: 1px dashed var(--c-line);
  border-radius: 10px;
}

.result__card {
  padding: 13px 15px;
  background: var(--c-raised);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-dim);
  border-radius: 10px;
}

.result__card--good { border-left-color: var(--c-signal); }
.result__card--bad { border-left-color: var(--c-reject); }
.result__card--unmask { border-left-color: var(--c-unmask); }

.result__verdict { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.result__card--bad .result__verdict { color: var(--c-reject); }
.result__card--good .result__verdict { color: var(--c-signal-ink); }
.result__card--unmask .result__verdict { color: var(--c-unmask); }
.result__sub { font-size: 12.5px; color: var(--c-dim); line-height: 1.5; margin-bottom: 9px; }

.receipt { margin: 0; display: grid; gap: 5px; }
.receipt__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  align-items: baseline;
}
.receipt__row dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-dim); }
.receipt__row dd {
  margin: 0;
  font: 11.5px var(--font-mono);
  overflow-wrap: anywhere;
  color: var(--c-text);
}

/* ── chain pane: holds ─────────────────────────────────────── */

.holds {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 10px 12px;
  background: var(--x-surface);
  border: 1px solid var(--x-line);
  border-radius: 9px;
  margin-bottom: 11px;
}

.holds__head { margin: 0 0 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--x-dim); }
.holds__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12px; }
.tick { color: var(--x-good); margin-right: 5px; }
.cross { color: var(--x-alert); margin-right: 5px; }

/* ── ledger ────────────────────────────────────────────────── */

.ledger {
  flex: none;
  padding: 10px 12px;
  background: var(--x-surface);
  border: 1px solid var(--x-line);
  border-radius: 9px;
  margin-bottom: 11px;
}

.ledger__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--x-dim);
  margin-bottom: 8px;
}

.ledger__blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 96px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--x-line) transparent;
}

.block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  background: var(--x-ground);
  border: 1px solid var(--x-line);
  border-radius: 7px;
  cursor: pointer;
  color: var(--x-text);
  font-family: var(--font-mono);
}

.block:hover { border-color: var(--x-accent); }
.block__height { font-size: 12px; font-weight: 700; color: #C7D2E0; }
.block__who { font-size: 10px; }
.block__blk { font-size: 9.5px; color: var(--x-dim); }

.ledger__legend { margin: 8px 0 0; font-size: 11px; color: var(--x-dim); }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--x-alert);
  text-decoration: underline;
  cursor: pointer;
}

.dare__out { margin: 5px 0 0; font-size: 12px; color: var(--x-text); }
.dare__plain { display: block; }
.dare__raw { display: block; font: 10.5px var(--font-mono); color: #96626C; margin-top: 2px; }

.specimen { margin-top: 8px; display: grid; gap: 3px; }
.specimen__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  font-size: 11px;
}
.specimen__k { color: var(--x-dim); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; }
.specimen__v { font-family: var(--font-mono); overflow-wrap: anywhere; color: #A9B4C4; }

/* ── audit log ─────────────────────────────────────────────── */

.audit {
  flex: none;
  padding: 10px 12px;
  background: var(--x-surface);
  border: 1px solid var(--x-line);
  border-radius: 9px;
  margin-bottom: 11px;
}

.audit__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--x-dim);
  margin-bottom: 7px;
}

.audit__rows { max-height: 104px; overflow-y: auto; display: grid; gap: 4px; scrollbar-width: thin; }
.audit__empty { font-size: 12px; color: var(--x-dim); }

.audit__row {
  display: grid;
  grid-template-columns: 34px 84px 1fr 64px 66px;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  padding: 4px 7px;
  background: var(--x-ground);
  border: 1px solid var(--x-line);
  border-radius: 6px;
}

.audit__id { font-family: var(--font-mono); color: var(--x-dim); }
.audit__who { font-weight: 700; color: #C7D2E0; }
.audit__what { color: var(--x-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit__blk { font-family: var(--font-mono); color: var(--x-dim); font-size: 10px; }
.audit__state { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #F5A524; }
.audit__state.is-done { color: var(--x-good); }

/* ── noise wall ────────────────────────────────────────────── */

.wall {
  flex: none;
  padding: 9px 12px;
  background: var(--x-surface);
  border: 1px solid var(--x-line);
  border-radius: 9px;
  margin-bottom: 11px;
}

.wall__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--x-dim);
  margin-bottom: 5px;
}

.wall__chars {
  margin: 0;
  height: 50px;
  overflow: hidden;
  font: 9.5px/1.45 var(--font-mono);
  color: #3E4A59;
  word-break: break-all;
  white-space: pre-wrap;
}

/* ── census scan ───────────────────────────────────────────── */

.scan {
  flex: none;
  padding: 9px 12px;
  background: var(--x-surface);
  border: 1px solid var(--x-line);
  border-radius: 9px;
  margin-bottom: 11px;
}

.scan__bar { height: 5px; background: var(--x-ground); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.scan__fill { display: block; height: 100%; width: 0; background: var(--x-accent); transition: width 0.25s ease; }
.scan__label { font: 11px var(--font-mono); color: #C7D2E0; margin-bottom: 3px; }
.scan__caption { margin: 0; font-size: 10.5px; color: var(--x-dim); }

/* ── op log ────────────────────────────────────────────────── */

.log {
  flex: 1 1 0;
  min-height: 96px;
  overflow-y: auto;
  padding: 9px 12px;
  background: var(--x-surface);
  border: 1px solid var(--x-line);
  border-radius: 9px;
  font: 11px/1.55 var(--font-mono);
  scrollbar-width: thin;
  scrollbar-color: var(--x-line) transparent;
}

.log__line { margin-bottom: 4px; color: var(--x-text); }
.log__line--good { color: var(--x-good); }
.log__line--bad { color: var(--x-alert); }
.log__line--accent { color: var(--x-accent); }
.log__line--dim { color: var(--x-dim); }

/* ── oracle strip ──────────────────────────────────────────── */

.authority {
  flex: none;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 10px 26px;
  background: #10151C;
  border-top: 1px solid #000;
  color: #97A2B0;
}

.authority__who { display: flex; flex-direction: column; flex: none; }
.authority__name { font-size: 12.5px; font-weight: 700; color: #E7CB7A; }
.authority__role { font-size: 10.5px; color: #6B7787; }
.authority__line { flex: 1; min-width: 260px; font-size: 12px; }
.authority__count { font: 11px var(--font-mono); color: #E7CB7A; width: 100%; }

/* ── footnote ──────────────────────────────────────────────── */

.footnote {
  flex: none;
  padding: 8px 26px 12px;
  background: var(--shell);
  color: #5A6472;
  font-size: 11px;
  line-height: 1.5;
}

.footnote code { font-family: var(--font-mono); }

/* ── narrow screens ────────────────────────────────────────── */

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; }
  .roles { grid-template-columns: repeat(2, 1fr); }
  .audit__row { grid-template-columns: 30px 70px 1fr 58px; }
  .audit__state { display: none; }
}