/* ════════════════════════════════════════════════════════════════════
   DNA+ CONNECT · INTAKE REDESIGN LAYER
   Loaded after intake.css — restyles the live .ip-* board to the design
   reference (design-reference/intake.css). Visual only: no markup/JS
   changes, all data hooks + ids + event handlers preserved.
   Scoped under .intake-page so nothing else is affected.
   ════════════════════════════════════════════════════════════════════ */

/* widen the board a touch (design = 1560) */
.intake-page{max-width:1560px}

/* ── page header (icon tile + title + goal) ─────────────────────────── */
.intake-page .ip-hero{display:flex;align-items:center;gap:1.1rem;
  padding-bottom:1.2rem;border-bottom:1px solid var(--border);margin-bottom:1.3rem}
.intake-page .ip-logo{width:54px;height:54px;border-radius:var(--radius-lg);display:grid;place-items:center;
  background:var(--grad-gold-btn);border:1px solid transparent;box-shadow:0 3px 18px rgba(184,150,46,.3);flex:0 0 auto}
.intake-page .ip-logo svg{width:26px;height:26px;stroke:#0a0a0a}
.intake-page .ip-hero-title{font-family:var(--sans);font-weight:700;font-size:1.7rem;letter-spacing:-.025em;color:var(--white)}
.intake-page .ip-hero-subtitle{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:.45rem}
.intake-page .ip-hero-subtitle .gold{color:var(--gold-lt);font-weight:600}

/* ── control bar ────────────────────────────────────────────────────── */
.intake-page .ip-status{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:.7rem 1rem;margin-bottom:1.1rem}
.intake-page .ip-status-left,.intake-page .ip-status-right{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.intake-page .ip-status-right{margin-left:auto}
.intake-page .ip-live{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.62rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.intake-page .ip-live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:pulse 1.8s var(--ease) infinite}
.intake-page .ip-divider{width:1px;height:14px;background:var(--border2);flex:0 0 auto}
.intake-page .ip-rep-chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--text);
  background:var(--surface);border:1px solid var(--border2);border-radius:99px;padding:.22rem .7rem}
.intake-page .ip-pod-info{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.intake-page .ip-pod-info b,.intake-page .ip-pod-info strong{color:var(--gold-lt);font-weight:600}
.intake-page .ip-done-counter{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.intake-page .ip-done-counter svg{width:13px;height:13px;color:var(--green);fill:none;stroke:currentColor}
.intake-page .ip-done-counter strong{color:var(--gold-lt);font-weight:600}

/* view toggles → segmented control */
.intake-page .ip-view-toggle{display:flex;gap:3px;background:var(--surface);border:1px solid var(--border);
  border-radius:99px;padding:3px}
.intake-page .ip-view-btn{display:inline-flex;align-items:center;gap:.45rem;background:transparent;border:0;color:var(--muted);
  font-family:var(--sans);font-size:.76rem;font-weight:600;padding:.34rem .9rem;border-radius:99px;transition:all .18s var(--ease)}
.intake-page .ip-view-btn-count{font-family:var(--mono);font-size:.66rem;color:var(--muted2)}
.intake-page .ip-view-btn:hover{color:var(--text)}
.intake-page .ip-view-btn.active{background:var(--surface3);color:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.intake-page .ip-view-btn.active .ip-view-btn-count{color:var(--gold-lt)}

/* sound / notify / pod */
.intake-page .ip-icon-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--border2);
  color:var(--muted);font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:.38rem .7rem;border-radius:var(--radius);transition:all .15s}
.intake-page .ip-icon-btn svg{width:14px;height:14px;color:var(--gold-dim);fill:none;stroke:currentColor}
.intake-page .ip-icon-btn:hover{color:var(--gold-lt);border-color:var(--gold-dim);background:var(--gold-glow)}
.intake-page .ip-icon-btn:hover svg{color:var(--gold-lt)}
.intake-page .ip-icon-btn.active{color:var(--gold-lt);border-color:var(--gold-dim);background:var(--gold-glow)}
.intake-page .ip-icon-btn.active svg{color:var(--gold-lt)}

/* ── filters ────────────────────────────────────────────────────────── */
.intake-page .ip-filter-bar{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:.85rem 1rem;margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.65rem}
.intake-page .ip-filter-row{display:flex;align-items:center;gap:1rem}
.intake-page .ip-filter-label{font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-dim);width:72px;flex:0 0 auto}
.intake-page .ip-filter-pills{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;flex:1}
.intake-page .ip-pill{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--border2);
  color:var(--muted);font-size:.76rem;font-weight:500;padding:.3rem .7rem;border-radius:99px;transition:all .15s var(--ease)}
