/* /Components/Dialogs/SetupNameIconDialog.razor.rz.scp.css */
/* Icon + color pickers for the setup name/icon dialog (RSS-2430). */
.snid-icons[b-c4ox05lnjb],
.snid-colors[b-c4ox05lnjb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

/* The swatches are native <button>s (RSS-2457) — reset the UA chrome so they look like plain swatches. */
.snid-ip[b-c4ox05lnjb],
.snid-cp[b-c4ox05lnjb] {
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.snid-ip[b-c4ox05lnjb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    cursor: pointer;
}

.snid-ip:hover[b-c4ox05lnjb] {
    background: var(--rz-base-200);
}

.snid-ip.sel[b-c4ox05lnjb] {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
}

.snid-cp[b-c4ox05lnjb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--rz-base-300);
    border-radius: 50%;
    cursor: pointer;
}

.snid-cp:hover[b-c4ox05lnjb] {
    filter: brightness(0.92);
}

.snid-cp.sel[b-c4ox05lnjb] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 1px;
}

/* Keyboard users need to see which swatch is focused — the pickers are role="button" spans (RSS-2457). */
.snid-ip:focus-visible[b-c4ox05lnjb],
.snid-cp:focus-visible[b-c4ox05lnjb] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

/* The "default color" swatch shows a reset glyph instead of a fill. */
.snid-cp[b-c4ox05lnjb]  .rzi {
    font-size: 1rem;
    color: var(--rz-text-secondary-color);
}
/* /Components/Layout/ConnectivityIndicator.razor.rz.scp.css */
/* Header offline/sync indicator (RSS-2106): sit the icon centered in the header bar with a little breathing
   room before the profile menu. .conn-indicator is the component's own element, so no ::deep needed. */
.conn-indicator[b-jwk6dqtqbq] {
    display: inline-flex;
    align-items: center;
    cursor: default;
    margin-inline: 0.75rem 0.5rem;
    font-size: 1.5rem;
}
/* /Components/Pages/BikeSetupConfiguration.razor.rz.scp.css */
/* Component-scoped styles for BikeSetupConfiguration (RSS-2103 follow-up).
   Migrated from the page-scoped body <link> (wwwroot/css/bike-setup-configuration.css): that link
   was removed on navigate-away and re-fetched on return, which left the page unstyled offline when
   the re-fetch missed the service-worker cache. As CSS isolation this compiles into the always-loaded
   OrangeCat.Web.Client.styles.css bundle (one <head> link, cached with the shell), so it loads once
   and never re-fetches on navigation.

   Every rule is prefixed with ::deep because the targets are descendants of the page's scoped root
   (.bike-setup-scope): most are Radzen-rendered grid cells/rows whose CssClass-applied classes
   (.setting-changed, .focused-row, .*-column, .rz-*) never carry the isolation scope attribute. The
   ::deep scope reproduces the old 'only while this page is mounted' containment without leaking the
   unscoped .rz-* overrides app-wide. */

[b-at1pf4kcrq] .setting-changed {
	background-color: var(--rz-warning) !important;
	color: black !important;
	--rz-input-color: black;
	margin: 1px;
}

[b-at1pf4kcrq] .setting-changed .rz-chkbox-box .rzi {
	color: black !important;
}

[b-at1pf4kcrq] .rz-chkbox-box .rzi {
	color: var(--rz-input-value-color);
}

[b-at1pf4kcrq] .shrunk-icon-button {
	transform: scale(0.75);
	margin: -4px !important;
	padding: 0 !important;
	min-width: 24px !important;
}

[b-at1pf4kcrq] .shrunk-icon-button:hover {
	transform: scale(0.85);
	margin: -4px !important;
	padding: 0 !important;
	min-width: 24px !important;
}

[b-at1pf4kcrq] .rz-inputnumber .rz-inputnumber-button {
	opacity: 1 !important;
	visibility: visible !important;
}

[b-at1pf4kcrq] .setup-datagrid {
	flex: 1;
	overflow: hidden;
}

[b-at1pf4kcrq] .setup-datagrid .rz-numeric-input,
[b-at1pf4kcrq] .setup-datagrid .rz-spinner-input,
[b-at1pf4kcrq] .setup-datagrid .rz-textbox,
[b-at1pf4kcrq] .setup-datagrid .rz-datepicker input,
[b-at1pf4kcrq] .setup-datagrid .rz-numeric,
[b-at1pf4kcrq] .setup-datagrid .rz-spinner,
[b-at1pf4kcrq] .setup-datagrid .rz-chkbox-box {
	padding: 0 !important;
	height: 1.2rem;
	font-size: 0.8rem;
	min-height: auto;
	line-height: 1;
	margin: 0;
	border: none !important;
	box-shadow: none !important;
	display: inline-flex !important;
	align-items: center !important;
	background-color: transparent !important;
}

[b-at1pf4kcrq] .setup-datagrid .rz-chkbox-box {
	width: 1rem !important;
	height: 1rem !important;
	justify-content: center !important;
	border: 1px solid var(--neutral-stroke-rest) !important;
	margin: auto !important;
}

[b-at1pf4kcrq] .setup-datagrid .rz-spinner-button {
	width: 1.5rem;
	height: 0.75rem;
	min-height: 0;
}

[b-at1pf4kcrq] .setup-datagrid .rz-spinner-button .rz-spinner-button-icon {
	font-size: 0.6rem;
}

[b-at1pf4kcrq] .setup-datagrid .rz-helper-text {
	display: none;
}

[b-at1pf4kcrq] .setup-datagrid .rz-column-title {
	padding: 0;
	margin: 0;
}

[b-at1pf4kcrq] .setup-datagrid .rz-cell-data,
[b-at1pf4kcrq] .setup-datagrid .rz-header-cell-content {
	padding: 0 !important;
	line-height: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}

[b-at1pf4kcrq] .setup-datagrid .rz-form-field {
	padding: 0 !important;
	margin: 0;
	border: none !important;
	box-shadow: none !important;
	font-size: 0.8rem;
	line-height: 1;
	display: flex !important;
	align-items: center !important;
	justify-content: center;
	width: 100%;
	background-color: transparent !important;
}

[b-at1pf4kcrq] .setup-datagrid .rz-form-field-content,
[b-at1pf4kcrq] .setup-datagrid .rz-form-field-wrapper {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	font-size: 0.8rem;
	line-height: 1;
	border: none !important;
	box-shadow: none !important;
	display: inline-flex !important;
	align-items: center !important;
	width: 100%;
	background-color: transparent !important;
}

[b-at1pf4kcrq] .setup-datagrid .rz-form-field-wrapper:before,
[b-at1pf4kcrq] .setup-datagrid .rz-form-field-wrapper:after {
	padding: 0 !important;
	height: 1.2rem;
	min-height: auto;
	line-height: 1;
	margin: 0;
	border: none !important;
	box-shadow: none !important;
	display: inline-flex !important;
	align-items: center !important;
}

[b-at1pf4kcrq] .setup-datagrid .rz-form-field-label {
	display: none;
}

[b-at1pf4kcrq] .loading-container,
[b-at1pf4kcrq] .error-card {
	padding: 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

[b-at1pf4kcrq] .loading-container {
	height: 100%;
	justify-content: center;
}

[b-at1pf4kcrq] .unit-header-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative !important;
	overflow: visible !important;
}

[b-at1pf4kcrq] .setup-header {
	display: flex;
	justify-content: start;
	align-items: flex-start;
	margin-bottom: 0;
}

[b-at1pf4kcrq] .vertical-text-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	overflow: visible;
}

[b-at1pf4kcrq] .vertical-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: normal;
	font-weight: bold;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
	max-height: 100%;
	min-height: 40px;
}

[b-at1pf4kcrq] .horizontal-text {
	writing-mode: horizontal-tb;
	transform: none;
	white-space: normal;
	font-weight: bold;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
	max-height: 100%;
}

[b-at1pf4kcrq] .vertical-text span,
[b-at1pf4kcrq] .horizontal-text span {
	display: block;
	font-size: 0.6rem;
	text-align: center;
	max-height: 100%;
	width: 100%;
	overflow-wrap: break-word;
	color: black !important;
}

[b-at1pf4kcrq] .spanned-cell {
	vertical-align: middle !important;
	font-weight: bold !important;
	padding: 0 !important;
	overflow: visible !important;
}

/* Force Radzen's internal cell container to fill height and be visible for spanned cells */
[b-at1pf4kcrq] .spanned-cell .rz-cell-data {
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	overflow: visible !important;
	width: 100% !important;
}

[b-at1pf4kcrq] .event-info h3 {
	margin: 0 0 8px 0;
	color: var(--accent-fill-rest);
}

[b-at1pf4kcrq] .event-details {
	font-size: 0.9rem;
}

[b-at1pf4kcrq] .header-actions {
	display: flex;
	/* Allow the group to shrink and its buttons to wrap onto extra rows when the header is
	   cramped; justify-content keeps every row flush right. */
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 4px 8px;
}

/* Header layout: [tabs][session ribbon][actions] on wide screens. When the row gets tight,
   drop the ribbon onto its own full-width line below the tabs, keeping the tabs and the action
   group on the top row (actions flush right). A container query is used so the breakpoint tracks
   the content width itself, independent of whether the sidebar is open or collapsed. */
/* Fill the body below the app header so only the grid scrolls, never the page. Height accounts
   for the app header (48px) and the .content vertical padding (2×8px). The header row takes its
   natural height (one or two rows) and the grid card flexes to fill whatever remains. */
[b-at1pf4kcrq] .setup-page-fill {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 64px);
	min-height: 0;
}

/* The offline/syncing banner is a flex child of the fixed-height fill column: it takes its natural
   height (never grows/shrinks) so the grid card flexes to absorb it — no page scrollbar (RSS-2087). */
[b-at1pf4kcrq] .setup-page-alert {
	flex: 0 0 auto;
	margin-bottom: 2px;
}

[b-at1pf4kcrq] .setup-header-bar {
	container-type: inline-size;
	/* Sit just above the datagrid — 2px gap to the grid card. */
	margin-bottom: 2px;
}

/* In this header the tab strip shares the row with the ribbon/actions, so drop its default
   bottom margin; the rows pack tightly and the header-bar margin handles the gap to the grid. */
[b-at1pf4kcrq] .setup-header-bar .bike-setup-tabs {
	margin-bottom: 0;
}

/* Remove the card's default margin so the 2px header gap is the only space above the grid. */
[b-at1pf4kcrq] .setup-grid-card {
	margin: 0;
}

/* One header arrangement at EVERY width (RSS-2430): the actions sit on the top row beside the tabs —
   the group fills the rest of that row (flex-grow) and wraps its own buttons internally (min-width:0)
   — and the session ribbon takes a full-width line of its own below. These rules used to apply only
   under a 1280px container query, so resizing the window flipped the toolbar and the session chips
   around each other. */
[b-at1pf4kcrq] .setup-header-bar > .header-actions {
	order: 1;
	flex: 1 1 0;
	min-width: 0;
}

[b-at1pf4kcrq] .setup-header-bar > .setup-toolbar {
	order: 2;
	flex-basis: 100%;
}

[b-at1pf4kcrq] .controls {
	display: flex;
	gap: 10px;
}

[b-at1pf4kcrq] .rz-datatable {
	border: 1px solid var(--neutral-stroke-rest);
	height: 100%;
	display: flex;
	flex-direction: column;
}

[b-at1pf4kcrq] .rz-datatable .rz-datatable-scrollable-wrapper {
	flex: 1;
	overflow: auto;
}

[b-at1pf4kcrq] .rz-grid-table {
	width: auto;
}

[b-at1pf4kcrq] .rz-grid-table td,
[b-at1pf4kcrq] .rz-datatable-data td {
	padding: 0 !important;
	line-height: 1;
}

[b-at1pf4kcrq] .rz-grid-table td .rz-cell-data,
[b-at1pf4kcrq] .rz-datatable-data td .rz-cell-data {
	padding: 0 !important;
}

[b-at1pf4kcrq] .rz-datatable-data tr:nth-child(even) {
	background-color: var(--neutral-fill-subtle-rest);
}

[b-at1pf4kcrq] .rz-datatable-data tr:hover:not(.focused-row) {
	background-color: var(--neutral-fill-hover);
}

[b-at1pf4kcrq] .rz-datatable-header .rz-datatable-header-cell {
	background-color: var(--neutral-fill-input-rest);
	border-bottom: 2px solid var(--accent-fill-rest);
	padding: 0;
	line-height: 1;
}

[b-at1pf4kcrq] .rz-datatable-header .rz-datatable-header-cell.rz-composite-header {
	background-color: var(--accent-fill-subtle);
	font-weight: bold;
}

[b-at1pf4kcrq] .rz-datatable .rz-col-icon {
	width: 1rem;
}

[b-at1pf4kcrq] td.rz-composite-cell {
	padding: 2px;
}

[b-at1pf4kcrq] .setup-datagrid .setup-setting-column,
[b-at1pf4kcrq] .setup-datagrid .setup-setting-column .rz-cell-data,
[b-at1pf4kcrq] .setup-datagrid .setup-setting-column .rz-column-title {
	font-size: .8rem !important;
	padding: 0 !important;
}

/* Frozen left columns must always stack above the z-index:1 that hovering applies to data cells.
   Hovering a value/setting adds .focused-setting-label (position:relative; z-index:1) to that
   setting's .internal-setting-cell in EVERY column — including ones scrolled under the frozen
   category/subcategory columns — and also adds .focused-row (data cells get z-index:1). Radzen's
   DataGrid sets the frozen cells' z-index:1 as an INLINE style at runtime, so a plain stylesheet
   z-index:2 here is overridden by that inline value and never takes effect; the hovered cells then
   tie the frozen cell at z-index:1 and, being later in DOM order, paint their content through it
   (data bleeds into the category cell when scrolled right). !important is required to beat the
   inline z-index and lift every frozen cell above the hover's z-index:1 — unconditionally, since
   the rowspan'd category cell often belongs to a row other than the hovered one. */
[b-at1pf4kcrq] .setup-datagrid td.rz-frozen-cell {
	z-index: 2 !important;
}

/* Highlight TOP and BOTTOM for all non-category/subcategory/frozen cells */
[b-at1pf4kcrq] .focused-row td:not(.category-column):not(.subcategory-column):not(.rz-frozen-cell) {
	box-shadow: inset 0 1px 0 0 var(--accent-fill-rest), inset 0 -1px 0 0 var(--accent-fill-rest) !important;
	z-index: 1;
}

/* Highlight LEFT for the first descriptive cell (Setting Name) */
[b-at1pf4kcrq] .focused-row td.setting-name-column,
[b-at1pf4kcrq] .focused-row td.rz-frozen-cell[colspan] {
	box-shadow: inset 1px 0 0 0 var(--accent-fill-rest), inset 0 1px 0 0 var(--accent-fill-rest), inset 0 -1px 0 0 var(--accent-fill-rest) !important;
	z-index: 1;
}

/* Separate rule for unit column if it's frozen and needs highlight */
[b-at1pf4kcrq] .focused-row td.unit-column.rz-frozen-cell {
	box-shadow: inset 0 1px 0 0 var(--accent-fill-rest), inset 0 -1px 0 0 var(--accent-fill-rest) !important;
	z-index: 1;
}

/* Highlight RIGHT for the last cell */
[b-at1pf4kcrq] .focused-row td:last-child:not(.rz-frozen-cell) {
	box-shadow: inset -1px 0 0 0 var(--accent-fill-rest), inset 0 1px 0 0 var(--accent-fill-rest), inset 0 -1px 0 0 var(--accent-fill-rest) !important;
	z-index: 1;
}

/* Combined highlight for cells that are BOTH first-descriptive AND last-child */
[b-at1pf4kcrq] .focused-row td.setting-name-column:last-child {
	box-shadow: inset 1px 0 0 0 var(--accent-fill-rest), inset -1px 0 0 0 var(--accent-fill-rest), inset 0 1px 0 0 var(--accent-fill-rest), inset 0 -1px 0 0 var(--accent-fill-rest) !important;
	z-index: 1;
}

/* Ensure category/subcategory NEVER have the blue highlight */
[b-at1pf4kcrq] .focused-row td.category-column,
[b-at1pf4kcrq] .focused-row td.subcategory-column,
[b-at1pf4kcrq] .focused-row td:has(.vertical-text) {
	box-shadow: none !important;
	border-top: none !important;
	border-bottom: none !important;
	z-index: 2 !important;
}

[b-at1pf4kcrq] .focused-row td.rz-frozen-cell {
	z-index: 2 !important;
}

[b-at1pf4kcrq] .setup-datagrid .rz-textarea {
	background-color: transparent !important;
}

[b-at1pf4kcrq] .rz-datatable-data tr.focused-row {
	background-color: var(--accent-fill-subtle) !important;
}

[b-at1pf4kcrq] .focused-setting-label {
	outline: 1px solid var(--accent-fill-rest) !important;
	outline-offset: -1px;
	background-color: var(--accent-fill-subtle) !important;
	border-radius: 2px;
	position: relative;
	z-index: 1;
	display: inline-block;
	line-height: 1.3;
	padding-bottom: 1px;
}

[b-at1pf4kcrq] .internal-setting-cell.focused-setting-label.setting-changed {
	background-color: var(--rz-warning) !important;
}

[b-at1pf4kcrq] .setup-datagrid .setup-setting-column .rz-cell-data {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

[b-at1pf4kcrq] .setup-datagrid .setup-setting-name-column .rz-cell-data {
	align-items: center;
	padding-left: 0 !important;
}

[b-at1pf4kcrq] .setting-group-container {
	display: grid !important;
	gap: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

[b-at1pf4kcrq] .internal-setting-cell {
	border: none;
	background-color: transparent;
	border-radius: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-height: 20px;
	position: relative;
}

/* Ensure inputs inside the cell inherit the cell's foreground color */
[b-at1pf4kcrq] .internal-setting-cell .rz-inputtext,
[b-at1pf4kcrq] .internal-setting-cell input[type="text"],
[b-at1pf4kcrq] .internal-setting-cell input[type="number"] {
	color: inherit !important;
}

[b-at1pf4kcrq] .setting-label-box,
[b-at1pf4kcrq] .unit-label-box {
	padding: 0 2px 1px 2px;
	margin: 0 1px;
	display: inline-block;
	font-size: 0.7rem;
	line-height: 1.3;
	white-space: nowrap;
}

[b-at1pf4kcrq] .setting-vertical-divider {
	border-left: 1px solid var(--neutral-stroke-rest);
	height: 12px;
	margin: 0 4px;
	align-self: center;
	opacity: 0.6;
}

[b-at1pf4kcrq] .setting-horizontal-divider {
	border-top: 1px solid var(--neutral-stroke-rest);
	width: 100%;
	margin: 2px 0;
	opacity: 0.6;
}

[b-at1pf4kcrq] .setting-label-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	justify-content: center;
	width: 100%;
}

[b-at1pf4kcrq] .outing-header-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	gap: 2px;
}

