:root {
  --bg: #0b0f14; --pane: #11161d; --pane2: #161d26; --line: #26303d;
  --ink: #e8eef4; --dim: #93a3b3; --accent: #57c7ff; --good: #5fd68b;
  --warn: #ffb454; --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
header { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
  flex-wrap: wrap; }
.logo { font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; }
.logo span { color: var(--accent); }
.tag { color: var(--dim); font-size: .85rem; }
.headright { text-align: right; }
.motto { font-style: italic; color: var(--ink); }
.health { color: var(--dim); font-size: .8rem; font-family: var(--mono); }
.health .ok { color: var(--good); }
main { display: grid; grid-template-columns: 280px 1fr 380px; gap: 1rem;
  padding: 1rem; align-items: start; }
@media (max-width: 1100px) { main { grid-template-columns: 1fr; } }
.pane { background: var(--pane); border: 1px solid var(--line);
  border-radius: 10px; padding: 1rem; }
.pane h2 { margin: 0 0 .75rem; font-size: 1rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); }
.who { color: var(--ink); text-transform: none; letter-spacing: 0; }
.acctsearch { width: 100%; padding: .5rem .6rem; margin-bottom: .6rem;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; font: inherit; }
.accounts { display: flex; flex-direction: column; gap: .5rem;
  max-height: 46vh; overflow-y: auto; padding-right: .25rem; }
