/* ============================================================================
   screens/email.css - Email Blast, the client acquisition engine
   ----------------------------------------------------------------------------
   Seven panels behind one tab strip: Today, Replies, Prospects, Campaigns,
   Templates, Files and Delivery, plus the prospect card drawer and the quick
   send dialog.

   WHAT THIS FILE DOES NOT DO. Everything shared with other screens comes from
   the files above it and is not restated here:

     .btn .fchip .pill .av .note        components.css (controls and atoms)
     .ui-dt .ui-pager .ui-fb .ui-meter  components.css (table, pager, filters)
     .ui-field .ui-input .ui-check      components.css (form controls)
     .phead .pbody                      mobile.css (the phone head and column)

   So what is left is the vocabulary only this screen has: the tab strip,
   the state chips, rows and cards, the email as a prospect will see it, the
   pipeline board, the timeline, the practice report and the delivery checks.

   THREE DECISIONS THAT SHAPE EVERY RULE BELOW.

   1. A STATE IS NEVER COLOUR ALONE. Every chip carries its word; the tone only
      agrees with it. Live and practice carry an icon as well as a colour.

   2. THE EMAIL LOOKS LIKE AN EMAIL. A preview is set on white, in a readable
      measure, with the footer and the files underneath, because that is what
      the prospect sees and the point of a preview is not to be surprised.

   3. NOTHING SCROLLS SIDEWAYS ON A PHONE. Tabs and chip rows wrap; tables sit
      in their own scroller; the board becomes one column.

   COLOUR. Every value is a token from tokens.css. No hex, no rgba, no priority
   flag. MOTION. Durations are --t-* tokens, which base.css collapses for
   anyone who asked the system for less motion.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Shell
   --------------------------------------------------------------------------- */

.em,
.em-mbody{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  min-width:0;
}

.em-mbody{ gap:var(--s-3); }

.em-panel,
.em-host{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  min-width:0;
}

.em-tb-actions{
  flex:none;
  display:flex;
  align-items:center;
  gap:var(--s-2);
}

.em-tb-actions:empty{ display:none; }

.em-notice:empty{ display:none; }

/* [hidden] loses to any class that sets display (base.css and the component
   sheets carry the same specificity, and the components load later), so a
   hidden field, form half or block inside this screen is hidden again here
   with one class more. */
.em-compose [hidden],
.em-form [hidden],
.em-q [hidden],
.em-pick [hidden],
.em-pc [hidden],
.em-host [hidden],
.em-tabs [hidden],
.phead-row .pill[hidden],
.em-sec[hidden]{ display:none; }

.em-notice-in{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  padding:var(--s-4);
  border:1px solid var(--gold-300);
  border-radius:var(--r-lg);
  background:var(--gold-a05);
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
}

.em-notice-in > .ic{
  flex:none;
  width:20px;
  height:20px;
  margin-top:1px;
  color:var(--gold-700);
}

.em-notice-in > div{ flex:1; min-width:0; }
.em-notice-in p{ margin:var(--s-1) 0 0; color:var(--muted); }
.em-notice-in .btn{ flex:none; align-self:center; }

.em-notice-in--practice{
  border-color:var(--gray-200);
  background:var(--white);
}

.em-notice-in--practice > .ic{ color:var(--navy-600); }


/* ---------------------------------------------------------------------------
   2. Tab strip
   --------------------------------------------------------------------------- */

.em-tabs:empty{ display:none; }

.em-tabs-in{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  min-width:0;
  padding-bottom:var(--s-1);
  border-bottom:1px solid var(--gray-200);
}

.em-tab{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  min-height:38px;
  padding:0 var(--s-4);
  border:1px solid transparent;
  border-radius:var(--r);
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease-out),
             color var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out);
}

.em-tab .ic{ width:17px; height:17px; flex:none; }

.em-tab:hover{ background:var(--gray-100); color:var(--ink); }

.em-tab.is-on{
  border-color:var(--gold-300);
  background:var(--gold-a14);
  color:var(--navy-900);
}

.em-tab-n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--gold);
  color:var(--navy-900);
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}


/* ---------------------------------------------------------------------------
   3. Bars, sections, figures
   --------------------------------------------------------------------------- */

.em-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-3);
  min-width:0;
}

.em-bar-t{ min-width:0; flex:1 1 280px; }

.em-bar-t h2{
  margin:0;
  font-family:var(--f-disp);
  font-size:17px;
  font-weight:600;
  color:var(--navy-900);
  text-wrap:balance;
}

.em-bar-t p{ margin:var(--s-1) 0 0; max-width:70ch; }

.em-bar-acts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
}

