/* Estimate Flow — frontend styles (customer dashboard + submission form) */

/* Use the same brand tokens as admin (loaded via tokens.css). */

/*
 * CASCADE-DEFENSE SCOPING (v3.7.1)
 * --------------------------------
 * Every shortcode wrapper carries the shared `.swgef-fe-root` class. ALL
 * interactive-element rules (buttons, tabs, links, inputs, anything with a
 * :hover/:focus/:active state) MUST be scoped under `.swgef-fe-root` so they
 * win the cascade against arbitrary host-theme styles.
 *
 * Why: a bare-class selector like `.swgef-fe-button:hover` has specificity
 * (0,2,0). A typical theme's content-link rule `.entry-content a:hover` is
 * (0,2,1) — it WINS, overriding our color while our background still applies,
 * producing unreadable text. Prefixing with `.swgef-fe-root ` lifts our rule
 * to (0,3,0), which beats realistic theme selectors.
 *
 * Non-interactive rules (KPI tiles, status pills, layout) don't need scoping —
 * themes don't share our class names and these have no hover states.
 *
 * See root CLAUDE.md → "Frontend shortcode CSS cascade-defense rule".
 */

.swgef-customer-dashboard,
.swgef-submit-form-wrap,
.swgef-add-files-form-wrap {
    color: var(--swg-text);
    background: var(--swg-bg);
    max-width: 1200px; /* v3.25.0 — wider SaaS layout (was 960px) */
    margin: 0 auto;
    padding: 16px 0;
    font-family: inherit;
}
.swgef-customer-dashboard *,
.swgef-submit-form-wrap *,
.swgef-add-files-form-wrap * {
    box-sizing: border-box;
}

.swgef-fe-heading {
    color: var(--swg-accent-dark);
    margin: 0 0 16px;
    font-weight: 600;
}
.swgef-fe-subheading {
    color: var(--swg-accent-dark);
    margin: 32px 0 12px;
    font-size: 18px;
    font-weight: 600;
}

/* ============================================================
   KPI tiles (frontend) — v3.25.0 colored SaaS tiles w/ icon chips
   (matches the admin dashboard: a per-metric hue icon container on the
   left, label + big slate value on the right)
   ============================================================ */
.swgef-fe-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.swgef-fe-root .swgef-fe-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--swg-bg);
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-lg);
    box-shadow: var(--swg-shadow-sm);
    transition: box-shadow 120ms ease, transform 120ms ease;
}
.swgef-fe-root .swgef-fe-kpi:hover {
    box-shadow: var(--swg-shadow);
    transform: translateY(-1px);
}
.swgef-fe-kpi-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: var(--swg-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;            /* white icon on a bright hue chip (decorative) */
    background: var(--swg-c-blue);
}
.swgef-fe-kpi-icon svg { width: 23px; height: 23px; display: block; }
.swgef-fe-kpi-blue   .swgef-fe-kpi-icon { background: var(--swg-c-blue); }
.swgef-fe-kpi-amber  .swgef-fe-kpi-icon { background: var(--swg-c-amber); }
.swgef-fe-kpi-purple .swgef-fe-kpi-icon { background: var(--swg-c-purple); }
.swgef-fe-kpi-green  .swgef-fe-kpi-icon { background: var(--swg-c-green); }
.swgef-fe-kpi-cyan   .swgef-fe-kpi-icon { background: var(--swg-c-cyan); }
/* v3.64.0 — orange chip so the client's "Needs your action" tile carries the
   same hue as the "Action required from Client" pill it links to. */
.swgef-fe-kpi-orange .swgef-fe-kpi-icon { background: var(--swg-c-orange); }
.swgef-fe-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
/* .swgef-fe-kpi-label / -value text styling comes from the scoped reskin rules
   further down (.swgef-fe-root .swgef-fe-kpi-label / -value). Only the negative
   override needs to live here (higher specificity → wins for red balance). */
.swgef-fe-kpi.is-negative .swgef-fe-kpi-value { color: var(--swg-error-dark); }

/* v3.25.1 — linkable KPI tiles (agency Pattern 39). Tiles with a destination
   render as <a>; keep the card look (no underline, inherit text color) and add
   an interactive hover + keyboard focus affordance. */
.swgef-fe-root a.swgef-fe-kpi {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.swgef-fe-root a.swgef-fe-kpi:hover { border-color: var(--swg-accent); }
.swgef-fe-root a.swgef-fe-kpi:focus-visible {
    outline: none;
    box-shadow: var(--swg-focus-ring);
    border-color: var(--swg-accent);
}

/* Primary actions zone — v3.25.0: a clear cobalt pill for every key action */
.swgef-fe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 24px;
}
.swgef-fe-root .swgef-fe-actions .swgef-fe-button { flex: 0 0 auto; }
@media (max-width: 520px) {
    .swgef-fe-actions { flex-direction: column; }
    .swgef-fe-root .swgef-fe-actions .swgef-fe-button { width: 100%; text-align: center; }
}

/* ============================================================
   Subscription panel (v2.0.0)
   ============================================================ */
.swgef-fe-subscription {
    background: var(--swg-surface);
    border: 1px solid var(--swg-line);
    border-radius: 6px;
    padding: 16px 24px;
    margin: 0 0 24px;
}
.swgef-fe-subscription-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
}
.swgef-fe-subscription-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.swgef-fe-subscription-label {
    color: var(--swg-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.swgef-fe-subscription-value {
    color: var(--swg-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}
.swgef-fe-subscription-rate {
    display: inline-block;
    margin-left: 8px;
    color: var(--swg-muted);
    font-size: 13px;
    font-weight: 400;
}
.swgef-fe-subscription-action {
    flex: 0 0 auto;
}

/* ============================================================
   CTA + buttons
   ============================================================ */
.swgef-fe-cta {
    margin: 0 0 24px;
}
/* Buttons — cascade-defense scoped under .swgef-fe-root. The :hover/:focus
   colors MUST win over theme content-link styles (see header comment). */
.swgef-fe-root .swgef-fe-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: var(--swg-bg);
    color: var(--swg-accent-dark);
    border: 1px solid var(--swg-accent-dark);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
    min-height: 44px;
    transition: background 120ms ease, color 120ms ease;
}
/* v3.36.1 — the frontend button is already inline-flex + centered (above), so ANY
   icon inside it is centered with the label. Defensive: normalise a WP dashicon
   (default 20px) to 16px so it can't oversize — symmetric with the admin rule. */
.swgef-fe-root .swgef-fe-button .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}
.swgef-fe-root .swgef-fe-button:hover,
.swgef-fe-root .swgef-fe-button:focus {
    background: var(--swg-accent-dark);
    color: #fff;
    text-decoration: none;
}
.swgef-fe-root .swgef-fe-button-primary {
    background: var(--swg-accent-dark);
    color: #fff;
}
.swgef-fe-root .swgef-fe-button-primary:hover,
.swgef-fe-root .swgef-fe-button-primary:focus {
    background: #155778;
    color: #fff;
}
.swgef-fe-root .swgef-fe-button[disabled],
.swgef-fe-root .swgef-fe-button-primary[disabled],
.swgef-fe-root .swgef-fe-button.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
/* v3.42.0 — note under a vehicle whose primary Buy buttons are locked. */
.swgef-fe-root .swgef-fe-buy-note {
    display: block;
    margin-top: 6px;
    font-size: 13px;
}

/* v3.53.0 — persistent cart bar: shows on every portal tab when the cart has
   items so the client can review and check out anytime. Matches the primary
   button (cobalt bg, white text). */
.swgef-fe-root .swgef-fe-cart-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 12px 16px;
    min-height: 44px;
    border-radius: 10px;
    background: var(--swg-accent-dark);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.swgef-fe-root .swgef-fe-cart-bar:hover,
.swgef-fe-root .swgef-fe-cart-bar:focus {
    background: #155778;
    color: #fff;
    text-decoration: none;
}
.swgef-fe-root .swgef-fe-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.swgef-fe-root .swgef-fe-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #fff;
    color: var(--swg-accent-dark);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
}
.swgef-fe-root .swgef-fe-cart-text { flex: 1 1 auto; }
.swgef-fe-root .swgef-fe-cart-cta {
    flex: 0 0 auto;
    text-decoration: underline;
    white-space: nowrap;
}

/* v3.43.0 — portal list search bar (Vehicles / Documents / Submissions). */
.swgef-fe-root .swgef-fe-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}
.swgef-fe-root .swgef-fe-search-input,
.swgef-fe-root .swgef-fe-search-select {
    height: 44px;
    padding: 0 12px;
    font-size: 16px; /* >=16px so iOS Safari doesn't auto-zoom on focus */
    border: 1px solid var(--swg-line);
    border-radius: 6px;
    background: var(--swg-bg);
    color: var(--swg-text);
}
.swgef-fe-root .swgef-fe-search-input { flex: 1 1 220px; min-width: 0; }
.swgef-fe-root .swgef-fe-search-select { flex: 0 1 auto; }
.swgef-fe-root .swgef-fe-search-input:focus,
.swgef-fe-root .swgef-fe-search-select:focus {
    outline: 2px solid var(--swg-accent-dark);
    outline-offset: 1px;
}
.swgef-fe-root .swgef-fe-search .swgef-fe-button { flex: 0 0 auto; }
.swgef-fe-root .swgef-fe-search-clear { flex: 0 0 auto; white-space: nowrap; }

/* v3.45.0 — MTRX foundation: per-vehicle Estimate ID inline form. */
.swgef-fe-root .swgef-fe-estimate-form { margin-top: 10px; }
.swgef-fe-root .swgef-fe-estimate-form .swgef-fe-buy-label { display: block; margin-bottom: 4px; }
.swgef-fe-root .swgef-fe-estimate-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swgef-fe-root .swgef-fe-estimate-input {
    flex: 1 1 200px;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    font-size: 16px; /* >=16px so iOS Safari doesn't auto-zoom on focus */
    border: 1px solid var(--swg-line);
    border-radius: 6px;
    background: var(--swg-bg);
    color: var(--swg-text);
}
.swgef-fe-root .swgef-fe-estimate-input:focus { outline: 2px solid var(--swg-accent-dark); outline-offset: 1px; }
.swgef-fe-root .swgef-fe-estimate-status { font-size: 13px; }
.swgef-fe-root .swgef-fe-estimate-note { margin: 6px 0 0; font-size: 13px; }
/* v3.46.0 — VIN auto-decode status line (under the VIN field). */
.swgef-fe-root .swgef-fe-vin-status { margin-top: 6px; font-size: 13px; color: var(--swg-muted); }
.swgef-fe-root .swgef-fe-vin-status.is-ok { color: var(--swg-accent-dark); font-weight: 600; }
.swgef-fe-root .swgef-fe-vin-status.is-warn { color: var(--swg-error); }
.swgef-fe-low-balance {
    padding: 16px;
    background: var(--swg-warning-soft);
    border: 1px solid var(--swg-warning);
    border-radius: 4px;
    color: var(--swg-text);
}
.swgef-fe-root .swgef-fe-low-balance .swgef-fe-button {
    margin-left: 12px;
}

/* ============================================================
   Submission list
   ============================================================ */
.swgef-fe-submissions {
    list-style: none;
    margin: 0;
    padding: 0;
}
.swgef-fe-submission {
    padding: 16px;
    background: var(--swg-bg);
    border: 1px solid var(--swg-line);
    border-radius: 4px;
    margin-bottom: 12px;
}
.swgef-fe-sub-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.swgef-fe-sub-title {
    color: var(--swg-text);
    font-weight: 600;
}
.swgef-fe-sub-owner {
    color: var(--swg-muted);
    font-size: 13px;
    font-weight: 500;
    margin-left: 8px;
}
.swgef-fe-sub-meta {
    color: var(--swg-muted);
    font-size: 13px;
    margin-top: 8px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.swgef-fe-waiting-flag {
    color: var(--swg-warning);
    font-weight: 600;
}

/* ============================================================
   Status pills (frontend)
   ============================================================ */
.swgef-fe-status-pill {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--swg-radius-sm); /* v3.85.1 - was 999px; see admin.css */
    line-height: 1.5;
}
/* v3.64.0 — STATUS MODEL 2.0 palette. Kept byte-identical to the .swgef-fe-root
   block below and to admin.css, because Kyle's requirement is that a status
   looks the SAME to him and to his client. (This unscoped block is the
   pre-reskin fallback; letting it drift from the scoped one is how v3.30.1's
   phantom active-tab bug happened.) */
.swgef-fe-status-pending_review      { background: var(--swg-c-yellow-soft); color: var(--swg-c-yellow-dark); }
.swgef-fe-status-in_progress         { background: var(--swg-c-blue-soft);   color: var(--swg-accent-dark); }
.swgef-fe-status-approved            { background: var(--swg-c-blue-soft);   color: var(--swg-accent-dark); }
.swgef-fe-status-action_shop         { background: var(--swg-error-soft);    color: var(--swg-error-darker); }
.swgef-fe-status-waiting_on_customer { background: var(--swg-c-orange-soft); color: var(--swg-c-orange-dark); }
.swgef-fe-status-awaiting_details    { background: var(--swg-c-orange-soft); color: var(--swg-c-orange-dark); }
.swgef-fe-status-completed           { background: var(--swg-success-soft);  color: var(--swg-success-dark); }
.swgef-fe-status-rejected            { background: var(--swg-surface);       color: var(--swg-body); }

