/*
 * The CRM's screens: a customer's own page, companies, two that look like
 * one, and how the workspace's CRM is set up.
 *
 * Everything here is `xc-crm`. It leans on what the product already has —
 * the panel, the field, the buttons, the pills, the pager — and adds only
 * what those screens need of their own: a two-column page, a customer's
 * heading, a status chip, the timeline, a list of companies as cards, the
 * two sides of a possible duplicate, for deals a board of columns and a
 * deal's steps, and for the catalogue the three ways in and what an import
 * found.
 *
 * Logical properties throughout, so the same rules are right in Arabic.
 * One gradient at most on a page (the avatar's), and no WhatsApp green: a
 * client is the product's own green, a lead its amber.
 */

/* ── the page ─────────────────────────────────────────────────────────── */

.xc-crm {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 16px 16px;
}

.xc-crm__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 14px;
    align-items: start;
}

.xc-crm__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-inline-size: 0;
}

.xc-crm__card {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-inline-size: 0;
}

.xc-crm__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.xc-crm__heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-inline-size: 0;
}

.xc-crm__title {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.01em;
}

/* Headings are written lowercase-first, as the product's are, and capitalised here. */
.xc-crm__title::first-letter { text-transform: uppercase; }

.xc-crm__sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(var(--ink), .5);
    text-wrap: pretty;
}

.xc-crm__tools {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.xc-crm__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: rgba(var(--ink), .55);
    text-decoration: none;
    align-self: flex-start;
}

.xc-crm__back:hover { color: var(--text); }

[dir="rtl"] .xc-crm__back svg { transform: scaleX(-1); }

/* ── what was said after a change ─────────────────────────────────────── */

.xc-crm__said {
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 14.5px;
    line-height: 1.45;
    border: 1px solid var(--line);
    background: rgba(var(--ink), .04);
    color: rgba(var(--ink), .7);
}

.xc-crm__said[data-tone="done"] {
    background: rgba(0, 168, 134, .1);
    border-color: rgba(0, 168, 134, .3);
    color: var(--green);
}

.xc-crm__said[data-tone="refused"] {
    background: rgba(214, 69, 69, .08);
    border-color: rgba(214, 69, 69, .3);
    color: #B83636;
}

/* ── a form's fields ──────────────────────────────────────────────────── */

.xc-crm__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xc-crm__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.xc-crm__f {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-inline-size: 0;
}

.xc-crm__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(var(--ink), .45);
}

.xc-crm__hint {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(var(--ink), .45);
    text-wrap: pretty;
}

.xc-crm__err {
    font-size: 13px;
    color: #B83636;
}

.xc-crm__inline {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.xc-crm__inline > .xc-field { flex: 1; min-inline-size: 160px; }

.xc-crm__yesno {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
}

/* ── a customer's heading ─────────────────────────────────────────────── */

.xc-crm__who {
    display: flex;
    align-items: center;
    gap: 14px;
    min-inline-size: 0;
}

.xc-crm__who-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-inline-size: 0;
}

.xc-crm__name {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.xc-crm__facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 14px;
    color: rgba(var(--ink), .6);
}

.xc-crm__facts a { color: inherit; }

.xc-crm__mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

.xc-crm__glyph {
    flex: none;
    inline-size: 52px;
    block-size: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(var(--brand), .12);
    color: rgb(var(--brand));
}

/* Where a customer stands. A lead is amber, a prospect the brand's, a client the product's green. */
.xc-crm__chip {
    --tint: 120, 120, 140;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    background: rgba(var(--tint), .13);
    color: rgb(var(--tint));
}

.xc-crm__chip::before {
    content: '';
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
}

.xc-crm__chip[data-kind="lead"] { --tint: 181, 116, 22; }
.xc-crm__chip[data-kind="prospect"] { --tint: var(--brand); }
.xc-crm__chip[data-kind="client"] { --tint: 0, 140, 112; }
.xc-crm__chip[data-archived] { opacity: .6; }

/* A small word beside a name: who or what did it, when it was not a person. */
.xc-crm__badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 7px;
    background: rgba(var(--ink), .07);
    color: rgba(var(--ink), .6);
    white-space: nowrap;
}

/* ── the timeline ─────────────────────────────────────────────────────── */

.xc-crm__tl {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.xc-crm__tl-one {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    padding: 13px 0;
    border-block-start: 1px solid var(--line);
}

.xc-crm__tl-one:first-child { border-block-start: 0; padding-block-start: 2px; }

.xc-crm__tl-dot {
    --tint: 120, 120, 140;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(var(--tint), .12);
    color: rgb(var(--tint));
}

.xc-crm__tl-one[data-kind="note"] .xc-crm__tl-dot { --tint: 181, 116, 22; }
.xc-crm__tl-one[data-kind="conversation"] .xc-crm__tl-dot { --tint: var(--brand); }
.xc-crm__tl-one[data-result="waiting"] .xc-crm__tl-dot { --tint: 181, 116, 22; }
.xc-crm__tl-one[data-result="refused"] .xc-crm__tl-dot { --tint: 214, 69, 69; }

.xc-crm__tl-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-inline-size: 0;
}

.xc-crm__tl-say {
    font-size: 14.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.xc-crm__tl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 9px;
    font-size: 12.5px;
    color: rgba(var(--ink), .45);
}

.xc-crm__tl-end {
    font-size: 13px;
    color: rgba(var(--ink), .6);
}

.xc-crm__tl-one[data-result="refused"] .xc-crm__tl-end { color: #B83636; }

.xc-crm__note {
    background: rgba(var(--ink), .035);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.xc-crm__note-acts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.xc-crm__note-acts details { inline-size: 100%; }

.xc-crm__note-acts summary {
    cursor: pointer;
    font-size: 13px;
    color: rgba(var(--ink), .5);
    list-style: none;
}

.xc-crm__note-acts summary::-webkit-details-marker { display: none; }

/* ── a list, as cards (companies, people, pairs) ──────────────────────── */

.xc-crm__list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.xc-crm__row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms, box-shadow 160ms;
}

a.xc-crm__row:hover,
a.xc-crm__row:focus-visible {
    border-color: var(--peri);
    box-shadow: 0 0 0 3px rgba(var(--brand), .1);
    outline: none;
}

.xc-crm__row--head {
    background: none;
    border-color: transparent;
    padding-block: 0 2px;
}

.xc-crm__row--people { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; }
.xc-crm__row--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; }
.xc-crm__row--setup { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: end; }

