/* ==========================================================================
   RaceWise design tokens
   `data-theme` is set on <html> by theme.js before first paint. Interactive
   pages also get MudBlazor's --mud-palette-* variables; the --rw-* tokens keep
   static (Account) pages and custom widgets in step with the same palette.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --rw-bg: #101218;
    --rw-bg-elevated: #141821;
    --rw-surface: #181c25;
    --rw-surface-2: #1f2430;
    --rw-surface-hover: rgba(255, 255, 255, 0.04);
    --rw-text: #e8ecf4;
    --rw-text-muted: #8b93a7;
    --rw-border: rgba(255, 255, 255, 0.08);
    --rw-border-strong: rgba(255, 255, 255, 0.14);
    --rw-primary: #e3a008;
    --rw-primary-contrast: #101218;
    --rw-primary-soft: rgba(227, 160, 8, 0.14);
    --rw-success: #3dd68c;
    --rw-success-soft: rgba(61, 214, 140, 0.14);
    --rw-info: #29b6f6;
    --rw-info-soft: rgba(41, 182, 246, 0.14);
    --rw-error: #ff6b7a;
    --rw-error-soft: rgba(255, 107, 122, 0.14);
    --rw-warning: #e3a008;
    --rw-warning-soft: rgba(227, 160, 8, 0.14);
    --rw-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --rw-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
    --rw-glow: radial-gradient(ellipse at 80% 20%, rgba(227, 160, 8, 0.12), transparent 50%);
    --rw-radius: 10px;
    --rw-radius-lg: 14px;
}

:root[data-theme="light"] {
    color-scheme: light;
    --rw-bg: #f4f6fb;
    --rw-bg-elevated: #ffffff;
    --rw-surface: #ffffff;
    --rw-surface-2: #f1f4f9;
    --rw-surface-hover: rgba(27, 33, 48, 0.04);
    --rw-text: #1b2130;
    --rw-text-muted: #5a637a;
    --rw-border: rgba(27, 33, 48, 0.10);
    --rw-border-strong: rgba(27, 33, 48, 0.18);
    --rw-primary: #b8820a;
    --rw-primary-contrast: #ffffff;
    --rw-primary-soft: rgba(184, 130, 10, 0.12);
    --rw-success: #1f9d61;
    --rw-success-soft: rgba(31, 157, 97, 0.12);
    --rw-info: #0288d1;
    --rw-info-soft: rgba(2, 136, 209, 0.12);
    --rw-error: #d63f4f;
    --rw-error-soft: rgba(214, 63, 79, 0.12);
    --rw-warning: #b8820a;
    --rw-warning-soft: rgba(184, 130, 10, 0.12);
    --rw-shadow: 0 1px 2px rgba(27, 33, 48, 0.06), 0 8px 24px -12px rgba(27, 33, 48, 0.18);
    --rw-shadow-lg: 0 16px 40px rgba(27, 33, 48, 0.18);
    --rw-glow: radial-gradient(ellipse at 80% 20%, rgba(184, 130, 10, 0.10), transparent 50%);
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--rw-bg);
    color: var(--rw-text);
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.tabular {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   App shell
   ========================================================================== */

.mud-appbar.app-bar {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    border-bottom: 1px solid var(--mud-palette-divider);
    backdrop-filter: saturate(140%) blur(8px);
}

.mud-main-content.app-main {
    padding-top: calc(var(--mud-appbar-height, 60px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    min-height: 100vh;
}

.app-content {
    padding: 1.25rem 1rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.live-data-status-banner {
    max-width: 100%;
    margin-bottom: 1rem;
    color: #000000;
}

.live-data-status-banner .mud-alert-message,
.live-data-status-banner .mud-alert-icon {
    color: #000000;
    opacity: 1;
}

:root[data-theme="light"] .live-data-status-banner.mud-alert-filled-warning {
    background-color: #b8820a;
}

:root[data-theme="light"] .live-data-status-banner.mud-alert-filled-error {
    background-color: #d63f4f;
}

:root[data-theme="dark"] .live-data-status-banner.mud-alert-filled-warning,
:root:not([data-theme="light"]) .live-data-status-banner.mud-alert-filled-warning {
    background-color: #e3a008;
}

:root[data-theme="dark"] .live-data-status-banner.mud-alert-filled-error,
:root:not([data-theme="light"]) .live-data-status-banner.mud-alert-filled-error {
    background-color: #ff6b7a;
}

.live-data-status-banner .mud-alert-message {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.live-data-status-message {
    overflow-wrap: anywhere;
    color: #000000;
}

.live-data-status-meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #000000;
    opacity: 1;
}

.live-data-status-card {
    max-width: 100%;
}

.live-data-status-readout {
    display: grid;
    grid-template-columns: minmax(7.5rem, 12rem) minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
    margin: 0 0 1rem;
}

.live-data-status-readout dt,
.live-data-status-readout dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.live-data-status-readout dt {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.live-data-status-readout dd {
    font-size: 0.875rem;
}

@media (max-width: 420px) {
    .live-data-status-readout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem 0;
    }

    .live-data-status-readout dd {
        margin-bottom: 0.45rem;
    }
}

@media (min-width: 960px) {
    .app-content {
        padding: 1.75rem 1.75rem 2.5rem;
    }
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
    margin-left: 0.25rem;
}

.app-brand-mark {
    display: block;
    height: 28px;
    width: auto;
}

.app-brand-name {
    letter-spacing: -0.01em;
}

.mud-drawer.app-drawer {
    border-right: 1px solid var(--mud-palette-divider);
}

.app-drawer-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.75rem 0.6rem 1rem;
}

.app-drawer-footer {
    margin-top: auto;
    padding: 0.75rem 0.75rem 0;
}

.app-drawer-credit {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.65rem;
    font-style: italic;
    line-height: 1.35;
}

.app-nav .app-nav-section {
    display: block;
    padding: 0.85rem 0.85rem 0.35rem;
    color: var(--mud-palette-text-secondary);
}

.app-nav .app-nav-section:first-child {
    padding-top: 0.25rem;
}

.app-nav .mud-nav-link {
    border-radius: var(--rw-radius);
    margin-bottom: 2px;
}

.app-nav .mud-nav-link.active {
    background: var(--rw-primary-soft);
    font-weight: 600;
}

.theme-toggle .mud-icon-root {
    transition: transform 0.25s ease;
}

.theme-toggle:hover .mud-icon-root {
    transform: rotate(20deg);
}

/* ==========================================================================
   Shared components
   ========================================================================== */

.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
}

.page-header-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--rw-primary-soft);
    flex: 0 0 auto;
}

.page-header-text {
    min-width: 0;
}

.page-header-eyebrow {
    display: block;
    margin-bottom: -0.1rem;
}

.page-header-subtitle {
    margin-top: 0.15rem;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mud-paper.stat-card {
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--rw-radius-lg);
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.mud-paper.stat-card:hover {
    border-color: var(--rw-border-strong);
}

.stat-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.stat-card-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.stat-card-value-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-height: 2.2rem;
}

.stat-card .mud-typography.stat-card-value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.stat-card-hint,
.stat-card-trend {
    margin-top: 0.1rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.25rem 1rem;
    gap: 0.4rem;
}

.empty-state-compact {
    padding: 1.25rem 0.75rem;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--rw-surface-2);
    margin-bottom: 0.4rem;
}

.empty-state-compact .empty-state-icon {
    width: 40px;
    height: 40px;
}

.empty-state-icon .mud-icon-root {
    font-size: 1.75rem;
}

.empty-state-compact .empty-state-icon .mud-icon-root {
    font-size: 1.3rem;
}

.empty-state-message {
    max-width: 34rem;
}

.empty-state-actions {
    margin-top: 0.6rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.trap-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    vertical-align: middle;
}

.trap-chip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    font-variant-numeric: tabular-nums;
}

.trap-chip-medium .trap-chip-badge {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.95rem;
    border-radius: 7px;
}

.trap-chip-large .trap-chip-badge {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.15rem;
    border-radius: 8px;
}

.trap-chip-name {
    font-weight: 500;
}

.trap-chip-empty {
    color: var(--mud-palette-text-secondary);
}

.live-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--rw-success);
    box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.6);
    animation: live-pulse 1.6s ease-out infinite;
}

.live-dot-warning {
    background: var(--rw-primary);
    box-shadow: 0 0 0 0 rgba(227, 160, 8, 0.6);
}

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(61, 214, 140, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 214, 140, 0); }
}

/* Cards and tables get a consistent, softer look in both modes */

.mud-paper.rw-card,
.mud-table.rw-table {
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--rw-radius-lg);
    background: var(--mud-palette-surface);
}

.mud-table.rw-table .mud-table-container {
    border-radius: var(--rw-radius-lg);
}

.mud-table.rw-table .mud-table-head .mud-table-cell {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--rw-surface-2);
}

.rw-clickable-row {
    cursor: pointer;
}

