/* ==========================================================================
   Shared card primitives — used by ui/static (Saved Workstreams) and
   console/static (Saved Coordinators).  Single source of truth so the two
   surfaces don't drift on hover affordance, padding, or typography.
   ==========================================================================
   Class names match the original ui/static rules they replaced; the
   delete-mode subset stays in ui/static/style.css until coordinator gets
   the same UX (then it can move here too).
   ========================================================================== */

.dashboard-cards {
  display: grid;
  /* Denser default than the original 200px floor — cards carry a short
     title + one-line meta, so 160-180px fits 4 across at the 1140px
     content cap and keeps the row from looking padded-out. */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

.dashboard-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    opacity 0.15s;
}
.dashboard-card.is-busy {
  opacity: 0.6;
  cursor: progress;
}
.dashboard-card:hover {
  border-color: var(--accent);
  background: var(--bg-highlight);
}
.dashboard-card:active {
  background: var(--bg-highlight);
  border-color: var(--accent);
}
.dashboard-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dashboard-card .card-title {
  font-size: 12px;
  color: var(--fg-bright);
  font-weight: 500;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-card .card-meta {
  font-size: 10px;
  color: var(--fg-dim);
}

/* Subtle ws_id badge on each card — also used inline in card-meta. */
.card-wsid {
  font-size: 9px;
  color: var(--fg-dim);
  opacity: 0.45;
  margin-left: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  vertical-align: middle;
}

@media (max-width: 480px) {
  .dashboard-cards {
    grid-template-columns: 1fr;
  }
}
