/* ===== TrackSpace design tokens (sourced from TrackTracker design system) ===== */ :root { --tt-font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif; --tt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --tt-font-display: var(--tt-font-sans); --tt-brand-navy: #052767; --tt-brand-plum: #3a0647; --tt-brand-sidebar: linear-gradient(180deg, #052767 0%, #3a0647 70%); --tt-brand-amber: #FF7A00; /* apex mark - the one constant brand accent */ --tt-primary: #1b6ec2; --tt-primary-border: #1861ac; --tt-primary-rgb: 27, 110, 194; --tt-primary-text: #ffffff; --tt-cta: #d5001c; /* call-to-action / most-important action - replaces the Card/Panel --tt-primary→red override */ --tt-cta-border: #b00018; --tt-cta-rgb: 213, 0, 28; --tt-cta-on-dark: #ff5a6e; /* lightened Guards-Red for accents/eyebrows on always-dark hero shells (theme-independent) */ /* Button roles - name the action hierarchy by role, not by Bootstrap heritage. Each maps to a themed primitive, so it adapts across light / dark / paddock with no per-theme overrides. (`--tt-primary` stays as the legacy accent alias for links / accents / hero buttons.) */ --tt-btn-primary: var(--tt-ink-1); /* dominant affirmative action - black */ --tt-btn-primary-text: var(--tt-surface-0); /* inverse of ink-1, so it stays legible in every theme */ --tt-btn-secondary: var(--tt-surface-0); /* lower-emphasis companion - white, bordered */ --tt-btn-secondary-text: var(--tt-ink-1); --tt-btn-secondary-border: var(--tt-line); --tt-btn-cta: var(--tt-cta); /* single most-important action - Guards-Red */ --tt-btn-cta-text: #ffffff; --tt-btn-hero: var(--tt-primary); /* buttons set on a dark hero - the themeable accent (was "primary") */ --tt-btn-hero-text: var(--tt-primary-text); --tt-btn-danger: var(--tt-danger); /* destructive action */ --tt-btn-danger-text: #ffffff; --tt-link: #0071c1; --tt-accent: #6366f1; --tt-accent-soft: #eef2ff; --tt-ink-1: #0f172a; --tt-ink-2: #334155; --tt-ink-3: #475569; --tt-ink-4: #5b6b80; /* muted labels, captions - 5.44:1 on surface-0, 5.08:1 on surface-1 */ --tt-ink-5: #cbd5e1; /* placeholder / not-yet-entered (NOT for read text) */ --tt-line: #cdd5f5; --tt-line-soft: #d6d5d5; --tt-surface-0: #ffffff; --tt-surface-1: #f7f7f7; --tt-surface-2: #e8e8ec; /* chrome backdrop behind the layout; pages render on surface-1 */ --tt-surface-inverse: #0f172a; /* always-dark spotlight band (white text sits on it in every theme) */ /* App bar / chrome - tokenized so it responds to the active theme */ --tt-bar-bg: #e0e0e0; --tt-bar-ink: #0e1418; --tt-bar-border: var(--tt-line-soft); --tt-avatar-bg: #5f6368; --tt-success: #13c47d; --tt-success-soft: #AEFF9E; --tt-warning: #96e617; --tt-warning-soft: #ffff00; --tt-danger: #ee0606; --tt-danger-soft: #ED7677; --tt-danger-strong: crimson; /* Wear-life / status severity - colorblind-safe lightness ramp (crit dark < ok mid < warn light); forecast on a separate blue axis. */ --tt-status-ok: #16a34a; --tt-status-ok-on: #052e16; /* text/icon ON an ok fill (4.8:1; white was 3.30:1) */ --tt-status-ok-soft: #7cc9a3; /* a quieter ok: charted quantities that are fine but not the best */ --tt-status-warn: #facc15; /* fill / badge (light yellow) */ --tt-status-warn-on: #422006; /* text/icon ON a warn fill */ --tt-status-warn-text: #854d0e; /* warn-colored text on a light surface */ --tt-status-warn-border: #ca8a04; /* warn pill outline (separates pill from a warn tint) */ --tt-status-crit: #c62828; /* fill + text (deep red, still darker than ok-green) */ --tt-status-forecast: #2563eb; /* forecast projection */ --tt-status-warn-surface: #fef9c3; /* warn row/background tint */ --tt-status-crit-surface: #fbcdc9; /* crit row/background tint */ /* ===== Line drawings ===== The car and track drawings ship as light-bodied, dark-linework rasters (wwwroot/images/car-top/, Track.ImageUrl) - drawn for a white page, where the body melts into the surface and only the linework reads. On dark they do the opposite: a bright slab that swallows the cards sitting over it. Re-polarizing the asset per theme lets one file serve all three, rather than a second asset per body style forever. Paddock's surfaces are white, so it takes the light value. */ --tt-drawing-filter: none; /* ===== Elevation (shadow) scale ===== Shadow encodes height, not hue. One per-theme ambient tint (--tt-shadow-rgb) is layered at fixed alphas per step, so elevation stays decoupled from color yet adapts across light / dark / paddock. Focus + glow rings intentionally inherit the local accent (--tt-primary-rgb / --tt-cta-rgb) so a ring is red inside Card/Panel and blue elsewhere - matching the button-role scoping. Structural offset "shadows" (bars, ticks, inset borders) are NOT elevation and stay hand-rolled with color tokens. */ --tt-shadow-rgb: 15, 23, 42; /* slate ink - light/default ambient tint */ --tt-shadow-xs: 0 1px 3px rgba(var(--tt-shadow-rgb), 0.22); /* small "hardware" controls: toggle knob, segmented tab */ --tt-shadow-sm: 0 1px 2px rgba(var(--tt-shadow-rgb), 0.05), 0 4px 12px rgba(var(--tt-shadow-rgb), 0.05); /* resting cards, panels, raised chrome */ --tt-shadow-md: 0 4px 8px rgba(var(--tt-shadow-rgb), 0.06), 0 12px 24px rgba(var(--tt-shadow-rgb), 0.08); /* hover-lift on cards / frames */ --tt-shadow-lg: 0 8px 24px rgba(var(--tt-shadow-rgb), 0.14); /* popovers, dropdowns, appbar menu */ --tt-shadow-modal: 0 20px 60px rgba(var(--tt-shadow-rgb), 0.22); /* dialogs, sheets */ --tt-shadow-focus: 0 0 0 3px rgba(var(--tt-primary-rgb), 0.12); /* ring - standard inputs / fields */ --tt-shadow-focus-tight: 0 0 0 2px rgba(var(--tt-primary-rgb), 0.18); /* ring - dense grid controls */ --tt-shadow-glow: 0 3px 8px rgba(var(--tt-cta-rgb), 0.32); /* CTA emphasis glow */ /* ===== Radius scale ===== Value-named like spacing (the number IS the px value). Clusters: 2 = detail (ticks/swatches/badges), 4 = controls (buttons/chips/inputs), 8 = modals/tiles, 12 = cards (per DS), 16 = hero / bottom-sheet. Plus 999px pills; squares (0) and circles (50%) stay literal - they're not radii on the scale. */ --tt-radius-2: 2px; --tt-radius-4: 4px; --tt-radius-8: 8px; --tt-radius-12: 12px; --tt-radius-16: 16px; --tt-radius-pill: 999px; --tt-border-w: 1px; /* the standard hairline width (wider bespoke widths stay literal) */ /* ===== Spacing scale ===== Value-named: the token number IS the pixel value. The app's real cadence is a 2px rhythm through 24px (6/10/14/18/22 are used as heavily as the 4px steps), then 4px steps to 48, then 8px for large gaps. Odd nudges (3/5/7/9px) and rare one-offs (72/84/92px) stay literal - they're not part of the scale. */ --tt-s-2: 2px; --tt-s-4: 4px; --tt-s-6: 6px; --tt-s-8: 8px; --tt-s-10: 10px; --tt-s-12: 12px; --tt-s-14: 14px; --tt-s-16: 16px; --tt-s-18: 18px; --tt-s-20: 20px; --tt-s-22: 22px; --tt-s-24: 24px; --tt-s-28: 28px; --tt-s-32: 32px; --tt-s-36: 36px; --tt-s-40: 40px; --tt-s-44: 44px; --tt-s-48: 48px; --tt-s-56: 56px; --tt-s-64: 64px; --tt-text-xs: 0.75rem; --tt-text-sm: 0.85rem; --tt-text-btn: 0.9rem; /* button label - sits between sm and base; see .tt-btn */ --tt-text-base: 1rem; --tt-text-md: 1.1rem; --tt-text-lg: 1.25rem; --tt-text-xl: 1.5rem; --tt-text-2xl: 1.8rem; --tt-text-3xl: 2rem; /* Display sizes - the thin, oversized heading treatment. Extends the scale past 3xl; bespoke per-hero sizes (2.5-4.2rem, mostly one-offs) stay literal. */ --tt-text-4xl: 2.4rem; /* page-title h1 */ --tt-text-5xl: 3rem; /* large display */ --tt-text-6xl: 4rem; /* hero display */ /* Weights - 200/300 added for the light display headings (the DS's thin, oversized look). */ --tt-weight-light: 200; /* thin display headings */ --tt-weight-book: 300; /* light hero / lede emphasis */ --tt-weight-regular: 400; --tt-weight-medium: 500; --tt-weight-semibold: 600; --tt-weight-bold: 700; --tt-tracking-wide: 0.08em; --tt-leading-tight: 1.25; --tt-leading-normal: 1.5; } [data-theme="dark"] { /* Inverting also flips the glass and engine-bay masses from mid-grey to bright, where on light they barely separate from the body. The brightness trim pulls them back toward the surface so the linework stays the subject. */ --tt-drawing-filter: invert(1) brightness(0.75); --tt-brand-sidebar: linear-gradient(180deg, #020a1f 0%, #1a0322 70%); --tt-primary: #4ea4ed; --tt-primary-border: #2f7fc4; --tt-link: #5bb1ec; --tt-accent: #818cf8; --tt-accent-soft: #1e1b4b; --tt-ink-1: #f1f5f9; --tt-ink-2: #cbd5e1; --tt-ink-3: #94a3b8; --tt-ink-4: #64748b; --tt-ink-5: #475569; --tt-line: #1e293b; --tt-line-soft: #334155; --tt-surface-0: #0b1220; --tt-surface-1: #111827; --tt-surface-2: #0f172a; --tt-surface-inverse: #1e293b; /* lifted off the near-black card so the band stays distinct */ --tt-bar-bg: #1a2230; --tt-bar-ink: #e2e8f0; --tt-avatar-bg: #475569; /* Shadows read weakly on dark surfaces - re-tint to pure black and boost alphas. */ --tt-shadow-rgb: 0, 0, 0; --tt-shadow-xs: 0 1px 3px rgba(var(--tt-shadow-rgb), 0.50); --tt-shadow-sm: 0 1px 2px rgba(var(--tt-shadow-rgb), 0.40), 0 4px 12px rgba(var(--tt-shadow-rgb), 0.40); --tt-shadow-md: 0 4px 8px rgba(var(--tt-shadow-rgb), 0.45), 0 12px 24px rgba(var(--tt-shadow-rgb), 0.50); --tt-shadow-lg: 0 8px 24px rgba(var(--tt-shadow-rgb), 0.55); --tt-shadow-modal: 0 20px 60px rgba(var(--tt-shadow-rgb), 0.70); } /* Paddock - functional high-sun theme: pure-white surfaces, black hairlines. Ported from the TrackTracker DS ui_kits/web/palettes.css [data-palette="paddock"]. */ [data-theme="paddock"] { --tt-primary: #d5001c; --tt-primary-border: #b00018; --tt-link: #0e1418; --tt-accent: #d5001c; --tt-accent-soft: #fdecee; --tt-ink-1: #000000; --tt-ink-2: #0e1418; --tt-ink-3: #313639; --tt-ink-4: #626669; --tt-ink-5: #9a9ea1; /* read in direct sun, so paddock's placeholder stays darker */ --tt-line: #0e1418; --tt-line-soft: #c4c4c8; --tt-surface-1: #ffffff; --tt-surface-2: #ffffff; --tt-bar-bg: #ffffff; --tt-bar-ink: #0e1418; --tt-bar-border: #0e1418; /* High-sun light theme - keep the :root alphas, only re-tint the ambient shadow. */ --tt-shadow-rgb: 14, 20, 24; } *, *::before, *::after { box-sizing: border-box; } button { font-family: inherit; } html, body { margin: 0; padding: 0; height: 100%; font-family: var(--tt-font-sans); font-size: var(--tt-text-base); line-height: var(--tt-leading-normal); color: var(--tt-ink-1); background: var(--tt-surface-2); } /* Placeholders are an instruction about content that is not there, not content - they sit a step lighter than captions so an empty field never reads as filled. opacity:1 is required: Firefox applies its own opacity on top of the color. */ ::placeholder { color: var(--tt-ink-5); opacity: 1; } :disabled::placeholder { color: var(--tt-ink-5); } /* ===== Page layout ===== The app's page shell and the three panel arrangements. Every routed page states which one it is on. Before this existed the same shell was hand-rolled per page and had drifted to five widths and three paddings; see #400. THE FLOOR IS THE IDEA. None of the panel arrangements is a fixed fraction. Each one declares a minimum its CONTENT needs and lets the proportion fall out, so a panel is never squeezed below the width it can carry - the layout drops or wraps a column instead. That is why none of them needs a breakpoint to collapse. Two responsive tiers, both pre-existing and only named here: tablet <=800px reflow only. ALL FUNCTIONALITY REMAINS. Small laptops and tablets, before or during an event. Content rearranges; nothing is taken away. mobile <=600px reflow AND hide. A driver on the move, in the paddock. The tablet rule is the load-bearing one - a hide that a driver depends on trackside is a bug at that width, not a design choice. */ /* The page column. 1080px is the prototype's own shell - what the Perform surfaces were drawn against. The 16px gutter is not arbitrary: .tt-appbar's 8px padding plus .tt-appbar__menu-btn's 8px puts the hamburger glyph exactly 16px from the viewport edge, so page content and app chrome share one left edge. Left-aligned (margin: 0), not centred. */ .tt-page { padding: var(--tt-s-24) var(--tt-s-16) var(--tt-s-64); max-width: 1080px; margin: 0; display: flex; flex-direction: column; gap: var(--tt-s-16); } /* A page that hosts ONE flowing component - a table, a calendar, a card deck - opts out of the column and spans the viewport. Named for the condition ("does this page flow?") rather than the effect ("is this wide?"), because the condition is a question the next person can answer and taste drifts. */ .tt-page--flows { max-width: none; } /* ARRANGEMENT 1 + 2 - full width, or an equal share of the row. Generalised from Trackside's .ts-band2 and Recap: "they wrap to one column below 390px of usable width rather than squeezing the car drawing." At the 1048px content width this gives two columns of 516px; three would need 1202px, so two is the maximum while the floor holds. Override --tt-panel-min where the content is smaller - Prep's chip grid runs at 150px. */ .tt-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tt-panel-min, 390px), 1fr)); gap: var(--tt-s-16); align-items: start; } .tt-panel--full { grid-column: 1 / -1; } /* ARRANGEMENT 3 - the uneven pair. Flex, not grid, lifted from BandThree: "the table wants two columns' worth of room; the lists beside it read fine in one." A 2:1 GROWTH ratio from UNEQUAL BASES, which is what makes it better than a literal 2/3 + 1/3. The proportion moves with width - it approaches 380:300 (56:44) when tight and 2:1 (67:33) when wide - so the narrow side is never crushed. At 1048 content it resolves to 614.67 + 16 + 417.33; a literal 2/3 + 1/3 would put the rail at 338.67, below the 390 floor. Wraps at 696px. __wide and __narrow describe SIZE, deliberately. A semantic pair (subject/support) would assert a relationship between the two panels that the markup cannot guarantee. */ .tt-split { display: flex; flex-wrap: wrap; gap: var(--tt-s-16); align-items: flex-start; } .tt-split__wide { flex: 2 1 380px; min-width: 0; } .tt-split__narrow { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: var(--tt-s-16); } /* The gutter is the only thing the tiers change about the shell. The panel arrangements collapse on their own, above. */ @media (max-width: 800px) { .tt-page { padding: var(--tt-s-16) var(--tt-s-16) var(--tt-s-32); } } /* ===== Typography utilities ===== */ h1 { font-size: var(--tt-text-4xl); font-weight: var(--tt-weight-light); line-height: var(--tt-leading-tight); letter-spacing: -0.01em; margin: 0 0 var(--tt-s-18); } .tt-eyebrow { text-transform: uppercase; font-size: var(--tt-text-xs); letter-spacing: var(--tt-tracking-wide); color: var(--tt-ink-4); font-weight: var(--tt-weight-semibold); margin: 0 0 var(--tt-s-8); } .tt-label { font-size: var(--tt-text-xs); font-weight: var(--tt-weight-regular); color: var(--tt-ink-4); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--tt-s-4); } .tt-field { font-size: var(--tt-text-md); font-weight: var(--tt-weight-bold); color: var(--tt-ink-1); margin: 0; } /* ===== Button utilities ===== Label type is --tt-text-btn (0.9rem / 14.4px), not --tt-text-base. 16px is body-copy size and was out of step with the app's own working sizes - modal footer buttons are 13px and cg-form__input is 13px - so a base-sized button read as a redesign rather than a control. */ .tt-btn { display: inline-flex; align-items: center; gap: var(--tt-s-8); padding: 8px 15px; border-radius: var(--tt-radius-8); font-family: var(--tt-font-sans); font-size: var(--tt-text-btn); font-weight: var(--tt-weight-medium); cursor: pointer; border: var(--tt-border-w) solid transparent; text-decoration: none; line-height: 1.5; } /* Disabled - dimmed, matching the Modal and ConsumablesGrid buttons. Declared once here so a disabled .tt-btn never renders as if it were actionable, whatever its role variant. The variant :hover rules below are guarded so a disabled button stays visually inert. */ .tt-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Role-named variants - see the button-role tokens in :root. */ .tt-btn-primary { background: var(--tt-btn-primary); border-color: var(--tt-btn-primary); color: var(--tt-btn-primary-text); } .tt-btn-primary:hover:not(:disabled) { background: var(--tt-ink-2); border-color: var(--tt-ink-2); } .tt-btn-secondary { background: var(--tt-btn-secondary); border-color: var(--tt-btn-secondary-border); color: var(--tt-btn-secondary-text); } .tt-btn-secondary:hover:not(:disabled) { background: var(--tt-surface-1); } .tt-btn-cta { background: var(--tt-btn-cta); border-color: var(--tt-cta-border); color: var(--tt-btn-cta-text); } .tt-btn-cta:hover:not(:disabled) { background: var(--tt-cta-border); } .tt-btn-hero { background: var(--tt-btn-hero); border-color: var(--tt-primary-border); color: var(--tt-btn-hero-text); } .tt-btn-hero:hover:not(:disabled) { background: var(--tt-primary-border); } .tt-btn-danger { background: var(--tt-btn-danger); border-color: var(--tt-btn-danger); color: var(--tt-btn-danger-text); } .tt-btn-danger:hover:not(:disabled) { filter: brightness(0.88); } /* Legacy aliases - kept while components migrate to the role names above. `.tt-btn-outline` / `.tt-btn-ghost` are the older spelling of the secondary button. */ .tt-btn-outline { background: transparent; border-color: var(--tt-line-soft); color: var(--tt-ink-2); } .tt-btn-outline:hover:not(:disabled) { background: var(--tt-surface-1); } .tt-btn-ghost { background: var(--tt-surface-0); border-color: var(--tt-line-soft); color: var(--tt-ink-1); } .tt-btn-ghost:hover:not(:disabled) { background: var(--tt-surface-2); } /* ===== Stat row (label + value pair, space-between) ===== */ .tt-stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tt-s-12); } .tt-stat-row .tt-label { margin: 0; font-size: 11px; color: var(--tt-ink-4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--tt-weight-semibold); white-space: nowrap; } .tt-val { font-size: 13px; color: var(--tt-ink-2); text-align: right; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: var(--tt-border-w) solid #26b050; } .invalid { outline: var(--tt-border-w) solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ===== Data table ===== */ .tf-table { width: 100%; border-collapse: collapse; margin-top: var(--tt-s-16); font-size: var(--tt-text-sm); color: var(--tt-ink-1); } .tf-table th { padding: var(--tt-s-8) var(--tt-s-12); text-align: left; font-size: var(--tt-text-xs); font-weight: var(--tt-weight-semibold); letter-spacing: var(--tt-tracking-wide); text-transform: uppercase; color: var(--tt-ink-3); border-bottom: 2px solid var(--tt-line); } .tf-table td { padding: var(--tt-s-8) var(--tt-s-12); border-bottom: var(--tt-border-w) solid var(--tt-line-soft); vertical-align: middle; } .tf-table tbody tr:last-child td { border-bottom: none; } .tf-table tbody tr:hover td { background: var(--tt-surface-1); } /* ===== Card info-block utilities ===== */ /* Dot-separated stat run (TrackHistory, StockBreakdown) */ .tt-stock { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--tt-s-4); color: var(--tt-ink-2); font-size: 13px; } /* Flow variant - entries run together as wrapping inline text with inline bullet separators, instead of each item breaking to its own flex line. Used where entries are long (e.g. car history: best lap per track). */ .tt-stock--flow { display: block; line-height: 1.4; } .tt-stock strong { font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); font-variant-numeric: tabular-nums; } .tt-stock__zero { color: var(--tt-ink-4); } .tt-stock__zero strong { color: var(--tt-ink-4); font-weight: var(--tt-weight-medium); } .tt-stock__dot { color: var(--tt-ink-4); padding: 0 1px; } /* Product / brand chip list */ .tt-product-chips { display: inline-flex; flex-wrap: wrap; gap: var(--tt-s-4); } .tt-product-chip { display: inline-flex; align-items: center; padding: 3px var(--tt-s-10); font-size: 12px; font-weight: var(--tt-weight-medium); color: var(--tt-ink-1); background: var(--tt-surface-2); border: var(--tt-border-w) solid var(--tt-line-soft); border-radius: var(--tt-radius-pill); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .tt-product-chip--more { background: transparent; border-color: var(--tt-line); color: var(--tt-ink-3); } /* ══ Perform form primitives ═════════════════════════════════════════════════════════════ GLOBAL, not scoped, and they moved here from Prep.razor.css when the goal editor became a component (#357). Blazor scoped CSS stamps its attribute on the OWNING component's elements, so a rule living in Prep.razor.css cannot reach GoalEditor's markup at all - the extracted form rendered completely unstyled. The alternatives were ::deep from every host (which needs the rules duplicated per page) or a copy inside GoalEditor.razor.css (which leaves Prep's task editor on a second copy). Both recreate, in CSS, exactly the two-forms drift the design forbids in markup. .tt-label above already sets the precedent: form primitives shared by more than one surface are global. Every value below is unchanged from the scoped original. */ .perf-form__input { width: 100%; padding: 7px 10px; background: var(--tt-surface-0); border: var(--tt-border-w) solid var(--tt-line); border-radius: var(--tt-radius-4); font-family: var(--tt-font-sans); font-size: var(--tt-text-sm); color: var(--tt-ink-1); } .perf-form__input:focus { outline: none; border-color: var(--tt-primary); box-shadow: var(--tt-shadow-focus); } .perf-form__area { height: 62px; line-height: 1.5; resize: vertical; } .perf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tt-s-20); align-items: start; } .perf-form__hint { margin: var(--tt-s-4) 0 var(--tt-s-14); font-size: var(--tt-text-xs); line-height: 1.5; color: var(--tt-ink-4); text-wrap: pretty; } /* The 48-character advisory. It warns and never blocks, so it borrows the warn ink rather than the danger red an error would use. */ .perf-form__warn { margin: calc(var(--tt-s-10) * -1) 0 var(--tt-s-14); font-size: var(--tt-text-xs); line-height: 1.5; color: var(--tt-status-warn-text); } .perf-chips { display: flex; flex-wrap: wrap; gap: var(--tt-s-6); margin: var(--tt-s-2) 0 0; } .perf-glyph { width: 11px; height: 11px; display: inline-flex; } @media (max-width: 800px) { .perf-form__row { grid-template-columns: 1fr; gap: 0; } }