.fw-600 {
    font-weight: 600;
}

.text-mono {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.72rem;
}

.mud-table .rw-row-settled .mud-table-cell {
    color: var(--mud-palette-text-secondary);
}

.mud-table .rw-row-link {
    cursor: pointer;
}

/* Chart cards (RaceBook) */

.mud-paper.chart-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.chart-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.25rem;
}

.chart-card-head .mud-typography {
    line-height: 1.2;
}

.chart-card .mud-typography.chart-card-figure {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chart-card-body {
    flex: 1 1 auto;
    padding: 0.25rem 0.5rem 0.5rem;
    min-height: 0;
}

.apexcharts-canvas {
    font-family: inherit;
}

.apexcharts-tooltip {
    border-radius: var(--rw-radius) !important;
    box-shadow: var(--rw-shadow-lg) !important;
}

.apexcharts-legend-text {
    color: var(--mud-palette-text-secondary) !important;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.rw-tabs .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.rw-tabs .mud-tab {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    min-width: 0;
}

.rw-skeleton-card.mud-skeleton {
    border-radius: var(--rw-radius-lg);
}

.range-toggle .mud-button-root {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
}

.race-flag-warn {
    background: var(--rw-warning-soft);
    color: var(--rw-warning);
}

/* ==========================================================================
   Meetings
   ========================================================================== */

.meetings-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.meetings-toolbar .mud-input-control {
    margin: 0;
}

.meetings-toolbar-chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.meetings-datepicker { width: 15rem; max-width: 100%; }
.meetings-rangepicker { width: 17rem; max-width: 100%; }
.meetings-trackselect { width: 12rem; max-width: 100%; }
.meetings-matchselect { width: 9rem; max-width: 100%; }
.meetings-search { width: 13rem; max-width: 100%; }

/* ==========================================================================
   Meeting-ID discovery admin table
   ========================================================================== */

.meeting-ids-payload-json {
    margin: 0;
    max-height: 28rem;
    overflow: auto;
    padding: 0.75rem 1rem;
    font: 12px/1.45 ui-monospace, "Cascadia Code", Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--rw-surface-2);
    border-radius: var(--rw-radius);
}

.meeting-ids-discovery-cards {
    display: flex;
    flex-direction: column;
}

.mud-table.meeting-ids-table table {
    width: 100%;
    table-layout: fixed;
}

.mud-table.meeting-ids-table .col-id { width: 9rem; }
.mud-table.meeting-ids-table .col-select { width: 2.75rem; }
.mud-table.meeting-ids-table .col-date { width: 10.5rem; }
.mud-table.meeting-ids-table .col-first-race { width: 8.75rem; }
.mud-table.meeting-ids-table .col-status { width: 6rem; }
.mud-table.meeting-ids-table .col-discovered { width: 11.5rem; }

.meeting-ids-table .meeting-ids-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.meeting-ids-table .meeting-ids-sort .mud-icon-root {
    font-size: 1rem;
    opacity: 0.7;
}

.mud-table.meeting-ids-table .col-track,
.mud-table.meeting-ids-table .col-payload {
    overflow: hidden;
}

.mud-table.meeting-ids-table .col-actions {
    width: 10rem;
    white-space: nowrap;
    overflow: hidden;
}

.meeting-ids-table .col-select .mud-checkbox,
.meeting-ids-discovery-cards .mud-checkbox {
    margin: 0;
}

.meeting-ids-cell-clip {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.meeting-ids-row-actions {
    flex-wrap: nowrap;
}

.meetings-group-header .mud-typography {
    display: inline;
}

.meetings-group-header .mud-typography + .mud-typography {
    margin-left: 0.6rem;
}

.meeting-sessions {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.meeting-session-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.meeting-session-head .mud-typography {
    margin: 0;
}

.meeting-session-title {
    font-weight: 700;
    line-height: 1.2;
}

.meeting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.meeting-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--rw-radius-lg);
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.meeting-card:hover {
    border-color: var(--rw-primary);
    transform: translateY(-2px);
    box-shadow: var(--rw-shadow);
}

.meeting-card.is-active {
    border-color: var(--rw-success);
    box-shadow: inset 0 0 0 1px var(--rw-success-soft);
}

.meeting-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.meeting-card-title {
    min-width: 0;
}

.meeting-card .mud-typography.meeting-card-track {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meeting-card-flags {
    flex: 0 0 auto;
}

.meeting-card-times {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.meeting-card-times .mud-typography.meeting-card-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin: 0;
}

.meeting-card-count {
    margin-left: auto;
    text-align: right;
}

.meeting-card-of {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--rw-text-muted);
}

.meeting-card-progress {
    margin: 0;
}

.meeting-card-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.meeting-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 960px) {
    .meeting-hero {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
}

/* ==========================================================================
   Dashboard widgets
   ========================================================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-grid > * {
    grid-column: span 12;
    min-width: 0;
}

@media (min-width: 600px) {
    .dashboard-grid > .span-sm-6 { grid-column: span 6; }
}

@media (min-width: 960px) {
    .dashboard-grid > .span-md-3 { grid-column: span 3; }
    .dashboard-grid > .span-md-4 { grid-column: span 4; }
    .dashboard-grid > .span-md-6 { grid-column: span 6; }
    .dashboard-grid > .span-md-8 { grid-column: span 8; }
    .dashboard-grid > .span-md-12 { grid-column: span 12; }
}

@media (min-width: 1280px) {
    .dashboard-grid > .span-lg-3 { grid-column: span 3; }
    .dashboard-grid > .span-lg-4 { grid-column: span 4; }
    .dashboard-grid > .span-lg-5 { grid-column: span 5; }
    .dashboard-grid > .span-lg-6 { grid-column: span 6; }
    .dashboard-grid > .span-lg-7 { grid-column: span 7; }
    .dashboard-grid > .span-lg-8 { grid-column: span 8; }
    .dashboard-grid > .span-lg-9 { grid-column: span 9; }
    .dashboard-grid > .span-lg-12 { grid-column: span 12; }
}

.mud-paper.widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--rw-radius-lg);
    background: var(--mud-palette-surface);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.mud-paper.widget:hover {
    border-color: var(--rw-border-strong);
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.5rem;
}

.widget-inline-progress.mud-progress-linear {
    height: 2px;
    border-radius: 0;
}

.widget-body-dimmed {
    opacity: 0.6;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.rw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pnl-widget.widget {
    container-type: inline-size;
    container-name: pnl-widget;
}

.pnl-period-toggle {
    display: inline-flex;
    max-width: 100%;
}

.pnl-period-toggle .pnl-period-btn.mud-button-root {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.65rem;
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
}

.pnl-period-toggle .pnl-period-btn.pnl-period-selected.mud-button-root,
.pnl-period-toggle .pnl-period-btn.mud-button-root[aria-pressed="true"] {
    background: var(--rw-primary-soft);
    /* Use primary text colour for ≥4.5:1 contrast on the tinted fill (light theme). */
    color: var(--rw-text);
    border-color: var(--rw-primary);
}

.pnl-period-toggle .pnl-period-btn.mud-button-root:focus-visible {
    outline: 2px solid var(--rw-primary);
    outline-offset: 2px;
    z-index: 1;
}

.pnl-chart-unavailable {
    display: block;
    padding: 0.75rem 0 0.25rem;
}

/* Wrap when the card itself is narrow (~330px at desktop), not only when the viewport is. */
@container pnl-widget (max-width: 400px) {
    .widget-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .widget-actions {
        flex: 1 1 100%;
        width: 100%;
        justify-content: stretch;
    }

    .pnl-period-toggle {
        display: flex;
        width: 100%;
    }

    .pnl-period-toggle .pnl-period-btn.mud-button-root {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 400px) {
    .pnl-widget .widget-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .pnl-widget .widget-actions {
        flex: 1 1 100%;
        width: 100%;
        justify-content: stretch;
    }

    .pnl-widget .pnl-period-toggle {
        display: flex;
        width: 100%;
    }

    .pnl-widget .pnl-period-toggle .pnl-period-btn.mud-button-root {
        flex: 1 1 0;
        min-width: 0;
    }
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.widget-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--rw-primary-soft);
    flex: 0 0 auto;
}

.widget-icon .mud-icon-root {
    font-size: 1.15rem;
}

.widget-title-text {
    min-width: 0;
}

.widget-title-text .mud-typography {
    line-height: 1.2;
}

.widget-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.widget-body {
    flex: 1 1 auto;
    padding: 0.25rem 1rem 1rem;
    min-height: 0;
}

.widget-body-flush {
    padding: 0;
}

.widget-footer {
    padding: 0.5rem 1rem 0.85rem;
    border-top: 1px solid var(--mud-palette-divider);
}

.ai-picks-locked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.5rem 0 0.25rem;
    min-height: 10rem;
}

.ai-picks-locked-icon {
    margin-bottom: 0.35rem;
    opacity: 0.85;
}

