/* compass-profile.css — Applicant Profile onboarding, Profile & contact settings, and the
   transactional-SMS permission states.

   Lifted from the approved handoff (design_handoff_applicant_experience/source/profile.css) with
   two deliberate omissions and one mobile dialog overflow correction:

     1. The design-time annotation ribbon and its two child rules are GONE. They were the only
        hardcoded hex values in the sheet, and canon says the ribbon "never ships". The class name
        itself is deliberately not written here either, so a grep guard over the whole Compass
        source tree can assert it appears nowhere.
     2. The `.visually-hidden` note is rewritten: in production that utility already comes from
        Bootstrap, which loads first in the Compass chain, so it is neither defined here nor
        duplicated in compass.css.
     3. Dialog action buttons may wrap at phone widths because the shared `.cmp-btn` atom
        forbids wrapping and the active-number removal label otherwise overflows.

   Namespace: .pf-*. Everything resolves through the existing --cmp-* tenant tokens, so Compass's
   ONE tenant-branded theme drives it — there is no light/dark treatment and no second palette, and
   this file contains no `prefers-color-scheme` or `data-theme` rule. The single media query is the
   `prefers-reduced-motion` skeleton guard, which is a legitimate a11y rule and stays.

   Load order matters: this sheet consumes --cmp-* tokens and the .cmp-field / .cmp-btn atoms, so it
   must come after compass-tokens.css and compass-rendering.css. See wwwroot/index.html. */

/* ====================================================================
   Onboarding shell — a centered single-column task, not a form shell.
   No section rail (there are no sections), no Message-from-Campus panel
   (there is no application yet). Wider than the sign-in card because it
   hosts real fields.
   ==================================================================== */
.pf-stage { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 40px 24px 56px; background: var(--cmp-bg-app); }
.pf-wrap { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 16px; }
.pf-wrap--wide { max-width: 760px; }

/* Destination memory — the applicant's intended landing spot, held across the
   gate so profile completion never loses their place. */
.pf-dest { display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: var(--cmp-bg-panel); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md); font-size: 12.5px; color: var(--cmp-text-muted); }
.pf-dest svg { flex-shrink: 0; color: var(--cmp-primary); }
.pf-dest strong { color: var(--cmp-text); font-weight: 600; }

/* Step rail — two required steps, an optional third. */
.pf-steps { display: flex; align-items: center; gap: 0; margin-bottom: 4px; }
.pf-step { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--cmp-text-subtle); white-space: nowrap; }
.pf-step__num { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 1.5px solid var(--cmp-border-strong); color: var(--cmp-text-subtle); background: var(--cmp-bg-panel); }
.pf-step--active { color: var(--cmp-text); }
.pf-step--active .pf-step__num { border-color: var(--cmp-primary); color: var(--cmp-primary); background: var(--cmp-primary-soft); }
.pf-step--done .pf-step__num { border-color: var(--cmp-check-bg); background: var(--cmp-check-bg); color: var(--cmp-check-fg); }
.pf-step--done { color: var(--cmp-text-muted); }
.pf-step__opt { font-weight: 400; color: var(--cmp-text-subtle); }
.pf-steps__rule { flex: 1; height: 1px; background: var(--cmp-border); margin: 0 12px; min-width: 16px; }

.pf-card { background: var(--cmp-bg-panel); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-lg); padding: 30px 32px 28px; box-shadow: 0 20px 46px -30px rgba(20, 24, 34, 0.22), 0 2px 6px rgba(20, 24, 34, 0.04); }
.pf-card--tight { padding: 22px 24px; }
.pf-eyebrow { font-family: var(--cmp-font-body); font-size: 11px; font-weight: 700; letter-spacing: var(--cmp-eyebrow-tracking, 0.14em); text-transform: uppercase; color: var(--cmp-eyebrow-color, var(--cmp-primary)); display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pf-eyebrow::before { content: ''; width: 20px; height: 2px; background: currentColor; opacity: 0.55; }
.pf-title { font-family: var(--cmp-font-headline); font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.012em; color: var(--cmp-text); margin: 0 0 8px; }
.pf-title--sm { font-size: 21px; }
.pf-lede { font-size: 14px; line-height: 1.55; color: var(--cmp-text-muted); margin: 0; max-width: 56ch; }

/* Fieldsets inside the card */
.pf-fs { border: none; padding: 0; margin: 24px 0 0; }
.pf-fs__legend { padding: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cmp-text-subtle); margin-bottom: 4px; }
.pf-fs__hint { font-size: 12.5px; line-height: 1.5; color: var(--cmp-text-muted); margin: 0 0 14px; max-width: 60ch; }
.pf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px 14px; }
.pf-c3 { grid-column: span 3; } .pf-c4 { grid-column: span 4; } .pf-c5 { grid-column: span 5; }
.pf-c6 { grid-column: span 6; } .pf-c7 { grid-column: span 7; } .pf-c8 { grid-column: span 8; } .pf-c12 { grid-column: span 12; }

