/* DrawBridge base styles.
   All colors come from:
   - var(--db-color-*) skin slots injected by branding.py from branding.toml
   - var(--ink-*) / var(--green-*) / var(--text-*) etc. token set from tokens.css
   No hardcoded hex values in this file. */

[x-cloak] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--db-font-body);
  background: var(--bg-app-glow);
  color: var(--text-body);
  line-height: var(--leading-normal);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-2xl); font-weight: var(--weight-black); }
h2 { font-size: var(--text-xl);  font-weight: var(--weight-bold);  }
h3 { font-size: var(--text-lg);  font-weight: var(--weight-bold);  }
h4 { font-size: var(--text-md);  font-weight: var(--weight-bold);  }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: none;
}

/* ─── App shell ───────────────────────────────────────────────────────────── */

.db-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ─── The rail — one thin spine, the only chrome shared across every face ──── */

.db-rail {
  width: var(--rail-w);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  background: var(--bg-floor);
  border-right: var(--border-1) solid var(--line-faint);
}

.db-rail-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-bottom: var(--space-1);
}

.db-rail-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-2);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  box-shadow: var(--shadow-1);
}

/* The HTMX target: a full-height column so the footer pins to the bottom. */
.db-rail-nav {
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}

.db-rail-views {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.db-rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.db-rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-2);
  border: var(--border-1) solid transparent;
  color: var(--text-3);
  transition:
    color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.db-rail-btn:hover {
  color: var(--text-1);
  background: var(--surface-hover);
  text-decoration: none;
}

.db-rail-btn--active {
  color: var(--accent) !important;
  background: var(--green-soft);
  border-color: var(--green-edge);
}

.db-rail-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: var(--border-1) solid var(--line-strong);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition:
    color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.db-rail-avatar:hover {
  color: var(--text-1);
  border-color: var(--green-edge);
  text-decoration: none;
}

/* ─── The canvas — full-bleed; the face owns the whole surface ─────────────── */

.db-canvas {
  flex: 1;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ─── Safe-area insets (installed app, notched / home-indicator devices) ────
   Belt-and-braces for the iPad house shell running standalone with
   viewport-fit=cover: pad only the axes that can actually be occluded — the
   rail is the left edge, the canvas is the right, the home indicator is the
   bottom. The TOP is deliberately absent: the status bar is opaque
   (apple-mobile-web-app-status-bar-style=black), so nothing is under it.

   These rules sit AFTER the shell rules above on purpose — .db-rail sets
   `padding: … 0` as a shorthand, and a shorthand later in the file would reset
   an inset declared earlier. env() resolves to the 0px fallback on every
   desktop browser and on the iPad in portrait, and `* { box-sizing:
   border-box }` keeps the 100vh shell exactly 100vh, so the desktop visual
   diff is zero. */

.db-app    { padding-bottom: env(safe-area-inset-bottom, 0px); }
.db-rail   { padding-left:   env(safe-area-inset-left,   0px); }
.db-canvas { padding-right:  env(safe-area-inset-right,  0px); }

/* Undesigned faces opt into comfortable padding with this wrapper; the two
   designed faces (War Table, Calendar) render edge-to-edge without it. */
.db-face-pad {
  flex: 1;
  min-height: 0;
  padding: var(--space-6) var(--space-7);
}

/* A light in-face header for the undesigned scaffolds, so they read as a real
   surface inside the full-bleed canvas instead of bare content. */
.db-face-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.db-face-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
}

.db-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  letter-spacing: var(--tracking-mono);
}

/* ─── Cards ───────────────────────────────────────────────────────────────── */

.db-card {
  background: var(--surface);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-3);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-1), var(--shadow-inset);
  transition: border-color var(--dur-2) var(--ease-out);
}

.db-card:hover {
  border-color: var(--border-strong);
}

.db-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.db-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* ─── Login page (standalone — no app shell) ──────────────────────────────── */

body.db-login-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--bg-app-glow);
}

.db-login-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: min(880px, 100%);
  min-height: 480px;
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-4);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}

.db-login-brand {
  position: relative;
  background:
    radial-gradient(620px 420px at 18% 110%, rgba(31, 163, 84, 0.32), transparent 65%),
    radial-gradient(circle, var(--line-faint) 1px, transparent 1px) center / 24px 24px,
    var(--ink-850);
  border-right: var(--border-1) solid var(--line-faint);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-7);
}

