beads-ui 0.1.0

package/app/styles.css

@@ -0,0 +1,1343 @@
+:root {
+  --fg: #222;
+  --bg: #fff;
+  --muted: #666;
+  --border: #e5e7eb;
+  --panel-bg: #fafafa;
+
+  /* Badges: base + derived via color-mix */
+  --badge-radius: 999px;
+
+  /* Status base colors */
+  --status-open-base: #51cb4e; /* open */
+  --status-in-progress-base: #666666; /* in_progress */
+  --status-closed-base: #5f26c9; /* closed */
+
+  /* Type base colors */
+  --type-bug-base: #9f2011;
+  --type-task-base: #cd9e33;
+  --type-epic-base: #f69842;
+  --type-feature-base: #51cb43;
+  --type-chore-base: #666666;
+
+  /* Neutral badge */
+  --badge-bg-neutral: color-mix(in srgb, var(--panel-bg) 85%, #6b7280);
+  --badge-fg-neutral: color-mix(in srgb, #6b7280 85%, #000);
+
+  /* Derived Type badge colors (light) */
+  --badge-bg-bug: color-mix(in srgb, var(--panel-bg) 85%, var(--type-bug-base));
+  --badge-fg-bug: color-mix(in srgb, var(--type-bug-base) 90%, #000);
+  --badge-bg-feature: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--type-feature-base)
+  );
+  --badge-fg-feature: color-mix(in srgb, var(--type-feature-base) 90%, #000);
+  --badge-bg-task: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--type-task-base)
+  );
+  --badge-fg-task: color-mix(in srgb, var(--type-task-base) 90%, #000);
+  --badge-bg-epic: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--type-epic-base)
+  );
+  --badge-fg-epic: color-mix(in srgb, var(--type-epic-base) 90%, #000);
+  --badge-bg-chore: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--type-chore-base)
+  );
+  --badge-fg-chore: color-mix(in srgb, var(--type-chore-base) 90%, #000);
+
+  /* Links */
+  --link: #1d4ed8;
+  --link-hover: #1e40af;
+  --link-visited: #6d28d9;
+
+  /* Markdown code/pre */
+  --code-bg: #f3f4f6;
+  --code-fg: #111827;
+  --pre-bg: #0b1021;
+  --pre-fg: #e5e7eb;
+
+  /* focus ring */
+  --outline-offset: 6px;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+/* Ensure the HTML hidden attribute wins over any display rules we set on routes */
+[hidden] {
+  display: none !important;
+}
+
+body {
+  color: var(--fg);
+  background: var(--bg);
+  font-family:
+    -apple-system,
+    system-ui,
+    Segoe UI,
+    Roboto,
+    Ubuntu,
+    Cantarell,
+    Noto Sans,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  letter-spacing: 0.01em;
+}
+
+a {
+  color: var(--link);
+}
+a:visited {
+  color: var(--link-visited);
+}
+a:hover,
+a:focus {
+  color: var(--link-hover);
+}
+
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  padding: 12px 18px 0 18px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--panel-bg) 80%, transparent),
+    var(--panel-bg)
+  );
+  backdrop-filter: saturate(150%) blur(6px);
+}
+.app-title {
+  font-size: 18px;
+  margin: 0;
+  letter-spacing: 0.02em;
+}
+
+/* Header layout: group title + tabs on the left */
+.header-left {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+}
+
+/* Header navigation tabs (sit next to title) */
+.header-nav {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+}
+.header-nav .tab {
+  display: inline-block;
+  padding: 8px 12px 9px;
+  color: var(--muted);
+  text-decoration: none;
+  font-weight: 600;
+  border: 1px solid transparent;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  line-height: 1.2;
+}
+.header-nav .tab:hover,
+.header-nav .tab:focus {
+  color: var(--fg);
+}
+.header-nav .tab.active {
+  color: var(--fg);
+  background: var(--bg);
+  border-color: var(--border);
+  /* Blend into the page content below the header by covering the header border */
+  border-bottom-color: var(--bg);
+  margin-bottom: -1px; /* overlap header bottom border */
+  padding-bottom: 10px;
+  position: relative;
+  z-index: 1;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.theme-toggle input[type='checkbox'] {
+  --switch-h: 22px;
+  appearance: none;
+  position: relative;
+  width: 44px;
+  height: var(--switch-h);
+  border-radius: var(--switch-h);
+  border: 1px solid var(--control-border);
+  background: var(--control-bg);
+  transition:
+    background 160ms ease,
+    border-color 160ms ease;
+  cursor: pointer;
+}
+.theme-toggle input[type='checkbox']::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  width: calc(var(--switch-h) - 6px);
+  height: calc(var(--switch-h) - 6px);
+  border-radius: 999px;
+  background: var(--button-bg);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translate(0, -50%);
+  transition: transform 180ms ease;
+}
+.theme-toggle input[type='checkbox']:checked::after {
+  left: auto;
+  right: 2px;
+  transform: translate(0, -50%);
+}
+
+.app-shell {
+  /* Fill remaining viewport height below sticky header */
+  height: calc(100% - 53px);
+}
+
+/* Route shells */
+.route {
+  min-height: 0; /* allow children to scroll */
+}
+
+/* Board route: fill height and let columns scroll */
+.route.board {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: 100%;
+}
+.route.board .panel__body {
+  flex: 1;
+  min-height: 0;
+  overflow-x: auto; /* scroll columns horizontal */
+}
+
+.panel {
+  min-height: 0;
+  overflow: auto;
+}
+.panel + .panel {
+  border-left: 1px solid var(--border);
+}
+
+.panel__header {
+  position: sticky;
+  top: 0;
+  background: inherit;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  padding: 6px 18px;
+}
+
+#detail-panel .panel__header {
+  padding-left: 18px;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.text-truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Details view */
+.editable {
+  position: relative;
+  border-radius: 4px;
+}
+.editable:hover {
+  outline: 2px solid var(--control-border, var(--border));
+  outline-offset: var(--outline-offset);
+}
+.editable:focus-within {
+  outline: 2px solid #93c5fd;
+  outline-offset: var(--outline-offset);
+  cursor: text;
+}
+.editable-actions {
+  margin-top: 6px;
+  display: flex;
+  gap: 8px;
+}
+
+/* Minimal markdown styles */
+.md h1 {
+  font-size: 20px;
+  margin: 12px 0 6px;
+}
+.md h2 {
+  font-size: 18px;
+  margin: 12px 0 6px;
+}
+.md h3 {
+  font-size: 16px;
+  margin: 10px 0 6px;
+}
+.md h4 {
+  font-size: 15px;
+  margin: 8px 0 4px;
+}
+.md h5,
+.md h6 {
+  font-size: 14px;
+  margin: 6px 0 4px;
+}
+.md p {
+  margin: 6px 0;
+}
+.md ul,
+.md ol {
+  margin: 6px 0 6px 14px;
+  padding-left: 14px;
+}
+.md code {
+  background: var(--code-bg);
+  color: var(--code-fg);
+  padding: 3px 4px;
+  border-radius: 3px;
+}
+.md pre {
+  background: var(--pre-bg);
+  color: var(--pre-fg);
+  padding: 10px;
+  overflow: auto;
+  border-radius: 6px;
+}
+
+/* Form controls */
+input[type='text'],
+input[type='search'],
+input[type='number'],
+select,
+textarea {
+  background: var(--control-bg, #fff);
+  color: var(--control-fg, var(--fg));
+  border: 1px solid var(--control-border, var(--border));
+  border-radius: 4px;
+  padding: 4px 6px;
+  line-height: 2;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background 160ms ease;
+}
+input::placeholder,
+textarea::placeholder {
+  color: var(--control-placeholder);
+}
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--link) 60%, var(--control-border));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 24%, transparent);
+}
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5H5z' fill='%23666'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  background-size: 12px 12px;
+  padding-right: 24px;
+}
+button {
+  background: var(--button-bg, #f3f4f6);
+  color: var(--button-fg, var(--fg));
+  border: 1px solid var(--button-border, var(--border));
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition:
+    background 140ms ease,
+    color 140ms ease,
+    border-color 140ms ease,
+    transform 60ms ease;
+}
+button:hover {
+  filter: brightness(1.02);
+}
+button:active {
+  transform: translateY(1px);
+}
+button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* Type badge */
+.type-badge {
+  display: inline-block;
+  padding: 0 6px;
+  line-height: 18px;
+  height: 18px;
+  border-radius: var(--badge-radius);
+  font-size: 11px;
+  font-weight: 600;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+}
+.type-badge[title] {
+  cursor: default;
+}
+.type-badge + .type-badge {
+  margin-left: 4px;
+}
+.type-badge--neutral {
+  background: var(--badge-bg-neutral);
+  color: var(--badge-fg-neutral);
+}
+.type-badge--bug {
+  background: var(--badge-bg-bug);
+  color: var(--badge-fg-bug);
+}
+.type-badge--feature {
+  background: var(--badge-bg-feature);
+  color: var(--badge-fg-feature);
+}
+.type-badge--task {
+  background: var(--badge-bg-task);
+  color: var(--badge-fg-task);
+}
+.type-badge--epic {
+  background: var(--badge-bg-epic);
+  color: var(--badge-fg-epic);
+}
+.type-badge--chore {
+  background: var(--badge-bg-chore);
+  color: var(--badge-fg-chore);
+}
+
+/* Generic badge base (shared look) */
+.badge,
+.status-badge,
+.priority-badge,
+.badge-select {
+  display: inline-block;
+  padding: 0 8px;
+  line-height: 18px;
+  height: 18px;
+  border-radius: var(--badge-radius);
+  font-size: 11px;
+  font-weight: 600;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+}
+.badge + .badge,
+.status-badge + .status-badge,
+.priority-badge + .priority-badge,
+.badge-select + .badge-select {
+  margin-left: 4px;
+}
+
+/* Status + Priority palette (light) derived from base */
+:root {
+  /* Status badges */
+  --badge-bg-open: color-mix(
+    in srgb,
+    var(--panel-bg) 72%,
+    var(--status-open-base)
+  );
+  --badge-fg-open: color-mix(in srgb, var(--status-open-base) 90%, #000);
+  --badge-bg-in-progress: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--status-in-progress-base)
+  );
+  --badge-fg-in-progress: color-mix(
+    in srgb,
+    var(--status-in-progress-base) 90%,
+    #000
+  );
+  --badge-bg-closed: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--status-closed-base)
+  );
+  --badge-fg-closed: color-mix(in srgb, var(--status-closed-base) 90%, #000);
+
+  /* Priority palette mapped to provided colors */
+  /* p0 -> bug, p1 -> epic, p2 -> task, p3 -> feature, p4 -> chore */
+  --badge-bg-p0: color-mix(in srgb, var(--panel-bg) 85%, var(--type-bug-base));
+  --badge-fg-p0: color-mix(in srgb, var(--type-bug-base) 90%, #000);
+  --badge-bg-p1: color-mix(in srgb, var(--panel-bg) 72%, var(--type-epic-base));
+  --badge-fg-p1: color-mix(in srgb, var(--type-epic-base) 90%, #000);
+  --badge-bg-p2: color-mix(in srgb, var(--panel-bg) 72%, var(--type-task-base));
+  --badge-fg-p2: color-mix(in srgb, var(--type-task-base) 90%, #000);
+  --badge-bg-p3: color-mix(
+    in srgb,
+    var(--panel-bg) 72%,
+    var(--type-feature-base)
+  );
+  --badge-fg-p3: color-mix(in srgb, var(--type-feature-base) 90%, #000);
+  --badge-bg-p4: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--type-chore-base)
+  );
+  --badge-fg-p4: color-mix(in srgb, var(--type-chore-base) 90%, #000);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --badge-bg-open: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--status-open-base)
+    );
+    --badge-fg-open: color-mix(in srgb, var(--status-open-base) 75%, #fff);
+    --badge-bg-in-progress: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--status-in-progress-base)
+    );
+    --badge-fg-in-progress: color-mix(
+      in srgb,
+      var(--status-in-progress-base) 75%,
+      #fff
+    );
+    --badge-bg-closed: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--status-closed-base)
+    );
+    --badge-fg-closed: color-mix(in srgb, var(--status-closed-base) 75%, #fff);
+
+    --badge-bg-p0: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--type-bug-base)
+    );
+    --badge-fg-p0: color-mix(in srgb, var(--type-bug-base) 75%, #fff);
+    --badge-bg-p1: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--type-epic-base)
+    );
+    --badge-fg-p1: color-mix(in srgb, var(--type-epic-base) 75%, #fff);
+    --badge-bg-p2: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--type-task-base)
+    );
+    --badge-fg-p2: color-mix(in srgb, var(--type-task-base) 75%, #fff);
+    --badge-bg-p3: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--type-feature-base)
+    );
+    --badge-fg-p3: color-mix(in srgb, var(--type-feature-base) 75%, #fff);
+    --badge-bg-p4: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--type-chore-base)
+    );
+    --badge-fg-p4: color-mix(in srgb, var(--type-chore-base) 75%, #fff);
+  }
+}
+
+html[data-theme='dark'] {
+  --badge-bg-open: color-mix(
+    in srgb,
+    var(--panel-bg) 80%,
+    var(--status-open-base)
+  );
+  --badge-fg-open: color-mix(in srgb, var(--status-open-base) 75%, #fff);
+  --badge-bg-in-progress: color-mix(
+    in srgb,
+    var(--panel-bg) 80%,
+    var(--status-in-progress-base)
+  );
+  --badge-fg-in-progress: color-mix(
+    in srgb,
+    var(--status-in-progress-base) 75%,
+    #fff
+  );
+  --badge-bg-closed: color-mix(
+    in srgb,
+    var(--panel-bg) 80%,
+    var(--status-closed-base)
+  );
+  --badge-fg-closed: color-mix(in srgb, var(--status-closed-base) 75%, #fff);
+
+  --badge-bg-p0: color-mix(in srgb, var(--panel-bg) 80%, var(--type-bug-base));
+  --badge-fg-p0: color-mix(in srgb, var(--type-bug-base) 75%, #fff);
+  --badge-bg-p1: color-mix(in srgb, var(--panel-bg) 80%, var(--type-epic-base));
+  --badge-fg-p1: color-mix(in srgb, var(--type-epic-base) 75%, #fff);
+  --badge-bg-p2: color-mix(in srgb, var(--panel-bg) 80%, var(--type-task-base));
+  --badge-fg-p2: color-mix(in srgb, var(--type-task-base) 75%, #fff);
+  --badge-bg-p3: color-mix(
+    in srgb,
+    var(--panel-bg) 80%,
+    var(--type-feature-base)
+  );
+  --badge-fg-p3: color-mix(in srgb, var(--type-feature-base) 75%, #fff);
+  --badge-bg-p4: color-mix(
+    in srgb,
+    var(--panel-bg) 80%,
+    var(--type-chore-base)
+  );
+  --badge-fg-p4: color-mix(in srgb, var(--type-chore-base) 75%, #fff);
+}
+
+.status-badge.is-open,
+.badge-select.badge--status.is-open {
+  background: var(--badge-bg-open);
+  color: var(--badge-fg-open);
+}
+.status-badge.is-in_progress,
+.badge-select.badge--status.is-in_progress {
+  background: var(--badge-bg-in-progress);
+  color: var(--badge-fg-in-progress);
+}
+.status-badge.is-closed,
+.badge-select.badge--status.is-closed {
+  background: var(--badge-bg-closed);
+  color: var(--badge-fg-closed);
+}
+
+.priority-badge.is-p0,
+.badge-select.badge--priority.is-p0 {
+  background: var(--badge-bg-p0);
+  color: var(--badge-fg-p0);
+}
+.priority-badge.is-p1,
+.badge-select.badge--priority.is-p1 {
+  background: var(--badge-bg-p1);
+  color: var(--badge-fg-p1);
+}
+.priority-badge.is-p2,
+.badge-select.badge--priority.is-p2 {
+  background: var(--badge-bg-p2);
+  color: var(--badge-fg-p2);
+}
+.priority-badge.is-p3,
+.badge-select.badge--priority.is-p3 {
+  background: var(--badge-bg-p3);
+  color: var(--badge-fg-p3);
+}
+.priority-badge.is-p4,
+.badge-select.badge--priority.is-p4 {
+  background: var(--badge-bg-p4);
+  color: var(--badge-fg-p4);
+}
+
+/* Make selects look like badges while keeping the native arrow */
+.badge-select {
+  appearance: none;
+  border: none;
+  padding: 0 22px 0 8px; /* room for arrow */
+  height: 20px;
+  line-height: 18px;
+  background-clip: padding-box;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5H5z' fill='%23000' opacity='0.45'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  background-size: 12px 12px;
+}
+.badge-select:focus {
+  outline: 2px solid color-mix(in srgb, var(--link) 50%, transparent);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+/* Inline, minimal text input for table editing */
+input.inline-edit {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  line-height: inherit;
+  font: inherit;
+  outline: 2px solid var(--control-border, var(--border));
+  outline-offset: var(--outline-offset);
+}
+input.inline-edit:focus {
+  outline: 2px solid #93c5fd;
+  outline-offset: var(--outline-offset);
+  box-shadow: none;
+}
+
+#list-panel .panel__header input {
+  flex: 1;
+}
+
+/* Issues list polish */
+#list-panel .panel__body ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+#list-panel .panel__body li {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 8px 10px;
+  padding: 10px 18px;
+  margin: 0;
+  border-radius: 8px;
+  transition:
+    background 140ms ease,
+    transform 80ms ease,
+    box-shadow 140ms ease;
+}
+#list-panel .panel__body li:hover {
+  background: color-mix(in srgb, var(--control-bg) 60%, transparent);
+}
+#list-panel .panel__body li.selected {
+  background: color-mix(in srgb, var(--link) 10%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--link) 35%, var(--border)) inset;
+}
+#list-panel .panel__body li .muted {
+  font-size: 12px;
+}
+
+/* Details typography */
+#detail-panel .panel__body {
+  line-height: 1.5;
+}
+#detail-panel .panel__body h1,
+#detail-panel .panel__body h2,
+#detail-panel .panel__body h3 {
+  letter-spacing: 0.01em;
+}
+
+/* Keyboard focus ring helper */
+:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--link) 60%, transparent);
+  outline-offset: var(--outline-offset);
+}
+
+/* Subtle scrollbars (WebKit/Blink) */
+* {
+  scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent;
+  scrollbar-width: thin;
+}
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+*::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--muted) 35%, transparent);
+  border-radius: 10px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Responsive: stack panels on narrow screens */
+@media (max-width: 900px) {
+  .app-shell {
+    height: auto;
+  }
+  .panel + .panel {
+    border-left: none;
+    border-top: 1px solid var(--border);
+  }
+}
+
+/* Detail content paddings */
+#detail-root {
+  padding: 18px;
+}
+
+/* Spacing for acceptance and notes sections in details */
+#detail-root .acceptance,
+#detail-root .notes {
+  margin-top: 32px;
+}
+/* Keep editor font sizes consistent with read mode */
+#detail-root input[type='text'],
+#detail-root textarea {
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+/* Title input fills available width and stays inline with buttons */
+#detail-root .detail-title input[type='text'] {
+  flex: 1 1 auto;
+  padding: 0;
+  min-width: 10px;
+}
+/* Remove borders in detail view; rely on global :focus-visible outline */
+#detail-root input[type='text'],
+#detail-root textarea {
+  border: none;
+  background: transparent;
+  outline: 2px solid var(--control-border, var(--border));
+  outline-offset: var(--outline-offset);
+}
+#detail-root input[type='text']:focus,
+#detail-root textarea:focus {
+  border: none;
+  box-shadow: none;
+  outline: 2px solid color-mix(in srgb, var(--link) 60%, transparent);
+}
+
+/* Epics view styles */
+.epic-group {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  margin: 10px 12px;
+  overflow: hidden;
+}
+
+/* UI-83: Issues table container aligns with epics/cards */
+.issues-block {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  margin: 0px 12px;
+  overflow: hidden;
+  background: var(--bg);
+}
+.epic-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+  background: color-mix(in srgb, var(--panel-bg) 90%, transparent);
+  border-bottom: 1px solid var(--border);
+}
+.epic-header:hover {
+  background: color-mix(in srgb, var(--control-bg) 60%, transparent);
+}
+.epic-children {
+  padding: 8px 12px 12px;
+}
+/* Compact native progress for epic status */
+.epic-header progress {
+  width: 140px;
+  height: 8px;
+  accent-color: var(--status-closed-base);
+}
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed; /* keep column proportions stable while editing */
+}
+.table th,
+.table td {
+  text-align: left;
+  padding: 12px 16px;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+}
+/* Ensure form controls fill the cell */
+.table td input[type='text'],
+.table td select {
+  width: 100%;
+  box-sizing: border-box;
+}
+.table td .editable {
+  display: block;
+  width: 100%;
+}
+.table th {
+  font-size: 12px;
+  color: var(--muted);
+  font-weight: 600;
+}
+.epic-row:hover {
+  background: color-mix(in srgb, var(--control-bg) 55%, transparent);
+}
+
+/* Board view styles */
+.board-root {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  padding: 12px;
+}
+.board-column {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 380px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
+}
+.board-column__header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 10px 12px;
+  font-weight: 700;
+  border-bottom: 1px solid var(--border);
+  background: inherit;
+  backdrop-filter: saturate(140%) blur(4px);
+}
+.board-column__body {
+  padding: 10px;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  /* UI-77: increase vertical spacing between card rows */
+  gap: 14px;
+}
+.board-card {
+  /* UI-76: remove borders and match page body background */
+  border: none;
+  border-radius: 6px;
+  /* UI-77: increase internal padding for readability */
+  padding: 12px 14px;
+  /* Match the body background so cards feel integrated */
+  background: var(--bg);
+  cursor: pointer;
+  transition:
+    box-shadow 140ms ease,
+    transform 140ms ease;
+  /* UI-76: subtle elevation without borders */
+  box-shadow:
+    0 1px 2px color-mix(in srgb, #000 10%, transparent),
+    0 2px 6px color-mix(in srgb, #000 8%, transparent);
+}
+.board-card:hover {
+  /* Keep background; emphasize elevation slightly on hover */
+  box-shadow:
+    0 2px 8px color-mix(in srgb, #000 16%, transparent),
+    0 4px 16px color-mix(in srgb, #000 12%, transparent);
+}
+.board-card__title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.board-card__meta {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+@media (max-width: 1100px) {
+  .board-root {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --fg: #e5e7eb;
+    --bg: #0b1021;
+    --muted: #9ca3af;
+    --panel-bg: #0f172a;
+    --border: #1f2937;
+
+    /* Dark variants derived via color-mix for contrast */
+    --badge-bg-neutral: color-mix(in srgb, var(--panel-bg) 80%, #9ca3af);
+    --badge-fg-neutral: color-mix(in srgb, #9ca3af 75%, #fff);
+    --badge-bg-bug: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--type-bug-base)
+    );
+    --badge-fg-bug: color-mix(in srgb, var(--type-bug-base) 75%, #fff);
+    --badge-bg-feature: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--type-feature-base)
+    );
+    --badge-fg-feature: color-mix(in srgb, var(--type-feature-base) 75%, #fff);
+    --badge-bg-task: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--type-task-base)
+    );
+    --badge-fg-task: color-mix(in srgb, var(--type-task-base) 75%, #fff);
+    --badge-bg-epic: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--type-epic-base)
+    );
+    --badge-fg-epic: color-mix(in srgb, var(--type-epic-base) 75%, #fff);
+    --badge-bg-chore: color-mix(
+      in srgb,
+      var(--panel-bg) 80%,
+      var(--type-chore-base)
+    );
+    --badge-fg-chore: color-mix(in srgb, var(--type-chore-base) 75%, #fff);
+
+    --link: #93c5fd;
+    --link-hover: #bfdbfe;
+    --link-visited: #c4b5fd;
+
+    --code-bg: #1f2937;
+    --code-fg: #e5e7eb;
+    --pre-bg: #0a0f1f;
+    --pre-fg: #e5e7eb;
+  }
+}
+
+/* Manual theme override */
+html[data-theme='dark'] {
+  --fg: #e5e7eb;
+  --bg: #0b1021;
+  --muted: #9ca3af;
+  --panel-bg: #0f172a;
+  --border: #1f2937;
+
+  --badge-bg-neutral: #374151;
+  --badge-fg-neutral: #f3f4f6;
+  --badge-bg-bug: color-mix(in srgb, var(--panel-bg) 80%, var(--type-bug-base));
+  --badge-fg-bug: color-mix(in srgb, var(--type-bug-base) 75%, #fff);
+  --badge-bg-feature: color-mix(
+    in srgb,
+    var(--panel-bg) 80%,
+    var(--type-feature-base)
+  );
+  --badge-fg-feature: color-mix(in srgb, var(--type-feature-base) 75%, #fff);
+  --badge-bg-task: color-mix(
+    in srgb,
+    var(--panel-bg) 80%,
+    var(--type-task-base)
+  );
+  --badge-fg-task: color-mix(in srgb, var(--type-task-base) 75%, #fff);
+  --badge-bg-epic: color-mix(
+    in srgb,
+    var(--panel-bg) 80%,
+    var(--type-epic-base)
+  );
+  --badge-fg-epic: color-mix(in srgb, var(--type-epic-base) 75%, #fff);
+  --badge-bg-chore: color-mix(
+    in srgb,
+    var(--panel-bg) 80%,
+    var(--type-chore-base)
+  );
+  --badge-fg-chore: color-mix(in srgb, var(--type-chore-base) 75%, #fff);
+
+  --link: #93c5fd;
+  --link-hover: #bfdbfe;
+  --link-visited: #c4b5fd;
+
+  --code-bg: #1f2937;
+  --code-fg: #e5e7eb;
+  --pre-bg: #0a0f1f;
+  --pre-fg: #e5e7eb;
+}
+
+/* Force light theme when OS prefers dark */
+html[data-theme='light'] {
+  --fg: #222;
+  --bg: #fff;
+  --muted: #666;
+  --panel-bg: #fafafa;
+  --border: #e5e7eb;
+
+  --badge-bg-neutral: #e5e7eb;
+  --badge-fg-neutral: #374151;
+  --badge-bg-bug: color-mix(in srgb, var(--panel-bg) 85%, var(--type-bug-base));
+  --badge-fg-bug: color-mix(in srgb, var(--type-bug-base) 90%, #000);
+  --badge-bg-feature: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--type-feature-base)
+  );
+  --badge-fg-feature: color-mix(in srgb, var(--type-feature-base) 90%, #000);
+  --badge-bg-task: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--type-task-base)
+  );
+  --badge-fg-task: color-mix(in srgb, var(--type-task-base) 90%, #000);
+  --badge-bg-epic: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--type-epic-base)
+  );
+  --badge-fg-epic: color-mix(in srgb, var(--type-epic-base) 90%, #000);
+  --badge-bg-chore: color-mix(
+    in srgb,
+    var(--panel-bg) 85%,
+    var(--type-chore-base)
+  );
+  --badge-fg-chore: color-mix(in srgb, var(--type-chore-base) 90%, #000);
+
+  --link: #1d4ed8;
+  --link-hover: #1e40af;
+  --link-visited: #6d28d9;
+
+  --code-bg: #f3f4f6;
+  --code-fg: #1f2937;
+  --pre-bg: #0b1021;
+  --pre-fg: #e5e7eb;
+
+  /* Light controls override to prevent dark OS bleed-through */
+  --control-bg: #fff;
+  --control-fg: #111827;
+  --control-border: #d1d5db;
+  --control-placeholder: #9ca3af;
+  --button-bg: #f3f4f6;
+  --button-fg: #111827;
+  --button-border: #d1d5db;
+}
+
+/* Controls palette (light defaults) */
+:root {
+  --control-bg: #fff;
+  --control-fg: #111827;
+  --control-border: #d1d5db;
+  --control-placeholder: #9ca3af;
+  --button-bg: #f3f4f6;
+  --button-fg: #111827;
+  --button-border: #d1d5db;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --control-bg: #111827;
+    --control-fg: #e5e7eb;
+    --control-border: #374151;
+    --control-placeholder: #9ca3af;
+    --button-bg: #1f2937;
+    --button-fg: #e5e7eb;
+    --button-border: #374151;
+  }
+}
+html[data-theme='dark'] {
+  --control-bg: #111827;
+  --control-fg: #e5e7eb;
+  --control-border: #374151;
+  --control-placeholder: #9ca3af;
+  --button-bg: #1f2937;
+  --button-fg: #e5e7eb;
+  --button-border: #374151;
+}
+
+/* --- Design polish additions --- */
+/* Detail two-column layout with a properties card */
+.detail-layout {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: 32px;
+  align-items: start;
+}
+.detail-side {
+  position: sticky;
+  top: 70px;
+}
+.detail-main h2 {
+  font-size: 28px;
+  line-height: 1.25;
+  margin: 0 0 32px;
+}
+/* Title line: title left (flex:1), ID right-aligned */
+.detail-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+}
+.detail-title h2 {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: nowrap;
+  gap: 8px;
+}
+.detail-title .detail-id {
+  color: var(--muted);
+}
+.detail-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 0 10px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 14px;
+}
+.detail-breadcrumb {
+  color: var(--muted);
+  font-size: 13px;
+}
+.btn-bar {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.btn {
+  background: var(--button-bg);
+  color: var(--button-fg);
+  border: 1px solid var(--button-border);
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 12px;
+}
+.btn.primary {
+  background: color-mix(in srgb, var(--link) 18%, var(--button-bg));
+  border-color: color-mix(in srgb, var(--link) 32%, var(--button-border));
+}
+.props-card {
+  background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 0;
+  padding: 10px;
+}
+.props-card:not(:last-child) {
+  border-bottom: none;
+}
+.props-card ul {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 8px;
+}
+.props-card__title {
+  font-weight: 700;
+  font-size: 13px;
+  margin: 0 0 8px;
+}
+.prop {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+}
+.prop:first-of-type {
+  border-top: none;
+}
+.prop .label {
+  color: var(--muted);
+  font-size: 12px;
+  min-width: 80px;
+}
+.prop .value {
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.prop.labels {
+  align-items: start;
+}
+.prop.labels .value > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.prop.labels .value > div input {
+  flex: 1;
+}
+
+/* Sidebar control aesthetics */
+#detail-root .props-card input[type='text'] {
+  border: 1px solid var(--control-border);
+  outline: none;
+  border-radius: 4px;
+  padding: 2px 8px;
+}
+
+/* Compact icon button (used in label chips) */
+#detail-root .props-card .icon-button {
+  text-align: center;
+  border-radius: var(--badge-radius);
+  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+  padding: 0 6px;
+  height: 18px;
+  margin-right: -8px;
+  background: transparent;
+  color: inherit;
+}
+
+.props-card__footer {
+  display: flex;
+  justify-content: stretch;
+  gap: 8px;
+  padding: 8px 0;
+}
+.props-card__footer input {
+  flex: 1;
+}
+
+/* List row layout closer to mock */
+#list-panel .panel__body li.issue-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 6px 12px;
+  padding: 12px 18px;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
+  border-radius: 0;
+  cursor: pointer;
+  transition:
+    background 140ms ease,
+    box-shadow 140ms ease;
+}
+#list-panel .panel__body li.issue-item:hover {
+  background: color-mix(in srgb, var(--control-bg) 55%, transparent);
+}
+#list-panel .panel__body li.issue-item.selected {
+  background: color-mix(in srgb, var(--link) 10%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--link) 35%, var(--border)) inset;
+}
+#list-panel .issue-title {
+  font-weight: 600;
+}
+#list-panel .issue-meta {
+  color: var(--muted);
+  font-size: 12px;
+  margin-top: 2px;
+}
+#list-panel .issue-right {
+  display: grid;
+  grid-template-rows: auto auto;
+  justify-items: end;
+  gap: 4px;
+}
+#list-panel .issue-id {
+  color: var(--muted);
+  font-weight: 600;
+}
+.mono {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-variant-ligatures: none;
+}
+
+@media (max-width: 1100px) {
+  .detail-layout {
+    grid-template-columns: 1fr;
+  }
+}