:root{
  --ink:#1c2430; --muted:#6b7684; --line:#e3e7ec; --bg:#f6f7f9; --card:#fff;
  --accent:#175cd3; --accent-dark:#0f4cb0; --danger:#b42318; --danger-bg:#fef3f2;
  --warn:#b54708; --warn-bg:#fffaeb; --ok:#067647; --ok-bg:#ecfdf3;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.topbar{background:#101828;color:#fff;padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;position:sticky;top:0;z-index:20}
.topbar .brand{font-weight:700;font-size:17px;letter-spacing:.2px;margin-right:6px}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a{color:#d0d5dd;padding:6px 10px;border-radius:6px;font-size:14px}
.topbar nav a:hover{background:#1d2939;text-decoration:none;color:#fff}
.topbar nav a.active{background:#1d2939;color:#fff}
.topbar .spacer{flex:1}
.topbar select{background:#1d2939;color:#fff;border:1px solid #344054;border-radius:6px;padding:6px 8px;font-size:14px}
.topbar .user{font-size:13px;color:#d0d5dd}
.topbar button.logout{background:transparent;border:1px solid #344054;color:#d0d5dd;border-radius:6px;
  padding:5px 10px;cursor:pointer;font-size:13px}

.wrap{max-width:1200px;margin:0 auto;padding:18px 14px 40px}
h1{font-size:22px;margin:6px 0 14px}
h2{font-size:16px;margin:22px 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.kpi .num{font-size:28px;font-weight:700;line-height:1.1}
.kpi .lbl{color:var(--muted);font-size:13px;margin-top:2px}
.kpi.alert{border-color:#fecdca;background:var(--danger-bg)}
.kpi.alert .num{color:var(--danger)}
.kpi.warn{border-color:#fedf89;background:var(--warn-bg)}
.kpi.warn .num{color:var(--warn)}
a.kpi{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.kpi:hover{border-color:var(--accent);text-decoration:none;box-shadow:0 1px 5px rgba(16,24,40,.12)}

/* tables & lists */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600}
.badge.open{background:#eef4ff;color:var(--accent-dark)}
.badge.in_progress{background:#fffaeb;color:var(--warn)}
.badge.blocked{background:var(--danger-bg);color:var(--danger)}
.badge.done{background:var(--ok-bg);color:var(--ok)}
.badge.overdue{background:var(--danger-bg);color:var(--danger)}
.badge.prio-urgent{background:var(--danger-bg);color:var(--danger)}
.badge.prio-high{background:#fffaeb;color:var(--warn)}

/* forms & buttons */
button,.btn{background:var(--accent);color:#fff;border:none;border-radius:7px;padding:8px 14px;
  font-size:14px;cursor:pointer;display:inline-block}
button:hover,.btn:hover{background:var(--accent-dark);text-decoration:none}
button.secondary,.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
button.secondary:hover{background:#f2f4f7}
button.small{padding:4px 9px;font-size:12.5px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;
  font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
label{font-size:13px;font-weight:600;color:var(--muted);display:block;margin:10px 0 4px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.error{background:var(--danger-bg);color:var(--danger);border:1px solid #fecdca;border-radius:8px;
  padding:9px 12px;font-size:14px;margin-bottom:12px;display:none}
#msg, #dMsg{background:var(--ok-bg);color:var(--ok);border:1px solid #a6f4c5;border-radius:8px;
  padding:9px 12px;font-size:14px;margin-bottom:12px;display:none}

/* kanban */
.board{margin-bottom:26px}
.board h2{margin-bottom:4px}
.board .entity-tag{color:var(--muted);font-size:13px;font-weight:400}
.columns{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 12px;align-items:flex-start}
.column{background:#eef1f4;border-radius:10px;min-width:240px;width:240px;padding:10px;flex-shrink:0}
.column h3{margin:2px 2px 10px;font-size:13.5px;color:#344054;display:flex;justify-content:space-between}
.column h3 .cnt{color:var(--muted);font-weight:400}
.deal{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin-bottom:9px;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.deal .t{font-weight:600;font-size:14px}
.deal .v{color:var(--ok);font-weight:600;font-size:13.5px;margin-top:2px}
.deal .n{color:var(--muted);font-size:12.5px;margin-top:3px}
.deal .c{color:var(--muted);font-size:12.5px}
.deal .moves{display:flex;gap:6px;margin-top:8px}
.deal .moves button{background:#f2f4f7;color:#344054;border:1px solid var(--line);padding:3px 8px;font-size:12px}
.deal .moves button:hover{background:#e4e7ec}
.deal.dragging{opacity:.5}
/* mos146: the pipeline card action row — one compact fixed-height
   row of line icons (Call · Text · Notes · Documents · Tasks ·
   Appointment) with blue count badges, plus the contact initials
   avatar beside the card name (Jacob's reference card). */
.deal-avatar{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#eef4ff;
  color:var(--accent-dark);font-size:10.5px;font-weight:700;
  margin-right:6px;vertical-align:-6px}
.deal-actions{display:flex;gap:2px;margin-top:8px;padding-top:7px;
  border-top:1px solid var(--line)}
.deal-act{position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:30px;height:26px;border-radius:6px;
  background:transparent;border:none;color:#667085;padding:0;cursor:pointer}
.deal-act svg{width:16px;height:16px}
a.deal-act{text-decoration:none}
.deal-act:hover{background:#eef4ff;color:var(--accent-dark)}
.deal-act.is-off{opacity:.35;cursor:default}
.deal-act.is-off:hover{background:transparent;color:#667085}
.deal-badge{position:absolute;top:-4px;right:-2px;min-width:15px;
  height:15px;border-radius:999px;background:var(--accent);color:#fff;
  font-size:9.5px;font-weight:700;line-height:15px;text-align:center;
  padding:0 4px;box-sizing:border-box}
.card-text-card .msg-flow{max-height:46vh;overflow-y:auto}
.column.dragover{outline:2px dashed var(--accent);outline-offset:-4px}
/* pointer drag (mos14) */
.deal{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.deal.drag-src{opacity:.35}
.drag-clone{position:fixed;z-index:1000;pointer-events:none;margin:0;cursor:grabbing;
  box-shadow:0 14px 30px rgba(16,24,40,.28);transform:rotate(2deg) scale(1.02)}
.drop-line{height:5px;border-radius:3px;background:var(--accent);margin-bottom:9px}
body.dragging-board{cursor:grabbing}
body.dragging-board .column{min-height:170px}

/* timeline */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{border-left:3px solid var(--line);padding:2px 0 12px 14px;position:relative}
.timeline li::before{content:"";position:absolute;left:-6px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.timeline .meta{color:var(--muted);font-size:12.5px}
.timeline .kind{font-weight:700;text-transform:capitalize}
.empty{color:var(--muted);font-size:14px;padding:8px 0}

/* conversations inbox */
.unread-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--danger);
  margin-right:7px;vertical-align:middle;flex-shrink:0}
.inbox{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:14px;align-items:start}
@media (max-width:820px){ .inbox{grid-template-columns:1fr} }
.thread-list{padding:6px}
.trow{display:block;width:100%;text-align:left;background:transparent;color:var(--ink);border:none;
  border-bottom:1px solid var(--line);padding:10px 10px;border-radius:0;cursor:pointer}
.trow:hover{background:#f2f4f7}
.trow.selected{background:#eef4ff}
.trow .t-head{display:flex;align-items:baseline;gap:8px}
.trow .t-name{font-weight:600;font-size:14.5px}
.trow.unread .t-name{font-weight:700}
.trow .t-time{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.trow .t-prev{color:var(--muted);font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.trow.unread .t-prev{color:var(--ink)}
.badge.sms{background:#fdf6e3;color:#8a6d00}
.badge.email{background:#eef4ff;color:var(--accent-dark)}
.badge.call{background:var(--ok-bg);color:var(--ok)}
.badge.note{background:#eef1f4;color:#344054}
.msg-flow{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.msg{max-width:78%;padding:8px 12px;border-radius:12px;font-size:14px;white-space:pre-wrap;
  overflow-wrap:anywhere}
.msg .m-meta{display:block;color:var(--muted);font-size:11.5px;margin-top:4px}
.msg.in{align-self:flex-start;background:#eef1f4;border-bottom-left-radius:3px}
.msg.out{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:3px}
.msg.out .m-meta{color:#cfdefc}
.msg .m-delivery{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.msg.out .m-delivery{color:#cfdefc}
.msg .m-delivery.failed{color:var(--danger);font-weight:600}
.msg.out .m-delivery.failed{color:#ffc9c0}
.msg.note{align-self:center;background:var(--warn-bg);color:var(--warn);font-style:italic;
  max-width:92%;text-align:center}
.login-box{max-width:380px;margin:9vh auto;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:26px 24px}

/* calendar */
.badge.scheduled{background:#eef4ff;color:var(--accent-dark)}
.badge.showed{background:var(--ok-bg);color:var(--ok)}
.badge.no_show{background:var(--danger-bg);color:var(--danger)}
.badge.cancelled{background:#eef1f4;color:var(--muted)}
.badge.rescheduled{background:#fffaeb;color:var(--warn)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;text-align:center;padding:2px 0}
.cal-cell{border:1px solid var(--line);border-radius:8px;min-height:88px;padding:5px 6px;
  background:#fff;cursor:pointer;overflow:hidden}
.cal-cell:hover{border-color:var(--accent)}
.cal-cell.other{background:#fafbfc;color:var(--muted)}
.cal-cell.today{outline:2px solid var(--accent);outline-offset:-2px}
.cal-cell.selected{background:#eef4ff}
.cal-cell .dnum{font-size:12.5px;font-weight:600;margin-bottom:3px}
.appt-chip{display:block;font-size:11.5px;line-height:1.35;padding:2px 5px;border-radius:5px;
  margin-bottom:3px;background:#eef4ff;color:var(--accent-dark);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.appt-chip.showed{background:var(--ok-bg);color:var(--ok)}
.appt-chip.no_show{background:var(--danger-bg);color:var(--danger)}
.appt-chip.rescheduled{background:#fffaeb;color:var(--warn)}
.appt-chip.cancelled{background:#eef1f4;color:var(--muted);text-decoration:line-through}
/* calendar view switcher + day columns (mos25) */
.view-switch{display:inline-flex;margin-left:10px;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;vertical-align:middle}
.view-switch button{border:0;border-radius:0}
.view-switch button.active{background:var(--accent);color:#fff}
.view-switch button.active:hover{background:var(--accent-dark)}
.cal-col-head{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;text-align:center;padding:2px 0;cursor:pointer;border-radius:6px}
.cal-col-head .dnum{display:block;font-size:16px;font-weight:700;color:var(--ink);
  text-transform:none;letter-spacing:0}
.cal-col-head.today .dnum{color:var(--accent)}
.cal-col-head.selected{background:#eef4ff}
.cal-col{border:1px solid var(--line);border-radius:8px;min-height:180px;padding:5px 6px;
  background:#fff;cursor:pointer;overflow:hidden}
.cal-col:hover{border-color:var(--accent)}
.cal-col.today{outline:2px solid var(--accent);outline-offset:-2px}
.cal-col.selected{background:#eef4ff}
.appt-row{display:block;font-size:11.5px;line-height:1.35;padding:3px 5px;border-radius:5px;
  margin-bottom:3px;background:#eef4ff;color:var(--accent-dark);cursor:pointer;overflow:hidden}
.appt-row .who{display:block;font-size:10.5px;opacity:.75;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.appt-row.showed{background:var(--ok-bg);color:var(--ok)}
.appt-row.no_show{background:var(--danger-bg);color:var(--danger)}
.appt-row.rescheduled{background:#fffaeb;color:var(--warn)}
.appt-row.cancelled{background:#eef1f4;color:var(--muted);text-decoration:line-through}
select.status-sel{width:auto;padding:2px 6px;font-size:12.5px;border-radius:6px}
/* modal (mos13) */
.modal-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:5vh 12px}
.modal-card{background:#fff;border-radius:12px;max-width:560px;width:100%;
  padding:22px 24px;box-shadow:0 18px 50px rgba(16,24,40,.35)}
.modal-card h3{margin:0 0 14px}
/* mos81: wide variant for the swept create forms whose fields need
   the room (calendar rules, e-sign envelope) — same card, more width. */
.modal-wide{max-width:920px}
/* mos114: the quick-look preview modal — wider than a form card,
   body scrolls inside, fits a 390px phone with no page h-scroll. */
.preview-card{max-width:860px}
.preview-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:12px}
.preview-head h3{margin:0;word-break:break-word}
.preview-body{max-height:68vh;overflow:auto}
.preview-img{display:block;max-width:100%;height:auto;margin:0 auto}
.preview-embed{display:block;width:100%;height:62vh;border:none}
.preview-text{white-space:pre-wrap;word-break:break-word;margin:0;
  font-size:12.5px;line-height:1.5}
.preview-note{background:#fef9e7;border:1px solid #f5d98b;border-radius:7px;
  padding:7px 10px;font-size:12.5px;margin:0 0 12px}
.preview-p{margin:0 0 10px;line-height:1.55}
.preview-h{margin:16px 0 8px}
.preview-foot{display:flex;gap:8px;align-items:center;margin-top:14px}
/* mos154: spreadsheet table preview + honest fallback panel */
.preview-tablewrap{overflow:auto;max-height:62vh}
.preview-table{border-collapse:collapse;font-size:13px}
.preview-table td{border:1px solid var(--line);padding:4px 8px;
  white-space:nowrap}
.preview-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.preview-fallback{text-align:center;padding:28px 12px}
.preview-fallback-icon{font-size:40px;line-height:1.2}
.preview-fallback-name{font-weight:600;word-break:break-word;margin:8px 0 2px}
.preview-foot a.btn{text-decoration:none}
/* mos72: the shared confirm popup (MOS.confirmDelete) + the inbox
   filing buttons. The danger variant is for permanent deletes only;
   Remove/Archive-level actions keep the primary/neutral styles. */
.mos-confirm{max-width:460px}
.mos-confirm-body{margin:0;color:#344054;line-height:1.5}
.mos-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
button.danger-btn{background:var(--danger)}
button.danger-btn:hover{background:#912018}
.inbox-file-btn{margin-left:8px;color:#344054;border:1px solid var(--line);
  background:#fff;border-radius:7px;padding:5px 10px;font-weight:600;cursor:pointer}
.inbox-file-btn:hover{background:#f2f4f7;color:#344054}
.perm-del-btn{color:#b42318;border:1px solid #fecdca;background:#fef3f2;
  border-radius:7px;padding:6px 12px;font-weight:600;cursor:pointer}
.perm-del-btn:hover{background:#fee4e2}
.past-appt{opacity:.6}
.done-task{opacity:.65}
@media (max-width:640px){ .cal-cell{min-height:62px;padding:4px} .appt-chip{font-size:10.5px} .cal-col{min-height:120px;padding:4px} .appt-row{font-size:10.5px} .view-switch{margin-left:0} }
/* users & permissions (mos10) */
.perm-grid td,.perm-grid th{text-align:center}
.perm-grid td:first-child,.perm-grid th:first-child{text-align:left}
.perm-grid input[type=checkbox]{width:18px;height:18px}
.inline-check{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--ink);
  margin:8px 0;text-transform:none;letter-spacing:0;font-size:14px}
.inline-check input[type=checkbox]{width:18px;height:18px;flex-shrink:0}
.badge.inactive{background:#eef1f4;color:var(--muted)}
.login-box h1{margin-top:0}
.check{display:flex;gap:10px;align-items:flex-start}
.check input[type=checkbox]{width:18px;height:18px;margin-top:2px;flex-shrink:0}
.strike{color:var(--muted);text-decoration:line-through}
.small{font-size:12.5px;color:var(--muted)}
@media (max-width:640px){ .kpi .num{font-size:23px} table{font-size:13px} }

/* finance (mos20): trailing-12 expense bars on the Finance page */
.fin-bars{display:flex;align-items:flex-end;gap:8px;overflow-x:auto;padding-top:4px}
.fin-bar-col{flex:1 0 52px;text-align:center}
.fin-bar-num{font-size:11px;color:var(--muted);min-height:14px}
.fin-bar{background:var(--accent);border-radius:4px 4px 0 0;margin:2px auto 0;width:70%}
.fin-bar-lbl{font-size:11px;color:var(--muted);margin-top:4px}
/* mos26b: projected bars are GHOSTS — striped fill + dashed outline,
   never the solid of an actual, so a projection can never be mistaken
   for money that exists. Paired bars sit side by side in one column:
   actual solid on the left, projected ghost on the right. */
.fin-bar.proj{background:repeating-linear-gradient(45deg,rgba(23,92,211,.38) 0 5px,rgba(23,92,211,.07) 5px 10px);
  border:1.5px dashed var(--accent);border-bottom:none}
.fin-bar-pair{display:flex;gap:4px;align-items:flex-end;justify-content:center}
.fin-bar-pair .fin-bar{margin:2px 0 0;width:32%}
.fin-legend{font-size:12.5px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.fin-legend .sw{display:inline-block;width:14px;height:10px;border-radius:2px;background:var(--accent);
  vertical-align:middle;margin-right:5px}
.fin-legend .sw.proj{background:repeating-linear-gradient(45deg,rgba(23,92,211,.38) 0 4px,rgba(23,92,211,.07) 4px 8px);
  border:1px dashed var(--accent)}
.badge.proj{background:#eef4ff;color:var(--accent-dark);border:1px dashed var(--accent)}
td.proj-cell{background:#fbfcfe;color:var(--muted)}

/* notes boxes (mos29): every notes/description field is a real box —
   wide, corner-resizable, auto-growing while you type (app.js), and
   notes render in full wherever they're displayed. */
textarea.notesbox{resize:both;min-height:66px;line-height:1.45}
.notes-full{white-space:pre-wrap;overflow-wrap:break-word}

/* universal attachments (mos27) */
.attach-box{border:1px dashed transparent;border-radius:8px;padding:6px}
.attach-box.attach-drop{border-color:var(--accent);background:#eef4ff}
.attach-pickrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
/* mos124: the contact page's full-page drop target — armed by
   dragging a file anywhere over the page. */
.page-drop-overlay{position:fixed;inset:0;z-index:80;background:rgba(16,24,40,.45);
  display:flex;align-items:center;justify-content:center}
.page-drop-card{background:#fff;border:2px dashed var(--accent);border-radius:12px;
  padding:28px 36px;font-size:18px;font-weight:600;color:var(--accent-dark)}
.attach-row{display:flex;gap:10px;align-items:flex-start;padding:7px 0;
  flex-wrap:wrap;border-bottom:1px solid var(--line)}
.attach-row:last-child{border-bottom:none}
.attach-main{flex:1;min-width:0;flex-basis:150px;overflow-wrap:break-word}
/* mos154: the file name gets ONE line with an ellipsis (full name
   on hover via the title attribute) -- a long unbroken name used
   to wrap one character per line in narrow panes while the row's
   buttons ate the width; with flex-wrap on the row the buttons now
   drop to their own line instead of crushing the name. */
.attach-view a{display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.attach-thumb{width:56px;height:56px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line);display:block}
.attach-edit{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.attach-edit .attach-name{width:auto;min-width:160px;flex:1}
.attach-ext{color:var(--muted);font-size:13px}
.attach-controls{margin-top:10px}
.attach-strip .attach-row{padding:4px 0}
.attach-strip .attach-thumb{width:36px;height:36px}
/* mos106: album grouping, survey slots, version badges */
.attach-album-head{font-weight:600;font-size:13px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin:12px 0 2px}
.attach-filing{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  margin-top:6px}
.attach-slots{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.slot-chip{display:inline-flex;gap:6px;align-items:center;font-size:12px;
  border:1px solid var(--border,#d0d5dd);border-radius:999px;
  padding:2px 9px 2px 3px;color:inherit;text-decoration:none}
.slot-chip img{width:22px;height:22px;object-fit:cover;border-radius:50%}
.slot-chip.missing{color:var(--muted);border-style:dashed;padding-left:9px}
.badge-superseded{background:#eaecf0;border-radius:4px;padding:0 5px;
  font-size:11px}
.badge-current{background:#dcfae6;border-radius:4px;padding:0 5px;
  font-size:11px}
tr.attach-drop-row td, .attach-drop-row{background:#eef4ff !important;
  outline:2px dashed var(--accent);outline-offset:-4px}

/* inline edit (mos31): values on record pages edit where they sit.
   .inline-val is added by app.js only for users who may edit — for
   everyone else the value is plain text with no affordance at all. */
.inline-val{cursor:pointer;border-radius:4px}
.inline-val:hover{background:#eef4ff;box-shadow:0 0 0 3px #eef4ff}
.inline-val:not(:has(.inline-pencil)):hover::after{content:" ✎";
  color:var(--accent);font-size:.85em}
h1.inline-val:hover::after{font-size:.45em}
.inline-pencil{display:none;color:var(--accent);font-size:.85em}
.inline-val .inline-pencil{display:inline}
.inline-val.inline-open{cursor:default;background:transparent;box-shadow:none}
.inline-val.inline-open::after{content:none}
.inline-ed{display:inline-flex;gap:6px;align-items:flex-start;flex-wrap:wrap;
  max-width:100%}
.inline-ed .inline-input{width:auto;min-width:180px}
.inline-ed textarea.inline-input{min-width:280px;width:100%}
.inline-ed input[type="date"].inline-input{min-width:150px}
.inline-err{color:var(--danger);font-size:12.5px;flex-basis:100%}
.inline-saved{color:var(--ok);font-size:12.5px;font-weight:600;margin-left:8px}

/* CSV import (mos17): the drop zone mirrors the attachment drop
   highlight; mapping rows carry their state as a tinted first cell —
   green when mapped, amber while unmapped, grey when deliberately
   skipped, red when the same field is claimed twice. */
.import-drop{border:2px dashed var(--line);border-radius:10px;
  padding:28px 16px;text-align:center;cursor:pointer}
.import-drop.over{border-color:var(--accent);background:#eef4ff}
.map-table td.samples{color:var(--muted);font-size:13px;max-width:340px;
  overflow-wrap:break-word}
.map-table tr td:first-child{border-left:4px solid transparent}
.map-table tr.map-mapped td:first-child{border-left-color:var(--ok)}
.map-table tr.map-unmapped td:first-child{border-left-color:#fedf89}
.map-table tr.map-unmapped{background:var(--warn-bg)}
.map-table tr.map-skipped{opacity:.55}
.map-table tr.map-dup td:first-child{border-left-color:var(--danger)}
.map-table tr.map-dup{background:var(--danger-bg)}
.import-summary .num{font-size:22px;font-weight:700}

/* Receipts (mos21): thumbnail + list card on the receipts page. */
.receipt-thumb{max-width:140px;max-height:140px;border-radius:8px;border:1px solid var(--line)}
.receipt-card{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.receipt-card:last-child{border-bottom:0}

/* Invoices (mos22): status chips follow the spec's colours — Sent
   blue, Overdue red, Verified Paid green, Draft grey, Void struck —
   plus the direction tabs on the board. */
.badge.inv-sent{background:#eef4ff;color:var(--accent-dark)}
.badge.inv-overdue{background:var(--danger-bg);color:var(--danger)}
.badge.inv-paid{background:var(--ok-bg);color:var(--ok)}
.badge.inv-draft{background:#eef1f4;color:#344054}
.badge.inv-void{background:#eef1f4;color:var(--muted);text-decoration:line-through}

/* E-sign (mos24): envelope status chips — Draft grey, Sent blue,
   Viewed purple, Signed green, Declined red, Expired grey, Void
   struck — plus the script face used for typed signatures. */
.badge.es-draft{background:#eef1f4;color:#344054}
.badge.es-sent{background:#eef4ff;color:var(--accent-dark)}
.badge.es-viewed{background:#f4f0ff;color:#6941c6}
.badge.es-signed{background:var(--ok-bg);color:var(--ok)}
.badge.es-declined{background:var(--danger-bg);color:var(--danger)}
.badge.es-expired{background:#eef1f4;color:var(--muted)}
.badge.es-void{background:#eef1f4;color:var(--muted);text-decoration:line-through}
.sig-script{font-family:'Segoe Script','Brush Script MT','Lucida Handwriting',cursive}
.dir-tabs{display:flex;gap:8px;margin:0 0 12px}
.dir-tabs button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.over-budget{color:var(--danger);font-weight:700}

/* Documents (mos23): the vault reuses the .attach-row shape; these are
   the extras — a kind-icon box for non-image files, the Unallocated
   bucket's accent edge, the inline move panel, and the merged
   one-card Timeline's add-form divider on the contact page. */
.doc-icon{width:56px;height:56px;flex:none;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--line);border-radius:6px;
  background:#eef1f4;color:#344054;font-size:11px;font-weight:700;
  text-transform:uppercase;text-decoration:none}
.card.unallocated{border-left:4px solid #f79009}
.doc-move{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.timeline-add{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}

/* Team inbox (mos32): the Conversations tab as a 3-pane inbox —
   list | thread | contact details. Desktop-first; the details pane
   drops below the thread on medium screens and everything stacks on
   narrow ones. Panes keep the house .card chrome; message bubbles and
   channel badges are the mos6 ones above. */
.wrap-wide{max-width:1440px}
.inbox3{display:grid;grid-template-columns:330px minmax(0,1fr) 320px;gap:14px;align-items:start}
@media (max-width:1120px){
  .inbox3{grid-template-columns:300px minmax(0,1fr)}
  .col-details{grid-column:1/-1}
}
@media (max-width:760px){
  .inbox3{grid-template-columns:minmax(0,1fr)}
  .col-details{grid-column:auto}
}
.col-list{padding:0;overflow:hidden}
.inbox-title{font-size:16px;font-weight:700;padding:12px 14px 8px}
.inbox-tabs{display:flex;gap:2px;padding:0 8px;border-bottom:1px solid var(--line)}
.inbox-tab{background:transparent;color:var(--muted);border:none;border-radius:7px 7px 0 0;
  padding:7px 10px;font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px}
.inbox-tab:hover{background:#f2f4f7;color:var(--ink)}
.inbox-tab.active{color:var(--accent-dark);box-shadow:inset 0 -2px 0 var(--accent)}
.tab-cnt{background:var(--danger);color:#fff;border-radius:999px;font-size:11px;font-weight:700;
  min-width:19px;height:19px;line-height:19px;text-align:center;padding:0 5px}
.inbox-search{padding:10px 12px;border-bottom:1px solid var(--line)}
.inbox-search input{margin:0}
.trows{max-height:56vh;overflow-y:auto}
@media (max-width:760px){ .trows{max-height:none} }
.trow2{display:flex;gap:10px;width:100%;text-align:left;background:transparent;color:var(--ink);
  border:none;border-bottom:1px solid var(--line);padding:10px 12px;border-radius:0;cursor:pointer;
  font-size:14px;align-items:flex-start}
.trow2:hover{background:#f2f4f7}
.trow2.selected{background:#eef4ff}
.trow2 .t-main{flex:1;min-width:0}
.trow2 .t-head{display:flex;align-items:baseline;gap:8px}
.trow2 .t-name{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow2.unread .t-name{font-weight:700}
.trow2 .t-time{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap;flex-shrink:0}
.trow2 .t-prev{display:block;color:var(--muted);font-size:13px;margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.trow2.unread .t-prev{color:var(--ink)}
.trow2 .t-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.avatar{width:38px;height:38px;border-radius:50%;background:#eef4ff;color:var(--accent-dark);
  font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0}
.avatar .chan{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:1px solid var(--line);font-size:10px;line-height:1;display:flex;
  align-items:center;justify-content:center}
.avatar.lg{width:52px;height:52px;font-size:19px}
.unread-badge{background:var(--danger);color:#fff;border-radius:999px;font-size:11px;font-weight:700;
  min-width:19px;height:19px;line-height:19px;text-align:center;padding:0 5px}
.star-btn{background:transparent;border:none;color:#98a2b3;font-size:17px;line-height:1;
  padding:1px 3px;cursor:pointer;border-radius:5px}
.star-btn:hover{background:#eef1f4;color:#f79009}
.star-btn.on{color:#f79009}
.trash-btn{background:transparent;border:none;color:#98a2b3;font-size:14px;line-height:1;
  padding:1px 3px;cursor:pointer;border-radius:5px}
.trash-btn:hover{background:#fef3f2;color:var(--danger)}
.fail-dot{color:var(--danger);font-size:12px;margin-left:6px}
.retry-link{background:none;border:none;padding:0;margin-left:6px;color:inherit;
  text-decoration:underline;cursor:pointer;font-size:12px;font-weight:600}
.col-thread{display:flex;flex-direction:column;padding:0;overflow:hidden}
.thread-head{display:flex;gap:11px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.thread-head .th-name{font-weight:700;font-size:16px}
.thread-head .th-sub{color:var(--muted);font-size:13px}
.thread-subject{padding:8px 16px 0;font-weight:600}
.col-thread .msg-flow{padding:14px 16px;overflow-y:auto;max-height:52vh;margin-bottom:0}
@media (max-width:760px){ .col-thread .msg-flow{max-height:none} }
.day-pill{align-self:center;background:#eef1f4;color:var(--muted);border-radius:999px;
  padding:2px 12px;font-size:12px;font-weight:600;margin:6px 0 2px}
.composer{border-top:1px solid var(--line);padding:10px 16px 12px;background:#fbfcfe}
.composer .form-grid{grid-template-columns:170px 1fr}
/* Unified contact stream (mos34): one chronological stream per contact
   across every channel, one send box, logging only for conversations
   that happened outside the system. */
.inbox-title{display:flex;align-items:center}
.msg.logline{align-self:center;background:transparent;color:var(--muted);font-size:12.5px;
  max-width:92%;text-align:center;padding:2px 10px}
.msg.logline .m-meta{display:inline;margin:0 0 0 6px}
.msg.flash{outline:2px solid var(--accent);outline-offset:2px}
.composer-box{border-top:1px solid var(--line);padding:10px 16px 12px;background:#fbfcfe}
.composer-top{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.composer-top label{margin-bottom:4px}
.composer-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.logbox{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}
.logbox .form-grid{grid-template-columns:1fr 1fr}
.col-details{padding:14px 16px}
.cd-head{display:flex;gap:11px;align-items:center;margin-bottom:6px}
.cd-head .cd-name{font-size:17px;font-weight:700;line-height:1.25}
.cd-head .cd-ent{color:var(--muted);font-size:13px}
.cd-fields{font-size:13.5px}
.cd-fields th{width:82px;text-transform:none;letter-spacing:0;font-size:12.5px;padding:6px 6px 6px 0}
.cd-fields td{padding:6px 0}
.cd-sec{margin-top:14px}
.cd-sec h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  margin:0 0 6px}
.cd-sec ul{list-style:none;margin:0;padding:0;font-size:13.5px}
.cd-sec li{padding:3px 0;border-bottom:1px solid var(--line)}
.cd-sec li:last-child{border-bottom:0}
.cd-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* -- mos134: the Conversations details pane wraps long values
   inside its rail instead of flowing off-screen — the same
   treatment the contact page's left pane carries (.contact3
   .cpane-left, below): fixed table layout so an unbroken value
   can't push the columns wider, cells wrap anywhere, and the
   pane itself is capped at its grid track so no future field
   can re-break it. Covers every field in the pane: website (a
   100+ char unbroken Enerflo URL was the proven case), email,
   address, notes, company, title, the More-ways-to-reach list
   and the group view's participant names. The URL stays fully
   visible and tappable — wrapped, never truncated. -- */
.col-details{min-width:0;max-width:100%}
.col-details p,.col-details li{overflow-wrap:anywhere}
.cd-head .cd-name,.cd-head .cd-ent{overflow-wrap:anywhere}
.cd-fields{table-layout:fixed;width:100%}
.cd-fields td{overflow-wrap:anywhere;min-width:0}
.cd-fields td select{min-width:0;max-width:100%}
@media (max-width:1150px){
  /* stays a real (wrapping) table where other tables go
     block-scroll — same counter-rule as .contact3's below */
  .cd-fields{display:table}
}

/* Contact page (mos36): GHL-style three panes — details | stream |
   quick panels. Fixed panes on desktop, each scrolling internally so
   the page itself barely scrolls; everything about the contact is one
   click from the center. Stacks vertically on narrow screens. */
.contact3{display:grid;grid-template-columns:350px minmax(0,1fr) 330px;gap:14px;
  align-items:stretch;height:calc(100vh - 126px)}
.contact3 .cpane{overflow-y:auto;min-height:0;min-width:0}
.contact3 .cpane-left{padding-right:2px}
.contact3 .cpane-left h1{margin-top:0}
.contact3 .cpane-mid{display:flex;flex-direction:column;margin-bottom:0}
.contact3 .cpane-mid .msg-flow{flex:1;max-height:none;margin-bottom:0}
.contact3 .cpane-right .card{margin-bottom:0}
@media (max-width:1120px){
  .contact3{grid-template-columns:300px minmax(0,1fr);height:auto}
  .contact3 .cpane{overflow:visible}
  .contact3 .cpane-right{grid-column:1/-1}
  .contact3 .cpane-mid .msg-flow{flex:none;max-height:52vh}
}
@media (max-width:760px){
  .contact3{grid-template-columns:minmax(0,1fr)}
  .contact3 .cpane-mid .msg-flow{max-height:none}
}
/* Quick panels: the button stack is always in reach; one panel open
   at a time beneath it. Counts ride on the buttons themselves. */
.qp-buttons{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.qp-btn{display:flex;justify-content:space-between;align-items:center;width:100%;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:7px;
  padding:8px 12px;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.qp-btn:hover{background:#f2f4f7}
.qp-btn.active{background:#eef4ff;border-color:var(--accent);color:var(--accent-dark)}
.qp-cnt{background:#eef1f4;color:#344054;border-radius:999px;padding:0 8px;
  font-size:12px;font-weight:700;line-height:19px;min-width:19px;text-align:center}
.qp-btn.active .qp-cnt{background:#fff}
.qp-panel{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
/* mos142 — drag-to-reorder handles + drop indicator (contact page
   module stacks). The handle is the ONLY drag starter; the module
   itself is draggable only while a handle drag is armed (JS). The
   qp button keeps its label left and count right with the handle
   in front (justify-content moves to the count's margin). */
.qp-btn{justify-content:flex-start;gap:8px}
.qp-btn .qp-cnt{margin-left:auto}
.mod-drag-handle{flex:none;cursor:grab;color:var(--muted);font-size:13px;
  line-height:1;padding:2px 3px;border-radius:5px;user-select:none;
  -webkit-user-select:none;touch-action:none}
.mod-drag-handle:hover{color:var(--ink);background:#eef1f4}
.mod-drag-handle:active{cursor:grabbing}
.mod-dragging{opacity:.45}
.mod-drop-before{box-shadow:0 -3px 0 0 var(--accent)}
.mod-drop-after{box-shadow:0 3px 0 0 var(--accent)}
/* mos143 — Manage-fields panel rows (contacts list): one row per
   field, handle/lock first, checkbox + label after; the dragged row
   and the drop bar reuse the mos142 classes above. */
.mf-row{display:flex;align-items:center;gap:8px;padding:5px 8px;
  border:1px solid var(--line);border-radius:7px;margin-bottom:5px;background:#fff}
.mf-row label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:14px}
.mf-lock,.mf-spacer{flex:none;width:19px;text-align:center;font-size:12px}
.qp-panel h2{margin-top:0}

/* mos37: dashboard widget boxes — the dashboard's same data in a
   compact grid of titled boxes (GHL-style) instead of full-width
   stacked cards. Stat tiles shrink; boxes size to their content. */
.dw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:10px}
.dw-stats .kpi{padding:9px 11px}
.dw-stats .kpi .num{font-size:21px}
.dw-stats .kpi .lbl{font-size:12px;margin-top:1px}
.dw-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
@media (min-width:960px){.dw-grid{grid-template-columns:1fr 1fr}
  .dw-span2{grid-column:1/-1}}
.dw-stack{display:flex;flex-direction:column;gap:12px}
/* mos140: the dashboard's half-width cards flow in two INDEPENDENT
   column stacks, not one shared-row grid. In a grid, the next card
   in a column cannot start until the tallest card in its row ends —
   beside a tall pipelines card, a short card's column sat empty
   (page background showing through: the dashboard "gray space").
   Each .dw-col now stacks its own cards 12px apart; one column's
   heights never move the other column's cards. */
.dw-flow{display:flex;flex-direction:column;gap:12px}
/* mos145: BOTH dashboard roots are 12px-gap column stacks, so EVERY
   vertical gap between cards — full-width to full-width, full-width
   to a column run, and a run to the card that follows it — is the
   one standard 12px. Before this, the custom board (#dashCustom)
   had no spacing system at all: its 12px gaps came only from the
   stat strip's and the cal3 box's own margin-bottom (both removed
   above/below so they cannot double up with this gap), and every
   other transition — including a half-width run to the full-width
   card under it (the bottom transition Jacob flagged) — was 0px.
   The default board's own transitions ride this same gap (its
   inner .dw-flow stack already gapped its children 12px). */
#dashDefault,#dashCustom{display:flex;flex-direction:column;gap:12px}
.dw-cols{display:flex;flex-direction:column;gap:12px}
.dw-col{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:960px){.dw-cols{flex-direction:row}
  .dw-col{flex:1 1 0}}
.dw-box{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:13px 15px}
.dw-title{font-size:15px;margin:0 0 9px}
.dw-title a{color:inherit}
.dw-title a:hover{color:var(--accent);text-decoration:underline}
.dw-box .empty{padding:2px 0}
.dw-box table{width:100%}
/* mos136: build-your-own Dashboard — the Customize bar, edit-mode
   widget controls (tappable targets, never drag-only) and the
   add-a-widget picker groups. */
.dash-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-head h1{margin:6px 0}
.dash-editbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--warn-bg);border:1px solid var(--warn);
  border-radius:10px;padding:9px 12px;margin-bottom:12px}
.dash-editbar .grow{flex:1}
.dash-root-editing .dw-widget{outline:2px dashed var(--accent);
  outline-offset:2px}
.dw-wctl{display:flex;gap:6px;align-items:center;margin:0 0 9px}
.dw-wctl button{min-width:42px;min-height:38px;padding:4px 10px;
  font-size:14px}
.dw-wctl .spacer{flex:1}
/* mos141: per-tile controls inside the stat strip (customize
   mode only) — small ◀ ▶ ✕ buttons riding the tile's top-right
   corner; the tile itself is position:relative so they anchor. */
.dw-stats .kpi{position:relative}
.dw-tctl{position:absolute;top:4px;right:4px;display:inline-flex;gap:3px}
.dw-tctl button{min-width:24px;min-height:22px;padding:0 5px;
  font-size:11px;line-height:1;border-radius:6px}
.dw-widget-stats{margin-bottom:12px}
.dw-picker-group{font-size:12px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin:14px 0 6px}
.dw-picker-item{display:flex;align-items:center;gap:8px;width:100%;
  text-align:left;padding:10px 12px;margin:0 0 6px;min-height:44px}
.dw-picker-item .added{margin-left:auto;color:var(--muted);
  font-size:12px}
.dw-pipe{margin-bottom:13px}
.dw-pipe:last-child{margin-bottom:0}
.dw-pipe-head{display:flex;align-items:baseline;gap:7px;
  border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:6px}
.dw-pipe-name{font-weight:700}
.dw-pipe-total{margin-left:auto;font-weight:600;font-size:13px;white-space:nowrap}
.dw-stage{margin:5px 0}
.dw-srow{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.dw-sval{color:var(--muted);white-space:nowrap}
.dw-fin-lbl{color:var(--muted);font-size:12.5px}
.dw-fin-num{font-size:23px;font-weight:700;line-height:1.15}

/* mos123: dashboard 3-day calendar strip — full width under the stat
   tiles, one column per day, compact rows, no inner scrolling. On a
   phone the three days stack. */
.cal3-head{display:flex;align-items:baseline;gap:10px}
.cal3-open{margin-left:auto;font-size:13px;font-weight:600;white-space:nowrap}
.cal3-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.cal3-grid{grid-template-columns:repeat(3,1fr)}}
.cal3-day{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.cal3-day.today{border-color:var(--accent)}
.cal3-day-head{font-weight:700;font-size:13.5px;border-bottom:1px solid var(--line);
  padding-bottom:4px;margin-bottom:5px}
.cal3-day-head .dnum{color:var(--muted);font-weight:600;margin-left:5px}
.cal3-today-tag{color:var(--accent);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;margin-left:6px}
.cal3-row{display:block;padding:4px 2px;border-radius:5px;color:inherit;
  font-size:13.5px;line-height:1.35}
a.cal3-row:hover{background:#f2f6fb;text-decoration:none}
.cal3-time{font-weight:700;white-space:nowrap}
.cal3-who{display:block;color:var(--muted);font-size:12.5px}
.cal3-ent{display:inline-block;background:#eef4ff;color:var(--accent-dark);
  border-radius:8px;padding:0 7px;font-size:11.5px;font-weight:600;margin-left:5px}
.cal3-empty{color:var(--muted);font-size:13px;padding:3px 2px}

/* mos132: "From Willie" dashboard feed — the card body scrolls
   internally at a fixed height so the page never grows; newest first;
   unread items carry a dot and a firmer title. */
.feed-list{height:320px;overflow-y:auto;padding-right:2px}
.feed-item{border-bottom:1px solid var(--line);padding:8px 2px;cursor:pointer}
.feed-item:last-child{border-bottom:0}
.feed-item.read{opacity:.72}
.feed-meta{display:flex;align-items:center;gap:7px;font-size:12px;
  color:var(--muted)}
.feed-kind{font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  font-size:11px;border-radius:8px;padding:1px 8px;background:#eef1f4;
  color:var(--muted)}
.feed-kind.k-board{background:#e3f0ff;color:#175cd3}
.feed-kind.k-suggestion{background:#e7f6ec;color:#067647}
.feed-kind.k-update{background:#eef4ff;color:var(--accent-dark)}
.feed-kind.k-idea{background:#fdf0e3;color:#b54708}
.feed-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
  flex:none}
.feed-title{font-weight:700;font-size:14px;margin:3px 0 2px}
.feed-item.read .feed-title{font-weight:600}
.feed-body{font-size:13.5px;line-height:1.45;white-space:pre-wrap}
.feed-link{display:inline-block;margin-top:4px;font-size:13px;font-weight:600}
.feed-ent{display:inline-block;background:#eef4ff;color:var(--accent-dark);
  border-radius:8px;padding:0 7px;font-size:11.5px;font-weight:600}
.feed-foot{border-top:1px solid var(--line);padding-top:7px;margin-top:2px;
  text-align:right}
.feed-foot a{font-size:12.5px;color:var(--muted)}

/* mos37b — primary-button contrast (Jacob, 2026-10-24): blue buttons carry
   white text, guaranteed. Element-level on purpose: every light-background
   button variant (.secondary, .deal .moves, .view-switch, .trash-btn…)
   overrides this with its own more specific rule. */
button{color:#fff}

/* mos38 — Reports Center: GHL-style category tabs on top, a saved-
   report gallery, computed insight cards, and the honest "not
   connected" ads panels. Appended only; the banner rule (#msg, #dMsg)
   and the mos37b button reinforcement above are untouched. */
.rt-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--line);
  padding-bottom:0;margin:14px 0 16px}
.rt-tab{background:#fff;color:var(--ink);border:1px solid var(--line);
  border-bottom:none;border-radius:8px 8px 0 0;padding:8px 14px;font-weight:600}
.rt-tab:hover{background:#f2f4f7}
.rt-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.rt-panel h2:first-child{margin-top:4px}
.rt-range{font-size:13px;font-weight:600;color:var(--muted)}
.rt-range select{margin-left:6px}
.rt-insights{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:8px}
@media (min-width:820px){.rt-insights{grid-template-columns:1fr 1fr}}
.rt-insight{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:12px 15px}
.rt-ins-t{font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.rt-ins-h{font-size:23px;font-weight:700;line-height:1.2;margin:3px 0}
.rt-ins-d{font-size:13.5px}
.rt-ins-b{font-size:12px;color:var(--muted);margin-top:5px}
.rt-form{display:grid;grid-template-columns:1fr;gap:4px 14px}
@media (min-width:820px){.rt-form{grid-template-columns:1fr 1fr}}
.rt-checks{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:4px}
.rt-check{font-weight:400;color:var(--ink);margin:0;display:inline-flex;
  align-items:center;gap:5px}
.rt-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:820px){.rt-grid{grid-template-columns:1fr 1fr}}
.rt-card{margin:0}
.rt-card-extra{margin-top:10px}
.rt-card-extra:empty{display:none}
.rt-notconn{border:2px dashed var(--line);border-radius:10px;padding:22px;
  text-align:center;color:var(--muted);background:#fafbfc}
.rt-notconn h3{color:var(--ink);margin-top:0}

/* mos39 — Internal comments + composer attachments. The internal
   block is a tinted staff-only note inside the stream (never a
   bubble: it went nowhere); Internal composer mode tints the whole
   composer box to match, so the mode is unmistakable; staged files
   ride as chips above the actions row. Appended only — the banner
   rule (#msg, #dMsg) and the mos37b button rule above are untouched. */
.msg.internal{align-self:stretch;max-width:96%;background:var(--warn-bg);
  color:var(--ink);border:1px dashed var(--warn);border-radius:10px;
  font-size:13.5px}
.msg.internal .m-meta{color:var(--warn)}
.m-inttag{display:inline-block;font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--warn);
  margin-right:6px}
.m-atts{display:block;margin-top:6px}
.m-att{display:inline-block;margin-right:10px;font-weight:600}
.m-att-note{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.msg.out .m-att{color:#fff}
.msg.out .m-att-note{color:#cfdefc}
/* mos59 — click-to-call recordings inside a call log line. */
.m-call-rec{display:block;margin-top:6px}
.m-call-rec-label{display:block;font-size:11.5px;font-weight:600;margin-bottom:3px}
.m-call-audio{display:block;width:min(320px,100%);height:32px}
/* mos122 — the disposition line on a call row, and the live call
   popup: a fixed bottom-right window, compact and one-screen with
   no internal scrolling, that never blocks the page around it
   (z-index under the modal backdrops, over the page chrome). */
.m-call-disp{display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--accent-dark)}
.call-popup{position:fixed;right:14px;bottom:14px;width:324px;
  max-width:calc(100vw - 28px);background:var(--card);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 50px rgba(16,24,40,.30);padding:14px 16px;z-index:55}
.cp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.cp-title{font-weight:700;font-size:16px}
.cp-close{background:transparent;color:var(--muted);border:none;
  padding:2px 6px;font-size:14px}
.cp-close:hover{background:#f2f4f7;color:var(--ink)}
.cp-meta{color:var(--muted);font-size:12.5px;margin-top:1px}
.cp-status{font-weight:600;margin:8px 0 2px}
.cp-rec{margin-top:4px}
.cp-hangup{background:var(--danger);width:100%;margin-top:8px}
.cp-hangup:hover{background:#912018}
.cp-label{font-size:11.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin:12px 0 5px}
.cp-priv{text-transform:none;letter-spacing:0;font-weight:400}
.cp-chips{display:flex;flex-wrap:wrap;gap:5px}
.cp-chip{background:#f2f4f7;color:#344054;border:1px solid var(--line);
  padding:4px 9px;font-size:12.5px;border-radius:999px}
.cp-chip:hover{background:#eef4ff}
.cp-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.cp-note{font-size:13px;padding:3px 0;border-bottom:1px dashed var(--line)}
.cp-note-time{color:var(--muted);font-size:11.5px;font-weight:600;margin-right:4px}
.call-popup textarea{margin-bottom:6px}
.cp-err{margin-top:8px;background:var(--danger-bg);color:var(--danger);
  border:1px solid #fecdca;border-radius:8px;padding:6px 9px;font-size:13px}
@media (max-width:480px){
  .call-popup{right:8px;left:8px;bottom:8px;width:auto}}
.composer-box.internal-mode{background:var(--warn-bg)}
.att-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.att-chip{display:inline-flex;align-items:center;gap:6px;background:#eef1f4;
  border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 10px;
  font-size:12.5px}
.att-chip button{background:transparent;color:var(--muted);border:none;
  padding:0 4px;font-size:12px;cursor:pointer}
.att-chip button:hover{color:var(--danger)}

/* mos41 — collapsible boxes (contact left pane + dashboard widgets).
   One reusable pattern: [data-collapse] box, [data-collapse-head]
   header row, [data-collapse-body] content; MOS.initCollapsibles
   (app.js) injects the chevron and toggles .is-collapsed. The head
   becomes a flex row so the chevron sits at the right end; a head
   that is itself a link keeps navigating — only the button toggles.
   Appended only — the banner rule (#msg, #dMsg) and the mos37b
   button rule above are untouched. */
[data-collapse-head]{display:flex;align-items:center;gap:8px}
.collapsible-chev{margin-left:auto;flex:none;background:transparent;
  color:var(--muted);border:1px solid var(--line);border-radius:6px;
  padding:1px 9px;font-size:13px;line-height:1.55;cursor:pointer}
.collapsible-chev:hover{color:var(--ink);background:#f2f4f7}
[data-collapse].is-collapsed [data-collapse-body]{display:none}
.dw-box.is-collapsed .dw-title{margin-bottom:0}

/* mos42 — Activity feed (contact page): filter chips above the one
   unified timeline + a tinted row for internal comments (visible
   only to users with the internal capability — the server filters
   everyone else). Appended only; the banner rule (#msg, #dMsg) and
   the mos37b button rule above are untouched. */
.feed-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.feed-chip{background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:2px 11px;font-size:12.5px;font-weight:600;
  cursor:pointer}
.feed-chip:hover{background:#f2f4f7}
.feed-chip.active{background:#eef4ff;border-color:var(--accent);
  color:var(--accent-dark)}
.timeline li.is-internal{background:#fff8e1;border-left-color:#d97706;
  padding-right:8px;border-radius:0 6px 6px 0}

/* mos50 — "Bring email into the CRM" card (Conversations + Intake
   review): the forwarding address in a readonly input (always
   selectable by hand — the manual fallback), a Copy button, and
   entity chips that swap the tagged address. Chips mirror the mos42
   feed-chip styling. Appended only; the banner rule (#msg, #dMsg)
   and the mos37b button rule above are untouched. */
.intake-card-head{font-weight:700;margin-bottom:8px}
.intake-row{display:flex;flex-wrap:wrap;gap:8px}
.intake-addr{flex:1 1 260px;width:auto;font-size:14.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.intake-copy{white-space:nowrap}
.intake-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.intake-chip{background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:2px 11px;font-size:12.5px;font-weight:600;
  cursor:pointer}
.intake-chip:hover{background:#f2f4f7}
.intake-chip.active{background:#eef4ff;border-color:var(--accent);
  color:var(--accent-dark)}
.intake-help{margin:10px 0 0}
.intake-help p{margin:0 0 4px}
.intake-help p:last-child{margin-bottom:0}

/* mos44 — mobile containment pass (Jacob, 2026-10-24, iPhone): the
   page body never scrolls sideways at phone width. Wide tables become
   their own sideways scrollers (the Pipelines .columns pattern),
   grids get minmax(0,…) tracks so wide content can't stretch them,
   and the topbar keeps its dark band full-width with the nav
   scrolling inside itself. Table containment engages at ≤1150px,
   the rest at ≤900px — desktop layout
   is untouched. Appended only; the banner rule (#msg, #dMsg) and the
   mos37b button rule above are untouched. */
@media (max-width:1150px){
  html,body{overflow-x:clip}
  /* every table scrolls inside its own box instead of stretching
     the page; columns stay reachable by swiping the table */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%}
}
@media (max-width:900px){
  /* grid tracks that wide content must not stretch */
  .dw-grid{grid-template-columns:minmax(0,1fr)}
  .dw-box{min-width:0}
  .rt-grid,.rt-insights{grid-template-columns:minmax(0,1fr)}
  .inbox{grid-template-columns:minmax(0,1fr)}
  .inbox3>*{min-width:0}
  /* topbar: brand + nav on one row, the nav scrolls within itself;
     workspace switch / user / log out wrap beneath, band stays dark
     and full-width */
  .topbar{padding:8px 10px;gap:6px 8px}
  .topbar nav{flex-wrap:nowrap;overflow-x:auto;min-width:0;max-width:100%;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{white-space:nowrap;flex:none}
  .topbar select{max-width:46vw}
  .topbar .user{max-width:40vw;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
}
@media (min-width:821px) and (max-width:900px){
  /* keep the mos38 two-column reports grids in the tablet band,
     just with tracks that can't be stretched */
  .rt-grid,.rt-insights{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:420px){
  .login-box{margin-left:12px;margin-right:12px}
}

/* mos45 — Automations: draft bubbles read as what they are (written
   by a recipe, NOT sent): dashed amber outline, the out-bubble blue
   softened; the Draft line and its Send button sit under the text.
   Rule rows on the Automations tab are separated inside one card. */
.msg.out.draft{background:#fdf6e0;color:#4a3d08;border:1.5px dashed var(--warn,#b8860b)}
.msg.out.draft .m-meta{color:#8a6d1a}
.msg .m-delivery.draft{color:var(--warn,#b8860b);font-weight:600}
.msg.out.draft .m-delivery.draft{color:#8a6d1a}
.auto-rule{padding:12px 0;border-bottom:1px solid var(--line)}
.auto-rule:first-child{padding-top:0}
.auto-rule:last-child{border-bottom:none;padding-bottom:0}

/* mos46 — Calendars tab + composer booking-link picker. Calendar
   rows are one-per-calendar inside a single card (like mos45's rule
   rows); the picker is a quiet inline strip under the composer
   actions — it only ever writes text into the message body. */
.calm-row{display:flex;gap:12px;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--line)}
.calm-row:first-child{padding-top:0}
.calm-row:last-child{border-bottom:none;padding-bottom:0}
.calm-row.off{opacity:.62}
.calm-main{display:flex;gap:12px;min-width:0}
.calm-logo{max-height:44px;max-width:120px;object-fit:contain}
.calm-actions{display:flex;gap:6px;align-items:flex-start;flex:none}
.calm-link{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.calm-link input{min-width:260px;flex:1}
.calm-days{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.calm-day{display:flex;gap:5px;align-items:center;font-weight:500}
.bookpick{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.bookpick-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.bookpick-row select{flex:1;min-width:200px}

/* mos103 — composer toolbar popovers: the emoji picker and the link
   inserter (shared widgets in app.js, used by both composer copies
   and the group composer). Scoped .emoji-* / .linkpop-* /
   .composer-tool-* only; the grid scrolls INSIDE the panel so a
   390px phone never scrolls the page sideways for them. */
.composer-tool-btn{font-size:15px;line-height:1;padding:5px 8px}
.emoji-host,.linkpop-host{margin-top:8px}
.emoji-panel{border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:8px;max-width:352px;box-shadow:0 6px 20px rgba(16,24,40,.12)}
.emoji-search{width:100%;box-sizing:border-box;margin-bottom:6px}
.emoji-sec-label{font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin:2px 0 4px}
.emoji-grid{display:flex;flex-wrap:wrap;gap:2px;max-height:216px;
  overflow-y:auto;overscroll-behavior:contain}
.emoji-btn{background:transparent;border:none;border-radius:8px;
  font-size:20px;line-height:1.25;padding:3px 5px;cursor:pointer;color:inherit}
.emoji-btn:hover{background:#eef1f4}
.emoji-none{margin:6px 0 2px;color:var(--muted)}
.linkpop{border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:8px;max-width:430px;box-shadow:0 6px 20px rgba(16,24,40,.12)}
.linkpop-row{display:flex;gap:8px;flex-wrap:wrap}
.linkpop-row label{flex:1;min-width:150px;font-size:12px;color:var(--muted)}
.linkpop-row input{width:100%;box-sizing:border-box;margin-top:2px}
.linkpop-err{color:var(--danger);margin:6px 0 0}

/* mos48 — Settings area: the hub's section cards and the quiet
   sub-nav strip shared by settings/users/integrations/account.
   The strip is small muted text — a breadcrumb, not a second nav. */
.settings-subnav{font-size:13px;color:var(--muted);margin:2px 0 10px}
.settings-subnav a{color:var(--muted)}
.settings-subnav a:hover{color:var(--accent)}
.settings-subnav .current{color:var(--ink);font-weight:600}
.settings-subnav .sep{margin:0 5px}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
a.settings-card{display:block;text-decoration:none;color:inherit;margin-bottom:0}
a.settings-card:hover{border-color:var(--accent);text-decoration:none}
.settings-card h2{margin:0 0 6px}
.settings-card p{margin:0;color:var(--muted)}

/* mos56 — Leads: person-first board cards (the deal title drops to a
   quieter second line under the person's name; the source gets its
   own small line), the contacts list's pursuit chips, the board/list
   toggle, and the add-deal contact picker's result list. */
.deal .sub{font-size:13px;margin-top:1px}
.deal .src{color:var(--muted);font-size:12.5px;margin-top:2px}
.pursuit-chips{margin-top:4px;display:flex;gap:4px;flex-wrap:wrap}
.pursuit-chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;
  font-weight:600;background:#eef4ff;color:var(--accent-dark);border:1px solid #d1e0ff}
/* mos98 — the purpose-bucket chip on Contacts list rows: quiet like
   the pursuit chip, told apart by its colored dot (one hue per
   bucket; the label always rides along, so color is never the only
   signal). */
.bucket-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;
  border-radius:999px;font-size:11.5px;font-weight:600;background:#f8f9fb;
  color:#344054;border:1px solid #e4e7ec;white-space:nowrap}
.bucket-chip .bucket-dot{width:7px;height:7px;border-radius:50%;flex:none}
.bucket-loved-ones .bucket-dot{background:#e5484d}
.bucket-network .bucket-dot{background:#8e4ec6}
.bucket-business .bucket-dot{background:#175cd3}
.bucket-dormant .bucket-dot{background:#98a2b3}
.bucket-out .bucket-dot{background:#363f72}
.view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.view-toggle button{background:#fff;color:#344054;border:0;border-radius:0;padding:6px 14px;cursor:pointer}
.view-toggle button.active{background:var(--accent);color:#fff}
.pick-list{border:1px solid var(--line);border-radius:8px;margin-top:4px;max-height:184px;
  overflow:auto;background:#fff}
.pick-list button{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);color:var(--ink);padding:7px 10px;font-size:13.5px;cursor:pointer}
.pick-list button:last-child{border-bottom:0}
.pick-list button:hover{background:#f2f4f7}

/* mos51 — Machine OS Studio: workbench rows, pills, the code editor,
   the version/request lists, the public-site warning and the field
   editor. Compact on purpose — Studio is a workbench, not a showcase. */
.st-row{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--line)}
.st-row:last-child{border-bottom:0}
.st-row-main{flex:1;min-width:0}
.st-row-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.st-pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11.5px;
  font-weight:600;border:1px solid var(--line);margin-right:4px}
.st-warn{background:#fffaeb;border:1px solid #fedf89;border-radius:8px;
  padding:9px 12px;margin:10px 0;font-size:13.5px}
.st-ws h4{margin:18px 0 6px}
.st-frame{width:100%;height:480px;border:1px solid var(--line);border-radius:8px;background:#fff}
.st-editor{border-top:2px solid var(--line);margin-top:16px;padding-top:6px}
.st-code{width:100%;box-sizing:border-box;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.45}
.st-field{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px}

/* mos54 — Social Planner (Labs): calendar chips ride the calendar's
   .appt-chip with social status colors (posted = solid accent, it's
   out in the world); target-account checkboxes are quiet full-width
   rows; queue group headings sit tight over their .st-row lists. */
.soc-chip.idea{background:#eef1f4;color:#344054}
.soc-chip.draft{background:#fef0c7;color:#8a6d00}
.soc-chip.approved{background:#eef4ff;color:var(--accent-dark)}
.soc-chip.scheduled{background:var(--ok-bg);color:var(--ok)}
.soc-chip.posted{background:var(--accent);color:#fff}
.soc-target{display:flex;gap:8px;align-items:center;padding:6px 0;
  border-bottom:1px dashed var(--line);font-weight:500;cursor:pointer}
.soc-target:last-child{border-bottom:0}
.soc-queue h3{margin:16px 0 2px}
.soc-queue h3:first-of-type{margin-top:6px}

/* mos60: shared search/filter row (contacts, tasks, projects) — one
   compact line above the list: the search input grows, the filter
   selects keep their natural width. */
.searchrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.searchrow input[type=search]{flex:1 1 220px;width:auto}
.searchrow select{width:auto;flex:0 1 auto}

/* mos62: attendee picker (calendar popup + contact appointments
   panel) — chips over a search input with a results dropdown. */
.attfield{position:relative}
.att-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.att-chips:empty{margin-bottom:0}
.att-chip{display:inline-flex;align-items:center;gap:4px;background:#eef4ff;
  color:var(--accent-dark);border:1px solid var(--line);border-radius:999px;
  padding:2px 6px 2px 10px;font-size:13px;font-weight:500}
.att-x{background:none;border:0;color:inherit;cursor:pointer;padding:0 2px;
  font-size:12px;line-height:1}
.att-results{position:absolute;left:0;right:0;top:100%;z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(16,24,40,.12);overflow:hidden}
.att-hit{display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);padding:8px 10px;cursor:pointer;
  font-weight:500;color:var(--ink)}
.att-hit:last-child{border-bottom:0}
.att-hit:hover{background:#f2f4f7}

/* mos63: preset chips on automation int fields (the keep-in-touch
   rhythm picks) — small quick-fill buttons under the number box. */
.preset-chips{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.preset-chip{padding:2px 9px;font-size:12px;border-radius:999px;
  background:#eef1f6;color:var(--ink);border:1px solid var(--line);cursor:pointer}
.preset-chip:hover{background:#e2e8f2}

/* mos63b button-contrast fix: a primary button that also carries
   .small was rendering grey text on the blue background — .small's
   muted color (class specificity) beats the white-text base rule
   for buttons and the mos37b trailing reinforcement (both element
   specificity).
   Primary small buttons are white like every other primary button;
   .secondary small buttons keep their ink (button.secondary wins
   for them and is deliberately not matched here). */
button.small:not(.secondary){color:#fff}

/* mos64: group texting — the Group chip on inbox rows and group
   headers, the sender name over an inbound bubble in a group thread,
   the per-person Details expander under a fanned-out send, and the
   new-group picker rows. Append-only. */
.group-chip{display:inline-block;font-size:11px;font-weight:700;
  color:var(--accent,#2563eb);background:var(--line,#e5e7eb);
  border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:1px}
.m-sender{display:block;font-size:12px;font-weight:700;color:var(--muted);
  margin-bottom:2px}
.m-details{display:block;margin-top:2px}
.m-details summary{cursor:pointer;font-size:12px;color:var(--accent,#2563eb)}
.m-deliv-row{display:block;font-size:12px;color:var(--muted);padding:1px 0}
.gpick{display:flex;align-items:center;gap:8px;padding:5px 4px;cursor:pointer;
  border-bottom:1px solid var(--line)}
.gpick input{width:auto}

/* mos130: the shared searchable contact picker (app.js
   MOS.contactPicker) — filter input pinned on top, capped scroll
   list under it, a quiet match count at the foot. */
.cpick-q{width:100%;margin:4px 0}
.cpick-list{max-height:220px;overflow:auto;margin:2px 0}
.cpick-row{display:flex;align-items:center;gap:8px;width:100%;
  text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:6px 4px;cursor:pointer;font:inherit;color:inherit;border-radius:0}
.cpick-row:hover{background:#f2f4f7}
.cpick-ent{color:var(--muted)}
.cpick-sub{margin-left:auto;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:45%}
.cpick-count{color:var(--muted);padding:2px 0 0}
.cpick-row.cpick-sel{background:#eef4ff}
.cpick-check{color:var(--accent);font-weight:700}
.cpick-picked{color:var(--muted);padding:4px 0 0}
/* mos131: Quick Actions circles (Jacob's reference: round icon
   buttons with a plain label under each) — the task page's People
   section and, compact, the Tasks list rows. */
.qa-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.qa-row.sm{gap:8px;flex-wrap:nowrap}
.qa-btn{display:inline-flex;flex-direction:column;align-items:center;
  gap:4px;background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:var(--ink);text-decoration:none}
.qa-ico{display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border:1.5px solid var(--line);
  border-radius:50%;background:var(--card);font-size:22px}
.qa-btn:hover .qa-ico{border-color:var(--accent);background:#eef4ff}
.qa-btn:disabled .qa-ico{opacity:.55}
.qa-lbl{font-size:12.5px;color:var(--ink)}
.qa-btn.sm .qa-ico{width:32px;height:32px;font-size:15px}
.qa-btn.sm .qa-lbl{display:none}
.qa-person{padding:8px 0}
.qa-person + .qa-person{border-top:1px dashed var(--line)}
.qa-who{font-weight:600}
.task-people{border-top:1px solid var(--line);margin-top:12px;
  padding-top:10px}
.tp-label{color:var(--muted);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.cpick-picked:empty{padding:0}

/* mos69: topbar notification bell + quick-communicate launcher.
   The bar is dark (#101828); the icon buttons are transparent with
   the logout button's border, and the panels are light cards that
   drop below the bar, right-aligned to their icon. Append-only. */
.top-actions{display:inline-flex;gap:6px;align-items:center}
.top-pop-wrap{position:relative;display:inline-flex}
.topbar .top-icon{background:transparent;border:1px solid #344054;
  color:#fff;border-radius:6px;padding:6px 9px;font-size:15px;
  cursor:pointer;line-height:1.2}
.topbar .top-icon:hover{background:#1d2939}
.bell-badge{position:absolute;top:-7px;right:-7px;z-index:5;
  background:#d92d20;color:#fff;font-size:11px;font-weight:700;
  border-radius:999px;padding:1px 6px;line-height:1.5;
  pointer-events:none}
.top-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:900;
  width:360px;max-width:92vw;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 32px rgba(16,24,40,.28);text-align:left;
  font-size:14px;cursor:default}
.top-pop-head{font-weight:700;padding:10px 14px;
  border-bottom:1px solid var(--line)}
.bell-list{max-height:60vh;overflow-y:auto}
.notif-item{display:flex;justify-content:space-between;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--line);
  color:var(--ink);text-decoration:none}
.notif-item:hover{background:#f6f8fc;text-decoration:none}
.notif-item.unread{background:#eef4ff}
.notif-item.unread .notif-text{font-weight:600}
.notif-text{flex:1}
.notif-time{color:var(--muted);font-size:12px;white-space:nowrap;
  padding-top:2px}
.notif-empty{color:var(--muted);padding:12px 14px;margin:0}
.launcher-body{padding:10px 14px}
.launcher-body input{width:100%;box-sizing:border-box}
.launcher-row{display:flex;justify-content:space-between;gap:10px;
  align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.launcher-row:last-child{border-bottom:none}
.launcher-main{flex:1;min-width:0}
.launcher-actions{display:flex;flex-direction:column;gap:4px;
  align-items:flex-end}
.launcher-actions a{font-weight:600}
.call-soon{font-size:12px;color:var(--muted);border:1px dashed var(--line);
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.call-action{white-space:nowrap}
.launcher-call-state{margin-top:3px;text-align:right}
.launcher-create{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.launcher-err{color:var(--danger);min-height:0}
@media (max-width:900px){
  .top-pop{width:min(92vw,360px)}
  .bell-list{max-height:50vh}
}

/* mos66 — contact page: the Appointments quick panel splits into two
   distinct outlined boxes — the appointment list and the booking form
   each get their own house .card and behave as mos41 collapsibles.
   The booking box carries a faint tint so the action box reads apart
   from the record box. Appended only — the banner rule (#msg, #dMsg),
   the mos37b trailing button rule and the mos63b small-button rule
   above are untouched. */
.qp-panel .appt-box:last-child{margin-bottom:2px}
.qp-panel .appt-book{background:#f7f9fc}

/* mos82 — top-pop panels (bell + launcher) can never be wider than
   the viewport minus an 8px margin per side, so the fit-shift in
   app.js (MOS._popFit) always has a box that CAN fit on screen.
   Overrides the mos69 width/max-width above (later rule, same
   specificity). Appended only — the banner rule, the mos37b
   trailing button rule and the mos63b small-button rule above are
   untouched. */
.top-pop{width:min(360px,calc(100vw - 16px));max-width:calc(100vw - 16px)}

/* mos84: finance drill-down affordances — clickable dashboard tiles,
   category rows and month bars (the tiles ride the existing a.kpi
   hover), plus the ledger's drill chip bar and clickable rows.
   Appended only — the banner rule, the mos37b trailing button rule
   and the mos63b small-button rule above are untouched. */
.fin-drill-row{cursor:pointer}
.fin-drill-row:hover{background:#f2f6fc}
.fin-bar-col.drill{cursor:pointer}
.fin-bar-col.drill:hover .fin-bar{filter:brightness(1.18)}
.fin-bar-col.drill:focus-visible,.fin-drill-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.drill-bar{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--accent);border-radius:10px;padding:8px 12px;margin-bottom:12px}
.drill-bar span{font-weight:600}
#ledList tr[data-txid]{cursor:pointer}

/* mos86: invite RSVP chips + attendee answer rows (Calendar popup,
   contact-page appointment boxes). Appended only — the banner rule,
   the mos37b trailing button rule and the mos63b small-button rule
   above are untouched. */
.rsvp-chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.rsvp-chip.ok{background:var(--ok-bg);color:var(--ok)}
.rsvp-chip.no{background:var(--danger-bg);color:var(--danger)}
.rsvp-chip.maybe{background:#fffaeb;color:var(--warn)}
.rsvp-chip.prop{background:#eef4ff;color:var(--accent-dark)}
.rsvp-chip.none{background:#eef1f4;color:var(--muted)}
.rsvp-list{display:block;margin:2px 0 4px}
.rsvp-summary{display:block;font-size:12px;font-weight:600;margin:4px 0 2px}
.rsvp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:3px 0}
.rsvp-who{font-size:13px}

/* mos88: association suggestion cards at the top of the contact
   page's Associations panel. Appended only — the banner rule, the
   mos37b trailing button rule and the mos63b small-button rule
   above are untouched. */
.assoc-suggest{border:1px dashed var(--accent);background:#eef4ff;border-radius:10px;padding:10px 12px;margin-bottom:10px}

/* mos67: sortable list headers (Pipelines list + Contacts) — the
   header keeps the plain table style; only the affordance is new.
   Appended only — the banner rule, the mos37b trailing button rule
   and the mos63b small-button rule above are untouched. */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink);text-decoration:underline}

/* mos68: Pipeline Manage view — the row ⋯ menu and the stage-editor
   rows (create form + Edit stages popup). Appended only — the banner
   rule, the mos37b trailing button rule and the mos63b small-button
   rule above are untouched. */
.mg-actions{position:relative;text-align:right;white-space:nowrap;width:1%}
.mg-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:60;background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(16,24,40,.18);
  padding:6px;min-width:180px;flex-direction:column;gap:2px;text-align:left}
.mg-menu button{background:none;border:none;color:var(--ink);text-align:left;
  padding:7px 10px;border-radius:6px;font-size:14px;cursor:pointer;width:100%}
.mg-menu button:hover:not(:disabled){background:#f2f4f7}
.mg-menu button:disabled{color:var(--muted);cursor:default;opacity:.6}
.mg-stage-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.mg-stage-row input{flex:1;min-width:140px;width:auto}
.mg-table td{vertical-align:middle}

/* mos73: Calendar List view — filter chips, stat tiles and the
   per-status bars (plain CSS, no chart library); the Settings view
   reuses the mos46 .calm-* classes above. Appended only — the
   banner rule, the mos37b trailing button rule and the mos63b
   small-button rule above are untouched. */
.cal-chip{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:3px 12px;font-size:13px;cursor:pointer;color:var(--ink)}
.cal-chip:hover{border-color:var(--accent)}
.cal-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.stat-tiles{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 8px}
.stat-tile{border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  min-width:104px;background:#fbfcfe}
.stat-tile .n{font-size:22px;font-weight:700;line-height:1.1}
.stat-tile .l{font-size:12px;color:var(--muted);margin-top:2px}
.stat-tile.big{border-color:var(--accent)}
.stat-tile.big .n{font-size:30px;color:var(--accent-dark)}
.stat-bar-row{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:13px}
.stat-bar-row .bl{width:86px;color:var(--muted)}
.stat-bar-row b{min-width:24px;text-align:right}
.stat-bar{flex:1;height:10px;background:#eef1f4;border-radius:999px;overflow:hidden}
.stat-bar i{display:block;height:100%;background:var(--accent)}
.stat-bar.showed i{background:var(--ok)}
.stat-bar.no_show i{background:var(--danger)}
.stat-bar.cancelled i{background:var(--muted)}
.stat-bar.rescheduled i{background:var(--warn)}
/* mos101 — stats charts (lead-time SVG + channel bars), scoped. */
.stat-chart-head{font-weight:600;margin:14px 0 4px}
.stat-chart{width:100%;height:auto;display:block}
.stat-chart-grid{stroke:var(--line);stroke-width:1}
.stat-chart-axis{font-size:11px;fill:var(--muted)}
.stat-chart-axis.dim{opacity:.45}
.stat-chart-line{stroke-width:2;fill:none}
.stat-chart-line.ns{stroke:var(--danger)}
.stat-chart-line.cx{stroke:var(--accent)}
.stat-chart-dot.ns{fill:var(--danger)}
.stat-chart-dot.cx{fill:var(--accent)}
.stat-chart-val{font-size:11px;font-weight:600;fill:var(--ink)}
.stat-chart-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  font-size:13px;margin:2px 0 4px}
.stat-chart-legend .dot{display:inline-block;width:9px;height:9px;
  border-radius:50%;margin-right:5px}
.stat-chart-legend .dot.ns{background:var(--danger)}
.stat-chart-legend .dot.cx{background:var(--accent)}

/* mos91 — Studio request attachments: the Ask Willie drop zone, the
   held-file chips, and attachment thumbnails/links on request rows. */
.st-drop{border:1.5px dashed var(--line);border-radius:8px;padding:12px 14px;
  margin-top:8px;cursor:pointer;display:flex;flex-direction:column;gap:2px;
  background:#fbfcfe}
.st-drop:hover{border-color:var(--accent)}
.st-drop.st-drop-over{border-color:var(--accent);background:#eef4ff}
.st-chip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);
  border-radius:999px;padding:2px 6px 2px 10px;margin:6px 6px 0 0;background:#fff;
  font-size:13px}
.st-files{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.st-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);display:block}
.st-filelink{font-size:13px}

/* mos92 — Pipeline Manager cleanup (GHL-clean; presentation only).
   The Manage ⋯ becomes a compact true dropdown (small type, ghost
   trigger, Delete in red under a hairline), the Manage table gets
   tighter rows + short Updated stamps, and the Edit-stages list
   becomes GHL-style rows: drag handle, quiet inline name, muted
   deal count, ⋮ menu. Appended only — the banner rule, the mos37b
   trailing button rule and the mos63b small-button rule above are
   untouched; the mos68 .mg-* rules above stay as the base. */
.mg-table th,.mg-table td{padding:6px 8px}
.mg-table td{font-size:13.5px}
.mg-updated{white-space:nowrap;color:var(--muted);font-size:12.5px}
button.mg-kebab{background:transparent;color:var(--muted);border:1px solid transparent;
  border-radius:6px;padding:2px 9px;font-size:16px;line-height:1.3;cursor:pointer}
button.mg-kebab:hover{background:#f2f4f7;color:var(--ink);border-color:var(--line)}
.mg-menu{padding:4px;min-width:168px;border-radius:8px;
  box-shadow:0 10px 28px rgba(16,24,40,.20)}
.mg-menu button{padding:6px 10px;font-size:13px;border-radius:5px;line-height:1.35}
.mg-menu button.mg-danger{color:var(--danger)}
.mg-menu button.mg-danger:hover:not(:disabled){background:var(--danger-bg)}
.mg-menu-sep{height:1px;background:var(--line);margin:4px 6px}
.mg-stage-row.sm-wrap{display:block;margin:0}
.sm-row{display:flex;align-items:center;gap:8px;padding:5px 8px;
  border:1px solid var(--line);border-radius:8px;margin:6px 0;background:#fff}
.sm-row.sm-dragging{opacity:.45}
.sm-row.sm-drag-over{border-color:var(--accent);box-shadow:0 0 0 3px #eef4ff}
.sm-drag{cursor:grab;color:#98a2b3;font-size:15px;line-height:1;padding:4px 3px;
  flex:none;user-select:none;-webkit-user-select:none;touch-action:none}
.sm-drag:active{cursor:grabbing}
.sm-row input[data-sm-name]{flex:1;min-width:0;width:auto;border-color:transparent;
  background:transparent;padding:5px 8px;font-size:14px}
.sm-row input[data-sm-name]:hover{border-color:var(--line);background:#fff}
.sm-row input[data-sm-name]:focus{border-color:var(--accent);background:#fff;
  outline:none;box-shadow:0 0 0 3px #eef4ff}
.sm-deals{color:var(--muted);font-size:12.5px;white-space:nowrap;flex:none}
.sm-actions{position:relative;flex:none}
button.sm-kebab{background:transparent;color:var(--muted);border:1px solid transparent;
  border-radius:6px;padding:2px 7px;font-size:15px;line-height:1.3;cursor:pointer}
button.sm-kebab:hover{background:#f2f4f7;color:var(--ink);border-color:var(--line)}
.sm-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:70;background:var(--card);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 28px rgba(16,24,40,.20);
  padding:4px;min-width:150px;flex-direction:column;gap:2px;text-align:left}
.sm-menu button{background:none;border:none;color:var(--ink);text-align:left;
  padding:6px 10px;border-radius:5px;font-size:13px;line-height:1.35;cursor:pointer;width:100%}
.sm-menu button:hover:not(:disabled){background:#f2f4f7}
.sm-menu button:disabled{color:var(--muted);cursor:default;opacity:.6}
.sm-menu button.sm-danger{color:var(--danger)}
.sm-menu button.sm-danger:hover:not(:disabled){background:var(--danger-bg)}
.sm-menu-sep{height:1px;background:var(--line);margin:4px 6px}
.sm-target{margin:2px 0 8px;padding:8px 10px;border:1px dashed var(--line);border-radius:8px}
.sm-target select{margin-top:4px}

/* mos94 — Pipeline menus stay on screen + more drag reorder.
   Appended only — the banner rule, the mos37b trailing button rule
   and the mos63b small-button rule above are untouched.
   Menus: height is capped at the viewport minus the 8px margins
   (internal scroll past that), and fitPipeMenu in pipelines.html
   adds .pipe-menu-up when a menu must open above its button
   instead of running off the bottom edge. */
.mg-menu,.sm-menu{max-height:calc(100vh - 16px);overflow-y:auto}
.mg-menu.pipe-menu-up{top:auto;bottom:calc(100% + 4px)}
.sm-menu.pipe-menu-up{top:auto;bottom:calc(100% + 4px)}
/* Manage rows: the ⠿ handle mirrors .sm-drag; a dragged row fades
   and the row under the pointer tints. */
.mg-drag{cursor:grab;color:#98a2b3;font-size:15px;line-height:1;
  padding:4px 3px;user-select:none;-webkit-user-select:none;touch-action:none}
.mg-drag:active{cursor:grabbing}
tr.mg-dragging{opacity:.45}
tr.mg-drag-over td{background:#eef4ff}
/* Create-form stage rows: same handle discipline as .sm-drag,
   the drop target outlined through its input. */
.cp-drag{cursor:grab;color:#98a2b3;font-size:15px;line-height:1;
  padding:4px 3px;flex:none;user-select:none;-webkit-user-select:none;
  touch-action:none}
.cp-drag:active{cursor:grabbing}
.mg-stage-row.cp-dragging{opacity:.45}
.mg-stage-row.cp-drag-over input{border-color:var(--accent);
  box-shadow:0 0 0 3px #eef4ff}
/* mos94 Addendum 3: board columns are bounded bands with their OWN
   vertical scroll, so a 2,000-card column no longer pushes later
   pipelines thousands of pixels down the page. mos14 drag is
   rect-based (elementFromPoint + getBoundingClientRect), so drop
   resolution is unaffected by the internal scroll. */
.column{max-height:max(300px, calc(100vh - 220px));overflow-y:auto}
/* mos94 Addendum 4: board header row — pipeline title + its
   Bulk move button on one line. */
.board-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.board-head h2{flex:1;margin-bottom:0}
/* mos96: Select mode — pickable board cards + the pinned action
   bar. Picked cards outline in the accent; the box at the card's
   top-right shows the check. The bar sits above page content but
   below modals (z 60) and the drag clone (z 1000). */
.deal.sel-card{cursor:pointer}
.deal.sel-picked{outline:2px solid var(--accent);outline-offset:-2px;
  background:#f5f9ff}
.sel-box{float:right;width:20px;height:20px;margin:0 0 4px 8px;
  border:1.5px solid #98a2b3;border-radius:5px;background:#fff;
  color:var(--accent);font-size:14px;font-weight:700;line-height:18px;
  text-align:center}
.deal.sel-picked .sel-box{border-color:var(--accent);background:#eef4ff}
#selBar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;
  z-index:50;display:flex;align-items:center;gap:10px;background:#101828;
  color:#fff;border-radius:10px;padding:9px 14px;
  box-shadow:0 8px 24px rgba(16,24,40,.35);max-width:calc(100vw - 24px);
  flex-wrap:wrap;justify-content:center}
#selBarText{font-weight:600;margin-right:2px}
.danger-text{color:var(--danger)}
#selToggle.active-toggle{background:var(--accent);color:#fff;
  border-color:var(--accent)}
/* mos97: on the Contacts list a pursuit chip is a button, not a
   label — clicking it opens the quick-edit popup for that pursuit.
   The affordance stays quiet at rest (same pill as mos56) and
   deepens on hover/focus so the clickability reads without noise. */
.pursuit-chip{cursor:pointer}
.pursuit-chip:hover,.pursuit-chip:focus-visible{background:#dbe7ff;
  border-color:#a9c4ff;outline:none}

/* mos95: working-day toggles + "Also set this up for" picks. The
   global input rule (width:100%, text-field padding) swallowed the
   day checkboxes — every other checkbox group in the app carries
   an explicit size fix (.perm-grid, .inline-check, .check) but
   .calm-day never got one, so on Jacob's screen the row rendered
   as bare text labels with no visible box to tap. The days are now
   real toggle pills: a sized native checkbox that stays visible
   and clickable, and the whole pill fills with the accent color
   when its day is on — the state reads at a glance. */
.calm-day{border:1.5px solid #98a2b3;border-radius:8px;background:#fff;
  padding:7px 12px;cursor:pointer;margin:0}
.calm-day input[type=checkbox]{width:20px;height:20px;flex:none;
  margin:0;padding:0;accent-color:var(--accent);cursor:pointer}
.calm-day:has(input:checked){background:var(--accent);
  border-color:var(--accent-dark);color:#fff}
.calm-day:has(input:checked) input[type=checkbox]{accent-color:#fff}
.calm-day:has(input:focus-visible){outline:2px solid var(--accent);
  outline-offset:2px}
.also-row{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.also-ent{display:flex;gap:7px;align-items:center;font-weight:500;
  border:1.5px solid #98a2b3;border-radius:8px;background:#fff;
  padding:7px 12px;cursor:pointer;margin:0}
.also-ent input[type=checkbox]{width:20px;height:20px;flex:none;
  margin:0;padding:0;accent-color:var(--accent);cursor:pointer}
.also-ent:has(input:checked){background:#eef4ff;
  border-color:var(--accent);color:var(--accent-dark)}
.also-ent:has(input:focus-visible){outline:2px solid var(--accent);
  outline-offset:2px}

/* mos111: duplicates review — group cards, match-reason chips,
   member rows with the Keep / Merge-in picks, entity chips. */
.dupe-card{margin-bottom:14px}
.dupe-reasons{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.reason-chip{display:inline-block;padding:1px 8px;border-radius:999px;
  font-size:11.5px;font-weight:600;background:#fff7e6;color:#8a5a00;
  border:1px solid #f0d9a8}
.entity-chip{display:inline-block;padding:1px 8px;border-radius:999px;
  font-size:11.5px;font-weight:600;background:#f2f4f7;color:#344054;
  border:1px solid var(--line)}
.dupe-member{display:flex;gap:12px;align-items:flex-start;
  padding:8px 0;border-top:1px solid var(--line)}
.dupe-member .who{flex:1;min-width:180px}
.dupe-pick{display:flex;flex-direction:column;gap:4px;font-size:13px;
  white-space:nowrap;padding-top:2px}
.dupe-pick label{display:flex;gap:5px;align-items:center;cursor:pointer}
.dupe-pick input{width:16px;height:16px;margin:0;padding:0;
  accent-color:var(--accent);cursor:pointer}

/* mos112: compact Conversations thread header (conversations.html
   only — scoped by .th-compact so the stream.js contact-page header
   keeps its own layout). One bar: a title row (36px avatar, one-line
   ellipsis title with the Group chip riding it, one-line participants
   / ident under it) over a meta row (one-line muted explainer left,
   Rename/Remove/Archive small buttons right; the meta row wraps on
   narrow screens instead of crushing the titles into a column).
   Append-only. */
.thread-head.th-compact{flex-direction:column;align-items:stretch;gap:4px;
  padding:10px 16px}
.thread-head.th-compact .th-row{display:flex;align-items:center;gap:10px;
  min-width:0}
.thread-head.th-compact .avatar{width:36px;height:36px;font-size:13px}
.thread-head.th-compact .th-titles{flex:1;min-width:0}
.thread-head.th-compact .th-name{display:flex;align-items:center;gap:8px;
  min-width:0;font-size:15px;line-height:1.25}
.thread-head.th-compact .th-title{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.thread-head.th-compact .group-chip{flex:none;margin-left:0}
.thread-head.th-compact .th-sub{font-size:12px;line-height:1.3;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-head.th-compact .th-meta{display:flex;align-items:center;
  flex-wrap:wrap;gap:4px 8px;min-width:0}
.thread-head.th-compact .th-note{flex:1 1 140px;min-width:0;font-size:12px;
  line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.thread-head.th-compact .th-actions{margin-left:auto;display:flex;
  align-items:center;gap:6px;flex:none}
.thread-head.th-compact .th-actions .inbox-file-btn{margin-left:0;
  padding:3px 9px;font-size:12.5px}
@media (max-width:760px){
  .thread-head.th-compact{padding:8px 12px}
}

/* mos104 — composer extras: the shared tool popovers (⚡ snippets,
   📄 documents, 🏷️ tags, $ / 🏗️ choosers) in app.js, wired into
   both composer copies + the group composer, and the contact-page
   tags row. Scoped .toolpop-* / .snip-* / .doc-* / .tag-* /
   .chooser-* / .tf-* classes only. Toolbar buttons may wrap to a
   second row inside the composer at phone widths — the page itself
   never scrolls sideways for them. */
.composer-actions{flex-wrap:wrap}
.toolpop-host{margin-top:8px}
.toolpop{border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:8px;max-width:460px;box-shadow:0 6px 20px rgba(16,24,40,.12)}
.toolpop-head{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:6px}
.snip-row{display:flex;gap:6px;align-items:center;padding:3px 0}
.snip-ins{flex:1;text-align:left;background:none;border:0;color:var(--ink);
  padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snip-ins:hover{background:#f2f4f7}
.doc-list{max-height:220px;overflow-y:auto;overscroll-behavior:contain}
.doc-row{display:flex;gap:8px;align-items:center;padding:5px 0;
  border-bottom:1px solid var(--line)}
.doc-row:last-child{border-bottom:0}
.doc-name{flex:1;min-width:0;font-size:13.5px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tf-label{display:block;font-size:12px;color:var(--muted);margin:6px 0}
.tf-label input,.tf-label select,.tf-label textarea{width:100%;
  box-sizing:border-box;margin-top:2px}
.tf-check{display:flex;gap:6px;align-items:center;font-size:13px;
  color:var(--ink);margin:6px 0}
.tf-check input{width:auto}
.chooser-opt{display:block;width:100%;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:10px;color:var(--ink);
  padding:9px 11px;margin:0 0 6px;cursor:pointer}
.chooser-opt:hover{border-color:var(--accent)}
.chooser-opt-label{display:block;font-weight:600;font-size:14px}
.tags-core{display:inline}
.tag-chip{display:inline-flex;align-items:center;gap:4px;background:#eef4ff;
  color:var(--accent-dark);border:1px solid #d1e0ff;border-radius:999px;
  padding:1px 6px 1px 10px;font-size:12px;font-weight:600;margin:0 4px 4px 0}
.tag-chip button{background:none;border:0;color:var(--accent-dark);
  cursor:pointer;padding:0 2px;font-size:12px;line-height:1}
.tag-add{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.tag-add input{width:150px}
.tagrow{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;
  margin:2px 0 10px}
.tagrow-label{font-size:13px;color:var(--muted);padding-top:3px}
/* mos77: task scoreboard — the Tasks-page "My day" strip and the
   Reports Scoreboard tab share this CSS-only bar system (no chart
   library): outline bar = planned, filled bar = done, red number =
   overdue carried into that day. */
.sb-strip{margin-bottom:12px;padding:12px 14px}
.sb-line{font-size:15px;margin-bottom:8px}
.sb-scroll{overflow-x:auto}
.sb-bars{display:flex;gap:3px;align-items:flex-end;min-width:min-content}
.sb-day{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.sb-cols{display:flex;gap:2px;align-items:flex-end;height:36px}
.sb-bar{display:block;width:7px;border-radius:2px 2px 0 0}
.sb-bar.plan{background:transparent;border:1.5px solid var(--accent);border-bottom:0;box-sizing:border-box}
.sb-bar.done{background:var(--accent)}
.sb-dlbl{font-size:10px;color:var(--muted)}
.sb-day.sb-today .sb-dlbl{color:var(--ink);font-weight:700}
.sb-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.sb-pgroup{display:inline-flex;gap:4px}
tr.sb-sel{background:#eef4ff}
.sb-bars.big .sb-cols{height:66px}
.sb-bars.big .sb-bar{width:9px}
.sb-ov{font-size:10px;color:var(--danger);font-weight:700;min-height:12px;line-height:12px}

/* mos78: Business Profiles — two-column form (stacks on narrow
   screens), the Settings hub / picker rows, the EIN + fiscal rows,
   and the logo box. */
.profile-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
@media (max-width:720px){.profile-cols{grid-template-columns:1fr}}
.profile-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.ein-row{display:flex;gap:8px;align-items:center}
.ein-row select{flex:1}
.logo-box{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.logo-box img{max-width:180px;max-height:120px;border:1px solid var(--line);border-radius:8px;background:#fff}

/* ---- MOS119 — institutional polish pass (VISUAL ONLY) ----
   Shared-primitive fixes first, page-local rules scoped by class.
   The mos63b banner rule and the trailing button rules above are
   untouched; this block changes neither. */

/* -- Topbar: the entity select takes its natural width, so the
   header is one row at desktop instead of three. The nav takes
   the flexible middle, so what does not fit parks in More. -- */
.topbar select{width:auto;max-width:230px}
.topbar .brand{white-space:nowrap}
.topbar nav{flex:1 1 auto;min-width:0}

/* -- X1/X2/X3: nav overflow becomes a "More" menu (app.js parks
   the links that do not fit; see MOS._navFit). The bar is one
   row at every width above phone; at phone width it compacts to
   brand+actions / nav / entity rows. -- */
.topbar nav{align-items:center;flex-wrap:nowrap}
.nav-more{position:relative;display:none}
.nav-more.on{display:block}
.nav-more > button{background:#ffffff14;color:#e4e7ec;border:1px solid #ffffff2b;white-space:nowrap}
.nav-more-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;
  background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 28px rgba(16,24,40,.22);
  padding:6px;display:none;z-index:80}
.nav-more-pop.open{display:block}
.nav-more-pop a{display:block;padding:8px 10px;border-radius:7px;color:var(--ink);
  text-decoration:none;font-size:14px;white-space:nowrap}
.nav-more-pop a:hover{background:#f2f4f7}
.nav-more-pop a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
@media (min-width:1151px){
  .topbar{flex-wrap:nowrap}
}
@media (max-width:1150px){
  /* Two deliberate rows: brand + nav + actions, then the entity
     picker — the picker never interleaves with the actions. */
  .topbar{flex-wrap:wrap;row-gap:8px}
  .topbar .brand{order:1}
  .topbar nav{flex-wrap:nowrap;overflow:visible;flex:1 1 0;min-width:0;order:2}
  .topbar .top-actions{order:3}
  .topbar .user{order:4}
  .topbar > button{order:5}
  .topbar .spacer{display:none}
  .topbar select{order:6;flex:1 1 100%;max-width:none}
}
@media (max-width:640px){
  .topbar{flex-wrap:wrap;row-gap:7px;padding:9px 12px}
  .topbar nav a{padding:6px 8px;font-size:13.5px}
  .nav-more > button{padding:6px 9px;font-size:13.5px}
  .topbar .brand{order:1}
  .topbar .top-actions{order:2;margin-left:auto}
  .topbar .user{display:none}
  .topbar > button{order:2}
  .topbar nav{order:3;flex:1 1 100%}
  .topbar select{order:4;flex:1 1 auto;max-width:none}
}

/* -- X8: the bell badge sits on the button with a ring in the
   header colour, so it reads as a badge, not a sticker. -- */
.bell-badge{top:-6px;right:-6px;box-shadow:0 0 0 2px #101828}

/* -- X4: chips and badges never wrap their text into pills. -- */
.badge{white-space:nowrap;background:#eef1f5;color:#3c4656}
.pursuit-chip{white-space:nowrap;max-width:100%;overflow:hidden;
  text-overflow:ellipsis}
.group-chip{white-space:nowrap;flex:none}

/* -- X7: scrollbars inside panes, boards and tables go quiet:
   thin, light, and only as tall as the classic gutter. -- */
.columns,.msg-flow,.inbox-list,.cpane-mid,.contact3 .cpane,
.doc-scroll,.sb-scroll,table{
  scrollbar-width:thin;scrollbar-color:#c3ccd8 transparent}
.columns::-webkit-scrollbar,.msg-flow::-webkit-scrollbar,
.inbox-list::-webkit-scrollbar,.cpane-mid::-webkit-scrollbar,
.contact3 .cpane::-webkit-scrollbar,.doc-scroll::-webkit-scrollbar,
.sb-scroll::-webkit-scrollbar{width:8px;height:8px}
.columns::-webkit-scrollbar-thumb,.msg-flow::-webkit-scrollbar-thumb,
.inbox-list::-webkit-scrollbar-thumb,.cpane-mid::-webkit-scrollbar-thumb,
.contact3 .cpane::-webkit-scrollbar-thumb,.doc-scroll::-webkit-scrollbar-thumb,
.sb-scroll::-webkit-scrollbar-thumb{background:#c3ccd8;border-radius:4px}
.columns::-webkit-scrollbar-track,.msg-flow::-webkit-scrollbar-track,
.inbox-list::-webkit-scrollbar-track,.cpane-mid::-webkit-scrollbar-track,
.contact3 .cpane::-webkit-scrollbar-track,.doc-scroll::-webkit-scrollbar-track,
.sb-scroll::-webkit-scrollbar-track{background:transparent}

/* -- X5: the composer hint gets its own full-width row under the
   tool buttons instead of a crushed side column (all three
   composer copies: contact stream, inbox, group). -- */
.composer-actions [data-sp="hint"],.composer-actions #cHint,
.composer-actions #gHint{flex:1 1 100%;order:50}

/* -- X6: scoreboard mini-charts — the planned bar reads as a bar
   (faint fill over the outline), bars are wider, and every column
   stands on one baseline. Applies to the Tasks strip and the
   Reports day-by-day chart (same primitives). -- */
.sb-bar{width:9px}
.sb-bars.big .sb-bar{width:12px}
.sb-bar.plan{background:rgba(23,92,211,.16)}
.sb-cols{border-bottom:2px solid #cfd6e0;padding:0 1px}

/* -- X9: one intro-paragraph treatment — capped measure and a
   calmer rhythm, so explainer copy reads the same everywhere. -- */
.lede{max-width:78ch;line-height:1.55}

/* -- Tables: phone numbers never break mid-number; long emails
   break at the cell edge instead of dangling on a hyphen. -- */
td[data-col="phone"]{white-space:nowrap}
td[data-col="email"]{overflow-wrap:anywhere}

/* -- Kanban: move buttons form an even 2-up grid (a lone button
   spans the row); a column with no cards keeps a working height
   instead of collapsing to a stub. -- */
.deal .moves{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.deal .moves button{display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1.3;padding:4px 6px;min-width:0}
.deal .moves button:only-child{grid-column:1/-1}
.column{min-height:180px}

/* -- Board headers: the Bulk move button sits with its title,
   not at the far edge of the board. -- */
.board-head h2{flex:0 1 auto}

/* mos138: the board head's filtered total (deals · value) — muted
   like the stage .cnt counts, visible whether the board is
   collapsed or open, so a shut board still says what's inside. */
.board-total{color:var(--muted);font-weight:400;font-size:14px;
  white-space:nowrap}

/* -- Every file input gets the house button instead of the grey
   native one (attach controls, imports, the logo picker). -- */
input[type="file"]::file-selector-button{font:inherit;font-size:13px;
  padding:6px 12px;margin-right:10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
input[type="file"]::file-selector-button:hover{background:#f2f4f7}

/* -- KPI tiles: labels sit on one baseline however long the
   number above them runs. -- */
.kpi{display:flex;flex-direction:column}
.kpi .lbl{margin-top:auto}

/* -- Stat tiles fill their row evenly instead of leaving a
   ragged short last row (Calendar stats, iPad). -- */
.stat-tile{flex:1 1 104px}

/* -- Settings sub-nav labels never break mid-word on phone. -- */
.settings-subnav{flex-wrap:wrap}
.settings-subnav a{white-space:nowrap}

/* -- Reports tabs: one scrollable row on phone instead of three
   wrapped rows (scrollbar stays visible but quiet). -- */
@media (max-width:760px){
  .rt-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;
    scrollbar-color:#c3ccd8 transparent}
  .rt-tab{white-space:nowrap;flex:none}
}

/* -- Inbox tabs wrap to a second row rather than clipping the
   last tab mid-word. -- */
.inbox-tabs{flex-wrap:wrap}

/* -- Booking-link rows: the URL sits in a slightly smaller face
   so more of the (long) link is readable in the field. -- */
.calm-link input{font-size:13px}

/* -- Receipts: thumbnails get one fixed frame at every width. -- */
.receipt-thumb{width:140px;height:140px;object-fit:cover;flex:none;
  background:#edf0f3;border:1px solid var(--line)}

/* -- Contacts list at phone width: the row is checkbox, name
   (clamped to two lines) and email (ellipsised); the entity,
   company and phone columns step aside until there is room —
   the phone number is one tap away on the contact's own page. -- */
@media (max-width:640px){
  .contacts-table th[data-col="entities"],
  .contacts-table td[data-col="entities"],
  .contacts-table th[data-col="company"],
  .contacts-table td[data-col="company"],
  .contacts-table th[data-col="phone"],
  .contacts-table td[data-col="phone"]{display:none}
  .contacts-table td[data-col="name"]{max-width:132px}
  .contacts-table td[data-col="name"] > a{display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .contacts-table td[data-col="email"]{max-width:148px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
}

/* -- Contact page: the left pane's field table wraps inside its
   card instead of scrolling internally — it stays a real table
   at the widths where other tables go block-scroll, with fixed
   columns so values wrap instead of pushing the card wider. -- */
.contact3 .cpane-left table{table-layout:fixed;width:100%}
.contact3 .cpane-left td{overflow-wrap:anywhere;min-width:0}
.contact3 .cpane-left td select{min-width:0;max-width:100%}
@media (max-width:1150px){
  .contact3 table{display:table}
}

/* -- Calendar page at phone width: the calendar comes first and
   the stats card follows it; the stats header keeps its label
   and picker together as one control group. -- */
.stats-range-wrap{display:inline-flex;gap:8px;align-items:center;margin-left:auto}
.stats-range-wrap select{width:auto}
@media (max-width:760px){
  .cal-wrap{display:flex;flex-direction:column}
  .cal-wrap > #statsCard{order:9}
  .cal-wrap .stat-tile{padding:8px 10px}
  .cal-wrap .stat-tile .n{font-size:19px}
  .cal-wrap .stat-tile.big .n{font-size:24px}
  .stats-range-wrap{flex:1 1 100%;margin-left:0}
  .stats-range-wrap select{flex:1}
}

/* -- mos119 late additions: button rows + dashboard exception
   board compaction at phone width. -- */
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:640px){
  #exceptions td,#exceptions th{padding:5px 7px;font-size:13px}
}

/* -- Pipelines List view: even column distribution (Jacob,
   2026-10-25 late add). LEAD was running away with the table
   while the right-hand columns bunched and wrapped. The lead
   cell is capped and every cell stays on one line (ellipsis
   past the cap), so the columns share the width evenly; below
   the min-width the card scrolls instead of squeezing. (Fixed
   layout + percentage cols was tried first — Chrome resolves
   the percentages against the wrong basis once the table is
   narrow, so the cap pattern carries it instead.) -- */
.pipes-list{width:100%;min-width:760px}
.pipes-list th{white-space:nowrap}
.pipes-list td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.pipes-list td:first-child{max-width:320px}

/* mos135: Finance Overview — KPI deltas, hand-rolled SVG chart
   panels, donuts, project chip. Layout language follows the finance
   dashboard Jacob picked: stat tiles, grouped bars, bar+line combos,
   pastel heat tables, slightly richer color. */
.finov-delta{font-size:12px;font-weight:600;margin-left:6px;white-space:nowrap}
.finov-delta.up{color:#1e8e3e}
.finov-delta.down{color:#d93025}
.finov-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.finov-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.finov-grid,.finov-grid3{grid-template-columns:1fr}}
.finov-panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px}
.finov-panel h3{margin:0 0 8px;font-size:15px}
.finov-svg{width:100%;height:auto;display:block}
.finov-axis{font-size:11px;fill:var(--muted)}
.finov-axisline{stroke:var(--line);stroke-width:1}
.finov-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:2px 0 8px}
.finov-legend .dot,.finov-legend-list .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.finov-donut-wrap{display:flex;gap:12px;align-items:center}
.finov-donut{width:118px;height:118px;flex:none}
.finov-donut-num{font-size:16px;font-weight:700;fill:#1a1a1a}
.finov-legend-list{font-size:13px;flex:1;min-width:0}
.finov-legend-list .row{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.finov-chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px;background:var(--card)}
.finov-tax table{margin-bottom:2px}

/* mos79: user avatars — the photo variant of .avatar, and the
   topbar's name+face chip. */
.avatar-img{border-radius:50%;object-fit:cover;flex-shrink:0;background:#eef4ff}
.user-chip{display:inline-flex;align-items:center;gap:8px}

/* mos144 — Contacts Filters panel: criterion rows, collapsible
   groups (mos41 chrome rides along via [data-collapse]), active
   filter chips, and the multi-select checkbox clusters. */
.flt-group{border-top:1px solid var(--line);padding:8px 0}
.flt-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:4px 0}
.flt-name{font-weight:600;min-width:170px}
.flt-checks{display:inline-flex;gap:4px 10px;flex-wrap:wrap}
.flt-check{font-weight:400}
.flt-chip{background:#eef4ff;border:1px solid var(--accent,#2f6fed);
  border-radius:999px;padding:2px 6px 2px 11px;font-size:12.5px;font-weight:600;
  display:inline-flex;gap:4px;align-items:center}
.flt-chip button{background:transparent;border:none;color:inherit;
  font-size:14px;cursor:pointer;padding:0 4px}