/* ==========================================================================
   Lead Mapper — design system
   --------------------------------------------------------------------------
   One cohesive token set, then the components built from it. Page-specific
   styles for the outreach screens live in outreach/css/outreach.css, which
   assumes this file is loaded first.

   Conventions worth knowing before editing:
     * every colour, radius, shadow and duration is a token — no literals in
       component rules, so a palette change is a single edit here;
     * status colour never carries meaning alone. Sent/failed/warning states
       always ship with a text label and usually an icon, because colour is
       invisible to a portion of readers and to printers;
     * text uses ink tokens, never a status hue, so a red number never becomes
       unreadable body copy.
   ========================================================================== */

:root {
  /* --- brand: indigo → violet ------------------------------------------ */
  --p-50:  #F2F1FE;
  --p-100: #E5E2FD;
  --p-200: #CCC6FB;
  --p-300: #AB9FF8;
  --p-400: #8B7AF2;
  --p-500: #6D5AE8;   /* primary */
  --p-600: #5A45D7;
  --p-700: #4A37B4;
  --p-800: #3B2C8E;
  --p-900: #2C216C;

  /* --- accent: teal-cyan, for secondary emphasis ----------------------- */
  --a-50:  #E8FAFC;
  --a-100: #CBF2F7;
  --a-300: #6BDAE6;
  --a-500: #12AFC7;
  --a-600: #0E8FA6;
  --a-700: #0C7284;

  /* --- status ---------------------------------------------------------- */
  --ok-50:  #E8F7EF;
  --ok-500: #12A150;
  --ok-700: #0B7A3C;
  --warn-50:  #FDF4E3;
  --warn-500: #C77A05;
  --warn-700: #9A5D02;
  --err-50:  #FDECEE;
  --err-500: #D6323F;
  --err-700: #A9202B;

  /* --- neutrals: navy-tinted, so greys sit with the brand -------------- */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFD;
  --n-50:  #F5F6FA;
  --n-100: #EEF0F6;
  --n-200: #E2E5EF;
  --n-300: #CBD0DF;
  --n-400: #9AA2B8;
  --n-500: #6B7490;
  --n-600: #4C5470;
  --n-700: #343B54;
  --n-800: #222840;
  --n-900: #141930;

  /* --- semantic surfaces & ink ----------------------------------------- */
  --bg: var(--n-50);
  --bg-sunken: var(--n-100);
  --surface: var(--n-0);
  --surface-2: var(--n-25);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --ink: var(--n-900);
  --ink-2: var(--n-600);
  --ink-3: var(--n-500);
  --ink-4: var(--n-400);

  /* --- gradients: restrained, one per role ----------------------------- */
  --grad-primary: linear-gradient(135deg, var(--p-500) 0%, var(--p-400) 55%, #9A87F6 100%);
  --grad-accent: linear-gradient(135deg, var(--a-600) 0%, var(--a-500) 100%);
  --grad-ok: linear-gradient(135deg, var(--ok-700) 0%, var(--ok-500) 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  --grad-app: radial-gradient(1200px 520px at 12% -8%, rgba(109,90,232,.10), transparent 62%),
              radial-gradient(900px 420px at 92% -4%, rgba(18,175,199,.09), transparent 60%);

  /* --- typography ------------------------------------------------------ */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, monospace;

  /* --- spacing: 4px base ----------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px;

  /* --- radii ------------------------------------------------------------ */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* --- elevation: layered, low-opacity, navy-tinted -------------------- */
  --sh-1: 0 1px 2px rgba(20,25,48,.05);
  --sh-2: 0 1px 3px rgba(20,25,48,.07), 0 1px 2px rgba(20,25,48,.04);
  --sh-3: 0 4px 14px rgba(20,25,48,.08), 0 2px 4px rgba(20,25,48,.04);
  --sh-4: 0 14px 32px rgba(20,25,48,.11), 0 4px 8px rgba(20,25,48,.05);
  --sh-5: 0 28px 64px rgba(20,25,48,.18), 0 8px 16px rgba(20,25,48,.06);
  --sh-brand: 0 6px 18px rgba(109,90,232,.28);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);
  --ring: 0 0 0 3px rgba(109,90,232,.18);
  --ring-err: 0 0 0 3px rgba(214,50,63,.16);

  /* --- motion ----------------------------------------------------------- */
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(.2, .8, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --topbar-h: 60px;
  --sidebar-w: 396px;
}

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

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

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg);
  background-image: var(--grad-app);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -.014em;
  margin: 0;
}