.xc-crm__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.xc-crm__cell strong {
    font-size: 14.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-crm__cell span,
.xc-crm__dim {
    font-size: 13px;
    color: rgba(var(--ink), .5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-crm__empty {
    margin: 0;
    padding: 18px 2px;
    font-size: 14.5px;
    color: rgba(var(--ink), .45);
    text-wrap: pretty;
}

/* ── two that look like one ───────────────────────────────────────────── */

.xc-crm__cmp {
    display: grid;
    grid-template-columns: minmax(90px, .7fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 12px;
    font-size: 14.5px;
}

.xc-crm__cmp > * {
    padding: 10px 0;
    border-block-start: 1px solid var(--line);
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.xc-crm__cmp > .xc-crm__cmp-head {
    border-block-start: 0;
    padding-block-start: 0;
}

.xc-crm__keep {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px;
    cursor: pointer;
}

.xc-crm__keep:has(input:checked) {
    border-color: var(--peri) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand), .1);
}

.xc-crm__take {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.xc-crm__warn {
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 14px;
    line-height: 1.5;
    background: rgba(232, 163, 61, .12);
    border: 1px solid rgba(232, 163, 61, .35);
    color: rgb(140, 88, 14);
}

[data-theme="dark"] .xc-crm__warn { color: rgb(240, 190, 110); }

/* ── deals ────────────────────────────────────────────────────────────── */

/* A deal's stage, on the chip that elsewhere says a customer's status: an open one is the brand's, won the product's green, lost its red. */
.xc-crm__chip[data-kind="open"] { --tint: var(--brand); }
.xc-crm__chip[data-kind="won"] { --tint: 0, 140, 112; }
.xc-crm__chip[data-kind="lost"] { --tint: 184, 54, 54; }

a.xc-crm__chip { text-decoration: none; }
a.xc-crm__chip:hover { color: rgb(var(--tint)); }

/* The board: a column a stage, side by side, scrolling sideways when there are more than fit. */
.xc-crm__dealboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-inline-size: 0;
}

/* What each stage is worth, as a share of what is open. */
.xc-crm__flow {
    display: flex;
    gap: 3px;
    block-size: 44px;
    border-radius: 13px;
    overflow: hidden;
}

.xc-crm__flow-seg {
    flex: 1 1 0;
    min-inline-size: 96px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding-inline: 13px;
    background: rgb(var(--hue));
    color: rgb(var(--on-hue));
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    cursor: default;
    transition: opacity 240ms;
}

.xc-crm__flow-seg strong { font-weight: 600; }
.xc-crm__flow-seg .xc-crm__mono { opacity: .85; font-size: 12.5px; }

.xc-crm__dealboard[data-hot] .xc-crm__flow-seg:not([data-on]),
.xc-crm__dealboard[data-hot] .xc-crm__lane:not([data-on]) { opacity: .4; }

.xc-crm__dealboard-sum { margin: 0; justify-content: flex-end; font-size: 13.5px; }

.xc-crm__board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(244px, 1fr);
    gap: 12px;
    align-items: start;
    overflow-x: auto;
    padding-block-end: 6px;
}

.xc-crm__lane {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
    min-block-size: 300px;
    box-sizing: border-box;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    background: rgba(var(--ink), .025);
    min-inline-size: 0;
    transition: background 200ms, border-color 200ms, opacity 240ms;
}

/* A dragged card is over it. */
.xc-crm__lane[data-over] { background: rgba(var(--hue), .1); border-color: rgb(var(--hue)); }

.xc-crm__lane-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
}

.xc-crm__lane-dot { flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; background: rgb(var(--hue)); }

.xc-crm__lane-head strong {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-crm__lane-n {
    flex: none;
    min-inline-size: 24px;
    block-size: 24px;
    padding-inline: 7px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 600;
    display: grid;
    place-items: center;
}

/* What a column's deals add up to, a currency at a time. */
.xc-crm__lane-sum {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-weight: 500;
    color: rgb(var(--hue));
}

.xc-crm__lane-bar { display: block; block-size: 4px; border-radius: 4px; background: rgba(var(--ink), .09); overflow: hidden; }
.xc-crm__lane-bar > span { display: block; block-size: 100%; border-radius: 4px; background: rgb(var(--hue)); transition: inline-size 600ms cubic-bezier(.2, .8, .2, 1); }

.xc-crm__lane-empty {
    margin: 0;
    padding: 24px 12px;
    border: 1.5px dashed rgba(var(--ink), .18);
    border-radius: 14px;
    text-align: center;
    font-size: 13.5px;
    color: rgba(var(--ink), .5);
}

.xc-crm__dealcard {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px 13px 11px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(var(--scrim), .05);
    min-inline-size: 0;
    cursor: grab;
    transition: transform 250ms cubic-bezier(.2, .8, .2, 1), box-shadow 250ms, border-color 250ms, opacity 200ms;
}

.xc-crm__dealcard:hover,
.xc-crm__dealcard:focus-within {
    border-color: rgb(var(--hue));
    box-shadow: 0 16px 32px rgba(var(--hue), .18);
    transform: translateY(-3px) rotate(-.4deg);
}

.xc-crm__dealcard[data-dragging] { opacity: .35; cursor: grabbing; }

.xc-crm__dealcard-top { display: flex; align-items: flex-start; gap: 9px; }

.xc-crm__dealcard-title {
    flex: 1;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
    overflow-wrap: anywhere;
}

.xc-crm__dealcard-title:hover,
.xc-crm__dealcard-title:focus-visible { color: var(--peri); outline: none; }

.xc-crm__dealcard-owner {
    flex: none;
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--text);
    color: var(--surface);
    font-size: 12.5px;
    font-weight: 600;
}

.xc-crm__dealcard-who { display: flex; align-items: center; gap: 8px; min-inline-size: 0; font-size: 13.5px; color: rgba(var(--ink), .68); }
.xc-crm__dealcard-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.xc-crm__dealcard-tile {
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(var(--ink), .45);
    color: var(--surface);
    font-size: 12.5px;
    font-weight: 700;
}

.xc-crm__dealcard-tile[data-hue] { background: rgb(var(--hue)); color: rgb(var(--on-hue)); }

.xc-crm__dealcard-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
}

.xc-crm__dealcard-foot .xc-crm__mono { font-size: 15px; font-weight: 500; letter-spacing: -.02em; }

/* When its next step is due: amber while it is ahead, red once it has gone by. */
.xc-crm__badge[data-due] { background: rgba(181, 116, 22, .14); color: rgb(140, 88, 14); }
[data-theme="dark"] .xc-crm__badge[data-due] { color: rgb(232, 163, 61); }

.xc-crm__dealcard-acts { display: flex; gap: 6px; }
.xc-crm__dealcard-acts form { display: flex; min-inline-size: 0; }
.xc-crm__dealcard-acts form:first-child:not(.xc-crm__dealcard-quick) { flex: 1; }
.xc-crm__dealcard-acts .xc-act { flex: 1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.xc-crm__dealcard:hover .xc-act,
.xc-crm__dealcard:focus-within .xc-act { background: var(--text); color: var(--surface); border-color: var(--text); }

/* Won and lost: there when the card is pointed at or reached, and always where nothing can point. */
.xc-crm__dealcard-quick { inline-size: 0; overflow: hidden; opacity: 0; transition: inline-size 250ms cubic-bezier(.2, .8, .2, 1), opacity 200ms; }

.xc-crm__dealcard:hover .xc-crm__dealcard-quick,
.xc-crm__dealcard:focus-within .xc-crm__dealcard-quick { inline-size: 34px; opacity: 1; }

@media (hover: none) {
    .xc-crm__dealcard-quick { inline-size: 34px; opacity: 1; }
}

.xc-crm__dealcard-quick button {
    appearance: none;
    border: 0;
    inline-size: 34px;
    min-block-size: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    cursor: pointer;
    --tint: 0, 140, 112;
    background: rgba(var(--tint), .14);
    color: rgb(var(--tint));
}

.xc-crm__dealcard-quick button[data-kind="lost"] { --tint: 184, 54, 54; }
.xc-crm__dealcard-quick button:focus-visible { outline: 2px solid rgb(var(--tint)); outline-offset: 1px; }

/* Where a dragged card is dropped to close it. */
.xc-crm__drops { display: none; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.xc-crm__dealboard[data-dragging] .xc-crm__drops { display: grid; }
.xc-crm__dealboard[data-dragging] [data-crm-closed] { display: none; }

.xc-crm__drop {
    --tint: 0, 140, 112;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border: 2px dashed rgb(var(--tint));
    border-radius: 16px;
    background: rgba(var(--tint), .08);
    color: rgb(var(--tint));
    font-size: 14.5px;
    font-weight: 600;
    transition: background 200ms, color 200ms;
}

.xc-crm__drop[data-kind="lost"] { --tint: 184, 54, 54; }
.xc-crm__drop[data-over] { background: rgb(var(--tint)); color: var(--surface); }

.xc-crm__drag-hint { font-size: 13px; }

@media (hover: none) {
    .xc-crm__drag-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .xc-crm__dealcard,
    .xc-crm__dealcard-quick,
    .xc-crm__flow-seg,
    .xc-crm__lane,
    .xc-crm__lane-bar > span { transition: none; }

    .xc-crm__dealcard:hover,
    .xc-crm__dealcard:focus-within { transform: none; }
}

/* The people a search found, to pick one of: a group of choices without the browser's own box. */
fieldset.xc-crm__f {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

fieldset.xc-crm__f > legend { padding: 0; margin-block-end: 5px; }

/* A next step whose day has passed. */
.xc-crm__badge[data-late] {
    background: rgba(214, 69, 69, .1);
    color: #B83636;
}

/* A deal's steps: its pipeline's open stages in order, the one it is on filled in. */
.xc-crm__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.xc-crm__steps form { display: contents; }

.xc-crm__step {
    appearance: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: rgba(var(--ink), .7);
    cursor: pointer;
    transition: border-color 160ms, background 160ms, color 160ms;
}

.xc-crm__step:hover:not(:disabled),
.xc-crm__step:focus-visible {
    border-color: var(--peri);
    color: rgb(var(--brand));
    outline: none;
}

.xc-crm__step:disabled { cursor: default; opacity: .55; }

.xc-crm__step[aria-current="step"] {
    opacity: 1;
    background: rgb(var(--brand));
    border-color: rgb(var(--brand));
    color: #fff;
}

.xc-crm__row--deals { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.xc-crm__row--theirs { grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) auto; }
/* ── the CRM's set-up: read first, changed on demand ──────────────────── */

/* Where to start from: two ways, side by side. */
.xc-crm__starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }

.xc-crm__start {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
    min-inline-size: 0;
}

.xc-crm__start-sign {
    flex: none;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(var(--brand), .1);
    color: var(--peri);
}

.xc-crm__start .xc-crm__cell { flex: 1; }
.xc-crm__start .xc-act { flex: none; }

/* A status: a card to read, and to press when it is to be changed. */
.xc-crm__setcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }

.xc-crm__setcard {
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
    cursor: pointer;
    min-inline-size: 0;
    font-size: 13.5px;
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1), box-shadow 240ms, border-color 240ms;
}

.xc-crm__setcard:hover,
.xc-crm__setcard:focus-visible {
    border-color: rgba(var(--brand), .5);
    box-shadow: 0 12px 26px rgba(var(--brand), .12);
    transform: translateY(-2px);
    outline: none;
}

.xc-crm__setcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xc-crm__setcard-go { font-size: 12.5px; font-weight: 600; color: var(--peri); opacity: 0; transition: opacity 200ms; }

