@bvdm/delano 0.2.3 → 0.2.5

package/assets/payload/.delano/viewer/public/styles.css

@@ -1,1042 +1,1214 @@
+/* ============================================================
+   Delano Viewer — Keendoc design language
+   ============================================================ */
+
+/* ---------- Tokens ---------- */
 :root {
-  color-scheme: light;
-  --canvas: #f7f6f3;
-  --paper: #ffffff;
-  --paper-soft: #fbfbfa;
-  --ink: #111111;
-  --text: #2f3437;
-  --muted: #787774;
-  --faint: #a5a19b;
-  --line: #eaeaea;
-  --line-soft: rgba(0, 0, 0, 0.06);
-  --red-bg: #fdebec;
-  --red-text: #9f2f2d;
-  --blue-bg: #e1f3fe;
-  --blue-text: #1f6c9f;
-  --green-bg: #edf3ec;
-  --green-text: #346538;
-  --yellow-bg: #fbf3db;
-  --yellow-text: #956400;
-  --sans: "Aptos", "Segoe UI Variable", "Segoe UI", "SF Pro Display", "Geist Sans", "Helvetica Neue", Arial, sans-serif;
-  --display: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", "SF Pro Display", "Geist Sans", "Helvetica Neue", Arial, sans-serif;
-  --serif: "Newsreader", "Instrument Serif", "Lyon Text", "Iowan Old Style", "Sitka Text", "Charter", "Cambria", Georgia, serif;
-  --mono: "Geist Mono", "SF Mono", "JetBrains Mono", Consolas, monospace;
-  --shadow-card-rest: 0 0 0 rgba(0, 0, 0, 0);
-  --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
+  --bg:        oklch(0.985 0.004 85);
+  --surface:   oklch(0.995 0.003 85);
+  --ink:       oklch(0.21 0.008 80);
+  --ink-70:    oklch(0.40 0.008 80);
+  --ink-50:    oklch(0.55 0.008 80);
+  --ink-40:    oklch(0.66 0.006 80);
+  --ink-25:    oklch(0.82 0.005 80);
 
-* { box-sizing: border-box; }
+  --line:      oklch(0.92 0.005 85);
+  --line-soft: oklch(0.95 0.005 85);
 
-html { background: var(--canvas); }
+  --accent:    oklch(0.52 0.08 245);
+  --accent-soft: oklch(0.96 0.02 245);
 
-body {
-  margin: 0;
-  min-height: 100vh;
-  background: var(--canvas);
-  color: var(--text);
-  font: 14px/1.6 var(--sans);
-  letter-spacing: 0;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
+  --ok:        oklch(0.62 0.10 155);
+  --ok-soft:   oklch(0.96 0.03 155);
+  --warn:      oklch(0.62 0.13 55);
+  --warn-soft: oklch(0.97 0.04 60);
+  --low:       oklch(0.70 0.04 85);
+  --low-soft:  oklch(0.96 0.01 85);
 
-.ambient {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-  background:
-    radial-gradient(ellipse 70% 55% at 18% 8%, rgba(180, 150, 110, 0.045), transparent 60%),
-    radial-gradient(ellipse 60% 50% at 92% 90%, rgba(120, 130, 160, 0.035), transparent 60%);
-  animation: ambient-drift 28s ease-in-out infinite alternate;
-}
+  --r:         6px;
+  --r-sm:      4px;
 
-@keyframes ambient-drift {
-  0%   { transform: translate3d(0, 0, 0); }
-  100% { transform: translate3d(-1.2%, 0.8%, 0); }
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .ambient { animation: none; }
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--ink);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  font-feature-settings: "ss01", "cv11";
 }
 
-button, input { font: inherit; }
-button { color: inherit; }
+button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
+.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -0.01em; }
+.small { font-size: 12px; }
 
-#app {
-  position: relative;
-  z-index: 1;
+/* ---------- App shell ---------- */
+.app {
+  display: grid;
+  grid-template-columns: 232px 1fr;
   min-height: 100vh;
-  padding: 18px;
 }
 
