/* ============================================================
   QUICK EXPERIENCE REQUEST, the three-step, tap-first form,
   plus the pages around it (received, your requests, request
   status, the Concierge Host's expense log) and the request cards
   the customer dashboard borrows (.qr-list, .qr-req-*, .qr-badge*).

   The name of what you are asking for, set large; a sticky local
   bar with the step count; the Flight Path above the questions; a
   quiet summary of the experience beside them; one question per
   step; large, plain, tappable tiles; one gold Continue.

   Motion is Elite Trip's own (motion.css): steps cross-fade while
   the plane carries the movement, the received page closes with
   the Seal, lists arrive with Sunrise. Nothing slides or lifts.

   Rules this stylesheet keeps:
     * Every choice is a target a thumb can hit (min 44px).
     * One step is visible at a time. No wall of inputs.
     * The primary action is always reachable, fixed on a phone.
     * Selected state is legible without colour alone (fill + tick,
       or ring + tick).
   Colours, radii and shadows are the tokens in elite.css.
   ============================================================ */

/* ---------- the stage ---------- */
.qr-stage { background: var(--c-bg); }
.qr-page {
    max-width: calc(var(--w-page) + var(--pad) * 2);
    padding-top: clamp(32px, 5vw, 64px);
    padding-bottom: clamp(64px, 9vw, 112px);
}

/* ---------- local bar + progress ---------- */
.qr-localnav__title {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
    font-size: 1.1875rem;
}
.qr-localnav__title i, .qr-localnav__title .et-i { color: var(--c-gold); font-size: 0.95em; margin-right: 4px; }
.qr-progress {
    display: flex; align-items: center; gap: 12px;
    flex: 0 0 auto; width: min(300px, 44%);
}
/* The thin bar is kept for scripts and screen readers' sake but drawn by the
   Flight Path below the bar instead (.qr-flight). */
.qr-progress { justify-content: flex-end; }
.qr-progress-bar { display: none; }
.qr-progress-fill { height: 100%; width: 33%; }
.qr-flight { margin: 0 0 clamp(14px, 2vw, 22px); }
.qr-progress-text {
    font-size: var(--t-micro); color: var(--c-muted);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---------- the page headline ---------- */
.qr-head { max-width: 860px; margin-bottom: clamp(28px, 4vw, 52px); }
.qr-eyebrow {
    margin-bottom: 10px;
    font-size: var(--t-body); font-weight: 600; color: var(--c-bronze);
}
.qr-h1 { font-size: var(--t-display); font-weight: 600; line-height: 1.07; color: var(--c-ink); }
.qr-lead {
    max-width: 46ch; margin-top: 14px;
    font-size: var(--t-lead); line-height: 1.38; letter-spacing: 0.011em; color: var(--c-muted);
}

/* ---------- the two columns ---------- */
.qr-layout { display: grid; gap: clamp(24px, 4vw, 64px); }
@media (min-width: 1069px) {
    .qr-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
    .qr-side { position: sticky; top: calc(var(--nav-h) + var(--local-h) + 24px); }
}
.qr-main { min-width: 0; }

/* ---------- the experience, beside the questions ---------- */
.qr-chosen {
    display: flex; flex-direction: column;
    border-radius: var(--r-xl); background: var(--c-bg-alt); overflow: hidden;
}
/* overflow:hidden is what lets aspect-ratio win over a tall photograph. */
.qr-chosen__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg-alt-2); }
.qr-chosen__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.qr-chosen__art {
    display: grid; place-items: center; aspect-ratio: 16 / 9;
    background: var(--c-espresso); color: #fff; font-size: 3rem;
}
.qr-chosen__body { display: flex; gap: 14px; align-items: flex-start; padding: 24px 28px 0; }
.qr-chosen__body:last-child { padding-bottom: 28px; }
.qr-chosen__ico {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--c-espresso); color: #fff; font-size: 0.95rem;
}
.qr-chosen strong { display: block; font-size: 1.3125rem; font-weight: 600; line-height: 1.2; color: var(--c-ink); }
.qr-chosen small { display: block; margin-top: 6px; font-size: var(--t-small); line-height: 1.43; color: var(--c-muted); }
.qr-facts {
    display: flex; flex-wrap: wrap; gap: 12px 36px;
    margin: 22px 28px 0; padding: 18px 0 26px;
    border-top: 1px solid var(--c-line-2);
}
.qr-facts dt { font-size: var(--t-micro); color: var(--c-muted); }
.qr-facts dd { margin: 2px 0 0; font-size: var(--t-body); font-weight: 600; color: var(--c-ink); }
.qr-side .qr-notice { margin: 16px 0 0; }

/* ---------- steps ---------- */
.qr-step { display: none; }
.qr-step.is-active { display: block; }
/* Steps never slide: they cross-fade, and the plane on the Flight Path
   carries the movement forward or back. */
.qr-step.qr-in-fwd, .qr-step.qr-in-back { animation: et-fade-in 240ms linear both; }