.ai-picks-locked-title {
    font-weight: 600;
}

.ai-picks-locked-body {
    max-width: 22rem;
    line-height: 1.45;
}

.widget-hero {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.widget-hero .mud-typography.widget-hero-value {
    font-size: 2.35rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.widget-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.75rem;
}

.widget-kpi {
    padding: 0.6rem 0.75rem;
    border-radius: var(--rw-radius);
    background: var(--rw-surface-2);
}

.widget-kpi .mud-typography.widget-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.widget-list {
    display: flex;
    flex-direction: column;
}

.widget-list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--mud-palette-divider);
    color: inherit;
    text-decoration: none;
}

.widget-list-item:first-child {
    border-top: none;
}

a.widget-list-item:hover {
    background: var(--rw-surface-hover);
}

.widget-list-time {
    flex: 0 0 3.4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.widget-list-main {
    flex: 1 1 auto;
    min-width: 0;
}

.widget-list-main .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-list-side {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.widget-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.live-market-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--rw-radius);
    background: var(--rw-surface-2);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.live-market-card:hover {
    border-color: var(--rw-primary);
    transform: translateY(-1px);
}

.live-market-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.live-market-card-venue {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-order-side {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 16rem;
}

.live-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.75rem;
}

.health-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--mud-palette-divider);
}

.health-row:first-child {
    border-top: none;
    padding-top: 0;
}

.health-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.8rem;
}

.health-status-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--rw-text-muted);
}

.health-status-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.85;
}

.health-ok .health-status-dot { background: var(--rw-success); }
.health-warn .health-status-dot { background: var(--rw-warning); }
.health-bad .health-status-dot { background: var(--rw-error); }
.health-off .health-status-dot { background: var(--rw-text-muted); opacity: 0.6; }
.health-off { color: var(--rw-text-muted); }

.health-list {
    display: flex;
    flex-direction: column;
}

.health-detail {
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.upcoming-list {
    display: flex;
    flex-direction: column;
}

.upcoming-venue {
    border-top: 1px solid var(--mud-palette-divider);
}

.upcoming-venue:first-child {
    border-top: none;
}

.upcoming-venue-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem 0.2rem;
}

.upcoming-venue-head .mud-typography:last-child {
    margin-left: auto;
}

.upcoming-race {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 1rem 0.45rem 2.2rem;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s ease;
}

.upcoming-race:hover {
    background: var(--rw-surface-hover);
}

.upcoming-race.is-live {
    border-left-color: var(--rw-success);
}

.race-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--rw-surface-2);
    color: var(--rw-text-muted);
    white-space: nowrap;
}

.race-flag-live {
    background: var(--rw-success-soft);
    color: var(--rw-success);
}

.race-flag-lay {
    background: var(--rw-primary-soft);
    color: var(--rw-primary);
}

.race-flag-analysed {
    background: var(--rw-info-soft);
    color: var(--rw-info);
}

.race-flag-armed {
    background: var(--rw-warning-soft);
    color: var(--rw-warning);
}

.race-flag-failed {
    background: var(--rw-error-soft);
    color: var(--rw-error);
}

/* ==========================================================================
   Races / Logs pages
   ========================================================================== */

.text-muted {
    color: var(--rw-text-muted);
}

.filter-chips.mud-chipset {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.filter-chips .mud-chip {
    margin: 0;
    font-weight: 600;
}

.filter-chips .mud-chip.mud-chip-selected {
    box-shadow: inset 0 0 0 1px currentColor;
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.15rem;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--rw-surface-2);
    color: var(--rw-text-muted);
}

.mud-table .rw-row-live .mud-table-cell:first-child {
    box-shadow: inset 3px 0 0 var(--rw-success);
}

.race-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.race-cards-virtual {
    height: calc(100vh - 14rem);
    overflow-y: auto;
    padding-bottom: 0.5rem;
}

.mud-table.races-table .mud-table-container {
    max-height: calc(100vh - 14rem);
    /* Keep overflow inside the table container — never the page. */
    overflow-x: auto;
}

.mud-table.races-table table {
    width: 100%;
    table-layout: auto;
}

.mud-table.races-table .col-time {
    white-space: nowrap;
    width: 4.5rem;
}

.mud-table.races-table .col-venue {
    max-width: 9rem;
}

.mud-table.races-table .col-focus {
    max-width: 10rem;
}

.mud-table.races-table .col-confidence {
    white-space: nowrap;
    width: 7.5rem;
}

/* Top-rated runner shares the column budget: wrap inside 11rem, cap at 12rem. */
.mud-table.races-table .col-top-rated,
.ai-analysis-table .col-top-rated {
    width: 11rem;
    max-width: 12rem;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: top;
}

.mud-table.races-table .col-actions {
    white-space: nowrap;
    width: 1%;
}

.mud-table.races-table .cell-truncate {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mud-table.races-table .race-row-actions {
    flex-wrap: nowrap;
}

/* Comfortable tap targets on tablet / touch without changing desktop density much. */
.mud-table.races-table .race-action-hit.mud-button-root,
.mud-table.races-table .race-action-hit.mud-icon-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

/*
 * Tablet / small-laptop band (~960–1439px): hide Dist and Bet so Time, Venue,
 * Status, AI Confidence %, and Actions stay reachable without horizontal page
 * scroll. Confidence stays visible from 1024px up; Dist/Bet return at desktop
 * (>=1440). Below 1024 (still table until ~960) Confidence yields to Status/Actions.
 */
@media (max-width: 1439.98px) {
    .mud-table.races-table .col-dist,
    .mud-table.races-table .col-bet {
        display: none;
    }

    .mud-table.races-table .col-venue {
        max-width: 10rem;
    }
}

@media (max-width: 1023.98px) {
    .mud-table.races-table .col-confidence {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .mud-table.races-table .col-venue {
        max-width: 8rem;
    }

    .mud-table.races-table .col-top-rated,
    .ai-analysis-table .col-top-rated {
        width: auto;
        max-width: 9rem;
    }
}

/* Stacked AI Analysis rows are full-width flex lines. The 9rem cap above must not apply.
   MudBlazor stacks at max-width: 600px, so this reset uses the same cutoff. */
@media (max-width: 600px) {
    .ai-analysis-table.mud-xs-table,
    .ai-analysis-table.mud-xs-table .mud-table-container,
    .ai-analysis-table.mud-xs-table .mud-table-root {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .ai-analysis-table.mud-xs-table .mud-table-root {
        table-layout: fixed;
    }

    .ai-analysis-table .col-top-rated {
        width: auto;
        max-width: none;
        min-width: 0;
        white-space: normal;
    }

    .ai-analysis-table .col-top-rated::before {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .ai-analysis-table .col-top-rated .top-rated-runner-line {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        margin-left: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: end;
    }
}

@media (max-width: 959.95px) {
    .mud-table.races-table {
        display: none !important;
    }
}

.mud-paper.race-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-left-width: 3px;
}

.mud-paper.race-card.is-live {
    border-left-color: var(--rw-success);
}

.race-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.race-card .mud-typography.race-card-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin: 0;
}

.race-card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.race-card-pick {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.race-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--mud-palette-divider);
}

.log-table .mud-table-cell {
    vertical-align: top;
}

.runner-price {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.runner-price-back {
    color: var(--rw-info);
}

.runner-price-lay {
    color: var(--rw-primary);
}

/* ==========================================================================
   Config
   ========================================================================== */

.mud-paper.config-card {
    padding: 1.1rem 1.25rem 1.25rem;
}

.config-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.config-card-head > .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.config-card-head .mud-typography {
    margin: 0;
}

.config-switches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0 1rem;
}

.config-switches .mud-switch {
    margin: 0;
}

.config-session {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--rw-radius);
    border: 1px solid var(--mud-palette-divider);
    background: var(--rw-surface-2);
}

.config-session .health-status-dot {
    flex: 0 0 auto;
    margin-top: 0.4rem;
}

.config-session.health-ok { border-color: var(--rw-success); background: var(--rw-success-soft); }
.config-session.health-warn { border-color: var(--rw-warning); background: var(--rw-warning-soft); }
.config-session .mud-typography { margin: 0; }

/* ==========================================================================
   RaceBook status bar
   ========================================================================== */

.mud-paper.status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.85rem 1.1rem;
    border-left-width: 4px;
}

.mud-paper.status-bar.is-live {
    border-left-color: var(--rw-success);
}

.mud-paper.status-bar.is-closed {
    border-left-color: var(--rw-text-muted);
}

.status-bar-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.status-bar-back {
    flex: 0 0 auto;
}

.status-bar-title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
}

.status-bar .mud-typography.status-bar-time {
    margin: 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}

.status-bar-meta {
    min-width: 0;
}

