/* Customers and the customer page, "The Line, field-grade" (docs/DESIGN-SYSTEM.md). Lane O2: the list, the customer page, the visit record,
   stations, might leave, renewals and the panels on a customer. Every colour, size and radius is a token; nothing here defines one.
   Names start with cx- so they never meet another lane's. */

/* ======================================================================== Customers, the list ======================================================================== */
.cx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.cx-filters .chips { margin: 0; }
.cx-search { position: relative; display: block; flex: 0 1 340px; min-width: 200px; }
.cx-search svg { position: absolute; left: 10px; top: 50%; margin-top: -8px; color: var(--ink-3); pointer-events: none; }
.cx-search .input { width: 100%; height: var(--h-control-sm); padding-left: 32px; font-size: var(--fs-sec); line-height: var(--lh-sec); }
/* the sort pick is for a phone, where a table has no headers to press */
.cx-sort { display: none; align-items: center; gap: 4px; }
@media (max-width: 720px) { .cx-sort { display: inline-flex; } .cx-search { flex: 1 1 100%; } }
/* a phone: a customer is four lines under a hairline (name and what they owe, where and the number, their plan and status, next and last visit) */
@media (max-width: 720px) {
  .cx-list { margin: 0; overflow: visible; }
  .cx-list > .cx-t:not(.cx-risk-t) { display: block; table-layout: auto; min-width: 0; }
  .cx-list > .cx-t:not(.cx-risk-t) colgroup { display: none; }
  .cx-list > .cx-t:not(.cx-risk-t) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cx-list > .cx-t:not(.cx-risk-t) tbody { display: block; }
  .cx-list > .cx-t:not(.cx-risk-t) tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .cx-list > .cx-t:not(.cx-risk-t) tbody td { display: block; height: auto; padding: 0; border: 0; min-width: 0; }
  .cx-list > .cx-t:not(.cx-risk-t) td:empty { display: none; }
  .cx-list > .cx-t:not(.cx-risk-t) td:nth-child(1) { grid-column: 1; font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .cx-list > .cx-t:not(.cx-risk-t) td.num { grid-column: 2; grid-row: 1; text-align: right; align-self: baseline; }
  .cx-list > .cx-t:not(.cx-risk-t) td:nth-child(2) { grid-column: 1; }
  .cx-list > .cx-t:not(.cx-risk-t) td:nth-child(3) { grid-column: 2; text-align: right; white-space: nowrap; }
  .cx-list > .cx-t:not(.cx-risk-t) td:nth-child(4) { grid-column: 1; color: var(--ink-2); }
  .cx-list > .cx-t:not(.cx-risk-t) td:nth-child(5) { grid-column: 2; text-align: right; }
  .cx-list > .cx-t:not(.cx-risk-t) td:nth-child(7), .cx-t:not(.cx-risk-t) td:nth-child(8) { color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }
  .cx-list > .cx-t:not(.cx-risk-t) td:nth-child(7) { grid-column: 1; }
  .cx-list > .cx-t:not(.cx-risk-t) td:nth-child(8) { grid-column: 2; text-align: right; }
  .cx-list > .cx-t:not(.cx-risk-t) td:nth-child(7)::before { content: "Next visit: "; }
  .cx-list > .cx-t:not(.cx-risk-t) td:nth-child(8)::before { content: "Last visit: "; }
  .cx-skel .cx-t colgroup, .cx-skel .cx-t thead { display: none; }
  .cx-skel .cx-t tbody td { display: none; padding-top: 12px; padding-bottom: 12px; }
  .cx-skel .cx-t tbody td:nth-child(1), .cx-skel .cx-t tbody td:nth-child(2), .cx-skel .cx-t tbody td:nth-child(6) { display: table-cell; }
}
/* the chips run past a phone's width: the last one fades out at the edge, so a cut-off reads as more to scroll to */
@media (max-width: 560px) {
  .cx-filters .chips { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .cx-filters .chips .chip:last-child { margin-right: 28px; }
}

.cx-t { table-layout: fixed; }
.cx-risk-t { table-layout: auto; }
/* eight columns at 1366: narrower, long values wrap, nothing is hidden */
.cx-t th, .cx-t td { padding-left: 8px; padding-right: 8px; }
.cx-t th:first-child, .cx-t td:first-child { padding-left: 8px; }
.cx-t th.sortable { padding: 0; }
.cx-t th.sortable .sort-btn { padding: 0 8px; }
.cx-t td { color: var(--ink); }
.cx-t td .muted { color: var(--ink-3); }
.cx-t td.cx-addr, .cx-t td.cx-phone, .cx-t td.cx-last { color: var(--ink-3); }
.cx-t td .pill { font-size: var(--fs-body); line-height: var(--lh-body); }
.cx-t td a.strong { color: var(--ink); }
.cx-form .rt-form { border-top: 0; padding-top: 0; }
.cx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }
/* the page bar is narrow on a phone: the move-in link keeps its icon and gives up its words */
@media (max-width: 560px) { .cx-lg, .stop-step-n { display: none; } }
/* loading: still blocks at the real row height, after the 150 ms every skeleton waits; nothing moves */
.cx-skel.wait { visibility: hidden; }
.cx-skel { overflow: hidden; margin: 0 -8px; }
.cx-skel .t th { position: static; }
.cx-skb { display: block; height: 14px; max-width: 100%; border-radius: 5px; background: var(--sunk); }
.cx-skb.end { margin-left: auto; }
.cx-skb.tall { height: 24px; border-radius: 6px; }
.cx-skb.mid { height: 16px; }
.cx-skdot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.cx-skst { display: flex; align-items: center; gap: 8px; }
.cx-skst .cx-skb:last-child { flex: 1; }
.cx-skel .cx-t { table-layout: fixed; }
.cx-empty { margin-top: 8px; }
.cx-empty-go { margin-top: 12px; }

/* ======================================================================== A customer, the record page ======================================================================== */
/* the head: the name, the address, four labelled facts; the tools and the twelve-month line at the right */
.cx-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px 32px; padding: 4px 0 16px; }
.cx-id { min-width: 0; flex: 1 1 420px; }
.cx-id h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--w-semibold); overflow-wrap: anywhere; }
.cx-address { margin-top: 2px; color: var(--ink-2); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.cx-id .status-line { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cx-rfs { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 14px; padding-left: 13px; margin-left: -13px; }
.cx-rf { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-rf .l { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-3); }
.cx-rf .v { position: relative; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); color: var(--ink); }
.cx-rf .v .muted { font-weight: var(--w-regular); }
.cx-rf .v > .mk { position: absolute; left: -13px; top: 7px; }
.cx-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; max-width: 100%; }
.cx-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; }
.cx-tools .btn.ghost { color: var(--ink-2); padding: 0 10px; }
@media (hover: hover) { .cx-tools .btn.ghost:hover { background: var(--hover); color: var(--ink); } }
.cx-year { width: 288px; max-width: 100%; }
.cx-year-l { margin-bottom: 6px; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-3); }
.cx-year-row { display: flex; align-items: center; height: 14px; padding: 0 3px; }
.cx-seg { flex: 1; height: 2px; background: var(--hair); }
.cx-seg.on { background: var(--saguaro); }
.cx-m { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--saguaro); }
.cx-m.act { background: var(--amber); }
.cx-m.none { width: 6px; height: 6px; margin: 1px; background: var(--edge); }
.cx-m.here { width: 12px; height: 12px; margin: -2px; background: var(--bg); box-shadow: inset 0 0 0 2.5px var(--saguaro); }
.cx-year-m { display: flex; justify-content: space-between; padding: 0 1px; margin-top: 4px; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
.cx-year-m span { width: 14px; text-align: center; }
@media (max-width: 900px) { .cx-aside { align-items: flex-start; } .cx-tools { justify-content: flex-start; margin-left: -10px; } }

/* forms that open under the head (status, edit, schedule a visit): ruled above and below, not boxed */
.cx-forms:empty { display: none; }
.cx-forms > .banner { margin-bottom: 12px; }
.cx-form { margin: 0 0 16px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.cx-form .h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); }

