/* ============================================================
   USA Times — Design System (cosmetic-only polish, 2026-05-18)
   Scoped to body.usat-polished so we don't touch the rest of WP.
   Replaces ~118 scattered !important declarations with a single
   coherent token set + targeted overrides.
   ============================================================ */

body.usat-polished {
    /* ---- color tokens ---- */
    --usat-ink:        #101014;
    --usat-text:       #2A2F38;
    --usat-text-2:     #4A5160;
    --usat-muted:      #848E9F;
    --usat-line:       #C7CCD3;
    --usat-hairline:   #E5E7EB;
    --usat-fill:       #F4F5F7;
    --usat-surface:    #FFFFFF;
    --usat-canvas:     #FAFAF8;
    --usat-blue:       #0A3F93;
    --usat-blue-hover: #082E6B;
    --usat-blue-tint:  #E8EFFA;
    --usat-red:        #D41A22;
    --usat-cream:      #E8DFC9;

    /* ---- spacing scale (8px base) ---- */
    --usat-s-1:  4px;
    --usat-s-2:  8px;
    --usat-s-3:  12px;
    --usat-s-4:  16px;
    --usat-s-5:  24px;
    --usat-s-6:  32px;
    --usat-s-7:  48px;
    --usat-s-8:  64px;
    --usat-s-9:  80px;

    /* ---- type scale ---- */
    --usat-fs-eyebrow: 11px;
    --usat-fs-micro:   12px;
    --usat-fs-small:   13px;
    --usat-fs-body:    16px;
    --usat-fs-lead:    18px;
    --usat-fs-h3:      22px;
    --usat-fs-h2:      28px;
    --usat-fs-h1:      40px;
    --usat-fs-display: 56px;

    /* ---- radii (only these three are legal) ---- */
    --usat-radius-pill:  9999px;
    --usat-radius-card:  16px;
    --usat-radius-input: 10px;

    /* ---- shadows ---- */
    --usat-shadow-card:  0 1px 2px rgba(10,16,20,.04), 0 8px 24px rgba(10,16,20,.06);
    --usat-shadow-lift:  0 2px 4px rgba(10,16,20,.06), 0 16px 36px rgba(10,16,20,.10);
    --usat-shadow-cta:   0 8px 24px rgba(10, 63, 147, .22);

    /* ---- motion ---- */
    --usat-ease:        cubic-bezier(.2,.8,.2,1);
    --usat-dur-fast:    120ms;
    --usat-dur-med:     200ms;
    --usat-dur-slow:    320ms;

    background: var(--usat-canvas);
    color: var(--usat-text);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* ============================================================
   WAVE 4 — systemic mess fixes
   ============================================================ */

/* #31 — kill Playfair from /ride/* + /account/* + /login;
   keep Source Serif (USA Times-y) + Inter (body). */
body.usat-polished * {
    font-family: 'Source Serif', 'Source Serif 4', Georgia, serif !important;
}
body.usat-polished,
body.usat-polished p,
body.usat-polished span,
body.usat-polished a,
body.usat-polished button,
body.usat-polished input,
body.usat-polished textarea,
body.usat-polished select,
body.usat-polished label,
body.usat-polished li,
body.usat-polished div,
body.usat-polished td,
body.usat-polished th {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.usat-polished h1,
body.usat-polished h2,
body.usat-polished h3,
body.usat-polished .usat-display,
body.usat-polished .usat-co-step-h,
body.usat-polished .usat-acct-page-h,
body.usat-polished .usat-login-title {
    font-family: 'Source Serif', 'Source Serif 4', Georgia, serif !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* #32 + #33 — enforced type scale (overrides scattered px/em values) */
body.usat-polished .usat-co-step-eyebrow,
body.usat-polished .usat-acct-eyebrow {
    font-size: var(--usat-fs-eyebrow) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--usat-muted);
}
body.usat-polished .usat-co-step-h         { font-size: var(--usat-fs-h1) !important; margin: var(--usat-s-2) 0 var(--usat-s-6) !important; }
body.usat-polished .usat-co-h2             { font-size: var(--usat-fs-h2) !important; margin: 0 0 var(--usat-s-4) !important; }
body.usat-polished .usat-co-label          { font-size: var(--usat-fs-small) !important; font-weight: 500; color: var(--usat-text-2); display: block; margin-bottom: var(--usat-s-1); }

/* #35 — cards get a corner radius (currently 0px, which is the loudest 1998 tell) */
body.usat-polished .usat-co-card,
body.usat-polished .usat-acct-card,
body.usat-polished .usat-wallet-card,
body.usat-polished .usat-login-card {
    border-radius: var(--usat-radius-card) !important;
    background: var(--usat-surface);
    border: 1px solid var(--usat-hairline);
    box-shadow: var(--usat-shadow-card);
    padding: var(--usat-s-6) !important;
}
@media (max-width: 600px) {
    body.usat-polished .usat-co-card,
    body.usat-polished .usat-acct-card,
    body.usat-polished .usat-wallet-card,
    body.usat-polished .usat-login-card {
        padding: var(--usat-s-5) !important;
        border-radius: var(--usat-radius-card) !important;
    }
}

/* #38 — spacing system: kill arbitrary inline padding/margin between sections */
body.usat-polished .usat-co-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--usat-s-7) var(--usat-s-5);
}
body.usat-polished .usat-co-twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--usat-s-5);
    margin-top: var(--usat-s-6);
}
@media (max-width: 720px) {
    body.usat-polished .usat-co-twocol { grid-template-columns: 1fr; gap: var(--usat-s-4); }
    body.usat-polished .usat-co-wrap   { padding: var(--usat-s-5) var(--usat-s-4); }
}

