/* ============================================================================
   parity-members.css — CLUSTER 40 · Members + CRM
   Loaded on demand by js/views/_members-css.js (index.html is not editable
   from this cluster). Every value is an existing backline.css token; no new
   palette, no raw hex. --gold appears only where Platinum is the subject.
   Sections:
     1. Shared sheet / field primitives (generalised from .pch-modal)
     2. Members host — segmented faces, search, roster rows
     3. Member admin — hero money row, refusal banner, action grid, payments
     4. CRM lead thread — action rail, note timeline, flags
     5. Lead add — capture form, dedupe card, success panel
     6. Focus, motion, responsive
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 · SHEET + FIELD PRIMITIVES
   A generalisation of .pch-modal (backline.css:1666) into something the seven
   member-admin editors and the four lead micro-sheets can share. Bottom-
   anchored on a phone (thumb reach), centred on a desktop.
   -------------------------------------------------------------------------- */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 5, 10, .72);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  overscroll-behavior: contain;
}
.sheet {
  width: 100%; max-width: 460px;
  max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 22px 22px 0 0;
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 13px;
}
.sheet-eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--violet2);
}
.sheet-title {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  line-height: 1.1; color: var(--ink);
}
.sheet-copy { font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--ink2); }
.sheet-copy.mut { color: var(--mut); }
.sheet-list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding-left: 17px; }
.sheet-list li { font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--ink2); }
.sheet-btns { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.sheet-err {
  font-size: 12px; font-weight: 600; color: var(--bad);
  background: var(--badSoft); border: 1px solid var(--redStroke2);
  border-radius: 10px; padding: 9px 11px; line-height: 1.4;
}
.sheet-ok {
  font-size: 12px; font-weight: 700; color: var(--ok);
  background: var(--okSoft); border: 1px solid var(--okStroke);
  border-radius: 10px; padding: 9px 11px;
}
.sheet-opt {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 13px; padding: 11px 13px;
}
.sheet-opt.active { background: var(--violetSoft); border-color: var(--violetStroke); }
.sheet-opt .so-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sheet-opt .so-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sheet-opt .so-sub { font-size: 11px; font-weight: 500; color: var(--mut); }
.sheet-opt .so-mark { flex-shrink: 0; color: var(--violet2); opacity: 0; }
.sheet-opt.active .so-mark { opacity: 1; }

.mem-field-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mut); margin-bottom: 6px; display: block;
}
.mem-field {
  width: 100%; min-height: 48px;
  background: var(--surf2); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 14px;
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink);
  outline: none;
}
.mem-field::placeholder { color: var(--mut); }
.mem-field:focus { border-color: var(--violetStroke); }
.mem-field[type='number'] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
textarea.mem-field { min-height: 108px; resize: vertical; line-height: 1.5; }
.mem-field-hint { font-size: 11px; font-weight: 500; color: var(--mut); margin-top: 6px; line-height: 1.4; }
.mem-field-hint.warn { color: var(--warn); }
.mem-field-row { display: flex; gap: 10px; width: 100%; }
.mem-field-row > * { flex: 1 1 0; min-width: 0; }

button.btn-primary:disabled, button.btn-glass:disabled, button.btn-surf:disabled { opacity: .5; }

/* ----------------------------------------------------------------------------
   2 · MEMBERS HOST — two faces behind one toggle
   -------------------------------------------------------------------------- */
.mem-faces { width: 100%; max-width: 420px; }
.mem-search-clear {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px;
  background: var(--surf3); border: 1px solid var(--line2); color: var(--mut);
  display: flex; align-items: center; justify-content: center;
}
/* backline's shared .input sets 13.5px, which makes mobile Safari zoom the page
   on focus. Scoped to this cluster's search so the shared component keeps its
   density everywhere else. */
.mem-search input { font-size: 16px; }
@media (min-width: 700px) { .mem-search input { font-size: 13.5px; } }
.mem-search:focus-within { border-color: var(--violetStroke); }