.xc-crm__setcard:hover .xc-crm__setcard-go,
.xc-crm__setcard:focus-visible .xc-crm__setcard-go { opacity: 1; }

@media (hover: none) {
    .xc-crm__setcard-go { opacity: 1; }
}

.xc-crm__setcard-n {
    margin-block-start: 6px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -.02em;
    line-height: 1.1;
}

/* A line to read and to press: a field, or something that was put away. */
.xc-crm__setline {
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: start;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 9px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-2);
    cursor: pointer;
    min-inline-size: 0;
    font-size: 13.5px;
    transition: border-color 200ms, background 200ms;
}

.xc-crm__setline:hover,
.xc-crm__setline:focus-visible { border-color: rgba(var(--brand), .5); background: rgba(var(--brand), .05); outline: none; }

.xc-crm__setline strong { font-weight: 600; overflow-wrap: anywhere; }
.xc-crm__setline[data-archived] { opacity: .65; }

/* What was put away, a press away. */
.xc-crm__away > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(var(--ink), .55);
    cursor: pointer;
    list-style: none;
}

.xc-crm__away > summary::-webkit-details-marker { display: none; }
.xc-crm__away > summary::before { content: "+"; font-family: 'JetBrains Mono', monospace; }
.xc-crm__away[open] > summary::before { content: "–"; }
.xc-crm__away > summary:hover,
.xc-crm__away > summary:focus-visible { color: var(--peri); outline: none; }
.xc-crm__away > .xc-crm__inline { margin-block-start: 10px; }

/* One pipeline: what it is, then its stages as a track. */
.xc-crm__pipe {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(var(--ink), .02);
    min-inline-size: 0;
}

.xc-crm__pipe[data-archived] { opacity: .65; }

.xc-crm__pipe-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xc-crm__pipe-head .xc-crm__cell { flex: 1; min-inline-size: 180px; }
.xc-crm__pipe-head .xc-crm__cell strong { font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; }

.xc-crm__track { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* A stage, with the arrows that move it a place on either side of its name. */
.xc-crm__stage {
    --hue: 120, 120, 140;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(var(--hue), .35);
    border-radius: 13px;
    background: rgba(var(--hue), .08);
    min-block-size: 40px;
    min-inline-size: 0;
    overflow: hidden;
    transition: border-color 200ms, box-shadow 200ms;
}

.xc-crm__stage:hover,
.xc-crm__stage:focus-within { border-color: rgb(var(--hue)); box-shadow: 0 8px 18px rgba(var(--hue), .16); }

.xc-crm__stage form { display: flex; }

.xc-crm__stage-name,
.xc-crm__stage-move {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.xc-crm__stage-name { gap: 8px; padding: 6px 6px; font-size: 14px; min-inline-size: 0; }
.xc-crm__stage-name strong { font-weight: 600; overflow-wrap: anywhere; text-align: start; }
.xc-crm__stage-name:hover strong,
.xc-crm__stage-name:focus-visible strong { color: rgb(var(--hue)); }
.xc-crm__stage-name:focus-visible { outline: 2px solid rgb(var(--hue)); outline-offset: -2px; }

.xc-crm__stage-move { inline-size: 28px; justify-content: center; color: rgba(var(--ink), .5); transition: background 160ms, color 160ms; }
.xc-crm__stage-move:hover:not(:disabled),
.xc-crm__stage-move:focus-visible { background: rgba(var(--hue), .18); color: rgb(var(--hue)); outline: none; }
.xc-crm__stage-move:disabled { opacity: .25; cursor: default; }

/* Won and lost: where a closed deal is, at the end of every track. */
.xc-crm__stage--closing {
    appearance: none;
    font: inherit;
    color: rgb(var(--hue));
    cursor: pointer;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 14px;
    --hue: 0, 140, 112;
}

.xc-crm__stage--closing strong { font-weight: 600; }
.xc-crm__stage--closing[data-kind="lost"] { --hue: 184, 54, 54; }
.xc-crm__stage--closing:focus-visible { outline: 2px solid rgb(var(--hue)); outline-offset: 1px; }

.xc-crm__track-end { flex: none; inline-size: 18px; block-size: 2px; border-radius: 2px; background: rgba(var(--ink), .18); }

/* The way to add a stage: a dashed one, which opens onto its name. */
.xc-crm__stage-add { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xc-crm__stage-add > summary { list-style: none; }
.xc-crm__stage-add > summary::-webkit-details-marker { display: none; }

.xc-crm__stage--new {
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-style: dashed;
    border-color: rgba(var(--ink), .25);
    background: transparent;
    color: rgba(var(--ink), .6);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.xc-crm__stage--new:hover,
.xc-crm__stage-add > summary:focus-visible { border-color: var(--peri); color: var(--peri); box-shadow: none; outline: none; }

.xc-crm__stage-add[open] > summary { display: none; }
.xc-crm__stage-add .xc-field { inline-size: 220px; flex: none; }

/* Fields: a column for what is kept on a contact, on a company, on a deal. */
.xc-crm__setcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }

.xc-crm__setcol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    min-inline-size: 0;
}

.xc-crm__setcol-h { margin: 0 0 2px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14.5px; }

/* A column a file brought in, to be given a kind. */
.xc-crm__loose {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border: 1px dashed rgba(var(--ink), .2);
    border-radius: 13px;
    font-size: 14px;
}

.xc-crm__loose strong { flex: 1; min-inline-size: 120px; font-weight: 600; overflow-wrap: anywhere; }
.xc-crm__loose .xc-field { flex: none; inline-size: auto; }

@media (prefers-reduced-motion: reduce) {
    .xc-crm__setcard,
    .xc-crm__setcard-go,
    .xc-crm__setline,
    .xc-crm__stage,
    .xc-crm__stage-move { transition: none; }

    .xc-crm__setcard:hover,
    .xc-crm__setcard:focus-visible { transform: none; }
}

/* ── the catalogue, and its imports ───────────────────────────────────── */

/* Whether a product is offered, and how an import stands, on the same chip: what is right and done is green, what waits is the brand's. */
.xc-crm__chip[data-kind="approved"],
.xc-crm__chip[data-kind="applied"] { --tint: 0, 140, 112; }

.xc-crm__chip[data-kind="ready"],
.xc-crm__chip[data-kind="found"],
.xc-crm__chip[data-kind="new"] { --tint: var(--brand); }

.xc-crm__chip[data-kind="reading"],
.xc-crm__chip[data-kind="extracting"],
.xc-crm__chip[data-kind="update"] { --tint: 181, 116, 22; }

.xc-crm__chip[data-kind="failed"] { --tint: 184, 54, 54; }

.xc-crm__row--products { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr) auto; }
.xc-crm__row--line { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; }

/* The three ways to bring products in, side by side. */
.xc-crm__ways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

/* ── the import's first step: one of three, then its form ───────────────
 *
 * A tile is a radio button with a face. The form that goes with the tile
 * that is chosen is the only one shown, and it is as wide as it needs:
 * the three no longer stand side by side.
 */
.xc-crm__pick {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xc-crm__nth {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
}

.xc-crm__nth > span:first-child {
    flex: none;
    inline-size: 22px;
    block-size: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: #fff;
    background: var(--peri);
}

.xc-crm__tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.xc-crm__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color 160ms, background 160ms, box-shadow 160ms;
}

.xc-crm__tile:hover { border-color: rgba(var(--ink), .28); }

.xc-crm__tile input {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    accent-color: var(--peri);
}

.xc-crm__tile svg { color: var(--peri); }
.xc-crm__tile strong { font-size: 15px; font-weight: 600; }
.xc-crm__tile > span { font-size: 12.8px; color: rgba(var(--ink), .55); }

.xc-crm__tile:has(input:checked) {
    border-color: var(--peri);
    background: rgba(91, 91, 240, .07);
    box-shadow: 0 0 0 3px rgba(91, 91, 240, .12);
}

.xc-crm__tile:has(input:focus-visible) { outline: 2px solid var(--peri); outline-offset: 2px; }

/* Many answers to one question (services, staff, places): as many to a row as fit, each a small tile. */
.xc-crm__tiles--many { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }

.xc-crm__tile--small { padding: 11px 38px 11px 13px; gap: 2px; border-radius: 13px; }

[dir="rtl"] .xc-crm__tile--small { padding: 11px 13px 11px 38px; }

.xc-crm__tile--small input { inset-block-start: 12px; inset-inline-end: 12px; }

.xc-crm__tile--small strong { font-size: 14.2px; overflow-wrap: anywhere; }

/* The second step: the chosen one's form, alone and no wider than a form should be. */
.xc-crm__pick .xc-crm__ways {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 640px;
}

.xc-crm__pick .xc-crm__way,
.xc-crm__pick [data-crm-import-says] { display: none; }

.xc-crm__pick:has(input[value="shop"]:checked) [data-crm-import="shop"],
.xc-crm__pick:has(input[value="website"]:checked) [data-crm-import="website"],
.xc-crm__pick:has(input[value="file"]:checked) [data-crm-import="file"] { display: flex; }

.xc-crm__pick:has(input[value="shop"]:checked) [data-crm-import-says="shop"],
.xc-crm__pick:has(input[value="website"]:checked) [data-crm-import-says="website"],
.xc-crm__pick:has(input[value="file"]:checked) [data-crm-import-says="file"],
.xc-crm__pick:not(:has(.xc-crm__tile input:checked)) [data-crm-import-says="none"] { display: inline; }

/* Until one is chosen, the second step waits, and looks it. */
.xc-crm__pick:not(:has(.xc-crm__tile input:checked)) [data-crm-import-second] {
    font-weight: 400;
    color: rgba(var(--ink), .5);
}

.xc-crm__pick:not(:has(.xc-crm__tile input:checked)) [data-crm-import-second] > span:first-child { background: rgba(var(--ink), .22); }

.xc-crm__way {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-2);
    min-inline-size: 0;
}