/* Required / optional marks — text, never color alone. */
.pf-req { color: var(--cmp-danger); font-weight: 700; font-size: 11px; letter-spacing: 0.03em; margin-left: 6px; text-transform: uppercase; }
.pf-opt { color: var(--cmp-text-subtle); font-weight: 400; font-size: 12px; margin-left: 5px; }

/* Checkbox / radio rows */
.pf-check { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md); background: var(--cmp-bg-soft); cursor: pointer; }
.pf-check--plain { background: none; border: none; padding: 2px 0; }
.pf-check input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin: 1px 0 0; accent-color: var(--cmp-primary); cursor: pointer; }
.pf-check__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-check__label { font-size: 13.5px; font-weight: 600; color: var(--cmp-text); line-height: 1.4; }
.pf-check__hint { font-size: 12.5px; line-height: 1.5; color: var(--cmp-text-muted); }
.pf-check:focus-within { border-color: var(--cmp-primary); box-shadow: 0 0 0 3px var(--cmp-primary-soft); }

/* Verified sign-in email — an authentication fact, presented as one. */
.pf-authfact { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1px solid var(--cmp-border); border-left: 3px solid var(--cmp-check-bg); border-radius: var(--cmp-radius-md); background: var(--cmp-bg-soft); }
.pf-authfact__mark { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; background: var(--cmp-check-bg); color: var(--cmp-check-fg); display: flex; align-items: center; justify-content: center; }
.pf-authfact__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf-authfact__addr { font-size: 14.5px; font-weight: 600; color: var(--cmp-text); overflow-wrap: anywhere; }
.pf-authfact__meta { font-size: 12px; color: var(--cmp-text-muted); line-height: 1.45; }

/* Prefilled-but-editable input, with a "this came from your sign-in" affordance */
.pf-prefill { position: relative; }
.pf-prefill__tag { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--cmp-radius-pill); background: var(--cmp-check-bg); color: var(--cmp-check-fg); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }
.pf-prefill input { padding-right: 104px; }

/* Text button used for progressive disclosure inside a card */
.pf-textbtn { background: none; border: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--cmp-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }
.pf-textbtn:hover { color: var(--cmp-primary-hover); }
.pf-textbtn--quiet { color: var(--cmp-text-muted); }

/* Phone control — country + national number. Internationally capable now so
   the profile doesn't need a redesign when more countries are supported. */
.pf-phone { display: grid; grid-template-columns: 132px 1fr; gap: 10px; }
.pf-phone select { width: 100%; }

/* Status pills — SMS + contact-email status. Shape + word, never color alone. */
.pf-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--cmp-radius-pill); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; }
.pf-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pf-pill--off { background: var(--cmp-bg-soft); border-color: var(--cmp-border-strong); color: var(--cmp-text-muted); }
.pf-pill--pending { background: color-mix(in oklab, var(--cmp-warning) 12%, transparent); border-color: color-mix(in oklab, var(--cmp-warning) 40%, transparent); color: var(--cmp-warning); }
.pf-pill--active { background: color-mix(in oklab, var(--cmp-success) 12%, transparent); border-color: color-mix(in oklab, var(--cmp-success) 40%, transparent); color: var(--cmp-success); }
.pf-pill--withdrawn { background: var(--cmp-bg-soft); border-color: var(--cmp-border-strong); color: var(--cmp-text-muted); }
.pf-pill--unavailable { background: var(--cmp-bg-soft); border-color: var(--cmp-border-strong); color: var(--cmp-text-subtle); }
.pf-pill--danger { background: color-mix(in oklab, var(--cmp-danger) 10%, transparent); border-color: color-mix(in oklab, var(--cmp-danger) 38%, transparent); color: var(--cmp-danger); }