[b-at1pf4kcrq] .outing-lap-info {
	font-size: 0.75rem;
	opacity: 0.8;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

[b-at1pf4kcrq] .outing-lap-info.best-lap {
	color: black;
	background-color: lightgreen;
}

[b-at1pf4kcrq] .cell-center {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative;
}

[b-at1pf4kcrq] .setting-centered-text {
	white-space: pre-line;
	text-align: center;
	width: 100%;
}

[b-at1pf4kcrq] .rz-custom-header {
	width: 100%;
}

/* Crew notes and job list cells */
[b-at1pf4kcrq] .cc-notes-cell {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0.25rem;
	gap: 0.25rem;
	width: 100%;
	height: 100%;
	text-align: left;
}

[b-at1pf4kcrq] .cc-crew-note-entry {
	font-size: 0.8rem;
	padding: 0.2rem 0;
	border-bottom: 1px solid var(--rz-base-200);
}

[b-at1pf4kcrq] .cc-crew-note-entry:last-child {
	border-bottom: none;
}

[b-at1pf4kcrq] .cc-crew-note-role {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rz-text-secondary-color);
	margin-bottom: 2px;
}

[b-at1pf4kcrq] .cc-crew-note-text {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: break-word;
	font-size: 0.8rem;
}

[b-at1pf4kcrq] .cc-empty-notes {
	font-size: 0.8rem;
	color: var(--rz-text-secondary-color);
	font-style: italic;
}

[b-at1pf4kcrq] .cc-job-item {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8rem;
	padding: 0.1rem 0;
	border-bottom: 1px solid var(--rz-base-200);
}

[b-at1pf4kcrq] .cc-job-item:last-child {
	border-bottom: none;
}

[b-at1pf4kcrq] .cc-job-done {
	opacity: 0.6;
}

[b-at1pf4kcrq] .cc-job-text {
	flex: 1;
	word-break: break-word;
	white-space: normal;
	overflow-wrap: break-word;
}

[b-at1pf4kcrq] .cc-job-done .cc-job-text {
	text-decoration: line-through;
}

[b-at1pf4kcrq] .cc-setup-badge {
	font-size: 0.55rem;
	font-weight: 700;
	padding: 0.1rem 0.3rem;
	border-radius: 2px;
	text-transform: uppercase;
	background: var(--rz-warning-lighter);
	color: var(--rz-warning-dark);
	border: 1px solid var(--rz-warning);
	white-space: nowrap;
	flex-shrink: 0;
}

[b-at1pf4kcrq] .cc-add-job-row {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	border-top: 1px dashed var(--rz-base-300);
	padding-top: 0.25rem;
	margin-top: 0.1rem;
}

[b-at1pf4kcrq] .cc-add-job-row .rz-textbox {
	font-size: 0.8rem !important;
	padding: 0.1rem 0.25rem !important;
	height: auto !important;
	min-height: auto !important;
}

[b-at1pf4kcrq] .cc-add-job-row .rz-textbox::placeholder {
	font-style: italic;
}

/* Subtle warning tint across every column (header + cells) of the focused session, set via the
   column CssClass/HeaderCssClass. Cells with their own background (e.g. changed values) win:
   those backgrounds paint on inner .internal-setting-cell divs that sit above this td tint.
   Opaque, but built by mixing the warning hue into the page background rather than using
   --rz-warning-lighter (which is a bright, saturated amber in dark themes that clashes with
   white text). This yields pale yellow in light mode and a muted dark-amber in dark mode, so
   the tint echoes the focused session chip (ButtonStyle.Warning) while keeping cell text
   legible in both. */
[b-at1pf4kcrq] .setup-datagrid .session-focus-col {
	background-color: color-mix(in srgb, var(--rz-warning) 15%, var(--rz-base-background-color)) !important;
}

/* Per-run alternate-setup pills (RSS-2413) moved to RunSetupPills.razor.css with the component. */
/* /Components/Pages/EventLeaderboardBoard.razor.rz.scp.css */
/* Big-screen event leaderboard (RSS-2470). Keeps the app's Radzen look — this is the dashboard card scaled
   up, not a separate broadcast theme like RaceReplay/LiveMonitor — and sizes every row so the whole field
   fits one screen with no scrolling.

   The sizing is pure CSS off 100vh, with the rider count handed in by the component as the inline custom
   property --oc-lb-rows. No JS measurement and no resize listener: the browser recomputes on window resize
   and on entering/leaving fullscreen for free.

   Everything below the root needs ::deep — the targets are rendered by Radzen child components, so they
   never carry this file's CSS-isolation scope attribute (same reasoning as BikeSetupConfiguration.razor.css). */

.oc-lb-board[b-b35ltyo5s2] {
    /* Vertical budget the rows must work within. --oc-lb-chrome is the app shell's header and padding, the
       same 7rem allowance RaceReplay and LiveMonitor assume; --oc-lb-head covers the card's padding, its
       "Leaderboard - {event}" heading and the grid's own header row. Both are custom properties rather than
       baked-in numbers precisely so the :fullscreen rule below can reclaim the chrome by overriding one
       value — custom properties inherit, so the change reaches the card and rows inside the child component. */
    --oc-lb-chrome: 7rem;
    --oc-lb-head: 8.5rem;
    height: calc(100vh - var(--oc-lb-chrome));
    position: relative;
    overflow: hidden;
}

.oc-lb-board:fullscreen[b-b35ltyo5s2] {
    --oc-lb-chrome: 0rem;
    height: 100vh;
    padding: 1rem;
    /* A fullscreen element gets a black backdrop by default, which reads as a white card floating in a void
       under the light Radzen theme. Paint the theme's own background instead. */
    background: var(--rz-base-background-color, #fff);
}

.oc-lb-center[b-b35ltyo5s2] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Fullscreen toggle, mirroring LiveMonitor's .lm-fs-btn, pinned top-right and out of the rows' way. */
.oc-lb-fs-btn[b-b35ltyo5s2] {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    transition: background 0.12s;
}

.oc-lb-fs-btn:hover[b-b35ltyo5s2] {
    background: var(--rz-base-300, rgba(0, 0, 0, 0.08));
}

/* Save as PDF sits just left of the fullscreen toggle, sharing its look. */
.oc-lb-print-btn[b-b35ltyo5s2] {
    right: 3.4rem;
}

.oc-lb-print-btn:disabled[b-b35ltyo5s2] {
    cursor: progress;
    opacity: 0.5;
}

/* ── Fit-to-screen sizing ────────────────────────────────────────────────────
   --oc-lb-rows is set inline on the card by EventLeaderboard in board mode, and is never zero (the component
   renders the grid only when it has entries). clamp() covers both ends: a big field shrinks to the floor
   rather than scrolling, and a small field stops growing rather than becoming absurd.

   The 5.5rem cap is what a small field lands on. Raising it trades whitespace below a short field for taller
   rows.

   Text is deliberately NOT scaled here: the board uses the dashboard's font sizes verbatim (the grid's
   1.25rem cell size, and Radzen's defaults for column titles, the card heading and the trophy icons). Row
   height and the avatars are the only things that grow to fill the screen. */
.oc-lb-board[b-b35ltyo5s2]  .oc-lb-fit {
    --oc-lb-row-h: clamp(2.25rem,
        calc((100vh - var(--oc-lb-chrome) - var(--oc-lb-head)) / var(--oc-lb-rows)),
        5.5rem);
    --oc-lb-avatar: calc(var(--oc-lb-row-h) * 0.8);
}

.oc-lb-board[b-b35ltyo5s2]  .oc-lb-fit .rz-data-row td {
    height: var(--oc-lb-row-h);
}

/* Nobody sorts a TV, and the arrows only add clutter at this size. */
.oc-lb-board[b-b35ltyo5s2]  .oc-lb-fit .rz-sortable-column-icon {
    display: none;
}

/* ── Filling the screen ──────────────────────────────────────────────────────
   Chain a definite height from the root down to the grid. Radzen already makes .rz-data-grid a flex column
   whose .rz-data-grid-data child is `flex: 1; overflow: auto`, so this hands the grid a real height and the
   data area becomes the scroll container. That matters as a safety valve: if --oc-lb-head under-estimates the
   header allowance, or a field is long enough to hit the clamp() floor, the rows scroll inside the grid
   instead of being silently clipped by the root's overflow. */
.oc-lb-board[b-b35ltyo5s2]  .rz-row {
    margin: 0;
    height: 100%;
}

.oc-lb-board[b-b35ltyo5s2]  .oc-lb-fit.rz-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.oc-lb-board[b-b35ltyo5s2]  .oc-lb-fit .rz-data-grid {
    flex: 1 1 auto;
    min-height: 0;
}
/* /Components/Pages/EventsList.razor.rz.scp.css */
.events-timeline[b-0qjetiejld] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 1180px;
    margin: 0 auto;
}

/* ── Hero row ───────────────────────────────────────── */
.hero-row[b-0qjetiejld] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* ── Hero card ─────────────────────────────────────── */
.next-event-hero[b-0qjetiejld] {
    flex: 1;
    min-width: 280px;
    /* --rz-primary goes light/pastel in dark mode; anchor to --rz-primary-dark which
       stays #375a8b (dark blue) in both themes so white text is always legible. */
    background: #1a3560;
    /* Override --rz-on-primary locally: in dark mode the theme sets it to dark navy
       (#001f5d) for use on the pastel primary, but our dark-background heroes need white. */
    --rz-on-primary: #fff;
    border-radius: var(--rz-border-radius);
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.15s, filter 0.15s;
}

.next-event-hero:hover[b-0qjetiejld] {
    filter: brightness(1.06);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    color: #fff;
    text-decoration: none;
}

.hero-info[b-0qjetiejld] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hero-label[b-0qjetiejld] {
    font-size: 0.75rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.65;
}

.hero-name[b-0qjetiejld] {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: inherit;
    letter-spacing: -0.01em;
}

.hero-meta[b-0qjetiejld] {
    font-size: 0.875rem;
    color: inherit;
    opacity: 0.8;
    margin-top: 0.1rem;
}

.hero-sep[b-0qjetiejld] {
    margin: 0 0.35rem;
    opacity: 0.5;
}

.hero-countdown[b-0qjetiejld] {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.hero-cd-box[b-0qjetiejld] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    min-width: 4rem;
}

.hero-cd-n[b-0qjetiejld] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.hero-cd-u[b-0qjetiejld] {
    font-size: 0.75rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.7;
    margin-top: 0.25rem;
}

.hero-cd-today[b-0qjetiejld] {
    font-size: 1.75rem;
    font-weight: 800;
    color: inherit;
    letter-spacing: -0.01em;
}

.hero-live-btn[b-0qjetiejld] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.4);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.hero-live-btn:hover[b-0qjetiejld] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.55);
}

/* ── Filter bar ─────────────────────────────────────── */
.filter-bar[b-0qjetiejld] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--rz-body-background-color);
    border-bottom: 1px solid var(--rz-base-300);
    padding: 0.6rem 0;
    margin-bottom: 1rem;
}

.filter-bar-row[b-0qjetiejld] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.chip-group[b-0qjetiejld] {
    display: flex;
    gap: 0.25rem;
}

.kind-chip[b-0qjetiejld],
.class-chip[b-0qjetiejld],
.season-jump[b-0qjetiejld] {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--rz-base-300);
    background: transparent;
    color: var(--rz-text-color);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.kind-chip:hover[b-0qjetiejld],
.class-chip:hover[b-0qjetiejld],
.season-jump:hover[b-0qjetiejld] {
    background: var(--rz-base-200);
}

.kind-chip.active[b-0qjetiejld],
.class-chip.active[b-0qjetiejld] {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-on-primary);
}

.season-jumps[b-0qjetiejld] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.season-jump[b-0qjetiejld] {
    border-radius: var(--rz-border-radius);
}

/* ── Season group ───────────────────────────────────── */
.season-group[b-0qjetiejld] {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid var(--rz-base-300);
    margin-bottom: 1.5rem;
    /* clear the sticky filter bar when jumped to via the year buttons */
    scroll-margin-top: 4rem;
}

.season-header[b-0qjetiejld] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    margin-left: -1.5rem;
    padding-left: 1.25rem;
}

.season-header[b-0qjetiejld]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rz-base-300);
}

.season-year[b-0qjetiejld] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.season-count[b-0qjetiejld] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* ── Month marker ───────────────────────────────────── */
.month-marker[b-0qjetiejld] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    /* pull back padding + center 10px dot on 2px border: -(1.5rem padding) - (5px half-dot) - (1px to border center) */
    margin-left: calc(-1.5rem - 6px);
}

.month-dot[b-0qjetiejld] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rz-base-400);
    flex-shrink: 0;
}

.month-name[b-0qjetiejld] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

/* ── Event card ─────────────────────────────────────── */
.event-card[b-0qjetiejld] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--rz-border-radius);
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    margin-bottom: 0.5rem;
    position: relative;
    cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.event-card:hover[b-0qjetiejld] {
    border-color: var(--rz-primary-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.event-card.upcoming[b-0qjetiejld] {
    border-style: dashed;
    border-color: var(--rz-primary-light);
}


/* ── Date box ───────────────────────────────────────── */
.date-box[b-0qjetiejld] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    padding: 0.25rem 1rem 0.25rem 0.25rem;
    border-right: 1px solid var(--rz-base-300);
    align-self: stretch;
    line-height: 1.1;
    flex-shrink: 0;
}

.date-month[b-0qjetiejld] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.date-day[b-0qjetiejld] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rz-text-color);
    font-variant-numeric: tabular-nums;
}

/* ── Event body ─────────────────────────────────────── */
.event-body[b-0qjetiejld] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.event-title-row[b-0qjetiejld] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.event-name[b-0qjetiejld] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rz-text-color);
    text-decoration: none;
}

.event-name:hover[b-0qjetiejld] {
    color: var(--rz-primary);
}

.kind-badge[b-0qjetiejld] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.kind-badge.kind-race[b-0qjetiejld] {
    background: #c53030;
    color: #fff;
}

.kind-badge.kind-test[b-0qjetiejld] {
    background: transparent;
    color: var(--rz-text-secondary-color);
    border: 1px solid var(--rz-base-300);
}

.class-dot[b-0qjetiejld] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--rz-base-300);
    color: var(--rz-text-color);
    letter-spacing: 0.04em;
}

.event-meta[b-0qjetiejld] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.meta-sep[b-0qjetiejld] {
    margin: 0 0.3rem;
    opacity: 0.5;
}

.notes-chip[b-0qjetiejld] {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.1rem 0;
}

/* ── Edit / delete actions ──────────────────────────── */
.event-actions[b-0qjetiejld] {
    display: flex;
    gap: 0.1rem;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

.event-card:hover .event-actions[b-0qjetiejld] {
    opacity: 1;
}

/* Hero (Next/Current Event) cards key off the class color when one is set, with the auto-derived readable
   text color; children already use `color: inherit`, so only the countdown chip's fill needs an override. */
.next-event-hero.colored[b-0qjetiejld] {
    background: var(--card-bg);
    color: var(--card-fg);
    --rz-on-primary: var(--card-fg);
}

.next-event-hero.colored .hero-cd-box[b-0qjetiejld] {
    background: color-mix(in srgb, var(--card-fg) 15%, transparent);
}

/* ── Empty state ────────────────────────────────────── */
.empty-state[b-0qjetiejld] {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
    font-size: 0.9rem;
}
/* /Components/Pages/EventView.razor.rz.scp.css */
/* ── Page header ─────────────────────────────────────── */
.ev-header[b-rvx5ysdreh] {
    margin-bottom: 1rem;
}

.ev-header-top[b-rvx5ysdreh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.ev-back-link[b-rvx5ysdreh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--rz-primary);
    text-decoration: none;
    font-weight: 500;
}

.ev-back-link:hover[b-rvx5ysdreh] {
    text-decoration: none;
}

.ev-back-link:hover .ev-back-text[b-rvx5ysdreh] {
    text-decoration: underline;
}

.ev-back-link .material-symbols-outlined[b-rvx5ysdreh] {
    font-size: 1rem;
}

.ev-title[b-rvx5ysdreh] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.ev-subline[b-rvx5ysdreh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.ev-venue-link[b-rvx5ysdreh] {
    color: var(--rz-primary);
    text-decoration: none;
    font-weight: 500;
}

.ev-venue-link:hover[b-rvx5ysdreh] {
    text-decoration: underline;
}

.ev-sep[b-rvx5ysdreh] {
    opacity: 0.5;
    padding: 0 0.15rem;
}

/* ── Empty state ─────────────────────────────────────── */
.ev-empty[b-rvx5ysdreh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 2rem;
    color: var(--rz-text-secondary-color);
    text-align: center;
}

/* ── Split layout ────────────────────────────────────── */
.ev-split[b-rvx5ysdreh] {
    display: grid;
    grid-template-columns: 296px 1fr;
    gap: 1rem;
    align-items: start;
}

.ev-rail[b-rvx5ysdreh] {
    position: sticky;
    top: 4rem;
}

.ev-detail[b-rvx5ysdreh] {
    min-width: 0;
}

/* ── Responsive collapse ─────────────────────────────── */
@media (max-width: 860px) {
    .ev-split[b-rvx5ysdreh] {
        grid-template-columns: 1fr;
    }

    .ev-rail[b-rvx5ysdreh] {
        position: static;
    }
}
/* /Components/Pages/LiveMonitor.razor.rz.scp.css */
/* Big-screen idle/countdown screen for the live monitor (RSS-1881). Same dark broadcast palette as the
   Race View, built to read from across a room while a session is between runs. */
.lm-root[b-jo5ahcj130] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 7rem);
    padding: clamp(1rem, 3vw, 3rem);
    border-radius: 14px;
    color: #f8fafc;
    background:
        radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, #ff6a00 18%, transparent), transparent 60%),
        linear-gradient(180deg, #0b1220 0%, #0a0f1a 55%, #070b14 100%);
    font-variant-numeric: tabular-nums;
}

.lm-center[b-jo5ahcj130] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fullscreen toggle, mirroring the race viewer's .rr-icon-btn, pinned top-right for wall displays. */
.lm-fs-btn[b-jo5ahcj130] {
    position: absolute;
    top: clamp(0.75rem, 2vw, 1.5rem);
    right: clamp(0.75rem, 2vw, 1.5rem);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    cursor: pointer;
    transition: background 0.12s;
}

.lm-fs-btn:hover[b-jo5ahcj130] {
    background: rgba(255, 255, 255, 0.18);
}

.lm-card[b-jo5ahcj130] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
    max-width: 90%;
}

