/* Healthcare Feature Review Board: a restrained, document-like look (Phase 13d).
   Hairline rules instead of shadows, small corner radius, sans-serif type, one accent colour.
   Meaning never rests on colour alone: every status has words, and badges carry an outline. */

:root {
  /* palette */
  --bg: #f7f8f4;            /* paper */
  --surface: #ffffff;
  --text: #16232e;          /* ink */
  --muted: #4a5a64;         /* ink-soft */
  --border: #d7dbd3;        /* line (hairline) */
  --rule: #16232e;          /* the one heavier rule used on panels */
  --accent: #00b0ba;
  --accent-dark: #0b5246;
  --accent-soft: #e8f0ec;
  /* status colours: unchanged values, except "running" which now uses the accent */
  --ok: #1b6b3a;
  --ok-bg: #e5f4ea;
  --run: #0f6b5c;
  --run-bg: #e8f0ec;
  --err: #a02622;
  --err-bg: #fbe9e8;
  --wait: #4a5a64;
  --wait-bg: #eef0ea;
  --radius: 3px;
  /* type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* type scale (about 1.25 between steps) */
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.25rem;
  --t-lg: 1.625rem;
  --t-xl: 2rem;
  --t-2xl: 3.25rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.55;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--accent);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius);
  z-index: 10;
}
.skip-link:focus { left: 8px; }

.layout {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 56px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 24px 72px;
  align-items: stretch;
}

.sidebar {
  position: sticky;
  top: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 40px 32px 36px;
}

h1 {
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}

.mock-badge {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-dark);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1px 8px;
  margin-bottom: 8px;
}

.intro { color: var(--muted); font-size: 1.125rem; line-height: 1.5; margin: 0 0 32px; }

.notice {
  margin: 0 0 24px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-left-width: 4px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--t-sm);
}

.field { margin-bottom: 18px; }

label { display: block; font-weight: 600; margin-bottom: 6px; }

label[for="feature-select"] { color: var(--accent-dark); }

select, textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid #7d8a85;
  border-radius: var(--radius);
  padding: 10px 12px;
}
textarea { resize: vertical; min-height: 110px; }
select:disabled, textarea:disabled { background: var(--wait-bg); color: var(--muted); }

#feature-select { border: 1px solid var(--accent); }

:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

.hint { margin: 6px 0 0; font-size: var(--t-sm); color: var(--muted); }

.char-count[data-state="over"] { color: var(--err); font-weight: 600; }

.field-error { margin: 6px 0 0; font-size: 0.9rem; color: var(--err); font-weight: 600; }
.field-error:empty { display: none; }

button {
  width: 100%;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--accent);
  border: 1px solid var(--accent-dark);
  border-radius: var(--radius);
  padding: 12px 16px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #009aa3; }  /* stays light enough for ink text (AA) */
