/* CRM workspace (see public/assets/crm.js). Built on the Money design system:
   the .money-app shell and .m-* parts from money.css, the pl- sidebar pieces
   from pipeline.css, and the cr- pieces below. Every colour is a money token,
   so the dark theme follows. */

.cr-app { grid-template-columns: 236px minmax(0, 1fr); }
/* Full width: the CRM uses the whole screen beside the sidebar. */
.cr-main { max-width: none; width: 100%; }
.cr-app .m-modal.wide { max-width: min(1100px, 94vw); }
.cr-quick { display: flex; gap: 6px; margin-bottom: 8px; }
.cr-quick .m-btn.primary { flex: 1; justify-content: center; }
.cr-navcount { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--m-faint); }
.cr-navcount.warn { color: var(--m-warn); }
.m-nav.active .cr-navcount { color: var(--m-accent); }

.cr-pad { padding: 14px 20px; }
.cr-p { font-size: 12.5px; line-height: 1.55; color: var(--m-muted); margin: 0 0 10px; }
.cr-mt { margin-top: 14px; }
.cr-right { justify-content: flex-end; margin-top: 10px; }
.cr-neg { color: var(--m-neg); font-weight: 600; }
.cr-hi { color: var(--m-neg); font-weight: 800; }
.cr-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-inline .m-input, .cr-inline .m-select { width: auto; flex: 1; min-width: 160px; }
.cr-small { width: auto !important; min-width: 0; font-size: 12.5px; padding: 6px 8px; }
.cr-num { max-width: 90px; }
.cr-w { min-width: 90px; }
.cr-ta { resize: vertical; min-height: 70px; line-height: 1.5; font-family: inherit; }
.cr-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--m-muted); text-decoration: none; margin-bottom: -6px; }
.cr-back:hover { color: var(--m-ink); }
.cr-back svg.i { width: 14px; height: 14px; }
.cr-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--m-ink); cursor: pointer; text-align: left; }
.cr-link:hover { color: var(--m-accent); text-decoration: underline; }
.cr-rowbtn { width: 100%; border: 0; background: none; font: inherit; color: var(--m-ink); text-align: left; }
.cr-rowx { opacity: 0; }
.cr-tl-row:hover .cr-rowx { opacity: 1; }

/* forms */
.cr-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 14px; align-items: end; }
.cr-form.one { grid-template-columns: 1fr; }
/* Two fixed columns, so the deal form sits in the same shape as the Deals
   layout in Zoho. One column on a phone. */
.cr-form.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .cr-form.two { grid-template-columns: 1fr; } }
/* A heading above each block of fields, the way Zoho names its sections. */
.cr-sec { margin: 18px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--m-muted); border-bottom: 1px solid var(--m-line); padding-bottom: 6px; }
.cr-sec:first-child { margin-top: 0; }
/* A figure or stamp the CRM works out; shown, never typed. */
.cr-ro-v { min-height: 34px; display: flex; align-items: center; font-size: 14px; color: var(--m-muted); overflow-wrap: anywhere; }
/* Holds a column so the fields below it stay where Zoho puts them. */
@media (max-width: 640px) { .cr-slot { display: none; } }
.cr-form .m-field.wide { grid-column: 1 / -1; }
.cr-app .m-input, .cr-app .m-select { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--m-line); border-radius: 8px; background: var(--m-surface); color: var(--m-ink); outline: none; width: 100%; }
.cr-app .m-input:focus, .cr-app .m-select:focus { border-color: var(--m-accent); box-shadow: 0 0 0 3px var(--m-accent-soft); }
.cr-app .m-bulk .m-input, .cr-app .m-bulk select { width: auto; }
.cr-file { font: inherit; font-size: 12.5px; }
.cr-details { margin-top: 12px; }
.cr-details summary { cursor: pointer; font-size: 12.5px; color: var(--m-muted); margin-bottom: 8px; }

/* dashboard */
.cr-steps { display: flex; flex-direction: column; gap: 10px; }
.cr-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--m-line); border-radius: 12px; }
.cr-step .n { width: 26px; height: 26px; border-radius: 999px; background: var(--m-accent-soft); color: var(--m-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.cr-step > div { flex: 1; min-width: 0; }
.cr-step b { display: block; font-size: 13px; }
.cr-step em { display: block; font-size: 11.5px; font-style: normal; color: var(--m-faint); margin-top: 2px; }
.cr-pipe + .cr-pipe { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--m-line-soft); }
.cr-pipe-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cr-pipe-head b { font-size: 13.5px; }
.cr-pipe-head span { flex: 1; font-size: 11.5px; color: var(--m-faint); }
.cr-bar { display: grid; grid-template-columns: 140px 1fr 28px; align-items: center; gap: 10px; font-size: 12px; padding: 3px 0; }
.cr-bar .l { color: var(--m-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-bar .b { height: 8px; border-radius: 999px; background: var(--m-surface-2); overflow: hidden; }
.cr-bar .b i { display: block; height: 100%; background: var(--m-accent); border-radius: 999px; min-width: 2px; }
.cr-bar .v { text-align: right; font-weight: 600; }
.cr-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--m-line); flex-shrink: 0; }
.cr-dot.pos { background: var(--m-pos); } .cr-dot.accent { background: var(--m-accent); } .cr-dot.warn { background: var(--m-warn); } .cr-dot.neg { background: var(--m-neg); }
.cr-kind { width: 30px; height: 30px; border-radius: 9px; background: var(--m-surface-2); color: var(--m-muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cr-kind svg.i { width: 15px; height: 15px; }
.cr-unread .m-row-title { font-weight: 700; }

/* contacts */
.cr-lists { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-chip { border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-muted); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.cr-chip em { font-style: normal; color: var(--m-faint); margin-left: 3px; }
.cr-chip:hover { color: var(--m-ink); border-color: var(--m-faint); }
.cr-chip.on { background: var(--m-accent); border-color: var(--m-accent); color: #fff; }
.cr-chip.on em { color: rgba(255, 255, 255, .75); }
.cr-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--m-line); border-radius: 9px; background: var(--m-surface); }
.cr-search svg.i { width: 15px; height: 15px; color: var(--m-faint); }
.cr-search input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: 13px; padding: 8px 0; color: var(--m-ink); min-width: 0; }
.cr-table td { vertical-align: middle; }
.cr-cb { width: 34px; }
.cr-name { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--m-ink); min-width: 0; }
.cr-name span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cr-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-name em { font-style: normal; font-size: 11px; color: var(--m-faint); }
.cr-name:hover b { color: var(--m-accent); }
.cr-av { width: 30px; height: 30px; border-radius: 999px; background: var(--m-accent-soft); color: var(--m-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; letter-spacing: .02em; }
.cr-av.lg { width: 54px; height: 54px; font-size: 18px; }
.cr-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--m-surface-2); color: var(--m-muted); margin: 0 4px 3px 0; white-space: nowrap; max-width: 100%; box-sizing: border-box; }
.cr-rec-tags .cr-tag { white-space: normal; overflow-wrap: anywhere; }
.cr-tag button { border: 0; background: none; padding: 0 0 0 2px; font-size: 13px; line-height: 1; color: var(--m-faint); cursor: pointer; }
.cr-tag button:hover { color: var(--m-neg); }
.cr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 12px; }
.cr-tagadd { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; width: 100%; }
.cr-tagadd .m-input { flex: 1; padding: 5px 8px; font-size: 12px; }
.cr-more { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 20px; border-top: 1px solid var(--m-line-soft); font-size: 12px; }
.cr-more .m-faint { margin-right: auto; }

