/* Screens added after the first build: the unified inbox, the pipeline,
   deliverability, growth, brands and the whole of Social.

   A second stylesheet rather than more of the first, so the original stays the
   record of what the console looked like when it shipped. Everything here uses
   the tokens defined at the top of styles.css. No color is invented. */

/* -- chips ------------------------------------------------------------ */
.cchip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:var(--c,#58636B);
  border:1px solid currentColor;border-radius:3px;padding:2px 5px;line-height:1;
  white-space:nowrap;vertical-align:middle}
.bchip{display:inline-flex;align-items:center;font-size:10.5px;color:var(--white);
  background:var(--c,#58636B);border-radius:3px;padding:2px 6px;line-height:1.35;
  white-space:nowrap}
.swatch{width:14px;height:14px;border-radius:3px;display:inline-block;flex:none;
  border:1px solid rgba(15,18,20,.12)}
button.tiny{font-size:11px;padding:4px 8px}
.tiny{font-size:11px}
.bad{color:var(--critical)}
td.n.bad{color:var(--critical)}

/* -- filter bar ------------------------------------------------------- */
.filterbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.fbtn{background:var(--white);border:1px solid var(--line);color:var(--text-2);
  font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:5px;cursor:pointer}
.fbtn:hover{background:var(--surface-2);border-color:var(--silver);color:var(--ink)}
.fbtn.on{border-color:var(--accent);color:var(--accent-live);background:#F1F7FB}
.fbtn b{font-family:var(--mono);font-size:11px;margin-left:5px;opacity:.7}
.fsep{width:1px;height:20px;background:var(--line);margin:0 6px}
.tabrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}

/* -- split view: the list on the left, one thing on the right ---------- */
.split{display:grid;grid-template-columns:352px 1fr;gap:0;border:1px solid var(--line);
  border-radius:6px;overflow:hidden;background:var(--white);min-height:560px}
.splitleft{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;
  background:var(--surface-2)}
.splitleft input{margin:12px;width:calc(100% - 24px)}
.convlist{overflow-y:auto;max-height:720px}
.splitright{padding:24px;overflow-y:auto;max-height:820px;min-width:0}
.convrow{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);padding:13px 14px;cursor:pointer;color:inherit;
  border-radius:0}