.lm-label[b-jo5ahcj130] {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 800;
    font-size: clamp(0.8rem, 1.4vw, 1.1rem);
    color: #ff8a3d;
}

.lm-headline[b-jo5ahcj130] {
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-size: clamp(2rem, 6vw, 5rem);
}

.lm-meta[b-jo5ahcj130] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: clamp(1rem, 2vw, 1.6rem);
    color: #cbd5e1;
    font-weight: 600;
}

.lm-class[b-jo5ahcj130] {
    padding: 0.15rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 800;
}

.lm-countdown[b-jo5ahcj130] {
    margin-top: clamp(0.5rem, 2vw, 1.5rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    font-size: clamp(3rem, 12vw, 9rem);
    color: #ffffff;
    text-shadow: 0 0 30px rgba(255, 106, 0, 0.35);
}

.lm-sub[b-jo5ahcj130] {
    font-size: clamp(0.85rem, 1.4vw, 1.15rem);
    color: #94a3b8;
}

.lm-idle .lm-headline[b-jo5ahcj130] {
    color: #e2e8f0;
}
/* /Components/Pages/MechanicsSetup.razor.rz.scp.css */
.mechanics-page[b-igb5qeay91] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Centred loading spinner, matching the bike-setup page. The bike-setup .loading-container rule lives in
   css/bike-setup-configuration.css, which this page doesn't load — so define the equivalent here. */
.loading-container[b-igb5qeay91] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: calc(100vh - 64px);
	padding: 40px;
	text-align: center;
}

.mechanics-header[b-igb5qeay91] {
	background: var(--rz-base-background-color);
	border: 1px solid var(--rz-base-300);
	border-radius: var(--rz-border-radius);
	overflow: hidden;
}

.mechanics-title-bar[b-igb5qeay91] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.25rem 0.5rem;
	border-bottom: 2px solid var(--rz-warning);
}

.mechanics-title[b-igb5qeay91] {
	font-size: 1.1rem;
	font-weight: 700;
	flex: 1;
}

.mechanics-session-badge[b-igb5qeay91] {
	background: var(--rz-warning);
	color: #000;
	font-weight: 800;
	font-size: 0.9rem;
	padding: 0.3rem 0.9rem;
	border-radius: 4px;
}

/* Right-hand cluster of header badges (outstanding-jobs pill + session badge) */
.mechanics-header-badges[b-igb5qeay91] {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* At-a-glance count of outstanding jobs, surfaced from the checklist below */
.jobs-pill[b-igb5qeay91] {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 800;
	font-size: 0.9rem;
	padding: 0.3rem 0.9rem;
	border-radius: 4px;
	white-space: nowrap;
}

.jobs-pill-pending[b-igb5qeay91] {
	background: var(--rz-danger-lighter);
	color: var(--rz-danger-dark);
	border: 1px solid var(--rz-danger);
}

.jobs-pill-done[b-igb5qeay91] {
	background: var(--rz-success-lighter);
	color: var(--rz-success-dark);
	border: 1px solid var(--rz-success);
}

.mechanics-meta-row[b-igb5qeay91] {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 0.6rem 1rem;
	background: var(--rz-base-background-color);
}

.meta-item[b-igb5qeay91] {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Micro-label standard (0.75rem/600), shared with .checklist-badge. */
.meta-label[b-igb5qeay91] {
	font-size: 0.75rem;
	color: var(--rz-text-color);
	font-weight: 600;
}

.meta-value[b-igb5qeay91] {
	font-size: 0.9rem;
	font-weight: 700;
}

/* Setup grid — CSS multi-column so shorter cards pack into vertical space
   left by taller cards, instead of rows being height-matched to the tallest. */
.setup-grid[b-igb5qeay91] {
	column-count: 4;
	column-gap: 1rem;
	margin-top: 0.25rem;
}

.setup-card-wrapper[b-igb5qeay91] {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 1rem;
	display: block;
	width: 100%;
}

@media (max-width: 1200px) {
	.setup-grid[b-igb5qeay91] { column-count: 2; }
}

@media (max-width: 600px) {
	.setup-grid[b-igb5qeay91] { column-count: 1; }
}

.setup-card-wrapper .card-title[b-igb5qeay91] {
	user-select: none;
}

.setup-grid:not(.layout-locked) .setup-card-wrapper .card-title[b-igb5qeay91] {
	cursor: grab;
}

.setup-grid:not(.layout-locked) .setup-card-wrapper .card-title:active[b-igb5qeay91] {
	cursor: grabbing;
}

[b-igb5qeay91] .sortable-ghost {
	opacity: 0.4;
}

[b-igb5qeay91] .sortable-drag {
	opacity: 0.9;
}

.setup-card[b-igb5qeay91] {
	position: relative;
	overflow: hidden;
	padding-top: 0.25rem;
}

/* Heading, not a micro-label: deliberately above the 0.75rem micro-label size so it still reads as a
   card heading now that the uppercase treatment is gone. */
.card-title[b-igb5qeay91] {
	font-size: 0.875rem;
	font-weight: 700;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
}

/* Setting rows */
.setting-row[b-igb5qeay91] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	border-bottom: 1px solid var(--rz-base-200);
}

.setting-row:last-child[b-igb5qeay91] {
	border-bottom: none;
}

.setting-name[b-igb5qeay91] {
	flex: 1;
	font-size: 0.875rem;
	color: var(--rz-text-color);
}

.setting-value[b-igb5qeay91] {
	font-size: 0.875rem;
	font-weight: 700;
	min-width: 3rem;
	text-align: right;
	white-space: nowrap;
	flex-shrink: 0;
}

.setting-unit[b-igb5qeay91] {
	font-size: 0.75rem;
	color: var(--rz-text-secondary-color);
	width: 3rem;
	flex-shrink: 0;
	white-space: nowrap;
}

.setting-change-pending[b-igb5qeay91] {
	background-color: var(--rz-warning) !important;
	color: black !important;
	--rz-input-color: black;
}

.setting-change-pending .setting-name[b-igb5qeay91],
.setting-change-pending .setting-unit[b-igb5qeay91] {
	color: black !important;
}

.setting-change-done[b-igb5qeay91] {
	background-color: var(--rz-success) !important;
	color: var(--rz-on-success) !important;
}

.setting-change-done .setting-name[b-igb5qeay91],
.setting-change-done .setting-unit[b-igb5qeay91] {
	color: var(--rz-on-success) !important;
}

[b-igb5qeay91] .setting-editable input {
	font-weight: 700;
	text-align: right;
	/* RadzenNumeric reserves ~28px of right padding for its up/down spinner even with ShowUpDown="false",
	   leaving the right-aligned value floating well off the right edge so it reads as centred. No spinner
	   renders here, so reclaim that space to match the left padding (RSS-2144). */
	padding-right: 8px;
}

[b-igb5qeay91] .setting-change-pending input,
[b-igb5qeay91] .setting-change-pending .rz-inputtext,
[b-igb5qeay91] .setting-change-done input,
[b-igb5qeay91] .setting-change-done .rz-inputtext {
	background-color: var(--rz-base-background-color) !important;
	color: var(--rz-text-color) !important;
}

.setting-editable .setting-name[b-igb5qeay91]::after {
	content: " ✏";
	font-size: 0.7rem;
	color: var(--rz-info);
	opacity: 0.7;
}

/* Job checklist */
.checklist-section[b-igb5qeay91] {
	padding: 1rem;
	background: var(--rz-base-background-color);
	border: 1px solid var(--rz-base-300);
	border-radius: var(--rz-border-radius);
}

.checklist-item[b-igb5qeay91] {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--rz-border-radius);
	min-height: 44px;
}

.checklist-item:hover[b-igb5qeay91] {
	background: var(--rz-base-100);
}

.checklist-done[b-igb5qeay91] {
	background: var(--rz-success);
	color: var(--rz-on-success);
}

.checklist-done .checklist-text[b-igb5qeay91] {
	text-decoration: line-through;
	color: var(--rz-on-success);
}

.checklist-text[b-igb5qeay91] {
	flex: 1;
	font-size: 0.9rem;
}

/* Micro-label standard (0.75rem/600), shared with .meta-label. The header pills below are badges rather
   than micro-labels — they carry their own inline icon and sizing — so they are deliberately exempt. */
.checklist-badge[b-igb5qeay91] {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.15rem 0.4rem;
	border-radius: 3px;
}

.setup-badge[b-igb5qeay91] {
	background: var(--rz-warning-lighter);
	color: var(--rz-warning-dark);
	border: 1px solid var(--rz-warning);
}

/* Tablet-friendly checkbox hit targets */
.checklist-item[b-igb5qeay91]  input[type="checkbox"],
.checklist-item[b-igb5qeay91]  .rz-chkbox {
	min-width: 24px;
	min-height: 24px;
	width: 24px;
	height: 24px;
}

/* Manual job add row */
.add-job-row[b-igb5qeay91] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-top: 1px dashed var(--rz-base-300);
	margin-top: 0.5rem;
}

/* Mechanic notes section */
.notes-section[b-igb5qeay91] {
	padding: 1rem;
	background: var(--rz-base-background-color);
	border: 1px solid var(--rz-base-300);
	border-radius: var(--rz-border-radius);
}

.notes-section[b-igb5qeay91]  .rz-textarea {
	width: 100%;
	min-height: 120px;
	padding: 0.75rem;
	font-size: 1rem;
}

[b-igb5qeay91] .notes-section textarea::placeholder {
	font-style: italic;
}

.print-only-branding[b-igb5qeay91] {
	display: none;
}

.print-only-logo[b-igb5qeay91] {
	height: 2.5rem;
	width: auto;
	flex-shrink: 0;
}

.print-only-appname[b-igb5qeay91] {
	font-size: 1.1rem;
	font-weight: 700;
}

/* Print styles */
@media print {
	.no-print[b-igb5qeay91],
	.rz-sidebar[b-igb5qeay91],
	nav[b-igb5qeay91],
	header[b-igb5qeay91],
	.mechanics-header .rz-button[b-igb5qeay91],
	.session-selector[b-igb5qeay91] {
		display: none !important;
	}

	.print-only-branding[b-igb5qeay91] {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.mechanics-page[b-igb5qeay91] {
		display: block !important;
	}

	.setup-card[b-igb5qeay91] {
		break-inside: avoid;
		overflow: visible !important;
		border: 1px solid #ccc !important;
		box-shadow: none !important;
		background: white !important;
		color: black !important;
	}

	.checklist-section[b-igb5qeay91] {
		overflow: visible !important;
		border: 1px solid #ccc !important;
		box-shadow: none !important;
		background: white !important;
		color: black !important;
	}


	.setting-name[b-igb5qeay91],
	.setting-value[b-igb5qeay91],
	.setting-unit[b-igb5qeay91],
	.checklist-text[b-igb5qeay91] {
		color: black !important;
	}

	.checklist-done[b-igb5qeay91] {
		background: transparent !important;
		color: black !important;
	}

	.checklist-done .checklist-text[b-igb5qeay91] {
		color: black !important;
	}

	.card-title[b-igb5qeay91] {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	[b-igb5qeay91] .setting-row input,
	[b-igb5qeay91] .setting-row .rz-numeric,
	[b-igb5qeay91] .setting-row .rz-textbox,
	[b-igb5qeay91] .setting-row .rz-dropdown,
	[b-igb5qeay91] .setting-row .rz-numeric-input,
	[b-igb5qeay91] .setting-row .rz-spinner {
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		outline: none !important;
		padding: 0 !important;
	}

	[b-igb5qeay91] .setting-row .rz-spinner-up,
	[b-igb5qeay91] .setting-row .rz-spinner-down {
		display: none !important;
	}

	.mechanics-header[b-igb5qeay91],
	.mechanics-title-bar[b-igb5qeay91],
	.mechanics-meta-row[b-igb5qeay91] {
		border: none !important;
		box-shadow: none !important;
		background: white !important;
	}

	/* Print header layout: branding (logo + app name) top-left, the session/outing badge top-right, and the
	   rider/circuit/event/bike/last-updated meta row on its own line beneath — instead of the on-screen
	   three-across flex row that stretches the middle meta column and pushes content down. */
	.mechanics-title-bar[b-igb5qeay91] {
		border-bottom: 1px solid #ccc !important;
		display: grid !important;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"branding badge"
			"meta meta";
		align-items: center;
		column-gap: 1rem;
		row-gap: 0.25rem;
	}

	.print-only-branding[b-igb5qeay91] {
		grid-area: branding;
		justify-self: start;
	}

	.mechanics-header-badges[b-igb5qeay91] {
		grid-area: badge;
		justify-self: end;
	}

	/* Force the pill's colored background/border to render on the printout */
	.jobs-pill[b-igb5qeay91] {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	.mechanics-meta-row[b-igb5qeay91] {
		grid-area: meta;
	}

	.meta-label[b-igb5qeay91],
	.meta-value[b-igb5qeay91] {
		color: black !important;
	}

	[b-igb5qeay91] .notes-section,
	.notes-section[b-igb5qeay91] {
		border: none !important;
		box-shadow: none !important;
		background: white !important;
		color: black !important;
	}

	[b-igb5qeay91] .notes-section .rz-textarea,
	[b-igb5qeay91] .notes-section textarea {
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		color: black !important;
		resize: none;
	}

	[b-igb5qeay91] .notes-section textarea::placeholder {
		color: transparent !important;
	}
}
/* /Components/Pages/PitBoard.razor.rz.scp.css */
/*
    Pit board (RSS-2395). A broadcast surface rather than an app surface: it is read at a distance, in daylight,
    by someone holding a physical board over a wall — so it carries its own dark palette and type scale instead
    of the Radzen theme's, the way the race view does.

    Colour never carries a status on its own here. Every state that matters (live / stale / offline, arming vs
    live, group size) also says what it is in words. Amber appears only on the arming badge and the trigger
    marker, which are states rather than judgements — it is deliberately absent from anything good/bad, because
    against this board's green it separates by only ~3 ΔE under protanopia.
*/

.pb-root[b-wsrvehrb8j] {
    --pb-bg: #0e0f13;
    --pb-panel: #16181e;
    --pb-panel2: #1d2028;
    --pb-line: #262a34;
    --pb-ink: #e7e9ee;
    --pb-muted: #8b90a0;
    --pb-faint: #5f6474;
    --pb-accent: #ff7a18;
    --pb-accent2: #38bdf8;
    --pb-green: #35e06a;
    --pb-red: #ff5a52;
    --pb-amber: #ffcf4a;

    display: grid;
    grid-template-columns: 1fr 340px;
    min-height: calc(100vh - 7rem);
    background: var(--pb-bg);
    color: var(--pb-ink);
}

/* ---- board ---- */

.pb-stage[b-wsrvehrb8j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 24px;
}

.pb-stagebar[b-wsrvehrb8j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 720px;
}

.pb-stagebar-foot[b-wsrvehrb8j] {
    justify-content: center;
    padding: 0 10px;
}

.pb-session[b-wsrvehrb8j] {
    color: var(--pb-muted);
    font-size: 13px;
}

.pb-conn[b-wsrvehrb8j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.pb-conn-dot[b-wsrvehrb8j] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

.pb-conn-live[b-wsrvehrb8j] {
    color: var(--pb-green);
}

.pb-conn-live .pb-conn-dot[b-wsrvehrb8j] {
    box-shadow: 0 0 10px var(--pb-green);
    animation: pb-pulse-b-wsrvehrb8j 1.6s infinite;
}

.pb-conn-stale[b-wsrvehrb8j] {
    color: var(--pb-amber);
}

.pb-conn-offline[b-wsrvehrb8j] {
    color: var(--pb-red);
}

/* A replay must never read as a live board — it is a different colour, a different word, and its own control
   strip sitting above the board. */
.pb-conn-replay[b-wsrvehrb8j] {
    color: var(--pb-accent2);
}

/* ---- replay controls ---- */

.pb-replay[b-wsrvehrb8j] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 720px;
    padding: 10px 14px;
    border: 1px solid var(--pb-line);
    border-radius: 12px;
    background: var(--pb-panel);
}

.pb-replay-btn[b-wsrvehrb8j],
.pb-replay-speed[b-wsrvehrb8j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid var(--pb-line);
    border-radius: 8px;
    background: var(--pb-panel2);
    color: var(--pb-ink);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pb-replay-speed-on[b-wsrvehrb8j] {
    border-color: var(--pb-accent2);
    color: var(--pb-accent2);
}

.pb-replay-clock[b-wsrvehrb8j] {
    min-width: 56px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--pb-ink);
}

.pb-replay-scrub[b-wsrvehrb8j] {
    flex: 1;
    min-width: 0;
    accent-color: var(--pb-accent2);
}

@keyframes pb-pulse-b-wsrvehrb8j {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.pb-board[b-wsrvehrb8j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 720px;
    padding: 10px;
    border-radius: 20px;
    background: linear-gradient(160deg, #1a1c22, #0b0c0f);
}

.pb-head[b-wsrvehrb8j] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pb-num[b-wsrvehrb8j] {
    font-size: clamp(40px, 12vw, 64px);
    font-weight: 800;
    line-height: 1;
}

.pb-who[b-wsrvehrb8j] {
    font-size: clamp(18px, 5vw, 26px);
    letter-spacing: .1em;
}

.pb-class[b-wsrvehrb8j] {
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .01em;
    opacity: .7;
}

/* ---- tiles ---- */

.pb-tile[b-wsrvehrb8j] {
    position: relative;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
}

.pb-tile-wide[b-wsrvehrb8j] {
    grid-column: 1 / -1;
}

.pb-k[b-wsrvehrb8j] {
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .01em;
    opacity: .72;
}

.pb-v[b-wsrvehrb8j] {
    font-size: clamp(30px, 8vw, 42px);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pb-v-sm[b-wsrvehrb8j] {
    font-size: clamp(24px, 6vw, 30px);
}

.pb-good[b-wsrvehrb8j] { color: var(--pb-green); }
.pb-bad[b-wsrvehrb8j] { color: var(--pb-red); }

.pb-sub[b-wsrvehrb8j] {
    display: block;
    margin-top: 9px;
    font-size: 12px;
    color: var(--pb-muted);
    font-variant-numeric: tabular-nums;
}

.pb-badge[b-wsrvehrb8j] {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Arming and live are states, not verdicts — and both are spelled out, so the colour is only a second cue. */
.pb-badge-arming[b-wsrvehrb8j] {
    color: var(--pb-amber);
    background: rgba(255, 207, 74, .15);
    border: 1px solid rgba(255, 207, 74, .4);
}

.pb-badge-live[b-wsrvehrb8j] {
    color: var(--pb-green);
    background: rgba(53, 224, 106, .15);
    border: 1px solid rgba(53, 224, 106, .4);
}

.pb-empty[b-wsrvehrb8j] {
    grid-column: 1 / -1;
    padding: 30px;
    border: 1px dashed var(--pb-line);
    border-radius: 12px;
    color: var(--pb-muted);
    font-size: 13px;
    text-align: center;
}

.pb-empty-hint[b-wsrvehrb8j] {
    margin-top: 10px;
    color: var(--pb-faint);
    line-height: 1.6;
}

.pb-empty-hint a[b-wsrvehrb8j] {
    color: var(--pb-accent2);
}

/* ---- group ladder ---- */

.pb-chain[b-wsrvehrb8j] {
    margin-top: 12px;
}

.pb-rider[b-wsrvehrb8j] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    font-size: 13px;
    color: var(--pb-muted);
    font-variant-numeric: tabular-nums;
}

.pb-rider-in[b-wsrvehrb8j] { color: var(--pb-ink); }
.pb-rider-me[b-wsrvehrb8j] { font-weight: 800; }

.pb-rider-num[b-wsrvehrb8j] { min-width: 38px; }

.pb-rider-name[b-wsrvehrb8j] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pb-link[b-wsrvehrb8j] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 14px;
    font-size: 11px;
    color: var(--pb-faint);
    font-variant-numeric: tabular-nums;
}

/* A solid rule is a gap the chain holds through; a dashed one is where the group ends. */
.pb-rule[b-wsrvehrb8j] {
    width: 2px;
    height: 15px;
    flex: none;
    border-radius: 2px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .22) 0 3px, transparent 3px 6px);
}

.pb-link-joined .pb-rule[b-wsrvehrb8j] {
    background: var(--pb-ink);
}

/* ---- race control ---- */

.pb-rc-list[b-wsrvehrb8j] {
    display: grid;
    gap: 8px;
}

.pb-rc-item[b-wsrvehrb8j] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 14px;
}

.pb-rc-lap[b-wsrvehrb8j] {
    min-width: 52px;
    color: var(--pb-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.pb-rc-text[b-wsrvehrb8j] {
    flex: 1;
    min-width: 0;
}

/* ---- setup panel ---- */

.pb-config[b-wsrvehrb8j] {
    padding: 22px 20px;
    background: var(--pb-panel);
    border-left: 1px solid var(--pb-line);
    overflow-y: auto;
}

.pb-config-title[b-wsrvehrb8j] {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--pb-muted);
}

.pb-config-sub[b-wsrvehrb8j] {
    margin: 0 0 18px;
    font-size: 12px;
    color: var(--pb-faint);
}

.pb-group[b-wsrvehrb8j] {
    margin-bottom: 24px;
}

.pb-group > label[b-wsrvehrb8j] {
    display: block;
    margin-bottom: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--pb-muted);
}

.pb-sublabel[b-wsrvehrb8j] {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--pb-faint);
}

.pb-hint[b-wsrvehrb8j] {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--pb-faint);
}