.xc-crm__way > strong { font-size: 15px; font-weight: 600; }

/* One thing an import found. */
.xc-crm__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
    min-inline-size: 0;
}

.xc-crm__item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* What the source did not say, and what it said unclearly: amber, never red. It is not an error; it is a gap. */
.xc-crm__badge[data-flag] {
    background: rgba(232, 163, 61, .14);
    color: rgb(140, 88, 14);
}

[data-theme="dark"] .xc-crm__badge[data-flag] { color: rgb(240, 190, 110); }

/* What a new item says of itself: a name for each value, the value beside it. */
.xc-crm__said-of {
    display: grid;
    grid-template-columns: minmax(90px, max-content) minmax(0, 1fr);
    gap: 5px 14px;
    margin: 0;
    font-size: 14px;
}

.xc-crm__said-of dd { margin: 0; overflow-wrap: anywhere; }

/* Each field that differs: what the catalogue has, what the source says, and whose it is. */
.xc-crm__changes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.xc-crm__change {
    display: grid;
    /* Every row the same four widths, with a box in the last or without: the two values line up down the list. */
    grid-template-columns: minmax(90px, .7fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(var(--ink), .03);
    overflow-wrap: anywhere;
}

.xc-crm__change[data-edited] { background: rgba(232, 163, 61, .09); }

.xc-crm__correct > summary {
    cursor: pointer;
    font-size: 13.5px;
    color: var(--peri);
    inline-size: max-content;
}

/* ── narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
    .xc-crm__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ── The customer, beside a conversation ─────────────────────────────── */

/* A third column of the inbox: narrow, its cards tighter, each form a single column. */
.xc-crm--beside {
    flex: 0 0 340px;
    inline-size: 340px;
    /* Room under the last card for the help button that floats in that corner. */
    padding: 0 0 72px;
    gap: 12px;
}

/* A link in the column is as wide as its words, not as the column. */
.xc-crm--beside .xc-quiet { align-self: flex-start; }
.xc-crm--beside .xc-crm__beside-row .xc-crm__note { padding: 0; border: 0; background: none; }

.xc-crm--beside .xc-crm__card { padding: 16px; gap: 12px; }
.xc-crm--beside .xc-crm__name { font-size: 17px; }
.xc-crm--beside .xc-crm__grid { grid-template-columns: minmax(0, 1fr); }

.xc-crm--beside .xc-crm__name a,
.xc-crm__beside-row .xc-crm__cell a {
    color: inherit;
    text-decoration: none;
}

.xc-crm--beside .xc-crm__name a:hover,
.xc-crm__beside-row .xc-crm__cell a:hover { color: var(--peri); }

/* One deal, or one booking: what it is, then what can be done about it. */
.xc-crm__beside-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-2);
    min-inline-size: 0;
}

/* "New deal", "Book a time": shut until asked for. */
.xc-crm__beside-more > summary {
    list-style: none;
    cursor: pointer;
    inline-size: fit-content;
}

.xc-crm__beside-more > summary::-webkit-details-marker { display: none; }
.xc-crm__beside-more[open] > summary { margin-block-end: 12px; }

/* The tick box that opens the sheet: there for the keyboard and the stylesheet, and not drawn. */
.xc-crm__beside-toggle {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

/* "Something changed elsewhere": said only while the panel is held back from redrawing itself. */
.xc-crm__beside-stale { display: none; }

.xc-crm--beside[data-stale] .xc-crm__beside-stale {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Only where the panel is a sheet: the way out of it, and the way into it from the thread's head. */
.xc-crm__beside-shut,
.xc-crm__beside-jump { display: none; }

/*
 * Narrower than three columns fit: the panel is a sheet over the thread. Opened by a tick box the thread's head
 * ticks (a label for it: no script, and not :target, which the in-app navigation's own use of the address
 * unsets), and open by itself when it has something to say or a booking is being made in it ([data-open]).
 */
@media (max-width: 1320px) {
    .xc-crm--beside { display: none; }

    .xc-crm__beside-toggle:checked ~ .xc-crm--beside,
    .xc-crm--beside[data-open] {
        display: flex;
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 70;
        inline-size: min(390px, 100vw);
        padding: 16px 16px 84px;
        background: var(--bg);
        box-shadow: 0 0 60px rgba(0, 0, 0, .35);
    }

    .xc-crm__beside-shut,
    .xc-crm__beside-jump { display: inline-flex; cursor: pointer; }
}

/* ── The agenda ──────────────────────────────────────────────────────── */

/* A booking's state. Waiting is amber, on is the brand's, happened is green, did not is red, cancelled is grey. */
.xc-crm__chip[data-kind="pending"] { --tint: 181, 116, 22; }
.xc-crm__chip[data-kind="confirmed"] { --tint: var(--brand); }
.xc-crm__chip[data-kind="completed"] { --tint: 0, 140, 112; }
.xc-crm__chip[data-kind="no_show"] { --tint: 184, 54, 54; }
.xc-crm__chip[data-kind="cancelled"] { --tint: 120, 120, 140; }

/* Why a reminder did not go is read whole: it wraps, where a list's cell is cut short. */
.xc-crm__cell--wrap strong,
.xc-crm__cell--wrap span {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
}

.xc-crm__row--reminder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }

/* The free times of a day: each a button that books it. */
.xc-crm__times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}

.xc-crm__time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    padding: 9px 6px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-2);
    color: inherit;
    cursor: pointer;
}

.xc-crm__time:hover,
.xc-crm__time:focus-visible {
    border-color: var(--peri);
    color: var(--peri);
    outline: none;
}

.xc-crm__time:disabled {
    opacity: .45;
    cursor: default;
    border-color: var(--line);
    color: inherit;
}

/* Working hours, a day to a row: ticked with its times beside it, or closed. */
.xc-crm__days {
    display: flex;
    flex-direction: column;
}

.xc-crm__day {
    display: grid;
    grid-template-columns: minmax(132px, 190px) minmax(0, 1fr);
    gap: 8px 16px;
    align-items: center;
    min-block-size: 54px;
    padding-block: 7px;
    border-block-end: 1px solid var(--line);
}

.xc-crm__day > .xc-crm__yesno { font-weight: 600; cursor: pointer; }

.xc-crm__day-times {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.xc-crm__day-times .xc-crm__inline { flex-wrap: nowrap; }
.xc-crm__day-times .xc-field { flex: none; inline-size: 128px; min-inline-size: 0; }
.xc-crm__day-more { font-size: 13.2px; color: rgba(var(--ink), .6); cursor: pointer; }
.xc-crm__day-off { font-size: 13.5px; color: rgba(var(--ink), .45); }

/* The stylesheet does the showing: a day not ticked says "closed", and its second stretch waits to be asked for. */
.xc-crm__day:has([data-crm-day-open]:checked) .xc-crm__day-off,
.xc-crm__day:has([data-crm-day-open]:not(:checked)) .xc-crm__day-times,
.xc-crm__day:has([data-crm-day-two]:not(:checked)) .xc-crm__day-second { display: none; }

.xc-crm__days > [data-crm-hours-same] { padding-block-start: 12px; }

/* A short list of lengths of time: small tiles, as many to a row as fit. */
.xc-crm__tiles--chips { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }

/* A new field's choices: asked only when "one of a list" is the kind pressed. */
.xc-crm__when-choice { display: none; }
.xc-crm__form:has(input[name="type"][value="choice"]:checked) .xc-crm__when-choice { display: flex; }

/* One line that opens onto what can be changed about it. */
.xc-crm__fold {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
    min-inline-size: 0;
}

.xc-crm__fold[data-archived] > summary { opacity: .6; }

.xc-crm__fold > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

.xc-crm__fold > summary::-webkit-details-marker { display: none; }
.xc-crm__fold > summary > strong { font-size: 14.8px; font-weight: 600; overflow-wrap: anywhere; }

.xc-crm__fold-do {
    margin-inline-start: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--peri);
}

.xc-crm__fold[open] > summary { border-block-end: 1px solid var(--line); }

.xc-crm__fold > form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

.xc-crm__row--bookings { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, .9fr) auto; }

