/* =====================
   SHARED COMPONENTS — used by more than one partial/view
   ===================== */

/* ── Page shell ── */
.page-shell {
  margin: 0 auto;
  padding: var(--header-offset) var(--space-page) 0;
}

/* ── Page legend (footer rule under the page content) ── */
.page-legend {
  padding-top: var(--legend-pt);
  border-top: var(--border-width) dashed var(--line-strong);
}

/* ── Card surface ── */
.card-surface {
  border-radius: var(--radius-card);
  background: var(--card-bg);
}

/* ── Status pill ── */
.pill-status {
  gap: var(--gap-xs);
  padding: var(--padding-status);
}

/* ── Indicator dot with glow — colour comes from --dot-color ── */
.dot-glow {
  background: var(--dot-color);
  box-shadow: var(--glow-sm) var(--dot-color);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .page-legend {
    flex-direction: column;
    align-items: flex-start;
  }
}