/* 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,#585F6B);
  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,#585F6B);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(20,50,83,.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:#F1F5FB}
.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:#F1F5FB}
.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:#F1F5FB}
.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}
/* There are 47 of these in the console and all of them were grey text
   floating in white space with no edge, which reads as a page that failed to
   load rather than one waiting to be filled. This is the `.snone` treatment
   from the Stats pages, which was written for exactly this and used on two
   pages. The dashed ring says "a slot with nothing in it" without a word. */
.empty{position:relative; color:var(--text-2); font-size:13px; line-height:1.55;
  text-align:center; padding:26px 22px; margin:0;
  background:linear-gradient(135deg,#F3F6FC 0%,#FBFCFE 62%);
  border:1px solid #D3DBEB; border-radius:12px}
.empty::before{content:""; display:block; width:24px; height:24px; margin:0 auto 11px;
  border-radius:50%; border:2px dashed #9EB6DC}
.empty b{color:var(--accent-live)}

/* The small one stands inside a kanban column or a card, where a full panel
   would weigh more than the thing it is standing in for. */
.empty.small{padding:14px 12px; font-size:12px; border-style:dashed;
  background:var(--surface-2)}
.empty.small::before{width:16px; height:16px; margin-bottom:8px; border-width:1.5px}

/* In a table the cell already has the edges, so only the mark and the words. */
td.empty{background:none; border:0; border-bottom:1px solid var(--line); border-radius:0}

/* -- 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:#F1F5FB}
.calcell.over{background:#E8EFFA;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,#0D4595);background:#F1F5FB;
  box-shadow:inset 0 -2px 0 var(--c,#0D4595)}
.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,#585F6B)}
.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,#0D4595);
  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,#585F6B);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,#585F6B);
  color:var(--c,#585F6B);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:#E6ECF5; border-color:#BBCAE3; color:var(--accent-live)}
.chip.src-linkedin  {background:#E4E9F7; border-color:#B6C1E5; color:#1B387A}
.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:#F1F4FA; 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(20,50,83,.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(20,50,83,.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:#CFDAEA; background:linear-gradient(180deg,#F6F9FC,transparent)}
.col-h.st-contacted  {border-top-color:#AFC3E2; background:linear-gradient(180deg,#F2F6FB,transparent)}
.col-h.st-replied    {border-top-color:#8FA8D6; background:linear-gradient(180deg,#EEF3FA,transparent)}
.col-h.st-call_booked{border-top-color:#4E79BE; background:linear-gradient(180deg,#EAF0F9,transparent)}
.col-h.st-quoted     {border-top-color:#0D4595; background:linear-gradient(180deg,#E6EDF8,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),#1B387A); color:#fff;
  font:700 11px/1 var(--sans); letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(20,50,83,.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,#F3F6FC 0%,#E6ECF7 100%);
  border:1px solid #C9D4EA; 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(20,50,83,.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{padding:12px 14px}
.pipestat b{font-size:24px}
.pipestat span{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:var(--band);
  border-radius:14px; padding:18px 20px 20px; margin-bottom:22px; color:#fff;
  box-shadow:var(--band-lift);
}
.crm-active-h{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:14px}
.crm-active-h .kick{color:var(--band-kick); 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:var(--band-kick)}
.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:#B9CAE6; 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:#B9CAE6}
.acard-next{display:block; font:500 11px/1.4 var(--sans); color:#DCE5F5;
  background:rgba(255,255,255,.08); border-left:3px solid var(--band-kick); 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:var(--band-kick); 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:#DCE5F5}
.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:#B9CAE6; 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:#CFDEFF}
.acard-basis{font:400 10.5px/1.3 var(--sans); color:var(--band-kick)}
.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:#EAEFF9}
.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:#1B387A}
.lk-email_thread::before   {background:var(--accent)}
.lk-ccc_conversation::before{background:#8FA8D6}
.lk-site::before           {background:var(--gray)}

/* --------------------------------------------------------- the sequences */
/* The console's old section heading. Nothing uses it: Stats replaced it with
   `.shead`, and Clients > Tracking, the last page on it, was converted on
   2026-09-19. Kept rather than deleted in case a quiet heading is wanted. */
.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:#AFC3E2}
.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,#EFF4FB,#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{padding:12px 14px}
.sigstat b{font-size:22px}

.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 Kander sells. */
/* The wash falls from the top edge and is gone by the time the summary
   starts, so it colours the part of the card you read first and never sits
   behind body text. */
.sig.band-hot {border-left-color:var(--accent);
  background:linear-gradient(180deg,#E9EFFA 0%,#F6F8FD 54px,var(--white) 104px)}
.sig.band-warm{border-left-color:#8FA8D6;
  background:linear-gradient(180deg,#F4F7FC 0%,var(--white) 72px)}
.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)}
/* A NUMBER WITH ITS UNIT.
   "90" beside a company name means nothing to anyone who has not read the
   scoring code, and this page is meant to be read at a glance. The word under
   the number is the whole of what the score is for. */
.sig-score{display:flex; flex-direction:column; align-items:center; gap:2px;
  font:700 13px/1 var(--mono); color:var(--accent-live);
  background:var(--paper); border-radius:7px; padding:4px 7px 3px; text-align:center}
.sig-score small{font:600 7.5px/1 var(--sans); letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-3)}
.sig.band-hot .sig-score{background:var(--accent); color:#fff;
  box-shadow:0 2px 5px -1px rgba(61,90,169,.45)}
.sig.band-hot .sig-score small{color:#B9CFF0}
.sig.band-warm .sig-score{background:#E6EDF8; color:var(--accent)}

/* THE FILTER'S COLOUR, CARRIED INTO THE CARDS.
   With an industry chosen, every card on the page shares it, and the eye
   should not have to go looking for the cell that explains why the card is
   here. It lights up instead, and goes quiet again when the filter is off. */
.siggrid.ind-on .glance .g:first-child{background:#E8EEF8}
.siggrid.ind-on .glance .g:first-child i{color:var(--accent)}
.siggrid.ind-on .glance .g:first-child b{color:var(--accent-live)}

.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{padding:13px 15px}
.mstat b{font-size:21px}

/* 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:#B9CAE6; 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:#EDF1F7}
.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:var(--band); color:#fff; padding:16px 18px 14px}
.brief-hero .kick{color:var(--band-kick)}
.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%,#F7F8FB 60%)}
.seq-lane.lane-linkedin{border-left-color:#2F50B5; background:linear-gradient(180deg,#EDF0FA 0%,#F7F8FB 60%)}
.seq-lane.lane-email{border-left-color:#8A90A3}
.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:#1F3E99} .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:#F1F4FA}
.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:#0D4595; --sec-soft:#EAEFF8; 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(20,50,83,.05); transition:box-shadow .15s ease, transform .15s ease}
.sector:hover{box-shadow:0 12px 30px -18px rgba(20,50,83,.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:#0D4595; --sec-soft:#EAEFF8}
.sector.sec-outbound{--sec:#2B3798; --sec-soft:#ECECF8}
.sector.sec-network{--sec:#1F4DB2; --sec-soft:#E9EDFA}
.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:var(--band); color:#fff;
  border-radius:16px; padding:22px 26px; box-shadow:var(--band-lift)}
@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:#B9CAE6; font-style:normal}
.gauge-n span{font:600 9px/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#B9CAE6; 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:var(--band-kick); 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:#B9CAE6}
.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:#C9D5E9; 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:var(--band); color:#fff; border-radius:12px; padding:14px 16px}
.ext-served .kick{color:var(--band-kick); 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:#B9CAE6; 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,#F3F6FC 0%,#E6ECF7 100%);
  border:1px solid #C9D4EA; 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. */
/* THE HOUSE BAND, on every page.
   This lived on the Dashboard alone, behind a .dash-phead modifier. A measured
   walk of all 45 pages, counting the share of pixels carrying real colour, put
   thirty of them under one percent while the Dashboard, carrying this, sat at
   14.7. The blue that did exist elsewhere was on-brand almost everywhere, so
   the problem was never the hue, it was that most pages had no colour at all.
   The band was not a Dashboard idea, it was the console's idea, so it belongs
   on .phead, which 44 pages already use. */
.phead{background:var(--band);
  color:#fff; border-radius:16px; padding:20px 24px 19px; margin:0 0 26px;
  max-width:none; position:relative; overflow:hidden;
  box-shadow:0 14px 32px -20px rgba(61,90,169,.5)}
/* A soft light in the top right, the same device the other dark bands use. It
   stops a wide band reading as a flat rectangle. */
.phead::after{content:""; position:absolute; top:-70px; right:-40px; width:260px; height:200px;
  border-radius:50%; background:radial-gradient(circle,rgba(112,193,240,.28) 0%,transparent 68%);
  pointer-events:none}
.phead > *{position:relative; z-index:1}
.phead .kick{color:var(--band-kick)}
.phead h2{color:#fff}
.phead p{color:#DCE5F5; max-width:78ch}

/* The Dashboard keeps a roomier version of the same band, so the front page
   still reads as the front page. */
.dash-phead{padding:26px 28px 24px; margin-bottom:34px;
  box-shadow:0 18px 40px -22px rgba(61,90,169,.55)}
.headline{background:var(--band); border-radius:14px;
  box-shadow:var(--band-lift)}
.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(20,50,83,.05)}
#dash-blockers.panel, section[data-view="dashboard"] .eq .panel{position:relative; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 4px rgba(20,50,83,.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,#8C3D14,color-mix(in srgb,#8C3D14 55%,#fff))}
section[data-view="dashboard"] .eq .panel{padding-top:30px}
section[data-view="dashboard"] .eq .panel h3{margin-top:0}

/* ------------------------------------------------------------------ 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:#8A90A3; border-color:#8A90A3; color:#fff}
.lane-email .lane-h button:hover{background:#6F768A; border-color:#6F768A; 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:var(--band); box-shadow:0 18px 40px -22px rgba(61,90,169,.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:#C9D5E9}
.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:var(--band); color:#fff; border-color:transparent;
  border-radius:16px; box-shadow:var(--band-lift); position:relative}
.panel.staple .staple-kick{display:block; font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--band-kick); margin-bottom:6px}
.panel.staple h3{color:#fff}
.panel.staple .detail dt{color:var(--band-kick)}
.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:#DCE5F5 !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,#F3F6FC 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:#F1F4FA}

/* ------------------------------------------------------ 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:#0F1114; font-weight:700}
.rv-queue .arm-btn:hover{background:#8FF0BE; border-color:#8FF0BE; color:#0F1114}
@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(20,50,83,.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(20,50,83,.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:#C5CBD2}
.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:#DCE5F5}
.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,#F3F6FC 0%,#E9EEF7 100%); border:1px solid #C9D4EA; 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 #C9D4EA}
.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 #C9D4EA; border-left:5px solid var(--accent); border-radius:14px;
  background:linear-gradient(180deg,#F3F6FC 0%,#E6ECF7 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}
/* The picker is a row of a label, a 240px select and two buttons. On a phone
   that is 12px wider than the page, which is enough to make the whole console
   scroll sideways: a 12px overflow is invisible as a layout fault and very
   visible as a page that will not sit still under a thumb. It wraps, and the
   select gives up its floor rather than its ceiling. */
.tpl-pick{display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap}
.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; max-width:100%}
@media (max-width:520px){
  .tpl-pick label{flex:1 1 100%}
  .tpl-pick select{min-width:0; width:100%}
}
.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 #C9D4EA; 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:var(--band);
  box-shadow:var(--band-lift)}
.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:#C9D5E9}
.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:#0D4595}
.ads-plat.linkedin{--sec:#1F4DB2; --sec-soft:#E9EDFA}
.ads-plat.meta{--sec:#2B3798; --sec-soft:#ECECF8}

/* 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)}

/* --------------------------------------------------- the anatomy of a link
   A tagged URL is the thing people do not understand, so the page shows one
   and names its parts. Each part keeps one colour between the link and the
   legend below it, which is what makes the mapping readable without a line
   drawn between them. */
.utm-anatomy{margin:var(--s5,16px) 0 var(--s6,20px); padding:14px 16px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line);
  font:600 13px/2.1 var(--mono); word-break:break-word}
.utm-anatomy__base{color:var(--text-2)}
.utm-anatomy__sep{color:var(--text-3); padding:0 2px}
.utm-part{border-radius:6px; padding:3px 6px; white-space:nowrap}
.utm-part__k{opacity:.75}
.utm-part__v{font-weight:700}

.utm-part--0{background:#E4ECF7; color:#0D4595}
.utm-part--1{background:#E6F1EA; color:#2A7454}
.utm-part--2{background:#FBEDE4; color:#8C3D14}
.utm-part--3{background:#F3ECF8; color:#6B4E93}
.utm-part--4{background:#FAF0D8; color:#8A5E12}

.utm-legend{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px}
.utm-legend__item{display:grid; grid-template-columns:8px 1fr; gap:10px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 13px}
.utm-legend__item .utm-legend__swatch{width:8px; height:100%; min-height:34px; border-radius:4px;
  background:currentColor}
.utm-legend__item b{display:block; font:600 13px/1.35 var(--sans); color:var(--text-1)}
.utm-legend__item code{display:inline-block; margin:3px 0; font:600 10.5px/1.4 var(--mono); color:var(--text-3)}
.utm-legend__item i{display:block; font-style:normal; font:400 11.5px/1.5 var(--sans); color:var(--text-3)}

.utm-domains{display:flex; flex-wrap:wrap; gap:6px; margin:var(--s4,12px) 0}

/* ------------------------------------------------------- the stats tables
   Outbound > Stats and Ads > Stats share this. They answer the same question,
   which is what to keep and what to stop, so they should look like the same
   instrument. */
.statsgrid table{border-collapse:separate; border-spacing:0}
.statsgrid table th{padding:12px 14px; white-space:nowrap; font-size:10px; letter-spacing:.1em}
.statsgrid table td{padding:15px 14px; vertical-align:middle}

/* The verdict, carried on the row itself. Reading the left edge is faster than
   reading the last column, and it is the whole point of the page. */
.statsgrid tr.sv td:first-child{position:relative}
.statsgrid tr.sv td:first-child::before{content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:3px; border-radius:3px; background:var(--line)}
.statsgrid tr.sv--good td:first-child::before{background:var(--good)}
.statsgrid tr.sv--warn td:first-child::before{background:var(--watch)}
.statsgrid tr.sv--bad  td:first-child::before{background:var(--critical)}
.statsgrid tr.sv--good{background:linear-gradient(90deg,#F4FAF7 0%,transparent 40%)}
.statsgrid tr.sv--warn{background:linear-gradient(90deg,#FDF9F1 0%,transparent 40%)}
.statsgrid tr.sv--bad{background:linear-gradient(90deg,#FDF5F5 0%,transparent 40%)}

/* A cell holding two or three small figures that belong together. */
.sgroup{display:flex; gap:16px}
.sgroup > span{display:flex; flex-direction:column; line-height:1.25}
.sgroup b{font:600 14px/1.2 var(--mono); color:var(--text-1)}
.sgroup i{font-style:normal; font:400 10px/1.3 var(--sans); letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-3); margin-top:3px}
.sgroup b.zero{color:var(--line-strong); font-weight:500}

/* The rate: bar and number on one line, wide enough to compare down a column. */
.srate{display:flex; align-items:center; gap:10px; min-width:150px}
.srate .bar{flex:1; height:9px; border-radius:5px; background:var(--surface-2);
  border:1px solid var(--line); overflow:hidden}
.srate .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-mid))}
.srate .bar i.good{background:linear-gradient(90deg,#2A7454,#3E9C74)}
.srate .bar i.warn{background:linear-gradient(90deg,#8A5E12,#B9862B)}
.srate .bar i.bad{background:linear-gradient(90deg,#A32F2F,#C65151)}
.srate b{font:700 14px/1 var(--mono); min-width:52px; text-align:right}
.srate b.zero{color:var(--line-strong); font-weight:500}

.sname{display:block; font:600 14px/1.35 var(--sans)}
.sname small{display:block; margin-top:2px; font:400 11px/1.4 var(--sans); color:var(--text-3)}

/* Nothing sent yet is a sentence, not a grid of zeros. */
.snone{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding:20px 22px; border-radius:14px; border:1px solid #CFD9EC;
  background:linear-gradient(135deg,#F3F6FC 0%,#FBFCFE 60%); margin-bottom:20px}
.snone__mark{width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); border:1px solid var(--accent); color:#fff;
  font:700 15px/1 var(--mono); box-shadow:0 2px 6px -1px rgba(61,90,169,.4)}
.snone ul b{font-weight:600; color:var(--text-1)}

/* A section heading that carries its channel's colour. The verdict colours only
   appear once there is something to judge, so on a quiet day they leave the
   page grey; this does not. */
.shead{display:flex; align-items:center; gap:10px; margin:26px 0 12px}
.shead::before{content:""; width:4px; height:18px; border-radius:3px; background:var(--accent)}
.shead h4{margin:0; font:700 15px/1.3 var(--head); color:var(--text-1)}
.shead span{font:600 10px/1.4 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); padding:3px 8px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--line)}
.shead--email::before{background:var(--accent)}
.shead--linkedin::before{background:#2F50B5}
.shead--paid::before{background:#1B7A6B}
.shead--audience::before{background:#6B4E93}
.shead--creative::before{background:#8C3D14}
/* The heading only. Bold words inside the sentences below must stay inline,
   which they did not when this was written as a bare `b`. */
.snone > div > b:first-child{display:block; font:700 15px/1.35 var(--head); margin-bottom:4px}
.snone p{margin:0; font:400 12.5px/1.6 var(--sans); color:var(--text-3); max-width:70ch}
.snone ul{margin:8px 0 0 18px; padding:0; font:400 12.5px/1.7 var(--sans); color:var(--text-3)}

/* ------------------------------------------------- section heads, in colour
   There are 55 of these across the console and each was a small blue number
   followed by a flat grey hairline. The number now sits against an accent bar,
   and the rule running to the edge fades out of the accent rather than being
   grey, so a section reads as a division instead of a caption. */
.sechead{position:relative; padding-left:14px}
.sechead::before{content:""; position:absolute; left:0; top:2px; bottom:2px; width:3px;
  border-radius:3px; background:linear-gradient(180deg,var(--accent),var(--accent-mid))}
.sechead::after{background:linear-gradient(90deg,rgba(61,90,169,.32),rgba(61,90,169,.06) 55%,transparent)}

/* =================================================== THE COUNTER ROW ==
   `.sigstat`, `.mstat` and `.pipestat` were three copies of the same tile in
   three places, all of them a near-black number on a grey-white box. They are
   one thing now. It sits directly under the house band on twelve pages, so it
   is the console's second impression and it was the flattest thing on screen.

   The accent bar runs down the left edge, which is the device already used by
   `.sechead` and by the score bands on the Hiring signals cards, rather than a
   fourth way of pointing at something. */
.sigstat,.mstat,.pipestat,.moneyrow .mcell{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#FFFFFF 0%,#F4F7FC 62%,#EAEFF8 100%);
  border:1px solid #D3DBEB; border-radius:11px;
  box-shadow:0 1px 2px rgba(20,50,83,.04);
  padding-left:17px}
.sigstat::before,.mstat::before,.pipestat::before,.moneyrow .mcell::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--accent-mid),var(--accent))}
.sigstat b,.mstat b,.pipestat b,.moneyrow .mcell b{
  display:block; font-family:var(--sans); font-weight:700; line-height:1.15;
  color:var(--accent-live); letter-spacing:-.015em}
.sigstat span,.mstat span,.pipestat span{
  font:500 11px/1.4 var(--sans); color:var(--text-3)}

/* A READING OF NOTHING GOES QUIET.
   Three of the five readings on Hiring signals are 0 today. Set in the same
   blue and the same weight as the number beside it, a zero has to be read
   before it can be dismissed, which is work for no answer. Grey, with its bar
   off, the row reports where anything is before it is read at all. The class
   is put on by app.js, because the value is not something CSS can test. */
.sigstat.is-zero,.mstat.is-zero,.pipestat.is-zero,.moneyrow .mcell.is-zero{
  background:var(--surface-2); border-color:var(--line); box-shadow:none}
.sigstat.is-zero::before,.mstat.is-zero::before,.pipestat.is-zero::before,.moneyrow .mcell.is-zero::before{
  background:var(--mist)}
.sigstat.is-zero b,.mstat.is-zero b,.pipestat.is-zero b,.moneyrow .mcell.is-zero b{color:var(--silver)}
.sigstat.is-zero span,.mstat.is-zero span,.pipestat.is-zero span{color:var(--gray)}

/* A zero in a table, wherever it is. The two Stats pages already set `.zero`
   on a `<b>` at render time; this is the same class put on the cell itself by
   the observer in app.js, so the console has one word for "nothing here" and
   not two. Pale enough to be skipped over, dark enough to still be read on
   purpose. */
td.zero,td > b.zero,td > span.zero,
.sfig b.zero,.sfig.lit b.zero{color:var(--silver); font-weight:500}

/* One marker per heading. The accent bar came in with the house band for every
   section head; where a numeral now sits in the same place it says the same
   thing twice, so the bar stands down. The three section heads with no number
   keep it. */
.sechead:has(.n){padding-left:0}
.sechead:has(.n)::before{display:none}

/* ============================================ A ROW THAT HAS A STATE ==
   The same edge the two Stats pages already use for a verdict, applied to
   every table in the console. app.js reads the state off the `.pill` the row
   already carries, so a table gets this only where it genuinely has a state to
   report. Reading a left edge is faster than reading the last column, which is
   where the word currently is.

   The Stats pages' row wash is not carried over on purpose: those tables are
   five rows of mixed verdicts, and a campaigns table is twenty rows that all
   say running. The bar scans; a wall of green would not. */
tbody tr[data-state] > td:first-child{position:relative; padding-left:16px}
tbody tr[data-state] > td:first-child::before{content:""; position:absolute;
  left:4px; top:7px; bottom:7px; width:3px; border-radius:3px; background:var(--mist)}
tbody tr[data-state="good"]  > td:first-child::before{background:var(--good)}
tbody tr[data-state="watch"] > td:first-child::before{background:var(--watch)}
tbody tr[data-state="bad"]   > td:first-child::before{background:var(--critical)}
tbody tr[data-state="info"]  > td:first-child::before{background:var(--accent)}
tbody tr[data-state="quiet"] > td:first-child::before{background:var(--mist)}

/* A value that is genuinely absent, said as a word instead of a dash. Scoped
   to table cells because `.none` is already a modifier on two components, and
   because a cell is the only place utm.js writes it. `.quiet` was used three
   times in that file and styled nowhere, so it was only a name; it gets the
   muting it was plainly written to have. */
td .none{color:var(--silver); font-size:12px}
td .quiet{color:var(--text-3)}

/* ================================================== A PANEL WITH A STATE ==
   Settings is eight of these in a column and they looked identical whether
   they held a live key or nothing. The edge is the device rows and section
   heads already use; a badge on each of eight panels would be worse than
   nothing. Quiet on purpose: this is an answer you glance at, not one that
   should interrupt the reading. */
section.view .panel[data-fill]{position:relative}
section.view .panel[data-fill]::after{content:""; position:absolute; left:0; top:14px; bottom:14px;
  width:3px; border-radius:0 3px 3px 0; pointer-events:none}
section.view .panel[data-fill="set"]::after{background:var(--accent)}
section.view .panel[data-fill="empty"]::after{
  background:repeating-linear-gradient(180deg,var(--mist) 0 5px,transparent 5px 10px)}
section.view .panel[data-fill="broken"]::after{background:var(--critical)}

/* THE ADS > STATS SUMMARY STRIP.
   `.mcell` is two objects under one class name. Inside `.acard-m`, on the dark
   active-client cards, it is styled and works. In `.moneyrow` it is styled by
   nothing, so a label, a figure and a note sat inline with no space between
   them and the page read "Spent$0over 90 days".

   Scoped to `.moneyrow .mcell` rather than to the class, because the class
   would repaint the dark cards with a light tile. It is the same object as
   `.mstat` beside it, so it wears the same tile. */
.moneyrow .mcell{padding:12px 15px 11px}
.moneyrow .mcell .k{display:block; font:600 9.5px/1.3 var(--sans); letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:4px}
.moneyrow .mcell b{font-size:21px}
.moneyrow .mcell b small{font-size:12px; font-weight:600; color:var(--text-2); margin-left:4px}
.moneyrow .mcell i{display:block; font-style:normal; font:400 11px/1.4 var(--sans);
  color:var(--text-3); margin-top:3px}
.moneyrow .mcell.is-zero .k,.moneyrow .mcell.is-zero i{color:var(--gray)}


/* ------------------------------------------------- the piston member bullets
   Mike, 2026-09-20: the pistons "just fire based on whether cold email is
   armed or not. Just because something may be armed doesn't mean that it is
   active."

   So every piston card now lists its NAMED members, each with the bar it has
   to clear. These styles are what let a person tell the three answers apart
   from across the room. If "could not be read" ever looks the same as "not
   working", the whole rule was a waste of time: the screen has quietly
   collapsed three answers back into two. */
.cyl-m{list-style:none; margin:7px 0 0; padding:7px 0 0; border-top:1px solid rgba(255,255,255,.12)}
.cyl-m li{position:relative; padding-left:14px; margin-bottom:5px}
.cyl-m li::before{position:absolute; left:0; top:0; font-size:9px; line-height:1.55}
.cyl-m li.yes::before{content:"\2713"; color:#8FF0BE}
.cyl-m li.no::before{content:"\2022"; color:#E0A9A0; font-size:10px; line-height:1.5}
/* BLIND: we could not look. Not red, because nothing is known to be wrong.
   Grey with a question, because the console has stopped knowing. */
.cyl-m li.blind::before{content:"?"; color:#9FABC4; font-size:10px; line-height:1.45; font-weight:700}
.cyl-m li b{display:block; font:600 10.5px/1.3 var(--sans); color:#fff}
.cyl-m li.no b{color:#EDF1F7}
.cyl-m li.blind b{color:#E1E6F1}
.cyl-m li span{display:block; font:400 9.5px/1.4 var(--sans); color:#EEF2F9}
.cyl-m li.blind span{color:#E4E8F0}
/* Where the figure came from. Quiet on purpose: it matters when you doubt a
   number and should not compete with the number the rest of the time. */
.cyl-m li .src{display:block; font:600 8.5px/1.4 var(--sans); font-style:normal;
  letter-spacing:.05em; text-transform:uppercase; color:#A6B3CB; margin-top:1px}

/* The count, beside the piston name. */
.cyl-t em{font:700 13px/1 var(--mono); color:#fff; font-style:normal; margin:1px 0}
.cyl-t em i{font:600 10px/1 var(--mono); color:#B9CAE6; font-style:normal}

/* BLOCKED: a machine-wide switch is off, or a ceiling has been hit. No single
   member is at fault, so it is marked on the piston. Without this line the
   dashboard sends somebody to rebuild a list when the real problem is one
   switch two screens away. */
.blocked{margin:6px 0 0; padding:6px 8px; border-radius:5px;
  background:rgba(231,195,106,.13); border:1px solid rgba(231,195,106,.32)}
.blocked b{display:block; font:700 9px/1.4 var(--sans); letter-spacing:.09em;
  text-transform:uppercase; color:#F1D68A; margin:0 0 2px}
.blocked span{display:block; font:400 9.5px/1.45 var(--sans); color:#F6F9FC}

/* NOT BUILT is not DEAD. "We never made this" and "we made this and it
   stopped" are different instructions to whoever is reading, so the card is
   visibly absent rather than visibly broken. */
.cyl.unbuilt{border-style:dashed; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.035)}
.cyl.unbuilt .cyl-bar{background:rgba(0,0,0,.18)}
.cyl.unbuilt .lamp{background:transparent; border:1px solid #9FABC4}
.cyl.unbuilt .cyl-t i{color:#B9CAE6}

/* The key under the block. The novice test: somebody who has never seen this
   console should not have to guess what a question mark means. */
/* ⚠ THIS SITS ON THE LIGHT PAGE, NOT ON THE DARK BAND.
   It was written in the band's colours because it was written next to the
   band's code, and #C9D5E9 on a near-white page is close to invisible. The
   browser smoke test did not catch it and could not have as written: it
   asserts the key EXISTS, and it did exist, unreadably. A side-by-side
   screenshot caught it immediately, which is what that job is for. */
.enginefoot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 16px; padding:12px 0 2px; margin-top:12px;
  border-top:1px solid var(--line); font:400 11.5px/1.5 var(--sans); color:var(--text-2)}
.enginefoot .keys{display:flex; gap:14px}
.enginefoot .keys i{font:600 10px/1.4 var(--sans); font-style:normal; color:var(--text-3)}
.enginefoot .keys i::before{margin-right:4px; font-weight:700}
.enginefoot .keys .k-yes::before{content:"\2713"; color:var(--good)}
.enginefoot .keys .k-no::before{content:"\2022"; color:var(--critical)}
.enginefoot .keys .k-blind::before{content:"?"; color:var(--steel)}

/* The cards are much taller now that they carry bullets, so two across reads
   better than four long before the phone breakpoint. The dashboard is the
   screen Mike opens first and often not at his desk. */
@media(max-width:1400px){.cylinders{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
  .cylinders{grid-template-columns:1fr}
  .engine-block{grid-template-columns:1fr; gap:16px}
  .enginefoot{flex-direction:column; align-items:flex-start}
}

/* The Ads page shows the same piston, so it gets the same bullets. */
.ads-verdict .cyl-m{border-top-color:rgba(0,0,0,.10)}
.ads-verdict .cyl-m li b{color:var(--ink)}
.ads-verdict .cyl-m li span{color:var(--text-2)}
.ads-verdict .cyl-m li.no b{color:var(--text-2)}
.ads-verdict .cyl-m li.yes::before{color:var(--good)}
.ads-verdict .cyl-m li.no::before{color:var(--critical)}
.ads-verdict .cyl-m li.blind::before{color:var(--steel)}
.ads-verdict .av-s em{display:block; font:600 11px/1.4 var(--mono); font-style:normal; opacity:.75}

/* NOT KNOWN: every part of this piston came back "could not be read". The
   state underneath is still one of Mike's four, but the card must not say
   "Dead", because nothing is known to have stopped. Grey, like a blind member,
   because the console has stopped knowing rather than found a problem. */
.cyl.unknown{border-color:rgba(159,180,196,.30); background:rgba(159,180,196,.07)}
.cyl.unknown .cyl-bar span{background:#6E7B94}
.cyl.unknown .lamp{background:#9FABC4; box-shadow:none}
.cyl.unknown .cyl-t i{color:#B9CAE6}
.ads-verdict.unknown .lamp{background:var(--steel)}