/* /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;
}

/* The swatches are native <button>s (RSS-2457) — reset the UA chrome so they look like plain swatches. */
.snid-ip[b-0h53kk0by1],
.snid-cp[b-0h53kk0by1] {
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.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;
}

/* Keyboard users need to see which swatch is focused — the pickers are role="button" spans (RSS-2457). */
.snid-ip:focus-visible[b-0h53kk0by1],
.snid-cp:focus-visible[b-0h53kk0by1] {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

/* 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/EventLeaderboardBoard.razor.rz.scp.css */
/* Big-screen event leaderboard (RSS-2470). Keeps the app's Radzen look — this is the dashboard card scaled
   up, not a separate broadcast theme like RaceReplay/LiveMonitor — and sizes every row so the whole field
   fits one screen with no scrolling.

   The sizing is pure CSS off 100vh, with the rider count handed in by the component as the inline custom
   property --oc-lb-rows. No JS measurement and no resize listener: the browser recomputes on window resize
   and on entering/leaving fullscreen for free.

   Everything below the root needs ::deep — the targets are rendered by Radzen child components, so they
   never carry this file's CSS-isolation scope attribute (same reasoning as BikeSetupConfiguration.razor.css). */

.oc-lb-board[b-wwbll3axdk] {
    /* Vertical budget the rows must work within. --oc-lb-chrome is the app shell's header and padding, the
       same 7rem allowance RaceReplay and LiveMonitor assume; --oc-lb-head covers the card's padding, its
       "Leaderboard - {event}" heading and the grid's own header row. Both are custom properties rather than
       baked-in numbers precisely so the :fullscreen rule below can reclaim the chrome by overriding one
       value — custom properties inherit, so the change reaches the card and rows inside the child component. */
    --oc-lb-chrome: 7rem;
    --oc-lb-head: 8.5rem;
    height: calc(100vh - var(--oc-lb-chrome));
    position: relative;
    overflow: hidden;
}

.oc-lb-board:fullscreen[b-wwbll3axdk] {
    --oc-lb-chrome: 0rem;
    height: 100vh;
    padding: 1rem;
    /* A fullscreen element gets a black backdrop by default, which reads as a white card floating in a void
       under the light Radzen theme. Paint the theme's own background instead. */
    background: var(--rz-base-background-color, #fff);
}

.oc-lb-center[b-wwbll3axdk] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Fullscreen toggle, mirroring LiveMonitor's .lm-fs-btn, pinned top-right and out of the rows' way. */
.oc-lb-fs-btn[b-wwbll3axdk] {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    transition: background 0.12s;
}

.oc-lb-fs-btn:hover[b-wwbll3axdk] {
    background: var(--rz-base-300, rgba(0, 0, 0, 0.08));
}

/* ── Fit-to-screen sizing ────────────────────────────────────────────────────
   --oc-lb-rows is set inline on the card by EventLeaderboard in board mode, and is never zero (the component
   renders the grid only when it has entries). clamp() covers both ends: a big field shrinks to the floor
   rather than scrolling, and a small field stops growing rather than becoming absurd.

   The 5.5rem cap is what a small field lands on. Raising it trades whitespace below a short field for taller
   rows.

   Text is deliberately NOT scaled here: the board uses the dashboard's font sizes verbatim (the grid's
   1.25rem cell size, and Radzen's defaults for column titles, the card heading and the trophy icons). Row
   height and the avatars are the only things that grow to fill the screen. */
.oc-lb-board[b-wwbll3axdk]  .oc-lb-fit {
    --oc-lb-row-h: clamp(2.25rem,
        calc((100vh - var(--oc-lb-chrome) - var(--oc-lb-head)) / var(--oc-lb-rows)),
        5.5rem);
    --oc-lb-avatar: calc(var(--oc-lb-row-h) * 0.8);
}

.oc-lb-board[b-wwbll3axdk]  .oc-lb-fit .rz-data-row td {
    height: var(--oc-lb-row-h);
}

/* Nobody sorts a TV, and the arrows only add clutter at this size. */
.oc-lb-board[b-wwbll3axdk]  .oc-lb-fit .rz-sortable-column-icon {
    display: none;
}

/* ── Filling the screen ──────────────────────────────────────────────────────
   Chain a definite height from the root down to the grid. Radzen already makes .rz-data-grid a flex column
   whose .rz-data-grid-data child is `flex: 1; overflow: auto`, so this hands the grid a real height and the
   data area becomes the scroll container. That matters as a safety valve: if --oc-lb-head under-estimates the
   header allowance, or a field is long enough to hit the clamp() floor, the rows scroll inside the grid
   instead of being silently clipped by the root's overflow. */
.oc-lb-board[b-wwbll3axdk]  .rz-row {
    margin: 0;
    height: 100%;
}

.oc-lb-board[b-wwbll3axdk]  .oc-lb-fit.rz-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.oc-lb-board[b-wwbll3axdk]  .oc-lb-fit .rz-data-grid {
    flex: 1 1 auto;
    min-height: 0;
}
/* /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/PitBoard.razor.rz.scp.css */
/*
    Pit board (RSS-2395). A broadcast surface rather than an app surface: it is read at a distance, in daylight,
    by someone holding a physical board over a wall — so it carries its own dark palette and type scale instead
    of the Radzen theme's, the way the race view does.

    Colour never carries a status on its own here. Every state that matters (live / stale / offline, arming vs
    live, group size) also says what it is in words. Amber appears only on the arming badge and the trigger
    marker, which are states rather than judgements — it is deliberately absent from anything good/bad, because
    against this board's green it separates by only ~3 ΔE under protanopia.
*/

.pb-root[b-27fnz2174j] {
    --pb-bg: #0e0f13;
    --pb-panel: #16181e;
    --pb-panel2: #1d2028;
    --pb-line: #262a34;
    --pb-ink: #e7e9ee;
    --pb-muted: #8b90a0;
    --pb-faint: #5f6474;
    --pb-accent: #ff7a18;
    --pb-accent2: #38bdf8;
    --pb-green: #35e06a;
    --pb-red: #ff5a52;
    --pb-amber: #ffcf4a;

    display: grid;
    grid-template-columns: 1fr 340px;
    min-height: calc(100vh - 7rem);
    background: var(--pb-bg);
    color: var(--pb-ink);
}

/* ---- board ---- */

.pb-stage[b-27fnz2174j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 24px;
}

.pb-stagebar[b-27fnz2174j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 720px;
}

.pb-stagebar-foot[b-27fnz2174j] {
    justify-content: center;
    padding: 0 10px;
}

.pb-session[b-27fnz2174j] {
    color: var(--pb-muted);
    font-size: 13px;
}

.pb-conn[b-27fnz2174j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pb-conn-dot[b-27fnz2174j] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

.pb-conn-live[b-27fnz2174j] {
    color: var(--pb-green);
}

.pb-conn-live .pb-conn-dot[b-27fnz2174j] {
    box-shadow: 0 0 10px var(--pb-green);
    animation: pb-pulse-b-27fnz2174j 1.6s infinite;
}

.pb-conn-stale[b-27fnz2174j] {
    color: var(--pb-amber);
}

.pb-conn-offline[b-27fnz2174j] {
    color: var(--pb-red);
}

/* A replay must never read as a live board — it is a different colour, a different word, and its own control
   strip sitting above the board. */
.pb-conn-replay[b-27fnz2174j] {
    color: var(--pb-accent2);
}

/* ---- replay controls ---- */

.pb-replay[b-27fnz2174j] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 720px;
    padding: 10px 14px;
    border: 1px solid var(--pb-line);
    border-radius: 12px;
    background: var(--pb-panel);
}

.pb-replay-btn[b-27fnz2174j],
.pb-replay-speed[b-27fnz2174j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid var(--pb-line);
    border-radius: 8px;
    background: var(--pb-panel2);
    color: var(--pb-ink);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pb-replay-speed-on[b-27fnz2174j] {
    border-color: var(--pb-accent2);
    color: var(--pb-accent2);
}

.pb-replay-clock[b-27fnz2174j] {
    min-width: 56px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--pb-ink);
}

.pb-replay-scrub[b-27fnz2174j] {
    flex: 1;
    min-width: 0;
    accent-color: var(--pb-accent2);
}

@keyframes pb-pulse-b-27fnz2174j {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

.pb-board[b-27fnz2174j] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 720px;
    padding: 10px;
    border-radius: 20px;
    background: linear-gradient(160deg, #1a1c22, #0b0c0f);
}

.pb-head[b-27fnz2174j] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pb-num[b-27fnz2174j] {
    font-size: clamp(40px, 12vw, 64px);
    font-weight: 800;
    line-height: 1;
}

.pb-who[b-27fnz2174j] {
    font-size: clamp(18px, 5vw, 26px);
    letter-spacing: .1em;
}

.pb-class[b-27fnz2174j] {
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .6;
}

/* ---- tiles ---- */

.pb-tile[b-27fnz2174j] {
    position: relative;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
}

.pb-tile-wide[b-27fnz2174j] {
    grid-column: 1 / -1;
}

.pb-k[b-27fnz2174j] {
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .6;
}

.pb-v[b-27fnz2174j] {
    font-size: clamp(30px, 8vw, 42px);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pb-v-sm[b-27fnz2174j] {
    font-size: clamp(24px, 6vw, 30px);
}

.pb-good[b-27fnz2174j] { color: var(--pb-green); }
.pb-bad[b-27fnz2174j] { color: var(--pb-red); }

.pb-sub[b-27fnz2174j] {
    display: block;
    margin-top: 9px;
    font-size: 12px;
    color: var(--pb-muted);
    font-variant-numeric: tabular-nums;
}

.pb-badge[b-27fnz2174j] {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Arming and live are states, not verdicts — and both are spelled out, so the colour is only a second cue. */
.pb-badge-arming[b-27fnz2174j] {
    color: var(--pb-amber);
    background: rgba(255, 207, 74, .15);
    border: 1px solid rgba(255, 207, 74, .4);
}

.pb-badge-live[b-27fnz2174j] {
    color: var(--pb-green);
    background: rgba(53, 224, 106, .15);
    border: 1px solid rgba(53, 224, 106, .4);
}

.pb-empty[b-27fnz2174j] {
    grid-column: 1 / -1;
    padding: 30px;
    border: 1px dashed var(--pb-line);
    border-radius: 12px;
    color: var(--pb-muted);
    font-size: 13px;
    text-align: center;
}

.pb-empty-hint[b-27fnz2174j] {
    margin-top: 10px;
    color: var(--pb-faint);
    line-height: 1.6;
}

.pb-empty-hint a[b-27fnz2174j] {
    color: var(--pb-accent2);
}

/* ---- group ladder ---- */

.pb-chain[b-27fnz2174j] {
    margin-top: 12px;
}

.pb-rider[b-27fnz2174j] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    font-size: 13px;
    color: var(--pb-muted);
    font-variant-numeric: tabular-nums;
}

.pb-rider-in[b-27fnz2174j] { color: var(--pb-ink); }
.pb-rider-me[b-27fnz2174j] { font-weight: 800; }

.pb-rider-num[b-27fnz2174j] { min-width: 38px; }

.pb-rider-name[b-27fnz2174j] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pb-link[b-27fnz2174j] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-left: 14px;
    font-size: 11px;
    color: var(--pb-faint);
    font-variant-numeric: tabular-nums;
}

/* A solid rule is a gap the chain holds through; a dashed one is where the group ends. */
.pb-rule[b-27fnz2174j] {
    width: 2px;
    height: 15px;
    flex: none;
    border-radius: 2px;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .22) 0 3px, transparent 3px 6px);
}

.pb-link-joined .pb-rule[b-27fnz2174j] {
    background: var(--pb-ink);
}

/* ---- race control ---- */

.pb-rc-list[b-27fnz2174j] {
    display: grid;
    gap: 8px;
}

.pb-rc-item[b-27fnz2174j] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 14px;
}

