@starlove/orbit 1.0.6 → 1.1.0

package/public/styles.css

@@ -76,9 +76,13 @@ input[type="file"] {
   --orbit-add-border: rgba(29, 37, 40, 0.12);
   --orbit-phantom-border: rgba(29, 37, 40, 0.14);
   --orbit-phantom-bg: rgba(29, 37, 40, 0.03);
+  --kanban-column-width: 22rem;
   --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 */
@@ -96,10 +100,16 @@ 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;
 }
 
+@media (max-width: 720px) {
+  :root {
+    --kanban-column-width: 18rem;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -248,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 {
@@ -529,6 +557,12 @@ h1 {
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 
+#boardFlyout {
+  min-width: 20.25rem;
+  max-width: min(30rem, calc(100vw - 1.5rem));
+  max-height: min(36rem, calc(100vh - 4rem));
+}
+
 .menu-flyout--align-end {
   right: 0;
   left: auto;
@@ -641,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;
@@ -940,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;
@@ -950,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;
@@ -1030,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);
@@ -1050,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,
@@ -1067,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));
 }
 
@@ -1090,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);
 }
@@ -1109,7 +1177,7 @@ h1 {
 /* Horizontal scroll: styled thumb/track (Firefox + WebKit). */
 .kanban {
   display: grid;
-  grid-auto-columns: minmax(17rem, 1fr);
+  grid-auto-columns: minmax(var(--kanban-column-width), 1fr);
   grid-auto-flow: column;
   grid-template-rows: minmax(0, 1fr);
   flex: 1 1 auto;
@@ -1636,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 {
@@ -1704,8 +1886,8 @@ h1 {
 /* Epic-aware grouping inside a column.
    `.epic-children` is a flex item nested in `.column` (which is itself flex-column,
    gap 0.7rem). Right-aligning + narrowing it makes its cards read as indented
-   children of the epic card or `.epic-mini-header` directly above. The negative
-   margin-top tightens the visual link by halving the column gap. */
+   children of the epic card or full-width `.epic-mini-header` directly above.
+   The negative margin-top tightens the visual link by halving the column gap. */
 .epic-children {
   display: flex;
   flex-direction: column;
@@ -1744,15 +1926,14 @@ h1 {
     0 8px 20px rgba(0, 0, 0, 0.25);
 }
 
-/* Thin "header" that stands in for the epic when its children sit in a different
-   column. Visually pairs with the `.epic-children` block right below it: same
-   width and right-alignment, slim purple bar shape. */
+/* Thin full-width "header" that stands in for the epic when its children sit in
+   a different column. Children remain narrowed underneath so the hierarchy is
+   visible without cutting the lane width at the epic anchor. */
 .epic-mini-header {
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  width: 92%;
-  align-self: flex-end;
+  width: 100%;
   padding: 0.45rem 0.6rem;
   border-radius: 10px 10px 4px 4px;
   background: rgba(var(--purple-rgb), 0.10);
@@ -2144,7 +2325,13 @@ h1 {
   background: var(--drawer-bg);
   box-shadow: 0 24px 60px rgba(12, 18, 26, 0.28);
   transform: translateX(calc(100% + 1.5rem));
-  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition:
+    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
+    width 180ms ease;
+}
+
+.drawer.is-wide {
+  width: min(58rem, calc(100vw - 1rem));
 }
 
 .drawer.is-open {
@@ -2205,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;
@@ -2223,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;
@@ -2286,8 +2748,8 @@ h1 {
   border-color: var(--accent-border);
 }
 
-.drawer-close {
-  grid-area: close;
+.drawer-close,
+.drawer-archive {
   display: inline-grid;
   place-items: center;
   width: 2rem;
@@ -2297,10 +2759,14 @@ h1 {
   border-radius: 10px;
   background: var(--surface);
   color: var(--ink);
+  cursor: url('cursors/live_link.cur'), pointer;
+}
+
+.drawer-close {
+  grid-area: close;
   font-size: 1.35rem;
   font-weight: 400;
   line-height: 1;
-  cursor: url('cursors/live_link.cur'), pointer;
 }
 
 .drawer-close:hover {
@@ -2310,16 +2776,6 @@ h1 {
 
 .drawer-archive {
   grid-area: archive;
-  display: inline-grid;
-  place-items: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--surface);
-  color: var(--ink);
-  cursor: url('cursors/live_link.cur'), pointer;
 }
 
 .drawer-archive:hover {
@@ -2440,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;
@@ -2449,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;
@@ -2463,6 +2919,181 @@ h1 {
   white-space: pre-wrap;
 }
 
+.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 blockquote,
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin: 0;
+}
+
+/* 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;
+}
+
+.markdown-body li + li {
+  margin-top: 0.2rem;
+}
+
+.markdown-body code {
+  border: 1px solid rgba(var(--blue-rgb), 0.18);
+  border-radius: 0.35rem;
+  padding: 0.05rem 0.25rem;
+  color: var(--ink);
+  background: rgba(var(--blue-rgb), 0.08);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.9em;
+}
+
+.markdown-body pre {
+  padding: 0.65rem 0.75rem;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--surface-card);
+}
+
+.markdown-body pre code {
+  display: block;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  white-space: pre;
+}
+
+.markdown-body a {
+  color: var(--blue);
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.15em;
+}
+
+.card-description {
+  margin-top: 0.45rem;
+  color: var(--muted);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.card .markdown-body p {
+  display: block;
+  overflow: visible;
+  -webkit-line-clamp: unset;
+  -webkit-box-orient: initial;
+}
+
+.card .markdown-body pre {
+  max-height: 8rem;
+}
+
 /* The detail pane's lede description is body copy, not a card excerpt — give
    it more presence than the universal muted .description rule. */
 .detail-head > .description {
@@ -2473,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;
@@ -2577,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
@@ -2762,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;
 }
 
@@ -2936,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;
@@ -2948,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;
 }
 
@@ -2972,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;
 }
 
@@ -2994,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"] {
@@ -3111,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 {
@@ -3137,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));
 }
 
@@ -3194,6 +3873,157 @@ details.section > summary .mcp-title-row {
   margin-bottom: 0.85rem;
 }
 
+.appearance-theme-section {
+  margin-top: 0.4rem;
+}
+
+.appearance-theme-section + .section:has(> .orbit-check:first-child) {
+  margin-top: 1.25rem;
+}
+
+.appearance-theme-field {
+  display: grid;
+  gap: 0.55rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.appearance-theme-field legend {
+  margin-bottom: 0.55rem;
+  color: var(--ink);
+  font-size: 0.88rem;
+  font-weight: 800;
+}
+
+.appearance-theme-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.appearance-theme-option {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  min-height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  padding: 0.5rem 0.72rem;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--surface-dim);
+  color: var(--ink);
+  font-size: 0.86rem;
+  font-weight: 700;
+  cursor: url('cursors/live_link.cur'), pointer;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease,
+    color 160ms ease;
+}
+
+.appearance-theme-option:hover {
+  border-color: var(--accent-border);
+  background: var(--accent-hover);
+}
+
+.appearance-theme-option input[type="radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.appearance-theme-option-mark {
+  display: grid;
+  width: 1.35rem;
+  height: 1.35rem;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid var(--accent-border);
+  border-radius: 999px;
+  background: var(--surface-input);
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.appearance-theme-option-icon {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.appearance-theme-option-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.appearance-theme-option:has(input[type="radio"]:checked) {
+  border-color: var(--accent);
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--blue-rgb),0.08)),
+    var(--surface-dim);
+  box-shadow:
+    inset 0 0 0 1px rgba(var(--accent-rgb),0.18),
+    0 4px 10px rgba(var(--accent-rgb),0.12);
+}
+
+.appearance-theme-option:has(input[type="radio"]:checked) .appearance-theme-option-mark {
+  border-color: var(--accent);
+  color: #fff;
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(var(--blue-rgb),0.95));
+}
+
+.appearance-theme-option input[type="radio"]:focus-visible ~ .appearance-theme-option-mark {
+  box-shadow: var(--accent-ring);
+}
+
+[data-theme="dark"] .appearance-theme-option {
+  background: rgba(15, 25, 50, 0.55);
+  border-color: rgba(var(--starlight-rgb),0.16);
+}
+
+[data-theme="dark"] .appearance-theme-option:hover {
+  border-color: rgba(var(--starlight-rgb),0.4);
+  background: rgba(var(--starlight-rgb),0.08);
+}
+
+[data-theme="dark"] .appearance-theme-option-mark {
+  border-color: rgba(var(--starlight-rgb),0.35);
+  background:
+    linear-gradient(135deg, rgba(var(--starlight-rgb),0.06), rgba(var(--cosmos-rgb),0) 65%),
+    rgba(15, 25, 50, 0.7);
+}
+
+[data-theme="dark"] .appearance-theme-option:has(input[type="radio"]:checked) {
+  border-color: rgba(var(--starlight-rgb),0.55);
+  background:
+    linear-gradient(135deg, rgba(var(--starlight-rgb),0.13), rgba(var(--violet-rgb),0.08)),
+    rgba(15, 25, 50, 0.65);
+  box-shadow:
+    inset 0 0 0 1px rgba(var(--starlight-rgb),0.18),
+    0 4px 14px rgba(var(--starlight-rgb),0.16);
+}
+
+[data-theme="dark"] .appearance-theme-option:has(input[type="radio"]:checked) .appearance-theme-option-mark {
+  border-color: rgba(var(--starlight-rgb),0.7);
+  color: #0a1024;
+  background: linear-gradient(135deg, #d6e6ff, #a8c0ff);
+}
+
 /* Lanes tab opens directly with the checkbox — drop the default .section
    top margin so it sits flush under the drawer tabs. */
 .section:has(> .orbit-check:first-child) {
@@ -3483,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;
 }
@@ -3564,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;
 }
 
@@ -3819,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));
 }
 
@@ -4044,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;
@@ -4141,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;
 }
 
@@ -4828,6 +5682,27 @@ button:disabled,
   }
 }
 
+[data-reduced-motion="reduce"] *,
+[data-reduced-motion="reduce"] *::before,
+[data-reduced-motion="reduce"] *::after {
+  scroll-behavior: auto !important;
+  transition-duration: 0.01ms !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+}
+
+[data-reduced-motion="reduce"][data-theme="dark"] .starfield,
+[data-reduced-motion="reduce"][data-theme="dark"] .milky-way,
+[data-reduced-motion="reduce"][data-theme="dark"] .grain::before,
+[data-reduced-motion="reduce"][data-theme="dark"] .grain::after,
+[data-reduced-motion="reduce"][data-theme="dark"] .signature-star {
+  animation: none;
+}
+
+[data-reduced-motion="reduce"][data-theme="dark"] .meteor {
+  display: none;
+}
+
 [data-theme="dark"] {
   /* Tells the browser to render native widgets (dropdowns, scrollbars,
      date pickers, etc.) in their dark variant so option popups match. */
@@ -4890,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;
+}