.db-login-wordmark {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.db-login-headline {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-1);
  max-width: 320px;
  margin: 0 0 var(--space-3);
  line-height: var(--leading-snug);
}

.db-login-brand-sub {
  color: var(--text-3);
  font-size: var(--text-sm);
  max-width: 300px;
  margin: 0;
}

.db-login-siege {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-4);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.7;
}

.db-login-form-panel {
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  background: var(--sheen), var(--surface);
}

.db-login-form-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-1);
  margin: 0 0 var(--space-2);
}

.db-login-form-sub {
  color: var(--text-3);
  font-size: var(--text-sm);
  margin: 0;
}

.db-login-footnote {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-light);
  color: var(--text-4);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}

@media (max-width: 700px) {
  .db-login-card {
    grid-template-columns: 1fr;
  }
  .db-login-brand {
    padding: var(--space-6);
    min-height: 180px;
    gap: var(--space-5);
  }
}

/* ─── Forms ───────────────────────────────────────────────────────────────── */

.db-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.db-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-2);
  letter-spacing: var(--tracking-wide);
}

.db-form input,
.db-form select,
.db-form textarea {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-1);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  transition: border-color var(--dur-1) var(--ease-out);
}

.db-form input:focus,
.db-form select:focus,
.db-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--glow-focus);
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.db-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-2);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.db-btn:hover {
  background: var(--accent-hover);
  box-shadow: var(--glow-accent);
}

.db-btn:active { background: var(--accent-press); }

.db-btn--ghost {
  background: transparent;
  color: var(--text-2);
  border: var(--border-1) solid var(--border);
}

.db-btn--ghost:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  box-shadow: none;
}

.db-btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-1);
}

.db-btn--full {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ─── Semantic / status ───────────────────────────────────────────────────── */

.db-muted   { color: var(--text-3); }
.db-accent  { color: var(--accent); }
.db-mono    { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }

.db-error {
  color: var(--critical);
  background: var(--critical-soft);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-1);
  font-size: var(--text-sm);
}

.db-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: var(--surface-raised);
  color: var(--text-2);
}

.db-badge--positive { background: var(--positive-soft); color: var(--positive); }
.db-badge--caution  { background: var(--caution-soft);  color: var(--caution);  }
.db-badge--critical { background: var(--critical-soft); color: var(--critical); }
.db-badge--info     { background: var(--info-soft);     color: var(--info);     }
.db-badge--accent   { background: var(--green-soft);    color: var(--accent);   }

/* ─── Tables ──────────────────────────────────────────────────────────────── */

.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.db-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-1) solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-3);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.db-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-1) solid var(--border);
  color: var(--text-2);
  vertical-align: top;
}

.db-table tr:hover td { background: var(--surface-hover); }

/* ─── Layout utilities ────────────────────────────────────────────────────── */

.db-inline  { display: flex; gap: var(--space-3); align-items: center; }
.db-panel   { margin-top: var(--space-4); }
.db-detail  { margin-top: var(--space-3); }
.db-spacer  { flex: 1; }
.db-divider {
  border: none;
  border-top: var(--border-1) solid var(--border);
  margin: var(--space-5) 0;
}

/* ─── Powered-by mark ─────────────────────────────────────────────────────── */

.db-powered {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-4);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ─── Topbar extras (breadcrumb sep + dashboard tabs) ─────────────────────── */

.db-topbar-sep {
  color: var(--text-4);
  font-size: var(--text-sm);
  padding: 0 var(--space-2);
}

.db-topbar-sub {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-2);
}

.db-dash-tabs {
  display: flex;
  gap: var(--space-1);
  margin-left: var(--space-4);
}

.db-dash-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-3);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.db-dash-tab:hover {
  border-color: var(--border-strong);
  color: var(--text-2);
}

.db-dash-tab--active {
  border-color: var(--green-edge);
  background: var(--green-soft);
  color: var(--accent);
}

/* ─── KPI tile grid ───────────────────────────────────────────────────────── */

.db-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.db-kpi-empty {
  grid-column: 1 / -1;
  padding: var(--space-7) var(--space-6);
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-sm);
}

.db-kpi-empty--setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.db-kpi-empty__icon {
  font-size: var(--text-2xl);
  color: var(--text-4);
  display: block;
}

.db-kpi-empty__heading {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-2);
  margin: 0;
}

