/* ============================================================
   alerts-screen.css — ME › Alerts. Everything is scoped under .alr.
   Tokens used: --fd (Mona Sans), --fm (IBM Plex Mono).
   ============================================================ */

/* Full-width, not a centred column — same fix Ateet asked for on the
   Wallet screen ("I need it full screen.. end to end.. not in the
   center"), applied here too rather than waiting to be asked twice. */
.alr{padding:22px 32px 48px;color:#c9cdd6;font-family:var(--fd)}

/* ---- A. not connected ---- */
.alr--empty{display:flex;align-items:center;justify-content:center;min-height:60vh}
.alr__hero{max-width:420px;text-align:center}
.alr__ic{color:#4e5568;margin-bottom:22px}
.alr__h1{margin:0;font:600 24px/1.2 var(--fd);color:#fff;letter-spacing:-.01em}
.alr__p{margin:12px 0 0;font:400 14.5px/1.55 var(--fd);color:#8b92a8}
.alr__cta{
  margin-top:26px;height:44px;padding:0 24px;border:0;border-radius:2px;cursor:pointer;
  background:#ff9a1f;color:#08090d;font:600 13px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;
}
.alr__cta:hover{background:#ffad47}
.alr__cta:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---- B. status row ---- */
.alr__status{
  display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:2px;
  background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.alr__dot{width:7px;height:7px;border-radius:50%;background:#3dd68c;box-shadow:0 0 8px rgba(61,214,140,.6)}
.alr__handle{font:500 14px/1 var(--fm);color:#fff}
.alr__since{font:400 12px/1 var(--fm);color:#4e5568}
.alr__sp{flex:1}
.alr__lnk{border:0;background:transparent;cursor:pointer;padding:6px 8px;font:400 12px/1 var(--fm);letter-spacing:.04em;color:#8b92a8}
.alr__lnk:hover{color:#fff}

/* ---- tabs ---- */
.alr__tabs{display:flex;gap:26px;margin-top:26px;border-bottom:1px solid rgba(255,255,255,.07)}
.alr__tab{
  border:0;background:transparent;cursor:pointer;padding:0 0 12px;margin-bottom:-1px;
  font:500 14px/1 var(--fd);color:#8b92a8;border-bottom:2px solid transparent;display:flex;gap:8px;align-items:baseline;
}
.alr__tab:hover{color:#c9cdd6}
.alr__tab.on{color:#fff;border-bottom-color:#ff9a1f}
.alr__n{font:400 11px/1 var(--fm);color:#4e5568}
.alr__tab.on .alr__n{color:#8b92a8}
.alr__pane{margin-top:6px}
.alr__empty{margin:0;padding:22px 0;font:400 13.5px/1.5 var(--fd);color:#4e5568}

/* ---- ACTIVE: groups + rows ---- */
.alr__grp{margin-top:22px}
.alr__grpH{margin:0 0 4px;display:flex;align-items:center;gap:10px;font:500 13px/1.2 var(--fd);color:#c9cdd6}
.alr__grpDot{width:6px;height:6px;border-radius:50%;background:var(--cc,#8b92a8);box-shadow:0 0 8px var(--cc,transparent)}
.alr__grpN{font:400 11px/1 var(--fm);color:#4e5568}
.alr__row{
  display:grid;grid-template-columns:1fr auto 120px 28px;align-items:center;gap:16px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.alr__sym{display:flex;align-items:baseline;gap:10px;min-width:0;font:500 14px/1 var(--fd);color:#fff}
.alr__exch{font:400 10.5px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:#4e5568}
.alr__state{display:flex;align-items:center;gap:7px;font:400 11px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:#8b92a8}
.alr__stateDot{width:6px;height:6px;border-radius:50%;background:#4e5568}
.alr__state.up .alr__stateDot{background:#3dd68c}
.alr__state.dn .alr__stateDot{background:#f2655b}
.alr__sinceR{font:400 12px/1 var(--fm);color:#4e5568;text-align:right;white-space:nowrap}
.alr__rm{
  width:28px;height:28px;border:0;border-radius:2px;background:transparent;cursor:pointer;color:#4e5568;
  display:grid;place-items:center;
}
.alr__rm:hover{color:#fff;background:rgba(255,255,255,.06)}

/* ---- LOG ---- */
.alr__log{border-top:1px solid rgba(255,255,255,.07)}
.alr__lrow{
  display:grid;grid-template-columns:110px 110px 130px 1fr 80px;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.alr__lwhen{font:400 12px/1 var(--fm);color:#4e5568;white-space:nowrap}
.alr__lsym{font:500 14px/1 var(--fd);color:#fff}
.alr__lsys{font:400 10.5px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--cc,#8b92a8)}
.alr__ltext{font:400 13.5px/1.3 var(--fd);color:#c9cdd6;min-width:0}
.alr__lok{font:400 11px/1 var(--fm);letter-spacing:.06em;text-transform:uppercase;text-align:right;color:#4e5568}
.alr__lok.ok{color:#4e5568}
.alr__lok.fail{color:#ff9a1f}

/* ---- mobile ---- */
@media (max-width:767px){
  .alr{padding:16px 16px 40px}
  .alr__status{flex-wrap:wrap;gap:8px 12px}
  .alr__sp{display:none}
  .alr__row{grid-template-columns:1fr auto 28px;grid-template-areas:"sym state rm" "since since since";row-gap:6px}
  .alr__sym{grid-area:sym}.alr__state{grid-area:state}.alr__rm{grid-area:rm}
  .alr__sinceR{grid-area:since;text-align:left}
  .alr__lrow{grid-template-columns:1fr auto;grid-template-areas:"sym ok" "text text" "meta meta";row-gap:5px}
  .alr__lsym{grid-area:sym}.alr__lok{grid-area:ok}.alr__ltext{grid-area:text}
  .alr__lwhen,.alr__lsys{grid-area:meta}
  .alr__lsys{justify-self:end}
}