.convrow:hover{background:var(--white)}
.convrow.on{background:var(--white);box-shadow:inset 3px 0 0 var(--accent)}
.convrow.unread .cr-who{font-weight:700}
.cr-top{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.cr-who{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cr-when{margin-left:auto;font-size:10.5px;color:var(--text-3);white-space:nowrap}
.cr-sub{font-size:11.5px;color:var(--text-3);margin-bottom:3px}
.cr-snip{font-size:12px;color:var(--text-2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cr-tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}

/* Stage and intent, reusing the pill the console already had. */
.pill.new{color:var(--accent-live);border-color:var(--accent);background:#F1F7FB}
.pill.working,.pill.publishing,.pill.scheduled{color:var(--watch);border-color:var(--watch);
  background:#FBF7EF}
.pill.meeting,.pill.won,.pill.published{color:var(--good);border-color:var(--good);
  background:#F2F8F5}
.pill.lost,.pill.archived{color:var(--steel);border-color:var(--mist)}
.pill.intent-interested{color:var(--good);border-color:var(--good);background:#F2F8F5}
.pill.intent-no{color:var(--critical);border-color:var(--critical);background:#FBF3F3}
.pill.intent-not_now,.pill.intent-ooo,.pill.intent-unclear,.pill.intent-question,
.pill.intent-referral{color:var(--steel);border-color:var(--mist);background:var(--white)}

.cd-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.cd-head h3{font-size:19px}
.cd-controls{display:flex;gap:12px;flex-wrap:wrap;padding:14px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:6px;margin-bottom:18px}
.cd-controls label{min-width:120px}
.cd-controls label.grow{flex:1;min-width:200px}
.thread{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.msg{border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:var(--white)}
.msg.out{background:var(--surface-2);margin-left:36px}
.msg.in{margin-right:36px;border-left:3px solid var(--accent)}
.msg-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  color:var(--text-2);margin-bottom:6px}
.msg-h span{font-weight:400;color:var(--text-3);margin-left:auto}
.msg-h em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--watch)}
.msg-s{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.msg-b{font-size:13px;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere}
.replybox textarea{width:100%}
.notes{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.notes h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 10px;font-weight:500}
.note{font-size:12.5px;color:var(--text-2);margin-bottom:9px}
.note b{color:var(--ink)}
.note span{color:var(--text-3);margin-left:7px;font-size:11px}
.note p{margin:3px 0 0}

/* -- board: the pipeline and the ideas board -------------------------- */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px,1fr);gap:14px;
  overflow-x:auto;padding-bottom:8px;align-items:start}
.board .col{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
  min-height:180px}
.board .col.over{border-color:var(--accent);background:#F1F7FB}
.col-h{display:flex;align-items:baseline;gap:8px;padding:11px 13px;
  border-bottom:1px solid var(--line)}
.col-h b{font-size:12.5px;color:var(--ink)}
.col-h span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.col-b{padding:10px;display:flex;flex-direction:column;gap:8px}
.board .card{background:var(--white);border:1px solid var(--line);border-radius:5px;
  padding:10px 11px;cursor:grab;display:flex;flex-direction:column;gap:4px;
  box-shadow:var(--shadow-s)}
.board .card:hover{border-color:var(--silver)}
.board .card.drag{opacity:.45}
.board .card b{font-size:12.5px;color:var(--ink)}
.c-co{font-size:11.5px;color:var(--text-3)}
.c-sn{font-size:11.5px;color:var(--text-2);line-height:1.45}
.c-na{font-size:11px;color:var(--accent-live)}
.cardacts{display:flex;gap:6px;margin-top:6px}
.empty{color:var(--text-3);font-size:13px;text-align:center;padding:30px 20px;margin:0}
.empty.small{padding:14px;font-size:12px}

/* -- deliverability --------------------------------------------------- */
.warnbox,.okbox{border-radius:6px;padding:15px 18px;margin-bottom:22px;font-size:13px}
.warnbox{background:#FBF7EF;border:1px solid var(--watch);color:var(--slate)}
.warnbox b{display:block;margin-bottom:7px;color:var(--ink)}
.warnbox ul{margin:0;padding-left:18px;line-height:1.7}
.okbox{background:#F2F8F5;border:1px solid var(--good);color:var(--good)}

/* -- social: the queue ------------------------------------------------ */
.qday{margin-bottom:22px}
.qday h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;margin:0 0 9px;padding-bottom:7px;
  border-bottom:1px solid var(--line)}
.qslot{display:flex;align-items:flex-start;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--paper)}
.qslot:last-child{border-bottom:0}
.qtime{font-size:12px;color:var(--text-3);width:52px;flex:none;padding-top:3px}
.qslot.empty-slot{opacity:.75}
.qpost{flex:1;min-width:0;background:var(--white);border:1px solid var(--line);
  border-radius:5px;padding:10px 12px}
.qp-b{font-size:13px;line-height:1.55;color:var(--text-2);overflow-wrap:anywhere}
.qp-m{display:flex;gap:8px;align-items:center;margin-top:7px;flex-wrap:wrap}
.qacts{display:flex;gap:6px;flex:none;padding-top:3px}
.postlist{display:flex;flex-direction:column;gap:12px}
.postcard{background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:14px 16px}
.pc-b{font-size:13.5px;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere}
.pc-m{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.pc-a{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;align-items:center}

.slotgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin:14px 0}
.slotday{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:9px;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.slotday b{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-weight:500}
.slotchip{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;
  padding:2px 3px 2px 6px;color:var(--text-2)}
.slotchip button{background:none;border:0;color:var(--text-3);padding:0 3px;font-size:13px;
  line-height:1;cursor:pointer;border-radius:2px}
.slotchip button:hover{background:none;color:var(--critical)}

/* -- social: the calendar --------------------------------------------- */
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
.calhead{background:var(--surface-2);padding:9px;text-align:center;font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  font-weight:500}
.calcell{background:var(--white);min-height:112px;padding:6px;position:relative;
  display:flex;flex-direction:column;gap:4px}
.calcell.out{background:var(--surface-2)}
.calcell.today{background:#F1F7FB}
.calcell.over{background:#E8F3FA;outline:2px solid var(--accent);outline-offset:-2px}
.cal-n{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.calcell.today .cal-n{color:var(--accent-live);font-weight:600}
.calpost{background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:3px;padding:4px 6px;cursor:grab;
  display:flex;flex-direction:column;gap:2px}
.calpost:hover{border-color:var(--silver);border-left-color:var(--accent)}
.cal-t{font-size:9.5px;color:var(--text-3)}
.cal-b{font-size:10.5px;color:var(--text-2);line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.calnew{position:absolute;right:4px;top:4px;opacity:0;background:var(--white);
  border:1px solid var(--line-strong);color:var(--text-3);width:20px;height:20px;padding:0;
  border-radius:3px;font-size:13px;line-height:1;cursor:pointer}
.calcell:hover .calnew{opacity:1}
.calnew:hover{background:var(--accent);color:var(--white);border-color:var(--accent)}

/* -- social: the composer --------------------------------------------- */
.composer{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.comp-main{min-width:0}
.comp-side{min-width:0}
.acctpick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.acct{background:var(--white);border:1px solid var(--line);border-radius:5px;padding:8px 11px;
  cursor:pointer;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  color:var(--text-2)}
.acct:hover{background:var(--surface-2);border-color:var(--silver)}
.acct.on{border-color:var(--c,#0D6595);background:#F1F7FB;
  box-shadow:inset 0 -2px 0 var(--c,#0D6595)}
.acct-n{font-size:12.5px;font-weight:600;color:var(--ink)}
.acct-c{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c,#58636B)}
.acct-w{font-size:10px;color:var(--watch)}
.comp-meta{display:flex;align-items:center;gap:14px;margin-top:8px}
.comp-meta .mono{font-size:12px;color:var(--text-3)}
.comp-meta .mono.bad{color:var(--critical);font-weight:600}
.perbox{margin:14px 0;border:1px solid var(--line);border-radius:5px;padding:10px 12px;
  background:var(--surface-2)}
.perbox summary{font-size:12.5px;color:var(--text-2);cursor:pointer}
.perbox label{margin-top:10px}
.medialist{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.mediaitem{width:104px;display:flex;flex-direction:column;gap:5px}
.mediaitem img{width:104px;height:78px;object-fit:cover;border-radius:4px;
  border:1px solid var(--line)}
.mediavid{width:104px;height:78px;display:grid;place-items:center;background:var(--slate-dp);
  color:var(--white);border-radius:4px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase}
.pv{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--c,#0D6595);
  border-radius:6px;padding:13px 15px;margin-bottom:12px}
.pv-h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.pv-h b{font-size:12.5px;color:var(--ink)}
.pv-h span{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c,#58636B);margin-left:auto}
.pv-b{font-size:13px;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere}
.pv-m{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.pv-m img{width:62px;height:48px;object-fit:cover;border-radius:3px;
  border:1px solid var(--line)}
.pv-m .mediavid{width:62px;height:48px;font-size:8px}
.pv-f{margin-top:10px;padding-top:8px;border-top:1px solid var(--paper);
  font-family:var(--mono);font-size:10.5px;color:var(--text-3);display:flex;gap:10px}

/* -- social: analytics ------------------------------------------------- */
.substrip.six{grid-template-columns:repeat(6,1fr)}
.sub-i .chg{display:block;font-size:10.5px;margin-top:4px}
.chg .up{color:var(--good)}
.chg .down{color:var(--critical)}
.chg .flat{color:var(--text-3)}
.bars{display:flex;align-items:flex-end;gap:3px;height:172px;padding-top:10px}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;gap:5px;min-width:0}
.bar-f{width:100%;background:linear-gradient(180deg,var(--accent-mid),var(--accent));
  border-radius:2px 2px 0 0;min-height:2px}
.bar span{font-family:var(--mono);font-size:9px;color:var(--text-3)}
.goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.goal{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.goalbar{width:100%;height:6px;background:var(--fog);border-radius:3px;overflow:hidden}
.goalbar div{height:100%;background:var(--good);border-radius:3px}

/* -- social: engagement, ideas, feeds, tags ---------------------------- */
.comment .cbody{font-size:13px;line-height:1.6;color:var(--text-2);margin:0 0 10px;
  overflow-wrap:anywhere}
.feedrow{padding:11px 0;border-bottom:1px solid var(--paper);display:flex;gap:10px;
  align-items:center;flex-wrap:wrap}
.feedrow:last-child{border-bottom:0}
.feeditems{width:100%;margin-top:8px}
.feeditem{display:flex;gap:10px;align-items:center;padding:5px 0;font-size:12.5px}
.feeditem a{color:var(--accent-live);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tagrow{display:flex;gap:8px;flex-wrap:wrap}
.tagchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--c,#58636B);
  color:var(--c,#58636B);border-radius:4px;padding:3px 4px 3px 9px;font-size:12px}
.tagchip button{background:none;border:0;color:inherit;padding:0 4px;cursor:pointer;
  font-size:14px;line-height:1}
.tagchip button:hover{background:none;color:var(--critical)}

@media (max-width:1180px){
  .composer{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .splitleft{border-right:0;border-bottom:1px solid var(--line)}
  .substrip.six{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .slotgrid{grid-template-columns:repeat(4,1fr)}
  .substrip.six{grid-template-columns:repeat(2,1fr)}
  .calcell{min-height:84px}
  .board{grid-auto-flow:row;grid-auto-columns:auto}
}


/* ============================================================== clients ==
   The hand-kept pipeline. It reuses the board, card, pill and table styles
   the rest of the console already has; what is new here is the drawer and
   the source chips, because a source is the one field this whole section
   exists to make countable. */

.chip{
  display:inline-block; padding:1px 7px; border-radius:999px;
  font:500 11px/1.7 var(--sans); border:1px solid var(--line-strong);
  background:var(--white); color:var(--text-2); white-space:nowrap;
}
/* One hue per source, from the accent and status ramps rather than from
   taste. They are backgrounds at low weight so a board of forty cards does
   not turn into a color chart. */
.chip.src-upwork    {background:#E7F1E9; border-color:#BFD9C7; color:var(--good)}
.chip.src-cold_email{background:#E6EFF5; border-color:#BBD3E3; color:var(--accent-live)}
.chip.src-linkedin  {background:#E4EDF7; border-color:#B6CCE5; color:#1B4E7A}
.chip.src-referral  {background:#F5EFE3; border-color:#E0D2B5; color:var(--watch)}
.chip.src-inbound   {background:#F1EAF0; border-color:#DCC9D7; color:#6B4A5E}
.chip.src-other     {background:var(--paper); color:var(--text-3)}

/* Five stages, and they have to fit the standard content width or the only
   column with anything in it is the one hidden off the right edge. 5 x 196
   plus the gaps is 1036, inside main's 1140. It still scrolls on a phone. */
#crm-board{grid-auto-columns:minmax(196px,1fr)}

.crm-card{display:flex; flex-direction:column; gap:7px; align-items:stretch;
  text-align:left; width:100%; font:inherit; cursor:pointer; padding:11px 11px 9px}
.crm-card .cardtop{display:flex; align-items:flex-start; gap:8px; min-width:0}
.crm-card .c-ttl{display:flex; flex-direction:column; gap:1px; min-width:0}
.crm-card .c-ttl b{font:600 13px/1.3 var(--sans); color:var(--ink)}
.crm-card .c-ttl .c-co{font-size:11px}
.crm-card .c-next{display:flex; flex-direction:column; gap:1px; font:500 11px/1.4 var(--sans);
  color:var(--text-2); background:#F1F6FA; border-left:3px solid var(--accent-mid);
  border-radius:0 6px 6px 0; padding:5px 8px}
.crm-card .c-next i{font:600 9px/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); font-style:normal}
.crm-card .clocks{width:100%; box-sizing:border-box; justify-content:space-between}
/* the footer: the step count on the left, the forecasts stacked on the right
   with the label on the left of each line and the number on the right, so
   nothing has to fit three abreast in a narrow column */
.crm-card .c-foot{display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 10px; align-items:center;
  border-top:1px solid var(--line); padding-top:8px; margin-top:2px}
.crm-card .fcell{display:flex; flex-direction:column; gap:3px; padding:2px 10px 2px 2px;
  border-right:1px solid var(--line); justify-content:center}
.crm-card .fcell b{font:700 15px/1.1 var(--sans); color:var(--ink)}
.crm-card .fcell i{font:600 8.5px/1.2 var(--sans); color:var(--text-3); font-style:normal;
  text-transform:uppercase; letter-spacing:.07em; white-space:nowrap}
.crm-card .frows{display:flex; flex-direction:column; gap:4px; min-width:0}
.crm-card .frow{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.crm-card .frow i{font:500 10px/1.3 var(--sans); color:var(--text-3); font-style:normal; white-space:nowrap}
.crm-card .frow b{font:700 12px/1.2 var(--sans); color:var(--ink); white-space:nowrap}
.crm-card .frow{min-width:0; overflow:hidden}
.crm-card .frows.quiet .frow{flex-direction:column; align-items:flex-start; gap:1px}
.crm-card .frows.quiet .frow i{font-weight:600; color:var(--text-2)}
.crm-card .frows.quiet .frow b{font-weight:400; font-size:10.5px; color:var(--text-3); white-space:normal}

/* Won and lost are real stages, but they are not what the board is for, so
   they sit under it as a quieter strip instead of as two more columns. */
.crm-closed{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
.crm-closed-col{background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px}
.crm-closed-col > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  user-select:none}
.crm-closed-col > summary::-webkit-details-marker{display:none}
.crm-closed-col .cc-n{margin-left:auto}
.crm-closed-col .cc-q{font:500 10px/1.3 var(--sans); color:var(--text-3); text-transform:uppercase;
  letter-spacing:.06em}
.crm-closed-col .cc-tog{width:8px; height:8px; border-right:2px solid var(--text-3);
  border-bottom:2px solid var(--text-3); transform:rotate(-45deg); transition:transform .15s ease;
  margin:0 2px 0 4px}
.crm-closed-col[open] .cc-tog{transform:rotate(45deg); margin-top:-4px}
.crm-closed-b{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.crm-closed-b .crm-card{width:auto; min-width:180px; max-width:240px}

.crm-sources{margin-top:22px}
.crm-sources h4, .crm-log h4, #crm-quiet h4, #crm-activity h4{
  margin:0 0 8px; font:600 12px/1.4 var(--sans); letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-3)}

.crm-quiet{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px}
.crm-quiet .crm-card{width:auto; min-width:200px; max-width:280px}

tr.rowlink{cursor:pointer}
tr.rowlink:hover{background:var(--surface-2)}
td .sub{display:block; font:400 11px/1.5 var(--sans); color:var(--text-3)}

.linky{background:none; border:0; padding:0; font:inherit; font-size:11px;
  color:var(--text-3); text-decoration:underline; cursor:pointer}
.linky:hover{color:var(--critical)}

/* ---------------------------------------------------------- the drawer --
   One panel serves the board and the list. It is a real overlay rather than a
   route, because reading a company is something you do while keeping your
   place in the list you were scanning. */
.drawer{position:fixed; inset:0; z-index:60}
.drawer-scrim{position:absolute; inset:0; background:rgba(15,18,20,.38)}
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(680px,100%);
  background:var(--white); border-left:1px solid var(--line);
  box-shadow:-18px 0 48px -24px rgba(15,18,20,.35);
  display:flex; flex-direction:column;
}
.drawer-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 22px 14px; border-bottom:1px solid var(--line); background:var(--surface-1);
}
.drawer-head h3{margin:2px 0 0; font:700 20px/1.25 var(--sans); color:var(--text)}
.drawer-body{padding:18px 22px 40px; overflow:auto}

.crm-form{display:flex; flex-direction:column; gap:12px}
.crm-form label{display:flex; flex-direction:column; gap:4px;
  font:500 12px/1.4 var(--sans); color:var(--text-3)}
.crm-form .formrow{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end}
.crm-form .formrow:last-child{display:flex; gap:10px; align-items:center}
.crm-form textarea{resize:vertical}
.ghost.danger{color:var(--critical); border-color:var(--line-strong)}
.ghost.danger:hover{border-color:var(--critical)}

.crm-log{margin-top:26px; padding-top:20px; border-top:1px solid var(--line)}
.crm-log h4{margin-top:22px}
.crm-log h4:first-child{margin-top:0}

/* The log is the point of the section, so it reads as a timeline: one rule
   down the left, a marker per step, and the date always in the same place. */
.steps{list-style:none; margin:0; padding:0 0 0 18px; border-left:2px solid var(--line)}
.steps li{position:relative; padding:0 0 14px 14px}
.steps li::before{
  content:""; position:absolute; left:-23px; top:5px; width:8px; height:8px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--white);
}
.steps .s-h{display:flex; align-items:baseline; gap:10px}
.steps .s-h b{font:600 13px/1.5 var(--sans); color:var(--text)}
.steps .s-h span{font:400 12px/1.5 var(--sans); color:var(--text-3)}
.steps .s-h .linky{margin-left:auto}
.steps p{margin:3px 0 0; font:400 13px/1.55 var(--sans); color:var(--text-2);
  white-space:pre-wrap}

@media (max-width:760px){
  .crm-closed{grid-template-columns:1fr}
  .crm-form .formrow{grid-template-columns:1fr}
}


/* ====================================================== clients, part two ==
   Mike: "The interface for the pipeline page is good but too basic. Add some
   more thematic color and character." The restraint that follows is the point:
   a board is read by scanning, so color has to mean something or it is noise.
   Here it means exactly two things. Hue says WHERE somebody came from, and the
   stage ramp says HOW FAR they have got, deepening left to right so the board
   reads as progress even out of focus. Nothing is colored for decoration. */

/* the five stages, as one blue ramp that deepens toward the close */
.col-h{border-top:3px solid transparent; border-radius:6px 6px 0 0}
.col-h.st-new        {border-top-color:#CFE0EA; background:linear-gradient(180deg,#F6FAFC,transparent)}
.col-h.st-contacted  {border-top-color:#AFCFE2; background:linear-gradient(180deg,#F2F8FB,transparent)}
.col-h.st-replied    {border-top-color:#8FB9D6; background:linear-gradient(180deg,#EEF6FA,transparent)}
.col-h.st-call_booked{border-top-color:#4E93BE; background:linear-gradient(180deg,#EAF4F9,transparent)}
.col-h.st-quoted     {border-top-color:#0D6595; background:linear-gradient(180deg,#E6F1F8,transparent)}

/* where the work lives now, which is not where they came from */
.chip.eng-upwork        {background:#E7F1E9; border-color:#BFD9C7; color:var(--good)}
.chip.eng-direct        {background:#EDE7F3; border-color:#D3C4E0; color:#5B3E7A; font-weight:600}
.chip.eng-other_platform{background:var(--paper); color:var(--text-3)}
.chip.eng-ended         {background:var(--paper); border-color:var(--line); color:var(--gray)}

/* initials, so thirty cards are not thirty identical rectangles */
.ava{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:0 0 30px; border-radius:9px;
  background:linear-gradient(140deg,var(--accent),#1B4E7A); color:#fff;
  font:700 11px/1 var(--sans); letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(15,18,20,.16);
}
.ava.sm{width:22px; height:22px; flex-basis:22px; border-radius:7px; font-size:9px}
.cardtop{display:flex; align-items:center; gap:8px}
.cardtop b{font-size:12.5px; color:var(--ink)}
.arow{display:flex; flex-wrap:wrap; gap:5px}

/* ------------------------------------------------------ the pipeline total
   Under the active lane and read as its counterpart: what the business is,
   then what it could become. Light where the lane is dark, on the platform's
   own surface and blue, so it belongs to the page rather than shouting. */
.crm-pipe{
  background:linear-gradient(180deg,#F3F8FC 0%,#E6F0F7 100%);
  border:1px solid #C9DCEA; border-left:5px solid var(--accent);
  border-radius:14px; padding:16px 20px 18px; margin:0 0 22px; color:var(--ink);
  box-shadow:0 2px 4px rgba(15,18,20,.06);
}
.crm-pipe-h{margin-bottom:12px}
.crm-pipe-h .kick{color:var(--accent); font:600 10px/1.4 var(--sans); letter-spacing:.09em;
  text-transform:uppercase}
.crm-pipe-h h3{margin:3px 0 0; font:700 21px/1.2 var(--sans); color:var(--ink)}
.crm-pipe-b{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px}
.pipestat{background:var(--surface-0); border:1px solid var(--line); border-radius:11px;
  padding:12px 14px}
.pipestat b{display:block; font:700 24px/1.15 var(--sans); color:var(--accent-live)}
.pipestat span{display:block; font:500 11px/1.4 var(--sans); color:var(--text-2); margin-top:2px}
.pipestat i{display:block; font:400 11px/1.4 var(--sans); font-style:normal; color:var(--text-3);
  margin-top:4px}

.actsel{font-weight:600}

/* ------------------------------------------------- the active client lane
   A won deal that is still running is not the tail of a pipeline, it is the
   business, so it sits above the board on a dark ground rather than in a
   quiet strip beneath it. */
.crm-active{
  background:linear-gradient(135deg,#232A30 0%,#1B4E7A 62%,#0D6595 100%);
  border-radius:14px; padding:18px 20px 20px; margin-bottom:22px; color:#fff;
  box-shadow:0 2px 4px rgba(15,18,20,.10), 0 18px 40px -22px rgba(13,101,149,.55);
}
.crm-active-h{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:14px}
.crm-active-h .kick{color:#8FC6EC; font:600 10px/1.4 var(--sans); letter-spacing:.09em;
  text-transform:uppercase}
.crm-active-h h3{margin:3px 0 0; font:700 21px/1.2 var(--sans); color:#fff}
/* the lane's own total: three labeled cells, because the people reading this
   are not all the person who built it, and a bare number is a question */
.crm-active-v{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.crm-active-v .lane-kick{font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:#8FC6EC}
.lane-m{display:grid; grid-template-columns:repeat(3,auto); background:rgba(9,32,52,.35);
  border:1px solid rgba(255,255,255,.16); border-radius:9px; overflow:hidden}
.lane-m .lcell{display:flex; flex-direction:column; gap:2px; padding:8px 14px; min-width:0}
.lane-m .lcell + .lcell{border-left:1px solid rgba(255,255,255,.16)}
.lane-m .lcell b{font:700 19px/1.15 var(--sans); color:#fff; white-space:nowrap}
.lane-m .lcell i{font:500 9.5px/1.3 var(--sans); color:#B9D4E6; font-style:normal;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap}
.lane-m .lcell:first-child{background:rgba(143,198,236,.18)}
.crm-active-b{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:10px}

.acard{
  display:flex; flex-direction:column; align-items:stretch; gap:10px; text-align:left; width:100%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:10px; padding:12px 12px 11px; cursor:pointer; font:inherit; color:#fff;
  transition:background .12s ease, border-color .12s ease;
}
.acard:hover{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.3)}
.acard .ava{background:rgba(255,255,255,.18); box-shadow:none}
.acard-h{display:flex; align-items:flex-start; gap:11px; min-width:0}
.acard-t{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1}
.acard-t b{font:600 13.5px/1.3 var(--sans); color:#fff}
.acard-t .c-co{font-size:11px; color:#B9D4E6}
.acard-next{display:block; font:500 11px/1.4 var(--sans); color:#DCEBF5;
  background:rgba(255,255,255,.08); border-left:3px solid #8FC6EC; border-radius:0 6px 6px 0;
  padding:5px 8px}
.acard-next i{display:block; font:600 9px/1.3 var(--sans); letter-spacing:.09em;
  text-transform:uppercase; color:#8FC6EC; font-style:normal; margin-bottom:1px}
/* the money row: three cells with real walls between them, so six months,
   twelve months and earned cannot be read as one run of text */
.acard-m{display:grid; grid-template-columns:1fr 1fr; background:rgba(9,32,52,.35);
  border:1px solid rgba(255,255,255,.14); border-radius:8px; overflow:hidden}
.acard-m .mcell{display:flex; flex-direction:column; gap:2px; padding:8px 10px; min-width:0}
.acard-m .mcell:nth-child(even){border-left:1px solid rgba(255,255,255,.14)}
.acard-m .mcell:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
/* the monthly figure leads: it is the one number that says what the client
   is worth right now, and everything else on the row is derived from it */
.acard-m .mcell.month{background:rgba(143,198,236,.18)}
.acard-m .mcell.month b{font-size:18px; color:#FFFFFF}
.acard-m .mcell.month i{color:#DCEBF5}
.acard-m .mcell b{font:700 15px/1.15 var(--sans); color:#fff; white-space:nowrap}
.acard-m .mcell i{font:500 9.5px/1.3 var(--sans); color:#B9D4E6; font-style:normal;
  text-transform:uppercase; letter-spacing:.04em}
.acard-m .mcell.earned{background:rgba(255,255,255,.06)}
.acard-m .mcell.earned b{color:#CFE9FF}
.acard-basis{font:400 10.5px/1.3 var(--sans); color:#8FC6EC}
.acard-v{display:none}
/* the chips have to survive being put on a dark ground */
.acard .chip{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.22); color:#EAF3F9}
.acard .chip.eng-direct{background:rgba(214,196,224,.26); border-color:rgba(214,196,224,.4); color:#F0E6F7}

/* ------------------------------------------------------------- the links
   The panel that answers "where did this claim come from", which is the
   difference between a record you can check and one you have to believe. */
.crm-links{margin-top:24px; padding-top:18px; border-top:1px solid var(--line)}
.crm-links h4{margin:0 0 8px; font:600 12px/1.4 var(--sans); letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-3)}
.linklist{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px}
.linklist .lk{display:flex; align-items:center; gap:9px; padding:7px 11px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px}
.linklist .lk a{font:500 12.5px/1.4 var(--sans); color:var(--accent-live); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linklist .lk a:hover{text-decoration:underline}
.linklist .lk .linky{margin-left:auto}
.linklist .lk::before{content:""; width:4px; align-self:stretch; border-radius:2px;
  background:var(--line-strong)}
.lk-upwork_room::before    {background:#2A7454}
.lk-linkedin_thread::before{background:#1B4E7A}
.lk-email_thread::before   {background:var(--accent)}
.lk-ccc_conversation::before{background:#8FB9D6}
.lk-site::before           {background:var(--gray)}

/* --------------------------------------------------------- the sequences */
.crm-h{margin:30px 0 10px; font:600 12px/1.4 var(--sans); letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-3)}

.seq{background:var(--white); border:1px solid var(--line); border-radius:12px;
  margin-bottom:14px; overflow:hidden; box-shadow:var(--shadow-s)}
.seq.live{border-color:#AFCFE2}
.seq-h{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 16px; background:var(--surface-1); border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.seq.live .seq-h{background:linear-gradient(180deg,#EFF7FB,#FFFFFF)}
.seq-name{display:flex; align-items:center; gap:9px; min-width:240px; flex:1}
.seq-name .dot{width:9px; height:9px; border-radius:50%; background:var(--gray); flex:0 0 9px}
.seq.live .seq-name .dot{background:var(--good); box-shadow:0 0 0 3px rgba(42,116,84,.16)}
.seq-title{border:0; background:transparent; font:700 15px/1.3 var(--sans); color:var(--ink);
  padding:2px 4px; border-radius:5px; min-width:140px; flex:1}
.seq-title:focus{background:var(--white); outline:1px solid var(--line-strong)}
.seq-state{font:600 10px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3)}
.seq.live .seq-state{color:var(--good)}
.seq-ctl{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.seq-ctl label{display:flex; align-items:center; gap:6px; font:500 11.5px/1.4 var(--sans);
  color:var(--text-3)}
.seq-b{padding:14px 16px}
.seq-f{display:flex; gap:18px; padding:9px 16px; border-top:1px solid var(--line);
  background:var(--surface-2); font:500 11.5px/1.4 var(--sans); color:var(--text-3)}

/* the messages, as a ladder: each one is a step further from the last contact */
.seqstep{position:relative; padding:0 0 14px 20px; border-left:2px solid var(--line-strong);
  margin-left:6px}
.seqstep:last-of-type{border-left-color:transparent}
.seqstep::before{content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--white)}
.seqstep.paused{opacity:.55}
.seqstep.paused::before{background:var(--gray)}
.seqstep-h{display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap}
.seqstep-h b{font:600 12.5px/1.4 var(--sans); color:var(--ink)}
.seqstep-h label{display:flex; align-items:center; gap:5px; font:400 11.5px/1.4 var(--sans);
  color:var(--text-3)}
.seqstep textarea{width:100%; font:400 12.5px/1.55 var(--sans); padding:9px 11px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface-2); resize:vertical}
.seqstep textarea:focus{background:var(--white)}
.seq .hint code{font:500 11px/1 var(--mono); background:var(--paper); padding:1px 5px;
  border-radius:4px; color:var(--accent-live)}
td.msg{color:var(--text-3); font-size:12px}

@media (max-width:760px){
  .crm-active-b{grid-template-columns:1fr}
  .crm-active-h{flex-direction:column; align-items:flex-start}
  .crm-active-v{align-items:flex-start; width:100%}
  .lane-m{width:100%; grid-template-columns:repeat(3,1fr)}
}

.ghost.sm{padding:3px 9px; font-size:11px}

.crm-form label.wide{grid-column:1 / -1}
.crm-form .statussel{font-weight:600}
.crm-form .hint{font:400 11px/1.45 var(--sans); color:var(--text-3); margin-top:2px}

/* ====================================================== hiring signals ==
   The top of the funnel, and the only page here where the unit is a company
   nobody has spoken to yet. It reads as a set of opportunities rather than a
   table because the decision being made on it is "is this one worth an hour",
   which is a judgment made by looking, not by sorting. */

.sigstats{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.sigstat{background:var(--surface-1); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px}
.sigstat b{display:block; font:700 22px/1.15 var(--sans); color:var(--ink)}
.sigstat span{font:500 11px/1.4 var(--sans); color:var(--text-3)}

.siggrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px}

.sig{background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:14px 15px 11px; box-shadow:var(--shadow-s); display:flex; flex-direction:column;
  gap:9px; border-left:4px solid var(--line-strong)}
/* The band is the score made legible without reading the number: how strongly
   this company has already told you it needs what OMI Firm sells. */
.sig.band-hot {border-left-color:var(--accent)}
.sig.band-warm{border-left-color:#8FB9D6}
.sig.band-cool{border-left-color:var(--fog)}

.sig header{display:flex; align-items:center; gap:9px}
.sig .pickwrap{display:flex; align-items:center}
.sig-co{display:flex; flex-direction:column; min-width:0; flex:1}
.sig-co b{font:600 13.5px/1.3 var(--sans); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sig-co span{font:400 11px/1.4 var(--sans); color:var(--text-3)}
.sig-score{font:700 13px/1 var(--mono); color:var(--accent-live);
  background:var(--paper); border-radius:7px; padding:5px 8px}
.sig.band-hot .sig-score{background:#E6F1F8; color:var(--accent)}

.sig-role{margin:0; font:600 13px/1.4 var(--sans); color:var(--text-2)}
.sig-meta{margin:0; display:flex; flex-wrap:wrap; gap:6px}
.sig-meta span{font:400 11px/1.5 var(--sans); color:var(--text-3);
  background:var(--surface-2); border-radius:5px; padding:1px 7px}
.sig-meta .fresh{background:#E7F1E9; color:var(--good); font-weight:600}

.sig-who{margin:0; display:flex; align-items:center; gap:8px; padding:8px 9px;
  background:var(--surface-2); border-radius:9px}
.sig-who b{display:block; font:600 12px/1.35 var(--sans); color:var(--ink)}
.sig-who > span > span{font:400 10.5px/1.35 var(--sans); color:var(--text-3)}
.sig-who.none{font:400 11.5px/1.5 var(--sans); color:var(--gray); justify-content:center}

.sig footer{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:9px; margin-top:auto}
.sig footer a{font:500 11.5px/1.4 var(--sans); color:var(--accent-live); text-decoration:none}
.sig footer a:hover{text-decoration:underline}
.sig footer .grow{flex:1}
.sig-st{font:600 10px/1.4 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3)}
.sig-st.st-promoted{color:var(--good)}
.sig-st.st-outbound{color:var(--accent)}
/* Green means "act on this now". A month-old posting is not that, and saying
   it is would train the eye to ignore the color everywhere else. */
.sig-meta .stale{background:var(--paper); color:var(--gray)}

/* ================================================= money and the charts ==
   One hue, light to dark, because these charts compare magnitude and identity
   is carried by the label beside each bar. Hue already means "where they came
   from" everywhere else in this section, and one meaning per color is what
   keeps that readable. */

.moneyrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px;
  margin-bottom:22px}
.mstat{background:var(--surface-1); border:1px solid var(--line); border-radius:11px;
  padding:13px 15px}
.mstat b{display:block; font:700 21px/1.15 var(--sans); color:var(--ink)}
.mstat span{font:500 11px/1.4 var(--sans); color:var(--text-3)}

/* the two clocks on a card */
.clocks{display:flex; gap:12px; padding:5px 8px; border-radius:7px;
  background:var(--surface-2); border:1px solid var(--line)}
.clocks.warn{background:#FAF4E8; border-color:#E5D5B4}
.clocks.bad {background:#FBEDE9; border-color:#EBCFC6}
.clocks .cl{display:flex; flex-direction:column; line-height:1.2}
.clocks .cl b{font:700 12px/1.2 var(--sans); color:var(--ink)}
.clocks .cl i{font:400 9.5px/1.3 var(--sans); color:var(--text-3); font-style:normal}
.clocks.bad .cl:last-child b{color:var(--critical)}
.clocks.warn .cl:last-child b{color:var(--watch)}

.acard-v{display:flex; flex-direction:column; align-items:flex-end; text-align:right}
.acard-v b{font:700 14px/1.2 var(--sans); color:#fff}
.acard-v i{font:400 9.5px/1.35 var(--sans); color:#B9D4E6; font-style:normal}

.charts{margin-top:26px}
.chart-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.chart-tabs button{background:var(--white); border:1px solid var(--line); border-radius:999px;
  padding:6px 14px; font:500 12px/1.4 var(--sans); color:var(--text-2); cursor:pointer}
.chart-tabs button:hover{border-color:var(--line-strong)}
.chart-tabs button.on{background:var(--accent); border-color:var(--accent); color:#fff;
  font-weight:600}
.chart-body{background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; box-shadow:var(--shadow-s); overflow-x:auto}
.chart-note{margin:9px 2px 0; font:400 11.5px/1.55 var(--sans); color:var(--text-3);
  max-width:74ch}

.ch{width:100%; height:auto; display:block}
.chlab{font:500 11.5px/1 var(--sans); fill:var(--text-2)}
.chval{font:600 11.5px/1 var(--sans); fill:var(--ink)}
.chax {font:400 10.5px/1 var(--sans); fill:var(--text-3)}
.chtrack{fill:var(--surface-2)}
.chgrid{stroke:var(--line); stroke-width:1}
.chrow:hover .chtrack{fill:#EDF3F7}
.chdot circle{cursor:pointer}

/* ---------------------------------------------------------- the engine
   Four pistons. Green is running now, red is not, amber was running the last
   time anyone looked but the report is old. The lamp carries the state and the
   words repeat it, so it reads without color too. */
.engine{margin-bottom:8px}
.engine-h{font:500 13px/1.4 var(--sans); color:var(--text-2); margin:0 0 10px}
.engine-h b{font-weight:700; color:var(--ink)}
.engine-when{margin-left:10px; font:500 11px/1.4 var(--mono); color:var(--text-3)}
.pistons{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media(max-width:1100px){.pistons{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pistons{grid-template-columns:1fr}}
.piston{position:relative; display:flex; flex-direction:column; gap:4px; padding:16px 16px 14px 18px;
  border-radius:12px; border:1px solid var(--line); background:var(--surface-1); overflow:hidden}
.piston::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px}
.piston.on::before{background:var(--good)} .piston.off::before{background:var(--critical)} .piston.stale::before{background:var(--watch)}
.piston .lamp{width:12px; height:12px; border-radius:50%; margin-bottom:4px; box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.piston.on .lamp{background:var(--good); box-shadow:0 0 0 4px rgba(42,116,84,.16), 0 0 14px rgba(42,116,84,.55)}
.piston.off .lamp{background:var(--critical); box-shadow:0 0 0 4px rgba(163,47,47,.14)}
.piston.stale .lamp{background:var(--watch); box-shadow:0 0 0 4px rgba(138,94,18,.14)}
.piston .p-lab{font:600 13.5px/1.3 var(--sans); color:var(--ink)}
.piston .p-state{font:700 11px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase}
.piston.on .p-state{color:var(--good)} .piston.off .p-state{color:var(--critical)} .piston.stale .p-state{color:var(--watch)}
.piston .p-why{font:400 11.5px/1.5 var(--sans); color:var(--text-3); margin-top:4px}

/* ------------------------------------------------- the card, at a glance */
.sig-sum{margin:0; font:400 12.5px/1.5 var(--sans); color:var(--text-2)}
.sig-sum i{color:var(--text-3)}
.glance{display:grid; grid-template-columns:1fr 1fr 1fr; border:1px solid var(--line); border-radius:9px; overflow:hidden;
  background:var(--surface-2)}
.glance .g{display:flex; flex-direction:column; gap:2px; padding:7px 9px; min-width:0}
.glance .g + .g{border-left:1px solid var(--line)}
.glance .g i{font:600 8.5px/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); font-style:normal}
.glance .g b{font:600 11.5px/1.35 var(--sans); color:var(--ink); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.glance .g b small{display:block; font:400 10px/1.3 var(--sans); color:var(--text-3)}

/* ------------------------------------------------------------ the brief */
.crm-brief{margin-top:22px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff}
.crm-brief.empty-brief{padding:14px 16px}
.crm-brief.empty-brief h4{margin:0 0 4px}
.brief-hero{background:linear-gradient(135deg,#232A30 0%,#1B4E7A 62%,#0D6595 100%); color:#fff; padding:16px 18px 14px}
.brief-hero .kick{color:#8FC6EC}
.brief-lede{margin:6px 0 12px; font:500 14px/1.45 var(--sans); color:#fff}
.brief-actions{display:flex; flex-wrap:wrap; gap:8px}
.brief-actions .ghost, .brief-actions .btnlike{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff;
  font:600 12px/1 var(--sans); padding:8px 11px; border-radius:8px; text-decoration:none; cursor:pointer}
.brief-actions .ghost:hover, .brief-actions .btnlike:hover{background:rgba(255,255,255,.2)}
.brief-sec{padding:12px 18px; border-top:1px solid var(--line)}
.brief-sec h5{margin:0 0 4px; font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}
.brief-sec p{margin:4px 0; font:400 13px/1.55 var(--sans); color:var(--text-2)}
.brief-sec ol{margin:4px 0 0; padding-left:18px; font:400 13px/1.55 var(--sans); color:var(--text-2)}
.brief-src{margin:0; padding:10px 18px 12px; border-top:1px solid var(--line); font:400 11px/1.5 var(--sans); color:var(--text-3)}

/* ------------------------------------------------------------ the review */
.rv{background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:14px; overflow:hidden}
.rv header{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.rv-co{display:flex; flex-direction:column; min-width:0; flex:1}
.rv-co b{font:600 14px/1.3 var(--sans)} .rv-co span{font:400 11.5px/1.4 var(--sans); color:var(--text-3)}
.rv-form{padding:12px 16px 4px}
.rv-form label{display:block; font:600 11px/1.4 var(--sans); color:var(--text-3); margin:8px 0}
.rv-form input, .rv-form textarea{display:block; width:100%; box-sizing:border-box; margin-top:3px; font:400 13px/1.5 var(--sans)}
.rv footer{display:flex; align-items:center; gap:10px; padding:10px 16px 14px; flex-wrap:wrap}

/* --------------------------------------------------------- sequence lanes
   Upwork and LinkedIn each get their own ground, in the color the rest of the
   section already uses for that source, so a follow-up is never read on the
   wrong channel. */
.seq-lane{margin:18px 0 22px; border:1px solid var(--line); border-radius:14px; padding:16px 18px 14px;
  background:var(--surface-2); border-left-width:6px}
.seq-lane.lane-upwork{border-left-color:#3E8E5B; background:linear-gradient(180deg,#F1F8F3 0%,#F7F9FB 60%)}
.seq-lane.lane-linkedin{border-left-color:#2F6FB5; background:linear-gradient(180deg,#EDF3FA 0%,#F7F9FB 60%)}
.seq-lane.lane-email{border-left-color:#8A96A3}
.lane-h{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px}
.lane-h .kick{font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase}
.lane-upwork .lane-h .kick{color:#2A7454} .lane-linkedin .lane-h .kick{color:#1F5A99} .lane-email .lane-h .kick{color:var(--text-3)}
.lane-h h3{margin:2px 0 4px; font:700 17px/1.25 var(--sans); color:var(--ink)}
.lane-h p{margin:0; font:400 12.5px/1.5 var(--sans); color:var(--text-3); max-width:640px}
.lane-h button{white-space:nowrap; align-self:center}
.seq-lane .seq{margin:10px 0 0}

/* --------------------------------------------------------------- Ask Claude */
.ask-out{margin-top:14px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
.ask-answer{padding:14px 16px; font:400 14px/1.6 var(--sans); color:var(--ink)}
.ask-calls{border-top:1px solid var(--line); background:var(--surface-2)}
.ask-calls summary{cursor:pointer; padding:9px 16px; font:600 12px/1.4 var(--sans); color:var(--text-2)}
.ask-call{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; padding:7px 16px; border-top:1px solid var(--line);
  font:400 12px/1.5 var(--sans); color:var(--text-2)}
.ask-call b{font-family:var(--mono); font-size:11px; color:var(--accent)}
.ask-call.error b{color:var(--critical)}
.ask-call code{font-size:11.5px}
.ask-call .ask-prev{flex-basis:100%; font:400 11px/1.4 var(--mono); color:var(--text-3); word-break:break-all}

/* ----------------------------------------------------- card footer buttons
   The posting, the company, dismiss: things you press, drawn as such. */
.sig footer a, .sig footer .linky{display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:8px;
  border:1px solid var(--line); background:#fff; color:var(--accent-live); font:600 11.5px/1 var(--sans);
  text-decoration:none; cursor:pointer}
.sig footer a:hover, .sig footer .linky:hover{border-color:var(--accent); background:#F1F6FA}
.sig footer .linky[data-dismiss]{color:var(--text-3)}
.sig footer .linky[data-dismiss]:hover{border-color:var(--critical); color:var(--critical); background:#FBF3F3}
.sig footer .ghost.sm{padding:6px 10px; font:600 11.5px/1 var(--sans); border-radius:8px}
.sig footer{gap:5px; flex-wrap:nowrap; overflow:hidden}
.sig footer a, .sig footer .linky, .sig footer .ghost.sm{padding:6px 8px; font-size:11px; white-space:nowrap; flex:0 0 auto}
.sig footer .grow{flex:1 1 0; min-width:4px}
.sig footer .sig-st{white-space:nowrap}

/* ----------------------------------------------------- the four sections
   One card per main tab, each in the color that tab already wears, so the
   dashboard reads as a map of the console and not as a list of numbers. */
.sectors{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:900px){.sectors{grid-template-columns:1fr}}
.sector{--sec:#0D6595; --sec-soft:#EAF2F8; position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 2px 4px rgba(15,18,20,.05); transition:box-shadow .15s ease, transform .15s ease}
.sector:hover{box-shadow:0 12px 30px -18px rgba(15,18,20,.35); transform:translateY(-1px)}
.sector::before{content:""; height:6px; background:linear-gradient(90deg,var(--sec),color-mix(in srgb,var(--sec) 55%,#fff))}
.sector.sec-clients{--sec:#0D6595; --sec-soft:#EAF2F8}
.sector.sec-outbound{--sec:#2B5098; --sec-soft:#ECEFF8}
.sector.sec-network{--sec:#1F6FB2; --sec-soft:#E9F1FA}
.sector.sec-social{--sec:#7A4E9E; --sec-soft:#F2ECF8}
.sector header{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px 10px}
.sector header .kick{color:var(--sec); font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase}
.sector header h3{margin:2px 0 0; font:700 17px/1.25 var(--sans); color:var(--ink)}
.sfigs{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sfig{background:#fff; padding:12px 14px 11px}
.sfig b{display:block; font:600 19px/1.1 var(--mono); color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.sfig span{display:block; font:400 10.5px/1.35 var(--sans); color:var(--text-3); margin-top:4px}
.sfig.lit{background:var(--sec-soft)} .sfig.lit b{color:var(--sec)}
.sector footer{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px 14px;
  font:400 12px/1.5 var(--sans); color:var(--text-3); margin-top:auto}
.sector footer button{white-space:nowrap; border-color:var(--sec); color:var(--sec)}
.sector footer button:hover{background:var(--sec-soft)}
.dash-phead h2{font-size:30px}

/* --------------------------------------------------------- the engine block
   Dark, like the active-client lane, because it is the one thing on the page
   that is a verdict rather than a figure. A ring for the whole, a cylinder
   per piston: full and green when firing, low and red when cold. */
.engine-block{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  background:linear-gradient(135deg,#1A2026 0%,#1B4E7A 62%,#0D6595 100%); color:#fff;
  border-radius:16px; padding:22px 26px; box-shadow:0 2px 4px rgba(15,18,20,.10), 0 18px 40px -22px rgba(13,101,149,.55)}
@media(max-width:900px){.engine-block{grid-template-columns:1fr}}
.engine-gauge{position:relative; width:128px; height:128px}
.engine-gauge svg{display:block}
.gauge-n{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.gauge-n b{font:700 30px/1 var(--mono); color:#fff; letter-spacing:-.03em}
.gauge-n b i{font:600 15px/1 var(--mono); color:#B9D4E6; font-style:normal}
.gauge-n span{font:600 9px/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#B9D4E6; margin-top:5px}
.engine-side{min-width:0}
.engine-title{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-bottom:14px}
.engine-title .kick{flex-basis:100%; color:#8FC6EC; font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase}
.engine-title h3{margin:0; font:700 20px/1.2 var(--sans); color:#fff}
.engine-title .engine-when{font:500 11px/1.4 var(--mono); color:#B9D4E6}
.cylinders{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media(max-width:1100px){.cylinders{grid-template-columns:1fr 1fr}}
.cyl{display:grid; grid-template-columns:14px 1fr; gap:10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:11px; padding:10px 11px 10px 10px; min-height:112px}
.cyl-bar{background:rgba(0,0,0,.28); border-radius:7px; overflow:hidden; display:flex; align-items:flex-end}
.cyl-bar span{display:block; width:100%; border-radius:7px; transition:height .4s ease}
.cyl.on .cyl-bar span{background:linear-gradient(180deg,#8FF0BE,#2F9E6B); box-shadow:0 0 12px rgba(94,219,155,.6)}
.cyl.off .cyl-bar span{background:#B85A52}
.cyl.stale .cyl-bar span{background:linear-gradient(180deg,#F1D68A,#B9902E)}
.cyl-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.cyl-t .lamp{width:9px; height:9px; border-radius:50%; margin-bottom:2px}
.cyl.on .lamp{background:#5EDB9B; box-shadow:0 0 10px rgba(94,219,155,.9)}
.cyl.off .lamp{background:#E0A9A0} .cyl.stale .lamp{background:#E7C36A}
.cyl-t b{font:600 12.5px/1.25 var(--sans); color:#fff}
.cyl-t i{font:700 9.5px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; font-style:normal}
.cyl.on .cyl-t i{color:#8FF0BE} .cyl.off .cyl-t i{color:#F0C9C2} .cyl.stale .cyl-t i{color:#F1D68A}
.cyl-t small{font:400 10.5px/1.45 var(--sans); color:#C9DCE9; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* the section glyphs */
.sector header .glyph{width:36px; height:36px; flex:0 0 36px; border-radius:10px; background:var(--sec-soft); color:var(--sec);
  display:grid; place-items:center}
.sector header .glyph svg{width:20px; height:20px}
.sector header{align-items:center}
.sector header > div{flex:1; min-width:0}

/* Needs you, as callouts */
#dash-blockers.panel{padding:12px 16px}
.blocker{grid-template-columns:auto 1fr auto; border:0; border-radius:9px; padding:10px 12px; margin:4px 0}
.blocker.stop{background:#FBF1EF} .blocker.watch{background:#FBF6EA} .blocker.ready{background:#EFF7F2}
.blocker .dot{width:10px; height:10px}

/* the activity timeline */
.log{position:relative}
.log .tl{display:grid; grid-template-columns:14px auto 1fr auto; gap:0 10px; align-items:baseline; border:0; padding:6px 0 6px 2px;
  position:relative}
.log .tl::before{content:""; position:absolute; left:6px; top:0; bottom:0; border-left:1px solid var(--line)}
.log .tl-dot{width:9px; height:9px; border-radius:50%; background:var(--accent-mid); border:2px solid #fff; box-shadow:0 0 0 1px var(--line);
  position:relative; z-index:1; align-self:center}
.log .tl-kind{font:600 10.5px/1.4 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--accent-live); white-space:nowrap}
.log .tl-what{font:400 12px/1.5 var(--sans); color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.log .tl-when{font:500 10.5px/1.4 var(--mono); color:var(--text-3); white-space:nowrap}

/* ------------------------------------------------------ Settings: extension */
.ext-ver{display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start}
@media(max-width:800px){.ext-ver{grid-template-columns:1fr}}
.ext-served{background:linear-gradient(135deg,#1A2026 0%,#1B4E7A 62%,#0D6595 100%); color:#fff; border-radius:12px; padding:14px 16px}
.ext-served .kick{color:#8FC6EC; font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase}
.ext-served b{display:block; font:700 30px/1.1 var(--mono); margin:4px 0 2px}
.ext-served .hint{color:#B9D4E6; font-size:10.5px; word-break:break-all}
.ext-agent{display:grid; grid-template-columns:12px 1fr auto auto; gap:10px; align-items:center; padding:9px 12px;
  border:1px solid var(--line); border-radius:10px; background:#fff; margin-bottom:8px}
.ext-agent .lamp{width:10px; height:10px; border-radius:50%; background:var(--critical)}
.ext-agent .lamp.on{background:var(--good); box-shadow:0 0 0 3px rgba(42,116,84,.16)}
.ext-agent .who{display:flex; flex-direction:column; min-width:0} .ext-agent .who b{font:600 13px/1.3 var(--sans)}
.ext-agent .who i{font:400 11px/1.3 var(--sans); color:var(--text-3); font-style:normal}
.ext-agent .ver{font:600 11.5px/1.3 var(--mono); color:var(--good)} .ext-agent.behind .ver{color:var(--critical)}
.ext-agent .seen{font:400 11px/1.3 var(--sans); color:var(--text-3)}
.ext-auto{margin-top:14px; padding:12px 14px; border-radius:10px; background:linear-gradient(180deg,#F3F8FC 0%,#E6F0F7 100%);
  border:1px solid #C9DCEA; border-left:5px solid var(--accent)}
.ext-auto .kick{color:var(--accent); font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase}
.ext-auto p{margin:4px 0 0; font:400 12.5px/1.55 var(--sans); color:var(--text-2)}
.btnlike{display:inline-flex; align-items:center; padding:9px 13px; border-radius:8px; background:var(--accent); color:#fff;
  font:600 13px/1 var(--sans); text-decoration:none}
.btnlike:hover{background:var(--accent-live)}

/* ---------------------------------------- the dashboard, one language throughout
   Mike: "I like where you were going with the Marketing Engine style, and the
   color gradients of the four sections. Combine and extend those styles to the
   rest of the page." So Today wears the engine's dark gradient, and every other
   panel wears a section-style gradient rule and the same rounded, lifted card. */
.dash-phead{background:linear-gradient(135deg,#1A2026 0%,#1B4E7A 62%,#0D6595 100%); color:#fff; border-radius:16px;
  padding:26px 28px 24px; margin-bottom:34px; box-shadow:0 18px 40px -22px rgba(13,101,149,.55)}
.dash-phead .kick{color:#8FC6EC} .dash-phead h2{color:#fff} .dash-phead p{color:#DCEBF5}
.headline{background:linear-gradient(135deg,#1A2026 0%,#1B4E7A 62%,#0D6595 100%); border-radius:14px;
  box-shadow:0 2px 4px rgba(15,18,20,.10), 0 18px 40px -22px rgba(13,101,149,.55)}
.hl{position:relative} .hl + .hl::before{content:""; position:absolute; left:0; top:22px; bottom:20px; border-left:1px solid rgba(255,255,255,.14)}
.hl.lit b{color:#8FF0BE}
.substrip{border:1px solid var(--line); border-top:0; border-radius:0 0 14px 14px; background:#fff; margin-top:-6px; padding-top:6px;
  box-shadow:0 2px 4px rgba(15,18,20,.05)}
#dash-blockers.panel, section[data-view="dashboard"] .eq .panel{position:relative; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 4px rgba(15,18,20,.05); background:#fff}
#dash-blockers.panel::before, section[data-view="dashboard"] .eq .panel::before{content:""; position:absolute; left:0; top:0; right:0; height:6px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff))}
#dash-blockers.panel{padding-top:18px}
#dash-blockers.panel::before{background:linear-gradient(90deg,#A94D1B,color-mix(in srgb,#A94D1B 55%,#fff))}
section[data-view="dashboard"] .eq .panel{padding-top:30px}
section[data-view="dashboard"] .eq .panel h3{margin-top:0}
section[data-view="dashboard"] .sechead .n{color:var(--accent)}

/* ------------------------------------------------------------------ type
   Mike: headings in Montserrat, descriptive text in Open Sans, every page.
   Components set their heading fonts with the shorthand, so the family is
   pinned here once rather than chased through every rule. */
h1, h2, h3, h4, h5, h6, .phead h2, .sechead h3, .lane-h h3, .crm-active-h h3, .crm-pipe-h h3,
.engine-title h3, .sector header h3, .brief-hero .brief-lede, .gauge-n b{font-family:var(--head) !important}
h1, h2, h3, h4, h5, h6{letter-spacing:-.01em}
body, button, input, select, textarea{font-family:var(--sans)}

/* the email lane's own button, in the lane's gray, white on it */
.lane-email .lane-h button{background:#8A96A3; border-color:#8A96A3; color:#fff}
.lane-email .lane-h button:hover{background:#6F7C8A; border-color:#6F7C8A; color:#fff}

/* the dashboard header band spans the page */
.dash-phead{max-width:none}

/* ---------------------------------------------------------------- the queue */
.rv-queue{display:grid; grid-template-columns:14px 1fr auto auto; gap:12px; align-items:center; margin:0 0 16px;
  padding:14px 16px; border-radius:14px; color:#fff;
  background:linear-gradient(135deg,#1A2026 0%,#1B4E7A 62%,#0D6595 100%); box-shadow:0 18px 40px -22px rgba(13,101,149,.55)}
.rv-queue .lamp{width:12px; height:12px; border-radius:50%; background:#E0A9A0}
.rv-queue.live .lamp{background:#5EDB9B; box-shadow:0 0 12px rgba(94,219,155,.9)}
.rq-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.rq-t b{font:700 14px/1.3 var(--head); color:#fff} .rq-t span{font:400 12px/1.5 var(--sans); color:#C9DCE9}
.rq-state{font:700 10px/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#F0C9C2}
.rv-queue.live .rq-state{color:#8FF0BE}
.rv-queue button{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff}
.rv-queue button:hover{background:rgba(255,255,255,.2)}
.rv.rv-focus{box-shadow:0 0 0 3px var(--accent-mid); border-color:var(--accent)}
@media(max-width:800px){.rv-queue{grid-template-columns:14px 1fr}}

/* ----------------------------------------------------------- who decides */
.crm-people{margin-top:22px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff}
.crm-people h4{margin:0 0 8px}
.person{display:grid; grid-template-columns:22px 1fr auto; gap:6px 10px; align-items:center; padding:8px 0; border-top:1px solid var(--line)}
.person:first-of-type{border-top:0}
.person .p-who{display:flex; flex-direction:column; min-width:0}
.person .p-who b{font:600 13px/1.3 var(--sans)} .person .p-who i{font:400 11px/1.3 var(--sans); color:var(--text-3); font-style:normal}
.person .p-who em{font:600 9.5px/1.3 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-style:normal}
.person .p-mail{font:500 12px/1.3 var(--sans)} .person .p-mail .quiet{color:var(--text-3); font-weight:400}
.person .p-src{grid-column:2 / -1; font:400 11px/1.3 var(--sans); color:var(--text-3)}
.person.has-email{background:linear-gradient(90deg,#F1F8F3,transparent); border-radius:6px; padding-left:6px; margin-left:-6px}

/* ------------------------------------------------------------------ trash */
.crm-card{position:relative}
.crm-card .c-trash{position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:7px; border:1px solid transparent;
  background:transparent; color:var(--text-3); display:grid; place-items:center; cursor:pointer; opacity:0; transition:opacity .12s ease}
.crm-card:hover .c-trash{opacity:1}
.crm-card .c-trash:hover{border-color:var(--critical); color:var(--critical); background:#FBF3F3}

/* ------------------------------------------------- the standing queue card
   The Hiring signals queue is a fixture, fed by the pipeline, and it wears the
   console's deep blue so it cannot be mistaken for a campaign somebody set up
   by hand (Founder Inbox and the rest stay on the plain surface). */
.panel.staple{background:linear-gradient(135deg,#1A2026 0%,#1B4E7A 62%,#0D6595 100%); color:#fff; border-color:transparent;
  border-radius:16px; box-shadow:0 2px 4px rgba(15,18,20,.10), 0 18px 40px -22px rgba(13,101,149,.55); position:relative}
.panel.staple .staple-kick{display:block; font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#8FC6EC; margin-bottom:6px}
.panel.staple h3{color:#fff}
.panel.staple .detail dt{color:#8FC6EC}
.panel.staple .detail dd{color:#fff}
.panel.staple .detail dd.n{color:#fff}
.panel.staple .detail dd .mono{color:#F0C9C2}
.panel.staple .detail select, .panel.staple .detail label{color:#fff}
.panel.staple .detail select{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff}
.panel.staple .detail select option{color:var(--ink)}
.panel.staple button.ghost, .panel.staple button{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff}
.panel.staple button.ghost:hover, .panel.staple button:hover{background:rgba(255,255,255,.2)}
.panel.staple button.danger{border-color:#F0C9C2; color:#F0C9C2}
.panel.staple .linky{color:#8FF0BE}
.panel.staple .pill{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff}
.panel.staple .pill.running{color:#8FF0BE; border-color:#8FF0BE}
.panel.staple .chk{color:#DCEBF5 !important}
.panel.staple dd[style*="color:var(--watch)"]{color:#F1D68A !important}

/* ------------------------------------------------ Review: who this is
   The morning read: who the company is, what the brief recommends, and who
   the email is going to, before the words themselves. */
.rv-who{display:grid; grid-template-columns:1fr auto; gap:14px 18px; padding:14px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#F3F8FC 0%,#FFFFFF 100%)}
@media(max-width:800px){.rv-who{grid-template-columns:1fr}}
.rv-who .kick{color:var(--accent); font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase}
.rv-lede{margin:4px 0 2px; font:600 14.5px/1.4 var(--head); color:var(--ink)}
.rv-sum{margin:0 0 6px; font:400 12.5px/1.5 var(--sans); color:var(--text-2)}
.rv-facts{display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0 2px}
.rv-facts span{display:flex; flex-direction:column; gap:1px}
.rv-facts i{font:600 8.5px/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); font-style:normal}
.rv-facts b{font:600 12px/1.35 var(--sans); color:var(--ink)}
.rv-rec{margin-top:10px; padding:9px 12px; border-left:3px solid var(--accent-mid); background:#fff; border-radius:0 8px 8px 0}
.rv-rec i{display:block; font:600 9px/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--accent); font-style:normal; margin-bottom:2px}
.rv-rec p{margin:0; font:400 12.5px/1.55 var(--sans); color:var(--text-2)}
.rv-who-b{display:flex; flex-direction:column; gap:8px; align-items:stretch; min-width:180px}
.rv-who-b .btnlike2{display:inline-flex; justify-content:center; align-items:center; padding:8px 12px; border:1px solid var(--line-strong); border-radius:8px;
  background:#fff; color:var(--accent-live); font:600 13px/1 var(--sans); text-decoration:none}
.rv-who-b .btnlike2:hover{border-color:var(--accent); background:#F1F6FA}

/* ------------------------------------------------------ connect-note review */
.lr-count{font:600 11px/1 var(--mono); color:var(--text-3); margin-left:8px}
.lr-count.over{color:var(--critical)}
.rv-co b small{font:500 11.5px/1 var(--sans); color:var(--text-3); margin-left:6px}

/* the arm button on a queue banner */
.rq-btns{display:flex; gap:8px; align-items:center}
.rv-queue .arm-btn{background:#5EDB9B; border:1px solid #5EDB9B; color:#0F1214; font-weight:700}
.rv-queue .arm-btn:hover{background:#8FF0BE; border-color:#8FF0BE; color:#0F1214}
@media(max-width:800px){.rv-queue{grid-template-columns:14px 1fr} .rq-btns{grid-column:1 / -1}}

/* ---------------------------------------------------------------- the modal */
#ccc-modal{position:fixed; inset:0; z-index:200; display:grid; place-items:center}
#ccc-modal[hidden]{display:none}
#ccc-modal .modal-back{position:absolute; inset:0; background:rgba(15,18,20,.45); backdrop-filter:blur(2px)}
#ccc-modal .modal{position:relative; width:min(520px, calc(100vw - 32px)); background:#fff; border-radius:16px; padding:22px 24px 20px;
  box-shadow:0 30px 80px -30px rgba(15,18,20,.6); border-top:6px solid var(--accent); animation:modal-in .16s ease-out}
#ccc-modal .modal.danger{border-top-color:var(--critical)}
#ccc-modal .modal .kick{font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}
#ccc-modal .modal.danger .kick{color:var(--critical)}
#ccc-modal .modal h3{margin:4px 0 8px; font:700 20px/1.25 var(--head); color:var(--ink)}
#ccc-modal .modal p{margin:0 0 8px; font:400 14px/1.55 var(--sans); color:var(--text-2)}
#ccc-modal .modal ul{margin:0 0 14px; padding-left:18px; font:400 13px/1.6 var(--sans); color:var(--text-2)}
#ccc-modal .modal-btns{display:flex; justify-content:flex-end; gap:10px}
#ccc-modal .danger-solid{background:var(--critical); border-color:var(--critical); color:#fff}
#ccc-modal .danger-solid:hover{background:#8C2727; border-color:#8C2727}
@keyframes modal-in{from{transform:translateY(8px); opacity:0} to{transform:none; opacity:1}}
.rv-queue.idle .lamp{background:#E7C36A; box-shadow:0 0 10px rgba(231,195,106,.8)}
.rv-queue.idle .rq-state{color:#F1D68A}

/* ------------------------------------------------------------ the arm switch
   The same idiom as Arm sending in the header: a pill with a lamp, mono
   uppercase, green when armed, quiet when not. */
.armsw{display:inline-flex; align-items:center; gap:8px; padding:6px 10px 6px 9px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--white); font:600 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}
.armsw .lamp{width:9px; height:9px; border-radius:50%; background:#C5CED2}
.armsw .act{padding-left:8px; border-left:1px solid var(--line); color:var(--accent-live)}
.armsw:hover{border-color:var(--accent); color:var(--accent-live)}
.armsw.on{color:var(--good); border-color:var(--good); background:#F2F8F5}
.armsw.on .lamp{background:var(--good); box-shadow:0 0 0 3px rgba(42,116,84,.16), 0 0 10px rgba(42,116,84,.55)}
.armsw.on .act{border-left-color:rgba(42,116,84,.3); color:var(--good)}
.armsw.dark{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35); color:#DCEBF5}
.armsw.dark .lamp{background:#E0A9A0}
.armsw.dark .act{border-left-color:rgba(255,255,255,.25); color:#fff}
.armsw.dark:hover{background:rgba(255,255,255,.16); border-color:#fff}
.armsw.dark.on{background:rgba(94,219,155,.16); border-color:#5EDB9B; color:#8FF0BE}
.armsw.dark.on .lamp{background:#5EDB9B; box-shadow:0 0 0 3px rgba(94,219,155,.2), 0 0 12px rgba(94,219,155,.9)}
.armsw.dark.on .act{color:#8FF0BE; border-left-color:rgba(143,240,190,.35)}
.armsw:disabled{opacity:.6; cursor:default}
.rv-queue .arm-btn{display:none}

/* ------------------------------------------------------------ step rules
   When it comes due, then: a compact strip under the step's words, in the
   platform's light-blue tint, so the logic is read in the same place as the
   message it governs. */
.step .rule{margin-top:10px; border-radius:10px; background:linear-gradient(180deg,#F3F8FC 0%,#E9F1F7 100%); border:1px solid #C9DCEA; padding:10px 12px}
.step .rule-when, .step .rule-then{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.step .rule-then{margin-top:8px; padding-top:8px; border-top:1px dashed #C9DCEA}
.step .rl-k{font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--accent); min-width:120px}
.step .rule select, .step .rule input.rl-note{font:400 12.5px/1.3 var(--sans); padding:5px 8px}
.step .rule input.rl-note{min-width:260px; flex:1}
.step .rule .chk{font-size:12.5px; color:var(--text-2); margin:0}

/* ------------------------------------------------------------ templates */
.tpl{margin:0 0 16px; border:1px solid #C9DCEA; border-left:5px solid var(--accent); border-radius:14px;
  background:linear-gradient(180deg,#F3F8FC 0%,#E6F0F7 100%); padding:14px 16px}
.tpl-h{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}
.tpl-h .kick{color:var(--accent); font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase}
.tpl-h .hint{margin:4px 0 0; max-width:720px} .tpl-h code{font-size:11px}
.tpl-pick{display:flex; align-items:flex-end; gap:8px}
.tpl-pick label{display:flex; flex-direction:column; font:600 11px/1.4 var(--sans); color:var(--text-3)}
.tpl-pick select{min-width:240px}
.tpl-edit{margin-top:12px; padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:10px}
.tpl-edit label{display:block; font:600 11px/1.4 var(--sans); color:var(--text-3); margin:6px 0}
.tpl-edit input, .tpl-edit textarea{display:block; width:100%; box-sizing:border-box; margin-top:3px; font:400 13px/1.5 var(--sans)}
.tpl-act{display:flex; align-items:center; gap:12px; margin-top:12px; padding-top:12px; border-top:1px dashed #C9DCEA; flex-wrap:wrap}
.tpl-act .grow{flex:1}
#rv-tpl-out, #lr-tpl-out{margin:8px 0 0}
.rv header .pickwrap{display:inline-flex; align-items:center; margin-right:2px}

/* ------------------------------------------------------------------- stats */
.statsgrid table td, .statsgrid table th{vertical-align:middle}
.statsgrid tr.nt td{color:var(--text-3)}
.ratebar{display:inline-block; width:90px; height:8px; border-radius:4px; background:var(--surface-2); border:1px solid var(--line); vertical-align:middle; margin-right:8px; overflow:hidden}
.ratebar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-mid))}
.verdict{display:inline-block; padding:3px 9px; border-radius:999px; font:700 10px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line)}
.verdict.good{color:var(--good); border-color:var(--good); background:#F2F8F5}
.verdict.warn{color:var(--watch); border-color:var(--watch); background:#FBF7EF}
.verdict.bad{color:var(--critical); border-color:var(--critical); background:#FBF3F3}
.verdict.quiet{color:var(--text-3)}
.vwhy{display:block; margin-top:3px; font:400 10.5px/1.35 var(--sans); color:var(--text-3); max-width:220px}

/* --------------------------------------------------------------- the ads
   Paid is the one motion that costs money per attempt, so its verdict band
   is the first thing on the page, in the console's own dark gradient. */
.ads-verdict{display:grid; grid-template-columns:14px 1fr auto; gap:14px; align-items:center; margin:0 0 18px;
  padding:16px 20px; border-radius:16px; color:#fff;
  background:linear-gradient(135deg,#1A2026 0%,#1B4E7A 62%,#0D6595 100%);
  box-shadow:0 2px 4px rgba(15,18,20,.10), 0 18px 40px -22px rgba(13,101,149,.55)}
.ads-verdict .lamp{width:13px; height:13px; border-radius:50%; background:#E0A9A0}
.ads-verdict.on .lamp{background:#5EDB9B; box-shadow:0 0 14px rgba(94,219,155,.9)}
.ads-verdict.stale .lamp{background:#E7C36A; box-shadow:0 0 12px rgba(231,195,106,.8)}
.ads-verdict .av-t{min-width:0}
.ads-verdict .av-t b{display:block; font:700 17px/1.25 var(--head); color:#fff}
.ads-verdict .av-t span{font:400 12.5px/1.5 var(--sans); color:#C9DCE9}
.ads-verdict .av-s{font:700 10px/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#F0C9C2}
.ads-verdict.on .av-s{color:#8FF0BE} .ads-verdict.stale .av-s{color:#F1D68A}

.ads-plat{--sec:#0D6595}
.ads-plat.linkedin{--sec:#1F6FB2; --sec-soft:#E9F1FA}
.ads-plat.meta{--sec:#2B5098; --sec-soft:#ECEFF8}

/* the spend chart: a plain bar per day, money above, leads below */
.ads-bars{display:flex; align-items:flex-end; gap:3px; height:120px; padding:12px 14px;
  background:#fff; border:1px solid var(--line); border-radius:12px; margin-top:16px; overflow-x:auto}
.ads-bars .b{flex:1 0 8px; min-width:8px; display:flex; flex-direction:column; justify-content:flex-end; height:100%}
.ads-bars .b i{display:block; background:linear-gradient(180deg,var(--accent-mid),var(--accent)); border-radius:3px 3px 0 0}
.ads-bars .b em{display:block; height:3px; margin-top:2px; background:#5EDB9B; border-radius:2px; font-style:normal}
.ads-bars .b.none i{background:var(--line)}

/* the guard */
.ads-guard{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:16px}
.ads-guard .g{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.ads-guard .g.over{border-color:var(--critical); background:#FBF3F3}
.ads-guard .g b{display:block; font:700 22px/1.15 var(--mono); color:var(--ink)}
.ads-guard .g.over b{color:var(--critical)}
.ads-guard .g span{font:500 11px/1.4 var(--sans); color:var(--text-3)}
.ads-guard .g i{display:block; margin-top:4px; font:400 11px/1.4 var(--sans); font-style:normal; color:var(--text-3)}

/* a lead row */
.ads-lead{display:grid; grid-template-columns:auto 1fr auto auto; gap:8px 14px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px}
.ads-lead .who{display:flex; flex-direction:column; min-width:0}
.ads-lead .who b{font:600 13.5px/1.3 var(--sans)}
.ads-lead .who span{font:400 11.5px/1.4 var(--sans); color:var(--text-3)}
.ads-lead .ans{grid-column:1 / -1; font:400 11.5px/1.5 var(--sans); color:var(--text-2);
  background:var(--surface-2); border-radius:8px; padding:7px 10px}
.ads-lead .st{font:700 9.5px/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase}
.ads-lead .st.sent{color:var(--good)} .ads-lead .st.failed{color:var(--watch)}
.ads-lead .st.dead{color:var(--critical)} .ads-lead .st.waiting{color:var(--text-3)}

/* settings panels reuse the extension panel's look */
.ads-panel{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:16px}
.ads-panel h4{margin:0 0 4px; font:700 15px/1.3 var(--head)}
.ads-panel .need{display:inline-block; margin:2px 6px 2px 0; padding:3px 9px; border-radius:999px;
  font:600 10px/1.4 var(--mono); border:1px solid var(--line); color:var(--text-3)}
.ads-panel .need.have{color:var(--good); border-color:var(--good); background:#F2F8F5}
.sector.sec-ads{--sec:#1B7A6B; --sec-soft:#E8F4F1}

/* ---------------------------------------------------- making a campaign
   The plan is the point of this panel, so the payload is shown plainly and
   without apology: it is the last thing between a form and real money. */
.ads-maker{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:18px}
.ads-maker .mk-head{margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.ads-maker .mk-head b{display:block; font:700 15px/1.3 var(--head)}
.ads-maker .mk-head span{display:block; margin-top:3px; font:400 12px/1.55 var(--sans); color:var(--text-3); max-width:70ch}
.mk-problems{margin-top:14px; padding:12px 14px; border-radius:10px; background:#FBF3F3; border:1px solid var(--critical)}
.mk-problems b{font:700 12.5px/1.4 var(--sans); color:var(--critical)}
.mk-problems ul{margin:6px 0 0 18px; padding:0; font:400 12px/1.6 var(--sans); color:var(--text-2)}
.mk-plan{margin-top:14px; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.mk-plan .mk-name{padding:10px 14px; background:var(--surface-2); font:700 13px/1.3 var(--mono)}
.mk-step{display:grid; grid-template-columns:26px 1fr; gap:12px; padding:12px 14px; border-top:1px solid var(--line)}
.mk-step .n{width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff;
  font:700 11px/22px var(--mono); text-align:center}
.mk-step b{font:700 12.5px/1.4 var(--sans)}
.mk-step i{display:block; font-style:normal; font:400 12px/1.5 var(--sans); color:var(--text-3)}
.mk-step code{display:block; margin-top:6px; font:600 11px/1.5 var(--mono); color:var(--accent); word-break:break-all}
.mk-step pre{margin:6px 0 0; padding:9px 11px; border-radius:8px; background:var(--surface-2);
  font:400 11px/1.55 var(--mono); color:var(--text-2); white-space:pre-wrap; word-break:break-word; max-height:260px; overflow:auto}
.mk-ends{margin:0; padding:11px 14px; border-top:1px solid var(--line); background:#F2F8F5;
  font:400 12px/1.55 var(--sans); color:var(--text-2)}

/* ------------------------------------------------------------- tracking
   A report is only useful if the gaps in it are as visible as the numbers,
   so the untagged line is styled to be read rather than skipped. */
.mstat i{display:block; margin-top:3px; font:400 11px/1.4 var(--sans); font-style:normal; color:var(--text-3)}
.warnline{padding:11px 14px; border-radius:10px; background:#FFF8EC; border:1px solid var(--watch);
  color:var(--text-2); margin-top:12px}
.statsgrid tr.nt td{background:var(--surface-2)}
.statsgrid tr.nt td b{color:var(--text-3)}