.pb-pair[b-wsrvehrb8j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pb-toggle[b-wsrvehrb8j] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 7px;
    padding: 9px 11px;
    border: 1px solid var(--pb-line);
    border-radius: 9px;
    background: var(--pb-panel2);
    color: var(--pb-ink);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s;
}

.pb-toggle:hover[b-wsrvehrb8j] {
    border-color: #39404f;
}

.pb-toggle-on[b-wsrvehrb8j] {
    border-color: var(--pb-accent);
    background: rgba(255, 122, 24, .08);
}

.pb-switch[b-wsrvehrb8j] {
    position: relative;
    width: 34px;
    height: 20px;
    flex: none;
    border-radius: 999px;
    background: #333844;
    transition: background .15s;
}

.pb-toggle-on .pb-switch[b-wsrvehrb8j] {
    background: var(--pb-accent);
}

.pb-switch[b-wsrvehrb8j]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

.pb-toggle-on .pb-switch[b-wsrvehrb8j]::after {
    transform: translateX(14px);
}

.pb-fs-btn[b-wsrvehrb8j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    padding: 7px 12px;
    border: 1px solid var(--pb-line);
    border-radius: 9px;
    background: var(--pb-panel2);
    color: var(--pb-ink);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pb-fs-btn:hover[b-wsrvehrb8j] {
    border-color: #39404f;
}

/* Radzen renders its own elements, which do not carry this component's scope attribute — reach them from the
   scoped root with ::deep, or these rules silently stop matching. */
.pb-config[b-wsrvehrb8j]  .rz-dropdown {
    width: 100%;
    background: var(--pb-panel2);
    border-color: var(--pb-line);
}

.pb-config[b-wsrvehrb8j]  .rz-dropdown-label {
    color: var(--pb-ink);
}

/* ---- phone / iPad ----
   The board comes first and the setup panel underneath: the crew opens this to read numbers, not to configure
   them. No horizontal scrolling at any width. */

@media (max-width: 900px) {
    .pb-root[b-wsrvehrb8j] {
        grid-template-columns: 1fr;
    }

    .pb-stage[b-wsrvehrb8j] {
        order: 1;
        padding: max(18px, env(safe-area-inset-top)) 5px 24px;
    }

    .pb-config[b-wsrvehrb8j] {
        order: 2;
        border-left: none;
        border-top: 1px solid var(--pb-line);
        padding: 22px 18px calc(28px + env(safe-area-inset-bottom));
        overflow-y: visible;
    }
}

.pb-root:fullscreen[b-wsrvehrb8j] {
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
}
.pb-root:fullscreen .pb-stage[b-wsrvehrb8j] {
    justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
    .pb-conn-live .pb-conn-dot[b-wsrvehrb8j] {
        animation: none;
    }
}

/* ---- board mode ----
   The overlay mechanics live in app.css (.oc-board-fill) because they have to reach .rz-body, which is outside
   this component's CSS scope. Only the board's own geometry belongs here.

   inset:0 already sizes the overlay to the visible viewport — and to the *small* viewport in a browser tab,
   which is what we want while the URL bar can still collapse — so .pb-root's own min-height must not fight it.
   This override belongs in the scoped file: scoped CSS adds an attribute selector, so .pb-root outranks the
   global .oc-board-fill on specificity and a min-height reset in app.css would silently lose. */
.pb-root.oc-board-fill[b-wsrvehrb8j] {
    min-height: 0;
}

/* As with :fullscreen — fill from the top rather than centring, so a tall board scrolls instead of clipping. */
.pb-root.oc-board-fill .pb-stage[b-wsrvehrb8j] {
    justify-content: flex-start;
}
/* /Components/Pages/PitBoard/PitBoardProgressBar.razor.rz.scp.css */
/* Lap-progress bar (RSS-2395). */

.pb-progress-value[b-jfy0vks94c] {
    display: block;
    font-size: clamp(22px, 5vw, 28px);
    font-weight: 800;
    line-height: 1;
}

.pb-sub[b-jfy0vks94c] {
    display: block;
    margin-top: 9px;
    font-size: 12px;
    color: var(--pb-muted);
    font-variant-numeric: tabular-nums;
}

.pb-track[b-jfy0vks94c] {
    display: grid;
    gap: 4px;
    margin-top: 6px;
}

.pb-seg[b-jfy0vks94c] {
    position: relative;
    height: 30px;
    border-radius: 6px;
    /* The pit board's own dark surface keeps the white wash; a host on a themed surface (the live-timing
       board's rider cards) sets --pb-seg-bg instead, since 7% white is invisible on a light theme. */
    background: var(--pb-seg-bg, rgba(255, 255, 255, .07));
    overflow: hidden;
}

.pb-seg-trigger[b-jfy0vks94c] {
    outline: 1px dashed rgba(255, 207, 74, .55);
}

.pb-fill[b-jfy0vks94c] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, var(--pb-accent), var(--pb-accent2));
    transition: width .12s linear;
}

/* The sector in progress is part estimate, so it is drawn back with a marked leading edge. A solid segment
   always means the rider was actually measured through it. */
.pb-fill-est[b-jfy0vks94c] {
    opacity: .5;
    border-right: 2px solid var(--pb-ink);
}

.pb-seg-label[b-jfy0vks94c] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--pb-ink);
    mix-blend-mode: difference;
}

.pb-track-legend[b-jfy0vks94c] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--pb-faint);
}

/* Keep the data, drop the motion. */
@media (prefers-reduced-motion: reduce) {
    .pb-fill[b-jfy0vks94c] {
        transition: none;
    }
}
/* /Components/Pages/RaceReplay.razor.rz.scp.css */
/* Big-screen "broadcast" race viewer (RSS-1881). Dark, high-contrast, tabular-numeric, built to read from
   across a room. The class color is the accent (--rr-accent), set inline on .rr-root when configured. */