/* the tabs: 13/18 500, the current one ink with a 2 px rule under it */
.cx-tabs { margin-top: 4px; border-bottom: 1px solid var(--hair); }
.cx-tablist { display: flex; gap: 20px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cx-tablist [role="tab"] { flex: none; position: relative; height: 36px; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; white-space: nowrap;
  font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); }
.cx-tablist [role="tab"][aria-selected="true"] { color: var(--ink); }
.cx-tablist [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
@media (hover: hover) { .cx-tablist [role="tab"]:hover { color: var(--ink); } }
.cx-tablist .n { font-weight: var(--w-regular); color: var(--ink-3); }
@media (max-width: 900px), (pointer: coarse) { .cx-tablist [role="tab"] { height: 44px; } }

/* the page under the tabs: on Overview the property and the visits, with the account in a column at the right */
.cx-panel { padding-top: 20px; min-width: 0; }
.cx-panel.cx-over { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 56px; align-items: start; padding-top: 24px; }
@media (max-width: 1100px) { .cx-panel.cx-over { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.cx-main, .cx-side { min-width: 0; }
.cx-main > .cx-sec + .cx-sec, .cx-side > * + * { margin-top: 28px; }
.cx-h { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); }
.cx-h .n { font-size: var(--fs-sec); line-height: var(--lh-sec); letter-spacing: 0; color: var(--ink-3); font-weight: var(--w-regular); margin-left: 4px; }
.cx-more { margin-right: -8px; color: var(--ink-2); }
@media (hover: hover) { .cx-more:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; } }
.cx-sech { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-sec .utabs { margin-top: 12px; }
.cx-free { margin-top: 12px; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); max-width: 52ch; }
.cx-side .cx-h + * { margin-top: 8px; }
.cx-dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); margin: 8px 0 0; border-bottom: 1px solid var(--hair); }
.cx-dl + .cx-dl { margin-top: 0; }
.cx-sub { font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-semibold); color: var(--ink); }
.cx-dl > dt, .cx-dl > dd { margin: 0; padding: 7px 0; border-top: 1px solid var(--hair); font-size: var(--fs-sec); line-height: var(--lh-sec); overflow-wrap: anywhere; }
.cx-dl > dt { color: var(--ink-3); }
.cx-dl a { text-decoration: none; }
@media (hover: hover) { .cx-dl a:hover { text-decoration: underline; } }

