@import '_content/Airedale.Blazor.Ant/Airedale.Blazor.Ant.wiqcm5czfi.bundle.scp.css';
@import '_content/Airedale.Blazor.Components/Airedale.Blazor.Components.4pkh71daro.bundle.scp.css';

/* /Components/Ace/AccountPage.razor.rz.scp.css */
/*
   WP-304 / WP-305 — ACE Warranty Portal account view styles. Self-contained;
   palette mirrors the shared ACE components defined under Airedale.Blazor.Components/Components/Warranty
   on the WP-272/WP-297 branches. CSS custom properties are duplicated here so
   the page renders correctly before those branches land. WP-305 added the
   .ace-th-sort-btn button + active-sort caret modifiers further down.

   TODO(consolidation): once WP-272 and WP-297 have merged to develop and
   stabilised, migrate this page to consume PortalHeader, PortalFooter,
   AssetListTable, StatusPill, and the shared ACE design tokens — then delete
   the duplicated custom-property fallbacks below.
*/

.ace-account-page[b-63yklcuzo5] {
    --ace-portal-header-bg: #1B8C5E;
    --ace-portal-footer-bg: #D9E7DC;
    --ace-portal-footer-divider: #2A3E4633;
    --ace-portal-text: #111827;
    --ace-portal-text-muted: #6B7280;
    --ace-portal-text-dark: #2A3E46;
    --ace-portal-surface: #fff;
    --ace-portal-surface-page: #F5F5F7;
    --ace-portal-surface-muted: #ECECEE;
    --ace-portal-border: #E5E7EB;
    --ace-portal-row-border: #F3F4F6;
    --ace-portal-table-head-bg: #F9FAFB;
    --ace-portal-table-head-text: #4B5563;
    --ace-portal-secondary-bg: #fff;
    --ace-portal-secondary-text: #374151;
    --ace-portal-secondary-border: #D1D5DB;
    --ace-portal-secondary-hover-bg: #F9FAFB;
    --ace-portal-tab-active: #1B8C5E;
    --ace-portal-tab-inactive: #6B7280;
    --ace-pill-green-bg: #F6FFED;
    --ace-pill-green-text: #52C41A;
    --ace-pill-green-border: #B7EB8F;
    --ace-pill-red-bg: #FFF1F0;
    --ace-pill-red-text: #F5222D;
    --ace-pill-red-border: #FFA39E;
    --ace-pill-orange-bg: #FFF7E6;
    --ace-pill-orange-text: #FA8C16;
    --ace-pill-orange-border: #FFD591;
    --ace-pill-blue-bg: #E6F7FF;
    --ace-pill-blue-text: #1890FF;
    --ace-pill-blue-border: #91D5FF;
    --ace-pill-grey-bg: #F5F5F5;
    --ace-pill-grey-text: #4B5563;
    --ace-pill-grey-border: #E5E7EB;

    background-color: var(--ace-portal-surface-page);
    color: var(--ace-portal-text);
    font-family: 'Roboto', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ----- Header -------------------------------------------------------- */

.ace-portal-header[b-63yklcuzo5] {
    background-color: var(--ace-portal-header-bg);
    color: #fff;
    width: 100%;
    flex: 0 0 auto;
}

.ace-portal-header-inner[b-63yklcuzo5] {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1366px;
    margin: 0 auto;
    padding: 12px 48px;
    min-height: 64px;
}

.ace-portal-header-logo-link[b-63yklcuzo5] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: #fff;
    text-decoration: none;
}

.ace-portal-header-logo[b-63yklcuzo5] {
    display: block;
    height: 28px;
    width: auto;
}

.ace-portal-header-search[b-63yklcuzo5] {
    flex: 0 1 360px;
    margin-left: auto;
    display: flex;
    align-items: stretch;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    height: 32px;
}

.ace-portal-header-search-input[b-63yklcuzo5] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    color: var(--ace-portal-text);
    min-width: 0;
}

.ace-portal-header-search-input[b-63yklcuzo5]::placeholder {
    color: #9CA3AF;
}

.ace-portal-header-search-button[b-63yklcuzo5] {
    flex: 0 0 auto;
    width: 36px;
    border: none;
    background-color: transparent;
    color: var(--ace-portal-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ace-portal-header-user[b-63yklcuzo5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.ace-portal-header-avatar[b-63yklcuzo5] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--ace-portal-header-bg);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ace-portal-header-user-name[b-63yklcuzo5] {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

/* ----- User menu (DUAT-30) — mirrors the AceLanding / PortalHeader dropdown ----- */

.ace-portal-header-user-wrap[b-63yklcuzo5] {
    position: relative;
    flex: 0 0 auto;
}

.ace-portal-header-user-button[b-63yklcuzo5] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.ace-portal-header-user-button:focus-visible[b-63yklcuzo5] {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
    border-radius: 2px;
}

.ace-portal-header-menu-backdrop[b-63yklcuzo5] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
    border: none;
}

.ace-portal-header-menu[b-63yklcuzo5] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1001;
    min-width: 224px;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08);
    padding: 4px 0;
    color: #111827;
    cursor: default;
}

.ace-portal-header-menu-identity[b-63yklcuzo5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #F0F0F0;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #111827;
}

.ace-portal-header-menu-usericon[b-63yklcuzo5] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #111827;
}

.ace-portal-header-menu-email[b-63yklcuzo5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ace-portal-header-menu-item[b-63yklcuzo5] {
    display: block;
    padding: 10px 16px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #111827;
    text-decoration: none;
    cursor: pointer;
}

.ace-portal-header-menu-item:hover[b-63yklcuzo5],
.ace-portal-header-menu-item:focus-visible[b-63yklcuzo5] {
    background: #F5F5F5;
    outline: none;
}

/* ----- Main / welcome bar ------------------------------------------- */

.ace-account-main[b-63yklcuzo5] {
    flex: 1 1 auto;
    max-width: 1366px;
    width: 100%;
    margin: 0 auto;
    padding: 28px 48px 48px;
    box-sizing: border-box;
}

.ace-account-welcome[b-63yklcuzo5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ace-account-welcome-title[b-63yklcuzo5] {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--ace-portal-text);
    margin: 0;
    line-height: 1.2;
}

.ace-account-welcome-actions[b-63yklcuzo5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ----- Tabs --------------------------------------------------------- */

.ace-account-tabs[b-63yklcuzo5] {
    display: flex;
    align-items: stretch;
    gap: 28px;
    border-bottom: 1px solid var(--ace-portal-border);
    margin-bottom: 20px;
}

.ace-account-tab[b-63yklcuzo5] {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 2px;
    color: var(--ace-portal-tab-inactive);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ace-account-tab:hover[b-63yklcuzo5],
.ace-account-tab:focus-visible[b-63yklcuzo5] {
    color: var(--ace-portal-tab-active);
}

.ace-account-tab.is-active[b-63yklcuzo5] {
    color: var(--ace-portal-tab-active);
    border-bottom-color: var(--ace-portal-tab-active);
}

/* ----- Card --------------------------------------------------------- */

.ace-account-card[b-63yklcuzo5] {
    background-color: var(--ace-portal-surface);
    border: 1px solid var(--ace-portal-border);
    border-radius: 8px;
    overflow: hidden;
}

.ace-card-toolbar[b-63yklcuzo5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ace-portal-border);
    flex-wrap: wrap;
}

.ace-card-count[b-63yklcuzo5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ace-portal-text);
}

.ace-card-filters[b-63yklcuzo5] {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ace-filter[b-63yklcuzo5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ace-portal-text);
}

.ace-filter-label[b-63yklcuzo5] {
    color: var(--ace-portal-text-muted);
}

.ace-filter-select[b-63yklcuzo5] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid var(--ace-portal-border);
    border-radius: 4px;
    padding: 0 28px 0 10px;
    height: 28px;
    font: inherit;
    font-size: 13px;
    color: var(--ace-portal-text);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ace-portal-text-muted) 50%),
        linear-gradient(135deg, var(--ace-portal-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) center,
        calc(100% - 10px) center;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* ----- Table -------------------------------------------------------- */

.ace-table[b-63yklcuzo5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--ace-portal-text);
}

.ace-table thead[b-63yklcuzo5] {
    background-color: var(--ace-portal-table-head-bg);
}

.ace-table thead th[b-63yklcuzo5] {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--ace-portal-table-head-text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--ace-portal-border);
    white-space: nowrap;
}

.ace-th-help[b-63yklcuzo5] {
    margin-left: 4px;
    color: #9CA3AF;
    font-size: 12px;
}

.ace-th-sort[b-63yklcuzo5] {
    display: inline-flex;
    flex-direction: column;
    line-height: 0;
    margin-left: 6px;
    color: #9CA3AF;
    font-size: 8px;
    vertical-align: middle;
}

.ace-th-sort i[b-63yklcuzo5] {
    line-height: 0.85;
    opacity: 0.45;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.ace-th-sort.ace-th-sort-asc .bi-caret-up-fill[b-63yklcuzo5],
.ace-th-sort.ace-th-sort-desc .bi-caret-down-fill[b-63yklcuzo5] {
    opacity: 1;
    color: var(--ace-portal-text);
}

/* Button used inside a sortable <th>. Renders as plain header text — no border,
   no background — but acts as a focusable click/keyboard target for sorting. */
.ace-th-sort-btn[b-63yklcuzo5] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
}

.ace-th-sort-btn:hover[b-63yklcuzo5],
.ace-th-sort-btn:focus-visible[b-63yklcuzo5] {
    color: var(--ace-portal-text);
}

.ace-th-sort-btn:focus-visible[b-63yklcuzo5] {
    outline: 2px solid var(--ace-portal-tab-active);
    outline-offset: 2px;
    border-radius: 2px;
}

.ace-table tbody td[b-63yklcuzo5] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ace-portal-row-border);
    vertical-align: middle;
}

.ace-table tbody tr:last-child td[b-63yklcuzo5] {
    border-bottom: none;
}

.ace-table tbody tr:hover[b-63yklcuzo5] {
    background-color: #F9FAFB;
}

/* Jobs-tab rows open the ticket-detail modal (WP-306 AC5); cue it and keep it keyboard-accessible. */
.ace-row-clickable[b-63yklcuzo5] {
    cursor: pointer;
}

.ace-row-clickable:focus-visible[b-63yklcuzo5] {
    outline: 2px solid #1677FF;
    outline-offset: -2px;
}

.ace-cell-strong[b-63yklcuzo5] {
    font-weight: 500;
}

.ace-cell-muted[b-63yklcuzo5] {
    color: var(--ace-portal-text-muted);
}

.ace-numeric[b-63yklcuzo5] {
    font-variant-numeric: tabular-nums;
}

.ace-cell-actions[b-63yklcuzo5] {
    text-align: left;
    white-space: nowrap;
}

/* ----- Status pill -------------------------------------------------- */

.ace-pill[b-63yklcuzo5] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ace-pill-green[b-63yklcuzo5]  { background-color: var(--ace-pill-green-bg);  color: var(--ace-pill-green-text);  border-color: var(--ace-pill-green-border); }
.ace-pill-red[b-63yklcuzo5]    { background-color: var(--ace-pill-red-bg);    color: var(--ace-pill-red-text);    border-color: var(--ace-pill-red-border); }
.ace-pill-orange[b-63yklcuzo5] { background-color: var(--ace-pill-orange-bg); color: var(--ace-pill-orange-text); border-color: var(--ace-pill-orange-border); }
.ace-pill-blue[b-63yklcuzo5]   { background-color: var(--ace-pill-blue-bg);   color: var(--ace-pill-blue-text);   border-color: var(--ace-pill-blue-border); }
.ace-pill-grey[b-63yklcuzo5]   { background-color: var(--ace-pill-grey-bg);   color: var(--ace-pill-grey-text);   border-color: var(--ace-pill-grey-border); }

/* ----- Secondary button -------------------------------------------- */

.ace-btn-secondary[b-63yklcuzo5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 4px;
    background-color: var(--ace-portal-secondary-bg);
    color: var(--ace-portal-secondary-text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid var(--ace-portal-secondary-border);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.ace-btn-secondary:hover:not(:disabled)[b-63yklcuzo5],
.ace-btn-secondary:focus-visible:not(:disabled)[b-63yklcuzo5] {
    background-color: var(--ace-portal-secondary-hover-bg);
    border-color: #9CA3AF;
}

.ace-btn-secondary i[b-63yklcuzo5] {
    font-size: 13px;
    line-height: 1;
}

/* ----- Empty state -------------------------------------------------- */

.ace-empty[b-63yklcuzo5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 64px 24px;
    text-align: center;
}

.ace-empty-illustration[b-63yklcuzo5] {
    position: relative;
    width: 96px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #AEB8C2;
}

.ace-empty-illustration > .bi-printer[b-63yklcuzo5] {
    font-size: 64px;
    line-height: 1;
}

.ace-empty-bubble[b-63yklcuzo5] {
    position: absolute;
    top: -4px;
    right: 4px;
    width: 26px;
    height: 22px;
    background-color: #DCE0E6;
    color: #6B7280;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ace-empty-bubble i[b-63yklcuzo5] {
    font-size: 12px;
    line-height: 1;
}

.ace-empty-heading[b-63yklcuzo5] {
    font-size: 14px;
    font-weight: 500;
    color: var(--ace-portal-text-muted);
}

.ace-empty-message[b-63yklcuzo5] {
    font-size: 13px;
    color: var(--ace-portal-text-muted);
}

/* ----- Footer ------------------------------------------------------- */

.ace-portal-footer[b-63yklcuzo5] {
    background-color: var(--ace-portal-footer-bg);
    color: var(--ace-portal-text-dark);
    width: 100%;
    flex: 0 0 auto;
    padding: 32px 48px;
}

.ace-portal-footer-top[b-63yklcuzo5] {
    max-width: 1366px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.ace-portal-footer-brand[b-63yklcuzo5] {
    display: flex;
    align-items: flex-start;
}

.ace-portal-footer-logo[b-63yklcuzo5] {
    height: 32px;
    width: auto;
    color: var(--ace-portal-text-dark);
}

.ace-portal-footer-heading[b-63yklcuzo5] {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ace-portal-text-dark);
    margin: 0 0 12px;
    line-height: 1.2;
}

.ace-portal-footer-address[b-63yklcuzo5] {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ace-portal-text-dark);
}

.ace-portal-footer-phone[b-63yklcuzo5] {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #19895B;
}

.ace-portal-footer-social[b-63yklcuzo5] {
    display: inline-flex;
    gap: 10px;
    color: var(--ace-portal-text-dark);
}

.ace-portal-footer-social a[b-63yklcuzo5] {
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
}

.ace-portal-footer-list[b-63yklcuzo5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ace-portal-footer-list a[b-63yklcuzo5] {
    color: var(--ace-portal-text-dark);
    text-decoration: none;
    font-size: 13px;
}

.ace-portal-footer-list a:hover[b-63yklcuzo5],
.ace-portal-footer-list a:focus-visible[b-63yklcuzo5] {
    text-decoration: underline;
}

.ace-portal-footer-divider[b-63yklcuzo5] {
    border: none;
    border-top: 1px solid var(--ace-portal-footer-divider);
    margin: 28px auto 18px;
    max-width: 1366px;
}

.ace-portal-footer-bottom[b-63yklcuzo5] {
    max-width: 1366px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: var(--ace-portal-text-dark);
}

.ace-portal-footer-legal-links[b-63yklcuzo5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    font-size: 13px;
}

.ace-portal-footer-legal-links li[b-63yklcuzo5]::after {
    content: " ·";
    color: var(--ace-portal-text-dark);
    margin-left: 14px;
}

.ace-portal-footer-legal-links li:last-child[b-63yklcuzo5]::after {
    content: none;
}

.ace-portal-footer-legal-links a[b-63yklcuzo5] {
    color: inherit;
    text-decoration: none;
}

.ace-portal-footer-copyright[b-63yklcuzo5] {
    margin: 0;
    font-size: 13px;
}

.ace-portal-footer-legal-info[b-63yklcuzo5] {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ace-portal-text-dark);
    max-width: 880px;
}

/* ----- Responsive --------------------------------------------------- */

@media (max-width: 900px) {
    .ace-portal-header-inner[b-63yklcuzo5] {
        padding: 12px 16px;
        gap: 12px;
    }

    .ace-portal-header-search[b-63yklcuzo5] {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
    }

    .ace-portal-header-user-name[b-63yklcuzo5] {
        display: none;
    }

    .ace-account-main[b-63yklcuzo5] {
        padding: 20px 16px 32px;
    }

    .ace-card-toolbar[b-63yklcuzo5] {
        padding: 12px 16px;
    }

    .ace-card-filters[b-63yklcuzo5] {
        gap: 12px;
    }

    .ace-table thead th[b-63yklcuzo5],
    .ace-table tbody td[b-63yklcuzo5] {
        padding: 10px 12px;
    }

    .ace-portal-footer[b-63yklcuzo5] {
        padding: 24px 16px;
    }

    .ace-portal-footer-top[b-63yklcuzo5] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* /Components/Ace/AceConsoleSignInPrompt.razor.rz.scp.css */
/* WP-407 A14 - the console sign-in card.

   WHY THIS FILE EXISTS AT ALL, and it is the A13 lesson rather than tidiness. These elements are
   rendered by THIS component, so only this component's scoped stylesheet can match them: Blazor stamps
   its scope attribute onto a component's own markup and never onto a child's. Putting these rules on the
   host page would have produced exactly the A13 B11 defect - a stylesheet that is present, correct, and
   matches nothing.

   WHERE THE VALUES COME FROM, split deliberately rather than copied wholesale. Colours that HAVE a usable
   ACE token use the token - see the link rules at the foot of this file, and why.

   The two literals are literals for two different reasons, and neither is "no token exists":
     - the page background #F4F3F1: ace-theme.css declares no background variable at all.
     - the ink #1F1F1F: the only ink token, --ace-token-ink, is declared in ace-theme.css and consumed
       NOWHERE in the solution, and its value differs from the #1F1F1F every ACE surface actually renders.
       Adopting it would change the rendered colour, which would be inventing a design decision rather than
       following one.
   AceSignin.razor.css's own --ace-text is not an option either: it is scoped to that page's shell.

   Nothing here invents a colour. The designer returns 20 Aug and owns anything beyond that. */

.ace-console-signin[b-fflehgs7zt] {
    width: 100%;
    max-width: 408px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
    padding: 32px;
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1F1F1F;
}

.ace-console-signin h1[b-fflehgs7zt] {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: #1F1F1F;
}

.ace-console-signin p[b-fflehgs7zt] {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.65);
}

.ace-console-signin p:last-child[b-fflehgs7zt] {
    margin-bottom: 0;
}

/* The primary way onward - always a navigation to an IdP or back to the console, never a form submit.

   THE ACE ACTION BLUE, NOT ANT'S. An earlier version of this file copied #1890FF / #40A9FF from
   AceSignin.razor.css and the gate blocked it: #1890FF is Ant Design's own default primary, and
   ace-theme.css exists partly to stop that value appearing on an ACE surface - it pins the Ant primitives
   at the prototype's action blue #1F80F0 precisely "so an unstyled Ant component cannot render Ant's own
   #1890FF instead", because two close-but-unequal blues read as a bug.

   The copy was not merely off-token, it MEASURABLY WON. Blazor appends the scope attribute to the last
   compound selector, so `.ace-console-signin a` compiles to `.ace-console-signin a[b-xxxxxxxx]` at
   specificity 0-2-1 and beat `[data-portal="ace"] a` at 0-1-1 whatever the load order - so these links
   would have painted the wrong blue on a surface where the right one was already resolving.

   AceSignin.razor.css was the wrong precedent: it is WP-321 and predates this theme layer, and its own
   --ace-blue is off-theme. Copying it inherited a defect.

   Fallbacks equal the declared values, per the 18 Aug ruling on how these are written. */
.ace-console-signin a[b-fflehgs7zt] {
    color: var(--ace-action-blue, #1F80F0);
    text-decoration: none;
}

.ace-console-signin a:hover[b-fflehgs7zt] {
    color: var(--ace-action-blue-hover, #1568D1);
    text-decoration: underline;
}
/* /Components/Ace/AceJobsTable.razor.rz.scp.css */
/* AceJobsTable — extracted from WP-304 AccountPage.RenderJobsTab so the same
   jobs-list surface can be reused on AceProductPage's Jobs tabpanel and on
   AceWelcomeBack's Jobs tabpanel.

   CSS variables are duplicated here so the component renders correctly outside
   of AccountPage (which scopes them to .ace-account-page). Source values are
   1:1 with the originals in AccountPage.razor.css — same Ant palette mirrored
   from Airedale.Blazor.Components/WP-297 tokens.
*/

.ace-jobs-table[b-nx8cd7tfbe] {
    --ace-portal-text: #111827;
    --ace-portal-text-muted: #6B7280;
    --ace-portal-border: #E5E7EB;
    --ace-portal-row-border: #F3F4F6;
    --ace-portal-table-head-bg: #F9FAFB;
    --ace-portal-table-head-text: #4B5563;
    --ace-portal-tab-active: #1B8C5E;

    /* White card chrome — Figma 1276:24233 Table/Column-Based defines fill=#ffffff
       for the wrapping container. AccountPage already wraps RenderJobsTab in
       .ace-account-card with the same chrome (background + 1px #E5E7EB border +
       8px radius + overflow:hidden) so the toolbar's bottom border + the rounded
       outer corners line up cleanly. Same values applied here so the component
       renders the same card no matter where it's mounted. AccountPage's existing
       outer .ace-account-card is unaffected — it still uses its own inline
       RenderJobsTab, not this component. */
    background-color: #fff;
    border: 1px solid var(--ace-portal-border);
    border-radius: 8px;
    overflow: hidden;
    --ace-pill-green-bg: #F6FFED;
    --ace-pill-green-text: #52C41A;
    --ace-pill-green-border: #B7EB8F;
    --ace-pill-red-bg: #FFF1F0;
    --ace-pill-red-text: #F5222D;
    --ace-pill-red-border: #FFA39E;
    --ace-pill-orange-bg: #FFF7E6;
    --ace-pill-orange-text: #FA8C16;
    --ace-pill-orange-border: #FFD591;
    --ace-pill-blue-bg: #E6F4FF;
    --ace-pill-blue-text: #1677FF;
    --ace-pill-blue-border: #91CAFF;
    --ace-pill-grey-bg: #FAFAFA;
    --ace-pill-grey-text: #6B7280;
    --ace-pill-grey-border: #D9D9D9;
}

/* ----- Toolbar (count + filter dropdowns) ---------------------------- */

.ace-card-toolbar[b-nx8cd7tfbe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ace-portal-border);
    flex-wrap: wrap;
}

.ace-card-count[b-nx8cd7tfbe] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ace-portal-text);
}

.ace-card-filters[b-nx8cd7tfbe] {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ace-filter[b-nx8cd7tfbe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ace-portal-text);
}

.ace-filter-label[b-nx8cd7tfbe] {
    color: var(--ace-portal-text-muted);
}

.ace-filter-select[b-nx8cd7tfbe] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid var(--ace-portal-border);
    border-radius: 4px;
    padding: 0 28px 0 10px;
    height: 28px;
    font: inherit;
    font-size: 13px;
    color: var(--ace-portal-text);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ace-portal-text-muted) 50%),
        linear-gradient(135deg, var(--ace-portal-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) center,
        calc(100% - 10px) center;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* ----- Table -------------------------------------------------------- */

.ace-table[b-nx8cd7tfbe] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--ace-portal-text);
}

.ace-table thead[b-nx8cd7tfbe] {
    background-color: var(--ace-portal-table-head-bg);
}

.ace-table thead th[b-nx8cd7tfbe] {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--ace-portal-table-head-text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--ace-portal-border);
    white-space: nowrap;
}

.ace-th-help[b-nx8cd7tfbe] {
    margin-left: 4px;
    color: #9CA3AF;
    font-size: 12px;
}

.ace-th-sort[b-nx8cd7tfbe] {
    display: inline-flex;
    flex-direction: column;
    line-height: 0;
    margin-left: 6px;
    color: #9CA3AF;
    font-size: 8px;
    vertical-align: middle;
}

.ace-th-sort i[b-nx8cd7tfbe] {
    line-height: 0.85;
    opacity: 0.45;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.ace-th-sort.ace-th-sort-asc .bi-caret-up-fill[b-nx8cd7tfbe],
.ace-th-sort.ace-th-sort-desc .bi-caret-down-fill[b-nx8cd7tfbe] {
    opacity: 1;
    color: var(--ace-portal-text);
}

.ace-th-sort-btn[b-nx8cd7tfbe] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
}

.ace-th-sort-btn:hover[b-nx8cd7tfbe],
.ace-th-sort-btn:focus-visible[b-nx8cd7tfbe] {
    color: var(--ace-portal-text);
}

.ace-th-sort-btn:focus-visible[b-nx8cd7tfbe] {
    outline: 2px solid var(--ace-portal-tab-active);
    outline-offset: 2px;
    border-radius: 2px;
}

.ace-table tbody td[b-nx8cd7tfbe] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ace-portal-row-border);
    vertical-align: middle;
}

