:root {
  --navy: #142a43;
  --navy-2: #203d5d;
  --blue: #517ba5;
  --blue-soft: #eaf1f7;
  --ink: #1b2937;
  --muted: #657483;
  --line: #dce3e9;
  --surface: #ffffff;
  --canvas: #f3f5f7;
  --warning: #a86b18;
  --danger: #a14242;
  --success: #357157;
  --accent-orange: #e58a2b;
  --accent-orange-soft: #fff7ee;
  font-family: "Segoe UI", "Malgun Gothic", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 16px; line-height: 1.55; }
button, textarea { font: inherit; }
button { cursor: pointer; }

.site-header {
  min-height: 94px; padding: 18px 34px; color: white; background: var(--navy);
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  border-bottom: 4px solid #6d8dab;
}
.eyebrow { margin: 0 0 6px; color: #aac0d3; font-size: 13px; font-weight: 700; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(30px, 2.1vw, 38px); letter-spacing: -.025em; }
.subtitle { margin: 7px 0 0; color: #dce6ef; font-size: 17px; line-height: 1.45; }
.simulation-badge { padding: 11px 15px; border: 1px solid #58718a; color: #d2dde7; font-size: 13px; white-space: nowrap; }
.simulation-badge span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #e4aa56; }
.header-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.header-view-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.header-view-buttons button { min-width: 154px; padding: 11px 14px; color: white; border: 1px solid #71889d; background: transparent; font-size: 14px; font-weight: 800; white-space: nowrap; }
.header-view-buttons button:hover, .header-view-buttons button:focus-visible { background: #294e72; border-color: #a9bfd3; }
.header-view-buttons .runtime-graph-button { background: #eaf1f7; color: var(--navy); border-color: #eaf1f7; }
.header-view-buttons .runtime-graph-button:hover, .header-view-buttons .runtime-graph-button:focus-visible { color: white; background: var(--blue); }
.scenario-selector { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 14px; max-width: 1840px; margin: 12px auto 0; padding: 12px 14px; border: 1px solid var(--line); background: white; }
.scenario-selector > div:first-child > span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.scenario-selector h2 { margin: 2px 0; color: var(--navy); font-size: 18px; }
.scenario-selector p { margin: 0; color: var(--muted); font-size: 12px; }
.scenario-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scenario-options article { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 9px 10px; border-left: 3px solid #b8c4ce; background: #f6f8fa; }
.scenario-options article.active { border-left-color: var(--success); background: #f2f8f4; }
.scenario-options article span, .scenario-options article strong { display: block; }
.scenario-options article span { color: var(--muted); font-size: 11px; }
.scenario-options article strong { overflow: hidden; color: var(--navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.scenario-options button, .handover-actions button { flex: 0 0 auto; padding: 8px 10px; color: var(--navy); border: 1px solid #aebfcd; background: white; font-size: 12px; font-weight: 800; }

.dashboard { display: grid; grid-template-columns: minmax(590px, 3fr) minmax(420px, 2fr); gap: 16px; padding: 16px 20px; max-width: 1880px; margin: 0 auto; }
.panel { min-width: 0; min-height: 650px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 2px 9px rgba(20, 42, 67, .055); }
.panel-heading { min-height: 78px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--line); }
.workspace-heading { position: relative; min-height: 104px; padding: 22px 24px 21px 28px; display: flex; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--accent-orange-soft) 0, #fff 96px); }
.workspace-heading::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent-orange); }
.section-number { flex: 0 0 auto; min-width: 30px; padding-top: 20px; color: var(--accent-orange); font-size: 18px; font-weight: 900; line-height: 1; letter-spacing: .06em; }
.workspace-heading-copy { min-width: 0; }
.workspace-label { display: block; margin-bottom: 4px; color: #b76316; font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .14em; }
.panel-heading h2, .workspace-heading h2 { margin: 0; color: var(--navy); font-size: clamp(27px, 1.7vw, 30px); font-weight: 800; line-height: 1.18; letter-spacing: -.025em; }
.panel-heading p, .workspace-heading p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.4; }
.icon-button { margin-left: auto; width: 34px; height: 34px; border: 1px solid var(--line); background: white; color: var(--navy); font-size: 18px; }

.intent-panel form { padding: 20px; }
.intent-panel label { display: block; margin-bottom: 16px; color: var(--navy-2); font-size: 13px; font-weight: 700; }
textarea { resize: vertical; }
.intent-panel textarea { width: 100%; margin-top: 7px; padding: 10px 11px; border: 1px solid #cbd5dd; background: #fbfcfd; color: var(--ink); line-height: 1.5; }
textarea:focus { outline: 2px solid #a9bfd3; outline-offset: 1px; border-color: var(--blue); }
.primary-button { width: 100%; padding: 12px; border: 0; background: var(--navy-2); color: white; font-weight: 700; }
.primary-button:hover { background: #294e72; }
.primary-button:disabled { opacity: .65; cursor: wait; }
.form-status { min-height: 20px; margin: 10px 0 0; color: var(--success); font-size: 13px; line-height: 1.45; }
.mission-marker { margin: 4px 20px 20px; padding: 15px; border-left: 3px solid var(--blue); background: var(--blue-soft); }
.mission-marker span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.mission-marker strong { display: block; margin-top: 5px; color: var(--navy); font-size: 16px; }

.context-summary { margin: 18px 20px 14px; padding: 16px 18px; background: #f4f7fa; border-left: 3px solid var(--blue); }
.live-indicator { color: var(--success); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.context-summary p { margin: 7px 0 0; line-height: 1.65; font-size: 15px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 20px 12px; }
.metric { min-height: 72px; padding: 12px 14px; border: 1px solid var(--line); }
.metric strong { display: block; margin-top: 5px; color: var(--navy); font-size: 20px; line-height: 1.25; }
.metric span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.metric.threat-kpi { border-left: 3px solid var(--danger); }
.metric.network-kpi { border-left: 3px solid var(--warning); }
.principle-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 20px 16px; }
.principle-cards article { min-width: 0; padding: 13px 14px; border-top: 3px solid var(--blue); background: #f7f9fb; }
.principle-cards h3 { margin: 0; color: var(--navy); font-size: 16px; }
.principle-cards h3 span { display: block; margin-top: 3px; color: var(--blue); font-size: 12px; text-transform: uppercase; }
.principle-cards p { margin: 7px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.principle-cards strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.5; font-weight: 800; overflow-wrap: anywhere; }
.entity-groups { padding: 0 20px 20px; }
.group-title { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.entity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.entity-card { position: relative; padding: 15px 16px; border: 1px solid var(--line); background: white; }
.entity-card.threat { border-left: 3px solid var(--danger); }
.entity-card.constraint { border-left: 3px solid var(--warning); }
.entity-card h3 { margin: 0 88px 8px 0; color: var(--navy); font-size: 16px; }
.entity-card p { margin: 4px 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.entity-card .label { color: var(--ink); }
.state-chip { position: absolute; top: 12px; right: 12px; padding: 4px 8px; background: var(--blue-soft); color: var(--navy-2); font-size: 13px; font-weight: 800; }
.state-chip.degraded, .state-chip.moving { color: #854b1b; background: #fff1de; }

.conversation-panel { display: flex; flex-direction: column; }
.chat-messages { flex: 1; min-height: 330px; max-height: 470px; padding: 20px; overflow-y: auto; background: #fafbfc; }
.message { max-width: 88%; margin-bottom: 16px; }
.message p { margin: 5px 0 0; padding: 13px 15px; border: 1px solid var(--line); background: white; font-size: 16px; line-height: 1.65; white-space: pre-wrap; }
.message.user { margin-left: auto; }
.message.user p { color: white; background: var(--navy-2); border-color: var(--navy-2); }
.message-source { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.message.user .message-source { text-align: right; }
.suggestions { padding: 10px 16px 5px; display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.suggestions button { padding: 8px 11px; color: var(--navy-2); background: white; border: 1px solid #cbd7e1; font-size: 14px; }
.suggestions button:hover { background: var(--blue-soft); }
.chat-form { display: flex; gap: 8px; padding: 10px 16px; }
.chat-form textarea { flex: 1; min-width: 0; padding: 12px; border: 1px solid #c8d2db; font-size: 16px; line-height: 1.5; }
.chat-form button { align-self: stretch; padding: 0 18px; border: 0; color: white; background: var(--navy-2); font-size: 15px; font-weight: 700; }
.ai-notice { margin: 0; padding: 0 16px 14px; color: var(--muted); font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.mission-bar { display: grid; grid-template-columns: 1.1fr 1.2fr 1.6fr .8fr .7fr .8fr; max-width: 1840px; margin: 14px auto 0; border: 1px solid #cbd5dd; background: white; }
.mission-bar div { min-width: 0; padding: 13px 16px; border-right: 1px solid var(--line); }
.mission-bar div:last-child { border-right: 0; }
.mission-bar span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.mission-bar strong { display: block; margin-top: 5px; overflow: hidden; color: var(--navy); font-size: 16px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.intent-drawer { max-width: 1840px; margin: 9px auto 0; border: 1px solid var(--line); background: white; }
.intent-drawer summary { padding: 9px 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.intent-drawer summary::-webkit-details-marker { display: none; }
.intent-drawer summary span { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.intent-drawer summary strong { color: var(--navy); font-size: 15px; }
.intent-drawer summary em { overflow: hidden; color: var(--muted); font-size: 14px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.intent-drawer summary b { color: var(--blue); font-size: 14px; }
.intent-drawer form { display: grid; grid-template-columns: repeat(4, 1fr) 160px; gap: 12px; padding: 14px; border-top: 1px solid var(--line); }
.intent-drawer label { color: var(--navy-2); font-size: 13px; font-weight: 700; }
.intent-drawer textarea { width: 100%; margin-top: 5px; padding: 9px; border: 1px solid #cbd5dd; background: #fbfcfd; font-size: 14px; }
.intent-drawer .primary-button { align-self: center; }
.intent-drawer .form-status { grid-column: 1 / -1; margin: 0; }
.ontology-summary { display: grid; grid-template-columns: 1fr .7fr 2fr; align-items: center; gap: 18px; max-width: 1840px; margin: 9px auto 0; padding: 15px 17px; border: 1px solid var(--line); background: white; }
.ontology-summary[hidden] { display: none; }
.ontology-summary h2 { margin: 2px 0 3px; color: var(--navy); font-size: 20px; }
.ontology-summary > div:first-child > p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ontology-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ontology-stats div { padding: 8px 10px; border: 1px solid var(--line); }
.ontology-stats span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; }
.ontology-stats strong { display: block; margin-top: 2px; color: var(--navy); font-size: 17px; }
.ontology-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ontology-groups article { min-width: 0; padding: 8px 10px; background: #f5f8fa; }
.ontology-groups h3 { margin: 0; color: var(--navy); font-size: 12px; }
.ontology-groups p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.runtime-graph-viewer { max-width: 1840px; margin: 9px auto 0; padding: 15px 17px; border: 1px solid var(--line); background: white; }
.runtime-graph-viewer[hidden] { display: none; }
.graph-viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.graph-viewer-heading h2 { margin: 2px 0 0; color: var(--navy); font-size: 20px; }
.graph-viewer-heading p:last-child { margin: 4px 0 12px; color: var(--muted); font-size: 14px; }
.graph-viewer-heading button { padding: 8px 11px; color: var(--blue); border: 1px solid #b9c9d6; background: white; font-size: 13px; font-weight: 700; }
.runtime-graph-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 12px 0; }
.runtime-graph-stats div { padding: 8px 10px; border: 1px solid var(--line); background: #f7f9fb; }
.runtime-graph-stats span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; }
.runtime-graph-stats strong { display: block; margin-top: 2px; color: var(--navy); font-size: 16px; }
.runtime-graph-viewer h3 { margin: 0 0 7px; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.runtime-graph-section { padding-top: 2px; }
.runtime-triple-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 330px; overflow-y: auto; }
.runtime-triple-list article { min-width: 0; display: grid; grid-template-columns: minmax(100px, 1fr) 18px minmax(110px, 1fr) 18px minmax(100px, 1fr); align-items: center; padding: 11px 13px; border-left: 3px solid var(--blue); background: #f5f8fa; }
.runtime-triple-list article.historical { border-left-color: #9da8b1; background: #f4f4f4; }
.runtime-triple-list strong, .runtime-triple-list b { overflow: hidden; color: var(--navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.runtime-triple-list em { overflow: hidden; color: var(--blue); font-size: 13px; font-style: normal; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.runtime-triple-list span { color: var(--blue); font-size: 15px; text-align: center; }
.runtime-triple-list small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.runtime-graph-lower { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; margin-top: 16px; }
.runtime-graph-lower > section { min-width: 0; padding: 13px; border: 1px solid var(--line); background: #fbfcfd; }
.runtime-entity-history { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; }
.runtime-entity-history article { min-width: 145px; padding: 9px 10px; border-top: 3px solid var(--blue); background: white; }
.runtime-entity-history article.current { border-top-color: var(--success); background: #f2f8f4; }
.runtime-entity-history article div { display: flex; align-items: center; gap: 7px; }
.runtime-entity-history article div span { color: var(--blue); font-size: 11px; font-weight: 800; }
.runtime-entity-history article strong { color: var(--navy); font-size: 16px; }
.runtime-entity-history article p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.runtime-entity-history article p b { color: var(--ink); }
.mission-graph-root { padding: 10px 12px; color: white; background: var(--navy); }
.mission-graph-root span { display: block; color: #aac0d3; font-size: 11px; font-weight: 800; }
.mission-graph-root strong { font-size: 16px; }
.mission-graph-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.mission-graph-links article { min-width: 0; padding: 8px 9px; border-left: 2px solid #c7d0d8; background: white; }
.mission-graph-links article.connected { border-left-color: var(--success); }
.mission-graph-links span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
.mission-graph-links strong { display: block; margin-top: 2px; overflow: hidden; color: var(--navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.graph-json { margin-top: 10px; border-top: 1px solid var(--line); }
.graph-json summary { padding: 8px 0; color: var(--blue); font-size: 12px; font-weight: 700; cursor: pointer; }
.graph-json pre { max-height: 260px; overflow: auto; padding: 12px; color: #dce6ef; background: var(--navy); font: 11px/1.45 Consolas, monospace; }
.context-summary { margin: 0 20px 12px; padding: 11px 14px; }
.context-summary p { max-width: 92ch; margin-top: 6px; font-size: 16px; line-height: 1.65; }
.core-entities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 0 20px 12px; }
.core-entity { min-width: 0; min-height: 70px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid var(--line); }
.core-entity.threat { border-left: 3px solid var(--danger); }
.core-entity.constraint { border-left: 3px solid var(--warning); }
.core-entity h3 { margin: 0; color: var(--navy); font-size: 16px; }
.core-entity p { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.core-entity > strong { flex: 0 0 auto; color: var(--navy-2); font-size: 14px; }
.all-assets { margin: 0 20px 14px; border-top: 1px solid var(--line); }
.all-assets summary { padding: 10px 0; color: var(--blue); font-size: 14px; font-weight: 700; cursor: pointer; }
.all-assets .entity-groups { padding: 0 0 10px; }
.message-evidence { margin-top: -1px; border: 1px solid var(--line); background: #f4f7fa; }
.message-evidence summary { padding: 10px 12px; color: var(--blue); font-size: 14px; font-weight: 800; cursor: pointer; }
.message-evidence > div { padding: 0 12px 10px; }
.message-evidence h4 { margin: 4px 0 7px; color: var(--navy); font-size: 15px; }
.message-evidence ul { margin: 0; padding-left: 18px; }
.message-evidence li { margin: 5px 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.coa-workspace { max-width: 1840px; margin: 0 auto 24px; border: 1px solid var(--line); background: white; box-shadow: 0 2px 9px rgba(20, 42, 67, .055); }
.coa-workspace[hidden] { display: none; }
.coa-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.coa-heading h2 { margin: 2px 0 0; color: var(--navy); font-size: 23px; }
.coa-cycle-context { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.active-decision-cycle { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.active-decision-summary { color: var(--navy); font-size: 13px; }
.workflow-status { padding: 8px 12px; color: var(--navy); border: 1px solid #a9bdce; background: var(--blue-soft); font-size: 13px; font-weight: 800; }
.coa-recommendation { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; margin: 18px 22px; padding: 16px 18px; color: white; background: var(--navy); border-left: 5px solid #e0ae5d; }
.coa-recommendation span { color: #f2c77f; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.coa-recommendation h3 { margin: 5px 0 0; font-size: 20px; }
.coa-recommendation strong { font-size: 14px; }
.coa-recommendation ul { margin: 6px 0 0; padding-left: 20px; color: #dce6ef; font-size: 14px; line-height: 1.5; }
.coa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 22px 18px; }
.coa-card { position: relative; min-width: 0; padding: 17px; border: 1px solid var(--line); background: #fff; }
.coa-card.recommended { border: 2px solid var(--blue); background: #f7fafc; }
.coa-card.rejected { opacity: .68; background: #f5f5f5; }
.recommended-label { display: inline-block; margin: -4px 0 9px; color: var(--blue); font-size: 13px; font-weight: 800; }
.coa-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.coa-card-heading span { color: var(--blue); font-size: 14px; font-weight: 800; }
.coa-card-heading strong { color: var(--muted); font-size: 12px; }
.coa-card h3 { min-height: 48px; margin: 6px 0 5px; color: var(--navy); font-size: 19px; line-height: 1.35; }
.coa-card > p { min-height: 68px; margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.coa-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 0 12px; }
.coa-card dl div { padding: 8px 9px; border: 1px solid var(--line); }
.coa-card dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.coa-card dd { margin: 3px 0 0; color: var(--navy); font-size: 15px; font-weight: 800; }
.coa-assets { display: flex; flex-direction: column; gap: 3px; padding: 10px; background: var(--blue-soft); font-size: 13px; }
.coa-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.coa-points strong { color: var(--navy); font-size: 13px; }
.coa-points ul { margin: 5px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.coa-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.coa-actions button { padding: 9px 6px; color: var(--navy-2); border: 1px solid #bfcdda; background: white; font-size: 13px; font-weight: 700; }
.coa-actions .approve { color: white; border-color: var(--success); background: var(--success); }
.coa-actions .reject { color: var(--danger); border-color: #d8b6b6; }
.coa-actions button:disabled { opacity: .5; cursor: not-allowed; }
.approval-complete { display: flex; align-items: center; justify-content: center; padding: 9px 6px; color: var(--success); border: 1px solid #9bc0aa; background: #f0f7f3; font-size: 13px; font-weight: 800; }
.coa-comparison { margin: 0 22px 18px; padding: 16px; border: 1px solid var(--line); background: #f8fafb; }
.coa-comparison[hidden] { display: none; }
.comparison-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.comparison-heading h3 { margin: 0; color: var(--navy); font-size: 19px; }
.comparison-heading button { padding: 6px 10px; color: var(--navy); border: 1px solid var(--line); background: white; }
.comparison-scroll { overflow-x: auto; }
.coa-comparison table { width: 100%; border-collapse: collapse; font-size: 13px; }
.coa-comparison th, .coa-comparison td { min-width: 150px; padding: 10px; border: 1px solid #cfd9e1; text-align: left; vertical-align: top; }
.coa-comparison thead th { color: white; background: var(--navy-2); }
.coa-comparison tbody th { color: var(--navy); background: #edf2f6; }
.hitl-notice { display: flex; justify-content: space-between; gap: 20px; margin: 0 22px 18px; padding: 12px 15px; border-left: 4px solid var(--warning); background: #fff8ed; font-size: 13px; }
.hitl-notice strong { color: var(--navy); }
.hitl-notice span { color: var(--muted); }
.execution-panel { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(360px, 1.5fr) auto; align-items: center; gap: 20px; padding: 17px 22px; color: white; background: #20354c; }
.execution-panel span { color: #a9bfd3; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.execution-panel h3 { margin: 3px 0; color: white; font-size: 21px; }
.execution-panel p { margin: 0; color: #cbd8e3; font-size: 14px; }
.execution-transitions { display: flex; flex-direction: column; gap: 4px; }
.execution-transitions span { color: #dce6ef; font-size: 14px; letter-spacing: 0; }
.execution-panel .primary-button { min-width: 250px; padding: 12px 15px; background: #47789e; font-size: 14px; }
.shared-context-panel { display: grid; grid-template-columns: .8fr 1.6fr auto; gap: 15px; margin: 0 22px 18px; padding: 16px; border: 1px solid #9eb7ca; background: #f4f8fb; }
.shared-context-panel[hidden] { display: none; }
.shared-context-panel > div:first-child > span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.shared-context-panel h3 { margin: 3px 0; color: var(--navy); font-size: 18px; }
.shared-context-panel p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.shared-context-content dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.shared-context-content dl div { padding: 7px 8px; background: white; }
.shared-context-content dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.shared-context-content dd { margin: 2px 0 0; color: var(--navy); font-size: 12px; font-weight: 700; }
.shared-role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 7px; }
.shared-role-grid article { padding: 8px; border-top: 2px solid var(--success); background: white; }
.shared-role-grid strong, .shared-role-grid span { display: block; font-size: 11px; }
.shared-role-grid span { margin-top: 2px; color: var(--blue); font-weight: 800; }
.handover-actions { display: flex; flex-direction: column; gap: 7px; justify-content: center; }

.closed-loop-workspace { border-top: 1px solid #41586e; background: #f5f7f9; }
.closed-loop-flow { display: flex; align-items: stretch; justify-content: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: white; }
.closed-loop-flow div { flex: 1; min-width: 0; padding: 8px 9px; border: 1px solid #cbd6df; text-align: center; }
.closed-loop-flow strong { display: block; color: var(--navy); font-size: 12px; }
.closed-loop-flow span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.closed-loop-flow b { align-self: center; color: var(--blue); font-size: 17px; }
.closed-loop-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 22px; }
.closed-loop-header span { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.closed-loop-header h3 { margin: 3px 0; color: var(--navy); font-size: 21px; }
.closed-loop-header p { margin: 0; color: var(--muted); font-size: 14px; }
.closed-loop-header .primary-button { width: auto; min-width: 180px; font-size: 14px; }
.closed-loop-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 22px 15px; }
.closed-loop-summary:empty { display: none; }
.closed-loop-summary article { padding: 12px 14px; border-left: 3px solid var(--blue); background: white; }
.closed-loop-summary span { color: var(--muted); font-size: 11px; font-weight: 800; }
.closed-loop-summary strong { display: block; margin-top: 4px; color: var(--navy); font-size: 16px; }
.closed-loop-summary p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.closed-loop-details { margin: 0 22px 15px; border: 1px solid var(--line); background: white; }
.closed-loop-details[hidden] { display: none; }
.closed-loop-details > summary { padding: 10px 13px; color: var(--blue); font-size: 13px; font-weight: 800; cursor: pointer; }
.plan-actual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 13px 13px; }
.plan-actual article { padding: 12px; background: #f5f8fa; }
.plan-actual h4, .impact-details h4 { margin: 0 0 7px; color: var(--navy); font-size: 15px; }
.plan-actual strong { color: var(--ink); font-size: 14px; }
.plan-actual p, .plan-actual li { color: var(--muted); font-size: 13px; line-height: 1.45; }
.impact-details { padding: 0 13px 13px; }
.impact-details dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 0; }
.impact-details dl div { padding: 9px; border: 1px solid var(--line); }
.impact-details dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.impact-details dd { margin: 3px 0 0; color: var(--navy); font-size: 14px; font-weight: 800; }
.replanning-result { display: grid; grid-template-columns: 1.2fr .8fr; gap: 15px; margin: 0 22px 17px; padding: 13px 15px; border-left: 4px solid var(--warning); background: #fff8ed; }
.replanning-result[hidden] { display: none; }
.replanning-result span { color: var(--warning); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.replanning-result h4 { margin: 3px 0; color: var(--navy); font-size: 17px; }
.replanning-result p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.replanning-result summary { color: var(--blue); font-size: 13px; font-weight: 800; cursor: pointer; }
.replanning-result ul { margin: 7px 0 0; padding-left: 19px; color: var(--muted); font-size: 13px; }
.cycle-history { margin: 0 22px 17px; padding-top: 13px; border-top: 1px solid var(--line); }
.cycle-history[hidden] { display: none; }
.cycle-history > h4 { margin: 0 0 9px; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.cycle-history article { display: grid; grid-template-columns: 190px 190px 1fr; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); background: white; }
.cycle-history article > span { color: var(--blue); font-size: 12px; font-weight: 800; }
.cycle-history article > strong { color: var(--navy); font-size: 15px; }
.cycle-history dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 0; }
.cycle-history dl div { min-width: 0; padding-left: 8px; border-left: 1px solid var(--line); }
.cycle-history dt { color: var(--muted); font-size: 10px; font-weight: 700; }
.cycle-history dd { margin: 2px 0 0; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.hydration-hub { max-width: 1840px; margin: 0 auto 24px; background: white; border: 1px solid var(--line); box-shadow: 0 2px 9px rgba(20, 42, 67, .055); }
.hub-heading { justify-content: flex-start; }
.hub-heading .simulation-label { margin-left: auto; align-self: center; }
.hydration-flow-summary { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.workspace-heading .hydration-flow-summary { margin-top: 9px; color: var(--navy-2); font-size: 13px; font-weight: 700; }
.hydration-flow-summary b { color: var(--accent-orange); font-size: 16px; }
.eyebrow.dark { color: var(--blue); font-size: 12px; }
.simulation-label { padding: 9px 13px; color: var(--warning); border: 1px solid #d8b985; background: #fffaf1; font-size: 13px; font-weight: 800; white-space: nowrap; }
.hub-layout { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(500px, 1.6fr) minmax(320px, 1fr); gap: 16px; padding: 16px 20px; }
.hydration-form label { display: block; margin: 0 0 8px; color: var(--navy-2); font-size: 15px; font-weight: 700; }
.hydration-form select, .hydration-form textarea { width: 100%; margin: 0 0 10px; padding: 10px 11px; border: 1px solid #cbd5dd; background: #fbfcfd; color: var(--ink); font-size: 15px; line-height: 1.5; }
.hydration-form .primary-button { font-size: 15px; }
.pipeline-wrap { min-width: 0; }
.hydration-pipeline { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; padding: 16px; border: 1px solid var(--line); background: #f5f8fa; }
.pipeline-step { padding: 11px 12px; color: var(--navy); border: 1px solid #bfcdda; background: white; font-size: 14px; font-weight: 800; text-align: center; }
.hydration-pipeline span { color: var(--blue); font-size: 18px; }
.hydration-pipeline.processing .pipeline-step { animation: pipelinePulse 1s ease-in-out infinite alternate; }
.hydration-pipeline.complete .pipeline-step { border-color: #83a894; background: #f1f8f4; }
.event-output { min-height: 170px; margin: 8px 0 0; padding: 15px; color: var(--ink); border: 1px solid var(--line); background: white; }
.event-summary-empty { display: grid; min-height: 138px; place-items: center; color: var(--muted); font-size: 14px; }
.event-summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.event-summary-heading span { color: var(--success); font-size: 14px; font-weight: 800; }
.event-summary-heading strong { color: var(--navy); font-size: 17px; }
.event-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.event-summary-grid > div { min-width: 0; padding: 9px 10px; background: #f5f8fa; }
.event-summary-grid dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.event-summary-grid dd { margin: 3px 0 0; color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.5; }
.event-summary-grid .event-observation, .event-summary-grid .event-runtime-update { grid-column: 1 / -1; }
.event-summary-grid .event-runtime-update { background: #f2f8f4; }
.event-summary-grid .event-runtime-update dd { color: var(--success); }
.event-detail-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.event-detail-toggles details { min-width: 0; border: 1px solid var(--line); }
.event-detail-toggles summary { padding: 9px 11px; color: var(--blue); font-size: 13px; font-weight: 800; cursor: pointer; }
.event-detail-toggles pre { max-height: 260px; margin: 0; padding: 12px; overflow: auto; white-space: pre; color: #d9e5ef; background: var(--navy); font: 12px/1.5 Consolas, monospace; }
.generated-spo-list { display: grid; gap: 6px; padding: 0 9px 9px; }
.generated-spo-list article { display: grid; grid-template-columns: 1fr 15px 1.2fr 15px 1fr; align-items: center; padding: 8px 9px; background: #f5f8fa; }
.generated-spo-list strong, .generated-spo-list b { overflow: hidden; color: var(--navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.generated-spo-list em { overflow: hidden; color: var(--blue); font-size: 12px; font-style: normal; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.generated-spo-list span { color: var(--blue); text-align: center; }
.timeline-panel { min-width: 0; border-left: 1px solid var(--line); padding-left: 20px; }
.timeline-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.timeline-heading h3 { margin: 0; color: var(--navy); font-size: 20px; }
.timeline-heading span { color: var(--muted); font-size: 13px; }
.runtime-timeline { max-height: 280px; overflow-y: auto; }
.timeline-event { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.timeline-event time { color: var(--blue); font-size: 13px; font-weight: 800; }
.timeline-event strong { color: var(--navy); font-size: 15px; }
.timeline-event p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.empty-state { color: var(--muted); font-size: 14px; }
@keyframes pipelinePulse { from { border-color: #bfcdda; } to { border-color: var(--blue); background: var(--blue-soft); } }

.architecture-roadmap { max-width: 1840px; margin: 0 auto 24px; padding: 18px 20px; color: var(--ink); border: 1px solid var(--line); background: white; }
.architecture-roadmap h2 { margin: 3px 0 14px; color: var(--navy); font-size: 19px; }
.architecture-roadmap > p { margin: 13px 0 0; color: var(--muted); font-size: 13px; }
.roadmap-flow { display: flex; align-items: center; gap: 8px; }
.roadmap-flow span { flex: 1; padding: 10px 8px; color: var(--navy); border: 1px solid #c9d5df; background: #f6f8fa; font-size: 13px; font-weight: 700; text-align: center; }

/* Presentation visibility: optimized for 1080p recording and meeting-room projection. */
.scenario-selector > div:first-child > span,
.scenario-options article span,
.mission-marker span,
.ontology-stats span,
.runtime-graph-stats span,
.runtime-triple-list small,
.shared-context-content dt,
.closed-loop-summary span,
.impact-details dt,
.cycle-history dt { font-size: 12px; }
.workspace-heading { min-height: 116px; }
.section-number { min-width: 34px; font-size: 22px; }
.workspace-label { font-size: 13px; line-height: 1.4; }
.panel-heading h2, .workspace-heading h2 { font-size: clamp(31px, 1.9vw, 35px); }
.panel-heading p, .workspace-heading p { font-size: 17px; line-height: 1.5; }
.metric { min-height: 82px; }
.metric span { font-size: 14px; }
.metric strong { font-size: 24px; line-height: 1.3; }
.context-summary p { font-size: 18px; line-height: 1.72; }
.principle-cards h3 { font-size: 19px; }
.principle-cards h3 span { font-size: 13px; }
.principle-cards p { font-size: 15px; line-height: 1.55; }
.principle-cards strong { font-size: 18px; line-height: 1.55; }
.entity-card h3, .core-entity h3 { font-size: 19px; }
.entity-card p, .core-entity p { font-size: 16px; line-height: 1.55; }
.entity-card .state-chip { font-size: 15px; }
.core-entity > strong { font-size: 17px; }
.message p { font-size: 19px; line-height: 1.72; }
.message-source { font-size: 13px; }
.suggestions button { padding: 10px 13px; font-size: 16px; }
.chat-form textarea { font-size: 19px; line-height: 1.6; }
.chat-form button { padding-inline: 21px; font-size: 17px; }
.ai-notice { font-size: 13px; line-height: 1.5; }
.message-evidence summary { font-size: 16px; }
.message-evidence h4 { font-size: 17px; }
.message-evidence li { font-size: 16px; line-height: 1.6; }
.hydration-form label { font-size: 17px; }
.hydration-form select, .hydration-form textarea { font-size: 18px; line-height: 1.62; }
.hydration-form .primary-button { padding: 14px; font-size: 17px; }
.pipeline-step { min-height: 51px; padding: 13px 12px; font-size: 16px; }
.event-summary-heading span { font-size: 16px; }
.event-summary-heading strong { font-size: 20px; }
.event-summary-grid dt { font-size: 13px; }
.event-summary-grid dd { font-size: 17px; line-height: 1.58; }
.event-detail-toggles summary { font-size: 15px; }
.generated-spo-list strong, .generated-spo-list b,
.generated-spo-list em { font-size: 14px; }
.timeline-heading h3 { font-size: 23px; }
.timeline-heading span, .timeline-event time { font-size: 15px; }
.timeline-event strong { font-size: 18px; }
.timeline-event p { font-size: 16px; line-height: 1.65; }
.graph-viewer-heading h2 { font-size: 24px; }
.graph-viewer-heading p:last-child { font-size: 16px; line-height: 1.55; }
.runtime-graph-viewer h3 { font-size: 14px; }
.runtime-graph-stats strong { font-size: 19px; }
.runtime-triple-list strong, .runtime-triple-list b { font-size: 16px; }
.runtime-triple-list em { font-size: 15px; }
.runtime-entity-history article div span { font-size: 13px; }
.runtime-entity-history article strong { font-size: 19px; }
.runtime-entity-history article p { font-size: 15px; line-height: 1.65; }
.mission-graph-root span, .mission-graph-links span { font-size: 13px; }
.mission-graph-root strong { font-size: 19px; }
.mission-graph-links strong { font-size: 15px; }
.coa-heading h2 { font-size: 26px; }
.active-decision-cycle { font-size: 14px; }
.active-decision-summary, .workflow-status { font-size: 15px; }
.coa-recommendation span { font-size: 15px; }
.coa-recommendation h3 { font-size: 24px; }
.coa-recommendation strong { font-size: 17px; }
.coa-recommendation ul { font-size: 17px; line-height: 1.62; }
.coa-card h3 { min-height: 54px; font-size: 22px; }
.coa-card > p { min-height: 78px; font-size: 16px; line-height: 1.62; }
.coa-card dt { font-size: 14px; }
.coa-card dd { font-size: 18px; }
.coa-assets, .coa-points strong, .coa-points ul { font-size: 15px; line-height: 1.55; }
.coa-actions button, .approval-complete { min-height: 42px; font-size: 15px; }
.comparison-heading h3 { font-size: 22px; }
.coa-comparison table { font-size: 15px; }
.coa-comparison th, .coa-comparison td { white-space: normal; overflow-wrap: anywhere; }
.hitl-notice { font-size: 15px; line-height: 1.55; }
.execution-panel span { font-size: 14px; }
.execution-panel h3 { font-size: 25px; }
.execution-panel p, .execution-transitions span { font-size: 16px; line-height: 1.55; }
.execution-panel .primary-button { padding: 14px 17px; font-size: 16px; }
.shared-context-panel > div:first-child > span { font-size: 13px; }
.shared-context-panel h3 { font-size: 21px; }
.shared-context-panel p { font-size: 15px; line-height: 1.6; }
.shared-context-content dd { font-size: 15px; }
.shared-role-grid strong, .shared-role-grid span { font-size: 13px; }
.closed-loop-flow strong { font-size: 15px; }
.closed-loop-flow span { font-size: 14px; line-height: 1.45; }
.closed-loop-header span { font-size: 14px; }
.closed-loop-header h3 { font-size: 25px; }
.closed-loop-header p { font-size: 16px; line-height: 1.55; }
.closed-loop-header .primary-button { font-size: 16px; }
.closed-loop-summary strong { font-size: 20px; }
.closed-loop-summary p { font-size: 15px; line-height: 1.58; }
.closed-loop-details > summary { font-size: 15px; }
.plan-actual h4, .impact-details h4 { font-size: 18px; }
.plan-actual strong { font-size: 16px; }
.plan-actual p, .plan-actual li { font-size: 15px; line-height: 1.6; }
.impact-details dd { font-size: 17px; }
.replanning-result span { font-size: 13px; }
.replanning-result h4 { font-size: 21px; }
.replanning-result p, .replanning-result summary, .replanning-result ul { font-size: 15px; line-height: 1.58; }
.cycle-history > h4, .cycle-history article > span { font-size: 14px; }
.cycle-history article > strong { font-size: 18px; }
.cycle-history dd { font-size: 14px; }
.roadmap-flow b { color: var(--blue); }

@media (max-width: 1180px) {
  .scenario-selector { grid-template-columns: 1fr; margin-left: 18px; margin-right: 18px; }
  .mission-bar, .intent-drawer { margin-left: 18px; margin-right: 18px; }
  .ontology-summary { grid-template-columns: 1fr; margin-left: 18px; margin-right: 18px; }
  .runtime-graph-viewer { margin-left: 18px; margin-right: 18px; }
  .runtime-graph-stats { grid-template-columns: repeat(3, 1fr); }
  .runtime-triple-list { grid-template-columns: repeat(2, 1fr); }
  .dashboard { grid-template-columns: 1fr; }
  .conversation-panel { min-height: 560px; }
  .chat-messages { max-height: 360px; }
  .hydration-hub { margin: 0 18px 24px; }
  .architecture-roadmap { margin: 0 18px 24px; }
  .coa-workspace { margin: 0 18px 24px; }
  .coa-cards { grid-template-columns: 1fr; }
  .coa-card h3, .coa-card > p { min-height: auto; }
  .execution-panel { grid-template-columns: 1fr 1fr; }
  .execution-panel .primary-button { grid-column: 1 / -1; }
  .closed-loop-flow { flex-wrap: wrap; }
  .closed-loop-flow div { flex: 1 1 28%; }
  .closed-loop-summary { grid-template-columns: 1fr; }
  .cycle-history article { grid-template-columns: 1fr 1fr; }
  .cycle-history dl { grid-column: 1 / -1; }
  .hub-layout { grid-template-columns: 1fr 1.5fr; }
  .timeline-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
}
@media (max-width: 760px) {
  .scenario-selector { margin: 10px; }
  .scenario-options, .shared-context-panel { grid-template-columns: 1fr; }
  .shared-context-content dl, .shared-role-grid { grid-template-columns: 1fr 1fr; }
  .site-header { padding: 22px 20px; align-items: flex-start; flex-direction: column; }
  .header-actions { width: 100%; }
  .header-view-buttons button { min-width: 0; }
  .simulation-badge { white-space: normal; }
  .dashboard { display: block; padding: 10px; }
  .mission-bar { grid-template-columns: repeat(2, 1fr); margin: 10px; }
  .intent-drawer { margin: 0 10px; }
  .ontology-summary { margin: 8px 10px 0; }
  .runtime-graph-viewer { margin: 8px 10px 0; }
  .ontology-groups { grid-template-columns: 1fr 1fr; }
  .runtime-graph-stats { grid-template-columns: 1fr 1fr; }
  .runtime-triple-list, .runtime-graph-lower { grid-template-columns: 1fr; }
  .mission-graph-links { grid-template-columns: 1fr 1fr; }
  .intent-drawer form { grid-template-columns: 1fr; }
  .panel { min-height: auto; margin-bottom: 10px; }
  .entity-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .principle-cards { grid-template-columns: 1fr; }
  .chat-messages { height: 420px; max-height: none; }
  .hydration-hub { margin: 0 10px 18px; }
  .architecture-roadmap { margin: 0 10px 18px; }
  .coa-workspace { margin: 0 10px 18px; }
  .coa-heading { align-items: flex-start; flex-direction: column; }
  .coa-cycle-context { align-items: flex-start; }
  .coa-recommendation { grid-template-columns: 1fr; }
  .coa-points { grid-template-columns: 1fr; }
  .hitl-notice { flex-direction: column; }
  .execution-panel { grid-template-columns: 1fr; }
  .execution-panel .primary-button { grid-column: auto; min-width: 0; }
  .closed-loop-flow { align-items: stretch; flex-direction: column; }
  .closed-loop-flow b { align-self: center; transform: rotate(90deg); }
  .plan-actual, .replanning-result { grid-template-columns: 1fr; }
  .impact-details dl { grid-template-columns: 1fr 1fr; }
  .cycle-history article { grid-template-columns: 1fr; }
  .cycle-history dl { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .workspace-heading { min-height: 0; padding: 19px 18px 18px 21px; gap: 11px; }
  .section-number { min-width: 26px; padding-top: 19px; font-size: 16px; }
  .panel-heading h2, .workspace-heading h2 { font-size: clamp(23px, 7vw, 27px); overflow-wrap: anywhere; }
  .workspace-label { font-size: 10px; letter-spacing: .1em; }
  .hub-heading { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .hub-heading .workspace-heading-copy { flex: 1 1 calc(100% - 48px); }
  .hub-heading .simulation-label { margin-left: 37px; }
  .hydration-flow-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .hydration-flow-summary b { transform: rotate(90deg); margin-left: 5px; }
  .hub-layout { grid-template-columns: 1fr; padding: 18px; }
  .timeline-panel { grid-column: auto; }
  .hydration-pipeline { align-items: stretch; flex-direction: column; }
  .hydration-pipeline span { align-self: center; transform: none; }
  .event-summary-grid, .event-detail-toggles { grid-template-columns: 1fr; }
  .event-summary-grid .event-observation, .event-summary-grid .event-runtime-update { grid-column: auto; }
  .core-entities { grid-template-columns: 1fr 1fr; }
  .roadmap-flow { align-items: stretch; flex-direction: column; }
  .roadmap-flow b { align-self: center; transform: rotate(90deg); }
}