/* Ela mailer — interface.

   Design notes, so the next person changing this knows what it is aiming at.

   Neutral scale is cool and precise (zinc), the accent is warm indigo used
   sparingly. Warm accent on cool neutrals is what stops a two-colour interface
   feeling flat, and keeping the accent rare is what makes it mean something when
   it does appear.

   Depth comes from layering and hairlines, not from drop shadows. Borders are
   1px at low alpha so they read as edges rather than as lines. Shadows are the
   two-layer kind — a tight contact shadow plus a wider soft one — and only on
   things that genuinely float: buttons, popovers, the modal.

   Type is Inter, which has the optical corrections that make small UI text hold
   up. Headings are tracked in (-0.02em); body is very slightly tracked in too,
   which is what stops a screen of 14px text looking loose. Tabular numerals
   everywhere a number can change, so figures do not jitter as they update.

   Radius: 8px for containers, 6px for controls, 999px only for genuine pills.
   Motion: 150ms cubic-bezier(.4,0,.2,1). Fast enough to feel instant, slow
   enough to be seen. */

:root {
  color-scheme: light;

  --bg:        #fafafa;
  --surface:   #ffffff;
  --raised:    #ffffff;
  --subtle:    #f4f4f5;

  --border:    rgba(9, 9, 11, 0.08);
  --border-str:rgba(9, 9, 11, 0.14);

  --fg:        #09090b;
  --fg-2:      #3f3f46;
  --fg-3:      #71717a;
  --fg-4:      #a1a1aa;

  --brand:     #4f46e5;
  --brand-h:   #4338ca;
  --brand-fg:  #ffffff;
  --brand-sub: #eef2ff;
  --brand-bd:  rgba(79, 70, 229, 0.22);

  --ok:        #059669;
  --ok-sub:    #ecfdf5;
  --ok-bd:     rgba(5, 150, 105, 0.22);
  --warn:      #b45309;
  --warn-sub:  #fffbeb;
  --warn-bd:   rgba(180, 83, 9, 0.22);
  --bad:       #dc2626;
  --bad-sub:   #fef2f2;
  --bad-bd:    rgba(220, 38, 38, 0.22);

  --sh-sm: 0 1px 2px rgba(9,9,11,.05);
  --sh:    0 1px 2px rgba(9,9,11,.06), 0 4px 12px rgba(9,9,11,.05);
  --sh-lg: 0 8px 24px rgba(9,9,11,.10), 0 2px 6px rgba(9,9,11,.06);

  --r:    8px;
  --r-sm: 6px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Elevation by lightening the surface, not by shadowing it. In the dark a
       drop shadow is invisible; a lighter plane is what reads as "closer". */
    --bg:        #09090b;
    --surface:   #111113;
    --raised:    #18181b;
    --subtle:    #1c1c1f;

    --border:    rgba(255, 255, 255, 0.09);
    --border-str:rgba(255, 255, 255, 0.16);

    --fg:        #fafafa;
    --fg-2:      #d4d4d8;
    --fg-3:      #a1a1aa;
    --fg-4:      #71717a;

    --brand:     #818cf8;
    --brand-h:   #a5b4fc;
    --brand-fg:  #10101a;
    --brand-sub: rgba(129, 140, 248, 0.12);
    --brand-bd:  rgba(129, 140, 248, 0.28);

    --ok:        #34d399;
    --ok-sub:    rgba(52, 211, 153, 0.10);
    --ok-bd:     rgba(52, 211, 153, 0.26);
    --warn:      #fbbf24;
    --warn-sub:  rgba(251, 191, 36, 0.10);
    --warn-bd:   rgba(251, 191, 36, 0.26);
    --bad:       #f87171;
    --bad-sub:   rgba(248, 113, 113, 0.10);
    --bad-bd:    rgba(248, 113, 113, 0.26);

    --sh-sm: 0 1px 2px rgba(0,0,0,.4);
    --sh:    0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
    --sh-lg: 0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--fg) }
h1 { font-size: 24px; line-height: 1.25 }
h2 { font-size: 16px; line-height: 1.4 }
h3 { font-size: 14px; line-height: 1.4 }

a { color: var(--brand); text-decoration: none; transition: color .15s var(--ease) }
a:hover { color: var(--brand-h); text-decoration: underline; text-underline-offset: 3px }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; background: var(--subtle);
  border: 1px solid var(--border); border-radius: 4px; padding: 1.5px 5px;
}