.status-bar .mud-typography.status-bar-venue {
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-bar-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.status-bar .mud-typography.status-bar-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.status-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

@media (max-width: 599.95px) {
    .status-bar-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .status-bar-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* Side-by-side rows: the other card sets the height, and this card's body scrolls. */
@media (min-width: 960px) {
    .dashboard-grid > .row-scroll {
        position: relative;
        min-height: 0;
    }

    .dashboard-grid > .row-scroll > .widget {
        position: absolute;
        inset: 0;
        height: auto;
    }

    .dashboard-grid > .row-scroll .widget-body {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.activity-timeline.mud-timeline {
    padding: 0.25rem 0.75rem 0.5rem 0;
}

.activity-timeline .mud-timeline-item {
    padding-bottom: 0.15rem;
}

.activity-timeline .mud-timeline-item-content {
    padding: 0.15rem 0 0.35rem 0.25rem;
}

.activity-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.activity-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.activity-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.activity-title:hover {
    color: var(--rw-primary);
}

.activity-time {
    flex: 0 0 auto;
    white-space: nowrap;
}

.activity-detail,
.activity-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.weather-strip-wrap {
    container-type: inline-size;
}

.weather-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
}

@container (min-width: 24rem) {
    .weather-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 44rem) {
    .weather-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.weather-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    min-width: 0;
    height: 100%;
    padding: 0.7rem 0.8rem 0.65rem;
    border-radius: var(--rw-radius);
    background: var(--rw-surface-2);
}

.weather-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.weather-tile img {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

.weather-temp {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.weather-venue {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.weather-summary,
.weather-meta {
    color: var(--rw-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.weather-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.weather-meta {
    margin-top: auto;
    padding-top: 0.35rem;
    white-space: nowrap;
}

.evidence-bar {
    display: flex;
    gap: 3px;
    height: 2.4rem;
    align-items: flex-end;
}

.evidence-bar span {
    flex: 1 1 0;
    border-radius: 3px 3px 0 0;
    background: var(--rw-primary);
    min-height: 3px;
    opacity: 0.85;
}

/* ==========================================================================
   Race book / analysis (existing components)
   ========================================================================== */

.json-raw {
    margin: 0;
    padding: 0.75rem;
    overflow: auto;
    max-height: 50vh;
    font: 12px/1.45 ui-monospace, "Cascadia Code", Consolas, monospace;
    white-space: pre;
    background: var(--rw-surface-2);
    border-radius: var(--rw-radius);
}

.analysis-drawer.mud-drawer {
    position: fixed !important;
    --mud-drawer-width: 100vw;
    width: 100vw !important;
    max-width: 100vw;
}

@media (min-width: 960px) {
    .analysis-drawer.mud-drawer {
        --mud-drawer-width: 75vw;
        width: 75vw !important;
        max-width: 75vw;
    }
}

.analysis-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.analysis-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.analysis-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
}

.analysis-brief-wrap {
    min-height: 8rem;
}

.analysis-brief {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
}

.analysis-brief h1,
.analysis-brief-title {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    line-height: 1.25;
    font-weight: 650;
}

.analysis-brief h2 {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.analysis-brief h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 650;
}

.analysis-brief p {
    margin: 0 0 0.75rem;
}

.analysis-brief p:last-child,
.analysis-brief-dog p:last-child {
    margin-bottom: 0;
}

.analysis-brief strong {
    font-weight: 700;
}

.analysis-brief-back,
.analysis-brief-lay,
.analysis-brief-field,
.analysis-brief-section {
    margin: 0 0 0.9rem;
    padding: 0.9rem 1rem;
    border-radius: var(--rw-radius);
    background: var(--rw-surface-2);
}

.analysis-brief-back {
    border-left: 3px solid var(--rw-success);
    background: var(--rw-success-soft);
}

.analysis-brief-lay {
    border-left: 3px solid var(--rw-warning);
    background: var(--rw-warning-soft);
}

.analysis-brief-dog + .analysis-brief-dog {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.analysis-drawer .mud-typography.analysis-drawer-title {
    margin: 0;
    line-height: 1.2;
}

.analysis-focus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.top-rated-runner-line {
    min-width: 0;
    max-width: 12rem;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
    color: var(--rw-text);
}

.race-card .top-rated-runner-line,
.analysis-drawer .top-rated-runner-line,
.analysis-today-top-rated .top-rated-runner-line {
    max-width: 100%;
}

.widget-list-main .mud-typography.analysis-today-top-rated {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    margin-top: 0.2rem;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.analysis-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.analysis-outcome {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--rw-radius);
    border: 1px solid var(--mud-palette-divider);
    background: var(--rw-surface-2);
}

.analysis-outcome.is-correct {
    border-color: var(--rw-success);
    background: var(--rw-success-soft);
}

.analysis-outcome.is-incorrect {
    border-color: var(--rw-error);
    background: var(--rw-error-soft);
}

.analysis-tier-toggle {
    align-self: flex-start;
}

.analysis-premium-locked {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--rw-radius);
    border: 1px dashed var(--mud-palette-divider);
    background: var(--rw-surface-2);
}

.card-focus-row {
    background: var(--rw-primary-soft);
}

.stat-widget {
    height: 100%;
}

.stat-widget-value {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.15;
}

.stat-widget .mud-typography.stat-widget-value {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.15;
}

.stat-reason-cell {
    max-width: 18rem;
    width: 18rem;
}

.stat-reason-preview {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.stat-reason-more {
    display: inline-flex;
    padding: 0;
    min-width: 0;
    height: auto;
    line-height: inherit;
    vertical-align: baseline;
    text-transform: none;
    text-decoration: underline;
    white-space: nowrap;
}

.ai-analysis-table.mud-table > .mud-table-container {
    max-height: min(32rem, 60vh);
    overflow: auto;
}

.choice-details-body {
    max-height: min(70vh, 36rem);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.choice-details-reason {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 600px) {
    .stat-reason-cell {
        max-width: none;
        width: auto;
    }

    .choice-details-body {
        max-height: none;
    }

    .account-page {
        margin: 0 auto;
        max-width: none;
    }
}

.live-tv-video {
    width: 100%;
    max-height: 70vh;
    background: #000;
    display: block;
}

/* History fills the main pane: the race table scrolls inside it, no more space taken by side panels. */
.mud-main-content.app-main:has(.history-page) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mud-main-content.app-main:has(.history-page) > .app-content {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 1rem;
}

.history-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.history-page .page-header,
.history-page .meetings-toolbar {
    flex: 0 0 auto;
    margin-bottom: 0.75rem;
}

.history-workspace {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Closed race page (Race page, race-closed-panels): result and video side-by-side panels. */
.race-closed-panels {
    flex: 0 0 auto;
    height: clamp(13rem, 34dvh, 22rem);
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.9fr);
    gap: 0.75rem;
    min-height: 0;
}

.race-closed-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.race-closed-panel-heading {
    flex: 0 0 auto;
    min-width: 0;
    margin-bottom: 0.55rem;
}

.race-closed-panel-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.race-closed-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.race-closed-panel-body > .empty-state {
    width: 100%;
    margin-block: auto;
    padding-block: 0.5rem;
}

.race-closed-panel > .mud-skeleton,
.race-closed-panel-body > .mud-skeleton {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

.race-closed-panel-body > .mud-table {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.race-closed-panel-body > .mud-table > .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.race-closed-video-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.race-closed-panel .live-tv-video {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

.history-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.history-table-toolbar {
    flex: 0 0 auto;
    margin-bottom: 0.5rem;
}

.history-view-col {
    width: 2rem;
    text-align: center;
}

.history-table-wrap > .empty-state {
    flex: 1 1 auto;
    justify-content: center;
}

.history-table-wrap > .mud-skeleton {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

.history-table-wrap > .mud-table {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.history-table-wrap > .mud-table > .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.history-table-wrap > .mud-table > .mud-table-pagination {
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .mud-main-content.app-main:has(.history-page) {
        height: auto;
        max-height: none;
        overflow: visible;
        display: block;
    }

    .mud-main-content.app-main:has(.history-page) > .app-content {
        display: block;
        overflow: visible;
        padding-bottom: 2rem;
    }

    .history-page,
    .history-workspace {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .race-closed-panels {
        grid-template-columns: 1fr;
        height: auto;
    }

    .race-closed-panel {
        height: 16rem;
    }

    .history-table-wrap {
        /* 14rem covers the app bar, page header, and day-picker toolbar above the table. */
        height: max(20rem, calc(100dvh - 14rem));
        flex: none;
    }
}

@media (max-height: 720px) and (min-width: 901px) {
    .race-closed-panels {
        height: clamp(11rem, 30dvh, 16rem);
    }
}

.live-tv-video-with-orders {
    max-height: 56vh;
}

.live-tv-orders {
    margin-top: 0.25rem;
}

#blazor-error-ui {
    background: #3b2410;
    color: #ffd7a3;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ==========================================================================
   App bar account controls
   ========================================================================== */

.account-funds-btn {
    text-transform: none;
    border-radius: 16px;
    min-height: 28px;
    padding: 0 12px;
    font-size: 0.8125rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.account-header {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Auth / account pages (static SSR; themed via --rw-* tokens)
   ========================================================================== */

.auth-shell {
    min-height: 100vh;
    background: var(--rw-bg);
    color: var(--rw-text);
    display: flex;
    flex-direction: column;
    font-family: "Inter", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
}

.auth-shell > .account-page {
    margin: auto;
}

.auth-split {
    flex: 1 1 auto;
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}

.auth-split-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--rw-surface);
}

.auth-split-form h1 {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.auth-split-form .account-btn {
    width: 100%;
}

.auth-split-form .account-field input {
    width: 100%;
    box-sizing: border-box;
}

.auth-split-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.6rem;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.auth-split-brand-mark {
    display: block;
    height: 32px;
    width: auto;
}

.auth-split-tagline {
    color: var(--rw-text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0 0 1.25rem;
}

.auth-split-marketing {
    display: none;
}

.auth-marketing h2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 0.75rem;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.auth-marketing-mark {
    display: block;
    height: 48px;
    width: auto;
}

.auth-marketing-lead {
    color: var(--rw-text-muted);
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0 0 2rem;
    max-width: 36rem;
}

.auth-marketing-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 36rem;
}

.auth-marketing-points li {
    padding-left: 1.1rem;
    border-left: 2px solid var(--rw-primary);
}

.auth-marketing-points strong {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 600;
}

.auth-marketing-points span {
    color: var(--rw-text-muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.auth-marketing-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.auth-marketing-stat {
    padding: 0.75rem 1rem;
    border-radius: var(--rw-radius);
    background: var(--rw-surface);
    border: 1px solid var(--rw-border);
    min-width: 8rem;
}

.auth-marketing-stat strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.auth-marketing-stat span {
    color: var(--rw-text-muted);
    font-size: 0.8rem;
}

@media (min-width: 960px) {
    .auth-split {
        grid-template-columns: 1fr 2fr;
    }

    .auth-split-form {
        padding: 3rem 2.5rem;
        border-right: 1px solid var(--rw-border);
    }

    .auth-split-brand,
    .auth-split-tagline {
        display: none;
    }

    .auth-split-marketing {
        display: flex;
        align-items: center;
        padding: 3.5rem 4.5rem;
        background: var(--rw-glow), var(--rw-bg);
    }
}

.account-page {
    max-width: 26rem;
    margin: 2rem auto;
    padding: 1.5rem 1.75rem;
    background: var(--rw-surface);
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-lg);
    box-shadow: var(--rw-shadow);
}

.account-page-wide {
    max-width: 32rem;
}

.account-page h1 {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.account-page h2 {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.account-hint {
    color: var(--rw-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.account-field label {
    color: var(--rw-text-muted);
    font-size: 0.85rem;
}

.account-field input {
    background: var(--rw-bg);
    border: 1px solid var(--rw-border-strong);
    color: var(--rw-text);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.95rem;
    font: inherit;
}

.account-field input:focus {
    outline: 2px solid var(--rw-primary);
    outline-offset: 1px;
}

.account-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rw-text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

.account-btn-primary {
    background: var(--rw-primary);
    color: var(--rw-primary-contrast);
}

.account-btn-primary:hover {
    filter: brightness(1.08);
}

.account-btn-text {
    background: none;
    color: var(--rw-error);
    padding: 0.15rem 0.4rem;
}

.account-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 0.85rem;
    color: var(--rw-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.account-or::before,
.account-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rw-border-strong);
}

.gsi-material-button {
    user-select: none;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border: 1px solid #747775;
    border-radius: 6px;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: "Roboto", arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
    vertical-align: middle;
    white-space: nowrap;
    width: 100%;
}

.gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-icon svg {
    display: block;
    height: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    font-family: "Roboto", arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gsi-material-button .gsi-material-button-state {
    transition: opacity 0.218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:hover {
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.gsi-material-button:hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 0.08;
}

.gsi-material-button:active .gsi-material-button-state,
.gsi-material-button:focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 0.12;
}

.account-error,
.validation-message {
    color: var(--rw-error);
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.account-field .validation-message {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
}

.account-status {
    color: var(--rw-success);
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.account-links {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--rw-text-muted);
}

.account-links a {
    color: var(--rw-info);
}

.account-external {
    margin: 0;
}

.account-logins {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

.account-logins li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rw-border);
}

.auth-theme-toggle {
    position: fixed;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--rw-border-strong);
    background: var(--rw-surface);
    color: var(--rw-text);
    cursor: pointer;
    padding: 0;
}

.auth-theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.auth-theme-toggle .icon-sun { display: none; }
.auth-theme-toggle .icon-moon { display: block; }

:root[data-theme="dark"] .auth-theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .auth-theme-toggle .icon-moon { display: none; }

/* ==========================================================================
   Public marketing site
   ========================================================================== */

.mkt-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--rw-bg);
    color: var(--rw-text);
    font-family: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Blazor FocusOnNavigate focuses h1 (tabindex=-1); hide that outline.
   Keep :focus-visible styles on real interactive controls. */
.mkt-shell h1:focus,
.mkt-shell h1:focus-visible,
.mkt-shell [tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.mkt-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--rw-border);
    background: color-mix(in srgb, var(--rw-bg) 82%, transparent);
    backdrop-filter: saturate(140%) blur(12px);
}

.mkt-header-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mkt-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.mkt-brand-mark {
    display: block;
    height: 28px;
    width: auto;
}

.mkt-brand-name {
    font-family: "Syne", "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.03em;
}

.mkt-nav-toggle {
    margin-left: auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--rw-border);
    background: var(--rw-surface);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
}

.mkt-nav-toggle:focus-visible {
    outline: 2px solid var(--rw-primary);
    outline-offset: 2px;
}

.mkt-nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--rw-text);
    border-radius: 1px;
}

.mkt-nav {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 0.75rem 1.25rem 1.25rem;
    background: var(--rw-bg-elevated);
    border-bottom: 1px solid var(--rw-border);
    box-shadow: var(--rw-shadow-lg);
}

.mkt-nav.is-open {
    display: flex;
}

.mkt-nav-link {
    text-decoration: none;
    color: var(--rw-text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.mkt-nav-link:hover,
.mkt-nav-link.active {
    color: var(--rw-text);
    background: var(--rw-surface-hover);
}

.mkt-nav-link.active {
    color: var(--rw-primary);
}

.mkt-nav-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rw-border);
}

.mkt-theme-toggle {
    margin-right: 0.15rem;
}

.mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-decoration: none;
    border-radius: var(--rw-radius);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.55rem 1.15rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.mkt-btn:hover {
    transform: translateY(-1px);
}

.mkt-btn-primary {
    background: var(--rw-primary);
    color: var(--rw-primary-contrast);
}

.mkt-btn-primary:hover {
    filter: brightness(1.05);
}

.mkt-btn-ghost {
    background: transparent;
    color: var(--rw-text);
    border-color: var(--rw-border-strong);
}

.mkt-btn-ghost:hover {
    background: var(--rw-surface-hover);
}

.mkt-btn-lg {
    padding: 0.8rem 1.4rem;
    font-size: 1rem;
}

.mkt-main {
    flex: 1 1 auto;
}

.mkt-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.mkt-hero {
    position: relative;
    min-height: min(92vh, 860px);
    display: grid;
    align-items: end;
    overflow: hidden;
    border-bottom: 1px solid var(--rw-border);
}

.mkt-hero-product {
    align-items: center;
    min-height: min(88vh, 820px);
    overflow: visible;
}

.mkt-hero-layout {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 6.5rem 1.25rem 3rem;
    display: grid;
    gap: 2rem;
    align-items: center;
}

.mkt-hero-product .mkt-hero-inner {
    max-width: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.mkt-hero-product .mkt-hero-brand {
    max-width: 100%;
    font-size: clamp(2.2rem, 7.5vw, 3.6rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.mkt-hero-showcase {
    position: relative;
    min-width: 0;
    width: 100%;
}

.mkt-shot-stack {
    position: relative;
    isolation: isolate;
}

.mkt-shot-stack > .mkt-shot-back.app-shot {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
}

.mkt-shot-stack > .mkt-shot-front.app-shot {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    margin: 0.85rem 0 0;
}

.mkt-shot-note {
    margin: 0.85rem 0 0;
    color: var(--rw-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
    max-width: 36rem;
}

.mkt-hero-showcase-single .mkt-shot-note {
    margin-top: 0.75rem;
}

.mkt-service-features {
    display: grid;
    gap: 2.75rem;
    margin-bottom: 2.5rem;
}

.mkt-service-feature,
.mkt-timeline-feature {
    display: grid;
    gap: 1.15rem;
    align-items: start;
}

.mkt-service-feature {
    padding-bottom: 2.25rem;
    border-bottom: 1px solid var(--rw-border);
}

.mkt-feature-shot {
    width: 100%;
    max-width: 100%;
}

.mkt-feature-shot .app-shot-img {
    object-fit: contain;
}

.mkt-service-copy h2,
.mkt-timeline-copy h2 {
    margin: 0 0 0.5rem;
}

.mkt-service-copy p,
.mkt-timeline-copy p {
    margin: 0;
    color: var(--rw-text-muted);
    line-height: 1.55;
    max-width: 44rem;
}

/* Theme chart pair: exactly one visible. Default (no data-theme) shows light. */
.mkt-shot-theme-pair {
    position: relative;
}

.mkt-shot-theme-pair > .mkt-shot-for-dark {
    display: none;
}

.mkt-shot-theme-pair > .mkt-shot-for-light {
    display: block;
}

:root[data-theme="dark"] .mkt-shot-theme-pair > .mkt-shot-for-light {
    display: none;
}

:root[data-theme="dark"] .mkt-shot-theme-pair > .mkt-shot-for-dark {
    display: block;
}

.mkt-hero-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, rgba(227, 160, 8, 0.18), transparent 55%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(41, 182, 246, 0.08), transparent 50%),
        linear-gradient(180deg, transparent 40%, var(--rw-bg) 100%),
        repeating-linear-gradient(
            -12deg,
            transparent,
            transparent 28px,
            rgba(227, 160, 8, 0.03) 28px,
            rgba(227, 160, 8, 0.03) 29px
        );
    animation: mkt-glow 10s ease-in-out infinite alternate;
}

.mkt-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    padding: 7rem 1.25rem 4rem;
}

.mkt-hero-brand {
    margin: 0 0 1rem;
    font-family: "Syne", "DM Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(2.6rem, 8vw, 5.2rem);
    letter-spacing: -0.05em;
    line-height: 0.92;
    color: var(--rw-text);
    animation: mkt-rise 700ms ease both;
}

.mkt-hero-eyebrow {
    margin: 0 0 0.75rem;
    animation: mkt-rise 700ms ease 80ms both;
}

.mkt-hero-title {
    margin: 0 0 1rem;
    max-width: 16ch;
    font-family: "Syne", "DM Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(1.55rem, 3.6vw, 2.35rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    animation: mkt-rise 700ms ease 120ms both;
}

.mkt-hero-lead {
    margin: 0 0 1.75rem;
    max-width: 34rem;
    color: var(--rw-text-muted);
    font-size: 1.08rem;
    line-height: 1.55;
    animation: mkt-rise 700ms ease 220ms both;
}

.mkt-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    animation: mkt-rise 700ms ease 320ms both;
}

.mkt-hero-visual {
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
}

.mkt-hero-track {
    position: relative;
    height: 100%;
    margin: 0 4%;
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--rw-border);
    border-bottom: 0;
    background:
        linear-gradient(180deg, rgba(227, 160, 8, 0.08), transparent 40%),
        var(--rw-surface);
    overflow: hidden;
}

.mkt-hero-lane {
    position: absolute;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rw-primary), transparent);
    opacity: 0.45;
}

.mkt-hero-lane:nth-child(1) { top: 28%; }
.mkt-hero-lane:nth-child(2) { top: 50%; }
.mkt-hero-lane:nth-child(3) { top: 72%; }

.mkt-hero-pulse {
    position: absolute;
    top: 40%;
    left: -20%;
    width: 28%;
    height: 18%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(227, 160, 8, 0.55), transparent 70%);
    filter: blur(8px);
    animation: mkt-dash 4.8s linear infinite;
}

.mkt-section {
    padding: 4.5rem 0;
}

.mkt-section-tight {
    padding-top: 3rem;
}

.mkt-section-alt {
    background:
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--rw-surface) 70%, transparent)),
        var(--rw-bg);
    border-block: 1px solid var(--rw-border);
}

.mkt-section-head {
    max-width: 40rem;
    margin-bottom: 2.5rem;
}

.mkt-section-head h2,
.mkt-section h2,
.mkt-page-hero h1,
.mkt-service h2,
.mkt-price h2,
.mkt-note h3,
.mkt-timeline h2,
.mkt-form-success h2 {
    font-family: "Syne", "DM Sans", sans-serif;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.mkt-section-head h2,
.mkt-section h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.55rem, 3vw, 2rem);
}

.mkt-section-head p,
.mkt-lead {
    margin: 0;
    color: var(--rw-text-muted);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 40rem;
}

.mkt-feature-row {
    display: grid;
    gap: 1.75rem;
}

.mkt-feature {
    padding: 0;
    border: 0;
    background: none;
}

.mkt-feature h3 {
    margin: 0 0 0.45rem;
    font-size: 1.1rem;
    font-weight: 650;
}

.mkt-feature p {
    margin: 0;
    color: var(--rw-text-muted);
    line-height: 1.5;
}

.mkt-feature + .mkt-feature {
    padding-top: 1.5rem;
    border-top: 1px solid var(--rw-border);
}

.mkt-split {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

.mkt-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.mkt-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: baseline;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rw-border);
    color: var(--rw-text);
}

.mkt-steps span {
    font-family: "Syne", "DM Sans", sans-serif;
    font-weight: 700;
    color: var(--rw-primary);
    font-size: 0.95rem;
}

.mkt-cta-band {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 0 0;
    border-top: 1px solid var(--rw-border);
}

.mkt-cta-band-compact {
    margin-top: 3rem;
    padding-top: 2rem;
}

.mkt-cta-band h2 {
    margin: 0 0 0.5rem;
}

.mkt-cta-band p {
    margin: 0;
    color: var(--rw-text-muted);
}

.mkt-text-link {
    color: var(--rw-primary);
    font-weight: 600;
    text-decoration: none;
}

.mkt-text-link:hover {
    text-decoration: underline;
}

.mkt-page-hero {
    padding: 4.5rem 0 2rem;
    background:
        radial-gradient(ellipse 70% 80% at 90% 0%, rgba(227, 160, 8, 0.12), transparent 55%);
    border-bottom: 1px solid var(--rw-border);
}

.mkt-eyebrow {
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rw-primary);
}

.mkt-page-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    max-width: 18ch;
    line-height: 1.08;
}

.mkt-prose {
    max-width: 42rem;
}

.mkt-prose h2 {
    margin: 2.25rem 0 0.75rem;
}

.mkt-prose p,
.mkt-prose li {
    color: var(--rw-text-muted);
    line-height: 1.6;
}

.mkt-prose strong {
    color: var(--rw-text);
}

.mkt-terms-locked {
    margin: 1.25rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--rw-border);
    border-bottom: 1px solid var(--rw-border);
}

.mkt-bullet-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.65rem;
}

.mkt-closing {
    margin-top: 2rem !important;
}

.mkt-service-grid {
    display: grid;
    gap: 1.75rem;
}

.mkt-service {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rw-border);
}

.mkt-service h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.mkt-service p {
    margin: 0;
    color: var(--rw-text-muted);
    line-height: 1.55;
}

.mkt-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    counter-reset: mkt-step;
}

