/* css/home-metrics.css — "Business Pulse" sidebar card (homepage right column).
   Container-queried like payment-alerts.css: the right column is a fixed rail
   on desktop but a full-width drawer on mobile, so every size steps off the
   card's own width rather than the viewport. */

.pulse-card {
  container-type: inline-size;
  container-name: pulse;
  /* Held as custom properties so .pulse-header can negate them exactly and
     run its divider to the card edges, the way .focus-head does. */
  --pulse-pad-y: clamp(0.7rem, 4cqi, 0.95rem);
  --pulse-pad-x: clamp(0.8rem, 5cqi, 1.05rem);
  background: var(--bg-card);
  border-radius: 13px;
  padding: var(--pulse-pad-y) var(--pulse-pad-x);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}

/* One heading style for every card in the right rail — matches
   .focus-head h3, .events-card h3 and .payment-alerts-header. Fixed rather
   than clamped so it tracks its neighbours at every width. */
.pulse-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  /* Negate the card's padding so the rule below spans the full card width,
     then restore it as the header's own padding — matching .focus-head. */
  margin: calc(-1 * var(--pulse-pad-y)) calc(-1 * var(--pulse-pad-x)) 0.85rem;
  padding: var(--pulse-pad-y) var(--pulse-pad-x);
  border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-heading);
}
/* Sized in px like every other iconify-icon in the project (see
   activity-feed.css). The label span is a flex row so the icon centres against
   the text rather than sitting on its baseline. */
.pulse-header > span:first-child { display: inline-flex; align-items: center; }
.pulse-header-icon {
  color: var(--blue);
  margin-right: 0.35rem;
  font-size: 15px;
  flex: none;
}
/* Matches the "View all" link on the Upcoming card. */
.pulse-header a {
  font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--blue); text-decoration: none; white-space: nowrap;
}
.pulse-header a:hover { text-decoration: underline; }

/* ---- Sections ---- */
.pulse-section + .pulse-section { margin-top: 0.7rem; }
.pulse-label {
  font-size: clamp(0.58rem, 2.5cqi, 0.64rem);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.pulse-figure {
  font-size: clamp(1.05rem, 6cqi, 1.35rem);
  font-weight: 700; color: var(--text-heading);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.pulse-sub {
  font-size: clamp(0.6rem, 2.7cqi, 0.68rem);
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* ---- Two months side by side ---- */
.pulse-months { display: flex; gap: 0.5rem; }
.pulse-month { flex: 1 1 0; min-width: 0; }
.pulse-month .pulse-figure { font-size: clamp(0.95rem, 5.2cqi, 1.2rem); }
/* "THIS MONTH" / "LAST MONTH" — the comparison has to be readable without
   the reader working out which way round two month abbreviations run. */
.pulse-month-name {
  font-size: clamp(0.56rem, 2.4cqi, 0.62rem);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-secondary);
}
/* Last month is a reference point, not the headline, so it steps back to the
   muted grey. A token rather than opacity: --text-muted is defined for both
   themes (#6b7a8d / #8a8d91), where an opacity would fade toward whatever sits
   behind the card and land differently in dark mode. */
.pulse-month--prev .pulse-figure { color: var(--text-muted); }
.pulse-rule {
  border: 0; border-top: 1px solid var(--border-light);
  margin: 0.7rem 0;
}
[data-theme="dark"] .pulse-rule { border-top-color: rgba(255,255,255,0.07); }

/* ---- MRR / ARR pair ---- */
/* These are two different measures of the same thing, and side by side with a
   plain gap they read as one number split in half. A rule between them, and
   room either side of it, keeps them separate at a glance. */
.pulse-pair { display: flex; align-items: stretch; gap: 0.9rem; }
.pulse-pair > div { flex: 1 1 0; min-width: 0; }
.pulse-pair > div + div {
  padding-left: 0.9rem;
  border-left: 1px solid var(--border-light);
}
[data-theme="dark"] .pulse-pair > div + div { border-left-color: rgba(255,255,255,0.09); }

/* ---- Per-branch split ---- */
/* Labelled, because a bare Perth/Bunbury pair under an MRR/ARR row is
   genuinely ambiguous about which of the two it breaks down. */
.pulse-branches { margin-top: 0.6rem; display: grid; gap: 0.18rem; }
.pulse-branches-label {
  font-size: clamp(0.56rem, 2.4cqi, 0.62rem);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}
.pulse-branch {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem;
  font-size: clamp(0.63rem, 2.8cqi, 0.72rem);
}
.pulse-branch-name { color: var(--text-muted); }
.pulse-branch-value {
  color: var(--text-secondary); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pulse-stale {
  margin-top: 0.55rem;
  font-size: clamp(0.58rem, 2.5cqi, 0.65rem);
  color: var(--yellow);
}
.pulse-empty, .pulse-error {
  font-size: 0.7rem; color: var(--text-muted); padding: 0.2rem 0 0.1rem;
}

/* Skeleton while the two queries are in flight. */
.pulse-skeleton {
  height: 0.85rem; border-radius: 4px;
  background: var(--bg-hover);
  animation: pulse-shimmer 1.4s ease-in-out infinite;
}
.pulse-skeleton.wide { width: 68%; height: 1.15rem; }
@keyframes pulse-shimmer { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .pulse-skeleton { animation: none; }
}