/* v3.67.4 — VEHICLE statuses on the CLIENT side. admin.css has carried these
   four since v3.55.2 but frontend.css never did, so an Archived vehicle showed a
   coloured chip to the shop and bare unstyled text to the client — the same
   both-sides mismatch the client reported for submissions. Values copied from
   admin.css so the two files stay mirrors. */
.swgef-fe-status-active          { background: var(--swg-success-soft); color: var(--swg-success-dark); }
.swgef-fe-status-archived        { background: var(--swg-surface);      color: var(--swg-body); }
.swgef-fe-status-sold            { background: var(--swg-c-blue-soft);  color: var(--swg-accent-dark); }
.swgef-fe-status-decommissioned  { background: var(--swg-surface);      color: var(--swg-body); }

/* ============================================================
   Empty states
   ============================================================ */
.swgef-fe-empty {
    padding: 32px;
    text-align: center;
    color: var(--swg-muted);
    background: var(--swg-surface);
    border-radius: 8px;
    border: 1px dashed var(--swg-line);
}

/* ============================================================
   Credit history (collapsible)
   ============================================================ */
.swgef-fe-credit-history {
    margin-top: 32px;
    padding: 16px;
    background: var(--swg-surface);
    border: 1px solid var(--swg-line);
    border-radius: 8px;
}
.swgef-fe-root .swgef-fe-credit-history summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--swg-accent-dark);
}
.swgef-fe-history-table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
}
.swgef-fe-history-table th,
.swgef-fe-history-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--swg-line);
    font-size: 14px;
}
.swgef-fe-history-table th { color: var(--swg-accent-dark); font-weight: 600; }

/* ============================================================
   Submit form
   ============================================================ */
.swgef-fe-balance-note {
    color: var(--swg-muted);
    margin: 0 0 16px;
}
.swgef-submit-form,
.swgef-add-files-form {
    background: var(--swg-bg);
    padding: 24px;
    border: 1px solid var(--swg-line);
    border-radius: 8px;
}
.swgef-fe-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 24px;
}
.swgef-fe-fieldset legend {
    color: var(--swg-accent-dark);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
    padding: 0;
}
.swgef-fe-fieldset-inner {
    border: 1px solid var(--swg-line);
    border-radius: 4px;
    padding: 12px;
    margin-top: 8px;
}
.swgef-fe-fieldset-inner legend {
    color: var(--swg-text);
    font-weight: 500;
    font-size: 14px;
    padding: 0 6px;
}
.swgef-fe-field {
    display: block;
    margin-bottom: 16px;
}
.swgef-fe-field span {
    display: block;
    margin-bottom: 4px;
    color: var(--swg-text);
    font-weight: 500;
}
/* v3.23.2 — scoped so it beats `.swgef-fe-field span { display:block }` (keeps
   the asterisk inline next to the label) and uses the AA-safe -dark text token. */
.swgef-fe-root .swgef-required { display: inline; color: var(--swg-error-dark); margin-left: 2px; }
.swgef-fe-help {
    color: var(--swg-muted);
    font-size: 13px;
    margin: 0 0 8px;
}

/* v3.23.2 — Public signup form ([swgef_client_signup]): PRG feedback notices +
   iOS autozoom floor. The `.swgef-fe-field input` rule above ships 15px; this
   scoped rule (higher specificity) lifts signup inputs to the 16px floor so the
   inline styles could be removed from the template. */
.swgef-fe-root .swgef-fe-signup .swgef-fe-field input { font-size: 16px; }
.swgef-fe-root .swgef-fe-notice {
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-lg);
}
.swgef-fe-root .swgef-fe-notice p { margin: 0 0 6px; }
.swgef-fe-root .swgef-fe-notice p:last-child { margin-bottom: 0; }
/* v3.68.1 — colour the notice TEXT (the <p>) directly, not just the wrapper.
   The type rules below set colour on the wrapper div, so the <p> got it only by
   inheritance. On /client-signup/ (the one customer page that renders in the
   theme, not app mode) the theme's own p{} colour DIRECTLY matches the <p> and
   overrode the inherited value — the login-failure message showed as the theme's
   white text on our light-red background (Kyle, Basecamp #519032295: "no contrast
   ... make the text black"). These higher-specificity <p> rules beat the theme;
   the error uses the stronger AA token (--swg-error-darker ~5.9:1 on the soft bg). */
.swgef-fe-root .swgef-fe-notice-error p   { color: var(--swg-error-darker); }
.swgef-fe-root .swgef-fe-notice-success p { color: var(--swg-success-dark); }
.swgef-fe-root .swgef-fe-notice-warning p { color: var(--swg-text); }
.swgef-fe-root .swgef-fe-notice-success {
    background: var(--swg-success-soft);
    border-color: var(--swg-success);
    color: var(--swg-success-dark);
}
.swgef-fe-root .swgef-fe-notice-error {
    background: var(--swg-error-soft);
    border-color: var(--swg-error);
    color: var(--swg-error-dark);
}
.swgef-fe-root .swgef-fe-notice-warning {
    background: var(--swg-warning-soft);
    border-color: var(--swg-warning);
    /* v3.25.1 — slate body text (the brand "warning pairs with dark text" rule).
       --swg-warning-dark was 4.73:1 (passes AA but tight); slate is ~16:1. The
       amber border + soft bg + bold lead keep it clearly a warning. */
    color: var(--swg-text);
}
.swgef-fe-root .swgef-fe-field input[type="text"],
.swgef-fe-root .swgef-fe-field input[type="number"],
.swgef-fe-root .swgef-fe-field input[type="email"],
.swgef-fe-root .swgef-fe-field input[type="tel"],
.swgef-fe-root .swgef-fe-field input[type="password"],
.swgef-fe-root .swgef-fe-field select,
.swgef-fe-root .swgef-fe-field textarea,
.swgef-fe-root .swgef-fe-fieldset > input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--swg-line);
    border-radius: 4px;
    background: var(--swg-bg);
    color: var(--swg-text);
    font-size: 15px;
    font-family: inherit;
    min-height: 44px;
}
/* v3.71.0 — signup password field: eyeball show/hide toggle + live strength /
   match / email feedback (Basecamp #519319819 / 796 / 842 / 318638). */
.swgef-fe-root .swgef-fe-pw-wrap { position: relative; display: block; }
.swgef-fe-root .swgef-fe-pw-wrap input[type="password"],
.swgef-fe-root .swgef-fe-pw-wrap input[type="text"] { padding-right: 46px; }
.swgef-fe-root .swgef-fe-pw-eye {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0;
    background: transparent; border: 0; border-radius: 4px;
    color: var(--swg-muted); cursor: pointer;
}
.swgef-fe-root .swgef-fe-pw-eye:hover,
.swgef-fe-root .swgef-fe-pw-eye:focus-visible { color: var(--swg-accent-dark); }
.swgef-fe-root .swgef-fe-pw-req,
.swgef-fe-root .swgef-fe-pw-match,
.swgef-fe-root .swgef-fe-inline-err { display: block; margin-top: 4px; }
.swgef-fe-root .swgef-fe-pw-req.is-met,
.swgef-fe-root .swgef-fe-pw-match.is-met { color: var(--swg-success-dark); }
.swgef-fe-root .swgef-fe-pw-req.is-unmet,
.swgef-fe-root .swgef-fe-pw-match.is-unmet,
.swgef-fe-root .swgef-fe-inline-err { color: var(--swg-error-dark); }
.swgef-fe-root .swgef-fe-field input:focus,
.swgef-fe-root .swgef-fe-field select:focus,
.swgef-fe-root .swgef-fe-field textarea:focus,
.swgef-fe-root .swgef-fe-fieldset > input[type="file"]:focus {
    outline: 2px solid var(--swg-accent);
    outline-offset: -1px;
    border-color: var(--swg-accent);
}
.swgef-fe-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
    margin-bottom: 8px;
    color: var(--swg-text);
    cursor: pointer;
    min-height: 32px;
}
.swgef-fe-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.swgef-fe-submit-row {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.swgef-fe-submit-status {
    margin: 0;
    color: var(--swg-text);
    font-size: 14px;
}
.swgef-fe-submit-status.is-error {
    color: var(--swg-error);
    font-weight: 500;
}
.swgef-fe-submit-status.is-success {
    color: var(--swg-success);
    font-weight: 500;
}

/* ============================================================
   Add-files form (waiting_on_customer)
   ============================================================ */
.swgef-fe-admin-message {
    padding: 16px;
    background: var(--swg-warning-soft);
    border: 1px solid var(--swg-warning);
    border-radius: 4px;
    margin-bottom: 16px;
}
.swgef-fe-admin-message strong { color: var(--swg-text); }

.swgef-fe-low-balance-card {
    padding: 32px;
    background: var(--swg-warning-soft);
    border: 1px solid var(--swg-warning);
    border-radius: 8px;
    text-align: center;
}
.swgef-fe-low-balance-card h3 {
    color: var(--swg-text);
    margin: 0 0 12px;
}

/* ============================================================
   Waiting-on-customer callout (Phase 7)
   ============================================================ */
.swgef-fe-waiting-callout {
    padding: 16px 20px;
    background: var(--swg-warning-soft);
    border: 1px solid var(--swg-warning);
    border-radius: 4px;
    margin-bottom: 16px;
    color: var(--swg-text);
}
.swgef-fe-waiting-callout h3 {
    color: var(--swg-text);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 599px) {
    .swgef-fe-kpis { grid-template-columns: 1fr; }
    .swgef-fe-sub-row { flex-direction: column; align-items: flex-start; }
    .swgef-submit-form,
    .swgef-add-files-form { padding: 16px; }
}

/* ============================================================
   v3.0.0 Step 4 (v2.0.5) — Tabbed customer dashboard
   ============================================================ */
.swgef-fe-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--swg-line);
    margin: 16px 0 24px;
}
.swgef-fe-root .swgef-fe-tab {
    display: inline-block;
    padding: 10px 16px;
    color: var(--swg-muted);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    min-height: 44px;
    line-height: 1.4;
    transition: color 120ms, border-color 120ms;
}
.swgef-fe-root .swgef-fe-tab:hover,
.swgef-fe-root .swgef-fe-tab:focus {
    color: var(--swg-accent-dark);
    text-decoration: none;
}
.swgef-fe-root .swgef-fe-tab.is-active {
    color: var(--swg-accent-dark);
    font-weight: 600;
}

.swgef-fe-tab-panel {
    /* Tabs already provide visual separation; panel just needs spacing. */
    padding: 0;
}

.swgef-fe-section-actions {
    display: flex;
    justify-content: flex-start; /* v3.25.1 — was flex-end; the right-aligned Add button looked off */
    margin: 0 0 16px;
}