.qr-step-title {
    margin: 0 0 clamp(22px, 3vw, 34px);
    font-size: var(--t-title); font-weight: 600; line-height: 1.1; color: var(--c-ink);
}
/* The heading takes focus on a step change; the ring is for keyboards only. */
.qr-step-title:focus { outline: none; }
.qr-step-title:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.9); outline-offset: 6px; border-radius: 6px; }

.qr-field { margin-bottom: clamp(26px, 3.2vw, 38px); }
.qr-field[hidden] { display: none !important; }
.qr-label {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 12px;
    font-size: var(--t-body); font-weight: 600; color: var(--c-ink);
}
.qr-label i, .qr-label .et-i { width: 18px; text-align: center; color: var(--c-bronze); }
.qr-label .qr-req { color: var(--c-bronze); }
.qr-help { display: block; margin-top: 10px; font-size: var(--t-small); line-height: 1.43; color: var(--c-muted); }
.qr-error {
    display: block; margin-top: 8px;
    font-size: var(--t-small); font-style: normal; font-weight: 600; color: var(--c-danger);
}

/* ---------- chips: short answers ---------- */
.qr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.qr-chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 20px; border-radius: var(--r-pill);
    border: 1px solid var(--c-line-2); background: var(--c-bg);
    color: var(--c-ink); font-size: 0.9375rem; font-weight: 400; letter-spacing: -0.01em;
    cursor: pointer;
    transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.qr-chip:hover { border-color: var(--c-ink); }
.qr-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.qr-chip[aria-pressed="true"] {
    border-color: var(--c-ink); background: var(--c-ink); color: #fff;
}
.qr-chip[aria-pressed="true"]::before {
    content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: var(--c-gold);
    -webkit-mask: var(--et-i-check) center / contain no-repeat; mask: var(--et-i-check) center / contain no-repeat;
}
.qr-chip i, .qr-chip .et-i { font-size: 0.85rem; color: var(--c-bronze); }
.qr-chip[aria-pressed="true"] i, .qr-chip[aria-pressed="true"] .et-i { color: var(--c-gold); }

/* ---------- cards: the answer tiles ---------- */
.qr-cards {
    display: grid; gap: 12px; align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.qr-card {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 72px; height: 100%; padding: 16px 44px 16px 20px; border-radius: var(--r-md);
    border: 1px solid var(--c-line-2); background: var(--c-bg);
    color: var(--c-ink); font-size: var(--t-body); font-weight: 600; line-height: 1.25;
    text-align: left; cursor: pointer;
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.qr-card > i:first-child, .qr-card > .et-i:first-child { flex: 0 0 auto; width: 22px; text-align: center; font-size: 1.1rem; color: var(--c-bronze); }
.qr-card:hover { border-color: rgba(37, 99, 235, 0.55); }
.qr-card:focus-visible { outline: none; box-shadow: var(--ring); }
.qr-card[aria-pressed="true"] {
    border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink);
}
.qr-card-tick {
    position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
    color: var(--c-ink); opacity: 0; transition: opacity 200ms var(--ease);
}
.qr-card[aria-pressed="true"] .qr-card-tick { opacity: 1; }

/* ---------- segmented control ---------- */
.qr-segmented {
    display: inline-flex; gap: 2px; padding: 3px;
    border-radius: var(--r-pill); background: var(--c-bg-alt-2);
}
.qr-segmented button {
    min-width: 64px; min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--r-pill);
    background: transparent; color: var(--c-ink);
    font-size: var(--t-body); cursor: pointer;
    transition: background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.qr-segmented button:focus-visible { outline: none; box-shadow: var(--ring); }
.qr-segmented button[aria-pressed="true"] {
    background: var(--c-bg); font-weight: 600;
    box-shadow: 0 1px 4px rgba(17, 12, 9, 0.18), 0 0 0 0.5px rgba(17, 12, 9, 0.08);
}

/* ---------- stepper ---------- */
.qr-stepper {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px;
    border: 1px solid var(--c-line-2); border-radius: var(--r-pill);
}
.qr-stepper button {
    display: grid; place-items: center;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--c-bg-alt); color: var(--c-ink); font-size: 0.95rem; cursor: pointer;
    transition: background-color 200ms var(--ease);
}
.qr-stepper button:hover:not(:disabled) { background: var(--c-bg-alt-2); }
.qr-stepper button:focus-visible { outline: none; box-shadow: var(--ring); }
.qr-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.qr-stepper output {
    min-width: 52px; text-align: center;
    font-size: 1.3125rem; font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums;
}

/* ---------- toggle ---------- */
.qr-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 10px 20px; border-radius: var(--r-pill);
    border: 1px solid var(--c-line-2); background: var(--c-bg);
    color: var(--c-ink-2); font-size: 0.9375rem; cursor: pointer;
    transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.qr-toggle i, .qr-toggle .et-i { color: var(--c-bronze); }