/* the gate note: the loudest text after the name; the code set apart, a button to copy it */
.cx-gate { align-items: center; font-weight: var(--w-regular); }
.cx-gate .ic, .cx-gate > svg { flex: none; }
.cx-gate .code { font-weight: var(--w-semibold); white-space: nowrap; }
.cx-gate .btn { color: var(--amber-text); border-color: color-mix(in srgb, var(--amber-text) 35%, transparent); }
.cx-gate .btn.ghost { border-color: transparent; }
@media (hover: hover) { .cx-gate .btn:hover { background: color-mix(in srgb, var(--amber) 14%, transparent); } }
.tech-note label { display: block; margin-bottom: 6px; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-2); }
.tech-note textarea { width: 100%; resize: vertical; }
.tech-note-state { min-height: 18px; margin-top: 4px; color: var(--ink-3); }
.tech-note .btn { margin-top: 8px; }
.tech-note .cx-free { margin-top: 0; }

/* the property: the plot and its numbered stations */
.cx-prop { display: grid; grid-template-columns: minmax(260px, 440px) minmax(280px, 1fr); gap: 28px; margin-top: 8px; align-items: start; }
@media (max-width: 800px) { .cx-prop { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.cx-prop.alone { grid-template-columns: minmax(0, 440px); margin: 8px 0 20px; }
.cx-plot { margin: 0; }
.cx-plot figcaption { margin-top: 8px; color: var(--ink-3); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.plot-svg { display: block; width: 100%; height: auto; }
.pl-lot { fill: none; stroke: var(--hair); stroke-width: 1; }
.pl-house { fill: var(--sunk); stroke: var(--edge); stroke-width: 1; }
.pl-fine { fill: none; stroke: var(--edge); stroke-width: 1; }
.pl-line { fill: none; stroke: var(--saguaro); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pl-st { fill: var(--saguaro); stroke: var(--bg); stroke-width: 2; }
.pl-st.act { fill: var(--amber); }
.pl-st.off { fill: var(--bg); stroke: var(--edge-strong); stroke-width: 1.5; }
.pl-n { font-family: var(--font-sans); font-size: 13px; font-weight: 600; fill: var(--on-saguaro); text-anchor: middle; }
.pl-n.act { fill: var(--on-amber); } .pl-n.off { fill: var(--ink-3); }
.pl-t { font-family: var(--font-sans); font-size: 13px; fill: var(--ink-3); }
.cx-stl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.cx-stl li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 32px; padding: 5px 0; border-bottom: 1px solid var(--hair); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.cx-k { width: 18px; height: 18px; border-radius: 3px; display: grid; place-items: center; background: var(--saguaro); color: var(--on-saguaro); font-size: var(--fs-meta); font-weight: var(--w-semibold); line-height: 1; }
.cx-k.act { background: var(--amber); color: var(--on-amber); }
.cx-k.off { background: var(--bg); color: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--edge-strong); }
.cx-sp { min-width: 0; }
.cx-sw { color: var(--ink-3); text-align: right; white-space: nowrap; }
.cx-sw.amber { color: var(--amber-text); }

/* the visit rail: each visit a point on a 2 px Saguaro line; booked ones hollow on a dashed line */
.cx-rail { margin-top: 12px; }
.cx-visit { display: grid; grid-template-columns: 76px 20px minmax(0, 1fr) 168px; column-gap: 12px; padding-bottom: 20px; position: relative; }
.cx-when { display: block; text-align: right; color: var(--ink); text-decoration: none; }
.cx-when b { display: block; font-weight: var(--w-semibold); }
.cx-when small { display: block; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
.cx-node { position: relative; display: flex; justify-content: center; }
.cx-node::before { content: ""; position: absolute; top: 14px; bottom: -22px; width: 2px; background: var(--saguaro); }
.cx-visit.last .cx-node::before { display: none; }
.cx-visit.todo .cx-node::before { background: none; border-left: 2px dashed var(--edge-strong); width: 0; }
.cx-pt { position: relative; z-index: 1; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--saguaro); box-shadow: 0 0 0 3px var(--bg); }
.cx-pt.sq { border-radius: 2px; }
.cx-pt.here { width: 14px; height: 14px; margin-top: 3px; background: var(--bg); box-shadow: inset 0 0 0 2.5px var(--saguaro), 0 0 0 3px var(--bg); }
.cx-pt.plan { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--edge-strong), 0 0 0 3px var(--bg); }
.cx-visit.gone { color: var(--ink-3); }
.cx-visit.gone .cx-pt { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--edge), 0 0 0 3px var(--bg); }
.cx-body { min-width: 0; }
.cx-svc a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .cx-svc a:hover, .cx-when:hover b { text-decoration: underline; } }
.cx-svc span { margin-left: 6px; font-weight: var(--w-regular); color: var(--ink-3); }
.cx-prod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; margin-top: 2px; }
.cx-pn .mono { margin-left: 6px; }
.cx-amt { text-align: right; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.cx-note { margin-top: 4px; color: var(--ink-2); font-size: var(--fs-sec); line-height: var(--lh-sec); max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-tech { text-align: right; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
.cx-tech b { display: block; font-weight: var(--w-regular); color: var(--ink-2); }
.cx-tech span { display: block; }
@media (max-width: 760px) {
  .cx-visit { grid-template-columns: 60px 16px minmax(0, 1fr); column-gap: 8px; }
  .cx-tech { grid-column: 3; text-align: left; display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; }
  .cx-tech b { display: inline; }
  .cx-prod { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cx-amt { text-align: left; }
}

/* plans, feedback, their page, stations: sections on the page, rows between hairlines */
.cx-plans .cx-sech { margin-bottom: 4px; }
.cx-planform { margin: 8px 0 12px; max-width: 520px; }
.cx-plan { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.cx-plan .pause-why { flex: 1 0 100%; display: grid; gap: 8px; max-width: 520px; }
.cx-theirpage { max-width: 62ch; }
.feedback { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px 48px; align-items: start; }
.fb-row { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--hair); }
.feedback .cx-h { margin-bottom: 6px; }
.cx-dl + .cx-dl > dt:first-child, .cx-dl + .cx-dl > dt:first-child + dd { border-top: 0; }

/* Money: the owed line, the few things to do, then invoices, payments and the rest as ruled rows */
.cx-acts.left { justify-content: flex-start; }
.money-acts { margin-top: 10px; }
.money-acts > .btn.ghost:first-child { margin-left: -8px; }
.money-panel .owes { margin-top: 8px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); color: var(--ink); }
.money-panel .owes .mk { margin-right: 8px; vertical-align: 1px; }
.money-panel > a.small { display: inline-block; margin: 2px 12px 0 0; color: var(--ink-2); }
.money-panel .unbilled { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.money-list { margin-top: 16px; display: grid; }
.money-list > .small:first-child { margin-bottom: 4px; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-medium); color: var(--ink-3); }
.money-row { gap: 8px; padding: 7px 0; border-top: 1px solid var(--hair); color: inherit; text-decoration: none; align-items: baseline; }
.money-list > a.small { margin-top: 6px; color: var(--ink-2); }
@media (hover: hover) { a.money-row:hover { background: var(--hover); box-shadow: -8px 0 0 var(--hover), 8px 0 0 var(--hover); } }
.money-state { white-space: nowrap; }
.money-panel .banner { margin: 8px 0 0; }

/* Might leave and Renewals: a labelled count line, then one row to work per customer */
.at-risk .ledger, .renewals .ledger { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; margin: 0; padding: 0; border: 0; font-size: var(--fs-sec); line-height: var(--lh-sec); color: var(--ink-3); }
.at-risk .ledger .lg:not(:last-child)::after, .renewals .ledger .lg:not(:last-child)::after { content: none; }
.at-risk .ledger .lg-v, .renewals .ledger .lg-v { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-semibold); color: var(--ink); }
.at-risk .ledger .lg-v.bad-text, .renewals .ledger .lg-v.bad-text { color: var(--red-text); }
.at-risk .list-head, .renewals .list-head { margin: 0 0 8px; }
.at-risk > p.small, .renewals > p.small { margin-bottom: 4px; }
.at-risk .risk a.strong, .renewals .renewal a.strong { color: var(--ink); }
.cx-risk-t td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.cx-risk-t td.cx-risk-plan { color: var(--ink-2); }
.cx-risk-t .risk-why { color: var(--ink-2); max-width: 62ch; }
.cx-risk-t .risk-why + .risk-why { margin-top: 2px; }
.cx-risk-t tr.handled td { color: var(--ink-3); }
.cx-risk-t td.act { text-align: right; }
/* a row's actions are quiet words; the first one shows its edge when the row is under the pointer or has focus */
.cx-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; }
.cx-acts .btn.ghost { color: var(--ink-2); }
@media (hover: hover) {
  .cx-risk-t tbody tr:hover td { background: var(--hover); }
  .cx-risk-t tbody tr:hover .cx-acts .btn:first-child, .cx-risk-t tbody tr:focus-within .cx-acts .btn:first-child { border-color: var(--edge); color: var(--ink); }
}
@media (hover: none) { .cx-acts .btn.xs { height: var(--h-control); } }

/* the status and the money notes under a customer: small headings in the side column */
.cx-side .cx-sub { margin: 0; }
.status-history .status-row { padding: 8px 0; border-top: 1px solid var(--hair); }
.status-history .rule-label { margin: 0 0 4px; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); color: var(--ink); }
.cx-side .ruled, .cx-sec.ruled { border-top: 0; padding-top: 0; margin-bottom: 0; }
.status-radios { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; border: 0; }
.status-radios .check { min-height: 32px; }
.status-form .form-grid { margin-top: 10px; }
.status-effects { display: grid; gap: 6px; margin-top: 12px; padding: 12px; border-radius: var(--r-2); background: var(--sunk); }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.status-history { margin-top: 18px; }
/* why a plan stops: under its row, a sunk area rather than a box in a box */
.pause-why { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border-radius: var(--r-2); background: var(--sunk); }
.pause-why .input { width: 100%; max-width: 520px; }