.swgef-fe-filter-notice {
    background: var(--swg-accent-soft);
    border: 1px solid var(--swg-accent);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    color: var(--swg-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.swgef-fe-root .swgef-fe-link {
    color: var(--swg-accent-dark);
    text-decoration: none;
    font-weight: 500;
}
.swgef-fe-root .swgef-fe-link:hover { text-decoration: underline; }

.swgef-fe-muted { color: var(--swg-muted); font-size: 13px; }

/* Inline forms (Add Vehicle / Upload Document) */
.swgef-fe-instance-form,
.swgef-fe-document-form {
    background: var(--swg-surface);
    border: 1px solid var(--swg-line);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 0 0 24px;
}
.swgef-fe-form-row {
    margin-bottom: 12px;
}
.swgef-fe-form-row label {
    display: block;
    font-weight: 600;
    color: var(--swg-text);
    margin-bottom: 4px;
    font-size: 14px;
}
/* v4.9.0 — tel, email, date and textarea joined this list. They were
   missing, so the existing date-of-loss field on the add-vehicle form
   had been rendering as a bare browser default since v3.11.1. An
   enumerated type list silently drops any type added later; these four
   are every type the plugin's front-end forms currently use. */
.swgef-fe-root .swgef-fe-form-row input[type=text],
.swgef-fe-root .swgef-fe-form-row input[type=number],
.swgef-fe-root .swgef-fe-form-row input[type=file],
.swgef-fe-root .swgef-fe-form-row input[type=tel],
.swgef-fe-root .swgef-fe-form-row input[type=email],
.swgef-fe-root .swgef-fe-form-row input[type=date],
.swgef-fe-root .swgef-fe-form-row textarea,
.swgef-fe-root .swgef-fe-form-row select {
    width: 100%;
    max-width: 360px;
    padding: 8px 10px;
    border: 1px solid var(--swg-line);
    border-radius: 4px;
    font-size: 15px;
    background: var(--swg-bg);
    color: var(--swg-text);
    font-family: inherit;
    min-height: 44px;
}
.swgef-fe-form-status {
    display: inline-block;
    margin-left: 12px;
    font-size: 13px;
    /* v3.67.6 — this span now carries raw FILE NAMES (v3.67.5). An inline-block
       shrinks to fit its content, and a name like
       IMG_20260722_front_left_quarter_panel.heic has no break opportunity, so it
       pushed past the container and broke the 390px no-horizontal-overflow rule.
       anywhere lets it wrap mid-token; max-width keeps it inside its parent. */
    max-width: 100%;
    overflow-wrap: anywhere;
}
.swgef-fe-form-status.is-error   { color: var(--swg-error); }
.swgef-fe-form-status.is-success { color: var(--swg-success); }

/* Vehicle list (My Vehicles tab) */
.swgef-fe-vehicle-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.swgef-fe-vehicle {
    padding: 14px 16px;
    background: var(--swg-bg);
    border: 1px solid var(--swg-line);
    border-radius: 6px;
    margin-bottom: 8px;
}
.swgef-fe-vehicle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.swgef-fe-vehicle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.swgef-fe-vehicle-owner {
    color: var(--swg-muted);
    font-size: 13px;
    font-weight: 500;
}
.swgef-fe-vehicle-vin {
    color: var(--swg-muted);
    font-size: 12px;
    font-family: ui-monospace, monospace;
}
.swgef-fe-vehicle-meta {
    margin-top: 8px;
    font-size: 14px;
}

/* Document list (Documents tab) */
.swgef-fe-document-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.swgef-fe-document {
    padding: 12px 16px;
    background: var(--swg-bg);
    border: 1px solid var(--swg-line);
    border-radius: 6px;
    margin-bottom: 8px;
}
.swgef-fe-root .swgef-fe-doc-link {
    color: var(--swg-accent-dark);
    text-decoration: none;
}
.swgef-fe-root .swgef-fe-doc-link:hover { text-decoration: underline; }
.swgef-fe-document-meta {
    margin-top: 6px;
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    flex-wrap: wrap;
}

/* v3.41.0 — Delete-document button (two-step inline confirm). */
.swgef-fe-root .swgef-fe-doc-delete {
    margin-left: auto;
    background: var(--swg-bg);
    color: var(--swg-error);
    border: 1px solid var(--swg-error);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.swgef-fe-root .swgef-fe-doc-delete:hover { background: var(--swg-surface); }
.swgef-fe-root .swgef-fe-doc-delete.is-armed {
    background: var(--swg-error);
    color: var(--swg-bg);
}
.swgef-fe-root .swgef-fe-doc-delete[disabled] { opacity: 0.6; cursor: default; }

/* v3.51.0 — Generic inline-delete button (vehicle, submission) — mirrors the doc-delete. */
.swgef-fe-root .swgef-fe-inline-delete {
    background: var(--swg-bg);
    color: var(--swg-error);
    border: 1px solid var(--swg-error);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.swgef-fe-root .swgef-fe-inline-delete:hover { background: var(--swg-surface); }
.swgef-fe-root .swgef-fe-inline-delete.is-armed { background: var(--swg-error); color: var(--swg-bg); }
.swgef-fe-root .swgef-fe-inline-delete[disabled] { opacity: 0.6; cursor: default; }
/* v3.55.0 — Archive & Restore reuse the inline two-step-confirm handler but are
   non-destructive, so they read calm cobalt (not the red Delete treatment) and
   arm to a cobalt fill on confirm. Token-only, WCAG-AA (white on accent-dark). */
.swgef-fe-root .swgef-fe-inline-archive,
.swgef-fe-root .swgef-fe-inline-restore {
    color: var(--swg-accent-dark);
    border-color: var(--swg-accent-dark);
}
.swgef-fe-root .swgef-fe-inline-archive.is-armed,
.swgef-fe-root .swgef-fe-inline-restore.is-armed {
    background: var(--swg-accent-dark);
    color: var(--swg-bg);
    border-color: var(--swg-accent-dark);
}
/* v3.55.0 — My Vehicles heading + the "Show archived / Back to active" toggle. */
.swgef-fe-root .swgef-fe-vehicles-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
/* v3.61.0 — VIN camera scan overlay. Mounted on <body> (outside .swgef-fe-root),
   so these classes are deliberately UNSCOPED — scoping them under the portal
   root would silently unstyle the overlay (the v3.55.2 scope lesson). rgba only,
   no new hex. */
.swgef-vin-cam-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
}
.swgef-vin-cam-hint {
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
    text-align: center;
    max-width: 480px;
    margin: 0;
}
.swgef-vin-cam-video {
    width: min(92vw, 640px);
    max-height: 60vh;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
}
.swgef-vin-cam-cancel {
    min-height: 44px;
    padding: 10px 28px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    cursor: pointer;
}

/* v3.60.0 — Physical Inspection market selector (select-markets only). The
   panel sits inside the flex buy row, so full-basis drops it to its own line. */
.swgef-fe-root .swgef-fe-market-panel {
    flex-basis: 100%;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--swg-line);
    border-radius: 8px;
    background: var(--swg-surface);
}
.swgef-fe-root .swgef-fe-market-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
.swgef-fe-root .swgef-fe-market-select {
    min-height: 44px;
    font-size: 16px;
    padding: 6px 10px;
    border: 1px solid var(--swg-line);
    border-radius: 6px;
    background: var(--swg-bg);
    flex: 1 1 220px;
}
.swgef-fe-root .swgef-fe-market-status { display: block; margin-top: 6px; }

/* v3.58.0 — client CSV export (collapsed <details> on the Submissions tab). */
.swgef-fe-root .swgef-fe-export {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--swg-line);
    border-radius: 8px;
    background: var(--swg-surface);
}
.swgef-fe-root .swgef-fe-export > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--swg-accent-dark);
}
.swgef-fe-root .swgef-export-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}
.swgef-fe-root .swgef-export-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--swg-muted);
}
.swgef-fe-root .swgef-export-field input {
    min-height: 44px;
    font-size: 16px;
    padding: 6px 10px;
    border: 1px solid var(--swg-line);
    border-radius: 6px;
}
.swgef-fe-root .swgef-fe-vehicle-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--swg-line);
}
.swgef-fe-root .swgef-fe-sub-delete { margin-left: auto; }

/* Mobile responsive */

/* ============================================================
 * v3.17.0 — Customer-side promo code input (WC cart + checkout).
 * Wrapped in .swgef-fe-root for cascade-defense.
 * ============================================================ */