/* one contact */
.cr-person { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cr-person-main { flex: 1; min-width: 220px; overflow-wrap: anywhere; }
.cr-person-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; }
.cr-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cr-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cr-ctabs { margin: -4px 0 12px; }
.cr-compose { display: flex; flex-direction: column; gap: 10px; }
.cr-dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 12.5px; }
.cr-dl dt { color: var(--m-faint); }
.cr-dl dd { margin: 0; overflow-wrap: anywhere; }
.cr-dl a { color: var(--m-accent); text-decoration: none; }
.cr-notes { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--m-surface-2); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cr-tl { display: flex; flex-direction: column; }
.cr-tl-row { display: flex; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--m-line-soft); align-items: flex-start; }
.cr-tl-row:first-child { border-top: 0; }
.cr-tl-row.alert .cr-kind { background: var(--m-warn-soft); color: var(--m-warn); }
.cr-tl-main { flex: 1; min-width: 0; }
.cr-tl-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.cr-tl-head b { font-weight: 600; }
.cr-tl-head .m-faint { font-size: 11px; }
.cr-when { margin-left: auto; font-size: 11px; color: var(--m-faint); white-space: nowrap; }
.cr-tl-main .m-actions { margin-top: 8px; }
.cr-tl-body { margin-top: 4px; font-size: 12.5px; color: var(--m-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.cr-task.done .m-row-title { text-decoration: line-through; color: var(--m-faint); }
.cr-done { font-size: 11.5px; color: var(--m-faint); display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--m-line-soft); }
.cr-done svg.i { width: 12px; height: 12px; vertical-align: -1px; }

/* deals board */
.cr-ptabs { border-bottom: 0; }
.cr-app .m-tabs { scrollbar-width: none; }
.cr-app .m-tabs::-webkit-scrollbar { display: none; }
.cr-up svg.i { transform: rotate(90deg); }
.cr-stage .cr-num { flex: 0 0 76px; }
.cr-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.cr-col-stage { background: var(--m-surface-2); border-radius: 12px; padding: 10px; min-height: 160px; border: 2px dashed transparent; }
.cr-col-stage.over { border-color: var(--m-accent); background: var(--m-accent-soft); }
.cr-col-stage header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 4px 10px; }
.cr-col-stage header b { font-size: 12.5px; }
.cr-col-stage header span { font-size: 11px; color: var(--m-faint); white-space: nowrap; }
.cr-col-stage.won header b { color: var(--m-pos); }
.cr-col-stage.lost header b { color: var(--m-faint); }
.cr-cards { display: flex; flex-direction: column; gap: 8px; }
.cr-card { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 10px; padding: 10px 11px; box-shadow: var(--m-shadow); cursor: grab; }
.cr-card.dragging { opacity: .5; }
.cr-card-open { display: block; width: 100%; border: 0; background: none; padding: 0; font: inherit; color: var(--m-ink); text-align: left; cursor: pointer; }
.cr-card-open b { display: block; font-size: 12.5px; font-weight: 600; }
.cr-card-open em { display: block; font-size: 11.5px; font-style: normal; color: var(--m-muted); margin-top: 2px; }
.cr-card-open:hover b { color: var(--m-accent); }
.cr-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; }
.cr-card-meta .v { font-weight: 600; margin-right: auto; }
.cr-move { margin-top: 8px; width: 100%; font: inherit; font-size: 11px; padding: 3px 6px; border: 1px solid var(--m-line-soft); border-radius: 6px; background: var(--m-surface); color: var(--m-muted); }
.cr-empty-col { font-size: 11.5px; color: var(--m-faint); text-align: center; padding: 18px 6px; border: 1px dashed var(--m-line); border-radius: 10px; }

/* drafts */
.cr-mail { background: var(--m-surface-2); border-radius: 10px; padding: 12px 14px; }
.cr-mail b { display: block; font-size: 13px; margin-bottom: 6px; }
.cr-mail pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: 12.5px; color: var(--m-muted); }
.cr-quickadd { padding: 2px 0; }
.cr-quickadd .m-input[type=date] { max-width: 170px; flex: 0 0 auto; }

