/* /Components/Dialogs/SetupNameIconDialog.razor.rz.scp.css */
/* Icon + color pickers for the setup name/icon dialog (RSS-2430). */
.snid-icons[b-0h53kk0by1],
.snid-colors[b-0h53kk0by1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.snid-ip[b-0h53kk0by1] {
    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-0h53kk0by1] {
    background: var(--rz-base-200);
}

.snid-ip.sel[b-0h53kk0by1] {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
}

.snid-cp[b-0h53kk0by1] {
    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-0h53kk0by1] {
    filter: brightness(0.92);
}

.snid-cp.sel[b-0h53kk0by1] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 1px;
}

/* The "default color" swatch shows a reset glyph instead of a fill. */
.snid-cp[b-0h53kk0by1]  .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-b7ovzkcfp4] {
    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-tdt4p1wvrj] .setting-changed {
	background-color: var(--rz-warning) !important;
	color: black !important;
	--rz-input-color: black;
	margin: 1px;
}

[b-tdt4p1wvrj] .setting-changed .rz-chkbox-box .rzi {
	color: black !important;
}

[b-tdt4p1wvrj] .rz-chkbox-box .rzi {
	color: var(--rz-input-value-color);
}

[b-tdt4p1wvrj] .shrunk-icon-button {
	transform: scale(0.75);
	margin: -4px !important;
	padding: 0 !important;
	min-width: 24px !important;
}

[b-tdt4p1wvrj] .shrunk-icon-button:hover {
	transform: scale(0.85);
	margin: -4px !important;
	padding: 0 !important;
	min-width: 24px !important;
}

[b-tdt4p1wvrj] .rz-inputnumber .rz-inputnumber-button {
	opacity: 1 !important;
	visibility: visible !important;
}

[b-tdt4p1wvrj] .setup-datagrid {
	flex: 1;
	overflow: hidden;
}

[b-tdt4p1wvrj] .setup-datagrid .rz-numeric-input,
[b-tdt4p1wvrj] .setup-datagrid .rz-spinner-input,
[b-tdt4p1wvrj] .setup-datagrid .rz-textbox,
[b-tdt4p1wvrj] .setup-datagrid .rz-datepicker input,
[b-tdt4p1wvrj] .setup-datagrid .rz-numeric,
[b-tdt4p1wvrj] .setup-datagrid .rz-spinner,
[b-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .setup-datagrid .rz-spinner-button {
	width: 1.5rem;
	height: 0.75rem;
	min-height: 0;
}

[b-tdt4p1wvrj] .setup-datagrid .rz-spinner-button .rz-spinner-button-icon {
	font-size: 0.6rem;
}

[b-tdt4p1wvrj] .setup-datagrid .rz-helper-text {
	display: none;
}

[b-tdt4p1wvrj] .setup-datagrid .rz-column-title {
	padding: 0;
	margin: 0;
}

[b-tdt4p1wvrj] .setup-datagrid .rz-cell-data,
[b-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .setup-datagrid .rz-form-field-content,
[b-tdt4p1wvrj] .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-tdt4p1wvrj] .setup-datagrid .rz-form-field-wrapper:before,
[b-tdt4p1wvrj] .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-tdt4p1wvrj] .setup-datagrid .rz-form-field-label {
	display: none;
}

[b-tdt4p1wvrj] .loading-container,
[b-tdt4p1wvrj] .error-card {
	padding: 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

[b-tdt4p1wvrj] .loading-container {
	height: 100%;
	justify-content: center;
}

[b-tdt4p1wvrj] .unit-header-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative !important;
	overflow: visible !important;
}

[b-tdt4p1wvrj] .setup-header {
	display: flex;
	justify-content: start;
	align-items: flex-start;
	margin-bottom: 0;
}

[b-tdt4p1wvrj] .vertical-text-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	overflow: visible;
}

