/* ──────────────────────────────────────────────────────────────────────────
   Global card UI — separators
   Two sitewide tools:

   1) card-hsep — a FULL-WIDTH separator line under a card's section header
      (edge-to-edge, ignoring the card's inner padding). Put it on the header
      element (the h3 title, or the flex row holding title + badge). Remove
      any leftover margin, padding or border-b you had there.
        • Standard card (wrapper padding p-5): just `card-hsep`.
        • Card padded `p-4 sm:p-5`: add `cd-sm` → `card-hsep cd-sm`.
        • Header element itself carries the padding (wrapper has none):
          use `card-hsep-flush` (already edge-to-edge — just the line).

   2) card-rule — a subtle INSET separator BETWEEN items inside a card (not
      full width; respects the card padding). Drop `<div class="card-rule">`
      between logical groups of rows.

   🔴 NOTE: the class name is `card-hsep`, NOT `card-divider` — `card-divider`
   is a pre-existing marker for the dashboard's thin credential separators
   (styled by dark-mode.css). Do not reuse that name here.

   Theme-aware (dark handled below; self-contained — no dark-mode.css needed).
   ────────────────────────────────────────────────────────────────────────── */
.card-hsep{
  --cd-x: 1.25rem;                 /* cancels p-5 (20px) — the panel default */
  border-bottom: 1px solid #eaecf0;
  margin-left:  calc(-1 * var(--cd-x));
  margin-right: calc(-1 * var(--cd-x));
  padding-left:  var(--cd-x);
  padding-right: var(--cd-x);
  padding-bottom: 0.8rem;
  margin-bottom:  1rem;
}
@media (max-width: 639.98px){
  .card-hsep.cd-sm{ --cd-x: 1rem; }   /* cards padded p-4 sm:p-5 → 16px on mobile */
}
.card-hsep-flush{ border-bottom: 1px solid #eaecf0; }

/* Inset item separator — subtle, respects card padding. */
.card-rule{ height:1px; background:#eef0f3; margin:0.75rem 0; border:0; }

html.dark .card-hsep,
html.dark .card-hsep-flush{ border-color:#2b3648; }
html.dark .card-rule{ background:#2b3648; }