:root {
  /* Calm navy/blue palette. A brief crimson (IU-inspired) variant was tried
     and reverted -- a strong saturated red as the dominant brand color also
     sits awkwardly next to the design brief's Section 19 principle of a
     visually neutral, non-urgent interface, so a cool, muted scheme fits
     the study's intent better anyway. */
  --navy-900: #0f1f38;
  --navy-800: #16294a;
  --navy-700: #1f3a63;
  --blue-600: #2563a8;
  --blue-500: #3374c4;
  --blue-100: #e8f0fb;
  --slate-900: #1a2430;
  --slate-700: #3d4a5c;
  --slate-500: #6b7a8f;
  --slate-300: #c3ccd8;
  --slate-100: #eef1f5;
  --bg: #f4f6f9;
  --card-bg: #ffffff;
  --green-600: #1c8a53;
  --green-100: #e3f7ec;
  --amber-600: #a86a12;
  --amber-100: #fbf0dd;
  --red-600: #b23a3a;
  --red-100: #fbe9e9;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 31, 56, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 31, 56, 0.10);
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--slate-900);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.topbar {
  background: var(--navy-900);
  color: #fff;
  border-bottom: 3px solid var(--blue-500);
}
.topbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: 0.2px; }
.brand-mark { color: var(--blue-500); font-size: 1.1rem; }
.brand-name { font-size: 1.05rem; }
.topbar-meta { color: var(--slate-300); font-size: 0.9rem; display:flex; gap:18px; align-items:center; }
.progress-pill {
  /* High-contrast solid badge (was a subtle translucent pill participants
     were missing in the corner) -- white-on-navy so it reads immediately. */
  background: #fff;
  color: var(--navy-900);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
}

.page { max-width: 1320px; margin: 0 auto; padding: 28px 24px 60px; }