.db-kpi-empty__sub {
  color: var(--text-4);
  font-size: var(--text-sm);
  max-width: 380px;
  margin: 0;
}

/* ─── KPI tile card ───────────────────────────────────────────────────────── */

.db-kpi-tile {
  background: var(--surface);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-3);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-1), var(--shadow-inset);
  transition: border-color var(--dur-2) var(--ease-out);
  min-height: 140px;
}

.db-kpi-tile:hover {
  border-color: var(--border-strong);
}

.db-kpi-tile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.db-kpi-tile__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-2);
  letter-spacing: var(--tracking-wide);
}

.db-kpi-tile__chart-badge {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-4);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: var(--surface-raised);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  flex: none;
}

/* ─── Number tile ─────────────────────────────────────────────────────────── */

.db-kpi-number {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
}

.db-kpi-number--sm .db-kpi-number__value {
  font-size: var(--text-2xl);
}

.db-kpi-number__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  color: var(--text-1);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
}

.db-kpi-number__op {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-4);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ─── Bar chart tile ──────────────────────────────────────────────────────── */

.db-kpi-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.db-kpi-bar-row {
  display: grid;
  grid-template-columns: 1fr 3fr auto;
  align-items: center;
  gap: var(--space-3);
}

.db-kpi-bar-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-kpi-bar-track {
  height: 6px;
  background: var(--surface-raised);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.db-kpi-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  min-width: 2px;
  transition: width var(--dur-3) var(--ease-out);
}

.db-kpi-bar-val {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
  text-align: right;
  min-width: 24px;
}

/* ─── Line / sparkline tile ───────────────────────────────────────────────── */

.db-kpi-sparkline {
  flex: 1;
  min-height: 56px;
  overflow: hidden;
}

.db-kpi-sparkline svg {
  width: 100%;
  height: 56px;
  display: block;
}

.db-kpi-sparkline-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
}

.db-kpi-sparkline-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-4);
  letter-spacing: var(--tracking-mono);
}

/* ─── Pie tile ────────────────────────────────────────────────────────────── */

.db-kpi-pie-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.db-kpi-pie-donut {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-kpi-pie-donut--empty {
  background: var(--surface-raised);
}

.db-kpi-pie-hole {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
}

.db-kpi-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.db-kpi-pie-legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  overflow: hidden;
}

.db-kpi-pie-swatch {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.db-kpi-pie-key {
  flex: 1;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-kpi-pie-val {
  font-family: var(--font-mono);
  color: var(--text-2);
  font-size: var(--text-xs);
}

/* ─── Table tile ──────────────────────────────────────────────────────────── */

.db-kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.db-kpi-table th {
  text-align: left;
  padding: var(--space-1) var(--space-3) var(--space-1) 0;
  border-bottom: var(--border-1) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-4);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.db-kpi-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: var(--border-1) solid var(--line-faint);
  color: var(--text-2);
  vertical-align: middle;
}

.db-kpi-table td:last-child {
  font-family: var(--font-mono);
  text-align: right;
  padding-right: 0;
  color: var(--text-1);
}

.db-kpi-table__empty {
  color: var(--text-4);
  text-align: center;
  font-style: italic;
}

/* ─── Responsive ──────────────────────────────────────────────────────────
   The rail is already thin enough to keep on phones (it IS the mobile nav),
   so it stays. Undesigned faces drop to a single padding step on small
   screens so the full-bleed canvas keeps its edges tight. */

@media (max-width: 640px) {
  .db-face-pad { padding: var(--space-4); }
}

/* ─── Card detail ─────────────────────────────────────────────────────────── */

.db-cd-title-clip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}

/* Header row: back + REC ID + badges */
.db-cd-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.db-cd-back {
  text-decoration: none;
  flex-shrink: 0;
}

.db-cd-rec-id {
  font-family: var(--font-dotted);
  font-weight: var(--weight-light);
  font-size: var(--text-lg);
  color: var(--accent);
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px var(--green-edge);
  flex-shrink: 0;
}

.db-cd-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.db-cd-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 6px var(--green-edge);
  animation: db-cd-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes db-cd-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

.db-cd-live-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 6px var(--green-edge);
  animation: db-cd-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
  align-self: center;
}

/* Two-column page layout */
.db-cd-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.db-cd-col-main,
.db-cd-col-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Section cards — same .db-card base, just no bottom margin override */
.db-cd-section {
  margin-bottom: 0;
}