.mem-roster-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mem-roster-list .list-row { cursor: pointer; }
.mem-count-note {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .6px; color: var(--mut); font-variant-numeric: tabular-nums;
}
.mem-panel {
  width: 100%; background: var(--surf); border: 1px solid var(--line);
  border-radius: 15px; padding: 16px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.mem-panel-title { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.mem-panel-copy { font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--mut); }

/* ----------------------------------------------------------------------------
   3 · MEMBER ADMIN
   -------------------------------------------------------------------------- */
.mem-admin-grid { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.mem-admin-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mem-sec { display: flex; flex-direction: column; gap: 9px; min-width: 0; width: 100%; }

/* Phone: one lane, in the iOS section order. The columns dissolve so the eight
   sections become direct children of the grid and can be ordered individually —
   actions belong under the membership facts, not under the booking history. */
@media (max-width: 1023px) {
  .mem-admin-col { display: contents; }
  .ms-membership { order: 1; }
  .ms-actions    { order: 2; }
  .ms-contact    { order: 3; }
  .ms-personal   { order: 4; }
  .ms-notes      { order: 5; }
  .ms-payments   { order: 6; }
  .ms-sessions   { order: 7; }
  .ms-cancel     { order: 8; margin-top: 6px; }
}

/* Three money figures share one 390px row; Fraunces at 26px overflows "$16,200".
   Tabular figures so the three columns stay aligned as values change. */
.mem-money .kpi-card { padding: 10px 11px; min-width: 0; }
.mem-money .kpi-card .kpi-val { font-size: 19px; font-variant-numeric: tabular-nums; }
.mem-money .kpi-card .kpi-key .k,
.mem-money .kpi-card .kpi-sub { font-size: 10px; }
@media (min-width: 700px) {
  .mem-money .kpi-card .kpi-val { font-size: 24px; }
  .mem-money .kpi-card .kpi-key .k, .mem-money .kpi-card .kpi-sub { font-size: 11px; }
}

.mem-hero-warn {
  font-size: 11.5px; font-weight: 600; color: var(--warn); line-height: 1.4;
}
.mem-hero-note { font-size: 11px; font-weight: 500; color: var(--mut); line-height: 1.4; }

.mem-refusal {
  width: 100%; background: var(--badSoft); border: 1px solid var(--redStroke2);
  border-radius: 13px; padding: 12px 14px;
  display: flex; align-items: flex-start; gap: 10px;
}
.mem-refusal .mr-txt { flex: 1 1 0; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--bad); line-height: 1.45; }
.mem-refusal .mr-x { flex-shrink: 0; color: var(--bad); opacity: .7; }

/* the signature element: one violet instrument family, gated tiles keyed */
.mem-action-grid { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.mem-action {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--violetSoft); border: 1px solid var(--violetStroke);
  border-radius: 12px; padding: 11px 14px; min-height: 44px;
  font-size: 12.5px; font-weight: 700; color: var(--violet2);
}
.mem-action .ma-key { color: var(--violet2); opacity: .55; }
.mem-action.busy { opacity: .6; }
.mem-action.wide { flex: 1 1 100%; justify-content: center; }
.mem-gate-note {
  font-size: 12px; font-weight: 500; color: var(--mut); line-height: 1.45;
  background: var(--surf); border: 1px solid var(--hair);
  border-radius: 12px; padding: 11px 13px; width: 100%;
}
.mem-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px;
  background: transparent; border: 1px solid var(--redStroke);
  border-radius: 13px; padding: 13px 18px;
  font-size: 13.5px; font-weight: 700; color: var(--bad);
}

.mem-link { color: var(--teal); font-size: 12px; font-weight: 600; text-align: right; }
.mem-link:hover { text-decoration: underline; }

.mem-pay-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 0;
}
.mem-pay-row .mp-date {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--mut);
  font-variant-numeric: tabular-nums; flex-shrink: 0; width: 74px;
}
.mem-pay-row .mp-kind { flex: 1 1 0; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-pay-row .mp-amt {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.mem-pay-row .mp-amt.warn { color: var(--warn); }
a.mem-pay-row:hover .mp-kind { color: var(--teal); }

.mem-notes-save { align-self: flex-start; }

/* ----------------------------------------------------------------------------
   4 · CRM LEAD THREAD
   -------------------------------------------------------------------------- */
.lead-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.lead-rail-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 62px; padding: 9px 4px;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 13px; color: var(--ink2);
}
.lead-rail-tile .lrt-label { font-size: 10px; font-weight: 700; letter-spacing: .3px; }
.lead-rail-tile.confirm { background: var(--warnSoft); border-color: var(--amberStroke); color: var(--warn); }
.lead-rail-tile.done { background: var(--okSoft); border-color: var(--okStroke); color: var(--ok); }
.lead-rail-tile:disabled { opacity: 1; }

.lead-note {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px;
}
.lead-note.failed { border-color: var(--amberStroke); }
.lead-note .ln-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lead-note .ln-text {
  font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--ink2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lead-note .ln-by { font-size: 10.5px; font-weight: 600; color: var(--mut); }
.lead-note .ln-ts {
  flex-shrink: 0; font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--dim); font-variant-numeric: tabular-nums; padding-top: 2px;
}
.lead-note .ln-retry { flex-shrink: 0; color: var(--warn); }

.lead-flag { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 0; }
.lead-flag .lf-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lead-flag .lf-txt { font-size: 12px; font-weight: 600; color: var(--ink2); line-height: 1.4; }
.lead-flag .lf-meta { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .7px; color: var(--mut); }

.lead-banner {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  background: var(--surf2); border: 1px solid var(--line2);
  border-radius: 13px; padding: 12px 13px;
}
.lead-banner .lb-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lead-banner .lb-txt { font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--ink2); }

.mem-prof-hero {
  width: 100%; background: var(--surf); border: 1px solid var(--line);
  border-radius: 16px; padding: 15px 15px 16px;
}
.lead-contact-links { display: flex; flex-wrap: wrap; gap: 8px; }