a { color: var(--p-600); }
a:hover { color: var(--p-700); }

::selection { background: var(--p-100); color: var(--p-900); }

:focus-visible {
  outline: 2px solid var(--p-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.is-hidden { display: none !important; }
.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;
}

.icon {
  width: 18px; height: 18px;
  flex: none;
  display: block;
}
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }

.mono { font-family: var(--mono); font-size: .86em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }

/* ==========================================================================
   App shell
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--topbar-h);
  padding: 0 var(--sp-5);
  flex: none;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--grad-primary);
  box-shadow: var(--sh-brand), var(--sh-inset);
  color: #fff;
}

.brand-mark .icon { width: 19px; height: 19px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 650; }
.brand-sub {
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: .01em;
}

.topnav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.navlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.navlink:hover { background: var(--n-100); color: var(--ink); }
.navlink[aria-current="page"] { background: var(--p-50); color: var(--p-700); }
.navlink .icon { width: 16px; height: 16px; }

/* Page wrapper for the document-style screens. */
.page-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.page-head { display: flex; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; }
.page-head-main { min-width: 0; flex: 1; }

.page-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 23px;
  font-weight: 660;
}

.page-sub {
  margin: var(--sp-2) 0 0;
  color: var(--ink-3);
  font-size: 13.5px;
  max-width: 76ch;
}

.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--sp-5);
}

.card-lift { transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.card-lift:hover { box-shadow: var(--sh-4); transform: translateY(-1px); }

.card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.card-title .icon { width: 15px; height: 15px; color: var(--p-500); }
.card-head-end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.card-body-tight > * + * { margin-top: var(--sp-3); }

/* Accented card: a thin gradient rule along the top edge. */
.card-accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--grad-primary);
}

.hint {
  margin: var(--sp-2) 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
  box-shadow: none;
}

.btn .icon { width: 16px; height: 16px; }

.btn-primary {
  color: #fff;
  background: var(--grad-primary);
  box-shadow: var(--sh-brand), var(--sh-inset);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(109,90,232,.34), var(--sh-inset); color: #fff; }

.btn-accent {
  color: #fff;
  background: var(--grad-accent);
  box-shadow: 0 6px 16px rgba(14,143,166,.26), var(--sh-inset);
}
.btn-accent:hover:not(:disabled) { color: #fff; box-shadow: 0 8px 22px rgba(14,143,166,.32), var(--sh-inset); }

.btn-success {
  color: #fff;
  background: var(--grad-ok);
  box-shadow: 0 6px 16px rgba(11,122,60,.24), var(--sh-inset);
}
.btn-success:hover:not(:disabled) { color: #fff; box-shadow: 0 8px 22px rgba(11,122,60,.3), var(--sh-inset); }

.btn-outline {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--sh-1);
}
.btn-outline:hover:not(:disabled) { background: var(--n-50); border-color: var(--n-400); color: var(--ink); }

.btn-ghost {
  color: var(--ink-2);
  background: transparent;
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) { background: var(--n-100); color: var(--ink); }

.btn-danger-ghost { color: var(--err-700); background: transparent; border-color: var(--err-50); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--err-50); color: var(--err-700); }

.btn-lg { padding: 13px 22px; font-size: 14.5px; border-radius: var(--r-md); }
.btn-sm { padding: 7px 11px; font-size: 12.5px; }
.btn-icon { padding: 8px; }
.btn-block { width: 100%; }

/* Loading state: the label stays put and a spinner joins it, so the button
   does not change width and shift the layout mid-click. */
.btn .spinner { display: none; }
.btn.is-loading { cursor: progress; }
.btn.is-loading .spinner { display: block; }

.spinner {
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: .9;
  animation: spin .68s linear infinite;
}

.spinner-dark { border-color: var(--p-500); border-right-color: transparent; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: 12.5px;
  font-weight: 620;
  color: var(--ink);
}

.label .icon { width: 14px; height: 14px; color: var(--ink-4); }

.req {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--p-600);
  background: var(--p-50);
  padding: 2px 7px;
  border-radius: var(--r-full);
}