/* SMS permission block — visually a separate, opt-in subsection so consent
   never reads as a consequence of typing a phone number. */
.pf-sms { margin-top: 18px; border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md); background: var(--cmp-bg-panel); overflow: hidden; }
.pf-sms__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 16px; background: var(--cmp-bg-soft); border-bottom: 1px solid var(--cmp-border); }
.pf-sms__title { font-size: 13px; font-weight: 700; color: var(--cmp-text); letter-spacing: 0.01em; }
.pf-sms__spacer { flex: 1; }
.pf-sms__body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.pf-sms__disclosure { font-size: 13px; line-height: 1.55; color: var(--cmp-text); }
.pf-sms__fineprint { font-size: 12px; line-height: 1.5; color: var(--cmp-text-muted); }
.pf-sms__gate { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: var(--cmp-radius-sm); background: var(--cmp-primary-soft); font-size: 12.5px; line-height: 1.5; color: var(--cmp-text-muted); }
.pf-sms__gate svg { flex-shrink: 0; margin-top: 2px; color: var(--cmp-primary); }
.pf-sms__gate strong { color: var(--cmp-text); font-weight: 600; }

/* One-time code entry. A single input (not six boxes) so screen readers and
   password managers get one labelled field and autocomplete="one-time-code"
   works; visual grouping comes from tracking, not from split inputs. */
.pf-code { display: flex; flex-direction: column; gap: 8px; }
.pf-code__input { width: 100%; height: 56px; padding: 0 16px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 26px; font-weight: 600; letter-spacing: 0.42em; text-align: center; color: var(--cmp-text); background: var(--cmp-bg-panel); border: 1px solid var(--cmp-border-strong); border-radius: var(--cmp-radius-md); }
.pf-code__input:focus { outline: none; border-color: var(--cmp-primary); box-shadow: 0 0 0 3px var(--cmp-primary-soft); }
.pf-code__input--error { border-color: var(--cmp-danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cmp-danger) 14%, transparent); }
.pf-code__dest { font-size: 13px; color: var(--cmp-text-muted); line-height: 1.5; }
.pf-code__dest strong { color: var(--cmp-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-code__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--cmp-text-muted); }

/* Alerts — one component, four tones. Icon + heading + body; tone never
   carried by color alone. */
