/* ============================================================
   HerBusiness Portal — desktop UI polish (24 Jul 2026)
   Additive layer only: no layout changes, no colour changes.
   Loaded last on every top-level page (not the /sops SPA).
   Best-practice pass: keyboard focus visibility, consistent
   micro-interactions, numeric alignment, motion preferences.
   ============================================================ */

/* --- 1. Keyboard accessibility: a visible focus ring everywhere.
       Mouse clicks stay clean (:focus-visible, not :focus). --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--red, #F72630);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- 2. Interaction affordance: anything clickable says so. --- */
button, [role="button"], .refresh-btn, .range-btn, .drill { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

/* One consistent, snappy transition curve for all interactive bits
   (many pages already declare ad-hoc transitions; this unifies the rest). */
a, button, .kpi, .card, .dcard, .tile {
  transition: color .15s ease, background-color .15s ease,
              border-color .15s ease, box-shadow .15s ease,
              transform .15s ease, opacity .15s ease;
}

/* Hard-shadow cards get a tiny press-forward on hover — matches the
   Ink & Ember aesthetic (shadow grows because the card moves, not blurs). */
.kpi:hover, .dcard:hover, .card:hover {
  transform: translate(-1px, -1px);
}

/* --- 3. Numbers: lining, equal-width digits so columns and KPIs
       don't wobble as values change. --- */
.k-num, .d-val, .t-num, td.num, th.num, .kpi .num, .stat-num {
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- 4. Tables: row hover everywhere (some tables already have it —
       this fills the gaps with the same tint). --- */
table.programs tbody tr:hover td,
table.camp tbody tr:hover td {
  background: #FBF3EE;
}

/* --- 5. Typography rendering: crisper display faces on macOS. --- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Brand-coloured text selection. */
::selection { background: var(--red, #F72630); color: #fff; }

/* --- 6. Motion: smooth anchors, and respect reduced-motion. --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}