/* ============================================================================
   Project Board — layout only.

   Everything visual comes from site.css ("Mainframe Terminal"): tokens,
   .panel, .title-plate, .card, .form-card, .field, .btn. This file adds the
   layout the base has no reason to carry — a row of columns that scrolls
   sideways, drag states, the edit dialog — using tokens only, so a site
   redesign carries this page with it.
   ========================================================================== */

/* ── gate ──────────────────────────────────────────────────────────────── */
.kb-gate { max-width: 520px; margin: 0 auto; }
.kb-gate-card .form-actions { margin-top: var(--sp-5); }

/* ── toolbar ───────────────────────────────────────────────────────────── */
.kb-toolbar {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 2fr) auto auto auto;
  gap: var(--sp-4);
  align-items: end;
  padding: var(--sp-5);
  background: var(--surface-container);
  border: var(--border-panel) solid var(--outline);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-5);
}
.kb-toolbar-actions {
  display: flex; align-items: center; gap: var(--sp-3);
  justify-self: end;
}
.kb-toolbar .uc-count { margin: 0 var(--sp-2) 0 0; white-space: nowrap; }
.kb-check {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: var(--data-display);
  text-transform: none; letter-spacing: 0;
}
.kb-check::before { display: none; }
.kb-check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--secondary); }

/* ── board ─────────────────────────────────────────────────────────────── */
.kb-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(216px, 1fr);
  gap: var(--sp-4);
  overflow-x: auto;
  padding-bottom: var(--sp-4);
  align-items: start;
  scroll-snap-type: x proximity;
}
.kb-col {
  padding: 0;
  display: flex; flex-direction: column;
  min-height: 240px;
  scroll-snap-align: start;
}
.kb-col .title-plate { border-left-width: var(--border-panel); padding: var(--sp-3) var(--sp-4); }
.kb-col .title-plate h3 { font-size: var(--data-display); text-transform: uppercase; letter-spacing: .1em; }
.kb-col.is-over { outline: 3px dashed var(--secondary); outline-offset: -3px; }

.kb-cards {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  flex: 1;
  min-height: 120px;
  background: var(--surface-container-low);
}
.kb-empty {
  font-family: var(--font-typewriter);
  font-size: var(--data-display);
  color: var(--on-surface-variant);
  text-align: center;
  padding: var(--sp-6) var(--sp-3);
  border: var(--border-hair) dashed var(--outline-variant);
}

/* ── card ──────────────────────────────────────────────────────────────── */
.kb-card {
  --chip: var(--primary);
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
  cursor: grab;
  border-left: 6px solid var(--chip);
  display: flex; flex-direction: column; gap: var(--sp-2);
  user-select: none;
}
.kb-card:active { cursor: grabbing; }
.kb-card.is-dragging { opacity: .45; }
.kb-card.is-drop-before { box-shadow: 0 -3px 0 0 var(--secondary); }
.kb-card.is-archived { opacity: .6; border-left-style: dashed; }
.kb-card .kb-chip {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--label-caps);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-primary);
  background: var(--chip);
  padding: 2px var(--sp-2);
}
.kb-card h4 {
  font-family: var(--font-body);
  font-size: var(--body-md);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--on-surface);
}
.kb-card .kb-notes {
  font-family: var(--font-typewriter);
  font-size: var(--data-display);
  color: var(--on-surface-variant);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kb-meta {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--label-caps);
  letter-spacing: .06em;
  color: var(--on-surface-variant);
  margin-top: var(--sp-1);
}
.kb-meta .op-code { margin: 0; padding: 1px var(--sp-2); }
.kb-meta .op-code.is-high { background: var(--error); }
.kb-meta .op-code.is-low { background: var(--outline); }
.kb-meta .kb-due { display: inline-flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
.kb-meta .kb-due.is-overdue { color: var(--on-error-container); font-weight: 700; }
.kb-meta .kb-due.is-soon { color: var(--secondary); font-weight: 700; }
.kb-meta .kb-id { margin-left: auto; opacity: .7; }

/* ── below the board ───────────────────────────────────────────────────── */
.kb-below {
  display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.kb-below .panel { padding: 0; }
.kb-below .title-plate { border-left-width: var(--border-panel); padding: var(--sp-3) var(--sp-4); }
.kb-below .title-plate h3 { font-size: var(--data-display); text-transform: uppercase; letter-spacing: .1em; }
.kb-activity, .kb-projects {
  list-style: none; margin: 0; padding: var(--sp-2) 0;
  max-height: 320px; overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--data-display);
}
.kb-activity li, .kb-projects li {
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--outline-variant);
}
.kb-activity li:last-child, .kb-projects li:last-child { border-bottom: 0; }
.kb-activity time { color: var(--on-surface-variant); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kb-activity .kb-who { font-weight: 700; color: var(--secondary); min-width: 5ch; }
.kb-activity .kb-who.is-page { color: var(--primary); }
.kb-projects .kb-swatch { width: 12px; height: 12px; flex: none; background: var(--chip, var(--primary)); align-self: center; }
.kb-projects .kb-pcount { margin-left: auto; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.kb-projects .kb-pstatus { color: var(--on-surface-variant); font-size: var(--label-caps); letter-spacing: .08em; text-transform: uppercase; }
.kb-foot { margin-top: var(--sp-5); }
.kb-foot .uc-linkbtn { margin-left: var(--sp-3); }

/* ── modal ─────────────────────────────────────────────────────────────── */
.kb-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 30, 46, .72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  overflow-y: auto;
}
.kb-modal-card { width: 100%; max-width: 680px; }
.kb-modal-title {
  font-family: var(--font-mono);
  font-size: var(--headline-sm);
  margin: 0 0 var(--sp-5);
  color: var(--primary);
}
.kb-modal-actions { display: flex; align-items: center; gap: var(--sp-3); }
.kb-spacer { flex: 1; }
.kb-modal-meta { margin-top: var(--sp-3); }

/* ── narrow ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .kb-toolbar { grid-template-columns: 1fr 1fr; }
  .kb-toolbar-view { grid-column: 1 / -1; }
  .kb-toolbar-actions { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; flex-wrap: wrap; }
  .kb-toolbar-actions .uc-count { flex-basis: 100%; }
  .kb-below { grid-template-columns: 1fr; }
  .kb-board { grid-auto-columns: minmax(82vw, 1fr); scroll-snap-type: x mandatory; }
}

/* ── links & attachments ───────────────────────────────────────────────── */
.kb-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.kb-link, .kb-file {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--label-caps);
  letter-spacing: .04em;
  padding: 2px var(--sp-2);
  border: var(--border-hair) solid var(--outline-variant);
  background: var(--surface-container-lowest);
  color: var(--secondary);
  text-decoration: none;
  max-width: 100%;
  cursor: pointer;
  line-height: 1.5;
}
.kb-link:hover, .kb-file:hover { border-color: var(--secondary); color: var(--primary); }
.kb-link span, .kb-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-file { font: inherit; font-family: var(--font-mono); font-size: var(--label-caps); }
.kb-files {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--data-display);
}
.kb-files li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container-lowest);
  border: var(--border-hair) solid var(--outline-variant);
}
.kb-files li .kb-fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-files li .kb-fsize { color: var(--on-surface-variant); white-space: nowrap; }
.kb-files li .uc-linkbtn { flex: none; }
.kb-files:empty { display: none; }
.kb-attach-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.kb-attach-hint { margin: 0; }
.kb-card .kb-progress { font-family: var(--font-mono); font-size: var(--label-caps); color: var(--secondary); }

