/* McPherson Governance console styles. Palette + component styling adapted from
   the Observa prototype shell (navy / orange / neutral). Shell only. */
:root {
  --navy: #16294d; --navy-soft: #23406e; --orange: #e8722a;
  --bg: #f7f6f3; --card: #fff; --border: #dcd9d3; --ink: #21252b; --ink-soft: #5a6270;
  --accent-ink: #fff; --header-ink: #fff; --header-soft: #b9c4da;
  --link-on-dark: #cfe; --surface-subtle: #eef1f6;
  --ok: #1f7a4d; --warn: #b26a00; --block: #b3261e; --muted: #5a6270;
}
.theme-ocean {
  --navy: #12384b; --navy-soft: #1d566d; --orange: #0e7490;
  --bg: #f0f7f8; --card: #fff; --border: #c7dce1; --ink: #17313b; --ink-soft: #4c6872;
  --accent-ink: #fff; --header-soft: #c1dce5; --link-on-dark: #d4fbf2; --surface-subtle: #e3f0f3;
}
.theme-forest {
  --navy: #183c2b; --navy-soft: #2f5a43; --orange: #b45f24;
  --bg: #f5f4ec; --card: #fffef8; --border: #d8d5c5; --ink: #243129; --ink-soft: #59675e;
  --accent-ink: #fff; --header-soft: #c7dacd; --link-on-dark: #e2f4d9; --surface-subtle: #e9eee7;
}
.theme-high-contrast {
  --navy: #050505; --navy-soft: #242424; --orange: #ffd400;
  --bg: #fff; --card: #fff; --border: #111; --ink: #000; --ink-soft: #292929;
  --accent-ink: #000; --header-soft: #fff; --link-on-dark: #fff; --surface-subtle: #eee;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.banner { background: var(--orange); color: var(--accent-ink); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-align: center; padding: 6px 10px; }
header.site { display: flex; justify-content: space-between; align-items: center; background: var(--navy); color: var(--header-ink); padding: 12px 20px; }
.brand .logo { font-weight: 700; font-size: 18px; }
.brand .tag { color: var(--header-soft); margin-left: 10px; font-size: 12px; }
.userbox, .userbox a { color: var(--header-soft); font-size: 13px; }
/* Sign-out posts rather than links, so the button is styled back down to the
   inline control it replaced — keeping the visible focus ring for keyboard use. */
.userbox { display: flex; align-items: baseline; gap: 6px; }
.userbox .signout { display: inline; margin: 0; }
.userbox .signout button {
  background: none; border: 0; padding: 0; font: inherit; color: var(--header-soft);
  text-decoration: underline; cursor: pointer;
}
.userbox .signout button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.wsbar { background: var(--navy-soft); color: var(--header-ink); padding: 8px 20px; font-size: 13px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wsbar a { color: var(--link-on-dark); padding: 2px 8px; border-radius: 4px; }
.wsbar a.active { background: var(--orange); color: var(--accent-ink); font-weight: 600; }
.shell { display: flex; min-height: 70vh; }
nav.side { width: 220px; background: var(--card); border-right: 1px solid var(--border); padding: 12px 0; }
nav.side a { display: block; padding: 7px 20px; color: var(--ink); text-decoration: none; font-size: 14px; }
nav.side a:hover { background: var(--surface-subtle); }
nav.side a.active { border-left: 3px solid var(--orange); font-weight: 600; padding-left: 17px; }
main { flex: 1; padding: 22px 28px; min-width: 0; overflow-x: auto; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 22px 0 8px; }
.lede { color: var(--ink-soft); margin: 0 0 16px; }
.tiles { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.tile { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; min-width: 130px; }
.tile-n { font-size: 24px; font-weight: 700; color: var(--navy); }
.tile-l { font-size: 12px; color: var(--ink-soft); }
table.tbl { border-collapse: collapse; width: 100%; background: var(--card); border: 1px solid var(--border); font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl th { background: var(--surface-subtle); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.tbl td.empty { color: var(--ink-soft); font-style: italic; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.ok { background: #e2f2ea; color: var(--ok); }
.badge.warn { background: #fbeecf; color: var(--warn); }
.badge.block { background: #f7dcda; color: var(--block); }
.badge.muted { background: #ecebe8; color: var(--muted); }
.boundary { background: #fff8ef; border: 1px solid #f0d9bd; border-radius: 8px; padding: 12px 16px; margin: 18px 0; font-size: 13px; }
.boundary ul { margin: 6px 0 0 18px; }
footer { padding: 16px 28px; color: var(--ink-soft); font-size: 12px; border-top: 1px solid var(--border); background: var(--card); }
.login { max-width: 360px; margin: 60px auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 26px; }
.login h1 { margin: 0 0 4px; } .login .sub { color: var(--ink-soft); font-size: 13px; }
.login label { display: block; margin: 12px 0 4px; font-size: 13px; }
.login input { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; }
.login button, .btn { margin-top: 16px; background: var(--orange); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.login .err, .err { color: var(--block); font-size: 13px; }
.gate { background: #f7dcda; border: 1px solid #e6b3ae; border-radius: 8px; padding: 12px 16px; margin: 12px 0; font-size: 13px; }
/* Beta dashboard additions, appended to the wrapper console's app.css.
   The safety block is deliberately loud and always at the top of the page:
   if a screen recording of this product circulates, these four lines are what
   tell a viewer what they are looking at. */

.safety {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-block: 2px solid #b45309;
  background: #fffbeb;
  color: #78350f;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.safety-line {
  display: flex;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-right: 1px solid #fcd34d;
}
.safety-k { opacity: 0.75; }
.safety-k::after { content: ":"; }
.safety-v { font-weight: 700; }

.notice {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid #64748b;
  background: #f8fafc;
  font-size: 0.86rem;
}
.notice-mapping { border-left-color: #7c3aed; background: #f5f3ff; }
.notice-data { border-left-color: #0369a1; background: #f0f9ff; }
.notice-warn { border-left-color: #b45309; background: #fffbeb; }

.unavailable {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  border: 2px dashed #b91c1c;
  background: #fef2f2;
}
.unavailable h2 { margin-top: 0; color: #991b1b; }

.flash {
  margin: 1rem 0;
  padding: 0.85rem 1.1rem;
  border-left: 4px solid #64748b;
  background: #f8fafc;
}
.flash-ok { border-left-color: #047857; background: #ecfdf5; }
.flash-warn { border-left-color: #b45309; background: #fffbeb; }
.flash-err { border-left-color: #b91c1c; background: #fef2f2; }

.problems { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; }
.problems li { margin: 0.15rem 0; }

.limitations { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.86rem; }
.limitations li { margin: 0.2rem 0; }

.provenance {
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}
.provenance h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.provenance h3 + table { margin-bottom: 0.75rem; }

.proposal, .diagnosis {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}
.proposal h3, .diagnosis h3 { margin-top: 0; }

.reviewed {
  margin: 0.75rem 0;
  padding: 0.7rem 0.9rem;
  background: #ecfdf5;
  border-left: 4px solid #047857;
  font-size: 0.86rem;
}

.review { margin-top: 0.75rem; }
.review textarea { width: 100%; font: inherit; padding: 0.5rem; }
.review-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }

form.inline {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}
form.inline label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; }
form.inline input, form.inline select { font: inherit; padding: 0.35rem 0.5rem; }

.onetime {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: #1e293b;
  color: #f8fafc;
  border-radius: 3px;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  user-select: all;
}

.codes { columns: 2; margin: 0.5rem 0 0; }
.codes li { margin: 0.25rem 0; break-inside: avoid; }

.example-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
}

.theme-form fieldset { border: 0; margin: 1rem 0; padding: 0; }
.theme-form legend { font-weight: 700; margin-bottom: 0.65rem; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.8rem; }
.theme-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.65rem;
  align-items: center;
  padding: 0.85rem;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.theme-choice:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.theme-choice input { grid-row: 1 / span 3; }
.theme-choice strong, .theme-choice > span:last-child { grid-column: 2; }
.theme-choice > span:last-child { color: var(--ink-soft); font-size: 0.82rem; }
.theme-preview { display: flex; grid-column: 2; height: 24px; overflow: hidden; border: 1px solid #0003; border-radius: 4px; }
.theme-preview i { flex: 1; }
.scheme-observa .theme-preview i:nth-child(1) { background: #16294d; }
.scheme-observa .theme-preview i:nth-child(2) { background: #e8722a; }
.scheme-observa .theme-preview i:nth-child(3) { background: #f7f6f3; }
.scheme-observa .theme-preview i:nth-child(4) { background: #21252b; }
.scheme-ocean .theme-preview i:nth-child(1) { background: #12384b; }
.scheme-ocean .theme-preview i:nth-child(2) { background: #0e7490; }
.scheme-ocean .theme-preview i:nth-child(3) { background: #f0f7f8; }
.scheme-ocean .theme-preview i:nth-child(4) { background: #17313b; }
.scheme-forest .theme-preview i:nth-child(1) { background: #183c2b; }
.scheme-forest .theme-preview i:nth-child(2) { background: #b45f24; }
.scheme-forest .theme-preview i:nth-child(3) { background: #f5f4ec; }
.scheme-forest .theme-preview i:nth-child(4) { background: #243129; }
.scheme-high-contrast .theme-preview i:nth-child(1) { background: #050505; }
.scheme-high-contrast .theme-preview i:nth-child(2) { background: #ffd400; }
.scheme-high-contrast .theme-preview i:nth-child(3) { background: #fff; }
.scheme-high-contrast .theme-preview i:nth-child(4) { background: #000; }
.theme-form button { background: var(--orange); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 0.65rem 1rem; font-weight: 700; cursor: pointer; }

/* Sign-out is a POST form, not a link (state-changing routes carry a CSRF
   token). It still has to read as the inline header control it replaced, so the
   button is styled back down to link appearance — without losing the focus ring
   a keyboard user needs to see. */
.userbox { display: flex; align-items: baseline; gap: 0.4rem; }
.userbox .signout { display: inline; margin: 0; }
.userbox .signout button {
  background: none; border: 0; padding: 0; font: inherit; color: var(--header-soft);
  text-decoration: underline; cursor: pointer;
}
.userbox .signout button:hover { color: #fff; }
.userbox .signout button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Persistent source indicator — the answer to "am I looking at my own runtime
   or at the demo?", on every page. It reports CONNECTION, never authority: the
   safety banner above it still says SHADOW ONLY on the same screen. */
.srcbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline;
  padding: .45rem 1rem; font-size: .82rem; border-bottom: 1px solid var(--line); }
.srcbar-state { font-weight: 700; letter-spacing: .04em; }
.srcbar-live { background: var(--ok-bg, #0d2a17); color: var(--ok-fg, #7ee2a8); }
.srcbar-idle { background: var(--muted-bg, #26262b); color: var(--muted-fg, #b9b9c2); }
.srcbar-detail { opacity: .9; }
.srcbar-posture { margin-left: auto; opacity: .75; font-style: italic; }

/* Demonstration data must never be mistakable for a tester's own runtime. */
.demo-note { margin: .5rem 0 1rem; font-size: .88rem; opacity: .9; }
.demo-chip { display: inline-block; padding: .1rem .45rem; margin-right: .4rem;
  border-radius: 3px; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  background: var(--muted-bg, #26262b); color: var(--muted-fg, #b9b9c2); }

/* Demonstration blocks are collapsed by default: demo data is reached only by
   an explicit reader choice, and the dashed border keeps the boundary visible
   even when the block is open. */
.demo-block { margin: 1.5rem 0; padding: .3rem .9rem; border: 2px dashed var(--line, #64748b);
  border-radius: 6px; }
.demo-block > summary { cursor: pointer; padding: .45rem 0; font-size: .88rem;
  font-weight: 600; opacity: .85; }
.demo-block[open] { padding-bottom: .9rem; }
.demo-block[open] > summary { border-bottom: 1px dashed var(--line, #64748b);
  margin-bottom: .75rem; }

/* Data-activity clause on the source bar: connection health and data freshness
   are different facts and read as different clauses. */
.srcbar-activity { opacity: .85; }

/* Per-row technical detail folds. */
details.tech { font-size: .84rem; }
details.tech > summary { cursor: pointer; opacity: .8; }

/* The five-step connect flow. */
ol.steps { margin: .5rem 0 1rem 1.1rem; line-height: 1.7; }
ol.steps li { padding-left: .2rem; }

/* The one command a tester runs. Selectable, wraps, never truncated. */
pre.cmd { padding: .7rem .9rem; overflow-x: auto; white-space: pre-wrap;
  word-break: break-all; border-radius: 4px; font-size: .84rem;
  background: var(--code-bg, #16161a); border: 1px solid var(--line); }

/* ---- bounded beta-usability polish (no redesign) ----------------------- */

/* Primary action per page: one visually dominant button, everything else
   stays the quiet default. Applied by class only where a page has a single
   obvious next step. */
button.btn-primary {
  background: var(--orange, #e8722a); color: var(--accent-ink, #fff);
  border: 0; border-radius: 6px; padding: .6rem 1.1rem; font-weight: 700;
  cursor: pointer;
}
button.btn-primary:hover { filter: brightness(1.06); }
button.btn-primary:focus-visible { outline: 2px solid var(--ink, #16294d); outline-offset: 2px; }

/* Long evidence/audit tables: zebra rows and a hover cue make scanning rows
   across many columns tractable without changing any content. */
.tbl tbody tr:nth-child(even) { background: color-mix(in srgb, currentColor 4%, transparent); }
.tbl tbody tr:hover { background: color-mix(in srgb, currentColor 9%, transparent); }

/* Section rhythm: headings breathe, so a page reads as cards of work rather
   than one dense column. */
main h2 { margin-top: 2rem; }
main h2:first-of-type { margin-top: 1rem; }

/* Beta acknowledgement documents. */
.doc-block { margin: 1.25rem 0; border: 1px solid var(--line, #cbd5e1);
  border-radius: 6px; padding: 1rem 1.25rem; }
.doc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.doc-head h2 { margin: 0; font-size: 1.05rem; }
.doc-meta { font-size: .82rem; opacity: .85; }
.doc-body { max-height: 22rem; overflow-y: auto; padding: .25rem .9rem .25rem 0;
  font-size: .9rem; line-height: 1.55; }
.doc-body h3 { margin: 1rem 0 .35rem; font-size: .98rem; }
.doc-body h4 { margin: .8rem 0 .3rem; font-size: .9rem; }
.doc-list { margin: .3rem 0 .6rem 1.2rem; }
.ack-form { margin: 1.5rem 0; padding: 1rem 1.25rem;
  border: 2px solid var(--orange, #e8722a); border-radius: 6px; }
.ack-check { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .8rem; }

/* Prefilled invite code: visibly locked, still selectable. */
input.prefilled { background: var(--muted-bg, #eef1f5); font-family: ui-monospace, Menlo, monospace; }

/* Live mapping acceptance. These components deliberately use neutral/warning
   treatments: MAPPED describes reviewed semantics, never runtime authority. */
.mapping-boundary { margin: .9rem 0; }
.mapping-link {
  display: inline-block; padding: .45rem .7rem; border: 1px solid var(--orange);
  border-radius: 5px; color: var(--ink); font-weight: 650; text-decoration: none;
}
.mapping-link:hover { background: color-mix(in srgb, var(--orange) 12%, transparent); }
.mapping-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Native details/summary keeps the per-agent inventory usable without client
   script and gives keyboard/screen-reader users the platform disclosure UI. */
.agent-accordion { display: grid; gap: .75rem; margin: 1rem 0; }
.agent-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 7px;
  overflow: clip;
}
.agent-card > summary {
  cursor: pointer; padding: .85rem 1rem;
}
.agent-summary-grid {
  display: grid;
  grid-template-columns: minmax(12rem, .75fr) minmax(18rem, 1.25fr);
  gap: .4rem 1rem; align-items: baseline;
}
.agent-card > summary:hover { background: var(--surface-subtle); }
.agent-card > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.agent-card[open] > summary { border-bottom: 1px solid var(--border); }
.agent-name { font-weight: 700; }
.agent-name code { margin-left: .4rem; font-weight: 500; }
.agent-summary { color: var(--ink-soft); font-size: .82rem; }
.agent-meta {
  display: flex; flex-wrap: wrap; gap: .45rem 1rem; padding: .65rem 1rem;
  color: var(--ink-soft); font-size: .8rem; background: var(--surface-subtle);
}
.agent-meta a { margin-left: auto; }
.agent-tools { display: grid; }
.agent-tool {
  display: grid; grid-template-columns: minmax(11rem, 1fr) minmax(14rem, 1.6fr)
    minmax(9rem, .8fr) minmax(7rem, auto);
  gap: .65rem 1rem; align-items: start; padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.agent-tool:last-child { border-bottom: 0; }
.agent-tool-id { display: grid; gap: .2rem; }
.agent-tool-kind { color: var(--ink-soft); font-size: .72rem; overflow-wrap: anywhere; }
.agent-tool-state { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.agent-tool-state > span:not(.badge) { font-size: .78rem; color: var(--ink-soft); }
.agent-tool-activity { color: var(--ink-soft); font-size: .78rem; }
.agent-tool-action { text-align: right; }
.agent-tool .mapping-history { grid-column: 1 / -1; }
.mapping-history ol { margin: .5rem 0 .15rem 1.2rem; padding: 0; }
.mapping-history li { margin: .2rem 0; }

.live-proposal.selected { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.proposal-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.proposal-heading h3 { overflow-wrap: anywhere; }
.proposal-facts td:first-child { width: 12rem; font-weight: 650; color: var(--ink-soft); }
.long-hash { overflow-wrap: anywhere; word-break: break-word; }
.classification-summary, .mapping-summary {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .75rem 0;
  padding: .7rem .85rem; border-left: 4px solid var(--orange);
  background: var(--surface-subtle); font-size: .84rem;
}
.classification-summary strong, .mapping-summary strong { flex-basis: 100%; }
.live-mapping-form {
  margin-top: 1rem; padding: 1rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card);
}
.live-mapping-form > label { display: grid; gap: .35rem; font-weight: 650; }
.live-mapping-form textarea {
  width: 100%; resize: vertical; color: var(--ink); background: var(--card);
  border: 1px solid var(--border); border-radius: 5px;
}
.effect-picker { margin: 0 0 1rem; padding: .75rem; border: 1px solid var(--border); }
.effect-picker legend { font-weight: 700; }
.effect-picker legend span { color: var(--ink-soft); font-size: .78rem; font-weight: 400; }
.effect-picker label { display: inline-flex; gap: .35rem; margin: .3rem 1rem .3rem 0; }
.form-boundary { color: var(--ink-soft); font-size: .8rem; }
.approval-boundary { margin: .8rem 0; }

@media (max-width: 760px) {
  .agent-summary-grid { grid-template-columns: 1fr; }
  .agent-meta a { margin-left: 0; flex-basis: 100%; }
  .agent-tool { grid-template-columns: 1fr; }
  .agent-tool-action { text-align: left; }
  .agent-tool .mapping-history { grid-column: 1; }
  .proposal-facts td:first-child { width: auto; }
}