sensorium-mcp 3.1.2 → 3.1.3-board.2

package/dist/board/styles/board.css

@@ -0,0 +1,1760 @@
+/**
+ * Board layout + components — ✅ EDITABLE. Dispatch design: mobile-first dark
+ * shell, soft floating cards, pill chips, mono micro-labels, pulse dots.
+ */
+
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: var(--font);
+  font-size: var(--fs-md);
+  color: var(--c-text);
+  background: var(--c-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+}
+a {
+  color: var(--c-primary);
+  text-decoration: none;
+}
+a:hover {
+  color: oklch(86% 0.11 165);
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.75);
+  }
+}
+@keyframes rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  display: inline-block;
+  flex: none;
+}
+.dot--pulse {
+  animation: pulse 1.6s infinite;
+}
+.mono-label {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-text-muted);
+}
+
+/* ── App shell ─────────────────────────────────────────────── */
+.app {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  max-width: 430px;
+  margin: 0 auto;
+}
+.app-bar {
+  min-height: var(--bar-h);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-3);
+  padding: var(--sp-4) var(--sp-4) var(--sp-2);
+  background: transparent;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--c-bg);
+}
+.app-bar__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  border: 0;
+  background: none;
+  color: var(--c-text);
+  cursor: pointer;
+  padding: 0;
+  text-align: left;
+}
+.app-bar__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--c-primary);
+  display: inline-block;
+  flex: none;
+  animation: pulse 2s infinite;
+}
+.app-bar__titles {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.app-bar__name {
+  font-weight: 700;
+  font-size: 20px;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+.app-bar__right {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+}
+.app-bar__working {
+  border: 1px solid oklch(78% 0.14 165 / 0.3);
+  padding: 6px 12px;
+  box-shadow: var(--shadow-1);
+}
+.app-bar__sub {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  color: var(--c-text-muted);
+}
+.app-main {
+  flex: 1;
+  padding: var(--sp-2) var(--sp-4) 0;
+  padding-bottom: calc(var(--nav-h) + var(--sp-6) + env(safe-area-inset-bottom, 0px));
+  overflow-x: hidden;
+  animation: rise 0.28s ease;
+}
+
+/* ── Bottom nav ────────────────────────────────────────────── */
+.bottom-nav {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 430px;
+  bottom: 0;
+  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  display: flex;
+  background: color-mix(in oklab, var(--c-surface) 92%, transparent);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid var(--c-border);
+  z-index: 20;
+}
+.bottom-nav__item {
+  flex: 1;
+  border: 0;
+  background: none;
+  color: var(--c-text-muted);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  cursor: pointer;
+  font-family: var(--font);
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  min-height: 44px;
+}
+.bottom-nav__item.is-active {
+  color: var(--c-primary);
+}
+.bottom-nav__icon {
+  font-size: 19px;
+  line-height: 1;
+}
+
+/* ── Board ─────────────────────────────────────────────────── */
+.board__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  margin-bottom: var(--sp-4);
+  flex-wrap: wrap;
+}
+.board__new {
+  margin-left: auto;
+}
+@media (max-width: 719px) {
+  .board__new {
+    flex: 1;
+  }
+}
+.board__columns {
+  display: flex;
+  gap: 14px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  padding: 2px 2px var(--sp-4);
+  scrollbar-width: none;
+  align-items: flex-start;
+}
+.board__columns::-webkit-scrollbar {
+  display: none;
+}
+.lane {
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
+  flex: 0 0 100%;
+  max-width: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+  background: none;
+  border: 0;
+}
+.lane__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px var(--sp-1);
+  min-height: 28px;
+}
+.lane__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--c-status-backlog);
+  flex: none;
+}
+.lane--in_progress .lane__dot {
+  background: var(--c-status-in_progress);
+}
+.lane--decision_needed .lane__dot {
+  background: var(--c-status-decision_needed);
+}
+.lane--blocked .lane__dot {
+  background: var(--c-status-blocked);
+}
+.lane--done .lane__dot {
+  background: var(--c-status-done);
+}
+.lane__title {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+.lane__count {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  color: var(--c-text-muted);
+  background: var(--c-surface);
+  border-radius: 999px;
+  padding: 2px 8px;
+}
+.lane__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+}
+.lane__empty {
+  border: 1px dashed var(--c-border-strong);
+  border-radius: 18px;
+  padding: 22px;
+  text-align: center;
+  font-size: var(--fs-sm);
+  color: var(--c-text-faint);
+  margin: 0;
+}
+
+/* ── Card ──────────────────────────────────────────────────── */
+.card {
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: 18px;
+  padding: var(--sp-4);
+  box-shadow: var(--shadow-2);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: border-color 0.15s, transform 0.15s;
+}
+.card .card__foot {
+  margin-top: auto;
+}
+.card:hover {
+  border-color: oklch(78% 0.14 165 / 0.35);
+  transform: translateY(-1px);
+}
+.card:active {
+  transform: scale(0.98);
+}
+.card:focus-visible {
+  outline: 2px solid var(--c-primary);
+  outline-offset: 2px;
+}
+.card__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+}
+.card__lane {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  color: var(--c-text-faint);
+  margin-left: auto;
+}
+.card__title {
+  margin: 0;
+  font-size: var(--fs-md);
+  font-weight: 600;
+  line-height: 1.35;
+}
+.card__desc {
+  margin: 0;
+  font-size: var(--fs-sm);
+  color: var(--c-text-muted);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.card__foot {
+  display: flex;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+  align-items: center;
+}
+.card__top {
+  display: none;
+}
+
+/* ── Chips ─────────────────────────────────────────────────── */
+.chips {
+  display: flex;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+  align-items: center;
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--c-surface-2);
+  color: var(--c-text-muted);
+  white-space: nowrap;
+}
+.chip--muted {
+  background: oklch(74% 0.02 280 / 0.12);
+  color: oklch(74% 0.02 280);
+}
+.chip--live {
+  background: oklch(78% 0.14 165 / 0.13);
+  color: var(--c-live);
+}
+.chip--warn {
+  background: oklch(80% 0.13 75 / 0.13);
+  color: var(--c-warn);
+}
+.chip--status-backlog {
+  background: oklch(74% 0.02 280 / 0.12);
+  color: oklch(74% 0.02 280);
+}
+.chip--status-in_progress {
+  background: oklch(78% 0.14 165 / 0.13);
+  color: var(--c-status-in_progress);
+}
+.chip--status-decision_needed {
+  background: oklch(75% 0.13 300 / 0.13);
+  color: var(--c-status-decision_needed);
+}
+.chip--status-blocked {
+  background: oklch(80% 0.13 75 / 0.13);
+  color: var(--c-status-blocked);
+}
+.chip--status-done {
+  background: oklch(64% 0.06 165 / 0.1);
+  color: var(--c-status-done);
+}
+.chip--prio-0 {
+  background: oklch(64% 0.02 280 / 0.12);
+  color: var(--c-prio-0);
+}
+.chip--prio-1 {
+  background: oklch(80% 0.12 200 / 0.13);
+  color: var(--c-prio-1);
+}
+.chip--prio-2 {
+  background: oklch(80% 0.13 75 / 0.13);
+  color: var(--c-prio-2);
+}
+.chip--prio-3 {
+  background: oklch(78% 0.14 25 / 0.13);
+  color: var(--c-prio-3);
+}
+
+.badge {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  padding: 6px 12px;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border: 1px solid var(--c-border);
+  background: var(--c-surface);
+  box-shadow: var(--shadow-1);
+}
+.badge--mode-preview {
+  color: var(--c-warn);
+  border-color: oklch(80% 0.13 75 / 0.35);
+}
+.badge--mode-production {
+  color: var(--c-live);
+  border-color: oklch(78% 0.14 165 / 0.35);
+}
+
+/* ── Card detail ───────────────────────────────────────────── */
+.card-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+}
+.card-detail__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+}
+.card-detail__id {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  letter-spacing: 0.08em;
+  color: var(--c-text-muted);
+}
+.card-detail__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+}
+.card-detail__title {
+  font-size: var(--fs-xl);
+  font-weight: 700;
+  margin: 0;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+.section {
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--r-lg);
+  padding: 18px;
+  box-shadow: var(--shadow-2);
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+.section--plain {
+  background: none;
+  border: 0;
+  box-shadow: none;
+  padding: 0 var(--sp-1);
+}
+.section__label {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--c-text);
+  margin: 0;
+  padding-bottom: var(--sp-2);
+  border-bottom: 1px solid var(--c-border-strong);
+}
+.prose {
+  margin: 0;
+  font-size: var(--fs-sm);
+  line-height: 1.6;
+  color: var(--c-text-soft);
+  white-space: pre-wrap;
+}
+.profile {
+  display: flex;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+}
+.profile__empty {
+  color: var(--c-text-muted);
+  font-size: var(--fs-sm);
+}
+
+/* ── Comments (activity feed) ──────────────────────────────── */
+.comments {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--sp-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+}
+.comment {
+  display: flex;
+  gap: var(--sp-3);
+  background: none;
+  border: 0;
+  padding: 0;
+}
+.comment__avatar {
+  flex: none;
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  border: 1px solid oklch(100% 0 0 / 0.08);
+  background: oklch(74% 0.02 280 / 0.12);
+}
+.comment--worker .comment__avatar {
+  background: oklch(78% 0.14 165 / 0.15);
+}
+.comment--operator .comment__avatar {
+  background: oklch(75% 0.13 300 / 0.15);
+}
+.comment--board .comment__avatar {
+  background: oklch(80% 0.12 200 / 0.15);
+}
+.comment__bubble {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  background: var(--c-surface);
+  border: 1px solid oklch(100% 0 0 / 0.06);
+  border-radius: 14px;
+  padding: 11px 14px;
+  box-shadow: var(--shadow-1);
+}
+.comment__meta {
+  display: flex;
+  gap: var(--sp-2);
+  align-items: baseline;
+}
+.comment__author {
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: capitalize;
+  color: var(--c-text-soft);
+}
+.comment--worker .comment__author {
+  color: var(--c-primary);
+}
+.comment--operator .comment__author {
+  color: oklch(80% 0.1 300);
+}
+.comment--board .comment__author {
+  color: var(--c-info);
+}
+.comment__time {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--c-text-faint);
+}
+.comment__body {
+  margin: 0;
+  font-size: var(--fs-sm);
+  line-height: 1.5;
+  color: var(--c-text-soft);
+  white-space: pre-wrap;
+}
+.comment--empty {
+  color: var(--c-text-muted);
+  font-size: var(--fs-sm);
+  justify-content: center;
+  padding: var(--sp-3) 0;
+}
+.composer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+.composer .btn {
+  align-self: flex-end;
+}
+
+/* ── Forms ─────────────────────────────────────────────────── */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+}
+.form__row {
+  display: flex;
+  gap: var(--sp-3);
+}
+.form__row .field {
+  flex: 1;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.field--inline {
+  min-width: 120px;
+}
+.field--check {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--sp-2);
+  min-height: 44px;
+  padding: 0 var(--sp-3);
+  border: 1px solid var(--c-border);
+  border-radius: 999px;
+  background: var(--c-surface);
+  cursor: pointer;
+}
+.field--check input {
+  accent-color: var(--c-primary);
+  width: 16px;
+  height: 16px;
+}
+.field__label {
+  font-size: var(--fs-sm);
+  color: var(--c-text);
+  font-weight: 600;
+  padding: 0 var(--sp-1);
+}
+.field--check .field__label,
+.field--inline .field__label {
+  padding: 0;
+}
+.field--inline .field__label {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-text-muted);
+}
+.field__hint {
+  font-weight: 400;
+  color: var(--c-text-muted);
+}
+.input {
+  width: 100%;
+  font: inherit;
+  font-size: var(--fs-md);
+  color: var(--c-text);
+  background: var(--c-surface);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-md);
+  padding: 13px 16px;
+  min-height: 50px;
+  box-shadow: var(--shadow-1);
+}
+.input::placeholder {
+  color: var(--c-text-faint);
+}
+.input:focus {
+  outline: 2px solid oklch(78% 0.14 165 / 0.5);
+  outline-offset: 0;
+  border-color: oklch(78% 0.14 165 / 0.5);
+}
+.input--area {
+  resize: vertical;
+  min-height: 80px;
+  line-height: 1.55;
+  font-size: var(--fs-sm);
+}
+select.input {
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, var(--c-text-muted) 50%),
+    linear-gradient(135deg, var(--c-text-muted) 50%, transparent 50%);
+  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
+  background-size: 5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 38px;
+}
+.input--sm {
+  min-height: 44px;
+  padding: 10px 14px;
+  flex: 1;
+  font-size: var(--fs-sm);
+}
+
+/* ── Custom dropdown ──────────────────────────────── */
+.dropdown {
+  position: relative;
+  width: 100%;
+}
+.dropdown__btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  font: inherit;
+  font-size: var(--fs-md);
+  color: var(--c-text);
+  background: var(--c-surface);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-md);
+  padding: 13px 16px;
+  min-height: 50px;
+  box-shadow: var(--shadow-1);
+  cursor: pointer;
+  text-align: left;
+}
+.dropdown__btn.is-open,
+.dropdown__btn:focus-visible {
+  outline: 2px solid oklch(78% 0.14 165 / 0.5);
+  outline-offset: 0;
+  border-color: oklch(78% 0.14 165 / 0.5);
+}
+.dropdown__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dropdown__value.is-placeholder {
+  color: var(--c-text-faint);
+}
+.dropdown__chevron {
+  color: var(--c-text-muted);
+  font-size: 12px;
+  flex: none;
+  transition: transform 0.15s;
+}
+.dropdown__btn.is-open .dropdown__chevron {
+  transform: rotate(180deg);
+}
+.dropdown__menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  z-index: 40;
+  margin: 0;
+  padding: 6px;
+  list-style: none;
+  background: var(--c-surface-deep);
+  border: 1px solid var(--c-border-strong);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-2);
+  max-height: 280px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  animation: rise 0.16s ease;
+}
+.dropdown__menu::-webkit-scrollbar {
+  display: none;
+}
+.dropdown__opt {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  border: 0;
+  background: none;
+  color: var(--c-text-soft);
+  font: inherit;
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  padding: 11px 12px;
+  border-radius: 10px;
+  cursor: pointer;
+  text-align: left;
+  min-height: 44px;
+}
+.dropdown__opt:hover {
+  background: oklch(78% 0.14 165 / 0.1);
+  color: var(--c-text);
+}
+.dropdown__opt.is-selected {
+  color: var(--c-primary);
+  background: oklch(78% 0.14 165 / 0.13);
+}
+.dropdown__check {
+  font-size: 12px;
+  flex: none;
+}
+.dropdown--sm {
+  width: auto;
+  min-width: 150px;
+}
+.dropdown--sm .dropdown__btn {
+  min-height: 44px;
+  padding: 10px 14px;
+  font-size: var(--fs-sm);
+  border-radius: 999px;
+}
+
+/* ── Icon buttons + lane management (settings) ─────────── */
+.iconbtn {
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  border: 0;
+  background: transparent;
+  color: var(--c-text-faint);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+.iconbtn:hover {
+  color: var(--c-text);
+  background: oklch(100% 0 0 / 0.06);
+}
+.iconbtn--danger:hover {
+  color: var(--c-danger);
+  background: oklch(78% 0.14 25 / 0.12);
+}
+.iconbtn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.iconbtn:disabled:hover {
+  color: var(--c-text-faint);
+  background: transparent;
+}
+.lane-add {
+  display: flex;
+  gap: var(--sp-2);
+  margin-top: var(--sp-2);
+}
+.lane-add .input {
+  flex: 1;
+  min-height: 48px;
+}
+
+/* Segmented option buttons (priority) */
+.seg {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--sp-2);
+}
+.seg__btn {
+  min-height: 44px;
+  border-radius: 14px;
+  font-family: var(--font);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--c-border-strong);
+  background: var(--c-surface);
+  color: var(--c-text-soft);
+}
+.seg__btn:active {
+  transform: scale(0.96);
+}
+.seg__btn.is-selected {
+  border-color: oklch(78% 0.14 165 / 0.55);
+  background: oklch(78% 0.14 165 / 0.13);
+  color: var(--c-primary);
+}
+.seg__btn.is-active-0 {
+  border-color: var(--c-prio-0);
+  background: oklch(64% 0.02 280 / 0.12);
+  color: var(--c-prio-0);
+}
+.seg__btn.is-active-1 {
+  border-color: var(--c-prio-1);
+  background: oklch(80% 0.12 200 / 0.13);
+  color: var(--c-prio-1);
+}
+.seg__btn.is-active-2 {
+  border-color: var(--c-prio-2);
+  background: oklch(80% 0.13 75 / 0.13);
+  color: var(--c-prio-2);
+}
+.seg__btn.is-active-3 {
+  border-color: var(--c-prio-3);
+  background: oklch(78% 0.14 25 / 0.13);
+  color: var(--c-prio-3);
+}
+
+/* ── Buttons ───────────────────────────────────────────────── */
+.actions {
+  display: flex;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+  align-items: center;
+}
+.btn {
+  font-family: var(--font);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  padding: 12px 18px;
+  border-radius: var(--r-md);
+  border: 1px solid var(--c-border-strong);
+  background: var(--c-surface);
+  color: var(--c-text);
+  cursor: pointer;
+  min-height: 48px;
+  transition: transform 0.12s;
+  white-space: nowrap;
+}
+.btn:hover {
+  border-color: oklch(78% 0.14 165 / 0.35);
+}
+.btn:active {
+  transform: scale(0.97);
+}
+.btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.btn--sm {
+  padding: 6px 12px;
+  min-height: 36px;
+  border-radius: var(--r-sm);
+}
+.btn--primary {
+  background: var(--c-primary);
+  color: var(--c-primary-ink);
+  border-color: var(--c-primary);
+  font-weight: 700;
+  box-shadow: var(--shadow-accent);
+}
+.btn--primary:hover {
+  transform: translateY(-1px);
+}
+.btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--c-text-soft);
+}
+.btn--ghost:hover {
+  border-color: var(--c-border-strong);
+}
+.btn--danger {
+  color: var(--c-danger);
+  border-color: oklch(78% 0.14 25 / 0.35);
+}
+.btn--primary.btn--danger {
+  background: var(--c-danger);
+  color: #fff;
+}
+.btn--back {
+  width: 44px;
+  height: 44px;
+  min-height: 44px;
+  padding: 0;
+  border-radius: 14px;
+  font-size: 18px;
+  box-shadow: var(--shadow-1);
+}
+
+/* Card actions — quiet footer row, not a boxed section */
+.card-detail__actions {
+  display: flex;
+  gap: var(--sp-2);
+  flex-wrap: wrap;
+  align-items: center;
+  padding: var(--sp-2) var(--sp-1) 0;
+  border-top: 1px solid var(--c-border);
+}
+.card-detail__actions .btn {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--c-text-soft);
+  min-height: 44px;
+  padding: 10px 14px;
+}
+.card-detail__actions .btn:hover {
+  border-color: var(--c-border-strong);
+  background: var(--c-surface);
+}
+.card-detail__actions .btn--danger {
+  color: var(--c-danger);
+}
+.card-detail__actions .card-detail__actions-spacer {
+  flex: 1;
+}
+
+/* ── Notices ───────────────────────────────────────────────── */
+.notice {
+  border-radius: var(--r-lg);
+  padding: var(--sp-4) 18px;
+  font-size: var(--fs-sm);
+  line-height: 1.55;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  justify-content: space-between;
+  border: 1px solid transparent;
+}
+.notice--info {
+  background: var(--c-surface);
+  border-color: var(--c-border);
+  color: var(--c-text-muted);
+}
+.notice--warn {
+  background: oklch(80% 0.13 75 / 0.09);
+  border-color: oklch(80% 0.13 75 / 0.4);
+  color: var(--c-warn);
+  box-shadow: 0 14px 36px oklch(80% 0.13 75 / 0.1);
+}
+.notice--error {
+  background: oklch(78% 0.14 25 / 0.09);
+  border-color: oklch(78% 0.14 25 / 0.4);
+  color: var(--c-danger);
+}
+
+/* ── Lists (settings) ──────────────────────────────────────── */
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+.list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--r-md);
+  padding: var(--sp-3) var(--sp-4);
+  box-shadow: var(--shadow-1);
+}
+.list__main {
+  flex: 1;
+  font-weight: 600;
+  font-size: var(--fs-sm);
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.list__row--empty {
+  color: var(--c-text-muted);
+  justify-content: center;
+  box-shadow: none;
+  border-style: dashed;
+  background: none;
+}
+
+/* ── Token gate ────────────────────────────────────────────── */
+.token-gate {
+  min-height: 70dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.token-gate__card {
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: var(--r-lg);
+  padding: var(--sp-6) var(--sp-5);
+  max-width: 360px;
+  width: 100%;
+  text-align: center;
+  box-shadow: var(--shadow-2);
+  animation: rise 0.28s ease;
+}
+.token-gate__logo {
+  margin-bottom: var(--sp-3);
+}
+.token-gate__logo .app-bar__dot {
+  width: 14px;
+  height: 14px;
+}
+.token-gate__title {
+  margin: 0 0 var(--sp-1);
+  font-size: var(--fs-xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.token-gate__sub {
+  color: var(--c-text-muted);
+  margin: 0 0 var(--sp-4);
+  font-size: var(--fs-sm);
+}
+.token-gate__btn {
+  width: 100%;
+  margin-top: var(--sp-3);
+}
+.token-gate__hint {
+  color: var(--c-text-faint);
+  font-size: var(--fs-xs);
+  margin: var(--sp-3) 0 0;
+}
+
+/* ── Builder / Settings headers ────────────────────────────── */
+.builder,
+.settings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+}
+.builder__head,
+.settings__head {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 var(--sp-1);
+}
+.builder__title,
+.settings__title {
+  font-size: var(--fs-xl);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+.builder__hint,
+.settings__note {
+  color: var(--c-text-muted);
+  font-size: var(--fs-sm);
+  margin: 0;
+}
+.settings__saved {
+  color: var(--c-live);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+}
+
+/* ── Worker status strip ──────────────────────────────── */
+.worker-strip {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  flex-wrap: wrap;
+  background: var(--c-surface);
+  border: 1px solid var(--c-border);
+  border-radius: 999px;
+  padding: 10px 16px;
+  box-shadow: var(--shadow-1);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  color: var(--c-text-muted);
+}
+.worker-strip__state {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.worker-strip--running .worker-strip__state {
+  color: var(--c-live);
+}
+.worker-strip--paused .worker-strip__state {
+  color: var(--c-decision);
+}
+.worker-strip--finished .worker-strip__state {
+  color: var(--c-status-done);
+}
+.worker-strip--idle .worker-strip__state {
+  color: var(--c-warn);
+}
+
+/* ── Decision block ──────────────────────────────────── */
+.decision {
+  border: 1px solid oklch(75% 0.13 300 / 0.4);
+  background: oklch(75% 0.13 300 / 0.09);
+  border-radius: var(--r-lg);
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+  box-shadow: 0 14px 36px oklch(75% 0.13 300 / 0.12);
+}
+.decision__head {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  color: var(--c-decision);
+}
+.decision__label {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  letter-spacing: 0.08em;
+  color: oklch(80% 0.11 300);
+}
+.decision__question {
+  margin: 0;
+  font-size: var(--fs-md);
+  line-height: 1.55;
+}
+.decision__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+.decision__option {
+  min-height: 48px;
+  border-radius: 14px;
+  border: 1px solid oklch(75% 0.13 300 / 0.45);
+  background: oklch(24% 0.03 295);
+  color: var(--c-text);
+  font-family: var(--font);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  cursor: pointer;
+  padding: 12px 16px;
+  text-align: left;
+}
+.decision__option:hover {
+  background: oklch(75% 0.13 300 / 0.2);
+}
+.decision__option:active {
+  transform: scale(0.98);
+}
+.decision__option:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.decision__sent {
+  margin: 0;
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  color: var(--c-live);
+}
+.decision__own {
+  display: flex;
+  gap: var(--sp-2);
+  align-items: stretch;
+}
+.decision__own .input {
+  flex: 1;
+  min-height: 48px;
+  border-color: oklch(75% 0.13 300 / 0.45);
+  background: oklch(24% 0.03 295);
+  box-shadow: none;
+}
+.decision__own .input:focus {
+  outline-color: oklch(75% 0.13 300 / 0.5);
+  border-color: oklch(75% 0.13 300 / 0.6);
+}
+.decision__own-send {
+  min-width: 72px;
+  border-radius: 14px;
+  border: 1px solid oklch(75% 0.13 300 / 0.55);
+  background: oklch(75% 0.13 300 / 0.16);
+  color: oklch(84% 0.1 300);
+  font-family: var(--font);
+  font-size: var(--fs-sm);
+  font-weight: 700;
+  cursor: pointer;
+}
+.decision__own-send:active {
+  transform: scale(0.96);
+}
+.decision__own-send:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* ── Agent log panel ────────────────────────────────── */
+.log {
+  background: var(--c-surface-deep);
+  border: 1px solid oklch(100% 0 0 / 0.09);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-2);
+}
+.log__toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  padding: 14px 17px;
+  cursor: pointer;
+  min-height: 48px;
+  font-family: inherit;
+}
+.log__title {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+}
+.log__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  color: var(--c-text-faint);
+}
+.log__status--live {
+  color: var(--c-live);
+}
+.log__status--paused {
+  color: var(--c-decision);
+}
+.log__status--halted {
+  color: var(--c-warn);
+}
+.log__chevron {
+  color: var(--c-text-muted);
+  font-size: 12px;
+}
+.log__body {
+  padding: 0 17px 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.log__line {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: oklch(76% 0.015 280);
+  white-space: pre-wrap;
+}
+.log__line--cmd {
+  color: oklch(80% 0.1 300);
+}
+.log__line--ok {
+  color: var(--c-live);
+}
+.log__line--warn {
+  color: var(--c-warn);
+}
+.log__line--err {
+  color: var(--c-danger);
+}
+.log__line--cursor {
+  color: var(--c-live);
+  animation: pulse 1s infinite;
+}
+
+/* ── Builder wizard ─────────────────────────────────── */
+.builder__headrow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-3);
+}
+.builder__dots {
+  display: flex;
+  gap: 5px;
+}
+.builder__dotstep {
+  width: 22px;
+  height: 5px;
+  border-radius: 99px;
+  background: oklch(32% 0.02 280);
+}
+.builder__dotstep.is-on {
+  background: var(--c-primary);
+}
+.presets {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+.presets__label {
+  margin: 0;
+  padding: 0 var(--sp-1);
+}
+.presets__row {
+  display: flex;
+  gap: var(--sp-2);
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding: 2px;
+}
+.presets__chip {
+  flex: none;
+  min-height: 44px;
+  padding: 10px 16px;
+  border-radius: 14px;
+  font-family: var(--font);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--c-border-strong);
+  background: var(--c-surface);
+  color: var(--c-text-soft);
+  box-shadow: var(--shadow-1);
+  white-space: nowrap;
+}
+.presets__chip:active {
+  transform: scale(0.96);
+}
+.presets__chip.is-active {
+  border-color: oklch(78% 0.14 165 / 0.55);
+  background: oklch(78% 0.14 165 / 0.13);
+  color: var(--c-primary);
+}
+.skillchips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-2);
+}
+.skillchips__chip {
+  min-height: 44px;
+  padding: 10px 15px;
+  border-radius: 999px;
+  font-family: var(--font);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--c-border-strong);
+  background: var(--c-surface);
+  color: var(--c-text-soft);
+  white-space: nowrap;
+}
+.skillchips__chip:active {
+  transform: scale(0.95);
+}
+.skillchips__chip.is-on {
+  border-color: oklch(78% 0.14 165 / 0.55);
+  background: oklch(78% 0.14 165 / 0.13);
+  color: var(--c-primary);
+}
+.switchlist {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+.switchrow {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  min-height: 60px;
+  border-radius: var(--r-md);
+  border: 1px solid var(--c-border);
+  background: var(--c-surface);
+  padding: var(--sp-3) var(--sp-4);
+  cursor: pointer;
+  text-align: left;
+  box-shadow: var(--shadow-1);
+  font-family: inherit;
+}
+.switchrow:active {
+  transform: scale(0.99);
+}
+.switchrow__text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.switchrow__label {
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  color: var(--c-text);
+}
+.switchrow__desc {
+  font-size: 12px;
+  color: var(--c-text-muted);
+  line-height: 1.4;
+}
+.switch {
+  flex: none;
+  width: 48px;
+  height: 28px;
+  border-radius: 999px;
+  background: oklch(32% 0.02 280);
+  position: relative;
+  transition: background 0.2s;
+}
+.switch.is-on {
+  background: var(--c-primary);
+}
+.switch__knob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: oklch(96% 0 0);
+  transition: left 0.2s;
+  box-shadow: 0 2px 6px oklch(0% 0 0 / 0.4);
+}
+.switch.is-on .switch__knob {
+  left: 23px;
+}
+.phases {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+}
+.phases__row {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  border: 1px solid var(--c-border);
+  background: var(--c-surface);
+  border-radius: var(--r-md);
+  padding: var(--sp-3) 14px;
+  box-shadow: var(--shadow-1);
+}
+.phases__num {
+  flex: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 9px;
+  background: oklch(78% 0.14 165 / 0.14);
+  color: var(--c-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+.phases__name {
+  flex: 1;
+  font-size: var(--fs-sm);
+  font-weight: 500;
+}
+.phases__review {
+  border: 1px solid var(--c-border-strong);
+  background: transparent;
+  color: var(--c-text-faint);
+  border-radius: 999px;
+  padding: 7px 11px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  cursor: pointer;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+.phases__review:active {
+  transform: scale(0.94);
+}
+.phases__review.is-on {
+  color: var(--c-primary);
+  border-color: oklch(78% 0.14 165 / 0.5);
+  background: oklch(78% 0.14 165 / 0.12);
+}
+.phases__remove {
+  border: 0;
+  background: transparent;
+  color: var(--c-text-faint);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 6px;
+}
+.phases__remove:hover {
+  color: var(--c-danger);
+}
+.phases__add {
+  display: flex;
+  gap: var(--sp-2);
+}
+.phases__add .input {
+  flex: 1;
+  min-height: 48px;
+}
+.phases__addbtn {
+  min-width: 64px;
+  border-color: oklch(78% 0.14 165 / 0.4);
+  background: oklch(78% 0.14 165 / 0.12);
+  color: var(--c-primary);
+  font-weight: 700;
+}
+.preview {
+  border: 1px solid oklch(78% 0.14 165 / 0.25);
+  background: oklch(78% 0.14 165 / 0.05);
+  border-radius: 18px;
+  overflow: hidden;
+  box-shadow: var(--shadow-1);
+}
+.preview__toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  padding: 15px 17px;
+  cursor: pointer;
+  min-height: 50px;
+  font-family: inherit;
+}
+.preview__title {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+}
+.preview__label {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xs);
+  letter-spacing: 0.08em;
+  color: var(--c-primary);
+}
+.preview__meta {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--c-text-muted);
+}
+.preview__chevron {
+  color: var(--c-primary);
+  font-size: 13px;
+}
+.preview__body {
+  padding: 2px 17px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.preview__line {
+  display: flex;
+  gap: var(--sp-3);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+}
+.preview__key {
+  flex: none;
+  width: 74px;
+  color: var(--c-text-muted);
+}
+.preview__val {
+  color: oklch(86% 0.05 165);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.builder__actions {
+  flex-wrap: nowrap;
+}
+.builder__cta {
+  flex: 1;
+}
+
+/* ── Wider screens ─────────────────────────────────────────── */
+@media (min-width: 720px) {
+  .app {
+    max-width: 1200px;
+  }
+  .app-bar {
+    padding: var(--sp-4) var(--sp-5) var(--sp-2);
+  }
+  .app-main {
+    padding: var(--sp-2) var(--sp-5) 0;
+    padding-bottom: var(--sp-6);
+    width: 100%;
+  }
+
+  /* Nav becomes a slim top-right rail instead of a thumb bar */
+  .bottom-nav {
+    position: static;
+    transform: none;
+    max-width: none;
+    width: auto;
+    height: auto;
+    padding: 0;
+    border: 0;
+    background: none;
+    backdrop-filter: none;
+    order: -1;
+  }
+  .app-bar {
+    gap: var(--sp-4);
+  }
+  .app-bar .badge {
+    margin-left: 0;
+  }
+  /* bottom-nav rendered after main; float it into the app bar visually */
+  .bottom-nav {
+    position: fixed;
+    top: 14px;
+    right: max(16px, calc(50vw - 584px));
+    left: auto;
+    bottom: auto;
+    display: flex;
+    gap: var(--sp-1);
+    background: var(--c-surface);
+    border: 1px solid var(--c-border);
+    border-radius: 999px;
+    padding: 4px;
+    box-shadow: var(--shadow-1);
+    z-index: 30;
+  }
+  .bottom-nav__item {
+    flex: none;
+    flex-direction: row;
+    gap: var(--sp-2);
+    padding: 8px 16px;
+    border-radius: 999px;
+    min-height: 40px;
+  }
+  .bottom-nav__item.is-active {
+    background: oklch(78% 0.14 165 / 0.13);
+  }
+  .bottom-nav__icon {
+    font-size: 15px;
+  }
+
+  /* Board: all five columns visible, no swipe */
+  .board__columns {
+    overflow-x: visible;
+    scroll-snap-type: none;
+    flex-wrap: nowrap;
+  }
+  .lane {
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: none;
+  }
+
+  /* Detail / builder / settings: comfortable reading column */
+  .card-detail,
+  .builder,
+  .settings {
+    max-width: 720px;
+    margin: 0 auto;
+    width: 100%;
+  }
+  .token-gate__card {
+    max-width: 400px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .card__title {
+    font-size: var(--fs-md);
+  }
+  .card-detail__title {
+    font-size: 26px;
+  }
+}