/* =====================================================================
   Okto Pulse · read-only product surface

   This embed mirrors the current application shell from:
   - frontend/src/App.tsx
   - frontend/src/components/layout/Header.tsx
   - frontend/src/components/layout/Sidebar.tsx
   - frontend/src/index.css + tailwind.config.cjs

   The marketing page keeps its own visual system. Everything below is
   scoped to the embedded Pulse surface and its card-detail dialog.
   ===================================================================== */

:root {
  --accent-300: #7dd3fc;
  --accent-400: #38bdf8;
  --accent-500: #0ea5e9;
  --accent-600: #0284c7;
  --accent-900: #0c4a6e;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --surface-50: #f8fafc;
  --surface-100: #f1f5f9;
  --surface-200: #e2e8f0;
  --surface-300: #cbd5e1;
  --surface-400: #94a3b8;
  --surface-500: #64748b;
  --surface-600: #475569;
  --surface-700: #334155;
  --surface-800: #1e293b;
  --surface-850: #172033;
  --surface-900: #0f172a;
  --surface-950: #020617;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --blue-200: #bfdbfe;
  --blue-900: #1e3a8a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --rose-400: #fb7185;
  --cyan-400: #22d3ee;
  --kanban-not-started: #64748b;
  --kanban-started: #0ea5e9;
  --kanban-in-progress: #f59e0b;
  --kanban-validation: #8b5cf6;
  --kanban-rejected: #fb7185;
  --kanban-on-hold: #ef4444;
  --kanban-done: #10b981;
  --kanban-cancelled: #94a3b8;
  --board-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.board-embed,
.board-modal {
  box-sizing: border-box;
  font-family: "General Sans", system-ui, -apple-system, sans-serif;
}

.board-embed *,
.board-modal * {
  box-sizing: border-box;
}

.board-embed button,
.board-modal button,
.board-embed input,
.board-modal input,
.board-embed select,
.board-modal select {
  font-family: inherit;
}

.board-embed button,
.board-modal button {
  border: 0;
}

.board-embed h1,
.board-embed h2,
.board-embed h3,
.board-embed h4,
.board-modal h1,
.board-modal h2,
.board-modal h3,
.board-modal h4 {
  font-family: "Satoshi", system-ui, sans-serif;
}

.board-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* ---------- application frame ---------- */

.board-embed {
  position: relative;
  display: flex;
  height: min(78vh, 760px);
  min-height: 620px;
  flex-direction: column;
  overflow: hidden;
  color: var(--surface-100);
  background: var(--surface-950);
  border: 1px solid var(--surface-800) !important;
  border-radius: 16px !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  animation: board-embed-in 700ms var(--board-ease) both;
  isolation: isolate;
}

.board-embed::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  content: "";
  opacity: 0.03;
  pointer-events: none;
}

@keyframes board-embed-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.board-topbar {
  position: relative;
  z-index: 30;
  display: flex;
  height: 50px;
  flex: 0 0 50px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid rgba(31, 41, 55, 0.6);
}

.board-topbar__identity,
.board-topbar__actions {
  display: flex;
  min-width: 0;
  align-items: center;
}

.board-topbar__identity { gap: 12px; }
.board-topbar__actions { gap: 12px; }

.board-sidebar-toggle {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 6px;
  color: var(--gray-400);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.board-sidebar-toggle:hover,
.board-sidebar-toggle:focus-visible {
  color: var(--gray-300);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.board-icon--panel-open { display: none; }
.board-embed.is-sidebar-collapsed .board-icon--panel-close { display: none; }
.board-embed.is-sidebar-collapsed .board-icon--panel-open { display: block; }

.board-topbar__wordmark {
  display: block;
  width: auto;
  height: 28px;
  flex: 0 0 auto;
}

.board-topbar__crumb {
  overflow: hidden;
  color: var(--gray-400);
  font-size: 14px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-app-button {
  display: inline-flex;
  height: 36px;
  min-width: 50px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  color: var(--surface-300);
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.6) !important;
  border-radius: 8px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.board-app-button:hover,
.board-app-button:focus-visible {
  color: #fff;
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(71, 85, 105, 0.8) !important;
  outline: none;
}

.board-app-button:active { transform: scale(0.97); }
.board-app-button.is-refreshing .board-icon { animation: board-spin 650ms linear; }

@keyframes board-spin { to { transform: rotate(360deg); } }

/* ---------- exact four-option product menu ---------- */

.board-menu { position: relative; }
.board-menu__trigger { min-width: 66px; }
.board-menu__trigger[aria-expanded="true"] {
  border-color: var(--accent-300) !important;
  box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.7);
}

.board-icon--chevron { width: 12px; height: 12px; }

.board-menu__dropdown {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  width: 224px;
  overflow: hidden;
  padding: 4px 0;
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.42);
  animation: board-menu-in 140ms ease-out both;
}

.board-menu__dropdown[hidden] { display: none; }

@keyframes board-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.board-menu__dropdown button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--gray-300);
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.board-menu__dropdown button:hover,
.board-menu__dropdown button:focus-visible {
  color: var(--surface-100);
  background: var(--gray-700);
  outline: none;
}

.board-menu__dropdown .board-icon { width: 14px; height: 14px; }

.board-toast {
  position: absolute;
  z-index: 70;
  top: 62px;
  right: 16px;
  max-width: min(360px, calc(100% - 32px));
  padding: 9px 12px;
  color: var(--surface-200);
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--surface-700);
  border-radius: 9px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.board-toast.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- sidebar ---------- */

.board-shell {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.board-sidebar {
  width: 256px;
  min-width: 256px;
  height: 100%;
  overflow: hidden;
  color: var(--gray-300);
  background: rgba(15, 23, 42, 0.8);
  border-right: 1px solid rgba(51, 65, 85, 0.3);
  backdrop-filter: blur(12px);
  transition: width 300ms ease-in-out, min-width 300ms ease-in-out, border-color 300ms ease-in-out;
}

.board-embed.is-sidebar-collapsed .board-sidebar {
  width: 0;
  min-width: 0;
  border-right-color: transparent;
}

.board-sidebar__inner {
  display: flex;
  width: 256px;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.board-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 16px;
  border-bottom: 1px solid var(--gray-700);
}

.board-sidebar__head h2 {
  margin: 0;
  color: var(--gray-200);
  font-size: 16px;
  font-weight: 600;
}

.board-sidebar__add {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: var(--gray-500);
  background: transparent;
  border-radius: 4px;
  cursor: default;
}

.board-sidebar__add .board-icon { width: 16px; height: 16px; }

.board-sidebar__nav {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
}

.board-sidebar__label {
  display: block;
  padding: 4px 12px;
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.board-sidebar__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  overflow: hidden;
  color: var(--gray-300);
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
  cursor: default;
}

.board-sidebar__item.is-active {
  color: var(--blue-200);
  background: var(--blue-900);
}

.board-sidebar__item .board-icon { width: 16px; height: 16px; }
.board-sidebar__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- board stage navigation ---------- */

.board-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
}

.board-tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin: 0 0 16px;
  padding: 2px;
  overflow-x: auto;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(51, 65, 85, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  scrollbar-width: none;
}

.board-tabs::-webkit-scrollbar { display: none; }

.board-tab {
  --tab-color: var(--surface-300);
  --tab-color-muted: rgba(148, 163, 184, 0.72);
  --tab-ring: rgba(100, 116, 139, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  color: var(--surface-400);
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.board-tab[data-stage="stories"] { --tab-color: var(--surface-300); --tab-color-muted: rgba(148, 163, 184, 0.72); --tab-ring: rgba(100, 116, 139, 0.4); }
.board-tab[data-stage="ideations"] { --tab-color: var(--amber-300); --tab-color-muted: rgba(251, 191, 36, 0.62); --tab-ring: rgba(245, 158, 11, 0.3); }
.board-tab[data-stage="refinements"] { --tab-color: var(--cyan-400); --tab-color-muted: rgba(34, 211, 238, 0.58); --tab-ring: rgba(34, 211, 238, 0.28); }
.board-tab[data-stage="specs"] { --tab-color: var(--violet-300); --tab-color-muted: rgba(167, 139, 250, 0.62); --tab-ring: rgba(139, 92, 246, 0.3); }
.board-tab[data-stage="sprints"] { --tab-color: var(--accent-300); --tab-color-muted: rgba(56, 189, 248, 0.58); --tab-ring: rgba(14, 165, 233, 0.3); }
.board-tab[data-stage="tasks"] { --tab-color: var(--emerald-300); --tab-color-muted: rgba(52, 211, 153, 0.6); --tab-ring: rgba(16, 185, 129, 0.3); }

.board-tab .board-icon {
  width: 15px;
  height: 15px;
  color: var(--tab-color-muted);
  transition: color 180ms ease;
}

.board-tab:hover { color: #fff; }

.board-tab.is-active {
  color: var(--tab-color);
  background: var(--surface-700);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--tab-ring);
}

.board-tab.is-active .board-icon { color: var(--tab-color); }

.board-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  animation: board-panel-in 240ms ease-out both;
}

@keyframes board-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- current Pulse toolbars and filters ---------- */

.board-panel-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.board-panel-head__title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.board-panel-head h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.board-panel-head__count {
  color: var(--surface-400);
  font-size: 14px;
  white-space: nowrap;
}

.board-panel-head__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.board-search {
  position: relative;
  display: flex;
  width: 224px;
  height: 36px;
  align-items: center;
  flex: 0 1 224px;
}

.board-search .board-icon {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--surface-500);
  pointer-events: none;
}

.board-search input {
  width: 100%;
  height: 100%;
  padding: 8px 10px 8px 32px;
  color: var(--surface-100);
  background: rgba(30, 41, 59, 0.86);
  border: 1px solid var(--surface-700);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.board-search input::placeholder { color: var(--surface-500); }
.board-search input:focus { border-color: var(--accent-500); box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.4); }

.board-view-toggle {
  display: inline-flex;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid var(--surface-700);
  border-radius: 8px;
}

.board-view-toggle button {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--surface-500);
  background: transparent;
  border-radius: 6px;
  cursor: default;
}

.board-view-toggle button.is-active { color: var(--surface-100); background: var(--surface-700); }
.board-view-toggle .board-icon { width: 14px; height: 14px; }

.board-new-button {
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
}

.board-new-button .board-icon { width: 16px; height: 16px; }