.input, .select, .textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
  appearance: none;
}

.textarea { resize: vertical; min-height: 76px; line-height: 1.55; }

.input::placeholder, .textarea::placeholder { color: var(--ink-4); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--n-400); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--p-500);
  box-shadow: var(--ring);
  background: var(--surface);
}

.input[readonly], .textarea[readonly] {
  background: var(--surface-2);
  color: var(--ink-2);
  box-shadow: none;
}

.select {
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7490' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 17px;
}

/* Input with a leading icon. */
.input-wrap { position: relative; display: block; }
.input-wrap .input-icon {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--ink-4);
  pointer-events: none;
}
.input-wrap .input { padding-left: 35px; }
.input-wrap:focus-within .input-icon { color: var(--p-500); }

/* Checkbox: square, brand fill, animated tick. */
.check {
  appearance: none;
  flex: none;
  width: 17px; height: 17px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.check::after {
  content: "";
  width: 9px; height: 5px;
  border: 2px solid #fff;
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) scale(.5);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out);
}

.check:hover { border-color: var(--p-400); }
.check:checked { background: var(--p-500); border-color: var(--p-500); }
.check:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.check:indeterminate { background: var(--p-500); border-color: var(--p-500); }
.check:indeterminate::after {
  opacity: 1; width: 9px; height: 0;
  border-left: 0; border-bottom: 2px solid #fff;
  transform: none;
}
.check:disabled { opacity: .4; cursor: not-allowed; }
.check:focus-visible { box-shadow: var(--ring); }

.check-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink-2);
  cursor: pointer;
}

/* ==========================================================================
   Pills, badges, chips
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--p-50);
  color: var(--p-700);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--n-100);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
  white-space: nowrap;
}

.pill .icon { width: 12px; height: 12px; }
.pill-brand { background: var(--p-50); color: var(--p-700); }
.pill-accent { background: var(--a-50); color: var(--a-700); }
.pill-ok { background: var(--ok-50); color: var(--ok-700); }
.pill-warn { background: var(--warn-50); color: var(--warn-700); }
.pill-err { background: var(--err-50); color: var(--err-700); }
.pill-outline { background: transparent; border: 1px solid var(--border); color: var(--ink-3); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.chip:hover { color: var(--ink); border-color: var(--border-strong); background: var(--n-25); }

.chip.is-active {
  color: #fff;
  background: var(--p-500);
  border-color: var(--p-500);
  box-shadow: 0 3px 10px rgba(109,90,232,.24);
}

.chip .count {
  font-variant-numeric: tabular-nums;
  opacity: .72;
  font-weight: 700;
}

/* ==========================================================================
   Status banner
   ========================================================================== */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--ink-2);
}

.banner .icon { margin-top: 1px; color: var(--ink-4); }
.banner strong { color: var(--ink); font-weight: 620; }
.banner code {
  font-family: var(--mono); font-size: 12px;
  background: var(--n-100); padding: 1px 5px; border-radius: 4px;
}