.acct { text-align: left; background: var(--pane2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem;
  cursor: pointer; width: 100%; }
.acct:hover { border-color: var(--accent); }
.acct.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.acct .nm { font-weight: 600; }
.acct .id { color: var(--dim); font-family: var(--mono); font-size: .75rem; }
.newbox { margin-top: 1rem; border-top: 1px dashed var(--line); padding-top: .75rem; }
.newbox summary { cursor: pointer; color: var(--accent); }
form label { display: block; margin: .5rem 0; color: var(--dim); font-size: .85rem; }
form input, form select { width: 100%; margin-top: .2rem; padding: .45rem .55rem;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; font: inherit; }
button { background: var(--accent); color: #04222f; border: 0; border-radius: 6px;
  padding: .5rem .9rem; font-weight: 700; cursor: pointer; }
button.ghost { background: transparent; color: var(--accent);
  border: 1px solid var(--line); font-weight: 600; padding: .3rem .6rem; }
.formnote, .empty { color: var(--dim); font-size: .85rem; }
.field { background: var(--pane2); border: 1px solid var(--line);
  border-radius: 8px; padding: .7rem .8rem; margin-bottom: .6rem; }
.field .fname { font-family: var(--mono); font-size: .75rem; color: var(--dim);
  text-transform: uppercase; letter-spacing: .05em; }
.field .fval { font-size: 1.15rem; font-weight: 650; margin: .15rem 0; }
.field .fmeta { color: var(--dim); font-size: .8rem; }
.field .wresult { margin-top: .5rem; padding: .45rem .6rem; font-size: .85rem;
  color: var(--ink); background: var(--pane); border: 1px solid var(--line);
  border-left: 3px solid var(--accent, #4da3ff); border-radius: 4px; }
.badge { display: inline-block; border: 1px solid var(--line); border-radius: 99px;
  padding: 0 .5rem; font-size: .72rem; font-family: var(--mono); color: var(--accent); }
.field .row { display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; flex-wrap: wrap; }
.hist { margin-top: .6rem; border-top: 1px dashed var(--line); padding-top: .5rem;
  display: none; }
.hist.open { display: block; }
.hist .iv { font-size: .83rem; padding: .35rem 0; border-bottom: 1px dotted #1d2632; }
.hist .iv:last-child { border-bottom: 0; }
.hist .iv .v { font-weight: 600; }
.hist .iv .m { color: var(--dim); font-family: var(--mono); font-size: .72rem;
  word-break: break-all; }
.live-dot { color: var(--good); }
.cand-tag { color: var(--warn, #d8a03c); font-style: italic; }
.editform { margin-top: .6rem; display: none; }
.editform.open { display: block; }
.chatlog { display: flex; flex-direction: column; gap: .6rem; max-height: 52vh;
  overflow-y: auto; padding-right: .25rem; }
.msg { border-radius: 10px; padding: .6rem .75rem; max-width: 95%; }
.msg.user { background: #17354a; align-self: flex-end; }
.msg.bot { background: var(--pane2); border: 1px solid var(--line); align-self: flex-start; }
/* Receipts live behind a click, not in the chat flow: the toggle
   opens a shared dialog with that bubble's receipts. */
.prov-toggle { background: transparent; color: var(--accent); border: 0;
  padding: 0; margin-top: .5rem; cursor: pointer; font: inherit;
  font-size: .85rem; }
#receipts-dialog { background: var(--pane); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.25rem; width: min(92vw, 720px); max-height: 80vh;
  overflow-y: auto; }
#receipts-dialog::backdrop { background: rgba(0, 0, 0, .6); }
#receipts-dialog .dlg-close { float: right; background: transparent;
  color: var(--dim); border: 0; font-size: 1.2rem; cursor: pointer;
  padding: 0 .25rem; }
#receipts-dialog .dlg-title { font-weight: 700; margin-bottom: .5rem; }
#receipts-dialog .dlg-body { font-size: .85rem; color: var(--dim); }
#receipts-dialog .dlg-body div { margin: .25rem 0; }
.state { font-family: var(--mono); font-size: .7rem; border-radius: 99px;
  padding: 0 .5rem; border: 1px solid var(--line); }
.state.answered { color: var(--good); }
.state.cannot_answer { color: var(--warn); }
.suggest { display: flex; gap: .4rem; flex-wrap: wrap; margin: .7rem 0; }
.suggest button { background: transparent; color: var(--accent);
  border: 1px solid var(--line); font-weight: 600; padding: .3rem .6rem;
  font-size: .8rem; }
#chat-form { display: flex; gap: .5rem; }
#chat-form input { flex: 1; padding: .55rem; background: var(--bg);
  color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.plabel { color: var(--dim); font-size: .82rem; margin-bottom: .6rem; }
.plates { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  margin-bottom: .8rem; }
/* Persona plates stay pinned at the top of the pane while the
   conversation scrolls under them, so switching persona never
   requires scrolling back up. Sticky is bounded by the pane, so
   the plates travel with the chat pane and no further. */
#plates { position: sticky; top: 0; z-index: 20; background: var(--pane);
  padding-bottom: .5rem; }
.plate { text-align: left; background: var(--pane2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem;
  cursor: pointer; font-weight: 400; }
.plate:hover { border-color: var(--accent); }
.plate.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plate .pnm { font-weight: 700; letter-spacing: .04em; }
.plate .ptag { color: var(--dim); font-size: .75rem; }
.plate.soon { border-style: dashed; cursor: default; opacity: .55; }
.plate.soon:hover { border-color: var(--line); }
.plate.soon .ptag { color: var(--warn); font-family: var(--mono); }
.msg.switch { align-self: center; background: transparent; color: var(--dim);
  font-size: .78rem; font-family: var(--mono); border: 1px dashed var(--line);
  max-width: 100%; text-align: center; }
.pchip { font-family: var(--mono); font-size: .68rem; color: var(--accent);
  border: 1px solid var(--line); border-radius: 99px; padding: 0 .45rem;
  vertical-align: 2px; }
.regtag { font-family: var(--mono); font-size: .68rem; color: var(--warn); }
.msg .learned { margin-top: .5rem; border-top: 1px dashed var(--line);
  padding-top: .4rem; font-size: .8rem; color: var(--good); }
.msg .learned div { color: var(--ink); margin: .2rem 0; }
/* The self-running demo */
.demorow { display: flex; gap: .5rem; margin-bottom: .7rem; }
.demobtn { flex: 1; background: var(--accent); color: #0b0e13; border: 0;
  font-weight: 700; padding: .55rem .8rem; border-radius: 8px; cursor: pointer; }
.demobtn:disabled { opacity: .5; cursor: default; }
.msg.tour { background: transparent; border: 0; color: var(--accent);
  text-align: center; font-style: italic; max-width: 92%; margin-left: auto;
  margin-right: auto; }
body.demo-on #chat-form, body.demo-on .suggest, body.demo-on .plates {
  opacity: .45; pointer-events: none; }
/* Chat pane states: docked (right column) · min (rail) · max (full) */
.chat-head { display: flex; justify-content: space-between; align-items: flex-start; }
.chat-controls { display: flex; gap: .35rem; }
.chat-controls button { font-size: .95rem; line-height: 1; padding: .25rem .55rem; }
#chat-rail { display: none; }
body.chat-min main { grid-template-columns: 280px 1fr 54px; }
body.chat-min #chat-pane { padding: .5rem .25rem; }
body.chat-min .chat-body { display: none; }
body.chat-min #chat-rail { display: flex; flex-direction: column; align-items: center;
  gap: .8rem; width: 100%; height: 100%; min-height: 300px; background: transparent;
  color: var(--accent); border: 0; cursor: pointer; padding: .4rem 0; }
#chat-rail .rail-arrow { font-size: 1.3rem; }
#chat-rail .rail-label { writing-mode: vertical-rl; letter-spacing: .14em;
  text-transform: uppercase; font-size: .72rem; }
#chat-rail .rail-who { writing-mode: vertical-rl; color: var(--dim);
  font-family: var(--mono); font-size: .68rem; }
#chat-rail:hover .rail-label { color: var(--ink); }
body.chat-max #chat-pane { position: fixed; inset: 0; z-index: 60; border-radius: 0;
  display: flex; flex-direction: column; overflow-y: auto; }
