/* MeetPlatform dark theme — tuned for high-contrast meet-day displays (scoreboard, warm-up, overlay). */ :root { --mp-bg: #0d1117; --mp-surface: #161b22; --mp-surface-2: #1f2630; --mp-border: #2d333b; --mp-text: #e6edf3; --mp-muted: #9aa7b4; --mp-accent: #f0a500; /* barbell gold */ --mp-good: #2ea043; /* good lift / white light */ --mp-nolift: #d92d20; /* no lift / red light */ --mp-info: #1f6feb; /* ---- Dark control tokens (Setup redesign, fable-spec §6.2 / WP0 §2 rule 6) ---- Semantic roles for form controls, layered on top of the surface tokens above with safe fallbacks so a future theme can override --mp-accent-2 without touching this file. Applied under .mp-setup-scope only (see platform.css "Setup tab professional redesign" below) so other pages/forms are not regressed. */ --mp-control-bg: #171e28; --mp-control-bg-hover: #1a222d; --mp-control-border: #354253; --mp-control-border-focus: var(--mp-accent-2, #f0b94d); --mp-control-placeholder: #5e6978; --mp-nested-surface: #141b24; /* ---- display-board-typography §4.1: venue-display text-size tokens ---- Per-surface font scale, written to by wwwroot/display-scale.js from device-local storage (see that file for why and not the board root). Declared here so a board still renders at 100% if storage is unavailable, if the script is blocked, or on any page that never sets one. */ --mp-rb-font-scale: 1; /* operational run board (strengthmeet:display-scale:v1:run-board) */ --mp-sb-font-scale: 1; /* public scoreboard (strengthmeet:display-scale:v1:scoreboard) */ } /* ---- display-board-typography §4.1: shared venue-display type system ---------------------------------------- TWO independent inputs, deliberately kept apart (§4.2 forbids transform/zoom on a whole board): --mp-display-px RESOLUTION. A "reference pixel" LENGTH: exactly 1 CSS px on a 1920×1080 screen and 2 CSS px at 3840×2160, so the same setting is the same PHYSICAL size on the same 65-inch panel whichever source resolution the venue feeds it (§7.2). Derived from the viewport itself — never from window.screen, devicePixelRatio, the user agent or a hardcoded "4K mode". max(1px, …) floors it so a 1280×720 operator laptop keeps full-size type instead of shrinking to 67% (§11.2 lists 720p as a regression check, not as a surface that should get smaller text). --mp-display-font-scale OPERATOR CHOICE. 0.8–1.5, mapped from the surface's own --mp-*-font-scale below. Their product is --mp-display-unit, and every type token on every board is `calc(<1080p design px> * var(--mp-display-unit))`. Number × length × number is valid calc arithmetic and yields a length. Only TYPE (and the minimum spacing needed to stop collisions) reacts to the font scale; panel geometry stays resolution-driven, which is what keeps popovers, safe areas and hit targets correct at every size. */ .mp-runboard, .mp-sb { --mp-display-px: max(1px, calc(100vh / 1080)); --mp-display-unit: calc(var(--mp-display-px) * var(--mp-display-font-scale)); } .mp-runboard { --mp-display-font-scale: var(--mp-rb-font-scale, 1); } .mp-sb { --mp-display-font-scale: var(--mp-sb-font-scale, 1); } /* ---- display-board-typography §5.6: the shared plate-label ink treatment ---- Emitted by MeetPlatform.Contracts.Running.PlateAppearance.InkCssClass(configured colour) on EVERY plate on every surface — the run board's current bar, its Next/Then chips, and the chromeless platform display's large and mini plates — so the two platform-facing views can never disagree about a colour. The opposite-colour shadow is the safety net for intermediate custom colours that sit near the light/dark boundary, where neither ink is clearly better; it costs nothing on the unambiguous ones. Colour is never the sole signal: every plate prints its weight. */ .mp-plate-ink-light { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.75); } .mp-plate-ink-dark { color: #0a0d10; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); } /* ---- display-board-typography §3.1/§8: the Text size control, shared by both boards ---- Shares the anchored-popover geometry with the Indicators control (see the .mp-ind-wrap/.mp-scale-wrap rule further down, where both are listed together) so it sits beside Present looking like the rest of the toolbar — but under its OWN class names, because .mp-ind-* means "the Indicators control" and UI tests locate it by that. Buttons stay at least 44×44 CSS px in the normal operator toolbar (§8) and are unaffected by the font scale — the control sizes the BOARD, not itself. */ .mp-scale-popover { width: min(24rem, 92vw); } .mp-scale-stepper { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; } .mp-scale-stepper button { min-width: 44px; min-height: 44px; font-size: 1.15rem; font-weight: 900; } .mp-scale-value { flex: 1 1 auto; text-align: center; font-size: 1.05rem; font-weight: 900; color: var(--mp-accent); font-variant-numeric: tabular-nums; } .mp-scale-range { width: 100%; margin-top: 0.55rem; accent-color: var(--mp-accent); } .mp-scale-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; } .mp-scale-presets button { flex: 1 1 7rem; min-height: 40px; font-size: 0.8rem; } .mp-scale-actions { display: flex; justify-content: flex-end; margin-top: 0.6rem; } /* §8: the polite announcement target — one committed change, one announcement, never one per slider step. */ .mp-scale-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } body { background-color: var(--mp-bg); color: var(--mp-text); /* The app palette is dark — tell the browser so native controls (date-picker calendar icon + popup, scrollbars, etc.) render light-on-dark instead of an invisible black icon. */ color-scheme: dark; } a { color: var(--mp-accent); } a:hover { color: #ffc233; } .mp-shell { min-height: 100vh; } .mp-navbar { background: var(--mp-surface); border-bottom: 1px solid var(--mp-border); padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 1.25rem; } .mp-brand { font-weight: 800; letter-spacing: -0.02em; font-size: 1.15rem; color: var(--mp-text); text-decoration: none; } .mp-brand span { color: var(--mp-accent); } /* Strength Meet brand lock-up (BrandLockup.razor). Desktop mark height sits in the 32-34px navbar target (spec §7); the wordmark text hides itself under 720px so the Full variant compacts to mark-only on phones without a second DOM node, and the mark itself steps down into the 28px compact range at the same breakpoint. Only height is fixed — width:auto/object-fit:contain preserve the mark's native 2.0203:1 ratio so the wider/flatter art (wwwroot/brand/strength-meet-logo.svg) never stretches or crops. */ .mp-brand-lockup { display: inline-flex; align-items: center; gap: 0.5rem; } .mp-brand-mark { height: 34px; width: auto; display: block; object-fit: contain; flex: 0 0 auto; } .mp-brand-word { white-space: nowrap; } @media (max-width: 720px) { .mp-brand-full .mp-brand-word { display: none; } .mp-brand-lockup .mp-brand-mark { height: 28px; } } /* min-width:0 lets this flex item actually shrink to its widest single link (and wrap the rest) instead of the default flex min-width:auto forcing the whole row's natural width onto its flex-basis, which was pushing a couple of px past the viewport at very narrow widths (meets-ui fable-spec §10.3 phone no-overflow contract). */ .mp-nav-links { display: flex; gap: 1rem; flex-wrap: wrap; min-width: 0; } /* overflow-wrap:anywhere gives each link an in-word break opportunity, so a link whose text is wider than the viewport allows (the profile link renders the user's arbitrary display name) wraps inside its own row instead of holding its full min-content width and pushing the document past a 320px viewport — the same phone no-overflow contract as the container's min-width:0 note above. */ .mp-nav-links a { color: var(--mp-muted); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; } .mp-nav-links a:hover, .mp-nav-links a.active { color: var(--mp-text); } /* Full width by default; the top-right toggle adds html.mp-narrow to constrain it. Horizontal padding scales with viewport (meets-ui fable-spec §6.1) so wide/4K layouts don't carry a fixed narrow gutter, while narrow viewports keep a sane minimum. */ .mp-container { max-width: none; margin: 0 auto; padding: 1.75rem clamp(1rem, 1.4vw, 2rem) 4rem; } html.mp-narrow .mp-container { max-width: 1100px; } .mp-width-toggle { background: var(--mp-surface-2); color: var(--mp-text); border: 1px solid var(--mp-border); border-radius: 6px; padding: 0.3rem 0.6rem; cursor: pointer; font-weight: 600; font-size: 0.85rem; white-space: nowrap; } .mp-width-toggle:hover { border-color: var(--mp-accent); } .mp-width-toggle .when-narrow { display: none; } html.mp-narrow .mp-width-toggle .when-wide { display: none; } html.mp-narrow .mp-width-toggle .when-narrow { display: inline; } /* Below small-phone widths the toggle is INERT — full-width and the 1100px-max "narrow" container render identically when the viewport is far under 1100px — yet its nowrap label still forced the navbar ~27px past a 320px viewport (document-level horizontal overflow on every page). Hide the control where it does nothing. */ @media (max-width: 480px) { .mp-width-toggle { display: none; } } /* Secondary (in-meet) navigation bar. */ .mp-meet-nav { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 10px; padding: 0.6rem 1rem; margin-bottom: 1.25rem; } .mp-meet-nav a { padding: 0.15rem 0; } .mp-meet-nav a.active { color: var(--mp-accent); border-bottom: 2px solid var(--mp-accent); } /* ---- Registration grid (ag-grid-style inline editing) ---- */ /* A full-height scroll viewport: headers stay pinned (vertical scroll), and it scrolls horizontally when wider. The height below is only a no-JS fallback — registration-grid.js pins the exact height (viewport minus the chrome above it) at runtime so the page itself never scrolls and the grid's own scrollbars stay visible. */ .mp-reg-wrap { height: calc(100vh - 13rem); min-height: 18rem; overflow: auto; border: 1px solid var(--mp-border); border-radius: 10px; background: var(--mp-surface); } .mp-reg { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 0.85rem; } .mp-reg thead th { position: sticky; top: 0; z-index: 3; background: var(--mp-surface); border-bottom: 2px solid var(--mp-border); padding: 0.5rem 0.65rem; text-align: left; white-space: nowrap; font-weight: 700; color: var(--mp-muted); } .mp-reg tbody td { border-bottom: 1px solid var(--mp-border); padding: 0; white-space: nowrap; vertical-align: middle; } .mp-reg tbody tr:hover td { background: color-mix(in srgb, var(--mp-accent) 7%, transparent); } /* Editors read like plain cells until focused — a single click puts the cell into edit mode. */ .mp-reg .form-control { border: 1px solid transparent; background: transparent; border-radius: 0; box-shadow: none; width: 100%; min-width: 5rem; padding: 0.4rem 0.65rem; font: inherit; color: var(--mp-text); height: 2.2rem; } .mp-reg td > .form-control:hover { background: color-mix(in srgb, var(--mp-accent) 10%, transparent); } .mp-reg td > .form-control:focus { border-color: var(--mp-accent); background: var(--mp-bg); outline: none; box-shadow: inset 0 0 0 1px var(--mp-accent); position: relative; z-index: 1; } /* The multiselect cells blend into the grid: borderless until opened, matching the inline editors. */ .mp-reg .mp-multiselect > summary.msd-control { border-color: transparent; background: transparent; min-height: 2.2rem; border-radius: 0; } .mp-reg td:hover > .mp-multiselect > summary.msd-control { background: color-mix(in srgb, var(--mp-accent) 10%, transparent); } .mp-reg .mp-multiselect[open] > summary.msd-control { background: var(--mp-bg); border-color: var(--mp-accent); } /* Sortable + filterable column headers — single line: label (sort) on the left, filter funnel on the right. */ .mp-reg .mp-rhead { display: flex; align-items: center; gap: 0.4rem; justify-content: space-between; } .mp-reg .mp-rsort-label { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; } .mp-reg .mp-rsort-label:hover { color: var(--mp-text); } .mp-reg .mp-rsort-ind { font-size: 0.65rem; color: var(--mp-accent); } .mp-reg .mp-rsort-ord { font-size: 0.6rem; color: var(--mp-muted); margin-left: -0.15rem; } /* Filter funnel: a popover anchored to the header; the icon glows accent when a filter is active. */ .mp-reg .mp-rfilter-wrap { position: relative; flex: none; } .mp-reg .mp-rfilter-wrap > summary { list-style: none; cursor: pointer; color: var(--mp-muted); display: inline-flex; line-height: 1; padding: 2px; border-radius: 4px; } .mp-reg .mp-rfilter-wrap > summary::-webkit-details-marker { display: none; } .mp-reg .mp-rfilter-wrap > summary:hover { color: var(--mp-text); background: color-mix(in srgb, var(--mp-accent) 12%, transparent); } .mp-reg .mp-rfilter-wrap.mp-filter-on > summary { color: var(--mp-accent); } .mp-reg th.mp-rsort:has(.mp-rfilter-wrap[open]) { z-index: 5; } .mp-reg .mp-rfilter-pop { position: absolute; right: 0; top: 100%; z-index: 6; margin-top: 3px; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 6px; padding: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .mp-reg .mp-rfilter { width: 150px; box-sizing: border-box; padding: 0.3rem 0.4rem; font-size: 0.8rem; font-weight: 400; border: 1px solid var(--mp-border); border-radius: 4px; background: var(--mp-bg); color: var(--mp-text); } .mp-reg .mp-rfilter:focus { outline: none; border-color: var(--mp-accent); } /* Cells without a full-bleed editor provide their own padding (the tds themselves have none). */ .mp-reg td.mp-reg-center { text-align: center; padding: 0.3rem 0.5rem; } .mp-reg td.mp-reg-center input[type=checkbox] { margin: 0 auto; display: block; } .mp-reg td.mp-reg-pad { padding: 0.25rem 0.4rem; } /* "Not applicable" dash in a cell that otherwise holds an inline editor (weigh-ins openers/racks). */ .mp-reg .mp-reg-na { display: block; padding: 0.45rem 0.65rem; color: var(--mp-muted); } /* ---- Sticky-LEFT lifter/name column (lifter-linking WP-U3) ---- Mirrors .mp-dg-sticky-left on the shared data-grid stack further down this file — .mp-reg never had one. The body cell needs an OPAQUE background so horizontally-scrolled cells don't bleed through it; z-index is kept BELOW the filter-open (5) and popover (6) values on this same grid so a filter dropdown always wins the stacking order, even the sticky column's own. */ .mp-reg .mp-reg-sticky-left { position: sticky; left: 0; z-index: 2; background: var(--mp-surface); } .mp-reg tbody tr:hover td.mp-reg-sticky-left { background: color-mix(in srgb, var(--mp-accent) 12%, var(--mp-surface)); } .mp-reg thead th.mp-reg-sticky-left { z-index: 4; } /* ---- Bodyweight/weight-class mismatch (lifter-linking WP-U2) ---- Colour is never the only signal — see the "Class mismatch" text badge in the status column (WeighIns.razor) and the aria-invalid/aria-describedby pair on the two fields themselves. The tint lives on the (not the .form-control), so a focused editor's own opaque background + accent focus ring (:115 above) still show through unobscured — focus visibility is never traded away for the invalid styling. */ .mp-reg td.mp-cell-invalid { background: color-mix(in srgb, var(--mp-nolift) 14%, transparent); } .mp-reg td.mp-cell-invalid > .form-control { color: var(--mp-nolift); } /* Row-level attention marker on the sticky lifter cell — stays visible even once phase-2 column-hiding can hide the class/bodyweight cells themselves. Decorative (the accessible signal is the field pair + status badge above), so it is left out of the accessibility tree. */ .mp-reg td.mp-row-attention { position: relative; padding-left: 1.6rem; } .mp-reg td.mp-row-attention::before { content: "⚠"; position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); color: var(--mp-nolift); font-weight: 800; } /* ---- Grid toolbar + application full-screen mode (lifter-linking WP-U3) ---- A row above each meet-day grid (Registration/Weigh-ins) that will also host the column chooser in phase 2. Buttons are held at a 44px touch target unconditionally — a director on a tablet needs this row as much as one on a phone. */ .mp-grid-toolbar { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 0.5rem; } .mp-grid-toolbar .mp-btn { min-height: 44px; display: inline-flex; align-items: center; gap: 0.35rem; } /* .mp-grid-fs is a plain structural wrapper around a grid's toolbar-head + .mp-reg-wrap — display:contents keeps it invisible to layout (and CSS) until full screen is entered, so it never disturbs the page's normal flow. Entering full screen (grid-fullscreen.js) adds the existing .mp-board-fullscreen idiom (:228 below) — same CSS that already covers the viewport and hides the navbar for Scoreboard/RunBoard (.mp-shell:has(.mp-board-fullscreen) .mp-navbar) — so a grid's full-screen mode gets that behaviour for free instead of a second implementation. */ .mp-grid-fs { display: contents; } .mp-grid-fs.mp-board-fullscreen { display: flex; flex-direction: column; gap: 0; } .mp-grid-fs.mp-board-fullscreen .mp-reg-wrap { flex: 1 1 auto; min-height: 0; } /* results-scoreboard-workspace ADR-1 §4: generalized scroll-region growth rule alongside the Registration/Weigh- ins-specific one above — any grid that opts in via [data-grid-fs-scroll] (the OPL export editor's .mp-oplxe-scroller) gets the SAME "only the grid grows, everything else stays fixed" full-screen behaviour, overriding that element's own max-height cap so it can actually fill the remaining space. */ .mp-grid-fs.mp-board-fullscreen [data-grid-fs-scroll] { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; } .mp-grid-fs-head { display: none; } .mp-grid-fs.mp-board-fullscreen .mp-grid-fs-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: -1rem -1.25rem 0.75rem; padding: 0.65rem 1.25rem; background: #0b0f14; color: #fff; border-bottom: 1px solid var(--mp-border); } .mp-grid-fs-brand { font-weight: 800; letter-spacing: 0.02em; } .mp-grid-fs-meet { color: color-mix(in srgb, #fff 75%, transparent); } .mp-grid-fs-name { font-weight: 700; color: var(--mp-accent); } .mp-grid-fs-head .mp-autosave-status { margin-left: auto; } .mp-grid-fs-head .mp-btn { min-height: 44px; } /* ---- Lifter-linking Phase 2 (WP-U5/U6/U7/U8): identity fields, match strip, account/email/opl/media columns ---- */ /* Add-form email match strip (rapid-add, WP-U5) — text as well as colour: every state renders a leading glyph and the label text is never colour-only. Populated by entry-identity.js from /entry-email-match. */ .mp-id-strip { margin-top: 0.3rem; font-size: 0.78rem; min-height: 1rem; } .mp-id-strip[data-state] { display: flex; align-items: center; gap: 0.35rem; } .mp-id-strip[data-state="verified"] { color: var(--mp-good); } .mp-id-strip[data-state="unverified"] { color: var(--mp-accent); } .mp-id-strip[data-state="already"] { color: var(--mp-info); } .mp-id-strip[data-state="conflict"], .mp-id-strip[data-state="invalid"] { color: var(--mp-nolift); } .mp-id-strip[data-state="none"] { color: var(--mp-muted); } .mp-id-strip .mp-linkbtn { font-size: 0.78rem; } /* OpenPowerlifting handle input with a fixed "openpowerlifting.org/u/" prefix (mock-up affordance) — a full URL still works if pasted (ProfileLinkNormalizer accepts either), the prefix is purely a hint. */ .mp-opl-input { display: flex; align-items: stretch; border: 1px solid var(--mp-border); border-radius: 6px; overflow: hidden; background: var(--mp-bg); } .mp-opl-prefix { display: flex; align-items: center; padding: 0 0.5rem; font-size: 0.78rem; color: var(--mp-muted); background: var(--mp-surface-2); white-space: nowrap; } .mp-opl-input .mp-opl-field.form-control { border: none; border-radius: 0; } /* The "Will link to…" note left by the pre-add review panel (WP-U5/WP-U6 shared dialog, pre-add mode). */ .mp-id-link-note { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--mp-good); } /* Account/OpenPowerlifting grid cells (WP-U6/WP-U7). */ .mp-opl-cell { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.4rem; } .mp-opl-link { color: var(--mp-text); text-decoration: underline; font-size: 0.82rem; } .mp-opl-link:hover { color: var(--mp-accent); } button.mp-opl-state { border: 1px solid var(--mp-border); cursor: pointer; } button.mp-opl-state:hover, button.mp-opl-state:focus-visible { border-color: var(--mp-accent); outline: none; } .mp-reg td[data-col="opl"] input.form-control { border-top: 1px solid var(--mp-border); } /* Media cell (WP-U8): a small square preview + label, sized as a real 44px-plus touch target. */ .mp-id-media-btn { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 100%; min-height: 44px; background: transparent; border: none; cursor: pointer; color: var(--mp-text); padding: 0.3rem; } .mp-id-media-btn:hover, .mp-id-media-btn:focus-visible { color: var(--mp-accent); outline: none; } .mp-id-media-thumb { width: 1.8rem; height: 1.8rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--mp-border); } .mp-id-media-placeholder { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px dashed var(--mp-border); display: flex; align-items: center; justify-content: center; color: var(--mp-muted); font-size: 0.7rem; } .mp-id-media-btn span[aria-hidden] { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mp-muted); } /* Shared right-side drawer for the three identity panels (link review / OpenPowerlifting preview / media manage) — same native--as-drawer shape as .mp-undo-drawer (free focus trap/Escape/focus-return from showModal()). */ .mp-id-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(28rem, 100%); max-width: min(28rem, 100%); height: 100%; max-height: 100vh; overflow-y: auto; background: var(--mp-surface); color: var(--mp-text); border: 1px solid var(--mp-border); border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0; padding: 1.1rem 1.2rem; box-shadow: -14px 0 40px rgba(0,0,0,0.45); } .mp-id-drawer::backdrop { background: rgba(0, 0, 0, 0.55); } .mp-id-drawer-close { width: 2.2rem; height: 2.2rem; border-radius: 6px; background: var(--mp-surface-2); color: var(--mp-text); border: 1px solid var(--mp-border); cursor: pointer; font-size: 1rem; line-height: 1; } .mp-id-drawer-close:hover { border-color: var(--mp-accent); color: var(--mp-accent); } .mp-id-drawer-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; } .mp-id-drawer-actions label { font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; } .mp-id-drawer-error { color: var(--mp-nolift); font-weight: 700; margin-top: 0.7rem; font-size: 0.85rem; } .mp-id-drawer-candidate { border: 1px solid var(--mp-border); border-radius: 8px; padding: 0.7rem 0.85rem; margin: 0.6rem 0; background: var(--mp-surface-2); } .mp-id-drawer-candidate dt { color: var(--mp-muted); font-size: 0.75rem; } .mp-id-drawer-candidate dd { margin: 0 0 0.4rem; } .mp-id-media-section { border: 1px solid var(--mp-border); border-radius: 8px; padding: 0.75rem; margin-bottom: 0.85rem; } .mp-id-media-section h4 { margin: 0 0 0.4rem; } .mp-id-media-preview { width: 100%; max-width: 12rem; border-radius: 6px; display: block; margin-bottom: 0.5rem; border: 1px solid var(--mp-border); } .mp-id-media-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .mp-id-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.8rem; margin: 0.6rem 0; } .mp-id-stat { border: 1px solid var(--mp-border); border-radius: 8px; padding: 0.5rem 0.6rem; } .mp-id-stat dt { color: var(--mp-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; } .mp-id-stat dd { margin: 0; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; } .mp-id-attribution { font-size: 0.75rem; color: var(--mp-muted); margin-top: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--mp-border); } @media (max-width: 480px) { .mp-id-drawer { width: 100%; max-width: 100%; } } /* Lightweight client-side email validation (entry-identity.js, on blur) — the input itself turns red AND an inline text message appears, so the state is never colour-only. Never blocks saving a well-formed value; the server remains the source of truth for what actually gets rejected. */ input.mp-field-invalid { border-color: var(--mp-nolift) !important; } .mp-field-error-msg { display: block; color: var(--mp-nolift); font-size: 0.75rem; margin-top: 0.2rem; } .mp-reg td .mp-field-error-msg { position: absolute; background: var(--mp-surface); padding: 0.1rem 0.3rem; border-radius: 4px; } /* ---- Shared data-grid foundation (director-ui-spec §8.3 / WP2) ---- Net-new, reusable primitives extracted from the proven Registration grid above: sticky header, bounded horizontal + vertical scroll, dense hoverable rows, and data-driven sortable/filterable headers. Driven by data-grid.js off column data-attributes (data-dg-numeric) and stable .mp-dg-* hooks rather than page-specific selectors, so any page (Entries, future grids) can consume it. Registration/WeighIns deliberately still use the .mp-reg-* rules above — see WP2 notes; migrating them is a separate safe step. Adds a sticky-LEFT column capability (Entries needs a pinned Lifter column) that the Registration original never had. */ .mp-data-grid-wrap { height: calc(100vh - 13rem); min-height: 18rem; overflow: auto; border: 1px solid var(--mp-border); border-radius: 10px; background: var(--mp-surface); } .mp-data-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 0.85rem; } .mp-data-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--mp-surface); border-bottom: 2px solid var(--mp-border); padding: 0.5rem 0.65rem; text-align: left; white-space: nowrap; font-weight: 700; color: var(--mp-muted); } .mp-data-grid tbody td { border-bottom: 1px solid var(--mp-border); padding: 0.4rem 0.65rem; white-space: nowrap; vertical-align: middle; } .mp-data-grid tbody tr:hover td { background: color-mix(in srgb, var(--mp-accent) 7%, transparent); } /* Sticky-LEFT column (e.g. Entries lifter name). The body cell needs an OPAQUE background so horizontally scrolled cells don't bleed through it; the header corner (sticky top AND left) must sit above everything. */ .mp-data-grid .mp-dg-sticky-left { position: sticky; left: 0; z-index: 2; background: var(--mp-surface); } .mp-data-grid tbody tr:hover td.mp-dg-sticky-left { background: color-mix(in srgb, var(--mp-accent) 12%, var(--mp-surface)); } .mp-data-grid thead th.mp-dg-sticky-left { z-index: 6; } /* Sortable + filterable header — label (sort, keyboard-activatable) on the left, filter funnel on the right. */ .mp-data-grid .mp-dg-head { display: flex; align-items: center; gap: 0.4rem; justify-content: space-between; } .mp-data-grid .mp-dg-sort-label { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; border-radius: 4px; } .mp-data-grid .mp-dg-sort-label:hover { color: var(--mp-text); } .mp-data-grid .mp-dg-sort-label:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; } .mp-data-grid .mp-dg-sort-ind { font-size: 0.65rem; color: var(--mp-accent); } .mp-data-grid .mp-dg-sort-ord { font-size: 0.6rem; color: var(--mp-muted); margin-left: -0.15rem; } .mp-data-grid .mp-dg-filter-wrap { position: relative; flex: none; } .mp-data-grid .mp-dg-filter-wrap > summary { list-style: none; cursor: pointer; color: var(--mp-muted); display: inline-flex; line-height: 1; padding: 2px; border-radius: 4px; } .mp-data-grid .mp-dg-filter-wrap > summary::-webkit-details-marker { display: none; } .mp-data-grid .mp-dg-filter-wrap > summary:hover { color: var(--mp-text); background: color-mix(in srgb, var(--mp-accent) 12%, transparent); } .mp-data-grid .mp-dg-filter-wrap > summary:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 1px; } .mp-data-grid .mp-dg-filter-wrap.mp-dg-filter-on > summary { color: var(--mp-accent); } .mp-data-grid th:has(.mp-dg-filter-wrap[open]) { z-index: 7; } .mp-data-grid .mp-dg-filter-pop { position: absolute; right: 0; top: 100%; z-index: 8; margin-top: 3px; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 6px; padding: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .mp-data-grid .mp-dg-filter { width: 150px; box-sizing: border-box; padding: 0.3rem 0.4rem; font-size: 0.8rem; font-weight: 400; border: 1px solid var(--mp-border); border-radius: 4px; background: var(--mp-bg); color: var(--mp-text); } .mp-data-grid .mp-dg-filter:focus { outline: none; border-color: var(--mp-accent); } .mp-data-grid td.mp-dg-center { text-align: center; } .mp-data-grid .mp-dg-empty { padding: 1rem; text-align: center; color: var(--mp-muted); } /* Collapsible "Add competitor" panel. */ .mp-add-panel { border: 1px solid var(--mp-border); border-radius: 10px; background: var(--mp-surface); margin-bottom: 0.75rem; } .mp-add-panel > summary { cursor: pointer; padding: 0.6rem 0.9rem; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 0.5rem; } .mp-add-panel > summary::-webkit-details-marker { display: none; } .mp-add-panel > summary::before { content: "▸"; color: var(--mp-accent); transition: transform 0.15s; } .mp-add-panel[open] > summary::before { transform: rotate(90deg); } .mp-add-panel .mp-add-body { padding: 0 0.9rem 0.9rem; } /* Themed inputs in the Add-competitor form, matching the Divisions/Events multiselect controls. */ .mp-add-panel .form-control { background: var(--mp-bg); color: var(--mp-text); border: 1px solid var(--mp-border); border-radius: 6px; padding: 0.4rem 0.5rem; font: inherit; box-shadow: none; } .mp-add-panel .form-control::placeholder { color: var(--mp-muted); } .mp-add-panel .form-control:hover { border-color: color-mix(in srgb, var(--mp-accent) 45%, var(--mp-border)); } .mp-add-panel .form-control:focus { outline: none; border-color: var(--mp-accent); background: var(--mp-bg); color: var(--mp-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mp-accent) 25%, transparent); } .mp-add-panel label.mp-muted { display: block; margin-bottom: 0.15rem; } /* ---- Meet-day boards ---- */ .mp-board-fullscreen { position: fixed; inset: 0; z-index: 1000; overflow: auto; padding: 1rem 1.25rem; background: var(--mp-bg); } /* A fullscreen board only visually covers the app chrome; z-index occlusion alone leaves the navbar's links keyboard-Tab-reachable on a kiosk/audience screen. display:none removes them from the tab order and the accessibility tree. The shell observes the board structurally with :has() because MainLayout renders statically (SSR) and cannot see the interactive board island's Present state toggle at runtime. */ .mp-shell:has(.mp-board-fullscreen) .mp-navbar { display: none; } /* Presentation mode: only the boards show; the Exit button stays out of the way until hovered. */ .mp-sb-present { padding: 0.5rem 0.75rem; } .mp-sb-exit { position: fixed; top: 0.5rem; right: 0.5rem; z-index: 1100; opacity: 0.25; transition: opacity 0.15s; } .mp-sb-exit:hover { opacity: 1; } .mp-board-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .mp-board-title { font-weight: 800; font-size: 1.25rem; } .mp-board-logo { height: 32px; vertical-align: middle; margin-right: 0.5rem; } .mp-board-platform { margin-bottom: 1.5rem; } .mp-board-platform:last-child { margin-bottom: 0; } .mp-board-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.85rem; background: var(--mp-surface); border: 1px solid var(--mp-border); border-left: 4px solid var(--mp-accent); border-radius: 8px; padding: 0.6rem 1rem; margin-bottom: 0.75rem; } .mp-board-table th, .mp-board-table td { padding: 0.35rem 0.55rem; font-variant-numeric: tabular-nums; } .mp-board-table td { border-bottom: 1px solid var(--mp-border); } .mp-row-current { background: color-mix(in srgb, var(--mp-accent) 18%, transparent); } /* Flight separator band: each flight in a platform board gets a labelled header row; the flight lifting now is highlighted, the others are dimmed. */ .mp-board-table .mp-sb-flightrow td { background: var(--mp-surface-2, #1b222c); color: var(--mp-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; border-top: 2px solid var(--mp-border); border-bottom: 1px solid var(--mp-border); } .mp-board-table .mp-sb-flightrow.current td { color: var(--mp-accent); background: color-mix(in srgb, var(--mp-accent) 14%, var(--mp-surface)); } .mp-board-table tr.mp-sb-otherflight td { opacity: 0.6; } .mp-board-table td.mp-cell-sub { font-weight: 700; } .mp-cell-good { color: var(--mp-good); font-weight: 800; } .mp-cell-nolift { color: var(--mp-nolift); font-weight: 800; text-decoration: line-through; } .mp-cell-bomb { color: var(--mp-nolift); font-weight: 800; } .mp-cell-current { outline: 2px solid var(--mp-accent); outline-offset: -2px; } /* ==== Scoreboard/Livestream WP5: condensed scoreboard + play links (spec §3.1/§5.1) ==== */ .mp-sb-toggle-group { display: inline-flex; border-radius: 8px; overflow: hidden; } .mp-sb-toggle-group .mp-btn { border-radius: 0; } /* Sticky first column (place + forecast + name) so the identity stays visible while the attempt columns scroll horizontally at narrow widths. Needs an OPAQUE background matching whatever the row underneath would show, otherwise horizontally-scrolled cells show through the sticky column. */ .mp-sb-sticky { position: sticky; left: 0; z-index: 2; text-align: left; background: var(--mp-surface); min-width: 9rem; max-width: 15rem; } tr.mp-row-current .mp-sb-sticky { background: color-mix(in srgb, var(--mp-accent) 18%, var(--mp-surface)); } .mp-sb-place { font-weight: 800; } /* Forecast transition ("9 → 8"): visually marked as a PROJECTION (arrow + accent colour), distinct from the plain current-place number beside it — spec §3.1 "never as the current place". */ .mp-sb-forecast { display: inline-flex; align-items: center; gap: 0.1rem; margin-left: 0.35rem; color: var(--mp-accent); font-weight: 800; font-size: 0.78rem; } .mp-sb-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; } /* Play control: a real link (never a bare onclick div), touch target held at >=44x44 CSS px even though the glyph itself is small (spec §3.1 "must remain at least 44 x 44 CSS px as a touch target, even if its visible glyph is smaller"). Present in both full and condensed modes (spec §5.1); absent whenever a completed cell has no Ready clip (Razor renders nothing — no dead/broken link, spec §12). */ .mp-lift-video { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 0.15rem; vertical-align: middle; border-radius: 8px; color: var(--mp-text); text-decoration: none; font-size: 0.85rem; background: color-mix(in srgb, var(--mp-accent) 12%, transparent); } .mp-lift-video:hover, .mp-lift-video:focus-visible { background: color-mix(in srgb, var(--mp-accent) 28%, transparent); outline: 2px solid var(--mp-accent); outline-offset: 1px; } /* The condensed grid's glyph is smaller (compact numeric cells) but the tappable box itself never shrinks below 44px. */ .mp-sb-condensed-table .mp-lift-video { font-size: 0.68rem; } /* Present mode: belt-and-braces (spec §5.1/§13 acceptance example 5). The Razor condition already never renders a play link while _present is true — this rule is the defensive second layer named in the WP brief, so a play control can never surface even if a future change forgets the Razor guard. */ .mp-sb-present .mp-lift-video { display: none !important; } /* Fit at 390px with compact numeric cells (spec §3.1); a horizontal scrollbar on the TABLE'S OWN wrapper (never the outer page) covers narrower widths and the extra column a fourth-attempt meet adds. */ .mp-sb-condensed-wrap { overflow-x: auto; } .mp-sb-condensed-table th, .mp-sb-condensed-table td { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 480px) { .mp-sb-condensed-table th, .mp-sb-condensed-table td { padding: 0.3rem 0.4rem; font-size: 0.82rem; } .mp-sb-sticky { min-width: 7rem; max-width: 9rem; } .mp-sb-name { max-width: 8rem; } } /* ==== display-board-typography §7.2/§7.3: the scoreboard's resolution-aware type scale ====================== EVERY rule below is scoped under .mp-sb on purpose, including the ones that look like they belong on the shared classes. .mp-board-table, .mp-row-current and the .mp-cell-* family are shared with the OPERATOR run board (RunMeet.razor renders the same .mp-table.mp-board-table), so the shared rules above are left exactly as they are and the scoreboard states its own sizes here. A change made for the 65-inch audience screen must never silently re-type the director's laptop. Each token is `calc(<1080p design px> * var(--mp-display-unit))`, where --mp-display-unit is (max(1px, 100vh/1080)) x the operator's 0.8-1.5 choice — see the shared block at the top of this file. So the number inside each calc() IS the intended size in CSS px on a 1920x1080 screen at 100%, and it doubles by itself at 3840x2160 purely because the viewport is twice as tall. Nothing here branches on window.screen, devicePixelRatio, the user agent or a "4K mode": the viewport is the only input, which is what makes a bookmarked ?fullscreen=true URL, Present mode and a browser-source capture all agree. The bases are picked so that base x 1.25 clears the §7.3 minimum at the "Audience 65in" preset, which is the size those minimums are stated at: current lifter name 28 -> 35.00 (min 34) scoreboard body rows 23 -> 28.75 (min 28) current weight 29 -> 36.25 (min 36) lifter identity 24 -> 30.00 (min 30) table headings 16 -> 20.00 (min 20) flight separator 16 -> 20.00 (min 20) PB/record glyph 13 -> 16.25 (min 16) (in Scoreboard.razor.css, where those badges live) §4.4/§7.4: there is deliberately NO clamp-down, no max-height and no font-size reduction anywhere in this block. When the operator asks for bigger type the board shows FEWER ROWS in the same space — the table wrappers scroll — rather than quietly serving type smaller than what was asked for. */ /* The current-lifter strip: the loudest thing on the board (§7.4). The strip itself gets a modest base so the round/flight chatter beside the name scales with everything else; .mp-badge keeps its own size, so the platform and "Competition not started" pills are unaffected. "Next" gets an explicit, much smaller token instead of the browser default, so the gap between "lifting now" and "on deck" is just as obvious at 4K/140% as it is at 1080p/100% (at the default it would stay 16px while the current line grew to 56px). */ .mp-sb .mp-board-current { font-size: calc(17 * var(--mp-display-unit)); min-width: 0; max-width: 100%; } .mp-sb .mp-sb-current-name { font-size: calc(28 * var(--mp-display-unit)); font-weight: 900; line-height: 1.15; min-width: 0; max-width: 100%; overflow-wrap: anywhere; } .mp-sb .mp-sb-current-weight { font-size: calc(29 * var(--mp-display-unit)); font-weight: 900; line-height: 1.15; color: var(--mp-accent); font-variant-numeric: tabular-nums; white-space: nowrap; } .mp-sb .mp-sb-current-next { font-size: calc(18 * var(--mp-display-unit)); min-width: 0; max-width: 100%; } /* Board rows and headings. font-variant-numeric is restated because these overrides sit at higher specificity than the shared .mp-board-table rule that carries it; without it a weight column would lose tabular figures and its digits would visibly jitter as attempts land. */ .mp-sb .mp-board-table th { font-size: calc(16 * var(--mp-display-unit)); } .mp-sb .mp-board-table td { font-size: calc(23 * var(--mp-display-unit)); font-variant-numeric: tabular-nums; } /* Flight separator band — a label, not data, so it stays at heading size rather than row size. */ .mp-sb .mp-board-table .mp-sb-flightrow td { font-size: calc(16 * var(--mp-display-unit)); } /* Lifter identity, one step above the numbers it sits beside (§7.3): the condensed board's .mp-sb-name span and the full board's .mp-sb-namecell span are the same idiom. Both stay single-line + ellipsis — a name that wrapped to two lines would cost a whole extra row of board height per long-named lifter at 140%. The ellipsis box has to be an inner BLOCK because max-width on a is not honoured under auto table layout. Its max-width scales with the type (it is collision spacing, not panel geometry): a fixed 14rem box with 30px text inside would truncate two thirds of the field at the audience preset. */ .mp-sb .mp-sb-name, .mp-sb .mp-board-table td .mp-sb-namecell { font-size: calc(24 * var(--mp-display-unit)); font-weight: 700; } .mp-sb .mp-sb-name { max-width: calc(224 * var(--mp-display-unit)); } .mp-sb .mp-board-table td .mp-sb-namecell { display: block; min-width: 0; max-width: calc(240 * var(--mp-display-unit)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-sb .mp-sb-sticky { min-width: calc(144 * var(--mp-display-unit)); max-width: calc(240 * var(--mp-display-unit)); } /* The forecast arrow is read from the same distance as the numbers it annotates, so it scales too; left at 0.72rem it would be an 11px mark next to 46px digits on a 4K audience screen. */ .mp-sb .mp-sb-forecast { font-size: calc(15 * var(--mp-display-unit)); } /* §4.4/§7.4 overflow containment. The rule is: horizontal overflow lives INSIDE the table's own wrapper, and the PAGE never grows a horizontal scrollbar at any size from 80% to 150%, at 1920x1080 or 3840x2160. Blocks are width:auto so they cannot push the page out on their own; what can is a table (intrinsically as wide as its content) or a flex item that refuses to shrink below its content. Hence: scroll containers on both table wrappers, and min-width:0 on the flex/table chain above them so the shrink actually happens. .mp-sb-full-wrap also carries the padding:0 that used to be an inline style on that .mp-card. The board ROOT deliberately gets min-width:0 ONLY, never max-width:100%: in Present / ?fullscreen=true it is position:fixed with inset:0 and its own padding, and a percentage max-width there resolves against the viewport and can reintroduce the very overflow it was meant to prevent. */ .mp-sb { min-width: 0; } .mp-sb .mp-board-platform { min-width: 0; max-width: 100%; } .mp-sb .mp-sb-condensed-wrap { min-width: 0; max-width: 100%; overflow-x: auto; } .mp-sb .mp-sb-full-wrap { padding: 0; min-width: 0; max-width: 100%; overflow-x: auto; } /* §7.5: neither Present nor ?fullscreen=true resets anything typographic — .mp-board-fullscreen sets only position/inset/z-index/overflow/padding/background and .mp-sb-present only padding (both above), and the scale itself is a custom property on that no board-root class can shadow. So a screen that was set to 125% shows 125% the moment it enters Present, and a bookmarked ?fullscreen=true kiosk URL comes up at 125% without ever painting 100% first. Checked, and deliberately left with NO rule of its own: adding a defensive font-size here would be the very kind of reset this note exists to rule out. */ /* Mobile (the existing 480px breakpoint above). A phone looking at the public scoreboard is not a venue display: the condensed board is designed to fit 390px, and 23px rows would blow that apart. These restate the pre-existing compact sizes at a specificity that beats the .mp-sb-scoped tokens above, so the phone layout is byte-for-byte what it was before this work package. The operator's Text size choice still applies to the board on a venue screen; it just does not get to shrink-wrap a phone. */ @media (max-width: 480px) { .mp-sb .mp-board-table th, .mp-sb .mp-board-table td { font-size: 0.82rem; } .mp-sb .mp-board-table .mp-sb-flightrow td { font-size: 0.78rem; } .mp-sb .mp-sb-name, .mp-sb .mp-board-table td .mp-sb-namecell { font-size: 0.82rem; max-width: 8rem; } .mp-sb .mp-sb-sticky { min-width: 7rem; max-width: 9rem; } .mp-sb .mp-sb-forecast { font-size: 0.78rem; } .mp-sb .mp-board-current { font-size: 1rem; } .mp-sb .mp-sb-current-name { font-size: 1.2rem; } .mp-sb .mp-sb-current-weight { font-size: 1.25rem; } .mp-sb .mp-sb-current-next { font-size: 1rem; } } /* ---- Inline editable run-board cells (edit happens in the cell, not a popover) ---- */ .mp-edit-cell { cursor: pointer; min-width: 2.6rem; } .mp-edit-cell.editing { background: var(--mp-surface); outline: 2px solid var(--mp-accent); outline-offset: -2px; min-width: 150px; } .mp-cell-val { display: block; } /* The editor replaces the value in place: while editing, hide the displayed value and show the input overtop. The editor fills the (widened) cell exactly — width:100% with no min-width so it never spills past the cell's edges. */ .mp-edit-cell.editing .mp-cell-val { display: none; } .mp-cell-edit { display: none; width: 100%; min-width: 0; box-sizing: border-box; } .mp-edit-cell.editing .mp-cell-edit { display: block; } .mp-cell-weight { flex: 1 1 3rem; min-width: 3rem; padding: 0.25rem 0.35rem; box-sizing: border-box; border: 1px solid var(--mp-border); border-radius: 6px; font-size: 0.95rem; background: var(--mp-bg); color: var(--mp-text); } .mp-cell-actions { display: flex; gap: 0.2rem; flex: 1 1 100%; } /* Collapsed non-active lift: click the summary to expand an editor for all 3 attempts. */ .mp-collapsed-cell .mp-cell-val { cursor: pointer; } .mp-cell-edit-multi { min-width: 0; } .mp-cell-edit-title { font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mp-muted); margin-bottom: 0.3rem; } .mp-cell-edit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem; } .mp-cell-edit-row:last-child { margin-bottom: 0; } .mp-cell-edit-lbl { width: 1rem; flex: none; color: var(--mp-muted); font-size: 0.8rem; text-align: right; } .mp-cell-btn { flex: 1; padding: 0.25rem 0; border: 1px solid var(--mp-border); border-radius: 6px; background: var(--mp-bg); color: var(--mp-text); cursor: pointer; font-size: 1rem; line-height: 1; } .mp-cell-btn:hover { background: var(--mp-bg); filter: brightness(1.1); } .mp-cell-btn.good { color: var(--mp-good); border-color: var(--mp-good); } .mp-cell-btn.nolift { color: var(--mp-nolift); border-color: var(--mp-nolift); } .mp-cell-btn.warn { color: #d97706; border-color: #d97706; } .mp-cmd-error { outline: 2px solid var(--mp-nolift) !important; } .mp-linkbtn { background: none; border: none; padding: 0; color: var(--mp-accent); cursor: pointer; font-size: inherit; text-decoration: underline; } /* Compact "set current" affordance + flight grouping separators. */ .mp-setcur { padding: 0.05rem 0.4rem; font-size: 0.8rem; line-height: 1.2; border: 1px solid var(--mp-border); border-radius: 5px; background: var(--mp-bg); color: var(--mp-muted); cursor: pointer; } .mp-setcur:hover { border-color: var(--mp-accent); color: var(--mp-accent); } .mp-flight-sep td { background: var(--mp-surface); font-weight: 800; padding: 0.45rem 0.6rem; border-top: 2px solid var(--mp-border); border-bottom: 1px solid var(--mp-border); } .mp-flight-sep.current td { color: var(--mp-accent); box-shadow: inset 4px 0 0 var(--mp-accent); } /* Presentation mode: the board goes full-bleed and the top menu bar is hidden; a faint Exit button stays. */ .mp-btn.mp-runboard-exit { display: none; } /* justify-content: safe center vertically centres the content, falling back to top-alignment instead of clipping when it overflows; the extra top padding reserves the fixed Exit button's zone so it can never overlap the Good Lift button even when the board is taller than the screen. */ .mp-runboard.present { position: fixed; inset: 0; z-index: 1000; overflow: auto; padding: 3.5rem 0.75rem 0.5rem; background: var(--mp-bg); display: flex; flex-direction: column; justify-content: safe center; } .mp-runboard.present .mp-board-head { display: none; } .mp-runboard.present .mp-runboard-exit { display: inline-flex; position: fixed; top: 0.5rem; right: 0.5rem; z-index: 1100; opacity: 0.25; transition: opacity 0.15s; } .mp-runboard.present .mp-runboard-exit:hover { opacity: 1; } /* ---- Run-board current-lifter header (bar weight + name/meta left; No lift / Good lift / ☰ right) ---- */ /* Head: current lifter (name/weight/age/equipment/division) on the left, action buttons on the right. */ .mp-run-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--mp-surface); border: 1px solid var(--mp-border); border-left: 4px solid var(--mp-accent); border-radius: 10px; padding: 0.6rem 0.9rem; margin: 0.5rem 0; } /* flex-basis 0 (not auto) is load-bearing: the head wraps, and wrap decisions use an item's BASE size, so a basis of auto would let a long untruncated name push the buttons onto a second row before shrinking is ever considered. With basis 0 the left block can never force a wrap — it grows into whatever the right-hand controls leave, and min-width:0 lets the name inside it ellipsis instead of overflowing. */ .mp-run-head-left { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 0; } /* Body: the loaded bar (fixed ~500px) on the left, the run-sheet grid filling the rest on the right. */ .mp-run-body { display: flex; gap: 1rem; align-items: flex-start; } .mp-run-grid { flex: 1 1 auto; min-width: 0; } /* Left column under the head: the loaded bar with the next-lifter strip beneath it. */ /* The column was a FIXED 500px, which starved the Next/Then identity column: the card is a "minmax(0,1fr) minmax(12rem,13rem)" grid, so at 500px the 1fr identity track resolved to 249px and — after the "NEXT" tag (51px) and the badge stack — left the lifter name only 137px. "Oliver Thompson" measures 231px at 100% and 277px at 120%, so an ordinary two-word name ellipsised to "Oliver ..." on every desktop screen even though the run-sheet table beside it had several hundred pixels of slack. §5.1 ranks the Next/Then name 4th in the distance-reading hierarchy, so the LAYOUT gives way, not the type (§5.2 forbids shrinking a configured size to fit). Now the column takes a share of the viewport instead: the floor is the old 500px, so every viewport at or below ~1315px is byte-identical to before (1280x720 regression shots included), and a 1920px screen gives the column 720px — enough for the name to render in full at 100%, 120% AND 150%. The mobile rule at the 720px breakpoint further down still overrides BOTH declarations back to flex: 1 1 100% / max-width: 100%. */ .mp-run-leftcol { flex: 0 0 clamp(31.25rem, 38vw, 45rem); max-width: 45rem; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } .mp-run-bar { display: flex; flex-direction: column; width: 100%; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 10px; padding: 0.5rem 0.8rem; } /* display-board-typography §5.3: weight + rack callout side by side, wrapping the callout onto its own line underneath the weight rather than letting either one squeeze the other — "safe center" keeps both centred whichever way it lays out. Renders with only .mp-run-bar-top present when there is no rack callout (the Razor guards that), so an unset rack never reserves empty space here. */ .mp-run-bar-headline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem 1rem; } .mp-run-bar-top { text-align: center; font-size: calc(54 * var(--mp-display-unit)); font-weight: 900; color: var(--mp-accent); line-height: 1.05; font-variant-numeric: tabular-nums; } .mp-run-bar-track { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; min-height: 310px; } /* §5.3: a prominent labelled callout, high-contrast against both good/no-lift colours (a distinct accent border+ tint, not green/red) so a loader can find "what rack height" at a glance beside the weight it goes with. */ .mp-run-rack-callout { display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 0.15rem 0.7rem; border: 2px solid var(--mp-accent); border-radius: 8px; background: color-mix(in srgb, var(--mp-accent) 16%, transparent); } .mp-run-rack-label { font-size: calc(15 * var(--mp-display-unit)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mp-muted); } .mp-run-rack-value { font-size: calc(37 * var(--mp-display-unit)); font-weight: 900; color: var(--mp-text); font-variant-numeric: tabular-nums; } /* The bar shaft (inner end), the collar, and the sleeve end poking out past the collar — all centred on the loading axis. */ .mp-run-barshaft { flex: 0 0 auto; width: 30px; height: 33px; border-radius: 3px; background: linear-gradient(180deg, #d3d8df, #8b929c 55%, #6b7280); border: 1px solid rgba(0,0,0,0.5); } .mp-run-barend { width: 38px; } /* the sleeve end pokes out past the collar on the right */ /* Collar ≈ 3/4 the height of the 1.25 kg plate (≈104px) so the thin bar end clearly shows above/below it. */ .mp-run-collar { position: relative; flex: 0 0 auto; width: 26px; height: 78px; border-radius: 5px; margin: 0 1px; background: linear-gradient(180deg, #d3d8df, #9aa0aa 50%, #5b616b); border: 1px solid rgba(0,0,0,0.6); box-shadow: inset 0 0 0 3px rgba(255,255,255,0.18), inset 0 0 6px rgba(0,0,0,0.45); } /* The locking screw/knob on top of the collar, so it clearly reads as a collar. */ .mp-run-collar::after { content: ""; position: absolute; left: 50%; top: -13px; transform: translateX(-50%); width: 11px; height: 15px; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, #e2e6ec, #7d848f); border: 1px solid rgba(0,0,0,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); } /* Each plate: weight centred, optional count for the biggest plate printed lower down (under the weight). §5.6: colour comes from the .mp-plate-ink-light/-dark class the C# side adds (PlateAppearance.InkCssClass) — this rule no longer hardcodes white, so the count text (which used to force its own #fff) and the weight label both inherit whichever ink the CONFIGURED plate colour actually needs. */ .mp-run-plate { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 40px; padding: 0 3px; border-radius: 4px; border: 1.5px solid rgba(230, 237, 243, 0.9); font-weight: 800; line-height: 1; } .mp-run-plate-wt { font-size: calc(16 * var(--mp-display-unit)); font-variant-numeric: tabular-nums; } .mp-run-plate-count { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 0.9rem; font-weight: 900; font-variant-numeric: tabular-nums; } /* display-board-typography §5.2 fixes both tokens explicitly: the bar weight (54) now reads slightly larger than the lifter's name (44) — an intentional flip from the old fixed 2.85rem/2.6rem pair, because the weight is the number a loader is scanning for first. Truncates with an ellipsis instead of wrapping/overlapping the timer, attempt buttons, or status content on the right (mp-run-head-left already has min-width:0 so this flex child is free to shrink below its content width). */ .mp-run-name { font-size: calc(44 * var(--mp-display-unit)); font-weight: 900; line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-run-sub { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; } .mp-run-kg { font-size: 1.4rem; font-weight: 900; color: var(--mp-accent); } .mp-run-meta { font-size: 0.9rem; margin-top: 0.1rem; } .mp-run-head-right { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .mp-btn.mp-run-good { background: var(--mp-good); color: #fff; font-size: 1.05rem; padding: 0.5rem 1.1rem; } .mp-btn.mp-run-nolift { background: var(--mp-nolift); color: #fff; font-size: 1.05rem; padding: 0.5rem 1.1rem; } /* Attempt countdown shown in line with the header; turns red and holds at 00 when time runs out. */ .mp-run-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.6rem; min-width: 2.4ch; text-align: center; color: var(--mp-accent); } .mp-run-timer:empty { display: none; } .mp-run-timer.expired { color: var(--mp-nolift); } /* Next-two lifters under the bar, each a modestly larger card: identity on row 1, attempt weight on row 2, and a plate-loading column on the right spanning both rows. */ .mp-run-next { display: flex; flex-direction: column; gap: 0.5rem; background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 10px; padding: 0.6rem 0.8rem; } /* 2-row/2-col grid: left column (minmax(0,1fr)) holds identity (row 1) then weight (row 2); the right column is a reserved plate-loading lane, widened from the original 10.5–11rem (display-board-typography §5.3/§5.4: it now also has to fit a labelled "Rack n" pill above the plates, and §5.5's chips carry text instead of being bare colour swatches) sized for the widest realistic GROUPED loadout without clipping, and spans both rows via the named "plates" area so the pill + plate row can be vertically centred as one block across the card's full height. Empty plate data still renders inside this area (see markup), so the column's reserved width never collapses and the left text never jumps. The lane's MAX came back from 13rem to 12.5rem (200px): measured at the largest offered text size (150%) the widest thing it ever has to hold is the chip row at 186px (25 ×3 + 5 + 2.5 + 1.25 — the worst grouped loadout a 20 kg bar with 2.5 kg collars produces) and the "RACK 15 / 7" pill at 182px, so 200px still clears both by ~14px while returning the difference to the starved identity track. Both the min and the max are still fixed lengths, so the lane is width-identical on a card with a rack pill and one without (§5.4). */ .mp-run-next-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 12.5rem); grid-template-areas: "identity plates" "weight plates"; column-gap: 0.75rem; row-gap: 0.2rem; align-items: center; min-height: 5.75rem; padding: 0.35rem 0.1rem; } .mp-run-next-item + .mp-run-next-item { border-top: 1px solid var(--mp-border); } /* 0.45rem rather than 0.55: the two gaps here (tag→name, name→PB/record badges) are pure spacing, and at 150% the name needed every pixel of the identity track to render "Oliver Thompson" without an ellipsis. */ .mp-run-next-line1 { grid-area: identity; display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; } .mp-run-next-wt { grid-area: weight; justify-self: start; font-size: calc(29 * var(--mp-display-unit)); font-weight: 900; color: var(--mp-accent); font-variant-numeric: tabular-nums; } .mp-run-next-tag { font-size: calc(13 * var(--mp-display-unit)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mp-muted); min-width: 3.2rem; } .mp-run-next-name { font-size: calc(25 * var(--mp-display-unit)); font-weight: 800; color: var(--mp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Plate-loading column: the "Rack n" pill (§5.4, when present) stacked above the plate-chip row (§5.5) — a column flex, not the old single row, so the pill sits directly above the stack instead of interleaved with it. The grid area already spans both rows (the card's full height); justify-content:center here vertically centres this whole block within that spanned height. align-items:flex-start keeps both the pill and the chip row anchored to the same left edge regardless of which is present. */ .mp-run-next-plates { grid-area: plates; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.3rem; min-width: 0; } /* §5.4: the pill only ever appears above the plate row (never inline with it, never in place of it) — a squat/bench attempt with no plates yet declared can still show a rack pill on its own. */ .mp-run-next-rack { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.05rem 0.4rem; border: 1px solid var(--mp-accent); border-radius: 5px; background: color-mix(in srgb, var(--mp-accent) 16%, transparent); } .mp-run-next-rack-label { font-size: calc(13 * var(--mp-display-unit)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mp-muted); } .mp-run-next-rack-value { font-size: calc(22 * var(--mp-display-unit)); font-weight: 900; color: var(--mp-text); font-variant-numeric: tabular-nums; } /* The plate-chip row itself: proportional, colour-matched, colour-coded AND labelled chips (see .mp-run-next-plate below), wrapping at chip boundaries only if a narrower supported viewport truly needs it — chip height itself never shrinks to fit. */ .mp-run-next-plate-row { display: flex; align-items: center; justify-content: flex-start; gap: 3px; flex-wrap: wrap; } /* §5.5: ONE chip per distinct denomination (PlateGrouping.Group already collapsed repeats into a ×N count) — no longer a bare colour swatch. width:auto + the C# side's inline min-width (a plain px floor, not display-unit — panel geometry stays resolution-driven per the §4.1 rule at the top of this file) means a larger font-scale setting simply grows the box via its own text instead of clipping against a fixed pixel width. The HEIGHT needed the same treatment and did not have it. The inline "height:N%" the Razor emits is a fraction of the chip ROW's height, and that row height is itself only as tall as the biggest chip's own text — so every denomination below the biggest was sized SHORTER than the label it contains. Measured at 1920x1080/100% before this rule: the 1.25 chip had 9px of content box for a 15px line box (scrollHeight 15 vs clientHeight 9), 2.5 had 11 vs 16, 5 had 14 vs 18 — the labels painted straight over the chip's own border, which is the "the small chip's text spills out of its box" defect. min-height:fit-content makes the proportional percentage a FLOOR rather than a cap: a chip is never shorter than its own label (+ its ×N count line), while denominations with room to spare keep the proportional height that makes a 25 read visibly bigger than a 10. Type is untouched (§5.2). The 1px vertical padding is the same idea — a chip sized exactly to its glyph box reads as clipped even when it isn't, and the label's line box is fractional (1.1 x 22.5px = 24.75px at the 150% setting) so a zero-slack box still reports a rounded-up overflow. 2px of vertical padding absorbs both. */ .mp-run-next-plate { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; box-sizing: border-box; min-height: fit-content; padding: 2px 4px; border-radius: 3px; border: 1px solid rgba(230, 237, 243, 0.7); font-weight: 800; line-height: 1.1; } .mp-run-next-plate-wt { font-size: calc(15 * var(--mp-display-unit)); font-variant-numeric: tabular-nums; } .mp-run-next-plate-count { font-size: calc(11 * var(--mp-display-unit)); opacity: 0.92; font-variant-numeric: tabular-nums; } .mp-run-next-plates-empty { font-size: 1rem; } .mp-flight-select { width: auto; padding: 0.45rem 0.6rem; font-size: 0.9rem; border-radius: 8px; background: var(--mp-bg); color: var(--mp-text); border: 1px solid var(--mp-border); } .mp-flight-select:hover { border-color: color-mix(in srgb, var(--mp-accent) 45%, var(--mp-border)); } .mp-flight-select:focus { outline: none; border-color: var(--mp-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mp-accent) 25%, transparent); } /* display-board-typography §5.5: the run-sheet grid body scales with the Text size control too — scoped under .mp-runboard (not the bare .mp-board-table this file's "Meet-day boards" section defines, which Scoreboard.razor also renders through and must NOT pick up --mp-display-unit sizing meant for the run board's own control) so only RunMeet's own table is affected. Headers stay a step smaller than the body, same relative relationship the original 0.35rem/0.55rem padding-only rule implied without ever setting an explicit header size. */ .mp-runboard .mp-board-table td { font-size: calc(17 * var(--mp-display-unit)); } .mp-runboard .mp-board-table th { font-size: calc(14 * var(--mp-display-unit)); } /* ============================================================================================================ RP WP5 §6: run-board PB/national-record attempt-indicator badges + tri-state Indicators popover. RunMeet.razor is static SSR (no InteractiveServer circuit), so — unlike Scoreboard.razor.css's WP4 rules, which filter badges SERVER-SIDE before they ever reach the DOM — every badge here always renders, and run-board.js toggles "hide-pb"/"hide-record" classes on the .mp-runboard root to apply the effective tri-state filter entirely client-side (instant, no page reload). Visual language (icon/short-text/status colour) intentionally mirrors Scoreboard.razor.css's .mp-sb-annot rules so the two boards read as one system. ============================================================================================================ */ /* §6.1 effective filtering: hides only the matching KIND — PB/record badges everywhere on the board, including the current-lifter prominent callout (mp-rb-pb/mp-rb-record double as both the styling AND the hide-toggle marker, same convention as the reference mock's .hide-pb .badge.pb rule). */ .mp-runboard.hide-pb .mp-rb-pb { display: none !important; } .mp-runboard.hide-record .mp-rb-record { display: none !important; } /* The multi-record secondary line ("N eligible records · …") is record-only supplementary text, not a badge — still respects the Records toggle so it never contradicts a hidden record badge. */ .mp-runboard.hide-record .mp-rb-record-fact { display: none !important; } /* §6.3 compact per-cell/card badges — rendered on the value's OWN text line (never on a line beneath it) so a badged cell is never taller than its badge-less neighbours and grid rows keep their natural height. Mirrors Scoreboard.razor.css's .mp-sb-annot-stack rule, including the three things that rule depends on: display:inline (an atomic inline box establishes its own line box even when empty, which grew annotated rows by a full line), white-space:nowrap on the cells that carry a badge so a badge can never be pushed to a second line, and icon-only badges in the narrow grid cells (the type word stays in title/aria-label). */ .mp-rb-annot-stack { display: inline; } /* Next/Then card variant: the cards have room for the full "★PB"/"▲NR" wording, so only the cell badges go icon-only (see .mp-rb-annot-label below); this variant just needs a slightly wider gap from the lifter name. */ .mp-rb-annot-stack-inline { margin-left: 0.2rem; } /* Only cells that really carry a badge opt out of wrapping — every other cell keeps its normal wrapping and height. The displayed value is a block by default (.mp-cell-val above, so the in-cell editor can replace it in place), and a block always ends its line — badges after it could never share it. In badge-bearing cells only, the value goes inline so the badges land beside it; .mp-cell-edit stays a block, so the editor still opens on its own line underneath. :not(.editing) matters: this selector outranks ".mp-edit-cell.editing .mp-cell-val { display: none }", so without it an open editor would show its old value alongside the input. */ .mp-runboard td:has(.mp-rb-annot) { white-space: nowrap; } .mp-runboard td:has(.mp-rb-annot):not(.editing) .mp-cell-val { display: inline; } .mp-rb-annot { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: 0.2rem; padding: 0 0.3rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.55; white-space: nowrap; vertical-align: middle; } /* Icon-only inside the dense grid cells; the Next/Then cards and the prominent current-lifter callout keep the word. */ .mp-runboard td .mp-rb-annot-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Kind: PB (star) vs national record (triangle) — distinct hues/icons/text, never colour alone (§10). */ .mp-rb-annot.mp-rb-pb { color: var(--mp-accent, #eab308); } .mp-rb-annot.mp-rb-record { color: #b57bff; } /* Status shading layered on top of the kind colour. */ .mp-rb-annot.mp-rb-annot-ratified { background: color-mix(in srgb, var(--mp-good, #16a34a) 20%, transparent); } .mp-rb-annot.mp-rb-annot-pending { background: color-mix(in srgb, currentColor 15%, transparent); } .mp-rb-annot.mp-rb-annot-failed { color: var(--mp-muted, #9ca3af); opacity: 0.7; text-decoration: line-through; } .mp-rb-annot.mp-rb-annot-superseded { color: var(--mp-muted, #9ca3af); opacity: 0.7; } /* §6.2 current-lifter prominent callout: a larger variant of the same badge language, plus the threshold/secondary text lines beneath the name. */ .mp-run-name-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .mp-rb-annot-large { font-size: 0.78rem; padding: 0.2rem 0.55rem; border-radius: 7px; } .mp-run-ind-secondary, .mp-run-ind-threshold { font-size: 0.85rem; margin-top: 0.1rem; } /* §6.1 tri-state Indicators popover — plain JS/data-attribute toggling (run-board.js), CSS layout mirrors Scoreboard.razor.css's WP4 .mp-ind-popover positioning for visual consistency between the two toolbars. */ /* display-board-typography: the Text size control (.mp-scale-wrap / .mp-scale-popover) is a SEPARATE control that happens to want the same anchored-popover geometry, so it is listed alongside here rather than reusing the Indicators classes. It briefly did reuse them, and that is a trap worth naming: ".mp-ind-wrap" means "the Indicators control", and several UI tests locate that control as `.mp-ind-wrap > button` — a second control wearing the class turned every one of those into a strict-mode violation. Shared LOOK, separate NAME. */ .mp-ind-wrap, .mp-scale-wrap { position: relative; display: inline-flex; } .mp-ind-popover, .mp-scale-popover { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(22rem, 90vw); margin-bottom: 0; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45); } .mp-ind-popover[hidden], .mp-scale-popover[hidden] { display: none; } .mp-ind-row { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 0.5rem; margin-top: 0.6rem; } .mp-ind-row > span { font-size: 0.8rem; font-weight: 700; } .mp-ind-popover .mp-segmented { width: 100%; } .mp-ind-popover .mp-segmented button { flex: 1; justify-content: center; } @media (max-width: 650px) { .mp-ind-popover, .mp-scale-popover { position: fixed; left: 0.75rem; right: 0.75rem; top: 4.5rem; width: auto; } } /* §6.4: the Indicators control lives inside .mp-board-head, already hidden by the existing .mp-runboard.present .mp-board-head rule above — badges (outside mp-board-head) stay visible. */ /* Stacked per-division values (Division / Points / Place) — one line per division a lifter is entered in. */ .mp-stack { white-space: nowrap; vertical-align: top; } .mp-stack div { line-height: 1.25; } .mp-stack div + div { border-top: 1px dotted var(--mp-border); } /* Platform / loading display (huge, chromeless). */ .mp-display { min-height: 100vh; display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem 2.5rem; background: var(--mp-bg); color: var(--mp-text); } .mp-display-top { display: flex; justify-content: space-between; align-items: baseline; } .mp-display-name { font-size: 5rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; } .mp-display-weight { font-size: 9rem; font-weight: 900; color: var(--mp-accent); line-height: 1; } .mp-display-sub { font-size: 1.6rem; color: var(--mp-muted); } .mp-display-next { font-size: 2rem; } .mp-display-flash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10rem; font-weight: 900; z-index: 1100; } .mp-display-flash.good { background: var(--mp-good); color: #fff; } .mp-display-flash.nolift { background: var(--mp-nolift); color: #fff; } .mp-plate-bar { display: flex; align-items: center; justify-content: center; gap: 3px; margin: 1rem 0; } .mp-plate { display: inline-block; border-radius: 3px; border: 1px solid rgba(0,0,0,0.5); } .mp-plate-axle { width: 120px; height: 12px; background: #9ca3af; border-radius: 6px; } /* ---- Platform display (LiftingCast-style: one-side bar + flight mini-scoreboard) ---- */ .mp-pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.75rem; align-items: start; } .mp-pf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; } .mp-pf-name { font-size: 3.6rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; } .mp-pf-weight { font-size: 7rem; font-weight: 900; color: var(--mp-accent); line-height: 0.9; white-space: nowrap; } .mp-pf-kg { font-size: 2.2rem; margin-left: 0.4rem; color: var(--mp-muted); } .mp-onebar { display: flex; align-items: flex-end; gap: 4px; min-height: 150px; margin: 0.75rem 0 0.25rem; padding-left: 0.25rem; } .mp-onebar-collar { width: 18px; height: 64px; background: #9ca3af; border-radius: 3px; align-self: center; } /* display-board-typography §5.6/§5.7: colour comes from the .mp-plate-ink-light/-dark class the C# side now adds (PlateAppearance.InkCssClass) — no longer a hardcoded white, so a pale configured colour (silver/white/light yellow) gets dark ink here exactly like the run board's plates. The bare-element rule keeps NO default text colour at all (the ink class is unconditionally added by PlateBig, so one always applies); PlatformDisplay has no --mp-display-unit (that block only covers .mp-runboard/.mp-sb — see the top of this file), so this size stays a plain rem token. */ .mp-plate-big { display: flex; align-items: center; justify-content: center; min-width: 46px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.55); font-weight: 900; font-size: 1.5rem; } /* §5.5/§5.7: one labelled chip per distinct denomination (PlateGrouping.Group), not a bare colour swatch — the platform display has no --mp-display-unit token (plain rem here, same reason as .mp-plate-big above), sized to stay legible at the platform's normal viewing distance without the run board's operator-controlled scale. */ .mp-minibar { display: inline-flex; align-items: center; gap: 3px; } .mp-pf-mini-plate { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: auto; min-width: 1.6rem; box-sizing: border-box; padding: 0 0.2rem; border-radius: 3px; border: 1px solid rgba(0,0,0,0.5); font-weight: 800; line-height: 1.1; } .mp-pf-mini-plate-wt { font-size: 0.72rem; font-variant-numeric: tabular-nums; } .mp-pf-mini-plate-count { font-size: 0.6rem; opacity: 0.9; font-variant-numeric: tabular-nums; } .mp-pf-next { width: 100%; margin-top: 1rem; font-size: 1.4rem; } .mp-pf-next th { text-align: left; color: var(--mp-muted); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; } .mp-pf-next td, .mp-pf-next th { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--mp-border); } /* §5.7: a modest legibility bump for the upcoming rack column — the "—" fallback semantics (Razor's own `?? "—"`) are untouched; this only changes how the value LOOKS once it's there. */ .mp-pf-next-rack { font-weight: 800; font-size: 1.05em; font-variant-numeric: tabular-nums; } .mp-pf-board { width: 100%; font-size: 1.25rem; font-variant-numeric: tabular-nums; } .mp-pf-board th { text-align: right; color: var(--mp-muted); font-size: 0.95rem; padding: 0.3rem 0.5rem; border-bottom: 2px solid var(--mp-border); } .mp-pf-board th:first-child, .mp-pf-board td:first-child { text-align: left; } .mp-pf-board td { text-align: right; padding: 0.32rem 0.5rem; border-bottom: 1px solid var(--mp-border); } .mp-pf-lifter { font-weight: 700; } /* ---- OBS overlay: detailed broadcast composition (WP6 §9.2/§9.3 — docs/specs/obs-overlay-mock.html is the authoritative visual reference: gold/dark panel system, top-left profile, top-centre decision lights, top-right up-next, 150px bottom banner). Panels stay permanently in the DOM (Overlay.razor never @if-removes one) and toggle a "collapsed"/"visible" class so the slide/collapse transitions below actually animate. ---- */ body:has(.mp-overlay-root) { background: transparent !important; overflow: hidden; } .mp-overlay-root { position: fixed; inset: 0; overflow: hidden; color: var(--mp-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* §9.2 resolution support (720p/1080p/4K without cropping or tiny text): every px dimension below is expressed as calc(N * var(--s)) where N is the 1920×1080 design value in px and --s is the "scaled pixel" LENGTH unit (100vh/1080 — exactly 1px at 1080p; note number×length is the only valid calc multiplication, so the design value is written unitless). 1080p renders pixel-identical to the design, 4K exactly 2×, 720p ~0.667×, all proportionally from the viewport HEIGHT (aspect-safe: an ultrawide keeps 1080p-size panels rather than blowing them up off the canvas). */ --s: calc(100vh / 1080); /* Typography WP3 §6.3: --sf is the TEXT unit, --s stays the GEOMETRY unit. --mp-ovl-font-scale is a plain decimal factor (0.80–1.50, default 1.00) set inline on this element by Overlay.razor from the OBS browser-source URL's fontScale/scale query params (see DisplayScale.ResolveOverlayFontScale) — a broadcaster who wants larger captions for a small preview window, or smaller text for a dense composition, adjusts ONLY what they read. If font-size stayed on --s, that request would also inflate every panel's width/height/ padding/border-radius/gap — geometry that has nothing to do with legibility and would push panels off the 16:9 canvas or overlap them (§6.4). Splitting the unit means every OTHER --s-based declaration below (widths, heights, padding, margins, gaps, border-radius, offsets, the referee-light diameter, the banner height, transition durations) is completely unaffected by fontScale — only rules that opt in via --sf grow or shrink. The `, 1` fallback keeps this token (and therefore every --sf-based font-size) safe even if the inline custom property is ever missing entirely (e.g. a stylesheet-only preview render), defaulting to 1x = --s. */ --sf: calc(var(--s) * var(--mp-ovl-font-scale, 1)); /* Derived panel tokens, computed from the theme's --mp-* vars (set inline on this element by Overlay.razor) so a theme's colours are the source of truth and the mock's gold/dark reads as the DEFAULT palette (its --mp-accent default is already the barbell gold above). */ --ovl-panel: linear-gradient(145deg, color-mix(in srgb, var(--mp-surface) 94%, white 4%), color-mix(in srgb, var(--mp-bg) 90%, black 12%)); --ovl-good-dark: color-mix(in srgb, var(--mp-good) 60%, black); --ovl-nolift-dark: color-mix(in srgb, var(--mp-nolift) 60%, black); --ovl-line: color-mix(in srgb, white 15%, transparent); --ovl-ease: cubic-bezier(.22, .75, .18, 1); } /* Shared floating-panel look for all four panels. */ .mp-ovl-profile, .mp-ovl-decision, .mp-ovl-next, .mp-ovl-banner { border: 1px solid color-mix(in srgb, var(--mp-accent) 75%, transparent); background: var(--ovl-panel); box-shadow: 0 16px 50px rgba(0,0,0,0.48), inset 0 0 0 1px rgba(255,255,255,0.035); backdrop-filter: blur(13px); } /* ---- Top-left: lifter profile — image + identity + OPL stats + latest-three history ---- */ .mp-ovl-profile { position: absolute; top: 3.2vh; left: 1.3vw; display: grid; grid-template-rows: minmax(0,1fr) auto; width: min(31vw, calc(575 * var(--s))); height: min(64vh, calc(650 * var(--s))); min-height: calc(590 * var(--s)); overflow: hidden; border-radius: calc(12 * var(--s)); transform-origin: left center; /* No `width` in the transition list (the mock had it): the collapse animates via transform/opacity, and a width transition also fires on viewport-driven min()/var(--s) changes, where it can freeze at currentTime 0 in non-compositing contexts (hidden tabs / OBS preview) leaving the panel stuck at the previous viewport's width. */ transition: transform 680ms var(--ovl-ease), opacity 420ms ease; } .mp-ovl-profile.collapsed { transform: translateX(calc(-100% - 2vw)) scaleX(0.74); opacity: 0; pointer-events: none; } .mp-ovl-profile-inner { display: grid; grid-template-columns: 42% minmax(0,58%); width: 100%; min-height: 0; overflow: hidden; } .mp-ovl-profile-image { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.12), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--mp-surface) 80%, white 6%), color-mix(in srgb, var(--mp-bg) 85%, black 15%)); } .mp-ovl-profile-image img, .mp-ovl-profile-image .mp-ovl-silhouette { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .mp-ovl-profile-copy { min-width: 0; min-height: 0; padding: calc(24 * var(--s)) calc(22 * var(--s)) calc(18 * var(--s)); overflow: hidden; } .mp-ovl-name-row { display: flex; align-items: center; gap: calc(10 * var(--s)); min-width: 0; } .mp-ovl-athlete-name { min-width: 0; margin: 0; overflow: hidden; font-size: calc(32 * var(--sf)); line-height: 1; letter-spacing: 0.02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .mp-ovl-country { flex: 0 0 auto; color: var(--mp-muted); font-size: calc(16 * var(--sf)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } /* Typography WP3 §6.4: nowrap+ellipsis (not multi-line wrap) so a long gym/team/coach line never grows the profile panel taller and pushes the OPL stats/history below it out of view at 150% scale — a block-level div under a block container needs no extra min-width:0 for this to engage. */ .mp-ovl-team { margin: calc(9 * var(--s)) 0 calc(16 * var(--s)); overflow: hidden; color: var(--mp-accent); font-size: calc(15 * var(--sf)); font-weight: 750; letter-spacing: 0.07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } /* Typography WP3 §6.4: the bio is explicitly LOWER-priority content (§6.4) — clamped to a fixed 3 LINES (not a fixed height/font-size) so it scales proportionally with --sf like everything else but can never grow past 3 lines' worth of height and push the section-heading/stat-grid/history below it out of the panel, however long the lifter's bio text or however large fontScale is. -webkit-line-clamp is the only cross-engine way to clip at a line count rather than a pixel height (Chromium/OBS's embedded browser both support it despite the -webkit- prefix; there is no unprefixed equivalent with the same behaviour). */ .mp-ovl-bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0 0 calc(16 * var(--s)); color: color-mix(in srgb, var(--mp-text) 88%, transparent); font-size: calc(15 * var(--sf)); line-height: 1.48; } .mp-ovl-section-heading { margin: calc(10 * var(--s)) 0 calc(8 * var(--s)); color: var(--mp-accent); font-size: calc(15 * var(--sf)); font-weight: 850; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .mp-ovl-stat-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: calc(7 * var(--s)) calc(14 * var(--s)); padding-top: calc(11 * var(--s)); border-top: 1px solid var(--ovl-line); color: var(--mp-muted); font-size: calc(13 * var(--sf)); line-height: 1.15; text-transform: uppercase; } .mp-ovl-stat-grid strong { color: var(--mp-text); text-align: right; white-space: nowrap; } .mp-ovl-history { min-height: calc(150 * var(--s)); padding: calc(11 * var(--s)) calc(14 * var(--s)) calc(13 * var(--s)); overflow: hidden; border-top: 1px solid var(--ovl-line); background: rgba(0,0,0,0.25); } .mp-ovl-history .mp-ovl-section-heading { margin-top: 0; } .mp-ovl-history-table { display: grid; grid-template-columns: minmax(calc(90 * var(--s)),1.6fr) 0.6fr repeat(5, 0.62fr); gap: calc(6 * var(--s)); align-items: center; color: color-mix(in srgb, var(--mp-text) 90%, transparent); font-size: calc(12 * var(--sf)); line-height: 1.2; margin-bottom: calc(6 * var(--s)); } .mp-ovl-history-table span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-ovl-history-table.header { color: var(--mp-muted); text-transform: uppercase; } .mp-ovl-history-empty { color: var(--mp-muted); font-size: calc(12.5 * var(--sf)); padding-top: calc(5 * var(--s)); } /* ---- Top-centre: temporary referee-decision panel — visible only during DecisionHold ---- */ .mp-ovl-decision { position: absolute; top: 3.5vh; left: 50%; width: min(32vw, calc(560 * var(--s))); padding: calc(22 * var(--s)) calc(28 * var(--s)); border-radius: calc(11 * var(--s)); text-align: center; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-14px) scale(0.96); transition: transform 430ms var(--ovl-ease), opacity 430ms ease; } .mp-ovl-decision.visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } .mp-ovl-decision-lift { margin-bottom: calc(10 * var(--s)); font-size: calc(28 * var(--sf)); font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } .mp-ovl-lights { display: flex; justify-content: center; gap: calc(38 * var(--s)); margin: calc(6 * var(--s)) 0 calc(12 * var(--s)); } .mp-ovl-light { width: calc(95 * var(--s)); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 0 26px rgba(255,255,255,0.75), inset 0 -8px 16px rgba(0,0,0,0.2); } .mp-ovl-light.nolift { background: var(--mp-nolift); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-nolift) 25%, transparent), 0 0 29px color-mix(in srgb, var(--mp-nolift) 78%, transparent), inset 0 -8px 16px rgba(70,0,0,0.38); } .mp-ovl-light.empty { background: color-mix(in srgb, var(--mp-text) 12%, transparent); box-shadow: none; opacity: 0.4; } .mp-ovl-decision-text { display: inline-flex; align-items: center; justify-content: center; min-width: calc(220 * var(--s)); padding: calc(7 * var(--s)) calc(18 * var(--s)); border: 1px solid var(--mp-accent); border-radius: calc(7 * var(--s)); color: var(--mp-accent); background: rgba(0,0,0,0.78); font-size: calc(27 * var(--sf)); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .mp-ovl-decision-text.bad { color: #ff727b; border-color: #ff5561; } /* ---- Top-right: up-next panel — default five from the authoritative run order ---- */ .mp-ovl-next { position: absolute; top: 3.4vh; right: 1.3vw; width: min(27vw, calc(480 * var(--s))); max-height: calc(540 * var(--s)); overflow: hidden; border-radius: calc(16 * var(--s)); transform-origin: top right; /* No `max-height` in the transition list (the mock had it): the collapse reads as scaleY+opacity, and a max-height transition also fires on viewport-driven var(--s) changes, where it can freeze at currentTime 0 in non-compositing contexts and clip the panel at the previous viewport's cap. */ transition: transform 620ms var(--ovl-ease), opacity 350ms ease; } .mp-ovl-next.collapsed { max-height: calc(42 * var(--s)); opacity: 0; pointer-events: none; transform: translateY(-18px) scaleY(0.08); } .mp-ovl-next-head { display: flex; align-items: center; justify-content: space-between; padding: calc(13 * var(--s)) calc(17 * var(--s)); border-bottom: 1px solid var(--ovl-line); font-size: calc(19 * var(--sf)); font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; } .mp-ovl-next-row { display: grid; grid-template-columns: calc(28 * var(--s)) 1fr auto; gap: calc(11 * var(--s)); align-items: center; min-height: calc(65 * var(--s)); padding: calc(8 * var(--s)) calc(14 * var(--s)); border-bottom: 1px solid rgba(255,255,255,0.1); } .mp-ovl-next-row:last-child { border-bottom: 0; } .mp-ovl-next-number { color: color-mix(in srgb, var(--mp-text) 90%, transparent); font-size: calc(15 * var(--sf)); font-weight: 750; } /* Typography WP3 §6.4: min-width:0 on the grid item is required for the name/meta ellipsis rules below to actually engage — .mp-ovl-next-row is a CSS grid with this wrapper in the `1fr` middle column, and a grid item's default min-width is `auto` (its content's min-content size), which at 150% scale is wide enough for a long lifter name to push the attempt badge in the `auto` third column right out to (or past) the panel's edge instead of letting the name itself ellipsise. */ .mp-ovl-next-copy { min-width: 0; } .mp-ovl-next-name { overflow: hidden; font-size: calc(17 * var(--sf)); font-weight: 720; text-overflow: ellipsis; white-space: nowrap; } .mp-ovl-next-meta { overflow: hidden; margin-top: calc(2 * var(--s)); color: var(--mp-muted); font-size: calc(12 * var(--sf)); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .mp-ovl-next-attempt span { display: inline-block; min-width: calc(64 * var(--s)); padding: calc(6 * var(--s)) calc(9 * var(--s)); border-radius: calc(5 * var(--s)); background: color-mix(in srgb, var(--mp-surface) 70%, black 15%); font-size: calc(14 * var(--sf)); font-weight: 760; text-align: center; } .mp-ovl-next-attempt .entered { background: var(--ovl-good-dark); } .mp-ovl-next-empty { padding: calc(14 * var(--s)); color: var(--mp-muted); font-size: calc(13 * var(--sf)); text-align: center; text-transform: uppercase; } /* ---- Bottom: information banner (150px at the 1080p design canvas, --s-scaled) — persistent except while every panel is mid-transition ---- */ .mp-ovl-banner { position: absolute; left: 1.25vw; right: 1.25vw; bottom: 3.25vh; display: grid; grid-template-columns: 1.15fr 0.75fr 0.83fr 1.65fr 1.05fr; height: calc(150 * var(--s)); overflow: hidden; border-radius: calc(14 * var(--s)); transform-origin: left center; clip-path: inset(0 0 0 0 round calc(14 * var(--s))); transition: transform 680ms var(--ovl-ease), opacity 360ms ease, clip-path 680ms var(--ovl-ease); } .mp-ovl-banner.collapsed-left { opacity: 0; pointer-events: none; transform: scaleX(0.02); clip-path: inset(0 98% 0 0 round calc(14 * var(--s))); } .mp-ovl-banner-section { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; padding: calc(10 * var(--s)) calc(12 * var(--s)); overflow: hidden; border-right: 1px solid rgba(255,255,255,0.13); } .mp-ovl-banner-section:last-child { border-right: 0; } .mp-ovl-identity { display: grid; grid-template-columns: calc(62 * var(--s)) minmax(0,1fr); gap: calc(11 * var(--s)); align-items: center; min-height: 0; } .mp-ovl-avatar { position: relative; width: calc(62 * var(--s)); height: calc(92 * var(--s)); overflow: hidden; border: 1px solid rgba(255,255,255,0.19); border-radius: calc(8 * var(--s)); background: linear-gradient(color-mix(in srgb, var(--mp-surface) 80%, white 6%), color-mix(in srgb, var(--mp-bg) 85%, black 15%)); } .mp-ovl-avatar img, .mp-ovl-avatar .mp-ovl-silhouette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Typography WP3 §6.4: same min-width:0-on-the-grid-item fix as .mp-ovl-next-copy — .mp-ovl-identity is a CSS grid with this wrapper filling the minmax(0,1fr) second column, so without an explicit min-width:0 the wrapper (and the name/team ellipsis rules inside it) would refuse to shrink below content width at 150% scale. */ .mp-ovl-identity-copy { min-width: 0; } .mp-ovl-identity-name { overflow: hidden; font-size: calc(21 * var(--sf)); font-weight: 880; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .mp-ovl-identity-team { overflow: hidden; margin-top: calc(7 * var(--s)); color: var(--mp-accent); font-size: calc(11 * var(--sf)); font-weight: 800; letter-spacing: 0.05em; line-height: 1.25; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .mp-ovl-compact-stats { display: grid; grid-template-columns: 1fr auto; gap: calc(6 * var(--s)) calc(9 * var(--s)); color: var(--mp-muted); font-size: calc(11 * var(--sf)); line-height: 1.1; text-transform: uppercase; } .mp-ovl-compact-stats strong { color: var(--mp-text); text-align: right; white-space: nowrap; } .mp-ovl-attempt-heading, .mp-ovl-placing-heading { flex: 0 0 auto; margin-bottom: calc(4 * var(--s)); color: var(--mp-accent); font-size: calc(11 * var(--sf)); font-weight: 850; letter-spacing: 0.07em; line-height: 1.1; text-align: center; text-transform: uppercase; } .mp-ovl-best-lifts { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid color-mix(in srgb, var(--mp-accent) 25%, transparent); border-radius: calc(8 * var(--s)); } .mp-ovl-best-lifts div { padding: calc(8 * var(--s)) calc(4 * var(--s)); text-align: center; border-right: 1px solid rgba(255,255,255,0.12); } .mp-ovl-best-lifts div:last-child { border-right: 0; } .mp-ovl-best-lifts small { display: block; margin-bottom: calc(4 * var(--s)); color: var(--mp-accent); font-size: calc(9 * var(--sf)); text-transform: uppercase; } .mp-ovl-best-lifts strong { font-size: calc(14 * var(--sf)); } .mp-ovl-attempt-wrap { position: relative; justify-content: flex-start; gap: 0; } /* RP WP6 §7.1/§7.2: the dedicated attempt callout. The kicker (lift/attempt/weight) always renders; the PB and record badge lines are ALWAYS in the DOM at a fixed reserved size (mp-ovl-callout-empty only flips visibility), so toggling the meet's indicator defaults or an annotation appearing/disappearing never changes this block's height and never moves the attempt cells below it or the banner sections beside it (§7.2 no-layout-jump). */ .mp-ovl-callout-kicker { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mp-ovl-callout-badges { display: flex; flex-direction: column; align-items: flex-start; gap: calc(3 * var(--s)); margin: calc(4 * var(--s)) 0 calc(6 * var(--s)); } .mp-ovl-callout-badge { display: flex; align-items: center; max-width: 100%; min-height: calc(19 * var(--s)); padding: 0 calc(8 * var(--s)); overflow: hidden; border: 1px solid currentColor; border-radius: 999px; font-size: calc(10.5 * var(--sf)); font-weight: 900; letter-spacing: 0.04em; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } /* Reserves the same box (visibility, not removal — §7.2) so a disabled/absent kind leaves no visible trace. */ .mp-ovl-callout-badge.mp-ovl-callout-empty { visibility: hidden; } /* Kind colour (never colour alone — §10; both lines always carry full "PB"/"NATIONAL RECORD" text too) — same palette as Scoreboard.razor.css/RunMeet.razor's .mp-sb-annot/.mp-rb-annot rules, so every surface reads as one system. */ .mp-ovl-callout-badge.mp-ovl-callout-pb { color: var(--mp-accent); } .mp-ovl-callout-badge.mp-ovl-callout-record { color: #b57bff; } /* Status shading layered on top of the kind colour — order matters: these come AFTER the kind rules above so a failed/superseded annotation always mutes regardless of kind (mirrors the board CSS's cascade order). */ .mp-ovl-callout-badge.mp-ovl-callout-ratified { background: color-mix(in srgb, var(--mp-good) 22%, transparent); } .mp-ovl-callout-badge.mp-ovl-callout-pending { background: color-mix(in srgb, currentColor 16%, transparent); } .mp-ovl-callout-badge.mp-ovl-callout-failed { color: var(--mp-muted); opacity: 0.72; text-decoration: line-through; } .mp-ovl-callout-badge.mp-ovl-callout-superseded { color: var(--mp-muted); opacity: 0.72; } .mp-ovl-attempts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); flex: 1 1 auto; gap: calc(7 * var(--s)); min-height: 0; overflow: hidden; } .mp-ovl-attempt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); border-radius: calc(7 * var(--s)); background: color-mix(in srgb, var(--mp-surface) 75%, black 15%); } .mp-ovl-attempt.good { background: linear-gradient(145deg, var(--mp-good), var(--ovl-good-dark)); } .mp-ovl-attempt.bad { background: linear-gradient(145deg, var(--mp-nolift), var(--ovl-nolift-dark)); } .mp-ovl-attempt.current { border-color: var(--mp-accent); background: rgba(17,20,23,0.96); box-shadow: inset 0 0 20px color-mix(in srgb, var(--mp-accent) 6%, transparent); } .mp-ovl-attempt small { display: block; max-width: 95%; margin-bottom: calc(3 * var(--s)); overflow: hidden; color: color-mix(in srgb, var(--mp-text) 92%, transparent); font-size: calc(9 * var(--sf)); font-weight: 850; line-height: 1.05; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .mp-ovl-attempt strong { font-size: calc(26 * var(--sf)); line-height: 1; } .mp-ovl-attempt.bad::after { content: ""; position: absolute; width: 135%; height: calc(3 * var(--s)); background: rgba(255,255,255,0.72); transform: rotate(-27deg); } .mp-ovl-placing { display: grid; grid-template-columns: minmax(0,1fr) calc(22 * var(--s)) minmax(0,1fr); flex: 1 1 auto; align-items: center; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--mp-accent) 28%, transparent); border-radius: calc(8 * var(--s)); background: rgba(0,0,0,0.22); } .mp-ovl-place-card { min-width: 0; text-align: center; } .mp-ovl-place-card small { display: block; margin-bottom: calc(3 * var(--s)); overflow: hidden; color: color-mix(in srgb, var(--mp-text) 88%, transparent); font-size: calc(9 * var(--sf)); line-height: 1.05; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .mp-ovl-place-card strong { font-size: calc(30 * var(--sf)); line-height: 1; white-space: nowrap; } .mp-ovl-place-card.forecast strong { color: var(--mp-accent); } .mp-ovl-arrow { color: var(--mp-accent); font-size: calc(21 * var(--sf)); line-height: 1; text-align: center; } @media (max-aspect-ratio: 16/10) { .mp-ovl-profile { width: 32vw; } .mp-ovl-next { width: 30vw; } .mp-ovl-banner { grid-template-columns: 1.05fr 0.72fr 0.82fr 1.62fr 1fr; } } /* Auto-save status indicator. */ .mp-autosave-status { font-size: 0.85rem; font-weight: 600; color: var(--mp-muted); } .mp-autosave-status[data-state="saved"] { color: var(--mp-good); } .mp-autosave-status[data-state="pending"] { color: var(--mp-accent); } .mp-card { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 12px; padding: 1.25rem 1.4rem; margin-bottom: 1rem; } .mp-card h3 { margin-top: 0; } /* min(100%, 280px) — not a bare 280px — so the track can shrink with its container: a hard 280px floor forces the grid wider than a .mp-card on a 320px viewport and pages the whole document sideways (seen on /enter's handler checkbox row). Same recipe as .mp-dash-grid/.mp-public-meet-grid. */ .mp-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } /* ==== Setup tab professional redesign (WP2, docs/specs/setup-redesign/*) ==== Everything below is scoped under .mp-setup-scope (the /manage?tab=setup root — see ManageMeet.razor) so the dark-control rewrite and the 12-col shell don't regress any other page. The three lower tools (EntryFormEditor / OplImportPanel / RecordBookPanel) render inside this scope too and already reuse .mp-card/.mp-setup-sec/ .mp-setup-head/.mp-setup-grid/.mp-setup-check/.mp-setup-chips/.form-control — restyling those shared classes here restyles the tools consistently for free, without touching their internals (WP0 §2 rule 5). */ /* ---- Page header (SetupPageHeader.razor) — eyebrow + title + counts strip, replaces .mp-setup-overview ---- */ .mp-setup-pagehead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; margin: 0 0 1rem; padding: 1.1rem 1.2rem; border: 1px solid var(--mp-border); border-radius: 12px; background: linear-gradient(105deg, color-mix(in srgb, var(--mp-accent) 11%, transparent), transparent 42%), var(--mp-surface); box-shadow: 0 12px 28px rgba(0,0,0,0.17); } .mp-setup-pagehead-copy { min-width: 0; } .mp-setup-eyebrow { display: block; margin-bottom: 0.25rem; color: var(--mp-accent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .mp-setup-pagehead h2 { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -0.02em; } .mp-setup-pagehead p { margin: 0.35rem 0 0; max-width: 48rem; color: var(--mp-muted); font-size: 0.85rem; } .mp-setup-stats { display: grid; grid-template-columns: repeat(4, minmax(4.6rem, 1fr)); margin: 0; overflow: hidden; border: 1px solid var(--mp-border); border-radius: 9px; background: color-mix(in srgb, var(--mp-bg) 70%, transparent); } .mp-setup-stats div { min-width: 4.6rem; padding: 0.55rem 0.8rem; text-align: center; border-left: 1px solid var(--mp-border); } .mp-setup-stats div:first-child { border-left: 0; } .mp-setup-stats dt { color: var(--mp-muted); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; } .mp-setup-stats dd { margin: 0.1rem 0 0; color: var(--mp-text); font-size: 1.05rem; font-weight: 850; font-variant-numeric: tabular-nums; } /* ---- Explicit row layout (setup re-layout — replaces the retired 12-column .mp-setup-shell/.mp-setup-c8/ .mp-setup-c6/.mp-setup-c4/.mp-setup-c4-stack/.mp-setup-c12 auto-flow grid). The old shell placed cards by a bare column SPAN and let sparse auto-placement decide what landed next to what — which is exactly what forced the old c4-stack wrapper (stacking Scoring & running rules under Registration & visibility inside one grid column) and still left a blank gutter under Schedule whenever that stacked column ran taller than Schedule itself. Each .mp-setup-row now names its own siblings explicitly (ManageMeet.razor's mp-setup-layout) — a pair, a trio, or (for the two variable-length full-width cards, Overalls and Competition catalogues) no row wrapper at all — so a row's membership is stated in markup, not inferred from column arithmetic. Equal card heights within a row come ONLY from the grid's own `align-items: stretch` (the default, restated below for clarity) plus `height: 100%` on the card itself — no fixed heights, no CSS masonry/multicolumn, no grid-auto-flow:dense, no absolute positioning, no JS measurement. A block-level card with height:100% simply fills its stretched grid cell, so its background/border/shadow reach the row's shared bottom edge even when its own content is shorter than its neighbour. */ .mp-setup-layout { display: grid; gap: 1rem; } .mp-setup-row { display: grid; gap: 1rem; align-items: stretch; min-width: 0; } .mp-setup-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-setup-row--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Every row's direct children ARE the section components' own root .mp-card element (Blazor renders a component's root markup straight into its parent's child list, with no wrapper element in between) — CommsSummaryCard's root carries .mp-card too (alongside its own .mp-comms-summary-card modifier), so this one selector reaches all three trio cards as well as both pair rows. */ .mp-setup-row > .mp-card { height: 100%; min-width: 0; } /* .mp-card carries its own margin-bottom:1rem globally (kept for the many plain, non-setup .mp-card usages elsewhere in this codebase) — inside .mp-setup-layout the grid `gap` already owns ALL vertical spacing between rows and between the two full-width cards, so a card keeping its own margin here would double it. Scoped to exactly the two places a setup card can be a grid item (a bare row, or the layout's own direct child for the full-width cards) rather than a broad `.mp-setup-scope .mp-card`, so a .mp-card that might one day render INSIDE a section's own body content is never silently affected by this override. */ .mp-setup-layout > .mp-card, .mp-setup-row > .mp-card { margin-bottom: 0; } @media (max-width: 1179px) { /* Tablet and mobile always stack one card per row in DOM/keyboard order — never a cramped 50%/33% card (fable-spec §4.2/§4.3). height:100% is undone too: a natural-height card stacked above its row sibling must not stretch to match a taller one once they are no longer sharing a row baseline. */ .mp-setup-row--pair, .mp-setup-row--trio { grid-template-columns: minmax(0, 1fr); } .mp-setup-row > .mp-card { height: auto; } } /* .mp-setup-wide: still used standalone (NOT inside the retired 12-col shell) as a full-width field span inside a card's own .mp-setup-grid (repeat(auto-fit, minmax(...,1fr))) — e.g. Meet name, the address lookup row, and EntryFormEditor's custom-field help/options rows. grid-column:1/-1 spans every implicit column regardless of how many the surrounding grid currently has, so it needed no change for the row-layout re-work. */ .mp-setup-wide { grid-column: 1 / -1; } /* ---- Dark control base + full state coverage (fable-spec §6.2/§6.3) ---- rest / hover / focus-visible / filled / placeholder / disabled / read-only / invalid, for text, number, select, password, search, colour inputs and the MultiSelectDropdown trigger. No input stays a harsh white box. Email notifications WP4 (WP0 §1.3: "new scope class .mp-comms-scope mirrors it") — every selector below also matches under .mp-comms-scope so Communications/Settings/Compose/Providers get the identical dark controls without a second, drifting copy of this block. */ .mp-setup-scope .form-control, .mp-setup-scope .mp-multiselect > summary.msd-control, .mp-comms-scope .form-control, .mp-comms-scope .mp-multiselect > summary.msd-control { display: block; width: 100%; min-height: 2.35rem; padding: 0 0.65rem; color: var(--mp-text); background: var(--mp-control-bg); border: 1px solid var(--mp-control-border); border-radius: 7px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.2); outline: none; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease; } .mp-setup-scope input[type="color"].form-control, .mp-comms-scope input[type="color"].form-control { padding: 0.2rem; cursor: pointer; } .mp-setup-scope .form-control::placeholder, .mp-comms-scope .form-control::placeholder { color: var(--mp-control-placeholder); opacity: 1; } .mp-setup-scope .form-control:hover:not(:disabled):not([readonly]), .mp-setup-scope .mp-multiselect > summary.msd-control:hover, .mp-comms-scope .form-control:hover:not(:disabled):not([readonly]), .mp-comms-scope .mp-multiselect > summary.msd-control:hover { background: var(--mp-control-bg-hover); border-color: #435164; } .mp-setup-scope .form-control:focus-visible, .mp-setup-scope .form-control:focus, .mp-setup-scope .mp-multiselect[open] > summary.msd-control, .mp-comms-scope .form-control:focus-visible, .mp-comms-scope .form-control:focus, .mp-comms-scope .mp-multiselect[open] > summary.msd-control { border-color: var(--mp-control-border-focus); background: #19212b; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-control-border-focus) 22%, transparent), inset 0 1px 1px rgba(0,0,0,0.2); } .mp-setup-scope .form-control:disabled, .mp-setup-scope .form-control[disabled], .mp-comms-scope .form-control:disabled, .mp-comms-scope .form-control[disabled] { opacity: 0.55; cursor: not-allowed; background: color-mix(in srgb, var(--mp-control-bg) 65%, var(--mp-bg)); } .mp-setup-scope .form-control[readonly], .mp-comms-scope .form-control[readonly] { background: transparent; border-style: dashed; color: var(--mp-muted); } .mp-setup-scope .form-control.invalid, .mp-setup-scope .form-control[aria-invalid="true"], .mp-comms-scope .form-control.invalid, .mp-comms-scope .form-control[aria-invalid="true"] { border-color: var(--mp-nolift); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-nolift) 18%, transparent), inset 0 1px 1px rgba(0,0,0,0.2); } .mp-setup-scope .validation-message, .mp-comms-scope .validation-message { display: block; margin-top: 0.3rem; color: var(--mp-nolift); font-size: 0.78rem; font-weight: 700; } .mp-setup-scope select.form-control, .mp-comms-scope select.form-control { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #7d8999 50%), linear-gradient(135deg, #7d8999 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; padding-right: 1.7rem; } .mp-setup-scope input[type="search"].form-control, .mp-comms-scope input[type="search"].form-control { padding-left: 2.1rem; } .mp-setup-scope input[type="checkbox"], .mp-comms-scope input[type="checkbox"] { accent-color: var(--mp-accent); width: 15px; height: 15px; } /* File inputs (OplImportPanel/RecordBookPanel CSV uploads — fable-spec §6.3/§9.4 explicitly names "file" in the required dark-control coverage list): the box itself already picks up .form-control above, but the "Choose File" affordance is a distinct native pseudo-element that ignores the input's own background/border, so without this rule it stays a plain white OS button against the dark card — confirmed via the WP4 evidence captures. Both the standard and the WebKit/Blink-prefixed selector are needed (Chromium, which Playwright and most directors' browsers use, still only recognises the prefixed one). */ .mp-setup-scope input[type="file"].form-control { padding: 0.3rem 0.65rem; cursor: pointer; } /* Kept as two separate rules deliberately, NOT a comma-separated group: a plain (non-:is()) selector list is invalidated as a whole if any browser doesn't recognise one of its selectors, so grouping the standard and the -webkit- form together silently dropped BOTH in Chromium (confirmed — the button rendered as a stock white OS control until this was split; Playwright/most directors run Chromium, which needs the prefixed selector). */ .mp-setup-scope input[type="file"].form-control::-webkit-file-upload-button { margin-right: 0.65rem; padding: 0.35rem 0.7rem; color: var(--mp-text); font: inherit; font-weight: 700; background: var(--mp-nested-surface); border: 1px solid var(--mp-control-border); border-radius: 6px; cursor: pointer; transition: background-color .14s ease, border-color .14s ease; } .mp-setup-scope input[type="file"].form-control::file-selector-button { margin-right: 0.65rem; padding: 0.35rem 0.7rem; color: var(--mp-text); font: inherit; font-weight: 700; background: var(--mp-nested-surface); border: 1px solid var(--mp-control-border); border-radius: 6px; cursor: pointer; transition: background-color .14s ease, border-color .14s ease; } .mp-setup-scope input[type="file"].form-control:hover::-webkit-file-upload-button { background: var(--mp-control-bg-hover); border-color: #435164; } .mp-setup-scope input[type="file"].form-control:hover::file-selector-button { background: var(--mp-control-bg-hover); border-color: #435164; } /* ---- Card shell + header (shared by the 8 new sections AND the 3 lower tools) ---- WP4 (Overalls divisions-menu clipping fix): overflow:hidden used to live on the WHOLE card purely so its own top corners stayed rounded under the header's flush top edge — but that ALSO clipped any descendant that needs to paint outside the card's own box, like an open MultiSelectDropdown menu (.msd-menu, position:absolute inside .mp-multiselect — see ScoringRunningSection.razor's overalls divisions field). The corner clip now lives on .mp-setup-head alone (matching top border-radius + its own overflow:hidden) — the card's own background already follows its border-radius natively with no overflow rule needed, and every OTHER direct child is already inset by the .mp-setup-sec > * margin rule below, so nothing else ever touched the rounded corners in the first place (confirmed against every current .mp-setup-sec usage, including the header-less lower tools and Results.razor's plain h3+table cards). position:relative is the positioning context the .mp-setup-sec:has(.mp-multiselect[open]) rule further down promotes with z-index while a menu is open. */ .mp-setup-sec { padding: 0; border-radius: 12px; position: relative; box-shadow: 0 12px 28px rgba(0,0,0,0.17); } .mp-setup-head { display: flex; align-items: flex-start; gap: 0.7rem; flex-wrap: wrap; margin: 0 0 0.9rem; padding: 1rem 1.1rem 0.75rem; border-bottom: 1px solid color-mix(in srgb, var(--mp-border) 85%, transparent); border-radius: 12px 12px 0 0; overflow: hidden; } .mp-setup-head::before { content: ""; align-self: stretch; width: 3px; min-height: 1.25rem; border-radius: 999px; background: var(--mp-accent); } .mp-setup-head h3 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; } .mp-setup-head .mp-muted { flex: 1 1 14rem; font-size: 0.78rem; line-height: 1.4; } .mp-setup-card-icon { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; margin-top: -0.05rem; border: 1px solid #344150; border-radius: 8px; background: var(--mp-nested-surface); color: var(--mp-accent); font-size: 0.7rem; font-weight: 800; } .mp-setup-card-titles { min-width: 0; } .mp-setup-card-titles h3 { margin: 0; font-size: 1rem; letter-spacing: -0.01em; } .mp-setup-card-titles .mp-muted { display: block; margin-top: 0.15rem; font-size: 0.78rem; line-height: 1.4; } /* Section bodies (everything after the header) get consistent side/bottom padding; the header owns its own top/side padding when present (my 8 new sections + EntryFormEditor). OplImportPanel/RecordBookPanel don't use .mp-setup-head at all (their own .mp-compact-row IS the first child) so the first-child rule gives them the top inset the old uniform `.mp-setup-sec { padding: 1rem 1.1rem }` used to provide. */ .mp-setup-sec > *:not(.mp-setup-head) { margin-left: 1.1rem; margin-right: 1.1rem; } .mp-setup-sec > *:not(.mp-setup-head):first-child { margin-top: 1.1rem; } .mp-setup-sec > *:last-child { margin-bottom: 1.1rem; } .mp-setup-sec > .mp-setup-head + * { margin-top: 0; } .mp-setup-grid { display: grid; gap: 0.7rem 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); align-items: end; } .mp-setup-grid label.mp-muted { display: block; margin-bottom: 0.22rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.015em; } .mp-setup-sec h4 { margin: 0.9rem 0 0.4rem !important; color: var(--mp-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; } .mp-setup-check { display: flex; align-items: center; gap: 0.5rem; min-height: 2.35rem; padding: 0.45rem 0.6rem; border: 1px solid var(--mp-control-border); border-radius: 8px; background: var(--mp-nested-surface); white-space: normal; } .mp-setup-check input { flex: 0 0 auto; } .mp-setup-sec .mp-btn.danger[title^="Remove"] { display: inline-grid; place-items: center; flex: 0 0 2.35rem; width: 2.35rem; min-width: 2.35rem; height: 2.35rem; padding: 0; line-height: 1; } .mp-setup-divider { height: 1px; background: var(--mp-border); margin: 0.85rem 0; } .mp-setup-subhead { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.4rem; color: var(--mp-muted); } .mp-setup-addrow { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; } .mp-setup-addrow .form-control { flex: 1 1 6rem; min-width: 5rem; } /* ---- Toggle-switch rows (Public meet / self-registration / live+final results / attempt options) ---- Still a real, keyboard-operable, labelled — only its appearance changes to a pill switch. */ .mp-setup-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; } .mp-setup-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 2.65rem; padding: 0.5rem 0.65rem; border: 1px solid var(--mp-control-border); border-radius: 8px; background: var(--mp-nested-surface); cursor: pointer; font-size: 0.82rem; font-weight: 650; } .mp-setup-toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: #293443; border: 1px solid #3b4859; position: relative; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .mp-setup-toggle input[type="checkbox"]::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #7c8999; left: 2px; top: 2px; transition: left .15s ease, background-color .15s ease; } .mp-setup-toggle input[type="checkbox"]:checked { background: rgba(240,185,77,.25); border-color: #a87a28; } .mp-setup-toggle input[type="checkbox"]:checked::after { left: 16px; background: var(--mp-accent); } .mp-setup-toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--mp-control-border-focus); outline-offset: 2px; } .mp-setup-toggle input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; } /* ---- Attempt indicators (AttemptIndicatorsSection.razor — PB/record spec §4) ---- .mp-ai-rule reuses .mp-setup-toggle's switch look (same selector above styles its checkbox) but stacks the two rows in one column and allows a wrapping help line under each label, which the 2-up .mp-setup-toggle-grid has no room for. The summary pills' live text (§4.1 "updates immediately") is pure CSS: each .mp-ai-eff holds four spans, and exactly one is shown depending on the two switches' :checked state — no JS, no interactive render mode, matching this static-SSR page (same ":has()"-driven-visibility technique as .mp-cf-panel above). */ .mp-ai-rules { display: flex; flex-direction: column; gap: 0.5rem; } .mp-ai-rule { align-items: flex-start; } .mp-ai-rule-text { display: flex; flex-direction: column; gap: 0.2rem; padding-right: 0.5rem; } .mp-ai-rule-text strong { font-size: 0.85rem; font-weight: 650; } .mp-ai-rule-text small { font-size: 0.74rem; font-weight: 400; line-height: 1.35; color: var(--mp-muted); } .mp-ai-rule input[type="checkbox"] { margin-top: 0.2rem; } .mp-ai-summary-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; } .mp-ai-pill { display: inline-flex; align-items: center; gap: 0.25rem; width: max-content; max-width: 100%; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.76rem; font-weight: 500; background: var(--mp-nested-surface); border: 1px solid var(--mp-border); color: var(--mp-muted); } .mp-ai-pill .mp-ai-eff { color: var(--mp-text); font-weight: 700; } .mp-ai-eff span { display: none; } .mp-ai-card:has(#ai-pb-switch:checked):has(#ai-record-switch:checked) .mp-ai-eff .mp-ai-both { display: inline; } .mp-ai-card:has(#ai-pb-switch:checked):has(#ai-record-switch:not(:checked)) .mp-ai-eff .mp-ai-pbonly { display: inline; } .mp-ai-card:has(#ai-pb-switch:not(:checked)):has(#ai-record-switch:checked) .mp-ai-eff .mp-ai-nronly { display: inline; } .mp-ai-card:has(#ai-pb-switch:not(:checked)):has(#ai-record-switch:not(:checked)) .mp-ai-eff .mp-ai-none { display: inline; } .mp-ai-notice { background: color-mix(in srgb, var(--mp-info) 14%, var(--mp-surface)); border: 1px solid var(--mp-info); border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.85rem; margin-top: 0.6rem; } /* ---- Schedule & structure (ScheduleStructureSection.razor) — compact 50%-width card layout ---- Setup re-layout: this card now renders at half the setup width instead of the old 8/12 span, so its interior needs its OWN local breakpoint rather than reacting to the page viewport — a container query on a wrapper INSIDE the card (deliberately not on .mp-setup-sec itself: that element is the positioning context the unrelated .mp-setup-sec:has(.mp-multiselect[open]) z-index rule promotes, and giving it its own containment context too would complicate that rule for no benefit here). Below ~560px of the card's OWN content width the Days/Platforms panels stack; at or above it they sit side by side (fable-spec §3.3/§4.4). */ .mp-setup-inventory-cq { container-type: inline-size; container-name: mp-setup-inventory; } .mp-setup-inventory-grid { display: grid; gap: 0.6rem; grid-template-columns: 1fr; } @container mp-setup-inventory (min-width: 560px) { .mp-setup-inventory-grid { grid-template-columns: 1fr 1fr; } } .mp-setup-mini-panel { border: 1px solid var(--mp-border); border-radius: 9px; background: var(--mp-nested-surface); overflow: hidden; } .mp-setup-mini-head { margin: 0; padding: 0.55rem 0.65rem; color: var(--mp-muted); border-bottom: 1px solid var(--mp-border); font-size: 0.68rem; font-weight: 760; text-transform: uppercase; letter-spacing: 0.05em; } .mp-setup-mini-list { list-style: none; margin: 0; padding: 0.35rem; } .mp-setup-mini-list li { display: flex; gap: 0.4rem; align-items: center; padding: 0.2rem 0.2rem; } .mp-setup-mini-addrow { display: flex; gap: 0.4rem; padding: 0.5rem; border-top: 1px solid var(--mp-border); } /* ---- Per-day sessions/flights disclosure (fable-spec §3.3/§4.4) — one native
per day replaces the old flat "Sessions & flights" panel that used to list every day at once, which is exactly the shape that produced a tall Schedule card with a large empty gutter beside it once the card shrank to 50% width. The first day (by Order) renders open server-side; later days start collapsed but still show "N sessions · N flights" in their summary, so their content is knowable without opening them (fable-spec §5 large-profile requirement). Purely native open/close — no JS, and nothing here transitions, so prefers-reduced-motion needs no extra rule. */ .mp-setup-schedule-days { display: grid; gap: 0.5rem; margin-top: 0.7rem; } .mp-setup-day { border: 1px solid var(--mp-border); border-radius: 9px; background: var(--mp-nested-surface); overflow: hidden; } .mp-setup-day > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; list-style: none; padding: 0.6rem 0.65rem; cursor: pointer; font-size: 0.82rem; font-weight: 700; } .mp-setup-day > summary::-webkit-details-marker { display: none; } .mp-setup-day > summary::after { content: "▾"; flex: 0 0 auto; color: var(--mp-muted); font-size: 0.7rem; } .mp-setup-day[open] > summary::after { content: "▴"; } .mp-setup-day[open] > summary { border-bottom: 1px solid var(--mp-border); } .mp-setup-day-counts { color: var(--mp-muted); font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .mp-setup-day-body { padding: 0.55rem 0.65rem 0.6rem; } .mp-setup-flight-pill { display: inline-flex; gap: 0.2rem; align-items: center; } /* ---- Competition catalogues (CompetitionCataloguesSection.razor) — 4-cell grid per the mock ---- */ /* align-items:start (grid default is stretch): with real content, "Weight classes" is reliably taller than the other three catalogues (sex-segmented lists + a 3-field add-row vs. their single-field add-rows) — stretching every card to match turned Age divisions/Equipment/Events into mostly-empty boxes (confirmed in the 1440x1000 evidence capture). Letting each catalogue size to its own content removes that dead space. */ .mp-setup-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; align-items: start; } .mp-setup-catalog { min-height: 7rem; padding: 0.7rem 0.75rem; border: 1px solid var(--mp-border); border-radius: 9px; background: linear-gradient(160deg, rgba(255,255,255,0.018), transparent 44%), var(--mp-nested-surface); } .mp-setup-catalog-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .mp-setup-catalog-top b { font-size: 0.82rem; } .mp-setup-catalog-top .mp-muted { font-size: 0.72rem; } .mp-setup-catalog .mp-setup-subhead:first-of-type { margin-top: 0; } @media (max-width: 1099px) { .mp-setup-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .mp-setup-catalog-grid { grid-template-columns: 1fr; } } /* ---- Overall add-form: name and divisions each take a fixed half — the divisions box grows in height (chips wrap) as more are chosen, without either box changing width. ---- */ .mp-setup-overalls { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.5rem; } .mp-setup-overall-row { display: flex; flex-direction: column; gap: 0.35rem; } .mp-ov-namerow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: start; } .mp-ov-namerow > .form-control { width: 100%; min-width: 0; } .mp-ov-namerow > .mp-multiselect { width: 100%; min-width: 0; } /* WP4: Formula / Age coefficient / Grouping (Split by sex) / Remove / Add share one >=38px control baseline. Root cause was two-fold: (1) .mp-setup-addrow's shared align-items:center vertically CENTRES children instead of bottom-aligning them, so a short bare control floats mid-row against a taller labelled