/* ======================================================================== A visit's record ======================================================================== */
.cx-recco { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-bottom: 10px; font-size: var(--fs-sec); line-height: var(--lh-sec); }
.cx-recco b { font-weight: var(--w-semibold); }
.cx-facts { grid-template-columns: 148px minmax(0, 1fr); margin-top: 0; }
.cx-rec .cx-main > .cx-sec, .cx-rec .cx-main > section, .cx-rec .cx-main > .wdiir { margin-top: 28px; }
.cx-rec .cx-sec > .cx-h { margin-bottom: 8px; }
.cx-rec h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); margin: 0 0 8px; }
.cx-rec .stop-paperwork > div, .cx-rec .closed-gap { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--hair); }
.cx-rec .stop-paperwork > div:first-child { margin-top: 28px; }
.cx-rec .wdiir { padding-top: 12px; border-top: 1px solid var(--hair); }
.cx-rec .t td.mono { color: var(--ink-3); }
.cx-rec .wdiir-items th[scope="row"] { width: 3em; color: var(--ink-2); font-weight: var(--w-semibold); }
.cx-rec .wdiir-items td:nth-child(2) { width: 38%; }
.cx-rec .wdiir-items tr.missing td:last-child { font-weight: var(--w-semibold); }
.cx-stub { margin-top: 28px; padding-top: 10px; border-top: 1px solid var(--hair); }
.fixed { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--w-medium); color: var(--amber-text); }
.reentry { margin-top: 10px; padding: 8px 12px; border: 0; border-radius: var(--r-2); background: var(--sunk); color: var(--ink); }
.ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.ticks li { display: flex; gap: 8px; align-items: flex-start; }
.ticks li svg { flex: none; margin-top: 2px; }
.ticks li:not(.on) { color: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; align-items: center; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px var(--edge-strong); }
.cx-check { display: flex; align-items: flex-start; gap: 16px; margin-top: 8px; }
.cx-check .perim { flex: none; }
.perim { position: relative; display: inline-grid; place-items: center; }
.perim svg { position: absolute; inset: 0; }
.perim .p-ok { fill: none; stroke: var(--saguaro); stroke-linecap: round; stroke-linejoin: round; }
.perim .p-gap { fill: none; stroke: var(--amber); stroke-linecap: round; stroke-dasharray: 0.1 6; }
.perim .p-n { position: relative; font-size: 20px; line-height: 1; font-weight: var(--w-semibold); letter-spacing: -.02em; }
.perim .p-n small { font-size: var(--fs-meta); font-weight: var(--w-regular); color: var(--ink-3); letter-spacing: 0; }
.checks { display: grid; gap: 6px; margin-top: 6px; }
.checks .c { display: flex; gap: 8px; align-items: flex-start; }
.checks .c svg { flex: none; margin-top: 2px; }
.timeline { display: grid; margin-top: 4px; }
.timeline .e { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.cx-form.correct { margin-bottom: 16px; }
.gap-row { margin-top: 8px; }
.mail-send { display: grid; gap: 8px; padding: 0 0 10px; margin-bottom: 16px; border-bottom: 1px solid var(--hair); }
.mail-send-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: var(--h-control-sm); }
.mail-send-bar .cx-h { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; }
.mail-send-bar .mail-why { margin: 0; flex: 1 1 260px; color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); }
.mail-send .mail-why { margin: 0; }
.mail-send ul { margin: 0; padding-left: 18px; }
.treatment-warranty .cx-h { margin-bottom: 4px; }
.cx-head .status-line { margin-top: 8px; }
.stop-step { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.stop-step-n { min-width: 56px; text-align: center; font-size: var(--fs-sec); line-height: var(--lh-sec); font-weight: var(--w-semibold); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* a property's stations, visit by visit: a mark per check, readable in black and white too (the letter says what the colour says) */
.station-grid th[scope="row"] { text-align: left; white-space: nowrap; font-weight: var(--w-semibold); }
.station-grid .cell { text-align: center; padding-left: 3px; padding-right: 3px; min-width: 3em; }
.station-grid thead .cell { font-size: var(--fs-meta); white-space: nowrap; }
.mark { display: inline-grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: var(--r-1); font-weight: var(--w-semibold); font-size: var(--fs-meta); line-height: 1; }
.mark.ok { background: var(--sunk); color: var(--ink-2); }
.mark.warn { background: var(--amber-tint); color: var(--amber-text); }
.mark.bad { background: var(--amber-tint); color: var(--amber-text); box-shadow: inset 0 0 0 1.5px var(--amber); }
.mark.none { color: var(--ink-3); }
.station-history { margin-top: 18px; break-inside: avoid; }
.station-history h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-bottom: 6px; }
@media print { .mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* the record on paper: the record itself and nothing around it */
@media print {
  .cx-side, .cx-aside, .cx-forms, .notice, .banner, .stop-step { display: none !important; }
  .cx-panel.cx-over { display: block; padding-top: 0; }
  .cx-head { padding: 0 0 8px; }
  .cx-rec .cx-main > .cx-sec { break-inside: avoid; }
  .reentry { background: none; border: 1.5px solid var(--ink); }
  .cx-dl > dt, .cx-dl > dd, .cx-recco, .cx-stub, .timeline .e { border-color: var(--ink); }
  .cx-dl { border-bottom-color: var(--ink); }
}

/* ======================================================================== The customer's own page (c.html) ======================================================================== */
/* what the customer reads on their phone: one column, plain ruled sections, the visit as a few facts. Same type and colours as the office. */
.cp-body { height: auto; min-height: 100%; }
.cp-wrap { max-width: 640px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 24px; }
.cp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.cp-head .btn { height: 44px; }
.cp-company { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); }
.cp-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--w-semibold); overflow-wrap: anywhere; }
.cp-address { margin-top: -16px; }
.cp-h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-semibold); margin-bottom: 8px; }
.cp-card { padding: 16px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 6px; }
.cp-next .cp-when { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-semibold); }
.cp-pill { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: var(--w-medium); }
.cp-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--saguaro); }
.cp-section { display: grid; gap: 10px; }
.cp-visit { padding: 14px 0; border-top: 1px solid var(--hair); display: grid; gap: 8px; }
.cp-visit.folded { border-top: 0; padding-top: 0; }
.cp-visit-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cp-facts { margin: 0; display: grid; gap: 6px; }
.cp-facts > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; }
.cp-facts dt { color: var(--ink-3); font-size: var(--fs-sec); line-height: var(--lh-sec); padding-top: 1px; }
.cp-facts dd { margin: 0; }
.cp-notes { white-space: pre-line; }
.cp-ask { display: grid; gap: 8px; margin-top: 6px; justify-items: start; }
.cp-form { display: grid; gap: 10px; width: 100%; }
.cp-form .field { display: grid; gap: 6px; font-weight: var(--w-medium); }
.cp-form textarea { width: 100%; resize: vertical; min-height: 72px; }
.cp-said { color: var(--saguaro-text); font-weight: var(--w-medium); }
.cp-foot { padding-top: 14px; border-top: 1px solid var(--hair); display: grid; gap: 4px; }
@media (max-width: 480px) { .cp-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.cp-lang { justify-self: start; }
.cp-stars { display: flex; gap: 4px; margin: 4px 0; }
.cp-star { width: 44px; height: 44px; border: 1px solid var(--edge-strong); border-radius: var(--r-2); background: transparent; color: var(--ink-3); font-size: var(--fs-h2); line-height: 1; cursor: pointer; }
.cp-star.on { color: var(--ink); background: var(--sel); border-color: var(--saguaro); }
@media (hover: hover) { .cp-star:hover { border-color: var(--ink); } }
.cp-rate p { margin: 0; }
.cp-cover + .cp-cover { border-top: 1px solid var(--hair); padding-top: 10px; margin-top: 4px; }
.cp-warn { color: var(--amber-text); font-weight: var(--w-medium); }
.cp-dead { gap: 8px; }
.cp-dead .empty-mark { justify-self: start; }
.cp-fold { border-top: 1px solid var(--hair); }
.cp-fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 44px; padding: 10px 0 10px 22px; position: relative; cursor: pointer; list-style: none; }
.cp-fold > summary::-webkit-details-marker { display: none; }
.cp-fold > summary::before { content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); }
.cp-fold[open] > summary::before { transform: rotate(45deg); }
@media (max-width: 720px) { .cp-wrap .btn { height: 44px; } }

