/* ============================================================
   Stocky — Alerts (/alerts) — v1 placeholder (P2)
   Alerts are created from each stock (spec 05) and delivered via
   the bell (spec 03). This route reserves space for a future
   "see / pause / batch-delete all alerts" screen. For now it's a
   calm coming-soon with a live, read-only summary of what you've
   set, linking back to each stock where they're managed.
   Layered on colors_and_type.css + components.css + dashboard.css.
   ============================================================ */

.al-col { width: 100%; max-width: 720px; margin: 8vh auto 0; }

.al-hero { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: 8px 0 4px; }
.al-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui);
  font-size: 10px; letter-spacing: 1.25px; text-transform: uppercase; font-weight: 600;
  color: var(--color-highlight); background: var(--highlight-bg); border-radius: var(--radius-sm); padding: 5px 11px; }
.al-icon { width: 64px; height: 64px; border-radius: var(--radius-lg); display: grid; place-items: center;
  background: var(--bg-surface); color: var(--color-signal); border: 0.5px solid var(--border-default); }
.al-title { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); font-weight: 600;
  letter-spacing: -0.6px; color: var(--text-primary); margin: 0; }
.al-msg { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--text-muted);
  margin: 0; max-width: 50ch; text-wrap: pretty; }
.al-msg b { color: var(--text-secondary); font-weight: 600; }
.al-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }

/* live, read-only summary of alerts the user has already set */
.al-summary { margin-top: 34px; border: 0.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-primary); overflow: hidden; }
.al-summary__head { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 12px;
  border-bottom: 0.5px solid var(--border-default); }
.al-summary__t { font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.al-summary__c { font-family: var(--font-display); font-size: 12px; color: var(--text-muted); }
.al-summary__hint { margin-left: auto; font-family: var(--font-ui); font-size: 11px; color: var(--text-muted); }
.al-rows { display: flex; flex-direction: column; }
.al-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; text-decoration: none;
  border-bottom: 0.5px solid var(--border-default); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out); }
.al-row:last-child { border-bottom: 0; }
.al-row:hover { background: var(--bg-surface); }
.al-row__sym { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-primary);
  min-width: 64px; letter-spacing: 0; }
.al-row__chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.al-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 11px;
  color: var(--text-secondary); background: var(--bg-surface); border: 0.5px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 4px 9px; white-space: nowrap; }
.al-chip--muted { opacity: 0.6; }
.al-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-signal); }
.al-chip--muted .al-chip__dot { background: var(--text-muted); }
.al-row__go { flex: none; color: var(--text-muted); display: inline-flex; }
.al-row:hover .al-row__go { color: var(--color-signal); }

/* empty summary (no alerts yet) */
.al-empty { padding: 22px 16px; text-align: center; font-family: var(--font-ui); font-size: 12.5px;
  color: var(--text-muted); line-height: 1.6; }
.al-empty b { color: var(--text-secondary); }

@media (max-width: 640px) {
  .al-col { margin-top: 4vh; }
  .al-actions .btn { flex: 1; justify-content: center; min-height: 44px; }
  .al-row { flex-wrap: wrap; }
}