/* ══════════════════════════════════════════════════════════════════════════
   canon-customers.css — the customers page's live markup, on canon v5.

   A PORT OF THE MARKUP WE HAVE. customers-page.js builds the directory rows,
   the segment chips, the profile (identity, rate / pay / credit chips, stat
   band, tabs, timeline, documents, equipment and sites, and the in-place
   editors it borrows from the customer dialog) and four dialogs. All of it
   keeps its markup and is restyled here, in canon terms. Under the canon the
   controller always emits its canon-shaped variant (.crow / .cd-* / .cstat /
   .ctab / .tl and the rail chips), so that is the one shape drawn here.

   Loaded only while feature_canon_v5 is on (media="not all" until the gate
   flips it). books.css, ui.css, books-canon.css and customer360.css, which
   drew the same markup, are switched off by the same gate. Every rule is
   scoped to :root.canon-v5.
   ══════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* A few inline styles in the controller name books.css variables (a document
     link, a muted date). books.css is off under the canon, so they are pointed
     at canon tokens here rather than left to fall back to inherit. */
  :root.canon-v5 .cx-canon,
  :root.canon-v5 .bk-overlay {
    --inv-link: var(--c-accent);
    --inv-muted: var(--c-cap);
  }

  /* ── The split ────────────────────────────────────────────────────────── */
  :root.canon-v5 .cx-search { width: 280px; max-width: 100%; }
  :root.canon-v5 .cx-split {
    display: grid; grid-template-columns: 392px minmax(0, 1fr); gap: 16px; align-items: start;
  }
  @media (max-width: 1180px) {
    :root.canon-v5 .cx-split { grid-template-columns: minmax(0, 1fr); }
  }

  /* ── The directory card ───────────────────────────────────────────────── */
  :root.canon-v5 .cx-list {
    overflow: hidden; border: 1px solid var(--c-border); border-radius: 10px;
    background: var(--c-card); box-shadow: var(--lift), var(--lift-edge);
  }
  :root.canon-v5 .cx-segs { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 16px 12px; }
  :root.canon-v5 .ui-rail__seg {
    display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; box-sizing: border-box;
    border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-card); color: var(--c-text-2);
    font-family: inherit; font-size: 12px; white-space: nowrap; cursor: pointer;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  :root.canon-v5 .ui-rail__seg:hover { border-color: var(--c-border-2); color: var(--c-text); }
  :root.canon-v5 .ui-rail__seg.is-active { border-color: var(--c-accent-edge); background: var(--c-accent-soft); color: var(--c-on-wash-accent); font-weight: 500; }
  :root.canon-v5 .ui-rail__seg b { font-family: "Inter", system-ui, sans-serif; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-cap); }
  :root.canon-v5 .ui-rail__seg.is-active b { color: inherit; }
  :root.canon-v5 .ui-rail__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }

  :root.canon-v5 .cx-tools {
    display: flex; align-items: center; gap: 12px; padding: 9px 16px;
    border-block: 1px solid var(--c-border);
    font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap);
  }
  :root.canon-v5 .cx-showing { margin-right: auto; }
  :root.canon-v5 .cx-sortlbl { display: inline-flex; align-items: center; gap: 8px; }
  :root.canon-v5 .cx-sortlbl select {
    height: 28px; padding: 0 8px; box-sizing: border-box;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); color: var(--c-text);
    font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer;
  }

  :root.canon-v5 .cx-rows { max-height: 620px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
  @media (max-width: 1180px) {
    :root.canon-v5 .cx-rows { max-height: 360px; }
  }
  :root.canon-v5 .cx-row {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--c-border); border-left: 2px solid transparent;
    cursor: pointer; transition: background var(--dur) var(--ease);
  }
  :root.canon-v5 .cx-rows .cx-row:last-child { border-bottom: 0; }
  :root.canon-v5 .cx-row:hover { background: var(--c-card-2); }
  :root.canon-v5 .cx-row:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
  :root.canon-v5 .cx-row.is-sel { background: var(--c-accent-soft); border-left-color: var(--c-accent); }
  :root.canon-v5 .cx-row > div { min-width: 0; }
  :root.canon-v5 .crow .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--c-text); }
  :root.canon-v5 .crow .ct { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .crow .rt { text-align: right; }
  :root.canon-v5 .crow .owe { display: block; font-family: "Inter", system-ui, sans-serif; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-text); }
  :root.canon-v5 .crow .owe.bad { color: var(--c-on-wash-danger); }
  :root.canon-v5 .crow .paid { display: block; font-size: 12px; font-weight: 500; color: var(--c-on-wash-ok); }
  :root.canon-v5 .crow .ago { display: block; margin-top: 2px; font-size: 11px; color: var(--c-cap); }
  :root.canon-v5 .cx-rmain,
  :root.canon-v5 .cx-rright { min-width: 0; }
  :root.canon-v5 .cx-empty { padding: 40px 16px; text-align: center; font-size: 13px; color: var(--c-text-2); }
  /* The importer offer under "No customers yet." (feature_switch_import). */
  :root.canon-v5 .cx-empty-sub { margin: var(--sp-3) auto 0; max-width: 36ch; font-size: 12px; line-height: 1.5; color: var(--c-cap); }
  :root.canon-v5 .cx-empty-sub a { color: var(--c-accent); }

  /* Identity. The fill / ink pair is inline (core/customer-identity.js), and
     every pair was measured against its initials. */
  :root.canon-v5 .avatar,
  :root.canon-v5 .cx-av {
    display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px;
    font-size: 13px; font-weight: 700; letter-spacing: .01em;
  }

  :root.canon-v5 .sk { display: block; border-radius: 4px; background: var(--c-card-2); animation: cx-canon-pulse 1.4s var(--ease) infinite; }
  :root.canon-v5 .ui-rail__seg.sk { border-color: transparent; }


  /* Tags beside a name. Words carry the meaning; the wash only groups them. */
  :root.canon-v5 .cx-tag {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px;
    border: 1px solid var(--c-border); border-radius: 4px; background: var(--c-sunken); color: var(--c-cap);
    font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px;
  }
  :root.canon-v5 .cx-tag.portal { color: var(--c-on-wash-accent); border-color: var(--c-accent-edge); background: var(--c-accent-soft); }
  :root.canon-v5 .cx-tag.ndis { color: var(--c-on-wash-ok); border-color: color-mix(in srgb, var(--c-ok) 32%, transparent); background: color-mix(in srgb, var(--c-ok) 10%, transparent); }
  :root.canon-v5 .cx-tag.lead { color: var(--c-on-wash-warn); border-color: color-mix(in srgb, var(--c-warn) 34%, transparent); background: color-mix(in srgb, var(--c-warn) 10%, transparent); }
  :root.canon-v5 .cx-tag.rate { text-transform: none; letter-spacing: 0; }
  :root.canon-v5 .cx-tag.rate i { font-size: 11px; }

  /* ── The profile ──────────────────────────────────────────────────────── */
  :root.canon-v5 .cx-profile { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  :root.canon-v5 .cx-pcard {
    border: 1px solid var(--c-border); border-radius: 10px;
    background: var(--c-card); box-shadow: var(--lift), var(--lift-edge);
  }
  :root.canon-v5 .cx-profile-empty { padding: 60px 20px; text-align: center; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 .cd-h { padding: 20px; border-bottom: 1px solid var(--c-border); }
  :root.canon-v5 .cd-top { display: flex; align-items: flex-start; gap: 16px; }
  :root.canon-v5 .cd-top .avatar { width: 56px; height: 56px; border-radius: 14px; font-size: 19px; }
  :root.canon-v5 .cd-name {
    margin: 0; font-family: "Sora", system-ui, sans-serif; font-size: 20px; font-weight: 600;
    line-height: 1.25; letter-spacing: -.02em; color: var(--c-text); overflow-wrap: anywhere;
  }
  :root.canon-v5 .cd-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 7px; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 .cd-meta span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
  :root.canon-v5 .cd-meta i { font-size: 15px; color: var(--c-cap); }
  :root.canon-v5 .cd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  :root.canon-v5 .cd-acts a.btn { text-decoration: none; }
  /* The profile's own button names: .pri is the canon's .primary, .dgr the
     quiet destructive. */
  :root.canon-v5 .btn.pri { background: var(--c-cta); border-color: var(--c-cta); color: var(--c-cta-fg); font-weight: 600; }
  :root.canon-v5 .btn.pri:hover { background: var(--c-cta-h); border-color: var(--c-cta-h); }
  :root.canon-v5 .btn.dgr { color: var(--c-danger); }
  :root.canon-v5 .btn.dgr:hover { background: var(--c-danger-soft); border-color: color-mix(in srgb, var(--c-danger) 32%, transparent); }

  /* What you charge them, how they pay, what you hold for them. */
  :root.canon-v5 .cx-ratechip { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 4px 0 0; }
  :root.canon-v5 .cx-ratechip:empty { display: none; }
  :root.canon-v5 .cx-rate {
    display: inline-flex; align-items: center; gap: 4px; margin-left: -8px; padding: 4px 8px;
    border: 1px solid transparent; border-radius: 6px; background: none; color: var(--c-text);
    font-family: inherit; cursor: pointer;
  }
  :root.canon-v5 .cx-rate:hover { background: var(--c-sunken); border-color: var(--c-border); }
  :root.canon-v5 .cx-rate b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  :root.canon-v5 .cx-rate span { font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .cx-rate i { font-size: 12px; color: var(--c-cap); opacity: 0; transition: opacity var(--dur) var(--ease); }
  :root.canon-v5 .cx-rate:hover i,
  :root.canon-v5 .cx-rate:focus-visible i { opacity: 1; }
  :root.canon-v5 .cx-rate.is-unset span { font-weight: 600; color: var(--c-accent); }
  :root.canon-v5 .cx-rate.is-unset i { opacity: 1; color: var(--c-accent); }
  :root.canon-v5 .cx-pay,
  :root.canon-v5 .cx-credit { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .cx-pay i,
  :root.canon-v5 .cx-credit i { font-size: 13px; }
  :root.canon-v5 .cx-pay.is-slow { font-weight: 600; color: var(--c-on-wash-danger); }
  :root.canon-v5 .cx-credit { font-weight: 600; color: var(--c-on-wash-accent); }
  :root.canon-v5 .cx-rate-edit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  :root.canon-v5 .cx-rate-edit input {
    width: 7.5em; height: 30px; padding: 0 8px; box-sizing: border-box;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); color: var(--c-text);
    font-family: inherit; font-size: 13px;
  }
  :root.canon-v5 .cx-rate-cur,
  :root.canon-v5 .cx-rate-unit { font-size: 12px; color: var(--c-cap); }

  /* The stat band: four figures separated by hairlines, inside the one card. */
  :root.canon-v5 .cstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--c-border); }
  :root.canon-v5 .cstat { min-width: 0; padding: 16px 20px; border-left: 1px solid var(--c-border); }
  :root.canon-v5 .cstat:first-child { border-left: 0; }
  :root.canon-v5 .cstat-l { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap); }
  :root.canon-v5 .cstat b {
    display: block; margin-top: 6px; overflow-wrap: anywhere;
    font-family: "Sora", system-ui, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--c-text);
  }
  :root.canon-v5 .cstat b.sm { font-size: 15px; }
  :root.canon-v5 .cstat b.bad { color: var(--c-on-wash-danger); }
  :root.canon-v5 .cstat b.accent { color: var(--c-on-wash-accent); }
  :root.canon-v5 .cstat em { display: block; margin-top: 3px; font-size: 12px; font-style: normal; color: var(--c-cap); }

  :root.canon-v5 .ctabs { display: flex; gap: 2px; padding: 0 20px; overflow-x: auto; border-bottom: 1px solid var(--c-border); }
  :root.canon-v5 .ctab {
    margin-bottom: -1px; padding: 12px 12px 10px; white-space: nowrap;
    border: 0; border-bottom: 2px solid transparent; background: none; color: var(--c-cap);
    font-family: inherit; font-size: 14px; cursor: pointer;
  }
  :root.canon-v5 .ctab:hover { color: var(--c-text-2); }
  :root.canon-v5 .ctab.on { border-bottom-color: var(--c-accent); color: var(--c-text); font-weight: 500; }
  :root.canon-v5 .cbody { padding: 20px; }
  :root.canon-v5 .cx-tab-empty { padding: 8px 0; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 .cx-note {
    padding: 11px 13px; border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: 6px;
    background: var(--c-sunken); color: var(--c-text-2); font-size: 13px; font-style: italic;
  }

  /* Activity: a hairline down the column and a dot per event. */
  :root.canon-v5 .tl { display: flex; flex-direction: column; }
  :root.canon-v5 .tl-i { position: relative; display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
  :root.canon-v5 .tl-i:last-child { padding-bottom: 0; }
  :root.canon-v5 .tl-i::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 1px; background: var(--c-border); }
  :root.canon-v5 .tl-i:last-child::before { display: none; }
  :root.canon-v5 .tl-d { position: relative; width: 9px; height: 9px; margin: 5px 0 0 3px; border-radius: 50%; background: var(--c-border-2); }
  :root.canon-v5 .tl-d.on { background: var(--c-accent); }
  :root.canon-v5 .tl-d.bad { background: var(--c-danger); }
  :root.canon-v5 .tl-t { font-size: 13px; line-height: 1.4; color: var(--c-text); }
  :root.canon-v5 .tl-t b { font-weight: 500; }
  :root.canon-v5 .tl-t span { display: block; margin-top: 1px; font-size: 12px; color: var(--c-cap); }

  /* Invoices & quotes. */
  :root.canon-v5 .cx-dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
  :root.canon-v5 .cx-dtable th {
    padding: 0 10px 8px; border-bottom: 1px solid var(--c-border); text-align: left;
    font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-cap);
  }
  :root.canon-v5 .cx-dtable td { padding: 11px 10px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
  :root.canon-v5 .cx-dtable tr:last-child td { border-bottom: 0; }
  :root.canon-v5 .cx-dtable tbody tr:hover { background: var(--c-card-2); }
  :root.canon-v5 .cx-dtable .num { text-align: right; font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
  :root.canon-v5 .cx-dtable .doc-id { font-weight: 500; color: var(--c-text-2); }
  :root.canon-v5 .cx-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid var(--c-border); border-radius: 999px;
    font-size: 11px; font-weight: 500; white-space: nowrap; color: var(--c-text-2);
  }
  :root.canon-v5 .cx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
  :root.canon-v5 .cx-pill.pos { color: var(--c-on-wash-ok); border-color: color-mix(in srgb, var(--c-ok) 32%, transparent); }
  :root.canon-v5 .cx-pill.sent { color: var(--c-on-wash-accent); border-color: var(--c-accent-edge); }
  :root.canon-v5 .cx-pill.amber { color: var(--c-on-wash-warn); border-color: color-mix(in srgb, var(--c-warn) 34%, transparent); }
  :root.canon-v5 .cx-pill.neg { color: var(--c-on-wash-danger); border-color: color-mix(in srgb, var(--c-danger) 36%, transparent); }
  :root.canon-v5 .cx-pill.ink-3 { color: var(--c-cap); }

  /* Equipment and sites, read-only. */
  :root.canon-v5 .cx-equip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  :root.canon-v5 .cx-eq,
  :root.canon-v5 .cx-site {
    display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card);
  }
  :root.canon-v5 .cx-site { align-items: center; }
  :root.canon-v5 .cx-sites { display: flex; flex-direction: column; gap: 10px; }
  :root.canon-v5 .cx-eq-ic,
  :root.canon-v5 .cx-site-ic {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px;
    background: var(--c-accent-soft); color: var(--c-accent); font-size: 18px;
  }
  :root.canon-v5 .cx-site-ic { border: 1px solid var(--c-border); background: var(--c-sunken); color: var(--c-cap); font-size: 16px; }
  :root.canon-v5 .cx-eq-name,
  :root.canon-v5 .cx-site-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .cx-eq-meta,
  :root.canon-v5 .cx-site-addr { margin-top: 2px; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .cx-site-label .badge {
    padding: 0 6px; border: 1px solid var(--c-accent-edge); border-radius: 4px;
    font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-on-wash-accent);
  }
  :root.canon-v5 .cx-eq-w { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 2px 7px; border: 1px solid; border-radius: 4px; font-size: 11px; }
  :root.canon-v5 .cx-eq-w.ok { color: var(--c-on-wash-ok); border-color: color-mix(in srgb, var(--c-ok) 32%, transparent); }
  :root.canon-v5 .cx-eq-w.soon { color: var(--c-on-wash-warn); border-color: color-mix(in srgb, var(--c-warn) 34%, transparent); }
  :root.canon-v5 .cx-eq-w.exp { color: var(--c-on-wash-danger); border-color: color-mix(in srgb, var(--c-danger) 36%, transparent); }
  /* What has been done to a unit (core/equipment-history.js, feature_equipment_history). */
  :root.canon-v5 .eqh { margin-top: 7px; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .eqh > summary { cursor: pointer; }
  :root.canon-v5 .eqh-repeat { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--c-warn) 34%, transparent); border-radius: 4px; font-size: 11px; white-space: nowrap; color: var(--c-on-wash-warn); }
  :root.canon-v5 .eqh-visits { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; padding-left: 8px; border-left: 1px solid var(--c-border); }
  :root.canon-v5 .eqh-visit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  :root.canon-v5 .eqh-visit-main { color: var(--c-text); }
  :root.canon-v5 .eqh-why,
  :root.canon-v5 .eqh-more { font-size: 11px; color: var(--c-cap); }
  :root.canon-v5 .eqh-unplaced { margin-top: 12px; font-size: 12px; color: var(--c-cap); }

  /* The equipment and sites EDITORS, which feature_customer_tabs_edit moves out
     of the customer dialog and into the tab. They are the dialog's own nodes,
     so the dialog's field treatment follows them. */
  :root.canon-v5 #cxTabSlot .bk-sec { margin: 0; padding: 0; border: 0; }
  :root.canon-v5 #cxTabSlot .lbl {
    display: block; margin: 0 0 5px;
    font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--c-cap);
  }
  :root.canon-v5 #cxTabSlot .lbl .hint { font-weight: 400; letter-spacing: .04em; text-transform: none; }
  :root.canon-v5 #cxTabSlot input,
  :root.canon-v5 #cxTabSlot select {
    display: block; width: 100%; min-width: 0; height: 34px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); color: var(--c-text);
    font-family: inherit; font-size: 13px;
  }
  :root.canon-v5 #cxTabSlot input:focus,
  :root.canon-v5 #cxTabSlot select:focus { background: var(--c-card); border-color: var(--c-accent-edge); box-shadow: 0 0 0 3px var(--c-accent-soft); outline: none; }
  :root.canon-v5 .bk-items { display: flex; flex-direction: column; gap: 6px; }
  :root.canon-v5 .bk-item { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 6px; }
  :root.canon-v5 .bk-item > div { flex: 1; min-width: 0; }
  :root.canon-v5 .bk-item-title { font-size: 13px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .bk-item-meta { margin-top: 2px; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .bk-subform { display: none; margin-top: 10px; padding: 12px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); }
  :root.canon-v5 .bk-subform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  :root.canon-v5 .bk-subform-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
  @media (max-width: 520px) {
    :root.canon-v5 .bk-subform-grid { grid-template-columns: 1fr; }
  }
  :root.canon-v5 .hint { font-size: 12px; line-height: 1.45; color: var(--c-cap); }

  /* The NDIS participant card (customer360.css's, which is off under the
     canon: it redefines the canon's own --c-* names). */
  :root.canon-v5 .c360-card {
    padding: 20px; border: 1px solid var(--c-border); border-radius: 10px;
    background: var(--c-card); box-shadow: var(--lift), var(--lift-edge);
  }
  :root.canon-v5 .c360-ch { margin-bottom: 16px; }
  :root.canon-v5 .c360-ch h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .c360-ch h3 i { color: var(--c-accent); }
  :root.canon-v5 .c360-ch p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-cap); }
  :root.canon-v5 .c360-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  :root.canon-v5 .c360-metric { min-width: 0; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); }
  :root.canon-v5 .c360-metric .mk { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-cap); }
  :root.canon-v5 .c360-metric .mv { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--c-text); overflow-wrap: anywhere; }

  :root.canon-v5 .cx-profile.is-swap > * { animation: cx-canon-pane .14s var(--ease) backwards; }

  /* ── Phone: the directory is a drill-down, not a split ────────────────── */
  :root.canon-v5 .cx-back {
    display: none; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 12px; padding: 0 12px;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); color: var(--c-text);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  :root.canon-v5 .cx-back i { font-size: 16px; }
  @media (max-width: 640px) {
    :root.canon-v5 .cx-rows { max-height: none; overflow-y: visible; }
    :root.canon-v5 .cx-split.is-detail .cx-list { display: none; }
    :root.canon-v5 .cx-split:not(.is-detail) .cx-profile { display: none; }
    :root.canon-v5 .cx-split.is-detail .cx-back { display: inline-flex; }
    :root.canon-v5 .cx-wrap:has(.cx-split.is-detail) .cx-head,
    :root.canon-v5 .cx-wrap:has(.cx-split.is-detail) .fig-collapse { display: none; }
    :root.canon-v5 .cx-search { flex: 1 1 auto; width: auto; }
    :root.canon-v5 .cstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :root.canon-v5 .cstat:nth-child(3),
    :root.canon-v5 .cstat:nth-child(4) { border-top: 1px solid var(--c-border); }
    :root.canon-v5 .cstat:nth-child(odd) { border-left: 0; }
    :root.canon-v5 .cd-top .avatar { width: 44px; height: 44px; font-size: 15px; }
    :root.canon-v5 .cd-meta span { width: 100%; }
    :root.canon-v5 .ctabs { flex-wrap: wrap; overflow: visible; padding: 0 12px; }
    :root.canon-v5 .cbody { padding: 16px; }
    :root.canon-v5 .cx-dtable th:nth-child(3),
    :root.canon-v5 .cx-dtable td:nth-child(3) { display: none; }
  }

  /* ── The dialogs' bodies (the shells are canon-chrome.css's) ──────────── */
  :root.canon-v5 .stmt-loading,
  :root.canon-v5 .stmt-empty { padding: 20px 12px; text-align: center; font-size: 13px; color: var(--c-text-2); }
  :root.canon-v5 .stmt-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  :root.canon-v5 .stmt-total b { font-family: "Sora", system-ui, sans-serif; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-text); }
  :root.canon-v5 .stmt-total span { font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .stmt-age { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 12px; overflow: hidden; border: 1px solid var(--c-border); border-radius: 6px; }
  :root.canon-v5 .stmt-age div { padding: 8px 4px; text-align: center; border-left: 1px solid var(--c-border); }
  :root.canon-v5 .stmt-age div:first-child { border-left: 0; }
  :root.canon-v5 .stmt-age dt { margin: 0 0 2px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--c-cap); }
  :root.canon-v5 .stmt-age dd { margin: 0; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-text); }
  :root.canon-v5 .stmt-age dd.zero { font-weight: 500; color: var(--c-cap); }
  :root.canon-v5 .stmt-age dd.late { color: var(--c-on-wash-danger); }
  :root.canon-v5 .stmt-rows { max-height: 34vh; margin: 0; padding: 0; overflow: auto; list-style: none; border: 1px solid var(--c-border); border-radius: 6px; }
  :root.canon-v5 .stmt-rows li { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--c-border); font-size: 12px; }
  :root.canon-v5 .stmt-rows li:first-child { border-top: 0; }
  :root.canon-v5 .stmt-rows .sr-num { font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .stmt-rows .sr-due { flex: 1; color: var(--c-cap); }
  :root.canon-v5 .stmt-rows .sr-due.late { color: var(--c-on-wash-danger); }
  :root.canon-v5 .stmt-rows .sr-bal { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-text); }
  :root.canon-v5 .stmt-to { margin: 12px 0 0; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 .stmt-to b { font-weight: 600; color: var(--c-text); }
  :root.canon-v5 .stmt-to.warn { color: var(--c-on-wash-danger); }

  :root.canon-v5 .cx-sched-who { margin-left: 4px; font-weight: 500; color: var(--c-cap); }
  :root.canon-v5 .cx-sched { overflow: hidden; border: 1px solid var(--c-border); border-radius: 6px; }
  :root.canon-v5 .cx-sched-head,
  :root.canon-v5 .cx-sched-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5em 11em 2.5em; align-items: center; gap: 8px; padding: 8px 12px; }
  :root.canon-v5 .cx-sched-head { background: var(--c-sunken); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-cap); }
  :root.canon-v5 .cx-sched-row { border-top: 1px solid var(--c-border); }
  :root.canon-v5 .cx-sched-row.is-pending { background: var(--c-accent-soft); }
  :root.canon-v5 .cx-sched-row.is-labour { background: var(--c-sunken); }
  :root.canon-v5 .cx-sched-item { display: flex; flex-direction: column; min-width: 0; }
  :root.canon-v5 .cx-sched-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  :root.canon-v5 .cx-sched-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--c-cap); }
  /* Their name for the item — reads as the row's title, and is a field the
     moment you point at it. The small line under it keeps your catalog's name
     once theirs differs, so the link back to your catalog is never lost. */
  :root.canon-v5 .bk-modal input.cx-sched-name {
    height: 26px; margin-left: -7px; padding: 0 6px;
    background: transparent; border-color: transparent;
    font-weight: 600; text-overflow: ellipsis;
  }
  :root.canon-v5 .bk-modal input.cx-sched-name:hover { border-color: var(--c-border); }
  :root.canon-v5 .bk-modal input.cx-sched-name:focus { background: var(--c-card); border-color: var(--c-accent-edge); }
  :root.canon-v5 .cx-sched-item .cx-sched-was { overflow: visible; white-space: normal; }
  :root.canon-v5 .cx-sched-reset {
    margin-left: 2px; padding: 0; border: 0; background: none; white-space: nowrap;
    font: inherit; color: var(--c-on-wash-accent); text-decoration: underline; cursor: pointer;
  }
  :root.canon-v5 .si-names { display: block; margin: 0 0 8px; font-size: 12px; }
  :root.canon-v5 .bk-modal .si-names input { display: inline-block; margin: 0 4px 0 0; vertical-align: -2px; }
  :root.canon-v5 .si-names small { color: var(--c-cap); }
  :root.canon-v5 .cx-sched-listed { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--c-cap); }
  :root.canon-v5 .cx-sched-theirs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  :root.canon-v5 .bk-modal .cx-sched-theirs input { width: 6.5em; font-variant-numeric: tabular-nums; }
  :root.canon-v5 .cx-sched-since { flex-basis: 100%; font-size: 11px; color: var(--c-cap); }
  :root.canon-v5 .cx-sched-act { text-align: right; }
  :root.canon-v5 .cx-sched-x { padding: 4px; line-height: 1; }
  :root.canon-v5 .cx-sched-empty { padding: 20px 12px; text-align: center; color: var(--c-text-2); }
  :root.canon-v5 .cx-sched-empty i { display: block; margin-bottom: 8px; font-size: 28px; color: var(--c-cap); }
  :root.canon-v5 .cx-sched-empty p { max-width: 34em; margin: 0 auto; }
  :root.canon-v5 .cx-sched-when {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken);
  }
  :root.canon-v5 .cx-sched-when label { font-size: 12px; font-weight: 600; }
  :root.canon-v5 .bk-modal .cx-sched-when input { width: 10em; }
  :root.canon-v5 .cx-sched-when.is-future { border-color: var(--c-accent-edge); }
  :root.canon-v5 .cx-sched-whennote { flex-basis: 100%; font-size: 12px; line-height: 1.45; color: var(--c-cap); }
  :root.canon-v5 .cx-sched-when.is-future .cx-sched-whennote { color: var(--c-text); }
  :root.canon-v5 .cx-sched-when.is-future .cx-sched-whennote i { color: var(--c-accent); }
  /* Schedules already emailed (feature_rate_schedule_pdf) — the record of what
     the builder was sent, newest first, each with its PDF. */
  :root.canon-v5 .cx-sched-sent { margin-top: 12px; }
  :root.canon-v5 .cx-sched-sent h4 { margin: 0 0 6px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-cap); }
  :root.canon-v5 .cx-sched-sent ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--c-border); border-radius: 6px; }
  :root.canon-v5 .cx-sched-sent li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 12px; border-top: 1px solid var(--c-border); font-size: 12px; }
  :root.canon-v5 .cx-sched-sent li:first-child { border-top: 0; }
  :root.canon-v5 .cx-sched-sent b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-text); }
  :root.canon-v5 .cx-sched-sent span { flex: 1; min-width: 12em; color: var(--c-cap); }
  /* Online acceptance (feature_rate_schedule_accept): its own line under the send. */
  :root.canon-v5 .cx-sched-sent .cx-sched-acc { flex-basis: 100%; font-style: normal; color: var(--c-cap); }
  :root.canon-v5 .cx-sched-sent .cx-sched-acc.is-ok { color: var(--c-text); }
  :root.canon-v5 .cx-sched-sent .cx-sched-acc.is-ok i { color: var(--c-ok); }

  :root.canon-v5 .si-list { max-height: 44vh; overflow-y: auto; border: 1px solid var(--c-border); border-radius: 6px; }
  :root.canon-v5 .si-row { display: grid; grid-template-columns: 2em minmax(0, 1fr) minmax(0, 15em); align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--c-border); }
  :root.canon-v5 .si-row:last-child { border-bottom: 0; }
  :root.canon-v5 .si-name { display: flex; flex-direction: column; min-width: 0; }
  :root.canon-v5 .si-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  :root.canon-v5 .si-name small { font-size: 11px; color: var(--c-cap); }
  :root.canon-v5 .si-how { margin-left: 4px; }
  :root.canon-v5 .si-how.is-exact { color: var(--c-on-wash-ok); }
  :root.canon-v5 .si-how.is-close { color: var(--c-on-wash-warn); }
  :root.canon-v5 .si-how.is-none { color: var(--c-cap); }
  :root.canon-v5 .bk-modal .si-tick input { width: auto; height: auto; margin: 0; }
  @media (max-width: 560px) {
    :root.canon-v5 .si-row { grid-template-columns: 2em minmax(0, 1fr); }
    :root.canon-v5 .si-pick { grid-column: 2; }
    :root.canon-v5 .cx-sched-head { display: none; }
    :root.canon-v5 .cx-sched-row { grid-template-columns: minmax(0, 1fr) 2.5em; }
    :root.canon-v5 .cx-sched-listed,
    :root.canon-v5 .cx-sched-theirs { grid-column: 1; }
    :root.canon-v5 .cx-sched-listed::before { content: "Your price "; }
    :root.canon-v5 .cx-sched-act { grid-column: 2; grid-row: 1; }
  }

  /* ── One customers page (feature_one_customers) ───────────────────────── */
  /* The timeline: every row opens what it is about. */
  :root.canon-v5 .tl-one .tl-go {
    width: 100%; padding-inline: var(--sp-2); box-sizing: border-box;
    border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left;
    text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease);
  }
  :root.canon-v5 .tl-one .tl-go,
  :root.canon-v5 .tl-one .tl-service { padding-block: var(--sp-1); margin-bottom: var(--sp-1); }
  :root.canon-v5 .tl-one .tl-service { padding-inline: var(--sp-2); }
  :root.canon-v5 .tl-one .tl-go:hover { background: var(--c-card-2); }
  :root.canon-v5 .tl-one .tl-go:hover .tl-t b { color: var(--c-accent); }
  :root.canon-v5 .tl-one .tl-go:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
  :root.canon-v5 .tl-one .tl-i::before { left: calc(var(--sp-2) + 7px); top: calc(var(--sp-1) + 14px); bottom: calc(var(--sp-1) * -2); }
  :root.canon-v5 .tl-one > .cx-tab-empty { margin-top: var(--sp-3); }

  /* An unsaved name: what it is, and what to do about it. */
  :root.canon-v5 .cx-unsaved {
    display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3);
    border: 1px solid var(--c-border); border-left: 3px solid var(--c-warn); border-radius: 6px;
    background: var(--c-sunken); color: var(--c-text-2); font-size: 13px; line-height: 1.45;
  }
  :root.canon-v5 .cx-unsaved i { flex: none; font-size: 16px; color: var(--c-on-wash-warn); }
  :root.canon-v5 .cx-unsaved b { font-weight: 600; color: var(--c-text); }

  /* More: the sections a workspace has not used yet wait here. */
  :root.canon-v5 .cx-more { position: relative; }
  :root.canon-v5 .cx-more > summary { list-style: none; }
  :root.canon-v5 .cx-more > summary::-webkit-details-marker { display: none; }
  :root.canon-v5 .cx-more-menu {
    position: absolute; z-index: 20; top: calc(100% + var(--sp-1)); right: var(--sp-0); min-width: 180px; padding: var(--sp-1);
    border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-card); box-shadow: var(--lift), var(--lift-edge);
  }
  :root.canon-v5 .cx-more-menu button {
    display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2);
    border: 0; border-radius: 6px; background: none; color: var(--c-text); font: inherit; font-size: 13px;
    text-align: left; cursor: pointer;
  }
  :root.canon-v5 .cx-more-menu button:hover,
  :root.canon-v5 .cx-more-menu button:focus-visible { background: var(--c-card-2); outline: none; }
  :root.canon-v5 .cx-more-menu i { font-size: 15px; color: var(--c-cap); }

  /* The shared equipment form's notes field (core/equipment-form.js), when
     the tabs carry the editor. */
  :root.canon-v5 #cxTabSlot textarea {
    display: block; width: 100%; min-width: 0; padding: var(--sp-2); box-sizing: border-box; resize: vertical;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); color: var(--c-text);
    font-family: inherit; font-size: 13px;
  }
  :root.canon-v5 #cxTabSlot textarea:focus { background: var(--c-card); border-color: var(--c-accent-edge); box-shadow: 0 0 0 3px var(--c-accent-soft); outline: none; }

  /* Coarse pointers. */
  @media (hover: none) {
    :root.canon-v5 .ui-rail__seg,
    :root.canon-v5 .ctab,
    :root.canon-v5 .cx-rate { min-height: 44px; }
    :root.canon-v5 .cx-row { min-height: 60px; }
  }
}

/* Mounted inside Dispatch (?embed=1, feature_one_customers): the board around
   it is the chrome. Outside the layer on purpose — the Books bar and the
   floating launchers are drawn by unlayered sheets, which a layered rule
   cannot beat at any specificity. */
:root.cx-embed #ndBooksNav,
:root.cx-embed .books-bar,
:root.cx-embed #moneySubnav,
:root.cx-embed .ndtb,
:root.cx-embed #dmLauncher { display: none; }
:root.cx-embed.canon-v5 .cx-canon { padding-top: var(--sp-4); }

@keyframes cx-canon-pulse { 50% { opacity: .45; } }
@keyframes cx-canon-pane { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root.canon-v5 .sk,
  :root.canon-v5.mk-on .sk,
  :root.canon-v5 .cx-profile.is-swap > * { animation: none; }
}