.pb-rc-lap[b-27fnz2174j] {
    min-width: 52px;
    color: var(--pb-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.pb-rc-text[b-27fnz2174j] {
    flex: 1;
    min-width: 0;
}

/* ---- setup panel ---- */

.pb-config[b-27fnz2174j] {
    padding: 22px 20px;
    background: var(--pb-panel);
    border-left: 1px solid var(--pb-line);
    overflow-y: auto;
}

.pb-config-title[b-27fnz2174j] {
    margin: 0 0 4px;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pb-muted);
}

.pb-config-sub[b-27fnz2174j] {
    margin: 0 0 18px;
    font-size: 12px;
    color: var(--pb-faint);
}

.pb-group[b-27fnz2174j] {
    margin-bottom: 24px;
}

.pb-group > label[b-27fnz2174j] {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pb-muted);
}

.pb-sublabel[b-27fnz2174j] {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--pb-faint);
    text-transform: none;
}

.pb-hint[b-27fnz2174j] {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--pb-faint);
}

.pb-pair[b-27fnz2174j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pb-toggle[b-27fnz2174j] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 7px;
    padding: 9px 11px;
    border: 1px solid var(--pb-line);
    border-radius: 9px;
    background: var(--pb-panel2);
    color: var(--pb-ink);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s;
}