.pf-alert { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md); background: var(--cmp-bg-soft); }
.pf-alert__icon { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--cmp-border); color: var(--cmp-text); }
.pf-alert__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pf-alert__title { font-size: 13.5px; font-weight: 700; color: var(--cmp-text); }
.pf-alert__text { font-size: 12.5px; line-height: 1.55; color: var(--cmp-text-muted); overflow-wrap: anywhere; }
.pf-alert__text strong { color: var(--cmp-text); font-weight: 600; }
.pf-alert__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pf-alert--danger { border-color: color-mix(in oklab, var(--cmp-danger) 34%, transparent); background: color-mix(in oklab, var(--cmp-danger) 6%, transparent); }
.pf-alert--danger .pf-alert__icon { background: var(--cmp-danger); color: #fff; }
.pf-alert--warning { border-color: color-mix(in oklab, var(--cmp-warning) 38%, transparent); background: color-mix(in oklab, var(--cmp-warning) 8%, transparent); }
.pf-alert--warning .pf-alert__icon { background: var(--cmp-warning); color: #fff; }
.pf-alert--success { border-color: color-mix(in oklab, var(--cmp-success) 34%, transparent); background: color-mix(in oklab, var(--cmp-success) 7%, transparent); }
.pf-alert--success .pf-alert__icon { background: var(--cmp-success); color: #fff; }
.pf-alert--info { border-color: color-mix(in oklab, var(--cmp-primary) 26%, transparent); background: var(--cmp-primary-soft); }
.pf-alert--info .pf-alert__icon { background: var(--cmp-primary); color: var(--cmp-primary-fg); }

/* Card footer actions */
.pf-actions { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--cmp-border); flex-wrap: wrap; }
.pf-actions__spacer { flex: 1; }
.pf-actions__note { font-size: 12px; color: var(--cmp-text-subtle); line-height: 1.45; flex-basis: 100%; }

/* ====================================================================
   Profile & contact settings
   ==================================================================== */
.pf-settings { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 32px 24px 60px; background: var(--cmp-bg-app); }
.pf-settings__wrap { width: 100%; max-width: 840px; }
.pf-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--cmp-text-muted); text-decoration: none; margin-bottom: 16px; }
.pf-crumb:hover { color: var(--cmp-text); }
.pf-panel { background: var(--cmp-bg-panel); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-lg); margin-bottom: 16px; overflow: hidden; }
.pf-panel__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--cmp-border); }
.pf-panel__head-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-panel__title { font-family: var(--cmp-font-headline); font-size: 18px; font-weight: 600; color: var(--cmp-text); margin: 0; }
.pf-panel__sub { font-size: 12.5px; line-height: 1.5; color: var(--cmp-text-muted); margin: 0; max-width: 62ch; }
.pf-panel__body { padding: 6px 22px 18px; }
.pf-row { display: grid; grid-template-columns: 190px 1fr auto; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--cmp-border); }
.pf-row:last-child { border-bottom: none; }
.pf-row__label { font-size: 12.5px; font-weight: 600; color: var(--cmp-text-subtle); line-height: 1.4; }
.pf-row__value { font-size: 14.5px; color: var(--cmp-text); line-height: 1.5; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.pf-row__value--empty { color: var(--cmp-text-subtle); font-style: italic; }
.pf-row__meta { font-size: 12px; color: var(--cmp-text-muted); line-height: 1.45; font-style: normal; }
.pf-row__action { display: flex; gap: 8px; align-items: center; }
/* The delivery fact is a row with no divider and no vertical padding. It is a
   CLASS, not an inline style, so the mobile single-column rule can still win —
   an inline grid-template kept the 190px label column on a phone and squeezed
   the address to one character per line. */
.pf-row--fact { padding: 0; border-bottom: none; }
/* Same reason: a two-column row that must collapse on a phone. */
.pf-row--wide { grid-template-columns: 190px 1fr; }

/* Sticky unsaved-change protection */
.pf-savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 18px; background: var(--cmp-bg-panel); border: 1px solid var(--cmp-border-strong); border-radius: var(--cmp-radius-md); box-shadow: 0 -6px 24px -14px rgba(20, 24, 34, 0.28); margin-top: 18px; }
.pf-savebar__text { font-size: 13px; color: var(--cmp-text); font-weight: 600; }
.pf-savebar__sub { font-size: 12px; color: var(--cmp-text-muted); }
.pf-savebar__spacer { flex: 1; }

/* Loading skeleton */
.pf-skel { border-radius: 4px; background: linear-gradient(90deg, var(--cmp-bg-soft) 0%, var(--cmp-border) 50%, var(--cmp-bg-soft) 100%); background-size: 240% 100%; animation: pf-shimmer 1.6s ease-in-out infinite; }
@keyframes pf-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .pf-skel { animation: none; } }
.pf-skel--line { height: 13px; }
.pf-skel--value { height: 17px; }

/* Blocking modal (expired session) */
.pf-modal-root { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 40; }
.pf-modal-scrim { position: absolute; inset: 0; background: rgba(16, 20, 28, 0.5); }
.pf-modal { position: relative; width: 100%; max-width: 440px; background: var(--cmp-bg-panel); border-radius: var(--cmp-radius-lg); padding: 28px; box-shadow: 0 30px 70px -20px rgba(10, 14, 22, 0.5); text-align: center; }
.pf-modal__mark { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background: var(--cmp-primary-soft); color: var(--cmp-primary); display: flex; align-items: center; justify-content: center; }