-.viewer-frame {
-  min-height: calc(100vh - 36px);
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: var(--paper);
-  overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 12px 40px rgba(40, 30, 10, 0.025);
+/* ---------- Sidebar ---------- */
+.sidebar {
+  border-right: 1px solid var(--line);
+  background: var(--surface);
+  padding: 20px 14px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
 }
-
-.top-bar {
+.brand {
   display: flex;
-  align-items: stretch;
-  height: 60px;
-  padding: 0 28px;
-  gap: 28px;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 8px 18px;
   border-bottom: 1px solid var(--line);
-  background: var(--paper);
+  margin-bottom: 14px;
 }
-
 .brand-mark {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  padding-right: 28px;
-  border-right: 1px solid var(--line);
-  font-family: var(--serif);
-  font-size: 22px;
-  font-weight: 500;
-  letter-spacing: -0.025em;
+  width: 26px; height: 26px;
+  display: grid; place-items: center;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--bg);
   color: var(--ink);
 }
+.brand-name { font-weight: 600; letter-spacing: -0.01em; font-size: 15px; }
 
-.tabs {
-  position: relative;
+.nav { display: flex; flex-direction: column; gap: 1px; }
+.nav-item {
   display: flex;
-  flex: 1;
-  align-items: stretch;
-  gap: 6px;
-  min-width: 0;
-}
-
-.tab.overflow-hidden { display: none; }
-
-.tab-more {
-  position: relative;
-  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 32px;
-  margin-left: auto;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  border-radius: 5px;
-  transition: color 200ms ease, background 200ms ease;
-}
-
-.tab-more:hover { color: var(--ink); background: var(--paper-soft); }
-
-.tab-more[aria-expanded="true"] {
-  color: var(--ink);
-  background: var(--paper-soft);
+  gap: 10px;
+  width: 100%;
+  padding: 7px 9px;
+  border-radius: var(--r-sm);
+  color: var(--ink-70);
+  text-align: left;
+  transition: background 90ms, color 90ms;
 }
-
-.tab-more.has-active { color: var(--ink); }
-
-.tab-more.has-active::after {
-  content: '';
-  position: absolute;
-  left: 6px;
-  right: 6px;
-  bottom: -1px;
-  height: 2px;
+.nav-item:hover { background: var(--line-soft); color: var(--ink); }
+.nav-item.is-active {
   background: var(--ink);
+  color: var(--bg);
 }
-
-.tab-more svg { display: block; }
-
-.tab-more.hidden { display: none; }
-
-.tab-dropdown {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  min-width: 240px;
-  max-width: min(320px, 90vw);
-  max-height: min(420px, 70vh);
-  overflow-y: auto;
-  background: var(--paper);
+.nav-item.is-active .nav-ico { color: var(--bg); }
+.nav-ico { width: 16px; display: grid; place-items: center; color: var(--ink-50); }
+.nav-item-count {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+}
+.nav-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nav-count {
+  min-width: 22px;
+  height: 18px;
+  display: inline-grid;
+  place-items: center;
+  padding: 0 6px;
   border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 5px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 8px 28px rgba(40, 30, 10, 0.08);
-  z-index: 50;
-  display: none;
+  border-radius: 999px;
+  background: var(--bg);
+  color: var(--ink-50);
+  font-size: 10.5px;
+  line-height: 1;
 }
-
-.tab-dropdown[data-open="true"] {
-  display: block;
-  animation: dropdown-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+.nav-item.is-active .nav-count {
+  color: var(--bg);
+  border-color: color-mix(in oklch, var(--bg) 32%, transparent);
+  background: color-mix(in oklch, var(--bg) 14%, transparent);
 }
 
-@keyframes dropdown-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
+.nav-section {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-40);
+  padding: 22px 9px 6px;
+  font-weight: 500;
 }
 
-.dropdown-item {
-  display: flex;
+.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
+
+.project-select-v3 {
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr);
+  gap: 8px;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
+  padding: 2px 0 4px;
+}
+.project-select-mark {
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--bg);
+  color: var(--ink-50);
+}
+.project-select-control {
   width: 100%;
-  text-align: left;
-  padding: 9px 11px;
+  min-width: 0;
+  appearance: none;
   border: 0;
-  background: transparent;
-  color: var(--text);
+  border-bottom: 1px dashed var(--ink-25);
+  border-radius: 0;
+  background:
+    linear-gradient(45deg, transparent 50%, var(--ink-50) 50%) calc(100% - 11px) 14px / 5px 5px no-repeat,
+    linear-gradient(135deg, var(--ink-50) 50%, transparent 50%) calc(100% - 6px) 14px / 5px 5px no-repeat,
+    transparent;
+  color: var(--ink);
+  font: 600 13.5px/1.25 var(--font-sans);
+  padding: 7px 24px 7px 0;
   cursor: pointer;
-  border-radius: 6px;
+  text-overflow: ellipsis;
+}
+.project-select-control:hover { border-bottom-color: var(--ink); }
+.project-select-control:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-bottom-color: transparent;
+}
+
+/* ---------- Topbar ---------- */
+.main { min-width: 0; display: flex; flex-direction: column; }
+.topbar {
+  position: sticky; top: 0; z-index: 5;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 24px;
+  padding: 14px 32px;
+  background: color-mix(in oklab, var(--bg) 90%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+.tb-project { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.tb-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tb-meta { display: flex; align-items: center; gap: 12px; color: var(--ink-50); font-size: 12.5px; }
+.tb-meta strong { color: var(--ink); font-weight: 500; }
+.tb-sep { width: 3px; height: 3px; background: var(--ink-25); border-radius: 50%; }
+.tb-readonly {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 8px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  font-size: 11.5px;
+  color: var(--ink-50);
+  background: var(--bg);
+}
+.tb-actions { display: flex; gap: 8px; }
+.btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 11px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--bg);
   font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  transition: background 150ms ease, color 150ms ease;
+  color: var(--ink-70);
+  transition: background 90ms, border-color 90ms, color 90ms;
+}
+.btn:hover { background: var(--line-soft); color: var(--ink); border-color: var(--ink-25); }
+.btn:disabled {
+  cursor: default;
+  color: var(--ink-40);
+  background: var(--line-soft);
+  border-color: var(--line);
+}
+.btn-primary {
+  background: var(--ink); color: var(--bg); border-color: var(--ink);
 }
+.btn-primary:hover { background: oklch(0.13 0.008 80); color: var(--bg); }
 
-.dropdown-item:hover { background: var(--paper-soft); color: var(--ink); }
+/* ---------- Page ---------- */
+.content { padding: 36px 48px 64px; max-width: 1320px; width: 100%; align-self: center; }
+.page { display: flex; flex-direction: column; gap: 36px; }
+.page-title { font-size: 26px; font-weight: 600; letter-spacing: -0.018em; margin: 0; }
 
-.dropdown-item.active {
-  background: var(--paper-soft);
-  color: var(--ink);
-  font-weight: 600;
+.overview-v1 {
+  gap: 35px;
 }
-
-.dropdown-item .count {
-  font-family: var(--mono);
-  font-size: 10.5px;
-  color: var(--faint);
-  font-weight: 400;
+.overview-v1-head {
+  display: grid;
+  gap: 18px;
 }
-
-.dropdown-item:focus-visible {
-  outline: 2px solid var(--blue-text);
-  outline-offset: -2px;
+.overview-signal-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
 }
-
-.tab {
-  position: relative;
+.signal-pill {
   display: inline-flex;
   align-items: center;
-  gap: 9px;
-  padding: 0 10px;
-  border: 0;
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-  white-space: nowrap;
-  transition: color 200ms ease;
+  gap: 7px;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--ink-70);
 }
-
-.tab:hover { color: var(--ink); }
-.tab.active { color: var(--ink); }
-
-.tab.active::after {
-  content: '';
-  position: absolute;
-  left: 6px;
-  right: 6px;
-  bottom: -1px;
-  height: 2px;
-  background: var(--ink);
+.signal-pill-warn {
+  border-color: color-mix(in oklch, var(--warn) 35%, var(--line));
+  background: var(--warn-soft);
+  color: var(--ink);
 }
-
-.tab .count {
-  font-family: var(--mono);
-  font-size: 10.5px;
-  font-weight: 400;
-  color: var(--faint);
-  letter-spacing: 0;
+.signal-color-filled .signal-pill {
+  border-color: var(--line);
+  background: var(--surface);
+  color: var(--ink-70);
 }
-
-.tab.active .count { color: var(--muted); }
-
-.outline-toggle {
-  align-self: center;
-  flex-shrink: 0;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  background: var(--paper);
-  color: var(--muted);
-  cursor: pointer;
-  font-size: 12px;
+.signal-color-filled .signal-pill-warning.has-count,
+.signal-color-filled .signal-pill-blocker.has-count {
+  border-color: color-mix(in oklch, var(--warn) 35%, var(--line));
+  background: var(--warn-soft);
+  color: var(--ink);
+}
+.signal-color-filled .signal-pill-warning.has-count .mono,
+.signal-color-filled .signal-pill-blocker.has-count .mono {
+  color: var(--warn);
   font-weight: 600;
-  padding: 7px 11px;
-  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
 }
-
-.outline-toggle:hover {
-  color: var(--ink);
-  border-color: #d9d5ce;
-  background: var(--paper-soft);
+.signal-color-filled .signal-pill-validation .mono,
+.signal-color-filled .signal-pill-progress .mono {
+  color: var(--ink-70);
+  font-weight: 500;
 }
-
-.shell {
+.overview-priority {
+  display: block;
+}
+.overview-delivery {
   display: grid;
-  grid-template-columns: 380px minmax(0, 1fr);
-  height: calc(100vh - 98px);
-  background: var(--paper);
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  gap: 42px;
+  align-items: start;
 }
-
-.list, .reader, .outline {
+.delivery-panel {
   min-width: 0;
-  border-right: 1px solid var(--line);
-  background: var(--paper);
 }
-
-.filter-label, .outline-label, .eyebrow {
-  color: var(--muted);
-  font-size: 10px;
-  font-weight: 750;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+.delivery-list {
+  display: flex;
+  flex-direction: column;
 }
-
-.count {
-  color: var(--muted);
-  font: 11px/1 var(--mono);
+.delivery-row,
+.delivery-task-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) max-content;
+  gap: 16px;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--line-soft);
+  text-align: left;
 }
-
-.pill {
+.delivery-task-row {
+  grid-template-columns: minmax(0, 1.4fr) minmax(110px, 0.8fr) max-content;
+}
+.delivery-row:last-child,
+.delivery-task-row:last-child {
+  border-bottom: none;
+}
+.delivery-row:hover .delivery-title {
+  border-bottom-color: var(--ink);
+}
+.delivery-row-main,
+.delivery-row-right {
+  min-width: 0;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  align-self: flex-start;
-  min-height: 22px;
-  max-height: 22px;
-  border: 1px solid transparent;
-  background: #f1f0ed;
-  border-radius: 9999px;
-  padding: 0 10px;
-  color: var(--muted);
-  font-family: var(--mono);
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  white-space: nowrap;
+  gap: 10px;
 }
-
-.pill.active, .pill.approved, .pill.complete, .pill.done {
-  color: var(--green-text);
-  background: var(--green-bg);
+.delivery-row-main {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
 }
-
-.pill.in-progress, .pill.planned, .pill.ready {
-  color: var(--yellow-text);
-  background: var(--yellow-bg);
+.delivery-title {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  border-bottom: 1px dashed transparent;
+  line-height: 1.25;
 }
-
-.pill.blocked {
-  color: var(--red-text);
-  background: var(--red-bg);
+.delivery-meta,
+.delivery-count {
+  color: var(--ink-50);
+  font-size: 12px;
 }
-
-.list {
-  padding: 20px;
-  overflow: auto;
-  background: #fcfbf9;
+.delivery-more {
+  align-self: flex-start;
+  margin-top: 8px;
+  color: var(--ink-50);
+  font-size: 12.5px;
+  border-bottom: 1px dashed var(--ink-25);
 }
-
-.search {
-  width: 100%;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  padding: 11px 12px;
-  background: var(--paper);
+.delivery-more:hover {
   color: var(--ink);
-  outline: none;
-  transition: border-color 160ms ease, background 160ms ease;
+  border-bottom-color: var(--ink);
 }
-
-.search::placeholder { color: var(--faint); }
-.search:focus {
-  border-color: #cfcac2;
-  background: #fff;
+.preview-list {
+  display: grid;
+  gap: 10px;
+  padding-top: 15px;
 }
-
-.filters {
-  display: flex;
+.preview-row {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1.4fr) minmax(0, 1fr);
+  gap: 14px;
+  align-items: center;
+  padding: 11px 0;
+  border-bottom: 1px solid var(--line-soft);
+}
+.preview-row-warn {
+  border-bottom-color: color-mix(in oklch, var(--warn) 20%, var(--line-soft));
+}
+.preview-row-progress {
+  grid-template-columns: minmax(116px, max-content) minmax(160px, 0.55fr) minmax(0, 1.45fr);
   gap: 8px;
-  flex-wrap: wrap;
-  margin: 16px 0 18px;
+  align-items: start;
+  padding: 6px 0 7px;
 }
-
-.filter-group {
-  display: flex;
-  gap: 7px;
-  flex-wrap: wrap;
-  align-items: center;
-  width: 100%;
+.preview-meta-time {
+  padding-top: 1px;
+  color: var(--ink-50);
+  white-space: nowrap;
 }
-
-.filter-label { margin-right: 4px; }
-.filter-note { color: var(--muted); font-size: 12px; width: 100%; padding: 4px 2px; }
-
-.sort-group {
-  align-items: center;
+.preview-row-progress .link {
+  justify-self: start;
+  text-align: left;
+  line-height: 1.25;
 }
-
-.sort-field {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  height: 28px;
-  padding: 0 26px 0 10px;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  background-color: var(--paper);
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23787774' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,6 8,10 12,6'/></svg>");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  background-size: 12px;
-  color: var(--ink);
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  outline: none;
-  transition: border-color 150ms ease, background-color 150ms ease;
+.preview-copy {
+  color: var(--ink-70);
+  line-height: 1.45;
 }
-
-.sort-field:hover { background-color: var(--paper-soft); border-color: #d9d5ce; }
-.sort-field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
-
-.sort-dir {
-  display: inline-flex;
+.preview-list-validation {
+  gap: 10px;
+  padding-top: 18px;
+}
+.validation-row {
+  grid-template-columns: max-content max-content minmax(0, 1fr);
+  gap: 17px;
   align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  background: var(--paper);
-  color: var(--muted);
-  cursor: pointer;
-  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+  padding: 12px 0;
 }
-
-.sort-dir:hover { background: var(--paper-soft); border-color: #d9d5ce; color: var(--ink); }
-.sort-dir:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
-
-.workstream-scope, .filter {
-  border: 1px solid var(--line);
-  background: var(--paper);
-  border-radius: 6px;
-  padding: 6px 9px;
-  color: var(--muted);
-  cursor: pointer;
-  font-size: 12px;
+.validation-row .link {
+  justify-self: start;
+  max-width: 34ch;
+  text-align: left;
 }
-
-.workstream-scope, .filter.active {
-  border-color: transparent;
-  color: var(--blue-text);
-  background: var(--blue-bg);
+.source-nav-v2 {
+  gap: 1px;
 }
-
-.doc {
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 18px 18px 16px;
-  margin: 10px 0;
-  cursor: pointer;
-  background: var(--paper);
-  box-shadow: var(--shadow-card-rest);
-  transition: background 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease;
+.source-nav-v2 .nav-break {
+  margin-top: 11px;
+  padding: 11px 10px 4px;
+  border-top: 1px solid var(--line-soft);
+  color: var(--ink-40);
+  font: 500 10px/1 var(--font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-.doc:hover, .doc.active {
-  border-color: #dedbd5;
-  background: #fff;
-  box-shadow: var(--shadow-card-hover);
+.back {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: var(--ink-50); font-size: 13px;
+  margin-bottom: -14px;
 }
-
-.doc:hover { transform: translateY(-1px); }
-.doc:active { transform: scale(0.995); }
-
-.doc-title {
-  color: var(--ink);
-  font-weight: 760;
-  letter-spacing: -0.01em;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 12px;
+.back:hover { color: var(--ink); }
+.ws-eyebrow {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
+  color: var(--ink-40); margin-bottom: -22px;
 }
 
-.doc-title span:first-child {
+/* ---------- Summary strip ---------- */
+.summary {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+.summary > .field {
+  padding: 16px 22px;
+  border-right: 1px solid var(--line);
+}
+.summary > .field:last-child { border-right: none; }
+.summary > .field:first-child { padding-left: 0; }
+.summary-tight > .field { padding: 12px 22px; }
+.summary-tight > .field:first-child { padding-left: 0; }
+.doc-reader-page {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
+  gap: 44px;
+  align-items: start;
+}
+.doc-reader-main {
   min-width: 0;
-  overflow-wrap: anywhere;
 }
-
-.doc-path {
-  color: var(--faint);
-  font: 11px/1.4 var(--mono);
-  margin-top: 6px;
+.doc-reader-main .md-body {
+  margin-top: 34px;
+}
+.content-reader-head-c .doc-reader-main .back {
+  margin-bottom: 22px;
+}
+.content-reader-head-c .doc-reader-main .ws-eyebrow {
+  margin-bottom: 6px;
+}
+.content-reader-head-c .doc-reader-main .page-title {
+  max-width: 17ch;
+}
+.doc-meta-panel {
+  position: sticky;
+  top: 86px;
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  background: var(--surface);
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
-
-.doc-snippet {
-  color: var(--muted);
+.doc-side {
+  min-width: 0;
+  position: sticky;
+  top: 86px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.doc-side .doc-meta-panel {
+  position: static;
+  top: auto;
+}
+.doc-meta-title {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
   font-size: 13px;
-  margin-top: 10px;
+  font-weight: 600;
 }
-
-.reader {
+.doc-meta-list {
+  max-height: calc(100vh - 150px);
   overflow: auto;
-  background: var(--paper);
-}
-
-.reader-inner {
-  max-width: 940px;
-  margin: 0 auto;
-  padding: 64px 80px 112px;
 }
-
-.reader-head {
-  border-bottom: 1px solid var(--line);
-  padding-bottom: 32px;
-  margin-bottom: 44px;
+.doc-meta-list dd {
+  overflow-wrap: anywhere;
 }
 
-.reader h1 {
-  color: var(--ink);
-  font-family: var(--serif);
-  font-size: clamp(34px, 3.4vw, 48px);
+.field-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-40);
   font-weight: 500;
-  line-height: 1.06;
-  letter-spacing: -0.025em;
-  margin: 0 0 22px;
+  margin-bottom: 6px;
 }
+.field-value { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
 
-.reader-top {
-  display: block;
+/* health */
+.health { display: flex; align-items: center; gap: 10px; }
+.health-bar {
+  position: relative;
+  width: 80px; height: 6px;
+  border-radius: 999px;
+  background: var(--line);
+  overflow: hidden;
 }
+.health-fill { position: absolute; inset: 0; right: auto; background: var(--warn); border-radius: inherit; }
+.health-label { font-size: 12.5px; color: var(--ink-70); }
 
-.reader-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-top: 14px;
-}
+/* ---------- Block ---------- */
+.block { display: flex; flex-direction: column; }
 
-/* Shadcn-style action buttons. .action = outline variant, .action.primary = default variant. */
-.action {
-  display: inline-flex;
+.section-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 0 12px;
+  border-bottom: 1px solid var(--line);
+}
+.section-head.is-collapsible { cursor: pointer; user-select: none; }
+.section-head.is-collapsible:hover .caret { color: var(--ink); }
+.section-title { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
+.section-title .count { color: var(--ink-40); font-weight: 500; font-size: 13px; }
+.section-right { display: flex; align-items: center; gap: 14px; color: var(--ink-50); }
+.caret { display: grid; place-items: center; color: var(--ink-50); transition: color 90ms; }
+.link-muted { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-50); cursor: pointer; }
+.link-muted:hover { color: var(--ink); }
+
+/* ---------- Table ---------- */
+.table { display: flex; flex-direction: column; }
+.tr {
+  display: grid;
+  grid-template-columns: 2fr 1.1fr 1fr 0.9fr 1.5fr 1.2fr;
+  gap: 20px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--line-soft);
   align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: 36px;
-  padding: 0 16px;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  background: var(--paper);
-  color: var(--ink);
-  cursor: pointer;
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: 500;
-  letter-spacing: 0;
+  font-size: 13.5px;
+}
+.tr > div { min-width: 0; }
+.table-3 .tr { grid-template-columns: 2.4fr 1fr 2fr; }
+.table-4 .tr { grid-template-columns: 2.5fr 1.2fr 1fr 1.5fr; }
+.table-list .tr { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
+.table-workspace .tr { grid-template-columns: 2.2fr 1.4fr 1.3fr 0.9fr; }
+.table-workspace-warnings .tr { grid-template-columns: 0.8fr 1.4fr 2.2fr 1fr; }
+.tr.th {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--ink-40); font-weight: 500;
+  padding: 12px 0 10px;
+  border-bottom: 1px solid var(--line);
+}
+.tr:last-child { border-bottom: none; }
+.td-primary { color: var(--ink); font-weight: 500; }
+.td-muted   { color: var(--ink-50); }
+.td-muted-inline { color: var(--ink-50); margin-left: 6px; }
+
+.link {
+  color: var(--ink); text-decoration: none;
+  border-bottom: 1px dashed var(--ink-25);
+  padding: 0; line-height: 1.2;
+  transition: border-color 90ms, color 90ms;
+}
+.link:hover { border-bottom-color: var(--ink); }
+.table .link,
+.preview-row .link,
+.delivery-task-row .link,
+.workspace-line .link {
+  display: inline-block;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
-  user-select: none;
-  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
+  text-align: left;
+  vertical-align: bottom;
 }
-
-.action:hover {
-  background: var(--paper-soft);
-  border-color: #d9d5ce;
-  color: var(--ink);
+.table .td-primary .link,
+.preview-row .link,
+.delivery-task-row .link {
+  justify-self: start;
 }
 
-.action:focus-visible {
-  outline: 2px solid var(--ink);
-  outline-offset: 2px;
+/* ---------- Workspace dashboard ---------- */
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 14px;
+  padding-top: 16px;
 }
-
-.action:active { transform: translateY(0.5px); }
-
-.action.primary {
-  background: var(--ink);
-  border-color: var(--ink);
-  color: #ffffff;
+.project-card {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  padding: 15px;
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  background: var(--surface);
+  text-align: left;
+  transition: border-color 90ms, background 90ms;
 }
-
-.action.primary:hover {
-  background: #1f1f1f;
-  border-color: #1f1f1f;
-  color: #ffffff;
+.project-card:hover {
+  border-color: var(--ink-25);
+  background: color-mix(in oklch, var(--surface) 72%, var(--bg));
+}
+.project-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+.project-card-title {
+  min-width: 0;
+  font-weight: 600;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.project-card-dates,
+.project-card-stats {
+  display: grid;
+  gap: 8px;
 }
-
-.action.primary:focus-visible {
-  outline: 2px solid var(--ink);
-  outline-offset: 2px;
+.project-card-dates {
+  grid-template-columns: 1fr 1fr;
+  color: var(--ink-50);
+  font-size: 12px;
 }
-
-.action-icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
+.project-card-dates span span {
   display: block;
-  pointer-events: none;
+  margin-bottom: 2px;
+  color: var(--ink-40);
+  font: 500 10px/1.2 var(--font-mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
-
-/* Markdown logomark is a monochrome path; tone it down to read as a UI icon. */
-.action-icon-md { opacity: 0.78; }
-.action:hover .action-icon-md { opacity: 0.9; }
-.action.copied .action-icon-md { opacity: 0.9; }
-
-.action-label { line-height: 1; }
-
-.open-feedback {
-  min-height: 18px;
-  margin-top: 10px;
-  color: var(--muted);
-  font-size: 12px;
+.project-card-stats {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  padding-top: 12px;
+  border-top: 1px solid var(--line-soft);
+  color: var(--ink-50);
+  font-size: 11.5px;
 }
-
-.path-pill {
-  max-width: min(100%, 420px);
-  overflow: hidden;
-  text-overflow: ellipsis;
+.project-card-stats strong {
+  display: block;
+  color: var(--ink);
+  font-size: 15px;
+  font-weight: 600;
 }
 
-.eyebrow { margin-bottom: 12px; }
-.meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); }
+/* avatars */
+.avatar {
+  display: inline-grid; place-items: center;
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  background: var(--line);
+  color: var(--ink-70);
+  font-size: 10.5px; font-weight: 600;
+  letter-spacing: 0;
+}
 
-.properties {
-  display: grid;
-  grid-template-columns: 150px minmax(0, 1fr);
-  gap: 8px 16px;
-  margin-top: 18px;
-  padding: 16px;
+/* ---------- Chips ---------- */
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 9px 3px 7px;
   border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--paper-soft);
+  border-radius: 999px;
+  background: var(--surface);
+  font-size: 12px;
+  color: var(--ink-70);
+  white-space: nowrap;
+  font-weight: 500;
 }
-
-.prop-key {
-  color: var(--muted);
-  font: 11px/1.4 var(--mono);
-  padding-top: 3px;
+.chip-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--ink-40);
+  flex: none;
+}
+.chip-ok    { background: var(--ok-soft); border-color: color-mix(in oklab, var(--ok) 30%, var(--line)); color: oklch(0.38 0.10 155); }
+.chip-ok    .chip-dot { background: var(--ok); }
+.chip-warn  { background: var(--warn-soft); border-color: color-mix(in oklab, var(--warn) 30%, var(--line)); color: oklch(0.40 0.13 55); }
+.chip-warn  .chip-dot { background: var(--warn); }
+.chip-low   { background: var(--low-soft); border-color: var(--line); color: var(--ink-70); }
+.chip-low   .chip-dot { background: var(--low); }
+
+.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: middle; transform: translateY(-1px); }
+.dot-warn { background: var(--warn); }
+
+/* ---------- Timeline ---------- */
+.timeline { padding: 8px 0 4px; }
+.tl-row {
+  display: grid;
+  grid-template-columns: 64px 24px 1fr;
+  align-items: flex-start;
+  padding: 10px 0;
+  position: relative;
 }
-
-.prop-value {
+.tl-date { color: var(--ink-50); padding-top: 1px; }
+.tl-bullet {
+  position: relative;
+  display: grid; place-items: center;
+  height: 18px;
+}
+.tl-bullet::before {
+  content: ""; position: absolute; top: 0; bottom: -32px;
+  left: 50%; width: 1px; background: var(--line);
+}
+.tl-row:last-child .tl-bullet::before { display: none; }
+.tl-bullet > span {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--bg); border: 1.5px solid var(--ink-50);
+  position: relative; z-index: 1;
+}
+.tl-body { padding-bottom: 4px; }
+.timeline-workspace { margin-top: 2px; }
+.workspace-line {
   display: flex;
-  align-items: flex-start;
+  align-items: baseline;
   gap: 8px;
-  min-width: 0;
-}
-
-.prop-value .prop-text {
-  flex: 1;
-  min-width: 0;
-  overflow-wrap: anywhere;
+  flex-wrap: wrap;
 }
-
-.copy-btn {
-  display: inline-flex;
+.pagination {
+  display: flex;
   align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 1px solid var(--line);
-  border-radius: 5px;
-  background: var(--paper);
-  color: var(--muted);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
+  gap: 12px;
+  padding-top: 16px;
+  border-top: 1px solid var(--line-soft);
+  color: var(--ink-50);
 }
 
-.copy-btn:hover {
+/* ---------- Project outline ---------- */
+.outline-list {
+  display: flex;
+  flex-direction: column;
+  padding-top: 8px;
+}
+.outline-row {
+  border-bottom: 1px solid var(--line-soft);
+  padding: 12px 0;
+}
+.outline-row:last-child { border-bottom: none; }
+.outline-main {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 8px 0;
+  text-align: left;
   color: var(--ink);
-  border-color: #d9d5ce;
-  background: var(--paper-soft);
 }
-
-.copy-btn:focus-visible {
-  outline: 2px solid var(--blue-text);
-  outline-offset: 1px;
+.outline-main:hover .outline-title,
+.outline-subitem:hover span:nth-child(2) {
+  border-bottom-color: var(--ink);
 }
-
-.copy-btn.copied {
-  color: var(--green-text);
-  border-color: var(--green-bg);
-  background: var(--green-bg);
+.outline-title {
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.35;
+  border-bottom: 1px dashed transparent;
 }
-
-.copy-btn svg { display: block; }
-
-.copy-btn.pre-copy {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  opacity: 0;
-  transition: opacity 200ms ease, color 200ms ease, border-color 200ms ease, background 200ms ease;
+.outline-sublist {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 4px 0 0 16px;
+  padding-left: 14px;
+  border-left: 1px solid var(--line);
 }
-
-.markdown pre:hover .copy-btn.pre-copy,
-.copy-btn.pre-copy:focus-visible,
-.copy-btn.pre-copy.copied {
-  opacity: 1;
+.outline-subitem {
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr) max-content;
+  gap: 12px;
+  align-items: center;
+  padding: 7px 0;
+  text-align: left;
+  color: var(--ink);
+  font-size: 13px;
 }
-
-.action.copied {
-  color: var(--green-text);
-  border-color: var(--green-bg);
-  background: var(--green-bg);
+.outline-subitem .mono {
+  color: var(--ink-50);
+  font-size: 11.5px;
+}
+.outline-subitem span:nth-child(2) {
+  min-width: 0;
+  border-bottom: 1px dashed transparent;
+  line-height: 1.35;
 }
 
-.action.primary.copied {
-  color: var(--green-text);
-  border-color: var(--green-bg);
-  background: var(--green-bg);
+/* ---------- Workstream detail ---------- */
+.two-col {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 320px;
+  gap: 48px;
+  align-items: start;
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
+.ws-block { padding: 18px 0; border-bottom: 1px solid var(--line); }
+.ws-block:first-child { padding-top: 8px; }
+.ws-block:last-child { border-bottom: none; }
+.ws-h {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-50);
+  margin: 0 0 10px;
+}
+.ws-body p { margin: 0; color: var(--ink); max-width: 70ch; }
+.ws-body { font-size: 14px; line-height: 1.55; }
+
+.bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
+.bullets li { padding-left: 18px; position: relative; max-width: 72ch; }
+.bullets li::before {
+  content: ""; position: absolute; left: 4px; top: 9px;
+  width: 4px; height: 1px; background: var(--ink-40);
+}
+
+.checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
+.checklist li { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.checklist .cb {
+  width: 14px; height: 14px;
+  border: 1px solid var(--ink-25);
+  border-radius: 3px;
+  display: grid; place-items: center;
+  flex: none;
+  color: transparent;
+}
+.checklist li.done .cb {
+  background: var(--ink); border-color: var(--ink); color: var(--bg);
+}
+.checklist li.done { color: var(--ink-50); text-decoration: line-through; text-decoration-thickness: 1px; }
+.checklist .link {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  text-overflow: ellipsis;
   white-space: nowrap;
-  border: 0;
 }
-
-.markdown {
-  max-width: 780px;
-  font-size: 16px;
-  line-height: 1.72;
-  color: var(--text);
+.checklist-meta {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+  color: var(--ink-50);
 }
 
-.markdown h1, .markdown h2, .markdown h3 {
-  color: var(--ink);
-  line-height: 1.1;
-  letter-spacing: -0.018em;
-  margin: 1.7em 0 0.55em;
+.decisions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
+.decisions li {
+  display: flex; align-items: baseline; justify-content: space-between;
+  gap: 24px; padding: 8px 0; border-top: 1px dashed var(--line);
 }
+.decisions li:first-child { border-top: none; padding-top: 0; }
 
-.markdown h1 {
-  font-family: var(--serif);
-  font-size: 32px;
+/* ---------- Side column ---------- */
+.col-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 80px; }
+.side-block {
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  background: var(--surface);
+  overflow: hidden;
+}
+.side-head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--line);
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: -0.005em;
+}
+.side-head .count { color: var(--ink-40); font-weight: 500; font-size: 12px; }
+.side-link { margin-left: auto; }
+.side-label {
+  padding: 10px 14px 5px;
+  color: var(--ink-50);
+  font-size: 11px;
   font-weight: 500;
-  letter-spacing: -0.022em;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
-
-.markdown h2 {
-  font-family: var(--display);
-  font-size: 24px;
-  font-weight: 620;
+.side-label-list {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-top: 1px solid var(--line-soft);
+  margin-top: 4px;
 }
-
-.markdown h3 { font-size: 18px; }
-
-.markdown h4, .markdown h5, .markdown h6 {
+.side-label .count {
+  color: var(--ink-40);
+  font-size: 11px;
+}
+.task-parent-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 5px 14px 11px;
   color: var(--ink);
-  line-height: 1.2;
-  margin: 1.4em 0 0.45em;
+  text-align: left;
+}
+.task-parent-link span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-bottom: 1px dashed transparent;
+}
+.task-parent-link:hover span {
+  border-bottom-color: var(--ink);
+}
+.task-nav-actions {
+  padding: 0 14px 10px;
+}
+
+.dl {
+  margin: 0; padding: 8px 0;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 0 16px;
 }
-.markdown h4 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
-.markdown h5 {
-  font-family: var(--mono);
+.dl dt {
+  padding: 8px 14px;
   font-size: 12px;
-  font-weight: 650;
+  color: var(--ink-50);
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--muted);
+  font-weight: 500;
 }
-.markdown h6 {
-  font-family: var(--mono);
-  font-size: 11px;
-  font-weight: 650;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--faint);
+.dl dd {
+  margin: 0;
+  padding: 8px 14px;
+  font-size: 13px;
+  color: var(--ink);
+  display: flex; align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
 }
 
-.markdown p { margin: 0 0 1em; }
-.markdown ul, .markdown ol { padding-left: 1.5em; margin: 0 0 1em; }
-.markdown ul ul, .markdown ol ol, .markdown ul ol, .markdown ol ul { margin: 0.35em 0 0.1em; }
-.markdown li { margin: 0.32em 0; }
-.markdown li > p:last-child { margin-bottom: 0; }
-
-.markdown ul.task-list, .markdown ul.task-list ul.task-list { list-style: none; padding-left: 0.2em; }
-.markdown .task-item {
+.side-list { margin: 0; padding: 0; list-style: none; }
+.side-list li {
+  padding: 0;
+  border-top: 1px solid var(--line-soft);
+  font-size: 13px;
+  color: var(--ink);
+}
+.side-list li:first-child { border-top: none; }
+.side-list li:hover { background: color-mix(in oklab, var(--line-soft) 60%, transparent); }
+.side-list li.is-current {
+  background: var(--accent-soft);
+}
+.side-list-button {
+  width: 100%;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
+  justify-content: space-between;
   gap: 10px;
+  padding: 10px 14px;
+  text-align: left;
 }
-.markdown .task-marker {
-  flex: 0 0 16px;
-  width: 16px;
-  height: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  background: var(--paper);
-  color: var(--green-text);
-  margin-top: 3px;
+.side-list-button:disabled {
+  cursor: default;
 }
-.markdown .task-item.checked .task-marker {
-  background: var(--green-bg);
-  border-color: var(--green-bg);
+.side-list-empty {
+  padding: 10px 14px !important;
+  color: var(--ink-50);
 }
-.markdown .task-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
-.markdown .task-item.checked .task-text { color: var(--muted); }
-
-.markdown .table-wrap {
-  margin: 1.3em 0;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  overflow-x: auto;
+.sl-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
+.sl-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.markdown table {
-  border-collapse: collapse;
-  width: 100%;
-  font-size: 14.5px;
+.sl-name svg { color: var(--ink-50); flex: none; }
+.sl-right { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-40); }
+.meta-separator {
+  color: var(--ink-40);
+  margin-right: 2px;
 }
-.markdown th, .markdown td {
-  padding: 11px 14px;
-  text-align: left;
-  border-bottom: 1px solid var(--line);
-  vertical-align: top;
+
+/* ---------- Page foot ---------- */
+.page-foot {
+  margin-top: 8px;
+  padding-top: 24px;
+  border-top: 1px dashed var(--line);
+  color: var(--ink-40);
+  font-size: 11.5px;
+  letter-spacing: 0.02em;
 }
-.markdown thead th {
-  background: var(--paper-soft);
-  font-weight: 650;
+
+/* ---------- Search input ---------- */
+.search-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--surface);
   color: var(--ink);
+  font-family: inherit;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 150ms, background 150ms;
 }
-.markdown tbody tr:last-child td { border-bottom: 0; }
-.markdown tbody tr:hover { background: var(--paper-soft); }
+.search-input::placeholder { color: var(--ink-40); }
+.search-input:focus { border-color: var(--ink-25); background: var(--bg); }
 
-.markdown pre.has-lang code { display: block; margin-top: 18px; }
-.markdown pre .code-lang {
-  position: absolute;
-  top: 9px;
-  left: 14px;
-  font-family: var(--mono);
-  font-size: 10.5px;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--faint);
-  pointer-events: none;
-  user-select: none;
+/* ---------- Empty state ---------- */
+.empty-state {
+  padding: 18px 0;
+  color: var(--ink-50);
+  font-size: 13.5px;
 }
 
-.markdown .mermaid-block {
-  margin: 1.3em 0;
-  padding: 0;
+/* ============================================================
+   Markdown body (document reader)
+   ============================================================ */
+.md-body {
+  max-width: 780px;
+  font-size: 15px;
+  line-height: 1.65;
+  color: var(--ink);
 }
-.markdown .mermaid-block figcaption {
-  font-family: var(--mono);
-  font-size: 10.5px;
-  letter-spacing: 0.06em;
+
+.md-body h1, .md-body h2, .md-body h3, .md-body h4 {
+  color: var(--ink);
+  line-height: 1.15;
+  letter-spacing: -0.012em;
+}
+.md-body h1 { font-size: 24px; font-weight: 600; margin: 1.7em 0 0.55em; }
+.md-body h2 { font-size: 20px; font-weight: 600; margin: 1.5em 0 0.5em; }
+.md-body h3 { font-size: 16px; font-weight: 600; margin: 1.4em 0 0.45em; }
+.md-body h4 { font-size: 14px; font-weight: 600; margin: 1.3em 0 0.4em; }
+.md-body h5 {
+  font-family: var(--font-mono);
+  font-size: 12px; font-weight: 600;
   text-transform: uppercase;
-  color: var(--muted);
-  margin-bottom: 6px;
+  letter-spacing: 0.06em;
+  color: var(--ink-50);
+  margin: 1.3em 0 0.4em;
 }
-.markdown .mermaid-block pre { margin: 0; }
-
-.markdown hr.rule {
-  border: 0;
-  border-top: 1px solid var(--line);
-  margin: 2em 0;
+.md-body h6 {
+  font-family: var(--font-mono);
+  font-size: 11px; font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ink-40);
+  margin: 1.2em 0 0.35em;
 }
 
-.markdown a, .wikilink {
-  color: var(--blue-text);
-  text-decoration: none;
-  border-bottom: 1px solid rgba(31, 108, 159, 0.25);
-  cursor: pointer;
-}
+.md-body p { margin: 0 0 1em; }
+.md-body ul, .md-body ol { padding-left: 1.5em; margin: 0 0 1em; }
+.md-body ul ul, .md-body ol ol, .md-body ul ol, .md-body ol ul { margin: 0.35em 0 0.1em; }
+.md-body li { margin: 0.32em 0; }
+.md-body li > p:last-child { margin-bottom: 0; }
 
-.markdown code {
-  background: #f1f0ed;
+.md-body code {
+  background: var(--line-soft);
   border: 1px solid var(--line);
-  border-radius: 4px;
+  border-radius: var(--r-sm);
   padding: 0.1em 0.35em;
-  font-family: var(--mono);
+  font-family: var(--font-mono);
   font-size: 0.88em;
 }
-
-.markdown pre {
+.md-body pre {
   position: relative;
-  background: #fbfbfa;
-  color: var(--ink);
+  background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: 10px;
+  border-radius: var(--r);
   padding: 18px;
   overflow: auto;
+  margin: 1.3em 0;
 }
-
-.markdown pre code {
+.md-body pre code {
   background: transparent;
   border: 0;
-  color: inherit;
   padding: 0;
+  font-size: 13px;
+  color: inherit;
+}
+.md-body pre.has-lang code { display: block; margin-top: 18px; }
+.md-body .code-lang {
+  position: absolute;
+  top: 9px; left: 14px;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--ink-40);
+  pointer-events: none;
+  user-select: none;
 }
 
-.markdown blockquote {
+.md-body blockquote {
   margin: 1.4em 0;
   padding: 2px 0 2px 20px;
-  border-left: 2px solid #d9d5ce;
-  color: var(--muted);
-  font-family: var(--serif);
+  border-left: 2px solid var(--line);
+  color: var(--ink-50);
   font-style: italic;
-  font-size: 17px;
   line-height: 1.55;
 }
 
-.empty {
-  color: var(--muted);
-  padding: 40px;
-  text-align: center;
-}
-
-.outline {
-  border-right: 0;
-  overflow: auto;
-  padding: 28px 18px;
-  background: var(--paper-soft);
-  display: none;
-}
-
-.viewer-frame.outline-open .shell {
-  grid-template-columns: 380px minmax(0, 1fr) 320px;
-}
-
-.viewer-frame.outline-open .outline {
-  display: block;
-}
-
-.outline-title {
-  color: var(--ink);
-  font-family: var(--serif);
-  font-size: 26px;
-  font-weight: 500;
-  line-height: 1.04;
-  letter-spacing: -0.025em;
+.md-body hr {
+  border: 0;
+  border-top: 1px solid var(--line);
+  margin: 2em 0;
 }
 
-.outline-help {
-  color: var(--muted);
-  font-size: 12.5px;
-  line-height: 1.55;
-  margin: 10px 0 24px;
-  max-width: 36ch;
+.md-body .table-wrap {
+  margin: 1.3em 0;
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  overflow-x: auto;
 }
-
-.outline-section { margin: 18px 0; }
-.outline-label { margin: 18px 4px 8px; }
-
-.outline-link {
-  width: 100%;
-  border: 1px solid transparent;
-  background: transparent;
+.md-body table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
+.md-body th, .md-body td {
+  padding: 11px 14px;
   text-align: left;
-  border-radius: 8px;
-  padding: 8px 9px;
-  display: flex;
-  gap: 9px;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-}
-
-.outline-link span:first-child {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.outline-link:hover, .outline-link.active, .workstream-block.active > .outline-link {
-  background: var(--paper);
-  border-color: var(--line);
+  border-bottom: 1px solid var(--line);
+  vertical-align: top;
 }
-
-.workstream-block {
-  border-left: 1px solid var(--line);
-  margin-left: 4px;
-  padding-left: 8px;
+.md-body thead th {
+  background: var(--surface);
+  font-weight: 600;
+  color: var(--ink);
 }
+.md-body tbody tr:last-child td { border-bottom: 0; }
+.md-body tbody tr:hover { background: var(--line-soft); }
 
-.subtasks { margin: 5px 0 10px 10px; }
-.subtasks .outline-link { font-size: 12px; padding: 7px 8px; }
-.small { padding: 10px; text-align: left; font-size: 12px; }
-
-.reveal {
-  opacity: 0;
-  transform: translateY(12px);
-  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
-  transition-delay: calc(var(--index, 0) * 60ms);
+.md-body a {
+  color: var(--ink);
+  text-decoration: none;
+  border-bottom: 1px dashed var(--ink-25);
+  transition: border-color 90ms;
 }
+.md-body a:hover { border-bottom-color: var(--ink); }
+.md-body strong { color: var(--ink); font-weight: 600; }
 
-.reveal.visible {
-  opacity: 1;
-  transform: translateY(0);
+.md-body .task-list, .md-body .task-list .task-list { list-style: none; padding-left: 0.2em; }
+.md-body .task-item { display: flex; align-items: flex-start; gap: 10px; }
+.md-body .task-marker {
+  flex: 0 0 16px; width: 16px; height: 16px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--surface);
+  color: var(--ok);
+  margin-top: 3px;
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .reveal {
-    opacity: 1;
-    transform: none;
-    transition: none;
-  }
+.md-body .task-item.checked .task-marker {
+  background: var(--ok-soft);
+  border-color: var(--ok-soft);
 }
+.md-body .task-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.md-body .task-item.checked .task-text { color: var(--ink-50); }
 
-@media (max-width: 1180px) {
-  .shell { grid-template-columns: 320px minmax(0, 1fr); }
-  .viewer-frame.outline-open .shell { grid-template-columns: 320px minmax(0, 1fr); }
-  .reader-inner { padding: 52px 56px 92px; }
+/* ---------- Responsive ---------- */
+@media (max-width: 1100px) {
+  .two-col { grid-template-columns: 1fr; }
+  .col-side { position: static; }
 }
 
-@media (max-width: 820px) {
-  #app { padding: 10px; }
-  .viewer-frame { min-height: calc(100vh - 20px); }
-  .top-bar {
+@media (max-width: 860px) {
+  .app { grid-template-columns: 1fr; }
+  .sidebar {
+    position: static;
     height: auto;
+    flex-direction: row;
     flex-wrap: wrap;
-    gap: 12px 18px;
-    padding: 14px 18px;
-  }
-  .brand-mark {
-    padding-right: 0;
-    border-right: 0;
-    font-size: 20px;
-  }
-  .tabs { width: 100%; gap: 4px; flex-wrap: wrap; }
-  .tab-more { display: none; }
-  .tab-dropdown { display: none !important; }
-  .shell { display: block; height: auto; }
-  .list, .reader, .outline {
-    height: auto;
+    gap: 4px;
+    padding: 12px;
     border-right: 0;
     border-bottom: 1px solid var(--line);
   }
-  .outline { display: none; }
-  .viewer-frame.outline-open .outline { display: block; }
-  .list, .outline { padding: 20px; }
-  .reader-top { display: block; }
-  .reader-actions { margin: 14px 0 0; }
-  .reader-inner { padding: 32px 24px 56px; }
-  .reader h1 { font-size: 34px; }
-  .properties { grid-template-columns: 1fr; }
+  .brand { border-bottom: 0; padding-bottom: 4px; margin-bottom: 0; }
+  .nav { flex-direction: row; flex-wrap: wrap; gap: 2px; }
+  .nav-section { padding: 6px 9px; width: 100%; }
+  .sidebar-foot { margin-top: 0; padding-top: 0; border-top: 0; }
+  .content { padding: 24px 20px 48px; }
+  .topbar { padding: 12px 20px; gap: 12px; }
+  .summary { grid-template-columns: 1fr 1fr; }
+  .overview-delivery { grid-template-columns: 1fr; gap: 24px; }
+  .overview-priority { grid-template-columns: 1fr; }
+  .preview-row { grid-template-columns: 1fr; gap: 5px; }
+  .delivery-task-row { grid-template-columns: 1fr; gap: 5px; }
+  .project-card-stats { grid-template-columns: 1fr 1fr; }
+  .doc-reader-page,
+  .two-col { grid-template-columns: 1fr; }
+  .doc-side,
+  .col-side { position: static; }
+  .outline-subitem { grid-template-columns: 1fr; gap: 5px; }
 }