@starlove/orbit 1.0.7 → 1.1.1

package/public/styles.css

@@ -80,6 +80,9 @@ input[type="file"] {
   --scrollbar-thumb: rgba(var(--accent-rgb),0.45);
   --scrollbar-thumb-hover: rgba(var(--accent-rgb),0.65);
   --scrollbar-track: transparent;
+  /* Default text-control interior spacing; component-specific fields override this. */
+  --field-padding-y: 0.62rem;
+  --field-padding-x: 0.8rem;
   /* RGB channels — use as rgba(var(--name), alpha) for arbitrary-opacity tints */
   --paper-rgb: 255, 252, 246;        /* warm cream paper — light-mode surface/inset base */
   --warmth-rgb: 53, 43, 28;          /* warm parchment brown — light-mode shadow tint */
@@ -97,7 +100,7 @@ input[type="file"] {
   --indigo-rgb: 139, 92, 246;        /* dark-mode epic gradient tint 2 / orbit-accent-2 */
   --coral-rgb: 248, 113, 113;        /* dark-mode bug card bezel (brighter than --red-rgb) */
   /* Native <select> chevron: same horizontal inset for value text (left) and glyph (right). */
-  --select-chevron-pad-x: 0.55rem;
+  --select-chevron-pad-x: var(--field-padding-x);
   --select-chevron-size: 12px;
 }
 
@@ -255,6 +258,24 @@ textarea {
   outline: none;
 }
 
+input:not([type]),
+input[type="date"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+select,
+textarea {
+  padding: var(--field-padding-y) var(--field-padding-x);
+}
+
 input:focus,
 select:focus,
 textarea:focus {
@@ -654,7 +675,7 @@ h1 {
 
 .menu-flyout-form input {
   width: 100%;
-  padding: 0.42rem 0.55rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   border: 1px solid var(--line);
   border-radius: 8px;
   font: inherit;
@@ -953,7 +974,7 @@ h1 {
 .create-flyout-form input[type="text"],
 .create-flyout-form textarea {
   width: 100%;
-  padding: 0.62rem 0.8rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   border: 1px solid var(--line);
   border-radius: 10px;
   font: inherit;
@@ -963,7 +984,7 @@ h1 {
 
 .create-flyout-form select.select-chevron-field {
   width: 100%;
-  padding: 0.62rem var(--select-chevron-pad-x);
+  padding: var(--field-padding-y) var(--select-chevron-pad-x);
   padding-right: calc(var(--select-chevron-pad-x) * 2 + var(--select-chevron-size));
   border: 1px solid var(--line);
   border-radius: 10px;
@@ -1043,7 +1064,7 @@ h1 {
 
 .topbar-search input {
   width: 100%;
-  padding: 0.42rem 0.65rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   border: 1px solid var(--line);
   border-radius: 10px;
   background: var(--surface-input);
@@ -1063,7 +1084,7 @@ h1 {
 .drawer-composer textarea,
 .composer input,
 .composer textarea {
-  padding: 0.82rem 0.95rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
 }
 
 .drawer-composer textarea,
@@ -1080,11 +1101,11 @@ h1 {
 
 .composer-row select,
 .composer-row input {
-  padding: 0.7rem 0.8rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
 }
 
 .composer-row select.select-chevron-field {
-  padding: 0.7rem var(--select-chevron-pad-x);
+  padding: var(--field-padding-y) var(--select-chevron-pad-x);
   padding-right: calc(var(--select-chevron-pad-x) * 2 + var(--select-chevron-size));
 }
 
@@ -1103,11 +1124,45 @@ h1 {
 }
 
 .search-hit {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
   padding: 0.85rem;
   border-bottom: 1px solid var(--line);
   cursor: url('cursors/live_link.cur'), pointer;
 }
 
+.search-hit-main {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 0.35rem;
+  align-items: baseline;
+}
+
+.search-hit-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-hit-state {
+  flex: 0 0 auto;
+  margin-left: auto;
+  padding: 0.1rem 0.5rem;
+  border: 1px solid rgba(96, 165, 250, 0.28);
+  border-radius: 999px;
+  color: #3657c8;
+  background-color: rgba(96, 165, 250, 0.12);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1.35;
+  white-space: nowrap;
+}
+
 .search-hit:hover {
   background: var(--accent-hover);
 }
@@ -1649,6 +1704,120 @@ h1 {
   outline-offset: -1px;
 }
 
+.card-action-menu {
+  position: fixed;
+  z-index: 1200;
+  min-width: 13rem;
+  max-height: calc(100vh - 16px);
+  overflow: visible;
+  color: var(--orbit-text);
+  background: rgba(var(--paper-rgb), 0.98);
+  border: 1px solid rgba(var(--warmth-rgb), 0.14);
+  border-radius: 14px;
+  box-shadow: 0 18px 48px rgba(var(--warmth-rgb), 0.2), 0 4px 14px rgba(0, 0, 0, 0.12);
+  padding: 0.35rem;
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+.card-action-menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.card-action-menu-item {
+  position: relative;
+}
+
+.card-action-button {
+  width: 100%;
+  min-width: 11.5rem;
+  display: grid;
+  grid-template-columns: 1.2rem 1fr auto;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.52rem 0.58rem;
+  border: 0;
+  border-radius: 10px;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-size: 0.88rem;
+  text-align: left;
+  cursor: url('cursors/live_link.cur'), pointer;
+}
+
+.card-action-menu-item.has-submenu > .card-action-button {
+  grid-template-columns: 1fr auto;
+}
+
+.card-action-button:hover,
+.card-action-button:focus-visible,
+.card-action-menu-item.is-open > .card-action-button {
+  outline: none;
+  background: rgba(var(--accent-rgb), 0.12);
+}
+
+.card-action-button:disabled {
+  cursor: default;
+  color: var(--orbit-text-muted);
+  opacity: 0.82;
+}
+
+.card-action-check,
+.card-action-arrow {
+  color: var(--orbit-text-muted);
+}
+
+.card-action-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-action-menu-item.is-danger > .card-action-button {
+  color: #b42318;
+}
+
+.card-action-menu-item.is-danger > .card-action-button:hover,
+.card-action-menu-item.is-danger > .card-action-button:focus-visible {
+  background: rgba(var(--red-rgb), 0.12);
+}
+
+.card-action-submenu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1201;
+  display: none;
+  min-width: 12rem;
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
+  padding: 0.35rem;
+  border: 1px solid rgba(var(--warmth-rgb), 0.14);
+  border-radius: 14px;
+  background: rgba(var(--paper-rgb), 0.98);
+  box-shadow: 0 18px 48px rgba(var(--warmth-rgb), 0.18), 0 4px 14px rgba(0, 0, 0, 0.12);
+}
+
+.card-action-submenu.is-open {
+  display: block;
+}
+
+[data-theme="dark"] .card-action-menu,
+[data-theme="dark"] .card-action-submenu {
+  color: var(--starlight);
+  background: rgba(var(--cosmos-rgb), 0.96);
+  border-color: rgba(var(--starlight-rgb), 0.16);
+  box-shadow: 0 18px 48px rgba(var(--void-rgb), 0.55), 0 0 0 1px rgba(var(--starlight-rgb), 0.04);
+}
+
+[data-theme="dark"] .card-action-menu-item.is-danger > .card-action-button {
+  color: #fca5a5;
+}
+
 /* Dark card glass — starscape palette. Hover uses filter+drop-shadow only
    so per-type bezels survive. Selected uses outline so bezel box-shadow stays intact. */
 [data-theme="dark"] .card {
@@ -2223,6 +2392,7 @@ h1 {
    the second line of cards in the lanes for visual consistency. */
 .drawer-subtitle {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.55rem;
   margin-top: 0.45rem;
@@ -2241,6 +2411,280 @@ h1 {
   font-variant-numeric: tabular-nums;
 }
 
+.detail-meta-badge-row {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: 0.42rem;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.detail-meta-badge {
+  --badge-ring: rgba(var(--starlight-rgb), 0.2);
+  flex: 0 1 auto;
+  max-width: min(12rem, 100%);
+  min-width: 0;
+  min-height: 1.85rem;
+  margin: 0;
+  padding: 0.28rem 1.55rem 0.28rem 0.62rem;
+  border: 1px solid var(--badge-ring);
+  border-radius: 999px;
+  color: var(--orbit-text-muted);
+  background-color: rgba(var(--starlight-rgb), 0.08);
+  font: inherit;
+  font-size: 0.68rem;
+  font-weight: 900;
+  letter-spacing: 0.055em;
+  line-height: 1;
+  text-transform: uppercase;
+  cursor: url('cursors/live_link.cur'), pointer;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 20px rgba(12, 18, 26, 0.06);
+  transition:
+    transform 140ms ease,
+    background-color 140ms ease,
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    color 140ms ease;
+}
+
+select.detail-meta-badge {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 0.48rem center;
+  background-size: 0.78rem 0.78rem;
+}
+
+select.detail-meta-badge::-ms-expand {
+  display: none;
+}
+
+.detail-meta-badge:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: rgba(var(--starlight-rgb), 0.36);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(12, 18, 26, 0.1);
+}
+
+.detail-meta-badge:focus {
+  outline: none;
+  border-color: var(--accent-focus-border);
+  box-shadow: var(--accent-ring), inset 0 1px 0 rgba(255, 255, 255, 0.28);
+}
+
+.detail-state-badge {
+  width: clamp(7.25rem, 28vw, 9.75rem);
+  color: #3657c8;
+  background-color: rgba(96, 165, 250, 0.12);
+  border-color: rgba(96, 165, 250, 0.28);
+}
+
+.detail-type-badge {
+  width: 7rem;
+}
+
+.detail-priority-badge {
+  width: 6.55rem;
+}
+
+.detail-state-badge.state-pill-ai-ready,
+.search-hit-state.state-pill-ai-ready,
+.detail-card-state.state-pill-ai-ready {
+  color: #7c3aed;
+  background-color: rgba(var(--purple-rgb), 0.12);
+  border-color: rgba(var(--purple-rgb), 0.28);
+}
+
+.detail-state-badge.state-pill-in-progress,
+.search-hit-state.state-pill-in-progress,
+.detail-card-state.state-pill-in-progress {
+  color: #0369a1;
+  background-color: rgba(14, 165, 233, 0.13);
+  border-color: rgba(14, 165, 233, 0.28);
+}
+
+.detail-state-badge.state-pill-review,
+.search-hit-state.state-pill-review,
+.detail-card-state.state-pill-review {
+  color: #a4550f;
+  background-color: rgba(var(--amber-rgb), 0.16);
+  border-color: rgba(var(--amber-rgb), 0.32);
+}
+
+.detail-state-badge.state-pill-done,
+.search-hit-state.state-pill-done,
+.detail-card-state.state-pill-done {
+  color: #1e6f5c;
+  background-color: rgba(var(--accent-rgb), 0.14);
+  border-color: rgba(var(--accent-rgb), 0.28);
+}
+
+.detail-type-badge.type-pill-epic {
+  color: #8b5cf6;
+  background-color: rgba(var(--purple-rgb),0.12);
+  border-color: rgba(var(--purple-rgb),0.28);
+}
+
+.detail-type-badge.type-pill-feature {
+  color: #15803d;
+  background-color: rgba(74, 222, 128, 0.12);
+  border-color: rgba(74, 222, 128, 0.26);
+}
+
+.detail-type-badge.type-pill-task {
+  color: #2563eb;
+  background-color: rgba(96, 165, 250, 0.12);
+  border-color: rgba(96, 165, 250, 0.26);
+}
+
+.detail-type-badge.type-pill-bug {
+  color: #dc2626;
+  background-color: rgba(var(--coral-rgb),0.13);
+  border-color: rgba(var(--coral-rgb),0.3);
+}
+
+.detail-priority-badge.priority-pill-maybe,
+.detail-priority-badge.priority-pill-low,
+.detail-priority-badge.priority-pill-med,
+.detail-priority-badge.priority-pill-high,
+.detail-priority-badge.priority-pill-urgent {
+  border-color: currentColor;
+}
+
+.detail-priority-badge.priority-pill-maybe {
+  color: #6b7280;
+  background-color: rgba(100, 116, 139, 0.14);
+}
+
+.detail-priority-badge.priority-pill-low {
+  color: #1e6f5c;
+  background-color: rgba(var(--accent-rgb), 0.14);
+}
+
+.detail-priority-badge.priority-pill-med {
+  color: #a4550f;
+  background-color: rgba(var(--amber-rgb), 0.16);
+}
+
+.detail-priority-badge.priority-pill-high {
+  color: #b53a1a;
+  background-color: rgba(214, 86, 46, 0.2);
+}
+
+.detail-priority-badge.priority-pill-urgent {
+  color: #fff;
+  background-color: #b91c1c;
+}
+
+[data-theme="dark"] select.detail-meta-badge {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4d3ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 0.48rem center;
+  background-size: 0.78rem 0.78rem;
+}
+
+[data-theme="dark"] .detail-meta-badge {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme="dark"] .detail-state-badge,
+[data-theme="dark"] .search-hit-state,
+[data-theme="dark"] .detail-card-state {
+  color: #93c5fd;
+  background-color: rgba(96, 165, 250, 0.15);
+  border-color: rgba(147, 197, 253, 0.3);
+}
+
+[data-theme="dark"] .detail-state-badge.state-pill-ai-ready,
+[data-theme="dark"] .search-hit-state.state-pill-ai-ready,
+[data-theme="dark"] .detail-card-state.state-pill-ai-ready {
+  color: #c084fc;
+  background-color: rgba(var(--purple-rgb), 0.16);
+  border-color: rgba(var(--purple-rgb), 0.35);
+}
+
+[data-theme="dark"] .detail-state-badge.state-pill-in-progress,
+[data-theme="dark"] .search-hit-state.state-pill-in-progress,
+[data-theme="dark"] .detail-card-state.state-pill-in-progress {
+  color: #67e8f9;
+  background-color: rgba(14, 165, 233, 0.16);
+  border-color: rgba(103, 232, 249, 0.32);
+}
+
+[data-theme="dark"] .detail-state-badge.state-pill-review,
+[data-theme="dark"] .search-hit-state.state-pill-review,
+[data-theme="dark"] .detail-card-state.state-pill-review {
+  color: #fbbf24;
+  background-color: rgba(251, 191, 36, 0.18);
+  border-color: rgba(251, 191, 36, 0.35);
+}
+
+[data-theme="dark"] .detail-state-badge.state-pill-done,
+[data-theme="dark"] .search-hit-state.state-pill-done,
+[data-theme="dark"] .detail-card-state.state-pill-done {
+  color: #4ade80;
+  background-color: rgba(74, 222, 128, 0.15);
+  border-color: rgba(74, 222, 128, 0.32);
+}
+
+[data-theme="dark"] .detail-type-badge.type-pill-feature {
+  color: #4ade80;
+}
+
+[data-theme="dark"] .detail-type-badge.type-pill-task {
+  color: #60a5fa;
+}
+
+[data-theme="dark"] .detail-type-badge.type-pill-bug {
+  color: #f87171;
+}
+
+[data-theme="dark"] .detail-priority-badge.priority-pill-maybe {
+  color: rgba(255, 255, 255, 0.62);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] .detail-priority-badge.priority-pill-low {
+  color: #4ade80;
+  background-color: rgba(74, 222, 128, 0.15);
+}
+
+[data-theme="dark"] .detail-priority-badge.priority-pill-med {
+  color: #fbbf24;
+  background-color: rgba(251, 191, 36, 0.18);
+}
+
+[data-theme="dark"] .detail-priority-badge.priority-pill-high {
+  color: #f87171;
+  background-color: rgba(var(--coral-rgb), 0.2);
+}
+
+[data-theme="dark"] .detail-priority-badge.priority-pill-urgent {
+  color: #fff;
+  background-color: #991b1b;
+}
+
+@media (max-width: 640px) {
+  .detail-meta-badge-row {
+    width: 100%;
+  }
+
+  .detail-state-badge {
+    width: clamp(6.75rem, 38vw, 8.5rem);
+  }
+
+  .detail-type-badge {
+    width: 6.6rem;
+  }
+
+  .detail-priority-badge {
+    width: 6.2rem;
+  }
+}
+
 .drawer-title-text {
   margin: 0;
   font-size: 1.2rem;
@@ -2452,7 +2896,7 @@ h1 {
 
 .inline-title-editor {
   margin-inline: -0.35rem;
-  padding: 0.3rem 0.5rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   font-size: 1.35rem;
   font-weight: inherit;
   letter-spacing: -0.04em;
@@ -2461,7 +2905,7 @@ h1 {
 
 .inline-desc-editor {
   margin-top: 0.5rem;
-  padding: 0.65rem 0.75rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   min-height: 5rem;
   font-size: 1rem;
   line-height: 1.45;
@@ -2478,31 +2922,117 @@ h1 {
 .markdown-body {
   white-space: normal;
   overflow-wrap: anywhere;
+  tab-size: 4;
 }
 
 .markdown-body p,
 .markdown-body ul,
 .markdown-body ol,
-.markdown-body pre {
+.markdown-body pre,
+.markdown-body blockquote,
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
   margin: 0;
 }
 
-.markdown-body p + p,
-.markdown-body p + ul,
-.markdown-body p + ol,
-.markdown-body p + pre,
-.markdown-body ul + p,
-.markdown-body ul + ol,
-.markdown-body ul + pre,
-.markdown-body ol + p,
-.markdown-body ol + ul,
-.markdown-body ol + pre,
-.markdown-body pre + p,
-.markdown-body pre + ul,
-.markdown-body pre + ol {
+/* Every adjacent block-element pair in markdown content gets the same gap.
+   Listing each pair was the old approach; this universal sibling rule keeps
+   headers, blockquotes, and hr in step with paragraphs/lists/code blocks
+   without repeating the matrix. */
+.markdown-body > * + * {
   margin-top: 0.55rem;
 }
 
+.markdown-body p {
+  white-space: break-spaces;
+}
+
+.preserved-text-body {
+  overflow-x: auto;
+  white-space: break-spaces;
+  overflow-wrap: normal;
+  tab-size: 4;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+
+/* Headers carry more weight than body paragraphs and need a bit more breathing
+   room above when they follow other content. Slightly tighter below so the
+   header visually pairs with its first paragraph. */
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+.markdown-body > * + h1,
+.markdown-body > * + h2,
+.markdown-body > * + h3,
+.markdown-body > * + h4,
+.markdown-body > * + h5,
+.markdown-body > * + h6 {
+  margin-top: 1rem;
+}
+
+.markdown-body h1 { font-size: 1.35rem; }
+.markdown-body h2 { font-size: 1.2rem; }
+.markdown-body h3 { font-size: 1.05rem; }
+.markdown-body h4 { font-size: 0.95rem; }
+.markdown-body h5 { font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.04em; }
+.markdown-body h6 { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
+
+.markdown-body blockquote {
+  border-left: 3px solid var(--accent-border);
+  padding: 0.15rem 0.75rem;
+  color: var(--muted);
+  background: rgba(var(--blue-rgb), 0.04);
+  border-radius: 0 8px 8px 0;
+}
+
+.markdown-body blockquote > * + * {
+  margin-top: 0.4rem;
+}
+
+.markdown-body hr {
+  height: 1px;
+  border: 0;
+  background: var(--line);
+  margin: 0.85rem 0;
+}
+
+.markdown-body ul.task-list {
+  list-style: none;
+  padding-left: 0.1rem;
+}
+
+.markdown-body ul.task-list li.task-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+}
+
+.markdown-body ul.task-list li.task-item input[type="checkbox"] {
+  margin: 0;
+  transform: translateY(1px);
+  cursor: default;
+}
+
+.markdown-body ul.task-list li.task-item-done {
+  color: var(--muted);
+  text-decoration: line-through;
+  text-decoration-color: rgba(var(--blue-rgb), 0.4);
+}
+
 .markdown-body ul,
 .markdown-body ol {
   padding-left: 1.25rem;
@@ -2574,6 +3104,16 @@ h1 {
   line-height: 1.55;
 }
 
+.detail-head > .preserved-text-body {
+  overflow-x: auto;
+  white-space: break-spaces;
+  overflow-wrap: normal;
+  tab-size: 4;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+
 /* Project Repository tab metadata grid for read-only repository details. */
 .meta-grid {
   display: grid;
@@ -2678,7 +3218,7 @@ h1 {
 .meta-inline {
   width: 100%;
   margin: 0;
-  padding: 0.42rem 0.55rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   border: 1px solid transparent;
   border-radius: 10px;
   /* Use background-color only — `background` shorthand resets background-image
@@ -2863,7 +3403,7 @@ input.meta-inline {
 .label-add-input {
   flex: 1;
   min-width: 8rem;
-  padding: 0.62rem 0.8rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   font-size: 0.86rem;
 }
 
@@ -3037,10 +3577,14 @@ details.section > summary .mcp-title-row {
 
 .comment-body {
   margin-top: 0.35rem;
-  white-space: pre-wrap;
   line-height: 1.4;
 }
 
+/* Comments use the literal preserved renderer so pasted logs/plans keep spacing. */
+.comment-body.preserved-text-body {
+  white-space: break-spaces;
+}
+
 .comment-form {
   display: grid;
   gap: 0.5rem;
@@ -3049,7 +3593,7 @@ details.section > summary .mcp-title-row {
 
 .comment-form textarea {
   min-height: 5rem;
-  padding: 0.8rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   resize: vertical;
 }
 
@@ -3073,7 +3617,7 @@ details.section > summary .mcp-title-row {
 
 .field-form textarea {
   min-height: 6rem;
-  padding: 0.62rem 0.8rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   resize: vertical;
 }
 
@@ -3095,8 +3639,42 @@ details.section > summary .mcp-title-row {
   margin-top: 0.65rem;
 }
 
-.field-form textarea[name="implementation_updates"] {
-  min-height: 8rem;
+/* Click-to-edit field shared by AI plan/impl/review and board Notes. The
+   label/body pairing replaces the old <label><span>…</span><textarea>…</textarea></label>
+   form-row pattern; the body div is rendered markdown and the editable-field
+   hover affordance signals it accepts clicks. */
+.ai-fields-grid {
+  display: grid;
+  gap: 1.1rem;
+}
+
+.inline-md-field {
+  display: grid;
+  gap: 0.42rem;
+}
+
+.inline-md-field-label {
+  color: var(--muted);
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.inline-md-field-body {
+  min-height: 2.4rem;
+  padding: 0.45rem 0.6rem;
+  margin-inline: -0.35rem;
+}
+
+.inline-md-field-body.is-placeholder {
+  min-height: 2rem;
+}
+
+/* Board Notes is the long-form home for project guidance; reserve a textarea
+   sized landing area so it doesn't collapse to a one-liner when empty. */
+.settings-notes-body {
+  min-height: 11rem;
 }
 
 .ai-context-setup textarea[name="agent_instructions"] {
@@ -3212,7 +3790,7 @@ details.section > summary .mcp-title-row {
 
 .repository-confirm-field input {
   width: 100%;
-  padding: 0.62rem 0.8rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
 }
 
 [data-theme="dark"] .repository-danger-zone {
@@ -3238,11 +3816,11 @@ details.section > summary .mcp-title-row {
 }
 
 .project-entry-form input {
-  padding: 0.62rem 0.8rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
 }
 
 .project-entry-form select.select-chevron-field {
-  padding: 0.62rem var(--select-chevron-pad-x);
+  padding: var(--field-padding-y) var(--select-chevron-pad-x);
   padding-right: calc(var(--select-chevron-pad-x) * 2 + var(--select-chevron-size));
 }
 
@@ -3735,7 +4313,7 @@ details.section > summary .mcp-title-row {
 }
 
 .mcp-flow select.select-chevron-field {
-  padding: 0.62rem var(--select-chevron-pad-x);
+  padding: var(--field-padding-y) var(--select-chevron-pad-x);
   padding-right: calc(var(--select-chevron-pad-x) * 2 + var(--select-chevron-size));
   font-size: 0.88rem;
 }
@@ -3816,7 +4394,7 @@ details.section > summary .mcp-title-row {
 
 .mcp-path-grid input {
   min-width: 0;
-  padding: 0.55rem 0.65rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   font-size: 0.82rem;
 }
 
@@ -4071,13 +4649,13 @@ details.section > summary .mcp-title-row {
 .lane-row select,
 .lane-create-form input,
 .lane-create-form select {
-  padding: 0.5rem 0.65rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   font-size: 0.86rem;
 }
 
 .lane-row select.select-chevron-field,
 .lane-create-form select.select-chevron-field {
-  padding: 0.5rem var(--select-chevron-pad-x);
+  padding: var(--field-padding-y) var(--select-chevron-pad-x);
   padding-right: calc(var(--select-chevron-pad-x) * 2 + var(--select-chevron-size));
 }
 
@@ -4296,6 +4874,30 @@ button:disabled,
   margin-top: auto;
 }
 
+.card--detail .card-expand-trigger--static {
+  flex-wrap: wrap;
+  row-gap: 0.4rem;
+}
+
+.detail-card-state {
+  display: inline-block;
+  flex: 0 0 auto;
+  max-width: min(9rem, 100%);
+  overflow: hidden;
+  padding: 0.14rem 0.48rem;
+  border: 1px solid rgba(96, 165, 250, 0.28);
+  border-radius: 999px;
+  color: #3657c8;
+  background-color: rgba(96, 165, 250, 0.12);
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.035em;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
 .card-eyebrow {
   display: block;
   margin-bottom: 0.3rem;
@@ -4393,7 +4995,7 @@ button:disabled,
 .related-add-input {
   flex: 1;
   width: 100%;
-  padding: 0.62rem 2rem 0.62rem 0.8rem;
+  padding: var(--field-padding-y) var(--field-padding-x);
   font-size: 0.86rem;
 }
 
@@ -5163,3 +5765,198 @@ button:disabled,
   --scrollbar-thumb: rgba(var(--starlight-rgb),0.3);
   --scrollbar-thumb-hover: rgba(var(--starlight-rgb),0.5);
 }
+
+.attachment-heading-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.7rem;
+}
+
+.attachment-heading-row h3 {
+  margin-bottom: 0;
+}
+
+.attachment-upload-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.45rem 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  cursor: url('cursors/live_link.cur'), pointer;
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.attachment-upload-button input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+.attachment-dropzone {
+  display: grid;
+  gap: 0.18rem;
+  padding: 0.9rem;
+  border: 1px dashed var(--accent-border);
+  border-radius: 14px;
+  background: var(--surface-dim);
+  color: var(--muted);
+  outline: none;
+  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.attachment-dropzone strong {
+  color: var(--ink);
+}
+
+.attachment-dropzone span {
+  font-size: 0.82rem;
+}
+
+.attachment-dropzone:focus-visible,
+.attachment-dropzone.is-dragover {
+  border-color: var(--accent-focus-border);
+  background: var(--accent-hover);
+  box-shadow: var(--accent-ring);
+}
+
+.attachment-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
+  gap: 0.65rem;
+  margin-top: 0.75rem;
+}
+
+.attachment-card {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--surface-card);
+}
+
+.attachment-thumb-button {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: var(--surface-dim);
+  cursor: url('cursors/live_link.cur'), pointer;
+}
+
+.attachment-thumb-button img,
+.attachment-missing-thumb {
+  display: block;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+}
+
+.attachment-missing-thumb {
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  background: repeating-linear-gradient(45deg, var(--surface-dim), var(--surface-dim) 10px, var(--subtle-bg) 10px, var(--subtle-bg) 20px);
+  font-size: 0.78rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.attachment-card-meta {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+  padding: 0.55rem 2rem 0.55rem 0.65rem;
+}
+
+.attachment-card-meta strong,
+.attachment-card-meta span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attachment-card-meta strong {
+  font-size: 0.82rem;
+}
+
+.attachment-card-meta span {
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+.attachment-delete {
+  position: absolute;
+  right: 0.45rem;
+  bottom: 0.45rem;
+  display: inline-grid;
+  width: 1.45rem;
+  height: 1.45rem;
+  place-items: center;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--muted);
+  cursor: url('cursors/live_link.cur'), pointer;
+}
+
+.attachment-delete:hover {
+  color: var(--danger, #d44);
+  border-color: rgba(var(--red-rgb),0.35);
+  background: rgba(var(--red-rgb),0.08);
+}
+
+.attachment-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgba(2, 6, 23, 0.82);
+}
+
+.attachment-lightbox-panel {
+  position: relative;
+  display: grid;
+  gap: 0.6rem;
+  max-width: min(92vw, 72rem);
+  max-height: 92vh;
+  color: white;
+}
+
+.attachment-lightbox-panel img {
+  max-width: 100%;
+  max-height: 82vh;
+  border-radius: 16px;
+  object-fit: contain;
+  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
+}
+
+.attachment-lightbox-panel p {
+  margin: 0;
+  color: rgba(255,255,255,0.82);
+  text-align: center;
+}
+
+.attachment-lightbox-close {
+  position: absolute;
+  top: -0.75rem;
+  right: -0.75rem;
+  display: inline-grid;
+  width: 2.2rem;
+  height: 2.2rem;
+  place-items: center;
+  border: 1px solid rgba(255,255,255,0.25);
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.92);
+  color: white;
+  font-size: 1.4rem;
+  cursor: url('cursors/live_link.cur'), pointer;
+}