.banner-info { background: var(--p-50); border-color: var(--p-100); color: var(--p-900); }
.banner-info .icon { color: var(--p-600); }
.banner-ok { background: var(--ok-50); border-color: #C9EBD8; color: var(--ok-700); }
.banner-ok .icon { color: var(--ok-500); }
.banner-warn { background: var(--warn-50); border-color: #F5E0B8; color: var(--warn-700); }
.banner-warn .icon { color: var(--warn-500); }
.banner-err { background: var(--err-50); border-color: #F7CDD2; color: var(--err-700); }
.banner-err .icon { color: var(--err-500); }

/* ==========================================================================
   Stat tiles — the KPI row
   --------------------------------------------------------------------------
   Deliberately not charts: five single numbers are read faster as tiles than
   as any plot. The number wears an ink token by default; only the two states
   that need attention (sent, failed) take a status hue, and each keeps its
   text label so the colour is never the only signal.
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--sp-3);
}

.stat {
  position: relative;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.stat:hover { box-shadow: var(--sh-3); transform: translateY(-1px); }

.stat::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--border);
}

.stat-k {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat-k .icon { width: 13px; height: 13px; }

.stat-n {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 680;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat-note { margin-top: 2px; font-size: 11.5px; color: var(--ink-4); }

.stat-brand::after { background: var(--grad-primary); }
.stat-ok::after { background: var(--ok-500); }
.stat-ok .stat-n { color: var(--ok-700); }
.stat-ok .stat-k .icon { color: var(--ok-500); }
.stat-err::after { background: var(--err-500); }
.stat-err .stat-n { color: var(--err-700); }
.stat-err .stat-k .icon { color: var(--err-500); }
.stat-warn::after { background: var(--warn-500); }
.stat-warn .stat-k .icon { color: var(--warn-500); }

/* ==========================================================================
   Progress
   --------------------------------------------------------------------------
   Rounded data-ends, a 2px surface gap between segments so adjacent fills
   never read as one, and a labelled legend beneath — the colours are a
   shorthand for the labels, not a replacement.
   ========================================================================== */

.progress {
  display: flex;
  gap: 2px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  overflow: hidden;
}

.progress-seg {
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  transition: width var(--t-slow) var(--ease-out);
}

.progress-seg-ok { background: var(--grad-ok); }
.progress-seg-err { background: var(--err-500); }
.progress-seg-live {
  background: var(--grad-primary);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer { to { background-position: -200% 0; } }

.progress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: 12px;
  color: var(--ink-3);
}

.legend-item { display: inline-flex; align-items: center; gap: 6px; }

.legend-dot {
  width: 9px; height: 9px;
  border-radius: 3px;
  flex: none;
}

.legend-dot-ok { background: var(--ok-500); }
.legend-dot-err { background: var(--err-500); }
.legend-dot-live { background: var(--p-500); }
.legend-item b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Step rail across the top of the workflow pages. */
.steps {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  box-shadow: var(--sh-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.steps::-webkit-scrollbar { display: none; }

.steps li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-4);
  white-space: nowrap;
}

.steps li .step-n {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--n-100);
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
}

.steps li.is-done { color: var(--ok-700); }
.steps li.is-done .step-n { background: var(--ok-50); color: var(--ok-700); }

.steps li.is-current {
  color: #fff;
  background: var(--grad-primary);
  box-shadow: var(--sh-brand);
}
.steps li.is-current .step-n { background: rgba(255,255,255,.24); color: #fff; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}

.table-scroll { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px var(--sp-4);
  text-align: left;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.table tbody td {
  padding: 11px var(--sp-4);
  border-bottom: 1px solid var(--n-100);
  vertical-align: top;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--p-50); }
.table .col-check { width: 44px; padding-right: 0; }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-fixed { table-layout: auto; }

.cell-title { font-weight: 600; color: var(--ink); }
.cell-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-4); }

/* ==========================================================================
   Empty states & skeletons
   ========================================================================== */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
}

.empty-art {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: var(--r-lg);
  background: var(--p-50);
  color: var(--p-500);
}

.empty-art .icon { width: 25px; height: 25px; }
.empty h3 { font-size: 15px; font-weight: 640; }
.empty p { margin: 0; max-width: 46ch; color: var(--ink-3); font-size: 13px; }

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--n-100) 25%, var(--n-50) 37%, var(--n-100) 63%);
  background-size: 400% 100%;
  animation: sweep 1.4s ease-in-out infinite;
}

@keyframes sweep { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.skeleton-line { height: 11px; margin-bottom: var(--sp-2); }
.skeleton-card { height: 108px; }

/* ==========================================================================
   Toasts
   ========================================================================== */

.toasts {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(384px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-5);
  pointer-events: auto;
  animation: toast-in var(--t-slow) var(--ease-out);
  overflow: hidden;
}

.toast::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--p-500);
}

.toast { position: relative; }
.toast-icon { flex: none; margin-top: 1px; color: var(--p-600); }
.toast-body { flex: 1; min-width: 0; }
.toast-title { font-size: 13px; font-weight: 640; color: var(--ink); }
.toast-msg { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }

