/* Connect Digital Office - the dashboard, the departments and Plans & Usage (DIGITAL-OFFICE-CONTRACT.md 5).

   Over apps/shared/app.css and kit.css. Colour only from the theme tokens (--cx-*) and the app's names
   (--pa-*), so Day and Dark both come from connect-theme.css; each department sets one hue
   (--cr-do-hue) that its picture's stage and accents mix with the surface. Every class is `cr-do-`, scoped
   to the CRM module; no !important, no @layer, nothing moves on hover. */

.cr-do { display: flex; flex-direction: column; gap: var(--pa-s5); min-width: 0; }
.cr-do-hue-management { --cr-do-hue: var(--cx-accent); }
.cr-do-hue-marketing { --cr-do-hue: var(--cx-warning); }
.cr-do-hue-sales { --cr-do-hue: var(--cx-success); }
.cr-do-hue-support { --cr-do-hue: var(--cx-info); }

/* ---- the pictures (art.js): 4:3 renders on a transparent ground ------------------------------ */
.cr-do-art { display: block; width: 100%; height: auto; }

/* ---- the header --------------------------------------------------------------------------- */
.cr-do-head { align-items: flex-start; flex-wrap: wrap; row-gap: var(--pa-s3); }
.cr-do-id { display: flex; align-items: center; gap: var(--pa-s3); min-width: 0; flex: 1 1 320px; }
/* app.css aligns a header's first block on the text baseline (.pa-head > div:first-child); beside a picture,
   the words sit at its middle instead. */
.pa-head.cr-do-head > .cr-do-id { align-items: center; }
.cr-do-id > div { min-width: 0; }
/* A business is named what it is named: a long name (or an email-like default) wraps, never runs off a phone. */
.cr-do-head h1 { white-space: normal; overflow-wrap: anywhere; }
.cr-do-logo { width: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--cx-radius); object-fit: contain; background: var(--cx-surface); border: 1px solid var(--cx-border-soft); }
.cr-do-logo.is-mark { display: grid; place-items: center; font-size: 20px; font-weight: 700; color: var(--cx-action-ink); background: var(--cx-action); border: 0; }
.cr-do-head-art { width: 144px; flex: 0 0 144px; }
.cr-do-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2); }
/* Business Setup's progress in the header, a link to the step it is on. */
.cr-do-setup-chip { text-decoration: none; }
.cr-do-setup-chip:hover { text-decoration: underline; }
.cr-do-setup-chip:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }

/* ---- Get Started: four optional steps ------------------------------------------------------ */
.cr-do-start { margin: 0; }
.cr-do-start .pa-panel-head h2 { font-size: var(--cx-text-section); }
.cr-do-start-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pa-s3); margin: 0; padding: 0; list-style: none; }
.cr-do-start-steps a { display: flex; align-items: flex-start; gap: var(--pa-s2); height: 100%; box-sizing: border-box; min-height: var(--pa-tap); padding: var(--pa-s3);
  border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius); color: var(--cx-text); text-decoration: none;
  transition: border-color var(--cx-fast) var(--cx-ease), background-color var(--cx-fast) var(--cx-ease); }
.cr-do-start-steps a:hover { border-color: var(--cx-border-strong); background: var(--cx-hover); }
.cr-do-start-steps a:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-do-start-n { display: inline-grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--cx-border-strong); font-size: var(--cx-text-small); font-weight: 600; }
.cr-do-start-steps .is-next .cr-do-start-n { background: var(--cx-action); border-color: var(--cx-action); color: var(--cx-action-ink); }
.cr-do-start-steps .is-done .cr-do-start-n { background: var(--cx-success-soft); border-color: var(--cx-success); color: var(--cx-success-text); }
.cr-do-start-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cr-do-start-text > span { color: var(--cx-text-2); font-size: var(--cx-text-small); }

/* ---- the KPI row -------------------------------------------------------------------------- */
.cr-do-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.cr-do-kpi { color: inherit; text-decoration: none; transition: border-color var(--cx-fast) var(--cx-ease); }
a.cr-do-kpi:hover { border-color: var(--cx-border-strong); }
a.cr-do-kpi:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }

/* ---- the four departments: 2 x 2, one column below 720px --------------------------------------- */
.cr-do-section { margin: 0 0 var(--pa-s3); font-size: var(--cx-text-section); }
.cr-do-section:focus { outline: none; }   /* focused only to move the reader after Get Started is hidden */
/* CONNECT_OFFICE_COMPACT_V1 (2026-10-24) - the dashboard's four departments as compact cards: the picture
   beside the words (168px; 104px below 720px), one sentence, up to three benefits, one Open link whose target
   is the whole card. 2 x 2 on a desktop, one column below 720px. A department's hue tints the card's corner. */
