/* Pipeline board (#/board). Scoped under body.view-board so it never bleeds
   into another view, and built on the canonical styles.css tokens — the --v3-*
   set only resolves under body.v3-projects, which is the trap called out in
   styles.css above the drawer rules. */

body.view-board .bd-root {
  padding: var(--space-5) var(--space-6) var(--space-8);
}

/* ---- column strip ---- */
body.view-board .bd-cols {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  /* Scoped scroll: the root clips overflow-x, so an unscoped wide child would
     be cut off rather than scrollable. */
  overflow-x: auto;
  padding-bottom: var(--space-3);
}
body.view-board .bd-col {
  flex: 0 0 232px;
  min-width: 0;
}
body.view-board .bd-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 2px var(--space-2);
  /* .st-* is borrowed purely for its per-stage hue (the .v3-status scale reuses
     blue twice, which would make two adjacent columns identical). Those classes
     also paint a background and a border, so both are cancelled here: the hue
     belongs in the 2px rule alone, or eight columns read as eight colored
     blocks and the badges lose their monopoly on colour. */
  background: none;
  border: 0;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
}
body.view-board .bd-col-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
}
body.view-board .bd-col-count {
  font-size: 12px; color: var(--ink-mute); font-variant-numeric: tabular-nums;
}
body.view-board .bd-col-body {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-2);
  min-height: 72px;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}
body.view-board .bd-col-body.is-over {
  background: var(--accent-soft);
  outline: 1px dashed var(--accent);
  outline-offset: 2px;
}
body.view-board .bd-col-empty {
  margin: 0; padding: var(--space-4) var(--space-3);
  font-size: 12.5px; color: var(--ink-mute); text-align: center;
}

/* ---- cards ---- */
body.view-board .bd-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
  padding: 10px 12px;
  cursor: pointer;
  touch-action: none;              /* pointer drag owns the gesture */
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
body.view-board .bd-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
body.view-board .bd-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Same "this needs you" language as the Home attention rows: a colored left
   border, severity-ranked. */
body.view-board .bd-card.sev-danger { border-left-color: var(--danger); }
body.view-board .bd-card.sev-warn   { border-left-color: var(--warn); }
body.view-board .bd-card.sev-info   { border-left-color: var(--info); }

body.view-board .bd-card-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
body.view-board .bd-card-sub  { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }
body.view-board .bd-card-meta { margin: 6px 0 0; font-size: 12px; color: var(--ink-mute); }
body.view-board .bd-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-2); }
body.view-board .bd-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent;
  /* Wraps rather than nowrap: these strings are full sentences from the
     attention rules ("Concept sent · awaiting client · 20d stalled") and
     nowrap pushed them straight out of the card. */
  white-space: normal; line-height: 1.35; max-width: 100%;
}
body.view-board .bd-badge.sev-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-bd); }
body.view-board .bd-badge.sev-warn   { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-bd); }
body.view-board .bd-badge.sev-info   { background: var(--info-soft);   color: var(--info);   border-color: var(--info-bd); }

/* Browser-only project: no server row, so its stage can't be stored. Say so
   rather than offering a drag that silently does nothing. */
body.view-board .bd-card.is-locked { cursor: default; background: var(--surface-alt); }
body.view-board .bd-card-locked { margin: 6px 0 0; font-size: 11px; color: var(--warn); }

/* ---- drag ---- */
/* The gap the other cards open up for. A real element in the flow, so the cards
   around it shift naturally and the space you see is the slot you'll land in. */
body.view-board .bd-placeholder {
  height: 58px;
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-md);
  flex: none;
}
/* Cards ease into their new position instead of teleporting, which is what
   makes the board feel like things are being moved rather than redrawn. */
body.view-board .bd-col-body .bd-card { transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
@media (prefers-reduced-motion: reduce) {
  body.view-board .bd-col-body .bd-card { transition: none; }
}
body.view-board .bd-card.is-dragging { opacity: .35; }
body.view-board .bd-card.is-saving { border-color: var(--accent); }
.bd-ghost {
  position: fixed; z-index: 200; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-1.5deg);
  box-shadow: var(--shadow-md);
  opacity: .95;
}

/* ---- chip strip: the stage switcher, mobile only ---- */
body.view-board .bd-chipstrip { display: none; }
body.view-board .bd-chip {
  flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px;
  font: 500 12.5px/1.2 var(--font-sans); color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
}
body.view-board .bd-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
body.view-board .bd-chip-n { opacity: .7; font-variant-numeric: tabular-nums; }

/* ---- mobile: one column at a time ----
   The codebase has twice rejected horizontal scroll on phones in favour of
   stacking (the v3 rows, the billing table), and 900 is its canonical nav
   breakpoint — below it the fixed tab bar owns the bottom 56px. */
@media (max-width: 900px) {
  body.view-board .bd-root { padding: var(--space-4) var(--space-4) calc(56px + var(--space-6) + env(safe-area-inset-bottom)); }
  body.view-board .bd-chipstrip {
    display: flex; gap: var(--space-2);
    overflow-x: auto; padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
  }
  body.view-board .bd-cols { display: block; overflow-x: visible; }
  body.view-board .bd-col { display: none; }
  body.view-board .bd-cols[data-active-col="lead"]     .bd-col[data-col="lead"],
  body.view-board .bd-cols[data-active-col="cd"]       .bd-col[data-col="cd"],
  body.view-board .bd-cols[data-active-col="cdoc"]     .bd-col[data-col="cdoc"],
  body.view-board .bd-cols[data-active-col="pc"]       .bd-col[data-col="pc"],
  body.view-board .bd-cols[data-active-col="constr"]   .bd-col[data-col="constr"],
  body.view-board .bd-cols[data-active-col="done"]     .bd-col[data-col="done"],
  body.view-board .bd-cols[data-active-col="pause"]    .bd-col[data-col="pause"],
  body.view-board .bd-cols[data-active-col="archived"] .bd-col[data-col="archived"] { display: block; }
  body.view-board .bd-col { flex: 1 1 auto; width: 100%; }
  body.view-board .bd-col-head { display: none; }   /* the active chip names it */
}

@media (pointer: coarse) {
  body.view-board .bd-card { padding: 12px 14px; }
  body.view-board .bd-chip { padding: 8px 14px; }
}