/* LoveBlossom notifications and emails (NEXT_PLAN.md f-1, f-2): the ask card on the closing
   screen and the round card (_alerts_ask.html), the flower page's row (_alerts_row.html), the
   Settings section (_alerts_settings.html), the email links' pages (notify_confirm.html) and
   /dev/outbox. Every class starts with .alerts-. Tokens and the shared components (card, btn,
   field, switch-row, sheet) come from app.css; sizes in rem, side padding capped like app.css,
   so large text scales everything without squeezing the words. No motion lives here. */

/* ---------------------------------------------------------- the ask card */
.alerts-ask {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  padding: 1.125rem min(1.125rem, 19px) .875rem;
  border-radius: var(--r-card);
  background: var(--sunken);
  text-align: center;
}
.alerts-ask__mark { display: inline-flex; color: var(--rose-text); --mark-accent: var(--honey); --mark-accent-o: .6; }
.alerts-ask__mark .mark { width: 2rem; height: 2rem; }
.alerts-ask__title { font-family: var(--font-story); font-weight: 600; font-size: 1.25rem; line-height: 1.25; max-width: 22rem; }
.alerts-ask__sub { max-width: 24rem; color: var(--muted); }
.alerts-ask__actions,
.alerts-ask__ask,
.alerts-ask__form,
.alerts-ask__sent { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.alerts-ask__actions { margin-top: .125rem; }
.alerts-ask__field { align-self: stretch; display: flex; flex-direction: column; gap: .375rem; text-align: left; }
/* On the card's sunken paper, the field and the quiet button sit on the card colour. */
.alerts-ask .input { background: var(--card); border-color: var(--hairline); }
.alerts-ask .input:focus { border-color: var(--rose); }
.alerts-ask .btn--secondary { background: var(--card); box-shadow: inset 0 0 0 var(--hair) var(--hairline); }
.alerts-ask .btn--secondary:active { background: var(--hairline); }
.alerts-ask__no { min-height: var(--tap); }
.alerts-ask__line { max-width: 24rem; font-weight: 700; line-height: 1.35; }
.alerts-ask__line:focus { outline: none; }
.alerts-ask__field.needs-attention { outline-offset: 6px; }
.alerts-ask .hint-error { align-self: stretch; }
/* Once it's on, a single line stays where the card was: the check above the words. */
.alerts-ask.is-done { padding-top: 1rem; padding-bottom: 1rem; }
.alerts-ask__done { display: flex; flex-direction: column; align-items: center; gap: .375rem; }
.alerts-ask__done > .mark { width: 1.75rem; height: 1.75rem; color: var(--leaf-text); }
/* The hub's sheet holds the same form on the sheet's own card colour, its buttons full width. */
.alerts-ask__form.alerts-sheet__form { align-items: stretch; gap: .75rem; }
.alerts-sheet__form .sheet__actions { align-self: stretch; }
/* At large text the close button takes its own row above a long title: every sheet does
   that now (app.css, .sheet__head). */

/* ------------------------------------------------- the flower page's row */
/* It sits in the flower page's calm list, so it keeps that list's row measures (garden.css
   .bond-row--setting: the same padding, mark, gap and button), and reads as one of them. */
.alerts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .75rem;
  min-height: 3.5rem;
  padding: .625rem .375rem .625rem .875rem;
  border: var(--hair) solid var(--hairline);
  border-radius: var(--r-tile);
  background: var(--card);
  color: var(--ink);
}
.alerts-row__mark { flex: none; display: inline-flex; color: var(--kind-text); --mark-accent: var(--kind); --mark-accent-o: .45; }
.alerts-row__mark .mark { width: 1.5rem; height: 1.5rem; }
/* The words keep the room; the button drops under them only when large text needs it (a
   narrower basis than the list's 10rem, so "Send it again" still fits beside them). */
.alerts-row__words { flex: 1 1 8rem; min-width: 0; }
.alerts-row__text { font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.alerts-row__state { white-space: nowrap; }   /* "Sam: On", never "On" alone on the last line */
.alerts-row__text--quiet { font-weight: 500; color: var(--muted); }
.alerts-row__btn { flex: none; min-height: var(--tap); margin-left: auto; padding: 0 .625rem; }

/* ----------------------------------------------------------- Settings */
/* At the largest text the bell steps aside, so "Notifications" keeps its whole line (the card
   is a container; html.nocq-14-5 stands in on iOS 15). */
.alerts-settings { container-type: inline-size; }
@container (max-width: 10rem) { .alerts-settings .card__title > .mark { display: none; } }
html.nocq-14-5 .alerts-settings .card__title > .mark { display: none; }
.alerts-settings__words { display: flex; flex-direction: column; gap: .125rem; }
.alerts-settings__label { font-weight: 700; line-height: 1.3; }
.alerts-settings__email { overflow-wrap: anywhere; }   /* a long address never widens the page */
.alerts-settings__turn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 3.5rem; }
.alerts-settings__turn > .btn { margin-left: auto; }
.alerts-settings__quiet { border: 0; margin: 0; padding: 0; min-width: 0; }
.alerts-settings__quiet > legend { display: block; padding: 0; margin: 0 0 .5rem; }
.alerts-settings__hours { display: flex; flex-wrap: wrap; gap: .625rem; }
.alerts-settings__hour { flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; gap: .25rem; font-weight: 700; font-size: .9375rem; }
/* app.css draws selects without the system arrow: a chevron says these are choices. */
.alerts-select { position: relative; display: block; margin-top: .125rem; }
.alerts-select > select { padding-right: 2.75rem; cursor: pointer; }
.alerts-select::after {
  content: "";
  position: absolute;
  right: 1.125rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.alerts-settings__note { padding-top: .125rem; }

/* ------------------------------------------------- the email links' pages */
.alerts-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
  margin-top: .75rem;
  padding: 2rem min(1.25rem, 21px) 1.5rem;
  text-align: center;
}
.alerts-page__mark { display: inline-flex; color: var(--rose-text); --mark-accent: var(--honey); --mark-accent-o: .6; }
.alerts-page__mark .mark { width: 3rem; height: 3rem; }
.alerts-page__mark--done { color: var(--leaf-text); }
.alerts-page__title { font-size: 1.75rem; line-height: 1.15; max-width: 22rem; }
.alerts-page__lead { max-width: 24rem; color: var(--muted); }
.alerts-page__actions { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: .25rem; }

/* ------------------------------------------------------- /dev/outbox */
.alerts-outbox { gap: 1rem; }
.alerts-outbox__run { align-items: flex-start; }
.alerts-outbox__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .125rem .75rem; margin: 0; font-size: .875rem; }
.alerts-outbox__meta dt { font-weight: 700; color: var(--muted); }
.alerts-outbox__meta dd { margin: 0; overflow-wrap: anywhere; }
.alerts-outbox__frame { display: block; width: 100%; height: 32rem; border: var(--hair) solid var(--hairline); border-radius: var(--r-tile); background: var(--paper); }
.alerts-outbox__text summary { font-weight: 700; cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
.alerts-outbox__text pre { margin: 0; padding: .75rem; border-radius: 12px; background: var(--sunken); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; }
.alerts-outbox__push { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem; border: var(--hair) solid var(--hairline); border-radius: var(--r-tile); background: var(--card); box-shadow: var(--e1); }
.alerts-outbox__push-title { font-weight: 700; }