/* Minutes Network Outreach Panel
   Dark, quiet, built at 390px first. Surfaces are raised with borders rather
   than shadows. No gradients on text, no glass. */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #05060c;
  --surface: #0a0c16;
  --surface-2: #10131f;
  --surface-3: #171b2b;
  --line: #1b1f30;
  --line-2: #272c42;
  --text: #e8eaf2;
  --text-2: #98a0b8;
  --text-3: #626a86;
  --cyan: #00d9ff;
  --teal: #42d0c8;
  --violet: #7e6bf0;
  --magenta: #c657de;
  --good: #42d0c8;
  --bad: #ff6b6b;
  --warn: #e8b84b;
  --r: 10px;
  --tab-h: 62px;
  --pad: 16px;
}

* { box-sizing: border-box; }
/* A [hidden] element that also sets display would otherwise stay on screen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Sized to keep iOS from zooming the page on focus. */
input, select, textarea { font-size: 16px; }

a { color: var(--cyan); }

/* ------------------------------------------------------------------ login */

.login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 24px;
}

.wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.wordmark span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--cyan);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.login-card .field { margin-top: 24px; }

/* ----------------------------------------------------------------- shared */

label, .label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}

input[type='text'], input[type='password'], input[type='email'], input[type='number'],
input[type='search'], select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  outline: none;
  transition: border-color 0.15s ease;
}
textarea { min-height: 160px; line-height: 1.6; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
select { appearance: none; background-image: none; }

/* The native control sizes itself to its own button, which lands well under the
   44px minimum. Padding brings the hit area up without restyling the control. */
input[type='file'] {
  width: 100%;
  padding: 11px 0;
  font-size: 16px;
  color: var(--text-2);
}
input[type='file']::file-selector-button {
  min-height: 44px;
  margin-right: 12px;
  padding: 8px 14px;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.btn {
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  color: var(--text);
  border-radius: var(--r);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn:hover { background: #1d2234; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--cyan); border-color: var(--cyan); color: #04121a; font-weight: 600; }
/* Cyan at 40 percent still reads as a live button, which is the wrong signal on
   an unarmed send. A disabled primary drops back to a plain surface. */
.btn-primary:disabled { background: var(--surface-2); border-color: var(--line-2); color: var(--text-2); opacity: 0.75; }
.btn-primary:hover { background: #3ce2ff; }
.btn-danger { color: var(--bad); border-color: #3a2030; }
.btn-danger:hover { background: #24151f; }
.btn-ghost { background: transparent; }
.btn-full { width: 100%; }
/* Smaller type and padding, but never below the 44px touch minimum. */
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: 14px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { min-width: 0; }
.grow { flex: 1 1 160px; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.stack > * + * { margin-top: 14px; }
.spacer { height: 12px; }

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  white-space: nowrap;
}
.pill-new { color: var(--cyan); border-color: #12384a; }
.pill-contacted { color: var(--violet); border-color: #2b2554; }
.pill-replied { color: var(--teal); border-color: #16403e; }
.pill-closed { color: var(--text-3); }
.pill-sent { color: var(--teal); border-color: #16403e; }
.pill-failed { color: var(--bad); border-color: #3a2030; }
.pill-sandbox { color: var(--warn); border-color: #3d3318; }
.pill-live { color: var(--magenta); border-color: #3d1f45; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.card + .card { margin-top: 10px; }

.notice {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-2);
  background: var(--surface-2);
}
.notice-bad { border-color: #3a2030; color: #ffb4b4; }
.notice-warn { border-color: #3d3318; color: #e8c97b; }

.empty { padding: 34px 16px; text-align: center; color: var(--text-3); font-size: 14px; }

/* ------------------------------------------------------------------ shell */

.app { min-height: 100vh; min-height: 100dvh; }

.sidebar { display: none; }

.main {
  padding: 0 var(--pad);
  padding-bottom: calc(var(--tab-h) + 28px + env(safe-area-inset-bottom));
  max-width: 100%;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(5, 6, 12, 0.94);
  border-bottom: 1px solid var(--line);
  margin: 0 calc(var(--pad) * -1);
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.topbar h1 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

.view { padding-top: 18px; }

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(8, 10, 18, 0.97);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  min-height: var(--tab-h);
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 2px;
}
.tabbar button svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tabbar button[aria-current='true'] { color: var(--cyan); }

/* --------------------------------------------------------------- contacts */

.filters { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.filters .wide { grid-column: 1 / -1; }
/* display: grid above is an author rule and beats the browser's own
   [hidden] { display: none }, so the secondary panel would never hide without
   this line. */
.filters[hidden] { display: none; }

.filters-extra { margin-top: 10px; }

/* A quiet control for the disclosure toggle and the clear link. It carries the
   44px touch minimum like every other control, and gives it up on a desktop
   with a mouse along with the rest of them. */
.btn-text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-2);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-text:hover { color: var(--text); }
.small .btn-text { margin-top: 0; font-size: inherit; }

.list { margin-top: 14px; }

.item {
  width: 100%;
  text-align: left;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  min-height: 44px;
}
.item + .item { margin-top: 8px; }
.item:hover { border-color: var(--line-2); }
.item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.item-name { font-weight: 600; letter-spacing: -0.01em; }
.item-sub { color: var(--text-2); font-size: 13px; margin-top: 3px; word-break: break-word; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }

/* --------------------------------------------------------------- template */

.thumb {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  display: block;
}

.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.asset {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  padding: 0;
  min-height: 44px;
}
.asset[aria-pressed='true'] { border-color: var(--cyan); }
.asset img { width: 100%; height: 72px; object-fit: cover; display: block; }
.asset span { display: block; padding: 6px 8px; font-size: 11px; color: var(--text-3); word-break: break-all; }
.asset-none { display: flex; align-items: center; justify-content: center; height: 100px; color: var(--text-3); font-size: 13px; }

.preview-frame {
  width: 100%;
  height: 520px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #fff;
}

/* ------------------------------------------------------------------- send */

.send-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress { font-variant-numeric: tabular-nums; color: var(--text-2); font-size: 13px; }

.send-actions {
  position: sticky;
  bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom));
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 0 0;
  background: linear-gradient(to top, var(--bg) 62%, rgba(5, 6, 12, 0));
}
.send-actions .btn { min-height: 50px; }

.queue-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.queue-item:last-child { border-bottom: 0; }
.queue-scroll { max-height: 320px; overflow-y: auto; }

/* ------------------------------------------------------------------ sheet */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(2, 3, 8, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet-panel {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 16px 16px 0 0;
  padding: 18px var(--pad) calc(28px + env(safe-area-inset-bottom));
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sheet-head h2 { font-size: 16px; font-weight: 600; }

.map-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.map-row .head { font-size: 13px; color: var(--text-2); word-break: break-word; }

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tab-h) + 20px + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100% - 32px);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 12px 16px;
  font-size: 14px;
}
.toast-bad { border-color: #3a2030; color: #ffb4b4; }

/* ------------------------------------------------------------- 768 and up */

@media (min-width: 768px) {
  .sheet { align-items: center; }
  .sheet-panel { border-radius: 16px; padding-bottom: 24px; }
}

/* The sidebar replaces the tab bar at 768, as specified. The content column is
   only about 500px wide here, so the roomier layouts wait until 1040. */
@media (min-width: 768px) {
  .app { display: grid; grid-template-columns: 236px 1fr; }

  .sidebar {
    display: block;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    border-right: 1px solid var(--line);
    padding: 24px 14px;
    background: var(--surface);
  }
  .sidebar .wordmark { padding: 0 10px 22px; }
  .sidebar nav { display: flex; flex-direction: column; gap: 2px; }
  .sidebar nav button {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
  }
  .sidebar nav button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; }
  .sidebar nav button:hover { background: var(--surface-2); color: var(--text); }
  .sidebar nav button[aria-current='true'] { background: var(--surface-3); color: var(--text); }

  .tabbar { display: none; }
  .main { padding: 0 24px; padding-bottom: 56px; max-width: 1040px; }
  .topbar { margin: 0 -24px; padding: 18px 24px; }
  .send-actions { bottom: 16px; max-width: 420px; }
  .toast { bottom: 24px; }
}

@media (min-width: 1040px) {
  /* Both filter grids share these tracks so their column edges line up. The
     secondary row holds six controls, so it fills four and leaves two. */
  .filters { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .filters .wide { grid-column: auto; }
  .main { padding: 0 32px; padding-bottom: 56px; }
  .topbar { margin: 0 -32px; padding: 18px 32px; }
}

/* ------------------------------------------------- tighter, where there is a
   mouse. The 44px touch target and the 16px input floor are iOS rules: they
   stop a thumb missing and stop Safari zooming the page on focus. Neither
   applies to a pointing device, and at this width that sizing reads as a phone
   app blown up. Gated on pointer: fine so a large tablet in landscape, which is
   wide enough to hit 1040, keeps the full touch sizing.

   Lighter is mostly subtraction: the row fill sat one step off the page
   background and so added weight without separating anything. The border does
   that on its own, and the fill comes back on hover where it means something. */

@media (min-width: 1040px) and (hover: hover) and (pointer: fine) {
  .btn-text { min-height: 0; margin-top: 8px; }
  .small .btn-text { margin-top: 0; }
  input[type='text'], input[type='password'], input[type='email'], input[type='number'],
  input[type='search'], select {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13.5px;
  }
  .btn { min-height: 34px; padding: 6px 14px; font-size: 13.5px; }
  .btn-sm { min-height: 30px; padding: 4px 12px; font-size: 13px; }
  /* Import and Add are two buttons, not a pair of banners. */
  .actions .btn { flex: 0 0 auto; }

  .filters { gap: 8px; }
  .list { margin-top: 10px; }

  /* A control has a natural size and the column is 1040 wide. A two digit
     interval box and a Sign out button do not need 990px of it, and at that
     width they read as banners rather than as controls. 560 is the form measure
     the detail sheet already uses, so this is the existing number, not a new
     one. The label is left alone, and so is the HTML body, which is code and
     wants the room. The Contacts filter row is outside .field and keeps the
     full width, where four controls across is the point. */
  .field > input, .field > select, .btn-full, .row { max-width: 560px; }

  /* A box around all of 125 rows is 125 outlines to read past. One rule between
     them separates just as well and leaves the names as the only strong marks
     on the page. The fill returns on hover, where it points at something. */
  .item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 9px 10px;
  }
  .item + .item { margin-top: 0; }
  .item:last-child { border-bottom: 0; }
  .item:hover { background: var(--surface); }
  .item-name { font-size: 14px; }
  .item-sub { font-size: 12.5px; margin-top: 1px; }

  .pill { padding: 2px 7px; font-size: 10px; }
  .card { border-radius: 10px; padding: 13px; }
  .card + .card { margin-top: 6px; }
  .stack > * + * { margin-top: 11px; }
  .spacer { height: 9px; }
  .view { padding-top: 14px; }
  .topbar { padding-top: 13px; padding-bottom: 13px; }
  .empty { padding: 26px 16px; }
}