/* loading a customer or a record: still blocks in the shape of the page */
.cx-skhead { display: grid; gap: 8px; margin-bottom: 18px; }
.cx-skhead .cx-skb:first-child { width: 22%; }
.cx-skfacts { display: flex; gap: 36px; margin-bottom: 24px; }
.cx-skfacts > div { display: grid; gap: 6px; width: 150px; }
.cx-sktabs { display: flex; gap: 20px; height: 36px; align-items: center; border-bottom: 1px solid var(--hair); margin-bottom: 24px; }
.cx-sktabs .cx-skb { width: 64px; }
.cx-skgrid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px; margin-bottom: 28px; }
.cx-skplot { height: 236px; margin-top: 8px; border: 1px solid var(--hair); }
.cx-skrow { display: flex; align-items: center; height: 40px; border-bottom: 1px solid var(--hair); }
.cx-skgrid > div:last-child { padding-top: 32px; }
.cx-skvisit { display: grid; grid-template-columns: 76px 20px minmax(0, 1fr); column-gap: 12px; padding-bottom: 24px; }
.cx-skvisit > div { display: grid; gap: 8px; }
.cx-skdate { width: 60px; justify-self: end; }
.cx-skvisit .cx-skdot { justify-self: center; margin-top: 5px; width: 10px; height: 10px; }
@media (max-width: 800px) { .cx-skgrid { grid-template-columns: minmax(0, 1fr); } .cx-skfacts { flex-wrap: wrap; gap: 12px 24px; } }