.toast-close {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border: 0; border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.toast-close:hover { background: var(--n-100); color: var(--ink); }

.toast-ok::before { background: var(--ok-500); }
.toast-ok .toast-icon { color: var(--ok-500); }
.toast-err::before { background: var(--err-500); }
.toast-err .toast-icon { color: var(--err-500); }
.toast-warn::before { background: var(--warn-500); }
.toast-warn .toast-icon { color: var(--warn-500); }

.toast.is-leaving { animation: toast-out var(--t) var(--ease) forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(20px) scale(.98); }
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(20,25,48,.42);
  backdrop-filter: blur(3px);
  animation: fade-in var(--t) var(--ease);
}

.modal {
  width: min(520px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-5);
  animation: modal-in var(--t-slow) var(--ease-out);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}

.modal-art {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--p-50);
  color: var(--p-600);
}

.modal-art-warn { background: var(--warn-50); color: var(--warn-700); }
.modal-title { font-size: 16.5px; font-weight: 650; }
.modal-sub { margin: var(--sp-1) 0 0; font-size: 13px; color: var(--ink-3); }
.modal-body { padding: 0 var(--sp-5) var(--sp-4); }

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Lead search screen — sidebar + map
   ========================================================================== */

.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  overflow-y: auto;
  background: rgba(255,255,255,.55);
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; }

.map-wrap { position: relative; flex: 1; min-width: 0; }

#map {
  position: absolute;
  inset: 0;
  background: var(--bg-sunken);
}

.map-overlay {
  position: absolute;
  left: 50%;
  top: var(--sp-5);
  transform: translateX(-50%);
  z-index: 500;
  width: min(420px, calc(100% - 32px));
  pointer-events: none;
}

.map-overlay .card {
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  text-align: center;
  padding: var(--sp-4) var(--sp-5);
}

/* Result list */
.results-card { display: flex; flex-direction: column; min-height: 0; }

.results {
  list-style: none;
  margin: 0 calc(var(--sp-5) * -1);
  padding: 0;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.results li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--n-100);
  transition: background var(--t-fast) var(--ease);
}

.results li:hover { background: var(--p-50); }
.results li:last-child { border-bottom: 0; }

.pick { margin: 15px 0 0; }

.result {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  text-align: left;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.result-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 620;
  color: var(--ink);
}

.result-i { color: var(--ink-4); font-variant-numeric: tabular-nums; font-weight: 600; }

.result-meta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--n-100);
  color: var(--ink-4);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .02em;
}

.tag.has { background: var(--ok-50); color: var(--ok-700); }
.tag .icon { width: 10px; height: 10px; }

.results-foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.pick-summary { margin: 0; font-size: 12px; color: var(--ink-3); }
.pick-summary b { color: var(--ink); }

/* Map markers */
.pin {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  background: var(--grad-primary);
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(20,25,48,.32);
  transition: transform var(--t) var(--ease-out);
}

.pin::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.pin:hover { transform: rotate(-45deg) scale(1.12); }
.pin.is-active { background: var(--grad-ok); z-index: 1000; }

.leaflet-popup-content-wrapper {
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  border: 1px solid var(--border);
}

.leaflet-popup-content { margin: var(--sp-4); font-family: var(--font); font-size: 13px; }
.leaflet-popup-tip { box-shadow: var(--sh-2); }

.popup-name { margin: 0 0 var(--sp-1); font-size: 14.5px; font-weight: 660; }
.popup-category { margin-bottom: var(--sp-3); }

.popup-row {
  display: flex;
  gap: var(--sp-2);
  padding: 4px 0;
  border-top: 1px solid var(--n-100);
}

.popup-row dt { flex: none; width: 60px; color: var(--ink-4); font-size: 11.5px; }
.popup-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.popup-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-3);
  font-size: 11px;
  color: var(--ink-4);
}

.popup-source:hover { color: var(--p-600); }

