/* home screen — parity wave 2 scoped styles. Owner: the home agent.
   Command-centre work queue: a dense row of clickable stat cards above the
   priority-work list. Everything here is Home-only; shared pieces stay in
   desktop.css. Tokens come from ../mobile-web-v2/css/tokens.css. */

/* ---- Stat row: denser, self-reflowing (auto-fit) ---------------------- */
.hstat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

/* ---- One stat card: a real link (keyboard-focusable, hash-navigable) --- */
.hstat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.hstat:hover { border-color: var(--purple); box-shadow: var(--shadow-2, 0 8px 22px rgba(20,16,40,.12)); }
.hstat:focus-visible {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-soft, rgba(124,92,214,.22));
}

.hstat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.hstat-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hstat-go {
  margin-left: auto;
  width: 17px; height: 17px;
  flex: none;
  color: var(--muted);
  transition: transform .12s ease, color .12s ease;
}
.hstat:hover .hstat-go { transform: translateX(2px); color: var(--purple); }

/* Two figures side by side: the headline count + the second data point. */
.hstat-figs { display: flex; align-items: baseline; gap: 16px; }
.hstat-fig b {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hstat-fig.alt {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.hstat-fig.alt b { font-size: 1.05rem; }
.hstat-fig.alt small { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }

/* Tone: headline + second figure pick up the card's urgency colour, matching
   the previous stat-card language. */
.hstat.red   .hstat-fig b, .hstat.red   .hstat-fig.alt b { color: var(--red); }
.hstat.orange .hstat-fig b, .hstat.orange .hstat-fig.alt b { color: var(--orange); }
.hstat.teal  .hstat-fig b, .hstat.teal  .hstat-fig.alt b { color: var(--teal); }
.hstat.violet .hstat-fig b, .hstat.violet .hstat-fig.alt b { color: var(--violet); }
.hstat.green .hstat-fig b, .hstat.green .hstat-fig.alt b { color: var(--green); }