.em-sec{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  min-width:0;
  padding:var(--s-5);
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  background:var(--white);
  box-shadow:var(--sh-sm);
}

.em-sec--lead{ border-color:var(--gold-300); }

.em-sec--live{
  border-color:var(--green);
  background:var(--white);
}

.em-sec--flush{ padding:0; overflow:hidden; }

.em-sec-h{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-3);
}

.em-sec-ht{ min-width:0; flex:1 1 260px; }

.em-sec-ht h2{
  margin:0;
  font-family:var(--f-disp);
  font-size:15px;
  font-weight:600;
  color:var(--navy-900);
  text-wrap:balance;
}

.em-sec-sub{
  margin:var(--s-1) 0 0;
  max-width:72ch;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.em-sec-acts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
}

.em-sec-b{ min-width:0; display:flex; flex-direction:column; gap:var(--s-3); }

.em-grid2{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
  gap:var(--s-4);
  align-items:start;
}

.em-col{ display:flex; flex-direction:column; gap:var(--s-4); min-width:0; }

.em-figs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--s-3);
}

.em-fig{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  min-width:0;
  padding:var(--s-4);
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  background:var(--white);
  color:var(--ink);
  font:inherit;
  text-align:left;
}

.em-fig--btn{
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.em-fig--btn:hover{ border-color:var(--gold-300); box-shadow:var(--sh-sm); }

.em-fig-l{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.em-fig-l .ic{ width:15px; height:15px; flex:none; }

.em-fig-v{
  font-family:var(--f-disp);
  font-size:26px;
  font-weight:600;
  color:var(--navy-900);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.em-fig-f{ color:var(--muted); font-size:12px; line-height:1.4; }

.em-fig--gold{ border-color:var(--gold-300); background:var(--gold-a05); }
.em-fig--good .em-fig-v{ color:var(--green-700); }
.em-fig--bad .em-fig-v{ color:var(--red-700); }

.em-muted{ color:var(--muted); font-size:13px; }
.em-mono{ font-family:var(--f-mono); font-size:12.5px; overflow-wrap:anywhere; }
.em-spacer{ flex:1; }
.em-foot{ margin:0; }

.em-warn{
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  margin:0;
  color:var(--gold-700);
  font-size:13px;
  line-height:1.5;
}

.em-warn .ic{ width:16px; height:16px; flex:none; margin-top:2px; }

.em-note{
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  margin:0;
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r);
  background:var(--gray-50);
  color:var(--ink);
  font-size:13px;
}

.em-note .ic{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--navy-600); }

.em-link{
  padding:0;
  border:0;
  background:none;
  color:var(--navy-900);
  font:inherit;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}

.em-link:hover{ text-decoration:underline; }

.em-back{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  align-self:flex-start;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}

.em-back .ic{ width:16px; height:16px; }
.em-back:hover{ color:var(--navy-900); }


/* ---------------------------------------------------------------------------
   4. Chips, the mode badge, signs
   --------------------------------------------------------------------------- */

/* Same shape as the shared .bdg (11px, --r-sm), so a status reads the same in
   Email Blast as in every other module. */
.em-chip{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 var(--s-2);
  border-radius:var(--r-sm);
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}

.em-chip--slate{ background:var(--gray-100); color:var(--gray-600); }
.em-chip--blue{ background:var(--blue-100); color:var(--blue); }
.em-chip--gold{ background:var(--gold-100); color:var(--gold-700); }
.em-chip--navy{ background:var(--gray-100); color:var(--navy-800); }
.em-chip--green{ background:var(--green-100); color:var(--green-700); }
.em-chip--red{ background:var(--red-100); color:var(--red-700); }

.em-mode{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  min-height:26px;
  padding:0 var(--s-3);
  border-radius:var(--r-sm);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}

.em-mode .ic{ width:14px; height:14px; }
.em-mode--practice{ background:var(--gray-100); color:var(--navy-800); }
.em-mode--live{ background:var(--green-100); color:var(--green-700); }

.em-signs{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }

.em-sign{
  display:inline-flex;
  align-items:center;
  gap:2px;
  color:var(--muted);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.em-sign .ic{ width:15px; height:15px; }
.em-sign--hot{ color:var(--gold-700); font-weight:700; }

.em-due{ display:inline-flex; align-items:center; gap:var(--s-1); color:var(--muted); font-size:12px; white-space:nowrap; }
.em-due .ic{ width:13px; height:13px; }
.em-due--late{ color:var(--red-700); font-weight:700; }

.em-smtp{ max-width:28ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.em-chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.em-chips + .em-cards{ margin-top:var(--s-4); }

.em-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2);
}

.em-kind,
.em-sort{ min-width:180px; }


/* ---------------------------------------------------------------------------
   5. Rows and lists
   --------------------------------------------------------------------------- */

.em-list{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
  list-style:none;
}

.em-list > li + li{ border-top:1px solid var(--gray-100); }

.em-row{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  width:100%;
  min-width:0;
  padding:var(--s-3) var(--s-1);
  border:0;
  border-radius:var(--r);
  background:transparent;
  color:var(--ink);
  font:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease-out);
}

