@layer modules {
  /* Sends: one approved template to many people on WhatsApp, drafted in four steps and followed as it goes. */
  .sends-back { margin: 0 0 .8rem; font-size: 1.35rem; }
  .sends-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap; }
  .sends-head .display { margin: 0; }
  .sends-head .sub { margin: .6rem 0 0; }
  .sends-standing { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; margin: 1.2rem 0 0; font-size: 1.35rem; color: var(--ink-2); }
  .sends-standing strong { color: var(--ink); font-weight: 600; }
  .sends-table { margin-top: 2.4rem; }
  /* The Messaging area: its tabs, every number with what it still needs, and a new send that asks the channel first. */
  .messaging-tabs { max-width: none; margin-top: 2rem; }
  .messaging-tabs + .pane-empty { margin-top: 1rem; }
  .place-name { display: flex; align-items: center; gap: 1rem; }
  .messaging-count { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-size: 1.15rem; font-weight: 600; }
  .lang { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .4rem .4rem 0; padding: .1rem .7rem; border: 1px solid var(--line); font-size: 1.2rem; }
  .lang b { font-weight: 600; letter-spacing: .02em; }
  .lang.is-approved { border-color: transparent; background: var(--ok-soft); color: var(--ok-ink); }
  .lang.is-pending, .lang.is-in_review, .lang.is-appeal_requested { border-color: transparent; background: var(--router-soft); color: var(--ink); }
  .lang.is-rejected, .lang.is-disabled { border-color: transparent; background: var(--error-soft); color: var(--error); }
  .lang.is-paused { border-color: transparent; background: var(--warning-soft); color: var(--warning); }
  .why { display: block; margin-top: .2rem; font-size: 1.25rem; color: var(--ink-2); }
  .why strong { font-weight: 600; color: var(--ink-2); }
  .numbers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(44rem, 100%), 1fr)); gap: 1.6rem; margin-top: 2.4rem; }
  .number-card { display: grid; gap: 1.4rem; align-content: start; padding: 2rem 2.2rem; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); }
  .number-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
  .number-card h2 { margin: 0; font-size: 2rem; font-weight: 400; }
  .number-card h2 small { display: block; margin-top: .2rem; font-size: 1.3rem; color: var(--ink-3); }
  .number-card header .scribble { flex: none; width: auto; height: 8rem; margin: -.8rem -.6rem -.4rem 0; }
  .checklist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
  .checklist li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; padding: 1.2rem 0; border-bottom: 1px solid var(--line); font-size: 1.4rem; }
  .checklist .tick { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.2rem; font-weight: 700; }
  .checklist .is-done .tick { color: var(--ok); }
  .checklist .tick .icon, .sec-head .mark .icon { width: 100%; height: 100%; }
  .checklist .is-next .tick { background: var(--primary); color: var(--on-accent); }
  .checklist .is-later .tick { border: 1px solid var(--line-strong); color: var(--ink-2); }
  .checklist li > span { display: grid; gap: .2rem; min-width: 0; }
  .checklist small { font-size: 1.25rem; color: var(--ink-3); overflow-wrap: anywhere; }
  .checklist .is-later strong { color: var(--ink-2); font-weight: 500; }
  .checklist a:not(.btn) { font-size: 1.3rem; white-space: nowrap; }
  .number-card a.go { display: inline-flex; align-items: center; gap: .4rem; color: var(--link); font-weight: 500; text-decoration: none; }
  .number-card a.go:hover { text-decoration: underline; text-decoration-color: currentColor; }
  .number-card a.go .icon { width: 1.4rem; height: 1.4rem; transition: translate .12s; }
  .number-card a.go:hover .icon { translate: .2rem 0; }
  .checklist-links { display: grid; gap: .4rem; justify-items: end; }
  .number-foot { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
  .number-foot:empty { display: none; }
  .number-card.is-next-number:not(:only-child) { background: transparent; border-style: dashed; }
  .send-channel { display: grid; gap: 1.6rem; max-width: 80rem; margin-top: 2.4rem; }
  .send-channel .channel-grid { margin: 0; }
  .send-numbers { display: grid; gap: .8rem; margin-top: 1rem; }
  .send-number { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: 1.35rem; cursor: pointer; }
  .send-number:has(:checked) { border-color: var(--focus); }
  .send-number span { display: grid; gap: .2rem; }
  .send-number small { font-size: 1.2rem; color: var(--ink-3); }
  /* A card is chosen by its own radio, not by the number or sender picked inside it. */
  .send-channel .channel-card:has(:checked) { border-color: var(--line); box-shadow: none; }
  .send-channel .channel-card:has(:checked) .start-tick { display: none; }
  .send-channel .channel-card:has(> input[name=channel]:checked) { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
  .send-channel .channel-card:has(> input[name=channel]:checked) .start-tick { display: block; }
  .send-channel .channel-card:not(:has(> input[name=channel]:checked)) .send-number:has(:checked) { border-color: var(--line-strong); }
  .send-channel-foot { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
  .send-channel-foot .hint { margin: 0; }

  /* Writing a template: the fields beside the WhatsApp preview, Meta's rules checked, and one action at the foot. */
  .tpl-back { margin-top: 1.6rem; }
  .tpl-change { max-width: 72rem; margin-top: 1.2rem; }
  .tpl { display: grid; grid-template-columns: minmax(0, 1fr) 36rem; gap: 3.2rem; align-items: start; margin-top: 1.2rem; padding-bottom: 9rem; }
  .tpl-form { display: grid; gap: 2.2rem; min-width: 0; }
  .tpl-field { display: grid; gap: .8rem; min-width: 0; margin: 0; padding: 0; border: 0; }
  .tpl-field > .label { margin: 0; padding: 0; }
  .tpl-short { max-width: 44rem; }
  .tpl-body { min-height: 11rem; font-size: 1.45rem; line-height: 1.6; resize: vertical; }
  .cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1rem; }
  .cat { display: grid; align-content: start; gap: .4rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: 1.35rem; cursor: pointer; }
  .cat:has(:checked) { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
  .cat:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .cat .scribble { width: calc(100% + 3.2rem); height: 9rem; margin: -1.4rem -1.6rem .6rem; background: color-mix(in srgb, var(--spot) 8%, transparent); }
  .cat strong { font-size: 1.5rem; }
  .cat span { color: var(--ink-2); }
  .cat small { font-size: 1.2rem; color: var(--ink-3); }
  .seg { display: inline-flex; flex-wrap: wrap; justify-self: start; border: 1px solid var(--line-strong); }
  .seg label { cursor: pointer; }
  .seg span { display: block; padding: .7rem 1.4rem; border-right: 1px solid var(--line); background: var(--surface); font-size: 1.35rem; }
  .seg label:last-child span { border-right: 0; }
  .seg label:has(:checked) span { background: var(--ink); color: var(--surface); font-weight: 600; }
  .seg label:has(:focus-visible) span { outline: 2px solid var(--focus); outline-offset: -2px; }
  .tpl-languages { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
  .tpl-language-tabs { margin: 0; }
  .samples { width: 100%; border-collapse: collapse; font-size: 1.35rem; }
  .samples:has(tbody:empty) { display: none; }
  .samples td { padding: .6rem 1rem .6rem 0; border-top: 1px solid var(--line); }
  .samples td:first-child { width: 30%; font-family: var(--mono); }
  .tpl-buttons { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
  .tpl-button { display: grid; grid-template-columns: 14rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
  .checks { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: 1.3rem; }
  .checks li { display: flex; gap: .8rem; align-items: flex-start; }
  .checks .icon { flex: none; width: 1.6rem; height: 1.6rem; margin-top: .1rem; }
  .checks .is-ok .icon { color: var(--ok); }
  .checks .is-bad .icon { color: var(--error); }
  .lang.is-draft { border-style: dashed; color: var(--ink-2); text-decoration: none; }
  .tpl-actions { width: 1%; white-space: nowrap; }
  .tpl-actions-row { display: flex; gap: .4rem; justify-content: flex-end; }
  @media (max-width: 1000px) { .tpl { grid-template-columns: minmax(0, 1fr); } .tpl-button { grid-template-columns: minmax(0, 1fr); } }

  /* Every number a team sends from, on one page, and what is left before the first. */
  .sends-places { display: grid; gap: 3.2rem; margin-top: 2.4rem; }
  .sends-places > .hint { margin: -2rem 0 0; }
  .sends-place h2 { margin: 0 0 .4rem; font-size: 2rem; font-weight: 400; }
  .sends-place .sends-table { margin-top: 1.6rem; }
  .sends-more { margin: .8rem 0 0; font-size: 1.35rem; }
  .sends-state-line { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

  /* One bar for how far a send got: read, delivered, still going, failed. */
  .send-bar { display: flex; height: .8rem; width: 100%; min-width: 16rem; margin-top: 1.2rem; overflow: hidden; background: var(--line); }
  .send-progress .send-bar { margin-top: 0; }
  .send-bar span { display: block; height: 100%; }
  .send-bar .is-read, .send-key.is-read::before { background: var(--ok); }
  .send-bar .is-delivered, .send-key.is-delivered::before { background: color-mix(in oklab, var(--ok) 45%, var(--surface)); }
  .send-bar .is-going, .send-key.is-going::before { background: var(--router); }
  .send-bar .is-failed, .send-key.is-failed::before { background: var(--error); }
  .send-progress { display: grid; gap: .5rem; min-width: 22rem; }
  .send-counts { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: 1.2rem; color: var(--ink-3); }
  .send-counts b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
  .send-key { display: inline-flex; align-items: center; gap: .5rem; }
  .send-key::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; }
  .send-name { display: grid; gap: .2rem; }
  .send-name a { font-weight: 600; }
  .send-name code, .send-name small { font-size: 1.2rem; color: var(--ink-3); }
  .send-when { display: grid; gap: .2rem; font-size: 1.3rem; color: var(--ink-2); white-space: nowrap; }
  .send-when span { color: var(--ink-3); font-size: 1.2rem; }
  .mono-num { font-variant-numeric: tabular-nums; }

  /* A send's own page. */
  .sends-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.4rem; }
  .sends-stat { display: grid; gap: .3rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-top-width: 3px; border-radius: var(--r-card); background: var(--surface); }
  .sends-stat b { font-size: 2.6rem; font-weight: 400; line-height: 1.1; }
  .sends-stat span { font-size: 1.3rem; color: var(--ink-2); }
  .sends-stat small { font-size: 1.2rem; color: var(--ink-3); }
  .sends-stat.is-read { border-top-color: var(--ok); }
  .sends-stat.is-delivered { border-top-color: color-mix(in oklab, var(--ok) 45%, var(--surface)); }
  .sends-stat.is-going { border-top-color: var(--router); }
  .sends-stat.is-failed { border-top-color: var(--error); }
  .sends-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2.4rem; align-items: start; margin-top: 2.4rem; }
  .sends-section { display: grid; gap: 1.4rem; padding: 2rem 2.2rem; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); }
  .sends-section h2 { margin: 0; font-size: 1.6rem; font-weight: 600; }
  .sends-reasons { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
  .sends-reasons li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1.6rem; font-size: 1.35rem; }
  .sends-reasons li span { grid-column: 1; color: var(--ink-3); font-size: 1.25rem; }
  .sends-reasons li b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: 600; }
  .sends-filters { display: flex; gap: .6rem; flex-wrap: wrap; }
  .sends-filters .pill { text-decoration: none; }
  .sends-filters .pill.is-on { border-color: var(--ink); color: var(--ink); }
  .sends-pages { display: flex; gap: 1.6rem; font-size: 1.35rem; }
  .sends-confirm { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

  /* Drafting: one page of sections that fold to a line once done, the message in view beside them, and one action at the foot. */
  .draft-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap; }
  .draft-title { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; min-width: 0; }
  .draft-name { min-width: 0; }
  .draft-name { flex: 0 1 auto; }
  .draft-name input { field-sizing: content; min-width: 12ch; max-width: 100%; padding: 0 0 .2rem; border: 0; border-bottom: 1px dashed transparent; background: transparent; color: var(--ink); font: 300 clamp(3.2rem, 4vw, 4.4rem) / 1.1 var(--sans); }
  .draft-name input:hover { border-bottom-color: var(--line-strong); }
  .draft-name input:focus { border-bottom-color: var(--focus); outline: none; }
  .draft-from { margin: .6rem 0 0; font-size: 1.4rem; color: var(--ink-2); }
  .draft { display: grid; grid-template-columns: minmax(0, 1fr) 36rem; gap: 3.2rem; align-items: start; margin-top: 2.4rem; padding-bottom: 9rem; }
  .draft-sections { display: grid; gap: 1.2rem; min-width: 0; }
  .sec { border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); }
  .sec.is-open { border-color: var(--ink); }
  .sec.is-later { background: transparent; }
  .sec-head { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 1.6rem 2rem; }
  .sec-head .mark { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-3); font-size: 1.3rem; font-weight: 600; }
  .sec.is-done .mark { border-color: transparent; color: var(--ok); }
  .sec.is-open .mark { border-color: var(--ink); background: var(--ink); color: var(--surface); }
  .sec-name { display: grid; gap: .2rem; min-width: 0; }
  .sec-name strong { font-size: 1.6rem; font-weight: 600; }
  .sec.is-later .sec-name strong, .sec.is-reached .sec-name strong { color: var(--ink-3); font-weight: 500; }
  .sec-name span { font-size: 1.35rem; color: var(--ink-2); overflow-wrap: anywhere; }
  .sec-name .warn { color: var(--warning); }
  .sec-edit { font-size: 1.35rem; }
  .sec-body { display: grid; gap: 1.8rem; padding: 0 2rem 2rem 6rem; min-width: 0; }
  .sec-body > .hint { margin: -.6rem 0 0; }
  .sec-form { display: grid; gap: 1.8rem; min-width: 0; }
  .sec-foot { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
  .sec-foot .hint { margin: 0; }
  .sec-foot .btn[disabled] { opacity: .45; cursor: not-allowed; }
  .sends-language { max-width: 36rem; }
  .draft-preview { position: sticky; top: 1.6rem; display: grid; gap: 1.2rem; }
  .pv { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--chat-bg); }
  .pv-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.4rem; background: var(--chat-head); color: var(--chat-ink); font-size: 1.3rem; }
  .pv-head strong { font-weight: 600; }
  .pv-nav { display: flex; gap: .6rem; align-items: center; color: var(--chat-muted); }
  .pv-nav a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--chat-in); color: var(--chat-ink); text-decoration: none; }
  .pv-body { display: grid; gap: .8rem; align-content: start; min-height: 26rem; padding: 1.8rem 1.6rem 2.4rem; }
  .pv-day { justify-self: center; padding: .3rem 1rem; border-radius: 6px; background: var(--chat-note); color: var(--chat-muted); font-size: 1.15rem; }
  .pv .sends-bubble { max-width: 100%; }
  .sends-bubble .blank { padding: 0 .3rem; border-radius: 3px; background: color-mix(in oklab, var(--chat-muted) 22%, transparent); color: var(--chat-muted); }
  .pv-note { margin: 0; font-size: 1.25rem; color: var(--ink-3); }
  .tester { display: grid; gap: .8rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--r-section); background: var(--surface); }
  .tester strong { font-size: 1.4rem; }
  .tester .row { display: flex; gap: .8rem; }
  .tester .row .field { flex: 1; min-width: 0; }
  .sendbar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; padding: 1.4rem max(2.4rem, calc((100vw - 144rem) / 2 + 2.4rem)) calc(1.4rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); }
  .sendbar-state { display: grid; gap: .2rem; font-size: 1.4rem; }
  .sendbar-state strong { font-weight: 600; }
  .sendbar-state span { font-size: 1.3rem; color: var(--ink-3); }
  .sendbar .btn[disabled] { opacity: .45; cursor: not-allowed; }
  .drop-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); font-size: 1.35rem; }
  .drop-line span { color: var(--ink-3); font-size: 1.25rem; }
  .inline-warn { padding: 1rem 1.2rem; border-left: 3px solid var(--warning); background: var(--warning-soft); font-size: 1.35rem; color: var(--ink); }
  .progress-line { display: grid; gap: .6rem; font-size: 1.35rem; }
  .progress-line .track { height: .6rem; overflow: hidden; background: var(--line); }
  .progress-line .track span { display: block; height: 100%; background: var(--router); }
  .pick { display: grid; gap: .4rem; min-width: 0; }
  .choice-head { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; font-size: 1.45rem; font-weight: 600; }
  .choice-head .pill { font-weight: 550; }
  .pick-text { font-size: 1.35rem; color: var(--ink-2); line-height: 1.5; }
  .choice-meta { font-size: 1.2rem; color: var(--ink-3); }
  .tslot { padding: 0 .4rem; border-radius: 3px; background: var(--message-soft); color: var(--ink); }

  /* The spreadsheet, and what each column is for. */
  .sends-drop { display: grid; gap: .6rem; justify-items: center; padding: 2.4rem; border: 1.5px dashed var(--line-strong); border-radius: var(--r-card); text-align: center; color: var(--ink-2); font-size: 1.35rem; cursor: pointer; }
  .sends-drop strong { color: var(--ink); }
  .sends-file { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: 1.35rem; }
  .sends-file span { color: var(--ink-3); font-size: 1.25rem; }
  .sends-country { max-width: 36rem; }
  .map { width: 100%; border-collapse: collapse; font-size: 1.35rem; }
  .map th { padding: 0 1.2rem .8rem 0; font-size: 1.2rem; font-weight: 600; color: var(--ink-3); text-align: left; }
  .map td { padding: 1rem 1.2rem 1rem 0; border-top: 1px solid var(--line); vertical-align: middle; }
  .map td:first-child { width: 34%; }
  .map .need { display: grid; gap: .2rem; }
  .map .need span { font-size: 1.2rem; color: var(--ink-3); }
  .map tr.is-optional .need b::after { content: " · optional"; font-weight: 400; color: var(--ink-3); }
  .map tr.is-missing .need b { color: var(--error); }
  .map .sample { font-family: var(--mono); font-size: 1.25rem; color: var(--ink-2); overflow-wrap: anywhere; }
  .map .sample i { font-style: normal; color: var(--ok-ink); }
  .unused { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: 1.3rem; color: var(--ink-3); }
  .unused .pill { text-decoration: line-through; color: var(--ink-3); }

  /* Checking: the verdict, a person's message, and what was left out. */
  .sends-verdict { display: grid; gap: .4rem; padding: 1.2rem 1.4rem; border-radius: var(--r-card); background: var(--ok-soft); color: var(--ok-ink); font-size: 1.35rem; }
  .sends-verdict.is-warning { background: var(--warning-soft); color: var(--warning); }
  .sends-verdict.is-reading { background: var(--router-soft); color: var(--ink); }
  .sends-chat { display: grid; gap: 1rem; padding: 1.6rem; border-radius: var(--r-card); background: var(--chat-bg); }
  .sends-bubble { justify-self: start; max-width: 34rem; padding: .8rem 1rem 1rem; border-radius: 0 8px 8px 8px; background: var(--chat-in); color: var(--chat-ink); font-size: 1.35rem; line-height: 1.4; box-shadow: 0 1px .5px rgb(11 20 26 / .13); }
  .sends-bubble p { margin: 0 0 .4rem; }
  .sends-bubble .bubble-header { font-weight: 600; }
  .sends-bubble .bubble-footer { color: var(--chat-muted); font-size: 1.2rem; }
  /* A bubble with media is as wide as WhatsApp draws one, whether or not words follow; a part with no words yet takes no room. */
  .sends-bubble:has(.wa-media, .wa-doc) { width: 30rem; max-width: 100%; }
  .sends-bubble p:empty { display: none; }
  .sends-bubble :is(.wa-media, .wa-doc):not(:has(~ :not(:empty))) { margin-bottom: -.6rem; }
  /* A media header as WhatsApp draws it: the picture, the video under a play button, or a file card coloured by its type. */
  .sends-bubble .wa-media { position: relative; display: grid; place-items: center; margin: -.4rem -.6rem .6rem; border-radius: 6px; overflow: hidden; background: color-mix(in oklab, var(--chat-muted) 18%, var(--chat-in)); }
  .sends-bubble .wa-media.is-image { aspect-ratio: 1.91 / 1; }
  .sends-bubble .wa-media.is-video { aspect-ratio: 16 / 9; }
  .sends-bubble .wa-media-glyph { width: 4.4rem; height: 4.4rem; fill: color-mix(in oklab, var(--chat-muted) 60%, transparent); }
  .sends-bubble .wa-media-file { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .sends-bubble .wa-play { position: relative; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: rgb(11 20 26 / .55); }
  .sends-bubble .wa-play svg { width: 2.8rem; height: 2.8rem; margin-left: .3rem; fill: #fff; }
  .sends-bubble .wa-videocam { position: absolute; left: .8rem; bottom: .6rem; width: 1.8rem; height: 1.8rem; fill: #fff; filter: drop-shadow(0 0 2px rgb(0 0 0 / .5)); }
  .sends-bubble .wa-doc { --band: #8696a0; display: flex; align-items: center; gap: 1rem; margin: -.2rem -.4rem .6rem; padding: 1rem; border-radius: 6px; background: color-mix(in oklab, var(--chat-bg) 60%, var(--chat-in)); }
  .sends-bubble .wa-doc[data-ext="pdf"] { --band: #e5252a; }
  .sends-bubble .wa-doc:is([data-ext="doc"], [data-ext="docx"], [data-ext="rtf"], [data-ext="odt"]) { --band: #2b579a; }
  .sends-bubble .wa-doc:is([data-ext="xls"], [data-ext="xlsx"], [data-ext="csv"], [data-ext="ods"]) { --band: #217346; }
  .sends-bubble .wa-doc:is([data-ext="ppt"], [data-ext="pptx"], [data-ext="odp"]) { --band: #d24726; }
  .sends-bubble .wa-doc-icon { flex: none; width: 2.6rem; height: 3.2rem; }
  .sends-bubble .wa-doc-page { fill: #fff; stroke: #d1d7db; }
  .sends-bubble .wa-doc-fold { fill: #e9edef; stroke: #d1d7db; }
  .sends-bubble .wa-doc-band { fill: var(--band); }
  /* No file yet, so no type to label: WhatsApp's plain page, lines where the band would be. */
  .sends-bubble .wa-doc-lines { fill: none; stroke: #c4ccd1; stroke-width: 1.4; stroke-linecap: round; }
  .sends-bubble .wa-doc[data-ext=""] :is(.wa-doc-band, text) { display: none; }
  .sends-bubble .wa-doc:not([data-ext=""]) .wa-doc-lines { display: none; }
  .sends-bubble .wa-doc-name.blank { padding: 0; background: none; font-family: inherit; color: var(--chat-muted); }
  .sends-bubble .wa-doc-icon text { fill: #fff; font: 700 6.4px/1 system-ui, sans-serif; letter-spacing: .1px; }
  .sends-bubble .wa-doc-words { display: grid; min-width: 0; gap: .1rem; }
  .sends-bubble .wa-doc-name { overflow: hidden; font-size: 1.3rem; white-space: nowrap; text-overflow: ellipsis; }
  .sends-bubble .wa-doc-type { font-size: 1.15rem; color: var(--chat-muted); }
  .sends-bubble .wa-doc-type:empty { display: none; }
  .sends-bubble .to { display: block; margin-bottom: .4rem; font-size: 1.15rem; color: var(--chat-muted); }
  .sends-bubble mark, .sends-bubble p [data-fill]:not(.blank) { padding: 0 .2rem; border-radius: 3px; background: color-mix(in oklab, var(--chat-accent) 22%, transparent); color: inherit; }
  .sends-bubble .btn-row { display: block; margin: .6rem -1rem -1rem; padding: .8rem; border-top: 1px solid rgb(11 20 26 / .08); text-align: center; color: var(--chat-action); font-weight: 500; }
  .reason-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
  .reason-list li { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: .2rem 1.2rem; font-size: 1.35rem; }
  .reason-list li b { grid-row: 1 / span 2; font-size: 2rem; font-weight: 400; text-align: right; }
  .reason-list li span { color: var(--ink-3); font-size: 1.25rem; }
  .notes { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
  .notes li { padding: 1rem 1.2rem; border-left: 3px solid var(--router); background: var(--router-soft); font-size: 1.35rem; }
  .notes li.is-warning { border-left-color: var(--warning); background: var(--warning-soft); }

  /* Sending: a test to yourself, and when. */
  .test-status { margin-top: .6rem; font-weight: 600; color: var(--ink-2); }
  .test-status.is-delivered, .test-status.is-read { color: var(--ok-ink); }
  .test-status.is-failed { color: var(--error); }
  .sends-when-at { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
  .sends-when-at .field { width: auto; min-width: 24rem; }

  /* SMS: senders beside numbers, a text counted as the gateway cuts it, drawn on the phone as a Messages thread, and the numbers not to message. */
  .numbers-group { display: flex; align-items: center; gap: 1rem; margin: 3.2rem 0 0; font-size: 1.6rem; font-weight: 600; }
  .numbers-group + .numbers { margin-top: 1.2rem; }
  .checklist .is-waiting .tick { border: 1px solid var(--router); color: var(--router); }
  .checklist .is-refused .tick { color: var(--error); }
  .checklist .is-refused small { color: var(--error); }
  .field.sms-text { min-height: 12rem; font-size: 1.45rem; line-height: 1.55; resize: vertical; }
  .sms-count { min-height: 1.9rem; margin: -1rem 0 0; font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
  .sms-count.is-under { margin: 0; }
  .sms-count.is-warning { color: var(--warning); }
  .sms-pills { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
  .sms-pills .label { margin: 0 .4rem 0 0; }
  .sms-pill { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: 1.25rem; cursor: pointer; }
  .sms-pill .icon { width: 1.2rem; height: 1.2rem; }
  .sms-pill:hover { border-color: var(--line-strong); color: var(--ink); }
  .sms-pv-head { padding: 0 .2rem; background: none; color: var(--ink); }
  .sms-pv-head .pv-nav { color: var(--ink-3); }
  .sms-pv-head .pv-nav a { background: var(--surface-2); color: var(--ink); }
  .sms-device { width: 100%; max-width: 32rem; }
  .sms-device .device-screen { height: 44rem; }
  .device-screen.is-sms { background: var(--phone-app-bg); }
  .is-sms .sms-head { position: relative; display: grid; justify-items: center; gap: 4px; padding: 4px 12px 10px; border-bottom: .5px solid var(--phone-field-line); background: var(--phone-veil); }
  .sms-back { position: absolute; left: 8px; top: 14px; color: var(--phone-link); }
  .sms-back .icon { width: 22px; height: 22px; }
  .sms-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(#a5abb8, #858994); color: #fff; font-size: 19px; font-weight: 500; }
  .is-sms .sms-from { font-size: 11px; line-height: 1.2; color: var(--phone-ink); }
  .sms-log { flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 12px 12px 8px; overflow-y: auto; }
  .sms-day { align-self: center; margin-bottom: 6px; font-size: 11px; color: var(--phone-muted); }
  .sms-bubble { align-self: flex-start; max-width: 78%; margin: 0; padding: 7px 12px 8px; border-radius: 18px; background: var(--phone-bubble-in); color: var(--phone-ink); font-size: 15px; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; }
  .sms-bubble mark { padding: 0 2px; border-radius: 3px; background: color-mix(in oklab, var(--phone-link) 22%, transparent); color: inherit; }
  .sms-bubble .blank { color: var(--phone-link); }
  .sms-bubble .is-subtle { color: var(--phone-muted); }
  .sms-composer { display: grid; padding: 8px 12px 26px; }
  .sms-no-reply { font-size: 11.5px; text-align: center; color: var(--phone-muted); }
  .sms-field { padding: 5px 12px; border: .5px solid var(--phone-field-line); border-radius: 18px; font-size: 14px; color: var(--phone-muted); }
  .sms-sent-text { max-width: 72ch; margin: 1.6rem 0 0; padding: 1rem 1.4rem; border-left: 3px solid var(--line-strong); background: var(--surface); font-size: 1.4rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  .sends-stats.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sms-sends .send-bar .is-delivered, .sms-sends .send-key.is-delivered::before { background: var(--ok); }
  .sms-sends .sends-stat.is-delivered { border-top-color: var(--ok); }
  .sms-totals { margin: .8rem 0 0; }
  .optouts { display: grid; grid-template-columns: minmax(0, 1fr) 34rem; gap: 3.2rem; align-items: start; margin-top: 2.4rem; }
  .optouts.is-reading { grid-template-columns: minmax(0, 1fr); }
  .optouts-list { display: grid; gap: 1.2rem; min-width: 0; }
  .optouts-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.6rem; flex-wrap: wrap; }
  .optouts-top h2 { margin: 0; font-size: 2rem; font-weight: 400; }
  .optouts-top h2 small { display: block; margin-top: .2rem; font-size: 1.3rem; color: var(--ink-3); }
  .optouts-find { display: flex; gap: .8rem; }
  .optouts-find .field { width: 24rem; }
  .optouts-remove { width: 1%; text-align: right; }
  .optouts-side { display: grid; gap: 1.6rem; }

  @media (max-width: 1000px) {
    .optouts { grid-template-columns: minmax(0, 1fr); }
    .draft, .sends-detail { grid-template-columns: minmax(0, 1fr); }
    .draft-preview { position: static; }
    .sec-body { padding-left: 2rem; }
  }
  @media (max-width: 700px) {
    .sends-stats { grid-template-columns: minmax(0, 1fr); }
  }
}