.intake-page .ip-pill svg{width:13px;height:13px;fill:none;stroke:currentColor}
.intake-page .ip-pill-count{font-family:var(--mono);font-size:.62rem;color:var(--muted2);background:var(--bg);border-radius:99px;
  min-width:18px;height:17px;padding:0 .32rem;display:grid;place-items:center;border:1px solid var(--border)}
.intake-page .ip-pill:hover{color:var(--text);border-color:var(--gold-dim)}
.intake-page .ip-pill.active{background:var(--gold-glow);border-color:var(--gold-dim);color:var(--gold-lt)}
.intake-page .ip-pill.active .ip-pill-count{color:var(--gold-lt);background:rgba(0,0,0,.25)}
.intake-page .ip-show-all{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:0;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .15s}
.intake-page .ip-show-all:hover{color:var(--gold-lt)}

/* ── board ──────────────────────────────────────────────────────────── */
.intake-page .ip-board{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:start}
.intake-page .ip-col{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1rem 1rem 1.1rem;position:relative;overflow:hidden}
.intake-page .ip-col::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:.85}
.intake-page .ip-col[data-col="fresh"]::before{background:linear-gradient(90deg,var(--green),transparent 70%)}
.intake-page .ip-col[data-col="breached"]::before{background:linear-gradient(90deg,var(--red),transparent 70%)}
.intake-page .ip-col[data-col="hold"]::before{background:linear-gradient(90deg,var(--pod-reconnect),transparent 70%)}
.intake-page .ip-col-header{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--border)}
.intake-page .ip-col-title{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.02rem;color:var(--white);letter-spacing:-.01em}
.intake-page .ip-col-dot{width:7px;height:7px;border-radius:50%;background:var(--muted2);display:inline-block;flex:0 0 auto}
.intake-page .ip-col[data-col="fresh"] .ip-col-dot{background:var(--green);box-shadow:0 0 8px var(--green)}
.intake-page .ip-col[data-col="breached"] .ip-col-dot{background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1.8s var(--ease) infinite}
.intake-page .ip-col[data-col="hold"] .ip-col-dot{background:var(--pod-reconnect)}
.intake-page .ip-col-count{font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--gold-lt);background:var(--surface);
  border:1px solid var(--border2);border-radius:99px;min-width:22px;height:20px;padding:0 .4rem;display:inline-grid;place-items:center;margin-left:.4rem}
.intake-page .ip-col[data-col="breached"] .ip-col-count{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.intake-page .ip-col-meta{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.intake-page [id^="ip-col-"]{display:flex;flex-direction:column;gap:.7rem;min-height:90px}
.intake-page .ip-col-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  min-height:160px;color:var(--muted2);border:1px dashed var(--border2);border-radius:var(--radius);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:1rem}

/* ── lead card ──────────────────────────────────────────────────────── */
.intake-page .ip-lead{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  transition:transform .15s var(--ease),border-color .15s,box-shadow .15s;cursor:pointer}
.intake-page .ip-lead:hover{border-color:var(--border2);box-shadow:var(--shadow-tile)}
.intake-page .ip-col[data-col="breached"] .ip-lead{border-color:color-mix(in srgb,var(--red) 32%,var(--border))}
.intake-page .ip-lead.is-new{animation:ipNewFlash 1.2s var(--ease)}
@keyframes ipNewFlash{0%{box-shadow:0 0 0 1px var(--gold),0 0 18px var(--gold-glow)}100%{box-shadow:none}}

/* category banner (.ip-cat-strip) */
.intake-page .ip-cat-strip{display:flex;align-items:center;gap:.4rem;padding:.4rem .8rem;background:var(--surface2);
  border-bottom:1px solid var(--border);font-family:var(--mono);font-size:.56rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);position:relative}
.intake-page .ip-cat-strip svg{width:12px;height:12px;fill:none;stroke:currentColor}
.intake-page .ip-lead[data-cat="ORGANIC"] .ip-cat-strip{color:var(--green)}
.intake-page .ip-lead[data-cat="EVENT"] .ip-cat-strip{color:var(--pod-engage)}
.intake-page .ip-cat-strip-meta{margin-left:auto;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted2);font-weight:500}

