/* ============================================================================
   Resid — shared components (P-Task 1)
   Built from the design-direction component specs; reused across every screen.
   Depends on styles/tokens.css (load this AFTER it).

   ACCENT DISCIPLINE (enforced structurally here): indigo (--accent) appears ONLY
   on the primary button and the selected/active state. Everything structural —
   markers, dividers, secondary chips, bars — uses ink or warm-gray, never indigo.

   All classes are r-prefixed to avoid colliding with the app's existing inline
   styles (.card/.chip/.btn/.pcard/...). Screens opt in during their own task.
   ============================================================================ */

/* ---- Card: white, hairline border, soft shadow ---------------------------- */
.r-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: 22px;
}

/* ---- Stat card: grid of 3, 13px gap; label over number + load-fill bar ---- */
.r-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.r-statcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: 18px 18px 16px;
}
.r-statcard .k { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-caption); color: var(--muted); }
.r-statcard .v {
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-stat);
  color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.1;
}
.r-statcard .r-bar { height: 4px; margin-top: 14px; }   /* fills on load via .r-bar > i + --fill */
/* hero variant — one stat promoted to the screen's focal point */
.r-statcard.hero .v { font-size: var(--fs-hero); }

/* ---- List row: title+sub left, chip right; hover bg + content slides 6px --- */
.r-listrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 12px; border-radius: var(--r-inner);
  transition: background var(--dur-quick) var(--ease);
}
.r-listrow + .r-listrow { border-top: 1px solid var(--border); }  /* inset hairline divider */
.r-listrow:hover { background: var(--row-hover); }
.r-listrow:hover .r-listrow-main { transform: translateX(6px); }
.r-listrow-main { min-width: 0; transition: transform var(--dur-quick) var(--ease); }
.r-listrow-title { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--ink); }
.r-listrow-sub   { font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--muted); margin-top: 2px; }

/* ---- Status chip: 8px radius, own-color tint, darker text stop (a11y) ------ */
.r-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-caption);
  border-radius: var(--r-chip); padding: 4px 9px; white-space: nowrap;
  background: var(--neutral-tint); color: var(--muted);
}
.r-chip.good   { background: var(--good-tint);   color: var(--good-ink); }   /* Active */
.r-chip.action { background: var(--accent-tint); color: var(--accent-ink); } /* needs action */
.r-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---- Section marker: accent dot + label (structure may pulse, not fill) ---- */
.r-marker {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-section); color: var(--ink);
}
.r-marker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---- Primary button: the ONE place indigo fills a surface ------------------ */
.r-btn {
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-body);
  color: #fff; background: var(--accent); border: none; border-radius: var(--r-inner);
  padding: 11px 18px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 8px;
  transition: transform var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease);
}
.r-btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(91,84,232,.32); }  /* soft indigo glow */
.r-btn:active { transform: translateY(0); }
.r-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.r-btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
/* secondary — ghost; structure, not action, so NO indigo fill */
.r-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.r-btn-ghost:hover { background: var(--row-hover); box-shadow: none; transform: translateY(-1px); }

/* ---- Selectable option: indigo on selected (the other allowed accent use) -- */
.r-option {
  border: 1px solid var(--border); border-radius: var(--r-inner); padding: 12px 14px; cursor: pointer; background: var(--card);
  transition: border-color var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease);
}
.r-option:hover { background: var(--row-hover); }
.r-option.selected { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-ink); }

/* ---- The dark contrast card: ink surface, no border, once per screen ------- */
.r-darkcard {
  background: var(--ink); color: #fff; border: none; border-radius: var(--r-card);
  box-shadow: var(--shadow-rest); padding: 24px;
}
.r-darkcard .k { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-caption); color: rgba(255,255,255,.62); }
.r-darkcard .v { font-family: var(--font-sans); font-weight: var(--fw-semibold); color: #fff; font-variant-numeric: tabular-nums; }
.r-darkcard a  { color: #fff; }
/* the dark card may carry the single indigo button + a springy icon */
.r-darkcard .icon { transition: transform var(--dur-base) var(--ease-spring); display: inline-block; }
.r-darkcard:hover .icon { transform: scale(1.1) rotate(-4deg); }