.rr-root[b-9gtv7d7yzy] {
    --rr-accent: #ff6a00;
    --rr-accent-fg: #ffffff;
    --row-h: 3.4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 7rem);
    padding: clamp(0.75rem, 1.5vw, 1.75rem);
    border-radius: 14px;
    color: #f8fafc;
    background:
        radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--rr-accent) 22%, transparent), transparent 60%),
        linear-gradient(180deg, #0b1220 0%, #0a0f1a 55%, #070b14 100%);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

.rr-root:fullscreen[b-9gtv7d7yzy] {
    height: 100vh;
    border-radius: 0;
}

/* Board scrolls internally so the transport bar is always pinned below it — never overlapping rows,
   regardless of field size. */
.rr-board-scroll[b-9gtv7d7yzy] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Top bar ─────────────────────────────────────────── */
.rr-topbar[b-9gtv7d7yzy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 3px solid var(--rr-accent);
}

.rr-title-group[b-9gtv7d7yzy], .rr-status-group[b-9gtv7d7yzy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.rr-title-group[b-9gtv7d7yzy] { flex: 1 1 0; }
.rr-status-group[b-9gtv7d7yzy] { flex: 1 1 0; justify-content: flex-end; }

/* Tenant branding logo, centred between the race title and the status chips. */
.rr-brand[b-9gtv7d7yzy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}
.rr-brand img[b-9gtv7d7yzy] {
    height: clamp(1.6rem, 3vw, 2.6rem);
    width: auto;
    object-fit: contain;
}

.rr-back[b-9gtv7d7yzy] {
    display: inline-flex;
    align-items: center;
    color: #cbd5e1;
    text-decoration: none;
}
.rr-back:hover[b-9gtv7d7yzy] { color: #fff; }

.rr-class-chip[b-9gtv7d7yzy] {
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: clamp(0.7rem, 1vw, 0.9rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rr-title-text[b-9gtv7d7yzy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}
.rr-session-name[b-9gtv7d7yzy] {
    font-size: clamp(1.1rem, 2vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rr-session-sub[b-9gtv7d7yzy] {
    font-size: clamp(0.72rem, 1.1vw, 0.95rem);
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rr-sub-sep[b-9gtv7d7yzy] { margin: 0 0.35rem; opacity: 0.6; }

.rr-clock[b-9gtv7d7yzy] {
    font-size: clamp(1.1rem, 2.2vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #e2e8f0;
}

/* Time/laps remaining — distinct from the elapsed clock: a subtle outlined pill. */
.rr-countdown[b-9gtv7d7yzy] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    font-size: clamp(1rem, 1.9vw, 1.6rem);
    font-weight: 800;
    color: #f8fafc;
    white-space: nowrap;
}
.rr-countdown .rr-countdown-label[b-9gtv7d7yzy] {
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

.rr-live-chip[b-9gtv7d7yzy], .rr-official-chip[b-9gtv7d7yzy] {
    padding: 0.2rem 0.7rem;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}
.rr-live-chip[b-9gtv7d7yzy] { background: #dc2626; color: #fff; animation: rr-pulse-b-9gtv7d7yzy 1.4s ease-in-out infinite; }
.rr-official-chip[b-9gtv7d7yzy] { background: #1d4ed8; color: #fff; }

.rr-flag[b-9gtv7d7yzy] {
    padding: 0.25rem 0.8rem;
    border-radius: 6px;
    font-weight: 900;
    font-size: clamp(0.8rem, 1.4vw, 1.1rem);
    letter-spacing: 0.1em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}
.rr-flag-pulse[b-9gtv7d7yzy] { animation: rr-pulse-b-9gtv7d7yzy 0.9s ease-in-out infinite; }

.rr-icon-btn[b-9gtv7d7yzy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    cursor: pointer;
    transition: background 0.12s;
}
.rr-icon-btn:hover[b-9gtv7d7yzy] { background: rgba(255, 255, 255, 0.18); }
.rr-play[b-9gtv7d7yzy] { background: var(--rr-accent); color: var(--rr-accent-fg); }

/* ── Overtake lower-third ────────────────────────────── */
.rr-banner[b-9gtv7d7yzy] {
    position: absolute;
    left: 50%;
    bottom: 7.5rem;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--rr-accent), color-mix(in srgb, var(--rr-accent) 55%, #000));
    color: var(--rr-accent-fg);
    font-size: clamp(1rem, 1.8vw, 1.6rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: rr-banner-in-b-9gtv7d7yzy 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Standings board (FLIP by translateY) ────────────── */
.rr-board[b-9gtv7d7yzy] {
    position: relative;
    transition: height 0.3s ease;
}

.rr-row[b-9gtv7d7yzy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.2vw, 1.1rem);
    padding: 0 0.6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 4px solid transparent;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.5s cubic-bezier(0.35, 0.9, 0.25, 1), background 0.3s, opacity 0.3s;
    will-change: transform;
}
/* Higher specificity (.rr-board ancestor) so the team-rider highlight wins over the podium row background,
   which is defined below at equal specificity and would otherwise override it for a podium team rider. */
.rr-board .rr-row.rr-ours[b-9gtv7d7yzy] {
    background: color-mix(in srgb, var(--rr-accent) 22%, rgba(255, 255, 255, 0.04));
    border-left-color: var(--rr-accent);
}
.rr-row.rr-podium[b-9gtv7d7yzy] { background: rgba(255, 255, 255, 0.07); }
.rr-row.rr-p1[b-9gtv7d7yzy] { box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.35), inset 0 -1px 0 rgba(255,255,255,0.04); }
.rr-row.rr-out[b-9gtv7d7yzy] { opacity: 0.45; }

.rr-pos[b-9gtv7d7yzy] {
    flex: 0 0 auto;
    width: clamp(1.8rem, 3vw, 2.8rem);
    text-align: center;
    font-size: clamp(1.2rem, 2.4vw, 2.1rem);
    font-weight: 900;
}

.rr-avatar[b-9gtv7d7yzy] {
    flex: 0 0 auto;
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}
.rr-avatar-num[b-9gtv7d7yzy] { font-size: 0.95rem; }
.rr-avatar-img[b-9gtv7d7yzy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rr-ident[b-9gtv7d7yzy] { flex: 1 1 auto; min-width: 0; }
.rr-name[b-9gtv7d7yzy] {
    font-size: clamp(0.95rem, 1.6vw, 1.35rem);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rr-substatus[b-9gtv7d7yzy] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 0.05rem;
}
.rr-laps[b-9gtv7d7yzy] { letter-spacing: 0.04em; }
.rr-statusbadge[b-9gtv7d7yzy] {
    padding: 0.02rem 0.4rem;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
}
.rr-status-pit[b-9gtv7d7yzy] { background: #d97706; }
.rr-status-crashed[b-9gtv7d7yzy], .rr-status-didnotfinish[b-9gtv7d7yzy], .rr-status-retired[b-9gtv7d7yzy], .rr-status-didnotstart[b-9gtv7d7yzy] { background: #dc2626; }
.rr-status-classified[b-9gtv7d7yzy], .rr-status-finished[b-9gtv7d7yzy] { background: #16a34a; }

.rr-lap[b-9gtv7d7yzy] {
    flex: 0 0 auto;
    width: clamp(4rem, 7vw, 6.5rem);
    text-align: right;
    /* Bottom-align to match the sector block (also flex-end). The row is a fixed 3.4rem tall and defaults to
       align-items: center, so a centred LAST/BEST stack floats its value above the bottom-pinned sector cells.
       Pinning these columns to the bottom too puts the lap-time values on the same baseline as the sectors. */
    align-self: flex-end;
}
.rr-lap-label[b-9gtv7d7yzy] { font-size: 0.6rem; color: #64748b; letter-spacing: 0.1em; }
.rr-lap-val[b-9gtv7d7yzy] { font-size: clamp(0.9rem, 1.5vw, 1.25rem); font-weight: 700; }
.rr-lap-val.rr-fastest[b-9gtv7d7yzy] { color: #c084fc; text-shadow: 0 0 10px rgba(192, 132, 252, 0.5); }

/* Gap-to-leader column (RSS-2301): slightly narrower than LAST/BEST — its values ("+1.234", "+1 Lap") are
   shorter than a full lap time. Reuses the .rr-lap label/value styling for a consistent bottom-aligned stack. */
.rr-gap[b-9gtv7d7yzy] { width: clamp(3.5rem, 5vw, 5rem); }

.rr-sectors[b-9gtv7d7yzy] {
    /* Grid, not flex: every sector is a fixed-size auto-column, so the block is a constant width across rows and
       cells line up regardless of how many are populated. Flexbox couldn't guarantee this cross-browser — with
       the default min-width:auto, Firefox lets a cell with a 6-char value grow past its flex-basis (Chromium
       doesn't), so full-sector rows overflowed and the trailing cluster jittered (RSS-2253). Grid tracks are a
       hard size and don't expand to content. */
    flex: 0 0 auto;
    /* Bottom-align with the LAST/BEST columns: those stack a label over a value, so their value sits at the row
       bottom. Pinning the sector cells to the bottom lines the sector times up with the lap-time values rather
       than floating them at the row's vertical centre. */
    align-self: flex-end;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(3.2rem, 4vw, 4rem);
    gap: 0.3rem;
    min-width: 0;
}
.rr-sector[b-9gtv7d7yzy] {
    /* box-sizing + min-width:0 + overflow keep the cell pinned to its grid track (sized for the 6-char "s.fff"
       max) even if a value is unexpectedly wide — the track never grows, so columns stay aligned. */
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    font-weight: 600;
    color: #cbd5e1;
    white-space: nowrap;
}
.rr-sector.rr-bestsector[b-9gtv7d7yzy] {
    background: color-mix(in srgb, #16a34a 35%, transparent);
    color: #eafff0;
    font-weight: 800;
}
/* Sectors of the lap currently in progress: the ones already set this lap brighten so they read as "live, being
   timed now". Carry-over cells (previous lap, not yet replaced) are excluded — they stay greyed so it's clear
   they're stale, not this lap's time. */
.rr-sectors-live .rr-sector:not(.rr-sector-pending):not(.rr-sector-carry)[b-9gtv7d7yzy] {
    color: #f8fafc;
}
.rr-sector.rr-sector-pending[b-9gtv7d7yzy] {
    opacity: 0.3;
}
/* A previous-lap sector still showing on the lap in progress until the current lap overwrites it (RSS-2254):
   kept legible but clearly muted so it doesn't read as the live time. */
.rr-sector.rr-sector-carry[b-9gtv7d7yzy] {
    color: #64748b;
    background: rgba(255, 255, 255, 0.03);
}

/* ── Transport + timeline ────────────────────────────── */
.rr-transport[b-9gtv7d7yzy] {
    flex: 0 0 auto;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.rr-controls[b-9gtv7d7yzy] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.rr-live-btn[b-9gtv7d7yzy] {
    border: none;
    border-radius: 8px;
    padding: 0 0.9rem;
    height: 2.2rem;
    background: #dc2626;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.rr-timeline[b-9gtv7d7yzy] {
    position: relative;
    height: 2.2rem;
    display: flex;
    align-items: center;
}
.rr-flag-bands[b-9gtv7d7yzy] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    pointer-events: none;
}
.rr-flag-band[b-9gtv7d7yzy] {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.85;
}
.rr-scrubber[b-9gtv7d7yzy] {
    position: relative;
    z-index: 2;
    width: 100%;
    accent-color: var(--rr-accent);
    cursor: pointer;
    background: transparent;
}

/* ── Pre-session countdown (RSS-2286) ────────────────── */
/* Shown in place of the board while a session is upcoming: same dark broadcast surface as .rr-root, centred, so
   opening the Race View early reads as "waiting to start" rather than an empty/broken page. */
.rr-prestart[b-9gtv7d7yzy] {
    --rr-accent: #ff6a00;
    --rr-accent-fg: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    height: calc(100vh - 7rem);
    padding: clamp(1rem, 3vw, 3rem);
    border-radius: 14px;
    color: #f8fafc;
    background:
        radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--rr-accent) 22%, transparent), transparent 60%),
        linear-gradient(180deg, #0b1220 0%, #0a0f1a 55%, #070b14 100%);
    font-variant-numeric: tabular-nums;
}
.rr-prestart-name[b-9gtv7d7yzy] {
    font-size: clamp(1.4rem, 3.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.rr-prestart-count[b-9gtv7d7yzy] {
    font-size: clamp(2.6rem, 9vw, 6rem);
    font-weight: 900;
    line-height: 1;
    color: var(--rr-accent);
    text-shadow: 0 0 24px color-mix(in srgb, var(--rr-accent) 45%, transparent);
}
.rr-prestart-count.rr-prestart-waiting[b-9gtv7d7yzy] {
    /* No hard number to headline — dial the size back and use the pulse to read as "any moment now". */
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: #f8fafc;
    text-shadow: none;
    animation: rr-pulse-b-9gtv7d7yzy 1.8s ease-in-out infinite;
}
.rr-prestart-when[b-9gtv7d7yzy] {
    font-size: clamp(0.9rem, 1.6vw, 1.2rem);
    color: #94a3b8;
    font-weight: 600;
}

/* Pre-race lineup with the starting grid: top-aligned and scrollable rather than centred (RSS-2308). */
.rr-prestart-grid[b-9gtv7d7yzy] {
    justify-content: flex-start;
    gap: 0.75rem;
    height: calc(100vh - 7rem);
    overflow-y: auto;
}
.rr-prestart-head[b-9gtv7d7yzy] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    position: sticky;
    top: 0;
    padding: 0.25rem 0 0.75rem;
    background: linear-gradient(180deg, #0a0f1a 70%, transparent);
}
.rr-prestart-head-name[b-9gtv7d7yzy] {
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.rr-prestart-pill[b-9gtv7d7yzy] {
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 800;
    color: var(--rr-accent);
    background: color-mix(in srgb, var(--rr-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--rr-accent) 40%, transparent);
    border-radius: 999px;
    padding: 0.2rem 0.9rem;
    font-variant-numeric: tabular-nums;
}
.rr-prestart-pill.rr-prestart-waiting[b-9gtv7d7yzy] {
    color: #f8fafc;
    background: color-mix(in srgb, #f8fafc 10%, transparent);
    border-color: color-mix(in srgb, #f8fafc 25%, transparent);
    animation: rr-pulse-b-9gtv7d7yzy 1.8s ease-in-out infinite;
}
.rr-grid-list[b-9gtv7d7yzy] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: min(680px, 100%);
}
.rr-grid-row[b-9gtv7d7yzy] {
    display: grid;
    grid-template-columns: 2.5rem 3rem 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
}
.rr-grid-ours[b-9gtv7d7yzy] {
    background: color-mix(in srgb, var(--rr-accent) 18%, transparent);
    box-shadow: inset 3px 0 0 var(--rr-accent);
}
.rr-grid-pos[b-9gtv7d7yzy] {
    font-weight: 800;
    color: var(--rr-accent);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.rr-grid-num[b-9gtv7d7yzy] {
    font-weight: 700;
    color: #cbd5e1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.rr-grid-name[b-9gtv7d7yzy] {
    font-weight: 600;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes rr-pulse-b-9gtv7d7yzy {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
@keyframes rr-banner-in-b-9gtv7d7yzy {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
/* /Components/Pages/RunView.razor.rz.scp.css */
/* ── Back link ───────────────────────────────────── */
.rv-back-link[b-czceq4tyuh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rz-primary);
    text-decoration: none;
}

.rv-back-link:hover[b-czceq4tyuh] { text-decoration: none; }
.rv-back-link:hover .rv-back-text[b-czceq4tyuh] { text-decoration: underline; }

/* ── Page header ─────────────────────────────────── */
.rv-header[b-czceq4tyuh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.rv-header-left[b-czceq4tyuh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.rv-title-row[b-czceq4tyuh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rv-title[b-czceq4tyuh] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--rz-text-color);
}

.rv-session[b-czceq4tyuh] {
    font-weight: 700;
}

.rv-title-sep[b-czceq4tyuh] {
    color: var(--rz-text-disabled-color);
    font-weight: 400;
    margin: 0 0.15em;
}

.rv-rider[b-czceq4tyuh] {
    font-weight: 700;
}

.rv-breadcrumb[b-czceq4tyuh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--rz-text-secondary-color);
    flex-wrap: wrap;
}

.rv-crumb-link[b-czceq4tyuh] {
    color: var(--rz-primary);
    text-decoration: none;
    font-weight: 500;
}

.rv-crumb-link:hover[b-czceq4tyuh] { text-decoration: underline; }

.rv-sep[b-czceq4tyuh] {
    color: var(--rz-text-disabled-color);
}

.rv-actions[b-czceq4tyuh] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ── Run tabs ────────────────────────────────────── */
.rv-runtabs[b-czceq4tyuh] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.rv-runtab[b-czceq4tyuh] {
    appearance: none;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    color: var(--rz-text-secondary-color);
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.rv-runtab:hover[b-czceq4tyuh] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.rv-runtab.rv-runtab-on[b-czceq4tyuh] {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
}

.rv-runtabs-of[b-czceq4tyuh] {
    font-size: 0.75rem;
    color: var(--rz-text-disabled-color);
    margin-left: 2px;
}

/* ── KPI bar ─────────────────────────────────────── */
.rv-kpis[b-czceq4tyuh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 1.25rem;
}

.rv-kpi[b-czceq4tyuh] {
    display: flex;
    flex-direction: column;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    padding: 10px 14px;
}

.rv-kpi-k[b-czceq4tyuh] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    margin-bottom: 3px;
    white-space: nowrap;
}

.rv-kpi-v[b-czceq4tyuh] {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
    white-space: nowrap;
}

.rv-kpi-s[b-czceq4tyuh] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    margin-top: 2px;
    white-space: nowrap;
}

/* ── Two-column layout ───────────────────────────── */
.rv-cols[b-czceq4tyuh] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1000px) {
    .rv-cols[b-czceq4tyuh] { grid-template-columns: 1fr; }
}

.rv-left[b-czceq4tyuh] {
    min-width: 0;
}

.rv-right[b-czceq4tyuh] {
    min-width: 0;
}

/* ── No data state ───────────────────────────────── */
.rv-no-data[b-czceq4tyuh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

/* ── Setup card ──────────────────────────────────── */
.rv-setup-card[b-czceq4tyuh] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
    background: var(--rz-base-background-color);
}

.rv-setup-head[b-czceq4tyuh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rz-base-300);
    background: var(--rz-base-200);
}

.rv-setup-title[b-czceq4tyuh] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.rv-setup-tools[b-czceq4tyuh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rv-vs-label[b-czceq4tyuh] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ── Setup diff section ──────────────────────────── */
.rv-sgroup[b-czceq4tyuh] {
    border-bottom: 1px solid var(--rz-base-300);
}

.rv-sgroup-sum[b-czceq4tyuh] {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--rz-text-color);
}

.rv-sgroup-sum[b-czceq4tyuh]::-webkit-details-marker { display: none; }

.rv-sgroup-tw[b-czceq4tyuh] {
    font-size: 0.65rem;
    color: var(--rz-text-secondary-color);
    transition: transform 0.15s;
}

.rv-sgroup[open] .rv-sgroup-tw[b-czceq4tyuh] { transform: rotate(90deg); }

.rv-sgroup-count[b-czceq4tyuh] {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}

.rv-srows[b-czceq4tyuh] {
    padding: 4px 16px 10px;
}

.rv-diff-cat[b-czceq4tyuh] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-primary);
    padding: 8px 0 3px;
    border-bottom: 1px solid var(--rz-base-300);
    margin-bottom: 4px;
}

.rv-diff-cat:first-child[b-czceq4tyuh] {
    padding-top: 4px;
}

.rv-srow[b-czceq4tyuh] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.rv-sk[b-czceq4tyuh] {
    font-weight: 600;
    color: var(--rz-text-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.rv-sep-colon[b-czceq4tyuh] {
    color: var(--rz-text-secondary-color);
    font-weight: 400;
    flex-shrink: 0;
}

.rv-sv[b-czceq4tyuh] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
    white-space: nowrap;
}

.rv-su[b-czceq4tyuh] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    font-style: italic;
    white-space: nowrap;
}

.rv-schg[b-czceq4tyuh] {
    font-size: 0.68rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--rz-warning) 18%, var(--rz-base-background-color));
    color: var(--rz-warning-dark, var(--rz-warning));
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Setup footer ────────────────────────────────── */
.rv-setup-foot[b-czceq4tyuh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--rz-base-300);
    background: var(--rz-base-200);
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
}

.rv-setup-foot-link[b-czceq4tyuh] {
    color: var(--rz-primary);
    text-decoration: none;
    font-weight: 600;
}

.rv-setup-foot-link:hover[b-czceq4tyuh] { text-decoration: underline; }
/* /Components/Pages/WidgetDashboard.razor.rz.scp.css */
/* Dashboard grid, customize toolbar, and hidden tray (RSS-2464, PRD §3).

   The grid is deliberately plain: 12 columns, a gap, and nothing else. No grid-auto-rows, no dense
   auto-flow, and no explicit placement, because any of those would backfill holes with later cards and
   make the card you see third not the third in the list — which turns drag-to-reorder into a guess and
   makes customize mode show something other than what gets saved.

   Leaving align-items at its default (stretch) is what removes the gaps a packer would otherwise be
   needed for: a short card banded with a tall one grows to the band height instead of leaving dead space
   beneath it. Widget spans live in DashboardWidget.razor.css, with the card they apply to. */
.oc-dw-grid[b-sws53ngyk4] {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 1rem;
	padding: 0.5rem;
}

.oc-dw-toolbar[b-sws53ngyk4] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0.5rem 0.5rem 0;
}

/* The event and session on track (RSS-2723). margin-right: auto holds it on the left while the controls
   stay end-aligned. Theme tokens only, so it follows light and dark with no rules of its own. min-width: 0
   lets a long name ellipsise instead of pushing the selector to a new row. */
.oc-dw-context[b-sws53ngyk4] {
	margin-right: auto;
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	min-width: 0;
	font-size: 0.8rem;
	white-space: nowrap;
}

.oc-dw-context-event[b-sws53ngyk4] {
	color: var(--rz-text-secondary-color, #616161);
	overflow: hidden;
	text-overflow: ellipsis;
}

.oc-dw-context-session[b-sws53ngyk4] {
	font-weight: 700;
	color: var(--rz-text-color, #212121);
	overflow: hidden;
	text-overflow: ellipsis;
}

.oc-dw-context-session[b-sws53ngyk4]::before {
	content: "·";
	margin-right: 0.4rem;
	font-weight: 400;
	color: var(--rz-text-secondary-color, #616161);
}

/* Customize bar, below the grid. Mirrors the toolbar's end-alignment so the button keeps the same
   right-hand edge it had up there, and the grid's own padding so it lines up with the last card. */
.oc-dw-footer[b-sws53ngyk4] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0 0.5rem 0.5rem;
}

/* Hidden tray — only rendered in customize mode. */
.oc-dw-tray[b-sws53ngyk4] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0.5rem 0.5rem 0;
	padding: 0.4rem 0.6rem;
	background: var(--rz-base-200, #f5f5f5);
	border: 1px dashed var(--rz-base-300, #d6d6d6);
	border-radius: var(--rz-border-radius, 4px);
}

.oc-dw-tray-label[b-sws53ngyk4] {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--rz-text-secondary-color, #616161);
}

.oc-dw-tray-empty[b-sws53ngyk4] {
	font-size: 0.7rem;
	font-style: italic;
	color: var(--rz-text-secondary-color, #616161);
}
/* /Components/Shared/DashboardQuickLink.razor.rz.scp.css */
/* Dashboard role quick-links (RSS-2594). Sized to sit in the dashboard toolbar beside the rider
   selector and the customize button without setting the row's height. */
.oc-dw-quicklinks[b-3iwb6bxo5s] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	min-width: 0;
}

.oc-dw-quicklink[b-3iwb6bxo5s] {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--rz-base-300, #d6d6d6);
	border-radius: var(--rz-border-radius, 4px);
	background: var(--rz-base-background-color, #fff);
	color: var(--rz-text-color, #212121);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.oc-dw-quicklink:hover[b-3iwb6bxo5s] {
	border-color: var(--rz-primary, #1976d2);
	color: var(--rz-primary, #1976d2);
	background: var(--rz-base-200, #f5f5f5);
}

.oc-dw-quicklink .rzi[b-3iwb6bxo5s] {
	font-size: 1rem;
}
/* /Components/Shared/DashboardWidget.razor.rz.scp.css */
/* Dashboard card chrome and the four grid spans (RSS-2464, PRD §3).

   The span classes live here, with the card, because the card element *is* the grid item — the grid
   container is WidgetDashboard's, but grid-column applies to the child.

   Note what is deliberately absent: no grid-row, no explicit placement, and no align-self. Cards sit
   in normal auto-placement and stretch to their band's height, which is what removes the gap a short
   card beside a tall one would otherwise leave — and what keeps list position identical to visual
   position, so drag-to-reorder means exactly what it looks like. */
.oc-dw-card[b-afjz9oh4pc] {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0.75rem;
	background: var(--rz-base-background-color, #fff);
	border: 1px solid var(--rz-base-300, #d6d6d6);
	border-radius: var(--rz-card-border-radius, var(--rz-border-radius, 4px));
}

.ws4[b-afjz9oh4pc] {
	grid-column: span 4;
}

.ws6[b-afjz9oh4pc] {
	grid-column: span 6;
}

.ws8[b-afjz9oh4pc] {
	grid-column: span 8;
}

.ws12[b-afjz9oh4pc] {
	grid-column: span 12;
}

/* Below the Radzen md breakpoint three-up stops being readable, so thirds and halves pair up and the
   wider spans go full width; below sm everything stacks. Order is preserved either way. */
@media (max-width: 991px) {
	.ws4[b-afjz9oh4pc],
	.ws6[b-afjz9oh4pc] {
		grid-column: span 6;
	}

	.ws8[b-afjz9oh4pc],
	.ws12[b-afjz9oh4pc] {
		grid-column: span 12;
	}
}

@media (max-width: 767px) {
	.ws4[b-afjz9oh4pc],
	.ws6[b-afjz9oh4pc],
	.ws8[b-afjz9oh4pc],
	.ws12[b-afjz9oh4pc] {
		grid-column: span 12;
	}
}

.oc-dw-header[b-afjz9oh4pc] {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--rz-base-300, #d6d6d6);
}

.oc-dw-title[b-afjz9oh4pc] {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--rz-text-title-color, var(--rz-text-color, #212121));
}

.oc-dw-note[b-afjz9oh4pc] {
	font-size: 0.68rem;
	color: var(--rz-text-secondary-color, #616161);
	text-align: right;
}

.oc-dw-body[b-afjz9oh4pc] {
	flex: 1;
	min-width: 0;
}

/* Customize mode. The bar is inset into the card's own padding so adding it does not change the card's
   width or its position in the band. */
.oc-dw-edit-bar[b-afjz9oh4pc] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: -0.75rem -0.75rem 0.5rem;
	padding: 0.3rem 0.5rem;
	background: var(--rz-base-200, #f5f5f5);
	border-bottom: 1px solid var(--rz-base-300, #d6d6d6);
	border-radius: var(--rz-card-border-radius, var(--rz-border-radius, 4px)) var(--rz-card-border-radius, var(--rz-border-radius, 4px)) 0 0;
}

.oc-dw-handle[b-afjz9oh4pc] {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.25rem;
	min-width: 0;
	cursor: grab;
	user-select: none;
	color: var(--rz-text-secondary-color, #616161);
}

.oc-dw-handle:active[b-afjz9oh4pc] {
	cursor: grabbing;
}

.oc-dw-handle-label[b-afjz9oh4pc] {
	overflow: hidden;
	font-size: 0.7rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* /Components/Shared/DashboardWidgets/DashboardBarChart.razor.rz.scp.css */
/* Dashboard card bar chart (RSS-2601). Sized for a widget body, not a page. */
.oc-dbc[b-n90fz6igs8] {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

/* Chart.js needs a sized box to be responsive into; the card owns the width, this owns the height. */
.oc-dbc-canvas-wrap[b-n90fz6igs8] {
	position: relative;
	height: 4.5rem;
}

.oc-dbc-unavailable[b-n90fz6igs8] {
	font-size: 0.68rem;
	font-style: italic;
	color: var(--rz-text-secondary-color, #616161);
}
/* /Components/Shared/DashboardWidgets/JobListWidget.razor.rz.scp.css */
/* Job List widget (RSS-2712, PRD §5.6). Sized for a ws4 card body.

   Surfaces are mixed off --rz-base-background-color and --rz-text-color, as in
   SessionLeaderboardWidget.razor.css: those two flip with the theme, so light and dark both come out right
   without a per-theme override. */
.oc-jl[b-986ff7b50w] {
	--oc-jl-line: color-mix(in srgb, var(--rz-text-color) 14%, transparent);
	--oc-jl-dim: color-mix(in srgb, var(--rz-text-color) 60%, transparent);
	--oc-jl-accent: color-mix(in srgb, var(--rz-primary) 65%, var(--rz-text-color));
	--oc-jl-setup: color-mix(in srgb, #e8a020 70%, var(--rz-text-color));

	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

/* The list scrolls inside the card rather than growing it (requirement 2). */
.oc-jl-list[b-986ff7b50w] {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 22rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.oc-jl-row[b-986ff7b50w] {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.1rem;
	font-size: 0.75rem;
	border-bottom: 1px solid var(--oc-jl-line);
}

.oc-jl-row:last-child[b-986ff7b50w] {
	border-bottom: none;
}

/* The pill carries a glyph and a word, so the state reads in greyscale (PRD §6.5); the accent colour on a
   completed pill is additive. Fixed width so the job text lines up down the list. */
.oc-jl-status[b-986ff7b50w] {
	flex: 0 0 auto;
	min-width: 6.5rem;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--oc-jl-line);
	border-radius: 999px;
	background: transparent;
	color: var(--rz-text-color);
	font: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.oc-jl-status:hover[b-986ff7b50w],
.oc-jl-status:focus-visible[b-986ff7b50w] {
	border-color: var(--oc-jl-accent);
}

.oc-jl-done .oc-jl-status[b-986ff7b50w] {
	border-color: var(--oc-jl-accent);
	color: var(--oc-jl-accent);
}

.oc-jl-text[b-986ff7b50w] {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* A done job is struck through as well as relabelled — a third cue that survives greyscale. */
.oc-jl-done .oc-jl-text[b-986ff7b50w] {
	text-decoration: line-through;
	color: var(--oc-jl-dim);
}

.oc-jl-badge[b-986ff7b50w] {
	display: inline-block;
	margin-right: 0.3rem;
	padding: 0 0.3rem;
	border: 1px solid var(--oc-jl-setup);
	border-radius: 3px;
	color: var(--oc-jl-setup);
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	vertical-align: middle;
}

.oc-jl-time[b-986ff7b50w] {
	display: inline-block;
	margin-left: 0.3rem;
	font-size: 0.65rem;
	font-variant-numeric: tabular-nums;
	color: var(--oc-jl-dim);
}

.oc-jl-edit[b-986ff7b50w] {
	flex: 1 1 auto;
	min-width: 0;
}

.oc-jl-add[b-986ff7b50w] {
	min-width: 0;
}

/* ---- empty states, stated in words ---- */

.oc-jl-empty[b-986ff7b50w] {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.7rem;
	font-style: italic;
	color: var(--oc-jl-dim);
}

/* RadzenIcon renders its own element, outside this file's isolation scope. */
.oc-jl-empty[b-986ff7b50w]  .rzi {
	font-size: 0.85rem;
}
/* /Components/Shared/DashboardWidgets/RaceControlWidget.razor.rz.scp.css */
/* Race Control widget — PRD §5.10 (RSS-2625).

   Surfaces are mixed off --rz-text-color rather than picked off Radzen's base-* scale, for the reason
   DemoScheduleSection.razor.css documents at length: the base-* scale does not invert with the dark theme,
   so a "light grey" rule or wash stays light grey under white text. --rz-border-color is not defined by
   these themes at all. */
.oc-rc[b-odnxtro0e6] {
	--oc-rc-line: color-mix(in srgb, var(--rz-text-color) 14%, transparent);
	--oc-rc-dim: color-mix(in srgb, var(--rz-text-color) 60%, transparent);

	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.8125rem;
}

/* Just the live marker: the session is named in the dashboard toolbar (RSS-2723). */
.oc-rc-session[b-odnxtro0e6] {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0.5rem;
}

/* Glyph plus the word "Live", never colour alone — green and red measure as near-identical under
   deuteranopia (PRD §6.5). */
.oc-rc-live[b-odnxtro0e6] {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--oc-rc-dim);
	white-space: nowrap;
}

.oc-rc-list[b-odnxtro0e6] {
	display: flex;
	flex-direction: column;

	/* A third-width card in a band with taller neighbours, so a busy session's messages scroll inside it
	   rather than stretching the whole row. Sized to about three entries: the newest readable at a glance,
	   with the cut edge showing there is more. */
	max-height: 9rem;
	overflow-y: auto;
}

.oc-rc-item[b-odnxtro0e6] {
	padding: 0.375rem 0;
	border-bottom: 1px solid var(--oc-rc-line);
}

.oc-rc-item:last-child[b-odnxtro0e6] {
	border-bottom: none;
}

.oc-rc-head[b-odnxtro0e6] {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.oc-rc-time[b-odnxtro0e6] {
	/* Tabular figures so a column of timestamps lines up rather than shimmying by digit width. */
	font-variant-numeric: tabular-nums;
	color: var(--oc-rc-dim);
	white-space: nowrap;
}

.oc-rc-lap[b-odnxtro0e6] {
	color: var(--oc-rc-dim);
	white-space: nowrap;
}

.oc-rc-body[b-odnxtro0e6] {
	margin: 0.125rem 0 0;

	/* Typed by a marshal mid-session, so whatever spacing and line breaks they used are preserved rather
	   than collapsed — reformatting would invent precision the source does not have. */
	white-space: pre-wrap;
}

.oc-rc-empty[b-odnxtro0e6],
.oc-rc-note[b-odnxtro0e6] {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--oc-rc-dim);
}

.oc-rc-note[b-odnxtro0e6] {
	padding-top: 0.25rem;
	border-top: 1px solid var(--oc-rc-line);
	font-size: 0.75rem;
}

/* RadzenIcon renders its own child-scoped element, so it never carries this file's isolation attribute —
   it has to be reached with ::deep or the rule matches nothing. */
.oc-rc-empty[b-odnxtro0e6]  .rzi,
.oc-rc-note[b-odnxtro0e6]  .rzi,
.oc-rc-live[b-odnxtro0e6]  .rzi {
	font-size: 0.875rem;
}
/* /Components/Shared/DashboardWidgets/SessionLeaderboardWidget.razor.rz.scp.css */
/* Session Leaderboard widget (RSS-2600, PRD §5.2). Sized for a ws4 card body.

   Surfaces are mixed off --rz-base-background-color and --rz-text-color rather than picked off Radzen's
   base-* scale, for the reason DemoScheduleSection.razor.css sets out at length: the base-* scale does
   not invert with the dark theme, so a "light grey" row wash stays light grey under white text. The two
   properties mixed here are the two every theme defines and flips, so both themes come out right without
   a per-theme override (AC 4). */
.oc-lb[b-h435mluk7w] {
	--oc-lb-line: color-mix(in srgb, var(--rz-text-color) 14%, transparent);
	--oc-lb-dim: color-mix(in srgb, var(--rz-text-color) 60%, transparent);
	/* Our row's wash. Deliberately faint: it is the least of three cues, not the cue. */
	--oc-lb-wash: color-mix(in srgb, var(--rz-primary) 14%, transparent);
	/* The accent, pulled toward the text colour so it stays readable on either surface — dark-mode
	   primary raw is too dim on a dark panel. */
	--oc-lb-accent: color-mix(in srgb, var(--rz-primary) 65%, var(--rz-text-color));

	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

/* ---- live line ----

   Just the marker: the session is named in the dashboard toolbar (RSS-2723). */

.oc-lb-session[b-h435mluk7w] {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	font-size: 0.65rem;
}

/* Glyph and word together, never colour alone (PRD §6.5). */
.oc-lb-live[b-h435mluk7w] {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--oc-lb-accent);
}

/* RadzenIcon renders its own (child-scoped) element, so it never carries this file's isolation attribute —
   reach it with ::deep or the rule matches nothing and the glyph silently keeps its inherited size. */
.oc-lb-live[b-h435mluk7w]  .rzi {
	font-size: 0.75rem;
}

/* ---- the field ----

   A real MotoAmerica field is 25-30 entries, so the body scrolls rather than making one ws4 card as tall
   as the rest of the dashboard put together. The full field stays in the DOM — this bounds the card, it
   does not filter it (requirement 1). */
.oc-lb-scroll[b-h435mluk7w] {
	max-height: 22rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	min-width: 0;
}

.oc-lb-table[b-h435mluk7w] {
	width: 100%;
	border-collapse: collapse;
}

.oc-lb-table th[b-h435mluk7w] {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--rz-base-background-color, #fff);
	padding: 0.25rem 0.3rem;
	font-size: 0.6rem;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
	color: var(--oc-lb-dim);
	border-bottom: 1px solid var(--oc-lb-line);
}

.oc-lb-table td[b-h435mluk7w] {
	padding: 0.28rem 0.3rem;
	font-size: 0.7rem;
	border-bottom: 1px solid var(--oc-lb-line);
}

.oc-lb-table tr:last-child td[b-h435mluk7w] {
	border-bottom: none;
}

/* Tabular numerals so the columns do not jitter as times update. */
.oc-lb-n[b-h435mluk7w] {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.oc-lb-pos[b-h435mluk7w] {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--oc-lb-dim);
}

.oc-lb-name[b-h435mluk7w] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 0;
	width: 99%;
}

.oc-lb-dim[b-h435mluk7w] {
	color: var(--oc-lb-dim);
}

/* The session's fastest lap is the only value on the card carrying accent colour (PRD §5.2). */
.oc-lb-best[b-h435mluk7w] {
	font-weight: 700;
	color: var(--oc-lb-accent);
}

/* ---- our bike ----

   Three cues, of which colour is only one: the ▸ marker in the position cell, bold weight across the
   row, and the wash with its left edge. The first two survive a greyscale screenshot on their own, which
   is what AC 3 asks for. */
.oc-lb-marker[b-h435mluk7w] {
	display: inline-block;
	width: 0.6rem;
	font-weight: 700;
	color: var(--oc-lb-accent);
}

.oc-lb-table tr.oc-lb-ours td[b-h435mluk7w] {
	background: var(--oc-lb-wash);
	font-weight: 700;
}

.oc-lb-table tr.oc-lb-ours td:first-child[b-h435mluk7w] {
	box-shadow: inset 2px 0 0 var(--oc-lb-accent);
}

.oc-lb-table tr.oc-lb-ours .oc-lb-pos[b-h435mluk7w] {
	color: var(--rz-text-color);
}

/* ---- empty states, stated in words ---- */

.oc-lb-empty[b-h435mluk7w] {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.7rem;
	font-style: italic;
	color: var(--oc-lb-dim);
}

/* ::deep for the same reason as the live marker's icon above. */
.oc-lb-empty[b-h435mluk7w]  .rzi {
	font-size: 0.85rem;
}
/* /Components/Shared/DashboardWidgets/SportityBulletinsWidget.razor.rz.scp.css */
/* Sportity Bulletins widget — PRD §5.1 (RSS-2609).

   Surfaces are mixed off --rz-text-color rather than picked off Radzen's base-* scale, for the reason
   DemoScheduleSection.razor.css documents at length: the base-* scale does not invert with the dark theme,
   so a "light grey" rule or wash stays light grey under white text. --rz-border-color is not defined by
   these themes at all. */
.oc-sb[b-vfcebx4kgx] {
	--oc-sb-line: color-mix(in srgb, var(--rz-text-color) 14%, transparent);
	--oc-sb-dim: color-mix(in srgb, var(--rz-text-color) 60%, transparent);

	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.8125rem;

	/* The rows below size themselves against this card, not the window. A viewport media query would be
	   wrong twice over: it would miss a narrow card in a wide window (which is what this widget becomes the
	   moment it shares a row), and it answers a question about the browser when the one that matters is how
	   much room the card actually has. */
	container-type: inline-size;
}

/* One grid for the whole list, so every row shares the same two column widths and the titles line up with
   each other rather than each row sizing its own meta block. Rows declare the same template twice: the
   literal one is the fallback a browser without subgrid keeps (per-row columns, which still aligns the
   timestamps), and the subgrid line upgrades it to shared columns where it is supported. */
.oc-sb-list[b-vfcebx4kgx] {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-content: start;

	/* The card is full width at the top of the dashboard, so a busy weekend's bulletins scroll inside it
	   rather than pushing every other widget down the page. Enough that the newest are readable at a glance
	   and that the cut-off edge shows there is more, without a full-width card at the top of the page
	   crowding out everything below it. Documents are a single line each, so this is five or six of them
	   and fewer where text bulletins carry a message under the title. */
	max-height: 10rem;
	overflow-y: auto;
}

/* Two columns: what identifies the notice, then the notice itself. The left column is sized to its
   content, so a timestamp always starts at the card's edge and a column of them reads straight down
   whatever chip follows it. The right column is where the title and the body both live, which is the whole
   reason the body lines up under the title without an indent anyone has to keep in step with the left
   column's width. minmax(0, 1fr) rather than 1fr so the title can still ellipsise instead of forcing the
   grid wider than the card. */
.oc-sb-item[b-vfcebx4kgx] {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: max-content minmax(0, 1fr);
	grid-template-columns: subgrid;
	column-gap: 0.5rem;
	align-items: baseline;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--oc-sb-line);
}

/* The timestamp and its chip, in that order. */
.oc-sb-meta[b-vfcebx4kgx] {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.oc-sb-main[b-vfcebx4kgx] {
	min-width: 0;
}

.oc-sb-item:last-child[b-vfcebx4kgx] {
	border-bottom: none;
}

/* One row, one line. The withdrawn marker is short and fixed, so the title is the only thing that can
   absorb the shrink — it ellipsises, carrying its full text in a title attribute. */
.oc-sb-head[b-vfcebx4kgx] {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0.5rem;
}

.oc-sb-time[b-vfcebx4kgx] {
	/* Tabular figures so a column of timestamps lines up rather than shimmying by digit width. */
	font-variant-numeric: tabular-nums;
	color: var(--oc-sb-dim);
	white-space: nowrap;
}

/* When we first saw an undated item, not a time the publisher printed (RSS-2813). The word "Seen" carries
   the distinction; the italic just keeps the eye from reading it as one of the series' own timestamps. */
.oc-sb-seen[b-vfcebx4kgx] {
	font-style: italic;
}

.oc-sb-title[b-vfcebx4kgx] {
	font-weight: 600;

	/* min-width: 0 is what actually lets this shrink — a flex item's default min-width is its content, so
	   without it the title refuses to narrow and pushes the chip off the row instead of ellipsising. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A document's title opens the file (RSS-2748). It inherits the card's colour rather than taking a link
   accent: a column where most rows are documents would otherwise be a wall of coloured text, and the row
   already says it is a file twice over — the glyph and the kind tag. The underline on hover and focus is
   what confirms it is clickable, and :focus-visible keeps it reachable by keyboard. */
.oc-sb-open[b-vfcebx4kgx] {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.oc-sb-open:hover[b-vfcebx4kgx],
.oc-sb-open:focus-visible[b-vfcebx4kgx] {
	text-decoration: underline;
}

/* The folder the series filed a document under — "Results", "Sanctions", "Grids", and occasionally a
   nested "Results/Group A". It leads the row, so a column of chips runs down the left edge and a crew
   looking for the sanctions can find them by shape rather than by reading. A chip rather than plain text
   because it is a category to sort by, not prose to read; outlined rather than filled, because a column of
   filled chips on a dense card reads as noise, and the border tracks --oc-sb-line so it inverts with the
   theme like every other rule on this card. */
.oc-sb-folder[b-vfcebx4kgx] {
	flex: none;
	padding: 0 0.375rem;
	border: 1px solid var(--oc-sb-line);
	border-radius: 999px;
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var(--oc-sb-dim);
	white-space: nowrap;
}

/* The short, fixed-width markers keep their full size while the title shrinks around them. */
.oc-sb-time[b-vfcebx4kgx],
.oc-sb-tag[b-vfcebx4kgx] {
	flex: none;
}

.oc-sb-body[b-vfcebx4kgx] {
	margin: 0.125rem 0 0;

	/* Publishers write multi-paragraph bulletins and the paragraphs are separate instructions, so the
	   line breaks in the source are honoured. */
	white-space: pre-wrap;
}

/* A withdrawn bulletin stays on the card — something acted on minutes ago should be visibly retracted
   rather than silently gone. Dimmed, and carrying a <del> element in the markup so the retraction survives
   greyscale and reaches a screen reader; the opacity here is additive, never the only cue (PRD §6.5). */
.oc-sb-withdrawn[b-vfcebx4kgx] {
	opacity: 0.6;
}

.oc-sb-withdrawn .oc-sb-title[b-vfcebx4kgx] {
	text-decoration: line-through;
}

/* A withdrawn document stays clickable, so it has to keep saying so. Both rules land on the same <a> at
   the same specificity, so without this the later strikethrough simply replaced the underline and the only
   cue that the row opens something disappeared on exactly the rows most worth opening. */
.oc-sb-withdrawn .oc-sb-open:hover[b-vfcebx4kgx],
.oc-sb-withdrawn .oc-sb-open:focus-visible[b-vfcebx4kgx] {
	text-decoration: line-through underline;
}

.oc-sb-tag[b-vfcebx4kgx] {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--oc-sb-dim);
}

.oc-sb-empty[b-vfcebx4kgx],
.oc-sb-stale[b-vfcebx4kgx] {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--oc-sb-dim);
}

.oc-sb-stale[b-vfcebx4kgx] {
	padding-top: 0.25rem;
	border-top: 1px solid var(--oc-sb-line);
	font-size: 0.75rem;
}

/* RadzenIcon renders its own child-scoped element, so it never carries this file's isolation attribute —
   it has to be reached with ::deep or the rule matches nothing. */
.oc-sb-empty[b-vfcebx4kgx]  .rzi,
.oc-sb-stale[b-vfcebx4kgx]  .rzi {
	font-size: 0.875rem;
}

/* Below about a phone's width there is no shrink left to take: the timestamp alone is most of a 360px row,
   and with a Withdrawn marker beside it the title measures nothing at all — a row of metadata around an
   invisible title, overflowing sideways because the list's overflow-y makes overflow-x compute to auto.
   This is a PWA a crew reads on a phone in the paddock, so the row is allowed to wrap again there. Two
   lines beat a title nobody can read. */
@container (max-width: 30rem) {
	/* No room for two columns, so the meta line sits above the notice rather than squeezing it. */
	.oc-sb-list[b-vfcebx4kgx] {
		grid-template-columns: minmax(0, 1fr);
	}

	.oc-sb-item[b-vfcebx4kgx] {
		row-gap: 0.125rem;
	}

	.oc-sb-meta[b-vfcebx4kgx] {
		flex-wrap: wrap;
	}

	.oc-sb-head[b-vfcebx4kgx] {
		flex-wrap: wrap;
	}

	.oc-sb-title[b-vfcebx4kgx] {
		/* Wrapped, the title has the row to itself and should show all of it rather than ellipsising at a
		   width it is no longer confined to. overflow-wrap because these titles are often machine-named
		   sheets with no spaces to break at, and "wrap at break opportunities" with none available is just
		   overflow again. */
		overflow: visible;
		white-space: normal;
		overflow-wrap: anywhere;
	}
}
/* /Components/Shared/DashboardWidgets/WeatherWidget.razor.rz.scp.css */
/* Weather widget (RSS-2601, PRD §5.3). Sized for a ws4 card body. */
.oc-ww[b-c7psjdur5t] {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

/* The hero reading. Tabular numerals so the value does not jitter as it updates — the same
   convention the leaderboard stat tiles use. */
.oc-ww-hero[b-c7psjdur5t] {
	text-align: center;
	margin-bottom: 0.35rem;
}

.oc-ww-hero-label[b-c7psjdur5t] {
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--rz-text-secondary-color, #616161);
}

.oc-ww-hero-val[b-c7psjdur5t] {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--rz-text-title-color, var(--rz-text-color, #212121));
}

.oc-ww-kv[b-c7psjdur5t] {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.7rem;
}

.oc-ww-kv > span:first-child[b-c7psjdur5t] {
	color: var(--rz-text-secondary-color, #616161);
}

.oc-ww-kv > span:last-child[b-c7psjdur5t] {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.oc-ww-section[b-c7psjdur5t] {
	margin-top: 0.4rem;
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--rz-text-secondary-color, #616161);
}

/* Staleness and unavailability are stated in words with an icon, never by colour alone. */
.oc-ww-asof[b-c7psjdur5t] {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.3rem;
	font-size: 0.6rem;
	color: var(--rz-text-secondary-color, #616161);
}

.oc-ww-asof.oc-ww-stale[b-c7psjdur5t] {
	font-weight: 600;
	color: var(--rz-warning-dark, var(--rz-warning, #ed6c02));
}

.oc-ww-asof .rzi[b-c7psjdur5t] {
	font-size: 0.8rem;
}

.oc-ww-unavailable[b-c7psjdur5t],
.oc-ww-empty[b-c7psjdur5t] {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.7rem;
	font-style: italic;
	color: var(--rz-text-secondary-color, #616161);
}
/* /Components/Shared/DemoScheduleSection.razor.rz.scp.css */
/* Demo scheduling board (RSS-2493, RSS-2494).

   Only two hues carry state — blue for a plan, green for a bike that is out now. Everything else is
   neutral. Complete is deliberately colourless and open cells are plain, so the eye lands on what is
   happening rather than on the grid. Red is reserved for the conflict alerts and never appears beside a
   green cell. Each state also renders its word, because blue and green separate by very little under
   tritanopia.

   Colours are derived, not picked. Radzen swaps the whole theme stylesheet for dark mode, but its
   base-* scale does NOT invert with it — in fluent-dark --rz-base-100 is #adadad and --rz-base-200 is
   #5c5c5c, both still light, while the surface underneath becomes base-700 and the text becomes white.
   Painting a cell with base-100 therefore put light grey behind white text. --rz-border-color is not
   defined by these themes at all, so every `var(--demo-line)` was silently using its
   light-mode hex in both.

   So the board mixes its own surfaces off the two things every theme does define and does flip:
   --rz-base-background-color and --rz-text-color. That holds for any theme, present or future, rather
   than being tuned to the two we ship. */

/* Out of the layout entirely — it exists only to own the tokens below. */
.demo-scope[b-fowu0u938i] { display: contents; }

.demo-scope[b-fowu0u938i] {
    /* A recessed surface: the time column, a completed cell, a band. */
    --demo-recess: color-mix(in srgb, var(--rz-text-color) 6%, var(--rz-base-background-color));
    /* The sticky header row, one step further from the surface than a recess. */
    --demo-head: color-mix(in srgb, var(--rz-text-color) 12%, var(--rz-base-background-color));
    /* Grid lines and the hatching on unavailable slots. */
    --demo-line: color-mix(in srgb, var(--rz-text-color) 18%, transparent);
    /* State words: keep the hue, but pull it far enough toward the text colour to stay readable on the
       surface of either theme — dark-mode success is #107c10, which on a dark panel is unreadable raw. */
    --demo-on-track-text: color-mix(in srgb, var(--rz-success) 60%, var(--rz-text-color));
    --demo-warn-text: color-mix(in srgb, var(--rz-danger) 70%, var(--rz-text-color));
}

/* ---- day tabs + counters ---- */

.demo-topbar[b-fowu0u938i] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 0.75rem;
}

.demo-days[b-fowu0u938i] { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.demo-daytab[b-fowu0u938i] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: start;
    cursor: pointer;
    background: var(--rz-base-background-color);
    border: 1px solid var(--demo-line);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    color: inherit;
    font: inherit;
    min-width: 8rem;
}

.demo-daytab:hover:not(:disabled)[b-fowu0u938i] { border-color: var(--rz-text-secondary-color); }
.demo-daytab.on[b-fowu0u938i] { border-color: currentcolor; box-shadow: inset 0 0 0 1px currentcolor; }
.demo-daytab .dl[b-fowu0u938i] { font-weight: 600; font-size: 0.85rem; }
.demo-daytab .dphase[b-fowu0u938i] { font-size: 0.7rem; color: var(--rz-text-secondary-color); }
.demo-daytab .dphase[b-fowu0u938i] { letter-spacing: 0.01em; }

.demo-counters[b-fowu0u938i] { display: flex; gap: 0.5rem; }

/* Sits beside the counters, and wraps under them on a narrow screen rather than squeezing them. */
.demo-exports[b-fowu0u938i] { display: flex; gap: 0.35rem; align-items: center; }

.demo-counter[b-fowu0u938i] {
    border: 1px solid var(--demo-line);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-direction: column;
    min-width: 4.5rem;
}

.demo-counter .k[b-fowu0u938i] { font-size: 0.65rem; letter-spacing: 0.01em; color: var(--rz-text-secondary-color); }
.demo-counter .v[b-fowu0u938i] { font-size: 1.1rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- three panes: rules · grid · riders ---- */

.demo-board[b-fowu0u938i] {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr) 15rem;
    gap: 1rem;
    align-items: start;
}

/* Each pane scrolls on its own so the rules stay put while the grid moves, and the grid's header stays
   put while you move down the day. Stacks below 1100px. */
@media (min-width: 1101px) {
    .demo-rules[b-fowu0u938i],
    .demo-riders[b-fowu0u938i],
    .demo-gridwrap[b-fowu0u938i] {
        max-height: 40rem;
        overflow-y: auto;
    }
}

@media (max-width: 1100px) {
    .demo-board[b-fowu0u938i] { grid-template-columns: minmax(0, 1fr); }
}

.demo-rules[b-fowu0u938i],
.demo-riders[b-fowu0u938i] {
    border: 1px solid var(--demo-line);
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
}

.demo-pane-head[b-fowu0u938i] {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: var(--rz-text-secondary-color);
    font-weight: 650;
    margin-block-end: 0.5rem;
}

.demo-rsec[b-fowu0u938i] { padding-block: 0.6rem; border-top: 1px solid var(--demo-line); }
.demo-rsec:first-of-type[b-fowu0u938i] { border-top: 0; padding-block-start: 0; }

.demo-rsec > h4[b-fowu0u938i] {
    margin: 0 0 0.45rem;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    color: var(--rz-text-secondary-color);
    font-weight: 650;
    display: flex;
    justify-content: space-between;
}

.demo-count[b-fowu0u938i] { font-variant-numeric: tabular-nums; }
.demo-hint[b-fowu0u938i] { font-size: 0.75rem; color: var(--rz-text-secondary-color); margin: 0.25rem 0 0; }

/* ---- rotation editor ---- */

.demo-rot-grid[b-fowu0u938i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem 2.2rem auto;
    gap: 0.3rem 0.35rem;
    align-items: center;
    margin-block-end: 0.4rem;
}

.demo-rot-head[b-fowu0u938i] { font-size: 0.65rem; letter-spacing: 0.01em; color: var(--rz-text-secondary-color); }
.demo-rot-btns[b-fowu0u938i] { display: flex; gap: 0.1rem; }

.demo-oneoffs[b-fowu0u938i] { margin-block-start: 0.6rem; }
.demo-oneoff-row[b-fowu0u938i] { display: flex; align-items: center; gap: 0.35rem; margin-block: 0.25rem; flex-wrap: wrap; }
.demo-oneoff-label[b-fowu0u938i] { font-size: 0.78rem; flex: 1 1 6rem; }

.demo-field[b-fowu0u938i] { display: flex; align-items: center; gap: 0.4rem; margin-block: 0.3rem; font-size: 0.78rem; }
.demo-field > span:first-child[b-fowu0u938i] { flex: 1 1 auto; color: var(--rz-text-secondary-color); }
.demo-lunch[b-fowu0u938i] { gap: 0.4rem; }

/* Recessive: it reports, it is not a control. */
.demo-rot-summary[b-fowu0u938i] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    font-variant-numeric: tabular-nums;
    margin-block: 0.5rem;
    line-height: 1.4;
}

.demo-rot-actions[b-fowu0u938i] { margin-block-start: 0.7rem; }

/* ---- the grid ---- */

.demo-gridwrap[b-fowu0u938i] { overflow-x: auto; }

/* Switching day keeps the old grid on screen rather than blanking, so the pane does not jump. */
.demo-stale[b-fowu0u938i] { opacity: 0.55; transition: opacity 0.12s; }

.demo-conflicts[b-fowu0u938i] { margin: 0; padding-inline-start: 1.1rem; }

.demo-grid[b-fowu0u938i] { border-collapse: collapse; width: 100%; min-width: 32rem; }

.demo-grid th[b-fowu0u938i],
.demo-grid td[b-fowu0u938i] {
    border: 1px solid var(--demo-line);
    padding: 0.35rem 0.5rem;
    text-align: start;
    vertical-align: top;
}

.demo-grid thead th[b-fowu0u938i] { background: var(--demo-head); font-weight: 600; white-space: nowrap; position: sticky; top: 0; z-index: 1; }

.demo-time[b-fowu0u938i] { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; background: var(--demo-recess); }
.demo-grp[b-fowu0u938i] { font-weight: 400; color: var(--rz-text-secondary-color); font-size: 0.75rem; }

/* The day's shape: another group is on track, so the demo bikes are idle. Quiet, hatched, no hue —
   this is most of the day and must not compete with the bookable rows. */
.demo-band td[b-fowu0u938i],
.demo-lunch-row td[b-fowu0u938i],
.demo-cold-row td[b-fowu0u938i] {
    background: var(--demo-recess);
    color: var(--rz-text-secondary-color);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    padding-block: 0.2rem;
}

.demo-band td[b-fowu0u938i] {
    background-image: repeating-linear-gradient(45deg, transparent 0 5px, var(--demo-line) 5px 6px);
}

.demo-lunch-row td[b-fowu0u938i],
.demo-cold-row td[b-fowu0u938i] { letter-spacing: 0.02em; font-weight: 600; }

.demo-cell[b-fowu0u938i] { min-width: 8rem; }
.demo-rider[b-fowu0u938i] { display: block; font-weight: 600; }

.demo-chip[b-fowu0u938i] {
    display: inline-block;
    font-size: 0.62rem;
    letter-spacing: 0.01em;
    border: 1px solid var(--demo-line);
    border-radius: 3px;
    padding: 0 0.25rem;
    color: var(--rz-text-secondary-color);
}

.demo-state[b-fowu0u938i] { display: block; font-size: 0.7rem; color: var(--rz-text-secondary-color); letter-spacing: 0.02em; }

/* A plan: assigned, still ahead of the clock. */
.demo-planned[b-fowu0u938i] { border-inline-start: 3px solid var(--rz-info, #2a78d6); }

/* On track right now. */
.demo-on-track[b-fowu0u938i] { border-inline-start: 3px solid var(--rz-success, #0ca30c); }
.demo-on-track .demo-state[b-fowu0u938i] { color: var(--demo-on-track-text); font-weight: 700; }

/* Ran and finished — a record, so it recedes. */
.demo-complete[b-fowu0u938i] { background: var(--demo-recess); }

/* ---- riders rail ---- */

.demo-rcard[b-fowu0u938i] {
    border: 1px solid var(--demo-line);
    border-radius: 6px;
    padding: 0.3rem 0.45rem;
    margin-block-end: 0.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.demo-rcard:hover[b-fowu0u938i] { border-color: var(--rz-text-secondary-color); }
.demo-rcard.sel[b-fowu0u938i] { border-color: currentcolor; box-shadow: inset 0 0 0 1px currentcolor; }
.demo-rcard.booked[b-fowu0u938i] { opacity: 0.85; }
.demo-rcard .rn[b-fowu0u938i] { font-size: 0.8rem; font-weight: 600; flex: 1 1 auto; }

/* ---- bikes on the schedule ---- */

.demo-bikerow[b-fowu0u938i] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-block: 0.15rem;
    border-top: 1px solid var(--demo-line);
}

.demo-bikerow:first-of-type[b-fowu0u938i] { border-top: 0; }
.demo-bikerow .bn[b-fowu0u938i] { flex: 1 1 auto; font-size: 0.8rem; font-weight: 600; }

.demo-addbike[b-fowu0u938i] { margin-block-start: 0.4rem; }
.demo-addbike-actions[b-fowu0u938i] { display: flex; gap: 0.3rem; margin-block-start: 0.3rem; }

/* ---- rider board ---- */

.demo-addrider-btn[b-fowu0u938i] { margin-block: 0.4rem; }
.demo-addrider[b-fowu0u938i] { margin-block: 0.4rem; display: grid; gap: 0.35rem; }

.demo-avatar[b-fowu0u938i] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    flex: none;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--demo-recess);
    border: 1px solid var(--demo-line);
}

.demo-avatar img[b-fowu0u938i] {
    width: 1.75rem;
    height: 1.75rem;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}
.demo-avatar .initials[b-fowu0u938i] { font-size: 0.62rem; font-weight: 700; color: var(--rz-text-secondary-color); }

.demo-rcard .rbody[b-fowu0u938i] { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; flex: 1 1 auto; }
.demo-rcard .rsub[b-fowu0u938i] { font-size: 0.68rem; color: var(--rz-text-secondary-color); display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.demo-rcard .rnote[b-fowu0u938i] { font-size: 0.68rem; color: var(--rz-text-secondary-color); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.demo-or[b-fowu0u938i] { font-size: 0.68rem; color: var(--rz-text-secondary-color); text-align: center; padding-block: 0.2rem; }

/* Dragging a rider onto a slot. The cue is a dashed ring rather than a fill, so it cannot be mistaken
   for one of the two state hues. */
.demo-cell[draggable][b-fowu0u938i], .demo-cell[b-fowu0u938i] { transition: outline-color 0.1s; }
.demo-drop[b-fowu0u938i] { outline: 2px dashed var(--rz-text-secondary-color); outline-offset: -3px; }
.demo-rcard[draggable="true"][b-fowu0u938i] { cursor: grab; }
.demo-rcard[draggable="true"]:active[b-fowu0u938i] { cursor: grabbing; }

.demo-oneoffs[b-fowu0u938i] { margin-block-start: 0.7rem; padding-block-start: 0.5rem; border-top: 1px solid var(--demo-line); }

.demo-oneoff-head[b-fowu0u938i] {
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    color: var(--rz-text-secondary-color);
    font-weight: 650;
}

.demo-oneoff-label[b-fowu0u938i] { display: flex; flex-direction: column; font-size: 0.78rem; line-height: 1.25; }
.demo-oneoff-why[b-fowu0u938i] { font-size: 0.68rem; color: var(--rz-text-secondary-color); font-style: italic; }
.demo-oneoff-edit[b-fowu0u938i] { display: flex; align-items: center; gap: 0.3rem; margin: 0.15rem 0 0.45rem 1.5rem; flex-wrap: wrap; }
.demo-oneoff-when[b-fowu0u938i] { font-size: 0.68rem; color: var(--rz-text-secondary-color); font-variant-numeric: tabular-nums; }

/* A unit on the charger. Marked out rather than merely quiet — it looks bookable otherwise, and the
   crew needs to see at a glance which columns are out of action. The word "Charging" is always
   present, so the colour is reinforcement and never the only signal (it also sits beside on-track
   green in the next column, where hue alone separates badly under deuteranopia). */
.demo-charging[b-fowu0u938i] {
    border-inline-start: 3px solid var(--rz-danger, #d03b3b);
    background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--demo-recess) 6px 7px);
}

.demo-charging .demo-state[b-fowu0u938i] { color: var(--demo-warn-text); font-weight: 700; }
.demo-charge-wait[b-fowu0u938i] { display: block; font-size: 0.68rem; color: var(--rz-text-secondary-color); font-variant-numeric: tabular-nums; }
.demo-warn[b-fowu0u938i] { color: var(--demo-warn-text); }

/* A unit taken off the schedule that still holds a ride today. Its empty slots never open, so they read
   like the idle bands rather than like something bookable — same quiet hatch, no hue. The header carries
   the words "off the schedule", so nothing here depends on noticing a shade. */
.demo-closed[b-fowu0u938i] {
    background: var(--demo-recess);
    background-image: repeating-linear-gradient(45deg, transparent 0 5px, var(--demo-line) 5px 6px);
}

.demo-closed .demo-state[b-fowu0u938i] { color: var(--rz-text-secondary-color); font-weight: 500; }

.demo-grid thead th.demo-offfleet[b-fowu0u938i] { color: var(--rz-text-secondary-color); }

.demo-offfleet-tag[b-fowu0u938i] {
    display: block;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--rz-text-secondary-color);
}

/* The rules pane hides; the grid takes the space back rather than leaving a gap. */
.demo-rules-hidden[b-fowu0u938i] { grid-template-columns: minmax(0, 1fr) 15rem; }

@media (max-width: 1100px) {
    .demo-rules-hidden[b-fowu0u938i] { grid-template-columns: minmax(0, 1fr); }
}

.demo-pane-head[b-fowu0u938i] { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.demo-showrules[b-fowu0u938i] { margin-block-end: 0.5rem; }

/* The "someone else changed this day" notice: message and its Refresh button on one line, wrapping to two
   on a narrow board rather than squashing the button. */
.demo-remote-changed[b-fowu0u938i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
/* /Components/Shared/EventRiderRail.razor.rz.scp.css */
.rider-rail[b-pfcsodo81k] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.rail-section-header[b-pfcsodo81k] {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-300);
}

.rail-row[b-pfcsodo81k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--rz-base-200);
    /* Reserve the 3px left-border width so selection doesn't cause layout shift */
    border-left: 3px solid transparent;
    transition: background 0.1s;
}

.rail-row:last-child[b-pfcsodo81k] {
    border-bottom: none;
}

.rail-row:hover[b-pfcsodo81k] {
    background: var(--rz-base-200);
}

.rail-row.selected[b-pfcsodo81k] {
    background: color-mix(in srgb, var(--rz-primary) 12%, var(--rz-base-background-color));
    border-left-color: var(--rz-primary);
}

/* ── Avatar ─────────────────────────────────────────── */
.rail-avatar[b-pfcsodo81k] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}

.rail-avatar-img[b-pfcsodo81k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.rail-avatar-initials[b-pfcsodo81k] {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

/* ── Rider info ─────────────────────────────────────── */
.rail-rider-body[b-pfcsodo81k] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.rail-rider-name[b-pfcsodo81k] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-rider-sub[b-pfcsodo81k] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Best lap ───────────────────────────────────────── */
.rail-best-lap[b-pfcsodo81k] {
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.rail-no-data[b-pfcsodo81k] {
    color: var(--rz-text-disabled-color);
    font-weight: 400;
}
/* /Components/Shared/ManageSetupsPanel.razor.rz.scp.css */
/* Right slide-over for the alternate-setups manager (RSS-2411). Ported from the mockup's .panel-scrim/.panel
   translateX transition. Kept as a custom CSS slide-over (not a Radzen dialog) so it reads as a persistent
   side panel over the setup grid. */

/* Clipping overlay for the slide-over (RSS-2430): .rz-body carries a theme transform (translateZ(0)),
   so position:fixed in here anchors to the layout body — without this wrapper the closed panel's
   translateX(100%) overflowed it and produced a permanent horizontal scrollbar. The overlay pins to the
   containing block, clips the off-screen panel, and lets pointer events through while closed. */
.ms-overlay[b-cnvf34b9al] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1040;
}

.ms-scrim[b-cnvf34b9al] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.ms-scrim.show[b-cnvf34b9al] {
    opacity: 1;
    pointer-events: auto;
}

.ms-panel[b-cnvf34b9al] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 480px;
    /* The overlay is pointer-events:none so the closed slide-over never blocks the page; the panel
       itself re-enables events (it's clipped away while closed, interactive while open). */
    pointer-events: auto;
    max-width: 96vw;
    background: var(--rz-base-background-color, #fff);
    box-shadow: -8px 0 30px rgba(0, 0, 0, .25);
    transform: translateX(100%);
    transition: transform .22s ease;
    z-index: 1041;
    display: flex;
    flex-direction: column;
}

.ms-panel.show[b-cnvf34b9al] {
    transform: translateX(0);
}

.ms-head[b-cnvf34b9al] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
    font-weight: 600;
}

/* ::deep — ms-x sits on a RadzenIcon, so the rendered <i> lacks this file's CSS-isolation scope
   attribute; without ::deep the rule never matches and the X neither right-aligns nor gets a
   pointer cursor (RSS-2430). */
.ms-head[b-cnvf34b9al]  .ms-x {
    margin-left: auto;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
}

.ms-head[b-cnvf34b9al]  .ms-x:hover {
    color: var(--rz-text-color);
}

.ms-sub[b-cnvf34b9al] {
    padding: .5rem 1rem;
    font-size: .78rem;
    color: var(--rz-text-secondary-color);
    border-bottom: 1px solid var(--rz-base-200);
}

.ms-chips[b-cnvf34b9al] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
    align-items: center;
}

.ms-chip[b-cnvf34b9al] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    padding: .3rem .7rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 16px;
    background: var(--rz-base-background-color, #fff);
    cursor: pointer;
}

.ms-chip:hover[b-cnvf34b9al] {
    background: var(--rz-base-200);
}

.ms-chip.sel[b-cnvf34b9al] {
    border-color: var(--rz-primary);
    color: var(--rz-primary-dark);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--rz-primary);
}

.ms-chip.add[b-cnvf34b9al] {
    border-style: dashed;
    color: var(--rz-text-secondary-color);
}

/* SortableJS drag cues (RSS-2431 drag-drop reorder, same classes as the Mechanics cards). */
.ms-chip.sortable[b-cnvf34b9al] {
    cursor: grab;
}

.ms-chip.sortable-ghost[b-cnvf34b9al] {
    opacity: 0.4;
    border-style: dashed;
    border-color: var(--rz-primary);
}

.ms-chip.sortable-chosen[b-cnvf34b9al] {
    background: var(--rz-base-200);
}

.ms-body[b-cnvf34b9al] {
    flex: 1;
    overflow: auto;
    padding: 1rem;
}

.ms-empty[b-cnvf34b9al] {
    color: var(--rz-text-secondary-color);
}

.ms-icon-picker[b-cnvf34b9al] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    margin: .2rem 0 .6rem;
}

.ms-ip[b-cnvf34b9al] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--rz-base-background-color, #fff);
}

.ms-ip.sel[b-cnvf34b9al] {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 1px var(--rz-primary);
}

/* Icon-color swatches (RSS-2430), mirroring the icon picker. The null/default swatch shows a reset glyph. */
.ms-color-picker[b-cnvf34b9al] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    margin: .2rem 0 .6rem;
}

.ms-cp[b-cnvf34b9al] {
    width: 26px;
    height: 26px;
    border: 1px solid var(--rz-base-300);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--rz-base-background-color, #fff);
}

.ms-cp.sel[b-cnvf34b9al] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 1px;
}

.ms-cp[b-cnvf34b9al]  .rzi {
    font-size: 1rem;
    color: var(--rz-text-secondary-color);
}

.ms-foot[b-cnvf34b9al] {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .7rem 1rem;
    border-top: 1px solid var(--rz-base-200);
    background: var(--rz-base-100);
}

.ms-autosave[b-cnvf34b9al] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--rz-text-secondary-color);
}

/* Editable value grid for the selected setup (RSS-2412). */
.ms-values[b-cnvf34b9al] {
    margin-top: .4rem;
}

.ms-value-grid[b-cnvf34b9al] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.ms-value-grid th[b-cnvf34b9al] {
    text-align: left;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    padding: .25rem .4rem;
    border-bottom: 1px solid var(--rz-base-300);
    position: sticky;
    top: 0;
    background: var(--rz-base-background-color, #fff);
}

/* The Setup / Run value columns render centered content (SetupValueCell inputs and .ms-compare-val), so
   their headers center too instead of inheriting the default left alignment. */
.ms-value-grid th.ms-th-center[b-cnvf34b9al] {
    text-align: center;
}

.ms-value-grid td[b-cnvf34b9al] {
    padding: .15rem .4rem;
    border-bottom: 1px solid var(--rz-base-200);
    vertical-align: middle;
}

.ms-value-grid .ms-cat[b-cnvf34b9al],
.ms-value-grid .ms-unit[b-cnvf34b9al] {
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.ms-value-grid .ms-val[b-cnvf34b9al] {
    width: 6.5rem;
}

/* Compare column (RSS-2416): read-only run values beside the setup, with amber diff highlighting. */
.ms-compare-picker[b-cnvf34b9al] {
    margin-bottom: .5rem;
}

.ms-value-grid .ms-compare-val[b-cnvf34b9al] {
    text-align: center;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* Amber highlight on a setting whose run value differs from the setup value. Mirrors the main grid's
   .setting-changed treatment (that one is scoped to BikeSetupConfiguration.razor.css, so it is redefined
   here for the panel's own scoped stylesheet). */
.ms-value-grid .setting-changed[b-cnvf34b9al] {
    background-color: rgba(255, 193, 7, 0.22);
    font-weight: 600;
    color: var(--rz-text-color);
}
/* /Components/Shared/RiderEventDetail.razor.rz.scp.css */
.detail-empty[b-u54ckxw6v6] {
    color: var(--rz-text-secondary-color);
    padding: 2rem;
    text-align: center;
}

/* ── Rider summary card (header + KPI strip) ─────────── */
.rider-summary[b-u54ckxw6v6] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

/* ── KPI strip ───────────────────────────────────────── */
.kpi-strip[b-u54ckxw6v6] {
    display: flex;
    gap: 0;
}

.kpi-tile[b-u54ckxw6v6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-right: 1px solid var(--rz-base-300);
    min-width: 0;
}

.kpi-tile:last-child[b-u54ckxw6v6] {
    border-right: none;
}

.kpi-label[b-u54ckxw6v6] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.kpi-value[b-u54ckxw6v6] {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
    white-space: nowrap;
}

/* ── Rider header ────────────────────────────────────── */
.rider-header[b-u54ckxw6v6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-300);
}

.rider-header-left[b-u54ckxw6v6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.detail-avatar[b-u54ckxw6v6] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.detail-avatar-img[b-u54ckxw6v6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.detail-avatar-initials[b-u54ckxw6v6] {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
}

.rider-header-info[b-u54ckxw6v6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rider-header-name[b-u54ckxw6v6] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.rider-header-sub[b-u54ckxw6v6] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* ── Nav chips ───────────────────────────────────────── */
.rider-nav-chips[b-u54ckxw6v6] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.nav-chip[b-u54ckxw6v6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--rz-border-radius);
    border: none;
    background: var(--rz-primary);
    color: var(--rz-on-primary);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.12s;
}

.nav-chip:hover[b-u54ckxw6v6] {
    filter: brightness(1.1);
    text-decoration: none;
    color: var(--rz-on-primary);
}

/* ── Day header ──────────────────────────────────────── */
.day-header[b-u54ckxw6v6] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    padding: 1rem 0 0.5rem;
}

.day-rule[b-u54ckxw6v6] {
    flex: 1;
    height: 1px;
    background: var(--rz-base-200);
}

/* ── Session grid ────────────────────────────────────── */
.session-grid[b-u54ckxw6v6] {
    display: grid;
    /* Fixed 210px columns (not 1fr): cards keep a constant width and only the
       column count changes on resize, so they no longer stretch-then-snap. */
    grid-template-columns: repeat(auto-fill, 210px);
    gap: 10px;
    margin-bottom: 0.25rem;
}

/* ── Session card ────────────────────────────────────── */
.sc[b-u54ckxw6v6] {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: background 0.14s, box-shadow 0.14s;
}

/* Lift on hover via box-shadow, not transform: a translateY moves the card out from
   under the pointer, which causes a hover gained/lost oscillation (flicker) and a
   visible per-card jump as the mouse sweeps the grid. box-shadow doesn't move the
   hit target, so the lift reads cleanly. */
.sc:hover[b-u54ckxw6v6] {
    background: var(--rz-base-100);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Top section: session info */
.sc-top[b-u54ckxw6v6] {
    padding: 11px 13px 0;
}

/* Row 1: name + time */
.sc-row1[b-u54ckxw6v6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 5px;
}

.sc-row1-right[b-u54ckxw6v6] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.sc-name[b-u54ckxw6v6] {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-time[b-u54ckxw6v6] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.sc-chevron[b-u54ckxw6v6] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}

.sc-chevron-icon[b-u54ckxw6v6] {
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s;
}

.sc-chevron-icon.sc-chevron-open[b-u54ckxw6v6] {
    transform: rotate(180deg);
}

/* Meta row: N runs · N laps */
.sc-meta[b-u54ckxw6v6] {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 9px;
}

.sc-meta b[b-u54ckxw6v6] {
    color: var(--rz-text-color);
    font-weight: 600;
}

/* Bottom section: best lap + top speed */
.sc-bottom[b-u54ckxw6v6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 7px 13px 11px;
    border-top: 1px dashed var(--rz-base-300);
}

/* Fastest session: green on best lap time and its lap reference only */
.sc-bottom.sc-bottom-fastest .sc-time-big[b-u54ckxw6v6],
.sc-bottom.sc-bottom-fastest .sc-time-big .sc-lap-num[b-u54ckxw6v6] {
    color: var(--rz-success);
}

.sc-stat[b-u54ckxw6v6] {
    display: flex;
    flex-direction: column;
}


.sc-lab[b-u54ckxw6v6] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.sc-time-big[b-u54ckxw6v6] {
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

.sc-stat-val[b-u54ckxw6v6] {
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

.sc-lap-num[b-u54ckxw6v6] {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--rz-text-secondary-color);
    margin-left: 2px;
}

/* Gap to first, beside the position: a hair more separation and tabular figures so a column of gaps
   down the day's cards lines up (RSS-2540). */
.sc-gap[b-u54ckxw6v6] {
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

/* ── Run list (shown when expanded) ─────────────────── */
.sc-runlist[b-u54ckxw6v6] {
    padding: 5px 13px 0;
    border-top: 1px dashed var(--rz-base-300);
}

.sc-runrow[b-u54ckxw6v6] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
}

.sc-runrow:hover[b-u54ckxw6v6] {
    background: var(--rz-base-200);
}

.sc-runrow.sc-runrow-fast .sc-runbest[b-u54ckxw6v6] {
    color: var(--rz-success);
}

.sc-runlink[b-u54ckxw6v6] {
    font-weight: 700;
    color: var(--rz-primary);
    text-decoration: none;
    white-space: nowrap;
}

.sc-runlink:hover[b-u54ckxw6v6] {
    text-decoration: underline;
}

.sc-runlaps[b-u54ckxw6v6] {
    color: var(--rz-text-secondary-color);
    flex: 1;
    white-space: nowrap;
}

.sc-runbest[b-u54ckxw6v6] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* /Components/Shared/RunSetupPills.razor.rz.scp.css */
/* Per-run alternate-setup pills (RSS-2413). Styled after the mockup's .run-setup / .rsp: one small pill
   per setup — icon always, name shown only on the active pill (the one whose id matches the run's
   OnSetupOutingId). Active state echoes the focused-session warning hue via --rz-warning.
   Moved here from BikeSetupConfiguration.razor.css when the pills were extracted into this component. */
.run-setup[b-eaaz5isr45] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	margin: 3px 0 1px;
}

.rsp[b-eaaz5isr45] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 24px;
	padding: 0 8px;
	border-radius: 12px;
	border: 1px solid var(--rz-base-300, #d6d6d6);
	background: var(--rz-base-background-color, #fff);
	color: var(--rz-text-secondary-color, #616161);
	cursor: pointer;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* RadzenIcon renders its own (child-scoped) element, so reach it with ::deep. Size via font-size only —
   pinning width/height below the theme's icon line box clips the ligature glyph to nothing, which is
   why the pills looked empty (RSS-2430). */
[b-eaaz5isr45] .rsp .rz-icon,
[b-eaaz5isr45] .rsp .rzi {
	font-size: 1.05rem;
	line-height: 1;
}

.rsp:hover[b-eaaz5isr45] {
	background: var(--rz-base-200, #ececec);
	color: var(--rz-text-color, #1b1b1b);
}

.rsp.active[b-eaaz5isr45] {
	background: var(--rz-warning);
	border-color: var(--rz-warning-dark, #8a6d00);
	color: #000;
}

.rsp:disabled[b-eaaz5isr45] {
	opacity: 0.5;
	cursor: not-allowed;
}
/* /Components/Shared/SetupSessionRibbon.razor.rz.scp.css */
.setup-session-ribbon[b-w9orcmm0qm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

/* Chips are child components, so reach their rendered button with ::deep. */
.setup-session-ribbon[b-w9orcmm0qm]  .ribbon-chip {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Sessions not currently shown in the grid: muted until clicked. */
.setup-session-ribbon[b-w9orcmm0qm]  .ribbon-chip-hidden {
    opacity: 0.5;
}

.setup-session-ribbon[b-w9orcmm0qm]  .ribbon-chip-hidden:hover {
    opacity: 1;
}
/* /Components/Shared/SetupToolbar.razor.rz.scp.css */
.setup-toolbar[b-are9gs0tdt] {
    /* Claim the gap between the tabs and the action group: grow to fill it (which pushes the
       fixed-width actions to the right edge) so the child ribbon has room to wrap into rows
       rather than collapsing to one chip per line. */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0;
}