.cx-texts-acts { margin-left: -8px; }
.cx-texts-acts > span { padding-left: 8px; }
@media (min-width: 721px) { .cx-risk-t .cx-acts { flex-wrap: nowrap; white-space: nowrap; } }

/* ---------- fit wave: moving a booked visit, a visit that could not be done, the toast ---------- */
/* a visit that could not be done: red where a booked one is grey, the line still dashed (it is not a finished visit) */
.cx-visit.fail .cx-node::before { background: none; border-left: 2px dashed var(--edge-strong); width: 0; }
.cx-pt.fail { background: var(--bg); box-shadow: inset 0 0 0 2.5px var(--red), 0 0 0 3px var(--bg); }
.cx-svc span.cx-fail { color: var(--red-text); font-weight: var(--w-medium); }
/* the buttons under a visit that is still to do: Put back on route, Change day or tech */
.cx-visit-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media print { .cx-visit-acts { display: none; } }
/* the Schedule drawer's Reschedule is always in sight, not after the row is picked (ops.css hides the row of moves until then) */
@media (pointer: fine) {
  .rt-v:not(.sel):not(:focus-within) .rt-act:has(.rt-resched) { display: flex; }
  .rt-v:not(.sel):not(:focus-within) .rt-act > :not(.rt-resched) { display: none; }
}
/* a toast that says what a change did can run to two lines: it grows with its words, and has a close */
.toast.cx-toast { height: auto; min-height: 36px; max-width: min(640px, calc(100vw - 2 * var(--gutter))); padding-block: 8px; align-items: flex-start; }
.toast.cx-toast > svg { margin-top: 3px; }
.toast.cx-toast > button { align-self: center; flex: none; }
.toast.cx-toast .cx-toast-x { padding: 0 4px; text-decoration: none; opacity: .8; }
/* the booking form says a visit is already booked, and offers to move it */
.cx-form .banner.info { margin-bottom: 12px; }
/* "scroll to the top of the page" stops under the sticky bar, not behind it */
.cx-head { scroll-margin-top: 64px; }
/* the customer's name on a stop page is a link back to them, and still reads as the heading */
.cx-id h1 a.cx-name { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--edge-strong); text-underline-offset: 6px; }
@media (hover: hover) { .cx-id h1 a.cx-name:hover { text-decoration-color: currentColor; } }
/* the banner on a visit that could not be done: on a phone its words get the full width and its two buttons go under them */
@media (max-width: 720px) {
  .banner.cx-skipped { flex-wrap: wrap; }
  .banner.cx-skipped > .grow { flex: 1 1 0; min-width: calc(100% - 40px); }
  .banner.cx-skipped > .cx-skipped-acts { flex: 1 1 100%; }
}

/* "Any time that day" is an answer to the question under the Time window, so it reads as a button (outlined) and is a finger's size on a phone */
.btn.any-time { margin-top: 4px; }
@media (max-width: 720px), (pointer: coarse) { .btn.any-time { height: 44px; padding: 0 16px; } }
/* a customer who asked to stop email reads as trouble (the words say it too) */
.email-status.bad-text { color: var(--red-text); }