/* ═══════════════════════════════════════════════════════════════════════════ Mock Draft Nation — THE RULEBOOK (amd-rules.css) Draft 1 · Sept 16, 2026 · for Justin's approval One file. Every v2 page links it, and no page defines its own sizes, colors, spacing, corners, shadows or animation timing. That is the whole idea: a Sleeper-level product is not a pile of good decisions, it is a small number of decisions that every screen obeys. Where these values came from: the v2 landing page, which was already cut down to eight sizes and two weights and fixed for contrast (Sept 12–14). The landing was the only page following them — the Big Board was running 24 font sizes, 5 weights, 68 hex colors, 22 corner radii and 21 shadows. This file lifts the landing's rules into a shared place, and adds the few things an app needs that a marketing page does not (inputs, data tables, touch targets, states, motion timing). If something seems to need a value that is not here, the answer is to redesign that thing — not to add a value. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── 1. TYPE SIZES — eight, plus one for phone inputs ──────────────────── --t-micro is for SHORT UPPERCASE CODES only (QB, RD 1, 1ST). Never a sentence, never a label a person has to read to use the page. It was 9px on the landing; the Big Board showed that 8.5–9px codes are unreadable on a phone, so the floor is 10. */ --t-micro:10px; --t-tiny:11px; /* captions, meta, eyebrows */ --t-small:13px; /* secondary copy, rows, buttons */ --t-base:15px; /* body copy, primary rows */ --t-input:16px; /* every text input on a phone — below 16 iPhones zoom in */ --t-lead:18px; /* card headings, the lede */ --t-h3:20px; /* panel titles */ --t-stat:27px; /* the one big number */ --t-h2:clamp(24px,5.4vw,36px); --t-h1:clamp(40px,9.6vw,72px); /* ── 2. WEIGHTS — two ───────────────────────────────────────────────────── Hierarchy comes from size, width and color, not from bolding. */ --w-normal:400; --w-bold:700; --w-med:500; /* emphasis, and what the italics became when American Grotesk arrived with no italic cut */ /* ── 3. WIDTH IS A FACE NOW, NOT AN AXIS (see amd-fonts.css) ────────────── Contrast still lives in how WIDE the letters are rather than how heavy. What changed on 1 Oct 2026 is the mechanism. Hubot and Mona were variable, so width was a dial any rule could turn from 68 to 118. American Grotesk is four static cuts, and a browser given font-stretch or a "wdth" setting on a static font narrows nothing and reports nothing — it drops the declaration in silence. 338 rules were written that way. So the five roles became two faces and some tracking: the one big line -> var(--font-display) American Grotesk Condensed section headings -> var(--font-display) numbers and codes -> var(--font-display) + tabular figures. EVERY number, loud or quiet. Nine files mix loud and quiet numbers in one table, and sending only the bold ones to the condensed cut left columns at two different widths — a table that reads as two tables. Both ways were rendered before this was decided. Quiet numbers step back in COLOUR. eyebrows, kickers -> var(--font-text) + --track-caps, small and upper sentences -> var(--font-text) The --wd-* tokens are gone. Nothing may reintroduce font-stretch or font-variation-settings: there is no axis left for them to move, and the only thing they can do now is look like a decision nobody applied. */ --track-display:-0.022em; --track-caps:0.06em; /* uppercase labels only */ /* ── 4. SPACING — ten steps, nothing in between ────────────────────────── Padding, gaps and margins use only these. 2px is allowed for hairline nudges inside tiny tags and nowhere else. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px; --s10:96px; /* ── 5. CORNERS — sized by the thing, five total ─────────────────────── */ --r-xs:4px; /* tiny tags (position codes) */ --r-sm:8px; /* chips, buttons, small controls */ --r-md:12px; /* rows, inputs, inner blocks */ --r-lg:16px; /* cards, panels, sheets */ --r-pill:999px; /* ── 6. COLOR ───────────────────────────────────────────────────────────── ELEPHANT AND TUSK, 17 Oct 2026. Elephant-grey grounds, tusk-ivory buttons, cream type, and no accent hue. Justin picked it from ten palettes shown on the real pages; the panel's reasoning is in docs/IDEAS.md under "A clean-sheet palette from a panel". The colour on a page now comes from the data (club colours, the career ladder) and the one button, not from the chrome. An ice blue (#a9c4e6) is on file for a "selected" state only, if selection ever proves hard to see. The accent is a role, not a hue: charcoal on light, tusk on dark. It NEVER carries text. Buttons use --accent-cta with --on-cta words (light: white text 15.11:1 on #252523, set in #fffdf9); accent words use --accent-ink. WHAT CAME BEFORE, for the record: The palette became the brand's on 1 Oct 2026: Deep Sea #071a2b, cream #efe6d2, Persimmon #e4591f, gold #c99a3f. Two figures in this file moved with it and both are stated above as measured, not remembered — white on the button went 4.94 to 4.72, and the focus ring's range is further down. One thing improved by accident and is worth knowing: #ff6600 was 2.94:1 on white, BELOW the 3:1 a non-text element needs. Persimmon is 3.65. The accent has been slightly out of specification on every light surface on the site, and the brand change is what fixed it. */ --accent:#4a4741; /* charcoal on light (tusk #d9cdb0 on dark) — lines, rings, fills, icons, no text */ --accent-cta:#252523; /* primary button fill (tusk ivory #ede4cc on dark) */ --on-cta:#fffdf9; /* the words on that button (#1c1c1a on dark) */ --accent-ink:#3a3731; /* accent words (#e9dcbc on dark) */ --accent-wash:rgba(37,37,35,.06); /* The focus ring is a third orange, and it has to be, because WCAG 1.4.11 asks a focus indicator for 3:1 against what is behind it and #e4591f measured 2.69–2.94:1 on every light surface this file defines: --tint 2.69 --bg 2.76 --panel2 2.86 --panel 2.94 Three near-misses and one dead-on 2.94, which is the worst kind of failure — it looks fine on a white page to anyone who already knows where the focus is. On dark the same orange is 5.65–6.29, so the answer is not one colour but the right one per theme: --accent-cta on light, --accent on dark. Since 17 Oct 2026 those are charcoal #252523 on light (13.38–15.11 across --tint, --bg, --panel2, --panel) and tusk #d9cdb0 on dark (7.68–10.58 across the dark surfaces) — well clear of 3:1. Every focus outline on every page points here, so the ring is one decision. scripts/contrast-test.js measures it against each page's own surfaces in both themes. */ --ring-focus:var(--accent-cta); /* ── BONE, NOT WHITE — 2 Oct 2026 ───────────────────────────────────── The ground was #f5f6f9 with #ffffff cards: a cool grey page under pure white. Justin, seeing it beside the new navy: "straight up white is too bright … something easier on the eyes but still white and expensive looking." Pure white is gone from the light theme. Nothing on a page is #ffffff any more — the brightest surface is #fffdf9, which still reads as white beside the bone ground but stops the cards glaring. The whole theme also turns warm, and that is the part that matters more than the brightness. The dark theme reads in CREAM on navy. A cool grey light theme meant the product had a warm personality in one mode and a clinical one in the other, which is two palettes, not a theme switch. Navy, cream and bone is one palette seen in two lights. The text ramp is re-hued, not re-valued: every step keeps the contrast it was chosen for, so nothing that passed the contrast gate stops passing. */ --bg:#f7f5f1; /* the page — warm paper */ --panel:#fffdf9; /* cards — the brightest thing here, and not white */ --panel2:#faf8f4; /* recessed wells inside cards */ --tint:#f2efe9; /* inputs at rest, hover fills */ --ink:#1b1a17; /* primary text */ --soft:#57524a; /* secondary text 7.5:1 */ --muted:#6d675c; /* tertiary text 5.2:1 (4.6 on --tint) — the lightest text allowed */ --faint:#a39c90; /* NOT text. placeholders' dashes, disabled icons */ --ghost:#cac3b6; /* NOT text. drag handles, empty tracks */ --line:#e8e3da; /* borders */ --line2:#efebe3; /* dividers inside a card */ --hair:#f4f1ec; /* the faintest row tint */ --ring:#e0d9cd; /* input borders */ /* The ground inside a field. A control a reader is meant to type in needs its own surface, or it reads as one more number on the page — which is exactly what happened to the career forecast. */ --field:#fdfbf7; /* The disc behind a school crest. Light in BOTH themes on purpose: every one of these marks is drawn to sit on white, and a dark-ink crest on a dark card loses its edges. See schoolLogo() in position-colors.js. WARM, since 2 Oct 2026. It was #f2f4f8 — a cool near-white whose blue channel is its highest — scattered in small discs across a bone page and cream-inked cards. Three off-whites pulling different ways is the thing Justin could feel and could not name: "i cant tell if something looks off between the cream and the grey." Nothing here is cool any more. */ --logo-disc:#f8f6f2; /* ── TIER TINTS ─────────────────────────────────────────────────────────── Six hues a person can put on a tier of their own board, and nothing else. THIS IS NOT THE POSITION COLOUR-CODING THE RULEBOOK BANS, and the difference is not a technicality. Position colour is the site deciding that every corner is purple, which puts a legend between a reader and a list and makes the board harder to read the longer it gets. A tier tint is the USER saying "these eight are my blue chips" on a board they built. The colour means what they decided it means, on their own page, and it can be turned off. WHY THESE ARE HUES AND NOT A SCALE. A ladder from green to red would be the site grading their tiers, which is the same overreach in a different costume. Six unranked hues let a person group by whatever they are actually thinking — need, scheme fit, conviction — rather than by better and worse. HOW FAINT. --tier-N is the row wash and --tier-N-edge is the rule down its left side. The wash is mixed from the surface, so it is 7% of a hue over whatever the page's panel is and moves text contrast by hundredths; the edge carries the actual identification, which is why it is the saturated value. npm run contrast reads the computed colour and would fail on a wash dark enough to matter. SIX, NOT EIGHT. Justin asked for about six. More than that and a person is choosing between two blues, which is a decision with no answer. */ --tier-1:color-mix(in srgb,#2563eb 7%,var(--panel)); --tier-2:color-mix(in srgb,#0891b2 7%,var(--panel)); --tier-3:color-mix(in srgb,#059669 7%,var(--panel)); --tier-4:color-mix(in srgb,#b45309 7%,var(--panel)); --tier-5:color-mix(in srgb,#be123c 7%,var(--panel)); --tier-6:color-mix(in srgb,#6d28d9 7%,var(--panel)); --tier-1-edge:#2563eb; --tier-2-edge:#0891b2; --tier-3-edge:#059669; --tier-4-edge:#b45309; --tier-5-edge:#be123c; --tier-6-edge:#6d28d9; --borderHover:#cdd3de; /* ── WHAT EACH SURFACE MEANS ──────────────────────────────────────────── Three grounds and two accents, each with a job. Written down because the Compare room proved what happens without it: a dark overlay mixing its own thirteen whites and four greys, which reads as a clash however well the hues get on. --panel you can act here — a prediction, a note, a comp --panel2 the record being shown to you — production, tape, tracking --navy the record you have already made permanent: the receipt, Scout Mode, Compare. Text on it is --on-dk / --on-dk-soft. --accent-cta the one action on the screen. Never more than one. --gold-lt structure on navy: rules, marks, the line beside a statement. It is what "this is on the record" looks like, and it is never an action. Gold and orange are not two accents competing for the same job. Gold is structural and orange is the alarm, which is why both can sit on one screen without arguing. */ /* ELEPHANT, 17 Oct 2026. --navy keeps its name (renaming 1,000 reads is churn, not a change of mind) and now holds elephant grey #252523, the same value as the dark page ground: the Deep Sea relationship, bar and dark page at one lightness, carried over. */ --navy:#252523; /* elephant — dark identity surfaces: hero, receipt, Scout Mode */ /* THE NAVY BAND, LIFTED, FOR DARK. A band on a cream page is marked by going down to --navy. On a DARK page there is nowhere to go: the ground is #0c1725 and pure black is only 1.165:1 below it, so --navy on it measures 1.023:1 — below perception, and a band that sinks reads as a smudge. This is the nav decision of 2 Oct applied to a section: a dark interface signals a band by LIFTING. Since 17 Oct 2026 the page is elephant #252523 and the lifted band is #363634: 1.27:1 above the page and 1.11:1 above --panel #2f2f2d, so the two kinds of band stay distinguishable from each other as well as from the ground. */ --navy-lift:#363634; --dk:#252523; --dk2:#323230; /* The floor of a full-screen dark room — Scout Mode and Compare both fade to it. Darker than --navy on purpose: an overlay that covers the whole viewport needs to sit UNDER the panels it contains, or the room and its contents are the same surface and nothing in it has an edge. */ --dk0:#1e1e1c; /* Text on navy, and it is the SAME cream the nav is set in. These were #eaf0f7 and #a9b8ca — cool blue-whites, correct against navy in isolation and wrong beside a cream wordmark on the same bar. One reading colour on navy, not two. */ /* --on-dk-soft lifted 17 Oct 2026, #b9b2a4 -> #c2bcaf: on the lighter elephant plates its lowest pairing (a selected tape row, #464644 after compositing) measured 4.48:1; it is 5.00:1 now. */ --on-dk:#efe6d2; --on-dk-soft:#c2bcaf; /* text on navy */ --gold:#8a6516; /* gold TEXT on light */ --gold-lt:#c99a3f; /* gold on navy, and gold lines */ --good:#e8f6ee; --good-ink:#0a7a48; /* backgrounds / text */ --mid:#fff2e2; --mid-ink:#9c5406; --bad:#fdecec; --bad-ink:#b42318; --low:#f2efe9; --low-ink:#57524a; --warn-ink:#9c5406; --glow-a:rgba(120,108,84,.06); --glow-b:rgba(37,99,235,.04); /* ── 7. SHADOWS — five, used to mean "this is raised" ─────────────────── */ --shadow-sm:0 1px 2px rgba(16,24,40,.05); --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04); --shadow-md:0 6px 14px -6px rgba(16,24,40,.12),0 2px 5px -2px rgba(16,24,40,.06); --shadow-lg:0 14px 30px -12px rgba(16,24,40,.16),0 4px 10px -6px rgba(16,24,40,.08); --shadow-xl:0 30px 56px -20px rgba(16,24,40,.22),0 10px 20px -10px rgba(16,24,40,.10); --focus:0 0 0 3px rgba(37,37,35,.20); /* ── THE LIFT UNDER A PRIMARY BUTTON — two values, not five ──────────── The filled orange CTA carried a different coloured shadow everywhere it appeared. On the landing page alone, measured 2026-09-29: .btn.accent 0 6px 16px -6px rgba(196,71,0,.50) .btn.accent:hover 0 10px 22px -8px rgba(196,71,0,.55) .hero .cta .primary 0 10px 24px -8px rgba(196,71,0,.45) .hero .cta .primary:h 0 14px 30px -10px rgba(196,71,0,.50) .close .cta .primary 0 10px 24px -8px rgba(196,71,0,.45) — the same component, styled twice, at nearly the same size (44px and 47px tall), so nothing about the difference was proportional to anything. Core Lists had a sixth. A reader never sees any one of them as wrong; what they see is a page where the light comes from a slightly different place each time, which is most of what "assembled rather than designed" actually is. Two values now: at rest, and lifted on hover. The share-card renderers (card.html, share.html) keep their own — they draw artwork on dark team colours and are not site chrome. */ --lift-cta:0 8px 20px -8px rgba(0,0,0,.30); --lift-cta-hover:0 12px 26px -8px rgba(0,0,0,.38); /* ── 8. MOTION — three speeds, two curves ──────────────────────────────── fast = a press or hover acknowledging the finger base = something on the page changing state slow = a sheet, card or panel arriving No shimmer sweeps, no pulsing glows, no fade-in on every scroll. */ --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --ease:cubic-bezier(.2,.8,.2,1); --ease-sheet:cubic-bezier(.32,.72,0,1); /* ── 9. TOUCH ─────────────────────────────────────────────────────────── */ --tap:44px; /* nothing tappable on a phone is smaller than this */ } /* Dark theme — re-thought, not inverted. */ /* html[data-amd-surface="dark"] is here from 2 Oct 2026. A page can be a dark SURFACE while the theme is light — the mock draft room is, always — and until now the rulebook spoke only to the dark THEME, so each such page kept its own copy of the dark ground to cover the gap. The mock draft's copy had drifted to #0c1420 against the rulebook's #0c1725: two navies three units apart, one of them the very palette the rulebook had just adopted FROM that page. Serving the surface here is what lets the copy be deleted. */ body.dark, html.amd-dark body, html[data-amd-surface="dark"] body{ /* THE DARK GROUND, 1 Oct 2026. The previous one was #0c1420 — hue 216° at 45% saturation, which is not the brand navy (#071a2b is hue 208° at 72%) and is not a neutral either. It was a colour nobody chose, and it read as muddy because it carried enough blue to be a hue and not enough to be the brand's. The fix was not to swap blue for grey. It was to keep the family and take the saturation out: 45% down to 14%. The warmth now comes from the TYPE — --ink is cream, the same cream the mark and the wordmark use — so the ground stays cool and quiet while everything the eye lands on is warm. That is the arrangement Justin picked out of the studio's own chrome. Deep Sea is unchanged and is still the bar, in both themes. */ /* ── THE DARK GROUND, 2 Oct 2026: NEUTRAL NEAR-BLACK ──────────────────── Three attempts got here. The first was #0c1420, hue 216 at 45% saturation — a blue nobody chose, and the one Justin called "too blue". The second took the saturation out but kept the family, #15171c. The third lifted it to #23272f so the Deep Sea bar would have something to sit against, which fixed the boundary and left a page two steps lighter than he wanted. All three were answers to the same question: how do you make a navy bar read against a dark page. Justin built the answer in the share studio and it dissolves the question instead of answering it — THE CHROME IS NOT NAVY IN DARK MODE. The page, the bar and the cards are one neutral near-black family, a hairline separates them, and the brand is carried by the mark, the wordmark and the orange. So the ground is neutral: 2-4% saturation against the 45% it started at. Cream is the reading colour, not a blue-grey — every word on the page is warm and the floor it sits on is not. Orange is the only accent left, and it is doing more work than before, which is why it is Persimmon at full strength rather than the muted-for-dark variant. THAT WAS REVERSED ON 2 OCT 2026, BY LOOKING AT IT. The neutral ground shipped and the site went black. Justin's read, once it was live on every page rather than in a studio: the mock draft "just looks so great on that blue background", and black under a Persimmon accent "looks too much like halloween". He is right about the second one — orange on near-black is a seasonal palette whether or not anybody intended it, and nothing above was wrong about saturation except the conclusion. The ground is NOT a new blue invented for this. It is the mock draft room's, which has been on screen for weeks and is the thing he was pointing at: --room-bg #0c1725, --room-panel #141f2e, --room-panel2 #111a26. Taking those exact values rather than mixing a fresh navy is the difference between adopting a palette people already like and adding a sixth one for somebody to reconcile later. It also settles the nav: the room's bar is #071a2b, and the three bands are, top to bottom, the nav at #071a2b, the ticker at #141a21 and the page at #0c1725. WHAT SEPARATES THEM — corrected 3 Oct 2026. This paragraph used to say the bar was "DARKER than its page", and that is not true. Measured: nav #071a2b hue 208 sat 72% lightness 10% luminance 0.0096 ticker #141a21 hue 212 sat 25% lightness 10% luminance 0.0100 page #0c1725 hue 214 sat 51% lightness 10% luminance 0.0082 The nav is marginally LIGHTER than the page, and nav-to-page is 1.023:1 — no perceptible value step at all. All three sit at the same lightness. What distinguishes them is SATURATION, and what actually draws the edge under the bar is its own hairline, #1b3a4f, at 1.48:1 against it. That is a legitimate way to build a stack, and it is the one in use. The point of rewriting this is that the old sentence named a mechanism that was not operating, so anyone reasoning from it — "the bar is darker, so I can darken the page and keep the relationship" — would have been reasoning from a fact that was never true. Justin asked why there were two blues; the honest answer is one hue family separated by chroma, not by value. The ticker was #0b0b0c until 3 Oct, which WAS a real value step (1.12:1 against the nav). Graphite #141a21 is 1.01:1, so the strip now reads by chroma like everything else. Justin chose it with that trade-off in front of him: it ties the band to the elephant's own grey, which no other surface on the site does. Cream stays the reading colour. Cream on navy is the oldest expensive pairing there is, and the ink work from this session carries over intact. ELEPHANT, 17 Oct 2026. The navy family is retired. Justin, on the navy: "im worried our navy blue looks too AI and the orange isn't serious enough." The ground is elephant grey, warm and nearly neutral, and the separation above still holds by the same mechanism: one family, bands lifted by --navy-lift, hairlines between. Cream stays. page #252523 panel #2f2f2d panel2 #2a2a28 tint #292927 The lighter ground cost the quiet greys some contrast, so they moved up: --soft #c4c1ba (7.46:1 on --panel), --muted #aaa69e (5.53:1 on --panel, 4.99:1 on --navy-lift, the lowest surface it reads on). */ --bg:#252523; --panel:#2f2f2d; --panel2:#2a2a28; --tint:#292927; --ink:#efe6d2; --soft:#c4c1ba; --muted:#aaa69e; --faint:#7a7770; --ghost:rgba(255,255,255,.22); --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.06); --hair:rgba(255,255,255,.03); --ring:rgba(255,255,255,.12); --borderHover:rgba(255,255,255,.18); --field:rgba(255,255,255,.04); /* Slightly brighter than the light theme's, because it is carrying the whole legibility of the crest against a dark card. */ --logo-disc:#ece8e0; /* The same six, brightened for a dark panel: the light theme's values go muddy on navy, and a 7% mix of a dark hue into a dark surface is invisible rather than faint. The wash is lifted to 12% because a dark surface has less headroom above it than white has below it. */ --tier-1:color-mix(in srgb,#5182ef 12%,var(--panel)); --tier-2:color-mix(in srgb,#22b8d6 12%,var(--panel)); --tier-3:color-mix(in srgb,#34d399 12%,var(--panel)); --tier-4:color-mix(in srgb,#f0a14a 12%,var(--panel)); --tier-5:color-mix(in srgb,#fb7185 12%,var(--panel)); --tier-6:color-mix(in srgb,#a78bfa 12%,var(--panel)); --tier-1-edge:#5182ef; --tier-2-edge:#22b8d6; --tier-3-edge:#34d399; --tier-4-edge:#f0a14a; --tier-5-edge:#fb7185; --tier-6-edge:#a78bfa; /* TUSK on dark, 17 Oct 2026: the accent role in ivory, the button an ivory plate with dark words (13.47:1), accent words a paler ivory. The focus ring is --accent, 7.68:1 at the lightest dark surface (--navy-lift) up to 10.58:1 at the darkest (--dk0); a focus ring needs 3:1. */ --accent:#d9cdb0; --accent-cta:#ede4cc; --on-cta:#1c1c1a; --accent-ink:#e9dcbc; --gold:#e0bd73; --accent-wash:rgba(237,228,204,.08); --focus:0 0 0 3px rgba(237,228,204,.22); --lift-cta:0 8px 20px -8px rgba(0,0,0,.45); --lift-cta-hover:0 12px 26px -8px rgba(0,0,0,.55); --ring-focus:var(--accent); --good:rgba(95,214,161,.13); --good-ink:#7ee6bd; --mid:rgba(232,176,75,.13); --mid-ink:#f2d18a; --bad:rgba(224,112,95,.14); --bad-ink:#ff9b91;--warn-ink:#e8b04b; --low:rgba(255,255,255,.06); --low-ink:#b9b7b2; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6); --shadow-md:0 8px 20px -8px rgba(0,0,0,.55); --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 30px 70px -30px rgba(0,0,0,.8); --shadow-xl:0 34px 60px -22px rgba(0,0,0,.75); } /* ── BASE — the things every page gets for free ─────────────────────────── */ ::selection{background:rgba(160,150,125,.30)} :focus-visible{outline:2px solid var(--ring-focus);outline-offset:2px} .num,.tnum{font-family:var(--font-display);font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important} } /* ═══════════════════════════════════════════════════════════════════════════ THE FEEL — what a control does when you touch it ──────────────────────────────────────────────── Justin, 3 Oct 2026: "you also showed me a catalog of animations earlier like the buttons having actions when you press them ... i want to make sure the UX features like that are top notch." Before this there was no answer to "what does a button do when pressed" — there were six answers. Four pages invented their own `:active` (a tint on the Big Board's card nav and its sheet, `transform:none` on the mock draft's AI button, `translateY(1px)` twice in the account panel) and every other control on the site did nothing at all. On a phone that is the common case, and a button that does not acknowledge a press reads as a button that did not register it — which is how people double-tap and submit twice. So the feel is declared ONCE, here, like every other vocabulary this file has had to collapse. FOUR THINGS WORTH KNOWING ABOUT HOW IT IS WRITTEN: 1. `:where()` gives every selector below ZERO specificity. A page that genuinely needs a different press keeps it by writing an ordinary rule — nothing here can win an argument with page CSS, and nothing here needs an `!important` to do its job. That is deliberate: a base layer that fights the pages is a base layer people stop linking. 2. Hover is behind `(hover:hover) and (pointer:fine)`. A touch device without this gets "sticky hover" — the lift applies on tap and STAYS until you tap elsewhere, which looks like a stuck button. Press is not gated, because press is the state touch actually has. 3. Reduced motion does not mean no feedback. The global rule above kills transitions, and movement is dropped below too, but the press still changes the SURFACE so the control is visibly acknowledging you. Taking the feedback away entirely would make the setting a downgrade rather than an accommodation. 4. `-webkit-tap-highlight-color:transparent` replaces the grey flash iOS paints over any tapped element. It is only safe to remove BECAUSE there is a press state underneath it; removing it on its own leaves a touch target with no feedback at all, which is worse than the grey box. The matching haptic lives in v2/shared/amd-feel.js and fires on commitments only, never on every tap. Its header explains why, and why an iPhone will not feel it. ═══════════════════════════════════════════════════════════════════════ */ :root{ --dur-press:90ms; /* faster than --dur-fast: a press must feel instant */ --press-y:1px; /* how far a control sinks. More than 1px reads as a wobble. */ } /* The set, written once so the gate can read it: anything a person presses. */ :where(button,[role="button"],summary,.btn,a.primary,a.ghost,a.cta,input[type="submit"]){ touch-action:manipulation; /* no 300ms wait for a double-tap */ -webkit-tap-highlight-color:transparent; transition:transform var(--dur-press) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } @media (hover:hover) and (pointer:fine){ :where(button,[role="button"],.btn,a.primary,a.ghost,a.cta):not(:disabled):not([aria-disabled="true"]):hover{ transform:translateY(calc(var(--press-y) * -1)); } } :where(button,[role="button"],summary,.btn,a.primary,a.ghost,a.cta,input[type="submit"]):not(:disabled):not([aria-disabled="true"]):active{ transform:translateY(var(--press-y)); box-shadow:var(--shadow-sm); } /* A control that cannot be used says so by being quiet, not by being hidden. */ :where(button,[role="button"],.btn,input[type="submit"]):disabled, :where(button,[role="button"],.btn,a)[aria-disabled="true"]{ opacity:.55;cursor:not-allowed;transform:none; } /* Something the page is waiting on should not look pressable while it waits. */ :where([aria-busy="true"]){cursor:progress} @media (prefers-reduced-motion:reduce){ /* Movement off, acknowledgement kept — see note 3 above. */ :where(button,[role="button"],summary,.btn,a.primary,a.ghost,a.cta,input[type="submit"]):hover, :where(button,[role="button"],summary,.btn,a.primary,a.ghost,a.cta,input[type="submit"]):active{ transform:none; } :where(button,[role="button"],summary,.btn,a.primary,a.ghost,a.cta,input[type="submit"]):not(:disabled):active{ background-color:var(--tint); } } /* ═══════════════════════════════════════════════════════════════════════════ THE RULES THAT AREN'T NUMBERS ───────────────────────────── 1. Phone first. Design at 390px wide, then let it grow. 2. One primary action per screen, in --accent-cta. Everything else is quiet. 3. Say it once. A label, a hint and a subtitle that repeat each other → keep one. 4. Dark navy = "yours / permanent" (hero, receipt, Scout Mode). Light = data. 5. Nothing floats over content it can cover. Floating controls reserve space. 6. Design every state: empty, loading (the shape of what's coming, not a spinner), error (say the fix), one item, 300 items, a very long name. 7. No emoji, no dashed borders, no gradient text, no position color-coding, no shimmer, no pulsing. 8. Numbers are tabular and set in American Grotesk Condensed (--font-display). Quiet ones are quieted with colour, and since 18 Oct 2026 may also drop to weight 400: the condensed face has a Regular now, so a number that asks for 400 finally gets it. 10. Two fonts, set in amd-fonts.css: --font-display (American Grotesk Condensed) for the one big line, section headings and titles; --font-text (Mona Sans) for everything else. Never name a font family directly. 9. Check it on screen at 390px and 1440px before calling it done. 11. Cards side by side end together. Use .amd-stack on the card and .amd-stack-foot on its last row — see the block above. 12. Credit every source, and put it last. A data credit goes at the foot of the thing it describes, at --t-tiny in --muted — never under the heading, where it takes the line the reader wanted. A CAVEAT is not a credit: "partial archive", "2025 season only" and the like change how the reader should read what follows, so those stay on top. 13. An optional label in a table header takes a reserved line in EVERY column, not only the columns that use it. A sub-label rendered just where it applies makes one column taller than its neighbour, and a ragged header over an even table is the thing that reads as unpolished even when every border lines up. Reserve it in the markup — an always- rendered empty element — rather than by a CSS rule someone has to remember. Two notes on one column share the reserved line; they never stack into a third. ═══════════════════════════════════════════════════════════════════════════ */ /* ── SCHOOL CRESTS ───────────────────────────────────────────────────────── One light disc in both themes, and object-fit:contain rather than cover so a wide wordmark is not cropped into an unreadable square. The padding keeps the mark off the rim. */ .amd-crest{background:var(--logo-disc); box-shadow:0 0 0 1.5px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.25)} /* ── CARDS SIDE BY SIDE END TOGETHER ─────────────────────────────────────── A grid stretches cards to the same height, but their contents still start at the top, so one extra line of description pushes that card's input and button below its neighbour's. Groups had exactly this: "You become the commissioner: you set the scoring and hold the invite code" wrapped to two lines, "Someone will have sent you an eight-character code" to one, and the two Create and Join rows sat at different heights. Shortening the copy fixes it until the next edit, a longer word, a bigger font or a narrower phone — the alignment would depend on a sentence nobody knew was load-bearing. So it is structural: the card becomes a column and its last row takes the slack, which holds at any length in any language. .amd-stack on the card .amd-stack-foot on the row that must sit at the bottom ───────────────────────────────────────────────────────────────────────── */ .amd-stack{display:flex;flex-direction:column} .amd-stack > .amd-stack-foot{margin-top:auto} /* NO ITALIC WAS BOUGHT. em and i default to italic, and with no italic cut the browser draws a slanted roman itself. Emphasis is Medium instead. Stated here rather than per page because the default is the browser's, so anywhere this rule does not reach is a place the oblique comes back. */ em,i,cite,address,dfn,var{font-style:normal} em,cite,dfn{font-weight:var(--w-med)}