.db-cd-section-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
}

/* Field rows */
.db-cd-fields {
  display: flex;
  flex-direction: column;
}

.db-cd-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--border-1) solid var(--line-faint);
}

.db-cd-field-row:last-child {
  border-bottom: none;
}

.db-cd-field-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-light);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-4);
  flex-shrink: 0;
}

.db-cd-field-value {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-1);
  text-align: right;
  word-break: break-word;
}

.db-cd-firewall-note {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-weight: var(--weight-light);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-4);
}

/* Subtasks */
.db-cd-subtask-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.db-cd-subtask-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--border-1) solid var(--line-faint);
}

.db-cd-subtask-row:last-child {
  border-bottom: none;
}

.db-cd-subtask-link {
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-cd-subtask-link:hover {
  color: var(--accent-hover);
}

/* Comment compose */
.db-cd-compose {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.db-cd-compose-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-1);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  transition: border-color var(--dur-1) var(--ease-out);
}

.db-cd-compose-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--glow-focus);
}

.db-cd-compose-input::placeholder {
  color: var(--text-4);
}

/* Comment thread */
.db-cd-comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.db-cd-comment {
  display: flex;
  gap: var(--space-3);
}

.db-cd-comment-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: var(--border-1) solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  color: var(--accent);
  letter-spacing: 0;
}

.db-cd-comment-content {
  flex: 1;
  min-width: 0;
}

.db-cd-comment-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.db-cd-comment-author {
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--text-1);
}

.db-cd-comment-time {
  font-family: var(--font-mono);
  font-weight: var(--weight-light);
  font-size: var(--text-2xs);
  color: var(--text-4);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.db-cd-comment-body {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: var(--leading-relaxed);
  margin: 0;
  word-break: break-word;
}

/* Attachments */
.db-cd-attach-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.db-cd-attach-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border: var(--border-1) solid var(--line-faint);
  border-radius: var(--radius-2);
  transition: border-color var(--dur-1) var(--ease-out);
}

.db-cd-attach-row:hover {
  border-color: var(--border);
}

.db-cd-attach-icon {
  flex-shrink: 0;
  color: var(--text-3);
  font-style: normal;
}

.db-cd-attach-name {
  flex: 1;
  font-family: var(--font-mono);
  font-weight: var(--weight-light);
  font-size: var(--text-sm);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.db-cd-attach-size {
  font-size: var(--text-xs);
  color: var(--text-4);
  flex-shrink: 0;
}

/* Track positions */
.db-cd-positions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.db-cd-position-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.db-cd-pos-track {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-light);
  color: var(--text-3);
  letter-spacing: var(--tracking-mono);
  min-width: 80px;
}

.db-cd-pos-team {
  font-size: var(--text-xs);
  margin-left: auto;
}

/* Move forms */
.db-cd-moves {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.db-cd-move-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.db-cd-reason-input {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-1);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  transition: border-color var(--dur-1) var(--ease-out);
}

.db-cd-reason-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--glow-focus);
}

.db-cd-reason-input::placeholder {
  color: var(--text-4);
}

/* History timeline */
.db-cd-history {
  display: flex;
  flex-direction: column;
}

.db-cd-history-item {
  display: flex;
  gap: var(--space-3);
}

.db-cd-history-item--connected {
  padding-bottom: var(--space-4);
}

.db-cd-history-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 10px;
}

.db-cd-history-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-400);
  flex-shrink: 0;
  margin-top: 4px;
}

.db-cd-history-dot--accent {
  background: var(--accent);
  box-shadow: 0 0 8px var(--green-edge);
}

.db-cd-history-line {
  width: 1px;
  flex: 1;
  background: var(--line);
  margin-top: var(--space-1);
}

.db-cd-history-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 0;
}

.db-cd-history-transition {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-1);
  line-height: var(--leading-snug);
}

.db-cd-history-meta {
  font-family: var(--font-mono);
  font-weight: var(--weight-light);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  color: var(--text-4);
  margin-top: var(--space-1);
  text-transform: uppercase;
}

.db-cd-history-reason {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-style: italic;
  margin-top: var(--space-1);
}

/* Shared empty state */
.db-cd-empty-state {
  font-size: var(--text-sm);
  margin: 0;
}

/* Responsive: stack columns on narrow screens */
@media (max-width: 900px) {
  .db-cd-layout {
    grid-template-columns: 1fr;
  }
}

