/* Alerts (js/views/alerts.js, #/alerts): the open alerts, Live now, Your alerts and Earlier
   alerts, and the Add alert popup (js/views/alert-form.js).
   Shared tokens and components are in /styles.css (docs/ui-notes-v2.md), the switch colours
   (sw-0, sw-1, sw-pe) in /css/contrast.css; every class here starts with "alerts-". Plain ASCII
   only. Phone first; 720 px and wider is the tablet step.

   Live now is a card per switch with a solid band in the switch's colour, as Rotation and Numbers
   show each switch: its active calls large, then the calls trying to connect, ASR and ACD now.
   A card whose Customers and vendors part is open takes the whole row, so its tables have room. */

/* -------------------------------------------------------------------- the top */
/* The page sentence, and beside it the sound switch of this device and Add alert: on the right
   where there is room, under the sentence on phones. */
.alerts-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; column-gap: 24px; }
.alerts-head > .lede { flex: 1 1 24em; min-width: 0; }
.alerts-head-acts { display: flex; flex: none; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }
@media (min-width: 720px) { .alerts-head-acts { margin: -9px 0 0; } }
@media (max-width: 719px) { .alerts-head-acts { width: 100%; } .alerts-head-acts .btn { flex: 1 1 0; } }
.alerts-sound[aria-checked="true"], .alerts-sound[aria-checked="true"]:hover { background: var(--accent-tint); color: var(--accent); }
.alerts-sound[aria-checked="false"] { color: var(--slate); }
.alerts-sound[aria-checked="false"]:hover { color: var(--ink); }
.alerts-add .glyph { color: currentColor; }

/* ---------------------------------------------------------------- Earlier alerts */
/* One alert that resolved, on the shared .rows > .row list: its sentence, detail, and when it
   opened and resolved. */
.alerts-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 0 12px; padding: 14px 0; }
@media (min-width: 720px) { .alerts-item { gap: 0 16px; } }
.alerts-item-mark { display: inline-flex; padding-top: 2px; color: var(--slate); }
.alerts-item-main { min-width: 0; }
.alerts-item-title { margin: 0; font-weight: 700; line-height: 1.4; }
.alerts-item-detail { max-width: 46em; margin: 2px 0 0; font-size: 14px; }
.alerts-item-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 8px 0 0; color: var(--slate); font-size: 13px; }
.alerts-history > .alerts-fold > summary { color: var(--ink); font-size: 18px; line-height: 1.3; }
.alerts-history > .alerts-fold > summary:hover { color: var(--accent); }
.alerts-history-text { max-width: 44em; margin: 4px 0 12px; color: var(--slate); font-size: 14px; }

/* ------------------------------------------------------------------ the cards */
/* One card per thing that is wrong, on the shared .rows > .row list (.bad, .warn and .off give
   the status bar): its name (a link to its page), one line per alert with "Edit alert", what to
   do, when it started, and the result of a fix. The fix and Stop reminders sit beside it from
   720 px, under it on phones, sharing the width. */