/* rules */
.cr-rule .m-row-main { text-decoration: none; color: var(--m-ink); }
.cr-rule .m-row-main:hover .m-row-title { color: var(--m-accent); }
.cr-rule .m-row-sub { white-space: normal; }
.cr-rule .m-row-sub b { font-weight: 600; color: var(--m-muted); }
.cr-recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cr-recipe { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-surface); font: inherit; color: var(--m-ink); text-align: left; cursor: pointer; }
.cr-recipe:hover { border-color: var(--m-accent); background: var(--m-surface-2); }
.cr-recipe svg.i { color: var(--m-accent); width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.cr-recipe b { display: block; font-size: 13px; }
.cr-recipe em { display: block; font-style: normal; font-size: 11.5px; color: var(--m-faint); margin-top: 2px; }
.cr-cond { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.cr-action { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--m-line-soft); }
.cr-action:first-child { border-top: 0; padding-top: 0; }
.cr-action .cr-form { flex: 1; }
.cr-actn { width: 24px; height: 24px; border-radius: 999px; background: var(--m-accent-soft); color: var(--m-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; margin-top: 22px; }
.cr-actbtns { display: flex; gap: 2px; margin-top: 20px; }
.cr-merge { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.cr-merge code, .cr-mf { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--m-surface-2); color: var(--m-muted); border: 0; }
.cr-mf { cursor: pointer; }
.cr-mf:hover { background: var(--m-accent-soft); color: var(--m-accent); }
.cr-test { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 12.5px; }
.cr-test.pass { background: var(--m-pos-soft); }
.cr-test.fail { background: var(--m-warn-soft); }
.cr-test ul { margin: 6px 0 8px; padding-left: 18px; }
.cr-test li.ok { color: var(--m-pos); }
.cr-test li.no { color: var(--m-neg); }

/* pickers */
.cr-pick { position: relative; display: block; flex: 1; min-width: 200px; }
.cr-picklist { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); padding: 4px; max-height: 260px; overflow-y: auto; }
.cr-picklist button { display: block; width: 100%; border: 0; background: none; padding: 7px 9px; border-radius: 7px; font: inherit; font-size: 12.5px; color: var(--m-ink); text-align: left; cursor: pointer; }
.cr-picklist button em { display: block; font-style: normal; font-size: 11px; color: var(--m-faint); }
.cr-picklist button:hover { background: var(--m-surface-2); }
.cr-picklist .m-note { padding: 7px 9px; }
.cr-picked { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--m-accent-soft); color: var(--m-accent); font-size: 12.5px; font-weight: 600; }
.cr-picked svg.i { width: 14px; height: 14px; }
.cr-picked button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 4px; }

/* sequences */
.cr-step-row { display: grid; grid-template-columns: auto 150px 150px minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 10px 0; border-top: 1px solid var(--m-line-soft); }
.cr-step-row:first-child { border-top: 0; }
.cr-step-row .cr-actn { margin-top: 0; margin-bottom: 7px; }

/* import */
.cr-problems { margin-top: 10px; font-size: 12px; color: var(--m-muted); }
.cr-problems ul { margin: 4px 0; padding-left: 18px; }

/* settings */
.cr-stage { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.cr-stage .m-input { flex: 1; min-width: 120px; }
.cr-stage .m-select { width: auto; }
.cr-grip { width: 22px; text-align: center; font-size: 11px; color: var(--m-faint); }
.cr-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--m-surface-2); border: 1px solid var(--m-line); border-radius: 8px; padding: 9px 11px; margin: 4px 0 8px; overflow-x: auto; white-space: pre; color: var(--m-ink); }
.cr-set { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--m-line-soft); }
.cr-set:first-child { border-top: 0; padding-top: 0; }
.cr-set > div:first-child b { display: block; font-size: 13px; }
.cr-set > div:first-child em { display: block; font-size: 11.5px; font-style: normal; color: var(--m-faint); margin-top: 2px; }
.cr-set .cr-inline .m-input { max-width: 110px; }

/* phone */
@media (max-width: 1100px) {
  .cr-two { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .cr-app { grid-template-columns: 1fr; }
  .cr-quick { display: none; }
  .cr-cond { grid-template-columns: 1fr 1fr; }
  .cr-step-row { grid-template-columns: auto 1fr; }
  .cr-bar { grid-template-columns: 100px 1fr 24px; }
  .cr-board { grid-auto-columns: minmax(220px, 80vw); }
  .cr-table th:nth-child(5), .cr-table td:nth-child(5), .cr-table th:nth-child(6), .cr-table td:nth-child(6) { display: none; }
  .cr-set { flex-direction: column; align-items: flex-start; }
}

/* ---- part 2: duplicates, referrals, analytics, campaigns, Books, API ---- */
.cr-pos { color: var(--m-pos); font-weight: 600; }
.cr-strong { font-weight: 700; font-size: 13px; }
.cr-bar:has(.cr-bar-x) { grid-template-columns: 140px 1fr 28px 90px; }
.cr-bar-x { color: var(--m-faint); font-size: 11px; text-align: right; }
.cr-radio { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--m-line); background: var(--m-surface); color: var(--m-ink); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.cr-radio i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--m-faint); }
.cr-radio.on { border-color: var(--m-accent); background: var(--m-accent-soft); }
.cr-radio.on i { border-color: var(--m-accent); background: var(--m-accent); box-shadow: inset 0 0 0 2px var(--m-surface); }
.cr-merge-table th, .cr-merge-table td { vertical-align: top; }
.cr-merge-table th .faint { font-weight: 400; margin-top: 3px; }
.cr-books { font-size: 10.5px; font-weight: 600; color: var(--m-pos); background: var(--m-pos-soft); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.cr-books-panel { border: 1px solid var(--m-line); border-radius: 10px; padding: 12px 14px; background: var(--m-surface-2); }
.cr-books-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cr-books-head b { margin-right: auto; }
.cr-books-panel .m-input { background: var(--m-surface); }
.cr-minitiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.cr-minitiles div { background: var(--m-surface-2); border-radius: 8px; padding: 8px 10px; }
.cr-minitiles em { display: block; font-style: normal; font-size: 11px; color: var(--m-faint); }
.cr-minitiles b { font-size: 15px; }
.cr-code-inline { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; }
.cr-app code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--m-surface-2); border-radius: 4px; padding: 1px 4px; }
@media (max-width: 700px) {
  .cr-bar:has(.cr-bar-x) { grid-template-columns: 100px 1fr 24px; }
  .cr-bar-x { display: none; }
}
.cr-books-panel .m-note { margin-top: 8px; }