@media (max-width: 720px) {
    .xc-crm { padding-inline: 10px; }

    .xc-crm__row--bookings,
    .xc-crm__row--reminder { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .xc-crm__day { grid-template-columns: minmax(0, 1fr); }
    .xc-crm__card { padding: 16px; }

    .xc-crm__row,
    .xc-crm__row--people,
    .xc-crm__row--pair,
    .xc-crm__row--setup,
    .xc-crm__row--deals,
    .xc-crm__row--theirs,
    .xc-crm__row--products,
    .xc-crm__row--line,
    .xc-crm__change {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .xc-crm__ways { grid-template-columns: minmax(0, 1fr); }

    .xc-crm__tiles { grid-template-columns: minmax(0, 1fr); }

    .xc-crm__board { grid-auto-columns: minmax(82%, 1fr); }

    .xc-crm__row--head { display: none; }
    .xc-crm__cmp { grid-template-columns: minmax(0, 1fr); }
    .xc-crm__cmp > * { border-block-start: 0; padding-block: 3px; }
    .xc-crm__cmp > .xc-crm__cmp-label { padding-block-start: 12px; border-block-start: 1px solid var(--line); }
}

/* ── What an AI may do in the CRM, on the agent's own page ─────────────
 *
 * The page is the agent's (the studio's three columns), and this is its
 * middle: cards of rows, each a thing the agent may read or change with
 * its answer beside it. One column: the row's words, then its choice,
 * which drops under the words where there is no room for both. */
.xc-crm--ai {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-inline-size: 0;
}

.xc-crm__airow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    flex-wrap: wrap;
    padding-block: 11px;
    border-block-start: 1px solid var(--line);
}

.xc-crm__aisay {
    flex: 1 1 220px;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xc-crm__aisay strong { font-size: 14px; font-weight: 600; }
.xc-crm__aisay strong::first-letter { text-transform: uppercase; }
.xc-crm__aisay span { font-size: 13px; color: rgba(var(--ink), .55); text-wrap: pretty; }

.xc-crm__airow .xc-seg { flex: 0 1 auto; max-inline-size: 100%; }
.xc-crm__airow .xc-seg span { white-space: nowrap; }

.xc-crm__aigroup {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(var(--ink), .5);
}

.xc-crm__aigroup::first-letter { text-transform: uppercase; }

.xc-crm__ainumber { inline-size: 96px; text-align: center; }

/* ── What AIs asked for, waiting for a person ──────────────────────────
 *
 * One card a request: who asks and for what, what it is about read back
 * from the records, and the two answers. */
.xc-crm__ask {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-inline-size: 0;
}

.xc-crm__ask-said {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-inline-size: 0;
}

.xc-crm__ask-said strong { font-size: 15px; overflow-wrap: anywhere; }
.xc-crm__ask-said span { font-size: 13px; color: rgba(var(--ink), .55); }

.xc-crm__ask-facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.xc-crm__ask-facts > div {
    display: flex;
    gap: 6px 14px;
    padding: 10px 13px;
    flex-wrap: wrap;
}

.xc-crm__ask-facts > div + div { border-block-start: 1px solid var(--line); }

.xc-crm__ask-facts dt {
    flex: none;
    inline-size: 150px;
    font-size: 13px;
    color: rgba(var(--ink), .55);
}

.xc-crm__ask-facts dd {
    margin: 0;
    flex: 1;
    min-inline-size: 200px;
    font-size: 14px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* A secret's line of the same list: its own lines, not the page's spaces. */
.xc-crm__ask-facts dd.xc-crm__secret {
    white-space: normal;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.xc-crm__secret-acts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-block-start: 4px;
}

.xc-crm__ask-acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.xc-crm__ask-acts > a { margin-inline-end: auto; }

.xc-crm__ask-no {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.xc-crm__ask-no .xc-in { inline-size: 220px; max-inline-size: 100%; }

.xc-crm__row--answered { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

/* ── The CRM in the reports ────────────────────────────────────────────
 *
 * Cards of figures: a number, what it counts, and a line under it when
 * there is something to add (who did it, what it is worth). */
.xc-crm__rep {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-inline-size: 0;
}

.xc-crm__figs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.xc-crm__fig {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-inline-size: 0;
}

.xc-crm__fig strong {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    align-self: flex-start;
}

.xc-crm__fig[data-tone="won"] strong { color: var(--green); }
.xc-crm__fig span { font-size: 13px; font-weight: 600; }
.xc-crm__fig small { font-size: 12px; color: rgba(var(--ink), .5); text-wrap: pretty; overflow-wrap: anywhere; }

.xc-crm__repline {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
    font-size: 13.5px;
}

.xc-crm__repline > span:first-child { color: rgba(var(--ink), .55); }

.xc-crm__repchips { display: flex; gap: 6px; flex-wrap: wrap; }

.xc-crm__row--repstage { grid-template-columns: minmax(0, 1.6fr) minmax(0, .6fr) minmax(0, 1.4fr); }

/* ── Another CRM, connected ────────────────────────────────────────────
 *
 * Two columns for "theirs" and "ours" in the tables of words and fields;
 * a call's line, how it ended, and what can be done with it in the logs. */
.xc-crm__row--map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.xc-crm__row--call { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }

.xc-crm__tick {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13.5px;
    cursor: pointer;
}

.xc-crm__tick:has(input:checked) { border-color: rgba(var(--brand), .5); background: rgba(var(--brand), .06); }

/* ── an import being read ───────────────────────────────────────────────
 *
 * It is working, and looks it: a ring that turns beside what is being done,
 * and a bar that runs under it. Neither says how far along it is, because
 * nothing knows — a website is as long as it is.
 */
.xc-crm__working {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(var(--ink), .04);
}

.xc-crm__working-say {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
    font-size: 14px;
}

.xc-crm__working-say strong { font-weight: 600; }

.xc-crm__working-say span {
    font-size: 12.6px;
    color: rgba(var(--ink), .5);
}

.xc-crm__spin {
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    border: 2.5px solid rgba(var(--ink), .14);
    border-block-start-color: var(--peri);
    animation: xc-crm-turn 800ms linear infinite;
}

.xc-crm__bar {
    position: relative;
    block-size: 3px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(var(--ink), .08);
}

.xc-crm__bar span {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 32%;
    border-radius: 3px;
    background: var(--peri);
    animation: xc-crm-run 1500ms ease-in-out infinite;
}

@keyframes xc-crm-turn {
    to { transform: rotate(360deg); }
}

@keyframes xc-crm-run {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(420%); }
}

[dir="rtl"] .xc-crm__bar span { animation-name: xc-crm-run-back; }

@keyframes xc-crm-run-back {
    0% { transform: translateX(110%); }
    100% { transform: translateX(-420%); }
}

/* Somebody who asked for less movement still sees that it is working: the ring stays, turning slowly. */
@media (prefers-reduced-motion: reduce) {
    .xc-crm__spin { animation-duration: 2400ms; }
    .xc-crm__bar span { animation: none; inline-size: 100%; opacity: .35; }
}

/* ══ the CRM's four boards (agenda, deals, companies, products) ═══════════ */

/*
 * Six hues, to tell services, people, stages and categories apart. Each is
 * an "R, G, B" triple, the way --brand is, so a tint is rgba(var(--hue), .13)
 * on either theme. --on-hue is what is written on the solid colour.
 * A company's panel is a dialog, drawn over the page and outside it, so it
 * is given them too.
 */
.xc-crm,
.xc-crm__drawer {
    --hue-1: var(--brand);
    --hue-2: 0, 128, 106;
    --hue-3: 107, 63, 212;
    --hue-4: 201, 67, 43;
    --hue-5: 154, 90, 8;
    --hue-6: 30, 110, 160;
    --on-hue: 255, 255, 255;
}

[data-theme="dark"] .xc-crm,
[data-theme="dark"] .xc-crm__drawer {
    --hue-2: 0, 168, 134;
    --hue-3: 168, 138, 245;
    --hue-4: 240, 128, 104;
    --hue-5: 232, 163, 61;
    --hue-6: 110, 180, 230;
    --on-hue: 20, 20, 30;
}

.xc-crm [data-hue="1"], .xc-crm__drawer[data-hue="1"] { --hue: var(--hue-1); }
.xc-crm [data-hue="2"], .xc-crm__drawer[data-hue="2"] { --hue: var(--hue-2); }
.xc-crm [data-hue="3"], .xc-crm__drawer[data-hue="3"] { --hue: var(--hue-3); }
.xc-crm [data-hue="4"], .xc-crm__drawer[data-hue="4"] { --hue: var(--hue-4); }
.xc-crm [data-hue="5"], .xc-crm__drawer[data-hue="5"] { --hue: var(--hue-5); }
.xc-crm [data-hue="6"], .xc-crm__drawer[data-hue="6"] { --hue: var(--hue-6); }

/* A few choices side by side, one of them pressed. */
.xc-crm__seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    flex: none;
}

.xc-crm__seg > * {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(var(--ink), .68);
    padding: 7px 11px;
    min-block-size: 34px;
    min-inline-size: 34px;
    box-sizing: border-box;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-decoration: none;
    transition: background 160ms, color 160ms;
}

.xc-crm__seg > *:hover { background: rgba(var(--ink), .07); color: var(--text); }
.xc-crm__seg > *:focus-visible { outline: 2px solid var(--peri); outline-offset: 1px; }

.xc-crm__seg > [aria-pressed="true"],
.xc-crm__seg > [aria-current="true"] { background: var(--text); color: var(--surface); }

[dir="rtl"] .xc-crm__flip { transform: scaleX(-1); }

/* ── the agenda's week, an hour grid ──────────────────────────────────── */

.xc-crm__agenda {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-inline-size: 0;
}

.xc-crm__weekbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.xc-crm__weekbar-when { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.xc-crm__weekbar-when strong { font-family: Poppins, sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.xc-crm__weekbar-when span { font-size: 13.5px; color: rgba(var(--ink), .55); }
.xc-crm__weekbar-gap { flex: 1; min-inline-size: 4px; }
.xc-crm__weekbar .xc-crm__chip { cursor: pointer; text-decoration: none; }
.xc-crm__weekbar .xc-crm__chip[aria-pressed="true"] { background: rgb(var(--tint)); color: var(--surface); }

/* Somebody who is booked this week. */
.xc-crm__person {
    appearance: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px 3px 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    white-space: nowrap;
    transition: background 160ms, border-color 160ms, opacity 160ms;
}

[dir="rtl"] .xc-crm__person { padding: 3px 3px 3px 12px; }

.xc-crm__person:hover,
.xc-crm__person:focus-visible { border-color: rgb(var(--hue)); background: rgba(var(--hue), .1); outline: none; }

.xc-crm__person[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }

.xc-crm__person-dot {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgb(var(--hue));
    color: rgb(var(--on-hue));
    font-family: Poppins, sans-serif;
    font-size: 13px;
}

.xc-crm__legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13.5px;
    cursor: default;
    transition: background 160ms, border-color 160ms;
}

.xc-crm__legend:hover,
.xc-crm__legend:focus-visible { border-color: rgb(var(--hue)); background: rgba(var(--hue), .1); outline: none; }

.xc-crm__legend-dot { inline-size: 11px; block-size: 11px; border-radius: 4px; background: rgb(var(--hue)); }

.xc-crm__week-scroll { min-inline-size: 0; }

.xc-crm__week {
    --hour: 64px;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.xc-crm__week-head,
.xc-crm__week-body {
    display: grid;
    grid-template-columns: 58px repeat(7, minmax(0, 1fr));
}

.xc-crm__week-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 25;
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;
}

.xc-crm__week-zone {
    align-self: end;
    justify-self: center;
    padding-block-end: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: rgba(var(--ink), .42);
    max-inline-size: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-crm__week-day {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 9px 11px;
    border-inline-start: 1px solid var(--line);
    min-inline-size: 0;
}

.xc-crm__week-num {
    flex: none;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 18px;
}

.xc-crm__week-day[data-today] .xc-crm__week-num { background: rgb(var(--brand)); color: rgb(var(--on-hue)); }
.xc-crm__week-day[data-today] strong { color: var(--peri); }
.xc-crm__week-day[data-past] .xc-crm__week-num,
.xc-crm__week-day[data-past] strong { color: rgba(var(--ink), .45); }

.xc-crm__week-what { display: flex; flex-direction: column; min-inline-size: 0; flex: 1; font-size: 13px; color: rgba(var(--ink), .5); }
.xc-crm__week-what strong { font-size: 14px; font-weight: 600; color: var(--text); }
.xc-crm__week-what > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-crm__week-what a { font-size: 12.5px; }

.xc-crm__week-add {
    flex: none;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: rgba(var(--ink), .45);
    transition: background 160ms, color 160ms;
}

.xc-crm__week-add:hover,
.xc-crm__week-add:focus-visible { background: rgba(var(--brand), .1); color: var(--peri); outline: none; }

.xc-crm__week-hours,
.xc-crm__week-col {
    position: relative;
    block-size: calc(var(--hours) * var(--hour));
}

.xc-crm__week-hours > span {
    position: absolute;
    inset-inline-end: 9px;
    inset-block-start: calc(var(--at) * var(--hour) / 60 + 5px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(var(--ink), .42);
}

.xc-crm__week-hours > .xc-crm__now-label {
    inset-inline-end: 5px;
    inset-block-start: calc(var(--at) * var(--hour) / 60 - 10px);
    z-index: 3;
    padding: 1px 5px;
    border-radius: 7px;
    background: rgb(var(--brand));
    color: rgb(var(--on-hue));
    font-weight: 500;
}

/* A line an hour, a fainter one each half hour. */
.xc-crm__week-col {
    border-inline-start: 1px solid var(--line);
    background-image:
        repeating-linear-gradient(180deg, transparent 0 calc(var(--hour) - 1px), rgba(var(--ink), .075) calc(var(--hour) - 1px) var(--hour)),
        repeating-linear-gradient(180deg, transparent 0 calc(var(--hour) / 2 - 1px), rgba(var(--ink), .035) calc(var(--hour) / 2 - 1px) calc(var(--hour) / 2));
}

.xc-crm__week-col[data-past] { background-color: rgba(var(--ink), .022); }
.xc-crm__week-col[data-book] { cursor: pointer; }

/* Now, on the workspace's clock. */
.xc-crm__now {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(var(--at) * var(--hour) / 60);
    block-size: 2px;
    background: rgb(var(--brand));
    z-index: 15;
    pointer-events: none;
}

.xc-crm__now::before {
    content: "";
    position: absolute;
    inset-inline-start: -6px;
    inset-block-start: -5px;
    inline-size: 12px;
    block-size: 12px;
    border-radius: 50%;
    background: rgb(var(--brand));
    box-shadow: 0 0 0 4px rgba(var(--brand), .18);
    animation: xc-crm-beat 1.8s ease-in-out infinite;
}

/* A free time under the pointer, offering itself. */
.xc-crm__ghost {
    position: absolute;
    inset-inline: 4px;
    inset-block-start: calc(var(--at) * var(--hour) / 60 + 2px);
    block-size: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-inline: 9px;
    border: 1.5px dashed rgba(var(--brand), .55);
    border-radius: 10px;
    background: rgba(var(--brand), .06);
    color: var(--peri);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    z-index: 1;
}

/* Time off, where it is in the day. */
.xc-crm__week-off {
    position: absolute;
    inset-inline: 3px;
    inset-block-start: calc(var(--at) * var(--hour) / 60 + 1px);
    block-size: calc(var(--len) * var(--hour) / 60 - 3px);
    min-block-size: 26px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 9px;
    border-radius: 10px;
    border: 1px dashed rgba(var(--ink), .22);
    background: repeating-linear-gradient(135deg, rgba(var(--ink), .05) 0 6px, transparent 6px 12px);
    font-size: 12.5px;
    color: rgba(var(--ink), .68);
    overflow: hidden;
    z-index: 1;
}

.xc-crm__week-off .xc-quiet { font-size: 12.5px; padding: 0; }

/* A booking: where its time is, as tall as it is long; overlapping ones side by side. */
.xc-crm__ev {
    position: absolute;
    inset-block-start: calc(var(--at) * var(--hour) / 60 + 1px);
    block-size: calc(var(--len) * var(--hour) / 60 - 3px);
    min-block-size: 22px;
    inset-inline-start: calc(var(--lane) * 100% / var(--lanes) + 3px);
    inline-size: calc(100% / var(--lanes) - 6px);
    z-index: 2;
    --hue: var(--hue-1);
}

.xc-crm__ev:hover,
.xc-crm__ev:focus-within,
.xc-crm__ev[data-open] { z-index: 30; }

.xc-crm__week[data-color="service"] .xc-crm__ev[data-sv="2"], .xc-crm__week[data-color="staff"] .xc-crm__ev[data-pr="2"] { --hue: var(--hue-2); }
.xc-crm__week[data-color="service"] .xc-crm__ev[data-sv="3"], .xc-crm__week[data-color="staff"] .xc-crm__ev[data-pr="3"] { --hue: var(--hue-3); }
.xc-crm__week[data-color="service"] .xc-crm__ev[data-sv="4"], .xc-crm__week[data-color="staff"] .xc-crm__ev[data-pr="4"] { --hue: var(--hue-4); }
.xc-crm__week[data-color="service"] .xc-crm__ev[data-sv="5"], .xc-crm__week[data-color="staff"] .xc-crm__ev[data-pr="5"] { --hue: var(--hue-5); }
.xc-crm__week[data-color="service"] .xc-crm__ev[data-sv="6"], .xc-crm__week[data-color="staff"] .xc-crm__ev[data-pr="6"] { --hue: var(--hue-6); }
.xc-crm__week[data-color="staff"] .xc-crm__ev[data-pr="0"] { --hue: 120, 120, 140; }

.xc-crm__ev-face {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    box-sizing: border-box;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    /* Over: a tint of its colour. */
    background: rgba(var(--hue), .13);
    color: rgb(var(--hue));
    font-size: 13px;
    line-height: 1.32;
    text-decoration: none;
    overflow: hidden;
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1), box-shadow 260ms, opacity 240ms, filter 240ms;
}

.xc-crm__ev-face:hover { color: rgb(var(--hue)); }
.xc-crm__ev-face:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.xc-crm__ev-face strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }

.xc-crm__ev-top { display: flex; align-items: center; gap: 6px; min-inline-size: 0; }
.xc-crm__ev-top .xc-crm__mono { flex: none; font-size: 12px; font-weight: 500; letter-spacing: -.02em; }
.xc-crm__ev-sign { margin-inline-start: auto; flex: none; display: flex; }
.xc-crm__ev-what { opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Still to come, and going on now: its colour, solid. */
.xc-crm__ev[data-phase="ahead"] .xc-crm__ev-face,
.xc-crm__ev[data-phase="live"] .xc-crm__ev-face { background: rgb(var(--hue)); color: rgb(var(--on-hue)); }

.xc-crm__ev[data-phase="live"] .xc-crm__ev-face { animation: xc-crm-ring 2s ease-out infinite; }

.xc-crm__ev-live {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: rgb(var(--on-hue));
    animation: xc-crm-beat 1.4s ease-in-out infinite;
}

/* Waiting to be confirmed: striped and dashed, the stripes moving. */
.xc-crm__ev[data-phase="waiting"] .xc-crm__ev-face {
    background: repeating-linear-gradient(135deg, rgba(var(--hue), .17) 0 8px, var(--surface) 8px 16px);
    background-size: 22.63px 22.63px;
    border: 1.5px dashed rgb(var(--hue));
    animation: xc-crm-stripe 1.4s linear infinite;
}

/* Over and nobody has said whether they came: a tint with its edge showing. */
.xc-crm__ev[data-phase="ended"] .xc-crm__ev-face { border-color: rgba(var(--hue), .55); }

/* Did not come: red, whatever its service or whoever it was with. */
.xc-crm__week[data-color] .xc-crm__ev[data-phase="missed"] { --hue: 184, 54, 54; }
.xc-crm__ev[data-phase="cancelled"] .xc-crm__ev-face { --hue: 120, 120, 140; text-decoration: line-through; opacity: .7; }

.xc-crm__ev:hover .xc-crm__ev-face,
.xc-crm__ev:focus-within .xc-crm__ev-face,
.xc-crm__ev[data-open] .xc-crm__ev-face { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 28px rgba(var(--hue), .28); }

/* Picked out: the others stand back. */
.xc-crm__ev[data-dim] .xc-crm__ev-face,
.xc-crm__week[data-only="waiting"] .xc-crm__ev:not([data-phase="waiting"]) .xc-crm__ev-face { opacity: .16; filter: saturate(.15); }

.xc-crm__ev[hidden] { display: none; }

/* A booking's card. */
.xc-crm__pop {
    position: absolute;
    z-index: 40;
    inline-size: 300px;
    max-inline-size: 80vw;
    display: none;
    cursor: default;
}

.xc-crm__ev[data-side="end"] .xc-crm__pop { inset-inline-start: 100%; padding-inline-start: 10px; }
.xc-crm__ev[data-side="start"] .xc-crm__pop { inset-inline-end: 100%; padding-inline-end: 10px; }
.xc-crm__ev:not([data-low]) .xc-crm__pop { inset-block-start: -4px; }
.xc-crm__ev[data-low] .xc-crm__pop { inset-block-end: -4px; }

.xc-crm__ev:focus-within .xc-crm__pop,
.xc-crm__ev[data-open] .xc-crm__pop { display: block; }

/* Pointing opens it only where there is a pointer to point with: on a touch screen a press pins it. */
@media (hover: hover) {
    .xc-crm__ev:hover .xc-crm__pop { display: block; }
}

.xc-crm__pop-in {
    background: var(--surface);
    color: var(--text);
    border-radius: 16px;
    box-shadow: 0 24px 56px rgba(var(--scrim), .26), 0 0 0 1px rgba(var(--ink), .08);
    overflow: hidden;
    animation: xc-crm-pop 200ms cubic-bezier(.2, .9, .3, 1.15) both;
}

.xc-crm__pop-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 12px;
    background: rgba(var(--hue), .13);
    color: rgb(var(--hue));
    font-size: 13.5px;
}

.xc-crm__pop-head strong { display: flex; align-items: center; gap: 8px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 15.5px; }
.xc-crm__pop-dot { flex: none; inline-size: 10px; block-size: 10px; border-radius: 4px; background: rgb(var(--hue)); }

.xc-crm__pop-body { display: flex; flex-direction: column; gap: 11px; padding: 13px 16px; font-size: 14px; }
.xc-crm__pop-row { display: flex; align-items: center; gap: 11px; min-inline-size: 0; }

.xc-crm__pop-face {
    flex: none;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(var(--ink), .07);
    font-weight: 700;
    font-size: 13.5px;
}

.xc-crm__pop-face[data-hue] { background: rgb(var(--hue)); color: rgb(var(--on-hue)); font-family: Poppins, sans-serif; font-weight: 600; }

.xc-crm__pop-who { display: flex; flex-direction: column; min-inline-size: 0; }
.xc-crm__pop-who strong { font-weight: 600; overflow-wrap: anywhere; }
.xc-crm__pop-who a { color: inherit; }
.xc-crm__pop-who a:hover { color: var(--peri); }
.xc-crm__pop-who > span { font-size: 13px; color: rgba(var(--ink), .55); }

.xc-crm__pop-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 11px 16px 14px;
    border-block-start: 1px solid var(--line);
}

.xc-crm__pop-acts form { display: flex; }
.xc-crm__pop-acts .xc-primary,
.xc-crm__pop-acts .xc-act { font-size: 13.5px; text-decoration: none; }

/* A week with nothing in it says so, over the grid. */
.xc-crm__week-none {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 12;
}

.xc-crm__week-none > div {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-inline-size: 320px;
    padding: 22px 26px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(var(--scrim), .1);
    font-size: 14px;
    color: rgba(var(--ink), .6);
}

.xc-crm__week-none strong { font-family: Poppins, sans-serif; font-weight: 600; font-size: 16.5px; color: var(--text); }

@keyframes xc-crm-stripe { from { background-position: 0 0; } to { background-position: 22.63px 0; } }
@keyframes xc-crm-ring { 0% { box-shadow: 0 0 0 0 rgba(var(--hue), .45); } 70% { box-shadow: 0 0 0 9px rgba(var(--hue), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--hue), 0); } }
@keyframes xc-crm-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes xc-crm-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* A narrower window keeps the seven days readable, and scrolls them sideways. */
@media (max-width: 1280px) {
    .xc-crm__week-scroll { overflow-x: auto; }
    .xc-crm__week { min-inline-size: 1020px; }
    .xc-crm__week-head { position: static; }
}

/* Somebody who asked for less movement: nothing slides, pulses or runs. What a thing is, it still looks. */
@media (prefers-reduced-motion: reduce) {
    .xc-crm__ev-face,
    .xc-crm__pop-in,
    .xc-crm__ev-live,
    .xc-crm__now::before { animation: none !important; transition: none !important; }

    .xc-crm__ev:hover .xc-crm__ev-face,
    .xc-crm__ev:focus-within .xc-crm__ev-face,
    .xc-crm__ev[data-open] .xc-crm__ev-face { transform: none; }
}

/* ── companies: a row each, and a panel beside the list ───────────────── */

.xc-crm__cos { gap: 6px; }

.xc-crm__co {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 1fr) 20px;
    gap: 16px;
    align-items: center;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    min-inline-size: 0;
    transition: transform 250ms cubic-bezier(.2, .8, .2, 1), box-shadow 250ms, border-color 250ms, background 250ms;
}

.xc-crm__co:hover,
.xc-crm__co:focus-visible {
    color: inherit;
    border-color: rgba(var(--hue), .45);
    box-shadow: 0 14px 30px rgba(var(--hue), .14);
    transform: translateY(-2px);
    outline: none;
}

.xc-crm__co--head { border: 0; background: transparent; padding-block: 4px 0; }
.xc-crm__co--head:hover { transform: none; box-shadow: none; }

.xc-crm__co-name { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }

.xc-crm__co-tile {
    flex: none;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgb(var(--hue));
    color: rgb(var(--on-hue));
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 18px;
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}

.xc-crm__co:hover .xc-crm__co-tile,
.xc-crm__co:focus-visible .xc-crm__co-tile { transform: rotate(-6deg) scale(1.06); }

.xc-crm__co-tile--big { inline-size: 58px; block-size: 58px; border-radius: 18px; font-size: 25px; }

.xc-crm__co-people { display: flex; align-items: center; gap: 9px; min-inline-size: 0; font-size: 13.5px; white-space: nowrap; }

/* Its first people, overlapping; they spread when the row is pointed at. */
.xc-crm__faces { display: flex; flex: none; }

.xc-crm__faces > span {
    inline-size: 30px;
    block-size: 30px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--surface);
    display: grid;
    place-items: center;
    background: rgb(var(--hue));
    color: rgb(var(--on-hue));
    font-size: 12.5px;
    font-weight: 600;
    transition: margin 300ms cubic-bezier(.2, .8, .2, 1);
}