.cr-do-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pa-s3); }
.cr-do-dept {
  position: relative; display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--cx-border);
  box-shadow: var(--cx-shadow-1); grid-template-columns: 168px minmax(0, 1fr);
  align-items: center; gap: var(--pa-s4); padding: var(--pa-s3) var(--pa-s4) var(--pa-s3) var(--pa-s3);
  border-radius: var(--cx-radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cr-do-hue) 7%, var(--cx-surface)) 0%, var(--cx-surface) 58%);
  transition: border-color var(--pa-fast) var(--pa-ease), box-shadow var(--pa-fast) var(--pa-ease), transform var(--pa-fast) var(--pa-ease);
}
.cr-do-dept:hover { border-color: color-mix(in srgb, var(--cr-do-hue) 45%, var(--cx-border)); box-shadow: 0 8px 20px -10px var(--cx-shadow-2); transform: translateY(-1px); }
.cr-do-dept:has(.cr-do-open:focus-visible) { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-do-dept .cr-do-dept-art {
  display: grid; place-items: center; padding: 0; aspect-ratio: 4 / 3; border-radius: var(--cx-radius);
  background: radial-gradient(ellipse 70% 55% at 50% 62%, color-mix(in srgb, var(--cr-do-hue) 18%, transparent) 0%, transparent 100%);
}
.cr-do-dept .cr-do-dept-art .cr-do-art { width: 100%; height: auto; }
.cr-do-dept .cr-do-dept-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; }
.cr-do-dept h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.cr-do-dept .cr-do-dept-lead {
  margin: 0; color: var(--cx-text-2); font-size: var(--cx-text-small); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cr-do-benefits { display: grid; gap: 3px; margin: 2px 0 0; padding: 0; list-style: none; }
.cr-do-benefit { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--cx-text-2); font-size: var(--cx-text-meta); }
.cr-do-benefit > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-do-benefit > svg { flex: none; color: var(--cx-success); }
.cr-do-benefit.is-premium > svg { color: var(--cx-accent); }
.cr-do-open {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; margin-top: 2px;
  color: var(--cx-link); font-size: var(--cx-text-small); font-weight: 650; text-decoration: none;
}
.cr-do-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cr-do-open:focus-visible { outline: none; }
.cr-do-open svg { transition: transform var(--pa-fast) var(--pa-ease); }
.cr-do-dept:hover .cr-do-open svg { transform: translateX(2px); }
@media (min-width: 721px) and (max-width: 1180px) { .cr-do-dept { grid-template-columns: 128px minmax(0, 1fr); gap: var(--pa-s3); } }
@media (max-width: 720px) { .cr-do-dept { grid-template-columns: 104px minmax(0, 1fr); gap: var(--pa-s3); padding: var(--pa-s3); } }
@media (prefers-reduced-motion: reduce) {
  .cr-do-dept, .cr-do-open svg { transition: none; }
  .cr-do-dept:hover { transform: none; }
  .cr-do-dept:hover .cr-do-open svg { transform: none; }
}


/* ---- the lower sections ------------------------------------------------------------------- */
.cr-do-lower { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--pa-s4); align-items: start; }
.cr-do-col { display: flex; flex-direction: column; gap: var(--pa-s4); min-width: 0; }
.cr-do-panel { margin: 0; min-width: 0; }
.cr-do-panel h2 { font-size: var(--cx-text-section); }
.cr-do-list .pa-row-side { flex-wrap: wrap; justify-content: flex-end; }
.cr-do-quiet { display: flex; align-items: center; gap: var(--pa-s2); padding: var(--pa-s2) 0; color: var(--cx-text-2); }
.cr-do-quiet p { margin: 0; font-size: var(--cx-text-small); }
.cr-do-next { margin: 0 0 var(--pa-s3); padding: var(--pa-s3); border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius); background: var(--cx-surface-2); }
.cr-do-next p { margin: 4px 0 var(--pa-s2); color: var(--cx-text-2); font-size: var(--cx-text-small); }
.cr-do-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pa-s2); margin: 0; padding: 0; list-style: none; }
.cr-do-quick a { display: flex; align-items: center; gap: 8px; min-height: var(--pa-tap); padding: 8px 10px; border: 1px solid var(--cx-border-soft);
  border-radius: var(--cx-radius); color: var(--cx-text); font-size: var(--cx-text-small); font-weight: 600; text-decoration: none; }
.cr-do-quick a:hover { border-color: var(--cx-border-strong); background: var(--cx-hover); }
.cr-do-quick a:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }

/* ---- a department's page ------------------------------------------------------------------ */
/* The steps it walks a customer through (Sales, Customer Service), else its groups: each opens its group. */
.cr-do-journey ol { display: flex; flex-wrap: wrap; gap: var(--pa-s2); margin: 0; padding: 0; list-style: none; }
.cr-do-journey button { display: inline-flex; align-items: center; gap: 8px; min-height: var(--pa-tap); padding: 6px 14px 6px 8px;
  border: 1px solid var(--cx-border); border-radius: var(--cx-radius-pill); background: var(--cx-surface); color: var(--cx-text);
  font: inherit; font-size: var(--cx-text-small); font-weight: 600; cursor: pointer;
  transition: border-color var(--cx-fast) var(--cx-ease), background-color var(--cx-fast) var(--cx-ease); }
.cr-do-journey.is-groups button { padding: 6px 16px; }
.cr-do-journey button:hover { border-color: var(--cx-border-strong); background: var(--cx-hover); }
.cr-do-journey button:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-do-journey-n { display: inline-grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--cr-do-hue) 22%, var(--cx-surface)); font-size: 12px; font-weight: 700; }
/* The six services: each card one link - picture, name, one line, the one word for what it costs or needs now. */
.cr-do-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pa-s4); margin: 0; padding: 0; list-style: none; }
.cr-do-cards > li { display: flex; min-width: 0; }
.cr-do-card { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; overflow: hidden; color: var(--cx-text); text-decoration: none;
  background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); box-shadow: var(--cx-shadow-1);
  transition: border-color var(--cx-fast) var(--cx-ease), background-color var(--cx-fast) var(--cx-ease); }
.cr-do-card:hover { border-color: var(--cx-border-strong); }
.cr-do-card:active { background: var(--cx-surface-2); }
.cr-do-card:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-do-card-art { display: grid; place-items: center; padding: var(--pa-s3) var(--pa-s4) 0;
  background: radial-gradient(ellipse 60% 46% at 50% 60%, color-mix(in srgb, var(--cr-do-hue) 18%, transparent) 0%, transparent 100%); }
.cr-do-card-art .cr-do-art { width: min(100%, 220px); }
.cr-do-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; padding: var(--pa-s2) var(--pa-s4) var(--pa-s4); }
.cr-do-card-title { font-size: var(--cx-text-body, 15px); font-weight: 650; overflow-wrap: anywhere; }
.cr-do-card-sub { color: var(--cx-text-2); font-size: var(--cx-text-small); overflow-wrap: anywhere; }
.cr-do-card-live { display: flex; flex-direction: column; gap: 2px; color: var(--cx-text, inherit); font-size: var(--cx-text-small); overflow-wrap: anywhere; }
.cr-do-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-s2); margin-top: auto; padding-top: var(--pa-s2); }
.cr-do-card-go { display: inline-grid; color: var(--cx-text-3); }
.cr-do-card:hover .cr-do-card-go, .cr-do-card:focus-visible .cr-do-card-go { color: var(--cx-text); }
.cr-do-scope { display: flex; align-items: flex-start; gap: 6px; margin: 0; }

