/* subscribers.css — the Contacts screen, in the house visual language.
 *
 * ⚠️ EVERY TOKEN BELOW IS SCOPED TO #page-engage-contacts, DELIBERATELY.
 * Alex, 2026-08-07: *"I don't want you to change outreach or anything… I just
 * want you to fix the subscriber area so don't touch anything in outreach or
 * community or anywhere else."* Scoping the custom properties to this page's
 * root means this file CANNOT affect another screen even by accident — there
 * is no :root block in here at all.
 *
 * ── WHY THE FIRST VERSION CAME OUT MUDDY ──────────────────────────────
 * Alex: *"The colours in the subscriber area are all messed up."* He was right,
 * and the cause is worth writing down because it will catch the next person.
 *
 * The courses/outreach screens style themselves with `var(--surface)`,
 * `var(--text-2)`, `var(--text-3)`, `var(--warn-soft)`, `var(--good)`. I copied
 * that vocabulary. **Those tokens are defined in exactly ONE place —
 * `#od-content-root[data-palette=…]` in outreach-dashboard.css — and nowhere
 * globally.** Verified by grepping every stylesheet for their definitions.
 *
 * So on any page outside the outreach root they resolve to NOTHING. The courses
 * manage board gets away with it because a missing background inherits the page
 * ground and happens to look white. My page did not get away with it: my
 * fallbacks fired, and the deep amber I had invented for the banner rendered as
 * mud against them.
 *
 * The fix is not to import that vocabulary. It is to use LITERAL values copied
 * from the house rules, plus theme.css tokens (which ARE global), all declared
 * locally below. One place to change, no dependency on another page's palette.
 *
 * ── WHAT IS COPIED, AND FROM WHERE ────────────────────────────────────
 *   · the banner gradient + radial glow + mint dot .......... manage-board.css .mg-live
 *   · the nudge bar and its 32px icon chip ................... manage-board.css .mg-next.warn
 *   · the stat tile ......................................... manage-board.css .mg-stat
 *   · the segmented multicolour bar ......................... the outreach "IN PIPELINE" bar,
 *       which is the one Alex pointed at: soft, harmonious, rounded segments —
 *       not the bright traffic-light green/orange/red I had used.
 */

#page-engage-contacts {
  /* Literals, copied from the house rules named above. Local to this page. */
  --sub-surface:      #ffffff;
  --sub-border:       #e8e4d8;
  --sub-border-soft:  #efece2;
  --sub-text:         #15172b;
  --sub-text-2:       #4d5168;
  --sub-text-3:       #8a8fa6;
  --sub-text-4:       #b3b6c4;

  --sub-accent:       #6a4cf1;
  --sub-accent-soft:  #efeaff;
  --sub-accent-line:  #ddd9ff;

  /* The house semantic set — deeper and softer than the bright theme.css
     equivalents, which is exactly what "messed up" was describing. */
  --sub-good:         #1c8e5a;
  --sub-warn:         #b87410;
  --sub-warn-soft:    #fbf3df;
  --sub-warn-line:    #ecd6a8;
  --sub-danger:       #c0423a;

  --sub-radius:       12px;
  --sub-radius-lg:    18px;
  --sub-mono:         "JetBrains Mono", ui-monospace, monospace;
  --sub-display:      "Bricolage Grotesque", "Inter", system-ui, sans-serif;
}

/* ── Status banner ──────────────────────────────────────────────────────
   The exact .mg-live treatment: same gradient stops, same radial glow, same
   mint dot and mono eyebrow.

   ⚠️ THE BANNER IS ALWAYS GREEN, AND THE STATE LIVES IN THE EYEBROW + DOT.
   My first attempt invented a dark amber for "needs attention" and it rendered
   as brown mud. The house has exactly ONE dark banner treatment and this is it;
   inventing a second colour for it is what went wrong. Courses solves the same
   problem the same way — the bar is green and `• LIVE` carries the state — so
   this follows that rather than adding a colour nobody else uses. */
#page-engage-contacts .sub-banner {
  background: linear-gradient(110deg, #10331f 0%, #14532d 60%, #1c6b3a 100%);
  border-radius: var(--sub-radius-lg);
  color: #fff;
  padding: 22px 26px;
  display: flex; align-items: center; gap: 18px;
  position: relative; overflow: hidden;
  margin-bottom: 16px;
}
#page-engage-contacts .sub-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 90% 50%, rgba(93, 212, 168, 0.32), transparent 60%);
}
#page-engage-contacts .sub-banner-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #6ee7b7;
  flex-shrink: 0; position: relative; z-index: 1;
}
#page-engage-contacts .sub-banner-text { flex: 1; position: relative; z-index: 1; min-width: 0; }
#page-engage-contacts .sub-banner-eyebrow {
  font-family: var(--sub-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6ee7b7;
}
#page-engage-contacts .sub-banner h2 {
  font-family: var(--sub-display); font-weight: 700; font-size: 24px;
  margin: 3px 0 2px; letter-spacing: -0.015em; color: #fff;
}
#page-engage-contacts .sub-banner p {
  font-family: var(--sub-mono); font-size: 13px; margin: 0;
  color: rgba(255, 255, 255, 0.82); line-height: 1.5;
}
#page-engage-contacts .sub-banner-actions {
  display: flex; gap: 10px; position: relative; z-index: 1; flex-wrap: wrap;
}
#page-engage-contacts .sub-banner-actions button {
  border-radius: 11px; padding: 12px 18px; font-size: 13.5px; font-weight: 600;
  border: none; cursor: pointer; white-space: nowrap; font-family: inherit;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff;
}
#page-engage-contacts .sub-banner-actions button.primary { background: #fff; color: #14532d; border-color: #fff; }
#page-engage-contacts .sub-banner-actions button:hover { filter: brightness(1.12); }