/* Duplicate-tab strip */
.pf-tabstrip { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: color-mix(in oklab, var(--cmp-warning) 10%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--cmp-warning) 34%, transparent); font-size: 12.5px; color: var(--cmp-text); }
.pf-tabstrip svg { flex-shrink: 0; color: var(--cmp-warning); }
.pf-tabstrip strong { font-weight: 700; }

/* ====================================================================
   Mobile — the phone column reuses .cmp-m chrome; these are the
   profile-specific pieces inside it.
   ==================================================================== */
.pf-m-scroll { flex: 1; overflow-y: auto; padding: 18px 16px 28px; background: var(--cmp-bg-app); display: flex; flex-direction: column; gap: 14px; }
/* Children keep their natural height: as a flex column, panels would otherwise
   shrink below their content and spill out of themselves instead of extending
   the scroll length. */
.pf-m-scroll > * { flex-shrink: 0; }
.pf-m-card { background: var(--cmp-bg-panel); border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md); padding: 20px 18px; }
.pf-m-title { font-family: var(--cmp-font-headline); font-size: 22px; font-weight: 600; line-height: 1.18; color: var(--cmp-text); margin: 0 0 8px; letter-spacing: -0.01em; }
.pf-m-foot { display: flex; gap: 10px; padding: 12px 16px 16px; background: var(--cmp-bg-panel); border-top: 1px solid var(--cmp-border); }
.pf-m-foot .cmp-btn { flex: 1; min-height: 48px; }
.pf-m-steps { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--cmp-bg-panel); border-bottom: 1px solid var(--cmp-border); font-size: 12px; font-weight: 600; color: var(--cmp-text-muted); }
.pf-m-steps__bar { flex: 1; height: 4px; border-radius: 999px; background: var(--cmp-border); overflow: hidden; }
.pf-m-steps__fill { height: 100%; background: var(--cmp-primary); border-radius: 999px; }
.pf-m .pf-grid { gap: 14px 12px; }
.pf-m .pf-c3, .pf-m .pf-c4, .pf-m .pf-c5, .pf-m .pf-c6, .pf-m .pf-c7, .pf-m .pf-c8 { grid-column: span 12; }
.pf-m .pf-row { grid-template-columns: 1fr; gap: 6px; }
.pf-m .pf-row__action { margin-top: 4px; }

/* `.visually-hidden` is NOT defined here. Bootstrap ships it and loads first in
   the Compass chain, so redefining it would be a duplicate that later sheets
   could shadow. */

/* ====================================================================
   Route nav, inline field errors, conflict comparison, dialogs, phone
   edit rows, progress semantics.
   ==================================================================== */

/* Profile & contact vs Account & security are separate ROUTES, not
   same-page tabs — real links with aria-current, styled as a nav bar. It sits
   ABOVE the h1 so each route keeps a distinct page title. */
.pf-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--cmp-border); margin: 10px 0 18px; }
.pf-nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 13.5px; font-weight: 600; color: var(--cmp-text-muted); text-decoration: none; }
.pf-nav__link:hover { color: var(--cmp-text); }
.pf-nav__link[aria-current="page"] { color: var(--cmp-primary); border-bottom-color: var(--cmp-primary); }
.pf-nav__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cmp-primary-soft); border-radius: var(--cmp-radius-sm); }
/* Breathing room between the route's description and the first panel. */
.pf-accounthead { margin-bottom: 22px; }
.pf-m .pf-accounthead { margin-bottom: 4px; }

/* Inline field error — paired with a summary that links to it. */
.pf-err { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--cmp-danger); }
.pf-err svg { flex-shrink: 0; margin-top: 2px; }
.cmp-field__input[aria-invalid="true"] { border-color: var(--cmp-danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cmp-danger) 12%, transparent); }
.pf-errlist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pf-errlist a { color: var(--cmp-danger); font-weight: 700; text-underline-offset: 3px; }

