/* Notes and alerts. Pick by job, not by colour:
   .callout              a sentence of context ("Times are server time"). Quiet, gold icon.
   .alert[data-kind]     something the visitor must know now: info | success | warning | danger.
   .alert-spam           the bold red "check your spam folder" box after a mail is sent,
                         with a resend button on a 60 s cooldown (spamNotice() in js/lib/ui.js).
   .form-submit-status   the reply under a form after submit; JS toggles .is-visible + status-*.
   No coloured side stripes: state shows in the icon, the tint and the words. */

.callout {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  color: var(--text-2);
  font-size: var(--fs-sm);
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.callout .icon { color: var(--accent); margin-top: 0.2em; }
/* The box runs to its column's edges like the windows around it; the sentence keeps a reading measure. */
.callout > span { max-width: 78ch; }
.callout-quiet { margin-top: 0; }

.alert {
  --alert-fg: var(--info);
  --alert-bg: var(--info-bg);
  --alert-line: rgb(169 193 232 / 0.4);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  color: var(--text);
  font-size: var(--fs-sm);
  background: var(--alert-bg);
  border: 1px solid var(--alert-line);
  border-radius: var(--r-3);
}
.alert > .icon { color: var(--alert-fg); margin-top: 0.15em; width: 1.25em; height: 1.25em; }
.alert-title { display: block; font-weight: 600; font-size: var(--fs-base); color: var(--text); margin-bottom: 0.15rem; }
.alert[data-kind="success"] { --alert-fg: var(--ok); --alert-bg: var(--ok-bg); --alert-line: rgb(140 201 174 / 0.45); }
.alert[data-kind="warning"] { --alert-fg: var(--warn); --alert-bg: var(--warn-bg); --alert-line: var(--line-strong); }
.alert[data-kind="danger"] { --alert-fg: var(--danger); --alert-bg: var(--danger-bg); --alert-line: rgb(242 160 142 / 0.5); }

/* The spam-folder notice. Solid crimson so it cannot be skimmed past. Parchment on crimson: 6.9:1. */
.alert-spam {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  align-items: start;
  padding: var(--s-5);
  color: var(--text);
  background:
    linear-gradient(180deg, rgb(255 225 170 / 0.08), rgb(255 225 170 / 0) 40%),
    var(--crimson);
  border: 2px solid var(--crimson-hi);
  border-radius: var(--r-3);
  box-shadow: var(--edge), var(--e-2);
}
.alert-spam > .icon { width: 28px; height: 28px; color: var(--text); stroke-width: 1.8; grid-row: span 2; }
.alert-spam .alert-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.alert-spam p { font-size: var(--fs-base); }
.alert-spam strong { font-weight: 700; }
.alert-spam .alert-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.alert-spam .btn { --btn-fg: var(--text); --btn-border: rgb(243 237 224 / 0.7); --btn-bg: color-mix(in srgb, var(--ink-0) 18%, transparent); }
.alert-spam .btn:hover:not([disabled]) { --btn-bg: color-mix(in srgb, var(--ink-0) 32%, transparent); --btn-border: var(--text); --btn-fg: var(--text); }
.alert-spam .btn[disabled] { opacity: 0.75; }
.alert-spam .alert-wait { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .alert-spam { grid-template-columns: 1fr; }
  .alert-spam > .icon { grid-row: auto; }
  .alert-spam .alert-actions { grid-column: 1; }
  .alert-spam .btn { width: 100%; }
}

.form-submit-status {
  display: none;
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.form-submit-status.is-visible { display: block; }
.form-submit-status.status-pending { border-color: var(--line-strong); }
.form-submit-status.status-error { border-color: rgb(242 160 142 / 0.55); background: var(--danger-bg); }
.form-submit-status.status-success { border-color: rgb(140 201 174 / 0.5); background: var(--ok-bg); }