.em-row:hover{ background:var(--gray-50); }
.em-row--static{ cursor:default; }
.em-row--static:hover{ background:transparent; }
.em-row.is-faded,
.em-tl-i.is-faded{ opacity:.55; }

.em-row--stack{ flex-direction:column; align-items:stretch; gap:var(--s-2); }

.em-row-top{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }

.em-row-ic{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:var(--r);
  background:var(--gray-100);
  color:var(--navy-800);
}

.em-row-ic .ic{ width:17px; height:17px; }

.em-row-m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }

.em-row-t{ font-weight:700; color:var(--navy-900); overflow-wrap:anywhere; }

.em-row-s{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.em-row-r{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:var(--s-2);
  max-width:50%;
}

.em-row-r > .ic{ width:16px; height:16px; color:var(--muted); }

.em-quote{
  margin:0;
  padding:var(--s-2) var(--s-3);
  border-left:3px solid var(--gold-300);
  background:var(--gray-50);
  color:var(--ink);
  font-size:13.5px;
  line-height:1.55;
  white-space:pre-line;
  overflow-wrap:anywhere;
}

.em-cell-who{ display:flex; align-items:center; gap:var(--s-2); min-width:0; }
.em-cell-who > span:last-child{ display:flex; flex-direction:column; min-width:0; }

/* An address is read as one word: cut it with an ellipsis rather than
   breaking it across two lines, and keep the whole of it in the title. */
.em-cell-who .em-mono{
  max-width:32ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow-wrap:normal;
}
.em-cell-next{ display:flex; flex-direction:column; gap:2px; min-width:0; }

.em-list-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2);
  margin-bottom:var(--s-2);
}

.em-list-host,
.em-prospects-b{ display:flex; flex-direction:column; gap:var(--s-3); min-width:0; }

.em-steps{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-3); }

.em-step{ display:flex; align-items:flex-start; gap:var(--s-3); }

.em-step-n{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:var(--gold);
  color:var(--navy-900);
  font-weight:700;
}

.em-step-b{ flex:1; min-width:0; }
.em-step-b p{ margin:2px 0 0; color:var(--muted); font-size:13px; }

.em-funnel{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-2); }

.em-funnel-row{
  display:grid;
  grid-template-columns:110px minmax(0, 1fr) 40px;
  align-items:center;
  gap:var(--s-2);
  font-size:13px;
}

.em-funnel-l{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.em-funnel-track{
  position:relative;
  height:8px;
  border-radius:999px;
  background:var(--gray-100);
  overflow:hidden;
}

.em-funnel-bar{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--w, 0%);
  border-radius:999px;
  background:var(--gray-400);
  transition:width var(--t-slow) var(--ease-out);
}

.em-funnel-bar--blue{ background:var(--blue); }
.em-funnel-bar--gold{ background:var(--gold); }
.em-funnel-bar--navy{ background:var(--navy-600); }
.em-funnel-bar--green{ background:var(--green); }
.em-funnel-bar--red{ background:var(--red); }

.em-funnel-v{ text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; }


/* ---------------------------------------------------------------------------
   6. Cards
   --------------------------------------------------------------------------- */

.em-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  align-items:start;
  gap:var(--s-3);
  margin:0;
  padding:0;
  list-style:none;
}

.em-cards--one{ grid-template-columns:minmax(0, 1fr); }

.em-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  min-width:0;
  padding:var(--s-4);
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  background:var(--white);
  color:var(--ink);
  text-decoration:none;
}

.em-card--lead{ border-color:var(--gold-300); }

.em-card--link{
  transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.em-card--link:hover{ border-color:var(--gold-300); box-shadow:var(--sh-sm); }

.em-card-h{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--s-3); min-width:0; }

.em-card-t{ flex:1 1 11rem; min-width:0; display:flex; flex-direction:column; gap:2px; }
.em-card-t b{ color:var(--navy-900); overflow-wrap:anywhere; }

.em-card-chips{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s-1); }

.em-card-note{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.em-card-stats{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
  color:var(--muted);
  font-size:12.5px;
}

.em-card-stats > span{ display:inline-flex; align-items:center; gap:var(--s-1); }
.em-card-stats .ic{ width:14px; height:14px; }

.em-card-acts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  margin-top:auto;
  padding-top:var(--s-2);
}