/* ── top bar ───────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  height: 52px; padding: 0 20px;
  display: flex; align-items: center; gap: 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600;
         font-size: 14px; letter-spacing: -0.02em; color: var(--fg) }
.brand .dot { width: 20px; height: 20px; border-radius: var(--r-sm);
              background: var(--brand); position: relative }
.brand .dot::after { content: ""; position: absolute; inset: 6px 5px;
                     border: 1.5px solid var(--brand-fg); border-radius: 1px;
                     border-bottom-width: 0; clip-path: polygon(0 0,100% 0,50% 62%) }
.top nav { display: flex; gap: 2px; margin-left: auto; align-items: center }
.top nav a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-3); padding: 6px 10px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.top nav a:hover { background: var(--subtle); color: var(--fg); text-decoration: none }
.top nav a.on { background: var(--subtle); color: var(--fg); font-weight: 600 }

.wrap { max-width: 1080px; margin: 32px auto 96px; padding: 0 20px }
.wrap.wide { max-width: 1400px }

.head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 24px; flex-wrap: wrap }
.head .lede { color: var(--fg-3); font-size: 13.5px; margin-top: 3px }
.head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center }

/* ── surfaces ──────────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--r); padding: 20px }
.card + .card { margin-top: 16px }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
         gap: 12px; margin-bottom: 24px }
.kc { padding: 16px 18px }
.kc .kl { color: var(--fg-3); font-size: 12px; font-weight: 500; letter-spacing: 0 }
.kc .kv { font-size: 26px; font-weight: 600; line-height: 1.2; margin-top: 6px;
          letter-spacing: -0.03em; font-variant-numeric: tabular-nums }
.kc .km { color: var(--fg-4); font-size: 12px; margin-top: 3px }
.kc.hi .kv { color: var(--brand) }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 13px;
  border: 1px solid var(--border-str); border-radius: var(--r-sm);
  background: var(--surface); color: var(--fg);
  font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  box-shadow: var(--sh-sm); cursor: pointer; text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              box-shadow .15s var(--ease), opacity .15s var(--ease);
}
.btn:hover { background: var(--subtle); color: var(--fg); text-decoration: none }
.btn:active { box-shadow: none }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none }
.btn.primary { background: var(--brand); border-color: transparent; color: var(--brand-fg);
               box-shadow: var(--sh-sm) }
.btn.primary:hover { background: var(--brand-h); color: var(--brand-fg) }
.btn.danger { color: var(--bad); border-color: var(--bad-bd) }
.btn.danger:hover { background: var(--bad-sub) }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--fg-2) }
.btn.ghost:hover { background: var(--subtle) }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px }
.btn svg { width: 15px; height: 15px; flex: none }

/* ── forms ─────────────────────────────────────────────────────────────── */
label { display: block; margin-bottom: 16px }
label > span.lbl { display: block; font-size: 13px; font-weight: 500;
                   color: var(--fg-2); margin-bottom: 6px }
label > span.hint { display: block; font-size: 12.5px; color: var(--fg-4); margin: -2px 0 6px }

input[type=text], input[type=email], input[type=password], input[type=search],
select, textarea {
  width: 100%; padding: 8px 11px; min-height: 36px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border-str); border-radius: var(--r-sm);
  font: inherit; font-size: 13.5px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--fg-4) }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-sub);
}
textarea { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
           font-size: 12.5px; line-height: 1.65; resize: vertical; padding: 11px }
input:disabled, textarea:disabled, select:disabled {
  background: var(--subtle); color: var(--fg-4); cursor: not-allowed }

.row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap }
.row label { margin-bottom: 0 }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px }
.check input { width: 16px; height: 16px; min-height: 0; margin-top: 2px;
               accent-color: var(--brand) }
.check span { font-size: 13px; color: var(--fg-2) }

/* ── tables ────────────────────────────────────────────────────────────── */
.tbl-wrap { background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--r); overflow-x: auto }
table { width: 100%; border-collapse: collapse; min-width: 880px }
th, td { text-align: left; padding: 11px 16px; font-size: 13.5px }
th { background: var(--surface); color: var(--fg-3); font-size: 12px; font-weight: 500;
     border-bottom: 1px solid var(--border); position: sticky; top: 52px; z-index: 5 }
td { border-bottom: 1px solid var(--border); color: var(--fg-2) }
tbody tr:last-child td { border-bottom: none }
tbody tr { transition: background .12s var(--ease) }
tbody tr:hover { background: var(--subtle) }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        font-size: 12.5px; color: var(--fg) }
.nowrap { white-space: nowrap }
.empty { text-align: center; color: var(--fg-3); padding: 56px 20px }
.empty svg { width: 28px; height: 28px; color: var(--fg-4); display: block; margin: 0 auto 12px }