/* ---- Plans & Usage ------------------------------------------------------------------------ */
.cr-do-plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--pa-s3); padding-top: 10px; }
.cr-do-plan { position: relative; display: flex; flex-direction: column; gap: var(--pa-s2); min-width: 0; padding: var(--pa-s4);
  background: var(--cx-surface); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); }
.cr-do-plan.is-recommended { border-color: var(--cx-action); box-shadow: inset 0 0 0 1px var(--cx-action); }
.cr-do-plan.is-current { background: var(--cx-selected); }
.cr-do-plan h3 { margin: 0; font-size: var(--cx-text-section); }
.cr-do-plan .pa-help { margin: 0; }
.cr-do-plan-flag { position: absolute; top: -10px; left: var(--pa-s4); padding: 2px 8px; border-radius: var(--cx-radius-pill); font-size: 12px; font-weight: 700;
  color: var(--cx-action-ink); background: var(--cx-action); }
.cr-do-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; }
.cr-do-price b { font-size: 24px; letter-spacing: -0.01em; }
.cr-do-price span { color: var(--cx-text-2); font-size: var(--cx-text-meta); }
.cr-do-plan-includes { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--cx-text-small); font-weight: 600; }
.cr-do-plan-limits { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--cx-text-small); }
.cr-do-plan-limits li { display: flex; justify-content: space-between; gap: 8px; }
.cr-do-plan-limits li span { min-width: 0; color: var(--cx-text-2); }
.cr-do-plan-limits li b { flex: 0 0 auto; white-space: nowrap; text-align: right; }
.cr-do-plan-act { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.cr-do-payer { margin-top: var(--pa-s4); }
.cr-do-payer h3 { margin: 0 0 4px; font-size: var(--cx-text-body); }
.cr-do-payer-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--pa-s3); }
.cr-do-details { margin-top: var(--pa-s4); }
.cr-do-details > summary { display: flex; align-items: center; min-height: var(--pa-tap); font-weight: 600; cursor: pointer; }
.cr-do-matrix { overflow-x: auto; }
.cr-do-matrix .cr-do-matrix-group th { background: var(--cx-surface-2); font-size: var(--cx-text-meta); }
.cr-do-terms { margin: var(--pa-s3) 0 0; }
.cr-do-usage-group { margin-bottom: var(--pa-s4); }
.cr-do-usage-group h3 { margin: 0 0 var(--pa-s2); font-size: var(--cx-text-body); }

/* ---- smaller screens ---------------------------------------------------------------------- */
@media (max-width: 1280px) { .cr-do-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .cr-do-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .cr-do-lower { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .cr-do-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-do-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-do-start-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) { .cr-do-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  /* Get Started stays short on a phone, so the departments are in the first screen: the four steps by name. */
  .cr-do-start-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pa-s2); }
  .cr-do-start-steps a { align-items: center; padding: var(--pa-s2) var(--pa-s3); }
  .cr-do-start-text > span { display: none; }
  .cr-do-head-art { width: 96px; flex-basis: 96px; }
  /* On a phone each service is a short row: the picture beside its name, so all six are a quick scroll. */
  .cr-do-cards { grid-template-columns: minmax(0, 1fr); gap: var(--pa-s3); }
  .cr-do-card { flex-direction: row; align-items: center; }
  .cr-do-card-art { flex: 0 0 112px; width: 112px; padding: var(--pa-s2); }
  .cr-do-card-body { padding: var(--pa-s3) var(--pa-s3) var(--pa-s3) 0; }
  .cr-do-card-foot { padding-top: 2px; }
  .cr-do-plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) { .cr-do-quick { grid-template-columns: minmax(0, 1fr); } }

/* CONNECT_OFFICE_NOTICE_V1 (2026-10-24) - one compact, dismissible notice near the premium services (department.js):
   a small icon, one sentence, See Plans, a close button. Never a panel that pushes the services down. */
.cr-do-notice {
  display: flex; align-items: center; gap: var(--pa-s2); min-height: 40px; margin: 0 0 var(--pa-s3);
  padding: 6px 6px 6px 12px; border: 1px solid color-mix(in srgb, var(--cx-info) 25%, var(--cx-border-soft));
  border-radius: var(--cx-radius); background: var(--cx-info-soft); color: var(--cx-info-text); font-size: var(--cx-text-small);
}
.cr-do-notice > svg { flex: none; }
.cr-do-notice > p { flex: 1 1 auto; min-width: 0; margin: 0; }
.cr-do-notice .pa-btn.is-sm { min-height: 28px; }
.cr-do-notice-close { flex: none; width: 28px; height: 28px; padding: 0; justify-content: center; }
@media (pointer: coarse) { .cr-do-notice .pa-btn.is-sm, .cr-do-notice-close { min-height: 44px; min-width: 44px; } }
.cr-do-plans-link { align-self: center; }

/* CONNECT_PREMIUM_TONES_V1 (2026-10-24) - the departments take the four restrained tones (tokens.css):
   Business Management blue, Marketing amber, Sales teal, Customer Care violet. Identity only - the pictures'
   stage, a card's corner wash, the journey's step marks. */
.cr-do-hue-management { --cr-do-hue: var(--cx-tone-blue); }
.cr-do-hue-marketing { --cr-do-hue: var(--cx-tone-amber); }
.cr-do-hue-sales { --cr-do-hue: var(--cx-tone-teal); }
.cr-do-hue-support { --cr-do-hue: var(--cx-tone-violet); }

/* CONNECT_TRY_CONNECT_V1 (2026-10-24) - Try Connect (office/demos.js): channel tabs, template cards as radios, the
   preview (a voice transcript, a phone-like chat, an email card - each marked Simulation or Preview), and the live
   demo step. One column, 720px at most, so every step shares one edge; nothing here is decoration over content. */
.cr-dm { display: flex; flex-direction: column; gap: var(--pa-s4); min-width: 0; max-width: 720px; }
.cr-dm-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--cx-border); border-radius: var(--cx-radius-pill);
  background: var(--cx-surface-2); align-self: flex-start; max-width: 100%; overflow-x: auto; }
.cr-dm-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--cx-radius-pill);
  background: transparent; color: var(--cx-text-2); font: inherit; font-size: var(--cx-text-small); font-weight: 600; cursor: pointer; }