.em-file-ic{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:var(--r);
  background:var(--gold-a14);
  color:var(--gold-700);
}

.em-file-ic .ic{ width:19px; height:19px; }

.em-reply-s{ margin:0; font-weight:600; color:var(--navy-900); }
.em-reply--bounce_hard,
.em-reply--optout{ border-color:var(--red-100); }


/* ---------------------------------------------------------------------------
   7. Today
   --------------------------------------------------------------------------- */

.em-today{ display:flex; flex-direction:column; gap:var(--s-4); min-width:0; }


/* ---------------------------------------------------------------------------
   8. Board
   --------------------------------------------------------------------------- */

.em-board{
  display:grid;
  grid-template-columns:repeat(7, minmax(150px, 1fr));
  gap:var(--s-3);
  align-items:start;
  overflow-x:auto;
  padding-bottom:var(--s-2);
}

.em-board-col{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  min-width:0;
  padding:var(--s-3);
  border-radius:var(--r-lg);
  background:var(--gray-50);
  border-top:3px solid var(--gray-300);
}

.em-board-col--contacted{ border-top-color:var(--blue); }
.em-board-col--replied,
.em-board-col--meeting{ border-top-color:var(--gold); }
.em-board-col--proposal{ border-top-color:var(--navy-600); }
.em-board-col--client{ border-top-color:var(--green); }
.em-board-col--lost{ border-top-color:var(--red); }

.em-board-h{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s-2); }
.em-board-h b{ color:var(--navy-900); }
.em-board-n{ font-family:var(--f-mono); color:var(--muted); font-size:12px; }
.em-board-v{ margin-left:auto; color:var(--green-700); font-size:12px; font-weight:600; }

.em-board-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-2); }

.em-board-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  width:100%;
  padding:var(--s-3);
  border:1px solid var(--gray-200);
  border-radius:var(--r);
  background:var(--white);
  color:var(--ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.em-board-card:hover{ border-color:var(--gold-300); box-shadow:var(--sh-sm); }
.em-board-t{ font-weight:700; color:var(--navy-900); overflow-wrap:anywhere; }
.em-board-s{ color:var(--muted); font-size:12.5px; line-height:1.4; }
.em-board-m{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.em-board-empty,
.em-board-more{ margin:0; color:var(--muted); font-size:12.5px; }


/* ---------------------------------------------------------------------------
   9. Forms inside dialogs and sections
   --------------------------------------------------------------------------- */

.em-form{ display:flex; flex-direction:column; gap:var(--s-3); min-width:0; }

.em-form-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--s-3);
}

.em-form-row--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

.em-form-acts{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s-2); }

/* Connecting the sender mailbox: the password and its Show button share a row,
   and the status line sits left of the button while the login is tried. */
.em-pass{ display:flex; align-items:center; gap:var(--s-2); min-width:0; }
.em-pass .ui-input{ flex:1 1 auto; min-width:0; }
.em-connect .em-form-acts{ align-items:center; }
.em-connect .em-form-acts .em-muted{ flex:1 1 12rem; margin:0; }

.em-label-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap; }
.em-label-row h3{ margin:0; font-size:14px; color:var(--navy-900); }

.em-file-in{ font:inherit; font-size:13px; max-width:100%; }

.em-quickdates{ display:flex; flex-wrap:wrap; gap:var(--s-1); margin-top:var(--s-1); }

.em-days-grid{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); }

.em-days{ border:0; margin:0; padding:0; min-width:0; }

.em-fold{
  border:1px solid var(--gray-200);
  border-radius:var(--r);
  background:var(--white);
}

.em-fold > summary{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  color:var(--navy-900);
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
  list-style:none;
}

.em-fold > summary::-webkit-details-marker{ display:none; }
.em-fold > summary .ic{ width:16px; height:16px; transition:transform var(--t-fast) var(--ease-out); transform:rotate(-90deg); }
.em-fold[open] > summary .ic{ transform:rotate(0deg); }
.em-fold > :not(summary){ margin:0 var(--s-3) var(--s-3); }

.em-code{
  margin:0;
  padding:var(--s-3);
  border-radius:var(--r);
  background:var(--navy-900);
  color:var(--gray-50);
  font-family:var(--f-mono);
  font-size:12px;
  line-height:1.55;
  white-space:pre;
  overflow-x:auto;
}

.em-code-i{
  display:block;
  margin-top:var(--s-1);
  font-family:var(--f-mono);
  font-size:11.5px;
  color:var(--muted);
  overflow-wrap:anywhere;
}