/* ─── Board (Kanban) ──────────────────────────────────────────────────────── */

/* Track tabs row — shown when a job type has more than one track */
.db-board-tracks {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-1) solid var(--line-faint);
  flex-wrap: wrap;
}

.db-board-track-tab {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-2);
  border: var(--border-1) solid var(--border);
  color: var(--text-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition:
    color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
  text-decoration: none;
}

.db-board-track-tab:hover {
  color: var(--text-1);
  background: var(--surface-hover);
  border-color: var(--border-strong);
  text-decoration: none;
}

.db-board-track-tab--active {
  color: var(--accent) !important;
  background: var(--surface-hover);
  border-color: var(--accent);
}

/* Board header row */
.db-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.db-board-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.db-board-track-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--accent);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

.db-board-lane-count,
.db-board-card-total {
  font-size: var(--text-xs);
}

/* Viewport: horizontal scroll container */
.db-board-viewport {
  /* The board overflows the main column. Pull it back to full width. */
  overflow-x: auto;
  padding-bottom: var(--space-6);
  /* Smooth momentum scroll on iOS. */
  -webkit-overflow-scrolling: touch;
}

.db-board-columns {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  min-width: max-content;
}

/* Lane column */
.db-board-col {
  width: 280px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Lane header */
.db-board-col-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-3);
  background: var(--surface-sunken);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-3) var(--radius-3) 0 0;
  border-bottom: none;
}

.db-board-col-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.db-board-state-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
  text-transform: capitalize;
}

.db-board-col-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--accent);
  background: rgba(61, 226, 123, 0.08);
  border: var(--border-1) solid var(--green-edge);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-2);
  line-height: 1.6;
  flex-shrink: 0;
}

.db-board-team-badge {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-light);
  color: var(--text-4);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}

/* Lane body — scrollable card stack */
.db-board-col-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-floor);
  border: var(--border-1) solid var(--border);
  border-top: var(--border-1) solid var(--green-edge);
  border-radius: 0 0 var(--radius-3) var(--radius-3);
  min-height: 120px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

/* Card tile (link element) */
.db-board-card {
  display: block;
  background: var(--surface);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-2);
  text-decoration: none;
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.db-board-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--green-edge), var(--shadow-1);
  transform: translateY(-1px);
  text-decoration: none;
}

.db-board-card-inner {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.db-board-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-1);
  line-height: var(--leading-snug);
  word-break: break-word;
}

/* Compact field rows inside the card tile */
.db-board-card-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.db-board-card-field {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-xs);
}

.db-board-card-field-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-light);
  color: var(--text-4);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 56px;
}

.db-board-card-field-value {
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card footer row: type badge + date */
.db-board-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-1);
  border-top: var(--border-1) solid var(--line-faint);
}

.db-board-card-date {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
}

/* Empty lane placeholder */
.db-board-col-empty {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  font-size: var(--text-xs);
}

/* Empty board state (no columns) */
.db-board-empty-state {
  padding: var(--space-9);
  text-align: center;
}

/* ─── Work-list table ─────────────────────────────────────────────────────── */

.db-wl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: 0 var(--space-1);
}

.db-wl-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
}

.db-wl-table-wrap {
  background: var(--surface);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-3);
  overflow: hidden;
  box-shadow: var(--shadow-1), var(--shadow-inset);
}

.db-wl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.db-wl-th {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-4);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: left;
  background: var(--bg-floor);
  border-bottom: var(--border-1) solid var(--border);
  white-space: nowrap;
}

.db-wl-th--date {
  text-align: right;
  width: 80px;
}

.db-wl-row {
  cursor: pointer;
  border-bottom: var(--border-1) solid var(--line-faint);
  transition: background var(--dur-1) var(--ease-out);
}

.db-wl-row:last-child {
  border-bottom: none;
}

.db-wl-row:hover {
  background: var(--surface-hover);
}

.db-wl-td {
  padding: var(--space-3) var(--space-4);
  color: var(--text-2);
  vertical-align: middle;
}

.db-wl-td--title {
  font-weight: var(--weight-medium);
  max-width: 320px;
}

.db-wl-title-link {
  color: var(--text-1);
  font-weight: var(--weight-medium);
}

.db-wl-title-link:hover {
  color: var(--accent);
}

/* The composed list title (Title Composition Engine, T4): ONE inline pill, the
   segments flowing through subtle dividers — same render discipline as the card
   detail hero, never a row of fat padded pills. The divider is muted so the eye
   reads the row title smoothly. */