.cr-dm-tab[aria-selected="true"] { background: var(--cx-surface); color: var(--cx-text); box-shadow: var(--cx-elev-1); }
.cr-dm-tab:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-dm-step { display: flex; flex-direction: column; gap: var(--pa-s2); min-width: 0; }
.cr-dm-step > h2 { margin: 0; font-size: var(--cx-text-section); }
.cr-dm-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--pa-s2); }
.cr-dm-tpl { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--pa-s3); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); background: var(--cx-surface); cursor: pointer; font-size: var(--cx-text-small);
  transition: border-color var(--pa-fast) var(--pa-ease), box-shadow var(--pa-fast) var(--pa-ease); }
.cr-dm-tpl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cr-dm-tpl:hover { border-color: var(--cx-border-strong); }
.cr-dm-tpl.is-on, .cr-dm-tpl:has(input:checked) { border-color: var(--cx-accent); box-shadow: 0 0 0 1px var(--cx-accent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--cx-accent) 7%, var(--cx-surface)) 0%, var(--cx-surface) 62%); }
.cr-dm-tpl:has(input:focus-visible) { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-dm-tpl b { font-size: 14px; }
.cr-dm-lines, .cr-dm-chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cr-dm-lines li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--pa-s2); font-size: var(--cx-text-small); }
.cr-dm-lines li b { color: var(--cx-text-2); }
.cr-dm-lines li.is-agent b { color: var(--cx-tone-teal-ink); }
.cr-dm-phone { position: relative; max-width: 420px; padding: 36px var(--pa-s3) var(--pa-s3); border: 1px solid var(--cx-border);
  border-radius: 22px; background: color-mix(in srgb, var(--cx-tone-teal) 6%, var(--cx-surface)); }
.cr-dm-chat li { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: var(--cx-text-small); line-height: 1.45;
  background: var(--cx-surface); box-shadow: var(--cx-elev-1); overflow-wrap: anywhere; }
.cr-dm-chat li.is-out { align-self: flex-end; background: var(--cx-tone-teal-soft); color: var(--cx-text); border-bottom-right-radius: 4px; }
.cr-dm-chat li.is-in { align-self: flex-start; border-bottom-left-radius: 4px; }
.cr-dm-sim { position: absolute; top: 10px; left: 14px; padding: 1px 8px; border-radius: var(--cx-radius-pill);
  background: var(--cx-warning-soft); color: var(--cx-warning-text); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.cr-dm-mail { position: relative; padding: 36px var(--pa-s4) var(--pa-s4); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-lg); background: var(--cx-surface); box-shadow: var(--cx-elev-1); }
.cr-dm-subj { margin: 0 0 var(--pa-s2); font-weight: 700; }
.cr-dm-body { margin: 0; white-space: pre-wrap; font: inherit; font-size: var(--cx-text-small); color: var(--cx-text-2); overflow-wrap: anywhere; }
.cr-dm-off { display: flex; gap: var(--pa-s2); align-items: flex-start; padding: 10px var(--pa-s3); border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius); background: var(--cx-surface-2); font-size: var(--cx-text-small); }
.cr-dm-off p { margin: 2px 0 0; color: var(--cx-text-2); }
.cr-dm-off > svg { flex: none; margin-top: 2px; }
.cr-dm-live { display: flex; flex-direction: column; gap: var(--pa-s2); }
.cr-dm-number { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pa-s2); }
.cr-dm-number .pa-field { flex: 1 1 220px; }
.cr-dm-consent { display: flex; gap: 8px; align-items: flex-start; font-size: var(--cx-text-small); }
.cr-dm-consent input { margin-top: 3px; }
.cr-dm-ok { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--cx-success-text); font-weight: 600; }
.cr-dm-proof { padding: var(--pa-s3); border: 1px dashed var(--cx-border-strong); border-radius: var(--cx-radius); }
.cr-dm-proof p { margin: 0 0 6px; }
.pa-try-first { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s2); margin: 0; }
@media (max-width: 640px) {
  .cr-dm-lines li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cr-dm-tab { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .cr-dm-tpl { transition: none; } }

/* CONNECT_OFFICE_FEATURED_V1 (2026-10-25) - a department's featured blocks (department.js `featured`): what a business
   sets up first there - My Products & Services, Marketplace Autopilot, Ads - one link each, above the six services. */
.cr-do-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--pa-s3); margin: 0 0 var(--pa-s4); }
.cr-do-feature { display: flex; align-items: center; gap: var(--pa-s3); min-width: 0; padding: var(--pa-s3) var(--pa-s4); color: var(--cx-text); text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cr-do-hue, var(--cx-accent)) 10%, var(--cx-surface)) 0%, var(--cx-surface) 70%);
  border: 1px solid color-mix(in srgb, var(--cr-do-hue, var(--cx-accent)) 28%, var(--cx-border)); border-radius: var(--cx-radius-lg); box-shadow: var(--cx-shadow-1);
  transition: border-color var(--cx-fast) var(--cx-ease), transform var(--cx-fast) var(--cx-ease); }
.cr-do-feature:hover { border-color: color-mix(in srgb, var(--cr-do-hue, var(--cx-accent)) 55%, var(--cx-border)); }
.cr-do-feature:active { transform: translateY(1px); }
.cr-do-feature:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-do-feature-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: var(--cr-do-hue, var(--cx-accent)); background: color-mix(in srgb, var(--cr-do-hue, var(--cx-accent)) 14%, var(--cx-surface)); }
.cr-do-feature-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.cr-do-feature-title { font-size: var(--cx-text-body, 15px); font-weight: 650; overflow-wrap: anywhere; }
.cr-do-feature-sub { color: var(--cx-text-2); font-size: var(--cx-text-small); overflow-wrap: anywhere; }
.cr-do-feature-cta { flex: none; pointer-events: none; }
@media (max-width: 640px) {
  .cr-do-feature { flex-wrap: wrap; padding: var(--pa-s3); }
  .cr-do-feature-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cr-do-feature { transition: none; } .cr-do-feature:active { transform: none; } }

