:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #233d47;
  background: #f2f6f8;
  font-synthesis: none;
  --accent: #08776e;
  --accent-dark: #075d57;
  --muted: #536b76;
  --line: #d5e1e6;
  --danger: #a52d36;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.8rem, 2.5vw, 2.35rem); letter-spacing: -.045em; line-height: 1.18; margin-bottom: 12px; color: #17343d; }
h2 { font-size: 1.2rem; line-height: 1.4; letter-spacing: -.02em; margin-bottom: 12px; }
h3 { font-size: 1rem; line-height: 1.45; margin-bottom: 8px; }
p { margin-bottom: 12px; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent-dark); text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 3px solid #126ea4; outline-offset: 3px; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 2px; }
main:focus, h2[tabindex]:focus { outline: none; }
label { display: block; font-weight: 650; margin-bottom: 7px; font-size: .88rem; }
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid #9eb2bc; border-radius: 8px; color: #233d47; background: #fff; padding: 10px 12px; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #617580; opacity: 1; }
input[type="checkbox"] { width: 18px; min-height: 18px; margin: 0; accent-color: var(--accent); }
code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .83rem; }
code { color: #304f59; background: #edf3f5; padding: 2px 5px; border-radius: 4px; }
.demo-banner { position: sticky; top: 0; z-index: 10; text-align: center; background: #fff1cb; color: #664609; font-size: .75rem; font-weight: 700; letter-spacing: .025em; padding: 9px 16px; border-bottom: 1px solid #ead59b; }
.site-header { min-height: 78px; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border-bottom: 1px solid var(--line); }
.wordmark { font-size: 1.55rem; font-weight: 780; letter-spacing: -.055em; text-decoration: none; color: #1a3c46; }
.wordmark span { color: var(--accent); }
.header-note { color: var(--muted); font-size: .86rem; }
.identity { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: .86rem; }
.role-badge { background: #e7f5f1 !important; color: #075d57 !important; }
.eyebrow { font-size: .66rem; font-weight: 750; letter-spacing: .14em; color: var(--muted); margin-bottom: 14px; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.lead { font-size: 1.1rem; color: var(--muted); line-height: 1.7; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: 0 2px 4px #173c4503; margin-bottom: 22px; min-width: 0; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; border: 1px solid transparent; border-radius: 8px; padding: 9px 16px; font-weight: 650; font-size: .86rem; text-decoration: none; white-space: nowrap; }
.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }
.secondary { background: #fff; border-color: #b8cbd2; color: #294f59; }
.secondary:hover:not(:disabled), .quiet:hover:not(:disabled) { background: #edf5f5; }
.quiet { background: transparent; color: #35545e; }
.danger { background: #fff; border-color: #d79ba1; color: var(--danger); }
.danger:hover:not(:disabled) { background: #fff0f1; }
.small-button { min-height: 34px; padding: 6px 11px; font-size: .8rem; }
.text-button { background: transparent; border: 0; color: var(--accent-dark); font-weight: 650; padding: 6px 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; font-size: .83rem; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.stack { display: grid; gap: 17px; }
.stack > .button { justify-self: start; }
.stack > p { margin: 0; }
.inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; }
.field { flex: 0 1 300px; }
.notice { border: 1px solid var(--line); border-radius: 9px; padding: 13px 15px; margin: 15px 0; overflow-wrap: anywhere; }
.error { color: #8d2431; background: #fff2f3; border-color: #daa3ab; }
.success { color: #12604d; background: #edf8f1; border-color: #a8cfbc; }
.neutral { color: #405d69; background: #f3f6f8; }
.loading, .empty-state { padding: 24px 10px; color: var(--muted); text-align: center; }
.loading { display: flex; justify-content: center; align-items: center; gap: 10px; }
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-layout { display: grid; grid-template-columns: 1fr 460px; max-width: 1140px; margin: 44px auto 48px; padding: 0 32px; gap: 90px; align-items: start; }
.login-intro { padding-top: 38px; }
.login-intro h1 { font-size: clamp(2.4rem, 4vw, 3.65rem); margin-bottom: 25px; }
.login-intro > .eyebrow { color: var(--accent-dark); }
.intro-steps { list-style: none; margin: 32px 0; padding: 0; counter-reset: intro; }
.intro-steps li { counter-increment: intro; padding-left: 45px; position: relative; margin-bottom: 24px; }
.intro-steps li::before { content: counter(intro, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--accent); font-size: .8rem; font-weight: 750; background: #e2efed; width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; }
.intro-steps strong, .intro-steps span { display: block; }
.intro-steps span { color: var(--muted); font-size: .86rem; margin-top: 5px; }
.login-cards .card { padding: 25px 28px; }
#login-form { margin-top: 22px; }
#login-form > button { width: 100%; }
.account-card h2 { font-size: 1rem; margin-bottom: 6px; }
.account-card > p { font-size: .8rem; }
.account-list { margin: 16px -12px -10px; }
.account-row { display: block; width: 100%; border: 0; border-top: 1px solid #e5edf0; background: transparent; padding: 12px; text-align: left; border-radius: 5px; }
.account-row:hover { background: #eef7f5; }
.account-row > span:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
.account-row > span:last-child { display: block; font-size: .78rem; color: var(--muted); }
.workspace { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: calc(100vh - 116px); }
.sidebar { background: #fbfdfd; border-right: 1px solid var(--line); padding: 32px 16px; }
.sidebar > .eyebrow { padding: 0 13px; }
.sidebar nav { display: grid; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 13px; color: #415f6a; text-decoration: none; font-size: .88rem; font-weight: 550; border-radius: 8px; }
.nav-link:hover { background: #eef3f5; }
.nav-link[aria-current="page"] { color: #075e56; background: #e1f0ed; font-weight: 700; }
.nav-icon { display: inline-grid; place-items: center; width: 21px; font-size: 1.1rem; }
.sidebar-note { padding: 26px 13px 0; margin-top: 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; line-height: 1.8; }
.main-content { min-width: 0; padding: 32px 36px 52px; max-width: 1510px; width: 100%; margin: 0 auto; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 26px; }
.page-heading > div:first-child { max-width: 730px; }
.page-heading .eyebrow { margin-bottom: 8px; }
.page-heading > .button-row { flex-shrink: 0; }
.page-heading p.muted { font-size: .9rem; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.stat-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card .muted { font-size: .84rem; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; letter-spacing: -.035em; color: #174e4a; margin: 8px 0; }
.pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; background: #edf1f4; color: #425865; font-size: .71rem; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.status-approved, .status-paid, .status-done, .status-executed { color: #14634d; background: #e3f3e9; }
.status-pending, .status-pending_info, .status-open, .status-appealed { color: #80520b; background: #fff0cf; }
.status-denied, .status-rejected { color: #a02d3d; background: #fce8eb; }
.status-submitted, .status-resubmitted { color: #265d80; background: #e6f0f8; }
.table-scroll { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .84rem; text-align: left; }
th { font-size: .72rem; color: #4e6975; background: #f6f9fa; font-weight: 700; padding: 13px 14px; border-bottom: 1px solid var(--line); }
td { padding: 16px 14px; border-bottom: 1px solid #e4ecef; vertical-align: top; }
tbody tr:last-child > td { border-bottom: 0; }
td > .pill { margin-right: 5px; }
td > p { margin-top: 5px; }
.clickable-row { cursor: pointer; }
.clickable-row:hover, .selected-row { background: #f0f8f6; }
.split-line, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.split-line > h2 { margin: 0; }
.toolbar { margin: 0 0 16px; }
.checkbox-label { display: flex; align-items: center; gap: 9px; margin: 0; }
.claim-detail { scroll-margin-top: 60px; }
.claim-detail > .muted { margin-top: 14px; }
.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 22px; }
.two-columns > section + section { border-left: 1px solid var(--line); padding-left: 30px; }
.task-list { padding: 0; list-style: none; }
.task-list li { padding: 14px 0; border-bottom: 1px solid #e4ecef; }
.task-list li p { margin-top: 6px; font-size: .86rem; }
.preserve-lines { white-space: pre-wrap; overflow-wrap: anywhere; }
.model-settings { display: flex; align-items: center; gap: 28px; padding: 16px 22px; margin-bottom: 18px; }
.model-settings > div:first-child { flex: 0 1 310px; }
.model-settings > div:last-child { flex: 1; }
.model-settings label { font-size: .75rem; margin-bottom: 4px; }
.model-settings select { padding: 8px 10px; min-height: 39px; }
.model-settings .notice { margin: 8px 0; }
.chat-card { padding: 0; overflow: hidden; }
.transcript { min-height: 180px; max-height: 440px; overflow-y: auto; padding: 22px; scroll-padding-block: 20px; }
.assistant-welcome { text-align: center; padding: 20px 16px 12px; }
.assistant-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; color: var(--accent); background: #e9f5f1; border: 1px solid #c8e2db; border-radius: 14px; font-size: 1.6rem; margin-bottom: 16px; }
.assistant-welcome h2 { font-size: 1.45rem; }
.chat-message { padding: 18px 20px; border-radius: 12px; margin: 0 0 16px; border: 1px solid var(--line); overflow-wrap: anywhere; }
.chat-message:last-child { margin-bottom: 0; }
.message-label { font-weight: 750; color: var(--accent-dark); font-size: .78rem; margin-bottom: 9px; }
.user-message { background: #edf5f7; border-color: #deeaef; margin-left: 11%; }
.user-message .message-label { color: #415e6b; }
.assistant-message { margin-right: 4%; }
.answer-denied, .answer-error { border: 2px solid #cb727d; background: #fff7f8; }
.answer-denied .message-label { color: #9a2734; }
.answer-unavailable { background: #f1f3f5; border-color: #b8c5ce; }
.answer-invalid { background: #fff9e9; border-color: #c9a855; }
.answer-clarify { border-color: #93bdb8; }
.answer-footer { border-top: 1px solid #dde7e9; margin-top: 16px; padding-top: 10px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; }
.citations { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.citation-chip { color: #245d56; background: #eaf5f1; border: 1px solid #bfdbd1; font-size: .75rem; padding: 3px 9px; border-radius: 5px; }
.action-card { background: #f4faf8; border: 1px solid #adcec2; padding: 16px; border-radius: 10px; margin-top: 18px; }
.action-card h3 { font-size: .91rem; }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 15px 22px; border-top: 1px solid #e5edef; }
.prompt-chip { font-size: .75rem; color: #365b65; border: 1px solid #c4d8de; background: #fff; border-radius: 7px; text-align: left; padding: 8px 11px; }
.prompt-chip:hover { background: #edf7f5; border-color: #8abbb3; }
.composer { padding: 18px 22px; background: #fafcfc; border-top: 1px solid var(--line); }
.composer label { font-size: .8rem; }
.composer textarea { min-height: 78px; }
.composer-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 10px; }
.composer-footer p { margin: 0; }
.composer > [role="status"]:not(:empty) { margin-top: 10px; }
.trace-drawer { position: fixed; inset: 38px 0 0 auto; width: 560px; max-width: calc(100vw - 24px); height: calc(100dvh - 38px); max-height: calc(100dvh - 38px); margin: 0; border: 0; border-left: 1px solid var(--line); padding: 28px; color: #233d47; box-shadow: -12px 0 55px #1b364629; }
.trace-drawer::backdrop { background: #122e4680; }
.drawer-header { display: flex; gap: 20px; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 20px; }
.drawer-header h2 { margin-bottom: 0; }
.drawer-header .eyebrow { margin-bottom: 5px; }
.timeline { list-style: none; padding: 0; margin-top: 26px; }
.trace-step { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 13px; position: relative; padding-bottom: 26px; }
.trace-step:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: #dce7e9; }
.trace-icon { border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; background: #e5f4ee; color: #14634d; font-size: .84rem; z-index: 1; }
.trace-denied .trace-icon, .trace-error .trace-icon { background: #fce8eb; color: #a02d3d; }
.trace-skipped .trace-icon { background: #edf1f4; color: #607584; }
.trace-step-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; }
.trace-step-heading h3 { margin: 0; }
.trace-step p { font-size: .86rem; overflow-wrap: anywhere; }
.technical-detail { max-width: 100%; font-size: .78rem; }
.technical-detail summary { color: #3c626d; cursor: pointer; padding: 6px 0; }
.technical-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f2f6f8; padding: 12px; border-radius: 6px; max-height: 300px; overflow: auto; }
.expanded-cell { background: #f5f9fa; padding: 22px; }
.expanded-cell .preserve-lines { font-size: .85rem; }
.model-table { padding: 18px; }
.model-table table { font-size: .78rem; min-width: 940px; }
.model-table th, .model-table td { padding: 12px 10px; }
.model-table th { font-size: .68rem; }
.model-table td:first-child { min-width: 160px; }
.chosen-row { background: #eff9f3; }
.chosen-note { color: #15624f; font-size: .72rem; font-weight: 600; margin: 8px 0 0; max-width: 180px; }
.pass-rate { display: grid; gap: 6px; min-width: 85px; }
progress { width: 85px; height: 7px; border: 0; border-radius: 8px; background: #dce8e5; accent-color: var(--accent); }
progress::-webkit-progress-bar { border-radius: 8px; background: #dce8e5; }
progress::-webkit-progress-value { border-radius: 8px; background: var(--accent); }
progress::-moz-progress-bar { border-radius: 8px; background: var(--accent); }
.callout h2 { font-size: 1rem; }
.callout p { font-size: .85rem; }
.diagram-scroll { overflow-x: auto; margin: 22px 0 0; }
.pipeline-diagram { width: 100%; min-width: 750px; display: block; }
.pipeline-box { fill: #eff7f5; stroke: #bad7cc; stroke-width: 1; }
.pipeline-number { fill: #365f57; font-size: 12px; font-weight: 700; }
.pipeline-label { fill: #174a42; font-size: 14px; font-weight: 650; }
.pipeline-arrow { fill: none; stroke: #577b73; stroke-width: 1.7; }
.explanation-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 42px; padding-left: 25px; }
.explanation-steps li { padding-left: 8px; }
.explanation-steps li::marker { color: var(--accent); font-weight: 700; }
.explanation-steps h3 { font-size: .91rem; }
.explanation-steps p { font-size: .85rem; }
.global-notice { position: fixed; bottom: 16px; right: 24px; max-width: 520px; z-index: 15; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; top: -80px; left: 15px; z-index: 30; padding: 9px 16px; background: #fff; border: 2px solid #126ea4; }
.skip-link:focus { top: 42px; }
@media (min-width: 1400px) {
  .workspace { grid-template-columns: 228px minmax(0, 1fr); }
  .main-content { padding: 38px 42px 60px; }
  .transcript { max-height: 500px; }
}
@media (max-width: 1050px) {
  .login-layout { gap: 35px; grid-template-columns: 1fr 420px; }
  .main-content { padding: 26px 24px; }
  .page-heading { align-items: start; flex-direction: column; }
  .stat-grid.three { gap: 12px; }
  .stat-grid .card { padding: 20px; }
}
@media (max-width: 760px) {
  .site-header { padding: 15px 18px; gap: 12px; }
  .identity { gap: 7px; flex-wrap: wrap; justify-content: end; }
  .identity #user-name { display: none; }
  .header-note { display: none; }
  .demo-banner { font-size: .65rem; }
  .login-layout { display: block; margin-top: 20px; padding: 0 18px; }
  .login-intro { padding: 0; }
  .login-intro h1 { font-size: 2.3rem; }
  .intro-steps { display: none; }
  .workspace { display: block; }
  .sidebar { padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar > .eyebrow, .sidebar-note { display: none; }
  .sidebar nav { display: flex; overflow-x: auto; gap: 6px; }
  .nav-link { white-space: nowrap; padding: 9px; }
  .nav-icon { display: none; }
  .main-content { padding: 24px 16px; }
  .card { padding: 18px; }
  .stat-grid.three, .two-columns, .explanation-steps { grid-template-columns: 1fr; gap: 0; }
  .two-columns > section + section { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
  .explanation-steps { gap: 20px; }
  .toolbar, .model-settings { align-items: stretch; flex-direction: column; }
  .model-settings > div:first-child { flex-basis: auto; }
  .model-settings { gap: 12px; }
  .chat-card { padding: 0; }
  .transcript { padding: 16px; }
  .chat-message { padding: 14px; margin-right: 0; }
  .user-message { margin-left: 5%; }
  .composer-footer { align-items: end; }
  .prompt-chips { padding: 14px; }
  .trace-drawer { padding: 20px; }
  .stat-value { font-size: 1.7rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* Decision summary at the top of "Why did this happen?" */
.decision-card { border: 1px solid var(--line, #d8e1e6); border-radius: 12px; padding: 14px 16px; margin: 12px 0 18px; background: #f7fbfb; }
.decision-card h3 { margin: 0 0 10px; font-size: 1rem; }
.decision-grid { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 6px 14px; margin: 0; }
.decision-grid dt { color: #5b6b75; font-size: 0.86rem; }
.decision-grid dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.decision-good { color: #0b7a5b; }
.decision-bad { color: #b42318; }
.timeline-title { margin: 6px 0 2px; font-size: 1rem; }
.persona-row.is-busy { opacity: 0.7; }
.plain-list { margin: 0; padding-left: 1.1rem; }
.plain-list li { margin: 4px 0; }

/* Harness notes on an answer (injection flagged, tool blocked) */
.safety-notes { list-style: none; margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid #0b7a5b; background: #eef7f4; border-radius: 6px; font-size: 0.9rem; }
.safety-notes li { margin: 2px 0; }