@uniqbit/mate-core 0.18.4 → 1.0.0-canary.0

package/src/cli/commands/studio/views/styles.ts

@@ -1,96 +1,14 @@
+import { studioPaletteCss } from "./palette";
+
 /**
- * Theme-aware by tokens: the Workflow palette is the default, light mode is
- * applied through the system preference or the inline toggle, and explicit
- * theme attributes win over media queries.
+ * Theme-aware by tokens: the colour tokens come from the brand palette shared with
+ * reports (see `./palette`), dark is the default, light mode is applied through the
+ * system preference or the inline toggle, and explicit theme attributes win over
+ * media queries.
  */
 export const STUDIO_STYLES = `
-:root {
-  color-scheme: dark;
-  --bg: #0e1116;
-  --bg-rail: #12171e;
-  --panel: #171d26;
-  --panel-soft: #1e2631;
-  --border: #303b4a;
-  --border-soft: #25303c;
-  --text: #f3f6fa;
-  --muted: #9aa8b8;
-  --accent: #8cc7ff;
-  --accent-soft: rgb(140 199 255 / 11%);
-  --done: #9ee493;
-  --done-soft: rgb(158 228 147 / 12%);
-  --warn: #f6c56e;
-  --warn-soft: rgb(246 197 110 / 12%);
-  --bad: #ff8d87;
-  --bad-soft: rgb(255 141 135 / 12%);
-  --what: #74d3d8;
-  --what-soft: rgb(116 211 216 / 12%);
-  --why: #caa8ff;
-  --why-soft: rgb(202 168 255 / 14%);
-  --prompt-bg: #0a0d12;
-  --prompt-text: #dce5f0;
-  --shadow: 0 14px 36px rgb(0 0 0 / 22%);
-  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme="dark"]) {
-    color-scheme: light;
-    --bg: #f3f6fa;
-    --bg-rail: #f8fafc;
-    --panel: #ffffff;
-    --panel-soft: #eef4fa;
-    --border: #cbd5e1;
-    --border-soft: #e3eaf2;
-    --text: #18212b;
-    --muted: #637083;
-    --accent: #1f66a6;
-    --accent-soft: #e8f3fd;
-    --done: #287b3b;
-    --done-soft: #e7f5e9;
-    --warn: #946300;
-    --warn-soft: #fff4d9;
-    --bad: #b42318;
-    --bad-soft: #ffebe9;
-    --what: #176b75;
-    --what-soft: #e2f5f6;
-    --why: #6346a5;
-    --why-soft: #f0ebff;
-    --prompt-bg: #17212b;
-    --prompt-text: #edf4fb;
-    --shadow: 0 12px 32px rgb(30 55 80 / 10%);
-  }
-}
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) { color-scheme: dark; }
-}
-:root[data-theme="light"] {
-  color-scheme: light;
-  --bg: #f3f6fa;
-  --bg-rail: #f8fafc;
-  --panel: #ffffff;
-  --panel-soft: #eef4fa;
-  --border: #cbd5e1;
-  --border-soft: #e3eaf2;
-  --text: #18212b;
-  --muted: #637083;
-  --accent: #1f66a6;
-  --accent-soft: #e8f3fd;
-  --done: #287b3b;
-  --done-soft: #e7f5e9;
-  --warn: #946300;
-  --warn-soft: #fff4d9;
-  --bad: #b42318;
-  --bad-soft: #ffebe9;
-  --what: #176b75;
-  --what-soft: #e2f5f6;
-  --why: #6346a5;
-  --why-soft: #f0ebff;
-  --prompt-bg: #17212b;
-  --prompt-text: #edf4fb;
-  --shadow: 0 12px 32px rgb(30 55 80 / 10%);
-}
-:root[data-theme="dark"] {
-  color-scheme: dark;
-}
+${studioPaletteCss()}
+:root { --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }
 
 * { box-sizing: border-box; }
 body {
@@ -101,7 +19,7 @@ body {
   font-size: 14px;
   line-height: 1.5;
 }
-.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
+.shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
 @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } }
 
 .rail {
@@ -112,6 +30,7 @@ body {
   flex-direction: column;
   gap: 24px;
 }
+a { color: var(--accent); }
 select, button {
   font: inherit;
   color: inherit;
@@ -121,21 +40,33 @@ select, button {
   padding: 9px 11px;
   max-width: 100%;
 }
-select { width: 100%; }
+/** Own chevron: the native one ignores padding and sits on the right border. */
+select {
+  width: 100%;
+  appearance: none;
+  padding-right: 32px;
+  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
+  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
+  background-size: 5px 5px;
+  background-repeat: no-repeat;
+}
 button { cursor: pointer; text-align: left; transition: border-color .15s, background .15s, color .15s; }
 button:hover { border-color: var(--accent); background: var(--accent-soft); }
 button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .main { padding: 40px clamp(22px, 4vw, 64px) 72px; min-width: 0; background: var(--bg); }
 .main > * { width: min(100%, 1180px); margin-right: auto; margin-left: auto; }
+/** A view's content sits on the page; only items and details are cards. */
+.view-section { display: grid; gap: 18px; min-width: 0; }
+.view-summary { margin: 0; color: var(--muted); font-size: .8rem; }
+.view-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
 .panel {
   background: var(--panel);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 8px;
   padding: 24px;
   margin-bottom: 16px;
-  box-shadow: var(--shadow);
 }
-h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -.04em; }
+h1 { margin: 0; font-size: 1.6rem; font-weight: 650; line-height: 1.2; letter-spacing: -.01em; }
 h3 { color: var(--text); font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
 h4 { font-size: .86rem; margin: 0 0 6px; font-family: var(--mono); }
 .note { color: var(--muted); font-size: .82rem; margin: 5px 0 14px; }
@@ -150,7 +81,6 @@ option.placeholder { color: var(--muted); font-style: italic; }
 
 .page-header { display: flex; align-items: stretch; justify-content: space-between; gap: 32px; padding-bottom: 24px; margin-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
 .page-heading { min-width: 0; }
-.page-eyebrow { margin: 0 0 8px; color: var(--accent); font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
 .page-context { display: grid; align-content: start; gap: 6px; min-width: min(100%, 300px); max-width: 380px; padding: 0; border: 0; border-radius: 0; background: transparent; }
 .page-context-label { color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
 .page-context code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -158,14 +88,14 @@ option.placeholder { color: var(--muted); font-style: italic; }
 .snapshot-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--done); }
 .section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
 .section-note { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
-.section-count { flex: none; color: var(--muted); font-family: var(--mono); font-size: .72rem; }
+.section-header h3 { color: var(--muted); font-family: inherit; font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
 
 table { border-collapse: collapse; width: 100%; font-size: .88rem; }
 th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
 th:first-child, td:first-child { padding-left: 0; }
 th:last-child, td:last-child { padding-right: 0; }
 th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
-tbody tr:hover td { background: var(--accent-soft); }
+tbody tr:hover td { background: var(--panel-soft); }
 td.numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
 .lookup-table td:first-child { min-width: 180px; }
 .change-cell { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; }
@@ -175,9 +105,24 @@ td.numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
 .bar-fill { display: block; height: 100%; background: var(--done); }
 .artifact-list { display: flex; flex-wrap: wrap; gap: 5px 6px; }
 .lookup-table .chip { margin: 0; padding: 2px 7px; font-size: .68rem; }
-.status-chip { display: inline-block; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-soft); color: var(--muted); font-family: var(--mono); font-size: .68rem; white-space: nowrap; }
-.status-chip[data-status="complete"] { border-color: var(--done); background: var(--done-soft); color: var(--done); }
-.status-chip[data-status="active"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
+.status-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-family: var(--mono); font-size: .68rem; white-space: nowrap; }
+.status-chip[data-status="complete"] { color: var(--done); }
+.status-chip:is([data-status="active"], [data-status="in-progress"]) { color: var(--info); }
+
+/** Status markers use the report's tone shapes: dot complete, diamond active, square invalid, triangle warning. */
+.status-chip::before, .chip-done::before, .chip-invalid::before, .spec-status::before, .picker-card[data-unready="true"] .picker-card-name::before {
+  content: "";
+  display: inline-block;
+  flex: none;
+  width: 8px;
+  height: 8px;
+  background: currentColor;
+}
+.status-chip::before { background: transparent; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; }
+.status-chip[data-status="complete"]::before, .chip-done::before, .spec-status::before { background: currentColor; border: 0; border-radius: 50%; }
+.status-chip:is([data-status="active"], [data-status="in-progress"])::before { background: currentColor; border: 0; border-radius: 0; transform: rotate(45deg) scale(.85); }
+.chip-invalid::before, .spec-status-invalid::before { border-radius: 0; }
+.picker-card[data-unready="true"] .picker-card-name::before { margin-right: 7px; background: var(--warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
 
 ul.plain { margin: 0; padding: 0; list-style: none; }
 ul.plain li { padding: 3px 0; border-bottom: 1px solid var(--border-soft); }
@@ -192,11 +137,12 @@ ul.plain li:last-child { border-bottom: 0; }
   border: 1px solid var(--border);
   background: var(--panel-soft);
 }
-.chip-done { background: var(--done-soft); border-color: var(--done); color: var(--done); }
-.chip-invalid { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
+.chip-done, .chip-invalid { display: inline-flex; align-items: center; gap: 5px; }
+.chip-done { color: var(--done); }
+.chip-invalid { color: var(--bad); }
 .toast {
   position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
-  background: var(--done); color: #0e1116; border-radius: 8px;
+  background: var(--done); color: var(--on-accent); border-radius: 8px;
   padding: 6px 14px; font-size: .8rem;
   opacity: 0; transition: opacity .16s; pointer-events: none; z-index: 20;
 }
@@ -204,27 +150,26 @@ ul.plain li:last-child { border-bottom: 0; }
 .toast-report { display: flex; gap: 10px; align-items: center; bottom: 64px; }
 .toast-report[data-shown="true"] { pointer-events: auto; }
 .toast-report a { color: inherit; font-weight: 700; text-decoration: underline; }
-.nav-badge { padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #0e1116; font-size: .6rem; font-weight: 750; text-transform: uppercase; }
+.nav-badge { padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .6rem; font-weight: 750; text-transform: uppercase; }
 .reports-layout { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 12px; min-height: 60vh; }
 .reports-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
 .reports-list button { width: 100%; padding: 8px 10px; text-align: left; font-size: .78rem; }
 .reports-list button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
 .reports-list .report-time { display: block; color: var(--muted); font-size: .66rem; }
 .reports-main { display: grid; grid-template-rows: auto 1fr; gap: 8px; }
-.reports-frame { width: 100%; height: 100%; min-height: 60vh; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
+.reports-frame { width: 100%; height: 100%; min-height: 60vh; border: 1px solid var(--border); border-radius: 8px; }
 
 .warnings { border-color: var(--warn); }
 .error { border-color: var(--bad); }
 
-.runway-step-badge { padding: 1px 5px; border: 1px solid var(--badge); background: var(--badge-soft); color: var(--badge); font-size: .62rem; font-style: normal; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
-.runway-step-badge-optional { --badge: var(--warn); --badge-soft: var(--warn-soft); }
-.runway-step-badge-skill { --badge: var(--what); --badge-soft: var(--what-soft); }
-.runway-step-badge-openspec { --badge: var(--accent); --badge-soft: var(--accent-soft); }
-.runway-step-badge-human-in-loop { --badge: var(--why); --badge-soft: var(--why-soft); }
+.runway-step-badge { padding: 1px 5px; border: 1px solid var(--badge); background: var(--badge-soft); color: var(--badge-text); font-size: .62rem; font-style: normal; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
+.runway-step-badge-optional { --badge: var(--warn); --badge-soft: var(--warn-soft); --badge-text: var(--warn); }
+.runway-step-badge-skill { --badge: var(--what); --badge-soft: var(--what-soft); --badge-text: var(--what); }
+.runway-step-badge-openspec { --badge: var(--accent); --badge-soft: var(--accent-soft); --badge-text: var(--text); }
+.runway-step-badge-human-in-loop { --badge: var(--why); --badge-soft: var(--why-soft); --badge-text: var(--why); }
+.runway-step-badge-human-review { --badge: var(--why); --badge-soft: var(--why-soft); --badge-text: var(--why); }
 .runway-step-copy { align-self: start; padding: 5px 8px; border-color: var(--border); background: transparent; color: var(--muted); font-size: .68rem; white-space: nowrap; }
 .runway-step-copy:hover { background: var(--accent-soft); color: var(--text); }
-.workflow-session-break { display: grid; grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr); align-items: center; gap: 10px; padding: 9px 0; color: var(--muted); font-family: var(--mono); font-size: .63rem; letter-spacing: .04em; text-align: center; }
-.workflow-session-break::before, .workflow-session-break::after { height: 1px; background: var(--border); content: ""; }
 
 /** The compact navigation rail keeps scope, navigation, and status visible together. */
 .studio-sidebar {
@@ -232,41 +177,47 @@ ul.plain li:last-child { border-bottom: 0; }
   top: 0;
   height: 100vh;
   min-width: 0;
-  padding: 22px 18px 24px;
-  gap: 26px;
+  padding: 18px 14px 16px;
+  gap: 18px;
   overflow-y: auto;
 }
 .sidebar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.sidebar-brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--bg-rail); font-size: .72rem; font-weight: 800; }
+.sidebar-brand-mark { display: block; flex: none; width: 30px; height: 30px; }
+.brand-symbol-color { display: none; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) .brand-symbol-color { display: block; }
+  :root:not([data-theme="dark"]) .brand-symbol-on-dark { display: none; }
+}
+:root[data-theme="light"] .brand-symbol-color { display: block; }
+:root[data-theme="light"] .brand-symbol-on-dark { display: none; }
 .sidebar-brand-copy { display: grid; gap: 1px; min-width: 0; }
 .sidebar-brand-copy strong { font-size: .9rem; letter-spacing: -.02em; }
-.sidebar-brand-copy span { color: var(--muted); font-size: .68rem; }
 .sidebar-label { color: var(--muted); font-size: .62rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
 .sidebar-scope { display: grid; gap: 7px; }
-.sidebar-scope select { padding: 8px 9px; font-family: var(--mono); font-size: .72rem; }
+.sidebar-scope select { padding: 8px 32px 8px 9px; font-family: var(--mono); font-size: .72rem; }
 .sidebar-nav { display: grid; gap: 3px; }
 .sidebar-nav-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
-.sidebar-nav button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; border-color: transparent; border-radius: 7px; background: transparent; font-size: .8rem; }
+.sidebar-nav button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 10px; border-color: transparent; border-radius: 7px; background: transparent; font-size: .8rem; }
 .sidebar-nav button:hover, .sidebar-nav button[aria-pressed="true"] { border-color: var(--border); background: var(--accent-soft); }
-.sidebar-nav button[aria-pressed="true"] { color: var(--accent); font-weight: 700; }
-.sidebar-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
-.sidebar-metric { display: grid; gap: 1px; padding: 8px 6px; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--panel-soft); }
-.sidebar-metric strong { font-size: .9rem; font-variant-numeric: tabular-nums; }
-.sidebar-metric span { color: var(--muted); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
+.sidebar-nav button[aria-pressed="true"] { color: var(--text); font-weight: 700; }
+/** The stats stack as one column: label left, number right, like the report's key-value rows. */
+.sidebar-metrics { display: grid; }
+.sidebar-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 2px; border-top: 1px solid var(--border); }
+.sidebar-metric:last-child { border-bottom: 1px solid var(--border); }
+.sidebar-metric strong { order: 1; font-size: .95rem; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.2; }
+.sidebar-metric span { color: var(--muted); font-size: .75rem; }
 .sidebar-footer { display: grid; gap: 6px; margin-top: auto; }
 .sidebar-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .sidebar-footer button { width: 100%; padding: 7px 8px; font-size: .72rem; }
 
 /** Specs uses the same full-bleed content treatment as Workflow. */
-.specs-eyebrow { color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
 .specs-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
 .specs-intro-copy { max-width: 54ch; }
 .specs-intro-copy p { margin: 0; color: var(--muted); }
-.specs-summary { display: grid; grid-template-columns: repeat(3, minmax(84px, 1fr)); min-width: 290px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
-.specs-summary-item { display: grid; gap: 1px; padding: 12px 10px; border-right: 1px solid var(--border); }
-.specs-summary-item:last-child { border-right: 0; }
-.specs-summary-item strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
-.specs-summary-item span { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
+.specs-summary { display: grid; grid-template-columns: repeat(3, minmax(84px, 1fr)); gap: 20px; min-width: 290px; }
+.specs-summary-item { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--border); }
+.specs-summary-item strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.2; }
+.specs-summary-item span { color: var(--muted); font-size: .8rem; }
 .picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 12px; }
 .picker-card { display: grid; align-content: start; gap: 5px; padding: 16px; }
 .picker-card[data-unready="true"] { border-color: var(--warn); }
@@ -275,33 +226,26 @@ ul.plain li:last-child { border-bottom: 0; }
 .picker-card-meta { display: flex; flex-wrap: wrap; margin-top: 5px; }
 
 .specs-area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
-.specs-area-card { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
-.specs-area-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 58px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
-.specs-area-number { color: var(--muted); font-family: var(--mono); font-size: .68rem; }
-.specs-area-name { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
-.specs-area-name h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.specs-area-card { padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
+.specs-area-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
+.specs-area-name { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .specs-area-count { color: var(--muted); font-family: var(--mono); font-size: .7rem; white-space: nowrap; }
 .specs-card-list { display: grid; gap: 7px; margin-top: 14px; }
 .spec-card-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
 .spec-card-row:last-child { border-bottom: 0; padding-bottom: 0; }
 .spec-card-row:first-child { padding-top: 0; }
-.spec-card-row strong { overflow: hidden; font-family: var(--mono); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
+.spec-card-row > div { min-width: 0; }
+/** Long capability names wrap at their hyphens instead of running under the actions. */
+.spec-card-row strong { display: block; font-family: var(--mono); font-size: .78rem; line-height: 1.35; overflow-wrap: anywhere; }
 .spec-card-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .7rem; }
 .spec-card-end { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
 .spec-copy { display: inline-flex; align-items: center; align-self: center; padding: 4px 6px; }
 .spec-actions { display: inline-flex; gap: 6px; }
 .spec-action { padding: 3px 7px; font-size: .68rem; }
 html[data-agent-viewed] [data-studio-action] { display: none; }
-.spec-status { padding: 2px 5px; border: 1px solid var(--done); background: var(--done-soft); color: var(--done); font-family: var(--mono); font-size: .61rem; text-transform: uppercase; }
-.spec-status-invalid { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
+.spec-status { display: inline-flex; align-items: center; gap: 6px; color: var(--done); font-family: var(--mono); font-size: .61rem; text-transform: uppercase; }
+.spec-status-invalid { color: var(--bad); }
 
-.skills-tab-list { display: flex; gap: 5px; border-bottom: 1px solid var(--border); }
-.skills-tab-list button { display: grid; gap: 3px; min-width: 150px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); }
-.skills-tab-list button:hover { background: var(--accent-soft); }
-.skills-tab-list button[aria-selected="true"] { border-bottom-color: var(--accent); background: var(--panel-soft); color: var(--text); }
-.skills-tab-list button strong { font-family: var(--mono); font-size: .74rem; text-align: left; }
-.skills-tab-list button span { font-size: .68rem; text-align: left; }
-.skills-panels { padding-top: 18px; }
 .skills-panels > [data-active="false"] { display: none; }
 .skills-panel-description { margin: 0 0 16px; color: var(--muted); font-size: .8rem; }
 .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
@@ -314,63 +258,110 @@ html[data-agent-viewed] [data-studio-action] { display: none; }
   .page-header { display: grid; gap: 18px; }
   .page-context { min-width: 0; max-width: none; }
   .section-header { gap: 10px; }
-  .skills-tab-list button { min-width: 0; flex: 1; }
 }
 
 @media (min-width: 901px) {
-  .shell:has(.studio-sidebar) { grid-template-columns: 260px minmax(0, 1fr); }
+  .shell:has(.studio-sidebar) { grid-template-columns: 224px minmax(0, 1fr); }
 }
 @media (max-width: 900px) {
   .studio-sidebar { position: relative; height: auto; max-height: none; }
 }
 
-/** Production Workflow transcript. */
+/** Production Workflow Delivery Path. */
 .workflow-view { margin: 0 auto; }
-.workflow-eyebrow { margin: 0 0 10px; color: var(--muted); font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
-.workflow-console { width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: none; }
-.workflow-console-header { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--panel-soft); color: var(--muted); font-family: system-ui, sans-serif; font-size: .68rem; }
-.workflow-console-header-title { display: grid; gap: 2px; }
-.workflow-console-header-title > span { color: var(--accent); font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
-.workflow-console-header-title strong { color: var(--text); font-size: .84rem; }
-.workflow-console-header > span:last-child { text-align: right; }
-.workflow-console-body { padding: 22px clamp(14px, 3vw, 34px) 26px; }
-.workflow-console-context { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; align-items: start; margin: 4px 0 18px 55px; padding: 11px 0 15px; border-bottom: 1px solid var(--border); }
-.workflow-console-context > span { color: var(--why); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; }
-.workflow-console-context > div { display: grid; gap: 3px; }
-.workflow-console-context p { margin: 0; color: var(--text); font-family: system-ui, sans-serif; font-size: .72rem; line-height: 1.35; }
-.workflow-console-context small { color: var(--muted); font-family: system-ui, sans-serif; font-size: .68rem; line-height: 1.35; }
-.workflow-console-tabs { display: flex; gap: 5px; margin-left: 55px; border-bottom: 1px solid var(--border); }
-.workflow-console-tabs button { display: grid; gap: 3px; min-width: 150px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); }
-.workflow-console-tabs button:hover { background: var(--panel); }
-.workflow-console-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); background: var(--panel); color: var(--text); }
-.workflow-console-tabs button strong { font-family: var(--mono); font-size: .72rem; text-align: left; }
-.workflow-console-tabs button small { font-size: .65rem; text-align: left; }
-.workflow-console-panels { margin-left: 20px; padding-left: 35px; border-left: 1px dashed var(--border); }
-.workflow-console-panels > [data-active="false"] { display: none; }
-.workflow-console-branch-rule { display: grid; gap: 4px; padding: 16px 0 6px; }
-.workflow-console-branch-rule-description { max-width: 70ch; margin: 0; color: var(--muted); font-family: system-ui, sans-serif; font-size: .73rem; line-height: 1.4; }
-.workflow-console-line { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding: 12px 0; }
-.workflow-console-gutter { color: var(--muted); font-family: var(--mono); font-size: .66rem; opacity: .7; }
-.workflow-console-line-body { min-width: 0; }
-.workflow-console-step-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
-.workflow-console-step-title strong { color: var(--text); font-family: var(--mono); font-size: .71rem; }
-.workflow-console-command { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--panel-soft); }
-.workflow-console-command-label { color: var(--accent); font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
-.workflow-console-command code { color: var(--text); font-family: var(--mono); font-size: .78rem; overflow-wrap: anywhere; }
-.workflow-console-command .runway-step-copy { border-color: var(--border); }
-.workflow-console-explanation { display: grid; gap: 6px; margin-top: 10px; }
-.workflow-console-detail { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: baseline; }
-.workflow-console-detail > span { color: var(--muted); font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
+.workflow-delivery-path { width: 100%; color: var(--text); }
+.workflow-schema-panels > [data-active="false"] { display: none; }
+.view-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-family: var(--mono); font-size: .66rem; }
+.view-choice select { width: auto; max-width: 100%; padding: 6px 32px 6px 10px; border: 1px solid var(--border); border-radius: 6px; background-color: var(--panel-soft); color: var(--text); font: inherit; font-size: .74rem; }
+.view-choice select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.view-choice code { color: var(--text); font-size: .74rem; }
+.workflow-description { max-width: 70ch; margin: 0; color: var(--muted); font-family: system-ui, sans-serif; font-size: .73rem; line-height: 1.4; }
+.workflow-command { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 6px 6px 10px; border-radius: 6px; background: var(--panel-soft); }
+.workflow-command-label { color: var(--muted); font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.workflow-command code { color: var(--text); font-family: var(--mono); font-size: .78rem; overflow-wrap: anywhere; }
+.workflow-command .runway-step-copy { align-self: center; border-color: var(--border-soft); }
 .workflow-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
 .workflow-badges .runway-step-badge { font-size: .56rem; }
-.workflow-console-explanation p, .workflow-console-explanation small { margin: 0; color: var(--muted); font-family: system-ui, sans-serif; font-size: .73rem; line-height: 1.4; }
-.workflow-console-explanation p { color: var(--text); }
-.workflow-console-divider { display: flex; align-items: center; gap: 12px; padding: 16px 0 4px 55px; color: var(--accent); font-family: var(--mono); font-size: .63rem; text-transform: uppercase; }
-.workflow-console-divider::after { flex: 1; height: 1px; background: var(--border); content: ""; }
-.workflow-option-list { display: grid; gap: 3px; margin: 8px 0 0 18px; }
-.workflow-option { display: grid; gap: 1px; padding-left: 8px; }
-.workflow-option small { color: var(--muted); font-size: .65rem; line-height: 1.35; }
+.workflow-graph-openspec { display: inline-block; flex: none; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
+.workflow-graph-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 0; color: var(--muted); font-family: var(--mono); font-size: .62rem; list-style: none; }
+.workflow-graph-legend li { display: inline-flex; align-items: center; gap: 6px; }
+.workflow-graph-legend .workflow-graph-openspec { margin-right: 0; }
+.workflow-legend-optional { width: 14px; height: 9px; border: 1px dashed var(--muted); border-radius: 3px; }
+.workflow-legend-session { width: 7px; height: 7px; border: 1.5px solid var(--accent); border-radius: 50%; }
+.workflow-legend-skip { width: 16px; border-top: 1.5px dotted var(--muted); }
+/** The graph is centred with the stage panel beside it when wide enough, above it otherwise. */
+.workflow-schema { container-type: inline-size; }
+.workflow-path { display: grid; gap: 24px; padding-top: 56px; }
+/** Room outside the graph for its workset frame. */
+.workflow-path-graph { display: grid; justify-items: center; gap: 36px; min-width: 0; }
+.workflow-path-graph > .workflow-graph { width: min(100% - 64px, 440px); }
+/** The one card on the view: the selected stage, or the path overview. */
+.workflow-detail { min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
+@container (min-width: 760px) {
+  /* Graph and card sit together at the left; 504px holds the graph and its workset frame. */
+  .workflow-path { grid-template-columns: minmax(0, 504px) minmax(300px, 420px); justify-content: start; gap: 40px; align-items: start; }
+  /* Top-aligned with the workset frame, which rises 34px above the graph. */
+  .workflow-detail { position: sticky; top: 16px; margin-top: -34px; }
+}
+/** Only the targeted card shows; with none targeted the overview does. */
+.workflow-detail .workflow-card { display: none; }
+.workflow-detail:has(.workflow-card:target) .workflow-detail-overview { display: none; }
+/** Rows are equal and lanes 2fr with a 1fr bypass lane, matching the SVG drawing units. */
+.workflow-graph { --graph-gutter: 3.75rem; position: relative; padding-left: var(--graph-gutter); }
+.workflow-graph-bands { position: absolute; inset: 0; }
+.workflow-graph-band { position: absolute; right: 0; left: 0; padding-top: 7px; color: var(--muted); font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+/** The workset: the changes published together, framed around the per-change cycle and Publish. */
+.workflow-graph-workset { position: absolute; inset: -34px -30px -16px; border: 1px solid var(--muted); border-radius: 16px; }
+.workflow-graph-workset span { position: absolute; top: -8px; left: 16px; padding: 0 6px; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .06em; }
+/** The stages each change repeats, framed like a fieldset; Publish stays outside. */
+.workflow-graph-cycle { position: absolute; right: -14px; left: -14px; box-sizing: content-box; margin-top: -14px; padding-top: 14px; border: 1px dashed var(--why); border-radius: 12px; }
+.workflow-graph-cycle span { position: absolute; top: -8px; right: 14px; padding: 0 6px; background: var(--bg); color: var(--why); font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .06em; }
+.workflow-graph-layer { position: absolute; top: 0; left: var(--graph-gutter); width: calc(100% - var(--graph-gutter)); height: 100%; overflow: visible; pointer-events: none; }
+.workflow-graph-edge { fill: none; stroke: var(--muted); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
+.workflow-graph-edge[data-edge-kind="bypass"] { stroke-dasharray: 3 4; }
+.workflow-graph-edge[data-new-session="true"] { stroke: var(--accent); }
+.workflow-graph-start { fill: var(--muted); }
+.workflow-graph-session { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; }
+.workflow-graph-nodes { position: relative; display: grid; grid-template-columns: repeat(var(--graph-rows), minmax(0, 2fr)) minmax(0, 1fr); grid-template-rows: repeat(var(--graph-columns), minmax(3.5rem, 1fr)); margin: 0; padding: 0; list-style: none; }
+.workflow-graph-node { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 8px 4px; grid-row: var(--graph-row); grid-column: var(--graph-lane) / span var(--graph-span); }
+.workflow-graph-box { max-width: 100%; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
+.workflow-graph-link { display: block; color: var(--text); font-family: var(--mono); font-size: .7rem; line-height: 1.3; text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: border-color .15s, background .15s; }
+.workflow-graph-box[data-optional="true"] { border-style: dashed; border-color: var(--muted); }
+.workflow-graph-group { display: grid; gap: 3px; padding: 6px 8px; border-color: var(--why); }
+.workflow-graph-group-label { color: var(--why); font-family: var(--mono); font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
+.workflow-graph-group ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin: 0; padding: 0; list-style: none; }
+.workflow-graph-group .workflow-graph-link { padding: 1px 4px; border-radius: 4px; color: var(--why); }
+.workflow-graph-link:hover, .workflow-graph-link:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
+.workflow-graph-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.workflow-graph-link[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
+/** Flat stage block: the badges carry optional and human review; the graph carries the shape. */
+.workflow-missing-skill { margin: 8px 0 0; color: var(--warn); font-family: system-ui, sans-serif; font-size: .7rem; }
+.workflow-detail-overview { display: grid; gap: 8px; }
+.workflow-detail-hint { margin: 0; color: var(--text); font-family: system-ui, sans-serif; font-size: .78rem; line-height: 1.5; }
+/** Selected stage: header, action, purpose, footer, on one 16px rhythm. */
+.workflow-card { min-width: 0; scroll-margin-top: 16px; }
+.workflow-detail .workflow-card:target { display: grid; gap: 16px; }
+.workflow-card-header { display: grid; gap: 6px; }
+.workflow-card-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
+.workflow-card-heading h3 { margin: 0; color: var(--text); font-family: var(--mono); font-size: .9rem; font-weight: 700; }
+.workflow-card-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; color: var(--muted); font-family: var(--mono); font-size: .66rem; }
+.workflow-card-meta code { font-family: inherit; font-size: inherit; }
+/** In the panel a prompt gets its own line under its label and copy control. */
+.workflow-detail .workflow-command { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 8px 8px 10px 10px; }
+.workflow-detail .workflow-command code { grid-column: 1 / -1; grid-row: 2; font-size: .76rem; line-height: 1.45; overflow-wrap: break-word; }
+.workflow-card-session { color: var(--accent); }
+.workflow-card-human { margin: 0; padding: 9px 10px; border-radius: 6px; background: var(--panel-soft); color: var(--muted); font-family: system-ui, sans-serif; font-size: .74rem; line-height: 1.45; }
+.workflow-card-explanation { display: grid; gap: 12px; margin: 0; }
+.workflow-card-explanation dt { margin-bottom: 3px; color: var(--muted); font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+.workflow-card-explanation dd { margin: 0; color: var(--text); font-family: system-ui, sans-serif; font-size: .78rem; line-height: 1.5; }
+.workflow-card-explanation div + div dd { color: var(--muted); }
+.workflow-card-footer { padding-top: 12px; border-top: 1px solid var(--border-soft); }
+.workflow-card-footer a { color: var(--muted); font-size: .72rem; text-underline-offset: 3px; }
+.workflow-card-footer a:hover { color: var(--text); }
+.workflow-option-list { display: grid; gap: 12px; }
+.workflow-option { display: grid; }
 .workflow-option .runway-step-copy { justify-self: start; }
+.workflow-option small { margin-top: 5px; padding: 0 2px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
 
 .vault-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
 :root[data-vault-tree="hidden"] .vault-layout { grid-template-columns: minmax(0, 1fr); }
@@ -397,7 +388,7 @@ html[data-agent-viewed] [data-studio-action] { display: none; }
 .vault-file { display: flex; text-decoration: none; align-items: center; gap: 6px; width: 100%; overflow: hidden; padding: 4px 6px 4px 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: .8rem; text-align: left; white-space: nowrap; }
 .vault-file span, .vault-directory > summary span { overflow: hidden; text-overflow: ellipsis; }
 .vault-file:hover { background: var(--accent-soft); }
-.vault-file[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
+.vault-file[aria-current="page"] { background: var(--accent-soft); color: var(--text); font-weight: 600; }
 .vault-bar { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 12px; }
 .vault-tree-toggle { flex: none; padding: 5px 10px; font-size: .78rem; }
 .vault-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
@@ -419,24 +410,44 @@ html[data-agent-viewed] [data-studio-action] { display: none; }
 #vault-editor { display: block; width: 100%; min-height: 62vh; resize: vertical; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--prompt-bg); color: var(--prompt-text); font-family: var(--mono); font-size: .86rem; line-height: 1.6; }
 #vault-editor:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
 #vault-editor[readonly] { cursor: default; opacity: .85; }
+.vault-actions { display: flex; align-items: center; gap: 8px; }
+.vault-mode-link { display: inline-block; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: inherit; font: inherit; text-decoration: none; }
+.vault-mode-link:hover { background: var(--panel-soft); color: var(--accent); }
+.markdown-body { padding: 4px 2px; line-height: 1.65; overflow-wrap: anywhere; }
+.markdown-body > :first-child { margin-top: 0; }
+.markdown-body h1, .markdown-body h2 { padding-bottom: .3em; border-bottom: 1px solid var(--border); }
+.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 1.4em 0 .6em; line-height: 1.25; }
+.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body pre, .markdown-body .md-table { margin: 0 0 1em; }
+.markdown-body ul, .markdown-body ol { padding-left: 2em; }
+.markdown-body li > ul, .markdown-body li > ol { margin: .25em 0 0; }
+.markdown-body li.md-task { list-style: none; margin-left: -1.4em; }
+.markdown-body li.md-task input { margin: 0 .5em 0 0; vertical-align: middle; }
+.markdown-body blockquote { padding: 0 1em; border-left: .25em solid var(--border); color: var(--muted); }
+.markdown-body code { padding: .15em .35em; border-radius: 6px; background: var(--panel-soft); font-family: var(--mono); font-size: .86em; }
+.markdown-body pre { overflow: auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; line-height: 1.5; }
+.markdown-body pre code { padding: 0; background: transparent; font-size: .84rem; }
+.markdown-body hr { height: 1px; margin: 1.5em 0; border: 0; background: var(--border); }
+.markdown-body .md-table { overflow-x: auto; }
+.markdown-body table { border-collapse: collapse; }
+.markdown-body th, .markdown-body td { padding: 6px 13px; border: 1px solid var(--border); }
+.markdown-body th { background: var(--panel-soft); }
+.markdown-body .md-raw { color: var(--muted); font-family: var(--mono); font-size: .86rem; white-space: pre-wrap; }
+.markdown-body pre.md-fence { background: var(--panel-soft); color: var(--text); }
+.md-fence .th-comment, .md-fence .th-meta { color: var(--muted); }
+.md-fence .th-keyword, .md-fence .th-operator, .md-fence .th-command { color: var(--info); }
+.md-fence .th-string, .md-fence .th-inserted { color: var(--done); }
+.md-fence .th-number, .md-fence .th-literal, .md-fence .th-attr { color: var(--warn); }
+.md-fence .th-function, .md-fence .th-type, .md-fence .th-tag, .md-fence .th-property, .md-fence .th-selector, .md-fence .th-heading { color: var(--accent); }
+.md-fence .th-deleted { color: var(--bad); }
 .vault-incoming { display: grid; gap: 8px; margin-top: 16px; padding: 12px; border: 1px solid var(--warn); border-radius: 8px; background: var(--warn-soft); }
 .vault-incoming pre { max-height: 220px; overflow: auto; margin: 0; white-space: pre-wrap; font-family: var(--mono); font-size: .78rem; }
 @media (max-width: 800px) { .vault-layout { grid-template-columns: 1fr; } .vault-tree-panel { position: static; max-height: 50vh; } }
 
 @media (max-width: 650px) {
-  .workflow-console-header { grid-template-columns: 1fr auto; }
-  .workflow-console-context, .workflow-console-tabs { margin-left: 0; }
-  .workflow-console-context { grid-template-columns: minmax(0, 1fr); }
-  .workflow-console-context > span { margin-bottom: 2px; }
-  .workflow-console-tabs button { min-width: 0; flex: 1; padding-right: 8px; padding-left: 8px; }
-  .workflow-console-panels { margin-left: 0; padding-left: 10px; }
-  .workflow-console-command { grid-template-columns: auto minmax(0, 1fr); }
-  .workflow-console-command .runway-step-copy { grid-column: 2; justify-self: start; }
-  .workflow-console-divider, .workflow-console .workflow-session-break { padding-left: 0; margin-left: 0; }
-}
+        }
 
 @media (max-width: 760px) {
-  .lookup-panel .scroll { overflow: visible; }
+  .lookup-view .scroll { overflow: visible; }
   .lookup-table { display: block; }
   .lookup-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
   .lookup-table tbody { display: grid; gap: 0; }
@@ -490,8 +501,8 @@ html[data-agent-viewed] [data-studio-action] { display: none; }
 .terminal-drawer-open { display: none; }
 
 @media (min-width: 1201px) {
-  .shell[data-terminal] { grid-template-columns: 260px minmax(0, 1fr) clamp(360px, var(--terminal-width, min(560px, 40vw)), 70vw); }
-  :root[data-terminal-collapsed] .shell[data-terminal] { grid-template-columns: 260px minmax(0, 1fr) var(--terminal-strip, 44px); }
+  .shell[data-terminal] { grid-template-columns: 224px minmax(0, 1fr) clamp(360px, var(--terminal-width, min(560px, 40vw)), 70vw); }
+  :root[data-terminal-collapsed] .shell[data-terminal] { grid-template-columns: 224px minmax(0, 1fr) var(--terminal-strip, 44px); }
   :root[data-terminal-collapsed] .shell[data-terminal] .terminal-body,
   :root[data-terminal-collapsed] .shell[data-terminal] .terminal-resize { display: none; }
   :root[data-terminal-collapsed] .shell[data-terminal] .terminal-strip { display: flex; }
@@ -506,7 +517,7 @@ html[data-agent-viewed] [data-studio-action] { display: none; }
     width: min(92vw, clamp(360px, var(--terminal-width, min(560px, 40vw)), 70vw));
     height: 100vh;
     z-index: 30;
-    box-shadow: var(--shadow);
+    box-shadow: var(--drawer-shadow);
     transform: translateX(100%);
     visibility: hidden;
     transition: transform .2s, visibility .2s;
@@ -514,6 +525,6 @@ html[data-agent-viewed] [data-studio-action] { display: none; }
   .shell[data-terminal] .terminal-sidebar[data-drawer-open] { transform: none; visibility: visible; }
   .shell[data-terminal] #terminal-collapse { display: none; }
   .shell[data-terminal] #terminal-drawer-close { display: grid; }
-  .terminal-drawer-open { display: block; position: fixed; right: 18px; bottom: 18px; z-index: 25; box-shadow: var(--shadow); }
+  .terminal-drawer-open { display: block; position: fixed; right: 18px; bottom: 18px; z-index: 25; box-shadow: var(--drawer-shadow); }
 }
 `;