/* The Drawer. back-room-launch-board.css
 * The multi-board Kanban module: the header's
 * board switcher, priority stats, filter bar, and the board itself. Cards
 * and columns are new shapes this Back Room has not needed before;
 * everything else (tags, buttons, inputs, the empty state) reads the
 * shared br-/bench- classes already defined in back-room.css and
 * bench.css. One breakpoint, 900px, matching every other Back Room
 * module; the board itself scrolls horizontally at every width rather
 * than stacking, so a narrow viewport never widens the page body.
 */

.shlb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

/* The header's controls become a cluster once a board is one of
   several: the switcher, New board, and Edit board sitting together on
   the right of the title. Nothing here is a new control, the select
   reads .bench-select and both buttons read .bench-btn-plain, the same
   class Edit board already carried alone. */
.shlb-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* .bench-select is width: 100% for a form field in the editor panel.
   In the header it sits inline next to two buttons, so it takes its
   width from its content with a floor wide enough for a real board
   title and a ceiling short of crowding the buttons. Padding is trimmed
   to sit at the buttons' height rather than a form field's. */
.shlb-board-switch {
  width: auto;
  min-width: 190px;
  max-width: 260px;
  font-size: var(--t-small);
  padding-top: 8px;
  padding-bottom: 8px;
}

.shlb-head-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 4px;
}

.shlb-head-sub {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
}

.shlb-blockers {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0 0 var(--s3);
  line-height: 1.5;
}

.shlb-blockers strong { color: var(--ink); font-weight: 500; }

/* ── Priority stats ───────────────────────────────────────────────────────── */
/* A live count of outstanding Build work: one number per priority level,
   with Shipped and Concept cards excluded. Panel weight (background,
   border, radius) matches the rest of the header. */

.shlb-priority-stats {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: var(--s3);
  background: var(--panel);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg);
}

.shlb-priority-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.shlb-priority-stat-count {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */

.shlb-filterbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--s3);
}

.shlb-chip {
  font: inherit;
  font-size: var(--t-micro);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.shlb-chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 500; }

.shlb-search { flex: 1; min-width: 160px; max-width: 280px; }

/* Kind (build/concept) is a different axis than category, so it
   needs to look like a different kind of control, not a third chip in
   the category row: a bordered segmented pair instead of loose pills.
   Concept-on borrows the same dashed language the card's own concept
   tag uses, so the filter and the tag read as the same fact asked two
   ways. Off is dimmed rather than coloured, so an excluded kind never
   reads with the urgency a filled priority tone would carry. */
.shlb-kind-filter {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--panel);
}

.shlb-kind-btn {
  font: inherit;
  font-size: var(--t-micro);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid transparent;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.5;
}

.shlb-kind-btn.is-on { opacity: 1; color: var(--ink); }
.shlb-kind-btn--build.is-on { background: var(--ground-sunk); }
.shlb-kind-btn--concept.is-on { border-color: var(--line-strong); border-style: dashed; }

/* ── Board and columns ───────────────────────────────────────────────────── */

.shlb-board {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--s2);
  -webkit-overflow-scrolling: touch;
}

.shlb-col {
  background: var(--ground-sunk);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s2);
  flex: 1 0 275px;
  min-width: 275px;
  max-width: 380px;
  min-height: 120px;
}

.shlb-col.is-drag-over { background: var(--accent-soft); border-color: var(--accent); }

.shlb-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--ink-soft);
  padding: 0 4px;
  margin-bottom: var(--s2);
}

.shlb-col-head.is-clickable { cursor: pointer; user-select: none; }
.shlb-col-count { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.shlb-col-collapsed-hint { font-size: var(--t-small); color: var(--ink-faint); padding: 4px; }

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

.shlb-card {
  background: var(--panel);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 11px 12px;
  margin-bottom: var(--s2);
  cursor: grab;
  touch-action: none;
}

.shlb-card.is-dragging { opacity: 0.35; }

.shlb-card-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
  cursor: grabbing;
  opacity: 0.95;
  box-shadow: var(--shadow-lift);
  transform: rotate(-1deg);
}

.shlb-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

.shlb-card-key {
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: var(--radius);
  background: var(--ground-sunk);
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}

/* Concept marks a card as a decision, shape, or precondition rather than
   something buildable today. An outline rather than a filled
   bench-tag--faint tone, so it does not read as low priority. Reads
   correctly in both skins off the same tokens as the rest of this file. */
.shlb-tag-concept {
  background: transparent;
  border: var(--border-w) dashed var(--line-strong);
  color: var(--ink-faint);
}

/* p0 means fundamental, do not launch, and is assigned by hand only.
   Every soft bench-tag tone is a tinted fill with toned text; this is the
   one badge that inverts, full stop-colour fill with panel-colour text,
   so it cannot be mistaken for p1's soft stop tone. Both colours are
   per-skin tokens, so the contrast holds in every skin. p1 through p3
   need no rules here; they read the existing soft tones (stop, warn,
   faint). */
.shlb-tag-p0 {
  background: var(--stop);
  color: var(--panel);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* The one-line legend for the four levels, sitting quietly
   between the filter bar and the columns: caption-sized, faint, no box,
   the same register as the collapsed-column hint. */
.shlb-legend {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  margin: 0 0 10px;
}

.shlb-card-title { font-size: var(--t-small); font-weight: 500; color: var(--ink); margin-bottom: 2px; }

.shlb-card-detail { display: none; margin-top: 6px; }
.shlb-card.is-open .shlb-card-detail { display: block; }

.shlb-card-detail-text { font-size: var(--t-small); color: var(--ink-soft); margin: 0 0 4px; line-height: 1.5; }
.shlb-card-ref { font-size: var(--t-micro); color: var(--accent); margin: 0; }

.shlb-card-expand {
  font: inherit;
  font-size: var(--t-micro);
  color: var(--accent);
  background: none;
  border: 0;
  padding: 4px 0 0;
  cursor: pointer;
  letter-spacing: 0.03em;
}

.shlb-card-expand:hover { color: var(--ink); }

.shlb-add-card {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--ink-faint);
  font: inherit;
  font-size: var(--t-small);
  padding: 6px 4px;
  cursor: pointer;
}

.shlb-add-card:hover { color: var(--accent); }

@media (max-width: 900px) {
  .shlb-head { flex-direction: column; }
  .shlb-head-actions { width: 100%; }
  .shlb-board-switch { flex: 1 1 auto; max-width: none; }
  .shlb-col { flex: 0 0 260px; min-width: 260px; }
}