.mkt-timeline li {
    position: relative;
    padding: 0 0 2rem 1.5rem;
    border-left: 2px solid var(--rw-border);
    counter-increment: mkt-step;
}

.mkt-timeline li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 0.45rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rw-primary);
    box-shadow: 0 0 0 4px var(--rw-primary-soft);
}

.mkt-timeline li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.mkt-timeline h2 {
    margin: 0 0 0.45rem;
    font-size: 1.2rem;
}

.mkt-timeline p {
    margin: 0;
    color: var(--rw-text-muted);
    line-height: 1.55;
    max-width: 40rem;
}

.mkt-note {
    margin-top: 3rem;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--rw-border);
}

.mkt-note h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.mkt-note p {
    margin: 0 0 0.75rem;
    color: var(--rw-text-muted);
    max-width: 42rem;
    line-height: 1.55;
}

.mkt-price-grid {
    display: grid;
    gap: 1.5rem;
}

.mkt-price {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rw-border);
}

.mkt-price-featured {
    border-top: 2px solid var(--rw-primary);
    padding-top: 1.35rem;
}

.mkt-price-kind {
    margin: 0 0 0.35rem;
    color: var(--rw-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mkt-price h2 {
    margin: 0 0 0.5rem;
    font-size: 1.45rem;
}

.mkt-price > p {
    margin: 0 0 1rem;
    color: var(--rw-text-muted);
    line-height: 1.5;
}

.mkt-price ul {
    margin: 0 0 1.25rem;
    padding-left: 1.1rem;
    color: var(--rw-text-muted);
    display: grid;
    gap: 0.35rem;
}

.mkt-price-amount {
    margin: 0 0 0.25rem !important;
    color: var(--rw-text) !important;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.mkt-price-basis,
.mkt-price-seat {
    margin: 0 0 0.75rem !important;
    font-size: 0.9rem;
}

.mkt-price-terms {
    margin: 2rem 0 0.75rem;
    max-width: 42rem;
    color: var(--rw-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.mkt-contact-grid {
    display: grid;
    gap: 2.5rem;
}

.mkt-contact-form-wrap {
    max-width: 28rem;
}

.mkt-form {
    display: grid;
    gap: 1rem;
}

.mkt-field {
    display: grid;
    gap: 0.35rem;
}

.mkt-field label {
    font-size: 0.85rem;
    font-weight: 600;
}

.mkt-field input,
.mkt-field select,
.mkt-field textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--rw-border-strong);
    background: var(--rw-surface);
    color: var(--rw-text);
    padding: 0.7rem 0.85rem;
    font: inherit;
}

.mkt-field textarea {
    resize: vertical;
    min-height: 8rem;
}

.mkt-field .validation-message,
.mkt-form .validation-message {
    color: var(--rw-error);
    font-size: 0.85rem;
}

.mkt-form-success {
    padding: 0.5rem 0;
}

.mkt-form-success p {
    color: var(--rw-text-muted);
    line-height: 1.55;
}

.mkt-form-error {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--rw-error) 35%, var(--rw-border));
    background: color-mix(in srgb, var(--rw-error) 10%, transparent);
    color: var(--rw-error);
    font-size: 0.9rem;
    line-height: 1.45;
}

.mkt-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.mkt-recaptcha-note {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--rw-text-muted);
}

