/* profile screen — identity, home management, miles link, sign out.
   Colour comes from tokens only; the member tint arrives as --uc (data). */

.pf-scroll { padding: 0 var(--s-4) calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-4)); }

/* base.css .section-label uses --text-3 (11px semibold): ~2.7:1 light /
   ~3.4:1 dark — under AA 4.5:1 for text this small. Scoped bump to --text-2
   until the shared component is fixed (change request filed). */
.pf .section-label { color: var(--text-2); }

.pf-back { color: var(--text-2); margin-left: calc(-1 * var(--s-2)); }
.pf-back svg { width: 22px; height: 22px; }
.pf-back:active { color: var(--text); transform: scale(0.92); }

/* ---- identity ---- */
.pf-id {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s-6) var(--s-4) var(--s-4);
  animation: pf-rise var(--t-slow) var(--ease-out) both;
}
.pf-id-avatar {
  width: 76px; height: 76px; font-size: 38px;
  background: color-mix(in srgb, var(--uc) 18%, var(--bg-elev-1));
  border-color: color-mix(in srgb, var(--uc) 45%, transparent);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--uc) 22%, transparent);
}
.pf-id-name {
  margin-top: var(--s-3);
  font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.02em;
}
/* the member's own mark, in the login family's voice */
.pf-id-brand {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  letter-spacing: -0.04em; line-height: 1.2;
  color: var(--text-2);
}
.pf-dot { color: var(--accent); }

.pf-phone-row {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4); padding-top: var(--s-4);
  width: 100%; justify-content: center;
  border-top: 1px solid var(--line);
  color: var(--text-2); font-size: var(--fs-sm);
}
.pf-phone-ic { display: flex; color: var(--text-3); }
.pf-phone-ic svg { width: 16px; height: 16px; }
.pf-phone-num {
  font-weight: var(--fw-semi); color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.pf-phone-sub { color: var(--text-2); }

@keyframes pf-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---- home card ---- */
.pf-home { animation: pf-rise var(--t-slow) var(--ease-out) 60ms both; }
.pf-home-ic {
  width: 38px; height: 38px; border-radius: var(--r-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-dim); color: var(--accent-strong);
}
.pf-home-ic svg { width: 19px; height: 19px; }
.pf-home-name { font-weight: var(--fw-semi); font-size: var(--fs-md); }
.pf-home-label {
  color: var(--text-2); font-size: var(--fs-sm); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* search mode */
.pf-search-field { background: var(--bg-elev-2); }
.pf-search-field > svg { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
.pf-search-field input { font-size: var(--fs-md); }
.pf-q-clear {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-right: calc(-1 * var(--s-2));
  color: var(--text-3); flex-shrink: 0;
}
.pf-q-clear svg { width: 16px; height: 16px; }
.pf-q-clear.gone { display: none; }

.pf-results { min-height: 88px; padding-top: var(--s-2); }
.pf-hint {
  padding: var(--s-6) var(--s-4); text-align: center;
  color: var(--text-2); font-size: var(--fs-sm);
}
.pf-result {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left;
  padding: var(--s-2) var(--s-1); min-height: 52px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.pf-result:active { background: var(--bg-elev-2); }
.pf-result-ic {
  width: 32px; height: 32px; border-radius: var(--r-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev-2); color: var(--text-2);
}
.pf-result-ic svg { width: 16px; height: 16px; }
.pf-result-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-r1 {
  font-size: var(--fs-md); font-weight: var(--fw-med);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* address line is content the user must read to pick a result — text-2, not a hint tone */
.pf-r2 {
  font-size: var(--fs-sm); color: var(--text-2); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-empty { padding: var(--s-6) var(--s-4); }
.pf-cancel { margin-top: var(--s-2); }

/* confirm mode */
.pf-map {
  height: 190px; border-radius: var(--r-sm);
  overflow: hidden; position: relative;
  border: 1px solid var(--line);
  background: var(--bg-elev-2);
}
.pf-picked-row { padding: var(--s-3) 0; }
.pf-confirm-actions { display: flex; gap: var(--s-2); }
.pf-confirm-actions .grow { flex: 1; }
.pf-confirm-actions .btn-dark { min-width: 56px; padding: 0; }
.pf-confirm-actions .btn-dark svg { width: 20px; height: 20px; }

/* ---- miles mini-row ---- */
.pf-miles {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left;
  animation: pf-rise var(--t-slow) var(--ease-out) 100ms both;
  transition: background var(--t-fast) var(--ease);
}
.pf-miles:active { background: var(--bg-elev-2); }
.pf-miles-ic {
  width: 38px; height: 38px; border-radius: var(--r-full); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-dim); color: var(--accent-strong);
}
.pf-miles-ic svg { width: 19px; height: 19px; }
.pf-miles-txt { display: flex; flex-direction: column; min-width: 0; }
.pf-miles-title { font-weight: var(--fw-semi); font-size: var(--fs-md); }
.pf-miles-sub { color: var(--text-2); font-size: var(--fs-sm); margin-top: 1px; }
.pf-miles-bal {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.pf-miles-bal.neg { color: var(--bad); }
/* unit of a financial figure, not decoration — text-2 clears 4.5:1 both themes */
.pf-mi { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--text-2); margin-left: 2px; }
.pf-miles-chev { display: flex; color: var(--text-3); flex-shrink: 0; }
.pf-miles-chev svg { width: 18px; height: 18px; }

/* ---- sign out ---- */
.pf-signout {
  margin-top: var(--s-6);
  animation: pf-rise var(--t-slow) var(--ease-out) 140ms both;
}
.pf-signout svg { width: 20px; height: 20px; }
/* Light --bad (#D93F3F) on --bad-dim is ~3.9:1 at this size; deepen the text
   toward --text (token mix, no hardcoded colour) to clear 4.5:1. Dark --bad
   already passes and stays untouched. Remove if tokens.css deepens light --bad. */
@media (prefers-color-scheme: light) {
  .pf-signout { color: color-mix(in srgb, var(--bad) 70%, var(--text)); }
  /* light --bad #D93F3F on the white card is 4.42:1 at 17px bold — just under
     AA 4.5:1 (bold only counts as "large" from 18.66px). Same deepening. */
  .pf-miles-bal.neg { color: color-mix(in srgb, var(--bad) 70%, var(--text)); }
  /* light --accent-strong glyph on the --accent-dim tint is ~2.6:1 — under the
     3:1 non-text minimum. Deepen toward --text; dark passes and is untouched. */
  .pf-home-ic, .pf-miles-ic { color: color-mix(in srgb, var(--accent-strong) 80%, var(--text)); }
}

/* ---- small widths ---- */
@media (max-width: 340px) {
  .pf-scroll { padding-left: var(--s-3); padding-right: var(--s-3); }
  .pf-phone-sub { display: none; }
}