button:disabled { background: var(--wait-bg); color: var(--muted); border-color: #7d8a85; cursor: not-allowed; }

/* ---------- right side ---------- */

.main { min-width: 0; display: flex; flex-direction: column; }

.request {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}
.request-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Section labels: quiet, small, ink-soft. */
.eyebrow {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.request-text { margin: 12px 0 0; font-size: var(--t-md); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.request-text.placeholder { color: var(--muted); font-style: italic; }

.status-pill {
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  color: var(--wait);
  background: var(--wait-bg);
}
.status-pill[data-state="ready"]    { color: var(--muted); background: var(--bg); }
.status-pill[data-state="running"]  { color: var(--accent-dark); background: var(--run-bg); }
.status-pill[data-state="complete"] { color: var(--ok); background: var(--ok-bg); }
.status-pill[data-state="error"]    { color: var(--err); background: var(--err-bg); }

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.status-pill[data-state="running"] { animation: status-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .status-pill[data-state="running"] { animation: none; }
}

.banner {
  margin: 0 0 24px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-left-width: 4px;
  color: var(--err);
  font-weight: 600;
}

.progress {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.agent-status { list-style: none; margin: 12px 0 0; padding: 0; }
.agent-status li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.agent-status li:first-child { border-top: 0; }
.agent-name { font-weight: 600; }
.agent-state {
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 1px 10px;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  min-width: 84px;
  text-align: center;
}
.agent-state[data-state="waiting"]  { color: var(--wait); background: var(--wait-bg); }
.agent-state[data-state="running"]  { color: var(--accent-dark); background: var(--run-bg); }
.agent-state[data-state="complete"] { color: var(--ok);   background: var(--ok-bg); }
.agent-state[data-state="error"]    { color: var(--err);  background: var(--err-bg); }

/* The four specialist panels sit in a two-column grid; the Final Recommendation spans the full width above them. */
#cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
#cards > .card.synthesis { grid-column: 1 / -1; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
}
.card h3 { margin: 0 0 6px; font-size: var(--t-lg); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.card .summary { margin: 4px 0 16px; color: var(--muted); }
.card.error-card { border-color: var(--err); border-top-color: var(--err); background: var(--err-bg); }
.card.error-card p { margin: 8px 0 0; color: var(--err); font-weight: 600; }

/* Each list is a ruled row: a bold label, then its items. */
.sections { display: grid; grid-template-columns: 1fr; gap: 0; }
.sections > * { padding: 12px 0; border-top: 1px solid var(--border); }
.sections > *:first-child { padding-top: 12px; }
.sections h4 {
  margin: 0 0 6px;
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--text);
}
.sections ul { margin: 0; padding-left: 20px; }
.sections li { margin-bottom: 4px; }

/* The Final Recommendation (synthesis) card stands out by type size and a heavier accent rule, not by a colour block */
.card.synthesis {
  border-top: 4px solid var(--accent);
  padding: 32px;
}
.card.synthesis h3 { font-size: var(--t-2xl); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 16px; }
.card.synthesis .summary { color: var(--text); font-size: var(--t-md); line-height: 1.55; }
.card.synthesis .sections { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.card.synthesis .sections > * { padding: 14px 0; }

.disposition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.disposition .label { font-size: var(--t-sm); letter-spacing: 0.02em; font-weight: 600; color: var(--muted); }
.disposition .value {
  font-size: var(--t-md);
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius);
  border: 2px solid currentColor;
}
.disposition .value[data-kind="ready"]   { color: var(--ok);  background: var(--ok-bg); }
.disposition .value[data-kind="review"]  { color: #7a5200;    background: #fff3d6; }
.disposition .value[data-kind="concern"] { color: var(--err); background: var(--err-bg); }

.disposition-legend { margin: -8px 0 20px; font-size: var(--t-sm); color: var(--muted); }
.disposition-legend .legend-title { font-weight: 700; }
.disposition-legend ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.disposition-legend li::before { content: ""; display: inline-block; width: 0.65em; height: 0.65em; margin-right: 6px; border-radius: 1px; background: currentColor; }
.disposition-legend li[data-kind="ready"]::before   { color: var(--ok); }
.disposition-legend li[data-kind="review"]::before  { color: #7a5200; }
.disposition-legend li[data-kind="concern"]::before { color: var(--err); }

.footnote { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--t-sm); color: var(--muted); }

/* ---------- workflow diagram (Mermaid) ---------- */

.workflow {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px 16px;
  margin-bottom: 24px;
}
.workflow-note { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; }
.workflow-hint { display: none; margin: 6px 0 0; font-size: 0.82rem; color: var(--muted); }
.workflow-scroll { overflow-x: auto; margin-top: 8px; padding-bottom: 4px; }
#workflow-diagram svg { display: block; width: 100%; min-width: 760px; height: auto; margin: 0 auto; }
#workflow-diagram foreignObject { overflow: visible; }
#workflow-diagram .nodeLabel { color: var(--text); }
#workflow-diagram .nodeLabel p { margin: 0; }
#workflow-diagram .edgePath path,
#workflow-diagram path.flowchart-link { stroke: var(--muted); stroke-width: 1.5px; }
#workflow-diagram .marker { fill: var(--muted); stroke: var(--muted); }

/* One look per status. Every state also has a text label and an icon, so colour is never the only clue.
   Each state sets three values (fill, outline colour, outline width) that the shapes below then use.
   Boxes are rectangles; Start and End are rounded "pills" that Mermaid draws as two paths (fill, outline).
   The id in these selectors makes them win over Mermaid's own built-in styles. */
#workflow-diagram g.node.st-waiting  { --wf-fill: var(--bg);          --wf-line: #7d8a85;    --wf-width: 2px; }
#workflow-diagram g.node.st-running  { --wf-fill: var(--run-bg);  --wf-line: var(--run); --wf-width: 3px; }
#workflow-diagram g.node.st-complete { --wf-fill: var(--ok-bg);   --wf-line: var(--ok);  --wf-width: 2px; }
#workflow-diagram g.node.st-error    { --wf-fill: var(--err-bg);  --wf-line: var(--err); --wf-width: 3px; }
#workflow-diagram g.node.st-skipped  { --wf-fill: var(--bg);          --wf-line: #7d8a85;    --wf-width: 2px; }

#workflow-diagram g.node rect.label-container {
  fill: var(--wf-fill); stroke: var(--wf-line); stroke-width: var(--wf-width); rx: 2px; ry: 2px;
}
#workflow-diagram g.node g.label-container path:first-child {
  fill: var(--wf-fill) !important; stroke: none !important;
}
#workflow-diagram g.node g.label-container path:last-child {
  fill: none !important; stroke: var(--wf-line) !important; stroke-width: var(--wf-width) !important;
}
#workflow-diagram g.node.st-skipped rect.label-container,
#workflow-diagram g.node.st-skipped g.label-container path:last-child { stroke-dasharray: 5 4; }

#workflow-diagram g.node.st-waiting .nodeLabel,
#workflow-diagram g.node.st-skipped .nodeLabel { color: var(--muted); }
#workflow-diagram g.node.st-running .nodeLabel  { color: var(--run); font-weight: 600; }
#workflow-diagram g.node.st-complete .nodeLabel { color: var(--ok); }
#workflow-diagram g.node.st-error .nodeLabel    { color: var(--err); font-weight: 700; }

/* A subtle pulse while a step is running (switched off for people who prefer reduced motion). */
@keyframes workflow-pulse {
  0%, 100% { stroke-width: 3px; stroke-opacity: 1; }
  50%      { stroke-width: 5px; stroke-opacity: 0.55; }
}
#workflow-diagram g.node.st-running rect.label-container,
#workflow-diagram g.node.st-running g.label-container path:last-child {
  animation: workflow-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #workflow-diagram g.node.st-running rect.label-container,
  #workflow-diagram g.node.st-running g.label-container path:last-child { animation: none; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 16px 16px 48px; gap: 20px; }
  .sidebar { position: static; padding: 22px 18px; }
  .request, .card, .progress, .workflow { padding: 18px; }
  .workflow-hint { display: block; }
  .card.synthesis { padding: 22px; }
  h1 { font-size: 2.5rem; }
  .card.synthesis h3 { font-size: var(--t-xl); }
  #cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- print: black on white, no sticky panel, no buttons ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .skip-link, #run-button, .workflow-hint { display: none; }
  .layout { display: block; padding: 0; max-width: none; }
  .sidebar { position: static; border: 0; border-bottom: 1px solid #000; padding: 0 0 12px; margin-bottom: 16px; }
  .request, .card, .progress, .workflow { border-color: #000; break-inside: avoid; }
  #cards { display: block; }
  .card { margin-bottom: 14px; }
  .card.synthesis { border-top-color: #000; }
  .status-pill, .agent-state, .mock-badge { border-color: #000; color: #000; background: none; }
  .intro, .hint, .request-text.placeholder, .card .summary, .footnote { color: #000; }
}

.hero-placeholder {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  margin: 0 0 24px;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.footer {
  max-width: 1320px;
  margin: 40px auto 0;
  padding: 24px 24px 20px;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  opacity: 0.6;
  text-align: center;
}
.footer a {
  color: var(--accent-dark);
  text-decoration: none;
}
.back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--accent-dark);
  text-decoration: none;
  opacity: 0.75;
  margin: 24px 24px 0;
}