.qr-toggle:hover { border-color: var(--c-ink); }
.qr-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.qr-toggle[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.qr-toggle[aria-pressed="true"] i, .qr-toggle[aria-pressed="true"] .et-i { color: var(--c-gold); }

/* ---------- text inputs (the only three) ---------- */
.qr-input, .qr-textarea {
    display: block; width: 100%; min-height: 52px; padding: 14px 16px;
    border: 1px solid var(--c-line-2); border-radius: var(--r-sm);
    background: var(--c-bg); color: var(--c-ink); font-size: var(--t-body); line-height: 1.3;
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.qr-input::placeholder, .qr-textarea::placeholder { color: var(--c-faint); }
.qr-input:hover, .qr-textarea:hover { border-color: var(--c-faint); }
.qr-input:focus, .qr-textarea:focus { outline: none; border-color: var(--c-bronze); box-shadow: var(--ring); }
.qr-textarea { min-height: 120px; resize: vertical; }
.qr-native-date, .qr-native-time { max-width: 240px; margin-top: 12px; }

/* ---------- conditional "other" ---------- */
.qr-other { margin-top: 12px; }
.qr-other[hidden] { display: none !important; }

/* ---------- details disclosure ---------- */
.qr-details { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--c-line); }
.qr-details > summary {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; list-style: none; cursor: pointer;
    font-size: var(--t-body); color: var(--c-link);
}
.qr-details > summary::-webkit-details-marker { display: none; }
.qr-details > summary::before {
    content: "\2b"; display: inline-grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid currentColor; font-size: 0.95rem; line-height: 1;
}
.qr-details[open] > summary::before { content: "\2212"; }
.qr-details > summary:hover { text-decoration: underline; }
.qr-details > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-pill); }
.qr-details[open] > summary { margin-bottom: 18px; }

/* ---------- notices ---------- */
.qr-notice {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 0 0 18px; padding: 14px 18px; border-radius: var(--r-sm);
    background: var(--c-warn-bg); color: var(--c-ink);
    font-size: var(--t-small); line-height: 1.5;
}
.qr-notice i, .qr-notice .et-i { flex: 0 0 auto; margin-top: 3px; color: var(--c-bronze); }
.qr-notice-plain { background: var(--c-bg-alt); }
.qr-notice-plain i, .qr-notice-plain .et-i { color: var(--c-ink); }

.qr-form-error {
    margin-bottom: 18px; padding: 14px 18px; border-radius: var(--r-sm);
    background: var(--c-danger-bg); color: var(--c-danger);
    font-size: var(--t-small); font-weight: 600; line-height: 1.45;
}

/* ---------- actions ---------- */
.qr-actions {
    display: flex; gap: 12px; align-items: center;
    margin-top: clamp(28px, 4vw, 40px); padding-top: 24px;
    border-top: 1px solid var(--c-line);
}
.qr-actions .pg-btn { min-height: 52px; padding: 14px 30px; font-size: var(--t-body); font-weight: 400; }
.qr-actions .pg-btn-primary { margin-left: auto; min-width: 240px; }
/* Safari can let an authored display rule override the browser's native
   [hidden] rule. Keep only the action for the active wizard step visible. */
.qr-actions .pg-btn[hidden] { display: none !important; }
.qr-back {
    flex: 0 0 auto; min-width: 104px;
    border: 1px solid var(--c-line-2); background: var(--c-bg); color: var(--c-ink);
}
.qr-back:hover { border-color: var(--c-ink); background: var(--c-bg); color: var(--c-ink); }