/* body */
.intake-page .ip-lead-body{padding:.8rem .8rem .2rem}
.intake-page .ip-lead-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem}
.intake-page .ip-lead-idblock{min-width:0}
.intake-page .ip-lead-label{font-weight:700;font-size:1rem;color:var(--white);letter-spacing:-.01em;
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.intake-page .ip-lead-es{font-family:var(--mono);font-size:.5rem;font-weight:600;letter-spacing:.1em;color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 48%,transparent);background:color-mix(in srgb,var(--green) 13%,transparent);
  border-radius:99px;padding:.06rem .36rem;line-height:1.5}
.intake-page .ip-lead-claim{font-family:var(--mono);font-size:.5rem;font-weight:600;letter-spacing:.1em;color:var(--gold-lt);
  border:1px solid var(--gold-dim);background:var(--gold-glow);
  border-radius:99px;padding:.06rem .36rem;line-height:1.5}
.intake-page .ip-lead-claim.mine{color:var(--green);border-color:color-mix(in srgb,var(--green) 48%,transparent);
  background:color-mix(in srgb,var(--green) 13%,transparent)}
/* Qualify cross-link (already chatted with the qualifier) — same pill weight
   as ES/claim so it reads as "one more fact," not an alarm; blue keeps it out
   of the green/gold/red vocabulary already spoken for on this card. */
.intake-page .ip-lead-qz{font-family:var(--mono);font-size:.5rem;font-weight:600;letter-spacing:.1em;color:var(--pod-intake);
  border:1px solid color-mix(in srgb,var(--pod-intake) 48%,transparent);background:color-mix(in srgb,var(--pod-intake) 13%,transparent);
  border-radius:99px;padding:.06rem .36rem;line-height:1.5;cursor:pointer}
.intake-page .ip-lead-qz:hover{filter:brightness(1.2)}
.intake-page .ip-lead-qz.hot{color:var(--gold-lt);border-color:var(--gold-dim);background:var(--gold-glow)}
.intake-page .ip-lead-loc{display:flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--muted);margin-top:.2rem}
.intake-page .ip-lead-release{display:flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted2);margin-top:.35rem}
.intake-page .ip-lead-release svg{width:11px;height:11px;flex:0 0 auto;color:var(--pod-reconnect);fill:none;stroke:currentColor}
/* safety: keep any inline-symbol icon inside a lead card from rendering at its
   default (huge) intrinsic size if a specific rule didn't catch it */
.intake-page .ip-lead svg{max-width:16px;max-height:16px;fill:none;stroke:currentColor}
.intake-page .ip-lead .ip-cat-tooltip{display:none}

/* SLA timer (.ip-timer) */
.intake-page .ip-timer{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.04em;padding:.24rem .5rem;border-radius:var(--radius-sm);white-space:nowrap;flex:0 0 auto}
.intake-page .ip-timer.fresh{color:var(--green);border:1px solid color-mix(in srgb,var(--green) 40%,transparent);
  background:color-mix(in srgb,var(--green) 11%,transparent)}
.intake-page .ip-timer.warn{color:var(--yellow);border:1px solid color-mix(in srgb,var(--yellow) 42%,transparent);
  background:color-mix(in srgb,var(--yellow) 12%,transparent)}
.intake-page .ip-timer.breach{color:#fff;background:#8f2c2c;border:1px solid #a33636;box-shadow:0 0 12px rgba(143,44,44,.4)}
.intake-page .ip-timer.hold{color:var(--pod-reconnect);border:1px solid color-mix(in srgb,var(--pod-reconnect) 45%,transparent);
  background:color-mix(in srgb,var(--pod-reconnect) 12%,transparent);letter-spacing:.12em;font-size:.58rem}
/* "left" / "over" — the word that says which direction the clock runs. Set smaller and lighter
   than the digits so it reads as a unit rather than competing with the number, and it rides the
   gap the .ip-timer flex row already provides. */
.intake-page .ip-timer-u{font-family:var(--sans);font-size:.58rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;opacity:.85}

/* actions row */
.intake-page .ip-lead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.7rem .8rem .8rem}
/* flex:0 0 auto is load-bearing. Without it these buttons shrink below their own
   text width instead of wrapping, and the label spills outside the button border
   in a narrow column (ACTIONS was the first to go once a 6th button landed).
   The row is already flex-wrap:wrap — let it wrap rather than squeeze. */
.intake-page .ip-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.58rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:.4rem .6rem;border-radius:var(--radius-sm);
  border:1px solid var(--border2);background:var(--surface2);color:var(--muted);transition:all .15s;cursor:pointer;text-decoration:none}
