/* /hire · the Pay step's fallback cards (PB-3, "One booking flow", 2026-10-30). The house's inked card: a thick ink line
   and a hard shadow, the case on top in violet, the choices as the answer deck's rows (hire.css .hr-row; the lead is a
   stronger outline, never picked). Phone first: 390 px wide, nothing overflows, every tap ≥ 44 px. */
.hr-fb { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; margin: 0 auto; padding: 16px;
  border-radius: 18px; background: var(--bg); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.hr-fb__job { display: flex; align-items: center; gap: 12px; padding: 0 0 12px; margin: 0 0 2px; border-bottom: 1px solid var(--line); min-width: 0; }
.hr-fb__pic { flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--tint) center / cover no-repeat; border: 1px solid var(--line); }
.hr-fb__jx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hr-fb__jx b { font: 700 15.5px/1.25 var(--display); overflow-wrap: anywhere; }
.hr-fb__jx span { color: var(--sub); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.hr-fb__jp { flex: none; font: 800 16px/1 var(--display); font-variant-numeric: tabular-nums; }
.hr-fb__tag { margin: 0; font: 800 11.5px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--hm-ink); }
.hr-fb__h { margin: 0; font: 800 21px/1.18 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.hr-fb__was { margin: 0; display: flex; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.hr-fb__was s { color: var(--sub); font-size: 15px; }
.hr-fb__was b { font: 800 24px/1 var(--display); }
.hr-fb__why { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--hm-soft); font-size: 14.5px; line-height: 1.4; font-weight: 600; }
.hr-fb__rows { display: flex; flex-direction: column; gap: 8px; }
.hr-fb .hr-row { cursor: pointer; font: inherit; }
.hr-fb .hr-row[aria-busy="true"] { cursor: progress; }
.hr-fb .hr-row[aria-busy="true"] b::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px;
  border-radius: 50%; border: 2px solid var(--hm); border-right-color: transparent; animation: hr-fb-spin .8s linear infinite; }
@keyframes hr-fb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hr-fb .hr-row[aria-busy="true"] b::after { animation: none; } }
.hr-fb__talk { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.hr-fb__talk a { min-height: 44px; display: inline-flex; align-items: center; color: var(--hm-ink); font-weight: 700; font-size: 15px; text-underline-offset: 3px; }
.hr-fb__problem { margin: 0; color: var(--stop); font-size: 13.5px; font-weight: 650; }