symphifo 0.1.0

package/src/dashboard/styles.css

@@ -0,0 +1,1528 @@
+/* ============================================================================
+   SYMPHIFO DASHBOARD
+   Closed local operations theme: high-contrast green, hard edges, dark neutral surface.
+   ============================================================================ */
+
+:root {
+  /* ── Neutral grayscale ──────────────────────────────────────────────────── */
+  --void:    #000000;
+  --abyss:   #040e04;
+  --crypt:   #0b160b;
+  --stone:   #141e14;
+  --cobble:  #1d291d;
+  --dungeon: #283028;
+  --ash:     #344034;
+  --iron:    #5e6f5e;
+  --silver:  #7a8e7a;
+  --slate:   #a0b4a0;
+  --bone:    #ccdacc;
+  --frost:   #eff5ef;
+
+  /* ── Plague green spectrum ──────────────────────────────────────────────── */
+  --plague:  #3dff14;
+  --blight:  #44ea12;
+  --toxin:   #2abb0e;
+  --ooze:    #1a6c0a;
+  --mold:    #0c2b06;
+
+  /* ── Semantic ───────────────────────────────────────────────────────────── */
+  --ok:      #34d399;
+  --warn:    #f59e0b;
+  --danger:  #fb7185;
+  --info:    #60a5fa;
+
+  /* ── Glow shortcuts ─────────────────────────────────────────────────────── */
+  --glow-weak:   0 0 10px rgba(55, 200, 15, 0.14);
+  --glow-mid:    0 0 18px rgba(65, 220, 20, 0.24);
+  --glow-strong: 0 0 28px rgba(78, 248, 26, 0.40);
+}
+
+/* ── Reset ────────────────────────────────────────────────────────────────── */
+
+* {
+  box-sizing: border-box;
+}
+
+::selection {
+  background-color: rgba(70, 230, 20, 0.22);
+  color: var(--frost);
+}
+
+::-webkit-scrollbar       { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: var(--abyss); }
+::-webkit-scrollbar-thumb { background: var(--ash); }
+::-webkit-scrollbar-thumb:hover { background: var(--toxin); }
+
+/* ── Body ─────────────────────────────────────────────────────────────────── */
+
+body {
+  margin: 0;
+  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+  background: var(--void);
+  color: var(--bone);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ── Shell ────────────────────────────────────────────────────────────────── */
+
+.shell {
+  max-width: 1140px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+/* ── Topbar ───────────────────────────────────────────────────────────────── */
+
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--ash);
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--frost);
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--slate);
+}
+
+.eyebrow {
+  margin: 0;
+  color: var(--plague);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.7rem;
+  text-shadow: 0 0 12px rgba(61, 255, 20, 0.3);
+}
+
+.muted {
+  margin: 4px 0 0;
+  color: var(--silver);
+  font-size: 0.8rem;
+}
+
+.badges {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.badge {
+  background: var(--stone);
+  padding: 6px 12px;
+  border: 1px solid var(--ash);
+  font-size: 0.72rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  letter-spacing: 0.03em;
+  color: var(--slate);
+  text-transform: uppercase;
+  transition: border-color 150ms, opacity 150ms;
+}
+
+/* ── Health badge states ───────────────────────────────────────────────────── */
+
+.badge-health-ok {
+  border-color: var(--ok);
+  color: var(--ok);
+}
+
+.badge-health-warn {
+  border-color: var(--warn);
+  color: var(--warn);
+}
+
+.badge-health-offline {
+  border-color: var(--danger);
+  color: var(--danger);
+  animation: offline-pulse 2s ease-in-out infinite;
+}
+
+@keyframes offline-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.badge-refreshing {
+  opacity: 0.5;
+  border-color: var(--toxin);
+}
+
+/* ── Issue count & batch toolbar ───────────────────────────────────────────── */
+
+.issue-count {
+  font-size: 0.68rem;
+  color: var(--iron);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  letter-spacing: 0.02em;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.batch-info {
+  color: var(--plague);
+  font-weight: 600;
+}
+
+/* ── Issue checkbox ───────────────────────────────────────────────────────── */
+
+.issue-select {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+
+.issue-select input {
+  display: none;
+}
+
+.issue-checkbox {
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--ash);
+  background: var(--abyss);
+  display: inline-block;
+  transition: border-color 150ms, background 150ms;
+  position: relative;
+}
+
+.issue-select input:checked + .issue-checkbox {
+  border-color: var(--toxin);
+  background: var(--mold);
+}
+
+.issue-select input:checked + .issue-checkbox::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 4px;
+  width: 4px;
+  height: 7px;
+  border: solid var(--plague);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.issue-checkbox:hover {
+  border-color: var(--dungeon);
+}
+
+/* ── Layout ───────────────────────────────────────────────────────────────── */
+
+.layout {
+  display: grid;
+  gap: 16px;
+}
+
+/* ── Cards ────────────────────────────────────────────────────────────────── */
+
+.card {
+  background: var(--crypt);
+  border: 1px solid var(--ash);
+  padding: 16px;
+  transition: border-color 200ms;
+}
+
+.card:hover {
+  border-color: var(--dungeon);
+}
+
+/* ── KPI grid ─────────────────────────────────────────────────────────────── */
+
+.grid {
+  display: grid;
+  gap: 2px;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+}
+
+.kpi {
+  background: var(--stone);
+  border: 1px solid var(--ash);
+  padding: 16px 14px;
+  text-align: center;
+  transition: border-color 200ms, box-shadow 200ms, background 200ms;
+}
+
+.kpi:hover {
+  border-color: rgba(61, 255, 20, 0.25);
+  box-shadow: var(--glow-weak);
+}
+
+.kpi .label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--iron);
+  margin: 0 0 6px;
+}
+
+.kpi .value {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 800;
+  line-height: 1.1;
+  color: var(--frost);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+
+.kpi .value.accent {
+  color: var(--plague);
+  text-shadow: 0 0 16px rgba(61, 255, 20, 0.2);
+}
+
+.kpi .value.warn {
+  color: var(--warn);
+}
+
+.kpi .value.danger {
+  color: var(--danger);
+}
+
+.kpi .desc {
+  margin: 4px 0 0;
+  font-size: 0.68rem;
+  color: var(--silver);
+}
+
+/* ── Clickable KPIs ──────────────────────────────────────────────────────── */
+
+.kpi-clickable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.kpi-clickable:active {
+  background: var(--cobble);
+}
+
+.kpi-active {
+  border-color: var(--toxin);
+  box-shadow: var(--glow-mid);
+  background: var(--cobble);
+}
+
+/* ── Toolbar ──────────────────────────────────────────────────────────────── */
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.toolbar-right label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--iron);
+}
+
+/* ── Form controls ────────────────────────────────────────────────────────── */
+
+select,
+input,
+button {
+  background: var(--abyss);
+  color: var(--bone);
+  border: 1px solid var(--ash);
+  padding: 6px 10px;
+  font-size: 0.78rem;
+  font-family: inherit;
+  transition: border-color 150ms, box-shadow 150ms;
+}
+
+select:focus,
+input:focus {
+  outline: none;
+  border-color: var(--toxin);
+  box-shadow: 0 0 0 1px var(--ooze);
+}
+
+button {
+  cursor: pointer;
+  font-weight: 500;
+}
+
+button:hover {
+  border-color: var(--toxin);
+}
+
+button:active {
+  background: var(--stone);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ── Issue list ───────────────────────────────────────────────────────────── */
+
+.issue-list {
+  display: grid;
+  gap: 8px;
+}
+
+.issue-card {
+  border: 1px solid var(--ash);
+  padding: 14px;
+  background: var(--stone);
+  transition: border-color 200ms, box-shadow 200ms;
+}
+
+.issue-card:hover {
+  border-color: rgba(61, 255, 20, 0.2);
+  box-shadow: var(--glow-weak);
+}
+
+.issue-title {
+  margin: 0;
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: var(--frost);
+}
+
+.issue-card > .muted {
+  font-size: 0.78rem;
+  margin-top: 6px;
+  color: var(--silver);
+}
+
+/* ── Meta row ─────────────────────────────────────────────────────────────── */
+
+.meta {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  color: var(--iron);
+  font-size: 0.75rem;
+}
+
+.meta span {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.7rem;
+}
+
+/* ── State badges ─────────────────────────────────────────────────────────── */
+
+.state-badge {
+  padding: 2px 8px;
+  border: 1px solid currentColor;
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.state-Todo         { color: var(--slate); }
+.state-In_Progress  { color: var(--plague); text-shadow: 0 0 8px rgba(61, 255, 20, 0.25); }
+.state-In_Review    { color: var(--info); }
+.state-Blocked      { color: var(--danger); }
+.state-Done         { color: var(--ok); }
+.state-Cancelled    { color: var(--warn); }
+
+/* ── Tags ─────────────────────────────────────────────────────────────────── */
+
+.tag {
+  border: 1px solid var(--ash);
+  padding: 2px 8px;
+  font-size: 0.68rem;
+  color: var(--silver);
+  transition: border-color 150ms;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  max-width: 100%;
+}
+
+.tag:hover {
+  border-color: var(--dungeon);
+}
+
+.tag-ok {
+  border-color: var(--toxin);
+  color: var(--toxin);
+}
+
+.tag-missing {
+  border-color: var(--danger, #ff4444);
+  color: var(--danger, #ff4444);
+}
+
+/* ── Action buttons ───────────────────────────────────────────────────────── */
+
+.actions {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.action-button {
+  background: var(--cobble);
+  color: var(--slate);
+  border: 1px solid var(--ash);
+  padding: 4px 10px;
+  font-size: 0.7rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: border-color 150ms, color 150ms, box-shadow 150ms;
+}
+
+.action-button:hover {
+  border-color: var(--toxin);
+  color: var(--frost);
+  box-shadow: var(--glow-weak);
+}
+
+.action-button:active {
+  background: var(--dungeon);
+}
+
+.action-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* ── More button (secondary actions toggle) ──────────────────────────────── */
+
+.btn-more {
+  background: var(--cobble);
+  color: var(--iron);
+  border: 1px solid var(--ash);
+  padding: 4px 8px;
+  font-size: 0.8rem;
+  font-weight: 700;
+  cursor: pointer;
+  letter-spacing: 0.1em;
+  line-height: 1;
+  min-width: 28px;
+  text-align: center;
+}
+
+.btn-more:hover {
+  border-color: var(--toxin);
+  color: var(--frost);
+}
+
+/* ── Secondary actions (hidden by default) ───────────────────────────────── */
+
+.actions-secondary {
+  display: none;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.actions-secondary.actions-secondary-visible {
+  display: flex;
+}
+
+/* ── History list ─────────────────────────────────────────────────────────── */
+
+.history {
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.7rem;
+  color: var(--iron);
+}
+
+.history li {
+  padding: 2px 0;
+  border-bottom: 1px solid rgba(52, 64, 52, 0.4);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+
+.history li:last-child {
+  border-bottom: none;
+}
+
+/* ── Mono utility ─────────────────────────────────────────────────────────── */
+
+.mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+/* ── Events panel ─────────────────────────────────────────────────────────── */
+
+.events {
+  max-height: 320px;
+  overflow: auto;
+  display: grid;
+  gap: 6px;
+}
+
+.event {
+  background: var(--stone);
+  border: 1px solid var(--ash);
+  border-left: 3px solid var(--iron);
+  padding: 8px 10px;
+  font-size: 0.78rem;
+  transition: border-color 150ms;
+}
+
+.event:hover {
+  border-color: var(--dungeon);
+}
+
+.event .mono {
+  font-size: 0.68rem;
+  color: var(--iron);
+  margin-bottom: 2px;
+}
+
+.event-runner   { border-left-color: var(--plague); }
+.event-error    { border-left-color: var(--danger); }
+.event-manual   { border-left-color: var(--info); }
+.event-progress { border-left-color: var(--warn); }
+.event-info     { border-left-color: var(--iron); }
+
+/* ── Toast notification ───────────────────────────────────────────────────── */
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.toast-item {
+  background: var(--stone);
+  border: 1px solid var(--danger);
+  padding: 10px 16px;
+  font-size: 0.78rem;
+  color: var(--frost);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  pointer-events: auto;
+  animation: toast-in 200ms ease-out;
+  max-width: 360px;
+}
+
+.toast-item.toast-success {
+  border-color: var(--ok);
+}
+
+.toast-item.toast-warn {
+  border-color: var(--warn);
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.toast-item.toast-out {
+  animation: toast-out 150ms ease-in forwards;
+}
+
+@keyframes toast-out {
+  to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+/* ── Loading skeleton ─────────────────────────────────────────────────────── */
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--stone) 25%,
+    var(--cobble) 50%,
+    var(--stone) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  height: 1em;
+}
+
+@keyframes shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ── Accent button ────────────────────────────────────────────────────────── */
+
+.btn-accent {
+  background: var(--mold);
+  color: var(--plague);
+  border: 1px solid var(--ooze);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.btn-accent:hover {
+  border-color: var(--toxin);
+  box-shadow: var(--glow-weak);
+}
+
+.btn-accent:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Create issue form ────────────────────────────────────────────────────── */
+
+.create-form {
+  background: var(--stone);
+  border: 1px solid var(--ash);
+  padding: 14px;
+  margin-bottom: 12px;
+}
+
+.create-form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.create-form-grid .span-2 {
+  grid-column: span 2;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--iron);
+  margin-bottom: 4px;
+}
+
+.form-group .hint {
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--ash);
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  background: var(--abyss);
+  color: var(--bone);
+  border: 1px solid var(--ash);
+  padding: 6px 10px;
+  font-size: 0.78rem;
+  font-family: inherit;
+}
+
+.form-group textarea {
+  resize: vertical;
+  min-height: 40px;
+}
+
+.create-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+/* ── Error detail (collapsible in issue card) ─────────────────────────────── */
+
+.error-detail {
+  margin-top: 8px;
+}
+
+.error-detail summary {
+  cursor: pointer;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--danger);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  list-style: none;
+  user-select: none;
+}
+
+.error-detail summary::before {
+  content: "▸ ";
+}
+
+.error-detail[open] summary::before {
+  content: "▾ ";
+}
+
+.error-detail pre {
+  margin: 6px 0 0;
+  padding: 8px 10px;
+  background: var(--abyss);
+  border: 1px solid rgba(251, 113, 133, 0.2);
+  color: var(--slate);
+  font-size: 0.7rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 200px;
+  overflow: auto;
+  line-height: 1.5;
+}
+
+/* ── Blocked-by indicator ─────────────────────────────────────────────────── */
+
+.blocked-by {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.68rem;
+  color: var(--danger);
+  padding: 2px 8px;
+  border: 1px solid rgba(251, 113, 133, 0.3);
+}
+
+.blocked-by::before {
+  content: "⛓";
+  font-size: 0.6rem;
+}
+
+/* ── Note/comment input ───────────────────────────────────────────────────── */
+
+.note-form {
+  margin-top: 8px;
+  display: flex;
+  gap: 6px;
+}
+
+.note-form input {
+  flex: 1;
+  background: var(--abyss);
+  color: var(--bone);
+  border: 1px solid var(--ash);
+  padding: 4px 8px;
+  font-size: 0.72rem;
+}
+
+.note-form input::placeholder {
+  color: var(--ash);
+}
+
+/* ── Session/pipeline detail panel ────────────────────────────────────────── */
+
+.session-panel {
+  margin-top: 10px;
+  background: var(--abyss);
+  border: 1px solid var(--ash);
+  padding: 10px;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.session-panel .session-header {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--iron);
+  margin-bottom: 8px;
+}
+
+.session-panel .pipeline-step {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(52, 64, 52, 0.3);
+  font-size: 0.72rem;
+}
+
+.session-panel .pipeline-step:last-child {
+  border-bottom: none;
+}
+
+.session-panel .step-provider {
+  color: var(--plague);
+  font-weight: 600;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.68rem;
+}
+
+.session-panel .step-status {
+  color: var(--silver);
+}
+
+.session-panel .step-duration {
+  color: var(--iron);
+  margin-left: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.68rem;
+}
+
+.session-panel .session-output {
+  margin-top: 8px;
+  padding: 8px;
+  background: var(--crypt);
+  border: 1px solid var(--ash);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.68rem;
+  color: var(--slate);
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 180px;
+  overflow: auto;
+  line-height: 1.5;
+}
+
+.session-loading {
+  text-align: center;
+  padding: 12px;
+  color: var(--iron);
+  font-size: 0.72rem;
+}
+
+/* ── Edit form (inline, reuses create-form-grid) ──────────────────────────── */
+
+.edit-form {
+  margin-top: 10px;
+  background: var(--abyss);
+  border: 1px solid var(--ash);
+  padding: 12px;
+}
+
+/* ── Delete confirmation ──────────────────────────────────────────────────── */
+
+.delete-confirm {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: rgba(251, 113, 133, 0.06);
+  border: 1px solid rgba(251, 113, 133, 0.25);
+  font-size: 0.72rem;
+  color: var(--danger);
+}
+
+.btn-danger {
+  background: rgba(251, 113, 133, 0.15);
+  color: var(--danger);
+  border: 1px solid var(--danger);
+  font-weight: 600;
+}
+
+.btn-danger:hover {
+  background: rgba(251, 113, 133, 0.25);
+}
+
+/* ── Concurrency inline control ───────────────────────────────────────────── */
+
+.concurrency-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.concurrency-input {
+  width: 48px;
+  padding: 2px 4px;
+  font-size: 0.72rem;
+  text-align: center;
+}
+
+.concurrency-btn {
+  font-size: 0.7em;
+}
+
+/* ── Progress bar ─────────────────────────────────────────────────────────── */
+
+.progress-bar {
+  display: flex;
+  height: 4px;
+  background: var(--stone);
+  margin-top: 8px;
+  overflow: hidden;
+}
+
+.progress-segment {
+  height: 100%;
+  transition: width 300ms ease;
+}
+
+.progress-done    { background: var(--ok); }
+.progress-running { background: var(--plague); }
+.progress-blocked { background: var(--danger); }
+
+/* ── Split form (inline in issue card) ────────────────────────────────────── */
+
+.split-form {
+  margin-top: 10px;
+  background: var(--abyss);
+  border: 1px solid var(--ash);
+  padding: 10px;
+}
+
+.split-label {
+  display: block;
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--iron);
+  margin-bottom: 6px;
+}
+
+.split-form textarea {
+  width: 100%;
+  background: var(--crypt);
+  color: var(--bone);
+  border: 1px solid var(--ash);
+  padding: 8px 10px;
+  font-size: 0.78rem;
+  font-family: inherit;
+  resize: vertical;
+  min-height: 60px;
+}
+
+.split-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+/* ── Selected issue (detail panel active) ─────────────────────────────────── */
+
+.issue-selected {
+  border-color: var(--toxin);
+  background: var(--cobble);
+}
+
+/* ── Running issue pulse ──────────────────────────────────────────────────── */
+
+.issue-running {
+  border-left: 3px solid var(--plague);
+  animation: running-pulse 3s ease-in-out infinite;
+}
+
+@keyframes running-pulse {
+  0%, 100% { border-left-color: var(--plague); box-shadow: none; }
+  50%      { border-left-color: var(--blight); box-shadow: inset 3px 0 8px -4px rgba(61, 255, 20, 0.15); }
+}
+
+/* ── History collapsible ──────────────────────────────────────────────────── */
+
+.history-detail {
+  margin-top: 4px;
+}
+
+.history-detail summary {
+  cursor: pointer;
+  font-size: 0.65rem;
+  color: var(--iron);
+  list-style: none;
+  user-select: none;
+}
+
+.history-detail summary::before {
+  content: "▸ ";
+}
+
+.history-detail[open] summary::before {
+  content: "▾ ";
+}
+
+.history-detail .history {
+  margin-top: 4px;
+}
+
+/* ── Collapsed section ────────────────────────────────────────────────────── */
+
+.collapsed-section details summary {
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.collapsed-section details summary::before {
+  content: "▸ ";
+  color: var(--iron);
+}
+
+.collapsed-section details[open] summary::before {
+  content: "▾ ";
+}
+
+/* ── Two-panel layout (desktop >= 900px) ─────────────────────────────────── */
+
+.issues-master-detail {
+  display: block;
+}
+
+.detail-panel {
+  display: none;
+}
+
+.detail-placeholder {
+  text-align: center;
+  padding: 32px 16px;
+  color: var(--iron);
+  font-size: 0.78rem;
+}
+
+.detail-panel .detail-issue-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--frost);
+  margin: 0 0 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--ash);
+}
+
+.detail-panel .detail-issue-header .mono {
+  color: var(--plague);
+  font-size: 0.72rem;
+}
+
+.btn-close-detail {
+  margin-left: auto;
+  background: transparent;
+  border: 1px solid var(--ash);
+  color: var(--iron);
+  font-size: 1rem;
+  line-height: 1;
+  padding: 2px 6px;
+  cursor: pointer;
+}
+
+.btn-close-detail:hover {
+  color: var(--frost);
+  border-color: var(--toxin);
+}
+
+.detail-panel .session-panel {
+  margin-top: 0;
+  max-height: none;
+  border: none;
+  padding: 0;
+  background: transparent;
+}
+
+@media (min-width: 900px) {
+  .shell {
+    max-width: 1400px;
+  }
+
+  .issues-master-detail {
+    display: grid;
+    grid-template-columns: 60% 40%;
+    gap: 0;
+  }
+
+  .master-panel {
+    border-right: 1px solid var(--ash);
+    padding-right: 16px;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  .detail-panel {
+    display: block;
+    padding-left: 16px;
+    position: sticky;
+    top: 0;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  /* Hide inline session panels on desktop */
+  .issue-card .session-panel {
+    display: none;
+  }
+}
+
+/* ── Responsive ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 899px) {
+
+  /* ── Shell & topbar ────────────────────────────────────────────────────── */
+
+  .shell {
+    padding: 10px;
+  }
+
+  .topbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .badges {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  /* Truncate subtitle on narrow screens */
+  #subtitle {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  h1 {
+    font-size: 0.95rem;
+  }
+
+  /* ── Toolbar & filters ─────────────────────────────────────────────────── */
+
+  .toolbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .toolbar-right {
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .toolbar-right label {
+    margin-top: 4px;
+  }
+
+  .toolbar-right select,
+  .toolbar-right input {
+    width: 100%;
+    min-height: 44px;
+  }
+
+  .toolbar-right button {
+    width: 100%;
+    min-height: 44px;
+  }
+
+  /* Make "+ New" prominent on mobile */
+  .toolbar-right .btn-accent {
+    font-size: 0.88rem;
+    padding: 10px;
+  }
+
+  /* ── KPI grid ──────────────────────────────────────────────────────────── */
+
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .kpi {
+    padding: 12px 8px;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .kpi .value {
+    font-size: 1.5rem;
+  }
+
+  .kpi .label {
+    font-size: 0.6rem;
+    word-break: break-word;
+  }
+
+  .kpi .desc {
+    font-size: 0.6rem;
+    word-break: break-word;
+  }
+
+  /* ── Issue cards ────────────────────────────────────────────────────────── */
+
+  .issue-card {
+    padding: 10px;
+  }
+
+  /* 1. Issue title with checkbox: prevent overflow, wrap properly */
+  .issue-title {
+    font-size: 0.84rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .issue-title .issue-select {
+    flex-shrink: 0;
+    margin-right: 0;
+    /* 44px touch target for checkbox */
+    min-width: 44px;
+    min-height: 44px;
+    justify-content: center;
+  }
+
+  .issue-card > .muted {
+    font-size: 0.72rem;
+  }
+
+  .meta {
+    font-size: 0.7rem;
+  }
+
+  /* ── Action buttons: 44px touch targets, full-width stacked ────────── */
+
+  .actions {
+    flex-direction: column;
+  }
+
+  .actions .action-button {
+    width: 100%;
+    text-align: center;
+    min-height: 44px;
+    padding: 10px;
+    font-size: 0.76rem;
+  }
+
+  .actions .btn-more {
+    width: 100%;
+    text-align: center;
+    min-height: 44px;
+    padding: 10px;
+    font-size: 0.88rem;
+  }
+
+  /* 3. Secondary actions: full-width stacked column */
+  .actions-secondary {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .actions-secondary .action-button {
+    width: 100%;
+    text-align: center;
+  }
+
+  /* ── 2. Batch toolbar: full-width stacked ──────────────────────────── */
+
+  .issue-count {
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .issue-count .action-button {
+    width: 100%;
+    min-height: 44px;
+    text-align: center;
+    padding: 10px;
+  }
+
+  /* ── 4. Note form: send button full-width ──────────────────────────── */
+
+  .note-form {
+    flex-direction: column;
+  }
+
+  .note-form input {
+    min-height: 44px;
+  }
+
+  .note-form .action-button {
+    width: 100%;
+    min-height: 44px;
+    text-align: center;
+  }
+
+  /* ── 5. Split form: textarea + buttons full-width ──────────────────── */
+
+  .split-form textarea {
+    min-height: 80px;
+  }
+
+  .split-form-actions {
+    flex-direction: column;
+  }
+
+  .split-form-actions .action-button {
+    width: 100%;
+    min-height: 44px;
+    text-align: center;
+  }
+
+  /* ── 6. Edit form & Create form ────────────────────────────────────── */
+
+  .create-form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .create-form-grid .span-2 {
+    grid-column: span 1;
+  }
+
+  .create-form {
+    padding: 10px;
+  }
+
+  .create-form-actions {
+    flex-direction: column;
+  }
+
+  .create-form-actions button,
+  .create-form-actions .action-button {
+    width: 100%;
+    min-height: 44px;
+    text-align: center;
+  }
+
+  .edit-form {
+    padding: 10px;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    min-height: 44px;
+  }
+
+  /* ── 7. Delete confirm: stacked, full-width buttons ────────────────── */
+
+  .delete-confirm {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .delete-confirm button,
+  .delete-confirm .action-button {
+    width: 100%;
+    min-height: 44px;
+    text-align: center;
+  }
+
+  /* ── 8. Session panel: inline on mobile with scroll ────────────────── */
+
+  .session-panel {
+    max-height: 50vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .session-panel .pipeline-step {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .session-panel .step-duration {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  /* ── 10. Event cards: prevent text overflow ─────────────────────────── */
+
+  .events {
+    max-height: 200px;
+  }
+
+  .event {
+    overflow: hidden;
+  }
+
+  .event .mono {
+    word-break: break-all;
+    overflow-wrap: break-word;
+  }
+
+  .event > div:last-child {
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+
+  /* ── 15. Detail panel: hidden on mobile ────────────────────────────── */
+  /* Already display:none by default (no min-width:900px) — reinforce */
+
+  .detail-panel {
+    display: none !important;
+  }
+
+  /* ── 18. History entries: wrap long mono text ───────────────────────── */
+
+  .history li {
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+
+  /* ── 19. Toast: bottom-center on mobile with safe margin ───────────── */
+
+  .toast {
+    bottom: 24px;
+    right: 10px;
+    left: 10px;
+    align-items: stretch;
+  }
+
+  .toast-item {
+    max-width: none;
+    text-align: center;
+  }
+
+  /* ── 20. Master panel: no max-height on mobile (full page scroll) ──── */
+
+  .master-panel {
+    max-height: none;
+    overflow-y: visible;
+  }
+
+  /* ── General touch targets: all standalone buttons ─────────────────── */
+
+  button {
+    min-height: 44px;
+  }
+
+  select {
+    min-height: 44px;
+  }
+
+  /* ── Concurrency control on mobile ─────────────────────────────────── */
+
+  .concurrency-control {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .concurrency-input {
+    min-height: 44px;
+    width: 64px;
+  }
+
+  .concurrency-btn {
+    min-height: 44px;
+  }
+}