.board-filters {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.board-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  color: var(--gray-300);
  background: var(--gray-700);
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.board-filter:hover { background: var(--gray-600); }
.board-filter.is-active { color: #fff; background: var(--accent-500); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.board-filter--branch { margin-left: 8px; color: var(--surface-400); }
.board-filter--archived { color: var(--surface-400); }
.board-filter--offset { margin-left: 8px; }
.board-filter--task { padding-inline: 8px; }
.board-filter--task .board-icon { width: 10px; height: 10px; }
.board-filter--sprint { padding-inline: 12px; font-weight: 500; }
.board-filter--sprint.is-active { background: #3b82f6; }
.board-filter .board-icon { width: 12px; height: 12px; }

/* ---------- lists and entity cards ---------- */

.board-list {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding-right: 3px;
  overflow-y: auto;
}

.board-card {
  position: relative;
  display: block;
  width: 100%;
  flex: 0 0 auto;
  padding: 16px;
  color: var(--surface-100);
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.4) !important;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.board-card:hover,
.board-card:focus-visible {
  border-color: rgba(2, 132, 199, 0.4) !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3), 0 2px 6px -2px rgba(0, 0, 0, 0.2);
  outline: none;
  transform: translateY(-1px);
}

.board-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.board-card__title {
  max-width: calc(100% - 28px);
  overflow: hidden;
  color: #fff;
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-card__desc {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--surface-400);
  font-size: 12px;
  line-height: 17px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.board-card__metrics,
.board-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.board-card__chevron {
  position: absolute;
  top: 18px;
  right: 15px;
  width: 15px;
  height: 15px;
  color: var(--surface-600);
}

.board-card--static { cursor: default; }
.board-card--static:hover { border-color: rgba(51, 65, 85, 0.4) !important; box-shadow: none; transform: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.pill--status { color: var(--gray-300); background: var(--gray-700); }
.pill--status-card { font-size: 12px; }
.pill--status-modal { min-height: 24px; padding: 4px 8px; font-size: 12px; line-height: 16px; }
.pill__icon { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.pill--status[data-status="draft"],
.pill--status[data-status="not_started"] { color: #d1d5db; background: #374151; }
.pill--status[data-status="review"] { color: #fde047; background: rgba(113, 63, 18, 0.4); }
.pill--status[data-status="approved"] { color: #86efac; background: rgba(20, 83, 45, 0.4); }
.pill--status[data-entity="ideation"][data-status="approved"],
.pill--status[data-status="ready"] { color: #93c5fd; background: rgba(30, 58, 138, 0.4); }
.pill--status[data-status="evaluating"] { color: #c4b5fd; background: rgba(76, 29, 149, 0.4); }
.pill--status[data-status="validated"] { color: #d8b4fe; background: rgba(88, 28, 135, 0.4); }
.pill--status[data-status="in_progress"],
.pill--status[data-status="started"],
.pill--status[data-status="active"] { color: #93c5fd; background: rgba(30, 58, 138, 0.4); }
.pill--status[data-status="done"],
.pill--status[data-status="closed"],
.pill--status[data-status="converted"] { color: #6ee7b7; background: rgba(6, 78, 59, 0.4); }
.pill--status[data-status="cancelled"] { color: #fca5a5; background: rgba(127, 29, 29, 0.4); }

.pill--version { padding-inline: 0; color: var(--surface-400); background: transparent; }
.pill--complexity { color: var(--red-300); background: rgba(127, 29, 29, 0.58); text-transform: capitalize; }
.pill--metric { color: var(--amber-300); background: rgba(120, 53, 15, 0.5); }
.pill--tag { padding: 1px 6px; color: var(--blue-200); background: rgba(30, 58, 138, 0.85); border-radius: 3px; }
.pill--synthetic { color: var(--amber-300); background: rgba(120, 53, 15, 0.45); }

.board-synthetic-note {
  flex: 0 0 auto;
  margin: 0 0 10px;
  color: var(--surface-500);
  font-size: 11px;
  line-height: 16px;
}

.board-pagination {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  padding: 10px 12px;
  color: var(--surface-300);
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--surface-700);
  border-radius: 12px;
  font-size: 12px;
}

.board-pagination__controls { display: flex; align-items: center; gap: 8px; }
.board-pagination select,
.board-pagination button {
  height: 32px;
  padding: 5px 10px;
  color: var(--surface-300);
  background: var(--surface-800);
  border: 1px solid var(--surface-700);
  border-radius: 7px;
  font-size: 12px;
}
.board-pagination button { opacity: 0.45; }

.board-empty {
  display: flex;
  min-height: 230px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 24px;
  color: var(--surface-500);
  border: 1px dashed var(--surface-700);
  border-radius: 12px;
  text-align: center;
}

.board-empty .board-icon { width: 38px; height: 38px; margin-bottom: 10px; color: var(--surface-600); }
.board-empty strong { margin-bottom: 4px; color: var(--surface-300); font-size: 14px; font-weight: 500; }
.board-empty p { max-width: 48ch; margin: 0; color: var(--surface-500); font-size: 12px; line-height: 18px; }

/* ---------- current tasks/Kanban surface ---------- */

.board-task-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.board-task-toolbar .board-search { width: 190px; flex-basis: 190px; margin-right: 8px; }
.board-task-toolbar > .board-icon { width: 14px; height: 14px; color: var(--surface-400); }
.board-task-toolbar .board-filter--archived { margin-left: auto; }

.board-kanban {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 16px;
  padding-bottom: 10px;
  overflow-x: auto;
  overflow-y: hidden;
}

.board-kanban__column {
  --column-color: var(--kanban-not-started);
  display: flex;
  width: 280px;
  min-width: 280px;
  flex-direction: column;
  padding: 12px;
  overflow: hidden;
  background: rgba(30, 41, 59, 0.5);
  border-top: 3px solid var(--column-color);
  border-radius: 12px 12px 10px 10px;
}

.board-kanban__column[data-status="started"] { --column-color: var(--kanban-started); }
.board-kanban__column[data-status="in_progress"] { --column-color: var(--kanban-in-progress); }
.board-kanban__column[data-status="validation"] { --column-color: var(--kanban-validation); }
.board-kanban__column[data-status="rejected"] { --column-color: var(--kanban-rejected); }
.board-kanban__column[data-status="on_hold"] { --column-color: var(--kanban-on-hold); }
.board-kanban__column[data-status="done"] { --column-color: var(--kanban-done); }
.board-kanban__column[data-status="cancelled"] { --column-color: var(--kanban-cancelled); }

.board-kanban__head {
  display: block;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  color: var(--surface-200);
  border-bottom: 2px solid transparent;
  font-family: "Satoshi", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.board-kanban__title { display: flex; align-items: center; gap: 8px; }

.board-kanban__types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.board-card-type {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 6px;
  color: var(--surface-400);
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--surface-700) !important;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  line-height: 15px;
  text-transform: none;
}

.board-card-type span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-card-type b { color: var(--surface-300); font-size: 9px; font-weight: 600; }
.board-card-type.is-active { color: var(--surface-200); background: var(--surface-800); }
.board-card-type--test.is-active { color: var(--violet-300); }
.board-card-type--bug.is-active { color: var(--red-300); }

.board-kanban__count {
  padding: 2px 6px;
  color: var(--surface-300);
  background: var(--surface-600);
  border-radius: 4px;
  font-size: 10px;
  line-height: 16px;
}

.board-kanban__add { margin-left: auto; color: var(--surface-400); font-size: 20px; line-height: 16px; }

.board-kanban__cards {
  min-height: 0;
  flex: 1 1 auto;
  padding-right: 2px;
  overflow-y: auto;
}

.board-task-card {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px;
  color: var(--surface-100);
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(51, 65, 85, 0.6);
  border-right: 4px solid var(--column-color);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.board-task-card:hover { background: rgba(51, 65, 85, 0.78); border-color: rgba(100, 116, 139, 0.72); border-right-color: var(--column-color); transform: translateY(-1px); }
.board-task-card:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; }

.board-task-card__role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  padding: 2px 6px;
  color: var(--violet-300);
  background: rgba(76, 29, 149, 0.65);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.board-task-card h3 {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-task-card p {
  display: -webkit-box;
  margin: 4px 0 8px;
  overflow: hidden;
  color: var(--surface-400);
  font-size: 12px;
  line-height: 17px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.board-task-card__meta { display: flex; flex-wrap: wrap; gap: 5px; }

.board-task-card__meta span {
  padding: 2px 6px;
  color: var(--amber-300);
  background: rgba(120, 53, 15, 0.55);
  border-radius: 4px;
  font-size: 10px;
}

.board-task-card__meta span:last-child { color: var(--surface-200); background: var(--surface-600); }

/* ---------- board settings/details shared with the existing content ---------- */

.gov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.gov-tile {
  padding: 10px 12px;
  background: rgba(30, 41, 59, 0.78);
  border: 1px solid rgba(51, 65, 85, 0.58);
  border-radius: 10px;
}

.gov-tile__label {
  margin-bottom: 4px;
  color: var(--surface-500);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gov-tile__value { color: #fff; font-family: "Satoshi", system-ui, sans-serif; font-size: 15px; font-weight: 600; }
.gov-tile__value.is-on { color: var(--emerald-300); }
.gov-tile__value.is-off { color: var(--surface-500); }

.activity-feed { display: flex; flex-direction: column; }
.activity-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; padding: 9px 4px; color: var(--surface-300); border-bottom: 1px solid var(--surface-800); font-size: 12px; }
.activity-row__time { color: var(--surface-500); font-family: ui-monospace, monospace; font-size: 10px; }
.activity-row__actor { color: var(--surface-500); font-size: 10px; }
.activity-row__text b { color: var(--surface-100); font-weight: 500; }

/* ---------- card detail dialog ---------- */

.board-modal-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
  overflow-y: auto;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(4px);
}

.board-modal-backdrop[hidden] { display: none; }

.board-modal {
  width: min(980px, 100%);
  overflow: hidden;
  color: var(--surface-100);
  background: var(--surface-900);
  border: 1px solid var(--surface-700);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.68);
  animation: board-modal-in 200ms var(--board-ease) both;
}

@keyframes board-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.board-modal__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--surface-800); }
.board-modal__head h3 { min-width: 0; flex: 1; margin: 0; overflow: hidden; color: #fff; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.board-modal__close { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; color: var(--surface-400); background: transparent; border-radius: 8px; font-size: 23px; cursor: pointer; }
.board-modal__close:hover { color: #fff; background: var(--surface-800); }

.board-modal__tabs { display: flex; gap: 4px; padding: 8px 16px; overflow-x: auto; border-bottom: 1px solid var(--surface-800); }
.board-modal__tab { padding: 6px 10px; color: var(--surface-400); background: transparent; border-radius: 7px; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.board-modal__tab:hover { color: #fff; background: rgba(51, 65, 85, 0.5); }
.board-modal__tab.is-active { color: var(--violet-300); background: var(--surface-800); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.25); }

.board-modal__body { max-height: 68vh; padding: 20px; overflow-y: auto; }
.board-modal__section + .board-modal__section { margin-top: 22px; }
.board-modal__section h4 { margin: 0 0 9px; color: var(--surface-500); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.board-modal__section p { margin: 0; color: var(--surface-300); font-size: 13px; line-height: 1.7; white-space: pre-line; }
.board-modal__section code { padding: 1px 5px; color: var(--accent-300); background: rgba(14, 165, 233, 0.12); border-radius: 4px; font-family: ui-monospace, monospace; font-size: 0.88em; }

.req-item { margin-bottom: 8px; padding: 11px 13px; color: var(--surface-300); background: var(--surface-850); border: 1px solid var(--surface-800); border-radius: 9px; font-size: 13px; line-height: 1.6; }
.req-item code.req-id { display: inline-block; margin-bottom: 5px; padding: 1px 6px; color: var(--violet-300); background: rgba(139, 92, 246, 0.13); border-radius: 3px; font-family: ui-monospace, monospace; font-size: 10px; }
.req-item .req-status { float: right; }
.test-card { border-left: 2px solid var(--accent-500); }
.test-card__grid { display: grid; grid-template-columns: 70px 1fr; gap: 3px 10px; margin-top: 6px; font-size: 12px; }
.test-card__grid b { color: var(--surface-500); font-weight: 500; }
.contract-card__route { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.contract-card__method { padding: 2px 7px; color: var(--emerald-300); background: rgba(16, 185, 129, 0.16); border-radius: 4px; font-size: 10px; font-weight: 700; }
.contract-card__path { color: var(--surface-100); font-family: ui-monospace, monospace; font-size: 12px; }
.decision-card__title { margin-bottom: 4px; color: #fff; font-family: "Satoshi", system-ui, sans-serif; font-size: 13px; font-weight: 600; }

.board-loading { display: flex; min-height: 240px; align-items: center; justify-content: center; color: var(--surface-500); font-size: 13px; }

/* ---------- current Pulse entity dialog ---------- */

.board-modal-backdrop {
  align-items: center;
  padding: 16px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
}

.board-modal {
  position: relative;
  display: flex;
  width: min(768px, 100%);
  height: 90vh;
  max-height: 90vh;
  flex-direction: column;
  overflow: hidden;
  color: var(--gray-100);
  background: var(--gray-800);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.48);
}

.board-modal.is-expanded {
  width: 95vw;
  max-width: 95vw;
  height: 95vh;
  max-height: 95vh;
}

.board-modal--settings {
  width: min(896px, 100%);
  height: auto;
  max-height: 90vh;
  background: #0f172a;
  border: 1px solid rgba(51, 65, 85, 0.5);
}
.board-modal--settings .board-modal__head,
.board-modal--settings .board-modal__footer { border-color: rgba(51, 65, 85, 0.5); }
.board-modal--settings .board-modal__footer { background: #0f172a; }

.board-modal__head {
  display: flex;
  min-height: 65px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-700);
}

.board-modal__title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.board-modal__head h3,
.board-modal__title-row h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-modal__version {
  flex: 0 0 auto;
  color: var(--gray-400);
  font-size: 12px;
}

.board-modal__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.board-modal__actions button,
.board-modal__close {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--gray-400);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.board-modal__actions button:hover,
.board-modal__close:hover {
  color: var(--gray-300);
  background: var(--gray-700);
}

.board-modal__actions .board-modal__close {
  width: 28px;
  height: 28px;
  padding: 4px;
}

.modal-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.board-modal__close .modal-icon { width: 20px; height: 20px; }

.board-modal__tabs {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  gap: 0;
  padding: 12px 24px 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--gray-700);
}

.board-modal__tab {
  position: relative;
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  color: var(--gray-400);
  background: transparent;
  border-bottom: 2px solid transparent !important;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
}

.board-modal__tab .modal-icon { width: 14px; height: 14px; }
.board-modal__tab b {
  min-width: 17px;
  padding: 1px 5px;
  color: var(--gray-400);
  background: var(--gray-700);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}
.board-modal__tab:hover { color: var(--gray-200); background: transparent; }
.board-modal__tab.is-active {
  color: #38bdf8;
  background: transparent;
  border-bottom-color: #0ea5e9 !important;
  box-shadow: none;
}
.board-modal__tab.is-active b { color: #7dd3fc; background: rgba(3, 105, 161, 0.35); }

.board-modal__lineage {
  display: flex;
  min-height: 35px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 7px 24px;
  overflow: hidden;
  color: var(--gray-500);
  background: rgba(17, 24, 39, 0.42);
  border-bottom: 1px solid rgba(55, 65, 81, 0.65);
  font-size: 10px;
  white-space: nowrap;
}
.board-modal__lineage strong {
  max-width: 180px;
  overflow: hidden;
  color: var(--gray-300);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
}
.board-modal__lineage i { color: var(--gray-600); font-style: normal; }

.board-modal__body {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  padding: 16px 24px;
  overflow: auto;
}

.board-modal__footer {
  display: flex;
  min-height: 65px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--gray-800);
  border-top: 1px solid var(--gray-700);
}
.board-modal__footer > div { display: flex; align-items: center; gap: 8px; }

.modal-button {
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  color: var(--gray-200);
  background: var(--gray-700);
  border: 1px solid var(--gray-600) !important;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.modal-button .modal-icon { width: 14px; height: 14px; }
.modal-button:hover { background: var(--gray-600); }
.modal-button--primary { color: #fff; background: #0284c7; border-color: #0284c7 !important; }
.modal-button--primary:hover { background: #0369a1; }
.modal-button--danger { color: #fca5a5; background: transparent; border-color: rgba(239, 68, 68, 0.35) !important; }
.modal-button--danger:hover { color: #fecaca; background: rgba(127, 29, 29, 0.25); }

.board-modal__notice {
  position: absolute;
  z-index: 8;
  right: 20px;
  bottom: 74px;
  max-width: min(380px, calc(100% - 40px));
  padding: 9px 12px;
  color: var(--gray-100);
  background: var(--gray-900);
  border: 1px solid var(--gray-600);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}
.board-modal__notice.is-visible { animation: modal-notice 2.2s ease both; }
@keyframes modal-notice {
  0%, 100% { opacity: 0; transform: translateY(6px); }
  10%, 88% { opacity: 1; transform: translateY(0); }
}

/* ---------- shared entity modal content ---------- */

.modal-section-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-section-stack .board-modal__section + .board-modal__section { margin-top: 0; }
.board-modal__section + .board-modal__section { margin-top: 20px; }
.board-modal__section h4 {
  margin: 0 0 6px;
  color: var(--gray-300);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.board-modal__section p {
  margin: 0;
  color: var(--gray-300);
  font-size: 13px;
  line-height: 20px;
  white-space: normal;
}
.board-modal__markdown { color: var(--gray-300); font-size: 13px; line-height: 20px; }
.board-modal__markdown h4,
.board-modal__markdown h5 { margin: 14px 0 5px; color: var(--gray-200); font-size: 13px; font-weight: 600; }
.board-modal__markdown h4:first-child,
.board-modal__markdown h5:first-child { margin-top: 0; }
.board-modal__markdown p { margin: 0 0 8px; }
.board-modal__markdown ul,
.board-modal__markdown ol { margin: 5px 0 9px; padding-left: 20px; }
.board-modal__markdown ul { list-style: disc outside; }
.board-modal__markdown ol { list-style: decimal outside; }
.board-modal__markdown li + li { margin-top: 4px; }
.board-modal__markdown code,
.board-modal__section code {
  padding: 1px 4px;
  color: #7dd3fc;
  background: rgba(3, 105, 161, 0.25);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}
.board-modal__labels { display: flex; flex-wrap: wrap; gap: 4px; }
.board-modal__labels span {
  padding: 2px 6px;
  color: #93c5fd;
  background: rgba(30, 58, 138, 0.55);
  border-radius: 4px;
  font-size: 11px;
  line-height: 16px;
}

.board-modal__subtabs {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  overflow-x: auto;
  background: rgba(17, 24, 39, 0.55);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
}
.board-modal__subtabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: var(--gray-400);
  background: transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.board-modal__subtabs button span {
  padding: 1px 5px;
  color: var(--gray-400);
  background: var(--gray-700);
  border-radius: 999px;
  font-size: 10px;
}
.board-modal__subtabs button.is-active {
  color: #38bdf8;
  background: var(--gray-700);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.modal-empty {
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 28px;
  color: var(--gray-500);
  background: rgba(17, 24, 39, 0.24);
  border: 1px dashed var(--gray-700);
  border-radius: 10px;
  text-align: center;
}
.modal-empty .modal-icon { width: 30px; height: 30px; margin-bottom: 10px; color: var(--gray-600); }
.modal-empty strong { color: var(--gray-300); font-size: 13px; font-weight: 600; }
.modal-empty p { max-width: 48ch; margin: 5px 0 0; color: var(--gray-500); font-size: 12px; line-height: 18px; }
.modal-empty--compact { min-height: 110px; }

.reference-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(17, 24, 39, 0.36);
  border: 1px solid var(--gray-700);
  border-radius: 9px;
}
.reference-card__icon {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: #7dd3fc;
  background: rgba(3, 105, 161, 0.2);
  border-radius: 8px;
}
.reference-card > div:nth-child(2) { min-width: 0; }
.reference-card > div > span { color: var(--gray-500); font-size: 10px; text-transform: uppercase; }
.reference-card h4 { margin: 2px 0; overflow: hidden; color: var(--gray-100); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.reference-card p { margin: 0; color: var(--gray-400); font-size: 11px; }
.reference-card > .modal-icon { color: var(--gray-500); }

.versions-current {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.versions-current > div {
  padding: 10px 12px;
  background: rgba(17, 24, 39, 0.4);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
}
.versions-current span { display: block; color: var(--gray-500); font-size: 10px; text-transform: uppercase; }
.versions-current strong { display: block; margin-top: 3px; color: var(--gray-100); font-size: 13px; }
.panel-kicker { margin: 0 0 8px; color: var(--gray-300); font-size: 13px; }
.version-timeline { position: relative; padding-left: 12px; }
.version-timeline::before { position: absolute; top: 8px; bottom: 8px; left: 16px; width: 1px; content: ""; background: var(--gray-700); }
.version-row { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; }
.version-row__dot { z-index: 1; width: 9px; height: 9px; margin-top: 4px; background: #0ea5e9; border: 2px solid var(--gray-800); border-radius: 50%; }
.version-row strong { color: var(--gray-200); font-size: 12px; }
.version-row p { margin: 2px 0 0; color: var(--gray-400); font-size: 11px; }
.version-row time { color: var(--gray-500); font-size: 10px; }

.activity-panel__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 8px 10px;
  color: var(--gray-400);
  background: rgba(17, 24, 39, 0.35);
  border-radius: 8px;
  font-size: 11px;
}
.activity-panel__summary strong { color: var(--gray-200); font-size: 12px; }

.qa-panel__footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.qa-panel__footer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  color: var(--gray-400);
  background: var(--gray-700);
  border-radius: 7px;
  font-size: 12px;
}
.qa-panel__footer .modal-icon { width: 13px; height: 13px; }

.research-panel__head,
.policy-panel__head,
.ambiguity-panel__head,
.spec-evaluation > header,
.kg-panel > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(17, 24, 39, 0.38);
  border: 1px solid var(--gray-700);
  border-radius: 9px;
}
.research-panel__head > div,
.policy-panel__head > div,
.ambiguity-panel__head > div,
.spec-evaluation > header > div,
.kg-panel > header > div {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
}
.research-panel__head h3,
.policy-panel__head h3,
.ambiguity-panel__head h3 {
  margin: 0;
  color: var(--gray-100);
  font-size: 14px;
}
.research-panel__head p,
.policy-panel__head p,
.ambiguity-panel__head p {
  margin: 2px 0 0;
  color: var(--gray-400);
  font-size: 11px;
}
.research-panel__head > span,
.policy-panel__head > span,
.ambiguity-panel__head > span,
.kg-panel > header > span {
  padding: 3px 7px;
  color: #86efac;
  background: rgba(20, 83, 45, 0.45);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.decision-detail {
  margin-top: 8px;
  padding: 12px;
  background: rgba(17, 24, 39, 0.34);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
}
.decision-detail > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.decision-detail > span,
.decision-detail header > span:first-child { color: #c4b5fd; font-family: ui-monospace, monospace; font-size: 10px; }
.decision-detail h4 { margin: 5px 0 3px; color: var(--gray-100); font-size: 13px; }
.decision-detail p { margin: 0; color: var(--gray-400); font-size: 12px; line-height: 18px; }
.decision-detail details { margin-top: 8px; color: var(--gray-400); font-size: 11px; }
.decision-detail summary { cursor: pointer; }

.policy-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.policy-panel__grid > div { padding: 10px; background: rgba(17, 24, 39, 0.32); border: 1px solid var(--gray-700); border-radius: 8px; }
.policy-panel__grid span { display: block; color: var(--gray-500); font-size: 10px; text-transform: uppercase; }
.policy-panel__grid strong { display: block; margin-top: 3px; color: var(--gray-200); font-size: 12px; }

.ambiguity-panel__score {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 12px;
  background: rgba(17, 24, 39, 0.32);
  border-radius: 8px;
}
.ambiguity-panel__score strong { color: #fff; font-size: 20px; }
.ambiguity-panel__score span { color: var(--gray-500); font-size: 10px; }
.ambiguity-panel__score i { height: 3px; background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444); border-radius: 99px; }
.gate-note,
.scope-note {
  margin-top: 10px;
  padding: 9px 11px;
  color: var(--gray-400);
  background: rgba(30, 58, 138, 0.22);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 8px;
  font-size: 11px;
  line-height: 17px;
}

.scope-evaluation__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.scope-evaluation__head h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--gray-100);
  font-size: 14px;
}
.scope-evaluation__head p { margin: 3px 0 0; color: var(--gray-400); font-size: 11px; }
.scope-evaluation__head > span {
  padding: 3px 8px;
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.36);
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
}
.scope-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.scope-ring-card {
  padding: 14px;
  background: rgba(17, 24, 39, 0.34);
  border: 1px solid var(--gray-700);
  border-radius: 10px;
  text-align: center;
}
.scope-ring {
  position: relative;
  display: grid;
  width: 72px;
  height: 72px;
  margin: 0 auto 9px;
  place-content: center;
  color: #c4b5fd;
  background: conic-gradient(#8b5cf6 calc(var(--score) * 20%), var(--gray-700) 0);
  border-radius: 50%;
}
.scope-ring::after { position: absolute; inset: 6px; content: ""; background: var(--gray-800); border-radius: 50%; }
.scope-ring strong,
.scope-ring span { z-index: 1; }
.scope-ring strong { color: #fff; font-size: 21px; line-height: 20px; }
.scope-ring span { color: var(--gray-500); font-size: 9px; }
.scope-ring-card h4 { margin: 0 0 5px; color: var(--gray-200); font-size: 12px; }
.scope-ring-card p { margin: 0; color: var(--gray-500); font-size: 10px; line-height: 15px; }

/* ---------- complete Spec panels ---------- */

.modal-collection { display: flex; flex-direction: column; gap: 8px; }
.requirement-card,
.scenario-card,
.rule-card,
.api-contract-card {
  padding: 12px;
  background: rgba(17, 24, 39, 0.34);
  border: 1px solid var(--gray-700);
  border-radius: 9px;
}
.requirement-card header,
.scenario-card header,
.rule-card header,
.api-contract-card header { display: flex; align-items: center; gap: 7px; }
.requirement-card header > span:last-child,
.rule-card header > span {
  margin-left: auto;
  color: var(--gray-500);
  font-size: 10px;
  text-transform: uppercase;
}
.requirement-card code,
.scenario-card code,
.rule-card code,
.api-contract-card code,
.kg-node-list code {
  color: #c4b5fd;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
}
.requirement-card p,
.rule-card p,
.api-contract-card p { margin: 8px 0 0; color: var(--gray-300); font-size: 12px; line-height: 18px; }
.requirement-card footer { margin-top: 8px; color: var(--gray-500); font-size: 10px; }

.scenario-card h3,
.rule-card h3 { margin: 8px 0; color: var(--gray-100); font-size: 13px; font-weight: 600; }
.scenario-card header > div { display: flex; align-items: center; gap: 7px; flex: 1; }
.scenario-card header > div > span { color: var(--gray-500); font-size: 10px; text-transform: uppercase; }
.scenario-card dl,
.rule-card dl { display: flex; margin: 0; flex-direction: column; gap: 6px; }
.scenario-card dl > div,
.rule-card dl > div { display: grid; grid-template-columns: 48px 1fr; gap: 8px; }
.scenario-card dt,
.rule-card dt { color: var(--gray-500); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.scenario-card dd,
.rule-card dd { margin: 0; color: var(--gray-300); font-size: 11px; line-height: 17px; }
.scenario-card footer,
.rule-card footer { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.scenario-card footer code,
.rule-card footer code { padding: 2px 5px; background: rgba(76, 29, 149, 0.32); border-radius: 4px; }

.api-contract-card header > code { overflow: hidden; color: var(--gray-100); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.api-method { padding: 3px 7px; color: #86efac; background: rgba(20, 83, 45, 0.45); border-radius: 5px; font-size: 10px; font-weight: 700; }
.api-contract-card__meta {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 5px 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--gray-700);
  font-size: 10px;
}
.api-contract-card__meta span { color: var(--gray-500); }
.api-contract-card__meta strong { color: var(--gray-300); }

.spec-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  background: rgba(30, 58, 138, 0.25);
  border: 1px solid rgba(59, 130, 246, 0.32);
  border-radius: 9px;
}
.spec-gate > div { display: flex; align-items: center; gap: 9px; }
.spec-gate strong,
.spec-gate small { display: block; }
.spec-gate strong { color: var(--gray-100); font-size: 12px; }
.spec-gate small { margin-top: 2px; color: var(--gray-400); font-size: 10px; }
.spec-gate > span { padding: 3px 7px; color: #93c5fd; background: rgba(30, 58, 138, 0.5); border-radius: 999px; font-size: 10px; white-space: nowrap; }

.linked-sprint {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgba(17, 24, 39, 0.35);
  border: 1px solid var(--gray-700);
  border-radius: 10px;
}
.linked-sprint__icon { display: grid; width: 42px; height: 42px; place-items: center; color: #93c5fd; background: rgba(30, 58, 138, 0.4); border-radius: 9px; }
.linked-sprint span { color: var(--gray-500); font-size: 10px; text-transform: uppercase; }
.linked-sprint h3 { margin: 2px 0; color: var(--gray-100); font-size: 13px; }
.linked-sprint p { margin: 0; color: var(--gray-400); font-size: 11px; }
.linked-sprint__metrics { display: grid; grid-template-columns: auto auto; gap: 1px 6px; }
.linked-sprint__metrics strong { color: #fff; font-size: 13px; }

.coverage-panel { display: flex; flex-direction: column; gap: 8px; }
.coverage-panel > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 10px 12px;
  color: var(--gray-300);
  background: rgba(17, 24, 39, 0.34);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  font-size: 11px;
}
.coverage-panel i {
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  background: var(--gray-700);
  border-radius: 999px;
}
.coverage-panel i::after { display: block; width: var(--coverage); height: 100%; content: ""; background: #10b981; }

.spec-evaluation > header strong,
.spec-evaluation > header small { display: block; }
.spec-evaluation > header strong { color: var(--gray-100); font-size: 13px; }
.spec-evaluation > header small { margin-top: 2px; color: var(--gray-400); font-size: 10px; }
.evaluation-state { padding: 3px 7px; color: #fde047; background: rgba(113, 63, 18, 0.4); border-radius: 999px; font-size: 10px; white-space: nowrap; }
.evaluation-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.evaluation-metrics article { padding: 13px; text-align: center; background: rgba(17, 24, 39, 0.32); border: 1px solid var(--gray-700); border-radius: 9px; }
.evaluation-ring {
  position: relative;
  display: grid;
  width: 78px;
  height: 78px;
  margin: 0 auto 8px;
  place-content: center;
  background: conic-gradient(#10b981 calc(var(--value) * 1%), var(--gray-700) 0);
  border-radius: 50%;
}
.evaluation-ring--inverse { background: conic-gradient(#a78bfa calc(var(--value) * 1%), var(--gray-700) 0); }
.evaluation-ring::after { position: absolute; inset: 6px; content: ""; background: var(--gray-800); border-radius: 50%; }
.evaluation-ring strong,
.evaluation-ring span { z-index: 1; }
.evaluation-ring strong { color: #fff; font-size: 19px; }
.evaluation-ring span { color: var(--gray-500); font-size: 9px; }
.evaluation-metrics h4 { margin: 0 0 3px; color: var(--gray-200); font-size: 12px; }
.evaluation-metrics p { margin: 0; color: var(--gray-500); font-size: 10px; }
.evaluation-callout { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 10px; color: #c4b5fd; background: rgba(76, 29, 149, 0.24); border: 1px solid rgba(139, 92, 246, 0.28); border-radius: 8px; }
.evaluation-callout strong,
.evaluation-callout small { display: block; }
.evaluation-callout strong { color: var(--gray-200); font-size: 11px; }
.evaluation-callout small { margin-top: 2px; color: var(--gray-400); font-size: 10px; }

.kg-panel > header strong,
.kg-panel > header small { display: block; }
.kg-panel > header strong { color: var(--gray-100); font-size: 13px; }
.kg-panel > header small { margin-top: 2px; color: var(--gray-400); font-size: 10px; }
.kg-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.kg-metrics > div { padding: 10px; background: rgba(17, 24, 39, 0.34); border: 1px solid var(--gray-700); border-radius: 8px; }
.kg-metrics span { display: block; color: var(--gray-500); font-size: 9px; text-transform: uppercase; }
.kg-metrics strong { display: block; margin-top: 3px; color: #fff; font-size: 17px; }
.kg-group { margin-top: 12px; }
.kg-group h3,
.kg-node-list h3 { margin: 0 0 7px; color: var(--gray-300); font-size: 12px; }
.kg-group > div { display: flex; flex-wrap: wrap; gap: 5px; }
.kg-group > div > span { padding: 4px 7px; color: var(--gray-400); background: rgba(17, 24, 39, 0.4); border: 1px solid var(--gray-700); border-radius: 999px; font-size: 10px; }
.kg-group b { color: #93c5fd; }
.kg-node-list { margin-top: 14px; border: 1px solid var(--gray-700); border-radius: 9px; overflow: hidden; }
.kg-node-list > header { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; background: rgba(17, 24, 39, 0.45); border-bottom: 1px solid var(--gray-700); }
.kg-node-list > header h3 { margin: 0; }
.kg-node-list > header span { color: var(--gray-500); font-size: 10px; }
.kg-node-list article { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 11px; border-bottom: 1px solid rgba(55, 65, 81, 0.65); }
.kg-node-list article:last-child { border-bottom: 0; }
.kg-node-type { color: #c4b5fd; font-size: 9px; text-transform: uppercase; }
.kg-node-list article > div { min-width: 0; }
.kg-node-list article strong,
.kg-node-list article code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-node-list article strong { color: var(--gray-200); font-size: 11px; }
.kg-node-list article code { margin-top: 2px; color: var(--gray-500); }
.kg-node-state { padding: 2px 6px; color: #86efac; background: rgba(20, 83, 45, 0.4); border-radius: 999px; font-size: 9px; }

/* ---------- authenticated Code Evidence ---------- */

.code-evidence-intro h3,
.task-panel-intro h3 { margin: 0; color: var(--gray-100); font-size: 14px; font-weight: 600; }
.code-evidence-intro p,
.task-panel-intro p { margin: 3px 0 0; color: var(--gray-400); font-size: 12px; line-height: 18px; }
.code-evidence-intro > button,
.task-panel-intro > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 0;
  color: #c4b5fd;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}
.code-evidence-intro > button .modal-icon,
.task-panel-intro > button .modal-icon { width: 12px; height: 12px; }

.code-evidence-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.code-evidence-actions button,
.code-evidence-card__actions button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--gray-300);
  background: rgba(17, 24, 39, 0.42);
  border: 1px solid var(--gray-700) !important;
  border-radius: 7px;
  font-size: 11px;
  cursor: pointer;
}
.code-evidence-actions .modal-icon,
.code-evidence-card__actions .modal-icon { width: 13px; height: 13px; }
.code-evidence-card__actions button.is-danger { color: #fda4af; border-color: rgba(244, 63, 94, 0.55) !important; }

.code-evidence-summary { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; color: var(--gray-500); font-size: 11px; }
.code-evidence-summary b { color: var(--gray-300); font-weight: 500; }
.code-evidence-list { display: flex; flex-direction: column; gap: 10px; }
.code-evidence-card { padding: 16px; background: rgba(17, 24, 39, 0.3); border: 1px solid var(--gray-700); border-radius: 8px; }
.code-evidence-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.code-evidence-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.code-evidence-badges span {
  padding: 3px 7px;
  color: var(--gray-300);
  background: var(--gray-700);
  border: 1px solid rgba(75, 85, 99, 0.75);
  border-radius: 999px;
  font-size: 9px;
  line-height: 13px;
}
.code-evidence-badges span.is-agent { color: #67e8f9; background: rgba(8, 145, 178, 0.16); border-color: rgba(6, 182, 212, 0.38); }
.code-evidence-card__actions { display: flex; flex: 0 0 auto; gap: 7px; }
.code-evidence-card h4 { max-width: 60ch; margin: 10px 0; color: var(--gray-100); font-size: 14px; font-weight: 600; line-height: 20px; }
.code-evidence-location { display: flex; align-items: center; gap: 10px; padding: 10px 11px; color: var(--gray-400); background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(55, 65, 81, 0.8); border-radius: 7px; }
.code-evidence-location .modal-icon { width: 16px; height: 16px; }
.code-evidence-location > span { display: block; min-width: 0; }
.code-evidence-location code,
.code-evidence-location small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-evidence-location code { color: var(--gray-200); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.code-evidence-location small { margin-top: 3px; color: var(--gray-500); font-size: 10px; }
.code-evidence-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 12px 0 0; }
.code-evidence-meta dt { color: var(--gray-500); font-size: 9px; }
.code-evidence-meta dd { margin: 2px 0 0; overflow: hidden; color: var(--gray-300); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.code-evidence-card > footer { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; color: var(--gray-500); border-top: 1px solid rgba(55, 65, 81, 0.7); font-size: 9px; }
.code-evidence-card > footer .modal-icon { width: 12px; height: 12px; }
.code-evidence-card > footer span { padding: 3px 7px; color: #c4b5fd; background: rgba(76, 29, 149, 0.26); border: 1px solid rgba(139, 92, 246, 0.34); border-radius: 999px; }

.evidence-coverage { margin-top: 20px; padding: 12px; background: rgba(17, 24, 39, 0.34); border: 1px solid var(--gray-700); border-radius: 9px; }
.evidence-coverage > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.evidence-coverage > header > span { color: var(--gray-300); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.evidence-coverage > header b { padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 600; }
.evidence-coverage > header b.is-covered { color: #86efac; background: rgba(20, 83, 45, 0.42); }
.evidence-coverage > header b.is-pending { color: #fde047; background: rgba(113, 63, 18, 0.42); }
.evidence-coverage__bar { height: 8px; margin: 10px 0 12px; overflow: hidden; background: var(--gray-700); border-radius: 999px; }
.evidence-coverage__bar i { display: block; width: var(--coverage); height: 100%; background: #10b981; border-radius: inherit; }
.evidence-coverage__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.evidence-coverage__metrics > div { padding: 10px; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(55, 65, 81, 0.72); border-radius: 8px; }
.evidence-coverage__metrics strong,
.evidence-coverage__metrics span { display: block; }
.evidence-coverage__metrics strong { color: var(--gray-100); font-size: 16px; }
.evidence-coverage__metrics span { margin-top: 2px; color: var(--gray-500); font-size: 9px; }

.evidence-matrix-scroll { margin-top: 14px; overflow-x: auto; border: 1px solid var(--gray-700); border-radius: 9px; }
.evidence-matrix-table { width: 100%; min-width: 1320px; border-collapse: separate; border-spacing: 0; font-size: 10px; }
.evidence-matrix-table th,
.evidence-matrix-table td { padding: 9px 8px; color: var(--gray-400); border-right: 1px solid rgba(55, 65, 81, 0.7); border-bottom: 1px solid rgba(55, 65, 81, 0.7); text-align: left; vertical-align: top; }
.evidence-matrix-table thead th { position: sticky; top: 0; z-index: 2; color: var(--gray-400); background: #111827; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.evidence-matrix-table tr:last-child > * { border-bottom: 0; }
.evidence-matrix-table tr > *:last-child { border-right: 0; }
.evidence-matrix-table tr > :first-child { position: sticky; left: 0; z-index: 1; width: 260px; min-width: 260px; background: #111827; }
.evidence-matrix-table thead tr > :first-child { z-index: 3; }
.evidence-matrix-table tbody th strong,
.evidence-matrix-table tbody th code,
.evidence-matrix-table tbody th small { display: block; }
.evidence-matrix-table tbody th strong { color: var(--gray-200); font-size: 10px; line-height: 15px; }
.evidence-matrix-table tbody th code { margin-top: 5px; color: var(--gray-400); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }
.evidence-matrix-table tbody th small { margin-top: 2px; color: var(--gray-500); font-size: 9px; }
.evidence-matrix-table td > i { color: var(--gray-600); font-style: normal; }
.evidence-matrix-table td > span:not(.matrix-receipt):not(.matrix-disposition) { display: block; max-width: 90px; margin-bottom: 3px; overflow: hidden; padding: 2px 4px; color: #c4b5fd; background: rgba(76, 29, 149, 0.3); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.matrix-receipt,
.matrix-disposition { display: inline-flex; padding: 2px 6px; color: #86efac; background: rgba(20, 83, 45, 0.4); border-radius: 999px; font-size: 8px; white-space: nowrap; }
.evidence-matrix-table td > small { display: block; margin: 4px 0; color: var(--gray-500); font-size: 8px; }
.evidence-matrix-table td > button { padding: 0; color: #7dd3fc; background: transparent; font-size: 8px; cursor: pointer; }

/* ---------- current Card / Task modal ---------- */

.board-modal--task { width: min(896px, 100%); background: #0f172a; border: 1px solid rgba(51, 65, 85, 0.5); }
.board-modal--task .board-modal__head,
.board-modal--task .board-modal__tabs,
.board-modal--task .board-modal__footer { border-color: rgba(51, 65, 85, 0.5); }
.board-modal--task .board-modal__body,
.board-modal--task .board-modal__footer { background: #0f172a; }
.board-modal__head--task { gap: 10px; }
.task-modal-title-row { min-width: 0; flex: 1 1 auto; }
.task-modal-title-row h3 { display: -webkit-box; min-width: 80px; overflow: hidden; line-height: 22px; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.task-status-select { width: 108px; height: 32px; flex: 0 0 auto; padding: 5px 28px 5px 10px; color: var(--gray-100); background: var(--gray-700); border: 1px solid var(--gray-600); border-radius: 4px; font-size: 14px; }
.task-status-select:disabled { cursor: default; opacity: 1; }
.task-type-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; color: #c4b5fd; background: rgba(76, 29, 149, 0.42); border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.task-type-badge .modal-icon { width: 13px; height: 13px; }
.task-parent-spec { display: inline-flex; max-width: 180px; flex: 0 1 auto; align-items: center; gap: 4px; padding: 3px 7px; color: #c4b5fd; background: rgba(76, 29, 149, 0.38); border-radius: 4px; font-size: 10px; font-weight: 500; cursor: pointer; }
.task-parent-spec .modal-icon { width: 11px; height: 11px; }
.task-parent-spec span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-modal__footer--task { justify-content: flex-end; }

.task-details-panel { display: flex; flex-direction: column; gap: 18px; }
.task-details-panel section h3,
.task-details-panel label > span { display: block; margin: 0 0 6px; color: var(--gray-400); font-size: 14px; font-weight: 500; }
.task-details-panel section p { margin: 0; color: var(--gray-300); font-size: 13px; line-height: 21px; white-space: pre-line; }
.task-details-panel select { width: 100%; height: 36px; padding: 7px 12px; color: var(--gray-100); background: var(--gray-700); border: 1px solid var(--gray-600); border-radius: 4px; font-size: 13px; }
.task-details-panel select:disabled { opacity: 1; }

.implementation-targets-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.implementation-targets-summary > div { padding: 10px; background: rgba(17, 24, 39, 0.44); border: 1px solid var(--gray-700); border-radius: 8px; }
.implementation-targets-summary strong,
.implementation-targets-summary span { display: block; }
.implementation-targets-summary strong { color: var(--gray-100); font-size: 13px; }
.implementation-targets-summary span { margin-top: 2px; color: var(--gray-500); font-size: 9px; text-transform: uppercase; }
.implementation-targets-list { display: flex; flex-direction: column; gap: 8px; }
.implementation-targets-list article { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; background: rgba(17, 24, 39, 0.36); border: 1px solid var(--gray-700); border-radius: 8px; }
.implementation-target__icon { display: grid; width: 36px; height: 36px; place-items: center; color: #67e8f9; background: rgba(8, 145, 178, 0.18); border-radius: 8px; }
.implementation-targets-list article > div:nth-child(2) { min-width: 0; }
.implementation-targets-list span,
.implementation-targets-list strong,
.implementation-targets-list code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.implementation-targets-list span { color: var(--gray-500); font-size: 9px; text-transform: uppercase; }
.implementation-targets-list strong { margin-top: 2px; color: var(--gray-200); font-size: 11px; }
.implementation-targets-list code { margin-top: 2px; color: var(--gray-400); font-size: 9px; }
.implementation-targets-list b { padding: 3px 7px; color: #86efac; background: rgba(20, 83, 45, 0.4); border-radius: 999px; font-size: 9px; }
.task-governance-note { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 9px 10px; color: var(--gray-400); background: rgba(30, 58, 138, 0.2); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 8px; font-size: 10px; }
.task-governance-note .modal-icon { width: 13px; height: 13px; color: #93c5fd; }

.task-test-evidence > header,
.task-resource-projection > header,
.task-validation-card > header,
.task-policy-card > header,
.task-execution-report > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; background: rgba(17, 24, 39, 0.42); border: 1px solid var(--gray-700); border-radius: 8px; }
.task-test-evidence > header strong,
.task-test-evidence > header span { display: block; }
.task-test-evidence > header strong { color: #86efac; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.task-test-evidence > header span { margin-top: 2px; color: var(--gray-400); font-size: 10px; }
.task-test-evidence > header b { color: #86efac; font-size: 10px; }
.task-test-evidence > article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 8px; padding: 11px; border: 1px solid var(--gray-700); border-radius: 8px; }
.task-test-evidence > article strong,
.task-test-evidence > article code,
.task-test-evidence > article small { display: block; }
.task-test-evidence > article strong { color: var(--gray-200); font-size: 11px; }
.task-test-evidence > article code { margin-top: 3px; color: var(--gray-400); font-size: 9px; }
.task-test-evidence > article small { margin-top: 2px; color: var(--gray-500); font-size: 9px; }

.task-resource-projection > header { justify-content: flex-start; }
.task-resource-projection > header > div { min-width: 0; flex: 1; }
.task-resource-projection h3 { margin: 0; color: var(--gray-100); font-size: 13px; }
.task-resource-projection p { margin: 2px 0 0; color: var(--gray-400); font-size: 10px; }
.task-resource-projection > header > span { padding: 2px 6px; color: #fcd34d; background: rgba(120, 53, 15, 0.42); border-radius: 999px; font-size: 9px; }
.task-resource-projection > article { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 9px; padding: 10px; border: 1px solid var(--gray-700); border-radius: 8px; }
.task-resource-projection > article > .modal-icon { color: #fcd34d; }
.task-resource-projection article strong,
.task-resource-projection article code,
.task-resource-projection article small { display: block; }
.task-resource-projection article strong { color: var(--gray-200); font-size: 11px; }
.task-resource-projection article code { margin-top: 3px; color: var(--gray-400); font-size: 9px; }
.task-resource-projection article small { margin-top: 2px; color: var(--gray-500); font-size: 9px; }
.task-resource-projection article > span { padding: 2px 6px; color: #c4b5fd; background: rgba(76, 29, 149, 0.34); border-radius: 999px; font-size: 9px; }

.task-comments-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.task-comments-panel > header h3 { margin: 0; color: var(--gray-100); font-size: 14px; }
.task-comments-panel > header p { margin: 2px 0 0; color: var(--gray-500); font-size: 10px; }
.task-comments-panel > header button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; color: var(--gray-300); background: var(--gray-700); border-radius: 7px; font-size: 10px; }
.task-comments-panel > header button .modal-icon { width: 12px; height: 12px; }
.task-comments-panel > article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(55, 65, 81, 0.65); }
.task-comment-avatar { display: grid; width: 30px; height: 30px; place-items: center; color: #e0e7ff; background: #4338ca; border-radius: 50%; font-size: 11px; font-weight: 600; }
.task-comments-panel article header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-comments-panel article strong { color: var(--gray-200); font-size: 11px; }
.task-comments-panel article time { color: var(--gray-500); font-size: 9px; }
.task-comments-panel article p { margin: 5px 0 0; color: var(--gray-400); font-size: 11px; line-height: 17px; }

.task-lineage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.task-lineage article { padding: 12px; background: rgba(17, 24, 39, 0.35); border: 1px solid var(--gray-700); border-radius: 8px; }
.task-lineage article span,
.task-lineage article strong,
.task-lineage article small { display: block; }
.task-lineage article span { color: var(--gray-500); font-size: 9px; text-transform: uppercase; }
.task-lineage article strong { margin-top: 3px; color: var(--gray-200); font-size: 11px; }
.task-lineage article small { margin-top: 3px; color: var(--gray-500); font-size: 9px; }
.task-lineage > i { color: var(--gray-500); font-style: normal; }
.task-requirement-links,
.task-dependencies { display: flex; flex-direction: column; gap: 8px; }
.task-requirement-links article { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--gray-700); border-radius: 8px; }
.task-requirement-links article span { color: var(--gray-500); font-size: 9px; }
.task-requirement-links article strong { display: block; margin-top: 2px; color: #c4b5fd; font-size: 11px; }
.task-requirement-links article p { margin: 2px 0 0; color: var(--gray-400); font-size: 9px; }
.task-requirement-links article > b { color: #86efac; font-size: 9px; }
.task-dependencies article { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--gray-700); border-radius: 8px; }
.task-dependencies article > span:first-child { color: var(--gray-500); font-size: 9px; text-transform: uppercase; }
.task-dependencies article > strong { overflow: hidden; color: var(--gray-200); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.task-policy-card > header { justify-content: flex-start; }
.task-policy-card > header > div { min-width: 0; flex: 1; }
.task-policy-card > header strong,
.task-policy-card > header span { display: block; }
.task-policy-card > header strong { color: var(--gray-100); font-size: 12px; }
.task-policy-card > header span { margin-top: 2px; color: var(--gray-500); font-size: 9px; }
.task-policy-card > header b { padding: 3px 7px; color: #86efac; background: rgba(20, 83, 45, 0.4); border-radius: 999px; font-size: 9px; }
.task-validation-history > h4 { display: flex; align-items: center; gap: 7px; margin: 12px 0 10px; color: var(--gray-200); font-size: 12px; }
.task-validation-history > h4 .modal-icon { width: 14px; height: 14px; color: var(--gray-400); }
.task-validation-entry { overflow: hidden; margin-top: 8px; border: 1px solid var(--gray-700); border-radius: 8px; }
.task-validation-entry > header { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(17, 24, 39, 0.22); }
.task-validation-entry > header > i { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; }
.task-validation-entry > header > b { padding: 2px 5px; color: #86efac; background: rgba(20, 83, 45, 0.5); border-radius: 3px; font-size: 8px; }
.task-validation-entry > header > strong { overflow: hidden; color: var(--gray-300); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.task-validation-entry > header > span { padding: 2px 6px; color: #c4b5fd; background: rgba(91, 33, 182, 0.32); border-radius: 3px; font-size: 8px; }
.task-validation-entry > header > time { color: var(--gray-500); font-size: 8px; white-space: nowrap; }
.task-validation-entry > header > em { color: var(--gray-500); font-size: 11px; font-style: normal; }
.task-validation-entry.is-failed > header > i { background: #ef4444; }
.task-validation-entry.is-failed > header > b { color: #fca5a5; background: rgba(127, 29, 29, 0.5); }
.task-validation-entry__body { padding: 12px; border-top: 1px solid var(--gray-700); }
.task-validation-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.task-score-card { padding: 12px; text-align: center; background: rgba(17, 24, 39, 0.2); border: 1px solid #374151; border-radius: 8px; }
.task-score-ring { display: grid; width: 80px; height: 80px; margin: 0 auto 8px; border: 4px solid #10b981; border-radius: 50%; place-items: center; }
.task-score-ring strong { color: #6ee7b7; font-size: 24px; line-height: 1; }
.task-score-ring small { color: #34d399; font-size: 14px; font-weight: 600; }
.task-score-card.is-unmet .task-score-ring { border-color: #ef4444; }
.task-score-card.is-unmet .task-score-ring strong { color: #fca5a5; }
.task-score-card.is-unmet .task-score-ring small { color: #f87171; }
.task-score-card h5 { margin: 0; color: #e2e8f0; font-size: 12px; }
.task-score-direction { margin: 3px 0 0; color: #94a3b8; font-size: 10px; }
.task-score-threshold { margin: 4px 0 0; color: #94a3b8; font-size: 10px; }
.task-score-threshold i { color: var(--gray-600); font-style: normal; }
.task-score-threshold b { color: #6ee7b7; }
.task-score-card.is-unmet .task-score-threshold b { color: #fca5a5; }
.task-score-justification { margin-top: 10px; padding-top: 10px; text-align: left; border-top: 1px solid #374151; }
.task-score-justification > span { display: block; color: #64748b; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.task-score-justification > strong { display: block; margin-top: 8px; color: #e2e8f0; font-size: 10px; }
.task-score-justification > p { margin: 4px 0 0; color: #94a3b8; font-size: 10px; line-height: 15px; }
.task-validation-summary { margin-top: 12px; padding-top: 10px; text-align: left; border-top: 1px solid #374151; }
.task-validation-summary span { color: #94a3b8; font-size: 9px; }
.task-validation-summary p { margin: 4px 0 0; color: #cbd5e1; font-size: 10px; line-height: 16px; }
.task-policy-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(55, 65, 81, 0.65); }
.task-policy-card > div span { color: var(--gray-400); font-size: 10px; }
.task-policy-card > div strong { color: #86efac; font-size: 10px; }
.task-execution-report > header > div { display: flex; align-items: center; gap: 9px; }
.task-execution-report > header strong,
.task-execution-report > header small { display: block; }
.task-execution-report > header strong { color: var(--gray-100); font-size: 12px; }
.task-execution-report > header small { margin-top: 2px; color: var(--gray-500); font-size: 9px; }
.task-execution-report > header > b { padding: 3px 7px; color: #86efac; background: rgba(20, 83, 45, 0.4); border-radius: 999px; font-size: 9px; }
.evaluation-metrics--task { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-execution-report > section { margin-top: 10px; padding: 11px; border: 1px solid var(--gray-700); border-radius: 8px; }
.task-execution-report > section h4 { margin: 0 0 5px; color: var(--gray-300); font-size: 11px; }
.task-execution-report > section p { margin: 0; color: var(--gray-400); font-size: 10px; line-height: 16px; }

/* ---------- Board Config and Global Default ---------- */

.board-settings-head__copy { min-width: 0; }
.board-settings-head__copy h3 { margin: 0; color: #fff; font-size: 18px; line-height: 24px; }
.board-settings-head__copy p { margin: 2px 0 0; color: var(--gray-400); font-size: 12px; }
.board-settings-body { padding: 16px 24px 20px; background: rgba(2, 6, 23, 0.3); }

.board-settings-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: #111827;
  border: 1px solid #1f2937;
  border-radius: 8px;
}
.board-settings-tabs button {
  height: 30px;
  padding: 6px 12px;
  color: var(--gray-400);
  background: transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.board-settings-tabs button.is-active { color: #111827; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-section {
  overflow: hidden;
  padding: 16px;
  background: rgba(17, 24, 39, 0.4);
  border: 1px solid #1f2937;
  border-radius: 8px;
}
.settings-section--wide { grid-column: 1 / -1; }
.settings-section__head { margin-bottom: 12px; padding: 0; background: transparent; border: 0; }
.settings-section__head h4 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--gray-100); font-size: 12px; font-weight: 600; }
.settings-section__head h4 .modal-icon { width: 12px; height: 12px; color: var(--gray-400); }
.settings-section__head p { margin: 2px 0 0; color: var(--gray-400); font-size: 11px; line-height: 16px; }
.settings-section__body { display: flex; flex-direction: column; gap: 12px; padding: 0; }

.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-row + .settings-row { padding-top: 0; border-top: 0; }
.settings-row__copy { min-width: 0; }
.settings-row__copy strong,
.settings-field-label { display: block; color: var(--gray-300); font-size: 12px; font-weight: 500; }
.settings-row__copy p,
.settings-field-help { margin: 2px 0 0; color: var(--gray-500); font-size: 10px; line-height: 14px; }
.settings-field-help--after { margin-top: 6px; }
.settings-row__control { flex: 0 0 auto; }

.settings-toggle {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 20px;
  align-items: center;
  padding: 2px;
  background: var(--gray-600);
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms ease;
}
.settings-toggle span {
  display: block;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transform: translateX(0);
  transition: transform 150ms ease;
}
.settings-toggle.is-on { background: #0ea5e9; }
.settings-toggle--amber.is-on { background: #f59e0b; }
.settings-toggle.is-on span { transform: translateX(20px); }

.settings-square-choices,
.settings-choices {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.settings-square-choices { display: flex; flex-wrap: wrap; }
.settings-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-square-choices button,
.settings-choices button {
  height: 36px;
  padding: 6px 8px;
  color: var(--gray-400);
  background: rgba(17, 24, 39, 0.45);
  border: 1px solid var(--gray-700) !important;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.settings-square-choices button { width: 32px; height: 32px; padding: 0; }
.settings-square-choices button.is-active,
.settings-choices button.is-active { color: #7dd3fc; background: rgba(3, 105, 161, 0.28); border-color: rgba(14, 165, 233, 0.55) !important; }
.settings-square-choices button.is-active { color: #fff; background: #3b82f6; border-color: #3b82f6 !important; }
.settings-choices button.is-active { color: #ddd6fe; background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.7) !important; }

.settings-language-grid,
.settings-resource-types { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-language-grid button,
.settings-resource-types button {
  min-width: 52px;
  height: 30px;
  padding: 5px 8px;
  color: var(--gray-400);
  background: rgba(17, 24, 39, 0.42);
  border: 1px solid var(--gray-700) !important;
  border-radius: 6px;
  font-size: 10px;
}
.settings-governance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.settings-number { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.settings-number > span:first-child { width: 100%; color: var(--gray-500); font-size: 9px; text-transform: uppercase; }
.settings-number__field {
  display: flex;
  height: 32px;
  min-width: 58px;
  flex: 1;
  align-items: center;
  padding: 6px 8px;
  color: var(--gray-200);
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid var(--gray-700);
  border-radius: 6px;
  font-size: 11px;
}
.settings-number small { color: var(--gray-500); font-size: 9px; }

.default-config__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.default-config__head h3 { margin: 0; color: var(--gray-100); font-size: 14px; }
.default-config__head p { max-width: 66ch; margin: 3px 0 0; color: var(--gray-500); font-size: 10px; line-height: 15px; }
.default-config__actions { display: flex; flex: 0 0 auto; gap: 6px; }
.default-config__actions button {
  display: inline-flex;
  height: 31px;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  color: var(--gray-500);
  background: var(--gray-700);
  border-radius: 6px;
  font-size: 10px;
  opacity: 0.65;
}
.default-config__actions .modal-icon { width: 12px; height: 12px; }
.default-config__actions button.is-primary { color: #bae6fd; background: rgba(3, 105, 161, 0.4); }
.default-config__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.default-config__stats > div { padding: 9px 10px; background: rgba(31, 41, 55, 0.75); border: 1px solid var(--gray-700); border-radius: 8px; }
.default-config__stats span,
.default-config__stats strong,
.default-config__stats small { display: block; }
.default-config__stats span { color: var(--gray-500); font-size: 8px; text-transform: uppercase; }
.default-config__stats strong { margin-top: 3px; color: var(--gray-100); font-size: 14px; }
.default-config__stats small { margin-top: 2px; color: var(--gray-500); font-size: 8px; }
.default-config__warning { margin-bottom: 14px; padding: 9px 11px; color: #fde68a; background: rgba(120, 53, 15, 0.28); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 8px; font-size: 10px; }
.default-config__form-head { margin: 0 0 10px; }
.default-config__form-head h4 { margin: 0; color: var(--gray-200); font-size: 12px; }
.default-config__form-head p { margin: 2px 0 0; color: var(--gray-500); font-size: 10px; }
.default-config__history { margin-top: 12px; }

/* ---------- Resource panels ---------- */

.resource-panel { min-width: 0; }
.resource-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: rgba(17, 24, 39, 0.3);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
}
.resource-gate > div { display: flex; align-items: center; gap: 8px; }
.resource-gate .modal-icon { width: 14px; height: 14px; color: var(--gray-300); }
.resource-gate strong,
.resource-gate small { display: block; }
.resource-gate strong { color: var(--gray-100); font-size: 14px; font-weight: 600; }
.resource-gate small { margin-top: 2px; color: var(--gray-400); font-size: 12px; }
.resource-gate__state { padding: 3px 7px; color: var(--gray-400); background: var(--gray-700); border-radius: 999px; font-size: 9px; white-space: nowrap; }
.resource-gate__state.is-covered { color: #86efac; background: rgba(20, 83, 45, 0.42); }
.resource-gate__chevron { color: var(--gray-500); font-size: 16px; }

.resource-artifact {
  overflow: hidden;
  background: rgba(17, 24, 39, 0.25);
  border: 1px solid var(--gray-700);
  border-radius: 10px;
}
.resource-artifact__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--gray-700); }
.resource-kind { color: var(--gray-500); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.resource-artifact__head h3 { margin: 2px 0 0; color: var(--gray-100); font-size: 13px; }
.resource-badge { padding: 3px 7px; color: #67e8f9; background: rgba(21, 94, 117, 0.38); border-radius: 999px; font-size: 9px; }
.resource-artifact__foot { padding: 8px 12px; color: var(--gray-500); font-size: 10px; font-style: italic; }

.mockup-selector { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 0; }
.mockup-selector > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px 10px;
  color: var(--gray-400);
  background: transparent;
  border-radius: 7px;
  font-size: 12px;
}
.mockup-selector > button.is-active { color: #c4b5fd; background: rgba(76, 29, 149, 0.35); }
.mockup-selector small { color: var(--gray-500); font-size: 9px; }
.mockup-device-toggle { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--gray-700); border-radius: 8px; }
.mockup-device-toggle button { width: 28px; height: 26px; color: var(--gray-500); background: transparent; border-radius: 6px; font-size: 14px; }
.mockup-device-toggle button.is-active { color: var(--gray-200); background: var(--gray-700); }
.mockup-description { margin: 7px 12px; color: var(--gray-500); font-size: 11px; font-style: italic; }

.screen-mockup {
  height: 400px;
  margin: 8px 12px 12px;
  overflow: hidden;
  color: #111827;
  background: #fff;
  border: 1px solid var(--gray-600);
  border-radius: 8px;
}
.is-expanded .screen-mockup { height: 70vh; }
.screen-mockup__chrome { display: flex; height: 27px; align-items: center; gap: 5px; padding: 0 9px; color: #64748b; background: #e5e7eb; border-bottom: 1px solid #d1d5db; font-size: 8px; }
.screen-mockup__chrome i { width: 6px; height: 6px; background: #94a3b8; border-radius: 50%; }
.screen-mockup__chrome i:first-child { background: #fb7185; }
.screen-mockup__chrome i:nth-child(2) { background: #fbbf24; }
.screen-mockup__chrome i:nth-child(3) { background: #34d399; }
.screen-mockup__chrome span { margin-left: 6px; }
.screen-mockup__page { display: grid; grid-template-columns: 0.85fr 1.15fr; height: calc(100% - 27px); padding: 18px; overflow: auto; background: #f8fafc; }
.screen-mockup__article { padding: 14px 18px 14px 4px; border-right: 1px solid #e5e7eb; }
.screen-mockup__article > span { color: #7c3aed; font-size: 7px; font-weight: 700; }
.screen-mockup__article h4 { margin: 7px 0 4px; color: #111827; font-size: 19px; line-height: 23px; }
.screen-mockup__article p { margin: 0 0 18px; color: #64748b; font-size: 10px; }
.screen-mockup__article > div { width: 100%; height: 5px; margin: 8px 0; background: #e2e8f0; border-radius: 99px; }
.screen-mockup__article > div.is-short { width: 64%; }
.screen-comments { padding: 8px 4px 8px 20px; }
.screen-comments > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #111827; font-size: 12px; }
.screen-comments > header span { color: #94a3b8; font-size: 8px; }
.screen-comment { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid #e5e7eb; }
.screen-comment--reply { margin-left: 28px; }
.screen-avatar { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; background: #7c3aed; border-radius: 50%; font-size: 7px; font-weight: 700; }
.screen-avatar--blue { background: #0284c7; }
.screen-comment strong { color: #1f2937; font-size: 9px; }
.screen-comment time { margin-left: 4px; color: #9ca3af; font-size: 7px; font-weight: 400; }
.screen-comment p { margin: 3px 0; color: #475569; font-size: 8px; line-height: 12px; }
.screen-comment mark { color: #7c3aed; background: #ede9fe; }
.screen-comment button { padding: 0; color: #7c3aed; background: transparent; font-size: 7px; }
.screen-composer { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 7px; margin-top: 12px; padding: 7px; color: #94a3b8; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; font-size: 8px; }
.screen-composer button { padding: 5px 7px; color: #fff; background: #7c3aed; border-radius: 5px; font-size: 7px; }

.knowledge-workspace__summary { margin-bottom: 10px; padding: 12px; background: rgba(17, 24, 39, 0.36); border-radius: 12px; }
.knowledge-workspace__summary > header { display: flex; align-items: center; gap: 8px; color: #fbbf24; }
.knowledge-workspace__summary > header .modal-icon { width: 15px; height: 15px; }
.knowledge-workspace__summary strong { color: var(--gray-100); font-size: 14px; }
.knowledge-workspace__summary p { margin: 2px 0 0; color: var(--gray-400); font-size: 12px; }
.knowledge-workspace__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.knowledge-workspace__metrics > div { padding: 6px 8px; background: var(--gray-800); border-radius: 8px; }
.knowledge-workspace__metrics span { display: block; color: var(--gray-500); font-size: 9px; text-transform: uppercase; }
.knowledge-workspace__metrics strong { display: block; margin-top: 2px; color: #fff; font-size: 14px; }
.knowledge-grid { display: flex; flex-direction: column; gap: 8px; }
.knowledge-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: flex-start; gap: 10px; padding: 10px; background: rgba(17, 24, 39, 0.28); border: 1px solid var(--gray-700); border-radius: 8px; }
.knowledge-card__icon { display: grid; width: 34px; height: 34px; place-items: center; color: #fbbf24; background: rgba(120, 53, 15, 0.34); border-radius: 7px; font-size: 8px; font-weight: 700; }
.knowledge-card__content { min-width: 0; }
.knowledge-card__content > span { color: #fbbf24; font-size: 9px; text-transform: uppercase; }
.knowledge-card__content h3 { margin: 2px 0; color: var(--gray-100); font-size: 14px; font-weight: 500; }
.knowledge-card__content code { display: block; overflow: hidden; color: var(--gray-500); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-card__content p { margin: 5px 0 0; color: var(--gray-400); font-size: 11px; line-height: 16px; }
.knowledge-card__actions { display: flex; align-items: center; gap: 3px; }
.knowledge-card__actions span { padding: 2px 5px; color: #c4b5fd; background: rgba(76, 29, 149, 0.4); border-radius: 4px; font-size: 9px; }
.knowledge-card__actions button { width: 26px; height: 26px; color: var(--gray-400); background: transparent; border-radius: 6px; font-size: 13px; }
.knowledge-card__actions button:hover { background: var(--gray-700); }

.resource-artifact--architecture { overflow: hidden; }
.architecture-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-700);
}
.architecture-toolbar > span { flex: 1; }
.architecture-toolbar button { display: inline-flex; height: 30px; align-items: center; gap: 5px; padding: 5px 8px; color: var(--gray-400); background: transparent; border: 1px solid var(--gray-700) !important; border-radius: 6px; font-size: 10px; }
.architecture-toolbar button.is-active { color: #67e8f9; background: rgba(21, 94, 117, 0.35); border-color: rgba(34, 211, 238, 0.4) !important; }
.architecture-toolbar .modal-icon { width: 12px; height: 12px; }
.architecture-editor {
  display: grid;
  min-width: 0;
  min-height: 520px;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px;
}
.is-expanded .architecture-editor { grid-template-columns: 260px minmax(0, 1fr) 320px; }
.architecture-sidebar { display: flex; flex-direction: column; gap: 9px; }
.architecture-sidebar section { padding: 9px; background: rgba(17, 24, 39, 0.34); border: 1px solid var(--gray-700); border-radius: 8px; }
.architecture-sidebar header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--gray-300); font-size: 10px; }
.architecture-sidebar label { display: block; margin-top: 7px; color: var(--gray-500); font-size: 9px; }
.architecture-sidebar input,
.architecture-sidebar select,
.architecture-fields input {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 3px;
  padding: 5px 7px;
  color: var(--gray-300);
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 6px;
  font-size: 9px;
}
.architecture-sidebar section > button { display: block; width: 100%; margin-top: 5px; padding: 6px 7px; color: var(--gray-400); background: var(--gray-800); border: 1px solid var(--gray-700) !important; border-radius: 6px; font-size: 9px; text-align: left; }
.architecture-sidebar--right section > div { padding: 6px 7px; color: var(--gray-400); background: var(--gray-800); border-radius: 5px; font-size: 9px; }
.architecture-sidebar--right section > div + div { margin-top: 4px; }
.architecture-sidebar--right {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.is-expanded .architecture-sidebar--right { display: flex; grid-column: auto; }
.architecture-diagram-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.architecture-diagram-tabs button { padding: 5px 8px; color: var(--gray-500); background: transparent; border-radius: 5px; font-size: 9px; }
.architecture-diagram-tabs button.is-active { color: #67e8f9; background: rgba(21, 94, 117, 0.3); }
.architecture-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.architecture-fields label { color: var(--gray-500); font-size: 9px; }
.architecture-canvas { min-height: 460px; overflow: hidden; background: #fff; border: 1px solid var(--gray-600); border-radius: 8px; }
.architecture-canvas__toolbar { display: flex; height: 34px; align-items: center; gap: 3px; padding: 4px 6px; color: #64748b; background: #fff; border-bottom: 1px solid #e5e7eb; }
.architecture-canvas__toolbar > span { flex: 1; }
.architecture-canvas__toolbar button { height: 25px; padding: 4px 7px; color: #64748b; background: transparent; border-radius: 5px; font-size: 8px; }
.architecture-canvas__toolbar button.is-active { color: #0369a1; background: #e0f2fe; }
.architecture-canvas__toolbar strong { font-size: 8px; }
.architecture-canvas__stage {
  position: relative;
  height: 426px;
  overflow: hidden;
  background-color: #f8fafc;
  background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
}
.architecture-lane,
.architecture-store > div {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 150px;
  min-height: 64px;
  justify-content: center;
  flex-direction: column;
  padding: 9px 11px;
  background: #f0f9ff;
  border: 2px solid #0284c7;
  border-radius: 6px;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12);
}
.architecture-lane span,
.architecture-store span { color: #0284c7; font-size: 7px; font-weight: 700; letter-spacing: 0.05em; }
.architecture-lane strong,
.architecture-store strong { margin-top: 3px; color: #0f172a; font-size: 10px; }
.architecture-lane small,
.architecture-store small { margin-top: 2px; color: #64748b; font-size: 7px; }
.architecture-lane--api { top: 52px; left: 5%; width: 30%; }
.architecture-lane--repo { top: 52px; left: 48%; width: 36%; background: #eff6ff; border-color: #2563eb; }
.architecture-lane--repo span { color: #2563eb; }
.architecture-lane--users { top: 292px; left: 5%; width: 30%; background: #faf5ff; border-color: #8b5cf6; }
.architecture-lane--users span { color: #7c3aed; }
.architecture-store { position: absolute; z-index: 2; top: 220px; left: 45%; display: grid; width: 50%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.architecture-store > div { position: static; width: auto; min-width: 0; min-height: 62px; background: #f0fdf4; border-color: #16a34a; }
.architecture-store span { color: #16a34a; }
.architecture-connections {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.architecture-connections > path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.architecture-connections .is-request { stroke: #0284c7; }
.architecture-connections .is-persistence { stroke: #16a34a; }
.architecture-connections .is-mention,
.architecture-connections .is-mention-link { stroke: #8b5cf6; }
#arch-arrow-blue path { fill: #0284c7; }
#arch-arrow-green path { fill: #16a34a; }
#arch-arrow-violet path { fill: #8b5cf6; }
.architecture-edge { position: absolute; z-index: 1; overflow: visible; fill: none; stroke: #0284c7; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.architecture-edge--one { top: 72px; left: 35%; width: 14%; height: 24px; }
.architecture-edge--two { top: 122px; left: 61%; width: 35px; height: 94px; transform: rotate(90deg); }
.architecture-edge--mention { top: 258px; left: 34%; width: 13%; height: 70px; stroke: #8b5cf6; }
.architecture-legend { display: flex; min-width: 0; gap: 14px; padding: 8px 12px; color: var(--gray-500); border-top: 1px solid var(--gray-700); font-size: 9px; }
.architecture-legend span { display: inline-flex; align-items: center; gap: 5px; }
.architecture-legend i { width: 7px; height: 7px; background: #0ea5e9; border-radius: 50%; }
.architecture-legend i.is-violet { background: #8b5cf6; }
.architecture-legend i.is-green { background: #16a34a; }

/* ---------- product-like scrollbars ---------- */

.board-embed ::-webkit-scrollbar,
.board-modal ::-webkit-scrollbar { width: 6px; height: 6px; }
.board-embed ::-webkit-scrollbar-track,
.board-modal ::-webkit-scrollbar-track { background: transparent; }
.board-embed ::-webkit-scrollbar-thumb,
.board-modal ::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.4); border-radius: 999px; }
.board-embed ::-webkit-scrollbar-thumb:hover,
.board-modal ::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, 0.6); }

/* ---------- responsive behavior ---------- */

@media (max-width: 1000px) {
  .board-panel-head { align-items: flex-start; }
  .board-panel-head__actions { width: min(480px, 64%); }
  .board-search { min-width: 0; }
  .board-new-button { padding-inline: 12px; }
}

@media (max-width: 820px) {
  .board-embed { height: 700px; min-height: 700px; }
  .board-sidebar { position: absolute; z-index: 25; top: 50px; bottom: 0; left: 0; height: auto; box-shadow: 22px 0 46px rgba(0, 0, 0, 0.42); }
  .board-embed.is-sidebar-collapsed .board-sidebar { box-shadow: none; }
  .board-main { padding: 12px; }
  .board-panel-head { flex-direction: column; gap: 10px; }
  .board-panel-head__actions { width: 100%; }
  .board-search { flex: 1 1 auto; width: auto; }
  .board-topbar__crumb { display: none; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-section--wide { grid-column: auto; }
  .default-config__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .board-embed { height: 680px; min-height: 680px; border-radius: 12px !important; }
  .board-topbar { padding-inline: 10px; }
  .board-topbar__identity { gap: 7px; }
  .board-topbar__wordmark { height: 24px; }
  .board-topbar__actions { gap: 6px; }
  .board-app-button { height: 34px; min-width: 40px; padding-inline: 11px; }
  .board-menu__trigger { min-width: 52px; }
  .board-menu__dropdown { top: calc(100% + 8px); right: 0; width: min(224px, calc(100vw - 28px)); }
  .board-tab { padding-inline: 11px; }
  .board-panel-head__actions { flex-wrap: wrap; }
  .board-search { width: 100%; flex-basis: 100%; }
  .board-view-toggle { margin-left: 0; }
  .board-new-button { flex: 1 1 auto; justify-content: center; }
  .board-filter--branch { margin-left: 0; }
  .board-pagination { align-items: flex-start; flex-direction: column; }
  .board-task-toolbar { flex-wrap: wrap; }
  .board-task-toolbar .board-search { width: 100%; flex-basis: 100%; margin-right: 0; }
  .board-task-toolbar .board-filter--archived { margin-left: 0; }
  .activity-row { grid-template-columns: 1fr; gap: 2px; }
  .board-modal-backdrop { padding: 12px; }
  .board-modal,
  .board-modal--settings {
    width: 100%;
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
  }
  .board-modal__head { min-height: 57px; padding: 12px 16px; }
  .board-modal__title-row { gap: 8px; }
  .board-modal__title-row h3 { font-size: 15px; }
  .board-modal__actions { gap: 1px; }
  .board-modal__actions button:nth-child(2),
  .board-modal__actions button:nth-child(3) { display: none; }
  .board-modal__tabs { padding: 8px 12px 0; }
  .board-modal__tab { height: 35px; padding: 7px 9px; font-size: 12px; }
  .board-modal__body { padding: 14px 16px; }
  .board-modal__footer { min-height: 57px; padding: 12px 16px; }
  .board-modal__lineage { padding-inline: 16px; }
  .task-parent-spec { display: none; }
  .task-status-select { width: 90px; }
  .task-type-badge { display: none; }
  .code-evidence-card > header { align-items: stretch; flex-direction: column; }
  .code-evidence-card__actions { flex-wrap: wrap; }
  .code-evidence-meta,
  .evidence-coverage__metrics,
  .implementation-targets-summary,
  .task-validation-scores { grid-template-columns: 1fr; }
  .task-validation-entry > header { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .task-validation-entry > header > span,
  .task-validation-entry > header > time { display: none; }
  .task-test-evidence > article { grid-template-columns: minmax(0, 1fr); }
  .task-lineage { grid-template-columns: 1fr; }
  .task-lineage > i { transform: rotate(90deg); text-align: center; }
  .scope-rings,
  .evaluation-metrics { grid-template-columns: 1fr; }
  .scope-ring-card { text-align: left; }
  .scope-ring { float: left; margin: 0 12px 0 0; }
  .settings-governance-grid,
  .policy-panel__grid { grid-template-columns: 1fr; }
  .settings-number-grid { grid-template-columns: 1fr; }
  .versions-current { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-mockup__page { grid-template-columns: 1fr; }
  .screen-mockup__article { display: none; }
  .screen-comments { padding-left: 4px; }
  .knowledge-workspace__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-card { grid-template-columns: 30px minmax(0, 1fr); }
  .knowledge-card__actions { grid-column: 2; }
  .kg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kg-node-list article { grid-template-columns: 88px minmax(0, 1fr); }
  .kg-node-state { display: none; }
  .linked-sprint { grid-template-columns: 40px minmax(0, 1fr); }
  .linked-sprint__metrics { grid-column: 2; }
  .default-config__head { flex-direction: column; }
  .architecture-editor { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .architecture-sidebar { display: none; }
  .architecture-main { min-width: 0; }
  .architecture-toolbar { overflow-x: auto; }
  .architecture-toolbar button { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .board-embed,
  .board-panel,
  .board-menu__dropdown,
  .board-modal { animation: none; }
  .board-sidebar { transition: none; }
}