.xc-crm__faces > span + span { margin-inline-start: -10px; }
.xc-crm__faces > span:nth-child(even) { background: var(--text); color: var(--surface); }

.xc-crm__co:hover .xc-crm__faces > span + span,
.xc-crm__co:focus-visible .xc-crm__faces > span + span { margin-inline-start: 5px; }

.xc-crm__co-deals { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; font-size: 13.5px; }
.xc-crm__co-deals > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.xc-crm__co-deals .xc-crm__mono { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.xc-crm__co-deals .xc-crm__lane-bar > span { background: rgb(var(--hue)); }

.xc-crm__co-owner { display: flex; align-items: center; gap: 8px; min-inline-size: 0; font-size: 13.5px; }
.xc-crm__co-owner > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.xc-crm__co-go { color: rgba(var(--ink), .3); transition: transform 250ms, color 250ms; }
.xc-crm__co:hover .xc-crm__co-go { color: rgb(var(--hue)); transform: translateX(4px); }
[dir="rtl"] .xc-crm__co:hover .xc-crm__co-go { transform: scaleX(-1) translateX(4px); }

/* The panel: a company at a glance, at the side of the window. */
.xc-crm__drawer {
    position: fixed;
    inset-block: 0;
    inset-inline: auto 0;
    margin: 0;
    padding: 0;
    border: 0;
    inline-size: min(440px, 100%);
    block-size: 100%;
    max-block-size: none;
    max-inline-size: none;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 0 80px rgba(var(--scrim), .3);
    overflow: auto;
}

.xc-crm__drawer[open] { animation: xc-crm-drawer 380ms cubic-bezier(.2, .8, .2, 1) both; }
.xc-crm__drawer::backdrop { background: rgba(var(--scrim), .4); backdrop-filter: blur(3px); }

.xc-crm__drawer-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 24px 22px 20px;
    background: rgba(var(--hue), .1);
}