/* ---------------------------------------------------------------------------
   10. The editor
   --------------------------------------------------------------------------- */

.em-compose{ display:flex; flex-direction:column; gap:var(--s-3); min-width:0; }

.em-body-in{
  min-height:220px;
  font-family:var(--f-ui);
  font-size:14.5px;
  line-height:1.6;
  resize:vertical;
}

.em-compose-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }

.em-count{ color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.em-count.is-long{ color:var(--gold-700); font-weight:700; }

.em-lang-f{ max-width:260px; }

.em-tokens{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-1);
  margin-bottom:var(--s-2);
}

.em-tokens--static{ margin:0; }

.em-token{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 var(--s-2);
  border:1px dashed var(--gray-300);
  border-radius:var(--r-sm);
  background:var(--gray-50);
  color:var(--navy-800);
  font-family:var(--f-mono);
  font-size:11.5px;
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

button.em-token:hover{ border-color:var(--gold); background:var(--gold-a05); }
.em-tokens--static .em-token{ cursor:default; }

.em-steps-ed{ display:flex; flex-direction:column; gap:var(--s-4); }

.em-step-ed{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-4);
  border:1px solid var(--gray-200);
  border-left:3px solid var(--gold-300);
  border-radius:var(--r);
  background:var(--gray-50);
}

.em-step-ed-h{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.em-step-ed-h b{ color:var(--navy-900); }
.em-delay{ width:72px; }
.em-delay-l{ color:var(--ink); font-size:13px; }

.em-ai{ display:flex; flex-direction:column; gap:var(--s-3); }
.em-ai-go{ display:flex; justify-content:flex-start; }
.em-ai-result:empty{ display:none; }
.em-ai-draft{ display:flex; flex-direction:column; gap:var(--s-3); }

.em-ai-by{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
  margin:0;
  color:var(--navy-800);
  font-size:13px;
  font-weight:600;
}

.em-ai-by .ic{ width:16px; height:16px; color:var(--gold-700); }

.em-ai-copy{
  padding:var(--s-4);
  border:1px solid var(--gray-200);
  border-radius:var(--r);
  background:var(--white);
}

.em-ai-s{ margin:0 0 var(--s-2); }

.em-ai-body{
  margin:0;
  font-family:var(--f-ui);
  font-size:14px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--ink);
}

.em-facts{ margin:0; padding-left:var(--s-5); color:var(--ink); font-size:13px; line-height:1.6; }


/* ---------------------------------------------------------------------------
   11. The email as the prospect sees it
   --------------------------------------------------------------------------- */

.em-preview-in{ display:flex; flex-direction:column; gap:var(--s-3); }

.em-mail{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  max-width:680px;
  padding:var(--s-5);
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  background:var(--white);
  box-shadow:var(--sh-sm);
}

.em-mail-h{ margin:0; display:flex; flex-direction:column; gap:var(--s-1); padding-bottom:var(--s-3); border-bottom:1px solid var(--gray-100); }
.em-mail-h > div{ display:flex; gap:var(--s-2); font-size:13px; }
.em-mail-h dt{ flex:none; width:64px; color:var(--muted); }
.em-mail-h dd{ margin:0; min-width:0; overflow-wrap:anywhere; color:var(--ink); }
.em-mail-s{ font-weight:700; color:var(--navy-900); }

.em-mail-b{ color:var(--ink); font-size:14.5px; line-height:1.65; overflow-wrap:anywhere; }
.em-mail-b p{ margin:0 0 var(--s-3); }
.em-mail-b ul{ margin:0 0 var(--s-3); padding-left:var(--s-5); }
.em-mail-b a{ color:var(--blue); }

.em-mail-foot{
  padding-top:var(--s-3);
  border-top:1px solid var(--gray-100);
}

.em-mail-foot .em-mail-b{ color:var(--muted); font-size:12px; line-height:1.55; }

.em-mail-files{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  margin:0;
  padding:0;
  list-style:none;
}

.em-mail-file{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r);
  background:var(--gray-50);
  font-size:13px;
}

.em-mail-file .ic{ width:16px; height:16px; color:var(--gold-700); }


/* ---------------------------------------------------------------------------
   12. Checks, reports, the live keys
   --------------------------------------------------------------------------- */

.em-checks{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-2); }

.em-check{
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r);
  font-size:13.5px;
  line-height:1.5;
}

.em-check .ic{ width:16px; height:16px; flex:none; margin-top:2px; }
.em-check--block{ background:var(--red-100); color:var(--red-700); }
.em-check--warn{ background:var(--gold-a05); color:var(--gold-700); }

