/* Reset-ish + base
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #1f2933;
  background: #f5f7fa;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

/* Top bar
   ---------------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #1f2933;
  color: #f5f7fa;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.brand {
  color: #f5f7fa;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.settings-cog {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  border-radius: 4px;
  padding: 3px;
  transition: color 0.15s, background 0.15s;
}
.settings-cog:hover {
  color: #f5f7fa;
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}
.settings-cog-active {
  color: #f5f7fa;
  background: rgba(255,255,255,0.12);
}
.settings-cog-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 1.5px #1f2937;
  pointer-events: none;
}
/* Help icon — far-right entry to the guide; mirrors the settings cog. */
.topbar-help {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  border-radius: 4px;
  padding: 3px;
  transition: color 0.15s, background 0.15s;
}
.topbar-help:hover {
  color: #f5f7fa;
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}
.topbar-help-active {
  color: #f5f7fa;
  background: rgba(255,255,255,0.12);
}
.topbar-separator {
  color: #4b5563;
  font-size: 16px;
}
.topbar-project-name {
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.session-user {
  color: #cbd2d9;
  font-size: 12px;
  text-decoration: none;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-user:hover { color: #fff; text-decoration: underline; }
.topbar-divider {
  width: 1px;
  height: 20px;
  background: #374151;
  margin: 0 2px;
}

/* Topbar module dropdowns (Stack Tools / Utilities). Open on hover, with a
   keyboard path via :focus-within — focusing the label shows the panel, so
   the next Tab lands on its first item. No JS. The panel hugs the label
   (top: 100%, no gap) so the pointer never crosses a dead zone. */
.topbar-menu { position: relative; display: inline-block; }
.topbar-menu-label { cursor: pointer; }
.topbar-menu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 140px;
  padding: 6px;
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(31, 41, 51, 0.14);
  flex-direction: column;
  gap: 2px;
}
.topbar-menu:hover .topbar-menu-panel,
.topbar-menu:focus-within .topbar-menu-panel { display: flex; }
.topbar-menu-item {
  display: block;
  border: none;
  text-align: left;
}
/* Menus at the topbar's right edge open leftward so the panel stays
   on-screen. */
.topbar-menu-right .topbar-menu-panel { left: auto; right: 0; }

.inline-form { display: inline; margin: 0; }

/* Buttons
   ---------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #cbd2d9;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2933;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  /* A button label must never wrap — squeezed table cells were rendering
     "Detail" as "De-tail" on two lines. */
  white-space: nowrap;
}
.btn:hover { background: #f5f7fa; text-decoration: none; }
.btn-small { padding: 2px 8px; font-size: 12px; }
.btn-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.btn-primary:hover { background: #1e4fc4; }
.btn-danger {
  background: transparent;
  border-color: #c44;
  color: #f5f7fa;
}
.btn-danger:hover { background: rgba(255,255,255,0.06); }
.btn-disabled {
  background: transparent;
  border-color: #4b5563;
  color: #6b7280;
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-disabled:hover { background: transparent; text-decoration: none; }
.btn-active {
  background: #374151;
  border-color: #4b5563;
  color: #f5f7fa;
}

/* Login
   ---------------------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-shell { width: min(100%, 360px); }
.login-brand {
  margin-bottom: 14px;
  color: #1f2933;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.login-panel {
  padding: 24px;
  border: 1px solid #cbd2d9;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(31, 41, 51, 0.1);
}
.login-panel h1 { margin: 0 0 18px; font-size: 20px; }
.login-intro { margin: -6px 0 16px; color: #52606d; font-size: 13px; }
.login-form { display: grid; gap: 8px; }
.login-form input {
  width: 100%;
  min-height: 40px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid #9fb3c8;
  border-radius: 4px;
  background: #fff;
  color: #1f2933;
}
.login-form .btn { min-height: 40px; margin-top: 4px; }
.login-secondary-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
}
.login-secondary-actions form { margin-left: auto; }
.login-error {
  margin-bottom: 14px;
  padding: 9px 10px;
  border: 1px solid #d64545;
  border-radius: 4px;
  background: #fff1f1;
  color: #8a1c1c;
}

/* Flash messages
   ---------------------------------------------------------------------- */
.flash-strip { padding: 0 24px; margin-top: 8px; }
.flash {
  background: #fff3cd;
  border: 1px solid #f0c674;
  color: #5a3e00;
  padding: 8px 12px;
  border-radius: 4px;
  margin-top: 4px;
}

/* User administration
   ---------------------------------------------------------------------- */
.admin-users-page {
  width: min(100%, 1440px);
  margin: 0 auto;
}
.admin-users-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 18px;
}
.admin-users-header h1 { margin: 0; font-size: 22px; }
.admin-users-header p {
  margin: 5px 0 0;
  color: #52606d;
  font-size: 13px;
}
.admin-section-nav {
  display: flex;
  gap: 18px;
  margin: -5px 0 18px;
  border-bottom: 1px solid #cbd2d9;
}
.admin-section-nav a {
  padding: 7px 2px 8px;
  border-bottom: 2px solid transparent;
  color: #52606d;
  font-size: 13px;
  font-weight: 600;
}
.admin-section-nav a:hover { color: #1f2933; text-decoration: none; }
.admin-section-nav a.active { border-bottom-color: #2563eb; color: #1d4ed8; }
.admin-users-error {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid #d64545;
  border-radius: 4px;
  background: #fff1f1;
  color: #8a1c1c;
}
.temporary-credential {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #e9b949;
  border-radius: 6px;
  background: #fffbeb;
}
.temporary-credential h2 { margin: 0; font-size: 14px; }
.temporary-credential h2 strong { font-size: inherit; }
.temporary-credential p {
  margin: 4px 0 0;
  color: #713f12;
  font-size: 12px;
}
.temporary-credential code {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 8px 10px;
  overflow-x: auto;
  border: 1px solid #d9a321;
  border-radius: 4px;
  background: #fff;
  color: #1f2933;
  font-size: 14px;
  user-select: all;
}
.admin-users-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.user-create-panel {
  padding: 18px;
  border: 1px solid #d8dee6;
  border-radius: 6px;
  background: #fff;
}
.user-create-panel h2,
.user-list-panel h2 { margin: 0; font-size: 16px; }
.user-create-form { display: grid; gap: 7px; margin-top: 15px; }
.user-create-form label { font-size: 12px; font-weight: 600; }
.user-create-form input,
.user-create-form select,
.account-role-form select {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid #9fb3c8;
  border-radius: 4px;
  background: #fff;
  color: #1f2933;
  font: inherit;
}
.user-create-form .btn { min-height: 36px; margin-top: 7px; }
.user-list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.user-list-heading span { color: #7b8794; font-size: 12px; }
.admin-users-table-wrap { max-height: calc(100vh - 210px); }
.admin-users-table th,
.admin-users-table td { vertical-align: middle; }
.admin-users-table td:first-child { min-width: 150px; }
.admin-users-table td:last-child { min-width: 230px; }
.account-self-label,
.account-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}
.account-self-label { background: #e0e7ff; color: #3730a3; }
.account-status { margin-left: 0; }
.account-status-active { background: #d1fae5; color: #065f46; }
.account-status-inactive { background: #e5e7eb; color: #4b5563; }
.account-note { display: block; margin-top: 3px; color: #92400e; font-size: 11px; }
.account-role-form,
.account-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.account-role-form select { min-height: 28px; padding: 3px 6px; font-size: 12px; }
.account-actions { flex-wrap: wrap; }
.account-actions form { display: inline-flex; margin: 0; }
.account-actions .btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.project-access-layout {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.project-access-list {
  overflow: hidden;
  border: 1px solid #d8dee6;
  border-radius: 6px;
  background: #fff;
}
.project-access-list a {
  display: block;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #e4e7eb;
  color: #1f2933;
}
.project-access-list a:last-child { border-bottom: 0; }
.project-access-list a:hover { background: #f5f7fa; text-decoration: none; }
.project-access-list a.active {
  background: #eaf2ff;
  box-shadow: inset 3px 0 #2563eb;
}
.project-access-list strong,
.project-access-list span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-access-list strong { font-size: 13px; }
.project-access-list span { margin-top: 2px; color: #7b8794; font-size: 11px; }
.project-access-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.project-access-heading h2 { margin: 0; font-size: 17px; }
.project-access-heading > div > span {
  display: block;
  margin-top: 3px;
  color: #7b8794;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}
.project-access-admin-note {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 10px;
  font-weight: 600;
}
.project-grant-form {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto minmax(110px, 160px) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #d8dee6;
  border-radius: 6px;
  background: #fff;
}
.project-grant-form label { font-size: 12px; font-weight: 600; }
.project-grant-form select {
  min-width: 0;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid #9fb3c8;
  border-radius: 4px;
  background: #fff;
  color: #1f2933;
  font: inherit;
}
.project-grants-table-wrap { max-height: calc(100vh - 290px); }
.project-grants-table td { vertical-align: middle; }
.project-grants-table td:last-child { width: 1px; white-space: nowrap; }
.project-grants-table form { margin: 0; }
.project-grants-empty,
.project-access-empty { padding: 28px; color: #7b8794; text-align: center; }
.project-access-empty {
  border: 1px dashed #cbd2d9;
  border-radius: 6px;
  background: #fff;
}

@media (max-width: 900px) {
  .admin-users-layout { grid-template-columns: 1fr; }
  .project-access-layout { grid-template-columns: 1fr; }
  .project-access-list {
    display: flex;
    overflow-x: auto;
  }
  .project-access-list a {
    flex: 0 0 min(240px, 75vw);
    border-right: 1px solid #e4e7eb;
    border-bottom: 0;
  }
  .user-create-panel { max-width: 420px; }
  .admin-users-table-wrap,
  .project-grants-table-wrap { max-height: none; }
}
@media (max-width: 700px) {
  .project-grant-form { grid-template-columns: 1fr; }
  .project-grant-form label { margin-top: 2px; }
}
@media (max-width: 560px) {
  .content { padding-right: 14px; padding-left: 14px; }
  .temporary-credential { align-items: stretch; flex-direction: column; gap: 10px; }
  .temporary-credential code { width: 100%; }
}

/* Tab strips
   ---------------------------------------------------------------------- */
.tab-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid #cbd2d9;
}
.primary-tabs { padding-top: 6px; }
.secondary-tabs {
  background: transparent;
  border-bottom: 1px solid #e4e7eb;
  margin-bottom: 16px;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: #52606d;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  bottom: -1px;
}
.tab:hover { background: #f5f7fa; text-decoration: none; }
.tab.active {
  background: #f5f7fa;
  border-color: #cbd2d9;
  color: #1f2933;
}
.secondary-tabs .tab.active {
  background: #ffffff;
  border-color: #e4e7eb;
}
.tab.empty { opacity: 0.5; }
.tab .count {
  background: #e4e7eb;
  color: #52606d;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}
.tab-errors { margin-left: auto; }

/* Badges
   ---------------------------------------------------------------------- */
.badge {
  display: inline-block;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-error   { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }

/* Main content
   ---------------------------------------------------------------------- */
.content { padding: 16px 24px 48px; }
.pipeline-name { margin: 4px 0 12px; font-size: 22px; }
.dcp-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 12px;
}
.dcp-header h2 { margin: 0; font-size: 18px; }
.dcp-header-left { display: flex; flex-direction: column; gap: 4px; }
.dcp-header-actions { display: flex; gap: 8px; align-items: center; }
.dcp-meta { display: flex; gap: 12px; color: #52606d; font-size: 12px; }
.dcp-meta .meta { white-space: nowrap; }

/* Tables
   ---------------------------------------------------------------------- */
.table-wrap {
  background: #ffffff;
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  overflow: auto;
  max-height: calc(100vh - 240px);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #e4e7eb;
  vertical-align: top;
}
.data-table th {
  background: #f5f7fa;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table tbody tr:hover { background: #f9fbfd; }
.data-table td { word-break: break-word; }

/* Filter cells: value above, smaller description beneath when present. */
.filter-cell .filter-value { display: block; }
.filter-cell .filter-desc {
  display: block;
  font-size: 11px;
  color: #7b8794;
  margin-top: 2px;
}
.filter-col { background: #f5f7fa; }
.extra-col  { background: #f0f4f8; }
.actions-col { width: 1px; white-space: nowrap; background: #f5f7fa; }

/* Identity column tag in the header */
.col-id-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: #e4e7eb;
  color: #52606d;
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 4px;
  letter-spacing: 0.04em;
}

/* Inline editable cells
   Match the static table's typography so toggling between view and edit
   doesn't shift row heights. */
.cell-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 2px 4px;
  border: 1px solid #cbd2d9;
  border-radius: 3px;
  background: #ffffff;
}
.cell-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}
.cell-input-desc {
  margin-top: 4px;
  font-size: 11px;
  color: #52606d;
}

.row-editing { background: #fff8e1 !important; }
.row-editing td { vertical-align: top; }

/* Drag-and-drop reordering
   ---------------------------------------------------------------------- */
.priority-cell { white-space: nowrap; }
.drag-handle {
  display: inline-block;
  cursor: grab;
  color: #7b8794;
  margin-right: 5px;
  font-size: 14px;
  user-select: none;
  vertical-align: middle;
}
.drag-handle:active { cursor: grabbing; }
tr[draggable="true"]:hover .drag-handle { color: #1f2933; }

tr.dragging { opacity: 0.35; }
tr.drag-over { outline: 2px solid #2563eb; outline-offset: -2px; background: #eff6ff; }
tr.row-reordered { background: #ecfdf5 !important; }
tr.row-new { background: #fef9c3 !important; }   /* amber-50 — pending review */

/* Add-item footer + blank-row marker
   ---------------------------------------------------------------------- */
.dcp-footer-actions { margin: 12px 0 24px; }
.btn-add {
  border: 1px dashed #9aa5b1;
  background: transparent;
  color: #3e4c59;
}
.btn-add:hover { border-style: solid; background: #f5f7fa; }
.empty-state-inline {
  padding: 16px 0;
  margin: 0;
  text-align: center;
}
.muted { color: #9aa5b1; font-size: 11px; }

/* New-items banner
   ---------------------------------------------------------------------- */
.new-items-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  margin-bottom: 12px;
  background: #fef08a;      /* amber-200 */
  border: 1px solid #fcd34d;
  border-radius: 6px;
  color: #78350f;           /* amber-900 */
}
.new-items-banner-msg { font-size: 0.9em; }

/* Reorder confirmation modal
   ---------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal-dialog {
  background: #ffffff;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  min-width: 260px;
  max-width: 400px;
}
.modal-msg {
  margin: 0 0 16px;
  font-size: 14px;
  color: #1f2933;
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.identity-locked {
  display: inline-block;
  background: #f0f4f8;
  border: 1px dashed #cbd2d9;
  border-radius: 3px;
  padding: 2px 6px;
  font-weight: 500;
  color: #52606d;
}

.actions-cell { white-space: nowrap; }
.btn-sm { font-size: 12px; padding: 4px 8px; }

/* Empty + summary states
   ---------------------------------------------------------------------- */
.empty-state {
  color: #7b8794;
  font-style: italic;
  padding: 32px 0;
  text-align: center;
}
.error-summary { color: #52606d; margin: 0 0 12px; }

/* Errors page — severity filter pills + jump link
   ---------------------------------------------------------------------- */
.severity-filter {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
}
.severity-filter .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #cbd2d9;
  background: #ffffff;
  color: #3e4c59;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.severity-filter .pill:hover {
  background: #f5f7fa;
  border-color: #9aa5b1;
}
.severity-filter .pill.is-active {
  background: #1f2933;
  border-color: #1f2933;
  color: #ffffff;
}
.severity-filter .pill-error.is-active   { background: #b91c1c; border-color: #b91c1c; }
.severity-filter .pill-warning.is-active { background: #b45309; border-color: #b45309; }
.severity-filter .pill-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}
.severity-filter .pill.is-active .pill-count { background: rgba(255, 255, 255, 0.22); }

.error-jump {
  color: #2563eb;
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.error-jump:hover { text-decoration: underline; }

/* Highlight the target item when jumped to from the errors page.
   Brief flash so the user can spot the row, then settles to a subtle tint. */
tr.data-table-row:target,
#items-tbody tr:target {
  animation: jump-flash 1.6s ease-out 1;
  background: #fef9c3;
}
@keyframes jump-flash {
  0%   { background: #fde047; }
  60%  { background: #fef08a; }
  100% { background: #fef9c3; }
}

/* Settings page
   ---------------------------------------------------------------------- */
.settings-card {
  max-width: 680px;
  margin: 32px auto;
  background: #ffffff;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.settings-card h1 { margin-top: 0; font-size: 20px; }
/* Wider variant for card pages that carry a real data table (DDI catalog
   browse): 680px can't hold 8 columns. Pair the table itself with
   .table-wrap so anything still wider scrolls inside the card. */
.settings-card-wide { max-width: 1100px; }
/* Text-heavy panels (textareas, toggles) keep the classic 680px-card feel
   inside a wide card: 616px = 680 minus the card's 32px padding per side. */
.settings-panel-narrow { max-width: 616px; }

/* Drivers-in-scope picker on the DDI Catalog settings tab. */
.ddi-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}
.ddi-picker-filter-count { color: #7b8794; font-size: 12px; }
.ddi-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 4px 16px;
  margin: 0 0 12px;
}
.ddi-picker-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.ddi-picker-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  padding: 3px 0;
  min-width: 0;
}
.ddi-picker-item code { overflow: hidden; text-overflow: ellipsis; }
.ddi-picker-count { color: #7b8794; font-size: 12px; white-space: nowrap; }
.ddi-picker-extra { font-style: italic; }
/* "N rules" badge: this driver is used as a DDIName filter in the open
   project — removing it from scope triggers the confirmation banner. */
.ddi-picker-rules {
  color: #b45309;
  background: #fef3c7;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  white-space: nowrap;
}
.ddi-remove-warning ul { margin: 6px 0 8px; padding-left: 20px; }
.ddi-remove-warning .feed-action-form { margin-top: 8px; }
/* Data Selection stack-level mode banner (DMM-level Select/Remove gate). */
.selection-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  background: #f8fafc;
  padding: 8px 14px;
  margin: 0 0 12px;
  font-size: 13px;
}
.selection-mode-bar-problem { border-color: #f59e0b; background: #fffbeb; }
.selection-mode-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.selection-mode-desc { color: #52606d; }
.selection-mode-form { display: flex; gap: 6px; }
[data-theme="dark"] .selection-mode-bar {
  border-color: #334155;
  background: #17263a;
}
[data-theme="dark"] .selection-mode-bar-problem {
  border-color: #b45309;
  background: #2c2410;
}
[data-theme="dark"] .selection-mode-desc { color: #94a3b8; }

/* Device-type scoped export dropdown (DCP header). */
.scoped-export { position: relative; display: inline-block; }
.scoped-export > summary { list-style: none; user-select: none; }
.scoped-export > summary::-webkit-details-marker { display: none; }
.scoped-export-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: 300px;
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(31, 41, 51, 0.14);
  padding: 12px 14px;
  font-size: 13px;
  text-align: left;
}
.scoped-export-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  font-weight: 600;
}
.scoped-export-field select {
  font-size: 13px;
  padding: 5px 6px;
  border: 1px solid #cbd2d9;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2933;
}
.scoped-export-check {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  color: #52606d;
  cursor: pointer;
}
.scoped-export-hint { margin: 0 0 8px; color: #7b8794; }
.scoped-export-module-link { margin: 8px 0 0; }
.scoped-export-actions { display: flex; gap: 6px; flex-wrap: wrap; }
[data-theme="dark"] .scoped-export-panel {
  border-color: #334155;
  background: #17263a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .scoped-export-field select {
  border-color: #334155;
  background: #0f172a;
  color: #e2e8f0;
}
[data-theme="dark"] .scoped-export-check { color: #94a3b8; }
[data-theme="dark"] .scoped-export-hint { color: #64748b; }

/* Numbered pagination under the catalog-items table. */
.ddi-page-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}
.ddi-page-current { pointer-events: none; }
.ddi-page-ellipsis { color: #7b8794; padding: 0 2px; }
[data-theme="dark"] .ddi-page-ellipsis { color: #64748b; }
.ddi-picker-count-btn {
  background: none;
  border: none;
  padding: 2px 0;
  color: #7b8794;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.ddi-picker-count-btn:hover { color: #2563eb; text-decoration: underline; }
/* On-demand device list: a full-width grid row directly below the driver
   whose count was clicked (grid auto-placement puts a 1/-1 item on the
   next row; following cells reflow beneath it). */
.ddi-driver-devices {
  grid-column: 1 / -1;
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px 14px;
  margin: 2px 0 6px;
  font-size: 13px;
}
.ddi-driver-devices-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ddi-driver-devices-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 3px 20px;
}
.ddi-driver-devices-meta { color: #7b8794; font-size: 12px; }
[data-theme="dark"] .ddi-picker-count { color: #64748b; }
[data-theme="dark"] .ddi-picker-rules { color: #fbbf24; background: #3b2f14; }
[data-theme="dark"] .ddi-picker-filter-count { color: #64748b; }
[data-theme="dark"] .ddi-picker-count-btn { color: #64748b; }
[data-theme="dark"] .ddi-picker-count-btn:hover { color: #60a5fa; }
[data-theme="dark"] .ddi-driver-devices {
  border-color: #334155;
  background: #17263a;
}
[data-theme="dark"] .ddi-driver-devices-meta { color: #64748b; }
.settings-section { margin-bottom: 28px; }
.settings-section h2 { font-size: 15px; margin: 0 0 4px; }
.settings-desc { margin: 0 0 10px; color: #52606d; font-size: 13px; }
.settings-textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 10px;
  border: 1px solid #cbd2d9;
  border-radius: 4px;
  resize: vertical;
  background: #f5f7fa;
  color: #1f2933;
}
.settings-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
  background: #ffffff;
}
.settings-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.settings-callout {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-left: 3px solid #f59e0b;
  background: #fff7ed;
  color: #78350f;
  font-size: 13px;
  border-radius: 3px;
}
.settings-callout strong { color: #92400e; }

/* Settings tab strip sits inside the card, not at page level */
.settings-tab-strip {
  margin: -8px -32px 24px;   /* bleed to card edges */
  padding: 0 32px;
  background: transparent;
  border-bottom: 1px solid #e4e7eb;
}

/* Toggle (checkbox + label) */
.settings-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.settings-toggle input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.settings-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2933;
}
.settings-toggle-desc {
  font-size: 12px;
  font-weight: 400;
  color: #52606d;
}

/* DDIName select in edit rows */
.cell-select {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 2px 4px;
  border: 1px solid #cbd2d9;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
.cell-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* Upload card (legacy — kept for fallback)
   ---------------------------------------------------------------------- */
.upload-card {
  max-width: 520px;
  margin: 64px auto;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.upload-card h1 { margin-top: 0; font-size: 20px; }
.upload-card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.upload-card input[type="file"] {
  border: 1px dashed #cbd2d9;
  padding: 16px;
  border-radius: 4px;
  background: #f5f7fa;
}

/* Projects landing page
   ---------------------------------------------------------------------- */
.projects-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
  padding-top: 8px;
}
@media (max-width: 860px) {
  .projects-layout { grid-template-columns: 1fr; }
}

.projects-card {
  background: #ffffff;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.projects-heading {
  margin: 0 0 16px;
  font-size: 18px;
}

.projects-table { width: 100%; }
.projects-table .project-name-cell   { font-weight: 500; }
.projects-table .project-source-cell { width: 1px; white-space: nowrap; }
.projects-table .project-file-cell   { color: #52606d; font-size: 12px; }
.projects-table .project-date-cell   { color: #7b8794; font-size: 12px; white-space: nowrap; }
.projects-table .project-actions-cell { width: 1px; white-space: nowrap; }

/* Source badges (".dcexp" / "skeleton") on the project listing */
.source-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.source-badge--dcexp    { background: #dbeafe; color: #1e40af; }
.source-badge--skeleton { background: #d1fae5; color: #065f46; }

/* Version history (/versions) */
.versions-view h1 { margin-bottom: 6px; }
.versions-intro { color: #52606d; font-size: 13px; max-width: 760px; margin-bottom: 16px; }
.versions-subhead { font-size: 15px; margin: 0 0 10px; }
.versions-checkpoint-form { display: flex; gap: 8px; align-items: center; }
.versions-checkpoint-form .cell-input { flex: 1; max-width: 480px; }
.versions-id-cell { font-weight: 600; white-space: nowrap; }
.versions-date-cell { color: #7b8794; font-size: 12px; white-space: nowrap; }
.versions-note-cell { color: #52606d; font-size: 12px; }
.versions-actor-cell { color: #7b8794; font-size: 12px; white-space: nowrap; }
.versions-size-cell { color: #7b8794; font-size: 12px; white-space: nowrap; text-align: right; }
.versions-actions-cell { width: 1px; white-space: nowrap; }
.versions-actions-cell .btn, .versions-actions-cell .inline-form { margin-right: 4px; }
.versions-original-row td { border-top: 2px solid #cbd2d9; }
.version-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.version-badge--export      { background: #dbeafe; color: #1e40af; }
.version-badge--checkpoint  { background: #d1fae5; color: #065f46; }
.version-badge--pre-restore { background: #fef3c7; color: #92400e; }
.version-badge--original    { background: #e4e7eb; color: #3e4c59; }

/* Transparent button that looks like a link — for "open project" */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: #2563eb;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* Delete button variant — subtle red outline */
.btn-delete {
  border-color: #fca5a5;
  color: #991b1b;
  background: transparent;
}
.btn-delete:hover { background: #fee2e2; }

/* Import card */
.import-card {
  background: #ffffff;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.import-heading {
  margin: 0 0 6px;
  font-size: 16px;
}
.import-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: #52606d;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.form-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
.form-hint {
  font-size: 11px;
  color: #7b8794;
}
.file-input {
  border: 1px dashed #cbd2d9;
  padding: 10px 12px;
  border-radius: 4px;
  background: #f5f7fa;
  font-size: 13px;
}

/* Drop zone wraps the file input and acts as a drag target */
.drop-zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 2px dashed #cbd2d9;
  border-radius: 6px;
  padding: 14px 16px;
  background: #f8fafc;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.drop-zone:hover {
  border-color: #93c5fd;
  background: #eff6ff;
}
.drop-zone-over {
  border-color: #3b82f6;
  background: #eff6ff;
}
.drop-zone .file-input {
  border: none;
  background: transparent;
  padding: 0;
}
.drop-zone-hint {
  font-size: 12px;
  color: #94a3b8;
}
/* Disabled state: no project active, so uploads are gated. pointer-events:none
   also blocks drag/drop on the zone, not just clicks on the input. */
.drop-zone-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Over-limit warning (uses existing .flash but needs a distinct variant) */
.flash-warning {
  background: #fff3cd;
  border-color: #f0c674;
  color: #5a3e00;
  margin-bottom: 12px;
}

/* Theme toggle button (topbar)
   ---------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid #4b5563;
  border-radius: 20px;           /* pill shape */
  background: transparent;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.08);
  border-color: #6b7280;
}
/* Icon: small circle with half-fill — CSS-drawn, no emoji */
.theme-toggle-icon {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.theme-toggle-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: inset(0 50% 0 0);  /* left half filled = "moon" in light mode */
}
[data-theme="dark"] .theme-toggle-icon::after {
  clip-path: inset(0 0 0 0);    /* full fill = "sun" in dark mode */
}

/* =========================================================================
   Dark mode
   Applied via <html data-theme="dark">; toggled by JS; saved to
   localStorage under key "lzxr-theme".
   ========================================================================= */
[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body {
  background: #0f172a;
  color: #e2e8f0;
}
[data-theme="dark"] .login-brand { color: #e2e8f0; }
[data-theme="dark"] .login-panel {
  background: #1e293b;
  border-color: #334155;
  box-shadow: none;
}
[data-theme="dark"] .login-intro { color: #94a3b8; }
[data-theme="dark"] .login-form input {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}
[data-theme="dark"] .login-error {
  background: #450a0a;
  border-color: #7f1d1d;
  color: #fca5a5;
}
[data-theme="dark"] .admin-users-header p,
[data-theme="dark"] .user-list-heading span { color: #94a3b8; }
[data-theme="dark"] .admin-section-nav { border-bottom-color: #334155; }
[data-theme="dark"] .admin-section-nav a { color: #94a3b8; }
[data-theme="dark"] .admin-section-nav a:hover { color: #e2e8f0; }
[data-theme="dark"] .admin-section-nav a.active { color: #93c5fd; }
[data-theme="dark"] .admin-users-error {
  background: #450a0a;
  border-color: #7f1d1d;
  color: #fca5a5;
}
[data-theme="dark"] .temporary-credential {
  background: #422006;
  border-color: #a16207;
}
[data-theme="dark"] .temporary-credential p { color: #fde68a; }
[data-theme="dark"] .temporary-credential code {
  background: #0f172a;
  border-color: #a16207;
  color: #fef3c7;
}
[data-theme="dark"] .user-create-panel {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .user-create-form input,
[data-theme="dark"] .user-create-form select,
[data-theme="dark"] .account-role-form select {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}
[data-theme="dark"] .account-self-label { background: #312e81; color: #c7d2fe; }
[data-theme="dark"] .account-status-active { background: #064e3b; color: #a7f3d0; }
[data-theme="dark"] .account-status-inactive { background: #374151; color: #d1d5db; }
[data-theme="dark"] .account-note { color: #fbbf24; }
[data-theme="dark"] .project-access-list,
[data-theme="dark"] .project-grant-form,
[data-theme="dark"] .project-access-empty {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .project-access-list a {
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .project-access-list a:hover { background: #243348; }
[data-theme="dark"] .project-access-list a.active { background: #172554; }
[data-theme="dark"] .project-access-list span,
[data-theme="dark"] .project-access-heading > div > span,
[data-theme="dark"] .project-grants-empty,
[data-theme="dark"] .project-access-empty { color: #94a3b8; }
[data-theme="dark"] .project-access-admin-note {
  background: #312e81;
  color: #c7d2fe;
}
[data-theme="dark"] .project-grant-form select {
  background: #0f172a;
  border-color: #475569;
  color: #e2e8f0;
}

[data-theme="dark"] a {
  color: #60a5fa;
}
[data-theme="dark"] .session-user { color: #cbd5e1; }
[data-theme="dark"] .session-user:hover { color: #fff; }

/* Top bar */
[data-theme="dark"] .topbar {
  background: #070e1a;
  border-bottom: 1px solid #1e2d3f;
}
[data-theme="dark"] .brand { color: #e2e8f0; }
[data-theme="dark"] .topbar-separator { color: #334155; }
[data-theme="dark"] .topbar-project-name { color: #64748b; }
[data-theme="dark"] .topbar-divider { background: #1e2d3f; }
[data-theme="dark"] .topbar-menu-panel {
  border-color: #334155;
  background: #17263a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Buttons */
[data-theme="dark"] .btn {
  background: #1e2d3f;
  border-color: #334155;
  color: #cbd5e1;
}
[data-theme="dark"] .btn:hover {
  background: #243348;
  text-decoration: none;
}
[data-theme="dark"] .btn-primary {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}
[data-theme="dark"] .btn-primary:hover { background: #1e40af; }
[data-theme="dark"] .btn-active {
  background: #243348;
  border-color: #475569;
  color: #e2e8f0;
}
[data-theme="dark"] .btn-danger {
  border-color: #7f1d1d;
  color: #fca5a5;
}
[data-theme="dark"] .btn-danger:hover { background: rgba(239,68,68,0.1); }
[data-theme="dark"] .btn-delete {
  border-color: #7f1d1d;
  color: #fca5a5;
}
[data-theme="dark"] .btn-delete:hover { background: rgba(239,68,68,0.1); }
[data-theme="dark"] .btn-link { color: #60a5fa; }

/* Flash */
[data-theme="dark"] .flash {
  background: #422006;
  border-color: #78350f;
  color: #fde68a;
}
[data-theme="dark"] .flash-warning {
  background: #422006;
  border-color: #78350f;
  color: #fde68a;
}

/* Tab strips */
[data-theme="dark"] .tab-strip {
  background: #0f172a;
  border-bottom-color: #1e2d3f;
}
[data-theme="dark"] .secondary-tabs {
  background: transparent;
  border-bottom-color: #1e2d3f;
}
[data-theme="dark"] .tab { color: #64748b; }
[data-theme="dark"] .tab:hover { background: #1e2d3f; }
[data-theme="dark"] .tab.active {
  background: #0f172a;
  border-color: #1e2d3f;
  color: #e2e8f0;
}
[data-theme="dark"] .secondary-tabs .tab.active {
  background: #1e2d3f;
  border-color: #334155;
}
[data-theme="dark"] .tab .count {
  background: #1e2d3f;
  color: #64748b;
}

/* Tables */
[data-theme="dark"] .table-wrap {
  background: #1e2d3f;
  border-color: #243348;
}
[data-theme="dark"] .data-table th,
[data-theme="dark"] .data-table td {
  border-bottom-color: #243348;
}
[data-theme="dark"] .data-table th {
  background: #162032;
  color: #94a3b8;
}
[data-theme="dark"] .data-table tbody tr:hover { background: #243348; }
[data-theme="dark"] .filter-col { background: #1a2840; }
[data-theme="dark"] .extra-col  { background: #172035; }
[data-theme="dark"] .actions-col { background: #1a2840; }
[data-theme="dark"] .filter-cell .filter-desc { color: #475569; }
[data-theme="dark"] .col-id-tag {
  background: #243348;
  color: #64748b;
}

/* Editing */
[data-theme="dark"] .cell-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .cell-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}
[data-theme="dark"] .cell-input-desc { color: #64748b; }
[data-theme="dark"] .cell-select {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .cell-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}
[data-theme="dark"] .row-editing { background: #1a1f0e !important; }
[data-theme="dark"] .identity-locked {
  background: #162032;
  border-color: #334155;
  color: #64748b;
}

/* Drag and drop */
[data-theme="dark"] .drag-handle { color: #334155; }
[data-theme="dark"] tr[draggable="true"]:hover .drag-handle { color: #94a3b8; }
[data-theme="dark"] tr.drag-over {
  outline-color: #3b82f6;
  background: #162032;
}
[data-theme="dark"] tr.row-reordered { background: #0f2318 !important; }
[data-theme="dark"] tr.row-new { background: #451a03 !important; }   /* amber-950 */

/* Add-item footer — dark */
[data-theme="dark"] .btn-add {
  border-color: #475569;
  color: #cbd5e1;
}
[data-theme="dark"] .btn-add:hover {
  background: #1e293b;
  border-color: #64748b;
}
[data-theme="dark"] .muted { color: #475569; }
[data-theme="dark"] .new-items-banner {
  background: #451a03;
  border-color: #92400e;
  color: #fcd34d;
}

/* Modal */
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .modal-dialog {
  background: #1e2d3f;
  border-color: #334155;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
[data-theme="dark"] .modal-msg { color: #e2e8f0; }

/* Settings */
[data-theme="dark"] .settings-card {
  background: #1e2d3f;
  border-color: #334155;
}
[data-theme="dark"] .settings-section h2 { color: #e2e8f0; }
[data-theme="dark"] .settings-desc { color: #64748b; }
[data-theme="dark"] .settings-textarea {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .settings-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
  background: #0f172a;
}
[data-theme="dark"] .settings-callout {
  background: rgba(245, 158, 11, 0.08);
  border-left-color: #f59e0b;
  color: #fcd34d;
}
[data-theme="dark"] .settings-callout strong { color: #fbbf24; }
[data-theme="dark"] .settings-cog-dot {
  box-shadow: 0 0 0 1.5px #0b1320;
}
[data-theme="dark"] .settings-tab-strip { border-bottom-color: #334155; }
[data-theme="dark"] .settings-toggle-label { color: #e2e8f0; }
[data-theme="dark"] .settings-toggle-desc { color: #64748b; }

/* Projects landing */
[data-theme="dark"] .projects-card,
[data-theme="dark"] .import-card {
  background: #1e2d3f;
  border-color: #334155;
}
[data-theme="dark"] .projects-heading { color: #e2e8f0; }
[data-theme="dark"] .projects-table .project-file-cell { color: #64748b; }
[data-theme="dark"] .projects-table .project-date-cell { color: #475569; }
[data-theme="dark"] .source-badge--dcexp    { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .source-badge--skeleton { background: #064e3b; color: #6ee7b7; }

/* Version history */
[data-theme="dark"] .versions-intro { color: #94a3b8; }
[data-theme="dark"] .versions-date-cell,
[data-theme="dark"] .versions-actor-cell,
[data-theme="dark"] .versions-size-cell { color: #64748b; }
[data-theme="dark"] .versions-note-cell { color: #94a3b8; }
[data-theme="dark"] .versions-original-row td { border-top-color: #334155; }
[data-theme="dark"] .version-badge--export      { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .version-badge--checkpoint  { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .version-badge--pre-restore { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .version-badge--original    { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .import-desc { color: #64748b; }
[data-theme="dark"] .form-label { color: #94a3b8; }
[data-theme="dark"] .form-hint { color: #475569; }
[data-theme="dark"] .file-input {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}

/* Badges */
[data-theme="dark"] .badge-error   { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .badge-warning { background: #422006; color: #fde68a; }

/* Empty state */
[data-theme="dark"] .empty-state { color: #475569; }
[data-theme="dark"] .error-summary { color: #64748b; }

/* Errors page filter — dark */
[data-theme="dark"] .severity-filter .pill {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}
[data-theme="dark"] .severity-filter .pill:hover {
  background: #1e293b;
  border-color: #475569;
}
[data-theme="dark"] .severity-filter .pill.is-active {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #0f172a;
}
[data-theme="dark"] .severity-filter .pill-error.is-active {
  background: #dc2626; border-color: #dc2626; color: #fff;
}
[data-theme="dark"] .severity-filter .pill-warning.is-active {
  background: #d97706; border-color: #d97706; color: #fff;
}
[data-theme="dark"] .severity-filter .pill-count { background: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .severity-filter .pill.is-active .pill-count { background: rgba(15, 23, 42, 0.18); }
[data-theme="dark"] .severity-filter .pill-error.is-active .pill-count,
[data-theme="dark"] .severity-filter .pill-warning.is-active .pill-count { background: rgba(255, 255, 255, 0.22); }

[data-theme="dark"] .error-jump { color: #60a5fa; }

[data-theme="dark"] tr.data-table-row:target,
[data-theme="dark"] #items-tbody tr:target {
  background: #422006;
  animation: jump-flash-dark 1.6s ease-out 1;
}
@keyframes jump-flash-dark {
  0%   { background: #92400e; }
  60%  { background: #78350f; }
  100% { background: #422006; }
}

/* =========================================================================
   Feed page
   ========================================================================= */

/* Rate-limit notice banner */
.feed-rate-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
}

/* Flood alert banner (shown by HTMX partial when dropped count >= threshold) */
.feed-flood-alert {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #991b1b;
  line-height: 1.6;
}

/* Status indicator row */
.feed-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}
.feed-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.feed-status-dot-running { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
.feed-status-dot-stopped { background: #94a3b8; }
.feed-status-running { color: #166534; }
.feed-status-stopped { color: #52606d; }

/* Controls (start form) */
.feed-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.feed-port-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
.feed-port-input {
  width: 90px;
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #cbd2d9;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2933;
}
.feed-port-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* Observation table meta row */
.feed-table-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #52606d;
}
.feed-live-badge {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.feed-rate-badge {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: default;
}
.feed-table-hint {
  font-size: 12px;
  font-weight: 400;
  color: #7b8794;
}

/* Observation table column widths */
.feed-obs-table .obs-time  { white-space: nowrap; font-size: 12px; color: #7b8794; }
.feed-obs-table .obs-node  { font-weight: 500; }
.feed-obs-table .obs-varid { font-weight: 500; }
.feed-obs-table .obs-unit  { color: #52606d; }

/* Empty state inside the table area */
.feed-empty {
  padding: 28px 0;
  text-align: center;
  color: #7b8794;
  font-style: italic;
}
.feed-empty-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #7b8794;
}

/* Actions section */
.feed-actions-section { display: flex; flex-direction: column; gap: 12px; }
.feed-action-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.feed-skeleton-name {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #cbd2d9;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2933;
  width: 240px;
}
.feed-skeleton-name:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}
.feed-upload-input {
  font: inherit;
  font-size: 13px;
}
.feed-upload-hint {
  font-size: 12px;
  color: #7b8794;
  align-self: center;
}

/* dendriteXR drop zones: make them a full-width, obvious target rather
   than a content-sized box squeezed into the flex row. */
.feed-upload-form { align-items: stretch; }
.feed-upload-form .drop-zone {
  flex: 1 1 100%;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.feed-upload-form .drop-zone .file-input { align-self: center; }

/* ---- engramXR Mapping Library tab ---- */

/* Sub-tab strip within the Mapping Library panel. Reuses .tab visuals; the
   buttons need a reset since .tab was authored for anchors. */
.engram-subtab-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid #e4e7eb;
  margin-bottom: 16px;
}
.engram-subtab-strip .tab {
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
}
.engram-subtab-strip .tab.active {
  background: #ffffff;
  border-color: #e4e7eb;
}

/* Labelled two-column form rows: fixed label column so every control (file
   input, button, text field) starts at the same x across the stacked forms. */
.engram-form {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.engram-form-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
.engram-form-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.engram-add-input {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid #cbd2d9;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2933;
  width: 150px;
}
.engram-add-input-short { width: 90px; }
.engram-add-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* Collected-mappings table: keep identifier columns on one line (the table
   scrolls inside .table-wrap if needed) and let only the free-text columns
   wrap, so scanning IDs no longer means reading two-line cells. */
.engram-table td, .engram-table th { white-space: nowrap; }
.engram-table td.engram-col-wrap {
  white-space: normal;
  word-break: break-word;
  min-width: 11rem;
}
.engram-table td.engram-col-time { font-variant-numeric: tabular-nums; color: #52606d; }
.engram-table td.engram-col-wrap .ddi-driver-devices-meta { display: block; }

@media (max-width: 720px) {
  .engram-form { grid-template-columns: 1fr; gap: 6px; }
}

/* Dark mode — Feed */
[data-theme="dark"] .feed-rate-notice {
  background: #1c1206;
  border-color: #713f12;
  color: #fbbf24;
}
[data-theme="dark"] .feed-rate-badge {
  background: #1c1a04;
  color: #fbbf24;
  border-color: #713f12;
}
[data-theme="dark"] .feed-flood-alert {
  background: #1c0a0a;
  border-color: #b91c1c;
  color: #fca5a5;
}
[data-theme="dark"] .feed-status-running { color: #4ade80; }
[data-theme="dark"] .feed-status-stopped { color: #64748b; }
[data-theme="dark"] .feed-port-label { color: #94a3b8; }
[data-theme="dark"] .feed-port-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .feed-port-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}
[data-theme="dark"] .feed-table-meta { color: #64748b; }
[data-theme="dark"] .feed-live-badge {
  background: #052e16;
  color: #4ade80;
  border-color: #166534;
}
[data-theme="dark"] .feed-table-hint { color: #475569; }
[data-theme="dark"] .feed-obs-table .obs-time  { color: #475569; }
[data-theme="dark"] .feed-obs-table .obs-unit  { color: #64748b; }
[data-theme="dark"] .feed-empty { color: #475569; }
[data-theme="dark"] .feed-empty-hint { color: #475569; }
[data-theme="dark"] .feed-skeleton-name {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .feed-skeleton-name:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}
[data-theme="dark"] .feed-upload-hint { color: #475569; }

/* Dark mode — engramXR Mapping Library tab */
[data-theme="dark"] .engram-subtab-strip { border-bottom-color: #334155; }
[data-theme="dark"] .engram-subtab-strip .tab.active {
  background: #182437;
  border-color: #334155;
}
[data-theme="dark"] .engram-form-label { color: #94a3b8; }
[data-theme="dark"] .engram-add-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .engram-add-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}
[data-theme="dark"] .engram-table td.engram-col-time { color: #94a3b8; }

/* =========================================================================
   callosumXR
   ========================================================================= */

/* ---- Page header ---- */
.callosum-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.callosum-header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
}
.callosum-header .settings-desc {
  margin: 0;
  color: #64748b;
  font-size: 0.875rem;
}
.callosum-export-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: flex-start;
  padding-top: 0.25rem;
}

/* ---- No-project placeholder ---- */
.callosum-no-project {
  padding: 2rem 1.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  color: #475569;
  font-size: 0.95rem;
}
.callosum-no-project a { color: #3b82f6; text-decoration: underline; }

/* ---- Pipeline tab strip (secondary level inside callosum) ---- */
.callosum-pipeline-tabs {
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: 2px solid #e2e8f0;
}

/* ---- DCP tab strip (tertiary level inside callosum) ---- */
.callosum-dcp-tabs {
  margin-top: 0;
  border-top: none;
  border-bottom: 2px solid #e2e8f0;
  background: #f8fafc;
  padding: 0 0.5rem;
}
.callosum-dcp-tabs .tab {
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
}

/* callosum table — same rules as data-table but without drag affordances */
.callosum-table tbody tr:hover { background: #f1f5f9; }

/* ---- Dark mode ---- */
[data-theme="dark"] .callosum-header .settings-desc { color: #94a3b8; }
[data-theme="dark"] .callosum-no-project {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
[data-theme="dark"] .callosum-no-project a { color: #60a5fa; }
[data-theme="dark"] .callosum-pipeline-tabs { border-bottom-color: #334155; }
[data-theme="dark"] .callosum-dcp-tabs {
  background: #0f172a;
  border-bottom-color: #334155;
}
[data-theme="dark"] .callosum-table tbody tr:hover { background: #1e293b; }

/* ---- callosumXR setup (FDV device-type picker) ---- */
.callosum-fdv-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
}
.callosum-fdv-row {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
}
.callosum-fdv-row:last-child { border-bottom: none; }
.callosum-fdv-row label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: baseline;
  cursor: pointer;
}
.callosum-fdv-row input[type="checkbox"] { grid-row: 1 / span 2; }
.callosum-fdv-name { font-weight: 600; color: #1f2933; }
.callosum-fdv-meta {
  grid-column: 2;
  font-size: 12px;
  color: #64748b;
}
.callosum-fdv-meta code {
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}
[data-theme="dark"] .callosum-fdv-list {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .callosum-fdv-row { border-bottom-color: #1e293b; }
[data-theme="dark"] .callosum-fdv-name { color: #e2e8f0; }
[data-theme="dark"] .callosum-fdv-meta { color: #94a3b8; }
[data-theme="dark"] .callosum-fdv-meta code {
  background: #1e293b;
  color: #cbd5e1;
}

/* ---- callosumXR setup-page extras (Stage 2 toggles, etc.) ---- */
.callosum-setup-extras {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 16px 0;
}
.callosum-setup-extras legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.callosum-setup-toggle {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-weight: 500;
}
.callosum-setup-extras .settings-desc {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}
[data-theme="dark"] .callosum-setup-extras {
  border-color: #334155;
}
[data-theme="dark"] .callosum-setup-extras legend { color: #cbd5e1; }
[data-theme="dark"] .callosum-setup-extras .settings-desc { color: #94a3b8; }

/* ---- callosumXR Stage 1 mapping wizard ---- */
.callosum-map {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

/* Stage tab strip across the top. */
.callosum-map-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}
.callosum-map-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  text-decoration: none;
  color: #52606d;
  border-radius: 6px 6px 0 0;
}
.callosum-map-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
}
.callosum-map-tab-active {
  color: #1f2933;
  font-weight: 600;
  background: #f1f5f9;
}
.callosum-map-tab-active .callosum-map-tab-num {
  background: #3b82f6;
  color: #ffffff;
}
.callosum-map-tab-disabled { opacity: 0.45; cursor: not-allowed; }

/* Progress strip: mapped / pending / rejected counts + position. */
.callosum-map-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 13px;
}
.callosum-map-progress-counts { display: flex; gap: 10px; }
.callosum-map-count {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.callosum-map-count-mapped   { background: #dcfce7; color: #166534; }
.callosum-map-count-pending  { background: #fef3c7; color: #92400e; }
.callosum-map-count-rejected { background: #fee2e2; color: #991b1b; }

/* The card itself. */
.callosum-map-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}
.callosum-map-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.callosum-map-card-label {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.callosum-map-card-varid {
  font-size: 28px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0;
  color: #1f2933;
}
.callosum-map-state {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.callosum-map-state-mapped   { background: #dcfce7; color: #166534; }
.callosum-map-state-pending  { background: #fef3c7; color: #92400e; }
.callosum-map-state-rejected { background: #fee2e2; color: #991b1b; }

.callosum-map-current {
  background: #f1f5f9;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 0 0 14px;
  font-size: 13px;
}
.callosum-map-current code {
  background: #ffffff;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #cbd5e1;
}
.callosum-map-current-desc { color: #64748b; }

/* Observation samples. */
.callosum-map-samples { margin: 0 0 16px; }
.callosum-map-samples summary { cursor: pointer; font-weight: 600; color: #475569; }
.callosum-map-samples-table {
  width: 100%;
  margin-top: 8px;
  font-size: 12px;
  border-collapse: collapse;
}
.callosum-map-samples-table th,
.callosum-map-samples-table td {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}

/* Form. */
.callosum-map-form { display: grid; gap: 14px; }
.callosum-map-field { display: grid; gap: 4px; }
.callosum-map-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.callosum-map-field select,
.callosum-map-field input[type="text"] {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 14px;
  background: #ffffff;
}
.callosum-map-field-empty {
  background: #fef3c7;
  color: #78350f;
  padding: 10px 12px;
  border-radius: 6px;
  margin: 0;
  font-size: 13px;
}
.callosum-map-field-empty a { color: #92400e; text-decoration: underline; }
.callosum-map-actions { display: flex; justify-content: flex-end; }
.device-type-bulk-row { display: flex; gap: 8px; align-items: center; }
.device-type-bulk-row select { flex: 1; max-width: 340px; }
.callosum-map-reject-form { margin-top: 12px; text-align: right; }

.btn-danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.btn-danger:hover { background: #fecaca; }

.callosum-map-rejected-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 14px 18px;
}
.callosum-map-rejected-banner p { margin-top: 0; color: #991b1b; }

/* Prev / Next. */
.callosum-map-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.callosum-map-nav-right { display: flex; gap: 8px; }

/* All-variables index disclosure. */
.callosum-map-all summary { cursor: pointer; color: #475569; font-weight: 600; }
.callosum-map-all-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px;
}
.callosum-map-all-row a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  text-decoration: none;
  color: #1f2933;
  border-radius: 4px;
  background: #f8fafc;
  font-size: 12px;
}
.callosum-map-all-row code {
  background: #ffffff;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #e2e8f0;
}
.callosum-map-all-row-mapped a   { background: #ecfdf5; }
.callosum-map-all-row-rejected a { background: #fef2f2; }
.callosum-map-all-row-pending a  { background: #fffbeb; }
.callosum-map-all-row-active a   { outline: 2px solid #3b82f6; }
.callosum-map-all-state { color: #64748b; font-style: italic; }
.callosum-map-all-target { color: #475569; }

/* Dark theme. */
[data-theme="dark"] .callosum-map-tabs { border-bottom-color: #334155; }
[data-theme="dark"] .callosum-map-tab { color: #94a3b8; }
[data-theme="dark"] .callosum-map-tab-num { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .callosum-map-tab-active { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .callosum-map-progress { background: #1e293b; color: #cbd5e1; }
[data-theme="dark"] .callosum-map-card {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .callosum-map-card-varid { color: #e2e8f0; }
[data-theme="dark"] .callosum-map-current { background: #1e293b; }
[data-theme="dark"] .callosum-map-current code {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}
[data-theme="dark"] .callosum-map-field select,
[data-theme="dark"] .callosum-map-field input[type="text"] {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .callosum-map-rejected-banner {
  background: #1e1212;
  border-color: #7f1d1d;
}
[data-theme="dark"] .callosum-map-rejected-banner p { color: #fca5a5; }
[data-theme="dark"] .callosum-map-all-row a { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .callosum-map-all-row code {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}
[data-theme="dark"] .callosum-map-all-row-mapped a   { background: #052e16; }
[data-theme="dark"] .callosum-map-all-row-rejected a { background: #2d1010; }
[data-theme="dark"] .callosum-map-all-row-pending a  { background: #2a1d05; }
[data-theme="dark"] .callosum-map-all-state { color: #94a3b8; }
[data-theme="dark"] .callosum-map-all-target { color: #cbd5e1; }

/* =========================================================================
   Setup wizard — /wizard/step-N
   Card-on-canvas layout with a sticky progress strip + Prev/Skip/Next nav.
   Reuses .btn / .file-input / .badge from the rest of the app.
========================================================================= */

.wizard {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.wizard-header { margin-bottom: 24px; }
.wizard-title { font-size: 26px; margin: 0 0 4px; color: #1f2933; }
.wizard-subtitle { color: #52606d; margin: 0; }

/* ---- Progress strip ---- */
.wizard-progress {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 24px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
}
.wizard-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #7b8794;
  padding: 8px 6px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  text-align: center;
}
.wizard-step:hover { background: #f5f7fa; color: #1f2933; }
.wizard-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e4e7eb;
  color: #52606d;
  font-weight: 600;
  font-size: 14px;
  flex: 0 0 auto;
}
.wizard-step-label {
  font-size: 12px;
  line-height: 1.3;
}
.wizard-step-active {
  color: #1f2933;
  background: #eff6ff;
}
.wizard-step-active .wizard-step-badge {
  background: #2563eb;
  color: #ffffff;
}
.wizard-step-past .wizard-step-badge {
  background: #10b981;
  color: #ffffff;
}

/* ---- Step content card ---- */
.wizard-card {
  background: #ffffff;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}
.wizard-card-title {
  font-size: 18px;
  margin: 0 0 8px;
  color: #1f2933;
}
.wizard-card-intro {
  color: #52606d;
  margin: 0 0 16px;
  line-height: 1.5;
}
.wizard-card-hint {
  color: #7b8794;
  font-size: 13px;
  margin: 12px 0 0;
}

.wizard-section { margin-top: 20px; }
.wizard-section:first-of-type { margin-top: 0; }
.wizard-section-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  color: #1f2933;
}

/* ---- Form bits inside wizard cards ---- */
.wizard-form,
.wizard-inline-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wizard-inline-form {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.wizard-field { display: flex; flex-direction: column; gap: 6px; }
.wizard-field-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
.wizard-text-input,
.wizard-port-input {
  font: inherit;
  padding: 6px 10px;
  border: 1px solid #cbd2d9;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2933;
}
.wizard-port-input { width: 90px; }
.wizard-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.wizard-form-actions-prominent { margin-top: 20px; }
.btn-large { font-size: 15px; padding: 10px 18px; }

.wizard-bullets {
  margin: 8px 0 12px;
  padding-left: 20px;
  color: #1f2933;
}
.wizard-bullets li { margin: 4px 0; }

.wizard-link { color: #2563eb; text-decoration: none; }
.wizard-link:hover { text-decoration: underline; }

/* ---- State banner inside a step ---- */
.wizard-state-banner {
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  border: 1px solid;
  font-size: 13px;
  line-height: 1.5;
}
.wizard-state-ok {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
.wizard-state-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #78350f;
}

/* ---- dendriteXR epic grid inside step 3 ---- */
.wizard-epic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 8px;
}
.wizard-epic-card {
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  padding: 12px;
  background: #f8fafc;
  /* Allow the grid track (and the file input inside) to shrink below
     their intrinsic content widths so the card itself can stay flush
     with its grid cell on narrow viewports. */
  min-width: 0;
}
.wizard-epic-status {
  font-size: 13px;
  color: #52606d;
  margin: 0 0 8px;
}
.wizard-epic-status-ok { color: #065f46; }

/* Inside each card, the upload form stacks vertically so the file input
   gets the full card width and the button sits neatly beneath it instead
   of being shoved out by the file input's intrinsic minimum width. */
.wizard-epic-card .wizard-inline-form {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.wizard-epic-card .file-input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.wizard-epic-card .btn { align-self: flex-end; }

/* ---- Prev / Skip / Next footer ---- */
.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
}
.wizard-nav-left, .wizard-nav-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: #7b8794;
}
.btn-ghost:hover { color: #1f2933; }

/* =========================================================================
   Wizard — dark mode
========================================================================= */
[data-theme="dark"] .wizard-title { color: #e2e8f0; }
[data-theme="dark"] .wizard-subtitle { color: #94a3b8; }
[data-theme="dark"] .wizard-progress {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .wizard-step { color: #94a3b8; }
[data-theme="dark"] .wizard-step:hover {
  background: #0f172a;
  color: #e2e8f0;
}
[data-theme="dark"] .wizard-step-badge {
  background: #334155;
  color: #cbd5e1;
}
[data-theme="dark"] .wizard-step-active {
  background: #1e3a8a33;
  color: #e2e8f0;
}
[data-theme="dark"] .wizard-step-active .wizard-step-badge {
  background: #3b82f6;
}
[data-theme="dark"] .wizard-card {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .wizard-card-title { color: #e2e8f0; }
[data-theme="dark"] .wizard-card-intro { color: #cbd5e1; }
[data-theme="dark"] .wizard-card-hint { color: #94a3b8; }
[data-theme="dark"] .wizard-section-title { color: #e2e8f0; }
[data-theme="dark"] .wizard-field-label { color: #cbd5e1; }
[data-theme="dark"] .wizard-text-input,
[data-theme="dark"] .wizard-port-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .wizard-bullets { color: #e2e8f0; }
[data-theme="dark"] .wizard-link { color: #60a5fa; }
[data-theme="dark"] .wizard-state-ok {
  background: #052e1f;
  border-color: #047857;
  color: #6ee7b7;
}
[data-theme="dark"] .wizard-state-warn {
  background: #1c1206;
  border-color: #713f12;
  color: #fbbf24;
}
[data-theme="dark"] .wizard-epic-card {
  background: #0f172a;
  border-color: #334155;
}
[data-theme="dark"] .wizard-epic-status { color: #94a3b8; }
[data-theme="dark"] .wizard-epic-status-ok { color: #6ee7b7; }
[data-theme="dark"] .btn-ghost { color: #94a3b8; }
[data-theme="dark"] .btn-ghost:hover { color: #e2e8f0; }

/* Landing-page CTA for the setup wizard */
.wizard-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #eff6ff 0%, #ecfdf5 100%);
  border: 1px solid #93c5fd;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 0 0 20px;
}
.wizard-cta-body { flex: 1 1 auto; min-width: 260px; }
.wizard-cta-title { margin: 0 0 4px; font-size: 17px; color: #1e3a8a; }
.wizard-cta-desc { margin: 0; color: #1f2933; font-size: 13px; line-height: 1.5; }
[data-theme="dark"] .wizard-cta {
  background: linear-gradient(135deg, #1e3a8a33 0%, #052e1f 100%);
  border-color: #1e3a8a;
}
[data-theme="dark"] .wizard-cta-title { color: #bfdbfe; }
[data-theme="dark"] .wizard-cta-desc { color: #e2e8f0; }

/* Wizard return-banner — shown at the top of synapseXR / dendriteXR /
   callosumXR when the user arrived via a wizard step link. Cleared on
   any /wizard/* visit. */
.wizard-return-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 13px;
  color: #1e3a8a;
}
.wizard-return-marker { flex: 1 1 auto; }
.wizard-return-marker strong { letter-spacing: 0.04em; }
[data-theme="dark"] .wizard-return-banner {
  background: #1e3a8a33;
  border-color: #1e3a8a;
  color: #bfdbfe;
}

/* =========================================================================
   DCP two-pane layout — sidebar + main pane
   Used by /p/<pid>/dcp/<did> (Data Editor) and /callosum/dcp/<did>
   (callosumXR). Replaces the previous horizontal DCP tab strip.
========================================================================= */

.dcp-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: start;
}

/* ---- Sidebar ---- */
.dcp-sidebar {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  padding: 8px 0;
  font-size: 13px;
}
.dcp-sidebar-empty {
  padding: 12px 16px;
  color: #7b8794;
  margin: 0;
}

/* Collapsible pipeline section: native <details>/<summary>. */
.dcp-sidebar-pipeline { border-bottom: 1px solid #f0f4f8; }
.dcp-sidebar-pipeline:last-child { border-bottom: none; }
.dcp-sidebar-pipeline-name {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-weight: 600;
  color: #1f2933;
  cursor: pointer;
  list-style: none;          /* hide the default disclosure triangle */
  user-select: none;
}
.dcp-sidebar-pipeline-name::-webkit-details-marker { display: none; }
.dcp-sidebar-pipeline-name:hover { background: #f5f7fa; }
.dcp-sidebar-pipeline-caret {
  display: inline-block;
  width: 12px;
  font-size: 10px;
  color: #7b8794;
  transition: transform 0.15s;
}
.dcp-sidebar-pipeline[open] > .dcp-sidebar-pipeline-name .dcp-sidebar-pipeline-caret {
  transform: rotate(90deg);
}
.dcp-sidebar-pipeline-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dcp-sidebar-pipeline-meta {
  font-weight: normal;
  font-size: 11px;
  color: #7b8794;
  background: #e4e7eb;
  border-radius: 10px;
  padding: 1px 7px;
}

.dcp-sidebar-dcp-list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}
.dcp-sidebar-dcp-list-empty {
  padding: 4px 28px;
  color: #7b8794;
  font-size: 12px;
  font-style: italic;
}

/* Each DCP row inside a pipeline section. */
.dcp-sidebar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 28px;
  color: #1f2933;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.dcp-sidebar-row:hover {
  background: #f5f7fa;
  text-decoration: none;
}
.dcp-sidebar-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dcp-sidebar-row-count {
  font-size: 11px;
  color: #7b8794;
  background: #e4e7eb;
  border-radius: 10px;
  padding: 1px 7px;
  flex: 0 0 auto;
}
.dcp-sidebar-row-active {
  background: #eff6ff;
  color: #1e3a8a;
  border-left-color: #2563eb;
  font-weight: 600;
}
.dcp-sidebar-row-active .dcp-sidebar-row-count {
  background: #bfdbfe;
  color: #1e3a8a;
}
.dcp-sidebar-row-empty {
  opacity: 0.55;
}

/* ---- Main pane ---- */
.dcp-main { min-width: 0; }   /* lets .table-wrap shrink within the grid */

/* =========================================================================
   DCP layout — dark mode
========================================================================= */
[data-theme="dark"] .dcp-sidebar {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .dcp-sidebar-empty,
[data-theme="dark"] .dcp-sidebar-dcp-list-empty,
[data-theme="dark"] .dcp-sidebar-pipeline-caret,
[data-theme="dark"] .dcp-sidebar-pipeline-meta { color: #94a3b8; }
[data-theme="dark"] .dcp-sidebar-pipeline-meta {
  background: #0f172a;
}
[data-theme="dark"] .dcp-sidebar-pipeline { border-bottom-color: #0f172a; }
[data-theme="dark"] .dcp-sidebar-pipeline-name { color: #e2e8f0; }
[data-theme="dark"] .dcp-sidebar-pipeline-name:hover { background: #0f172a; }
[data-theme="dark"] .dcp-sidebar-row { color: #e2e8f0; }
[data-theme="dark"] .dcp-sidebar-row:hover { background: #0f172a; }
[data-theme="dark"] .dcp-sidebar-row-count {
  background: #0f172a;
  color: #94a3b8;
}
[data-theme="dark"] .dcp-sidebar-row-active {
  background: #1e3a8a33;
  color: #bfdbfe;
  border-left-color: #3b82f6;
}
[data-theme="dark"] .dcp-sidebar-row-active .dcp-sidebar-row-count {
  background: #1e3a8a;
  color: #bfdbfe;
}

/* =========================================================================
   tractXR — dataflow trace visualizer
   ========================================================================= */
.tract-header { margin-bottom: 1.25rem; }
.tract-header h1 { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 700; }
.tract-header-sub { margin: 0; color: #64748b; font-size: 0.875rem; max-width: 62ch; }

.tract-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tract-empty-state { color: #475569; }

/* ---- Composer ---- */
.tract-composer {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
}
.tract-composer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.tract-field { display: flex; flex-direction: column; gap: 0.2rem; }
.tract-field-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.tract-field input, .tract-field select {
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  min-width: 9.5rem;
  background: #fff;
  color: inherit;
}
.tract-field input::placeholder {
  color: #b0bdcc;
  font-style: italic;
}
.tract-field-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.tract-field-input-wrap input { padding-right: 26px; width: 100%; }
.tract-field-clear {
  position: absolute;
  right: 4px;
  display: none;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
}
.tract-field-input-wrap.has-value .tract-field-clear { display: block; }
.tract-field-clear:hover { color: #dc2626; background: #f1f5f9; }
/* Locked = readonly until a VarId is set. The clear button intentionally
   stays usable on locked fields: clearing removes data, it never sets it. */
.tract-field-locked input {
  background: #f8fafc;
  color: #94a3b8;
  border-style: dashed;
  cursor: not-allowed;
}
.tract-run-btn { align-self: flex-end; }
.tract-composer-hint { margin: 0.6rem 0 0; font-size: 0.78rem; color: #94a3b8; }
.tract-message {
  margin-bottom: 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.85rem;
}

/* ---- Stage rail ---- */
.tract-rail { max-width: 900px; }
.tract-card-source { border-left: 4px solid #2563eb; }
.tract-card-terminal { border-left: 4px solid #059669; }
.tract-card-terminal-dropped { border-left: 4px solid #dc2626; background: #fef2f2; }
.tract-card-terminal-dropped p, .tract-card-terminal p { margin: 0.4rem 0 0.5rem; font-size: 0.85rem; }
.tract-stage-dropped { border-left: 4px solid #dc2626; }
.tract-stage-ghost { opacity: 0.5; }

.tract-stage-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.tract-stage-name { font-weight: 600; font-size: 0.95rem; }
.tract-stage-sub { color: #94a3b8; font-size: 0.8rem; }
.tract-stage-count {
  font-size: 0.72rem;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 1px 8px;
}
.tract-badge {
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tract-badge-muted { background: #f1f5f9; color: #64748b; }
.tract-badge-assumed { background: #fef3c7; color: #92400e; cursor: help; }
.tract-badge-dropped { background: #fee2e2; color: #991b1b; }

.tract-stage-notes { margin-top: 0.5rem; font-size: 0.75rem; color: #94a3b8; }

/* ---- Rule rows ---- */
.tract-rule {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 3px;
  font-size: 0.83rem;
}
.tract-rule-icon { width: 1em; flex-shrink: 0; }
.tract-rule-prio { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #64748b; flex-shrink: 0; }
.tract-rule-winner {
  background: #ecfdf5;
  border-left: 3px solid #059669;
}
.tract-rule-winner .tract-rule-icon { color: #059669; font-weight: 700; }
.tract-rule-failed { color: #6b7280; }
.tract-rule-failed .tract-rule-icon { color: #dc2626; }
.tract-rule-unconsulted { color: #9ca3af; }
.tract-rule-nomatch, .tract-rule-empty { color: #94a3b8; font-size: 0.83rem; padding: 4px 8px; }
.tract-rule-nofilters { color: #94a3b8; font-style: italic; }
.tract-rule-extras { color: #475569; }

.tract-gate-outcome { margin: 0.3rem 0 0 1.6rem; font-size: 0.78rem; color: #047857; }
.tract-gate-outcome-drop { color: #b91c1c; }

.tract-fold { margin-top: 3px; }
.tract-fold > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: #64748b;
  padding: 2px 8px;
  user-select: none;
}
.tract-fold > summary:hover { color: #2563eb; }
.tract-fold-more { color: #94a3b8; font-size: 0.78rem; padding: 2px 8px 2px 2rem; }

/* ---- Chips ---- */
.tract-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 1px 6px;
  margin: 1px 0;
}
.tract-chip-fail {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.tract-chip-extra {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.tract-chip-change {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
  font-weight: 600;
}
.tract-state-chips { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 4px; }

/* ---- Connectors ---- */
.tract-connector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 4px 0 4px 2rem;
  color: #94a3b8;
  font-size: 0.78rem;
}
.tract-connector-arrow { color: #cbd5e1; font-size: 0.9rem; }
.tract-connector-note { color: #cbd5e1; }
.tract-connector-ghost { opacity: 0.4; }
.tract-connector-dropped {
  color: #b91c1c;
  font-weight: 600;
  padding: 6px 0 6px 2rem;
  font-size: 0.83rem;
}
.tract-hide-unreached .tract-unreached { display: none; }
.tract-unreached-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 4px 0 4px 2rem;
  font-size: 0.78rem;
  color: #94a3b8;
}
.tract-unreached-toggle {
  border: 1px solid #cbd5e1;
  background: transparent;
  color: #2563eb;
  font-size: 0.72rem;
  padding: 1px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.tract-unreached-toggle:hover { background: #eff6ff; }
.tract-outbound-note { font-size: 0.83rem; color: #475569; }

/* ---- tractXR dark mode ---- */
[data-theme="dark"] .tract-header-sub { color: #94a3b8; }
[data-theme="dark"] .tract-card,
[data-theme="dark"] .tract-composer {
  background: #1e293b;
  border-color: #334155;
  box-shadow: none;
}
[data-theme="dark"] .tract-empty-state { color: #94a3b8; }
[data-theme="dark"] .tract-field input,
[data-theme="dark"] .tract-field select {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .tract-field input::placeholder { color: #475569; }
[data-theme="dark"] .tract-field-clear { color: #64748b; }
[data-theme="dark"] .tract-field-clear:hover { color: #f87171; background: #1e293b; }
[data-theme="dark"] .tract-field-locked input {
  background: #1e293b;
  color: #64748b;
}
[data-theme="dark"] .tract-message { background: #422006; color: #fde68a; }
[data-theme="dark"] .tract-card-terminal-dropped { background: #2c1517; }
[data-theme="dark"] .tract-stage-count { background: #0f172a; color: #94a3b8; }
[data-theme="dark"] .tract-badge-muted { background: #0f172a; color: #94a3b8; }
[data-theme="dark"] .tract-badge-assumed { background: #422006; color: #fde68a; }
[data-theme="dark"] .tract-badge-dropped { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .tract-rule-winner { background: #062e26; border-left-color: #10b981; }
[data-theme="dark"] .tract-rule-failed { color: #94a3b8; }
[data-theme="dark"] .tract-rule-unconsulted { color: #64748b; }
[data-theme="dark"] .tract-gate-outcome { color: #34d399; }
[data-theme="dark"] .tract-gate-outcome-drop { color: #f87171; }
[data-theme="dark"] .tract-chip {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}
[data-theme="dark"] .tract-chip-fail { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .tract-chip-extra { background: #172554; border-color: #1e40af; color: #93c5fd; }
[data-theme="dark"] .tract-chip-change { background: #172554; border-color: #3b82f6; color: #bfdbfe; }
[data-theme="dark"] .tract-connector-arrow,
[data-theme="dark"] .tract-connector-note { color: #334155; }
[data-theme="dark"] .tract-connector-dropped { color: #f87171; }
[data-theme="dark"] .tract-unreached-summary { color: #64748b; }
[data-theme="dark"] .tract-unreached-toggle {
  border-color: #334155;
  color: #60a5fa;
}
[data-theme="dark"] .tract-unreached-toggle:hover { background: #172554; }
[data-theme="dark"] .tract-outbound-note { color: #94a3b8; }

/* resectXR — device-type-scoped DMM stack export composer
   ---------------------------------------------------------------------- */
.resect-header { margin-bottom: 1.25rem; }
.resect-header h1 { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 700; }
.resect-header-sub { margin: 0; color: #64748b; font-size: 0.875rem; max-width: 62ch; }
.resect-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
}
.resect-empty-state { color: #475569; }
.resect-composer {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.resect-composer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.resect-field { display: flex; flex-direction: column; gap: 0.2rem; }
.resect-field-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.resect-field select {
  padding: 5px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  min-width: 9.5rem;
  background: #fff;
}
.resect-strict {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #52606d;
  cursor: pointer;
  padding-bottom: 6px;
}
.resect-hint { margin: 8px 0 0; color: #7b8794; font-size: 13px; }
.resect-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.resect-summary-text { color: #52606d; font-size: 13px; }
.resect-row-empty td { color: #9aa5b1; }
.resect-row-note { font-size: 12px; color: #9aa5b1; }
[data-theme="dark"] .resect-header-sub { color: #94a3b8; }
[data-theme="dark"] .resect-card,
[data-theme="dark"] .resect-composer {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .resect-empty-state { color: #94a3b8; }
[data-theme="dark"] .resect-field select {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .resect-strict { color: #94a3b8; }
[data-theme="dark"] .resect-hint { color: #64748b; }
[data-theme="dark"] .resect-summary-text { color: #94a3b8; }
[data-theme="dark"] .resect-row-empty td { color: #64748b; }
[data-theme="dark"] .resect-row-note { color: #64748b; }

/* ----------------------------------------------------------------------- */
/* ganglionXR — DCCF device-connection editor                              */
/* ----------------------------------------------------------------------- */

.ganglion-header { margin-bottom: 1.25rem; }
.ganglion-header h1 { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 700; }
.ganglion-header-sub { margin: 0; color: #64748b; font-size: 0.875rem; max-width: 68ch; }
.ganglion-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.ganglion-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.ganglion-source { display: flex; flex-direction: column; gap: 0.35rem; }
.ganglion-source-label { font-size: 12px; font-weight: 600; color: #475569; }
.ganglion-source-controls { display: flex; gap: 0.5rem; align-items: center; }
.ganglion-source-hint { color: #7b8794; font-size: 12px; }
.ganglion-warnings {
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  color: #78350f;
  font-size: 13px;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.ganglion-warnings ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.ganglion-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ganglion-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  padding: 4px 8px;
  border-bottom: 2px solid #e2e8f0;
}
.ganglion-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}
.ganglion-col-num { color: #94a3b8; width: 2rem; }
.ganglion-col-port, .ganglion-col-baud, .ganglion-col-pds, .ganglion-col-rts { width: 5rem; }
.ganglion-col-remove { width: 5.5rem; text-align: right; }
.ganglion-input {
  width: 100%;
  box-sizing: border-box;
  padding: 3px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: inherit;
}
.ganglion-input-narrow { max-width: 5rem; }
.ganglion-addr { display: inline-flex; align-items: center; gap: 6px; }
.ganglion-input-host { min-width: 13rem; }
.ganglion-addr-toggle {
  font-size: 10px;
  letter-spacing: 0.03em;
  color: #64748b;
  padding: 2px 6px;
}
.ganglion-ip { display: inline-flex; align-items: center; gap: 2px; }
.ganglion-input-octet { width: 3.1em; text-align: center; padding: 3px 2px; }
.ganglion-input-octet:invalid {
  border-color: #dc2626;
  background: #fef2f2;
}
.ganglion-ip-dot { color: #94a3b8; font-weight: 600; }
.ganglion-passthrough {
  color: #64748b;
  background: rgba(100, 116, 139, 0.06);
}
.ganglion-passthrough-label { font-style: italic; font-size: 12px; }
.ganglion-passthrough-sep { color: #cbd5e1; margin: 0 4px; }
.ganglion-chip {
  display: inline-block;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  padding: 1px 6px;
  margin-right: 4px;
}
.ganglion-chip-empty { font-style: italic; font-family: inherit; }
.ganglion-driver { color: #475569; font-size: 12px; white-space: nowrap; }
.ganglion-driver select { width: auto; font-size: 12px; }
.ganglion-empty { color: #7b8794; text-align: center; padding: 1.2rem 0; }
.ganglion-actions { display: flex; gap: 0.6rem; }
.ganglion-hidden-submit { display: none; }
.ganglion-fieldwrap { display: inline-flex; align-items: center; gap: 2px; width: 100%; }
.ganglion-undo {
  background: none;
  border: none;
  cursor: pointer;
  color: #b45309;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.ganglion-undo:hover { color: #78350f; }
.ganglion-undo-hidden { display: none !important; }
.ganglion-undo-row { color: #b45309; white-space: nowrap; }
.ganglion-row-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  margin-left: 5px;
  vertical-align: middle;
}
.ganglion-row-changed td { background: rgba(245, 158, 11, 0.05); }

[data-theme="dark"] .ganglion-header-sub { color: #94a3b8; }
[data-theme="dark"] .ganglion-card {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .ganglion-source-label { color: #94a3b8; }
[data-theme="dark"] .ganglion-source-hint { color: #64748b; }
[data-theme="dark"] .ganglion-warnings {
  background: #3a2e10;
  border-color: #92700c;
  color: #fbe4a5;
}
[data-theme="dark"] .ganglion-table th { color: #94a3b8; border-bottom-color: #334155; }
[data-theme="dark"] .ganglion-table td { border-bottom-color: #293548; }
[data-theme="dark"] .ganglion-input {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .ganglion-passthrough { color: #94a3b8; }
[data-theme="dark"] .ganglion-passthrough-sep { color: #475569; }
[data-theme="dark"] .ganglion-input-octet:invalid {
  border-color: #b91c1c;
  background: #2d1416;
}
[data-theme="dark"] .ganglion-ip-dot { color: #64748b; }
[data-theme="dark"] .ganglion-addr-toggle { color: #94a3b8; }
[data-theme="dark"] .ganglion-undo { color: #fbbf24; }
[data-theme="dark"] .ganglion-undo:hover { color: #fde68a; }
[data-theme="dark"] .ganglion-undo-row { color: #fbbf24; }
[data-theme="dark"] .ganglion-row-changed td { background: rgba(245, 158, 11, 0.07); }
[data-theme="dark"] .ganglion-chip { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .ganglion-driver { color: #94a3b8; }
[data-theme="dark"] .ganglion-empty { color: #64748b; }

/* Paste-transport fallback (shared partial on every text import form). */
.paste-fallback { margin-top: 8px; }
.paste-fallback-summary {
  font-size: 12px;
  color: #52606d;
  cursor: pointer;
  user-select: none;
}
.paste-fallback-summary:hover { color: #2563eb; }
.paste-fallback-label { display: block; margin-top: 6px; }
.paste-fallback-hint {
  display: block;
  font-size: 12px;
  color: #7b8794;
  margin-bottom: 4px;
}
.paste-fallback-textarea {
  width: 100%;
  min-height: 140px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid #cbd2d9;
  border-radius: 4px;
  resize: vertical;
  background: #f5f7fa;
  color: #1f2933;
}
.paste-fallback-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
  background: #ffffff;
}
[data-theme="dark"] .paste-fallback-summary { color: #94a3b8; }
[data-theme="dark"] .paste-fallback-summary:hover { color: #3b82f6; }
[data-theme="dark"] .paste-fallback-hint { color: #64748b; }
[data-theme="dark"] .paste-fallback-textarea {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}
[data-theme="dark"] .paste-fallback-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  background: #0f172a;
}

/* Copy-view page (view-as-text alternative on every text export). */
.copy-view-meta { color: #7b8794; font-size: 13px; margin: 4px 0 10px; }
.copy-view-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.copy-view-status {
  font-size: 13px;
  color: #15803d;
  min-width: 220px;
}
.copy-view-textarea {
  width: 100%;
  height: 65vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid #cbd2d9;
  border-radius: 4px;
  background: #f5f7fa;
  color: #1f2933;
  overflow: auto;
  white-space: pre;
}
[data-theme="dark"] .copy-view-meta { color: #64748b; }
[data-theme="dark"] .copy-view-status { color: #4ade80; }
[data-theme="dark"] .copy-view-textarea {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

/* Compact "txt" companion links beside Download buttons. */
.copy-link {
  padding: 2px 8px;
  font-size: 12px;
}

/* Second filter row on the Errors screen (pipeline pills under severity). */
.pipeline-filter { margin-top: 6px; }

/* Error-fix screens. */
.error-fix-back { margin: 0 0 10px; }
.error-fix-title { display: flex; align-items: center; gap: 10px; }
.error-fix-subhead { margin-top: 18px; }
.error-fix-message, .error-fix-hint { color: #52606d; }
.error-fix-delete-form { margin-top: 14px; }
[data-theme="dark"] .error-fix-message,
[data-theme="dark"] .error-fix-hint { color: #94a3b8; }