[b-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .vertical-text span,
[b-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .event-info h3 {
	margin: 0 0 8px 0;
	color: var(--accent-fill-rest);
}

[b-tdt4p1wvrj] .event-details {
	font-size: 0.9rem;
}

[b-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .setup-page-alert {
	flex: 0 0 auto;
	margin-bottom: 2px;
}

[b-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .setup-header-bar > .header-actions {
	order: 1;
	flex: 1 1 0;
	min-width: 0;
}

[b-tdt4p1wvrj] .setup-header-bar > .setup-toolbar {
	order: 2;
	flex-basis: 100%;
}

[b-tdt4p1wvrj] .controls {
	display: flex;
	gap: 10px;
}

[b-tdt4p1wvrj] .rz-datatable {
	border: 1px solid var(--neutral-stroke-rest);
	height: 100%;
	display: flex;
	flex-direction: column;
}

[b-tdt4p1wvrj] .rz-datatable .rz-datatable-scrollable-wrapper {
	flex: 1;
	overflow: auto;
}

[b-tdt4p1wvrj] .rz-grid-table {
	width: auto;
}

[b-tdt4p1wvrj] .rz-grid-table td,
[b-tdt4p1wvrj] .rz-datatable-data td {
	padding: 0 !important;
	line-height: 1;
}

[b-tdt4p1wvrj] .rz-grid-table td .rz-cell-data,
[b-tdt4p1wvrj] .rz-datatable-data td .rz-cell-data {
	padding: 0 !important;
}

[b-tdt4p1wvrj] .rz-datatable-data tr:nth-child(even) {
	background-color: var(--neutral-fill-subtle-rest);
}

[b-tdt4p1wvrj] .rz-datatable-data tr:hover:not(.focused-row) {
	background-color: var(--neutral-fill-hover);
}

[b-tdt4p1wvrj] .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-tdt4p1wvrj] .rz-datatable-header .rz-datatable-header-cell.rz-composite-header {
	background-color: var(--accent-fill-subtle);
	font-weight: bold;
}

[b-tdt4p1wvrj] .rz-datatable .rz-col-icon {
	width: 1rem;
}

[b-tdt4p1wvrj] td.rz-composite-cell {
	padding: 2px;
}

[b-tdt4p1wvrj] .setup-datagrid .setup-setting-column,
[b-tdt4p1wvrj] .setup-datagrid .setup-setting-column .rz-cell-data,
[b-tdt4p1wvrj] .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-tdt4p1wvrj] .setup-datagrid td.rz-frozen-cell {
	z-index: 2 !important;
}

/* Highlight TOP and BOTTOM for all non-category/subcategory/frozen cells */
[b-tdt4p1wvrj] .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-tdt4p1wvrj] .focused-row td.setting-name-column,
[b-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .focused-row td.category-column,
[b-tdt4p1wvrj] .focused-row td.subcategory-column,
[b-tdt4p1wvrj] .focused-row td:has(.vertical-text) {
	box-shadow: none !important;
	border-top: none !important;
	border-bottom: none !important;
	z-index: 2 !important;
}

[b-tdt4p1wvrj] .focused-row td.rz-frozen-cell {
	z-index: 2 !important;
}

[b-tdt4p1wvrj] .setup-datagrid .rz-textarea {
	background-color: transparent !important;
}

[b-tdt4p1wvrj] .rz-datatable-data tr.focused-row {
	background-color: var(--accent-fill-subtle) !important;
}

[b-tdt4p1wvrj] .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-tdt4p1wvrj] .internal-setting-cell.focused-setting-label.setting-changed {
	background-color: var(--rz-warning) !important;
}

[b-tdt4p1wvrj] .setup-datagrid .setup-setting-column .rz-cell-data {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

[b-tdt4p1wvrj] .setup-datagrid .setup-setting-name-column .rz-cell-data {
	align-items: center;
	padding-left: 0 !important;
}

[b-tdt4p1wvrj] .setting-group-container {
	display: grid !important;
	gap: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

[b-tdt4p1wvrj] .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-tdt4p1wvrj] .internal-setting-cell .rz-inputtext,
[b-tdt4p1wvrj] .internal-setting-cell input[type="text"],
[b-tdt4p1wvrj] .internal-setting-cell input[type="number"] {
	color: inherit !important;
}

[b-tdt4p1wvrj] .setting-label-box,
[b-tdt4p1wvrj] .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-tdt4p1wvrj] .setting-vertical-divider {
	border-left: 1px solid var(--neutral-stroke-rest);
	height: 12px;
	margin: 0 4px;
	align-self: center;
	opacity: 0.6;
}

[b-tdt4p1wvrj] .setting-horizontal-divider {
	border-top: 1px solid var(--neutral-stroke-rest);
	width: 100%;
	margin: 2px 0;
	opacity: 0.6;
}

[b-tdt4p1wvrj] .setting-label-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	justify-content: center;
	width: 100%;
}

[b-tdt4p1wvrj] .outing-header-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	gap: 2px;
}

[b-tdt4p1wvrj] .outing-lap-info {
	font-size: 0.75rem;
	opacity: 0.8;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

[b-tdt4p1wvrj] .outing-lap-info.best-lap {
	color: black;
	background-color: lightgreen;
}

[b-tdt4p1wvrj] .cell-center {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative;
}

[b-tdt4p1wvrj] .setting-centered-text {
	white-space: pre-line;
	text-align: center;
	width: 100%;
}

[b-tdt4p1wvrj] .rz-custom-header {
	width: 100%;
}

/* Crew notes and job list cells */
[b-tdt4p1wvrj] .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-tdt4p1wvrj] .cc-crew-note-entry {
	font-size: 0.8rem;
	padding: 0.2rem 0;
	border-bottom: 1px solid var(--rz-base-200);
}

[b-tdt4p1wvrj] .cc-crew-note-entry:last-child {
	border-bottom: none;
}

[b-tdt4p1wvrj] .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-tdt4p1wvrj] .cc-crew-note-text {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: break-word;
	font-size: 0.8rem;
}

[b-tdt4p1wvrj] .cc-empty-notes {
	font-size: 0.8rem;
	color: var(--rz-text-secondary-color);
	font-style: italic;
}

[b-tdt4p1wvrj] .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-tdt4p1wvrj] .cc-job-item:last-child {
	border-bottom: none;
}

[b-tdt4p1wvrj] .cc-job-done {
	opacity: 0.6;
}

[b-tdt4p1wvrj] .cc-job-text {
	flex: 1;
	word-break: break-word;
	white-space: normal;
	overflow-wrap: break-word;
}

[b-tdt4p1wvrj] .cc-job-done .cc-job-text {
	text-decoration: line-through;
}

[b-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .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-tdt4p1wvrj] .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/EventsList.razor.rz.scp.css */
.events-timeline[b-tsc8seev4a] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 1180px;
    margin: 0 auto;
}

/* ── Hero row ───────────────────────────────────────── */
.hero-row[b-tsc8seev4a] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* ── Hero card ─────────────────────────────────────── */
.next-event-hero[b-tsc8seev4a] {
    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-tsc8seev4a] {
    filter: brightness(1.06);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    color: #fff;
    text-decoration: none;
}

.hero-info[b-tsc8seev4a] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hero-label[b-tsc8seev4a] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.65;
}

.hero-name[b-tsc8seev4a] {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: inherit;
    letter-spacing: -0.01em;
}

.hero-meta[b-tsc8seev4a] {
    font-size: 0.875rem;
    color: inherit;
    opacity: 0.8;
    margin-top: 0.1rem;
}

.hero-sep[b-tsc8seev4a] {
    margin: 0 0.35rem;
    opacity: 0.5;
}

.hero-countdown[b-tsc8seev4a] {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.hero-cd-box[b-tsc8seev4a] {
    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-tsc8seev4a] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.hero-cd-u[b-tsc8seev4a] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: inherit;
    opacity: 0.7;
    margin-top: 0.25rem;
}

.hero-cd-today[b-tsc8seev4a] {
    font-size: 1.75rem;
    font-weight: 800;
    color: inherit;
    letter-spacing: -0.01em;
}

.hero-live-btn[b-tsc8seev4a] {
    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-tsc8seev4a] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.55);
}

/* ── Filter bar ─────────────────────────────────────── */
.filter-bar[b-tsc8seev4a] {
    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-tsc8seev4a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.chip-group[b-tsc8seev4a] {
    display: flex;
    gap: 0.25rem;
}

.kind-chip[b-tsc8seev4a],
.class-chip[b-tsc8seev4a],
.season-jump[b-tsc8seev4a] {
    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-tsc8seev4a],
.class-chip:hover[b-tsc8seev4a],
.season-jump:hover[b-tsc8seev4a] {
    background: var(--rz-base-200);
}

.kind-chip.active[b-tsc8seev4a],
.class-chip.active[b-tsc8seev4a] {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-on-primary);
}