/* ---------- service levels (the Concierge "how much" question) ---------- */
.qr-pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.qr-pkg {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    width: 100%; height: 100%; padding: 24px 22px 22px;
    border: 1px solid var(--c-line-2); border-radius: var(--r-lg);
    background: var(--c-bg); color: var(--c-ink); text-align: left; cursor: pointer;
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.qr-pkg:hover { border-color: rgba(37, 99, 235, 0.55); }
.qr-pkg:focus-visible { outline: none; box-shadow: var(--ring); }
.qr-pkg[aria-pressed="true"] { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.qr-pkg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding-right: 28px; }
.qr-pkg-head b { font-size: 1.1875rem; font-weight: 600; line-height: 1.2; }
.qr-pkg-badge {
    padding: 3px 10px; border-radius: var(--r-pill);
    background: var(--c-warn-bg); color: var(--c-link);
    font-size: var(--t-micro); font-weight: 600;
}
.qr-pkg-line { font-size: var(--t-small); line-height: 1.45; color: var(--c-muted); }
.qr-pkg-price {
    width: 100%; padding: 10px 0 12px; border-bottom: 1px solid var(--c-line);
    font-size: var(--t-body); font-weight: 600; line-height: 1.3;
}
.qr-pkg-incl { display: flex; gap: 8px; align-items: baseline; font-size: 0.8125rem; line-height: 1.45; color: var(--c-muted); }
.qr-pkg-incl i, .qr-pkg-incl .et-i { flex: 0 0 auto; font-size: 0.68rem; color: var(--c-bronze); }
.qr-pkg .qr-card-tick { top: 22px; right: 20px; transform: none; }
.qr-pkg[aria-pressed="true"] .qr-card-tick { opacity: 1; }
.qr-pkg-note {
    display: flex; gap: 8px; align-items: baseline; margin-top: 12px;
    font-size: 0.8125rem; line-height: 1.5; color: var(--c-muted);
}
.qr-pkg-note i, .qr-pkg-note .et-i { flex: 0 0 auto; font-size: 0.72rem; color: var(--c-bronze); }

/* ---------- the recap before Send ---------- */
.qr-recap {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 24px; padding: 22px 24px; border-radius: var(--r-md);
    background: var(--c-bg-alt);
}
.qr-recap-title { width: 100%; margin-bottom: 4px; font-size: 1.1875rem; font-weight: 600; color: var(--c-ink); }
.qr-recap-row {
    padding: 6px 14px; border-radius: var(--r-pill);
    background: var(--c-bg); color: var(--c-ink); font-size: var(--t-small);
}
.qr-recap-note { width: 100%; font-size: 0.8125rem; line-height: 1.5; color: var(--c-muted); }
.qr-recap-strong { color: var(--c-ink); font-weight: 600; }

/* Sticky on a phone: the primary action is never below the fold. The site
   tab bar steps aside on the wizard (its template empties that block), so
   the action row owns the bottom edge alone. */
@media (max-width: 720px) {
    .qr-page { padding-bottom: 48px; }
    .qr-actions {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        margin: 0; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    .qr-actions .pg-btn-primary { flex: 1 1 auto; min-width: 0; }
    .qr-actions .pg-btn { padding-inline: 20px; }
    body:has(.qr-actions) { padding-bottom: calc(77px + env(safe-area-inset-bottom)); }
    body:has(.qr-actions) .cookie-popup,
    body:has(.qr-actions) .pwa-install-banner { bottom: calc(88px + env(safe-area-inset-bottom)); }
    /* Tiles two to a row (three when there are exactly three), the icon
       above the words, so a long answer never wraps into a narrow column. */
    .qr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .qr-cards:has(> .qr-card:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .qr-cards .qr-card {
        flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px;
        min-height: 64px; padding: 14px 34px 14px 14px; font-size: 0.9375rem;
    }
    .qr-cards .qr-card-tick { top: 12px; right: 12px; transform: none; }
    /* The three service levels: one sideways swipe row, each card most of
       the screen wide, so they compare side by side instead of stacking. */
    .qr-pkgs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        position: relative;
        gap: 10px;
        margin-inline: calc(var(--pad) * -1);
        padding: 2px var(--pad) 8px;
    }
    .qr-pkgs > * { flex: none; width: auto; min-width: 0; scroll-snap-align: none; grid-column: auto; }
    .qr-pkgs::-webkit-scrollbar { display: none; }
    .qr-pkgs .qr-pkg { flex: 0 0 84%; scroll-snap-align: start; }
}

/* The phone layout of the summary panel: one compact row, so the first
   question starts near the top of the screen. */
@media (max-width: 734px) {
    .qr-localnav .qr-progress { width: 40%; gap: 8px; }
    .qr-head { margin-bottom: 22px; }
    .qr-eyebrow { font-size: var(--t-small); margin-bottom: 6px; }
    .qr-lead { font-size: var(--t-body); }
    .qr-layout { gap: 28px; }
    .qr-chosen { flex-direction: row; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-md); }
    .qr-chosen__photo, .qr-chosen__art {
        flex: 0 0 auto; width: 76px; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
        font-size: 1.6rem;
    }
    .qr-chosen__body, .qr-chosen__body:last-child { padding: 0; }
    .qr-chosen__ico, .qr-chosen strong { display: none; }
    .qr-chosen small { margin-top: 0; color: var(--c-ink-2); }
    .qr-facts { display: none; }
    .qr-step-title { font-size: 1.75rem; }
    /* From step two on (Back is showing) the headline has been read: it
       settles to one quiet line and the summary steps aside, so the next
       question starts near the top of a phone screen. */
    .qr-page:has(.qr-back:not([hidden])) .qr-eyebrow,
    .qr-page:has(.qr-back:not([hidden])) .qr-lead,
    .qr-page:has(.qr-back:not([hidden])) .qr-side { display: none; }
    .qr-page:has(.qr-back:not([hidden])) .qr-head { margin-bottom: 8px; }
    .qr-page:has(.qr-back:not([hidden])) .qr-h1 { font-size: var(--t-body); line-height: 1.3; color: var(--c-muted); }
    .qr-segmented { display: flex; width: 100%; }
    .qr-segmented button { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .qr-step.qr-in-fwd, .qr-step.qr-in-back { animation: none; }
    .qr-req-card[data-et-rise] { animation: none; }
}

/* ============================================================
   RECEIVED: the Seal closes, then the headline, the reference,
   a quiet summary and the next action.
   ============================================================ */
.qr-done { max-width: calc(680px + var(--pad) * 2); text-align: center; }
.qr-done-icon { display: grid; place-items: center; margin: 0 auto 20px; }
.qr-done-icon .et-seal { width: 64px; height: 72px; }
.qr-done h1 { margin-bottom: 14px; font-size: var(--t-display); font-weight: 600; line-height: 1.07; color: var(--c-ink); }
.qr-done-sub { max-width: 34ch; margin: 0 auto 24px; font-size: var(--t-lead); line-height: 1.38; color: var(--c-muted); }
.qr-done-ref {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: clamp(28px, 4vw, 40px); padding: 8px 18px; border-radius: var(--r-pill);
    background: var(--c-bg-alt); color: var(--c-ink);
    font-size: var(--t-body); font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}
.qr-done-list {
    display: grid; margin: 0 0 clamp(28px, 4vw, 40px); padding: 6px 24px;
    list-style: none; text-align: left;
    border-radius: var(--r-lg); background: var(--c-bg-alt);
}
.qr-done-list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; }
.qr-done-list li + li { border-top: 1px solid var(--c-line-2); }
.qr-done-list i, .qr-done-list .et-i { flex: 0 0 auto; width: 20px; margin-top: 3px; text-align: center; color: var(--c-bronze); }
.qr-done-list span { font-size: var(--t-body); line-height: 1.43; color: var(--c-ink); }
.qr-done-list b { display: block; margin-bottom: 2px; font-size: var(--t-micro); font-weight: 600; color: var(--c-muted); }
.qr-done-ref-lbl { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
/* Small facts sit two to a row; the experience and the date span the card. */
@media (max-width: 734px) {
    .qr-done-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding: 4px 18px; }
    .qr-done-list li { gap: 10px; padding: 14px 0; }
    .qr-done-list li.is-wide { grid-column: 1 / -1; }
    .qr-done-list span { font-size: var(--t-small); }
    .qr-done-list .et-i { display: none; }
}
.qr-done-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }
.qr-done-actions .pg-btn-primary { min-height: 52px; padding: 14px 30px; font-size: var(--t-body); font-weight: 400; }
.qr-done-actions .pg-btn-ghost {
    min-height: 44px; padding: 0; background: transparent; color: var(--c-link); font-weight: 400;
}
.qr-done-actions .pg-btn-ghost::after { content: "\203A"; margin-left: 4px; font-size: 1.25em; line-height: 1; }
.qr-done-actions .pg-btn-ghost:hover { background: transparent; text-decoration: underline; color: var(--c-link); }

