/**
 * myLogbook card components — Zone 3.
 *
 * Key technique used throughout: rem-based (not px-based) responsive
 * breakpoints/track-widths. A px-based minmax()/flex-basis only responds
 * to viewport width — it stays blind to the font-size adjuster changing
 * the root font-size, which is what actually triggered the old theme's
 * "text overflows when font changes" bug. rem-based sizing scales with
 * root font-size, so these components re-flow correctly regardless of
 * which one changed.
 */

/* ---- Overview stat boxes ---- */

.ml-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ml-space-md);
}

.ml-stat-box {
  flex: 1 1 9rem;
  min-width: 0;
  background-color: var(--ml-bg-surface);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-md);
  padding: var(--ml-space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.ml-stat-value {
  font-size: var(--ml-text-3xl);
  font-weight: 800;
  color: var(--ml-accent);
  line-height: 1;
  overflow-wrap: break-word;
}

.ml-stat-label {
  font-size: var(--ml-text-xs);
  color: var(--ml-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Homepage "Recent Entries" now reuses .ml-archive-grid/.ml-archive-card
   (assets/css/archive.css) instead of a dedicated zigzag layout — per
   feedback that the zigzag, even compacted, still wasted too much space
   to show many entries at once. One shared compact-grid component now,
   not two parallel card styles. */

/* ---- Detail list (numbered items — the component behind the original
   "3. Numbered phases / 4. Results" overflow bug, rebuilt with a
   rem-based auto-fit grid so it collapses to a single column once
   content genuinely needs more room, at any font-size, not just at
   fixed viewport breakpoints) ---- */

.ml-detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--ml-space-md);
}

.ml-detail-item {
  min-width: 0;
  display: flex;
  gap: var(--ml-space-sm);
  background-color: var(--ml-bg-muted);
  border-radius: var(--ml-radius-md);
  padding: var(--ml-space-sm) var(--ml-space-md);
}

.ml-detail-number {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--ml-accent);
}

.ml-detail-text {
  min-width: 0;
  overflow-wrap: break-word;
}

.ml-empty-note {
  color: var(--ml-text-muted);
  font-style: italic;
  font-size: var(--ml-text-sm);
}