/* INSTRUMENT SANS, self-hosted and variable (18 Sep 2026, Luis). One file covers 400-700, which is every weight this app sets, so there is no second request for a bold. Served from our own origin rather than a font CDN: nothing about which pages a reader opens leaves the box, it works with no network after the first load, and it cannot change under us. `swap` because the system stack behind it is a reasonable first paint and a blank page is not. Licence is SIL OFL 1.1; the text ships beside the file. */ /* INSTRUMENT SERIF, for Reg (18 Sep 2026, Luis). He writes; the app reports. The serif is how that difference is visible without a label on it -- his desk pieces and his quotes are set in it and nothing else is. Two files, roman and italic, because a serif with a synthesised oblique looks exactly like a serif with a synthesised oblique. Licence SIL OFL 1.1; the notice ships beside the files. */ @font-face{ font-family:"Instrument Serif"; src:url("/fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Instrument Serif"; src:url("/fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-weight:400;font-style:italic;font-display:swap; } @font-face{ font-family:"Instrument Sans"; src:url("/fonts/InstrumentSans-Variable.ttf") format("truetype-variations"); font-weight:400 700; font-stretch:75% 100%; font-style:normal; font-display:swap; } /* Gameweek United — restrained editorial intelligence-room styling. */ /* -------------------------------------------------------------- breakpoints Two, and only two. 900px the sidebar has nowhere to go, so the layout stacks and every two-column grid becomes one. Also where controls grow to a size a thumb can hit, because everything this narrow is touched. 640px a phone. Dense tables stop being tables, and the navigation stops spending a third of the screen on itself. There were four: 900, 860, 700 and 640. The extra two were not decisions, they were the width somebody's window happened to be when a particular grid looked wrong -- 860 moved one grid to one column forty pixels before its neighbours did, which is a difference no reader has ever seen and a third place to remember to edit. Both were folded into the two above with no visible change: a layout that stacks earlier still fits. */ :root{ /* The stadium board, 15 Sep 2026 handoff. Defined here and NOWHERE else on purpose: the approved rule keeps the same mint board and dark lettering in Light and in Dark, so neither light block overrides these. A hoarding does not change with the weather. */ --board:#bfd8c0; --boardink:#172519; /* The three signals AT BOARD WEIGHT. Same rule as the two above: one value, no theme override, because the board itself does not change with the theme. Each clears 4.5:1 against its own wash on the board -- 4.86, 4.98, 4.81 -- which the page palette's bright signals cannot: the amber measured 1.30 there. */ --boardwarn:#6a4600; --boardneg:#9c1223; --boardpos:#075a32; --noticebg:#211f18; /* The watchlist comp's own colours (proposed-pages/watchlist.html): the read panel, a pressed pill, the case box under the feature, and the three fixture bands. Named here so both themes carry the approved values rather than the nearest panel. */ --readbg:#12291f; --readline:#32faab; --pillon-bg:#142b20; --pillon-line:#2f7a5c; --card:#1a231b; --gold:#e0cf64; --posrule:#32faab; --fieldbg:#19221a; --fieldline:#40513c; --pillfill:#32faab; --pillfillink:#111512; --pillfillline:#32faab; --ds-bar-scale:1; --dovcard:#121a14; --dovbig:#c8ddc6; --dovbar:#62785e; --notebg:#211b15; --dsmint:#c4d9c5; --dsink:#202920; --dsline:#91a991; --dsrail:#283529; --dsdt:#344b37; --dsbar:#283529; --dsgreen:#0b6338; --dstrack:#abc4ae; --logtot:#1c281f; --fillink:#1c3024; --threatbg:#251d16; --medalink:#191e18; --medal3:#e0bb5b; --medal2:#bfc9d2; --medal1:#c89063; --lograte:#1c281e; --dsgrid:#a5bea7; --boardlabel:#485a45; --boardrule:#9fb498; /* The league fixture and result lists' own colours (league-fixtures.html, league-results.html): the rule under a tie, the ground behind your own, and the "v" between two names, which the comp sets a shade below the rest of the muted text. */ --tierule:#2b372b; --tieown:#211e16; --tiev:#8c9c86; --tiescore:#263027; --tiescoreink:#c8ddc6; /* A WON SCORE IS MINT AND A BEATEN ONE IS ORANGE IN BOTH THEMES. Both comps set these as literals in their own scope, never off the theme -- and the rule beneath already said so in a comment while using --pos and --accent, which in Light are a dark green and a dark red. Dark ink on those read at 2.5:1; on the comps' own fills it is 10.2 and 4.9. The fill is a signal here, not a surface. */ --fillwin:#32faab; --filllose:#fa3245; --loseink:#111512; --oppink:var(--board); /* THE COLOUR A BAR IS DRAWN IN. Separate from the accent since 17 Sep 2026, when the dark accent became the mint: a chart is not chrome, and a reader should not have to work out whether a filled bar is a brand flourish or a number. It is no longer one value across the themes, and the note here used to say it was. Light took a burnt amber when the orange measured 1.52:1 on the pale tracks, and Dark takes the red from Luis's 18 Sep palette, which has no orange in it -- his own minutes chart draws the short bars in exactly this red and the full one in the mint. */ --dataline:#fa3245; --honour:#1d2b20; --honourbench:#30231b; --honourprose:#b6c4af; --paperline:#c8ddc6; --deck:#c8ddc6; --resultline:#d5dfce; --deskfield:#e1eadb; --deskline:#93aa8b; --pendingink:#bfc4a3; --commfield:#1c281d; --casebg:#3a230e; --caseline:#faa832; --caseink:#faa832; --casetext:#bfd8c0; --caserule:#5a3a18; --caseaccent:#32faab; --fx-even-bg:#44452b; --fx-even-fg:#e5e7b5; --fx-edge-bg:#293e30; --fx-edge-fg:#d2ddce; --fx-under-bg:#57352a; --fx-under-fg:#f0c6b5; /* The dark greys are the approved comps' own (16 Sep 2026): counted across every page, these are the values the designer used most. */ /* LUIS'S OWN SWATCHES, 18 Sep 2026. The two grounds, the three tiers of type and the three signals were handed over as labelled hexes, so these are his values and not a reading of a screenshot. --panel2 is the one he did not name: it is the step above --panel and keeps the spacing the old pair had. Measured on his grounds, the type reads 13.82 / 12.11 / 8.96 on --bg and 12.50 / 10.95 / 8.10 on --panel. */ --bg:#111512; --panel:#18201a; --panel2:#222c24; --line:#344233; --line2:#52614d; --text:#dfdfdf; --dim:#bfd8c0; --dim2:#9fbca5; /* A CONTROL'S EDGE IS NOT A HAIRLINE, AND --line2 WAS DOING BOTH JOBS. The buttons in this app carry no fill until they are on: the reset gives them background:none and border:none, so the 1px outline is the only thing that says "this is a control". As a divider --line2 is right -- it is meant to be barely there -- and as a control edge it measured 1.74:1 in Light and 2.79:1 in Dark, under the 3:1 that WCAG asks of a component boundary. Darkening --line2 itself would have fixed the buttons and thickened every scrollbar thumb and table rule in the app, so the two jobs get two tokens. One value serves both themes: 4.01/3.72/3.39 on Light's grounds, 4.24/4.61/3.67 on Dark's. */ --ctlline:#6f8569; /* Luis's red is #fa3245. As a fill it is his exactly; as small TEXT on --panel it measured 4.45:1, five hundredths under, and on its own wash 4.06. Lifted thirteen points of green and eleven of blue -- indistinguishable side by side -- to clear both. */ --pos:#32faab; --posdim:rgba(50,250,171,.13); --neg:#fb3f50; --negdim:rgba(251,63,80,.05); /* THE ACCENT IS THE MINT IN DARK (17 Sep 2026, Luis). It was the system orange. Note that dark --pos is the same value: a positive number and an accent are now the same colour, which is deliberate here and worth knowing before either is changed. The orange stays where it is a SIGNAL rather than a brand -- a beaten scoreline, the hard end of a fixture ramp -- because those mean something the accent does not. */ --warn:#faa832; --warndim:rgba(250,168,50,.13); --accent:#32faab; --accentdim:rgba(50,250,171,.12); --posline:rgba(50,250,171,.62); --negline:rgba(251,63,80,.68); --warnline:rgba(250,168,50,.70); --accentline:rgba(50,250,171,.72); --line3:#dce7df; --prose:#bfd8c0; --onfill:#111512; --info:#78d8ff; --shadow:rgba(0,0,0,.32); /* Display preferences, overwritten from the Boot Room. */ --fs:1; --maxw:1500px; /* Declared, and deliberately unused by components: the approved comps set no monospace anywhere and line their digits up with tabular-nums on the sans instead. Kept so a future genuine code/hash display has something to ask for. */ --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; /* The comps' stack (proposed-pages/system.css): San Francisco on Apple hardware, Helvetica Neue / Arial elsewhere. Arial was the first thing Luis noticed. */ --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; /* Reg's own voice. Used where HE is speaking -- the desk piece, a pulled quote, his sign-off -- and nowhere the app is reporting. */ --serif:"Instrument Serif",Georgia,"Times New Roman",serif; --r:8px; /* ------------------------------------------------------------ type scale Eleven steps. There were twenty-six sizes across 360 declarations, and twelve of them lived between 9.5px and 15px -- 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 12.8, 13, 13.5, 14, 14.5, 15. Steps that close are not decisions anyone made or any reader can see; they are what happens when each new component picks a number that looked about right, and the cost is that nothing can be changed as a set. Sizes only ever moved DOWN where a value was between two steps. Text that shrinks by half a pixel cannot overflow anything; text that grows can, and finding out which cell it broke is not worth the pixel. The ratio is about 1.13 through the middle, opening up at the top where the jumps are between headings rather than between labels. Every size in this stylesheet comes from this list -- a new number here is a decision to have a twelfth step, which is a thing worth arguing about rather than doing by accident. Still px, and deliberately: the reader's text-size setting scales the whole interface with `zoom` (see the note on body), so a rem cascade would move some text and leave the rest. */ --t-micro:9px; --t-xxs:10px; --t-xs:11px; --t-s:12px; --t-m:14px; --t-l:16px; --t-xl:19px; --t-2xl:22px; --t-3xl:26px; --t-4xl:30px; --t-5xl:38px; /* A twelfth step, taken deliberately. The design handoff sets the figure a page exists to report -- a projection, a points total -- at display size, and that is a different job from any heading. Squeezing it onto --t-5xl would have been a design change made by the type scale. */ --t-display:64px; /* The comps' own steps (15 Sep 2026), named for what they are: the approved pages set these sizes and the app matches them exactly. */ --t-13:13px; --t-15:15px; --t-17:17px; --t-18:18px; --t-20:20px; --t-21:21px; --t-52:52px; --t-23:23px; --t-24:24px; --t-25:25px; --t-27:27px; --t-28:28px; --t-40:40px; --t-42:42px; --t-43:43px; --t-35:35px; --t-36:36px; --t-48:48px; --t-60:60px; --t-68:68px; --t-57:57px; --t-58:58px; --t-29:29px; --t-32:32px; --t-34:34px; --t-37:37px; --t-44:44px; /* ---------------------------------------------------------------- scales Five things in this app are RAMPS, not single colours: how hard a fixture is, how good a bonus finish was, how hot a cell is. They were written as component rules with hex in them, once for each theme -- so the base palette could be changed and the ramps would stay exactly where they were, and the two themes could drift apart with nothing to notice. Naming them makes them part of the palette. The scale is defined once per theme, here, and every component reads it. */ --d1:#32faab; --d2:#cae3d1; --d3:#ebef6e; --d4:#fe6b41; --d5:#fe5352; --tk-easy-bg:rgba(50,250,171,.10); --tk-easy-fg:#32faab; --tk-ok-bg:rgba(202,227,209,.10); --tk-ok-fg:#cae3d1; --tk-even-bg:rgba(235,239,110,.12); --tk-even-fg:#ebef6e; --tk-hard-bg:rgba(254,107,65,.12); --tk-hard-fg:#fe6b41; --tk-brutal-bg:rgba(254,83,82,.13);--tk-brutal-fg:#fe5352; --medal-1-bg:#a8703c; --medal-1-fg:#1a0f05; --medal-2-bg:#9aa4b2; --medal-2-fg:#12151a; --medal-3-bg:#c9a227; --medal-3-fg:#1a1500; --heat-fg:#32faab; --heat-bg:rgba(50,250,171,.07); /* Points bands: a return, a good one, a haul. A ramp, so it lives in the palette like the other four. */ --pts-mid-bg:rgba(50,250,171,.16); --pts-hi-bg:#32faab; --pts-hi-fg:#101310; --wk-best:#07240f; --alert-r:#f0b4b4; --alert-a:#e8d19a; --planbad-fg:#f3c4c8; --repl-hover:rgba(254,107,65,.14); --trophy-line:#4a4020; } /* ---------------------------------------------------------------- light A second palette, not an inversion. Inverting a dark scheme gives you grey text on white and colours that shout; these are chosen for paper -- darker, less saturated accents that hold their meaning at small sizes, and fills pale enough that a pill still reads as a pill rather than a highlighter. The rules below the tokens are the handful of places that hard-code a colour because it has to sit on a solid fill. */ :root[data-theme="light"]{ /* ---- the approved light palette, 15 Sep 2026 handoff ------------------ Every value here is one the approved reference actually renders. It was derived by running this app's own dark tokens through the transform in the handoff's shared/theme.js and then reading the result back off the running reference -- which is why `--bg` is #f5f7f1 and not a guess. theme.js itself is NOT ported. The handoff is explicit that the runtime palette conversion is a prototype mechanism and its RESULT is the contract, so the result is baked into these tokens and no CSS is rewritten in the browser. WHAT THE REFERENCE ACTUALLY USES, counted off the rendered page: three text colours (ink, muted, accent) and one neutral border. The app has more tokens than that, so several collapse onto the same value. That is the approved look rather than a loss of hierarchy -- the reference gets its separation from weight and spacing, not from a fourth grey. */ /* HIS LIGHT SHEET, 18 Sep 2026. The page is a neutral grey rather than the old green-tinted off-white, and the panels above it stay white, so the separation comes from the step rather than from a tint. --panel2 follows the page neutral for the same reason. */ /* WHITE, not an off-white (Luis, 18 Sep). The page and the panels on it are the same white and the separation comes from spacing, rule and the coloured cards -- which is what the approved reference does too. --panel2 is the one step off it, for a table header or a hover, and stays neutral rather than green-tinted. */ --bg:#ffffff; --panel:#ffffff; --panel2:#f2f2f2; --noticebg:#ffffff; /* The board's ink in Light is the approved comps' rendered ink (their light layer sets one text colour); the mint itself does not change. */ --boardink:#111512; --readbg:#ffffff; --readline:#c24a23; --pillon-bg:#e8eee3; --pillon-line:#b9c9b2; --card:#ffffff; --gold:#756000; --posrule:#258256; --fieldbg:#ffffff; --fieldline:#b9c9b2; --pillfill:#faa832; --pillfillink:#111512; --pillfillline:#faa832; --dovcard:#ffffff; --dovbig:#111512; --dovbar:#9fb498; --notebg:#ffffff; --dsmint:#c4d9c5; --dsink:#111512; --dsline:#91a991; --dsrail:#283529; --dsdt:#344b37; --dsbar:#dfeddf; --dsgreen:#0b6338; --dstrack:#abc4ae; --logtot:#e4efe4; --fillink:#111512; --threatbg:#fff6f0; --medalink:#191e18; --medal3:#e0bb5b; --medal2:#bfc9d2; --medal1:#c89063; --lograte:#f2f6f1; --dsgrid:#a5bea7; --boardlabel:#485a45; --boardrule:#b9c9b2; --tierule:#b9c9b2; --tieown:#ffffff; --tiev:#50634e; --tiescore:#e8eee3; --tiescoreink:#1c3024; /* #1b9263, not the mint. `07b1651` flipped these two Light blocks to #32faab while adding live leaders and trailers, which reverted the approved Light palette as a side effect of an unrelated feature. The green measures 4.68:1 against --fillink, so it was never a legibility fix to undo -- and mint on a white ground is the one thing Light was told not to be. The feature itself is untouched. */ --fillwin:#1b9263; --filllose:#fa3245; --loseink:#111512; --oppink:var(--dim); /* THE COLOUR A BAR IS DRAWN IN. Separate from the accent since 17 Sep 2026, when the dark accent became the mint: a chart is not chrome, and a reader should not have to work out whether a filled bar is a brand flourish or a number. It stays the orange in both themes, like every other colour in here that means something rather than decorates. */ /* THE CHART ORANGE, DARKENED FOR LIGHT ONLY. Dark keeps the comps' value exactly: on a near-black page that orange is a strong mark. In Light the same value is painted on white, on the panel, on the dossier's mint card and on the pale tracks behind the bars, where it measured 2.84, 2.63, 1.90 and 1.52 against the 3:1 a graphic that carries meaning has to clear -- and two of the dossier's labels use it as TEXT, which wants 4.5. It is the falling line, the bar under the threshold, the denied claim: a reader who cannot see it is missing the finding, not the decoration. Burnt amber rather than a darker rust, so it stays a DATA colour and does not collapse into the chrome accent, which is the red end of the same family. Worst ground 3.99, the mint card 5.00. */ /* HIS RED, EXACTLY. I darkened this to #c01526 for the pale tracks it is drawn on and he stopped me: a bar is a fill, not text, and the rule he set was a darker sibling for TEXT only. The tracks behind these bars are the thing to fix if the bar is hard to see, not the bar. */ --dataline:#fa3245; --honour:#e8eee3; --honourbench:#e8eee3; --honourprose:#50634e; --paperline:#b9c9b2; --deck:#1c3024; --resultline:#1c3024; --deskfield:#e1eadb; --deskline:#b9c9b2; --pendingink:#50634e; --commfield:#ffffff; /* INVERTED IN LIGHT, from his sheet: the case box is the one dark surface on a light page, with the amber as its rule and its heading. Measured on it -- amber 8.50, body 12.50. */ --casebg:#18201a; --caseline:#faa832; --caseink:#faa832; --casetext:#dfdfdf; --caserule:#3a4a3c; --caseaccent:#32faab; --fx-even-bg:#d6e0d0; --fx-even-fg:#1c3024; --fx-edge-bg:#e8eee3; --fx-edge-fg:#1c3024; /* WARM, LIKE ITS DARK COUNTERPART. This was #d6e0d0 -- the same value as --fx-even-bg -- so bands 3, 4 and 5 of the fixture run painted one colour and the chart could not tell an even week from a bad one. Dark separates the three by hue (green, olive, brown) and Light now does the same. */ --fx-under-bg:#eed8cd; --fx-under-fg:#6d3520; /* One neutral border in the reference. `--line3` is the app's "loudest, used sparingly" and would disappear at the same value, so it takes the approved muted green -- a colour from the palette, in a border role. */ --line:#b9c9b2; --line2:#b9c9b2; --line3:#50634e; --ctlline:#6f8569; /* His ink, and one muted tier that clears 4.5 on all three light grounds including the board -- the old #50634e fell to 4.26 there once the board took his slightly deeper mint. */ --text:#111512; --prose:#464f45; --dim:#464f45; --dim2:#464f45; /* ONE NOTCH DARKER, BECAUSE THE PILLS SIT ON THEIR OWN TINT. Each of these four is the ink of a pill whose ground is the same colour at a tenth of the strength, so the ink is never read against the page -- it is read against a wash of itself, which is the hardest ground it has. Measured there they came in at 4.09, 4.11, 4.31 and 4.42 against the 4.5 small text needs. Lowering the wash does not fix it: even at half the alpha the accent only reaches 4.43, because the ink itself is the limit. So the inks go one step down, same hue, and clear it on every ground the app puts them on -- 4.93, 4.99, 5.26 and 5.05 at their worst. Everywhere else these are read on the page, where the change only adds contrast: the accent as link text goes 4.78 to 6.36. The chart ramp (--d1..--d5) deliberately does NOT follow; those are data colours and belong to the chart, not the chrome. */ /* HIS THREE SIGNALS AT TEXT WEIGHT. The vivid values he drew -- the green #1b9263, the red #fa3245, the amber #faa832 -- are right as FILLS, where a dark label sits on them at 4.92 to 9.40. As small text on the light grounds they measure 2.95, 2.81 and 1.47, so the text role takes a darker sibling of each hue: 4.89, 4.67 and 4.71 at their worst, his colour still recognisably the colour. The fills below keep his exact hexes. */ --pos:#0e5640; --posdim:rgba(14,86,64,.10); --posline:rgba(14,86,64,.48); --neg:#9c0e1f; --negdim:rgba(156,14,31,.10); --negline:rgba(156,14,31,.50); --warn:#6a4500; --warndim:rgba(106,69,0,.12); --warnline:rgba(106,69,0,.46); --accent:#0e5640; --accentdim:rgba(14,86,64,.11); --accentline:rgba(14,86,64,.62); /* Text ON the accent fill. Left white deliberately: the approved rule says bright fills MAY keep a dark label, and the app fills with the darker light-mode accent rather than the bright one. Revisited with the button pass, where each filled control can be looked at. */ --onfill:#ffffff; --info:#285da0; --shadow:rgba(28,48,36,.18); --d1:#007849; --d2:#50634e; --d3:#756000; --d4:#b83e18; --d5:#ba3030; /* THE TICKER'S BANDS ARE TEXT ON THEIR OWN TINT, like the pills, and four of the five failed the same way: 4.11, 4.42, 4.09 and 4.25. Same correction, same hues -- 4.99, 5.05, 4.93 and 5.17. `ok` was already clear at 4.81 and is left where it is. */ --tk-easy-bg:rgba(14,86,64,.10); --tk-easy-fg:#0e5640; --tk-ok-bg:rgba(70,79,69,.10); --tk-ok-fg:#464f45; --tk-even-bg:rgba(106,69,0,.12); --tk-even-fg:#6a4500; --tk-hard-bg:rgba(192,21,38,.11); --tk-hard-fg:#c01526; --tk-brutal-bg:rgba(156,14,31,.11); --tk-brutal-fg:#9c0e1f; --medal-1-bg:#c08a55; --medal-1-fg:#1c3024; --medal-2-bg:#c3cad4; --medal-2-fg:#1c3024; --medal-3-bg:#d8b53a; --medal-3-fg:#1c3024; --heat-fg:#007849; --heat-bg:rgba(0,120,73,.09); --pts-mid-bg:rgba(0,120,73,.14); /* The one place the approved rule is explicit: a bright fill keeps its colour and takes a dark label. */ --pts-hi-bg:#32faab; --pts-hi-fg:#1c3024; --wk-best:#dfeddf; --alert-r:#ba3030; --alert-a:#756000; --planbad-fg:#ba3030; --repl-hover:rgba(184,62,24,.10); --trophy-line:#b9c9b2; } /* ---------------------------------------------- light, without being asked The palette above is reached by the toggle. This one is reached by the reader's operating system, which is what most people actually set and never think about again. Guarded by :not([data-theme="dark"]) so an explicit choice still wins over the system in BOTH directions -- picking dark on a machine set to light has to stick, and without the guard the media query would quietly undo it. The declarations are a copy of the block above, and a copy is a thing that drifts. tests_acceptance.py compares the two token-for-token, so a colour added to one and not the other fails a check rather than showing up as one wrong pill months later. */ @media(prefers-color-scheme:light){ :root:not([data-theme="dark"]):not([data-theme="light"]){ /* ---- the approved light palette, 15 Sep 2026 handoff ------------------ Every value here is one the approved reference actually renders. It was derived by running this app's own dark tokens through the transform in the handoff's shared/theme.js and then reading the result back off the running reference -- which is why `--bg` is #f5f7f1 and not a guess. theme.js itself is NOT ported. The handoff is explicit that the runtime palette conversion is a prototype mechanism and its RESULT is the contract, so the result is baked into these tokens and no CSS is rewritten in the browser. WHAT THE REFERENCE ACTUALLY USES, counted off the rendered page: three text colours (ink, muted, accent) and one neutral border. The app has more tokens than that, so several collapse onto the same value. That is the approved look rather than a loss of hierarchy -- the reference gets its separation from weight and spacing, not from a fourth grey. */ /* WHITE, not an off-white (Luis, 18 Sep). The page and the panels on it are the same white and the separation comes from spacing, rule and the coloured cards -- which is what the approved reference does too. --panel2 is the one step off it, for a table header or a hover, and stays neutral rather than green-tinted. */ --bg:#ffffff; --panel:#ffffff; --panel2:#f2f2f2; --noticebg:#ffffff; /* The board's ink in Light is the approved comps' rendered ink (their light layer sets one text colour); the mint itself does not change. */ --boardink:#111512; --readbg:#ffffff; --readline:#c24a23; --pillon-bg:#e8eee3; --pillon-line:#b9c9b2; --card:#ffffff; --gold:#756000; --posrule:#258256; --fieldbg:#ffffff; --fieldline:#b9c9b2; --pillfill:#faa832; --pillfillink:#111512; --pillfillline:#faa832; --dovcard:#ffffff; --dovbig:#111512; --dovbar:#9fb498; --notebg:#ffffff; --dsmint:#c4d9c5; --dsink:#111512; --dsline:#91a991; --dsrail:#283529; --dsdt:#344b37; --dsbar:#dfeddf; --dsgreen:#0b6338; --dstrack:#abc4ae; --logtot:#e4efe4; --fillink:#111512; --threatbg:#fff6f0; --medalink:#191e18; --medal3:#e0bb5b; --medal2:#bfc9d2; --medal1:#c89063; --lograte:#f2f6f1; --dsgrid:#a5bea7; --boardlabel:#485a45; --boardrule:#b9c9b2; --tierule:#b9c9b2; --tieown:#ffffff; --tiev:#50634e; --tiescore:#e8eee3; --tiescoreink:#1c3024; /* #1b9263, not the mint. `07b1651` flipped these two Light blocks to #32faab while adding live leaders and trailers, which reverted the approved Light palette as a side effect of an unrelated feature. The green measures 4.68:1 against --fillink, so it was never a legibility fix to undo -- and mint on a white ground is the one thing Light was told not to be. The feature itself is untouched. */ --fillwin:#1b9263; --filllose:#fa3245; --loseink:#111512; --oppink:var(--dim); /* THE COLOUR A BAR IS DRAWN IN. Separate from the accent since 17 Sep 2026, when the dark accent became the mint: a chart is not chrome, and a reader should not have to work out whether a filled bar is a brand flourish or a number. It stays the orange in both themes, like every other colour in here that means something rather than decorates. */ /* THE CHART ORANGE, DARKENED FOR LIGHT ONLY. Dark keeps the comps' value exactly: on a near-black page that orange is a strong mark. In Light the same value is painted on white, on the panel, on the dossier's mint card and on the pale tracks behind the bars, where it measured 2.84, 2.63, 1.90 and 1.52 against the 3:1 a graphic that carries meaning has to clear -- and two of the dossier's labels use it as TEXT, which wants 4.5. It is the falling line, the bar under the threshold, the denied claim: a reader who cannot see it is missing the finding, not the decoration. Burnt amber rather than a darker rust, so it stays a DATA colour and does not collapse into the chrome accent, which is the red end of the same family. Worst ground 3.99, the mint card 5.00. */ /* HIS RED, EXACTLY. I darkened this to #c01526 for the pale tracks it is drawn on and he stopped me: a bar is a fill, not text, and the rule he set was a darker sibling for TEXT only. The tracks behind these bars are the thing to fix if the bar is hard to see, not the bar. */ --dataline:#fa3245; --honour:#e8eee3; --honourbench:#e8eee3; --honourprose:#50634e; --paperline:#b9c9b2; --deck:#1c3024; --resultline:#1c3024; --deskfield:#e1eadb; --deskline:#b9c9b2; --pendingink:#50634e; --commfield:#ffffff; /* INVERTED IN LIGHT, from his sheet: the case box is the one dark surface on a light page, with the amber as its rule and its heading. Measured on it -- amber 8.50, body 12.50. */ --casebg:#18201a; --caseline:#faa832; --caseink:#faa832; --casetext:#dfdfdf; --caserule:#3a4a3c; --caseaccent:#32faab; --fx-even-bg:#d6e0d0; --fx-even-fg:#1c3024; --fx-edge-bg:#e8eee3; --fx-edge-fg:#1c3024; /* WARM, LIKE ITS DARK COUNTERPART. This was #d6e0d0 -- the same value as --fx-even-bg -- so bands 3, 4 and 5 of the fixture run painted one colour and the chart could not tell an even week from a bad one. Dark separates the three by hue (green, olive, brown) and Light now does the same. */ --fx-under-bg:#eed8cd; --fx-under-fg:#6d3520; /* One neutral border in the reference. `--line3` is the app's "loudest, used sparingly" and would disappear at the same value, so it takes the approved muted green -- a colour from the palette, in a border role. */ --line:#b9c9b2; --line2:#b9c9b2; --line3:#50634e; --ctlline:#6f8569; /* His ink, and one muted tier that clears 4.5 on all three light grounds including the board -- the old #50634e fell to 4.26 there once the board took his slightly deeper mint. */ --text:#111512; --prose:#464f45; --dim:#464f45; --dim2:#464f45; /* ONE NOTCH DARKER, BECAUSE THE PILLS SIT ON THEIR OWN TINT. Each of these four is the ink of a pill whose ground is the same colour at a tenth of the strength, so the ink is never read against the page -- it is read against a wash of itself, which is the hardest ground it has. Measured there they came in at 4.09, 4.11, 4.31 and 4.42 against the 4.5 small text needs. Lowering the wash does not fix it: even at half the alpha the accent only reaches 4.43, because the ink itself is the limit. So the inks go one step down, same hue, and clear it on every ground the app puts them on -- 4.93, 4.99, 5.26 and 5.05 at their worst. Everywhere else these are read on the page, where the change only adds contrast: the accent as link text goes 4.78 to 6.36. The chart ramp (--d1..--d5) deliberately does NOT follow; those are data colours and belong to the chart, not the chrome. */ /* HIS THREE SIGNALS AT TEXT WEIGHT. The vivid values he drew -- the green #1b9263, the red #fa3245, the amber #faa832 -- are right as FILLS, where a dark label sits on them at 4.92 to 9.40. As small text on the light grounds they measure 2.95, 2.81 and 1.47, so the text role takes a darker sibling of each hue: 4.89, 4.67 and 4.71 at their worst, his colour still recognisably the colour. The fills below keep his exact hexes. */ --pos:#0e5640; --posdim:rgba(14,86,64,.10); --posline:rgba(14,86,64,.48); --neg:#9c0e1f; --negdim:rgba(156,14,31,.10); --negline:rgba(156,14,31,.50); --warn:#6a4500; --warndim:rgba(106,69,0,.12); --warnline:rgba(106,69,0,.46); --accent:#0e5640; --accentdim:rgba(14,86,64,.11); --accentline:rgba(14,86,64,.62); /* Text ON the accent fill. Left white deliberately: the approved rule says bright fills MAY keep a dark label, and the app fills with the darker light-mode accent rather than the bright one. Revisited with the button pass, where each filled control can be looked at. */ --onfill:#ffffff; --info:#285da0; --shadow:rgba(28,48,36,.18); --d1:#007849; --d2:#50634e; --d3:#756000; --d4:#b83e18; --d5:#ba3030; /* THE TICKER'S BANDS ARE TEXT ON THEIR OWN TINT, like the pills, and four of the five failed the same way: 4.11, 4.42, 4.09 and 4.25. Same correction, same hues -- 4.99, 5.05, 4.93 and 5.17. `ok` was already clear at 4.81 and is left where it is. */ --tk-easy-bg:rgba(14,86,64,.10); --tk-easy-fg:#0e5640; --tk-ok-bg:rgba(70,79,69,.10); --tk-ok-fg:#464f45; --tk-even-bg:rgba(106,69,0,.12); --tk-even-fg:#6a4500; --tk-hard-bg:rgba(192,21,38,.11); --tk-hard-fg:#c01526; --tk-brutal-bg:rgba(156,14,31,.11); --tk-brutal-fg:#9c0e1f; --medal-1-bg:#c08a55; --medal-1-fg:#1c3024; --medal-2-bg:#c3cad4; --medal-2-fg:#1c3024; --medal-3-bg:#d8b53a; --medal-3-fg:#1c3024; --heat-fg:#007849; --heat-bg:rgba(0,120,73,.09); --pts-mid-bg:rgba(0,120,73,.14); /* The one place the approved rule is explicit: a bright fill keeps its colour and takes a dark label. */ --pts-hi-bg:#32faab; --pts-hi-fg:#1c3024; --wk-best:#dfeddf; --alert-r:#ba3030; --alert-a:#756000; --planbad-fg:#ba3030; --repl-hover:rgba(184,62,24,.10); --trophy-line:#b9c9b2; } } :root[data-theme="light"] .planbad{border-color:var(--negline); background:#fceceb;color:#8c2b25} :root[data-theme="light"] .pending{border-color:var(--warnline)} :root[data-theme="light"] .dl.soon{border-color:var(--warnline)} *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--text);font-family:var(--sans); font-size:var(--t-m);line-height:1.5;-webkit-font-smoothing:antialiased} /* Text scale. `zoom` is used deliberately over a font-size cascade: this stylesheet sizes in px throughout, so scaling the root font would move some text and leave the rest -- which reads as a bug, not a setting. Zoom scales the layout with the type and keeps every alignment intact. */ :root[data-fs] .app{zoom:var(--fs)} a{color:inherit} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input,select{font:inherit;color:inherit} /* scrollbar-design-rule.md: slim 6px bars, a track that matches the surface, a muted rounded thumb and an orange one under the cursor. Everywhere -- tables, drawers, dossiers, the page itself. */ *{scrollbar-width:thin;scrollbar-color:var(--line2) transparent} *::-webkit-scrollbar{width:6px;height:6px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px} *::-webkit-scrollbar-thumb:hover{background:var(--accent)} /* ---------------------------------------------------------------- layout */ .app{display:flex;min-height:100vh} .side{width:212px;flex:none;border-right:1px solid var(--line); background:var(--panel);display:flex;flex-direction:column; position:sticky;top:0;height:100vh} /* The wordmark from the design handoff: set big, on two lines, with the tagline underneath. It was a 12.5px letterspaced label, which made the product's own name the quietest thing on the screen. */ .brand{padding:26px 22px 18px;border-bottom:none} /* The phone shell's pieces -- header, tabs row, bottom bar, sheet. Hidden by default and turned on inside the 640px block, because an element that is only ever styled INSIDE a media query is not hidden outside it: the hamburger this replaces was visible at every desktop width for two phases for exactly that reason. */ .phead,.ptabs,.pnav,.psheet,.psheet[hidden]{display:none} .brand .wordmark,.brand h1{color:var(--accent); font-size:var(--t-2xl);line-height:1.04;letter-spacing:-.01em; font-weight:700;text-transform:uppercase;max-width:9ch;text-wrap:balance} .brand .sub{font-size:var(--t-s);color:var(--dim);line-height:1.4; margin-top:10px;max-width:17ch} .nav{padding:10px 8px;flex:1;overflow:auto} .nav button{display:flex;justify-content:space-between;align-items:center; width:100%;text-align:left;padding:8px 10px;border-radius:var(--r); color:var(--dim);font-size:var(--t-m);font-weight:600;margin-bottom:1px; position:relative} /* The approved menu icon system (menu-icon-design-rule.md): one glyph per destination, 18px at 1.6 stroke beside a semibold section label, 14px at 1.5 beside a regular page label. No tiles behind them. The open item and the hovered one are orange -- the glyph with the word. */ .nav button .ni{display:inline-flex;flex:none;width:18px;height:18px; margin-right:10px;color:inherit} .nav button .ni svg{width:100%;height:100%;display:block} .nav button>span:not(.ni):not(.tag){flex:1;min-width:0} .nav button:hover{color:var(--accent)} .nav button.on{background:none;color:var(--accent);font-weight:600} /* Group headings. Labels, not controls -- nothing about them is clickable. */ .nav .navgrp{font-size:var(--t-xxs);letter-spacing:.16em;text-transform:uppercase; color:var(--dim2);padding:20px 10px 6px;margin:25px 0 8px} .nav .navgrp:first-child{padding-top:4px} .nav .tag{font-variant-numeric:tabular-nums;font-size:var(--t-xxs);color:var(--dim2)} .sidefoot{padding:12px 14px;border-top:1px solid var(--line);font-size:var(--t-xs); color:var(--dim2)} .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{display:flex;align-items:center;gap:16px;padding:12px 22px; border-bottom:1px solid var(--line);background:var(--panel); position:sticky;top:0;z-index:20;flex-wrap:wrap} .gw{font-variant-numeric:tabular-nums;font-size:var(--t-s);letter-spacing:.1em;color:var(--dim)} .gw b{color:var(--text)} .dl{font-variant-numeric:tabular-nums;font-size:var(--t-s);padding:3px 8px;border-radius:4px; background:var(--panel2);border:1px solid var(--line2);color:var(--dim)} .dl.soon{background:var(--warndim);border-color:var(--warnline);color:var(--warn)} .spacer{flex:1} /* button-design-rule.md: a standalone action is a pill, an icon-only one a circle, and a segmented control rounds only its outer ends -- the joins inside stay flush. Inputs, cards and tables keep their corners. */ .btn{padding:6px 12px;border:1px solid var(--ctlline);border-radius:999px; font-size:var(--t-s);color:var(--dim);background:var(--panel2)} .btn:hover{color:var(--text);border-color:var(--line3)} .btn.pri{background:var(--accentdim);border-color:var(--accentline);color:var(--accent)} /* Width and text size are preferences, not constants. A 1500px column is right on a laptop and a waste of a 34-inch monitor, and 14px is right for most people and small for some. */ .content{padding:22px;max-width:var(--maxw);width:100%} .app{font-size:calc(1rem * var(--fs))} /* --------------------------------------------------------------- generic */ h2.sec{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase; color:var(--dim2);font-weight:600;margin:38px 0 12px; display:flex;align-items:center;gap:10px} h2.sec:first-child{margin-top:0} /* A section that ends on its own footnote used to run straight into the next block, so the note read as a caption for the wrong thing. */ #view > p.dim2 + h2.sec, #view > .tablewrap + h2.sec{margin-top:44px} #view > p.dim2{margin-bottom:4px} #view > .mwrap{margin-top:4px} /* Section headings pin under the topbar, so scrolling a long list always shows which section you are in and hands over to the next one at the same place. Only top-level headings in the main view: the drawer scrolls itself and its own headings must not fight with these. The offset is a variable because the topbar WRAPS on a narrow window -- a hardcoded height leaves the heading floating over it or hidden behind it, so the real height is measured and written here. */ #view > h2.sec{position:sticky;top:var(--topbar-h,52px);z-index:12; background:var(--bg);margin:22px 0 0;padding:9px 0 9px; box-shadow:0 6px 10px -10px var(--bg)} #view > h2.sec:first-child{margin-top:-9px} /* Too little room to be worth pinning anything. */ :root.nostick #view > h2.sec{position:static} h2.sec .line{flex:1;height:1px;background:var(--line)} h2.sec .act{font-size:var(--t-xs);letter-spacing:.04em;text-transform:none; color:var(--accent);cursor:pointer} .panel{background:var(--panel);border:1px solid var(--line); border-radius:var(--r);padding:16px} .grid{display:grid;gap:14px} .muted{color:var(--dim)} .dim2{color:var(--dim2)} .mono{font-variant-numeric:tabular-nums} .pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)} .nowrap{white-space:nowrap} .center{text-align:center} .empty{padding:36px;text-align:center;color:var(--dim2);font-size:var(--t-s)} .pill{display:inline-block;font-variant-numeric:tabular-nums;font-size:var(--t-xxs); letter-spacing:.06em;padding:2px 6px;border-radius:3px; background:var(--panel2);border:1px solid var(--line2);color:var(--dim)} .pill.g{background:var(--posdim);border-color:var(--posline);color:var(--pos)} .pill.r{background:var(--negdim);border-color:var(--negline);color:var(--neg)} .pill.a{background:var(--warndim);border-color:var(--warnline);color:var(--warn)} .pill.b{background:var(--accentdim);border-color:var(--accentline);color:var(--accent)} /* ------------------------------------------------------------ top action */ .hero{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden; background:linear-gradient(180deg,var(--panel2),var(--panel))} .hero .bar{padding:7px 16px;font-variant-numeric:tabular-nums;font-size:var(--t-xs); letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--line)} .hero.claim .bar{background:var(--posdim);color:var(--pos)} .hero.hold .bar{background:var(--panel2);color:var(--dim)} .hero.setup .bar{background:var(--accentdim);color:var(--accent)} .hero .body{padding:18px} .movetitle{font-size:var(--t-3xl);font-weight:600;letter-spacing:-.01em; display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;line-height:1.25} .movetitle .arrow{color:var(--dim2);font-size:var(--t-l)} .movetitle .pl{cursor:pointer;border-bottom:1px dashed var(--line2)} .movetitle .pl:hover{color:var(--accent);border-color:var(--accent)} .deltas{display:flex;gap:26px;flex-wrap:wrap;margin:16px 0 4px; padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .delta .v{font-variant-numeric:tabular-nums;font-size:var(--t-xl);font-weight:600} .delta .k{font-size:var(--t-xxs);letter-spacing:.1em;text-transform:uppercase; color:var(--dim2);margin-top:2px} .why{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px} .why ul{list-style:none} .why li{font-size:var(--t-s);padding:4px 0 4px 16px;position:relative;color:var(--dim)} .why li:before{position:absolute;left:0;font-variant-numeric:tabular-nums} .why .p li:before{content:"+";color:var(--pos)} .why .n li:before{content:"\2212";color:var(--neg)} .why h3,.why h4{font-size:var(--t-xxs);letter-spacing:.14em;text-transform:uppercase; color:var(--dim2);margin-bottom:6px} /* ------------------------------------------------------------------- xi */ .pitch{display:grid;gap:10px;position:relative;padding-top:74px} .pitch>.kboard{top:10px;left:10%;width:80%} .row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap} .card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r); padding:8px 10px;min-width:112px;cursor:pointer;transition:border-color .12s} .card:hover{border-color:var(--accent)} .card .n{font-size:var(--t-s);font-weight:500;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:130px} .card .m{font-variant-numeric:tabular-nums;font-size:var(--t-xs);color:var(--dim2); display:flex;justify-content:space-between;gap:8px;margin-top:3px} .card .m b{color:var(--text);font-weight:600} .card.flag{border-color:var(--negline)} .bench{display:flex;gap:8px;flex-wrap:wrap} .bench .card{min-width:104px;opacity:.86} .bench .ord{font-variant-numeric:tabular-nums;font-size:var(--t-xxs);color:var(--dim2)} /* ---------------------------------------------------------------- table */ .tablewrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto; background:var(--panel);max-height:calc(100vh - 260px)} table{width:100%;border-collapse:collapse;font-size:var(--t-s)} th{position:sticky;top:0;background:var(--panel2);text-align:left; padding:8px 10px;font-size:var(--t-xxs);letter-spacing:.09em;text-transform:uppercase; color:var(--dim2);font-weight:600;border-bottom:1px solid var(--line); cursor:pointer;white-space:nowrap;z-index:2} th:hover{color:var(--text)} th.on{color:var(--accent)} td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap} tbody tr{cursor:pointer} tbody tr:hover{background:var(--panel2)} /* The first column names the row. Scrolling it out of view leaves a wall of numbers belonging to nobody, so it stays pinned to the left edge. */ .tablewrap th:first-child,.tablewrap td:first-child{position:sticky;left:0; z-index:3;background:var(--panel)} .tablewrap th:first-child{z-index:4} .tablewrap tbody tr:hover td:first-child{background:var(--panel2)} .tablewrap th:first-child::after,.tablewrap td:first-child::after{ content:"";position:absolute;top:0;right:0;bottom:0;width:1px; background:var(--line)} /* Totals rows carry their own background and must keep it under the pin. */ .tablewrap tr.totals td:first-child, .tablewrap tr.per90 td:first-child{background:var(--panel2)} td.num{font-variant-numeric:tabular-nums;text-align:right} /* Only td.num was right-aligned, so a numeric HEADER sat left while its numbers sat right — the column read as two ragged edges. */ th.num{text-align:right} .filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px} .filters input,.filters select{background:var(--panel2);border:1px solid var(--ctlline); border-radius:var(--r);padding:6px 10px;font-size:var(--t-s);outline:none} .filters input:focus,.filters select:focus{border-color:var(--accent)} .filters input[type=search]{min-width:210px} .seg{display:flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden} .seg button{padding:6px 11px;font-size:var(--t-s);color:var(--dim); border-right:1px solid var(--line2)} .seg button:last-child{border-right:none} .seg button.on{background:var(--accentdim);color:var(--accent)} .count{font-variant-numeric:tabular-nums;font-size:var(--t-xs);color:var(--dim2)} /* Classic's replacement review on Line up: the man coming in, and the men in his position who could make way. */ .planhold.cadd{display:block;scroll-margin-top:calc(var(--topbar-h,52px) + 10px)} .caddrows{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0} /* The card's own actions, under the name: watch, and in Classic, buy. */ .dacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px} .dacts .btn{border-color:var(--accent);color:var(--accent)} .dacts .btn:hover,.dacts .btn.on{background:var(--accent);color:var(--onfill); border-color:var(--accent)} /* --------------------------------------------------------------- drawer */ .scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40; opacity:0;pointer-events:none;transition:opacity .16s} .scrim.on{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(1180px,96vw); background:var(--bg);border-left:1px solid var(--line2);z-index:50; transform:translateX(100%);transition:transform .2s cubic-bezier(.4,0,.2,1); display:flex;flex-direction:column} /* Returns carries a 38-appearance rail. Give that evidence the same working width as the approved comp instead of crushing it into the general dossier measure. The other files keep their more readable 1180px maximum. */ .drawer[data-dossier-tab="defcon"]{width:min(1440px,96vw)} .drawer.on{transform:none} .dhead{padding:16px 20px;border-bottom:1px solid var(--line); background:var(--panel);position:sticky;top:0} .dhead .x{position:absolute;top:14px;right:16px;color:var(--dim2);font-size:var(--t-xl); line-height:1} .dhead .x:hover{color:var(--text)} .dhead h3{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.01em} .dhead .meta{color:var(--dim);font-size:var(--t-s);margin-top:4px; display:flex;gap:8px;flex-wrap:wrap;align-items:center} .dbody{padding:18px 20px 60px;overflow:auto;flex:1} .dbody .tablewrap{max-height:none} /* the drawer already scrolls */ .tabs{display:flex;flex-wrap:wrap;gap:2px 0; border-bottom:1px solid var(--line);margin:0 -20px 16px;padding:0 20px} .tabs button{padding:8px 12px;font-size:var(--t-s);color:var(--dim2); border-bottom:2px solid transparent;white-space:nowrap} .tabs button.on{color:var(--accent);border-color:var(--accent)} .kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px} .kv .b{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:9px 11px} .kv .b .k{font-size:var(--t-xxs);letter-spacing:.11em;text-transform:uppercase; color:var(--dim2)} .kv .b .v{font-variant-numeric:tabular-nums;font-size:var(--t-l);margin-top:3px} .kv .b .s{font-size:var(--t-xs);color:var(--dim2);margin-top:1px} .bars{display:grid;gap:5px;margin-top:4px} .bars .b{display:grid;grid-template-columns:130px 1fr 54px;gap:9px; align-items:center;font-size:var(--t-s)} .bars .t{height:7px;background:var(--panel2);border-radius:3px;overflow:hidden; position:relative} .bars .f{height:100%;background:var(--dataline);border-radius:3px} .bars .f.neg{background:var(--neg)} .bars .val{font-variant-numeric:tabular-nums;text-align:right;font-size:var(--t-s)} .bars .lbl{color:var(--dim)} .fixrow{display:flex;gap:5px;flex-wrap:wrap} .fix{border:1px solid var(--line);border-radius:4px;padding:5px 7px; background:var(--panel);min-width:56px;text-align:center} .fix .o{font-variant-numeric:tabular-nums;font-size:var(--t-xs)} .fix .e{font-size:var(--t-micro);color:var(--dim2);letter-spacing:.05em} .fix .p{font-variant-numeric:tabular-nums;font-size:var(--t-xs);margin-top:2px} .fix.d1{border-color:var(--posline)} .fix.d2{border-color:var(--d2)} .fix.d3{border-color:var(--line2)} .fix.d4{border-color:var(--d4)} .fix.d5{border-color:var(--negline)} .story p{font-size:var(--t-s);line-height:1.62;color:var(--prose);margin-bottom:9px} .plist{list-style:none} .plist li{font-size:var(--t-s);padding:7px 0 7px 20px;position:relative; border-bottom:1px solid var(--line);color:var(--dim)} .plist li:before{position:absolute;left:0;top:7px;font-variant-numeric:tabular-nums;font-size:var(--t-xs)} .plist li.positive:before{content:"\25B2";color:var(--pos)} .plist li.negative:before{content:"\25BC";color:var(--neg)} .plist li.neutral:before{content:"\25CF";color:var(--dim2)} .plist li .sm{color:var(--dim2);font-size:var(--t-xs);margin-left:6px;font-variant-numeric:tabular-nums} .matchup{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start} .score{font-variant-numeric:tabular-nums;font-size:var(--t-4xl);font-weight:600;text-align:center} .vs{text-align:center;color:var(--dim2);font-size:var(--t-xs);letter-spacing:.14em; padding-top:8px} .edges{display:grid;gap:6px;margin-top:12px} .edge{display:grid;grid-template-columns:44px 1fr 150px;gap:9px;align-items:center; font-size:var(--t-s)} .edge .t{height:6px;background:var(--panel2);border-radius:3px;position:relative} .edge .f{position:absolute;top:0;bottom:0;background:var(--pos);border-radius:3px} .edge .f.neg{background:var(--neg)} .edge .lead{font-size:var(--t-xs);text-align:right;font-variant-numeric:tabular-nums; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Which end of the bar means what, said once above the rows. */ .edgehead{display:grid;grid-template-columns:44px 1fr 150px;gap:9px; margin-top:12px;font-size:var(--t-xxs);letter-spacing:.09em;text-transform:uppercase; color:var(--dim2)} .edgehead>span:nth-child(2){display:flex;justify-content:space-between} .edgehead i{font-style:normal} .edgehead>span:last-child{text-align:right} /* The centre line the bars diverge from. */ .edge .t::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px; width:1px;background:var(--line2)} .chg{border-bottom:1px solid var(--line);padding:10px 0;cursor:pointer} .chg:hover{background:var(--panel2)} .chg .h{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap} .chg .n{font-weight:500} .chg ul{list-style:none;margin-top:4px} .chg li{font-size:var(--t-s);color:var(--dim);padding-left:12px;position:relative} .chg li:before{content:"\2192";position:absolute;left:0;color:var(--dim2)} .matrix{overflow:auto;border:1px solid var(--line);border-radius:var(--r)} .matrix table{font-size:var(--t-s)} .matrix td.c{font-variant-numeric:tabular-nums;text-align:center;padding:5px 8px} .cell0{color:var(--dim2)} .cell1{color:var(--heat-fg);background:var(--heat-bg)} .cell2{color:var(--pos);background:color-mix(in srgb,var(--pos) 15%,transparent)} .cell3{color:var(--onfill);background:var(--pos);font-weight:600} .celln{color:var(--neg);background:rgba(248,113,113,.09)} .setup{max-width:520px;margin:60px auto} .setup input{width:100%;background:var(--panel2);border:1px solid var(--line2); border-radius:var(--r);padding:10px 12px;margin:6px 0 12px;outline:none} .setup input:focus{border-color:var(--accent)} .setup .opt{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r); margin-bottom:6px;cursor:pointer;background:var(--panel)} .setup .opt:hover{border-color:var(--accent)} .load{padding:60px;text-align:center;color:var(--dim)} .load .s{font-variant-numeric:tabular-nums;font-size:var(--t-s);color:var(--dim2);margin-top:8px} .spin{width:18px;height:18px;border:2px solid var(--line2); border-top-color:var(--accent);border-radius:50%;margin:0 auto; animation:sp .7s linear infinite} @keyframes sp{to{transform:rotate(360deg)}} .srcs{display:flex;gap:8px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--dim2)} .srcs span{padding:3px 7px;border:1px solid var(--line);border-radius:3px} @media(max-width:900px){ .app{flex-direction:column} .side{width:100%;height:auto;position:static;flex-direction:row; align-items:center;overflow:auto} .brand{border-bottom:none;border-right:1px solid var(--line);flex:none;padding:12px 14px} .brand .sub{display:none} .brand .wordmark,.brand h1{font-size:var(--t-s);max-width:none} .nav{display:flex;padding:6px;gap:2px} /* A strip has no room for headings, and a heading between two buttons in a row reads as a button that does nothing. */ .nav .navgrp{display:none} .nav button{width:auto;white-space:nowrap} .nav .tag{display:none} .sidefoot{display:none} .content{padding:14px} .why{grid-template-columns:1fr} .matchup{grid-template-columns:1fr} .vs{padding:8px 0} .drawer{width:100%} .drawer[data-dossier-tab="defcon"]{width:100%} .movetitle{font-size:var(--t-xl)} .tablewrap{max-height:none} } /* ---------------------------------------------- squad news & availability */ .newsitem{padding:9px 0;border-bottom:1px solid var(--line)} .newsitem:last-of-type{border-bottom:none} .newsitem .nh{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;cursor:pointer} .newsitem .nn{font-weight:500} .newsitem .nb{font-size:var(--t-s);color:var(--prose);margin-top:3px} .newsitem .nm{font-size:var(--t-xs);color:var(--dim2);margin-top:3px} .newsitem.r{border-left:2px solid var(--neg);padding-left:10px} .newsitem.a{border-left:2px solid var(--warn);padding-left:10px} .newsitem.g{border-left:2px solid var(--pos);padding-left:10px} .availrow{padding:7px 0;border-bottom:1px solid var(--line);cursor:pointer} .availrow:last-child{border-bottom:none} .availrow:hover{background:var(--panel2)} .availrow .nn{font-weight:500;font-size:var(--t-s)} .teamrow{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:5px 0;border-bottom:1px solid var(--line);cursor:pointer} .teamrow:hover{background:var(--panel2)} .seg button[disabled]{cursor:not-allowed} .panel.busy{opacity:.5} /* ------------------------------------------------------------ gw report */ .report .mixedzone h3,.report h4{font-size:var(--t-xxs);letter-spacing:.15em;text-transform:uppercase; color:var(--accent);margin:18px 0 7px;font-weight:600} .report .mixedzone h3:first-child,.report h4:first-child{margin-top:0} /* A measured line. 74 characters is a wide column to read a whole report down; the handoff asks for measured lines and this is what that means. */ .report p{font-size:var(--t-l);line-height:1.72;color:var(--prose);margin-bottom:15px; max-width:66ch} /* The single outcome. The lead paragraph IS the story -- it was set at the same size as the match round-ups underneath it. */ .report p.lead{font-size:var(--t-xl);line-height:1.45;color:var(--text); font-weight:600;margin:14px 0 16px} textarea:focus{border-color:var(--accent)} tr.mineRow{background:color-mix(in srgb,var(--accent) 6%,transparent)} /* --------------------------------------------------------- league switcher */ .leaguebar{display:flex;gap:2px;align-items:center;border:1px solid var(--ctlline); border-radius:var(--r);overflow:hidden;flex-wrap:wrap} .leaguebar .lg{padding:5px 11px;font-size:var(--t-s);color:var(--dim); border-right:1px solid var(--ctlline);white-space:nowrap} .leaguebar .lg:last-child{border-right:none} .leaguebar .lg:hover{color:var(--text);background:var(--panel2)} .leaguebar .lg.on{background:var(--accentdim);color:var(--accent)} .leaguebar .lg.add{color:var(--dim2)} .leaguebar .lg.add:hover{color:var(--accent)} /* ---------------------------------------------------------------- watchlist */ .watchcard{background:var(--panel);border:1px solid var(--line); border-radius:var(--r);padding:12px;cursor:pointer} .watchcard:hover{border-color:var(--line2)} .watchcard .wh{display:flex;justify-content:space-between;align-items:baseline; gap:10px;flex-wrap:wrap} .watchcard .nn{font-weight:500;font-size:var(--t-m)} .watchcard .wr{font-size:var(--t-s);color:var(--dim);margin-top:6px;line-height:1.5} .watchcard .wmeta{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px; font-variant-numeric:tabular-nums;font-size:var(--t-xs);color:var(--dim2)} .watchcard .wmove{margin-top:9px;padding-top:8px;border-top:1px solid var(--line); font-size:var(--t-s);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .watchcard .fix{display:inline-flex;flex-direction:column;align-items:center} /* ------------------------------------------------- report voice controls */ .vin{width:100%;background:var(--panel2);border:1px solid var(--line2); border-radius:var(--r);padding:8px 10px;margin:5px 0 10px;color:var(--text); font:inherit;outline:none} .vin:focus{border-color:var(--accent)} .vin.sm{padding:5px 8px;margin:0;font-size:var(--t-s)} .report .byline{font-size:var(--t-xs);color:var(--dim2);letter-spacing:.05em; border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:13px} .report p.opener{font-size:var(--t-l);color:var(--text)} .report p.persona{font-style:italic;color:var(--dim)} .report p.signoff{color:var(--dim2);font-style:italic;margin-top:12px} .report p.highscore{color:var(--warn)} /* Group-chat voice: the scoreline block is one line per match, so it has to keep its newlines, and the premises read as separated messages. */ .report p.scores{white-space:pre-line;font-variant-numeric:tabular-nums; color:var(--dim);border-left:2px solid var(--line2);padding-left:10px; margin:10px 0 14px} .report p.premise{margin-bottom:13px} /* The brief: the one field that replaced six panels. */ /* Probability cell: the figure, with a bar behind it for scanning. */ .pbar{position:relative;display:inline-block;min-width:52px;text-align:right; padding:1px 5px;border-radius:3px;overflow:hidden} .pbar i{position:absolute;left:0;top:0;bottom:0;background:var(--dataline); opacity:.16;border-radius:3px} .pbar b{position:relative;font-weight:500;font-variant-numeric:tabular-nums} .brief{margin-bottom:14px} .brief textarea{width:100%;min-height:96px;background:var(--panel2); border:1px solid var(--line2);border-radius:var(--r);padding:10px 12px; color:var(--text);font:inherit;line-height:1.6;outline:none;resize:vertical} .brief textarea:focus{border-color:var(--accent)} .briefread{margin-top:10px;padding-top:9px;border-top:1px solid var(--line); display:flex;flex-direction:column;gap:6px;font-size:var(--t-xs)} .briefread .pill{margin-right:7px} /* The correspondent's own material, in his own words. Set apart from the generated copy so it is obvious which half the app wrote. */ .report p.coldopen,.report p.lastword{white-space:pre-line;color:var(--text)} .report p.turn{font-weight:600;margin:14px 0 10px} .report p.standfirst{color:var(--dim);font-style:italic;margin-bottom:14px} .report p.interview{white-space:pre-line} /* When a player is named in the body of a story rather than its headline, the sentence that names him is shown -- otherwise the card reads as a headline about somebody else entirely. */ .exq{margin-top:3px;padding-left:8px;border-left:2px solid var(--line2); color:var(--dim);font-style:italic} /* The Keep decision, offered on the card that raises the question. */ .keepline{display:flex;align-items:center;gap:8px;flex-wrap:wrap; margin-top:9px;padding-top:9px;border-top:1px solid var(--line)} .keepline .dim2{font-size:var(--t-xs);line-height:1.5;flex:1;min-width:160px} /* A joke that rests on outside news carries its source, so the reader can check the transfer rather than take the punchline's word for it. */ .report .prov{display:block;margin-top:4px;font-size:var(--t-xs);color:var(--dim2)} .report .prov a{color:var(--dim2);text-decoration:underline} .report .prov a:hover{color:var(--accent)} .report p.note{border-left:2px solid var(--accent);padding-left:10px;color:var(--dim)} .report .mixedzone{border:1px solid var(--line2);border-radius:var(--r); padding:12px 14px;margin:14px 0;background:var(--panel2)} .report .mixedzone h3,.report .mixedzone h4{margin-top:0} .report .mixedzone p{margin-bottom:5px;font-size:var(--t-s)} /* ---------------------------------------------------------- exit radar */ .exitcard{background:var(--panel);border:1px solid var(--line); border-radius:var(--r);padding:12px} .exitcard.strong{border-color:var(--negline)} .exitcard .wh{display:flex;justify-content:space-between;gap:10px; align-items:baseline;flex-wrap:wrap} .exitcard .nn{font-weight:500;cursor:pointer} .exitcard .nn:hover{color:var(--accent)} .exitcard .wr{font-size:var(--t-s);color:var(--prose);margin-top:6px} .exitcard .nm{font-size:var(--t-xs);color:var(--dim2);margin-top:4px} .exitcard .wmove{margin-top:10px;padding-top:9px;border-top:1px solid var(--line); display:flex;gap:8px;flex-wrap:wrap} details summary::-webkit-details-marker{color:var(--dim2)} /* ------------------------------------------------------------ live view */ .lbar{text-align:center;margin-bottom:14px} .lbig{font-variant-numeric:tabular-nums;font-size:var(--t-5xl);font-weight:600;letter-spacing:-.02em} .lgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .lside{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:12px} .lhead{text-align:center;padding-bottom:10px;border-bottom:1px solid var(--line); margin-bottom:10px} .lhead .lt{font-size:var(--t-m);font-weight:500} .lhead .lscore{font-variant-numeric:tabular-nums;font-size:var(--t-3xl);margin:4px 0 2px} .lgrp{margin-bottom:10px} .lgl{font-size:var(--t-xxs);letter-spacing:.12em;text-transform:uppercase; color:var(--dim2);margin-bottom:4px} /* your-match-system-review.html: the team-sheet row. Name and fixture on the left, points on the right, what he did inside the disclosure. */ .lrow{display:block;padding:0;border-radius:0;cursor:pointer; border-bottom:1px solid var(--line);background:none} .lrow:hover{background:none} .lrow>summary{display:grid;grid-template-columns:minmax(0,1fr) 48px; align-items:center;gap:12px;padding:14px 0;min-height:70px;list-style:none; cursor:pointer} .lrow>summary::-webkit-details-marker{display:none} .lrow>summary:hover .l1{color:var(--accent)} .lrow .l1{font-size:var(--t-m);font-weight:600;letter-spacing:-.15px; display:block} .lrow .l1 .club{color:var(--dim);font-size:var(--t-xs);margin-left:5px; font-weight:400} .lrow .l2{display:block;color:var(--dim);font-size:var(--t-xs);line-height:1.5; margin-top:5px;font-family:inherit} .lrow .lp{font-size:var(--t-23);letter-spacing:-.7px; font-variant-numeric:tabular-nums;text-align:right;font-weight:500; font-family:var(--sans);color:var(--text)} .lrow .lp.return{color:var(--pos)} .lrow.tbc .lp{color:var(--dim2)} .lrow .l3{padding:0 0 14px;font-size:var(--t-s);color:var(--board); line-height:1.5;margin:0} .lrow.tbc>summary{cursor:default} .lrow.tbc>summary:hover .l1{color:inherit} .lrow.did_not_play{opacity:.55} .lrow.upcoming{opacity:.75} .livedot{display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--pos);margin-left:5px;animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} .lsubs{border-top:1px solid var(--line);padding-top:9px;margin-bottom:10px} .nav button .tag{color:var(--pos)} @media(max-width:900px){.lgrid{grid-template-columns:1fr}} /* ---------------------------------------------------------- match centre */ /* Two columns, fixed. Ten fixtures divide into five even rows, and a card never changes width because of how many siblings it happens to have. */ .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} .mcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:13px} /* Filling the row height is a GRID concern. The same card also renders inside the drawer, where height:100% made it swallow the note printed after it. */ .mgrid .mcard{display:flex;flex-direction:column;height:100%} /* An open card carries line-ups and panels. Left in one column it would drag its neighbour's row to match, so it takes the full width instead. */ .mgrid .mcard.open{grid-column:1/-1} .mwhen{font-size:var(--t-xxs);letter-spacing:.09em;text-transform:uppercase; margin-bottom:8px} /* The expand control sits on the floor of every card in the grid, so the buttons line up across a row however much sits above them. */ .mgrid .mcard .mmore{margin-top:auto} .mcard.live{border-color:var(--posline)} .mhead{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center; padding-bottom:10px;border-bottom:1px solid var(--line)} .mhead .mt{font-size:var(--t-s)} .mhead .mt.right{text-align:right} .mmid{text-align:center;min-width:74px} .mmid .ms{font-variant-numeric:tabular-nums;font-size:var(--t-xl);font-weight:600} .mmid .mv{font-variant-numeric:tabular-nums;font-size:var(--t-m);color:var(--dim2)} .mmid .mst{margin-top:3px} /* The personal read, stated in words at the top of each card. */ .mown{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:9px 0; border-bottom:1px solid var(--line);font-size:var(--t-s)} .ownlab{font-size:var(--t-xxs);letter-spacing:.11em;text-transform:uppercase; padding:2px 6px;border-radius:3px} .ownlab.you{background:var(--accentdim);color:var(--accent)} .ownlab.opp{background:var(--negdim);color:var(--neg)} .ownnames{font-size:var(--t-s)} .mpanel{padding:9px 0;border-bottom:1px solid var(--line)} .mpanel:last-child{border-bottom:none} .mpl{font-size:var(--t-xxs);letter-spacing:.12em;text-transform:uppercase; color:var(--dim2);margin-bottom:6px} .mchips{display:flex;flex-wrap:wrap;gap:5px} /* Chips are deliberately uniform. Reading a stat panel should feel like reading a stat panel; ownership is layered on top only where it changes what you would do. */ .chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px; border:1px solid var(--line);font-size:var(--t-s); background:var(--panel2);cursor:pointer;border-radius:999px} .chip:hover{border-color:var(--accent)} .chip .cv{font-variant-numeric:tabular-nums;font-size:var(--t-xs);color:var(--dim2)} .chip .cn{white-space:nowrap} .chip .thr{font-variant-numeric:tabular-nums;font-size:var(--t-xxs);color:var(--dim2)} .chip .thr.hit{color:var(--pos)} .chip .tag{font-variant-numeric:tabular-nums;font-size:var(--t-micro);letter-spacing:.08em; padding:1px 4px;border-radius:2px;margin-left:1px} .chip .tag.you{background:var(--accent);color:var(--onfill)} .chip .tag.opp{background:var(--neg);color:var(--onfill)} .chip.own-mine{border-color:var(--accent);background:var(--accentdim)} .chip.own-opp{border-color:var(--negline)} .bbadge{font-variant-numeric:tabular-nums;font-size:var(--t-xxs);width:16px;height:16px; border-radius:3px;display:inline-flex;align-items:center;justify-content:center; background:var(--line2);color:var(--text)} .bbadge.b3{background:var(--medal-3-bg);color:var(--medal-3-fg)} .bbadge.b2{background:var(--medal-2-bg);color:var(--medal-2-fg)} .bbadge.b1{background:var(--medal-1-bg);color:var(--medal-1-fg)} /* The filter is the lens. Nothing is hidden -- context stays -- but anything outside the current question recedes, and what remains is lifted. */ .chip.dim{opacity:.16} .chip.lift{border-color:var(--accent);background:var(--accentdim)} .chip.own-free.lift{border-color:var(--posline);background:color-mix(in srgb,var(--pos) 10%,transparent)} .chip.own-free.lift .cv{color:var(--pos)} .chip.own-opp.lift{border-color:var(--negline);background:var(--negdim)} /* OPACITY IS A CONTRAST CONTROL WHETHER OR NOT IT IS MEANT AS ONE. Fading a row toward the page is exactly the same arithmetic as picking a paler ink, and at .45 this one put --text at 2.62:1 in Light. The point of the rule is that the card is de-emphasised, which .65 still says plainly -- 4.62:1 in Light, 7.10:1 in Dark. */ .mcard.faded{opacity:.65} .mcard details summary{font-size:var(--t-xs);cursor:pointer;padding:7px 0} @media(max-width:900px){.mgrid{grid-template-columns:1fr} .mgrid .mcard.open{grid-column:auto}} /* ------------------------------------------------------- match log legend */ .legend{margin-top:12px;padding:12px 14px;border:1px solid var(--line); border-radius:var(--r);background:var(--panel)} .lgnd-t{font-size:var(--t-xxs);letter-spacing:.12em;text-transform:uppercase; color:var(--dim2);margin-bottom:8px} .lgnd-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:5px 18px;font-size:var(--t-s);color:var(--dim)} .lgnd-g b{color:var(--text);font-variant-numeric:tabular-nums;font-size:var(--t-xs); margin-right:5px;font-weight:600} .lgnd-p{font-size:var(--t-s);color:var(--dim);margin-top:9px;line-height:1.55; max-width:72ch} .lgnd-p b{color:var(--text)} th[title]{cursor:help} .probeout{margin-top:10px;padding:10px;background:var(--panel2); border:1px solid var(--line2);border-radius:var(--r);font-variant-numeric:tabular-nums; font-size:var(--t-xs);color:var(--dim);max-height:260px;overflow:auto;white-space:pre-wrap} /* --------------------------------------------------- outbound profile links */ .profiles{margin-top:7px;font-size:var(--t-xs);display:flex;gap:7px; align-items:center;flex-wrap:wrap} .plink{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent} .plink:hover{border-bottom-color:var(--accent)} .plink.guess{color:var(--warn)} .plink.guess:hover{border-bottom-color:var(--warn)} tfoot tr.totals td{border-top:1px solid var(--line2);font-weight:500; background:var(--panel2)} tfoot tr.totals.per90 td{font-weight:400;border-top:none;font-size:var(--t-xs)} /* Same arithmetic as .mcard.faded: .5 was 2.98:1. */ tbody tr.thin{opacity:.65} /* ------------------------------------------------ two-gameweek lookahead */ .alertcard{background:var(--panel);border:1px solid var(--line); border-radius:var(--r);padding:12px;cursor:pointer} .alertcard.mine{border-left:2px solid var(--accent)} .alertcard:hover{border-color:var(--line2)} .alertcard .wh{display:flex;justify-content:space-between;gap:10px; align-items:baseline;flex-wrap:wrap;margin-bottom:7px} .alertcard .nn{font-weight:500} .alertcard .al{font-size:var(--t-s);color:var(--dim);padding:4px 0; display:flex;gap:7px;align-items:baseline} .alertcard .al.r{color:var(--alert-r)} .alertcard .al.a{color:var(--alert-a)} /* ------------------------------------------------- league team scope card */ /* Shown above the player table whenever the table is scoped to one manager's squad rather than the free-agent pool. */ .teamcard{margin:0 0 12px;padding:13px 15px;border:1px solid var(--line2); border-radius:var(--r);background:var(--panel)} .tc-head{display:flex;justify-content:space-between;align-items:flex-start; gap:18px;flex-wrap:wrap;padding-bottom:11px;border-bottom:1px solid var(--line)} .tc-name{font-size:var(--t-l);letter-spacing:-.01em} .tc-opp{text-align:right;min-width:180px} .tc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px 20px;padding-top:11px} .tc-l{font-size:var(--t-xxs);letter-spacing:.12em;text-transform:uppercase; color:var(--dim2);margin-bottom:3px} .tc-v{font-variant-numeric:tabular-nums;font-size:var(--t-l);color:var(--text);line-height:1.2} .tc-sub{font-size:var(--t-xs);color:var(--dim);margin-top:2px} @media(max-width:640px){.tc-opp{text-align:left}} /* Secondary figure inside a table cell — the rate beside a raw record. */ td .sub{color:var(--dim);font-size:var(--t-xs);margin-left:5px} /* ---------------------------------------------------------------- ask box */ .askbox{border:1px solid var(--line2);border-radius:var(--r); background:var(--panel);padding:14px 15px;margin-bottom:20px} #askform{display:flex;gap:8px} #askq{flex:1;padding:10px 12px;font-size:var(--t-m);background:var(--panel2); border:1px solid var(--line2);border-radius:var(--r);color:var(--text)} #askq:focus{outline:none;border-color:var(--accent)} #askform button{padding:10px 18px;font-size:var(--t-s);border-radius:var(--r); border:1px solid var(--line2);background:var(--panel2);color:var(--text); cursor:pointer} #askform button:hover{border-color:var(--accent);color:var(--accent)} .askex{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .askex button,.askalt button{font-size:var(--t-xs);padding:4px 9px;border-radius:99px; border:1px solid var(--line);background:transparent;color:var(--dim); cursor:pointer} .askex button:hover,.askalt button:hover{border-color:var(--accent); color:var(--accent)} .askwait{margin-top:14px;font-size:var(--t-s);color:var(--dim2)} .askhead{margin-top:16px;font-size:var(--t-m);letter-spacing:-.01em} .askchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 12px} .askchips-t{font-size:var(--t-xxs);letter-spacing:.12em;text-transform:uppercase; color:var(--dim2);margin-right:3px} .askchip{font-size:var(--t-xs);padding:3px 9px;border-radius:99px; border:1px solid var(--line2);background:var(--panel2);color:var(--text)} .askchip i{font-style:normal;color:var(--dim2);margin-right:6px;font-size:var(--t-xxs); letter-spacing:.06em;text-transform:uppercase} .askwarn{margin-bottom:11px;padding:9px 11px;border-radius:var(--r); border:1px solid var(--warnline);background:var(--warndim); color:var(--warn);font-size:var(--t-s); line-height:1.5} .asktable td{vertical-align:top} .askwhy{font-size:var(--t-xs);color:var(--dim);line-height:1.5;max-width:44ch} .asknote{font-size:var(--t-xs);color:var(--dim2);margin-top:9px;line-height:1.55; max-width:80ch} .askalt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:11px} .askmiss{margin-top:14px;padding:12px 14px;border-radius:var(--r); border:1px solid var(--line2);background:var(--panel2)} .askmiss-h{font-size:var(--t-s);margin-bottom:6px} .askmiss p{font-size:var(--t-s);color:var(--dim);line-height:1.6;margin-top:5px; max-width:74ch} /* Label-and-values grids: without a fixed layout the auto-width label column absorbs every spare pixel and shoves the numbers to the far edge. */ .vtable{table-layout:fixed} .vtable th:first-child,.vtable td:first-child{width:34%;min-width:150px; white-space:normal} .vtable th:not(:first-child),.vtable td:not(:first-child){width:22%} /* ------------------------------------------------------------ XI planner */ .planbar{display:flex;justify-content:space-between;align-items:center;gap:14px; flex-wrap:wrap;margin-bottom:10px} .planstate{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .planscore{display:flex;align-items:baseline;gap:7px} .shapebits{display:flex;gap:5px} .shapebit{font-variant-numeric:tabular-nums;font-size:var(--t-s);color:var(--dim); border:1px solid var(--line2);border-radius:99px;padding:2px 8px} .shapebit i{font-style:normal;font-size:var(--t-xxs);letter-spacing:.08em; color:var(--dim2);margin-left:3px} .shapebit.bad{color:var(--neg);border-color:var(--negline)} .planbad{margin-bottom:10px;padding:9px 12px;border-radius:var(--r); border:1px solid var(--negline);background:var(--negdim); color:var(--neg);font-size:var(--t-s); line-height:1.55;max-width:80ch} .planbad b{color:var(--planbad-fg)} .planhold{margin-bottom:10px;padding:8px 12px;border-radius:var(--r); border:1px solid var(--accent);background:var(--accentdim); color:var(--text);font-size:var(--t-s)} .planhold b{color:var(--accent)} .lnk{color:var(--accent);text-decoration:underline;font-size:var(--t-s)} .pcard{cursor:pointer;transition:border-color .12s,transform .12s} .pcard:hover{border-color:var(--accent)} .pcard.held{border-color:var(--accent);background:var(--accentdim); transform:translateY(-2px)} .planacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px} .planacts .btn[disabled]{opacity:.4;cursor:not-allowed} .card .ord.neg{color:var(--neg)} /* ------------------------------------------------------ predicted line-ups */ .pxwrap{margin-top:10px;border-top:1px solid var(--line);padding-top:8px} .pxwrap summary{font-size:var(--t-xs);cursor:pointer;padding:2px 0} .pxgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px} @media(max-width:640px){.pxgrid{grid-template-columns:1fr}} .pxh{font-size:var(--t-s);margin-bottom:6px;display:flex;justify-content:space-between; gap:8px;align-items:baseline} .pxh .mono{font-size:var(--t-xxs)} .pxr{display:flex;gap:7px;align-items:baseline;padding:2px 4px;border-radius:3px; font-size:var(--t-s);cursor:pointer} .pxr:hover{background:var(--panel2)} .pxr.you{background:var(--posdim)} .pxr.opp{background:var(--negdim)} .pxp{font-variant-numeric:tabular-nums;font-size:var(--t-xxs);color:var(--dim2);width:26px; flex:none} .pxn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pxv{font-size:var(--t-xs);color:var(--dim);flex:none} /* Points sit at the end of the row, fixed width so the column reads down the side rather than wandering with each name. Minutes are the context; the points are the thing the screen is for. */ .pxpts{font-size:var(--t-s);flex:none;width:30px;text-align:right;font-weight:600} .pxq{color:var(--warn);font-size:var(--t-xxs);cursor:help} .pxnote{font-size:var(--t-xs);color:var(--dim);margin-top:7px;line-height:1.5} .pxnote b{color:var(--text)} .pxnote.neg b{color:var(--neg)} .pxsrc{font-size:var(--t-xs);color:var(--dim2);line-height:1.55;margin-top:10px; max-width:90ch} .pxsrc b{color:var(--dim)} /* The planner card's own dossier button. The card body is for swapping, so opening a player needs its own target rather than competing for the click. */ .pcard{position:relative;padding-right:26px} .pinfo{position:absolute;top:5px;right:5px;width:19px;height:19px; border-radius:50%;border:1px solid var(--line2);background:var(--panel); color:var(--dim2);line-height:0; cursor:pointer;display:flex;align-items:center;justify-content:center; padding:0;transition:color .12s,border-color .12s} .pinfo:hover{color:var(--accent);border-color:var(--accent)} .pcard.held .pinfo{border-color:var(--accent)} .pinfo-inline{display:inline-flex;align-items:center;justify-content:center; width:17px;height:17px;border-radius:50%;border:1px solid var(--line2); vertical-align:middle;line-height:0;color:var(--dim2)} /* ------------------------------------------------ the pitch, from the handoff Players sit ON the pitch: shirt, name, fixture, projection -- no card, no box, no rectangular hover or held state. Everything here is scoped to .kitpitch / .kitbench / .kitcard so the generic .card rules used by the rest of the app are untouched. Self-contained, breakpoints included at the foot of the section, so no rule elsewhere in the file can win on source order. */ .kitpitch{position:relative;isolation:isolate;border-radius:var(--r); background:var(--panel);padding:96px 8px 26px;overflow:hidden} .kitart{position:absolute;inset:0;width:100%;height:100%;z-index:-1; pointer-events:none} .kitart .kfield{fill:var(--panel2);fill-opacity:.55} .kitart .kband{fill:var(--text);fill-opacity:.018} .kitart .klines{fill:none;stroke:var(--dim2);stroke-width:1;opacity:.42} /* THE STADIUM BOARD (15 Sep 2026 handoff). Mint, with the site's name in dark uppercase either side of the goal. The two colours are FIXED rather than tokens on purpose: the approved rule keeps the same mint board and dark lettering in Light and in Dark, the way a real hoarding does not change with the weather. It stands beyond the end line with a gap below it and never touches a pitch marking. */ .kboard{position:absolute;top:18px;left:14%;width:72%;height:42px; display:grid;grid-template-columns:1fr 84px 1fr;align-items:stretch; background:var(--board);color:var(--boardink);border-radius:2px; overflow:hidden} .kbill{display:block;width:100%;height:100%;overflow:visible;padding:0 6px; box-sizing:border-box} .kbill text{fill:var(--boardink);font-family:var(--sans);font-weight:700; font-size:var(--t-3xl);letter-spacing:0} /* The goal: a frame and a net, standing on the back line. */ .kgoal{position:relative;margin-top:14px;height:40px; border:1.4px solid var(--dim);border-bottom:none;opacity:.8; background: repeating-linear-gradient(90deg,transparent 0 5px, color-mix(in srgb,var(--dim) 22%,transparent) 5px 6px), repeating-linear-gradient(0deg,transparent 0 5px, color-mix(in srgb,var(--dim) 22%,transparent) 5px 6px)} .kitrows{display:flex;flex-direction:column;gap:26px} /* Width by player count, so a back three is narrower than a midfield five and the rows taper toward the far goal the way the lines do. */ .kitrow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr)); width:clamp(30%,calc(var(--n) * 19.6%),100%);margin:0 auto} .pcard.kitcard{display:flex;flex-direction:column;align-items:center; text-align:center;min-width:0;padding:2px;border:0;background:none; border-radius:var(--r);cursor:pointer;transform:none;position:relative} .pcard.kitcard:hover,.pcard.kitcard.held{border:0;background:none;transform:none} .pcard.kitcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Reg's pre-deadline piece, at the foot of the Brief. */ /* Reg's desk piece, at the head of the Brief. Built from the comp's own primitives -- an eyebrow, a headline, a standfirst and a prose column -- because the comp draws no section between the masthead and the lead and inventing a visual language for one would be a design decision made by a template. */ .bdesk{border-top:3px solid var(--accent);padding:20px 0 24px;margin:0 0 26px; border-bottom:1px solid var(--line)} .bdesk .eyebrow{font-size:var(--t-xxs);letter-spacing:.14em; text-transform:uppercase;color:var(--accent);margin-bottom:9px} .bdesk h2{font-size:var(--t-3xl);line-height:1.08;letter-spacing:-.02em; margin:0 0 10px;max-width:22ch;text-wrap:balance} .bdesk .bscoutstand{font-size:var(--t-l);line-height:1.45;color:var(--prose); margin:0 0 16px;max-width:60ch} .bdesk .bdp{font-size:var(--t-m);line-height:1.6;margin:0 0 12px; max-width:68ch} /* Where the tie stands reads first and largest: the odds it opens on are the one figure here that is not an estimate of an estimate. */ .bdesk .bdp.state{font-size:var(--t-l);line-height:1.5;color:var(--text)} .bdesk .bdcav{font-size:var(--t-xs);line-height:16.5px;color:var(--dim); margin:16px 0 14px;max-width:68ch} @media(max-width:640px){ .bdesk h2{font-size:var(--t-2xl)} .bdesk .bscoutstand{font-size:var(--t-m)} .bdesk .bdp.state{font-size:var(--t-m)} } .bscout{border-top:3px solid var(--accent);background:var(--panel); margin-top:28px;padding:26px} .bscout .eyebrow{font-size:var(--t-xs);letter-spacing:1.4px; text-transform:uppercase;color:var(--accent);display:block} .bscout h2{font-size:var(--t-4xl);line-height:1.1;letter-spacing:-1px; margin:12px 0;font-weight:700} .bscout .bscoutstand{font-size:var(--t-l);line-height:1.6;color:var(--prose); margin:0 0 14px;max-width:70ch} .bscout p{font-size:var(--t-m);line-height:1.7;max-width:70ch;margin:0 0 12px} @media(max-width:640px){ .bscout{padding:20px} .bscout h2{font-size:var(--t-2xl)} } /* Reg's desk, as the dossier comps close a tab: a rule in the accent, a serif line, the byline under it. */ .regdesk{border-top:3px solid var(--accent);background:var(--panel); margin-top:32px;padding:26px} .regdesk .eyebrow{font-size:var(--t-xs);letter-spacing:1.4px; text-transform:uppercase;color:var(--accent);display:block} .regdesk blockquote{font-family:var(--serif); font-size:var(--t-4xl);line-height:1.2;margin:20px 0;max-width:760px} .regdesk .byline{font-family:var(--serif); font-size:var(--t-15);color:var(--dim);border:0;padding:0;margin:0;display:block} @media(max-width:640px){ .regdesk{padding:20px} .regdesk blockquote{font-size:var(--t-2xl)} } /* How many matches a call rests on, on the row rather than in a footnote. */ .prov{font-size:var(--t-xxs);color:var(--warn);margin-left:5px;cursor:help; font-variant-numeric:tabular-nums} /* The two form readings disagreeing is a finding, not an error state. */ .clash{font-size:var(--t-xxs);color:var(--warn);margin-left:5px; white-space:nowrap;cursor:help} /* A page that rendered without one of its parts. Warn-coloured rather than error-coloured: what is on the page is still true. */ .partialnote{border-left:3px solid var(--warn);background:var(--warndim); padding:12px 16px;margin:0 0 16px;font-size:var(--t-s);line-height:1.6; display:flex;gap:12px;flex-wrap:wrap;align-items:center} .partialnote b{font-weight:650} .partialnote .btn{margin-left:auto} /* A page whose data did not arrive says so and offers the way back. */ .pageerr{padding:40px 0;max-width:60ch} .pageerr h1{font-size:var(--t-32);line-height:1.15;letter-spacing:-1px; font-weight:700;margin:0 0 12px} .pageerr p{font-size:var(--t-l);line-height:1.6;color:var(--prose);margin:0 0 10px} .pageerr .detail{font-size:var(--t-xs);color:var(--dim);font-variant-numeric:tabular-nums} .pageerr .btn{margin-top:14px} /* Off-screen until it is focused, then a real control in the top corner. Hidden with a position rather than display:none, because a link that is not rendered cannot be focused, and this one exists to be focused. */ /* --onfill, not --fillink. The two are not interchangeable and this rule had the wrong one: --fillink is the ink for a fill that is LIGHT in both themes (the mint board, a win/loss bar), so it is dark in both. --onfill is the ink for a fill that FLIPS -- the accent is bright mint in Dark and a dark rust in Light -- so it flips too. Dark ink on the dark rust gave this link 2.5:1, which is the accessibility affordance of the page being the least accessible thing on it. */ .skiplink{position:absolute;left:-9999px;top:0;z-index:100; background:var(--accent);color:var(--onfill);padding:12px 18px; font-weight:650;border-radius:0 0 4px 0;text-decoration:none} .skiplink:focus{left:0} #view:focus{outline:none} #view:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* A name is an action, so a name has to show where the keyboard is. */ [data-pid][role="button"]:focus-visible,.pn:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:2px} .pcard.kitcard.ref{cursor:default} .kitwrap{position:relative;width:62px;height:77px;margin-bottom:6px;flex:none} .kitimg{width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 3px 2px var(--shadow));transition:transform .18s ease} .kitcard:hover .kitimg{transform:translateY(-2px)} .kitcard .kn{font-size:var(--t-s);line-height:1.3;font-weight:600;color:var(--text); max-width:100%;overflow-wrap:anywhere;text-wrap:balance;transition:color .16s} .kitcard:hover .kn{color:var(--accent)} .kitcard .kfx{font-size:var(--t-xs);color:var(--dim);white-space:nowrap; margin-top:1px;max-width:100%;overflow:hidden;text-overflow:ellipsis} .kitcard .kpr{font-size:var(--t-l);font-weight:700;color:var(--text);margin-top:2px; font-variant-numeric:tabular-nums} /* Fitness. Doubtful turns the NAME and PROJECTION yellow and adds nothing else; the fixture stays neutral. Out is its own, harder state. */ .kitcard[data-fitness="doubtful"] .kn, .kitcard[data-fitness="doubtful"] .kpr{color:var(--warn)} .kitcard[data-fitness="out"] .kn, .kitcard[data-fitness="out"] .kpr{color:var(--neg)} .kitcard[data-fitness="out"] .kitimg{opacity:.55} /* Picked up, without a box: the shirt lifts, the name goes orange, and a small orange shadow sits under it. Visible from across the pitch, and not a rectangle. */ .kitcard.held .kitimg{transform:translateY(-5px)} .kitcard.held .kn,.kitcard.held .kpr{color:var(--accent)} .kitcard.held .kitwrap::after{content:'';position:absolute;left:16%;right:16%; bottom:-5px;height:6px;border-radius:50%;background:var(--accent);opacity:.45} /* C and V. 21px circles over the shirt. Captain green, vice mint. */ .kbadge{position:absolute;top:1px;right:-5px;width:21px;height:21px; border-radius:50%;display:grid;place-items:center;font-size:var(--t-xs); font-weight:700;line-height:1;background:var(--pos);color:var(--onfill); border:2px solid var(--panel);z-index:1} .kbadge.vice{background:var(--tk-ok-fg)} /* The dossier button: small, top-left of the shirt, out of the badge's way. */ .kitcard .pinfo{top:0;left:-6px;right:auto;width:18px;height:18px;opacity:.75;z-index:1} .kitcard:hover .pinfo,.kitcard .pinfo:focus-visible{opacity:1} /* The bench: the same player stack, smaller, in substitution order. */ .kitbench{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px; padding:6px 0 4px} .kitbench .kitwrap{width:46px;height:56px} .kitbench .kitcard .kn{font-size:var(--t-s)} .kitbench .kitcard .kpr{font-size:var(--t-m)} .kord{display:block;font-size:var(--t-xs);color:var(--dim2);margin-bottom:8px; white-space:nowrap} /* The page head, from the handoff: eyebrow, display title, the week. */ .pagehead{margin:0 0 20px} .eyebrow{font-size:var(--t-xxs);letter-spacing:.15em;text-transform:uppercase; color:var(--dim)} .eyebrow.reg{color:var(--accent)} .pagehead .heading{display:flex;justify-content:space-between;gap:20px; align-items:flex-end;margin-top:5px} h1.display{margin:0;font-size:var(--t-5xl);letter-spacing:-.04em;line-height:1.1; font-weight:700} .pagehead .season{color:var(--dim);font-size:var(--t-s);flex:none;padding-bottom:6px} /* Section heads inside a page, and the blocks the comps share. */ .sectionhead{display:flex;justify-content:space-between;gap:15px;align-items:baseline; border-top:1px solid var(--line);padding-top:17px;margin:28px 0 14px} .sectionhead h2{margin:0;font-size:var(--t-2xl);letter-spacing:-.02em;font-weight:600} .sectionhead>span{font-size:var(--t-xs);color:var(--dim)} .note{color:var(--dim);font-size:var(--t-xs);margin-top:12px} .standfirst{margin:-6px 0 22px;max-width:60ch} .standfirst h2{margin:0 0 6px;font-size:var(--t-2xl);letter-spacing:-.02em;font-weight:600} .standfirst p{margin:0;font-size:var(--t-m);color:var(--prose);line-height:1.5} .edition{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-xxs); letter-spacing:.12em;text-transform:uppercase;color:var(--dim); border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:10px 0;margin:-6px 0 22px} .league-intro{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:28px; align-items:start;margin:0 0 6px} .league-intro h2{margin:8px 0 10px;font-size:var(--t-3xl);line-height:1.15; letter-spacing:-.02em;font-weight:600} .league-intro p{margin:0;font-size:var(--t-m);color:var(--prose);max-width:52ch} .league-place{background:var(--board);color:var(--boardink);padding:18px; border-top:3px solid var(--pos)} .league-place strong{display:block;font-size:var(--t-display);line-height:1; letter-spacing:-.04em;font-variant-numeric:tabular-nums} .league-place span{display:block;font-size:var(--t-xs);margin-top:8px;line-height:1.4} .highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 20px} .highlight{background:var(--panel);border:1px solid var(--line);padding:16px} .highlight h2{margin:6px 0 4px;font-size:var(--t-xl);font-weight:600;letter-spacing:-.01em} .highlight strong{font-size:var(--t-4xl);letter-spacing:-.03em;line-height:1; font-variant-numeric:tabular-nums;color:var(--pos)} .highlight small{display:block;margin-top:6px;font-size:var(--t-xs);color:var(--dim)} @media(max-width:640px){ .league-intro,.highlights{grid-template-columns:1fr} } .pool-meta{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-xs); color:var(--dim);padding:14px 0 10px} .pagehead .week{color:var(--dim);font-size:var(--t-xs);text-align:right; text-transform:uppercase;letter-spacing:.1em;flex:none} .pagehead .week strong{display:block;color:var(--text);font-size:var(--t-3xl); line-height:1.2;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums} /* The pitch bar: the shape on the left, the two views as underlined tabs. */ .pitchbar .formation{font-family:var(--sans);font-size:var(--t-m);letter-spacing:.2em} .views{display:flex;gap:12px} .viewtab{border:0;border-bottom:2px solid transparent;padding:7px 2px; color:var(--dim);background:none;font-size:var(--t-xs);border-radius:0} .viewtab[aria-pressed=true]{color:var(--accent);border-color:var(--accent)} .viewtab:hover{color:var(--text)} .benchhead{display:flex;justify-content:space-between;align-items:baseline; gap:12px;margin:22px 0 10px} .benchhead h2{margin:0;font-size:var(--t-xl);font-weight:600} .benchhead span{font-size:var(--t-xxs);color:var(--dim);letter-spacing:.06em; text-transform:uppercase} .kitbench{border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:12px 0} .btn.pri{background:var(--accent);color:var(--onfill);border-color:var(--accent); font-weight:600} /* Team HQ: the pitch, and the column beside it. */ .hqgrid{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px; align-items:start} /* The projection block: mint, ink, a green top rule, from the comp. */ .hqproj{background:var(--board);color:var(--boardink);padding:18px; border-top:3px solid var(--pos);border-radius:0} .hqproj .eyebrow{color:var(--boardink);opacity:.7} .hqproj .hqbig{font-size:var(--t-5xl);margin:8px 0} .hqproj .hqsub{color:var(--boardink);font-size:var(--t-xs);margin:0} .hqsel strong{display:block;font-size:var(--t-l);margin:7px 0} .hqsel .hqsub b{color:var(--text)} .hqmain{min-width:0} .hqrail{min-width:0} .hqsec{border-top:1px solid var(--line);padding-top:20px;margin-top:22px} .hqsec.hqtop{border-top:none;padding-top:4px;margin-top:0} .hqlabel{font-size:var(--t-xxs);letter-spacing:.16em;text-transform:uppercase; color:var(--dim2);margin-bottom:12px} .hqlabel.plain{font-size:var(--t-m);letter-spacing:0;text-transform:none;color:var(--dim)} .hqlabel.reg{color:var(--accent)} .hqbig{font-size:var(--t-display);line-height:1;font-weight:700;letter-spacing:-.03em; font-variant-numeric:tabular-nums;margin:10px 0 12px} .hqbig span{font-size:var(--t-s);font-weight:400;letter-spacing:0;color:var(--dim); margin-left:4px} .hqsub{font-size:var(--t-s);color:var(--dim);line-height:1.6} .hqsub.caps{font-size:var(--t-xxs);letter-spacing:.08em;text-transform:uppercase;margin-top:10px} .hqgap{font-size:var(--t-s);color:var(--pos);margin-top:10px} .hqcap{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:var(--t-l)} .kbadge.static{position:static;border:none;flex:none} .hqcopy{font-size:var(--t-s);color:var(--prose);line-height:1.6;margin:0 0 8px} .hqrow{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-s); padding:5px 0;font-variant-numeric:tabular-nums} .hqrow b{font-weight:600} .hqreg{font-size:var(--t-xl);line-height:1.3;font-weight:600;letter-spacing:-.02em; margin:12px 0 18px; margin:0;text-wrap:balance} @media(max-width:900px){ .hqgrid{grid-template-columns:minmax(0,1fr);gap:8px} .hqbig{font-size:var(--t-5xl)} } @media(max-width:640px){ /* Its own layout, not the desktop squeezed: smaller kits, the same hierarchy, and the sponsor board kept. */ .kitpitch{padding:78px 2px 18px;margin:0 -4px} .kboard{left:6%;width:88%;height:36px;grid-template-columns:1fr 58px 1fr;top:14px} .kbill{padding:0 4px} .kgoal{height:34px;margin-top:10px} .kitrows{gap:18px} .kitrow{width:clamp(34%,calc(var(--n) * 20%),100%)} .kitwrap{width:48px;height:62px;margin-bottom:4px} .kitcard .kn{font-size:var(--t-xs)} .kitcard .kfx{font-size:var(--t-xxs)} .kitcard .kpr{font-size:var(--t-m)} .kbadge{width:18px;height:18px;font-size:var(--t-micro);right:-3px} .kitbench .kitwrap{width:40px;height:51px} } /* ------------------------------------- the dossier's opening block, to the comp player-card-system.html at 1440: the header (kicker, 34px name, meta row, watch button), the tab row, then the card on the dossier's own mint -- rail, mast, summary | evidence, footer -- 560px tall. The class hooks .dhero .dhbrand .dhhead .dhscore .dhtake .hbar .dhstats are the motion's. */ .dhead.ds-header{height:130px;display:flex;align-items:center;justify-content:space-between;gap:24px; padding:0 26px;border-bottom:0;background:none;position:relative} .ds-kicker{font-size:var(--t-xs);line-height:17px;font-weight:400;letter-spacing:1.3px;text-transform:uppercase;margin:0} .ds-identity>.ds-kicker{color:var(--dim)} .dhead .ds-name{font-size:var(--t-34);line-height:39px;font-weight:600;letter-spacing:-1px;margin:8px 0 16px;color:var(--text)} .ds-meta{display:flex;flex-wrap:wrap;align-items:center;font-size:var(--t-s);line-height:22px;color:var(--dim);gap:0;margin:0} .ds-meta>span+span:before{content:'·';margin:0 10px;color:var(--dim2)} .ds-meta .ds-club{font-size:var(--t-15)} .ds-meta .ds-status,.ds-meta .ds-confidence{color:var(--gold)} .ds-meta .pill{margin:0} .ds-news{font-size:var(--t-s);margin-top:6px} .dhead .ds-watch-wrap{position:relative;flex-shrink:0;margin:0;gap:8px} .dhead .ds-watch{font-size:var(--t-m);line-height:20px;font-weight:400;padding:9px 16px;border:1px solid var(--accent); border-radius:999px;color:var(--accent);background:transparent;white-space:nowrap;min-height:0} .dhead .ds-watch:hover,.dhead .ds-watch.on{background:var(--accent);color:var(--onfill)} .dhead .x{top:12px;right:14px} .dbody{padding:0 26px 60px} .dbody .tabs.ds-nav{display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;white-space:nowrap;height:44px; margin:20px 0 24px;padding:0;border-bottom:1px solid var(--line);scrollbar-width:thin} .dbody .tabs.ds-nav button{flex:0 0 auto;font-size:var(--t-s);line-height:18px;letter-spacing:0;margin:0;padding:10px 0 12px; background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--dim)} .dbody .tabs.ds-nav button.on{border-bottom-color:var(--accent);color:var(--accent)} .dbody .tabs.ds-nav button:hover:not(.on){color:var(--text)} .dhero.ds-card{height:560px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:26px;padding:26px; background:var(--dsmint);color:var(--dsink);margin:0 0 16px;border-radius:0} .ds-rail{position:relative;border-right:2px solid var(--dsrail);min-width:0} .ds-rail .ds-eye{display:block;width:24px;height:24px} .ds-rail .ds-eye svg{width:24px;height:24px} .ds-rail-title{position:absolute;left:0;bottom:0;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap; font-size:var(--t-s);line-height:24px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase} .ds-card-body{min-width:0;display:grid;grid-template-rows:22px minmax(0,1fr) 32px;gap:24px} .ds-mast{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:var(--t-xs);line-height:18px; font-weight:400;letter-spacing:0;text-transform:uppercase;margin:0} .ds-mast strong{font-size:var(--t-17);line-height:22px;font-weight:500;letter-spacing:-.3px} .ds-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;min-height:0} .ds-summary{min-width:0;display:grid;grid-template-rows:34px 104px 144px minmax(0,1fr);align-content:start} .ds-context{align-self:start;color:var(--dsink)} .ds-headline{font-size:var(--t-34);line-height:1.12;font-weight:500;letter-spacing:-1px;margin:12px 0 0;align-self:start;text-wrap:initial} .ds-key-metric{padding-top:14px;margin:0;display:block} .ds-value{font-size:var(--t-68);line-height:76px;font-weight:600;height:80px;letter-spacing:-3px;white-space:nowrap} .ds-value.ds-word{font-size:var(--t-48);letter-spacing:-1.5px} .ds-value.ds-fixture{display:flex;align-items:center;gap:16px} .ds-home-mark{font-size:var(--t-2xl);line-height:40px;font-weight:500;width:44px;height:44px;border:2px solid currentColor; border-radius:50%;display:inline-flex;align-items:center;justify-content:center;letter-spacing:0} .ds-unit{font-size:var(--t-s);line-height:18px;margin-top:12px;max-width:34ch} .ds-explanation{font-size:var(--t-s);line-height:1.6;font-weight:400;margin:22px 0 0;max-width:40ch;color:var(--dsink)} .ds-evidence{min-width:0;min-height:0;display:grid;grid-template-rows:34px minmax(0,1fr) 68px;gap:0} .ds-evidence-title{color:var(--dsink)} .ds-chart{min-height:0;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:4px 0 16px} .ds-vertical{display:flex;gap:16px;height:100%;min-height:0} .ds-column{flex:1;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) 28px;text-align:center;gap:0} .ds-column-plot{--ds-bar-scale:1;position:relative;width:100%;border-bottom:1px solid var(--dsline);min-height:0} .ds-column-value{position:absolute;left:0;width:100%;bottom:calc((100% - 36px)*var(--ds-bar-scale,1) + 8px);font-size:var(--t-l);line-height:20px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums} .ds-column-bar{position:absolute;left:19%;bottom:0;width:62%;height:calc((100% - 36px)*var(--ds-bar-scale,1));background:var(--dsbar);display:block;transform-origin:center bottom} .ds-column-label{font-size:var(--t-xs);line-height:16px;padding-top:8px;display:block} .ds-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:12px 0 0;border-top:1px solid var(--dsline);border-bottom:0} .ds-stats div{min-width:0} .ds-stats dt{font-size:var(--t-xs);line-height:15px;font-weight:400;color:var(--dsdt);white-space:nowrap;text-transform:none;letter-spacing:0} .ds-stats dd{font-size:var(--t-24);line-height:30px;font-weight:500;margin:5px 0 0;white-space:nowrap;font-variant-numeric:tabular-nums} .ds-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;border-top:1px solid var(--dsline); font-size:var(--t-xs);line-height:16px;text-transform:uppercase;letter-spacing:.25px;min-width:0} /* The card's other chart shapes (player-card-system.html): comparison pairs, horizontal rates, the five-week curve, two small plots, the diverging move bars, a record, topics. */ .ds-compare-chart{display:grid;grid-template-rows:24px repeat(3,minmax(0,1fr));gap:12px;height:100%;min-height:0} .ds-chart-legend{display:flex;align-items:center;gap:20px;font-size:var(--t-xs);line-height:16px} .ds-chart-legend span{display:inline-flex;align-items:center;gap:7px} .ds-chart-legend i{display:block;width:10px;height:10px;flex-shrink:0} .ds-compare-chart .ds-pair{margin:0} .ds-compare-chart .ds-pair-label{margin-bottom:0} .ds-compare-bar{display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:12px;margin-top:8px;font-size:var(--t-xs);line-height:16px} .ds-pair{margin:0 0 16px} .ds-pair:last-child{margin-bottom:0} .ds-pair-label{font-size:var(--t-xs);line-height:17px;margin-bottom:8px} .ds-bar-row{display:grid;grid-template-columns:72px minmax(0,1fr) 42px;gap:8px;align-items:center;margin-top:9px;font-size:var(--t-xs);line-height:16px} .ds-track{height:10px;background:var(--dstrack);position:relative;min-width:0} .ds-fill{height:100%;background:var(--dsrail)} .ds-bar-value{text-align:right;font-variant-numeric:tabular-nums} .ds-horizontal .ds-bar-row{margin-top:16px} .ds-horizontal .ds-bar-row:first-child{margin-top:0} .ds-long-labels .ds-bar-row{grid-template-columns:92px minmax(0,1fr) 44px} .ds-diverge{display:block;width:100%;height:10px;min-width:0;overflow:hidden} .ds-line-svg{display:block;width:100%;height:auto;max-height:262px;overflow:visible} .ds-two-plots{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:18px;height:100%} .ds-small-plot{min-height:0} .ds-small-plot .ds-column-value{font-size:var(--t-s);line-height:16px;font-weight:400} .ds-record{display:grid;gap:16px;font-size:var(--t-13);line-height:20px} .ds-record small{display:block;font-size:var(--t-xs);line-height:16px;color:var(--dsdt);margin-bottom:5px;text-transform:uppercase} .ds-record strong{font-size:var(--t-20);font-weight:500} .ds-swap{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--dsline);padding-top:16px;gap:16px} .ds-record p{margin:0;font-size:var(--t-s);line-height:1.6} .ds-topic{padding:12px 0;border-bottom:1px solid var(--dsline);font-size:var(--t-m);line-height:20px;font-weight:500} .ds-topic:first-child{padding-top:0} .ds-topic small{display:block;font-size:var(--t-xs);line-height:16px;margin-top:5px;color:var(--dsdt);font-weight:400} .ds-empty-heading{font-size:var(--t-2xl);line-height:28px;font-weight:500;margin:0 0 16px} .ds-value[data-outcome=denied],.ds-stats dt[data-outcome=denied]{color:var(--pillfill)} .ds-value[data-outcome=confirmed],.ds-stats dt[data-outcome=confirmed]{color:var(--dsgreen)} /* What the engine sees: the claim in bold, the evidence after it. */ .dsees{margin:0 0 16px} .dseestitle{display:flex;align-items:center;gap:12px;color:var(--dim2); font-size:var(--t-xxs);letter-spacing:.16em;text-transform:uppercase; font-weight:700;margin-bottom:14px} .dseestitle:after{content:'';height:1px;background:var(--line);flex:1} .dsees ol{margin:0;padding:0;display:grid;gap:12px} .dsees li{list-style:none;display:grid;grid-template-columns:26px minmax(0,1fr); gap:12px;align-items:start;color:var(--prose);font-size:var(--t-s);line-height:1.55} .dseen{width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:var(--posdim);color:var(--pos);font-weight:700;font-size:var(--t-xs)} .dsees b{color:var(--text);font-weight:600} @media(max-width:900px){ .dhero.ds-card{height:auto;grid-template-columns:1fr;gap:20px;padding:20px} .ds-rail{display:none} .ds-card-body{grid-template-rows:auto auto auto} .ds-columns{grid-template-columns:1fr;gap:24px} .ds-summary{grid-template-rows:auto} .ds-evidence{grid-template-rows:auto 220px 68px} } @media(max-width:640px){ .dhead.ds-header{height:auto;flex-direction:column;align-items:flex-start;gap:12px;padding:16px 16px 0} .dbody{padding:0 16px 60px} } /* The opening sequence, once per load. Elements start where they finish; the animation moves them from a state it defines itself, so nothing is left invisible if the script never runs. */ /* MOTION IS A PREFERENCE, AND IT WAS BEING HONOURED IN FOUR PLACES. The card, the radar deck and the live dot asked; the drawer slide, the kit cards, every hover and the tie reveal did not. A reader who has asked their system for less motion has asked once, for everything, so this answers for everything -- and answers by collapsing the duration rather than deleting the rule, which keeps a transition's end state intact where code reads it back. One exception, deliberate: the loading spinner. It is the only thing on screen that says work is still happening, and a frozen spinner reads as a hung page, which is a worse outcome than the motion. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important} .dhero *{animation:none!important;transition:none!important} .spin{animation:sp .7s linear infinite!important} } /* The correspondent's own two lines on The Brief: one under the masthead saying what kind of week it is, one at the foot signing off. Set in the prose colour and italic, so they read as a person talking either side of a page of figures rather than as two more findings. */ /* ROMAN, NOT ITALIC. The italic cut of this serif is a narrow one, and at reading size on a dark ground it came out looking squeezed rather than spoken. The serif is already doing the work of saying this is a person talking; the slant was a second way of saying it and the one that cost the legibility. */ /* HE IS SPEAKING TO SOMEBODY, SO SET IT LIKE IT (18 Sep 2026, Luis). Both of these were 16px at a 62-character measure in the muted grey -- the size of a caption, doing the job of a standfirst. A reader's eye goes to the biggest thing on a page and these are the first and last words Reg says to him. Bigger, in the page's own ink, on a shorter measure so the line breaks where a sentence wants to break. No negative tracking: this serif is narrow already and pulling it tighter is what made it look squeezed, and the leading is generous for the same reason. */ .bregline{font-family:var(--serif);font-size:var(--t-27); line-height:1.4;letter-spacing:0;color:var(--text); margin:18px 0 0;max-width:34ch} /* The sign-off: the same voice, quieter, and the last thing on the page. */ .bregoff{font-family:var(--serif);font-size:var(--t-21);line-height:1.5; letter-spacing:0;color:var(--dim);margin-top:28px;padding:20px 0 8px; max-width:44ch} @media(max-width:640px){ .bregline{font-size:var(--t-21);max-width:none} .bregoff{font-size:var(--t-18);max-width:none} } /* The counter-argument, inside the card that raises objections. Indented behind a rule so it reads as a second voice in the same card rather than as more of the first one. */ .bcalso{margin-top:12px;padding-left:12px;border-left:2px solid var(--warnline)} .bcalso .blabel{color:var(--warn);margin-bottom:4px} .bcaline{font-size:var(--t-m);line-height:1.4;font-weight:700;margin:0 0 4px} /* Which of the two gain figures is doing the work. Set below them and in the prose colour: it is a qualification of the numbers above it, not a third number, and it must never compete with them for the eye. */ .bdriver{font-size:var(--t-s);line-height:1.5;color:var(--prose); margin:10px 0 0;padding-left:11px;border-left:2px solid var(--line2)} .bdriver.fixture{border-left-color:var(--warn)} .bdriver.player{border-left-color:var(--pos)} /* --------------------------------------------------------- the scorecard One row per bucket, two bars on one scale: what it SAID and what HAPPENED. Honest is two bars the same length, so the gap between them is the error and reading the page is reading the gaps. The said-bar sits behind, in outline, because the claim is the background and the result is the thing. PREFIXED `cal`, NOT `sc`. The first version used .scrow/.scn, which are the SCARCITY card's classes and have been since long before this page -- so every row on this table was laid out by a rule written for a different component, the track collapsed to nothing and the count column took 775 pixels. Two components sharing a class name is one component with two owners. */ /* THE CONTRADICTION CARD. Two opposed readings and the decision they create. The rule is visual rather than decorative: the two sides sit on a shared vertical line so the eye reads them as a pair being weighed, and the decision sits outside it because it is the consequence rather than a third opinion. */ .xcard .xsides{display:grid;gap:0;margin:10px 0 12px; border-left:2px solid var(--line2);padding-left:12px} .xside{margin:0;padding:6px 0;font-size:var(--t-s);line-height:1.55; color:var(--prose)} .xside + .xside{border-top:1px dashed var(--line)} .xtag{display:block;font-size:var(--t-xxs);letter-spacing:.14em; text-transform:uppercase;color:var(--dim2);margin-bottom:2px} .xdec{margin:0;font-size:var(--t-s);line-height:1.55;font-weight:600; color:var(--text)} @media(max-width:640px){ .xcard .xsides{padding-left:10px} } .sccal{display:grid;gap:7px} .calrow{display:grid;grid-template-columns:minmax(0,86px) minmax(0,1fr) 52px 52px; gap:14px;align-items:center} .calrow.thin{opacity:.5} .calrow.calhead{font-size:var(--t-xxs);letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:var(--dim2);padding-bottom:2px} .calsaid{font-size:var(--t-xs);letter-spacing:.06em;font-weight:700; color:var(--prose);font-variant-numeric:tabular-nums} .caltrack{position:relative;height:16px;background:var(--line); border-radius:2px;overflow:hidden} .calsay{position:absolute;inset:0 auto 0 0;background:transparent; border-right:2px dashed var(--dim);display:block} .calgot{position:absolute;inset:0 auto 0 0;background:var(--dim2);display:block; opacity:.85} .calgot.pos{background:var(--pos)} .calgot.warn{background:var(--warn)} .calgot.neg{background:var(--neg)} .calgotv{text-align:right;font-size:var(--t-m);font-weight:700; font-variant-numeric:tabular-nums} .caln{text-align:right;font-size:var(--t-xs);color:var(--dim2); font-variant-numeric:tabular-nums} @media(max-width:640px){ .calrow{grid-template-columns:minmax(0,72px) minmax(0,1fr) 44px 38px;gap:9px} } /* ------------------------------------------------- the first run One question, asked once, with both games side by side. It is the only screen in the app a reader meets before anything has been built, so it carries no figures and no navigation -- there is nothing yet to navigate to. */ .firstrun{max-width:1000px;margin:0 auto;padding:8px 0 40px} .frhead{padding:0 0 26px;border-bottom:1px solid var(--line);margin-bottom:26px} .frkicker{font-size:var(--t-xxs);letter-spacing:.18em;text-transform:uppercase; font-weight:700;color:var(--dim2);margin-bottom:14px} .frhead h1{font-size:var(--t-5xl);line-height:1.04;letter-spacing:-.03em; font-weight:700;margin:0 0 14px;max-width:16ch;text-wrap:balance} .frhead p{font-size:var(--t-l);line-height:1.55;color:var(--prose); margin:0;max-width:58ch} .frcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px;align-items:start} /* .setup carries a 60px vertical margin for the page it was written for. Inside this grid that is a gap the layout already provides, and it left a hole between the rule and the first card big enough to read as a rendering fault. */ .frcols > *,.frcols .setup{margin:0} .frgame{font-size:var(--t-xxs);letter-spacing:.18em;text-transform:uppercase; font-weight:700;color:var(--accent);margin-bottom:12px} /* `classicSetup()` carries its own "Your classic team" heading, which labelled a column on the old two-up screen. Under a page titled "Connect your Classic team" it is the same words twice and a second rule under the first. Hidden in both first-run wrappers, not deleted, because the drawer reuses the same function where the heading is the only label there is. */ .frgame-wrap .sec,.frone .sec{display:none} /* ------------------------------------------------- first run: the chooser Two cards, one question. Sized so both fit above the fold on a phone -- this is the screen a tester reaches from an email, often on a bus, and a choice they have to scroll to find is a choice they do not know they have. */ .frpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px;margin:0 0 22px} .frcard{display:flex;flex-direction:column;align-items:flex-start;gap:7px; width:100%;text-align:left;padding:20px;border-radius:var(--r); border:1px solid var(--ctlline);background:var(--panel);color:var(--text); cursor:pointer} .frcard:hover{border-color:var(--accent);background:var(--panel2)} .frcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .frcardk{font-size:var(--t-xxs);letter-spacing:.18em;text-transform:uppercase; color:var(--accent)} .frcard b{font-size:var(--t-2xl);font-weight:650;letter-spacing:-.02em; line-height:1.2} .frcard>span:not(.frcardk):not(.frcardh){font-size:var(--t-s);line-height:1.55; color:var(--prose)} /* No monospace: the approved set does not use one anywhere, and a hostname does not need a different typeface to read as an address. */ .frcardh{font-size:var(--t-xs);letter-spacing:.02em; color:var(--dim2);margin-top:2px} .frnote{font-size:var(--t-s);line-height:1.6;color:var(--dim);max-width:62ch} /* One form, not two columns of them. */ .frone{max-width:620px} .frone .setup{margin:0;max-width:none} .frback{display:inline-flex;align-items:center;margin-top:14px; font-size:var(--t-s)} /* ------------------------------------------ first run: the way out of a no Its own block under the form rather than a line inside the results box, so what was pasted, what the app read and what to do next are all on screen together. */ .frtrouble{max-width:620px;margin:18px 0 0;padding:18px 20px; border:1px solid var(--line);border-left:10px solid var(--accent); border-radius:var(--r);background:var(--panel)} .frtrouble h3{font-size:var(--t-xxs);letter-spacing:.16em;text-transform:uppercase; color:var(--dim);margin:0 0 10px} .frswap{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)} .frswap b{display:block;font-size:var(--t-l);font-weight:650;line-height:1.35; margin-bottom:6px} .frswap p{font-size:var(--t-s);line-height:1.55;color:var(--prose);margin:0 0 12px} .frsaid{font-size:var(--t-s);line-height:1.55;color:var(--prose);margin:0 0 12px} .frcauses{margin:0 0 16px;padding-left:20px;font-size:var(--t-s);color:var(--prose)} .frcauses li{margin:7px 0;line-height:1.55} .frcauses b{color:var(--text);font-weight:600} .fracts{display:flex;flex-wrap:wrap;gap:10px} .frstuck{font-size:var(--t-xs);line-height:1.55;color:var(--dim);margin:14px 0 0} @media(max-width:640px){ .frcard{padding:16px} .frcard b{font-size:var(--t-xl)} .frtrouble{padding:16px;border-left-width:6px} .fracts .btn{flex:1 1 auto} } @media(max-width:640px){ .frhead h1{font-size:var(--t-3xl);max-width:none} .frhead p{font-size:var(--t-m)} .firstrun{padding-bottom:28px} } /* -------------------------------------- the dossier's tab furniture (handoff) Home / away, Opponents, Returns and Compare were four tables with a sentence over them. They now open the way the dossier's own front page does: a ranked bar list, the claim as a headline, the figure that proves it, and the evidence below in cards rather than loose on the page. The hero REUSES the front page's parts -- .dhrail, .dhbrand, .dhhead, .dhscore, .dhtake, .dhstats -- rather than restating them, so a reader moving between tabs is looking at one object and not five. What is new is the stacked layout and the horizontal bar list: a ranking reads down a column, and the vertical bars on the front page cannot do that. Self-contained; breakpoints at the end of the section. */ .thero{display:grid;grid-template-columns:44px minmax(0,1fr);gap:26px; background:var(--panel2);border-radius:var(--r);padding:26px;margin-bottom:16px} .thero .dhbrand{margin-bottom:22px} .thero .dhhead{margin-top:30px} .thct{font-size:var(--t-xxs);letter-spacing:.06em;text-transform:uppercase; font-weight:700;margin-bottom:14px;color:var(--prose)} /* COMPACT, for a page that is a tool rather than a piece of writing. The Player Pool is scanned and operated: a reader arrives knowing what he wants and the table is the thing he wants. The full hero would push it below the fold to tell him something he did not ask. This keeps the family -- rail, masthead, ranked bars, a claim and the figure behind it -- at about half the height, and the tool stays the page. */ .thero.compact{padding:18px 20px;margin-bottom:12px} .thero.compact .dhbrand{margin-bottom:14px} .thero.compact .dhhead{font-size:var(--t-2xl);margin-top:16px;max-width:34ch} .thero.compact .dhscore{margin:12px 0 10px} .thero.compact .dhscore strong{font-size:var(--t-4xl)} .thero.compact .dhtake{font-size:var(--t-s)} .thero.compact .dhstats{margin-top:16px;padding:14px 0} .thero.compact .dhstats b{font-size:var(--t-2xl)} /* A ranked list of rates: label, track, figure. Only the track varies, so the shape of the ranking is readable before a single number is. */ .tbars{display:grid;gap:9px} .tbar{display:grid;grid-template-columns:var(--tbl-w,minmax(54px,auto)) minmax(0,1fr) 52px; gap:14px;align-items:center} .tbars.named{--tbl-w:minmax(0,132px)} .tbl{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase; font-weight:700;color:var(--prose)} .tbars.named .tbl{letter-spacing:0;text-transform:none;font-size:var(--t-m); font-weight:400;color:var(--text)} .tbt{height:10px;background:var(--line);border-radius:2px;overflow:hidden} .tbt i{display:block;height:100%;min-width:3px;background:var(--text)} .tbt i.hot{background:var(--accent)} .tbt i.pos{background:var(--pos)} .tbt i.neg{background:var(--neg)} .tbt i.warn{background:var(--warn)} .tbt i.info{background:var(--info)} .tbv{text-align:right;font-size:var(--t-m);font-weight:700; font-variant-numeric:tabular-nums} .tbar.thin{opacity:.5} /* Every block below the hero is a card with a rule-and-label header. The label says what the block is; the rule carries it to the edge so the eye can find the next one without reading. */ .tcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:18px 20px;margin-bottom:14px} .tcardt{display:flex;align-items:center;gap:12px;color:var(--dim2); font-size:var(--t-xxs);letter-spacing:.16em;text-transform:uppercase; font-weight:700;margin:0 0 14px} .tcardt i{height:1px;background:var(--line);flex:1} .thbody{min-width:0} .tlead{font-size:var(--t-s);line-height:1.55;color:var(--prose);max-width:80ch; margin:-4px 0 14px} .tcard>.tbars+.tlead,.tcard>*+.tlead{margin-top:12px} /* The read. One sentence saying what the block above means for a decision, in the accent, because it is the only place on the page where the app is allowed to tell you something rather than show it. */ .tread{border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0; background:linear-gradient(90deg,var(--accentdim),transparent 72%); padding:12px 16px;margin:0 0 14px} .treadk{font-size:var(--t-xxs);letter-spacing:.16em;text-transform:uppercase; font-weight:700;color:var(--accent);margin-bottom:5px} .tread p{margin:0;font-size:var(--t-m);line-height:1.5;color:var(--text)} /* The same shape in blue for a note about how to read something, which is a different kind of sentence and should not look like a finding. */ .tnote{border-left:3px solid var(--info);border-radius:0 var(--r) var(--r) 0; background:linear-gradient(90deg,color-mix(in srgb,var(--info) 11%,transparent), transparent 72%); padding:11px 16px;margin:14px 0 0;font-size:var(--t-s);line-height:1.55; color:var(--prose)} .tnote b{color:var(--text)} .tfigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .tfig{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r); padding:14px 16px} .tfigk{font-size:var(--t-xxs);letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:var(--dim)} .tfigv{font-size:var(--t-4xl);line-height:1;font-weight:700;margin-top:9px; letter-spacing:-.02em;font-variant-numeric:tabular-nums} .tfigv.pos{color:var(--pos)} .tfigv.warn{color:var(--warn)} .tfigv.neg{color:var(--neg)} .tfigv.accent{color:var(--accent)} .tfigsub{font-size:var(--t-xs);color:var(--dim);margin-top:9px;line-height:1.45} /* What matters: the figure first, its name second, the sentence third. Three rows at most -- a list of everything is not a summary. */ .twrow{display:grid;grid-template-columns:minmax(92px,auto) minmax(0,1fr);gap:22px; padding:14px 0;border-top:1px solid var(--line);align-items:start} .twrow:first-child{border-top:0;padding-top:0} .twn{font-size:var(--t-3xl);line-height:1;font-weight:700;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .twk{font-size:var(--t-xxs);letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:var(--dim)} .twt{font-size:var(--t-s);line-height:1.55;color:var(--prose);margin:5px 0 0} .tchip{display:inline-block;padding:5px 12px;border-radius:999px; background:var(--accentdim);color:var(--accent);font-size:var(--t-xxs); letter-spacing:.12em;text-transform:uppercase;font-weight:700;white-space:nowrap} .tchip.info{background:color-mix(in srgb,var(--info) 13%,transparent);color:var(--info)} .tchip.quiet{background:var(--line);color:var(--dim)} /* One opponent, one row: who, how it went, and the figure it comes to. */ .topps{display:grid;gap:8px} .topp{display:grid; grid-template-columns:minmax(96px,auto) minmax(0,1fr) 58px minmax(0,150px); gap:16px;align-items:center;background:var(--panel2);border:1px solid var(--line); border-radius:var(--r);padding:10px 14px} .topp.thin{opacity:.52} .topp.next{border-color:var(--accentline);background:var(--accentdim)} .toppc{font-size:var(--t-l);font-weight:700;letter-spacing:-.01em} .toppn{display:block;font-size:var(--t-micro);letter-spacing:.1em;font-weight:700; text-transform:uppercase;color:var(--dim);margin-top:3px} .toppv{text-align:right;font-size:var(--t-l);font-weight:700; font-variant-numeric:tabular-nums} .toppd{font-size:var(--t-xs);color:var(--dim);line-height:1.4} /* A run of matches as squares: the habit is the pattern, not the last one. */ .tstrip{display:grid;grid-template-columns:minmax(104px,auto) minmax(0,1fr) 46px; gap:16px;align-items:center;padding:11px 0;border-top:1px solid var(--line)} .tstrip:first-of-type{border-top:0;padding-top:2px} .tstripk{font-size:var(--t-m);font-weight:600} .tstripn{display:block;font-size:var(--t-xxs);letter-spacing:.1em;font-weight:700; text-transform:uppercase;color:var(--dim);margin-top:3px} .tsq{display:flex;flex-wrap:wrap;gap:4px} .tsq i{width:16px;height:16px;border-radius:3px;background:var(--line);display:block} .tsq i.on{background:var(--pos)} .tsq i.on.alt{background:var(--info)} .tstrip .tbv{font-size:var(--t-l)} /* Two columns of the same thing, side by side, when the page is a comparison rather than a record. */ .tpair{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center} .tvs{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:color-mix(in srgb,var(--info) 15%,transparent);color:var(--info); font-size:var(--t-xxs);letter-spacing:.1em;text-transform:uppercase;font-weight:700} /* Which evidence to show. The tabs answer a question at the top and then prove it three different ways underneath; all three at once is a scroll, and the reader only ever wants one of them. The hero and the read never move -- those are the answer, and an answer that changes when you pick a different proof would be a different kind of page. */ .tnav{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:0 0 14px} .tnavb{background:transparent;border:1px solid var(--line2);border-radius:999px; color:var(--dim);font:inherit;font-size:var(--t-s);font-weight:600; padding:7px 15px;cursor:pointer} .tnavb:hover{color:var(--text);border-color:var(--line3)} .tnavb.on{color:var(--info);background:color-mix(in srgb,var(--info) 12%,transparent); border-color:color-mix(in srgb,var(--info) 55%,transparent)} .tnavb:focus-visible{outline:2px solid var(--info);outline-offset:2px} .tnavb i{font-style:normal;color:var(--dim2);margin-left:6px; font-variant-numeric:tabular-nums} .tnavb.on i{color:inherit} /* Controls on the left, what the order means on the right. */ .tnavrow{display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap;margin:0 0 16px} .tnavrow .tnav,.tnavrow .seg{margin:0} .tnavnote{font-size:var(--t-s);color:var(--dim2)} @media(max-width:900px){ .thero{grid-template-columns:1fr;gap:18px;padding:20px} .thero .dhrail{display:none} .thero .dhhead{margin-top:22px} .topp{grid-template-columns:minmax(84px,auto) minmax(0,1fr) 52px;row-gap:8px} .toppd{grid-column:1/-1} .tpair{grid-template-columns:1fr;justify-items:stretch} .tvs{justify-self:center} } @media(max-width:640px){ .tbar{grid-template-columns:var(--tbl-w,minmax(44px,auto)) minmax(0,1fr) 44px;gap:10px} .tbars.named{--tbl-w:minmax(0,96px)} .twrow{grid-template-columns:1fr;gap:4px} .tstrip{grid-template-columns:1fr;gap:8px} /* An opponent row squeezed a club code, a bar, a figure and two lines of detail into 375px, and the bar -- the only part that is a comparison -- came out about a centimetre long. Stacked, the name and the figure read as a headline and the bar gets the whole width it needs to mean anything. */ .topp{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px} .topp .tbt{grid-column:1/-1;order:2;height:8px} .toppv{order:1;font-size:var(--t-xl)} .toppd{grid-column:1/-1;order:3;margin-top:2px} /* Pills right-aligned wrap into a ragged block on a phone. Left, and scrolling, so the set reads as one control. */ .tnav{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} .tnav::-webkit-scrollbar{display:none} .tnavb{flex:0 0 auto} .tnavrow{gap:8px} .tcard{padding:16px 14px} .thero{padding:18px 14px} } /* ------------------------------------------- the watchlist, to the comp proposed-pages/watchlist.html at 1440: intro on the board, Reg's read, pill filters, one feature card, then five-column rows. Values are the comp's computed styles; the phone deltas are the pilot's, at the end. Labels and small print are blocks with their own 16.5px line so the line boxes measure what the comp's do (its inline labels sit in 16.5px lines, not in the page's 21px strut). */ .watchpage{font-size:var(--t-m);line-height:1.5} .watch-intro{background:var(--board);color:var(--boardink);padding:24px;display:flex; justify-content:space-between;gap:20px;margin:0 0 20px} .watch-intro h2{font-size:var(--t-28);line-height:1.12;letter-spacing:-1px;font-weight:700;margin:0} .watch-intro p{font-size:var(--t-13);line-height:1.5;margin:12px 0 0} .read{background:var(--readbg);border-left:3px solid var(--readline);padding:14px 18px;margin:20px 0} .read .label,.feature .label{display:block;font-size:var(--t-xs);line-height:16.5px;font-weight:400; letter-spacing:1.3px;text-transform:uppercase;color:var(--dim)} .read .label{color:var(--accent)} .read p{margin:7px 0 0;font-size:var(--t-l);line-height:24px} .read .pn{font-weight:inherit} .watch-filters{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0} .watch-filters button{font:inherit;font-size:var(--t-s);line-height:18px;padding:8px 12px; border:1px solid var(--line);border-radius:999px;background:none;color:var(--text);cursor:pointer} .watch-filters button[aria-pressed=true]{background:var(--pillon-bg);color:var(--accent); border-color:var(--pillon-line)} .feature{border-top:3px solid var(--posrule);background:var(--card);padding:22px;margin:0 0 20px} .feature-header{display:flex;justify-content:space-between;gap:15px} .feature h2.player-name{font-size:var(--t-4xl);line-height:1.5;letter-spacing:-1px;font-weight:700; margin:5px 0;cursor:pointer} .feature h2.player-name:hover{color:var(--accent);text-decoration:none} .feature small{display:block;color:var(--dim);font-size:var(--t-xs);line-height:16.5px} .verdict{display:block;color:var(--gold);font-size:var(--t-s);line-height:18px} .verdict.positive{color:var(--pos)} .feature-header .figures{border:0;margin:0;padding-top:5px} .feature-layout{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:22px} .feature-layout>div>p{font-size:var(--t-13);color:var(--prose);line-height:1.7;margin:0} .figures{display:flex;gap:30px;border-top:1px solid var(--line);margin-top:15px;padding-top:16px} .figures strong{display:block;font-size:var(--t-27);line-height:1.5;font-weight:700} .figures strong.positive{color:var(--pos)} .figures strong.negative{color:var(--accent)} .fixture-run{display:grid;grid-template-columns:repeat(3,1fr);gap:3px} .fixture-run div{background:var(--panel2);padding:12px;font-size:var(--t-m);line-height:1.5} .fixture-run div.d1,.fixture-run div.d2{background:var(--fx-edge-bg);color:var(--fx-edge-fg)} .fixture-run div.d3{background:var(--fx-even-bg);color:var(--fx-even-fg)} .fixture-run div.d4,.fixture-run div.d5{background:var(--fx-under-bg);color:var(--fx-under-fg)} .fixture-run small{display:block;color:inherit;font-size:var(--t-xs);line-height:16.5px} .fixture-run b{display:block;font-size:var(--t-20);line-height:1.5;font-weight:700;margin-top:7px} /* THE DARK CALLOUT. Ten pixels of rule, from Luis's own box (18 Sep) -- at three it read as a hairline beside a panel rather than as the mark down the side of it. */ .reason{margin-top:16px;padding:0;background:var(--casebg);border-left:10px solid var(--caseline); font-size:var(--t-s);line-height:18px;color:var(--dim);text-align:left} .reason summary{cursor:pointer;font-size:var(--t-s);line-height:18px;font-weight:600; padding:14px 16px;color:var(--caseink)} .reason[open]{padding-bottom:14px} .reason p{font-size:var(--t-13);line-height:1.55;padding:9px 0 10px;margin:0 16px 10px;color:var(--casetext)} .reason p:first-of-type{padding-bottom:12px;border-bottom:1px solid var(--caserule);margin-bottom:12px} .reason p:last-child{margin-bottom:0} /* Both markers take the callout's own accent: on a ground this dark the page's positive and negative are a dark green and a dark red in Light, which is the box's own colour scheme working against it. The glyph is what separates a plus from a minus, and it is doing that already. */ .reason .positive,.reason .negative{color:var(--caseaccent)} .watch-row{display:grid;grid-template-columns:1.5fr .65fr .65fr .65fr 1fr;gap:12px; align-items:center;padding:19px 12px;border-bottom:1px solid var(--line); font-size:var(--t-m);line-height:1.5} .watch-row .player-name{font-size:var(--t-l);line-height:1.5;font-weight:650;cursor:pointer} .watch-row .player-name:hover{color:var(--accent);text-decoration:none} .watch-row small{display:block;font-size:var(--t-xs);line-height:16.5px;color:var(--dim);margin-top:3px} .watch-row b{font-size:var(--t-17);line-height:1.5;font-weight:700} .watch-row .role{color:var(--gold);margin-top:7px} .watch-row .role.unavailable{color:var(--accent)} .watch-row>div>span{font-size:var(--t-m);line-height:1.5} .watch-row>div>span.positive{color:var(--pos)} .watch-row.row-head{font-size:var(--t-xs);line-height:16.5px;color:var(--dim); border-top:1px solid var(--line2);padding-top:10px;padding-bottom:10px} .wnote{font-size:var(--t-xs);line-height:16.5px;color:var(--dim);margin:14px 0 0} @media(max-width:640px){ /* The pilot (mobile-pilot/linked-page.css) at 390: a heading with a .season aside stacks, gap 16; filter pills are 44px tap targets and the pressed one is filled with the bright accent in both themes. */ .pagehead.stack .heading{flex-direction:column;align-items:flex-start;gap:16px} .watch-intro{display:block} .watch-filters button{font-size:var(--t-13);line-height:20px;padding:10px 15px; color:var(--dim);border-color:var(--line2)} .watchpage .watch-filters button{min-height:44px} /* over .content button's 36px */ .watch-filters button[aria-pressed=true]{background:var(--pillfill);color:var(--pillfillink); border-color:var(--pillfillline)} .feature-layout{grid-template-columns:1fr} .watch-row{grid-template-columns:1fr 1fr} .watch-row.row-head{display:none} } /* ------------------------------------------- the phone Player Pool mobile-pilot/pool.html at 390, both themes. Rendered below 640px only (squad.js poolPhone), so nothing here is scoped to a media query. */ .poolphone{font-size:var(--t-15);line-height:1.5} .poolphone .pool-context{display:flex;align-items:center;justify-content:space-between;min-height:44px; margin:-10px 0 8px;color:var(--dim)} .poolphone .pool-context>span{font-size:var(--t-xxs);line-height:15px;letter-spacing:1.2px} .poolphone .page-heading{display:flex;align-items:center;justify-content:space-between;gap:8px; min-height:44px;margin:7px 0 20px} .poolphone .page-heading h1{font-size:var(--t-32);line-height:38px;font-weight:550;letter-spacing:-1.1px;margin:0} .poolphone .ui-icon{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:999px;background:none;color:var(--text);padding:0;flex:none} .poolphone .ui-icon .ni svg{width:19px;height:19px} .poolphone #watch-only[aria-pressed=true]{color:var(--accent);border-color:var(--accent)} .poolphone #watch-count{position:absolute;top:-5px;right:-3px;background:var(--pillfill);color:var(--pillfillink); font-size:var(--t-micro);min-width:16px;height:16px;line-height:16px;border-radius:20px;font-weight:650} .poolphone #watch-count:empty{display:none} .poolphone .pool-lead{background:var(--board);color:var(--boardink);padding:17px 18px 15px;margin:0 0 22px} .poolphone .pool-lead>p{font-size:var(--t-micro);line-height:1.5;letter-spacing:1.4px;margin:0 0 8px} .poolphone .pool-lead>div{display:flex;align-items:center;justify-content:space-between;gap:16px} .poolphone .pool-lead-name{display:block;border:0;background:none;color:var(--boardink);text-align:left;padding:0; min-height:44px;font-size:var(--t-24);line-height:28px;font-weight:650;letter-spacing:-.5px;font-family:inherit} .poolphone .pool-lead small{display:block;color:var(--boardink);font-size:var(--t-s);line-height:18px} .poolphone .lead-gain{text-align:right} .poolphone .lead-gain strong{font-size:var(--t-36);font-weight:600;letter-spacing:-1.5px;line-height:40px} .poolphone .lead-gain small{font-size:var(--t-xxs);line-height:14px} .poolphone .pool-search{display:flex;align-items:center;gap:10px;margin:0 0 14px;background:var(--panel); border:1px solid var(--line);border-radius:12px;padding:3px 4px 3px 13px} .poolphone .pool-search>.ni{display:flex;color:var(--dim);flex:none} .poolphone .pool-search>.ni svg{width:19px;height:19px} .poolphone .pool-search input{width:100%;min-width:0;height:44px;background:transparent;border:0;outline:none; color:var(--text);font-size:var(--t-l);font-family:inherit;padding:1px 2px;margin:0;border-radius:0} .poolphone .pool-search:focus-within{border-color:var(--dim)} .poolphone .pool-search .ui-icon{border:0;border-radius:9px;background:var(--panel2)} .poolphone #filter-dot{position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--accent)} .poolphone .pool-positions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px} .poolphone .pool-positions button{border:1px solid var(--line);min-height:44px;padding:8px 3px;border-radius:999px; font-size:var(--t-13);line-height:1.5;color:var(--dim);background:none;font-family:inherit} .poolphone .pool-positions button[aria-pressed=true]{background:var(--pillfill);border-color:var(--pillfill);color:var(--pillfillink)} .poolphone .pool-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 2px; color:var(--dim);font-size:var(--t-xs);line-height:1.5;min-height:44px} .poolphone .pool-toolbar label{display:flex;align-items:center;position:relative} .poolphone .pool-toolbar select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--text); font-size:var(--t-s);padding:10px 26px 10px 8px;min-height:44px;max-width:160px;font-family:inherit} .poolphone .pool-toolbar .ni{position:absolute;right:3px;pointer-events:none;display:flex} .poolphone .pool-toolbar .ni svg{width:14px;height:14px} .poolphone .pool-columns,.poolphone .pool-record{display:grid;grid-template-columns:minmax(0,1fr) 55px 62px 44px;gap:6px;align-items:center} .poolphone .pool-columns{padding:12px 0;border-bottom:1px solid var(--line2);color:var(--dim);font-size:var(--t-xxs);line-height:15px;letter-spacing:.3px} .poolphone .pool-columns>span:not(:first-child){text-align:right} .poolphone .pool-record{min-height:78px} .poolphone .pool-item{border-bottom:1px solid var(--line)} .poolphone .pool-person{min-height:54px;text-align:left;border:0;border-radius:0;padding:5px 0;min-width:0;background:none; color:var(--text);display:flex;flex-direction:column;justify-content:center;gap:3px;font-family:inherit} .poolphone .pool-person strong{font-size:var(--t-15);line-height:20px;font-weight:600;overflow-wrap:anywhere} .poolphone .pool-person small{font-size:var(--t-xxs);line-height:15px;color:var(--dim)} .poolphone .pool-number{font-size:var(--t-15);line-height:1.5;text-align:right;font-variant-numeric:tabular-nums;font-weight:500} .poolphone .pool-upgrade{color:var(--pos)} .poolphone .pool-upgrade.flat{color:var(--dim)} .poolphone .pool-expand{border:0;padding:0;min-width:44px;min-height:44px;color:var(--dim);background:none; display:flex;justify-content:center;align-items:center} .poolphone .pool-expand .ni svg{width:17px;height:17px;transition:transform .18s ease} .poolphone .pool-expand[aria-expanded=true] .ni svg{transform:rotate(180deg)} .poolphone .pool-item:has(.pool-expand[aria-expanded=true]) .pool-person strong{color:var(--accent)} .poolphone .pool-expanded{background:var(--panel);margin-bottom:14px;padding:17px 14px 14px} .poolphone .pool-swap-label{font-size:var(--t-micro);letter-spacing:1.4px;color:var(--dim);margin:0 0 8px} .poolphone .pool-swap{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:var(--t-m)} .poolphone .pool-swap .ni{display:flex;color:var(--dim)} .poolphone .pool-swap .ni svg{width:16px;height:16px} .poolphone .pool-swap>span:last-child{color:var(--dim)} .poolphone .pool-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:20px 0} .poolphone .pool-metrics small{display:block;color:var(--dim);font-size:var(--t-xxs)} .poolphone .pool-metrics strong{display:block;font-size:var(--t-23);line-height:30px;font-weight:550;letter-spacing:-.6px;margin-top:3px} .poolphone .pool-role{font-size:var(--t-s);color:var(--dim);line-height:20px;margin:0 0 14px} .poolphone .pool-role strong{font-weight:500;color:var(--text)} .poolphone .pool-fixture{margin-bottom:18px} .poolphone .pool-fixture small{display:block;font-size:var(--t-xxs);color:var(--dim);margin-bottom:6px} .poolphone .pool-chip{display:inline-block;font-size:var(--t-s);line-height:18px;padding:5px 10px;border:1px solid var(--line2);border-radius:999px} .poolphone .pool-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px} .poolphone .pool-actions button{min-height:44px;border:1px solid var(--line2);border-radius:999px;padding:8px 10px; display:flex;align-items:center;justify-content:center;gap:7px;font-size:var(--t-s);background:none;color:var(--text);font-family:inherit} .poolphone .pool-actions .ni svg{width:16px;height:16px} .poolphone .pool-actions .card{background:var(--board);color:var(--boardink);border-color:var(--board)} .poolphone .pool-actions [aria-pressed=true]{color:var(--accent);border-color:var(--accent)} .poolphone .pool-more{min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%; border:1px solid var(--line2);border-radius:999px;margin-top:20px;font-size:var(--t-13);background:none;color:var(--text);font-family:inherit} .poolphone .pool-more .ni svg{width:16px;height:16px} .poolphone .pool-footnote{font-size:var(--t-xxs);line-height:17px;color:var(--dim2);margin:20px 0 0} .poolphone .pool-empty{text-align:center;padding:34px 14px} .poolphone .pool-empty h2{font-size:var(--t-20);margin:0 0 8px} .poolphone .pool-empty p{font-size:var(--t-13);color:var(--dim);line-height:20px;margin:0} .poolphone .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .psheet .pool-field{display:block;font-size:var(--t-13);color:var(--dim);margin-bottom:18px} .psheet .pool-field select{display:block;width:100%;background:var(--bg);border:1px solid var(--ctlline);border-radius:10px; color:var(--text);margin-top:8px;min-height:48px;padding:10px 12px;font-size:var(--t-l);font-family:inherit} .psheet .pool-filter-actions{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:24px} .psheet .pool-filter-actions button{min-height:48px;border:1px solid var(--ctlline);border-radius:999px;padding:10px; font-size:var(--t-13);background:none;color:var(--text);font-family:inherit} .psheet .pool-filter-actions button:last-child{background:var(--pillfill);border-color:var(--pillfill);color:var(--pillfillink)} /* ------------------------------------------- the phone Your match mobile-pilot/match.html at 390, both themes. Rendered below 640px only (exits.js livePhone), for a live or finished round. */ .matchphone{font-size:var(--t-15);line-height:1.5} .matchphone .page-context{display:flex;align-items:center;justify-content:space-between;gap:12px; font-size:var(--t-xxs);line-height:16px;letter-spacing:1.35px;color:var(--dim)} .matchphone .live{display:flex;align-items:center;gap:6px;letter-spacing:1.2px} .matchphone .live>span{width:5px;height:5px;background:var(--pos);border-radius:50%} .matchphone .page-heading{display:flex;justify-content:space-between;align-items:center;margin:7px 0 18px;gap:8px;min-height:44px} .matchphone .page-heading h1{font-size:var(--t-32);line-height:38px;font-weight:550;letter-spacing:-1.1px;margin:0} .matchphone .icon-button{width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:50%;flex:none;background:none;color:var(--text);padding:0} .matchphone .icon-button .ni svg{width:19px;height:19px} .matchphone .score-card{background:var(--board);color:var(--boardink);padding:22px 20px 0} .matchphone .score-kind{font-size:var(--t-xxs);line-height:16px;letter-spacing:1.35px;color:var(--boardlabel);margin-bottom:8px} .matchphone .score-names{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:8px;align-items:start} .matchphone .score-names .name{min-width:0;overflow-wrap:anywhere;font-size:var(--t-17);line-height:22px;font-weight:550; letter-spacing:-.4px;min-height:44px;display:flex;align-items:center} .matchphone .score-names .name:last-child{justify-content:flex-end;text-align:right} .matchphone .versus{font-size:var(--t-xxs);line-height:1.5;letter-spacing:1px;text-align:center;align-self:center;color:var(--boardlabel)} .matchphone .score-line{display:grid;grid-template-columns:1fr 20px 1fr;align-items:center;gap:8px;padding:6px 0 12px;font-variant-numeric:tabular-nums} .matchphone .score-line strong{font-size:var(--t-60);line-height:70px;font-weight:550;letter-spacing:-2.5px} .matchphone .score-line strong:last-child{text-align:right} .matchphone .score-line>span{font-size:var(--t-27);font-weight:400;text-align:center;color:var(--boardlabel)} .matchphone .score-footer{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center; border-top:1px solid var(--boardrule);padding:14px 0 17px;color:var(--boardink);font-size:var(--t-s);line-height:18px} .matchphone .score-footer>span:last-child{text-align:right} .matchphone .score-footer b{font-size:var(--t-15);line-height:18px;font-weight:550;margin-right:4px;font-variant-numeric:tabular-nums} .matchphone .score-gap{font-size:var(--t-s);font-weight:550;text-align:center} .matchphone .reg-reading{padding:20px 0 24px} .matchphone .reg-signature{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:var(--t-xxs);line-height:16px;letter-spacing:1.4px} .matchphone .reg-signature .ni{display:flex} .matchphone .reg-signature .ni svg{width:18px;height:18px} .matchphone .reg-reading p{font-size:var(--t-20);line-height:26px;font-weight:450;letter-spacing:-.65px;margin:10px 0 0;max-width:24ch} .matchphone .section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:0 0 12px} .matchphone .section-heading h2{font-size:var(--t-21);line-height:26px;font-weight:500;letter-spacing:-.55px;margin:0} .matchphone .text-button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--t-s);line-height:18px; padding:0 8px;border:1px solid var(--line);border-radius:999px;min-width:100px;background:none;color:var(--text);font-family:inherit} .matchphone .text-button .ni svg{width:15px;height:15px} .matchphone .team-switch{padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;display:grid;grid-template-columns:1fr 1fr;margin:0 0 16px;gap:4px} .matchphone .team-switch button{border:0;border-radius:999px;min-height:44px;font-size:var(--t-13);line-height:18px;color:var(--dim);font-weight:500;background:none;font-family:inherit} .matchphone .team-switch button[aria-pressed=true]{background:var(--pillfill);color:var(--pillfillink)} .matchphone .team-identity{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;min-height:30px} .matchphone .team-identity h3{font-size:var(--t-17);line-height:23px;font-weight:500;letter-spacing:-.4px;color:var(--accent);margin:0} .matchphone .team-identity small{font-size:var(--t-xs);line-height:16.5px;color:var(--dim)} .matchphone .columns{display:grid;grid-template-columns:1fr 48px;gap:12px;color:var(--dim);font-size:var(--t-xxs);letter-spacing:1.25px; text-transform:uppercase;line-height:16px;padding:10px 0;border-bottom:1px solid var(--line)} .matchphone .columns span:last-child{text-align:center} .matchphone .columns.bench{margin-top:16px} .matchphone .player-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center;min-height:99px} .matchphone .name-line{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .matchphone .player-row .player-name{font-size:var(--t-l);line-height:22px;letter-spacing:-.25px;font-weight:500;color:var(--text)} .matchphone .player-row .club{font-size:var(--t-xxs);line-height:16px;letter-spacing:.65px;color:var(--dim)} .matchphone .player-row .fixture{font-size:var(--t-s);line-height:18px;color:var(--dim);display:block;margin-top:3px} .matchphone .minute-value{color:var(--pos)} .matchphone .minute-value.minutes-low{color:var(--gold)} .matchphone .return-line{font-size:var(--t-s);line-height:18px;display:flex;gap:6px;align-items:center;margin-top:7px;color:var(--text)} .matchphone .return-line .ni{display:flex;color:var(--dim)} .matchphone .return-line .ni svg{width:13px;height:13px} .matchphone .return-line.tbc{color:var(--dim)} .matchphone .pts{text-align:center;font-size:var(--t-3xl);line-height:30px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.7px;padding:0;border-radius:0;background:none} .matchphone .pts.haul{color:var(--pos)} .matchphone .pts.tbc{color:var(--dim);font-size:var(--t-2xl);font-weight:400} .matchphone .available-records{font-size:var(--t-xs);line-height:17px;color:var(--dim);margin:12px 0 0} .matchphone .claims-section,.matchphone .league-section{margin-top:32px} .matchphone .section-count{font-size:var(--t-xs);line-height:17px;color:var(--dim);white-space:nowrap} .matchphone .claim,.psheet .claim{padding:16px;background:var(--panel);margin-bottom:8px} .matchphone .claim-owner,.psheet .claim-owner{font-size:var(--t-xxs);letter-spacing:1px;line-height:16px;color:var(--dim);margin-bottom:10px;text-transform:uppercase} .matchphone .claim-flow,.psheet .claim-flow{display:grid;grid-template-columns:1fr 22px 1fr 44px;gap:8px;align-items:center} .matchphone .claim-flow .label,.psheet .claim-flow .label{font-size:var(--t-xxs);color:var(--dim);letter-spacing:.8px;line-height:16px;margin-bottom:3px} .matchphone .claim-flow .name,.psheet .claim-flow .name{display:flex;align-items:center;min-height:44px;font-size:var(--t-m);line-height:20px;font-weight:500;overflow-wrap:anywhere} .matchphone .claim-flow .club,.psheet .claim-flow .club{display:block;font-size:var(--t-xxs);line-height:16px;letter-spacing:.65px;color:var(--dim)} .matchphone .claim-flow .ni,.psheet .claim-flow .ni{display:flex;color:var(--dim)} .matchphone .claim-flow .ni svg,.psheet .claim-flow .ni svg{width:15px} .matchphone .claim-flow .swing,.psheet .claim-flow .swing{color:var(--pos);font-size:var(--t-23);line-height:1.5;font-weight:500;text-align:right;font-variant-numeric:tabular-nums} .matchphone .claim-flow .swing.negative,.psheet .claim-flow .swing.negative{color:var(--accent)} .matchphone .row-action{display:flex;align-items:center;justify-content:space-between;min-height:52px;width:100%;font-size:var(--t-13); color:var(--text);background:none;border:0;padding:0;font-family:inherit} .matchphone .row-action .ni svg{width:17px;height:17px} .matchphone .match-link,.psheet .match-link{display:grid;grid-template-columns:minmax(0,1fr) 40px 20px;gap:8px;align-items:center;text-align:left;width:100%; padding:15px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);font-family:inherit} .matchphone .match-names,.psheet .match-names{display:grid;gap:4px;font-size:var(--t-m);line-height:20px} .matchphone .match-scores,.psheet .match-scores{display:grid;gap:4px;text-align:center;font-size:var(--t-l);line-height:20px;font-variant-numeric:tabular-nums;font-weight:500} .matchphone .match-link .ni,.psheet .match-link .ni{display:flex;color:var(--dim)} .matchphone .match-link .ni svg,.psheet .match-link .ni svg{width:16px;height:16px} .matchphone .match-link[aria-current=true] .match-names,.psheet .match-link[aria-current=true] .match-names{color:var(--accent)} .matchphone .match-link .sub,.psheet .match-link .sub{display:block;font-size:var(--t-xs);color:var(--dim);margin-top:6px} .matchphone .result-win,.psheet .result-win{color:var(--pos)} .matchphone .result-loss,.psheet .result-loss{color:var(--accent)} .matchphone .page-footer{font-size:var(--t-micro);line-height:16px;letter-spacing:1.4px;color:var(--dim);margin-top:32px} .psheet .info-note{font-size:var(--t-xs);line-height:17px;color:var(--dim);margin:12px 0 0} /* ------------------------------------------- the Feedback survey, to the comp feedback-survey.html at 1440 (800px column): eyebrow, hero on the board, flat question sections with pill options, the send row, a footer line. */ .fbpage{max-width:800px;font-size:var(--t-m);line-height:1.5} .fbpage>.eyebrow,.fbpage .hero .eyebrow{font-size:var(--t-xs);line-height:16.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim)} .fbpage .hero{background:var(--board);color:var(--boardink);padding:25px;display:flex;justify-content:space-between;gap:20px;margin:15px 0;border:0;border-radius:0;box-shadow:none} .fbpage .hero .eyebrow{color:var(--boardlabel);margin-bottom:9px} .fbpage .hero h1{font-size:var(--t-36);line-height:1.1;letter-spacing:-1.4px;font-weight:700;margin:0} .fbpage .hero p{font-size:var(--t-m);line-height:1.5;margin:10px 0 0} .fbpage .fbq{padding:24px 0;border-bottom:1px solid var(--line);margin:0;background:none;border-radius:0;box-shadow:none} .fbpage .fbsec{padding:0;border:0;background:none;border-radius:0;margin:0} .fbpage .fbask{font-size:var(--t-xl);line-height:1.5;font-weight:650;letter-spacing:-.3px;margin:0;max-width:none;display:block} .fbpage .fbask .fbopt{font-family:inherit;font-size:var(--t-13);font-weight:400;letter-spacing:-.3px;color:var(--dim);margin:0;text-transform:none;background:none;padding:0;border:0;border-radius:0} .fbpage .fbhelp{font-size:var(--t-s);line-height:1.5;color:var(--dim);margin:7px 0 14px;max-width:none} .fbpage .fbopts{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px} .fbpage .fbchoice{display:flex;gap:8px;align-items:center;border:1px solid var(--line);padding:11px 13px;background:var(--panel); border-radius:999px;font-size:var(--t-13);line-height:1.5;color:var(--text);min-height:0;text-align:left;font-family:inherit} .fbpage .fbchoice::before{content:'';width:13px;height:13px;border-radius:50%;border:1px solid var(--line3);flex:none;box-sizing:border-box} .fbpage [data-fbmulti]::before{border-radius:3px} .fbpage .fbchoice.on{border-color:var(--pillfillline);background:var(--readbg);color:var(--accent)} .fbpage .fbchoice.on::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--readbg)} .fbpage .fbchoice:hover{color:var(--accent);border-color:var(--accent)} .fbpage .fbscale{align-items:center} .fbpage .fbend{font-size:var(--t-13);color:var(--dim);max-width:18ch;line-height:1.35} .fbpage .fbq textarea,.fbpage .fbq input,.fbpage textarea,.fbpage input.vin{display:block;width:100%;background:var(--fieldbg);color:var(--text); border:1px solid var(--ctlline);padding:12px;font-family:inherit;font-size:var(--t-13);line-height:normal;border-radius:4px;resize:vertical;margin:0} .fbpage .fbq .fbopts+textarea,.fbpage .fbq textarea{margin-top:0} .fbpage .fbfootrow{display:flex;gap:16px;align-items:center;margin-top:24px} .fbpage .sendrow{display:flex;gap:16px;align-items:center;margin-top:24px} .fbpage .sendrow .btn.pri,.fbpage .fbfootrow .btn.pri{background:var(--pillfill);color:var(--pillfillink);border:0;font-weight:650; font-size:var(--t-m);line-height:1.5;padding:9px 13px;border-radius:999px} .fbpage .progress{font-size:var(--t-s);line-height:18px;color:var(--dim)} .fbpage .confirmation{color:var(--pos);margin:15px 0 0;font-size:var(--t-m);line-height:1.5} .fbpage .footer{font-size:var(--t-xs);line-height:16.5px;color:var(--dim);margin:25px 0 0} .fbpage .fbmiss{margin-top:15px;font-size:var(--t-13);line-height:1.5} .fbpage .fbfiled{padding:24px 0 0} /* ------------------------------------------- the dossier's What we see tab player-what-we-see.html at 1440 (dark-only comp; light takes the app's tokens): the note, two columns, the season record and six chart cards, projection detail, patterns, the next five, the actions, a footnote. */ .dov{font-size:var(--t-m);line-height:1.5} .dov .muted{color:var(--dim)} .dov .eyebrow{font-size:var(--t-xs);line-height:1.5;letter-spacing:1.5px;text-transform:uppercase;margin:0} .dov h3,.note strong{font-size:var(--t-l);line-height:24px;font-weight:700;margin:0 0 6px} .note{border-left:3px solid var(--readline);padding:10px 16px;background:var(--notebg);margin:20px 0;font-size:var(--t-m);line-height:1.5;color:var(--text)} .note strong{font-size:var(--t-m);line-height:1.5;margin:0} .note p{margin:6px 0;color:var(--dim)} .dov .columns{display:grid;grid-template-columns:1.35fr 1fr;gap:30px} .dov .columns>section>p{margin:6px 0;color:var(--dim)} .dov .finding{padding:18px 0;border-bottom:1px solid var(--line)} .dov .finding .eyebrow{color:var(--accent);margin-bottom:6px} .dov .finding p{margin:6px 0} .dov .finding .down{color:var(--neg)} .dov .finding .up{color:var(--pos)} .dov .summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)} .dov .summary b{display:block;font-size:var(--t-2xl);line-height:1.5;font-weight:700} .dov .section{margin-top:28px} .dov .record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 0;padding:20px 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--dim)} .dov .record-grid b{display:block;color:var(--text);font-size:var(--t-24);line-height:1.5;font-weight:700} .dov .record-grid small{display:block;font-size:var(--t-s);line-height:18px} .dov .chart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .dov .chart-grid article{padding:22px;background:var(--dovcard);display:flex;flex-direction:column;min-width:0} .dov .chart-grid svg{width:100%;height:auto;aspect-ratio:407/209;display:block} .dov .chart-kicker{display:flex;gap:10px;align-items:baseline;margin-bottom:18px} .dov .chart-kicker>span{font-size:var(--t-xxs);line-height:1.5;color:var(--accent);font-variant-numeric:tabular-nums} .dov .chart-kicker h3{font-size:var(--t-s);line-height:18px;font-weight:600;margin:0} .dov .chart-value{font-size:var(--t-40);line-height:1.1;font-weight:650;letter-spacing:-1.5px;color:var(--dovbig);font-variant-numeric:tabular-nums} .dov .chart-caption-small{font-size:var(--t-xs);line-height:1.5;color:var(--dim);margin:5px 0 20px} .dov .chart-note{font-size:var(--t-xs);line-height:1.5;color:var(--dim);border-top:1px solid var(--line);padding-top:10px;margin-top:14px} .dov .spark-bars{display:flex;gap:14px;align-items:end;min-height:104px;margin-top:auto} .dov .spark-bars>div{flex:1;text-align:center;font-size:var(--t-xs);line-height:1.5} .dov .spark-bars b{font-weight:700} .dov .spark-bars i{display:block;background:var(--dovbar);margin:5px 0 8px} .dov .spark-bars i.hot{background:var(--pos)} .dov .spark-bars small{display:block;font-size:var(--t-xxs);line-height:1.5} .dov .actual-legend{display:flex;gap:14px;align-items:center;color:var(--dim);font-size:var(--t-xs);margin-top:10px} .dov .actual-legend span{display:inline-flex;align-items:center;gap:5px} .dov .actual-legend i{display:block} .dov .actual-key{width:9px;height:9px;border-radius:3px;background:var(--accent)} .dov .expected-key{width:20px;height:0;border-top:1px dashed var(--dim)} .dov .fixtures{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0} .dov .fixture{background:var(--panel);padding:14px 8px;text-align:center;border-top:1px solid var(--line)} .dov .fixture p{margin:6px 0} .dov .fixture strong{display:block;color:var(--pos);font-size:var(--t-2xl);line-height:1.5;margin-top:8px;font-weight:700} .dov .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px} .dov .actions .btn{font-size:var(--t-m);line-height:1.5;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--text)} .dov .actions .btn:hover{color:var(--accent);border-color:var(--accent)} .dov .foot{font-size:var(--t-s);line-height:18px;color:var(--dim);margin:20px 0 6px} @media(max-width:900px){ .dov .columns{grid-template-columns:1fr} .dov .record-grid,.dov .chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .dov .fixtures{grid-template-columns:repeat(3,1fr)} } @media(max-width:640px){ .dov .record-grid,.dov .chart-grid,.dov .fixtures{grid-template-columns:1fr} } /* ------------------------------------------- the dossier's Compare and Insights tabs player-compare-before-rebuild.html and player-insights.html at 1440 (dark-only comps; light takes the app's tokens). */ .dcmp .note{padding:12px 16px} .dcmp .note .eyebrow{display:block;font-size:var(--t-xxs);line-height:15px;letter-spacing:1.3px;text-transform:uppercase} .dcmp .note p{margin:8px 0;color:var(--text)} .dcmp .views{display:flex;gap:8px;margin:24px 0 16px} .dcmp .views button{font-size:var(--t-m);line-height:1.5;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--text);font-family:inherit} .dcmp .views button[aria-selected=true],.dcmp .views button:hover{color:var(--accent);border-color:var(--accent)} .dcmp .panel{padding:20px;background:var(--dovcard);border:1px solid var(--line);border-radius:0;margin:0} .dcmp .panel .eyebrow{font-size:var(--t-xxs);line-height:1.5;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim)} .dcmp .legend{display:flex;gap:20px;margin:18px 0;font-size:var(--t-s);line-height:1.5;padding:0;background:none;border:0;border-radius:0} .dcmp svg{width:100%;height:auto;display:block} .dcmp .table-wrap{overflow:auto} .dcmp table{border-collapse:collapse;width:100%;font-size:var(--t-s)} .dcmp th,.dcmp td{padding:13px 8px;border:0;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;line-height:normal;background:none;font-size:var(--t-s);text-transform:none;letter-spacing:0} .dcmp th:first-child,.dcmp td:first-child{text-align:left} .dcmp th{color:var(--dim);font-weight:400;font-size:var(--t-s)} .dcmp .win{color:var(--pos)} .dcmp .foot{color:var(--dim);font-size:var(--t-xs);line-height:1.5;margin:16px 0 8px} /* ------------------------------------------ dossier: Projection tab body */ /* player-projection.html. One week at a time: a picker, then the components of that week with the number that produced each one underneath it. */ .dproj .week-picker{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0} .dproj .week-picker button{font-size:var(--t-m);line-height:1.5;padding:9px 16px; border:1px solid var(--line);border-radius:999px;background:none;color:var(--dim); font-family:inherit;font-variant-numeric:tabular-nums} .dproj .week-picker button[aria-selected=true], .dproj .week-picker button:hover{color:var(--accent);border-color:var(--accent)} .dproj .detail-head{display:flex;justify-content:space-between;align-items:center; gap:16px;border-bottom:1px solid var(--line);padding-bottom:16px} .dproj .detail-head .eyebrow{display:block;font-size:var(--t-xxs);line-height:1.5; letter-spacing:1.3px;text-transform:uppercase;color:var(--dim)} .dproj .detail-head h2{font-size:var(--t-24);line-height:1.2;margin:5px 0; font-weight:650;letter-spacing:-.4px} .dproj .detail-head strong{font-size:var(--t-40);line-height:1.1;color:var(--pos); font-weight:650;font-variant-numeric:tabular-nums} .dproj .component{display:grid;grid-template-columns:150px minmax(0,1fr) 55px; gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center; font-size:var(--t-m);line-height:1.5} .dproj .component small{display:block;color:var(--dim);font-size:var(--t-xs); line-height:1.5;margin-top:4px} .dproj .component b{text-align:right;font-variant-numeric:tabular-nums; font-weight:650} .dproj .track{height:10px;background:var(--panel2);padding:0;margin:0;border:0;border-radius:0;color:inherit;font-size:0;line-height:0;overflow:hidden} .dproj .track i{height:100%;display:block;background:var(--pos);transform-origin:left} .dproj .track i.neg{background:var(--dataline)} .dproj .context{display:flex;gap:24px;flex-wrap:wrap;margin:24px 0} .dproj .context span{font-size:var(--t-xs);line-height:1.5;color:var(--dim)} .dproj .context b{display:block;color:var(--text);font-size:var(--t-20); line-height:1.4;font-variant-numeric:tabular-nums} .dproj .foot{color:var(--dim);font-size:var(--t-xs);line-height:1.5;margin-top:16px; max-width:88ch} @media(max-width:640px){ .dproj .component{grid-template-columns:100px minmax(0,1fr) 45px;gap:8px} } /* --------------------------------------------- dossier: Returns tab body */ /* player-returns.html: the run of known appearances per route, the full table of five views, the venue split, then the work behind the rates. */ .dret .section-head{display:flex;justify-content:space-between;gap:20px; align-items:center;margin:32px 0 20px} .dret .section-head .eyebrow{display:block;font-size:var(--t-xxs);line-height:1.5; letter-spacing:1.4px;text-transform:uppercase;color:var(--dim)} .dret .section-head span{font-size:var(--t-m);line-height:1.5;color:var(--dim)} .dret h3{font-size:var(--t-20);line-height:1.3;margin:0;letter-spacing:-.4px; font-weight:650} .dret .strip-row{display:grid;grid-template-columns:145px minmax(0,1fr);gap:20px; align-items:center;padding:20px 0;border-bottom:1px solid var(--line); font-size:var(--t-m);line-height:1.5} .dret .strip-row small{display:block;color:var(--dim);font-size:var(--t-xs); line-height:1.5;margin-top:4px} .dret .squares{display:grid;gap:4px} .dret .square{aspect-ratio:1;border-radius:3px;background:var(--line);display:block} .dret .square.hit{background:var(--pos)} .dret .foot i.key{display:inline-block;width:9px;height:9px;border-radius:2px; background:var(--line);vertical-align:baseline} .dret .foot i.key.on{background:var(--pos)} .dret .table-wrap{overflow:auto;margin-top:20px} .dret table{border-collapse:collapse;width:100%;font-size:var(--t-s)} .dret th,.dret td{padding:13px 10px;text-align:right;border:0; border-bottom:1px solid var(--line);white-space:nowrap;background:none; font-size:var(--t-s);line-height:normal;text-transform:none;letter-spacing:0; font-variant-numeric:tabular-nums} .dret th{font-weight:400;color:var(--dim)} .dret th:first-child,.dret td:first-child{text-align:left} .dret td small{display:block;color:var(--dim);font-size:var(--t-xxs); line-height:1.5} .dret .venue-pair{padding:18px 0;border-bottom:1px solid var(--line); font-size:var(--t-m);line-height:1.5} .dret .venue-pair>b{display:block;margin-bottom:12px;font-weight:650} .dret .venue-bar{display:grid;grid-template-columns:48px minmax(0,1fr) 48px; align-items:center;gap:14px;margin:10px 0} .dret .venue-bar .track{background:var(--panel2);height:12px;padding:0;margin:0; border:0;border-radius:0;font-size:0;line-height:0;overflow:hidden} .dret .venue-bar .track i{display:block;height:100%;background:var(--pos)} .dret .venue-bar .track i.away{background:var(--dataline)} .dret .venue-bar strong{text-align:right;font-variant-numeric:tabular-nums} .dret .matter-row{display:grid;grid-template-columns:100px minmax(0,1fr);gap:24px; padding:22px 0;border-bottom:1px solid var(--line);font-size:var(--t-m); line-height:1.5} .dret .matter-row>strong{font-size:var(--t-5xl);letter-spacing:-1px; line-height:1.2;font-weight:650;font-variant-numeric:tabular-nums} .dret .matter-row b{font-weight:650} .dret .matter-row p{color:var(--dim);margin:8px 0 0} .dret .foot{font-size:var(--t-xs);line-height:1.5;color:var(--dim);margin-top:16px; max-width:88ch} @media(max-width:640px){ .dret .strip-row{grid-template-columns:1fr;gap:10px} .dret .squares{gap:3px} .dret .section-head{display:block} .dret .matter-row{grid-template-columns:1fr;gap:8px} } /* ------------------------------------------------ dossier: Form tab body */ /* player-form.html: one window at a time, its numbers as a grid of nine. A window that has not filled yet is a disabled pill carrying its count. */ .dform .windows{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 18px} .dform .windows button{font-size:var(--t-m);line-height:1.5;padding:9px 16px; border:1px solid var(--line);border-radius:999px;background:none; color:var(--dim);font-family:inherit} .dform .windows button[aria-selected=true], .dform .windows button:not(:disabled):hover{color:var(--accent); border-color:var(--accent)} .dform .windows button:disabled{opacity:.5} .dform .metrics{display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)} .dform .metric{padding:22px 12px;border-bottom:1px solid var(--line)} .dform .metric span{color:var(--dim);font-size:var(--t-s);line-height:1.5} .dform .metric strong{display:block;font-size:var(--t-32);line-height:1.2; color:var(--dovbig);font-weight:650;font-variant-numeric:tabular-nums} .dform .progress-windows{display:flex;gap:28px;flex-wrap:wrap;padding:22px 0; color:var(--dim);font-size:var(--t-s);line-height:1.5} .dform .progress-windows b{color:var(--text);font-weight:650} .dform .foot{color:var(--dim);font-size:var(--t-xs);line-height:1.5; margin-top:16px;max-width:88ch} @media(max-width:640px){ .dform .metrics{grid-template-columns:repeat(2,1fr)} .dform .progress-windows{display:block} } /* ------------------------------------------ dossier: Home / away tab body */ /* player-home-away.html: a season, the two venues as pairs of bars each scaled against itself, then the full record for that season. */ .dven .choices{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 18px} .dven .choices button{font-size:var(--t-m);line-height:1.5;padding:9px 16px; border:1px solid var(--line);border-radius:999px;background:none; color:var(--dim);font-family:inherit} .dven .choices button[aria-selected=true], .dven .choices button:hover{color:var(--accent);border-color:var(--accent)} .dven .notice{padding:14px 0;color:var(--dim);font-size:var(--t-m); line-height:1.6;border-bottom:1px solid var(--line);max-width:88ch} .dven .split-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .dven .pair-chart{padding:18px 0;border-bottom:1px solid var(--line); font-size:var(--t-m);line-height:1.5} .dven .pair-chart>b{font-weight:650} .dven .pair-line{display:grid;grid-template-columns:45px minmax(0,1fr) 55px; gap:12px;align-items:center;margin:16px 0} .dven .pair-line .track{height:13px;background:var(--panel2);padding:0;margin:0; border:0;border-radius:0;font-size:0;line-height:0;overflow:hidden} .dven .pair-line .track i{height:100%;display:block;background:var(--pos)} .dven .pair-line .track i.away{background:var(--dataline)} .dven .pair-line b{text-align:right;font-variant-numeric:tabular-nums} .dven .read{margin:22px 0;font-size:var(--t-l);line-height:1.6;max-width:74ch} .dven h3{margin:26px 0 12px;font-size:var(--t-20);line-height:1.3; font-weight:650;letter-spacing:-.4px} .dven .table-wrap{overflow:auto} .dven table{border-collapse:collapse;width:100%;font-size:var(--t-s)} .dven th,.dven td{padding:13px 8px;border:0;border-bottom:1px solid var(--line); text-align:right;background:none;font-size:var(--t-s);line-height:normal; text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums} .dven th:first-child,.dven td:first-child{text-align:left} .dven th{color:var(--dim);font-weight:400} .dven td .sub{display:block;color:var(--dim);font-size:var(--t-xxs)} .dven .foot{color:var(--dim);font-size:var(--t-xs);line-height:1.5; margin-top:16px;max-width:88ch} @media(max-width:640px){ .dven .split-grid{grid-template-columns:1fr;gap:0} } /* ------------------------------------------- dossier: Opponents tab body */ /* player-opponents.html: the file on the left, one club at a time on the right. Meetings travel with every rate, and a club never met is a dash. */ .dopp .read{margin:22px 0;font-size:var(--t-l);line-height:1.6;max-width:74ch} .dopp .op-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px; margin-top:28px;align-items:start} .dopp .op-layout>section:first-child{max-height:740px;display:flex; flex-direction:column;min-height:0} .dopp h3{margin:5px 0 12px;font-size:var(--t-20);line-height:1.3;font-weight:650; letter-spacing:-.4px} .dopp .op-list{flex:1;min-height:0;overflow-y:auto;padding-right:12px} .dopp .op-list button{display:grid;grid-template-columns:45px minmax(0,1fr) 50px; align-items:center;gap:12px;width:100%;border:0;border-radius:0; border-bottom:1px solid var(--line);text-align:left;padding:14px 0; background:none;color:var(--text);font-family:inherit;font-size:var(--t-s); line-height:1.5;min-height:0} .dopp .op-list button[aria-pressed=true]{color:var(--accent)} .dopp .op-list button b{text-align:right;font-variant-numeric:tabular-nums} .dopp .op-list .track{display:block;height:10px;background:var(--panel2); overflow:hidden;padding:0;margin:0;border:0;border-radius:0;font-size:0; line-height:0;color:inherit} .dopp .op-list .track i{display:block;height:100%;background:var(--dim2)} .dopp .op-list button[aria-pressed=true] .track i{background:var(--dataline)} .dopp .op-list small{display:block;font-size:var(--t-xs);line-height:1.5; color:var(--dim);margin-top:4px} .dopp .op-detail{background:var(--panel);padding:22px;align-self:start} .dopp .op-detail .eyebrow{display:block;font-size:var(--t-xxs);line-height:1.5; letter-spacing:1.3px;text-transform:uppercase;color:var(--dim)} .dopp .op-detail h3{margin:5px 0 18px;font-size:var(--t-3xl);line-height:1.2} .dopp .op-stats{display:grid;grid-template-columns:1fr 1fr;gap:0 20px} .dopp .op-stats div{padding:12px 0;border-bottom:1px solid var(--line)} .dopp .op-stats small{color:var(--dim);font-size:var(--t-s);line-height:1.5} .dopp .op-stats b{display:block;font-size:var(--t-2xl);line-height:1.3; font-weight:650;font-variant-numeric:tabular-nums} .dopp .foot{color:var(--dim);font-size:var(--t-xs);line-height:1.5; margin-top:16px;max-width:88ch} .dopp .op-detail .foot{margin-top:14px} @media(max-width:900px){ .dopp .op-layout{grid-template-columns:1fr} .dopp .op-layout>section:first-child{max-height:none} } /* --------------------------------------------- dossier: Seasons tab body */ /* player-seasons.html: one compact table, current season first. */ .dseas h3{font-size:var(--t-20);line-height:1.3;font-weight:650; letter-spacing:-.4px;margin:24px 0 12px} .dseas h3 small{font-size:var(--t-m);font-weight:400} .dseas .table-wrap{overflow:auto} .dseas table{border-collapse:collapse;width:100%;font-size:var(--t-s)} .dseas th,.dseas td{padding:13px 8px;border:0;border-bottom:1px solid var(--line); text-align:right;white-space:nowrap;background:none;font-size:var(--t-s); line-height:normal;text-transform:none;letter-spacing:0; font-variant-numeric:tabular-nums} .dseas th:first-child,.dseas td:first-child{text-align:left} .dseas th{color:var(--dim);font-weight:400} .dseas td small{display:block;color:var(--dim);font-size:var(--t-xxs); line-height:1.5} .dseas .hit{color:var(--pos)} .dseas .liveseason td{background:none;font-weight:400} .dseas .vsp{border-bottom:1px dotted var(--line2);cursor:help} .dseas .foot{color:var(--dim);font-size:var(--t-xs);line-height:1.6; margin-top:16px;max-width:88ch} .dseas .career{margin-top:26px;border-top:1px solid var(--line);padding-top:14px} .dseas .career summary{font-size:var(--t-m);line-height:1.5;cursor:pointer; color:var(--dim)} .dseas .career .foot{margin-top:10px} /* ------------------------------------------- dossier: Match log tab body */ /* player-match-log.html: season pills carrying their counts, the table, and the two summary rows -- totals, then the per-90 rate beneath them. */ .dlog .log-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap; margin:24px 0 16px} .dlog .log-controls button{font-size:var(--t-m);line-height:1.5;padding:9px 16px; border:1px solid var(--line);border-radius:999px;background:none; color:var(--dim);font-family:inherit} .dlog .log-controls button[aria-pressed=true], .dlog .log-controls button:hover{color:var(--accent);border-color:var(--accent)} .dlog .log-controls span{font-size:var(--t-m);line-height:1.5;color:var(--dim)} .dlog .table-wrap{overflow:auto} .dlog .match-table{border-collapse:collapse;width:100%;min-width:900px} .dlog .match-table th,.dlog .match-table td{padding:12px 7px;border:0; border-bottom:1px solid var(--line);text-align:right;white-space:nowrap; background:none;font-size:var(--t-s);line-height:normal;text-transform:none; letter-spacing:0;font-variant-numeric:tabular-nums} .dlog .match-table th{color:var(--dim);font-weight:400;font-size:var(--t-xs)} .dlog .match-table th:first-child,.dlog .match-table td:first-child, .dlog .match-table th:nth-child(3),.dlog .match-table td:nth-child(3){text-align:left} .dlog .match-table small{display:block;color:var(--dim);font-size:var(--t-xxs); line-height:1.5} .dlog .match-table .total td{background:var(--logtot); border-top:2px solid var(--line2);font-weight:400} .dlog .match-table .rate td{background:var(--lograte);color:var(--dim); font-size:var(--t-xs)} .dlog .legend{padding:0;background:none;border:0;border-radius:0;margin:20px 0 0} .dlog .lgnd-p{font-size:var(--t-xs);line-height:1.6;color:var(--dim); max-width:88ch;margin-top:12px} /* ----------------------------------------------- dossier: Moves tab body */ /* player-moves.html: every same-position swap, priced over four horizons. */ .dmov h3{font-size:var(--t-20);line-height:1.3;font-weight:650; letter-spacing:-.4px;margin:24px 0 8px} .dmov .dim{font-size:var(--t-m);line-height:1.5;color:var(--dim);margin:0 0 16px} .dmov .table-wrap{overflow:auto} .dmov .moves-table{border-collapse:collapse;width:100%;min-width:740px} .dmov .moves-table th,.dmov .moves-table td{padding:13px 8px;border:0; border-bottom:1px solid var(--line);text-align:right;white-space:nowrap; background:none;font-size:var(--t-m);line-height:normal;text-transform:none; letter-spacing:0;font-variant-numeric:tabular-nums} .dmov .moves-table th{color:var(--dim);font-weight:400;font-size:var(--t-s)} .dmov .moves-table th:first-child, .dmov .moves-table td:first-child{text-align:left} .dmov .moves-table .gain{color:var(--pos)} .dmov .moves-table .loss{color:var(--accent)} .dmov .moves-table button{font-size:var(--t-s);line-height:1.5;padding:7px 12px; border:1px solid var(--line);border-radius:999px;background:none; color:var(--text);font-family:inherit;margin-left:6px} .dmov .moves-table button:hover{color:var(--accent);border-color:var(--accent)} .dmov .foot{color:var(--dim);font-size:var(--t-xs);line-height:1.6; margin-top:16px;max-width:88ch} /* On a phone the two buttons sit in a 12px table cell, where a 34px target is a miss waiting to happen. They stack and take the full tap height. */ @media(max-width:640px){ .dmov .moves-table td:last-child{display:flex;flex-direction:column;gap:8px} .dmov .moves-table button{min-height:44px;margin-left:0;padding:10px 14px} } /* ---------------------------------------------- dossier: Claims tab body */ /* player-claims.html: one table, failed attempts included. */ .dclm h3,.dnews h3{font-size:var(--t-20);line-height:1.3;font-weight:650; letter-spacing:-.4px;margin:24px 0 8px} .dclm .dim{font-size:var(--t-m);line-height:1.5;color:var(--dim);margin:0 0 16px} .dclm .table-wrap{overflow:auto} .dclm .claims-table{border-collapse:collapse;width:100%;min-width:640px} .dclm .claims-table th,.dclm .claims-table td{padding:13px 8px;border:0; border-bottom:1px solid var(--line);text-align:left;background:none; font-size:var(--t-13);line-height:normal;text-transform:none;letter-spacing:0} .dclm .claims-table th{color:var(--dim);font-weight:400;font-size:var(--t-s)} .dclm .claims-table small{display:block;color:var(--dim);font-size:var(--t-xs); margin-top:4px} .dclm .claims-table .denied{color:var(--accent)} .dclm .claims-table .accepted{color:var(--pos)} .dclm .foot,.dnews .foot{color:var(--dim);font-size:var(--t-xs);line-height:1.6; margin-top:16px;max-width:88ch} /* ------------------------------------------------ dossier: News tab body */ /* player-news.html: the coach first, then the headlines tagged to his name. */ .dnews .news-heading{display:flex;justify-content:space-between; align-items:baseline;gap:16px;margin-top:28px;border-bottom:1px solid var(--line)} .dnews .news-heading h3{margin:0 0 12px} .dnews .news-meta{font-size:var(--t-s);line-height:1.5;color:var(--dim)} .dnews .news-list{margin-top:8px} .dnews .news-list article{padding:20px 0;border-bottom:1px solid var(--line)} .dnews .news-list h4{font-size:var(--t-17);font-weight:500;margin:0 0 8px; line-height:1.4} .dnews .empty-note{padding:22px 0;color:var(--dim);font-size:var(--t-m); line-height:1.6} /* --------------------------------------------------------- Roster health */ /* roster-health.html: the squad picture on the board, the players who need a decision as cases, then every one of the fifteen with where he is heading. */ .health-intro{display:flex;justify-content:space-between;gap:25px; align-items:center;padding:24px;background:var(--board);color:var(--fillink)} .health-intro .label{font-size:var(--t-xxs);letter-spacing:1.3px; text-transform:uppercase;color:var(--boardlabel)} .health-intro h2{font-size:var(--t-28);line-height:1.15;margin:9px 0 13px; font-weight:650;letter-spacing:-.5px} .health-intro p{font-size:var(--t-s);color:var(--boardlabel);margin:0} .health-count{min-width:110px} .health-count strong{font-size:var(--t-57);letter-spacing:-2px;display:block; line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums} .health-count strong span{font-size:var(--t-2xl);letter-spacing:-1px; margin-left:7px;font-weight:400} .health-count>span{font-size:var(--t-xs)} .sectionhead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap; align-items:baseline;border-top:1px solid var(--line);padding-top:16px; margin:28px 0 15px} .sectionhead h2{font-size:var(--t-2xl);margin:0;font-weight:650; letter-spacing:-.5px;line-height:1.3} .sectionhead span{font-size:var(--t-xs);color:var(--dim)} .attention{display:grid;grid-template-columns:1fr 1fr;gap:20px} .case{background:var(--panel);border-top:3px solid var(--warn);padding:18px; min-width:0} .case.output{border-top-color:var(--accent)} .case .label{font-size:var(--t-xxs);letter-spacing:1.3px;text-transform:uppercase; color:var(--dim)} .case h3{font-size:var(--t-21);margin:10px 0 17px;font-weight:650; letter-spacing:-.4px;line-height:1.3} .case h3 small{font-size:var(--t-xs);font-weight:400;color:var(--dim)} .case p{font-size:var(--t-s);color:var(--prose);line-height:1.6;margin:8px 0 0} .big-read{display:flex;align-items:center;gap:13px;font-size:var(--t-60); line-height:1.1;letter-spacing:-2px;margin:16px 0;color:var(--warn); font-weight:650;font-variant-numeric:tabular-nums} .big-read span{font-size:var(--t-13);letter-spacing:0;color:var(--prose); line-height:1.4;font-weight:400} .case-foot{border-top:1px solid var(--line);margin-top:17px;padding-top:10px; display:flex;gap:12px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--dim)} .case-foot b{color:var(--text);font-weight:650} .case .risk{color:var(--warn)} .case details{margin-top:12px} .case summary{font-size:var(--t-xs);color:var(--dim);cursor:pointer; min-height:32px;padding:6px 0} /* The value column sizes to the number, not to the number we happened to have when this was built: the comp's 30px holds "4.3" and clips anything wider, and a per-90 figure is not guaranteed to be one digit. */ .comparison>div{display:grid;grid-template-columns:minmax(0,1fr) auto; gap:4px 12px;margin:9px 0;align-items:center} .comparison span{grid-column:1/-1;font-size:var(--t-xs);color:var(--dim)} .comparison .bar{height:8px;background:var(--panel2);margin-top:6px} .comparison .bar i{display:block;height:100%;background:var(--dataline)} .comparison .bar i.base{background:var(--dim2)} .comparison b{font-size:var(--t-15);font-variant-numeric:tabular-nums; text-align:right} .health-filters{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0} .health-filters button{font-family:inherit;font-size:var(--t-s);padding:8px 10px; background:none;border:1px solid var(--line);border-radius:4px; color:var(--dim);cursor:pointer;min-height:36px} .health-filters button[aria-pressed=true]{background:var(--board); color:var(--fillink);border-color:var(--board)} .movement-note{font-size:var(--t-xs);color:var(--dim);margin-bottom:12px; line-height:1.6;max-width:88ch} .roster-list{display:grid;grid-template-columns:1fr 1fr;gap:3px} .roster-row{position:relative;display:grid;grid-template-columns:1fr auto; gap:9px 6px;background:var(--panel);padding:12px;align-items:start; font-size:var(--t-s);line-height:1.5} .roster-row .identity{min-width:0} .roster-row strong{font-size:var(--t-13);font-weight:600} .roster-row small{font-size:var(--t-xs);color:var(--dim);display:block} .projection-now{text-align:right} .projection-now b{font-size:var(--t-xl);letter-spacing:-.5px; font-variant-numeric:tabular-nums} .projection-now small{display:block;font-size:var(--t-xxs);color:var(--dim)} .roster-row .movement{grid-column:1/-1;border-top:1px solid var(--line); padding-top:7px;color:var(--dim)} .trend-top{display:flex;align-items:baseline;justify-content:space-between;gap:5px} .trend-top b{font-size:var(--t-15);font-variant-numeric:tabular-nums} .trend-top span{font-size:var(--t-xxs)} .trend-values{display:flex;justify-content:space-between;font-size:var(--t-xs); font-variant-numeric:tabular-nums;margin-top:6px} .trend-values span{text-align:center} .trend-values small{font-size:var(--t-micro);display:block;color:var(--dim2)} .reliability{font-size:var(--t-xxs);grid-column:1/-1;color:var(--dim); letter-spacing:.06em;text-transform:uppercase} .reliability.nailed{color:var(--pos)} .reliability.rotation,.reliability.blank{color:var(--warn)} .reliability.unavailable{color:var(--neg)} .roster-list.f-nailed .roster-row:not(.nailed), .roster-list.f-rotation .roster-row:not(.rotation), .roster-list.f-unavailable .roster-row:not(.unavailable), .roster-list.f-new .roster-row:not(.new){display:none} @media(max-width:900px){ .health-intro{flex-direction:column;align-items:flex-start;padding:18px} .attention{grid-template-columns:1fr} .roster-list{grid-template-columns:1fr} } /* ------------------------------------------------- classic: Your season */ /* classic-your-season.html: the season as a sentence, the weeks as bars you pick from, the week you picked, then the full record. */ .cseason .hero{background:var(--board);color:var(--fillink);padding:25px; display:flex;justify-content:space-between;gap:20px;margin:15px 0; align-items:flex-start} .cseason .hero .eyebrow{font-size:var(--t-xs);letter-spacing:1.4px; line-height:16.5px;text-transform:uppercase;color:var(--boardlabel); margin-bottom:9px;display:block} .cseason .hero h1{font-size:var(--t-32);line-height:1.1;margin:0; font-weight:700;letter-spacing:-1.4px} .cseason .hero p{margin-top:10px;font-size:var(--t-m);line-height:1.5} .cseason .hero-score{font-size:var(--t-44);font-weight:700;letter-spacing:-2px; white-space:nowrap;line-height:1.1;font-variant-numeric:tabular-nums} .cseason .hero-score small{display:block;font-size:var(--t-xs);letter-spacing:0; font-weight:400;line-height:1.5;margin-top:4px} .cseason .toolbar{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap;margin:20px 0 12px} .cseason .toolbar h2{font-size:var(--t-24);margin:0;font-weight:700; letter-spacing:-.6px;line-height:1.5} .cseason .toolbar .eyebrow{font-size:var(--t-xxs);letter-spacing:1.3px; text-transform:uppercase;color:var(--dim)} .cseason .season-chart{margin-top:28px} .cseason .week-bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr); gap:12px;padding:20px 10px 0;border-bottom:1px solid var(--line2)} .cseason .week-bars button{background:transparent;border:0;padding:0 8px; border-radius:0;color:var(--text);display:flex;flex-direction:column; align-items:center;justify-content:end;height:225px;position:relative; font-family:inherit;cursor:pointer} .cseason .week-bars button[aria-pressed=true]{background:var(--panel2)} .cseason .week-bars b{font-size:var(--t-28);font-variant-numeric:tabular-nums; font-weight:650} .cseason .week-bars i{display:block;background:var(--dovbar);width:70%; margin-top:8px;min-height:1px} .cseason .week-bars button[aria-pressed=true] i{background:var(--dataline)} .cseason .week-bars span{font-size:var(--t-s);padding:10px 0} .cseason .week-bars small{font-size:var(--t-xs);color:var(--dim);height:18px} .cseason .selected-week{display:grid;grid-template-columns:1fr 1fr;gap:20px; background:var(--panel);padding:22px;margin-top:16px} .cseason .selected-week .eyebrow{font-size:var(--t-xxs);letter-spacing:1.3px; text-transform:uppercase;color:var(--dim)} .cseason .selected-week .eyebrow.orange{color:var(--accent)} .cseason .selected-week h3{font-size:var(--t-23);margin:5px 0 8px;font-weight:650; letter-spacing:-.4px} .cseason .selected-week p{color:var(--dim);font-size:var(--t-s);margin:0} .cseason .week-detail{display:flex;gap:25px;align-items:center; justify-content:flex-end;flex-wrap:wrap} .cseason .week-detail b{display:block;font-size:var(--t-25); font-variant-numeric:tabular-nums;font-weight:650} .cseason .week-detail small{font-size:var(--t-xs);color:var(--dim)} .cseason .season-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px;margin:30px 0} .cseason .season-notes>div{background:var(--dovcard);padding:20px; border-top:1px solid var(--line2)} .cseason .season-notes .eyebrow{font-size:var(--t-xxs);letter-spacing:1.3px; text-transform:uppercase;color:var(--dim)} .cseason .season-notes b{display:block;font-size:var(--t-5xl);margin:12px 0; font-weight:650;letter-spacing:-1px;font-variant-numeric:tabular-nums} .cseason .season-notes b.chip-name{font-size:var(--t-24);margin:19px 0; letter-spacing:-.4px} .cseason .season-notes p{font-size:var(--t-s);color:var(--dim);line-height:1.5; margin:0} .cseason .sectionhead{border-top:1px solid var(--line);padding-top:16px; margin:28px 0 15px} .cseason .tablewrap{overflow-x:auto;max-height:none} .cseason table{border-collapse:collapse;width:100%;font-size:var(--t-s)} .cseason th,.cseason td{padding:13px 8px;border:0; border-bottom:1px solid var(--line);text-align:right;white-space:nowrap; background:none;font-size:var(--t-s);line-height:normal;text-transform:none; letter-spacing:0;font-variant-numeric:tabular-nums} .cseason th:first-child,.cseason td:first-child{text-align:left} .cseason th{color:var(--dim);font-weight:400} .cseason td small{display:block;color:var(--dim);font-size:var(--t-xxs)} .cseason tr.on td{background:var(--panel2)} .cseason .foot{font-size:var(--t-xs);color:var(--dim);line-height:1.6; margin-top:16px;max-width:88ch} /* ---------------------------------------------- classic: Differentials */ /* classic-differentials.html: the ones you hold, then the quieter names. */ .cdiff .hero{background:var(--board);color:var(--fillink);padding:25px; display:flex;justify-content:space-between;gap:20px;margin:15px 0; align-items:flex-start} .cdiff .hero .eyebrow{display:block;font-size:var(--t-xs);letter-spacing:1.4px; line-height:16.5px;text-transform:uppercase;color:var(--boardlabel); margin-bottom:9px} .cdiff .hero h1{font-size:var(--t-5xl);line-height:1.1;margin:0;font-weight:700; letter-spacing:-1.4px} .cdiff .hero p{margin-top:10px;font-size:var(--t-m);line-height:1.5} .cdiff .hero-score{font-size:var(--t-44);font-weight:700;letter-spacing:-2px; line-height:1.1;font-variant-numeric:tabular-nums;text-align:right} .cdiff .hero-score small{display:block;font-size:var(--t-xs);letter-spacing:0; font-weight:400;line-height:1.5;margin-top:4px} .cdiff .sectionhead{border-top:1px solid var(--line);padding-top:16px; margin:28px 0 14px} .cdiff .ownlist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px} .cdiff .owncard{background:var(--dovcard);padding:17px 12px; border-top:1px solid var(--line)} .cdiff .owncard strong{display:block;font-size:var(--t-15);font-weight:650; cursor:pointer} .cdiff .owncard small{font-size:var(--t-xs);color:var(--dim);display:block} .cdiff .owncard .points{font-size:var(--t-4xl);font-weight:700;color:var(--pos); margin-top:15px;font-variant-numeric:tabular-nums;line-height:1.1} .cdiff .owncard .bottom{margin-top:15px;padding-top:10px; border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--dim); line-height:1.6} .cdiff .lead{background:var(--panel);padding:22px;display:grid; grid-template-columns:1fr 1fr auto;align-items:center;gap:20px; border-left:3px solid var(--pos);margin-bottom:14px} .cdiff .lead .eyebrow{font-size:var(--t-xs);text-transform:uppercase; letter-spacing:1.4px;color:var(--dim);display:block} .cdiff .lead h2{margin:6px 0;font-size:var(--t-2xl);font-weight:700; letter-spacing:-.5px;cursor:pointer} .cdiff .lead small{display:block;font-size:var(--t-xs);color:var(--dim)} .cdiff .lead p{font-size:var(--t-m);line-height:1.6;margin:0} .cdiff .leadscore{font-size:var(--t-5xl);font-weight:700; font-variant-numeric:tabular-nums;letter-spacing:-1px;text-align:right} .cdiff .leadscore small{display:block;font-size:var(--t-xs);color:var(--dim); font-weight:400;letter-spacing:0} .cdiff .foot{font-size:var(--t-xs);color:var(--dim);line-height:1.6; margin:12px 0;max-width:88ch} @media(max-width:900px){ .cdiff .hero{flex-direction:column;padding:18px} .cdiff .ownlist{grid-template-columns:repeat(2,minmax(0,1fr))} .cdiff .lead{grid-template-columns:1fr auto;padding:15px;gap:10px} .cdiff .lead>p{grid-row:2;grid-column:1/-1} .cdiff .leadscore{font-size:var(--t-4xl)} } /* ------------------------------------------------------ classic: Radar */ /* classic-scouting-radar.html: where you stand against the field, and the two decisions that follow from it. */ .cradar .lead{background:var(--board);color:var(--fillink);padding:25px; display:flex;justify-content:space-between;gap:20px;margin:15px 0; align-items:flex-start} .cradar .label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:1.3px; color:var(--dim);display:block} .cradar .lead .label{color:var(--boardlabel)} .cradar .lead h1{font-size:var(--t-5xl);line-height:1.1;margin:12px 0; font-weight:700;letter-spacing:-1.4px} .cradar .lead p{margin:0;font-size:var(--t-m);line-height:1.5} .cradar .figure{font-size:var(--t-44);font-weight:700;letter-spacing:-2px; white-space:nowrap;line-height:1.1;font-variant-numeric:tabular-nums} .cradar .figure small{display:block;font-size:var(--t-xs);letter-spacing:0; font-weight:400;line-height:1.5;margin-top:4px} .cradar .decisions{display:grid;grid-template-columns:1fr 1fr;gap:3px} .cradar .decisions section{background:var(--panel);padding:20px} .cradar .decisions h2{font-size:var(--t-2xl);margin:8px 0 12px;font-weight:700; letter-spacing:-.5px} .cradar .decisions b{font-size:var(--t-32);font-weight:700;letter-spacing:-1px; font-variant-numeric:tabular-nums;display:block;color:var(--pos)} .cradar .decisions small{display:block;font-size:var(--t-xs);color:var(--dim); margin-top:3px} .cradar .decisions p{font-size:var(--t-s);color:var(--prose);line-height:1.6; margin:10px 0 0} .cradar .decisions p.warn{color:var(--accent)} .cradar .decisions .figs{display:flex;gap:24px;flex-wrap:wrap} .cradar .link{background:none;border:0;padding:10px 0 0;color:var(--accent); font-family:inherit;font-size:var(--t-s);cursor:pointer;min-height:36px; display:block} .cradar .sectionhead{border-top:1px solid var(--line);padding-top:16px; margin:28px 0 12px} .cradar .owncards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px} .cradar .owncards article,.cradar .diffcards article{background:var(--panel); padding:20px} .cradar .owncards h3,.cradar .diffcards h3{font-size:var(--t-2xl);margin:0; font-weight:650;letter-spacing:-.5px;cursor:pointer} .cradar .owncards b,.cradar .diffcards b{display:block;font-size:var(--t-32); font-weight:700;letter-spacing:-1px;margin:12px 0 0; font-variant-numeric:tabular-nums} .cradar .owncards small,.cradar .diffcards small{display:block; font-size:var(--t-xs);color:var(--dim);margin-top:3px} .cradar .owncards .figs{display:flex;gap:20px;margin-top:14px; border-top:1px solid var(--line);padding-top:12px} .cradar .owncards .figs b{font-size:var(--t-l);margin:2px 0 0;letter-spacing:0} .cradar .diffcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px} .cradar .foot{font-size:var(--t-xs);color:var(--dim);line-height:1.6; margin:10px 0;max-width:88ch} @media(max-width:900px){ .cradar .lead{flex-direction:column;padding:18px} .cradar .decisions,.cradar .owncards,.cradar .diffcards{ grid-template-columns:1fr} } /* -------------------------------------------------- classic: Standings */ /* classic-league-standings.html: the league you can win, then the world. */ .cstand .hero{background:var(--board);color:var(--fillink);padding:25px; display:flex;justify-content:space-between;gap:20px;margin:15px 0; align-items:flex-start} .cstand .hero .eyebrow{display:block;font-size:var(--t-xs);letter-spacing:1.4px; line-height:16.5px;text-transform:uppercase;color:var(--boardlabel); margin-bottom:9px} .cstand .hero h1{font-size:var(--t-5xl);line-height:1.1;margin:0;font-weight:700; letter-spacing:-1.4px} .cstand .hero p{margin-top:10px;font-size:var(--t-m);line-height:1.5} .cstand .hero-score{font-size:var(--t-44);font-weight:700;letter-spacing:-2px; white-space:nowrap;line-height:1.1;font-variant-numeric:tabular-nums} .cstand .hero-score small{display:block;font-size:var(--t-xs);letter-spacing:0; font-weight:400;line-height:1.5;margin-top:4px} .cstand .leaguepick{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0} .cstand .leaguepick button{font-family:inherit;font-size:var(--t-s); background:none;border:1px solid var(--line);border-radius:4px;padding:9px 13px; color:var(--dim);text-align:left;min-height:44px} .cstand .leaguepick button[aria-pressed=true]{border-color:var(--accent); color:var(--accent)} .cstand .leaguepick small{display:block;color:var(--dim);font-size:var(--t-xs); margin-top:2px} .cstand .pickhint{font-size:var(--t-s);color:var(--dim);margin:0 0 10px} .cstand .tablewrap{overflow-x:auto;max-height:none} .cstand table{width:100%;border-collapse:collapse;font-size:var(--t-s); font-variant-numeric:tabular-nums} .cstand th{font-size:var(--t-xs);color:var(--dim);text-align:right; padding:12px 8px;border:0;border-bottom:1px solid var(--line2);font-weight:400; background:none;text-transform:none;letter-spacing:0} .cstand td{padding:13px 8px;text-align:right;border:0; border-bottom:1px solid var(--line);background:none;font-size:var(--t-s); line-height:normal} .cstand th:first-child,.cstand td:first-child, .cstand th:nth-child(2),.cstand td:nth-child(2){text-align:left} .cstand td small{display:block;color:var(--dim);font-size:var(--t-xs)} .cstand tr.you td{background:var(--threatbg)} .cstand tr.you td:nth-child(2){color:var(--accent)} .cstand .sectionhead{border-top:1px solid var(--line);padding-top:16px; margin:28px 0 15px} .cstand .world{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px; background:var(--board);color:var(--fillink);margin-top:15px} .cstand .world .distance{font-size:var(--t-display);font-weight:700;line-height:1; letter-spacing:-3px;font-variant-numeric:tabular-nums} .cstand .world .distance small{display:block;font-size:var(--t-m);font-weight:400; line-height:1.5;letter-spacing:0;margin-top:10px} .cstand .world .comparison{align-self:center} .cstand .world .comparison header{display:flex;justify-content:space-between; gap:10px;font-size:var(--t-s);margin-bottom:6px} .cstand .world .comparison header b{font-size:var(--t-l); font-variant-numeric:tabular-nums} .cstand .world .points-track{height:6px;background:var(--dstrack); margin-bottom:16px} .cstand .world .points-track i{display:block;height:6px;background:var(--dsrail)} .cstand .ranks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px; margin-top:20px} .cstand .ranks>div{padding:20px;background:var(--panel); border-top:1px solid var(--line2)} .cstand .ranks .eyebrow{font-size:var(--t-xs);text-transform:uppercase; letter-spacing:1.3px;color:var(--dim);display:block} .cstand .ranks b{display:block;font-size:var(--t-24);margin:7px 0;font-weight:700; font-variant-numeric:tabular-nums} .cstand .ranks small{color:var(--dim);font-size:var(--t-xs)} .cstand .foot{font-size:var(--t-xs);color:var(--dim);line-height:1.6; margin-top:12px;max-width:88ch} @media(max-width:900px){ .cstand .hero{flex-direction:column;padding:18px} .cstand .world{grid-template-columns:1fr} .cstand .ranks{grid-template-columns:1fr 1fr} } /* --------------------------------------------- classic: The week ahead */ /* classic-week-ahead.html: the briefing as numbered sections, each with the numbers its sentence was written from set above it. */ .cweek .lead{background:var(--board);color:var(--fillink);padding:25px; margin:15px 0} .cweek .label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:1.3px; color:var(--dim);display:block} .cweek .lead .label{color:var(--boardlabel)} .cweek .lead h1{font-size:var(--t-5xl);line-height:1.1;margin:12px 0 0; font-weight:700;letter-spacing:-1.4px} .cweek .lead p{margin-top:10px;font-size:var(--t-m);line-height:1.5} .cweek .clock{border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:8px} .cweek .clock p{font-size:var(--t-m);color:var(--dim);margin:6px 0 0; line-height:1.6} .cweek .briefhead{border-top:1px solid var(--line);padding-top:16px; margin:28px 0 14px} .cweek .briefhead span{font-size:var(--t-xs);text-transform:uppercase; letter-spacing:1.3px;color:var(--dim)} .cweek .briefp{font-size:var(--t-m);line-height:1.7;max-width:78ch; margin:0 0 12px;color:var(--prose)} .cweek .swap{display:flex;align-items:center;gap:22px;flex-wrap:wrap; background:var(--panel);padding:18px;margin:0 0 14px} .cweek .swap>div{min-width:0} .cweek .swap b{display:block;font-size:var(--t-2xl);font-weight:700; letter-spacing:-.4px;line-height:1.25} .cweek .swap small{display:block;font-size:var(--t-xs);color:var(--dim); margin-top:3px} .cweek .swap small.warn{color:var(--accent)} .cweek .swap span{display:block;font-size:var(--t-2xl);font-weight:700; font-variant-numeric:tabular-nums;margin-top:4px} .cweek .swap i{font-style:normal;color:var(--dim);font-size:var(--t-xl)} .cweek .swap .gain{margin-left:auto;text-align:right} .cweek .swap .gain b{color:var(--pos);font-variant-numeric:tabular-nums} .cweek .tablewrap{overflow-x:auto;max-height:none} .cweek table{width:100%;border-collapse:collapse;font-size:var(--t-s)} .cweek th,.cweek td{padding:12px 8px;border:0;border-bottom:1px solid var(--line); text-align:right;background:none;font-size:var(--t-s);line-height:normal; text-transform:none;letter-spacing:0} .cweek th:first-child,.cweek td:first-child{text-align:left} .cweek th{color:var(--dim);font-weight:400} .cweek .foot{font-size:var(--t-xs);color:var(--dim);line-height:1.6; margin-top:16px;max-width:88ch} /* -------------------------------------------------- classic: Transfers */ /* classic-transfers.html: what the game did, then what you should do. */ .ctransfers .cmarket{margin-bottom:8px} .ctransfers .lead{background:var(--board);color:var(--fillink);padding:24px; margin:20px 0 0} .ctransfers .label{font-size:var(--t-xs);text-transform:uppercase; letter-spacing:1.3px;color:var(--dim);display:block} .ctransfers .lead .label{color:var(--boardlabel)} .ctransfers .lead h2{font-size:var(--t-32);line-height:1.1;margin:12px 0; letter-spacing:-1px;font-weight:700} .ctransfers .lead p{font-size:var(--t-m);margin:0} .ctransfers .mstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px;margin-top:2px} .ctransfers .mstats>div{background:var(--panel);padding:19px} .ctransfers .mstats b{display:block;font-size:var(--t-32);letter-spacing:-1px; font-weight:700;margin-top:8px;font-variant-numeric:tabular-nums} .ctransfers .mstats b.word{font-size:var(--t-2xl);letter-spacing:-.4px} .ctransfers .mcols{display:grid;grid-template-columns:1fr 1fr;gap:24px; margin-top:24px} .ctransfers .mcols h3{font-size:var(--t-2xl);margin:8px 0 12px;font-weight:650; letter-spacing:-.5px} .ctransfers .moverow{display:flex;justify-content:space-between;gap:12px; align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line); font-size:var(--t-s)} .ctransfers .moverow b{font-weight:650;font-size:var(--t-m)} .ctransfers .moverow small{display:block;color:var(--dim);font-size:var(--t-xs); margin-top:3px} .ctransfers .moverow span{font-variant-numeric:tabular-nums;color:var(--dim)} .ctransfers .sectionhead{border-top:1px solid var(--line);padding-top:16px; margin:28px 0 15px} .ctransfers .pausing{border-left:3px solid var(--accent);background:var(--notebg); padding:12px 16px;margin:16px 0} .ctransfers .pausing p{margin:8px 0 0;font-size:var(--t-m);line-height:1.6} .ctransfers .seg{margin:12px 0} .ctransfers .movelist{display:grid;gap:10px} .ctransfers .movecard{background:var(--panel);padding:18px} .ctransfers .movecard header b{font-weight:650;font-size:var(--t-l)} .ctransfers .movecard header small{display:block;color:var(--dim); font-size:var(--t-xs);margin-top:4px} .ctransfers .figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;margin-top:14px;border-top:1px solid var(--line);padding-top:12px} .ctransfers .figs b{display:block;font-size:var(--t-2xl);font-weight:700; font-variant-numeric:tabular-nums;letter-spacing:-.4px} .ctransfers .figs small{display:block;color:var(--dim);font-size:var(--t-xs); margin-top:3px} .ctransfers .afford{margin-top:12px;font-size:var(--t-xs);color:var(--pos)} .ctransfers .afford.short{color:var(--accent)} .ctransfers .foot{font-size:var(--t-xs);color:var(--dim);line-height:1.6; margin-top:10px;max-width:88ch} @media(max-width:900px){ .ctransfers .mstats,.ctransfers .mcols{grid-template-columns:1fr} .ctransfers .figs{grid-template-columns:1fr 1fr} } /* ------------------------------------------------ the pool's leading band */ /* classic-player-pool.html: what leads this list, before the table. */ .classic-lead{background:var(--board);color:var(--fillink);display:flex; justify-content:space-between;gap:22px;padding:24px;margin:20px 0 0; align-items:flex-start} .classic-lead .label{font-size:var(--t-xs);text-transform:uppercase; letter-spacing:1.3px;color:var(--boardlabel);display:block} .classic-lead h2{font-size:var(--t-32);line-height:1.1;margin:12px 0; letter-spacing:-1px;font-weight:700} .classic-lead p{font-size:var(--t-m);margin:0;line-height:1.5} .classic-lead>strong{font-size:var(--t-48);line-height:1.1;font-weight:700; white-space:nowrap;font-variant-numeric:tabular-nums} .classic-lead small{display:block;font-size:var(--t-xs);font-weight:400; margin-top:9px} .classic-lead .nn{cursor:pointer} .leaders{display:flex;gap:18px;flex-wrap:wrap;padding:17px 0; border-bottom:1px solid var(--line);margin-bottom:20px;font-size:var(--t-s)} .leaders>span{font-size:var(--t-xs);color:var(--dim);text-transform:uppercase; letter-spacing:1.3px} .leaders b{font-weight:650} .leaders em{font-style:normal;color:var(--pos);margin-left:5px; font-variant-numeric:tabular-nums} .leaders b:hover{color:var(--accent);cursor:pointer} @media(max-width:900px){ .classic-lead{flex-direction:column} } /* ----------------------------------------------------- classic: Budget */ /* classic-budget.html: three figures, then what every player would raise. */ .cbudget .heading{display:flex;justify-content:space-between;align-items:end; gap:16px;margin:8px 0 26px} .cbudget .heading h2{font-size:var(--t-5xl);margin:0;font-weight:700; letter-spacing:-1.4px;line-height:1.1} .cbudget .season{font-size:var(--t-s);color:var(--dim)} .cbudget .highlights{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2px; margin-bottom:26px} /* THE INK COMES WITH THE GROUND. This set the panel and left the colour to whatever won, and what won was `.highlight{background:var(--board);color:var(--boardink)}` in the Premier League standings block further down -- a bare class, scoped only by a comment. Budget overrode the mint ground and not the mint ink, so the second and third figures were board ink on a dark panel: 1.04:1 in Dark, which is not dim, it is gone. The first card keeps the mint board and its own ink on the line below. */ .cbudget .highlight{padding:19px;background:var(--panel);color:var(--text)} .cbudget .highlight:first-child{background:var(--board);color:var(--fillink)} .cbudget .highlight:first-child .label{color:var(--boardlabel)} .cbudget .highlight .label{font-size:var(--t-xs);text-transform:uppercase; letter-spacing:1.3px;color:var(--dim);display:block} .cbudget .highlight h2{font-size:var(--t-21);margin:8px 0 12px; letter-spacing:-.5px;font-weight:650} /* `color:inherit` so the figure takes its card's ink rather than `.highlight strong{color:var(--boardink)}` from the Premier League block. Inheriting also means the first card's figure follows its mint ground to --fillink without a second rule. */ .cbudget .highlight strong{color:inherit;font-size:var(--t-32);letter-spacing:-1px; font-weight:700;font-variant-numeric:tabular-nums;display:block;margin:8px 0 0} .cbudget .highlight small{font-size:var(--t-xs);color:var(--dim);display:block; margin-top:7px} .cbudget .highlight:first-child small{color:var(--boardlabel)} .cbudget .controls{display:flex;align-items:center;justify-content:space-between; gap:12px;margin-bottom:14px;flex-wrap:wrap} .cbudget .controls h3{font-size:var(--t-2xl);margin:0;font-weight:650; letter-spacing:-.5px} .cbudget .controls p{font-size:var(--t-xs);color:var(--dim);margin:0} .cbudget .overflow{overflow-x:auto} .cbudget table{width:100%;border-collapse:collapse;font-size:var(--t-s); font-variant-numeric:tabular-nums} .cbudget th{font-size:var(--t-xs);color:var(--dim);text-align:right; padding:12px 8px;border:0;border-bottom:1px solid var(--line2);font-weight:400; background:none;text-transform:none;letter-spacing:0} .cbudget td{padding:13px 8px;text-align:right;border:0; border-bottom:1px solid var(--line);background:none;font-size:var(--t-s); line-height:normal} .cbudget th:first-child,.cbudget td:first-child{text-align:left} .cbudget td.club{font-weight:650;font-size:var(--t-m)} .cbudget td.club small{display:block;color:var(--dim);font-size:var(--t-xs); font-weight:400} .cbudget .positive{color:var(--pos)} .cbudget .negative{color:var(--accent)} .cbudget .foot{font-size:var(--t-xs);color:var(--dim);line-height:1.6; margin-top:10px;max-width:88ch} @media(max-width:900px){ .cbudget .highlights{grid-template-columns:1fr} } /* ---------------------------------------------------- classic: Line up */ /* classic-lineup.html: the week's question, then the pitch and what the eleven is worth beside it. */ .clineup .hero{background:var(--board);color:var(--fillink);padding:25px; display:flex;justify-content:space-between;gap:20px;margin:15px 0; align-items:flex-start} .clineup .hero .eyebrow{display:block;font-size:var(--t-xs);letter-spacing:1.4px; line-height:16.5px;text-transform:uppercase;color:var(--boardlabel); margin-bottom:9px} .clineup .hero h1{font-size:var(--t-5xl);line-height:1.1;margin:0;font-weight:700; letter-spacing:-1.4px} .clineup .hero p{margin-top:10px;font-size:var(--t-m);line-height:1.5} .clineup .hero-score{font-size:var(--t-44);font-weight:700;letter-spacing:-2px; white-space:nowrap;line-height:1.1;font-variant-numeric:tabular-nums} .clineup .hero-score small{display:block;font-size:var(--t-xs);letter-spacing:0; font-weight:400;line-height:1.5;margin-top:4px} .clineup .note{font-size:var(--t-s);color:var(--dim);margin:0 0 12px; line-height:1.6;max-width:88ch} .clineup .board{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:20px; align-items:start} .clineup .side-section{padding:18px 0;border-top:1px solid var(--line)} .clineup .side-section:first-child{border:0;padding-top:0} .clineup .side-section .eyebrow{display:block;font-size:var(--t-xxs); letter-spacing:1.3px;text-transform:uppercase;color:var(--dim)} .clineup .side-section strong{font-size:var(--t-32);display:block;line-height:1.2; margin:9px 0;font-weight:700;font-variant-numeric:tabular-nums} .clineup .side-section p{font-size:var(--t-s);color:var(--dim);margin:8px 0; line-height:1.5} .clineup .side-section select{width:100%;padding:8px 3px;font-size:var(--t-s); margin:5px 0;background:var(--panel2);color:var(--text); border:1px solid var(--line2);border-radius:4px;font-family:inherit} .clineup .sidelab{display:block;font-size:var(--t-xs);color:var(--dim); margin-top:10px} .clineup .foot{font-size:var(--t-xs);color:var(--dim);line-height:1.6; margin-top:12px;max-width:88ch} @media(max-width:900px){ .clineup .hero{flex-direction:column;padding:18px} .clineup .board{grid-template-columns:1fr} .clineup .side{display:grid;grid-template-columns:1fr 1fr;gap:15px} .clineup .side-section{border-top:1px solid var(--line);padding-top:14px} } /* ----------------------------------------------------- classic: Rivals */ /* classic-rivals.html: ownership counted off published squads, not sampled. */ .crivals .hero{background:var(--board);color:var(--fillink);padding:25px; display:flex;justify-content:space-between;gap:20px;margin:15px 0; align-items:flex-start} .crivals .hero .eyebrow{display:block;font-size:var(--t-xs);letter-spacing:1.4px; line-height:16.5px;text-transform:uppercase;color:var(--boardlabel); margin-bottom:9px} .crivals .hero h1{font-size:var(--t-5xl);line-height:1.1;margin:0; font-weight:700;letter-spacing:-1.4px} .crivals .hero p{margin-top:10px;font-size:var(--t-m);line-height:1.5} .crivals .hero-score{font-size:var(--t-44);font-weight:700;letter-spacing:-2px; white-space:nowrap;line-height:1.1;font-variant-numeric:tabular-nums} .crivals .hero-score small{display:block;font-size:var(--t-xs);letter-spacing:0; font-weight:400;line-height:1.5;margin-top:4px} .crivals .notice{font-size:var(--t-s);color:var(--dim);margin:15px 0 25px; line-height:1.6} .crivals .sectionhead{border-top:1px solid var(--line);padding-top:16px; margin:28px 0 15px} .crivals .eo-bars{padding:20px 0 5px} .crivals .eo-row{display:grid;grid-template-columns:115px minmax(0,1fr) 50px; align-items:center;gap:12px;margin-bottom:15px;font-size:var(--t-s)} .crivals .eo-track{background:var(--panel2);height:8px;position:relative; display:block} .crivals .eo-track:after{content:'';position:absolute;left:83.333%;top:-3px; height:14px;border-left:1px solid var(--dim2)} .crivals .eo-track i{display:block;height:8px;background:var(--dovbig)} .crivals .eo-row:first-child i{background:var(--accent)} .crivals .eo-row b{text-align:right;font-variant-numeric:tabular-nums} .crivals .exposure{display:grid;grid-template-columns:1fr 1fr;gap:4px} .crivals .threat{background:var(--threatbg);padding:20px; border-top:2px solid var(--accent)} .crivals .threat h3{font-size:var(--t-25);margin:0;font-weight:650; letter-spacing:-.5px} .crivals .threat h3 small{font-size:var(--t-s);color:var(--dim);font-weight:400} .crivals .threat .eo{font-size:var(--t-5xl);color:var(--accent);font-weight:700; margin:10px 0;letter-spacing:-1px;font-variant-numeric:tabular-nums} .crivals .threat .eo small{font-size:var(--t-xs);font-weight:400;color:var(--dim)} .crivals .threat p{font-size:var(--t-s);color:var(--prose);margin:0} .crivals .threat footer{display:flex;gap:20px;flex-wrap:wrap; border-top:1px solid var(--line);margin-top:15px;padding-top:12px; font-size:var(--t-xs);color:var(--dim)} .crivals .threat footer b{color:var(--text);font-weight:650} .crivals .captain-filters{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0} .crivals .captain-filters button{font-family:inherit;font-size:var(--t-s); background:var(--panel2);border:1px solid var(--line2);padding:9px 13px; border-radius:4px;color:var(--text);min-height:36px} /* --onfill: the accent is a fill that flips between the themes. Third instance of this same swap -- see .skiplink. */ .crivals .captain-filters button.mine{background:var(--accent); color:var(--onfill);border-color:var(--accent)} .crivals .tablewrap{overflow-x:auto;max-height:none} .crivals table{width:100%;border-collapse:collapse;font-size:var(--t-s); font-variant-numeric:tabular-nums;min-width:480px} .crivals th{font-size:var(--t-xs);color:var(--dim);text-align:right; padding:12px 8px;border:0;border-bottom:1px solid var(--line2);font-weight:400; background:none;text-transform:none;letter-spacing:0} .crivals td{padding:13px 8px;text-align:right;border:0; border-bottom:1px solid var(--line);background:none;font-size:var(--t-s); line-height:normal} .crivals th:first-child,.crivals td:first-child{text-align:left} .crivals td small{color:var(--dim);font-size:var(--t-xs);display:block} .crivals tr.on td{background:var(--panel2)} .crivals .pname{cursor:pointer} .crivals .pname:hover{color:var(--accent)} .crivals .foot{font-size:var(--t-xs);color:var(--dim);line-height:1.6; margin:10px 0;max-width:88ch} @media(max-width:900px){ .crivals .hero{flex-direction:column;padding:18px} .crivals .hero-score{font-size:var(--t-40)} .crivals .exposure{grid-template-columns:1fr} .crivals .eo-row{grid-template-columns:95px minmax(0,1fr) 40px;gap:7px} } @media(max-width:900px){ .cseason .hero{flex-direction:column;padding:18px} .cseason .selected-week{grid-template-columns:1fr} .cseason .week-detail{justify-content:flex-start} .cseason .season-notes{grid-template-columns:1fr} .cseason .week-bars button{height:180px} } .dins .insight{display:grid;grid-template-columns:24px minmax(0,1.6fr) minmax(150px,1fr);gap:20px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start} .dins .index{color:var(--dim);font-size:var(--t-xs);line-height:1.5;padding-top:2px} .dins .eyebrow{font-size:var(--t-xxs);line-height:1.5;letter-spacing:1.3px;text-transform:uppercase} .dins .eyebrow.orange{color:var(--accent)} .dins .eyebrow.green{color:var(--pos)} .dins .eyebrow.muted{color:var(--dim)} .dins h3{font-size:var(--t-21);line-height:1.5;font-weight:700;letter-spacing:-.5px;margin:8px 0} .dins .insight p{color:var(--dim);font-size:var(--t-13);line-height:1.5;margin:8px 0} .dins small{color:var(--dim2);font-size:var(--t-xxs);line-height:1.5} .dins .evidence{padding:16px;background:var(--dovcard)} .dins .evidence strong{font-size:var(--t-40);line-height:1.5;font-weight:650;display:block;color:var(--accent)} .dins .evidence span{font-size:var(--t-xs);line-height:1.5;color:var(--dim);display:block} .dins .meter{height:7px;background:var(--line);margin-top:14px} .dins .meter i{height:100%;display:block;background:var(--dataline);transform-origin:left} .dins .venue b{display:block;font-size:var(--t-l);line-height:1.5;margin:4px 0 12px;font-weight:700} .dins .venue b:first-of-type{color:var(--pos)} .dins .two{display:flex;gap:20px;align-items:end;text-align:center} .dins .two>div{flex:1} .dins .two i{display:block;background:var(--dovbar);margin:8px 0} .dins .two b{font-size:var(--t-20);line-height:1.5;font-weight:700} .dins .insnote{font-size:var(--t-xs);color:var(--dim2);line-height:1.6;max-width:88ch;margin-top:16px} @media(max-width:640px){ .dins .insight{grid-template-columns:20px 1fr;gap:12px} .dins .evidence{grid-column:2} } /* ------------------------------------------- the press room, to the comp proposed-pages/gameweek-report.html at 1440 and the pilot at 390. The commissioner's edition on the board, the honours strip, the newsroom (paper 1.55fr / notebook 1fr, gap 24), the share panel, two folds. */ .pressroom{font-size:var(--t-m);line-height:1.5} .pressroom .label{display:block;font-size:var(--t-xs);line-height:16.5px;font-weight:400; letter-spacing:1.3px;text-transform:uppercase;color:var(--dim)} .pressroom .pending{font-size:var(--t-s);line-height:18px;padding:12px 0;margin:0 0 20px; border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--pendingink); background:none;border-radius:0} .commissioner{background:var(--board);color:var(--boardink);padding:23px;margin:0 0 18px} .commissioner .label{color:var(--boardlabel)} .commissioner h2{font-size:var(--t-29);line-height:1.5;letter-spacing:-1px;font-weight:700;margin:7px 0} .commissioner p{font-size:var(--t-13);line-height:1.5;margin:0} .publish-flow{display:flex;gap:20px;font-size:var(--t-s);line-height:18px; border-top:1px solid var(--boardrule);margin-top:18px;padding-top:12px} .publish-flow span{display:block} .publish-flow .stage{font-weight:700} /* League business reads as league business, not as football. */ .newsroom .report .article p.notice{color:var(--resultline)} .honours{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:23px 0} .honours section{background:var(--honour);padding:18px;border-top:3px solid var(--posrule)} .honours section.hon-bench{background:var(--honourbench);border-color:var(--pillfillline)} .honours section.hon-season{border-color:var(--paperline)} .honours h3{font-size:var(--t-xl);line-height:1.5;font-weight:700;margin:10px 0} .honours strong{font-size:var(--t-4xl);line-height:1.5;font-weight:700;color:var(--pos)} .honours section.hon-bench strong{color:var(--accent)} .honours strong small{font-size:var(--t-xs);line-height:16.5px;color:var(--dim);font-weight:400} .honours p{font-size:var(--t-s);line-height:18px;color:var(--honourprose);margin:10px 0 0} .newsroom{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(230px,1fr);gap:24px} .newsroom .panel.report{border-top:4px solid var(--paperline);border-radius:0;padding:18px 0 0; background:none;border-left:0;border-right:0;border-bottom:0;margin:0} .newsroom .report .rhead{font-size:var(--t-40);line-height:1.06;letter-spacing:-1.5px;font-weight:700;margin:14px 0} .newsroom .report .rstand{font-size:var(--t-18);line-height:1.5;margin:0;padding:0;color:var(--deck)} .newsroom .report .byline{display:flex;align-items:center;gap:12px;margin:22px 0;padding-bottom:18px; border-bottom:1px solid var(--line);font-size:var(--t-s);line-height:18px;letter-spacing:0} .newsroom .report .regmug{width:56px;height:56px;border:0} .newsroom .report .byline b{font-size:var(--t-s);line-height:18px;font-weight:700} .newsroom .report .byline span{display:block;font-size:var(--t-xxs);line-height:15px;color:var(--dim)} .newsroom .report .article p{font-size:var(--t-15);line-height:27px;margin:16px 0;color:var(--text);max-width:none} .newsroom .report .article p.lead{font-size:var(--t-15);line-height:27px;margin:18px 0;font-weight:400;color:var(--resultline)} .newsroom .report .article p.opener{color:var(--text)} .newsroom .report .article p.signoff{font-style:italic;color:var(--text);margin-top:16px} .newsroom .report .disclaimer{font-size:var(--t-xs);line-height:16.5px;color:var(--dim);margin:12px 0;max-width:none} .newsroom .report .filing{font-size:var(--t-xs);line-height:16.5px;color:var(--dim);margin:12px 0} .pressroom .actions{display:flex;flex-wrap:wrap;gap:7px;margin:0} .pressroom .actions .btn,.pressroom .actions .btn:first-child{font-size:var(--t-s);line-height:18px;padding:10px 14px;margin:12px 0 0; border:1px solid var(--line2);border-radius:999px;background:none;color:var(--text);font-weight:400} .pressroom .actions .btn.pri,.source-desk .btn.pri,.share-panel .btn.pri{background:var(--pillfill); color:var(--pillfillink);border:1px solid var(--pillfillline);font-weight:650; font-size:var(--t-s);line-height:18px;padding:10px 14px;border-radius:999px} .source-desk{background:var(--board);color:var(--boardink);padding:20px;margin:0;border:0;border-radius:0;align-self:start} .source-desk .label{color:var(--boardlabel)} .source-desk h2{font-size:var(--t-25);line-height:1.1;letter-spacing:-.7px;font-weight:700;margin:0 0 10px} .source-desk p{font-size:var(--t-s);line-height:1.6;margin:10px 0;color:var(--boardink)} .source-desk label{display:block;font-size:var(--t-s);line-height:18px;margin:14px 0 5px;color:var(--boardink)} .source-desk textarea{display:block;width:100%;max-width:100%;height:120px;padding:10px;font:inherit; font-size:var(--t-m);background:var(--deskfield);color:var(--boardink);border:1px solid var(--deskline);border-radius:2px} .source-desk .btn.pri{display:block;width:100%;margin:12px 0 0} .source-desk .briefread{margin-top:12px;font-size:var(--t-s);line-height:18px} .source-desk .briefread div{display:flex;gap:8px;align-items:baseline;margin-top:6px} .share-panel{margin:25px 0;padding:20px;border:1px solid var(--line2)} .share-preview{background:var(--board);color:var(--boardink);padding:25px;margin:14px 0;max-width:530px} .share-preview small,.share-preview footer{display:block;font-size:var(--t-xs);line-height:16.5px} .share-preview h2{font-size:var(--t-37);line-height:1.05;letter-spacing:-1px;font-weight:700;margin:20px 0} .share-preview p{font-size:var(--t-m);line-height:1.5;margin:0} .share-preview footer{margin-top:22px;border-top:1px solid var(--boardrule);padding-top:12px} .share-panel>p{font-size:var(--t-m);line-height:1.5;margin:0 0 12px} .pressroom details.rsec{border:0;border-top:1px solid var(--line);border-radius:0;margin:18px 0 0; padding:15px 0;font-size:var(--t-s);line-height:18px;color:var(--dim)} .pressroom details.rsec>summary{padding:12px 0;font-size:var(--t-s);line-height:18px;color:var(--dim)} .pressroom details.rsec>summary::before{content:none} .pressroom details.rsec[open]>summary{border-bottom:0} .pressroom details.rsec>*:not(summary){margin:12px 0 0} .pressroom details.rsec>p{padding:9px 0 10px;margin:12px 0 0} .pressroom details.rsec>p.on{color:var(--text)} .pressroom .editpanel{margin-top:12px} .pressroom .editpanel .muted{font-size:var(--t-s);margin-bottom:8px} .pressroom #reportbody{width:100%;min-height:320px;background:var(--panel2);border:1px solid var(--line2); border-radius:var(--r);padding:11px;color:var(--text);font-variant-numeric:tabular-nums;font-size:var(--t-s);line-height:1.65} @media(max-width:640px){ .honours{grid-template-columns:1fr} .newsroom{grid-template-columns:1fr} .source-desk{grid-row:1} .newsroom .report .rhead{font-size:var(--t-34)} } /* ------------------------------------------------------------ gw archive */ .approved{margin-bottom:12px;padding:10px 13px;border-radius:var(--r); border:1px solid var(--posline);background:var(--posdim);font-size:var(--t-s); line-height:1.6;color:var(--dim);max-width:90ch} .approved .pill{margin-right:7px} .arclist{display:flex;flex-direction:column;gap:8px} .arc{border:1px solid var(--line);border-radius:var(--r);background:var(--panel); padding:11px 13px} .arc.on{border-color:var(--accent)} .arch{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; align-items:baseline;margin-bottom:6px} .arc summary{font-size:var(--t-xs);cursor:pointer} .arcbody{margin-top:9px;padding:11px;background:var(--panel2); border:1px solid var(--line);border-radius:var(--r);font-variant-numeric:tabular-nums; font-size:var(--t-s);line-height:1.7;white-space:pre-wrap;color:var(--dim); max-height:420px;overflow:auto} /* ------------------------------------------------------------------ radar */ /* One card at a time. A scrolling stack always shows half of the next card, which is exactly the thing you are not reading. */ /* The radar card, from the comp. */ .hero.claim{border:0;background:none;border-radius:0} .radar-lead{background:var(--board);color:var(--boardink);padding:22px} .radar-lead .label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.12em; color:var(--boardink);opacity:.75;display:flex;justify-content:space-between;gap:10px} .radar-lead .rcount{font-variant-numeric:tabular-nums;letter-spacing:.06em;text-transform:none} .move-title{display:grid;grid-template-columns:1fr 30px 1fr;gap:15px;align-items:center; margin:18px 0} .move-title h2{margin:0;font-size:var(--t-4xl);letter-spacing:-.03em;line-height:1.1; cursor:pointer} .move-title h2:hover{color:var(--accent)} .move-title small{font-size:var(--t-xs);display:block;margin-bottom:2px} .move-title .arrow{text-align:center;font-size:var(--t-xl);opacity:.7} .lead-bottom{border-top:1px solid color-mix(in srgb,var(--boardink) 35%,transparent); display:flex;justify-content:space-between;gap:10px;padding-top:12px;font-size:var(--t-xs)} .radar-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:20px 0; border-bottom:1px solid var(--line)} .radar-metrics strong{display:block;font-size:var(--t-3xl);letter-spacing:-.02em; font-variant-numeric:tabular-nums;color:var(--pos)} .radar-metrics strong.neg{color:var(--neg)} .radar-metrics .land strong{color:var(--accent)} .radar-metrics span{font-size:var(--t-xs);color:var(--dim)} .case-grid{margin:23px 0} .case-grid h3,.case-grid h4{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase; margin-bottom:8px} .case-grid .p h3,.case-grid .p h4{color:var(--pos)} .case-grid .n h3,.case-grid .n h4{color:var(--warn)} .reality{background:var(--panel2);padding:15px 18px;border-left:3px solid var(--accent)} .reality b{color:var(--text)} .reality p{font-size:var(--t-s);color:var(--prose);margin:5px 0 0} .hero .note{color:var(--dim);font-size:var(--t-xs);margin-top:14px} .rdetails{font-size:var(--t-s);color:var(--dim);margin-top:8px} .rdetails summary{cursor:pointer;padding:12px 0} .rdetails p{padding:4px 0 9px;max-width:70ch} .ractions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .ractions .btn:first-child{border-color:var(--accent);color:var(--accent)} @media(max-width:640px){ .radar-metrics{grid-template-columns:1fr 1fr} .move-title{grid-template-columns:1fr;gap:6px} .move-title .arrow{text-align:left} .move-title h2{font-size:var(--t-3xl)} } .radar{display:flex;gap:10px;align-items:flex-start;margin-bottom:20px} .rstage{flex:1;min-width:0} .rstage .hero{margin-bottom:0} .rstage.in{animation:cardin .18s ease-out} @keyframes cardin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.rstage.in{animation:none}} /* Centring the controls against the card meant they moved every time a card of a different height swapped in -- 246px of travel between the shortest and tallest. They are pinned to the top of the row instead, so their position depends on the block and not on its contents, and made sticky so they stay reachable while a long card is being read. */ .rnav{display:flex;flex-direction:column;align-items:center;gap:8px; justify-content:flex-start;flex:none;padding:4px 0;align-self:flex-start; position:sticky;top:84px;z-index:5} .rbtn{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2); background:var(--panel);color:var(--dim2);font-size:var(--t-s);cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0} .rbtn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} .rbtn:disabled{opacity:.3;cursor:default} .rdots{display:flex;flex-direction:column;gap:6px} .rdot{width:7px;height:7px;border-radius:50%;padding:0;border:none; background:var(--line2);cursor:pointer;transition:background .15s,transform .15s} .rdot:hover{background:var(--dim2)} .rdot.on{background:var(--accent);transform:scale(1.35)} @media(max-width:900px){ .radar{flex-direction:column} .rnav{flex-direction:row;justify-content:center;align-self:stretch; position:static} .rdots{flex-direction:row} } /* --------------------------------------------------------- match briefing */ .bfside{min-width:0} .bfh{font-size:var(--t-s);margin-bottom:8px} .bfsec{margin-bottom:11px} .bfl{font-size:var(--t-xxs);letter-spacing:.12em;text-transform:uppercase; color:var(--dim2);margin-bottom:5px} .bfl .dim2{letter-spacing:0;text-transform:none;font-size:var(--t-xxs);margin-left:5px} .bfl2{list-style:none;display:flex;flex-direction:column;gap:5px; font-size:var(--t-s);line-height:1.5} .bfl2 li{color:var(--dim)} .bfl2 li b{color:var(--text)} .bfl2 li[data-pid]{cursor:pointer;padding:3px 5px;border-radius:3px; margin:0 -5px} .bfl2 li[data-pid]:hover{background:var(--panel2)} .bfl2 li.you{background:var(--posdim)} .bfl2 li.opp{background:var(--negdim)} .bfl2 a{color:var(--text)} .bfl2 a:hover{color:var(--accent)} .bfn{font-size:var(--t-xs);color:var(--dim2);margin-top:2px} .bfout{font-size:var(--t-xs);color:var(--dim);line-height:1.6} .bfout b{color:var(--dim2);font-size:var(--t-xxs);letter-spacing:.1em; text-transform:uppercase;margin-right:4px} .bfout span[data-pid]{cursor:pointer;border-radius:3px;padding:0 3px} .bfout span.you{background:var(--posdim)} .bfout span.opp{background:var(--negdim)} /* ---------------------------------------------------------- report direction */ .dirout{margin-top:12px;padding:11px 13px;border-radius:var(--r); border:1px solid var(--line2);background:var(--panel2)} .dirsum{font-size:var(--t-s);line-height:1.6;color:var(--text);max-width:86ch} .dirchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px} .dirig{font-size:var(--t-xs);color:var(--dim);margin-top:9px;line-height:1.6; max-width:86ch} .dirig code{font-variant-numeric:tabular-nums;font-size:var(--t-xs);color:var(--warn); background:var(--warndim);padding:1px 5px;border-radius:3px;margin-right:2px} .teamrow.misfiled{border-left:2px solid var(--warn);padding-left:9px} .misnote{font-size:var(--t-xs);color:var(--warn);line-height:1.55;margin-top:4px; max-width:80ch} .misnote .lnk{margin-left:4px} /* The fixture story: this week's decision, then the three after it. Kept apart because a player can be a clear hold now and a clear sell in three. */ .wstory{margin-top:8px;padding:8px 10px;border-radius:var(--r); background:var(--panel2);border:1px solid var(--line);font-size:var(--t-s); line-height:1.6;color:var(--dim)} /* ------------------------------------------------------ positional scarcity */ .scard{display:flex;flex-direction:column} .sclist{margin-top:8px;display:flex;flex-direction:column;gap:1px} .scrow{display:flex;align-items:baseline;gap:8px;padding:4px 6px;margin:0 -6px; border-radius:3px;font-size:var(--t-s);cursor:pointer} .scrow[data-pid]:hover{background:var(--panel2)} .scrow .scl{font-size:var(--t-xxs);letter-spacing:.1em;text-transform:uppercase; color:var(--dim2);flex:none;width:88px} .scrow .scn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .scrow .scr{font-size:var(--t-xxs);letter-spacing:.08em;flex:none} .scrow .scv{font-size:var(--t-s);flex:none} .scrow.pos .scv{color:var(--pos)} .scrow.neg .scv{color:var(--neg)} .scmore{margin-top:9px} .scmore summary{font-size:var(--t-xs);cursor:pointer} /* ------------------------------------------------------- stale app notice */ #stalebar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%); z-index:60;display:flex;align-items:center;gap:14px;max-width:min(680px,92vw); padding:11px 14px;border-radius:var(--r);background:var(--panel); border:1px solid var(--accent);box-shadow:0 10px 30px -12px var(--shadow); font-size:var(--t-s);color:var(--text);line-height:1.5} #stalebar .btn{flex:none} /* A live row leads to the match; the small i leads to the player. */ .lrow.hasmatch{cursor:pointer} .lrow .lpi{position:static;margin-left:6px;width:17px;height:17px; display:inline-flex;vertical-align:middle} @media(prefers-reduced-motion:reduce){.livedot{animation:none}} /* ---------------------------------------------------------- info popover */ .infowrap{position:relative;display:inline-flex;align-items:center; letter-spacing:0;text-transform:none} .infodot{width:15px;height:15px;border-radius:50%;border:1px solid var(--line2); background:var(--panel2);color:var(--dim2);font-size:var(--t-xxs);line-height:1; font-variant-numeric:tabular-nums;cursor:pointer;display:flex;align-items:center; justify-content:center;padding:0;flex:none} .infodot:hover{color:var(--accent);border-color:var(--accent)} .infopop{position:absolute;top:22px;left:-4px;z-index:40;width:min(340px,80vw); padding:11px 13px;border-radius:var(--r);background:var(--panel); border:1px solid var(--line2);box-shadow:0 12px 30px -14px var(--shadow); font-size:var(--t-xs);line-height:1.6;color:var(--dim); text-transform:none;letter-spacing:0;font-weight:400;text-align:left} .infopop.flip{left:auto;right:-4px} .infopop[hidden]{display:none} .infopop b{display:block;color:var(--text);font-size:var(--t-s);margin-bottom:6px} .infopop p{margin:0 0 6px} .infopop p:last-child{margin-bottom:0} /* Matchday carries a live dot rather than a bullet glyph, so it reads as "matches are on right now" instead of as a decoration. */ .nav .tag.livetag{background:none;border:none;padding:0;display:flex; align-items:center} .nav .tag.livetag .livedot{margin:0} .bpsgap{margin-left:8px;font-size:var(--t-xxs);letter-spacing:.04em; text-transform:none;color:var(--dim2)} .bpsgap.tight{color:var(--warn)} /* ------------------------------------------------------------ substitutions */ .subchip{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px; border:1px solid var(--line2);border-radius:99px;font-size:var(--t-s); background:var(--panel2);cursor:pointer} .subchip:hover{border-color:var(--accent)} .subchip.you{border-color:var(--accent);background:var(--accentdim)} .subchip.opp{border-color:var(--negline);background:var(--negdim)} .subchip i{font-style:normal;font-size:var(--t-xs)} .subchip i.on{color:var(--pos)} .subchip i.off{color:var(--dim2)} .subchip b{font-variant-numeric:tabular-nums;font-size:var(--t-xxs);color:var(--dim2); font-weight:400} /* Hollow green: he has played his minutes and the match has reached 90, but the final whistle has not been recorded. Solid and pulsing means one thing only — on the pitch right now. */ .donedot{display:inline-block;width:6px;height:6px;border-radius:50%; background:none;border:1px solid var(--pos);margin-left:5px} /* Home / away pair. The two halves get equal fixed columns so the slash lands at the same offset on every row — right-aligning the cell as a whole left "7/8" and "7/12" with their slashes in different places, which is exactly the column you want to read down. */ .hapair{display:inline-grid;grid-template-columns:1.7em auto 1.7em; align-items:baseline} .hah{text-align:right} .haa{text-align:left} .haslash{color:var(--line2);padding:0 1px} /* ------------------------------------------------------------- match pins */ .mhead{position:relative} .mpin{position:absolute;top:0;right:0;width:24px;height:24px;border:none; background:none;color:var(--line2);font-size:var(--t-m);cursor:pointer;padding:0; line-height:1} .mpin:hover{color:var(--dim)} .mpin.on{color:var(--accent)} .mcard.pinned{border-color:var(--accent)} .mmore{margin-top:10px;width:100%;padding:6px;border:1px solid var(--line); border-radius:var(--r);background:var(--panel2);color:var(--dim2); font-size:var(--t-xs);cursor:pointer} .mmore:hover{color:var(--accent);border-color:var(--line2)} .subnote{font-size:var(--t-xs);color:var(--dim);line-height:1.55;margin-top:8px; max-width:82ch} .subnote b{color:var(--text)} /* Highlights search links. */ .hlink{display:inline-flex;align-items:center;gap:4px;padding:3px 11px; border:1px solid var(--line2);border-radius:99px;font-size:var(--t-s); background:var(--panel2);color:var(--dim)} .hlink:hover{color:var(--accent);border-color:var(--accent)} /* --------------------------------------------------- substitution pairings */ .subpairs{display:flex;flex-direction:column;gap:2px;margin-top:2px} .subpair{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; padding:4px 6px;margin:0 -6px;border-radius:3px;font-size:var(--t-s)} .subpair:hover{background:var(--panel2)} .subpair.loose{border-left:2px solid var(--line2);padding-left:8px} .submin{font-size:var(--t-xs);color:var(--dim2);width:30px;flex:none;text-align:right} .subclub{font-size:var(--t-xxs);letter-spacing:.08em;width:30px;flex:none} .subon{color:var(--pos)} .suboff{color:var(--dim)} .subfor{font-size:var(--t-xs)} .subname{cursor:pointer;color:var(--text);border-radius:3px;padding:0 3px} .subname:hover{color:var(--accent)} .subname.you{background:var(--posdim)} .subname.opp{background:var(--negdim)} .subq{font-size:var(--t-xxs);letter-spacing:.06em;text-transform:uppercase; color:var(--warn);cursor:help} .subloose{font-size:var(--t-s);margin-top:6px;display:flex;gap:6px;flex-wrap:wrap; align-items:baseline} /* Highlights sit with the result, not at the bottom of the card. */ .mhl{position:absolute;top:0;left:0;display:flex;gap:6px} .hlink.sm{padding:2px 8px;font-size:var(--t-xs)} /* A manager's live side on his own card. */ .tlrow{display:flex;align-items:baseline;gap:9px;padding:3px 5px;margin:0 -5px; border-radius:3px;font-size:var(--t-s);cursor:pointer} .tlrow:hover{background:var(--panel2)} .tlp{width:22px;text-align:right;flex:none;font-size:var(--t-s)} .tln{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tls{font-size:var(--t-xs);flex:none} /* Find-replacements button, on the card of the player who needs one. */ .repl{margin-top:7px;width:100%;padding:5px 8px;border-radius:var(--r); border:1px solid var(--line2);background:var(--panel);color:var(--dim); font-size:var(--t-xs);cursor:pointer} .repl:hover{color:var(--accent);border-color:var(--accent)} .repl.big{padding:7px 8px;font-size:var(--t-s);background:var(--accentdim); border-color:var(--accentline);color:var(--accent)} .repl.big:hover{background:var(--repl-hover)} .card .ord.warn{color:var(--warn)} .watchcard2 .wh{display:flex;justify-content:space-between;align-items:baseline; gap:10px;flex-wrap:wrap} .watchcard2 .nn{cursor:pointer} .watchcard2 .nn:hover{color:var(--accent)} .watchcard2 .wr{font-size:var(--t-s);color:var(--dim);line-height:1.55;margin-top:6px} .watchcard2 .wmeta{display:flex;gap:12px;flex-wrap:wrap;font-variant-numeric:tabular-nums; font-size:var(--t-xs);color:var(--dim2);margin-top:8px} /* Banner while the pool is scoped to replacing one specific player. */ .replbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap; margin-bottom:12px;padding:9px 13px;border-radius:var(--r); border:1px solid var(--accent);background:var(--accentdim); font-size:var(--t-s);line-height:1.55} .replbar b{color:var(--text)} .replbar .btn{flex:none} /* Paste-the-team-sheet box. */ .sheetin{width:100%;min-height:120px;margin-top:8px;background:var(--panel2); border:1px solid var(--line2);border-radius:var(--r);padding:9px 11px; color:var(--text);font-variant-numeric:tabular-nums;font-size:var(--t-s);line-height:1.6; outline:none;resize:vertical} .sheetin:focus{border-color:var(--accent)} .sheetlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} /* ------------------------------------------------------ team news layout */ .hlnews .wh{display:flex;justify-content:space-between;align-items:baseline; gap:10px;flex-wrap:wrap} .hlnews .nn{cursor:pointer} .hlnews .nn:hover{color:var(--accent)} .hlnews .wr{font-size:var(--t-s);line-height:1.55;margin-top:7px} .hlnews .wr a{color:var(--text)} .hlnews .wr a:hover{color:var(--accent)} .hlnews .wmeta{display:flex;gap:12px;flex-wrap:wrap;font-variant-numeric:tabular-nums; font-size:var(--t-xs);color:var(--dim2);margin-top:9px} .hlnews.flagged{border-color:var(--negline)} .pnews{border-bottom:1px solid var(--line)} .pnews:last-of-type{border-bottom:none} .pnews > summary{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; padding:8px 4px;cursor:pointer;font-size:var(--t-s);list-style:none} .pnews > summary::-webkit-details-marker{display:none} .pnews > summary::before{content:'▸';color:var(--dim2);font-size:var(--t-xxs); margin-right:2px} .pnews[open] > summary::before{content:'▾'} .pnews > summary:hover{background:var(--panel2)} .pnews.flagged > summary{border-left:2px solid var(--neg);padding-left:8px} .pn-name{font-weight:500} .pn-name:hover{color:var(--accent)} .pnews-body{padding:2px 6px 12px 20px} .pnews-body .wr{font-size:var(--t-s);color:var(--dim);line-height:1.55; margin-bottom:8px} /* ------------------------------------------------------ league scoreboard */ .sbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px;margin-bottom:14px} .sbtie{display:flex;flex-direction:column;gap:2px;padding:9px 11px; border:1px solid var(--line);border-radius:var(--r);background:var(--panel); cursor:pointer;text-align:left;font:inherit} .sbtie:hover{border-color:var(--line2)} .sbtie.on{border-color:var(--accent);background:var(--accentdim)} .sbtie.mine .sbn{color:var(--text)} .sbrow{display:flex;justify-content:space-between;gap:8px;align-items:baseline; font-size:var(--t-s)} .sbn{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sbrow b{font-variant-numeric:tabular-nums;font-size:var(--t-m);color:var(--dim);flex:none} .sbrow b.pos{color:var(--pos)} .sbmeta{font-size:var(--t-xxs);color:var(--dim2);margin-top:3px} /* Basis toggle on the planner: three sources for one eleven. */ /* A second, unrelated component that also happens to be a row of buttons. It was written as a bare `.seg` nine hundred lines below the first one and silently overrode its display, border colour and margin for EVERY strip in the app -- two rules for one name, merged by the cascade rather than by anyone's decision, and neither author aware of the other. Scoped rather than renamed. Its buttons already carry their own class, so :has() says exactly what the selector always meant: this rule is for the strips built out of .segbtn. Renaming the container instead would have meant finding every one of them, and half are assembled through a variable where a search cannot see the pairing. */ .seg:has(.segbtn){display:inline-flex;gap:0;border:1px solid var(--line); border-radius:7px;overflow:hidden;margin-left:10px;vertical-align:middle} .segbtn{background:transparent;border:0;color:var(--dim);font:inherit; font-size:var(--t-xs);letter-spacing:.04em;padding:4px 10px;cursor:pointer} .segbtn+.segbtn{border-left:1px solid var(--line)} .segbtn:hover{color:var(--fg);background:var(--rise)} .segbtn.on{background:var(--rise);color:var(--fg)} /* A reference eleven is read-only, so it must not look clickable. */ .pcard.ref{cursor:default} .pcard.ref:hover{border-color:var(--line)} .tbl.mini tr.hi td{background:var(--rise)} /* ------------------------------------------------- league ties */ /* Built to league-fixtures.html and league-results.html (15 Sep 2026 handoff). The rows were bordered cards in a 5-column grid with the gameweek repeated on every one; the comps are a ruled list, the gameweek said once in a round heading, and the tie reading left name / middle / right name so the two sides sit either side of the result. */ /* The pages inside a league scope. A row of tabs on the page, because the menu is two levels deep and these would be a third. */ /* The scouting boards' shared position filter, and the bookings cell. */ .posbar{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 14px} .posbar button{background:var(--panel);border:1px solid var(--line); color:var(--dim);font:inherit;font-size:var(--t-s);font-weight:550; padding:6px 12px;border-radius:var(--r);cursor:pointer} .posbar button:hover{color:var(--text);border-color:var(--line2)} .posbar button[aria-pressed=true]{background:var(--pillfill); border-color:var(--pillfill);color:var(--pillfillink)} /* The count is --dim2 everywhere else in the row, and --dim2 on the lit pill's fill is 1.51:1 -- the one number in the row that says how many you are looking at, and it could not be read. */ .posbar button[aria-pressed=true] .dim2{color:inherit} .posbar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} td.cards{white-space:nowrap;font-variant-numeric:tabular-nums} /* Same correction as .skiplink, same reason: --warn and --neg are bright in Dark and dark in Light, so the ink on them has to flip. A yellow-card count read 2.29:1 in Light -- dark ink on dark olive -- and the red card 2.37:1. */ td.cards .cy,td.cards .cr{display:inline-block;min-width:15px;padding:1px 4px; border-radius:2px;font-size:var(--t-xxs);font-weight:650;margin-left:3px; color:var(--onfill)} td.cards .cy{background:var(--warn)} td.cards .cr{background:var(--neg)} .lgtabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 18px; border-bottom:1px solid var(--line);padding-bottom:0} .lgtabs button{background:none;border:0;border-bottom:2px solid transparent; color:var(--dim);font:inherit;font-size:var(--t-s);font-weight:550; padding:9px 12px;cursor:pointer} .lgtabs button:hover{color:var(--text)} .lgtabs button.on{color:var(--text);border-bottom-color:var(--accent)} .lgtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .ltoolbar{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap; padding:0 0 20px;color:var(--dim);font-size:var(--t-s)} .ltoolbar label{display:flex;align-items:center;gap:7px;cursor:pointer} .ltoolbar input{accent-color:var(--accent)} .lwksel{font:inherit;font-size:var(--t-s);background:var(--card); border:1px solid var(--line);color:var(--text);border-radius:4px; padding:7px 10px;margin-left:7px} .roundt{display:flex;justify-content:space-between;align-items:baseline; padding:16px 0 12px;border-top:1px solid var(--line2);margin-top:15px} .roundt h2{font-size:var(--t-xl);letter-spacing:-.5px;margin:0} .roundt span{font-size:var(--t-xs);color:var(--dim)} .tie{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr); gap:18px;align-items:center;padding:21px 14px;cursor:pointer; border-bottom:1px solid var(--tierule)} /* A round with a score in it needs room for two numbers; one with nothing but a "v" does not, and 106px of air between two names is a gap the eye has to jump. The width follows the round, never the individual row, or the names in one list stop lining up with each other. */ .rnd.scored .tie{grid-template-columns:minmax(0,1fr) 106px minmax(0,1fr)} .tres .tie{padding:18px 14px} .tie:hover{background:var(--panel)} .tie.mine{background:var(--tieown);box-shadow:inset 3px 0 var(--accent)} .tie .tt{font-size:var(--t-m);font-weight:500;overflow-wrap:anywhere} .tie .tt small{font-size:var(--t-xxs);color:var(--accent);margin-left:6px; font-weight:400} .tie .ta{text-align:right} /* THE SCORE IS A PAIR OF FILLED BLOCKS, NOT A LINE OF TEXT (the Results comp). Winner mint, draw board-green, beaten accent -- so a column of results reads as won/drew/lost before a single number is read. The fills are the same in both themes and the ink on them is fixed, for the same reason the live score strip's is: these are signal colours, not surfaces. A live tie paints its leader and trailer too; an equal score stays neutral. */ .tie .tsc{display:grid;grid-template-columns:1fr 1fr;gap:2px;text-align:center; font-variant-numeric:tabular-nums} .tie .tsc b{background:var(--tiescore);color:var(--tiescoreink); font-size:var(--t-23);line-height:1;padding:11px 3px} .tie .tsc b.tw{background:var(--fillwin);color:var(--fillink)} .tie .tsc b.tdr{background:var(--board);color:var(--fillink)} .tie .tsc b.tls{background:var(--filllose);color:var(--fillink)} .tie .tv{text-align:center;color:var(--tiev);font-size:var(--t-l)} .tie .tw{color:var(--pos)} .tie .tme{font-weight:600} .tie:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* Each side's remaining players sit beside that side's own name, so there is never a question which team the number belongs to. */ .tie .tleft{font-size:var(--t-xxs);white-space:nowrap;margin-left:7px} .tie .ta .tleft{margin:0 7px 0 0} @media(max-width:640px){ .tie{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); gap:9px;padding:16px 9px} .rnd.scored .tie{grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr)} .tie .tt{font-size:var(--t-s)} .tie .tt small{display:block;margin-left:0} .tie .tsc b{font-size:var(--t-xl);padding:10px 2px} /* 16px, because anything smaller makes iOS zoom the page on focus. */ .lwksel{font-size:var(--t-l)} } /* One tie, opened out. */ .tsh{margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--line2)} .tsr{display:grid;grid-template-columns:34px 1fr auto 42px;gap:7px; align-items:center;padding:3px 0;border-bottom:1px solid var(--line)} .tsr.dim .tsn,.tsr.dim .num{color:var(--dim)} .tsr[data-pid]{cursor:pointer} .tsr[data-pid]:hover .tsn{color:var(--accent)} .tsn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tsb{margin-top:9px;padding-top:7px;border-top:1px solid var(--line2)} .tst{display:flex;justify-content:space-between;margin-top:9px;padding-top:7px; border-top:1px solid var(--line2);font-size:var(--t-m)} .momrow{padding:9px 12px;border:1px solid var(--line2);border-radius:var(--r); margin-bottom:12px;background:var(--panel)} .momn{font-size:var(--t-m);margin-top:2px} /* --------------------------------------------- week by week (the side race) */ /* Newest on the left, older ones a swipe away. Snap is `proximity`, never `mandatory` -- mandatory silently kills programmatic smooth scrolling. */ .wkstrip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .wkstrip::-webkit-scrollbar{height:6px} .wkstrip::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px} .wk{flex:0 0 auto;width:112px;padding:9px 10px;border-radius:var(--r); border:1px solid var(--line);background:var(--panel);scroll-snap-align:start; cursor:pointer;transition:border-color .12s,background .12s} .wk:hover{border-color:var(--line2);background:var(--panel2)} .wke{font-size:var(--t-xxs);letter-spacing:.09em;color:var(--dim2)} .wkp{font-size:var(--t-2xl);font-weight:600;line-height:1.15;margin:1px 0 2px} .wkt{font-size:var(--t-xs);color:var(--dim);overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .wkb{font-size:var(--t-micro);letter-spacing:.1em;margin-top:5px;color:var(--dim2)} /* The season's best is a filled box, not an outlined one. */ .wk.best{background:var(--pos);border-color:var(--pos)} .wk.best .wke,.wk.best .wkp,.wk.best .wkt,.wk.best .wkb{color:var(--wk-best)} .wk.best .wkt,.wk.best .wke,.wk.best .wkb{opacity:.72} .wk.best:hover{background:var(--pos);filter:brightness(1.06)} .wk.mine:not(.best){border-color:var(--accent)} /* Best GW opens the eleven that scored it, so it has to look like a target. */ .bestgw{background:none;border:0;padding:0;font:inherit;color:inherit; cursor:pointer;display:inline-flex;align-items:baseline;gap:5px} .bestgw b{font-size:var(--t-m);border-bottom:1px dotted var(--line2)} .bestgw:hover b{color:var(--accent);border-bottom-color:var(--accent)} .bestgw .mono{font-size:var(--t-xxs)} /* Sortable headers in the team Form table. */ th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--text)} th.sortable.on{color:var(--accent)} /* Sub-destinations under an open nav item. */ .nav button.sub{padding-left:26px;font-size:var(--t-s);color:var(--dim2); font-weight:400} .nav button.sub .ni{width:14px;height:14px;margin-right:9px} .nav button.sub .ni svg{stroke-width:1.5} .nav button.sub::before{content:'';position:absolute;margin-left:-12px; width:1px;height:14px;background:var(--line2)} .nav button.sub{position:relative} .nav button.sub:hover{color:var(--accent)} /* The open sub-page: orange, on the rule it already sits beside. It must undo the parent's dot, which would otherwise land on top of the rule. */ .nav button.sub.on{background:none;color:var(--accent);font-weight:400} .nav button.sub.on::before{left:auto;top:auto;margin-top:0;border-radius:0; width:2px;height:18px;background:var(--accent)} /* ------------------------------------------ press-conference team news */ .pressgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:12px} .presscard{background:var(--panel);border:1px solid var(--line); border-radius:var(--r);padding:12px 14px} .presscard.mine{border-left:2px solid var(--accent)} .pressh{display:flex;justify-content:space-between;align-items:center;gap:10px; margin-bottom:7px;font-size:var(--t-s)} .pressn{font-size:var(--t-s);line-height:1.6;color:var(--dim);margin-bottom:7px} /* The quoted words are the part that carries weight. */ .pressq{font-size:var(--t-s);line-height:1.6;padding:7px 10px;margin-top:6px; border-left:2px solid var(--line2);background:var(--panel2); border-radius:0 var(--r) var(--r) 0} .pq{color:var(--text);font-weight:600} h3.sub{font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase; color:var(--dim2);margin:14px 0 8px} /* The quote is context, not the column you scan -- so it is clamped to two lines and the whole sentence sits in the tooltip. Left unclamped it pushed the Watch button off the edge of the table. */ .pressay{font-size:var(--t-xs);color:var(--dim);line-height:1.45; max-width:460px;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .btn.sm{padding:3px 9px;font-size:var(--t-xs)} .btn.sm.on{background:var(--accentdim);color:var(--accent); border-color:var(--accentdim)} /* An openable row in the claim list. */ tr.mrow{cursor:pointer} tr.mrow:hover{background:var(--panel2)} tr.mrow .chev{display:inline-block;width:12px;color:var(--dim2);font-size:var(--t-xxs)} tr.mdetail>td{background:var(--panel2);padding:14px 16px} .mdgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px} @media(max-width:900px){.mdgrid{grid-template-columns:1fr}} .insrow{padding:6px 0;border-bottom:1px solid var(--line);font-size:var(--t-s); line-height:1.5} .insrow:last-child{border-bottom:none} .insh{color:var(--text)} .insfx{color:var(--accent);font-size:var(--t-xs);margin-top:2px} .mdfx{display:flex;gap:5px;flex-wrap:wrap} .load.sm{padding:14px} .pill.prio{font-size:var(--t-xxs);letter-spacing:.06em;white-space:nowrap} .forwho{font-size:var(--t-xxs);margin-top:1px} .keptnote{font-size:var(--t-s);color:var(--dim);background:var(--panel); border:1px solid var(--line2);border-left:2px solid var(--pos); border-radius:var(--r);padding:9px 12px;margin-bottom:10px;line-height:1.55} /* ------------------------------------------------------- keeping a player */ .keepcard{border-left:2px solid var(--pos)} .keepcard.changed{border-color:var(--warn);border-left-color:var(--warn)} .keepchg{font-size:var(--t-s);margin-top:8px;padding:8px 10px;border-radius:var(--r); background:var(--panel2);line-height:1.55} .keepchg.fresh{background:var(--warndim);color:var(--text)} .keeptl{margin-top:5px} .keeptl .tlrow{display:flex;gap:8px;align-items:baseline;font-size:var(--t-xs); padding:4px 0;border-bottom:1px solid var(--line);line-height:1.45} .keeptl .tlrow:last-child{border-bottom:none} .keepsrch{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px} /* -------------------------------------------------- fixture win probability */ .odds{margin:9px 0 4px} .obar{display:flex;height:6px;border-radius:3px;overflow:hidden; background:var(--line)} .obar .oh{background:var(--pos)} .obar .od{background:var(--line2)} .obar .oa{background:var(--dataline)} .orow{display:flex;justify-content:space-between;font-size:var(--t-xs); margin-top:5px} .onote{font-size:var(--t-xxs);margin-top:3px;line-height:1.45} /* ------------------------------------------------------------- ask anything */ .asksearch{position:relative;padding:0 14px 12px} .asksearch input{width:100%;padding:7px 10px;font:inherit;font-size:var(--t-s); color:var(--text);background:var(--panel2);border:1px solid var(--ctlline); border-radius:var(--r)} .asksearch input:focus{outline:none;border-color:var(--accent)} .qres{position:absolute;left:14px;right:14px;top:100%;z-index:60; background:var(--panel);border:1px solid var(--line2);border-radius:var(--r); box-shadow:0 18px 40px rgba(0,0,0,.55);max-height:70vh;overflow:auto; min-width:320px} .qcard{padding:12px 14px} .qhead{display:flex;justify-content:space-between;align-items:center;gap:10px} .qhl{font-size:var(--t-s);margin:7px 0 8px;line-height:1.5} .qnums{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--t-xs); padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px} .qr{font-size:var(--t-xs);color:var(--dim);line-height:1.55;padding:3px 0} .qr.warnr{color:var(--warn)} .qacts{margin-top:9px} .qalso{font-size:var(--t-xs);margin-top:8px;padding-top:7px; border-top:1px solid var(--line)} @media(max-width:900px){.qres{position:fixed;left:10px;right:10px;top:auto}} .h2hbox{margin:10px 0;padding:9px 11px;border:1px solid var(--line); border-radius:var(--r);background:var(--panel2);font-size:var(--t-s)} .h2hrow{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;margin-top:4px} .h2hlist{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px} .h2hm{font-size:var(--t-xs);color:var(--dim);border:1px solid var(--line2); border-radius:3px;padding:2px 6px} /* ------------------------------------------------ trophies, pot, archive */ .cabgrid,.potgrid{display:grid;gap:10px;margin-bottom:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .cabcard,.potcard{background:var(--panel);border:1px solid var(--line); border-radius:var(--r);padding:11px 13px} .potcard.mine{border-left:2px solid var(--accent)} .cabt{font-size:var(--t-m)} .cabn{font-size:var(--t-s);margin-top:5px} .potamt{font-variant-numeric:tabular-nums;font-size:var(--t-xl)} .potlab{font-size:var(--t-s);margin-top:2px} .potwho{font-size:var(--t-s);color:var(--dim);margin-top:4px} .trophyrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px} .trophy{display:flex;gap:9px;align-items:flex-start;background:var(--panel); border:1px solid var(--line);border-radius:var(--r);padding:9px 12px; min-width:210px} .trophy.champion{border-color:var(--trophy-line)} .tico{font-size:var(--t-l);line-height:1.2} .tlab{font-size:var(--t-xxs);letter-spacing:.09em;text-transform:uppercase} .tname{font-size:var(--t-s)} .checks{margin:8px 0} .chk{font-size:var(--t-xs);padding:2px 0} .chk.ok{color:var(--pos)} .chk.bad{color:var(--neg)} textarea.vin{width:100%;font-variant-numeric:tabular-nums;font-size:var(--t-xs);margin-top:8px; resize:vertical} tr.dimrow td{color:var(--dim2)} tr.oppRow td{background:var(--negdim)} /* The wire. Terminal density: fixed columns, lined-up clock, tag chips. */ .wire{border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .wrow{display:grid;grid-template-columns:62px 118px 1fr 150px;gap:11px; padding:7px 11px;border-bottom:1px solid var(--line);font-size:var(--t-s); align-items:baseline} .wrow:last-child{border-bottom:none} .wrow:hover{background:var(--panel2)} .wrow.mine{background:var(--accentdim)} .wtime{color:var(--dim2);font-size:var(--t-xs);white-space:nowrap} .wtags{display:flex;gap:3px;flex-wrap:wrap} .wtag{font-size:var(--t-xxs);letter-spacing:.06em;text-transform:uppercase; padding:1px 5px;border-radius:3px;border:1px solid var(--line2); color:var(--dim);white-space:nowrap} .wtag.t-transfer{border-color:var(--posline);color:var(--pos)} .wtag.t-rumour{border-color:var(--warnline);color:var(--warn)} .wtag.t-injury{border-color:var(--negline);color:var(--neg)} .wtag.t-press{border-color:var(--accentline);color:var(--accent)} .wbody{line-height:1.5;min-width:0} .wbody a{text-decoration:none} .wbody a:hover{text-decoration:underline} .wsum{display:block;color:var(--dim2);font-size:var(--t-xs);margin-top:2px; line-height:1.45} .wents{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px} .went{font-size:var(--t-xs);border:1px solid var(--line2);border-radius:3px; padding:1px 6px;cursor:pointer;white-space:nowrap} .went i{font-style:normal;color:var(--dim2);margin-left:5px;font-size:var(--t-xxs)} .went.mine{border-color:var(--accentline);color:var(--accent)} .went.free{border-color:var(--posline);color:var(--pos)} .wsrc{font-size:var(--t-xs);text-align:right;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} @media(max-width:900px){ .wrow{grid-template-columns:1fr;gap:4px} .wsrc{text-align:left} } /* The unread bar. Above everything, because meeting it is the point. */ /* A notice, from the comp: an orange rule down the left, no box. */ .inbox{border-left:2px solid var(--accent);background:var(--panel2); border-radius:0;padding:9px 12px;margin-bottom:22px} .inbox .inboxhead b{color:var(--accent)} .inboxhead{display:flex;align-items:center;gap:9px;font-size:var(--t-s); margin-bottom:8px} .inboxn{background:var(--accent);color:var(--onfill);border-radius:10px; padding:1px 8px;font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums} /* A NOTICE HAS A SHAPE. This was a wrapping flex row with a 220px floor under the message, so the moment the column was narrower than the pill, the name, the club and that floor put together, each row broke in a different place: one kept the message beside the name, the next pushed it under, the third stranded "mark read" on a line of its own. Three notices, three layouts, and the narrower the screen the worse it got. Placed rather than flowed: who and what on the first line, the sentence across the second, at every width. */ .inboxrow{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:baseline;gap:3px 8px; padding:7px 0;border-top:1px solid var(--line2);font-size:var(--t-s)} .inboxrow .pill{grid-column:1;grid-row:1} .inboxrow .nn{grid-column:2;grid-row:1;font-weight:600;cursor:pointer} .inboxrow>.dim2{grid-column:3;grid-row:1;justify-self:start} .inboxrow>.lnk{grid-column:4;grid-row:1;justify-self:end;white-space:nowrap} .inboxtext{grid-column:1 / -1;grid-row:2;min-width:0; color:var(--prose);line-height:1.5} /* Returns tab: one block per way of scoring, each with its own run of matches. */ .rblock{margin-bottom:22px} .rblock h4{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase; color:var(--dim2);margin-bottom:9px;display:flex;align-items:center;gap:7px} /* Matrix headers were rotated 90 degrees with a projection tucked under each name -- two things fighting for the same 40 pixels, and neither readable. Upright, one line, no second number: every cell below is already the difference that player makes, so repeating his score explained nothing. */ table th.mxh{padding:6px 3px;vertical-align:bottom;font-weight:500; font-size:var(--t-xxs);letter-spacing:0;text-transform:none;color:var(--dim); white-space:nowrap;text-align:center;min-width:52px;max-width:66px} table th.mxh span{display:block;overflow:hidden;text-overflow:ellipsis} td.mxadd{white-space:nowrap;position:sticky;left:0;background:var(--bg);z-index:1} /* A banner above the column headers, grouping a statistic's total and its home/away split under one season. */ tr.grprow th.grp{font-size:var(--t-xxs);letter-spacing:.11em;text-transform:uppercase; color:var(--dim2);text-align:center;padding:5px 6px 3px; border-bottom:1px solid var(--line2);font-weight:600;white-space:nowrap} tr.grprow th.grp.blank{border-bottom:none} tr.grprow th.grp:not(.blank){background:var(--panel2)} /* Yellow cards: the number carries the warning, so the cell stays one character wide. "4 to a ban" under every row was three words of chrome in a column that needed none. */ .yc{position:relative;display:inline-flex;align-items:center; justify-content:center;min-width:24px;padding:1px 6px;border-radius:4px; font-variant-numeric:tabular-nums} .yc.ycnil{background:none;color:var(--dim2)} .yc.ycwarn{background:var(--warndim);color:var(--warn)} .yc.ycrisk{background:var(--negdim);color:var(--neg);font-weight:600} /* The one-away mark must not shift the digit: every number in the column sits in the same box whether or not it carries a warning. */ .yc i{position:absolute;right:1px;top:-3px;font-style:normal;font-weight:700; font-size:var(--t-micro);line-height:1} .rlay{display:flex;gap:22px;align-items:center;flex-wrap:wrap} .rdial{display:flex;flex-direction:column;align-items:center;gap:2px; font-size:var(--t-xxs);letter-spacing:.09em;text-transform:uppercase} .dial{width:78px;height:78px} .dial .dtrack{fill:none;stroke:var(--line2);stroke-width:6} .dial .dfill{fill:none;stroke:var(--pos);stroke-width:6;stroke-linecap:round} .dial .dnum{fill:var(--text);font-size:var(--t-l);font-weight:600;text-anchor:middle} .dial .dpc{font-size:var(--t-xxs);fill:var(--dim2)} .dial .dsub{fill:var(--dim2);font-size:var(--t-micro);text-anchor:middle} .rbars{flex:1;min-width:240px;display:flex;flex-direction:column;gap:6px} .sbar{display:grid;grid-template-columns:78px 1fr 46px;gap:9px; align-items:center;font-size:var(--t-xs)} .sbl{color:var(--dim2)} .sbt{height:7px;background:var(--panel2);border-radius:4px;overflow:hidden} .sbt i{display:block;height:100%;background:var(--pos);border-radius:4px} .sbv{text-align:right;font-variant-numeric:tabular-nums} .sbar.empty2{grid-template-columns:78px 1fr} .rgrid{margin-top:12px;display:flex;flex-wrap:wrap;gap:2px} .rcell{width:15px;height:15px;border-radius:2px;background:var(--panel2); border:1px solid var(--line2);display:inline-block} .rcell.on{background:var(--pos);border-color:var(--pos)} tr.seasonstart td{border-top:1px solid var(--line2)} tr.ctot td{border-top:2px solid var(--line2);font-weight:600; color:var(--dim)} tr.liveseason td{background:var(--accentdim)} tr.liveseason td:first-child{font-weight:600} /* The man the matrix wants to drop just got better. Nothing is blocked -- the number still stands -- but the app will not stay quiet about it. */ .guard{margin-top:11px;padding:9px 11px;border-radius:var(--r); background:var(--warndim);border:1px solid var(--warnline);font-size:var(--t-s)} .guard b{display:block;margin:2px 0 5px;color:var(--warn)} .guard ul{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:4px} .guard li{line-height:1.5;color:var(--prose);padding-left:13px;position:relative} .guard li::before{content:"\2191";position:absolute;left:0;color:var(--warn)} .guard .dim2{display:block;margin-top:6px;font-size:var(--t-xs)} /* Why a swap is better, decomposed. A number with no reason is a ranking, and a ranking is what every other tool already gives you. */ .because{list-style:none;margin:7px 0 0;padding:0;display:flex; flex-direction:column;gap:4px} .because li{font-size:var(--t-xs);line-height:1.5;color:var(--dim); padding-left:15px;position:relative} .because li::before{content:"+";position:absolute;left:0;color:var(--pos); font-weight:600} .because li.against::before{content:"\2212";color:var(--neg)} .because li.b-horizon::before{content:"\21C4";color:var(--warn)} .track{margin-top:9px;padding:8px 10px;border-radius:var(--r); background:var(--warndim);border:1px solid var(--warnline); font-size:var(--t-xs);line-height:1.5;color:var(--warn)} .track .pill{margin-right:7px} .rivnews{display:flex;flex-direction:column} .rivrow{padding:10px 0;border-bottom:1px solid var(--line)} .rivrow:last-child{border-bottom:none} .rivhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap; font-size:var(--t-s)} .rivhead .nn{font-weight:600;cursor:pointer} .rivtext{font-size:var(--t-s);line-height:1.55;color:var(--prose);margin-top:4px} /* A loss reads differently from a notification. */ .inboxrow.gone{background:var(--negdim);margin:0 -13px;padding-left:13px; padding-right:13px} /* THE ROW IS ALREADY THE SIGNAL. Tinting it AND colouring the name says the same thing twice, and the second saying is the one that fails: red on a red wash measured 4.06:1. The tint and the pill carry it. */ .inboxrow.gone .nn{color:var(--text)} /* THE SAME WASH TWICE IS A DARKER WASH. The row is already tinted with the signal, so a pill carrying the same signal laid its own tint on top of it and its ink then read 3.68:1 against the ground it had just deepened. The row owns the fill here; the pill keeps its edge and its ink, which is what makes it a pill. And the ink is lifted a shade, because the row's wash raises the ground under it: the same red reads 5.20 on the page and 4.44 here. Mixed toward the text rather than written as a second red, so there is still one negative colour in the palette. */ .inboxrow.gone .pill.r{background:transparent; color:color-mix(in srgb,var(--neg) 88%,var(--text))} .inboxsplit{margin-top:9px;padding-top:8px;border-top:1px solid var(--line2); font-size:var(--t-xxs);letter-spacing:.11em;text-transform:uppercase; color:var(--dim2)} #undobar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%); z-index:60;display:flex;gap:12px;align-items:center;font-size:var(--t-s); background:var(--panel);border:1px solid var(--line2);border-radius:var(--r); padding:10px 14px;box-shadow:0 12px 30px -14px var(--shadow)} /* Column heading for one manager's eleven. */ .sidehead{margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--line)} .sideteam{font-size:var(--t-xl);font-weight:650;letter-spacing:-.01em;line-height:1.2} .sideteam.mine{color:var(--accent)} .sideteam.theirs{color:var(--text)} .sidemeta{font-size:var(--t-xs);color:var(--dim2);margin-top:3px} /* Two things a projection cannot see: who else is queueing for this player, and how much of your squad already depends on one club's afternoon. */ .conc{margin-top:12px;padding:9px 11px;border-radius:var(--r); background:var(--warndim);border:1px solid var(--warnline); font-size:var(--t-s);line-height:1.55;color:var(--warn)} .conc .pill{margin-right:8px} .claimline{margin-top:10px;display:flex;gap:9px;align-items:baseline; flex-wrap:wrap;font-size:var(--t-s)} .claimline .dim2{flex:1;min-width:200px;line-height:1.5} /* Between-gameweek preview: the tie ahead and the wire behind it. */ .prevhead{display:flex;align-items:center;gap:26px;flex-wrap:wrap; margin-bottom:12px} .prevhead>div{display:flex;flex-direction:column;gap:2px} .prevhead .dim2{font-size:var(--t-xxs);letter-spacing:.11em;text-transform:uppercase} .prevhead b{font-size:var(--t-m)} .mvlist{display:flex;flex-direction:column} .mvrow{display:grid;grid-template-columns:minmax(130px,1.1fr) minmax(120px,1fr) 1fr auto; gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line); font-size:var(--t-s)} .mvrow:last-child{border-bottom:none} .mvrow.mine{background:var(--accentdim);margin:0 -11px;padding-left:11px; padding-right:11px} .mvrow.opp{background:var(--negdim);margin:0 -11px;padding-left:11px; padding-right:11px} .mvkind{font-size:var(--t-xs)} /* Win probability: one bar, three outcomes, in the order they matter. */ .wbar{display:flex;height:9px;border-radius:5px;overflow:hidden; background:var(--panel2);margin-bottom:7px} .wbar i{display:block} .wbar i.w{background:var(--pos)} .wbar i.d{background:var(--line3)} .wbar i.l{background:var(--neg)} .wbarlab{display:flex;justify-content:space-between;font-size:var(--t-s); font-variant-numeric:tabular-nums} .wcmp{display:flex;gap:26px;flex-wrap:wrap;margin-top:12px;padding-top:10px; border-top:1px solid var(--line);font-size:var(--t-s)} .wcmp .dim2{display:block;font-size:var(--t-xxs);letter-spacing:.11em; text-transform:uppercase;margin-bottom:2px} .wswap{margin-top:11px;padding-top:10px;border-top:1px solid var(--line); display:flex;flex-direction:column;gap:6px;font-size:var(--t-s)} .wswap .pill{margin-right:7px} /* Display settings rows. */ .setrow{display:flex;align-items:center;justify-content:space-between;gap:18px; padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .setrow:last-child{border-bottom:none;padding-bottom:0} .setrow:first-child{padding-top:0} .setrow b{font-size:var(--t-s);font-weight:600} .setrow .dim2{font-size:var(--t-xs);line-height:1.55;margin-top:3px;max-width:52ch; color:var(--dim2)} .btn.icon{padding:0;width:32px;height:32px;display:inline-flex;align-items:center; justify-content:center;font-size:var(--t-s);line-height:1;border-radius:50%} /* Paging the Premier League player table. */ .plfilters{display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin-bottom:10px} .pager{display:flex;align-items:center;gap:12px;margin-top:10px; font-size:var(--t-xs)} .pager .btn[disabled]{opacity:.35;cursor:default} /* ---------------------------------------------------------- fixture ticker */ /* A heatmap, not a row of chips. The cells carried a 3px radius and the table's own bottom border, so every fixture sat in its own little tile with a dark seam around it -- at this density that reads as dead pixels between the colours rather than as a scale. Edge to edge, and the rows below the header carry no line of their own. */ table.tkt td.tk{text-align:center;font-size:var(--t-xs);padding:8px 6px; border-radius:0;border-bottom:0;white-space:nowrap} table.tkt th.tkgw{text-align:center} /* The divider under the gameweek labels, which is what separates the heading row from the map now that the cells have no borders. */ table.tkt thead th{border-bottom:1px solid var(--line2)} /* Your own row: quietly raised, and marked down its edge rather than washed in a colour that would compete with the difficulty scale. */ table.tkt tr.mineRow td{background:var(--panel2)} table.tkt tr.mineRow td.tkname{box-shadow:inset 2px 0 0 var(--accent)} table.tkt tbody tr:hover td:not(.tk){background:var(--panel2)} .tk.easy{background:var(--tk-easy-bg);color:var(--tk-easy-fg)} .tk.ok{background:var(--tk-ok-bg);color:var(--tk-ok-fg)} .tk.even{background:var(--tk-even-bg);color:var(--tk-even-fg)} .tk.hard{background:var(--tk-hard-bg);color:var(--tk-hard-fg)} .tk.brutal{background:var(--tk-brutal-bg);color:var(--tk-brutal-fg)} .tk.blank{background:transparent;color:var(--dim2)} /* No second dimming. The band's own colour is already the quiet one for its tier, and fading it again put this at 2.44:1; even at .9 it only reaches 4.08. It is the smallest type on the row, which is what makes it secondary -- the opacity was doing that job twice. */ .tkha{font-size:var(--t-xxs)} .tkname{white-space:nowrap} .tklegend{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:var(--t-xs); color:var(--dim)} .tkkey{display:flex;align-items:center;gap:5px} .tkkey i{width:13px;height:11px;border-radius:2px;display:inline-block} table.tkt tr.mineRow td.tkname{font-weight:600} .pending{margin:10px 0;padding:10px 12px;border-radius:var(--r); background:var(--warndim);border:1px solid var(--warnline);font-size:var(--t-s); line-height:1.6} .pending .pill{margin:0 3px} /* ------------------------------------------------------ press room folds */ /* The page is for reading this week's report. Everything that produces it -- the correspondent, the notes, the editor, the archive -- is available but folded, so the report is what you land on. */ .rsec{border:1px solid var(--line);border-radius:var(--r);margin-top:10px; background:var(--panel)} .rsec>summary{cursor:pointer;padding:10px 14px;font-size:var(--t-s); color:var(--dim);list-style:none} .rsec>summary::-webkit-details-marker{display:none} .rsec>summary::before{content:'▸ ';color:var(--dim2)} .rsec[open]>summary::before{content:'▾ '} .rsec>summary:hover{color:var(--text)} .rsec[open]>summary{border-bottom:1px solid var(--line);color:var(--text)} .rsec>*:not(summary){margin:12px 14px} .rsechead{margin:0} .ractions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} /* Those blocks carry their own heading for when they stand alone. Inside a fold the summary already names them, so the inner heading is noise. */ .rsec h2.sec{display:none} /* Spoken-about vs written-about. The border weight is the whole point: a coach's own words get the accent, a writer's paraphrase gets nothing. */ .spk{font-size:var(--t-xs);line-height:1.5;padding:7px 9px;margin-bottom:8px; border-radius:4px;border:1px solid var(--line)} .spk b{letter-spacing:.04em;text-transform:uppercase;font-size:var(--t-xxs)} .spk-coach{border-left:3px solid var(--pos);background:var(--panel2)} .spk-named{border-left:3px solid var(--accent);background:var(--panel2)} .spk-quoted{border-left:3px solid var(--line);background:var(--panel2)} .spk-none{color:var(--dim2);border-style:dashed} .spkq{margin-top:5px;font-style:italic;color:var(--text);font-size:var(--t-s)} /* Warm start: the last known dashboard, labelled as such. Deliberately loud -- the failure this guards against is a manager acting on an hour-old picture believing it is live. */ .warmbar{display:flex;align-items:center;gap:8px;font-size:var(--t-s); padding:8px 14px;background:var(--warndim);color:var(--text); border-bottom:1px solid var(--warnline)} /* An author `display` beats the hidden attribute's UA rule, so hidden has to be restated here or the element renders as an empty bordered box. */ .warmbar[hidden]{display:none!important} .warmbar b{letter-spacing:.03em;text-transform:uppercase;font-size:var(--t-xxs)} .spin.sm{width:11px;height:11px;border-width:2px;flex:0 0 auto} /* The quiet state. Deliberately calm rather than invisible: it is a verdict, and a verdict that looks like an error message is not reassuring. */ .inbox.quiet{border-left:3px solid var(--pos)} .inbox.quiet.stands{border-left-color:var(--warnline)} .quietmark{display:inline-flex;align-items:center;justify-content:center; width:18px;height:18px;border-radius:50%;font-size:var(--t-xs);font-weight:700; background:var(--posdim);color:var(--pos);flex:0 0 auto} .inbox.quiet.stands .quietmark{background:var(--warndim);color:var(--warn)} .quietbody{font-size:var(--t-s);line-height:1.55;padding:6px 12px 10px} /* The verdict on the eleven he saved. A clean bill of health is stated as plainly as a problem: silence would read as "not checked". */ .xiverdict{font-size:var(--t-s);line-height:1.55;padding:9px 11px;margin-bottom:12px; border:1px solid var(--line);border-radius:4px;background:var(--panel)} .xiverdict.ok{border-left:3px solid var(--pos);color:var(--dim)} .xiverdict.bad{border-left:3px solid var(--neg)} .xiprob{margin-top:6px;display:flex;gap:7px;align-items:baseline} /* Which market you are in. The border does the work: a queue is calm, a race is not, and an urgent queue is somewhere between. */ .wclock{border:1px solid var(--line);border-radius:4px;margin-bottom:14px; background:var(--panel)} .wclock.queue{border-left:3px solid var(--accent)} .wclock.race{border-left:3px solid var(--warn)} .wclock.urgent{border-left-color:var(--neg)} .wchead{display:flex;align-items:center;gap:8px;padding:8px 11px; border-bottom:1px solid var(--line);font-size:var(--t-s)} .wcbody{font-size:var(--t-s);line-height:1.55;padding:8px 11px;color:var(--dim)} /* Answers about named players. A refusal is rendered as prominently as an answer: "we do not model that" is the product working. */ .asknamed{margin-top:10px} .askp{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 10px; border:1px solid var(--line);border-radius:4px;margin-bottom:7px; background:var(--panel);font-size:var(--t-s)} .askp-n{font-weight:600} .askp-o{font-size:var(--t-xs);color:var(--dim2)} .askp-o.mine{color:var(--accent)} .askp-o.free{color:var(--pos)} .askp-v{font-variant-numeric:tabular-nums;font-size:var(--t-s)} .askgain{width:100%;margin:8px 0} /* The evidence under a poll answer, and who holds each man -- said once, as context, because which of two players is better does not depend on who owns them. */ .askwhy{margin:8px 0 0;padding-left:18px;font-size:var(--t-s);line-height:18px} .askwhy li{margin:3px 0} .askown{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0; font-size:var(--t-xs);color:var(--dim)} .askverdict{font-size:var(--t-s);font-weight:600;padding:9px 11px;border-radius:4px; margin:8px 0;border:1px solid var(--line)} .askverdict.yes{border-left:3px solid var(--pos);background:var(--posdim)} .askverdict.no{border-left:3px solid var(--neg);background:var(--negdim)} /* The count beside the rate. Quiet enough not to compete with the percentage, present enough that nobody reads a rate without its sample. */ .sbv .sbn{display:inline-block;margin-left:6px;font-size:var(--t-xxs); color:var(--dim2);font-variant-numeric:tabular-nums} /* A labelled select that sits on the filter row like the chips it replaced. */ .fsel{display:inline-flex;align-items:center;gap:7px} .fsell{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em; color:var(--dim2)} .fsel select{background:var(--panel);color:var(--text); border:1px solid var(--line);border-radius:var(--r); padding:5px 26px 5px 9px;font:inherit;font-size:var(--t-s);cursor:pointer; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%), linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%; background-size:5px 5px,5px 5px;background-repeat:no-repeat} .fsel select:focus{outline:none;border-color:var(--accent)} .chipx{background:none;border:1px solid var(--line);color:var(--dim); border-radius:var(--r);padding:5px 9px;font-size:var(--t-xs);cursor:pointer} .chipx:hover{color:var(--text);border-color:var(--dim)} /* The Scout reads as a column of prose, not as a panel of data. */ .scout{max-width:64ch;margin-top:6px} .scbyline{font-size:var(--t-xs);color:var(--dim2);margin-bottom:14px; padding-bottom:10px;border-bottom:1px solid var(--line)} .scp{font-size:var(--t-m);line-height:1.75;margin:0 0 15px;color:var(--text)} .scp[data-kind="close"]{color:var(--dim);font-size:var(--t-s); border-top:1px solid var(--line);padding-top:13px} /* The team sheet carries a line of a player's own history against this fixture. Quiet by default -- it is context, not a projection -- and it must never compete with the number it sits under. */ .muprow{padding:4px 0;border-bottom:1px solid var(--line);cursor:pointer} .muptop{display:flex;justify-content:space-between;align-items:baseline} .muphist{display:flex;flex-direction:column;gap:2px;margin:3px 0 2px} .hline{font-size:var(--t-xs);line-height:1.45;color:var(--dim2); padding-left:8px;border-left:2px solid var(--line2)} .hline.h-opp{color:var(--dim);border-left-color:var(--accentline)} .hline.h-split{color:var(--dim);border-left-color:var(--posline)} /* The next opponent, found without hunting. The table sorts by points per 90, so this row can be anywhere in nineteen. */ tr.nextopp{background:var(--accentdim)} tr.nextopp td{border-top:1px solid var(--accentline); border-bottom:1px solid var(--accentline)} tr.nextopp td:first-child{color:var(--accent);font-weight:600} .nextmark{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:3px; background:var(--accent);color:var(--onfill);font-size:var(--t-xxs);font-weight:700; letter-spacing:.07em;text-transform:uppercase;vertical-align:1px} /* The fixture calendar, present only when the calendar has something on it. */ .dgw{margin-bottom:14px} .dgwrow{padding:8px 0;border-bottom:1px solid var(--line)} .dgwrow:last-of-type{border-bottom:none} .dgwhead{display:flex;align-items:center;gap:8px;font-size:var(--t-s); margin-bottom:4px} .dgwl{display:flex;gap:9px;font-size:var(--t-xs);line-height:1.55; padding:1px 0;color:var(--dim)} .dgwk{flex:0 0 62px;color:var(--dim2);text-transform:uppercase; letter-spacing:.05em;font-size:var(--t-xxs);padding-top:2px} .hline.h-cs{color:var(--dim);border-left-color:var(--posline)} .hline.h-dc{color:var(--dim);border-left-color:var(--warnline)} /* The window every count above it was drawn from. A count with no window reads as a career total. */ /* --dim2 is already the quiet tier; fading it again took it to 3.47:1. One dimming is the design, two is a bug. */ .hwin{font-size:var(--t-xxs);color:var(--dim2);padding-left:8px; letter-spacing:.03em} /* Names picked out of the prose: yours in the accent, everyone else bold. */ /* A name wrapped by lib/names.js takes the ink of whatever it was printed on. It used to force the page's text colour, which on any filled surface -- the mint boards, the score strip, the warm cards -- put light text on a light ground: on the pool's lead board the player's own name measured 1.22 against its background, which is invisible. The weight is what makes a name stand out; the colour is the surface's business. */ /* SAME WEIGHT AS WHATEVER IT SITS IN (Luis, 18 Sep). Pinned to 600 a name was heavier than body text and LIGHTER than a heading, so the linked names in "Claim White. Drop Wan-Bissaka." came out a shade thinner than the sentence they are part of. A name is a word in the line, not a component dropped into it; it is an action because it answers a click, not because it is bold. */ .pn{font-weight:inherit;color:inherit;cursor:pointer} .pn:hover{text-decoration:underline} .pn.mine{color:var(--accent)} /* A club whose text is not what we read last time. */ .presscard.changed{border-left:2px solid var(--pos)} .pressbar{display:flex;gap:14px;align-items:flex-start;justify-content:space-between; font-size:var(--t-xs);line-height:1.6;margin-bottom:10px} .pressbar .btn{flex:0 0 auto;white-space:nowrap} /* The source is older than the gameweek it is being read for. Loud, because the failure it prevents is acting on a fortnight-old injury list. */ .stalesrc{background:var(--negdim);border:1px solid var(--negline); border-radius:var(--r);padding:11px 14px;margin-bottom:12px; font-size:var(--t-s);line-height:1.6;color:var(--text)} .stalesrc b{display:block;margin-bottom:2px} /* Dated team news: the half of this page that carries a timestamp. */ .dated{border:1px solid var(--line);border-radius:var(--r); background:var(--panel);padding:13px 15px;margin-bottom:14px} .dated.empty2{background:none;border-style:dashed} .dtrow{display:grid;grid-template-columns:70px 1fr auto;gap:12px; align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line2); text-decoration:none;color:inherit} .dtrow:last-of-type{border-bottom:none} .dtrow:hover .dthead{text-decoration:underline} .dtrow.mine{border-left:2px solid var(--accent);padding-left:9px; margin-left:-11px} .dtwhen{font-size:var(--t-xs);color:var(--dim2);white-space:nowrap} .dthead{font-size:var(--t-s);line-height:1.45;color:var(--text)} .dtpl{display:block;font-size:var(--t-xs);color:var(--dim2);margin-top:2px} .dtpl .mine{color:var(--accent);font-weight:600} .dtsrc{font-size:var(--t-xs);white-space:nowrap} /* The pool's pager. Same shape as the stats table's, so the two read as one pattern rather than two decisions. */ .pager{display:flex;gap:10px;align-items:center;justify-content:center; padding:14px 0 2px;font-size:var(--t-s);flex-wrap:wrap} /* Sub-items are inserted into the same list as the top-level ones, so opening a section pushes everything below it down by two or three rows -- the item a hand was reaching for moves out from under it. The insertion is animated so the movement is legible as movement rather than reading as a different menu appearing. */ @media (prefers-reduced-motion: no-preference){ .nav button.sub{animation:subin .16s ease-out both} } @keyframes subin{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} } /* ------------------------------------------------------------ phone layout Measured at 375x812 before any of this existed: the sidebar became a 375px row and the three things in it took 112px (brand) + 187px (the Ask box) + 75px (every one of eleven nav buttons, scrolling 1265px of content through that slot) Nothing was broken in a way that threw an error. The nav simply scrolled, so a swipe reached everything -- but ZERO buttons were visible at rest, including Team HQ, so the app opened with no navigation on screen at all and no indication there was any. The Ask box was the thing starving it: it kept its desktop width because nothing told it otherwise. On a phone it drops to its own row, which is also where it belongs -- typing a question is a deliberate act, and it was competing for space with the way out of the page. Tap targets and type were the other half. 25 of 46 controls were under 32px tall and the commonest rendered size in the content was 11px, which is a desktop density on a device held at arm's length. */ @media(max-width:900px){ .side{flex-wrap:wrap;row-gap:0} .brand{flex:0 0 auto} /* Its own line, full width, after the brand and the nav. */ .asksearch{order:3;flex:1 0 100%;padding:0 12px 10px} .asksearch input{font-size:var(--t-l)} /* 16px stops iOS zooming the page on focus */ .qres{left:12px;right:12px} /* Everything the brand does not use. */ .nav{order:2;flex:1 1 auto;min-width:0;padding:6px 8px;gap:4px; scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav button{padding:9px 12px;font-size:var(--t-s);min-height:38px} .nav button.sub{min-height:34px;font-size:var(--t-s)} /* A strip has no room for a glyph beside every word. */ .nav button .ni{display:none} /* A control you tap with a thumb, not point at with a cursor. */ .content .btn, .content button, .content select{min-height:36px} .pager .btn{min-height:38px;padding:0 14px} } /* The sub-items of the open section, in their own element directly under the button they belong to. On a desktop that is exactly the nesting the sidebar always had. */ .navsub{display:flex;flex-direction:column} @media(max-width:900px){ /* Wrap rather than scroll. Eleven destinations at ~76px each need 840px and the strip is 358px, so a single row hides seven of them behind a swipe nobody is told about. Three wrapped lines cost about 120px of an 812px screen and hide nothing -- which is the better trade for a nav you use once and then ignore. */ .nav{flex-direction:row;flex-wrap:wrap;overflow:visible; padding:5px 8px 7px;gap:4px;align-content:flex-start} /* Tighter than the desktop list. A wrapped nav costs vertical space on the device with least of it, so the buttons carry only their label -- the count badges belong to a sidebar you are looking at, not to a row you are scrolling past. */ .nav > button{order:1;flex:0 0 auto;width:auto;white-space:nowrap; padding:8px 10px;font-size:var(--t-s);min-height:36px} .nav > button .tag{display:none} /* Its own line, after every top-level button, whatever the wrap does. */ .navsub{order:2;flex:1 0 100%;flex-direction:row;flex-wrap:wrap;gap:4px; margin-top:2px;padding-top:5px;border-top:1px solid var(--line2)} .navsub button{flex:0 0 auto;width:auto;font-size:var(--t-s);white-space:nowrap} } /* A figure that has more behind it. The dotted underline is the only signal that hovering is worth doing -- without it nobody discovers the split. */ .vsp{border-bottom:1px dotted var(--line3);cursor:help} .vsp:hover{border-bottom-color:var(--accent);color:var(--accent)} /* His name in the article's own words, always visible. A fixed height is the point: the quotes arrive one request at a time, and a list that grows under the reader as each lands is worse than one that holds its shape and fills. Two sentences, clamped, then the link. */ .artfold{margin:8px 0 2px;padding:10px 12px;border-radius:var(--r); background:var(--panel2);border:1px solid var(--line2); display:flex;flex-direction:column;gap:6px; min-height:96px;justify-content:flex-start} .artq{margin:0;font-size:var(--t-s);line-height:1.55;color:var(--text); padding-left:9px;border-left:2px solid var(--accentline); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} .artq.quiet{color:var(--dim2);border-left-color:var(--line2)} .artwait{font-size:var(--t-xs);font-style:italic;opacity:.65} .artmore{font-size:var(--t-xxs)} .artlink{font-size:var(--t-xs);color:var(--accent);text-decoration:none; margin-top:auto} .artlink:hover{text-decoration:underline} /* The home/away pair under a per-opponent number. Small and quiet: the total is the figure, the split is the detail that explains it. Both are on screen because a record against a club is really two records, and which one applies is decided by where this week's fixture is played. */ .hasub{display:block;font-size:var(--t-xxs);line-height:1.25;margin-top:1px; opacity:.65;font-variant-numeric:tabular-nums;letter-spacing:.02em} /* A club he has never faced. Present, so its absence cannot be misread as an oversight; quiet, so it never competes with a real record. */ tr.nevermet td{opacity:.62} tr.nevermet.nextopp td{opacity:.85} /* ---- Compare: two players, one axis ---------------------------------- */ .cmphead{display:flex;gap:20px;flex-wrap:wrap;font-size:var(--t-s);margin-bottom:2px} .cdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px} .cmpcols{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:640px){.cmpcols{grid-template-columns:1fr}} .cmpfix{display:flex;flex-direction:column;gap:4px;margin-top:6px} .cfx{display:grid;grid-template-columns:44px 1fr auto auto;gap:8px;align-items:baseline; padding:5px 8px;border:1px solid var(--line);border-radius:6px;font-size:var(--t-s)} .cfx.blank{opacity:.55} .cfe{font-variant-numeric:tabular-nums;font-size:var(--t-xs);color:var(--dim2)} .cfp{font-variant-numeric:tabular-nums;font-weight:600} .cfw{font-size:var(--t-xxs)} /* ---- Points, coloured by what they were worth ------------------------ A points column read as an index once -- GW sat where PTS belonged and "3, 2, 1" looked like a scoreline. Colour makes the column unmistakable at a glance and never carries meaning on its own: the number is still the number, and every band is legible in both themes. */ .pts{font-variant-numeric:tabular-nums;font-weight:600; padding:1px 6px;border-radius:5px;display:inline-block;min-width:20px} .pts.p0{color:var(--dim2);font-weight:500} /* blank */ .pts.p1{color:var(--text)} /* 1-2: showed up */ .pts.p2{color:var(--heat-fg);background:var(--heat-bg)} /* 3-5: a return */ .pts.p3{color:var(--heat-fg);background:var(--pts-mid-bg)} /* 6-9: a good one */ .pts.p4{color:var(--pts-hi-fg);background:var(--pts-hi-bg);font-weight:700} /* A season total has no match-sized band to sit in, so it gets weight only. */ .pts.pseason{font-weight:700;color:var(--text);background:none;padding-left:0;padding-right:0} /* Connect-your-team: a numbered two-step, because the id lives in another app and the browser will not let us fetch it for you. One click out, one paste back. */ .connectrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0 0} .setup textarea, .panel textarea{width:100%;background:var(--panel2); border:1px solid var(--line2);border-radius:var(--r);padding:10px 12px; margin:6px 0 10px;outline:none;color:var(--text);font-variant-numeric:tabular-nums; font-size:var(--t-xs);resize:vertical} .connectsteps{margin:8px 0 10px;padding-left:20px;font-size:var(--t-s);color:var(--dim)} .connectsteps li{margin:4px 0;line-height:1.5} .connectsteps b{color:var(--text)} /* ---- Player overview: the season on one screen ----------------------- */ .ovtop{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap} .ovphoto{width:76px;height:96px;object-fit:cover;object-position:top; border-radius:var(--r);background:var(--panel2);flex:0 0 auto} .ovfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr)); gap:8px;flex:1 1 380px} .ovgrid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px;margin-bottom:8px} .ovcard{border:1px solid var(--line);border-radius:var(--r);padding:9px 10px 4px; background:var(--panel)} .ovhead{display:flex;justify-content:space-between;align-items:baseline; font-size:var(--t-xs);color:var(--dim);margin-bottom:4px;gap:8px} .ovleg{font-size:var(--t-xxs);color:var(--dim2);white-space:nowrap} .ovk{display:inline-block;width:7px;height:7px;border-radius:2px; background:var(--c);margin:0 3px 0 6px} .ovdash{display:inline-block;width:12px;border-top:1.5px dashed var(--dim2); margin:0 3px 0 6px;vertical-align:middle} .ovchart{width:100%;height:104px;display:block} .ovchart .ovgrid{stroke:var(--line);stroke-width:1;opacity:.55} .ovchart .ovthr{stroke:var(--dim2);stroke-width:1;stroke-dasharray:3 3} .ovchart .ovax{fill:var(--dim2);font-size:var(--t-micro);font-variant-numeric:tabular-nums} .ovchart .ovlab{fill:var(--text);font-size:var(--t-micro);font-variant-numeric:tabular-nums} /* ---- Game switch: two games, one engine ------------------------------- */ .modesw{display:inline-flex;border:1px solid var(--ctlline);border-radius:999px; overflow:hidden;margin-right:10px;flex:0 0 auto} .modebtn{background:none;border:0;color:var(--dim);font:inherit;font-size:var(--t-s); padding:5px 14px;cursor:pointer;letter-spacing:.02em} /* --acc was never a token -- the real one is --accent -- so this drew dark text on no background and the selected mode was unreadable. The text is --onfill, the token that exists for text on the accent. */ .modebtn.on{background:var(--accent);color:var(--onfill);font-weight:600} .modebtn:not(.on):hover{color:var(--text)} /* The watch toggle on a watch card. Top-right of the card, out of the way of the name, and legible in both themes without a second colour token. */ .watchcard{position:relative} /* The card header has to leave room for it, or the toggle lands on top of the ownership pill. */ .watchcard .wh{padding-right:92px} .wwatch{position:absolute;top:8px;right:8px;z-index:2; font-size:var(--t-xxs);letter-spacing:.04em;padding:3px 8px;border-radius:999px; border:1px solid var(--line);background:var(--panel);color:var(--dim); cursor:pointer} .wwatch:hover{color:var(--text);border-color:var(--line2)} .wwatch.on{color:var(--pos);border-color:var(--posline)} /* Rumour tag on the wire. Deliberately the dimmest tag in the set: it is the only content in the app that no engine reads. */ .wtag.t-rumour{color:var(--dim);border-color:var(--line2)} /* Add-to-watchlist, inline beside a player's name. Small enough to sit in a dense table without pushing the name around, big enough to hit. */ .addw{width:18px;height:18px;line-height:1;margin-right:6px;padding:0; border-radius:5px;border:1px solid var(--line);background:transparent; color:var(--dim2);font-size:var(--t-s);cursor:pointer;vertical-align:middle} .addw:hover{color:var(--text);border-color:var(--line2)} .addw.on{color:var(--pos);border-color:var(--posline)} /* Names read straight off a rumour, including players outside the league. Italic and unstyled as data on purpose: the app has not identified them. */ .wment{display:block;margin-top:3px;font-size:var(--t-xs);color:var(--dim2)} .wment i{font-style:italic;color:var(--dim)} /* ======================================================= 900px: compact shell At this width the sidebar cannot remain a useful sidebar. The old middle state unfolded every destination into a tall row above the page; it was complete, but it made navigation look like unstructured body copy and pushed the actual page down. Use the compact shell for tablets and narrow windows too. Content keeps its tablet layout until the 640px phone rules. THE SHELL, from the 15 Sep 2026 handoff. Three pinned pieces and nothing else: a header that never changes shape (the wordmark is the way home, the team name opens the picker), the current section's pages in a row under it, and a bottom bar of the four places a thumb goes most plus More. The sidebar, the hamburger and the page-back strip are gone; the topbar keeps only what the page beneath does not say -- the gameweek, the deadline, Refresh -- and scrolls away with the page. Measured at 390x844 the pinned chrome is 112px with a tabs row and 64px without, against 328px for the shell this replaces. */ @media(max-width:900px){ .side{display:none} :root[data-navopen]{overflow:hidden} /* The header. Fixed, not sticky: sticky lives inside the scrolling column and would leave with it. */ .phead{display:flex;position:fixed;top:0;left:0;right:0;z-index:30; height:calc(64px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 16px 0; align-items:center;justify-content:space-between;gap:16px; background:var(--bg);border-bottom:1px solid var(--line)} /* The wordmark, in the accent -- the same rule as `.brand .wordmark` on the sidebar. The phone header was the one place it stayed white when the name went mint, so a reader with the app open on both saw two different brands. */ .plogo{font-size:var(--t-xl);font-weight:800;line-height:.94; letter-spacing:-.03em;text-transform:uppercase;text-decoration:none; color:var(--accent);min-height:44px;display:flex;flex-direction:column; justify-content:center;flex:none} /* Smaller than the logo, the game underneath. --text, so it is white in Dark and ink in Light without a second rule. */ .pteam{display:flex;flex-direction:column;align-items:flex-end; justify-content:center;min-height:48px;max-width:58%;min-width:0; padding:0;text-align:right;border-radius:0} .pteam strong{font-size:var(--t-l);font-weight:600;color:var(--text); max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; line-height:1.2} .pteam small{font-size:var(--t-xs);color:var(--dim);line-height:1.3} /* The section's pages, pinned under the header. Scrolls sideways, which is allowed here: these are the pages OF the section lit in the bar below, so a reader knows what kind of thing is off the edge. */ .ptabs{display:flex;position:fixed;left:0;right:0;z-index:29; top:calc(64px + env(safe-area-inset-top,0px));min-height:48px; gap:22px;padding:0 16px;align-items:stretch; background:var(--panel);border-bottom:1px solid var(--line); overflow-x:auto;overflow-y:hidden;scrollbar-width:none; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .ptabs::-webkit-scrollbar{display:none} .ptabs:empty{display:none} .ptabs button{position:relative;flex:none;display:flex;align-items:center; min-height:48px;min-width:44px;padding:0;color:var(--dim); /* 13/18, the pilot's `.section-tabs>a`. At 14 Classic's five Team HQ pages ran to 430px and "Transfers" started past the right edge; at 13 its first letters are on screen, which is the cue that the row scrolls. */ font-size:var(--t-13);line-height:18px;font-weight:500;white-space:nowrap;border-radius:0; user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent} .ptabs button.on{color:var(--accent)} .ptabs button.on::after{content:'';position:absolute;left:0;right:0;bottom:0; height:3px;background:var(--accent);border-radius:3px 3px 0 0} /* The page clears what is pinned above and below it. --topbar-h is the measured header-plus-tabs on a phone; see syncTopbarHeight(). */ .main{padding-top:var(--topbar-h,64px); padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))} .content{padding:16px 16px 24px} /* The bottom bar. Above the sheet, so More stays where the thumb left it while the sheet is open. */ .pnav{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:46; grid-template-columns:repeat(5,minmax(0,1fr)); padding:10px 8px calc(12px + env(safe-area-inset-bottom,0px)); background:var(--panel);border-top:1px solid var(--line)} .pnav button{display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;min-height:48px;padding:0; color:var(--dim);font-size:var(--t-xxs);line-height:1.4;border-radius:0; user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent} .pnav button .ni,.pnav button .ni svg{width:22px;height:22px;display:block} .pnav button.on{color:var(--accent)} /* The sheets. One element; 'full' is the More menu over everything but the bar, 'half' is the team picker rising from the bottom over a scrim. */ .psheet{display:block;position:fixed;inset:0;z-index:45} .psheet[hidden]{display:none} .psheet.full{background:var(--bg);overflow:auto;overscroll-behavior:contain; padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))} .psheet.half{background:rgba(0,0,0,.55)} .psheet.half .mspanel{position:absolute;left:0;right:0;bottom:0; max-height:92dvh;overflow:auto;background:var(--panel); border-radius:22px 22px 0 0;border-top:1px solid var(--line); /* Clears the bottom bar, which stays above the sheet. */ padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))} .mshead{position:sticky;top:0;z-index:2;display:flex;align-items:center; justify-content:space-between;gap:16px;background:var(--panel); padding:max(20px,env(safe-area-inset-top,0px)) 16px 16px} .psheet.full .mshead{background:var(--bg)} .mskick{font-size:var(--t-xxs);letter-spacing:.14em;text-transform:uppercase; color:var(--dim);margin-bottom:5px} .mstitle{margin:0;font-size:var(--t-4xl);line-height:1.1;letter-spacing:-.03em; font-weight:600} .msclose{width:44px;height:44px;flex:none;display:flex;align-items:center; justify-content:center;border:1px solid var(--line2);border-radius:999px; padding:0;color:var(--text)} .msclose .ni,.msclose .ni svg{width:20px;height:20px;display:block} .msbody{padding:0 16px} /* The team, at the top of More, and the picker it opens. */ .mspick{display:flex;align-items:center;gap:12px;width:max-content; max-width:100%;min-height:44px;padding:0 0 6px;color:var(--text); font-size:var(--t-3xl);font-weight:600;letter-spacing:-.02em; text-align:left;border-radius:0} .mspick span{min-width:0;overflow-wrap:anywhere} .mspick .ni,.mspick .ni svg{width:18px;height:18px;flex:none;display:block} .msteams{display:grid} .msteam{display:flex;align-items:center;justify-content:space-between; gap:16px;min-height:76px;padding:14px 0;text-align:left;width:100%; border-bottom:1px solid var(--line);border-radius:0;color:var(--text)} .msteam:last-child{border-bottom:none} .msteam strong{display:block;font-size:var(--t-2xl);font-weight:600; line-height:1.25;letter-spacing:-.01em} .msteam small{display:block;font-size:var(--t-s);color:var(--dim);margin-top:3px} .msteam .ni,.msteam .ni svg{width:22px;height:22px;flex:none;display:block} .msteam.on{color:var(--pos)} .msteam.add strong{font-weight:500;color:var(--dim)} /* The eight groups, all at once. Group labels muted uppercase; the items are the pages of each section, so they carry the section weight -- 21px glyph, semibold -- rather than the indented sub-menu one. Active and hovered items orange. */ .msgrp{padding:22px 0 14px;border-bottom:1px solid var(--line)} .msgrp:last-child{border-bottom:none} .msgrp h3{margin:0 0 6px;font-size:var(--t-xxs);font-weight:400; letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} /* A section's name inside the More sheet, where one group now holds two sections and their page names repeat. */ .mssec{font-size:var(--t-xxs);letter-spacing:.11em;text-transform:uppercase; color:var(--dim);margin:12px 0 4px;padding:0 4px} .msitem{display:flex;align-items:center;gap:14px;width:100%;min-height:48px; padding:0 4px;text-align:left;color:var(--text);font-size:var(--t-l); font-weight:600;border-radius:0} .msitem>span{flex:1;min-width:0} .msitem .ni,.msitem .ni svg{width:21px;height:21px;flex:none;display:block; color:var(--dim)} .msitem .ni:last-child,.msitem .ni:last-child svg{width:15px;height:15px; color:var(--dim2)} .msitem:hover,.msitem.on,.msitem.on .ni,.msitem:hover .ni{color:var(--accent)} /* The search box travels into the More sheet while it is open: it is how you reach a player without knowing which page he is on. */ .psheet .asksearch{display:block;padding:8px 0 4px} /* 16px exactly: anything smaller and iOS zooms the whole page on focus. */ .psheet .asksearch input{font-size:var(--t-l);min-height:44px; border-radius:999px;padding:8px 16px} .psheet .qres{left:0;right:0} } /* The topbar, under the compact shell. It wraps to two rows at 375px and costs another 115px on top of the nav. Half of what it carries is already on the page underneath: the team name is the first thing the content says, in larger type, and "FPL 7m ago" is a freshness reading that has its own page. Which game you are in, and which league, is the header's team picker now. What is genuinely only here is when the deadline is, and Refresh -- so that is what stays, on one row that scrolls away with the page rather than pinning itself under a header that is already pinned. */ @media(max-width:640px){ .topbar{position:static} .topbar .modesw,.topbar .leaguebar{display:none} .hqrail{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px} .hqrail .hqsec{margin-top:0;border-top:none;padding-top:0} .hqrail .hqsel,.hqrail .hqsec:nth-child(n+4){grid-column:1/-1; border-top:1px solid var(--line);padding-top:14px} h1.display{font-size:var(--t-4xl)} .bgrid,.bsats,.bsats.two,.bbelow,.brisers{grid-template-columns:1fr} .bsechead.notebook span{display:none} /* The what-if bar's free-transfer control must not wrap: a segmented pill broken over two rows is two half-pills. */ /* Gameweek chips scroll rather than wrap: a wrapped pill is two half-pills. */ #mevs,#lensseg{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none} #mevs button,#lensseg button{flex:none} .wift{max-width:none} .wift .seg{flex-wrap:nowrap;width:max-content} /* Stacked on a phone. The message block's row basis would otherwise be read as a HEIGHT here -- 340px of nothing above the figures. */ .wibar{flex-direction:column;align-items:stretch} .wibar .wimsg{flex-basis:auto} .wibar .lnk,.wibar .btn{margin-left:0;align-self:flex-start} /* Thirteen tabs wrapped into three rows is a wall you read rather than a control you use, and it pushed the player's own name off the screen before a word of the page. One row that scrolls sideways, which is what .navsub already does one level up. */ .tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch} .tabs::-webkit-scrollbar{display:none} .tabs button{flex:0 0 auto} /* Clipping hid Refresh completely. Scrolling at least admits it is there. */ .topbar{gap:8px;padding:7px 12px;flex-wrap:nowrap;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} .topbar::-webkit-scrollbar{display:none} .topbar > *{flex:0 0 auto} .topbar .gw{font-size:var(--t-xs);letter-spacing:.06em} .topbar > .count{display:none} .topbar .spacer{min-width:0} /* The team name is the content's own headline one line further down. Hidden by its own class: an earlier attempt used .gw:last-of-type, and :last-of-type counts ELEMENTS, not classes -- every item here is a span, so it matched none of them and the name stayed. */ .topbar .teamname{display:none} .modesw{flex:none} .dl{padding:3px 7px;font-size:var(--t-xs);white-space:nowrap} .btn{padding:6px 10px} } /* At tablet width the compact header already owns game and team selection. Keep only the timely controls in the old topbar and hold them to one readable row; the phone block above remains responsible for content transformations below 640px. */ @media(min-width:641px) and (max-width:900px){ .topbar{position:static;gap:8px;padding:9px 16px;min-height:0; flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .topbar::-webkit-scrollbar{display:none} .topbar .modesw,.topbar .leaguebar,.topbar .teamname{display:none} .topbar>*{flex:0 0 auto} .topbar .spacer{min-width:0;flex:1 1 auto} } /* A wide table, read as cards. See labelTableCells() in lib/render.js for where data-label comes from and why the transform lives in one place. Only tables that opted in are touched: data-cards="no" is a table narrow enough to still line up, or a heat grid whose columns ARE its meaning. */ @media(max-width:640px){ table[data-cards="yes"], table[data-cards="yes"] tbody{display:block;width:100%} table[data-cards="yes"] thead{display:none} /* Two pairs to a line, not one. The player pool carries twenty-five columns, and one pair per line makes a single player taller than the screen he is being compared on -- which is the horizontal scroll problem again, turned on its side. Nothing is dropped to achieve it: a column hidden on a phone is a number the reader cannot know is missing, and this app does not do that. */ table[data-cards="yes"] tbody tr{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px; background:var(--panel); border:1px solid var(--line);border-radius:var(--r); padding:9px 11px 7px;margin-bottom:7px} table[data-cards="yes"] tbody tr:hover{background:var(--panel2)} table[data-cards="yes"] tbody td{display:flex;gap:12px;align-items:baseline; justify-content:space-between;text-align:right; padding:3px 0;border:0;white-space:normal} table[data-cards="yes"] tbody td::before{content:attr(data-label); flex:0 1 auto;text-align:left;color:var(--dim2);font-size:var(--t-xxs); letter-spacing:.05em;text-transform:uppercase;white-space:nowrap} /* The first column names the thing the card is about, so it is the card's heading rather than another pair. */ table[data-cards="yes"] tbody td:first-child{grid-column:1/-1; display:block;text-align:left; font-size:var(--t-m);padding:0 0 6px;margin-bottom:5px; border-bottom:1px solid var(--line)} table[data-cards="yes"] tbody td:first-child::before{display:none} /* A cell spanning the row is a note or an empty state: full width, no label, because it belongs to no single column. */ table[data-cards="yes"] tbody td[colspan]{grid-column:1/-1; display:block;text-align:left} table[data-cards="yes"] tbody td[colspan]::before{display:none} /* The scroll container has nothing left to scroll. */ .tablewrap:has(table[data-cards="yes"]){overflow-x:visible;max-height:none} } /* Button strips, on a phone. `.seg` clips what does not fit -- overflow:hidden with no scroll -- so the lens strip read "Projection | Form | DefCon | Goals | Assists | C" and the sixth option was gone with nothing to say it existed. Same mistake as the navigation, in a smaller box: wrap instead, and every option is on screen. */ @media(max-width:640px){ .seg{flex-wrap:wrap;overflow:visible;border-radius:var(--r)} .seg button,.seg .segbtn{border-bottom:1px solid var(--line2)} .seg button:last-child,.seg .segbtn:last-child{border-right:none} .filters{gap:8px} .filters select{max-width:100%} } /* ------------------------------------------------------------- signing in A whole screen rather than a panel inside the app, because there is nothing behind it to look at yet. Sized and centred for a phone first: this is the one screen a new tester sees before anything else, and it arrives from a link in a mail client. */ .signin{position:fixed;inset:0;z-index:100;display:flex; align-items:center;justify-content:center;padding:24px; background:var(--bg);overflow:auto} .signinbox{width:100%;max-width:380px} .signinbox h1{font-size:var(--t-2xl);font-weight:650;letter-spacing:-.02em; margin-bottom:8px} .signinbox p{font-size:var(--t-s);line-height:1.55;margin-bottom:18px} .signinbox form{display:flex;flex-direction:column;gap:9px} .signinbox input{width:100%;padding:11px 12px;font:inherit; /* 16px exactly: below it iOS zooms the page the moment this is focused, and this is the first thing anybody ever taps here. */ font-size:var(--t-l); background:var(--panel2);color:var(--text); border:1px solid var(--line2);border-radius:var(--r);outline:none} .signinbox input:focus{border-color:var(--accent)} .signinbox button{min-height:42px;font-size:var(--t-m)} .signinsaid{margin-top:14px;padding:10px 12px;border-radius:var(--r); font-size:var(--t-s);line-height:1.5;border:1px solid var(--line2); background:var(--panel);word-break:break-word} .signinsaid.good{border-color:var(--posline);background:var(--posdim); color:var(--pos)} .signinsaid.bad{border-color:var(--negline);background:var(--negdim); color:var(--neg)} .signinsaid.warn{border-color:var(--warnline);background:var(--warndim); color:var(--warn)} .signinsaid a{color:inherit;word-break:break-all} .signinnote{margin-top:16px;font-size:var(--t-xs);line-height:1.5} /* --------------------------------------------------- chip timing (classic) One row per chip: the verdict, why, and the week-by-week gain it came from. The weeks are shown rather than only the winner because the whole point of the answer is often that the winner is barely ahead. */ .chiprow{padding:12px 0;border-bottom:1px solid var(--line)} .chiprow:last-of-type{border-bottom:none} .chiphead{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap} .chiphead b{font-size:var(--t-m)} .chipwhy{font-size:var(--t-s);color:var(--prose);line-height:1.5; margin-top:5px;max-width:62ch} .chipweeks{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px} .chipwk{flex:0 0 auto;min-width:74px;padding:6px 9px;border-radius:var(--r); border:1px solid var(--line);background:var(--panel2);text-align:center} /* The best week in view. Bordered rather than filled: it is frequently ahead by a rounding error, and a solid highlight would shout that. */ .chipwk.best{border-color:var(--accentline);background:var(--accentdim)} .chipwk .k{font-size:var(--t-xxs);color:var(--dim2);letter-spacing:.04em; text-transform:uppercase;white-space:nowrap} .chipwk .v{font-variant-numeric:tabular-nums;font-size:var(--t-m);margin-top:2px} .chipwk .s{font-size:var(--t-xxs);color:var(--dim2);margin-top:1px} .chipwk .s.pos{color:var(--pos)} .chipwk .s.neg{color:var(--neg)} .chipcav{font-size:var(--t-xs);color:var(--dim2);line-height:1.5; margin-top:7px;max-width:62ch} /* The weakest week for the squad you have — which is where a Free Hit is worth most, and where a Wildcard's fixture run is worst. Marked, not scored: it is a fact about your own eleven, not a value for the chip. */ .chipwk.weak{border-color:var(--warnline);background:var(--warndim)} /* The classic gameweek report. Prose, so it gets a measure and a rhythm rather than the density every other page here is tuned for. */ .reportp{font-size:var(--t-m);line-height:1.62;color:var(--prose); max-width:64ch;margin:0 0 12px} /* ============================================================= The Brief An editorial front page, in this app's own palette and type scale. The reference was a magazine's HIERARCHY -- one lead that runs long, shorter satellites around it, a rule, then a row of equal stories. No new colours, no new faces, no new components. The hierarchy does the work that a second font would otherwise do: the lead headline is four steps up the existing scale from the evidence underneath it, which is what makes the page read as a briefing rather than a panel of equal boxes. */ /* THE MASTHEAD. A signed front page: byline above the rule, the title and the gameweek on one line, and the edition's own details beneath. */ .bmast{margin-bottom:22px} .bbyline{color:var(--dim)} /* The masthead rule is mint, from the comp: the paper's own colour. */ .bmastr{display:flex;align-items:flex-end;justify-content:space-between; gap:20px;padding:12px 0 15px;border-bottom:3px solid var(--board)} .bmastt{font-size:var(--t-display);font-weight:700;letter-spacing:-.045em; line-height:.9;margin:0} .bmastgw{display:flex;align-items:flex-end;gap:10px;flex:none} .bmastgw span{font-size:var(--t-xxs);letter-spacing:.18em;text-transform:uppercase; color:var(--dim);text-align:right;line-height:1.3;font-weight:700} .bmastgw b{font-size:var(--t-4xl);line-height:.85;font-weight:700; letter-spacing:-.03em;font-variant-numeric:tabular-nums} .bmastmeta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:12px 0 25px;font-size:var(--t-xs);color:var(--dim)} .bmastmeta .bdl{color:var(--warn)} .bmastmeta .bdl:before{content:'';display:inline-block;width:7px;height:7px; background:var(--warn);margin-right:7px;vertical-align:middle} /* Lead beside its satellites. Two thirds and one third, the proportion a front page uses to say which story is the story. */ .bgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:28px;align-items:start} .blabel{font-size:var(--t-xxs);letter-spacing:.18em;text-transform:uppercase; color:var(--accent);margin-bottom:6px} .blead .bleadh{font-size:var(--t-4xl);font-weight:600;letter-spacing:-.025em; line-height:1.08;max-width:18ch} .bleads{font-size:var(--t-xl);line-height:1.35;color:var(--prose); margin:10px 0 0;max-width:34ch;font-weight:500} .bstand{font-size:var(--t-m);line-height:1.6;color:var(--prose); max-width:56ch;margin:16px 0 0} .bleadtop{display:flex;align-items:baseline;gap:10px;margin-bottom:10px} .bleadtop .blabel{margin-bottom:0} .bleadtop .blabel:before{content:'';display:inline-block;width:7px;height:7px; background:var(--accent);margin-right:8px;vertical-align:middle} .bleadtop .bfix{font-size:var(--t-xxs);letter-spacing:.16em; text-transform:uppercase;color:var(--dim2);font-weight:700} /* The two men the lead turns on. The first is the one being argued FOR. */ .bbars{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px} .bbarn{font-size:var(--t-s);font-weight:700} .bbar.lead .bbarn{color:var(--dataline)} .bbarv{font-size:var(--t-5xl);line-height:1;font-weight:700;letter-spacing:-.04em; margin-top:6px;font-variant-numeric:tabular-nums} .bbar.lead .bbarv{color:var(--dataline)} .bbarv i{font-style:normal;font-size:var(--t-l);letter-spacing:0} .bbart{height:7px;background:var(--panel2);margin-top:12px;position:relative} .bbart span{display:block;height:100%;background:var(--prose)} .bbar.lead .bbart span{background:var(--dataline)} .bbarc{grid-column:1 / -1;font-size:var(--t-xs);color:var(--dim2);margin:0} /* The squad in four counts. */ /* A strip, from the comp: four figures in a line between two rules. */ /* Roster health: the counts strip, named, with a way into the page that goes deeper. Four bare figures between the call and the notebook read as decoration; "0 out" is only a finding once something says what it is counting. */ /* The swing read, as a takeaway on the Brief. The working -- twelve clubs, sortable -- stays on the Gameweek plan. */ /* THE FIXTURE and LOOK FURTHER AHEAD: the same shape at two horizons, so they read as a pair rather than as two unrelated blocks. The accent rule marks the immediate one; the horizon one takes the quieter line. */ .bopen{margin:0 0 26px;padding:18px 0 0;border-top:1px solid var(--line)} .bopen-now{border-top:2px solid var(--accent)} .bopen .bsechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .bopen .bsechr{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase; color:var(--dim);font-weight:400} .bopen .bopenh{font-size:var(--t-2xl);line-height:1.15;letter-spacing:-.015em; margin:10px 0 8px;max-width:26ch;text-wrap:balance} .bopen .bopenp{font-size:var(--t-m);line-height:1.6;margin:0 0 12px;max-width:68ch} .bopen .bopenwhyp{font-size:var(--t-m);line-height:1.6;color:var(--prose); margin:0 0 12px;max-width:68ch} .bopen .bopenag{font-size:var(--t-s);line-height:18px;color:var(--dim); margin:0 0 12px;max-width:68ch} .bopen .bacts{margin-top:14px} @media(max-width:640px){ .bopen .bopenh{font-size:var(--t-xl)} } .bswing{margin:0 0 26px;padding:18px 0 0;border-top:1px solid var(--line)} .bswing .bsechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .bswing .bsechr{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase; color:var(--dim);font-weight:400} .bswing .bswinglead{font-size:var(--t-l);line-height:1.45;margin:10px 0 8px;max-width:64ch} .bswing .bswingp{font-size:var(--t-m);line-height:1.6;color:var(--prose); margin:0 0 8px;max-width:68ch} .bswing .btn{margin-top:10px} .bhealth{margin:0 0 26px} .bhealth .bsechead{display:flex;align-items:baseline;justify-content:space-between; gap:12px} .bhealth .bsechr{font-size:var(--t-xs);letter-spacing:.06em; text-transform:uppercase;color:var(--dim);font-weight:400} .bhealth .bhealthn{font-size:var(--t-s);line-height:18px;color:var(--dim); margin:10px 0 0;max-width:70ch} .bhealth .btn{margin-top:12px} .bcounts{display:flex;gap:22px;flex-wrap:wrap;margin:27px 0 0;padding:15px 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line); font-size:var(--t-xs);color:var(--dim)} .bcounts div{display:flex;align-items:baseline;gap:5px} .bcounts b{font-size:var(--t-xl);line-height:1;font-weight:700;color:var(--text); font-variant-numeric:tabular-nums} .bcounts .pos b{color:var(--pos)} .bcounts .neg b{color:var(--neg)} .bcounts .warn b{color:var(--warn)} /* The satellites, as a row under the lead and the call. */ .bsats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px; margin-top:26px;padding-top:20px;border-top:1px solid var(--line)} .bsats.two{grid-template-columns:repeat(2,minmax(0,1fr))} .bsats .bcard{padding:0;border-bottom:none} /* A step below the wide story under the rule, which is the loudest thing in the lower half of the page. Level with it, the page had two second-places and no second. */ .bsats .bch{font-size:var(--t-l);line-height:1.25;letter-spacing:-.01em; max-width:22ch} /* Sits ON its rule, not adrift below it. The rule and the heading are one object: a section break and its name. */ .bsechead.notebook{display:flex;justify-content:space-between;align-items:baseline; font-size:var(--t-3xl);letter-spacing:-.02em;text-transform:none; color:var(--text);font-weight:700;margin:0 0 20px;padding-top:20px} .bsechead.notebook span{font-size:var(--t-xxs);letter-spacing:.16em; text-transform:uppercase;color:var(--dim2);font-weight:700} /* The call sits INSIDE the lead, under a rule -- a second section of the same story rather than a box of its own, because the transfer only means anything in the context of the week above it. */ /* The call is now a panel of its own beside the lead, headed by the accent rule that says this is the part you act on. */ /* Mint, from the comp: the call is printed on the paper's own colour, the one panel on the page that is not the page. */ .bcall{background:var(--board);color:var(--boardink); border-top:4px solid var(--accent);border-radius:0;padding:24px} .bcall .blabel,.bcall .bcalls,.bcall .bcallxi,.bcall .bgain span, .bcall .bdriver,.bcall .bev,.bcall .bcostl{color:var(--boardink)} .bcall .blabel{opacity:.75} .bcall .bgain b{color:var(--boardink)} .bcall .bacts .btn{border-color:var(--boardink);color:var(--boardink); background:transparent} .bcall .pn,.bcall .bcallh{color:var(--boardink)} .bcall .bacts .btn.pri{background:var(--boardink);color:var(--board)} .bcall .bev{border-top:1px solid color-mix(in srgb,var(--boardink) 40%,transparent)} .bgain{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 4px} .bgain b{display:block;font-size:var(--t-4xl);line-height:1;font-weight:700; color:var(--accent);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .bgain span{display:block;margin-top:6px;font-size:var(--t-xs);color:var(--dim); line-height:1.35} .bconf{margin-top:14px;font-size:var(--t-xxs);letter-spacing:.16em; text-transform:uppercase;font-weight:700;color:var(--warn)} .bconf:before{content:'◆ '} .bconf.high{color:var(--pos)} .bconf.low{color:var(--neg)} .bcallxi{font-size:var(--t-s);color:var(--prose);margin:10px 0 0} .bcall.hold .blabel{color:var(--dim)} .bcallh{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em; line-height:1.15;max-width:22ch} .bcalls{font-size:var(--t-m);line-height:1.55;color:var(--prose); margin:8px 0 0;max-width:56ch} .bcallm{margin-top:10px;font-size:var(--t-xxs);letter-spacing:.1em; text-transform:uppercase;color:var(--dim2)} .bacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .bacts .btn{min-height:34px} /* Satellites. Deliberately smaller than the lead at every level -- label, headline, body -- so the page has one focus rather than four. */ .bside{display:flex;flex-direction:column;gap:0} .bcard{padding:14px 0;border-bottom:1px solid var(--line)} .bcard:first-child{padding-top:0} .bcard:last-child{border-bottom:none} .bcard.open{cursor:pointer} .bcard.open:hover .bch{color:var(--accent)} .bch{font-size:var(--t-m);font-weight:600;line-height:1.3;max-width:34ch} .bcb{font-size:var(--t-s);line-height:1.5;color:var(--text); margin:5px 0 0;max-width:44ch} /* Was --dim2, which on this ground reads as switched off rather than quiet. The evidence should be subordinate to the editorial copy, not invisible beside it. */ .bcm{font-size:var(--t-xs);color:var(--dim);margin-top:5px;font-style:italic} /* A satellite's own figures, where it has them. */ .bcfig{display:flex;gap:24px;margin:12px 0 2px} .bcfig b{display:block;font-size:var(--t-2xl);line-height:1;font-weight:700; letter-spacing:-.02em;font-variant-numeric:tabular-nums} .bcfig b.pos{color:var(--pos)} .bcfig b.neg{color:var(--neg)} .bcfig span{display:block;margin-top:5px;font-size:var(--t-xxs); letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);font-weight:700} .brule{border-top:2px solid var(--dim);margin:29px 0 0} /* BELOW THE FOLD: hierarchy, not a grid. Four equal columns is a dashboard however the cards are labelled -- nothing is more important than anything else, so the eye has nowhere to start. One story runs wide; the rest are notes beside it. */ .bbelow{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:30px;padding-top:20px;align-items:start} .bbelow.solo{grid-template-columns:minmax(0,1fr)} .bbelow.solo .bcard.big{max-width:none} .bminor{display:flex;flex-direction:column;gap:0; border-left:1px solid var(--line);padding-left:22px} .bminor .bcard{padding:12px 0;border-bottom:1px solid var(--line)} .bminor .bcard:first-child{padding-top:0} .bminor .bcard:last-child{border-bottom:none} /* A card given the room to be a story rather than a note. */ .bcard.big .bch{font-size:var(--t-xl);max-width:24ch;letter-spacing:-.01em} .bcard.big .bcb{font-size:var(--t-m);max-width:52ch;margin-top:7px} .brisers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 30px;padding-top:0} /* Three or four wrap to a second row, and a row of four at this measure would give each card about nineteen characters of headline. Two across stays two across; the rule below just stops the rows running into each other once there is more than one of them. */ .brisers .bcard{border-bottom:none} .brisers:not(.solo) .bcard{padding-bottom:4px} /* One riser reads as the story it is: label, headline, evidence, in that order down the page, exactly like every other note. It used to be a two-column grid -- the headline down the left, its evidence floating top-right -- which at a wide measure left a five-line headline beside a two-line paragraph and a lot of nothing under both. The same card, given the width, is the whole fix. */ .brisers.solo{grid-template-columns:minmax(0,1fr)} .brisers.solo .bcard{max-width:none} .brisers.solo .bch{max-width:34ch} .brisers.solo .bcb{max-width:72ch} /* One riser, running the width of the page instead of sitting in a four-column grid with three empty columns beside it. A short week is a real answer and should look composed; three blank columns look like something failed to load. Two columns rather than one so the headline and its evidence stay in the same relationship they have on every other card, which is what stops this reading as a different component. */ /* THE WHAT-IF BAR. Amber, because it is the one state on the page where what you are looking at is not true yet. It says so in words as well: a colour alone is a convention somebody has to have learned. */ .wibar{display:flex;align-items:center;gap:14px;flex-wrap:wrap; scroll-margin-top:calc(var(--topbar-h,52px) + 10px); background:var(--warndim);border:1px solid var(--warnline); border-radius:var(--r);padding:11px 14px;margin-bottom:14px; font-size:var(--t-s)} .wibar b{color:var(--warn)} .wibar .lnk,.wibar .btn{margin-left:auto} .wibar.plan{margin-bottom:16px;align-items:flex-start} /* Not affordable, or not legal. Red rather than amber: amber is "this is not true yet", red is "this cannot happen". */ .wibar.bad{background:var(--negdim);border-color:var(--negline)} .wibar.bad b{color:var(--neg)} .wimsg{flex:1 1 340px;min-width:0} .wifigs{display:flex;gap:20px;flex:none} .wifig b{display:block;font-variant-numeric:tabular-nums;font-size:var(--t-l); font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)} .wifig.bad b{color:var(--neg)} .wifig span{display:block;font-size:var(--t-xxs);color:var(--dim); margin-top:2px;max-width:16ch} .wift{display:flex;flex-direction:column;gap:4px;flex:none;max-width:26ch} .wift label{font-size:var(--t-xxs);letter-spacing:.1em; text-transform:uppercase;color:var(--dim2)} .wift .seg button{min-width:30px} .wift span{font-size:var(--t-micro);line-height:1.4} @media(max-width:900px){ .wibar.plan{flex-direction:column} .wibar.plan .wimsg{flex-basis:auto} .wibar .lnk,.wibar .btn{margin-left:0} } /* A queued cell on the waiver board. */ .matrix td.c.planned{outline:2px solid var(--warn);outline-offset:-2px; font-weight:600} .matrix td.c{cursor:pointer} .matrix td.c:hover{outline:1px solid var(--line3);outline-offset:-1px} /* Paging a table, not opening a drawer over it. */ .tpage{display:flex;align-items:center;gap:12px;margin-top:10px; font-size:var(--t-xs)} .tpage .btn{min-height:30px;padding:5px 11px} .tpage .btn[disabled]{opacity:.4;cursor:default} /* League movement. Level is a fact and gets a mark of its own; the colour agrees with the arrow so neither has to be read alone. */ .mv{color:var(--dim2)} .mv.pos{color:var(--pos)} .mv.neg{color:var(--neg)} /* THE COLUMN'S FURNITURE. A headline, a standfirst and a byline with a face on it. The report is the shareable object, so it is given the space and the hierarchy of one -- and the hierarchy is what was missing, not the words. */ /* The headline ran two steps below the figures on every other page in the app, so the one piece of writing anybody shares looked like a caption on its own column. It now opens at display-adjacent size, the standfirst carries the weight a standfirst has in print, and a rule closes the furniture before the body starts. Sizes come off the existing scale. */ .rhead{font-size:var(--t-5xl);font-weight:700;letter-spacing:-.03em; line-height:1.03;margin:0 0 14px;max-width:18ch;text-wrap:balance} .rstand{font-size:var(--t-xl);line-height:1.45;color:var(--prose); margin:0 0 20px;max-width:44ch;padding-bottom:20px; border-bottom:1px solid var(--line)} .byline{display:flex;align-items:center;gap:12px;padding-bottom:16px; border-bottom:1px solid var(--line);margin-bottom:20px; font-size:var(--t-xs);color:var(--dim)} .byline b{color:var(--text);font-size:var(--t-s);font-weight:600} /* The whole byline is the link, so the target is the size of the thing it looks like rather than a 44px circle somebody has to aim at. */ .regby{display:flex;align-items:center;gap:12px;text-decoration:none; color:inherit;border-radius:var(--r);padding:2px;margin:-2px} .regby:hover b{color:var(--accent)} .regby:hover .regmug{border-color:var(--accentline)} .regby:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .regmug{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none; border:1px solid var(--line2);background:var(--panel2)} /* Initials until the photograph is in place: a byline with a hole in it is worse than one without a picture. */ .regmug.ini{display:flex;align-items:center;justify-content:center; font-variant-numeric:tabular-nums;font-size:var(--t-s);color:var(--dim2); letter-spacing:.06em} @media(max-width:900px){ .rhead{font-size:var(--t-4xl)} } @media(max-width:640px){ .rhead{font-size:var(--t-3xl);max-width:none} .rstand{font-size:var(--t-l);max-width:none} .report p{font-size:var(--t-m);line-height:1.65} } /* The Scout's figures. The same idea as the pull quote on The Brief and deliberately smaller: this is a strip of supporting arithmetic under a standfirst, not the object of the page. */ .scfigs{display:flex;flex-wrap:wrap;gap:26px;margin:0 0 18px; padding-bottom:16px;border-bottom:1px solid var(--line)} .scfigs b{display:block;font-variant-numeric:tabular-nums;font-size:var(--t-2xl); font-weight:600;letter-spacing:-.03em;color:var(--accent); font-variant-numeric:tabular-nums;line-height:1} .scfigs span{display:block;font-size:var(--t-xs);color:var(--dim); margin-top:4px;max-width:22ch} /* THE WIRE, beside the call. Warning furniture, so it is the one place on this page allowed a fill -- a sentence that might stop you acting has to be separable from the ones explaining why you should. Amber where the doubt is about the man coming IN, because that is the case against the move; quiet where it is about the man going out, because that only agrees with what the call already said, and colouring agreement as alarm is how a page teaches you to ignore its colours. */ .bwire{margin-top:14px;display:flex;flex-direction:column;gap:8px} .bwirei{border-left:2px solid var(--line3);padding:8px 0 8px 12px} /* "CHECK BEFORE YOU CLAIM" IS THE SAME KIND OF THING AS "THE CASE FOR CLAIMING", so it is the same box: Luis asked for the dark treatment here rather than the warn wash, which on the mint board came out as a muddy olive with amber on it at 1.30:1. Ten pixels of rule, same as the callout it now matches. */ .bwirei.against{border-left:10px solid var(--caseline);background:var(--casebg); padding:12px 14px;border-radius:0 var(--r) var(--r) 0} .bwirei.against .blabel{color:var(--caseink)} /* THE BOX IS DARK IN BOTH THEMES, so everything printed on it takes the callout's inks rather than the page's -- the same argument as the mint board, the other way up. Without this the body text inside it is the Light theme's near-black on a near-black ground. */ .reason,.bwirei.against{ --text:var(--casetext); --prose:var(--casetext); --dim:color-mix(in srgb,var(--casetext) 82%,var(--casebg)); --dim2:color-mix(in srgb,var(--casetext) 82%,var(--casebg)); --accent:var(--caseaccent); --pos:var(--caseaccent); } .bwireh{font-size:var(--t-s);line-height:1.45;color:var(--text);margin:4px 0 0; max-width:60ch} .bwirem{font-size:var(--t-xs);color:var(--dim);margin-top:4px} .bwiren{font-size:var(--t-xxs);color:var(--dim2);letter-spacing:.06em; max-width:64ch} /* THE COST, and the four figures a classic transfer turns on. Inside the call, under a rule of its own: it is not a separate story, it is the price of the one the call just made. Draft never draws this -- there is no money in Draft, and the constraint is other managers. */ .bcost{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .bcostl{font-size:var(--t-s);line-height:1.55;color:var(--prose); margin:6px 0 0;max-width:60ch} /* Compact on purpose. These are the arithmetic of ONE decision, so they sit together in a strip rather than pretending to be four subjects on four cards. */ .bmoney{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; margin-top:14px} .bmoney > div{border-left:1px solid var(--line);padding-left:10px} .bmoney b{display:block;font-variant-numeric:tabular-nums;font-size:var(--t-l); font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .bmoney span{display:block;font-size:var(--t-xxs);color:var(--dim); line-height:1.35;margin-top:3px} /* YOUR ALTERNATIVES. Three ways through one week, side by side, so the trade between them is a glance rather than a paragraph. */ .broutes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px;padding-top:14px} .broute{border-left:1px solid var(--line);padding-left:18px} .broute:first-child{border-left:none;padding-left:0} .broute.open{cursor:pointer} .broute.open:hover .bch{color:var(--accent)} .broutem{margin-top:8px;font-variant-numeric:tabular-nums;font-size:var(--t-xxs); color:var(--dim);font-variant-numeric:tabular-nums} /* THE NUMBER TO KNOW. A pull quote, set the way a magazine sets one: it does NOT get a band of its own across the page. It takes the column beside the story below the rule -- the column the minor notes would have filled -- separated by the same hairline the notes use. That is the whole reason it exists: a short week leaves that column empty, and an empty column is what made the lower half look unfinished. Two weights and no third. The numeral is the page's own text colour and the unit beside it is the accent, which is the only accent spent below the rule. No box, no fill, no second ground -- the rule and the space do the separating, as they do everywhere else in this stylesheet. No serif, and this is a decision rather than an omission: the app ships no webfonts and fetches none, because a face from somebody else's CDN is a dependency, a tracker and a render-blocking request. The editorial register comes from the italic and the measure instead. */ .bfigure{border-left:1px solid var(--line);padding-left:30px; align-self:stretch;display:flex;flex-direction:column;justify-content:center} /* The label sits ABOVE the figure, as a kicker does. It was dropped in the first rebuild and the block lost the one line that says what kind of thing it is -- a number with no name over it is a number somebody left on the page. */ .bfigure .blabel{margin-bottom:6px} /* Big, and tightly set. A pull quote that is merely larger than the body reads as an emphasis; one that is three or four times it reads as a different KIND of element, which is the whole effect being borrowed. */ .bfignum{font-size:clamp(64px,7.5vw,104px);font-weight:600; letter-spacing:-.055em;line-height:.85;color:var(--text); font-variant-numeric:tabular-nums} /* The unit and the sign, in the accent. Two weights and no third. */ .bfignum i{font-style:normal;color:var(--accent);letter-spacing:-.02em} .bfigsay{font-family:var(--serif);font-size:var(--t-l);line-height:1.45; color:var(--prose);max-width:30ch;margin:16px 0 0; letter-spacing:.005em} .bfigsrc{font-size:var(--t-xxs);letter-spacing:.14em;text-transform:uppercase; color:var(--dim2);margin-top:12px} @media(max-width:900px){ .bgrid{grid-template-columns:1fr;gap:22px} /* Satellites become a row of stories under the lead rather than a column beside it; the lead keeps its size, because it is still the story. */ .bside{border-top:1px solid var(--line2);padding-top:16px} /* The wide story and its notes stack. The hierarchy survives the stack because it is carried by type size, not only by column width. */ .bbelow{grid-template-columns:minmax(0,1fr);gap:0} .bminor{border-left:none;padding-left:0;border-top:1px solid var(--line); margin-top:14px;padding-top:14px} .brisers{grid-template-columns:minmax(0,1fr);gap:0} .brisers .bcard{border-bottom:1px solid var(--line);padding:14px 0} .brisers .bcard:last-child{border-bottom:none} /* The side-by-side riser stacks; every child goes back to one column rather than keeping the explicit rows it was given above. */ .brisers.solo .bcard{display:block} .brisers.solo .bcard > *{max-width:none} } @media(max-width:640px){ .bmastt{font-size:var(--t-4xl)} .bmastgw b{font-size:var(--t-2xl)} .bbars{grid-template-columns:1fr 1fr;gap:16px} .bbarv{font-size:var(--t-4xl)} .bcounts{grid-template-columns:1fr 1fr;gap:14px} .bsats,.bsats.two{grid-template-columns:1fr;gap:20px} .bsats .bcard{border-bottom:1px solid var(--line);padding-bottom:16px} .bsats .bcard:last-child{border-bottom:none} .bgain{grid-template-columns:1fr 1fr;gap:12px} .bgain b{font-size:var(--t-3xl)} .bsechead.notebook{font-size:var(--t-2xl);flex-wrap:wrap;gap:6px} .blead .bleadh{font-size:var(--t-2xl);max-width:none} .bleads{font-size:var(--t-m);max-width:none} /* Stacked under the story rather than squeezed beside it: a pull quote that has to compete for width stops being one. */ .bfigure{border-left:none;padding-left:0;border-top:1px solid var(--line); margin-top:16px;padding-top:16px} .bfignum{font-size:var(--t-4xl,52px)} .bfigsay{max-width:none} /* Four money figures across a phone is four columns of two characters. Two by two keeps each one readable. */ .bmoney{grid-template-columns:repeat(2,minmax(0,1fr))} .broutes{grid-template-columns:minmax(0,1fr);gap:0} .broute{border-left:none;padding:14px 0 0; border-top:1px solid var(--line)} .broute:first-child{border-top:none;padding-top:0} .bcard.big .bch{font-size:var(--t-l);max-width:none} .bcard.big .bcb{max-width:none} } /* The model's own wording, kept but demoted. The primary copy is written from the numbers; this is where the mechanism lives for anyone who wants it, which is the difference between a briefing and a model explanation. */ .bev{margin-top:12px} .bev summary{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase; color:var(--dim2);cursor:pointer;list-style:none} .bev summary::-webkit-details-marker{display:none} .bev summary::before{content:'▸ ';color:var(--dim2)} .bev[open] summary::before{content:'▾ '} .bev summary:hover{color:var(--text)} .bev ul{margin:8px 0 0;padding-left:18px;max-width:62ch} .bev li{font-size:var(--t-s);line-height:1.5;color:var(--dim);margin-bottom:3px} /* A fixture marker. Typographic, because this app ships no images and a crest fetched from somebody else's CDN is a dependency and a tracker. The club codes are already on the row; set as a lined-up slug they give the lead the visual anchor a badge would, and they still read as football. */ .bfix{display:inline-block;font-variant-numeric:tabular-nums;font-size:var(--t-xxs); letter-spacing:.14em;color:var(--dim);border:1px solid var(--line2); border-radius:3px;padding:3px 7px;margin-bottom:10px} /* A second rule, lighter than the lead's, for the section under the row. */ .brule2{border-top:2px solid var(--dim);margin:29px 0 0} .bsechead{font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase; color:var(--accent);padding-top:16px} .bsechead + .brisers{padding-top:0} /* ============================================================== feedback The tester survey. Built out of the same panels and sections as the rest of the app on purpose: a form that arrives in a different visual language reads as somebody else's survey embedded in the product, and the answer rate is worse for it. Tap targets first. Nearly every answer here is a button, and the device this gets answered on is a phone -- so the options are a wrapping row of chips rather than a radio list, each one a whole line to itself below 640px. The floor on their height is the app's own: `.content button` in the 640px block already sets 36px for every control in the app and its specificity beats this file's, which is the right way round -- one rule decides how big a thing you tap is, everywhere. Nothing below sets a colour that is not a token, so the light theme is not a second design. */ .fbintro{font-size:var(--t-s);line-height:1.6;max-width:68ch;margin-bottom:6px} .fbblurb{font-size:var(--t-s);line-height:1.6;max-width:68ch;margin:0 0 10px} .fbtabs{margin-bottom:16px} .fbsec{padding:0} /* A question is a row of the panel, divided like a settings row -- the divider is what stops twenty-one questions reading as one wall. */ .fbq{padding:16px;border-bottom:1px solid var(--line)} .fbq:last-child{border-bottom:none} .fbask{font-size:var(--t-m);font-weight:600;line-height:1.45;max-width:62ch} .fbask .fbopt{font-variant-numeric:tabular-nums;font-size:var(--t-micro); letter-spacing:.1em;text-transform:uppercase;color:var(--dim2); border:1px solid var(--line2);border-radius:3px;padding:2px 5px; margin-left:8px;vertical-align:middle;font-weight:400} .fbhelp{font-size:var(--t-xs);line-height:1.55;max-width:62ch;margin-top:5px} .fbopts{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .fbchoice{padding:9px 13px;min-height:40px;text-align:left; border:1px solid var(--line2);border-radius:var(--r); background:var(--panel2);color:var(--dim);font-size:var(--t-s); line-height:1.35} .fbchoice:hover{color:var(--text);border-color:var(--line3)} .fbchoice.on{background:var(--accentdim);border-color:var(--accentline); color:var(--accent)} .fbscale{display:flex;align-items:center;gap:11px;margin-top:11px; flex-wrap:wrap} .fbscale .seg button{min-width:42px;min-height:40px} .fbend{font-size:var(--t-xs);max-width:18ch;line-height:1.35} .fbq textarea,.fbq input{margin-top:10px} .fbq textarea{width:100%;background:var(--panel2); border:1px solid var(--line2);border-radius:var(--r);padding:10px 12px; color:var(--text);font:inherit;line-height:1.6;outline:none;resize:vertical} .fbq textarea:focus,.fbq input:focus{border-color:var(--accent)} /* The question somebody was sent back to. A border, not a background flash: it has to survive being read for the twenty seconds it takes to answer. */ .fbq.fbwant{box-shadow:inset 3px 0 0 var(--accent)} .fbfoot{margin-top:18px;position:sticky;bottom:0} .fbfootrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .fbcount{font-variant-numeric:tabular-nums;font-size:var(--t-xs);margin-top:8px} .fbdone{display:flex;align-items:center;gap:9px;margin-bottom:11px; flex-wrap:wrap} .fbdone .dim2,.fbmiss{font-size:var(--t-s);line-height:1.55} .fbmiss{margin-top:12px;padding-top:11px;border-top:1px solid var(--line); max-width:68ch} .fbmisslist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .fberr{font-size:var(--t-s);margin-top:10px} /* Filed reports, mine or everybody's. One block per report rather than a table: `said` and `true` are sentences, and a sentence in a table cell is a sentence nobody reads. */ .fbfiled{padding:16px;border-top:1px solid var(--line)} .fbfiledhead{font-variant-numeric:tabular-nums;font-size:var(--t-xs);margin-bottom:9px} .fbrow{padding:10px 0;border-bottom:1px solid var(--line)} .fbrow:last-child{border-bottom:none} .fbrowtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-size:var(--t-s)} .fbsaid{font-size:var(--t-s);line-height:1.55;margin-top:4px;max-width:72ch} /* The cost, in the reporter's own words. A tinted pill carries it too, but a colour on its own is not a label -- and it is the field that decides what gets fixed first. */ .fbsev{font-size:var(--t-xs);margin-top:5px;font-style:italic} .fbctx{font-variant-numeric:tabular-nums;font-size:var(--t-xxs);margin-top:5px} /* The owner's read. */ .fbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:10px} .fbtile{padding:13px 14px} .fbtileask{font-size:var(--t-s);font-weight:600;line-height:1.45; margin-bottom:9px} .fbbar{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:3px 0;font-size:var(--t-s)} .fbbarlab{color:var(--dim);line-height:1.35} .fbquote{margin:10px 0 0;padding-left:11px;border-left:2px solid var(--accentline); font-size:var(--t-s);line-height:1.6;color:var(--prose);max-width:74ch; white-space:pre-line} .fbquote cite{display:block;font-style:normal;font-variant-numeric:tabular-nums; font-size:var(--t-xxs);margin-top:5px} @media (max-width:640px){ /* One option per line. Two half-width chips side by side put "Most days" and "Every day" on two lines each and made the row taller than the stacked version it was saving space over. */ .fbchoice{width:100%} .fbscale{gap:7px} .fbscale .seg{order:3;width:100%} .fbscale .seg button{flex:1} .fbend{max-width:none;flex:1 1 40%} .fbq{padding:14px} /* A sticky footer on a phone costs a third of the keyboard-shrunk viewport while somebody is typing an answer. */ .fbfoot{position:static} } /* ===================================================== match cards, from the comp (live-scores-events.html, 15 Sep 2026). One column; a score strip across the top with the leader in green and the trailer in orange, the score on mint between them; the goals and assists as a line of names, bonus as medals, DefCon in green with its threshold; the forecast bar at the foot. Written after the older card rules so it wins at equal specificity. */ .mgrid{grid-template-columns:1fr;gap:25px} .mcard{padding:0;border:0;border-radius:6px;overflow:hidden;background:var(--panel)} .mcard.live{border:0;box-shadow:inset 0 0 0 1px var(--posline)} .mcard.pinned{box-shadow:inset 0 0 0 1px var(--accent)} .mwhen{padding:12px 20px 0} .mhead.score{display:grid;grid-template-columns:1fr 105px 1fr;gap:0; align-items:stretch;min-height:76px;padding:0;border-bottom:0;position:relative} .mhead .mt.team{display:flex;align-items:center;gap:12px;padding:20px; font-size:var(--t-xl);font-weight:650;text-align:left} .mhead .mt.team.away{justify-content:flex-end;text-align:right} /* The fill is the same mint, green or orange in both themes, so the ink on it is fixed too. A theme-following ink put the score strip two shades off the comp in the dark. The FILLS were theme-following as well, which the comment above always said they were not: in Light they resolved to a dark green and a dark red, and the fixed dark ink on top read at 2.5:1. They are the comps' own literals now, the same either side of the theme. */ .mhead .mt.team.winner{background:var(--fillwin);color:var(--fillink)} /* The red is the owner's exact swatch and stays; the ink on it is what moves. The shared fill ink measures 3.74:1 on it in Dark, under the 4.5 a 14-18px name needs. The darkest ink in the palette is 4.87. */ .mhead .mt.team.loser{background:var(--filllose);color:var(--loseink)} .mhead .mt.team.level{background:var(--board);color:var(--fillink)} .mmid.result{display:flex;flex-direction:column;justify-content:center; align-items:center;background:var(--board);color:var(--fillink); min-width:0;padding:8px 4px} .mmid.result .ms{font-family:var(--sans);font-size:var(--t-4xl);font-weight:750; letter-spacing:-.02em;line-height:1} .mmid.result .ms .dim2{color:inherit;opacity:.6} .mmid.result .mv{font-family:var(--sans);font-size:var(--t-xl);font-weight:650; color:var(--text)} .mcard.upcoming .mmid.result{background:var(--panel2);color:var(--text)} .mmid.result .mst{margin-top:3px;font-size:var(--t-xxs);font-weight:550; letter-spacing:.1em;text-transform:uppercase} .mpin{top:6px;right:6px;z-index:1} .mbody{padding:18px 20px 12px} .mown{border-bottom:0;padding:0 0 14px;font-size:var(--t-s)} .ownlab{background:none;padding:0;font-size:var(--t-xxs);letter-spacing:.1em; font-weight:650} .ownlab.you{color:var(--accent)} .ownlab.opp{color:var(--dim)} /* live-scores-events.html: contributions are a two-column grid of groups, each group a heading and a column of rows. Goals and assists run across both columns as a wrapped line, because those read as a list of names rather than a ranking. */ .contributions{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px; margin:3px 0 23px;align-items:start} .eventgroup{min-width:0} .eventheading{display:flex;align-items:baseline;justify-content:space-between; gap:8px;padding:5px 0 9px;border-bottom:1px solid var(--line)} .eventheading h2{font-size:var(--t-s);font-weight:650;margin:0;line-height:1.4; letter-spacing:0;text-transform:none;color:var(--text)} .eventheading>span{font-size:var(--t-xs);color:var(--dim);line-height:1.4} .eventrow{display:flex;justify-content:space-between;align-items:center;gap:10px; min-height:33px;border-bottom:1px solid var(--line);font-size:var(--t-s); line-height:1.4} .eventrow:last-child{border-bottom:0} .eventrow .player{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0} .eventrow .value{font-size:var(--t-s);font-weight:550; font-variant-numeric:tabular-nums;white-space:nowrap} .eventrow .owner{font-size:var(--t-xxs);color:var(--accent);text-transform:uppercase; letter-spacing:.5px} /* --board as TEXT is a Dark-only idea: on Light's white it is 1.52:1, a label nobody can see. The token flips; the rule does not. */ .eventrow .owner.opponent{color:var(--oppink)} .eventgroup[data-kind="goals_scored"],.eventgroup[data-kind="assists"]{grid-column:1/-1} .eventgroup[data-kind="goals_scored"] .eventheading, .eventgroup[data-kind="assists"] .eventheading{border:0;padding:0 0 8px} .eventgroup[data-kind="goals_scored"] .eventheading h2, .eventgroup[data-kind="assists"] .eventheading h2{font-size:var(--t-xs); text-transform:uppercase;letter-spacing:1.3px;color:var(--dim);font-weight:650} .eventgroup[data-kind="goals_scored"] .eventrows, .eventgroup[data-kind="assists"] .eventrows{display:flex;flex-wrap:wrap;gap:8px 22px} .eventgroup[data-kind="goals_scored"] .eventrow, .eventgroup[data-kind="assists"] .eventrow{border:0;justify-content:flex-start; gap:7px;min-height:25px;font-size:var(--t-17);font-weight:600} .eventgroup[data-kind="goals_scored"] .value, .eventgroup[data-kind="assists"] .value{font-size:var(--t-xs);color:var(--dim); align-self:flex-start;padding-top:2px;font-weight:400} /* Bonus reads medal first: on a bonus list the medal is the ranking. */ .eventgroup[data-kind="bonus"] .eventrow{border:0;min-height:38px; flex-direction:row-reverse;justify-content:flex-end;gap:10px} .eventgroup[data-kind="bonus"] .value{width:25px;height:25px;border-radius:50%; display:grid;place-items:center;color:var(--medalink);font-weight:750; font-size:var(--t-s);flex-shrink:0} .eventgroup[data-kind="bonus"] .value[data-value="3"]{background:var(--medal3)} .eventgroup[data-kind="bonus"] .value[data-value="2"]{background:var(--medal2)} .eventgroup[data-kind="bonus"] .value[data-value="1"]{background:var(--medal1)} .eventgroup[data-kind="defensive_contribution"] .value{color:var(--pos)} .eventgroup[data-kind="defensive_contribution"] .eventheading h2{color:var(--pos)} .eventgroup[data-kind="defensive_contribution"] .value:before{content:'\2713'; margin-right:6px;font-size:var(--t-xs)} .listdetail{margin-top:10px} .listdetail summary{min-height:44px;padding:10px 0;font-size:var(--t-xs); color:var(--dim);cursor:pointer} .detailtable{width:100%;border-collapse:collapse;font-size:var(--t-xs); color:var(--text)} .detailtable th{text-align:left;font-weight:500;color:var(--dim); font-size:var(--t-xxs);padding:8px 0;border:0;background:none; text-transform:none;letter-spacing:0} .detailtable td{padding:8px 0;border:0;border-top:1px solid var(--line); background:none;font-size:var(--t-xs)} .detailtable th:first-child,.detailtable td:first-child{text-align:left} .detailtable th:not(:first-child),.detailtable td:not(:first-child){ text-align:right;font-variant-numeric:tabular-nums} .detailnote{font-size:var(--t-xxs);color:var(--dim);line-height:1.5;margin-top:8px} .bpsgap{color:var(--dim)} .bpsgap.tight{color:var(--accent)} .odds.forecast{border-top:1px solid var(--line);padding-top:15px;margin-top:4px} .olabel{font-size:var(--t-xxs);letter-spacing:.1em;text-transform:uppercase; color:var(--dim);margin-bottom:8px} .odds .obar{display:flex;height:7px;gap:0;background:var(--panel2)} .odds .obar .oh{background:var(--dataline)} .odds .obar .od{background:var(--line2)} .odds .obar .oa{background:var(--pos)} .odds .orow{display:flex;justify-content:space-between;font-size:var(--t-xs); color:var(--prose);margin-top:7px} .odds .orow span:first-child b{color:var(--accent)} .odds .orow span:last-child b{color:var(--pos)} .odds .onote{font-size:var(--t-xs);margin-top:6px} .mmore{width:auto;background:none;border:0;padding:8px 0;color:var(--dim); font-size:var(--t-xs);text-align:left} .mmore:before{content:'\25B8 '} .mmore:hover{color:var(--accent)} @media(max-width:640px){ .mhead.score{grid-template-columns:1fr 76px 1fr;min-height:68px} .mhead .mt.team{font-size:var(--t-m);padding:15px 10px} .mmid.result .ms{font-size:var(--t-3xl)} .mbody{padding:14px} .mchips{gap:6px 16px} } /* ================================================== the system layer, from proposed-pages/system.css (15 Sep 2026). The comps apply these on top of every page with !important, so they are what the approved pages actually measure. Reproduced verbatim, last in the sheet so they win at equal specificity: the page title, the eyebrow, the sidebar row, the topbar, the main padding, and the table type. */ h1.display{font-size:var(--t-5xl);line-height:1.1;font-weight:700; letter-spacing:-1.5px} .eyebrow,.blabel,.hqlabel,.mpl,.kicker,.olabel,.mskick, .radar-lead .label,.bsechead:not(.notebook){font-size:var(--t-xs);line-height:17px; letter-spacing:1.3px;font-weight:400;text-transform:uppercase} .eyebrow.reg,.hqlabel.reg{color:var(--accent)} .side{padding:0} .brand{padding:26px 18px 18px} .nav{padding:0 7px 26px 18px;scrollbar-color:var(--line2) transparent} .nav button,.nav button.sub{min-height:40px;font-size:var(--t-13);line-height:20px; font-weight:400;padding-top:0;padding-bottom:0} .nav .navgrp{font-size:var(--t-xs);line-height:17px;letter-spacing:1.3px;font-weight:400; padding-left:0} .nav button{padding-left:0;padding-right:0} .nav button.sub{padding-left:28px;font-size:var(--t-s)} .topbar{min-height:78px;padding:16px 26px;gap:16px;font-size:var(--t-s);line-height:20px} .content{padding:26px} table{font-variant-numeric:tabular-nums} table th,table td,table th.num,table td.num{text-align:center;vertical-align:middle; line-height:20px} /* THE FIRST COLUMN NAMES THE ROW AND READS FROM THE LEFT (Luis, 18 Sep). Everything else is centred -- a column of figures is read down, so the digits want to line up under each other -- but the name is a name, and centring it leaves every row starting in a different place. */ table th:first-child,table td:first-child, table th.num:first-child,table td.num:first-child{text-align:left} table th{font-size:var(--t-xs);font-weight:400;letter-spacing:1px} table td{font-size:var(--t-s)} /* The comp's rows breathe: 48px with 12px either side. Components that set their own denser padding (the ownership matrix, the ticker) keep it. */ table th,table td{padding:12px 10px} table tbody td{height:48px} @media(max-width:640px){ .content{padding:20px 16px} h1.display{font-size:var(--t-32);line-height:1.1} .topbar{padding:14px 16px;gap:10px;flex-wrap:wrap} } /* ------------------------------------------------ Your eleven, measured against proposed-pages/your-eleven-studio.html at 1440 (15 Sep 2026). Values are the comp's, not the nearest token. */ .content{max-width:1250px;margin:0 auto} .pagehead{margin:0} .pagehead .heading{margin:5px 0 10px} .pagehead .week{font-size:var(--t-xs);line-height:16.5px;letter-spacing:0;text-transform:none} .pagehead .week strong{font-size:var(--t-3xl);line-height:1.2;font-weight:700;letter-spacing:0} .inbox.notice{background:var(--noticebg);padding:5px 10px;margin:0 0 14px; font-size:var(--t-s);line-height:18px;gap:10px} .inbox.notice .inboxhead{font-size:var(--t-s);line-height:18px;margin-bottom:0} .inbox.notice .inboxrow{font-size:var(--t-s);line-height:18px;padding:5px 0;border-top:0} .inbox.notice .inboxtext{font-size:var(--t-s);line-height:18px;color:var(--text)} .inbox.notice .lnk,.inbox.notice #readall{color:var(--dim);font-size:var(--t-xs);line-height:16.5px; text-decoration:none;padding:1px 6px;min-height:32px;border-radius:999px} /* Keep the signal wash inside the notice's inset. The generic gone row uses a negative margin to bleed through card padding; here that pulled its badge against the green rule while the other rows remained inset. Descriptions begin under the player's name, so all three rows share one reading edge. */ .inbox.notice .inboxrow.gone{margin:0;padding-left:0;padding-right:0} @media(min-width:641px){ .inbox.notice .inboxtext{grid-column:2 / -1} } .hqgrid{grid-template-columns:minmax(0,1fr) 185px;gap:23px} .planbar.pitchbar{margin:0;padding:0 0 12px;gap:8px} .pitchbar .formation{font-size:var(--t-m);line-height:21px;letter-spacing:3px} .viewtab{font-size:var(--t-xs);line-height:16.5px;padding:7px 2px;border-radius:999px} .kitpitch{padding:56px 8px 8px;border-radius:6px} .kitrows{gap:1px} .kitrow{display:flex;justify-content:space-around;gap:2px;width:100%;margin:0} .pcard.kitcard{flex:1;max-width:130px;padding:2px 0;border-radius:5px} .kitcard .kitwrap{width:38px;height:43px;margin:0 auto 2px} .kitcard .kn{font-size:var(--t-xs);line-height:13.75px;font-weight:600} .kitcard .kfx{display:inline;font-size:var(--t-xxs);line-height:15px;margin:2px 0 0;color:var(--dim)} .kitcard .kpr{display:inline;font-size:var(--t-13);line-height:16.9px;font-weight:650;margin-left:6px} .hint{font-size:var(--t-xs);line-height:16.5px;color:var(--dim);margin:7px 0 0} .benchhead{margin:12px 0 6px;gap:12px} .benchhead h2{font-size:var(--t-17);line-height:25.5px;font-weight:700} .benchhead span{font-size:var(--t-xxs);line-height:15px;letter-spacing:0;text-transform:none} .kitbench{padding:6px 0;gap:6px} .kitbench .kitcard{padding:2px 0} .kitbench .kitwrap{width:38px;height:33px;margin:4px auto 2px} .kitbench .kord{font-size:var(--t-micro);line-height:13.5px;margin-bottom:0} .kitbench .kitcard .kn{font-size:var(--t-xs)} .kitbench .kitcard .kfx{display:inline} .kitbench .kitcard .kpr{display:inline;font-size:var(--t-13);margin-left:5px} .planacts{margin-top:10px;gap:15px} .btn.pri{font-size:var(--t-s);line-height:18px;font-weight:650;padding:10px 18px} .planacts .dim2{font-size:var(--t-xs);line-height:16.5px} .hqproj{padding:18px;margin-bottom:22px} .hqproj .hqbig{font-size:var(--t-44);line-height:1.2;letter-spacing:-2px;font-weight:700;margin:8px 0} .hqproj .hqsub{font-size:var(--t-xs);line-height:16.5px} .hqrail .hqsec{margin-top:0;padding-top:15px;border-top:1px solid var(--line)} .hqrail .hqproj{border-top:3px solid var(--pos);padding-top:18px} .hqregsec .eyebrow{color:var(--accent)} .hqreg{font-size:var(--t-xl);line-height:1.3;font-weight:600;letter-spacing:-.4px;margin:12px 0 18px} .hqsel{margin-top:20px;padding-top:14px;font-size:var(--t-s);line-height:18px;color:var(--dim); min-height:115px} .hqsel strong{font-size:var(--t-15);line-height:22.5px;font-weight:700;margin:7px 0;color:var(--text)} .hqsel .hqsub{font-size:var(--t-s);line-height:18px} /* The sidebar, to system.css and the comp. */ .brand .wordmark,.brand h1{font-size:var(--t-20);line-height:20px;font-weight:750;letter-spacing:-.7px} .brand .sub{font-size:var(--t-s);line-height:18px;margin:18px 0 35px;max-width:none} .nav .navgrp{font-size:var(--t-xxs);line-height:15px;letter-spacing:1.5px; margin:25px 0 8px;padding:0} .nav .navgrp:first-child{margin-top:0} .nav button{padding:10px 0;margin-bottom:0;font-weight:600} .nav button.sub{padding:10px 0 10px 28px;font-size:var(--t-s); font-weight:400} .nav button .ni{width:18px;height:18px;margin-right:10px} .nav button.sub .ni{width:14px;height:14px} /* The stadium banner and the goal, to shared/formation-banner.css. */ .kboard{position:absolute;top:8px;left:12%;right:12%;width:auto;height:48px; display:flex;align-items:center;grid-template-columns:none;border-radius:0; background:var(--board);color:var(--boardink);z-index:0;pointer-events:none; overflow:visible} .kbill{display:block;width:50%;height:100%;padding:0;overflow:visible} .kbill text{font-family:'Helvetica Neue',Arial,sans-serif;font-size:var(--t-32);font-weight:700; letter-spacing:0;fill:var(--boardink)} .kgoal{position:absolute;top:12px;left:43%;width:14%;height:52px;margin:0; box-sizing:border-box;border:1px solid var(--dim);border-bottom:0;opacity:1; background-color:rgba(16,21,16,.33); background-image:repeating-linear-gradient(0deg,transparent 0,transparent 5px, color-mix(in srgb,var(--dim) 45%,transparent) 5px 6px), repeating-linear-gradient(90deg,transparent 0,transparent 5px, color-mix(in srgb,var(--dim) 45%,transparent) 5px 6px); z-index:1;pointer-events:none} .kitrows,.pitch>.kitrow,.pitch>*:not(.kboard):not(.kgoal){position:relative;z-index:2} .pitch{padding-top:56px} .pitch>.kboard{top:8px;left:12%;right:12%;width:auto} /* Second measured pass on Your eleven (15 Sep 2026): the card is a block with inline fixture and points, as the comp's is, not a flex column; the bench card fills its cell; the save button carries no border; the sidebar is the comp's 174px. */ .pcard.kitcard{display:block;text-align:center} .kitcard .kitwrap{display:block} .kitcard .kn{display:block} .kitcard .kpr{margin:0 0 0 6px} .kitbench .kitcard{max-width:none;width:100%} .btn.pri{border:0} .hqrail .hqsel{margin-top:20px;padding-top:14px} .side{width:174px} @media(max-width:900px){.side{width:100%}} /* The phone, measured against mobile-pilot/page.html?view=your-eleven-studio at 390 (15 Sep 2026). The shell's own numbers, then the page's. The comp carries no topbar strip on a phone -- the header and the tabs are the chrome -- so the strip is gone here too. */ @media(max-width:640px){ .topbar{display:none} .plogo{font-size:var(--t-17);line-height:.94;font-weight:750;letter-spacing:-.65px} .pteam strong{font-size:var(--t-l);line-height:24px;font-weight:600} .pteam small{font-size:var(--t-13);line-height:1.3} .ptabs button{font-size:var(--t-13);line-height:18px;font-weight:500} .pnav{padding:12px 8px calc(14px + env(safe-area-inset-bottom,0px))} .pnav button{font-size:var(--t-xxs);line-height:14px;letter-spacing:.2px;gap:4px} .pagehead .heading{margin:5px 0 10px} .hqgrid{gap:15px} .kitpitch{padding:25px 8px 8px} .kboard{top:8px;height:17px} .kgoal{top:12px;height:21px} .kitrows{gap:7px} .kitcard .kn{font-size:var(--t-xxs);line-height:12.5px} .kitbench{grid-template-columns:repeat(4,minmax(0,1fr))} .hqrail{gap:16px;margin-top:0} .hqreg{font-size:var(--t-17);line-height:22.1px} .hqrail .hqsel{min-height:65px;padding-top:14px;margin-top:0} } /* Later base rules above re-opened the two columns on a phone; the comp's workspace is one column below 900 and the rail sits beneath the pitch. */ @media(max-width:900px){ .hqgrid{grid-template-columns:minmax(0,1fr)} .side{width:100%} } /* The comp's card carries no eye: the name is the way into the dossier. */ .kitcard .pinfo{display:none} .kitcard .kn{cursor:pointer} .kitcard .kn:hover{color:var(--accent)} @media(max-width:640px){.kitpitch{margin:0}} /* ------------------------------------------------- The Brief, measured against proposed-pages/brief-editorial.html at 1440 (15 Sep 2026). */ .bpage{max-width:1148px;margin:0 auto} .bmastr{gap:12px} .bmastt{font-size:var(--t-display);line-height:.95;font-weight:750; letter-spacing:-3px} .bmastgw{display:block;text-align:right;font-size:var(--t-xs);line-height:16.5px; color:var(--dim);gap:0} .bmastgw span{display:block;font-size:var(--t-xs);line-height:16.5px;letter-spacing:0; text-transform:none;font-weight:400;color:var(--dim);text-align:right} .bmastgw b{display:block;font-size:var(--t-5xl);line-height:38px;font-weight:700; letter-spacing:0;color:var(--text)} .bmastmeta{gap:12px} .bleadtop{margin-bottom:12px} .bleadtop .blabel{color:var(--accent)} .blead .bleadh{font-size:var(--t-5xl);line-height:1.08;font-weight:700;letter-spacing:-1.5px; max-width:480px} .bleads{font-size:var(--t-17);line-height:1.5;font-weight:400;color:var(--prose); margin:17px 0 24px;max-width:none} .bbars{display:block;margin:0} .bbar{display:grid;grid-template-columns:1fr auto;gap:8px;margin:15px 0; font-size:var(--t-s);line-height:18px} .bbarn{font-size:var(--t-s);font-weight:400;color:var(--text)} .bbar.lead .bbarn{color:var(--text)} .bbarv{font-size:var(--t-s);line-height:18px;font-weight:700;letter-spacing:0;color:var(--text)} .bbar.lead .bbarv{color:var(--text)} .bbarv i{font-size:var(--t-s)} .bbart{grid-column:1/-1;height:4px;margin:0;background:var(--panel2)} .bbart span{background:var(--board)} .bbar.lead .bbart span{background:var(--dataline)} .bbarc{font-size:var(--t-xs);line-height:16.5px;color:var(--dim);margin:0} .bcall .blabel{margin-bottom:12px} .bcallh{font-size:var(--t-29);line-height:1.08;font-weight:700;letter-spacing:-1px;max-width:none} .bcalls{font-size:var(--t-13);line-height:1.5;margin:14px 0 0} .bgain{display:flex;align-items:baseline;gap:18px;margin:20px 0 0;grid-template-columns:none} .bgain b{font-size:var(--t-57);line-height:1;letter-spacing:-3px;font-weight:700;color:var(--boardink)} .bgain span{font-size:var(--t-xs);line-height:1.5;max-width:110px;margin:0;display:block} .bfive{border-top:1px solid color-mix(in srgb,var(--boardink) 40%,transparent); margin-top:16px;padding-top:12px;font-size:var(--t-s);line-height:18px; display:flex;justify-content:space-between;gap:10px} .bfive strong{font-weight:700} .bcall .bev{margin-top:16px;padding-top:10px;font-size:var(--t-s);line-height:18px} .bcall .bev summary{font-size:var(--t-s);line-height:18px;font-weight:650;min-height:32px; text-transform:none;letter-spacing:0;color:var(--boardink);cursor:pointer} .bcall .bev li{font-size:var(--t-s);line-height:18px} .bcounts{margin:27px 0 32px;padding:15px 0;gap:22px;font-size:var(--t-xs);line-height:16.5px} .bcounts b{font-size:var(--t-17);line-height:25.5px;margin-right:4px} .bsechead.notebook{font-size:var(--t-25);line-height:1.5;letter-spacing:-.6px;font-weight:700; gap:15px;padding-top:20px;margin:0 0 20px} .bsechead.notebook span{font-size:var(--t-xs);line-height:17px;letter-spacing:1.3px; font-weight:400;color:var(--dim)} .brule,.brule2{border-top:2px solid var(--line2);margin:29px 0 0} .bsats,.bsats.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px; padding-top:0;margin-top:0;border-top:0} .bcard .blabel{color:var(--accent);margin-bottom:12px} .bsats .bch{font-size:var(--t-21);line-height:1.2;font-weight:700;letter-spacing:-.4px; margin:8px 0 13px;max-width:none} .bsats .bcb{font-size:var(--t-13);line-height:1.5;color:var(--prose);margin:0;max-width:none} .bbelow{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;padding-top:0} .bcard.big{padding-bottom:0;border-bottom:0} .bcard.big .bch{font-size:var(--t-2xl);line-height:1.2;font-weight:700;letter-spacing:0; margin:8px 0 14px;max-width:none} .bcard.big .bcb{font-size:var(--t-13);line-height:1.5;color:var(--prose);margin:0;max-width:none} .bminor .bcard{padding:0 0 0;border-bottom:0} .bminor .bcard+.bcard{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} .bminor .bch{font-size:var(--t-18);line-height:1.2;font-weight:700;margin:8px 0 14px;max-width:none} .bminor .bcb{font-size:var(--t-13);line-height:1.5;color:var(--prose)} .brisers{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 28px} .brisers .bcard{padding:0 0 20px;border-bottom:1px solid var(--line)} .brisers .bch{font-size:var(--t-18);line-height:1.5;font-weight:700;margin:7px 0;max-width:none} .brisers .bcb{font-size:var(--t-13);line-height:1.5;color:var(--prose);margin:0;max-width:none} @media(max-width:640px){ .bpage{max-width:none} .blead .bleadh{font-size:var(--t-35)} .bmastt{font-size:var(--t-52);line-height:.95} .bcall{padding:22px} .bcounts{gap:12px} } .bbarv{margin:0} .brisers .bcard.big .bch{font-size:var(--t-18);line-height:1.5;font-weight:700;margin:7px 0} .brisers .bcard.big .bcb{font-size:var(--t-13);line-height:1.5;margin:0} .brisers .bcard.big{padding:0 0 20px;border-bottom:1px solid var(--line)} /* The Brief's grids are one column on a phone; the measured desktop rules above re-opened them. */ @media(max-width:640px){ .bgrid,.bsats,.bsats.two,.bbelow,.brisers{grid-template-columns:1fr} } /* ------------------------------------------ Live scores and match cards, measured against proposed-pages/live-scores-events.html (15 Sep 2026). */ .toolbar{display:flex;gap:8px;flex-wrap:wrap;border:0;border-bottom:1px solid var(--line); border-radius:0;margin:22px 0 28px;background:none} .toolbar button{border:0;background:none;color:var(--dim);padding:11px 12px;min-height:44px; font-size:var(--t-s);line-height:1.45;border-bottom:2px solid transparent;border-radius:0} .toolbar button.on,.toolbar button[aria-pressed=true]{color:var(--accent); border-bottom-color:var(--accent);background:none} .toolbar button:hover{color:var(--text)} .mwhen{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-xs); line-height:1.45;color:var(--dim);letter-spacing:1px;margin:26px 0 12px;padding:0; text-transform:uppercase} .mwhen .live{color:var(--pos)} .mgrid{gap:0} .mcard{margin-bottom:25px} .mhead .mt.team{font-size:var(--t-18);line-height:1.45;font-weight:650} .mmid.result .ms{font-size:var(--t-4xl);line-height:1.45;font-weight:750;letter-spacing:-1px} .mmid.result .mst{font-size:var(--t-xxs);line-height:1.45;font-weight:550;letter-spacing:1px; margin-top:0} .mbody{padding:24px 20px 12px} .mown{gap:13px;padding:0 0 14px;font-size:var(--t-s)} .mown .ownlab,.mown .ownlab.you,.mown .ownlab.opp{background:none;padding:0; font-size:var(--t-xxs);font-weight:650;letter-spacing:1px} .mown .ownlab.you{color:var(--accent)} .mown .ownlab.opp{color:var(--dim)} .contributions{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;margin:2px 0 23px; align-items:start} .mpanel{border-bottom:0;padding:0;margin:0;min-width:0} .mpanel[data-kind="goals_scored"],.mpanel[data-kind="assists"]{grid-column:1/-1} .mpanel .mpl{font-size:var(--t-s);line-height:1.45;font-weight:650;text-transform:none; letter-spacing:0;color:var(--text);padding:5px 0 9px;border-bottom:1px solid var(--line); margin-bottom:0;display:flex;justify-content:space-between;align-items:baseline;gap:8px} .mpanel .mpl .dim2{font-size:var(--t-xs)} .mpanel[data-kind="goals_scored"] .mpl,.mpanel[data-kind="assists"] .mpl{ font-size:var(--t-xs);line-height:17px;letter-spacing:1.3px;text-transform:uppercase; font-weight:400;color:var(--dim);border:0;padding:0 0 8px} .mpanel[data-kind="defensive_contribution"] .mpl{color:var(--pos)} .mchips{gap:0;display:block} .mpanel[data-kind="goals_scored"] .mchips,.mpanel[data-kind="assists"] .mchips{ display:flex;flex-wrap:wrap;gap:8px 22px} .mpanel[data-kind="goals_scored"] .chip,.mpanel[data-kind="assists"] .chip{ font-size:var(--t-17);line-height:1.45;font-weight:600;min-height:25px;gap:7px; border:0;width:auto} .mpanel[data-kind="goals_scored"] .chip .cv,.mpanel[data-kind="assists"] .chip .cv{ font-size:var(--t-xs);color:var(--dim);align-self:flex-start;padding-top:2px;font-weight:400} .mpanel[data-kind="bonus"] .chip,.mpanel[data-kind="bps"] .chip, .mpanel[data-kind="defensive_contribution"] .chip{display:flex;width:100%; justify-content:space-between;align-items:center;gap:10px;min-height:38px; font-size:var(--t-s);line-height:1.45;font-weight:400;border-bottom:1px solid var(--line)} .mpanel[data-kind="bonus"] .chip,.mpanel[data-kind="bps"] .chip{justify-content:flex-start; border-bottom:0} .mpanel[data-kind="defensive_contribution"] .chip{min-height:33px} .mpanel[data-kind="defensive_contribution"] .chip .cn{flex:1} .mpanel[data-kind="defensive_contribution"] .chip .cv, .mpanel[data-kind="defensive_contribution"] .chip .thr{font-size:var(--t-s);font-weight:550; color:var(--pos);padding:0;font-family:var(--sans)} .mpanel[data-kind="defensive_contribution"] .chip .thr:before{content:' / '} .mpanel[data-kind="defensive_contribution"] .chip .thr.hit:before{content:' / '} .mcard .chip .tag{font-size:var(--t-xxs);line-height:1.45;font-weight:400;letter-spacing:.5px; text-transform:uppercase} .mcard .chip .tag.opp{background:none;color:var(--board);padding:0} .odds.forecast{display:grid;grid-template-columns:1fr 180px;gap:30px;align-items:center; padding-top:15px;margin:0} .olabel{font-size:var(--t-xxs);line-height:1.45;letter-spacing:1px;text-transform:none; margin-bottom:8px} .odds .obar{border-radius:0} .odds .orow span:first-child{color:var(--accent)} .odds .orow span:last-child{color:var(--pos)} .odds .orow span:first-child b,.odds .orow span:last-child b{color:inherit} .xg{text-align:right;font-size:var(--t-17);line-height:1.45;font-variant-numeric:tabular-nums} .xg .onote{font-size:var(--t-xs);margin-top:4px} .mmore{width:100%;margin-top:10px;padding:3px 0;min-height:32px;border-top:1px solid var(--line); border-radius:0;font-size:var(--t-xs);line-height:1.45;color:var(--dim)} .mmore:before{content:''} @media(max-width:640px){ .mhead .mt.team{font-size:var(--t-m);padding:15px 10px} .mmid.result .ms{font-size:var(--t-3xl)} .mbody{padding:14px} .toolbar{gap:0} .toolbar button{padding:10px} .mwhen{font-size:var(--t-xxs);letter-spacing:.5px} .contributions{grid-template-columns:1fr;gap:16px} .mpanel[data-kind="defensive_contribution"] .chip{min-height:35px} .odds.forecast{grid-template-columns:1fr;gap:12px} .xg{text-align:left;font-size:var(--t-13);display:flex;gap:12px;align-items:center} .xg .olabel{margin:0} } /* ------------------------------------------- Radar and Player Pool, measured against scouting-radar.html and player-pool.html at 1440 (15 Sep 2026). The page head's default spacing is these pages' 8/26; Team HQ keeps its own 5/10. */ .pagehead .heading{margin:8px 0 26px;gap:16px} .pagehead.tight .heading{margin:5px 0 10px;gap:20px} .pagehead .season{font-size:var(--t-s);line-height:18px;padding:0} .radar-lead{padding:22px} .radar-lead .label{font-size:var(--t-xs);line-height:16.5px;letter-spacing:1.3px; font-weight:400;opacity:1;color:var(--boardink)} .move-title{margin:18px 0;gap:15px} .move-title small{font-size:var(--t-xs);line-height:16.5px;margin:0} .move-title h2{font-size:var(--t-34);line-height:1.5;font-weight:700;letter-spacing:-1px} .move-title .arrow{font-size:var(--t-m);line-height:21px;opacity:1} .lead-bottom{padding-top:12px;gap:10px;font-size:var(--t-xs);line-height:16.5px} .radar-metrics{padding:20px 0;gap:18px} .radar-metrics strong{font-size:var(--t-29);line-height:1.5;letter-spacing:-1px;font-weight:700} .radar-metrics span{font-size:var(--t-xs);line-height:16.5px} .case-grid{margin:23px 0;gap:25px} .case-grid h3,.case-grid h4{font-size:var(--t-xs);line-height:16.5px;letter-spacing:1.3px;font-weight:400; margin:0 0 7px} .case-grid li{font-size:var(--t-13);line-height:1.5;color:var(--dim);padding:0 0 0 16px} .reality{padding:15px 18px;background:var(--panel)} .reality b{font-size:var(--t-m);line-height:21px} .reality p{font-size:var(--t-s);line-height:18px;color:var(--dim);margin-top:5px} .rdetails{font-size:var(--t-s);line-height:18px;margin-top:0} .rdetails summary{padding:12px 0} .rdetails p{padding:9px 0;margin:0} .ractions{margin-top:12px} .ractions .btn:first-child{font-size:var(--t-m);line-height:21px;padding:9px 14px} .hero .note{margin-top:14px;font-size:var(--t-xs);line-height:16.5px} /* Section heads app-wide are the comps' sectionhead: 22px bold on a rule, with the qualifier at the right in 11px. */ h2.sec{font-size:var(--t-25);line-height:1.5;font-weight:700;letter-spacing:0; text-transform:none;color:var(--text);border-top:1px solid var(--line); padding-top:17px;margin:28px 0 14px;display:flex;justify-content:space-between; align-items:baseline;gap:15px} h2.sec .line{display:none} h2.sec .count,h2.sec .act,h2.sec .dim2,h2.sec .seg{font-family:var(--sans); font-size:var(--t-xs);line-height:16.5px;letter-spacing:0;text-transform:none; color:var(--dim);font-weight:400;margin-left:auto} h2.sec .seg{margin-left:auto} #view > h2.sec{background:var(--bg)} /* Player Pool tools and table. */ .filters{margin:12px 0;gap:8px} .filters input,.filters select{font-size:var(--t-m);padding:10px;border-radius:3px; background:var(--panel);border:1px solid var(--line);color:var(--text);min-height:39px} .filters select{font-size:var(--t-13)} .filters .seg{gap:2px;border:0;border-radius:0;overflow:visible;background:none} .filters .seg button{font-size:var(--t-s);line-height:18px;padding:8px 10px; border:1px solid var(--line);border-radius:2px;background:var(--panel2);color:var(--dim); min-height:39px} .filters .seg button.on{color:var(--accent);background:var(--panel2)} .filters #lensseg{border-top:1px solid var(--line);padding-top:14px;margin-top:18px; flex-basis:100%;width:100%} .pool-meta{font-size:var(--t-xs);line-height:16.5px;padding:18px 0 10px} .tablewrap{border:0;border-radius:0} table th,table td{padding:13px 9px;font-size:var(--t-s);line-height:20px; border-bottom:1px solid var(--line);white-space:nowrap} table th{font-size:var(--t-xs);letter-spacing:1px;font-weight:400;background:var(--bg); border-top:1px solid var(--line);color:var(--text)} .tablewrap th:first-child,.tablewrap td:first-child{background:var(--bg)} .pager{margin:20px 0;gap:15px;justify-content:center;font-size:var(--t-s);line-height:18px; color:var(--dim)} .pager .btn{font-size:var(--t-s);padding:8px 10px;min-height:36px;border-radius:999px} /* ------------------------------------------- Your League, measured against your-league.html at 1440 (15 Sep 2026). The intro is a panel with a green rule on top; your place sits beside Reg's reading. */ .pagehead.league .heading{margin:7px 0 25px;gap:12px} .pagehead.league .week strong{font-size:var(--t-25);line-height:1.5} .league-intro{display:flex;gap:25px;align-items:flex-start;padding:23px; background:var(--panel);border-top:3px solid var(--pos);margin:0;grid-template-columns:none} .league-intro > div{flex:0 1 auto;max-width:380px} .league-intro .eyebrow{letter-spacing:1.4px;line-height:16.5px} .league-intro h2{font-size:var(--t-27);line-height:1.15;font-weight:700;letter-spacing:-.5px; margin:10px 0} .league-intro p{font-size:var(--t-s);line-height:18px;color:var(--dim);max-width:none} /* The board comes off here, so this is NOT one of the mint-ground containers and must not take their text tokens: it sits on the page now, and --boardink on the page measured 1.07:1. */ .league-place{background:none;color:var(--text);padding:0;border:0;flex:none;min-width:122px} .league-place strong{font-size:var(--t-58);line-height:1.1;letter-spacing:-3px;font-weight:700} .league-place span{font-size:var(--t-xs);line-height:16.5px;color:var(--dim);margin-top:0} .sectionhead{padding-top:16px;margin:28px 0 15px;gap:10px} .sectionhead h2{font-size:var(--t-21);line-height:1.5;font-weight:700;letter-spacing:-.5px} .sectionhead>span{font-size:var(--t-xs);line-height:16.5px} .sectionhead .btn{font-size:var(--t-s);line-height:18px;padding:8px 12px;min-height:36px; color:var(--accent);border-color:var(--accent)} /* ------------------------------------------- Premier League standings, measured against premier-league-standings.html at 1440 (15 Sep 2026). */ .highlights{grid-template-columns:1.4fr 1fr 1fr;gap:2px;margin:0 0 26px} .highlight{padding:19px;background:var(--board);color:var(--boardink);border:0} .highlight .eyebrow{font-size:var(--t-xs);line-height:16.5px;letter-spacing:1.3px; color:var(--boardink);opacity:.75} .highlight h2{font-size:var(--t-21);line-height:1.5;font-weight:700;letter-spacing:-.5px; margin:8px 0 12px} .highlight strong{font-size:var(--t-32);line-height:1.5;font-weight:700;letter-spacing:-1px; color:var(--boardink)} .highlight small{display:inline;font-size:var(--t-xs);line-height:16.5px;margin:0 0 0 7px; color:var(--boardink)} .plstats .filters{margin:0 0 14px;gap:12px} .pltable th,.pltable td{padding:10px 7px} .plmobile{display:none} @media(max-width:640px){ /* The thirteen-column desktop table used to become a near-full-screen card per club. On a phone the standings question is rank, club and points; tap a row for the complete record without losing any statistic. */ .pldesktop{display:none} .plmobile{display:block;border-top:1px solid var(--line)} .plmrow{border-bottom:1px solid var(--line);background:var(--panel)} .plmrow summary{display:grid;grid-template-columns:25px minmax(0,1fr) 30px 40px 40px; gap:8px;align-items:center;min-height:58px;padding:8px 6px;cursor:pointer;list-style:none} .plmrow summary::-webkit-details-marker{display:none} .plmrank{font-size:var(--t-m);color:var(--dim)} .plmclub{min-width:0;line-height:1.15} .plmclub b{display:block;font-size:var(--t-m);font-weight:650} .plmclub small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--dim);font-size:var(--t-xxs);margin-top:3px} .plmstat,.plmpts{text-align:right;font-variant-numeric:tabular-nums; font-size:var(--t-s)} .plmstat small,.plmpts small{display:block;color:var(--dim2); font-size:var(--t-micro);line-height:1.2;letter-spacing:.06em} .plmpts{font-weight:700;font-size:var(--t-m)} .plmrow[open] summary{background:var(--panel2)} .plmrecord{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;background:var(--line);border-top:1px solid var(--line)} .plmrecord span{display:flex;justify-content:space-between;gap:5px; padding:8px;background:var(--bg);font-size:var(--t-xs)} .plmrecord small{color:var(--dim2)} .plmrecord b{font-variant-numeric:tabular-nums;font-weight:600} } /* ------------------------------------------- Your team news, measured against team-news.html at 1440 (15 Sep 2026). */ .pagehead.news .heading{margin:7px 0 25px;gap:12px} .edition{font-size:var(--t-xxs);line-height:15px;letter-spacing:1px;text-transform:uppercase; padding:10px 0;gap:12px;border-top:2px solid var(--line2);border-bottom:1px solid var(--line); margin:0} .news-lead{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;margin:24px 0} .lead-story{padding:25px;background:var(--board);color:var(--boardink)} .lead-story .eyebrow{color:var(--boardink);opacity:.75;letter-spacing:1.4px;line-height:16.5px} .lead-story h2{font-size:var(--t-40);line-height:1.05;font-weight:700;letter-spacing:-1.7px; margin:14px 0 18px} .lead-story p{font-size:var(--t-m);line-height:21px;margin:0} .lead-story .byline{font-size:var(--t-xs);line-height:16.5px;margin-top:17px;opacity:.75} .lead-story [data-pid]{cursor:pointer} .reg-column{padding:8px 0} .reg-column .eyebrow{letter-spacing:1.4px;line-height:16.5px} .reg-column h3{font-size:var(--t-25);line-height:1.15;font-weight:700;letter-spacing:-.6px; margin:14px 0} .reg-column p{font-size:var(--t-13);line-height:1.5;color:var(--dim);margin:12px 0} .reg-column p strong{color:var(--text)} .reg-rule{border-top:1px solid var(--line);margin:20px 0} .reg-column small{font-size:var(--t-xs);line-height:16.5px;color:var(--dim)} .news-secondary{display:grid;grid-template-columns:1fr 1fr;gap:28px} .news-secondary article{padding-top:17px;border-top:1px solid var(--line)} .news-secondary article .eyebrow{letter-spacing:1.4px} .news-secondary h3{font-size:var(--t-21);line-height:1.2;font-weight:700;letter-spacing:-.5px; margin:12px 0} .news-secondary p{font-size:var(--t-s);line-height:18px;color:var(--dim);margin:0} .news-secondary .byline{font-size:var(--t-xs);line-height:16.5px;color:var(--dim);margin-top:12px} .news-filter{display:flex;gap:8px;margin:0 0 12px} .news-filter button{font-size:var(--t-s);line-height:18px;padding:8px 12px; border:1px solid var(--line);border-radius:999px;background:none;color:var(--text)} .news-filter button[aria-pressed=true]{background:var(--board);color:var(--boardink); border-color:var(--board)} .news-list .pnews summary{min-height:44px} @media(max-width:640px){ .news-lead,.news-secondary{grid-template-columns:1fr} .lead-story h2{font-size:var(--t-35);line-height:1.05;letter-spacing:-1.7px} } /* The comps' section heads do not stick, and the id rule above was keeping the old padding. Per-table cell paddings from the comps. */ #view > h2.sec{position:static;padding:17px 0 0;margin:28px 0 14px;top:auto} #view > h2.sec:first-child{margin-top:0} .lgtable th,.lgtable td{padding:11px 8px} .pltable th,.pltable td{padding:10px 7px} /* A linked name on a mint surface is ink, like the words around it. */ .lead-story .pn,.radar-lead .pn,.hqproj .pn,.highlight .pn,.bcall .pn,.league-place .pn{ color:var(--boardink)} /* And so is a byline. The global rule paints it in the page's dim grey, which on the mint lead story measured 1.48 against the board -- the same failure as the name, from the same cause: small print that names its own colour instead of taking the surface's. The board carries the ink; the byline is already set apart by being smaller and lighter in weight. */ .lead-story .byline,.lead-story .byline b{color:var(--boardink); border-bottom-color:var(--boardrule)} /* The Scouting pages' intro is a mint panel (scouting-in-form.html, scouting-rising-fading.html): 20px padding, a 25px reading, a 12px line. */ .standfirst{background:var(--board);color:var(--boardink);padding:20px;margin:0 0 22px; max-width:none} .standfirst h2{font-size:var(--t-25);line-height:1.5;font-weight:700;letter-spacing:0;margin:0} .standfirst p{font-size:var(--t-s);line-height:18px;color:var(--boardink);margin:5px 0 0} .standfirst .pn{color:var(--boardink)} /* ------------------------------------------- In form, measured against scouting-in-form.html at 1440 (15 Sep 2026): the card is the comp's form-player. */ .watchcard{padding:20px;border:1px solid var(--line);background:var(--panel);border-radius:0} .watchcard .wh{gap:10px;margin:0} .watchcard .wh .dim2{display:block;font-size:var(--t-xs);line-height:16.5px;letter-spacing:1.3px; text-transform:uppercase;color:var(--dim)} .watchcard .wh .nn{display:block;font-size:var(--t-3xl);line-height:1.5;font-weight:700; letter-spacing:-.7px;margin-top:5px} .wwatch{font-size:var(--t-xs);line-height:16.5px;padding:5px 9px;border-radius:999px; border:1px solid var(--accent);color:var(--accent);background:none} .wwatch.on{background:var(--accent);color:var(--onfill)} .form-signal{display:flex;align-items:center;gap:12px;margin:19px 0} .form-signal strong{font-size:var(--t-43);line-height:1;font-weight:700;letter-spacing:-1.5px} .form-signal span{font-size:var(--t-xs);line-height:16.5px;color:var(--dim)} .comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px} .comparison>div>span{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-xs); line-height:16.5px;color:var(--dim);margin-bottom:7px} .comparison>div>span b{color:var(--text)} .recent-bar{height:5px;background:var(--pos)} .base-bar{height:5px;background:var(--line2)} .sample{font-size:var(--t-xs);line-height:16.5px;color:var(--dim);margin:10px 0 0} .watchcard .wmeta{display:flex;gap:9px;flex-wrap:wrap;border-top:1px solid var(--line); padding-top:14px;margin:18px 0;font-size:var(--t-xs);line-height:16.5px;color:var(--dim)} .watchcard .fixrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0} .watchcard .fix{display:flex;flex-direction:column;gap:3px;padding:11px;background:var(--panel2); border:0;border-radius:0} .watchcard .fix .e{font-size:var(--t-xxs);line-height:15px;color:var(--dim)} .watchcard .fix .o{font-size:var(--t-s);line-height:18px} .watchcard .fix .p{font-size:var(--t-17);line-height:25.5px;font-weight:700} .watchcard .fix:nth-child(n+4){display:none} .watchcard .wmove{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:var(--t-xs); line-height:16.5px;color:var(--dim)} .watchcard .wmove b{font-size:var(--t-15);line-height:22.5px;color:var(--text)} .watchcard .wmove .btn{font-size:var(--t-s);line-height:18px;padding:8px 12px;border-radius:999px; border-color:var(--accent);color:var(--accent);margin-left:auto} .watchcard .guard{font-size:var(--t-s);line-height:18px;padding:12px;background:var(--panel2); margin:0 0 15px;border:0} .watchcard .because{font-size:var(--t-s);line-height:18px;color:var(--dim)} .watchcard .wstory,.watchcard .wr{font-size:var(--t-s);line-height:18px;color:var(--dim)} /* ------------------------------------------- Rising & fading, Easier runs, The Scout: measured against their comps at 1440 (15 Sep 2026). */ .trend-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px; padding:16px 19px;background:var(--panel2);border-top:3px solid var(--pos);margin:0} .trend-head.neg{border-top-color:var(--accent)} .trend-head h2{margin:3px 0 0;font-size:var(--t-25);line-height:1.5;font-weight:700;letter-spacing:0} .trend-head .total{font-size:var(--t-29);line-height:1.5;font-weight:400;display:flex; align-items:baseline;gap:6px} .trend-head .total small{font-size:var(--t-xs);line-height:16.5px;color:var(--dim)} .trend-head + .tablewrap{margin-top:0} .pager{font-size:var(--t-xs);line-height:16.5px;margin:15px 0 0;gap:17px} .pager .btn{padding:8px 11px} .run-section{margin:0 0 30px} .run-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px; padding:18px 20px;background:var(--panel2);border-top:3px solid var(--pos)} .run-section:nth-of-type(2) .run-head{border-top-color:var(--board)} .run-head h2{margin:3px 0 0;font-size:var(--t-25);line-height:1.5;font-weight:700} .run-head p{margin:4px 0 0;font-size:var(--t-s);line-height:18px;color:var(--dim);max-width:60ch} .run-head .count{font-size:var(--t-28);line-height:1.5;font-family:var(--sans); letter-spacing:0;text-transform:none;color:var(--text)} .standfirst.runs{padding:22px;margin-bottom:26px} .standfirst.runs h2{letter-spacing:-.8px;margin-bottom:7px} .standfirst.runs p{font-size:var(--t-13);line-height:1.5;margin:0} .rhead{font-size:var(--t-34);line-height:39px;font-weight:500;letter-spacing:-1px;margin:0} .rstand{font-size:var(--t-xl);line-height:1.5;margin:18px 0 0;color:var(--text)} .scout{max-width:none;margin-top:0} .byline{margin-top:24px;gap:12px;font-size:var(--t-13);line-height:1.5;padding-bottom:0} .byline .regmug{width:40px;height:40px;border-radius:50%;border:1px solid var(--line)} .byline b{font-size:var(--t-13);font-weight:700} .byline span{font-size:var(--t-xs);line-height:16.5px;color:var(--dim)} .scfigs{display:flex;gap:20px;align-items:flex-start;padding:23px 25px;margin:6px 0 30px; background:var(--board);color:var(--boardink)} .scfigs b{font-family:var(--sans);font-size:var(--t-42);line-height:1.1;font-weight:700; letter-spacing:-2px;color:var(--boardink)} .scfigs span{font-size:var(--t-xs);line-height:16.5px;color:var(--boardink)} .scp{font-size:var(--t-l);line-height:1.8;margin:0 0 20px} .scp[data-kind="quote"],.scp[data-kind="pull"]{font-size:var(--t-24);line-height:1.4; padding:18px 0;margin:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .scp[data-kind="close"]{font-size:var(--t-s);line-height:18px;padding:18px 0;margin:25px 0 0; border-top:1px solid var(--line)} /* In form's grid, and the Boot Room, measured (15 Sep 2026). */ .form-grid{grid-template-columns:1fr 1fr;gap:18px} .settings-intro{font-size:var(--t-23);line-height:1.5;font-weight:650;letter-spacing:-.5px; padding:22px;margin:0 0 28px;background:var(--board);color:var(--boardink)} .bootroom h2.sec{border-top:0;padding-top:0;margin:28px 0 8px;font-size:var(--t-2xl); letter-spacing:-.5px} .bootroom h2.sec .dim2{display:block;width:100%;margin:0;font-size:var(--t-s);line-height:1.6; font-weight:400} .bootroom .panel{background:none;border:0;padding:0;border-radius:0} .bootroom .setrow{display:flex;justify-content:space-between;align-items:flex-start;gap:20px; padding:20px 0;border-bottom:1px solid var(--line);margin:0} .bootroom .setrow>div:first-child{max-width:320px} .bootroom .setrow b{font-size:var(--t-m);line-height:21px;font-weight:700} .bootroom .setrow .dim2{font-size:var(--t-s);line-height:1.6;margin-top:5px} .bootroom .setrow .seg{gap:2px;border:0;background:none;border-radius:0;overflow:visible;flex:none} .bootroom .setrow .seg button{font-size:var(--t-s);line-height:18px;padding:8px 11px; border:1px solid var(--line);border-radius:999px;background:none;color:var(--text);min-height:36px} .bootroom .setrow .seg button.on{background:var(--panel2);color:var(--text)} /* Phone deltas from the mobile pilot (15 Sep 2026): Live scores, Radar, Your League. */ @media(max-width:640px){ .toolbar{padding:4px 2px 10px} .toolbar button{font-size:var(--t-13);line-height:20px;padding:10px 15px} .mmid.result{padding:0 4px} .mbody{padding:24px 14px 14px} .contributions{gap:22px} .move-title{grid-template-columns:1fr 30px 1fr;gap:15px} .move-title .arrow{text-align:center} .move-title h2{font-size:var(--t-27);line-height:1.5} .league-intro{padding:16px} .league-intro h2{font-size:var(--t-23);line-height:1.15} } /* ------------------------------------------- The Fenwick Report's type, measured against gameweek-report.html at 1440 (15 Sep 2026). */ .report .rhead{font-size:var(--t-40);line-height:1.06;font-weight:700;letter-spacing:-1.5px; margin:14px 0} .report .rstand{font-size:var(--t-18);line-height:1.5;margin:0} .report .byline{margin:22px 0;padding-bottom:18px;border-bottom:1px solid var(--line)} .report .regmug{width:56px;height:56px} .report p{font-size:var(--t-15);line-height:1.8;margin:0 0 18px} .panel.report{border-top:4px solid var(--accent);border-radius:0;padding:18px 0 0; background:none;border-left:0;border-right:0;border-bottom:0} .pending{font-size:var(--t-s);line-height:18px;padding:12px 0;margin:0 0 20px; border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none; border-left:0;border-right:0;border-radius:0} /* Phone overflow found by the 390px sweep (16 Sep 2026): the moves list's fixed columns, the In form grid's two columns, the Feedback owner tabs. */ @media(max-width:640px){ .mvrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:2px} .mvrow .mvkind,.mvrow .mvout{grid-column:1 / -1} .form-grid{grid-template-columns:1fr} .fbtabs{margin:0 -16px 16px;padding:0 16px} /* A picker in a section heading (Classic Rivals) takes its width from its longest option; on a phone it takes the heading's instead. */ h2.sec select.sel,h2.sec .sel{max-width:100%;min-width:0;flex:1 1 auto} } /* THE ACCENT ON A MINT GROUND IS THE ORANGE (17 Sep 2026). The mint boards are FIXED -- they are the same colour in Light and in Dark, because a hoarding does not change with the weather. So the moment the dark accent became the mint, every accent rule, border and figure drawn ON one of those boards became mint on mint: the call card's top rule, the projection panels, the charts inside them. Rather than hunt every rule, the token is redefined for the subtree. A component asks for the accent and gets the one that can actually be seen where it is standing. Light is unaffected: its accent is already a dark red and reads fine on mint. AND THIS COMMENT WAS NEVER CLOSED, so every line below it -- the whole selector list, every declaration in it -- sat inside a comment from the day it was written, running on to the next terminator further down the file and swallowing that rule too. It read correctly, it reviewed correctly, and it did nothing. Which is why mint kept turning up on mint grounds after it was "fixed": it had never once been applied. The second attempt at this note quoted the terminator itself, which closed the comment three lines early and broke the selector list a different way. Do not write that sequence in here. */ .bcall, .cbudget .highlight:first-child, .cdiff .hero, .classic-lead, .clineup .hero, .commissioner, .cradar .lead, .crivals .hero, .cseason .hero, .cstand .hero, .cstand .world, .ctransfers .lead, .cweek .lead, .dhero.ds-card, .fbpage .hero, .health-filters button[aria-pressed=true], .health-intro, .hqproj, .kboard, .lead-story, .matchphone .score-card, .news-filter button[aria-pressed=true], .poolphone .pool-actions .card, .poolphone .pool-lead, .radar-lead, .scfigs, .settings-intro, .share-preview, .source-desk, .standfirst, .watch-intro{ --accent:var(--dataline); --accentdim:rgba(254,107,65,.12); --accentline:rgba(254,107,65,.72); --pillfill:var(--dataline); --pillfillline:var(--dataline); /* AND THE TEXT TOKENS, FOR THE SAME REASON THE ACCENT IS HERE. The accent was redefined because a component standing on the board asked for it and got a colour that could not be seen there. Every muted text token had exactly the same problem and was left out: the board is mint in BOTH themes, so Dark's --dim -- a pale grey-green built for a near-black page -- landed pale-on-pale. The Brief's evidence list measured 1.48:1, which is text you cannot read. Mixed from the two tokens rather than written as a new colour, so it is the board's own ink diluted by the board and nothing enters the palette. At 75% it measures 5.71 on the board in Dark and 5.09 in Light, against --boardink's 11.1 and 9.8 -- a muted tier that is still a readable one. */ --text:var(--boardink); --prose:color-mix(in srgb,var(--boardink) 75%,var(--board)); --dim:color-mix(in srgb,var(--boardink) 75%,var(--board)); --dim2:color-mix(in srgb,var(--boardink) 75%,var(--board)); /* AND THE SIGNALS, for the third time and the same reason. A warning inside the call card paints its own wash over the board and then writes on it: bright amber on pale mint read 1.30:1, which is a warning nobody can see. These are the three signals at a weight that survives their own wash on this ground -- 4.86, 4.98 and 4.81 -- and one value serves both themes, because the board does. */ --warn:var(--boardwarn); --warndim:color-mix(in srgb,var(--boardwarn) 13%,transparent); --warnline:color-mix(in srgb,var(--boardwarn) 70%,transparent); --neg:var(--boardneg); --negdim:color-mix(in srgb,var(--boardneg) 9%,transparent); --negline:color-mix(in srgb,var(--boardneg) 68%,transparent); --pos:var(--boardpos); --posdim:color-mix(in srgb,var(--boardpos) 13%,transparent); --posline:color-mix(in srgb,var(--boardpos) 62%,transparent); } /* The section heads I added take the comp's own .sectionhead treatment -- a 25px heading with the eyebrow beside it -- rather than the 11px uppercase label, which is a caption and was making three real sections look like one. */ .bhealth .bsechead,.bopen .bsechead{font-size:var(--t-25);line-height:1.5; letter-spacing:-.6px;font-weight:700;text-transform:none;color:var(--text); padding-top:0} .bhealth .bsechr,.bopen .bsechr{font-size:var(--t-xs);line-height:17px; letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);font-weight:400} /* Section headings, per page, measured at 1440 against the comps that set them: Gameweek plan 27/-0.7, Radar 34/-1, Roster health 28/-0.5. The base above is In form's 25, which is the value the set uses most. */ .pgs-plan h2.sec{font-size:var(--t-27);letter-spacing:-.7px} .pg-league.pgs-ask h2.sec{font-size:var(--t-34);letter-spacing:-1px} /* The comps set these at 700; 650 is a weight the approved set never uses for a heading. */ .health-intro h2{font-weight:700;letter-spacing:-.5px} .health-intro h3,.hqhealth h3{font-weight:700} .nav::-webkit-scrollbar{width:6px} .nav::-webkit-scrollbar-track{background:transparent} .nav::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px} /* One hint, chosen by the pointer the reader actually has. A mouse gets the drag; a finger gets the two taps, because touch fires no drag event. Written as a pair in the markup and resolved here so the right one is there on the first paint. */ .hint-touch{display:none} @media(hover:none){ .hint-point{display:none} .hint-touch{display:inline} } /* Dragging a player, from the approved studio comp: the one being carried fades, everywhere he could land takes a faint edge, and the card under the cursor lights up. THE COMP'S MINT IS A DARK-MODE VALUE. I took --fillwin for a fixed colour that "reads the same in both themes" and it does not: it is the bright mint, and on Light's pale pitch it measured 1.36:1 for the active target and 1.18:1 for the ready edge -- a drag that showed you nothing about where the player could land. These are state indicators, so 3:1 is the bar. The accent is mint in Dark, which is the comp's own value there, and the rust in Light, which is the one that can be seen. The ready edge is the accent at 70%: 3.26:1 in Light and 7.03:1 in Dark, still visibly the quieter of the two states. */ .pcard.kitcard[draggable=true]{cursor:grab} .pcard.kitcard.dragging{opacity:.4;cursor:grabbing} .pcard.kitcard.drop-ready{outline-offset:2px; outline:1px solid color-mix(in srgb,var(--accent) 70%,transparent)} .pcard.kitcard.drop-over{outline:2px solid var(--accent);outline-offset:2px; background:color-mix(in srgb,var(--accent) 13%,transparent)} /* ---------------------------------------------- Your match, the proposed layout (your-match-system-review.html, the Proposed half of its toggle, over matchday-complete.html as the base). Measured off that sheet. */ /* AROUND YOUR LEAGUE. The tiles were already the tie switcher; they were at the foot of the page under a card heading, and they open it now. */ .alg{margin-bottom:24px} .alghead{display:flex;justify-content:space-between;align-items:center; gap:12px;margin-bottom:12px} .alghead h2{font-size:var(--t-xs);line-height:17px;font-weight:400; text-transform:uppercase;letter-spacing:1.3px;color:var(--dim);margin:0} .alghead p{font-size:var(--t-xs);line-height:17px;color:var(--dim);margin:0; text-align:right} /* FIVE ACROSS IN THE COMP, because that league has five ties. A league with four would have left the fifth column standing empty, so the track is sized instead of counted: as many as fit at 170px, which is five at the comp's width and four when there are four. */ .sbgrid{display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} /* A STEP OFF THE PAGE, IN BOTH THEMES. The comp sets the card to the panel and the page to the ground beneath it, which is a visible step in Dark and none at all in Light, where the page and the panels are both white. So the card takes the second ground and the selected one is lifted with the accent rather than with a third grey -- one rule that reads in both. */ .sbtie{min-height:86px;padding:12px;border:0;border-radius:0; background:var(--panel2);color:inherit;text-align:left;cursor:pointer; min-width:0;display:flex;flex-direction:column;gap:2px; box-shadow:inset 0 -2px transparent;font:inherit} .sbtie.on{background:color-mix(in srgb,var(--accent) 12%,var(--panel2)); box-shadow:inset 0 -2px var(--accent)} .sbtie:hover{background:color-mix(in srgb,var(--accent) 7%,var(--panel2))} .sbtie:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .sbrow{display:flex;justify-content:space-between;align-items:baseline;gap:9px; font-size:var(--t-s);line-height:18px} .sbn{min-width:0;overflow-wrap:anywhere} .sbtie b{font-size:var(--t-m);font-weight:500;flex-shrink:0; font-variant-numeric:tabular-nums} .sbtie b.win{color:var(--pos)} .sbtie b.loss{color:var(--neg)} .sbmeta{display:block;font-size:var(--t-xs);line-height:17px;margin-top:5px; color:var(--dim)} /* THE SCORE, ON ONE BOARD. The comp paints the whole block in the mint and lets the names, the figure and the two footers sit on it, so the board is the surface rather than three tiles that happen to touch. */ .fsboard{display:grid;grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr); grid-template-rows:88px 40px;row-gap:16px;padding:24px;margin-bottom:24px; background:var(--dsmint);color:var(--dsink)} .fst{display:flex;align-items:center;justify-content:center;text-align:center; padding:12px;font-size:var(--t-24);line-height:1.15;font-weight:500; letter-spacing:-.5px;min-width:0;overflow-wrap:anywhere} .fssc{display:flex;align-items:center;justify-content:center;gap:12px; font-size:var(--t-58);line-height:76px;font-weight:600;letter-spacing:-2px; font-variant-numeric:tabular-nums} .fssc i{font-style:normal;font-size:var(--t-3xl);font-weight:400; color:var(--dsdt)} .fsu{padding-top:12px;border-top:1px solid var(--dsline);text-align:center; font-size:var(--t-s);line-height:18px;color:var(--dsdt)} .fsu b{font-weight:500;color:var(--dsink)} .fsg{padding-top:12px;border-top:1px solid var(--dsline);text-align:center; font-size:var(--t-s);line-height:18px;font-weight:500;min-height:40px; color:var(--dsink)} /* THE TWO ELEVENS AS A TEAM SHEET. Name and fixture on the left, what he has scored on the right, and a man who has not kicked off shows a dash: nought is a score and he has not got one. */ .tsheets{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:8px} .tshh{border-top:1px solid var(--line2);padding:16px 0;min-height:82px} .tshh h2{font-size:var(--t-20);line-height:26px;font-weight:500; letter-spacing:-.4px;margin:0 0 4px} .tshm{font-size:var(--t-s);line-height:18px;color:var(--dim)} .tshc{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:12px; font-size:var(--t-xs);line-height:17px;font-weight:400;letter-spacing:1.3px; text-transform:uppercase;color:var(--dim);padding-bottom:12px; border-bottom:1px solid var(--line)} .tshc span:last-child{text-align:center} .tshr{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:12px; align-items:center;min-height:48px;padding:12px 0; border-bottom:1px solid var(--line)} .tshw{min-width:0} .tshn{display:block;font-size:var(--t-m);line-height:20px;font-weight:500; cursor:pointer} .tshcl{color:var(--dim);font-size:var(--t-xs);margin-left:5px;font-weight:400} .tshf{display:block;font-size:var(--t-xs);line-height:17px;color:var(--dim); text-align:left;margin-top:4px} .tshp{text-align:center;font-size:var(--t-20);line-height:26px;font-weight:500; color:var(--text);font-variant-numeric:tabular-nums} .tshp[data-ten="true"]{color:var(--pos)} .tshr.pending .tshp{color:var(--dim)} @media(max-width:900px){ .sbgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .fsboard{grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr)} .fssc{font-size:var(--t-42);line-height:56px} .tsheets{grid-template-columns:1fr;gap:8px} } @media(max-width:640px){ .sbgrid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px} .alghead{flex-direction:column;align-items:flex-start;gap:4px} .alghead p{text-align:left} .fsboard{grid-template-columns:1fr;grid-template-rows:auto;row-gap:12px; padding:18px} .fst{font-size:var(--t-20);padding:0} .fssc{font-size:var(--t-44);line-height:58px} .fsu,.fsg{min-height:0} } /* A HEADLINE THAT GOES TO THE STORY. Set as the surrounding text rather than as a link, because the whole line is one and colouring it would make a page of news look like a page of links. The underline arrives on hover, which is where a reader is asking. */ .nwart{color:inherit;text-decoration:none} .nwart:hover,.nwart:focus-visible{text-decoration:underline; text-underline-offset:2px} /* --------------------------------- Reg signs the insights (player-insights .reg-byline and .reg-column). His name over the findings and his verdict under them: the comp's numbered rows were built and these two were not, which left the page a list rather than a correspondent's notes. */ .reg-byline{display:flex;gap:14px;align-items:baseline;margin:0 0 18px; flex-wrap:wrap;color:var(--dim);font-size:var(--t-s)} .reg-byline strong{font-family:var(--serif);color:var(--text); font-size:var(--t-18);font-weight:400} .reg-byline span{font-size:var(--t-xs)} .reg-column{margin:30px 0 4px;padding:24px 28px 26px; border-top:3px solid var(--accent);background:var(--panel)} .reg-column-label{display:flex;justify-content:space-between;gap:12px; font-size:var(--t-xxs);letter-spacing:1.5px;text-transform:uppercase; color:var(--accent)} /* The quote is the one place the serif is allowed to be big. It scales with the column rather than stepping at a breakpoint, which is how the comp sets it -- the line breaks are the writing, not the layout. */ /* BIGGER, AND NOT SQUEEZED (Luis, 18 Sep). It was clamped against the VIEWPORT -- 3.6vw -- while it lives in a drawer whose width has nothing to do with the viewport's, so it came out small in the one place it is ever shown. A flat size off the scale instead. And the comp's -.6px tracking is drawn for a face that is not this one: Instrument Serif is narrow to begin with, and pulling it tighter is what made it look squeezed. It sets at its own width now. */ .reg-column blockquote{font-family:var(--serif);font-weight:400; font-size:var(--t-35);line-height:1.25;letter-spacing:0; color:var(--text);margin:28px 0 30px;max-width:24ch} .reg-signoff{display:grid;grid-template-columns:1fr 1.3fr;gap:26px; border-top:1px solid var(--line);padding-top:18px} .reg-signoff strong{display:block;font-family:var(--serif); font-size:var(--t-xl);font-weight:400} .reg-signoff span{display:block;color:var(--dim);font-size:var(--t-xs); margin-top:4px} .reg-next>span{color:var(--accent);font-size:var(--t-xxs);letter-spacing:1px; text-transform:uppercase} .reg-next p{font-size:var(--t-s);color:var(--prose);margin:6px 0 0} @media(max-width:640px){ .reg-column{padding:20px} .reg-signoff{grid-template-columns:1fr;gap:18px} .reg-column blockquote{font-size:var(--t-27);max-width:none} } /* The chip's instruction, above its reasoning: what to do on a Friday, in the page's own ink, before the paragraph explaining how it got there. */ .chipdo{font-size:var(--t-15);line-height:1.5;color:var(--text); font-weight:500;margin:6px 0 4px;max-width:70ch} /* What the week tiles under a chip are counting. Two chips in this panel count different things and neither said so. */ .chipunit{font-size:var(--t-xs);line-height:17px;letter-spacing:1.3px; text-transform:uppercase;color:var(--dim);margin:12px 0 6px} /* The 900px block's 36px floor lands on every button in the content, including two that are drawn round: the radar's arrows (26x26) became 26x36 and its dots (7x7) became 7x36. They keep the size they are drawn at; on a phone the block below gives them a target without a shape. */ @media(max-width:900px){ .content .rdot,.content .rbtn{min-height:0} } /* The limited-evidence notice. Same shape as the partial-load note it sits beside, in the warning ink rather than the error one: nothing failed, and there is nothing to retry -- the model simply knows less than usual. */ .limitnote{border-left-color:var(--boardwarn,var(--accent))} .limitnote b{font-weight:650} /* A CONTROL IS 44px ON A PHONE. The chrome was built to that -- the bottom bar, the More sheet, the close button are all 44 or 48. The page underneath was not: measured at 375px across sixteen pages, 11 of 49 controls on Team HQ, 19 of 34 on Budget and 39 of 90 on Live scores were under it, most of them at exactly 36, which is the floor the 900px block sets for a narrow WINDOW. A narrow window is a mouse; this is a thumb. `linked-page.css` in the 15 Sep handoff, which is the approved rule for every desktop page shown on a phone, sets 44 on every filter, every list summary and every name link. 44 is a floor, not a size: padding and type are untouched, so nothing here changes what the comps look like on a desktop, and on a phone the only thing that grows is the area a thumb can land on. The exception is an icon-only control, which is square -- a 44px-tall, 24px-wide pin is still a miss. LAST IN THE FILE ON PURPOSE. A dozen comp-matching blocks further up set 32, 34 or 38 on a particular button, at the same specificity as anything written here, and source order decides those. A floor that loses to half the controls it is meant to cover is not a floor. */ @media(max-width:640px){ /* Scoped by the page's id, not by a class, and that is the point: a first pass written as `.content button` measured 36 on the Boot Room because `.bootroom .setrow .seg button` out-ranks it, and 32 in the inbox for the same reason. Position in the file cannot beat a longer selector; an id can, and #view is every page there is. */ #view .btn,#view button:not(.infodot):not(.mpin):not(.rdot):not(.rbtn):not(.lnk),#view select, #view summary,#view input:not([type=checkbox]):not([type=radio]):not([type=range]), #drawer .btn,#drawer button:not(.infodot),#drawer select,#drawer summary, .psheet select,.psheet .btn{min-height:44px} /* The two icon-only controls keep the size they are DRAWN at -- a 15px dot and a 24px pin are what the comps show -- and gain the target around them. Growing the box instead would move the pin off the corner it is pinned to and push the dot away from the word it belongs to. */ .infodot,.mpin,.rbtn{position:relative} .infodot::after,.mpin::after,.rbtn::after{content:'';position:absolute; top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)} /* The carousel's dots are 13px apart, so a 44px square round each would be seven targets stacked on one spot. Tall and as wide as the pitch: forgiving up and down, exact left to right. The arrows either side are the full-size way to move; the cards themselves swipe. */ .rdot{position:relative} .rdot::after{content:'';position:absolute;top:50%;left:50%; width:13px;height:44px;transform:translate(-50%,-50%)} /* Six free-transfer counts, each a single digit: 30px wide was a column of slivers once they were 44 tall. Six at 44 is 264px, which fits. */ #view .wift .seg button,#view [data-ft]{min-width:44px} /* `.lnk` is a link that happens to be a button. In a sentence or a table cell it stays the height of its line -- 44px there would push the lines of a paragraph apart. Where it stands alone as a row's action, it is a control like any other. */ #view .inboxhead .lnk,#view .inboxrow .lnk,#view .wibar .lnk, #view .wh .lnk{min-height:44px;display:inline-flex;align-items:center} /* A row in the live event list carries data-pid, so it opens a player: a control, not a line of text. Kept from `main` -- the #view rule above reaches buttons and inputs, and this one is a div. */ .eventrow{min-height:44px} }