/* ========================================================== Scale — type and radius ========================================================== Two scales, and nothing below may use a raw px value for either. They are not colours: these are identical under both themes, which is why they sit in their own block above the colour one rather than inside it. The type scale replaced 26 distinct font sizes — every half step from 8.5px to 16px, chosen per element by eye. Each one was defensible and the set was not: nothing shared a size, so nothing read as belonging to the same family. Eight steps at roughly a 1.2 ratio, widening at display sizes. --fs-base lands on 16px, which is also the size iOS needs a field to be before it stops zooming the page on focus. That rule under @media (pointer: coarse) is now a floor the design already meets rather than an exception fighting it. The radius scale replaced 15 values — every integer from 2 to 12. Four steps and a pill, by the job each does: an inline mark, a control, a card, an overlay. ========================================================== */ :root { --fs-2xs: 10px; /* board cells, badges, uppercase micro-labels */ --fs-xs: 12px; /* hints, meta, field labels, small buttons */ --fs-sm: 14px; /* card body, blurbs, nav, tabs */ --fs-base: 16px; /* body, form fields, primary buttons */ --fs-lg: 19px; /* lead paragraphs, panel headings, wordmark */ --fs-xl: 23px; /* section headings */ --fs-2xl: 32px; /* grade letter, hero headline on a phone */ --fs-3xl: 42px; /* hero headline */ --r-xs: 4px; /* badges, board cells, bars, swatches */ --r-sm: 8px; /* buttons, inputs, selects, seats */ --r-md: 12px; /* cards and panels */ --r-lg: 16px; /* overlays: player sheet, dialog, rail, chat */ --r-pill: 999px; /* chips, pills, tabs, the two FABs */ } /* ========================================================== Juke — stylesheet Colours are defined once here, at the top, and reused everywhere below by name. Change one line, change the whole site. There are two sets of them. The dark set lives on :root and is therefore what you get by default, including on a page that never runs a line of JavaScript. The light set overrides it only when the reader has asked for light and the toggle has written data-theme="light" onto . The rule that keeps this honest: no rule below may name a colour that changes between the two themes. If a literal hex appears past this block it is either brand navy, which is dark in both themes, or a position colour, which is a mid tone that works on either. ========================================================== */ :root { /* ---- dark: the default ---- */ /* Juke navy and Juke orange, both sampled from the logo artwork itself rather than typed from memory. The header is dark under both themes, so these do not move when the theme does. */ --navy-deep: #0C1A2E; /* header gradient, dark end */ --navy: #152A49; /* the logo's own navy */ --navy-soft: #24405F; --navy-mid: #1E3E68; /* the lift in a live header */ --navy-lift: #13497A; /* the blue end of a gradient */ --navy-glow: #0E5A93; /* The one warm colour in the brand. It is the swoosh, and it is strong enough to carry dark text but not white — see the note on --orange-cta, which is the same hue pushed dark enough to sit under white. */ --orange: #ED6011; /* The navy half of the logo, on a normal surface. White here because the default theme is dark; the light theme puts the real brand navy back. */ --mark-ink: #FFFFFF; /* The primary action colour, everywhere and only. White on it is 5.18:1, and it does not move between themes, which is why a rule may name it. It used to share the job with --blue: .cta was orange and .primary was blue, so the same control — "Resume" on a saved draft — was orange on the landing page and blue three lines into the draft view, from the same two words in the same codebase. A first-time visitor pressed a big orange button and then had to find a blue one to actually start. Blue keeps everything it was already better at: focus rings, the selected tab, the header when the clock is yours. Orange means act, blue means state. See the note on .draft-btn for the one place a button does something and is deliberately still blue. */ --orange-cta: #C2410C; --orange-cta-hover: #A8380A; /* was typed as a literal in .cta:hover */ /* Orange *as text on a surface*, which is a different problem again — the same split as --blue and --link. The brand orange reads 5.49:1 on this dark page and only 3.11:1 on the light one, so the light block swaps it for the darker value, which is 4.83:1 there and 3.54:1 here. Neither works in both, so neither may be named directly by a rule. */ --orange-ink: #ED6011; /* The header changes colour with the state of the draft, not with the theme, so it keeps its own blues and reds. The ones below named --blue and --danger do move, which is why these are separate. Every stop here carries white text, so every stop has to clear 4.5:1 against white on its own. That is a stricter rule than it sounds: --hdr-cyan sits at 130% and so is never fully painted, and it would have been tempting to check only the colour the box actually reaches. Tying the requirement to a stop percentage means moving that stop silently breaks the contrast, so each stop passes by itself and any interpolation between two passing stops passes with them. --hdr-cyan was #12A3DC, which is 2.88 — the worst contrast anywhere in the app. The lightest colour actually painted was 3.65, and the header carries a 16px headline, a 12px pick line and a 10px label on top of it. */ --hdr-blue-deep: #0A548A; /* white 7.93 */ --hdr-blue: #0E6BB0; /* white 5.60 */ --hdr-cyan: #0E7DA9; /* white 4.63, was #12A3DC at 2.88 */ --hdr-red-deep: #7A1F1A; /* white 10.3 */ --hdr-red: #B43026; /* white 6.19 */ --hdr-red-lift: #D04439; /* white 4.60, was #D0453A at 4.57 */ /* Blue as a filled button always carries white text, so it can only go so light before that text stops being readable. It brightens a little from the light theme's blue, to lift off a dark card, and no further. Blue as *text* has the opposite problem and needs --link instead. */ --blue: #1776BE; --blue-dark: #125F9C; /* hover: deeper, the same way round as in light */ --blue-pale: #16334C; --blue-line: #2C567D; --cyan: #35BDEE; --link: #62B8F2; /* blue on a surface, rather than under white text */ /* Three tones, and the lightest of them is pinned by contrast rather than by taste. --ink-light is the tertiary tone — captions, meta, uppercase labels — and it is used 58 times, almost always at --fs-2xs or --fs-xs, which is small text and therefore needs 4.5:1. It was #76838F and it missed on every surface it lands on: 4.43 on --sunken, 4.18 on --card, 3.83 on --well and 3.54 on --fill. That is 122 elements, and it was not a rounding error — the light theme's #94A1AC was worse still, bottoming out at 2.31. The binding surface is --fill, the lightest thing it sits on in dark and the darkest in light. --fill-hi is lighter again but never carries this tone: every rule that hovers to --fill-hi either sets --ink or starts from --ink-mid, which clears it at 5.30. */ --ink: #E6ECF3; --ink-mid: #A2B0BE; /* 6.21 on --fill */ --ink-light: #8E9BA9; /* 4.85 on --fill, the worst surface it meets */ --page: #0E151E; --card: #18212D; --line: #2A3441; --hairline: #222C38; /* the rules between rows inside a card */ --sunken: #131C26; /* a panel set into a card: stat boxes, table heads */ --well: #1E2836; /* slot chips, round numbers */ --fill: #232E3C; /* empty board cells, small buttons */ --fill-hi: #2D3948; /* those buttons, hovered */ --track: #242F3D; /* the unfilled part of a bar or meter */ --board-hd: #212B38; --danger: #F0837A; --good: #4FBF7F; --row-bad: #2A171B; /* a whole row tinted with bad news */ /* ---- yours ---- Identity, and it is a third meaning after the two this file already names: orange acts, blue states, and gold is *whose*. It had been blue in four of the six places a seat is marked, navy in a fifth and translucent white in the sixth — and blue was already carrying focus rings, the selected tab, --link, .draft-btn and the header when the clock is yours. A colour doing five jobs is not a signal. --mine and --ring-edge do not move between themes, and that is the point rather than an oversight. A ring on the board lands on six position solids — which are themselves fixed across themes — and on an empty cell, which is near-black in one theme and near-white in the other. Measured, no single value survives that: gold clears 3:1 on every solid (3.2 worst) and on a dark empty cell (9.5) and reaches 1.26 on a light one; the keyline is the exact complement, 4.1 on the solids and 16.7 on a light cell and 1.2 on a dark one. So the ring is a *pair* — 2px of gold with 1px of keyline inside it — and between them one always clears 3:1 on whatever it is sitting on, while the two clear 11.7 against each other so the pair always reads as an edge. --live-ring is white and takes the identical construction for the identical reason. **Gold is a mark and never type.** #FFD166 as text is 1.4:1 on a light card, which is why the chat author's name stays --link: that is a name in a paragraph, not a ring on a cell. */ --mine: #FFD166; /* the ring on a seat that is yours */ --ring-edge: #0B1017; /* what makes a ring survive any surface under it */ --live-ring: #FFFFFF; /* the pick on the clock, wherever it lands */ --row-mine: #221C10; /* a whole row tinted as yours */ --pale-mine: #332608; /* your line in the room standings */ /* Tints: a soft background with a legible foreground on it. Used by the injury chips, the tier chips, the bye bars and the callouts. */ --t-good-bg:#12301F; --t-good-fg:#6FD79E; --t-bad-bg:#3A1D22; --t-bad-fg:#F2909A; --t-ir-bg:#431A20; --t-ir-fg:#EE8590; --t-warn-bg:#33270F; --t-warn-fg:#E3B268; --t-bye-bg:#33240F; --t-bye-fg:#E4AC63; --t-info-bg:#16293C; --t-info-fg:#75BAE8; --t-purple-bg:#251E3C; --t-purple-fg:#B7A4EE; --t-orange-bg:#38230F; --t-orange-fg:#E79A62; --t-neutral-bg:#232D38; --t-neutral-fg:#A5B3BF; /* Position colours. The -bg / -fg pair is a chip or an avatar; the bare name is a solid block on the draft board, which always carries white text and so is the same in both themes. "Always carries white text" is a contrast requirement, and for four of the six it was not being met. The board sets names at --fs-2xs, so the bar is 4.5:1, and they measured: TE 2.68, WR 3.12, QB 3.96, RB 3.97 — 80 elements. Only K (4.52) and DST (4.86) passed. The fix darkens lightness alone and leaves hue and saturation where they were, so the board still colour-codes the way it always has. Each lands at 4.61-4.62, a margin over the bar rather than exactly on it. The cost is concentrated in TE and WR: measured as CIE76 dE, TE moves 19 and WR 14.4, which is a change you will see, while RB moves 4.9 and K 1.4, which you will not. DST did not move at all. What matters more than any single shift is that the six are still telling apart from each other: the closest pair is RB/DST, and it goes from 28.1 to 25.0 against a just-noticeable threshold near 2.3. If a seventh position is ever added, check white on it before adding it here. That check is the reason four of these values are not the ones sampled off the original artwork. */ /* Seat colours, for the avatar beside a chat message. Solids under white text, exactly like the position blocks below and defined here for the same reason: they are the same value under both themes, so a rule may name one without needing a light override. Eight, cycled, because a fourteen-team room has more chairs than there are hues worth telling apart at eighteen pixels across. Five of these were the same hex as a position colour and so carried the same failure; they take the same darkened value. seat-5 was 4.23 on its own account. seat-6 and seat-7 already passed. */ --seat-0:#2A7BB1; --seat-1:#208553; --seat-2:#D43E39; --seat-3:#7F62CF; --seat-4:#AA6419; --seat-5:#118093; --seat-6:#B5427F; --seat-7:#607483; --qb-bg:#3A1D22; --qb-fg:#F0929B; --qb:#D43E39; /* white 4.62 */ --rb-bg:#12293A; --rb-fg:#74B9E6; --rb:#2A7BB1; /* white 4.62 */ --wr-bg:#12301F; --wr-fg:#6ED79C; --wr:#208553; /* white 4.62 */ --te-bg:#33240F; --te-fg:#E9AE63; --te:#AA6419; /* white 4.61 */ --k-bg:#251E3C; --k-fg:#B4A0EC; --k:#7F62CF; /* white 4.61 */ --dst-bg:#232B33; --dst-fg:#A8B7C2; --dst:#607483; /* white 4.86 */ /* ---- elevation ---- Four steps, and no rule below may write a raw box-shadow for a lifted surface. They replaced fourteen distinct shadow values across eighteen declarations, every one picked locally by eye — the same failure as the 26 font sizes and 15 radii, and the one DESIGN-DIRECTION.md names as the difference between "clean" and "designed": nobody notices any single shadow, and the sum of them is what reads as a product. Two things make this a system rather than a list. **One light source, and it is directly above.** Every step offsets down the Y axis only. A shadow that leans left beside one that leans right is two light sources in one composition, which is the thing the eye catches without being able to name it. The door is the single exception and says so where it sits: it is a lit object with its own interior light, not a card on a page. **Two layers, always.** A tight, dark contact shadow for where the object meets the surface, and a broad, soft ambient one for the room light it blocks. One blurred layer is what flat design does; both is what makes a surface look like it is actually above another one. That is most of the difference between these and what they replaced. They live here rather than beside the type and radius scales because a shadow is a colour: on a dark page it has to be near-black and deep to register at all, and the same value on a light page reads as grime. Three things below still write a shadow by hand, and none of them is a lifted surface: `.sug.top` is a blue state glow rather than a height, `--team` is a ring drawn as a shadow because a border would eat the headshot, and the doorway's handle, placard and sill are detail on a lit object with an interior light of its own. The door says so where it sits. Anything else with a literal here is a rule that forgot. */ --elev-1: 0 1px 2px rgba(3, 8, 16, .48); --elev-2: 0 2px 4px rgba(3, 8, 16, .42), 0 6px 14px rgba(3, 8, 16, .36); --elev-3: 0 4px 8px rgba(3, 8, 16, .42), 0 14px 30px rgba(3, 8, 16, .40); --elev-4: 0 8px 16px rgba(3, 8, 16, .46), 0 28px 60px rgba(3, 8, 16, .48); /* The one that casts upwards, and the single exception to the overhead light. A sheet rising from the bottom edge of the screen has no floor below it to cast onto, so the shadow's whole job there is to separate its top edge from the page it is covering. Named rather than written inline so "no raw box-shadow for a lifted surface" stays literally true. */ --elev-up: 0 -8px 28px rgba(3, 8, 16, .44); /* Tells the browser to draw the parts we don't control — select popups, checkboxes, scrollbars — to match. Without it a dark page gets white dropdowns. */ color-scheme: dark; } :root[data-theme="light"] { /* ---- light: only when it is asked for ---- */ --blue: #0E6BB0; --blue-dark: #0A548A; --blue-pale: #E8F2FA; --blue-line: #C9DCF9; --cyan: #12A3DC; --link: #0E6BB0; /* The darker orange as text here: 4.83:1 on this page, where the brand value would be 3.11:1 and fail at any size the slogan is set in. */ --orange-ink: #C2410C; /* The same three tones, and the one place the two themes could not simply mirror each other. --ink-light has to reach #5E6A76 to clear 4.5:1 on --fill (#EDF0F3), and #5A6875 — where --ink-mid sat — is 4.83 against 5.00. Two tones 0.17 apart is one tone with two names, so making the tertiary legible had to push the secondary along with it. --ink-mid moves to #4C5763, which restores a 1.61 gap on --fill and lines up with dark's 1.36. So the ramp is set from the bottom in both themes: --ink-light is whatever the worst surface allows, and --ink-mid is placed above it. Body text getting darker in light is the side effect, and it is the right side effect. */ --ink: #16202C; --ink-mid: #4C5763; /* 6.44 on --fill */ --ink-light: #5E6A76; /* 4.83 on --fill, the worst surface it meets */ --page: #F5F7FA; --card: #FFFFFF; --line: #E4E9EF; --hairline: #F1F4F7; --sunken: #F7F9FB; --well: #F0F3F6; --fill: #EDF0F3; --fill-hi: #E6EBF1; --track: #EDF1F5; --board-hd: #E9EDF1; /* Same geometry, a fraction of the weight, and tinted with the page's own navy rather than black — a neutral grey shadow on a cool light page reads as dirt. See the note on the dark set for why there are two layers. */ --elev-1: 0 1px 2px rgba(20, 35, 56, .10); --elev-2: 0 2px 4px rgba(20, 35, 56, .07), 0 6px 14px rgba(20, 35, 56, .10); --elev-3: 0 4px 8px rgba(20, 35, 56, .08), 0 14px 30px rgba(20, 35, 56, .12); --elev-4: 0 8px 16px rgba(20, 35, 56, .10), 0 28px 60px rgba(20, 35, 56, .18); --elev-up: 0 -8px 28px rgba(20, 35, 56, .16); --mark-ink: #152A49; --danger: #C0392F; --good: #1B7343; --row-bad: #FEF6F7; /* --mine, --ring-edge and --live-ring are deliberately absent here: they are built as a pair that survives both themes. See the dark block. */ --row-mine: #FFF8E8; --pale-mine: #FDF3DA; --t-good-bg:#E6F5EC; --t-good-fg:#1B7343; --t-bad-bg:#FBE1E5; --t-bad-fg:#A32530; --t-ir-bg:#F6D5D8; --t-ir-fg:#86202A; --t-warn-bg:#FCF0DC; --t-warn-fg:#8A5A11; --t-bye-bg:#FCEBD5; --t-bye-fg:#95580F; --t-info-bg:#DCE9F7; --t-info-fg:#15618F; --t-purple-bg:#EDE7FB; --t-purple-fg:#5B41A8; --t-orange-bg:#FBE4D3; --t-orange-fg:#9A4B14; --t-neutral-bg:#E4E8EC; --t-neutral-fg:#46555F; --qb-bg:#FBE1E5; --qb-fg:#B02A37; --rb-bg:#D7EBF8; --rb-fg:#15618F; --wr-bg:#D9F2E1; --wr-fg:#1B7343; --te-bg:#FCEBD5; --te-fg:#95580F; --k-bg:#E9E2F8; --k-fg:#59409F; --dst-bg:#E2E8ED; --dst-fg:#46555F; color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--ink); font-family: Inter, system-ui, sans-serif; font-size: var(--fs-base); -webkit-font-smoothing: antialiased; } [hidden] { display: none !important; } /* ---------- sticky header ---------- The header, tabs and action bar are wrapped in one sticky container so they pin together and nothing has to guess the height of the thing above it. */ .sticky-top { position: sticky; top: 0; z-index: 30; } /* The draft header and the site header are the same bar wearing different content: same surface, same centred column, same border. The Alpine mountain ridges that used to sit on top of this are gone with the rest of that brand. The two states that need your attention still take colour, because a bar that turns red at ten seconds is doing real work. Everything else, a CPU being on the clock included, is the resting state and matches the homepage. */ .appbar { position: relative; overflow: hidden; background: var(--card); border-bottom: 1px solid var(--line); color: var(--ink); transition: background .35s ease, color .35s ease, border-color .35s ease; } .appbar-inner { max-width: 1120px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 18px; } .appbar.my-turn, .appbar.urgent { color: #fff; border-bottom-color: transparent; } .appbar.my-turn { background: linear-gradient(120deg, var(--hdr-blue-deep) 0%, var(--hdr-blue) 50%, var(--hdr-cyan) 130%); } .appbar.urgent { background: linear-gradient(120deg, var(--hdr-red-deep) 0%, var(--hdr-red) 60%, var(--hdr-red-lift) 100%); } /* On a coloured bar the mark reverses and the toggle goes translucent white, the way both did on navy. */ .appbar.my-turn .mark, .appbar.urgent .mark { --mark-ink: #fff; } /* Both header toggles share .hdrbtn and nothing else. The sound button was given the class `theme-toggle` first, purely to inherit its look — and that class is not a style, it is a control: themeBtns() selects it, syncThemeButton() writes aria-pressed onto everything it finds, and the delegated click handler switches the theme on anything matching it. So the sound button loaded showing "on" it had never been given and would have changed the theme when pressed. Exactly the collision this project already has a rule about — .home was taken, .avatar was taken, initials() was taken. Checking the sheet for a name catches the first two; this one needed checking the *script* as well, because the clash was in behaviour rather than in appearance. */ .sound-toggle .i-sound-off { display: none; } .sound-toggle[aria-pressed="false"] .i-sound-on { display: none; } .sound-toggle[aria-pressed="false"] .i-sound-off { display: block; } .appbar.my-turn .hdrbtn, .appbar.urgent .hdrbtn { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.10); color: #fff; } .appbar.my-turn .hdrbtn:hover, .appbar.urgent .hdrbtn:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.38); } .appbar.my-turn .hdrbtn:focus-visible, .appbar.urgent .hdrbtn:focus-visible, .appbar.my-turn .home:focus-visible, .appbar.urgent .home:focus-visible { outline-color: #fff; } /* the app icon's peak, on the navy it was drawn for */ /* The mark is a button now, so it needs to carry the flex sizing the SVG used to, and to look pressable without becoming a box in the header. */ .home { flex: none; display: flex; align-items: center; border: 0; background: none; color: inherit; cursor: pointer; font-size: var(--fs-sm); /* icon only — see the note on .theme-toggle */ transition: opacity .15s ease; /* The mark is 31 by 36, and a thumb wants 44 square. The padding grows the hit area and the negative margin takes the space back, so nothing moves on the page. 7px rather than 5: five only reached 41 wide, which missed the number this rule exists to hit, and it missed it quietly because the hit area is invisible. 31 + 14 = 45. Measured, not assumed. */ padding: 7px; margin: -7px; } /* The chevron sits tight against the mark and reads as one control with it, which is the point: two separate buttons in a header this narrow would be two ways out rather than one. */ .i-back { flex: none; margin-right: 2px; opacity: .9; } .home:hover { opacity: .78; } .home:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--r-sm); } /* The shield is taller than it is wide — 662 by 774 in the artwork — so it cannot be sized as a square without squashing it. The drop shadow it used to carry existed to lift it off the mountain texture, which is gone. */ .mark { width: 31px; height: 36px; min-width: 31px; flex: none; } /* The logo is drawn navy-on-light. On a light surface it needs its navy back or it is white-on-white and only the swoosh survives; on the draft header, which is navy under both themes, it stays reversed. */ .mark-body { fill: var(--mark-ink); } .mark-accent { fill: var(--orange); } /* The mark is drawn once in a and cloned by , and CSS cannot select into the shadow tree that creates — ".appbar .mark-body" would match nothing. Custom properties do inherit into it, so any per-header override sets a variable on the , after the sheet markup; the sheet's own copy is a child of #sheet, so it is untouched. */ #sheet:not([hidden]) ~ .to-top { opacity: 0; pointer-events: none; } /* Inside the player sheet the button belongs to the sheet, not the viewport: .sheet is already position:fixed, so absolute anchors to it. It also has to clear the sheet's own rounded corner, hence the tighter offsets. */ .to-top.in-sheet { position: absolute; z-index: 1; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 40px; height: 40px; } /* Full-screen sheet on a phone: the sheet is the viewport, so the offsets go back to matching the page-level button. */ @media (max-width: 620px) { .to-top.in-sheet { right: calc(18px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); } } /* ---------- the queue ---------- Your own order, as distinct from the model's. It reuses the suggestion row's shape rather than inventing a third kind of player row, so the three lists on this site read as one family. */ .qrow { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 12px; margin-bottom: 7px; } /* The one at the front is what the clock takes if it runs out while you are away, so it is worth marking as different from the rest of the list. */ .qrow.next { border-color: var(--orange); } .qrow.next .qn { color: var(--orange-cta); } .qn { font-family: Inter, sans-serif; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-light); width: 16px; flex: none; font-variant-numeric: tabular-nums; } .qbody { flex: 1; min-width: 0; } .qname { font-size: var(--fs-sm); font-weight: 600; } .qmeta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-mid); } .qmoves { display: flex; flex-direction: column; gap: 2px; flex: none; } .qmove { width: 22px; height: 17px; padding: 0; cursor: pointer; font-size: var(--fs-2xs); line-height: 1; color: var(--ink-mid); background: var(--fill); border: 1px solid var(--line); border-radius: var(--r-xs); } .qmove:hover:not(:disabled) { background: var(--fill-hi); color: var(--ink); } .qmove:disabled { opacity: .35; cursor: default; } /* The star that puts a player in the queue. Off is an outline in muted ink, on is the brand orange filled — both legible on either theme, since --orange is a brand colour rather than a themed one. */ /* This is a , so it does not get to be a flex container. `display: flex` takes a cell out of table layout: it stops stretching to the height of its row and sizes to its own content instead. Every other cell in the row was 43px tall and this one was 35px, so its bottom border was drawn seven pixels higher than the rest — a visible step in the divider, starting exactly where the last column does. Laid out with inline-block and white-space instead, which a table cell can do without giving up being one. */ .rowacts { text-align: right; white-space: nowrap; } .rowacts > * { vertical-align: middle; } .rowacts .draft-btn { margin-left: 6px; } .star { flex: none; width: 26px; height: 26px; padding: 0; cursor: pointer; font-size: var(--fs-sm); line-height: 1; color: var(--ink-light); background: none; border: 1px solid var(--line); border-radius: var(--r-sm); } .star:hover { color: var(--orange); border-color: var(--orange); } .star.on { color: #fff; background: var(--orange-cta); border-color: var(--orange-cta); } #playerTable.compact .star { width: 22px; height: 22px; font-size: var(--fs-xs); } /* A positional run, in the strip that already says what just happened. */ .run { margin-left: auto; flex: none; font-size: var(--fs-xs); color: var(--t-warn-fg); background: var(--t-warn-bg); border-radius: var(--r-pill); padding: 4px 11px; } .run b { color: inherit; font-weight: 700; } /* The on-the-clock cell counts down in place. It is already dashed blue and bold from .cell.now; this only stops the digits jittering as they change. */ .board .cell.now { font-variant-numeric: tabular-nums; } /* ========================================================== The persistent draft shell The board never leaves the screen, because the board is what tells you whether to reach: a receiver run three picks away is a shape you can see, and only if you are looking at it. The rail carries the two things checked between picks. Only the middle column changes. That is the whole idea. ========================================================== */ /* The board and the work under it are one column; the chat, when there is one, is the other. Grid rather than a float or a flex row because the chat has to be able to run the full height of both without either of them knowing it is there — and because in a solo draft the second column simply does not exist and the first takes the whole width with no rule needed. */ .draftshell { padding: 10px 12px 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; } .draftmain { min-width: 0; } /* The slot is nothing until the dock is moved into it. Empty in a solo draft, and `auto` above means an empty column takes no width at all. */ .chatslot { min-width: 0; } .draftshell > .chatslot:not(:empty) { width: 330px; } /* ---------- the board pane ---------- */ /* Fourteen rounds do not fit above a working area, so the pane is capped and scrolls, and renderBoard() keeps the live round in the middle of it. The cap is in vh rather than pixels because the useful trade is against the height of the screen, not against a number. */ .boardpane { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 10px; } .boardpane .board-scroll { /* 43px taller than it was, which is exactly what merging the tab and action bars gave back — spent here rather than pocketed, so nothing below the board moves and it gains a whole round. It showed 5.9 of fourteen. */ max-height: min(43vh, 383px); overflow: auto; overscroll-behavior: contain; /* the page does not move when this ends */ } /* The header row has to stay put, or a scrolled board is a grid of names with no way to tell whose column is whose. */ .boardpane .board .hd { position: sticky; top: 0; z-index: 2; } .boardpane .board .rd { position: sticky; left: 0; z-index: 1; } .boardpane .legend { margin-top: 9px; } /* ---------- the split ---------- */ .worksplit { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 10px; align-items: start; } .workmain { min-width: 0; } /* Panels no longer own the page, so they lose the page's padding. */ .workmain .panel { padding: 0; } /* ---------- the rail ---------- */ .rail { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; } .railcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; } .railhead { margin: 0 0 8px; font-family: Inter, sans-serif; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; } .railslots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .railslots li { display: flex; align-items: center; gap: 8px; background: var(--sunken); border-radius: var(--r-sm); padding: 5px 8px; font-size: var(--fs-xs); min-width: 0; } .rslot { flex: none; width: 34px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; color: var(--ink-light); } /* The slot label takes its position colour, so an empty starting slot is readable as "no quarterback" without reading the word. */ .rslot.QB { color: var(--qb-fg); } .rslot.RB { color: var(--rb-fg); } .rslot.WR { color: var(--wr-fg); } .rslot.TE { color: var(--te-fg); } .rslot.K { color: var(--k-fg); } .rslot.DST { color: var(--dst-fg); } .rfill { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rfill.none { font-weight: 400; font-style: italic; color: var(--ink-light); } /* Two things wear this class and only one of them is a control: the trailing "RB · SF" on every roster row, and the bench row's button through to My Team. So the shared half is the typography, and everything that makes a control a control is scoped to the element that is one. Getting that wrong is not theoretical — it shipped. A cursor, a hover underline and 10px of padding went onto the bare `.rtm` and landed on every roster row in the rail, which is the sheet's own rule about checking a class name against the existing stylesheet, ignored by the person who wrote it down. `grep` for the class, not just for the element you are looking at. */ .rtm { flex: none; font-size: var(--fs-2xs); color: var(--ink-light); letter-spacing: .02em; } /* A