.db-wl-title--composed .db-title-seg { font-weight: var(--weight-medium); }
.db-wl-title--composed .db-title-div {
  color: var(--text-4);
  font-weight: 400;
  white-space: pre;
}

.db-wl-td--date {
  text-align: right;
  font-size: var(--text-xs);
  color: var(--text-4);
  white-space: nowrap;
}

.db-wl-empty {
  text-align: center;
  padding: var(--space-9) var(--space-4);
  color: var(--text-4);
}

.db-wl-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) 0;
}

/* ─── Search page ─────────────────────────────────────────────────────────── */

.db-search-box-wrap {
  max-width: 680px;
  margin-bottom: var(--space-7);
}

.db-search-form {
  width: 100%;
}

.db-search-input-row {
  display: flex;
  gap: var(--space-3);
}

.db-search-input {
  flex: 1;
  height: 40px;
  padding: 0 var(--space-4);
  background: var(--surface);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-2);
  color: var(--text-1);
  font-family: var(--db-font-body);
  font-size: var(--text-sm);
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
  outline: none;
}

.db-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.db-search-input::placeholder {
  color: var(--text-4);
}

/* Results header: big live count (left) + quick-sort pills (right). */
.db-search-resulthead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.db-search-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-3);
}

.db-search-count {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  color: var(--text-1);
}

.db-search-query-echo {
  color: var(--accent);
}

.db-sortctl {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.db-sortctl-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}
.db-sortseg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface-sunken);
  border: var(--border-1) solid var(--line-faint);
  border-radius: var(--radius-pill);
}
.db-sortpill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--text-3);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.db-sortpill:hover { color: var(--text-1); }
.db-sortpill.is-active {
  background: var(--green-soft);
  color: var(--accent);
}
.db-sortpill-arrow { font-size: 0.7em; }

.db-search-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.db-search-result-row {
  display: block;
  background: var(--surface);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-2);
  text-decoration: none;
  transition:
    border-color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out);
}

.db-search-result-row:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.db-search-result-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.db-search-result-title {
  font-weight: var(--weight-medium);
  color: var(--text-1);
  font-size: var(--text-sm);
}

.db-search-result-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.db-search-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  max-width: 680px;
}

.db-search-empty,
.db-search-prompt {
  max-width: 680px;
  padding: var(--space-7) 0;
}

.db-search-hint {
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

/* ── Search view (D49/T3, T6 fidelity): header chrome + command bar ──────── */

/* Accessible-but-hidden submit (Enter still fires the Find door). */
.db-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Eyebrow row: live-index marker (left) + the firewall pills (right). */
.db-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.db-search-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.db-search-live { display: inline-flex; gap: 4px; }
.db-livedot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--green-edge);
}
.db-livedot:last-child { opacity: 0.4; }

.db-search-firewall { display: inline-flex; gap: var(--space-2); }
.db-ghostpill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  border: var(--border-1) solid var(--line-faint);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-3);
}

/* Title + subtitle, with the Find/Ask toggle pulled to the top-right. */
.db-search-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.db-search-introtext { min-width: 0; }
.db-search-introtext .db-face-title { margin-bottom: var(--space-2); }
.db-search-sub {
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Find / Ask segmented toggle — a sunken pill with the active door lit green.
   Both buttons submit the bar form (form="db-search-form") so a mode switch
   keeps the typed query. */
.db-seg {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 4px;
  background: var(--surface-sunken);
  border: var(--border-1) solid var(--line-faint);
  border-radius: var(--radius-pill);
}

.db-seg-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: var(--border-1) solid transparent;
  background: transparent;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.db-seg-ico { width: 13px; height: 13px; }

.db-seg-btn:hover { color: var(--text-1); }

.db-seg-btn.is-active {
  background: var(--green-soft);
  border-color: var(--green-edge);
  color: var(--accent);
}

.db-search-box-wrap { max-width: none; }

/* Search bar + Find/Ask toggle share one row (operator request): the toggle
   comes off the top and sits to the RIGHT of a now full-bleed, wider bar. */
.db-search-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.db-search-bar-row .db-search-form { flex: 1; min-width: 0; }
.db-search-bar-row .db-seg { flex-shrink: 0; }

/* The command bar itself: one rounded pill, magnifier inset, ⌘K hint. */
.db-cmdbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3) 0 var(--space-4);
  height: 56px;
  background: var(--surface);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.db-cmdbar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--green-soft);
}
.db-cmdbar-ico {
  width: 19px; height: 19px;
  color: var(--accent);
  flex: none;
}
.db-cmdbar .db-search-input {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  box-shadow: none;
}
.db-cmdbar .db-search-input:focus { box-shadow: none; }
.db-kbd {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-1);
  padding: 3px 7px;
  background: var(--bg-app);
}