.ace-table tbody tr:last-child td[b-nx8cd7tfbe] {
    border-bottom: none;
}

.ace-table tbody tr:hover[b-nx8cd7tfbe] {
    background-color: #F9FAFB;
}

/* DUAT-17: jobs rows render as buttons (cursor pointer + visible focus ring)
   when the consumer wires an OnRowSelected callback. Same rule lives in
   AccountPage.razor.css for the /ace/jobs activity-history view — duplicated
   here because Blazor CSS isolation scopes each .razor.css to its own
   component. Values intentionally identical so the two contexts look the
   same to the user. */
.ace-row-clickable[b-nx8cd7tfbe] {
    cursor: pointer;
}

/* DUAT-17 a11y fix: the interactive control is a real <button> inside the Job
   Reference cell so the <tr> keeps its default role="row" and table semantics
   stay intact. Reset the browser button chrome so the cell text reads the same
   as before; keep the keyboard focus ring on the button. */
.ace-row-button[b-nx8cd7tfbe] {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}
.ace-row-button:focus-visible[b-nx8cd7tfbe] {
    outline: 2px solid #1677FF;
    outline-offset: 2px;
}

.ace-cell-strong[b-nx8cd7tfbe] {
    font-weight: 500;
}

.ace-cell-muted[b-nx8cd7tfbe] {
    color: var(--ace-portal-text-muted);
}

.ace-numeric[b-nx8cd7tfbe] {
    font-variant-numeric: tabular-nums;
}

/* ----- Status pill -------------------------------------------------- */

.ace-pill[b-nx8cd7tfbe] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ace-pill-green[b-nx8cd7tfbe]  { background-color: var(--ace-pill-green-bg);  color: var(--ace-pill-green-text);  border-color: var(--ace-pill-green-border); }
.ace-pill-red[b-nx8cd7tfbe]    { background-color: var(--ace-pill-red-bg);    color: var(--ace-pill-red-text);    border-color: var(--ace-pill-red-border); }
.ace-pill-orange[b-nx8cd7tfbe] { background-color: var(--ace-pill-orange-bg); color: var(--ace-pill-orange-text); border-color: var(--ace-pill-orange-border); }
.ace-pill-blue[b-nx8cd7tfbe]   { background-color: var(--ace-pill-blue-bg);   color: var(--ace-pill-blue-text);   border-color: var(--ace-pill-blue-border); }
.ace-pill-grey[b-nx8cd7tfbe]   { background-color: var(--ace-pill-grey-bg);   color: var(--ace-pill-grey-text);   border-color: var(--ace-pill-grey-border); }

/* ----- Empty state -------------------------------------------------- */

.ace-empty[b-nx8cd7tfbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--ace-portal-text-muted);
}

.ace-empty-illustration[b-nx8cd7tfbe] {
    position: relative;
    font-size: 56px;
    color: #D1D5DB;
    margin-bottom: 16px;
}