/* ── notices ───────────────────────────────────────────────────────────── */
.note { display: flex; gap: 10px; align-items: flex-start;
        padding: 11px 14px; margin-bottom: 16px; font-size: 13.5px;
        color: var(--fg-2); background: var(--brand-sub);
        border: 1px solid var(--brand-bd); border-radius: var(--r) }
.note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand) }
.note.warn { background: var(--warn-sub); border-color: var(--warn-bd) }
.note.warn svg { color: var(--warn) }
.note.ok { background: var(--ok-sub); border-color: var(--ok-bd) }
.note.ok svg { color: var(--ok) }

/* ── status ────────────────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px;
        height: 20px; padding: 0 8px; border-radius: 999px;
        font-size: 11.5px; font-weight: 500; letter-spacing: 0;
        background: var(--subtle); color: var(--fg-3); border: 1px solid var(--border) }
.pill .d { width: 5px; height: 5px; border-radius: 999px; background: currentColor }
.pill.sent    { background: var(--ok-sub);    color: var(--ok);    border-color: var(--ok-bd) }
.pill.sending { background: var(--warn-sub);  color: var(--warn);  border-color: var(--warn-bd) }
.pill.paused  { background: var(--bad-sub);   color: var(--bad);   border-color: var(--bad-bd) }
.pill.draft   { background: var(--subtle);    color: var(--fg-3) }
.pill.warnpill{ background: var(--warn-sub);  color: var(--warn);  border-color: var(--warn-bd);
                margin-left: 6px }
.sub { display: block; font-size: 11.5px; color: var(--fg-4); margin-top: 2px }
.hint { color: var(--fg-3); font-size: 12.5px }
.sep { height: 1px; background: var(--border); margin: 20px 0 }

/* ── toasts ────────────────────────────────────────────────────────────── */
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 90;
          display: flex; flex-direction: column; gap: 8px; max-width: 360px }
.toast { padding: 11px 14px; font-size: 13.5px; font-weight: 450;
         color: var(--fg); background: var(--raised);
         border: 1px solid var(--border-str); border-radius: var(--r);
         box-shadow: var(--sh-lg);
         animation: rise .22s var(--ease) }
.toast.warn { border-color: var(--bad-bd); background: var(--bad-sub); color: var(--bad) }
@keyframes rise { from { opacity: 0; transform: translateY(6px) scale(.98) } }

/* ── composer ──────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
         gap: 20px; align-items: start }
@media (max-width: 1040px) { .split { grid-template-columns: 1fr } }
.preview-shell { position: sticky; top: 72px }
.preview-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px }
.preview-bar .hint { margin-left: auto }
.device { display: inline-flex; padding: 2px; gap: 2px;
          background: var(--subtle); border: 1px solid var(--border);
          border-radius: var(--r-sm) }
.device button { border: none; background: transparent; color: var(--fg-3);
                 padding: 4px 10px; border-radius: 4px;
                 font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
                 transition: background .15s var(--ease), color .15s var(--ease) }
.device button.on { background: var(--surface); color: var(--fg); box-shadow: var(--sh-sm) }
iframe.preview { width: 100%; height: 640px; display: block; background: #fff;
                 border: 1px solid var(--border); border-radius: var(--r);
                 transition: max-width .25s var(--ease) }
iframe.preview.phone { max-width: 400px; margin: 0 auto }
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; padding: 6px;
           background: var(--subtle); border: 1px solid var(--border);
           border-radius: var(--r-sm) }
.toolbar .btn { box-shadow: none; border-color: transparent; background: transparent }
.toolbar .btn:hover { background: var(--surface); border-color: var(--border) }

/* ── send ──────────────────────────────────────────────────────────────── */
.sendstep { display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
            justify-content: space-between }
.sendstep p { margin: 3px 0 0 }
.bar { height: 6px; background: var(--subtle); border-radius: 999px;
       overflow: hidden; margin: 18px 0 10px }
.bar i { display: block; height: 100%; width: 0; border-radius: 999px;
         background: var(--brand); transition: width .4s var(--ease) }
.sending-live { display: flex; align-items: center; gap: 8px;
                font-size: 13px; color: var(--fg-3) }
