/* ============================================================================
   AquaCalc — Shared component layer (focus, buttons, forms).
   Loaded AFTER tokens.css and the page stylesheets so it can normalise
   component styling site-wide without each sheet redefining it. Token-driven.
   ============================================================================ */

/* ── Accessible focus ring (site-wide) ──────────────────────────────────────
   Fixes missing keyboard focus on the portal + landing-page buttons. Only shows
   for keyboard/programmatic focus (:focus-visible), never on mouse click. */
:where(a, button, summary, [tabindex]):focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Gradient buttons — explicit rule so the ring wins over their own styles. */
.pf-btn:focus-visible,
.fb-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Button language — shared corner radius (sizing stays per context) ─────── */
.pf-btn, .fb-btn { border-radius: var(--radius-md); }
.pf-btn.sm      { border-radius: var(--radius-sm); }

/* ── Consistent disabled state across every button system ──────────────────── */
.pf-btn:disabled, .fb-btn:disabled,
.btn-primary:disabled, .btn-secondary:disabled, .btn-purple:disabled,
button:disabled, [aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* ── iOS: inputs never trigger zoom (render >=16px on touch) — centralised ─── */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea { font-size: 1rem !important; }
}