.pb-toggle:hover[b-27fnz2174j] {
    border-color: #39404f;
}

.pb-toggle-on[b-27fnz2174j] {
    border-color: var(--pb-accent);
    background: rgba(255, 122, 24, .08);
}

.pb-switch[b-27fnz2174j] {
    position: relative;
    width: 34px;
    height: 20px;
    flex: none;
    border-radius: 999px;
    background: #333844;
    transition: background .15s;
}

.pb-toggle-on .pb-switch[b-27fnz2174j] {
    background: var(--pb-accent);
}

.pb-switch[b-27fnz2174j]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

.pb-toggle-on .pb-switch[b-27fnz2174j]::after {
    transform: translateX(14px);
}

.pb-fs-btn[b-27fnz2174j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    padding: 7px 12px;
    border: 1px solid var(--pb-line);
    border-radius: 9px;
    background: var(--pb-panel2);
    color: var(--pb-ink);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pb-fs-btn:hover[b-27fnz2174j] {
    border-color: #39404f;
}

/* Radzen renders its own elements, which do not carry this component's scope attribute — reach them from the
   scoped root with ::deep, or these rules silently stop matching. */
.pb-config[b-27fnz2174j]  .rz-dropdown {
    width: 100%;
    background: var(--pb-panel2);
    border-color: var(--pb-line);
}

.pb-config[b-27fnz2174j]  .rz-dropdown-label {
    color: var(--pb-ink);
}

/* ---- phone / iPad ----
   The board comes first and the setup panel underneath: the crew opens this to read numbers, not to configure
   them. No horizontal scrolling at any width. */

@media (max-width: 900px) {
    .pb-root[b-27fnz2174j] {
        grid-template-columns: 1fr;
    }

    .pb-stage[b-27fnz2174j] {
        order: 1;
        padding: max(18px, env(safe-area-inset-top)) 5px 24px;
    }

    .pb-config[b-27fnz2174j] {
        order: 2;
        border-left: none;
        border-top: 1px solid var(--pb-line);
        padding: 22px 18px calc(28px + env(safe-area-inset-bottom));
        overflow-y: visible;
    }
}

.pb-root:fullscreen[b-27fnz2174j] {
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
}
.pb-root:fullscreen .pb-stage[b-27fnz2174j] {
    justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce) {
    .pb-conn-live .pb-conn-dot[b-27fnz2174j] {
        animation: none;
    }
}
/* /Components/Pages/PitBoard/PitBoardProgressBar.razor.rz.scp.css */
/* Lap-progress bar (RSS-2395). */

.pb-progress-value[b-h7ts4iadth] {
    display: block;
    font-size: clamp(22px, 5vw, 28px);
    font-weight: 800;
    line-height: 1;
}

.pb-sub[b-h7ts4iadth] {
    display: block;
    margin-top: 9px;
    font-size: 12px;
    color: var(--pb-muted);
    font-variant-numeric: tabular-nums;
}

.pb-track[b-h7ts4iadth] {
    display: grid;
    gap: 4px;
    margin-top: 6px;
}

.pb-seg[b-h7ts4iadth] {
    position: relative;
    height: 30px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}

.pb-seg-trigger[b-h7ts4iadth] {
    outline: 1px dashed rgba(255, 207, 74, .55);
}

.pb-fill[b-h7ts4iadth] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, var(--pb-accent), var(--pb-accent2));
    transition: width .12s linear;
}

/* The sector in progress is part estimate, so it is drawn back with a marked leading edge. A solid segment
   always means the rider was actually measured through it. */
.pb-fill-est[b-h7ts4iadth] {
    opacity: .5;
    border-right: 2px solid var(--pb-ink);
}

.pb-seg-label[b-h7ts4iadth] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--pb-ink);
    mix-blend-mode: difference;
}

.pb-track-legend[b-h7ts4iadth] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pb-faint);
}

/* Keep the data, drop the motion. */
@media (prefers-reduced-motion: reduce) {
    .pb-fill[b-h7ts4iadth] {
        transition: none;
    }
}
/* /Components/Pages/RaceReplay.razor.rz.scp.css */
/* Big-screen "broadcast" race viewer (RSS-1881). Dark, high-contrast, tabular-numeric, built to read from
   across a room. The class color is the accent (--rr-accent), set inline on .rr-root when configured. */

.rr-root[b-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;
}