/* ═══════════════════════════════════════════════════════════════ FlexRank Editor — Column Depth ═══════════════════════════════════════════════════════════════ */ /* Ambient editor backdrop — a restrained layered gradient over the flat surface so the workspace reads with depth and the frosted comparison panel has something to refract. Layers (top → bottom): a soft accent glow in the top-right, a cool counter-tint in the lower-left, and a faint tonal diagonal. All low-alpha and built on theme rgb tokens, so it adapts light/dark and stays subtle rather than loud. Sits on top of the element's bg-surface color (background-image only — the Tailwind bg-surface color shows through). */ .fr-editor-shell { background-image: radial-gradient(115% 80% at 100% 0%, rgb(var(--accent-rgb) / .07), transparent 55%), radial-gradient(100% 75% at 0% 100%, rgb(var(--surface-3-rgb) / .5), transparent 55%), linear-gradient(155deg, rgb(var(--surface-2-rgb) / .45) 0%, transparent 42%); background-attachment: local; } /* Light mode: subtle lift shadow on column cards for depth */ .fr-editor-column { box-shadow: 0 1px 3px rgba(60, 40, 20, 0.06), 0 1px 2px rgba(60, 40, 20, 0.04); /* Containment: column is its own layout/paint/style boundary so a reorder in one column can't dirty layout/style in another. Drives the drag-time UpdateLayoutTree elementCount way down (was 85k+). */ contain: layout paint style; } html[data-theme="dark"] .fr-editor-column { box-shadow: none; } /* Skip rendering work for columns scrolled off-screen horizontally. Active drag column stays in viewport so SortableJS measurements are unaffected. Intrinsic size matches typical column width so placeholder doesn't collapse the layout. */ .fr-editor-column { content-visibility: auto; contain-intrinsic-size: auto 800px; } /* ═══════════════════════════════════════════════════════════════ FlexRank Editor — List Row Width Tiers ═══════════════════════════════════════════════════════════════ The row's layout used to branch on `lg:` — a VIEWPORT breakpoint — but a column's width has almost nothing to do with the viewport: multi-column mode pins every column to --fr-col-w (340px), while single-list focus removes the cap and hands one column the whole canvas. Both happen at the same viewport, so `lg:` was true for a 340px column and a 1200px one alike. The 340px case truncated names to ~9 characters; the 1200px case left the name box flex-growing into a dead gutter with the metadata pinned far right. The column is now a query container and the row sizes off its OWN width. The thresholds below are CONTENT-box widths — container-type: inline-size queries the content box, and .fr-editor-column carries a 1px border, so a column laid out at exactly 560px measures 558 here. Note this is the size the column is GIVEN (an explicit --fr-col-w, or the focus-mode block width) — never a size derived from the rows inside it — so inline-size containment introduces no circularity. It composes with the existing `contain` and content-visibility above rather than replacing them. */ .fr-editor-column { container-type: inline-size; container-name: frcol; } /* Every tier rule below is scoped to .fr-list-row, NOT .fr-row-content. BoardCardComponent renders its own .fr-row-content — a flex-column card, not a table row — and would be deformed by row-tier layout. */ .fr-list-row { display: flex; align-items: center; height: 1.75rem; /* 28px, the dense default */ } /* .fr-row-meta is a grouping element only: at every width except the narrow tier its children behave as ordinary sibling cells of the row, which is what keeps Tm/Pos/Bye aligned to their header labels. */ .fr-list-row .fr-row-meta, .fr-row-header .fr-row-meta { display: contents; } /* Column-name labels ("BYE 6") are for the stacked caption only; the aligned layout has real header labels above the values instead. */ .fr-mlbl { display: none; } /* Action cluster: width declared here (plus the coarse-pointer override right below) for both the row and the header's reserve. Previously the header hand-copied the buttons' widths as four spacer spans, and drifted from them. */ .fr-cell-acts { width: 5.25rem; } /* 84px: compare + pencil + kebab + chevron, sized for desktop's 16-24px icons */ /* Under a coarse pointer the pencil/kebab/chevron each grow to a 28px touch target (see Editor::RowInsertMenuComponent#trigger_classes and the mobile branches in ranked_node_component.html.erb) -- 7rem is that same compare(20px) + pencil(32px) + kebab(30px) + chevron(30px) sum. Without this the cluster overflowed the 84px desktop reserve by ~28px and spilled left into the ECR/snapshot delta badge next to it. */ @media (pointer: coarse) { .fr-cell-acts { width: 7rem; } } /* Wide-only data columns are absent below their tier entirely. The class is DOUBLED, and the rule sits above the @container blocks rather than below them, for reasons that are both load-bearing: Doubled, because a single `.fr-cell-wide` is an exact specificity tie with Tailwind's `.inline-flex` -- which every one of these cells carries (see the metadata_columns loop in ranked_node_component.html.erb and its twin in ranking_list_column_component.html.erb). A tie is settled by source order, and editor.css does NOT come last: the application layout's `stylesheet_link_tag :app` re-links every stylesheet in the directory alphabetically, which serves tailwind.css a second time AFTER this file. The utility won, so the wide and extra-wide columns rendered at every container width -- including the phone's narrow tier, where the row is a grid and the caption line is a bounded `minmax(0, 1fr)` cell. A 151px fRank-OVR chain that should never have been there overflowed it and ran underneath the comparison-delta pill and the action icons. Above the container blocks, because doubling makes this 0-2-0 -- the same weight as the `.fr-list-row .fr-cell-wide` reveals below. Same weight is settled by order again, and here the LATER rule has to win, or the columns would never appear at any width. */ .fr-cell-wide.fr-cell-wide { display: none; } .fr-cell-xwide.fr-cell-xwide { display: none; } /* ── Narrow tier: the stacked row ────────────────────────────── Below this width a single line cannot hold a full player name — the fixed chrome (handle, delta, Tm/Pos/Bye, actions) leaves it under ~70px, about nine characters. Rather than truncate the one piece of information the row exists to convey, the row becomes two explicit lines. Named grid areas, not flex-wrap: wrapping let the browser choose break points, which produced a different ragged shape per row depending on name length. */ @container frcol (max-width: 420px) { /* A single row of column labels describes nothing once rows stack. */ .fr-row-header { display: none; } .fr-list-row { display: grid; /* Five tracks. The caption line needs its own end cell for the comparison delta — sharing one `meta` cell between the metadata and an end-justified delta let the two overlap once the metadata ran long. `base` is the variant editor's baseline-delta gutter: it sits with the rank, spanning both lines, so the delta and its reset read as part of the rank rather than as trailing decoration on the name. The track collapses to zero wherever no row renders that cell, which is everywhere but the variant editor. */ grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "handle base name name acts" "handle base meta delta acts"; align-items: center; row-gap: 1px; height: auto; min-height: 2.75rem; /* 44px */ padding-top: .3rem; padding-bottom: .3rem; } .fr-list-row .fr-cell-handle { grid-area: handle; align-self: center; } .fr-list-row .fr-cell-name { grid-area: name; margin-inline-start: .375rem; } .fr-list-row .fr-cell-acts { grid-area: acts; align-self: center; } /* The name is the headline: a full size step AND a weight step above the caption, and it never truncates here. */ .fr-list-row .fr-name { white-space: normal; overflow: visible; text-overflow: clip; font-size: .8125rem; /* 13px */ font-weight: 600; line-height: 1.2; } /* Second line: one caption built from the row's only copy of the metadata — there is no lg:hidden twin any more. */ .fr-list-row .fr-row-meta { grid-area: meta; display: flex; align-items: center; gap: .5rem; margin-inline-start: .375rem; min-width: 0; font-size: .625rem; /* 10px */ letter-spacing: .03em; } .fr-list-row .fr-row-meta > .fr-cell { width: auto; margin: 0; flex: 0 0 auto; justify-content: flex-start; color: var(--text-dim); } /* Cells with nothing in them (the reserved rookie slot on a non-rookie, a free agent's empty team) collapse rather than leaving gaps in the caption. Note this is display:none, not removal — an empty cell is still a sibling for `+`, so a middot separator drawn with `.fr-cell + .fr-cell::before` rendered BEFORE the first visible item on every non-rookie row. Spacing alone carries the separation here; there is no way to express "first visible sibling" in CSS, and a leading stray dot on most rows is a worse outcome than no dots at all. */ .fr-list-row .fr-row-meta > .fr-cell:empty { display: none; } /* Team keeps its brand colour and position its own; both are cues you scan for. Everything else on the caption recedes. The position badge drops its filled pill here and keeps only its colour: a saturated block was the loudest object on a row whose subject is the player, and it beat the name for attention. Position still reads two ways without it — the coloured label itself, and the row's existing [data-nfl-position] tint. */ .fr-list-row .fr-row-meta .fr-cell-tm { font-weight: 700; } .fr-list-row .fr-pos-badge { width: auto; padding: 0; background: none; font-weight: 700; } .fr-list-row .fr-mlbl { display: inline; margin-inline-end: .2rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; } /* Comparison deltas belong with the metadata, not wedged between the rank and the name where a coloured pill outshouted both. The two can co-occur (the isolated variant editor renders a baseline delta as well as the ECR/snapshot pair), so they get separate cells. */ .fr-list-row .fr-cell-delta { grid-area: delta; justify-self: end; align-self: center; width: auto; margin: 0 0 0 .4rem; } .fr-list-row .fr-cell-basedelta { grid-area: base; justify-self: start; align-self: center; width: auto; margin: 0 .15rem 0 .25rem; } } /* ── Wide tier: spend the surplus, don't part the sea ────────── With the name box flex-growing, a wide column put the name hard left and the metadata hard right with nothing between them. The name now stops at a readable measure and the freed space goes to data columns the profile opts into — each one a real column with a header label and a rule, so a scan down the list compares like against like. */ @container frcol (min-width: 560px) { /* The name column is sized to what names actually MEASURE, not to a round number. Across the 295-player overall list the widest name is 123px and the median is 75px; the longest name anywhere in the player table is 159px ("Christian Scotland-Williamson"). 12rem = 192px clears all of them with headroom, so nothing truncates here either. This was 22rem, which is ~3x what any name needs: the cell stayed a fixed 352px while the text inside it was 61-89px, so every row carried ~250px of empty name column between the player and his team — the same chasm the tier work was meant to remove, merely bounded. The column has to stay a FIXED width (not shrink-to-fit) or the metadata beside it would land at a different x on every row. 12rem is only the CEILING. name_column_controller measures the widest name in each list and publishes it as --fr-name-w, so a column of ordinary names sits at its own width rather than at the width of the longest name in the whole player table. The cap still applies when a list genuinely holds one — min() takes whichever is smaller. Whatever is left over after this collects in front of the action cluster, which pins to the row's right edge. That gutter separates data from controls and breaks no association — unlike a gap between a player and his own team. It cannot be designed away at these column widths: the row's content simply needs less room than two open lists are given (--fr-col-w is a floor, and columns grow to share the scroller). */ .fr-list-row .fr-cell-name, .fr-row-header .fr-cell-name { max-width: min(var(--fr-name-w, 12rem), 12rem); } .fr-list-row .fr-cell-acts, .fr-row-header .fr-cell-acts { margin-inline-start: auto; } .fr-list-row .fr-cell-wide, .fr-row-header .fr-cell-wide { display: inline-flex; } /* Column rules start where the identity block ends. */ .fr-list-row .fr-cell-tm, .fr-row-header .fr-cell-tm, .fr-list-row .fr-cell-wide, .fr-row-header .fr-cell-wide, .fr-list-row .fr-cell-acts, .fr-row-header .fr-cell-acts { border-inline-start: 1px solid var(--border-subtle); } /* Tm opens the data block, so it carries the leading rule. The padding has to be SYMMETRIC: a one-sided padding-inline-start shifted the content off the cell's centre (Tm sat ~4px right of centre while Pos and Bye were dead-centre), and it shifted the header and the row by different amounts because one centres with flex and the other with text-align. The cell widens to keep the same 1.5rem of content box it had before the padding. */ .fr-list-row .fr-cell-tm, .fr-row-header .fr-cell-tm { width: 2.25rem; /* The trailing pad carries the extra 1px because the leading rule is a border, and a border-box counts it on the leading side only — even padding would leave the content sitting half a pixel right of centre. */ padding-inline: .375rem calc(.375rem + 1px); margin-inline-start: .375rem; } } /* ── Extra-wide tier: the columns the wide tier cannot afford ── The fRank OVR history cell prints three labelled ranks and two arrows ("OVR8←OVR2←OVR24"), ~140px. At the wide tier's 560px the row would have to take that width out of the player's name — the one thing this product never truncates — so the column waits until the ranking column has room for it outright. Single-list focus on any real desktop clears this; a 340px multi-column does not, and should not. */ @container frcol (min-width: 720px) { .fr-list-row .fr-cell-xwide, .fr-row-header .fr-cell-xwide { display: inline-flex; /* --border, not the --border-subtle the data-block rules use. This is the one boundary between the ranking columns (Rk, and the heuristics before it) and a block of ranks from somewhere else entirely -- the fRank Open archive -- so it has to actually read as a boundary. At --border-subtle (#241f2e) it is invisible against surface-2 (#1f1a28), which is every other row: the rule was there and nobody could see it. --border is the weight the row's own bottom rule already carries, so the column reads set off without reading heavy. */ border-inline-start: 1px solid var(--border); } } /* ═══════════════════════════════════════════════════════════════ FlexRank Editor — Row Containment ═══════════════════════════════════════════════════════════════ */ /* Each player row is its own layout/paint/style boundary. Without this, a class change on body or a parent forces every row's subtree through style recalc/layout. With it, invalidation stops at the row root. Trace pre-fix showed 34k dirty layout objects on a single drag move; containment scopes that to the rows that actually changed. Style containment is safe here because rows don't use counters/quotes that need to escape. */ .fr-row, .fr-tier-break-row { contain: layout paint style; } /* Skip rendering work for rows scrolled off-screen vertically. Each column scrolls independently; rows the user can't see don't need style/layout/paint. Browser auto-promotes to full rendering when a row enters the viewport, so SortableJS sees real rects on anything it could practically swap with (drag candidate area is always in-viewport). Intrinsic sizes match the rendered heights: 28 px desktop / 48 px mobile for player rows; 20 px / 28 px for tier breaks. Off by a couple px on either side is fine — content-visibility's main job is to drop the per-row recalc cost, not to preserve scroll position to the pixel. */ /* Per-row content-visibility was deliberately removed: it collapses off-screen rows' contribution to the column body's scrollHeight, so the .overflow-y-auto body never overflows — overflow-y-auto stays inactive and spotlight autoscroll has nothing to scroll. The horizontal .fr-editor-column content-visibility (above) still skips off-screen columns; per-row containment (contain: layout paint style on .fr-row) still scopes style/layout invalidation. The drag perf win from #15 came mostly from `contain`, not from content-visibility on each row. */ /* SortableJS drag list: paint+layout containment so reorder animations don't trigger paint invalidation on neighbors. Children (rows) already carry style containment, so it isn't needed at this level. */ [data-controller~="drag"] { contain: layout paint; } /* (Hover-kill rule deliberately not present here. Rationale: a rule like `.fr-editor-shell.fr-dragging .fr-row > *` cascades on every class toggle of `.fr-dragging`, forcing the style engine to re-evaluate `.fr-row > *` matches across the whole editor (~30k+ elements). The trace after Step 3 showed a 380 ms style recalc spike at pointerdown that traced back to this exact toggle pattern. The hover cost it suppressed (~85 ms cumulative dragenter/mouseenter) was an order of magnitude smaller than the cascade it caused. Any future hover-suppression mechanism MUST avoid descendant selectors anchored at the toggled class.) */ /* ═══════════════════════════════════════════════════════════════ FlexRank Editor — Drag & Drop States ═══════════════════════════════════════════════════════════════ */ /* ── Ghost: the invisible slot left in the list ──────────────── Content is hidden. The animated gap from neighboring items sliding apart is the drop indicator — no decoration needed. No pseudo-elements or position: relative to avoid layout recalculation jitter as SortableJS moves the ghost in the DOM. */ .fr-sortable-ghost { opacity: 0 !important; } /* Force-render the dragged row's subtree. Rows carry `content-visibility: auto` for offscreen-skip perf, but Chromium's native HTML5 drag-image snapshot generator skips content-visibility subtrees, producing an empty drag image. Override on the states active during drag so the snapshot includes the row's content. */ .fr-sortable-chosen, .fr-sortable-fallback { content-visibility: visible; } /* ── Chosen: the instant lift when you grab a row ────────────── Provides immediate tactile feedback before dragging begins. */ .fr-sortable-chosen { z-index: 10; } .fr-sortable-chosen > .fr-row-content { background-color: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent), 0 4px 12px -2px rgba(0, 0, 0, 0.15); border-radius: 0.25rem; } /* ── Fallback: the card following your cursor ────────────────── Elevated card with subtle scale for depth. Clean silhouette with hidden expand/tier-break content. */ .fr-sortable-fallback { box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.30), 0 8px 16px -4px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.06); border-radius: 0.375rem; opacity: 0.95; background-color: var(--surface); } .fr-sortable-fallback .drag-exclude { display: none !important; } /* (Expanded-row collapse during drag is now handled in drag_controller.js#onChoose by setting inline style directly on the handful of `.fr-row-expanded` elements, then restoring on drag-end. The previous descendant rule `.fr-editor-shell.fr-dragging .fr-row-expanded` triggered a full-tree style invalidation on every `.fr-dragging` toggle even though only 0-1 elements actually matched. Same root cause as the hover-kill cascade above — descendant selectors anchored at a toggled class are paid in full on toggle.) */ /* ── Drop landing: brief highlight when item settles ─────────── Applied by JS after drop, removed after animation completes. */ .fr-drop-landed > .fr-row-content { animation: drop-land 400ms ease-out; } @keyframes drop-land { 0% { background-color: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent); } 100% { background-color: transparent; box-shadow: none; } } /* ── Composite list syncing lock: applied while async propagation is in flight. Removed implicitly when the container is replaced by the server's turbo_stream response (synchronous path) or by an ActionCable broadcast (async path). The watchdog refetch in composite_lock_controller is the recovery path for dropped streams. Visual treatment: dim the list + lay a slow diagonal stripe shimmer over it to communicate "working, don't touch yet". pointer-events are blocked on the inner content so accidental clicks/drags can't interleave with the in-flight server work. */ .fr-list-syncing { position: relative; opacity: 0.65; transition: opacity 120ms ease-out; } .fr-list-syncing > [data-controller~="drag"] { pointer-events: none; } .fr-list-syncing::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 45deg, transparent 0 10px, var(--accent-bg) 10px 20px ); background-size: 200% 200%; animation: fr-list-syncing-shimmer 1.4s linear infinite; border-radius: inherit; mix-blend-mode: multiply; } html[data-theme="dark"] .fr-list-syncing::after { mix-blend-mode: screen; } @keyframes fr-list-syncing-shimmer { from { background-position: 0 0; } to { background-position: 28px 0; } } @media (prefers-reduced-motion: reduce) { .fr-list-syncing::after { animation: none; background: var(--accent-bg); opacity: 0.35; } } /* ── Synced move: flash on composite list nodes that moved as a result of a positional list reorder. Applied server-side via the Turbo Stream replace so the animation plays on render. */ .fr-synced-move { animation: synced-flash 600ms ease-out; } @keyframes synced-flash { 0% { background-color: var(--accent-bg); box-shadow: inset 3px 0 0 0 var(--accent); } 100% { background-color: transparent; box-shadow: none; } } /* ── Cross-list highlight: same player in other lists ───────── When a player row is grabbed, matching rows in other columns get an accent tint so the ranker can see where that player sits across lists. */ .fr-cross-highlight > .fr-row-content { background-color: var(--accent-bg); box-shadow: inset 3px 0 0 0 var(--accent); } /* ── Composite row dividers: stronger contrast against surface-3 ─ Default --border is near-invisible on composite column backgrounds, so bump to --border-hover for legible row separation. */ .bg-surface-3 .border-b { border-color: var(--border-hover); } /* ── Position row tints: faint background color by position ──── Uses the same CSS variables as position badges so badge color and row tint always match across themes. */ [data-nfl-position="QB"] > .fr-row-content { background-color: var(--pos-qb-tint); } [data-nfl-position="RB"] > .fr-row-content { background-color: var(--pos-rb-tint); } [data-nfl-position="WR"] > .fr-row-content { background-color: var(--pos-wr-tint); } [data-nfl-position="TE"] > .fr-row-content { background-color: var(--pos-te-tint); } [data-nfl-position="K"] > .fr-row-content { background-color: var(--pos-k-tint); } [data-nfl-position="DEF"] > .fr-row-content { background-color: var(--pos-def-tint); } /* ── Position number: smooth transition on renumber ────────── */ [data-position-number] { transition: opacity 100ms ease; } .fr-pos-updating { opacity: 0.4; } /* ── Prevent text selection during drag ─────────────────────── */ .drag-handle { user-select: none; -webkit-user-select: none; } .fr-sortable-fallback { user-select: none; -webkit-user-select: none; } /* ── Drag handle affordance ──────────────────────────────────── */ .drag-handle { transition: color 120ms ease; } .drag-handle:hover svg { color: var(--accent) !important; transform: scale(1.15); transition: transform 120ms ease, color 120ms ease; } .drag-handle:active svg { transform: scale(0.95); } /* ── Player spotlight: hover and pinned states ──────────────── Hover gives ephemeral highlight; pinned is stronger for sustained cross-list tracking. Applied to row wrapper, so use > .fr-row-content to match existing fr-cross-highlight pattern and layer over position tints. */ .fr-spotlight-hover > .fr-row-content { background-color: var(--accent-bg); box-shadow: inset 3px 0 0 0 var(--accent); } .fr-spotlight-pinned > .fr-row-content { background-color: var(--accent-bg); box-shadow: inset 3px 0 0 0 var(--accent), 0 0 0 1px var(--accent); } /* Jump landing marker. Spotlight's pinned state says "this player, everywhere"; this says "here, just now", and on a phone it is the only feedback a jump produces at all — spotlight is disabled there (see player_jump_controller). */ .fr-jump-flash > .fr-row-content { animation: fr-jump-flash 1.4s ease-out; } @keyframes fr-jump-flash { 0% { background: rgb(var(--accent-rgb) / .28); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .fr-jump-flash > .fr-row-content { animation: none; box-shadow: inset 0 0 0 2px rgb(var(--accent-rgb) / .5); } } /* ── Row-insert menu: anchor + destructive-preview tints ──────── Two distinct, non-overlapping cues driven by row_insert_menu_controller: .fr-row-insert-anchor — "the open menu belongs to this row." Added on open, removed on close. Neutral (not danger-coded): most menu items are non-destructive (Insert player/tier), so a red cue here would misdescribe them. Roughly the weight of the row's own hover state. .fr-row-insert-preview — "this row is inside the destructive item's reach." Added on hover/focus of Remove-player / Remove-and-below, from the exact element set _syncTrimItem's count is built from (see row_insert_menu_controller#_previewSet) — the highlight and the number cannot disagree because they read the same query. Danger- coded via rgb(var(--red-rgb) / alpha), the established local pattern (see .cmp-chip-dot--red below, and Tailwind's own .text-red) -- NOT var(--red)/var(--red-bg): those DO resolve (fyf_theme, the vendored brand gem, defines them, loaded app-wide via stylesheet_link_tag "fyf_theme"), but they exist nowhere in this app's OWN stylesheets, so a rename/removal upstream would silently drop this rule to transparent with no local signal -- var() does not fall back to the previous cascade winner when its token is unresolvable, the property just computes to initial/inherited. --red-rgb is mirrored locally (design_tokens.css, both themes), so it can't go stale that way. Same order of magnitude as the --accent-bg tints above rather than a shout across 280 rows. Both key off > .fr-row-content, the child rows and board cards share (see the cross-highlight/spotlight tints above) — one rule reaches both surfaces. A tier-break row has no .fr-row-content wrapper of its own (see tier_break_node_component.html.erb), hence the direct fallback. Board cards additionally get a full ring (not just this left edge) — see the .fr-board-card overrides near .fr-board-card:hover below, which have to win a specificity TIE against that hover rule's own accent ring, so they live right after it rather than here. */ .fr-row-insert-anchor > .fr-row-content, .fr-tier-break-row.fr-row-insert-anchor { background-color: var(--surface-3); box-shadow: inset 3px 0 0 0 var(--border-hover); } .fr-row-insert-preview > .fr-row-content { background-color: rgb(var(--red-rgb) / .16); box-shadow: inset 3px 0 0 0 rgb(var(--red-rgb)); } /* .fr-row-insert-tier-preview — "a tier break will land HERE", shown while the menu's Tier break item is hovered or focused. A boundary marker, not a row treatment: the break is inserted ABOVE this row, so the line sits on the row's top edge and reads as the seam between two rows rather than as a property of either one. Full row width and solid, deliberately unlike the dashed, name-column-indented line a real tier break renders as -- a preview's job is to be unmissable mid-scan, and matching the final render exactly would make it easy to miss and easy to mistake for a break that already exists. Accent rather than red: this is the one constructive item in a menu whose other two previews are destructive, and the colour is what separates them at a glance. .fr-row already sets `position: relative` and `contain: layout paint style`; the marker is inset within the row's own box so containment does not clip it. */ .fr-row-insert-tier-preview::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: rgb(var(--accent-rgb)); z-index: 2; pointer-events: none; } /* .fr-row-insert-pending — "the request for this row's removal is in flight." Applied at turbo:submit-start (row_insert_menu_controller #_applyPending) to the same element set the destructive-preview tint above targets, and left in place ALONGSIDE that tint (not swapped for it) until the Turbo Stream response removes the row or a failed submit clears it back off -- see #_onDestructiveSubmitEnd. The row keeps reading as "this is what's about to go" through the wait; it doesn't switch stories mid-flight. Deliberately NOT an animation. The Turbo Stream swap that lands when the request finishes is itself a large, synchronous DOM replace (a 160- player trim measures ~4.8MB) that blocks the main thread on its own -- a CSS animation running on these rows would freeze mid-cycle for however long that swap takes and read as a hang, exactly the "it just sits there" complaint this feature exists to fix. transition/animation are explicitly none, belt-and-braces, in case a future rule elsewhere ever starts transitioning opacity on .fr-row / .fr-board-card. Reduced opacity (not a filter or a different background) survives the swap cleanly: it's cheap, needs no keyframe, and applies to the whole element rather than just a background layer -- which is why no separate .fr-board-card override was needed the way .fr-row-insert-anchor/ -preview each need one above: opacity dims a board card's own ring (box-shadow) right along with its background and text, verified against a rendered card in both themes, so the same bare rule reads as legibly "inert" on a card as it does on a list row. */ .fr-row-insert-pending { opacity: 0.55; pointer-events: none; transition: none; animation: none; } /* ── ECR delta indicators ──────────────────────────────────── Hidden by default. Visible when fr-show-ecr is active on an ancestor. Content and color are set by JS after toggle/drag. */ .fr-ecr-delta { display: none; } .fr-show-ecr .fr-ecr-delta { display: inline; } /* ── Snapshot delta indicators ─────────────────────────────── Same pattern as ECR. Visible when fr-show-snapshot is active. */ .fr-snapshot-delta { display: none; } .fr-show-snapshot .fr-snapshot-delta { display: inline; } /* Board cards are narrow grid cells — let the vs-ECR / vs-snapshot pills size to their content instead of the fixed w-8 the toolbar applies for the roomier list row (two stacked pills would otherwise overrun the cell). */ .fr-board-card .fr-ecr-delta, .fr-board-card .fr-snapshot-delta { width: auto; min-width: 0; } /* The per-row "snap this player to the consensus rank" button that sits immediately right of the vs-ECR pill. It reveals and hides with the pill — it is meaningless when the comparator is off — and when there is nothing to reset (no consensus rank, or the row already sits on it) it goes `invisible` rather than `hidden`, so the reserve stays a constant width down the column and the header's matching spacer keeps its labels over their values. */ .fr-ecr-reset { display: none; } .fr-show-ecr .fr-ecr-reset { display: inline-flex; } /* Tiny single-letter source label inside delta pills (E = ECR, S = Snapshot). Same color as delta value via currentColor, dimmed so number stays primary. */ .fr-delta-label { font-size: 7px; font-weight: 600; opacity: 0.55; margin-right: 1px; letter-spacing: 0.02em; } /* ── Scrollbars: thin, translucent, non-intrusive ──────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.12); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-corner { background: transparent; } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.12) transparent; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.2); } html[data-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, 0.1) transparent; } /* ── Number input spinners: hide until hover ──────────────── */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { opacity: 0; transition: opacity 150ms ease; } input[type="number"]:hover::-webkit-inner-spin-button, input[type="number"]:hover::-webkit-outer-spin-button, input[type="number"]:focus::-webkit-inner-spin-button, input[type="number"]:focus::-webkit-outer-spin-button { opacity: 1; } /* Firefox: hide spinners entirely — value is editable via typing */ input[type="number"] { -moz-appearance: textfield; } /* ── Reduced motion ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .fr-sortable-ghost::after, .fr-sortable-chosen, .fr-sortable-fallback, .fr-drop-landed > .fr-row-content, .fr-synced-move, .fr-cross-highlight > .fr-row-content, .fr-spotlight-hover > .fr-row-content, .fr-spotlight-pinned > .fr-row-content, .fr-row-insert-anchor > .fr-row-content, .fr-tier-break-row.fr-row-insert-anchor, .fr-board-card.fr-row-insert-anchor, .fr-row-insert-preview > .fr-row-content, .fr-board-card.fr-row-insert-preview, [data-position-number], .drag-handle, .drag-handle svg { transition: none !important; animation: none !important; transform: none !important; } } /* ═══════════════════════════════════════════════════════════════ FlexRank Editor — Tag Dots + Popover ═══════════════════════════════════════════════════════════════ */ /* Cursor hint: the cluster carries a native title tooltip listing the tags. A styled CSS popover can't be used here — .fr-row sets `contain: layout paint style` (load-bearing for drag perf) which clips any absolute/fixed descendant painting outside the 28px row. The native title renders in the browser's top layer, immune to containment. */ .fr-tag-dots { cursor: help; } /* ═══════════════════════════════════════════════════════════════ FlexRank Editor — Preset Tab Switching ═══════════════════════════════════════════════════════════════ */ /* Columns revealed by a preset change get a brief enter animation so the swap reads as a deliberate transition, not a reload. */ @keyframes fr-column-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .fr-column-enter { animation: fr-column-enter 160ms ease-out; } @media (prefers-reduced-motion: reduce) { .fr-column-enter { animation: none; } } /* ═══════════════════════════════════════════════════════════════ FlexRank Editor — Row Insert Menu ═══════════════════════════════════════════════════════════════ */ /* Popover shell — layered shadow gives lift without overpowering the surrounding editor. */ .fr-row-insert-menu { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.45); } /* Icon column — fixed width so labels line up across items even when glyph shapes differ (plus vs dashed-line). Lights up to the accent color on parent menuitem hover/focus. */ .fr-row-insert-glyph { flex: none; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted, #8a92a0); opacity: 0.85; transition: color 120ms ease, opacity 120ms ease; } .fr-row-insert-item:hover .fr-row-insert-glyph, .fr-row-insert-item:focus .fr-row-insert-glyph { color: rgb(var(--accent-rgb)); opacity: 1; } /* Keyboard shortcut chip. Top inset highlight + slight bottom shadow + thicker bottom border give a faux-3D "physical key" affordance, so P / T read as keystrokes, not as labels. */ .fr-row-insert-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.12)), var(--color-surface-2, #1f232c); border: 1px solid var(--color-border, #353a45); border-bottom-width: 2px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 600; color: var(--color-text-muted, #c0c6d1); line-height: 1; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 0 rgba(0, 0, 0, 0.25); transition: color 120ms ease, border-color 120ms ease; } .fr-row-insert-item:hover .fr-row-insert-kbd, .fr-row-insert-item:focus .fr-row-insert-kbd { border-color: rgb(var(--accent-rgb)); color: var(--text); } /* Remove-player / trim items — destructive, so they get the danger color instead of the menu's default text color. */ .fr-row-insert-item--danger { color: rgb(var(--red-rgb)); } .fr-row-insert-count { font-size: 11px; font-variant-numeric: tabular-nums; } /* ── Comparison tray ─────────────────────────────────────────────── */ /* Right-docked side panel at lg+ (a flex-row sibling of the rankings scroller in .fr-editor-main, so rankings keep their own width + horizontal scroll). Below lg it detaches to a full-screen overlay. Hidden entirely when empty. */ .cmp-tray-wrap { /* --cmp-tray-w is set by cmp_resize_controller as a drag/keyboard-nudged width. It's a custom property, not a direct flex/flex-basis write, so every state override below (min/float/max/mobile-docked) -- none of which reference the var -- still wins outright via ordinary cascade specificity. See cmp_resize_controller.js for why that distinction matters (an inline flex-basis would otherwise leak into `min`). */ flex: 0 0 var(--cmp-tray-w, clamp(360px, 32vw, 520px)); display: flex; position: relative; /* containing block for .cmp-grip (position:absolute) */ min-height: 0; border-left: 1px solid var(--border); /* Frosted matte slab: a translucent elevated surface lifts the panel off the rankings beside it (docked) and frosts the columns behind it (max overlay). backdrop-filter only resolves over content that's actually behind the box, so it bites in the overlay state; docked still reads as a distinct matte tint over the shell. */ background: rgb(var(--surface-2-rgb) / .62); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: -10px 0 28px rgb(var(--bg-rgb) / .35); z-index: 45; } [data-compare-state="empty"] .cmp-tray-wrap { display: none; } /* Popped out to a separate window: hide the in-editor panel and surface a pill to bring it back. The frame stays loaded (just hidden) so bring-back is instant. */ [data-compare-state="popped"] .cmp-tray-wrap { display: none; } .cmp-popped-pill { display: none; } [data-compare-state="popped"] .cmp-popped-pill { display: inline-flex; align-items: center; gap: 6px; position: absolute; bottom: 16px; right: 16px; z-index: 46; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--accent); background: rgb(var(--surface-2-rgb) / .92); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 6px 18px rgb(var(--bg-rgb) / .4); cursor: pointer; } /* Below lg, `docked` already fills the screen identically to `max` (both position:absolute; inset:0 -- see the mobile override further down), so the head-bar full-screen toggle would be a visible no-op there. Float is a fixed 380x520 box with `resize:both`, impractical to grab with a finger; New window needs pointer precision too. Slim to rail and Dock stay -- minimize is the only way to collapse the full-screen panel without clearing the comparison, and there is no Esc on a phone. (A prior pass deleted this block believing it only relabeled the now-removed "slim »" text button; that relabel sub-rule really was dead, but this hiding logic was not -- restored.) */ /* Floating messenger-style box (in-page). Fixed, draggable by its header, resizable, collapsible. Default bottom-right; position persisted by cmp_float_controller (inline style overrides these defaults once moved). */ [data-compare-state="float"] .cmp-tray-wrap { position: fixed; bottom: 16px; right: 16px; top: auto; left: auto; flex: 0 0 auto; width: 380px; height: 520px; min-width: 300px; min-height: 120px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; resize: both; box-shadow: 0 18px 48px rgb(var(--bg-rgb) / .55); z-index: 60; } [data-compare-state="float"] .cmp-tray-head { cursor: move; } /* Collapsed: only the header bar shows. */ [data-compare-state="float"].cmp-float-collapsed .cmp-tray-wrap { height: auto !important; resize: none; } [data-compare-state="float"].cmp-float-collapsed .cmp-tray-scroll, [data-compare-state="float"].cmp-float-collapsed .cmp-take { display: none; } /* Dock only makes sense once you have left the dock. */ .cmp-menu button[data-action="compare-tray#dock"] { display: none; } [data-compare-state="float"] .cmp-menu button[data-action="compare-tray#dock"], [data-compare-state="min"] .cmp-menu button[data-action="compare-tray#dock"] { display: flex; } /* In the popped-out window the panel is a focused compare surface — the editor shell affordances (dock/float/window/maximize) don't apply, so hide the whole header action cluster there. Per-player ✕, season/scoring pills, and click-to-sort remain (they live in the table body, not .cmp-acts). */ .cmp-popout-body .cmp-acts { display: none; } /* Clear lives in .cmp-idstrip (identity strip), not .cmp-acts, so the rule above no longer catches it. It needs its own hide here: the popout page only mounts compare_popout_controller, which has no `clear` action, so Clear's single data-action="compare-tray#clear" (unlike the per-player ✕, which dual-binds compare-tray#remove + compare-popout#remove) would be a silent no-op button if left visible there. */ .cmp-popout-body .cmp-clear { display: none; } /* The popped-out window had no bounded height, so .cmp-tray-scroll never became a scroll container and the whole document scrolled instead — which also made the sticky identity strip a no-op there. Bounding the root hands scrolling back to the panel, matching the dock. Height goes on the root rather than turning into a flex column, which would relayout the toast container. */ .cmp-popout-body { margin: 0; } .cmp-popout-root { display: flex; flex-direction: column; min-height: 0; height: 100vh; height: 100dvh; } /* Minimized: slim the docked panel to a thin right-edge rail that stays out of the way; the rail click restores it (dock()). A desktop docked affordance — hidden < lg where the panel is already a full-screen overlay (nothing to slim). The wrap keeps its border + frosted bg, so the rail reads as a deliberate strip rather than a stub. */ [data-compare-state="min"] .cmp-tray-wrap { flex: 0 0 40px; } [data-compare-state="min"] .cmp-tray-head, [data-compare-state="min"] .cmp-tray-scroll, [data-compare-state="min"] .cmp-take { display: none; } .cmp-rail { display: none; } [data-compare-state="min"] .cmp-rail { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 12px 0; background: none; border: 0; cursor: pointer; } .cmp-rail-ico { font-size: 16px; line-height: 1; color: var(--accent); } .cmp-rail-ttl { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); transition: color 120ms ease; } .cmp-rail:hover .cmp-rail-ttl, .cmp-rail:focus-visible .cmp-rail-ttl { color: var(--accent); } /* The slim/minimize trigger has no meaning in the float box (it is not docked to an edge to slim toward) or popped out (that is a separate window), so it is hidden there. In `min` the whole head is hidden anyway; in `empty` the whole wrap is. `max` used to be on this list and no longer is. Full screen is exactly where "get this out of my way" is worth one click: the only other way out was the ⤢ toggle, which returns the panel to whatever size it came from rather than putting it away. Minimize takes it straight to the rail. This also retires a mobile-only rule that existed solely to undo this one in `max`. */ [data-compare-state="float"] .cmp-acts button[data-action="compare-tray#minimize"], [data-compare-state="popped"] .cmp-acts button[data-action="compare-tray#minimize"] { display: none; } /* Full-screen overlay deep-dive (desktop "maximize", and the only open mode on mobile). Covers the editor shell; sits above app chrome inside the shell. */ [data-compare-state="max"] .cmp-tray-wrap { position: absolute; inset: 0; flex-basis: auto; border-left: 0; z-index: 60; box-shadow: 0 0 0 100vmax rgba(0,0,0,.25); } /* The dock wrapper nests its content under a . A turbo-frame is an inline custom element with no layout box, so without this it can't carry the wrapper's bounded height down to .cmp-tray — .cmp-tray then grows to content height and .cmp-tray-scroll never scrolls (content spills past the viewport). Make the frame a height-filling flex column so the bounded height propagates and the inner scroll region works. */ turbo-frame#comparison-tray { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; } .cmp-tray { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; } .cmp-tray-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; } .cmp-tray-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); flex: none; } .cmp-ttl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; } .cmp-acts { display:flex; gap:2px; position:relative; } .cmp-acts button { background:none; border:0; color:var(--text-dim); cursor:pointer; width:26px; height:26px; border-radius:6px; display:grid; place-items:center; font-size:13px; line-height:1; margin:0; transition:background-color 120ms ease, color 120ms ease; } .cmp-acts button:hover { background:rgb(var(--text-rgb) / .07); color:var(--text); } .cmp-acts button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .cmp-menu { position:absolute; top:30px; right:0; z-index:20; min-width:158px; padding:4px; background:var(--surface-2); border:1px solid var(--border-hover); border-radius:8px; box-shadow:0 12px 30px rgb(var(--bg-rgb) / .7); } .cmp-menu[hidden] { display:none; } .cmp-menu button { display:flex; align-items:center; gap:9px; width:100%; height:auto; padding:7px 9px; font-size:11.5px; color:var(--text-muted); border-radius:5px; justify-content:flex-start; font-family:inherit; } .cmp-menu i { font-style:normal; width:14px; text-align:center; opacity:.75; } /* Breakpoint-swapped menu copy. display:contents rather than inline so the glyph and the label stay flex items of the button itself and keep its gap — wrapping them in a real box would collapse the two into one item and lose it. */ .cmp-lg-only { display:contents; } .cmp-sm-only { display:none; } /* 26px under a mouse, 44px under a finger — the chrome-wide touch floor, same mechanism as .fr-strip-menu-btn and .fr-puck-btn. `pointer: coarse`, not a width breakpoint: an iPad in landscape is exactly 1024px and would otherwise keep the pointer-precise sizes it has no precision for. Four things move together or the header breaks: - the buttons themselves; - .cmp-tray-head's vertical padding, which would push a 44px cluster into a 60px bar — on mobile this head sits atop a full-screen panel, and 60px of it is chrome the comparison isn't using. 4px lands the bar at 52px, in the range a touch nav bar normally occupies, and the title stays centred because the head is align-items:center, not padding-positioned; - .cmp-menu's `top`, which is measured off the button row it hangs under and would otherwise open 18px INSIDE the row that spawned it; - the menu's own rows, which are ~30px — a 44px button opening a menu you still can't hit is half a fix. .fr-strip-menu-btn/.fr-strip-menu-row set the same precedent in the editor strip. */ @media (pointer: coarse) { .cmp-tray-head { padding: 4px 12px; } .cmp-acts button { width: 44px; height: 44px; font-size: 15px; } .cmp-menu { top: 48px; } .cmp-menu button { min-height: 44px; } } /* The panel's left border, as a drag handle. Docked only -- float resizes via the CSS `resize` property, and min/max/popped have no user-set width. Desktop (lg+) only: below 1024px `docked` IS the mobile full-screen overlay (see the @media max-width:1023px docked override further down), where there's no board beside the panel to reflow and a touch on this 5px edge strip would only preventDefault() a touch that's likely an iOS back-swipe gesture and persist a bogus width for no visible effect. */ .cmp-grip { display:none; } @media (min-width: 1024px) { /* 11px of hit area for a 2px visual. A drag only needs the edge, but the grip also takes a click to slim, and a click wants a target you can hit without aiming. The bar stays 2px so the panel edge reads as an edge. */ [data-compare-state="docked"] .cmp-grip { display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:0; bottom:0; width:11px; z-index:5; cursor:col-resize; } } .cmp-grip::before { content:""; width:2px; height:26px; border-radius:2px; background:rgb(var(--text-rgb) / .16); transition:background-color 120ms ease, height 120ms ease; } /* Grows on approach: the taller bar is the affordance that says this edge is grabbable, without spending any resting-state ink to say it. */ .cmp-grip:hover::before, .cmp-grip:focus-visible::before { background:rgb(var(--text-rgb) / .38); height:40px; } .cmp-grip:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } /* Clear rides at the end of the identity strip -- a roster action beside the per-player ✕, not a window control. */ .cmp-clear { margin-left:auto; background:none; border:0; color:var(--text-dim); font:inherit; font-size:10.5px; cursor:pointer; padding:3px 7px; border-radius:5px; transition:background-color 120ms ease, color 120ms ease; } .cmp-clear:hover { background:rgb(var(--text-rgb) / .07); color:var(--text); } .cmp-clear:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } @media (prefers-reduced-motion: reduce) { .cmp-acts button, .cmp-grip::before, .cmp-clear { transition:none; } } /* Below lg there's no room for a side dock. `docked` fills the editor (and `max` already does at all widths). `min` is the exception: it must NOT cover the editor — it collapses to a slim full-width bottom bar so the ranking list stays visible and tappable above it. `float`/`popped` keep their own positioning. Scoping by state matters: a blanket `.cmp-tray-wrap { inset:0 }` also caught `min`, leaving the minimized rail floating over a blanked editor. */ /* ── Comparison tray — below lg ──────────────────────────────────────────── ONE mobile block, deliberately. This file used to carry two separate max-width:1023px blocks with ~200 lines of base rules between them, and three bugs came from writing an override into the earlier one, where it lost on source order to a base rule declared in between. A media query adds no specificity, so position is the only thing deciding. Every below-lg rule belongs here, after the base rules it overrides. */ @media (max-width: 1023px) { /* ── controls ─────────────────────────────────────────────────────────── */ /* Pop-outs are desktop affordances — float and new-window are impractical on a phone. The full-screen toggle goes too: `docked` already fills the screen here, so it would be a visible no-op. */ .cmp-acts button[data-action="compare-tray#expand"] { display: none; } .cmp-menu button[data-action="compare-tray#popFloat"], .cmp-menu button[data-action="compare-tray#popWindow"] { display: none; } /* The `max` escape hatch that used to live here is gone, and so is the reason for it: minimize is no longer stripped from `max` at any width, so there is nothing left to undo. It matters most on a phone — the full-screen toggle is hidden just above, there is no Esc key, and `max` is still reachable by rotating a tablet out of landscape — but it is the same control now, not a mobile special case. */ /* The panel collapses DOWN to a footer bar here, not sideways to a rail, so the control reads "— Minimize" rather than "» Slim to rail". */ .cmp-lg-only { display: none; } .cmp-sm-only { display: contents; } /* ── layout ───────────────────────────────────────────────────────────── */ [data-compare-state="docked"] .cmp-tray-wrap { position: absolute; inset: 0; flex-basis: auto; border-left: 0; z-index: 60; } /* Minimized → slim bottom bar, not a full-screen overlay. */ [data-compare-state="min"] .cmp-tray-wrap { position: absolute; inset: auto 0 0 0; height: auto; flex: none; border-left: 0; border-top: 1px solid var(--border); z-index: 60; } [data-compare-state="min"] .cmp-rail { flex-direction: row; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; } [data-compare-state="min"] .cmp-rail-ttl { writing-mode: horizontal-tb; transform: none; } [data-compare-state="min"] .cmp-rail-ico { transform: rotate(90deg); /* ‹ → up chevron: tap to expand upward */ } } /* Full-width, fixed layout so every stat/rank row's dot-plot track spans the whole tray. --cmp-w is no longer set (identity moved out of these tables into the .cmp-idstrip above), so max-width falls back to 100%; the var stays as a hook in case a future width constraint is reintroduced. */ table.cmp-t { width: 100%; max-width: var(--cmp-w, 100%); margin-inline: auto; table-layout: fixed; border-collapse: collapse; font-size: 11px; } /* The lazy stats frame spans the full scroll width so its inner table centres on the same axis as the ranks sibling table below it. It must keep a layout BOX (display:block, NOT contents): a display:contents frame has no box, so Turbo's loading="lazy" IntersectionObserver never fires and the stats never load. The ranks frame needs display:block for a different reason: is an inline custom element by default, so without it the ranks table renders inline and escapes the fixed-layout grid. */ turbo-frame#comparison-stats, turbo-frame#comparison-ranks { display: block; width: 100%; } /* While a frame is fetching its update, Turbo sets [busy]; dim it briefly so a targeted reload reads as "updating" instead of a hard content pop. */ turbo-frame#comparison-stats, turbo-frame#comparison-ranks { transition: opacity 120ms ease-out; } turbo-frame#comparison-stats[busy], turbo-frame#comparison-ranks[busy] { opacity: .55; } @media (prefers-reduced-motion: reduce) { turbo-frame#comparison-stats, turbo-frame#comparison-ranks { transition: none; } } /* Tile look: a vertical rule off the label gutter so the matrix reads as a side-by-side control panel rather than an airy table. The label gutter (first col) stays flat. */ .cmp-t td:not(.cmp-rowlbl):not([colspan]) { border-left: 1px solid var(--border); } .cmp-t th, .cmp-t td { padding: 4px 6px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; } .cmp-t thead th { text-align: center; background: var(--surface-2); position: sticky; top: 0; } /* Recedes until the row is hovered/focused — on a compact single line the ✕ was competing with the name it sits beside. */ .cmp-pl-x { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 9px; line-height: 1; padding: 2px; opacity: .45; transition: opacity .12s ease; } .cmp-id:hover .cmp-pl-x, .cmp-pl-x:focus-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .cmp-pl-x { transition: none; } } /* Group headers are separators, not signals -- neutral ink, no accent. */ .cmp-grp td { background:var(--surface-2); padding:0; border-bottom:1px solid var(--border); } .cmp-grp-btn { display:flex; align-items:center; gap:7px; width:100%; background:none; border:0; cursor:pointer; font:inherit; text-align:left; padding:7px 14px; font-size:10px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--text-dim); transition:color 120ms ease; } .cmp-grp-btn:hover { color:var(--text-muted); } .cmp-grp-btn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } .cmp-grp-chev { font-size:8px; display:inline-block; transition:transform 120ms ease; } [data-cmp-group][aria-expanded="true"] .cmp-grp-chev { transform:rotate(90deg); } /* Hide the group's data rows, never its own header row. */ [data-cmp-group][aria-expanded="false"] > tr:not(.cmp-grp) { display:none; } /* The player profile drawer reuses the group header above, but its groups are
s rather than s, so the collapse targets a body wrapper instead of rows. Same button, same chevron, same persisted state -- only the thing being hidden differs. */ [data-cmp-group][aria-expanded="false"] > .fr-sec-body { display:none; } /* The drawer's own 20px gutter, so the caret lines up with the content under it. Everything else is inherited from .cmp-grp-btn. */ .fr-sec-grp-btn { padding:8px 20px; background:var(--surface-2); border-bottom:1px solid var(--border-subtle); } .fr-sec-body { padding:12px 20px 16px; } @media (prefers-reduced-motion: reduce) { .cmp-grp-btn, .cmp-grp-chev { transition:none; } } /* Cross-column tracking: tint the whole row on hover so the eye can follow a single stat/rank across all player columns. Group-header rows are excluded. */ .cmp-t tbody tr:not(.cmp-grp):hover { background: rgb(var(--text-rgb) / .045); } .cmp-lazy { padding: 0; } .cmp-spinner { padding: 10px; text-align: center; color: var(--text-dim); font-size: 11px; } .cmp-row-btn.is-comparing { opacity: 1; color: var(--accent); } .cmp-row-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; } /* ── Comparison tray v2 — typed cells ── */ .cmp-legend-row td { padding: 0; background: transparent; } .cmp-legend { display: flex; align-items: center; gap: 7px; padding: 5px 12px; color: var(--text-dim, #6f6889); font-size: 10px; line-height: 1.3; } .cmp-legend-tick { flex: none; } .cmp-legend-tick { width: 26px; height: 7px; border-radius: 4px; background: var(--surface-2, #352e4d); position: relative; } .cmp-legend-tick::after { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 2px; background: var(--cmp-tick, #cfc7e6); opacity: .7; } .cmp-delta { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 9px; background: var(--surface-2); color: var(--text-dim); } .cmp-delta--up { background: rgba(43,163,69,.14); color: #8fc7a3; } .cmp-delta--down { background: rgba(239,83,80,.14); color: #d89a98; } .cmp-pips { display: inline-flex; gap: 2px; } .cmp-pips i { width: 7px; height: 10px; border-radius: 1px; background: var(--surface-2); display: inline-block; } .cmp-pips i.on { background: rgb(var(--text-muted-rgb) / .45); } .cmp-pips.is-best i.on { background: rgb(var(--green-rgb) / .6); } .cmp-tier { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--surface-2); color: var(--text-muted); } .cmp-tier--0 { background: rgba(167,139,250,.18); color: #c4b5fd; } .cmp-tier--1 { background: rgba(96,165,250,.16); color: #93c5fd; } .cmp-num { font-variant-numeric: tabular-nums; } .cmp-num.is-best { color: #8fc7a3; font-weight: 700; } /* Tag chips in the compact strip. The td is nowrap + centered, so the chip row is its own flex container to let a multi-tag cell wrap instead of running under its neighbour. Colour lives on the dot only; the label stays neutral. */ .cmp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; } .cmp-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: var(--surface-2); border: 1px solid rgb(var(--text-rgb) / .12); border-radius: 4px; padding: 1px 6px; font-size: 9px; font-weight: 600; color: var(--text-muted); } .cmp-chip-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; } .cmp-chip-dot--red { background: rgb(var(--red-rgb)); } .cmp-chip-dot--orange { background: rgb(var(--orange-rgb)); } .cmp-chip-dot--yellow { background: rgb(var(--yellow-rgb)); } .cmp-chip-dot--green { background: rgb(var(--green-rgb)); } .cmp-chip-dot--blue { background: rgb(var(--blue-rgb)); } .cmp-chip-dot--purple { background: rgb(var(--purple-rgb)); } .cmp-chip-dot--pink { background: rgb(var(--pink-rgb)); } .cmp-chip-dot--gray { background: rgb(var(--text-rgb) / .35); } .cmp-take { padding: 14px 16px 18px; border-top: 1px solid var(--border); } .cmp-take-hd { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-bottom: 12px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; } .cmp-take-hd::-webkit-details-marker { display: none; } .cmp-take-hd::before { content: "\25B8"; font-size: 9px; color: var(--text-dim); transition: transform .12s ease; } details.cmp-take[open] > .cmp-take-hd::before { transform: rotate(90deg); } details.cmp-take:not([open]) > .cmp-take-hd { margin-bottom: 0; } .cmp-take-cols { display: grid; gap: 18px; justify-content: center; } .cmp-take-gutter { /* aligns blurb columns under the table's player columns */ } .cmp-take-col { border-left: 2px solid var(--border); padding-left: 12px; } .cmp-take-col.is-leader { border-left-color: rgb(var(--green-rgb) / .65); } .cmp-take-col h4 { margin: 0 0 1px; font-size: 13px; color: var(--text); font-weight: 700; } .cmp-take-meta { font-size: 9px; color: var(--text-dim); margin-bottom: 8px; } .cmp-rail, .cmp-rail.is-empty { flex: none; } .cmp-take-col p { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 13.5px; line-height: 1.62; color: var(--text-muted); } /* ── Comparison tray — season/scoring controls header ── */ .cmp-controls { display: inline-flex; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; } /* Segmented radio-pill group — replaces the native