.em-elig{
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  margin:0;
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r);
  background:var(--gray-50);
  color:var(--ink);
  font-size:13.5px;
  line-height:1.5;
}

.em-elig .ic{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--gray-500); }
.em-elig--ok{ background:var(--green-100); color:var(--green-700); }
.em-elig--ok .ic{ color:var(--green-700); }

.em-report{ display:flex; flex-direction:column; gap:var(--s-3); }

.em-skips{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-1); }
.em-skips li{ display:flex; align-items:center; gap:var(--s-2); font-size:13px; }

.em-skip-n{
  flex:none;
  min-width:32px;
  padding:0 var(--s-1);
  border-radius:var(--r-sm);
  background:var(--gray-100);
  font-family:var(--f-mono);
  font-weight:700;
  text-align:center;
}

.em-schedule{ display:flex; align-items:flex-start; gap:var(--s-2); margin:0; font-size:13.5px; color:var(--ink); }
.em-schedule .ic{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--navy-600); }

.em-launch-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.em-launch-out:empty{ display:none; }

.em-test{ display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; }
.em-test .ui-input{ width:220px; max-width:100%; }

.em-missing{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-1); }
.em-missing li{ display:flex; align-items:flex-start; gap:var(--s-2); color:var(--muted); font-size:13px; }
.em-missing .ic{ width:14px; height:14px; flex:none; margin-top:3px; }

.em-live{ display:flex; flex-direction:column; gap:var(--s-3); }
.em-live-h{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3); }
.em-live-h p{ margin:0; flex:1 1 320px; line-height:1.55; }

.em-keys{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--s-2); }

.em-key{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--gray-200);
  border-radius:var(--r);
  color:var(--muted);
  font-size:13px;
}

.em-key-ic{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:var(--gray-100);
}

.em-key-ic .ic{ width:14px; height:14px; }
.em-key.is-on{ border-color:var(--green-100); color:var(--ink); }
.em-key.is-on .em-key-ic{ background:var(--green-100); color:var(--green-700); }

.em-table-scroll{ overflow-x:auto; max-width:100%; }

.em-table{ width:100%; border-collapse:collapse; font-size:13px; }
.em-table th{ text-align:left; padding:var(--s-2); color:var(--muted); font-weight:600; border-bottom:1px solid var(--gray-200); white-space:nowrap; }
.em-table td{ padding:var(--s-2); border-bottom:1px solid var(--gray-100); vertical-align:top; }


/* ---------------------------------------------------------------------------
   13. Prospect card
   --------------------------------------------------------------------------- */

.em-pc{ display:flex; flex-direction:column; gap:var(--s-4); min-width:0; }

.em-pc-id{ display:flex; flex-direction:column; gap:var(--s-2); }

.em-pc-top{ display:flex; align-items:flex-start; gap:var(--s-3); flex-wrap:wrap; }
.em-pc-name{ flex:1 1 200px; min-width:0; display:flex; flex-direction:column; }
.em-pc-name b{ font-family:var(--f-disp); font-size:17px; font-weight:600; color:var(--navy-900); overflow-wrap:anywhere; }
.em-pc-name span{ color:var(--muted); font-size:13px; }
.em-pc-chips{ display:flex; flex-wrap:wrap; gap:var(--s-1); }

.em-pc-contact{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-1); font-size:13.5px; }
.em-pc-contact li{ display:flex; align-items:center; gap:var(--s-2); min-width:0; }
.em-pc-contact .ic{ width:15px; height:15px; flex:none; color:var(--muted); }
.em-pc-contact a{ color:var(--blue); overflow-wrap:anywhere; }

.em-pc-facts{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin:0; color:var(--muted); font-size:12.5px; }
.em-pc-facts span{ display:inline-flex; align-items:center; gap:var(--s-1); }
.em-pc-facts .ic{ width:13px; height:13px; }
.em-pc-notes{ margin:0; font-size:13px; color:var(--ink); white-space:pre-line; }

.em-pc-acts{ display:flex; flex-wrap:wrap; gap:var(--s-2); }

.em-pc-next{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-4);
  border:1px solid var(--gold-300);
  border-radius:var(--r-lg);
  background:var(--gold-a05);
}

.em-pc-next h3{ margin:0; font-size:14px; color:var(--navy-900); }
.em-pc-tab{ min-width:0; }

.em-tl{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }

.em-tl-i{
  display:flex;
  gap:var(--s-3);
  padding:var(--s-2) 0;
  position:relative;
}

.em-tl-i + .em-tl-i{ border-top:1px dashed var(--gray-200); }

.em-tl-ic{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:var(--gray-100);
  color:var(--navy-800);
}