.lead-stage-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.lead-stage-dot.cold { background: var(--mut); }
.lead-stage-dot.warm { background: var(--warn); }
.lead-stage-dot.hot { background: var(--bad); }
.lead-stage-dot.closed { background: var(--ok); }
.lead-stage-dot.dead { background: var(--dim); }

/* ----------------------------------------------------------------------------
   5 · LEAD ADD
   -------------------------------------------------------------------------- */
.la-form { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 560px; }
.la-block { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.la-disclosure {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  background: var(--surf2); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 13px; min-height: 40px;
  font-size: 12.5px; font-weight: 600; color: var(--ink2);
}
.la-foot {
  display: flex; gap: 10px; width: 100%; max-width: 560px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.la-foot .la-cancel { flex: 0 0 38%; }
.la-foot .la-submit { flex: 1 1 0; }
.la-dup {
  width: 100%; background: var(--warnSoft); border: 1px solid var(--amberStroke);
  border-radius: 14px; padding: 14px 15px;
  display: flex; flex-direction: column; gap: 10px;
}
.la-dup-title { font-size: 13px; font-weight: 800; letter-spacing: .4px; color: var(--warn); }
.la-dup-name { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); }
.la-err { font-size: 12.5px; font-weight: 600; color: var(--bad); line-height: 1.45; }
.la-nudge { font-size: 12px; font-weight: 500; color: var(--warn); line-height: 1.45; }
.la-success { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 560px; }
.la-badge {
  width: 54px; height: 54px; border-radius: 18px;
  background: var(--okSoft); border: 1px solid var(--okStroke); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
.la-fade { opacity: 1; transition: opacity .18s ease; }
.la-fade.enter { opacity: 0; }

/* ----------------------------------------------------------------------------
   6 · FOCUS · MOTION · RESPONSIVE
   -------------------------------------------------------------------------- */
.mem-action:focus-visible, .mem-danger:focus-visible, .lead-rail-tile:focus-visible,
.sheet-opt:focus-visible, .mem-field:focus-visible, .la-disclosure:focus-visible,
.mem-search-clear:focus-visible, .mem-roster-list .list-row:focus-visible,
.mem-link:focus-visible, .mem-pay-row:focus-visible, .segmented .seg:focus-visible,
.la-form .chip:focus-visible, .la-foot button:focus-visible, .la-dup button:focus-visible,
.la-success button:focus-visible, .list-row:focus-visible,
.chip-row .chip:focus-visible, .sheet .chip:focus-visible, .mem-sec button:focus-visible,
.lead-banner button:focus-visible, .lead-note .ln-retry:focus-visible,
.mem-stale .ms-retry:focus-visible, .sh-link:focus-visible {
  outline: 2px solid var(--violet2); outline-offset: 2px; border-radius: 12px;
}
/* backline's .chip has no focus ring of its own, and a filter row or a form
   built out of chips is unusable from a keyboard without one. The cluster adds
   it rather than changing the shared component out from under other views. */
.la-form .chip:focus-visible,
.chip-row .chip:focus-visible,
.sheet .chip:focus-visible { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .la-fade { transition: none; }
}

/* Desktop lane: facts on the left, the act lane on the right. */
@media (min-width: 1024px) {
  .mem-admin-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; }
  .mem-admin-col.act { position: sticky; top: 8px; }
  .sheet-scrim { align-items: center; padding: 24px; }
  .sheet { border-radius: 22px; max-height: 82vh; }
  .lead-rail { grid-template-columns: repeat(5, 1fr); }
  .mem-roster-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .la-form, .la-foot, .la-success { max-width: 620px; }
}

@media (max-width: 1023px) {
  .mem-admin-col.act { position: static; }
  /* the sticky lead rail must clear the mobile tab bar */
  .lead-rail { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Touch targets. backline's .chip is ~33px tall, which is fine for a filter row
   you scan and generous enough for a mouse, but the lead form is chips a person
   TAPS at a front desk with one hand. Scoped to this cluster so the shared chip
   keeps its density everywhere else. */
@media (max-width: 820px) {
  .la-form .chip { min-height: 44px; }
  .la-success .btn-surf { min-height: 44px; padding-left: 15px; padding-right: 15px; }
  .la-dup .btn-primary.sm, .la-dup .btn-glass { min-height: 44px; }
}

/* a refresh that failed on top of good rows — the rows stay, the strip explains */
.mem-stale {
  width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--warnSoft); border: 1px solid var(--amberStroke);
  border-radius: 12px; padding: 10px 12px;
}
.mem-stale .ms-txt {
  flex: 1 1 200px; min-width: 0;
  font-size: 12px; font-weight: 600; color: var(--warn); line-height: 1.45;
}
.mem-stale .ms-retry {
  flex-shrink: 0; min-height: 32px; padding: 0 12px;
  background: transparent; border: 1px solid var(--amberStroke); border-radius: 9px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--warn);
  cursor: pointer;
}
.mem-stale .ms-retry:hover { background: var(--warnSoft); }
@media (max-width: 480px) { .mem-stale .ms-retry { min-height: 44px; flex: 1 1 100%; } }