/* ============================================================================
 * REAL ANGELS — components.css (Direction "Ember")
 * Reusable snippets consumed with design/tokens.css (import tokens first).
 * Class-based by design: the web viewer's CSP forbids inline styles.
 * See index.html in this folder for live usage of every class, both themes.
 *
 * Accessibility contract baked in:
 * - every interactive class has min-height ≥ var(--hit-min) (56px)
 * - critical actions use --hit-critical (84px)
 * - status classes ALWAYS render an icon/dot + words, never color alone
 * ========================================================================== */

@keyframes ra-ping   { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ra-breathe{ 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.045); opacity: 1; } }
@keyframes ra-blink  { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ------------------------------ Buttons ------------------------------ */
.ra-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: var(--hit-min); padding: 8px 20px;
  border-radius: var(--r-md); border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: 700;
  color: var(--text); background: none; text-align: center; width: 100%;
  transition: transform var(--dur-tap) var(--ease), filter var(--dur-tap) var(--ease);
}
.ra-btn:active { transform: scale(.98); filter: brightness(1.08); }
.ra-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.ra-btn--primary { min-height: var(--hit-primary); border-radius: 18px; background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 800; }
.ra-btn--primary-glow { box-shadow: var(--shadow-accent); }
.ra-btn--critical { min-height: var(--hit-critical); border-radius: var(--r-xl); font-size: 19px; font-weight: 800; }
.ra-btn--sos { min-height: var(--hit-critical); border-radius: var(--r-xl); background: var(--danger-dim); border: 1.5px solid var(--danger-border); color: var(--danger-text); font-size: 23px; font-weight: 800; letter-spacing: .06em; }
.ra-btn--sos .ra-btn__sub { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.ra-btn--danger-solid { background: var(--danger); color: #FFF7F7; font-weight: 800; }
[data-theme="light"] .ra-btn--danger-solid { color: #FFF7F7; }
.ra-btn--danger-outline { border: 1.5px solid var(--danger-border); color: var(--danger-text); font-weight: 700; font-size: 15.5px; }
.ra-btn--ghost { border: 1px solid var(--border-strong); color: var(--text); font-weight: 600; font-size: 15.5px; }
.ra-btn--ghost-dim { border: 1px solid var(--border-strong); color: var(--text-dim); font-weight: 600; font-size: 15px; }
.ra-btn--add { border: 1.5px dashed var(--border-strong); color: var(--text-dim); font-weight: 600; font-size: 15px; }
.ra-btn__sub { font-size: var(--fs-caption); font-weight: 500; opacity: .85; }

/* --------------------------- Status dots ----------------------------- */
.ra-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ra-dot--on { background: var(--safe); }
.ra-dot--off { background: var(--danger); animation: ra-blink 1.2s ease-in-out infinite; }
.ra-dot--live { position: relative; width: 10px; height: 10px; background: var(--danger); border-radius: 50%; }
.ra-dot--live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--danger); animation: ra-ping var(--dur-alert) ease-out infinite; }

/* --------------------------- Status chips ---------------------------- */
.ra-chip { display: inline-flex; align-items: center; gap: 9px; border-radius: var(--r-pill); padding: 10px 18px; font-family: var(--font-sans); font-size: 13px; font-weight: 800; letter-spacing: var(--ls-label); }
.ra-chip--armed { background: var(--accent); color: var(--on-accent); }
.ra-chip--armed .ra-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--on-accent); animation: ra-blink 2.4s ease-in-out infinite; }
.ra-chip--alert { background: var(--danger-dim); border: 1.5px solid var(--danger-border); color: var(--danger-text); }
.ra-chip--safe { background: var(--safe-dim); color: var(--safe-text); font-size: 12px; font-weight: 700; letter-spacing: 0; padding: 7px 13px; }
.ra-chip--pending { background: var(--accent-dim); color: var(--accent-text); font-size: 12px; font-weight: 700; letter-spacing: 0; padding: 7px 13px; }

/* Freshness pill — the honest-state element. JS swaps the modifier class:
   fresh <30s · stale 30s–2min · dead >2min (dot stops pulsing, wording changes) */
.ra-freshness { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--r-pill); padding: 6px 12px; font-size: var(--fs-caption); font-weight: 600; }
.ra-freshness__dot { width: 7px; height: 7px; border-radius: 50%; }
.ra-freshness--fresh { background: var(--safe-dim); color: var(--safe-text); }
.ra-freshness--fresh .ra-freshness__dot { background: var(--safe); }
.ra-freshness--stale { background: var(--accent-dim); color: var(--accent-text); }
.ra-freshness--stale .ra-freshness__dot { background: var(--accent); }
.ra-freshness--dead { background: var(--danger-dim); color: var(--danger-text); }
.ra-freshness--dead .ra-freshness__dot { background: var(--danger); }

