@bvdm/delano 0.1.5 → 0.1.8

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

@@ -0,0 +1,1042 @@
+: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);
+}
+
+* { box-sizing: border-box; }
+
+html { background: var(--canvas); }
+
+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;
+}
+
+.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;
+}
+
+@keyframes ambient-drift {
+  0%   { transform: translate3d(0, 0, 0); }
+  100% { transform: translate3d(-1.2%, 0.8%, 0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ambient { animation: none; }
+}
+
+button, input { font: inherit; }
+button { color: inherit; }
+
+#app {
+  position: relative;
+  z-index: 1;
+  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);
+}
+
+.top-bar {
+  display: flex;
+  align-items: stretch;
+  height: 60px;
+  padding: 0 28px;
+  gap: 28px;
+  border-bottom: 1px solid var(--line);
+  background: var(--paper);
+}
+
+.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;
+  color: var(--ink);
+}
+
+.tabs {
+  position: relative;
+  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);
+}
+
+.tab-more.has-active { color: var(--ink); }
+
+.tab-more.has-active::after {
+  content: '';
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  bottom: -1px;
+  height: 2px;
+  background: var(--ink);
+}
+
+.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);
+  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;
+}
+
+.tab-dropdown[data-open="true"] {
+  display: block;
+  animation: dropdown-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes dropdown-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  text-align: left;
+  padding: 9px 11px;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+.dropdown-item:hover { background: var(--paper-soft); color: var(--ink); }
+
+.dropdown-item.active {
+  background: var(--paper-soft);
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.dropdown-item .count {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--faint);
+  font-weight: 400;
+}
+
+.dropdown-item:focus-visible {
+  outline: 2px solid var(--blue-text);
+  outline-offset: -2px;
+}
+
+.tab {
+  position: relative;
+  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;
+}
+
+.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);
+}
+
+.tab .count {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  font-weight: 400;
+  color: var(--faint);
+  letter-spacing: 0;
+}
+
+.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;
+  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);
+}
+
+.shell {
+  display: grid;
+  grid-template-columns: 380px minmax(0, 1fr);
+  height: calc(100vh - 98px);
+  background: var(--paper);
+}
+
+.list, .reader, .outline {
+  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;
+}
+
+.count {
+  color: var(--muted);
+  font: 11px/1 var(--mono);
+}
+
+.pill {
+  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;
+}
+
+.pill.active, .pill.approved, .pill.complete, .pill.done {
+  color: var(--green-text);
+  background: var(--green-bg);
+}
+
+.pill.in-progress, .pill.planned, .pill.ready {
+  color: var(--yellow-text);
+  background: var(--yellow-bg);
+}
+
+.pill.blocked {
+  color: var(--red-text);
+  background: var(--red-bg);
+}
+
+.list {
+  padding: 20px;
+  overflow: auto;
+  background: #fcfbf9;
+}
+
+.search {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 11px 12px;
+  background: var(--paper);
+  color: var(--ink);
+  outline: none;
+  transition: border-color 160ms ease, background 160ms ease;
+}
+
+.search::placeholder { color: var(--faint); }
+.search:focus {
+  border-color: #cfcac2;
+  background: #fff;
+}
+
+.filters {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 16px 0 18px;
+}
+
+.filter-group {
+  display: flex;
+  gap: 7px;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+}
+
+.filter-label { margin-right: 4px; }
+.filter-note { color: var(--muted); font-size: 12px; width: 100%; padding: 4px 2px; }
+
+.sort-group {
+  align-items: center;
+}
+
+.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;
+}
+
+.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;
+  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;
+}
+
+.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;
+}
+
+.workstream-scope, .filter.active {
+  border-color: transparent;
+  color: var(--blue-text);
+  background: var(--blue-bg);
+}
+
+.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;
+}
+
+.doc:hover, .doc.active {
+  border-color: #dedbd5;
+  background: #fff;
+  box-shadow: var(--shadow-card-hover);
+}
+
+.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;
+}
+
+.doc-title span:first-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.doc-path {
+  color: var(--faint);
+  font: 11px/1.4 var(--mono);
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.doc-snippet {
+  color: var(--muted);
+  font-size: 13px;
+  margin-top: 10px;
+}
+
+.reader {
+  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;
+}
+
+.reader h1 {
+  color: var(--ink);
+  font-family: var(--serif);
+  font-size: clamp(34px, 3.4vw, 48px);
+  font-weight: 500;
+  line-height: 1.06;
+  letter-spacing: -0.025em;
+  margin: 0 0 22px;
+}
+
+.reader-top {
+  display: block;
+}
+
+.reader-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-top: 14px;
+}
+
+/* Shadcn-style action buttons. .action = outline variant, .action.primary = default variant. */
+.action {
+  display: inline-flex;
+  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;
+  white-space: nowrap;
+  user-select: none;
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
+}
+
+.action:hover {
+  background: var(--paper-soft);
+  border-color: #d9d5ce;
+  color: var(--ink);
+}
+
+.action:focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 2px;
+}
+
+.action:active { transform: translateY(0.5px); }
+
+.action.primary {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: #ffffff;
+}
+
+.action.primary:hover {
+  background: #1f1f1f;
+  border-color: #1f1f1f;
+  color: #ffffff;
+}
+
+.action.primary:focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 2px;
+}
+
+.action-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  display: block;
+  pointer-events: none;
+}
+
+/* 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;
+}
+
+.path-pill {
+  max-width: min(100%, 420px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.eyebrow { margin-bottom: 12px; }
+.meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); }
+
+.properties {
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr);
+  gap: 8px 16px;
+  margin-top: 18px;
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--paper-soft);
+}
+
+.prop-key {
+  color: var(--muted);
+  font: 11px/1.4 var(--mono);
+  padding-top: 3px;
+}
+
+.prop-value {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+}
+
+.prop-value .prop-text {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.copy-btn {
+  display: inline-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;
+}
+
+.copy-btn:hover {
+  color: var(--ink);
+  border-color: #d9d5ce;
+  background: var(--paper-soft);
+}
+
+.copy-btn:focus-visible {
+  outline: 2px solid var(--blue-text);
+  outline-offset: 1px;
+}
+
+.copy-btn.copied {
+  color: var(--green-text);
+  border-color: var(--green-bg);
+  background: var(--green-bg);
+}
+
+.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;
+}
+
+.markdown pre:hover .copy-btn.pre-copy,
+.copy-btn.pre-copy:focus-visible,
+.copy-btn.pre-copy.copied {
+  opacity: 1;
+}
+
+.action.copied {
+  color: var(--green-text);
+  border-color: var(--green-bg);
+  background: var(--green-bg);
+}
+
+.action.primary.copied {
+  color: var(--green-text);
+  border-color: var(--green-bg);
+  background: var(--green-bg);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.markdown {
+  max-width: 780px;
+  font-size: 16px;
+  line-height: 1.72;
+  color: var(--text);
+}
+
+.markdown h1, .markdown h2, .markdown h3 {
+  color: var(--ink);
+  line-height: 1.1;
+  letter-spacing: -0.018em;
+  margin: 1.7em 0 0.55em;
+}
+
+.markdown h1 {
+  font-family: var(--serif);
+  font-size: 32px;
+  font-weight: 500;
+  letter-spacing: -0.022em;
+}
+
+.markdown h2 {
+  font-family: var(--display);
+  font-size: 24px;
+  font-weight: 620;
+}
+
+.markdown h3 { font-size: 18px; }
+
+.markdown h4, .markdown h5, .markdown h6 {
+  color: var(--ink);
+  line-height: 1.2;
+  margin: 1.4em 0 0.45em;
+}
+.markdown h4 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
+.markdown h5 {
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+}
+.markdown h6 {
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 650;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--faint);
+}
+
+.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 {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+.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;
+}
+.markdown .task-item.checked .task-marker {
+  background: var(--green-bg);
+  border-color: var(--green-bg);
+}
+.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;
+}
+.markdown table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 14.5px;
+}
+.markdown th, .markdown td {
+  padding: 11px 14px;
+  text-align: left;
+  border-bottom: 1px solid var(--line);
+  vertical-align: top;
+}
+.markdown thead th {
+  background: var(--paper-soft);
+  font-weight: 650;
+  color: var(--ink);
+}
+.markdown tbody tr:last-child td { border-bottom: 0; }
+.markdown tbody tr:hover { background: var(--paper-soft); }
+
+.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;
+}
+
+.markdown .mermaid-block {
+  margin: 1.3em 0;
+  padding: 0;
+}
+.markdown .mermaid-block figcaption {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-bottom: 6px;
+}
+.markdown .mermaid-block pre { margin: 0; }
+
+.markdown hr.rule {
+  border: 0;
+  border-top: 1px solid var(--line);
+  margin: 2em 0;
+}
+
+.markdown a, .wikilink {
+  color: var(--blue-text);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(31, 108, 159, 0.25);
+  cursor: pointer;
+}
+
+.markdown code {
+  background: #f1f0ed;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 0.1em 0.35em;
+  font-family: var(--mono);
+  font-size: 0.88em;
+}
+
+.markdown pre {
+  position: relative;
+  background: #fbfbfa;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 18px;
+  overflow: auto;
+}
+
+.markdown pre code {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  padding: 0;
+}
+
+.markdown blockquote {
+  margin: 1.4em 0;
+  padding: 2px 0 2px 20px;
+  border-left: 2px solid #d9d5ce;
+  color: var(--muted);
+  font-family: var(--serif);
+  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;
+}
+
+.outline-help {
+  color: var(--muted);
+  font-size: 12.5px;
+  line-height: 1.55;
+  margin: 10px 0 24px;
+  max-width: 36ch;
+}
+
+.outline-section { margin: 18px 0; }
+.outline-label { margin: 18px 4px 8px; }
+
+.outline-link {
+  width: 100%;
+  border: 1px solid transparent;
+  background: transparent;
+  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);
+}
+
+.workstream-block {
+  border-left: 1px solid var(--line);
+  margin-left: 4px;
+  padding-left: 8px;
+}
+
+.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);
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+@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; }
+}
+
+@media (max-width: 820px) {
+  #app { padding: 10px; }
+  .viewer-frame { min-height: calc(100vh - 20px); }
+  .top-bar {
+    height: auto;
+    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;
+    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; }
+}