/* /Layout/MainLayout.razor.rz.scp.css */
/* MudBlazor handles the core layout. Karting-specific overrides only. */

/* SHELL-002 / SHELL-010 — AppBar breadcrumb slot styling.
   KBreadcrumb's default link/sep/current colors target on-page reading
   surfaces (muted grey on light background). In the AppBar slot they need to
   sit on the primary-coloured bar, so override the nested classes here. */
[b-5wbnh01pba] .karting-breadcrumb-slot .k-breadcrumb {
    padding: 0;
}

[b-5wbnh01pba] .karting-breadcrumb-slot .k-breadcrumb__link {
    color: var(--mud-palette-appbar-text);
    opacity: 0.75;
}

[b-5wbnh01pba] .karting-breadcrumb-slot .k-breadcrumb__link:hover {
    color: var(--mud-palette-appbar-text);
    opacity: 1;
}

[b-5wbnh01pba] .karting-breadcrumb-slot .k-breadcrumb__sep {
    color: var(--mud-palette-appbar-text);
    opacity: 0.5;
}

[b-5wbnh01pba] .karting-breadcrumb-slot .k-breadcrumb__current {
    color: var(--mud-palette-appbar-text);
    font-weight: var(--font-medium, 500);
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* MudBlazor MudNavMenu handles all nav styling.
   Karting-specific overrides only. */

/* MudNavLink's default centers its text slot vertically; keep the tight
   line-height so the active-rail indicator aligns with the label baseline. */
[b-a31p2p2ri7] .mud-nav-link .mud-nav-link-text {
    line-height: 1.25;
}
/* /Pages/Calculations/CalculationsPage.razor.rz.scp.css */
/* Calculations page styles live in /wwwroot/css/app.css under the
   "Calculations left rail" section.

   Reason: Blazor scoped CSS uses an attribute selector that's only emitted
   on HTML elements written directly in this .razor file. CalculationsPage
   has no top-level inline HTML — only component invocations (PageHeader,
   KSplitPane, etc) — so ::deep selectors here can't reach the rail's nested
   markup reliably across viewport breakpoints. The shared rules live in
   app.css instead so they apply uniformly. */
/* /Pages/KnowledgeBase/Components/KbContentArea.razor.rz.scp.css */
/* KbContentArea — extracted from inline <style> (E017).
   Scoped to the component via Blazor CSS isolation. MarkupString-rendered
   HTML inside .kb-content-html needs ::deep to bypass the scope attribute,
   since the body markup carries no scope. */

.kb-fade-in[b-m02mgpjk9n] {
    animation: kb-fade-in-b-m02mgpjk9n 220ms ease-out;
}

@keyframes kb-fade-in-b-m02mgpjk9n {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --kb-category-top and --kb-banner-height are set by KnowledgeBase.razor
   and resolve through to --karting-appbar-offset (published by app.css)
   so the sticky banner and panel headers track the live position of the
   app bar. On mobile, when the app bar slides off-screen, the offset
   collapses to 0 and the sticky strip slides up smoothly via the top
   transition — keeping pace with the bar's translateY animation. */
.kb-category-sticky-header[b-m02mgpjk9n] {
    position: sticky;
    top: var(--kb-category-top, 56px);
    z-index: 3;
    background: var(--mud-palette-background);
    padding: 0 16px;
    height: var(--kb-banner-height, 48px);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: top 220ms ease-in-out;
}

@media (min-width: 960px) {
    .kb-category-sticky-header[b-m02mgpjk9n] { padding: 0 20px; }
}

.kb-category-sticky-title[b-m02mgpjk9n] {
    margin: 0;
    line-height: 1.25;
}

.kb-category-meta[b-m02mgpjk9n] {
    padding: 10px 16px 6px 16px;
}

@media (min-width: 960px) {
    .kb-category-meta[b-m02mgpjk9n] { padding: 12px 20px 8px 20px; }
}

/* Section (expansion panel) headers stay pinned flush directly under
   the category title. The offset is computed from the CSS vars so
   there's zero visible gap between the two sticky strips, and the
   same transition keeps the subsection header in lockstep with the
   category strip during the mobile slide animation.
   ::deep — MudExpansionPanel renders its own markup that doesn't pick
   up the component's scope attribute. */
.kb-sticky-panels[b-m02mgpjk9n]  .mud-expand-panel {
    overflow: visible !important;
}

.kb-sticky-panels[b-m02mgpjk9n]  .mud-expand-panel-header {
    position: sticky;
    top: calc(var(--kb-category-top, 56px) + var(--kb-banner-height, 48px));
    z-index: 2;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-height: 44px;
    transition: top 220ms ease-in-out;
}

.kb-panel-title[b-m02mgpjk9n] {
    margin: 0;
    line-height: 1.3;
}

.kb-panel-summary[b-m02mgpjk9n] {
    display: block;
}

.kb-panel[b-m02mgpjk9n]  .mud-expand-panel-content { padding: 8px !important; }

@media (min-width: 960px) {
    .kb-panel[b-m02mgpjk9n]  .mud-expand-panel-content { padding: 16px !important; }
}

.kb-content-html[b-m02mgpjk9n] {
    font-size: 0.95rem;
    line-height: 1.65;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* MarkupString-rendered body markup needs ::deep — the HTML injected by
   @((MarkupString)item.ContentHtml) carries no per-component scope attr. */
.kb-content-html[b-m02mgpjk9n]  p { margin: 0 0 0.9rem 0; }
.kb-content-html[b-m02mgpjk9n]  ul,
.kb-content-html[b-m02mgpjk9n]  ol { margin: 0 0 0.9rem 1.25rem; padding: 0; }
.kb-content-html[b-m02mgpjk9n]  li { margin-bottom: 0.3rem; }
.kb-content-html[b-m02mgpjk9n]  h1,
.kb-content-html[b-m02mgpjk9n]  h2,
.kb-content-html[b-m02mgpjk9n]  h3,
.kb-content-html[b-m02mgpjk9n]  h4,
.kb-content-html[b-m02mgpjk9n]  h5,
.kb-content-html[b-m02mgpjk9n]  h6 {
    margin: 1.4rem 0 0.6rem 0;
    font-weight: 600;
    line-height: 1.3;
}
.kb-content-html[b-m02mgpjk9n]  h3 { font-size: 1.15rem; }
.kb-content-html[b-m02mgpjk9n]  h4 { font-size: 1.05rem; }
.kb-content-html[b-m02mgpjk9n]  blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    padding: var(--space-1) var(--space-3);
    margin: 0 0 0.9rem 0;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
    border-radius: 0 4px 4px 0;
}
.kb-content-html[b-m02mgpjk9n]  code {
    background-color: var(--mud-palette-background-grey);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.88em;
}
.kb-content-html[b-m02mgpjk9n]  pre {
    background-color: var(--mud-palette-background-grey);
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
}

/* Tables: desktop shows full-width column-aligned tables; mobile allows
   finger-panning with no visible scrollbar so users can see all columns
   without a chunky horizontal scroll bar cluttering the UI. */
.kb-content-html[b-m02mgpjk9n]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8rem 0 1.1rem 0;
    table-layout: auto;
}
.kb-content-html[b-m02mgpjk9n]  thead { background: var(--mud-palette-background-grey); }
.kb-content-html[b-m02mgpjk9n]  th,
.kb-content-html[b-m02mgpjk9n]  td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.kb-content-html[b-m02mgpjk9n]  th { font-weight: 600; }

@media (max-width: 600px) {
    .kb-content-html[b-m02mgpjk9n] { font-size: 0.9rem; line-height: 1.6; }
    .kb-content-html[b-m02mgpjk9n]  h3 { font-size: 1.05rem; }
    .kb-content-html[b-m02mgpjk9n]  h4 { font-size: 1rem; }
    /* Turn the table into a horizontally pan-scrollable block, but hide the
       scrollbar visually so it stays minimal. Touch users can swipe freely;
       mouse users on a narrow window can still scroll with shift+wheel. */
    .kb-content-html[b-m02mgpjk9n]  table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        white-space: nowrap;
        /* Soft right-edge fade hints that more content is available. */
        mask-image: linear-gradient(to right, black calc(100% - 18px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 18px), transparent 100%);
    }
    .kb-content-html[b-m02mgpjk9n]  table::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .kb-content-html[b-m02mgpjk9n]  th,
    .kb-content-html[b-m02mgpjk9n]  td {
        padding: 4px 8px;
        font-size: 0.82rem;
    }
}
/* /Pages/Motors/DynoUpload.razor.rz.scp.css */
.dyno-upload-shell[b-n3nxc0otvp] { max-width: 600px; margin: 0 auto; }
@media (min-width: 1280px) { .dyno-upload-shell[b-n3nxc0otvp] { max-width: 900px; } }
/* /Pages/RaceDaySetup/RaceDaySetupCheatSheet.razor.rz.scp.css */
/* Screen rendering: MudBlazor palette tokens so the cheat sheet stays
   readable in both light and dark mode and respects user theming.
   Print rendering: hard-coded high-contrast black/white preserved
   inside `@media print` — trackside print readability is intentional
   (docs/audits/desktop-ui-2026-05/audit.md §7 #3 / RDS-002). */