/* CONNECT_COMMUNICATION_SETUP_V1 (2026-10-25) - Communication Setup (office/comms.js): what Connect knows, then one
   card per channel - its state from evidence, the seven steps, blockers, the ways to connect, Check Now. */
.cr-cs-known { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--pa-s2) var(--pa-s4); margin: 0; }
.cr-cs-known > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-cs-known dt { color: var(--cx-text-2); font-size: var(--cx-text-small); }
.cr-cs-known dd { margin: 0; overflow-wrap: anywhere; }
.cr-cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--pa-s3); align-items: start; }
.cr-cs-channel { display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; }
.cr-cs-head { display: flex; align-items: flex-start; gap: var(--pa-s3); }
.cr-cs-head > div { flex: 1 1 auto; min-width: 0; }
.cr-cs-head h2 { margin: 0; font-size: var(--cx-text-section); }
.cr-cs-icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 12%, var(--cx-surface)); }
.cr-cs-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--cx-text-small); color: var(--cx-text-3); }
.cr-cs-steps li { display: flex; align-items: center; gap: var(--pa-s2); }
.cr-cs-steps li.is-done { color: var(--cx-text-2); }
.cr-cs-steps li.is-next { color: var(--cx-text); font-weight: 650; }
.cr-cs-dot { display: grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--cx-border-strong); }
.cr-cs-steps li.is-done .cr-cs-dot { border-color: var(--cx-success); background: var(--cx-success); color: var(--cx-surface); }
.cr-cs-steps li.is-next .cr-cs-dot { border-color: var(--cx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 20%, transparent); }
.cr-cs-blockers { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; color: var(--cx-warning-text); font-size: var(--cx-text-small); }
.cr-cs-options, .cr-cs-carriers, .cr-cs-links, .cr-cs-dns { margin: 0; padding: 0; list-style: none; }
.cr-cs-options li, .cr-cs-carriers li { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-s3); padding: var(--pa-s2) 0; border-top: 1px solid var(--cx-border-soft); }
.cr-cs-options li > div, .cr-cs-carriers li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cr-cs-links { display: flex; flex-direction: column; gap: 6px; font-size: var(--cx-text-small); }
.cr-cs-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.cr-cs-dns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--pa-s3); }
.cr-cs-dns li { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-s2); font-size: var(--cx-text-small); }
.cr-cs-domain { display: flex; flex-direction: column; gap: var(--pa-s2); align-items: flex-start; }
.cr-cs-more summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.cr-cs-more summary:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; border-radius: var(--cx-radius-sm); }
.cr-cs-foot { display: flex; gap: var(--pa-s2); align-items: flex-start; }
.cr-cs-foot > svg { flex: none; margin-top: 3px; }
@media (max-width: 640px) { .cr-cs-dns { grid-template-columns: minmax(0, 1fr); } .cr-cs-head .pa-chip { align-self: center; } }
@media (pointer: coarse) { .cr-cs-options .pa-btn, .cr-cs-carriers .pa-btn, .cr-cs-channel .pa-actions .pa-btn, .cr-cs-more summary,
  .cr-cs-links a { min-height: 44px; } }

/* CR_CS_COMPACT_V2 (2026-10-30): one row per channel (state, seven-step bar, one action), details on demand,
   the known facts as one strip. Tokens only; the bar's colour always sits beside "Step n of 7" in words. */
.cr-cs { display: flex; flex-direction: column; gap: var(--pa-s3); }
.cr-cs .pa-head .pa-actions { align-items: center; gap: var(--pa-s2); flex-wrap: wrap; }
.cr-cs-sum { display: inline-flex; gap: 3px; }
.cr-cs-sum span { width: 18px; height: 6px; border-radius: var(--cx-radius-pill); background: var(--cx-border); }
.cr-cs-sum span.is-ok { background: var(--cx-success); }
.cr-cs-sum-text { font-size: var(--cx-text-small); }
/* .pa-panel is a flex column: this strip is a row, or flex-basis would set its height. */
.cr-cs-knows { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--pa-s2) var(--pa-s3); padding: var(--pa-s3) var(--pa-s4); }
.cr-cs-knows h2 { margin: 0; font-size: var(--cx-text-small); font-weight: 650; color: var(--cx-text-2); }
.cr-cs-facts { flex: 1 1 420px; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cr-cs-fact { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; min-width: 0; padding: 3px 10px; border-radius: var(--cx-radius-pill); background: var(--cx-surface-2); font-size: var(--cx-text-small); line-height: 1.4; }
.cr-cs-fact span { color: var(--cx-text-3); flex: none; }
.cr-cs-fact strong { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.cr-cs-fact.is-missing { background: var(--cx-warning-soft); }
.cr-cs-fact.is-missing strong { color: var(--cx-warning-text); }
.cr-cs-list { display: flex; flex-direction: column; gap: var(--pa-s2); }
.cr-cs-list .cr-cs-channel { gap: 0; padding: 0; }
.cr-cs-channel.is-warn, .cr-cs-channel.is-bad { border-color: color-mix(in srgb, var(--cx-warning) 40%, var(--cx-border)); }
.cr-cs-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s3) var(--pa-s4); padding: var(--pa-s3) var(--pa-s4); }
.cr-cs-who { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-cs-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--pa-s2); }
.cr-cs-title h2 { margin: 0; font-size: var(--cx-text-body); font-weight: 650; }
.cr-cs-line { margin: 0; font-size: var(--cx-text-small); color: var(--cx-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-cs-progress { flex: 0 1 220px; min-width: 160px; display: flex; flex-direction: column; gap: 4px; }
.cr-cs-bar { display: flex; gap: 3px; }
.cr-cs-seg { flex: 1; height: 6px; border-radius: var(--cx-radius-pill); background: var(--cx-border); }
.cr-cs-seg.is-done { background: var(--cx-action); }
.cr-cs-seg.is-ok { background: var(--cx-success); }
.cr-cs-seg.is-next { background: var(--cx-accent); }
.cr-cs-act { display: flex; align-items: center; gap: var(--pa-s2); flex: none; }
.cr-cs-toggle .pa-ico { transition: transform var(--pa-base) var(--pa-ease); }
.cr-cs-channel.is-open .cr-cs-toggle .pa-ico { transform: rotate(180deg); }
.cr-cs-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--pa-s4) var(--pa-s6); padding: var(--pa-s3) var(--pa-s4) var(--pa-s4) calc(var(--pa-s4) + 40px + var(--pa-s4)); border-top: 1px solid var(--cx-border-soft); }
.cr-cs-details[hidden] { display: none; }
.cr-cs-col { display: flex; flex-direction: column; gap: var(--pa-s2); min-width: 0; }
.cr-cs-col h3 { margin: 0; font-size: var(--cx-text-small); font-weight: 650; color: var(--cx-text-2); }
.cr-cs-stop { display: flex; flex-direction: column; gap: 6px; padding: var(--pa-s2) var(--pa-s3); border-radius: var(--cx-radius-sm); background: var(--cx-warning-soft); }
.cr-cs-stop h3 { color: var(--cx-warning-text); }
@media (max-width: 640px) {
  .cr-cs-row { padding: var(--pa-s3); gap: var(--pa-s2) var(--pa-s3); }
  .cr-cs-progress { flex: 1 1 100%; order: 3; }
  .cr-cs-act { order: 4; flex: 1 1 100%; }
  .cr-cs-act > :first-child { flex: 1; justify-content: center; }
  .cr-cs-details { padding: var(--pa-s3); }
  .cr-cs-knows { padding: var(--pa-s3); }
  .cr-cs-fact strong { max-width: 18ch; }
}