/* The Concierge promise on the received page (light by default; the
   Concierge sheet repaints it on black). */
.qr-done-premier {
    margin: 0 0 clamp(28px, 4vw, 40px); padding: 26px 28px;
    border-radius: var(--r-lg); background: var(--c-bg-alt); text-align: left;
}
.qr-done-premier h2 { margin: 0 0 12px; font-size: 1.5rem; color: var(--c-ink); }
.qr-done-premier ol { display: grid; gap: 8px; margin: 0 0 18px 20px; padding: 0; font-size: var(--t-body); line-height: 1.4; color: var(--c-ink); }
.qr-done-trust, .qr-done-mail {
    position: relative; margin: 0 0 8px; padding-left: 26px;
    font-size: var(--t-small); line-height: 1.5; color: var(--c-muted);
}
.qr-done-trust i, .qr-done-mail i, .qr-done-trust .et-i, .qr-done-mail .et-i { position: absolute; left: 0; top: 0.3em; color: var(--c-bronze); font-size: 0.8rem; }
.qr-done-trust b { color: var(--c-ink); }
.qr-done-gold .et-seal { color: var(--c-gold); }

/* The Concierge mark, sized for the places it sits inside a line. */
.qr-premier-logo-lg { display: grid; margin: 0 auto 16px; }
.qr-premier-logo-sm { width: 28px; height: 28px; font-size: 0.7rem; }

/* ============================================================
   YOUR REQUESTS (and the dashboard's request cards)
   ============================================================ */
.qr-list-page { max-width: calc(860px + var(--pad) * 2); }
.qr-list-head { margin-bottom: clamp(28px, 4vw, 44px); }
.qr-list-head h1 { font-size: var(--t-display); }
.qr-list-head .qr-eyebrow { margin: 0 0 8px; font-size: var(--t-body); font-weight: 600; color: var(--c-bronze); }
.qr-list { display: grid; gap: 14px; }
.qr-req-card {
    padding: 22px 24px; border-radius: var(--r-md);
    background: var(--c-bg-alt);
}
.qr-req-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.qr-req-head > div { min-width: 0; }
.qr-req-title { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; color: var(--c-ink); }
.qr-req-meta { margin-top: 4px; font-size: var(--t-small); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.qr-req-update { margin-top: 12px; font-size: var(--t-small); line-height: 1.45; color: var(--c-ink-2); }
.qr-req-actions { margin-top: 16px; }
.qr-badge {
    display: inline-block; flex: 0 0 auto; padding: 5px 12px; border-radius: var(--r-pill);
    background: var(--c-bg); color: var(--c-ink-2);
    font-size: var(--t-micro); font-weight: 600; white-space: nowrap;
}
.qr-badge-action { background: var(--c-warn-bg); color: var(--c-link); }
.qr-badge-done { background: var(--c-success-bg); color: var(--c-success); }
.qr-badge-off { background: var(--c-bg-alt-2); color: var(--c-muted); }
.qr-empty {
    padding: clamp(36px, 5vw, 56px) 24px; border-radius: var(--r-lg);
    background: var(--c-bg-alt); text-align: center;
}
.qr-empty p { margin-bottom: 18px; font-size: var(--t-lead); color: var(--c-ink); }
/* The empty state: the outline of the arch mark. */
.qr-empty-mark { display: block; width: 48px; height: 48px; margin: 0 auto 14px; stroke-width: 0.75; color: var(--c-gold); --et-i-accent: transparent; }
@media (max-width: 480px) {
    .qr-req-head { flex-direction: column; gap: 10px; }
}

/* ============================================================
   REQUEST STATUS. One headline, the state in words, then quiet
   sand panels for each thing to read or do.
   Scoped to .xr-page so explore.css's form rules stay untouched.
   ============================================================ */
.xr-page { max-width: calc(860px + var(--pad) * 2); }
.xr-page .xr-head { margin-bottom: clamp(24px, 3.5vw, 40px); }
.xr-page .xr-eyebrow { margin-bottom: 8px; font-size: var(--t-body); font-weight: 600; color: var(--c-bronze); }
.xr-page .xr-h1 { font-size: var(--t-display); line-height: 1.07; }
.xr-page .xr-status {
    display: flex; align-items: center; gap: 10px; margin-top: 14px;
    font-size: var(--t-lead); line-height: 1.38; color: var(--c-ink-2);
}
.xr-page .xr-status::before {
    content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
    background: var(--c-gold); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22);
}