.ace-empty-bubble[b-nx8cd7tfbe] {
    position: absolute;
    top: -4px;
    right: -16px;
    font-size: 18px;
    background: #fff;
    border: 1px solid var(--ace-portal-border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ace-empty-heading[b-nx8cd7tfbe] {
    font-weight: 600;
    color: var(--ace-portal-text);
    margin-bottom: 4px;
}

.ace-empty-message[b-nx8cd7tfbe] {
    font-size: 13px;
    color: var(--ace-portal-text-muted);
}
/* /Components/Ace/AceSerialResultCard.razor.rz.scp.css */
/* AceSerialResultCard — pixel-faithful to Figma 1466:13209 (Found) +
   1466:13672 (NotFound). All measurements taken from the Figma REST API
   payload — see component @* doc comment for the source nodes. */

.ace-serial-result[b-32mo4zki8w] {
    width: 100%;
    max-width: 573px;
    display: block;
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Card — 573×142, white fill, 1px #F0F0F0 stroke. Sits flush under AceLanding's
   shared .ace-cta-header (whose inset bottom hairline acts as the separator), so
   square the top corners and drop the top border. Layout mirrors .ace-cta-header +
   .ace-search-card for the Empty / Submitting states (audit 2026-06-04 F8 — lifted
   the per-card head into AceLanding so the Empty / Found / NotFound layouts share
   one consistent head surface). */
.ace-serial-result-card[b-32mo4zki8w] {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    border-top: 0;
    border-radius: 0 0 2px 2px;
}

/* Body — 32px padding all sides per Figma 'body' frame. */
.ace-serial-result-body[b-32mo4zki8w] {
    padding: 32px;
    display: flex;
    align-items: flex-start;
    gap: 24px;                    /* horizontal gap between image and content */
}

/* Image — 80×80, 1px stroke (grey or red depending on outcome), no radius.
   Inner image is centred and contained. */
.ace-serial-result-image[b-32mo4zki8w] {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ace-serial-result-image img[b-32mo4zki8w] {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* Exclamation-circle icon for the NotFound state — 36×36 per Figma. The Icon
   component from AntDesign renders as a sized <span> wrapping an <svg>. */
.ace-serial-result-image[b-32mo4zki8w]  .anticon {
    font-size: 36px;
    color: rgba(0, 0, 0, 0.45);
    line-height: 0;
}

/* NotFound variant overrides the image-frame stroke to red #FF4D4F per Figma. */
.ace-serial-result-not-found .ace-serial-result-image[b-32mo4zki8w] {
    border-color: #FF4D4F;
}

/* Content stack — title/subtitle then button row. Figma has the inner
   'LayoutBlocks/vertical×2' gap = 4px between the title text group and the
   button group; the title group itself has gap = 0 (title + subtitle sit
   directly under each other, line-heights provide separation). */
.ace-serial-result-content[b-32mo4zki8w] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ace-serial-result-text[b-32mo4zki8w] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ace-serial-result-asset-title[b-32mo4zki8w] {
    margin: 0;
    font-weight: 700;            /* Roboto Bold per Figma 1466:13209/13672 */
    font-size: 1rem;             /* 16px */
    line-height: 1.5rem;         /* 24px */
    color: rgba(0, 0, 0, 0.85);  /* Found: dark text */
}

/* NotFound variant — title turns red #FF4D4F per Figma. */
.ace-serial-result-not-found .ace-serial-result-asset-title[b-32mo4zki8w] {
    color: #FF4D4F;
}

.ace-serial-result-asset-subtitle[b-32mo4zki8w] {
    margin: 0;
    font-weight: 400;            /* Roboto Regular */
    font-size: 0.875rem;         /* 14px */
    line-height: 1.375rem;       /* 22px */
    color: rgba(0, 0, 0, 0.45);
}

/* Actions row — horizontal gap = 8px per Figma 'Button-Group'. Buttons are
   AntDesign components; their default rendering is 32 high, 4/15 padding,
   2px radius, #D9D9D9 stroke (Default) or #1890FF fill (Primary) — already
   1:1 with the Figma values. We don't override AntDesign's button paint.
   Vertical spacing from the subtitle is the gap=4px on the parent flex
   column (.ace-serial-result-content), per Figma 'LayoutBlocks/vertical×2'. */
.ace-serial-result-actions[b-32mo4zki8w] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Mobile — keep image to the left, allow the content to wrap below if the
   viewport is narrower than 573px. Buttons stay in a row but wrap. */
@media (max-width: 600px) {
    .ace-serial-result-body[b-32mo4zki8w] {
        gap: 16px;
        padding: 24px;
    }
    .ace-serial-result-image[b-32mo4zki8w] {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
    }
    .ace-serial-result-image[b-32mo4zki8w]  .anticon {
        font-size: 28px;
    }
}
/* /Components/Ace/AceSiteAddressInput.razor.rz.scp.css */
/* WP-271 address-lookup widget styling. Matches the Figma site-address
   field — postcode input + Search button on one line, then a dropdown of
   matches, with a manual-entry fallback link. */

/* Figma Frame 987657 (488×72, V gap 8) — postcode search input stacked
   above the address-results select. The 8px gap is enforced here so the
   helper "Enter address manually" still sits in its own row beneath. */
.ace-site-address[b-lve882nhst] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Recolour Ant <Search>'s EnterButton + pin it to 32px to match the input
   (Figma "Input-Addon/Icon" 1247:37340: fill #FAFAFA, stroke #D9D9D9, glyph
   #000@0.25; height 32 matches the input's 32). Ant Blazor's default search-
   button picks up icon-only sizing (40px) so we override every dimension. */
[b-lve882nhst] .ant-input-search .ant-input-search-button,
[b-lve882nhst] .ant-input-search .ant-input-group-addon > .ant-btn {
    background-color: #FAFAFA !important;
    border: 1px solid #D9D9D9 !important;
    color: rgba(0, 0, 0, 0.85) !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 30px !important; /* 32 minus top/bottom border */
    padding: 0 12px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-lve882nhst] .ant-input-search .ant-input-search-button .anticon,
[b-lve882nhst] .ant-input-search .ant-input-search-button .anticon svg {
    color: rgba(0, 0, 0, 0.25);
    font-size: 14px;
    line-height: 1;
}

[b-lve882nhst] .ant-input-search .ant-input-search-button:hover,
[b-lve882nhst] .ant-input-search .ant-input-search-button:focus-visible {
    background-color: #F0F0F0 !important;
    border-color: #BFBFBF !important;
    color: rgba(0, 0, 0, 0.85) !important;
}

.ace-site-address-error[b-lve882nhst] {
    color: #FF4D4F;
    font-size: 0.875rem;
    line-height: 1.375rem;
}

/* DUAT-26: manual-entry format guidance. Matches the ".ace-register-helper" caption
   styling on the Register form (0.875rem, 45% black) so it reads as standard helper text. */
.ace-site-address-helper[b-lve882nhst] {
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.875rem;
    line-height: 1.375rem;
}

/* Toggle between postcode-lookup mode and manual-entry mode. Styled as a
   plain-text affordance with a primary-blue underline on hover so it reads
   as actionable secondary copy rather than a heavyweight button. Matches
   the ".ace-register-helper" caption colour on Register so the row sits
   visually in the form's helper-text band. */
.ace-site-address-toggle[b-lve882nhst] {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    color: var(--ace-brand-green, #1A854C);   /* WP-353: was Ant blue #1890FF */
    font-size: 0.875rem;
    line-height: 1.375rem;
    cursor: pointer;
}

.ace-site-address-toggle:hover[b-lve882nhst],
.ace-site-address-toggle:focus-visible[b-lve882nhst] {
    text-decoration: underline;
}
/* /Components/Ace/SupportTicket/SupportTicketConfirmation.razor.rz.scp.css */
/* Step 3 — Confirmation. Vertical stack with generous spacing between the
   success result, reference statistic, "what happens next" list, and the
   summary / detail sections. Sections span the full card width (the wizard
   card body owns the 24px padding and 1040 max-width). */
/* 24px body padding (matching the card body in the board) so every section sits
   inset and the white card shows on the left/right of the grey heads, reference
   box, tables and the blue callout. The wizard footer stays outside this padding,
   so its 2px top divider spans the full card width beneath the inset content. */
.ticket-confirmation[b-hppbahfada] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
    padding: 24px;
    font-family: Roboto, sans-serif;
}

/* Section wrapper — no outer border (the board's Request summary / What happens
   next sections are just a grey head + content; the detail tables carry their own
   frame, below). A border here produced stray lines under the last step and the
   asset row. */
.ticket-confirmation-section[b-hppbahfada] {
    box-sizing: border-box;
}

/* Section banner (56px) — used by Request summary and What happens next. */
.ticket-confirmation-section-banner[b-hppbahfada] {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 24px;
    background: #F5F5F5;
    box-sizing: border-box;
}

.ticket-confirmation-section-heading[b-hppbahfada] {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
}

/* "What happens next" body padding (24 top/bottom, 24 left) per the board. The
   shared WhatHappensNext renders its own heading; suppress it here so the grey
   banner above is the only heading. */
.ticket-confirmation-next[b-hppbahfada] {
    padding: 24px 24px 24px 24px;
}

.ticket-confirmation-next[b-hppbahfada]  .what-happens-next-heading {
    display: none;
}

/* Request summary — asset thumbnail + name + serial. */
.ticket-confirmation-summary-asset[b-hppbahfada] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
}

.ticket-confirmation-asset-thumb[b-hppbahfada] {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex: 0 0 auto;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    background: #fff;
}

.ticket-confirmation-asset-thumb--placeholder[b-hppbahfada] {
    background: #FAFAFA;
}

.ticket-confirmation-asset-text[b-hppbahfada] {
    display: flex;
    flex-direction: column;
}

.ticket-confirmation-asset-name[b-hppbahfada] {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
}

.ticket-confirmation-asset-serial[b-hppbahfada] {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.45);
}

/* Detail tables (Job details / Customer information / Billing information) —
   a 38px grey table head, then alternating head (column-label) and value rows.
   Cells are bordered 0.5px #F0F0F0; label rows #FAFAFA, value rows #FFFFFF,
   matching the board's bordered Descriptions look. */
.ticket-confirmation-table[b-hppbahfada] {
    margin: 0;
    padding: 0;
    /* The table carries its own outer frame (the section wrapper no longer has a
       border); internal row/cell borders complete the bordered-Descriptions grid. */
    border: 0.5px solid #F0F0F0;
    overflow: hidden;
}

/* 38px grey table head with the section title (Body/medium 14/22). */
.ticket-confirmation-table-head[b-hppbahfada] {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    background: #F5F5F5;
    box-sizing: border-box;
}

.ticket-confirmation-table-title[b-hppbahfada] {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.85);
}

.ticket-confirmation-table-row[b-hppbahfada] {
    display: grid;
    /* 0.5px cell separators come from a shared top border plus per-cell left
       borders below; gap stays 0 so the cell backgrounds tile flush. */
    gap: 0;
    border-top: 0.5px solid #F0F0F0;
}

.ticket-confirmation-table--3col .ticket-confirmation-table-row[b-hppbahfada] {
    grid-template-columns: repeat(3, 1fr);
}

/* Column-label rows — #FAFAFA cells, 14/22 medium, rgba(.45). */
.ticket-confirmation-table-row--head dt[b-hppbahfada] {
    margin: 0;
    min-height: 38px;
    padding: 8px 16px;
    background: #FAFAFA;
    border-left: 0.5px solid #F0F0F0;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.45);
}

/* Value rows — #FFFFFF cells, 14/22 regular, rgba(.85). */
.ticket-confirmation-table-row dd[b-hppbahfada] {
    margin: 0;
    min-height: 38px;
    padding: 8px 16px;
    background: #fff;
    border-left: 0.5px solid #F0F0F0;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.85);
}

/* The first cell in each row has no left border (the section border supplies it). */
.ticket-confirmation-table-row dt:first-child[b-hppbahfada],
.ticket-confirmation-table-row dd:first-child[b-hppbahfada] {
    border-left: none;
}

.ticket-confirmation-description[b-hppbahfada] {
    white-space: pre-wrap;
}

/* Triage status — red dot + label, per the board. */
.ticket-confirmation-triage[b-hppbahfada] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ticket-confirmation-triage-dot[b-hppbahfada] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF4D4F;
    flex: 0 0 auto;
}

/* Backend-owed value placeholders (WP-283) — visually muted so they read as
   "to be supplied" rather than real data. */
.ticket-confirmation-placeholder[b-hppbahfada] {
    color: rgba(0, 0, 0, 0.45);
    font-style: italic;
}

/* Important information — preserve the 5 newline-separated lines of the callout
   message. Scoped to this component so it does not bleed onto other Alerts. */
.ticket-confirmation-important[b-hppbahfada]  .ant-alert-description {
    white-space: pre-line;
}

/* Stack table columns on narrow viewports — mobile-first per
   ant-blazor-responsive standards. */
@media (max-width: 575px) {
    .ticket-confirmation-table--3col .ticket-confirmation-table-row[b-hppbahfada] {
        grid-template-columns: 1fr;
    }

    .ticket-confirmation-table-row--head dt[b-hppbahfada],
    .ticket-confirmation-table-row dd[b-hppbahfada] {
        border-left: none;
    }
}
/* /Components/Ace/SupportTicket/SupportTicketRequestDetails.razor.rz.scp.css */
/* Step 2 — Request Details. The wizard top row owns the page heading
   ("Request support") + Stepper; this component starts with the banner header
   "What type of support is required?" sitting flush against the inside-top
   edge of the wizard form card. */
/* The 24px padding + 16px gap give the grey banner a white border on all sides
   inside the card, exactly mirroring Step 1's .select-asset layout. */
.request-details[b-q6ecof4e45] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    font-family: Roboto, sans-serif;
}

/* AntDesign form controls default to their own font stack (Segoe UI on Windows),
   which reads as "not Roboto" in design review. Pin them to Roboto so labels,
   inputs, selects, textareas and checkboxes all match the Figma typography. */
.request-details[b-q6ecof4e45]  .ant-form,
.request-details[b-q6ecof4e45]  .ant-form-item-label > label,
.request-details[b-q6ecof4e45]  .ant-input,
.request-details[b-q6ecof4e45]  .ant-input-affix-wrapper,
.request-details[b-q6ecof4e45]  textarea.ant-input,
.request-details[b-q6ecof4e45]  .ant-select,
.request-details[b-q6ecof4e45]  .ant-select-selection-item,
.request-details[b-q6ecof4e45]  .ant-select-selection-placeholder,
.request-details[b-q6ecof4e45]  .ant-checkbox-wrapper {
    font-family: Roboto, sans-serif;
}

/* Banner header — grey strip sitting in the 24px white margin above, identical
   to Step 1's .step-banner. Duplicated here (rather than imported) so each step
   component stays self-contained via Blazor scoped CSS. */
.step-banner[b-q6ecof4e45] {
    background: #F5F5F5;
    padding: 0 24px;
    box-shadow: inset 0 -1px 0 #F0F0F0;
    height: 56px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.step-banner-heading[b-q6ecof4e45] {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
    padding: 16px 0;
}

/* Form body — the parent .request-details now owns the 24px inset, so the body
   just stacks within it. */
.step-body[b-q6ecof4e45] {
    padding: 0;
}

/* In-form grey section banners (the category-details heading and the billing
   "Billing details" heading) reuse the .step-banner look; this just adds the
   section spacing — roughly 32px above (the preceding FormItem already
   contributes ~24px) and 16px below — matching the Figma body section gap. */
.form-banner[b-q6ecof4e45] {
    margin: 8px 0 16px;
}

/* Amber "Additional Charges" warning callout — Ant warning palette (#FFFBE6 /
   #FFE58F / #FAAD14 icon), matching the Figma. */
.additional-charges[b-q6ecof4e45] {
    display: flex;
    gap: 10px;
    padding: 9px 16px;
    margin: 16px 0;
    background: #FFFBE6;
    border: 1px solid #FFE58F;
    border-radius: 2px;
}

.additional-charges-icon[b-q6ecof4e45] {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    color: #FAAD14;
}

.additional-charges-text[b-q6ecof4e45] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.additional-charges-heading[b-q6ecof4e45] {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
}

.additional-charges-body[b-q6ecof4e45] {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.85);
}

.additional-charges-link[b-q6ecof4e45] {
    color: var(--ace-brand-green, #1A854C);   /* WP-353: was Ant blue #1890FF */
    text-decoration: underline;
}

/* White sub-section header strips (Billing information, Terms and conditions) —
   the Figma "head" white variant: 56px strip, text inset 24px, bottom divider. */
.subsection-banner[b-q6ecof4e45] {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 24px;
    margin: 16px 0;
    background: #FFFFFF;
    box-shadow: inset 0 -1px 0 #F0F0F0;
    box-sizing: border-box;
}

.subsection-banner-heading[b-q6ecof4e45] {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
}

/* Helper text shown beneath a field (e.g. Purchase order number → "Contact for
   the asset owner"), per the matured Figma board. */
.field-helper-text[b-q6ecof4e45] {
    margin-top: 4px;
    font-size: 12px;
    line-height: 20px;
    color: var(--portal-text-muted, rgba(0, 0, 0, 0.45));
}

/* Billing-address lookup. The magnifier suffix is the clickable search trigger;
   give it a pointer + the Ant primary tint on hover so it reads as actionable. */
.request-details[b-q6ecof4e45]  .billing-search-icon {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.45);
}

.request-details[b-q6ecof4e45]  .billing-search-icon:hover {
    color: var(--ace-brand-green, #1A854C);   /* WP-353: was Ant blue #1890FF */
}

/* The resolved-address dropdown sits directly under the postcode input. */
.billing-results[b-q6ecof4e45] {
    margin-top: 8px;
}

.request-details[b-q6ecof4e45]  .billing-results .ant-select {
    width: 100%;
}

/* Reuses the muted helper-text tone but in the error colour for a bad postcode /
   no results. */
.billing-address-error[b-q6ecof4e45] {
    color: var(--portal-error, #FF4D4F);
}

/* Lightweight text-button toggle to swap between lookup and manual entry. */
.billing-manual-toggle[b-q6ecof4e45] {
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: var(--ace-brand-green, #1A854C);   /* WP-353: was Ant blue #1890FF */
    cursor: pointer;
}

.billing-manual-toggle:hover[b-q6ecof4e45] {
    text-decoration: underline;
}

/* Blue "Terms and conditions" info callout (Ant Daybreak Blue palette #E6F7FF /
   #91D5FF), matching the Figma box that summarises the charge terms above the
   accept checkbox. Title is Subheading 16/regular, body Body 14/regular. */
.terms-callout[b-q6ecof4e45] {
    margin: 16px 0;
    padding: 9px 16px;
    background: #E6F7FF;
    border: 1px solid #91D5FF;
    border-radius: 2px;
}

.terms-callout-heading[b-q6ecof4e45] {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
}

.terms-callout-body[b-q6ecof4e45] {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.85);
}

/* Terms & conditions accept row. Custom checkbox matching the Figma's rounded grey
   box (16x16, #F3F3F5 / #D8D8D8, 4px radius) so it renders reliably and on-brand;
   the accept copy is a <label> (toggles the box) and the trailing link is separate. */
.terms-accept[b-q6ecof4e45] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.terms-checkbox[b-q6ecof4e45] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    background: #F3F3F5;
    border: 1px solid #D8D8D8;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    position: relative;
}

.terms-checkbox:checked[b-q6ecof4e45] {
    background: var(--ace-brand-green, #1A854C);   /* WP-353: was Ant blue #1890FF */
    border-color: var(--ace-brand-green, #1A854C);
}

.terms-checkbox:checked[b-q6ecof4e45]::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.terms-checkbox:focus-visible[b-q6ecof4e45] {
    outline: 2px solid rgba(24, 144, 255, 0.4);
    outline-offset: 1px;
}

.terms-text[b-q6ecof4e45] {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #202224;
}

.terms-text label[b-q6ecof4e45] {
    cursor: pointer;
}

.terms-link[b-q6ecof4e45] {
    margin-left: 4px;
    color: var(--ace-brand-green, #1A854C);   /* WP-353: was Ant blue #1890FF */
    text-decoration: underline;
}

/* Inline error shown when the General Service T&Cs gate is not satisfied on submit. */
.terms-error[b-q6ecof4e45] {
    margin-top: 6px;
    font-size: 14px;
    line-height: 22px;
    color: var(--portal-error, #FF4D4F);
}

/* Mobile-first: tighten paddings on narrow viewports (mirrors Step 1). */
@media (max-width: 575px) {
    .request-details[b-q6ecof4e45] {
        padding: 16px;
        gap: 12px;
    }

    .step-banner[b-q6ecof4e45] {
        padding: 0 16px;
        height: auto;
    }

    .step-banner-heading[b-q6ecof4e45] {
        padding: 12px 0;
    }

    .step-body[b-q6ecof4e45] {
        padding: 0;
    }
}
/* /Components/Ace/SupportTicket/SupportTicketSelectAsset.razor.rz.scp.css */
/* Step 1 — Select Asset. Vertical, full-width list of clickable cards inside
   the wizard form card. The first child is a banner header strip; the list
   body has its own padding. Token values taken verbatim from the Figma Dev
   Mode export (frame WP-274 Step 1). */
/* The Figma .body has padding: 24px which produces the white border around
   the grey banner and the list. We replicate that here by giving .select-asset
   its own 24px padding and a 16px gap between banner and list (Frame 987654). */
.select-asset[b-g8no0j9tp1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    font-family: Roboto, sans-serif;
}

/* Banner header — grey strip sitting in the 24px white margin above. Figma
   head: bg #F5F5F5, height 56, padding 0 24 with inner title-wrapper padding
   16 0; box-shadow inset 0 -1px 0 #F0F0F0 as the divider rather than a border. */
.step-banner[b-g8no0j9tp1] {
    background: #F5F5F5;
    padding: 0 24px;
    box-shadow: inset 0 -1px 0 #F0F0F0;
    height: 56px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.step-banner-heading[b-g8no0j9tp1] {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
    padding: 16px 0;
}

.select-asset-empty[b-g8no0j9tp1] {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin: 0 0 12px;
}

/* List container — explicit column stack, full-width rows. Figma gap: 16px. */
.select-asset-list[b-g8no0j9tp1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Each row is a button styled as a selectable card with sharp (2px) corners
   per Figma. Reset native button styling then apply the card chrome. Padding,
   height, and border colour come from the Figma "Statistic" element export:
   padding 16/24, height 108, border 1px #D8D8D8, gap 4 between thumb column
   and the text block (thumb outer 80 + 4 = text-block left:84). */
.select-asset-row[b-g8no0j9tp1] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 108px;
    box-sizing: border-box;
    padding: 16px 24px;
    margin: 0;
    border: 1px solid #D8D8D8;
    border-radius: 2px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select-asset-row:hover[b-g8no0j9tp1] {
    border-color: #1E63EF;
}

.select-asset-row:focus-visible[b-g8no0j9tp1] {
    outline: none;
    border-color: #1E63EF;
    box-shadow: 0 0 0 2px rgba(30, 99, 239, 0.2);
}

/* Selected row — Figma uses the deeper blue #1E63EF for the selected border
   (different from the #1890FF radio dot colour). Border stays 1px so the row
   geometry doesn't jump on selection toggle. */
.select-asset-row[aria-checked="true"][b-g8no0j9tp1],
.select-asset-row--selected[b-g8no0j9tp1] {
    border-color: #1E63EF;
}

/* Thumbnail block — Figma Frame 71144 outer is 80x76 (the image inside is
   63x76 centred). We expose the 80x76 footprint and let object-fit:contain
   shrink the image to the 63x76 inner area so it visually matches. */
.select-asset-thumb[b-g8no0j9tp1] {
    width: 80px;
    height: 76px;
    flex: 0 0 80px;
    object-fit: contain;
    border-radius: 2px;
    background: #F5F5F5;
}

.select-asset-thumb--placeholder[b-g8no0j9tp1] {
    border: 1px dashed #D8D8D8;
}

/* Asset details — name on top, plain muted warranty status underneath. Figma
   Frame 987618 is 44px tall (name 22 + gap 4 + subtext 20). Fonts exactly per
   Figma (Body/regular 14/22 for name, Footnote/description 12/20 for subtext). */
.select-asset-option-text[b-g8no0j9tp1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.select-asset-name[b-g8no0j9tp1] {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #000000;
}

.select-asset-warranty[b-g8no0j9tp1] {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.45);
}

/* Hand-rolled radio indicator on the far right edge of each row. Figma:
   16x16, 1px border, full circle. Selected fill colour is the primary blue
   #1890FF (distinct from the row border colour). The selected state also
   shows a #E6F7FF halo behind the radio — implemented via ::before so the
   16x16 footprint of the indicator is unchanged. */
.select-asset-radio[b-g8no0j9tp1] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #D9D9D9;
    background: #fff;
    box-sizing: border-box;
    position: relative;
    margin-left: auto;
}

.select-asset-radio--checked[b-g8no0j9tp1] {
    border-color: var(--ace-brand-green, #1A854C);   /* WP-353: was Ant blue #1890FF */
}

/* Selected radio: light-blue halo (Figma 16x16 #E6F7FF) sits behind the
   white circle + dot. Rendered via ::before so we don't change the layout
   footprint; the dot is rendered via ::after as before. */
.select-asset-radio--checked[b-g8no0j9tp1]::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--ace-green-bg, #E6F0E6);   /* WP-353: selected-radio halo was Ant light blue #E6F7FF */
    z-index: 0;
}

.select-asset-radio--checked[b-g8no0j9tp1]::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--ace-brand-green, #1A854C);   /* WP-353: selected-radio dot was Ant blue #1890FF */
    z-index: 1;
}

/* Add-new-asset row — leading icon, no thumbnail. The icon container is sized
   to match the 80x76 thumbnail column so the rows align vertically. Figma
   Gold/icon glyph is 36x36 with Vector colour rgba(0,0,0,0.85). */
.select-asset-add-icon[b-g8no0j9tp1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 76px;
    flex: 0 0 80px;
    color: rgba(0, 0, 0, 0.85);
}

.select-asset-add-icon[b-g8no0j9tp1]  .anticon {
    font-size: 36px;
    line-height: 1;
}

.select-asset-row--add[b-g8no0j9tp1] {
    background: #fff;
}

/* Mobile-first: tighten paddings on narrow viewports. */
@media (max-width: 575px) {
    .select-asset[b-g8no0j9tp1] {
        padding: 16px;
        gap: 12px;
    }

    .step-banner[b-g8no0j9tp1] {
        padding: 0 16px;
        height: auto;
    }

    .step-banner-heading[b-g8no0j9tp1] {
        padding: 12px 0;
    }

    .select-asset-row[b-g8no0j9tp1] {
        padding: 12px 16px;
        gap: 12px;
        height: auto;
        min-height: 92px;
    }

    .select-asset-thumb[b-g8no0j9tp1],
    .select-asset-add-icon[b-g8no0j9tp1] {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .select-asset-add-icon[b-g8no0j9tp1]  .anticon {
        font-size: 28px;
    }
}
/* /Components/Ace/SupportTicket/SupportTicketWizard.razor.rz.scp.css */
/* ACE Support Ticket wizard shell layout. Centred 1040px column per the Figma
   .Page-Header(Legacy) and .card(legacy) tokens. */
.support-ticket-wizard[b-m83ppmgbib] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: Roboto, sans-serif;
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
}

/* Top row: heading left + Stepper right on the same line — matches the Figma
   .Page-Header(Legacy) (1040 max, padding 16/24, height 72) where the progress
   indicator sits inline with the heading, NOT inside the card. */
.support-ticket-wizard-header[b-m83ppmgbib] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 16px 24px;
    height: 72px;
    box-sizing: border-box;
    max-width: 1040px;
    width: 100%;
}

.support-ticket-wizard-heading[b-m83ppmgbib] {
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.85);
    margin: 0;
    flex: 0 1 auto;
}

/* Stepper container — caps its width so it sits compactly on the right of the
   heading. The Stepper itself is a hand-rolled <ol> of numbered circles. */
.support-ticket-wizard-stepper[b-m83ppmgbib] {
    flex: 0 1 auto;
    min-width: 0;
}

/* Form card — white surface with sharp (2px) corners per Figma .card(legacy).
   No border in Figma (just the surface). Padding stays zero so each step's
   banner header can stretch flush against the inside-top edge of the card;
   step content owns its own padding (.body has padding: 24px in Figma). */
.support-ticket-wizard-card[b-m83ppmgbib] {
    background: #fff;
    border-radius: 2px;
    padding: 0;
    min-height: 120px;
    overflow: hidden;
    max-width: 1040px;
    width: 100%;
    box-sizing: border-box;
}

/* Footer sits inside the card, separated by a 2px top divider per Figma
   Frame 986941 (height 88, padding 24, gap 16, justify-end, border-top 2px
   #DEDEDE). */
.support-ticket-wizard-footer[b-m83ppmgbib] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 24px;
    height: 88px;
    box-sizing: border-box;
    background: #fff;
    border-top: 2px solid #DEDEDE;
}

/* Figma footer button overrides — both buttons are 158x40 with sharp 2px
   corners, padding 6.4/15, Roboto 400 16/24. The Cancel <Button> is the
   AntDesign default secondary; we override its size/shadow here rather than
   editing the shared component. The Continue <PrimaryButton Size="Medium">
   default is 32px tall, so we widen its host span to 158px and bump the inner
   Ant button to the Figma 40px footprint without touching PrimaryButton. */
.support-ticket-wizard-footer[b-m83ppmgbib]  .ant-btn:not(.ant-btn-primary) {
    width: 158px;
    height: 40px;
    padding: 6.4px 15px;
    border-radius: 2px;
    border: 1px solid #D9D9D9;
    background: #fff;
    color: rgba(0, 0, 0, 0.85);
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.016);
}

.support-ticket-wizard-footer[b-m83ppmgbib]  .primary-button-host {
    display: inline-flex;
}

.support-ticket-wizard-footer[b-m83ppmgbib]  .primary-button-host .ant-btn-primary {
    width: 158px;
    height: 40px;
    padding: 6.4px 15px;
    font-size: 16px;
    line-height: 24px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.043);
}

/* Mobile-first: stack heading above Stepper, and footer actions full-width. */
@media (max-width: 767px) {
    .support-ticket-wizard-header[b-m83ppmgbib] {
        flex-direction: column;
        align-items: stretch;
    }

    .support-ticket-wizard-stepper[b-m83ppmgbib] {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .support-ticket-wizard-footer[b-m83ppmgbib] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* /Components/Dealer/DealerCaptcha.razor.rz.scp.css */
.dealer-captcha-container[b-91k6iakm8g] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 416.66px;
}
/* /Components/Portal/ProductDetails/PortalProductDetailsCard.razor.rz.scp.css */
.product-details-card[b-2ziqiyx02i] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3.5rem;
    padding: 0px 24px;
}

.product-details-card.registration[b-2ziqiyx02i] {
    border: 1px solid #D8D8D8;
    padding: 40px;
}

.product-label-container[b-2ziqiyx02i] {
    display: inline-flex;
    flex-direction: column;
    gap: 1rem;
}

.product-details-product-image-size[b-2ziqiyx02i] {
    max-width: 102px;
}

.product-details-product-image-size.no-image[b-2ziqiyx02i] {
    width: 96px;
    height: 96px;
}

.lincat-logo-no-image[b-2ziqiyx02i] {
    width: 57.17px;
    height: 16px;
}

@media screen and (max-width: 640px) {
    .product-details-card[b-2ziqiyx02i] {
        flex-direction: column;
        align-items: initial;
        gap: 1rem;
        padding: 0px;
    }

    .product-label-container[b-2ziqiyx02i] {
        gap: 0.813rem;
    }

    .product-label-container.padding-y[b-2ziqiyx02i] {
        padding: 16px 0px;
    }

    .product-details-product-image-size[b-2ziqiyx02i] {
        max-width: 180px;
    }

    .product-details-product-image-size.no-image[b-2ziqiyx02i] {
        width: 180px;
        height: 180px;
    }

    .lincat-logo-no-image[b-2ziqiyx02i] {
        width: 96px;
        height: 26.87px;
    }
}
/* /Components/Portal/Registration/RegistrationProductDetailsCard.razor.rz.scp.css */
.product-details-card[b-8w6ge0oa87] {
    display: inline-flex;
    align-items: center;
    gap: 3.5rem;
    border: 1px solid #D8D8D8;
    padding: 40px;
    width: 100%;
}

.product-label-container[b-8w6ge0oa87] {
    display: inline-flex;
    flex-direction: column;
    gap: 13px;
}

.default-product-image-size[b-8w6ge0oa87] {
    max-width: 180px;
}

.default-product-image-size.no-image[b-8w6ge0oa87] {
    width: 180px;
    height: 180px;
}

@media screen and (max-width: 640px) {
    .product-details-card[b-8w6ge0oa87] {
        flex-direction: column;
        align-items: initial;
        gap: 2rem;
    }

    .product-label-container.padding-y[b-8w6ge0oa87] {
        padding: 16px 0px;
    }
}
/* /Components/Portal/Troubleshooting/TriageFlowList.razor.rz.scp.css */
.no-triage-flows-container[b-wh27gkwxix], .triage-flow-row[b-wh27gkwxix] {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.triage-flow-row[b-wh27gkwxix] {
    justify-content: space-between;
    padding: 16px 0px;
}

.triage-flow-button[b-wh27gkwxix] {
    min-height: 32px;
    min-width: 80px;
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid #767676;
}

.no-triage-flows-container[b-wh27gkwxix] {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    height: 100%;
    background-color: #F5F5F5;
    text-align: center;
}

.no-triage-flows-info[b-wh27gkwxix] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 8px;
}

i.air-search[b-wh27gkwxix] {
    content: url('../_content/Airedale.Blazor.Components/images/Generic/search.svg');
    font-size: 83px;
}
/* /Components/Shared/SectionHeader.razor.rz.scp.css */
.section-header-container[b-8dzqvpcgpz] {
    padding: 1rem;
    background-color: #F5F5F5;
}

.section-header[b-8dzqvpcgpz] {
    padding: 0px;
    margin: 0px;
    font-size: 20px;
    font-weight: 600;
    color: #202224;
}
/* /Components/Shared/StatusAlertBanner.razor.rz.scp.css */
.air.air-info-circle-outline[b-duj7tl7qqb] {
    content: url('../_content/Airedale.Blazor.Components/images/Generic/info.svg');
}

.air.air-info-circle-filled[b-duj7tl7qqb] {
    content: url('../_content/Airedale.Blazor.Components/images/Generic/info-filled.svg');
}

.alert[b-duj7tl7qqb], .banner[b-duj7tl7qqb] {
    position: relative;
    display: inline-flex;
    align-items: initial;
    border-style: solid;
    border-width: 2px;
}

.alert[b-duj7tl7qqb] {
    gap: 32px;
    padding: 16px;
}

.banner[b-duj7tl7qqb] {
    gap: 10px;
    padding: 8px 16px;
}

.alert-icon-container[b-duj7tl7qqb] {
    display: inline-flex;
    justify-content: space-between;
}

.alert p[b-duj7tl7qqb] {
    font-size: 16px;
}

.banner p[b-duj7tl7qqb] {
    font-size: 14px;
}

@media screen and (max-width: 640px) {
    .alert[b-duj7tl7qqb] {
        flex-direction: column;
        gap: 16px;
    }
}

.banner.alert-success[b-duj7tl7qqb], .alert.alert-success[b-duj7tl7qqb] {
    border-color: #4AD991;
    background: #4AD9911A;
}

.banner.alert-error[b-duj7tl7qqb], .alert.alert-error[b-duj7tl7qqb] {
    border-color: #FFCCC7;
    background: #FFCCC71A;
}

.banner.alert-warning[b-duj7tl7qqb], .alert.alert-warning[b-duj7tl7qqb] {
    border-color: #FFE58F;
    background: #FFE58F1A;
}

.banner.alert-info[b-duj7tl7qqb], .alert.alert-info[b-duj7tl7qqb] {
    border-color: #91D5FF;
    background: #91D5FF1A;
}

.alert h5[b-duj7tl7qqb] {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    line-height: 32px;
    font-size: 32px;
}

.alert.alert-success h5[b-duj7tl7qqb] {
    color: #4AD991;
}

.alert-close[b-duj7tl7qqb] {
    content: url('../_content/Airedale.Blazor.Components/images/Generic/close.svg');
    height: 10px;
    width: 10px;
    cursor: pointer;
}

.alert-close.mobile[b-duj7tl7qqb] {
    display: none;
}

.alert.alert-error h5[b-duj7tl7qqb] {
    color: #FF4D4F;
}

.alert.alert-warning h5[b-duj7tl7qqb] {
    color: #FAAD14;
}

.alert.alert-info h5[b-duj7tl7qqb] {
    color: #1890FF;
}

i.success[b-duj7tl7qqb] {
    color: #4AD991;
}

i.info[b-duj7tl7qqb] {
    color: #1890FF;
}

i.warning[b-duj7tl7qqb] {
    color: #FAAD14;
}

i.error[b-duj7tl7qqb] {
    color: #FF4D4F;
}

i.air[b-duj7tl7qqb] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

i.air.bi[b-duj7tl7qqb] {
    height: 33px;
    width: 33px;
}

i.air:not(bi).small[b-duj7tl7qqb] {
    height: 14px;
    width: 14px;
    margin-top: 3px;
}

i.air:not(bi).medium[b-duj7tl7qqb] {
    height: 23px;
    width: 23px;
}

i.air:not(bi).large[b-duj7tl7qqb] {
    height: 33px;
    width: 33px;
}

i.air.small[b-duj7tl7qqb] {
    font-size: 14px;
}

i.air.medium[b-duj7tl7qqb] {
    font-size: 23px;
}

i.air.large[b-duj7tl7qqb] {
    font-size: 33px;
}

@media screen and (max-width: 640px)
{
    .alert-close.desktop[b-duj7tl7qqb] {
        display: none;
    }

    .alert-close.mobile[b-duj7tl7qqb] {
        display: inline-flex;
    }
}
/* /Components/Shared/WarrantyCoverageAccordion.razor.rz.scp.css */
.warranty-coverage[b-bhda5gq4ot] {
    display: block;
    width: 100%;
    overflow: hidden;
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Collapsed/expanded toggle bar */
.wc-toggle[b-bhda5gq4ot] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    background-color: #FAFAFA;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: #202224;
}

.wc-toggle:focus-visible[b-bhda5gq4ot] {
    outline: 2px solid #2C6CB0;
    outline-offset: -2px;
}

.wc-chevron[b-bhda5gq4ot] {
    font-size: 0.875rem;
    color: #5F5F5E;
    flex: 0 0 auto;
}

.wc-toggle-text[b-bhda5gq4ot] {
    font-size: 0.875rem;
    font-weight: 400;
}

/* Expanded body */
.wc-body[b-bhda5gq4ot] {
    padding: 20px;
    border-top: 1px solid #D8D8D8;
}

.wc-col[b-bhda5gq4ot] {
    border: 1px solid #D8D8D8;
    border-radius: 4px;
    padding: 24px;
    height: 100%;
}

.wc-col-head[b-bhda5gq4ot] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.wc-icon[b-bhda5gq4ot] {
    font-size: 1.125rem;
    line-height: 1;
    flex: 0 0 auto;
}

.wc-icon-ok[b-bhda5gq4ot] {
    color: #2E9E4F;
}

.wc-icon-warn[b-bhda5gq4ot] {
    color: #E8A33D;
}

.wc-icon-no[b-bhda5gq4ot] {
    color: #FF4D4F;
}

.wc-col-title[b-bhda5gq4ot] {
    font-size: 1rem;
    font-weight: 400;
    color: #202224;
}

.wc-list[b-bhda5gq4ot] {
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.wc-list li[b-bhda5gq4ot] {
    font-size: 0.875rem;
    font-weight: 400;
    color: #202224;
    line-height: 1.57;
}

.wc-list li:not(:last-child)[b-bhda5gq4ot] {
    margin-bottom: 8px;
}

.wc-terms-link[b-bhda5gq4ot] {
    color: #2C6CB0;
    text-decoration: underline;
}

@media screen and (max-width: 640px) {
    .wc-body[b-bhda5gq4ot] {
        padding: 16px;
    }
}
/* /Pages/Dev/AceComponentsAntDemo.razor.rz.scp.css */
/* Demo shell: full-bleed so the PortalHeader and PortalFooter stretch edge-to-edge
   exactly as they would on a real page. The middle .demo-page applies the
   page-content max-width. */
.demo-shell[b-n2ixhqoamc] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
}

.demo-page[b-n2ixhqoamc] {
    flex: 1 0 auto;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 32px;
    font-family: Roboto, 'Segoe UI', sans-serif;
    color: #111827;
    box-sizing: border-box;
}

.demo-header h1[b-n2ixhqoamc] {
    font-size: 24px;
    margin: 0 0 8px 0;
}

.demo-header h2[b-n2ixhqoamc] {
    font-size: 20px;
    margin: 0 0 8px 0;
    color: #111827;
}

.demo-header p[b-n2ixhqoamc] {
    color: #4B5563;
    margin: 0 0 32px 0;
}

.demo-section[b-n2ixhqoamc] {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.demo-section h2[b-n2ixhqoamc] {
    font-size: 18px;
    margin: 0 0 4px 0;
    color: #111827;
}

.demo-section h3[b-n2ixhqoamc] {
    font-size: 16px;
    margin: 0 0 4px 0;
    color: #111827;
}

.demo-note[b-n2ixhqoamc] {
    font-size: 13px;
    color: #6B7280;
    margin: 0 0 16px 0;
}

.demo-row[b-n2ixhqoamc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.demo-stack[b-n2ixhqoamc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.demo-narrow[b-n2ixhqoamc] {
    max-width: 520px;
}

.demo-medium[b-n2ixhqoamc] {
    max-width: 640px;
}

.demo-page code[b-n2ixhqoamc] {
    background: #F3F4F6;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* Chrome preview wrapper used for the signed-out PortalHeader demo. Header
   stretches full container width so the demo behaves like the real page. */
.demo-chrome-preview[b-n2ixhqoamc] {
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
}

/* Visual gap between the two stacked full-bleed PortalHeader variants at the
   top of the demo (signed-in then signed-out). White spacer so each chrome
   reads as its own page header in screenshots. */
.demo-chrome-breaker[b-n2ixhqoamc] {
    height: 16px;
    background-color: #fff;
    width: 100%;
}

/* Signed-out PortalHeader CTAs — Figma landing-page Nav Button Group
   (1243:26394). Two variants:
     --ghost   = Sign in  (Type=secondary, Ghost=true, transparent bg, white
                 border, white text — designed to sit on the green header)
     --primary = Sign up  (Type=primary, white bg, white border, Airedale
                 green #19895B text — the brand's white-on-green inversion) */
.signed-out-cta[b-n2ixhqoamc] {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    padding: 4px 15px;
    height: 32px;
    border-radius: 2px;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.signed-out-cta--ghost[b-n2ixhqoamc] {
    background-color: transparent;
    color: #FFFFFF;
    border-color: #FFFFFF;
}

.signed-out-cta--primary[b-n2ixhqoamc] {
    background-color: #FFFFFF;
    color: #19895B;
    border-color: #FFFFFF;
}
/* /Pages/Dev/AcePolicyPage.razor.rz.scp.css */
/* WP-407 - the ACE legal pages (frames5-policy-pages.png).

   One white column of copy on the page ground, between the estate header and the estate footer. The measures
   are the console's own: --ace-wrap-pad's 24px side padding and the same 1180px content width the console's
   .ace-wrap uses, so a legal page opened from the footer is recognisably the same site. */

.ace-policy[b-k3t21j11ie] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f4f5f6;
    font-family: Roboto, "Segoe UI", sans-serif;
    color: #1f2733;
}

/* The footer sits at the bottom on a short page rather than half way up it - which Cookies, the shortest of
   the three, would otherwise do on a tall screen. */
.ace-policy-page[b-k3t21j11ie] {
    flex: 1 0 auto;
    padding: 32px 24px 48px;
}

.ace-policy-body[b-k3t21j11ie] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 48px 48px;
    background: #fff;
}

/* The render's own type: one large page title, then h2 section headings at body size but bold, and paragraphs
   at 14px on a generous line height because these are pages someone actually has to read. */
.ace-policy-body h1[b-k3t21j11ie] {
    margin: 0 0 24px;
    font-size: 26px;
    font-weight: 700;
}

/* ::deep on the section headings and the paragraphs, and NOT on the h1 above: the h1 is written in this
   component's own markup, while every h2 and p arrives through ChildContent from Terms, Privacy or Cookies -
   so those elements carry the ROUTE page's scope attribute and a plain selector here would miss all of them.
   The same trap the resolver's callout margins fell into, one component over. */
.ace-policy-body[b-k3t21j11ie]  h2 {
    margin: 28px 0 8px;
    font-size: 15px;
    font-weight: 700;
}

.ace-policy-body[b-k3t21j11ie]  h2:first-of-type {
    margin-top: 0;
}

.ace-policy-body[b-k3t21j11ie]  p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.7;
    max-width: 78ch;
}

/* Set apart from the last section's copy, and quieter than it - it is metadata about the page rather than
   part of what the page says. */
.ace-policy-updated[b-k3t21j11ie] {
    margin: 28px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
}

@media (max-width: 768px) {
    .ace-policy-page[b-k3t21j11ie] {
        padding: 16px 12px 32px;
    }

    .ace-policy-body[b-k3t21j11ie] {
        padding: 24px 20px 28px;
    }
}
/* /Pages/Dev/AceSupportTicket.razor.rz.scp.css */
/* Dev host page for the ACE Support Ticket wizard. Full-bleed chrome with a
   centred content column, mirroring the WP-297 demo shell. The per-step
   heading + Stepper row lives inside the wizard, so this file owns only the
   page chrome. Avatar + username are rendered by PortalHeader's built-in
   UserInitials / UserDisplayName slot (already styled to the Figma 24x24
   white circle + Degular Display 18/22 username under WP-297), so no bespoke
   RightContent styling lives here. */
.ace-ticket-shell[b-e8igh4o2ny] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Figma page background — warm off-grey #F4F3F1 (was #f8f9fa, too cool/light). */
    background: #F4F3F1;
}

.ace-ticket-page[b-e8igh4o2ny] {
    flex: 1 0 auto;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    /* Figma outer Container: padding 0 0 48px. The outermost container's
       gap: 24 token is unused (single child after layout flattening), and
       within the inner stack the green PortalHeader band, the Page Header
       row, and the card sit flush with no gap. padding-top stays 0 so the
       page-header row sits flush under the green band; padding-bottom is the
       48px Figma gutter. Horizontal padding is 24 so the 1040 wizard doesn't
       touch the viewport edge on narrower-than-1100px windows. */
    padding: 0 24px 48px;
    box-sizing: border-box;
    font-family: Roboto, 'Segoe UI', sans-serif;
}

/* Positioning wrapper around the wizard. The wizard now owns its own form
   card chrome (white surface, 2px corners, no padding) so the banner header
   inside each step can stretch flush against the inside-top edge. */
.ace-ticket-card[b-e8igh4o2ny] {
    background: transparent;
    border: 0;
    padding: 0;
}

@media (max-width: 575px) {
    .ace-ticket-page[b-e8igh4o2ny] {
        padding: 0 16px 32px;
    }
}
/* /Pages/Dev/AceTicketDetailDemo.razor.rz.scp.css */
.ticket-demo-page[b-yq6mjb3ssx] {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 48px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #111827;
}

.ticket-demo-header h1[b-yq6mjb3ssx] {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
}

.ticket-demo-header p[b-yq6mjb3ssx] {
    margin: 0 0 24px 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.5;
}

.ticket-demo-controls[b-yq6mjb3ssx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px;
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
}

.ticket-demo-state-buttons[b-yq6mjb3ssx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ticket-demo-state-btn[b-yq6mjb3ssx] {
    appearance: none;
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    color: #374151;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.ticket-demo-state-btn:hover[b-yq6mjb3ssx] {
    background-color: #F3F4F6;
}

.ticket-demo-state-btn-active[b-yq6mjb3ssx] {
    background-color: #2C6CB0;
    border-color: #2C6CB0;
    color: #FFFFFF;
}

.ticket-demo-state-btn-active:hover[b-yq6mjb3ssx] {
    background-color: #235691;
}

.ticket-demo-note[b-yq6mjb3ssx] {
    color: #4B5563;
    font-size: 13px;
    line-height: 1.5;
}
/* /Pages/Dev/AceWarrantyConsole.razor.rz.scp.css */
/*
    WP-407 - the console app shell, DEVELOPMENT ONLY.

    Every value here is the prototype of record's own (`ACE Warranty Portal - Admin.html`, its single
    <style> block): `--green #1a854c`, `--page #f2f2f0`, `--ink #1f2733`, `--muted #6b7280`,
    `--line #e2e5e9`, `--maxw 1180px`, the 64px header height and the 24px gutter. The console was
    rendering with NO shell CSS at all before this pass - raw document flow on a white ground - which
    is why it did not read as the same product as the prototype.

    Scoped to this page. The shell is chrome for the dev-gated route and deliberately does not leak:
    production route placement, navigation and branding remain the solution designer's (iteration-log
    entry 14).
*/

.ace-app[b-8p3vqm8xak] {
    /* ------------------------------------------------------------------------
       S1 - THE ONE LAYOUT CONTAINER, and the one place its numbers are written.

       The 4 Aug design review reported the page width shifting between the queue,
       the asset detail screen and the ticket workspace. MEASURED first, at 1440
       (measure-width.js in this batch's scratchpad), before changing anything:

         assets home card       154 -> 1286   1132
         jobs queue card        154 -> 1286   1132
         asset detail panel     154 -> 1286   1132
         ticket workspace cards 154 -> 1286   1132
         header content         154 -> 1286   1132
         FOOTER content         120 -> 1320   1200   <-- the only one that differs

       So the three surfaces named in the review already share one column; the
       divergence is the FOOTER, which is a padding-based band of its own at 120px
       and is brought into line below (S9). What DID differ between the three is
       the padding INSIDE their cards - 16px in the queue's table, 22px in the
       workspace's panels, 24px on the asset detail - which is what makes the text
       column appear to move. `--ace-card-pad` is the review's own 32px (S3),
       consumed by all three so they cannot drift apart again.

       The tokens are declared HERE, on the shell, and read by the child
       components' scoped stylesheets through var() with their own current value
       as the fallback. Custom properties inherit through the DOM regardless of
       CSS isolation, so this reaches them; the fallbacks mean any OTHER host of
       those components renders exactly as it does today.
       ------------------------------------------------------------------------ */
    --ace-col-max: 1180px;
    --ace-gutter: 24px;

    /*
        The gutter expressed as padding for the full-bleed bands: a band painting
        edge to edge still lands its contents on the column above. `max()` keeps
        the plain gutter once the viewport is narrower than the column.
        The percentage resolves against whichever element USES this, which is
        what makes one declaration serve bands of different widths.
    */
    --ace-wrap-pad: max(var(--ace-gutter), calc((100% - var(--ace-col-max)) / 2 + var(--ace-gutter)));

    /* S3: the review's 32px, inside every card on every one of the three surfaces. */
    --ace-card-pad: 32px;

    /* ------------------------------------------------------------------------
       S8 - ONE TAG LANGUAGE. Colour is the only per-state variable, so everything
       that is not colour is stated once, here, and read by the status pill, the
       queue's Type chip and Draft badge, the identity chips and the assets
       table's warranty pill alike. Before this pass they disagreed on all four
       of radius, border weight, padding and font size (measured: the status pill
       at 5px/12.5px/600/2px 10px against Ant's Tag at 2px/11px/400/0 7px).

       The numbers are the STATUS PILL's, because that is the shape the prototype
       draws and the one the rest were drifting away from.

       R50 CORRECTS THE RADIUS ONLY. The status pill's 5px was the wrong figure to
       standardise on - the Figma queue frame gives tags 2px, measured through the
       API on 5 Aug - so the radius now defers to the console-wide control token
       and the other four numbers are untouched. One tag language still, at the
       shape the frame actually draws.
       ------------------------------------------------------------------------ */
    --ace-tag-radius: var(--ace-radius-control, 2px);
    --ace-tag-font-size: 12.5px;
    --ace-tag-font-weight: 600;
    --ace-tag-padding: 2px 10px;
    --ace-tag-border-width: 1px;

    /*
        S4 - the header green comes from the estate's token rather than from a hex
        typed here. The two were ALREADY the same value: the shell rendered
        #1a854c and ace-theme.css's `--ace-brand-green` is #1A854C, so this is a
        conformance change with no visual change - measured as rgb(26, 133, 76)
        before and after. It matters because ace-theme.css is only loaded when
        PORTAL=Ace, so on this dev route the token is absent and the fallback is
        what paints; pointing at the token means a ratified change to the brand
        colour (see that file's #19895B / #1A854C note) reaches the console
        without anyone remembering this file exists.
    */
    --ace-console-green: var(--ace-brand-green, #1A854C);

    /*
        THE SHARED HEADER PAINTS THE CONSOLE'S GREEN. A11 wrote this block with the
        heading "AND THE DISAGREEMENT IS FLAGGED RATHER THAN SETTLED"; the 18 Aug
        ruling settled it, so that heading is superseded and the account below is
        kept as the history of how it was settled.

        PortalHeader paints `var(--portal-header-bg, #19895B)`. When A11 wrote this
        block, NOTHING in the solution defined that variable - grepped, ace-theme.css
        included - so every consumer of it rendered the #19895B fallback, the customer
        ACE pages included, and the console's own band painted #1A854C, S4's token
        value.

        A11's reasoning for this declaration, kept because it is still the reason
        the line exists: adopting the shared header unchanged would have moved the
        console's brand bar by one shade, to the value ace-theme.css's own note calls
        "off-spec" for this console: #1A854C is design-spec 3.1's --green,
        transcribed from the 24 July admin prototype, which the spec names the UX
        of record and which the P8 review verified in the prototype file.

        Pointing the shared header's own hook at the console's token keeps the
        painted colour EXACTLY where A10 left it - rgb(26, 133, 76) before and
        after - so this batch changes the console's chrome without changing its
        brand colour, which is not a chrome question.

        A11 left this as an open question, in these words: "WHAT IS NOT FIXED
        HERE, AND IS NOT OURS TO INVENT: the two ACE surfaces still disagree by
        that one shade, because the customer pages' header has no
        `--portal-header-bg` and this batch does not give them one... Whoever
        ratifies it can define `--portal-header-bg` once, on
        `[data-portal="ace"]`, and both surfaces move together." SUPERSEDED, and
        by exactly that route: the 18 Aug ruling settled which green for DELIVERY,
        and the hooks are now defined once in ace-theme.css, so the surfaces agree
        at #1A854C - measured on both. FN-11's green half is ruled for delivery
        rather than answered as a design question, and its action-colour half is
        untouched and still open; ace-theme.css's own notes are the authority on
        both. A11's reasoning is kept on the record because it was right - do not
        settle an estate palette as a side effect of a chrome change - and is why
        the answer waited for a ruling.

        WHY THIS DECLARATION STAYS, now that ace-theme.css defines the same hook.
        It is not redundant: ace-theme.css is loaded only when PORTAL=Ace, and on
        a route reached without that posture the theme file is absent entirely -
        which is the case the note above at "ace-theme.css is only loaded when
        PORTAL=Ace" already describes. This line is what keeps the console's band
        on the brand value there instead of falling through PortalHeader's own
        #19895B. Deleting it would repaint the console's header on any non-Ace
        posture.

        NO COSMOS BRANDING DOCUMENT WAS READ AND NONE WAS WRITTEN. A10's results
        recorded that PortalHeader's content is "Cosmos-driven per portal" for the
        customer pages; the console passes no logo path, no colour and no string
        that would need such a source, and there is no ACE branding document
        behind any of the values above.
    */
    --portal-header-bg: var(--ace-console-green);

    /* The prototype's `--page`. The shell paints the page ground; the bands paint over it.
       12 Aug: #F4F3F1, the same value the customer-facing ACE pages already carry as
       `--ace-page-bg` (AceRegister, AceNotValidated, AceProfilePage). Was #f2f2f0. */
    background: #F4F3F1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #1f2733;
    font-size: 14px;
    line-height: 1.5;
}

/* The prototype's `.wrap`: one content column, one gutter, used by every band so the bands' edges
   are full-bleed while their contents stay aligned. */
.ace-wrap[b-8p3vqm8xak] {
    max-width: var(--ace-col-max);
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--ace-gutter);
}

/* ----------------------------------------------------------------------------
   A11 - THE BRAND HEADER IS PortalHeader'S NOW. THIS IS ALL THIS FILE STILL
   OWES IT, AND THE NUMBERS THE DELETED RULES CARRIED ARE KEPT HERE RATHER THAN
   LOST WITH THEM.

   Up to A10 the console drew its own `.hdr` band from the prototype of record -
   `.ace-hdr`, `.ace-hdr > .ace-wrap`, `.ace-logo`, `.ace-logo-img`,
   `.ace-hdr-spacer`, `.ace-hdr-user`, `.ace-avatar`, `.ace-hdr-name`,
   `.ace-hdr-signout`, and the `.ace-hdr-search*` set the header search component
   had already superseded. The markup those rules styled is gone, so the rules
   are too; what they had established is not:

     * ROW 48's SIZING, measured off the frames3 frames by pixel rather than by
       eye (frame-geom.js / frame-scale.js): the green band is 75px tall, not the
       prototype's 64, and the logo inside it 41px, not 26, with a symmetric 17px
       above and below. PortalHeader's own band is min-height 75px - the same
       figure, from the customer frames - and its logo is 40px. So the band does
       not move and the mark loses 1px. Row 48's finding survives the change; the
       one number that differs is the shared component's and is left as it is,
       because a 1px override on a shared header to defend a superseded frame is
       the kind of divergence this batch exists to remove.
     * S4's TOKEN, not a hex. The band painted `var(--ace-console-green)` - the
       token, so a ratified brand change reaches the console without anyone
       remembering this file exists. That is preserved by pointing PortalHeader's
       own `--portal-header-bg` at the same token in `.ace-app` above. A11 wrote
       that `.ace-app` is "also where the one-shade disagreement between the two
       ACE surfaces is recorded"; SUPERSEDED on 18 Aug - the surfaces no longer
       disagree, both measured at rgb(26, 133, 76), and what `.ace-app` records
       now is that the green was ruled for delivery and how.
     * S4's AVATAR CENTRING. The console's 30px disc needed `line-height: 1` to
       put the ink on the centre line, because a cap-height glyph does not sit in
       the middle of a 1.5-line-height box. PortalHeader's avatar is 24px with its
       own `line-height: 20px` from the Figma avatar instance, so it does not have
       the fault this rule fixed - checked rather than assumed by reading its own
       stylesheet. Nothing to carry over.
     * The `.ace-hdr-search*` rules were ALREADY DEAD before this batch: row 12+
       replaced the plain form with WarrantyConsoleHeaderSearch, which brings its
       own 32px box, its own 2px radius and its own shrink behaviour. They are
       removed with the band they belonged to rather than left describing markup
       that has not existed for several batches.

   TWO RULES REPLACE ALL OF THAT - three declarations between them, the first two
   on the header's inner row and the third on the band itself. The first is S9'S
   OWN ARGUMENT MIRRORED; the second is the narrow-width fix, and it is the one
   place where the console deliberately does NOT take the shared header's
   responsive behaviour.
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   THE SHARED HEADER'S CONTENT COLUMN MUST BE THE CONSOLE'S, which is S9 read
   from the other end.

   S9 below pulled PortalFooter's 120px gutter onto the console's 154..1286
   column because "the footer's content column must be the header's". Adopting
   PortalHeader inverts the problem: its inner row states `padding: 16px 120px`
   from the same customer Figma frames the footer's 120 comes from, so the
   header would now be the band that overhangs every other surface by 68px a
   side - the exact width shift the 4 Aug design review reported and S1 measured.

   FROM HERE, NOT FROM PortalHeader, for S9's own reason: that component is
   shared estate and the ACE customer-facing pages serve the same header, so its
   120px stands and they render exactly as they do today. `::deep` from the
   console's shell reaches only the header inside `.ace-app`.

   This wins at every width, including inside PortalHeader's own
   max-width:1279 rule, because a media query adds no specificity - so below the
   column the `max()` in `--ace-wrap-pad` yields the console's 24px gutter where
   the shared header would have given 32px. That is the intended answer: the
   console's bands agree with each other at every breakpoint, which is what S1
   asked for and what the footer has done since S9.

   Vertical padding is untouched, as it is for the footer: 16px above and below
   is the shared header's own rhythm and nothing here asks about it.
   ----------------------------------------------------------------------------

   AND THE SECOND DECLARATION, ON THE SAME SELECTOR DELIBERATELY: THE HEADER ROW
   MUST NOT WRAP. A REGRESSION FOUND BY DRIVING 375 AND 480 RATHER THAN BY
   READING.

   One rule rather than two blocks, so an edit to the console's header row cannot
   change the column and miss the wrap, or the other way about.

   `.portal-header-inner` is `flex-wrap: wrap`; the band it replaces was nowrap.
   With wrap, a row that cannot fit WRAPS rather than shrinking its flexible
   item - so measured at 480 and 375 the console's header became three rows
   (logo, then the search, then the avatar below it), 130px and 186px tall
   against 75. Worse at 375: the user menu is anchored `right: 0` to the avatar's
   wrapper, which after wrapping sits at the LEFT edge, so the menu opened at
   x -182..48 - off the viewport, and sign-out is the only thing in it.

   Nowrap restores what the console's own band did: the search shrinks instead,
   which is exactly what `WarrantyConsoleHeaderSearch`'s `flex: 0 1 340px` with
   `min-width: 0` was built for - its own note records that the console header at
   375 has about 134px to give it.

   FROM HERE, NOT FROM PortalHeader, for the third time in this file and for the
   same reason: the customer pages' header carries the built-in search box, which
   the shared component's own 480 rule collapses to a 24px icon so its row fits
   on one line. The console's slotted control is not that box and does not take
   that rule, so the console is the surface with the problem and the console is
   where it is fixed.
   ---------------------------------------------------------------------------- */
.ace-app[b-8p3vqm8xak]  .portal-header-inner {
    padding-inline: var(--ace-wrap-pad);
    flex-wrap: nowrap;
}

/* `flex: none`, which is what `.ace-hdr` carried and for the same reason: the
   shell is a 100vh flex column, so the band states that it is chrome and not
   something to be squeezed. Explicit rather than relying on the default, which
   is the convention the rest of this file's bands follow (`.ace-devnote`,
   `.ace-greeting`). */
.ace-app[b-8p3vqm8xak]  .portal-header {
    flex: none;
}

.visually-hidden[b-8p3vqm8xak] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------------------
   S9 - THE FOOTER'S CONTENT COLUMN MUST BE THE HEADER'S.

   Measured at 1440 before this pass: every band on every surface lands its
   contents on 154..1286, and the footer alone on 120..1320 - a 68px overhang on
   each side, which is the width shift that is actually visible on the page.
   PortalFooter states its own gutter as `padding: 48px 120px` from the Figma
   "Footer Links" frame, so the mismatch is between two different frames' numbers
   rather than a mistake in either.

   FROM HERE, NOT FROM PortalFooter. That component is shared estate - the ACE
   customer-facing pages (AceLanding, AceProductPage, AceSupportTicket) serve the
   same footer and are NOT part of this review, so its own 120px stands and they
   render exactly as they do today. `::deep` from the console's shell reaches only
   the footer inside `.ace-app`.

   Vertical padding is untouched: 48px above and below is the footer's own
   rhythm and nothing in the review asks about it.
   ---------------------------------------------------------------------------- */
.ace-app[b-8p3vqm8xak]  .portal-footer-inner {
    padding-inline: var(--ace-wrap-pad);
}

/* ---- dev-only strip ---- */

.ace-devnote[b-8p3vqm8xak] {
    background: #fdf7e3;
    border-bottom: 1px solid #efd27a;
    color: #8a6d16;
    font-size: 12.5px;
    flex: none;
}

.ace-devnote > .ace-wrap[b-8p3vqm8xak] {
    padding-block: 8px;
}

/* ---- greeting band ---- */
/* The host status banner's rule went with the band itself (M1): confirmations are Ant notifications now. */

/*
    The prototype's `.page-hdr` - white, page title left, actions right. The band is full-bleed and
    the .ace-wrap inside it keeps the title aligned with the card below.
*/
.ace-greeting[b-8p3vqm8xak] {
    background: #fff;
    flex: none;
}

.ace-greeting > .ace-wrap[b-8p3vqm8xak] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    /* The prototype's `padding:20px 24px 16px` - tighter beneath, because the subnav follows. */
    padding-block: 20px 16px;
}

/*
    S2 - "Welcome back" is 20px MEDIUM, not 20px bold.

    The size was already right (measured 20px before this pass); the weight was the prototype's
    `.pagetitle` 700, and the design review asks for medium. 500 is the medium step of the scale, and it
    is the weight the platform stack actually has a face for - 600 renders as a synthesised semibold here.
    Family is deliberately UNCHANGED tonight: the Roboto question is a walkthrough item.
*/
.ace-greeting-title[b-8p3vqm8xak] {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: #1f2733;
}

.ace-greeting-actions[b-8p3vqm8xak] {
    display: flex;
    gap: 10px;
    align-items: center;
}

/*
    S5 moved the greeting band's two secondary buttons off Ant's 2px onto the console's 6px, to match the
    ticket toolbar. R50 REVERSES BOTH SIDES OF THAT: the frame gives buttons 2px, so 6px was the figure that
    was wrong and these two were right before S5 touched them. The rule stays rather than being deleted, so
    the console states its own button radius in one readable place instead of relying on Ant's default
    happening to agree.
*/
.ace-greeting-actions[b-8p3vqm8xak]  .ant-btn {
    border-radius: var(--ace-radius-control, 2px);
}

/*
    7px between mark and label, the same figure the ticket workspace's toolbar band uses.

    A MARGIN, NOT A FLEX GAP, and the workspace's own note records why: Ant wraps a button's content in
    its own span, so the mark and the label are one flex item between them and a `gap` on the button never
    lands between the two. A first pass here used `gap` and drew "+Raise a job" with no space at all.
*/
/*
    R50 - AND THE MARK IS CENTRED IN ITS OWN BOX, which is the toolbar-button item.

    The BUTTON box was already balanced (measured 5px above the content span and 5px below it, in a 32px
    button). What was off was the mark INSIDE that box: Ant's `.anticon` is an inline box carrying
    `vertical-align: -.125em`, so its SVG rides the LABEL's baseline and measured 1.25px above the button's
    centre line.

    The centring therefore goes on Ant's own content span - the box the mark and the label share - and not
    on the anticon, which cannot centre itself against a parent that is laying it out on a baseline. Stated
    on the shared `.ace-greeting-actions` usage rather than on either button, so both move together.

    `> span` is a CHILD selector but it is not as surgical as it reads: the anticon is a span too, so on a
    button whose mark is not wrapped it matches that instead. Harmless here - the anticon gets the same
    flex centring from the rule below either way - but do not read this as "the content span only".

    The 7px gap stays a MARGIN even though the span is now a flex container: the note above records that a
    `gap` here once drew "+Raise a job" with no space at all, and a margin is what survived that.

    This is the same defect the step-1 search fields carry, and it is fixed the same way in
    `WarrantyTicketIdentityResolver.razor.css`.
*/
.ace-greeting-actions[b-8p3vqm8xak]  .ant-btn > span {
    display: inline-flex;
    align-items: center;
}

/*
    Both boxes, because there are two of them. The span above centres the ANTICON against the button
    (measured 0 after that rule); this centres the SVG against the anticon, which was still 1.5px high
    inside its own 17px line box. Only the pair gets the mark onto the button's centre line.
*/
.ace-greeting-actions[b-8p3vqm8xak]  .ant-btn .anticon {
    line-height: 1;
    margin-inline-end: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- Assets | Jobs subnav (F030) ---- */

/*
    The prototype's `.subnav`: inside the white greeting band, its bottom rule doubling as the band's edge,
    the active tab underlined in `--blue`. Real buttons rather than styled divs - the prototype uses divs
    with click handlers, which are unreachable by keyboard.
*/
/*
    S6: 14px of gap between items that now carry 10px of their own padding, so the rhythm between the
    labels is the 26px it was while each item has room around it.

    The gutter is pulled in by the item's own padding, so the FIRST tab's word still starts on the
    column - at 154 with everything else, not at 164. Without this the tab row would be the one band
    that does not line up, which is the very complaint S1 is answering.
*/
.ace-subnav > .ace-wrap[b-8p3vqm8xak] {
    display: flex;
    gap: 14px;
    padding-inline: calc(var(--ace-gutter) - 10px);
}

/*
    R52 - THE TAB CONTAINER EXTENDS PAST THE LABELS, AND IT IS THE VERTICAL SLACK THAT WAS MISSING.

    Measured off the queue frame through the Figma API (`queue-frame-deep.json`, 5 Aug):

        .Tabs-Top(Legacy) container   y=8720  h=48
        active tab                    y=8728  h=40   -> 8px of container above it, flush at the bottom
        inactive tab                  y=8732  h=32   -> centred in the same 48

    Ours measured the container and the active tab at IDENTICAL bounds (198..254, both 56 tall), because the
    tab's own padding was the only thing giving the strip its height - so the white ended exactly on the
    label's box, which is the designer's "ours clips at the label". The 8px goes ABOVE, as the frame puts it:
    the bottom stays flush so the strip's rule still doubles as the greeting band's edge.

    HORIZONTALLY ours already extends far past the labels (measured 1157px of white to the right of "Assets"
    against the frame's ~875), so nothing is clipped there. One difference is left deliberately and reported
    rather than changed: the frame's container is inset to the content column (992 wide inside a 1280 frame,
    144 each side) while ours is full-bleed white, because the prototype this shell was built from draws the
    band full-bleed with its rule as the band's edge. Making the strip column-width is a change to the
    greeting band's construction, not a radius, and it is the designer's call.
*/
.ace-subnav[b-8p3vqm8xak] {
    border-bottom: 1px solid #e2e5e9;
    padding-top: 8px;
}

/*
    S2 + S6 - the Assets / Jobs tabs: 16px labels (measured 14px before this pass), with padding
    around the item rather than the 2px that left them cramped and the active underline no wider than
    its word.
*/
.ace-tab[b-8p3vqm8xak] {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 15px 10px;
    font-family: inherit;
    font-size: 16px;
    /* 12 Aug: Regular. Moved with the ticket workspace's Ant tab labels, which the design review
       treats as the same control - the note on those rules records the same pairing. */
    font-weight: 400;
    color: #6b7280;
    cursor: pointer;
}

.ace-tab:hover[b-8p3vqm8xak] {
    color: #1f2733;
}

.ace-tab.is-active[b-8p3vqm8xak] {
    color: #1f80f0;
    border-bottom-color: #1f80f0;
}

.ace-tab:focus-visible[b-8p3vqm8xak] {
    outline: 2px solid #1f80f0;
    outline-offset: 2px;
}

/* ---- content ---- */

/* `.content{flex:1;padding:24px 0 60px}` on the `--section` ground, so the white cards inside are
   bounded rather than white-on-white. No border-top: the subnav above it carries that rule now, and two
   adjacent 1px lines read as a 2px one. */
/* 12 Aug: the content ground takes the page colour too. #eef1f2 was a COOL grey against the
   shell's warm one, which is the clash the designer's "current grey" note lands on. */
.ace-page[b-8p3vqm8xak] {
    flex: 1;
    background: #F4F3F1;
    padding: 24px 0 60px;
}

/* A46: the Assets browse's sample note. A caption above the card, not a banner inside it and not a toast -
   it is a standing fact about the list rather than something that just happened, so it is styled as the
   quietest thing on the page: the body face at the secondary size, in the muted ink the table's own
   secondary lines use, and no icon, border or fill. Sits on the section ground above the white card, with
   the card's own gap below it. */
.ace-sample-note[b-8p3vqm8xak] {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 20px;
    color: #6B6B6B;
}

/* ----------------------------------------------------------------------------
   THE DRAWER MUST NEVER BE WIDER THAN THE VIEWPORT.

   Width="480" is row 23's measured number and is NOT changed: `max-width` clamps
   the used width to `min(480px, 100vw)`, so at every viewport from 480 up the
   drawer still measures exactly 480 and row 23 is untouched. `max-width` is the
   right property rather than `width: min(480px, 100vw)` because Ant sets the
   480 as an INLINE style, which a stylesheet `width` cannot beat without
   `!important` - and max-width clamps an inline width in the cascade anyway.

   WHY IT MATTERS BELOW 480, and it is not cosmetic. Ant right-anchors the
   wrapper, so a 480px drawer in a 375px viewport starts at left -105 and the
   first 105px of its header is off-screen. That is where the close X lives,
   because row 23 deliberately moved it to the LEFT of the title - so the one
   exit was the part that got clipped. Measured before this rule: the X sat at
   -81..-65 and `document.elementFromPoint` at its own centre returned nothing,
   with no horizontal page scroll to reach it. Ant ignores Escape here and the
   raise flow's Cancel exists on step 1 only, so past step 1 there was no exit
   at all.

   Row 23's left-placement is correct and stays. This caps the box it sits in.
   ---------------------------------------------------------------------------- */
.ace-app[b-8p3vqm8xak]  .ant-drawer-content-wrapper {
    max-width: 100vw;
}

/* ----------------------------------------------------------------------------
   THE DRAWER'S ACTION ROW BELONGS AT THE DRAWER'S BOTTOM EDGE.

   frames3/frames4 pin it there. Ours sat immediately under the content, so Add
   asset's `Close` landed directly beneath the serial search - about y 216 of a
   900px drawer against the design's ~867 - and the raise flow's
   Cancel / Continue floated mid-drawer under the last field. Never a
   conformance clause: row 23 conformed the drawer's WIDTH, the close X side,
   the button sets and the magnifier, and nobody had asked where the row sat.

   One cause, three surfaces, so one rule rather than three. All three drawers
   render inside `.ace-app`, so a `::deep` rule from this page reaches the
   console's raise flow, its Add asset drawer and the workspace's verify drawer
   alike. The body becomes the column, the component root inside it stretches to
   fill the body, and `margin-top: auto` on the action row takes up whatever is
   left. A short form therefore pushes its actions to the bottom edge and a long
   one still scrolls, because the body keeps Ant's own overflow.

   DELIBERATELY NOT MIRRORED into the components' own stylesheets the way the
   max-width clamp above is. That one is mirrored because it protects the
   drawer's ONE EXIT and must not depend on a host; this is placement, and a
   host that wants a different arrangement should get one.
   ---------------------------------------------------------------------------- */
.ace-app[b-8p3vqm8xak]  .ant-drawer-body {
    display: flex;
    flex-direction: column;
    /* THE GAP BELOW A PINNED FOOTER MUST NOT COME FROM THIS BOX'S OWN PADDING, and that is what made the
       three drawers disagree with each other on 26 Aug.

       Ant gives this body `padding: 24px` and `overflow: auto`. A surface whose content fits keeps that
       bottom 24 below the pinned row; a surface that SCROLLS does not, because a scrolling flex column
       drops it. So the gap below the buttons was 24 on the short surfaces (raise step 1, raise step 2, the
       job-created confirmation) and 0 on the long one (raise step 3) - the same rule reading two different
       ways depending on how much the agent had typed, which is not a gap anybody chose.

       Zeroing it here and owning the 24 on the action row itself makes the gap identical on every surface
       whether it scrolls or not. The row is the last child in every branch of both components EXCEPT raise
       step 1's refusal, where US-33's error paragraph is a trailing sibling below the pinned row - that one
       branch carries its own rule below. Nothing else in the body was relying on this padding to be spaced
       off the bottom edge. The other three sides keep Ant's 24 untouched. */
    padding-bottom: 0;
}

/* Descendant, not child: at raise step 1 the resolver renders INSIDE the flow, so its action row is the
   footer and the flow's own is not rendered at all. Both roots have to stretch for the nested case to
   reach the bottom edge. */
.ace-app[b-8p3vqm8xak]  .ant-drawer-body .identity-resolver,
.ace-app[b-8p3vqm8xak]  .ant-drawer-body .raise-flow {
    display: flex;
    flex-direction: column;
    /* min-height: 0 so a long form can still shrink and scroll rather than
       overflowing the body it is meant to fit inside. */
    flex: 1 1 auto;
    min-height: 0;
}

.ace-app[b-8p3vqm8xak]  .resolver-actions,
.ace-app[b-8p3vqm8xak]  .flow-actions {
    margin-top: auto;
    /* The pin puts these rows ON the drawer's bottom edge, so the breathing room below the buttons has to
       ride with the pin - the components' own last-section padding only spaces the gap ABOVE the row.
       Living here rather than on the body (which now zeroes its bottom padding, see above) it is inside the
       scrollable content, so it survives on a surface that scrolls as well as on one that does not, and all
       three drawers read the same. 24 is the drawer body's own padding, not a new number, and this selector
       does not leak into hosts that do not pin. */
    padding-bottom: 24px;
}

/* Raise step 1 is the one branch whose action row is NOT the last child: the resolver renders the row, and
   US-33's refusal paragraph is drawn after it by the flow, so it lands below the pinned row and would sit
   flush against the drawer's bottom edge now the body supplies nothing. The same 24, so a refused step 1
   reads like every other surface.

   `.edit-error:last-child` and not a bare `:last-child`, which is the difference between this and over-padding
   the ordinary case: with no refusal the last child is the resolver itself, whose own row already carries the
   24, and padding that box as well would double it. Steps 2 and 3 draw the identical paragraph ABOVE their
   action rows, so it is never their last child and this rule does not reach them. */
.ace-app[b-8p3vqm8xak]  .ant-drawer-body .raise-flow > .edit-error:last-child {
    /* The paragraph is drawn by the FLOW's markup, so it takes the flow's own `.edit-error`, which is
       `margin: 8px 0` - not the resolver's `margin: 4px 0 0`. The 24 has to replace that bottom 8 rather than
       stack on it, or this one surface reads 32 where the other five read 24, which is the by-luck shape this
       batch exists to remove. The top 8 stays: that is the gap ABOVE the paragraph and it is doing its job.
       padding rather than margin for the 24, because that is the form the action row uses and the one proven
       to survive a scrolling body. */
    margin-bottom: 0;
    padding-bottom: 24px;
}

/* ----------------------------------------------------------------------------
   ROW 23 - the drawer header: the close affordance belongs to the LEFT of the
   title, which is where both drawer families put it (figma-add-asset.png's
   "x  Add asset", and the raise flow's stages).

   Ant renders the title first and absolutely positions its close button at the
   top right, so this is an order change plus undoing that positioning. It is a
   style change and not a markup one because AntDesign owns the header's markup.

   WHY HERE AND NOT IN ace-theme.css, which is where this pass first put it:
   that file is only LOADED when `PORTAL=Ace` is set, because App.razor gates it
   on the env-driven portal identity. The console is a dev route that is normally
   run without that variable, so the rule was inert and the walk correctly
   reported the close button still on the right. All three of the console's
   drawers render inside `.ace-app` - measured, they are its direct children -
   so a `::deep` rule from this page reaches them however the app was launched.
   ---------------------------------------------------------------------------- */
.ace-app[b-8p3vqm8xak]  .ant-drawer-header {
    display: flex;
    align-items: center;
    /* Ant's own padding reserves a gutter on the right for the button it was
       going to overlay; in the flow, that gutter is dead space after the title. */
    padding: 16px 24px;
}

.ace-app[b-8p3vqm8xak]  .ant-drawer-header .ant-drawer-close {
    position: static;
    order: -1;
    /* A flex item now, so it centres with the title instead of being pinned to
       the header's top edge. */
    margin: 0 14px 0 0;
    padding: 0;
    width: auto;
    height: auto;
    line-height: 1;
    color: #6b7280;
}

.ace-app[b-8p3vqm8xak]  .ant-drawer-header .ant-drawer-close:hover {
    color: #1f2733;
}

.ace-app[b-8p3vqm8xak]  .ant-drawer-header .ant-drawer-title {
    padding-inline-end: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2733;
}

/*
    The drawer's close X is a 16x16 glyph - the smallest target in the console, and since row 23 it is also
    the drawer's only exit past step 1. Given a 44px box on a coarse pointer, keyed to the same predicate
    the workspace and the raise flow now use. The glyph itself is unchanged, so row 23's left-of-title
    placement reads exactly as before; only the box around it grows.
*/
@media (hover: none) {
    .ace-app[b-8p3vqm8xak]  .ant-drawer-header .ant-drawer-close {
        /* Explicit flex, so the 44px box is real and the glyph stays vertically centred in it rather than
           sitting on an inline baseline near its bottom edge. */
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        min-width: 44px;
        min-height: 44px;
        /* Was 14px. The box is ~28px wider than the glyph now, so the title would otherwise move right by
           that much; 6px keeps the header's spacing where row 23 left it. */
        margin-right: 6px;
    }
}

/* ----------------------------------------------------------------------------
   A11 - THE HEADER'S RESPONSIVE RULES ARE THE SHARED COMPONENT'S NOW.

   Two blocks stood here and both styled markup this batch removed:

     "The prototype narrows the search before anything else gives way" narrowed
     `.ace-hdr-search` to 180px at 860. It was already dead: row 12+ replaced the
     plain form with WarrantyConsoleHeaderSearch, whose own stylesheet does this
     better than a fixed width can - `flex: 0 1 340px` with `min-width: 0`, which
     its own note records was what let the box actually shrink at 375 instead of
     overflowing the header and taking the page's scrollWidth to 444.

     The 640 block closed the header row's gap to 10px and hid `.ace-hdr-name`,
     "the first thing to go; the avatar still identifies the session". PortalHeader
     makes the same call at its own Figma-derived breakpoint - `.portal-header-user-name`
     is hidden at 575, from the Asset-page--sm-574 and --xs-375 frames - so the
     intent survives at a width the customer frames chose rather than one this file
     chose. Its 32px gap is left alone: overriding a shared header's spacing to
     recover a 10px gap that belonged to a band with a different logo, a different
     avatar and a sign-out link would be divergence for its own sake.

   NO MEDIA QUERY IS ADDED HERE, AND THAT IS NOT THE SAME AS "NOTHING DIVERGES".
   An earlier draft of this paragraph said the console's header is now responsive
   by the same rules as every other ACE page's. It is not, in one respect, and
   that respect is this batch's most important fix: the header's flex row is
   forced to `nowrap` from the console's shell, at the rule above `.ace-app ::deep
   .portal-header-inner`. The shared component wraps instead, which put the
   console's header on three rows at 480 and 375 and opened the user menu off the
   viewport - so at 375 sign-out, the menu's only item, was unreachable. **Do not
   delete that declaration to make this file agree with the shared component.**
   Read its own block for why the customer pages do not need it.

   Everything else here IS the shared component's: the name still goes at 575, the
   gutters still follow S1's column, and the search's shrink behaviour is the
   search component's own.
   ---------------------------------------------------------------------------- */
/* /Pages/Dev/AceWarrantyConsoleSignInPage.razor.rz.scp.css */
/* WP-407 A14 - the console sign-in page's shell.

   The page rendered as bare text in the top-left corner: AceLayout gave it no header and it had no
   stylesheet at all. A14 made it a first-class entry point (arrive at the console cold, or sign out of
   it), so it needs the portal's chrome.

   TOKENS AND MEASUREMENTS ARE LIFTED FROM THE CONSUMER SIGN-IN PAGE, not invented. AceSignin.razor.css
   is the same shape of surface - a centred card under PortalHeader on the ACE page background - so its
   background, its 64px/16px main padding and its card metrics are reused verbatim. Nothing here is a new
   design decision, which matters because the designer returns on 20 Aug.

   ONLY THE SHELL IS HERE. The card's contents are rendered by AceConsoleSignInPrompt and a host page's
   scoped CSS cannot reach a child component's markup - the A13 B11 defect. Those live in that
   component's own stylesheet. */

.ace-console-signin-shell[b-2qumrk8gq9] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #F4F3F1;
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ace-console-signin-main[b-2qumrk8gq9] {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 16px;
}

/* Mirrors the consumer sign-in page's own narrow-width rule, so the two surfaces behave identically
   at 375 and 480 rather than one of them being the odd surface out. */
@media (max-width: 480px) {
    .ace-console-signin-main[b-2qumrk8gq9] {
        padding: 32px 12px;
    }
}
/* /Pages/Issue/AceIssue.razor.rz.scp.css */
/* WP-271 — Submitted-branch placeholder. Replaced by WP-274 Issue Capture. */

.ace-issue-page[b-li76psd8ss] {
    background: #F4F3F1;
    color: #000;
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[b-li76psd8ss] .ace-issue-page,
[b-li76psd8ss] .ace-issue-page * {
    box-sizing: border-box;
}

.ace-issue-main[b-li76psd8ss] {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 120px 48px;
}

.ace-issue-card[b-li76psd8ss] {
    background: #FFFFFF;
    border-radius: 2px;
    padding: 32px;
}

.ace-issue-heading[b-li76psd8ss] {
    margin: 0 0 8px;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 2rem;
    color: rgba(0, 0, 0, 0.85);
}

.ace-issue-lead[b-li76psd8ss],
.ace-issue-note[b-li76psd8ss] {
    margin: 0 0 16px;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgba(0, 0, 0, 0.65);
}

.ace-issue-actions[b-li76psd8ss] {
    margin: 24px 0 0;
}

.ace-issue-link[b-li76psd8ss] {
    color: var(--ace-brand-green, #1A854C);   /* WP-353: was Ant blue #1890FF */
    text-decoration: none;
}
.ace-issue-link:hover[b-li76psd8ss] { text-decoration: underline; }

@media (max-width: 1279px) {
    .ace-issue-main[b-li76psd8ss] { padding: 24px 32px 48px; }
}
@media (max-width: 767px) {
    .ace-issue-main[b-li76psd8ss] { padding: 16px 16px 32px; }
    .ace-issue-card[b-li76psd8ss] { padding: 16px; }
}
/* /Pages/Landing/AceConfirmation.razor.rz.scp.css */
.ace-confirmation-shell[b-d2yxjy3sv3] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ace-confirmation-grow[b-d2yxjy3sv3] {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Auth-journey header treatment (WP-299 design review, Tim): the logo is
   intentionally centred. There is no search, user or sign-in/up at this step
   of the journey, so the logo doubles as the route back to the ACE landing. */
.ace-confirmation-shell[b-d2yxjy3sv3]  .portal-header-inner {
    justify-content: center;
}
/* /Pages/Landing/AceLanding.razor.rz.scp.css */
/* WP-270 — ACE landing page styles.
   Tokens trace to Documents/ace-warranty-portal/Design/landing-page/tokens.md
   (Figma node 1241:8475, Ready For Dev). */

.ace-landing[b-lt62dc7mnj] {
    --ace-green: var(--ace-brand-green, #1A854C);   /* WP-353: single source is --ace-brand-green (ace-theme.css); fallback for local /ace preview with no PORTAL env. WP-407, 18 Aug: the fallback was #19895B, so a preview with no PORTAL env painted a DIFFERENT green from the declared source of truth - it now repeats the declared value */
    --ace-green-bg: #E6F0E6;          /* tokens.md row #E6F0E6 — hero background tint */
    --ace-green-shape: #8CC4AD;       /* tokens.md row #8CC4AD — hero decorative shape */
    --ace-page-bg: #F4F3F1;           /* tokens.md row #F4F3F1 — page surface */
    --ace-cta-surface: #FFFFFF;       /* Support/Partner section fill — variable resolves to white surface */
    --ace-dark: #2A3E46;              /* tokens.md row #2A3E46 — hero heading / subheading */
    --ace-text: rgba(0, 0, 0, 0.85);  /* Body text — Figma SOLID #000 opacity 0.85 (Ant Design character/primary). H1/sub use --ace-dark instead. */
    --ace-stroke-light: #F0F0F0;      /* tokens.md row #F0F0F0 — card stroke */
    --ace-stroke-input: #D9D9D9;      /* tokens.md row #D9D9D9 — input stroke */
    --ace-blue: var(--ace-brand-green, #1A854C);   /* WP-353: ACE primary/interactive colour is brand green, not Ant blue. WP-407, 18 Aug: fallback moved onto the declared value */
    --ace-text-muted: rgba(0, 0, 0, 0.45);   /* Helper / placeholder text — Figma SOLID #000 opacity 0.45 */
    --ace-success-bg: #F6FFED;        /* tokens.md row #F6FFED — Warranty Active alert bg */
    --ace-success-border: #B7EB8F;    /* tokens.md row #B7EB8F — Warranty Active alert border */
    --ace-success-icon: #52C41A;      /* tokens.md row #52C41A — check icon + tag text */
    --ace-info-bg: #E6F7FF;           /* tokens.md row #E6F7FF — Engineer scheduled bg */
    --ace-info-border: #91D5FF;       /* tokens.md row #91D5FF — Engineer scheduled border */

    /* Degular Display — Adobe Fonts kit loaded in App.razor (https://use.typekit.net/<kit-id>.css).
       Adobe publishes the family under "degular-display"; legacy "Degular Display" included as an alias.
       Fallback chain stays in case the kit fails to load. */
    --ace-font-display: "degular-display", "Degular Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ace-font-ui: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ace-font-body: "Open Sans", "Roboto", system-ui, sans-serif;

    background: var(--ace-page-bg);
    color: var(--ace-text);
    font-family: var(--ace-font-ui);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[b-lt62dc7mnj] .ace-landing,
[b-lt62dc7mnj] .ace-landing * {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------
   Global Header — Figma node 1243:26387, padding 0/32/0/32, min-height 75
   ---------------------------------------------------------------------- */
.ace-header[b-lt62dc7mnj] {
    background-color: var(--ace-green);
    color: #FFFFFF;
    width: 100%;
}

/* Match PortalHeader (Airedale.Blazor.Components/Components/Warranty/PortalHeader.razor.css:11-19): the
   green bar spans the viewport, content sits inside a 120px-gutter Header Inner so the logo
   and CTAs line up with the rest of the page (the 1280-wide Sections Wrapper with 120 gutters).
   PortalHeader uses `width: 100%; padding: 16px 120px;` — mirror exactly.

   WP-297 design-review debt: the flat 120 px gutter let the content column grow
   with the viewport, so past 1280 the logo and the CTAs sat outside the column
   the page body keeps. This landing draws its own header rather than consuming
   PortalHeader, so the cap has to be stated here too. The value is not a new
   number for this page — `.ace-hero-inner`, `.ace-hero-features` and
   `.ace-why-use` below are all already `max-width: 1280px` with the same 120 px
   gutter, so this is simply what makes the header agree with the bands beneath
   it, landing content on 440..1480 at 1920 exactly as they do.

   The same 1040 column as PortalHeader, by a different declaration: the shared
   component had to express the cap as a growing gutter because a consumer
   re-gutters its row through `::deep` (see PortalHeader.razor.css). Nothing
   overrides this page's own header, so it uses the plain `max-width` form its
   sibling bands here already use. */
.ace-header-inner[b-lt62dc7mnj] {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 75px;
    padding: 16px 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.ace-header-logo img[b-lt62dc7mnj] { display: block; height: 40px; width: auto; }
.ace-header-actions[b-lt62dc7mnj] { display: flex; gap: 8px; align-items: center; }

/* Signed-in header treatment (WP-321) — avatar + name, shown by AuthorizeView in place of the
   Sign in / Sign up buttons once the user is authenticated. */
.ace-header-user[b-lt62dc7mnj] { display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF; }
.ace-header-avatar[b-lt62dc7mnj] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFFFFF;
    /* WP-407, 18 Aug: was a hardcoded #19895B, measured painting rgb(25, 137, 91) on the running
       page. The landing draws its own header rather than PortalHeader, so it needs its own line; it
       reads the same token every other ACE surface now resolves. (An earlier draft of this comment
       called it "the last element on any ACE surface still painting the other green". It was not -
       the gate found GuestConfirmedPage's .card-heading on /ace/confirmation, which was fixed in the
       same change.) */
    color: var(--ace-brand-green, #1A854C);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ace-font-ui);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.ace-header-username[b-lt62dc7mnj] { font-family: var(--ace-font-ui); font-size: 14px; color: #FFFFFF; }

/* User-menu dropdown (WP-321) — the avatar/name is a toggle button; the menu drops below it,
   right-aligned. Mirrors the shared PortalHeader menu (PortalHeader.razor.css:115-205) so the
   landing page and the inner ACE pages present the same signed-in affordance. */
.ace-header-user-wrap[b-lt62dc7mnj] { position: relative; flex: 0 0 auto; }

.ace-header-user-button[b-lt62dc7mnj] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}
.ace-header-user-button:focus-visible[b-lt62dc7mnj] {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
    border-radius: 2px;
}

.ace-header-menu-backdrop[b-lt62dc7mnj] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
    border: none;
}

.ace-header-menu[b-lt62dc7mnj] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1001;
    min-width: 224px;
    background: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08);
    padding: 4px 0;
    color: #111827;
    cursor: default;
}

.ace-header-menu-identity[b-lt62dc7mnj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #F0F0F0;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #111827;
}

.ace-header-menu-usericon[b-lt62dc7mnj] { width: 18px; height: 18px; flex: 0 0 auto; color: #111827; }

.ace-header-menu-email[b-lt62dc7mnj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ace-header-menu-item[b-lt62dc7mnj] {
    display: block;
    padding: 10px 16px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #111827;
    text-decoration: none;
    cursor: pointer;
}
.ace-header-menu-item:hover[b-lt62dc7mnj], .ace-header-menu-item:focus-visible[b-lt62dc7mnj] { background: #F5F5F5; outline: none; }

/* Button anatomy — Figma `Button` I1243:26394;47876:89252 — padding 4/15 · radius 2 · stroke 1px #FFFFFF · drop-shadow 0 2 0 rgba(0,0,0,0.016) */
.ace-nav-button[b-lt62dc7mnj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 15px;
    border-radius: 2px;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
    transition: background-color 0.12s ease;
}

.ace-nav-button-outline[b-lt62dc7mnj] {
    border-color: #FFFFFF;
    color: #FFFFFF;
    background: transparent;
}
.ace-nav-button-outline:hover[b-lt62dc7mnj], .ace-nav-button-outline:focus-visible[b-lt62dc7mnj] { background: rgba(255, 255, 255, 0.12); }

.ace-nav-button-solid[b-lt62dc7mnj] {
    background-color: #FFFFFF;
    color: var(--ace-green);
}
.ace-nav-button-solid:hover[b-lt62dc7mnj], .ace-nav-button-solid:focus-visible[b-lt62dc7mnj] { background-color: #F5F5F5; }

/* ----------------------------------------------------------------------
   Hero — Figma Hero Section 1243:26400 (1280×702) padding 48/0/48/0.
   Hero Inner 1243:26401 = 1040 wide (1280 − 120 ×2 hero padding) with gap 24.
   Hero Content 1243:26402 = 1040 wide, gap 48 between Hero Text (573) and Hero Image (419).
   Background decoration: Hero Background Decoration 1243:26397 — composite SVG with 7.5% opacity baked in.
   ---------------------------------------------------------------------- */
.ace-hero[b-lt62dc7mnj] {
    background-color: var(--ace-green-bg);
    position: relative;
    overflow: hidden;
    padding: 48px 0;
}

/* Hero decoration intentionally absent — see razor comment.  The 1243:26397 SVG rendered as a
   visible "A" silhouette through the sage-green hero, which the Figma frame doesn't show. */

.ace-hero-inner[b-lt62dc7mnj] {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 120px;
    display: grid;
    grid-template-columns: 573px 419px;
    gap: 48px;
    /* Figma uses CENTER but with Degular Display the text column matches image height.  Under the
       Inter fallback the text column runs taller, so center-align floats the image-media (and its
       badge) into the section below.  Pin to top until Degular loads. */
    align-items: start;
}

.ace-hero-content[b-lt62dc7mnj] {
    display: flex;
    flex-direction: column;
    gap: 16px;                          /* Figma Hero Text 1243:26403 itemSpacing 16 */
}

/* H1 — node 1243:26404 — Degular Display 700 64/56 letter-spacing 1.5 colour #2A3E46 */
.ace-hero-h1[b-lt62dc7mnj] {
    margin: 0;
    font-family: var(--ace-font-display);
    font-weight: 700;
    font-size: 64px;
    line-height: 56px;
    letter-spacing: 1.5px;
    color: var(--ace-dark);
    max-width: 573px;
}

/* Subhead — node 1243:26405 — Degular Display 500 24/36 letter-spacing 1 */
.ace-hero-sub[b-lt62dc7mnj] {
    margin: 0;
    font-family: var(--ace-font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 1px;
    color: var(--ace-dark);
    max-width: 573px;
}

/* Hero CTA Container 1243:26406 — siblings CTA Header (1243:26407) and Search Card (1243:26408), both 573 wide.
   No outer card surface; CTA Header is the visual "head" sitting flush on top of the Search Card body.  */
.ace-hero-cta-container[b-lt62dc7mnj] {
    display: flex;
    flex-direction: column;
    width: 573px;
    max-width: 100%;
}

/* CTA Header 1243:26407 — 573×56, white fill, no outer stroke.  Figma rendered exports show
   a 1px divider line between the header and the search card body (visible at every breakpoint);
   raw JSON didn't capture it as a stroke but it is present as a thin top border on the card. */
.ace-cta-header[b-lt62dc7mnj] {
    background: #FFFFFF;
    padding: 16px 24px;
    border-radius: 2px 2px 0 0;
    border-bottom: 1px solid var(--ace-stroke-light);
}

.ace-cta-header-title[b-lt62dc7mnj] {
    font-family: var(--ace-font-ui);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--ace-text);
}

/* Search Card 1243:26408 — radius 2 (tokens.md), stroke 1px #F0F0F0, white fill. */
.ace-search-card[b-lt62dc7mnj] {
    background: #FFFFFF;
    border: 1px solid var(--ace-stroke-light);
    border-top: 0;
    border-radius: 0 0 2px 2px;
    width: 100%;
}

/* The Blazor <EditForm> renders an underlying <form> at runtime — component-
   generated elements don't carry the .razor file's CSS-isolation scope attribute,
   so a plain `.ace-search-card-body` selector never matches and the padding +
   flex layout silently no-ops (rendered card collapses to 63px tall instead
   of the Figma 142px). `::deep` escapes isolation so the rule applies to any
   descendant carrying the class, regardless of who emitted the element. */
[b-lt62dc7mnj] .ace-search-card-body {
    padding: 32px;                      /* Figma Search Card Body 1243:26409 paddingLRTB 32 */
    display: flex;
    flex-direction: column;
    gap: 16px;                          /* Figma Search Card Body itemSpacing 16 */
}

/* Search Input I1243:26410 — width 509 in Figma; button anchored to right at 40 tall. */
.ace-search-input-row[b-lt62dc7mnj] {
    display: flex;
    align-items: stretch;
    height: 40px;
}

.ace-search-input[b-lt62dc7mnj] {
    flex: 1 1 auto;
    border: 1px solid var(--ace-stroke-input);
    border-right: none;
    border-radius: 2px 0 0 2px;
    padding: 8px 12px;
    font-family: var(--ace-font-ui);
    font-size: 16px;
    line-height: 24px;
    color: var(--ace-text);
    background: #FFFFFF;
    min-width: 0;
}
.ace-search-input[b-lt62dc7mnj]::placeholder { color: var(--ace-text-muted); opacity: 1; }
.ace-search-input:focus[b-lt62dc7mnj] { outline: none; border-color: var(--ace-blue); }

/* Primary CTA — Ant Button I1243:26410;63245:112274 — bg + border #1890FF, radius 2, padding 4/15, gap 8, height 40. */
.ace-search-cta[b-lt62dc7mnj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--ace-blue);
    color: #FFFFFF;
    border: 1px solid var(--ace-blue);
    border-radius: 0 2px 2px 0;
    padding: 8px 15px;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    white-space: nowrap;
}
/* WP-407, 18 Aug: the fallback was #1FA06B, a third shade that ace-theme.css does not declare;
   --ace-brand-green-hover IS #0F6B3D, so the fallback now repeats the declared value. */
.ace-search-cta:hover[b-lt62dc7mnj], .ace-search-cta:focus-visible[b-lt62dc7mnj] { background-color: var(--ace-brand-green-hover, #0F6B3D); border-color: var(--ace-brand-green-hover, #0F6B3D); }
.ace-search-cta-icon[b-lt62dc7mnj] { width: 14px; height: 14px; filter: brightness(0) invert(1); }   /* tint extracted search SVG to white */

/* ----------------------------------------------------------------------
   Invalid serial format state — Figma 1243:27512.
   Search input gets a red stroke (#FF4D4F); error message renders below in Roboto 400 14/22 #FF4D4F.
   ---------------------------------------------------------------------- */
.ace-search-input-row-invalid .ace-search-input[b-lt62dc7mnj],
.ace-search-input-row-invalid .ace-search-cta[b-lt62dc7mnj] {
    border-color: #FF4D4F;
}

.ace-search-error[b-lt62dc7mnj] {
    margin: 0;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #FF4D4F;     /* tokens.md row #FF4D4F — error red */
}

/* ----------------------------------------------------------------------
   Search Helper Text — rendered as a transparent <button> so it can host a
   tooltip popover on hover / focus (Figma 1466:14738 "Popover" variant).
   ---------------------------------------------------------------------- */
.ace-search-helper-wrapper[b-lt62dc7mnj] {
    position: relative;
    display: inline-block;
    align-self: flex-start;
}

.ace-search-helper[b-lt62dc7mnj] {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: help;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--ace-text-muted);   /* Figma I1243:26411 fill SOLID #000 opacity 0.45 */
    text-align: left;
    /* Figma rendered exports show the helper link underlined at every breakpoint
       (raw JSON didn't carry the decoration but the design intent is clear). */
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ace-search-helper:focus-visible[b-lt62dc7mnj] {
    outline: 2px solid var(--ace-blue);
    outline-offset: 2px;
}

/* Popover 1466:14736 — 236 wide, white body radius 2, drop-shadow 0 2 8 rgba(0,0,0,0.15).
   Content stack 1466:14739: padding 12/16, gap 8, body text Roboto 400 12/20. */
.ace-serial-tooltip[b-lt62dc7mnj] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 236px;
    padding: 12px 16px;
    background: #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: var(--ace-font-ui);
    font-size: 12px;
    line-height: 20px;
    color: var(--ace-text);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ace-search-helper:hover + .ace-serial-tooltip[b-lt62dc7mnj],
.ace-search-helper:focus-visible + .ace-serial-tooltip[b-lt62dc7mnj],
.ace-search-helper-wrapper:focus-within .ace-serial-tooltip[b-lt62dc7mnj] {
    visibility: visible;
    opacity: 1;
}

/* Card-Head title I1466:14738 — Roboto 500 14/22. */
.ace-serial-tooltip strong[b-lt62dc7mnj] {
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
}

/* Divider 1466:14759 — 1px hairline rgba(0,0,0,0.06) across the content width. */
.ace-serial-tooltip-divider[b-lt62dc7mnj] {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Nameplate diagram 1466:14740 — content-width dark card · #262626 · padding 8/12 · gap 8. */
.ace-serial-nameplate[b-lt62dc7mnj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #262626;
    padding: 8px 12px;
}

/* "NAMEPLATE" 1466:14742 — Roboto 700 9/11 #8C8C8C. */
.ace-serial-nameplate-heading[b-lt62dc7mnj] {
    font-weight: 700;
    font-size: 9px;
    line-height: 11px;
    color: #8C8C8C;
}

/* Label/value rows 1466:14743 / 1466:14750 — horizontal, gap 32. */
.ace-serial-nameplate-row[b-lt62dc7mnj] {
    display: flex;
    gap: 32px;
}

.ace-serial-nameplate-field[b-lt62dc7mnj] {
    display: flex;
    flex-direction: column;
}

/* Labels (MODEL / VOLTAGE / SERIAL NO. / YEAR) — Roboto 400 9/11 #8C8C8C. */
.ace-serial-nameplate-label[b-lt62dc7mnj] {
    font-weight: 400;
    font-size: 9px;
    line-height: 11px;
    color: #8C8C8C;
}

/* Values (EB3FX / 230V / 50Hz / 2021) — Roboto 400 12/14 #D9D9D9. */
.ace-serial-nameplate-value[b-lt62dc7mnj] {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #D9D9D9;
}

/* Serial pill 1466:14753 — #434343 fill · radius 4 · padding 4 · 1px #91D5FF stroke;
   text SN-2847-XKQT Roboto 700 11/13 #FFFFFF (1466:14754). */
.ace-serial-nameplate-serial[b-lt62dc7mnj] {
    align-self: flex-start;
    background: #434343;
    border: 1px solid #91D5FF;
    border-radius: 4px;
    padding: 4px;
    font-weight: 700;
    font-size: 11px;
    line-height: 13px;
    color: #FFFFFF;
}

/* ----------------------------------------------------------------------
   Hero media + overlay badges — Hero Image Container 1469:14772 (419×486).
   Hero Image 1469:14774 itself is 419×419 (radius 10), sitting at top of container.
   Overlays positioned via Figma absoluteBoundingBox - parent.absoluteBoundingBox.
   ---------------------------------------------------------------------- */
.ace-hero-media[b-lt62dc7mnj] {
    position: relative;
    width: 419px;
    height: 486px;
}

/* Hero Image 1469:14774 — in Figma raw the image absoluteBoundingBox.y = -2881 vs container y = -2915,
   so the image sits at top:34 INSIDE the 486-tall container (not at the top edge).  Badge positions
   (Warranty Active top:51, Tag top:126, Request support top:214, Engineer scheduled top:382) are all
   relative to the CONTAINER and end up inside the image area (image goes from 34 → 453).
   Without this 34px offset the "Engineer scheduled" badge bleeds below the image edge. */
.ace-hero-image[b-lt62dc7mnj] { position: absolute; top: 33.5px; left: 0; width: 419px; height: 419px; display: block; }
.ace-hero-image img[b-lt62dc7mnj] { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

/* Frosted-glass backdrop rectangles — direct siblings of the alerts in Figma.  Each is a
   plain absolute-positioned rectangle at its exact Figma bbox with backdrop-filter blur(16).
   Alerts are positioned separately at their own Figma coords (NOT nested-flex-centred inside). */
.ace-hero-badge-frosted[b-lt62dc7mnj] {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Hero Badge Background 1469:14775 — bbox x=-8514 y=-2864 w=174 h=56 inside container x=-8759 y=-2915 → left:245 top:51. */
.ace-hero-badge-frosted-success[b-lt62dc7mnj] {
    left: 245px;
    top: 51px;
    width: 174px;
    height: 56px;
    border-radius: 8px 0 0 8px;
}

/* Hero Info Badge Container 1469:14781 (collapsed with background 1469:14782) — bbox x=-8546 y=-2533 w=198 h=56 → left:213 top:382. */
.ace-hero-badge-frosted-info[b-lt62dc7mnj] {
    left: 213px;
    top: 382px;
    width: 198px;
    height: 56px;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Hero Alert Badges — pixel-perfect Figma positions.
   Success alert 1469:14776: sibling of 1469:14775 inside 1469:14772 → left:253 top:59 width:158 height:40.
   Info alert    1469:14783: nested INSIDE 1469:14781 (its container) at +8/+8 → left:8 top:8 width:182 height:40. */
.ace-hero-alert[b-lt62dc7mnj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 2px;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--ace-text);
    white-space: nowrap;
    box-sizing: border-box;
}
.ace-hero-alert-success[b-lt62dc7mnj] {
    position: absolute;
    left: 253px;
    top: 59px;
    width: 158px;
    height: 40px;
    background-color: var(--ace-success-bg);
    border: 1px solid var(--ace-success-border);
}
.ace-hero-alert-info[b-lt62dc7mnj] {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 182px;
    height: 40px;
    background-color: var(--ace-info-bg);
    border: 1px solid var(--ace-info-border);
}
.ace-hero-alert-icon[b-lt62dc7mnj] { width: 16px; height: 16px; display: block; }
.ace-hero-alert-success .ace-hero-alert-icon[b-lt62dc7mnj] { filter: brightness(0) saturate(100%) invert(58%) sepia(78%) saturate(486%) hue-rotate(53deg) brightness(94%) contrast(86%); }  /* SVG ships black; tint to #52C41A success green */
.ace-hero-alert-info .ace-hero-alert-icon[b-lt62dc7mnj] { filter: brightness(0) saturate(100%) invert(40%) sepia(95%) saturate(2125%) hue-rotate(195deg) brightness(102%) contrast(101%); }  /* tint to #1890FF info blue */

/* Hero Tag 1469:14780 — bbox x=-8418 y=-2789 w=65 h=22 → left:341 top:126. */
.ace-hero-tag[b-lt62dc7mnj] {
    position: absolute;
    left: 341px;
    top: 126px;
    width: 65px;
    height: 22px;
    padding: 1px 8px;
    background-color: var(--ace-success-bg);
    border: 1px solid var(--ace-success-border);
    border-radius: 2px;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: var(--ace-success-icon);
    box-sizing: border-box;
    white-space: nowrap;
    z-index: 2;
}

/* Hero Secondary Button — Container 1469:14777 (173×48 @ 15,214) with background backdrop (radius 8) + Button instance 1469:14779 (157×32 @ 8,7). */
.ace-hero-secondary-button-container[b-lt62dc7mnj] {
    position: absolute;
    left: 15px;
    top: 214px;
    width: 173px;
    height: 48px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 8px;
    box-sizing: border-box;
}
.ace-hero-secondary-button[b-lt62dc7mnj] {
    position: absolute;
    left: 8px;
    top: 7px;                       /* Figma Button 1469:14779 absoluteBoundingBox shows top:7 (asymmetric 7/9) */
    width: 157px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;                       /* Figma Icon-Wrapper at L:16 + 14 icon = 30, then text at L:38 → 8px gap */
    padding: 4px 15px;
    background: transparent;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    box-sizing: border-box;
}
.ace-hero-secondary-button-icon[b-lt62dc7mnj] { width: 14px; height: 14px; display: block; }
.ace-hero-secondary-button:hover[b-lt62dc7mnj], .ace-hero-secondary-button:focus-visible[b-lt62dc7mnj] { background: rgba(255, 255, 255, 0.12); }

/* ----------------------------------------------------------------------
   Hero feature row — Warranty / Support / Check inline on the sage-green
   hero background.  Figma 1243:26424 Feature CTA Cards — itemSpacing 24,
   padding 16/0/16/0.  Parent Hero Inner itemSpacing 24 between Hero Content
   and Feature CTA Cards (F12, F13, F14).
   ---------------------------------------------------------------------- */
.ace-hero-features[b-lt62dc7mnj] {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 24px auto 0;            /* F13: was 48, Figma Hero Inner itemSpacing 24 */
    max-width: 1280px;
    padding: 16px 120px;            /* F14: Figma Feature CTA Cards paddingTop/Bottom 16 */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;                      /* F12: Feature CTA Cards itemSpacing 24, was 48 */
}

/* Icon sits on the same line as the title (inline with the header row);
   description wraps below at full width. */
.ace-hero-feature[b-lt62dc7mnj] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 4px;
}

.ace-hero-feature-icon[b-lt62dc7mnj] {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 32px;
    height: 32px;
    display: block;
}

.ace-hero-feature-title[b-lt62dc7mnj] {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    font-family: var(--ace-font-ui);
    font-weight: 500;
    font-size: 24px;                /* F10: Figma 1243:26441 Roboto Medium 24/32 */
    line-height: 32px;
    color: var(--ace-text);
}

.ace-hero-feature-text[b-lt62dc7mnj] {
    grid-column: 1 / span 2;        /* full-width row beneath the icon+title line */
    grid-row: 2;
    margin: 0;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 16px;                /* F11: Figma description Roboto Regular 16/24 */
    line-height: 24px;
    color: var(--ace-text);
}

/* ----------------------------------------------------------------------
   Why Use section — node 1243:26454.  Section padding 48/24/48/24 (tokens.md).
   Heading: Degular Display 600 38/46.  Sub: Roboto 400 24/32.
   3 steps in a row with image on top + content below.
   ---------------------------------------------------------------------- */
/* Why Use Inner 1243:26455 is 1040 wide centred inside the 1280-wide section (1243:26454),
   sharing the same x=-9380 left edge as Hero Inner 1243:26401 and the CTA sections.  Mirror
   the hero's treatment (max-width 1280 + 120px gutters) so the content box is exactly 1040
   and aligns with the bands above/below — audit 2026-06-04 F5 (was 1040 + 24px padding = 992,
   ~48px inset vs siblings). */
.ace-why-use[b-lt62dc7mnj] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 120px;
}

.ace-why-use-header[b-lt62dc7mnj] {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}

.ace-why-use-heading[b-lt62dc7mnj] {
    margin: 0 0 16px;
    font-family: var(--ace-font-display);
    font-weight: 600;
    font-size: 38px;
    line-height: 46px;
    color: var(--ace-text);
}

.ace-why-use-sub[b-lt62dc7mnj] {
    margin: 0;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: var(--ace-text);
}

.ace-steps[b-lt62dc7mnj] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;                          /* Figma Steps Container 1243:26462 itemSpacing 48 */
}

.ace-step[b-lt62dc7mnj] {
    display: flex;
    flex-direction: column;
    gap: 24px;                          /* Figma Step 1243:26463 itemSpacing 24 (image → content) */
}

.ace-step-media[b-lt62dc7mnj] {
    position: relative;
    border-radius: 16px;                /* Figma Step image frames cornerRadius 16 */
    overflow: hidden;
}

.ace-step-image[b-lt62dc7mnj] { display: block; }
.ace-step-image img[b-lt62dc7mnj] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;                /* Figma step images are 314.66×314.66 — square */
    object-fit: cover;
}

/* Step 1 — Equipment Info Overlay "Fryer FR3DX" — frosted-glass label.
   Figma Equipment Info Background 1243:26468 fill SOLID #000 opacity 0.5, backdrop-blur 16, radius 16.
   Position 21/126 inside 315×315 → 7% from left, 40% from top.  Icon Vector 1243:26469 is 24×24. */
.ace-step-nameplate[b-lt62dc7mnj] {
    position: absolute;
    left: 7%;
    top: 40%;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.5);     /* Figma 1243:26468 fill opacity 0.5 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    color: #FFFFFF;
    font-family: var(--ace-font-ui);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ace-step-nameplate-icon[b-lt62dc7mnj] { width: 24px; height: 24px; display: block; }   /* Figma Vector 1243:26469 24×24 */

/* Step 2 / Step 3 two-layer composition.  Outer widths differ between steps:
     Step 2 (Warranty Active)   Container 1243:26481  → 188×72 at (108.33, 224)
     Step 3 (Engineer scheduled) Container 1243:26492 → 215×72 at (94.67, 146)
   Inner Alert pill (radius 2) sits at left=15/16 top=16 with explicit Figma width. */
.ace-step-badge-frosted[b-lt62dc7mnj] {
    position: absolute;
    height: 72px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
}
.ace-step-badge-frosted-step2[b-lt62dc7mnj] { left: 34%; top: 70%; width: 188px; }
.ace-step-badge-frosted-step3[b-lt62dc7mnj] { left: 30%; top: 45%; width: 215px; }

/* Inner Alert pill — Figma spec sits at left:15/16 top:16 with explicit width that
   includes its 9/16 padding (border-box).  Step 2 158×40, Step 3 182×40. */
.ace-step-badge[b-lt62dc7mnj] {
    position: absolute;
    top: 16px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 2px;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--ace-text);
    white-space: nowrap;
    box-sizing: border-box;
}
.ace-step-badge-frosted-step2 .ace-step-badge[b-lt62dc7mnj] { left: 15px; width: 158px; }
.ace-step-badge-frosted-step3 .ace-step-badge[b-lt62dc7mnj] { left: 16px; width: 182px; }
.ace-step-badge img[b-lt62dc7mnj] { width: 16px; height: 16px; display: block; }
.ace-step-badge-success[b-lt62dc7mnj] { background-color: var(--ace-success-bg); border: 1px solid var(--ace-success-border); }
.ace-step-badge-success img[b-lt62dc7mnj] { filter: brightness(0) saturate(100%) invert(58%) sepia(78%) saturate(486%) hue-rotate(53deg) brightness(94%) contrast(86%); }
.ace-step-badge-info[b-lt62dc7mnj] { background-color: var(--ace-info-bg); border: 1px solid var(--ace-info-border); }
.ace-step-badge-info img[b-lt62dc7mnj] { filter: brightness(0) saturate(100%) invert(40%) sepia(95%) saturate(2125%) hue-rotate(195deg) brightness(102%) contrast(101%); }

.ace-step-content[b-lt62dc7mnj] { display: flex; flex-direction: column; gap: 12px; }   /* Figma Step Content 1243:26472 itemSpacing 12 */

.ace-step-heading[b-lt62dc7mnj] {
    margin: 0;
    font-family: var(--ace-font-ui);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: var(--ace-text);
}

.ace-step-description[b-lt62dc7mnj] {
    margin: 0;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ace-text);
}

/* ----------------------------------------------------------------------
   CTA blocks — Support (image left) + Partner (image right).
   Each is a rounded-card surface (radius 16, white fill) holding image + content.
   Image radius is asymmetric to nest into the section's outer rounding:
     - Support image: 16/0/0/16 (left side only)
     - Partner image: 0/16/16/0 (right side only)
   ---------------------------------------------------------------------- */
/* Wrapper around the two CTA blocks.  At xl/desktop it's a transparent passthrough so
   blocks stack vertically (each block keeps its image-side+content-side internal layout).
   At lg the wrapper becomes a 2-column grid so the blocks sit side-by-side per Figma. */
.ace-cta-row[b-lt62dc7mnj] { display: block; }

/* The card itself.  Figma Support/Partner sections 1247:29706 / 1247:29846 are 1040 wide, the
   same as Why-use Inner.  Centred via auto margin; 48 below per Why Use Inner itemSpacing 48. */
.ace-cta-block[b-lt62dc7mnj] {
    max-width: 1040px;
    margin: 0 auto 48px;
}

/* F23: Figma Support Section 1247:29706 is 1040×372 with the image column 440 wide and content 600 wide
   (not 50/50).  Mirror that for Partner with image-right. */
.ace-cta-block-support[b-lt62dc7mnj] {
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 0;
    background: var(--ace-cta-surface);
    border-radius: 16px;
    overflow: hidden;
}
.ace-cta-block-partner[b-lt62dc7mnj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 0;
    background: var(--ace-cta-surface);
    border-radius: 16px;
    overflow: hidden;
}

/* CTA image MUST fill the grid cell edge-to-edge so the image is flush with the white card
   border, regardless of viewport size or row height.  Picture + img with `height: 100%` alone
   was unreliable because <picture> has no intrinsic height and grid layout doesn't always
   propagate the cell height down.  Solution: make the picture a sized positioning context
   (relative, stretch to cell) and absolutely-position the img to fill it.
   Corner rounding lives on the <img> itself so it clips actual image pixels — putting it on the
   <picture> wrapper plus the card both having border-radius left a 1-2px white sliver at the
   intersecting rounded edge. */
.ace-cta-image[b-lt62dc7mnj] {
    display: block;
    position: relative;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    min-width: 0;
}
.ace-cta-image img[b-lt62dc7mnj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ace-cta-image-left img[b-lt62dc7mnj] { border-radius: 16px 0 0 16px; }
.ace-cta-image-right img[b-lt62dc7mnj] { border-radius: 0 16px 16px 0; }

/* Image corner rounding moved up to `.ace-cta-image-left img` / `.ace-cta-image-right img`.
   See the .ace-cta-image rule above. */

.ace-cta-content[b-lt62dc7mnj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px;
}

.ace-cta-heading[b-lt62dc7mnj] {
    margin: 0;
    font-family: var(--ace-font-display);
    font-weight: 600;
    font-size: 40px;
    line-height: 40px;
    letter-spacing: 0.4px;
    color: var(--ace-green);
}
/* F25 — Partner heading is 40/32 not 40/40 per raw root.json:18555 */
.ace-cta-block-partner .ace-cta-heading[b-lt62dc7mnj] { line-height: 32px; }

.ace-cta-description[b-lt62dc7mnj] {
    margin: 0;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ace-text);
}

.ace-cta-leadin[b-lt62dc7mnj] {
    margin: 0;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ace-text);
}

/* Figma Support Features 1247:29716 / Partner Benefits — list paddingLeft/Right 16, itemSpacing 4.
   Each row 1247:29717 has paddingLeft/Right 8, primaryAxisAlignItems CENTER, counterAxisAlignItems CENTER. */
.ace-cta-benefits[b-lt62dc7mnj] {
    list-style: none;
    padding: 0 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ace-cta-benefits li[b-lt62dc7mnj] {
    display: flex;
    align-items: center;                /* Figma row counterAxisAlignItems CENTER */
    gap: 8px;
    padding: 0 8px;                     /* Figma row paddingLeft/Right 8 */
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ace-text);
}

.ace-cta-benefits li img[b-lt62dc7mnj] {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 16px;
}

/* Partner bullets use Open Sans 14/28 with -0.28 letter-spacing per Figma 1247:29859. */
.ace-cta-benefits-compact li[b-lt62dc7mnj] {
    font-family: var(--ace-font-body);
    font-size: 14px;
    line-height: 28px;
    letter-spacing: -0.28px;
}

/* Sign Up for free — Roboto 400 14/22 · padding 4/15 · radius 2 · stroke 1px #D9D9D9 */
.ace-cta-button[b-lt62dc7mnj] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 4px 15px;
    border: 1px solid var(--ace-stroke-input);
    border-radius: 2px;
    background: #FFFFFF;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--ace-text);
    text-decoration: none;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
}
.ace-cta-button:hover[b-lt62dc7mnj], .ace-cta-button:focus-visible[b-lt62dc7mnj] { border-color: var(--ace-green); color: var(--ace-green); }

/* ----------------------------------------------------------------------
   Responsive — Figma Breakpoints canvas defines five widths:
       xl-1280 (default), lg-1030, md-744, sm-574, xs-375
   Mobile-first cascade is awkward here (the desktop spec is the source of
   truth and the most precise) so each breakpoint is expressed as
   max-width with progressively narrower thresholds.
   ---------------------------------------------------------------------- */

/* lg ≤ 1030 — Hero keeps 2-column but image column shrinks.  Trust row + steps stay
   3-col.  The two CTA blocks share a 2-column row (each block stacks internally to
   image-on-top + content-below). */
@media (max-width: 1030px) {
    .ace-hero-inner[b-lt62dc7mnj] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
        padding: 0 32px;
        gap: 32px;
    }
    .ace-hero-h1[b-lt62dc7mnj] { max-width: none; }
    .ace-hero-sub[b-lt62dc7mnj] { max-width: none; }
    .ace-hero-cta-container[b-lt62dc7mnj] { width: 100%; }
    .ace-hero-media[b-lt62dc7mnj] { width: 100%; max-width: 380px; }
    .ace-hero-features[b-lt62dc7mnj] { padding: 16px 32px; }
    .ace-why-use[b-lt62dc7mnj] { padding: 48px 32px; }

    /* Why-use steps switch from 3-column grid to vertically-stacked rows.  Each row
       has image LEFT (~245px wide) and content RIGHT.  Figma lg-1030 export shows the
       three steps stacked, not side-by-side. */
    .ace-steps[b-lt62dc7mnj] { grid-template-columns: 1fr; gap: 32px; }
    .ace-step[b-lt62dc7mnj] {
        display: grid;
        grid-template-columns: minmax(0, 245px) minmax(0, 1fr);
        gap: 24px;
        align-items: center;
    }

    /* CTA row: 2-column grid, each card stacks image-on-top + content-below. */
    .ace-cta-row[b-lt62dc7mnj] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        max-width: 1040px;
        margin: 0 auto;
        padding: 0 32px 48px;
    }
    .ace-cta-row .ace-cta-block[b-lt62dc7mnj] {
        max-width: none;
        margin: 0;
    }
    .ace-cta-block-support[b-lt62dc7mnj],
    .ace-cta-block-partner[b-lt62dc7mnj] { grid-template-columns: 1fr; }
    .ace-cta-image[b-lt62dc7mnj] {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 200px;
    }
    .ace-cta-image-left img[b-lt62dc7mnj],
    .ace-cta-image-right img[b-lt62dc7mnj] { border-radius: 16px 16px 0 0; }
    /* Partner DOM is content-first then image; flip with order so image goes on top. */
    .ace-cta-block-partner .ace-cta-image-right[b-lt62dc7mnj] { order: -1; }
    .ace-cta-content[b-lt62dc7mnj] { padding: 32px; }
}

/* md ≤ 744 — Hero is text-only (Figma drops the hero photo at this breakpoint and
   below).  Trust row stays 3 columns.  Steps stack 1-column.  CTA cards stack
   image-on-top.  Partner block reverses to put image above content via order. */
@media (max-width: 744px) {
    .ace-hero-inner[b-lt62dc7mnj] {
        grid-template-columns: 1fr;
        padding: 0 32px;
        gap: 32px;
    }
    /* Hide hero image (and its four overlay chips) per Figma md/sm/xs exports. */
    .ace-hero-media[b-lt62dc7mnj] { display: none; }
    /* Figma keeps the H1 at full xl display-scale on tablet/mobile (64) so that the heading
       remains the visual anchor at every breakpoint.  Subhead stays at 24-28 too. */
    .ace-hero-h1[b-lt62dc7mnj] { font-size: 64px; line-height: 60px; letter-spacing: 1px; }
    .ace-hero-sub[b-lt62dc7mnj] { font-size: 24px; line-height: 32px; }
    .ace-hero-features[b-lt62dc7mnj] { padding: 16px 32px; }
    .ace-why-use[b-lt62dc7mnj] { padding: 48px 32px; max-width: none; }
    .ace-steps[b-lt62dc7mnj] { grid-template-columns: 1fr; }
    /* Override lg image-LEFT row layout: at md and below each step stacks image-on-top. */
    .ace-step[b-lt62dc7mnj] {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .ace-step-image img[b-lt62dc7mnj] { aspect-ratio: 1 / 1; max-height: 380px; object-position: center; }

    /* CTA row collapses to 1-column at md and below.  Image-on-top + content-below
       continues from the lg rules; the row wrapper just stacks. */
    .ace-cta-row[b-lt62dc7mnj] {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 0 32px 48px;
    }
    .ace-cta-image[b-lt62dc7mnj] { min-height: 240px; }
}

/* sm ≤ 574 — Trust row stays 3-column (per Figma sm-574 export); just tighten the
   gutters and shrink the H1.  Search input keeps its row layout at this width. */
@media (max-width: 574px) {
    .ace-header-inner[b-lt62dc7mnj] { padding: 16px 24px; }
    .ace-hero-inner[b-lt62dc7mnj] { padding: 0 24px; }
    .ace-hero-features[b-lt62dc7mnj] {
        padding: 16px 24px;
        gap: 16px;
    }
    .ace-why-use[b-lt62dc7mnj] { padding: 48px 24px; }
    .ace-cta-row[b-lt62dc7mnj] { padding: 0 24px 48px; }
    .ace-cta-content[b-lt62dc7mnj] { padding: 24px; }
    .ace-hero-h1[b-lt62dc7mnj] { font-size: 60px; line-height: 56px; }
    .ace-hero-sub[b-lt62dc7mnj] { font-size: 22px; line-height: 30px; }
}

/* xs ≤ 375 — Phone portrait.  Trust row collapses to single column (per Figma xs-375
   export); search input + CTA button stack vertically; hero headings shrink further. */
@media (max-width: 375px) {
    .ace-header-inner[b-lt62dc7mnj] { padding: 12px 16px; }
    .ace-hero-inner[b-lt62dc7mnj],
    .ace-hero-features[b-lt62dc7mnj],
    .ace-why-use[b-lt62dc7mnj] { padding-left: 16px; padding-right: 16px; }
    .ace-cta-row[b-lt62dc7mnj] { padding: 0 16px 32px; }
    .ace-cta-content[b-lt62dc7mnj] { padding: 24px 16px; }
    .ace-hero-features[b-lt62dc7mnj] { grid-template-columns: 1fr; }
    .ace-hero-h1[b-lt62dc7mnj] { font-size: 64px; line-height: 60px; letter-spacing: 1px; }
    .ace-hero-sub[b-lt62dc7mnj] { font-size: 20px; line-height: 28px; }
    .ace-cta-heading[b-lt62dc7mnj] { font-size: 32px; line-height: 36px; }
    .ace-why-use-heading[b-lt62dc7mnj] { font-size: 28px; line-height: 34px; }
    /* Figma xs shows the search button as an inline ICON-ONLY square next to the input.
       Keep flex-row, hide the button text, lock width to 40px. */
    .ace-search-cta[b-lt62dc7mnj] {
        width: 40px;
        padding: 0;
        flex: 0 0 40px;
    }
    .ace-search-cta span[b-lt62dc7mnj] { display: none; }
    .ace-serial-tooltip[b-lt62dc7mnj] { min-width: 240px; max-width: calc(100vw - 32px); }
}
/* /Pages/Landing/AceProductPage.razor.rz.scp.css */
/* WP-270 AC3 — Authenticated Product Page (Guest Asset Detail) styles.
   Tokens trace to Documents/ace-warranty-portal/Design/product-page/tokens.md
   (Figma node 1241:9249, Ready For Dev). */

.ace-product-page[b-klrpeup66m] {
    --ace-green: var(--ace-brand-green, #1A854C);   /* WP-353: single source is --ace-brand-green (ace-theme.css) */
    --ace-page-bg: #F4F3F1;          /* same page surface as landing */
    --ace-text: #000000;
    --ace-stroke-light: #F0F0F0;
    --ace-stroke-input: #D9D9D9;
    --ace-blue: var(--ace-brand-green, #1A854C);   /* WP-353: ACE primary/interactive colour is brand green, not Ant blue */

    --ace-font-display: "degular-display", "Degular Display", "Inter", system-ui, sans-serif;
    --ace-font-ui: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

    background: var(--ace-page-bg);
    color: var(--ace-text);
    font-family: var(--ace-font-ui);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[b-klrpeup66m] .ace-product-page,
[b-klrpeup66m] .ace-product-page * {
    box-sizing: border-box;
}

.ace-product-main[b-klrpeup66m] {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    /* 120px gutters = (1280 - 1040) / 2 to match Figma .Page-Header(Legacy) 1040 content width.
       DUAT-22: 48px bottom padding separates the content from the footer (matching the
       register / welcome-back mains) — previously zero, so the card sat flush against it. */
    padding: 0 120px 48px;
}

/* ----------------------------------------------------------------------
   Page Header — Figma .Page-Header(Legacy) 1268:17731 (cid 295:9996).
   heading (1040×40): heading-left "Title" + heading-extra Buttons.
   Tabs row (1040×48): Overview / Jobs.
   ---------------------------------------------------------------------- */
/* .Page-Header(Legacy) 1268:17731 — top padding 16, gap 8 between heading row and tabs (tokens.md:71). */
.ace-page-header[b-klrpeup66m] {
    padding: 16px 0 0;
}

.ace-page-header-inner[b-klrpeup66m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 40px;
}

/* DUAT-16: heading-left wraps the back arrow + title so they stay grouped
   while the actions sit on the right (per Figma 1241:10185 page-header
   structure: heading-left HORIZONTAL FRAME with itemSpacing 16). */
.ace-page-header-heading-left[b-klrpeup66m] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Back arrow link — Ant ArrowLeft INSTANCE (componentId 295:9248), 16×16
   per Figma `I1259:22284;76030:6324;40658:996930;1872:236`.  Empty fills
   on the Figma instance — inherits rgba(0,0,0,0.85), the standard
   character/primary colour for header icons. */
.ace-page-header-back[b-klrpeup66m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: rgba(0, 0, 0, 0.85);
    text-decoration: none;
    flex: 0 0 auto;
}
/* DUAT-17 review (2026-06-09): WCAG 2.5.5 — expand the hit area to 44×44 on
   touch / mobile pointers while keeping the 16×16 glyph centred. The glyph
   sizing in `.ace-page-header-back .anticon` below stays 16×16, so the icon
   doesn't change visually — only the tap target grows. */
@media (pointer: coarse), (max-width: 767px) {
    .ace-page-header-back[b-klrpeup66m] {
        width: 44px;
        height: 44px;
        margin: -14px 0;
    }
}
.ace-page-header-back:hover[b-klrpeup66m],
.ace-page-header-back:focus-visible[b-klrpeup66m] {
    color: var(--ace-blue);
}
[b-klrpeup66m] .ace-page-header-back .anticon,
[b-klrpeup66m] .ace-page-header-back .anticon svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Page title — Roboto 500 20/28 #000 (content.md:35) */
.ace-page-header-title[b-klrpeup66m] {
    margin: 0;
    font-family: var(--ace-font-ui);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: var(--ace-text);
}

.ace-page-header-actions[b-klrpeup66m] {
    display: flex;
    gap: 8px;
}

/* Page-header Button — Roboto 400 14/22 #000, white surface, 1px #D9D9D9 stroke, radius 2, padding 4/15. */
.ace-page-header-button[b-klrpeup66m] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 15px;
    background: #FFFFFF;
    border: 1px solid var(--ace-stroke-input);
    border-radius: 2px;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--ace-text);
    cursor: pointer;
}
.ace-page-header-button:hover[b-klrpeup66m],
.ace-page-header-button:focus-visible[b-klrpeup66m] {
    border-color: var(--ace-green);
    color: var(--ace-green);
}
.ace-page-header-button-icon[b-klrpeup66m] { width: 14px; height: 14px; }

/* Tabs — .Tabs-Top(Legacy) cid 295:9771 — height 48, active tab has #1890FF underline + colour.
   Top margin 16 = parent .Page-Header(Legacy) gap 8 + .Tabs-Top(Legacy) padding-top 8 (tokens.md:71, 80).
   No row-level underline — the LINE "box-shadow" child I1268:17731;56074:499;46464:3 is visible:false
   in _figma-raw/root.json:4358; only the active-tab indicator should render. */
.ace-page-tabs[b-klrpeup66m] {
    display: flex;
    gap: 0;
    margin-top: 16px;
}

.ace-page-tab[b-klrpeup66m] {
    /* Tabs are <button> elements (state-driven, not links) — reset the browser's
       default button chrome so they read as plain tabs. Figma 1241:10185 shows
       no background, no border (just the bottom 2px indicator). */
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 12px 16px;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ace-text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.ace-page-tab-active[b-klrpeup66m] {
    color: var(--ace-blue);
    border-bottom-color: var(--ace-blue);
}
.ace-page-tab:hover[b-klrpeup66m] { color: var(--ace-blue); }
.ace-page-tab:focus-visible[b-klrpeup66m] {
    outline: 2px solid var(--ace-blue);
    outline-offset: -2px;
}

/* Jobs tabpanel — intentionally minimal styling for now.
   The Figma 1241:10185 "Asset Page - Second level" Jobs variant defines a
   1040×332 white card with a toolbar (`3 Jobs` title + Status filter Select)
   and a table (Job Reference + more columns, header row #FAFAFA, cells
   fs=14/fw=400 #000000@0.85) — see
   Documents/ace-warranty-portal/Design/asset-page-second-level/tokens.md.
   That full table will be assembled by reusing WP-304's JobRow +
   JobsTableViewState behind a new <AceAssetJobsPanel> component (separate
   follow-up ticket — not improvised here).
   Until that lands, the panel renders a plain message in the page-body
   context using only existing page typography tokens (no card chrome, no
   improvised dimensions, colours or radii). */
.ace-product-jobs-panel-stub[b-klrpeup66m] {
    padding: 24px 0;
    color: var(--ace-text);
}
.ace-product-jobs-panel-stub p[b-klrpeup66m] {
    margin: 0;
}

/* ----------------------------------------------------------------------
   Body — Frame 987653 holds the Guest banner + Asset card.
   Figma's white surface is .Page-Header(Legacy) 1268:17731 itself (Fills #FFFFFF, no radius);
   the children sit directly inside it.  No corner radius in tokens.md.
   ---------------------------------------------------------------------- */
.ace-product-body[b-klrpeup66m] {
    margin-top: 8px;            /* .Page-Header(Legacy) gap 8 between tabs and body content */
    /* DUAT-22: even 24px padding — the previous 0 bottom cropped the white panel flush
       against the card's underside, reading as the card colliding with the footer. */
    padding: 24px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ----------------------------------------------------------------------
   Asset detail card — Frame 987658 → Frame 987633.
   Image on left (~140×140 thumb), content on right.
   ---------------------------------------------------------------------- */
.ace-asset-card[b-klrpeup66m] {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.ace-asset-card-image[b-klrpeup66m] {
    display: block;
    background: #FFFFFF;
    border: 1px solid var(--ace-stroke-light);
    border-radius: 4px;
    padding: 16px;
}
.ace-asset-card-image img[b-klrpeup66m] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* AC2 empty state — no product image available for this asset. */
.ace-asset-card-image-empty[b-klrpeup66m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    text-align: center;
    color: rgba(0, 0, 0, 0.45);
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
}

.ace-asset-card-content[b-klrpeup66m] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Asset title — Roboto 400 24/32 #000 (content.md:139) */
.ace-asset-card-title[b-klrpeup66m] {
    margin: 0;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: var(--ace-text);
}

.ace-asset-card-location[b-klrpeup66m] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--ace-text);
}
.ace-asset-card-location-icon[b-klrpeup66m] { width: 14px; height: 14px; opacity: 0.7; }

/* F50: Figma renders Warranty Active as a full-width Alert across the content column,
   not a compact inline tag.  Stretch the host so the inner StatusPill (b-* scoped attr)
   takes the full width.  ::deep needed to reach the WP-297 component's internal Tag. */
.ace-asset-card-warranty-row[b-klrpeup66m] {
    display: block;
    width: 100%;
}
[b-klrpeup66m] .ace-asset-card-warranty-row .status-pill-host { display: block; }
[b-klrpeup66m] .ace-asset-card-warranty-row .status-pill-host .ant-tag { display: flex; width: 100%; padding: 9px 16px; border-radius: 2px; }

/* Detail rows — Warranty Type / Valid until / Category / Expires.
   Figma uses a 2-column grid with label-value pairs.  F52: labels grey, values bold black. */
.ace-asset-card-details[b-klrpeup66m] {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 32px;
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--ace-text);
}
.ace-asset-card-detail[b-klrpeup66m] {
    display: flex;
    gap: 4px;
    align-items: baseline;
}
.ace-asset-card-detail dt[b-klrpeup66m] { margin: 0; color: rgba(0, 0, 0, 0.45); }     /* F52 */
.ace-asset-card-detail dd[b-klrpeup66m] { margin: 0; }

/* Request support CTA — Roboto 400 16/24 #000, white surface, 1px stroke, radius 2. */
.ace-asset-card-cta[b-klrpeup66m] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: #FFFFFF;
    border: 1px solid var(--ace-stroke-input);
    border-radius: 2px;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
    font-family: var(--ace-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--ace-text);
    cursor: pointer;
    margin-top: 8px;
}
.ace-asset-card-cta:hover[b-klrpeup66m],
.ace-asset-card-cta:focus-visible[b-klrpeup66m] {
    border-color: var(--ace-green);
    color: var(--ace-green);
}
.ace-asset-card-cta-icon[b-klrpeup66m] { width: 16px; height: 16px; }

/* ----------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
/* DUAT-22 (PR #393 review): the breakpoint overrides must carry the 48px bottom gutter —
   the 2-value shorthand was resetting it to 0, bringing the footer collision back on
   tablets/phones. */
@media (max-width: 1080px) {
    .ace-product-main[b-klrpeup66m] { padding: 0 32px 48px; }
    .ace-asset-card[b-klrpeup66m] { grid-template-columns: 1fr; }
    .ace-asset-card-image[b-klrpeup66m] { max-width: 240px; }
}

@media (max-width: 600px) {
    .ace-product-main[b-klrpeup66m] { padding: 0 16px 48px; }
    .ace-page-header-inner[b-klrpeup66m] { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ace-asset-card-details[b-klrpeup66m] { grid-template-columns: 1fr; }
}
/* /Pages/Landing/AceProfilePage.razor.rz.scp.css */
/* ACE profile page surface. Matches the ACE shell (AceLanding / AceProductPage)
   --ace-page-bg token. The white card + its responsive gutter are owned by
   UserProfilePage; PortalHeader/PortalFooter carry their own backgrounds. */
.ace-profile-page[b-r2w4jay8ls] {
    --ace-page-bg: #F4F3F1;   /* ACE page surface (tokens.md), matches AceLanding / AceProductPage */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ace-page-bg);
}

.ace-profile-main[b-r2w4jay8ls] {
    flex: 1;
}
/* /Pages/Landing/AceSupportTicket.razor.rz.scp.css */
/* Production ACE Support Ticket page chrome. AceLayout is a pass-through (@Body
   only), so this page owns its full chrome at the viewport edges — the wizard's
   per-step heading + Stepper row live inside the wizard, so this file owns only
   the surrounding shell. Avatar + username are rendered by PortalHeader's built-in
   UserInitials / UserDisplayName slots (WP-297). */
.ace-ticket-shell[b-eaihc7ffdp] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Figma page background — warm off-grey #F4F3F1. */
    background: #F4F3F1;
}

.ace-ticket-page[b-eaihc7ffdp] {
    flex: 1 0 auto;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    /* Figma outer container: padding-top 0 so the card sits flush under the green
       header band; 48px bottom gutter; 24px sides so the 1040 card doesn't touch
       the viewport edge below 1100px. */
    padding: 0 24px 48px;
    box-sizing: border-box;
    font-family: Roboto, 'Segoe UI', sans-serif;
}

/* Positioning wrapper around the wizard. The wizard owns its own form-card chrome
   (white surface, 2px corners) so each step's banner stretches flush to the card edge. */
.ace-ticket-card[b-eaihc7ffdp] {
    background: transparent;
    border: 0;
    padding: 0;
}

@media (max-width: 575px) {
    .ace-ticket-page[b-eaihc7ffdp] {
        padding: 0 16px 32px;
    }
}
/* /Pages/Landing/Index.razor.rz.scp.css */
/* WP-412 — Lincat landing hero.

   These rules are component-scoped (CSS isolation) rather than global, per
   .claude-docs/ant-blazor-responsive-design-standards.md ("CSS Isolation for Component-Specific
   Styles"): the `.lincat-hero*` classes exist only in this page's markup, and every other page in
   Pages/Landing/ keeps its styles in a colocated .razor.css. The one companion rule that must stay
   in wwwroot/css/site.css is the `air-layout` x-axis clip, because `air-layout` is the shell
   element outside this component and scoped CSS cannot reach it.

   The hero wraps the heading + serial-search card and grows to contain it. min-height is only a
   FLOOR (roomy design look on short content) — the band expands when the card is taller, so the
   card can never overflow the hero's bottom edge. The background is a full-bleed layer
   (.lincat-hero-bg) behind the content. */
.lincat-hero[b-1yxja8q26w] {
    position: relative;
    /* top inset for the heading; generous bottom keeps hero image visible below the card, per design */
    padding: 40px 0 48px;
    /* WP-412 review: the old CSS had a four-step height ladder (670 default / 620 at 526-1023 and
       >=1280 / 750 at <=404) because the band was a FIXED height tuned per breakpoint. As a floor
       those steps stopped meaning "the band is this tall" and started meaning "the band is at least
       this tall", which made the ladder's uncovered ranges (405-525 and 1024-1279) inherit the 670
       default and show ~50px more dead hero below the card than either neighbouring range.

       Measured: the hero's natural height (content + padding) is 591px at every width >= 405px, so
       one 620px floor gives a uniform 77px of hero below the card from 405px up — matching what
       tablet (526-1023) and wide desktop (>=1280) already did, and removing both gaps. Below 405px
       the content is taller (647-671px) and the design wants a taller band, so that step stays —
       written mobile-first (small-screen floor here, min-width query below) per
       .claude-docs/ant-blazor-responsive-design-standards.md. */
    min-height: 750px;
    box-sizing: border-box;
}

/* 405px up: one floor for tablet and every desktop width. */
@media (min-width: 405px) {
    .lincat-hero[b-1yxja8q26w] {
        min-height: 620px;
    }
}

/* Heading was inline-styled on the h1; moved here now that the page has scoped CSS. Values unchanged. */
.lincat-hero-title[b-1yxja8q26w] {
    font-size: 48px;
    line-height: 56px;
    max-width: 494px;
    color: #FFF;
}

.lincat-hero-bg[b-1yxja8q26w] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* Full-bleed regardless of the layout main-slot padding: span the full viewport width.

       ASSUMPTION (WP-412): `left: 50%` + `margin-left: -50vw` only cancel out to viewport-left
       while this element's containing block (.lincat-hero, i.e. the layout's main slot) is
       horizontally CENTRED in the viewport. Confirmed against the design-system bundle: air-layout
       renders the main slot inside `<main class="container mx-auto">`, i.e. a max-width box centred
       with auto side margins, and its header is a full-width top bar. If the shell ever gains a left
       sidebar or otherwise off-centre main area, this bleed will silently shift off-centre rather
       than fail loudly; the fix then is a bleed anchored to the viewport instead
       (e.g. position: fixed-width layer, or an ancestor at full width). */
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    background-size: cover;
    background-position: 50% 25%;
    background-repeat: no-repeat;
    z-index: 0;
}

.lincat-hero-content[b-1yxja8q26w] {
    position: relative;
    z-index: 1;
}

/* /Pages/Register/AceNotValidated.razor.rz.scp.css */
/* WP-271 AC5 — Not Validated outcome page styles.
   Source: Figma frame 1241:16302 (Guest — Not Validated). The leaner
   front-of-flow composition (CallUsFallback + Request summary + Important
   info) — the support-ticket reference + What-happens-next come from WP-280
   when the back-end opens the fallback ticket. */

.ace-not-validated-page[b-3y0wa9xpt2] {
    --ace-page-bg: #F4F3F1;
    --ace-card-bg: #FFFFFF;
    --ace-card-stroke: #DEDEDE;
    --ace-text: #000000;
    --ace-font-ui: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

    background: var(--ace-page-bg);
    color: var(--ace-text);
    font-family: var(--ace-font-ui);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[b-3y0wa9xpt2] .ace-not-validated-page,
[b-3y0wa9xpt2] .ace-not-validated-page * {
    box-sizing: border-box;
}

.ace-not-validated-main[b-3y0wa9xpt2] {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 120px 48px;
}

.ace-not-validated-header[b-3y0wa9xpt2] {
    padding: 16px 24px;
}

.ace-not-validated-header-title[b-3y0wa9xpt2] {
    margin: 0;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: rgba(0, 0, 0, 0.85);
}

.ace-not-validated-card[b-3y0wa9xpt2] {
    background: var(--ace-card-bg);
    border-radius: 2px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ace-not-validated-summary[b-3y0wa9xpt2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 24px;
    background: #FAFAFA;
    border: 1px solid #F0F0F0;
}

.ace-not-validated-summary-title[b-3y0wa9xpt2] {
    margin: 0;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    color: rgba(0, 0, 0, 0.85);
}

/* Asset title + serial row at the top of the Request summary. Figma Frame
   987636 places a 72×72 product image to the LEFT of the name + serial
   stack with a stroke and white fill (the "Aspect ratio keeper" frame). */
.ace-not-validated-summary-asset[b-3y0wa9xpt2] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 4px;
}

.ace-not-validated-summary-asset-image[b-3y0wa9xpt2] {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ace-not-validated-summary-asset-image img[b-3y0wa9xpt2] {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.ace-not-validated-summary-asset-text[b-3y0wa9xpt2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ace-not-validated-summary-asset-name[b-3y0wa9xpt2] {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    color: rgba(0, 0, 0, 0.85);
}

.ace-not-validated-summary-asset-serial[b-3y0wa9xpt2] {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgba(0, 0, 0, 0.85);
}

/* Stacked grids for the three info rows. Figma shows row 1 as a 3-column
   row (Date submitted | Status pill | Est Completion), row 2 as a 2-col
   row (Status | Issue Description), row 3 as a single-col Email row.
   All cells use the same dt/dd label-above-value typography. */
.ace-not-validated-summary-grid[b-3y0wa9xpt2] {
    margin: 0;
    display: grid;
    column-gap: 24px;
    row-gap: 4px;
}

.ace-not-validated-summary-grid--three[b-3y0wa9xpt2] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ace-not-validated-summary-grid--two[b-3y0wa9xpt2]   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ace-not-validated-summary-grid--one[b-3y0wa9xpt2]   { grid-template-columns: 1fr; }

.ace-not-validated-summary-cell[b-3y0wa9xpt2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ace-not-validated-summary-cell dt[b-3y0wa9xpt2] {
    margin: 0;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.875rem;
    line-height: 1.375rem;
}

.ace-not-validated-summary-cell dd[b-3y0wa9xpt2] {
    margin: 0;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    font-size: 0.875rem;
    line-height: 1.375rem;
    overflow-wrap: anywhere;
}

/* Figma "Incomplete" red dot before the status value — small filled
   circle in Ant's error red (#FF4D4F). Inline next to the dd text. */
.ace-not-validated-summary-dot[b-3y0wa9xpt2] {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 50%;
    background-color: #FF4D4F;
}

/* Figma "Job Submitted" status pill — orange #FA8C16 text. Bordered
   pill rendered locally because StatusPill (Ant Tag) doesn't have an
   orange tone configured. */
.ace-not-validated-summary-pill[b-3y0wa9xpt2] {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #FA8C16;
    background: #FFF7E6;
    border: 1px solid #FFD591;
    border-radius: 2px;
}

/* Important information bullet list — Figma renders each guideline as a
   separate line under the heading. Ant Alert only exposes MessageTemplate
   (not Description as a template), so both heading and list render inside
   the message slot. */
[b-3y0wa9xpt2] .ace-not-validated-card .ant-alert .ace-not-validated-info-heading {
    display: block;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 4px;
}

[b-3y0wa9xpt2] .ace-not-validated-card .ant-alert .ace-not-validated-info-list {
    margin: 4px 0 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-3y0wa9xpt2] .ace-not-validated-card .ant-alert .ace-not-validated-info-list li {
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgba(0, 0, 0, 0.85);
}

.ace-not-validated-actions[b-3y0wa9xpt2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--ace-card-stroke);
}

@media (max-width: 1279px) {
    .ace-not-validated-main[b-3y0wa9xpt2] { padding: 0 32px 48px; }
}

@media (max-width: 767px) {
    .ace-not-validated-main[b-3y0wa9xpt2] { padding: 0 16px 32px; }
    .ace-not-validated-header[b-3y0wa9xpt2] { padding: 16px 0; }
    .ace-not-validated-card[b-3y0wa9xpt2] { padding: 16px; gap: 16px; }
    .ace-not-validated-summary[b-3y0wa9xpt2] { padding: 12px 16px; }
    .ace-not-validated-summary-grid--three[b-3y0wa9xpt2],
    .ace-not-validated-summary-grid--two[b-3y0wa9xpt2] {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .ace-not-validated-summary-cell dt[b-3y0wa9xpt2] { font-size: 0.8125rem; }
    .ace-not-validated-actions[b-3y0wa9xpt2] {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
    [b-3y0wa9xpt2] .ace-not-validated-close {
        width: 100%;
        display: block;
    }
    .ace-not-validated-actions[b-3y0wa9xpt2]  .primary-button-host {
        display: block;
        width: 100%;
    }
    .ace-not-validated-actions[b-3y0wa9xpt2]  .primary-button-host > .ant-btn {
        width: 100%;
    }
}
/* /Pages/Register/AceRegister.razor.rz.scp.css */
/* WP-271 — Register-asset page styles.
   Tokens trace to Documents/WP-271/figma-frames/owner-registration-form.md
   (Figma node 1241:15920, Ready For Dev). Owner / Partner / Guest variants
   share this layout — only Section 2 copy differs. */

.ace-register-page[b-i15vfzbn2v] {
    --ace-page-bg: #F4F3F1;
    --ace-card-bg: #FFFFFF;
    --ace-section-head-bg: #F5F5F5;
    --ace-card-stroke: #DEDEDE;
    --ace-text: #000000;
    --ace-font-ui: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

    background: var(--ace-page-bg);
    color: var(--ace-text);
    font-family: var(--ace-font-ui);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

[b-i15vfzbn2v] .ace-register-page,
[b-i15vfzbn2v] .ace-register-page * {
    box-sizing: border-box;
}

.ace-register-main[b-i15vfzbn2v] {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    /* 120px gutters = (1280 - 1040) / 2 to match Figma 1040 card width. */
    padding: 0 120px 48px;
}

/* Loading state -------------------------------------------------------- */
.ace-register-loading[b-i15vfzbn2v] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 320px;
    padding: 48px 0;
}

/* Page header — Figma 1247:37553 (.Page-Header(Legacy)) ---------------- */
.ace-register-header[b-i15vfzbn2v] {
    padding: 16px 24px;
}

.ace-register-header-title[b-i15vfzbn2v] {
    margin: 0;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: rgba(0, 0, 0, 0.85);
}

/* Card — Figma .card(legacy) 1247:33405 -------------------------------- */
.ace-register-card[b-i15vfzbn2v] {
    background: var(--ace-card-bg);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ace-register-body[b-i15vfzbn2v] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Sections — Figma Frame 987654 / 987655 / 987656 ---------------------- */
.ace-register-section[b-i15vfzbn2v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ace-register-section-head[b-i15vfzbn2v] {
    height: 56px;
    background: var(--ace-section-head-bg);
    padding: 0 24px;
    display: flex;
    align-items: center;
}

.ace-register-section-title[b-i15vfzbn2v] {
    margin: 0;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    color: rgba(0, 0, 0, 0.85);
}

/* Invalid-file error — only renders when HandleBeforeUpload rejected the
   pick (wrong extension or > 5 MB). The successful filename is shown by
   AntDesign <Upload>'s own Upload-List/File child (Figma 1259:19069). */
.ace-register-upload-error[b-i15vfzbn2v] {
    margin-top: 4px;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: #FF4D4F;
}

/* Make Ant DatePicker fill the FormItem column instead of inline width:100%. */
[b-i15vfzbn2v] .ant-picker {
    width: 100%;
}

/* Upload-button icon — Figma "Upload" Vector fills at #000000@0.25 (light
   grey), distinct from the "Upload" text which is #000000@0.85. Ant's default
   anticon color inherits from the parent button's text (near-black), so we
   recolour just the upload glyph here. */
[b-i15vfzbn2v] .ant-upload-select .ant-btn .anticon,
[b-i15vfzbn2v] .ant-upload-select .ant-btn .anticon svg {
    color: rgba(0, 0, 0, 0.25);
}

/* Helper text under each input — matches Figma "message" frame
   (Roboto 400 14/22, rgba(0,0,0,0.45)). Rendered as a sibling of the input
   inside the FormItem since AntDesign.FormItem does not expose a helper-text
   parameter in this version. */
.ace-register-helper[b-i15vfzbn2v] {
    margin-top: 4px;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgba(0, 0, 0, 0.45);
}

/* Card footer — Figma Frame 986941 (1040 × 88) ------------------------- */
.ace-register-card-footer[b-i15vfzbn2v] {
    background: var(--ace-card-bg);
    border-top: 1px solid var(--ace-card-stroke);
    padding: 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ace-register-error[b-i15vfzbn2v] {
    flex: 1 1 100%;
    color: #FF4D4F;
    font-size: 0.875rem;
    line-height: 1.375rem;
    text-align: left;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1279px) {
    .ace-register-main[b-i15vfzbn2v] { padding: 0 32px 48px; }
}

@media (max-width: 767px) {
    .ace-register-main[b-i15vfzbn2v] { padding: 0 16px 32px; }
    .ace-register-header[b-i15vfzbn2v] { padding: 16px 0; }
    .ace-register-body[b-i15vfzbn2v] { padding: 16px; gap: 24px; }
    .ace-register-section-head[b-i15vfzbn2v] { padding: 0 16px; height: 48px; }
    .ace-register-section-title[b-i15vfzbn2v] { font-size: 0.9375rem; }
    .ace-register-card-footer[b-i15vfzbn2v] {
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
    /* Stack action buttons full-width on mobile for ≥ 44 × 44 touch targets.
       AntDesign.Button rendered as a direct flex child doesn't always pick up
       CSS-isolation ::deep rules, so the Cancel button carries an explicit
       .ace-register-cancel class (Class= attribute) we can target globally.
       PrimaryButton renders <span class="primary-button-host"> wrapping an
       Ant button — flip the host to block so its child can fill 100% width. */
    [b-i15vfzbn2v] .ace-register-cancel {
        width: 100%;
        display: block;
    }
    .ace-register-card-footer[b-i15vfzbn2v]  .primary-button-host {
        display: block;
        width: 100%;
    }
    .ace-register-card-footer[b-i15vfzbn2v]  .primary-button-host > .ant-btn {
        width: 100%;
    }
}
/* /Pages/Signin/AceSignin.razor.rz.scp.css */
/* WP-321 — Styled ACE sign-in page. Two OIDC hand-off buttons (consumer EEID + Microsoft/HRD);
   no local credential fields. Tokens mirror the ACE design system (Roboto, Ant primary blue). */
.ace-signin-shell[b-iftwsr5a8y] {
    --ace-blue: #1890FF;
    --ace-blue-hover: #40A9FF;
    --ace-border: #D9D9D9;
    --ace-text: #1F1F1F;
    --ace-muted: rgba(0, 0, 0, 0.45);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #F4F3F1;
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ace-signin-main[b-iftwsr5a8y] {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 16px;
}

.ace-signin-card[b-iftwsr5a8y] {
    width: 100%;
    max-width: 408px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
    padding: 32px;
}

/* Tabs — each navigates to a different route, so they're links, not Ant Tabs. */
.ace-signin-tabs[b-iftwsr5a8y] {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #F0F0F0;
    margin-bottom: 24px;
}

.ace-signin-tab[b-iftwsr5a8y] {
    padding: 0 0 10px;
    font-size: 14px;
    line-height: 22px;
    color: var(--ace-text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ace-signin-tab:hover[b-iftwsr5a8y] {
    color: var(--ace-blue);
}

.ace-signin-tab--active[b-iftwsr5a8y] {
    color: var(--ace-blue);
    border-bottom-color: var(--ace-blue);
    font-weight: 500;
}

/* Primary "Sign in" — an anchor styled as a full-width button. */
.ace-signin-submit[b-iftwsr5a8y] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 2px;
    background: var(--ace-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.ace-signin-submit:hover[b-iftwsr5a8y],
.ace-signin-submit:focus-visible[b-iftwsr5a8y] {
    background: var(--ace-blue-hover);
    color: #fff;
    outline: none;
}

/* OR divider. */
.ace-signin-or[b-iftwsr5a8y] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
    color: var(--ace-muted);
    font-size: 13px;
}

.ace-signin-or[b-iftwsr5a8y]::before,
.ace-signin-or[b-iftwsr5a8y]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #F0F0F0;
}

/* Microsoft / federated button — full-width outlined, icon + label centred. */
.ace-signin-social-btn[b-iftwsr5a8y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
    border: 1px solid var(--ace-border);
    border-radius: 2px;
    background: #fff;
    color: var(--ace-text);
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.ace-signin-social-btn:hover[b-iftwsr5a8y],
.ace-signin-social-btn:focus-visible[b-iftwsr5a8y] {
    border-color: var(--ace-blue);
    color: var(--ace-blue);
    outline: none;
}

.ace-signin-social-icon[b-iftwsr5a8y] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.ace-signin-link[b-iftwsr5a8y] {
    color: var(--ace-blue);
    text-decoration: none;
}

.ace-signin-link:hover[b-iftwsr5a8y] {
    color: var(--ace-blue-hover);
    text-decoration: underline;
}

.ace-signin-cookies[b-iftwsr5a8y] {
    display: block;
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
}

@media (max-width: 480px) {
    .ace-signin-main[b-iftwsr5a8y] {
        padding: 24px 12px;
    }

    .ace-signin-card[b-iftwsr5a8y] {
        padding: 24px 20px;
    }
}
/* /Pages/WelcomeBack/AceWelcomeBack.razor.rz.scp.css */
/* WP-271 — Welcome back page styles.
   Tokens trace verbatim to Documents/WP-271/figma-frames/{owner,partner,
   guest}-welcome-back.md (Figma 1241:16001 / 1241:16132 / 1241:16258,
   Ready For Dev). Pulled with visible+opacity filter per the new standards. */

.ace-welcome-back-page[b-zm3bbtiizb] {
    background: #F4F3F1;
    color: #000;
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

[b-zm3bbtiizb] .ace-welcome-back-page,
[b-zm3bbtiizb] .ace-welcome-back-page * {
    box-sizing: border-box;
}

.ace-welcome-back-main[b-zm3bbtiizb] {
    flex: 1;
    width: 100%;
    padding: 32px 120px 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Page header — full-bleed white bar reaching the viewport edges. Inside,
   the heading + buttons + tabs are inset by the same gutter as everything
   else (120px at xl, 32px at md/lg, 16px at xs). The negative margin pulls
   the bar out of the main's gutter; the matching positive padding restores
   the inner content position. Figma source: .Page-Header(Legacy) 1040×104,
   padding 16/24, white card on a F4F3F1 page surface. */
.ace-welcome-back-header[b-zm3bbtiizb] {
    background: #FFFFFF;
    padding: 16px 120px 0;
    margin: 0 -120px;
}

.ace-welcome-back-header-row[b-zm3bbtiizb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
}

/* "Welcome back, Gavin" — Roboto 500 20/28 #000@0.85. */
.ace-welcome-back-header-title[b-zm3bbtiizb] {
    margin: 0;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: rgba(0, 0, 0, 0.85);
}

.ace-welcome-back-header-actions[b-zm3bbtiizb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Header secondary buttons — Figma "Button" 32 tall white #D9D9D9 stroke. */
[b-zm3bbtiizb] .ace-welcome-back-secondary.ant-btn {
    height: 32px;
    padding: 0 15px;
    background: #FFFFFF;
    border-color: #D9D9D9;
    color: rgba(0, 0, 0, 0.85);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Asset-card "Request support" — Figma "Button" 174×39 fill #FFFFFF
   stroke #D9D9D9 r2, padding 6.4/15, text Roboto 400 16 #000@0.85. */
[b-zm3bbtiizb] .ace-welcome-back-card-cta.ant-btn {
    height: 40px;
    padding: 0 15px;
    background: #FFFFFF;
    border-color: #D9D9D9;
    color: rgba(0, 0, 0, 0.85);
    font-size: 1rem;
    line-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
}

/* Tabs — Figma .Tabs-Top(Legacy) 992×40 — pad=8/0/0/0, gap 32.
   Active tab uses #1890FF text + 2px underline. */
.ace-welcome-back-tabs[b-zm3bbtiizb] {
    display: flex;
    gap: 32px;
    margin-top: 8px;
    border-bottom: 1px solid #F0F0F0;
}

.ace-welcome-back-tab[b-zm3bbtiizb] {
    /* Tabs are <button> elements (state-driven, not links) — reset the browser's
       default button chrome so they read as plain tabs. Tokens traced to Figma
       .Components/Tab(Legacy): fs=16, fw=400, inactive #000000@0.85. */
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px 0;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5rem;
    color: rgba(0, 0, 0, 0.85);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ace-welcome-back-tab--active[b-zm3bbtiizb] {
    color: var(--ace-brand-green, #1A854C);       /* WP-353: ACE active tab is brand green (was Ant blue #1890FF) */
    border-bottom-color: var(--ace-brand-green, #1A854C);
}

.ace-welcome-back-tab:hover[b-zm3bbtiizb] { color: var(--ace-brand-green, #1A854C); }
.ace-welcome-back-tab:focus-visible[b-zm3bbtiizb] {
    outline: 2px solid var(--ace-brand-green, #1A854C);
    outline-offset: -2px;
}

/* Jobs tabpanel stub — same pattern as AceProductPage. Plain inline message
   until the WP-304 jobs table is wired through; no card chrome / improvised
   tokens. */
.ace-welcome-back-jobs-panel-stub[b-zm3bbtiizb] {
    padding: 24px 0;
    color: rgba(0, 0, 0, 0.85);
}
.ace-welcome-back-jobs-panel-stub p[b-zm3bbtiizb] {
    margin: 0;
}

/* Asset card — Figma .Page-Header(Legacy) 1040×355 with pad=32/32/32/32,
   H layout gap 32 between image and content frame. */
.ace-welcome-back-card[b-zm3bbtiizb] {
    background: #FFFFFF;
    border-radius: 2px;
    padding: 32px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.ace-welcome-back-card-image[b-zm3bbtiizb] {
    flex: 0 0 240px;
    width: 240px;
    height: 240px;
    border: 1px solid #D9D9D9;
    background: #FFFFFF;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ace-welcome-back-card-image img[b-zm3bbtiizb] {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.ace-welcome-back-card-content[b-zm3bbtiizb] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Asset title — Figma Text/Text 24/32 Roboto 400 #000@0.85. */
.ace-welcome-back-card-title[b-zm3bbtiizb] {
    margin: 0;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 2rem;
    color: rgba(0, 0, 0, 0.85);
}

/* Location line — Roboto 400 14/22 #000@0.45 with leading info icon. */
.ace-welcome-back-card-location[b-zm3bbtiizb] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgba(0, 0, 0, 0.45);
}

.ace-welcome-back-card-location-icon[b-zm3bbtiizb] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* Figma "Alert" 395×40 — sized to content, not full-width like Ant's
   default. Constrain the Ant Alert inside this slot to inline width so
   it hugs the icon + "Warranty Active" text rather than stretching the
   full asset-card content column. */
.ace-welcome-back-card-status[b-zm3bbtiizb] {
    display: inline-block;
    align-self: flex-start;
}

[b-zm3bbtiizb] .ace-welcome-back-card-status .ant-alert {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 9px 16px;
}

/* Warranty details — Figma 2-row grid, gap 8 between rows, 24 between cols.
   Row 1 fills #000 + #000@0.45; Row 2 same. */
.ace-welcome-back-card-details[b-zm3bbtiizb] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 8px;
}

.ace-welcome-back-card-detail[b-zm3bbtiizb] {
    display: flex;
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1.375rem;
}

/* Figma colours each Row's TEXT as a single fill, not label-vs-value split:
     Row 1: "Warranty Type: Full warranty"    fill #000000        (left col)
     Row 1: "Valid until: 22/05/2027"         fill #000@0.45      (right col)
     Row 2: "Category: Water Boiler"          fill #000000        (left col)
     Row 2: "Expires in: 301 days"            fill #000@0.45      (right col)
   So colour is column-based; every cell uses Roboto 400 (no weight split). */
.ace-welcome-back-card-detail dt[b-zm3bbtiizb],
.ace-welcome-back-card-detail dd[b-zm3bbtiizb] {
    margin: 0;
    font-weight: 400;
    color: #000000;
}

.ace-welcome-back-card-details > div:nth-child(even) dt[b-zm3bbtiizb],
.ace-welcome-back-card-details > div:nth-child(even) dd[b-zm3bbtiizb] {
    color: rgba(0, 0, 0, 0.45);
}

/* Notification toast — Figma 1241:16132 "Notification" 356×178 anchored
   TOP-RIGHT of the viewport. fill #FFFFFF r4, drop-shadow, padding 16/24.
   z-index 9999 sits above any sibling Ant overlay. Includes a close X
   button in the top-right corner of the card per the Figma "close" child. */
.ace-welcome-back-toast[b-zm3bbtiizb] {
    position: fixed !important;
    right: 24px;
    top: 24px;
    width: 356px;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 16px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 9999;
}

/* Icon — CheckCircle FILL #A0D911 per Figma (lime / yellow-green, NOT
   the dark green used on StatusPill).  Sized 24×24 via the Ant icon
   font's font-size. */
.ace-welcome-back-toast-icon[b-zm3bbtiizb] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #A0D911;
    font-size: 24px;
    line-height: 1;
}

[b-zm3bbtiizb] .ace-welcome-back-toast-icon .anticon,
[b-zm3bbtiizb] .ace-welcome-back-toast-icon .anticon svg {
    color: #A0D911;
    font-size: 24px;
}

/* Close X — Figma "close" child 14×14 fill #000. Sits absolute in the
   top-right corner of the card. WP-271 design-review (Tim Jackson, 2026-06-05,
   item 9): icon was rendering at 12px on a 0.45-opacity grey, too small and
   too muted vs Figma — bumped to 14px at near-solid black to match. */
.ace-welcome-back-toast-close[b-zm3bbtiizb] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.ace-welcome-back-toast-close:hover[b-zm3bbtiizb],
.ace-welcome-back-toast-close:focus-visible[b-zm3bbtiizb] {
    color: #000000;
}

[b-zm3bbtiizb] .ace-welcome-back-toast-close .anticon {
    font-size: 14px;
}

.ace-welcome-back-toast-body[b-zm3bbtiizb] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ace-welcome-back-toast-title[b-zm3bbtiizb] {
    margin: 0;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    color: rgba(0, 0, 0, 0.85);
}

.ace-welcome-back-toast-desc[b-zm3bbtiizb] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: rgba(0, 0, 0, 0.85);
}

/* WP-271 design-review (Tim Jackson, 2026-06-05, item 9): asset name on the
   third line of the toast description renders bold so it stands out when
   the user scans the notification. */
.ace-welcome-back-toast-asset[b-zm3bbtiizb] {
    font-weight: 700;
}

.ace-welcome-back-toast-actions[b-zm3bbtiizb] {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1279px) {
    .ace-welcome-back-main[b-zm3bbtiizb] { padding: 24px 32px 48px; }
    .ace-welcome-back-header[b-zm3bbtiizb] { padding: 16px 32px 0; margin: 0 -32px; }
}

/* lg / md (≤991) — tighten the asset card gap and shrink the image but
   keep the H layout (image left, content right) per Figma — the design
   only collapses to a stacked column at the very bottom (xs / small-sm). */
@media (max-width: 991px) {
    .ace-welcome-back-card[b-zm3bbtiizb] { gap: 24px; }
    .ace-welcome-back-card-image[b-zm3bbtiizb] { flex-basis: 200px; width: 200px; height: 200px; }
}

/* md / sm (≤767) — header / page padding tightening, but the asset card
   stays H-laid-out and the toast keeps its corner positioning. */
@media (max-width: 767px) {
    .ace-welcome-back-main[b-zm3bbtiizb] { padding: 16px 16px 32px; gap: 16px; }
    .ace-welcome-back-header[b-zm3bbtiizb] { padding: 16px 16px 0; margin: 0 -16px; }
    .ace-welcome-back-header-row[b-zm3bbtiizb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .ace-welcome-back-header-actions[b-zm3bbtiizb] { flex-wrap: wrap; }
}

/* xs (≤574) — card finally collapses to image-on-top, content-below, and
   the details grid drops to a single column. Toast spans the full width
   anchored to the bottom edge for thumb-reach. Breakpoint matches Figma:
   the design keeps the H layout until ~574 then flips to V. */
@media (max-width: 574px) {
    .ace-welcome-back-card[b-zm3bbtiizb] {
        flex-direction: column;
        padding: 16px;
    }
    .ace-welcome-back-card-image[b-zm3bbtiizb] { flex-basis: auto; width: 100%; height: 200px; }
    .ace-welcome-back-card-details[b-zm3bbtiizb] { grid-template-columns: 1fr; }
    .ace-welcome-back-toast[b-zm3bbtiizb] {
        right: 16px;
        left: 16px;
        top: 16px;
        width: auto;
    }
}