/* ── view toggle ───────────────────────────────────────────────────────── */
.kb-seg { display: inline-flex; }
.kb-seg .btn { min-height: 48px; padding-inline: var(--sp-4); }
.kb-seg .btn + .btn { margin-left: -2px; }
.kb-seg .btn.is-on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: none; transform: none; }

/* ── swim lanes ────────────────────────────────────────────────────────── */
.kb-lanes {
  --cols: 5;
  display: grid;
  grid-template-columns: 168px repeat(var(--cols), minmax(200px, 1fr));
  gap: 0;
  overflow-x: auto;
  border: var(--border-panel) solid var(--outline);
  background: var(--surface-container-lowest);
  box-shadow: var(--shadow-sm);
}
.kb-lane-corner, .kb-lane-colhead {
  position: sticky; top: 0; z-index: 6;
  background: var(--inverse-surface); color: var(--inverse-on-surface);
  font-family: var(--font-mono); font-size: var(--label-caps);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: var(--sp-3) var(--sp-4);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
}
.kb-lane-corner { border-left: var(--border-panel) solid var(--error); left: 0; z-index: 7; }
.kb-lane-colhead .plate-meta { color: var(--secondary-fixed); }
.kb-lane-label {
  --chip: var(--primary);
  position: sticky; left: 0; z-index: 5;
  background: var(--surface-container);
  border-top: var(--border-hair) solid var(--outline);
  border-left: 6px solid var(--chip);
  padding: var(--sp-3) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
  font-family: var(--font-mono); font-size: var(--data-display); font-weight: 700;
  color: var(--on-surface);
}
.kb-lane-label small { font-weight: 400; color: var(--on-surface-variant); letter-spacing: .06em; text-transform: uppercase; font-size: var(--label-caps); }
.kb-cell {
  border-top: var(--border-hair) solid var(--outline);
  border-left: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
  min-height: 96px;
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.kb-cell.is-over { outline: 3px dashed var(--secondary); outline-offset: -3px; }
.kb-cell .kb-card { padding: var(--sp-2) var(--sp-3); }
.kb-cell .kb-card .kb-chip { display: none; }
.kb-cell .kb-card h4 { font-size: var(--data-display); }
.kb-lanes-empty { grid-column: 1 / -1; padding: var(--sp-6); text-align: center; font-family: var(--font-typewriter); color: var(--on-surface-variant); }
@media (max-width: 900px) {
  .kb-lanes { grid-template-columns: 120px repeat(var(--cols), minmax(70vw, 1fr)); }
}

.kb-board.is-lanes { display: block; overflow: visible; }

/* ── project editor ────────────────────────────────────────────────────── */
.kb-plate-btn { color: var(--secondary-fixed); margin-left: var(--sp-3); }
.kb-projects li { cursor: pointer; }
.kb-projects li:hover { background: var(--surface-container-low); }
.kb-projects li.is-archived { opacity: .55; }
.kb-projects li.is-archived .kb-swatch { opacity: .5; }
.kb-color-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.kb-color-row input[type="color"] { width: 64px; min-height: 48px; padding: 4px; cursor: pointer; }
.kb-swatches { display: inline-flex; gap: var(--sp-2); }
.kb-swatches button { width: 24px; height: 24px; border: 2px solid var(--outline-variant); cursor: pointer; padding: 0; }
.kb-swatches button:hover { border-color: var(--primary); }

/* ── demo banner ───────────────────────────────────────────────────────── */
.kb-demo-banner { margin-bottom: var(--sp-5); }
.kb-demo-banner .lamps { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.kb-demo-banner .lamps a { color: var(--secondary); font-family: var(--font-mono); font-size: var(--label-caps); letter-spacing: .08em; text-transform: uppercase; }