/* #39 — button reset (kill .wp-block-button inheritance fight) */
body.usat-polished .usat-co-btn,
body.usat-polished .usat-acct-btn,
body.usat-polished .usat-login-btn,
body.usat-polished .usat-sso-row {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: var(--usat-radius-pill);
    font-family: 'Inter', sans-serif !important;
    font-size: var(--usat-fs-body) !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    padding: 14px 28px !important;
    min-height: 48px;
    cursor: pointer;
    transition: background-color var(--usat-dur-fast) var(--usat-ease),
                color var(--usat-dur-fast) var(--usat-ease),
                box-shadow var(--usat-dur-med) var(--usat-ease),
                transform var(--usat-dur-fast) var(--usat-ease);
    white-space: nowrap;
}
body.usat-polished .usat-co-btn-primary,
body.usat-polished .usat-acct-btn-primary,
body.usat-polished .usat-login-btn.primary {
    background: var(--usat-blue);
    color: #fff;
    border-color: var(--usat-blue);
    box-shadow: 0 1px 2px rgba(10,16,20,.06);
}
body.usat-polished .usat-co-btn-primary:hover,
body.usat-polished .usat-acct-btn-primary:hover,
body.usat-polished .usat-login-btn.primary:hover {
    background: var(--usat-blue-hover);
    border-color: var(--usat-blue-hover);
    box-shadow: var(--usat-shadow-cta);
    transform: translateY(-1px);
}
body.usat-polished .usat-co-btn-outline,
body.usat-polished .usat-acct-btn,
body.usat-polished .usat-login-btn.outline {
    background: transparent;
    color: var(--usat-blue);
    border-color: var(--usat-blue);
}
body.usat-polished .usat-co-btn-outline:hover,
body.usat-polished .usat-acct-btn:hover,
body.usat-polished .usat-login-btn.outline:hover {
    background: var(--usat-blue-tint);
}

/* #40 — visible disabled state */
body.usat-polished button:disabled,
body.usat-polished .usat-co-btn[disabled],
body.usat-polished .usat-co-btn.is-loading {
    opacity: 0.42 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}
body.usat-polished .usat-co-btn.is-loading::after {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    margin-left: var(--usat-s-2);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: usat-spin 720ms linear infinite;
}
@keyframes usat-spin { to { transform: rotate(360deg); } }

