/* people — customers, authorizations, brokers, payouts, collections.
   Two shared primitives the kit did not have (a text input dressed as a filter
   chip, and a visually hidden label), plus the few rules these screens need on
   top of components.css. Everything else comes from the kit. */

/* THEME-9 · the 11px type floor. A bare <small> is the browser's 0.83em, which
   is 10.8px inside a 13px value — measured on /app/customers/:id, where the
   contact's title and the intake note are the two places one is used. Every
   other <small> in the product is sized explicitly and keeps its own rule. */
.v small{font-size:11px}

/* A search or date input that sits in a .filters row beside .chip-select.
   Same metrics, same focus ring; 16px on a phone so iOS does not zoom the page
   when the field takes focus. */
.chip-input{
  appearance:none; -webkit-appearance:none; font:400 11.5px/1 var(--ui); color:var(--ink);
  border:1px solid var(--hair); background:var(--surface);
  border-radius:20px; padding:6px 12px; min-height:32px; min-width:14ch;
}
.chip-input::placeholder{color:var(--ink-3)}
.chip-input:focus-visible{outline:none; border-color:var(--ring, var(--navy)); box-shadow:0 0 0 3px var(--ring-tint, var(--navy-tint))}
.filters .facet{gap:6px; align-items:center; flex-wrap:wrap}

/* A label that only a screen reader reads. Never display:none — that removes it
   from the accessibility tree along with everything else. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* A record page's stat strip carries five or six tiles beside the identity
   card, which is narrow enough that `$26,000.00` broke across two lines at
   1440 (measured). Slightly smaller values, and tracks that wrap into a second
   row rather than splitting a number. */
.kpis.people-kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.kpis.people-kpis .kpi-v{font-size:22px; overflow-wrap:normal}
.kpis.people-kpis .kpi-v small{font-size:13px}

/* The identity column of a record page: the facts grid keeps two columns until
   the column itself is narrow, then stacks rather than wrapping a value under
   its own label. */
.g-focus > .stack-list .facts .fact .v a{overflow-wrap:anywhere}
/* A long DBA may break anywhere. A contact detail may not: `anywhere` cut
   ridgewaydentalgroup@example.com into three client rects on /app/submissions/:id,
   splitting the TLD, each fragment carrying its own underline. `break-word`
   breaks between words and at the @ and the dots, never inside a run of
   letters. Same selector plus the attribute, so specificity — not load order —
   decides it. */
.g-focus > .stack-list .facts .fact .v a[href^="mailto:"],
.g-focus > .stack-list .facts .fact .v a[href^="tel:"]{
  overflow-wrap:break-word; word-break:normal; hyphens:none;
}
.g-focus > .stack-list .facts .fact .v small{color:var(--ink-3); font-weight:400}

/* The queue's "next step" and reason cells carry two lines; keep the sub line
   from inheriting the row link colour. */
table.t td .sub,
table.t th .sub{display:block; font-size:11px; color:var(--ink-3); margin-top:2px}

/* A record page's tab strip scrolls rather than wrapping into two rows.
   The mask is the affordance: on /app/deal/:id at 390 the strip is 492px in a
   360px port and "Syndication" ends 6px from the edge, so the row looked
   complete while Documents and Audit sat off-screen with nothing to suggest a
   swipe. The mask fades whichever end still has content, the same hint
   .t-wrap.more gives a scrolling table. */
.card > .tab-bar{
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  --tb-fade:transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%;
  -webkit-mask-image:linear-gradient(to right, var(--tb-fade));
  mask-image:linear-gradient(to right, var(--tb-fade));
}
.card > .tab-bar::-webkit-scrollbar{display:none}

@media (max-width: 920px){
  /* 44pt targets and 16px text on the controls these screens add. */
  .chip-input{min-height:44px; font-size:16px; border-radius:12px; padding:8px 12px}
  .filters .facet{width:100%}
  .filters .facet .chip-input{flex:1 1 auto; min-width:0}
}

@media (max-width: 600px){
  /* The record pages put the identity card above the tabs rather than beside. */
  .grid.g-focus{grid-template-columns:minmax(0,1fr)}

  /* The kit's phone card layout is `grid-template-columns:1fr auto`, and both
     tracks size to their content — so a long merchant name beside a labelled
     money cell pushes the row past the viewport (measured: 408px inside a 390px
     screen on /app/collections). Letting the first column shrink and the name
     wrap keeps the card inside the screen. Scoped to this track's own lists so
     no other screen changes shape underneath its owner. */
  #collections-queue table.t.cards tbody tr,
  #customers-list table.t.cards tbody tr,
  #payouts-ledger table.t.cards tbody tr{grid-template-columns:minmax(0,1fr) auto}
  #collections-queue table.t.cards th.who,
  #customers-list table.t.cards th.who,
  #payouts-ledger table.t.cards th.who{overflow-wrap:anywhere}
}