.xc-crm__drawer-x {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    appearance: none;
    border: 0;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

.xc-crm__drawer-x:focus-visible { outline: 2px solid var(--peri); outline-offset: 1px; }

.xc-crm__drawer-title { display: flex; flex-direction: column; gap: 3px; }
.xc-crm__drawer-title strong { font-family: Poppins, sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.xc-crm__drawer-title span { font-size: 13.5px; color: rgba(var(--ink), .6); }

.xc-crm__drawer-body { display: flex; flex-direction: column; gap: 20px; padding: 20px 22px 26px; }
.xc-crm__drawer-h { margin: 0; font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px; }

.xc-crm__peekrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    transition: border-color 200ms, transform 200ms;
}

a.xc-crm__peekrow:hover,
a.xc-crm__peekrow:focus-visible { color: inherit; border-color: rgba(var(--brand), .5); transform: translateX(3px); outline: none; }
[dir="rtl"] a.xc-crm__peekrow:hover,
[dir="rtl"] a.xc-crm__peekrow:focus-visible { transform: translateX(-3px); }

@keyframes xc-crm-drawer { from { transform: translateX(100%); } to { transform: none; } }
[dir="rtl"] .xc-crm__drawer[open] { animation-name: xc-crm-drawer-rtl; }
@keyframes xc-crm-drawer-rtl { from { transform: translateX(-100%); } to { transform: none; } }

@media (max-width: 1100px) {
    .xc-crm__co { grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, .9fr) 20px; }
    .xc-crm__co > :nth-child(2),
    .xc-crm__co > :nth-child(5) { display: none; }
}