.mkt-recaptcha-note a {
    color: inherit;
    text-decoration: underline;
}

/* Hide Google badge on Contact; required notice is shown beside the form */
body:has(.mkt-contact-form-wrap) .grecaptcha-badge {
    visibility: hidden;
}

.mkt-rg-line {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--rw-text-muted);
}

.mkt-rg-line a {
    color: inherit;
    text-decoration: underline;
}

.mkt-faq-item {
    margin-bottom: 1.75rem;
}

.mkt-faq-item h2 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
}

.mkt-faq-item p {
    margin: 0;
    color: var(--rw-text-muted);
    line-height: 1.55;
}

.mkt-rg-help {
    margin-top: 2.5rem;
}

.auth-marketing-rg,
.account-rg {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--rw-text-muted);
}

.auth-marketing-rg a,
.account-rg a {
    color: inherit;
    text-decoration: underline;
}

.mkt-footer {
    margin-top: auto;
    border-top: 1px solid var(--rw-border);
    background: var(--rw-bg-elevated);
    padding: 3rem 0 1.5rem;
}

.mkt-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem 2rem;
    display: grid;
    gap: 2rem;
}

.mkt-footer-brand {
    display: grid;
    gap: 0.65rem;
    justify-items: start;
}

.mkt-footer-brand > span {
    font-family: "Syne", "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}

.mkt-footer-brand p {
    margin: 0;
    color: var(--rw-text-muted);
    max-width: 26rem;
    line-height: 1.5;
    font-size: 0.95rem;
}

.mkt-footer-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.mkt-footer-cols h3 {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rw-text-muted);
}