.xr-page .xp-note {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 0 0 16px; padding: 14px 18px; border: 0; border-radius: var(--r-sm);
    background: var(--c-bg-alt); color: var(--c-ink); font-size: var(--t-small); line-height: 1.5;
}
.xr-page .xp-note i, .xr-page .xp-note .et-i { flex: 0 0 auto; margin-top: 3px; color: var(--c-ink); }
.xr-page .xp-note-warm { background: var(--c-warn-bg); }
.xr-page .xp-note-warm i, .xr-page .xp-note-warm .et-i { color: var(--c-bronze); }

.xr-page .xr-card {
    margin: 0 0 16px; padding: clamp(22px, 3vw, 32px);
    border: 0; border-radius: var(--r-lg); background: var(--c-bg-alt); box-shadow: none;
}
.xr-page .xr-card h2 {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 16px; padding: 0; font-size: 1.5rem; line-height: 1.17; color: var(--c-ink);
}
.xr-page .xr-card h2 i, .xr-page .xr-card h2 .et-i { color: var(--c-success); }
.xr-page .xr-card .qr-help { margin-top: 0; }

/* The facts of the request, as rows. */
.xr-page .xr-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 0; }
/* A note inside a sand panel sits on white, so it still reads as a note. */
.xr-page .xr-card .xp-note, .xr-page .xr-card .qr-notice { background: var(--c-bg); }
.xr-page .xr-summary dt, .xr-page .xr-summary dd {
    padding: 12px 0; border-top: 1px solid var(--c-line-2);
    font-size: var(--t-body); text-transform: none; letter-spacing: -0.022em;
}
.xr-page .xr-summary dt { padding-right: 20px; font-weight: 400; color: var(--c-muted); }
.xr-page .xr-summary dd { margin: 0; text-align: right; font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.xr-page .xr-summary dt:first-of-type, .xr-page .xr-summary dd:first-of-type { border-top: 0; }

/* The Concierge journey: a black panel, the Flight Path, and the seven
   human steps under it. */
.xr-page .xr-journey-flight { margin: 0 0 18px; }
.xr-page .xr-premier-card { background: var(--c-espresso); color: var(--c-on-dark); }
.xr-page .xr-journey-brand {
    display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
    font-size: var(--t-body); font-weight: 600; color: var(--c-gold-light);
}
.xr-page .xr-journey-brand .et-premier-mark { width: 36px; height: 36px; font-size: 0.85rem; }
.xr-journey {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0;
    margin: 0; padding: 0; list-style: none; counter-reset: xr-step;
}
.xr-journey li {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 0 4px; text-align: center;
    font-size: var(--t-micro); line-height: 1.3; color: var(--c-on-dark-2);
}
.xr-journey li::before {
    content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px;
    background: rgba(255, 255, 255, 0.16); z-index: 0;
}
.xr-journey li:first-child::before { display: none; }
.xr-journey li.is-done::before, .xr-journey li.is-now::before { background: var(--c-gold); }
/* Each step's mark: an arch-check when done, a gold dot ringed in gold
   when current, a faint dot ahead. Nothing pulses. */
.xr-journey li .et-i, .xr-journey .xr-dot {
    position: relative; z-index: 1; flex: 0 0 auto; width: 20px; height: 20px;
    color: rgba(255, 255, 255, 0.3); background: var(--c-espresso); border-radius: 50%;
}
.xr-journey .xr-dot::after {
    content: ""; position: absolute; inset: 6px; border-radius: 50%; background: currentColor;
}
.xr-journey li.is-done { color: var(--c-on-dark); }
.xr-journey li.is-done .et-i { color: var(--c-gold); }
.xr-journey li.is-now { color: #fff; font-weight: 600; }
.xr-journey li.is-now .xr-dot { color: var(--c-gold-light); box-shadow: inset 0 0 0 1.5px var(--c-gold); }
.xr-page .xr-premier-card .xr-journey-note { margin-top: 22px; font-size: var(--t-small); color: var(--c-on-dark-2); }
/* On a phone the seven steps sit two to a row under the Flight Path,
   rather than one long column. */
@media (max-width: 734px) {
    .xr-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
    .xr-journey li { flex-direction: row; align-items: center; gap: 10px; padding: 0; text-align: left; font-size: var(--t-small); }
    .xr-journey li::before { display: none; }
}

.xr-page .xr-plan-note { white-space: pre-line; font-size: var(--t-body); line-height: 1.55; color: var(--c-ink); }
.xr-plan-h { margin: 22px 0 8px; font-size: 1.1875rem; color: var(--c-ink); }

/* Tables: hairline rows, figures on the right. */
.xr-page .xr-quote-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.xr-page .xr-quote-table th, .xr-page .xr-quote-table td {
    padding: 12px 0; border-top: 1px solid var(--c-line-2);
    font-size: var(--t-small); font-weight: 400; color: var(--c-ink); vertical-align: top;
}
.xr-page .xr-quote-table th { padding-right: 16px; text-align: left; }
.xr-page .xr-quote-table td { text-align: right; font-weight: 600; white-space: nowrap; }
.xr-page .xr-quote-table thead th { border-top: 0; font-size: var(--t-micro); font-weight: 600; color: var(--c-muted); }
.xr-page .xr-quote-table tbody tr:first-child th, .xr-page .xr-quote-table tbody tr:first-child td { border-top: 0; }
.xr-page .xr-quote-table thead + tbody tr:first-child th,
.xr-page .xr-quote-table thead + tbody tr:first-child td { border-top: 1px solid var(--c-line-2); }
.xr-page .xr-quote-total th, .xr-page .xr-quote-total td {
    padding-top: 16px; border-top: 1px solid var(--c-ink);
    font-size: var(--t-body); font-weight: 600;
}
.xr-page .xr-quote-note { margin-top: 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--c-muted); }
.xr-page .xr-quote-table a { color: var(--c-link); }
.xr-expense-table th, .xr-expense-table td { font-size: var(--t-small); }
.xr-page .xr-table-wrap { position: relative; overflow-x: auto; }
.xr-page .xr-expense-table { min-width: 520px; }

/* Choosing a Local Host: plain selectable rows, a ring and a tick when chosen. */
.qr-options { display: grid; gap: 12px; margin: 16px 0; }
.qr-option {
    position: relative;
    display: flex; gap: 16px; align-items: flex-start; width: 100%;
    padding: 18px 48px 18px 18px; border: 1px solid var(--c-line-2); border-radius: var(--r-md);
    background: var(--c-bg); color: var(--c-ink); text-align: left; cursor: pointer;
    transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.qr-option:hover { border-color: rgba(37, 99, 235, 0.55); }
.qr-option:focus-visible { outline: none; box-shadow: var(--ring); }
.qr-option[aria-pressed="true"] { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.qr-option[aria-pressed="true"]::after {
    content: ""; position: absolute; top: 18px; right: 18px; width: 18px; height: 18px;
    background: var(--c-ink);
    -webkit-mask: var(--et-i-check) center / contain no-repeat; mask: var(--et-i-check) center / contain no-repeat;
}
/* The face in the arch frame of the mark. */
.qr-option-photo {
    flex: 0 0 auto; width: 60px; height: 60px; border-radius: 30px;
    object-fit: cover; background: var(--c-bg-alt-2);
}
.qr-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qr-option-name { font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); }
.qr-option-facts { margin-top: 4px; font-size: 0.8125rem; line-height: 1.55; color: var(--c-muted); }
.qr-option-why { margin-top: 8px; font-size: var(--t-small); line-height: 1.45; color: var(--c-ink-2); }
.qr-option-price { font-weight: 600; white-space: nowrap; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.qr-verified { font-weight: 600; color: var(--c-success); }

.xr-page .xr-matches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 16px 0; }
.xr-page .xr-match {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px; border: 1px solid var(--c-line-2); border-radius: var(--r-md);
    background: var(--c-bg); cursor: pointer;
}
.xr-page .xr-match:has(input:checked) { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.xr-page .xr-match input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-ink); flex: 0 0 auto; }
.xr-page .xr-why { color: var(--c-link); }
.xr-page .xr-team {
    display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 4px 0 12px;
    font-size: var(--t-body); font-weight: 400; color: var(--c-ink); cursor: pointer;
}
.xr-page .xr-team input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--c-ink); }
.xr-page .xr-assignment {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    padding: 14px 0; border-bottom: 1px solid var(--c-line-2);
}
.xr-page .xr-assignment:last-child { border-bottom: 0; }
.xr-page .xr-assignment .chip { padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-warn-bg); color: var(--c-link); font-size: var(--t-micro); font-weight: 600; }
.xr-page .xr-state { font-size: var(--t-small); color: var(--c-muted); }
.xr-page .xr-empty { font-size: var(--t-small); color: var(--c-muted); }