.db-search-ask-stub {
  max-width: 920px;
  padding: var(--space-6) 0;
}

/* Ask door (D52/T5) — the agentic answer panel + cited-record cards. Built
   off the shared design tokens; the precise prototype fidelity pass is T6. */
.db-ask {
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.db-ask-answer {
  border: var(--border-1) solid var(--accent-edge, var(--border));
  border-radius: var(--radius-3);
  background: var(--surface);
  padding: var(--space-4) var(--space-5);
}

.db-ask-answer-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.db-ask-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, var(--text-2));
}

.db-ask-citecount {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}

.db-ask-answer-body {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-1);
}

.db-ask-cited-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
  padding-left: 2px;
}

.db-ask-citations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.db-ask-cite {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-2);
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: border-color 0.12s var(--ease-out, ease);
}

.db-ask-cite:hover {
  border-color: var(--line-strong, var(--text-3));
}

.db-ask-cite-type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.db-ask-cite-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-1);
  line-height: var(--leading-snug, 1.3);
}

.db-ask-cite-open {
  font-size: var(--text-sm);
  color: var(--text-3);
}

/* Results table — contained, technical, never an endless ClickUp grid. */
/* ── Result CARD stack (D49/T3) ──────────────────────────────────────────────
   The Find results as a vertical stack of cards (the prototype), not a table.
   One card per record; clusters (status / meta / people / tags) are placed by
   the field TYPE the server stamped on each cell — generic, no client field
   names (D20/D21). Tokens are the shared DrawBridge design system. */

.db-card-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-5);
}

.db-card-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.db-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px;
  border-radius: var(--radius-3);
  background: var(--surface);
  border: var(--border-1) solid var(--line);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}

.db-card:hover { border-color: var(--line-strong); background: var(--surface-hover); }

.db-card--parent { background: var(--surface-sunken); }
.db-card--child {
  background: rgba(8, 12, 9, 0.55);
  margin-left: 22px;
}

.db-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.db-card-idline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}

.db-card-id {
  font-family: var(--font-dotted);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--text-3);
  white-space: nowrap;
}

.db-card-typebadge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--ink-700);
  border: var(--border-1) solid var(--line);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  white-space: nowrap;
}

.db-card-fleetbadge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-500);
  background: var(--green-soft);
  border: var(--border-1) solid var(--green-edge);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  white-space: nowrap;
}

.db-card-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--green-500);
  flex: none;
}
.db-card-chev { width: 15px; height: 15px; }

.db-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: var(--border-1) solid var(--line);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

.db-card-statusdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--green-500);
}

.db-card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-1);
  line-height: var(--leading-snug);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-card-title:hover { color: var(--accent); }

.db-card--child .db-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-2);
}
.db-card--parent .db-card-title { font-weight: var(--weight-black); }

.db-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.db-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--ink-700);
  border: var(--border-1) solid var(--line);
  white-space: nowrap;
}

.db-card-pill-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}

.db-card-pill-v {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}
.db-card-pill-v.is-strong { font-weight: var(--weight-medium); color: var(--text-1); }

.db-card-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink-700);
  border: var(--border-1) solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px 11px 2px 2px;
  white-space: nowrap;
}

.db-card-avatar {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--green-soft);
  border: var(--border-1) solid var(--green-edge);
  color: var(--green-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 9px;
}

.db-card-person-name { font-size: 11px; color: var(--text-2); }

.db-card-secondary {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 2px;
  padding-top: 10px;
  border-top: var(--border-1) solid var(--line-faint);
}

.db-card-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-300);
  background: var(--green-soft);
  border: var(--border-1) solid var(--green-edge);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
}

/* ── Layered filters: rail + chips + autocomplete (D49/T4) ────────────────── */

/* The command-bar input wrapper anchors the autocomplete popover. */
.db-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
}
.db-search-input-wrap .db-search-input { width: 100%; }

