/* MRD × Exergio — Commercial section: Playbook & rules (#/crm-setup). (Contacts have their own crm-contacts.css.)
 * Prefixes: .xpb- (the playbook checklist), .xset- (setup), .xlog- (the Commercial log). */

/* ---------------------------------------------------------------- playbook */
.xpb-intro{margin:0;font-size:13px;line-height:1.6;color:#3B4758;max-width:980px}
.xpb-ph{display:flex;align-items:center;gap:8px}
.xpb-sw{--c:#2a78d6;width:12px;height:12px;border-radius:3px;background:var(--c);flex:0 0 12px}
.xpb{--c:#2a78d6;list-style:none;margin:0;padding:0;counter-reset:none}
.xpb-st{position:relative;display:flex;gap:12px;padding:12px 0;border-top:1px solid #EEF1F4}
.xpb-st:first-child{border-top:0;padding-top:2px}
.xpb-n{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:#0E1726;background:color-mix(in srgb,var(--c) 18%,#fff);box-shadow:inset 0 0 0 2px var(--c)}
.xpb-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.xpb-t{display:flex;align-items:center;gap:8px 8px;flex-wrap:wrap;font-size:14px}
.xpb-t strong{font-weight:500;color:#0E1726;overflow-wrap:anywhere}
.xpb-req,.xpb-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:4px;font-size:12px;font-weight:500;white-space:nowrap}
.xpb-req{background:#0E1726;color:#fff}
.xpb-tag{background:#EEF1F5;color:#3B4758}
.xpb-tag.chg{background:#FFF4D6;color:#7A4E00}
.xpb-h{margin:0;font-size:13px;color:#5E6B7D;line-height:1.5}
.xpb-meta{display:grid;grid-template-columns:minmax(0,400px) minmax(0,220px) minmax(0,1fr);gap:8px 28px}
.xpb-m{display:flex;flex-direction:column;gap:4px;min-width:0}
.xpb-k{font-size:12px;font-weight:500;color:#5E6B7D}
.xpb-v{display:flex;align-items:center;gap:8px 8px;flex-wrap:wrap;font-size:13px;min-width:0}
.xpb-v strong{font-weight:500}
.xpb-who{width:auto;min-width:170px;max-width:100%}
.xpb-days-w{display:inline-flex;align-items:center;gap:8px}
.xpb-days{width:76px}
.xpb-now{overflow-wrap:anywhere}
.xpb-rec{display:flex;flex-direction:column;gap:4px}
.xpb-fs{display:flex;flex-wrap:wrap;gap:4px}
.xpb-f{display:inline-flex;align-items:center;min-height:22px;padding:1px 8px;border-radius:6px;font-size:12px;background:#F4F6F9;color:#3B4758;border:1px solid #E3E7EC;overflow-wrap:anywhere}
.xpb-f.need{background:#fff;border-color:#C5CCD6;color:#0E1726;font-weight:500}
.xpb-reset{align-self:flex-start}
/* Playbook editor (admins): added steps, the "Add a step here" slots, hidden standard steps */
.xpb-intro2{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 12px;border-radius:8px;background:#F4F6F9}
.xpb-intro2 svg{flex:0 0 16px;margin-top:2px;color:#2a78d6}
.xpb-tag.mrd{background:#E8F0FB;color:#1c4f8f}
.xpb-st.custom .xpb-n{background:#fff;box-shadow:inset 0 0 0 2px var(--c);border:0;outline:2px dashed color-mix(in srgb,var(--c) 45%,#fff);outline-offset:2px}
.xpb-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.xpb-mv svg{transform:rotate(180deg)}
.xpb-mv.dn svg{transform:none}
.xpb-rm{color:#A3201F}
.xpb-slot{list-style:none;margin:0;padding:0 0 0 40px;position:relative}
.xpb-slot::before{content:"";position:absolute;left:40px;right:0;top:50%;border-top:1px dashed #D5DBE3;opacity:0;transition:opacity .12s}
.xpb-slot:hover::before,.xpb-slot:focus-within::before{opacity:1}
.xpb-add{position:relative;display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 8px 0 6px;margin:-2px 0;border:0;border-radius:6px;background:#fff;color:#0B7A6B;font:inherit;font-size:12px;font-weight:500;cursor:pointer}
.xpb-add:hover{background:#EAF5F2;color:#08695C}
.xpb-add svg{flex:0 0 14px}
.xpb-slot + .xpb-st{border-top:0;padding-top:8px}
.xpb-st + .xpb-slot{border-top:1px solid #EEF1F4;padding-top:6px}
.xpb-hidden{margin-top:16px;padding-top:12px;border-top:1px solid #EEF1F4;display:flex;flex-direction:column;gap:8px}
.xpb-hidden ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.xpb-hidden li{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;font-size:13px;color:#5E6B7D}
.xpb-hidden-t{text-decoration:line-through;text-decoration-color:#B8C1CC;overflow-wrap:anywhere;min-width:0}
.xpb-hidden p{margin:0}
.xpb-where{display:flex;gap:8px;align-items:flex-start;margin:0 0 16px;padding:8px 12px;border-radius:8px;background:#F4F6F9;font-size:13px;color:#3B4758;line-height:1.45}
.xpb-where svg{flex:0 0 16px;margin-top:1px;color:#0B7A6B}
.xpb-mt{font-size:14px;font-weight:500;color:#0E1726;margin:4px 0 8px;overflow-wrap:anywhere}

/* ---------------------------------------------------------------- people */
.xset-role{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;padding:12px 0;border-top:1px solid #EEF1F4;flex-wrap:wrap}
.xset-role:first-of-type{border-top:0}
.xset-role-l{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.xset-role-l strong{font-weight:500;font-size:13px}
.xset-role-w{font-size:12px;font-weight:500;color:#7A4E00}
.xset-role-v{flex:0 1 300px;min-width:0;display:flex;justify-content:flex-end}
.xset-role-v .sel{width:300px;max-width:100%}
.xset-role-vl{flex-direction:column;align-items:flex-end;gap:4px}
.xset-role-q{text-align:right}

/* ---------------------------------------------------------------- reminders */
.xset-mail-what{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.xset-mail-what li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.55;color:#3B4758;max-width:900px}
.xset-mail-what svg{flex:0 0 18px;margin-top:2px;color:#0B7A6B}
.xset-mail-wait{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}
.xset-mail-on{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;font-size:13px;overflow-wrap:anywhere}
.xset-mail-on svg{flex:0 0 16px;margin-top:2px;color:#0A630A}
.xset-mail-card .kv{max-width:640px}
.xset-mail-card .kv .v{min-width:0}
.xset-mail-bad{color:#A32020}
.xset-mail-err,.xset-mail-sub{display:block;font-weight:400;font-size:12px;color:#5E6B7D;margin-top:2px}
.xset-mail-err{color:#A32020}
.xset-mail-steps{margin:16px 0 0;padding-left:24px;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.55;color:#3B4758;max-width:900px}
.xset-mail-steps li{overflow-wrap:anywhere}
.xset-mail-steps code{font-size:12px;background:#EEF1F5;border-radius:4px;padding:1px 4px;white-space:nowrap}
.xset-mail-test{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:16px 0 12px}
.xset-mail-test .muted{flex:1 1 260px;min-width:0}
.xset-mps{list-style:none;margin:0;padding:0}
.xset-mp{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;padding:8px 0;border-top:1px solid #EEF1F4}
.xset-mp:first-child{border-top:0;padding-top:0}
.xset-mp-n{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
.xset-mp-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.xset-mp-b strong{font-weight:500;font-size:13px;overflow-wrap:anywhere}
.xset-mp-b .muted{overflow-wrap:anywhere}
.xset-mp-s{font-size:12px;font-weight:500;color:#5E6B7D;flex:0 0 auto}
.xset-mp-s.on{color:#0B5F54}
/* An on / off switch (a real checkbox underneath, so it works with the keyboard and screen readers). */
.xset-sw{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer;font-size:12px;font-weight:500;color:#5E6B7D;min-height:32px}
.xset-sw input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.xset-sw-k{position:relative;width:38px;height:22px;border-radius:999px;background:#C5CCD6;transition:background .15s;flex:0 0 38px}
.xset-sw-k::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(14,23,38,.25);transition:transform .15s}
.xset-sw input:checked + .xset-sw-k{background:#0B7A6B}
.xset-sw input:checked + .xset-sw-k::after{transform:translateX(16px)}
.xset-sw input:checked ~ .xset-sw-t{color:#0B5F54}
.xset-sw input:focus-visible{outline:none}
.xset-sw input:focus-visible + .xset-sw-k{outline:2px solid #0B7A6B;outline-offset:2px}
.xset-sw-t{min-width:22px}

/* ---------------------------------------------------------------- calendars */
.xset-sub{font-size:12px;font-weight:500;color:#5E6B7D;margin:16px 0 8px}
.xset-cal .card-bd>.xset-sub:first-child{margin-top:0}
.xset-wd{display:flex;flex-wrap:wrap;gap:4px 16px}
.xset-wd-ro{margin:0;font-size:13px;font-weight:500}
.xset-ex{margin:12px 0 0;font-size:13px}
.xset-hols{list-style:none;margin:0;padding:0}
.xset-hols>li{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #EEF1F4;font-size:13px}
.xset-hols>li:first-child{border-top:0}
.xset-hols>li.past{color:#8A96A8}
.xset-hols>li.xset-hol-y{padding:8px 0 4px;font-size:12px;font-weight:500;color:#5E6B7D;border-top:0}
.xset-hols>li.xset-hol-y+li{border-top:0}
.xset-hol-d{flex:0 0 96px}
.xset-hol-n{flex:1;min-width:0;overflow-wrap:anywhere}
.xset-hol-help{display:flex;align-items:flex-start;gap:8px;margin-top:4px;font-size:12px;color:#3B4758;overflow-wrap:anywhere}
.xset-hol-help svg{flex:0 0 14px;margin-top:2px;color:#5E6B7D}
.xset-hol-add{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.xset-hol-add input[type=date]{flex:0 1 170px;width:auto}
.xset-hol-add input[name=name]{flex:1 1 160px;width:auto}
.xset-cal-add{display:flex;flex-wrap:wrap;gap:8px}
.xset-cal-add .inp{flex:1 1 220px;width:auto}

/* ---------------------------------------------------------------- log */
.xset-log .toolbar .sel{min-width:140px}
.xlog-w{display:flex;flex-direction:column;gap:2px;min-width:140px}
.tbl td.xlog-wrap{white-space:normal;min-width:260px}
.xlog-k{font-weight:500;color:#0E1726}
.xlog-t,.xlog-note{overflow-wrap:anywhere}
.xlog-note{white-space:pre-wrap}
.xlog-ch{margin:4px 0 0;padding-left:16px;font-size:12px;color:#3B4758}
.xlog-ch li{overflow-wrap:anywhere}
.xlog-fr{color:#8A96A8;text-decoration:line-through}

@media (max-width:1100px){
  .xpb-meta{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
}
@media (max-width:640px){
  .xset-role-v{flex:1 1 100%;justify-content:stretch}
  .xset-role-v .sel{width:100%}
  .xset-role-vl{align-items:stretch}
  .xset-role-q{text-align:left}
  .xpb-st{gap:8px}
  .xpb-slot{padding-left:36px}
  .xpb-slot::before{left:36px}
  .xset-mp{align-items:flex-start}
  .xset-log .toolbar .sel{flex:1 1 140px;min-width:0}
}

/* Rules: a line under a group heading saying what its numbers apply to */
.xset-rnote{grid-column:1/-1;display:flex;align-items:flex-start;gap:8px;margin:-4px 0 0;font-size:13px;color:#3B4758;overflow-wrap:anywhere}
.xset-rnote svg{flex:0 0 14px;margin-top:2px;color:#5E6B7D}

/* ---------------------------------------------------------------- HubSpot (Playbook & rules › HubSpot, 2026-11-07)
 * The app's own cards, notes and lists (no HubSpot look): one card per step, plain lines, a list of projects. */
.xhs-how{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.xhs-how li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.55;color:#3B4758;max-width:920px;overflow-wrap:anywhere}
.xhs-how svg{flex:0 0 16px;margin-top:2px;color:#0B7A6B}
.xhs-p{margin:0 0 12px;font-size:13px;line-height:1.55;color:#3B4758;max-width:920px;overflow-wrap:anywhere}
.xhs-wait{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}
.xhs-on{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.xhs-on svg{flex:0 0 16px;margin-top:2px;color:#0A630A}
.xhs-steps{margin:16px 0 0;padding-left:24px;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.55;color:#3B4758;max-width:920px}
.xhs-steps li{overflow-wrap:anywhere}
.xhs-steps code{font-size:12px;background:#EEF1F5;border-radius:4px;padding:1px 4px;overflow-wrap:anywhere}
.xhs-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:16px}
.xhs-acts .muted{flex:1 1 220px;min-width:0}
/* 2. what setup adds */
.xhs-plan{list-style:none;margin:0;padding:0}
.xhs-plan li{display:flex;align-items:flex-start;gap:8px 12px;padding:8px 0;border-top:1px solid #EEF1F4;font-size:13px;flex-wrap:wrap}
.xhs-plan li:first-child{border-top:0;padding-top:0}
.xhs-kind{flex:0 0 auto;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:4px;font-size:12px;font-weight:500;background:#EEF1F5;color:#3B4758;white-space:nowrap}
.xhs-plan-t{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.xhs-plan-t strong{font-weight:500}
/* 3. the projects and their HubSpot deal */
.xhs-ms{list-style:none;margin:0;padding:0}
.xhs-m{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,300px);gap:8px 20px;align-items:center;padding:12px 0;border-top:1px solid #EEF1F4}
.xhs-m:first-child{border-top:0;padding-top:0}
.xhs-m-p,.xhs-m-s,.xhs-m-d{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px;overflow-wrap:anywhere}
.xhs-m-p a{font-weight:500;color:#0E1726}
.xhs-m-d strong{font-weight:500}
.xhs-k{font-size:12px;font-weight:500;color:#5E6B7D}
.xhs-m-c{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.xhs-m-c .sel{width:100%}
.xhs-tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:4px;font-size:12px;font-weight:500;white-space:nowrap}
.xhs-tag.on{background:#E6F4EA;color:#0A630A}
.xhs-tag.new{background:#FFF4D6;color:#7A4E00}
.xhs-only{margin-top:16px;padding-top:12px;border-top:1px solid #EEF1F4;font-size:13px}
.xhs-only summary{cursor:pointer;font-weight:500;color:#0E1726;min-height:28px;display:flex;align-items:center}
.xhs-only p{margin:4px 0 8px}
.xhs-only ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto}
.xhs-only li{display:flex;flex-direction:column;gap:1px;overflow-wrap:anywhere}
.xhs-only li strong{font-weight:500}
.xhs-pick-n{margin:0 0 12px}
/* 4. sending */
.xhs-checks{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.xhs-checks li{display:flex;align-items:flex-start;gap:8px;color:#5E6B7D;overflow-wrap:anywhere}
.xhs-checks li svg{flex:0 0 14px;margin-top:3px;color:#A32020}
.xhs-checks li.ok{color:#0E1726}
.xhs-checks li.ok svg{color:#0A630A}
.xhs-sw-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:12px 0;border-top:1px solid #EEF1F4;border-bottom:1px solid #EEF1F4}
.xhs-sw-row .muted{flex:1 1 240px;min-width:0}
.xhs-sw .xset-sw-t{font-size:13px;color:#0E1726}
.xhs-sw input:disabled{cursor:not-allowed}
.xhs-sw input:disabled + .xset-sw-k{opacity:.5}
.xhs-log-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 8px}
.xhs-log-hd .xset-sub{margin:0}
.xhs-res{display:inline-flex;align-items:center;gap:4px;font-weight:500}
.xhs-res.ok{color:#0A630A}
.xhs-res.bad{color:#A32020}
.xhs-why{display:block;margin-top:2px;overflow-wrap:anywhere}
@media (max-width:900px){
  .xhs-m{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .xhs-m-c{grid-column:1/-1}
}
@media (max-width:640px){
  .xhs-m{grid-template-columns:minmax(0,1fr)}
}
.xhs-acts-top{margin:0 0 12px}
.xhs-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.xhs-notes li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#3B4758;line-height:1.5;overflow-wrap:anywhere}
.xhs-notes svg{flex:0 0 14px;margin-top:3px;color:#5E6B7D}