/* ----------------------------- Banners ------------------------------- */
/* Degraded: hazard-striped amber field. Identical in both themes — alarm never softens. */
.ra-banner-hazard { background: #F5A83A; background-image: repeating-linear-gradient(-45deg, rgba(36,19,0,.25) 0 12px, rgba(36,19,0,0) 12px 24px); color: #241300; padding: 18px 24px; }
.ra-banner-hazard__head { display: flex; align-items: center; gap: 16px; }
.ra-banner-hazard__icon { width: 64px; height: 64px; border-radius: 50%; background: #241300; color: #F5A83A; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; flex: none; animation: ra-blink 1.2s ease-in-out infinite; }
.ra-banner-hazard__title { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.ra-banner-hazard__body { font-size: 15px; font-weight: 600; line-height: 1.5; margin-top: 14px; }

/* Duress: solid danger field, icon + words + behavior guidance. */
.ra-banner-duress { background: var(--danger); color: #2A0505; padding: 18px 20px; }
[data-theme="light"] .ra-banner-duress { color: #FFF7F7; }
.ra-banner-duress__head { display: flex; align-items: center; gap: 12px; }
.ra-banner-duress__icon { width: 44px; height: 44px; border-radius: 50%; background: #2A0505; color: var(--danger); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; flex: none; animation: ra-blink 1.2s ease-in-out infinite; }
[data-theme="light"] .ra-banner-duress__icon { background: #FFF7F7; }
.ra-banner-duress__title { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.ra-banner-duress__body { font-size: 13.5px; font-weight: 600; line-height: 1.5; margin-top: 10px; }

/* ------------------------------ Cards -------------------------------- */
.ra-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; font-family: var(--font-sans); color: var(--text); }
.ra-card--callout-accent { background: var(--accent-dim); border: none; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--accent-text); }
.ra-card--watching { background: var(--safe-dim); border: 1.5px solid rgba(61,214,140,.45); border-radius: var(--r-lg); }
[data-theme="light"] .ra-card--watching { border-color: rgba(4,120,87,.40); }

/* List rows (angels list, protections list) */
.ra-rows { padding: 6px 18px; }
.ra-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body); }
.ra-row:last-child { border-bottom: none; }
.ra-row__label { flex: 1; }
.ra-row__ok { font-size: 15px; font-weight: 700; color: var(--safe-text); }
.ra-row__fail { font-size: 15px; font-weight: 800; color: var(--danger-text); }
.ra-row--fail .ra-row__label { font-weight: 700; color: var(--danger-text); }

/* ----------------------------- Avatars ------------------------------- */
.ra-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex: none; font-family: var(--font-sans); }
.ra-avatar--sm { width: 30px; height: 30px; font-size: 12px; }
.ra-avatar--1 { background: var(--avatar-1-bg); color: var(--avatar-1-text); }
.ra-avatar--2 { background: var(--avatar-2-bg); color: var(--avatar-2-text); }
.ra-avatar--3 { background: var(--avatar-3-bg); color: var(--avatar-3-text); }
.ra-avatar-stack { display: flex; }
.ra-avatar-stack .ra-avatar { border: 2px solid var(--surface); }
.ra-avatar-stack .ra-avatar + .ra-avatar { margin-left: -9px; }

/* ----------------------------- PIN pad ------------------------------- */
/* One pad serves the safe PIN and the duress PIN. Nothing in markup, class
   names, or DOM state may ever differ between the two — INV-12. */
.ra-pinpad { display: flex; flex-direction: column; gap: 14px; padding: 0 44px; }
.ra-pinpad__row { display: flex; justify-content: space-between; }
.ra-key { width: var(--hit-key); height: var(--hit-key); border-radius: 50%; background: var(--fill-ghost); border: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 26px; font-weight: 600; color: var(--text); cursor: pointer; }
.ra-key:active { background: var(--border-chip); }
.ra-key--blank { background: none; pointer-events: none; }
.ra-key--backspace { background: none; font-size: 22px; color: var(--text-dim); }
.ra-pin-dots { display: flex; justify-content: center; gap: 18px; }
.ra-pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); }
.ra-pin-dot--filled { border: none; background: var(--accent); }

/* --------------------------- Progress ring --------------------------- */
/* Set --pct (0–100) from JS; center content is a nested .ra-ring__core. */
.ra-ring { --pct: 64; width: 248px; height: 248px; border-radius: 50%; background: conic-gradient(var(--accent) 0% calc(var(--pct) * 1%), var(--border-track) calc(var(--pct) * 1%) 100%); display: flex; align-items: center; justify-content: center; }
.ra-ring__core { width: 214px; height: 214px; border-radius: 50%; background: var(--surface-inset); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
.ra-ring__numeral { font-size: var(--fs-numeral); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.ra-ring__label { font-size: 13px; font-weight: 600; color: var(--text-dim); }

/* ------------------------- Screen scaffolding ------------------------ */
.ra-screen { background: radial-gradient(130% 90% at 50% 0%, var(--bg-top) 0%, var(--bg) 60%); color: var(--text); font-family: var(--font-sans); }
.ra-screen--armed { background: radial-gradient(120% 70% at 50% -10%, var(--accent-glow) 0%, rgba(245,158,11,0) 55%), radial-gradient(130% 90% at 50% 0%, var(--bg-top) 0%, var(--bg) 60%); }
.ra-caption { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; text-align: center; }
.ra-overline { font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-label); color: var(--text-muted); text-transform: uppercase; }