/* #34 — `font-variant-numeric: tabular-nums` on numerals */
body.usat-polished .usat-wallet-card-bal,
body.usat-polished .usat-header-stars-balance,
body.usat-polished .usat-co-fare,
body.usat-polished .usat-fare-amount {
    font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
   WAVE 1 — above-the-fold + chrome
   ============================================================ */

/* #1 — trip chip skeleton shimmer when content is "Loading trip…" */
body.usat-polished .usat-trip-chip {
    border-radius: var(--usat-radius-pill);
    background: var(--usat-fill);
    border: 1px solid var(--usat-hairline);
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: var(--usat-s-2);
    color: var(--usat-text);
    cursor: pointer;
    transition: background-color var(--usat-dur-fast) var(--usat-ease),
                box-shadow var(--usat-dur-med) var(--usat-ease);
}
body.usat-polished .usat-trip-chip:hover {
    background: var(--usat-blue-tint);
    box-shadow: var(--usat-shadow-card);
}
body.usat-polished .usat-trip-chip:focus-visible {
    outline: 2px solid var(--usat-blue);
    outline-offset: 3px;
}
body.usat-polished .usat-trip-chip-content {
    font-size: var(--usat-fs-small);
    font-weight: 500;
    letter-spacing: 0.005em;
}
/* Shimmer state — JS adds .is-loading; default markup also kicks it in */
body.usat-polished .usat-trip-chip-content:empty,
body.usat-polished .usat-trip-chip.is-loading .usat-trip-chip-content {
    display: inline-block;
    width: 220px;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, #E5E7EB 0%, #F4F5F7 50%, #E5E7EB 100%);
    background-size: 200% 100%;
    animation: usat-shimmer 1.4s infinite ease-in-out;
    color: transparent;
}
@keyframes usat-shimmer {
    0%   { background-position: 200% 50%; }
    100% { background-position: -200% 50%; }
}

/* #2 — hide site services nav (Airport / Hourly / Joyride) during /ride/checkout */
body.usat-polished.usat-on-checkout .usat-header-services {
    display: none !important;
}
/* #3 — slim header on checkout */
body.usat-polished.usat-on-checkout .usat-header-phone {
    margin-left: auto;
}
/* #4 — LOG IN pill ALWAYS hidden on /ride/checkout (regardless of auth) */
body.usat-polished.usat-on-checkout .wp-block-loginout,
body.usat-polished.usat-on-checkout a.wp-block-loginout,
body.usat-polished.usat-on-checkout [data-usat-login-link] {
    display: none !important;
}
/* #5 — ★ pill default to "0" instead of "—" via CSS empty state */
body.usat-polished .usat-header-stars-balance:empty::after { content: '0'; }

/* #6 — header logo aspect ratio so layout doesn't shift while loading */
body.usat-polished .wp-block-site-logo img {
    aspect-ratio: 5 / 1;
    object-fit: contain;
}

/* #7 — header background unified */
body.usat-polished header,
body.usat-polished .wp-site-blocks > .wp-block-group:first-child {
    background: var(--usat-surface);
    border-bottom: 1px solid var(--usat-hairline);
}

/* #10 — trip chip popover always visible inline (no toggle hide) */
body.usat-polished .usat-trip-chip-pop {
    display: none; /* keep hidden in skeleton state; PHP edit handles full visibility */
}

/* ============================================================
   WAVE 2 — step indicator + headline polish (CSS portion)
   ============================================================ */

/* #12 — step labels centered under dots */
body.usat-polished .usat-co-stepper ol {
    list-style: none;
    padding: 0;
    margin: var(--usat-s-5) 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: flex-start;
    position: relative;
    gap: 0;
}
body.usat-polished .usat-co-stepper li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--usat-s-2);
    position: relative;
}
body.usat-polished .usat-co-stepper .dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: var(--usat-surface);
    border: 1.5px solid var(--usat-line);
    color: var(--usat-muted);
    z-index: 2;
    transition: all var(--usat-dur-med) var(--usat-ease);
}
body.usat-polished .usat-co-stepper li.done .dot {
    background: var(--usat-blue);
    border-color: var(--usat-blue);
    color: #fff;
}
/* #15 — current step inverted dot, future ghosted */
body.usat-polished .usat-co-stepper li.current .dot {
    background: var(--usat-surface);
    border-color: var(--usat-blue);
    border-width: 2px;
    color: var(--usat-blue);
    box-shadow: 0 0 0 4px var(--usat-blue-tint);
}
body.usat-polished .usat-co-stepper .label {
    font-size: var(--usat-fs-small);
    font-weight: 500;
    color: var(--usat-muted);
    letter-spacing: 0.01em;
}
body.usat-polished .usat-co-stepper li.current .label {
    color: var(--usat-ink);
    font-weight: 600;
}
body.usat-polished .usat-co-stepper li.done .label {
    color: var(--usat-text-2);
}
/* #13 — progress line connecting the dots */
body.usat-polished .usat-co-stepper ol::before {
    content: '';
    position: absolute;
    top: 16px; left: 16.66%; right: 16.66%;
    height: 1.5px;
    background: var(--usat-line);
    z-index: 1;
}
body.usat-polished .usat-co-stepper ol::after {
    content: '';
    position: absolute;
    top: 16px; left: 16.66%;
    height: 1.5px;
    background: var(--usat-blue);
    z-index: 1;
    transition: width var(--usat-dur-slow) var(--usat-ease);
}
/* progress fill — driven by data attr on the <ol> set by PHP; default 50% for step 2 */
body.usat-polished .usat-co-stepper ol[data-progress="0"]::after   { width: 0%;            }
body.usat-polished .usat-co-stepper ol[data-progress="33"]::after  { width: 16.66%;        }
body.usat-polished .usat-co-stepper ol[data-progress="50"]::after,
body.usat-polished .usat-co-stepper ol                  ::after    { width: 33.33%;        }
body.usat-polished .usat-co-stepper ol[data-progress="66"]::after  { width: 50%;           }
body.usat-polished .usat-co-stepper ol[data-progress="100"]::after { width: 66.66%;        }