.narrow { max-width: 760px; margin: 0 auto; padding: 40px 24px 60px; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

h1 { font-size: 1.6rem; margin: 0 0 12px; color: var(--navy-900); }
h2 { font-size: 1.2rem; margin: 0 0 10px; color: var(--navy-900); }
h3 { font-size: 1.02rem; margin: 0 0 8px; color: var(--navy-800); }
p { margin: 0 0 12px; color: var(--slate-700); }

.lede { font-size: 1.05rem; color: var(--slate-700); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn-primary { background: var(--blue-600); color: #fff; }
.btn-primary:hover { background: var(--blue-500); }
.btn-primary:disabled { background: var(--slate-300); color: var(--slate-500); cursor: not-allowed; }
.btn-secondary { background: #fff; color: var(--navy-800); border-color: var(--slate-300); }
.btn-secondary:hover { background: var(--slate-100); }
.btn-danger { background: #fff; color: var(--red-600); border-color: var(--red-600); }
.btn-danger:hover { background: var(--red-100); }
.btn-success { background: var(--green-600); color: #fff; }
.btn-success:hover { opacity: 0.92; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }

.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; }
.checkbox-row input { margin-top: 4px; }

.callout {
  background: var(--blue-100);
  border-left: 4px solid var(--blue-500);
  padding: 14px 16px;
  border-radius: 6px;
  margin: 16px 0;
  font-size: 0.95rem;
  color: var(--navy-800);
}
.callout.amber { background: var(--amber-100); border-left-color: var(--amber-600); color: #5a3c0a; }
.callout.green { background: var(--green-100); border-left-color: var(--green-600); color: #114a2c; }

/* Neutral content block for the Instructions page's core sections -- a
   clear background distinguishes each section without the "pay attention"
   connotation of the blue-accent .callout used for informational asides. */
.info-block {
  background: var(--slate-100);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.info-block h3 { margin-top: 0; }
.info-block p:last-child, .info-block ul:last-child { margin-bottom: 0; }

ul.plain, ol.plain { margin: 0 0 12px; padding-left: 20px; }
ul.plain li, ol.plain li { margin-bottom: 6px; color: var(--slate-700); }

/* ---------------- Task screen: three-panel layout ---------------- */

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.task-title { font-size: 1.6rem; color: var(--navy-900); font-weight: 800; }
.task-subtitle {
  color: var(--blue-600);
  font-size: 1rem;
  font-weight: 600;
}

/* Persistent authority signal, shown above the three panels so it's the
   first thing on screen -- deliberately identical weight/color/border in
   both arms (only the text differs), so the framing itself doesn't carry
   a salience bias the way a colored badge would. */
.authority-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  background: var(--slate-100);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin-bottom: 18px;
}
.authority-badge {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: 0.2px;
}
.process-strip {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--slate-700);
}

/* The large decision-panel title -- meant to be the first thing noticed
   after the case information itself, well above the small uppercase
   panel-header label in visual weight. */
.decision-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: 0.3px;
  margin: 2px 0 14px;
}

/* The empty decision workspace (human_decision_default, before the
   participant acts) -- a dashed border reads as "container with nothing
   in it yet", distinct from the solid-bordered populated state below it. */
.decision-empty-note {
  border: 1px dashed var(--slate-300);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 14px;
  color: var(--slate-700);
  font-size: 0.92rem;
}
.decision-empty-note strong { color: var(--navy-900); }

.three-panel {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr 0.95fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .three-panel { grid-template-columns: 1fr; }
}

.panel {
  background: var(--card-bg);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* AI Agent / Action Summary start in this state (not display:none) so the
   grid's column widths never change and the Business Information panel's
   position/size stays completely fixed when they're revealed -- only
   visibility/opacity fade in, no layout shift. */
.panel-pending {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.panel-header {
  background: var(--slate-100);
  padding: 12px 16px;
  border-bottom: 1px solid var(--slate-300);
  font-weight: 700;
  color: var(--navy-900);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-body { padding: 16px; }

/* Business info panel */
/* Current Requirements: the single most important thing a participant
   needs to notice on this panel -- given its own bordered/tinted block
   rather than blending into the rest of the panel body as a plain list. */
.requirements-block {
  background: var(--amber-100);
  border: 1px solid var(--amber-600);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 14px 0;
}
.requirements-block h3 { margin-top: 0; color: #5a3c0a; }
/* `display: flex` directly on an <li> suppresses its list-item marker
   (setting `display` to anything other than the UA default replaces the
   implicit `list-item` value entirely, so the number/bullet stops
   rendering even though list-style is set correctly) -- the flex layout
   for label/value lives on an inner .req-row wrapper instead, so the
   <li> itself keeps its default display and shows its number. */
.req-list { margin: 0; padding-left: 24px; list-style: decimal; }
.req-list li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(168, 106, 18, 0.18);
  font-size: 0.92rem;
}
.req-list li::marker { color: #5a3c0a; font-weight: 700; }
.req-list li:last-child { border-bottom: none; }
.req-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.req-label { color: #5a3c0a; }
.req-value { font-weight: 700; color: var(--navy-900); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* "Treat this panel as authoritative" is one of the most important
   framing statements in the whole app (design brief Section 13) -- was a
   single small muted line at the bottom, easy to miss. Now a clear block
   near the top, before any numbers are read. */
.authoritative-note {
  background: var(--blue-100);
  border: 1px solid var(--blue-500);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy-900);
}

table.channel-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.channel-table th, table.channel-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--slate-100);
}
table.channel-table th {
  color: var(--slate-500);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
table.channel-table td.num, table.channel-table th.num { text-align: right; }
table.channel-table td.num { font-weight: 700; color: var(--navy-900); font-variant-numeric: tabular-nums; }

/* AI agent panel */
.agent-idle {
  text-align: center;
  padding: 30px 10px;
  color: var(--slate-500);
}
.agent-thinking { text-align: center; padding: 30px 10px; color: var(--slate-500); }
.dots span { animation: blink 1.4s infinite; }
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

.rec-alloc { margin-bottom: 14px; }
.rec-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--slate-100); font-size: 0.92rem; }
.rec-row .amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy-800); }

/* AI Agent panel's allocation table (channel / allocated capital / the
   AI's own per-$10k rate / resulting expected return + total row) --
   distinct from .rec-alloc/.rec-row, which stay a plain amount-only list
   for the Decision panel's workspace. */
table.agent-alloc-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin-bottom: 4px; }
table.agent-alloc-table th, table.agent-alloc-table td {
  text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--slate-100);
}
table.agent-alloc-table th {
  color: var(--slate-500); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3px;
}
table.agent-alloc-table th .col-sub {
  display: block; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.66rem; color: var(--slate-500);
}
table.agent-alloc-table td.num, table.agent-alloc-table th.num { text-align: right; }
table.agent-alloc-table td.num { font-weight: 600; color: var(--navy-800); font-variant-numeric: tabular-nums; }
table.agent-alloc-table tfoot tr.total-row td {
  border-top: 2px solid var(--slate-300); border-bottom: none; font-weight: 800; color: var(--navy-900); padding-top: 10px;
}

.rationale-box {
  background: var(--slate-100);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.9rem;
  color: var(--slate-700);
  font-style: italic;
  margin-bottom: 14px;
}

.control-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }

/* The two decision-control actions (keep the current default vs.
   modify/override it) must be visually equivalent -- same size, color,
   border weight, font weight, spacing, and prominence, side by side. A
   large filled/green primary button next to a small outlined secondary
   one would bias toward the default option through pure visual salience,
   confounding the decision-authority manipulation this app measures. */
.decision-row { gap: 12px; }
.decision-slot { display: contents; }
.btn-decision {
  flex: 1;
  justify-content: center;
  background: #fff;
  color: var(--navy-900);
  border: 2px solid var(--navy-900);
  font-weight: 700;
}
.btn-decision:hover { background: var(--slate-100); }
.btn-decision:disabled { border-color: var(--slate-300); color: var(--slate-500); cursor: not-allowed; }

/* Always visible once a recommendation exists -- there used to be an
   "Ask AI" toggle button that opened this; removed per user request, so
   the chat is just there from the start, no click required to reveal it. */
.chat-panel { margin-top: 14px; border-top: 1px solid var(--slate-100); padding-top: 14px; }
.chat-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chat-log { max-height: 260px; overflow-y: auto; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { padding: 8px 12px; border-radius: 8px; font-size: 0.88rem; max-width: 92%; }
.chat-msg.user { align-self: flex-end; background: var(--blue-500); color: #fff; }
.chat-msg.assistant { align-self: flex-start; background: var(--slate-100); color: var(--slate-900); }
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-input-row input,
.chat-input-row textarea {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--slate-300);
  border-radius: 6px;
  font-size: 0.9rem;
}
.chat-input-row textarea {
  font-family: inherit;
  resize: none;
  min-height: 130px;
  line-height: 1.4;
}
.chat-thinking { font-size: 0.85rem; color: var(--slate-500); padding: 4px 0; }

/* Action summary panel */
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.status-badge.pending { background: var(--slate-100); color: var(--slate-700); }
.status-badge.executed { background: var(--green-100); color: var(--green-600); }

/* Compact governance explanation shown right next to the review-period
   timer in the Action Summary panel (moved here from a full-width banner
   above the three panels, so it reads as context for the timer rather than
   a separate stacked announcement). */
/* Decision-control intro: states whose default the plan currently is
   (design brief -- "default decision authority" manipulation). Kept
   visually neutral/identical in weight between both arms; only the
   wording (gov.intro, from GOVERNANCE_COPY) differs. */
.governance-note {
  background: var(--blue-100);
  border: 1px solid var(--blue-500);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy-900);
}
.governance-note p { margin: 0; }

.modify-editor { margin-top: 12px; border-top: 1px solid var(--slate-100); padding-top: 12px; display: none; }
.modify-editor.open { display: block; }
.editor-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
.editor-row .label { font-size: 0.9rem; color: var(--slate-700); flex: 1; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  width: 28px; height: 28px; border-radius: 5px; border: 1px solid var(--slate-300);
  background: #fff; cursor: pointer; font-size: 1rem; line-height: 1;
}
.stepper button:hover { background: var(--slate-100); }
.stepper .val { width: 64px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.editor-total { margin-top: 10px; padding: 10px; border-radius: 6px; font-size: 0.88rem; }
.editor-total.ok { background: var(--green-100); color: var(--green-600); }
.editor-total.bad { background: var(--red-100); color: var(--red-600); }

.outcome-overlay {
  position: fixed; inset: 0; background: rgba(15,31,56,0.55);
  display: none; align-items: center; justify-content: center; z-index: 50;
}
.outcome-overlay.open { display: flex; }
.outcome-card {
  background: #fff; border-radius: 10px; padding: 32px; max-width: 440px; text-align: center;
  box-shadow: var(--shadow-md);
}
.outcome-card h2 { margin-bottom: 14px; }
.outcome-icon { font-size: 2.2rem; color: var(--green-600); margin-bottom: 10px; }

/* Survey */
.survey-block { margin-bottom: 26px; }
.likert { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.likert label {
  border: 1px solid var(--slate-300); border-radius: 6px; padding: 8px 10px; font-size: 0.85rem;
  cursor: pointer; background: #fff; display: flex; align-items: center; gap: 6px;
}
.likert input { margin: 0; }
.likert label:has(input:checked) { border-color: var(--blue-500); background: var(--blue-100); }
select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--slate-300); border-radius: 6px; font-size: 0.9rem;
  font-family: inherit;
}
textarea { min-height: 70px; resize: vertical; }

/* Completion */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.stat-box { background: var(--blue-100); border-radius: 8px; padding: 18px; text-align: center; }
.stat-box .num { font-size: 1.6rem; font-weight: 700; color: var(--navy-900); }
.stat-box .lbl { font-size: 0.82rem; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.4px; }

.disabled-note { font-size: 0.82rem; color: var(--slate-500); margin-top: 6px; }