.season-jumps[b-tsc8seev4a] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.season-jump[b-tsc8seev4a] {
    border-radius: var(--rz-border-radius);
}

/* ── Season group ───────────────────────────────────── */
.season-group[b-tsc8seev4a] {
    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-tsc8seev4a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    margin-left: -1.5rem;
    padding-left: 1.25rem;
}

.season-header[b-tsc8seev4a]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rz-base-300);
}

.season-year[b-tsc8seev4a] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.season-count[b-tsc8seev4a] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* ── Month marker ───────────────────────────────────── */
.month-marker[b-tsc8seev4a] {
    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-tsc8seev4a] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rz-base-400);
    flex-shrink: 0;
}

.month-name[b-tsc8seev4a] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color);
}

/* ── Event card ─────────────────────────────────────── */
.event-card[b-tsc8seev4a] {
    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-tsc8seev4a] {
    border-color: var(--rz-primary-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.event-card.upcoming[b-tsc8seev4a] {
    border-style: dashed;
    border-color: var(--rz-primary-light);
}


/* ── Date box ───────────────────────────────────────── */
.date-box[b-tsc8seev4a] {
    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-tsc8seev4a] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
}

.date-day[b-tsc8seev4a] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rz-text-color);
    font-variant-numeric: tabular-nums;
}

/* ── Event body ─────────────────────────────────────── */
.event-body[b-tsc8seev4a] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.event-title-row[b-tsc8seev4a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.event-name[b-tsc8seev4a] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rz-text-color);
    text-decoration: none;
}

.event-name:hover[b-tsc8seev4a] {
    color: var(--rz-primary);
}

.kind-badge[b-tsc8seev4a] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.kind-badge.kind-race[b-tsc8seev4a] {
    background: #c53030;
    color: #fff;
}

.kind-badge.kind-test[b-tsc8seev4a] {
    background: transparent;
    color: var(--rz-text-secondary-color);
    border: 1px solid var(--rz-base-300);
}

.class-dot[b-tsc8seev4a] {
    font-size: 0.65rem;
    font-weight: 700;
    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-tsc8seev4a] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

.meta-sep[b-tsc8seev4a] {
    margin: 0 0.3rem;
    opacity: 0.5;
}