.swgef-fe-root.swgef-promo-input {
    background: var(--swg-surface, #f7f9fa);
    border: 1px solid var(--swg-line, #e1e5ea);
    border-radius: 6px;
    padding: 16px;
    margin: 16px 0;
    color: var(--swg-text, #1d2327);
}
.swgef-fe-root .swgef-promo-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--swg-text, #1d2327);
}
.swgef-fe-root .swgef-promo-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.swgef-fe-root .swgef-promo-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--swg-line, #e1e5ea);
    border-radius: 4px;
    background: #fff;
    color: var(--swg-text, #1d2327);
    font-size: 16px;
    font-family: inherit;
    text-transform: uppercase;
}
.swgef-fe-root .swgef-promo-field:focus {
    outline: none;
    border-color: var(--swg-accent-dark, #1d6588);
    box-shadow: 0 0 0 2px var(--swg-accent-soft, rgba(56, 168, 216, 0.12));
}
.swgef-fe-root .swgef-promo-apply {
    flex: 0 0 auto;
    padding: 8px 16px;
    /* v3.20.1 — mobile tap-target floor (Round 1 UI audit). */
    min-height: 44px;
    background: var(--swg-accent-dark, #1d6588);
    color: #fff;
    border: 1px solid var(--swg-accent-dark, #1d6588);
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.swgef-fe-root .swgef-promo-apply:hover,
.swgef-fe-root .swgef-promo-apply:focus {
    background: #154e6b;
    border-color: #154e6b;
    color: #fff;
    outline: none;
}
.swgef-fe-root .swgef-promo-apply:disabled,
.swgef-fe-root .swgef-promo-remove:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.swgef-fe-root .swgef-promo-applied {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--swg-accent-soft, rgba(56, 168, 216, 0.12));
    border: 1px solid var(--swg-accent-dark, #1d6588);
    border-radius: 4px;
}
.swgef-fe-root .swgef-promo-applied .dashicons {
    color: var(--swg-accent-dark, #1d6588);
}
.swgef-fe-root .swgef-promo-applied-text {
    flex: 1 1 auto;
    color: var(--swg-text, #1d2327);
}
.swgef-fe-root .swgef-promo-remove {
    background: transparent;
    color: var(--swg-accent-dark, #1d6588);
    border: 1px solid var(--swg-accent-dark, #1d6588);
    border-radius: 4px;
    /* v3.20.1 — mobile tap-target floor (Round 1 UI audit). */
    min-height: 44px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.swgef-fe-root .swgef-promo-remove:hover,
.swgef-fe-root .swgef-promo-remove:focus {
    background: var(--swg-accent-dark, #1d6588);
    color: #fff;
    outline: none;
}
.swgef-fe-root .swgef-promo-status {
    margin-top: 8px;
    font-size: 14px;
    min-height: 1.4em;
}
.swgef-fe-root .swgef-promo-status[data-state="error"] {
    color: var(--swg-error, #d63638);
}
.swgef-fe-root .swgef-promo-status[data-state="success"] {
    color: #0f7a5b;
}


/* ============================================================
 * v3.20.0 — Customer-side VIN scan button (PDR Phase 6 OCR).
 * Lives next to the VIN input on both the submit-estimate form
 * and the +Add a vehicle form. Scoped under .swgef-fe-root for
 * cascade-defense (theme cannot accidentally restyle).
 * ============================================================ */
.swgef-fe-root .swgef-fe-scan-vin {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.swgef-fe-root .swgef-fe-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    /* v3.20.1 — mobile tap-target floor (Round 1 UI audit). */
    min-height: 44px;
    background: var(--swg-accent-soft, rgba(56, 168, 216, 0.12));
    color: var(--swg-accent-dark, #1d6588);
    border: 1px solid var(--swg-accent-dark, #1d6588);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.swgef-fe-root .swgef-fe-scan-btn:hover,
.swgef-fe-root .swgef-fe-scan-btn:focus {
    background: var(--swg-accent-dark, #1d6588);
    color: #fff;
    outline: none;
}
.swgef-fe-root .swgef-fe-scan-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.swgef-fe-root .swgef-fe-scan-status {
    font-size: 13px;
    min-height: 1.2em;
}
.swgef-fe-root .swgef-fe-scan-status[data-state="error"] {
    color: var(--swg-error, #d63638);
}
.swgef-fe-root .swgef-fe-scan-status[data-state="success"] {
    color: #0f7a5b;
}

/* ============================================================
 * v3.20.1 — Reduced motion. Honor the user's OS-level setting to
 * cut transitions + animations on every interactive surface in
 * the customer-facing plugin shell. Round 1 UI audit flagged this
 * as a vestibular-accessibility regression. Scoped under
 * `.swgef-fe-root` so we don't accidentally turn off the host
 * theme's own animations.
 * ============================================================ */

/* ============================================================
   v3.22.0 — SaaS Design System portal re-skin
   ============================================================
   Customer-facing shortcodes (/my-estimates/ + /submit-estimate-request/)
   adopt the SaaS palette per the agency design system. Same Inter font,
   soft canvas, white cards with soft shadow, cobalt primary buttons.
   ALL rules scoped under .swgef-fe-root per the cascade-defense rule.
   ============================================================ */

/* Inter + soft canvas + slate text on customer-facing surfaces. */
.swgef-fe-root.swgef-customer-dashboard,
.swgef-fe-root.swgef-submit-form-wrap,
.swgef-fe-root.swgef-add-files-form-wrap {
    font-family: var(--swg-font);
    background: var(--swg-canvas);
    color: var(--swg-text);
    padding: 24px 16px;
    max-width: 960px;
    margin: 0 auto;
}

/* Headings — slate, tight letterspacing */
.swgef-fe-root .swgef-fe-heading {
    color: var(--swg-text);
    font-weight: 700;
    letter-spacing: -0.015em;
    font-size: 24px;
    margin: 0 0 16px;
}
.swgef-fe-root .swgef-fe-subheading {
    color: var(--swg-text);
    font-weight: 600;
    font-size: 18px;
    margin: 24px 0 12px;
    letter-spacing: -0.01em;
}

/* Buttons — cobalt primary fill, soft shadow */
.swgef-fe-root .swgef-fe-button {
    background: var(--swg-accent);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: var(--swg-radius);
    padding: 12px 20px;
    font-size: 14px;
    min-height: var(--swg-touch-target);
    box-shadow: var(--swg-shadow-sm);
    transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
    cursor: pointer;
    font-family: var(--swg-font);
}
.swgef-fe-root .swgef-fe-button:hover {
    background: var(--swg-accent-dark);
    color: #fff;
    box-shadow: var(--swg-shadow);
    transform: translateY(-1px);
}
.swgef-fe-root .swgef-fe-button:focus-visible {
    outline: none;
    box-shadow: var(--swg-focus-ring), var(--swg-shadow);
}

/* Secondary buttons — white card with line border */
.swgef-fe-root .swgef-fe-button-secondary {
    background: var(--swg-bg);
    color: var(--swg-accent-dark);
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius);
    padding: 12px 20px;
    font-weight: 500;
    min-height: var(--swg-touch-target);
    transition: background 120ms ease, border-color 120ms ease;
    cursor: pointer;
    font-family: var(--swg-font);
}
.swgef-fe-root .swgef-fe-button-secondary:hover {
    background: var(--swg-accent-soft);
    border-color: var(--swg-accent);
    color: var(--swg-accent-dark);
}

/* Cards — soft shadow + bigger radius */
.swgef-fe-root .swgef-fe-card,
.swgef-fe-root .swgef-fe-submission,
.swgef-fe-root .swgef-fe-vehicle-tile {
    background: var(--swg-bg);
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-lg);
    box-shadow: var(--swg-shadow-sm);
    padding: 24px;
    margin-bottom: 16px;
    transition: box-shadow 160ms ease, transform 160ms ease;
}
.swgef-fe-root .swgef-fe-submission:hover,
.swgef-fe-root .swgef-fe-vehicle-tile:hover {
    box-shadow: var(--swg-shadow);
    transform: translateY(-1px);
}

/* Tabs */
.swgef-fe-root .swgef-fe-tabs {
    display: flex;
    gap: 4px;
    background: var(--swg-bg);
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-lg);
    padding: 6px;
    margin-bottom: 24px;
    box-shadow: var(--swg-shadow-sm);
    overflow-x: auto;
}
.swgef-fe-root .swgef-fe-tab {
    padding: 10px 16px;
    color: var(--swg-body);
    text-decoration: none;
    font-weight: 500;
    border-radius: var(--swg-radius);
    transition: background 120ms ease, color 120ms ease;
    min-height: var(--swg-touch-target);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.swgef-fe-root .swgef-fe-tab:hover {
    background: var(--swg-accent-soft);
    color: var(--swg-accent-dark);
}
/* v3.30.1 — active tab = filled cobalt pill (the intended reskin design).
   The markup renders `.is-active`; the original reskin targeted `.active`,
   so the filled-pill style never applied and the tab fell back to a stray
   2px underline that got clipped by the pill-group container ("blue ring
   cutting off"). Target both class names + force the underline off. */
.swgef-fe-root .swgef-fe-tab.is-active,
.swgef-fe-root .swgef-fe-tab.active {
    background: var(--swg-accent);
    color: #fff;
    border-bottom-color: transparent;
}

/* KPI tiles on customer dashboard */
.swgef-fe-root .swgef-fe-kpi-tile {
    background: var(--swg-bg);
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-lg);
    box-shadow: var(--swg-shadow-sm);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.swgef-fe-root .swgef-fe-kpi-label {
    color: var(--swg-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.swgef-fe-root .swgef-fe-kpi-value {
    color: var(--swg-text);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Form inputs */
.swgef-fe-root input[type="text"],
.swgef-fe-root input[type="email"],
.swgef-fe-root input[type="tel"],
.swgef-fe-root input[type="number"],
.swgef-fe-root input[type="url"],
.swgef-fe-root input[type="date"],
.swgef-fe-root input[type="search"],
.swgef-fe-root select,
.swgef-fe-root textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--swg-bg);
    color: var(--swg-text);
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius);
    font-family: var(--swg-font);
    font-size: 16px;  /* iOS Safari autozoom prevention */
    min-height: var(--swg-touch-target);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.swgef-fe-root input[type="text"]:focus,
.swgef-fe-root input[type="email"]:focus,
.swgef-fe-root input[type="tel"]:focus,
.swgef-fe-root input[type="number"]:focus,
.swgef-fe-root input[type="url"]:focus,
.swgef-fe-root input[type="date"]:focus,
.swgef-fe-root input[type="search"]:focus,
.swgef-fe-root select:focus,
.swgef-fe-root textarea:focus {
    outline: none;
    border-color: var(--swg-accent);
    box-shadow: var(--swg-focus-ring);
}

/* Labels */
.swgef-fe-root label {
    color: var(--swg-body);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

/* Status pills */
.swgef-fe-root .swgef-fe-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--swg-radius-sm);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}
/* v3.64.0 — STATUS MODEL 2.0, the client-side half of the shared palette.
   Submitted=yellow, In Process=blue, Action required from shop=red,
   Action required from Client=orange, Completed=green, Cancelled=grey.
   Mirrored byte-for-byte in admin.css so the two sides can never drift. */
.swgef-fe-root .swgef-fe-status-pending_review { background: var(--swg-c-yellow-soft); color: var(--swg-c-yellow-dark); }
.swgef-fe-root .swgef-fe-status-in_progress { background: var(--swg-c-blue-soft); color: var(--swg-accent-dark); }
.swgef-fe-root .swgef-fe-status-approved { background: var(--swg-c-blue-soft); color: var(--swg-accent-dark); }
.swgef-fe-root .swgef-fe-status-action_shop { background: var(--swg-error-soft); color: var(--swg-error-darker); }
.swgef-fe-root .swgef-fe-status-waiting_on_customer { background: var(--swg-c-orange-soft); color: var(--swg-c-orange-dark); }
.swgef-fe-root .swgef-fe-status-awaiting_details { background: var(--swg-c-orange-soft); color: var(--swg-c-orange-dark); }
.swgef-fe-root .swgef-fe-status-completed { background: var(--swg-success-soft); color: var(--swg-success-dark); }
.swgef-fe-root .swgef-fe-status-rejected { background: var(--swg-surface); color: var(--swg-body); }
/* v3.67.4 — vehicle statuses, scoped copy (see the unscoped block above). */
.swgef-fe-root .swgef-fe-status-active { background: var(--swg-success-soft); color: var(--swg-success-dark); }
.swgef-fe-root .swgef-fe-status-archived { background: var(--swg-surface); color: var(--swg-body); }
.swgef-fe-root .swgef-fe-status-sold { background: var(--swg-c-blue-soft); color: var(--swg-accent-dark); }
.swgef-fe-root .swgef-fe-status-decommissioned { background: var(--swg-surface); color: var(--swg-body); }

/* Mobile breakpoint — preserve tap targets + readability */

/* Respect prefers-reduced-motion */

/* ============================================================
   v3.25.0 — Wider SaaS layout + full-width in App mode.
   Appended LAST so it overrides the earlier 960px caps (same
   specificity, later wins) without disturbing the legacy rules.
   ============================================================ */
.swgef-fe-root.swgef-customer-dashboard,
.swgef-fe-root.swgef-submit-form-wrap,
.swgef-fe-root.swgef-add-files-form-wrap {
    max-width: 1200px;
}
.swgef-app-mode .swgef-customer-dashboard,
.swgef-app-mode .swgef-submit-form-wrap,
.swgef-app-mode .swgef-add-files-form-wrap {
    max-width: none; /* fill the app shell — true full width */
    padding: 0;
}

/* ============================================================
   v3.28.0 — Pay-per-service pricing block ([swgef_services])
   Light SaaS theme, scoped under .swgef-fe-root (cascade-defense).
   Spacing on the 8px scale; mobile-first; WCAG-AA; reduced-motion-safe.
   ============================================================ */
.swgef-fe-root.swgef-fe-pricing { max-width: 1100px; margin: 0 auto; }
.swgef-fe-root .swgef-fe-pricing-title {
    text-align: center; color: var(--swg-text);
    font-size: 28px; line-height: 1.2; font-weight: 800; margin: 0 0 8px;
}
.swgef-fe-root .swgef-fe-pricing-subtitle {
    text-align: center; color: var(--swg-muted); margin: 0 0 40px;
}
.swgef-fe-root .swgef-fe-pricing-grid {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 40px;
}
.swgef-fe-root .swgef-fe-pricing-card {
    flex: 0 0 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3);
    display: flex; flex-direction: column;
    background: var(--swg-bg); border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-xl); padding: 32px;
    box-shadow: var(--swg-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.swgef-fe-root .swgef-fe-pricing-card:hover {
    box-shadow: var(--swg-shadow-lg); transform: translateY(-2px); border-color: var(--swg-accent);
}
.swgef-fe-root .swgef-fe-pricing-name {
    text-align: center; color: var(--swg-text);
    font-size: 18px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; margin: 0 0 16px;
}
.swgef-fe-root .swgef-fe-pricing-price {
    text-align: center; color: var(--swg-text);
    font-size: 48px; line-height: 1; font-weight: 800; margin: 0;
}
.swgef-fe-root .swgef-fe-pricing-tagline {
    text-align: center; color: var(--swg-muted); font-size: 15px; margin: 8px 0 0;
}
.swgef-fe-root .swgef-fe-pricing-divider {
    border: 0; border-top: 1px solid var(--swg-line); margin: 24px 0;
}
.swgef-fe-root .swgef-fe-pricing-features {
    list-style: none; margin: 0 0 24px; padding: 0; flex: 1 1 auto;
}
.swgef-fe-root .swgef-fe-pricing-features li {
    display: flex; align-items: flex-start; gap: 16px;
    color: var(--swg-body); font-size: 16px; margin: 0 0 16px;
}
.swgef-fe-root .swgef-fe-pricing-features li:last-child { margin-bottom: 0; }
.swgef-fe-root .swgef-fe-pricing-check { color: var(--swg-accent); flex: 0 0 auto; margin-top: 2px; }
.swgef-fe-root .swgef-fe-pricing-cta {
    display: block; width: 100%; text-align: center; margin-top: auto;
}
.swgef-fe-root .swgef-fe-pricing-cta.is-disabled {
    background: var(--swg-surface); color: var(--swg-muted);
    cursor: not-allowed; pointer-events: none; border: 1px solid var(--swg-line);
}
.swgef-fe-root .swgef-fe-pricing-admin-hint {
    color: var(--swg-muted); font-size: 13px; text-align: center; margin: 8px 0 0;
}
.swgef-fe-root .swgef-fe-pricing-footer {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--swg-muted); margin-top: 32px; font-size: 15px;
}
.swgef-fe-root .swgef-fe-pricing-shield { color: var(--swg-accent); flex: 0 0 auto; }
.swgef-fe-root .swgef-fe-pricing-dot { color: var(--swg-line); }

@media (max-width: 960px) {
    .swgef-fe-root .swgef-fe-pricing-card { flex-basis: calc((100% - 24px) / 2); max-width: calc((100% - 24px) / 2); }
}
@media (max-width: 782px) {
    .swgef-fe-root .swgef-fe-pricing-title { font-size: 24px; }
    .swgef-fe-root .swgef-fe-pricing-card { padding: 24px; }
    .swgef-fe-root .swgef-fe-pricing-price { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .swgef-fe-root *,
    .swgef-fe-root *::before,
    .swgef-fe-root *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .swgef-fe-root .swgef-fe-button,
    .swgef-fe-root .swgef-fe-submission,
    .swgef-fe-root .swgef-fe-vehicle-tile,
    .swgef-fe-root .swgef-fe-tab,
    .swgef-fe-root .swgef-fe-kpi {
        transition: none;
        transform: none !important;
    }
    .swgef-fe-root .swgef-fe-pricing-card { transition: none; }
    .swgef-fe-root .swgef-fe-pricing-card:hover { transform: none; }
}

/* =========================================================================
   v3.32.0 — Combined branded access page: logo on top + Log in | Sign up.
   Scoped under .swgef-fe-root (cascade-defense). Contained + mobile-stacking.
   ========================================================================= */
.swgef-fe-root.swgef-fe-access { max-width: 920px; margin: 14px auto 20px; padding: 0 16px; }
.swgef-fe-root .swgef-fe-access-logo { text-align: center; margin: 0 0 4px; }
.swgef-fe-root .swgef-fe-access-logo img { max-height: 260px; max-width: 100%; width: auto; display: inline-block; }
.swgef-fe-root .swgef-fe-access-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--swg-bg, #ffffff); border: 1px solid var(--swg-line, #e2e8f0);
  border-radius: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.08); overflow: hidden;
}
.swgef-fe-root .swgef-fe-access-col { padding: 20px 28px; }
.swgef-fe-root .swgef-fe-access-col + .swgef-fe-access-col { border-left: 1px solid var(--swg-line, #e2e8f0); }
.swgef-fe-root .swgef-fe-access-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--swg-text, #0f172a); }
.swgef-fe-root .swgef-fe-access-sub { margin: 0 0 20px; color: var(--swg-muted, #64748b); font-size: 14px; }
.swgef-fe-root .swgef-fe-access .swgef-fe-field { margin: 0 0 16px; }
.swgef-fe-root .swgef-fe-access .swgef-fe-field label { display: block; font-size: 14px; font-weight: 600; color: var(--swg-text, #0f172a); margin: 0 0 6px; }
/* Access-page input sizing is handled by the global `.swgef-fe-field
   input[type=...]` rule above, which now includes tel + password — so every
   field (text / email / tel / password) renders at the same full-width 44px
   box. NOTE: do NOT scope access rules as `.swgef-fe-root .swgef-fe-access …`
   — both classes sit on the SAME root element (`class="swgef-fe-root
   swgef-fe-access"`), so a descendant combinator between them matches nothing.
   Use `.swgef-fe-root.swgef-fe-access` (compound) or just `.swgef-fe-field`. */
.swgef-fe-root .swgef-fe-access .swgef-fe-button { width: 100%; min-height: 44px; }
.swgef-fe-root .swgef-fe-access .swgef-fe-check { font-size: 14px; color: var(--swg-muted, #64748b); margin: 0 0 16px; }
.swgef-fe-root .swgef-fe-access .swgef-fe-help { font-size: 13px; margin: 10px 0 0; }

/* v3.34.0 — "Buy a service" controls on each My-Vehicles row (Phase 1). Reuses
   .swgef-fe-button + .swgef-fe-button-secondary; adds the row layout + a small size. */
.swgef-fe-root .swgef-fe-vehicle-buy {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--swg-line, #e2e8f0);
}
.swgef-fe-root .swgef-fe-buy-label { font-size: 13px; font-weight: 600; color: var(--swg-muted, #64748b); margin-right: 4px; }
.swgef-fe-root .swgef-fe-button-sm { padding: 8px 14px; font-size: 13px; min-height: 0; }
@media (max-width: 720px) {
  .swgef-fe-root .swgef-fe-access-card { grid-template-columns: 1fr; }
  .swgef-fe-root .swgef-fe-access-col + .swgef-fe-access-col { border-left: 0; border-top: 1px solid var(--swg-line, #e2e8f0); }
  .swgef-fe-root .swgef-fe-vehicle-buy .swgef-fe-button-sm { flex: 1 1 auto; text-align: center; }
}
/* v3.34.2 — Phase 3: per-job invoice line in the Submissions list. */
.swgef-fe-root .swgef-fe-sub-invoice { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; }
.swgef-fe-root .swgef-fe-sub-invoice-no { color: var(--swg-muted, #64748b); font-weight: 600; }
/* v3.35.2 — phone-width tap targets ≥44px (agency mobile rule). On a phone the
   small "Buy a service" / "Add Supplement" buttons (min-height:0 → ~34px) and
   the per-job invoice link (~20px) were below the 44px touch minimum. */

/* v3.39.0 — "Awaiting Details" KPI tile info tooltip */
.swgef-fe-root .swgef-fe-kpi { position: relative; overflow: visible; }
.swgef-fe-kpi-info {
  position: absolute; top: 8px; right: 8px;
  width: 16px; height: 16px; opacity: 0.5; cursor: help;
}
.swgef-fe-kpi-info:hover { opacity: 1; }
.swgef-fe-kpi-info svg { width: 16px; height: 16px; display: block; }
.swgef-fe-kpi-info::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: rgba(29,35,39,0.92); color: #fff;
  padding: 6px 10px; border-radius: 4px; font-size: 11px;
  font-weight: 400; line-height: 1.4; width: 200px;
  white-space: normal; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s; z-index: 20;
}
.swgef-fe-kpi-info:hover::after { opacity: 1; }

/* v3.67.2 — ANCHOR CLEARANCE. The KPI tiles jump to #swgef-fe-list, but a bare
   fragment scrolls the target to the very top of the viewport, which parked the
   list flush under the portal's sticky header and clipped the first item's
   heading (Kyle, Basecamp #518973812 + #518980835: "the anchor is going below and
   cutting off the heading of the first item"). scroll-margin-top reserves space
   above the target so the first row lands fully visible, header and all. Measured
   live: the sticky portal header is 87px on desktop and ~73px on a phone, so the
   values below leave roughly 30px of deliberate breathing room rather than just
   clearing it — a few px of slack is worthless on a device whose text size the
   client controls. Applied
   to the element itself rather than solved with JS, so it costs nothing and keeps
   the native, instant jump that made the phone experience work in the first place.
   v3.67.7 — #swgef-fe-tabnav shares the exact same clearance: the portal tab links
   now carry that fragment so a tap lands on the tab bar with the list below it, and
   the tab bar must clear the sticky header just as the list does.
   v3.68.2 — #swgef-fe-section shares it too: the status tiles now anchor on the
   section HEADING (heading + search box, then the list) instead of the list itself,
   so the heading must clear the sticky header exactly as the list did (Kyle,
   #518980835 re-open: "take the client to the Heading for that section"). */
#swgef-fe-list,
#swgef-fe-section,
#swgef-fe-tabnav {
    scroll-margin-top: 120px;
}
/* Operators (and anyone else who sees the WP admin bar) get another 32px of
   overlay on desktop and 46px on mobile. Clients do not see the bar — the plugin
   hides it for non-operators by default — but the shop's own staff testing the
   portal would otherwise hit the very clipping this rule exists to prevent. */
body.admin-bar #swgef-fe-list,
body.admin-bar #swgef-fe-section,
body.admin-bar #swgef-fe-tabnav {
    scroll-margin-top: 152px;
}
@media (max-width: 600px) {
    .swgef-fe-root .swgef-fe-pager { flex-direction: column; align-items: stretch; }
    .swgef-fe-root .swgef-fe-pager-pages { justify-content: space-between; }
    .swgef-fe-subscription-row { flex-direction: column; align-items: flex-start; gap: 12px; }

    .swgef-fe-root .swgef-fe-search-input { flex-basis: 100%; }
    .swgef-fe-root .swgef-fe-search-select { flex: 1 1 auto; }

    .swgef-fe-root .swgef-fe-estimate-input { flex-basis: 100%; }

    .swgef-fe-tabs { gap: 0; }
    .swgef-fe-root .swgef-fe-tab { padding: 10px 12px; font-size: 14px; }
    .swgef-fe-section-actions { justify-content: stretch; }
    .swgef-fe-root .swgef-fe-section-actions .swgef-fe-button { width: 100%; text-align: center; }
    .swgef-fe-root .swgef-fe-form-row input[type=text],
    .swgef-fe-root .swgef-fe-form-row input[type=number],
    .swgef-fe-root .swgef-fe-form-row select { max-width: 100%; }
    .swgef-fe-vehicle-row { flex-direction: column; align-items: flex-start; }

    .swgef-fe-root .swgef-promo-row { flex-direction: column; }
    .swgef-fe-root .swgef-promo-apply { width: 100%; }

    .swgef-fe-root.swgef-customer-dashboard,
    .swgef-fe-root.swgef-submit-form-wrap,
    .swgef-fe-root.swgef-add-files-form-wrap {
        padding: 16px 12px;
    }
    .swgef-fe-root .swgef-fe-card,
    .swgef-fe-root .swgef-fe-submission,
    .swgef-fe-root .swgef-fe-vehicle-tile {
        padding: 16px;
    }
    .swgef-fe-root .swgef-fe-heading { font-size: 20px; }
    .swgef-fe-root .swgef-fe-kpi-value { font-size: 24px; }

    .swgef-fe-root .swgef-fe-pricing-grid { gap: 16px; }
    .swgef-fe-root .swgef-fe-pricing-card { flex-basis: 100%; max-width: 100%; }

  .swgef-fe-root .swgef-fe-button-sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .swgef-fe-root .swgef-fe-sub-invoice { flex-wrap: wrap; }
  .swgef-fe-root .swgef-fe-sub-invoice a { min-height: 44px; display: inline-flex; align-items: center; }

    #swgef-fe-list,
    #swgef-fe-section,
    #swgef-fe-tabnav { scroll-margin-top: 104px; }
    body.admin-bar #swgef-fe-list,
    body.admin-bar #swgef-fe-section,
    body.admin-bar #swgef-fe-tabnav { scroll-margin-top: 150px; }
}

/* =====================================================================
   v3.68.0 — Bulk purchasing UI: prepaid-units panel, per-vehicle "apply a
   unit" row, and the services-page quantity buy form. Scoped under
   .swgef-fe-root (cascade defense), token-only (no hardcoded hex).
   ===================================================================== */
.swgef-fe-root .swgef-fe-units-panel {
    border: 1px solid var(--swg-line);
    background: var(--swg-accent-soft);
    border-radius: var(--swg-radius);
    padding: var(--swg-space);
    margin: 0 0 var(--swg-space);
}
.swgef-fe-root .swgef-fe-units-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--swg-space-sm);
    margin-bottom: var(--swg-space-sm);
}
.swgef-fe-root .swgef-fe-units-title {
    font-weight: 600;
    color: var(--swg-text);
}
.swgef-fe-root .swgef-fe-units-worth {
    color: var(--swg-accent-dark);
    font-weight: 600;
}
.swgef-fe-root .swgef-fe-units-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--swg-space-sm);
}
.swgef-fe-root .swgef-fe-units-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--swg-surface);
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-sm);
    padding: 6px 10px;
}
.swgef-fe-root .swgef-fe-units-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--swg-radius-sm);
    background: var(--swg-accent-dark);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}
.swgef-fe-root .swgef-fe-units-label {
    color: var(--swg-text);
    font-size: 14px;
}
.swgef-fe-root .swgef-fe-units-hint {
    margin: var(--swg-space-sm) 0 0;
    font-size: 13px;
}
/* Per-vehicle "Use a prepaid unit" row — mirrors .swgef-fe-vehicle-buy layout. */
.swgef-fe-root .swgef-fe-apply-units {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--swg-space-sm);
    margin-top: var(--swg-space-sm);
    padding-top: var(--swg-space-sm);
    border-top: 1px dashed var(--swg-line);
}
.swgef-fe-root .swgef-fe-apply-unit.is-armed {
    background: var(--swg-accent-dark);
    color: #fff;
    border-color: var(--swg-accent-dark);
}
/* v3.73.0 (#519546493) — double-click instruction on its own full-width line
   between the "Use a prepaid unit:" label and the apply buttons. */
.swgef-fe-root .swgef-fe-apply-hint {
    flex-basis: 100%;
    font-size: 12px;
    margin: 0;
}
.swgef-fe-root .swgef-fe-apply-status {
    font-size: 13px;
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* Services page: quantity buy form for bulk-eligible services. */
.swgef-fe-root .swgef-fe-bulk-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--swg-space-sm);
    margin-top: var(--swg-space-sm);
}
.swgef-fe-root .swgef-fe-bulk-qty-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--swg-muted);
    text-align: left;
}
.swgef-fe-root .swgef-fe-bulk-qty {
    width: 84px;
    min-height: var(--swg-touch-target);
    padding: 8px 10px;
    font-size: 16px; /* >=16px so iOS doesn't zoom on focus */
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-sm);
    background: var(--swg-surface);
    color: var(--swg-text);
}
.swgef-fe-root .swgef-fe-bulk-buy .swgef-fe-pricing-cta {
    margin: 0;
}
@media (max-width: 480px) {
    .swgef-fe-root .swgef-fe-cart-cta { display: none; }
    .swgef-fe-root .swgef-fe-bulk-buy { flex-direction: column; align-items: stretch; }
    .swgef-fe-root .swgef-fe-bulk-qty { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Claim Command Center, client side (v3.77.0)
   Tokens only. Mobile-first: most PDR shops open this on a phone standing
   next to a car, so the track stacks vertically by default and only goes
   horizontal when there is genuinely room.
--------------------------------------------------------------------------- */

.swgef-fe-claim {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius);
    background: var(--swg-surface);
}
.swgef-fe-claim-track {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.swgef-fe-claim-rung {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--swg-muted);
}
.swgef-fe-claim-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--swg-line);
    flex: 0 0 auto;
}
.swgef-fe-claim-rung.is-done .swgef-fe-claim-dot { background: var(--swg-success); }
.swgef-fe-claim-rung.is-done .swgef-fe-claim-label { color: var(--swg-text); }
.swgef-fe-claim-rung.is-current .swgef-fe-claim-dot {
    background: var(--swg-accent-dark);
    box-shadow: 0 0 0 3px var(--swg-accent-soft);
}
.swgef-fe-claim-rung.is-current .swgef-fe-claim-label {
    color: var(--swg-accent-dark);
    font-weight: 700;
}
.swgef-fe-claim-now {
    margin: 0;
    font-size: 14px;
    color: var(--swg-text);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}
.swgef-fe-claim-when,
.swgef-fe-claim-supp {
    font-size: 12px;
    color: var(--swg-muted);
}
.swgef-fe-claim-supp { font-weight: 600; }
.swgef-fe-claim-canceled {
    margin: 0;
    font-size: 14px;
    color: var(--swg-text);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}
.swgef-fe-claim-activity { margin-top: 10px; }
.swgef-fe-claim-activity summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--swg-accent-dark);
    font-weight: 600;
}
.swgef-fe-claim-feed {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.swgef-fe-claim-feed li {
    border-top: 1px solid var(--swg-line);
    padding: 8px 0;
    font-size: 13px;
}
.swgef-fe-claim-feed li:first-child { border-top: none; }
.swgef-fe-claim-feed-when {
    display: block;
    font-size: 12px;
    color: var(--swg-muted);
}
.swgef-fe-claim-feed-text { color: var(--swg-text); }


/* ============================================================
   Client vault  (v3.84.0)
   MOBILE-FIRST: shops use a phone beside the car. Tokens only.
   Every selector is scoped under .swgef-fe-root per the cascade-defense
   note at the top of this file - a bare class loses to a host theme.
   ============================================================ */
.swgef-fe-root .swgef-fe-vault-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--swg-line);
    border-radius: 8px;
    background: var(--swg-surface);
}
.swgef-fe-root .swgef-fe-vault-checkall { display: inline-flex; align-items: center; gap: 8px; }
.swgef-fe-root .swgef-fe-vault-checkall input[type="checkbox"] { width: 22px; height: 22px; }
.swgef-fe-root .swgef-fe-vault-count { font-size: 13px; opacity: .8; }
.swgef-fe-root .swgef-fe-vault-bar .swgef-fe-button { min-height: 44px; }

.swgef-fe-root .swgef-fe-vault-progress { flex: 1 1 100%; }
.swgef-fe-root .swgef-fe-vault-progress-track {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(127, 127, 127, .25);
}
.swgef-fe-root .swgef-fe-vault-progress-fill {
    height: 100%;
    width: 0;
    background: var(--swg-accent-dark, #1d6588);
    transition: width .25s ease;
}
.swgef-fe-root .swgef-fe-vault-progress-fill.is-error { background: var(--swg-error, #b32d2e); }
.swgef-fe-root .swgef-fe-vault-progress-text { margin: 8px 0 0; font-size: 13px; }

.swgef-fe-root .swgef-fe-vault-group { margin-bottom: 24px; }
.swgef-fe-root .swgef-fe-vault-group-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.swgef-fe-root .swgef-fe-vault-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.swgef-fe-root .swgef-fe-vault-tile { position: relative; }
.swgef-fe-root .swgef-fe-vault-tile label {
    display: block;
    padding: 8px;
    border: 1px solid var(--swg-line);
    border-radius: 8px;
    cursor: pointer;
}
.swgef-fe-root .swgef-fe-vault-tile input[type="checkbox"] { width: 22px; height: 22px; }
.swgef-fe-vault-tile img,
.swgef-fe-root .swgef-fe-vault-noimg {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    margin: 8px 0;
    background: rgba(127, 127, 127, .18);
}
.swgef-fe-root .swgef-fe-vault-tile-name {
    display: block;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.swgef-fe-root .swgef-fe-vault-view {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    min-height: 44px;
    line-height: 44px;
}
.swgef-fe-root .swgef-fe-vault-rowselect { display: inline-flex; align-items: center; margin-right: 8px; }
.swgef-fe-root .swgef-fe-vault-rowselect input[type="checkbox"] { width: 22px; height: 22px; }


/* ============================================================
   Client portal shell + dashboard  (v3.85.0)
   Built to Taylor's client-portal mockup. Every selector is scoped
   under .swgef-fe-root per the cascade-defense note at the top of
   this file. Mobile-first: the sidebar is a disclosure menu on a
   phone and a fixed rail from 960px up.
   ============================================================ */
.swgef-fe-root.swgef-portal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
.swgef-fe-root .swgef-portal-main { min-width: 0; }

/* --- left rail --- */
.swgef-fe-root .swgef-portal-side {
    border: 1px solid var(--swg-line);
    border-radius: 12px;
    background: var(--swg-surface);
    padding: 8px;
}
.swgef-fe-root .swgef-portal-side-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--swg-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.swgef-fe-root .swgef-portal-burger {
    width: 18px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.swgef-fe-root .swgef-portal-nav {
    display: none;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.swgef-fe-root .swgef-portal-nav.is-open { display: block; }
.swgef-fe-root .swgef-portal-navlink {
    display: block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--swg-text);
    text-decoration: none;
    font-weight: 500;
}
.swgef-fe-root .swgef-portal-navlink:hover,
.swgef-fe-root .swgef-portal-navlink:focus {
    background: rgba(127, 127, 127, .12);
    text-decoration: none;
}
.swgef-fe-root .swgef-portal-navlink.is-active {
    background: var(--swg-accent-dark, #1d6588);
    color: #fff;
}
.swgef-fe-root .swgef-portal-navlink-out { opacity: .75; }
.swgef-fe-root .swgef-portal-side-foot {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 16px 12px 8px;
    margin-top: 8px;
    border-top: 1px solid var(--swg-line);
    font-size: 12px;
    opacity: .8;
}

/* --- header strip --- */
.swgef-fe-root .swgef-portal-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--swg-line);
}
.swgef-fe-root .swgef-portal-title { margin: 0; font-size: 20px; }
.swgef-fe-root .swgef-portal-who { display: flex; align-items: center; gap: 8px; }
.swgef-fe-root .swgef-portal-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--swg-accent-dark, #1d6588);
    color: #fff;
    font-weight: 700;
}
.swgef-fe-root .swgef-portal-who-text { display: flex; flex-direction: column; line-height: 1.2; }
.swgef-fe-root .swgef-portal-who-text span { font-size: 12px; opacity: .7; }

/* --- dashboard grid --- */
.swgef-fe-root .swgef-fe-dash { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.swgef-fe-root .swgef-fe-dash-main { min-width: 0; }
.swgef-fe-root .swgef-fe-dash-welcome { margin: 0 0 4px; }
.swgef-fe-root .swgef-fe-dash-sub { margin: 0 0 16px; opacity: .75; }

.swgef-fe-root .swgef-fe-panel {
    border: 1px solid var(--swg-line);
    border-radius: 12px;
    background: var(--swg-bg);
    padding: 16px;
    margin-bottom: 16px;
}
.swgef-fe-root .swgef-fe-panel-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.swgef-fe-root .swgef-fe-panel-head h4 { margin: 0; font-size: 16px; }

/* --- claim rows --- */
.swgef-fe-root .swgef-fe-claimlist { margin: 0; padding: 0; list-style: none; }

/* v4.6.0 — the Messages list reuses the claim row wholesale; only the two
   right-hand values are new. #B45309 on white is 4.9:1 and carries a word, not
   just a colour, so the unread state does not depend on seeing it. */
.swgef-fe-root .swgef-fe-convo-when { display: block; font-size: 13px; font-weight: 700; color: #0F172A; }
.swgef-fe-root .swgef-fe-convo-unread { display: block; font-size: 11px; font-weight: 700; color: #B45309; margin-top: 2px; }
.swgef-fe-root .swgef-fe-lede { font-size: 13px; color: #334155; margin: 0 0 16px; }

/* v4.7.0 — Help and Support's question list. <details>, so the summary is a
   real control: it needs a pointer, a 44px target for a shop reading this on a
   phone beside a car, and a visible focus ring for anyone on a keyboard. */
.swgef-fe-root .swgef-fe-faq { margin: 0 0 24px; }
.swgef-fe-root .swgef-fe-faq-item {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 4px 16px;
    margin-bottom: 8px;
    background: #fff;
}
.swgef-fe-root .swgef-fe-faq-item > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.swgef-fe-root .swgef-fe-faq-item > summary:focus-visible {
    outline: 2px solid #1D4ED8;
    outline-offset: 2px;
}
.swgef-fe-root .swgef-fe-faq-item p {
    margin: 0 0 12px;
    font-size: 13px;
    color: #334155;
}
.swgef-fe-root .swgef-fe-claimrow + .swgef-fe-claimrow { margin-top: 8px; }
.swgef-fe-root .swgef-fe-claimrow-link {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--swg-line);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}
.swgef-fe-root .swgef-fe-claimrow-link:hover,
.swgef-fe-root .swgef-fe-claimrow-link:focus {
    border-color: var(--swg-accent-dark, #1d6588);
    text-decoration: none;
}
.swgef-fe-root .swgef-fe-claimrow-thumb img,
.swgef-fe-root .swgef-fe-claimrow-noimg {
    display: block;
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    background: rgba(127, 127, 127, .18);
}
.swgef-fe-root .swgef-fe-claimrow-vehicle { display: block; }
.swgef-fe-root .swgef-fe-claimrow-owner { display: block; font-size: 13px; }
.swgef-fe-root .swgef-fe-claimrow-meta,
.swgef-fe-root .swgef-fe-claimrow-carrier,
.swgef-fe-root .swgef-fe-claimrow-supp,
.swgef-fe-root .swgef-fe-claimrow-cap { display: block; font-size: 12px; opacity: .72; }
.swgef-fe-root .swgef-fe-claimrow-days strong { font-size: 24px; line-height: 1; display: block; }
/* The chevron cell: the markup renders .swgef-fe-claimrow-chev, the mockup called it -go.
   Both names get the one treatment - hidden on a phone, a right-aligned glyph from 640. */
.swgef-fe-root .swgef-fe-claimrow-go,
.swgef-fe-root .swgef-fe-claimrow-chev { display: none; font-size: 22px; opacity: .5; }

/* Stage colour coding, matching the mockup. */
.swgef-fe-root .swgef-fe-stage { font-weight: 700; }
.swgef-fe-root .swgef-fe-stage-received  { color: #475569; }
.swgef-fe-root .swgef-fe-stage-estimate  { color: #b45309; }
.swgef-fe-root .swgef-fe-stage-carrier   { color: #6d28d9; }
.swgef-fe-root .swgef-fe-stage-review    { color: #1d4ed8; }
.swgef-fe-root .swgef-fe-stage-approved  { color: #15803d; }
.swgef-fe-root .swgef-fe-stage-paid      { color: #0f766e; }
.swgef-fe-root .swgef-fe-stage-canceled  { color: #b91c1c; }

/* v4.16.8 (Taylor, Basecamp #520279303) — read-only client attention flag. Mirrors
   the admin caution tone: a soft-red row plus a "Needs attention" pill, so a shop can
   see at a glance which files are waiting on them. Deliberately not dramatic, and there
   is no control here to change it. WCAG AA: --swg-error-darker on white and on
   --swg-error-soft both clear 4.5:1 (the same pairing the status chips use). */
.swgef-fe-root .swgef-fe-acc > li.swgef-fe-claimrow-flagged {
    border-color: var(--swg-error, #dc2626);
}
.swgef-fe-root .swgef-fe-claimrow-flagged > details > summary {
    background: var(--swg-error-soft, #fef2f2);
}
.swgef-fe-root .swgef-fe-claimrow-attn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 2px 8px;
    border: 1px solid var(--swg-error, #dc2626);
    border-radius: 999px;
    background: var(--swg-bg, #ffffff);
    color: var(--swg-error-darker, #b91c1c);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.swgef-fe-root .swgef-fe-attn-ico { flex: 0 0 auto; }

/* v4.20.0 (Taylor, "Live Changes" consolidation — Option 1) — the ONE attention
   list. A row waiting on the shop (waiting-on-customer) or a brand-new
   awaiting-details row gets the AMBER treatment; a flagged row keeps the RED one.
   The tag tone follows the same split. WCAG AA: --swg-warning-dark (#b45309,
   4.73:1 on white, the codebase's amber text variant) and --swg-error-darker both
   clear 4.5:1 for the pill text; the soft tints are backgrounds only. */
.swgef-fe-root .swgef-fe-acc > li.swgef-fe-claimrow-waiting {
    border-color: var(--swg-warning, #f59e0b);
}
.swgef-fe-root .swgef-fe-claimrow-waiting > details > summary {
    background: var(--swg-warning-soft, #fff7ed);
}
.swgef-fe-root .swgef-fe-attn--waiting,
.swgef-fe-root .swgef-fe-attn--details {
    border-color: var(--swg-warning, #f59e0b);
    color: var(--swg-warning-dark, #b45309);
}

/* The folded-in "awaiting details" row — a brand-new claim with no stage yet.
   Not a <details>: a compact row with the vehicle, the amber tag and one button,
   the same call to action the old "We need something from you" box carried. The
   li keeps the shared card border; this is only the inner layout. */
.swgef-fe-root .swgef-fe-claimrow-pending { display: block; }
.swgef-fe-root .swgef-fe-pendingrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--swg-warning-soft, #fff7ed);
}
.swgef-fe-root .swgef-fe-pendingrow .swgef-fe-claimrow-id { flex: 1 1 auto; min-width: 0; }
.swgef-fe-root .swgef-fe-pendingrow .swgef-fe-button { flex: 0 0 auto; }

/* v4.20.0 (Taylor, "Live Changes") — the claim's documents, listed on the claim
   page and in the opened accordion row with a download link each. Documents only;
   photos keep their gallery. One row: icon, name-link, optional type pill, date. */
.swgef-fe-root .swgef-fe-claimdocs { list-style: none; margin: 8px 0 0; padding: 0; }
.swgef-fe-root .swgef-fe-claimdoc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--swg-line, #e2e8f0);
}
.swgef-fe-root .swgef-fe-claimdoc:first-child { border-top: 0; }
.swgef-fe-root .swgef-fe-claimdoc-ico { flex: 0 0 auto; color: var(--swg-muted, #64748b); }
.swgef-fe-root .swgef-fe-claimdoc .swgef-fe-doc-link { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.swgef-fe-root .swgef-fe-claimdoc .swgef-fe-muted { flex: 0 0 auto; }
/* v4.21.1 — the document TYPE label uses the base status pill with no status
   variant, which ships no fill of its own, so it read as bare text. Give it a
   neutral chip fill. #0f172a on #e2e8f0 clears WCAG AA (~14:1). */
.swgef-fe-root .swgef-fe-claimdoc .swgef-fe-status-pill {
    background: var(--swg-line, #e2e8f0);
    color: #0f172a;
}

/* --- How It Works --- */
.swgef-fe-root .swgef-fe-hiw {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.swgef-fe-root .swgef-fe-hiw-step { text-align: center; }
.swgef-fe-root .swgef-fe-hiw-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: currentColor;
    font-weight: 700;
}
/* The disc paints itself from the tone colour, so the numeral must be
   white or it disappears into its own background. Every tone above clears
   AA against white at this size and weight. */
.swgef-fe-root .swgef-fe-hiw-n { color: #fff; }

/* v4.3.0 — icon above the numeral inside the same 40px disc. The disc's
   background is currentColor, so the glyph is given an explicit white stroke
   the same way the numeral is; inheriting currentColor would draw it in the
   disc's own colour and make it vanish. */
.swgef-fe-root .swgef-fe-hiw-dot { flex-direction: column; gap: 1px; line-height: 1; }
.swgef-fe-root .swgef-fe-hiw-icon { display: flex; color: #fff; }
.swgef-fe-root .swgef-fe-hiw-icon svg { width: 14px; height: 14px; }
.swgef-fe-root .swgef-fe-hiw-n { font-size: 11px; }
.swgef-fe-root .swgef-fe-hiw-label { display: block; font-size: 14px; }
.swgef-fe-root .swgef-fe-hiw-copy { display: block; font-size: 12px; opacity: .75; margin-top: 4px; }

/* --- right rail --- */
.swgef-fe-root .swgef-fe-activity { margin: 0; padding: 0; list-style: none; }
.swgef-fe-root .swgef-fe-activity li {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--swg-line);
}
.swgef-fe-root .swgef-fe-activity li:last-child { border-bottom: 0; }
.swgef-fe-root .swgef-fe-activity-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: currentColor;
}
.swgef-fe-root .swgef-fe-activity-body { min-width: 0; }
.swgef-fe-root .swgef-fe-activity-when { display: block; font-size: 11px; opacity: .65; }
.swgef-fe-root .swgef-fe-activity-vehicle { display: block; font-size: 13px; }
.swgef-fe-root .swgef-fe-activity-text { display: block; font-size: 13px; opacity: .85; }


/* The (min-width: 960px) block lives below the single (min-width: 640px) block, so
   the 960 rules (six How-it-works columns) cascade over the 640 ones (three). */


/* ============================================================
   Accordion claim rows  (v3.86.0)
   Kyle proposed it, Taylor agreed 2026-09-02: the client keeps the
   list of cars on screen and opens one in place. Built on <details>
   so it needs no JavaScript. Every selector scoped under
   .swgef-fe-root per the cascade note at the top of this file.
   ============================================================ */
.swgef-fe-root .swgef-fe-acc-hint { margin: -4px 0 12px; font-size: 13px; opacity: .75; }
.swgef-fe-root .swgef-fe-acc { list-style: none; margin: 0; padding: 0; }
.swgef-fe-root .swgef-fe-acc > li {
    border: 1px solid var(--swg-line);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}
.swgef-fe-root .swgef-fe-acc > li:has(details[open]) { border-color: var(--swg-accent-dark, #1d6588); }
.swgef-fe-root .swgef-fe-acc summary {
    list-style: none;
    cursor: pointer;
    padding: 12px;
    display: grid;
    grid-template-columns: 72px 1fr 20px;
    gap: 12px;
    align-items: center;
}
.swgef-fe-root .swgef-fe-acc summary::-webkit-details-marker { display: none; }
.swgef-fe-root .swgef-fe-acc summary:focus-visible { outline: 2px solid var(--swg-accent-dark, #1d6588); outline-offset: -2px; }
.swgef-fe-root .swgef-fe-acc-caret { text-align: right; font-size: 20px; opacity: .5; transition: transform .15s ease; }
.swgef-fe-root .swgef-fe-acc details[open] .swgef-fe-acc-caret { transform: rotate(90deg); }
.swgef-fe-root .swgef-fe-acc-body { padding: 0 12px 16px; border-top: 1px solid var(--swg-line); }
.swgef-fe-root .swgef-fe-acc-h { margin: 16px 0 8px; font-size: 14px; }
.swgef-fe-root .swgef-fe-acc-cols { display: grid; grid-template-columns: 1fr; gap: 16px; }
.swgef-fe-root .swgef-fe-acc-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.swgef-fe-root .swgef-fe-acc-photos img {
    display: block;
    width: 100%;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
}
.swgef-fe-root .swgef-fe-acc-count { margin-top: 8px; font-size: 12px; }
.swgef-fe-root .swgef-fe-acc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.swgef-fe-root .swgef-fe-acc-actions .swgef-fe-button { min-height: 44px; }


/* v3.89.0 — dashboard rail: prepaid balance, and the job-status panel.
   Every selector scoped under .swgef-fe-root per this file's own cascade rule. */
.swgef-fe-root .swgef-fe-units { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.swgef-fe-root .swgef-fe-units li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--swg-fe-line, #e2e8f0); }
.swgef-fe-root .swgef-fe-units li:last-child { border-bottom: 0; }
/* v4.21.1 — the .swgef-fe-panel-action / .swgef-fe-needlist rules were removed:
   they styled the "We need something from you" box that 4.20.0's consolidation
   deleted, and nothing renders those classes any more. */
.swgef-fe-root .swgef-fe-kpi-sub { display: block; font-size: 12px; margin-top: 4px; }

/* v3.90.0 — My Claims: the plain accordion page the client approved.
   Scoped under .swgef-fe-root per this file's cascade rule. */
.swgef-fe-root .swgef-fe-note {
    background: var(--swg-fe-accent-soft, #eff6ff);
    border: 1px solid var(--swg-fe-line, #e2e8f0);
    border-radius: var(--swg-fe-radius, 12px);
    padding: 12px 16px;
    margin: 0 0 24px;
    font-size: 13px;
}
.swgef-fe-root .swgef-fe-claims-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.swgef-fe-root .swgef-fe-claims-search input[type=search] {
    /* Grows to fill the row beside the Stage dropdown; wraps to full width on a
       phone. flex-grow is what stops the shared global select/search width:100%
       from forcing each control onto its own line. */
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 100%;
    min-height: 44px;
    border: 1px solid var(--swg-fe-line, #e2e8f0);
    border-radius: var(--swg-fe-radius, 12px);
    padding: 0 12px;
    font: inherit;
}
/* v4.16.4 (Live Changes #5) — the Stage filter dropdown, matched to the search
   box it sits beside: same height, border, radius and type. An explicit
   background + text colour because a bare <select> otherwise borrows the theme's
   own control colours, which is exactly the readability gap the cascade rule
   guards against on a third-party theme. width:auto + flex:0 0 auto override the
   shared .swgef-fe-root select { width:100% } so it reads as one compact control
   inline with the search box rather than a full-width bar above it. */
.swgef-fe-root .swgef-fe-claims-stage {
    flex: 0 0 auto;
    width: auto;
    min-width: 190px;
    max-width: 100%;
    min-height: 44px;
    border: 1px solid var(--swg-fe-line, #e2e8f0);
    border-radius: var(--swg-fe-radius, 12px);
    padding: 0 12px;
    font: inherit;
    background: var(--swg-bg, #ffffff);
    color: var(--swg-text, #1e293b);
    cursor: pointer;
}
.swgef-fe-root .swgef-fe-claims-stage:focus {
    outline: 2px solid var(--swg-accent-dark);
    outline-offset: 1px;
}
.swgef-fe-root .swgef-fe-count { font-size: 12px; color: var(--swg-fe-muted, #64748b); padding-top: 12px; margin: 0; }

/* Pager — the ONE pagination pattern (Util\Pager) on every client list:
   My Claims, the detailed submissions list, My Vehicles.
   Count · Prev / Page x of y / Next · Per page 25 / 50 / 100. */
.swgef-fe-root .swgef-fe-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 0 0;
}
.swgef-fe-root .swgef-fe-pager-pages { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.swgef-fe-root .swgef-fe-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--swg-touch-target);
    padding: 0 14px;
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius);
    background: var(--swg-bg);
    color: var(--swg-accent-dark);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}
.swgef-fe-root .swgef-fe-pager-btn:hover,
.swgef-fe-root .swgef-fe-pager-btn:focus { border-color: var(--swg-accent-dark); text-decoration: none; }
.swgef-fe-root .swgef-fe-pager-btn[aria-disabled="true"] { color: var(--swg-muted); pointer-events: none; }
.swgef-fe-root .swgef-fe-pager-count,
.swgef-fe-root .swgef-fe-pager-where { font-size: 14px; color: var(--swg-muted); }
.swgef-fe-root .swgef-fe-pager-size { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--swg-muted); }
.swgef-fe-root .swgef-fe-pager-size select { min-height: var(--swg-touch-target); }
.swgef-fe-root .swgef-fe-pager-form { display: inline-flex; margin: 0; }
.swgef-fe-root .swgef-fe-pager-apply { min-height: var(--swg-touch-target); padding: 0 14px; border: 1px solid var(--swg-line); border-radius: var(--swg-radius); background: var(--swg-bg); color: var(--swg-accent-dark); cursor: pointer; }

/* v3.91.0 — the client dashboard, ported to the approved design's values.
   Measured from proof.css rather than approximated. Scoped under .swgef-fe-root
   per this file's cascade rule. */

/* Tiles. v4.9.1 — this used to read "two across on a phone, four from 640px, as
   the design has it", and it was wrong in a way the design proof could not show.
   `repeat(4, 1fr)` above a 640px VIEWPORT ignores the width of the COLUMN the
   tiles actually sit in: from 960px the dashboard grows a 320px rail, and the
   main column is capped at 648px. Four tiles need 604px of min-content, so
   between 960 and about 1270 they overflowed their column and painted straight
   over "Your prepaid services", hiding its button entirely (Shane, 2026-09-09).
   Even at 1440, where nothing overlapped, the four tracks were 150px each and
   "Sent to Carrier or Adjuster Review" hard-wrapped one word per line.

   So the tile count now follows whether the RAIL IS PRESENT, which is the thing
   that actually takes the space:
     - phone: two across
     - 640 to 959: no sidebar and no rail, content runs full width, four across
       at 177-197px, which the labels read at
     - 960 and up: two across. The SIDEBAR arrives at 960 and takes 216px, so
       four tiles measured 140px there, narrower than the 150px that was
       shredding the labels in the first place. From 1120 the rail arrives too.
       Two across gives 228px at the tightest and 401px at the widest.

   Deliberately NOT `repeat(auto-fit, minmax(...))`, which was the obvious fix and
   is worse here: with exactly four items every workable min value leaves a band
   of laptop widths that resolves to THREE tracks, and four tiles as 3+1 reads as
   broken. An explicit count cannot land there. */
.swgef-fe-root .swgef-fe-kpis { grid-template-columns: repeat(2, 1fr); gap: 16px; }
/* The 640-959 band (four tiles across) is set in the single (min-width: 640px) block
   further down and reset to two in the (min-width: 960px) block after it - spacing
   rule 6, one block per breakpoint, mobile-first order. */

/* Icon chip: a SOFT TINT with a DARK glyph. The saturated fill with a white
   glyph measured 2.28:1 on green, which is a hard AA failure on a meaningful
   graphic, and two of the four chips had collapsed to the same cobalt. */
.swgef-fe-root .swgef-fe-kpi-icon { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; color: inherit; }
.swgef-fe-root .swgef-fe-kpi-icon svg { width: 20px; height: 20px; }
.swgef-fe-root .swgef-fe-kpi-blue   .swgef-fe-kpi-icon { background: #DBEAFE; color: #2563EB; }
.swgef-fe-root .swgef-fe-kpi-purple .swgef-fe-kpi-icon { background: #EDE9FE; color: #7C3AED; }
.swgef-fe-root .swgef-fe-kpi-green  .swgef-fe-kpi-icon { background: #DCFCE7; color: #15803D; }
.swgef-fe-root .swgef-fe-kpi-slate  .swgef-fe-kpi-icon { background: #E2E8F0; color: #475569; }
.swgef-fe-root .swgef-fe-kpi-orange .swgef-fe-kpi-icon { background: #FEF3C7; color: #B45309; }
.swgef-fe-root .swgef-fe-kpi-red    .swgef-fe-kpi-icon { background: #FEE2E2; color: #DC2626; }

/* Tile label is sentence case, not uppercase-and-letterspaced */
.swgef-fe-root .swgef-fe-kpi-label { font-size: 13px; font-weight: 500; color: #64748B; text-transform: none; letter-spacing: normal; }
.swgef-fe-root .swgef-fe-kpi-value { font-size: 26px; font-weight: 700; line-height: 1; }
.swgef-fe-root .swgef-fe-kpi-sub { font-size: 13px; color: #2563EB; }

/* Panel rhythm on the 8px scale, as the design has it */
.swgef-fe-root .swgef-fe-panel { margin-bottom: 24px; }
.swgef-fe-root .swgef-fe-panel-head { margin-bottom: 16px; }

/* A header LINK is not the amber alert panel. One class name was doing both. */
.swgef-fe-root .swgef-fe-panel-link {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 16px; border: 1px solid #E2E8F0; border-radius: 8px;
    background: #fff; color: #0F172A; font-size: 13px; text-decoration: none;
}
.swgef-fe-root .swgef-fe-panel-link:hover { background: #F8FAFC; }

/* A secondary button, so not every action reads as the primary one */
.swgef-fe-root .swgef-fe-button-ghost {
    background: #fff; border: 1px solid #E2E8F0; color: #0F172A; box-shadow: none;
}
.swgef-fe-root .swgef-fe-button-ghost:hover { background: #F8FAFC; color: #0F172A; }

/* The six-rung track: a stepper, not a row of 9px dots. The completed dot was
   #22c55e at 2.28:1 on white; the design's #15803D is 5.01:1. */
.swgef-fe-root .swgef-fe-claim-track { display: grid; gap: 8px; }
.swgef-fe-root .swgef-fe-claim-rung { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 8px; }
/* v4.2.0 — the disc carries the stage's icon. It was already 24px, so only the
   centring and the glyph colour are new. White on #15803D is 5.0:1 and on
   #1D4ED8 is 7.0:1; the upcoming state's #64748B on white is 4.8:1. */
.swgef-fe-root .swgef-fe-claim-dot {
    width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
    background: #fff; border: 2px solid #E2E8F0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    color: #64748B;
}
.swgef-fe-root .swgef-fe-claim-dot svg { width: 12px; height: 12px; }
.swgef-fe-root .swgef-fe-claim-rung.is-done .swgef-fe-claim-dot    { background: #15803D; border-color: #15803D; color: #fff; }
.swgef-fe-root .swgef-fe-claim-rung.is-current .swgef-fe-claim-dot { background: #1D4ED8; border-color: #1D4ED8; color: #fff; box-shadow: 0 0 0 4px #DBEAFE; }
.swgef-fe-root .swgef-fe-claim-label { font-size: 13px; font-weight: 600; color: #0F172A; }
.swgef-fe-root .swgef-fe-claim-sub   { display: block; font-size: 11px; color: #64748B; }
.swgef-fe-root .swgef-fe-claim-supp  { display: block; font-size: 11px; font-weight: 700; color: #1E3A8A; }

/* The Need Help panel is not form help text */
.swgef-fe-root .swgef-fe-help h4 { color: #0F172A; font-size: 15px; }

/* ============================================================
   Add-a-vehicle form tabs — v4.9.0
   ------------------------------------------------------------
   Three panels inside ONE form (Vehicle Owner / Vehicle
   Information / Insurance Claim). Every selector is scoped under
   .swgef-fe-root per this file's cascade-defense rule at line 5.

   The active tab is FILLED, not underlined. A one-edge accent bar
   is a documented brand violation (root CLAUDE.md, extended
   2026-07-31), and a filled segment reads as "you are here" more
   plainly at phone width anyway.

   Panels toggle with display, and the inactive ones stay IN THE
   DOM: they hold form controls whose values must post with the
   rest of the form. See the note in render_add_vehicle_tab().
   ============================================================ */

.swgef-fe-root .swgef-fe-ftabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 24px;
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-sm);
    overflow: hidden;
    background: var(--swg-bg);
}

.swgef-fe-root .swgef-fe-ftab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 12px;
    border: 0;
    border-right: 1px solid var(--swg-line);
    background: transparent;
    color: var(--swg-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
.swgef-fe-root .swgef-fe-ftab:last-child { border-right: 0; }

.swgef-fe-root .swgef-fe-ftab:hover {
    background: var(--swg-canvas);
    color: var(--swg-text);
}

.swgef-fe-root .swgef-fe-ftab:focus-visible {
    outline: 2px solid var(--swg-focus-ring);
    outline-offset: -3px;
}

/* Filled active state. --swg-accent-dark is the only AA-safe form
   of the accent behind white text (root CLAUDE.md brand tokens). */
.swgef-fe-root .swgef-fe-ftab.is-active {
    background: var(--swg-accent-dark);
    color: #fff;
}
.swgef-fe-root .swgef-fe-ftab.is-active:hover {
    background: var(--swg-accent-dark);
    color: #fff;
}

/* The step number is real information: it is the order an
   estimator works through a car, not decoration. */
.swgef-fe-root .swgef-fe-ftab-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 12px;
    font-weight: 700;
}
.swgef-fe-root .swgef-fe-ftab.is-active .swgef-fe-ftab-step {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .55);
}

.swgef-fe-root .swgef-fe-fpanel { display: none; }
.swgef-fe-root .swgef-fe-fpanel.is-active { display: block; }

.swgef-fe-root .swgef-fe-fpanel-note {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--swg-canvas);
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-sm);
    color: var(--swg-muted);
    font-size: 14px;
    line-height: 1.5;
}

.swgef-fe-root .swgef-fe-field-note {
    margin: 4px 0 0;
    color: var(--swg-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* Field pairs. Single column by default because most of this form
   is filled on a phone next to a car; two and three up only once
   there is room for them. */
.swgef-fe-root .swgef-fe-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 16px;
}

/* Inputs are capped at 360px on their own so a lone field does not
   run the width of a desktop portal. Inside a grid the column is
   already the cap, so the input fills it. Specificity (0,3,1)
   beats the base rule's (0,2,1) — it wins on weight, not on
   source order, which is the theme 1.15.2 lesson. */
.swgef-fe-root .swgef-fe-form-grid .swgef-fe-form-row input,
.swgef-fe-root .swgef-fe-form-grid .swgef-fe-form-row select,
.swgef-fe-root .swgef-fe-form-grid .swgef-fe-form-row textarea {
    max-width: 100%;
}

.swgef-fe-root .swgef-fe-form-row-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
}
.swgef-fe-root .swgef-fe-form-row-check input[type=checkbox] {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
    flex: 0 0 auto;
}

.swgef-fe-root .swgef-fe-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--swg-line);
}


/* At phone width the three labels will not sit side by side, so the
   strip stacks rather than clipping its own text. */
@media (max-width: 479px) {
    .swgef-fe-root .swgef-fe-ftabs { flex-direction: column; }
    .swgef-fe-root .swgef-fe-ftab {
        justify-content: flex-start;
        border-right: 0;
        border-bottom: 1px solid var(--swg-line);
    }
    .swgef-fe-root .swgef-fe-ftab:last-child { border-bottom: 0; }
}

.swgef-fe-root .swgef-fe-ftab-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ============================================================
   Claim Details, the client's full claim view — v4.10.0
   ------------------------------------------------------------
   Taylor, Basecamp #519786772. Labels and values, never inputs.
   Every selector scoped under .swgef-fe-root per this file's
   cascade-defense rule at line 5.

   The field grid is mobile-first: one column, going to two and
   then three only when there is room. Ten owner fields stacked
   on a phone is correct; ten stretched across a desktop is not.
   ============================================================ */

.swgef-fe-root .swgef-fe-claimdetail {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.swgef-fe-root .swgef-fe-claimdetail-back { margin: 0; }

.swgef-fe-root .swgef-fe-claimdetail-intro {
    margin: 0;
    max-width: 68ch;
    color: var(--swg-muted);
    font-size: 15px;
    line-height: 1.55;
}

.swgef-fe-root .swgef-fe-claimdetail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-sm);
    background: var(--swg-bg);
}

.swgef-fe-root .swgef-fe-claimdetail-id {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.swgef-fe-root .swgef-fe-claimdetail-id .swgef-fe-subheading { margin: 0; }

.swgef-fe-root .swgef-fe-claimdetail-owner {
    font-weight: 600;
    color: var(--swg-text);
}

.swgef-fe-root .swgef-fe-claimdetail-meta,
.swgef-fe-root .swgef-fe-claimdetail-days {
    color: var(--swg-muted);
    font-size: 13px;
}

.swgef-fe-root .swgef-fe-claimdetail-stage {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}
.swgef-fe-root .swgef-fe-claimdetail-stagelabel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--swg-muted);
}
.swgef-fe-root .swgef-fe-claimdetail-stage strong {
    font-size: 17px;
    color: var(--swg-text);
}

/* ---- the three groups ---- */

.swgef-fe-root .swgef-fe-claimgroup {
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-sm);
    background: var(--swg-bg);
    overflow: hidden;
}

.swgef-fe-root .swgef-fe-claimgroup-title {
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid var(--swg-line);
    background: var(--swg-canvas);
    font-size: 15px;
    font-weight: 700;
    color: var(--swg-text);
}

.swgef-fe-root .swgef-fe-claimgroup-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 8px 24px 24px;
}

.swgef-fe-root .swgef-fe-claimfield {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
    border-bottom: 1px solid var(--swg-line);
    min-width: 0;
}
.swgef-fe-root .swgef-fe-claimfield dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--swg-muted);
}
.swgef-fe-root .swgef-fe-claimfield dd {
    margin: 0;
    font-size: 15px;
    color: var(--swg-text);
    overflow-wrap: anywhere;
}
/* "Not provided" is muted so a filled page reads as filled at a
   glance, and a gap is visible without hunting. */
.swgef-fe-root .swgef-fe-claimfield dd.is-blank {
    color: var(--swg-muted);
    font-style: italic;
}

/* ---- request a change ---- */

.swgef-fe-root .swgef-fe-claimchange {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--swg-accent-dark);
    border-radius: var(--swg-radius-sm);
    background: var(--swg-accent-soft);
}
.swgef-fe-root .swgef-fe-claimchange-copy { min-width: 0; }
.swgef-fe-root .swgef-fe-claimchange-copy strong {
    display: block;
    margin-bottom: 4px;
    color: var(--swg-text);
}
.swgef-fe-root .swgef-fe-claimchange-copy p {
    margin: 0;
    max-width: 62ch;
    color: var(--swg-text);
    font-size: 14px;
    line-height: 1.5;
}

.swgef-fe-root .swgef-fe-claimdetail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (min-width: 640px) {
    .swgef-fe-claim-track {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px;
    }
    .swgef-fe-claim-rung { flex: 1 1 auto; }

    .swgef-fe-root .swgef-fe-vault-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .swgef-fe-vault-tile img,
    .swgef-fe-root .swgef-fe-vault-noimg { height: 150px; }

    .swgef-fe-root .swgef-fe-hiw { grid-template-columns: repeat(3, 1fr); }
    .swgef-fe-root .swgef-fe-claimrow-link {
        grid-template-columns: 72px minmax(0, 2fr) minmax(0, 1.3fr) 92px 16px;
    }
    .swgef-fe-root .swgef-fe-claimrow-go,
    .swgef-fe-root .swgef-fe-claimrow-chev { display: block; text-align: right; }
    .swgef-fe-root .swgef-fe-claimrow-days { text-align: center; }

    .swgef-fe-root .swgef-fe-acc summary {
        grid-template-columns: 72px minmax(0, 2fr) minmax(0, 1.3fr) 92px 20px;
    }
    .swgef-fe-root .swgef-fe-acc-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .swgef-fe-root .swgef-fe-claim-track { grid-template-columns: repeat(6, 1fr); gap: 16px; }
    .swgef-fe-root .swgef-fe-claim-rung { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .swgef-fe-root .swgef-fe-form-grid { grid-template-columns: 1fr 1fr; }
    .swgef-fe-root .swgef-fe-form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
    .swgef-fe-root .swgef-fe-claimgroup-grid { grid-template-columns: 1fr 1fr; column-gap: 32px; }

    /* Four KPI tiles across from 640, where content runs full width. The 960 block
       below drops it back to two when the sidebar arrives (see the .swgef-fe-kpis note). */
    .swgef-fe-root .swgef-fe-kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) {
    .swgef-fe-root .swgef-fe-kpis { grid-template-columns: repeat(2, 1fr); }
    .swgef-fe-root.swgef-portal { grid-template-columns: 216px minmax(0, 1fr); gap: 24px; }
    .swgef-fe-root .swgef-portal-side-toggle { display: none; }
    .swgef-fe-root .swgef-portal-nav { display: block; }
    .swgef-fe-root .swgef-portal-side-foot { display: flex; }
    .swgef-fe-root .swgef-fe-hiw { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1024px) {
    .swgef-fe-root .swgef-fe-claimgroup-grid { grid-template-columns: repeat(3, 1fr); }
}
/* v4.9.1 — the dashboard rail moved OUT of the 960px block and up to 1120px.
   The sidebar rightly appears at 960; the RAIL should not. At 960 the rail took
   a fixed 320px and left the main column 313px, narrower than the rail beside
   it, which is backwards: the content became the smaller half of its own page.
   Below 1120 the rail now drops beneath the content and runs full width, which
   is what Shane asked for ("your prepaid services would need to drop down").
   1120 is where the main column clears 470px, enough for two tiles side by side
   plus the claims table. Keep this rule OUT of the 960 block — putting it back
   restores the overlap. */
@media (min-width: 1120px) {
    .swgef-fe-root .swgef-fe-dash { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
}

/* Claim Details: Updates and Files — v4.10.1 */

.swgef-fe-root .swgef-fe-claimupdates {
    list-style: none;
    margin: 0;
    padding: 8px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.swgef-fe-root .swgef-fe-claimupdates li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--swg-line);
}
.swgef-fe-root .swgef-fe-claimupdates li:last-child { border-bottom: 0; padding-bottom: 0; }
.swgef-fe-root .swgef-fe-claimupdate-when {
    font-size: 12px;
    font-weight: 600;
    color: var(--swg-muted);
}
.swgef-fe-root .swgef-fe-claimupdate-text { font-size: 15px; color: var(--swg-text); }

.swgef-fe-root .swgef-fe-claimfiles {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.swgef-fe-root .swgef-fe-claimthumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.swgef-fe-root .swgef-fe-claimthumbs img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--swg-radius-sm);
    border: 1px solid var(--swg-line);
    display: block;
}

.swgef-fe-root .swgef-fe-claimfiles-count,
.swgef-fe-root .swgef-fe-claimfiles-help {
    margin: 0;
    font-size: 14px;
    color: var(--swg-muted);
}

/* Two upload forms side by side once there is room, stacked on a phone.
   Each is its own object, so each gets its own border rather than one
   shared box with a divider. */
.swgef-fe-root .swgef-fe-claimupload {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.swgef-fe-root .swgef-fe-claimupload form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--swg-line);
    border-radius: var(--swg-radius-sm);
    background: var(--swg-canvas);
}
.swgef-fe-root .swgef-fe-claimupload-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--swg-text);
}
.swgef-fe-root .swgef-fe-claimupload input[type=file] {
    font-size: 14px;
    width: 100%;
    min-height: 44px;
}
.swgef-fe-root .swgef-fe-claimupload .swgef-fe-button { align-self: flex-start; min-height: 44px; }
.swgef-fe-root .swgef-fe-claimupload .swgef-fe-form-status { font-size: 13px; }

@media (min-width: 760px) {
    .swgef-fe-root .swgef-fe-claimupload { grid-template-columns: 1fr 1fr; }
}

/* Client Vault: the file's identifying numbers — v4.13.0
   Same three the admin Vault carries, so a shop and an estimator
   read the same identifiers off the same photo. */

.swgef-fe-root .swgef-fe-vault-tile-ref {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.swgef-fe-root .swgef-fe-vault-tile-ref strong {
    font-size: 12px;
    color: var(--swg-text);
    letter-spacing: .02em;
}

.swgef-fe-root .swgef-fe-vault-ref {
    font-weight: 600;
    font-size: 13px;
    color: var(--swg-text);
    letter-spacing: .02em;
}