.mkt-footer-cols a {
    display: block;
    color: var(--rw-text);
    text-decoration: none;
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
}

.mkt-footer-cols a:hover {
    color: var(--rw-primary);
}

.mkt-compliance {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 0.25rem;
    border-top: 1px solid var(--rw-border);
    color: var(--rw-text-muted);
    font-size: 0.85rem;
    line-height: 1.55;
}

.mkt-compliance p {
    margin: 0 0 0.5rem;
    max-width: 52rem;
}

.mkt-compliance a {
    color: var(--rw-primary);
    font-weight: 600;
    text-decoration: none;
}

.mkt-compliance a:hover {
    text-decoration: underline;
}

.mkt-footer-bottom {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1rem 1.25rem 0;
    border-top: 1px solid var(--rw-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    color: var(--rw-text-muted);
    font-size: 0.85rem;
}

.mkt-footer-bottom a {
    color: var(--rw-text-muted);
    text-decoration: none;
}

.mkt-footer-bottom a:hover {
    color: var(--rw-primary);
}

/* Ads LP — age gate + banner */
.mkt-age-banner {
    border-bottom: 1px solid var(--rw-border);
    background: color-mix(in srgb, var(--rw-primary) 12%, var(--rw-bg-elevated));
    padding: 0.7rem 1.25rem;
    text-align: center;
}

.mkt-age-banner p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rw-text);
}

.mkt-age-gate {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--rw-bg) 82%, #000);
    backdrop-filter: blur(10px);
}

.mkt-age-gate-card {
    width: min(100%, 26rem);
    padding: 2rem 1.75rem;
    border-radius: var(--rw-radius-lg);
    border: 1px solid var(--rw-border-strong);
    background: var(--rw-surface);
    box-shadow: var(--rw-shadow-lg);
    text-align: center;
    display: grid;
    gap: 0.85rem;
    justify-items: center;
}

.mkt-age-gate-card h2 {
    margin: 0;
    font-family: "Syne", "DM Sans", sans-serif;
    font-size: 1.75rem;
    letter-spacing: -0.03em;
}

.mkt-age-gate-copy {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--rw-text);
}

.mkt-age-gate-note {
    margin: 0;
    color: var(--rw-text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.mkt-age-blurred {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}

.mkt-hero-ads .mkt-hero-inner {
    padding-top: 0;
}

.mkt-hero-ads {
    min-height: min(78vh, 720px);
}

.mkt-hero-ads.mkt-hero-product .mkt-hero-layout {
    padding-top: 5.5rem;
}

@keyframes mkt-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mkt-glow {
    from { filter: saturate(1); }
    to { filter: saturate(1.25) brightness(1.05); }
}

@keyframes mkt-dash {
    from { transform: translateX(0); opacity: 0.2; }
    15% { opacity: 0.85; }
    to { transform: translateX(420%); opacity: 0.15; }
}

@media (min-width: 900px) {
    .mkt-hero-layout {
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.4fr);
        gap: 1.5rem 1.5rem;
        padding: 7rem 1.25rem 4rem;
        align-items: center;
        max-width: 1280px;
    }

    .mkt-hero-product .mkt-hero-brand {
        /* Two-column layout: keep brand in nav; avoid overflow under showcase */
        display: none;
    }

    .mkt-hero-showcase {
        margin-right: -1rem;
    }

    .mkt-shot-stack > .mkt-shot-front.app-shot {
        width: 86%;
        max-width: 86%;
        /* Sit below the book, shifted right — names stay fully clear */
        margin: 1rem 0 0 14%;
    }

    .mkt-feature-shot {
        width: 100%;
    }

    .mkt-timeline-feature {
        gap: 1.35rem;
        padding-bottom: 2.5rem;
    }
}

@media (min-width: 1100px) {
    .mkt-hero-layout {
        grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.45fr);
        gap: 1.75rem 1.75rem;
    }

    .mkt-hero-showcase {
        margin-right: -2rem;
    }
}

@media (min-width: 720px) {
    .mkt-feature-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .mkt-feature + .mkt-feature {
        padding-top: 0;
        border-top: 0;
        padding-left: 1.5rem;
        border-left: 1px solid var(--rw-border);
    }

    .mkt-service-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2.5rem;
    }

    .mkt-price-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .mkt-price {
        border-bottom: 0;
        padding: 0 1.25rem 0 0;
        border-right: 1px solid var(--rw-border);
    }

    .mkt-price:last-child {
        border-right: 0;
        padding-right: 0;
    }

    .mkt-price-featured {
        border-top: 0;
        padding-top: 0;
        box-shadow: inset 0 2px 0 var(--rw-primary);
        padding-top: 0.85rem;
    }

    .mkt-contact-grid,
    .mkt-split,
    .mkt-footer-inner {
        grid-template-columns: 1.2fr 1fr;
    }

    .mkt-footer-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mkt-cta-band {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 960px) {
    .mkt-nav-toggle {
        display: none;
    }

    .mkt-header-inner {
        padding: 0.95rem 1.5rem;
    }

    .mkt-nav {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.15rem;
        margin-left: auto;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .mkt-nav-link {
        padding: 0.45rem 0.7rem;
    }

    .mkt-nav-actions {
        margin: 0 0 0 0.75rem;
        padding: 0 0 0 0.75rem;
        border-top: 0;
        border-left: 1px solid var(--rw-border);
    }

    .mkt-hero-inner {
        padding: 8.5rem 1.5rem 5rem;
    }

    .mkt-container {
        padding: 0 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mkt-hero-backdrop,
    .mkt-hero-pulse,
    .mkt-hero-brand,
    .mkt-hero-title,
    .mkt-hero-lead,
    .mkt-hero-cta,
    .mkt-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* Blog / guides — list + article layout */
.blog-page-hero .mkt-lead {
    max-width: 40rem;
}

.blog-page {
    padding-top: 2rem;
    padding-bottom: 3.5rem;
}

.blog-page-article {
    padding-top: 1.5rem;
}

.blog-page-title {
    margin: 0 0 0.5rem;
    font-family: "Syne", "DM Sans", sans-serif;
    font-size: 2rem;
    line-height: 1.2;
}

.blog-breadcrumb {
    margin: 0 0 1.5rem;
}

.blog-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    align-items: center;
    color: var(--rw-text-muted);
    font-size: 0.9rem;
}

.blog-breadcrumb-list li:not(:last-child)::after {
    content: "/";
    margin-left: 0.5rem;
    color: var(--rw-text-muted);
    opacity: 0.7;
}

.blog-breadcrumb-list a {
    color: var(--rw-text-muted);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.blog-breadcrumb-list a:hover,
.blog-breadcrumb-list a:focus-visible {
    color: var(--rw-primary);
    text-decoration: underline;
}

.blog-breadcrumb-list [aria-current="page"] {
    color: var(--rw-text);
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-list-empty {
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--rw-border-strong);
    border-radius: var(--rw-radius-lg);
    background:
        radial-gradient(ellipse 80% 120% at 100% 0%, var(--rw-primary-soft), transparent 55%),
        var(--rw-surface);
    text-align: left;
}

.blog-list-empty-text {
    margin: 0;
    max-width: 36rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--rw-text-muted);
}

.blog-list-empty-text a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.blog-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .blog-list-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .blog-list-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.blog-list-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--rw-border);
    border-radius: var(--rw-radius-lg);
    background: var(--rw-surface);
    overflow: hidden;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    min-height: 44px;
}

