.modes{list-style:none;margin:.5rem 0;padding:0}
.modes li{margin:.25rem 0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* UIUX-BR-01. Handbook section 09 names Inter as the product face. Lite asks
for it by name and falls through to the same humanist stack it always used.
IT DOES NOT FETCH A WEBFONT, and that is a decision rather than an omission:
Lite exists for readers on slow and metered connections, its budget is 30,720
compressed bytes for a whole first visit, and an Inter file is several times
that. A reader who has Inter gets Inter; everyone else gets the nearest system
face, which is what they got before. Web self-hosts the real thing. */
body{margin:0;font:16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
color:#121415;background:#fff;overflow-wrap:anywhere}
/* Figures that sit in a column line up by digit — scores, tables, clocks. */
table,li.m time,li.m .k,.s{font-variant-numeric:tabular-nums}
a{color:#18635c}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #18635c;outline-offset:2px}
.skip{position:absolute;left:-9999px}
/* 44px when focused, which is the state a keyboard reader meets it in.
Measured at 34px: the padding was 8px against a 24px line box. Doc 08 section
4.5's 44px minimum is the product's own rule and a skip link is not exempt
from it — it is the first target in the document. */
.skip:focus{position:static;display:inline-block;padding:10px 12px;min-height:44px}
header{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
padding:12px 16px;border-bottom:1px solid #cdd2d5}
/* UIUX-BR-01. The mark is a link carrying artwork, not styled text, so it
takes the 44px minimum every other target in this document takes — 44px tall,
132px wide (§05's minimum for a mobile full logo), the artwork centred in that
box at its own 43px height. XD-366: drawn as a background-image rather than
an img element, so the article's "no media embedded" measure counts the mark
as what it is, site chrome, not as a picture the page's content embedded. See
the comment on the mark's anchor in page() above. */
.mark{display:inline-block;width:132px;min-height:44px;
background-image:url(/brand/soka365-logo-light-surface.png);background-repeat:no-repeat;
background-position:left center;background-size:132px 43px}
nav.main{display:flex;flex-wrap:wrap;gap:4px 14px}
/* tab-label role: 12px/600, not the inherited 16px body size (06 §1.2). */
nav.main a{display:inline-block;min-height:44px;line-height:44px;font-size:.75rem;
font-weight:600;text-decoration:none}
nav.main a[aria-current=page]{text-decoration:underline}
main{max-width:44rem;margin:0 auto;padding:16px}
/* page-title role: 1.15 leading, not the inherited 1.5 (06 §1.2). */
h1{font-size:1.5rem;line-height:1.15;margin:.4em 0 .2em}
/* label role: 13px/600, not the inherited 16px/700 default h2. Section gap
onto the 32px step, not an off-scale 1.6em (06 §1.2, §2.1). */
h2{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
color:#5c6266;margin:2em 0 .4em}
p{margin:.5em 0}
.sub{color:#5c6266;font-size:.875rem}
form.q{display:flex;gap:8px;margin:12px 0}
form.q input{flex:1 1 auto;min-width:0;min-height:44px;padding:8px;font-size:16px;
border:1px solid #5c6266;border-radius:4px}
form.q button{min-height:44px;min-width:44px;padding:8px 14px;font-size:1rem;
border:1px solid #5c6266;border-radius:4px;background:#f5f6f7;color:#121415}
ul{list-style:none;margin:0;padding:0}
/* BC-16 Stage 4. A list of WAYS IN — the Discover document and the two scoped
links under Home. Same 44px target trick the match row uses: padding on the
anchor, negated by a matching margin, so the row keeps Lite's density. */
.ways li{padding:10px 0;border-bottom:1px solid #cdd2d5}
.ways a{display:inline-block;min-height:24px;padding:10px 0;margin:-10px 0}
/* L-01e. Squad rows sit 24px apart with no padding, so 10px of hit-area padding put each link's
box over the lower 39% of the name above it (pointer ownership: 1 of 5 points on every squad
link but the last). The link takes the row instead: 24px tall, the pitch, tiling the list.
L-01. Standalone links in a squad list and in the atlas edition rows took the inline
line box (16-18px). Same 44px target trick as .ways and li.m: padding on the anchor,
negated by a matching margin, so the row keeps Lite's density.
THE PADDING IS SIZED TO THE LINE BOX. With box-sizing:border-box the anchor is 20px of
padding plus its line box, so 10px is right only for 16px text (24px line box = 44px).
The .cg and .st text is 13px (19.5px line box): 10px measured 39.5px there, so those
take 12.5px (25 + 19.5 = 44.5px; margin box 19.5px, the line box, so rows keep height). */
ul.sq a{display:inline-block;min-height:24px}
/* li.m a (below) is MORE SPECIFIC than .st a, so inside a match/edition row it kept the
10px padding and the edition link stayed 39.5px; li.m .st a wins the cascade. */
.cg a,.st a,li.m .st a{display:inline-block;padding:12.5px 0;margin:-12.5px 0}
li.m{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
padding:10px 0;border-bottom:1px solid #cdd2d5;min-height:44px}
li.m .t{flex:1 1 10rem;min-width:0}
/* match-team role: 600 weight, not 400 (06 §1.2). */
li.m .t span{display:block;font-weight:600}
/* score role: 20px flush leading, not the 18px floor (06 §1.2). */
li.m .s{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.25rem;
line-height:1;white-space:nowrap}
/* display-score role, Match Centre identity row only; board keeps score
role above (06 §1.2). No 40px wide step: Lite has no >=1024 breakpoint. */
ul.hero li.m{align-items:center}
ul.hero .s{font-size:2rem;line-height:1}
li.m .k,li.m time{color:#5c6266;font-size:.875rem;white-space:nowrap}
li.m a{display:inline-block;min-height:24px;padding:10px 0;margin:-10px 0;position:relative}
/* L-01d. Two links on consecutive lines (the atlas competition and its season links; the two team
names in the Match Centre header) each pad above and below, so the LATER link's top padding reached
over the earlier link's glyphs: the lower 40% of "Liverpool" opened Arsenal, and after L-01c four of
five points on the atlas "Premier League" link opened its season (Playwright: "subtree intercepts
pointer events"). A stacked link pads DOWNWARD only, so the two hit areas meet at the line boundary
and every glyph belongs to its own link. Padding and margin still cancel: layout is unchanged. */
li.m .st a,ul.hero .t span+span a{padding-top:0;margin-top:0}
/* CMP-15 team sheet. Its own row: the match row's .s is a SCORE at 1.25rem
weight 700, and a shirt number is not a score. Same 44px target rule. */
li.lu{display:flex;gap:4px 10px;align-items:baseline;padding:10px 0;
border-bottom:1px solid #cdd2d5;min-height:44px}
li.lu .n{width:2rem;text-align:right;font-variant-numeric:tabular-nums;
font-size:.8125rem;color:#5c6266}
li.lu .p{flex:1 1 8rem;min-width:0}
li.lu .k{color:#5c6266;font-size:.875rem;white-space:nowrap}
li.lu a{display:inline-block;min-height:24px;padding:10px 0;margin:-10px 0}
/* group-gap: 24px, not an off-scale 1.2em (06 §2.1). */
.cg{display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline;font-size:.8125rem;
font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5c6266;
margin:1.5em 0 .2em;padding-bottom:4px;border-bottom:1px solid #cdd2d5}
.cg .cn{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.st{color:#5c6266;font-size:.8125rem}
.st.live,.st.t-live{color:#a34700;font-weight:700}
.st.t-provisional{color:#8a6114}
.st.t-abandoned{color:#6b5b8a}
.ev a,a.ev{color:#2a6480}
.r{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#5c6266}
.abs{border-left:3px dashed #5c6266;padding:10px 14px;color:#5c6266;margin:.6em 0}
.ref{border-left:3px solid #6b5b8a;padding:10px 14px;margin:.6em 0}
/* Routings 4 and 5. SOLID like the refusal, so it is not mistaken for the
dashed football absence, and a different rule colour so it is not mistaken for
the refusal either. Never red: the reader did nothing wrong. */
.una{border-left:3px solid #2a6480;padding:10px 14px;margin:.6em 0}
.ev{font-size:.8125rem}
main p a,main .abs a,a.ev,.ev a,td a,th a{display:inline-block;padding:13px 0;margin:-13px 0}
/* CMP-04 SectionNav. Anchors, which is the whole mechanism: no script, no
state, and the browser's own fragment navigation moves a keyboard reader's
focus for free. Sticky under nothing — Lite has no fixed chrome — so it simply
sits under the score where a reader meets it. */
nav.sn{display:flex;flex-wrap:wrap;gap:4px 16px;margin:.6em 0;
padding-bottom:6px;border-bottom:1px solid #cdd2d5}
nav.sn a{display:inline-block;min-height:44px;line-height:44px;font-weight:600}
/* UXR-6 Match Pulse, reduced. The bar is aria-hidden: the count and the word
beside it carry everything it shows, and six block characters read aloud are
noise. */
li.pl{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;
padding:6px 0;min-height:44px}
li.pl .k{width:4.5rem;font-variant-numeric:tabular-nums;font-size:.8125rem;
color:#5c6266}
li.pl .pb{letter-spacing:-.12em;color:#2a6480}
li.pl .p{font-size:.875rem}
.wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:20rem;font-size:.9375rem}
caption{text-align:left;color:#5c6266;font-size:.875rem;padding-bottom:6px}
th,td{padding:8px 6px;border-bottom:1px solid #cdd2d5;text-align:left}
th[scope=col]{font-size:.8125rem;color:#5c6266}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
/* BC-10 intelligence. li.m is a flex match row; a product entry is a block of
prose, so it gets its own rule rather than fighting that one. The negative
definition is product copy (XD-203, XD-204), given a visible treatment rather
than a footnote. */
li.b{list-style:none;padding:12px 0;border-bottom:1px solid #cdd2d5}
li.b .t{font-weight:700;display:inline}
li.b .s{font-variant-numeric:tabular-nums;color:#5c6266;font-size:.8125rem}
/* prose role: 1.6 relaxed leading, not the inherited 1.5 (06 §1.4). */
li.b p{margin:.4em 0;max-width:68ch;line-height:1.6}
.neg{border-left:3px solid #5c6266;padding-left:10px;font-size:.9375rem}
h2 .cn{font-variant-numeric:tabular-nums;color:#5c6266;font-weight:600}
dl{display:grid;grid-template-columns:1fr;gap:2px 12px;margin:.5em 0}
dt{color:#5c6266;font-size:.875rem}
dd{margin:0 0 .5em}
footer{max-width:44rem;margin:0 auto;padding:16px;border-top:1px solid #cdd2d5}
footer a{display:inline-block;min-height:44px;line-height:44px;margin-right:16px}
@media (min-width:480px){dl{grid-template-columns:9rem 1fr}dd{margin-bottom:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* DARK IS THE PRODUCT'S PRIMARY MODE (XD-706) and Lite was the one surface
without it. Every value here is the value Web's dark theme already resolves
for the same role, so the two products say the same thing in the same colour;
none is invented for Lite. Selectors are grouped so the whole theme is one
block a reader of this file can check against the light rules above. */
@media (prefers-color-scheme:dark){
body{color:#f5f6f7;background:#000}
/* UIUX-BR-01: .mark i left this list with the text wordmark it coloured. The
dark-surface lockup carries the brand teal in the artwork itself now, so no
rule tints it — and none may, since recolouring approved artwork is prohibited
(handbook section 07). This rule only swaps which of the two approved raster
images is that background — the light-surface one loaded by the rule above,
never fetched here because this media block did not match. */
.mark{background-image:url(/brand/soka365-logo-dark-surface.png)}
a{color:#36bfb3}
a:focus-visible,button:focus-visible,input:focus-visible{outline-color:#36bfb3}
/* THE COMPETITION-GROUP HEADING WAS MISSING FROM THIS LIST and measured
3.39:1 on the dark ground — found by rendering Lite at 320px in dark, not by
reading the stylesheet. .cg is the heading over a competition group AND over
every team-sheet role group, so the miss reached the board, the Atlas and the
whole of the new Line-ups zone. Its .cn count inherits from it.
NO BACKTICK MAY APPEAR IN THIS STYLESHEET: it is a template literal, and a
backtick in a comment ends it. This comment ended it twice. */
h2,.sub,.st,.r,dt,caption,th[scope=col],li.m .k,li.m time,li.b .s,h2 .cn,.cg,
li.lu .n,li.lu .k,li.pl .k{color:#828a8f}
li.pl .pb{color:#86bed2}
header,footer{border-color:#2b2f32}
li.m,li.b,li.lu,th,td,.cg,nav.sn{border-color:#2b2f32}
form.q input,form.q button{border-color:#828a8f;background:#121415;color:#f5f6f7}
.st.live,.st.t-live{color:#ff8c1a}
.st.t-provisional{color:#c08a3e}
.st.t-abandoned{color:#8a7ba8}
.abs{border-color:#828a8f;color:#828a8f}
.ref{border-color:#c4b0dc}
.ev a,a.ev{color:#86bed2}
.una{border-color:#86bed2}
.neg{border-color:#828a8f}
}