/* Custom Racecard Builder — modal + runtime cell styles */
/* My Card respects the user's column picks — never auto-hide on mobile.
The shared racecard-popup stylesheet uses .rm-hide-sm / .rm-hide-md
inside media queries to hide built-in columns on narrow viewports
(At-a-Glance, Ratings, etc. shed columns to fit). My Card must NOT
inherit that behaviour: the user explicitly chose each column for
their layout, so we honour the pick and let horizontal scroll
handle overflow. Higher-specificity than the media-query rule
(#my-card-content prefix) so this wins. */
#my-card-content .rm-table th.rm-hide-sm,
#my-card-content .rm-table td.rm-hide-sm,
#my-card-content .rm-table th.rm-hide-md,
#my-card-content .rm-table td.rm-hide-md,
#my-card-content .rcb-gated.rm-hide-sm,
#my-card-content .rcb-gated.rm-hide-md {
display: table-cell !important;
}
/* Name/text cells stay on one line. Needed because the flexWidth column
(RMP View) soaks up the table's spare width — without it the auto layout
squeezes the other text columns to their min-content width and horse /
trainer / jockey names wrap mid-name. Their min-content width with
nowrap IS the full name, so columns size to content and overflow goes
to horizontal scroll (My Card's design). Scoped to the OUTER table's
cells; nested .fl-table form-line cells use neither class. */
#my-card-content > table.rm-table td.rm-name-cell,
#my-card-content > table.rm-table td.rm-text-left {
white-space: nowrap;
}
/* Wrapping container scrolls BOTH axes internally — this is critical for
the sticky-header to work. Per the CSS spec, `overflow: visible` on one
axis paired with anything else on the other axis is invalid; the browser
silently clips overflow-y too. That means `overflow-x: auto` (which we
need for horizontal scroll under wide layouts) makes #my-card-content a
scroll container for BOTH axes. Sticky-header's `top: 0` then attaches
to #my-card-content's top, NOT the popup body. With no max-height the
container never actually scrolled vertically (content fits in natural
height) so the sticky-header never had anywhere to pin — it just sat at
the natural top of the container and slid up out of view with the body.
Fix: give #my-card-content a real max-height + overflow:auto so it
actually scrolls internally. Now sticky-header pins to the top of the
visible table area as the user scrolls within it; sticky-col continues
to pin to the left edge (same container, same behaviour). 220px is a
conservative estimate of the popup chrome above the table (site nav +
race banner + tab strip + layout banner). */
#my-card-content {
overflow: auto;
max-height: calc(100vh - 220px);
min-height: 280px;
/* Tailwind .p-4 puts 16px padding on all sides inside the border box.
overflow:auto clips at the BORDER box (not the padding box) — so
any 16px padding strip is INSIDE the visible clip region. Non-sticky
table cells scrolling through those strips were visible:
* padding-top → rows peeking ABOVE the sticky head (#834+#835 fix)
* padding-left → cells peeking to the LEFT of the first sticky col
(the bleed the user spotted on the dev server)
* padding-right → cells peeking to the right of the last column
* padding-bottom → rows peeking below the last visible row
The only safe fix is to kill ALL padding so the scroll viewport is
flush with the border edge on every side. Visual breathing room (if
any is needed) belongs on a CHILD wrapper that's INSIDE the scroll
container's clip, not on the container itself. */
padding: 0 !important;
}
/* ----------------------------------------------------------------------
Sticky header + freeze-first-N columns on the My Card rendered table.
----------------------------------------------------------------------
* Header (thead th) is sticky to top of the popup scroll container so
column labels stay visible as the user scrolls down the runner list.
This is always on — no setting; the page never had column labels you
could scroll past before, so it can only improve the experience.
* Frozen columns are tagged in the renderer with .rcb-sticky-col +
.rcb-sticky-col-{0|1|2} based on layout.config.options.freezeColumns
(clamped 0-3). Cumulative `left:` offsets are driven by CSS variables
--rcb-sticky-w-0 / -1 written by applyStickyWidths() once the rendered
widths are known (variable column widths from horse-name etc. can't
be hard-coded).
* Z-index ladder so the top-left corner cells (intersection of sticky
row + sticky col) sit above everything else when both axes scroll.
* Stripes + hover are honoured on the frozen cells too, otherwise the
left edge looks like a brighter band against the alternating body.
---------------------------------------------------------------------- */
/* Z-index ladder, revised after live testing:
non-sticky body cells 0 (default)
body sticky-col cells 3 (was 2 — bumped so they paint above any
thead row that scrolls horizontally
under them; the previous z2 lost to
thead z3 and the user saw cell content
leaking through the left edge)
non-sticky thead cells 4 (was 3)
thead sticky-col cells 5 (was 4 — top-left intersection, wins) */
/* CRITICAL: .rm-table base style uses border-collapse:collapse. position:
sticky on | / | inside a collapsed-border table has long-standing
rendering glitches in Chrome and Safari — cells render at the wrong
position during scroll, body rows can paint above sticky headers, and
horizontal scroll smears cell content past the sticky-col edge. The
Market Movers table (.mm-table) sidesteps this by declaring
`border-collapse:separate; border-spacing:0`. We mirror that here for
the My Card table — visual output is identical because every cell only
uses border-bottom, so there are no double-border artifacts. */
#my-card-content > table.rm-table {
border-collapse: separate;
border-spacing: 0;
}
/* CRITICAL — `> thead > tr > th` (not `thead th`) so this rule only matches
the OUTER .rm-table's header cells. Without the direct-child chain it
cascades into nested tables — most importantly the .fl-table inline
form expansion, whose th defaults to dark bg + white text. The earlier
`thead th` selector hijacked .fl-table's th background to #f9fafb
(light grey) while leaving the inherited white text in place → white
text on near-white background = invisible inline-form headings, exactly
what the user reported on My Card. */
#my-card-content > table.rm-table > thead > tr > th {
position: sticky;
top: 0;
background-color: #f9fafb;
z-index: 4;
box-shadow: inset 0 -1px 0 #e5e7eb;
}
/* The frozen-column treatment (position:sticky + the right-edge buffer
shadow) is gated on .rcb-frozen-active, which applyStickyWidths() adds
ONLY when the table actually overflows its container horizontally. When
everything fits there is no scrollbar, so freezing is pointless — and the
30px buffer would otherwise paint over the first non-frozen column (the
reported "OR hidden under the fixed columns even with no scrollbar" bug).
The plain sticky header (thead top) above stays unconditional. */
#my-card-content > table.rm-table.rcb-frozen-active .rcb-sticky-col {
position: sticky;
/* background-color (not background shorthand) so it cannot be
overridden by a stray background-image rule somewhere upstream;
the cell MUST be fully opaque or scrolled body content shows
through the frozen column. */
background-color: #ffffff;
z-index: 3;
/* TWO box-shadows:
1) `30px 0 0 0 #ffffff` — a SOLID 30px-wide buffer of opaque
background colour extending OUT TO THE RIGHT of the cell.
This masks any non-sticky cell that ends up overlapping the
sticky block during horizontal scroll. Without it, a cell
that's e.g. 50px wide can be partly behind the sticky col
(40px covered by sticky's own bg) and partly past it (10px
of bleed showing as a smear of partial content). The 30px
buffer covers the typical bleed of a badge / rating cell.
For inner sticky cols this shadow gets painted-over by the
next sticky col (same z-index, later in DOM) so only the
rightmost sticky col's shadow is actually visible.
2) `inset -1px 0 0 #e5e7eb` — the existing 1px right-edge
separator line so the user can see where the frozen block
ends. */
box-shadow: 30px 0 0 0 #ffffff, inset -1px 0 0 #e5e7eb;
}
#my-card-content > table.rm-table.rcb-frozen-active .rcb-sticky-col-0 { left: 0; }
#my-card-content > table.rm-table.rcb-frozen-active .rcb-sticky-col-1 { left: var(--rcb-sticky-w-0, 0px); }
#my-card-content > table.rm-table.rcb-frozen-active .rcb-sticky-col-2 { left: calc(var(--rcb-sticky-w-0, 0px) + var(--rcb-sticky-w-1, 0px)); }
/* Header cell of a sticky column = the intersection cell. Highest in the
ladder so it wins against both body sticky-col (z3) and non-sticky
thead (z4) when scrolling. The right-edge buffer shadow uses the
header's grey background colour to match. */
#my-card-content > table.rm-table.rcb-frozen-active > thead > tr > th.rcb-sticky-col {
background-color: #f9fafb;
z-index: 5;
box-shadow: 30px 0 0 0 #f9fafb, inset 0 -1px 0 #e5e7eb;
}
/* Preserve stripes + hover on the sticky column cells. The buffer shadow
colour must MATCH the row's actual background — otherwise the masked
region reads as a brighter or darker band against the row.
.mc-even is stamped by the renderer from the RUNNER index (not nth-child)
so the zebra survives the interleaved full-width note rows. */
#my-card-content > table.rm-table.rm-stripe.rcb-frozen-active tbody tr.mc-even .rcb-sticky-col {
background-color: #f9fafb;
box-shadow: 30px 0 0 0 #f9fafb, inset -1px 0 0 #e5e7eb;
}
#my-card-content > table.rm-table.rcb-frozen-active tbody tr:hover .rcb-sticky-col {
background-color: #fef3c7;
box-shadow: 30px 0 0 0 #fef3c7, inset -1px 0 0 #e5e7eb;
}
/* ----------------------------------------------------------------------
Buffer-at-rest guard. The 30px right-edge buffer in the rules above masks
non-sticky cells sliding UNDER the frozen block during horizontal scroll.
But box-shadow paints unconditionally, so at scroll position 0 (a wide
layout that overflows but hasn't been scrolled) it covers ~30px of the
FIRST non-frozen column (e.g. OR). applyStickyWidths() adds
.rcb-frozen-scrolled the moment scrollLeft > 0; until then we suppress the
buffer (keeping only the 1px separator), so the first data column is never
clipped at rest. !important + :not() so this wins over the default, stripe
and hover buffer rules above without having to re-state each one. The
header keeps its bottom separator (inset 0 -1px); body cells keep their
right separator (inset -1px 0). */
#my-card-content > table.rm-table.rcb-frozen-active:not(.rcb-frozen-scrolled) tbody .rcb-sticky-col {
box-shadow: inset -1px 0 0 #e5e7eb !important;
}
#my-card-content > table.rm-table.rcb-frozen-active:not(.rcb-frozen-scrolled) > thead > tr > th.rcb-sticky-col {
box-shadow: inset 0 -1px 0 #e5e7eb !important;
}
/* Blurred + locked cell rendered when a saved layout includes a column
whose source requires a sub-tier the current user doesn't have
(e.g. an Enterprise user without Platinum viewing a Predicted Style
column on a layout shared from a Platinum user).
Visible enough to convey "real data lives here", obviously locked. */
.rcb-gated {
position: relative;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.04), rgba(139, 92, 246, 0.08));
transition: background 0.15s;
}
.rcb-gated:hover {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.15));
}
.rcb-gated .rcb-gated-content {
display: inline-block;
filter: blur(4px);
color: #8b5cf6;
font-weight: 700;
letter-spacing: 1px;
user-select: none;
}
.rcb-gated .rcb-gated-lock {
width: 11px;
height: 11px;
color: #8b5cf6;
margin-left: 4px;
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
}
/* Palette item indicator — a small lock chip on columns whose source the
current user doesn't have access to. The user can still ADD the column
to their layout (so the layout can be shared with a higher-tier user
later); the live cells render blurred. */
.rcb-palette-item.rcb-palette-gated .rcb-palette-item-label::after {
content: ' 🔒';
font-size: 10px;
color: #8b5cf6;
}
.rcb-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.rcb-modal {
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
width: 100%;
max-width: 1240px;
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.rcb-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid #e5e7eb;
background: linear-gradient(135deg, #ede9fe, #f5f3ff);
}
.rcb-header h2 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #5b21b6;
}
.rcb-header .rcb-subtitle {
font-size: 12px;
color: #6b7280;
margin-left: 12px;
}
.rcb-close-btn {
background: none;
border: none;
font-size: 22px;
line-height: 1;
color: #6b7280;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.rcb-close-btn:hover { background: rgba(0,0,0,0.05); color: #111827; }
.rcb-presets {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #fafafa;
border-bottom: 1px solid #e5e7eb;
flex-wrap: wrap;
}
.rcb-presets-label {
font-size: 11px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
margin-right: 4px;
}
.rcb-preset-btn {
border: 1px solid #d1d5db;
background: #fff;
color: #374151;
font-size: 12px;
font-weight: 500;
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
}
.rcb-preset-btn:hover {
border-color: #8b5cf6;
color: #5b21b6;
background: #f5f3ff;
}
.rcb-body {
display: flex;
flex: 1 1 auto;
min-height: 0;
}
/* Mobile body tab strip. Hidden on desktop — when both panes are visible
side-by-side the strip is meaningless. Shown + styled in the
@media (max-width: 768px) block below. */
.rcb-mobile-tabs { display: none; }
/* Confirmation flash applied to the "My layout" tab when a chip lands in
the (currently-hidden) canvas after the user tapped + on a palette
item. Single pulse so the action has a visible receipt. */
@keyframes rcb-tab-flash {
0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55); }
50% { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
.rcb-mobile-tab.rcb-flash { animation: rcb-tab-flash 650ms ease-out; }
.rcb-palette {
width: 320px;
flex: 0 0 320px;
border-right: 1px solid #e5e7eb;
overflow-y: auto;
background: #fafafa;
}
.rcb-canvas-wrap {
flex: 1 1 auto;
overflow-y: auto;
padding: 16px;
background: #fff;
}
.rcb-palette-search {
position: sticky;
top: 0;
background: #fafafa;
padding: 10px;
border-bottom: 1px solid #e5e7eb;
z-index: 1;
}
.rcb-palette-search input {
width: 100%;
padding: 6px 10px;
font-size: 13px;
border: 1px solid #d1d5db;
border-radius: 6px;
outline: none;
}
.rcb-palette-search input:focus { border-color: #8b5cf6; }
.rcb-palette-empty {
padding: 24px 14px;
font-size: 13px;
color: #6b7280;
text-align: center;
}
.rcb-source-group {
padding: 8px 10px 0;
}
.rcb-source-header {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: #6b7280;
letter-spacing: 0.5px;
margin: 8px 4px 4px;
display: flex;
align-items: center;
gap: 6px;
}
.rcb-source-header .rcb-source-chip {
display: inline-block;
padding: 1px 5px;
border-radius: 3px;
font-size: 9px;
color: #fff;
font-weight: 700;
}
.rcb-source-main .rcb-source-chip { background: #6b7280; }
/* The chip base sets white text but no background, so a group without a rule
here renders an invisible chip. Form Stats had been missing one since it was
added to the palette; My Ratings and Patterns are new to the palette. */
.rcb-source-runnerStats .rcb-source-chip { background: #0d9488; } /* teal — the SystemRunnerStats precompute group */
.rcb-source-myRatings .rcb-source-chip { background: #ca8a04; } /* gold — matches the gold "My" rating column */
.rcb-source-patterns .rcb-source-chip { background: #7c3aed; } /* purple — matches the pattern badge */
.rcb-source-ratingsAnalysis .rcb-source-chip { background: #8b5cf6; }
.rcb-source-futureForm .rcb-source-chip { background: #0ea5e9; }
.rcb-source-drawPace .rcb-source-chip { background: #059669; }
.rcb-source-tripPredictor .rcb-source-chip { background: #d97706; }
.rcb-source-predictedStyles .rcb-source-chip { background: #db2777; }
.rcb-source-collateral .rcb-source-chip { background: #475569; }
.rcb-source-handicap .rcb-source-chip { background: #d97706; } /* amber — matches the Handicap tab button styling */
.rcb-source-marketMovers .rcb-source-chip { background: #4f46e5; } /* indigo — matches the Market Movers tab button styling */
.rcb-palette-item {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 7px 10px;
margin-bottom: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.1s;
}
.rcb-palette-item:hover {
border-color: #8b5cf6;
background: #f5f3ff;
}
.rcb-palette-item.in-canvas {
opacity: 0.45;
cursor: default;
background: #f3f4f6;
}
.rcb-palette-item.in-canvas:hover {
border-color: #e5e7eb;
background: #f3f4f6;
}
.rcb-palette-item-label {
font-weight: 600;
color: #111827;
}
.rcb-palette-item-tip {
color: #6b7280;
font-size: 10px;
margin-top: 2px;
}
.rcb-palette-item-add {
color: #8b5cf6;
font-weight: 700;
font-size: 16px;
line-height: 1;
}
.rcb-canvas-title {
font-size: 13px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}
.rcb-canvas-title .rcb-canvas-count {
font-size: 11px;
color: #6b7280;
font-weight: 500;
}
.rcb-canvas {
min-height: 220px;
border: 2px dashed #d1d5db;
border-radius: 8px;
padding: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-content: flex-start;
background: #fafafa;
}
.rcb-canvas.empty::before {
content: 'Drag columns here from the palette, or click "+" on a column to add it.';
color: #9ca3af;
font-size: 13px;
padding: 40px 16px;
text-align: center;
width: 100%;
}
.rcb-canvas-item {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid #8b5cf6;
border-radius: 6px;
padding: 5px 8px;
font-size: 12px;
font-weight: 600;
color: #5b21b6;
cursor: grab;
user-select: none;
}
.rcb-canvas-item:active { cursor: grabbing; }
.rcb-canvas-item.dragging { opacity: 0.4; }
.rcb-canvas-item.drop-target-before { box-shadow: -3px 0 0 #f59e0b; }
.rcb-canvas-item.drop-target-after { box-shadow: 3px 0 0 #f59e0b; }
.rcb-canvas-item-handle {
color: #9ca3af;
cursor: grab;
font-size: 12px;
}
.rcb-canvas-item-remove {
background: none;
border: none;
color: #ef4444;
font-size: 14px;
cursor: pointer;
padding: 0 2px;
line-height: 1;
}
.rcb-canvas-item-remove:hover { color: #b91c1c; }
.rcb-options {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e5e7eb;
}
.rcb-options-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
font-size: 13px;
color: #374151;
flex-wrap: wrap;
}
.rcb-options-row label {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.rcb-options-row input[type="checkbox"] { cursor: pointer; }
.rcb-freeze-select {
margin: 0 4px;
padding: 3px 6px;
border: 1px solid #d1d5db;
border-radius: 4px;
background: #fff;
font-size: 13px;
cursor: pointer;
}
.rcb-freeze-select:focus { border-color: #8b5cf6; outline: none; }
.rcb-options-row .rcb-options-label {
font-weight: 600;
color: #6b7280;
font-size: 11px;
text-transform: uppercase;
min-width: 100px;
}
.rcb-footer {
border-top: 1px solid #e5e7eb;
padding: 12px 20px;
background: #fafafa;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* Footer "Form line: [N] last runs" wrapper — keeps the three pieces grouped
so when the footer wraps on a narrow viewport they stay on one line. */
.rcb-fl-group {
display: inline-flex;
align-items: center;
gap: 8px;
}
.rcb-fl-suffix {
font-size: 12px;
color: #6b7280;
}
/* Canvas-chip reorder arrows. Rendered ALWAYS in the markup so JS doesn't
have to watch viewport changes, but hidden on desktop where HTML5
drag-and-drop is the primary reorder path. Shown on touch-sized
viewports via the @media block at the bottom of this file. */
.rcb-canvas-item-arrows {
display: none;
gap: 4px;
flex: 0 0 auto;
}
.rcb-canvas-item-arrow {
background: rgba(139, 92, 246, 0.1);
color: #5b21b6;
border: none;
border-radius: 4px;
padding: 6px 10px;
font-size: 14px;
cursor: pointer;
line-height: 1;
min-width: 32px;
min-height: 32px;
}
.rcb-canvas-item-arrow:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.rcb-canvas-item-arrow:not(:disabled):hover {
background: rgba(139, 92, 246, 0.2);
}
.rcb-canvas-item-label {
/* The chip label that was previously an unclassed . Class added so
mobile CSS can target it for flex-grow. */
}
.rcb-name-input {
flex: 1 1 240px;
min-width: 200px;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
}
.rcb-name-input:focus { border-color: #8b5cf6; outline: none; }
.rcb-fl-input {
width: 70px;
padding: 8px 8px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 13px;
text-align: center;
}
.rcb-fl-label {
font-size: 11px;
color: #6b7280;
font-weight: 600;
text-transform: uppercase;
}
.rcb-layout-switch {
padding: 8px 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 13px;
background: #fff;
color: #374151;
max-width: 200px;
cursor: pointer;
font-weight: 500;
}
.rcb-layout-switch:focus { border-color: #8b5cf6; outline: none; }
.rcb-layout-switch:hover { border-color: #9ca3af; }
.rcb-btn {
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
border: 1px solid transparent;
}
.rcb-btn-primary {
background: #8b5cf6;
color: #fff;
border-color: #8b5cf6;
}
.rcb-btn-primary:hover { background: #7c3aed; }
.rcb-btn-secondary {
background: #fff;
color: #6b7280;
border-color: #d1d5db;
}
.rcb-btn-secondary:hover { background: #f3f4f6; }
.rcb-btn-danger {
background: #fee2e2;
color: #b91c1c;
border-color: #fca5a5;
}
.rcb-btn-danger:hover { background: #fecaca; }
.rcb-status {
font-size: 12px;
color: #6b7280;
margin-right: auto;
}
.rcb-status.error { color: #b91c1c; }
.rcb-status.success { color: #047857; }
.rcb-customise-btn {
background: linear-gradient(135deg, #8b5cf6, #6366f1);
color: #fff;
border: none;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
cursor: pointer;
margin-left: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.rcb-customise-btn:hover { filter: brightness(1.1); }
.rcb-customise-btn svg { width: 12px; height: 12px; }
/* ======================================================================
MOBILE — viewport <= 768px
----------------------------------------------------------------------
The desktop builder is a two-pane modal (palette left, canvas right)
inside a centred 1240px-max box. On a phone that collapses to a
useless thin column. The mobile layout:
* overlay padding removed → modal goes edge-to-edge full screen
* header wraps: title row 1, action buttons row 2
* presets row scrolls horizontally instead of wrapping
* body flips to vertical stack: palette top (≤40vh), canvas bottom
* canvas chips render as a vertical list with explicit ◀ / ▶ arrow
buttons (HTML5 drag-and-drop is unreliable on touch)
* footer wraps: dropdown / name input / form-line each on own row,
Save/Cancel/etc become 2-per-row 44px touch targets
====================================================================== */
@media (max-width: 768px) {
/* Full-screen overlay */
.rcb-overlay {
padding: 0;
align-items: stretch;
}
.rcb-modal {
width: 100%;
max-width: none;
height: 100vh;
max-height: 100vh;
/* dvh: account for iOS Safari's collapsible address bar so the
footer stays above the bottom system UI. Falls back to vh on
older browsers (the line above wins for those). */
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
/* ----------------------------------------------------------------
MOBILE LAYOUT — fundamentally different from desktop.
Desktop has palette+canvas side by side, presets at top, and a
fat footer holding name input, layout switch, form-line, defaults
checkboxes and 4 buttons. On a 390x844 phone that approach left
maybe 200px for the canvas — completely unusable.
Mobile renders three independent panes inside .rcb-body, picked
by the .rcb-mobile-view-* class:
* palette — search + full column list (Add tab)
* canvas — chip list, or preset cards if empty (Layout tab)
* settings — name, form-line, defaults, freeze, secondary
actions (Save as new / Delete / Export / Import).
Lives behind the third Settings tab (NEW vs the
previous 2-tab approach) so the footer can collapse
to just Cancel + Save changes.
Header drops the "Editing: …" subtitle + Export/Import buttons
(Export/Import move into Settings tab). Top presets row hidden
(presets surface as cards in the canvas empty state instead).
---------------------------------------------------------------- */
/* Header collapses to a single ~50px row: title + × close */
.rcb-header {
padding: 12px 14px;
gap: 8px;
align-items: center;
}
.rcb-header > div:first-child { flex: 1 1 auto; min-width: 0; }
.rcb-header h2 { font-size: 16px; }
.rcb-header .rcb-subtitle { display: none; }
.rcb-close-btn {
font-size: 26px;
padding: 4px 12px;
flex: 0 0 auto;
}
/* Top presets strip is hidden — presets render as cards in the
canvas empty state instead (see .rcb-mobile-empty below). */
.rcb-presets { display: none; }
/* Body — vertical stack, panes selected by .rcb-mobile-view-* class */
.rcb-body {
flex-direction: column;
min-height: 0;
}
.rcb-mobile-pane { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.rcb-body.rcb-mobile-view-palette .rcb-mobile-pane-palette { display: flex; flex-direction: column; animation: rcb-pane-in 220ms ease-out; }
.rcb-body.rcb-mobile-view-canvas .rcb-mobile-pane-canvas { display: block; padding: 12px; animation: rcb-pane-in 220ms ease-out; }
.rcb-body.rcb-mobile-view-settings .rcb-mobile-pane-settings { display: block; padding: 14px; background: #fafafa; animation: rcb-pane-in 220ms ease-out; }
/* Slide+fade as the active pane appears. Subtle (24px / 220ms) so it
feels responsive instead of jumpy — and short enough not to fight
with the user wanting to immediately tap something on the new pane. */
@keyframes rcb-pane-in {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
/* Tab pill animates the active-state shift too */
.rcb-mobile-tab { transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
/* Defensive — kill the desktop dimensions on the palette pane */
.rcb-mobile-pane.rcb-palette { width: 100%; max-height: none; border-right: none; }
/* Three-pill tab strip at top of body */
.rcb-mobile-tabs {
display: flex;
gap: 6px;
padding: 8px 12px;
background: #fafafa;
border-bottom: 1px solid #e5e7eb;
position: sticky;
top: 0;
z-index: 4;
flex: 0 0 auto;
}
.rcb-mobile-tab {
flex: 1 1 33%;
padding: 10px 8px;
border: 1px solid #d1d5db;
background: #fff;
color: #6b7280;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
min-height: 44px;
}
.rcb-mobile-tab.is-active {
background: #8b5cf6;
color: #fff;
border-color: #8b5cf6;
}
.rcb-mobile-tab-count { opacity: 0.85; font-weight: 500; margin-left: 4px; }
/* Palette — bigger touch targets */
.rcb-palette-search { padding: 8px 10px; }
.rcb-palette-search input { padding: 10px 12px; font-size: 14px; }
.rcb-palette-item { padding: 11px 12px; font-size: 13px; min-height: 44px; }
.rcb-palette-item-label { font-size: 13px; }
.rcb-palette-item-tip { font-size: 11px; }
.rcb-palette-item-add { font-size: 22px; min-width: 28px; text-align: center; }
/* Canvas chips stack vertically with arrow reorder */
.rcb-canvas {
flex-direction: column;
flex-wrap: nowrap;
gap: 6px;
min-height: 140px;
padding: 6px;
}
.rcb-canvas.empty::before { font-size: 12px; padding: 30px 12px; }
.rcb-canvas-item {
width: 100%;
padding: 10px 12px;
font-size: 13px;
gap: 8px;
min-height: 44px;
-webkit-user-drag: none;
touch-action: manipulation;
cursor: default;
}
/* Drag handle stays visible on mobile — touch-drag is wired via
pointer events (see racecard-builder.js bindCanvasTouchReorder).
The arrows remain as a backup discovery path. */
.rcb-canvas-item-handle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
min-height: 36px;
color: #8b5cf6;
font-size: 18px;
cursor: grab;
/* CRITICAL: stop browser scroll/zoom while finger is on the handle
so dragstart-equivalent pointerdown actually fires. */
touch-action: none;
user-select: none;
}
.rcb-canvas-item-handle:active { cursor: grabbing; }
.rcb-canvas-item-arrows { display: inline-flex; }
.rcb-canvas-item-label { flex: 1 1 auto; text-align: left; padding: 0 4px; }
.rcb-canvas-item-remove {
font-size: 20px;
padding: 6px 10px;
min-width: 36px;
min-height: 36px;
}
/* Touch-drag visual states */
.rcb-canvas-item.rcb-dragging-touch {
opacity: 0.65;
background: #faf5ff;
border-color: #7c3aed;
box-shadow: 0 6px 14px rgba(124, 58, 237, 0.25);
transform: scale(1.01);
}
.rcb-canvas-item.rcb-drop-target-before {
box-shadow: inset 0 3px 0 #f59e0b;
}
.rcb-canvas-item.rcb-drop-target-after {
box-shadow: inset 0 -3px 0 #f59e0b;
}
/* Canvas empty state — preset picker cards */
.rcb-mobile-empty {
padding: 20px 8px;
}
.rcb-mobile-empty-title {
margin: 0 0 6px 0;
font-size: 18px;
font-weight: 700;
color: #1f2937;
text-align: center;
}
.rcb-mobile-empty-sub {
margin: 0 0 18px 0;
font-size: 13px;
color: #6b7280;
text-align: center;
}
.rcb-mobile-empty-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
.rcb-mobile-empty-card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
text-align: left;
padding: 14px 16px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.rcb-mobile-empty-card:hover, .rcb-mobile-empty-card:active {
border-color: #8b5cf6;
background: #faf5ff;
}
.rcb-mobile-empty-card-name {
font-size: 15px;
font-weight: 700;
color: #5b21b6;
}
.rcb-mobile-empty-card-tip {
font-size: 12px;
color: #6b7280;
line-height: 1.4;
}
.rcb-mobile-empty-or {
margin: 16px 0 8px 0;
font-size: 11px;
color: #9ca3af;
text-transform: uppercase;
letter-spacing: 0.08em;
text-align: center;
}
.rcb-mobile-empty-link {
display: block;
width: 100%;
padding: 12px;
background: none;
border: 1px dashed #d1d5db;
border-radius: 8px;
color: #5b21b6;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
/* Settings pane — sections of labelled controls */
.rcb-settings {
display: flex;
flex-direction: column;
gap: 18px;
}
.rcb-settings-section {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
.rcb-settings-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
}
.rcb-settings-input,
.rcb-settings .rcb-layout-switch,
.rcb-settings .rcb-name-input,
.rcb-settings .rcb-fl-group {
width: 100%;
max-width: none;
/* CRITICAL: inside a flex-column section, the base rule
`flex: 1 1 240px` on .rcb-name-input would tell it to grow
vertically and fill the column — which renders the input as a
massive 300px-tall box ("LAYOUT NAME is massive!"). Pin it back
to natural height. Same for the other inputs the user can edit
in this pane. */
flex: 0 0 auto;
height: auto;
}
.rcb-settings .rcb-name-input,
.rcb-settings .rcb-fl-input {
padding: 12px;
font-size: 14px;
min-height: 44px;
}
.rcb-settings .rcb-options { margin-top: 0; padding-top: 0; border-top: none; }
.rcb-settings .rcb-options-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-bottom: 12px;
}
.rcb-settings .rcb-options-row:last-child { margin-bottom: 0; }
.rcb-settings .rcb-options-row .rcb-options-label {
font-size: 11px;
min-width: 0;
flex: 0 0 auto;
margin-bottom: 2px;
}
.rcb-settings .rcb-options-row label {
padding: 8px 4px;
font-size: 14px;
}
.rcb-settings-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.rcb-settings-actions .rcb-btn {
width: 100%;
padding: 12px;
font-size: 14px;
min-height: 44px;
flex: 0 0 auto;
}
.rcb-settings-status {
margin: 0;
padding: 8px;
text-align: center;
font-size: 12px;
color: #6b7280;
}
.rcb-settings-status.error { color: #b91c1c; }
.rcb-settings-status.success { color: #047857; }
/* Slim mobile footer — just Cancel + Save (Save is primary, full pill) */
.rcb-footer.rcb-footer-mobile {
padding: 10px 12px;
gap: 8px;
flex-wrap: nowrap;
}
.rcb-footer.rcb-footer-mobile .rcb-btn {
flex: 1 1 50%;
padding: 14px;
font-size: 15px;
font-weight: 700;
min-height: 48px;
}
.rcb-footer.rcb-footer-mobile .rcb-btn-primary { flex: 2 1 66%; }
}
/* Even narrower — sub-400px phones. Tighten chrome further. */
@media (max-width: 400px) {
.rcb-header { padding: 10px 12px; }
.rcb-header h2 { font-size: 15px; }
.rcb-presets { padding: 6px 10px; }
.rcb-canvas-wrap { padding: 10px; }
.rcb-palette-item { padding: 10px; }
.rcb-footer { padding: 8px 10px; }
}
/* ----------------------------------------------------------------------
My Card entry cells (My Rating / My Odds) + the My Notes line.
The note lives in a full-width colspan row under its runner; the
td-level max-width:0 is the standard table-ellipsis trick — the cell
takes the width of the spanned columns and a long note can NEVER
widen the table, it just ellipsises at the right edge. */
#my-card-content .mc-entry-cell { white-space: nowrap; }
#my-card-content .mc-entry-input {
width: 56px; font-size: 12px; text-align: center;
border: 1px solid #d1d5db; border-radius: 4px; padding: 1px 3px;
background: #fff; color: #111827; font-family: inherit;
}
#my-card-content .mc-entry-input:focus { outline: 2px solid #b45309; outline-offset: 1px; }
#my-card-content .mc-entry-input:disabled { background: #f3f4f6; color: #9ca3af; }
#my-card-content .mc-save-status { font-size: 11px; margin-left: 3px; display: inline-block; min-width: 10px; }
#my-card-content .mc-save-status.saved { color: #15803d; }
#my-card-content .mc-save-status.saving { color: #94a3b8; }
#my-card-content .mc-save-status.error { color: #b91c1c; cursor: pointer; }
#my-card-content .mc-note-add { opacity: .55; cursor: pointer; margin-left: 5px; font-style: normal; }
#my-card-content .mc-note-colcell { cursor: text; }
#my-card-content .mc-note-colcell-empty { color: #9ca3af; font-style: italic; font-size: 11px; }
#my-card-content .mc-note-colcell-empty:hover { color: #b45309; }
/* Live overround chip under the My Odds header (mcUpdateOddsBook) */
#my-card-content > table.rm-table > thead > tr > th .mc-odds-book { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #6b7280; margin-top: 1px; white-space: nowrap; }
#my-card-content .mc-odds-book.partial { color: #9ca3af; }
#my-card-content .mc-odds-book.under { color: #b45309; }
/* Book tick + reserve badge */
#my-card-content .mc-book-tick { width: 15px; height: 15px; accent-color: #1d4ed8; cursor: pointer; vertical-align: middle; }
#my-card-content .mc-book-nr { color: #9ca3af; }
#my-card-content .mc-reserve-badge { display: inline-block; font-size: 9px; font-weight: 800; line-height: 1; padding: 1px 3px; margin-right: 3px; border-radius: 3px; background: #fef3c7; color: #92400e; vertical-align: 1px; }
/* My Notes scope tag on the note line (discipline notes only; General is plain)
+ the scope chooser inside the in-place editor */
#my-card-content .mc-note-scope { display: inline-block; font-size: 9px; font-weight: 700; font-style: normal; letter-spacing: .03em; text-transform: uppercase; color: #1d4ed8; background: #dbeafe; border-radius: 3px; padding: 0 4px; margin-right: 6px; vertical-align: 1px; }
#my-card-content .mc-note-scope-pick { display: inline-flex; gap: 4px; margin: 3px 0 0; font-style: normal; }
#my-card-content .mc-note-scope-pick button { font-size: 10px; padding: 1px 7px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; color: #374151; cursor: pointer; }
#my-card-content .mc-note-scope-pick button.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
#my-card-content .mc-note-add:hover { opacity: 1; }
#my-card-content > table.rm-table td.mc-note-cell {
max-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 11px; font-style: italic; color: #6b7280;
text-align: left; cursor: text;
padding-top: 0; padding-bottom: 3px;
border-top: none;
}
#my-card-content > table.rm-table tr.mc-note-row td.mc-note-cell:hover { color: #374151; }
#my-card-content .mc-note-cell.mc-note-editing { white-space: normal; overflow: visible; }
#my-card-content .mc-note-cell textarea.mc-note-edit {
width: 100%; max-width: 640px; font-size: 12px; font-style: normal;
border: 1px solid #b45309; border-radius: 4px; padding: 3px 6px;
color: #111827; background: #fff; resize: none; display: block;
font-family: inherit;
}
#my-card-content .mc-note-counter { font-size: 10px; color: #94a3b8; font-style: normal; }
/* Print page renders note rows via the readOnly flag with its own class —
unscoped on purpose (the print page has no #my-card-content). */
td.mc-note-cell.mc-note-print { white-space: normal; font-size: 10px; font-style: italic; color: #444; }
@media (pointer: coarse) {
/* iOS zooms the viewport on focusing any input under 16px — keep the
entry boxes at 16px on touch devices (desktop density untouched). */
#my-card-content .mc-entry-input { font-size: 16px; min-height: 32px; width: 64px; }
#my-card-content .mc-note-cell textarea.mc-note-edit { font-size: 16px; }
}
@media print { .mc-note-add, .mc-save-status { display: none !important; } }
/* Palette chip colour for the My Notes source group */
.rcb-source-myNotes .rcb-source-chip { background: #7c3aed; }
|