.notes-chip[b-tsc8seev4a] {
    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-tsc8seev4a] {
    display: flex;
    gap: 0.1rem;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

.event-card:hover .event-actions[b-tsc8seev4a] {
    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-tsc8seev4a] {
    background: var(--card-bg);
    color: var(--card-fg);
    --rz-on-primary: var(--card-fg);
}

.next-event-hero.colored .hero-cd-box[b-tsc8seev4a] {
    background: color-mix(in srgb, var(--card-fg) 15%, transparent);
}

/* ── Empty state ────────────────────────────────────── */
.empty-state[b-tsc8seev4a] {
    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-gzabvdmgz9] {
    margin-bottom: 1rem;
}

.ev-header-top[b-gzabvdmgz9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.ev-back-link[b-gzabvdmgz9] {
    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-gzabvdmgz9] {
    text-decoration: none;
}

.ev-back-link:hover .ev-back-text[b-gzabvdmgz9] {
    text-decoration: underline;
}

.ev-back-link .material-symbols-outlined[b-gzabvdmgz9] {
    font-size: 1rem;
}

.ev-title[b-gzabvdmgz9] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rz-text-color);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.ev-subline[b-gzabvdmgz9] {
    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-gzabvdmgz9] {
    color: var(--rz-primary);
    text-decoration: none;
    font-weight: 500;
}

.ev-venue-link:hover[b-gzabvdmgz9] {
    text-decoration: underline;
}

.ev-sep[b-gzabvdmgz9] {
    opacity: 0.5;
    padding: 0 0.15rem;
}

/* ── Empty state ─────────────────────────────────────── */
.ev-empty[b-gzabvdmgz9] {
    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-gzabvdmgz9] {
    display: grid;
    grid-template-columns: 296px 1fr;
    gap: 1rem;
    align-items: start;
}

.ev-rail[b-gzabvdmgz9] {
    position: sticky;
    top: 4rem;
}

.ev-detail[b-gzabvdmgz9] {
    min-width: 0;
}

/* ── Responsive collapse ─────────────────────────────── */
@media (max-width: 860px) {
    .ev-split[b-gzabvdmgz9] {
        grid-template-columns: 1fr;
    }

    .ev-rail[b-gzabvdmgz9] {
        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-ybzgyqlcvr] {
    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-ybzgyqlcvr] {
    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-ybzgyqlcvr] {
    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-ybzgyqlcvr] {
    background: rgba(255, 255, 255, 0.18);
}

.lm-card[b-ybzgyqlcvr] {
    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-ybzgyqlcvr] {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 800;
    font-size: clamp(0.8rem, 1.4vw, 1.1rem);
    color: #ff8a3d;
}

.lm-headline[b-ybzgyqlcvr] {
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-size: clamp(2rem, 6vw, 5rem);
}

.lm-meta[b-ybzgyqlcvr] {
    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-ybzgyqlcvr] {
    padding: 0.15rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 800;
}

.lm-countdown[b-ybzgyqlcvr] {
    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-ybzgyqlcvr] {
    font-size: clamp(0.85rem, 1.4vw, 1.15rem);
    color: #94a3b8;
}

.lm-idle .lm-headline[b-ybzgyqlcvr] {
    color: #e2e8f0;
}
/* /Components/Pages/MechanicsSetup.razor.rz.scp.css */
.mechanics-page[b-1d38htnrk6] {
	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-1d38htnrk6] {
	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-1d38htnrk6] {
	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-1d38htnrk6] {
	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-1d38htnrk6] {
	font-size: 1.1rem;
	font-weight: 700;
	flex: 1;
}

.mechanics-session-badge[b-1d38htnrk6] {
	background: var(--rz-warning);
	color: #000;
	font-weight: 800;
	font-size: 0.9rem;
	padding: 0.3rem 0.9rem;
	border-radius: 4px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* Right-hand cluster of header badges (outstanding-jobs pill + session badge) */
.mechanics-header-badges[b-1d38htnrk6] {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* At-a-glance count of outstanding jobs, surfaced from the checklist below */
.jobs-pill[b-1d38htnrk6] {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 800;
	font-size: 0.9rem;
	padding: 0.3rem 0.9rem;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 2px;
	white-space: nowrap;
}

.jobs-pill-pending[b-1d38htnrk6] {
	background: var(--rz-danger-lighter);
	color: var(--rz-danger-dark);
	border: 1px solid var(--rz-danger);
}

.jobs-pill-done[b-1d38htnrk6] {
	background: var(--rz-success-lighter);
	color: var(--rz-success-dark);
	border: 1px solid var(--rz-success);
}

.mechanics-meta-row[b-1d38htnrk6] {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 0.6rem 1rem;
	background: var(--rz-base-background-color);
}

.meta-item[b-1d38htnrk6] {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.meta-label[b-1d38htnrk6] {
	font-size: 0.625rem;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--rz-text-color);
	font-weight: 600;
}

.meta-value[b-1d38htnrk6] {
	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-1d38htnrk6] {
	column-count: 4;
	column-gap: 1rem;
	margin-top: 0.25rem;
}

.setup-card-wrapper[b-1d38htnrk6] {
	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-1d38htnrk6] { column-count: 2; }
}

@media (max-width: 600px) {
	.setup-grid[b-1d38htnrk6] { column-count: 1; }
}

.setup-card-wrapper .card-title[b-1d38htnrk6] {
	user-select: none;
}

.setup-grid:not(.layout-locked) .setup-card-wrapper .card-title[b-1d38htnrk6] {
	cursor: grab;
}

.setup-grid:not(.layout-locked) .setup-card-wrapper .card-title:active[b-1d38htnrk6] {
	cursor: grabbing;
}

[b-1d38htnrk6] .sortable-ghost {
	opacity: 0.4;
}

[b-1d38htnrk6] .sortable-drag {
	opacity: 0.9;
}

.setup-card[b-1d38htnrk6] {
	position: relative;
	overflow: hidden;
	padding-top: 0.25rem;
}

.card-title[b-1d38htnrk6] {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
}

/* Setting rows */
.setting-row[b-1d38htnrk6] {
	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-1d38htnrk6] {
	border-bottom: none;
}

.setting-name[b-1d38htnrk6] {
	flex: 1;
	font-size: 0.875rem;
	color: var(--rz-text-color);
}

.setting-value[b-1d38htnrk6] {
	font-size: 0.875rem;
	font-weight: 700;
	min-width: 3rem;
	text-align: right;
	white-space: nowrap;
	flex-shrink: 0;
}

.setting-unit[b-1d38htnrk6] {
	font-size: 0.75rem;
	color: var(--rz-text-secondary-color);
	width: 3rem;
	flex-shrink: 0;
	white-space: nowrap;
}

.setting-change-pending[b-1d38htnrk6] {
	background-color: var(--rz-warning) !important;
	color: black !important;
	--rz-input-color: black;
}

.setting-change-pending .setting-name[b-1d38htnrk6],
.setting-change-pending .setting-unit[b-1d38htnrk6] {
	color: black !important;
}

.setting-change-done[b-1d38htnrk6] {
	background-color: var(--rz-success) !important;
	color: var(--rz-on-success) !important;
}

.setting-change-done .setting-name[b-1d38htnrk6],
.setting-change-done .setting-unit[b-1d38htnrk6] {
	color: var(--rz-on-success) !important;
}

[b-1d38htnrk6] .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-1d38htnrk6] .setting-change-pending input,
[b-1d38htnrk6] .setting-change-pending .rz-inputtext,
[b-1d38htnrk6] .setting-change-done input,
[b-1d38htnrk6] .setting-change-done .rz-inputtext {
	background-color: var(--rz-base-background-color) !important;
	color: var(--rz-text-color) !important;
}

.setting-editable .setting-name[b-1d38htnrk6]::after {
	content: " ✏";
	font-size: 0.7rem;
	color: var(--rz-info);
	opacity: 0.7;
}

/* Job checklist */
.checklist-section[b-1d38htnrk6] {
	padding: 1rem;
	background: var(--rz-base-background-color);
	border: 1px solid var(--rz-base-300);
	border-radius: var(--rz-border-radius);
}

.checklist-sub-header[b-1d38htnrk6] {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rz-text-secondary-color);
	margin: 0.75rem 0 0.5rem;
}

.checklist-item[b-1d38htnrk6] {
	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-1d38htnrk6] {
	background: var(--rz-base-100);
}

.checklist-done[b-1d38htnrk6] {
	background: var(--rz-success);
	color: var(--rz-on-success);
}

.checklist-done .checklist-text[b-1d38htnrk6] {
	text-decoration: line-through;
	color: var(--rz-on-success);
}

.checklist-text[b-1d38htnrk6] {
	flex: 1;
	font-size: 0.9rem;
}

.checklist-badge[b-1d38htnrk6] {
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.15rem 0.4rem;
	border-radius: 3px;
	text-transform: uppercase;
}

.setup-badge[b-1d38htnrk6] {
	background: var(--rz-warning-lighter);
	color: var(--rz-warning-dark);
	border: 1px solid var(--rz-warning);
}

/* Tablet-friendly checkbox hit targets */
.checklist-item[b-1d38htnrk6]  input[type="checkbox"],
.checklist-item[b-1d38htnrk6]  .rz-chkbox {
	min-width: 24px;
	min-height: 24px;
	width: 24px;
	height: 24px;
}

/* Manual job add row */
.add-job-row[b-1d38htnrk6] {
	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-1d38htnrk6] {
	padding: 1rem;
	background: var(--rz-base-background-color);
	border: 1px solid var(--rz-base-300);
	border-radius: var(--rz-border-radius);
}

.notes-section[b-1d38htnrk6]  .rz-textarea {
	width: 100%;
	min-height: 120px;
	padding: 0.75rem;
	font-size: 1rem;
}

[b-1d38htnrk6] .notes-section textarea::placeholder {
	font-style: italic;
}

.print-only-branding[b-1d38htnrk6] {
	display: none;
}

.print-only-logo[b-1d38htnrk6] {
	height: 2.5rem;
	width: auto;
	flex-shrink: 0;
}

.print-only-appname[b-1d38htnrk6] {
	font-size: 1.1rem;
	font-weight: 700;
}

/* Print styles */
@media print {
	.no-print[b-1d38htnrk6],
	.rz-sidebar[b-1d38htnrk6],
	nav[b-1d38htnrk6],
	header[b-1d38htnrk6],
	.mechanics-header .rz-button[b-1d38htnrk6],
	.session-selector[b-1d38htnrk6] {
		display: none !important;
	}

	.print-only-branding[b-1d38htnrk6] {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.mechanics-page[b-1d38htnrk6] {
		display: block !important;
	}

	.setup-card[b-1d38htnrk6] {
		break-inside: avoid;
		overflow: visible !important;
		border: 1px solid #ccc !important;
		box-shadow: none !important;
		background: white !important;
		color: black !important;
	}

	.checklist-section[b-1d38htnrk6] {
		overflow: visible !important;
		border: 1px solid #ccc !important;
		box-shadow: none !important;
		background: white !important;
		color: black !important;
	}


	.setting-name[b-1d38htnrk6],
	.setting-value[b-1d38htnrk6],
	.setting-unit[b-1d38htnrk6],
	.checklist-text[b-1d38htnrk6] {
		color: black !important;
	}

	.checklist-done[b-1d38htnrk6] {
		background: transparent !important;
		color: black !important;
	}

	.checklist-done .checklist-text[b-1d38htnrk6] {
		color: black !important;
	}

	.card-title[b-1d38htnrk6] {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	[b-1d38htnrk6] .setting-row input,
	[b-1d38htnrk6] .setting-row .rz-numeric,
	[b-1d38htnrk6] .setting-row .rz-textbox,
	[b-1d38htnrk6] .setting-row .rz-dropdown,
	[b-1d38htnrk6] .setting-row .rz-numeric-input,
	[b-1d38htnrk6] .setting-row .rz-spinner {
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		outline: none !important;
		padding: 0 !important;
	}

	[b-1d38htnrk6] .setting-row .rz-spinner-up,
	[b-1d38htnrk6] .setting-row .rz-spinner-down {
		display: none !important;
	}

	.mechanics-header[b-1d38htnrk6],
	.mechanics-title-bar[b-1d38htnrk6],
	.mechanics-meta-row[b-1d38htnrk6] {
		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-1d38htnrk6] {
		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-1d38htnrk6] {
		grid-area: branding;
		justify-self: start;
	}

	.mechanics-header-badges[b-1d38htnrk6] {
		grid-area: badge;
		justify-self: end;
	}

	/* Force the pill's colored background/border to render on the printout */
	.jobs-pill[b-1d38htnrk6] {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	.mechanics-meta-row[b-1d38htnrk6] {
		grid-area: meta;
	}

	.meta-label[b-1d38htnrk6],
	.meta-value[b-1d38htnrk6] {
		color: black !important;
	}

	[b-1d38htnrk6] .notes-section,
	.notes-section[b-1d38htnrk6] {
		border: none !important;
		box-shadow: none !important;
		background: white !important;
		color: black !important;
	}

	[b-1d38htnrk6] .notes-section .rz-textarea,
	[b-1d38htnrk6] .notes-section textarea {
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		color: black !important;
		resize: none;
	}

	[b-1d38htnrk6] .notes-section textarea::placeholder {
		color: transparent !important;
	}
}
/* /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-kxp0c94ew0] {
    --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-kxp0c94ew0] {
    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-kxp0c94ew0] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Top bar ─────────────────────────────────────────── */
.rr-topbar[b-kxp0c94ew0] {
    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-kxp0c94ew0], .rr-status-group[b-kxp0c94ew0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.rr-title-group[b-kxp0c94ew0] { flex: 1 1 0; }
.rr-status-group[b-kxp0c94ew0] { flex: 1 1 0; justify-content: flex-end; }

/* Tenant branding logo, centred between the race title and the status chips. */
.rr-brand[b-kxp0c94ew0] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}
.rr-brand img[b-kxp0c94ew0] {
    height: clamp(1.6rem, 3vw, 2.6rem);
    width: auto;
    object-fit: contain;
}

.rr-back[b-kxp0c94ew0] {
    display: inline-flex;
    align-items: center;
    color: #cbd5e1;
    text-decoration: none;
}
.rr-back:hover[b-kxp0c94ew0] { color: #fff; }

.rr-class-chip[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}
.rr-session-name[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    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-kxp0c94ew0] { margin: 0 0.35rem; opacity: 0.6; }

.rr-clock[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    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-kxp0c94ew0] {
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

.rr-live-chip[b-kxp0c94ew0], .rr-official-chip[b-kxp0c94ew0] {
    padding: 0.2rem 0.7rem;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}
.rr-live-chip[b-kxp0c94ew0] { background: #dc2626; color: #fff; animation: rr-pulse-b-kxp0c94ew0 1.4s ease-in-out infinite; }
.rr-official-chip[b-kxp0c94ew0] { background: #1d4ed8; color: #fff; }

.rr-flag[b-kxp0c94ew0] {
    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-kxp0c94ew0] { animation: rr-pulse-b-kxp0c94ew0 0.9s ease-in-out infinite; }

.rr-icon-btn[b-kxp0c94ew0] {
    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-kxp0c94ew0] { background: rgba(255, 255, 255, 0.18); }
.rr-play[b-kxp0c94ew0] { background: var(--rr-accent); color: var(--rr-accent-fg); }

/* ── Overtake lower-third ────────────────────────────── */
.rr-banner[b-kxp0c94ew0] {
    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-kxp0c94ew0 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Standings board (FLIP by translateY) ────────────── */
.rr-board[b-kxp0c94ew0] {
    position: relative;
    transition: height 0.3s ease;
}

.rr-row[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    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-kxp0c94ew0] { background: rgba(255, 255, 255, 0.07); }
.rr-row.rr-p1[b-kxp0c94ew0] { 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-kxp0c94ew0] { opacity: 0.45; }

.rr-pos[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    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-kxp0c94ew0] { font-size: 0.95rem; }
.rr-avatar-img[b-kxp0c94ew0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rr-ident[b-kxp0c94ew0] { flex: 1 1 auto; min-width: 0; }
.rr-name[b-kxp0c94ew0] {
    font-size: clamp(0.95rem, 1.6vw, 1.35rem);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rr-substatus[b-kxp0c94ew0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 0.05rem;
}
.rr-laps[b-kxp0c94ew0] { letter-spacing: 0.04em; }
.rr-statusbadge[b-kxp0c94ew0] {
    padding: 0.02rem 0.4rem;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
}
.rr-status-pit[b-kxp0c94ew0] { background: #d97706; }
.rr-status-crashed[b-kxp0c94ew0], .rr-status-didnotfinish[b-kxp0c94ew0], .rr-status-retired[b-kxp0c94ew0], .rr-status-didnotstart[b-kxp0c94ew0] { background: #dc2626; }
.rr-status-classified[b-kxp0c94ew0], .rr-status-finished[b-kxp0c94ew0] { background: #16a34a; }

.rr-lap[b-kxp0c94ew0] {
    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-kxp0c94ew0] { font-size: 0.6rem; color: #64748b; letter-spacing: 0.1em; }
.rr-lap-val[b-kxp0c94ew0] { font-size: clamp(0.9rem, 1.5vw, 1.25rem); font-weight: 700; }
.rr-lap-val.rr-fastest[b-kxp0c94ew0] { 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-kxp0c94ew0] { width: clamp(3.5rem, 5vw, 5rem); }

.rr-sectors[b-kxp0c94ew0] {
    /* 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-kxp0c94ew0] {
    /* 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-kxp0c94ew0] {
    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-kxp0c94ew0] {
    color: #f8fafc;
}
.rr-sector.rr-sector-pending[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    color: #64748b;
    background: rgba(255, 255, 255, 0.03);
}

/* ── Transport + timeline ────────────────────────────── */
.rr-transport[b-kxp0c94ew0] {
    flex: 0 0 auto;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.rr-controls[b-kxp0c94ew0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.rr-live-btn[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    position: relative;
    height: 2.2rem;
    display: flex;
    align-items: center;
}
.rr-flag-bands[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.85;
}
.rr-scrubber[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    --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-kxp0c94ew0] {
    font-size: clamp(1.4rem, 3.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.rr-prestart-count[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    /* 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-kxp0c94ew0 1.8s ease-in-out infinite;
}
.rr-prestart-when[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    justify-content: flex-start;
    gap: 0.75rem;
    height: calc(100vh - 7rem);
    overflow-y: auto;
}
.rr-prestart-head[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.rr-prestart-pill[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    color: #f8fafc;
    background: color-mix(in srgb, #f8fafc 10%, transparent);
    border-color: color-mix(in srgb, #f8fafc 25%, transparent);
    animation: rr-pulse-b-kxp0c94ew0 1.8s ease-in-out infinite;
}
.rr-grid-list[b-kxp0c94ew0] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: min(680px, 100%);
}
.rr-grid-row[b-kxp0c94ew0] {
    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-kxp0c94ew0] {
    background: color-mix(in srgb, var(--rr-accent) 18%, transparent);
    box-shadow: inset 3px 0 0 var(--rr-accent);
}
.rr-grid-pos[b-kxp0c94ew0] {
    font-weight: 800;
    color: var(--rr-accent);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.rr-grid-num[b-kxp0c94ew0] {
    font-weight: 700;
    color: #cbd5e1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.rr-grid-name[b-kxp0c94ew0] {
    font-weight: 600;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes rr-pulse-b-kxp0c94ew0 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
@keyframes rr-banner-in-b-kxp0c94ew0 {
    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-5zqyreb4xs] {
    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-5zqyreb4xs] { text-decoration: none; }
.rv-back-link:hover .rv-back-text[b-5zqyreb4xs] { text-decoration: underline; }

/* ── Page header ─────────────────────────────────── */
.rv-header[b-5zqyreb4xs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.rv-header-left[b-5zqyreb4xs] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.rv-title-row[b-5zqyreb4xs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rv-title[b-5zqyreb4xs] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--rz-text-color);
}

.rv-session[b-5zqyreb4xs] {
    font-weight: 700;
}

.rv-title-sep[b-5zqyreb4xs] {
    color: var(--rz-text-disabled-color);
    font-weight: 400;
    margin: 0 0.15em;
}

.rv-rider[b-5zqyreb4xs] {
    font-weight: 700;
}

.rv-breadcrumb[b-5zqyreb4xs] {
    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-5zqyreb4xs] {
    color: var(--rz-primary);
    text-decoration: none;
    font-weight: 500;
}

.rv-crumb-link:hover[b-5zqyreb4xs] { text-decoration: underline; }

.rv-sep[b-5zqyreb4xs] {
    color: var(--rz-text-disabled-color);
}

.rv-actions[b-5zqyreb4xs] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ── Run tabs ────────────────────────────────────── */
.rv-runtabs[b-5zqyreb4xs] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.rv-runtab[b-5zqyreb4xs] {
    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-5zqyreb4xs] {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.rv-runtab.rv-runtab-on[b-5zqyreb4xs] {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
}

.rv-runtabs-of[b-5zqyreb4xs] {
    font-size: 0.75rem;
    color: var(--rz-text-disabled-color);
    margin-left: 2px;
}

/* ── KPI bar ─────────────────────────────────────── */
.rv-kpis[b-5zqyreb4xs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 1.25rem;
}

.rv-kpi[b-5zqyreb4xs] {
    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-5zqyreb4xs] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color);
    margin-bottom: 3px;
    white-space: nowrap;
}

.rv-kpi-v[b-5zqyreb4xs] {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
    white-space: nowrap;
}

.rv-kpi-s[b-5zqyreb4xs] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    margin-top: 2px;
    white-space: nowrap;
}

/* ── Two-column layout ───────────────────────────── */
.rv-cols[b-5zqyreb4xs] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1000px) {
    .rv-cols[b-5zqyreb4xs] { grid-template-columns: 1fr; }
}

.rv-left[b-5zqyreb4xs] {
    min-width: 0;
}

.rv-right[b-5zqyreb4xs] {
    min-width: 0;
}

/* ── No data state ───────────────────────────────── */
.rv-no-data[b-5zqyreb4xs] {
    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-5zqyreb4xs] {
    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-5zqyreb4xs] {
    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-5zqyreb4xs] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.rv-setup-tools[b-5zqyreb4xs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rv-vs-label[b-5zqyreb4xs] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

/* ── Setup diff section ──────────────────────────── */
.rv-sgroup[b-5zqyreb4xs] {
    border-bottom: 1px solid var(--rz-base-300);
}

.rv-sgroup-sum[b-5zqyreb4xs] {
    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-5zqyreb4xs]::-webkit-details-marker { display: none; }

.rv-sgroup-tw[b-5zqyreb4xs] {
    font-size: 0.65rem;
    color: var(--rz-text-secondary-color);
    transition: transform 0.15s;
}

.rv-sgroup[open] .rv-sgroup-tw[b-5zqyreb4xs] { transform: rotate(90deg); }

.rv-sgroup-count[b-5zqyreb4xs] {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
}

.rv-srows[b-5zqyreb4xs] {
    padding: 4px 16px 10px;
}

.rv-diff-cat[b-5zqyreb4xs] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    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-5zqyreb4xs] {
    padding-top: 4px;
}

.rv-srow[b-5zqyreb4xs] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.rv-sk[b-5zqyreb4xs] {
    font-weight: 600;
    color: var(--rz-text-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.rv-sep-colon[b-5zqyreb4xs] {
    color: var(--rz-text-secondary-color);
    font-weight: 400;
    flex-shrink: 0;
}

.rv-sv[b-5zqyreb4xs] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
    white-space: nowrap;
}

.rv-su[b-5zqyreb4xs] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    font-style: italic;
    white-space: nowrap;
}

.rv-schg[b-5zqyreb4xs] {
    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-5zqyreb4xs] {
    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-5zqyreb4xs] {
    color: var(--rz-primary);
    text-decoration: none;
    font-weight: 600;
}

.rv-setup-foot-link:hover[b-5zqyreb4xs] { text-decoration: underline; }
/* /Components/Shared/EventRiderRail.razor.rz.scp.css */
.rider-rail[b-5ywmumij0m] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.rail-section-header[b-5ywmumij0m] {
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-300);
}

.rail-row[b-5ywmumij0m] {
    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-5ywmumij0m] {
    border-bottom: none;
}

.rail-row:hover[b-5ywmumij0m] {
    background: var(--rz-base-200);
}

.rail-row.selected[b-5ywmumij0m] {
    background: color-mix(in srgb, var(--rz-primary) 12%, var(--rz-base-background-color));
    border-left-color: var(--rz-primary);
}

/* ── Avatar ─────────────────────────────────────────── */
.rail-avatar[b-5ywmumij0m] {
    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-5ywmumij0m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.rail-avatar-initials[b-5ywmumij0m] {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

/* ── Rider info ─────────────────────────────────────── */
.rail-rider-body[b-5ywmumij0m] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.rail-rider-name[b-5ywmumij0m] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-rider-sub[b-5ywmumij0m] {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Best lap ───────────────────────────────────────── */
.rail-best-lap[b-5ywmumij0m] {
    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-5ywmumij0m] {
    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-omg7al61t4] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1040;
}

.ms-scrim[b-omg7al61t4] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.ms-scrim.show[b-omg7al61t4] {
    opacity: 1;
    pointer-events: auto;
}

.ms-panel[b-omg7al61t4] {
    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-omg7al61t4] {
    transform: translateX(0);
}

.ms-head[b-omg7al61t4] {
    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-omg7al61t4]  .ms-x {
    margin-left: auto;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
}

.ms-head[b-omg7al61t4]  .ms-x:hover {
    color: var(--rz-text-color);
}

.ms-sub[b-omg7al61t4] {
    padding: .5rem 1rem;
    font-size: .78rem;
    color: var(--rz-text-secondary-color);
    border-bottom: 1px solid var(--rz-base-200);
}

.ms-chips[b-omg7al61t4] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
    align-items: center;
}

.ms-chip[b-omg7al61t4] {
    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-omg7al61t4] {
    background: var(--rz-base-200);
}

.ms-chip.sel[b-omg7al61t4] {
    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-omg7al61t4] {
    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-omg7al61t4] {
    cursor: grab;
}

.ms-chip.sortable-ghost[b-omg7al61t4] {
    opacity: 0.4;
    border-style: dashed;
    border-color: var(--rz-primary);
}

.ms-chip.sortable-chosen[b-omg7al61t4] {
    background: var(--rz-base-200);
}

.ms-body[b-omg7al61t4] {
    flex: 1;
    overflow: auto;
    padding: 1rem;
}

.ms-empty[b-omg7al61t4] {
    color: var(--rz-text-secondary-color);
}

.ms-icon-picker[b-omg7al61t4] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    margin: .2rem 0 .6rem;
}

.ms-ip[b-omg7al61t4] {
    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-omg7al61t4] {
    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-omg7al61t4] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    margin: .2rem 0 .6rem;
}

.ms-cp[b-omg7al61t4] {
    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-omg7al61t4] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 1px;
}

.ms-cp[b-omg7al61t4]  .rzi {
    font-size: 1rem;
    color: var(--rz-text-secondary-color);
}

.ms-foot[b-omg7al61t4] {
    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-omg7al61t4] {
    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-omg7al61t4] {
    margin-top: .4rem;
}

.ms-value-grid[b-omg7al61t4] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.ms-value-grid th[b-omg7al61t4] {
    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-omg7al61t4] {
    text-align: center;
}

.ms-value-grid td[b-omg7al61t4] {
    padding: .15rem .4rem;
    border-bottom: 1px solid var(--rz-base-200);
    vertical-align: middle;
}

.ms-value-grid .ms-cat[b-omg7al61t4],
.ms-value-grid .ms-unit[b-omg7al61t4] {
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}

.ms-value-grid .ms-val[b-omg7al61t4] {
    width: 6.5rem;
}

/* Compare column (RSS-2416): read-only run values beside the setup, with amber diff highlighting. */
.ms-compare-picker[b-omg7al61t4] {
    margin-bottom: .5rem;
}

.ms-value-grid .ms-compare-val[b-omg7al61t4] {
    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-omg7al61t4] {
    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-vl0kvv1uaf] {
    color: var(--rz-text-secondary-color);
    padding: 2rem;
    text-align: center;
}

/* ── Rider summary card (header + KPI strip) ─────────── */
.rider-summary[b-vl0kvv1uaf] {
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
}

/* ── KPI strip ───────────────────────────────────────── */
.kpi-strip[b-vl0kvv1uaf] {
    display: flex;
    gap: 0;
}

.kpi-tile[b-vl0kvv1uaf] {
    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-vl0kvv1uaf] {
    border-right: none;
}

.kpi-label[b-vl0kvv1uaf] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--rz-text-secondary-color);
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.kpi-value[b-vl0kvv1uaf] {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
    white-space: nowrap;
}

/* ── Rider header ────────────────────────────────────── */
.rider-header[b-vl0kvv1uaf] {
    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-vl0kvv1uaf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.detail-avatar[b-vl0kvv1uaf] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.detail-avatar-img[b-vl0kvv1uaf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.detail-avatar-initials[b-vl0kvv1uaf] {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
}

.rider-header-info[b-vl0kvv1uaf] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rider-header-name[b-vl0kvv1uaf] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.rider-header-sub[b-vl0kvv1uaf] {
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

/* ── Nav chips ───────────────────────────────────────── */
.rider-nav-chips[b-vl0kvv1uaf] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.nav-chip[b-vl0kvv1uaf] {
    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-vl0kvv1uaf] {
    filter: brightness(1.1);
    text-decoration: none;
    color: var(--rz-on-primary);
}

/* ── Day header ──────────────────────────────────────── */
.day-header[b-vl0kvv1uaf] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color);
    padding: 1rem 0 0.5rem;
}

.day-rule[b-vl0kvv1uaf] {
    flex: 1;
    height: 1px;
    background: var(--rz-base-200);
}

/* ── Session grid ────────────────────────────────────── */
.session-grid[b-vl0kvv1uaf] {
    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-vl0kvv1uaf] {
    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-vl0kvv1uaf] {
    background: var(--rz-base-100);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Top section: session info */
.sc-top[b-vl0kvv1uaf] {
    padding: 11px 13px 0;
}

/* Row 1: name + time */
.sc-row1[b-vl0kvv1uaf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 5px;
}

.sc-row1-right[b-vl0kvv1uaf] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.sc-name[b-vl0kvv1uaf] {
    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-vl0kvv1uaf] {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.sc-chevron[b-vl0kvv1uaf] {
    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-vl0kvv1uaf] {
    display: inline-flex;
    align-items: center;
    transition: transform 0.18s;
}

.sc-chevron-icon.sc-chevron-open[b-vl0kvv1uaf] {
    transform: rotate(180deg);
}

/* Meta row: N runs · N laps */
.sc-meta[b-vl0kvv1uaf] {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: 9px;
}

.sc-meta b[b-vl0kvv1uaf] {
    color: var(--rz-text-color);
    font-weight: 600;
}

/* Bottom section: best lap + top speed */
.sc-bottom[b-vl0kvv1uaf] {
    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-vl0kvv1uaf],
.sc-bottom.sc-bottom-fastest .sc-time-big .sc-lap-num[b-vl0kvv1uaf] {
    color: var(--rz-success);
}

.sc-stat[b-vl0kvv1uaf] {
    display: flex;
    flex-direction: column;
}


.sc-lab[b-vl0kvv1uaf] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rz-text-secondary-color);
}

.sc-time-big[b-vl0kvv1uaf] {
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

.sc-stat-val[b-vl0kvv1uaf] {
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
}

.sc-lap-num[b-vl0kvv1uaf] {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--rz-text-secondary-color);
    margin-left: 2px;
}

/* ── Run list (shown when expanded) ─────────────────── */
.sc-runlist[b-vl0kvv1uaf] {
    padding: 5px 13px 0;
    border-top: 1px dashed var(--rz-base-300);
}

.sc-runrow[b-vl0kvv1uaf] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
}

.sc-runrow:hover[b-vl0kvv1uaf] {
    background: var(--rz-base-200);
}

.sc-runrow.sc-runrow-fast .sc-runbest[b-vl0kvv1uaf] {
    color: var(--rz-success);
}

.sc-runlink[b-vl0kvv1uaf] {
    font-weight: 700;
    color: var(--rz-primary);
    text-decoration: none;
    white-space: nowrap;
}

.sc-runlink:hover[b-vl0kvv1uaf] {
    text-decoration: underline;
}

.sc-runlaps[b-vl0kvv1uaf] {
    color: var(--rz-text-secondary-color);
    flex: 1;
    white-space: nowrap;
}

.sc-runbest[b-vl0kvv1uaf] {
    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-oaoiwt3224] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	margin: 3px 0 1px;
}

.rsp[b-oaoiwt3224] {
	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-oaoiwt3224] .rsp .rz-icon,
[b-oaoiwt3224] .rsp .rzi {
	font-size: 1.05rem;
	line-height: 1;
}

.rsp:hover[b-oaoiwt3224] {
	background: var(--rz-base-200, #ececec);
	color: var(--rz-text-color, #1b1b1b);
}

.rsp.active[b-oaoiwt3224] {
	background: var(--rz-warning);
	border-color: var(--rz-warning-dark, #8a6d00);
	color: #000;
}

.rsp:disabled[b-oaoiwt3224] {
	opacity: 0.5;
	cursor: not-allowed;
}
/* /Components/Shared/SetupSessionRibbon.razor.rz.scp.css */
.setup-session-ribbon[b-460hkanuja] {
    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-460hkanuja]  .ribbon-chip {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Sessions not currently shown in the grid: muted until clicked. */
.setup-session-ribbon[b-460hkanuja]  .ribbon-chip-hidden {
    opacity: 0.5;
}

.setup-session-ribbon[b-460hkanuja]  .ribbon-chip-hidden:hover {
    opacity: 1;
}
/* /Components/Shared/SetupToolbar.razor.rz.scp.css */
.setup-toolbar[b-u1bx422hu7] {
    /* 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;
}