.xr-page .xr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 0; }
.xr-page .xr-actions .pg-btn { min-height: 48px; font-weight: 400; }
.xr-page .xr-actions .pg-btn-ghost { background: var(--c-bg); border-color: var(--c-line-2); }
.xr-page .xr-actions .pg-btn-ghost:hover { border-color: var(--c-ink); color: var(--c-ink); }
.xr-page .xr-actions + .qr-help { margin-top: 12px; }
.xr-page .xr-actions--end { justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
.xr-page .xr-actions--end .pg-btn-ghost {
    min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--c-danger);
}
.xr-page .xr-actions--end .pg-btn-ghost:hover { background: transparent; text-decoration: underline; color: var(--c-danger); }
.xr-page .xr-form-error {
    margin-top: 16px; padding: 14px 18px; border-radius: var(--r-sm);
    background: var(--c-danger-bg); color: var(--c-danger); font-size: var(--t-small); font-weight: 600;
}
.xr-page #xrFollowUpFields { margin: 16px 0 8px; }
.xr-page #xrFollowUpFields .qr-field { margin-bottom: 18px; }
.xr-page #xrFollowUpFields .qr-label { font-size: var(--t-small); margin-bottom: 8px; }
@media (max-width: 734px) {
    .xr-page .xr-actions .pg-btn { flex: 1 1 100%; }
    .xr-page .xr-actions--end .pg-btn-ghost { flex: 0 0 auto; }
    .qr-option { padding: 16px 44px 16px 14px; gap: 12px; flex-wrap: wrap; }
    .qr-option-photo { width: 50px; height: 50px; border-radius: 25px; }
}