.alerts-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-areas:
    "mark main"
    ". side";
  align-items: start;
  gap: 0 12px;
  padding: 16px 0;
}
.alerts-card-mark { grid-area: mark; display: inline-flex; padding-top: 3px; color: var(--slate); }
.alerts-card.bad .alerts-card-mark { color: var(--bad); }
.alerts-card.warn .alerts-card-mark { color: var(--warn-text); }
.alerts-card-main { grid-area: main; min-width: 0; }
.alerts-card-name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.alerts-card-name a { color: var(--ink); text-decoration: none; }
.alerts-card-name a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; }
.alerts-card-lines { max-width: 46em; margin: 6px 0 0; padding: 0; list-style: none; }
.alerts-card-lines li + li { margin-top: 4px; }
.alerts-card-edit { margin-left: 4px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.alerts-card-todo { max-width: 46em; margin: 10px 0 0; font-size: 14px; }
.alerts-card-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 6px 0 0; color: var(--slate); font-size: 13px; }
.alerts-card .cmd-line { margin: 8px 0 0; }
.alerts-card-side { grid-area: side; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.alerts-card.off .alerts-card-name a, .alerts-card.off .alerts-card-lines { color: var(--slate); }
@media (max-width: 719px) {
  .alerts-card-side .btn { flex: 1 1 auto; }
}
@media (min-width: 720px) {
  .alerts-card {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    grid-template-areas: "mark main side";
    gap: 0 16px;
  }
  .alerts-card-side { flex-direction: column; align-items: stretch; margin-top: 0; }
  .alerts-card-side .badge { align-self: flex-end; }
}

/* A fold: "Reminders off (2)", Customers and vendors, Earlier alerts. The summary is a whole line
   to tap, with a chevron that turns when it opens. */
.alerts-fold > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 4px 0;
  color: var(--slate);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.alerts-fold > summary::-webkit-details-marker { display: none; }
.alerts-fold > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 3px 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.alerts-fold[open] > summary::before { margin-top: -4px; transform: rotate(45deg); }
.alerts-fold > summary:hover { color: var(--ink); }
.alerts-fold > summary:focus-visible { outline-offset: 2px; }
.alerts-quiet { margin: 4px 0 0; }
.alerts-quiet > .alerts-list { margin-top: 4px; }

.alerts-day { margin: 20px 0 8px; color: var(--slate); font-size: 14px; }
.alerts-day:first-child { margin-top: 0; }
.alerts-more { margin-top: 16px; }
.alerts-end { margin: 16px 0 0; color: var(--slate); font-size: 14px; }
@media (max-width: 719px) { .alerts-more .btn { width: 100%; } }

/* The alert just saved, marked once. */
@keyframes alerts-flash { from { background: var(--accent-tint); } to { background: transparent; } }
.alerts-flash { animation: alerts-flash 2.4s ease-out both; }

/* ------------------------------------------------------------------ Live now */
.alerts-live-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .alerts-live-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } }
.alerts-live { min-width: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
@media (min-width: 720px) { .alerts-live:has(> .alerts-who[open]) { grid-column: 1 / -1; } }
.alerts-live-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px;
  padding: 10px 14px; background: var(--sw-3); color: #FFFFFF;
}
.alerts-live.sw-0 .alerts-live-head { background: var(--sw-0); }
.alerts-live.sw-1 .alerts-live-head { background: var(--sw-1); }
.alerts-live.sw-pe .alerts-live-head { background: var(--sw-pe); }
.alerts-live-name { margin: 0; color: #FFFFFF; font-size: 17px; font-weight: 700; }
.alerts-live-read { margin: 0; color: #FFFFFF; font-size: 13px; font-weight: 600; opacity: 0.92; font-variant-numeric: tabular-nums; }
.alerts-live-bad { padding: 1px 6px; border-radius: 4px; background: var(--bad-fill); color: #FFFFFF; }
.alerts-live-body { padding: 12px 14px 4px; }
.alerts-live-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin: 0; }
.alerts-live-n { color: var(--ink); font-size: 40px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.alerts-live-unit { color: var(--slate); font-size: 15px; font-weight: 700; }
.alerts-live-big.is-old .alerts-live-n { color: var(--slate); font-size: 22px; }
.alerts-live-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.alerts-live-figs > div { min-width: 0; padding: 8px 10px; border-radius: 4px; background: var(--hover); }
.alerts-live-figs dt { color: var(--slate); font-size: 12px; font-weight: 700; }
.alerts-live-figs dd { margin: 2px 0 0; color: var(--ink); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.alerts-live-word { color: var(--slate); font-size: 14px; font-weight: 600; }
.alerts-live-of { color: var(--slate); font-size: 13px; font-weight: 600; }
.alerts-live-note { margin: 10px 0 8px; color: var(--slate); font-size: 13px; }
.alerts-live-off { margin: 4px 0 12px; color: var(--slate); }
.alerts-live-problem {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 8px 10px;
  border: 1px solid var(--bad-edge, var(--bad)); border-radius: 6px; background: var(--bad-pale); color: var(--bad); font-size: 14px; font-weight: 700;
}
.alerts-live-problem .glyph { flex: none; margin-top: 2px; }
@media (max-width: 480px) {
  .alerts-live-figs > div { padding: 8px; }
  .alerts-live-figs dd { font-size: 15px; }
}
@media (max-width: 380px) {
  .alerts-live-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alerts-live-n { font-size: 36px; }
}

/* Customers and vendors, under each card: Find, then the busiest of each in a small table. */
.alerts-who { padding: 0 14px; border-top: 1px solid var(--rule); }
.alerts-who > summary { color: var(--ink); }
.alerts-who-count { margin-left: 4px; color: var(--slate); font-size: 14px; font-weight: 600; white-space: nowrap; }
.alerts-who-body { padding: 0 0 14px; }
.alerts-who-find { display: block; max-width: 26em; }
.alerts-who-find input { width: 100%; }
.alerts-who-hint { margin: 6px 0 10px; color: var(--slate); font-size: 13px; }
.alerts-who-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 960px) { .alerts-who-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.alerts-who-part { min-width: 0; }
.alerts-who-title { margin: 0 0 6px; font-weight: 700; }
.alerts-who-of { color: var(--slate); font-size: 13px; font-weight: 600; }
.alerts-who-table { width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.alerts-who-table th, .alerts-who-table td { padding-top: 6px; padding-bottom: 6px; }
.alerts-who-table .num { text-align: right; white-space: nowrap; }
.alerts-who-name { max-width: 16em; font-weight: 700; text-align: left; overflow-wrap: anywhere; }
.alerts-who-trying { color: var(--slate); font-size: 12px; }
.alerts-who-none { margin: 6px 0 0; color: var(--slate); font-size: 14px; }

/* ---------------------------------------------------------------- Your alerts */
/* Each alert: its kind and name, then what it watches, where, when, and its figure now with Fine
   or Alerting; its switch, Edit and Delete beside it from 720 px, under it on phones. */
.alerts-rs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.alerts-r {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; padding: 14px 12px;
  border-bottom: 1px solid var(--rule);
}
.alerts-r.is-alerting { background: var(--bad-fill-pale, var(--bad-pale)); }
@media (min-width: 720px) { .alerts-r { grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding-right: 8px; } }
.alerts-r-main { min-width: 0; }
.alerts-r-name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.alerts-r-kind {
  display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 4px; background: var(--ink); color: var(--paper);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; vertical-align: 2px;
}
.alerts-r.is-off .alerts-r-kind, .alerts-r.is-off .alerts-r-title { opacity: 0.6; }
.alerts-r-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 8px 0 0; }
.alerts-r-facts > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 8px; align-items: baseline; }
.alerts-r-facts dt { color: var(--slate); font-size: 13px; font-weight: 700; }
.alerts-r-facts dd { min-width: 0; margin: 0; font-size: 15px; overflow-wrap: anywhere; }
@media (min-width: 1200px) {
  .alerts-r-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 24px; }
  .alerts-r-facts > div { display: block; }
  .alerts-r-facts dd { margin-top: 1px; }
  .alerts-r-facts > .alerts-r-nowrow { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
}
.alerts-r-now { color: var(--ink); }
.alerts-r-text { max-width: 46em; margin: 6px 0 0; color: var(--slate); font-size: 14px; }
.alerts-r-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@media (max-width: 719px) { .alerts-r-side .btn { flex: 1 1 0; } }
.alerts-sub { margin: 20px 0 8px; font-size: 15px; font-weight: 700; color: var(--slate); }
.alerts-r-built { background: none; }

/* The on/off switch: a slide switch with square-ish corners, like one on a rack. The real
   checkbox covers the whole label, so the label is the tap target and the focus ring goes on
   the switch. Settings, Alert checks uses it too. */
.alerts-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.alerts-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.alerts-switch input:disabled { cursor: progress; }
.alerts-switch-ui {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: 7px;
  background: var(--rule-strong);
  transition: background-color 120ms ease;
}
.alerts-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #FFFFFF;
  transition: transform 120ms ease;
}
.alerts-switch input:checked + .alerts-switch-ui { background: var(--accent-fill); }
.alerts-switch input:checked + .alerts-switch-ui::after { background: var(--on-accent); }
.alerts-switch input:checked + .alerts-switch-ui::after { transform: translateX(18px); }
.alerts-switch input:focus-visible + .alerts-switch-ui { outline: 2px solid var(--accent); outline-offset: 2px; }
.alerts-switch input:disabled + .alerts-switch-ui { opacity: 0.6; }
.alerts-switch-text { color: var(--ink); }
:root[data-theme="dark"] .alerts-switch input:checked + .alerts-switch-ui::after { background: #0B0E12; }

/* ------------------------------------------------------------------ Add alert */
/* A native modal dialog of its own: about 880 px wide on a computer, held near the top; on a
   phone a sheet the full width and height of the screen. The head, the form (the only part that
   scrolls) and the row of Cancel and Save. From 960 px the summary sits beside the steps and
   stays in sight. */
.alerts-dlg {
  --alerts-dlg-top: min(6vh, 56px);
  width: min(880px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - var(--alerts-dlg-top) - 24px);
  max-height: calc(100dvh - var(--alerts-dlg-top) - 24px);
  margin: var(--alerts-dlg-top) auto auto;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
}
.alerts-dlg[open] { display: flex; flex-direction: column; }
.alerts-dlg-form { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; }
.alerts-dlg-head {
  display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 24px; border-bottom: 1px solid var(--rule); background: var(--paper);
}
.alerts-dlg-head h2 { margin: 0; font-size: 20px; }
.alerts-dlg-x {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 6px; background: none; color: var(--slate);
}
.alerts-dlg-x:hover { background: var(--hover); color: var(--ink); }
.alerts-dlg-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.alerts-dlg-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 28px; padding: 20px 24px 8px; }
@media (min-width: 960px) {
  .alerts-dlg-body { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .alerts-dlg-sum { position: sticky; top: 0; }
}
.alerts-dlg-steps { min-width: 0; }
.alerts-dlg-step { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.alerts-dlg-step.has-error { padding: 10px 12px; border: 1px solid var(--bad); border-radius: 6px; background: var(--bad-pale); }
.alerts-dlg-legend { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0; color: var(--ink); font-size: 16px; font-weight: 700; }
.alerts-dlg-n {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700;
}
.alerts-dlg-error { margin: 0 0 8px; }
.alerts-dlg-wait { margin: 0; color: var(--slate); }
.alerts-dlg-under { margin: 6px 0 0; }

/* 1: the four choices, as big tiles: two by two on a phone, four in a row from 720 px. */
.alerts-dlg-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .alerts-dlg-types { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.alerts-dlg-type {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px;
  padding: 10px 12px 10px 14px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper); cursor: pointer;
}
.alerts-dlg-type input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.alerts-dlg-type:hover { background: var(--hover); }
.alerts-dlg-type-name { color: var(--ink); font-weight: 700; line-height: 1.25; }
.alerts-dlg-type-sub { color: var(--slate); font-size: 13px; line-height: 1.3; }
.alerts-dlg-type-tick { position: absolute; top: 6px; right: 6px; display: none; color: var(--on-accent); }
.alerts-dlg-type.is-on, .alerts-dlg-type:has(input:checked) { border-color: var(--accent-fill); background: var(--accent-fill); }
.alerts-dlg-type.is-on .alerts-dlg-type-name, .alerts-dlg-type:has(input:checked) .alerts-dlg-type-name,
.alerts-dlg-type.is-on .alerts-dlg-type-sub, .alerts-dlg-type:has(input:checked) .alerts-dlg-type-sub { color: var(--on-accent); }
.alerts-dlg-type.is-on .alerts-dlg-type-tick, .alerts-dlg-type:has(input:checked) .alerts-dlg-type-tick { display: block; }
:root[data-theme="dark"] .alerts-dlg-type:has(input:checked) :is(.alerts-dlg-type-name, .alerts-dlg-type-sub, .alerts-dlg-type-tick) { color: #0B0E12; }
.alerts-dlg-type:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 2: the level, as a sentence with its boxes in it. */
.alerts-dlg-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.alerts-dlg-sentence label { font-weight: 400; margin: 0; }
.alerts-dlg-box { display: inline-flex; }
.alerts-dlg-num { width: 6.5em; text-align: right; font-variant-numeric: tabular-nums; }
.alerts-dlg-num.short { width: 5em; }
.alerts-dlg-num.wide { width: 8em; }
.alerts-dlg-dir { width: auto; min-width: 7em; }
.alerts-dlg-now-hint { margin: 8px 0 0; }

/* 3: the switches as tiles, each name in its switch's colour, then the customers and the vendors. */
.alerts-dlg-switches { display: flex; flex-wrap: wrap; gap: 8px; }
.alerts-dlg-sw {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
  padding: 8px 12px 8px 10px; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: var(--paper); cursor: pointer;
}
.alerts-dlg-sw.sw-0 .alerts-dlg-sw-name { color: var(--sw-0); }
.alerts-dlg-sw.sw-1 .alerts-dlg-sw-name { color: var(--sw-1); }
.alerts-dlg-sw.sw-pe .alerts-dlg-sw-name { color: var(--sw-pe); }
:root[data-theme="dark"] .alerts-dlg-sw .alerts-dlg-sw-name { color: var(--ink); }
.alerts-dlg-sw input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.alerts-dlg-sw:hover { background: var(--hover); }
.alerts-dlg-sw.is-on, .alerts-dlg-sw:has(input:checked) { background: var(--accent-tint); border-color: var(--accent); }
.alerts-dlg-sw-name { font-weight: 700; }
.alerts-dlg-sw-now { color: var(--slate); font-size: 13px; font-variant-numeric: tabular-nums; }
.alerts-dlg-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 8px 12px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--hover); color: var(--ink); font-size: 14px;
}
.alerts-dlg-note.warn { border-color: var(--warn-edge, var(--warn)); background: var(--warn-pale); color: var(--warn-text); }
.alerts-dlg-note .glyph { flex: none; margin-top: 2px; }
.alerts-dlg-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 14px 0 0; }
@media (min-width: 720px) { .alerts-dlg-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.alerts-dlg-list { min-width: 0; }
.alerts-dlg-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.alerts-dlg-list-title { margin: 0; font-weight: 700; }
.alerts-dlg-list-count { margin: 0; color: var(--slate); font-size: 13px; font-weight: 700; }
.alerts-dlg-find { display: block; width: 100%; margin: 0 0 8px; }
.alerts-dlg-group + .alerts-dlg-group { margin-top: 10px; }
.alerts-dlg-group-name { margin: 0 0 4px; color: var(--sw-3); font-size: 13px; font-weight: 700; }
.alerts-dlg-group-name.sw-0 { color: var(--sw-0); }
.alerts-dlg-group-name.sw-1 { color: var(--sw-1); }
.alerts-dlg-group-name.sw-pe { color: var(--sw-pe); }
:root[data-theme="dark"] .alerts-dlg-group-name { color: var(--ink); }
.alerts-dlg-rows { max-height: min(300px, 40vh); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.alerts-dlg-row {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 10px;
  border-bottom: 1px solid var(--rule); cursor: pointer;
}
.alerts-dlg-row:last-child { border-bottom: 0; }
.alerts-dlg-row input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.alerts-dlg-row:hover { background: var(--hover); }
.alerts-dlg-row.is-on, .alerts-dlg-row:has(input:checked) { background: var(--accent-tint); }
.alerts-dlg-row-name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.alerts-dlg-row-now { flex: none; color: var(--slate); font-size: 13px; font-variant-numeric: tabular-nums; }
.alerts-dlg-none { margin: 0; padding: 10px 0; color: var(--slate); font-size: 14px; }
.alerts-dlg-more { margin: 6px 0 0; }
.alerts-dlg-whole { margin: 12px 0 0; color: var(--ink); font-size: 14px; font-weight: 700; }

/* 4: when. */
.alerts-dlg-when { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.alerts-dlg-times { margin: 0 0 8px; padding: 0; list-style: none; }
.alerts-dlg-time {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; margin: 0 0 8px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
}
.alerts-dlg-time.has-error { border-color: var(--bad); }
.alerts-dlg-time select { width: auto; min-width: 6.5em; }
.alerts-dlg-time-word { margin: 0; font-weight: 700; }
.alerts-dlg-time-mine { flex-basis: 100%; color: var(--slate); font-size: 13px; }
@media (min-width: 720px) { .alerts-dlg-time-mine { flex-basis: auto; margin-left: auto; } }
.alerts-dlg-add-time { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.alerts-dlg-add-time .hint { margin: 0; }

/* 5: how you are told. */
.alerts-dlg-tg { margin: 0; }
.alerts-dlg-name { margin: 14px 0 0; }
.alerts-dlg-name input { max-width: 30em; }
.alerts-dlg-more-fold { margin: 6px 0 0; }

/* 6: what will happen, and what each thing it watches is at now. */
.alerts-dlg-sum { padding: 14px 16px; border: 1px solid var(--accent-edge, var(--accent)); border-radius: 6px; background: var(--accent-tint); }
.alerts-dlg-sum.is-wait { border-color: var(--rule); background: var(--hover); }
.alerts-dlg-sum-text p { margin: 6px 0 0; color: var(--ink); font-size: 14px; }
.alerts-dlg-sum-text .alerts-dlg-sum-lead { margin-top: 0; font-size: 15px; font-weight: 700; }
.alerts-dlg-sum.is-wait .alerts-dlg-sum-lead { color: var(--slate); font-weight: 400; }
.alerts-dlg-nowbox { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.alerts-dlg-now-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--slate); }
.alerts-dlg-now { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.alerts-dlg-now li { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; }
.alerts-dlg-now li.bad { color: var(--bad); font-weight: 700; }
.alerts-dlg-now li.ok { color: var(--ok); }
.alerts-dlg-now li.off { color: var(--slate); }
.alerts-dlg-now .lamp { flex: none; transform: translateY(1px); }

/* Cancel and Save, always in sight under the form, with what is missing beside them. */
.alerts-dlg-foot {
  display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px;
  padding: 12px 24px; border-top: 1px solid var(--rule); background: var(--paper);
}
.alerts-dlg-problem { flex: 1 1 16em; min-width: 0; margin: 0; color: var(--bad); font-size: 14px; font-weight: 700; }
.alerts-dlg-problem:empty { display: none; }
.alerts-dlg-acts { display: flex; gap: 8px; }
.alerts-dlg-acts .btn { min-width: 112px; }
.alerts-dlg-old { margin: 0 0 16px; }

@media (max-width: 719px) {
  .alerts-dlg {
    width: 100%; max-width: 100%;
    height: calc(100vh - 8px); height: calc(100dvh - 8px);
    max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px);
    margin: auto 0 0; border-width: 1px 0 0; border-radius: 12px 12px 0 0;
  }
  .alerts-dlg-head { padding: 6px 6px 6px 16px; }
  .alerts-dlg-body { padding: 16px 16px 4px; }
  .alerts-dlg-step { margin-bottom: 20px; }
  .alerts-dlg-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .alerts-dlg-acts { width: 100%; }
  .alerts-dlg-acts .btn { flex: 1 1 0; min-width: 0; }
  .alerts-dlg-sw { flex: 1 1 100%; }
}