:root {
  color-scheme: light;
  --bg: #f6f5f2;
  --chrome: #ecebe8;
  --sidebar: #f0efec;
  --panel: #fff;
  --line: #d8d6d1;
  --line-strong: #bbb8b2;
  --ink: #252525;
  --muted: #6f6d68;
  --purple: #6f55c7;
  --purple-soft: #eee9ff;
  --green: #267a54;
  --green-soft: #e4f3e9;
  --blue: #3568a8;
  --blue-soft: #e8f0fb;
  --yellow: #7a560f;
  --yellow-soft: #fff4cf;
  --red: #a24a52;
  --red-soft: #fff1f2;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: #deddd9; color: var(--ink); }
body { overflow: hidden; font-family: var(--ui); }

.obsidian-app {
  width: 1440px;
  height: 900px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr) 29px;
  background: var(--bg);
}
html[data-capture="scene"] .obsidian-app { height: 720px; }

.titlebar {
  display: grid;
  grid-template-columns: 160px 1fr 250px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--chrome);
  color: #55534f;
  font-size: 12px;
}
.window-controls { display: flex; gap: 8px; padding-left: 17px; }
.window-controls span { width: 11px; height: 11px; border-radius: 50%; background: #c7c5c0; }
.window-controls span:nth-child(1) { background: #ed6a5e; }
.window-controls span:nth-child(2) { background: #f4bf4f; }
.window-controls span:nth-child(3) { background: #61c454; }
.workspace-name { justify-self: center; font-weight: 650; letter-spacing: .01em; }
.recreation-badge {
  justify-self: end;
  margin-right: 14px;
  padding: 5px 9px;
  border: 1px solid #b8acd9;
  border-radius: 999px;
  background: #f7f4ff;
  color: #5e459f;
  font: 700 9px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.workspace { min-height: 0; display: grid; grid-template-columns: 42px 220px minmax(0, 1fr); }
.ribbon {
  min-height: 0;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  border-right: 1px solid var(--line);
  background: #e9e8e5;
}
.ribbon-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #696762;
  font-size: 15px;
}
.ribbon-icon.active { background: #d9d6e6; color: var(--purple); }
.ribbon-spacer { flex: 1; }

.sidebar {
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--sidebar);
  color: #4e4c48;
  font-size: 11px;
}
.sidebar-head {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sidebar-actions { color: #5f5c58; font-size: 15px; letter-spacing: .12em; }
.file-tree { padding: 9px 7px 18px; }
.tree-row {
  min-height: 24px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  border-radius: 5px;
  white-space: nowrap;
}
.tree-row > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tree-row.folder { font-weight: 650; }
.tree-row.note { color: #65625d; }
html[data-view="idea"] .idea-tree,
html[data-view="specification"] .specification-tree { background: #ddd9ea; color: #4e388c; font-weight: 700; }
html:not([data-view]) .idea-tree { background: #ddd9ea; color: #4e388c; font-weight: 700; }
.indent-1 { padding-left: 16px; }
.indent-2 { padding-left: 27px; }
.indent-3 { padding-left: 38px; }
.indent-4 { padding-left: 49px; }
.indent-5 { padding-left: 60px; }
.chevron { width: 8px; color: #87847f; }
.tree-icon { color: #87847f; }
.sidebar-note {
  margin: 13px 9px 0;
  padding: 9px;
  border: 1px solid #d2cce6;
  border-radius: 7px;
  background: #faf8ff;
  color: #6d6584;
  font-size: 9.5px;
  line-height: 1.45;
}
.sidebar-note strong { display: block; margin-bottom: 4px; color: #4f3d83; }

.main-area { min-width: 0; min-height: 0; display: grid; grid-template-rows: 39px minmax(0, 1fr); }
.tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
  background: #e9e8e5;
}
.tab {
  min-width: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #e8e7e4;
  color: #6a6762;
  font-size: 10px;
  white-space: nowrap;
}
.tab > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
html[data-view="idea"] .idea-tab,
html[data-view="specification"] .specification-tab,
html:not([data-view]) .idea-tab,
html:not([data-view]) .specification-tab { background: var(--panel); color: var(--ink); }
.tab-status {
  flex: none;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font: 700 7.5px/1 var(--mono);
  text-transform: uppercase;
}
.tab-close { margin-left: auto; color: #9a9790; }

.split-view { min-width: 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; background: var(--panel); }
.note-pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: 31px minmax(0, 1fr); }
.note-pane + .note-pane { border-left: 1px solid var(--line); }
.pane-toolbar {
  min-width: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #ebe9e4;
  background: #fdfcfb;
  color: #5f5c58;
  font-size: 9.5px;
}
.pane-toolbar .spacer { flex: 1; }
.toolbar-chip { padding: 2px 5px; border-radius: 4px; background: #f0efec; color: #5c5955; font: 8px/1 var(--mono); }
.note-scroll {
  min-width: 0;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 17px 24px 52px;
  scrollbar-color: #aaa49c #f2f0ec;
  scrollbar-width: thin;
}
.note-scroll::-webkit-scrollbar { width: 10px; }
.note-scroll::-webkit-scrollbar-track { background: #f2f0ec; }
.note-scroll::-webkit-scrollbar-thumb { border: 2px solid #f2f0ec; border-radius: 999px; background: #aaa49c; }
.breadcrumbs { margin-bottom: 7px; color: #62605b; font-size: 8.5px; }
.note-title { margin: 0 0 7px; font-size: 28px; line-height: 1.06; letter-spacing: -.03em; }
.note-subtitle { margin: 0 0 10px; color: var(--muted); font-size: 10.5px; }

.properties {
  margin-bottom: 10px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  border: 1px solid #e0ddd8;
  border-radius: 7px;
  background: #faf9f7;
  font: 8.5px/1.35 var(--mono);
}
.properties-detailed { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 9px; }
.property { min-width: 0; display: flex; gap: 5px; }
.property-name { flex: 0 0 auto; color: #62605b; }
.property-value { min-width: 0; overflow: hidden; color: #4c4945; text-overflow: ellipsis; white-space: nowrap; }
.properties-detailed .property-value { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.property-value.approved { color: var(--green); font-weight: 750; }

.callout {
  margin: 0 0 11px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 5px 1fr;
  gap: 9px;
  border: 1px solid #b9dcc8;
  border-radius: 7px;
  background: var(--green-soft);
  color: #285f45;
  font-size: 10px;
  line-height: 1.42;
}
.callout::before { content: ""; border-radius: 999px; background: #3f9a6c; }
.callout strong { display: block; margin-bottom: 2px; color: #185438; font-size: 11px; }

.note-body { color: #42403c; font-size: 11.5px; line-height: 1.48; }
.note-body h2 {
  margin: 13px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e5e2dc;
  color: #302f2c;
  font-size: 15px;
  letter-spacing: -.01em;
}
.note-body p { margin: 0 0 7px; }
.note-body ul { margin: 5px 0 8px; padding-left: 18px; }
.note-body li { margin: 3px 0; }
.note-body strong { color: #2e2d2a; }
.wiki-link { color: var(--blue); text-decoration: underline; text-decoration-color: #b8cce5; text-underline-offset: 2px; }
.path-line { color: #52677f; font: 7.5px/1.4 var(--mono); overflow-wrap: anywhere; }

.detail-grid { display: grid; gap: 6px; }
.detail-grid.two-column { grid-template-columns: 1fr 1fr; }
.detail-card { padding: 8px 9px; border: 1px solid #dedbd5; border-radius: 6px; background: #fbfaf8; }
.detail-card strong { display: block; margin-bottom: 3px; color: #5f5b55; font: 700 8px/1.3 var(--mono); text-transform: uppercase; }
.detail-card span { display: block; }

.outcome-table, .test-matrix, .requirements, .risk-table, .failure-table { overflow: hidden; border: 1px solid #dedbd5; border-radius: 6px; }
.outcome-row { display: grid; grid-template-columns: 145px minmax(0, 1fr) 145px; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #ebe8e2; }
.outcome-row:last-child { border-bottom: 0; }
.outcome-row.header, .requirement.header, .test-row.header { background: #f3f1ed; color: #69655f; font: 700 8px/1.3 var(--mono); text-transform: uppercase; }
.scope-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.scope-card { padding: 8px 10px; border: 1px solid #d8d5cf; border-radius: 6px; background: #fbfaf8; }
.scope-card > strong { display: block; margin-bottom: 4px; }
.scope-card.in-scope { border-color: #b9dcc8; background: #f3faf5; }
.scope-card.out-scope { border-color: #e4c9cc; background: #fff7f7; }
.scope-card ul { margin: 4px 0 0; }

.evidence-list { display: grid; gap: 5px; }
.evidence-list > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 8px; border: 1px solid #e1ded8; border-radius: 5px; background: #fcfbf9; }
.evidence-list p { margin: 0; }
.evidence-tag { padding: 3px 5px; border-radius: 4px; font: 700 8px/1 var(--mono); text-align: center; text-transform: uppercase; }
.evidence-tag.support { background: var(--green-soft); color: var(--green); }
.evidence-tag.assumption { background: var(--yellow-soft); color: var(--yellow); }
.evidence-tag.question { background: var(--blue-soft); color: var(--blue); }

.risk-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 55px; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #ebe8e2; }
.risk-row:last-child { border-bottom: 0; }
.risk-level { font: 700 8px/1.4 var(--mono); text-align: right; text-transform: uppercase; }
.risk-level.high { color: var(--red); }
.risk-level.medium { color: var(--yellow); }

.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.decision-card { padding: 7px 8px; border: 1px solid #ddd9d1; border-radius: 6px; background: #fbfaf8; font-size: 9.5px; line-height: 1.35; }
.decision-card strong { display: block; margin-bottom: 2px; color: #6b6862; font: 700 8px/1.3 var(--mono); text-transform: uppercase; }
.decision-card.approved { border-color: #b9dcc8; background: #f2faf5; }
.decision-card.stop { border-color: #e2c8cb; background: #fff6f6; color: #7f4148; }

.checkpoint { margin-top: 8px; padding: 8px 9px; border: 1px solid #cad7e8; border-radius: 7px; background: var(--blue-soft); color: #3d597a; font: 7.7px/1.35 var(--mono); }
.checkpoint-title { margin-bottom: 5px; color: #2f527b; font-weight: 800; }
.checkpoint-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; }
.checkpoint-row strong { color: #2f527b; }

.architecture-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 5px; align-items: center; }
.architecture-node { min-width: 0; min-height: 55px; padding: 7px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #ccd8e8; border-radius: 6px; background: #f3f7fc; text-align: center; }
.architecture-node strong { font-size: 9px; }
.architecture-node span { margin-top: 2px; color: #53647a; font-size: 8px; }
.architecture-arrow { color: var(--blue); font-weight: 800; }
.architecture-note { margin-top: 6px !important; padding: 6px 8px; border-left: 3px solid var(--blue); background: var(--blue-soft); }
.story-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.story-list > div { padding: 7px 8px; display: grid; grid-template-columns: 42px 1fr; gap: 6px; border: 1px solid #e1ded8; border-radius: 5px; background: #fcfbf9; }
.story-list p { margin: 0; }
.story-id { color: var(--purple); font: 750 8px/1.4 var(--mono); }

.requirement { padding: 6px 8px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 150px; gap: 8px; border-bottom: 1px solid #ebe8e2; }
.requirement:last-child { border-bottom: 0; }
.requirement-id { color: var(--purple); font: 750 8px/1.4 var(--mono); }
.requirement-test { color: var(--green); font: 700 8px/1.4 var(--mono); text-align: right; }
.contract-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.contract-card { padding: 8px; border: 1px solid #dedbd5; border-radius: 6px; background: #fbfaf8; }
.contract-card strong { display: block; margin-bottom: 4px; }
.contract-card code { color: #53677f; font: 8px/1.35 var(--mono); }
.check-list { columns: 2; column-gap: 28px; }
.check-list li { break-inside: avoid; }
.failure-table > div { padding: 6px 8px; display: grid; grid-template-columns: 150px 1fr; gap: 8px; border-bottom: 1px solid #ebe8e2; }
.failure-table > div:last-child { border-bottom: 0; }
.test-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 65px; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #ebe8e2; }
.test-row:last-child { border-bottom: 0; }
.delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.delivery-card { padding: 9px; border: 1px solid #b9dcc8; border-radius: 6px; background: #f2faf5; }
.delivery-card.future { border-color: #d7d2e8; background: #f8f6ff; }
.delivery-card strong, .delivery-card span, .delivery-card small { display: block; }
.delivery-card span { margin-top: 4px; }
.delivery-card small { margin-top: 5px; color: var(--muted); }

.context-pane { min-width: 0; min-height: 0; overflow-y: auto; display: none; border-left: 1px solid var(--line); background: #f7f6f3; padding: 12px 11px 24px; scrollbar-width: thin; }
.context-section { margin-bottom: 15px; }
.context-section h2 { margin: 0 0 7px; color: #77736d; font: 750 9px/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.outline-list { margin: 0; padding: 0; list-style: none; color: #64615c; font-size: 9.5px; line-height: 1.35; }
.outline-list li { padding: 4px 6px 4px 10px; border-left: 2px solid transparent; }
.outline-list li.active { border-left-color: var(--purple); background: var(--purple-soft); color: #513d97; font-weight: 700; }
.health-row { padding: 5px 0; display: flex; justify-content: space-between; gap: 7px; border-bottom: 1px solid #e4e1dc; color: #65615c; font-size: 9px; }
.health-row strong { color: #4e4b47; }
.ok { color: var(--green) !important; }
.warn { color: var(--yellow) !important; }
.off { color: var(--red) !important; }
.linked-note { padding: 6px 7px; display: grid; grid-template-columns: 18px 1fr; gap: 5px; border: 1px solid #dfdcd6; border-radius: 5px; background: #fff; color: var(--purple); }
.linked-note + .linked-note { margin-top: 5px; }
.linked-note strong, .linked-note small { display: block; }
.linked-note strong { color: #514d48; font-size: 9px; }
.linked-note small { margin-top: 2px; color: #5f5c58; font-size: 8px; }
.linked-note.muted-link { opacity: .68; }
.context-section.provenance { padding: 8px; border: 1px solid #d5cdea; border-radius: 6px; background: #faf8ff; color: #665d7d; font-size: 8.8px; line-height: 1.42; }
.context-section.provenance h2 { color: #5f4c9e; }
.context-section.provenance p { margin: 0; }

.statusbar { padding: 0 10px; display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line); background: var(--chrome); color: #5c5955; font-size: 8.5px; }
.statusbar .right { margin-left: auto; }
.statusbar strong { color: var(--purple); }

html[data-view] .split-view { grid-template-columns: minmax(0, 1fr) 232px; }
html[data-view] .note-pane { border-left: 0; }
html[data-view="idea"] .specification-pane,
html[data-view="idea"] .specification-context,
html[data-view="specification"] .idea-pane,
html[data-view="specification"] .idea-context { display: none; }
html[data-view="idea"] .idea-context,
html[data-view="specification"] .specification-context { display: block; }
html[data-view] .note-scroll { padding-left: 28px; padding-right: 28px; }
html[data-view] .note-title { font-size: 29px; }
html[data-view] .note-body { font-size: 11.5px; }

@media (max-width: 900px) {
  body { overflow: auto; }
  .obsidian-app { width: 100vw; height: auto; min-height: 100vh; grid-template-rows: 40px auto 30px; }
  .titlebar { grid-template-columns: 90px 1fr; }
  .recreation-badge { display: none; }
  .workspace { grid-template-columns: 38px minmax(0, 1fr); }
  .sidebar { display: none; }
  .tabs { grid-template-columns: 1fr; }
  .tab { min-height: 38px; }
  html[data-view="idea"] .specification-tab,
  html[data-view="specification"] .idea-tab { display: none; }
  .split-view, html[data-view] .split-view { grid-template-columns: 1fr; }
  html[data-view="idea"] .specification-pane,
  html[data-view="specification"] .idea-pane,
  html:not([data-view]) .specification-pane { display: none; }
  .context-pane { display: none !important; }
  .note-pane { min-height: 700px; }
  .note-scroll { overflow: visible; padding: 18px; }
  .properties-detailed { grid-template-columns: 1fr 1fr; }
  .detail-grid.two-column, .scope-columns, .story-list, .contract-grid, .delivery-grid { grid-template-columns: 1fr; }
  .architecture-flow { grid-template-columns: 1fr; }
  .architecture-arrow { transform: rotate(90deg); justify-self: center; }
  .outcome-row { grid-template-columns: 1fr; }
  .requirement { grid-template-columns: 40px 1fr; }
  .requirement-test { grid-column: 2; text-align: left; }
  .check-list { columns: 1; }
  .statusbar { flex-wrap: wrap; gap: 6px 12px; padding: 7px 10px; }
  .statusbar .right { margin-left: 0; }
}