/* ==========================================================================
   SUBMITTALS BOARD — "ball in court"
   ==========================================================================
   Everything is scoped under body.view-submittals-board so it can't bleed into
   the table view, which shares the .sub-* namespace. Tone colours reuse the
   same tokens submittals.css maps statusTone onto, so a card and its table cell
   are the same colour for the same reason.
   ========================================================================== */

body.view-submittals-board #submittalsBoardView { display: block; }

/* Single-scroll model, copied from board.css and load-bearing for the same
   reason: an overflow-x:auto ANCESTOR becomes the containing block for the
   sticky column heads and they scroll away with the cards. The page owns
   horizontal overflow instead. */
@media (min-width: 901px) {
  body.view-submittals-board { overflow-x: auto; }
}

.sbb-root {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-6) var(--space-8);
}

.sbb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.sbb-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.sbb-error { padding: var(--space-6); color: var(--ink-mute); }

/* ---- Columns ---------------------------------------------------------- */
.sbb-cols {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;     /* load-bearing: makes every column as tall as the
                               tallest so a short column's sticky head stays
                               pinned for the full scroll depth */
  overflow: visible;        /* see the single-scroll note above */
  min-width: min-content;
}
.sbb-col {
  flex: 0 0 268px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sbb-col.is-rail { flex: 0 0 56px; }

.sbb-col-head {
  position: sticky;
  top: var(--topbar-h, 56px);
  z-index: 5;
  background: var(--bg);
  padding: 6px 0 8px;
  border-bottom: 2px solid currentColor;
  margin-bottom: var(--space-3);
}
/* Hue only — the head borrows the tone's colour for its 2px underline and
   nothing else, so the columns read as a set rather than five filled blocks. */
.sbb-col-head.tone-idle { color: var(--neutral); }
.sbb-col-head.tone-na   { color: var(--ink-mute); }
.sbb-col-head.tone-work { color: var(--warn); }
.sbb-col-head.tone-sent { color: var(--info); }
.sbb-col-head.tone-done { color: var(--success); }

.sbb-col-collapse {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
.sbb-col-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sbb-col-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sbb-col-n {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  margin-left: auto;
}
.sbb-col-hint {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--ink-mute);
}
.sbb-col-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.sbb-col-empty {
  margin: 0;
  padding: 14px 10px;
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
  text-align: center;
}

/* Rail: a collapsed column. Vertical label so the count stays readable. */
.sbb-rail {
  position: sticky;
  top: var(--topbar-h, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 4px 16px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink-mute);
  font: inherit;
}
.sbb-rail:hover { color: var(--ink); border-color: var(--ink-mute); }
.sbb-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sbb-rail-n {
  font-family: var(--font-display);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.sbb-rail-label {
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Cards ------------------------------------------------------------ */
.sbb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-sm, 8px);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.sbb-card:hover { border-color: var(--ink-mute); }
.sbb-card[open] { box-shadow: 0 2px 12px rgba(20,32,26,.07); }
.sbb-card.is-saving { border-color: var(--accent); }
/* Severity paints the left edge — same language as Home's attention rows. */
.sbb-card.sev-warn   { border-left-color: var(--warn); }
.sbb-card.sev-danger { border-left-color: var(--danger); }

.sbb-card-face {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.sbb-card-face::-webkit-details-marker { display: none; }
.sbb-card-top { display: flex; align-items: baseline; gap: 8px; }
.sbb-card-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
}
.sbb-card-status { font-size: 12px; color: var(--ink-soft); }
.sbb-card-meta { font-size: 11px; color: var(--ink-mute); display: flex; gap: 5px; flex-wrap: wrap; }
.sbb-chain {
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 10px;
}
.sbb-dot { opacity: .6; }

/* The age chip is the reason this board exists — give it weight. */
.sbb-age {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.sbb-age.sev-ok     { background: var(--neutral-soft); color: var(--ink-mute); }
.sbb-age.sev-warn   { background: var(--warn-soft);    color: var(--warn);    border-color: var(--warn-bd); }
.sbb-age.sev-danger { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-bd); }
/* No number available — never dressed up as one. */
.sbb-age.is-muted {
  background: none;
  color: var(--ink-mute);
  font-weight: 400;
  font-size: 10.5px;
  padding: 0;
}

.sbb-card-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 10px;
}
.sbb-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--surface-alt);
  border-radius: 6px;
  padding: 7px 9px;
}
.sbb-locked { margin: 0; font-size: 12px; color: var(--ink-mute); font-style: italic; }

.sbb-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.sbb-target {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.sbb-target:hover { background: var(--accent); color: #fff; }
.sbb-target:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sbb-picker { display: flex; flex-wrap: wrap; gap: 5px; }
.sbb-picker.is-narrowed {
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 8px;
  background: var(--accent-soft);
}
.sbb-picker-hint {
  flex-basis: 100%;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
}
.sbb-opt {
  font: inherit;
  font-size: 11.5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 6px;
  cursor: pointer;
}
.sbb-opt:hover { border-color: var(--ink-mute); color: var(--ink); }
.sbb-opt.is-current {
  border-color: var(--ink-mute);
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 600;
}
.sbb-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sbb-open-project {
  align-self: flex-start;
  font: inherit;
  font-size: 11.5px;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* Chain groups inside the Not-started column — 70 loose cards is not a list. */
.sbb-group { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.sbb-group > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  list-style: none;
}
.sbb-group > summary::-webkit-details-marker { display: none; }
.sbb-group-n { font-variant-numeric: tabular-nums; color: var(--ink-mute); font-weight: 400; }
.sbb-group-body { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }

/* ---- Toast ------------------------------------------------------------ */
.sbb-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  z-index: 300;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.sbb-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Mobile ------------------------------------------------------------
   Deliberately NOT board.css's one-column-at-a-time model. The live set is a
   handful of cards, so a single vertical run of the expanded columns with
   sticky sub-heads beats a column carousel — simpler and quicker to read. */
@media (max-width: 900px) {
  .sbb-root { padding: var(--space-5) var(--space-4) var(--space-7); }
  .sbb-cols { display: block; min-width: 0; }
  .sbb-col { flex: none; width: 100%; margin-bottom: var(--space-5); }
  .sbb-col.is-rail { flex: none; width: 100%; margin-bottom: var(--space-3); }
  .sbb-rail {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 14px;
    min-height: 44px;
  }
  .sbb-rail-label { writing-mode: horizontal-tb; }
  .sbb-col-head { position: sticky; top: var(--topbar-h, 56px); }
  /* Touch targets */
  .sbb-target, .sbb-opt { min-height: 36px; display: inline-flex; align-items: center; }
  .sbb-card-face { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sbb-card, .sbb-toast { transition: none; }
}