/* ── The one nudge — .mg-next.warn, exactly ─────────────────────────── */
#page-engage-contacts .sub-nudge {
  background: var(--sub-warn-soft); border: 1px solid var(--sub-warn-line);
  border-radius: var(--sub-radius); padding: 14px 18px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
}
#page-engage-contacts .sub-nudge .ri {
  width: 32px; height: 32px; border-radius: 8px; background: #fff;
  border: 1px solid var(--sub-warn-line); color: var(--sub-warn);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 15px;
}
#page-engage-contacts .sub-nudge .rt {
  flex: 1; font-size: 13px; color: var(--sub-text-2); line-height: 1.45; min-width: 220px;
}
#page-engage-contacts .sub-nudge .rt b { color: var(--sub-text); }
#page-engage-contacts .sub-nudge button {
  border: 1px solid var(--sub-warn-line); background: #fff; color: var(--sub-warn);
  border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
#page-engage-contacts .sub-nudge button:hover { background: #fff8ea; }

/* ── Cards ──────────────────────────────────────────────────────────── */
#page-engage-contacts .sub-card {
  background: var(--sub-surface); border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius); margin-bottom: 16px;
}
#page-engage-contacts .sub-card-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 20px 0;
}
#page-engage-contacts .sub-card-head h3 {
  margin: 0; font-family: var(--sub-display); font-size: 16px;
  letter-spacing: -0.01em; color: var(--sub-text);
}
#page-engage-contacts .sub-card-head .hint { font-size: 13px; color: var(--sub-text-3); }
#page-engage-contacts .sub-card-head .right { margin-left: auto; }
#page-engage-contacts .sub-card-body { padding: 14px 20px 20px; }

/* ── Health bar — the outreach pipeline bar, copied exactly ───────────
   Alex, 2026-08-07: *"If you look at the list health and compare that to the
   colours that we use in the outreach pipeline, which are nice, we should be
   using those colours. The green, the red… the green is when everything is
   healthy and going back from there is what it should be like."*

   Values lifted verbatim from discover.css `.ps-bar` / `.ps-seg` — the same
   gradients, the same 3px gap, the same 4px radius with rounded outer ends, the
   same hover, the same Bricolage face. Not "colours like those": those colours.

   The order is his rule — GREEN is healthy and each band walks back from it:
     engaged      → green   (.ps-seg.client)
     gone quiet   → indigo  (.ps-seg.journey)
     no address   → plum    (.ps-seg.invited)
     unsubscribed → rose    (.ps-seg.engaging)
   Salmon is the fifth pipeline colour and is unused here — four bands, so the
   walk stops one short rather than crowding two reds together. */
#page-engage-contacts .hbar {
  display: flex; gap: 3px; height: 30px;
}
#page-engage-contacts .hbar button {
  height: 100%; border: 0; border-radius: 4px; min-width: 8px;
  display: flex; align-items: center; padding: 0 12px;
  color: #fff; font-family: var(--sub-display);
  font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em;
  overflow: hidden; white-space: nowrap; cursor: pointer;
  transition: opacity .15s, transform .15s;
  font-variant-numeric: tabular-nums;
}
#page-engage-contacts .hbar button:first-child { border-radius: 6px 4px 4px 6px; }
#page-engage-contacts .hbar button:last-child  { border-radius: 4px 6px 6px 4px; }
#page-engage-contacts .hbar button:hover { opacity: 0.92; transform: scaleY(1.08); }
#page-engage-contacts .hbar button:focus-visible { outline: 2px solid var(--sub-text); outline-offset: 2px; }

#page-engage-contacts .hbar .b-engaged { background: linear-gradient(90deg, #38b878, #1c8e5a); }
#page-engage-contacts .hbar .b-quiet   { background: linear-gradient(90deg, #8b6dff, #6a4cf1); }
#page-engage-contacts .hbar .b-noemail { background: linear-gradient(90deg, #c553a7, #b15dde); }
#page-engage-contacts .hbar .b-unsub   { background: linear-gradient(90deg, #ee6c80, #e85a8a); }

/* .ps-legend, likewise verbatim. */
#page-engage-contacts .hlegend {
  display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px;
  font-size: 13px; color: var(--sub-text-2);
}
#page-engage-contacts .hlegend span { display: inline-flex; align-items: center; gap: 7px; }
#page-engage-contacts .hlegend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: block; }
#page-engage-contacts .hlegend b { color: var(--sub-text); font-weight: 700; }
#page-engage-contacts .hlegend .pct {
  color: var(--sub-text-3); font-family: var(--sub-mono); font-size: 11.5px; margin-left: 2px;
}