/* Conflict comparison — mine vs theirs, side by side, explicit choice. */
.pf-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pf-diff__col { border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md); background: var(--cmp-bg-panel); overflow: hidden; }
.pf-diff__col--theirs { border-color: var(--cmp-border-strong); }
.pf-diff__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 13px; background: var(--cmp-bg-soft); border-bottom: 1px solid var(--cmp-border); }
.pf-diff__who { font-size: 12.5px; font-weight: 700; color: var(--cmp-text); }
.pf-diff__when { font-size: 11.5px; color: var(--cmp-text-subtle); }
.pf-diff__body { padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.pf-diff__row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pf-diff__k { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cmp-text-subtle); }
.pf-diff__v { color: var(--cmp-text); overflow-wrap: anywhere; }
.pf-diff__v--changed { font-weight: 700; background: var(--cmp-primary-soft); border-radius: 3px; padding: 0 4px; align-self: flex-start; }
.pf-diff__foot { padding: 11px 13px; border-top: 1px solid var(--cmp-border); }
@media (max-width: 700px) { .pf-diff { grid-template-columns: 1fr; } }

/* Confirmation dialog — destructive consequences spelled out. */
.pf-dialog { position: relative; width: 100%; max-width: 470px; background: var(--cmp-bg-panel); border-radius: var(--cmp-radius-lg); padding: 26px 28px 24px; box-shadow: 0 30px 70px -20px rgba(10, 14, 22, 0.5); }
.pf-dialog__title { font-family: var(--cmp-font-headline); font-size: 21px; font-weight: 600; line-height: 1.2; color: var(--cmp-text); margin: 0 0 10px; }
.pf-dialog__body { font-size: 13.5px; line-height: 1.55; color: var(--cmp-text-muted); margin: 0; }
.pf-dialog__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pf-dialog__list li { display: flex; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--cmp-text-muted); overflow-wrap: anywhere; }
.pf-dialog__list li strong { color: var(--cmp-text); font-weight: 600; }
.pf-dialog__bullet { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--cmp-bg-soft); border: 1px solid var(--cmp-border-strong); color: var(--cmp-text-muted); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.pf-dialog__bullet--warn { background: color-mix(in oklab, var(--cmp-warning) 16%, transparent); border-color: color-mix(in oklab, var(--cmp-warning) 44%, transparent); color: var(--cmp-warning); }
.pf-dialog__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cmp-border); }
.pf-dialog__actions .pf-actions__spacer { flex: 1; }
.pf-dialog__actions .cmp-btn { max-width: 100%; min-height: 44px; height: auto; white-space: normal; text-align: center; justify-content: center; }
.pf-btn-danger { background: var(--cmp-danger); border-color: var(--cmp-danger); color: #fff; }
.pf-btn-danger:hover { filter: brightness(0.92); }

/* Inert background beneath a modal: visually receded, and marked inert in
   markup so nothing behind it is focusable or read. */
.pf-inert { filter: blur(1.5px); opacity: 0.5; pointer-events: none; user-select: none; }

/* Phone edit row */
.pf-phone-edit { display: flex; flex-direction: column; gap: 14px; max-width: 460px; padding: 16px 0 4px; }
.pf-phone-edit__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Mobile step progress — real progress semantics, not a decorative bar. */
.pf-m-steps progress { flex: 1; height: 5px; border: none; border-radius: 999px; background: var(--cmp-border); overflow: hidden; appearance: none; }
.pf-m-steps progress::-webkit-progress-bar { background: var(--cmp-border); border-radius: 999px; }
.pf-m-steps progress::-webkit-progress-value { background: var(--cmp-primary); border-radius: 999px; }
.pf-m-steps progress::-moz-progress-bar { background: var(--cmp-primary); border-radius: 999px; }

/* Proposed-address row — visually secondary to the confirmed delivery
   address it has NOT yet replaced. */
.pf-proposed { display: flex; flex-direction: column; gap: 6px; padding: 13px 15px; border: 1px dashed var(--cmp-border-strong); border-radius: var(--cmp-radius-md); background: var(--cmp-bg-soft); }
.pf-proposed__label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cmp-text-subtle); }
.pf-proposed__addr { font-size: 14px; color: var(--cmp-text); overflow-wrap: anywhere; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pf-proposed__meta { font-size: 12px; line-height: 1.5; color: var(--cmp-text-muted); }
.pf-proposed__meta strong { color: var(--cmp-text); font-weight: 600; }
.pf-proposed__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 2px; }

/* Stage list — used where a flow has ordered, distinct stages the applicant
   must complete in order (clearing a carrier STOP, then re-authorizing). */