/* Leaflet chrome, brought into the system. */
.leaflet-control-zoom a {
  border-radius: var(--r-xs) !important;
  color: var(--ink-2) !important;
  border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover { background: var(--p-50) !important; color: var(--p-700) !important; }
.leaflet-control-attribution {
  background: rgba(255,255,255,.86) !important;
  border-radius: var(--r-xs) 0 0 0;
  font-size: 10.5px !important;
  color: var(--ink-4) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  :root { --sidebar-w: 340px; }
}

@media (max-width: 860px) {
  body { height: auto; }
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .map-wrap { min-height: 62vh; }
  .field-row { grid-template-columns: 1fr; }
  .topbar { gap: var(--sp-3); padding: 0 var(--sp-4); }
  .brand-sub { display: none; }
  .navlink span { display: none; }
  .navlink { padding: 8px; }
  .page-wrap { padding: var(--sp-4) var(--sp-3) var(--sp-9); }
  .page-title { font-size: 20px; }
  .toasts { right: var(--sp-3); left: var(--sp-3); bottom: var(--sp-3); width: auto; }
  .stat-n { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .spinner { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
}

@media print {
  .topbar, .page-actions, .toasts, .steps, .draft-actions { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ==========================================================================
   Lead history state — badges, split summary, compact filters
   --------------------------------------------------------------------------
   The badge text always names the state; the colour is a shortcut for readers
   who can use it, never the only signal.
   ========================================================================== */

.lead-split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.split-cell {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.split-n {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 680;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.split-k {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.split-cell-ok { background: var(--ok-50); border-color: #C9EBD8; }
.split-cell-ok .split-n { color: var(--ok-700); }
.split-cell-warn { background: var(--warn-50); border-color: #F5E0B8; }
.split-cell-warn .split-n { color: var(--warn-700); }
.split-cell-err { background: var(--err-50); border-color: #F7CDD2; }
.split-cell-err .split-n { color: var(--err-700); }

.filters-sm { margin-bottom: var(--sp-3); }
.filters-sm .chip { padding: 5px 10px; font-size: 11.5px; }

/* Per-lead state badge in the results list. */
.state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.state .icon { width: 11px; height: 11px; }
.state-new { background: var(--ok-50); color: var(--ok-700); }
.state-ready { background: var(--p-50); color: var(--p-700); }
.state-contacted { background: var(--warn-50); color: var(--warn-700); }
.state-suppressed { background: var(--err-50); color: var(--err-700); }
.state-invalid { background: var(--n-100); color: var(--ink-4); }
.state-sending { background: var(--p-50); color: var(--p-700); }
.state-sent { background: var(--ok-50); color: var(--ok-700); }
.state-failed { background: var(--err-50); color: var(--err-700); }

.results li.is-contacted { background: var(--warn-50); }
.results li.is-contacted:hover { background: #FCEFD8; }
.results li.is-suppressed { background: var(--err-50); }
.results li.is-suppressed:hover { background: #FBDDE1; }
.results li.is-blocked .result-name { color: var(--ink-3); }

.history-note {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--warn-700);
}

/* ==========================================================================
   Authentication screens
   --------------------------------------------------------------------------
   A separate shell from the app: a centred card on the page background, with
   no navigation, because every app link goes somewhere an anonymous visitor
   cannot reach.

   Styled here rather than borrowing the credential-card rules it first reused:
   those set a monospace face for API keys, which made the password box disagree
   with the email box directly above it.
   ========================================================================== */

.auth-body {
  display: block;                 /* not grid-centred: see .auth-wrap */
  min-height: 100vh;
  min-height: 100dvh;             /* mobile browsers, where 100vh lies */
  background:
    radial-gradient(1100px 520px at 50% -12%, var(--p-50), transparent 62%),
    var(--bg);
}

/* Centred with auto margins rather than `place-items: center`, so a card taller
   than a short landscape viewport scrolls instead of being clipped at the top. */
.auth-wrap {
  width: 100%;
  max-width: 432px;
  margin: 0 auto;
  padding: clamp(var(--sp-5), 6vh, var(--sp-9)) var(--sp-4);
}

.auth-card {
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  text-decoration: none;
  color: inherit;
}

.auth-title {
  margin: 0;
  font-size: clamp(19px, 4.4vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.auth-sub {
  margin: var(--sp-2) 0 var(--sp-5);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form .field { margin: 0; }
.auth-submit { width: 100%; justify-content: center; margin-top: var(--sp-1); }

.auth-foot {
  margin: var(--sp-4) 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

/* --- one field, and its state --------------------------------------------
   The border and the icon change together, but neither is the only signal:
   every invalid field also carries a written message, because colour alone is
   invisible to a portion of readers.
   ------------------------------------------------------------------------ */

.auth-input {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input .input {
  padding-right: 42px;            /* room for the button or the state icon */
  font-family: inherit;           /* never monospace: this is not an API key */
}

/* The reveal button sits inside the field, so the box keeps its full width on a
   320px screen instead of losing 90px to a button beside it. */
.auth-reveal {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink-4);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.auth-reveal:hover { color: var(--ink-2); background: var(--n-100); }
.auth-reveal .icon { width: 17px; height: 17px; }

/* The tick or cross shown once a field has been judged. */
.auth-state {
  position: absolute;
  right: 12px;
  display: none;
  place-items: center;
  pointer-events: none;
}

.auth-state .icon { width: 17px; height: 17px; }
.field.is-valid .auth-state,
.field.is-invalid .auth-state { display: grid; }
.field.is-valid .auth-state { color: var(--ok-500); }
.field.is-invalid .auth-state { color: var(--err-500); }
.field.is-valid .auth-state .icon-no { display: none; }
.field.is-invalid .auth-state .icon-yes { display: none; }

.field.is-invalid .input {
  border-color: var(--err-500);
  box-shadow: var(--ring-err);
}

.field.is-valid .input { border-color: var(--ok-500); }

/* With a reveal button present, the state icon moves to its left. */
.auth-input.has-reveal .auth-state { right: 44px; }
.auth-input.has-reveal .input { padding-right: 72px; }

/* --- messages ------------------------------------------------------------- */

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--err-700);
}

.field-error:empty { display: none; }

.field-error::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--err-50);
  color: var(--err-700);
  font-size: 10px;
  font-weight: 800;
}

/* --- password strength ---------------------------------------------------
   Guidance, not a gate. The server's validators decide whether a password is
   acceptable; this only shows which way the user is heading, and never claims a
   password will be accepted.
   ------------------------------------------------------------------------ */

.pw-meter { margin-top: var(--sp-2); }

.pw-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.pw-bar {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--n-200);
  transition: background var(--t) var(--ease);
}

.pw-meter[data-score="1"] .pw-bar:nth-child(-n+1),
.pw-meter[data-score="2"] .pw-bar:nth-child(-n+2),
.pw-meter[data-score="3"] .pw-bar:nth-child(-n+3),
.pw-meter[data-score="4"] .pw-bar:nth-child(-n+4) { background: currentColor; }

.pw-meter[data-score="1"] { color: var(--err-500); }
.pw-meter[data-score="2"] { color: var(--warn-500); }
.pw-meter[data-score="3"] { color: var(--a-500); }
.pw-meter[data-score="4"] { color: var(--ok-500); }

.pw-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  min-height: 17px;
  font-size: 12px;
  color: var(--ink-3);
}

.pw-note b { font-weight: 650; }
.pw-meter[data-score="1"] .pw-note b { color: var(--err-700); }
.pw-meter[data-score="2"] .pw-note b { color: var(--warn-700); }
.pw-meter[data-score="3"] .pw-note b { color: var(--a-700); }
.pw-meter[data-score="4"] .pw-note b { color: var(--ok-700); }

/* Caps Lock: the actual reason a correctly-typed password "does not work". */
.auth-caps {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--warn-700);
}

.auth-caps.is-on { display: flex; }
.auth-caps .icon { width: 14px; height: 14px; color: var(--warn-500); }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 420px) {
  .auth-wrap { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .auth-card { border-radius: var(--r-md); }
  .auth-brand .brand-sub { display: none; }
  /* 16px stops iOS zooming the whole page when a field takes focus. */
  .auth-input .input { font-size: 16px; }
}

/* Short viewports: a landscape phone, or a small window. */
@media (max-height: 620px) {
  .auth-wrap { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
  .auth-brand { margin-bottom: var(--sp-4); }
  .auth-sub { margin-bottom: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-reveal, .pw-bar, .input { transition: none; }
}

/* --- account menu in the app shell --------------------------------------- */

.account {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  padding-left: var(--sp-3);
}

.account-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.account-who .icon { color: var(--ink-4); flex: none; }

.account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-out { margin: 0; }

@media (max-width: 900px) {
  .account { padding-left: 0; }
  .account-who { display: none; }
}