/* CR_DO_PLANS_V2 (2026-10-30) - Plans & Usage (office/plans.js): one notice with the rest folded, "Your Plan" and the
   allowances nearest their limit side by side on a wide screen, the cancel control folded under Manage Plan. */
.cr-do-notices { display: flex; flex-direction: column; gap: var(--pa-s2); }
.cr-do-more > summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; color: var(--cx-text-2); font-size: var(--cx-text-small); font-weight: 600; }
.cr-do-more > summary:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; border-radius: var(--cx-radius-sm); }
.cr-do-more[open] { display: flex; flex-direction: column; gap: var(--pa-s2); }
.cr-do-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pa-s3); }
@media (min-width: 1180px) { .cr-do-top:not(.is-stacked) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
/* A disclosure reads as one: a caret that turns when it opens. */
.cr-do-more > summary, .cr-do-details > summary, .cr-do-manage > summary { list-style: none; gap: 10px; }
.cr-do-more > summary::-webkit-details-marker, .cr-do-details > summary::-webkit-details-marker, .cr-do-manage > summary::-webkit-details-marker { display: none; }
.cr-do-more > summary::before, .cr-do-details > summary::before, .cr-do-manage > summary::before { content: ''; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--cx-fast) var(--cx-ease); }
.cr-do-more[open] > summary::before, .cr-do-details[open] > summary::before, .cr-do-manage[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .cr-do-more > summary::before, .cr-do-details > summary::before, .cr-do-manage > summary::before { transition: none; } }
.cr-do-summary .pa-panel-head { margin-bottom: var(--pa-s2); }
.cr-do-plan-name { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cr-do-fact { margin: var(--pa-s1) 0 0; color: var(--cx-text-2); }
.cr-do-summary-act { margin-top: var(--pa-s4); }
.cr-do-near { gap: var(--pa-s3); }
.cr-do-meter-sub { display: block; color: var(--cx-text-3); font-size: var(--cx-text-small); }
.cr-do-meter-word { font-weight: 700; color: var(--cx-text); }
.cr-do-period .cr-do-details { margin-top: var(--pa-s3); }
.cr-do-manage > summary { display: flex; align-items: center; min-height: var(--pa-tap); font-weight: 600; cursor: pointer; }
.cr-do-manage > summary:focus-visible, .cr-do-details > summary:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; border-radius: var(--cx-radius-sm); }
.cr-do-manage[open] > summary { margin-bottom: var(--pa-s2); }
#cr-do-cmp-h:focus { outline: none; }
@media (max-width: 640px) {
  .cr-do-summary-act .pa-btn { width: 100%; justify-content: center; }
  .cr-do-plan-name { font-size: 20px; }
}
@media (pointer: coarse) { .cr-do-more > summary { min-height: 44px; } }

/* CR_UI_TARGETS_V1 (2026-10-30) - Support Cases: the customer's name is the row's link to them; on touch it gets a
   44 px tall target instead of the 20 px line of text. */
@media (pointer: coarse) { .cr-case-who { display: inline-flex; align-items: center; min-height: var(--pa-tap); } }
@media (pointer: coarse) {
  .cr-do-setup-chip { display: inline-flex; align-items: center; min-height: var(--pa-tap); }
  .cr-dm-tab { min-height: var(--pa-tap); }
}

/* CONNECT_OFFICE_TODAY_FIRST_V1 (2026-10-30) - the dashboard's "Today First" layout, designed on Superdesign:
   what needs the person, the numbers and approvals on the first screen, then the departments. Get Started is one
   slim strip. Four departments in one row from 1280px, each picture whole on its hue wash; below that the compact
   2 x 2 above still holds. Colour only from the tokens; a figure is only ever the server's. */
.cr-do { gap: var(--pa-s4); }
.cr-do-logo { width: 40px; height: 40px; flex-basis: 40px; }
.cr-do-logo.is-mark { font-size: 18px; }

/* Get Started: the heading, four named steps and Hide on one line. */
.cr-do-start { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pa-s3);
  padding: 6px var(--pa-s3) 6px var(--pa-s4); }
.cr-do-start h2 { margin: 0; font-size: var(--cx-text-small); font-weight: 650; white-space: nowrap; }
.cr-do-start-steps { display: flex; flex-wrap: wrap; gap: 2px var(--pa-s2); }
.cr-do-start-steps a { align-items: center; height: auto; min-height: max(var(--pa-tap), 36px); padding: 4px 10px 4px 6px; border-color: transparent; font-size: var(--cx-text-small); }
.cr-do-start-steps .is-next a { background: var(--cx-surface-2); }
.cr-do-start-n { flex-basis: 22px; width: 22px; height: 22px; font-size: var(--cx-text-meta); }
.cr-do-start-text > span { display: none; }
.cr-do-start-text b { font-weight: 600; white-space: nowrap; }
.cr-do-start-steps .is-done .cr-do-start-text b { color: var(--cx-text-2); font-weight: 500; }