.em-tl-ic .ic{ width:15px; height:15px; }
.em-tl-i--in .em-tl-ic{ background:var(--gold-a14); color:var(--gold-700); }
.em-tl-i--out .em-tl-ic{ background:var(--blue-100); color:var(--blue); }
.em-tl-b{ min-width:0; flex:1; }
.em-tl-b p{ margin:0; font-size:13.5px; line-height:1.5; overflow-wrap:anywhere; }

.em-trust{ display:flex; flex-direction:column; gap:var(--s-3); }
.em-trust-h{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.em-trust-h > div{ flex:1; min-width:0; display:flex; flex-direction:column; }

.em-score{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:999px;
  font-family:var(--f-disp);
  font-size:18px;
  font-weight:700;
}

.em-score.is-good{ background:var(--green-100); color:var(--green-700); }
.em-score.is-mid{ background:var(--gold-a14); color:var(--gold-700); }
.em-score.is-bad{ background:var(--red-100); color:var(--red-700); }

.em-trust-s p{ margin:0 0 var(--s-1); font-size:13px; }
.em-trust-s blockquote{
  margin:0;
  padding:var(--s-3);
  border-left:3px solid var(--gold);
  background:var(--gray-50);
  font-size:13.5px;
  line-height:1.55;
}


/* ---------------------------------------------------------------------------
   14. Quick send and pickers
   --------------------------------------------------------------------------- */

.em-q{ display:flex; flex-direction:column; gap:var(--s-4); }

.em-q-sec{ display:flex; flex-direction:column; gap:var(--s-2); }
.em-q-sec h3{ margin:0; font-size:14px; color:var(--navy-900); }

.em-q-search,
.em-q-new{ display:flex; flex-direction:column; gap:var(--s-2); align-items:flex-start; }
.em-q-search > .ui-field,
.em-q-new > .em-form-row{ align-self:stretch; }

.em-q-results{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-1); align-self:stretch; }

.em-q-hit{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--s-2);
  width:100%;
  padding:var(--s-2) var(--s-3);
  border:1px solid var(--gray-200);
  border-radius:var(--r);
  background:var(--white);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.em-q-hit:hover{ border-color:var(--gold-300); background:var(--gold-a05); }

.em-q-chosen{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3);
  border:1px solid var(--gray-200);
  border-radius:var(--r);
  background:var(--gray-50);
}

.em-q-chosen > div{ flex:1; min-width:0; display:flex; flex-direction:column; }
.em-q-chosen b{ color:var(--navy-900); }

.em-q-files{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-1); }
.em-q-files li{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); font-size:13px; }
.em-q-files .ic{ width:16px; height:16px; color:var(--gold-700); }

.em-q-mode{
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  margin:0;
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r);
  background:var(--gray-100);
  color:var(--navy-800);
  font-size:13px;
}

.em-q-mode .ic{ width:16px; height:16px; flex:none; margin-top:1px; }
.em-q-mode.is-live{ background:var(--green-100); color:var(--green-700); }

.em-q-result:empty{ display:none; }
.em-q-report{ display:flex; flex-direction:column; gap:var(--s-3); }

.em-pick-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; max-height:48vh; overflow-y:auto; }

.em-pick-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2);
  padding:var(--s-2) 0;
  border-bottom:1px solid var(--gray-100);
}

.em-pick-row .ui-check-l{ display:flex; flex-direction:column; }
.em-pick-x{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.em-pick-total{ margin:var(--s-2) 0; color:var(--muted); font-size:13px; }
.em-pick-total.is-over{ color:var(--red-700); font-weight:700; }

.em-choices{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-2); }
.em-choices .btn{ justify-content:flex-start; text-align:left; }

.em-import-in{ font-family:var(--f-mono); font-size:12.5px; }
.em-import-sum{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0 0 var(--s-2); }


/* ---------------------------------------------------------------------------
   15. Campaign page
   --------------------------------------------------------------------------- */

.em-camp{ display:flex; flex-direction:column; gap:var(--s-4); min-width:0; }

.em-camp-h{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--s-3); }
.em-camp-t{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); min-width:0; }
.em-camp-t h2{ margin:0; font-family:var(--f-disp); font-size:17px; color:var(--navy-900); overflow-wrap:anywhere; }

.em-copy{ display:flex; flex-direction:column; gap:var(--s-3); }

.em-copy-i{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  padding:var(--s-3);
  border:1px solid var(--gray-200);
  border-radius:var(--r);
  background:var(--gray-50);
}

.em-copy-i b{ color:var(--navy-900); font-size:13px; }
.em-copy-s{ margin:0; font-weight:600; }