/* ============================================================
   CONCIERGE EXPENSES (the assigned Concierge Host's log). A
   working tool on a phone: plain panels, big fields, one gold Add.
   ============================================================ */
.pxp-page { max-width: calc(860px + var(--pad) * 2); }
.pxp-page .pxp-head { margin-bottom: clamp(26px, 4vw, 44px); }
.pxp-page .pxp-eyebrow {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    font-size: var(--t-body); font-weight: 600; color: var(--c-bronze);
}
.pxp-page .pxp-h1 { font-size: var(--t-display); line-height: 1.07; }
.pxp-page .pxp-lead { max-width: 52ch; margin-top: 14px; font-size: var(--t-lead); line-height: 1.38; color: var(--c-muted); }
.pxp-page .pxp-loading { padding: 24px; border-radius: var(--r-lg); background: var(--c-bg-alt); }
.pxp-page .pg-card { border: 0; border-radius: var(--r-lg); background: var(--c-bg-alt); box-shadow: none; padding: clamp(22px, 3vw, 32px); }
.pxp-req { margin-bottom: 16px; }
.pxp-req h2 { margin: 0 0 2px; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pxp-meta { margin: 0 0 16px; font-size: var(--t-small); color: var(--c-muted); }
.pxp-page .pxp-table-wrap { position: relative; overflow-x: auto; }
.pxp-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.pxp-table th, .pxp-table td { padding: 12px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line-2); }
.pxp-table th { font-size: var(--t-micro); font-weight: 600; color: var(--c-muted); }
.pxp-table th:first-child, .pxp-table td:first-child { padding-left: 0; }
.pxp-table tbody tr:last-child td { border-bottom: 0; }
.pxp-table .amt { text-align: right; white-space: nowrap; }
.pxp-table td.amt { font-weight: 600; }
.pxp-status { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--t-micro); font-weight: 600; }
.pxp-status.recorded { background: var(--c-warn-bg); color: var(--c-link); }
.pxp-status.verified { background: var(--c-success-bg); color: var(--c-success); }
.pxp-status.rejected { background: var(--c-danger-bg); color: var(--c-danger); }
.pxp-add {
    display: grid; gap: 14px; margin-top: 20px; padding-top: 20px;
    border-top: 1px solid var(--c-line-2);
}
.pxp-add .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.pxp-add label { display: grid; gap: 6px; min-width: 0; font-size: var(--t-small); font-weight: 600; color: var(--c-ink); }
.pxp-add input, .pxp-add select {
    width: 100%; min-width: 0; min-height: 52px; padding: 14px 16px;
    border: 1px solid var(--c-line-2); border-radius: var(--r-sm);
    background-color: var(--c-bg); color: var(--c-ink);
    font: inherit; font-size: var(--t-body); font-weight: 400;
}
.pxp-add select {
    -webkit-appearance: none; appearance: none; padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%231d1a17' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 17px center; background-size: 12px 8px;
}
.pxp-add input[type="file"] { padding: 12px; font-size: var(--t-small); }
.pxp-add input:focus, .pxp-add select:focus { outline: none; border-color: var(--c-bronze); box-shadow: var(--ring); }
.pxp-add .pg-btn { justify-self: start; min-height: 52px; padding: 14px 30px; font-weight: 400; }
.pxp-note { font-size: 0.8125rem; color: var(--c-muted); }
.pxp-del {
    min-height: 32px; padding: 0 4px; border: 0; background: none; cursor: pointer;
    font-size: var(--t-small); color: var(--c-danger);
}
.pxp-del:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .pxp-add .row { grid-template-columns: minmax(0, 1fr); }
    .pxp-add .pg-btn { justify-self: stretch; }
}