.pf-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pf-stages li { display: flex; gap: 11px; }
.pf-stages__n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; background: var(--cmp-bg-soft); border: 1px solid var(--cmp-border-strong); color: var(--cmp-text-muted); }
.pf-stages__n--now { background: var(--cmp-primary); border-color: var(--cmp-primary); color: var(--cmp-primary-fg); }
.pf-stages__n--done { background: var(--cmp-check-bg); border-color: var(--cmp-check-bg); color: var(--cmp-check-fg); }
.pf-stages__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-stages__title { font-size: 13px; font-weight: 700; color: var(--cmp-text); }
.pf-stages__title--done { color: var(--cmp-text-muted); }
.pf-stages__hint { font-size: 12.5px; line-height: 1.5; color: var(--cmp-text-muted); }
.pf-stages__hint code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--cmp-text); background: var(--cmp-bg-soft); border: 1px solid var(--cmp-border); border-radius: 3px; padding: 0 5px; }

/* Guard exhibit — the list of exits the unsaved-change guard covers. */
.pf-guard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin-top: 12px; }
.pf-guard span { display: flex; gap: 7px; font-size: 12.5px; color: var(--cmp-text-muted); }
.pf-guard b { color: var(--cmp-check-bg); }

/* ====================================================================
   Sub-forms, read-only facts, idle countdown, the signed-out surface,
   mobile save-bar footer.
   ==================================================================== */

/* Shell body wrapper so inert can be applied to the whole authenticated
   surface without disturbing its flex column. */
.pf-shell-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* A sub-form is a distinct COMMAND inside a panel: the contact-email change,
   adding a phone, replacing a phone. Boxed so the separate submit boundary
   is legible, not just structural. */
.pf-subform { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin: 16px 0 4px; padding: 16px; border: 1px solid var(--cmp-border-strong); border-left: 3px solid var(--cmp-primary); border-radius: var(--cmp-radius-md); background: var(--cmp-bg-soft); }
.pf-subform__title { font-family: var(--cmp-font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--cmp-text); margin: 0; }
.pf-subform__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* A confirmed fact rendered as text, never as an input with a badge. */
.pf-fact { font-size: 15px; font-weight: 600; color: var(--cmp-text); overflow-wrap: anywhere; }

/* Idle countdown ring */
.pf-idle__ring { position: relative; width: 72px; height: 72px; margin: 0 auto 14px; }
.pf-idle__count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--cmp-font-headline); font-size: 22px; font-weight: 600; color: var(--cmp-text); font-variant-numeric: tabular-nums; }

/* Dialog focus/keyboard contract line */
.pf-dialog__esc { font-size: 11.5px; line-height: 1.5; color: var(--cmp-text-subtle); margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--cmp-border); }
.pf-dialog__esc strong { color: var(--cmp-text-muted); font-weight: 600; }

/* Signed-out reassurance note (unauthenticated surface) */
.pf-signedout__note { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; padding: 13px 15px; border: 1px solid var(--cmp-border); border-radius: var(--cmp-radius-md); background: var(--cmp-bg-soft); text-align: left; font-size: 12.5px; line-height: 1.55; color: var(--cmp-text-muted); }
.pf-signedout__note svg { flex-shrink: 0; margin-top: 1px; color: var(--cmp-text-subtle); }
.pf-signedout__note strong { color: var(--cmp-text); font-weight: 600; }
.pf-eyebrow--center { justify-content: center; }

/* Mobile save bar: a note plus the two actions, so "why is Save off?" is
   answerable without scrolling back up to the conflict. */
.pf-m-foot--stack { flex-direction: column; align-items: stretch; gap: 10px; }
.pf-m-foot__note { font-size: 12px; line-height: 1.45; color: var(--cmp-text-muted); }
.pf-m-foot__row { display: flex; gap: 10px; }
.pf-m-foot__row .cmp-btn { flex: 1; min-height: 48px; }
.pf-m-foot--stack .cmp-btn { flex: 1; }

/* Mobile: the conflict comparison stacks, and sub-forms go full width. */
.pf-m .pf-subform { max-width: none; }
.pf-m .pf-diff { grid-template-columns: 1fr; }