/* #16 + #17 — eyebrow → tighter spacing to H1 */
body.usat-polished .usat-co-step-eyebrow { margin: var(--usat-s-6) 0 var(--usat-s-1) !important; }

/* ============================================================
   WAVE 3 — forms + SSO buttons + right card
   ============================================================ */

/* #21 + #22 — equal-width SSO buttons */
body.usat-polished .usat-sso-toprow,
body.usat-polished .usat-sso-stack-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--usat-s-3);
    margin-bottom: var(--usat-s-5);
}
@media (max-width: 480px) {
    body.usat-polished .usat-sso-toprow,
    body.usat-polished .usat-sso-stack-row { grid-template-columns: 1fr; }
}
body.usat-polished .usat-sso-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--usat-s-2);
    background: var(--usat-surface);
    color: var(--usat-ink);
    border: 1px solid var(--usat-line);
    border-radius: var(--usat-radius-pill);
    padding: 12px 18px;
    transition: all var(--usat-dur-fast) var(--usat-ease);
}
body.usat-polished .usat-sso-row:hover {
    background: var(--usat-fill);
    border-color: var(--usat-text-2);
}
body.usat-polished .usat-sso-apple {
    background: #000;
    color: #fff;
    border-color: #000;
}
body.usat-polished .usat-sso-apple:hover { background: #1A1A1A; border-color: #1A1A1A; }

/* #23 — "or use email" divider with grid (even bars) */
body.usat-polished .usat-sso-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--usat-s-4);
    margin: var(--usat-s-5) 0;
    color: var(--usat-muted);
    font-size: var(--usat-fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
body.usat-polished .usat-sso-divider::before,
body.usat-polished .usat-sso-divider::after {
    content: '';
    height: 1px;
    background: var(--usat-hairline);
}

/* #24 + #28 — form layout: label breathing room + responsive name row */
body.usat-polished .usat-co-form { display: grid; gap: var(--usat-s-4); }
body.usat-polished .usat-co-form label { display: block; }
body.usat-polished .usat-co-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--usat-s-3);
}
@media (max-width: 480px) {
    body.usat-polished .usat-co-row { grid-template-columns: 1fr; }
}

/* #29 + #30 — text input polish + focus ring + filled-vs-placeholder contrast */
body.usat-polished .usat-co-form input,
body.usat-polished .usat-acct-form input,
body.usat-polished .usat-login-form input {
    width: 100%;
    height: 48px;
    padding: 0 var(--usat-s-4);
    border: 1px solid var(--usat-line);
    border-radius: var(--usat-radius-input);
    background: var(--usat-surface);
    color: var(--usat-ink);
    font-size: var(--usat-fs-body);
    line-height: 1.2;
    transition: border-color var(--usat-dur-fast) var(--usat-ease),
                box-shadow var(--usat-dur-fast) var(--usat-ease),
                background-color var(--usat-dur-fast) var(--usat-ease);
}
body.usat-polished .usat-co-form input::placeholder,
body.usat-polished .usat-acct-form input::placeholder,
body.usat-polished .usat-login-form input::placeholder {
    color: var(--usat-muted);
}
body.usat-polished .usat-co-form input:focus,
body.usat-polished .usat-co-form input:focus-visible,
body.usat-polished .usat-acct-form input:focus-visible,
body.usat-polished .usat-login-form input:focus-visible {
    outline: none;
    border-color: var(--usat-blue);
    box-shadow: 0 0 0 3px var(--usat-blue-tint);
}

