/* THE CUSTOMERS PAGE'S SMART LIST (Chase, 3 Nov: "A · Smart list"). One list in
   three groups: a row per customer with the seven dots of Pipeline's words, who
   has the move and what it is, what she owes now and the one button. On a phone
   each row is a card: name and what she owes, the dots, the step, then the
   button with Call and Text beside it. Tokens are the app's (application.css). */
.sl-tools { display: flex; flex-direction: column; gap: 0.75rem; }
.sl-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sl-picks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sl-pick { position: relative; display: inline-flex; align-items: center; min-height: var(--spacing-tap); min-width: 0; border: 1px solid var(--color-line-strong); border-radius: var(--radius-ui); background: #fff; padding-left: 0.75rem; }
.sl-pick > span { font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.sl-pick select { appearance: none; -webkit-appearance: none; min-width: 0; min-height: calc(var(--spacing-tap) - 2px); padding: 0 2.25rem 0 0.375rem; font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); cursor: pointer; text-overflow: ellipsis; background: transparent; border: 0; }
.sl-pick select:focus { outline: none; }
.sl-pick:focus-within { border-color: var(--color-accent); }
.sl-pick svg { position: absolute; right: 0.75rem; width: 1rem; height: 1rem; color: var(--color-muted); pointer-events: none; }
.sl-pick-show { display: none; }
.sl-stages { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sl-stages .ui-chip { min-height: var(--spacing-tap); padding: 0 0.75rem; font-size: 0.875rem; }

.sl-cl { overflow: hidden; --sl-cols: minmax(0, 1fr) 7.75rem minmax(0, 1.4fr) 4.5rem 12rem; }
.sl-cl-head { display: grid; grid-template-columns: var(--sl-cols); gap: 0 1rem; padding: 0.625rem 1.25rem; border-bottom: 1px solid var(--color-line); }
.sl-cl-head span { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.sl-cl-head .sl-cl-owes { text-align: right; }
.sl-cl-list { margin: 0; padding: 0; list-style: none; }
.sl-cl-list > li + li { border-top: 1px solid var(--color-line); }
.sl-group { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.625rem 1.25rem; background: #faf9f7; }
.sl-group .ui-eyebrow { color: var(--color-ink); }
.sl-group-n { font-size: 0.8125rem; font-weight: 700; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.sl-group-why { font-size: 0.8125rem; color: var(--color-muted); }
.sl-group-why::before { content: "· "; }
.sl-group-paid { align-items: center; padding-top: 0; padding-bottom: 0; min-height: 2.75rem; }
.sl-group-paid .sl-more-link { margin-left: auto; margin-right: -0.625rem; }
.sl-more { display: flex; align-items: center; padding: 0 1.25rem; min-height: 2.75rem; }
.sl-more-link { display: inline-flex; align-items: center; gap: 0.25rem; min-height: var(--spacing-tap); padding: 0 0.625rem; margin-left: -0.625rem; border-radius: var(--radius-ui); font-size: 0.9375rem; font-weight: 600; color: var(--color-accent-strong); white-space: nowrap; }
.sl-more-link:hover { background: var(--color-accent-soft); }
.sl-more-link svg { width: 1rem; height: 1rem; }

.sl-cust { position: relative; display: grid; grid-template-columns: var(--sl-cols); align-items: center; gap: 0.5rem 1rem; padding: 0.625rem 1.25rem; min-height: 4rem; }
.sl-cust:hover { background: #faf9f7; }
.sl-who, .sl-next { min-width: 0; }
.sl-name { display: block; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
a.sl-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sl-meta { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); overflow-wrap: anywhere; }
.sl-stage { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }
.sl-word { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--color-ink); }
.sl-step { font-size: 0.875rem; line-height: 1.375rem; color: var(--color-ink); }
.sl-step b { font-weight: 600; }
.sl-last { display: flex; align-items: flex-start; gap: 0.375rem; margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.sl-last svg { flex: none; width: 0.875rem; height: 0.875rem; margin-top: 0.125rem; }
.sl-owes { text-align: right; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-owes.is-none { color: var(--color-line-strong); font-weight: 400; }
.sl-owes-word { display: none; }
.sl-nw { white-space: nowrap; }
.sl-acts { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.sl-acts.is-quiet { z-index: auto; }
.sl-act { min-height: var(--spacing-tap); padding: 0 0.875rem; gap: 0.375rem; font-size: 0.875rem; }
.sl-act svg { width: 1.125rem; height: 1.125rem; }
.sl-phone { display: none; }
.sl-chev { display: flex; flex: none; color: var(--color-muted); }
.sl-chev svg { width: 1rem; height: 1rem; }

/* the seven Pipeline words: done in ink, the one she is at in the accent, the rest open */
.sl-track { display: flex; align-items: center; }
.sl-track i { position: relative; flex: none; width: 0.6875rem; height: 0.6875rem; border-radius: 999px; border: 2px solid var(--color-line-strong); background: #fff; }
.sl-track i + i { margin-left: 0.4375rem; }
.sl-track i + i::before { content: ""; position: absolute; top: 2.5px; left: calc(-0.4375rem - 2px); width: 0.4375rem; height: 2px; background: var(--color-line-strong); }
.sl-track i.d { background: var(--color-ink); border-color: var(--color-ink); }
.sl-track i.d::before, .sl-track i.c::before { background: var(--color-ink); }
.sl-track i.c { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }

/* a narrow desktop (a laptop at 125%): the step button drops under the next step */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .sl-cl { --sl-cols: minmax(0, 1fr) 7.75rem minmax(0, 1.4fr) 4.5rem; }
  .sl-cl-head > span:last-child { display: none; }
  .sl-cust { row-gap: 0.625rem; }
  .sl-acts { grid-column: 3 / -1; justify-content: flex-start; }
  .sl-acts.is-quiet, .sl-chev { display: none; }
}

/* a phone: one card per customer; the step button, then Call and Text */
@media (max-width: 47.99rem) {
  .sl-tools-row .ui-input { flex-basis: 0; flex-grow: 1; }
  .sl-picks { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-pick-show { display: inline-flex; }
  .sl-pick select { flex: 1 1 auto; width: 100%; }
  .sl-stages { display: none; }
  .sl-cl-head { display: none; }
  .sl-group { padding: 0.625rem 1rem; }
  .sl-group-paid { padding: 0 1rem; }
  .sl-more { padding: 0 1rem; }
  .sl-cust { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name owes" "meta meta" "stage stage" "next next" "acts acts"; gap: 0.5rem 0.75rem; padding: 0.875rem 1rem 1rem; }
  .sl-who { display: contents; }
  .sl-name { grid-area: name; }
  .sl-meta { grid-area: meta; margin-top: -0.375rem; }
  .sl-owes { grid-area: owes; align-self: start; font-size: 0.875rem; }
  .sl-owes.is-none { display: none; }
  .sl-owes-word { display: inline; font-weight: 600; color: var(--color-muted); }
  .sl-stage { grid-area: stage; flex-direction: row; align-items: center; gap: 0.625rem; }
  .sl-next { grid-area: next; }
  .sl-acts, .sl-acts.is-quiet { grid-area: acts; z-index: 1; justify-content: stretch; margin-top: 0.25rem; }
  .sl-act { padding: 0 0.75rem; }
  .sl-act-step { flex: 1 1 auto; min-width: 0; }
  .sl-phone { display: inline-flex; flex: none; }
  .sl-acts.is-quiet .sl-phone { flex: 1 1 0; }
  .sl-chev { display: none; }
}