/* RangeTrades: the Alerts page (#/alerts, its tabs #/alerts/activity and #/alerts/records) and one
   setup's page (#/alert/<id>), alerts.js; docs/PLAN_2026-10-17_ALERTS_PAGE.md. A phone: one column,
   each setup type a card with its coins' switches. A wide page: the setup grid as a table, Activity
   and Records beside it. The page's own width decides (container queries): the chat docks beside it
   on a wide screen. Inputs at 16px (iOS zooms into smaller ones) and rows that wrap (10/17: the quiet
   hours ran out of their card on the iPhone). */

body.view-alerts main { max-width: none; }
.alerts-page { --al-line: #2c3036; --al-card: #1a1b1d; --al-sub: #b9bfc6; color: var(--text); container: alpage / inline-size; }
.al-loading { padding: 24px 0; }
.al-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.al2 { max-width: 1240px; margin: 0 auto; padding: 14px 0 40px; display: flex; flex-direction: column; gap: 16px; }
.alerts-page h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.al-card { background: var(--al-card); border: 1px solid var(--al-line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.al-sec { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 12px; }
.al-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.al-h > span { color: var(--muted); font-size: 13.5px; }
.al-tsub, .al-small { color: var(--muted); font-size: 13px; }
.al-k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.al-foot { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.al-empty { padding: 4px 0; }
.al-dim { opacity: .45; }
.good { color: #7fe0a8; } .bad { color: #ff8f86; } .warn { color: #e0a446; } .slow { color: var(--muted); }

/* buttons, inputs */
.al-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.alerts-page button, .al-btn { background: #1b1c1e; color: var(--text); border: 1px solid #33373d; border-radius: 8px; padding: 7px 13px;
  font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; }
.alerts-page button:disabled { opacity: .55; cursor: default; }
.alerts-page .al-primary { background: #1d2a40; border-color: #2d4570; color: #e8f0ff; font-weight: 600; }
.alerts-page .al-link { background: none; border: 0; color: var(--blue); padding: 4px 0; min-height: 0; align-self: flex-start; }
.alerts-page input[type=text], .alerts-page input[type=number], .alerts-page input[type=time] { background: #131314; color: var(--text);
  border: 1px solid #33373d; border-radius: 8px; padding: 7px 9px; font: 16px ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; min-height: 38px; }
.alerts-page input[type=time] { width: auto; }
.alerts-page input[type=number] { width: 4.6em; }
.alerts-page input[type=text] { width: 9em; }

/* the tabs, and this device's state beside them (10/18: one row, not a card of its own) */
.al-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.al-mini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alerts-page .al-mini button { min-height: 34px; padding: 5px 12px; font-size: 13.5px; }
.al-state { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.al-state i { width: 8px; height: 8px; border-radius: 50%; background: #6b7685; }
.al-state.on { color: #7fe0a8; } .al-state.on i { background: #3fb97a; }
.al-msg { color: #c9d1d9; font-size: 13.5px; margin-top: -6px; }
.al-tabs { display: flex; background: #1b1c1e; border-radius: 10px; padding: 3px; align-self: flex-start; }
.al-tabs a { padding: 8px 18px; border-radius: 8px; color: var(--muted); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.al-tabs a.on { background: #2c3036; color: var(--text); }

/* Set up: the main column and the side one */
.al-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
.al-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; container: almain / inline-size; }
.al-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.al-sh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.al-sh a { font-size: 13px; }

/* coins and switches */
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.alerts-page .al-chip { gap: 7px; border-radius: 10px; font-weight: 600; color: var(--muted); }
.al-chip i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #6b7685; }
.alerts-page .al-chip.on { background: #14301f; border-color: #245a3b; color: var(--text); }
.al-chip.on i { background: #3fb97a; border-color: #3fb97a; }
.al-sw { flex: none; width: 38px; height: 22px; border-radius: 999px; background: #3a3f46; position: relative; display: inline-block; transition: background .15s; }
.al-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #e3e3e3; transition: left .15s; }
.al-sw.on { background: #2f8f5c; } .al-sw.on::after { left: 19px; }
.al-sw.lock { background: #2a2412; }
.al-srow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 0; border-top: 1px solid var(--al-line); }
.al-card > .al-srow:first-child, .al-card > div > .al-srow:first-child { border-top: 0; }
.alerts-page .al-row-sw { background: none; border: 0; padding: 2px 0; min-height: 40px; justify-content: flex-start; gap: 12px; text-align: left; flex: 1 1 260px; }
.al-row-sw > span:last-child { display: flex; flex-direction: column; }
.alerts-page .al-sec > .al-row-sw { flex: none; align-self: flex-start; }
.al-row-sw small, .al-lab small, .al-col small { color: var(--muted); font-size: 13px; font-weight: 400; }
.al-inline { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.al-col { flex-direction: column; align-items: flex-start; gap: 6px; }
.al-lab { display: flex; flex-direction: column; flex: 1 1 220px; }
.al-qt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; padding: 0 0 8px 50px; }

/* Entries: the grid (a table, or a card per type on a narrow page); each cell only its switch, so a
   row's switches line up (10/18) */
.al-gridbox { padding: 4px 14px; }
.al-grid { width: 100%; border-collapse: collapse; }
.al-grid th { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 10px 6px 6px; }
.al-grid th:first-child { text-align: left; }
.al-grid td { border-top: 1px solid var(--al-line); padding: 10px 6px; text-align: center; vertical-align: middle; width: 72px; }
.al-grid td.al-tn { text-align: left; width: auto; }
.al-tn b { font-size: 15px; } .al-tn span { display: block; color: var(--al-sub); font-size: 13px; }
.al-learn { font-size: 13px; }
.alerts-page .al-cell { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 0; padding: 6px; min-height: 0; vertical-align: middle; }
.al-cell.on .al-sw { background: #2f8f5c; } .al-cell.on .al-sw::after { left: 19px; }
.al-cell.off { color: var(--muted); font-size: 15px; cursor: default; }
.al-cell.lock .al-sw { background: #2a2412; } .al-cell s { text-decoration: none; font-size: 11.5px; color: #e0a446; }
.al-tcards { display: none; }
.al-note { margin: 0; font-size: 13.5px; color: var(--al-sub); }
.al-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.al-key span { display: inline-flex; align-items: center; gap: 5px; }
.al-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.al-key i.g, .al-abar i.g { background: #3fb97a; } .al-key i.a, .al-abar i.a { background: #e0a446; }
.al-key i.r, .al-abar i.r { background: #e5534b; } .al-key i.s, .al-abar i.s { background: #6b7685; }

/* the brief's preview */
.al-prev { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; font-size: 13px; }
.al-pre { display: flex; flex-direction: column; gap: 2px; background: #24272c; border-radius: 10px; padding: 9px 11px; color: #c9d1d9; line-height: 1.45; }

/* Activity: which alerts (All / Subscribed / Received), then the kinds */
.al-scope { display: flex; background: #1b1c1e; border-radius: 10px; padding: 3px; align-self: flex-start; }
.alerts-page .al-scope button { flex: 1; background: none; border: 0; border-radius: 8px; padding: 7px 14px; min-height: 34px; color: var(--muted); font-size: 14px; font-weight: 600; }
.alerts-page .al-scope button.on { background: #2c3036; color: var(--text); }
.al-it-s { font-size: 12.5px; }
.al-it-s.ok { color: #7fe0a8; } .al-it-s.no { color: #e0a446; }
.al-asum .muted { font-size: 13px; }
.al-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.alerts-page .al-filters button { border-radius: 999px; padding: 5px 12px; min-height: 32px; font-size: 13px; }
.alerts-page .al-filters button.on { background: #1d2a40; border-color: #2d4570; color: #e8f0ff; }
.al-asum { display: flex; flex-direction: column; gap: 8px; }
.al-abar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #26292e; }
.al-alist { display: flex; flex-direction: column; gap: 8px; }
.al-day { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.al-it { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--al-line); color: var(--text); text-decoration: none; font-size: 14px; }
.al-alist .al-it { background: var(--al-card); border: 1px solid var(--al-line); border-radius: 12px; padding: 10px 12px; }
.al-card .al-it:first-of-type { border-top: 0; }
.al-it-t { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); padding-top: 2px; }
.al-it-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-it-k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.al-it-x { color: var(--al-sub); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.al-it-o { font-size: 13px; }

/* pills */
.al-pill { border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.al-pill.good { background: #14301f; color: #3fb97a; } .al-pill.warn { background: #33280f; color: #e0a446; }
.al-pill.bad { background: #3a1716; color: #ff8f86; } .al-pill.grey { background: #24282e; color: #b4bcc7; }

/* the sheets */
.al-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 80; }
.al-sheet { position: fixed; z-index: 81; right: 24px; top: 70px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow: auto;
  background: #202226; border: 1px solid #3a3f46; border-radius: 16px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 4px; }
.al-sheet-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; font-size: 17px; }
.al-sheet .al-srow:first-of-type { border-top: 0; }
.al-sheet ul { margin: 8px 0; padding-left: 20px; color: #c9d1d9; }
.al-toast, #al-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; background: #2a2d33; color: var(--text);
  border: 1px solid #3a3f46; border-radius: 10px; padding: 9px 14px; font-size: 13.5px; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); max-width: calc(100vw - 32px); }

/* the setup grid as cards: a narrower main column */
@container almain (max-width: 560px) {
  .al-grid { display: none; }
  .al-tcards { display: flex; flex-direction: column; }
  .al-gridbox { padding: 0 12px; }
  .al-tcard { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--al-line); }
  .al-tcard:first-child { border-top: 0; }
  .al-th { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .al-th b { font-size: 15.5px; }
  .al-tcard p { margin: 0; color: var(--al-sub); font-size: 13.5px; }
  .al-cells { display: flex; flex-wrap: wrap; gap: 6px; }
  .alerts-page .al-tcard .al-cell { flex-direction: row; gap: 7px; border: 1px solid #33373d; border-radius: 10px; padding: 6px 9px; min-height: 36px; }
  .al-tcard .al-cell .al-sw { width: 28px; height: 16px; } .al-tcard .al-cell .al-sw::after { width: 10px; height: 10px; }
  .al-tcard .al-cell.on .al-sw::after { left: 15px; }
  .alerts-page .al-tcard .al-cell.on { border-color: #245a3b; background: #14301f; }
}
/* a narrow page: one column, the side column under it */
@container alpage (max-width: 960px) {
  .al-cols { grid-template-columns: minmax(0, 1fr); }
  .al-side { position: static; }
}
@container alpage (max-width: 640px) {
  .al2 { padding-top: 10px; gap: 14px; }
  .al-topbar { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .al-mini { justify-content: flex-end; }
  .al-tabs { align-self: stretch; } .al-tabs a { flex: 1; text-align: center; padding: 8px 0; }
  .al-sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 86vh; border-radius: 18px 18px 0 0; }
  .al-qt { padding-left: 0; }
}

/* one setup's page */
.al-detail { max-width: 780px; margin: 0 auto; padding: 16px 0 32px; display: flex; flex-direction: column; gap: 16px; }
.al-dtop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.al-back { font-size: 14px; min-height: 0; }
.al-dhead { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.al-dhead h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.al-dwhat { margin: 0; color: var(--al-sub); line-height: 1.5; }
.al-dsay { display: flex; flex-direction: column; gap: 4px; background: #24272c; border-radius: 14px; padding: 12px 14px; font-size: 14.5px; }
.al-dsay span { color: #dfe3e8; }
.al-dchart { height: 300px; border-radius: 10px; overflow: hidden; border: 1px solid var(--al-line); }
.al-pboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.al-pbox { background: var(--al-card); border: 1px solid var(--al-line); border-radius: 10px; padding: 9px 11px; }
.al-pv { font-weight: 600; font-size: 16px; }
.al-k.amber { color: #e0a446; } .al-k.red { color: #ff8f86; } .al-k.green { color: #7fe0a8; }
.al-dsec { display: flex; flex-direction: column; gap: 8px; }
.al-dsec h2 { font-size: 17px; }
.al-since { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.al-since li { display: flex; gap: 12px; } .al-since li > span:first-child { flex: none; width: 52px; }
.al-since .good { color: #7fe0a8; } .al-since .bad { color: #ff8f86; } .al-since .warn { color: #e0a446; }
.al-bars { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; font-size: 14px; }
.al-bl { display: flex; justify-content: space-between; }
.al-bar { height: 8px; background: #26292e; border-radius: 4px; overflow: hidden; }
.al-bar i { display: block; height: 8px; border-radius: 4px; } .al-bar i.amber { background: #e0a446; } .al-bar i.grey { background: #6b7685; }
.al-card p { margin: 0 0 6px; font-size: 14px; color: var(--al-sub); } .al-card p.muted { color: var(--muted); }
.al-dacts { display: flex; flex-direction: column; gap: 8px; }
.al-dacts .al-primary { justify-content: center; font-weight: 600; }

@container alpage (max-width: 640px) {
  .al-pboxes { gap: 6px; } .al-pbox { padding: 8px; } .al-pv { font-size: 14.5px; }
  .al-dchart { height: 240px; }
  .al-dhead h1 { font-size: 22px; }
}