.db-ac {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--surface);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  max-height: 320px;
  overflow-y: auto;
}

.db-ac-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-1);
  cursor: pointer;
}
.db-ac-item.is-active { background: var(--surface-hover); }
.db-ac-label { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-1); }
.db-ac-hint { font-size: var(--text-xs); color: var(--text-4); }

/* Active-filter chips, under the bar. The one filter state, made removable. */
.db-chiprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.db-chiprow-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-right: 2px;
}

.db-fchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--text-1);
  background: var(--surface-2, var(--surface));
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-2);
  padding: 2px var(--space-2) 2px var(--space-3);
}
.db-fchip-label { text-transform: none; }
.db-fchip-x {
  text-decoration: none;
  color: var(--text-3);
  font-size: var(--text-md, 1rem);
  line-height: 1;
}
.db-fchip-x:hover { color: var(--accent); }
.db-fchip-clear {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-decoration: none;
  margin-left: var(--space-1);
}
.db-fchip-clear:hover { color: var(--accent); }

/* The Find layout: a facet rail beside the results. */
.db-search-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
}
.db-search-results { min-width: 0; }

.db-facet-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.db-facet-rail-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-1) solid var(--line-faint);
}

.db-facet-head {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--space-2);
}

.db-facet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }

.db-facet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-1);
  text-decoration: none;
  color: var(--text-2);
  font-size: var(--text-sm);
  border: var(--border-1) solid transparent;
}
.db-facet:hover { background: var(--surface-hover); color: var(--text-1); }
.db-facet.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.db-facet-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-facet-count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-4);
}
.db-facet.is-active .db-facet-count { color: var(--accent); }

@media (max-width: 720px) {
  .db-search-layout { grid-template-columns: 1fr; }
  .db-facet-rail { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
}

/* ── Design Station ─────────────────────────────────────────────────────────
   A team's daily WORKING surface. New surface, new classes only — the lane
   scaffold reuses the board's .db-board-* structure; these add the station's
   own pieces (picker, load header, dense mini-cards, one-tap assign). No
   existing surface is restyled. */

.db-station-picker { display: flex; align-items: center; gap: var(--space-2); }
.db-station-picker-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }

.db-station-select {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-1);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--space-1) var(--space-2);
}
.db-station-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow-focus); }

.db-station-body { display: flex; flex-direction: column; gap: var(--space-4); }

.db-station-loads {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2); padding: var(--space-2) 0;
}
.db-station-loads-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; margin-right: var(--space-2); }
.db-station-load {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-2); text-decoration: none;
  font-size: var(--text-sm);
}
.db-station-load:hover { background: var(--surface-hover); }
.db-station-load--active { border-color: var(--accent); color: var(--text-1); }
.db-station-load-count {
  min-width: 1.4em; text-align: center;
  background: var(--surface-sunken); border-radius: var(--radius-pill);
  padding: 0 var(--space-2); font-variant-numeric: tabular-nums;
}

.db-station-hint { padding: var(--space-3) 0; font-size: var(--text-sm); }

/* The lane KINDs get a subtle left edge so pool + follow-ups read as special. */
.db-station-lane--pool .db-board-col-header { border-top: 2px solid var(--accent); }
.db-station-lane--follow_ups .db-board-col-header { border-top: 2px solid var(--caution); }

/* Dense mini-card: many on screen, sleek, tool slots ready. */
.db-station-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  margin-bottom: var(--space-2);
}
.db-station-card--alliance { border-left: 3px solid var(--info); }
.db-station-card-main { display: block; text-decoration: none; color: inherit; }
.db-station-card-main:hover .db-station-card-title { color: var(--accent); }
.db-station-card-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--text-1);
  line-height: var(--leading-snug);
}
.db-station-card-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-1); font-size: var(--text-xs);
}
.db-station-chip {
  padding: 1px var(--space-2); border-radius: var(--radius-pill);
  background: var(--info-soft); color: var(--info);
  font-size: var(--text-2xs); white-space: nowrap;
}
.db-station-rev { color: var(--text-2); font-variant-numeric: tabular-nums; }
.db-station-type { font-size: var(--text-2xs); }
.db-station-age { font-variant-numeric: tabular-nums; }

.db-station-assign { display: flex; align-items: center; gap: var(--space-2); }
.db-station-assign-select { flex: 1 1 auto; }
.db-station-assign-btn { flex: 0 0 auto; }