/* ---------------------------------------------------------------------------
   16. Delivery
   --------------------------------------------------------------------------- */

.em-delivery{ display:flex; flex-direction:column; gap:var(--s-4); }

.em-senders{ display:flex; flex-direction:column; gap:var(--s-3); }

.em-sender{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-4);
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
}

.em-sender-h{ display:flex; align-items:flex-start; gap:var(--s-3); flex-wrap:wrap; }

.em-dl{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:var(--s-2) var(--s-4);
  margin:0;
}

.em-dl > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.em-dl dt{ color:var(--muted); font-size:12px; }
.em-dl dd{ margin:0; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

.em-health:empty{ display:none; }

.em-hc{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-2); }

.em-hc-i{
  padding:var(--s-3);
  border:1px solid var(--gray-200);
  border-left-width:3px;
  border-radius:var(--r);
}

.em-hc-i p{ margin:var(--s-1) 0 0; font-size:13px; line-height:1.5; }
.em-hc-i--ok{ border-left-color:var(--green); }
.em-hc-i--warn{ border-left-color:var(--gold); }
.em-hc-i--fail{ border-left-color:var(--red); }
.em-hc-h{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2); }
.em-hc-h b{ color:var(--navy-900); font-size:13.5px; }

.em-cron{ display:flex; flex-direction:column; gap:var(--s-2); align-items:flex-start; }
.em-cron p{ margin:0; font-size:13px; }
.em-cron .em-code{ align-self:stretch; }

.em-pdp{ display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-3); }
.em-pdp > p{ margin:0; }


/* ---------------------------------------------------------------------------
   17. Busy buttons, the phone button
   --------------------------------------------------------------------------- */

.btn.is-busy{ opacity:.7; cursor:progress; }

.em-fab{
  position:fixed;
  right:calc(var(--s-4) + var(--safe-r));
  bottom:calc(var(--bottombar-h) + var(--safe-b) + var(--s-4));
  z-index:44;
  display:none;
  align-items:center;
  justify-content:center;
  width:var(--fab-h);
  height:var(--fab-h);
  border:0;
  border-radius:999px;
  background:var(--gold);
  color:var(--navy-900);
  box-shadow:var(--sh-lg);
  cursor:pointer;
  touch-action:manipulation;
  transition:transform var(--t-base), background var(--t-fast);
}

.em-fab .ic{ width:22px; height:22px; }
.em-fab:hover{ background:var(--gold-600); }
.em-fab:active{ transform:scale(.94); }


/* ---------------------------------------------------------------------------
   18. Narrower screens
   --------------------------------------------------------------------------- */

@media (max-width: 1100px){
  .em-grid2{ grid-template-columns:minmax(0, 1fr); }
  .em-figs{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px){
  .em-fab{ display:inline-flex; }
  .em-mbody.has-fab{ padding-bottom:calc(var(--s-4) + 68px); }

  .em-mtabs .em-tabs-in{ gap:var(--s-1); border-bottom:0; }
  .em-mtabs .em-tab{ min-height:44px; padding:0 var(--s-3); font-size:13px; }

  /* 44px targets on a phone: the server details fold and the prospect name
     link on a reply card measured 36px and 20px. */
  .em-fold > summary{ min-height:44px; }
  .em-link{ display:inline-flex; align-items:center; min-height:44px; }

  .em-notice-in{ border-radius:var(--r); }

  .em-sec{ padding:var(--s-4); }
  .em-fig{ padding:var(--s-3); }
  .em-fig-v{ font-size:22px; }

  .em-board{ grid-template-columns:minmax(0, 1fr); overflow-x:visible; }

  .em-row-r{ max-width:none; }
}

/* Below 720px the practice notice stacks: beside a 123px button its text ran
   one or two words per line, 546px tall. */
@media (max-width: 719.98px){
  .em-notice-in{ flex-wrap:wrap; }
  .em-notice-in .btn{ flex:1 1 100%; }
}

@media (max-width: 560px){
  .em-form-row,
  .em-form-row--3{ grid-template-columns:minmax(0, 1fr); }

  .em-cards{ grid-template-columns:minmax(0, 1fr); }

  .em-row{ flex-wrap:wrap; }
  .em-row-r{ width:100%; justify-content:flex-start; padding-left:calc(34px + var(--s-3)); }

  .em-mail{ padding:var(--s-4); }
  .em-mail-h dt{ width:52px; }

  .em-funnel-row{ grid-template-columns:90px minmax(0, 1fr) 32px; }

  .em-kind,
  .em-sort{ min-width:0; width:100%; }

  .em-test .ui-input{ width:100%; }
}