/* The first screen: Today's Work beside the numbers and approvals, both columns the same height. */
.cr-do-focus { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--pa-s3); align-items: stretch; min-width: 0; }
.cr-do-focus-side { display: flex; flex-direction: column; gap: var(--pa-s3); min-width: 0; }
.cr-do-focus-side > .cr-do-panel { flex: 1 1 auto; }
.cr-do-focus .cr-do-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The one next step leads Today's Work, with the action that does it. */
.cr-do-next { display: flex; align-items: center; justify-content: space-between; gap: var(--pa-s3); margin: 0 0 var(--pa-s2);
  padding: var(--pa-s3) var(--pa-s4); border: 0; }
.cr-do-next.is-warn { background: var(--cx-accent-soft); box-shadow: inset 3px 0 0 var(--cx-accent); }
.cr-do-next-text { min-width: 0; overflow-wrap: anywhere; }
.cr-do-next-text strong { font-size: var(--cx-text-body); font-weight: 650; }
.cr-do-next p { margin: 2px 0 0; color: var(--cx-text-2); }
.cr-do-next .pa-btn { flex: none; }
/* With nothing under it, the next step fills the panel, so the panel never stands half empty beside the numbers. */
.cr-do-focus > .cr-do-panel { display: flex; flex-direction: column; }
.cr-do-next:last-child { flex: 1 1 auto; margin-bottom: 0; }
.cr-do-next:last-child .cr-do-next-text strong { font-size: var(--cx-text-section); }

/* Four departments in one row: the picture whole above the words, Open on one line across the row. */
@media (min-width: 1280px) {
  .cr-do-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cr-do-dept { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; gap: 0; padding: 0; background: var(--cx-surface); }
  .cr-do-dept .cr-do-dept-art { height: 124px; aspect-ratio: auto; padding: var(--pa-s2) var(--pa-s2) 0; border-radius: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cr-do-hue) 12%, var(--cx-surface)) 0%, var(--cx-surface) 100%); }
  .cr-do-dept .cr-do-dept-art .cr-do-art { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
  .cr-do-dept .cr-do-dept-body { padding: var(--pa-s2) var(--pa-s3) var(--pa-s3); }
  .cr-do-open { margin-top: auto; padding-top: var(--pa-s2); }
}
/* A benefit wraps at every width: cut off mid-word it says nothing. */
.cr-do-benefit { align-items: flex-start; }
.cr-do-benefit > span:first-of-type { overflow: visible; white-space: normal; }
.cr-do-benefit > svg { margin-top: 2px; }

/* Quick Actions one slim row, each as wide as its words; then three equal columns of one height. */
@media (min-width: 721px) {
  .cr-do-quick { display: flex; flex-wrap: wrap; }
  .cr-do-quick li { display: flex; flex: 1 1 auto; }
  .cr-do-quick a { flex: 1 1 auto; white-space: nowrap; }
}
.cr-do-lower .pa-panel-head { min-height: 32px; }
@media (min-width: 1025px) { .cr-do-lower { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pa-s3); align-items: stretch; } }
@media (max-width: 1024px) {
  .cr-do-focus { grid-template-columns: minmax(0, 1fr); }
  .cr-do-lower { gap: var(--pa-s3); }
}
@media (min-width: 901px) and (max-width: 1024px) { .cr-do-focus .cr-do-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cr-do-start { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: var(--pa-s2) var(--pa-s3); }
  .cr-do-start h2 { grid-column: 1; grid-row: 1; }
  .cr-do-start [data-start-hide] { grid-column: 2; grid-row: 1; }
  .cr-do-start-steps { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .cr-do-start-steps a { min-height: var(--pa-tap); padding: 4px 6px; }
  .cr-do-start-text b { white-space: normal; }
  .cr-do-next { flex-direction: column; align-items: stretch; }
  .cr-do-next .pa-btn { justify-content: center; }
}

/* CONNECT_OFFICE_RICH_V1 (2026-10-30) - colour and depth from what the server really says: the header's band washed
   in the four department tones, the setup ring, what is left to finish, a real figure on each department, tone
   tiles, the channels' meter and the activity timeline. A tile's tone is identity, a status keeps its words. */
.cr-do-t-blue { --cr-do-tone-soft: var(--cx-tone-blue-soft); --cr-do-tone-ink: var(--cx-tone-blue-ink); }
.cr-do-t-amber { --cr-do-tone-soft: var(--cx-tone-amber-soft); --cr-do-tone-ink: var(--cx-tone-amber-ink); }
.cr-do-t-teal { --cr-do-tone-soft: var(--cx-tone-teal-soft); --cr-do-tone-ink: var(--cx-tone-teal-ink); }
.cr-do-t-violet { --cr-do-tone-soft: var(--cx-tone-violet-soft); --cr-do-tone-ink: var(--cx-tone-violet-ink); }

/* The header's band. */
.pa-head.cr-do-head { align-items: center; padding: var(--pa-s3) var(--pa-s4); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-lg); box-shadow: var(--cx-shadow-1);
  background: radial-gradient(52% 170% at 100% 0%, color-mix(in srgb, var(--cx-tone-violet) 11%, transparent), transparent 72%),
    radial-gradient(44% 170% at 76% 100%, color-mix(in srgb, var(--cx-tone-teal) 10%, transparent), transparent 72%),
    radial-gradient(40% 150% at 50% 0%, color-mix(in srgb, var(--cx-tone-amber) 9%, transparent), transparent 72%), var(--cx-surface); }
.cr-do-hello { display: block; color: var(--cx-text-3); font-size: var(--cx-text-meta); font-weight: 600; }
.cr-do-head .cr-do-logo { width: 48px; height: 48px; flex-basis: 48px; }
.cr-do-ring-link { display: inline-flex; align-items: center; gap: var(--pa-s2); min-height: 44px; padding: 2px 12px 2px 4px; border-radius: var(--cx-radius-pill); color: var(--cx-text); text-decoration: none;
  transition: background-color var(--cx-fast) var(--cx-ease); }