.intake-page .ip-btn:hover{color:var(--text);border-color:var(--gold-dim)}
.intake-page .ip-btn-ico{width:12px;height:12px;fill:none;stroke:currentColor}
.intake-page .ip-btn-primary{background:var(--grad-gold-btn);border-color:transparent;color:#0a0a0a;box-shadow:0 1px 8px rgba(184,150,46,.22)}
.intake-page .ip-btn-primary:hover{filter:brightness(1.06);color:#0a0a0a}
.intake-page .ip-btn-book{color:var(--gold-lt);border-color:var(--gold-dim);background:var(--gold-glow)}
.intake-page .ip-btn-actions{background:transparent}
/* No margin-left:auto here. It pinned ES to the right edge, which read fine
   while the action row was a single line -- but the row wraps now, so it
   stranded ES at the far right of the last line with a ~330px gap after
   HANDLED. ES stays visually distinct by its green styling, not position. */
.intake-page .ip-btn-es{color:var(--green);border:1px solid color-mix(in srgb,var(--green) 40%,transparent);
  background:transparent}
.intake-page .ip-btn-es:hover{background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green)}
/* Pressed. Every other button in this row fires and forgets; this one holds a state, so it has to
   look held — not just carry aria-pressed for a screen reader. The filled treatment is what tells
   a rep at a glance that the flag is already on and their click would remove it. */
.intake-page .ip-btn-es.is-on{background:color-mix(in srgb,var(--green) 20%,transparent);
  border-color:color-mix(in srgb,var(--green) 70%,transparent);font-weight:700}

/* ── Done / Events boards — keep consistent with the card language ───── */
.intake-page .ip-done-board,.intake-page .ip-events-board{background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.2rem}
.intake-page .ip-done-header,.intake-page .ip-events-header{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.intake-page .ip-done-title,.intake-page .ip-events-title{display:flex;align-items:center;gap:.5rem;font-weight:700;
  font-size:1.02rem;color:var(--white)}
.intake-page .ip-done-title svg,.intake-page .ip-events-title svg{width:16px;height:16px;color:var(--green);fill:none;stroke:currentColor}
.intake-page .ip-done-meta,.intake-page .ip-events-meta{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted2)}
.intake-page .ip-done-split{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start}
.intake-page .ip-done-col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.intake-page .ip-done-col-title{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--white);font-size:.9rem}
.intake-page .ip-done-col-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}
.intake-page .ip-done-col[data-bucket="organic"] .ip-done-col-dot{background:var(--green)}
.intake-page .ip-done-col-count{font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--gold-lt);
  background:var(--surface);border:1px solid var(--border2);border-radius:99px;min-width:22px;height:20px;padding:0 .4rem;display:grid;place-items:center}
.intake-page .ip-done-col-list,.intake-page .ip-events-list{display:flex;flex-direction:column;gap:.7rem;min-height:60px}
.intake-page .ip-done-empty{color:var(--muted2);font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;padding:1rem;text-align:center;border:1px dashed var(--border2);border-radius:var(--radius)}

/* ── all-clear panel ────────────────────────────────────────────────── */
.intake-page .ip-allclear{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:2.5rem 2rem;text-align:center}
.intake-page .ip-allclear-title{font-weight:700;font-size:1.4rem;color:var(--white);margin-bottom:.6rem}
.intake-page .ip-allclear-sub{color:var(--muted);font-size:.9rem;max-width:520px;margin:0 auto 1.3rem}
.intake-page .ip-allclear-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.66rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt);background:var(--gold-glow);
  border:1px solid var(--gold-dim);border-radius:var(--radius);padding:.6rem 1rem;text-decoration:none;transition:all .15s}
.intake-page .ip-allclear-btn:hover{filter:brightness(1.1)}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:1080px){.intake-page .ip-board{grid-template-columns:1fr}.intake-page .ip-done-split{grid-template-columns:1fr}}
@media(max-width:760px){.intake-page .ip-status{gap:.7rem}.intake-page .ip-status-left,.intake-page .ip-status-right{flex-wrap:wrap;gap:.7rem}.intake-page .ip-status-right{margin-left:0}}

/* DNC reads as destructive, like the Engage remove action. It is confirm-gated
   and cannot be undone from the board. */
.intake-page .ip-btn-dnc{color:var(--red);
  border-color:color-mix(in srgb,var(--red) 42%,transparent);background:transparent}
.intake-page .ip-btn-dnc:hover{color:var(--red);
  border-color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent)}