/* The calm redesign (Oct 16, 2026): Customers and a customer's page (customers/customers.js). Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules (Motion; Calm and focus). Colours only from the tokens in styles.css. */

/* ---------- The list: the hero (suggested stages, or the search), the stage chips, the rows ---------- */
.cu-list { gap: 14px; }
.cu-hero-review { margin-bottom: 2px; }
.cu-hero-review .hero-v { font-size: 2.75rem; }
.cu-find { display: flex; align-items: center; gap: 10px; }
.cu-find .field.search { flex: 1; min-width: 0; margin: 0; }
.cu-find .cu-suggest { flex: none; }
/* No stages waiting: the search box is the hero, bigger and with its own edge. */
.cu-find.is-hero .cu-search input { height: 56px; min-height: 56px; padding-left: 46px !important; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 1.0625rem; }
.cu-find.is-hero .cu-search .ic { top: 18px; left: 18px; width: 20px; height: 20px; }
.cu-find.is-hero .cu-suggest { width: 56px; height: 56px; }
.cu-find .cu-suggest[aria-busy="true"] { opacity: .5; }
.cu-chips { gap: 6px; }
.cu-count { margin: 0; }
.cu-rows { gap: 0; }
.cu-row { gap: 14px; padding: 10px 8px; border-radius: var(--r-box); }
.cu-row-t { font-size: 1rem; }
.cu-row-s { font-size: .8125rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cu-hidden { margin-top: 8px; }
.cu-hidden .srow { align-items: center; }
.cu-hidden .srow .ib { flex: none; }

/* ---------- A customer's page ---------- */
.cu-top { align-items: center; gap: 8px 12px; min-height: 44px; }
.cu-back { display: inline-flex; align-items: center; gap: 6px; align-self: auto; }
.cu-back .ic { width: 18px; height: 18px; }
.cu-page { gap: 16px; }
.cu-head.hero { position: relative; gap: 4px; padding: 20px 22px 20px; }
.cu-head .hero-v { font-size: 2.5rem; line-height: 1.04; }
.cu-head .cu-name { text-transform: none; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; letter-spacing: 0; overflow-wrap: anywhere; }
.cu-head .hero-l { font-size: 1.0625rem; font-weight: 600; }
.cu-head .hero-a { margin-top: 10px; }
body.big-text .cu-head .hero-v { font-size: 2.5rem; }
/* The X beside the list on a computer: in the card's corner, quiet. */
.cu-head .cu-close { position: absolute; top: 10px; right: 10px; display: inline-grid; width: 40px; height: 40px; border: 0; background: none; color: var(--on-hero-2); }
.cu-head .cu-close:hover { background: var(--rt-shine); color: var(--on-hero); }
.cu-head .cu-close .ic { width: 20px; height: 20px; }
.cu-head:has(.cu-close) .hero-k { padding-right: 44px; }

.cu-box { gap: 10px; padding: 14px 16px; border-radius: var(--r-box); }
.cu-pair { padding-top: 10px; }

.cu-tiles { gap: 12px; }
.cu-tile { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-box); }
.cu-tile-l { font-size: .875rem; }
.cu-tile-v { font-size: 2rem; }

.cu-sec { gap: 8px; }
.cu-h { font-size: 1.125rem; }
.cu-tl-list.plain { gap: 2px; overflow: visible; border: 0; border-radius: 0; background: none; }
.cu-tl { padding-bottom: 10px; }
.cu-tl-t { font-size: .9375rem; }
.cu-tl-s { font-size: .8125rem; }
.cu-tl-more { font-size: .9375rem; }

.cu-notes-t { min-height: 84px; border: 1px solid var(--border); font-size: .9375rem; }

/* The quiet folds: Follow-ups, Invoices, Details. */
.cu-more-fold { border-top: 1px solid var(--border); }
.cu-more-fold > .more-s { padding: 0 2px; }
.cu-more-fold .more-b { padding: 4px 2px 14px; gap: 10px; }
.cu-more-fold .cu-more { font-size: .9375rem; color: var(--text); }
.cu-more-fold .cu-more .ic { width: 16px; height: 16px; color: var(--text-3); }
.cu-more-fold .cu-more a { color: var(--link); }

/* Brandon's buttons, as icons in one row. After the first tap, Not a customer is words for one more tap. */
.cu-actions { gap: 10px; padding-top: 4px; }
.cu-hide { display: contents; }
.cu-hide-s { flex: 1 1 100%; margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--text-3); }
.cu-hide .btn.cu-rose { min-height: 44px; height: auto; padding: 8px 14px; border: 1px solid var(--rt-bad); border-radius: var(--r-pill); background: none; color: var(--rt-bad); white-space: normal; text-align: left; }

@media (min-width: 900px) {
  .cu-hero-review .hero-v { font-size: 3rem; }
  .cu-head .hero-v { font-size: 2.75rem; }
}

.cu-head .hero-l { color: var(--on-hero); }
.cu-tl-list.plain > li, .cu-tl-list.plain > li + li { border: 0; }
.cu-tl-list.plain > li { min-height: 0; padding: 0 0 10px; }
.cu-tl-msg.us .cu-ic { background: var(--pick); color: var(--on-pick); }

/* The suggested-stages card: the number on the left, Review on the right, so it stays short beside the customer. */
.cu-hero-review { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 18px 20px; }
.cu-hero-review .hero-k { grid-column: 1 / -1; }
.cu-hero-review .hero-v { grid-column: 1; grid-row: 2; }
.cu-hero-review .hero-l { grid-column: 1 / -1; grid-row: 3; }
.cu-hero-review .hero-a { grid-column: 2; grid-row: 2; margin: 0; }
.cu-more-fold ul.plain { overflow: visible; border: 0; border-radius: 0; background: none; }
.cu-more-fold ul.plain > li + li { border: 0; }
.cu-more-fold ul.plain .srow { padding-inline: 0; }

[data-screen="customers"] .skel, [data-screen="customer"] .skel { padding-block: 0 24px; }