/* ── Stat tiles — .mg-stat, exactly ─────────────────────────────────── */
#page-engage-contacts .sub-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
#page-engage-contacts .sub-tile {
  background: var(--sub-surface); border: 1px solid var(--sub-border);
  border-radius: var(--sub-radius); padding: 16px 18px;
}
#page-engage-contacts .sub-tile .lbl {
  font-family: var(--sub-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sub-text-3); display: block;
}
#page-engage-contacts .sub-tile .num {
  font-family: var(--sub-display); font-weight: 700; font-size: 26px;
  margin-top: 6px; letter-spacing: -0.01em; color: var(--sub-text);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
#page-engage-contacts .sub-tile .cap {
  font-size: 11.5px; color: var(--sub-text-3); margin-top: 2px;
  display: inline-flex; align-items: center; gap: 5px;
}
#page-engage-contacts .sub-tile .trend { font-weight: 600; }
#page-engage-contacts .sub-tile .trend.up { color: var(--sub-good); }
#page-engage-contacts .sub-tile .trend.down { color: var(--sub-danger); }

/* ── Groups ─────────────────────────────────────────────────────────── */
#page-engage-contacts .grp-search {
  width: 100%; max-width: 320px; font: inherit; font-size: 13.5px;
  padding: 9px 12px; min-height: 40px; box-sizing: border-box;
  border: 1px solid var(--sub-border); border-radius: 9px;
  background: var(--sub-surface); color: var(--sub-text);
}
#page-engage-contacts .grp-search:focus-visible { outline: 2px solid var(--sub-accent); outline-offset: 1px; }
#page-engage-contacts .grp-label {
  font-family: var(--sub-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sub-text-3); margin: 18px 0 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#page-engage-contacts .grp-label .add {
  cursor: pointer; color: var(--sub-text-3); font-family: "Inter", system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0; text-transform: none;
}
#page-engage-contacts .grp-label .add:hover { color: var(--sub-accent); }
#page-engage-contacts .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#page-engage-contacts .chips:empty::after {
  content: "None yet."; color: var(--sub-text-3); font-size: 13px;
}
#page-engage-contacts .chip {
  font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--sub-border); background: var(--sub-surface);
  color: var(--sub-text); border-radius: 999px; padding: 7px 13px; min-height: 38px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .12s, background .12s;
}
#page-engage-contacts .chip:hover { border-color: var(--sub-accent); }
#page-engage-contacts .chip:focus-visible { outline: 2px solid var(--sub-accent); outline-offset: 2px; }
#page-engage-contacts .chip .n {
  font-family: var(--sub-mono); font-variant-numeric: tabular-nums;
  color: var(--sub-text-3); font-size: 11.5px;
}
#page-engage-contacts .chip[aria-pressed="true"] {
  background: var(--sub-accent-soft); border-color: var(--sub-accent-line); font-weight: 600;
}
#page-engage-contacts .chip[aria-pressed="true"] .n { color: var(--sub-text-2); }
#page-engage-contacts .chip .x {
  border: 0; background: none; cursor: pointer; padding: 0 0 0 2px;
  color: var(--sub-text-4); font-size: 15px; line-height: 1;
  opacity: 0; transition: opacity .15s;
}
#page-engage-contacts .chip:hover .x, #page-engage-contacts .chip .x:focus-visible { opacity: 1; }
#page-engage-contacts .chip .x:hover { color: var(--sub-danger); }

/* ── Action toolbar ─────────────────────────────────────────────────── */
#page-engage-contacts .sub-act {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 9px; padding: 8px 14px; min-height: 38px;
  border: 1px solid var(--sub-border); background: var(--sub-surface);
  color: var(--sub-text); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
#page-engage-contacts .sub-act:hover:not(:disabled) { border-color: var(--sub-accent); }
#page-engage-contacts .sub-act:focus-visible { outline: 2px solid var(--sub-accent); outline-offset: 2px; }
#page-engage-contacts .sub-act:disabled { opacity: .45; cursor: default; }
#page-engage-contacts .sub-act.primary {
  background: var(--sub-accent); border-color: var(--sub-accent); color: #fff;
}
#page-engage-contacts .sub-act.primary:hover:not(:disabled) { filter: brightness(1.08); }
#page-engage-contacts .sub-act.danger:hover:not(:disabled) {
  border-color: var(--sub-danger); color: var(--sub-danger);
}

@media (prefers-reduced-motion: reduce) {
  #page-engage-contacts .hbar button,
  #page-engage-contacts .chip,
  #page-engage-contacts .chip .x { transition: none; }
  #page-engage-contacts .hbar button:hover { transform: none; }
}

@media (max-width: 720px) {
  #page-engage-contacts .sub-banner { padding: 18px; }
  #page-engage-contacts .sub-banner h2 { font-size: 19px; }
  #page-engage-contacts .sub-banner-actions { width: 100%; }
  #page-engage-contacts .hbar { height: 26px; }
}