/* Card / module styles for grid tiles */

.module {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-3);
  padding: var(--card-pad);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  transition: box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.module:hover {
  box-shadow: var(--shadow-md);
}

.module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.module-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.module-meta {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

.module-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.module-stat {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--fg-default);
}

.module-stat-label {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-top: var(--space-1);
}

/* ============================================================
   Size tokens — see plan.md → Module grid system
   S=1×1, M=2×1, MV=1×2, L=2×2, L3=3×2, W=4×1, XL=4×2
   ============================================================ */

.module--s  { grid-column: span 1; grid-row: span 1; }
.module--m  { grid-column: span 2; grid-row: span 1; }
.module--mv { grid-column: span 1; grid-row: span 2; }
.module--l  { grid-column: span 2; grid-row: span 2; }
.module--l3 { grid-column: span 3; grid-row: span 2; }
.module--w  { grid-column: span 4; grid-row: span 1; }
.module--xl { grid-column: span 4; grid-row: span 2; }

@media (max-width: 900px) {
  .module--w, .module--xl, .module--l, .module--l3, .module--m {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  /* Collapse horizontally to a single column but preserve the desktop row-span
     so multi-row tiles (MV/L/L3/XL) keep enough vertical room for their
     content. Forcing `grid-row: auto` shrank L to a single 210px row and the
     donut-chart's min-height then overflowed the card. */
  .module--s, .module--m, .module--mv, .module--l, .module--l3, .module--w, .module--xl {
    grid-column: span 1;
  }
}

/* ============================================================
   Stub modules (placeholder content for v1)
   ============================================================ */

.module--stub {
  background: var(--mauve-1);
  border-style: dashed;
  border-color: var(--border-default);
  color: var(--fg-muted);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.module--stub .stub-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}

.module--stub .stub-msg {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}