/* TN Mail screens. The TN Media brand: cream ground, ink, one sky accent kept for dark surfaces. */

@font-face {
  font-family: "Archivo Black";
  src: url("/fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #FAF8F3;
  --ink: #0B0B0B;
  --text: #141414;
  --muted: #5A5A55;
  --rule: #E4E0D6;
  --rule-soft: #F0EDE5;
  --soft: #F2EFE7;
  --white: #FFFFFF;
  --paper: #F5F5F0;
  --sky: #91DDF1;
  --link: #08718E;
  --link-dark: #05566C;
  --field: #8A8A85;
  --warn-bg: #FBE3D0;
  --warn-ink: #7A3300;
  --sky-bg: #D5F0F8;
  --neutral-bg: #ECE9E1;
  --neutral-ink: #3A3A36;
  --display: "Archivo Black", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-dark); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* One focus ring everywhere: blue on light ground, sky on dark. */
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--sky); }
h1:focus, #pv-title:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--sky); color: var(--ink); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 8px; }

.boot { padding: 48px var(--gutter); color: var(--muted); }

/* ------------------------------------------------------------------ top bar */

.bar { background: var(--ink); color: var(--paper); }
.bar__in {
  max-width: 1120px; margin: 0 auto; padding: 12px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
}
.bar--wide .bar__in { max-width: 1280px; }
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--display); font-size: 20px; color: var(--paper); text-decoration: none;
}
.wordmark:hover { color: var(--paper); }
.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  color: var(--paper); font-size: 14px; font-weight: 600; text-decoration: none;
}
.nav a:hover { background: #262624; color: var(--paper); }
.nav a[aria-current="page"] { background: var(--paper); color: var(--ink); }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: #C9C9C2; min-width: 0; }
.who span { overflow-wrap: anywhere; min-width: 0; }

/* ------------------------------------------------------------------ page frame */

.wrap {
  max-width: 1120px; margin: 0 auto; padding: 40px var(--gutter) 64px;
  display: flex; flex-direction: column; gap: 28px;
}
.wrap--wide { max-width: 1280px; }
.wrap--narrow { max-width: 520px; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head > div { min-width: 0; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.h1 {
  font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1;
  text-transform: uppercase; overflow-wrap: anywhere;
}
.h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.h3 { font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.lead { font-size: 15px; color: var(--muted); max-width: 70ch; }
.back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; font-size: 15px; color: var(--muted); }

.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--lg { gap: 28px; }
.stack--sm { gap: 6px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.row--between { justify-content: space-between; }
.row--end { align-items: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border: 1px solid var(--text); border-radius: 999px;
  background: transparent; color: var(--text);
  font-family: var(--body); font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
}
.btn:hover { background: var(--neutral-bg); color: var(--text); }
.btn--primary {
  min-height: 48px; padding: 0 24px; border-color: var(--ink); background: var(--ink); color: var(--paper);
  letter-spacing: .06em; text-transform: uppercase;
}
.btn--primary:hover { background: #2A2A27; color: var(--paper); }
.btn--sky { min-height: 48px; padding: 0 24px; border-color: var(--sky); background: var(--sky); color: var(--ink); font-weight: 700; }
.btn--sky:hover { background: #B4E9F6; color: var(--ink); }
.btn--on-dark { border-color: var(--field); color: var(--paper); }
.btn--on-dark:hover { background: #262624; color: var(--paper); }
.btn--plain { border-color: transparent; padding: 0 4px; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.btn--plain:hover { background: transparent; color: var(--link-dark); }
.btn--icon { width: 44px; padding: 0; border-color: var(--rule); background: var(--white); }
.btn--icon:hover { border-color: var(--text); background: var(--white); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; }
.btn--icon:disabled { opacity: .35; }
.btn--icon:disabled:hover { border-color: var(--rule); }

/* A group of choices where one is on (filters, the desktop or phone preview). */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------ cards and panels */

.card { border: 1px solid var(--rule); border-radius: 16px; background: var(--white); }
.card--pad { padding: 22px 24px; }
.panel-soft { padding: 28px; border-radius: 20px; background: var(--soft); }
.panel-dark { padding: 28px; border-radius: 20px; background: var(--ink); color: var(--paper); }
.panel-dark .eyebrow { color: var(--sky); }
.panel-dark p { color: #D6D6CF; }
.panel-dark strong { color: var(--paper); }
.panel-dark a:not(.btn) { color: var(--sky); }

.notice { padding: 18px 22px; border-radius: 16px; font-size: 15px; }
.notice--dark { background: var(--ink); color: var(--paper); }
.notice--warn { background: var(--warn-bg); color: var(--warn-ink); }
.notice--soft { background: var(--soft); color: var(--text); }
.notice--warn a { color: var(--warn-ink); }
.notice strong { font-weight: 700; }
.notice ul { margin-top: 8px; padding-left: 20px; list-style: disc; }
.notice li + li { margin-top: 4px; }
.notice__close { margin-top: 12px; }
.notice .skipped { padding-left: 32px; }

.empty { padding: 36px 24px; border: 1px dashed #C9C5BA; border-radius: 16px; text-align: center; color: var(--muted); }
.empty strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 18px; }

/* ------------------------------------------------------------------ pills */

.pill {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 999px; white-space: nowrap;
  background: var(--neutral-bg); color: var(--neutral-ink); font-size: 13px; font-weight: 600;
}
.pill--small { min-height: 26px; padding: 0 10px; font-size: 12px; }
.pill--neutral { background: var(--neutral-bg); color: var(--neutral-ink); }
.pill--warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill--sky { background: var(--sky-bg); color: var(--link-dark); }
.pill--ink { background: var(--ink); color: var(--paper); }
.pill--outline { background: var(--white); border-color: var(--field); color: var(--neutral-ink); }
.pill--queued { background: var(--white); border-color: #C9C5BA; color: var(--neutral-ink); }

/* ------------------------------------------------------------------ forms */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 14px; font-weight: 600; }
.field .help, .help { font-size: 14px; color: var(--muted); }
.field .err, .err { font-size: 14px; font-weight: 600; color: var(--warn-ink); }
.optional { font-weight: 400; color: var(--muted); }

.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--field); border-radius: 12px; background: var(--white); color: var(--text);
  font-family: var(--body); font-size: 16px;
}
.textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 120px; }
.textarea--code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; white-space: pre; overflow: auto; }
.select { appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--warn-ink); border-width: 2px; }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--soft); }

.file { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.file input[type="file"] { max-width: 100%; min-height: 44px; font-size: 14px; }
.file input[type="file"]::file-selector-button {
  min-height: 44px; margin-right: 12px; padding: 0 18px; border: 1px solid var(--text); border-radius: 999px;
  background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}

/* Choice cards (the kind of a new list). The radio stays a real radio. */
.choices { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.choices legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.choice {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border: 2px solid var(--rule); border-radius: 14px; background: var(--cream); cursor: pointer;
}
/* The script marks the chosen card with .is-on, so this does not depend on newer CSS selectors. */
.choice.is-on { border-color: var(--ink); background: var(--white); }
.choice:focus-within { outline: 3px solid var(--link); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.choice strong { display: block; font-size: 16px; }
.choice span span { display: block; font-size: 14px; color: var(--muted); }

.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); flex: none; }

/* ------------------------------------------------------------------ sign in */

.signin { max-width: 440px; margin: 0 auto; padding: 56px var(--gutter) 64px; display: flex; flex-direction: column; gap: 24px; }
.signin form { display: flex; flex-direction: column; gap: 16px; padding: 28px; }

/* ------------------------------------------------------------------ campaigns list */

.approve-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.approve-card__text { flex: 1 1 420px; min-width: 0; }
.approve-card__text .eyebrow { margin-bottom: 8px; font-size: 12px; }
.approve-card__title { margin-bottom: 8px; font-size: 24px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.approve-card__text p { max-width: 60ch; font-size: 15px; }
.approve-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.camp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 24px; }
.camp__main { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.camp__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.camp__line { font-size: 15px; color: var(--muted); }
.camp__side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.camp__bar { max-width: 360px; margin-top: 4px; }

.progress { height: 8px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; }
.progress > div { height: 100%; border-radius: 999px; background: var(--ink); }
.progress--dark { background: #3A3A36; }
.progress--dark > div { background: var(--sky); }

.rules { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 16px; }
.rules li { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; }
.rules strong { font-size: 16px; }
.rules span { font-size: 15px; color: var(--muted); }
.panel-dark .rules span { color: #D6D6CF; }

/* ------------------------------------------------------------------ editor */

.editor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.editor__form { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.editor__preview { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* From this width the form and the preview fit side by side (520 + 32 + 480, plus the page gutters). */
@media (min-width: 1100px) {
  .editor__preview { position: sticky; top: 16px; flex: 0 0 480px; }
}

.save-state { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; font-weight: 600; color: var(--muted); }
.save-state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted); background: var(--muted); }
.save-state[data-state="saving"]::before { background: transparent; }
.save-state[data-state="error"] { color: var(--warn-ink); }
.save-state[data-state="error"]::before { border-color: var(--warn-ink); background: transparent; border-radius: 2px; }

.blocks { display: flex; flex-direction: column; gap: 12px; }
.block { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.block__name { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.block__name strong { color: var(--text); }
.block__tools { display: flex; gap: 6px; }
.block__rule { height: 1px; border: 0; margin: 4px 0; background: var(--rule); }

.photo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.photo__thumb {
  flex: 0 0 160px; width: 160px; min-height: 100px; border: 1px solid var(--rule); border-radius: 12px; background: var(--soft);
  display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 13px; color: var(--muted); text-align: center; padding: 0;
}
.photo__thumb--has { min-height: 0; }
.photo__thumb img { display: block; width: 100%; height: auto; }
.photo__thumb span { padding: 12px; }
.photo__fields { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* A link card: the page link with "Fill in from the page" beside it (under it on a phone). */
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.link-row .input { flex: 1 1 260px; width: auto; min-width: 0; }
.link-row .btn { flex: 0 0 auto; min-height: 48px; }
.textarea--short { min-height: 96px; }
/* A card's picture is always 16:9, so its thumbnail keeps that room before the picture has loaded. */
.block[data-type="card"] .photo__thumb--has { aspect-ratio: 16 / 9; }
.block[data-type="card"] .photo__thumb--has img { height: 100%; object-fit: cover; }
/* What "Fill in from the page" did: said like the "Test sent" note, so it is not mistaken for the help line. */
.field .help--note { font-weight: 600; color: var(--link-dark); }
/* What the page gives, quoted in the "replace what you typed?" question. */
.quote { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--soft); font-size: 15px; overflow-wrap: anywhere; }

.add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 18px; border: 1px dashed #C9C5BA; border-radius: 16px; }
.add-row .label { flex: 1 1 100%; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--rule); }
.actions__note { font-size: 14px; font-weight: 600; color: var(--link-dark); }

/* Sending switched off: the notice on the Campaigns page, and the short line that stands where Start
   campaign or Carry on would be. Quiet on purpose: nothing is wrong, it is how the tool is set. */
.notice--off { border: 1px solid var(--rule); }
.off-line { font-size: 14px; font-weight: 600; color: var(--muted); }
.actions .off-line { flex: 1 1 240px; min-width: 0; }
.approve-card__text .off-line { margin-top: 10px; color: var(--paper); }

.pv-card { border: 1px solid var(--rule); border-radius: 20px; background: var(--white); overflow: hidden; }
.pv-head { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--muted); }
.pv-head strong { color: var(--text); }
.pv-subject { margin-top: 4px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.pv-box { position: relative; overflow: hidden; background: var(--paper); height: 560px; }
.pv-frame { display: block; border: 0; background: var(--white); transform-origin: 0 0; }
.pv-foot { padding: 14px 22px; background: var(--soft); font-size: 13px; color: var(--muted); }
.pv-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: var(--paper); color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------------------ results */

.stats { display: flex; flex-wrap: wrap; gap: 12px; }
.stat { flex: 1 1 130px; padding: 22px 24px; border: 1px solid var(--rule); border-radius: 18px; background: var(--white); min-width: 0; }
.stat__num { font-family: var(--display); font-size: 36px; line-height: 1; }
.stat__label { margin-top: 8px; font-size: 14px; font-weight: 600; }
.stat--main { flex: 2 1 240px; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.stat--main .stat__num { font-size: 44px; color: var(--sky); }
.stat--main .progress { margin-top: 12px; }

.table-box { border: 1px solid var(--rule); border-radius: 18px; background: var(--white); overflow: hidden; }
/* position: relative keeps the hidden (screen reader only) labels inside the scrolling box. Without it
   they sit out at the table's full width and make the whole page scroll sideways on a phone. */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 15px; }
.table th {
  padding: 14px 16px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 22px; }
.table th:last-child, .table td:last-child { padding-right: 22px; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .sub { display: block; font-size: 13px; color: var(--muted); }
/* A floor under the name column, so a narrow screen scrolls the table sideways instead of breaking names letter by letter. */
.table .who-cell { min-width: 220px; max-width: 340px; }
.table .note-cell { min-width: 220px; }
.table .btn { min-height: 44px; padding: 0 14px; white-space: nowrap; }
.table .tools { display: flex; gap: 8px; justify-content: flex-end; }
.table .nowrap { white-space: nowrap; }
.table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 22px; font-size: 14px; color: var(--muted); }
.type-flag { font-weight: 600; color: var(--warn-ink); }

.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; }
.toolbar .field { flex: 0 1 300px; }

/* ------------------------------------------------------------------ contacts */

.lists { display: flex; flex-wrap: wrap; gap: 12px; }
.list-card { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; color: var(--text); text-decoration: none; min-width: 0; }
.list-card__num { font-family: var(--display); font-size: 36px; line-height: 1; }
.list-card__name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.list-card__desc { font-size: 14px; color: var(--muted); }
.list-card__foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

.importer { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.mapping { display: flex; flex-wrap: wrap; gap: 12px; }
.mapping .field { flex: 1 1 180px; }
.skipped { max-height: 220px; overflow: auto; margin-top: 8px; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); font-size: 14px; }
.skipped li + li { margin-top: 6px; }

/* ------------------------------------------------------------------ dialog and toasts */

dialog.dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  border: 1px solid var(--rule); border-radius: 20px; background: var(--white); color: var(--text);
}
dialog.dialog::backdrop { background: rgba(11, 11, 11, .55); }
.dialog__in { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.dialog__title { font-size: 22px; font-weight: 700; line-height: 1.25; }
.dialog__title:focus { outline: none; }
.dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.toasts { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 8px 10px; max-width: min(560px, 100%);
  padding: 12px 14px 12px 20px; border-radius: 16px; background: var(--ink); color: var(--paper); font-size: 15px;
  box-shadow: 0 6px 24px rgba(11, 11, 11, .25);
}
.toast--error { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-ink); }
.toast p { flex: 1 1 auto; min-width: 0; }
.toast .btn { min-height: 44px; padding: 0 14px; border-color: var(--field); color: inherit; background: transparent; }
.toast--error .btn { border-color: var(--warn-ink); }

/* ------------------------------------------------------------------ phone */

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .wrap { padding-top: 28px; padding-bottom: 96px; gap: 24px; }
  .h1 { font-size: 30px; }
  .panel-soft, .panel-dark { padding: 22px 20px; }
  .card--pad, .camp { padding: 18px; }
  .approve-card__title { font-size: 20px; }
  .signin { padding-top: 32px; }
  .signin form { padding: 22px 18px; }
  .stat { padding: 18px; flex-basis: 120px; }
  .stat--main { flex-basis: 100%; }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn--primary { flex: 1 1 auto; }
  .camp__side { width: 100%; justify-content: space-between; }
  .importer { padding: 18px; }
  .dialog__in { padding: 22px 18px; }
  dialog.dialog { margin-top: 16px; }
  .block { padding: 14px; }
  .photo__thumb { flex-basis: 120px; width: 120px; }
  .link-row .btn { flex: 1 1 100%; }
  .actions .off-line { flex-basis: 100%; }
  .toolbar .field { flex: 1 1 100%; }
  .actions .btn { flex: 1 1 auto; }
  /* The note ("Test sent to ...") goes on a line of its own. While it is empty it takes no room, so the
     last button is as wide as the one above it. It stays on the page, so screen readers hear it fill in. */
  .actions__note { flex: 1 1 100%; }
  .actions__note:empty { margin-top: -12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav a, .choice { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
}

/* ------------------------------------------------------------------ small pieces */

/* A short list of facts: the label on the left, the value on the right (stacked on a phone). */
.facts { padding: 6px 22px; border: 1px solid var(--rule); border-radius: 16px; background: var(--white); }
.facts > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { padding-top: 3px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts dd { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .facts { padding: 4px 18px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); }
}

/* Shown only when the preview sits below the form instead of beside it. */
@media (min-width: 1100px) { .only-stacked { display: none; } }

main:focus { outline: none; }
.lead--below { margin-top: 12px; }
.toast .btn--icon-plain { width: 44px; padding: 0; border-color: transparent; }
.toast:not(.toast--error) :focus-visible { outline-color: var(--sky); }
.toast--error :focus-visible { outline-color: var(--warn-ink); }
.table--tight { min-width: 560px; }
.table--tight td { padding-top: 10px; padding-bottom: 10px; }