@media (max-width: 720px) {
    .xc-crm__co { grid-template-columns: minmax(0, 1fr) 20px; }
    .xc-crm__co > :nth-child(3),
    .xc-crm__co > :nth-child(4) { display: none; }
    .xc-crm__co--head { display: none; }
}

/* ── products: a card each, and how an AI agent quotes it ─────────────── */

/* Read by a screen reader, not shown. */
.xc-crm__sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.xc-crm__cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    --hue: var(--ink);
    transition: background 160ms, border-color 160ms, color 160ms;
}

.xc-crm__cat:hover,
.xc-crm__cat:focus-visible { color: var(--text); border-color: rgb(var(--hue)); outline: none; }

.xc-crm__cat[aria-current="true"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.xc-crm__cat[data-hue][aria-current="true"] { background: rgb(var(--hue)); border-color: rgb(var(--hue)); color: rgb(var(--on-hue)); }

.xc-crm__cat-dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: rgb(var(--hue)); }
.xc-crm__cat[aria-current="true"] .xc-crm__cat-dot { background: currentColor; }

.xc-crm__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.xc-crm__pcard {
    --hue: 120, 120, 140;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(var(--scrim), .05);
    min-inline-size: 0;
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms, border-color 300ms;
}

.xc-crm__pcard:hover,
.xc-crm__pcard:focus-within {
    border-color: rgb(var(--hue));
    box-shadow: 0 20px 40px rgba(var(--hue), .18);
    transform: translateY(-4px);
}

.xc-crm__pcard[data-state="archived"] { opacity: .65; }

.xc-crm__pcard-top {
    position: relative;
    display: block;
    block-size: 146px;
    border-radius: 15px;
    background: rgba(var(--hue), .13);
    overflow: hidden;
    color: inherit;
}

.xc-crm__pcard-top:focus-visible { outline: 2px solid rgb(var(--hue)); outline-offset: 2px; }

.xc-crm__pcard-cat,
.xc-crm__pcard-state {
    position: absolute;
    inset-block-start: 11px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    max-inline-size: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-crm__pcard-cat { inset-inline-start: 11px; background: var(--surface); color: rgb(var(--hue)); }
.xc-crm__pcard-state { inset-inline-end: 11px; background: var(--surface); }
.xc-crm__pcard-state[data-kind="draft"] { background: var(--text); color: var(--surface); }

.xc-crm__pcard-tile {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    margin-inline-start: -29px;
    margin-block-start: -20px;
    inline-size: 58px;
    block-size: 58px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: rgb(var(--hue));
    color: rgb(var(--on-hue));
    box-shadow: 0 12px 26px rgba(var(--scrim), .18);
    transition: transform 400ms cubic-bezier(.2, .8, .2, 1);
}

.xc-crm__pcard-quote {
    position: absolute;
    inset-inline: 9px;
    inset-block-end: 9px;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 300ms, transform 350ms cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.xc-crm__pcard-agent {
    flex: none;
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--text);
    color: var(--surface);
}

.xc-crm__pcard-bubble {
    padding: 7px 11px;
    border-radius: 14px;
    border-end-start-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
    box-shadow: 0 6px 18px rgba(var(--scrim), .12);
}

.xc-crm__pcard:not([data-state="approved"]) .xc-crm__pcard-bubble { background: var(--surface-2); color: rgba(var(--ink), .7); }

.xc-crm__pcard:hover .xc-crm__pcard-quote,
.xc-crm__pcard:focus-within .xc-crm__pcard-quote { opacity: 1; transform: none; }

.xc-crm__pcard:hover .xc-crm__pcard-tile,
.xc-crm__pcard:focus-within .xc-crm__pcard-tile { transform: translateY(-30px) rotate(-8deg) scale(.9); }

/* Where nothing can point, the quote is simply there. */
@media (hover: none) {
    .xc-crm__pcard-quote { opacity: 1; transform: none; }
    .xc-crm__pcard-tile { transform: translateY(-30px) scale(.9); }
}

.xc-crm__pcard-body { display: flex; flex-direction: column; gap: 5px; padding: 0 6px 6px; font-size: 13.5px; }

.xc-crm__pcard-name {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -.01em;
    color: inherit;
    overflow-wrap: anywhere;
}

.xc-crm__pcard-name:hover,
.xc-crm__pcard-name:focus-visible { color: var(--peri); outline: none; }

.xc-crm__pcard-foot { display: flex; align-items: center; gap: 10px; margin-block-start: 5px; }
.xc-crm__pcard-foot form { display: flex; flex: none; }
.xc-crm__pcard-foot .xc-act { font-size: 12.5px; white-space: nowrap; }
.xc-crm__pcard-price { flex: 1; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }

@media (prefers-reduced-motion: reduce) {
    .xc-crm__co,
    .xc-crm__co-tile,
    .xc-crm__faces > span,
    .xc-crm__co-go,
    .xc-crm__peekrow,
    .xc-crm__pcard,
    .xc-crm__pcard-tile,
    .xc-crm__pcard-quote { transition: none; }

    .xc-crm__drawer[open] { animation: none; }

    .xc-crm__co:hover,
    .xc-crm__co:focus-visible,
    .xc-crm__pcard:hover,
    .xc-crm__pcard:focus-within,
    .xc-crm__co:hover .xc-crm__co-tile { transform: none; }
}