/* Self-hosted, OFL-licensed fonts; license files live alongside the assets. */
.handoff-review { margin: 12px 0; padding: 16px; border: 1px solid var(--cobalt); border-radius: 12px; background: var(--soft); overflow-wrap: anywhere; }
.handoff-review h3 { margin: 0 0 8px; font-size: 16px; }
.handoff-review-item { padding: 12px 0; border-top: 1px solid var(--line); }
.handoff-review-item p { margin: 6px 0; }
.handoff-review-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.handoff-review button { white-space: normal; text-align: left; max-width: 100%; }
@font-face { font-family: 'Space Grotesk'; src: url('/static/fonts/space-grotesk-variable.woff2') format('woff2'); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/static/fonts/ibm-plex-mono-regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/static/fonts/ibm-plex-mono-medium.woff2') format('woff2'); font-style: normal; font-weight: 500 700; font-display: swap; }
:root {
  --text: #151a30;
  --muted: #536079;
  --line: #cbd3e5;
  --panel: #fff;
  --soft: #eef2ff;
  --accent: #e4eaff;
  --cobalt: #2447f9;
  --lime: #d2ff3a;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; color: var(--text); background: var(--soft); font-family: var(--sans); }
body { display: grid; grid-template-rows: auto minmax(0, 1fr); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid transparent; border-radius: 5px; padding: 8px 11px; font-size: 12px; font-weight: 600; background: transparent; transition: background .15s; }
button:hover { background: #e4eaff; }
button:disabled { cursor: wait; opacity: .5; }
:focus-visible { outline: 2px solid #2447f9; outline-offset: 3px; }
select, input, textarea { border: 1px solid var(--line); border-radius: 5px; background: var(--panel); padding: 8px 10px; min-width: 0; }
textarea { resize: vertical; }
button.primary { background: var(--cobalt); color: white; }
button.primary:hover { background: #1430c4; }
button.primary span { margin-left: 10px; }
button.ghost { background: white; border-color: var(--line); }
button.ghost:hover { background: var(--soft); }
.topbar { min-height: 56px; padding: 9px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border-bottom: 1px solid var(--line); position: relative; }
.topbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cobalt) 0 66%, var(--lime) 66% 88%, #f72585 88%); }
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brandmark { width:29px; height:29px; display:block; flex:none; object-fit:contain; }
.account-brand { display:flex; align-items:center; gap:9px; margin-bottom:20px; }
.brandname { font-family: var(--sans); font-weight: 700; letter-spacing: -.6px; font-size: 18px; }
.brand { text-align:left; padding:5px; }
.project-dashboard { overflow:auto; min-height:0; padding:clamp(20px,4vw,56px); }
.dashboard-header { display:flex; justify-content:space-between; align-items:center; gap:20px; max-width:1200px; margin:0 auto 24px; }
.dashboard-header h1 { margin:8px 0; font-size:clamp(28px,4vw,42px); letter-spacing:-1px; }
.dashboard-header p { color:var(--muted); }
.dashboard-header button { flex-shrink:0; white-space:nowrap; }
#dashboardStatus { max-width:1200px; margin:0 auto 18px; }
.dashboard-projects { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:18px; max-width:1200px; margin:auto; }
.dashboard-project { min-width:0; padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:10px; display:flex; flex-direction:column; gap:16px; border-top:4px solid var(--cobalt); }
.dashboard-project p { margin:0; font:11px var(--mono); color:var(--muted); }
.dashboard-project h2 { overflow-wrap:anywhere; }
.dashboard-project time { font-size:12px; color:var(--muted); }
.dashboard-project button { align-self:flex-start; margin-top:auto; }
#projectsBtn[aria-current="page"] { background:var(--lime); }
.top-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
#projectSelect { max-width: 260px; font-size: 12px; background: var(--soft); }
.mode-switch { display: flex; border: 1px solid var(--line); border-radius: 5px; padding: 2px; }
.mode-switch button { font-size: 10px; font-family: var(--mono); border-radius: 3px; color: var(--muted); padding: 6px 9px; }
.mode-switch button.active { background: var(--lime); color: var(--text); }
.workspace { display: grid; grid-template-columns: minmax(320px, 41%) minmax(0, 1fr); gap: 12px; padding: 14px; min-height: 0; }
.chat-pane, .canvas-pane { min-width: 0; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.chat-pane { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.canvas-pane { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.pane-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 16px; border-bottom: 1px solid var(--line); min-height: 46px; }
.eyebrow { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
h2, h3 { margin: 2px 0 0; letter-spacing: -.6px; font-weight: 650; }
h2 { font-size: 22px; }
h3 { font-size: 24px; }
.pane-label { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; line-height: 1.5; text-transform: uppercase; }
.small { font-size: 11px; color: var(--muted); line-height: 1.45; }
.messages { overflow-y: auto; padding: 24px 20px; scrollbar-gutter: stable; }
.messages:empty::before { content: 'Start with a question.\A Build something worth exploring.'; display: block; white-space: pre-line; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -1px; line-height: 1.2; font-weight: 550; padding-top: min(12vh, 100px); max-width: 330px; }
.messages:empty::after { content: 'Choose a method or add your evidence below.'; display: block; color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 16px; }
.message { margin-bottom: 24px; max-width: 100%; }
.message.user { margin-left: 28px; }
.message-meta { font-size: 10px; color: var(--muted); margin: 0 0 8px; font-family: var(--mono); }
.message-body { overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.7; font-size: 14px; }
.message.user .message-body { background: #eaf0ff; border: 1px solid #b7c6ff; border-radius: 7px; padding: 12px 14px; }
.message-actions { padding-top: 10px; }
.message-actions button { padding: 5px 8px; font-size: 10px; }
.composer { border-top: 1px solid var(--line); padding: 14px; background: white; min-width: 0; }
.input-shell { border: 1px solid #91a2c2; border-radius: 8px; padding: 10px; background: #fff; }
.input-shell:focus-within { border-color: #2447f9; box-shadow: 0 0 0 2px #dce5ff; }
.composer textarea { display: block; border: 0; padding: 4px; width: 100%; min-height: 62px; max-height: 180px; background: transparent; font-size: 14px; line-height: 1.6; resize: vertical; outline: none; }
.composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 6px; }
.composer-toolbar { display: flex; align-items: center; gap: 7px; padding-top: 10px; min-width: 0; }
.tool-picker { position: relative; flex-shrink: 0; }
#actionsBtn { font-weight: 500; }
#actionsBtn[aria-expanded="true"] { background: var(--accent); border-color: #2447f9; }
#actionsBtn > span { margin-left: 6px; }
.actions-panel { position: absolute; z-index: 10; bottom: calc(100% + 10px); left: 0; width: min(330px, calc(100vw - 58px)); max-height: 48vh; overflow-y: auto; background: white; border: 1px solid #91a2c2; box-shadow: 0 8px 28px #20202026; border-radius: 8px; padding: 8px; }
.menu-label { padding: 7px 8px 10px; }
.action-row { display: flex; align-items: center; text-align: left; width: 100%; padding: 10px 8px; gap: 12px; }
.action-row strong { display: block; font-size: 12px; font-weight: 600; }
.action-row small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.action-icon { display: grid; place-items: center; width: 28px; height: 28px; background: var(--soft); border: 1px solid var(--line); font-size: 18px; flex-shrink: 0; }
.method-panel { padding: 4px 8px 10px; }
.method-panel label { display: block; font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.method-panel select { width: 100%; font-size: 12px; }
.method-shortcut { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #2441b9; font-weight: 500; text-align: left; padding: 7px 5px; }
.files-toggle { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-shrink: 0; font-weight: 500; }
#fileCount { background: var(--soft); border-radius: 3px; padding: 1px 5px; font: 10px var(--mono); }
.files-panel { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.files-heading { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.upload-tray { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.upload-tray:empty { display: none; }
.upload-chip { flex: 0 0 180px; min-width: 0; border: 1px solid var(--line); background: var(--soft); border-radius: 5px; padding: 8px 10px; scroll-snap-align: start; }
.file-select { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.upload-check { margin: 0; width: 14px; height: 14px; accent-color: #2447f9; }
.file-kind { font: 9px var(--mono); text-transform: uppercase; color: var(--muted); }
.upload-chip a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; text-underline-offset: 3px; color: var(--text); }
.service-notice { color: #9b3b00; font-size: 10px; line-height: 1.5; margin-top: 10px; }
.canvas-actions { display: flex; gap: 7px; }
.canvas-viewport { overflow: auto; background: #edf2ff; position: relative; }
.canvas-board { position: relative; width: 1800px; height: 1200px; background-image: linear-gradient(#d7e0f5 1px, transparent 1px), linear-gradient(90deg, #d7e0f5 1px, transparent 1px); background-size: 24px 24px; }
.artifact { position: absolute; min-width: 230px; min-height: 130px; background: #fff; border: 1px solid #a9b8d5; border-radius: 9px; box-shadow: 0 8px 20px #2020200d; overflow: auto; resize: both; isolation: isolate; }
.artifact.dragging { opacity: .9; box-shadow: 0 16px 40px #20202026; }
.artifact-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 8px 9px; background: #eef2ff; border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; }
.artifact-title { font-weight: 650; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-tools { display: flex; gap: 3px; }
.artifact-tools button { padding: 3px 5px; background: white; color: var(--muted); border-color: var(--line); font-size: 10px; }
.artifact-body { padding: 10px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.artifact-body[contenteditable="true"] { outline: 2px solid #2447f9; outline-offset: -2px; background: #f0f4ff; }
.note-artifact, .note-artifact > .artifact-header { background: var(--lime); color: var(--text); border-color: #95b823; }
.note-artifact .card-change-meta { color: #344122; border-color: #95b823; }
.note-artifact .artifact-body[contenteditable="true"] { background: var(--lime); }
.artifact img { width: 100%; height: auto; display: block; }
.image-meta { padding: 7px 9px; font-size: 10px; color: var(--muted); }
dialog { border: 1px solid var(--line); border-radius: 10px; padding: 0; width: min(720px, 92vw); max-height: 90dvh; box-shadow: 0 30px 70px #20202033; }
dialog::backdrop { background: #20202066; backdrop-filter: blur(3px); }
.dialog-card { padding: 24px; display: grid; gap: 16px; }
.dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 15px; margin-bottom: 4px; }
.dialog-card label { display: grid; gap: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }
.dialog-card textarea, .dialog-card input, .dialog-card select { width: 100%; font-weight: 400; color: var(--text); font-size: 13px; }
.dialog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 7px; }
.icon-btn { padding: 3px 8px; background: white; border-color: var(--line); font-size: 18px; }
.status-error { color: #b42318; }
.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; }
@media (max-width: 1050px) {
  .topbar { padding: 9px 14px; }
  #projectSelect { max-width: 185px; }
  .workspace { padding: 10px; gap: 10px; grid-template-columns: minmax(320px, 44%) minmax(0, 1fr); }
  .pane-header { padding: 6px 14px; }
  .composer { padding: 10px; }
}
@media (max-width: 700px) {
  body { height: auto; min-height: 100%; display: block; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .brandname { font-size: 17px; }
  .top-actions { flex-wrap: wrap; width: 100%; gap: 6px; }
  #projectSelect { flex: 1; max-width: none; width: 120px; }
  .mode-switch { margin-left: auto; }
  .mode-switch button { padding: 6px; font-size: 9px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .chat-pane { height: max(610px, 78dvh); }
  .canvas-pane { height: 70dvh; min-height: 400px; }
  .messages { padding: 20px 16px; }
  .messages:empty::before { font-size: 30px; }
  .dialog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dialog-card { padding: 18px; }
  .files-heading .small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Opportunity maps share the existing chat-and-canvas workflow. */
.opportunity-preview { white-space: normal; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.opportunity-preview > strong { font-size: 14px; display: block; }
.map-mode { margin-top: 4px; }
.map-preview-svg { width: 100%; height: 280px; display: block; margin: 6px 0; }
.map-hmw { border-left: 3px solid #b87800; padding: 5px 10px; font-size: 12px; line-height: 1.5; margin: 0; }
.map-summary { font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.message-actions { display: flex; gap: 6px; }
.map-artifact .opportunity-preview { border: 0; border-radius: 0; }
.map-artifact .map-preview-svg { height: 365px; }
#mapDialog { width: min(1440px, 97vw); max-height: 95dvh; padding: 0; }
.map-dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 18px 22px 8px; }
.map-dialog-header p { margin: 6px 0 0; }
.map-meta-fields { display: grid; grid-template-columns: minmax(180px,1fr) minmax(220px,2fr); gap: 14px; padding: 10px 22px 16px; }
#mapDialog label { display: grid; gap: 5px; font-size: 11px; font-weight: 600; color: var(--muted); }
#mapDialog input, #mapDialog textarea, #mapDialog select { width: 100%; font-size: 12px; font-weight: 400; }
.map-meta-fields textarea { resize: vertical; min-height: 38px; }
.map-editor-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.map-workspace { min-width: 0; display: flex; flex-direction: column; background: #edf2ff; }
.map-legend { padding: 10px 14px; background: #f6f8ff; border-bottom: 1px solid var(--line); }
.map-stage { height: min(56dvh,600px); min-height: 370px; overflow: auto; background-image: radial-gradient(#b4c3e2 1px,transparent 1px); background-size: 20px 20px; }
#mapEditorSvg { width: 100%; height: 100%; min-width: 780px; min-height: 370px; display: block; touch-action: none; user-select: none; }
.map-node { cursor: grab; }
.map-node:focus-visible { outline: none; }
.map-node:focus-visible rect { stroke: #2447f9; stroke-width: 6; }
.map-inspector { padding: 14px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; overflow-y: auto; max-height: calc(min(56dvh,600px) + 36px); min-height: 410px; }
.map-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
#mapDialog .map-check { display: flex; align-items: center; gap: 7px; }
#mapDialog .map-check input { width: auto; accent-color: #9b6400; }
.map-node-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.map-links { border-top: 1px solid var(--line); padding-top: 12px; font-size: 12px; }
.map-links summary { cursor: pointer; font-weight: 600; }
.map-links label, .map-links > button { margin-top: 9px; }
.map-link-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 8px; font-size: 11px; border-top: 1px solid var(--line); padding-top: 7px; }
.map-link-row span { overflow-wrap: anywhere; }
.map-dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; background: #fff; position: sticky; bottom: 0; border-top: 1px solid var(--line); }
.map-dialog-footer > div { display: flex; gap: 7px; flex-shrink: 0; }
@media (max-width: 800px) {
  .map-meta-fields { grid-template-columns: 1fr; padding: 10px 14px; }
  .map-dialog-header { padding: 14px; }
  .map-editor-layout { grid-template-columns: 1fr; }
  .map-inspector { max-height: none; min-height: 0; border-left: 0; border-top: 1px solid var(--line); }
  .map-stage { height: 370px; }
  .map-dialog-footer { padding: 12px; flex-wrap: wrap; }
  .map-dialog-footer > div { margin-left: auto; }
  .map-preview-svg { height: 220px; }
}

/* Cobalt / lime studio identity: saturated navigation, quiet reading surfaces. */
button { font-family: var(--mono); font-weight: 500; }
::selection { background: var(--lime); color: var(--text); }
input::placeholder, textarea::placeholder { color: #61708a; opacity: 1; }
.chat-pane > .pane-header { background: var(--cobalt); color: #fff; border-bottom-color: var(--cobalt); }
.canvas-pane > .pane-header { background: var(--text); color: #fff; border-bottom-color: var(--text); }
.canvas-actions button.ghost { background: var(--lime); color: var(--text); border-color: var(--lime); }
.canvas-actions button.ghost:hover { background: #bdec21; border-color: #bdec21; }
.message.user .message-body { border-left: 3px solid var(--cobalt); }
.message.assistant .message-meta { color: #2441b9; }
.method-shortcut { font-family: var(--mono); }
#actionsBtn[aria-expanded="true"] { color: #2441b9; }
.action-icon { background: var(--lime); color: var(--text); border-color: #95b823; }
#fileCount { background: var(--lime); color: var(--text); }
.opportunity-preview > strong, .artifact-title { font-weight: 600; }
.map-hmw { background: #f3f8dd; color: var(--text); }
.map-dialog-header { border-top: 4px solid var(--cobalt); }

/* Insight boards: observation, hypothesis, evidence and next research step. */
.insight-context { margin-top: 9px; font-size: 11px; border-top: 1px solid var(--line); padding-top: 8px; }
.insight-context > summary { cursor: pointer; font-family: var(--mono); color: #2441b9; }
#insightContextCount { color: var(--muted); margin-left: 6px; }
#insightNodePicker { max-height: 145px; overflow: auto; padding: 5px 0; }
#insightNodePicker summary { cursor: pointer; margin-bottom: 7px; font-weight: 600; }
#insightNodePicker label { display: flex; gap: 7px; align-items: start; padding: 4px 0; }
#insightNodePicker input { accent-color: var(--cobalt); }
.insights-preview { padding: 12px; white-space: normal; }
.message .insights-preview { padding: 0; }
.insight-board-title { display: block; font-size: 16px; }
.insight-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 12px; }
.insight-card { border: 1px solid var(--line); border-top: 3px solid var(--cobalt); border-radius: 7px; padding: 14px; background: white; min-width: 0; }
.insight-card:nth-child(3n+2) { border-top-color: #ae167c; }
.insight-card:nth-child(3n) { border-top-color: #007d73; }
.insight-card h4 { display: flex; align-items: start; gap: 9px; font-size: 15px; margin: 0 0 10px; }
.insight-number { border-radius: 50%; background: var(--text); color: var(--lime); display: inline-grid; place-items: center; min-width: 24px; height: 24px; font: 11px var(--mono); }
.insight-card p { font-size: 13px; line-height: 1.6; margin: 6px 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.insight-strength { display: block; font: 10px var(--mono); color: var(--muted); margin-bottom: 14px; }
.insight-card .insight-need { background: #f3f8dd; border-left: 3px solid #7f9e15; padding: 10px; }
.insight-analysis { border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; }
.insight-analysis summary { cursor: pointer; font-weight: 600; margin-bottom: 12px; }
.insight-analysis strong { display: block; font-size: 11px; }
.insight-references { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.insight-references button { font-size: 10px; color: #2441b9; overflow-wrap: anywhere; text-align: left; max-width: 100%; }
.insight-takeaway { background: var(--text); color: white; padding: 14px; border-radius: 6px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.insight-dialog { width: min(1160px,96vw); max-height: 94dvh; color: var(--text); }
.insight-meta { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 14px 22px; }
.insight-dialog label { display: grid; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.insight-dialog input, .insight-dialog textarea, .insight-dialog select { width: 100%; font-size: 13px; color: var(--text); font-weight: 400; }
.insight-editor-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); border-top: 1px solid var(--line); }
.insight-card-nav { background: var(--soft); padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; border-right: 1px solid var(--line); max-height: 55dvh; overflow: auto; }
.insight-card-nav button { text-align: left; overflow-wrap: anywhere; }
.insight-card-nav button.active { background: var(--cobalt); color: white; }
.insight-editor-fields { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; max-height: 55dvh; overflow: auto; }
.insight-editor-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.insight-editor-heading h4 { margin: 0; }
.insight-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.insight-link-editor { border-top: 1px solid var(--line); padding-top: 12px; }
.insight-link-editor h4 { margin: 0 0 8px; }
.insight-ref-editor { padding: 12px; margin-bottom: 10px; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; display: flex; flex-direction: column; gap: 9px; }
.insight-ref-editor > strong { overflow-wrap: anywhere; }
.insight-link-editor > button { margin-top: 8px; }
.insight-source-dialog { color: var(--text); width: min(850px,94vw); }
.source-excerpt { border-left: 3px solid var(--cobalt); padding: 12px; margin: 0; background: var(--soft); white-space: pre-wrap; }
.source-original { color: #2441b9; overflow-wrap: anywhere; }
.source-text { max-height: 45dvh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 var(--mono); background: var(--soft); padding: 14px; margin: 0; }
.source-text mark { background: var(--lime); color: var(--text); }
@media (max-width:700px) {
  .insight-meta, .insight-editor-layout, .insight-field-grid { grid-template-columns: minmax(0,1fr); }
  .insight-meta { padding: 12px; }
  .insight-card-nav { max-height: 150px; border-right: 0; border-bottom: 1px solid var(--line); }
  .insight-editor-fields { max-height: none; padding: 12px; }
  .insight-card-grid { grid-template-columns: minmax(0,1fr); }
}

/* Persona comparison follows the deck's paired profiles, without unsupported scores. */
.personas-preview { padding:14px; min-width:0; }
.persona-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.persona-card { border:1px solid var(--border,#d9dfea); border-radius:14px; overflow:hidden; background:var(--panel,#fff); min-width:0; }
.persona-profile-header { background:#2447f9; color:#fff; padding:18px; display:flex; align-items:center; gap:12px; }
.persona-card:nth-child(even) .persona-profile-header { background:#d2ff3a; color:#151a30; }
.persona-profile-header .eyebrow { color:inherit; font-size:9px; opacity:.85; }
.persona-profile-header h4 { font-size:24px; margin:5px 0; overflow-wrap:anywhere; }
.persona-profile-header p { margin:0; font-size:13px; }
.persona-avatar { width:42px; height:42px; flex-shrink:0; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font-size:23px; }
.persona-statement { padding:16px; background:#edf1ff; border-bottom:1px solid #d9dfea; }
.persona-statement p { margin:0 0 8px; font-size:16px; }
.persona-statement small { color:#47516c; font-size:10px; }
.persona-attribute { margin:14px 16px; }
.persona-attribute h5 { font-size:14px; margin:0 0 6px; }
.persona-attribute p { white-space:pre-wrap; font-size:13px; line-height:1.5; margin:7px 0; overflow-wrap:anywhere; }
.persona-basis { display:inline-block; font-size:10px; padding:3px 6px; border-radius:4px; background:#f0f2f7; color:#47516c; }
.persona-basis.basis-inferred { background:#fff0cd; color:#6b4600; }
.persona-basis.basis-observed { background:#e5f5e9; color:#215638; }
.persona-card > .insight-references { margin:16px; border-top:1px solid #d9dfea; padding-top:14px; }
.persona-card > .insight-references strong { width:100%; font-size:12px; }
.personas-artifact { overflow:auto; }
.persona-comparison { overflow:auto; min-height:0; flex:1; }
.persona-dialog { width:min(1180px,96vw); }
.persona-dialog .insight-editor-layout[hidden],.persona-comparison[hidden] { display:none; }
.persona-field { padding:12px; border:1px solid #d9dfea; border-radius:10px; }
.persona-field select { font-size:12px; }
#personaInsightPicker label { display:flex; gap:8px; align-items:center; margin:8px 0; font-size:12px; }
#personaInsightPicker input { width:auto; }
.message .persona-grid { grid-template-columns:1fr; }
@media(max-width:650px) { .persona-grid { grid-template-columns:1fr; } .persona-profile-header h4 { font-size:21px; } }

/* Method 635: six-round worksheets, restrained provenance badges, separate synthesis. */
.bw-dialog { width:min(1320px,97vw); }
.bw-dialog[open] { display:flex; flex-direction:column; height:94dvh; }
.bw-dialog > :not(.bw-area) { flex-shrink:0; }
.bw-meta { display:grid; grid-template-columns:1fr 2fr; gap:14px; padding:12px 20px; }
.bw-dialog label { display:grid; gap:6px; font-size:11px; color:var(--muted); }
.bw-dialog input,.bw-dialog textarea,.bw-dialog select { width:100%; font-size:13px; }
.bw-tabs,.bw-sheetbar { display:flex; gap:8px; padding:10px 20px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.bw-tabs button.active { background:var(--cobalt); color:white; border-color:var(--cobalt); }
.bw-area { min-height:0; overflow:auto; flex:1; }
.bw-sheetbar label { flex:1; min-width:130px; }
.bw-grid-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; }
.bw-grid-scroll,.bw-preview-scroll { overflow:auto; min-width:0; }
.bw-table { border-collapse:collapse; width:100%; table-layout:fixed; font-size:12px; }
.bw-table th,.bw-table td { border:1px solid var(--line); padding:10px; vertical-align:top; text-align:left; }
.bw-table thead th { background:var(--soft); font-family:var(--mono); font-weight:500; }
.bw-table th:first-child { width:125px; }
.bw-table tbody th { background:#f4f7e8; }
.bw-table th small,.bw-table td small { display:block; font-size:10px; font-weight:400; margin-top:7px; overflow-wrap:anywhere; }
.bw-table td.selected { background:#eef2ff; box-shadow:inset 0 0 0 2px var(--cobalt); }
.bw-table textarea { resize:vertical; min-height:110px; background:white; line-height:1.5; }
.bw-origin { display:block; color:var(--muted); font-family:var(--mono); font-size:9px; line-height:1.5; margin-top:7px; }
.bw-inspector { border-left:1px solid var(--line); padding:16px; background:#f8faff; }
.bw-inspector button { margin:4px 0; max-width:100%; overflow-wrap:anywhere; }
.bw-inspector h4 { margin:0 0 8px; font-size:13px; }
.bw-inspector h4:not(:first-child) { margin-top:16px; }
.bw-dialog label.bw-check { display:flex; align-items:flex-start; gap:8px; margin:10px 0; }
.bw-check input { width:auto; flex-shrink:0; }
.bw-context-section,.bw-synthesis-intro { padding:16px 20px; border-bottom:1px solid var(--line); }
.bw-context-section h4,.bw-synthesis-intro h4 { margin:0 0 10px; }
.bw-group { margin:16px 20px; padding:16px; display:grid; gap:12px; border:1px solid var(--line); border-radius:8px; }
#bwAddGroup { margin:0 20px 20px; }
.brainwriting-preview { padding:14px; min-width:0; white-space:normal; }
.bw-challenge { padding:10px; background:#f3f8dd; border-left:3px solid var(--lime); font-size:13px; }
.bw-preview-scroll { margin-top:12px; }
.bw-preview-table { min-width:480px; }
.bw-preview-table th:first-child { width:70px; }
.bw-preview-table td p { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font-size:11px; line-height:1.5; }
.brainwriting-artifact { overflow:auto; }
#bwContextPicker label { display:flex; align-items:center; gap:8px; font-size:12px; margin:8px 0; }
#bwContextPicker input { width:auto; }
#bwAction { font-size:12px; max-width:100%; margin:6px 0; }
@media(max-width:900px) { .bw-grid-layout { grid-template-columns:1fr; } .bw-inspector { border-left:0; border-top:1px solid var(--line); } .bw-table:not(.bw-preview-table) { min-width:640px; } }
@media(max-width:650px) { .bw-meta { grid-template-columns:1fr; padding:10px 14px; } .bw-tabs,.bw-sheetbar { padding:8px 14px; } .bw-dialog { width:96vw; } }

/* SCAMPER follows the deck's seven lenses and concept synthesis board. */
.scamper-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.scamper-tile{border:1px solid var(--line,#dce0ed);border-top:3px solid #2447f9;border-radius:8px;padding:10px;min-width:0;overflow-wrap:anywhere;background:#f6f8ff}
.scamper-tile strong{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#2447f9}.scamper-tile p{font-size:13px;margin:8px 0}
.scamper-concept-preview{border-left:4px solid #d2ff3a;padding:8px 12px;margin:8px 0;background:#f6f8ff;overflow-wrap:anywhere}
.scamper-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.scamper-lens{min-width:0;border:1px solid #dce0ed;border-top:4px solid #2447f9;border-radius:10px;padding:14px}.scamper-lens h4{margin:0;color:#2447f9}.scamper-variation{padding:10px 0;border-bottom:1px solid #dce0ed;margin-bottom:12px}.scamper-dialog label{display:flex;flex-direction:column;gap:5px;margin:10px 0}.scamper-dialog label.bw-check{flex-direction:row;align-items:flex-start}.scamper-dialog textarea,.scamper-dialog input,.scamper-dialog select{max-width:100%;min-width:0}.scamper-dialog .bw-check input{flex-shrink:0}.scamper-preview{overflow-wrap:anywhere}.scamper-preview .insight-references button{white-space:normal;text-align:left}
@media(max-width:700px){.scamper-editor-grid{grid-template-columns:1fr}.scamper-overview{grid-template-columns:1fr}.scamper-dialog .bw-meta{grid-template-columns:1fr}}

/* Concept cards pair a visualization with a concise, editable explanation. */
.concept-layout,.concept-image-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.concept-layout>div,.concept-image-editor>div{min-width:0}.concept-visual{margin:0 0 16px;min-width:0}.concept-visual img{width:100%;max-height:440px;object-fit:contain;border-radius:10px;background:#f3f5ff}.concept-visual figcaption{margin:8px 0}.concept-empty{display:grid;place-items:center;min-height:160px;border:1px dashed #a4afff;background:#f3f5ff;border-radius:10px;color:#2447f9;font-size:60px}.concept-field{border-left:3px solid #2447f9;padding:8px 12px;margin-bottom:10px;background:#f5f7ff;border-radius:5px}.concept-field h4{margin:0 0 6px;color:#2447f9;font-size:13px}.concept-field p{margin:0;white-space:pre-wrap;font-size:13px}.concept-tagline{font-style:italic}.concept-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.concept-edit-grid label:first-child{grid-column:1/-1}.concept-dialog label{display:flex;flex-direction:column;gap:5px;margin:10px 0}.concept-dialog input,.concept-dialog textarea,.concept-dialog select{max-width:100%;min-width:0}.concept-prompt{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}.concept-preview{overflow-wrap:anywhere}.concept-preview .insight-references button{white-space:normal;text-align:left}.concept-image-editor{padding:0 16px 16px}.concept-dialog #ccGenerate{margin:12px 6px 12px 0}
@media(max-width:700px){.concept-layout,.concept-image-editor,.concept-edit-grid{grid-template-columns:1fr}.concept-dialog .bw-meta{grid-template-columns:1fr}.concept-visual img{max-height:280px}}

/* Weighted concept comparison. Tables scroll inside the card/editor on mobile. */
.selection-scroll{overflow:auto;max-width:100%;margin:12px 0}.selection-table{border-collapse:collapse;width:100%;font-size:13px}.selection-table th,.selection-table td{border:1px solid #dce0ed;padding:10px;min-width:110px;vertical-align:top;text-align:left}.selection-table thead th{background:#eef1ff;color:#2447f9}.selection-table tbody th{background:#f8f9ff;min-width:170px}.selection-table th small{display:block;margin-top:6px;font-weight:400}.selection-table button{white-space:normal;text-align:left}.selection-edit-table th,.selection-edit-table td{min-width:210px}.selection-edit-table input{width:100%;min-width:0}.selection-edit-table textarea{width:100%;min-height:85px}.selection-dialog label{display:flex;flex-direction:column;gap:5px;margin:10px 0;font-weight:400}.selection-dialog input,.selection-dialog select,.selection-dialog textarea{min-width:0;max-width:100%}.selection-results{padding:12px;border:1px solid #dce0ed;border-left:4px solid #2447f9;border-radius:8px;margin:12px 0;background:#f8f9ff}.selection-lead{font-weight:700;color:#2447f9}.selection-rank{display:flex;flex-wrap:wrap;gap:8px 16px;padding:8px 0;border-top:1px solid #dce0ed}.selection-rank strong{flex:1;min-width:160px}.selection-rank .status-error{flex-basis:100%}.selection-preview{overflow-wrap:anywhere}.selection-sensitivity-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.selection-sensitivity-row span{grid-column:1/-1}.selection-sensitivity-row progress{width:100%;accent-color:#2447f9}.selection-dialog .bw-area{padding:0 16px 16px}.selection-sensitivity{border:1px solid #dce0ed;border-radius:8px;padding:14px;margin:12px 0}
@media(max-width:700px){.selection-dialog .bw-meta{grid-template-columns:1fr}.selection-rank{flex-direction:column}.selection-edit-table th,.selection-edit-table td{min-width:190px}}

/* Product Brief and PRFAQ: readable section editor and compact canvas overview. */
.product-document-preview{padding:4px;min-width:0}.product-document-preview .insight-board-title{display:block}.product-document-summary,.pd-prose{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.pd-preview-section{padding:12px 0;border-bottom:1px solid var(--line,#d7dbee)}.pd-preview-section>summary{cursor:pointer;font-weight:600}.pd-preview-section>span{display:block;margin-top:10px}.pd-editor-layout{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:24px}.pd-outline{display:flex;flex-direction:column;align-items:stretch;gap:6px}.pd-outline .eyebrow{margin-top:12px}.pd-outline button{text-align:left;white-space:normal;overflow-wrap:anywhere}.pd-outline button.active{background:#2942ff;color:white}.pd-section-editor{min-width:0}.pd-section-editor>label{display:block;margin-bottom:16px}.pd-section-editor #pdSectionText{min-height:280px;line-height:1.6}.pd-section-sources{border:1px solid #cbd1ef;border-radius:8px;padding:12px;margin:16px 0}.pd-section-sources label{display:flex;gap:8px;align-items:center;margin:8px 0}.pd-section-sources input{width:auto}.product-document-dialog .bw-area{padding:16px}.product-document-dialog .bw-meta textarea{min-height:70px}@media(max-width:700px){.pd-editor-layout{grid-template-columns:minmax(0,1fr)}.pd-outline{max-height:160px;overflow:auto;border-bottom:1px solid #cbd1ef;padding-bottom:8px}.pd-section-editor #pdSectionText{min-height:220px}}

/* Architecture and DSM share a single component/dependency model. */
.architecture-preview{min-width:0}.architecture-preview .insight-board-title{display:block}.ar-diagram{display:block;width:100%;height:440px;min-width:420px;background:#f6f7ff;border:1px solid #cbd1ef;border-radius:10px}.ar-diagram .ar-node{cursor:grab;touch-action:none}.ar-diagram [role=button]:focus{outline:none;filter:drop-shadow(0 0 3px #151a30)}.ar-diagram path[role=button]{cursor:pointer;pointer-events:stroke;stroke-width:5}.ar-edge-label{pointer-events:none;paint-order:stroke;stroke:#f6f7ff;stroke-width:3px}.ar-toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:12px}.ar-toolbar label{flex:1;min-width:180px}.ar-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);gap:18px;align-items:start}.ar-visual{min-width:0;overflow:auto}.ar-panel>label{display:block;margin-bottom:14px}.ar-panel input,.ar-panel select,.ar-panel textarea{width:100%}.ar-panel .pd-section-sources input{width:auto}.ar-panel>button{margin:4px}.ar-matrix-scroll{overflow:auto;max-width:100%}.ar-matrix{border-collapse:collapse;min-width:100%;font-size:12px}.ar-matrix th,.ar-matrix td{border:1px solid #cbd1ef;padding:7px;text-align:center;min-width:72px}.ar-matrix th{background:#edf0ff;color:#151a30;max-width:150px;overflow-wrap:anywhere}.ar-matrix th:first-child{min-width:150px;text-align:left}.ar-matrix button{min-width:40px;width:100%;padding:8px}.ar-matrix .ar-filled{background:#2942ff;color:white}.ar-diagonal{background:#e5e8f2}.ar-cycle{border-left:4px solid #2942ff;padding:10px;background:#f1f3ff}.architecture-dialog .bw-area{padding:16px}.architecture-artifact .ar-diagram{height:350px}@media(max-width:850px){.ar-workspace{grid-template-columns:minmax(0,1fr)}.ar-diagram{height:320px}.ar-panel{border-top:1px solid #cbd1ef;padding-top:12px}}

/* Full PRD uses the established document editor and a compact traceability table. */
.prd-preview { display:grid; gap:8px; }
.prd-criterion { border:1px solid var(--line); border-left:4px solid #2942ff; border-radius:8px; padding:14px; margin:14px 0; background:#f7f8ff; }
.prd-criterion label { display:grid; gap:6px; margin-top:12px; }
.prd-criterion textarea { width:100%; }
#prdReview > button { margin:4px; }
#prdReview .ar-matrix td { text-align:left; vertical-align:top; white-space:normal; min-width:140px; }
#prdContextPicker { display:grid; gap:8px; }
#prdContextPicker label { display:flex; gap:8px; align-items:center; }
.prd-dialog .bw-area { padding:16px; }
.prd-dialog .pd-outline { align-self:start; position:sticky; top:0; max-height:60vh; overflow:auto; background:var(--panel); }
.prd-dialog .pd-section-editor > button { margin:4px; }
@media(max-width:700px){.prd-dialog .pd-outline{position:static;max-height:160px}}

#saveConflictDialog { width: min(560px, 92vw); padding: 24px; }
#saveConflictDialog button { margin: 12px 8px 0 0; }

.workflow-guide { border-top: 1px solid var(--line, #d6d9ef); padding: 9px 0 3px; }
.workflow-next { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px; }
.workflow-next button { white-space:normal; text-align:left; }
.workflow-guide p { margin:5px 0; }
.workflow-guide summary { cursor:pointer; font-size:12px; overflow-wrap:anywhere; }
.workflow-guide label { display:block; font-size:12px; margin:8px 0; }
.workflow-guide select { width:100%; min-width:0; }

/* Source review stays separate from authored documents. */
.source-review-button.needs-review, #sourceReviewQueue.needs-review {background:#fff0b8;color:#452900;border-color:#a66b00;font-weight:700}
.source-review-dialog {width:min(960px,94vw);max-height:90vh;padding:0;border:1px solid var(--border);border-radius:16px;overflow:auto}
.source-review-dialog::backdrop {background:rgba(12,18,35,.55)}
.source-review-dialog .map-dialog-header {position:sticky;top:0;background:var(--panel,#fff);z-index:1;gap:12px}
.source-review-body {padding:20px;overflow-wrap:anywhere}
.source-review-body>button {display:block;margin:12px 0;text-align:left}
.source-review-actions {display:flex;gap:8px;flex-wrap:wrap}
.source-group {border-top:1px solid var(--border,#ccd);padding:16px 0}
.source-change {margin:12px 0;padding:12px;border:1px solid var(--border,#ccd);border-radius:8px}
.source-change summary {cursor:pointer;font-weight:600}
.source-comparison {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:14px 0}
.source-comparison h5 {grid-column:1/-1;margin:0}
.source-comparison pre {white-space:pre-wrap;overflow-wrap:anywhere;max-height:280px;overflow:auto;background:#f2f5fa;color:#172338;padding:10px;font:12px/1.6 monospace}
.source-comparison strong {font-size:12px}
@media(max-width:600px){.source-comparison{grid-template-columns:minmax(0,1fr)}.source-review-body{padding:12px}.source-review-dialog h3{font-size:16px}}

/* Adjustable workspace and unbounded logical board. */
.workspace {grid-template-columns:minmax(300px,var(--chat-width,41%)) 10px minmax(0,1fr);gap:0}
#workspaceDivider {cursor:col-resize;touch-action:none;position:relative;border-radius:5px}
#workspaceDivider::after {content:'';position:absolute;width:3px;height:48px;top:calc(50% - 24px);left:3px;border-radius:3px;background:#91a2c2}
#workspaceDivider:hover,#workspaceDivider:focus-visible {background:#cbd3ff}
.canvas-pane {display:flex;flex-direction:column}
.canvas-pane>.pane-header {flex-shrink:0}
.canvas-viewport {flex:1;min-height:0;overscroll-behavior:contain}
#canvasSurface {position:relative;min-width:100%;min-height:100%;overflow:hidden}
.canvas-board {position:absolute;left:0;top:0;transform-origin:0 0}
.canvas-toolbar {position:relative;display:flex;align-items:center;gap:3px;flex-wrap:wrap;background:white;border-bottom:1px solid var(--line);padding:5px 8px;z-index:5}
.canvas-toolbar button {padding:5px 7px;font-size:11px}
.canvas-zoom {display:flex;align-items:center;gap:2px;margin-left:auto}
#canvasZoom {width:72px;padding:0;accent-color:var(--cobalt)}
#canvasZoomLabel {font:10px var(--mono);min-width:34px;text-align:center}
.canvas-navigator {position:absolute;top:100%;left:8px;width:min(370px,calc(100% - 16px));background:white;border:1px solid var(--line);border-radius:8px;padding:14px;box-shadow:0 10px 30px #151a3030;display:grid;gap:10px}
.canvas-navigator input,.canvas-navigator select {width:100%}.canvas-navigator select {font-size:12px;min-height:160px}
.canvas-notice {padding:5px 12px;background:#f4f6ff;flex-shrink:0}
.artifact {resize:none}.artifact.canvas-selected {outline:3px solid var(--cobalt);outline-offset:4px}
.artifact-resize {position:sticky;bottom:0;display:block;margin-left:auto;width:26px;height:22px;padding:0;background:#eef2ff;color:var(--muted);cursor:nwse-resize;touch-action:none;z-index:3;border:1px solid var(--line);border-radius:5px 0 0 0}
#canvasHeightGrip {display:none}
/* Give PRFAQ/brief previews, fields and fieldset legends their own breathing room. */
.product-document-preview {padding:16px;min-width:0;overflow-wrap:anywhere}
.product-document-preview>.insight-board-title {margin:0 0 12px}
.product-document-preview .pd-preview-section {padding:14px 4px;margin:0 0 8px}
.product-document-preview .pd-prose {margin:12px 0;white-space:pre-wrap}
.product-document-dialog .bw-meta {padding:18px;gap:18px}
.product-document-dialog .bw-meta>label,.pd-section-editor>label {display:flex;flex-direction:column;gap:8px;min-width:0}
.product-document-dialog input:not([type=checkbox]),.product-document-dialog textarea,.product-document-dialog select {display:block;width:100%;max-width:100%}
.product-document-dialog .bw-context-section {padding:16px;margin:12px 0}
.product-document-dialog .bw-context-section>label {display:grid;gap:8px;margin:12px 0}
.pd-section-sources {min-inline-size:0;padding:16px;margin:20px 0;overflow-wrap:anywhere}
.pd-section-sources legend {padding:0 8px;max-width:100%;white-space:normal;font-size:12px}
.pd-section-sources input {flex:0 0 auto}
@media(max-width:700px){.workspace{grid-template-columns:minmax(0,1fr);gap:10px}#workspaceDivider{display:none}.canvas-pane{height:var(--canvas-height,70dvh);min-height:300px}#canvasHeightGrip{display:block;flex:0 0 14px;cursor:row-resize;touch-action:none;background:linear-gradient(var(--line),var(--line)) center/44px 3px no-repeat}.canvas-toolbar{gap:2px}.canvas-zoom{margin-left:0}.canvas-actions{gap:2px}}

/* Keep the resize corner reachable while scrolling any saved output. */
.artifact {display:flex;flex-direction:column;overflow:hidden}
.artifact-header {flex:0 0 auto}
.artifact-content {flex:1;min-height:0;overflow:auto;padding-bottom:22px}
.artifact-resize {position:absolute;bottom:0;right:0;margin:0}

.recovery-status { padding: 10px 16px; margin: 0; border-top: 1px solid var(--border); flex-shrink: 0; }
.recovery-row { padding: 14px; margin: 10px 0; border: 1px solid var(--border); border-radius: 8px; }
.recovery-row button { margin: 4px 8px 4px 0; }

/* Account and explicit sharing controls */
.account-screen{max-width:640px;margin:7vh auto;padding:32px;background:var(--panel,#fff);border:1px solid var(--line,#bbb);border-radius:18px;}
#sessionRecoveryDialog::backdrop{background:var(--panel,#fff);}
#sessionRecoveryDialog{box-sizing:border-box;}
#sessionNotice{grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:8px 12px;background:var(--soft);border:1px solid var(--cobalt);border-radius:6px;font-size:13px;}
.session-recovery-action{margin:4px 0;}
.account-screen h1{font-size:2rem}.account-screen label,.account-dialog label{display:block;margin:14px 0}.account-screen input,.account-dialog input:not([type=checkbox]),.account-dialog select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:10px;border:1px solid #888;border-radius:6px;font:inherit}
.account-actions,.account-controls,.account-member{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.account-actions{margin-top:16px}.account-controls{max-width:600px}.account-controls .small{width:100%}.account-dialog{max-width:640px;width:calc(100vw - 48px);max-height:85vh;overflow:auto;padding:24px;border:1px solid #888;border-radius:16px}.account-dialog::backdrop{background:#17233a88}.account-member{padding:12px 0;border-bottom:1px solid #ccc}.account-member span{flex:1}.account-dialog fieldset label{display:flex;gap:8px}.account-status,#accountStatus{color:#a62835;white-space:pre-wrap}.topbar{flex-wrap:wrap}

/* Presence sits outside the artifact DOM and never captures canvas input. */
.collaboration-bar {display:flex;flex-wrap:wrap;gap:6px 16px;padding:5px 12px;flex-shrink:0;border-bottom:1px solid var(--line);font:11px var(--mono);background:#fff;}
#collaborationStatus {color:#12604c}#collaborationMembers {color:var(--muted);overflow-wrap:anywhere;}
#collaborationCursors {position:absolute;left:0;top:0;pointer-events:none;transform-origin:0 0;z-index:20;}
.collaboration-cursor {position:absolute;white-space:nowrap;color:var(--cursor-color);font-size:22px;line-height:1;transition:left .08s linear,top .08s linear;}
.collaboration-cursor span {font:11px var(--sans);padding:4px 7px;border-radius:4px;color:white;background:var(--cursor-color);}
.collaboration-change,.collaboration-editor-warning {padding:8px;background:#fff3c2;color:#664500;font-size:12px;flex-shrink:0;}
.collaboration-change button {text-decoration:underline;padding:4px;font-size:11px;}

/* Saved attribution stays within the scrollable card body. */
.card-change-meta {font-size:10px;line-height:1.45;color:var(--muted);padding:7px 10px;border-bottom:1px solid var(--line);overflow-wrap:anywhere;}
.history-entry {padding:12px 0;border-bottom:1px solid var(--line);}
.history-entry summary {cursor:pointer;line-height:1.6;overflow-wrap:anywhere;}
.history-controls {display:flex;gap:8px;margin:16px 0;}
.history-comparison {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.history-field {margin:12px 0;padding:10px;background:var(--soft);border-radius:5px;}
.history-field h4 {margin:0 0 8px;font-size:12px;}
.history-snapshots pre {white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto;font-size:11px;}
.history-source-status {padding:10px;border-left:3px solid var(--accent);}
.shared-board-hint {display:block;color:var(--muted);font-size:10px;line-height:1.5;margin:4px 0;}
@media(max-width:700px){.history-comparison{grid-template-columns:1fr;}}

.dashboard-project-actions {display:flex;gap:8px;flex-wrap:wrap;}
.dashboard-project-actions button {margin-top:0;}
.people-presence {background:var(--soft);padding:10px;border-radius:5px;font-size:12px;}
.people-list .account-member {justify-content:space-between;gap:16px;}
#projectRenameDialog input {width:100%;}

/* Request status stays beside the composer while the conversation scrolls. */
.chat-activity { display:flex; align-items:center; gap:9px; padding:0 4px 12px; color:var(--cobalt); font-size:13px; font-weight:600; }
.chat-activity[hidden] { display:none; }
.chat-spinner { width:14px; height:14px; flex:none; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:chat-spin .8s linear infinite; }
@keyframes chat-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .chat-spinner { animation:none; } }

/* Group navigation by scope; account controls stay centered independently. */
.topbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px 16px; padding:12px 20px 10px; }
.topbar > .brand { grid-column:1; grid-row:1; justify-self:start; min-width:0; }
.topbar > .header-center { grid-column:2; grid-row:1; justify-self:center; display:flex; align-items:center; justify-content:center; gap:6px; }
.header-center .account-controls { flex-wrap:nowrap; gap:6px; max-width:none; }
#accountName { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar > .mode-switch { grid-column:3; grid-row:1; justify-self:end; margin:0; }
 .project-menu { position:fixed; z-index:100; display:grid; gap:6px; padding:16px; overflow:auto; background:var(--panel,#fff); border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 36px #151a3030; }
.project-menu label { font-size:11px; color:var(--muted); }
.project-menu button { text-align:left; width:100%; }
.project-menu-navigation { display:grid; gap:6px; border-top:1px solid var(--line); padding-top:8px; margin-top:4px; }
#projectSelect { width:100%; max-width:100%; margin-bottom:6px; }
/* Keep the next message primary; reveal detailed inputs and guidance on demand. */
.composer { padding:14px 16px; max-height:65vh; overflow-y:auto; scrollbar-gutter:stable; }
.composer-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; position:relative; }
.chat-tool { position:relative; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--panel,#fff); color:var(--cobalt); font-size:22px; flex:none; }
.chat-tool:hover,.chat-tool[aria-expanded=true] { background:var(--soft); border-color:var(--cobalt); }
.chat-tool::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:0; padding:6px 9px; border-radius:5px; background:var(--ink,#172338); color:#fff; font:11px var(--sans); white-space:nowrap; pointer-events:none; opacity:0; z-index:12; }
.chat-tool:hover::after,.chat-tool:focus-visible::after { opacity:1; }
.current-method { margin-left:auto; flex:1; min-width:0; text-align:right; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.composer-toolbar > .method-panel { flex:1 1 100%; margin:0; padding:10px; border:1px solid var(--line); border-radius:6px; }
.composer-toolbar > .method-panel select { width:100%; }
.files-toggle { margin-left:0; }
.method-setup { margin-top:12px; border-top:1px solid var(--line); }
.method-setup > summary { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 2px 2px; cursor:pointer; font-size:12px; font-weight:600; list-style:none; }
.method-setup > summary::before { content:'▸'; }
.method-setup[open] > summary::before { content:'▾'; }
.method-setup > summary > span:first-child { flex:1; }
.method-setup > summary .small { text-align:right; font-weight:400; }
.method-setup-content { padding:12px; margin-top:10px; max-height:28vh; overflow:auto; scrollbar-gutter:stable; border-radius:6px; background:var(--soft); }
.workflow-guide { margin-top:12px; padding:12px 0 0; }
.workflow-next { flex-direction:column; align-items:stretch; gap:8px; }
.workflow-next button { text-align:left; white-space:normal; }
.workflow-guide p { margin:8px 0; }
.chat-help { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.chat-help summary { font-size:11px; color:var(--muted); cursor:pointer; }
/* A consistent inset for every method preview, including charts and matrices. */
.artifact-content { padding:16px 16px 26px; min-width:0; scrollbar-gutter:stable; }
.artifact-content > :is(.opportunity-preview,.insights-preview,.personas-preview,.brainwriting-preview,.scamper-preview,.concept-preview,.selection-preview,.product-document-preview,.architecture-preview,.prd-preview,.artifact-body) { padding:0; min-width:0; max-width:100%; }
.artifact-content > .card-change-meta { padding:0 0 12px; margin:0; }
.artifact-content > .image-meta { padding:10px 0 0; }
.artifact-header { padding:10px 12px; flex-wrap:wrap; row-gap:8px; }
.artifact-tools { flex-wrap:wrap; }
@media(max-width:760px) {
 .topbar { grid-template-columns:minmax(0,1fr) auto; padding:12px; gap:10px; }
 .topbar > .mode-switch { grid-column:2; }
 .topbar > .header-center { grid-column:1/-1; grid-row:2; flex-wrap:wrap; }
 .header-center .account-controls { flex-wrap:wrap; justify-content:center; }
 .brandname { font-size:15px; }
 .brandmark { width:24px; height:24px; }
 .composer { padding:12px; max-height:none; overflow:visible; }
 .chat-pane { height:auto; min-height:560px; grid-template-rows:auto minmax(220px,1fr) auto; }
 .messages { max-height:55vh; }
 .method-setup > summary { flex-wrap:wrap; }
}

/* Hide canvas chrome without disabling wheel, trackpad, touch or keyboard scrolling. */
.canvas-viewport,.artifact-content { scrollbar-width:none; scrollbar-gutter:auto; }
.canvas-viewport::-webkit-scrollbar,.artifact-content::-webkit-scrollbar { display:none; width:0; height:0; }
.canvas-viewport:focus-visible,.artifact-content:focus-visible { outline:2px solid var(--cobalt); outline-offset:-3px; }

/* A short student-facing sequence inside the collapsible method guide. */
.guide-purpose { margin-bottom:16px; }
.guide-purpose > p { margin:0 0 8px; line-height:1.6; }
.guide-purpose #workflowHint { font-size:13px; font-weight:600; }
.guide-stage { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; min-width:0; }
.guide-stage h3 { display:flex; gap:8px; align-items:center; margin:0 0 10px; font-size:13px; }
.guide-stage h3 > span { display:grid; place-items:center; width:22px; height:22px; flex:none; background:var(--cobalt); color:white; border-radius:50%; font:11px var(--mono); }
.guide-stage p { line-height:1.65; margin:8px 0; overflow-wrap:anywhere; }
.guide-stage label { display:block; margin:10px 0; font-size:12px; }
.guide-stage select { display:block; width:100%; margin-top:6px; min-width:0; }
.guide-stage summary { cursor:pointer; font-size:12px; }
.guide-example { margin:10px 0; padding:10px; background:var(--panel,#fff); border:1px solid var(--line); border-radius:6px; }
.guide-example p { font-size:12px; user-select:text; }
#workflowDetails { margin-top:12px; }
#workflowNext { width:100%; text-align:left; white-space:normal; }

.guide-navigation { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.guide-navigation button { flex:1; font-size:11px; padding:7px; white-space:nowrap; border:1px solid var(--line); border-radius:5px; background:var(--panel,#fff); }
.guide-navigation button:hover { border-color:var(--cobalt); color:var(--cobalt); }
.guide-stage h3:focus-visible { outline:2px solid var(--cobalt); outline-offset:3px; }

/* First-project guidance lives inside the existing method guide. */
.first-map-guide { margin-bottom:16px; min-width:0; }
.first-map-guide h3 { font-size:14px; margin:6px 0; }
.first-map-guide p { line-height:1.65; margin:6px 0 10px; overflow-wrap:anywhere; }
.first-map-guide button { white-space:normal; max-width:100%; }

.messages[data-first-map="true"]:empty::before { content:'Start with a situation.\A Explore the problems.'; }
.messages[data-first-map="true"]:empty::after { content:'Describe it below to create your first opportunity map. Solutions come later.'; }

/* Evidence guidance stays in the existing collapsible method guide. */
.guide-list { padding-left:20px; margin:10px 0; font-size:12px; line-height:1.65; }
.guide-list li { margin:8px 0; overflow-wrap:anywhere; }
#guideReasoningExample { font-size:12px; line-height:1.65; }
#guideReasoningExample dt { font-weight:600; margin-top:10px; }
#guideReasoningExample dd { margin:4px 0 12px; }
#guideReviewOutput { width:100%; white-space:normal; margin-bottom:10px; }
.editor-guidance { line-height:1.6; margin:0 0 14px; max-width:75ch; }

/* Field-specific repair guidance, including keyboard focus and narrow dialogs. */
.save-error-summary { border:1px solid #a32432; border-left:4px solid #a32432; padding:10px 14px; margin:8px 16px; border-radius:6px; background:#fff2f3; color:#791722; max-height:140px; overflow:auto; flex-shrink:0; }
.save-error-summary strong { display:block; font-size:.85rem; }
.save-error-link { display:block; text-align:left; white-space:normal; overflow-wrap:anywhere; background:transparent; color:inherit; border:0; text-decoration:underline; padding:6px 0; line-height:1.4; }
.save-field-error { color:#941c2b; font-size:.85rem; line-height:1.5; margin:6px 0 14px; overflow-wrap:anywhere; }
[data-save-invalid] { outline:2px solid #b82337!important; outline-offset:2px; border-color:#b82337!important; }
[data-save-invalid]:focus { outline:3px solid #b82337!important; outline-offset:3px; }
@media(max-width:700px){.save-error-summary{max-height:100px;margin:6px 10px;}}

/* Let the entire narrow editor scroll so repair text is not squeezed below its metadata. */
@media(max-width:700px){
 dialog.save-has-errors[open] { display:block; overflow-y:auto; }
 dialog.bw-dialog.save-has-errors[open] { display:block; overflow-y:auto; }
 dialog.save-has-errors .bw-area { max-height:none; overflow:visible; }
 dialog.save-has-errors[open] .map-dialog-footer { position:static; }
 dialog.save-has-errors .save-error-summary { max-height:100px; }
}

/* Source identity conflicts are advisory; never obscure or replace an editor. */
.document-consistency {border:1px solid #cb7400;border-left:4px solid #cb7400;background:#fff5df;color:#312100;border-radius:10px;padding:12px 14px;margin:10px 0;font-size:13px;line-height:1.5;overflow-wrap:anywhere;}
.document-consistency[hidden] {display:none;}
.document-consistency p {margin:8px 0;}
.document-consistency ul {padding-left:20px;margin:8px 0;}
.document-consistency button {max-width:100%;white-space:normal;}
.consistency-preview {border-top:1px solid #d4b374;padding-top:10px;margin-top:10px;}
.consistency-preview summary {cursor:pointer;}

.consistency-source {margin:10px 0;}
.consistency-source p {white-space:pre-wrap;}
@media(max-width:700px){
 dialog.bw-dialog.document-conflicts[open] {display:block;overflow-y:auto;}
 dialog.document-conflicts .bw-area {max-height:none;overflow:visible;}
 dialog.document-conflicts[open] .map-dialog-footer {position:static;}
}

.claim-review-panel,.claim-review-entry {border:1px solid #cb7400;border-left:4px solid #cb7400;border-radius:8px;background:#fff5df;color:#312100;padding:12px 14px;margin:10px 0;line-height:1.5;font-size:13px;overflow-wrap:anywhere;}
.claim-review-panel p,.claim-review-entry p {margin:8px 0;}
.claim-review-item {margin:8px 0;}
.claim-review-entry label {display:block;margin:10px 0;}
.claim-review-entry textarea,.claim-review-entry select {display:block;width:100%;margin-top:5px;}
.claim-review-entry pre {white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto;}
.claim-review-panel button,.claim-review-entry button {white-space:normal;max-width:100%;}

.claim-review-entry h5 {font-size:14px;line-height:1.4;margin:0 0 10px;}

/* The method guide is a modeless right drawer; chat and canvas keep their size. */
.topbar > .method-guide-trigger {grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:10px;background:var(--cobalt);color:white;border:1px solid var(--cobalt);padding:10px 12px;white-space:nowrap;}
.method-guide-trigger:hover,.method-guide-trigger[aria-expanded=true] {background:#1430c4;}
.guide-mode-label {font:10px var(--mono);padding:3px 5px;border-radius:3px;background:#ffffff20;}
.method-guide-trigger.needs-attention {box-shadow:inset 0 -3px var(--lime);}
.method-guide-drawer {position:fixed;z-index:40;top:var(--guide-top,64px);bottom:0;right:0;width:min(460px,100vw);max-width:100%;background:var(--panel);border-left:1px solid var(--line);box-shadow:-12px 10px 38px #151a3026;}
.method-guide-drawer:has(>details:not([open])) {display:none;}
.method-guide-drawer:has(>details[open]) {animation:guide-slide-in .18s ease-out;}
@keyframes guide-slide-in {from{transform:translateX(100%);}to{transform:translateX(0);}}
.method-guide-drawer .method-setup {height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;margin:0;border:0;scroll-padding-top:70px;scroll-padding-bottom:132px;}
.method-guide-drawer .method-setup > summary {position:sticky;top:0;z-index:2;padding:18px 20px;display:flex;gap:16px;background:var(--panel);border-bottom:1px solid var(--line);font-size:18px;}
.method-guide-drawer .method-setup > summary::before {display:none;}
.method-guide-drawer .method-setup > summary::-webkit-details-marker {display:none;}
.guide-close {display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:5px;font:20px var(--sans);}
.guide-context {padding:20px 20px 4px;display:grid;gap:16px;}
.guide-context p {margin:4px 0;}
#guideMethodName {font-size:18px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;}
.guide-context .mode-switch {display:inline-flex;margin-top:5px;}
.method-guide-drawer .guide-navigation {margin:16px 20px 0;}
.method-guide-drawer .method-setup-content {padding:20px;margin:0;max-height:none;overflow:visible;scrollbar-gutter:auto;background:var(--panel);border-radius:0;}
.method-guide-drawer .guide-example {background:var(--soft);padding:12px;}
.method-guide-drawer .small,.method-guide-drawer .guide-stage label,.method-guide-drawer .guide-list {font-size:12px;line-height:1.65;}
.method-guide-drawer .guide-footer {position:sticky;bottom:0;display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--panel);border-top:1px solid var(--line);z-index:2;}
.guide-footer button {flex-shrink:0;}
.method-guide-drawer :is(button,select) {max-width:100%;}
@media(max-width:900px){
 .topbar {grid-template-columns:minmax(0,1fr) auto;}
 .topbar > .method-guide-trigger {grid-column:2;}
 .topbar > .header-center {grid-column:1/-1;grid-row:2;}
}
@media(max-width:520px){
 .method-guide-trigger .guide-mode-label {display:none;}
 .topbar > .method-guide-trigger {gap:7px;padding:9px;font-size:11px;}
 .method-guide-drawer {width:100%;}
 .method-guide-drawer .guide-navigation {flex-wrap:wrap;}
 .method-guide-drawer .guide-footer {flex-wrap:wrap;gap:6px;}
}
@media(prefers-reduced-motion:reduce){.method-guide-drawer:has(>details[open]){animation:none;}}

/* Compact progress and resume cues; long method names wrap within the drawer. */
.guide-progress { padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.guide-progress label { display: block; font-weight: 600; margin-bottom: 8px; }
.guide-progress select { width: 100%; min-width: 0; }
#guideNextAction button { max-width: 100%; white-space: normal; text-align: left; }
.dashboard-progress { margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.dashboard-progress p { font-size: .85rem; line-height: 1.5; margin: 8px 0; }
.dashboard-project { min-width: 0; }

/* End-of-class checkpoint stays usable on small screens and above editors. */
.continuity-dialog { max-height:85dvh; overflow:auto; width:min(620px,calc(100vw - 32px)); box-sizing:border-box; }
.continuity-dialog .recovery-row { margin:12px 0; padding:12px; }
.continuity-dialog button { margin:4px; }
.continuity-dialog label { display:flex; align-items:flex-start; gap:8px; margin:16px 0; }
.continuity-dialog input[type=checkbox] { width:auto; flex:none; margin-top:4px; }
.continuity-dialog p,.continuity-dialog strong { overflow-wrap:anywhere; }

.pdf-export-dialog { width:min(650px,calc(100vw - 32px)); max-height:85dvh; overflow:auto; box-sizing:border-box; }
.pdf-export-actions { display:flex; gap:8px; margin:12px 0; }
#pdfExportList { max-height:38dvh; overflow:auto; border-block:1px solid var(--line); }
.pdf-export-dialog .pdf-export-card { display:flex; gap:12px; align-items:flex-start; padding:12px 4px; margin:0; cursor:pointer; }
.pdf-export-card input[type=checkbox] { width:auto; flex:none; margin-top:4px; }
.pdf-export-card span { min-width:0; overflow-wrap:anywhere; }
.pdf-export-card strong,.pdf-export-card small { display:block; }
.pdf-export-card small { margin-top:4px; }
.pdf-export-dialog>button { margin:4px; }

/* Temporary orientation panel; the workspace remains usable throughout the tour. */
.student-tour{position:fixed;right:24px;bottom:24px;width:min(400px,calc(100vw - 32px));max-height:calc(100dvh - 100px);overflow:auto;z-index:1800;background:var(--panel,#fff);color:var(--text,#182433);border:2px solid #274cff;border-radius:16px;padding:22px;box-shadow:0 12px 42px #14244b30;box-sizing:border-box;}
.student-tour.tour-left{right:auto;left:24px;}
.student-tour h2{font-size:22px;line-height:1.2;margin:18px 0 12px;}
.student-tour p{font-size:15px;line-height:1.6;margin:0 0 20px;}
.tour-top,.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tour-top{font-size:12px;font-weight:600;}.tour-top button{font-size:12px;}
.tour-highlight{outline:3px solid #274cff!important;outline-offset:4px;}
@media(max-width:640px){.student-tour,.student-tour.tour-left{left:16px;right:16px;bottom:12px;width:auto;padding:16px;max-height:55dvh;}.student-tour h2{font-size:19px;margin-top:12px;}.student-tour p{font-size:14px;line-height:1.5;}}

/* Journey maps keep the teaching matrix legible rather than compressing columns. */
.journey-dialog{width:min(1200px,96vw)}
.journey-preview{padding:18px;box-sizing:border-box;min-width:0}
.journey-preview p,.journey-table td,.journey-table th{overflow-wrap:anywhere;white-space:pre-wrap}
.journey-curve{border:1px solid var(--line,#d5dced);border-radius:12px;padding:12px;background:#fff;color:#151a30;margin:12px 0}
.journey-curve svg{display:block;width:100%;height:auto;min-height:100px}
.journey-table-scroll{overflow-x:auto;max-width:100%;border:1px solid #cbd3e5;border-radius:10px}
.journey-table{border-collapse:collapse;width:max-content;min-width:100%;table-layout:fixed;font-size:13px;line-height:1.5}
.journey-table th,.journey-table td{padding:12px;vertical-align:top;border:1px solid #cbd3e5;width:210px;max-width:210px}
.journey-table thead th{background:#2447f9;color:white}.journey-table tbody th{background:#eef2ff;color:#151a30;width:130px;max-width:130px}
.journey-table tr:nth-child(2) td{background:#f3ffd6}.journey-stage-tools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.journey-editor-curve{padding:0 4px}.journey-dialog .insight-editor-fields{min-width:0}
@media(max-width:700px){.journey-dialog .insight-editor-layout{display:block}.journey-dialog .insight-card-nav{display:flex;overflow-x:auto;gap:6px;margin-bottom:16px}.journey-dialog .insight-card-nav button{flex:0 0 auto;max-width:180px;white-space:normal}.journey-dialog .insight-field-grid{grid-template-columns:1fr}.journey-preview{padding:12px}}
.journey-dialog>.editor-guidance{padding:0 22px;max-width:none}
.journey-dialog .journey-editor-curve{padding:0 22px}
.journey-dialog .journey-editor-curve svg{height:160px}
.journey-dialog .insight-editor-layout[hidden],.journey-dialog .journey-editor-curve[hidden]{display:none}

/* Storyboards retain readable scene panels with optional, clearly labeled imagery. */
.storyboard-dialog{width:min(1200px,96vw)}
.storyboard-dialog>.editor-guidance{padding:0 22px;max-width:none}
.storyboard-context>summary{padding:14px 22px;color:var(--muted);font-weight:600}
.storyboard-dialog>button.ghost{margin:12px 22px}
.storyboard-dialog .insight-editor-layout[hidden]{display:none}
.storyboard-preview{padding:18px;box-sizing:border-box;min-width:0}
.storyboard-preview p,.storyboard-frame{overflow-wrap:anywhere;white-space:pre-wrap}
.storyboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px;margin:16px 0}
.storyboard-frame{border:1px solid #cbd3e5;border-radius:12px;padding:16px;background:#fff;color:#151a30;min-width:0}
.storyboard-frame h4{color:#2447f9;margin:0 0 12px}.storyboard-frame h5{margin:12px 0 4px}.storyboard-frame p{margin:4px 0 10px}
.storyboard-illustration{margin:0 0 12px;min-width:0}.storyboard-illustration img{display:block;width:100%;max-height:240px;object-fit:contain;background:#eef2ff;border-radius:8px}.storyboard-illustration figcaption{margin-top:6px}
.storyboard-empty{min-height:140px;background:#eef2ff;color:#2447f9;display:grid;place-items:center;border-radius:8px;font:36px var(--font-mono,monospace)}
.storyboard-caption{font-weight:600}.storyboard-scene-tools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
@media(max-width:700px){.storyboard-dialog .insight-editor-layout{display:block}.storyboard-dialog .insight-card-nav{display:flex;flex-direction:row;overflow-x:auto;gap:6px;margin-bottom:16px}.storyboard-dialog .insight-card-nav button{flex:0 0 auto;max-width:180px;white-space:normal}.storyboard-dialog .insight-field-grid{grid-template-columns:1fr}.storyboard-preview{padding:12px}}

/* Backcasting: the deck's future-to-present panels and enabling tree. */
.backcast-artifact .content { padding: 18px; }
.backcast-preview { padding: 12px; overflow-wrap: anywhere; }
.backcast-preview p { white-space: pre-wrap; }
.backcast-notice { background: #edf3d7; padding: 12px; border-radius: 10px; }
.backcast-timeline { display: flex; gap: 24px; overflow-x: auto; padding: 12px 6px 18px; }
.backcast-step { flex: 0 0 215px; position: relative; padding: 16px; border: 1px solid #adbaf9; border-radius: 12px; background: #f6f8ff; min-width: 0; overflow-wrap: anywhere; }
.backcast-step:not(:last-child)::after { content: '→'; position: absolute; right: -21px; top: 36px; color: #2447f9; }
.backcast-step:first-child { background: #e9edff; }
.backcast-step h4 { margin: 12px 0; }
.backcast-year { font-size: 23px; color: #2447f9; }
.backcast-tree ul { padding-left: 22px; border-left: 2px solid #b4c0ff; }
.backcast-tree li { margin: 12px 0; padding: 8px; }
.backcast-path { border: 1px solid #cad2ef; padding: 14px; border-radius: 10px; margin: 12px 0; }
.backcast-dialog { width: min(1200px,96vw); }
.backcast-context { padding: 12px; margin: 8px 0; border: 1px solid #cad2ef; border-radius: 10px; }
.backcast-context summary { cursor: pointer; font-weight: 700; padding: 6px; }
.backcast-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
.backcast-tabs .active { color: #2447f9; border-color: #2447f9; }
.backcast-links { padding: 12px; border: 1px solid #cad2ef; margin: 14px 0; min-width: 0; }
.backcast-links label { display: flex; align-items: start; gap: 8px; padding: 7px; }
.backcast-links input[type=checkbox] { width: auto; flex: 0 0 auto; }
.backcast-dialog .insight-editor-fields { min-width: 0; padding: 16px; }
.backcast-dialog .insight-meta { min-width: 0; }
@media(max-width:600px) { .backcast-dialog .insight-meta { grid-template-columns: 1fr; } .backcast-dialog .insight-editor-layout { grid-template-columns: 1fr; } .backcast-step { flex-basis: 195px; } }
.backcast-dialog > .editor-guidance { margin: 12px 20px; }
.backcast-dialog > .backcast-context { margin: 8px 20px; }
.backcast-dialog > button { margin: 8px 20px; }
.backcast-dialog > .backcast-tabs { margin: 0 20px; }
.backcast-dialog > div:has(> .backcast-timeline) { padding: 0 20px; }

/* Technology roadmap: aligned time axis, layer colors and padded details. */
.roadmap-artifact .content { padding: 18px; }
.roadmap-preview { padding: 14px; overflow-wrap: anywhere; }
.roadmap-preview p { white-space: pre-wrap; }
.roadmap-notice { background: #edf3d7; padding: 12px; border-radius: 10px; }
.roadmap-chart { overflow: auto; max-height: 560px; padding: 10px 0; }
.roadmap-chart svg { width: 1160px; max-width: none; display: block; font-family: 'Space Grotesk',sans-serif; }
.roadmap-chart [role=button] { cursor: pointer; }
.roadmap-chart [role=button]:focus rect { stroke: #1428e8; stroke-width: 4; }
.roadmap-panel { padding: 16px; border: 1px solid #cad2ef; border-radius: 10px; margin: 12px 0; }
.roadmap-review { padding: 12px; background: #fff0df; border-radius: 8px; }
.roadmap-dialog { width: min(1240px,96vw); }
.roadmap-context { padding: 12px; margin: 8px 20px; border: 1px solid #cad2ef; border-radius: 10px; }
.roadmap-context summary, .roadmap-preview summary { cursor: pointer; font-weight: 700; padding: 6px; }
.roadmap-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; }
.roadmap-tabs .active { color: #2447f9; border-color: #2447f9; }
.roadmap-links { padding: 12px; border: 1px solid #cad2ef; margin: 14px 0; min-width: 0; }
.roadmap-links label { display: flex; align-items: start; gap: 8px; padding: 7px; }
.roadmap-links input[type=checkbox] { width: auto; flex: 0 0 auto; }
.roadmap-dialog .insight-editor-fields { min-width: 0; padding: 16px; }
.roadmap-dialog .insight-meta { min-width: 0; }
.roadmap-dialog > .editor-guidance { margin: 12px 20px; }
.roadmap-dialog > button { margin: 8px 20px; }
.roadmap-editor-chart { margin: 0 20px; }
.roadmap-editor-chart > button { display: block; text-align: left; margin: 8px 0; }
@media(max-width:600px) { .roadmap-dialog .insight-meta, .roadmap-dialog .insight-editor-layout { grid-template-columns: 1fr; } }

/* Explicit saved inputs stay readable in guide and editors. */
.method-source-panel {margin:12px 0;padding:14px;border:1px solid var(--line,#cbd3e5);border-radius:12px;max-width:100%;min-width:0;}
.method-source-panel summary {font-weight:600;cursor:pointer;}
.method-source-panel p {font-size:.82rem;overflow-wrap:anywhere;}
.method-source-row {padding:12px;margin:12px 0;background:var(--panel,#f1f4ff);border-radius:8px;min-width:0;}
.method-source-row label {display:block;margin:10px 0;}
.method-source-panel textarea,.method-source-panel select {width:100%;max-width:100%;box-sizing:border-box;}
.method-source-panel pre,.source-review-dialog pre {white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto;font-size:.75rem;}
.method-source-panel button {margin:6px 6px 0 0;}

/* Read-only saved-source cards: captured and current versions stay distinct. */
.source-preview-card {margin:12px 0;border:1px solid var(--border,#ccd4e8);border-radius:12px;background:var(--panel,#fff);overflow:hidden;min-width:0;}
.source-preview-card header {padding:16px 18px;background:#eef1ff;border-top:3px solid #2945ff;}
.source-preview-card header p {margin:0 0 6px;color:#42517a;font-size:.75rem;}
.source-preview-card h4 {margin:0;font-size:1rem;line-height:1.4;overflow-wrap:anywhere;}
.source-preview-content {padding:16px 18px;}
.source-preview-fields {margin:0;display:grid;gap:14px;}
.source-preview-fields>div {min-width:0;}
.source-preview-fields dt {font-size:.76rem;font-weight:600;color:#42517a;margin-bottom:4px;}
.source-preview-fields dd {margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.88rem;line-height:1.6;}
.source-preview-group {margin:14px 0 0;border-top:1px solid var(--border,#ccd4e8);padding-top:12px;min-width:0;}
.source-preview-group>summary {font-size:.85rem;}
.source-preview-group>div {margin-top:12px;}
.source-preview-item {padding:12px;margin:10px 0;border:1px solid var(--border,#ccd4e8);border-radius:8px;min-width:0;}
.source-preview-item h5 {margin:0 0 12px;font-size:.9rem;overflow-wrap:anywhere;}
.source-preview-card footer {padding:12px 18px;background:#f6f8ff;font-size:.75rem;color:#42517a;line-height:1.5;}
.method-source-notice {padding:12px;border-left:3px solid #2945ff;background:#eef1ff;font-size:.84rem;line-height:1.5;}
.source-preview-dialog .source-review-body {padding:18px;}
.source-preview-dialog .map-dialog-header h3 {margin:0;}
.source-preview-dialog .map-dialog-header button {flex-shrink:0;}
@media(max-width:600px){.source-preview-content,.source-preview-card header,.source-preview-card footer {padding:12px;}.source-preview-dialog .source-review-body {padding:12px;}}

/* Collapse the private conversation without removing its inputs or messages. */
.workspace {grid-template-columns:minmax(0,max(300px,var(--chat-width,41%))) 10px minmax(0,1fr);transition:grid-template-columns .22s ease;}
.workspace.chat-collapsed {grid-template-columns:minmax(0,0px) 0px minmax(0,1fr);}
.chat-pane {transition:transform .22s ease,opacity .18s ease,visibility 0s;}
.chat-collapsed .chat-pane {transform:translateX(-24px);opacity:0;visibility:hidden;border-width:0;pointer-events:none;transition:transform .22s ease,opacity .18s ease,visibility 0s .22s;}
.chat-collapsed #workspaceDivider {visibility:hidden;pointer-events:none;}
.canvas-heading-controls {display:flex;align-items:center;gap:12px;min-width:0;}
#hideChatBtn,#showChatBtn {font-size:11px;white-space:nowrap;padding:5px 8px;color:inherit;border:1px solid currentColor;}
@media(max-width:700px){
 .workspace,.workspace.chat-collapsed {grid-template-columns:minmax(0,1fr);transition:none;}
 .chat-pane {transition:height .22s ease,transform .22s ease,opacity .18s ease,visibility 0s;}
 .workspace.chat-collapsed {gap:0;}
 .chat-collapsed .chat-pane {height:0;min-height:0;transition:height .22s ease,transform .22s ease,opacity .18s ease,visibility 0s .22s;}
 .chat-collapsed .canvas-pane {height:max(300px,calc(100dvh - var(--workspace-top,80px) - 20px));}
 .chat-collapsed #canvasHeightGrip {display:none;}
 .canvas-header {flex-wrap:wrap;}
 .canvas-heading-controls {flex-wrap:wrap;gap:8px;}
}
@media(prefers-reduced-motion:reduce){.workspace,.chat-pane,.chat-collapsed .chat-pane {transition:none;}}

/* Tutorial stays outside the workspace, with native keyboard/media controls. */
.tour-video{width:100%;margin:0 0 18px;}
.walkthrough-dialog{width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:24px;border:1px solid var(--line,#d8ddec);border-radius:16px;overflow:auto;background:var(--panel,#fff);color:var(--text,#182433);}
.walkthrough-dialog::backdrop{background:#10172c99;}
.walkthrough-heading{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;}
.walkthrough-heading h2{margin:0 0 8px;}
.walkthrough-heading p{margin:0 0 18px;line-height:1.5;}
.walkthrough-heading>button{flex-shrink:0;}
.walkthrough-dialog video{display:block;width:100%;aspect-ratio:16/9;background:#151a30;border-radius:8px;}
.walkthrough-chapters{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;}
.walkthrough-chapters button{font-size:13px;}
.walkthrough-links{display:flex;flex-wrap:wrap;gap:12px 24px;}
.walkthrough-links a{text-decoration:underline;}
@media(max-width:640px){.walkthrough-dialog{padding:16px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px);}.walkthrough-heading{flex-wrap:wrap;}.walkthrough-heading>div{flex:1 1 190px;}.walkthrough-heading h2{font-size:21px;}.walkthrough-heading p{font-size:14px;}.walkthrough-chapters button{min-height:40px;}}

/* Pending private questions are status cards, never savable AI answers. */
.chat-recovery{margin:12px 0;padding:16px;border:1px solid var(--border,#cbd5e1);border-radius:12px;background:var(--panel,#fff);overflow-wrap:anywhere;}
.chat-recovery p{margin:10px 0;}
.chat-recovery-question{white-space:pre-wrap;}
.chat-recovery-actions{display:flex;flex-wrap:wrap;gap:8px;}
.chat-recovery-actions button{max-width:100%;white-space:normal;}

.generation-inline{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}.generation-inline button{white-space:normal;}
/* Save-and-illustrate actions remain usable on narrow classroom devices. */
.storyboard-dialog .map-dialog-footer > div,
.concept-dialog .map-dialog-footer > div { flex-wrap:wrap; flex-shrink:1; justify-content:flex-end; }
.storyboard-dialog .map-dialog-footer button,
.concept-dialog .map-dialog-footer button { max-width:100%; white-space:normal; }

/* Controlled card revisions: readable sources and explicit before/after review. */
.revision-dialog {width:min(1100px,96vw);max-height:94dvh;}
.revision-dialog > [role=status] {margin:0;padding:0 22px 12px;}
.revision-body {padding:0 22px 24px;}
.revision-body h4 {margin:18px 0 10px;}
.revision-sources {display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;max-height:340px;overflow:auto;}
.revision-source {display:flex;gap:10px;padding:14px;border:1px solid var(--line);border-radius:8px;background:#f6f8ff;align-items:flex-start;}
.revision-source span span,.revision-source strong {display:block;}
.revision-excerpt {font-size:12px;line-height:1.5;white-space:pre-wrap;max-height:100px;overflow:auto;margin-top:8px;}
.revision-label {display:block;margin:14px 0 8px;font-weight:600;}
.revision-label textarea,.revision-pair textarea,.revision-pair input,.revision-pair select {display:block;width:100%;margin-top:6px;}
.revision-locks {margin:16px 0;}.revision-locks label {display:block;padding:5px;}
.revision-actions {display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;}
.revision-section {padding:16px;margin:14px 0;border:1px solid var(--line);border-radius:9px;}
.revision-change {border-top:1px solid var(--line);margin-top:14px;padding-top:6px;}
.revision-pair {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.revision-before {white-space:pre-wrap;overflow-wrap:anywhere;background:#f1f4fa;padding:12px;border-radius:6px;}
.revision-warning {padding:12px;border-left:4px solid #a97100;background:#fff6cf;color:#473600;margin:12px 0;}
.revision-previous button {margin:5px;}
@media(max-width:700px){.revision-pair{grid-template-columns:1fr}.revision-body{padding:0 14px 18px}.revision-sources{grid-template-columns:1fr}}

/* Original sketches stay distinct from generated Concept Card renderings. */
.concept-sketch-controls {padding:16px;border:1px solid var(--line, #cbd5e1);border-radius:12px;margin-bottom:18px;}
.concept-sketch-controls label {display:block;margin:12px 0;}
.concept-sketch-controls input[type=file] {display:block;max-width:100%;margin-top:8px;}
.concept-sketch-preview {margin:12px 0;padding:12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;}
.concept-sketch-preview img {display:block;width:100%;max-height:240px;object-fit:contain;}
.concept-sketch-preview figcaption {margin:8px 0;overflow-wrap:anywhere;}