.blog-list-card:hover {
    border-color: var(--rw-border-strong);
    box-shadow: var(--rw-shadow);
    transform: translateY(-2px);
}

.blog-list-card:focus-visible {
    outline: 2px solid var(--rw-primary);
    outline-offset: 3px;
}

.blog-list-media {
    aspect-ratio: 16 / 9;
    background: var(--rw-surface-2);
    overflow: hidden;
}

.blog-list-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-list-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse 70% 80% at 90% 0%, rgba(227, 160, 8, 0.16), transparent 55%),
        linear-gradient(160deg, var(--rw-surface-2), var(--rw-bg-elevated));
}

.blog-list-fallback-mark {
    font-family: "Syne", "DM Sans", sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--rw-text-muted);
    opacity: 0.7;
}

.blog-list-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.1rem 1.15rem 1.25rem;
    flex: 1;
}

.blog-list-category {
    display: inline-flex;
    align-self: flex-start;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rw-primary);
}

.blog-list-title {
    margin: 0;
    font-family: "Syne", "DM Sans", sans-serif;
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.blog-list-description {
    margin: 0;
    color: var(--rw-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-list-meta {
    margin: auto 0 0;
    padding-top: 0.65rem;
    font-size: 0.85rem;
    color: var(--rw-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    align-items: center;
}

.blog-list-meta-sep,
.blog-article-meta-sep {
    opacity: 0.55;
}

.blog-article {
    max-width: 72ch;
}

.blog-article-header {
    margin-bottom: 1.75rem;
}

.blog-article-category {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rw-primary);
}

.blog-article-title {
    margin: 0 0 0.85rem;
    font-family: "Syne", "DM Sans", sans-serif;
    font-size: clamp(1.85rem, 4vw, 2.55rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.blog-article-dek {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--rw-text-muted);
    max-width: 40rem;
}

.blog-article-meta {
    margin: 0;
    font-size: 0.9rem;
    color: var(--rw-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    align-items: center;
}

.blog-article-hero {
    margin: 0 0 2rem;
    border-radius: var(--rw-radius-lg);
    overflow: hidden;
    border: 1px solid var(--rw-border);
    background: var(--rw-surface-2);
}

.blog-article-hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.blog-article-body {
    max-width: 70ch;
    font-size: 1.05rem;
    line-height: 1.7;
}

.blog-article-body :where(h2, h3, h4) {
    font-family: "Syne", "DM Sans", sans-serif;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 2.1rem 0 0.75rem;
    color: var(--rw-text);
}

.blog-article-body h2 {
    font-size: 1.45rem;
}

.blog-article-body h3 {
    font-size: 1.2rem;
}

.blog-article-body :where(p, ul, ol) {
    margin: 0 0 1.1rem;
    color: var(--rw-text-muted);
}

.blog-article-body :where(ul, ol) {
    padding-left: 1.25rem;
}

.blog-article-body li + li {
    margin-top: 0.4rem;
}

.blog-article-body a {
    color: var(--rw-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.blog-article-body a:hover,
.blog-article-body a:focus-visible {
    text-decoration-thickness: 2px;
}

.blog-article-body strong {
    color: var(--rw-text);
    font-weight: 650;
}

.blog-article-body blockquote {
    margin: 1.5rem 0;
    padding: 0.85rem 1.1rem;
    border-left: 3px solid var(--rw-primary);
    background: var(--rw-primary-soft);
    color: var(--rw-text);
    border-radius: 0 var(--rw-radius) var(--rw-radius) 0;
}

.blog-article-body blockquote p:last-child {
    margin-bottom: 0;
}

.blog-article-body :where(code) {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: var(--rw-surface-2);
    color: var(--rw-text);
}

.blog-article-body pre {
    margin: 1.25rem 0;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    border-radius: var(--rw-radius);
    border: 1px solid var(--rw-border);
    background: var(--rw-bg-elevated);
}

.blog-article-body pre code {
    padding: 0;
    background: transparent;
}

.blog-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0 1.5rem;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
}

.blog-article-body th,
.blog-article-body td {
    border: 1px solid var(--rw-border);
    padding: 0.55rem 0.7rem;
    text-align: left;
}

.blog-article-body th {
    background: var(--rw-surface-2);
    color: var(--rw-text);
    font-weight: 600;
}

.blog-article-body td {
    color: var(--rw-text-muted);
}

.blog-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rw-radius);
    margin: 1rem 0;
}

.blog-article-body hr {
    border: 0;
    border-top: 1px solid var(--rw-border);
    margin: 2rem 0;
}

.blog-article-footer {
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rw-border);
    display: grid;
    gap: 1.5rem;
}

.blog-article-back a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.blog-article-cta {
    padding: 1.25rem 1.35rem;
    border-radius: var(--rw-radius-lg);
    border: 1px solid var(--rw-border);
    background:
        radial-gradient(ellipse 70% 100% at 0% 0%, var(--rw-primary-soft), transparent 55%),
        var(--rw-surface);
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
    align-items: center;
    justify-content: space-between;
}

.blog-article-cta p {
    margin: 0;
    color: var(--rw-text-muted);
    max-width: 28rem;
}

.blog-article-cta .mkt-btn {
    min-height: 44px;
}

.mkt-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--rw-radius);
    border: 1px solid var(--rw-border);
    background: transparent;
    color: var(--rw-text);
    cursor: pointer;
}

.mkt-theme-btn:hover {
    border-color: var(--rw-border-strong);
    background: var(--rw-surface-hover);
}

.mkt-theme-btn:focus-visible {
    outline: 2px solid var(--rw-primary);
    outline-offset: 2px;
}

.mkt-theme-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.mkt-theme-btn .icon-sun { display: none; }
.mkt-theme-btn .icon-moon { display: block; }

:root[data-theme="dark"] .mkt-theme-btn .icon-sun { display: block; }
:root[data-theme="dark"] .mkt-theme-btn .icon-moon { display: none; }

html.mkt-nav-lock {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .blog-list-card {
        transition: none;
    }

    .blog-list-card:hover {
        transform: none;
    }
}

/* Closed race page: the result panel takes the full width when the (admin-only) video panel is absent. */
.race-closed-panels:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
}

.live-order-alert.mud-alert {
    border-radius: 0;
    border-width: 0 0 1px 0;
    padding: 0.35rem 0.75rem 0.35rem 1rem;
}

.live-order-alert .mud-alert-message {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.live-order-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--mud-palette-text-primary);
}

/* Live orders: allow long venue / dog names to wrap instead of ellipsis. */
.live-order-alert .widget-list-main .mud-typography {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
}

.live-order-dismiss.mud-icon-button {
    flex: 0 0 auto;
    align-self: center;
    margin-inline-start: auto;
    color: var(--mud-palette-action-default);
}

@media (max-width: 599px) {
    .live-order-row {
        flex-wrap: wrap;
    }

    .live-order-row .live-order-side {
        max-width: 100%;
        justify-content: flex-start;
    }

    /* Touch-friendly dismiss hit area without bloating the desktop row. */
    .live-order-dismiss.mud-icon-button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }
}

/* Admin AI models: keep wide tables usable at 1024px and 320–599px without page overflow. */
.admin-ai-models .admin-ai-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.admin-ai-models .admin-ai-table-scroll .mud-table {
    min-width: 40rem;
}

.admin-ai-models .admin-ai-effective {
    width: 100%;
}

@media (max-width: 599px) {
    .admin-ai-models .admin-ai-table-scroll .mud-table {
        min-width: 28rem;
    }

    .admin-ai-models .page-header-actions,
    .admin-ai-models .mud-button-group {
        flex-wrap: wrap;
    }
}