.no-print[b-606qjnv6jt] {
    padding: 12px;
    background: var(--mud-palette-background-grey);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cheat-sheet[b-606qjnv6jt] {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
    font-family: 'Inter', sans-serif;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.cheat-header[b-606qjnv6jt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid var(--mud-palette-text-primary);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.cheat-header h1[b-606qjnv6jt] {
    font-size: 14pt;
    font-weight: bold;
    margin: 0;
}

.cheat-section[b-606qjnv6jt] {
    margin-bottom: 16px;
}

.cheat-section h2[b-606qjnv6jt] {
    font-size: 12pt;
    font-weight: bold;
    margin: 0 0 6px 0;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.cheat-section .summary-grid[b-606qjnv6jt] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.cheat-section .summary-grid h3[b-606qjnv6jt] {
    font-size: 9pt;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 2px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cheat-section .summary-grid p[b-606qjnv6jt] {
    font-size: 10pt;
    line-height: 1.4;
    margin: 0;
}

.cheat-table[b-606qjnv6jt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
    margin-bottom: 8px;
}

.cheat-table th[b-606qjnv6jt],
.cheat-table td[b-606qjnv6jt] {
    border: 1px solid var(--mud-palette-divider);
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}

.cheat-table th[b-606qjnv6jt] {
    background: var(--mud-palette-background-grey);
    font-size: 9pt;
    font-weight: 600;
}

.cheat-table .current-val[b-606qjnv6jt] {
    font-size: 9pt;
    color: var(--mud-palette-text-secondary);
}

.cheat-table .no-changes[b-606qjnv6jt] {
    text-align: center;
    color: var(--mud-palette-text-disabled);
}

.cheat-group-header td[b-606qjnv6jt] {
    font-weight: bold;
    background: var(--mud-palette-action-default-hover);
    font-size: 10pt;
}

.cheat-symptoms[b-606qjnv6jt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cheat-symptom[b-606qjnv6jt] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 10pt;
    line-height: 1.35;
}

.cheat-symptom .sym[b-606qjnv6jt] {
    font-style: italic;
    font-weight: 600;
}

.cheat-symptom .resp[b-606qjnv6jt] {
    display: block;
    margin-top: 2px;
}

.cheat-symptom .doNot[b-606qjnv6jt] {
    color: var(--mud-palette-error);
}

.cheat-watch[b-606qjnv6jt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
}

.cheat-watch th[b-606qjnv6jt],
.cheat-watch td[b-606qjnv6jt] {
    border-bottom: 1px solid var(--mud-palette-divider);
    padding: 3px 6px;
    text-align: left;
    vertical-align: top;
}

.cheat-watch th[b-606qjnv6jt] {
    font-weight: 600;
}

.cheat-footer[b-606qjnv6jt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: 8px;
    margin-top: 12px;
    font-size: 9pt;
    color: var(--mud-palette-text-secondary);
}

.cheat-status-cached[b-606qjnv6jt] {
    color: var(--mud-palette-success);
    font-weight: 600;
}

.cheat-status-offline[b-606qjnv6jt] {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.cheat-loading[b-606qjnv6jt] {
    text-align: center;
    padding: 40px;
}

/* The cheat sheet is opened in a new window from RaceDaySetupDetail and
   is consulted on a phone AT THE TRACK as often as it's printed. The
   three-column summary grid, two-column symptoms grid, and three-h1
   header all overflow 414px viewports without these rules (MOB-C006,
   MOB-C007). pt-based typography is faithful to the print layout but
   renders too small on phones, so override to px below sm. */
@media (max-width: 720px) {
    .cheat-sheet[b-606qjnv6jt] {
        padding: 12px;
    }

    .cheat-header[b-606qjnv6jt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cheat-header h1[b-606qjnv6jt] {
        font-size: 1.05rem;
    }

    .cheat-section .summary-grid[b-606qjnv6jt] {
        grid-template-columns: 1fr;
    }

    .cheat-symptoms[b-606qjnv6jt] {
        grid-template-columns: 1fr;
    }

    .cheat-section h2[b-606qjnv6jt] {
        font-size: 14px;
    }

    .cheat-section .summary-grid h3[b-606qjnv6jt] {
        font-size: 12px;
    }

    .cheat-section .summary-grid p[b-606qjnv6jt] {
        font-size: 13px;
    }

    .cheat-table[b-606qjnv6jt] {
        font-size: 13px;
    }

    .cheat-table th[b-606qjnv6jt] {
        font-size: 12px;
    }

    .cheat-symptom[b-606qjnv6jt] {
        font-size: 13px;
    }

    .cheat-watch[b-606qjnv6jt] {
        font-size: 13px;
    }

    .cheat-watch th[b-606qjnv6jt] {
        font-size: 12px;
    }

    .cheat-footer[b-606qjnv6jt] {
        font-size: 12px;
    }
}

/* Print mode: outdoor-readable black-on-white. Hex values are intentional
   here — trackside print readability does not benefit from theme tokens. */
@media print {
    .no-print[b-606qjnv6jt] {
        display: none !important;
    }

    .cheat-sheet[b-606qjnv6jt] {
        color: #000;
        background: #fff;
    }

    .cheat-header[b-606qjnv6jt] {
        border-bottom-color: #000;
    }

    .cheat-section h2[b-606qjnv6jt] {
        border-bottom-color: #ccc;
    }

    .cheat-section .summary-grid h3[b-606qjnv6jt] {
        color: #555;
    }

    .cheat-table th[b-606qjnv6jt],
    .cheat-table td[b-606qjnv6jt] {
        border-color: #ccc;
    }

    .cheat-table th[b-606qjnv6jt] {
        background: #f5f5f5;
    }

    .cheat-table .current-val[b-606qjnv6jt] {
        color: #666;
    }

    .cheat-table .no-changes[b-606qjnv6jt] {
        color: #999;
    }

    .cheat-group-header td[b-606qjnv6jt] {
        background: #eee;
    }

    .cheat-symptom[b-606qjnv6jt] {
        border-color: #ccc;
    }

    .cheat-symptom .doNot[b-606qjnv6jt] {
        color: #b00;
    }

    .cheat-watch th[b-606qjnv6jt],
    .cheat-watch td[b-606qjnv6jt] {
        border-bottom-color: #eee;
    }

    .cheat-footer[b-606qjnv6jt] {
        border-top-color: #ccc;
        color: #999;
    }
}
/* /Pages/Tracks/TrackSearch.razor.rz.scp.css */
/* Track search filter row.
   Default (≥601px): search input flexes wide, controls sit beside it.
   Phone (≤600px): MudStack Wrap=Wrap kicks in; both rows go full width
   so the radius dropdown isn't crushed against Near Me. */

.track-search-input[b-ijnsnlhxxe] {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}

.track-search-spinner[b-ijnsnlhxxe] {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.track-search-controls[b-ijnsnlhxxe] {
    flex: 0 0 auto;
}

.track-search-radius[b-ijnsnlhxxe] {
    max-width: 130px;
}

@media (max-width: 600px) {
    .track-search-input[b-ijnsnlhxxe] {
        flex: 1 1 100%;
    }

    .track-search-controls[b-ijnsnlhxxe] {
        flex: 1 1 100%;
        width: 100%;
    }

    .track-search-controls[b-ijnsnlhxxe]  .mud-button-root {
        flex: 1 1 0;
    }

    .track-search-radius[b-ijnsnlhxxe] {
        flex: 1 1 0;
        max-width: none;
    }
}
/* /Shared/AnalysisRecommendationCard.razor.rz.scp.css */
/* Scoped styles for AnalysisRecommendationCard. Replaces a handful of inline
   Style="..." attributes that mixed font weight, line height, flex, and
   custom backgrounds in the markup. */

.analysis-recommendation-card__title[b-u638pgl4x4] {
    font-weight: 700;
    line-height: 1.3;
    flex: 1;
}

.analysis-recommendation-card__body[b-u638pgl4x4] {
    line-height: 1.55;
}

.analysis-recommendation-card__drill[b-u638pgl4x4] {
    background: var(--mud-palette-background-grey);
    border-left: 3px solid var(--mud-palette-primary);
}

.analysis-recommendation-card__drill-body[b-u638pgl4x4] {
    flex: 1;
}

.analysis-recommendation-card__drill-label[b-u638pgl4x4] {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* /Shared/AuthLayout.razor.rz.scp.css */
/* `.auth-card` is applied to a MudPaper child component, which doesn't
   inherit AuthLayout's scope attribute. Use `::deep` so the rewriter emits
   a descendant selector that matches the rendered MudPaper element.

   Single max-width across breakpoints keeps the card at typical signin-
   form proportions on any viewport — mobile already fits comfortably,
   desktop no longer fans the card out to 680 px. */
[b-oi37k6hj1o] .auth-card { max-width: 440px; }

/* Auth page background — replaces an inline `style="min-height: 100vh;
   min-height: 100dvh; background: var(--mud-palette-background);"` so the
   markup stays clean and the dvh fallback for mobile browser chrome lives
   alongside other CSS. */
.auth-layout-bg[b-oi37k6hj1o] {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--mud-palette-background);
}
/* /Shared/CornerInsightCard.razor.rz.scp.css */
.corner-insight-card[b-2r2cbbfi0k] {
    transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.corner-insight-card:hover[b-2r2cbbfi0k] {
    transform: translateY(-1px);
    box-shadow: var(--mud-elevation-3);
}

.corner-insight-card--highlighted[b-2r2cbbfi0k] {
    outline: 2px solid var(--karting-active-accent, var(--mud-palette-primary));
    outline-offset: 2px;
}

.corner-insight-card__prose-body[b-2r2cbbfi0k] {
    line-height: 1.5;
}

.corner-insight-card__recommendation[b-2r2cbbfi0k] {
    background: var(--mud-palette-background-grey);
    border-left: 3px solid var(--mud-palette-primary);
}

.corner-insight-card__recommendation-label[b-2r2cbbfi0k] {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* /Shared/DashboardSkeleton.razor.rz.scp.css */
.dashboard-skeleton__stats[b-ijkufqhzka] {
    margin-bottom: var(--space-6);
}

.dashboard-skeleton__stat-card[b-ijkufqhzka] {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dashboard-skeleton__content[b-ijkufqhzka] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
}

.dashboard-skeleton__sessions[b-ijkufqhzka],
.dashboard-skeleton__actions[b-ijkufqhzka] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dashboard-skeleton__section-header[b-ijkufqhzka] {
    margin-bottom: var(--space-1);
}

.dashboard-skeleton__session-card[b-ijkufqhzka],
.dashboard-skeleton__action-card[b-ijkufqhzka] {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow: hidden;
}

@media (max-width: 768px) {
    .dashboard-skeleton__content[b-ijkufqhzka] {
        grid-template-columns: 1fr;
    }
}
/* /Shared/DnaPerformanceTrend.razor.rz.scp.css */
.dna-trend[b-e00hd1jp9i] { width: 100%; }
/* /Shared/DnaRadarChart.razor.rz.scp.css */
.dna-radar[b-isyc67n0ra] { width: 100%; max-width: 400px; aspect-ratio: 1 / 1; margin: 0 auto; }
@media (min-width: 1280px) { .dna-radar[b-isyc67n0ra] { max-width: clamp(300px, 50vw, 700px); } }
@media (min-width: 1920px) { .dna-radar[b-isyc67n0ra] { max-width: clamp(400px, 50vw, 900px); } }
/* /Shared/DriverDnaSkeleton.razor.rz.scp.css */
.driver-dna-skeleton[b-hgewipzzhh] {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.driver-dna-skeleton__chart[b-hgewipzzhh] {
    width: 200px;
    height: 200px;
}

.driver-dna-skeleton__pentagon[b-hgewipzzhh] {
    width: 100%;
    height: 100%;
}

.driver-dna-skeleton__metrics[b-hgewipzzhh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

.driver-dna-skeleton__metric[b-hgewipzzhh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}
/* /Shared/DrivingAnalysisDetailPanel.razor.rz.scp.css */
/* Viewport-bound shell so the left pane (track map) stays statically
   framed even when the right pane's selected tab grows tall. The shell
   is the scroll boundary; the right pane scrolls inside it; the left
   pane never scrolls. */
.driving-analysis-shell[b-a6gxkby4ez] {
    height: calc(100vh - 96px);    /* app bar (~64) + page header padding (~32) */
    height: calc(100dvh - 96px);   /* iOS Safari URL-bar / soft-keyboard aware */
    min-height: 720px;             /* keep the map readable on short viewports */
    display: flex;
    flex-direction: column;
}

[b-a6gxkby4ez] .driving-analysis-shell .k-split-pane {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

[b-a6gxkby4ez] .driving-analysis-shell .k-split-pane__left {
    overflow: hidden;
    height: 100%;
}

.driving-analysis-left[b-a6gxkby4ez] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Phase 5: map is the page. No fixed min-height floor — let the flex layout
   drive the height, with a clamp() that keeps the map readable on tall and
   short viewports alike. Removed the explicit 600px ceiling so wide-viewport
   users can give 75 %+ of the pane to the map. */
.driving-analysis-map[b-a6gxkby4ez] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: clamp(420px, 60vh, 100%);
}
.driving-analysis-map > .track-map-canvas[b-a6gxkby4ez] {
    flex: 1 1 0;
}

/* Force the TrackMapCanvas's relatively-positioned wrapper to fill the
   .driving-analysis-map container regardless of how its inline
   `height: 100%; min-height: …` percentages happen to resolve. Without
   this, the wrapper can render at 0px tall — leaving the absolutely
   positioned Leaflet div (`inset: 0`) drawing into a 0×0 box.

   The wrapper is a <figure role="img"> (changed from role="application"
   in commit b4b4481 to fix AT forms-mode trap MOB-G016). Match both the
   element tag and the role so the selector survives future a11y tweaks. */
[b-a6gxkby4ez] .driving-analysis-map > figure[role="img"] {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Legend pinned to bottom-left chrome — frosted chip, dense padding so it
   doesn't crowd the map's overlay paths. */
.driving-analysis-legend-chrome[b-a6gxkby4ez] {
    max-width: clamp(220px, 32vw, 420px);
}
[b-a6gxkby4ez] .driving-analysis-legend-chrome .overlay-legend-wrapper {
    background: transparent;
    box-shadow: none;
}

@media (max-width: 1199px) {
    .driving-analysis-shell[b-a6gxkby4ez] { height: auto; min-height: 0; }
    [b-a6gxkby4ez] .driving-analysis-shell .k-split-pane__left { overflow: visible; height: auto; }
    .driving-analysis-left[b-a6gxkby4ez] { height: 50vh; }
    .driving-analysis-map[b-a6gxkby4ez] { min-height: 50vh; }
}

@container (min-width: 800px) {
    .driving-analysis-prose[b-a6gxkby4ez] { max-width: 700px; }
}

/* Per-corner consistency table — wide right-pane shows the dense table;
   narrow right-pane (or mobile) shows a card stack instead. Container
   queries on the shell let the same component swap presentations based
   on the right pane's allocated width rather than viewport width, so
   the desktop split-pane at 1024 px doesn't overflow the table. */
.per-corner-table-shell[b-a6gxkby4ez] {
    container-type: inline-size;
}
.per-corner-card-stack[b-a6gxkby4ez] {
    display: none;
}
@container (max-width: 1099px) {
    .per-corner-table-shell[b-a6gxkby4ez]  .mud-simple-table { display: none; }
    .per-corner-card-stack[b-a6gxkby4ez] { display: block; }
}

@media (max-width: 600px) {
    .driving-analysis-left[b-a6gxkby4ez] { height: clamp(280px, 45vh, 360px); }
    .driving-analysis-map[b-a6gxkby4ez] { min-height: clamp(280px, 45vh, 360px); }
}

/* Phase 5: corner-analysis tab uses a stacked grid (was an ad-hoc list with
   mb-2 spacing on each card). Keeps the cards tight so the right pane reads
   as a scannable list rather than a wall of MudCards. */
.corner-analysis-grid[b-a6gxkby4ez] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 8px;
    padding: 12px;
}

/* Phase 5: 1.5 s primary-color ring around a corner card whose pin was
   clicked. Triggered by setting `corner-card-highlighted` on the wrapper.
   The card itself keeps its own visual treatment; the wrapper provides the
   timed flash. */
.corner-card-highlighted[b-a6gxkby4ez] {
    animation: corner-card-flash-b-a6gxkby4ez 1500ms ease-out;
    border-radius: 8px;
}
@keyframes corner-card-flash-b-a6gxkby4ez {
    0%, 60% {
        box-shadow: 0 0 0 2px var(--mud-palette-primary),
                    0 0 0 6px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    }
    100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .corner-card-highlighted[b-a6gxkby4ez] {
        animation: none;
        outline: 2px solid var(--mud-palette-primary);
    }
}

/* Tab-change slide-fade animation for the Driving Analysis detail right pane.
   The .k-tab-content wrapper sits inside each MudTabPanel; a @key bound to
   the active tab index forces the wrapper to re-mount on tab change so the
   keyframes replay. Pure CSS — no JS, no swipe gesture. */
.k-tab-content[b-a6gxkby4ez] {
    animation: k-tab-fade-slide-b-a6gxkby4ez 220ms ease-out;
}

@keyframes k-tab-fade-slide-b-a6gxkby4ez {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* WCAG 2.1 SC 2.3.3 — honour the user's OS-level reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .k-tab-content[b-a6gxkby4ez] {
        animation: none;
    }
}
/* /Shared/KEmptyState.razor.rz.scp.css */
.k-empty-state[b-qwq4xaagcw] {
    padding: var(--space-6);
}

@media (min-width: 1920px) {
    .k-empty-state[b-qwq4xaagcw] {
        min-height: 600px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
}
/* /Shared/KLoadingSkeleton.razor.rz.scp.css */
.k-skeleton[b-m2jhsaz6kx] {
    border-radius: var(--radius-md);
}

.k-skeleton--text[b-m2jhsaz6kx] {
    border-radius: var(--radius-sm);
    height: var(--text-base);
}

.k-skeleton--circle[b-m2jhsaz6kx] {
    border-radius: var(--radius-full);
}

.k-skeleton--rectangle[b-m2jhsaz6kx] {
    border-radius: var(--radius-md);
}
/* /Shared/LapSelectionDrawer.razor.rz.scp.css */
.lap-drawer-body[b-yhpjuzuttd] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.lap-drawer-footer[b-yhpjuzuttd] {
    border-top: 1px solid var(--mud-palette-divider);
}

.quick-select[b-yhpjuzuttd],
.corner-quick-select[b-yhpjuzuttd] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.lap-checkbox-list[b-yhpjuzuttd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lap-row[b-yhpjuzuttd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.lap-row__swatch[b-yhpjuzuttd] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.lap-row__num[b-yhpjuzuttd] {
    font-weight: 500;
}

.lap-row__time[b-yhpjuzuttd] {
    margin-left: auto;
    opacity: 0.85;
    font-size: 0.85em;
}
/* /Shared/OverlayLegend.razor.rz.scp.css */
.overlay-legend-wrapper[b-48ba5rzezi] {
    border-radius: 6px;
}

.overlay-legend-title[b-48ba5rzezi] {
    min-width: 60px;
    font-weight: 600;
    white-space: nowrap;
}

.overlay-legend-endpoint[b-48ba5rzezi] {
    white-space: nowrap;
}

/* Shared gradient bar sizing */
.overlay-legend-gradient[b-48ba5rzezi] {
    height: 12px;
    border-radius: 4px;
}

/* Speed: green → yellow → red (matches IntensityToColor thresholds) */
.legend-gradient-speed[b-48ba5rzezi] {
    background: linear-gradient(to right, #22C55E 0%, #EAB308 50%, #EF4444 100%);
}

/* Time Loss: green → red */
.legend-gradient-timeloss[b-48ba5rzezi] {
    background: linear-gradient(to right, #22C55E 0%, #EF4444 100%);
}

/* RPM: blue → orange */
.legend-gradient-rpm[b-48ba5rzezi] {
    background: linear-gradient(to right, #3B82F6 0%, #F97316 100%);
}

/* Discrete swatches for the Braking overlay */
.overlay-legend-swatch[b-48ba5rzezi] {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
}

.braking-swatch[b-48ba5rzezi] {
    background-color: #EF4444;
}

.throttle-swatch[b-48ba5rzezi] {
    background-color: #22C55E;
}

/* Lines overlay legend — horizontally-scrollable list of lap chips. */
.overlay-legend-lines[b-48ba5rzezi] {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 0;
    flex-grow: 1;
}

.lap-chip[b-48ba5rzezi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.lap-chip__swatch[b-48ba5rzezi] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--swatch);
}
/* /Shared/PitMechanicSessionPanel.razor.rz.scp.css */
/* Pit Mechanic chat shell.

   On phone + tablet (< 1280 px) the shell is a flex column so the chat
   pane fills the viewport height the way it always has — the desktop
   aside is hidden by `d-none d-lg-flex` and the chat-area's `flex: 1`
   (defined in app.css) still resolves because .pit-mechanic-chat is
   itself a flex column.

   At >= 1280 px the shell becomes a 2-column grid with a sticky 320 px
   context sidebar that surfaces the run-summary panel without making
   the user expand it. */
.pit-mechanic-shell[b-5c7ml22i2q] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.pit-mechanic-chat[b-5c7ml22i2q] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

@media (min-width: 1280px) {
    .pit-mechanic-shell[b-5c7ml22i2q] {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: var(--space-4);
    }

    .pit-mechanic-chat[b-5c7ml22i2q] {
        min-height: 0;
    }

    .pit-mechanic-context[b-5c7ml22i2q] {
        position: sticky;
        top: var(--space-4);
        align-self: start;
    }
}
/* /Shared/PitMechanicSkeleton.razor.rz.scp.css */
.pit-mechanic-skeleton[b-a5lxpksjv3] {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    height: 500px;
}

.pit-mechanic-skeleton__messages[b-a5lxpksjv3] {
    flex: 1;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow: hidden;
}

.pit-mechanic-skeleton__bubble[b-a5lxpksjv3] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.pit-mechanic-skeleton__bubble--left[b-a5lxpksjv3] {
    justify-content: flex-start;
}

.pit-mechanic-skeleton__bubble--right[b-a5lxpksjv3] {
    justify-content: flex-end;
}

.pit-mechanic-skeleton__input[b-a5lxpksjv3] {
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-width) solid var(--border-color);
}
/* /Shared/RaceDayPlanSkeleton.razor.rz.scp.css */
.race-day-plan-skeleton[b-vuh8dozmyr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.race-day-plan-skeleton__section[b-vuh8dozmyr] {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.race-day-plan-skeleton__section-header[b-vuh8dozmyr] {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-color);
}

.race-day-plan-skeleton__section-body[b-vuh8dozmyr] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* /Shared/SessionCard.razor.rz.scp.css */
/* SessionCard hover + transition rules live in /wwwroot/css/app.css under
   the ".session-card" block.

   Reason: Blazor scoped CSS uses an attribute selector (.session-card[b-xxx])
   that's only emitted on HTML elements written directly in this .razor file.
   The .session-card class lands on MudCard's rendered root div, which is not
   tagged with the scope attribute. The rule has to be global (or routed via
   a wrapper element + ::deep) to take effect. We keep it adjacent to the
   existing .session-card--selected rule in app.css. */
/* /Shared/SessionDetailPanel.razor.rz.scp.css */
/* Container query — the stats grid reflows to 2-up whenever its host
   container measures less than 600 px wide, which fires inside the
   SessionList split-pane right pane on 1280-px viewports (right pane
   sits at ~640 px). Falls back to the MudGrid breakpoint behaviour on
   older browsers that don't support container queries.

   ::deep is required because .session-stats-card lands on MudItem's
   rendered div; the b-xxx scope attribute is only emitted on HTML
   elements written directly in this .razor file, so the descendant
   match through .session-stats-shell is the wire that delivers the
   rule to the MudItem children. */
.session-stats-shell[b-tw0xbn28kr] {
    container-type: inline-size;
}

@container (max-width: 600px) {
    .session-stats-shell[b-tw0xbn28kr]  .session-stats-card {
        flex-basis: 50%;
        max-width: 50%;
    }
}
/* /Shared/SetupEditorSkeleton.razor.rz.scp.css */
.setup-editor-skeleton[b-kpssdhr0ct] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.setup-editor-skeleton__section[b-kpssdhr0ct] {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.setup-editor-skeleton__section-header[b-kpssdhr0ct] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--border-color);
}

.setup-editor-skeleton__params[b-kpssdhr0ct] {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.setup-editor-skeleton__param-row[b-kpssdhr0ct] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
/* /Shared/TrackMapSkeleton.razor.rz.scp.css */
.track-map-skeleton[b-x7px991m0e] {
    position: relative;
    width: 100%;
    min-height: 480px;
    overflow: hidden;
    border-radius: 8px;
}

.track-map-skeleton__trace[b-x7px991m0e] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Shimmer stroke animation — draws the curved "lap" path */
.track-map-skeleton__stroke[b-x7px991m0e] {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: skeleton-sweep-b-x7px991m0e 2s ease-in-out infinite alternate;
}

@keyframes skeleton-sweep-b-x7px991m0e {
    to {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
}

/* Respect prefers-reduced-motion: skip the sweep, just show the path */
@media (prefers-reduced-motion: reduce) {
    .track-map-skeleton__stroke[b-x7px991m0e] {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 0.4;
    }
}