/* Health live — Stage 6 styles.
   Phone screens built to the HealthBot design; the inspector is demo chrome. */

:root {
  --teal: #2a8b9d;
  --teal-dark: #237b8c;
  --green: #74c264;
  --green-head: #4f9e42;   /* darker green so reversed white text stays legible */
  --ink: #3a3d42;
  --ink-soft: #6b7077;
  --bot-bubble: #f1f1f1;
  --line: #e6e6e6;
  --bg: #eef0f6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Portfolio body font (danbenner.com): Roboto, system fonts as fallback. */
  font-family: 'Roboto', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* Form controls (button/input/textarea/select) don't inherit font-family by
   default — without this they keep the browser's system font, which is why the
   right-side tabs looked different. Make them all use the body (portfolio) font. */
button, input, textarea, select { font-family: inherit; }

/* Portfolio-chrome titles → Lato 700. Body/labels stay Roboto (from body). */
h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; font-weight: 700; }
/* The PHONE is its own product with its own type system: Montserrat titles,
   Roboto body/UI. Scope Montserrat to everything inside the phone so it never
   picks up the Lato rule above. */
.phone h1, .phone h2, .phone h3, .phone h4, .phone h5, .phone h6 { font-family: 'Montserrat', sans-serif; }

/* ============================ TOP STRIP ============================ */
.topstrip {
  background: transparent;   /* dropped the green band */
  color: #2a3036;            /* danbenner.com dark text (not-quite-black) */
  padding: 12px 24px;   /* horizontal padding matches .stage so the inner aligns with the phone */
}
.topstrip-inner {
  max-width: 1083px; margin: 0 auto;   /* = phone + controls + signal, so its left edge sits under the phone */
  display: flex; flex-direction: row; align-items: center; gap: 24px;
  text-align: left;
}
.ts-left { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.ts-title { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; }
.ts-sub { font-size: 13px; opacity: .9; line-height: 1.4; }
.ts-desc { font-size: 11px; font-style: italic; color: var(--ink-soft); line-height: 1.5; margin: 0; flex: 1; border-left: 1px solid #cdd2da; padding-left: 24px; max-width: 720px; }
.ts-points {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  list-style: none; margin: 3px 0 0; padding: 0; font-size: 13px; opacity: .95; font-weight: 600;
}
.ts-points li::before { content: "•"; margin-right: 7px; opacity: .8; }

.stage {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 24px;
  min-height: calc(100vh - 52px);
}

/* ===================== EMBED MODE: /?embed=phone — show ONLY the phone ===================== */
/* Used when iframing the phone into another page (e.g. stealth.html). Hides all the
   test-bench chrome (kept in the DOM so app.js still wires it) and centers the phone. */
body.embed-phone { background: transparent; }
body.embed-phone .topstrip,
body.embed-phone .controls-col,
body.embed-phone .feedback-col { display: none !important; }
body.embed-phone .stage {
  padding: 12px;
  min-height: 100vh;
  align-items: center;   /* center the phone in the iframe viewport */
  gap: 0;
}

/* ===================== COLUMNS (phone | controls | signals) — console is fixed ===================== */
.controls-col {
  width: 330px; flex: none;
  display: flex; flex-direction: column; gap: 16px;
  height: 820px;                          /* match the phone so the scenario list bottoms out with it */
}
/* the scenario panel grows to fill remaining height; its list scrolls, the input stays pinned below */
.controls-col > .panel:last-child {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.controls-col > .panel:last-child .scenario-list {
  flex: 1; min-height: 0; overflow-y: auto;
  padding-right: 8px;   /* space between the buttons and the scrollbar; buttons sit flush left */
  /* light "tray" container — top/bottom/left borders; right stays open for the scrollbar (matches #3) */
  border-top: 1px solid #e6e8ee;
  border-bottom: 1px solid #e6e8ee;
  border-left: 1px solid #e6e8ee;
  padding-left: 8px;
  padding-top: 6px;
}
/* scenario "type your own" input, pinned to the card bottom over the scroll */
.scenario-input {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.scenario-input input {
  flex: 1; min-width: 0; border: 1px solid #d8d8d8; border-radius: 18px;
  padding: 9px 13px; font-size: 12.5px; outline: none;
}
.scenario-input input:focus { border-color: var(--teal); }
.scenario-send {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--teal); color: #fff; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.scenario-send:hover { background: var(--teal-dark); }

/* #4 View Framework — text link like the persona-sheet link */
.gov-link {   /* same treatment as the persona-sheet link */
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--ink-soft); font-weight: 300; font-style: italic; font-size: 11px;
  text-decoration: underline;   /* no font-family — inherit the body font exactly like .pd-link */
}
.gov-link:hover { color: var(--ink); }

/* #5 Ready to Send — checklist + run */
.checklist { list-style: none; margin: 0 0 9px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.checklist li { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 2px 0; }
.checklist .ck-box {
  width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #cfd4d9; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; color: #357a2b; transition: background .15s, border-color .15s;   /* dark-green check */
}
.checklist li.done .ck-box { background: #d8efc9; border-color: #d8efc9; }   /* light green = console bg */
.checklist li.done .ck-box::after { content: "\2713"; }
.checklist .ck-label { font-weight: 500; color: var(--ink); }   /* matches the signal-attribute weight */
.checklist .ck-val { margin-left: auto; font-size: 10.5px; color: var(--ink-soft); font-style: italic; text-align: right; }
/* Signal Attributes (#3) & Governance (#4) are optional / pre-set — show a
   light-grey dash in the box (not an empty "to-do" box) until actively configured. */
#ckSignalsItem:not(.done) .ck-box::after,
#ckGovItem:not(.done) .ck-box::after { content: "\2013"; color: #c4c8ce; }
.run-btn {
  width: 100%; background: var(--teal); color: #fff; border: none; border-radius: 22px;
  padding: 10px; font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 16px rgba(42,139,157,.28); transition: background .15s ease, transform .1s ease;
}
.run-btn:hover { background: var(--teal-dark); }
.run-btn:active { transform: translateY(1px); }
.run-btn:disabled { background: #c9ced3; box-shadow: none; cursor: not-allowed; }

/* signal column: #3 Signals · #4 Governance · #5 Ready to Send — bottoms out with the phone */
.signal-col { width: 300px; flex: none; display: flex; flex-direction: column; gap: 16px; height: 820px; }
.signal-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }  /* #3 flexes; its list scrolls */

/* #3 Signal Attributes — pinned "no signal" (top), scrollable accordions, submit (bottom) */
.signal-panel .no-signal {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left;
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 9px 11px; cursor: pointer; margin-bottom: 10px;
  transition: border-color .15s, background .15s;
}
.signal-panel .no-signal .ns-box {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid #cfd4d9;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: transparent; flex: none; margin-top: 1px;
}
.signal-panel .no-signal.is-selected { border-color: var(--teal); background: #f0f8fa; }
.signal-panel .no-signal.is-selected .ns-box { background: var(--teal); border-color: var(--teal); color: #fff; }
.signal-panel .no-signal .ns-text { display: flex; flex-direction: column; gap: 1px; }
.signal-panel .no-signal .ns-text strong { font-size: 12px; color: var(--ink); }
.signal-panel .no-signal .ns-text span { font-size: 10.5px; color: var(--ink-soft); line-height: 1.3; }

.signal-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  margin-right: -6px; padding-right: 6px;
  /* light "tray" container — top/bottom/left borders; right stays open for the scrollbar */
  border-top: 1px solid #e6e8ee;
  border-bottom: 1px solid #e6e8ee;
  border-left: 1px solid #e6e8ee;
  padding-left: 8px;
  padding-top: 6px;   /* so the first item isn't flush against the top border */
}
.signal-item { border-bottom: 1px solid #f0f1f3; }
.signal-item:last-child { border-bottom: none; }
/* "No signal attributes" — same size/style as the rest, but a blue tint + no divider */
.signal-item--none { background: #e8f1fb; border-radius: 8px; border-bottom: none; margin-bottom: 2px; }
.signal-row { display: flex; align-items: center; gap: 4px; padding: 2px 2px 2px 6px; }
.signal-check { width: 15px; height: 15px; flex: none; margin: 0; accent-color: var(--teal); cursor: pointer; }
.signal-title { flex: 1; font-size: 11px; font-weight: 500; color: var(--ink); cursor: pointer; min-width: 0; }
.signal-expand {
  border: none; background: none; color: #c4c8ce;
  width: 24px; height: 24px; flex: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.signal-expand svg { transition: transform .2s ease; transform-origin: center; }
.signal-item.open .signal-expand svg { transform: rotate(-90deg); }  /* left chevron → ccw → points down */
.signal-desc {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 10px; color: var(--ink-soft); line-height: 1.35;
  padding-left: 21px;    /* starts on the same vertical line as the title */
  padding-right: 10%;    /* doesn't run the full width */
  transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
}
.signal-item.open .signal-desc { max-height: 320px; opacity: 1; padding-bottom: 8px; }
.signal-desc .inferred { color: #b25b1b; font-weight: 600; }
.kestrel-tag {
  display: flex; align-items: flex-start; gap: 7px;   /* avatar aligns to the top of the text */
  font-family: 'Roboto', sans-serif; font-size: 10.5px; font-weight: 400; font-style: italic;
  color: var(--ink-soft); line-height: 1.35; margin: -2px 0 10px;
}
.kestrel-tag > span { flex: 1; }
.kestrel-tag .kt-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; order: 2; box-shadow: 0 1px 3px rgba(0,0,0,.20); }
/* inline glossary term (e.g. "behavioral exhaust") with a hover/focus tooltip */
.term { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; position: relative; outline: none; }
.term:hover::after, .term:focus::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 200;
  width: 240px; padding: 9px 11px;
  background: #2b2e33; color: #fff;
  border-radius: 6px; font-size: 11px; font-style: normal; font-weight: 400; line-height: 1.45;
  letter-spacing: 0; white-space: normal; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  pointer-events: none;
}

.signal-submit {
  margin-top: 12px; width: 100%;
  background: var(--teal); color: #fff; border: none; border-radius: 22px;
  padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .15s ease;
}
.signal-submit:hover { background: var(--teal-dark); }

/* #4 Signal Governance Framework (roughed in, intentionally inert) */
.gov-note { font-size: 11px; font-style: italic; color: var(--ink-soft); line-height: 1.4; margin: 0 0 12px; }
.gov-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gov-open {
  border: 1px solid var(--teal); background: #fff; color: var(--teal-dark);
  border-radius: 18px; padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.gov-open:hover { background: #f0f8fa; }
.gov-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; position: relative; }
.gov-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.gov-switch { width: 34px; height: 19px; border-radius: 10px; background: #cfd4d9; position: relative; transition: background .18s ease; flex: none; }
.gov-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease;
}
.gov-toggle input:checked + .gov-switch { background: var(--teal); }
.gov-toggle input:checked + .gov-switch::after { transform: translateX(15px); }
.gov-toggle-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.gov-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.gov-toggle.is-disabled { opacity: .45; pointer-events: none; }

/* governance doc modal (view-only) */
.gov-modal { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 30px; }
.gov-modal.hidden { display: none; }
.gov-modal-backdrop { position: absolute; inset: 0; background: rgba(20,26,32,.55); }
.gov-modal-card {
  position: relative; z-index: 1; background: #fff; border-radius: 16px;
  width: 720px; max-width: 100%; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.4); padding: 32px 34px;
}
.gov-modal-close { position: absolute; top: 14px; right: 16px; border: none; background: none; font-size: 26px; color: var(--ink-soft); cursor: pointer; line-height: 1; }
.gov-modal-close:hover { color: var(--ink); }
.gov-doc { font-family: 'Roboto', sans-serif; color: var(--ink); font-size: 13.5px; line-height: 1.5; }
.gov-doc h2 { font-family: 'Lato', sans-serif; font-size: 20px; margin: 0 0 10px; color: #2b2e33; }
.gov-doc .gov-ver { font-size: 11px; color: #fff; background: var(--green-head); border-radius: 8px; padding: 2px 8px; vertical-align: middle; margin-left: 6px; font-family: 'Roboto', sans-serif; font-weight: 700; }
.gov-doc h3 { font-family: 'Lato', sans-serif; font-size: 13px; margin: 22px 0 6px; color: var(--teal-dark); text-transform: uppercase; letter-spacing: .05em; }
.gov-doc p { margin: 0 0 10px; }
.gov-doc ul, .gov-doc ol { margin: 0 0 10px; padding-left: 20px; }
.gov-doc li { margin-bottom: 5px; }
.gov-matrix-wrap { overflow-x: auto; }
.gov-matrix { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 6px 0 8px; }
.gov-matrix th, .gov-matrix td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; }
.gov-matrix th:first-child, .gov-matrix td:first-child { text-align: left; font-weight: 700; white-space: nowrap; }
.gov-matrix thead th { background: #f0f8fa; color: var(--teal-dark); }
.gov-legend { font-size: 12px; color: var(--ink-soft); }
.gov-doc blockquote { margin: 8px 0; padding: 10px 14px; background: #fdeee2; border-left: 3px solid #b25b1b; border-radius: 6px; font-size: 12.5px; color: #7a3d12; }

/* ============================ PHONE ============================ */
.phone {
  position: relative;
  width: 393px;
  height: 820px;
  background: #fff;
  border-radius: 44px;
  border: 11px solid #111;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: none;
}

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 26px 4px;
  font-size: 14px;
  font-weight: 600;
}
.statusbar .notch { width: 18px; height: 18px; background: #111; border-radius: 50%; }
.status-icons { display: inline-flex; gap: 5px; align-items: center; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 20px 6px;
  border-bottom: 1px solid #eee;
}
.topbar-spacer { width: 56px; }
.topbar-logo { width: 40px; height: 40px; display: inline-block; }
.credits {
  width: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #fbe7c4;
  color: #7a5a1e;
  font-weight: 700;
  font-size: 14px;
  border-radius: 14px;
  padding: 4px 8px;
}
.coin {
  width: 17px; height: 17px; border-radius: 50%;
  background: #f0a02a; color: #fff;
  font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

.history-pill {
  position: absolute;
  top: 78px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  padding: 9px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.history-pill .chev { color: var(--ink-soft); margin-left: 2px; }

.screen { flex: 1; position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* ---------- landing ---------- */
#landing { justify-content: space-between; padding: 0 26px 16px; }
.landing-inner {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 6px;
}
.big-logo { width: 132px; height: 132px; margin-bottom: 8px; }
.headline {
  font-family: 'Montserrat', sans-serif; font-weight: 700;   /* phone title font */
  font-size: 23px; line-height: 1.25; color: #43474d;
  margin: 6px 0 30px;
  min-height: 66px;
}
.prompt-label { font-size: 15px; color: var(--ink-soft); font-style: italic; margin: 0 0 14px; }

.tone-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  width: 100%;
}
.tone-chip {
  border: 1.5px solid var(--teal);
  color: var(--teal-dark);
  background: #fff;
  border-radius: 12px;
  padding: 16px 10px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tone-chip:hover { background: #f0f8fa; }
.tone-chip.selected { background: var(--teal); color: #fff; }
.tone-chip.placeholder {
  border-color: #cfcfcf; color: #b3b3b3; cursor: default;
}

.cta {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 26px;
  padding: 17px;
  font-size: 17px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(42,139,157,.32);
  transition: background .15s;
}
.cta:hover { background: var(--teal-dark); }

/* ---------- chat ---------- */
#chat { padding: 0; }
.messages {
  flex: 1; overflow-y: auto;
  padding: 18px 18px 8px;
  display: flex; flex-direction: column; gap: 14px;
}
.bubble {
  max-width: 80%;
  padding: 13px 16px;
  font-size: 15px; line-height: 1.45;
  border-radius: 18px;
  white-space: pre-wrap;
}
.bubble.bot { background: var(--bot-bubble); color: #444; align-self: flex-start; border-bottom-left-radius: 6px; }
.bubble.me {
  align-self: flex-end;
  background: #fff;
  border: 1.5px solid var(--teal);
  color: var(--ink);
  border-bottom-right-radius: 6px;
}
.bubble.typing { color: var(--ink-soft); font-style: italic; }
.context-label {
  align-self: flex-start;
  border-left: 3px solid var(--teal);
  padding: 2px 0 2px 10px;
  font-size: 12px; font-weight: 700; color: var(--teal-dark);
  text-transform: none;
}

.composer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid #eee;
}
.composer input {
  flex: 1;
  border: 1px solid #d8d8d8;
  border-radius: 22px;
  padding: 12px 16px;
  font-size: 15px;
  outline: none;
}
.composer input:focus { border-color: var(--teal); }
.mic, .send { border: none; background: none; cursor: pointer; padding: 4px; display: inline-flex; }

/* ---------- bottom nav ---------- */
.bottomnav {
  display: flex; justify-content: space-around; align-items: flex-start;
  padding: 8px 6px 14px;
  border-top: 1px solid #eee;
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; color: #9aa0a6;
}
.nav-item.active { color: var(--teal); }
.nav-item.active label { color: var(--teal); font-weight: 700; }
.nav-logo { width: 24px; height: 24px; display: inline-block; }

/* ============================ INSPECTOR ============================ */
.inspector {
  width: 380px;
  flex: none;
  display: flex; flex-direction: column; gap: 16px;
}
.inspector-head h2 { margin: 0 0 4px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 17px; color: #2b2e33; }
.inspector-head .sub { margin: 0; font-size: 13px; color: var(--ink-soft); }

.panel {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.panel h3 {
  margin: 0 0 12px;
  font-family: 'Lato', sans-serif; font-weight: 700;   /* titles = Lato 700, matching the tabs */
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;  /* match .sheet-tab-text exactly */
  color: var(--ink-soft);
}
/* green reversed-text header that bleeds to the panel edges */
.panel h3.green-head {
  margin: -16px -16px 14px;
  padding: 10px 16px;
  background: var(--green-head);
  color: #fff;
  border-radius: 10px 10px 0 0;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
}
.head-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: #fff; color: var(--green-head);
  font-size: 11px; font-weight: 800;
}
.green-head .head-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

/* section header (style #2): no fill, green text, blue-gray bottom rule under text + number */
.panel h3.green-head.hs-2 {
  background: none; color: #2f7d4f;
  margin: -7px 0 12px; padding: 0 0 9px; border-radius: 0;  /* -7px top so title+number sit centered between card top and the rule */
  border-bottom: 1px solid #d3d9e6;   /* blue-gray, drawn from the page background family */
  gap: 8px;                            /* +4px space between the number circle and the title */
  align-items: center; line-height: 1; /* number + title vertically centered */
}
.green-head.hs-2 .head-num { background: #2f7d4f; color: #fff; text-indent: 1px; }  /* nudge the digit 1px right for optical centering */
.trace-refresh {
  border: none; background: rgba(255,255,255,.22); color: #fff;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .35s ease;
}
.trace-refresh:hover { background: rgba(255,255,255,.4); }
.trace-refresh:active { transform: rotate(180deg); }

/* persona switcher — the three cards act as tabs onto the detail panel below */
.persona-switcher { display: flex; gap: 8px; align-items: flex-start; }  /* top-aligned so images + names line up */
.persona-card {
  flex: 1;
  border: 1.5px solid transparent;     /* inactive: no visible stroke (1.5px like the no-signal box) */
  border-radius: 12px;
  padding: 6px 4px 8px;                /* tighter: circles up, shorter card */
  background: #f6f7f9;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: border-color .15s, background .15s;
}
.persona-card:hover { background: #eef0f3; }
.persona-card.active {
  border-color: var(--teal);           /* 1.5px teal — matches the no-signal / detail stroke */
  background: #f0f8fa;
  border-bottom: none;                 /* merges: drops the bottom border */
  border-radius: 12px 12px 0 0;        /* square bottom */
  padding-bottom: 18px;                /* neck to the panel */
  margin-bottom: -0.5px;               /* just kisses the panel — was over-running by ~4px */
  z-index: 2;
}
.persona-card img {
  width: 74px; height: 74px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 1px 3px rgba(0,0,0,.24);   /* tight, harder shadow */
}
.persona-card .pc-name { display: block; font-size: 15px; font-weight: 400; margin-top: 3px; color: var(--ink-soft); }
.persona-card.active .pc-name { font-weight: 500; color: var(--ink); }

/* detail panel = the active tab's content: same stroke + fill, full border.
   The active tab sits on top (z-index) and covers the seam; JS squares off
   whichever top corner the active tab merges into. */
.persona-detail {
  margin-top: 0;
  display: flex; gap: 18px; align-items: center;
  border: 1.5px solid var(--teal);
  border-radius: 12px;
  background: #f0f8fa;
  padding: 14px;
  position: relative; z-index: 1;
}
.persona-detail.empty { display: none; }
.persona-detail .pd-badge { width: 46px; height: 46px; object-fit: contain; flex: none; mix-blend-mode: multiply; }
.persona-detail .pd-text { font-size: 13px; line-height: 1.4; }
.persona-detail .pd-role { color: var(--ink-soft); }
.persona-detail .pd-link {
  display: inline-block; margin-top: 4px;
  color: var(--ink-soft); font-weight: 300; font-style: italic; font-size: 11px;
  text-decoration: underline;
}
.persona-detail .pd-link:hover { color: var(--ink); }

/* scenarios */
.scenario-list { display: flex; flex-direction: column; gap: 8px; }
.scenario-btn {
  display: flex; align-items: flex-start; gap: 10px;
  text-align: left; width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
}
.scenario-btn:hover { border-color: var(--teal); background: #f7fbfc; }
.scenario-btn.active {
  border-color: var(--teal); background: #e9f5f7;
  box-shadow: inset 0 0 0 1px var(--teal);
}
.scenario-btn .sc-avatar {           /* inside the card, on the right; top-aligned with the title */
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.20);
}
.scenario-btn .sc-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scenario-btn.active .sc-label::after {
  content: " ✓ picked"; color: var(--teal); font-weight: 700; font-size: 10px;
}
.scenario-btn .sc-label { font-weight: 700; font-size: 12px; color: var(--teal-dark); }
.scenario-btn .sc-label .sc-for { font-weight: 400; color: var(--ink-soft); }  /* "for Jakob" */
.scenario-btn .sc-msg { font-size: 11px; font-style: italic; line-height: 1.35; color: var(--ink-soft); }
.scenario-empty { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin: 0; }

/* trace */
.trace-panel h3 { display: flex; align-items: center; justify-content: space-between; }
.trace-tone {
  text-transform: none; letter-spacing: 0;
  font-size: 11px; font-weight: 700;
  background: #eef6f8; color: var(--teal-dark);
  border-radius: 10px; padding: 2px 8px;
}
.trace-tone:empty { display: none; }
.trace-empty { font-size: 13px; color: var(--ink-soft); margin: 0; }
.trace-block { padding: 18px 0; }
.trace-block:first-child { padding-top: 2px; }
.trace-block:last-child { padding-bottom: 2px; }
.trace-block + .trace-block { border-top: 1px solid var(--line); }
.trace-block .tb-head {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--teal-dark); font-weight: 800; margin-bottom: 4px;
}
.trace-block .tb-sub {
  font-size: 12px; line-height: 1.45; color: var(--ink-soft);
  font-style: italic; margin: 0 0 10px;
}
.trace-summary { font-size: 14px; line-height: 1.45; margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 11.5px; font-weight: 400;
  border-radius: 10px; padding: 3px 9px;
  background: #f0f1f3; color: #555;
}
.chip .ck { font-weight: 700; }   /* the label/tag stays bold; the value after the colon is normal */
.chip.warn { background: #fdeee2; color: #b25b1b; }
.chip.alert { background: #fbe3e3; color: #b13434; }
.chip.ok { background: #e8f4e6; color: #3f7d35; }

.move-text { font-size: 14px; line-height: 1.45; margin: 0 0 6px; font-weight: 600; }
.reason-text { font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin: 0; }

.supp-item {
  border-left: 3px solid #e3b48a;
  padding: 2px 0 2px 10px;
  margin-bottom: 10px;
}
.supp-item:last-child { margin-bottom: 0; }
.supp-opt { font-size: 13.5px; font-weight: 600; margin: 0 0 2px; }
.supp-why { font-size: 12.5px; color: var(--ink-soft); margin: 0; }

/* feedback panel: floats with a soft shadow, and pops when a new read lands */
.feedback-panel { box-shadow: 0 16px 40px rgba(42,139,157,.20); padding: 20px; }
.feedback-panel .green-head { margin: -20px -20px 16px; padding: 11px 20px; }

/* color key for the chips */
.trace-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-soft);
}
.trace-legend .lg { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.trace-legend .lg.ok { background: #e8f4e6; box-shadow: inset 0 0 0 1px #3f7d35; }
.trace-legend .lg.warn { background: #fdeee2; box-shadow: inset 0 0 0 1px #b25b1b; }
.trace-legend .lg.alert { background: #fbe3e3; box-shadow: inset 0 0 0 1px #b13434; }
@keyframes feedbackPop {
  0%   { transform: translateY(7px) scale(.985); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
  60%  { transform: translateY(0) scale(1.008); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 16px 44px rgba(42,139,157,.30); }
}
.feedback-panel.pop { animation: feedbackPop .5s ease; }

/* ===== Output Console as a FIXED right-edge side sheet ===== */
.feedback-col {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  width: auto; z-index: 9000;
  display: flex; align-items: stretch; justify-content: flex-end;
  pointer-events: none;                              /* empty area passes clicks through */
}
.feedback-col > * { pointer-events: auto; }

.head-title { white-space: nowrap; }                 /* left-aligned title, no overlap */
.green-head { min-width: 0; }
.feedback-panel .green-head { cursor: pointer; }     /* clicking the header closes the drawer */
.trace-toggle {
  border: none; background: rgba(255,255,255,.22); color: #fff;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 10px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.trace-toggle:hover { background: rgba(255,255,255,.4); }

/* OPEN: full-height drawer pinned to the right edge, slides in; square right corners */
.feedback-panel {
  position: absolute; top: 0; right: 0; bottom: 0;   /* out of flex flow so the tab can dock at the edge */
  width: 400px; max-width: 92vw;
  border-radius: 0;                                  /* no rounded corners at all */
  box-shadow: -10px 0 46px rgba(0,0,0,.24);
  overflow-y: auto;
  padding: 40px 40px 24px;                           /* doubled padding, top/left/right */
  transform: translateX(100%); opacity: 0; pointer-events: none;
  transition: transform .34s ease, opacity .3s ease;
}
.feedback-col:not(.sheet-closed):not(.sheet-review) #tracePanel { transform: translateX(0); opacity: 1; pointer-events: auto; }
.feedback-col.sheet-review #reviewPanel { transform: translateX(0); opacity: 1; pointer-events: auto; }
/* open header borrows the tab's look: light green, edge-to-edge (no inset/stroke), squared */
.feedback-panel h3.green-head {
  margin: -40px -40px 26px; padding: 15px 40px;
  border-radius: 0;
  background: #d8efc9; color: #357a2b;
}
.feedback-panel h3.green-head .head-num { background: #357a2b; color: #fff; }
.feedback-panel h3.green-head .head-title { color: #357a2b; }
.feedback-panel .rerun-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: rgba(53,122,43,.14); color: #357a2b;
  border-radius: 12px; padding: 4px 11px;
  font-family: 'Roboto', sans-serif; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: background .15s ease;
}
.feedback-panel .rerun-btn:hover { background: rgba(53,122,43,.24); }
.feedback-panel .trace-close {
  border: none; background: none; color: #357a2b;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px;
  transition: opacity .15s ease;
}
.feedback-panel .trace-close:hover { opacity: .55; }

/* CLOSED: a vertically-centered stack of vertical tabs docked to the right edge */
.sheet-tabs { display: none; }
.feedback-col.sheet-closed .sheet-tabs {
  align-self: flex-start;                            /* top-align with the columns instead of centering */
  margin-top: 90px;                                  /* ≈ topstrip height + stage top-padding, so tab tops line up with the card tops */
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.sheet-tab {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fff;                                  /* white fill (green dropped) */
  color: #357a2b;                                    /* dark green text + arrow */
  border: none; cursor: pointer;
  border-radius: 12px 0 0 12px;                      /* rounded left, square right (touches edge) */
  padding: 12px 7px;                                 /* slimmer tab */
  box-shadow: 0 6px 22px rgba(0,0,0,.16);            /* drop shadow */
  transition: background .15s ease;
}
.sheet-tab:hover { background: #f2f4f7; }

/* ===== #7 Human-in-the-Loop Review — placeholder dashboard ===== */
.review { font-size: 12.5px; color: var(--ink); }
.review-intro { margin: 0 0 16px; line-height: 1.5; color: var(--ink-soft); }
.review-intro strong { color: var(--ink); font-weight: 600; }
.review-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.rv-stat {
  background: #f4f7f5; border: 1px solid #e4eae6; border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.rv-num { font-family: 'Roboto', sans-serif; font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; }
.rv-num.rv-good { color: #357a2b; }
.rv-num.rv-warn { color: #c1662f; }
.rv-lab { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.rv-status {
  display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
  background: #eef5f0; border-radius: 8px; padding: 9px 12px; font-size: 12px; color: var(--ink-soft);
}
.rv-status strong { color: #357a2b; }
.rv-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; flex: none; box-shadow: 0 0 0 3px rgba(76,175,80,.18); }
.rv-sub { margin: 0 0 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-soft); }
.rv-outliers { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.rv-outliers li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--ink); }
.rv-tag {
  flex: none; margin-top: 1px; padding: 2px 7px; border-radius: 20px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.rv-tag-flag { background: #f7e4dc; color: #b4501f; }
.rv-tag-watch { background: #fbeecb; color: #916500; }
.rv-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: #357a2b; color: #fff; text-decoration: none;
  font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 12.5px;
  padding: 10px 16px; border-radius: 10px; transition: background .15s ease;
}
.rv-link:hover { background: #2c6624; }
.rv-note { margin: 12px 0 0; font-size: 10.5px; font-style: italic; color: var(--ink-soft); }
.sheet-tab .sheet-tab-num {
  width: 16px; height: 16px; border-radius: 50%;
  background: #357a2b; color: #fff;                  /* dark green circle, light number */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  transform: rotate(90deg);                          /* rotate the 3 to match the vertical label */
}
.sheet-tab .sheet-tab-chev { font-size: 16px; line-height: 1; }   /* expandable */
.sheet-tab .sheet-tab-text {
  writing-mode: vertical-rl;                          /* rotated tab label */
  font-family: 'Lato', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px;
}

/* ============================ ACCESS GATE ============================ */
/* neutral splash that holds first paint until the auth check resolves, so the
   blue gate never flashes on a valid ?pw auto-unlock. Sits above everything. */
.auth-splash {
  position: fixed; inset: 0; z-index: 20000;
  background: var(--bg);
  transition: opacity .25s ease;
}
.auth-splash.splash-gone { opacity: 0; pointer-events: none; }
/* in the phone-only embed, keep it transparent so there's no white box in the
   host page's iframe — with a valid pw the gate never shows anyway. */
body.embed-phone .auth-splash { background: transparent; }

.gate {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2a8b9d, #1f6f7e);
  padding: 24px;
}
.gate-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  width: 340px; max-width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.gate-logo { width: 72px; height: 72px; margin: 0 auto 10px; }
.gate-card h1 { margin: 0 0 6px; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 24px; color: #2b2e33; }
.gate-card p { margin: 0 0 18px; font-size: 14px; color: var(--ink-soft); }
.gate-card input {
  width: 100%; box-sizing: border-box;
  border: 1px solid #d8d8d8; border-radius: 12px;
  padding: 13px 14px; font-size: 15px; outline: none;
  margin-bottom: 12px;
}
.gate-card input:focus { border-color: var(--teal); }
.gate-card button {
  width: 100%;
  background: var(--teal); color: #fff;
  border: none; border-radius: 24px;
  padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.gate-card button:hover { background: var(--teal-dark); }
.gate-error { color: #c0392b !important; font-size: 13px; min-height: 18px; margin: 10px 0 0 !important; }

@media (max-width: 1180px) {
  .stage { flex-wrap: wrap; }
  .controls-col, .feedback-col { width: 393px; }
}
@media (max-width: 480px) {
  .stage { flex-direction: column; align-items: center; }
  .controls-col, .feedback-col { width: 100%; max-width: 393px; }
}