/* src/components/projects/milestones-board.css */
.pbos-milestones-board {
  --mb-paper-0: oklch(100% 0 0);
  --mb-paper-1: oklch(99.2% .003 255);
  --mb-paper-3: oklch(94.5% .006 255);
  --mb-text-1: oklch(20% .018 255);
  --mb-text-3: oklch(55% .018 255);
  --mb-text-4: oklch(68% .015 255);
  --mb-border-1: oklch(92% .006 255);
  --mb-border-3: oklch(80% .01 255);
  --mb-accent: oklch(66% .15 150);
  --mb-accent-soft: oklch(94% .05 150);
  --mb-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

.pbos-milestones-board .board {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 12px;
  padding: 14px 16px 32px;
}

.pbos-milestones-board .col {
  background: var(--mb-paper-1);
  border: 1px solid var(--mb-border-1);
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  min-height: 240px;
}

.pbos-milestones-board .col.is-over {
  border-color: var(--mb-accent);
  background: var(--mb-accent-soft);
}

.pbos-milestones-board .col-head {
  display: flex;
  border-bottom: 1px solid var(--mb-border-1);
  align-items:  center;
  gap: 8px;
  padding: 12px 14px 10px;
}

.pbos-milestones-board .col-head .cdot {
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.pbos-milestones-board .col-head .clbl {
  color: var(--mb-text-1);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 11.5px;
  font-weight: 600;
}

.pbos-milestones-board .col-head .ccount {
  font-family: var(--mb-font-mono);
  color: var(--mb-text-3);
  background: var(--mb-paper-3);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 10.5px;
}

.pbos-milestones-board .col-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}

.pbos-milestones-board .card {
  background: var(--mb-paper-0);
  border: 1px solid var(--mb-border-1);
  display: flex;
  cursor: pointer;
  border-radius: 6px;
  flex-direction: column;
  gap: 7px;
  padding: 10px 11px;
  transition: border-color .12s, box-shadow .12s;
}

.pbos-milestones-board .card:hover {
  border-color: var(--mb-border-3);
  box-shadow: 0 1px 2px #0000000f;
  box-shadow: 0 1px 2px color(display-p3 0 0 0 / .06);
  box-shadow: 0 1px 2px lab(0% 0 0 / .06);
}

.pbos-milestones-board .card[draggable="true"] {
  cursor: grab;
}

.pbos-milestones-board .card.is-dragging {
  opacity: .45;
  cursor: grabbing;
}

.pbos-milestones-board .card-title {
  color: var(--mb-text-1);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}

.pbos-milestones-board .card-meta {
  display: flex;
  color: var(--mb-text-3);
  align-items:  center;
  gap: 8px;
  margin-top: 2px;
  font-size: 11px;
}

.pbos-milestones-board .card-meta .spacer {
  flex: 1;
}