/* #27 — promote guest "Continue as guest" submit to filled primary;
   demote any duplicate primary on the right card to outline. */
body.usat-polished #usat-co-guest-form .usat-co-btn-outline {
    background: var(--usat-blue) !important;
    color: #fff !important;
    border-color: var(--usat-blue) !important;
}
body.usat-polished #usat-co-guest-form .usat-co-btn-outline:hover {
    background: var(--usat-blue-hover) !important;
    border-color: var(--usat-blue-hover) !important;
    box-shadow: var(--usat-shadow-cta);
    transform: translateY(-1px);
}

/* #20 — accent rail on default-recommended card */
body.usat-polished .usat-co-twocol > .usat-co-card:first-child {
    border-left: 3px solid var(--usat-blue);
}

/* ============================================================
   WAVE 5 — account pages, login, perf (CSS portion)
   ============================================================ */

/* #43 — active sidebar link styling */
body.usat-polished .usat-acct-sidebar-link {
    display: block;
    padding: var(--usat-s-3) var(--usat-s-4);
    color: var(--usat-text-2);
    text-decoration: none;
    border-radius: var(--usat-radius-input);
    font-weight: 500;
    transition: background-color var(--usat-dur-fast) var(--usat-ease);
    border-left: 3px solid transparent;
    margin-left: -3px;
}
body.usat-polished .usat-acct-sidebar-link:hover {
    background: var(--usat-fill);
}
body.usat-polished .usat-acct-sidebar-link.is-active {
    color: var(--usat-blue);
    font-weight: 600;
    border-left-color: var(--usat-blue);
    background: var(--usat-blue-tint);
}

/* #44 — Sign Out demoted: not red, not loud */
body.usat-polished .usat-acct-btn-danger,
body.usat-polished #usat-acct-signout,
body.usat-polished .usat-acct-signout {
    background: transparent !important;
    color: var(--usat-muted) !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    font-size: var(--usat-fs-small) !important;
    min-height: auto !important;
    padding: var(--usat-s-2) var(--usat-s-3) !important;
    margin-top: var(--usat-s-5) !important;
    border-top: 1px solid var(--usat-hairline) !important;
    border-radius: 0 !important;
    width: 100%;
    text-align: left;
}
body.usat-polished .usat-acct-btn-danger:hover,
body.usat-polished #usat-acct-signout:hover,
body.usat-polished .usat-acct-signout:hover {
    color: var(--usat-ink) !important;
    background: transparent !important;
    transform: none !important;
}

/* #46 — login card centered in viewport with calm tint */
body.usat-polished .usat-login-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--usat-s-6) var(--usat-s-4);
    background: var(--usat-canvas);
}
body.usat-polished .usat-login-card {
    max-width: 460px;
    width: 100%;
}
body.usat-polished .usat-login-title {
    font-size: var(--usat-fs-h2) !important;
    margin: var(--usat-s-4) 0 var(--usat-s-2) !important;
    text-align: center;
}
body.usat-polished .usat-login-sub {
    color: var(--usat-muted);
    font-size: var(--usat-fs-small);
    text-align: center;
    margin: 0 0 var(--usat-s-5) !important;
}
body.usat-polished .usat-login-stack {
    display: grid;
    gap: var(--usat-s-3);
}
body.usat-polished .usat-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--usat-s-2);
}
body.usat-polished .usat-login-btn.apple {
    background: #000; color: #fff; border-color: #000;
}
body.usat-polished .usat-login-btn.apple:hover {
    background: #1A1A1A; border-color: #1A1A1A;
}
body.usat-polished .usat-login-btn.google {
    background: var(--usat-surface); color: var(--usat-ink); border-color: var(--usat-line);
}
body.usat-polished .usat-login-btn.google:hover {
    background: var(--usat-fill); border-color: var(--usat-text-2);
}

/* ============================================================
   Skeletons (Wave 5 — account pages / wallet first paint)
   ============================================================ */
