:root[data-theme="red"]{--bg:#f9f3f3;--fg:#261d1c;--muted:#906460;--border:#e4cfcd;--accent:#d32d1e;--accent-fg:#fafafa;--surface:#fdfcfc;--danger:#1f6cd7;--danger-fg:#fafafa;--sheen-color:rgba(211,45,30,0.4)} :root[data-theme="orange"]{--bg:#f9f6f3;--fg:#26211c;--muted:#836c57;--border:#e4d8cd;--accent:#ac5a13;--accent-fg:#fafafa;--surface:#fdfcfc;--danger:#196cdf;--danger-fg:#fafafa;--sheen-color:rgba(172,90,19,0.4)} :root[data-theme="yellow"]{--bg:#f9f8f3;--fg:#26241c;--muted:#797151;--border:#e4e0cd;--accent:#876e0b;--accent-fg:#fafafa;--surface:#fdfdfc;--danger:#136be7;--danger-fg:#fafafa;--sheen-color:rgba(135,110,11,0.4)} :root[data-theme="lime"]{--bg:#f6f9f3;--fg:#21261c;--muted:#65774f;--border:#dae4cd;--accent:#4d7e16;--accent-fg:#fafafa;--surface:#fdfdfc;--danger:#cb4024;--danger-fg:#fafafa;--sheen-color:rgba(77,126,22,0.4)} :root[data-theme="green"]{--bg:#f3f9f5;--fg:#1c261f;--muted:#517a5f;--border:#cde4d5;--accent:#1b813d;--accent-fg:#fafafa;--surface:#fcfdfc;--danger:#c7442a;--danger-fg:#fafafa;--sheen-color:rgba(27,129,61,0.4)} :root[data-theme="teal"]{--bg:#f3f9f9;--fg:#1c2625;--muted:#507875;--border:#cde4e2;--accent:#1b7e76;--accent-fg:#fafafa;--surface:#fcfdfd;--danger:#c7442a;--danger-fg:#fafafa;--sheen-color:rgba(27,126,118,0.4)} :root[data-theme="cyan"]{--bg:#f3f8f9;--fg:#1c2426;--muted:#54767e;--border:#cde0e4;--accent:#1a7a92;--accent-fg:#fafafa;--surface:#fcfdfd;--danger:#ca3f24;--danger-fg:#fafafa;--sheen-color:rgba(26,122,146,0.4)} :root[data-theme="blue"]{--bg:#f3f6f9;--fg:#1c2026;--muted:#5d718c;--border:#cdd7e4;--accent:#256dd2;--accent-fg:#fafafa;--surface:#fcfcfd;--danger:#c83f23;--danger-fg:#fafafa;--sheen-color:rgba(37,109,210,0.4)} :root[data-theme="navy"]{--bg:#f3f5f9;--fg:#1c1f26;--muted:#606f91;--border:#cdd4e4;--accent:#4b6cbb;--accent-fg:#fafafa;--surface:#fcfcfd;--danger:#af5442;--danger-fg:#fafafa;--sheen-color:rgba(75,108,187,0.4)} :root[data-theme="indigo"]{--bg:#f4f3f9;--fg:#1e1c26;--muted:#6f689a;--border:#d0cde4;--accent:#6c5cd6;--accent-fg:#fafafa;--surface:#fcfcfd;--danger:#be472f;--danger-fg:#fafafa;--sheen-color:rgba(108,92,214,0.4)} :root[data-theme="purple"]{--bg:#f7f3f9;--fg:#221c26;--muted:#806395;--border:#dbcde4;--accent:#9847d1;--accent-fg:#fafafa;--surface:#fdfcfd;--danger:#be4730;--danger-fg:#fafafa;--sheen-color:rgba(152,71,209,0.4)} :root[data-theme="magenta"]{--bg:#f9f3f8;--fg:#261c24;--muted:#8f5f87;--border:#e4cde0;--accent:#c423a9;--accent-fg:#fafafa;--surface:#fdfcfd;--danger:#256dd1;--danger-fg:#fafafa;--sheen-color:rgba(196,35,169,0.4)} :root[data-theme="pink"]{--bg:#f9f3f6;--fg:#261c20;--muted:#916175;--border:#e4cdd7;--accent:#c43973;--accent-fg:#fafafa;--surface:#fdfcfc;--danger:#376fbd;--danger-fg:#fafafa;--sheen-color:rgba(196,57,115,0.4)} :root[data-theme="brown"]{--bg:#f9f5f3;--fg:#26201c;--muted:#866a59;--border:#e4d6cd;--accent:#9f603c;--accent-fg:#fafafa;--surface:#fdfcfc;--danger:#4371b1;--danger-fg:#fafafa;--sheen-color:rgba(159,96,60,0.4)} :root[data-theme="gray"]{--bg:#f6f6f6;--fg:#212121;--muted:#707070;--border:#d9d9d9;--accent:#707070;--accent-fg:#fafafa;--surface:#fcfcfc;--danger:#d82626;--danger-fg:#fafafa;--sheen-color:rgba(112,112,112,0.4)} :root[data-theme="black"]{--bg:#f6f6f6;--fg:#212121;--muted:#707070;--border:#d9d9d9;--accent:#313131;--accent-fg:#fafafa;--surface:#fcfcfc;--danger:#631111;--danger-fg:#fafafa;--sheen-color:rgba(49,49,49,0.4)} :root[data-theme="jungle"]{--bg:#f4f9f3;--fg:#1e261c;--muted:#587a51;--border:#d1e4cd;--accent:#137600;--accent-fg:#ffffff;--surface:#fcfdfc;--danger:#a31800;--danger-fg:#ffffff;--sheen-color:rgba(19,118,0,0.4)} @media (prefers-color-scheme: dark) { :root[data-theme="red"]{--bg:#231615;--fg:#efebeb;--muted:#a88582;--border:#563c39;--accent:#e76255;--accent-fg:#0f0f0f;--surface:#322120;--danger:#4d8ce5;--danger-fg:#0f0f0f;--sheen-color:rgba(231,98,85,0.55)} :root[data-theme="orange"]{--bg:#231c15;--fg:#efedeb;--muted:#a48e7b;--border:#564639;--accent:#d27b2e;--accent-fg:#0f0f0f;--surface:#322820;--danger:#5091eb;--danger-fg:#0f0f0f;--sheen-color:rgba(210,123,46,0.55)} :root[data-theme="yellow"]{--bg:#232015;--fg:#efeeeb;--muted:#9f9775;--border:#565039;--accent:#ae942a;--accent-fg:#0f0f0f;--surface:#322e20;--danger:#5697f1;--danger-fg:#0f0f0f;--sheen-color:rgba(174,148,42,0.55)} :root[data-theme="lime"]{--bg:#1d2315;--fg:#edefeb;--muted:#8a9e73;--border:#485639;--accent:#73a539;--accent-fg:#0f0f0f;--surface:#293220;--danger:#e37863;--danger-fg:#0f0f0f;--sheen-color:rgba(115,165,57,0.55)} :root[data-theme="green"]{--bg:#15231a;--fg:#ebefec;--muted:#76a084;--border:#395643;--accent:#3ca860;--accent-fg:#0f0f0f;--surface:#203226;--danger:#de7965;--danger-fg:#0f0f0f;--sheen-color:rgba(60,168,96,0.55)} :root[data-theme="teal"]{--bg:#152322;--fg:#ebefef;--muted:#749f9b;--border:#395653;--accent:#3da59d;--accent-fg:#0f0f0f;--surface:#203230;--danger:#df7a65;--danger-fg:#0f0f0f;--sheen-color:rgba(61,165,157,0.55)} :root[data-theme="cyan"]{--bg:#152023;--fg:#ebeeef;--muted:#7899a2;--border:#395056;--accent:#389fb9;--accent-fg:#0f0f0f;--surface:#202e32;--danger:#e2725b;--danger-fg:#0f0f0f;--sheen-color:rgba(56,159,185,0.55)} :root[data-theme="blue"]{--bg:#151b23;--fg:#ebedef;--muted:#8090a7;--border:#394556;--accent:#528ee1;--accent-fg:#0f0f0f;--surface:#202732;--danger:#e06a52;--danger-fg:#0f0f0f;--sheen-color:rgba(82,142,225,0.55)} :root[data-theme="navy"]{--bg:#151923;--fg:#ebecef;--muted:#828da8;--border:#394256;--accent:#718bc9;--accent-fg:#0f0f0f;--surface:#202532;--danger:#c57767;--danger-fg:#0f0f0f;--sheen-color:rgba(113,139,201,0.55)} :root[data-theme="indigo"]{--bg:#171523;--fg:#ecebef;--muted:#8b86ab;--border:#3d3956;--accent:#897cde;--accent-fg:#0f0f0f;--surface:#222032;--danger:#d56a55;--danger-fg:#0f0f0f;--sheen-color:rgba(137,124,222,0.55)} :root[data-theme="purple"]{--bg:#1d1523;--fg:#eeebef;--muted:#9a84a9;--border:#4a3956;--accent:#ae6fdb;--accent-fg:#0f0f0f;--surface:#2a2032;--danger:#d56c57;--danger-fg:#0f0f0f;--sheen-color:rgba(174,111,219,0.55)} :root[data-theme="magenta"]{--bg:#231521;--fg:#efebef;--muted:#a882a2;--border:#563951;--accent:#e152c9;--accent-fg:#0f0f0f;--surface:#32202f;--danger:#518de1;--danger-fg:#0f0f0f;--sheen-color:rgba(225,82,201,0.55)} :root[data-theme="pink"]{--bg:#23151b;--fg:#efebed;--muted:#a88292;--border:#563945;--accent:#d36995;--accent-fg:#0f0f0f;--surface:#322027;--danger:#5c8dd0;--danger-fg:#0f0f0f;--sheen-color:rgba(211,105,149,0.55)} :root[data-theme="brown"]{--bg:#231a15;--fg:#efedeb;--muted:#a58c7d;--border:#564439;--accent:#c0805a;--accent-fg:#0f0f0f;--surface:#322620;--danger:#6991c6;--danger-fg:#0f0f0f;--sheen-color:rgba(192,128,90,0.55)} :root[data-theme="gray"]{--bg:#1c1c1c;--fg:#ededed;--muted:#919191;--border:#474747;--accent:#909090;--accent-fg:#0f0f0f;--surface:#292929;--danger:#e46969;--danger-fg:#0f0f0f;--sheen-color:rgba(144,144,144,0.55)} :root[data-theme="black"]{--bg:#1c1c1c;--fg:#ededed;--muted:#919191;--border:#474747;--accent:#d8d8d8;--accent-fg:#0f0f0f;--surface:#292929;--danger:#f7cfcf;--danger-fg:#0f0f0f;--sheen-color:rgba(216,216,216,0.55)} :root[data-theme="jungle"]{--bg:#112800;--fg:#edefeb;--muted:#88a076;--border:#455639;--accent:#78c400;--accent-fg:#112800;--surface:#273220;--danger:#f76a63;--danger-fg:#112800;--sheen-color:rgba(120,196,0,0.55)} } /* The shared stylesheet, narrowed to the rules docs/next-actions.md item 7 names: body, type, the button, the footer, safe-area insets. Not here: custom-property values (theme.go's CSS() generates 4pgno's per-theme blocks instead, this file only consumes var(--token) names) and every component rule with no caller yet (rosters, courts, print), item 8c's job, once a page needs them (owner, 2026-09-06: nothing is built ahead of a caller). .primary-btn has display: inline-block and text-decoration: none because the tip jar page's use is an styled as a button. Item 8c added the player view's rules below, once item 8b gave this file a caller for them. The property values below (44px touch targets throughout, the svh list cap) are expressed over this file's nine token names (--surface/--border/--fg/--muted and the rest), which theme.go's CSS() generates: a rule written against any other token name would resolve to nothing. Courts and print rules still wait for Phase 4, per this file's own rule above. */ * { box-sizing: border-box; } /* The type scale (owner, 2026-10-16: one short scale, not a size per rule): every other text size on the phone and print pages is one of these. --fs-body is 17px at the browser's 16px default, the body rule's own size (that rule and its test keep the literal px), and in rem like the rest, so a heading set to it stays above help text set to --fs-m at any default size. A card's small label (.tbl h3) is a label, not a section heading. Outside the scale, each with its reason beside it: the Apple sign-in button's text, matched to Google's and Yahoo's fixed brand art; the schedule's name index (--fs-index, the size schedule.js's INDEX_* constants were measured at in print); the schedule's printed head and foot (9pt in @page, set for paper before the scale); the seat view's table number, fitted in px by seat.js; the 80px letter in a tonight card; and the display and television pages, sized to the screen (vmin, vh and --fs). */ :root { --fs-xs: 0.75rem; --fs-s: 0.85rem; --fs-m: 0.95rem; --fs-body: 1.0625rem; --fs-l: 1.25rem; --fs-xl: 1.6rem; --fs-xxl: 2rem; --fs-index: 0.9rem; } body { margin: 0; /* 17px, not a default 16px or 1rem, matching .claude/rules/webui.md ("body is 17px with inputs font: inherit"): a future input on a page sharing this stylesheet inherits 17px through font: inherit rather than the browser default, which iOS Safari zooms the page for on focus below 16px. No input exists on tipjar.html today, but the stylesheet is shared, and getting this wrong here is exactly the gap a blind review of e4b41aa found. */ font: 400 17px/1.5 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--fg); max-width: 480px; margin-inline: auto; padding: 1.5rem 1rem 2rem; /* The viewport meta tag sets viewport-fit=cover so the page can draw under the status bar/home indicator/Dynamic Island; without these, content starts drawing under those rather than beside them. env() falls back to 0 on devices without an inset, so this is a no-op everywhere else. */ padding-top: calc(1.5rem + env(safe-area-inset-top)); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); padding-left: calc(1rem + env(safe-area-inset-left)); padding-right: calc(1rem + env(safe-area-inset-right)); } /* On a computer the column widens with the window (owner, 2026-09-26: the phone column wasted most of a desktop window), up to 60rem. A phone is narrower than either width, so nothing changes there. The display and the television page set their own width. On paper the page is the column: the printed schedule used a third of the sheet's width at the phone column (owner, the same day). */ @media screen and (min-width: 40rem) { body { max-width: 60rem; } } @media print { /* A few millimeters inside the page's own margins: in Safari's print a box ending exactly at the printable edge lost its right border (the owner's printout, 2026-09-26: the rounded boxes and the "find your name" table cut off at the right). */ body { max-width: none; padding: 0 3mm; } } h1, h2, h3 { line-height: 1.25; /* A league's name can be 64 characters with no space; a heading breaks it rather than run past the page on a phone or on paper (found by webtests/tests/print.spec.ts, 2026-09-26). */ overflow-wrap: anywhere; } h1 { font-size: var(--fs-l); margin: 0 0 0.75rem; } h2 { font-size: var(--fs-l); margin: 1rem 0 0.5rem; } /* The page's own title (Tonight, Settings, Schedule, Instruction sheet) is larger than the h2 section headings under it, and those larger than a field's label (--fs-s, below), each step plainly visible (owner, 2026-10-14: League settings, Name, description and icon, and Name were too close in size). */ .page-title { font-size: var(--fs-xl); /* h2's own margins, so an

title (the pages outside a league, whose top line is the site bar) sits as an

one does. */ margin: 1rem 0 0.5rem; } h3 { font-size: var(--fs-body); margin: 1.25rem 0 0.25rem; } p { margin: 0.25rem 0 0.75rem; } a { color: var(--accent); } /* The main action of a page or form, as a link or a button: the same look as button.primary below (owner, 2026-09-26: Save and Create a league were smaller than Start the next round), the same size as every other button. */ .primary-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; min-height: 44px; padding: 0.55rem 1.1rem; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: var(--accent-fg); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } /* A page's main button fills the phone column and is its label's width on a computer (owner, 2026-10-14). In a row with other links (the public pages' closing row) it takes the row's first line on a phone and the links wrap under it, so no two controls of different widths sit side by side (Apple, Buttons: "placing two buttons of different sizes near each other can make the interface look confusing"). A list of equal choices (the television claim page's leagues) is a stack of them, one size, a coherent set (the same page: "you signal that the options form a coherent set of choices"). (Owner, 2026-10-14; Material Design 3, Buttons: "Button container width can be responsive, which allows it to stretch horizontally", the filled style "ideally for only one action on a page"). Below 40rem the column is the phone's, which a narrowed window snaps to as well. The same holds for a control that is not a main button but stands alone on its line ("Invite another organizer" on the settings page), and for a set stacked on a phone (the printables' two links), each the column's width (owner, 2026-10-14). */ .phone-wide { width: 100%; box-sizing: border-box; } @media screen and (min-width: 40rem) { .phone-wide { width: auto; } } /* A text link alone on its line, outside any sentence ("Terms." closing the privacy page, "Privacy." the terms page): it keeps the text link's look (owner, 2026-10-14) and takes the project's 44 px tap height. WCAG 2.2 SC 2.5.8's Inline exception reads "The target is in a sentence or its size is otherwise constrained by the line-height of non-target text" (w3.org Understanding page, updated 11 May 2026, read 2026-10-14); a one-word line is not a sentence, so the floor is kept rather than leaning on the second clause. */ .solo-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } .primary-btn:disabled { opacity: 0.5; cursor: default; } /* Links and buttons (owner, 2026-10-14, replacing item 50's rule that every navigation link take this style): a control goes somewhere as a link and does something as a button, and looks like what it does (W3C ARIA APG, Button: "both the appearance and role of a widget match the function it provides"). A link inside a sentence is a text link (the footer's tip jar, the contact addresses, "Privacy and terms.", the about page's game links), and so are the one-word "Privacy." and "Terms." lines that close the privacy and terms pages (owner, the same day: Privacy and terms as text links), which take .solo-link for the tap height. A link standing on its own as a control, in a top row or a list, takes .nav-link, a secondary button's shape; a page's main way forward may take .primary-btn (GOV.UK's start button is a link). The plan's "Links and buttons" entry has the sources. min-height and padding are copied from the button rule below so a .nav-link measures the same touch target as a real button; display: flex centers the text inside that box the way a real