#page-campaigns{max-width:1400px;margin:0 auto}
html:has(#page-campaigns.on){overflow-x:hidden}
main:has(#page-campaigns.on){max-width:none}
.campaigns-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#page-campaigns [hidden],.campaign-dialog [hidden]{display:none!important}
.campaigns-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.campaigns-eyebrow{color:var(--dim);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.campaigns-heading h1{font-size:32px;line-height:1.16;font-weight:600;letter-spacing:-.04em}
.campaigns-lead{color:var(--muted);font-size:14px;margin-top:12px}
.campaigns-primary,.campaigns-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.campaigns-primary{background:var(--accent);border:1px solid var(--accent);color:var(--on-accent)}
.campaigns-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.campaigns-primary:active,.campaigns-secondary:active{transform:translateY(1px)}
.campaigns-primary:disabled{opacity:.55;cursor:wait}
.campaigns-secondary{background:var(--panel);border:1px solid var(--line);color:var(--text)}
.campaigns-secondary:hover{background:var(--panel-2)}
.campaigns-primary>span[aria-hidden="true"]{font-size:20px;line-height:12px;font-weight:400}
/* The campaigns list (#campaigns-list-view). Greyscale like the rest of the portal; its one hue is the portal's data blue
   (the Home chart, Custom domains), and only on what is moving: the campaign going out now and the ones waiting to go. */
#campaigns-list-view{
  --cl-hue:#078cf2; --cl-hue-ink:#0a5a9e; --cl-tint:#d6ecff; --cl-track:#eef7ff; --cl-grey-track:#f1f1ef; --cl-done:#2f8a52; --cl-fail:#c4242a;
  --cl-rule:color-mix(in srgb,var(--line) 55%,var(--panel)); --cl-hover:color-mix(in srgb,var(--panel-2) 55%,var(--panel));
}
:root[data-theme="dark"] #campaigns-list-view{--cl-hue:#4aa8f7; --cl-hue-ink:#9fd2ff; --cl-tint:#22476a; --cl-track:#1c2a3a; --cl-grey-track:#2c313d; --cl-done:#3fc07a; --cl-fail:#ff8a95}
.campaigns-list-heading{align-items:flex-end;margin-bottom:24px}
.campaigns-heading-copy{min-width:0}
.campaigns-list-heading h1{font-size:24px;line-height:1.2;letter-spacing:-.01em}
.campaigns-list-heading .campaigns-lead{max-width:72ch;margin-top:8px;line-height:1.5;text-wrap:pretty}
.campaigns-list-heading .campaigns-primary{min-height:40px;padding:8px 16px}
/* Three figures in one strip, split by rules. */
.campaigns-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.campaigns-stat{min-width:0;padding:16px 24px}
.campaigns-stat+.campaigns-stat{border-left:1px solid var(--cl-rule)}
.campaigns-stat-label{display:block;color:var(--muted);font-size:13px;font-weight:500;margin-bottom:4px}
.campaigns-stat-value{display:block;font-size:24px;line-height:1.25;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.campaigns-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;container:campaigns-list/inline-size}
.campaigns-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px 0 24px;border-bottom:1px solid var(--line)}
/* Underline tabs on the toolbar's rule, each with its plain count. */
.campaigns-tabs{display:flex;align-self:stretch;gap:24px;overflow-x:auto;scrollbar-width:none}
.campaigns-tabs button{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:52px;padding:0;border:0;background:none;color:var(--muted);white-space:nowrap;cursor:pointer;font-size:14px;font-weight:500}
.campaigns-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--text);opacity:0;transition:opacity .18s ease}
.campaigns-tabs button:hover,.campaigns-tabs button[aria-pressed="true"]{color:var(--text)}
.campaigns-tabs button[aria-pressed="true"]::after{opacity:1}
.campaigns-tab-count{display:inline-block;color:var(--dim);font-size:13px;font-weight:400;font-variant-numeric:tabular-nums}
.campaigns-search{position:relative;flex:0 1 240px;min-width:172px}
.campaigns-search input{width:100%;height:40px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);padding:8px 12px;font-size:12px}
.campaigns-search input:focus{border-color:var(--focus);outline:none;box-shadow:0 0 0 3px var(--focus-soft)}
#campaigns-list-view .campaigns-search{flex-basis:260px}
#campaigns-list-view .campaigns-search input{height:36px;border-radius:8px;background:var(--panel);font-size:14px}
.campaigns-table-wrap{width:100%;overflow-x:auto}
.campaigns-table{border-collapse:collapse;width:100%;min-width:1020px;text-align:left;font-size:14px}
.campaigns-table th{background:var(--panel-2);color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.015em;white-space:nowrap;padding:12px 16px;border-bottom:1px solid var(--line)}
.campaigns-table td{height:68px;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
.campaigns-table tbody tr:last-child td{border-bottom:0}
.campaigns-table tbody tr:hover{background:var(--panel-2)}
.campaigns-table th:first-child,.campaigns-table td:first-child{padding-left:24px;min-width:236px}
.campaigns-table th:last-child,.campaigns-table td:last-child{padding-right:20px;text-align:right;width:76px}
.campaigns-number{text-align:right;min-width:92px}
.campaigns-name{display:block;color:var(--text);font-weight:600;line-height:1.3}
.campaigns-name-button{display:block;max-width:272px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;border:0;background:transparent;color:var(--text);font-size:14px;font-weight:600;line-height:1.3;cursor:pointer}
.campaigns-name-button:hover{text-decoration:underline}
.campaigns-subject{display:block;color:var(--dim);font-size:12px;line-height:1.3;margin-top:4px;max-width:272px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* A status is a pill: its icon (campaigns.js STATUS_ICON, icons/ui/status-*.svg) and its word. Grey for drafts and what
   was called off, the blue for what is waiting or going out, light green once it is done, red only when it failed. The
   chip of a campaign that is sending is filled as far as it has got (--progress, campaigns.js statusCell). Nothing in it
   moves. */
.campaigns-status{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 7px;border-radius:999px;overflow:hidden;background:var(--cl-grey-track);color:var(--text);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;flex:none}
.campaigns-status-icon{display:block;flex:none;width:14px;height:14px;color:var(--dim)}
.campaigns-status[data-status="draft"],.campaigns-status[data-status="cancelled"]{color:var(--muted)}
.campaigns-status[data-status="scheduled"],.campaigns-status[data-status="sending"]{background:var(--cl-track);color:var(--cl-hue-ink)}
.campaigns-status[data-status="scheduled"] .campaigns-status-icon,.campaigns-status[data-status="sending"] .campaigns-status-icon{color:var(--cl-hue)}
.campaigns-status[data-status="completed"]{background:var(--success-bg);color:var(--success-text)}
.campaigns-status[data-status="completed"] .campaigns-status-icon{color:var(--cl-done)}
.campaigns-status[data-status="failed"]{background:var(--error-bg);color:var(--error-text)}
.campaigns-status[data-status="failed"] .campaigns-status-icon{color:var(--cl-fail)}
.campaigns-status-fill{position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--progress,0%);background:var(--cl-tint)}
.campaigns-date{display:block;font-size:12px;font-weight:600;white-space:nowrap}
.campaigns-date-sub{display:block;color:var(--dim);font-size:12px;line-height:1.4}
.campaigns-muted{color:var(--dim)}
.campaigns-row-action{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:7px;padding:8px 8px;cursor:pointer;font-size:12px;font-weight:600}
.campaigns-row-action:hover{background:var(--panel-2)}
.campaigns-row-delete{border-color:#c62828;color:#c62828}
.campaigns-row-delete:hover{background:#c62828;color:#fff}
:root[data-theme="dark"] .campaigns-row-delete{border-color:#e57373;color:#ff9a9a}
:root[data-theme="dark"] .campaigns-row-delete:hover{background:#c62828;border-color:#c62828;color:#fff}
.campaigns-table td.campaigns-state{text-align:center;width:auto;color:var(--muted);padding:52px 20px;line-height:1.6}
.campaigns-state strong{display:block;color:var(--text);font-size:14px;margin-bottom:4px}
.campaigns-state button{margin-top:16px}
.campaigns-footer{display:flex;justify-content:space-between;gap:16px;padding:12px 24px;border-top:1px solid var(--cl-rule);color:var(--dim);font-size:13px}
#campaigns-count{flex:none}
/* The campaigns table: no header band, quiet row rules, the name taking the width, each figure right-aligned over its
   share of the emails sent. The Senders tables share .campaigns-table and keep its older look. */
/* Every column but the name has the width its longest label needs (Latvian "Notiek sūtīšana", Russian "Клики по ссылкам"
   over two lines), the actions shrink to their buttons in each language, and the name (width:100%) takes the rest. */
.campaigns-list-table{min-width:0}
#campaigns-list-view .campaigns-list-table .campaigns-identity,#campaigns-list-view .campaigns-list-table th:first-child{width:100%}
.campaigns-list-table .campaigns-identity{max-width:0}
.campaigns-list-table th{background:none;color:var(--dim);font-size:12px;font-weight:500;letter-spacing:0;padding:12px 16px;vertical-align:bottom}
.campaigns-list-table td{height:auto;padding:14px 16px;border-bottom-color:var(--cl-rule)}
.campaigns-list-table tbody tr:hover{background:var(--cl-hover)}
.campaigns-list-table th:first-child,.campaigns-list-table td:first-child{min-width:0;padding-left:24px}
.campaigns-list-table th:nth-child(2){width:168px}
.campaigns-list-table .campaigns-number{width:104px;min-width:104px;padding-inline:12px}
.campaigns-list-table th.campaigns-number{white-space:normal}
.campaigns-list-table .campaigns-name-button{max-width:100%;line-height:20px}
.campaigns-list-table .campaigns-subject{max-width:100%;margin-top:2px;line-height:18px}
.campaigns-figure{display:block;line-height:20px}
.campaigns-figure-sub{display:block;color:var(--dim);font-size:12px;line-height:18px}
.campaigns-list-table .campaigns-when{width:160px;padding-left:36px;white-space:nowrap}
.campaigns-list-table .campaigns-date{font-size:14px;font-weight:400;line-height:20px}
.campaigns-list-table .campaigns-date-sub{line-height:18px}
#campaigns-list-view .campaigns-list-table th:last-child,#campaigns-list-view .campaigns-list-table td:last-child{width:1%;padding-right:16px;white-space:nowrap}
#campaigns-list-view .campaigns-row-actions{gap:4px;vertical-align:middle}
#campaigns-list-view .campaigns-row-action{min-width:56px;height:32px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:500}
#campaigns-list-view .campaigns-row-delete,.campaigns-row-slot{display:grid;place-items:center;width:32px;height:32px;flex:none}
#campaigns-list-view .campaigns-row-delete{padding:0;border:0;border-radius:8px;background:none;color:var(--dim);cursor:pointer;transition:background .18s,color .18s,transform .18s}
#campaigns-list-view .campaigns-row-delete:hover{background:var(--error-bg);color:var(--error-text)}
#campaigns-list-view .campaigns-row-delete:active{transform:translateY(1px)}
#campaigns-list-view .campaigns-row-delete svg{width:16px;height:16px}
/* Narrow panels (a tablet, a phone): the head is hidden and each campaign is a short block of its own — name and action,
   status and when, then sent / opened / clicked with their labels. Drafts skip the figures they do not have yet. */
@container campaigns-list (max-width:959px){
  .campaigns-list-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .campaigns-list-table,.campaigns-list-table tbody{display:block}
  /* Three lines in one wrapping row: the two empty pseudo-elements take a whole line each, so they end the name line and
     the status line wherever the chip happens to end. */
  .campaigns-list-table tbody tr{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:16px;border-bottom:1px solid var(--cl-rule)}
  .campaigns-list-table tbody tr::before,.campaigns-list-table tbody tr::after{content:"";flex:0 0 100%;order:2}
  .campaigns-list-table tbody tr::before{order:5}
  .campaigns-list-table tbody tr:last-child{border-bottom:0}
  #campaigns-list-view .campaigns-list-table td{display:block;width:auto;max-width:none;min-width:0;height:auto;padding:0;border:0;text-align:left}
  #campaigns-list-view .campaigns-list-table td.campaigns-identity{flex:1 1 0%;order:0}
  #campaigns-list-view .campaigns-list-table td.campaigns-actions{flex:none;order:1;align-self:flex-start;width:auto;padding:0}
  #campaigns-list-view .campaigns-list-table td.campaigns-state-cell{flex:none;order:3;margin-top:4px}
  #campaigns-list-view .campaigns-list-table td.campaigns-when{display:flex;flex:1 1 0%;order:4;gap:6px;margin-top:4px}
  .campaigns-list-table td.campaigns-when .campaigns-date{font-size:13px;color:var(--muted)}
  .campaigns-list-table td.campaigns-when .campaigns-date-sub{font-size:13px}
  #campaigns-list-view .campaigns-list-table td.campaigns-number{flex:1 1 0%;order:6;align-self:flex-start;margin-top:8px}
  .campaigns-list-table td.campaigns-number::before{content:attr(data-label);display:block;color:var(--dim);font-size:12px;line-height:18px}
  #campaigns-list-view .campaigns-list-table tr[data-figures="none"] td.campaigns-number,#campaigns-list-view .campaigns-list-table tr[data-status="draft"] td.campaigns-when{display:none}
  #campaigns-list-view .campaigns-list-table td.campaigns-state{flex:1 1 100%;padding:40px 16px;text-align:center}
  .campaigns-list-table tbody tr.campaigns-follow-up-row{padding-left:40px}
  #campaigns-list-view .campaigns-follow-up-row td:first-child{position:static;padding-left:0}
  #campaigns-list-view .campaigns-follow-up-row td:first-child::before{left:20px;top:-1px;height:28px}
}
.campaign-dialog{position:fixed;inset:0;margin:auto;width:min(512px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);box-shadow:0 24px 80px #0005;padding:28px 28px}
.campaign-dialog::backdrop{background:#111a}
.campaign-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.campaign-dialog-head h2{font-size:24px;line-height:1.25}
.campaign-dialog-close{border:0;background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;padding:4px 4px}
.campaign-dialog-close:hover{color:var(--text)}
.campaign-error{color:var(--error-text);font-size:12px;margin-bottom:16px}
.campaigns-row-actions{display:inline-flex;justify-content:flex-end;gap:8px}
.campaigns-table th:last-child,.campaigns-table td:last-child{width:200px}
.campaigns-subject-empty{color:var(--dim);font-style:italic}
.campaigns-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
.campaigns-back:hover{color:var(--text);background:var(--panel-2)}
.campaigns-design-heading{margin-bottom:28px}
.campaigns-design-heading h1{font-size:32px;line-height:1.16;font-weight:600;letter-spacing:-.04em}
.campaigns-design-tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--line);overflow-x:auto}
.campaigns-design-tabs button{position:relative;padding:12px 12px 12px;border:0;background:transparent;color:var(--muted);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.campaigns-design-tabs button:hover{color:var(--text)}
.campaigns-design-tabs button[aria-selected="true"]{color:var(--text)}
.campaigns-design-tabs button::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--text);opacity:0;transition:opacity .18s ease}
.campaigns-design-tabs button[aria-selected="true"]::after{opacity:1}
.campaigns-editor-card{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:36px;width:100%;max-width:980px;padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;transition:border-color .18s,transform .18s}
.campaigns-editor-card:hover{border-color:var(--focus)}
.campaigns-editor-card:active{transform:translateY(1px)}
.campaigns-editor-art{display:block;border-radius:10px;overflow:hidden;line-height:0}
.campaigns-editor-art svg{display:block;width:100%;height:auto}
.campaigns-editor-copy{display:flex;flex-direction:column;gap:12px;max-width:420px}
.campaigns-editor-copy strong{font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
.campaigns-editor-copy>span:not(.campaigns-editor-cta){color:var(--muted);font-size:14px;line-height:1.6}
.campaigns-editor-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:8px;padding:8px 16px;border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:600}
.campaigns-editor-card:hover .campaigns-editor-cta{background:var(--accent-2)}
.campaigns-design-empty{max-width:980px;padding:56px 24px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:14px;line-height:1.6;text-align:center}
.campaigns-design-empty strong{display:block;margin-bottom:4px;color:var(--text);font-size:16px}
.campaigns-design-section{max-width:980px;margin:0 0 12px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.campaigns-design-section:not(:first-child){margin-top:36px}
.campaigns-design-intro{max-width:620px;color:var(--muted);font-size:14px;line-height:1.55}
.campaigns-recent-head{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:980px;margin-bottom:16px}
.campaigns-recent-head .campaigns-search{flex:0 1 280px}
.campaigns-recent-more{display:flex;margin:20px 0 0}
.campaigns-template-grid>.campaigns-design-empty{grid-column:1/-1;width:100%}
.campaigns-grid-note{grid-column:1/-1;padding:20px 24px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:14px;line-height:1.55}
.campaigns-grid-note strong{display:block;margin-bottom:2px;color:var(--text);font-size:15px}
/* Cards for saved templates and sent emails: a live thumbnail of the email, and one button that covers the whole card. */
.campaigns-tile{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);transition:border-color .18s,transform .18s}
.campaigns-tile:hover,.campaigns-tile:focus-within{border-color:var(--focus)}
.campaigns-tile:has(.campaigns-tile-use:active){transform:translateY(1px)}
.campaigns-tile:has(.campaigns-tile-use:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.campaigns-thumb{position:relative;display:block;width:100%;aspect-ratio:4/3;margin-bottom:8px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#f3f4f6}
.campaigns-thumb iframe{position:absolute;top:0;left:0;width:calc(100% / var(--thumb-scale,1));height:calc(100% / var(--thumb-scale,1));border:0;background:#fff;transform:scale(var(--thumb-scale,1));transform-origin:0 0;pointer-events:none}
.campaigns-thumb-note{position:absolute;inset:0;display:grid;place-items:center;padding:12px;color:#6b7280;font-size:12px;line-height:1.4;text-align:center}
.campaigns-tile-body{display:flex;flex:1;flex-direction:column;gap:2px}
.campaigns-tile .campaigns-template-name,.campaigns-tile .campaigns-template-text{overflow-wrap:anywhere}
.campaigns-tile .campaigns-template-text{padding-bottom:0}
.campaigns-tile-meta{padding:0 4px;color:var(--dim);font-size:12px;line-height:1.5}
.campaigns-tile-use{position:static;min-height:36px;margin:auto 4px 0;border:0;font-family:inherit;cursor:pointer}
.campaigns-tile-body>:nth-last-child(2){margin-bottom:12px}
.campaigns-tile-use::after{content:"";position:absolute;inset:0;border-radius:14px}
.campaigns-tile:hover .campaigns-tile-use{background:var(--accent-2)}
.campaigns-tile:hover .campaigns-tile-use>span[aria-hidden="true"]{transform:translateX(2px)}
.campaigns-tile-delete{position:absolute;z-index:2;top:20px;right:20px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);cursor:pointer;opacity:0;transition:opacity .18s,background .18s,border-color .18s,color .18s}
.campaigns-tile-delete svg{width:16px;height:16px}
.campaigns-tile:hover .campaigns-tile-delete,.campaigns-tile-delete:focus-visible{opacity:1}
.campaigns-tile-delete:hover{border-color:#c62828;background:#c62828;color:#fff}
@media(hover:none){.campaigns-tile-delete{opacity:1}}
.campaigns-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:980px}
.campaigns-template-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;transition:border-color .18s,transform .18s}
.campaigns-template-card:hover{border-color:var(--focus)}
.campaigns-template-card:active{transform:translateY(1px)}
.campaigns-template-art{display:block;width:100%;margin-bottom:8px;border-radius:9px;overflow:hidden;line-height:0}
.campaigns-template-art svg{display:block;width:100%;height:auto}
.campaigns-template-name{padding:0 4px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.campaigns-template-text{padding:0 4px 8px;color:var(--muted);font-size:14px;line-height:1.55}
.campaigns-template-card .campaigns-editor-cta{margin:auto 4px 0}
.campaigns-template-card:hover .campaigns-editor-cta{background:var(--accent-2)}
@media(max-width:900px){#page-campaigns{padding-top:52px}.campaigns-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.campaigns-heading{align-items:flex-start}}
/* When the tabs and the search no longer fit on one line (the Latvian labels are the longest), the search goes on top and
   the tabs keep the toolbar's rule, scrolling sideways in their own row. */
@container campaigns-list (max-width:940px){.campaigns-toolbar{flex-direction:column;align-items:stretch;gap:4px;padding:12px 16px 0}#campaigns-list-view .campaigns-search{flex:none;max-width:100%;order:-1}.campaigns-tabs{margin:0 -16px;padding:0 16px}}
@media(max-width:720px){.campaigns-editor-card{grid-template-columns:1fr;gap:24px;padding:20px}.campaigns-template-grid{grid-template-columns:1fr}.campaigns-recent-head{flex-direction:column;align-items:stretch}.campaigns-recent-head .campaigns-search{flex:none;max-width:100%}}
@media(max-width:560px){.campaigns-heading{flex-direction:column;gap:20px;margin-bottom:24px}.campaigns-heading h1{font-size:32px}.campaigns-list-heading h1{font-size:24px}.campaigns-heading .campaigns-primary{width:100%}.campaigns-overview{grid-template-columns:1fr}.campaigns-stat{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;padding:12px 16px}.campaigns-stat-label{margin:0}.campaigns-stat-value{grid-column:2;grid-row:1/span 2;font-size:20px}.campaigns-stat-rate{min-height:0}.campaigns-stat+.campaigns-stat{border-left:0;border-top:1px solid var(--cl-rule)}.campaigns-footer{flex-direction:column;gap:4px;padding:12px 16px}.campaign-dialog{padding:24px 20px}}

/* Motion matches the rest of the site (index.html): the page rises once as a whole (surface-in on .page.on), a view that
   is switched to rises the same way (campaigns.js), dialogs use the shared dialog-in / dialog-out, and buttons and cards
   answer the pointer with a colour change and a 1px press. The prefers-reduced-motion rule in index.html switches all of
   it off. Table rows and figures are animated from campaigns.js (motion.js). */
.campaigns-tabs button{transition:background .18s,color .18s}
.campaigns-tabs button span{transition:background .18s,color .18s}
.campaigns-search input,.campaign-field input:not([type=range]),.campaign-field textarea,.campaign-title-input,.campaign-test-row input,#campaign-schedule-at{transition:border-color .18s,box-shadow .18s,background-color .18s}
.campaigns-table tbody tr{transition:background .18s ease}
.campaigns-row-action{transition:background .18s,border-color .18s,color .18s,transform .18s}
.campaigns-row-action:active{transform:translateY(1px)}
.campaigns-back{transition:background .18s,color .18s}
.campaigns-back>span[aria-hidden="true"],.campaigns-editor-cta>span[aria-hidden="true"]{display:inline-block;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.campaigns-back:hover>span[aria-hidden="true"]{transform:translateX(-2px)}
.campaigns-editor-cta{transition:background .18s}
.campaigns-editor-cta>span[aria-hidden="true"] svg{display:block}
.campaigns-editor-card:hover .campaigns-editor-cta>span[aria-hidden="true"],.campaigns-template-card:hover .campaigns-editor-cta>span[aria-hidden="true"]{transform:translateX(2px)}
.campaigns-design-tabs button{transition:color .18s}
.campaign-dialog[open]{animation:dialog-in .22s cubic-bezier(.2,.8,.2,1)}
.campaign-dialog[open]::backdrop{animation:backdrop-in .22s ease-out}
.campaign-dialog-close{transition:color .18s}

/* Cosmetic full-screen loading screen shown while the email editor opens. */
.app-loading.campaign-editor-loading{align-content:center;justify-items:center;gap:20px;background:#121418;animation:campaign-loading-in .15s ease-out}
.app-loading.campaign-editor-loading .loader{--loader-color:#3b82f6;background-color:rgba(255,255,255,.14)}
.campaign-editor-loading p{margin:0;color:#a0a6b1;font-size:14px;font-weight:600}
.campaign-editor-loading.is-leaving{opacity:0;transition:opacity .25s ease-in;pointer-events:none}
@keyframes campaign-loading-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.app-loading.campaign-editor-loading{animation:none}.campaign-editor-loading.is-leaving{transition:none}}
html:has(.campaign-editor-loading:not([hidden])){overflow:hidden;scrollbar-gutter:auto}
/* Sending (AWS SES): statuses, the campaign dialog's sending settings, results and send panel. */
.campaigns-stat-rate{display:block;min-height:18px;margin-top:2px;color:var(--dim);font-size:13px}
.campaign-dialog{width:min(600px,calc(100vw - 24px))}
.campaign-dialog h3{font-size:14px;font-weight:600;margin:0 0 12px}
.campaign-hint{color:var(--dim);font-size:12px;line-height:1.5;margin-top:8px}
.campaign-link-button{border:0;background:none;padding:0;color:var(--text);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
/* The campaign dialog (#campaign-dialog): a fixed head and foot around a body that scrolls. In the body, the email's fields
   on the left and, on the right, how it arrives: the inbox line as typed and the design itself. The recipients dialogs share
   .campaign-dialog's frame, not this layout. Sections are split by one quiet rule; nothing inside is boxed but the lists. */
#campaign-dialog{
  --cd-rule:color-mix(in srgb,var(--line) 60%,var(--panel)); --cd-ready:#2f8a52;
  width:min(1040px,calc(100vw - 48px));max-height:calc(100dvh - 48px);padding:0;overflow:hidden;border-radius:14px
}
:root[data-theme="dark"] #campaign-dialog{--cd-ready:#3fc07a}
#campaign-dialog[open]{display:flex;flex-direction:column}
.campaign-dialog-form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#campaign-dialog .campaign-dialog-head{flex:none;padding:20px 20px 18px 32px;border-bottom:1px solid var(--cd-rule)}
.campaign-dialog-heading{flex:1;min-width:0;padding-top:2px}
#campaign-dialog-title{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
#campaign-dialog-title:focus{outline:none}
/* A draft's name is its title, edited in place: a field only on hover and focus. */
.campaign-title-input{display:block;width:calc(100% + 10px);height:40px;margin:-4px 0 -2px -10px;padding:0 9px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text);font:inherit;font-size:24px;font-weight:600;letter-spacing:-.01em;text-overflow:ellipsis}
.campaign-title-input:hover{background:var(--panel-2)}
.campaign-title-input:focus{outline:none;background:var(--panel);border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
.campaign-title-input::placeholder{color:var(--dim)}
.campaign-dialog-status,.campaign-dialog-lead{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.5;text-wrap:pretty}
.campaign-dialog-status:empty,.campaign-dialog-lead:empty{display:none}
/* What still stands between a draft and sending it: a grey dot, or a green one once nothing does. */
.campaign-dialog-lead[data-ready]::before{content:"";display:inline-block;width:8px;height:8px;margin:0 8px 1px 0;border-radius:50%;background:var(--dim);vertical-align:middle}
.campaign-dialog-lead[data-ready="true"]::before{background:var(--cd-ready)}
.campaign-dialog-lead[data-ready="true"]{color:var(--text)}
.campaign-parent{margin:6px 0 0;font-size:14px}
.campaign-dialog-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:40px;padding:24px 32px 32px}
.campaign-dialog-main{min-width:0;container:campaign-main/inline-size}
.campaign-section{min-width:0;margin:0;padding:0;border:0}
.campaign-section:not([hidden])~.campaign-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--cd-rule)}
/* A legend floats so that it sits inside its fieldset like a heading, not on the rule above it. */
.campaign-section>legend,.campaign-section h3{float:left;width:100%;margin:0 0 16px;padding:0;color:var(--text);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none}
.campaign-section>legend+*{clear:both}
.campaign-dialog .campaign-field{margin-bottom:16px}
/* A field's own label and its text inputs only: the recipient lists inside a field have labels and checkboxes of their own. */
.campaign-dialog .campaign-field>label,.campaign-delay-head>label,.campaign-field-label{display:flex;align-items:baseline;gap:4px;margin-bottom:6px;color:var(--text);font-size:13px;font-weight:500;line-height:1.4}
.campaign-field>label span[aria-hidden="true"]{color:var(--dim)}
.campaign-field>label small{margin-left:auto;color:var(--dim);font-size:12px;font-weight:400}
.campaign-dialog .campaign-field input:not([type=checkbox],[type=range]),.campaign-dialog .campaign-field textarea{display:block;width:100%;min-height:40px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:14px;line-height:20px;resize:vertical}
.campaign-dialog .campaign-field input:not([type=checkbox],[type=range]):hover,.campaign-dialog .campaign-field textarea:hover{border-color:color-mix(in srgb,var(--line) 55%,var(--focus))}
.campaign-dialog .campaign-field input:not([type=checkbox],[type=range]):focus,.campaign-dialog .campaign-field textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
.campaign-dialog .campaign-field input:disabled{opacity:.6}
.campaign-field .v-control{width:100%;min-height:40px;padding:9px 12px;background:var(--panel)}
.campaign-message .campaign-field:last-child,.campaign-section>.campaign-field:last-child{margin-bottom:0}
.campaign-field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
@container campaign-main (max-width:520px){.campaign-field-pair{grid-template-columns:minmax(0,1fr)}}
.campaign-sender-hint{margin:-8px 0 16px}
.campaign-hint{color:var(--dim);font-size:12px;line-height:1.5;margin-top:8px}
.campaign-lists{display:grid;max-height:212px;overflow:auto;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.campaign-lists .campaign-hint{margin:8px}
/* One list per row: its box, its name, and how many contacts it has at the right edge. */
.campaign-lists .campaign-list-option{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:40px;margin:0;padding:8px 10px;border-radius:6px;color:var(--text);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;transition:background-color .18s}
.campaign-lists .campaign-list-option:hover{background:var(--panel-2)}
.campaign-lists .campaign-list-option input[type=checkbox]{width:16px;height:16px;margin:0}
.campaign-lists .campaign-list-option span{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campaign-lists .campaign-list-option small{margin:0;color:var(--muted);font-size:13px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
/* A checkbox and its words; its hint lines up with the words, not the box. */
.campaign-check{display:flex;align-items:flex-start;gap:10px;color:var(--text);font-size:14px;font-weight:500;line-height:20px;cursor:pointer}
.campaign-check input{flex:none;width:16px;height:16px;margin:2px 0 0}
.campaign-check:has(input:disabled){color:var(--muted);cursor:not-allowed}
.campaign-check~.campaign-hint,.campaign-checks .campaign-hint{margin:2px 0 0 26px}
.campaign-checks{margin:0}
.campaign-follow-up-warning{margin:12px 0 0 26px;padding:8px 12px;border:1px solid var(--warning-border);border-radius:8px;background:var(--warning-bg);color:var(--warning-text);font-size:12px;line-height:1.5}
.campaign-follow-up-fields{margin:20px 0 0 26px}
/* The follow-up's time: the exact value beside its label, the bug report's slider (shared/stop-slider.css) to drag it
   along, filled in blue (the wait: the portal's colour for what is waiting to go), and the day and hour it would go out.
   Stops sit evenly, so an hour gets as much room as a week. */
.campaign-delay{--thumb:40px;--tone:#078cf2}
:root[data-theme="dark"] .campaign-delay{--tone:#4aa8f7}
.campaign-delay-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.campaign-dialog .campaign-delay-head>label{margin:0}
.campaign-follow-up-delay{display:flex;gap:8px}
/* Up to three digits ("720"), centred; no spinner arrows: the slider is the way to step it. */
.campaign-dialog .campaign-follow-up-delay input{flex:0 0 52px;width:52px;padding-inline:6px;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.campaign-follow-up-delay input::-webkit-inner-spin-button,.campaign-follow-up-delay input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.campaign-field .campaign-follow-up-delay .v-control{flex:0 0 136px;width:136px;min-width:0}
.campaign-delay-scale{margin-top:10px}
/* The labelled stops under the rail, each under its notch (the first and last under the rail's ends) and each a click away,
   with a hit area wider than its words; the one the time is on in full. */
.campaign-delay-ticks{position:relative;height:20px;margin:2px calc(var(--thumb) / 2) 0}
.campaign-delay-ticks span{position:absolute;top:0;transform:translateX(-50%);color:var(--muted);font-size:13px;font-weight:500;line-height:20px;white-space:nowrap;font-variant-numeric:tabular-nums;cursor:pointer;transition:color .15s}
.campaign-delay-ticks span::before{content:"";position:absolute;inset:-6px -8px}
@media(hover:hover){.campaign-delay-ticks span:hover{color:var(--text)}}
.campaign-delay-ticks span:first-child{transform:translateX(calc(var(--thumb) / -2))}
.campaign-delay-ticks span:last-child{transform:translateX(calc(-100% + var(--thumb) / 2))}
.campaign-delay-ticks span[data-on]{color:var(--text);font-weight:600}
.campaign-delay:has(input[type=range]:disabled) .campaign-delay-ticks span{pointer-events:none}
.campaign-delay-when{margin:12px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.campaign-delay-when:empty{display:none}
.campaign-delay-when strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.campaign-follow-up-design{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.campaign-follow-up-state{color:var(--muted);font-size:13px;line-height:1.5}
.campaign-follow-up-state[data-ready="true"]{color:var(--text)}
/* Results of a campaign that went out: the three figures people look at, then the rest as quiet rows. */
.campaign-results-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:16px}
.campaign-section .campaign-results-head h3{float:none;width:auto;margin:0}
.campaign-results-head .campaigns-row-action{min-height:36px;padding:6px 12px}
.campaign-results-lead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:10px}
.campaign-result{min-width:0;padding:14px 18px}
.campaign-result+.campaign-result{border-left:1px solid var(--cd-rule)}
.campaign-result span{display:block;color:var(--muted);font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campaign-result strong{display:block;margin-top:2px;font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.campaign-result small{display:block;min-height:19px;margin-top:2px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.campaign-results-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin-top:8px}
.campaign-result-row{display:grid;grid-template-columns:minmax(0,1fr) auto 56px;align-items:baseline;gap:12px;min-height:40px;padding:10px 0;border-bottom:1px solid var(--cd-rule);font-size:14px;line-height:20px}
.campaign-result-row span{min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campaign-result-row strong{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.campaign-result-row small{color:var(--muted);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
/* Without a single rate among them, the rows end on their figures. */
.campaign-results-more:not([data-rates]) .campaign-result-row{grid-template-columns:minmax(0,1fr) auto}
.campaign-results-more:not([data-rates]) .campaign-result-row small{display:none}
.campaign-results-empty{margin:0;padding:12px 16px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:14px;line-height:1.5}
.campaign-results-notes{margin:16px 0 0;padding:12px 12px 12px 28px;border:1px solid var(--warning-border);border-radius:9px;background:var(--warning-bg);color:var(--warning-text);font-size:12px;line-height:1.5}
/* How it arrives. */
.campaign-preview{display:grid;gap:12px;min-width:0}
.campaign-preview h3{margin:0;color:var(--muted);font-size:13px;font-weight:500}
.campaign-inbox{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.campaign-inbox-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--panel-2);color:var(--muted);font-size:15px;font-weight:600;text-transform:uppercase}
.campaign-inbox-text{display:grid;min-width:0;font-size:14px;line-height:20px}
.campaign-inbox-from,.campaign-inbox-subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campaign-inbox-from{font-weight:600}
.campaign-inbox-subject{font-weight:500}
.campaign-inbox-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--muted)}
.campaign-inbox [data-empty]{color:var(--dim);font-weight:400}
.campaign-dialog .campaign-preview-thumb{aspect-ratio:4/5;margin:0;border-radius:10px;background:var(--panel-2)}
.campaign-preview-thumb[data-editable]{cursor:pointer;transition:border-color .18s}
.campaign-preview-thumb[data-editable]:hover{border-color:var(--focus)}
.campaign-dialog .campaign-preview-thumb[data-thumb-state="none"]{aspect-ratio:3/2;border-style:dashed;background:transparent}
.campaign-preview-thumb[data-thumb-state="loading"]::after{content:"";position:absolute;inset:16px 16px auto;height:12px;border-radius:4px;background:var(--line);box-shadow:0 28px 0 var(--line),0 56px 0 var(--line)}
.campaign-preview-thumb .campaigns-thumb-note{color:var(--muted);font-size:13px}
.campaign-preview-design{width:100%}
.campaign-test{display:grid;gap:8px;margin-top:12px;padding-top:20px;border-top:1px solid var(--cd-rule)}
.campaign-test .campaign-hint{margin:0}
.campaign-test-row{display:flex;gap:8px}
.campaign-test-row input{flex:1 1 auto;min-width:0;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:14px}
.campaign-test-row input:focus,#campaign-schedule-at:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
.campaign-follow-up-test{justify-self:start}
/* The foot: when to send on the left, the buttons on the right. Sending is the one filled button. */
.campaign-dialog-foot{flex:none;padding:12px 20px 14px 32px;border-top:1px solid var(--cd-rule);background:var(--panel)}
.campaign-dialog-foot .campaign-error{margin:0 0 10px}
.campaign-dialog-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.campaign-actions-gap{flex:1 1 0}
#campaign-dialog .campaigns-primary,#campaign-dialog .campaigns-secondary{min-height:40px}
#campaign-dialog .campaign-cancel{border-color:transparent;background:transparent;color:var(--muted)}
#campaign-dialog .campaign-cancel:hover{background:var(--panel-2);color:var(--text)}
/* Viewing a sent campaign, Close is the foot's only button and looks like one. */
#campaign-dialog[data-mode="view"] .campaign-cancel{border-color:var(--line);background:var(--panel);color:var(--text)}
#campaign-dialog .campaigns-primary:disabled,#campaign-dialog .campaigns-secondary:disabled{opacity:.5;cursor:not-allowed}
.campaign-send-panel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.campaign-when{display:inline-flex;flex:none;padding:3px;border-radius:9px;background:var(--panel-2)}
.campaign-radio{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:6px;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .18s,color .18s}
.campaign-radio:hover{color:var(--text)}
.campaign-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.campaign-radio:has(input:checked){background:var(--panel);color:var(--text);box-shadow:0 0 0 1px var(--line)}
.campaign-radio:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
#campaign-schedule-at{height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:14px;font-variant-numeric:tabular-nums}
.campaign-error{white-space:pre-line}
.campaign-stop{border-color:var(--error-border);color:var(--error-text)}
/* Between a phone and the full dialog the preview sits beside its own words: the design on the right of the inbox line. */
@media(max-width:920px){
  .campaign-dialog-body{grid-template-columns:minmax(0,1fr);gap:32px}
  .campaign-preview{grid-template-columns:minmax(0,1fr) 216px;grid-template-areas:"title thumb" "inbox thumb" "design thumb" "test thumb";align-items:start;column-gap:24px;padding-top:24px;border-top:1px solid var(--cd-rule)}
  .campaign-preview>h3{grid-area:title}.campaign-inbox{grid-area:inbox}.campaign-preview-thumb{grid-area:thumb}.campaign-preview-design{grid-area:design}.campaign-test{grid-area:test}
  .campaign-preview-design{justify-self:start;width:auto}
  /* When to send gets its own row; the buttons stay together on the right under it. */
  .campaign-send-panel{flex:1 1 100%}
}
@media(max-width:640px){
  #campaign-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  #campaign-dialog .campaign-dialog-head{padding:14px 8px 12px 16px}
  .campaign-dialog-body{gap:28px;padding:20px 16px 28px}
  .campaign-preview{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
  .campaign-preview>*,.campaign-preview>h3{grid-area:auto}
  .campaign-preview-design{width:100%}
  .campaign-dialog .campaign-preview-thumb{aspect-ratio:1/1}
  .campaign-dialog-foot{padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
  .campaign-send-panel{flex:1 1 100%}
  #campaign-schedule-at{flex:1 1 160px;min-width:0}
  .campaign-actions-gap{display:none}
  .campaign-dialog-actions>button{flex:1 1 0}
  #campaign-dialog .campaigns-primary,#campaign-dialog .campaigns-secondary,.campaign-dialog .campaign-field input:not([type=checkbox],[type=range]),.campaign-field .v-control,.campaign-test-row input,#campaign-schedule-at{min-height:44px}
  .campaign-radio{height:38px}
  .campaign-result{padding:12px}
  .campaign-result strong{font-size:20px}
  .campaign-results-more{grid-template-columns:minmax(0,1fr)}
  .campaign-follow-up-fields{margin-left:0}
}
/* The recipients list opened from a sent campaign's results: a wider dialog with a table that scrolls inside it. */
.campaign-recipients{width:min(880px,calc(100vw - 24px))}
.campaign-recipients .campaign-dialog-head>div{min-width:0}
#campaign-recipients-campaign,#campaign-recipient-campaign{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:.02em}
.campaign-recipients-tools{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 8px}
.campaign-recipients-tools input{min-height:44px;padding:8px 12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:14px;transition:border-color .18s,box-shadow .18s}
.campaign-recipients-tools input{flex:1 1 260px;min-width:0}
.campaign-recipients-tools .v-control{flex:0 1 220px;min-height:44px;background:var(--bg)}
.campaign-recipients-tools input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-soft)}
.campaign-recipients-count{min-height:18px;margin:0 0 8px}
.campaign-recipients-scroll{overflow:auto;max-height:min(54dvh,540px);border:1px solid var(--line);border-radius:10px}
.campaign-recipients-scroll tbody{transition:opacity .18s}
.campaign-recipients-scroll[aria-busy="true"] tbody{opacity:.5}
.campaign-recipients-table{border-collapse:collapse;width:100%;min-width:640px;text-align:left;font-size:14px}
.campaign-recipients-table th{position:sticky;top:0;z-index:1;padding:12px 16px;background:var(--panel-2);box-shadow:inset 0 -1px 0 var(--line);color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.015em;white-space:nowrap}
.campaign-recipients-table td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.campaign-recipients-table tbody tr:last-child td{border-bottom:0}
.campaign-recipients-table tbody tr:hover{background:var(--panel-2)}
.campaign-recipients-table tbody tr{transition:background .18s ease}
.campaign-recipient-name{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.3}
.campaign-recipients-table .campaigns-subject{max-width:300px}
.campaign-recipients-table .campaigns-date-sub{margin-top:4px}
.campaign-recipients-table td.campaign-recipients-state{text-align:center;color:var(--muted);padding:44px 20px;line-height:1.6}
.campaign-recipients-state strong{display:block;color:var(--text);margin-bottom:4px}
.campaign-recipients-state button{margin-top:16px}
.campaign-recipients-more{display:flex;justify-content:center}
.campaign-recipients-more button{margin-top:16px}
.campaign-recipient-status{--status-bg:#fff4dc;--status-border:#efd49b;--status-ink:#76500f;display:inline-block;margin:0 4px 4px 0;padding:2px 10px;border:1px solid var(--status-border);border-radius:999px;background:var(--status-bg);color:var(--status-ink);font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
.campaign-recipient-status[data-tone="ok"]{--status-bg:#e8f6ed;--status-border:#bde4ca;--status-ink:#24633b}
.campaign-recipient-status[data-tone="info"]{--status-bg:#eaf2fc;--status-border:#c4d8f0;--status-ink:#285786}
.campaign-recipient-status[data-tone="bad"]{--status-bg:var(--error-bg);--status-border:var(--error-border);--status-ink:var(--error-text)}
.campaign-recipient-status[data-tone="muted"]{--status-bg:var(--panel-2);--status-border:var(--line);--status-ink:var(--muted)}
.campaign-recipient-status[data-tone="warm"]{--status-bg:#ffeadb;--status-border:#f4c5a3;--status-ink:#8c3d0a}
:root[data-theme="dark"] .campaign-recipient-status{--status-bg:#493b24;--status-border:#79603a;--status-ink:#f0ca81}
:root[data-theme="dark"] .campaign-recipient-status[data-tone="warm"]{--status-bg:#4d2f1c;--status-border:#85502d;--status-ink:#ffb88a}
:root[data-theme="dark"] .campaign-recipient-status[data-tone="ok"]{--status-bg:#1c4436;--status-border:#2d6952;--status-ink:#91deb1}
:root[data-theme="dark"] .campaign-recipient-status[data-tone="info"]{--status-bg:#1d3851;--status-border:#315b7d;--status-ink:#8ac8ff}
:root[data-theme="dark"] .campaign-recipient-status[data-tone="bad"]{--status-bg:var(--error-bg);--status-border:var(--error-border);--status-ink:var(--error-text)}
:root[data-theme="dark"] .campaign-recipient-status[data-tone="muted"]{--status-bg:var(--panel-2);--status-border:var(--line);--status-ink:var(--muted)}
/* The panel of all the email's links in the results, and the links in a recipient's timeline. */
.campaign-links-table a,.campaign-recipient-timeline a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.campaign-links{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.campaign-links summary{padding:12px;color:var(--text);font-size:12px;font-weight:600;cursor:pointer}
.campaign-links[open] summary{border-bottom:1px solid var(--line)}
.campaign-links-scroll{max-height:260px;overflow:auto}
.campaign-links-table{width:100%;border-collapse:collapse;font-size:12px}
.campaign-links-table th{padding:8px 12px;color:var(--dim);font-weight:600;text-align:left;white-space:nowrap}
.campaign-links-table th:first-child{width:100%}
.campaign-links-table td{padding:8px 12px;border-top:1px solid var(--line)}
.campaign-links-table th:not(:first-child),.campaign-links-table td:not(:first-child){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.campaign-links-url{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campaign-links-table td.campaign-links-state{max-width:none;color:var(--muted);text-align:center;white-space:normal;padding:16px 12px}
/* A row of the recipients list is a person that can be opened: name, status, a ✓ for opened and for clicked. */
.campaign-recipients-table tbody tr[data-recipient]{cursor:pointer}
.campaign-recipient-open{display:block;max-width:300px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.campaign-recipient-open:hover .campaign-recipient-name{text-decoration:underline}
.campaign-recipient-open:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
.campaign-recipients-table td.campaign-recipient-go{width:1%;padding-left:0;color:var(--dim);font-size:18px;line-height:1.2;text-align:right}
.campaign-recipient-yes{color:#24633b;font-weight:700}
:root[data-theme="dark"] .campaign-recipient-yes{color:#91deb1}
.campaign-recipient-times{color:var(--dim);font-size:12px}
/* One recipient in detail. */
.campaign-recipient .campaign-dialog-head>div{min-width:0}
.campaign-recipient-email{margin:6px 0 0;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.campaign-recipient-badges{display:flex;flex-wrap:wrap;margin-top:16px}
.campaign-recipient-reason{margin:8px 0 0;color:var(--error-text);font-size:12px;line-height:1.5}
.campaign-recipient-facts{display:grid;margin:20px 0 24px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.campaign-recipient-facts>div{display:grid;grid-template-columns:minmax(96px,30%) minmax(0,1fr);gap:12px;padding:12px;border-top:1px solid var(--line);font-size:14px}
.campaign-recipient-facts>div:first-child{border-top:0}
.campaign-recipient-facts dt{padding-top:2px;color:var(--muted);font-size:12px;font-weight:600}
.campaign-recipient-facts dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.campaign-recipient-body h3{margin:0 0 12px}
.campaign-recipient-timeline{margin:0 0 0 6px;padding:0;border-left:2px solid var(--line);list-style:none}
.campaign-recipient-timeline li{position:relative;display:grid;grid-template-columns:136px minmax(0,1fr);gap:12px;padding:6px 0 6px 16px;font-size:14px}
.campaign-recipient-timeline li::before{content:"";position:absolute;left:-7px;top:12px;width:8px;height:8px;border:2px solid var(--panel);border-radius:50%;background:var(--dim)}
.campaign-recipient-timeline time{padding-top:2px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.campaign-recipient-timeline span{min-width:0;overflow-wrap:anywhere}
.campaign-recipient-state{margin:0;padding:32px 12px;color:var(--muted);line-height:1.6;text-align:center}
.campaign-recipient-state button{margin-top:16px}
@media(max-width:560px){.campaign-recipients-tools .v-control{flex:1 1 100%}.campaign-recipient-facts>div,.campaign-recipient-timeline li{grid-template-columns:1fr;gap:2px}}
/* The follow-up email: set up in a draft's dialog, summed up in its sent campaign's results, listed under its campaign. */
.campaign-follow-up-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.campaign-follow-up-summary p{display:grid;gap:2px;min-width:0;margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.campaign-follow-up-summary strong{color:var(--text);font-size:14px}
.campaign-follow-up-summary span{overflow-wrap:anywhere}
.campaign-follow-up-summary .campaigns-row-action{flex:none;padding:8px 12px}
.campaigns-follow-up-row td:first-child{position:relative;padding-left:52px}
.campaigns-follow-up-row td:first-child::before{content:"";position:absolute;left:32px;top:-1px;width:12px;height:calc(50% - 4px);border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-bottom-left-radius:6px}
.campaigns-list-table .campaigns-follow-up-row td:first-child{padding-left:48px}
.campaigns-list-table .campaigns-follow-up-row td:first-child::before{left:30px;width:10px;height:24px}
.campaigns-follow-up-tag{display:inline-block;margin-right:6px;padding:0 6px;border-radius:4px;background:var(--panel-2);color:var(--muted);font-size:12px;font-style:normal;font-weight:500;line-height:18px;vertical-align:baseline}
@media(max-width:560px){.campaign-follow-up-summary{flex-wrap:wrap}.campaign-follow-up-summary .campaigns-row-action{flex:1 1 100%}}