.spinner { width: 13px; height: 13px; border: 1.5px solid var(--border-str);
           border-top-color: var(--brand); border-radius: 999px;
           animation: spin .6s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* ── modal ─────────────────────────────────────────────────────────────── */
.modal-back { position: fixed; inset: 0; z-index: 80; padding: 20px;
              display: flex; align-items: center; justify-content: center;
              background: rgba(9,9,11,.45); backdrop-filter: blur(2px);
              animation: fade .16s var(--ease) }
.modal { width: 100%; max-width: 420px; padding: 22px;
         background: var(--raised); border: 1px solid var(--border-str);
         border-radius: 12px; box-shadow: var(--sh-lg);
         animation: rise .2s var(--ease) }
.modal h3 { font-size: 15px; margin-bottom: 8px }
.modal p { color: var(--fg-3); font-size: 13.5px; margin: 0 }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px }
@keyframes fade { from { opacity: 0 } }

/* ── a11y ──────────────────────────────────────────────────────────────── */
.skip { position: absolute; left: -9999px; top: 8px;
        background: var(--brand); color: var(--brand-fg);
        padding: 9px 14px; border-radius: var(--r-sm); font-weight: 500; z-index: 100 }
.skip:focus { left: 8px }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px }

/* ── header extras ─────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; justify-content: center;
         min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
         background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 600 }
.lockbar { display: flex; align-items: center; gap: 8px; justify-content: center;
           padding: 8px 20px; font-size: 12.5px; color: var(--warn);
           background: var(--warn-sub); border-bottom: 1px solid var(--warn-bd) }
.lockbar svg { width: 14px; height: 14px }
.lockbar a { color: var(--warn); text-decoration: underline; text-underline-offset: 2px }

/* ── starters ──────────────────────────────────────────────────────────── */
.starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px }
.starter { display: block; padding: 16px; background: var(--surface);
           border: 1px solid var(--border); border-radius: var(--r);
           color: var(--fg); text-decoration: none;
           transition: border-color .15s var(--ease), box-shadow .15s var(--ease),
                       transform .15s var(--ease) }
.starter:hover { text-decoration: none; color: var(--fg); border-color: var(--brand-bd);
                 box-shadow: var(--sh); transform: translateY(-2px) }
.starter b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px }
.starter .hint { display: block }
.starter-art { padding: 14px; margin-bottom: 14px; min-height: 88px;
               background: var(--subtle); border-radius: var(--r-sm) }
.starter-art .l { display: block; height: 6px; border-radius: 999px;
                  background: var(--border-str); margin-bottom: 7px }
.starter-art .w40 { width: 40% }
.starter-art .w60 { width: 60% }
.starter-art .w75 { width: 75% }
.starter-art .w90 { width: 90% }
.starter-art .img { height: 28px; border-radius: 4px; background: var(--brand-sub);
                    border: 1px solid var(--brand-bd) }
.starter-art .btn-ish { height: 12px; width: 42%; border-radius: 999px; background: var(--brand);
                        opacity: .7 }

/* ── steps ─────────────────────────────────────────────────────────────── */
.steps { list-style: none; display: grid;
         grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
         gap: 12px; padding: 0; margin: 0 0 24px }
.steps li { display: grid; grid-template-columns: 24px 1fr; gap: 2px 12px;
            align-items: center; padding: 14px 16px;
            background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--r); transition: border-color .15s var(--ease) }
.steps li .n { grid-row: span 2; width: 24px; height: 24px; border-radius: 999px;
               display: grid; place-items: center; font-size: 12px; font-weight: 600;
               background: var(--subtle); color: var(--fg-3) }
.steps li b { font-size: 13.5px; font-weight: 600 }
.steps li .hint { grid-column: 2 }
.steps li.now { border-color: var(--brand-bd) }
.steps li.now .n { background: var(--brand); color: var(--brand-fg) }
.steps li.done .n { background: var(--ok-sub); color: var(--ok) }

/* ── setup ─────────────────────────────────────────────────────────────── */
.tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px }
.tick svg { width: 12px; height: 12px }
.tick.ok   { background: var(--ok-sub);   color: var(--ok) }
.tick.todo { background: var(--bad-sub);  color: var(--bad) }
.tick.opt  { background: var(--subtle);   color: var(--fg-4) }

/* ── rows ──────────────────────────────────────────────────────────────── */
.pager { display: flex; gap: 12px; align-items: center; justify-content: center;
         margin-top: 20px; font-size: 13px; color: var(--fg-3) }
.rowacts { white-space: nowrap; text-align: right; width: 1% }
.rowacts .btn { margin-left: 6px }
tr.busy { opacity: .45; pointer-events: none }
tr.flash-ok td { animation: flashok 1.4s var(--ease) }
@keyframes flashok { from { background: var(--ok-sub) } to { background: transparent } }