body.usat-polished .usat-skel {
    display: block;
    background: linear-gradient(90deg, var(--usat-hairline) 0%, var(--usat-fill) 50%, var(--usat-hairline) 100%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: usat-shimmer 1.4s infinite ease-in-out;
}

/* ============================================================
   Wallet cards — make the 3 USA Times blue tiles feel intentional
   (separate from above; small refinement only)
   ============================================================ */
body.usat-polished .usat-wallet-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--usat-s-4);
    align-items: center;
}
body.usat-polished .usat-wallet-swatch {
    width: 12px; height: 12px; border-radius: 50%;
    box-shadow: 0 0 0 4px var(--usat-blue-tint);
}
body.usat-polished .usat-wallet-card-name {
    font-family: 'Source Serif', serif !important;
    font-size: var(--usat-fs-h3) !important;
    margin: 0 !important;
    color: var(--usat-ink);
}
body.usat-polished .usat-wallet-card-issuer {
    font-size: var(--usat-fs-small) !important;
    color: var(--usat-muted);
    margin: var(--usat-s-1) 0 0 !important;
}
body.usat-polished .usat-wallet-card-bal {
    font-family: 'Source Serif', serif !important;
    font-size: 36px !important;
    font-weight: 600;
    color: var(--usat-ink);
    font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
   BATCH B/C — remaining audit items
   ============================================================ */

/* #50 — body background per route via CSS variable */
body.usat-polished.usat-on-checkout { background: var(--usat-canvas); }
body.usat-polished.usat-on-account  { background: #F7F7F4; }
body.usat-polished.usat-on-login    { background: #F2F4F7; }

/* #41 + #42 — account-page skeleton placeholders.
   Server emits .usat-acct-skel-card divs inside .usat-acct-gate; JS hides
   the gate when auth resolves and reveals .usat-acct-body. */
body.usat-polished .usat-acct-gate {
    display: grid;
    gap: var(--usat-s-4);
    margin-top: var(--usat-s-5);
    color: var(--usat-muted);
}
body.usat-polished .usat-acct-skel-card {
    background: var(--usat-surface);
    border: 1px solid var(--usat-hairline);
    border-radius: var(--usat-radius-card);
    padding: var(--usat-s-6);
    box-shadow: var(--usat-shadow-card);
}

/* #45 — /login skeleton state while JS hydrates auth handlers */
body.usat-polished.usat-on-login .usat-login-card {
    transition: opacity var(--usat-dur-med) var(--usat-ease);
}

/* #47 — mobile header: flex-wrap + min-width so the inline 32% bases don't
   overlap on narrow viewports */
@media (max-width: 640px) {
    body.usat-polished header .wp-block-group {
        flex-wrap: wrap;
        gap: var(--usat-s-2);
    }
    body.usat-polished header .wp-block-group > * {
        flex: 0 1 auto !important;
        min-width: 0;
    }
    body.usat-polished header .usat-header-services {
        order: 99;
        flex-basis: 100% !important;
    }
}

/* #10 — trip chip popover inline default (no toggle-hide). When user clicks
   the chip, content is already revealed; we just scroll into view if needed. */
body.usat-polished .usat-trip-chip-pop {
    display: block;
    margin-top: var(--usat-s-3);
    font-size: var(--usat-fs-small);
    color: var(--usat-text-2);
}
body.usat-polished .usat-trip-chip-pop[hidden] {
    display: none;  /* JS may still toggle for some states; respect it when set */
}

/* #18 — H1 weight de-emphasized as user moves deeper into the flow.
   Step 1 = full display weight (decision moment); Step 2 = 90%; Step 3 = 80%. */
body.usat-polished.usat-on-checkout .usat-co-step-h {
    font-weight: 600;
}
/* No reliable per-step body class today; use a JS hook below or rely on
   the .usat-co-stepper ol[data-progress] already set by design-system PHP. */
body.usat-polished .usat-co-stepper ol[data-progress="100"] ~ * .usat-co-step-h,
body.usat-polished .usat-co-stepper ol[data-progress="100"] + .usat-co-step .usat-co-step-h {
    font-size: 32px !important;
    color: var(--usat-text);
}
body.usat-polished .usat-co-stepper ol[data-progress="50"] ~ * .usat-co-step-h,
body.usat-polished .usat-co-stepper ol[data-progress="50"] + .usat-co-step .usat-co-step-h {
    font-size: 36px !important;
}