DOM reflows into one card per gymnast so the
meet director never swipes sideways. We add data-label + hook
classes (gym-c-*) to each | server-side; CSV/print/sort all
read the unchanged table, so only the on-screen layout changes.
Each row becomes a flex card; `order` re-sequences the cells
(the desktop column order puts Birthdate/Age before Session, but
the card shows the chip rail first). Scoped to the 2026 theme;
in legacy (?theme=old) the table keeps its horizontal scroll.
============================================================ */
/* The mobile-only score-row break adds no desktop column and is skipped by
CSV/print (it also carries .no-print); only the mobile card view reveals it. */
html.ls2026 .gym-score-break { display: none; }
@media screen and (max-width: 768px) {
/* Retire the horizontal-scroll affordances under the theme */
html.ls2026 main .mobile-scroll-hint-banner { display: none !important; }
html.ls2026 main .table-container {
overflow: visible !important;
overflow-x: visible !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Table + rows -> a stream of block cards */
html.ls2026 main .table-container table { display: block !important; width: 100%; min-width: 0 !important; border: 0; }
html.ls2026 main .table-container table tbody { display: block; }
html.ls2026 main .table-container table tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
position: relative;
background: var(--paper);
border: 1px solid var(--line-strong); /* clear card outline so each card stands out */
border-radius: 14px;
box-shadow: 0 2px 6px rgba(15,24,40,.12); /* + a stronger drop shadow */
padding: 14px;
margin: 0 0 14px;
font-family: var(--font-ui);
}
/* Hide the desktop header row (sorting moves to the mobile control) */
html.ls2026 main .table-container table tr.desktop-header { display: none !important; }
/* Generic cell reset: each | is a flex item, no table sizing/nowrap.
border-box so flex-basis percentages (score tiles 25%, action cells 50%)
include padding+border and pack cleanly without a sub-pixel wrap. */
html.ls2026 main .table-container table td {
display: block;
box-sizing: border-box;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal !important;
text-align: left !important;
border: 0 !important;
padding: 0;
margin: 0;
font-size: 14px;
color: var(--ink);
}
/* ---- HERO: gymnast name (shares line 1 with the # pill, sits left) ---- */
html.ls2026 main .table-container table td.gym-c-name {
order: 0; /* line 1, left of the # pill */
flex: 1 1 auto; /* shrinkable so the # can share line 1; long names wrap, never widen the card */
min-width: 0; /* allow flex shrink so overflow-wrap can break */
overflow-wrap: anywhere; /* unbreakable long names/tokens wrap instead of overflowing */
word-break: break-word;
position: static !important;
font-size: 1.3rem !important; /* beat legacy .sticky-col-gymnast{font-size:13px} */
line-height: 1.18;
font-weight: 700;
color: var(--ink);
padding: 0 0 4px 0 !important; /* no padding-right reservation: # is now in-flow */
border-bottom: 0; /* no divider line under the name */
}
html.ls2026 main .table-container table td.gym-c-name::before { content: none; }
/* Name, (Sr.) and the specialist (events) badges all read at the same size as
the name; only colour/weight differ. */
html.ls2026 main .table-container table td.gym-c-name span { font-size: inherit; vertical-align: baseline; }
/* ---- # competitor number -> teal pill in the card's TOP-RIGHT corner.
IN-FLOW flex item (NOT position:absolute): it shares line 1 with the name
and is shoved to the right edge with margin-left:auto. Because it is a real
flex item with flex:0 0 auto + white-space:nowrap, it ALWAYS keeps its full
intrinsic width (1-4 digits); if a long name leaves no room on line 1,
flex-wrap drops the WHOLE pill to its own line fully visible. It can never
be pushed off-screen or clipped to a sliver the way the old
position:absolute;right:12px pill was on 320-430px phones. ---- */
html.ls2026 main .table-container table td.gym-c-num {
order: 1; /* AFTER the name (which is DOM-first) so it rides to the right */
margin-left: auto; /* push to the far right = top-right corner */
align-self: flex-start; /* hug the top edge of the card */
flex: 0 0 auto; /* keep full width; never shrink */
position: static !important; /* never absolute -> never clips */
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
border-radius: 999px;
background: var(--teal-ink);
color: #fff;
font-size: 0.8rem;
font-weight: 700;
text-align: center !important;
white-space: nowrap; /* keep the number on one line (safe: in-flow) */
font-variant-numeric: tabular-nums;
}
html.ls2026 main .table-container table td.gym-c-num::before { content: none; }
/* When a gymnast has no competitor number, don't show an empty pill.
margin-left:auto on the (now-removed) pill no longer applies, so the name
simply takes the full line. */
html.ls2026 main .table-container table td.gym-c-num:empty { display: none !important; }
/* Full-width zero-height break AFTER the name+# line (order:0) and BEFORE the
meta chip rail (Team order:2 / Level 3 / Session 4). This forces the chips
onto line 2 so the # pill owns the top-right corner of line 1 alone. A
zero-size, flex-basis:100% pseudo is a hard line break in a flex-wrap
container. No DOM/PHP change required. */
html.ls2026 main .table-container table tr::after {
content: "";
order: 1;
flex: 0 0 100%;
width: 100%;
height: 0;
margin: 0;
padding: 0;
}
/* ---- META CHIP RAIL: Team / Level / Session ---- */
html.ls2026 main .table-container table td.gym-c-team,
html.ls2026 main .table-container table td.gym-c-level,
html.ls2026 main .table-container table td.gym-c-session {
flex: 0 0 auto;
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
background: var(--teal-soft);
color: var(--teal-ink);
font-size: 0.85rem;
font-weight: 600;
}
html.ls2026 main .table-container table td.gym-c-team { order: 2; }
html.ls2026 main .table-container table td.gym-c-level { order: 3; }
html.ls2026 main .table-container table td.gym-c-session { order: 4; }
html.ls2026 main .table-container table td.gym-c-team::before,
html.ls2026 main .table-container table td.gym-c-level::before,
html.ls2026 main .table-container table td.gym-c-session::before {
content: attr(data-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* ---- LOW-PRIORITY roster lines: Birthdate, Age Group ---- */
html.ls2026 main .table-container table td.gym-c-bdate,
html.ls2026 main .table-container table td.gym-c-age {
flex: 1 1 100%;
font-size: 0.8rem;
color: var(--ink-soft);
}
html.ls2026 main .table-container table td.gym-c-bdate { order: 6; }
html.ls2026 main .table-container table td.gym-c-age { order: 7; }
html.ls2026 main .table-container table td.gym-c-bdate::before,
html.ls2026 main .table-container table td.gym-c-age::before {
content: attr(data-label) ": ";
font-weight: 700;
color: var(--ink-faint);
}
/* Full-width zero-height break: forces the score tiles onto their own row
below the chip rail (otherwise the first tile shares the chips' flex line). */
html.ls2026 main .table-container table td.gym-score-break {
display: block;
order: 5;
flex: 0 0 100%;
width: 100%;
height: 0;
min-height: 0;
padding: 0;
margin: 0;
}
/* ---- SCORE TILES (scores view) ---- */
html.ls2026 main .table-container table td.gym-c-score {
order: 5;
flex: 0 0 calc(25% - 8px); /* women clean 4-up; men wrap 4 + 2 (slack avoids a sub-pixel wrap) */
min-width: 54px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 7px 4px;
background: var(--paper-2);
border: 1px solid var(--line) !important;
border-radius: 10px;
text-align: center !important;
font-size: 1rem;
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
html.ls2026 main .table-container table td.gym-c-score::before {
content: attr(data-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* Absent score (em-dash) recedes */
html.ls2026 main .table-container table td.gym-c-score.is-empty {
background: transparent;
border: 1px dashed var(--line) !important;
color: var(--ink-faint);
font-weight: 600;
}
/* ---- AA: full-width boxed all-around banner (last line) ---- */
html.ls2026 main .table-container table td.gym-c-aa {
order: 8;
flex: 1 1 100%;
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 9px 14px;
border: 2px solid var(--teal-ink) !important;
border-radius: 12px;
background: var(--teal-soft);
font-size: 1.25rem;
font-weight: 800;
color: var(--teal-ink);
font-variant-numeric: tabular-nums;
text-align: left !important;
}
html.ls2026 main .table-container table td.gym-c-aa::before {
content: "ALL-AROUND";
font-size: 0.68rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--teal-ink);
}
html.ls2026 main .table-container table td.gym-c-aa.is-empty {
border: 1px solid var(--line) !important;
background: var(--paper-2);
color: var(--ink-faint);
}
html.ls2026 main .table-container table td.gym-c-aa.is-empty::before { color: var(--ink-faint); }
/* ---- ACTION ROW (roster): Scratch + Edit, divided, full-width taps ---- */
html.ls2026 main .table-container table td[data-label="Scratch"] { order: 9; }
html.ls2026 main .table-container table td[data-label="Edit"] { order: 10; }
html.ls2026 main .table-container table td[data-label="Scratch"],
html.ls2026 main .table-container table td[data-label="Edit"] {
flex: 1 1 calc(50% - 4px);
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid var(--line) !important;
}
html.ls2026 main .table-container table td[data-label="Scratch"] .ls-btn,
html.ls2026 main .table-container table td[data-label="Edit"] .ls-btn,
html.ls2026 main .table-container table td[data-label="Scratch"] .scratch-button,
html.ls2026 main .table-container table td[data-label="Edit"] .edit-button {
display: flex; /* flex-center so the "Edit" sits vertically */
align-items: center; /* centered like the |