/* 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 colour is invented. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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