body.chat-max .chat-body { display: flex; flex-direction: column; flex: 1;
  max-width: 900px; width: 100%; margin: 0 auto; }
body.chat-max .chatlog { max-height: none; flex: 1; }
@media (max-width: 1100px) {
  body.chat-min main { grid-template-columns: 1fr; }
  body.chat-min #chat-pane { min-height: 0; }
  body.chat-min #chat-rail { flex-direction: row; min-height: 0; height: auto;
    justify-content: center; }
  #chat-rail .rail-label, #chat-rail .rail-who { writing-mode: horizontal-tb; }
}
.elle { margin-top: .8rem; color: var(--dim); font-size: .78rem;
  font-family: var(--mono); }
footer { padding: 0 1.25rem 1.25rem; color: var(--dim); font-size: .8rem; }
.err { color: var(--warn); }
/* Reader swap (Round 15): full-width pane, two reader cards, verdict. */
#swap-pane { grid-column: 1 / -1; }
.swapsuggest { display: flex; gap: .4rem; flex-wrap: wrap; margin: .7rem 0; }
.swapsuggest button { background: transparent; color: var(--accent);
  border: 1px solid var(--line); font-weight: 600; padding: .3rem .6rem;
  font-size: .8rem; }
#swap-form { display: flex; gap: .5rem; }
#swap-form input { flex: 1; padding: .55rem; background: var(--bg);
  color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.swap-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin-top: .8rem; }
@media (max-width: 1100px) { .swap-cards { grid-template-columns: 1fr; } }
.swap-card { background: var(--pane2); border: 1px solid var(--line);
  border-radius: 8px; padding: .7rem .8rem; }
.swap-reader { font-weight: 700; letter-spacing: .04em; margin-bottom: .3rem; }
.swap-body { margin: .4rem 0; }
.swap-card .prov { margin-top: .5rem; border-top: 1px dashed var(--line);
  padding-top: .4rem; font-size: .78rem; color: var(--dim); }
.swap-card .prov div { margin: .25rem 0; }
.swap-verdict { margin-top: .75rem; padding: .6rem .75rem; border-radius: 8px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.swap-verdict.match { border-left-color: var(--good); }
.swap-verdict.refuse { border-left-color: var(--good); }
.swap-verdict.differ { border-left-color: var(--warn); }
/* Pool insights (Round 16): full-width pane, metric grid, bars, results. */
#insights-pane { grid-column: 1 / -1; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem; margin: .8rem 0; }
.metric { background: var(--pane2); border: 1px solid var(--line);
  border-radius: 8px; padding: .7rem .8rem; }
.metric .mnum { font-size: 1.5rem; font-weight: 750; font-family: var(--mono); }
.metric .mlabel { color: var(--dim); font-size: .78rem; }
.authbars { margin: .8rem 0; }
.authrow { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; }
.authlabel { font-family: var(--mono); font-size: .8rem; width: 1rem; color: var(--dim); }
.authtrack { flex: 1; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; height: .7rem; overflow: hidden; }
.authfill { display: block; height: 100%; background: var(--accent); }
.authfill.conf { background: var(--good); }
.authcount { font-family: var(--mono); font-size: .8rem; width: 4rem; text-align: right; }
.searchrow { display: flex; gap: .5rem; flex-wrap: wrap; margin: .7rem 0; }
.searchrow input { flex: 1; min-width: 160px; padding: .55rem; background: var(--bg);
  color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.searchrow select { padding: .55rem; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.searchrow .check { display: flex; align-items: center; gap: .35rem;
  color: var(--dim); font-size: .85rem; }
.searchrow .check input { width: auto; }
.sresult { background: var(--pane2); border: 1px solid var(--line);
  border-radius: 8px; padding: .7rem .8rem; margin-bottom: .6rem; cursor: pointer; }
.sresult:hover { border-color: var(--accent); }
.sresult .row { display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; flex-wrap: wrap; }
.sresult .fval { font-size: 1.05rem; font-weight: 650; margin: .15rem 0; }
.sresult .fmeta { color: var(--dim); font-size: .8rem; }
.sresult .hist { margin-top: .6rem; border-top: 1px dashed var(--line); padding-top: .5rem;
  display: none; }
.sresult .hist.open { display: block; }

/* Lookup spinner: spins while the record is being asked, so the
   wait bubble reads as working, not stalled. Pure CSS, no asset. */
.spin { display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--dim); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
  vertical-align: -2px; margin-right: .5rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Struck error values in report prose: struck through and faded,
   so a wrong value reads as dead at a glance. Report layer only. */
del { color: var(--dim); }