.cr-do-ring-link:hover { background: var(--cx-hover); }
.cr-do-ring-link:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-do-ring { flex: none; transform: rotate(-90deg); }
.cr-do-ring circle { fill: none; stroke-width: 4; }
.cr-do-ring-bg { stroke: var(--cx-border-strong); }
.cr-do-ring-on { stroke: var(--cx-accent); stroke-linecap: round; }
.cr-do-ring-text { display: flex; flex-direction: column; line-height: 1.25; }
.cr-do-ring-text b { font-size: var(--cx-text-small); font-weight: 650; }
.cr-do-ring-text span { color: var(--cx-text-2); font-size: var(--cx-text-meta); font-variant-numeric: tabular-nums; }

/* What is left to finish, under the next step. */
.cr-do-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-do-left h3 { margin: 0 0 2px; color: var(--cx-text-3); font-size: var(--cx-text-meta); font-weight: 600; }
.cr-do-left ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cr-do-left li a, .cr-do-left li button, .cr-do-left li > span { display: flex; align-items: flex-start; gap: var(--pa-s2); min-height: max(var(--pa-tap), 32px); box-sizing: border-box; padding: 6px var(--pa-s2); border-radius: var(--cx-radius-sm);
  color: var(--cx-text-2); font-size: var(--cx-text-small); text-decoration: none; overflow-wrap: anywhere; transition: background-color var(--cx-fast) var(--cx-ease), color var(--cx-fast) var(--cx-ease); }
.cr-do-left li button { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.cr-do-left li a:hover, .cr-do-left li button:hover { background: var(--cx-hover); color: var(--cx-text); }
.cr-do-left li a:focus-visible, .cr-do-left li button:focus-visible, .cr-do-left-more:focus-visible { outline: 2px solid var(--cx-focus); outline-offset: 2px; }
.cr-do-left-box { flex: none; width: 14px; height: 14px; margin-top: 2px; box-sizing: border-box; border: 1.5px solid var(--cx-border-strong); border-radius: 50%; }
.cr-do-left-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; min-height: max(var(--pa-tap), 28px); padding: 0 var(--pa-s2); color: var(--cx-link); font-size: var(--cx-text-small); font-weight: 600; text-decoration: none; border-radius: var(--cx-radius-sm); }
.cr-do-left-more:hover { text-decoration: underline; }

/* The numbers: bigger figures on tone tiles, always two by two here (app.css's auto-fit outranks a plain class,
   and a collapsed rail would leave it three and one). */
.cr-do-focus .pa-kpis.cr-do-kpis:not(.is-compact):not(.is-money) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 901px) and (max-width: 1024px) { .cr-do-focus .pa-kpis.cr-do-kpis:not(.is-compact):not(.is-money) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cr-do-focus .pa-kpi { padding: var(--pa-s3); }
.cr-do-focus .pa-kpi b { font-size: 24px; }
.cr-do-kpi .pa-kpi-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--cr-do-tone-soft); color: var(--cr-do-tone-ink); }

/* A department's one real figure: on the picture in the row of four, in the words' flow otherwise. */
.cr-do-dept-figure { align-self: flex-start; padding: 2px 8px; border: 1px solid var(--cx-border-soft); border-radius: var(--cx-radius-pill); background: var(--cx-surface);
  color: var(--cx-text-2); font-size: var(--cx-text-meta); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: var(--cx-shadow-1); }
@media (min-width: 1280px) { .cr-do-dept-figure { position: absolute; top: var(--pa-s2); right: var(--pa-s2); } }

/* Quick Actions on tone tiles. */
.cr-do-quick a > .pa-ico { flex: none; box-sizing: border-box; width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--cr-do-tone-soft); color: var(--cr-do-tone-ink); }
.cr-do-quick a { padding: 6px 12px 6px 8px; transition: border-color var(--cx-fast) var(--cx-ease), background-color var(--cx-fast) var(--cx-ease); }

/* The channels: how many are set up, then each on its tile. */
.cr-do-meter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; margin: 2px 0 var(--pa-s1); }
.cr-do-meter i { height: 6px; border-radius: var(--cx-radius-pill); background: var(--cx-border); }
.cr-do-meter i.is-on { background: var(--cx-success); }
.cr-do-channel-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--cx-surface-2); color: var(--cx-text-2); }
.cr-do-channel-ico.is-on { background: var(--cx-success-soft); color: var(--cx-success-text); }
.cr-do-list .pa-row-main.cr-do-channel { display: flex; flex-direction: row; align-items: center; gap: var(--pa-s2); min-width: 0; }
.cr-do-channel > .pa-row-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

/* An empty section stands in the middle of its panel, on its own tile, not as a line above a blank. */
.cr-do-lower .cr-do-panel { display: flex; flex-direction: column; }
.cr-do-lower .cr-do-quiet { flex: 1 1 auto; flex-direction: column; justify-content: center; padding: var(--pa-s4) var(--pa-s3); text-align: center; }
.cr-do-lower .cr-do-quiet > .pa-ico { box-sizing: border-box; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--cx-surface-2); color: var(--cx-text-2); }

/* Recent Activity as a timeline. */
.cr-do-timeline .pa-row { position: relative; padding-left: var(--pa-s4); border: 0; content-visibility: visible; contain: none; }
.cr-do-timeline .pa-row::before { content: ""; position: absolute; left: 1px; top: 15px; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-accent); box-shadow: 0 0 0 3px var(--cx-surface); }
.cr-do-timeline .pa-row:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 15px; bottom: -15px; width: 2px; background: var(--cx-border); }

/* The dashboard arrives once, gently; a shift of a few pixels and no change of layout. */
@keyframes cr-do-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cr-do > * { animation: cr-do-rise var(--cx-fast) var(--cx-ease) backwards; }
.cr-do > :nth-child(2) { animation-delay: 30ms; }
.cr-do > :nth-child(3) { animation-delay: 60ms; }
.cr-do > :nth-child(4) { animation-delay: 90ms; }
.cr-do > :nth-child(n + 5) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .cr-do > * { animation: none; } }
@media (max-width: 640px) {
  .cr-do-hello { display: none; }
  .pa-head.cr-do-head { padding: var(--pa-s3); }
  .cr-do-status { width: 100%; }
}