/* ---- part 3: calendar, email settings, files, calls, voice, phone bar ---- */
.cr-grow { flex: 1; }
.cr-calbar { align-items: center; gap: 8px; }
.cr-callabel { font-size: 16px; min-width: 150px; text-align: center; white-space: nowrap; }
.cr-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--m-faint); }
.cr-legend i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; margin-left: 6px; }
.cr-legend i.accent, .cr-cal-dots i.accent { background: var(--m-accent); }
.cr-legend i.pos, .cr-cal-dots i.pos { background: var(--m-pos); }
.cr-legend i.warn, .cr-cal-dots i.warn { background: var(--m-warn); }
.cr-cal-h, .cr-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cr-cal-h span { font-size: 11px; font-weight: 600; color: var(--m-faint); text-transform: uppercase; letter-spacing: .04em; padding: 8px 8px 6px; }
.cr-cal-d { min-height: 104px; border-top: 1px solid var(--m-line-soft); border-left: 1px solid var(--m-line-soft); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-cal-d:nth-child(7n + 1) { border-left: 0; }
.cr-cal-d.out { background: var(--m-surface-2); }
.cr-cal-d.out .cr-cal-n { color: var(--m-faint); }
.cr-cal-d.sel { box-shadow: inset 0 0 0 2px var(--m-accent); }
.cr-cal-n { align-self: flex-start; border: 0; background: none; color: var(--m-ink); font: inherit; font-size: 12px; font-weight: 600; width: 26px; height: 26px; border-radius: 999px; cursor: pointer; }
.cr-cal-d.today .cr-cal-n { background: var(--m-accent); color: #fff; }
.cr-cal-evs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-ev { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--m-line); background: var(--m-surface-2); color: var(--m-ink); font: inherit; font-size: 11px; line-height: 1.35; padding: 2px 5px; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-ev em { font-style: normal; color: var(--m-faint); }
.cr-ev.accent { border-left-color: var(--m-accent); background: var(--m-accent-soft); }
.cr-ev.pos { border-left-color: var(--m-pos); background: var(--m-pos-soft); }
.cr-ev.warn { border-left-color: var(--m-warn); background: var(--m-warn-soft); }
.cr-ev.done { text-decoration: line-through; opacity: .7; }
.cr-more { border: 0; background: none; color: var(--m-accent); font: inherit; font-size: 11px; text-align: left; padding: 0 5px; cursor: pointer; }
.cr-cal-dots { display: none; gap: 3px; justify-content: center; }
.cr-cal-dots i { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.cr-strike { text-decoration: line-through; color: var(--m-faint); }
.cr-past { opacity: .72; }
.cr-track { font-size: 11px; }
.cr-upload { position: relative; overflow: hidden; cursor: pointer; }
.cr-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.cr-upload.busy { opacity: .6; pointer-events: none; }
.cr-small-note { font-size: 11px; }
.cr-voice { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cr-voice span { font-size: 11.5px; }
.cr-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.cr-bnav, .cr-fab { display: none; }

@media (max-width: 900px) {
  .cr-cal-d { min-height: 84px; }
  .cr-legend { display: none; }
}
@media (max-width: 700px) {
  .cr-main { padding-bottom: 150px; }
  .cr-cal-d { min-height: 48px; padding: 2px; align-items: center; }
  .cr-cal-evs { display: none; }
  .cr-cal-dots { display: flex; }
  .cr-calbar { flex-wrap: wrap; }
  .cr-callabel { min-width: 0; flex: 1 0 auto; font-size: 15px; }
  .cr-calbar .cr-grow { display: none; }
  .cr-calbar .m-seg { order: 5; flex-basis: 100%; }
  .cr-calbar .m-seg .m-btn { flex: 1; justify-content: center; }
  .cr-bnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--m-surface); border-top: 1px solid var(--m-line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .cr-bnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; font-size: 10.5px; color: var(--m-faint); min-height: 44px; border-radius: 8px; }
  .cr-bnav a.on { color: var(--m-accent); font-weight: 600; background: var(--m-accent-soft); }
  .cr-bnav svg { width: 20px; height: 20px; }
  .cr-fab { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 41; }
  .cr-fab-btn { width: 54px; height: 54px; border-radius: 999px; border: 0; background: var(--m-accent); color: #fff; box-shadow: 0 8px 24px rgba(13, 14, 20, .28); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .cr-fab-btn svg { width: 24px; height: 24px; }
  .cr-fab-menu { display: flex; flex-direction: column; align-items: stretch; gap: 6px; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 14px; padding: 8px; box-shadow: 0 8px 24px rgba(13, 14, 20, .2); min-width: 150px; }
  .cr-fab-menu .m-btn { justify-content: flex-start; min-height: 44px; }
  .cr-person .m-actions .m-btn { min-height: 40px; }
  body:has(.cr-bnav) .toast { bottom: calc(140px + env(safe-area-inset-bottom)); right: 16px; left: 16px; text-align: center; }
}

/* ---- Sales steps, boards, dashboards (2026-09-17) ---- */
.cr-nowrap { white-space: nowrap; }
.cr-clip { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* Leads -> Prospects -> Deals */
.cr-stepper { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.cr-stepper-step { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-surface); color: var(--m-muted); text-decoration: none; min-width: 120px; }
.cr-stepper-step b { font-size: 18px; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.cr-stepper-step span { font-size: 12.5px; }
.cr-stepper-step:hover { border-color: var(--m-faint); }
.cr-stepper-step.on { border-color: var(--m-accent); background: var(--m-accent-soft); }
.cr-stepper-step.on span, .cr-stepper-step.on b { color: var(--m-accent); }
.cr-stepper-arrow { display: inline-flex; align-items: center; color: var(--m-faint); }
.cr-stepper-arrow svg.i { width: 16px; height: 16px; }

.cr-sboard { grid-auto-columns: minmax(220px, 1fr); }
.cr-col-hint { font-size: 11px; color: var(--m-faint); padding: 0 4px 8px; margin-top: -6px; }
.cr-col-stage.ps-cma header b { color: var(--m-accent); }
.cr-col-stage.ps-hot header b { color: var(--m-neg); }
.cr-col-stage.ps-warm header b { color: var(--m-warn); }
.cr-col-stage.ps-cold header b { color: var(--m-muted); }
.cr-pcard { display: flex; flex-direction: column; gap: 6px; }
.cr-tel { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--m-muted); text-decoration: none; max-width: 100%; }
.cr-tel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-tel svg.i { width: 13px; height: 13px; flex: none; }
.cr-tel:hover { color: var(--m-accent); }
.cr-pc-acts { display: flex; gap: 6px; align-items: center; }
.cr-pc-acts .m-btn { flex: 1; justify-content: center; }
.cr-pc-acts .cr-pst { flex: 1; margin: 0; }
.cr-stepbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-surface); }
.cr-stepbar-l { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; }
.cr-stepbar-l em { font-style: normal; color: var(--m-faint); font-size: 12px; }
.cr-pst-row { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.cr-dots { display: inline-flex; gap: 3px; }
.cr-dots i { width: 18px; height: 5px; border-radius: 3px; background: var(--m-line); }
.cr-dots i.on { background: var(--m-accent); }
.cr-pchoices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cr-pchoices .cr-radio { padding: 10px 12px; align-items: flex-start; }
.cr-pchoices .cr-radio i { margin-top: 3px; }
.cr-pchoices .cr-radio b { display: block; font-size: 13px; }
.cr-pchoices .cr-radio em { display: block; font-style: normal; font-size: 11.5px; color: var(--m-faint); margin-top: 2px; }

/* Calls and meetings */
.cr-dialer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px dashed var(--m-line); border-radius: 12px; background: var(--m-surface); }
.cr-dialer > div { flex: 1; min-width: 0; }
.cr-dialer b { display: block; font-size: 13px; }
.cr-dialer em { display: block; font-style: normal; font-size: 12px; color: var(--m-faint); margin-top: 2px; line-height: 1.45; }
.cr-mtime { width: 76px; flex: none; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-mtime em { display: block; font-style: normal; font-weight: 400; color: var(--m-faint); font-size: 11px; }
.cr-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cr-donut-leg { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 150px; }
.cr-donut-leg div { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cr-donut-leg span { flex: 1; color: var(--m-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-donut-leg em { font-style: normal; color: var(--m-faint); width: 36px; text-align: right; }

/* Dashboards */
.cr-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cr-comp { min-width: 0; }
.cr-comp.full { grid-column: 1 / -1; }
.cr-comp > .m-card { margin: 0; height: 100%; }
.cr-comp.editing > .m-card { outline: 2px dashed var(--m-accent-soft); outline-offset: 2px; }
.cr-perf th[scope="row"] { font-weight: 600; font-size: 12px; color: var(--m-muted); white-space: nowrap; }
.cr-perf th, .cr-perf td, .cr-funtable th, .cr-funtable td { padding-left: 8px; padding-right: 8px; }
.cr-perf thead th { white-space: nowrap; }
.cr-perf .cur { background: var(--m-accent-soft); }
.cr-perf td { font-variant-numeric: tabular-nums; }
.cr-funnel { display: flex; align-items: flex-end; gap: 6px; padding: 4px 2px; }
.cr-fun-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.cr-fun-n { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-fun-bar { display: flex; align-items: flex-end; height: 130px; width: 100%; max-width: 70px; }
.cr-fun-bar i { display: block; width: 100%; background: #9BC45A; border-radius: 4px 4px 0 0; min-height: 2px; }
.cr-fun-l { font-size: 11.5px; color: var(--m-muted); }
.cr-fun-step { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; font-size: 12px; color: var(--m-muted); min-width: 44px; }
.cr-fun-step b { color: var(--m-ink); }
.cr-fun-step svg.i { width: 14px; height: 14px; }
.cr-fun-rate { display: flex; flex-direction: column; align-items: center; align-self: center; padding-left: 8px; border-left: 1px solid var(--m-line); min-width: 80px; text-align: center; }
.cr-fun-rate b { font-size: 20px; }
.cr-fun-rate span { font-size: 10.5px; color: var(--m-faint); text-transform: uppercase; letter-spacing: .03em; }
.cr-funtable td, .cr-srctable td { font-variant-numeric: tabular-nums; }
.cr-srctable .cr-total td, .cr-spend .cr-total td, .cr-spend .cr-total th { font-weight: 700; border-top: 2px solid var(--m-line); }
.cr-target-nums { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.cr-target-nums b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.cr-target-nums span { font-size: 11.5px; color: var(--m-faint); }
.cr-bullet { position: relative; height: 34px; background: var(--m-surface-2); border-radius: 6px; margin: 4px 0 26px; }
.cr-bullet .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: #E8958F; }
.cr-bullet .fill.pos { background: var(--m-pos); }
.cr-bullet .fill.warn { background: #E8958F; }
.cr-bullet .pace { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--m-faint); }
.cr-bullet .goal { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--m-ink); }
.cr-bullet .goal-l { position: absolute; top: 40px; transform: translateX(-50%); font-size: 11px; color: var(--m-muted); white-space: nowrap; }
.cr-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cr-kpi { border: 1px solid var(--m-line-soft, var(--m-line)); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-kpi .l { font-size: 11.5px; color: var(--m-muted); }
.cr-kpi b { font-size: 20px; font-variant-numeric: tabular-nums; }
.cr-kpi .s { font-size: 11px; }
.cr-bignum { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; padding: 6px 0; }
.cr-bignum em { display: block; font-style: normal; font-size: 12px; font-weight: 400; color: var(--m-faint); margin-top: 4px; }
.cr-formula { display: block; margin-top: 8px; font-size: 12px; color: var(--m-muted); background: var(--m-surface-2); padding: 6px 8px; border-radius: 6px; overflow-wrap: anywhere; }
.cr-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cr-gal { text-align: left; border: 1px solid var(--m-line); background: var(--m-surface); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--m-ink); }
.cr-gal:hover { border-color: var(--m-accent); background: var(--m-accent-soft); }
.cr-gal b { display: block; font-size: 13px; }
.cr-gal em { display: block; font-style: normal; font-size: 11.5px; color: var(--m-faint); margin-top: 3px; line-height: 1.4; }
.cr-comptype { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--m-accent); margin-bottom: 10px; }
.cr-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; max-height: 220px; overflow: auto; padding: 4px 2px; }
.cr-checks .m-check.off { opacity: .45; }
.cr-names { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; max-height: 120px; overflow: auto; }
.cr-names .cr-tag { cursor: pointer; border: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cr-filter { margin-bottom: 6px; }
.cr-filter .m-select, .cr-filter .m-input { flex: 1; min-width: 110px; }
.cr-preview { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--m-line); }
.cr-preview .m-card { margin: 6px 0 0; }
.cr-spend .cr-cell { width: 86px; min-width: 70px; padding: 5px 6px; font-size: 12.5px; text-align: right; }
.cr-spend th[scope="row"] { white-space: nowrap; font-weight: 600; }

@media (max-width: 1000px) {
  .cr-dash { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .cr-stepper-step { min-width: 0; flex: 1; padding: 8px 10px; }
  .cr-stepper-arrow { display: none; }
  .cr-pchoices { grid-template-columns: minmax(0, 1fr); }
  .cr-funnel { gap: 2px; }
  .cr-fun-step { min-width: 34px; font-size: 11px; }
  .cr-fun-rate { min-width: 60px; padding-left: 4px; }
  .cr-fun-bar { height: 100px; }
  .cr-stepbar-l { width: 100%; }
}

/* Wide screens: boards and the dashboard grow with the window. */
@media (min-width: 1600px) {
  .cr-board { grid-auto-columns: minmax(260px, 1fr); }
  .cr-dash { gap: 20px; }
}

/* ---------------------------------------------------------- rail groups
   Sales sits at the top and stays open; everything else folds away, so the
   rail is a short list of places rather than a wall of links. */
.cr-side .cr-group { display: flex; flex-direction: column; gap: 2px; }
.cr-group-head { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 12px; padding: 9px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--m-ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.cr-group-head:hover { background: var(--m-surface-2); }
.cr-group-head .n { flex: 1; min-width: 0; }
.cr-group-head svg.i.cr-chev { width: 15px; height: 15px; color: var(--m-faint); transition: transform .12s ease; }
.cr-group-head svg.i.cr-chev.open { transform: rotate(90deg); }
.cr-side .m-nav.cr-sub { padding-left: 32px; }
.cr-group:not(.open) > .m-nav { display: none; }

/* ------------------------------------------------------------ card grid
   The list as cards: one person, one card, with the next step on it. */
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cr-gcard { display: flex; flex-direction: column; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 14px; box-shadow: var(--m-shadow); }
.cr-gcard-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 0; }
.cr-gcard-who { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.cr-gcard-who .t { display: flex; flex-direction: column; min-width: 0; }
.cr-gcard-who b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-gcard-who em { font-style: normal; font-size: 11.5px; color: var(--m-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-gcard-who:hover b { color: var(--m-accent); }
.cr-gcard-reach { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 0; }
.cr-gcard-meta { padding: 9px 14px 0; font-size: 11.5px; color: var(--m-faint); }
.cr-gcard-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 14px; border-top: 1px solid var(--m-line-soft); }
.cr-gcard-foot .nx { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.cr-gcard-foot .nx .k { font-size: 9px; font-weight: 600; letter-spacing: .1em; color: var(--m-faint); }
.cr-gcard-foot .nx b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-gcard-foot .nx span { font-size: 11px; }
.cr-gcard-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.cr-gcard-acts .cr-pst { max-width: 104px; }
.cr-gridmore { display: flex; justify-content: flex-end; }
@media (max-width: 640px) { .cr-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------- where everyone stands
   The funnel as four numbers, each one a link to the screen it counts. */
.cr-stand { display: flex; flex-direction: column; gap: 13px; }
.cr-stand-row { display: flex; flex-direction: column; gap: 6px; color: var(--m-ink); }
.cr-stand-row .t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cr-stand-row .l { font-size: 13px; color: var(--m-muted); }
.cr-stand-row b { font-size: 14px; font-weight: 700; }
.cr-stand-row .b { display: block; height: 8px; border-radius: 999px; background: var(--m-surface-2); overflow: hidden; }
.cr-stand-row .b i { display: block; height: 100%; border-radius: 999px; background: var(--m-accent); }
.cr-stand-row:hover .l, .cr-stand-row:hover b { color: var(--m-accent); }

/* a heading above a card grid on the home screen */
.cr-secthead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cr-secthead h3 { margin: 0; font-size: 15px; font-weight: 700; }

/* sent email: which tracked links were clicked */
.cr-clicks { border: 0; background: transparent; padding: 0 0 0 6px; font: inherit; font-size: 11.5px; color: var(--m-accent); cursor: pointer; text-decoration: underline; }
.cr-links { margin-top: 8px; border-top: 1px solid var(--m-line-soft); }
.cr-linkrow { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--m-line-soft); font-size: 12px; }
.cr-linkrow .u { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-linkrow b { font-weight: 600; white-space: nowrap; }

/* ---- the deal page (crm.js viewDeal): a record's own page, the way Zoho opens one ---- */
.cr-dp-head .cr-av.lg .i { width: 22px; height: 22px; }
.cr-dp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--m-pos-soft); color: var(--m-pos); font-size: 12px; font-weight: 600; text-decoration: none; }
.cr-dp-chip .i { width: 12px; height: 12px; }
.cr-path { display: flex; gap: 4px; overflow-x: auto; padding: 2px 0 10px; margin: 6px 0 8px; scrollbar-width: thin; }
.cr-path-step { flex: 0 0 auto; position: relative; padding: 8px 16px 8px 22px; border: 0; background: var(--m-surface-2); color: var(--m-muted); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.cr-path-step:first-child { padding-left: 14px; border-radius: 8px 0 0 8px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.cr-path-step:hover { background: var(--m-accent-soft); color: var(--m-ink); }
.cr-path-step.past { background: var(--m-pos-soft); color: var(--m-pos); }
.cr-path-step.on { background: var(--m-accent); color: #fff; }
.cr-path-step.on.won { background: var(--m-pos); }
.cr-path-step.on.lost { background: var(--m-neg); }
.cr-path-step:disabled { opacity: .6; cursor: default; }
.cr-path-step:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.cr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.cr-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-fact span { font-size: 11.5px; color: var(--m-faint); text-transform: uppercase; letter-spacing: .04em; }
.cr-fact b, .cr-fact a { font-size: 14px; font-weight: 600; color: var(--m-ink); overflow-wrap: anywhere; }
.cr-dp .cr-notes { margin-top: 14px; }
.cr-dp-reach { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; }
.cr-dp-reach a { color: var(--m-accent-ink); text-decoration: none; }
.cr-dp-tx { padding: 12px 16px 4px; }
.cr-dp-tx-stage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.cr-dp-bar { height: 6px; border-radius: 999px; background: var(--m-surface-2); margin-top: 10px; overflow: hidden; }
.cr-dp-bar i { display: block; height: 100%; background: var(--m-accent); border-radius: 999px; }
.cr-dp-counts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--m-muted); }
.cr-catchup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
@media (max-width: 700px) { .cr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Vendors: the same card as a person, with what they do under the name. */
.cr-vdesc { padding: 10px 14px 0; font-size: 13px; line-height: 1.45; color: var(--m-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cr-vnotes { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.cr-vcard .cr-gcard-head .m-pill { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Forms and Bookings: the question rows and the weekly hours. */
.cr-qrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.cr-hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; }
.cr-hours > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; }
.cr-left { justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 700px) { .cr-qrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 8px; border-bottom: 1px solid var(--m-line-soft); } }

/* Recruiting lanes and the roster's onboarding list. */
.cr-lanes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.cr-lane { background: var(--m-surface-2); border: 1px solid var(--m-line); border-top: 3px solid var(--m-line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.cr-lane.tone-won { border-top-color: var(--m-pos); }
.cr-lane.tone-warm { border-top-color: var(--m-warn); }
.cr-lane.tone-lost { border-top-color: var(--m-faint); }
.cr-lane.tone-parked { border-top-style: dashed; }
.cr-lane > header { display: flex; justify-content: space-between; font-size: 12.5px; padding: 0 2px; }
.cr-lane > header span { color: var(--m-faint); }
.cr-lane-empty { color: var(--m-faint); text-align: center; padding: 14px 0; }
.cr-lcard { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cr-lcard-name { font: inherit; font-size: 14px; font-weight: 700; color: var(--m-ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.cr-lcard-name:hover { color: var(--m-accent); }
.cr-lcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.cr-steps { padding: 10px 14px 0; font-size: 13px; }
.cr-steps summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.cr-steps .m-check { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; }
.cr-dim { opacity: .6; }

/* ---- Record page: a lead, prospect, contact or deal, laid out the way a
   record is in Zoho. Tags under the name, a "Related list" rail on the left
   that jumps to each section, Overview / Timeline over the body. ---- */
.cr-rec-head { align-items: flex-start; }
.cr-rec-tags { margin-top: 8px; color: var(--m-muted); }
.cr-rec-tags > svg.i { width: 14px; height: 14px; margin-right: 4px; flex-shrink: 0; }
.cr-rec-tags .cr-tagadd { display: inline-flex; align-items: center; gap: 6px; width: auto; margin-top: 0; }
.cr-app .cr-rec-tags .cr-tagadd .m-input { flex: 0 0 130px; width: 130px; padding: 4px 8px; font-size: 12px; }
.cr-rec { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
.cr-rec-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 1px; padding: 12px 8px; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-surface); }
.cr-rec-rail h4 { margin: 0 8px 8px; font-size: 13px; font-weight: 600; color: var(--m-ink); }
.cr-rec-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--m-muted); text-align: left; cursor: pointer; }
.cr-rec-link:hover { background: var(--m-surface-2); color: var(--m-ink); }
.cr-rec-link em { font-style: normal; font-size: 11px; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--m-surface-2); color: var(--m-muted); text-align: center; }
.cr-rec-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cr-rec-main > div[id] { scroll-margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.cr-rec-main > section[id] { scroll-margin-top: 12px; }
.cr-rec-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.cr-rec-tabs { display: inline-flex; padding: 3px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-surface); }
.cr-rec-tab { border: 0; background: none; font: inherit; font-size: 13px; padding: 6px 18px; border-radius: 999px; color: var(--m-muted); cursor: pointer; }
.cr-rec-tab.on { background: var(--m-surface-2); color: var(--m-ink); font-weight: 600; }
.cr-rec-biz { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 28px; margin: 0; font-size: 13.5px; }
.cr-rec-biz > div { display: contents; }
.cr-rec-biz dt { color: var(--m-muted); text-align: right; }
.cr-rec-biz dd { margin: 0; color: var(--m-ink); overflow-wrap: anywhere; }
.cr-rec-sec + .cr-rec-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--m-line-soft); }
.cr-rec-sec h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--m-ink); }
.cr-rec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin: 0; }
.cr-rec-grid > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; font-size: 13px; }
.cr-rec-grid dt { color: var(--m-muted); text-align: right; }
.cr-rec-grid dd { margin: 0; color: var(--m-ink); overflow-wrap: anywhere; }
.cr-next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; overflow-wrap: anywhere; }
.cr-next > b { min-width: 0; }
.cr-next-day { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; background: var(--m-pos, #16a34a); color: #fff; }
.cr-next-day.late { background: var(--m-neg, #dc2626); }
/* Record pages read at Zoho's size (2026-09-25): Eshu found 13px too small
   to read. Everything inside a lead, prospect, contact or deal steps up, and
   every value with a pencil can be changed where it sits. */
.cr-rec-head .m-title, body.clean-on .money-app:not(.tools-app):not(.sg-app) .cr-rec-head .m-title { font-size: 30px; }
.cr-rec-head .cr-person-sub { font-size: 14.5px; }
.cr-rec-rail h4 { font-size: 15px; }
.cr-rec-link { font-size: 14.5px; padding: 9px 10px; }
.cr-rec-link em { font-size: 12px; }
.cr-rec-bar { font-size: 14px; }
.cr-rec-tab { font-size: 14.5px; padding: 7px 20px; }
.cr-rec-main .m-card-title, body.clean-on .money-app:not(.tools-app):not(.sg-app) .cr-rec-main .m-card-title { font-size: 18px; }
.cr-rec-main .m-row-title { font-size: 15px; }
.cr-rec-main .m-row-sub, .cr-rec-main .m-note, .cr-rec-main .m-faint { font-size: 14px; }
.cr-rec-main .cr-tl-body { font-size: 14.5px; line-height: 1.55; }
.cr-rec-main .cr-tl-head { font-size: 15px; }
.cr-rec-main .cr-next { font-size: 15.5px; }
.cr-rec-biz { font-size: 16px; gap: 6px 28px; align-items: center; }
.cr-rec-sec + .cr-rec-sec { margin-top: 28px; padding-top: 22px; }
.cr-rec-sec h4 { font-size: 17px; margin-bottom: 14px; }
.cr-rec-grid { gap: 4px 36px; }
.cr-rec-grid > div { grid-template-columns: 180px minmax(0, 1fr); gap: 14px; font-size: 15.5px; align-items: start; }
.cr-rec-grid dt, .cr-rec-biz dt { padding: 7px 0; line-height: 1.4; }
.cr-rec-grid dd, .cr-rec-biz dd { padding: 7px 0; line-height: 1.4; min-height: 22px; }
.cr-rec-desc { margin: 0; }
.cr-rec-desc dd { margin: 0; padding: 7px 0; font-size: 15.5px; line-height: 1.55; }
.cr-desc { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Click-to-edit. The cell lights on hover and shows a pencil; the value
   keeps its place so nothing jumps. */
dd.cr-inl { display: flex; align-items: flex-start; gap: 8px; margin: 0 -10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
dd.cr-inl:hover, dd.cr-inl:focus-visible { background: var(--m-surface-2); outline: none; }
dd.cr-inl:focus-visible { box-shadow: 0 0 0 2px var(--m-accent, #1d2733); }
.cr-inl-v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cr-inl-pen { flex-shrink: 0; opacity: 0; color: var(--m-muted); line-height: 0; padding-top: 2px; }
.cr-inl-pen svg.i { width: 15px; height: 15px; }
dd.cr-inl:hover .cr-inl-pen, dd.cr-inl:focus-visible .cr-inl-pen { opacity: 1; }
dd.cr-inl-on { padding: 2px 0; }
.cr-inl-box { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-app .cr-inl-box .m-input, .cr-app .cr-inl-box .m-select { flex: 1 1 140px; min-width: 0; width: auto; font-size: 15px; padding: 7px 10px; }
.cr-inl-box.wide { align-items: flex-start; }
.cr-app .cr-inl-box.wide .cr-ta { flex: 1 1 100%; font-size: 15px; }
.cr-inl-btns { display: inline-flex; gap: 4px; flex-shrink: 0; }
.cr-inl-box.wide .cr-inl-btns { margin-left: auto; }
@media (max-width: 1000px) {
  .cr-rec { grid-template-columns: 1fr; }
  .cr-rec-rail { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 6px; }
  .cr-rec-rail h4 { display: none; }
  .cr-rec-link { width: auto; white-space: nowrap; }
}
@media (max-width: 700px) {
  .cr-rec-grid { grid-template-columns: 1fr; }
  .cr-rec-grid > div { grid-template-columns: 130px minmax(0, 1fr); font-size: 15px; }
  dd.cr-inl .cr-inl-pen { opacity: .6; }
  .cr-rec-grid dt, .cr-rec-biz dt { text-align: left; }
}

/* A long email address cannot wrap on its own, so it widened the whole
   table past its card and cut off the last column. "anywhere" fixed that
   but let the column shrink until every ordinary address broke mid-word
   ("gmail.co / m"), so an address now keeps its line up to 32ch and only
   a longer one breaks. */
.cr-table td.muted > div { overflow-wrap: break-word; max-width: 32ch; }
/* The lead-source table has fourteen columns; at the kit's 20px lead-in it
   ran past its card and cut off "Lead to close". */
.cr-srctable th, .cr-srctable td { padding-left: 10px; padding-right: 8px; }
.cr-srctable th:first-child, .cr-srctable td:first-child { padding-left: 20px; }

/* Grey cards with dark-blue contact lines across the CRM and the
   transaction pipeline, matching the boards (kanban.css). Eshu, 9/26. */
.cr-gcard, .cr-card, .cr-lcard, .pl-gcard { background: #e9ecf1; border-color: #d9dee6; }
.cr-gcard-reach .cr-tel, .cr-gcard-reach a, .pl-gcard .who { color: #1f3f78; font-weight: 500; }
.cr-gcard-reach a:hover { color: #142a52; }
.money-app[data-theme="dark"] :is(.cr-gcard, .cr-card, .cr-lcard, .pl-gcard) { background: var(--m-surface); border-color: var(--m-line); }
.money-app[data-theme="dark"] :is(.cr-gcard-reach .cr-tel, .cr-gcard-reach a, .pl-gcard .who) { color: #8fb3ef; }